mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-04 18:59:03 +00:00
5d3ecd9edd
This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info.
114 lines
2.2 KiB
Plaintext
114 lines
2.2 KiB
Plaintext
/*
|
|
* Citizen
|
|
*
|
|
* SkinStyles for Extension:MultimediaViewer
|
|
* Module: mmv.ui.download.pane
|
|
* Version: REL1_39 (1b97775)
|
|
*
|
|
* Date: 2022-11-26
|
|
*/
|
|
|
|
.mw-mmv-download-pane {
|
|
height: auto;
|
|
padding: 0;
|
|
|
|
// Let's make better use of space
|
|
.mw-mmv-download-area {
|
|
display: flex;
|
|
width: auto;
|
|
padding: var( --space-md );
|
|
|
|
.mw-mmv-download-go-button {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
/* Selection size arrow element */
|
|
.mw-mmv-download-select-menu {
|
|
border-left-color: var( --border-color-base );
|
|
|
|
&:hover {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.mw-mmv-download-image-size {
|
|
font-size: var( --font-size-x-small );
|
|
}
|
|
|
|
.mw-mmv-download-preview-link {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0;
|
|
font-weight: var( --font-weight-semibold );
|
|
color: var( --color-subtle );
|
|
|
|
// Add hover state
|
|
&:hover {
|
|
color: var( --color-progressive--hover );
|
|
}
|
|
|
|
&:active {
|
|
color: var( --color-progressive--active );
|
|
}
|
|
}
|
|
|
|
/* Pulldown size menu */
|
|
.mw-mmv-download-size {
|
|
margin-right: var( --space-md );
|
|
|
|
.oo-ui-labelElement-label {
|
|
margin-left: 0; // There is no icon
|
|
}
|
|
}
|
|
}
|
|
|
|
.mw-mmv-download-attribution {
|
|
padding: var( --space-md );
|
|
margin: 0;
|
|
color: var( --color-emphasized );
|
|
background-color: var( --color-surface-2 );
|
|
border-top: 1px solid var( --border-color-base );
|
|
border-bottom-right-radius: var( --border-radius--medium );
|
|
border-bottom-left-radius: var( --border-radius--medium );
|
|
|
|
&:hover {
|
|
color: var( --color-emphasized );
|
|
background-color: var( --color-surface-2--hover );
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --color-surface-2--active );
|
|
}
|
|
|
|
&-how {
|
|
padding: 0;
|
|
|
|
.mw-mmv-download-attribution-close-button {
|
|
top: var( --space-xxs );
|
|
margin: 0;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
&-how-header,
|
|
&-cta-header {
|
|
font-size: 1rem;
|
|
font-weight: var( --font-weight-semibold );
|
|
}
|
|
|
|
&-cta-invite {
|
|
font-size: var( --font-size-x-small );
|
|
color: var( --color-progressive );
|
|
}
|
|
|
|
&-cta {
|
|
background-size: contain;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mw-mmv-reuse-dialog.mw-mmv-reuse-download-active .mw-mmv-reuse-down-arrow {
|
|
background-color: var( --color-surface-2 );
|
|
}
|