front/general: use CSS3 variables

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;
 }

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 {

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%;
 }