front/general: use CSS3 variables
This commit is contained in:
parent
85949bba04
commit
06ede91d31
3 changed files with 33 additions and 17 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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%;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue