1 @import 'mediawiki.ui/variables';
2 @import 'mw.rcfilters.mixins';
3 @import 'mw.rcfilters.variables';
5 .mw-rcfilters-ui-highlightColorPickerWidget {
14 .mw-rcfilters-circle( @min-size-circle-colorpicker, @size-circle-colorpicker, @margin-circle );
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;
22 // Override OOUI rule on frameless :first-child buttons
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
32 left: 4 / @font-size-system-ui / @font-size-vector;
33 // Override OOUI rule on frameless icons
38 .mw-rcfilters-circle-color( @highlight-none, true );
39 // Override `border-style` to `dashed`
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;
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;
55 .mw-rcfilters-circle-color( @highlight-c1, false );
56 border-color: @highlight-c1;
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;
66 .mw-rcfilters-circle-color( @highlight-c2, true );
67 border-color: @highlight-c2;
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;
77 .mw-rcfilters-circle-color( @highlight-c3, true );
78 border-color: @highlight-c3;
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;
88 .mw-rcfilters-circle-color( @highlight-c4, true );
89 border-color: @highlight-c4;
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;
99 .mw-rcfilters-circle-color( @highlight-c5, true );
100 border-color: @highlight-c5;
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;