From 40d2d66f4475a64b4ec3ce7f5b6046fd5d97160b Mon Sep 17 00:00:00 2001 From: Volker E Date: Sat, 30 Jun 2018 15:26:12 +0200 Subject: [PATCH 1/1] Special:Preferences: Replace OOUI preferences CSS by LESS file Also use 'mediawiki.mixins' and structure file in LESS way. Change-Id: I3de02eb3996c1ebe9536067df593d3096a5f1eaa --- resources/Resources.php | 2 +- ...wiki.special.preferences.styles.ooui.less} | 132 ++++++++++-------- 2 files changed, 72 insertions(+), 62 deletions(-) rename resources/src/{mediawiki.special.preferences.styles.ooui.css => mediawiki.special.preferences.styles.ooui.less} (51%) 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.less similarity index 51% rename from resources/src/mediawiki.special.preferences.styles.ooui.css rename to resources/src/mediawiki.special.preferences.styles.ooui.less index fda049b4ac..ecf6887e4a 100644 --- a/resources/src/mediawiki.special.preferences.styles.ooui.css +++ b/resources/src/mediawiki.special.preferences.styles.ooui.less @@ -1,9 +1,11 @@ +@import 'mediawiki.mixins'; + /* 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; + border: 1px solid #fde29b; padding: 0.5em; } /* Authenticated email field has its own class too. Unstyled by default */ @@ -13,8 +15,8 @@ /* This is needed because add extra buttons in a weird way */ .mw-prefs-buttons .mw-htmlform-submit-buttons { - margin: 0; display: inline; + margin: 0; } .mw-prefs-buttons { @@ -40,16 +42,15 @@ #preferences .oo-ui-panelLayout { position: static; overflow: visible; - -webkit-transform: none; - 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; + box-shadow: none; } .mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu a { @@ -57,77 +58,86 @@ 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; -} +/* 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; + } -.client-nojs .mw-prefs-faketabs { - border-width: 0; - border-radius: 0; - box-shadow: none; -} + #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:last-child { + padding-bottom: 0; + margin-bottom: 0; + } -.client-nojs .mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-content > .oo-ui-stackLayout { - margin-bottom: 1em; -} + /* Fake Tabs to address reflow */ + .mw-prefs-faketabs { + border-width: 0; + border-radius: 0; + .box-shadow( none ); -/* 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; -} + > .oo-ui-menuLayout > .oo-ui-menuLayout-content > .oo-ui-stackLayout { + margin-bottom: 1em; + } -.client-nojs #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:last-child { - padding-bottom: 0; - margin-bottom: 0; + /* Hide the tab menu when JS is disabled as we can't use this feature */ + > .oo-ui-menuLayout > .oo-ui-menuLayout-menu { + display: none; + } + } } -/* Hide top level legends when JS is enabled, as they will not be visible +/* 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 > fieldset > legend { - display: none; -} +.client-js #preferences { + .oo-ui-tabPanelLayout { + padding-top: 0.5em; -.client-js #preferences .oo-ui-tabPanelLayout { - padding-top: 0.5em; -} + & > fieldset > legend { + display: none; + } + } -.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; -} + .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; -} + &:first-child { + margin-top: 0.85714286em; + } + } -.client-js #preferences > .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header { - margin-bottom: 1em; + > .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; +#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 */ -- 2.20.1