1 @import 'mw.rcfilters.mixins';
3 .mw-rcfilters-ui-highlightColorPickerWidget {
12 // Make the rule much more specific to override OOUI
13 .oo-ui-iconElement-icon.oo-ui-icon-check {
14 // Override OOUI icon dimensions
15 // The parent is 2em with 0.5em margin
16 // (see mw-rcfilters-mixin-circle below)
17 // so here we want 2em - 0.5em = 1.5em
20 // By eye, this is centered horizontally for the color circle
25 .oo-ui-iconElement-icon.oo-ui-icon-check {
26 // By eye, this is centered horizontally for the white circle
30 .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
31 // Override border to dashed
32 border: 1px dashed #565656;
34 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
35 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
36 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
37 background-color: @highlight-none;
41 .mw-rcfilters-mixin-circle( @highlight-c1 );
43 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
44 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
45 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
46 background-color: @highlight-c1;
50 .mw-rcfilters-mixin-circle( @highlight-c2 );
52 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
53 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
54 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
55 background-color: @highlight-c2;
59 .mw-rcfilters-mixin-circle( @highlight-c3 );
61 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
62 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
63 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
64 background-color: @highlight-c3;
68 .mw-rcfilters-mixin-circle( @highlight-c4 );
70 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
71 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
72 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
73 background-color: @highlight-c4;
77 .mw-rcfilters-mixin-circle( @highlight-c5 );
79 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
80 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
81 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
82 background-color: @highlight-c5;