kozmo-dark/static/css/kozmo-dark.css

611 lines
9.0 KiB
CSS

/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('../fonts/open-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v27-latin-regular.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* open-sans-600 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local(''),
url('../fonts/open-sans-v27-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v27-latin-600.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v27-latin-600.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* open-sans-700 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local(''),
url('../fonts/open-sans-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v27-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v27-latin-700.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* open-sans-italic - latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local(''),
url('../fonts/open-sans-v27-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v27-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v27-latin-italic.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* open-sans-600italic - latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: local(''),
url('../fonts/open-sans-v27-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v27-latin-600italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v27-latin-600italic.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* open-sans-700italic - latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local(''),
url('../fonts/open-sans-v27-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v27-latin-700italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v27-latin-700italic.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* Basic theme elements */
html {
background: #222222;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
color: #BBBBBB;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 175%;
font-weight: 600;
border-bottom: 1px solid #BBBBBB;
}
h2 {
font-size: 150%;
font-weight: 600;
border-bottom: 1px solid #BBBBBB;
}
h3 {
font-size: 132%;
margin-bottom: .3em;
}
h4 {
font-size: 116%;
font-weight: 600;
margin-bottom: .3em;
}
h5 {
font-size: 100%;
font-weight: 600;
margin-bottom: .3em;
}
h6 {
font-size: 85%;
font-weight: 600;
margin-bottom: .3em;
}
p {
margin: .5em 0 .5em 0;
}
/* Hyperlinks */
a {
text-decoration: none;
font-weight: 600;
}
a:link,
a:active,
a:visited {
color: #CCCCCC;
}
a:hover,
a.selected {
color: #208DCC;
}
/* Images */
img {
margin: auto;
max-width:100%;
max-height:100%;
display: block;
}
img.right {
float: right;
margin: 0 0 1em 1em;
}
img.left {
float: left;
margin: 0 1em 1em 0;
}
/* Thematic breaks */
hr {
border-bottom: 0;
border-left: 0;
border-right: 0;
margin: 2.5em 0;
}
/* Tables */
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
margin: auto;
text-align: center;
padding: 2px 2px 2px 2px;
}
th:empty {
display:none;
}
table img {
display: inline;
vertical-align: middle;
box-sizing: border-box;
}
/* Forms */
form label {
display: block;
}
form textarea,
form input {
margin-top: 10px;
margin-bottom: 20px;
width: 100%;
display: block;
box-sizing: border-box;
}
form textarea {
min-height: 160px;
width: 100%;
resize: vertical;
}
/* Main menu */
nav {
clear: both;
text-align: right;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul.first > li {
display: block;
text-align: left;
}
nav ul li a {
display: block;
font-size: 90%;
}
/* Language selector */
.language-selector {
list-style-type: none;
font-size: 90%;
text-align: center;
}
.language-selector li {
display: inline;
margin: .5em;
text-align: center;
}
/* Main container */
#container {
background: #292929;
margin: auto;
border-style: solid;
border-radius: 10px;
border-color: #252525;
}
/* Header */
#header-left,
#header-right {
padding-top: 15px;
}
#site-logo {
height: 100px;
width: 100px;
padding: 0 20px 15px 20px;
}
#site-title {
padding: 10px 20px 0 20px;
font-weight: 600;
font-size: 220%;
}
#site-slogan {
padding: 0 20px 10px 20px;
}
/* Footer */
#footer {
background: #3E3E3E;
color: #BBBBBB;
padding: 10px 20px 10px 20px;
clear: both;
font-size: 12px;
}
/* Page title */
#page-title {
padding: 10px 20px 10px 20px;
background: #3E3E3E;
border-top: 1px solid #444444;
border-bottom: 1px solid #444444;
}
#page-title h1 {
margin: 0;
border-bottom: none;
}
/* Page content */
#content {
padding: 10px 20px 10px 20px;
margin-bottom: 20px;
text-align: justify;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.timestamp,
.tags {
color: #777;
}
#content .timestamp {
padding-bottom: 1em;
}
#content a:link,
#content a:active,
#content a:visited {
color: #208DCC;
}
#content a:hover,
#content a.selected {
color: #CCCCCC;
}
/* Paginator page: entries */
#paginator-page {
margin-bottom: 30px;
}
#paginator-page-footer {
margin-top: 10px;
height: 45px;
/*border-bottom: 1px solid #444444;*/
}
#paginator-page-footer .timestamp {
display: inline;
line-height: 35px;
}
#paginator-page-button {
float: right;
padding: 5px 10px;
background: #208DCC;
margin: 1px 1px 1px 1px;
}
#paginator-page-button:hover {
background: #006DAC;
border: 1px solid #004D8C;
margin: 0px 0px 0px 0px;
}
#paginator-page-button a:link,
#paginator-page-button a:active,
#paginator-page-button a:visited {
color: #FFF;
}
#paginator-page-button a:hover {
color: #DDD;
}
/* Paginator page: bottom buttons */
.pagination {
padding: 0;
list-style-type: none;
text-align: center;
}
.pagination li {
display: inline;
margin: 10px;
}
.pagination .previous-disabled,
.pagination .next-disabled {
color: #555;
text-decoration: none;
}
/* Home page: latest updates */
#recent-updates {
padding: 0px 20px 10px 20px;
text-align: justify;
}
#recent-updates a:link,
#recent-updates a:active,
#recent-updates a:visited {
color: #208DCC;
}
#recent-updates a:hover,
#recent-updates a.selected {
color: #CCCCCC;
}
@media (min-width: 780px) {
/* Main menu */
.burger-button {
display: none;
}
nav ul.first > li {
display: inline-block;
position: relative;
padding-right: 1.25em;
}
nav ul.second,
nav ul.third {
display: none;
position: absolute;
background: #000000;
width: 160px;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25);
}
nav ul.first li:hover ul.second,
nav ul.second li:hover ul.third {
display: block;
}
nav ul.second li a,
nav ul.third li a {
padding: 0.75em 1em;
}
nav ul.second {
z-index: 2;
}
nav ul.third {
z-index: 3;
}
nav ul.second li {
position: relative;
}
nav ul.third {
left: 212px;
top: -1px;
}
/* Language selector */
.language-selector {
float: right;
margin-right: 30px;
}
/* Main container */
#container {
max-width: 1200px;
}
/* Header */
#header-left {
float: left;
width: 65%;
}
#header-right {
float: right;
width: 35%;
}
#site-logo {
float: left;
}
}
@media screen and (max-width: 779px) {
/* Main menu */
.burger-button {
display: block;
background: #3E3E3E;
font-size: 100%;
padding: 5px 20px 5px 20px;
margin-top: 20px;
cursor: pointer;
}
.burger-button:hover {
color: #DDDDDD;
background: #208DCC;
}
#menu-entries {
display: none;
}
.burger-toggle:checked ~ #menu-entries {
display: block;
}
.burger-toggle:checked ~ .burger-button {
color: #DDDDDD;
background: #208DCC;
}
nav {
text-align: center;
margin-bottom: 20px;
}
nav ul.first > li a,
nav ul.second > li a {
display: block;
padding: 5px 20px 5px 20px;
background: #3E3E3E;
}
nav ul.first > li a:hover,
nav ul.second > li a:hover {
color: #DDDDDD;
background: #208DCC;
}
nav ul.first {
margin-top: 0px;
}
nav ul.second > li a {
padding-left: 40px;
}
/* Language selector */
.language-selector {
float: none;
margin: auto;
padding: 0;
}
/* Header */
#header-left,
#header-right {
display: block;
float: none;
width: 100%;
text-align: center;
}
#site-logo,
#site-title {
display: block;
float: none;
margin: auto;
}
#site-title,
#site-slogan {
padding: 0px 5px;
}
}