mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-12-11 07:46:15 +00:00
1b12172bb0
When opening the viewer set the body background and the theme-color to match the background of the viewer. This provides a better experience for (esp. mobile) browsers. theme-color has to be overriden, as it can be inferred from the top of the browser window, but images can be all kinds of colors, so it is better to be explicit. Bug: T368659 Change-Id: I313745a31bf17eef612dd89630b1bbc4cb57fd45
62 lines
1.2 KiB
Plaintext
62 lines
1.2 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
|
|
|
.mw-mmv-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1000;
|
|
background-color: #000;
|
|
display: flex;
|
|
justify-items: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
|
|
.cdx-progress-bar {
|
|
max-width: 80vw;
|
|
min-width: 20vw;
|
|
width: 20rem;
|
|
}
|
|
}
|
|
|
|
body.mw-mmv-lightbox-open {
|
|
overflow-y: auto;
|
|
|
|
// This is to ensure the background area for the safe areas (notch) is black in fullscreen mode
|
|
// Separate from above as not all browsers that we support, support has().
|
|
background-color: #000;
|
|
|
|
// Stop the article from scrolling in the background
|
|
> *:not( .mw-notification-area-overlay ) {
|
|
display: none;
|
|
}
|
|
|
|
> .mw-mmv-overlay {
|
|
display: flex;
|
|
}
|
|
|
|
> .mw-mmv-wrapper {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.mw-mmv-filepage-buttons {
|
|
margin-top: 5px;
|
|
|
|
.cdx-button:nth-child(n + 2) {
|
|
border-left: none;
|
|
}
|
|
|
|
.mw-mmv-view-expanded .cdx-button__icon {
|
|
.cdx-mixin-css-icon( @cdx-icon-image-gallery, @param-is-button-icon: true,
|
|
@param-size-icon: @size-icon-small );
|
|
}
|
|
|
|
.mw-mmv-view-config .cdx-button__icon {
|
|
.cdx-mixin-css-icon( @cdx-icon-settings, @param-is-button-icon: true,
|
|
@param-size-icon: @size-icon-small );
|
|
}
|
|
}
|