/* Themes. Default is Yotsuba Black — the classic warm Yotsuba layout, gone dark. Others are selected via data-theme on (see theme.js). */ :root { --bg: #1a1713; --bg-accent: #211d18; --banner: #2e2317; /* top of the body gradient */ --post-bg: #2a251f; --post-border: #4a4036; --input-bg: #14110e; --text: #d9d0c3; --text-dim: #8f8577; --maroon: #c25d5d; /* headers / subjects (was #800000 / #cc1105) */ --name: #6fae6f; /* poster name (was #117743) */ --link: #c9a15f; /* links (warm gold instead of blue) */ --link-hover: #e8c483; --quote: #96b556; /* greentext (was #789922) */ --quotelink: #d96a6a; --quotelink-hover: #ff8a8a; --hl-bg: #3a3025; /* highlighted / targeted post */ --hl-border: #5c4e3d; --table-border: #352e27; } /* Yotsuba — the classic warm light look */ :root[data-theme="yotsuba"] { --bg: #ffffee; --bg-accent: #f8f4e0; --banner: #fed6af; --post-bg: #f0e0d6; --post-border: #d9bfb7; --input-bg: #ffffff; --text: #800000; --text-dim: #907070; --maroon: #cc1105; --name: #117743; --link: #0000ee; --link-hover: #dd0000; --quote: #789922; --quotelink: #dd0000; --quotelink-hover: #ff4444; --hl-bg: #f0c0b0; --hl-border: #d99f91; --table-border: #d9bfb7; } /* Autumn — cream, pumpkin, and rust */ :root[data-theme="autumn"] { --bg: #f7efe1; --bg-accent: #f1e5cf; --banner: #e8c8a0; --post-bg: #f0ddc0; --post-border: #d8b088; --input-bg: #fffaf2; --text: #4a3320; --text-dim: #96805f; --maroon: #a34d10; --name: #5d7a2b; --link: #b05c10; --link-hover: #d47a20; --quote: #6a8b2a; --quotelink: #c04020; --quotelink-hover: #e06040; --hl-bg: #ecd0a8; --hl-border: #c89860; --table-border: #ddbf9d; } /* Ocean — the cool light blue (Burichan lineage) */ :root[data-theme="ocean"] { --bg: #eef2ff; --bg-accent: #e2e8f8; --banner: #c6cff0; --post-bg: #d6daf0; --post-border: #b7c5d9; --input-bg: #ffffff; --text: #111122; --text-dim: #666688; --maroon: #0f0c5d; --name: #117743; --link: #34345c; --link-hover: #1d4fd7; --quote: #789922; --quotelink: #dd0000; --quotelink-hover: #ff4444; --hl-bg: #d6bad0; --hl-border: #ba9dbf; --table-border: #b7c5d9; } /* White — clean and neutral */ :root[data-theme="white"] { --bg: #ffffff; --bg-accent: #f7f7f7; --banner: #ededed; --post-bg: #f5f5f5; --post-border: #dddddd; --input-bg: #ffffff; --text: #222222; --text-dim: #888888; --maroon: #444444; --name: #2a7a4a; --link: #3366cc; --link-hover: #1144aa; --quote: #6a9440; --quotelink: #cc4444; --quotelink-hover: #ee6666; --hl-bg: #f5efd5; --hl-border: #d8cfa0; --table-border: #e0e0e0; } /* Midnight — cool gray dark (Tomorrow lineage) */ :root[data-theme="midnight"] { --bg: #1d1f21; --bg-accent: #222528; --banner: #101214; --post-bg: #282a2e; --post-border: #3a3d42; --input-bg: #131416; --text: #c5c8c6; --text-dim: #81858a; --maroon: #cc6666; --name: #b294bb; --link: #81a2be; --link-hover: #a6c1de; --quote: #b5bd68; --quotelink: #e08080; --quotelink-hover: #f0a0a0; --hl-bg: #33363b; --hl-border: #50545a; --table-border: #33363b; } * { box-sizing: border-box; } body { background: var(--bg); background: linear-gradient(var(--banner), var(--bg) 240px); color: var(--text); font-family: arial, helvetica, sans-serif; font-size: 10pt; margin: 0; padding: 8px; min-height: 100vh; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } hr { border: none; border-top: 1px solid var(--post-border); clear: both; } /* top board list */ .boardlist { font-size: 9pt; color: var(--text-dim); padding-bottom: 4px; } .boardlist a.cur { color: var(--link-hover); font-weight: bold; } .right { float: right; } /* header */ .header { text-align: center; margin: 12px 0 4px; } .header h1 { font-family: Tahoma, sans-serif; font-size: 24pt; font-weight: bold; letter-spacing: -2px; color: var(--maroon); margin: 0; } .tagline { color: var(--text-dim); font-style: italic; margin-top: 2px; } /* home page */ .homebox { max-width: 480px; margin: 16px auto; background: var(--post-bg); border: 1px solid var(--post-border); padding: 10px 14px; } .boardtable { width: 100%; border-collapse: collapse; } .boardtable td { padding: 4px 8px; } /* post form */ .postform { margin: 8px auto; width: fit-content; } .postform table { border-collapse: collapse; } .postform .label { background: var(--post-bg); border: 1px solid var(--post-border); color: var(--maroon); font-weight: bold; padding: 2px 6px; text-align: left; vertical-align: top; min-width: 70px; } .postform td { padding: 1px 2px; } .postform input[type="text"], .postform input[type="password"], .postform textarea { background: var(--input-bg); border: 1px solid var(--post-border); color: var(--text); font-family: inherit; font-size: 10pt; padding: 2px 4px; } .postform textarea { width: 300px; } .postform input[type="text"] { width: 244px; } .postform input[type="submit"], .pager input[type="submit"] { background: var(--post-bg); border: 1px solid var(--post-border); color: var(--text); padding: 2px 8px; cursor: pointer; } .postform input[type="submit"]:hover, .pager input[type="submit"]:hover { background: var(--post-border); } .postform input[type="file"] { color: var(--text-dim); font-size: 9pt; } .hint { color: var(--text-dim); font-size: 8pt; } .navlinks { margin: 6px 0; } .empty { color: var(--text-dim); font-style: italic; margin: 20px; text-align: center; } /* posts */ .thread { margin: 4px 0; } .post { padding: 4px 8px; margin: 2px 0; } .post.reply { background: var(--post-bg); border: 1px solid var(--post-border); border-left: none; border-top: none; display: inline-block; max-width: calc(100vw - 80px); } .replycontainer { display: block; } .sidearrows { color: var(--text-dim); float: left; margin: 6px 4px 0 6px; } .subject { color: var(--maroon); font-weight: bold; } .name { color: var(--name); font-weight: bold; } .datetime { color: var(--text-dim); margin: 0 4px; } .postnum a { color: var(--text-dim); } .postnum a:hover { color: var(--quotelink); text-decoration: none; } .backlinks { font-size: 8.5pt; } .postmsg { margin: 8px 16px; word-wrap: break-word; overflow-wrap: break-word; } .greentext { color: var(--quote); } .quotelink { color: var(--quotelink); text-decoration: underline; } .quotelink:hover { color: var(--quotelink-hover); } /* files */ .file { margin: 4px 0; } .fileinfo { font-size: 8.5pt; color: var(--text-dim); margin-left: 4px; } .thumb { float: left; max-width: 250px; max-height: 250px; margin: 4px 20px 8px 4px; border: none; } .thumb.expanded { max-width: calc(100vw - 60px); max-height: none; float: none; display: block; } .thumb.video { max-width: 400px; max-height: 300px; background: #000; } .cf-turnstile { margin: 4px 0; } .threadlinks { margin-left: 6px; } .omitted { color: var(--text-dim); } .pager { margin: 8px 0; color: var(--text-dim); } /* catalog */ .catalog { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .catcell { width: 170px; max-height: 300px; overflow: hidden; text-align: center; padding: 4px; background: var(--bg-accent); border: 1px solid transparent; } .catcell:hover { border-color: var(--post-border); background: var(--post-bg); } .catthumb { max-width: 150px; max-height: 150px; } .catthumb.noimg { width: 100px; height: 100px; line-height: 100px; margin: 0 auto; background: var(--post-bg); color: var(--text-dim); font-size: 24pt; } .catmeta { font-size: 8pt; color: var(--text-dim); } .catsub { color: var(--maroon); font-weight: bold; font-size: 9pt; } .catcom { font-size: 8.5pt; word-wrap: break-word; } /* highlight target post (when following a >>quotelink) */ .post:target, .post.highlight { background: var(--hl-bg); border: 1px solid var(--hl-border); } /* rules page + home links */ .homelinks { text-align: center; margin: 10px; color: var(--text-dim); } .rulesbox { max-width: 720px; margin: 12px auto; background: var(--post-bg); border: 1px solid var(--post-border); padding: 6px 18px; line-height: 1.5; } .postform textarea[name="rules"] { width: 560px; max-width: 90vw; } /* staff panel */ .staffbox { max-width: 1100px; margin: 0 auto; } .staffbox h2 { color: var(--maroon); font-size: 12pt; border-bottom: 1px solid var(--post-border); padding-bottom: 2px; margin: 18px 0 6px; } .stafftable { width: 100%; border-collapse: collapse; font-size: 9pt; } .stafftable th { background: var(--post-bg); border: 1px solid var(--post-border); color: var(--maroon); padding: 3px 6px; text-align: left; } .stafftable td { border: 1px solid var(--table-border); padding: 3px 6px; vertical-align: top; } .cell-com { max-width: 320px; overflow: hidden; word-break: break-word; } .cell-acts form { margin-bottom: 2px; } form.inline { display: inline-block; margin: 0 2px 0 0; } form.inline input[type="submit"] { background: var(--post-bg); border: 1px solid var(--post-border); color: var(--text); padding: 1px 6px; font-size: 8pt; cursor: pointer; } form.inline input[type="submit"]:hover { background: var(--post-border); } form.inline input[type="text"], form.inline input[type="number"] { background: var(--input-bg); border: 1px solid var(--post-border); color: var(--text); font-size: 8pt; padding: 1px 3px; width: 80px; } .postform select { background: var(--input-bg); border: 1px solid var(--post-border); color: var(--text); font-size: 9pt; } /* inline mod controls on live posts */ .modctrl { margin-left: 2px; } .modbtn { background: none; border: none; padding: 0 1px; color: var(--quotelink); font-family: inherit; font-size: 8pt; cursor: pointer; text-decoration: none; } .modbtn:hover { color: var(--quotelink-hover); text-decoration: underline; } /* error pages */ .errorbox { max-width: 480px; margin: 20px auto; background: var(--post-bg); border: 1px solid var(--post-border); padding: 16px 20px; text-align: center; line-height: 1.6; } .errorbox .errlinks { margin-top: 12px; color: var(--text-dim); } /* report link + thread state */ a.report { color: var(--text-dim); font-size: 8pt; text-decoration: none; } a.report:hover { color: var(--quotelink); } .icon { font-size: 9pt; } .lockednote { text-align: center; color: var(--maroon); font-weight: bold; margin: 12px; } .footer { margin-top: 24px; padding-top: 6px; border-top: 1px solid var(--post-border); text-align: center; color: var(--text-dim); font-size: 8pt; } /* theme selector (footer) */ .themectl { display: inline-block; margin-top: 6px; } .themectl select { background: var(--input-bg); border: 1px solid var(--post-border); color: var(--text); font-size: 8pt; } /* per-thread poster IDs — fixed palette so an ID keeps its color everywhere */ .posteruid { font-size: 8pt; padding: 0 4px; margin-left: 3px; border-radius: 3px; color: #fff; cursor: pointer; white-space: nowrap; } .posteruid.uid-hl { outline: 2px solid var(--quotelink); } .id-c0 { background: #b04a4a; } .id-c1 { background: #b06a3a; } .id-c2 { background: #8a7a1a; } .id-c3 { background: #5f9a3a; } .id-c4 { background: #2a9a6a; } .id-c5 { background: #2a8a8a; } .id-c6 { background: #3a7ab0; } .id-c7 { background: #4a5ac0; } .id-c8 { background: #7a4ac0; } .id-c9 { background: #a03aa0; } .id-c10 { background: #c04a7a; } .id-c11 { background: #7a6a5a; } .id-c12 { background: #4a7a5a; } .id-c13 { background: #5a5a9a; } .id-c14 { background: #8a5a3a; } .id-c15 { background: #607a8a; } /* quotelink hover preview */ #quote-preview { position: fixed; z-index: 100; pointer-events: none; max-width: min(520px, 92vw); max-height: 60vh; overflow: hidden; box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.45); } #quote-preview .post { display: block; background: var(--post-bg); border: 1px solid var(--hl-border); margin: 0; max-width: none; } #quote-preview .thumb { max-width: 125px; max-height: 125px; } /* thread auto-updater */ .threadupdater { margin-left: 8px; } .threadupdater label { cursor: pointer; } #upd-status { margin-left: 4px; }