X-Git-Url: http://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.rcfilters%2Fstyles%2Fmw.rcfilters.ui.HighlightColorPickerWidget.less;h=deecd67eaf9179d4dc15d484bccec22d34913fa8;hb=b25bfcf779474da363ce2414e162596dd8a88508;hp=0adec46596e133302e7fb2046c6b82d6fa6ae196;hpb=3df3b575c6617df64ec98533cc7141bd2314e274;p=lhc%2Fweb%2Fwiklou.git

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 0adec46596..deecd67eaf 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less
@@ -1,44 +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 #54595d;
+				&.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,7 +51,8 @@
 				}
 			}
 			&-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,7 +61,8 @@
 				}
 			}
 			&-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,7 +71,8 @@
 				}
 			}
 			&-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,7 +81,8 @@
 				}
 			}
 			&-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,7 +91,8 @@
 				}
 			}
 			&-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,