mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-25 00:25:47 +00:00
98e03d31c8
Add metadata visibility logic to the test Convert the code to CSS since writing the test made me realise that the current JS was superfluous Change-Id: I80c2f1860cc021e9bdf09345647b288de746f1e3 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/140
400 lines
6.4 KiB
CSS
400 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;
|
|
height: 150px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.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;
|
|
}
|