Yotsuba B for Endchan v1.1

/* ============================================================================
Yotsuba B for Endchan v1.1

This stylesheet was made for Endchan as an attempt to mimic the popular
Yotsuba B theme used in other imageboards like 4chan and 8chan.

Please note that LynxChan (the engine Endchan runs on) is a work-in-progress,
and this stylesheet uses many "hacks" to modify HTML elements that currently
lack unique IDs or classes. Eventually this stylesheet will need to be modified
or rewritten to reflect forthcoming changes to the software Endchan uses.

Hopefully OdiliTime will just make this the default theme for Endchan.

This stylesheet has been tested only on Firefox and Chrome. This has been made
for Endchan but should theoretically work in other instances of LynxChan.
============================================================================ */

/* set top border color similar to 8chan */
nav {border-bottom: 1px solid #89A;}

/* raise board banner to similar margin-top as 8chan */
.boardHeader {margin-top: 2em;}

/* set font sizes and colors similar to 4chan/8chan */
nav {font-size: 1.1em;}
a, #threadList #divThreads, #threadList #threadLinks, label {font-size: 0.8em;}
.innerPost a, .opCell a {font-size: 1em;}
.boardHeader p#labelName {font-size: 1.7em; font-weight: bold;}
.boardHeader p#labelDescription {font-size: 0.7em;}
.form-post .small {font-size: 0.6em;}
.quoteblock {font-size: 1.1em;}
.panelBacklinks a {font-size: 0.85em;}
.threadPages {font-size: 1em;}
.contentOmissionIndicator, .labelOmission {color: #707070;}
.spoiler:hover {color: white; background-color: black;}
#threadReport, #divThreads [id^="Show"] a {font-size: 1em;}
pre {font-size: 1.2em;}
.contentAction a {font-size: 0.6em;}

/* underline catalog like in 8chan */
.boardHeader a {text-decoration: underline;}

/* hide boards and bottom links */
.boardHeader [href^="../boards"], .boardHeader [href^="#bottom"] {display: none;}

/* reduce margin above post form */
#postBox {margin-top: 0em;}

/* set post form font size and borders similar to 4chan */
.form-post th {
  font-size: 1.1em;
  border: 1px solid #000;
}

/* increase post textboxes similar to 4chan/8chan */
#fieldName, #fieldEmail, #fieldSubject {width: 20em;}

/* set textbox border style similar to 4chan/8chan */
input#fieldName, input#fieldEmail, input#fieldSubject, textarea, input#fieldPostingPassword, input#oekakiWidth, input#oekakiHeight, input#checkboxSpoiler,
input#reportFieldReason, input#deletionFieldPassword {
  margin: 0px;
  margin-right: 2px;
  padding: 2px 4px 3px 4px;
  border: 1px solid #AAA;
  outline: none;
  font-family:inherit;
  font-size:1.1em;
}
input#fieldCaptchaReport {
  margin: 0px;
  margin-right: 2px;
  padding: 2px 4px 3px 4px;
  border: 1px solid #AAA;
  outline: none;
  font-family:inherit;
  font-size:1em;
}

/* append words "all files" to spoiler for clarity */
.spoilerCheckbox::after {content: " all files";}

/* downsize xbox-hueg captchas, give nice grey border */
#captchaImage {width: 50%; border: 1px solid #AAA;}
#captchaImageReport {width: 68%; border: 1px solid #AAA;}

/* align captcha center */
#postBox #captchaDiv {text-align: center;}

/* decrease post edited message font size and italicize */
.labelLastEdit {font-size: 0.85em; font-style: italic;}

/* remove some underlines like in 4chan */
.contentOmissionIndicator a, .labelOmission a {text-decoration: none;}

/* reduce margin in "message too long" */
.contentOmissionIndicator {margin-top: 0; margin-bottom: 0;}

/* prepend a missing space before "Expand thread" link */
.labelOmission a::before {content: " ";}

/* adjust omitted message margin similar to 4chan */
.labelOmission {
  margin-top: 0.875em;
  margin-bottom: -0.9em;
}

