2019-08-08 20:01:03 +00:00
|
|
|
@import '../../minerva.less/minerva.variables.less';
|
|
|
|
@import '../../minerva.less/minerva.mixins.less';
|
2018-07-05 22:46:53 +00:00
|
|
|
@import 'mediawiki.mixins.animation';
|
2018-04-13 17:17:36 +00:00
|
|
|
|
2018-07-05 22:46:53 +00:00
|
|
|
@animationDuration: 0.3s;
|
|
|
|
|
2019-10-04 15:05:37 +00:00
|
|
|
.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;
|
2019-10-23 04:50:47 +00:00
|
|
|
.transition( opacity @transition-duration-base ease-in-out; );
|
2019-10-04 15:05:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.navigation-enabled {
|
|
|
|
.mw-mf-page-center__mask {
|
|
|
|
visibility: visible;
|
|
|
|
opacity: 0.5;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-03 22:00:27 +00:00
|
|
|
// Flip the arrow in table of contents when toggled
|
2019-08-30 00:02:35 +00:00
|
|
|
.toctogglecheckbox:checked ~ .toctitle .mw-ui-icon:last-child {
|
|
|
|
&:before {
|
2019-09-03 22:00:27 +00:00
|
|
|
.transform( rotate( -180deg ) );
|
2019-08-30 00:02:35 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-07-05 22:46:53 +00:00
|
|
|
// Last modified bar styles
|
2018-04-13 17:17:36 +00:00
|
|
|
.last-modified-bar {
|
|
|
|
&.active {
|
2018-07-05 22:40:51 +00:00
|
|
|
background-color: @lastModifiedBarActiveBackgroundColor;
|
2018-04-13 17:17:36 +00:00
|
|
|
color: #fff;
|
2018-07-05 22:46:53 +00:00
|
|
|
|
2018-04-13 17:17:36 +00:00
|
|
|
a {
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2018-07-05 22:46:53 +00:00
|
|
|
|
2018-07-05 22:51:27 +00:00
|
|
|
// Used by last modified and Main Menu items
|
|
|
|
.truncated-text {
|
|
|
|
.truncated-text();
|
|
|
|
}
|
|
|
|
|
2018-07-05 22:46:53 +00:00
|
|
|
@-webkit-keyframes fadeInImage {
|
|
|
|
from {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
2018-12-12 23:20:10 +00:00
|
|
|
|
2018-07-05 22:46:53 +00:00
|
|
|
to {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeInImage {
|
|
|
|
from {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
2018-12-12 23:20:10 +00:00
|
|
|
|
2018-07-05 22:46:53 +00:00
|
|
|
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 );
|
|
|
|
}
|