previews: More visual design tweaks

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
This commit is contained in:
Sam Smith 2016-11-30 09:21:43 +00:00
parent 7cf3339f00
commit e80cc06e03
2 changed files with 5 additions and 4 deletions

View file

@ -131,9 +131,9 @@
}
.mwe-popups-fade-out-down {
.animation(mwe-popups-fade-out-down, 0.15s, ease, forwards);
.animation(mwe-popups-fade-out-down, 0.2s, ease, forwards);
}
.mwe-popups-fade-out-up {
.animation(mwe-popups-fade-out-up, 0.15s, ease, forwards);
.animation(mwe-popups-fade-out-up, 0.2s, ease, forwards);
}

View file

@ -67,13 +67,14 @@
// FIXME: The .box-shadow mixin provided by mediawiki.mixins doesn't support
// multiple values.
-webkit-box-shadow: 0 45px 70px -20px rgba(0,0,0,0.3), 0px 0px 1px rgba(0,0,0,0.5);
box-shadow: 0 45px 70px -20px rgba(0,0,0,0.3), 0px 0px 1px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 30px 90px -20px rgba(0,0,0,0.3), 0px 0px 1px rgba(0,0,0,0.5);
box-shadow: 0 30px 90px -20px rgba(0,0,0,0.3), 0px 0px 1px rgba(0,0,0,0.5);
padding: 0;
display: none;
font-size: 14px;
line-height: 20px;
min-width: 300px;
border-radius: 2px;
.mwe-popups-container {
margin-top: -9px;