X-Git-Url: https://git.heureux-cyclage.org/?p=lhc%2Fweb%2Fwiklou.git;a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.rcfilters%2Fstyles%2Fmw.rcfilters.ui.ChangesListWrapperWidget.less;h=5ef60e09d98f3e3ede0b68678d05b7d5d7712aea;hp=dc7afab1b5801a9529e8366a591893a773d7585d;hb=1d7a1bf8bddf0908e4f572c82268733f63126a13;hpb=fd00a806c0242548459f7711e665b1bc11c7f6a4

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
index dc7afab1b5..5ef60e09d9 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
@@ -34,6 +34,13 @@
 		}
 	}
 
+	// Rule needs to be specific
+	// We want the expand button to appear outside the color
+	// to match the way the general highlight background appears
+	&-enhanced-grey td:not( :nth-child( -n+2 ) ) {
+		background-color: #dee0e3;
+	}
+
 	h4:first-of-type {
 		margin-top: 0;
 		padding-top: 0;
@@ -77,14 +84,17 @@
 		// and then plus the general margin
 		width: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 )';
 		// And we want to shift the entire block to the left of the li
-		position: absolute;
-		left: 0;
+		position: relative;
+		// Negative left margin of width + padding
+		margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * -5 - @{result-circle-general-margin} )';
 
 		.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
 			display: inline-block;
 		}
 
-		div {
+		// This needs to be very specific, since these are
+		// position rules that should apply to all overrides
+		.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-ui-changesListWrapperWidget-highlights > div&-circle {
 			.box-sizing( border-box );
 			margin-right: @result-circle-margin;
 			vertical-align: middle;
@@ -114,66 +124,66 @@
 			.result-circle( c5 );
 		}
 	}
+}
 
-	// One color
-	.mw-rcfilters-highlight-color-c1 {
-		background-color: tint( @highlight-c1, 70% );
-	}
+// One color
+.mw-rcfilters-highlight-color-c1 {
+	.highlight-changesListWrapperWidget( tint( @highlight-c1, 70% ); );
+}
 
-	.mw-rcfilters-highlight-color-c2 {
-		background-color: tint( @highlight-c2, 70% );
-	}
+.mw-rcfilters-highlight-color-c2 {
+	.highlight-changesListWrapperWidget( tint( @highlight-c2, 70% ); );
+}
 
-	.mw-rcfilters-highlight-color-c3 {
-		background-color: tint( @highlight-c3, 70% );
-	}
+.mw-rcfilters-highlight-color-c3 {
+	.highlight-changesListWrapperWidget( tint( @highlight-c3, 70% ); );
+}
 
-	.mw-rcfilters-highlight-color-c4 {
-		background-color: tint( @highlight-c4, 70% );
-	}
+.mw-rcfilters-highlight-color-c4 {
+	.highlight-changesListWrapperWidget( tint( @highlight-c4, 70% ); );
+}
 
-	.mw-rcfilters-highlight-color-c5 {
-		background-color: tint( @highlight-c5, 70% );
-	}
+.mw-rcfilters-highlight-color-c5 {
+	.highlight-changesListWrapperWidget( tint( @highlight-c5, 70% ); );
+}
 
-	// Two colors
-	.highlight-color-mix( c1, c2 );
-	// Overriding .highlight-color-mix( c1, c3 ); to produce
-	// a custom color rather than the computed tint
-	// see https://phabricator.wikimedia.org/T161267
-	.mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c3 {
-		background-color: #ccdecc;
-	}
-	.highlight-color-mix( c1, c4 );
-	.highlight-color-mix( c1, c5 );
-	.highlight-color-mix( c2, c3 );
-	.highlight-color-mix( c2, c4 );
-	.highlight-color-mix( c2, c5 );
-	.highlight-color-mix( c3, c4 );
-	.highlight-color-mix( c3, c5 );
-	.highlight-color-mix( c4, c5 );
-
-	// Three colors
-	.highlight-color-mix( c1, c2, c3 );
-	.highlight-color-mix( c1, c2, c5 );
-	.highlight-color-mix( c1, c2, c4 );
-	.highlight-color-mix( c1, c3, c4 );
-	.highlight-color-mix( c1, c3, c5 );
-	.highlight-color-mix( c1, c4, c5 );
-	.highlight-color-mix( c2, c3, c4 );
-	.highlight-color-mix( c2, c3, c5 );
-	.highlight-color-mix( c2, c4, c5 );
-	.highlight-color-mix( c3, c4, c5 );
-
-	// Four colors
-	.highlight-color-mix( c1, c2, c3, c4 );
-	.highlight-color-mix( c1, c2, c3, c5 );
-	.highlight-color-mix( c1, c2, c4, c5 );
-	.highlight-color-mix( c1, c3, c4, c5 );
-	.highlight-color-mix( c2, c3, c4, c5 );
-
-	// Five colors:
-	.mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c2.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c4.mw-rcfilters-highlight-color-c5 {
-		background-color: tint( mix( @highlight-c1, mix( @highlight-c2, mix( @highlight-c3, average( @highlight-c4, @highlight-c5 ), 20% ), 20% ), 20% ), 15% );
-	}
+// Two colors
+.highlight-color-mix( c1, c2 );
+// Overriding .highlight-color-mix( c1, c3 ); to produce
+// a custom color rather than the computed tint
+// see https://phabricator.wikimedia.org/T161267
+.mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c3 {
+	.highlight-changesListWrapperWidget( #ccdecc );
+}
+.highlight-color-mix( c1, c4 );
+.highlight-color-mix( c1, c5 );
+.highlight-color-mix( c2, c3 );
+.highlight-color-mix( c2, c4 );
+.highlight-color-mix( c2, c5 );
+.highlight-color-mix( c3, c4 );
+.highlight-color-mix( c3, c5 );
+.highlight-color-mix( c4, c5 );
+
+// Three colors
+.highlight-color-mix( c1, c2, c3 );
+.highlight-color-mix( c1, c2, c5 );
+.highlight-color-mix( c1, c2, c4 );
+.highlight-color-mix( c1, c3, c4 );
+.highlight-color-mix( c1, c3, c5 );
+.highlight-color-mix( c1, c4, c5 );
+.highlight-color-mix( c2, c3, c4 );
+.highlight-color-mix( c2, c3, c5 );
+.highlight-color-mix( c2, c4, c5 );
+.highlight-color-mix( c3, c4, c5 );
+
+// Four colors
+.highlight-color-mix( c1, c2, c3, c4 );
+.highlight-color-mix( c1, c2, c3, c5 );
+.highlight-color-mix( c1, c2, c4, c5 );
+.highlight-color-mix( c1, c3, c4, c5 );
+.highlight-color-mix( c2, c3, c4, c5 );
+
+// Five colors:
+.mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c2.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c4.mw-rcfilters-highlight-color-c5 {
+	.highlight-changesListWrapperWidget( tint( mix( @highlight-c1, mix( @highlight-c2, mix( @highlight-c3, average( @highlight-c4, @highlight-c5 ), 20% ), 20% ), 20% ), 15% ) );
 }