ikibooru/static/style.css
2024-09-07 09:53:39 +03:00

241 lines
3.5 KiB
CSS

html, body {
width: 100%;
min-height: 100%;
margin: 0;
}
div.tagbox {
cursor: text;
border: 1px solid gray;
text-align: left;
user-select: contain;
padding: 0.4em;
border-radius: 3px;
box-sizing: border-box;
}
div.tagbox::after {
content: "penis";
visibility: hidden;
}
div.tag {
display: inline-block;
border: 1px solid blue;
padding: 0.1em;
margin: 0.1em;
color: black;
}
div.tag.selected {
border-width: 2px;
}
div.tag::before {
font-weight: lighter;
text-shadow: 0px 2px 3px gray;
padding-left: 0.1em;
padding-right: 0.1em;
border-right: 1px solid black;
margin-right: 0.1em;
}
div.tagbox span {
border: 0;
outline: none;
}
div.tagbox > p {
position: absolute;
left: 0.5em;
top: 0;
transform: translateY(-50%);
color: #C0C0C0;
}
div.autocomplete {
text-align: left;
border: 1px solid gray;
background-color: white;
padding: 0.4em;
}
a.searchitem > div {
position: relative;
border: 1px solid #808080;
max-width: 12.5em;
display: inline-block;
padding: 0.5em;
vertical-align: middle;
margin: 0.5em 0 0.5em 0;
}
a.searchitem img {
width: 100%;
}
a.searchitem {
text-decoration-line: none;
color: black;
}
a.searchitem p {
width: 100%;
margin: 0.3em 0 0.3em 0;
}
button {
margin-top: 1em;
}
h1, h2, h3, h4, h5, h6, p, li, span, td, label, div {
font-family: sans-serif;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 0.5em;
}
header {
position: absolute;
top: 1em;
width: 100%;
}
main {
margin-top: 10%;
margin-left: 10%;
width: 80%;
}
li {
margin: 0.2em 0 0.2em 0;
}
input, input:hover {
outline: none;
}
input[type='text'], input[type='number'] {
padding: 0.4em;
border: 1px solid gray;
border-radius: 3px;
font-size: 1em;
box-sizing: border-box;
}
input::placeholder {
color: #C0C0C0;
opacity: 1;
}
ul.over18 {
margin: 1em 0 1em 0;
list-style-type: none;
padding: 0 0.4em 0 0.4em;
width: 100%;
text-align: center;
box-sizing: border-box;
}
ul.over18 label {
cursor: pointer;
font-size: 0.9em;
}
ul.over18 > li {
width: 32%;
height: 1em;
position: relative;
display: inline-block;
border: 1px solid gray;
padding: 0.4em 0 0.4em 0;
}
ul.over18 > li:nth-child(1) {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
ul.over18 > li:nth-child(3) {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
ul.over18 > li > * {
position: absolute;
left: 0;
right: 0;
bottom: 50%;
transform: translateY(50%);
}
ul.over18 input:checked + label {
text-shadow: 0px 2px 3px gray;
transform: translateY(60%);
}
ul.over18 input {
opacity: 0.01;
z-index: 100;
}
div.comments {
width: 60%;
}
div.comments h5 {
margin-bottom: 0;
}
div.comments p {
margin: 0.2em 0 0.2em 0;
}
div.comments p:last-child {
margin-bottom: 0;
}
textarea.uf {
font-family: inherit;
width: 100%;
height: 8em;
}
.reportlink {
font-size: 0.5em;
text-decoration: none;
}
.report {
width: 100%;
border-collapse: separate;
border-spacing: 0 1em;
}
.report td {
border: 0;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
.report td:first-child {
border-left: 1px solid gray;
}
.report td:last-child {
border-right: 1px solid gray;
background-color: #E0E0E0;
}
.report .content {
margin-left: 1em;
}
footer {
margin-top: 2em;
width: 100%;
text-align: center;
}
div.tag.tcNew::before {
content: "New";
}
div#newtagsform {
position: fixed;
width: 50vw;
height: 50vh;
top: 25vh;
left: 25vw;
background: white;
border: 1px solid black;
padding: 1em;
}
div#newtagsform select {
border: 0;
}
.hidden {
visibility: hidden;
}