mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-24 10:49:25 +00:00
3c0559a71d
Consolidates the CSS responsible for styling chevrons into one implementation. This removes the need for custom padding and background positioning for the following components: - "more" menu - user menu - watchstar - language button - languge button in sticky header Instead of absolutely positioning the chevron on these components, the parent label element is set to `display: inline-flex` so that the chevron is vertically aligned and given enough space by default. The watchstar, although not a chevron, is also given the `display: inline-flex` treatment so that it can be aligned with other elements in the toolbar. This new implementation requires splitting the watchstar component into legacy and modern due to a quirk in Firefox that causes a bug with the watchstar in legacy Vector. NOTE: This change causes visual changes due to the difference in centering the chevrons via flexbox vs percentage positions. Bug: T308344, T310838 Change-Id: Ie9e0fce1366cd25a5899fee49770de4a09424fe2
39 lines
998 B
Plaintext
39 lines
998 B
Plaintext
/**
|
|
* Vector legacy stylesheets
|
|
* See '../common/common.less' for common screen and print Vector stylesheets.
|
|
*/
|
|
|
|
@media screen {
|
|
// Layouts
|
|
@import './layouts/screen.less';
|
|
|
|
// Legacy specific components
|
|
@import './components/MenuDropdown.less';
|
|
@import './components/MenuTabs.less';
|
|
@import './components/SearchBox.less';
|
|
@import './components/Sidebar.less';
|
|
@import './components/TabWatchstarLink.less';
|
|
@import './components/UserLinks.less';
|
|
|
|
// Overrides
|
|
// Since these override declarations in ResourceLoaderSkinModule they require
|
|
// the `skin-vector-legacy` class for greater specificity. See T288739.
|
|
// FIXME: This can be considered for removal in future or can be repurposed as a skin
|
|
// variable when modern and legacy Vector use different skin keys.
|
|
.skin-vector-legacy {
|
|
a.new {
|
|
color: #ba0000;
|
|
}
|
|
|
|
a.new:visited,
|
|
.vector-menu-tabs .new a,
|
|
.vector-menu-tabs .new a:visited {
|
|
color: #a55858;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
@import './layouts/print.less';
|
|
}
|