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.variables';
|
||||||
@import '../../minerva.less/minerva.mixins';
|
@import '../../minerva.less/minerva.mixins';
|
||||||
@import 'mediawiki.mixins.animation';
|
|
||||||
|
|
||||||
@animationDuration: 0.3s;
|
|
||||||
@placeholderBackgroundColor: @grayLightest;
|
@placeholderBackgroundColor: @grayLightest;
|
||||||
|
|
||||||
.lazy-image-placeholder {
|
.lazy-image-placeholder {
|
||||||
|
@ -27,27 +25,3 @@
|
||||||
// see T146298
|
// see T146298
|
||||||
display: inline-block;
|
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 '../../minerva.less/minerva.variables';
|
||||||
|
@import 'mediawiki.mixins.animation';
|
||||||
|
|
||||||
|
@animationDuration: 0.3s;
|
||||||
|
|
||||||
|
// Last modified bar styles
|
||||||
.last-modified-bar {
|
.last-modified-bar {
|
||||||
&.active {
|
&.active {
|
||||||
background-color: @lastModifiedBarActiveBackgroundColor;
|
background-color: @lastModifiedBarActiveBackgroundColor;
|
||||||
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #fff;
|
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 New Issue