mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-15 02:24:04 +00:00
feat: MsUpload styles clean up
This commit is contained in:
alistair3149
alistair3149
parent
86e48c7b73
commit
ca07e91bd9
|
|
@ -46,6 +46,7 @@ Name | Grade | Version | Last updated
|
|||
[Flow (StructuredDiscussions)](https://www.mediawiki.org/wiki/Extension:StructuredDiscussions) | E | N/A | N/A
|
||||
[Graph](https://www.mediawiki.org/wiki/Extension:Graph) | D | N/A | N/A
|
||||
[Lingo](https://www.mediawiki.org/wiki/Extension:Lingo) | E | N/A | N/A
|
||||
[MsUpload](https://www.mediawiki.org/wiki/Extension:MsUpload) | A | REL1_35 `32eb420` | 2021-08-25
|
||||
[MultimediaViewer](https://www.mediawiki.org/wiki/Extension:MultimediaViewer) | C | N/A | N/A
|
||||
[OAuth](https://www.mediawiki.org/wiki/Extension:OAuth) | D | N/A | N/A
|
||||
[Popups](https://www.mediawiki.org/wiki/Extension:Popups) | D | N/A | N/A
|
||||
|
|
|
|||
|
|
@ -1,79 +1,123 @@
|
|||
@import '../../../resources/variables.less';
|
||||
/*
|
||||
* Citizen
|
||||
*
|
||||
* SkinStyles for Extension:MsUpload
|
||||
* Module: ext.MsUpload
|
||||
* Version: REL1_35 32eb420
|
||||
*
|
||||
* Date: 2021-08-25
|
||||
*/
|
||||
|
||||
#msupload-container.start-loading {
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
#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 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar #msupload-select,
|
||||
#msupload-bottom #msupload-files {
|
||||
background-image: linear-gradient( transparent, transparent ), 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" );
|
||||
|
||||
.skin-citizen-dark & {
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
}
|
||||
.drop-over {
|
||||
background-color: var( --background-color-success );
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
& #msupload-div {
|
||||
border-top-color: @dark-bg-30;
|
||||
background-color: @dark-bg-20;
|
||||
|
||||
& a {
|
||||
color: @color-primary;
|
||||
#msupload {
|
||||
&-bottom #msupload-files {
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
}
|
||||
|
||||
& #msupload-dropzone {
|
||||
border-color: @dark-text-70;
|
||||
color: @dark-text-90;
|
||||
|
||||
&.drop-over {
|
||||
background-color: @dark-background-color-quiet--hover;
|
||||
}
|
||||
}
|
||||
|
||||
& #msupload-list {
|
||||
& .file {
|
||||
border-top-color: @dark-bg-50;
|
||||
background: @dark-bg-40;
|
||||
|
||||
& .file-name-input,
|
||||
& .file-name:hover {
|
||||
background: @dark-bg-60;
|
||||
}
|
||||
|
||||
& .file-size {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
& .file-loading,
|
||||
& .file-cancel {
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
}
|
||||
|
||||
& .file-warning {
|
||||
color: @dark-background-color-warning;
|
||||
}
|
||||
|
||||
& .file-error {
|
||||
color: @dark-background-color-destructive;
|
||||
}
|
||||
}
|
||||
|
||||
& .green {
|
||||
background: fade( @green-30, 5% );
|
||||
}
|
||||
|
||||
& .yellow {
|
||||
background: fade( @yellow-30, 5% );
|
||||
}
|
||||
|
||||
& .red {
|
||||
background: fade( @red-30, 5% );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #msupload-bottom {
|
||||
border-top-color: @dark-bg-30;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue