szurubooru/public_html/media/css/core.css
2014-08-09 23:28:36 +02:00

494 lines
8.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;
overflow-x: auto;
overflow-y: scroll;
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 auto;
padding: 0 30px;
}
#top-nav .clear {
background: white;
}
#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;
float: left;
}
#top-nav li.main-nav-item.active a {
border-bottom: 3px solid #f7f7f7;
margin-bottom: 0;
background: #f7f7f7;
}
#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: hsl(0,70%,45%);
border-bottom: 3px solid hsl(0,70%,45%);
margin-bottom: 0;
}
#top-nav li.search {
display: inline-block;
float: right;
background: white;
margin: 5px 0;
padding: 0;
line-height: 20px;
}
#top-nav li.search input {
border: 0;
height: 28px;
line-height: 28px;
padding: 0 10px;
margin: 0;
}
#top-nav li.safety {
display: inline-block;
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 4px 5px 0;
}
#top-nav li.safety a:after {
content: ' ';
}
#top-nav li.safety span {
display: none;
}
#top-nav li.safety a:focus,
#top-nav li.safety a:hover { opacity: .7; }
#top-nav li.safety a.inactive { opacity: 1; }
#top-nav li.safety .safety-safe a { background: #b2efa2; }
#top-nav li.safety .safety-sketchy a { background: #f0e4a8; }
#top-nav li.safety .safety-unsafe a { background: #fbc6b6; }
#top-nav li.safety .enabled { box-shadow: inset 0 0 0 3px rgba(0,0,0,0.1); }
#top-nav li.safety .disabled { opacity: .3; }
footer .main-wrapper {
text-align: center;
margin-top: 1em;
font-size: small;
color: silver;
}
footer span:not(:last-of-type):after {
content: '\2000\022C5\2000';
}
footer a {
color: silver;
}
footer .left {
float: left;
}
footer .right {
float: right;
}
#sidebar {
float: left;
width: 240px;
margin-right: 15px;
}
#sidebar h1 {
margin-top: 0;
margin-bottom: 10px;
}
#sidebar+#inner-content {
margin-left: 255px;
overflow: hidden;
}
#sidebar .key {
padding-right: 0.3em;
}
#sidebar .key-value {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.unit {
margin: 2.5em 0;
}
#sidebar .unit:first-child {
margin-top: 0;
}
#small-screen { display: none; }
@media only screen and (max-width:700px) {
#small-screen { display: block; }
body #sidebar {
float: none;
width: 100%;
}
#inner-content {
width: auto;
margin-left: 0;
margin-bottom: 2em;
}
}
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: hsl(0,70%,45%);
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: hsl(0,70%,45%);
}
a:focus i[class*='icon-'],
a:hover i[class*='icon-'] {
background-color: red;
}
.form-row {
margin: 0 0 0.5em 0;
clear: left;
}
.input-wrapper {
overflow: hidden;
display: block;
line-height: 30px;
text-overflow: ellipsis;
}
.form-row>label {
display: inline-block;
text-align: right;
vertical-align: middle;
padding-right: 1em;
width: 7em;
min-height: 1em;
float: left;
}
label,
input:not([type=radio]):not([type=checkbox]):not([type=file]),
select,
button {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
vertical-align: middle;
line-height: 24px;
padding: 3px 5px;
height: 30px;
}
label,
input,
select {
font-family: inherit;
font-size: 11pt;
}
button {
font-size: 12pt;
border-radius: 5px;
padding: 5px 15px;
line-height: 100%;
color: white;
background: hsl(0,70%,60%);
border: 0;
}
button:hover {
background-color: hsl(0,75%,50%);
cursor: pointer;
}
input[type=file] {
padding: 5px 0;
}
input[type=radio],
input[type=checkbox] {
width: auto;
max-width: auto;
margin: auto 10px auto 0;
padding: 0;
vertical-align: baseline;
}
.radiobox-wrapper input[type=radio],
.checkbox-wrapper input[type=checkbox] {
display: none;
}
.radiobox-wrapper input[type=radio]+span,
.checkbox-wrapper input[type=checkbox]+span {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 0.5em;
background-image: url('../img/icons.png');
background-repeat: none;
vertical-align: text-bottom;
content: '';
}
.radiobox-wrapper input[type=radio]+span { background-position: -126px -21px; }
.radiobox-wrapper input[type=radio]:checked+span { background-position: -105px -21px; }
.checkbox-wrapper input[type=checkbox]+span { background-position: -84px -21px; }
.checkbox-wrapper input[type=checkbox]:checked+span { background-position: -63px -21px; }
ul.tagit,
select,
textarea,
input:not([type=radio]):not([type=checkbox]):not([type=file]) {
background: white;
width: 100%;
max-width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
}
ul.tagit {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 32px;
}
ul.tagit li.tagit-new {
padding: 1px 0 !important;
line-height: normal !important;
}
ul.tagit li.tagit-choice {
padding: 1px 20px 1px 5px !important;
line-height: normal !important;
}
ul.tagit input {
border: 0 !important;
line-height: normal !important;
height: auto !important;
padding: 0 !important;
}
.related-tags {
padding: 0.5em;
background: rgba(255,255,255,0.7);
border-radius: 3px;
font-size: 95%;
line-height: 180%;
}
.related-tags ul {
list-style-type: none;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
}
.related-tags p {
float: left;
margin: 0 1em 0 0;
}
.related-tags li {
display: inline-block;
margin: 0 1em 0 0;
}
.tabs ul {
list-style-type: none;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 3px solid #eee;
}
.tabs li {
display: inline-block;
}
.tabs li a {
display: inline-block;
padding: 0.5em 1em;
vertical-align: middle;
border: 3px solid rgba(238, 238, 238, 0);
border-bottom: 3px solid #eee;
color: silver;
margin: 0 0 -3px 0;
}
.tabs li.selected a {
border: 3px solid #eee;
border-bottom-color: rgba(238, 238, 238, 0);
color: inherit;
background: white;
}
.tabs li a:hover,
.tabs li a:focus {
color: hsl(0,70%,45%);
}
.tab-content {
clear: both;
}
.alert {
text-align: center;
padding: 10px;
border-style: solid;
border-width: 1px;
max-width: 500px;
margin: 2em 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;
height: 1px; /* ghost top margin in firefox */
width: 100%;
margin: -1px 0 0 0;
}
.spoiler:before,
.spoiler:after {
color: gray;
}
.spoiler:before {
content: '[ ';
}
.spoiler:after {
content: ' ]';
}
.spoiler {
background: #eee;
color: #eee;
}
.spoiler:hover {
color: black;
}
.spoiler:not(:hover) a {
color: #eee;
}
img {
border: 0;
}
blockquote {
margin-left: 0;
border-left: 3px solid #eee;
background: ghostwhite;
padding: 0.5em;
}
blockquote>*:first-child {
margin-top: 0;
}
blockquote>*:last-child {
margin-bottom: 0;
}
.ui-state-default,
.ui-state-default a {
color: hsla(0,70%,45%,0.8) !important;
}