Merge "Selenium: replace UserLoginPage with BlankPage where possible"

[lhc/web/wiklou.git] / resources / src / mediawiki.special.preferences.styles.ooui.less

diff --git a/resources/src/mediawiki.special.preferences.styles.ooui.less b/resources/src/mediawiki.special.preferences.styles.ooui.less
index b1931f4..02a0d22 100644 (file)
--- a/resources/src/mediawiki.special.preferences.styles.ooui.less
+++ b/resources/src/mediawiki.special.preferences.styles.ooui.less
@@ -27,6 +27,12 @@
        padding: 1em 0;
 }
 
+// Support Edge: The `position: sticky` rule above causes the buttons to
+// disappear in RTL languages on Microsoft Edge. This magically fixes the issue. See T220706.
+#preferences {
+       filter: brightness( 1 );
+}
+
 /* This is needed because add extra buttons in a weird way */
 .mw-prefs-buttons .mw-htmlform-submit-buttons {
        display: inline;
@@ -45,89 +51,80 @@
        overflow: hidden;
 }
 
-/* Most outer Panellayout:
- * Decrease contrast of `border` slightly as padding/border combination is sufficient
- * accessibility wise and focus of content is more important here. */
-#preferences .oo-ui-panelLayout-framed {
-       border-color: #c8ccd1;
-}
+.mw-prefs-tabs {
+       .mw-prefs-fieldset-wrapper {
+               padding-left: 0;
+               padding-right: 0;
 
-#preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
-       border-width: 0;
-       border-radius: 0;
-       padding-left: 0;
-       padding-right: 0;
-       box-shadow: none;
+               &:first-child {
+                       padding-top: 0;
+               }
+
+               &:last-child {
+                       padding-bottom: 0;
+               }
+       }
 }
 
-.mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu a {
-       color: inherit;
-       text-decoration: none;
+.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed,
+.mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
+       /* Decrease contrast of `border` slightly as padding/border combination is sufficient
+        * accessibility wise and focus of content is more important here. */
+       border-color: #c8ccd1;
 }
 
-/* Disabled JavaScript */
+/* JavaScript disabled */
 .client-nojs {
-       /* Adjust the borders: frame each prefsection instead of the
-        * whole tabLayout wrapper */
-       #preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:first-child {
-               border-color: #c8ccd1;
-               border-width: 1px 0 0;
-       }
-
-       #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:last-child {
-               padding-bottom: 0;
-               margin-bottom: 0;
-       }
-
-       /* Fake Tabs to address reflow */
-       .mw-prefs-faketabs {
+       // Disable .oo-ui-panelLayout-framed on outer wrapper
+       .mw-prefs-tabs-wrapper {
                border-width: 0;
                border-radius: 0;
-               .box-shadow( none );
+       }
 
-               > .oo-ui-menuLayout > .oo-ui-menuLayout-content > .oo-ui-stackLayout {
-                       margin-bottom: 1em;
+       .mw-prefs-tabs {
+               // Hide the tab menu when JS is disabled as we can't use this feature
+               > .oo-ui-menuLayout-menu {
+                       display: none;
                }
 
-               /* Hide the tab menu when JS is disabled as we can't use this feature */
-               > .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
-                       display: none;
+               .mw-prefs-section-fieldset {
+                       // <legend> is hard to style, so apply border to top of group
+                       > .oo-ui-fieldsetLayout-group {
+                               padding-top: 1.5em;
+                               border-top: 1px solid #c8ccd1;
+                       }
+
+                       // Remove spacing between legend and underline
+                       &.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
+                               margin-bottom: 0;
+                       }
+               }
+
+               // Spacing between sections
+               > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
+                       margin-bottom: 1em;
                }
        }
 }
 
-/* Enabled JavaScript
- * Hide top level legends when JS is enabled, as they will not be visible
- * when the real tabLayout is built */
-.client-js #preferences {
+/* JavaScript enabled */
+.client-js .mw-prefs-tabs {
        .oo-ui-tabPanelLayout {
-               padding-top: 0.5em;
+               // Panels don't need borders as the IndexLayout is inside a framed wrapper.
+               border: 0;
 
-               & > fieldset > legend {
+               // Hide section legend, only used in nojs mode
+               > fieldset > legend {
                        display: none;
                }
        }
 
-       .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
-               margin-top: 2.286em; /* equals `32px` at `font-size: 14px;` */
-               margin-bottom: 0;
-               border-width: 0;
-               border-radius: 0;
-               padding: 0;
-               box-shadow: none;
-
-               &:first-child {
-                       margin-top: 0.85714286em;
-               }
-
-               .oo-ui-panelLayout-framed:first-child {
-                       margin-top: 0;
+       // Hide all but the first panel before infusion
+       &:not( .mw-prefs-tabs-infused ) {
+               .oo-ui-tabPanelLayout:not( :first-child ) {
+                       display: none;
                }
        }
-
-       > .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header {
-               margin-bottom: 1em;
-       }
 }
 
 /* Make the "Basic information" section more compact */