mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-26 00:25:40 +00:00
55bb37f2ab
Move feature classes to HTML element - this is significant for anonymous as placing the classes on the body tag breaks the browser's ability to parse the article concurrently with the stylesheet download, because inline scripts are spec'ed to be able to see document.styleSheets. Changes: * Feature classes are moved from BODY tag to HTML tag * For now disable localStorage storage until we've worked out the storage mechanism in core. Bug: T321498 Change-Id: Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
100 lines
2.9 KiB
Plaintext
100 lines
2.9 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import '../../common/mixins.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
// Header sizes defined in the description of T246170 and comment T246170#5957100
|
|
@padding-vertical-header: 0.125em;
|
|
@margin-top-header: 0.5em;
|
|
@margin-bottom-header: 2em;
|
|
|
|
// Logo sizes per specification in T245190.
|
|
@height-logo-icon: 3.125em;
|
|
|
|
.mw-header {
|
|
// A min-height is set to account for projects where no icon is set.
|
|
min-height: @height-logo-icon;
|
|
padding: 8px 0;
|
|
// Vertical centering of header elements (IE>=11), requires Flexbox.
|
|
.flex-display();
|
|
flex-wrap: nowrap;
|
|
// https://caniuse.com/#search=align-items
|
|
align-items: center;
|
|
|
|
.vector-header-start,
|
|
.vector-header-end {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.vector-header-end {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop-wide ) {
|
|
// Ensure search box is aligned with content when search thumbnails or JS is off
|
|
// FIXME: Remove html:not( .client-js ) when cache has cleared.
|
|
.vector-feature-page-tools-disabled & .vector-search-box:not( .vector-search-box-auto-expand-width ),
|
|
.vector-feature-page-tools-disabled:not( .client-js ) & .vector-search-box,
|
|
html:not( .client-js ) .vector-feature-page-tools-disabled & .vector-search-box {
|
|
padding-left: @size-search-expand;
|
|
}
|
|
|
|
// FIXME: Remove .client-js .vector-feature-page-tools-enabled when cache has cleared.
|
|
.client-js.vector-feature-page-tools-enabled & .vector-search-box.vector-search-box-auto-expand-width,
|
|
.client-js .vector-feature-page-tools-enabled & .vector-search-box.vector-search-box-auto-expand-width {
|
|
// Ensure search box is aligned with content when it autoexpands (i.e. search thumbnails)
|
|
margin-left: -@size-search-expand;
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
.vector-search-box {
|
|
margin-right: @margin-end-search;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-tablet ) {
|
|
/**
|
|
* Toggles the visibility of the search box at lower resolutions.
|
|
*/
|
|
&.vector-header-search-toggled {
|
|
.vector-header-start,
|
|
.search-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.vector-search-box-collapses > div {
|
|
display: block;
|
|
}
|
|
|
|
.vector-search-box {
|
|
// T284242#7206507: Widen the suggestion results to the edge of the search
|
|
// button at small resolutions.
|
|
position: relative;
|
|
margin-right: @margin-end-search;
|
|
|
|
// Override default max width at lower resolutions
|
|
> div {
|
|
max-width: none;
|
|
}
|
|
|
|
.vector-feature-page-tools-disabled & {
|
|
margin-left: @padding-horizontal-tabs;
|
|
}
|
|
}
|
|
|
|
// Make the menu below the search input wider, to match the width of the input+button
|
|
// rather than just the width of the input
|
|
.cdx-search-input__input-wrapper {
|
|
position: static;
|
|
}
|
|
|
|
// Since the end button's corner is now right above the menu's corner, don't use a
|
|
// rounded corner here (T310525)
|
|
.cdx-typeahead-search--expanded .cdx-search-input__end-button {
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|