mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-09-23 10:22:14 +00:00
6fd605d4b2
Codex icons are auto-mirrored for RTL scripts but a pseudo-element causes the auto-mirror selector to have incorrect order and that builtin auto-mirror functionality of codex icons to not get trigged. This change fixes it by adding a span to each icon so auto-mirror can target an actual element instead of ::after pseudo-elements. Bug: T369659 Change-Id: Ib5f9793a8ad10980d2742d1046c59306c943f960
144 lines
3.2 KiB
Plaintext
144 lines
3.2 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
|
@import '../mmv.variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
@import '../mmv.mixins.less';
|
|
|
|
// Common to all buttons
|
|
// We override the codex background and borders to be their forced darkmode variant
|
|
// We use transparency on the background and on the icon color
|
|
.cdx-button.mw-mmv-button {
|
|
background-color: @buttons-background-color-faded;
|
|
position: fixed;
|
|
z-index: 1003;
|
|
// Cancel out default outline
|
|
border-width: 0;
|
|
outline: 0;
|
|
transition-property: background-color, opacity, border-width, border-color, box-shadow, transform;
|
|
|
|
&.mw-mmv-dialog-open, /* A button that has opened a dialog */
|
|
&:active,
|
|
&:hover {
|
|
background-color: @buttons-background-color;
|
|
}
|
|
|
|
&:focus {
|
|
background-color: @buttons-background-color;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.mw-mmv-icon {
|
|
// Default transparency of the icon
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&.mw-mmv-dialog-open,
|
|
&:active,
|
|
&:focus,
|
|
&:hover {
|
|
.mw-mmv-icon {
|
|
transition: opacity 0.1s ease-in;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// when the cursor is hidden, the buttons are hidden as well
|
|
.user-inactive & {
|
|
opacity: 0;
|
|
transform: scale( 0 );
|
|
}
|
|
}
|
|
|
|
// Positioning of buttons
|
|
.mw-mmv-download-button,
|
|
.mw-mmv-reuse-button,
|
|
.mw-mmv-options-button,
|
|
.mw-mmv-close,
|
|
.mw-mmv-fullscreen {
|
|
right: @buttons-offset-edge;
|
|
left: auto;
|
|
min-width: @buttons-size;
|
|
min-height: @buttons-size;
|
|
}
|
|
|
|
// Vertical positioning of left/right button
|
|
.mw-mmv-next-image,
|
|
.mw-mmv-prev-image {
|
|
&.disabled {
|
|
display: none;
|
|
cursor: none;
|
|
}
|
|
|
|
.mw-mmv-icon {
|
|
mask-size: @buttons-icon-size-large;
|
|
}
|
|
}
|
|
|
|
// Per button positioning and providing icons
|
|
.mw-mmv-close {
|
|
top: @buttons-offset-edge;
|
|
|
|
.mw-mmv-icon {
|
|
.cdx-mixin-css-icon( @cdx-icon-close, @param-fill-color: @color-inverted-fixed );
|
|
}
|
|
}
|
|
|
|
.mw-mmv-fullscreen {
|
|
top: ( @buttons-offset-edge + ( @buttons-offset-each ) );
|
|
|
|
.mw-mmv-icon {
|
|
.cdx-mixin-css-icon( @cdx-icon-full-screen, @param-fill-color: @color-inverted-fixed );
|
|
|
|
.jq-fullscreened & {
|
|
.cdx-mixin-css-icon( @cdx-icon-exit-fullscreen, @param-fill-color: @color-inverted-fixed );
|
|
}
|
|
}
|
|
}
|
|
|
|
.mw-mmv-options-button {
|
|
top: ( @buttons-offset-edge + ( 2 * @buttons-offset-each ) );
|
|
|
|
.mw-mmv-icon {
|
|
.cdx-mixin-css-icon( @cdx-icon-settings, @param-fill-color: @color-inverted-fixed );
|
|
}
|
|
}
|
|
|
|
.mw-mmv-next-image {
|
|
right: @size-icon-medium;
|
|
|
|
.mw-mmv-icon {
|
|
.cdx-mixin-css-icon( @cdx-icon-next, @param-fill-color: @color-inverted-fixed, @param-size-icon: @size-icon-medium );
|
|
}
|
|
}
|
|
|
|
.mw-mmv-prev-image {
|
|
left: @size-icon-medium;
|
|
|
|
.mw-mmv-icon {
|
|
.cdx-mixin-css-icon( @cdx-icon-previous, @param-fill-color: @color-inverted-fixed, @param-size-icon: @size-icon-medium );
|
|
}
|
|
}
|
|
|
|
.mw-mmv-reuse-button {
|
|
bottom: @buttons-offset-edge + @metadatabar-above-fold-height;
|
|
|
|
.jq-fullscreened & {
|
|
bottom: @buttons-offset-edge + @progress-bar-height;
|
|
}
|
|
|
|
.mw-mmv-icon {
|
|
.cdx-mixin-css-icon( @cdx-icon-share, @param-fill-color: @color-inverted-fixed );
|
|
}
|
|
}
|
|
|
|
.mw-mmv-download-button {
|
|
bottom: @buttons-offset-edge + @metadatabar-above-fold-height + @buttons-offset-each;
|
|
|
|
.jq-fullscreened & {
|
|
bottom: @buttons-offset-edge + @progress-bar-height + @buttons-offset-each;
|
|
}
|
|
|
|
.mw-mmv-icon {
|
|
.cdx-mixin-css-icon( @cdx-icon-download, @param-fill-color: @color-inverted-fixed );
|
|
}
|
|
}
|