mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-26 23:32:25 +00:00
2bf20397e1
This decouple the filter style from the class. Instead, filter-invert can be redefined if needed (e.g. :root.skin-citizen-dark)
126 lines
2.4 KiB
Plaintext
126 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: var( --font-weight-medium );
|
|
}
|
|
|
|
&-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-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 );
|
|
}
|
|
}
|
|
|
|
&-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 );
|
|
}
|