mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-21 01:52:49 +00:00
de3f85bac7
Currently we are using the --color-inverted token, which is double inverted in night mode, yielding insufficient color contrast with the blue (progressive) background when the page has been recently modified. Instead, use the @color-inverted-fixed token, which stays white in night mode for backgrounds which are darker regardless of mode (additionally, switch back to using LESS variables as this is the new recommendation) Visual change due to bugfix Bug: T364123 Change-Id: Ib284abffd6907272e580986fb08c2b8dee5a1a47
73 lines
1.4 KiB
Plaintext
73 lines
1.4 KiB
Plaintext
@import '../../minerva.less/minerva.variables.less';
|
|
@import '../../minerva.less/minerva.mixins.less';
|
|
@import 'mediawiki.mixins.less';
|
|
@import 'toc.less';
|
|
@import 'watchStar.less';
|
|
@import 'page-issues/styles.less';
|
|
@import 'Toolbar.less';
|
|
|
|
.minerva-icon--download {
|
|
.cdx-mixin-css-icon( @cdx-icon-download, #54595d );
|
|
}
|
|
|
|
.minerva-icon--listBullet {
|
|
.cdx-mixin-css-icon( @cdx-icon-list-bullet, #54595d );
|
|
}
|
|
|
|
.mw-mf-page-center__mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
bottom: 0;
|
|
background: @opaque;
|
|
z-index: @z-index-above-content;
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
// Last modified bar styles
|
|
.last-modified-bar.active {
|
|
background-color: @background-color-progressive;
|
|
color: @color-inverted-fixed;
|
|
|
|
.last-modified-text-accent,
|
|
a {
|
|
color: @color-inverted-fixed;
|
|
}
|
|
|
|
.minerva-icon {
|
|
background-color: @color-inverted-fixed;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|