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;
54 .mw-rcfilters-circle-color( @highlight-c1, false );
55 border-color: @highlight-c1;
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;
64 .mw-rcfilters-circle-color( @highlight-c2, true );
65 border-color: @highlight-c2;
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;
74 .mw-rcfilters-circle-color( @highlight-c3, true );
75 border-color: @highlight-c3;
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;
84 .mw-rcfilters-circle-color( @highlight-c4, true );
85 border-color: @highlight-c4;
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;
94 .mw-rcfilters-circle-color( @highlight-c5, true );
95 border-color: @highlight-c5;
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;