dark theme colors

This commit is contained in:
Martti Malmi 2020-04-03 01:01:01 +03:00
parent 734e3b20b4
commit 3638c11efd
3 changed files with 39 additions and 12 deletions

View File

@ -2,13 +2,22 @@
:root {
--text-color: #ffffff;
--text-time: rgba(255, 255, 255, 0.45);
--main-color: #3b3936;
--header-color: #292929;
--chat-active: #252525;
--chat-hover: #363636;
--msg-content-background: #000000;
--our-msg: #3f4939;
--main-color: rgb(22, 23, 44);
--header-color: #101126;
--chat-active: rgb(22, 23, 44);
--chat-hover: #171833;
--msg-content-background: #22244C;
--our-msg: #1DC0F2;
--notify: #476974;
--login-background: #154352;
--seen-indicator: rgba(255, 255, 255, 0.45);
}
--input-bg: #262642;
--input-text: #ffffff;
--input-placeholder: #ccc;
--small-text-color: #bbb;
--button-bg: rgb(22, 23, 44);
--button-color: #1DC0F2;
--button-border: 2px solid #1DC0F2;
--button-hover-bg: #101126;
--sidebar-border-right: 1px solid #3D3E66;
}

View File

@ -11,4 +11,13 @@
--notify: #9ee8ff;
--login-background: #70d4f2;
--seen-indicator: rgba(0, 0, 0, 0.45);
}
--input-bg: initial;
--input-text: initial;
--input-placeholder: initial;
--small-text-color: #777;
--button-bg: #ddd;
--button-color: initial;
--button-border: 0;
--button-hover-bg: #ccc;
--sidebar-border-right: 1px solid #dfdfdf;
}

View File

@ -36,15 +36,23 @@ input, button, .button {
input {
margin-right: 7px;
background: var(--input-bg);
color: var(--input-text);
}
::placeholder {
color: var(--input-placeholder);
}
button, .button {
background: #ddd;
background: var(--button-bg);
color: var(--button-color);
border: var(--button-border);
cursor: pointer;
}
button:hover, button:active, button:focus, .button:hover, .button:active, .button:focus {
background: #ccc;
background: var(--button-hover-bg);
}
img {
@ -110,7 +118,7 @@ img {
display: flex;
flex-direction: column;
flex: 1 0 10em;
border-right: 1px solid #dfdfdf;
border-right: var(--sidebar-border-right);
}
.sidebar * {
@ -368,6 +376,7 @@ header #back-button {
background-color: transparent;
font-size: 30px;
padding: 5px;
border: 0;
}
/*----- Sidebar------- */
@ -471,7 +480,7 @@ header #back-button {
small {
font-size: 12px;
color: #777;
color: var(--small-text-color);
}
.chat-item.active, .chat-item.active:hover {