From b3b644527d5673e16e61d404ff58a3c7bd6b6637 Mon Sep 17 00:00:00 2001 From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com> Date: Mon, 13 Jul 2020 17:37:43 +0000 Subject: [PATCH] fix: dark theme colors --- frontend/public/themes/dark.css | 66 +++++++++++++++++++++++++++++---- 1 file changed, 59 insertions(+), 7 deletions(-) diff --git a/frontend/public/themes/dark.css b/frontend/public/themes/dark.css index 978b4f0fa0..e916457a56 100644 --- a/frontend/public/themes/dark.css +++ b/frontend/public/themes/dark.css @@ -1,7 +1,7 @@ :root { - --background: #121212; - --surfacePrimary: #171819; - --surfaceSecondary: #212528; + --background: #141D24; + --surfacePrimary: #20292F; + --surfaceSecondary: #3A4147; --divider: rgba(255, 255, 255, 0.12); --icon: #ffffff; --textPrimary: rgba(255, 255, 255, 0.87); @@ -30,25 +30,34 @@ header { #search #input { background: var(--surfaceSecondary); + border-color: var(--surfacePrimary); +} +#search #input input::placeholder { + color: var(--textSecondary); } -#search.active #input, -#search.active .boxes { +#search.active #input { background: var(--surfacePrimary); } #search.active input { color: var(--textPrimary); } -#search.active #result { +#search #result { background: var(--background); color: var(--textPrimary); } -#search.active .boxes h3 { +#search .boxes { + background: var(--surfaceSecondary); +} +#search .boxes h3 { color: var(--textPrimary); } .action { color: var(--textPrimary) !important; } +.action:hover { + background-color: rgba(255, 255, 255, .1); +} .action i { color: var(--icon) !important; } @@ -93,6 +102,10 @@ nav > div { background: var(--background); } +.message { + color: var(--textPrimary); +} + .card { background: var(--surfacePrimary); color: var(--textPrimary); @@ -106,9 +119,23 @@ nav > div { .dashboard p label { color: var(--textPrimary); } +.card#share ul li input, +.card#share ul li select, .input { background: var(--surfaceSecondary); color: var(--textPrimary); + border: 1px solid rgba(255, 255, 255, 0.05); +} +.input:hover, +.input:focus { + border-color: rgba(255, 255, 255, 0.15); +} +.input--red { + background: #73302D; +} + +.input--green { + background: #147A41; } .dashboard #nav li, @@ -119,10 +146,27 @@ nav > div { color: var(--textPrimary); } +table th { + color: var(--textSecondary); +} + +.file-list li:hover { + background: var(--surfaceSecondary); +} +.file-list li:before { + color: var(--textSecondary); +} +.file-list li[aria-selected=true]:before { + color: var(--icon); +} + .shell { background: var(--surfacePrimary); color: var(--textPrimary); } +.shell__result { + border-top: 1px solid var(--divider); +} #editor-container { background: var(--background); @@ -146,3 +190,11 @@ nav > div { background: var(--surfaceSecondary) !important; } } + +.share__box, .share__box__download { + background: var(--surfaceSecondary) !important; + color: var(--textPrimary); +} +.share__box__download { + border-bottom-color: var(--divider); +} \ No newline at end of file