css vars refactoring

This commit is contained in:
Devaev Maxim 2018-07-28 14:47:13 +03:00
parent 8bac7382bb
commit 5a9b86457c
3 changed files with 19 additions and 19 deletions

View File

@ -93,5 +93,5 @@ div#keyboard p {
transform: translateY(-50%); transform: translateY(-50%);
} }
div#keyboard b { div#keyboard b {
color: var(--fg-color-special); color: var(--bg-color-intensive);
} }

View File

@ -23,7 +23,7 @@ td#msd-new-image-size {
} }
div#msd-progress { div#msd-progress {
background-color: var(--bg-color-progress); background-color: var(--bg-color-selected);
height: 1.5em; height: 1.5em;
width: 100%; width: 100%;
position: relative; position: relative;
@ -39,7 +39,7 @@ div#msd-progress:before {
right: 0; right: 0;
} }
div#msd-progress span#msd-progress-value { div#msd-progress span#msd-progress-value {
background-color: var(--fg-color-progress); background-color: var(--bg-color-intensive);
display: inline-block; display: inline-block;
height: 100%; height: 100%;
} }

View File

@ -1,16 +1,4 @@
:root { :root {
--dark-border: thin solid #17191d;
--grey-border: thin solid #202225;
--normal-border: thin solid #36393f;
--black-border: thin solid black;
--intensive-border: 2px solid #5b90bb;
--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
--big-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
--border-color-intensive: #5b90bb;
--bg-color-normal: #36393f; --bg-color-normal: #36393f;
--bg-color-light: #484b51; --bg-color-light: #484b51;
--bg-color-gray: #3b3e43; --bg-color-gray: #3b3e43;
@ -19,15 +7,27 @@
--bg-color-intensive: #436a8a; --bg-color-intensive: #436a8a;
--bg-color-hovered: #1a1c1f; --bg-color-hovered: #1a1c1f;
--bg-color-selected: #171717; --bg-color-selected: #171717;
--bg-color-progress: #171717;
--fg-color-normal: #c3c3c3; --fg-color-normal: #c3c3c3;
--fg-color-dark: #aaaaaa; --fg-color-dark: #aaaaaa;
--fg-color-intensive: white; --fg-color-intensive: white;
--fg-color-inactive: #6c7481; --fg-color-inactive: #6c7481;
--fg-color-selected: #6c7481; --fg-color-selected: var(--fg-color-inactive);
--fg-color-progress: #436a8a;
--fg-color-special: #436a8a;
--bg-color-stream-screen: black; --bg-color-stream-screen: black;
--border-color-normal: var(--bg-color-normal);
--border-color-grey: var(--bg-color-ctl);
--border-color-dark: var(--bg-color-dark);
--border-color-intensive: #5b90bb;
--dark-border: thin solid var(--border-color-dark);
--grey-border: thin solid var(--border-color-grey);
--normal-border: thin solid var(--border-color-normal);
--black-border: thin solid black;
--intensive-border: 2px solid var(--border-color-intensive);
--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
--big-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
} }