ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chat: Use accent color for selected; Message: Get rid of orange color (#1029)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-04-19 18:37:09 +03:00
parent 60e26125fd
commit 8c4345f6af
7 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/PickerSelectedItem.scss
View File

@ -21,7 +21,7 @@
} }
&:hover { &:hover {
background-color: var(--color-chat-active); background-color: var(--color-item-active);
} }
&.closeable:hover { &.closeable:hover {

18
src/components/left/main/Chat.scss
View File

@ -17,14 +17,26 @@
transition: transform .2s ease-out; transition: transform .2s ease-out;
} }
&:hover, &.selected, &.ListItem.has-menu-open { &:hover, &.ListItem.has-menu-open {
.Avatar.online::after { .Avatar.online::after {
border-color: var(--color-chat-hover); border-color: var(--color-chat-hover);
} }
} }
&.selected { &.selected,
--background-color: var(--color-chat-hover); &.selected:hover {
.Avatar.online::after {
border-color: var(--color-chat-active);
}
.ListItem-button {
--background-color: var(--color-chat-active) !important;
--color-text: var(--color-white);
}
--background-color: var(--color-chat-active) !important;
--color-text-meta-colored: var(--color-white);
--color-text-meta: var(--color-white);
--color-text-secondary: var(--color-white);
--color-error: var(--color-white);
} }
.info { .info {

2
src/components/right/StickerSearch.scss
View File

@ -45,7 +45,7 @@
color: var(--color-text-secondary); color: var(--color-text-secondary);
&:hover, &:active { &:hover, &:active {
background: var(--color-chat-active) !important; background: var(--color-item-active) !important;
} }
} }
} }

2
src/components/ui/ListItem.scss
View File

@ -47,7 +47,7 @@
&:not(.has-ripple), &:not(.has-ripple),
body.animation-level-0 & { body.animation-level-0 & {
.ListItem-button:active { .ListItem-button:active {
--background-color: var(--color-chat-active) !important; --background-color: var(--color-item-active) !important;
} }
} }
} }

2
src/components/ui/MenuItem.scss
View File

@ -48,7 +48,7 @@
} }
&:not(.has-ripple):not(.disabled):active { &:not(.has-ripple):not(.disabled):active {
background-color: var(--color-chat-active); background-color: var(--color-item-active);
transition: none !important; transition: none !important;
} }

4
src/styles/_variables.scss
View File

@ -36,8 +36,9 @@ $color-gray: #c4c9cc;
$color-text-secondary: #707579; $color-text-secondary: #707579;
$color-text-meta: #686c72; $color-text-meta: #686c72;
$color-borders: #dadce0; $color-borders: #dadce0;
$color-item-active: #ededed;
$color-chat-hover: #f4f4f5; $color-chat-hover: #f4f4f5;
$color-chat-active: #ededed; $color-chat-active: #5B90E0;
$color-selection: #3993fb; $color-selection: #3993fb;
// https://github.com/telegramdesktop/tdesktop/wiki/Theme-Reference#user-content-standard-color-constants // https://github.com/telegramdesktop/tdesktop/wiki/Theme-Reference#user-content-standard-color-constants
@ -120,6 +121,7 @@ $color-user-8: #faa774;
--color-chat-hover: #{$color-chat-hover}; --color-chat-hover: #{$color-chat-hover};
--color-chat-active: #{$color-chat-active}; --color-chat-active: #{$color-chat-active};
--color-item-active: #{$color-item-active};
--color-selection-highlight: #{$color-selection}; --color-selection-highlight: #{$color-selection};
--color-selection-highlight-emoji: rgba(#{toRGB($color-selection)}, .7); --color-selection-highlight-emoji: rgba(#{toRGB($color-selection)}, .7);

7
src/styles/themes.json
View File

@ -1,9 +1,10 @@
{ {
"--color-primary": ["#50A2E9", "#868DF5"], "--color-primary": ["#50A2E9", "#8378DB"],
"--color-background": ["#FFFFFF", "#212121"], "--color-background": ["#FFFFFF", "#212121"],
"--color-background-own": ["#EEFEDF", "#A45D37"], "--color-background-own": ["#EEFEDF", "#8378DB"],
"--color-chat-hover": ["#F4F4F5", "#2C2C2C"], "--color-chat-hover": ["#F4F4F5", "#2C2C2C"],
"--color-chat-active": ["#ededed", "#292929"], "--color-chat-active": ["#4C90E6", "#8378DB"],
"--color-item-active": ["#ededed", "#292929"],
"--color-text": ["#000000", "#FFFFFF"], "--color-text": ["#000000", "#FFFFFF"],
"--color-text-secondary": ["#707579", "#AAAAAA"], "--color-text-secondary": ["#707579", "#AAAAAA"],
"--color-borders": ["#DADCE0", "#100F10"], "--color-borders": ["#DADCE0", "#100F10"],