mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-25 08:35:29 +00:00
70b0cbb727
* mmv.ui.canvas / error-media-icon.svg: Used when the media file fails to load (e.g. due to an intermittent issue with the user's network connection). Rarely displayed, and the space is reserved (no FOUC). Seems fine to display slightly later within that use case (or not at all, if offline) to make the MMV interface itself load faster overall. Bug: T121730 Change-Id: I760f46c920c3d1f3da2cb385d8cfd81951b628e5
87 lines
1.3 KiB
Plaintext
87 lines
1.3 KiB
Plaintext
@import '../mmv.mixins';
|
|
|
|
.mw-mmv-image {
|
|
display: table-cell;
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
.unselectable;
|
|
|
|
&.empty {
|
|
display: none;
|
|
}
|
|
|
|
&.error {
|
|
background-color: #222;
|
|
|
|
a,
|
|
a:visited {
|
|
cursor: pointer;
|
|
color: #3472e5;
|
|
}
|
|
}
|
|
|
|
.error-box {
|
|
background: url( img/error-media-icon.svg ) no-repeat 0 0;
|
|
background-size: 110px 110px;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -350px;
|
|
top: 50%;
|
|
margin-top: -100px;
|
|
padding: 0 20px 0 160px;
|
|
color: #fff;
|
|
max-width: 520px;
|
|
|
|
.mw-mmv-error-text {
|
|
font-size: 48px;
|
|
}
|
|
|
|
.mw-mmv-error-description {
|
|
margin-top: 30px;
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mw-mmv-image img {
|
|
display: block;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
cursor: pointer;
|
|
cursor: zoom-in;
|
|
|
|
&.blurred {
|
|
filter: blur( 3px );
|
|
-webkit-filter: blur( 3px );
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Whitelist file types that are potentially transparent.
|
|
We don't set it for other file types because Media Viewer plugins
|
|
can find that undesirable (eg. 3d) */
|
|
&.gif,
|
|
&.png,
|
|
&.svg,
|
|
&.tiff,
|
|
&.tif {
|
|
background: url( checker.png ) repeat;
|
|
}
|
|
|
|
&.mw-mmv-dialog-is-open {
|
|
cursor: default;
|
|
}
|
|
|
|
.metadata-panel-is-open & {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.mw-mmv-image.empty img {
|
|
display: none;
|
|
}
|
|
|
|
.metadata-panel-is-open .mw-mmv-image-wrapper {
|
|
cursor: pointer;
|
|
}
|