Page MenuHomeWickedGov Phorge
Files F5986802

mmv.ui.canvasButtons.less
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

mmv.ui.canvasButtons.less
View Options

@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
// Increase of specificity by class name repeat to avoid rare white boxes, T374373
.cdx-button.mw-mmv-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-close,
.mw-mmv-fullscreen {
right: @buttons-offset-edge;
left: auto;
min-width: @buttons-size;
min-height: @buttons-size;
}
// 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-next-image {
right: @size-icon-medium;
.mw-mmv-icon {
mask-size: @buttons-icon-size-large;
.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 {
mask-size: @buttons-icon-size-large;
.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 );
}
}

File Metadata

Mime Type
text/plain
Expires
Sun, Oct 4, 00:13 (2 w, 4 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
64/4f/1120ccb8155d8b1c02065d6fcf80
Default Alt Text
mmv.ui.canvasButtons.less (2 KB)

Event Timeline