Fix colors in dialogs (#306)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-11-16 19:13:07 +03:00 committed by GitHub
parent c7a8735d35
commit 4717598936
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 29 additions and 23 deletions

View File

@ -144,16 +144,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100% - 32px - 1.25rem); height: calc(100% - 32px - 1.25rem);
background: rgba(31, 31, 37, 0.7); background: var(--theme-dialog-bg);
border-radius: 1.25rem; border-radius: 1.25rem;
box-shadow: 0px 44px 154px rgba(0, 0, 0, .75); box-shadow: 0px 44px 154px rgba(0, 0, 0, .75);
backdrop-filter: blur(30px); backdrop-filter: blur(15px);
.header { .header {
flex-shrink: 0; flex-shrink: 0;
padding: 0 2.5rem; padding: 0 2.5rem;
height: 4.5rem; height: 4.5rem;
border-bottom: 1px solid var(--theme-card-divider); border-bottom: 1px solid var(--theme-dialog-divider);
.icon { opacity: .6; } .icon { opacity: .6; }
.title { .title {
@ -170,7 +170,7 @@
flex-shrink: 0; flex-shrink: 0;
padding: 0 2rem; padding: 0 2rem;
height: 3.5rem; height: 3.5rem;
border-bottom: 1px solid var(--theme-bg-accent-hover); border-bottom: 1px solid var(--theme-dialog-divider);
} }
} }
@ -189,12 +189,12 @@
height: max-content; height: max-content;
} }
.activity { .activity {
background-color: var(--theme-bg-accent-color); background-color: var(--theme-dialog-accent);
&.header { border-bottom: none; } &.header { border-bottom: none; }
&.content { &.content {
flex-grow: 1; flex-grow: 1;
padding-bottom: 0; padding-bottom: 0;
background-color: var(--theme-bg-accent-color); background-color: var(--theme-dialog-accent);
} }
} }
} }
@ -210,7 +210,7 @@
flex-direction: column; flex-direction: column;
} }
.leftSection { .leftSection {
border-right: 1px solid var(--theme-bg-accent-hover); border-right: 1px solid var(--theme-dialog-divider);
.scroll-container { .scroll-container {
overflow: auto; overflow: auto;
margin: 2rem 2rem 1.5rem; margin: 2rem 2rem 1.5rem;
@ -222,16 +222,16 @@
} }
.rightSection { .rightSection {
background-color: transparent; background-color: transparent;
.header { border-bottom: 1px solid var(--theme-card-divider); } .header { border-bottom: 1px solid var(--theme-dialog-divider); }
.content { .content {
flex-grow: 1; flex-grow: 1;
padding: 2.5rem 2.5rem 0; padding: 2.5rem 2.5rem 0;
background-color: var(--theme-bg-accent-color); background-color: var(--theme-dialog-accent);
} }
} }
.ref-input { .ref-input {
background-color: var(--theme-bg-accent-color); background-color: var(--theme-dialog-accent);
padding: 1.5rem 2.5rem; padding: 1.5rem 2.5rem;
} }

View File

@ -131,7 +131,7 @@
right: 0; right: 0;
background-color: var(--theme-card-bg); background-color: var(--theme-card-bg);
border-radius: 1.25rem; border-radius: 1.25rem;
backdrop-filter: blur(24px); backdrop-filter: blur(15px);
box-shadow: var(--theme-card-shadow); box-shadow: var(--theme-card-shadow);
z-index: -1; z-index: -1;
} }

View File

