MediaWiki:Common.css/MultiMediaViewer.css

From Survivors of Atlantis Wiki
Jump to navigation Jump to search

MediaWiki:Common.css/MultiMediaViewer.css is where we define styling for the display of the MultiMediaViewer that show for example images and their information when clicking on them. It is loaded into MediaWiki:Common.css via css imports.

This documentation can be edited at MediaWiki:Common.css/MultiMediaViewer.css/doc. Documentation inclusion is managed at MediaWiki:Clearyourcache.

Style changes not showing up

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* ====================[MultiMediaViewer]==================== */
/* makes background transparency checker pattern darker */
.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif {
    background-blend-mode: difference;
    background-color: gray;
}

.mw-mmv-dialog {
    background-color: var(--primary-color);
    box-shadow: 0 2px 2px 0 var(--primary-color);
}

.mw-mmv-dialog .mw-mmv-dialog-warning {
    margin-top: 5px;
    background-color: var(--primary-color-darkest);
    border-block: 3px solid var(--secondary-color);
}

.mw-mmv-dialog-warning .external {
    color: var(--blue-link-color);
    font-weight: bold;
}

.mw-mmv-dialog .mw-mmv-dialog-down-arrow,
.mw-mmv-download-dialog .mw-mmv-dialog-down-arrow {
    background-color: var(--primary-color);
}

.mw-mmv-reuse-dialog .mw-mmv-reuse-tabs .oo-ui-optionWidget.oo-ui-optionWidget-highlighted {
    border-bottom-color: var(--secondary-color-darker);
}

.mw-mmv-reuse-dialog .mw-mmv-reuse-tabs .oo-ui-optionWidget.oo-ui-optionWidget-selected, .mw-mmv-reuse-dialog .mw-mmv-reuse-tabs .oo-ui-optionWidget.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected {
    border-bottom-color: var(--secondary-color-darkest);
}

.mw-mmv-reuse-dialog .mw-mmv-reuse-tabs {
    border-bottom-color: var(--secondary-color);
}

.mw-mmv-options-dialog-header {
    color: var(--text-color-lighter);
}
.mw-mmv-options-text-header {
    color: var(--text-color-darker);
}
.mw-mmv-options-text-body {
    color: var(--text-color);
}

input[type='checkbox']:focus + .mw-ui-button.mw-ui-quiet, input[type='checkbox']:focus + .mw-ui-button.mw-ui-quiet.mw-ui-progressive, input[type='checkbox']:focus + .mw-ui-button.mw-ui-quiet.mw-ui-destructive, .mw-ui-button.mw-ui-quiet:focus, .mw-ui-button.mw-ui-quiet.mw-ui-progressive:focus, .mw-ui-button.mw-ui-quiet.mw-ui-destructive:focus,
.mw-ui-button.mw-ui-quiet, .mw-ui-button.mw-ui-quiet.mw-ui-progressive, .mw-ui-button.mw-ui-quiet.mw-ui-destructive {
    color: var(--text-color-darker);
}

.mw-mmv-options-dialog.mw-mmv-disable-confirmation-shown, .mw-mmv-options-dialog.mw-mmv-disable-confirmation-shown .mw-mmv-dialog-down-arrow, .mw-mmv-options-dialog.mw-mmv-enable-div-shown .mw-mmv-dialog-down-arrow {
    background-color: var(--primary-color);
}
.mw-mmv-options-dialog .mw-mmv-disable-confirmation .mw-mmv-options-dialog-header {
    color: var(--text-color);
}
.mw-mmv-options-dialog .mw-mmv-disable-confirmation .mw-mmv-options-text-header {
    color: var(--text-color);
}
.mw-mmv-options-enable-alert {
    background-color: #ffd36e;
}

.mw-mmv-download-pane .mw-mmv-download-attribution {
    background-color: var(--primary-color);
    color: var(--text-color);
}
.mw-mmv-download-pane .mw-mmv-download-attribution:hover {
    background-color: var(--primary-color-darker);
    color: var(--text-color);
}

