SpecialPreferences: Make save button bar sticky

[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 baa9beb..b1931f4 100644 (file)
--- a/resources/src/mediawiki.special.preferences.styles.ooui.less
+++ b/resources/src/mediawiki.special.preferences.styles.ooui.less
@@ -13,25 +13,36 @@
 .mw-email-authenticated .oo-ui-labelWidget { }
 */
 
+/*
+ * Use `position: sticky` on supported browsers, degrades gracefully in
+ * all others, therefore no `@supports` feature query to reduce code complexity.
+ */
+.mw-prefs-buttons {
+       background-color: #fff;
+       position: -webkit-sticky;
+       position: sticky;
+       bottom: 0;
+       margin-top: -1px;
+       border-top: 1px solid #c8ccd1;
+       padding: 1em 0;
+}
+
 /* This is needed because add extra buttons in a weird way */
 .mw-prefs-buttons .mw-htmlform-submit-buttons {
        display: inline;
        margin: 0;
 }
 
-.mw-prefs-buttons {
-       margin-top: 1em;
-}
-
 #prefcontrol {
        margin-right: 0.5em;
 }
 
 /*
- * Hide, but keep accessible for screen-readers.
+ * Hide, when not keyboard focussed.
  */
 .client-js .mw-navigation-hint:not( :focus ) {
-       .mixin-screen-reader-text;
+       height: 0;
+       overflow: hidden;
 }
 
 /* Most outer Panellayout: