danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-11-27 04:45:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Dark Theme: Various fixes (#1047)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-04-26 15:41:13 +03:00
parent c608ba57a8
commit a2dc79c75f
7 changed files with 44 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/Audio.scss
View File

@ -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;
}
}
}

2
src/components/middle/MiddleHeader.scss
View File

@ -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;

18
src/components/middle/message/Message.scss
View File

@ -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 {

9
src/components/middle/message/Poll.scss
View File

@ -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);
}
}

3
src/components/ui/Spinner.scss
View File

@ -53,6 +53,9 @@
&.blue {
> div {
background-image: var(--spinner-blue-data);
.theme-dark & {
background-image: var(--spinner-dark-blue-data);
}
}
}

3
src/styles/_variables.scss
View File

@ -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==);

6
src/styles/themes.json
View File

@ -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"],