mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-09-24 18:58:29 +00:00
Hygiene: lazy loading animations do not need to be render blocking
The transition only happens when images are loaded via JavaScript so limit the styles to a file loaded via JS NOT render blocking CSS Change-Id: I56661db13e7fbb400a05b13c369d8598df449297
This commit is contained in:
parent
4aba34a5ed
commit
fcaf244cc4
|
@ -1,8 +1,6 @@
|
|||
@import '../../minerva.less/minerva.variables';
|
||||
@import '../../minerva.less/minerva.mixins';
|
||||
@import 'mediawiki.mixins.animation';
|
||||
|
||||
@animationDuration: 0.3s;
|
||||
@placeholderBackgroundColor: @grayLightest;
|
||||
|
||||
.lazy-image-placeholder {
|
||||
|
@ -27,27 +25,3 @@
|
|||
// see T146298
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// 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 );
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInImage {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInImage {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,12 +1,40 @@
|
|||
@import '../../minerva.less/minerva.variables';
|
||||
@import 'mediawiki.mixins.animation';
|
||||
|
||||
@animationDuration: 0.3s;
|
||||
|
||||
// Last modified bar styles
|
||||
.last-modified-bar {
|
||||
&.active {
|
||||
background-color: @lastModifiedBarActiveBackgroundColor;
|
||||
|
||||
color: #fff;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-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 );
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue