szurubooru/public_html/media/css/core.css
2013-10-21 23:25:56 +02:00

374 lines
6.2 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: 400;
src: local('Droid Sans'), local('DroidSans'), url(../fonts/DroidSans.ttf) format('truetype');
}
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: 700;
src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(../fonts/DroidSans-Bold.ttf) format('truetype');
}
body {
background: white;
color: black;
margin: 0;
padding: 0;
font-family: 'Droid Sans', sans-serif;
font-size: 12pt;
}
#content {
padding: 0;
margin: 1.5em 0;
}
#top-nav {
width: 100%;
background: #eee;
color: black;
}
.main-wrapper {
margin: 0 1.5em;
}
#top-nav ul.main-nav {
margin: 0 0 0 -0.75em;
padding: 0;
list-style-type: none;
}
#top-nav li.main-nav-item {
display: inline-block;
}
#top-nav li input,
#top-nav li.main-nav-item a {
color: black;
display: inline-block;
margin-bottom: 3px;
text-decoration: none;
}
#top-nav li.main-nav-item a {
line-height: 35px;
padding: 0 10px;
outline: 0;
}
#top-nav li.main-nav-item a:focus,
#top-nav li.main-nav-item a:hover {
color: firebrick;
border-bottom: 3px solid firebrick;
margin-bottom: 0;
}
#top-nav li.search {
float: right;
background: white;
margin: 5px 0;
padding: 0;
line-height: 20px;
}
#top-nav li.search input {
border: 0;
height: 20px;
line-height: 20px;
padding: 4px 10px;
margin: 0;
box-sizing: content-box;
}
#top-nav li.safety {
float: right;
margin-left: 5px;
}
#top-nav li.safety ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-nav li.safety li {
display: inline;
}
#top-nav li.safety a {
display: inline-block;
float: left;
width: 25px;
line-height: 28px;
margin: 5px -1px 5px 0;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
#top-nav li.safety a:after {
content: ' ';
}
#top-nav li.safety span {
display: none;
}
#top-nav li.safety a:hover { opacity: .7; }
#top-nav li.safety a.inactive { opacity: 1; }
#top-nav li.safety .safety-safe .enabled { background: #cfe6c2; background: linear-gradient(to bottom, #CFE6C2 0%, #80C670 100%); }
#top-nav li.safety .safety-safe .disabled { background: #a0a0a0; background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
#top-nav li.safety .safety-sketchy .enabled { background: #f0f4c8; background: linear-gradient(to bottom, #F0F4C8 0%, #EBE57A 100%); }
#top-nav li.safety .safety-sketchy .disabled { background: #a0a0a0; background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
#top-nav li.safety .safety-unsafe .enabled { background: #fbc6b6; background: linear-gradient(to bottom, #FBC6B6 0%, #F37865 100%); }
#top-nav li.safety .safety-unsafe .disabled { background: #a0a0a0; background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
footer {
text-align: center;
margin: 1em 0;
padding-top: 0.5em;
border-top: 1px solid #eee;
font-size: small;
color: silver;
}
footer span:not(:last-child):after {
content: '\022C5';
margin: 0 0.5em;
}
footer a {
color: silver;
}
#sidebar {
float: left;
width: 256px;
margin-right: 2em;
}
#sidebar h1 {
margin-top: 0;
}
#sidebar .key {
padding-right: 0.5em;
}
#sidebar .key-value {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#inner-content {
overflow: hidden;
padding-bottom: 2em;
}
.small-screen #sidebar {
float: none;
width: 100%;
padding: 0 0 1em 0;
}
.small-screen #inner-content {
float: none;
width: auto;
}
.bottom-unit {
padding: 0.5em 1em;
border: 1px solid #eee;
border-bottom: 0;
padding-bottom: 0;
margin: 1em 0 2em 0;
}
.left-unit {
margin: 0 0 1.5em 0;
padding: 0.75em;
border: 1px solid #eee;
padding-left: 0;
border-left: 0;
}
h1, h2, h3 {
font-weight: normal;
}
p:first-child,
h1:first-child {
margin-top: 0;
}
hr {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIElEQVQYlWNgQAPv3r37j4wHXBJdATY5BnyScAX4TAUAdfp5IbOdz/YAAAAASUVORK5CYII=');
border: 0;
height: 4px;
}
a {
color: firebrick;
text-decoration: none;
outline: 0;
}
a:focus,
a:hover {
color: red;
}
i[class*='icon-'] {
background-image: url('../img/icons.png');
background-repeat: no-repeat;
display: inline-block;
}
a i[class*='icon-'] {
background-color: firebrick;
}
a:focus i[class*='icon-'],
a:hover i[class*='icon-'] {
background-color: red;
}
form.aligned input,
form.aligned button {
vertical-align: text-top;
}
form.aligned label {
text-align: right;
vertical-align: middle;
}
form.aligned label.left {
display: inline-block;
padding-right: 1em;
width: 5em;
min-height: 1em;
float: left;
}
form.aligned>div {
margin-bottom: 0.5em;
clear: left;
}
form.aligned label,
form.aligned input,
form.aligned select,
form.aligned button {
vertical-align: middle;
line-height: 20px;
}
form.aligned label,
form.aligned input,
form.aligned select {
padding: 5px;
}
form.aligned input[type=file] {
padding: 5px 0;
}
form.aligned input[type=radio],
form.aligned input[type=checkbox] {
width: auto;
max-width: auto;
margin: 0 10px 0 0;
padding: 0;
vertical-align: middle;
}
.input-wrapper {
overflow: hidden;
display: block;
}
.input-wrapper ul.tagit,
.input-wrapper input,
.input-wrapper textarea,
.input-wrapper select {
width: 80%;
max-width: 80%;
}
label {
display: inline-block;
}
label,
input,
select,
button {
font-family: inherit;
font-size: 11pt;
}
ul.tagit,
select,
textarea,
input:not([type=radio]):not([type=checkbox]):not([type=file]) {
border: 1px solid #ccc;
border-radius: 3px;
}
ul.tagit input {
border: 0 !important;
}
button {
font-size: 115%;
padding: 0.2em 0.7em;
color: white;
background: cornflowerblue;
border: 0;
}
button:hover {
background-color: royalblue;
cursor: pointer;
}
.alert {
text-align: center;
padding: 10px;
border-style: solid;
border-width: 1px;
max-width: 500px;
margin: 0 auto;
}
.alert-success {
border-color: #aba;
background-color: #aea;
}
.alert-error {
border-color: #faa;
background-color: #fdd;
}
.alert-warning {
border-color: #ffa;
background-color: #ffd;
}
.inactive {
opacity: .5;
}
.clear {
display: block;
clear: both;
}
pre.debug {
text-align: left;
color: black;
}
.spoiler:before,
.spoiler:after {
color: gray;
}
.spoiler:before {
content: '[ ';
}
.spoiler:after {
content: ' ]';
}
.spoiler {
background: #eee;
color: #eee;
}
.spoiler:hover {
color: black;
}