mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-24 14:23:53 +00:00
dd154b4ea7
The values have slightly changed: - Tablet breakpoint is decreased by 80px, pushing lesser devices into a mobile only experience but should make barely a difference to vast majority of our users. - Biggest difference is in `min-width-breakpoint-desktop`, which is increased by 120px in comparison to `@width-breakpoint-desktop: 1000px` Also removing one out-dated feature phone clause. TECHNICAL CHANGES: * The previous breakpoint was tied to the maximum content width. The previous maximum content width is preserved, and several media queries are adjusted to make use of it. * The header (logo) is not optimized for 640px-720px. For now a temporary fix is but in place which will be investigated as part of T366859 VISUAL CHANGES: * 6 visual changes which improve alignment in language and visual editor overlay and diffs (where wikidiff2 is not installed) Bug: T349793 Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779 Change-Id: I9552d8ad7509aae90e15edda26e786465773d3ac
111 lines
2.3 KiB
Plaintext
111 lines
2.3 KiB
Plaintext
.header-container {
|
|
border-bottom: @border-subtle;
|
|
padding: 0 @padding-content;
|
|
|
|
&.header-chrome {
|
|
background-color: var( --background-color-interactive );
|
|
border: 0;
|
|
box-shadow: inset 0 -1px 3px rgba( 0, 0, 0, 0.08 );
|
|
}
|
|
}
|
|
|
|
.minerva-header {
|
|
.navigation-drawer .toggle-list__toggle {
|
|
.cdx-mixin-button-layout-flush( 'start', true, 'large' );
|
|
}
|
|
|
|
.branding-box {
|
|
opacity: @opacity-icon-subtle; // T251135
|
|
|
|
a {
|
|
float: left;
|
|
margin-left: 5px;
|
|
font-size: 1em;
|
|
text-decoration: none;
|
|
color: var( --color-base );
|
|
|
|
span {
|
|
line-height: 0;
|
|
font-size: inherit;
|
|
}
|
|
|
|
> * {
|
|
float: left;
|
|
}
|
|
|
|
sup {
|
|
color: var( --color-subtle );
|
|
display: none;
|
|
|
|
.beta & {
|
|
display: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
// Search box should grow to fill rest of header
|
|
flex: 1 0 auto;
|
|
display: none;
|
|
}
|
|
|
|
// Fix cursor for Safari
|
|
#searchInput { // stylelint-disable-line selector-max-id
|
|
cursor: text;
|
|
}
|
|
}
|
|
|
|
@media screen and ( min-width: @min-width-breakpoint-tablet ) {
|
|
.minerva-header {
|
|
.branding-box {
|
|
// Handle logos that are larger than the set branding box width
|
|
// This will also cause the searchbox overlay to be misaligned with the .minerva-heading searchbox
|
|
min-width: @min-width-branding-box-ems;
|
|
width: auto;
|
|
}
|
|
|
|
.search-box {
|
|
display: block;
|
|
width: @width-search-box;
|
|
max-width: @width-search-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* FIXME: Remove when T366859 has been addressed */
|
|
@media screen and ( min-width: 720px ) {
|
|
.minerva-header {
|
|
.branding-box {
|
|
min-width: @T366859-min-width-branding-box-ems;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Night mode
|
|
html.skin-theme-clientpref-night {
|
|
// The following icons use background-image instead of mask-image.
|
|
// These can be removed if a fix for T358246 is found.
|
|
.minerva-icon.minerva-icon--search-base20,
|
|
.minerva-icon.minerva-icon--search,
|
|
.page-actions-menu__list .minerva-icon,
|
|
.mw-editsection .minerva-icon,
|
|
.toggle-list .minerva-icon,
|
|
.branding-box img {
|
|
.night-mode-invert-image();
|
|
}
|
|
}
|
|
|
|
@media ( prefers-color-scheme: dark ) {
|
|
html.skin-theme-clientpref-os {
|
|
.minerva-icon.minerva-icon--search-base20,
|
|
.minerva-icon.minerva-icon--search,
|
|
.page-actions-menu__list .minerva-icon,
|
|
.mw-editsection .minerva-icon,
|
|
.toggle-list .minerva-icon,
|
|
.branding-box img {
|
|
.night-mode-invert-image();
|
|
}
|
|
}
|
|
}
|