@ -64,8 +64,10 @@
--theme-menu-selection: #1D1D23; --theme-menu-selection: #1D1D23;
--theme-menu-divider: rgba(255, 255, 255, .05); --theme-menu-divider: rgba(255, 255, 255, .05);
--theme-scroll-bar: #2C2C34; --theme-scroll-bar: #2C2C34;
--theme-dialog-bg: rgba(47, 47, 53, .7); --theme-dialog-bg: rgba(31, 31, 37, .8);
--theme-dialog-divider: rgba(255, 255, 255, .06); --theme-dialog-accent: rgba(255, 255, 255, .03);
--theme-dialog-divider: rgba(255, 255, 255, .1);
--theme-dialog-spec: rgba(47, 47, 53, .6);
--theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75); --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
--theme-border-modal: rgba(0, 0, 0, 0.2); --theme-border-modal: rgba(0, 0, 0, 0.2);
--theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%); --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
@ -136,8 +138,10 @@
--theme-menu-selection: #37363F; --theme-menu-selection: #37363F;
--theme-menu-divider: rgba(255, 255, 255, .05); --theme-menu-divider: rgba(255, 255, 255, .05);
--theme-scroll-bar: #494852; --theme-scroll-bar: #494852;
--theme-dialog-bg: rgba(47, 47, 53, .7); --theme-dialog-bg: rgba(31, 31, 37, .8);
--theme-dialog-divider: rgba(255, 255, 255, .06); --theme-dialog-accent: rgba(255, 255, 255, .03);
--theme-dialog-divider: rgba(255, 255, 255, .1);
--theme-dialog-spec: rgba(47, 47, 53, .6);
--theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75); --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
--theme-border-modal: rgba(0, 0, 0, 0.2); --theme-border-modal: rgba(0, 0, 0, 0.2);
--theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%); --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
@ -207,17 +211,19 @@
--theme-menu-selection: #DBDBDB; --theme-menu-selection: #DBDBDB;
--theme-menu-divider: rgba(0, 0, 0, .08); --theme-menu-divider: rgba(0, 0, 0, .08);
--theme-scroll-bar: #CBCBCB; --theme-scroll-bar: #CBCBCB;
--theme-dialog-bg: #fff; --theme-dialog-bg: rgba(255, 255, 255, .4);
--theme-dialog-accent: rgba(31, 33, 43, .03);
--theme-dialog-divider: rgba(31, 33, 43, .06); --theme-dialog-divider: rgba(31, 33, 43, .06);
--theme-dialog-spec: rgba(47, 47, 53, .6);
--theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75); --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
--theme-border-modal: rgba(0, 0, 0, 0.2); --theme-border-modal: rgba(0, 0, 0, 0.2);
--theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%); --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
--theme-chat-divider: rgb(233, 233, 233); --theme-chat-divider: rgb(233, 233, 233);
--theme-card-bg: transparent; --theme-card-bg: rgba(255, 255, 255, .6);
--theme-card-bg-accent: rgba(0, 0, 0, .04); --theme-card-bg-accent: rgba(0, 0, 0, .04);
--theme-card-divider: rgba(0, 0, 0, .1); --theme-card-divider: rgba(0, 0, 0, .1);
--theme-card-shadow: 0px 24px 74px rgba(100, 89, 89, 0.5); --theme-card-shadow: 0px 24px 74px rgba(100, 89, 89, .5);
--theme-avatar-bg: #C4C4C4; --theme-avatar-bg: #C4C4C4;
--theme-avatar-hover: #EEEDED; --theme-avatar-hover: #EEEDED;
--theme-avatar-border: rgba(255, 255, 255, .7); --theme-avatar-border: rgba(255, 255, 255, .7);

View File

@ -164,10 +164,10 @@
.floatdialog-container { .floatdialog-container {
margin: 2rem 1rem 1.25rem 0; margin: 2rem 1rem 1.25rem 0;
height: calc(100% - 3.25rem); height: calc(100% - 3.25rem);
background-color: rgba(31, 31, 37, .8); background: var(--theme-dialog-bg-spec);
border-radius: 1.25rem; border-radius: 1.25rem;
box-shadow: 0px 44px 154px rgba(0, 0, 0, .75); box-shadow: var(--theme-dialog-shadow);
backdrop-filter: blur(30px); backdrop-filter: blur(15px);
.header { .header {
padding: 0 2rem 0 2.5rem; padding: 0 2rem 0 2.5rem;

View File

@ -97,10 +97,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100% - 32px - 1.25rem); height: calc(100% - 32px - 1.25rem);
background: var(--theme-dialog-bg); background: var(--theme-dialog-bg-spec);
border-radius: 1.25rem; border-radius: 1.25rem;
box-shadow: var(--theme-dialog-shadow); box-shadow: var(--theme-dialog-shadow);
backdrop-filter: blur(10px); backdrop-filter: blur(15px);
.header { .header {
flex-shrink: 0; flex-shrink: 0;