mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-11-15 11:46:55 +00:00
e80cc06e03
Per T150814#2833030. Changes: * Round the preview's border. * Adjust the shadow cast by the preview. * Make both fade-in and -out animations last 200 ms. Bug: T150814 Change-Id: I55c728680ebb208e7cd1bd4c99a8453ae9915f2e
140 lines
2.5 KiB
Plaintext
140 lines
2.5 KiB
Plaintext
@import "mediawiki.mixins.animation";
|
|
|
|
.mwe-popups-translate(@x, @y) {
|
|
-webkit-transform: translate(@x, @y);
|
|
-moz-transform: translate(@x, @y);
|
|
-ms-transform: translate(@x, @y);
|
|
-o-transform: translate(@x, @y);
|
|
transform: translate(@x, @y);
|
|
}
|
|
|
|
/* FIXME: Use Phuedx's approach to make this cleaner
|
|
https://gist.github.com/phuedx/0639a279b6efb1a71474 */
|
|
@-webkit-keyframes mwe-popups-fade-in-up {
|
|
.mwe-popups-fade-in-up-frames;
|
|
}
|
|
|
|
@-moz-keyframes mwe-popups-fade-in-up {
|
|
.mwe-popups-fade-in-up-frames;
|
|
}
|
|
|
|
@-o-keyframes mwe-popups-fade-in-up {
|
|
.mwe-popups-fade-in-up-frames;
|
|
}
|
|
|
|
@keyframes mwe-popups-fade-in-up {
|
|
.mwe-popups-fade-in-up-frames;
|
|
}
|
|
|
|
@-webkit-keyframes mwe-popups-fade-in-down{
|
|
.mwe-popups-fade-in-down-frames;
|
|
}
|
|
|
|
@-moz-keyframes mwe-popups-fade-in-down {
|
|
.mwe-popups-fade-in-down-frames;
|
|
}
|
|
|
|
@-o-keyframes mwe-popups-fade-in-down {
|
|
.mwe-popups-fade-in-down-frames;
|
|
}
|
|
|
|
@keyframes mwe-popups-fade-in-down {
|
|
.mwe-popups-fade-in-down-frames;
|
|
}
|
|
|
|
@-webkit-keyframes mwe-popups-fade-out-down {
|
|
.mwe-popups-fade-out-down-frames;
|
|
}
|
|
|
|
@-moz-keyframes mwe-popups-fade-out-down {
|
|
.mwe-popups-fade-out-down-frames;
|
|
}
|
|
|
|
@-o-keyframes mwe-popups-fade-out-down {
|
|
.mwe-popups-fade-out-down-frames;
|
|
}
|
|
|
|
@keyframes mwe-popups-fade-out-down {
|
|
.mwe-popups-fade-out-down-frames;
|
|
}
|
|
|
|
@-webkit-keyframes mwe-popups-fade-out-up {
|
|
.mwe-popups-fade-out-up-frames;
|
|
}
|
|
|
|
@-moz-keyframes mwe-popups-fade-out-up {
|
|
.mwe-popups-fade-out-up-frames;
|
|
}
|
|
|
|
@-o-keyframes mwe-popups-fade-out-up {
|
|
.mwe-popups-fade-out-up-frames;
|
|
}
|
|
|
|
@keyframes mwe-popups-fade-out-up {
|
|
.mwe-popups-fade-out-up-frames;
|
|
}
|
|
|
|
.mwe-popups-fade-in-up-frames() {
|
|
0% {
|
|
opacity: 0;
|
|
.mwe-popups-translate(0, 20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
.mwe-popups-translate(0, 0);
|
|
}
|
|
}
|
|
|
|
.mwe-popups-fade-in-down-frames() {
|
|
0% {
|
|
opacity: 0;
|
|
.mwe-popups-translate(0, -20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
.mwe-popups-translate(0, 0);
|
|
}
|
|
}
|
|
|
|
.mwe-popups-fade-out-down-frames() {
|
|
0% {
|
|
opacity: 1;
|
|
.mwe-popups-translate(0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
.mwe-popups-translate(0, 20px);
|
|
}
|
|
}
|
|
|
|
.mwe-popups-fade-out-up-frames() {
|
|
0% {
|
|
opacity: 1;
|
|
.mwe-popups-translate(0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
.mwe-popups-translate(0, -20px);
|
|
}
|
|
}
|
|
|
|
.mwe-popups-fade-in-up {
|
|
.animation(mwe-popups-fade-in-up, 0.2s, ease, forwards);
|
|
}
|
|
|
|
.mwe-popups-fade-in-down {
|
|
.animation(mwe-popups-fade-in-down, 0.2s, ease, forwards);
|
|
}
|
|
|
|
.mwe-popups-fade-out-down {
|
|
.animation(mwe-popups-fade-out-down, 0.2s, ease, forwards);
|
|
}
|
|
|
|
.mwe-popups-fade-out-up {
|
|
.animation(mwe-popups-fade-out-up, 0.2s, ease, forwards);
|
|
}
|