mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/header.less
Jon Robson 89c99df5ef Invert all icons in UI that use background-image
Bug: T356822
Change-Id: I02e89837310009135d084ba31ab76fe2be5907af
2024-03-01 15:09:35 -06: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-night-mode-clientpref-1 {
// 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-night-mode-clientpref-2 {
.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();
}
}
}