mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-16 18:58:45 +00:00
e72c0d7ba4
This is a second attempt at I3892afb5ed3df628e2845043cf3bbc22a9928921 that is cached HTML friendly and won't cause T234599. This time rather than solving the entire problem, we'll start rendering the menu on the server, to allow us in future to drop the Menu code Bug: T234650 Change-Id: Iea5406ef1c561f2907ec6132481007673aabf1e9
81 lines
1.5 KiB
Plaintext
81 lines
1.5 KiB
Plaintext
@import '../../minerva.less/minerva.variables.less';
|
|
@import '../../minerva.less/minerva.mixins.less';
|
|
@import 'mediawiki.mixins.animation';
|
|
|
|
@animationDuration: 0.3s;
|
|
|
|
// transparent-shield class can be removed when removed from MobileFrontend Skin.js
|
|
.transparent-shield,
|
|
.mw-mf-page-center__mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
bottom: 0;
|
|
background: @semiTransparent;
|
|
z-index: @z-indexAboveContent;
|
|
// don't use display: none because it's not animatable
|
|
visibility: hidden;
|
|
.transition( opacity 0.25s ease-in-out );
|
|
}
|
|
|
|
.navigation-enabled {
|
|
// transparent-shield class can be removed when removed from MobileFrontend Skin.js
|
|
.transparent-shield,
|
|
.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: #fff;
|
|
|
|
a {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Used by last modified and Main Menu items
|
|
.truncated-text {
|
|
.truncated-text();
|
|
}
|
|
|
|
@-webkit-keyframes fadeInImage {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@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 @animationDuration ease-in );
|
|
}
|