From ca07e91bd953f156afed07ff34b4d99017dc187a Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Wed, 25 Aug 2021 16:10:27 -0400 Subject: [PATCH] feat: MsUpload styles clean up --- README.md | 1 + .../extensions/MsUpload/ext.MsUpload.less | 184 +++++++++++------- 2 files changed, 115 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index 6a52c2a9..f9ddf362 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/skinStyles/extensions/MsUpload/ext.MsUpload.less b/skinStyles/extensions/MsUpload/ext.MsUpload.less index aa6170f2..a80e667e 100644 --- a/skinStyles/extensions/MsUpload/ext.MsUpload.less +++ b/skinStyles/extensions/MsUpload/ext.MsUpload.less @@ -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; } }