nekrochan/static/style.css

536 řádky
7.8 KiB
CSS
Surový Normální zobrazení Historie

2024-03-16 11:20:50 +00:00
:root {
font-size: 10pt;
font-family: var(--font);
color: var(--text);
}
body {
min-height: 100vh;
background: var(--bg);
margin: 0;
}
a {
color: var(--link-color);
}
a:hover {
color: var(--link-hover);
}
details,
#live-info {
display: inline-block;
margin-bottom: 8px;
}
details:last-of-type {
margin-bottom: 0;
}
img,
video {
max-width: 100%;
max-height: 90vh;
}
hr {
border-top: 1px solid var(--hr-color);
border-left: none;
border-right: none;
border-bottom: none;
}
summary {
cursor: pointer;
}
.form-table .label {
font-weight: bold;
background-color: var(--table-head);
border: 1px solid var(--table-border);
padding: 4px;
}
.form-table td {
padding: 0;
}
.container > form:not(#post-form) > .form-table {
margin: 8px auto;
}
#post-form {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
visibility: hidden;
position: fixed;
right: 0;
top: 0;
background-color: var(--box-color);
padding: 4px;
}
#post-form:target,
#post-form[data-visible="true"] {
visibility: visible;
}
#post-form-handle {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: move;
}
#post-form-handle::after {
content: "";
display: block;
clear: right;
}
.edit-box {
display: block;
width: 100%;
}
.form-table input[type="text"],
.form-table input[type="password"],
.form-table input[type="number"],
.form-table textarea,
.form-table select,
.input-wrapper,
.edit-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%;
color: var(--text);
background-color: var(--input-color);
border-radius: 0;
border: 1px solid var(--input-border);
padding: 4px;
}
.form-table input[type="checkbox"] {
display: block;
margin: 0 auto;
}
.form-table input[type="file"] {
width: 100%;
}
.form-table textarea,
.edit-box {
height: 8rem;
resize: none;
}
.table-wrap {
overflow: scroll;
}
.data-table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
margin: 8px 0;
}
.data-table th {
background-color: var(--table-head);
}
.data-table td {
background-color: var(--table-background);
}
.data-table td:not(.form-table td),
.data-table th {
border: 1px solid var(--table-border);
padding: 4px;
}
.data-table .banner {
margin-top: 0;
margin-bottom: 0;
}
.news {
margin: 8px 0;
}
.box {
background-color: var(--box-color);
border-right: 1px solid var(--box-border);
border-bottom: 1px solid var(--box-border);
padding: 8px;
}
.box:target,
.box.highlighted {
background-color: var(--hl-box-color);
border-right: 1px solid var(--hl-box-border);
border-bottom: 1px solid var(--hl-box-border);
}
.button {
cursor: pointer;
border-radius: 0;
color: var(--text);
background-color: var(--input-color);
border: 1px solid var(--input-border);
padding: 4px;
}
.main {
margin: 8px;
}
.container {
margin: 0 auto;
max-width: 720px;
}
.title {
color: var(--title-color);
font-family: var(--title-font);
text-align: center;
letter-spacing: -2px;
margin: 0;
}
.description {
font-weight: bold;
margin: 0;
}
.big {
font-size: 1.2rem;
}
.small {
font-size: 0.8rem;
}
.center {
text-align: center;
}
.inline-block {
display: inline-block;
}
.float-r {
float: right;
}
.float-none-a,
.float-none-b {
float: none !important;
}
.fixed-table {
table-layout: fixed;
}
.m-0 {
margin: 0;
}
.form-table .button,
.full-width {
width: 100%;
}
.banner {
display: block;
width: 100%;
max-width: 300px;
margin: 8px auto;
border: 1px solid var(--box-border);
}
.headline {
font-size: 1rem;
margin: 0;
}
.headline::after {
content: "";
display: block;
clear: both;
}
.board-links,
.pagination {
color: var(--link-list-color);
}
.link-separator::after {
content: " / ";
}
.link-group::before {
content: " [ ";
}
.link-group::after {
content: " ] ";
}
.header {
padding: 2px;
}
.header::after {
content: "";
display: block;
clear: both;
}
.footer {
text-align: center;
font-size: 8pt;
margin-top: 8px;
}
.post {
margin-bottom: 8px;
padding: 8px;
}
.post.box {
display: inline-block;
min-width: 400px;
}
.post:last-of-type {
margin-bottom: 0;
}
.board-links a,
.pagination a,
.post-number a {
text-decoration: none;
}
.post-header input[type="checkbox"] {
height: 1em;
vertical-align: middle;
margin: 0;
}
.catalog-entry {
display: inline-block;
width: 200px;
height: 250px;
overflow: scroll;
margin: 4px;
padding: 8px;
}
.catalog-entry .thumb {
display: block;
max-width: 100%;
max-height: 50%;
box-shadow: 0 0 3px #000;
margin: 4px auto;
padding: 2px;
}
.catalog-entry .post-content {
margin: 8px;
}
.name {
font-weight: bold;
color: var(--name-color);
}
.tripcode {
color: var(--trip-color);
}
.capcode {
color: var(--capcode-color);
font-weight: bold;
}
.user-id {
text-shadow: #000 0 0 1px, #000 0 0 1px, #000 0 0 1px, #000 0 0 1px,
#000 0 0 1px, #000 0 0 1px;
color: #ffffff;
border: 1px solid var(--box-border);
padding: 0 2px;
}
.post-files {
float: left;
margin: 0 8px 8px 8px;
}
.post-file {
display: inline-block;
vertical-align: top;
text-align: center;
font-size: 8pt;
padding: 4px;
}
.thumb {
max-width: 150px;
max-height: 150px;
}
.post-content {
font-family: inherit;
white-space: pre-wrap;
word-break: break-word;
margin: 0;
}
.post-content a {
color: var(--post-link-color);
}
.post-content a:hover {
color: var(--post-link-hover);
}
.clearfix {
clear: both;
}
.post .post-content {
margin: 1rem 2rem;
}
.dead-quote {
color: var(--dead-quote-color);
text-decoration: line-through;
}
.greentext {
color: var(--greentext-color);
}
.orangetext {
color: var(--orangetext-color);
}
.redtext {
color: var(--redtext-color);
font-weight: bold;
}
.bluetext {
color: var(--bluetext-color);
font-weight: bold;
}
.glowtext {
text-shadow: 0 0 40px #00fe20, 0 0 2px #00fe20;
}
.uh-oh-text {
color: var(--uh-oh-text);
background-color: var(--uh-oh-color);
}
.spoiler {
color: var(--text);
background-color: var(--text);
}
.spoiler:hover {
background-color: transparent;
}
.jannytext {
color: var(--jannytext-color);
font-weight: bold;
}
.icon {
height: 0.8em;
vertical-align: middle;
}
.posts-omitted {
margin-top: 0;
margin-bottom: 8px;
}
.board-list {
list-style-type: none;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 600px) {
.thumb {
max-width: 100px;
max-height: 100px;
}
.post.box {
display: block;
min-width: auto;
}
.thread > br {
display: none;
}
.catalog-entry {
width: 140px;
height: 220px;
}
}
/* Only in JS */
.loading {
opacity: 0.5;
cursor: wait;
}
#captcha {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%;
height: 120px;
border: 1px solid var(--input-border);
}
#captcha img {
display: block;
height: 100%;
image-rendering: pixelated;
margin: 0px auto;
}
#live-indicator {
display: inline-block;
width: 0.8em;
height: 0.8em;
vertical-align: middle;
border-radius: 50%;
}
#preview {
-webkit-box-shadow: 0px 0px 2.5px 2.5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 2.5px 2.5px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 2.5px 2.5px rgba(0, 0, 0, 0.25);
}