X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.special.preferences.styles.ooui.less;h=b1931f486ae992ea0c097465ae682c1d39ed3ec7;hb=cd150ad0f1ca925a0904fb24b6585a9f34655ff4;hp=f83dcb03cae96fbb1f0139e2c116228591afeddd;hpb=2311183aa0e041c2fd9c6b50f319d8defe236554;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.special.preferences.styles.ooui.less b/resources/src/mediawiki.special.preferences.styles.ooui.less
index f83dcb03ca..b1931f486a 100644
--- a/resources/src/mediawiki.special.preferences.styles.ooui.less
+++ b/resources/src/mediawiki.special.preferences.styles.ooui.less
@@ -13,34 +13,43 @@
 .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;
 }
 
-/* Override OOUI styles so that dropdowns near the bottom of the form don't get clipped,
- * e.g.'Appearance' / 'Threshold for stub link formatting'. This is hacky and bad, it would be
- * better solved by setting overlays for the widgets, but we can't do it from PHP... */
-#preferences .oo-ui-panelLayout {
-	position: static;
-	overflow: visible;
-	.transform( none );
+/* 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;
 }
 
 #preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
@@ -142,6 +151,14 @@
 	}
 }
 
+/* Compact number inputs, used at "Display options" on "Recent changes" */
+.mw-htmlform-field-HTMLFloatField,
+.mw-htmlform-field-HTMLIntField {
+	.oo-ui-inputWidget {
+		max-width: 10em;
+	}
+}
+
 /* Expand the dropdown and textfield of "Time zone" field to the */
 /* usual maximum width and display them on separate lines. */
 #wpTimeCorrection .oo-ui-dropdownInputWidget,