Booru.org Yotsuba A Theme

/* Theme based on Yotsuba A, modified from holobooru theme by sHaHaHark */
*, *::before, *::after {margin:0; padding:0; box-sizing: border-box;}
html {font-size:100%;}
.space br {display:none;}

body {padding:0 5px; font: 100% Arial, 'Yu Gothic', sans-serif;background:#ffe url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAIAAACmkByiAAAAWElEQVR4AaWSwQ3AIAwDbfbfpdt0nKrPUp3QCfHgkfjsCMh47mskmU5HGvbmuuh9dVce8M4it/SfMZglGeZx/ccyu/Vsv4/N29f331AY5Bi3+hdo4A92+wXvCwR9mXztrAAAAABJRU5ErkJggg==") top center repeat-x;color:#380900;line-height:1.33em;}
/*for mobile*/ html,body {text-size-adjust: none;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;}
/*special links*/
[href*="uname="] {font-weight:700; color:#117743;}
[href*="page=post&s=add"] {font-size:0;}
a[href*="page=post&s=add"]:before {font-size:16px!important; content:'Upload';}
a { text-decoration:none; color:#00e; transition:0.15s ease-in-out}
.body a, .comment div a {text-decoration: underline; color:#00e;}
/*text*/
[style*="color: #ff0000;"] {color:#cc1105!important;}
h1, h2, h3, h4, h5, h6 {color:maroon; margin:0.5em 0;}
h1 {font-size:1.618em; letter-spacing:-0.04em;}
h2 {font-size:1.333em; letter-spacing:-0.033em;}
h3, h4, h5, h6 {font-size:1.1em; letter-spacing:-0.025em;}
p {margin-bottom:1em;}
small {font-size:0.677em; letter-spacing:0.0333em;}
code {font-size:17px; color:#006ffa;}
/*admin colors*/
[href$="uname=refinder"] {color:#cc1105;}
[href$="uname=refinder"]::after {content:' ## Admin \0000A0\01F340\00FE0E';}
a:hover {color:red;}
[href$="uname=refinder"]:hover {color:#117743;}
.body a:hover, .comment div a:hover {color:#cc1105;}

/*upload form*/
[enctype="multipart/form-data"] table tbody tr:first-child td:last-child {display:none;}
[enctype="multipart/form-data"] {max-width:900px; margin:0 auto 8em;}
[enctype="multipart/form-data"] ul {display:none;}

/*index*/
#header {display:flex; align-items:center; margin:0 auto 1em; padding:0 20px;}
#header h2 {font-family:Tahoma;}
#header h2 a {padding:11px 10px;}
#header a {color:maroon;}
#header a:hover {color:red;}
#header strong {color:#cc1105;}
#header strong:hover {color:red;}
#navbar {line-height:1.618em; font-family:Verdana; font-size:12px; margin:0 30px;}
ul {list-style:none;}
#navbar li {display:inline; color:maroon;}
#navbar li:first-child::before {content:'[\00a0';}
#navbar li::after {content:'\00a0/';}
#navbar li:nth-child(5) a::after {content:'\00a0& FAQ';}
#navbar li:nth-child(n+9)::after {content:none;}
#navbar li:nth-child(8)::after {content:'\00a0]';}
li#notice {font-weight:bold; color:#cc1105;}

/*sidebar and thumbnail container*/
#content {max-width:1200px; margin:1em auto;}
#post-list {
  display:grid;
  grid-template:"side cont" 150px
                "side cont" 55px
                "side cont" auto / 290px auto;
  justify-content: center;
  grid-column:2/3;
}
/*sidebar*/
.sidebar {min-width:250px; grid-area:side; height:min-content; border:1px solid #d9bfb7;}
#tag_list {font-size:14px;}
#tag_list>ul>li>a:nth-child(1) {background:none; margin-right: 3px;}
#tag_list>ul>li>a:nth-child(2) {background:none;}
li span a, .col3 a {color:#291510; padding:1px 4px; background-color:#f0e0d6;}
li span a::before, .col3 a::before {content:''; width:100%; height:100%;}
.space {padding:0.5em;}
a[href*="meta:"], a[href*="meta%3A"], a[href*="source_request"], a[href*="tagme"], a[href*="translation_request"], a[href*="translated"], a[href$="s=2003"], a[href$="s=2004"], a[href$="s=2005"], a[href$="s=2006"], a[href$="s=2007"], a[href$="s=2008"], a[href$="s=2009"], a[href$="s=2010"], a[href$="s=2011"], a[href$="s=2012"], a[href$="s=2013"], a[href$="s=2014"], a[href$="s=2015"], a[href$="s=2016"], a[href$="s=2017"], a[href$="s=2018"], a[href$="s=2019"], a[href$="s=2020"], a[href$="s=2021"], a[href$="s=2022"], a[href$="s=2023"], a[href$="s=2024"], a[href$="s=2025"], a[href$="s=2026"], a[href$="s=2027"], a[href$="s=2028"], a[href$="s=2029"], a[href$="s=2030"], a[href$="s=animated"], a[href$="s=gif"], a[href$="s=apng"], a[href$="s=jpeg"], a[href$="s=png"], a[href$="s=lowres"], a[href$="s=highres"], a[href$="s=absurdres"], a[href$="s=incredibly_absurdres"], a[href$="s=huge_filesize"], a[href$="s=tall_image"], a[href$="s=wide_image"] {background-color:#ea9e89;}
a[href*="artist:"], a[href*="_(artist)"], a[href*="artist%3A"], a[href*="_%28artist%29"], a[href*="artist_request"] {background-color: #f46c79;}
a[href*="char:"], a[href*="char%3A"], a[href*="_(cosplay)"], a[href*="_%28cosplay%29"], a[href*="_(character)"], a[href*="_%28character%29"], a[href*="character_request"] {background-color: #48b977;}
a[href*="series:"], a[href*="series%3A"], a[href*="copyright_request"], a[href*="_(series)"], a[href*="_%28series%29"] {background-color: #9b90d5;}
li span a:hover, .col3 a:hover {filter: brightness(125%); color:#4b5b5e;}
li span a[href*="group:"]:hover, .col3 a[href*="group%3A"]:hover {color:#f1fff3;}
/*inputs*/
input[type=text] {padding:6px; background-color:; font-family:Arial; border:1px solid #aaa; border-radius:3px; box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);}
input[type=text]:focus {outline:none;border-color:#ea8;}

input#tags, input#stags {background-color:;width:140px;border-radius: 3px 0 0 3px;}
input#tags:focus, input#stags:focus, td input[type=text]:focus {}

input[type=submit], #footer a[href$="help/"], a[href*="page=post&s=add"]:before, [onclick*=\000027up\000027\000029], a[onclick*="new_topic"] {padding:6px 6px; border:1px solid #bbbbbb!important; box-shadow:inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%); border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)!important; border-radius:4px; transition:0.15s ease-in-out; background-color:#94766d!important;color:#ddd;font-weight: bold;outline:none;}
[onclick*=\000027up\000027\000029] {margin-right: 3px;padding:3px 6px;}
input[type=submit]:hover, #footer a:hover[href$="help/"], a:hover[href*="page=post&s=add"]:before, a[onclick*=\000027up\000027\000029]:hover, a[onclick*="new_topic"]:hover {background:#695f5c!important; cursor:pointer;color:#ddd;}
input[type=submit]:active, #footer a:active[href$="help/"], a:active[href*="page=post&s=add"]:before, a[onclick*=\000027up\000027\000029]:active, a[onclick*="new_topic"]:active {outline:0; box-shadow:inset 0 2px 4px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 5%); border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
#navbar li:nth-child(5) a:hover {filter:brightness(115%);}
#tags ~ input, #stags ~ input {margin-left: -4.5px;width:auto!important;border-radius: 0 3px 3px 0;font-family:Arial;}

input[type=radio] {margin-left:1em;}
td input[type=text] {/*background-color:#4a5b4d;*/}
td input[type=submit] {border-radius:3px;}
textarea {padding:6px; border-radius:3px; box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); font-family:Arial, sans-serif; line-height:1.414em; font-size:15px; letter-spacing:0.033em;}
textarea:focus {border-color:#ea8; outline:none;}
#edit_form input[type=submit] {margin-bottom:1.5em;}
#my-tags {word-break:break-all;}
/*tag list*/
#tag_list {padding:0.5em;}
#tag_list ul {word-break:break-all;}
#tag_list li span {color:#a78f8a!important;}

/*thumbnails and controls*/
div.content {grid-area:cont; margin:0 .5em .5em .5em; padding:0 .5em .5em .5em;}
#post-list .content > div {
  text-align:center;
  max-width:875px;
  float:none!important;
  display:grid;
  grid-template: "pages" auto
  "foot" auto
  "thumb" auto
  "ignore" auto
  "ads2" auto
  "ads" auto / 100%;
}
#post-list .content > div br {display:none;}
span.thumb {height: 180px;width: 180px;display: inline-block;float: left;text-align: center;vertical-align: middle;}
span.thumb img {box-shadow:0px 0px 2px #888; transition:0.15s ease;}
img[title ~= "animated"] {border:4px solid #1082f3;}
span.thumb img:hover, .col1 img:hover {transform:scale(1.03, 1.03); box-shadow:0 5px 4px #bbb;}
.thumb+script+div+script+#paginator {clear:both;}
#post-list span.thumb {height: 165px;width: 165px;margin: 5px;display: inline-flex;text-align: center;align-items: center;justify-content: center;vertical-align: middle;float:none;}
.divTable {grid-area:ads2; width:auto!important;}
.divTable + div {display:none;}
#post-list .content div:nth-child(3) {grid-area:thumb;}
#post-list .content div:nth-child(6) {grid-area:ignore; margin:1em 0 8em !important;}
#comment_form+script+div, #new_topic+script+div {margin-top:8em!important;}
#paginator {grid-area:pages; background:#f0e0d6; border:1px solid #d9bfb7; border-top:none; border-left:none; padding:2px; margin:0; display:flex; flex-wrap:wrap; justify-content:center;}
#footer {grid-area:foot; margin:0 0 20px; padding:7px; text-align:center; color:#ccc;}
center {grid-area:ads;}

div#paginator a, #paginator b {padding: 0 14px;line-height: 34px;border: 1px solid #dddddd; background:#fff;}
#paginator a:hover, #paginator b {color:#ff1163;background-color:#c7eefe;}

/*post pages*/
#post-view {margin:0 auto; max-width:1125px;}
#post-view .sidebar {width:250px; float:left; margin-right:1em;}
#image {max-width:100%; margin-right:0!important; margin-bottom:0.5em;}
#right-col > div {
  float:none!important;
  display:grid;
  grid-template:"notes" auto
  "ads2"auto/100%;
}
#right-col > div:nth-child(2) {display:none;}
#right-col > div:nth-child(3) {grid-area:notes;}
div#note-container {position:relative;}
div#post-view div.note-box {position: absolute;border: 1px solid black;width: 150px;height: 150px;cursor: move;background: #EFE;overflow: auto;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;}
div#post-view div.note-corner {background: black;width: 7px;height: 7px;position: absolute;bottom: 0;right: 0;cursor: se-resize;}
div#post-view div.note-body {background: #EFE;border: 1px solid black;display: none;width: 140px;height: 100px;position: absolute;padding: 5px;cursor: pointer;overflow: auto;}
a[onclick*="addFav"] {font-size:0;}
a[onclick*="addFav"]::after {content:'Favorite';font-weight:bold; color:#cc1105; font-size:16px!important;}
a[onclick*="addFav"]:hover::after {color:red;}
/*form tbody {background-color:#94766d; color:#ddd;}*/
[id^="c"][style$="line;"] {display:table!important; background:#f0e0d6; padding:0 0.5em 1em; margin:2px 0 3px 0;border:1px solid #d9bfb7; border-left:none; border-top:none;}
[id^="c"][style$="line;"] b, .comment-header {color:#888; margin:0.5em 0;}
[id^="c"][style$="line;"] a:nth-child(n+6) {word-break:break-all; text-decoration:underline;}

/*comment list*/
#comment-list2 {max-width:1200px; margin:0 auto;}
#comment-list2+div {margin-top:8em!important; float:none!important;}
#comment-list2 .post {
  display:grid;
  grid-template:"pic tags" 150px
  ". coms" auto / 150px auto;
  gap:0.5em;
  margin: 0 auto 3em;
  padding: 0 1em 3em;
  border-bottom: 2px solid #ccc;
  max-width: 1000px;
}
.col1 {grid-area:pic; justify-self:center;}
.col1 img {transition:0.15s ease-in-out;}
.col2 {grid-area:coms;}
.col3 {grid-area:tags; padding:1em; border-radius:5px; border:2px solid #d9bfb7;}
.comment {padding:0.5em;margin:2px 0 3px 0;background-color: #f0e0d6;border:1px solid #d9bfb7; border-left:none; border-top:none;display:table;}
.post-info li {display:inline-block;margin-right:1em;}

/*alias*/
.highlightable+br+br+form {max-width:1200px; margin:0 auto;}

/*forum (and tables)*/
form[action="?page=forum&s=search"] {max-width:1200px; margin: 0 auto;}
table {border-collapse: collapse; overflow: hidden; border:1px solid #d9bfb7;}
table.highlightable, #account-favorites-list {margin:1em auto;max-width:1200px;border-radius:5px;}
th {font-weight: 700;text-align: left;background-color: #94766d;color: #ddd;white-space: nowrap;}
th, tr, td {padding: 0.2em 0.5em;}
.highlightable tr, #account-favorites-list table {color:#1d2d54;}
.highlightable > tbody > tr:nth-child(even), #account-favorites-list table > tbody > tr:nth-child(even) {background:#f0e0d6;}
.highlightable > tbody > tr:nth-child(odd), #account-favorites-list table > tbody > tr:nth-child(odd) {background:#f5ece5;}
table.highlightable a {text-decoration:underline;}
table.highlightable > tbody > tr:hover, #account-favorites-list table > tbody > tr:hover {background-color:#ea8; color:#1d2d54;}
span.locked-topic {color:#cc1105;font-weight: 700;text-transform: uppercase;font-size: 0.9em;letter-spacing: 0.05em;}

/*threads*/
#forum {padding: 1em; margin:5px;}
#forum .post:first-child {background:inherit; border:none; display:block;margin-bottom:10px;}
#forum .post {position:relative; display:table; background-color: #f0e0d6;border:1px solid #d9bfb7; border-left:none; border-top:none; padding-top:5px; margin:2px 0 3px 0;}
.post::before {content:'>>'; position:absolute; left:-20px; top:0px; color:#e0bfb7;}
.post:first-child::before {content:none;}
.post+.paginator {margin-top:20px;}
.date span {font-size:14px;}

div.author {float:left; margin:0 20px 0 15px;}
h6.author {margin:0; display:inline;}
.author + .content {margin:0; padding:0;}
.content .body {padding:7px 10px 0px 15px; font-size:13px; line-height:18px;}
.response-title:empty + .body {margin-top:20px;}
.response-title {color:#cc1105;font-size:14px;letter-spacing: -0.033em; padding:0 15px; margin:0;}
.body b {color:#cc1105;}
div.quote {padding:10px; margin-top:8px; display:table; color:#6e8c1e; border:1px solid #d9bfb7;}
div.quote b {color:#296225;}
div.quote div.quote {border:none; border-left:2px solid #d9bfb7;}
span.spoiler {background:#232b25; color:#232b25; cursor:text; padding:0.2em}
span.spoiler:hover {color:#729120;}
.post .footer {margin-top:5px; font-size:10px;}
.post .footer a {font-family:verdana; color:#333; border:1px solid rgba(0, 0, 0, 0.1); line-height:11px; padding:0px 3px 1px; margin:0 2px;}
.post .footer a:hover {border:1px solid rgba(0, 0, 0, 0.4); color:#000;}
.post:first-child .footer {background:none;}

/*my account and others*/
#user-index {margin:0 auto 8em; padding:1em; border:2px solid #d9bfb7; border-radius: 5px;}

/*account options*/
.option {max-width:900px; margin:0 auto;}
label {font-weight:700;}
.option table {width:100%;}
.option td {vertical-align: top;}
.option textarea {width:400px; height:100px;}
.option input[type=submit] {padding: 10px 50px;font-size: 1.168em;text-transform: uppercase;letter-spacing: 0.05em;}

/*homepage*/
#static-index {text-align:center; margin:3em auto; max-width:1200px; padding:1em;}
#static-index h1 {font-size:2.618em!important;font-family:Tahoma;}
#static-index h1 a {color:maroon;}
#static-index p::after {content:'Theme based on Yotsuba A, modified from holobooru theme by sHaHaHark'; display:block; font-family:verdana; color:#a78f8a; font-size:10px;}
#links a {margin-left:1em;}
#links a:first-of-type {margin-left:0;}
#static-index div:last-of-type {font-size:100%!important; margin-top: 2em;}

/*help*/
.help {max-width:650px; margin:0 auto; padding:2em; background-color: #f0e0d6;border:1px solid #d9bfb7; border-left:none; border-top:none;}
dl, dd {margin-bottom:1em;}
dl {background:#ffe; border:1px solid #d9bfb7; padding: 1em; max-width: 250px;}
dt:nth-child(5) {color:#a78f8a;}

/*MEDIA QUERIES*/
@media screen and (max-width: 744px) {
  #post-list .sidebar, #post-view .sidebar {height:125px;  display:flex;}
  #post-view .sidebar {float:none;width:auto;margin:0 0 1em;}
  #post-view #tag_list {flex-grow: 100;padding: 0 0.5em 0.5em;overflow: auto;}
  #post-view #tag_list li:last-child {display:none;}
  .sidebar+b{margin-left:1.5em;}
  input#tags, input#stags {width:125px; border-radius: 3px 3px 0 0;}
  #tags ~ input, #stags ~ input {width: 125px!important; margin-top: -1px!important; margin-left: 0px; border-radius:0 0 3px 3px;}
  #right-col {margin:0; padding:0;}
  #right-col > div {float:none!important;margin:1em 0 0 0!important;}
  #image {margin:0 0 1em 0!important; width:100%;}
  #comment_form + script + div {margin-top:8em!important;}

  #post-list {
    grid-template-areas:"side side"
    "cont cont"
    "cont cont";
  }
  #post-list #tag_list {flex-grow:100; padding-top: 0; max-height: 200px; overflow: auto;}
  .sidebar .space {width:135px; padding-top:0;}
  #post-list .sidebar div:nth-child(2) {display:none;}
  .space form {text-align:center;}

  div.author {padding:0.5em 0;}
  .author + .content {padding:0.5em 0; margin:0;}
}
@media screen and (max-width:601px) { #header {display:block; margin:0 0 1em; padding:0.5em;} #navbar {margin:0;} }
@media screen and (max-width: 501px) {
  body{margin:0;}
  #right-col {margin:0; padding:0;}
  #right-col > div .divTable+div+div {margin:0 0.5em;}
  #forum{padding:0;}
  .body {line-height:1.5em;}
  .body a {break-word:break-all;}
  #user-index {margin: 0 0.5em 8em;}
}
@media screen and (max-width: 401px) {
  #post-list {
    grid-template-areas:"side side"
    "side side"
    "cont cont";
  }
  #post-list .sidebar, #post-view .sidebar {flex-direction:column; height:180px;}
  .sidebar .space {width:auto;}
  .space form {text-align:left;}
  span.thumb {height:150px; width:150px;}
  div.content {margin:0; padding:0;}
  #right-col {margin-top:1em;}

  input#tags, input#stags {width:140px;border-radius: 3px 0 0 3px;}

  #tags ~ input, #stags ~ input {margin-left: -4.5px; width:auto!important;color:#fff;font-weight: bold;padding:6px;border: none !important;border-radius: 0 3px 3px 0;}
}