mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-17 19:21:39 +00:00
59fd0cd5dc
All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
46 lines
1.8 KiB
Plaintext
46 lines
1.8 KiB
Plaintext
// A DropDownList is a ToggleList that extends downward.
|
|
|
|
.toggle-list__list--drop-down {
|
|
background: var( --background-color-base );
|
|
// The menu appears over the content and occupies no room within it.
|
|
position: absolute;
|
|
// If max-height is set and the height exceeds it, add a vertical scrollbar.
|
|
overflow-y: auto;
|
|
// The menu floats over content but below overlays.
|
|
z-index: @z-index-drawer;
|
|
box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px #a2a9b1;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transform: translateY( -8px );
|
|
|
|
// When cursor is pointer and -webkit-tap-highlight-color is set, the color does not seem to
|
|
// transition. Clear it.
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
.toggle-list-item:hover {
|
|
// Make the app feel like an app, not a JPEG. When hovering over a menu item, add a little
|
|
// interactivity.
|
|
background: var( --background-color-interactive );
|
|
}
|
|
}
|
|
|
|
// Without the minerva-animations-ready class, DropDownList can appear and
|
|
// perform its exit animation when the page loads in chrome (and possibly
|
|
// others).
|
|
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189
|
|
.minerva-animations-ready {
|
|
.toggle-list__list--drop-down {
|
|
// Animate menu visibility, opacity, and translation changes in and out. Visibility duration
|
|
// cannot be animated initially as it causes a flash on page load in Chromium due to
|
|
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189.
|
|
transition: opacity @transition-duration-base ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform @transition-duration-base ease-in-out, visibility @transition-duration-base ease-in-out;
|
|
}
|
|
}
|
|
|
|
.toggle-list__checkbox:checked ~ .toggle-list__list--drop-down {
|
|
transform: translateY( 0 );
|
|
// Reveal the list when checked.
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|