mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/header.less
Moh'd Khier Abualruz 5d6b866890 Rename the skin night mode classes to more readable classes
The classes:
- skin-night-mode-clientpref-0
- skin-night-mode-clientpref-1
- skin-night-mode-clientpref-2
is being replaced with
- skin-theme-clientpref-day
- skin-theme-clientpref-night
- skin-theme-clientpref-os
- Moved $forceNightMode to be a text parameter (dat|night|os)
- Keep adding the old classes to the html element, to give the ability of gradual deployment

The preference is renamed from minerva-night-mode to minerva-theme (a follow up to consider
migrating existing values will follow).

The query string minervanightmode continues to behave the same but now
accepts other values such as day, night and os.

Bug: T359983
Change-Id: Ia253de68f94236e7fe2219b736dd6084c64ce838
2024-03-19 23:12:59 +00:00

102 lines
2.1 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: @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: @width-branding-box;
width: auto;
}
.search-box {
display: block;
width: @width-search-box;
max-width: @width-search-box;
}
}
}
// 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();
}
}
}