front/general: use CSS3 variables

This commit is contained in:
rr- 2016-03-28 00:19:06 +02:00
parent 85949bba04
commit 06ede91d31
3 changed files with 33 additions and 17 deletions

View file

@ -47,8 +47,8 @@ input[type=password] {
font-size: 100%; font-size: 100%;
font-family: 'Inconsolata', monospace; font-family: 'Inconsolata', monospace;
padding: 0.3em; padding: 0.3em;
border: 1px solid #EEE; border: 2px solid var(--input-background-color);
background: #FAFAFA; background: var(--input-border-color);
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -57,13 +57,13 @@ input[type=password] {
form.show-validation fieldset.input input:invalid { form.show-validation fieldset.input input:invalid {
outline: none; outline: none;
border: 1px solid #FCC; border: 2px solid var(--input-bad-border-color);
background: #FFF5F5; background: var(--input-bad-background-color);
} }
form.show-validation fieldset.input input:valid { form.show-validation fieldset.input input:valid {
outline: none; outline: none;
border: 1px solid #D3E3D3; border: 2px solid var(--input-good-border-color);
background: #F5FFF5; background: var(--input-good-background-color);
} }
button, button,
@ -73,7 +73,7 @@ input[type=submit] {
font-size: 100%; font-size: 100%;
line-height: 100%; line-height: 100%;
padding: 0.3em 0.7em; padding: 0.3em 0.7em;
border: 1px solid #24AADD; border: 1px solid var(--main-color);
background: #24AADD; background: var(--main-color);
color: white; color: white;
} }

View file

@ -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 { body {
margin: 0; margin: 0;
color: #111; color: var(--text-color);
font-family: 'Droid Sans' !important; font-family: 'Droid Sans' !important;
font-size: 12pt; font-size: 12pt;
} }
a { a {
color: #24AADD; color: var(--main-color);
} }
#content-holder { #content-holder {
@ -20,7 +34,7 @@ a {
} }
hr { hr {
border: 0; border: 0;
border-top: 1px solid #ddd; border-top: 1px solid var(--line-color);
margin: 1em 0; margin: 1em 0;
padding: 0; padding: 0;
} }
@ -52,15 +66,15 @@ nav.text-nav ul li a {
text-decoration: none; text-decoration: none;
} }
nav.text-nav ul li:not(.active) a { nav.text-nav ul li:not(.active) a {
color: #888; color: var(--inactive-link-color);
} }
nav.text-nav ul li.active a { nav.text-nav ul li.active a {
background: #24AADD; background: var(--main-color);
color: white; color: white;
} }
#top-nav { #top-nav {
background: #F5F5F5; background: var(--top-nav-color);
margin: 0; margin: 0;
} }
#top-nav ul { #top-nav ul {

View file

@ -22,7 +22,9 @@
#user-registration .info i { #user-registration .info i {
margin-right: 0.5em; 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 { #user-registration .info p:first-child {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
} }
@ -33,8 +35,8 @@
#user-registration .buttons { #user-registration .buttons {
margin-top: 1em; margin-top: 1em;
} }
p.hint { #user-registration p.hint {
margin-top: 0.5em; margin-top: 0.5em;
color: gray; color: var(--inactive-link-color);
font-size: 80%; font-size: 80%;
} }