szurubooru/client/css/main.css

* {
    --main-color: #24AADD;
    --top-nav-color: #F5F5F5;
    --text-color: #111;
    --inactive-link-color: #888;
    --line-color: #DDD;
    --inactive-tab-text-color: var(--inactive-link-color);
    --active-tab-text-color: var(--text-color);
    --active-tab-background-color: #E5E5E5;
    --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-enabled-background-color: #FAFAFA;
    --input-enabled-border-color: #EEE;
    --input-enabled-text-color: var(--text-color);
    --input-disabled-background-color: #FAFAFA;
    --input-disabled-border-color: #EEE;
    --input-disabled-text-color: #888;
    --button-enabled-text-color: white;
    --button-enabled-background-color: var(--main-color);
    --button-disabled-text-color: #666;
    --button-disabled-background-color: #CCC;
}

body {
    overflow-y: scroll;
    margin: 0;
    color: var(--text-color);
    font-family: 'Droid Sans' !important;
    font-size: 12pt;
    line-height: 18pt;
}

h1, h2, h3 {
    font-weight: normal;
    margin-bottom: 1em;
}

a {
    color: var(--main-color);
    text-decoration: none;
}

#content-holder {
    margin: 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.plain-nav ul li {
    display: block;
}
nav.plain-nav ul li a {
    display: inline;
}

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-tab-text-color);
}
nav.text-nav ul li.active a {
    background: var(--active-tab-background-color);
    color: var(--active-tab-text-color);
}

#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 {
    margin: 0 auto;
    width: 30em;
    max-width: 100%;
}
.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);
}

.thumbnail {
    /*background-image: attr(data-src url);*/ /* not available yet */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: inline-block;
}
.thumbnail img {
    opacity: 0;
    width: 100%;
    height: 100%;
}

.flexbox-dummy {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.pager nav .disabled {
    opacity: .5;
}
.pager nav .prev span,
.pager nav .next span {
    opacity: 0;
    position: absolute;
    display: block;
    width: 0;
    height: 0;
}