X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.rcfilters%2Fstyles%2Fmw.rcfilters.ui.ChangesListWrapperWidget.less;h=8f3bacf04ac996b4d4bf830175a90c64fbedac86;hb=252fa957ad2442d25ce2d5b7f06ecfd71da2c1f9;hp=dc7afab1b5801a9529e8366a591893a773d7585d;hpb=4bc00adea2ebd9b8b838650e9ed0d751632c71ff;p=lhc%2Fweb%2Fwiklou.git

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..8f3bacf04a 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
@@ -1,11 +1,13 @@
+@import 'mediawiki.ui/variables';
 @import 'mw.rcfilters.mixins';
+@import 'mw.rcfilters.variables';
 
 @keyframes fadeBlue {
 	60% {
-		border-top-color: #36c;
+		border-top-color: @colorProgressive;
 	}
 	100% {
-		border-top-color: #c8ccd1;
+		border-top-color: @colorGray12;
 	}
 }
 
@@ -19,7 +21,7 @@
 
 	&-previousChangesIndicator {
 		margin: 10px 0;
-		border-top: 2px solid #c8ccd1;
+		border-top: 2px solid @colorGray12;
 		animation: 1s ease fadeBlue;
 	}
 
@@ -34,15 +36,11 @@
 		}
 	}
 
-	h4:first-of-type {
-		margin-top: 0;
-		padding-top: 0;
-	}
-
-	ul {
-		// Each li's margin-left should be the width of the highlights
-		// element + the margin
-		margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )';
+	// 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: @light-gray;
 	}
 
 	&-highlighted {
@@ -56,15 +54,15 @@
 	}
 
 	.mw-changeslist-legend {
-		background-color: #fff;
+		background-color: @background-color-base;
 	}
 
 	// Correction for Enhanced RC
 	// This is outside the scope of the 'highlights' wrapper
-	table.mw-enhanced-rc {
-		margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )';
+	table.mw-enhanced-rc td {
+		vertical-align: middle;
 
-		td:last-child {
+		&:last-child {
 			width: 100%;
 		}
 	}
@@ -77,14 +75,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 +115,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( @light-green );
+}
+.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% ) );
 }