RCFilters: Add white background to legend

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

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 402f0ad..89acdc0 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
@@ -12,12 +12,15 @@
                }
        }
 
+       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} )';
+       }
+
        &-highlighted {
                ul {
                        list-style: none;
-                       // 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} )';
 
                        li {
                                list-style: none;
@@ -25,6 +28,10 @@
                }
        }
 
+       .mw-changeslist-legend {
+               background-color: #fff;
+       }
+
        // Correction for Enhanced RC
        // This is outside the scope of the 'highlights' wrapper
        table.mw-enhanced-rc {
@@ -104,7 +111,12 @@
 
        // Two colors
        .highlight-color-mix( c1, c2 );
-       .highlight-color-mix( c1, c3 );
+       // 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 );