1 @import 'mediawiki.ui/variables';
2 @import 'mw.rcfilters.mixins';
4 .mw-rcfilters-ui-highlightColorPickerWidget {
13 // Override OOUI definition from padded popup; the definition
14 // forces the first-child to be margin-top:0; which overrides
15 // our definitions below where margin is 0.5em.
16 // We set up the margin-top as 0.5em for all circles so we get
17 // a consistent result
18 &.oo-ui-widget-enabled.oo-ui-optionWidget.oo-ui-buttonElement.oo-ui-buttonElement-frameless.oo-ui-buttonOptionWidget {
22 // Make the rule much more specific to override OOUI
23 .oo-ui-iconElement-icon.oo-ui-icon-check {
24 // Override OOUI icon dimensions
25 // The parent is 2em with 0.5em margin
26 // (see mw-rcfilters-mixin-circle below)
27 // so here we want 2em - 0.5em = 1.5em
30 // By eye, this is centered horizontally for the color circle
32 // Override OOUI rule on frameless icons
37 .oo-ui-iconElement-icon.oo-ui-icon-check {
38 // By eye, this is centered horizontally for the white circle
42 .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
43 // Override `border-style` to `dashed`
46 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
47 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
48 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
49 background-color: @highlight-none;
53 .mw-rcfilters-mixin-circle( @highlight-c1 );
55 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
56 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
57 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
58 background-color: @highlight-c1;
62 .mw-rcfilters-mixin-circle( @highlight-c2 );
64 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
65 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
66 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
67 background-color: @highlight-c2;
71 .mw-rcfilters-mixin-circle( @highlight-c3 );
73 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
74 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
75 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
76 background-color: @highlight-c3;
80 .mw-rcfilters-mixin-circle( @highlight-c4 );
82 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
83 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
84 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
85 background-color: @highlight-c4;
89 .mw-rcfilters-mixin-circle( @highlight-c5 );
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-c5;