From: Volker E Date: Sat, 30 Jun 2018 13:26:12 +0000 (+0200) Subject: Special:Preferences: Replace OOUI preferences CSS by LESS file X-Git-Tag: 1.34.0-rc.0~4895^2 X-Git-Url: http://git.cyclocoop.org/%22%20.%20generer_url_ecrire%28%22suivi_revisions%22%29%20.%20%22?a=commitdiff_plain;h=40d2d66f4475a64b4ec3ce7f5b6046fd5d97160b;hp=ad1d6542e39c8f2aa423a542bb2c34a63d4c5718;p=lhc%2Fweb%2Fwiklou.git Special:Preferences: Replace OOUI preferences CSS by LESS file Also use 'mediawiki.mixins' and structure file in LESS way. Change-Id: I3de02eb3996c1ebe9536067df593d3096a5f1eaa --- diff --git a/resources/Resources.php b/resources/Resources.php index cafc1bc6b4..b724306735 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -2184,7 +2184,7 @@ return [ ], 'mediawiki.special.preferences.styles.ooui' => [ 'targets' => [ 'desktop', 'mobile' ], - 'styles' => 'resources/src/mediawiki.special.preferences.styles.ooui.css', + 'styles' => 'resources/src/mediawiki.special.preferences.styles.ooui.less', ], 'mediawiki.special.recentchanges' => [ 'scripts' => 'resources/src/mediawiki.special.recentchanges.js', diff --git a/resources/src/mediawiki.special.preferences.styles.ooui.css b/resources/src/mediawiki.special.preferences.styles.ooui.css deleted file mode 100644 index fda049b4ac..0000000000 --- a/resources/src/mediawiki.special.preferences.styles.ooui.css +++ /dev/null @@ -1,149 +0,0 @@ -/* Reuses colors from mediawiki.legacy/shared.css */ -.mw-email-not-authenticated .oo-ui-labelWidget, -.mw-email-none .oo-ui-labelWidget { - border: 1px solid #fde29b; - background-color: #fdf1d1; - color: #000; - padding: 0.5em; -} -/* Authenticated email field has its own class too. Unstyled by default */ -/* -.mw-email-authenticated .oo-ui-labelWidget { } -*/ - -/* This is needed because add extra buttons in a weird way */ -.mw-prefs-buttons .mw-htmlform-submit-buttons { - margin: 0; - display: inline; -} - -.mw-prefs-buttons { - margin-top: 1em; -} - -#prefcontrol { - margin-right: 0.5em; -} - -/* - * Hide, but keep accessible for screen-readers. - */ -.client-js .mw-navigation-hint { - overflow: hidden; - height: 0; - zoom: 1; -} - -/* 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; - -webkit-transform: none; - transform: none; -} - -#preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed { - border-width: 0; - border-radius: 0; - box-shadow: none; - padding-left: 0; - padding-right: 0; -} - -.mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu a { - color: inherit; - text-decoration: none; -} - -/* Adjust the borders when JS is disabled: frame each prefsection instead of the - * whole tabLayout wrapper */ -.client-nojs #preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:first-child { - border-color: #c8ccd1; - border-width: 1px 0 0; -} - -.client-nojs .mw-prefs-faketabs { - border-width: 0; - border-radius: 0; - box-shadow: none; -} - -.client-nojs .mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-content > .oo-ui-stackLayout { - margin-bottom: 1em; -} - -/* Hide the tab menu when JS is disabled as we can't use this feature */ -.client-nojs .mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu { - display: none; -} - -.client-nojs #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:last-child { - padding-bottom: 0; - margin-bottom: 0; -} - -/* Hide top level legends when JS is enabled, as they will not be visible - * when the real tabLayout is built */ -.client-js #preferences .oo-ui-tabPanelLayout > fieldset > legend { - display: none; -} - -.client-js #preferences .oo-ui-tabPanelLayout { - padding-top: 0.5em; -} - -.client-js #preferences .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; -} - -.client-js #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:first-child { - margin-top: 0.85714286em; -} - -.client-js #preferences > .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header { - margin-bottom: 1em; -} - -/* Make the "Basic information" section more compact */ -/* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */ -#mw-htmlform-info > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header { - width: 20%; - display: inline-block; - vertical-align: middle; - padding: 0; -} - -#mw-htmlform-info > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help { - margin-right: 0; -} - -#mw-htmlform-info > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { - width: 80%; - display: inline-block; - vertical-align: middle; -} - -/* Expand the dropdown and textfield of "Time zone" field to the */ -/* usual maximum width and display them on separate lines. */ -#wpTimeCorrection .oo-ui-dropdownInputWidget, -#wpTimeCorrection .oo-ui-textInputWidget { - display: block; - max-width: 50em; -} - -#wpTimeCorrection .oo-ui-textInputWidget { - margin-top: 0.5em; -} - -/* HACK: expand width of gadget descriptions. - * This should be moved to the Gadgets extension */ -#mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body { - max-width: none; -} diff --git a/resources/src/mediawiki.special.preferences.styles.ooui.less b/resources/src/mediawiki.special.preferences.styles.ooui.less new file mode 100644 index 0000000000..ecf6887e4a --- /dev/null +++ b/resources/src/mediawiki.special.preferences.styles.ooui.less @@ -0,0 +1,159 @@ +@import 'mediawiki.mixins'; + +/* Reuses colors from mediawiki.legacy/shared.css */ +.mw-email-not-authenticated .oo-ui-labelWidget, +.mw-email-none .oo-ui-labelWidget { + background-color: #fdf1d1; + color: #000; + border: 1px solid #fde29b; + padding: 0.5em; +} +/* Authenticated email field has its own class too. Unstyled by default */ +/* +.mw-email-authenticated .oo-ui-labelWidget { } +*/ + +/* 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. + */ +.client-js .mw-navigation-hint { + overflow: hidden; + height: 0; + zoom: 1; +} + +/* 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 ); +} + +#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; +} + +.mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu a { + color: inherit; + text-decoration: none; +} + +/* Disabled JavaScript */ +.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 { + border-width: 0; + border-radius: 0; + .box-shadow( none ); + + > .oo-ui-menuLayout > .oo-ui-menuLayout-content > .oo-ui-stackLayout { + margin-bottom: 1em; + } + + /* Hide the tab menu when JS is disabled as we can't use this feature */ + > .oo-ui-menuLayout > .oo-ui-menuLayout-menu { + display: none; + } + } +} + +/* 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 { + .oo-ui-tabPanelLayout { + padding-top: 0.5em; + + & > 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 > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header { + margin-bottom: 1em; + } +} + +/* Make the "Basic information" section more compact */ +/* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */ +#mw-htmlform-info { + > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header { + display: inline-block; + width: 20%; + padding: 0; + vertical-align: middle; + } + + > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help { + margin-right: 0; + } + + > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { + display: inline-block; + width: 80%; + vertical-align: middle; + } +} + +/* Expand the dropdown and textfield of "Time zone" field to the */ +/* usual maximum width and display them on separate lines. */ +#wpTimeCorrection .oo-ui-dropdownInputWidget, +#wpTimeCorrection .oo-ui-textInputWidget { + display: block; + max-width: 50em; +} + +#wpTimeCorrection .oo-ui-textInputWidget { + margin-top: 0.5em; +} + +/* HACK: expand width of gadget descriptions. + * This should be moved to the Gadgets extension */ +#mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body { + max-width: none; +}