mediawiki-extensions-Multim.../resources/mmv/ui/mmv.ui.canvasButtons.less
Volker E bee73f7520 styles: Replace old variables calls with skin variables
Replacing 'mediawiki.ui/variables.less' `@import`
with new skin-aware 'mediawiki.skin.variables.less' standard.
Also replacing and removing scattered WikimediaUI Base variables
with new skin variables.

Also
- replacing several static values with new Codex design tokens featuring
  skin variables for following properties:
  - `background-color`
  - `color`
  - `border*`
  - `border-radius`
- replacing local variables with new skin variables where applicable.

Bump required MediaWiki core version to >= v1.41.0.

Bug: T319381
Bug: T332541
Co-Authored-by: Volker E. <volker.e@wikimedia.org>
Depends-On: I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06
Change-Id: Ie834b3f652bd22d9bf96c112166a5b7fcc3ecf2d
2023-04-16 03:32:27 -07:00

143 lines
2.8 KiB
Plaintext

@import 'mediawiki.skin.variables.less';
@import '../mmv.variables.less';
@import '../mmv.mixins.less';
.mw-mmv-download-button,
.mw-mmv-reuse-button,
.mw-mmv-options-button,
.mw-mmv-close,
.mw-mmv-fullscreen,
.mw-mmv-next-image,
.mw-mmv-prev-image {
cursor: pointer;
position: fixed;
background-color: transparent;
background-repeat: no-repeat;
opacity: 0.8;
border: 0;
z-index: 1003;
&.mw-mmv-dialog-open,
&:hover {
text-decoration: none;
opacity: 1;
}
.unselectable;
}
.mw-mmv-download-button.hidden,
.mw-mmv-reuse-button.hidden,
.mw-mmv-options-button.hidden,
.mw-mmv-close.hidden,
.mw-mmv-fullscreen.hidden,
.mw-mmv-next-image.hidden,
.mw-mmv-prev-image.hidden {
display: none;
}
.cursor-hidden {
.mw-mmv-download-button,
.mw-mmv-reuse-button,
.mw-mmv-close,
.mw-mmv-fullscreen,
.mw-mmv-next-image,
.mw-mmv-prev-image {
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
cursor: none;
}
}
.mw-mmv-download-button,
.mw-mmv-reuse-button,
.mw-mmv-options-button,
.mw-mmv-close,
.mw-mmv-fullscreen {
right: @buttons-offset-right;
left: auto;
transition: opacity 0.25s;
background-position: center;
margin-top: 14px;
width: 24px + 2 * 14px;
}
.mw-mmv-next-image,
.mw-mmv-prev-image {
top: -999px;
width: 80px;
height: 120px;
transition: opacity 0.25s, margin 0.25s;
&.disabled {
display: none;
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
cursor: none;
}
}
.mw-mmv-close {
top: @buttons-offset-right;
/* @embed */
background-image: url( img/mw-close.svg );
height: 23px;
}
.mw-mmv-fullscreen {
right: @buttons-offset-right - 2px;
top: ( @buttons-offset-right + ( @buttons-offset-each-top ) );
/* @embed */
background-image: url( img/mw-fullscreen-ltr.svg );
height: 22px;
}
.mw-mmv-options-button {
top: ( @buttons-offset-right + ( 2 * @buttons-offset-each-top ) );
/* @embed */
background-image: url( img/gear.svg );
height: 23px;
}
.jq-fullscreened {
.mw-mmv-fullscreen {
/* @embed */
background-image: url( img/mw-defullscreen-ltr.svg );
}
}
.mw-mmv-next-image {
/* @embed */
background-image: url( img/next-ltr.svg );
background-position: right;
right: @navbutton-width;
&:hover {
margin-right: -4px;
}
}
.mw-mmv-prev-image {
/* @embed */
background-image: url( img/prev-ltr.svg );
background-position: left;
left: @navbutton-width;
&:hover {
margin-left: -4px;
}
}
.mw-mmv-reuse-button {
right: @buttons-offset-right - 2px;
bottom: @buttons-offset-right + @metadatabar-above-fold-height + @progress-bar-height;
/* @embed */
background-image: url( img/use-ltr.svg );
height: 24px;
}
.mw-mmv-download-button {
bottom: @buttons-offset-right + @metadatabar-above-fold-height + @progress-bar-height + 37px;
/* @embed */
background-image: url( img/mw-download.svg );
height: 24px;
}