resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less

   1 @import 'mediawiki.ui/variables';
   2 @import 'mw.rcfilters.mixins';
   3 @import 'mw.rcfilters.variables';
   4
   5 .mw-rcfilters-ui-highlightColorPickerWidget {
   6         &-label {
   7                 display: block;
   8                 font-weight: bold;
   9                 font-size: 1.1425em;
  10         }
  11
  12         &-buttonSelect {
  13                 &-color {
  14                         .mw-rcfilters-circle( @min-size-circle-colorpicker, @size-circle-colorpicker, @margin-circle );
  15
  16                         // Override OOUI rule from padded popup;
  17                         // We set margin-top as ≈0.357em≈5px for all circles so we get
  18                         // a consistent result
  19                         &.oo-ui-buttonElement {
  20                                 margin-top: @margin-circle;
  21
  22                                 // Override OOUI rule on frameless :first-child buttons
  23                                 &:first-child {
  24                                         margin-left: 0;
  25                                 }
  26                         }
  27
  28                         // Make the rule much more specific to override OOUI
  29                         &.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon.oo-ui-icon-check {
  30                                 // Align centered horizontally within the color circle
  31                                 top: -2px;
  32                                 left: 4 / @font-size-system-ui / @font-size-vector;
  33                                 // Override OOUI rule on frameless icons
  34                                 opacity: 1;
  35                         }
  36
  37                         &-none {
  38                                 .mw-rcfilters-circle-color( @highlight-none, true );
  39                                 // Override `border-style` to `dashed`
  40                                 border-style: dashed;
  41
  42                                 &.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon.oo-ui-icon-check {
  43                                         // Align centered horizontally in the dashed white circle with 1px border-width
  44                                         left: 3 / @font-size-system-ui / @font-size-vector;
  45                                 }
  46
  47                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  48                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  49                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  50                                         background-color: @highlight-none;
  51                                 }
  52                         }
  53
  54                         &-c1 {
  55                                 .mw-rcfilters-circle-color( @highlight-c1, false );
  56                                 border-color: @highlight-c1;
  57
  58                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  59                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  60                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  61                                         background-color: @highlight-c1;
  62                                 }
  63                         }
  64
  65                         &-c2 {
  66                                 .mw-rcfilters-circle-color( @highlight-c2, true );
  67                                 border-color: @highlight-c2;
  68
  69                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  70                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  71                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  72                                         background-color: @highlight-c2;
  73                                 }
  74                         }
  75
  76                         &-c3 {
  77                                 .mw-rcfilters-circle-color( @highlight-c3, true );
  78                                 border-color: @highlight-c3;
  79
  80                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  81                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  82                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  83                                         background-color: @highlight-c3;
  84                                 }
  85                         }
  86
  87                         &-c4 {
  88                                 .mw-rcfilters-circle-color( @highlight-c4, true );
  89                                 border-color: @highlight-c4;
  90
  91                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  92                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  93                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  94                                         background-color: @highlight-c4;
  95                                 }
  96                         }
  97
  98                         &-c5 {
  99                                 .mw-rcfilters-circle-color( @highlight-c5, true );
 100                                 border-color: @highlight-c5;
 101
 102                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
 103                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
 104                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
 105                                         background-color: @highlight-c5;
 106                                 }
 107                         }
 108                 }
 109         }
 110 }