From a2dc79c75f51e0f6e80ed33ad9fd914649791e32 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Mon, 26 Apr 2021 15:41:13 +0300 Subject: [PATCH] Dark Theme: Various fixes (#1047) --- src/components/common/Audio.scss | 10 ++++++++++ src/components/middle/MiddleHeader.scss | 2 +- src/components/middle/message/Message.scss | 18 ++++++++++++++---- src/components/middle/message/Poll.scss | 9 ++++++++- src/components/ui/Spinner.scss | 3 +++ src/styles/_variables.scss | 3 ++- src/styles/themes.json | 6 ++++++ 7 files changed, 44 insertions(+), 7 deletions(-) diff --git a/src/components/common/Audio.scss b/src/components/common/Audio.scss index 3a52c8489..ef4e4e01a 100644 --- a/src/components/common/Audio.scss +++ b/src/components/common/Audio.scss @@ -12,11 +12,21 @@ --color-interactive-inactive: rgba(var(--color-text-green-rgb), 0.4); --color-interactive-buffered: rgba(var(--color-text-green-rgb), 0.4); // Overlays underlying inactive color + .theme-dark & { + --color-text-green-rgb: 255,255,255; + --color-text-green: var(--color-white); + } + .Button { --color-primary: var(--color-text-green); --color-primary-shade: var(--color-green); --color-primary-shade-darker: var(--color-green-darker); --color-white: var(--color-background-own); + + .theme-dark & { + --color-primary-shade: #fff; + --color-primary-shade-darker: #fff; + } } } diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss index a996e1547..86f492a7d 100644 --- a/src/components/middle/MiddleHeader.scss +++ b/src/components/middle/MiddleHeader.scss @@ -345,7 +345,7 @@ } .pinned-message-border-wrapper { - background-color: rgba(var(--color-primary-rgb), 0.5); + background-color: var(--color-primary-opacity); position: relative; will-change: transform; transition: transform .25s ease-in-out; diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index 0d718d7ab..19ab21b79 100644 --- a/src/components/middle/message/Message.scss +++ b/src/components/middle/message/Message.scss @@ -6,8 +6,8 @@ position: relative; --background-color: var(--color-background); - --hover-color: rgba(var(--color-text-secondary-rgb), 0.08); - --active-color: rgba(var(--color-text-secondary-rgb), 0.16); + --hover-color: var(--color-reply-hover); + --active-color: var(--color-reply-active); --max-width: 29rem; --accent-color: var(--color-primary); --accent-shade-color: var(--color-primary-shade); @@ -175,9 +175,19 @@ } } + &.is-in-document-group .File.file-is-selected .file-icon, + &.has-menu-open.is-in-document-group .File .file-icon { + --background-color: var(--color-background-selected); + } + + &.own.is-in-document-group .File.file-is-selected .file-icon, + &.own.has-menu-open.is-in-document-group .File .file-icon { + --background-color: var(--color-background-own-selected); + } + .Audio .message-select-control { - left: 1.063rem; - bottom: 0.813rem; + left: 1.0625rem; + top: 1.375rem; } html.theme-dark &.own .Audio .ProgressSpinner { diff --git a/src/components/middle/message/Poll.scss b/src/components/middle/message/Poll.scss index b80a97fdd..180da103c 100644 --- a/src/components/middle/message/Poll.scss +++ b/src/components/middle/message/Poll.scss @@ -95,9 +95,16 @@ // gray spinner background-image: var(--spinner-gray-data); + .theme-dark & { + background-image: var(--spinner-white-data); + } + .Message.own & { // green spinner background-image: var(--spinner-green-data); + .theme-dark & { + background-image: var(--spinner-white-data); + } } } @@ -165,7 +172,7 @@ .Message.own & { color: var(--accent-color); - --color-primary-shade-rgb: var(--color-text-green-rgb); + --color-primary-shade-rgb: var(--color-accent-own); } } diff --git a/src/components/ui/Spinner.scss b/src/components/ui/Spinner.scss index 3530b5452..9231d5126 100644 --- a/src/components/ui/Spinner.scss +++ b/src/components/ui/Spinner.scss @@ -53,6 +53,9 @@ &.blue { > div { background-image: var(--spinner-blue-data); + .theme-dark & { + background-image: var(--spinner-dark-blue-data); + } } } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 15d543256..7134dd224 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -80,7 +80,7 @@ $color-user-8: #faa774; --color-primary-shade: #{mix($color-primary, $color-black, 92%)}; --color-primary-shade-darker: #{mix($color-primary, $color-black, 84%)}; --color-primary-shade-rgb: #{toRGB(mix($color-primary, $color-black, 92%))}; - + --color-primary-opacity: rgba(var(--color-primary), 0.50); --color-green: #{$color-green}; --color-green-darker: #{mix($color-green, $color-black, 84%)}; @@ -188,6 +188,7 @@ $color-user-8: #faa774; --spinner-white-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==); --spinner-white-thin-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEyIDIzQzUuOSAyMyAxIDE4LjEgMSAxMlM1LjkgMSAxMiAxVjBDNS40IDAgMCA1LjQgMCAxMnM1LjQgMTIgMTIgMTIgMTItNS40IDEyLTEyaC0xYzAgNi4xLTQuOSAxMS0xMSAxMXoiLz48L3N2Zz4=); --spinner-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRlYTRmNiIvPjwvc3ZnPg==); + --spinner-dark-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzgzNzhEQiIvPjwvc3ZnPg==); --spinner-black-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzJlMzkzOSIvPjwvc3ZnPg==); --spinner-green-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRmYWU0ZSIvPjwvc3ZnPg==); --spinner-gray-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzcwNzU3OSIvPjwvc3ZnPg==); diff --git a/src/styles/themes.json b/src/styles/themes.json index 5636b3302..b39272b5f 100644 --- a/src/styles/themes.json +++ b/src/styles/themes.json @@ -1,7 +1,11 @@ { "--color-primary": ["#50A2E9", "#8378DB"], + "--color-primary-opacity": ["#50A2E980", "#8378DB80"], + "--color-primary-shade": ["#4a95d6", "#7b71c6"], "--color-background": ["#FFFFFF", "#212121"], "--color-background-own": ["#EEFEDF", "#8378DB"], + "--color-background-selected": ["#F4F4F5", "#2C2C2C"], + "--color-background-own-selected": ["#d4fcae", "#7b71c6"], "--color-chat-hover": ["#F4F4F5", "#2C2C2C"], "--color-chat-active": ["#4C90E6", "#8378DB"], "--color-item-active": ["#ededed", "#292929"], @@ -16,6 +20,8 @@ "--color-light-shadow": ["#7272722B", "#00000040"], "--color-green": ["#4DCD5E", "#8378DB"], "--color-text-meta-colored": ["#4DCD5E", "#8378DB"], + "--color-reply-hover": ["#F4F4F4", "#272727"], + "--color-reply-active": ["#E8E9E9", "#2E2F2F"], "--color-reply-own-hover": ["#DBF4CE", "#6458bc"], "--color-reply-own-active": ["#C8EBBC", "#4F4A9F"], "--color-accent-own": ["#4FAE4E", "#FFFFFF"],