RCFilters: Adjust unbalanced scan line in filter menu

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

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
index d9c42ba..928b483 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
@@ -1,34 +1,47 @@
 @import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.variables';
 
 .mw-rcfilters-ui-filterMenuHeaderWidget {
        &-title {
+               display: inline-block;
                font-size: 1.2em;
-               padding: 0.75em 0.5em;
-               // TODO: Unify colors with official design palette
-               color: #54595d;
+               padding: 0.75em 0 0.75em 0.5em;
+               color: @colorGray5;
+       }
+
+       &-helpIcon {
+               position: absolute;
+               top: 50%;
+               .transform( translateY( -50% ) );
        }
 
        &-header {
-               border-bottom: 1px solid #c8ccd1;
-               background: #f8f9fa;
+               border-bottom: 1px solid @colorGray12;
+               background-color: @colorGray15;
 
                &-invert,
                &-highlight {
-                       width: 1em;
+                       min-width: 1em;
                        vertical-align: middle;
                        // Using the same padding that the filter item
                        // uses, so the button is aligned with the highlight
                        // buttons for the filters
-                       padding-right: 0.5em;
+                       padding-right: 12 / @font-size-system-ui / @font-size-vector;
                }
 
                &-back {
                        width: 1em;
                        vertical-align: middle;
-                       padding-left: 0.5em;
+
+                       .mw-rcfilters-ui-filterMenuHeaderWidget-backButton:first-child {
+                               // Overwrite `.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child`
+                               margin-left: 0;
+                       }
                }
 
                &-title {
+                       position: relative;
                        width: 100%;
                        vertical-align: middle;
                }