mediawiki-skins-MinervaNeue/resources/skins.minerva.scripts/styles.less
Volker E b28b80e222 styles: Apply Codex z-index tokens
Applying central Codex design tokens in new architecture.
This replaces all existing MN `z-index` tokens and comments on
replacement choice.

Bug: T285592
Change-Id: I23d794566898946a500c10713802d8dfaad993d1
2023-05-18 23:33:38 -07:00

66 lines
1.3 KiB
Plaintext

@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';
@import 'mediawiki.mixins.less';
.mw-mf-page-center__mask {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
bottom: 0;
background: @semiTransparent;
z-index: @z-index-overlay-backdrop;
// don't use display: none because it's not animatable
visibility: hidden;
transition: opacity @transition-duration-base ease-in-out;
}
.navigation-enabled {
.mw-mf-page-center__mask {
visibility: visible;
opacity: 0.5;
}
}
// Flip the arrow in table of contents when toggled
.toctogglecheckbox:checked ~ .toctitle .mw-ui-icon:last-child {
&::before {
transform: rotate( -180deg );
}
}
// Last modified bar styles
.last-modified-bar {
&.active {
background-color: @lastModifiedBarActiveBackgroundColor;
color: @color-inverted;
.last-modified-text-accent,
a {
color: @color-inverted;
}
}
}
// Used by last modified bar and in MobileFrontend (i.e. MobileSpecialPageFeed.php, ImageCarousel.js)
.truncated-text {
.text-overflow( @visible: false );
}
@keyframes fadeInImage {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
// When the image has loaded transition background color and image opacity
// for a fade-in effect
img.image-lazy-loaded {
animation: fadeInImage 300ms ease-in;
}