RCFilters UI: Style adjustments for the FilterCapsuleMultiselectWidget

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

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
index b58dfdf..ca19c22 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
@@ -1,38 +1,34 @@
 .mw-rcfilters-ui-filterWrapperWidget {
        width: 100%;
-
-       .oo-ui-capsuleMultiselectWidget {
-               max-width: none;
-
-               &.oo-ui-widget-enabled .oo-ui-capsuleMultiselectWidget-handle {
-                       // TODO: Unify colors with official design palette
-                       background-color: #f8f9fa;
-                       border: 1px solid #a2a9b1;
-                       min-height: 5.5em;
-                       padding: 0.75em;
-
-               }
-       }
+       // Make sure this uses the interface direction, not the content direction
+       direction: ltr;
 
        &-popup {
                // We have to override OOUI's definition, which is set
                // on the inline style of the popup
-               margin-top: 2.4em !important;
+               margin-top: 2em !important; /* stylelint-disable-line declaration-no-important */
                max-width: 650px;
+
+               .oo-ui-popupWidget-body {
+                       max-height: 70vh;
+               }
+
+               .oo-ui-popupWidget-footer {
+                       background-color: #f8f9fa;
+                       text-align: right;
+                       padding: 0.5em;
+               }
        }
 
        &-search {
                max-width: none;
-               margin-top: -0.5em;
+               margin-top: -1px;
 
                input {
-                       // Make sure this uses the interface direction, not the content direction
+                       // We need to reiterate the directionality
+                       // for the input as well to literally override
+                       // a MediaWiki CSS rule that turns it 'ltr'
                        direction: ltr;
                }
        }
-
-       &-capsule-invalid-filter {
-               // TODO: Unify colors with official design palette
-               background: red;
-       }
 }