diff --git a/static/css/forms.css b/static/css/forms.css index 8b56fcdb..0a24fbe7 100644 --- a/static/css/forms.css +++ b/static/css/forms.css @@ -47,8 +47,8 @@ input[type=password] { font-size: 100%; font-family: 'Inconsolata', monospace; padding: 0.3em; - border: 1px solid #EEE; - background: #FAFAFA; + border: 2px solid var(--input-background-color); + background: var(--input-border-color); text-overflow: ellipsis; width: 100%; box-sizing: border-box; @@ -57,13 +57,13 @@ input[type=password] { form.show-validation fieldset.input input:invalid { outline: none; - border: 1px solid #FCC; - background: #FFF5F5; + border: 2px solid var(--input-bad-border-color); + background: var(--input-bad-background-color); } form.show-validation fieldset.input input:valid { outline: none; - border: 1px solid #D3E3D3; - background: #F5FFF5; + border: 2px solid var(--input-good-border-color); + background: var(--input-good-background-color); } button, @@ -73,7 +73,7 @@ input[type=submit] { font-size: 100%; line-height: 100%; padding: 0.3em 0.7em; - border: 1px solid #24AADD; - background: #24AADD; + border: 1px solid var(--main-color); + background: var(--main-color); color: white; } diff --git a/static/css/main.css b/static/css/main.css index b896fb4c..04017df0 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,12 +1,26 @@ +* { + --main-color: #24AADD; + --top-nav-color: #F5F5F5; + --text-color: #111; + --inactive-link-color: #888; + --line-color: #DDD; + --input-bad-border-color: #FCC; + --input-bad-background-color: #FFF5F5; + --input-good-border-color: #D3E3D3; + --input-good-background-color: #F5FFF5; + --input-background-color: #EEE; + --input-border-color: #FAFAFA; +} + body { margin: 0; - color: #111; + color: var(--text-color); font-family: 'Droid Sans' !important; font-size: 12pt; } a { - color: #24AADD; + color: var(--main-color); } #content-holder { @@ -20,7 +34,7 @@ a { } hr { border: 0; - border-top: 1px solid #ddd; + border-top: 1px solid var(--line-color); margin: 1em 0; padding: 0; } @@ -52,15 +66,15 @@ nav.text-nav ul li a { text-decoration: none; } nav.text-nav ul li:not(.active) a { - color: #888; + color: var(--inactive-link-color); } nav.text-nav ul li.active a { - background: #24AADD; + background: var(--main-color); color: white; } #top-nav { - background: #F5F5F5; + background: var(--top-nav-color); margin: 0; } #top-nav ul { diff --git a/static/css/users.css b/static/css/users.css index 30353612..61bbd908 100644 --- a/static/css/users.css +++ b/static/css/users.css @@ -22,7 +22,9 @@ #user-registration .info i { margin-right: 0.5em; } -#user-registration .info i.fa { color: #24AADD; } +#user-registration .info i.fa { + color: var(--main-color); +} #user-registration .info p:first-child { margin: 0 0 0.5em 0; } @@ -33,8 +35,8 @@ #user-registration .buttons { margin-top: 1em; } -p.hint { +#user-registration p.hint { margin-top: 0.5em; - color: gray; + color: var(--inactive-link-color); font-size: 80%; }