mediawiki-skins-Citizen/skinStyles/extensions/MsUpload/ext.MsUpload.less
2021-08-25 16:32:07 -04:00

124 lines
2.4 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for Extension:MsUpload
* Module: ext.MsUpload
* Version: REL1_35 32eb420
*
* Date: 2021-08-25
*/
#msupload {
&-div {
border-top: 0;
background: var( --color-surface-1 );
a {
color: var( --color-primary );
}
}
&-dropzone {
display: flex;
height: 36px;
align-items: center;
justify-content: center;
padding: 0;
border-color: var(--border-color-base--darker);
margin: 8px;
color: var( --color-base );
font-size: 0.875rem;
font-weight: 500;
}
&-list {
.file {
border-top-color: var( --border-color-base );
background: var( --color-surface-2 );
.file-name {
color: var( --color-base--emphasized );
&:hover {
background-color: var( --background-color-quiet--hover );
}
&:active {
background-color: var( --background-color-quiet--active );
}
}
.file-size {
color: var( --color-base--subtle );
}
.file-warning,
.file-error {
color: var( --color-base );
}
}
.green {
background-color: var( --background-color-success );
}
.yellow {
background-color: var( --background-color-warning );
}
.red {
background-color: var( --background-color-destructive );
}
}
// Increase clickable area and fix alignment
&-bottom {
display: flex;
height: auto;
align-items: center;
padding: 0;
border-top-color: var( --border-color-base );
#msupload-files {
height: auto;
padding: 6px 12px 6px 36px;
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 );
background-position: 12px center;
background-size: 18px;
}
a {
display: flex;
align-items: center;
padding: 6px 12px;
margin-right: 0;
font-size: 0.875rem;
&:hover {
background-color: var( --background-color-quiet--hover );
}
&:active {
background-color: var( --background-color-quiet--active );
}
}
.spacer {
border-left-color: var( --border-color-base );
background-color: var( --border-color-base );
}
}
}
.drop-over {
background-color: var( --background-color-success );
}
.skin-citizen-dark {
#msupload {
&-bottom #msupload-files {
filter: invert( 1 ) hue-rotate( 180deg );
}
}
}