Merge "auth: Follow up on e907d4328dc3e"

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / styles / mw.rcfilters.ui.HighlightColorPickerWidget.less

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less
index ee8ad85..4fa5183 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less
@@ -1,45 +1,48 @@
 @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-circle-color( @highlight-none, true );
+                               // Override `border-style` to `dashed`
+                               border-style: dashed;
 
-                               .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
-                               // Override border to dashed
-                               border: 1px dashed @colorGray5;
+                               &.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,
@@ -47,8 +50,10 @@
                                        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,
@@ -56,8 +61,10 @@
                                        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,
@@ -65,8 +72,10 @@
                                        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,
@@ -74,8 +83,10 @@
                                        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,
@@ -83,8 +94,10 @@
                                        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,