128 lines
2.5 KiB
CSS
128 lines
2.5 KiB
CSS
* {
|
|
--main-color: #24AADD;
|
|
--top-nav-color: #F5F5F5;
|
|
--text-color: #111;
|
|
--inactive-link-color: #888;
|
|
--line-color: #DDD;
|
|
--message-error-border-color: #FCC;
|
|
--message-error-background-color: #FFF5F5;
|
|
--message-success-border-color: #D3E3D3;
|
|
--message-success-background-color: #F5FFF5;
|
|
--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: var(--text-color);
|
|
font-family: 'Droid Sans' !important;
|
|
font-size: 12pt;
|
|
line-height: 18pt;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
a {
|
|
color: var(--main-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
#content-holder {
|
|
margin-top: 2em;
|
|
text-align: center;
|
|
}
|
|
#content-holder>.content-wrapper {
|
|
text-align: left;
|
|
display: inline-block;
|
|
margin: 0 auto;
|
|
}
|
|
#content-holder>.content-wrapper:not(.transparent) {
|
|
background: var(--top-nav-color);
|
|
padding: 2em;
|
|
}
|
|
#content-holder>.content-wrapper>*:first-child {
|
|
margin-top: 0;
|
|
}
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px solid var(--line-color);
|
|
margin: 1em 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: inline-block;
|
|
}
|
|
nav ul li {
|
|
display: inline-block;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
nav ul li a {
|
|
display: inline-block;
|
|
}
|
|
nav ul li img {
|
|
margin: 0;
|
|
vertical-align: top; /* fix ghost margin under the image */
|
|
}
|
|
|
|
nav.text-nav {
|
|
margin: 1em 0;
|
|
}
|
|
nav.text-nav ul li a {
|
|
padding: 0.3em 1.2em;
|
|
}
|
|
nav.text-nav ul li:not(.active) a {
|
|
color: var(--inactive-link-color);
|
|
}
|
|
nav.text-nav ul li.active a {
|
|
background: var(--main-color);
|
|
color: white;
|
|
}
|
|
|
|
#top-nav {
|
|
background: var(--top-nav-color);
|
|
margin: 0;
|
|
}
|
|
#top-nav ul {
|
|
display: block;
|
|
text-align: right;
|
|
}
|
|
#top-nav ul li {
|
|
float: left;
|
|
}
|
|
#top-nav ul li[data-name=register],
|
|
#top-nav ul li[data-name=login],
|
|
#top-nav ul li[data-name=logout],
|
|
#top-nav ul li[data-name=help] {
|
|
float: none;
|
|
}
|
|
#top-nav .access-key {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.messages {
|
|
width: 30em;
|
|
}
|
|
.messages .message {
|
|
display: inline-block;
|
|
text-align: left;
|
|
padding: 0.5em 1em;
|
|
}
|
|
.message.error {
|
|
border: 1px solid var(--message-error-border-color);
|
|
background: var(--message-error-background-color);
|
|
}
|
|
.message.success {
|
|
border: 1px solid var(--message-success-border-color);
|
|
background: var(--message-success-background-color);
|
|
}
|