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

diff --git a/resources/src/mediawiki.special.preferences.styles.ooui.less b/resources/src/mediawiki.special.preferences.styles.ooui.less
index b1931f486a..02a0d22b9c 100644
--- 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 */