mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-09-29 21:28:12 +00:00
30563de71d
Interface code is its own class which does not depend on the main interface class it can be unit tested (and eventually moved into its own file to make browsing the code easier). IMO we should aim to eventually break up the interface into similar classes (with a simple init/empty/set interface + custom events where it makes sense). Also, sneak-introducing LESS! API usage could be more effective (globalusage is a separate API call; it needn't be), but we will have to rewrite that part soon anyway, so it should pass for now. Bug: 60087 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/44 Change-Id: Ibe5c323cdeab4a378316925f0c3efb3dc7ef5997
403 lines
6.4 KiB
CSS
403 lines
6.4 KiB
CSS
/**
|
|
* Override multilightbox styles that don't apply to us
|
|
*/
|
|
.mlb-main .jq-fullscreened {
|
|
background-color: black;
|
|
}
|
|
|
|
.mlb-wrapper {
|
|
position: absolute;
|
|
bottom: auto;
|
|
}
|
|
|
|
.mlb-main {
|
|
height: auto;
|
|
}
|
|
|
|
.mlb-image-wrapper,
|
|
.mw-mlb-controls {
|
|
top: 0px;
|
|
bottom: 82px;
|
|
}
|
|
|
|
.jq-fullscreened .mlb-image-wrapper,
|
|
.jq-fullscreened .mw-mlb-controls {
|
|
bottom: 0px;
|
|
}
|
|
|
|
.mlb-image-wrapper {
|
|
position: fixed;
|
|
}
|
|
|
|
.mlb-post-image {
|
|
bottom: auto;
|
|
height: auto;
|
|
background-color: #fbfbfb;
|
|
position: absolute;
|
|
min-height: 83px;
|
|
}
|
|
|
|
.mlb-controls {
|
|
height: auto;
|
|
border-bottom: 1px solid #cccccc;
|
|
}
|
|
|
|
.mw-mlb-controls {
|
|
border: none;
|
|
}
|
|
|
|
body.mobile .mw-mlb-controls,
|
|
.mw-mlb-controls-position:hover .mw-mlb-controls {
|
|
display: block;
|
|
}
|
|
|
|
.mw-mlb-controls div {
|
|
border: none;
|
|
display: block;
|
|
}
|
|
|
|
.mw-lightbox-title-div,
|
|
.mw-lightbox-extra-info-div {
|
|
text-align: left;
|
|
height: 50px;
|
|
position: absolute;
|
|
right: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
.mw-lightbox-title-div {
|
|
bottom: 0px;
|
|
}
|
|
|
|
.mw-lightbox-extra-info-div {
|
|
bottom: -50px;
|
|
}
|
|
|
|
.mw-lightbox-extra-info-div a,
|
|
.mw-lightbox-extra-info-div a:hover,
|
|
.mw-lightbox-extra-info-div a:visited,
|
|
.mw-lightbox-extra-info-div a:active,
|
|
.mw-lightbox-extra-info-div a:link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.mw-lightbox .lb-container {
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
}
|
|
|
|
.mlb-overlay {
|
|
background-color: rgb(0,0,0);
|
|
}
|
|
|
|
.mlb-close,
|
|
.mlb-fullscreen {
|
|
right: 5px;
|
|
left: auto;
|
|
transition: opacity 0.25s;
|
|
background-position: center;
|
|
}
|
|
|
|
.mlb-close {
|
|
top: 5px;
|
|
/* @embed */
|
|
background-image: url(img/mw-close.svg);
|
|
}
|
|
|
|
.mlb-fullscreen {
|
|
top: 42px;
|
|
/* @embed */
|
|
background-image: url(img/mw-fullscreen-ltr.svg);
|
|
}
|
|
|
|
.jq-fullscreened .mlb-fullscreen {
|
|
/* @embed */
|
|
background-image: url(img/mw-defullscreen-ltr.svg);
|
|
}
|
|
|
|
.mlb-close,
|
|
.mlb-fullscreen,
|
|
.mw-mlb-next-image,
|
|
.mw-mlb-prev-image {
|
|
position: fixed;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.mlb-close:hover,
|
|
.mw-mlb-next-image:hover,
|
|
.mw-mlb-prev-image:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.mlb-close,
|
|
.mlb-fullscreen,
|
|
.mw-mlb-next-image,
|
|
.mw-mlb-prev-image {
|
|
border: none;
|
|
z-index: 1003;
|
|
}
|
|
|
|
.mw-mlb-license,
|
|
.mw-mlb-title-contain {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.mw-mlb-title-para {
|
|
margin-bottom: 1px;
|
|
margin-top: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.mw-mlb-title {
|
|
font-size: 1.2em;
|
|
max-width: 60%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.mw-mlb-image-metadata {
|
|
width: 100%;
|
|
background-color: #fbfbfb;
|
|
position: relative;
|
|
}
|
|
|
|
.jq-fullscreened .mw-mlb-image-metadata {
|
|
display: none;
|
|
}
|
|
|
|
.mw-mlb-image-desc-div {
|
|
width: 50%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.mw-mlb-image-links-div {
|
|
width: 50%;
|
|
}
|
|
|
|
.mw-mlb-image-desc-div,
|
|
.mw-mlb-image-links-div {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.mw-mlb-image-desc-div {
|
|
height: 150px;
|
|
}
|
|
|
|
.mw-mlb-description-backup,
|
|
.mw-mlb-image-desc {
|
|
font-size: 0.8em;
|
|
color: #555555;
|
|
}
|
|
|
|
.mw-mlb-image-links li {
|
|
list-style: none;
|
|
font-size: 0.8em;
|
|
color: #3f4040;
|
|
}
|
|
|
|
.mw-mlb-image-links li:before {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
height: 16px;
|
|
width: 16px;
|
|
content: ' ';
|
|
margin-right: 10px;
|
|
background-size: contain;
|
|
background-position: right center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.mw-mlb-image-links li.mw-mlb-repo-li:before {
|
|
/* @embed */
|
|
background-image: url(img/repo.svg);
|
|
}
|
|
|
|
.mw-mlb-image-links li.mw-mlb-datetime-li:before {
|
|
/* @embed */
|
|
background-image: url(img/time.svg);
|
|
}
|
|
|
|
.mw-mlb-image-links li.mw-mlb-username-li:before {
|
|
/* @embed */
|
|
background-image: url(img/user-ltr.svg);
|
|
}
|
|
|
|
.mw-mlb-image-links li.mw-mlb-location-li:before {
|
|
/* @embed */
|
|
background-image: url(img/location.svg);
|
|
}
|
|
|
|
.mw-mlb-image-links li.mw-mlb-usefile-li:before {
|
|
/* @embed */
|
|
background-image: url(img/use-ltr.svg);
|
|
}
|
|
|
|
.mw-mlb-image-links li.empty:before {
|
|
background-image: none !important;
|
|
}
|
|
|
|
.mw-mlb-license,
|
|
.mw-mlb-title-credit {
|
|
display: inline-block;
|
|
}
|
|
|
|
.mw-mlb-title-credit {
|
|
width: 100%;
|
|
height: 64px;
|
|
}
|
|
|
|
.mw-mlb-license {
|
|
color: #888888;
|
|
font-size: 0.9em;
|
|
padding-left: 10px;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.mw-mlb-license.empty {
|
|
display: none;
|
|
}
|
|
|
|
.mw-mlb-license.cc-license:before {
|
|
background-size: contain;
|
|
/* @embed */
|
|
background-image: url(img/cc.svg);
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
height: 20px;
|
|
width: 20px;
|
|
content: ' ';
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.mw-mlb-license-contain,
|
|
.mw-mlb-license {
|
|
text-align: right;
|
|
}
|
|
|
|
.mw-mlb-image-links li.empty {
|
|
display: none;
|
|
}
|
|
|
|
.mw-mlb-use-file-dialog label {
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mw-mlb-use-file-dialog input {
|
|
width: 100%;
|
|
}
|
|
|
|
.mw-mlb-title-para,
|
|
.mw-mlb-credit,
|
|
.mw-mlb-image-desc,
|
|
.mw-mlb-description-backup,
|
|
.mw-mlb-mmv-about-links {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.mw-mlb-image-desc-div.empty .mw-mlb-image-desc {
|
|
color: rgb(136, 136, 136);
|
|
font-style: italic;
|
|
}
|
|
|
|
.mw-mlb-description-backup.empty {
|
|
display: none;
|
|
}
|
|
|
|
.mw-mlb-mmv-about-links {
|
|
font-size: 0.8em;
|
|
padding: 20px;
|
|
width: 50%;
|
|
}
|
|
|
|
.mlb-image.empty img {
|
|
display: none;
|
|
}
|
|
|
|
body.mw-mlb-lightbox-open {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
body.mw-mlb-lightbox-open #mw-page-base,
|
|
body.mw-mlb-lightbox-open #mw-head-base,
|
|
body.mw-mlb-lightbox-open #mw-navigation,
|
|
body.mw-mlb-lightbox-open #mw-footer,
|
|
body.mw-mlb-lightbox-open #content {
|
|
/** Stop the article from scrolling in the background */
|
|
display: none;
|
|
}
|
|
|
|
.mw-mlb-next-image,
|
|
.mw-mlb-prev-image {
|
|
top: -999px;
|
|
width: 80px;
|
|
height: 120px;
|
|
cursor: pointer;
|
|
transition: opacity 0.25s, margin 0.25s;
|
|
}
|
|
|
|
.mw-mlb-next-image:hover {
|
|
margin-right: -4px;
|
|
}
|
|
|
|
.mw-mlb-prev-image:hover {
|
|
margin-left: -4px;
|
|
}
|
|
|
|
.mw-mlb-next-image {
|
|
/* @embed */
|
|
background-image: url(img/next-ltr.svg);
|
|
background-position: right;
|
|
right: 18px;
|
|
}
|
|
|
|
.mw-mlb-prev-image {
|
|
/* @embed */
|
|
background-image: url(img/prev-ltr.svg);
|
|
background-position: left;
|
|
left: 18px;
|
|
}
|
|
|
|
.mw-mlb-next-image.disabled,
|
|
.mw-mlb-prev-image.disabled {
|
|
display: none;
|
|
cursor: none;
|
|
}
|
|
|
|
.mw-mlb-drag-affordance {
|
|
width: 100%;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mw-mlb-drag-icon {
|
|
width: 64px;
|
|
height: 18px;
|
|
/* @embed */
|
|
background-image: url(img/drag.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom;
|
|
margin: 0 auto;
|
|
opacity: 0.6;
|
|
transition: opacity 0.25s;
|
|
}
|
|
|
|
.mw-mlb-drag-icon.pointing-down {
|
|
background-position: center top;
|
|
transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
-webkit-transform: rotate(180deg);
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2.0);
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2.0)";
|
|
}
|
|
|
|
.mlb-post-image:hover .mw-mlb-drag-icon {
|
|
opacity: 1;
|
|
}
|