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                         &-c1 {
  54                                 .mw-rcfilters-circle-color( @highlight-c1, false );
  55                                 border-color: @highlight-c1;
  56
  57                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  58                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  59                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  60                                         background-color: @highlight-c1;
  61                                 }
  62                         }
  63                         &-c2 {
  64                                 .mw-rcfilters-circle-color( @highlight-c2, true );
  65                                 border-color: @highlight-c2;
  66
  67                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  68                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  69                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  70                                         background-color: @highlight-c2;
  71                                 }
  72                         }
  73                         &-c3 {
  74                                 .mw-rcfilters-circle-color( @highlight-c3, true );
  75                                 border-color: @highlight-c3;
  76
  77                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  78                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  79                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  80                                         background-color: @highlight-c3;
  81                                 }
  82                         }
  83                         &-c4 {
  84                                 .mw-rcfilters-circle-color( @highlight-c4, true );
  85                                 border-color: @highlight-c4;
  86
  87                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  88                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  89                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  90                                         background-color: @highlight-c4;
  91                                 }
  92                         }
  93                         &-c5 {
  94                                 .mw-rcfilters-circle-color( @highlight-c5, true );
  95                                 border-color: @highlight-c5;
  96
  97                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  98                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  99                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
 100                                         background-color: @highlight-c5;
 101                                 }
 102                         }
 103                 }
 104         }
 105 }