mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-12-18 10:52:48 +00:00
2a8b140ed3
- Use square cdx icon only buttons - gray transparent brackground - opaque background on hover, active, focus - Some fixes to the positioning and offsets of buttons and dialogs - Move the dialogs to be in the same container as the buttons This is better for accessibility but also fixes the z-index issue Bug: T365192 Change-Id: Idbc2a309fbca15bd528aaed7ca9bed584487c4f3
69 lines
1.3 KiB
Plaintext
69 lines
1.3 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
|
@import '../mmv.variables.less';
|
|
@import '../mmv.mixins.less';
|
|
|
|
@background-color: @background-color-base;
|
|
@dialog-width: 450px;
|
|
|
|
/* Flexbox gap not supported in all browsers */
|
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
.mw-mmv-dialog {
|
|
position: fixed;
|
|
right: @buttons-offset-edge + @buttons-offset-each + ( @arrow-size / 2 );
|
|
display: none;
|
|
width: @dialog-width;
|
|
height: @dialog-height;
|
|
background-color: @background-color;
|
|
box-shadow: @box-shadow-drop-xx-large;
|
|
z-index: 1004;
|
|
|
|
.mw-mmv-dialog-down-arrow {
|
|
right: @buttons-offset-edge + @buttons-offset-each;
|
|
background-color: @background-color;
|
|
width: @arrow-size;
|
|
height: @arrow-size;
|
|
transform: rotate( -45deg );
|
|
position: fixed;
|
|
}
|
|
|
|
.mw-mmv-dialog-warning {
|
|
background-color: @background-color-warning-subtle;
|
|
}
|
|
|
|
.mw-mmv-pt-0 {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.mw-mmv-pb-0 {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.mw-mmv-mt-75 {
|
|
margin-top: @spacing-75;
|
|
}
|
|
|
|
.mw-mmv-mb-75 {
|
|
margin-bottom: @spacing-75;
|
|
}
|
|
|
|
.mw-mmv-pb-150 {
|
|
padding-bottom: @spacing-150;
|
|
}
|
|
|
|
.mw-mmv-gap-50 {
|
|
gap: @spacing-50;
|
|
}
|
|
|
|
.mw-mmv-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.mw-mmv-flex-grow-1 {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.cdx-button__icon--copy {
|
|
.cdx-mixin-css-icon( @cdx-icon-copy, @param-is-button-icon: true );
|
|
}
|
|
}
|