RCFilters: Fix highlight container selector in Watchlist overrides

Bug: T198445
Change-Id: I01f0ccc964595c0f65aca6cbcac7828ebad33818

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index fad409b..390d873 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -83,6 +83,10 @@
                }
        }
 
+       .mw-rcfilters-ui-highlights {
+               display: none;
+       }
+
        .mw-changeslist {
                // Reserve space for the highlight circles
                ul,

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less
index 5f6fbea..920fec3 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less
@@ -1,4 +1,5 @@
 @import 'mw.rcfilters.mixins';
+@import 'mw.rcfilters.variables';
 
 .mw-rcfilters-ui-changesListWrapperWidget {
        ul {
@@ -8,59 +9,65 @@
                        list-style: none;
                }
        }
+}
 
-       // Make more specific for the overrides
-       div&-highlights {
+// Make more specific for the overrides
+div.mw-rcfilters-ui-highlights {
+       body.mw-rcfilters-ui-initialized & {
                display: inline-block;
+       }
 
-               &-color {
-                       &-none {
-                               display: inline-block;
-                               .mw-changeslist-watchedseen & {
-                                       .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
-                                               .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-grey, true );
-                                       }
-
-                                       .mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & {
-                                               .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-bluedot, true );
-                                       }
+       &-color {
+               &-none {
+                       display: inline-block;
+                       .mw-changeslist-watchedseen & {
+                               .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
+                                       .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-grey, true );
                                }
 
-                               .mw-changeslist-watchedunseen & {
-                                       .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
-                                               .mw-rcfilters-mixin-circle( @highlight-grey, @result-circle-diameter, 0, true, @highlight-grey );
-                                       }
+                               .mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & {
+                                       .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-bluedot, true );
+                               }
+                       }
 
-                                       .mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & {
-                                               .mw-rcfilters-mixin-circle( @highlight-bluedot, @result-circle-diameter, 0, true, @highlight-bluedot );
-                                       }
+                       .mw-changeslist-watchedunseen & {
+                               .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
+                                       .mw-rcfilters-mixin-circle( @highlight-grey, @result-circle-diameter, 0, true, @highlight-grey );
                                }
 
+                               .mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & {
+                                       .mw-rcfilters-mixin-circle( @highlight-bluedot, @result-circle-diameter, 0, true, @highlight-bluedot );
+                               }
                        }
 
-                       // Watchlist unseen highlighted fixes
-                       // Seen (empty circle)
-                       // There's no need to correct 'unseen' because that would be
-                       // a filled colorful circle, which is the regular rendering
-                       .mw-changeslist-watchedseen &-c1 {
-                               .mw-rcfilters-mixin-circle( @highlight-c1, @result-circle-diameter, 0, true, @highlight-c1, true );
-                       }
+               }
 
-                       .mw-changeslist-watchedseen &-c2 {
-                               .mw-rcfilters-mixin-circle( @highlight-c2, @result-circle-diameter, 0, true, @highlight-c2, true );
-                       }
+               // Watchlist unseen highlighted fixes
+               // Seen (empty circle)
+               // There's no need to correct 'unseen' because that would be
+               // a filled colorful circle, which is the regular rendering
+               .mw-changeslist-watchedseen &-c1 {
+                       .mw-rcfilters-mixin-circle( @highlight-c1, @result-circle-diameter, 0, true, @highlight-c1, true );
+               }
 
-                       .mw-changeslist-watchedseen &-c3 {
-                               .mw-rcfilters-mixin-circle( @highlight-c3, @result-circle-diameter, 0, true, @highlight-c3, true );
-                       }
+               .mw-changeslist-watchedseen &-c2 {
+                       .mw-rcfilters-mixin-circle( @highlight-c2, @result-circle-diameter, 0, true, @highlight-c2, true );
+               }
 
-                       .mw-changeslist-watchedseen &-c4 {
-                               .mw-rcfilters-mixin-circle( @highlight-c4, @result-circle-diameter, 0, true, @highlight-c4, true );
-                       }
+               .mw-changeslist-watchedseen &-c3 {
+                       .mw-rcfilters-mixin-circle( @highlight-c3, @result-circle-diameter, 0, true, @highlight-c3, true );
+               }
 
-                       .mw-changeslist-watchedseen &-c5 {
-                               .mw-rcfilters-mixin-circle( @highlight-c5, @result-circle-diameter, 0, true, @highlight-c5, true );
-                       }
+               .mw-changeslist-watchedseen &-c4 {
+                       .mw-rcfilters-mixin-circle( @highlight-c4, @result-circle-diameter, 0, true, @highlight-c4, true );
                }
+
+               .mw-changeslist-watchedseen &-c5 {
+                       .mw-rcfilters-mixin-circle( @highlight-c5, @result-circle-diameter, 0, true, @highlight-c5, true );
+               }
+       }
+
+       .mw-rcfilters-ui-changesListWrapperWidget & > div {
+               margin-right: @result-circle-margin;
        }
 }