Endchan CSS

/* Uses Default layout / Tommorrow theme as base */
html {
    --post-background: #2F343ED0;
    --post-corner-radius: 2px;
    --post-border-style: none;
    --post-border-width: 0px;
    --post-border-color: transparent;

    --post-preview-background: #1D1D21EE;
    --post-preview-corner-radius: 2px;
    --post-preview-border-style: solid;
    --post-preview-border-width: 2px;
    --post-preview-border-color: #000000F4;

    --post-marked-background: var(--post-preview-background);
    --post-marked-corner-radius: var(--post-preview-corner-radius);
    --post-marked-border-style: var(--post-preview-border-style);
    --post-marked-border-width: var(--post-preview-border-width);
    --post-marked-border-color: var(--post-preview-border-color);

    --post-max-height: 400px; /* 640px by default before it starts to scroll */
    --post-max-width: 86vw;  /* 86% viewport width (window) */
    /* this gives 5 files in the same line without overlap on my settings, may require tweaking */
    --attachment-max-width: 16vw;

    --spoiler-width: 200px;
    --spoiler-height: var(--spoiler-width);

    /* can be a solid color or image */
    /*--page-background: #ABABAB;*/
    --page-background: url(https://i.imgur.com/BiOlhRw.jpeg) no-repeat center fixed;

    --link-text: #A5BCD0;
    --link-text-hover: #D2DFEA;
    --green-text: #9FBE75;

    /* set to none to hide del link on posts (make sure to select the checkbox at the bottom of the page before it's hidden) */
    /* use something like inline or inherit to show */
    --del-link-display: none;

    --reply-form-min-width: 465px;
    --reply-form-min-height: 150px;
    --reply-form-attachments-align: right; /*left by default, right is eaier for drag+drop on single screen*/

    --bottom-nav-background: transparent;
    --bottom-nav-align: right;
    --bottom-nav-border-style: none;
    --bottom-nav-border-width: 0px;
    --bottom-nav-border-color: transparent;

    --page-indicator-background: var(--post-background);
    --page-indicator-corner-radius: var(--post-corner-radius);

    --posting-mode-banner-display: none;
    --announcements-background: #676E7CD0;
    --announcements-corner-radius: 4px;
    --announcements-border-style: 2px;
    --announcements-border-width: inset;
    --announcements-border-color: initial;

    /* allows hiding quick reply and toggle reply form buttons if the reply form is opened by defaut through dollchan */
    /* use none instead of inherit/block to hide */
    --quick-reply-display: inherit; /* inherit by default */
    --reply-toggle-display: block; /* block by default */
    --reply-toggle-align:  center; /* center by default */
}

/* == Posts & page == */

/* Post styling */
.innerPost {
    border-radius: var(--post-corner-radius);
    background-color: var(--post-background);
    padding-right: 12px;
    max-width: var(--post-max-width) !important;
    border-style: var(--post-border-style);
    border-width: var(--post-border-width);
    border-color: var(--post-border-color);
}
/* Marked (selected) post styling */
.markedPost {
    background-color: var(--post-marked-background);
    border-radius: var(--post-marked-corner-radius);
    border-style: var(--post-marked-border-style);
    border-width: var(--post-marked-border-width);
    border-color: var(--post-marked-border-color);
}
/* OP styling */
.innerOP {
    border-radius: var(--post-corner-radius);
    background-color: var(--post-background);
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-style: var(--post-border-style);
    border-width: var(--post-border-width);
    border-color: var(--post-border-color);
}
/* Post (reply) previews styling */
.de-pview {
    background-color: var(--post-preview-background);
    border-radius: var(--post-preview-corner-radius);
    border-style: var(--post-preview-border-style);
    border-width: var(--post-preview-border-width);
    border-color: var(--post-preview-border-color);
}
.divMessage {
    max-height: var(--post-max-height);
}

/* Text colors (links, greentext) */
a, blockquote a {
    color: var(--link-text);
}
a:hover, blockquote a:hover {
    color: var(--link-text-hover);
}
.greenText {
    color: var(--green-text);
}

/* Background */
body {
  background: var(--page-background) !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Remove del link */
a.delLink {
    display: var(--del-link-display);
}
label#hideDelLbl {
    display: var(--del-link-display) !important;
}

/* Better sizing for file attachments */
div.uploadDetails {
    max-width: var(--attachment-max-width) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.imgLink > img, .de-img-embed, .de-video-obj {
    opacity: 1.0 !important;
    max-width: var(--attachment-max-width) !important;
    height: auto;
}
img[src*="/.media/"] {
    opacity: 1.0 !important;
}
/* Square spoilers */
img[src*="/ttg/custom.spoiler"] {
    width: var(--spoiler-width);
    height: var(--spoiler-height);
}

/* == Reply form (not quick reply) == */

/* Anchor reply form to top right */
form.form-post {
    position: fixed;
    top: 20px;
    right: 16px;
    background: var(--post-background);
    padding: 8px !important;
    border-radius: var(--post-corner-radius);
}
/* Larger min size of reply box*/
textarea#fieldMessage {
    min-width: var(--reply-form-min-width) !important;
    min-height: var(--reply-form-min-height) !important;
}
/* Smaller canvas size inputs */
input#oekakiWidth {
    width: 80px;
}
input#oekakiHeight {
    width: 80px;
}
/* actually, just hide those */
td:has(input#oekakiWidth) {
    display: none;
}
/* Hide padding on top of reply form */
div.hField {
    display: none;
}
/* Hide manage board, moderate thread links */
p:has(a#linkManagement) {
    display: none;
}
/* Hide nav links under reply form */
p.topNav {
    display: none;
}
/* Align file attachments in reply form */
div#de-file-area {
    text-align: var(--reply-form-attachments-align);
}

/* == Footer == */

/* Bottom nav */
.bottomNav {
    text-align: var(--bottom-nav-align);
    float: none !important; /* allows bottom nav alignment on front page */
    background-color: var(--bottom-nav-background) !important;
    font-size: 100% !important;
    border-style: var(--bottom-nav-border-style) !important;
    border-width: var(--bottom-nav-border-width) !important;
    border-color: var(--bottom-nav-border-color) !important;
}
#divPages {
    background-color: var(--page-indicator-background) !important;
    border-radius: var(--page-indicator-corner-radius) !important;
}
/* Configure quick reply link visibility */
a.replyLink {
    display: var(--quick-reply-display);
}
/* Configure Toggle reply form visibility */
div.de-parea > div:first-of-type {
    display: var(--reply-toggle-display);
    text-align: var(--reply-toggle-align);
}

/* Content action form (delete/report) */
/* anchor to bottom right of screen, hide content by default, show on hover */
div.contentAction {
    position: fixed;
    bottom: 16px;
    right: 8px;
    min-width: 64px;
    min-height: 8px;
    padding: 8px !important;
    border-radius: var(--post-corner-radius);
    background: var(--post-background);
}
div.contentAction > * {
    display: none !important;
}
div.contentAction:hover > * {
    display: block !important;
}

/* == Header == */

/* Hide posting mode banner at the top */
div#modeBanner {
    display: var(--posting-mode-banner-display);
}

/* Site announcements in header */
details > iframe {
    background-color: var(--announcements-background);
    border-radius: var(--announcements-corner-radius);
    border-style: var(--announcements-border-style);
    border-width: var(--announcements-border-width);
    border-color: var(--announcements-border-color);
}

/* == Misc == */

/* Dollchan settings panel missing bg */
div.de-win-body {
    background-color: var(--post-background) !important;
}