1 @import 'mw.rcfilters.mixins';
3 .mw-rcfilters-ui-highlightColorPickerWidget {
12 .oo-ui-iconElement-icon {
18 .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
19 // Override border to dashed
20 border: 1px dashed #565656;
22 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
23 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
24 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
25 background-color: @highlight-none;
29 .mw-rcfilters-mixin-circle( @highlight-c1 );
31 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
32 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
33 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
34 background-color: @highlight-c1;
38 .mw-rcfilters-mixin-circle( @highlight-c2 );
40 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
41 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
42 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
43 background-color: @highlight-c2;
47 .mw-rcfilters-mixin-circle( @highlight-c3 );
49 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
50 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
51 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
52 background-color: @highlight-c3;
56 .mw-rcfilters-mixin-circle( @highlight-c4 );
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-c4;
65 .mw-rcfilters-mixin-circle( @highlight-c5 );
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-c5;