MediaWiki:Gadget-ms-MediaViewer.css
From Tardis Wiki, the free Doctor Who reference
Clear your cache often around here
After changes are made to this site's CSS or Javascript, you have to bypass your browser's cache to see the changes. You can always do this by going to your browser's preferences panel. But many browsers also offer keyboard shortcuts to save you that trouble. The following shortcuts work in the versions of the browsers that Tardis currently supports. They may not work in earlier versions.
- Firefox: hold down Shift while performing a page reload.
- Opera offers no default keyboard shortcut, but you can create a custom keyboard shortcut with the value Clear disk cache
- Safari users should simultaneously hold down ⌘ + Option + E. You may need to enable the Develop menu first
- Chrome: press Ctrl + F5 or Shift + F5 while performing a page reload.
/* Designed by User:SOTO in May 2024 */
body.mw-mmv-lightbox-open {
background-color: var(--primary-21);
}
body.mw-mmv-lightbox-open > .mw-mmv-overlay,
body.mw-mmv-lightbox-open > .mw-mmv-wrapper,
body.mw-mmv-lightbox-open .mw-mmv-image-wrapper:has(.mw-mmv-image.error) {
width: 87%;
margin: auto;
}
.mw-mmv-post-image {
background-color: var(--primary-5);
top: 724.667px!important;
}
.mw-mmv-overlay {
background-color: #090f1c;
}
.mw-mmv-above-fold {
position: fixed;
top: 0;
left: 0;
}
.mw-mmv-above-fold .mw-mmv-title-para {
width: 100%;
top: -49.2px;
transition: top 1.2s;
background-color: var(--primary-5);
background-color: var(--primary-9);
box-shadow: 0 -20px var(--primary-6);
box-shadow: 0 -20px var(--primary-6), 0 -48px #090f1c;
font-size: 1.84em;
text-align: center;
z-index: -2;
}
.mw-mmv-image-metadata {
position: relative;
top: 38.789px;
background-color: #161f2e;
background-color: var(--primary-5);
background-color: #192c4f;
background-color: #1c3461;
background-color: #1d2f51;
box-shadow: 0 -80px #1f2a3f inset, 0 -100px #182131 inset;
color: #d2d6e1;
}
.mw-mmv-image-wrapper {
top: 38px;
}
.mw-mmv-image {
border: solid 4px #4a6499;
}
.mw-mmv-above-fold .mw-mmv-stripe-button {
position: relative;
right: 117px;
right: 6.408vw;
}
.mw-mmv-pre-image {
z-index: 3400;
}
.mw-mmv-close {
transform: scale(1.189);
}
.mw-mmv-fullscreen {
top: 2.41px;
right: 59px;
right: 18.88vw;
opacity: 0.61;
}
.mw-mmv-download-button {
transform: scale(1.98);
opacity: 0.68;
background-color: var(--contrast-color-3);
border: solid 2px var(--contrast-color-1);
width: 31px;
height: 31px;
border-radius: 100%;
/* bottom: 33px; */
top: 68px;
right: 30px;
}
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error) .mw-mmv-download-button {
opacity: 1;
background-color: var(--primary-15);
}
.mw-mmv-download-button:hover {
background-color: var(--primary-15);
}
.mw-mmv-options-button {
position: fixed;
top: auto;
bottom: 148px;
}
.mw-mmv-image img.mw-mmv-dialog-is-open {
max-width: 100%;
height: auto;
margin-top: 17px;
}
/* ANIMATIONS */
body.mw-mmv-lightbox-open:has(.mw-mmv-pre-image button:not(.mw-mmv-options-button):not(.mw-mmv-fullscreen):hover) .mw-mmv-above-fold .mw-mmv-title-para,
body.mw-mmv-lightbox-open:has(.mw-mmv-download-button:hover) .mw-mmv-above-fold .mw-mmv-title-para {
top: -28.2px;
transition: top 2.8s;
}
body.mw-mmv-lightbox-open:has(.mw-mmv-pre-image button.mw-mmv-prev-image:hover) .mw-mmv-above-fold .mw-mmv-title-para,
body.mw-mmv-lightbox-open:has(.mw-mmv-pre-image button.mw-mmv-next-image:hover) .mw-mmv-above-fold .mw-mmv-title-para {
top: -18.2px;
transition: top 2.1s;
box-shadow: 0 -20px var(--primary-6), 0 -48px #090f1c;
}
/* DOWNLOAD DIALOG */
.mw-mmv-download-dialog {
background-color: #8b9bb9;
box-shadow: 0 0 0 10px;
border-color: #bec7d9;
}
:root.theme-light .skin-timeless .mw-mmv-download-dialog {
background-color: var(--alt-text-color-4);
}
:root.theme-dark .skin-timeless .mw-mmv-download-pane .mw-mmv-download-area {
background: #1b2332;
background: #607191;
background: #6e82a8;
}
.mw-mmv-download-dialog .mw-mmv-dialog-warning {
background-color: var(--contrast-color-7);
background-color: var(--primary-23);
}
.mw-mmv-download-pane .mw-mmv-download-attribution {
background-color: #2a3f64;
}
:root.theme-light .skin-timeless .mw-mmv-download-pane .mw-mmv-download-attribution {
background-color: var(--TEXT-B-H2);
}
.mw-mmv-lightbox-open:has(.mw-mmv-download-dialog.mw-mmv-warning-visible) .mw-mmv-image-metadata {
background-color: #1d2f51;
color: var(--alt-link-color-1b);
box-shadow: 0 -80px #5f6c85 inset, 0 -100px #657187 inset;
box-shadow: 0 -100px #26385a inset;
}
.mw-mmv-lightbox-open:has(.mw-mmv-download-dialog.mw-mmv-warning-visible) .mw-mmv-image-metadata .mw-mmv-credit {
color: var(--alt-text-color-2);
}
/* ERRORS & LIGHT MODE */
:root.theme-light .skin-timeless .mw-mmv-image {
background-color: #0b162b;
}
.mw-mmv-image.error,
:root.theme-light .skin-timeless .mw-mmv-image.error {
background-color: var(--primary-4);
border: solid 4px #4a6499;
}
body:has(.mw-mmv-image.error),
:root.theme-light .skin-timeless.mw-mmv-lightbox-open {
background-color: #233e6e;
}
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error) .mw-mmv-main.metadata-panel-is-closed,
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error) .mw-mmv-above-fold .mw-mmv-title-para,
:root.theme-light .skin-timeless.mw-mmv-lightbox-open .mw-mmv-main.metadata-panel-is-closed,
:root.theme-light .skin-timeless.mw-mmv-lightbox-open .mw-mmv-above-fold .mw-mmv-title-para {
background: #1f2a3e;
background: #2d4776;
box-shadow: 0 -12px #171e29;
}
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error) .mw-mmv-image-metadata,
:root.theme-light .skin-timeless.mw-mmv-lightbox-open .mw-mmv-image-metadata {
/* background: #232d42; */
box-shadow: none;
}
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error) .mw-ui-button.mw-ui-progressive:not(:disabled),
:root.theme-light .skin-timeless.mw-mmv-lightbox-open .mw-ui-button.mw-ui-progressive:not(:disabled) {
border: none!important;
background: #233e6e!important;
/* box-shadow: 0 0 0 3px #8296bd; */
}
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error) .mw-ui-button.mw-ui-progressive:not(:disabled):hover,
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error):has(.mw-mmv-download-button:hover) .mw-ui-button.mw-ui-progressive:not(:disabled),
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error):has(.mw-mmv-pre-image button.mw-mmv-prev-image:hover) .mw-ui-button.mw-ui-progressive:not(:disabled),
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error):has(.mw-mmv-pre-image button.mw-mmv-next-image:hover) .mw-ui-button.mw-ui-progressive:not(:disabled),
:root.theme-light .skin-timeless.mw-mmv-lightbox-open .mw-ui-button.mw-ui-progressive:not(:disabled) {
box-shadow: 0 0 0 3px #8296bd;
}
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error) .mw-mmv-download-button:hover,
:root.theme-light .skin-timeless.mw-mmv-lightbox-open .mw-mmv-download-button:hover,
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error):has(.mw-ui-button.mw-ui-progressive:not(:disabled):hover) .mw-mmv-download-button,
:root.theme-light .skin-timeless.mw-mmv-lightbox-open:has(.mw-ui-button.mw-ui-progressive:not(:disabled):hover) .mw-mmv-download-button {
border-color: #a5b5d4;
}
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error):has(.mw-mmv-pre-image button.mw-mmv-prev-image:hover) .mw-mmv-above-fold .mw-mmv-title-para,
body.mw-mmv-lightbox-open:has(.mw-mmv-image.error):has(.mw-mmv-pre-image button.mw-mmv-next-image:hover) .mw-mmv-above-fold .mw-mmv-title-para,
:root.theme-light .skin-timeless.mw-mmv-lightbox-open:has(.mw-mmv-pre-image button.mw-mmv-prev-image:hover) .mw-mmv-above-fold .mw-mmv-title-para,
:root.theme-light .skin-timeless.mw-mmv-lightbox-open:has(.mw-mmv-pre-image button.mw-mmv-next-image:hover) .mw-mmv-above-fold .mw-mmv-title-para {
box-shadow: 0 -20px #121f37, 0 -48px #6283c8;
}
.mw-mmv-title-para .mw-mmv-ttf-ellipsis {
right: 107.188px;
background-color: #8ea5cf;
filter: invert(1) hue-rotate(180deg);
}