.mw-mmv-download-pane .mw-mmv-download-attribution-cta-invite {
    color: var(--text-color-darker);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input[readonly]:not(.oo-ui-pendingElement-pending) {
    /* set to OS default, which should follow the light/dark styling set in common.css */
    background: revert;
    color: revert;
}

.mw-mmv-download-pane .mw-mmv-download-area .mw-mmv-download-preview-link {
    color: var(--text-color-darker);
}

.mw-mmv-post-image {
    background-color: var(--primary-color);
    color: var(--text-color);
}

.mw-mmv-ttf-container .mw-mmv-ttf-ellipsis {
    box-shadow: none;
}
.mw-mmv-title-para .mw-mmv-ttf-ellipsis {
    background-color: var(--primary-color);
}
.mw-mmv-title-para .mw-mmv-ttf-ellipsis:before {
    background-image: none;
}

.mw-mmv-image-metadata {
    background-color: var(--primary-color);
    border-color: var(--secondary-color);
}

/* why do it be an on element styling */
.mw-mmv-permission-box {
    background-color: var(--primary-color-darker) !important;
}

.mw-mmv-info-box {
    border-color: var(--secondary-color-darker);
}

.mw-mmv-permission-box .mw-mmv-permission-text,
.mw-mmv-permission-box h3 {
    color: var(--text-color-darker);
}

.mw-mmv-image-desc {
    color: var(--text-color-darker);
}

/* download preview icon */
.mw-mmv-download-pane .mw-mmv-download-area .mw-mmv-download-preview-link:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221024%22 height=%22768%22%3E %3Cpath fill=%22%2372777d%22 d=%22M304 179.2v355.2h464V179.2H304zm412.8 281.6H352L460.8 320l16-6.4 102.4 108.8 54.4-32 83.2 70.4z%22/%3E %3Cpath fill=%22%2372777d%22 d=%22M256 230.4v358.4h499.2v-25.6H281.6V230.4%22/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221024%22 height=%22768%22%3E %3Cpath fill=%22%2372777d%22 d=%22M304 179.2v355.2h464V179.2H304zm412.8 281.6H352L460.8 320l16-6.4 102.4 108.8 54.4-32 83.2 70.4z%22/%3E %3Cpath fill=%22%2372777d%22 d=%22M256 230.4v358.4h499.2v-25.6H281.6V230.4%22/%3E %3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* elipsis icon */
.mw-mmv-ttf-container .mw-mmv-ttf-ellipsis {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 96%22%3E %3Cg fill=%22%2372777d%22 transform=%22translate%280 20%29%22%3E %3Cpath d=%22M22 48.3c0 6.1-4.9 11-11 11s-11-4.9-11-11 4.9-11 11-11 11 4.9 11 11zm37 0c0 6.1-4.9 11-11 11s-11-4.9-11-11 4.9-11 11-11 11 4.9 11 11z%22/%3E %3Ccircle cx=%2285%22 cy=%2248.3%22 r=%2211%22/%3E %3C/g%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 96%22%3E %3Cg fill=%22%2372777d%22 transform=%22translate%280 20%29%22%3E %3Cpath d=%22M22 48.3c0 6.1-4.9 11-11 11s-11-4.9-11-11 4.9-11 11-11 11 4.9 11 11zm37 0c0 6.1-4.9 11-11 11s-11-4.9-11-11 4.9-11 11-11 11 4.9 11 11z%22/%3E %3Ccircle cx=%2285%22 cy=%2248.3%22 r=%2211%22/%3E %3C/g%3E %3C/svg%3E");
}
/* location icon */
.mw-mmv-image-links li.mw-mmv-location-li:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E %3Cpath fill=%22%2372777d%22 d=%22M61.615 10.966A30.392 30.392 0 0 0 51.506 4.25a30.615 30.615 0 0 0-33.178 6.728c-5.783 5.792-8.975 13.166-8.975 20.791 0 7.613 3.19 14.995 8.975 20.781l3.182 3.153c6.386 6.31 11.893 11.758 16.618 19.331L39.966 78l1.85-2.966c4.725-7.573 10.232-13.021 16.607-19.324l3.191-3.17c12.044-12.044 12.044-29.529.001-41.574zM49.477 42.641c-5.25 5.258-13.76 5.258-19.011 0-5.249-5.24-5.249-13.75 0-19 5.251-5.24 13.761-5.24 19.011 0 5.238 5.25 5.238 13.758 0 19z%22/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E %3Cpath fill=%22%2372777d%22 d=%22M61.615 10.966A30.392 30.392 0 0 0 51.506 4.25a30.615 30.615 0 0 0-33.178 6.728c-5.783 5.792-8.975 13.166-8.975 20.791 0 7.613 3.19 14.995 8.975 20.781l3.182 3.153c6.386 6.31 11.893 11.758 16.618 19.331L39.966 78l1.85-2.966c4.725-7.573 10.232-13.021 16.607-19.324l3.191-3.17c12.044-12.044 12.044-29.529.001-41.574zM49.477 42.641c-5.25 5.258-13.76 5.258-19.011 0-5.249-5.24-5.249-13.75 0-19 5.251-5.24 13.761-5.24 19.011 0 5.238 5.25 5.238 13.758 0 19z%22/%3E %3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* upload date icon */
.mw-mmv-image-links li.mw-mmv-datetime-li:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E %3Cpath fill=%22%2372777d%22 d=%22M64.742 15.246C58.14 8.638 49.35 5 39.996 5c-9.348 0-18.137 3.638-24.754 10.246C8.633 21.856 5 30.65 5 40s3.633 18.144 10.242 24.742C21.859 71.352 30.648 75 39.996 75c9.354 0 18.144-3.649 24.746-10.258C71.353 58.144 75 49.35 75 40s-3.647-18.144-10.258-24.754zm-13.283 41.29L36.504 41.604V16.01h5.628v23.234l13.3 13.309-3.973 3.982z%22/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E %3Cpath fill=%22%2372777d%22 d=%22M64.742 15.246C58.14 8.638 49.35 5 39.996 5c-9.348 0-18.137 3.638-24.754 10.246C8.633 21.856 5 30.65 5 40s3.633 18.144 10.242 24.742C21.859 71.352 30.648 75 39.996 75c9.354 0 18.144-3.649 24.746-10.258C71.353 58.144 75 49.35 75 40s-3.647-18.144-10.258-24.754zm-13.283 41.29L36.504 41.604V16.01h5.628v23.234l13.3 13.309-3.973 3.982z%22/%3E %3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* filename icon */
.mw-mmv-image-links li.mw-mmv-filename-li:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2219%22 height=%2214%22 viewBox=%220 0 19 14%22%3E %3Cpath fill=%22%2372777d%22 d=%22M13 0H0v14h19V6h-6V0zm4.5 12.3V12H2.4l4.5-5.5.7-.1 4.2 4.5 2.3-1.5 3.4 2.9z%22/%3E %3Cpath fill=%22%2372777d%22 d=%22M18.8 4.5h-4.5V0%22/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2219%22 height=%2214%22 viewBox=%220 0 19 14%22%3E %3Cpath fill=%22%2372777d%22 d=%22M13 0H0v14h19V6h-6V0zm4.5 12.3V12H2.4l4.5-5.5.7-.1 4.2 4.5 2.3-1.5 3.4 2.9z%22/%3E %3Cpath fill=%22%2372777d%22 d=%22M18.8 4.5h-4.5V0%22/%3E %3C/svg%3E");
}
/* license icon */
.mw-mmv-image-links li.mw-mmv-license-li:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 viewBox=%225.5 -3.5 64 64%22%3E %3Cpath fill=%22%2372777d%22 d=%22M13 .5v56h38.5C57.45 56.5 62 51.95 62 46V.5H13zM51.5 53H20V4h14v28l7-7 7 7V4h10.5v42c0 3.85-3.15 7-7 7z%22/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 viewBox=%225.5 -3.5 64 64%22%3E %3Cpath fill=%22%2372777d%22 d=%22M13 .5v56h38.5C57.45 56.5 62 51.95 62 46V.5H13zM51.5 53H20V4h14v28l7-7 7 7V4h10.5v42c0 3.85-3.15 7-7 7z%22/%3E %3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

