szurubooru/public_html/media/css/core.css
2014-02-16 12:33:52 +01:00

455 lines
7.6 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 1.5em;
}
#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: firebrick;
border-bottom: 3px solid firebrick;
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: 20px;
line-height: 20px;
padding: 4px 10px;
margin: 0;
box-sizing: content-box;
}
#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 -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:focus,
#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 .main-wrapper {
text-align: center;
margin-top: 1em;
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: 1em;
}
#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;
}
.unit {
padding: 1em;
border: 1px solid #eee;
margin: 1em 0;
}
#inner-content .unit {
border-bottom: 0;
padding-bottom: 0;
}
#sidebar .unit {
border-left: 0;
padding-left: 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%;
}
body #sidebar .unit {
border: 1px solid #eee;
border-bottom: 0;
padding: 1em 1em 0 1em;
}
#inner-content {
float: none;
width: auto;
}
}
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: 100%;
max-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
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;
}
.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: firebrick;
}
.alert {
text-align: center;
padding: 10px;
border-style: solid;
border-width: 1px;
max-width: 500px;
margin: 2em auto !important;
}
.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: 0 0 -1px 0;
}
pre.debug {
margin-left: 1em;
text-align: left;
color: black;
white-space: normal;
text-indent: -1em;
}
.spoiler:before,
.spoiler:after {
color: gray;
}
.spoiler:before {
content: '[ ';
}
.spoiler:after {
content: ' ]';
}
.spoiler {
background: #eee;
color: #eee;
}
.spoiler:hover {
color: black;
}
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;
}