mediawiki-extensions-Multim.../resources/ext.multimediaViewer/ext.multimediaViewer.css
Mark Holmquist 85eb742277 Previous and next functionality!
Adds buttons on the side, disabled at the start and end of the list of
images, that let you browse through the images on the page!

Also arrow keys!

EXCITING!

Change-Id: Ie514cd4b16bdee8a384a89d4bd1d755a24c5cdb4
2013-11-26 21:10:16 +00:00

295 lines
4.3 KiB
CSS

/**
* Override multilightbox styles that don't apply to us
*/
.mlb-main.mlb-fullscreened {
background-color: white;
}
.mlb-image-wrapper {
top: 0px;
bottom: 64px;
}
.mlb-controls {
height: auto;
}
.mlb-post-image {
position: absolute;
height: auto;
background-color: #e4e2e1;
}
.mw-mlb-controls-position {
position: absolute;
top: -999px;
left: -999px;
}
.mw-mlb-controls-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.mw-mlb-controls {
border: none;
position: absolute;
top: 0px;
z-index: 1003;
}
body.mobile .mw-mlb-controls,
.mw-mlb-controls-position:hover .mw-mlb-controls {
display: block;
}
.mw-mlb-controls div {
position: static;
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 {
/* @embed */
background-image: url(img/mw-close.svg);
}
.mlb-fullscreen-div .mlb-fullscreen {
/* @embed */
background-image: url(img/mw-defullscreen-ltr.svg);
}
.mlb-fullscreen {
/* @embed */
background-image: url(img/mw-fullscreen-ltr.svg);
}
.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;
}
.mw-mlb-image-metadata {
width: 100%;
background-color: #e4e2e1;
position: relative;
}
.mw-mlb-image-desc-div {
width: 60%;
overflow-y: auto;
}
.mw-mlb-image-links-div {
width: 40%;
}
.mw-mlb-image-desc-div,
.mw-mlb-image-links-div {
display: inline-block;
height: 150px;
vertical-align: top;
}
.mw-mlb-image-desc {
color: #6f7073;
}
.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;
}
.mw-mlb-image-links li.mw-mlb-repo-li:before {
/* @embed */
background-image: url(img/repo.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-datetime-li:before {
/* @embed */
background-image: url(img/time.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 {
padding-left: 10px;
}
.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: middle;
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-mmv-about-links {
padding-left: 20px;
}
.mw-mlb-mmv-about-links {
font-size: 0.8em;
padding: 20px;
width: 50%;
}
.mlb-image .mw-spinner {
margin-left: auto;
margin-right: auto;
}
.mlb-image.empty .mw-spinner {
display: block;
}
.mlb-image.empty img {
display: none;
}
body.mw-mlb-lightbox-open {
/** Stop the article from scrolling in the background */
overflow: hidden;
}
body.mw-mlb-lightbox-open .mlb-main {
overflow-y: auto;
}
.mw-mlb-next-image,
.mw-mlb-prev-image {
position: absolute;
top: -999px;
width: 64px;
height: 64px;
cursor: pointer;
}
.mw-mlb-next-image {
/* @embed */
background-image: url(img/next-ltr.svg);
right: 0;
}
.mw-mlb-prev-image {
/* @embed */
background-image: url(img/prev-ltr.svg);
left: 0;
}
.mw-mlb-next-image.disabled,
.mw-mlb-prev-image.disabled {
display: none;
cursor: none;
}