1 @import 'mw.rcfilters.mixins';
3 .mw-rcfilters-ui-highlightColorPickerWidget {
12 // Override OOUI definition from padded popup; the definition
13 // forces the first-child to be margin-top:0; which overrides
14 // our definitions below where margin is 0.5em.
15 // We set up the margin-top as 0.5em for all circles so we get
16 // a consistent result
17 &.oo-ui-widget-enabled.oo-ui-optionWidget.oo-ui-buttonElement.oo-ui-buttonElement-frameless.oo-ui-buttonOptionWidget {
21 // Make the rule much more specific to override OOUI
22 .oo-ui-iconElement-icon.oo-ui-icon-check {
23 // Override OOUI icon dimensions
24 // The parent is 2em with 0.5em margin
25 // (see mw-rcfilters-mixin-circle below)
26 // so here we want 2em - 0.5em = 1.5em
29 // By eye, this is centered horizontally for the color circle
34 .oo-ui-iconElement-icon.oo-ui-icon-check {
35 // By eye, this is centered horizontally for the white circle
39 .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
40 // Override border to dashed
41 border: 1px dashed #565656;
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-none;
50 .mw-rcfilters-mixin-circle( @highlight-c1 );
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-c1;
59 .mw-rcfilters-mixin-circle( @highlight-c2 );
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-c2;
68 .mw-rcfilters-mixin-circle( @highlight-c3 );
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-c3;
77 .mw-rcfilters-mixin-circle( @highlight-c4 );
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-c4;
86 .mw-rcfilters-mixin-circle( @highlight-c5 );
88 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
89 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
90 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
91 background-color: @highlight-c5;