diff --git a/skin.json b/skin.json index 590524eb..b11c8178 100644 --- a/skin.json +++ b/skin.json @@ -407,6 +407,8 @@ "+ext.Lingo": "skinStyles/extensions/Lingo/ext.Lingo.less", "+ext.Lingo.jquery.qtip": "skinStyles/extensions/Lingo/ext.Lingo.jquery.qtip.less", + "+ext.MsUpload": "skinStyles/extensions/MsUpload/ext.MsUpload.less", + "+ext.relatedArticles.cards": "skinStyles/extensions/RelatedArticles/ext.relatedArticles.cards.less", "+ext.relatedArticles.readMore": "skinStyles/extensions/RelatedArticles/ext.relatedArticles.readMore.less", diff --git a/skinStyles/extensions/MsUpload/ext.MsUpload.less b/skinStyles/extensions/MsUpload/ext.MsUpload.less new file mode 100644 index 00000000..8f4e9544 --- /dev/null +++ b/skinStyles/extensions/MsUpload/ext.MsUpload.less @@ -0,0 +1,80 @@ +@import '../../../resources/variables.less'; + +#msupload-container.start-loading { + filter: invert(1) hue-rotate(180deg); +} + +.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); + } +} + +.skin-citizen-dark { + & #msupload-div { + background-color: @dark-bg-20; + border-top-color: @dark-bg-30; + + & a { + color: @color-primary; + } + + & #msupload-dropzone { + border-color: @dark-text-70; + color: @dark-text-90; + + &.drop-over { + background-color: @dark-background-color-quiet--hover; + } + } + + & #msupload-list { + & .file { + background: @dark-bg-40; + border-top-color: @dark-bg-50; + + & .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; + } +}