mediawiki-skins-Citizen/skinStyles/extensions/MsUpload/ext.MsUpload.less
2024-07-01 00:04:36 -04:00

126 lines
2.5 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for Extension:MsUpload
* Module: ext.MsUpload
* Version: REL1_35 32eb420
*
* Date: 2021-08-25
*/
#msupload {
&-div {
background: var( --color-surface-1 );
border-top: 0;
a {
color: var( --color-progressive );
}
}
&-dropzone {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0;
margin: 8px;
font-size: var( --font-size-small );
font-weight: var( --font-weight-medium );
color: var( --color-base );
border-color: var( --border-color-interactive );
}
&-list {
.file {
background: var( --color-surface-2 );
border-top-color: var( --border-color-base );
.file-name {
color: var( --color-emphasized );
&:hover {
background-color: var( --background-color-button-quiet--hover );
}
&:active {
background-color: var( --background-color-button-quiet--active );
}
}
.file-size {
color: var( --color-subtle );
}
.file-warning,
.file-error {
color: var( --color-base );
}
}
.green {
background-color: var( --background-color-success-subtle );
}
.yellow {
background-color: var( --background-color-warning-subtle );
}
.red {
background-color: var( --background-color-destructive-subtle );
}
}
// Increase clickable area and fix alignment
&-bottom {
display: flex;
align-items: center;
height: auto;
padding: 0;
border-top-color: var( --border-color-base );
#msupload-files {
height: auto;
padding: 6px 12px 6px 36px;
background-position: 12px center;
background-size: 18px;
}
a {
display: flex;
align-items: center;
padding: 6px 12px;
margin-right: 0;
font-size: var( --font-size-small );
&:hover {
background-color: var( --background-color-button-quiet--hover );
}
&:active {
background-color: var( --background-color-button-quiet--active );
}
}
.spacer {
background-color: var( --border-color-base );
border-left-color: var( --border-color-base );
}
}
&-select,
&-bottom #msupload-files {
background-image: url( data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d='M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z'/%3E%3Cpath d='M10 1 5 7h4v8h2V7h4z'/%3E%3C/svg%3E%0A );
}
&-container.start-loading,
&-select,
&-bottom #msupload-files {
filter: var( --filter-invert );
}
}
.drop-over {
background-color: var( --background-color-success-subtle );
}