@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
+@import 'mw.rcfilters.variables';
.mw-rcfilters-ui-highlightColorPickerWidget {
&-label {
display: block;
font-weight: bold;
- font-size: 1.2em;
+ font-size: 1.1425em;
}
&-buttonSelect {
&-color {
- // Override OOUI definition from padded popup; the definition
- // forces the first-child to be margin-top:0; which overrides
- // our definitions below where margin is 0.5em.
- // We set up the margin-top as 0.5em for all circles so we get
+ .mw-rcfilters-circle( @min-size-circle-colorpicker, @size-circle-colorpicker, @margin-circle );
+
+ // Override OOUI rule from padded popup;
+ // We set margin-top as ≈0.357em≈5px for all circles so we get
// a consistent result
- &.oo-ui-widget-enabled.oo-ui-optionWidget.oo-ui-buttonElement.oo-ui-buttonElement-frameless.oo-ui-buttonOptionWidget {
- margin-top: 0.5em;
+ &.oo-ui-buttonElement {
+ margin-top: @margin-circle;
+
+ // Override OOUI rule on frameless :first-child buttons
+ &:first-child {
+ margin-left: 0;
+ }
}
// Make the rule much more specific to override OOUI
- .oo-ui-iconElement-icon.oo-ui-icon-check {
- // Override OOUI icon dimensions
- // The parent is 2em with 0.5em margin
- // (see mw-rcfilters-mixin-circle below)
- // so here we want 2em - 0.5em = 1.5em
- width: 1.5em;
- height: 1.5em;
- // By eye, this is centered horizontally for the color circle
- margin-left: -0.1em;
+ &.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon.oo-ui-icon-check {
+ // Align centered horizontally within the color circle
+ top: -2px;
+ left: 4 / @font-size-system-ui / @font-size-vector;
// Override OOUI rule on frameless icons
opacity: 1;
}
&-none {
- .oo-ui-iconElement-icon.oo-ui-icon-check {
- // By eye, this is centered horizontally for the white circle
- margin-left: -0.2em;
- }
-
- .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
+ .mw-rcfilters-circle-color( @highlight-none, true );
// Override `border-style` to `dashed`
border-style: dashed;
+ &.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon.oo-ui-icon-check {
+ // Align centered horizontally in the dashed white circle with 1px border-width
+ left: 3 / @font-size-system-ui / @font-size-vector;
+ }
+
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
background-color: @highlight-none;
}
}
+
&-c1 {
- .mw-rcfilters-mixin-circle( @highlight-c1 );
+ .mw-rcfilters-circle-color( @highlight-c1, false );
+ border-color: @highlight-c1;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
background-color: @highlight-c1;
}
}
+
&-c2 {
- .mw-rcfilters-mixin-circle( @highlight-c2 );
+ .mw-rcfilters-circle-color( @highlight-c2, true );
+ border-color: @highlight-c2;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
background-color: @highlight-c2;
}
}
+
&-c3 {
- .mw-rcfilters-mixin-circle( @highlight-c3 );
+ .mw-rcfilters-circle-color( @highlight-c3, true );
+ border-color: @highlight-c3;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
background-color: @highlight-c3;
}
}
+
&-c4 {
- .mw-rcfilters-mixin-circle( @highlight-c4 );
+ .mw-rcfilters-circle-color( @highlight-c4, true );
+ border-color: @highlight-c4;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
background-color: @highlight-c4;
}
}
+
&-c5 {
- .mw-rcfilters-mixin-circle( @highlight-c5 );
+ .mw-rcfilters-circle-color( @highlight-c5, true );
+ border-color: @highlight-c5;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,