/* fix links that don't hover red */
nav a:hover, .boardHeader a:hover, #postBox a:hover, .opCell a:hover, .innerPost a:hover, .markedPost a:hover, .threadPages a:hover, #divThreads [id^="Show"], .bottomNav a:hover, a:hover
{
  color: #dd0000;
}
.innerPost :not(divMessage) a:hover {color: #dd0000;}

/* keep hovered name field green, set important rule to override opCell and innerPost */
.noEmailName:hover {color: #117743 !important;}

/* align "message too long" with innerPost assuming both set to same margin-left */
.postCell .contentOmissionIndicator {margin-left: 2.4em;}

/* slightly reduce multi-file horizontal margin for better fitting of 5 images */
.uploadCell {margin-right: 0.1em;}
/* reduce file info max width similar to 4chan's for better fitting */
.uploadDetails {white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 23.4em;
}

/* unbold board owner/volunteer label */
.labelRole {font-weight: normal;}
/* prepend ## to label like in 4chan/8chan */
.labelRole::before {content: "## ";}

/* hide post Preview links */
.linkPreview {display: none;}

/* hide del */
a.delLink, a[href="#bottom"] {display: none !important;}

/* move post # left to cover unnecessary space between "No." and the number, like 4chan */
.linkQuote {position: relative; right: 0.5ch;}

/* hide Hide User */
a[id^="hide"][id*="User"] {display: none;}

/* Replace [X] with [--] and move it far left like in 8chan */
.opHead a[id^="hide"] {
  color: transparent;
  visibility: hidden;
}
.opHead a[id^="hide"][id*="Thread"]::after {
  color: initial;
  content: "[--]";
  text-decoration: underline;
  visibility: visible;
  float: left;
}
/* move OP backlinks (reply ID links) leftwards to make up for hiding [X]  */
.opHead .panelBacklinks a {position: relative; right: 2em !important;}

/* move reply backlink leftwards for similar reason, be more like 4chan/8chan */
.innerPost .panelBacklinks a {position: relative; right: 0.5em !important;}

/* reduce backlinks padding-left from 0.5em like in 4chan */
.panelBacklinks a {padding-left: 0.4em;}

/* Hide all [X] post hiders (not including OP) */
.innerPost a[id^="hide"] {display: none;}

/* remove underline in Reply like in 4chan */
.linkReply {text-decoration: none;}

/* set OP's margin-left similar to 4chan/8chan */
:not(.postCell) .divMessage {margin-left: 0em;}

/* increase post padding and margins similar to 8chan */
.innerPost, .markedPost {padding: 0.3em 0.3em 0.4em 0.1em;}
.postCell .divMessage {
  margin-left: 2.4em;
  padding-right: 3em;
}
.quoteblock .innerPost {padding: 0.3em 1.2em 0.4em 0.8em;}

/* remove vertical spacing between aa tags */
.aa {display: inline-block;}

/* page navigation bg and border similar to 4chan/8chan */
.threadPages {
  background: #D6DAF0;
  display: inline-block;
  padding: 8px;
  margin: 8px 0 4px 0;
  border-right: 1px solid #B7C5D9;
  border-bottom: 1px solid #B7C5D9;
}

/* add brackets between page navigation links like in 4chan/8chan*/
.threadPages [href^="#top"]::before {
  content: "[";
  color: #89A;
}
.threadPages [href^="#top"]::after {
  content: "]";
  color: #89A;
}
.threadPages [href^="index"]::before, .threadPages [href^="1"]::before, .threadPages [href^="2"]::before, .threadPages [href^="3"]::before,
.threadPages [href^="4"]::before, .threadPages [href^="5"]::before, .threadPages [href^="6"]::before, .threadPages [href^="7"]::before,
.threadPages [href^="8"]::before, .threadPages [href^="9"]::before
{
  content: "[";
  color: #89A;
}
.threadPages [href^="index"]::after, .threadPages [href^="1"]::after, .threadPages [href^="2"]::after, .threadPages [href^="3"]::after,
.threadPages [href^="4"]::after, .threadPages [href^="5"]::after, .threadPages [href^="6"]::after, .threadPages [href^="7"]::after,
.threadPages [href^="8"]::after, .threadPages [href^="9"]::after
{
  content: "]";
  color: #89A;
}
.threadPages span {color: transparent;}

/* hide Manage links */
#linkManagement, #linkModeration {display: none;}

/* move post deleter/reporter right, reduce vertical margins */
.contentAction {
  float: right;
  margin-top: -0.8em;
  margin-bottom: 0.1em;
}

/* hide long message about file deletion references, no one cares richard */
#threadReport label.checkbox {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9.1em;
}