.mw-mmv-download-pane .mw-mmv-download-area .mw-mmv-download-preview-link:before,
.mw-mmv-ttf-container .mw-mmv-ttf-ellipsis,
.mw-mmv-image-links li.mw-mmv-location-li:before,
.mw-mmv-image-links li.mw-mmv-datetime-li:before,
.mw-mmv-image-links li.mw-mmv-filename-li:before,
.mw-mmv-image-links li.mw-mmv-license-li:before {
    background-color: var(--text-color-darker);
    background-image: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* ====[on file page]==== */
.mw-ui-button:not(:disabled):visited {
    color: var(--text-color);
}
/* open in media viewer icon */
.mw-mmv-filepage-buttons .mw-mmv-view-expanded .mw-ui-icon:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 768%22%3E %3Cpath d=%22M851.2 71.6 690.7 232.1l-40.1-40.3-9.6 164.8 164.8-9.3-40.3-40.4L926 146.4l58.5 58.5L997.6 0 792.7 13.1%22/%3E %3Cpath d=%22M769.6 89.3H611.9l70.9 70.8 7.9 7.5m-47.1 234.6-51.2 3 3-51.2 9.4-164.4 5.8-100.3H26.4V768h883.1V387l-100.9 5.8-165 9.4zM813.9 678H113.6l207.2-270.2 31.5-12.9L548 599.8l105.9-63.2 159.8 140.8.2.6zm95.6-291.9V228l-79.1 78.9 7.8 7.9%22/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 768%22%3E %3Cpath d=%22M851.2 71.6 690.7 232.1l-40.1-40.3-9.6 164.8 164.8-9.3-40.3-40.4L926 146.4l58.5 58.5L997.6 0 792.7 13.1%22/%3E %3Cpath d=%22M769.6 89.3H611.9l70.9 70.8 7.9 7.5m-47.1 234.6-51.2 3 3-51.2 9.4-164.4 5.8-100.3H26.4V768h883.1V387l-100.9 5.8-165 9.4zM813.9 678H113.6l207.2-270.2 31.5-12.9L548 599.8l105.9-63.2 159.8 140.8.2.6zm95.6-291.9V228l-79.1 78.9 7.8 7.9%22/%3E %3C/svg%3E");
}
/* media viewer config icon */
.mw-mmv-filepage-buttons .mw-mmv-view-config .mw-ui-icon:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 768%22%3E %3Cpath d=%22M897 454.6V313.4L810.4 299c-6.4-23.3-16-45.7-27.3-65.8l50.5-71.4-99.4-100.2-71.4 50.5c-20.9-11.2-42.5-20.9-65.8-27.3L582.6-1H441.4L427 85.6c-23.3 6.4-45.7 16-65.8 27.3l-71.4-50.5-100.3 99.5 50.5 71.4c-11.2 20.9-20.9 42.5-27.3 66.6L127 313.4v141.2l85.8 14.4c6.4 23.3 16 45.7 27.3 66.6L189.6 607l99.5 99.5 71.4-50.5c20.9 11.2 42.5 20.9 66.6 27.3l14.4 85.8h141.2l14.4-86.6c23.3-6.4 45.7-16 65.8-27.3l71.4 50.5 99.5-99.5-50.5-71.4c11.2-20.9 20.9-42.5 27.3-66.6l86.4-13.6zm-385 77c-81.8 0-147.6-66.6-147.6-147.6 0-81.8 66.6-147.6 147.6-147.6S659.6 302.2 659.6 384 593.8 531.6 512 531.6z%22/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 768%22%3E %3Cpath d=%22M897 454.6V313.4L810.4 299c-6.4-23.3-16-45.7-27.3-65.8l50.5-71.4-99.4-100.2-71.4 50.5c-20.9-11.2-42.5-20.9-65.8-27.3L582.6-1H441.4L427 85.6c-23.3 6.4-45.7 16-65.8 27.3l-71.4-50.5-100.3 99.5 50.5 71.4c-11.2 20.9-20.9 42.5-27.3 66.6L127 313.4v141.2l85.8 14.4c6.4 23.3 16 45.7 27.3 66.6L189.6 607l99.5 99.5 71.4-50.5c20.9 11.2 42.5 20.9 66.6 27.3l14.4 85.8h141.2l14.4-86.6c23.3-6.4 45.7-16 65.8-27.3l71.4 50.5 99.5-99.5-50.5-71.4c11.2-20.9 20.9-42.5 27.3-66.6l86.4-13.6zm-385 77c-81.8 0-147.6-66.6-147.6-147.6 0-81.8 66.6-147.6 147.6-147.6S659.6 302.2 659.6 384 593.8 531.6 512 531.6z%22/%3E %3C/svg%3E");
}

.mw-mmv-filepage-buttons .mw-mmv-view-expanded .mw-ui-icon:before,
.mw-mmv-filepage-buttons .mw-mmv-view-config .mw-ui-icon:before {
    background-color: var(--text-color);
    background-image: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    mask-position: center;
}
Retrieved from "https://survivorsofatlantis.wiki.gg/index.php?title=MediaWiki:Common.css/MultiMediaViewer.css&oldid=1032"