/* rchan UX layer — Yotsuba-clone design system + functional components. Loaded site-wide via the router. ============================ DESIGN SYSTEM ============================ EXACT COPY of 4chan's yotsubluenew.716.css structure & typography, re-palette'd to CREAM, with SQUARE offset shadows. Legacy tokens (still drive the yotsuba-clone reply/OP cells, links, nav — untouched by the catalog-card token contract below): - Base type: "Liberation Sans", "Arial", "sans-serif" @ .833rem (10pt at the 16px browser default — rem so user font-size preferences scale the site). Meta text x-small (backlinks, subtitles, footer), page list + board nav .8125rem (13px), board title 1.75rem (28px) Tahoma. - Palette (cream mapping of yotsuba blue): page bg #EEEEE4 (4chan #EEF2FF) cell bg #E6E6DA (4chan #D6DAF0) cell border #CFCFC4 (4chan #B7C5D9) text #393939 (4chan #000) link #274a6b (4chan #34345C) hover #c8102e (#DD0000) name #3a6b2e (4chan #117743) subject #0d5b73 (4chan #0F0C5D) greentext #5b8a2b (4chan #789922) quotelink #8a2b1f (4chan #D00), always underlined - Structure: replies are shrink-wrapped cells (display:table, padding 2px, border right+bottom only) on the page background; the OP has NO cell — it sits directly on the page. Messages are indented (blockquote-style margins). hr = 1px top border in the cell-border colour. - Shadows (square, no blur): cells 2px 2px 0 rgba(0,0,0,.1); floating panels 4px 4px 0 rgba(0,0,0,.18). Radius: 0 everywhere. - Exception kept by request: file info uses Roboto Mono (self-hosted). ======================================================================= */ /* ============================ TOKEN CONTRACT ============================ Light Cream's half of the shared catalog-card contract (Cream (Dark)'s is defined at html.rchan-warmdark, further down) — same custom-property names, values tuned for a warm-ivory ground. The SHARED CATALOG CARD SYSTEM block (also further down, after both token sets exist) is written ONCE against these names; only the values differ per theme. --accent is darkened from the initially-proposed #5E7D6C (3.87:1 on --ground, under AA) to #547163 (4.57:1) — same sage hue, verified against WCAG AA 4.5:1. ========================================================================== */ body.theme_cream { --ground: #EFEDE4; --surface: #F7F5EE; --surface-2: #FFFFFF; --ink: #2A2721; --ink-soft: #5A554A; --ink-faint: #8A8477; --line: #D8D4C6; --line-hover: #C2BCA8; --accent: #547163; --sage-text: #4F7355; --wine: #8A4A4A; --shadow-rest: 0 1px 2px rgba(42,39,33,.06), 0 2px 8px rgba(42,39,33,.05); --shadow-hover: 0 4px 16px rgba(42,39,33,.12); --card-hover-bg: #F7F5EE; /* = --surface: light stays put on hover, the border does the work */ } /* ---------- Base (yotsuba: body / links / hr / images) ---------- */ html body { font-family: "Liberation Sans", "Arial", "sans-serif"; font-size: .833rem; color: #393939; background: #EEEEE4; /* outranks global.css's body{#EEF2FF + fade-blue image} */ margin-left: 0; margin-right: 0; margin-top: 5px; padding-left: 5px; padding-right: 5px; -webkit-text-size-adjust: 100%; } /* body prefix: global.css sets `a { text-decoration: underline }` and loads after us */ body a, body a:visited { color: #274a6b; text-decoration: none; } body a:hover { color: #c8102e !important; text-decoration: none; } img { border: none; } body hr { border: none; border-top: 1px solid #CFCFC4; height: 0; } @font-face { font-family: "Roboto Mono"; src: url("/.rchan/robotomono.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; } /* ---------- Type sizes (body prefix outranks engine %-rules; all fixed) ---------- */ body .postInfo, body .opHead, body .divMessage, body .panelIp, body .panelProxyIp, body .contentOmissionIndicator, body .labelOmission, body .labelId, body .panelASN, body .panelBypassId, body .panelUploads, body .opUploadPanel { font-size: .833rem; } body input, body select, body textarea { font-size: .833rem; } body #postingForm button, body #qrbutton { font-size: .833rem; } body #postingForm label, body .divRefresh label, body .divRefresh input, body .spoilerCheckbox, body #boardContentLinks { font-size: .833rem; } body .panelBacklinks { font-size: x-small; } /* 4chan .backlink */ /* (catalog card sizes live in the catalog section below, 4chan-exact) */ body .sideCatalogCell, body .small { font-size: x-small; } /* ---------- Rotating board banner (above the board title) ---------- Hide the native #bannerImage (board/thread/overboard templates only — catalog never had one) — buildBanner()/#rchan-bannerwrap is our own client-side replacement: it skips rendering entirely for boards with no REAL uploaded banner (never shows the engine's stock defaultBanner.png), and adds click-to-reroll. Showing both stacks two copies of the same image once a board has a real banner uploaded. */ #bannerImage { display: none !important; } #rchan-bannerwrap { text-align: center; margin-top: 70px; } #rchan-banner { max-width: min(300px, 92vw); height: auto; cursor: pointer; border: 1px solid #CFCFC4; box-shadow: 2px 2px 0 rgba(0,0,0,.1); background: #E6E6DA; } .theme_dark #rchan-banner { border-color: #2c2f36; } /* the banner absorbs the clear-the-nav offset the headers usually carry */ #rchan-bannerwrap + .boardHeader { margin-top: 8px; } body #rchan-bannerwrap + #catalogId { margin-top: .4em; } /* ---------- Per-board accent (hue set as --bah on by ux.js) ---------- Only the HUE is per-board; saturation/lightness stay on-palette per theme, so every board keeps the design system while reading as its own place. */ .rchan-accented .boardHeader p#labelName, .rchan-accented #catalogId, .rchan-accented #catalogId .title, .rchan-accented #labelBoard, .rchan-accented .rchan-empty-title { color: hsl(var(--bah, 210), 34%, 32%); } .rchan-accented body.theme_dark .boardHeader p#labelName, .rchan-accented body.theme_dark #catalogId, .rchan-accented body.theme_dark #catalogId .title, .rchan-accented body.theme_dark #labelBoard, .rchan-accented body.theme_dark .rchan-empty-title { color: hsl(var(--bah, 210), 26%, 72%); } .rchan-accented #rchan-formtoggle:hover, .rchan-accented .rchan-empty-cta:hover { background: hsl(var(--bah, 210), 42%, 36%); border-color: hsl(var(--bah, 210), 42%, 36%); color: #fff; } /* ---------- Board header (yotsuba: .boardTitle / .boardSubtitle) ---------- */ .boardHeader { text-align: center; clear: both; margin-top: 70px; } .boardHeader p#labelName, #catalogId { font-family: Tahoma, sans-serif; font-size: 1.75rem; font-weight: 700; letter-spacing: -2px; /* 4chan boardTitle — exact copy */ margin-top: 0; color: #393939; } /* body prefix: the engine's catalog.css loads after us and sets `#catalogId { margin: 1.5em 0 1em 0 }` at equal specificity — without the prefix this rule (and the old 70px one) never applied. */ body #catalogId { margin-top: 3em; } /* clear the fixed nav, like .boardHeader on board/thread pages */ #catalogId .title { font-family: inherit; font-size: 1.75rem; } #labelBoard { font-size: 1.75rem; font-family: inherit; } /* "/board/" link in the catalog heading */ .boardHeader p#labelDescription { font-size: x-small; color: #393939; } .theme_dark .boardHeader p#labelName, .theme_dark .boardHeader p#labelDescription, .theme_dark #catalogId { color: #c9ccd1; } /* cream: board/catalog title in the DISPLAY optical serif (New York Large, Semibold), with a tasteful raised letterpress (light top catch + soft drop). */ body.theme_cream .boardHeader p#labelName, body.theme_cream #catalogId, body.theme_cream #catalogId .title, body.theme_cream #labelBoard { font-family: "New York Large", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.5px; /* letterpress: crisp white edge-catch below (no blur), warm ambient drop below with more blur than offset. Warmed black so it reads as depth on the ivory, not a grey sticker. */ text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 2px 3px rgba(42,39,33,.12); } /* cream: thread subjects in Arial (bold), keeping their hue */ body.theme_cream .labelSubject { font-family: "Liberation Sans", "Arial", "sans-serif"; font-weight: 700; } /* board title (#labelName, index/thread) doubles as a one-click refresh. The class is added by ux.js only where it wires the handler (never where the title is already a link), so the affordance shows exactly where it works. */ #labelName.rchan-titlerefresh { cursor: pointer; transition: color .15s ease; } /* :root + !important: the per-theme title colours (e.g. html.rchan-warmdark .boardHeader p#labelName { color:… !important }) are (1,2,2) !important rules declared later — this must be a MORE specific !important to shift on hover. :root lifts it to (1,3,0). --accent falls back to the site red. */ :root #labelName.rchan-titlerefresh:hover { color: var(--accent, #c8102e) !important; } /* ---------- Posts (yotsuba: div.post / div.reply / div.op) ---------- */ .postCell { margin: 4px 0; } /* replies: shrink-wrapped cell, border right+bottom only, on the page bg */ body .innerPost { background: #E6E6DA; border: 1px solid #CFCFC4; border-left: none; border-top: none; border-radius: 5px; padding: 2px; box-shadow: 2px 2px 0 rgba(0,0,0,.1); /* square shadow kept */ } /* the OP has no cell: it sits directly on the page background */ body .innerOP { background: transparent; border: none; box-shadow: none; padding: 0; } .innerPost:target, .innerOP:target { box-shadow: 0 0 0 2px #c8102e88; } /* ---- Canonical chan post flow (block + float, NOT flex) ---- Row 1: header (.postInfo/.opHead) — block, full width (the OP's DOM puts its file panel first; ux.js moves the header above it — fixOpHeaderOrder). Row 2: file-info line (.uploadDetails) — block, full width (engine default). Row 3: thumbnail floats left (engine: .imgLink/.uploadCell img float:left), message text starts at the thumb's TOP beside it and wraps to full width below a longer thumb. Flex was tried and reverted: a flex message column top-aligns with the file- info LINE (the panel is one flex item), leaving short messages floating mid-air right of the metadata. The float's old jank — one-word slivers next to huge thumbs — can't recur because thumbs are display-capped at 180px/42vw below, which always leaves a wide text column. flow-root contains the float inside the post box (padding-bottom kept the old display:table's breathing room). */ body .innerPost { display: flow-root; padding: 2px 6px 6px; } body .innerOP { display: flow-root; } /* message: blockquote-style indentation (4chan blockquote.postMessage) */ body .divMessage { display: block; margin: 13px 40px; word-break: break-word; overflow-wrap: anywhere; } /* cream: body copy in Arial 10pt (titles stay serif; body reads as plain sans). */ body.theme_cream .divMessage { font-family: "Liberation Sans", "Arial", "sans-serif"; font-size: 10pt; line-height: 1.5; color: #2A2620; /* warm charcoal, not #000 */ } /* header line: name green bold, subject blue bold, post No. black -> red hover */ .linkName, .labelName { color: #3a6b2e; font-weight: 700; } .labelSubject { color: #0d5b73; font-weight: 700; } .linkQuote, .linkSelf { color: #393939; } .linkQuote:hover, .linkSelf:hover { color: #c8102e !important; } /* quotes */ .greenText { color: #5b8a2b; } .redText { color: #b5341f; } .quoteLink, .panelBacklinks a { color: #8a2b1f !important; text-decoration: underline; } /* cream: greentext/redtext read as quoted PROSE — exactly the body register, differing in COLOUR only. The engine sets a font on .greenText that beats the inherited serif, so pull family/size/weight/style/tracking back from .divMessage. */ body.theme_cream .divMessage .greenText, body.theme_cream .divMessage .redText { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; font-style: normal !important; letter-spacing: normal !important; line-height: inherit !important; } /* file info in Courier. NOTE: no overflow/nowrap layers here — the engine already ellipsizes long filenames (.originalNameLink caps at 155px and expands to 100% on hover); clipping the parent broke that hover reveal, and overflow:hidden on .panelUploads would trap the floated thumbnail. */ .panelUploads, .opUploadPanel { font-family: "Courier New", Courier, monospace; } /* The engine's own posting.css supplies the canonical float layout (.imgLink { float:left }, .uploadCell img { float:left; margin-right:1em }, .uploadDetails block row) — nothing to override here. Click-to-expand is the one exception: a full-size image must NOT be floated (text would wrap beside a huge image again — the original jank); unfloat it so it takes the full post width and the message reflows below. */ .innerPost .imgLink:has(.imgExpanded), .innerOP .imgLink:has(.imgExpanded) { float: none; display: block; } /* thumbnails: never overflow */ .imgLink img, .imgExpanded { max-width: 100%; height: auto; } /* Thumbnail DISPLAY size, decoupled from source resolution. The engine regenerates LARGE thumbs (thumbSize 480 = a retina SOURCE); cap the on-screen box at 180px so a 480px thumb renders at ~2.6x density — crisp on any phone — without a wide thumb dominating the post or slivering the text beside it. (This also overrides posting.css's `.uploadCell img { max-width: 125px }`, meant for the compose-form preview but leaking onto every rendered thumbnail because domManipulator reuses
.) .imgExpanded is exempt — click-to-expand shows full size. Mobile cap (42vw) below. */ body .innerPost .uploadCell img:not(.imgExpanded), body .innerOP .uploadCell img:not(.imgExpanded) { max-width: 180px !important; max-height: 180px !important; width: auto !important; height: auto !important; } @media (max-width: 599px) { body .innerPost .uploadCell img:not(.imgExpanded), body .innerOP .uploadCell img:not(.imgExpanded) { max-width: 42vw !important; max-height: 55vh !important; } } /* ---------- Form/table colours (cream) ---------- */ /* posting-form label cells (4chan table.postForm td:first-child = #98E + black border) */ body #postingForm th { background: #DCDCCF; color: #393939; font-weight: 700; border: 1px solid #393939; padding: 0 5px; font-size: .833rem; } /* page list (4chan div.pagelist: cell bg, right+bottom border, 13px) */ body .pageLink, body #divPages a, body .pagesDiv a { font-size: .8125rem; background: #E6E6DA; border-right: 1px solid #CFCFC4; border-bottom: 1px solid #CFCFC4; padding: 3px 7px; display: inline-block; margin: 0 2px 2px 0; } /* board nav — 13px, roomy spacing (per request; 4chan has 9pt). The engine pins nav to the top with a hardcoded height:18px and a blue bg; give the taller bar a real (auto) height, cream colours, and push the page content + side catalog down by the new ~42px so nothing sits underneath. */ body nav, body #dynamicHeader { font-size: .8125rem; height: auto; box-sizing: border-box; /* engine sets width:100%; without this the 6px side padding overflows the viewport -> h-scrollbar */ padding: 4px 6px 6px 6px; background: #E6E6DA; border-bottom: 1px solid #CFCFC4; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); /* subtle lift off the page — it's a fixed bar, give it some elevation */ } /* icon-only nav at ALL widths: the engine paints text labels via ::after (#navLinkHome::after{content:'home'} etc.) and only blanks them in its <=812px media query — blank them globally, plus the "[ / / ]" separators */ body #navLinkSpan a::after, body #navOptionsSpan a::after { content: ''; } #navLinkSpan > span, #navOptionsSpan > span { display: none; } /* With the ::after labels blanked, the engine's glyph-spacing rule (`#navLinkSpan .coloredIcon:before { margin-right: .25em }`) pads nothing but air INSIDE each anchor: the hover/hit box and tooltip anchor extend ~4px right of the visible glyph, so highlight != glyph (offset ring). Zero it on every theme. */ body #navLinkSpan .coloredIcon::before, body #navOptionsSpan .coloredIcon::before { margin-right: 0; } body #dynamicHeader a, body nav a { display: inline-block; vertical-align: middle; } /* kill global.css's `nav span, nav a { margin: 0 .2em }` */ body nav span, body nav a, body #dynamicHeader span, body #dynamicHeader a { margin: 0; } /* nav layout: board links pinned LEFT, navLinkSpan (site links + theme picker) pinned RIGHTMOST, settings just inside it. DOM order is navLinkSpan, navBoardsSpan, navOptionsSpan — flex `order` swaps them without touching the engine markup (its float:left/right rules are ignored under flex). */ /* left:0 — the engine's nav is position:fixed with no `left`, so it inherits the body's 5px side padding as a phantom left offset */ body nav, body #dynamicHeader { display: flex !important; flex-wrap: wrap; align-items: center; left: 0; } body #navBoardsSpan { order: 0; margin-right: auto !important; } body #navOptionsSpan { order: 1; margin-right: 8px; } body #navLinkSpan { order: 2; } /* thread status line: rides the nav between boards (left) and the right cluster; its own auto right-margin splits the free space with boards', landing it ~centered */ #rchan-threadstat { order: 0; margin-right: auto; padding: 0 18px; /* guaranteed gap to the nav clusters even when the flex auto-margins collapse */ font-size: x-small; font-weight: 700; opacity: .85; white-space: nowrap; align-self: center; display: inline-flex; align-items: center; } #rchan-threadstat .rchan-ts-seg { display: inline-flex; align-items: center; gap: 3px; cursor: default; } #rchan-threadstat .rchan-ts-seg svg { display: block; flex: none; opacity: .7; } #rchan-threadstat .rchan-ts-dot { margin: 0 6px; opacity: .55; } /* ================= Cream navbar: normalized fixed-box flex ================== The right cluster (galbtn/expandbtn/findbtn + #navLinkSpan icons + theme : match the box height, set slightly apart from the icons */ body.theme_cream #themeSelector, html.rchan-warmdark #themeSelector { height: 28px; padding: 0 8px; margin-left: 12px; box-sizing: border-box; align-self: center; font-size: 12px; line-height: 1; } /* light cream: give the select the theme's surface + border (dark gets its colours from the warmdark `select` rule); style the option list on both. */ body.theme_cream #themeSelector { background: #E6E6DA; color: #393939; border: 1px solid #CFCFC4; cursor: pointer; } body.theme_cream #themeSelector:hover { background: #DCDCCF; border-color: #b7b7a8; } body.theme_cream #themeSelector option { background: #E6E6DA; color: #393939; } html.rchan-warmdark #themeSelector { cursor: pointer; } html.rchan-warmdark #themeSelector option { background: #2A2A28; color: #E8E6DF; } /* uniform hover target: soft surface behind the box */ body.theme_cream #navLinkSpan > a.coloredIcon:hover, body.theme_cream #rchan-galbtn:hover, body.theme_cream #rchan-expandbtn:hover, body.theme_cream #rchan-findbtn:hover { background: #DCDCCF; } html.rchan-warmdark #navLinkSpan > a.coloredIcon:hover, html.rchan-warmdark #rchan-galbtn:hover, html.rchan-warmdark #rchan-expandbtn:hover, html.rchan-warmdark #rchan-findbtn:hover { background: #363634; } /* status counters: one flex item, vertically centered, quiet */ body.theme_cream #rchan-threadstat, html.rchan-warmdark #rchan-threadstat { align-self: center; font-size: 11px; } /* mobile twin of the status line: in-flow strip under the OP (see mobile block) */ #rchan-mstats { display: none; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 6px 4px; padding: 4px 8px; font-size: x-small; font-weight: 700; opacity: .9; background: #E6E6DA; border: 1px solid #CFCFC4; } #rchan-mstats .rchan-ts-seg { display: inline-flex; align-items: center; gap: 3px; } #rchan-mstats .rchan-ts-seg svg { display: block; flex: none; opacity: .7; } #rchan-mstats .rchan-ts-dot { margin: 0 5px; opacity: .55; } .theme_dark #rchan-mstats { background: #1f2126; border-color: #2c2f36; } /* lifecycle chips (bump limit / cyclic / page position) */ .rchan-ts-chip, .rchan-flagchip { display: inline-block; padding: 0 6px; vertical-align: middle; background: #DCDCCF; color: #393939; border: 1px solid #CFCFC4; font-size: x-small; font-weight: 700; white-space: nowrap; cursor: default; } .rchan-flagchip { margin-left: 5px; } .rchan-ts-chip.rchan-ts-warn, .rchan-flagchip.rchan-ts-warn { background: #c8102e; color: #fff; border-color: #c8102e; } .theme_dark .rchan-ts-chip, .theme_dark .rchan-flagchip { background: #262a31; color: #c9ccd1; border-color: #333; } .theme_dark .rchan-ts-chip.rchan-ts-warn, .theme_dark .rchan-flagchip.rchan-ts-warn { background: #8f0c21; color: #fff; border-color: #8f0c21; } html body { margin-top: 36px; } /* clear the fixed nav */ body #sideCatalogDiv { top: 36px; height: calc(100vh - 36px); } /* #rchan-nav is now a full-width sticky FOOTER bar (was a floating corner stack, needed no clearance) — give the page bottom room so the global footer (Rules/Contact) and the last post/reply box aren't hidden under it. */ html body { padding-bottom: 60px; box-sizing: border-box; } /* footer (4chan #absbot: x-small) */ body footer { font-size: x-small; } /* ---------- Dark theme (selectable) ---------- */ body.theme_dark, .theme_dark { background: #16171b !important; color: #c9ccd1 !important; } .theme_dark a { color: #7fb0e0; } .theme_dark .innerPost, .theme_dark .catalogCell, .theme_dark .sideCatalogCell, .theme_dark .markedPost, .theme_dark #quick-reply table, .theme_dark #postingForm, .theme_dark #postingTable, .theme_dark #postingForm td, .theme_dark .floatingMenu, .theme_dark #newPostFieldset, .theme_dark #divLatestPosts .latestPostCell, .theme_dark .topBoards a { background: #1f2126 !important; color: #c9ccd1 !important; border: 1px solid #2c2f36 !important; } .theme_dark .innerPost { border-left: none !important; border-top: none !important; } .theme_dark .innerOP { background: transparent !important; border: none !important; } .theme_dark #postingForm th, .theme_dark .modalTableBody th { background: #262a31 !important; color: #c9ccd1 !important; border-color: #2c2f36 !important; } .theme_dark nav, .theme_dark #dynamicHeader { background: #1f2126 !important; } .theme_dark .divMessage { color: #c9ccd1 !important; } .theme_dark .greenText { color: #8ec07c !important; } .theme_dark .redText { color: #e06c75 !important; } .theme_dark .labelSubject { color: #79c0ff !important; } .theme_dark .linkName, .theme_dark .labelName { color: #8ec07c !important; } .theme_dark .linkQuote, .theme_dark .linkSelf { color: #c9ccd1; } .theme_dark .quoteLink, .theme_dark .panelBacklinks a { color: #e0987f !important; } .theme_dark input, .theme_dark textarea, .theme_dark select { background: #14151a !important; color: #c9ccd1 !important; border: 1px solid #333 !important; } .theme_dark .pageLink, .theme_dark #divPages a { background: #1f2126; border-color: #2c2f36; } /* ---------- Homepage: "Your threads" chips ---------- */ #rchan-yours { max-width: 720px; margin: 12px auto 0; } #rchan-yours-head { font-size: .833rem; font-weight: 700; margin-bottom: 5px; text-align: center; } .rchan-yours-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .rchan-yours-chip { display: inline-block; max-width: 260px; padding: 3px 10px; cursor: pointer; background: #E6E6DA; color: #393939; border: 1px solid #CFCFC4; font: inherit; font-size: x-small; font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rchan-yours-chip:hover { border-color: #c8102e; color: #c8102e; } .rchan-yours-chip.rchan-yours-unread { border-color: #2ea043; box-shadow: inset 3px 0 0 #2ea043; } .theme_dark .rchan-yours-chip { background: #262a31; color: #c9ccd1; border-color: #333; } .theme_dark .rchan-yours-chip:hover { border-color: #e06c75; color: #e06c75; } .theme_dark .rchan-yours-chip.rchan-yours-unread { border-color: #2ea043; } /* ---------- Site-wide presence ("N anons browsing now") ---------- */ #rchan-sitestat { text-align: center; margin: 10px auto 2px; font-size: .833rem; font-weight: 700; opacity: .85; } #rchan-sitestat-nav { order: 0; margin-right: auto; padding: 0 18px; font-size: x-small; font-weight: 700; opacity: .85; white-space: nowrap; align-self: center; display: inline-flex; align-items: center; gap: 3px; cursor: default; } #rchan-sitestat-nav svg { display: block; flex: none; opacity: .7; } .rchan-sitedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ea043; vertical-align: baseline; margin-right: 2px; animation: rchan-pulse 2.2s ease-in-out infinite; } @keyframes rchan-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (max-width: 640px) { #rchan-sitestat-nav { display: none; } } /* ---------- Back office: login / account / management pages ---------- Every reader surface got the design system; these were still raw engine chrome (and unreadable in dark). All of them share #settingsFieldset (login also wraps it in #settingsWrapper), so one keyed pass covers login, registration, recovery, account, board + global management. */ #settingsWrapper { max-width: 640px; margin: 26px auto; padding: 0 10px; } #settingsFieldset { max-width: 640px; margin: 26px auto; display: block; border: 1px solid #CFCFC4; background: #E6E6DA; box-shadow: 4px 4px 0 rgba(0,0,0,.18); padding: 14px 18px 18px; } #settingsWrapper #settingsFieldset { margin: 0 0 18px; max-width: none; } #settingsFieldset legend { font-weight: 700; font-size: .9rem; padding: 2px 12px; background: #DCDCCF; border: 1px solid #CFCFC4; } #settingsFieldset form { margin: 10px 0; padding: 10px 0 4px; border-top: 1px dashed #CFCFC4; } #settingsFieldset form:first-of-type { border-top: 0; } #settingsFieldset input[type=text], #settingsFieldset input[type=password], #settingsFieldset input[type=email], #settingsFieldset input[type=number], #settingsFieldset select, #settingsFieldset textarea { box-sizing: border-box; margin: 4px 0; padding: 6px 8px; max-width: 100%; border: 1px solid #CFCFC4; background: #fff; color: #393939; } #settingsFieldset input.loginField, #settingsFieldset input.registerField, #settingsFieldset input.recoverField { display: block; width: 100%; } #settingsFieldset button, #settingsFieldset input[type=submit] { cursor: pointer; padding: 5px 16px; margin: 6px 4px 6px 0; border: 1px solid #CFCFC4; background: #DCDCCF; color: #393939; font: inherit; font-size: .833rem; font-weight: 700; } #settingsFieldset button:hover, #settingsFieldset input[type=submit]:hover { background: #c8102e; color: #fff; border-color: #c8102e; } #settingsFieldset .captchaImage { background: #fff; border: 1px solid #CFCFC4; display: block; margin: 6px 0; } #settingsFieldset a { text-decoration: underline; } #settingsFieldset hr { border: 0; border-top: 1px solid #CFCFC4; } .theme_dark #settingsFieldset { background: #1f2126; border-color: #2c2f36; color: #c9ccd1; } .theme_dark #settingsFieldset legend { background: #262a31; border-color: #2c2f36; color: #c9ccd1; } .theme_dark #settingsFieldset form { border-color: #2c2f36; } .theme_dark #settingsFieldset input[type=text], .theme_dark #settingsFieldset input[type=password], .theme_dark #settingsFieldset input[type=email], .theme_dark #settingsFieldset input[type=number], .theme_dark #settingsFieldset select, .theme_dark #settingsFieldset textarea { background: #0f1013; color: #d7dae0; border-color: #2c2f36; } .theme_dark #settingsFieldset button, .theme_dark #settingsFieldset input[type=submit] { background: #262a31; color: #c9ccd1; border-color: #333; } .theme_dark #settingsFieldset hr { border-color: #2c2f36; } /* ---------- Front page: board list as cards ---------- */ #divBoards.topBoards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } #divBoards.topBoards a { display: inline-block; padding: 8px 14px; background: #E6E6DA; border: 1px solid #CFCFC4; border-left: none; border-top: none; box-shadow: 2px 2px 0 rgba(0,0,0,.1); font-weight: 700; } /* ---------- Homepage: active threads strip ---------- */ #rchan-active { text-align: center; margin: 14px auto 4px; max-width: 940px; } #rchan-active-head { font-weight: 700; font-size: .833rem; margin-bottom: 7px; } .rchan-active-cell { display: inline-flex; align-items: center; gap: 8px; text-align: left; margin: 4px; padding: 5px 10px 5px 5px; max-width: 285px; background: #E6E6DA; border: 1px solid #CFCFC4; border-left: none; border-top: none; box-shadow: 2px 2px 0 rgba(0,0,0,.1); vertical-align: top; } .rchan-active-cell img { width: 44px; height: 44px; object-fit: cover; flex: none; } .rchan-active-text { min-width: 0; } .rchan-active-title { display: block; font-weight: 700; max-width: 215px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rchan-active-meta { display: block; font-size: x-small; opacity: .85; } .theme_dark .rchan-active-cell { background: #1f2126; border-color: #2c2f36; } /* ---------- Nav buttons: horizontal sticky footer bar ---------- */ #rchan-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 6px 10px; } #rchan-nav button { width: 40px; height: 40px; border: 0; cursor: pointer; font-size: 1.125rem; padding: 0; display: flex; align-items: center; justify-content: center; background: #274a6b; color: #fff; box-shadow: 2px 2px 0 rgba(0,0,0,.1); opacity: .82; transition: opacity .12s ease; } #rchan-nav button svg { display: block; } #rchan-nav button:hover { opacity: 1; } #rchan-nav button.rchan-on { background: #2ea043; opacity: 1; } /* notifications enabled */ /* ---------- "(You)" — your own posts + quotes pointing at them ---------- */ .innerPost.rchan-you { box-shadow: inset 4px 0 0 #c8102e, 2px 2px 0 rgba(0,0,0,.1) !important; } .innerOP.rchan-you { box-shadow: inset 4px 0 0 #c8102e !important; } .theme_cream .rchan-you { background: #f4e9e3 !important; } .theme_dark .rchan-you { background: #2a2126 !important; } .quoteLink[data-you] { font-weight: 700; } /* ---------- Hover-zoom preview (image + video pop-out) ---------- */ #rchan-zoom, #rchan-vidzoom { position: fixed; z-index: 10000; pointer-events: none; display: none; max-width: 90vw; max-height: 90vh; box-shadow: 4px 4px 0 rgba(0,0,0,.18); background: #0008; } /* ---------- Catalog last-replies hover preview (4chan-style) ---------- */ #rchan-catprev { position: fixed; z-index: 10003; width: 360px; pointer-events: auto; display: none; text-align: left; font-size: .833rem; box-sizing: border-box; background: #EEEEE4; border: 1px solid #CFCFC4; box-shadow: 0 8px 24px rgba(0,0,0,.45); padding: 4px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .15s ease; } #rchan-catprev.rchan-catprev-show { opacity: 1; } .rchan-catprev-post { background: #E6E6DA; border: 1px solid #CFCFC4; border-left: none; border-top: none; padding: 2px 6px; margin: 3px 0; } .rchan-catprev-name { color: #3a6b2e; font-weight: 700; } .rchan-catprev-id { color: #393939; font-size: x-small; } .rchan-catprev-msg { margin: 2px 0 1px; word-break: break-word; overflow-wrap: anywhere; max-height: 6em; overflow: hidden; } .rchan-catprev-empty { padding: 4px 6px; font-size: x-small; opacity: .85; } .theme_dark #rchan-catprev { background: #16171b; border-color: #2c2f36; } .theme_dark .rchan-catprev-post { background: #1f2126; border-color: #2c2f36; } .theme_dark .rchan-catprev-id { color: #c9ccd1; } /* ---------- Instant styled tooltip (icon labels) ---------- */ #rchan-tip { position: fixed; z-index: 10001; display: none; pointer-events: none; background: #2e2e2e; color: #fdfdfb; font-size: x-small; font-weight: 700; line-height: 1.25; padding: 5px 9px; white-space: nowrap; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; box-shadow: 4px 4px 0 rgba(0,0,0,.18); border: 1px solid rgba(0,0,0,.15); } .theme_dark #rchan-tip { background: #0f1013; color: #e6e8ec; border-color: #2c2f36; } .coloredIcon[data-tooltip] { cursor: pointer; } /* ---------- Catalog toolbar (sort + card size) + native search tools ---------- */ /* One row, two structural groups: native #divTools (search/refresh — DOM-moved into the bar by buildCatalogTools) pinned LEFT, #rchan-catctrl (count + sort/size/view) pinned RIGHT via space-between — deliberately NOT an auto margin, which theme rules (warmdark's `#divTools { margin: 0 !important }`, the themes' catcount autos) can silently defeat. catctrl's margin-left:auto keeps it right even if divTools is missing. flex-wrap keeps phones sane: the native tools take their own line and the controls wrap under. */ #rchan-cattools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin: 10px 8px 2px; font-size: .833rem; font-weight: 700; } /* CLS: router-injected placeholder (see nginx sub_filter) reserving this bar's space before buildCatalogTools() populates it — see that function for how the two IDs hand off. min-height only; margin matches #rchan- cattools itself so the reserved block sits in the same place. */ #rchan-cattools-slot { display: block; min-height: 124px; margin: 10px 8px 2px; box-sizing: border-box; } #rchan-cattools #divTools { margin: 0; text-align: left; font-weight: 400; } #rchan-catctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-left: auto; } #rchan-cattools label { margin: 0; } #rchan-cattools select { margin-left: 5px; padding: 3px 8px; font: inherit; cursor: pointer; } #divTools { text-align: center; margin: 4px 0 2px; font-size: .833rem; } #divTools input[type=text] { padding: 3px 8px; margin: 0 4px; } #divTools #catalogRefreshButton { padding: 3px 10px; cursor: pointer; margin: 0 4px; font: inherit; } /* deep search: reply-level board search toggle + status */ #rchan-deeplab { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: x-small; font-weight: 700; cursor: pointer; vertical-align: middle; } #rchan-deepnote { font-size: x-small; opacity: .8; margin-left: 8px; } .rchan-deephide { display: none !important; } .theme_dark #divTools #catalogRefreshButton { background: #1f2126; color: #c9ccd1; border: 1px solid #333; } /* ---------- Catalog grid: 4chan catalog_yotsuba_b_new.705.css, exact ---------- 4chan threads are BARE inline-blocks on the page background — no card box, no border. The shadow sits on the THUMBNAIL (4chan: 0 0 5px blur; ours: square per the system). meta = 11px "R / I / P" line; teaser padded 15px. */ /* LynxChan reuses #divThreads on thread/board pages too (4chan's #threads is catalog-only) — scope the centering to when it actually holds catalog cells */ body #divThreads:has(.catalogCell) { padding: 20px 0; text-align: center; } body .catalogCell { background: transparent; border: none; box-shadow: none; vertical-align: top; display: inline-block; word-wrap: break-word; overflow: hidden; margin: 5px 2px 20px; padding: 5px 0 3px 0; position: relative; cursor: pointer; /* the whole card opens the thread — onCatCellOpen, every theme */ width: 180px; /* 4chan .extended-small (teaser shown) */ height: auto; max-height: 320px; } body .catalogCell .linkThumb img { display: block; margin: auto; min-width: 50px; min-height: 50px; box-shadow: 2px 2px 0 rgba(0,0,0,.1); /* square shadow kept (4chan: 0 0 5px .25) */ } body .catalogCell .threadStats { cursor: help; font-size: .6875rem; line-height: 0; margin: 2px 0 1px; } body .catalogCell .labelSubject, body .catalogCell .divMessage { display: block; padding: 0 15px; margin: 0; font-size: .833rem; } body .catalogCell .labelSubject { font-weight: 700; padding: 0; } /* Size dropdown (4chan's small/large modes; large = default) */ .rchan-cat-s .catalogCell { width: 165px; max-height: 250px; } .rchan-cat-s .linkThumb img { max-width: 150px; max-height: 150px; } .rchan-cat-l .catalogCell { width: 270px; max-height: 410px; } .rchan-cat-l .linkThumb img { max-width: 250px; max-height: 250px; } /* keep big cards from blowing up narrow screens */ @media (max-width: 640px) { .rchan-cat-l .catalogCell, .rchan-cat-xl .catalogCell { width: 46vw; } .rchan-cat-l .linkThumb img, .rchan-cat-xl .linkThumb img { max-width: 42vw; max-height: 42vw; } } /* ================= Infinite scroll: generic ornaments ======================= Base layer so index/catalog infinite scroll looks reasonable under EVERY theme; Academia's more specific `.theme_academia .rchan-*` rules (further down) refine these further and win on specificity. Keyframes are declared once here — @keyframes aren't selector-scoped, so Academia's rules just reference them by name. ============================================== */ .rchan-pagedivider { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0; color: #6b6b66; font-size: .8125rem; } .rchan-pagedivider::before, .rchan-pagedivider::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: #CFCFC4; } .rchan-scroll-loader { text-align: center; padding: 18px 0; } .rchan-scroll-loader .rchan-ellipsis { font-size: 22px; color: #6b6b66; letter-spacing: .18em; line-height: 1; } .rchan-scroll-loader .rchan-ellipsis span { animation: rchan-dot 1.2s infinite; } .rchan-scroll-loader .rchan-ellipsis span:nth-child(2) { animation-delay: .2s; } .rchan-scroll-loader .rchan-ellipsis span:nth-child(3) { animation-delay: .4s; } @keyframes rchan-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } } .rchan-scroll-end { text-align: center; padding: 24px 0; text-transform: uppercase; letter-spacing: .18em; font-size: .6875rem; color: #6b6b66; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .rchan-scroll-loader .rchan-ellipsis span { animation: none; opacity: .6; } } /* new threads/cards fade+rise in as they're appended or revealed */ .opCell.rchan-appeared, .catalogCell.rchan-appeared { animation: rchan-rise 240ms cubic-bezier(.2,.8,.2,1) both; } @keyframes rchan-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .opCell.rchan-appeared, .catalogCell.rchan-appeared { animation: none; } } /* Click-to-embed external video: one inline ▶ affordance + the player it opens */ .rchan-embed-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 18px; height: 18px; margin: 0 2px; padding: 0; cursor: pointer; border: none; border-radius: 4px; background: rgba(200,16,46,.12); color: #c8102e; transition: background .12s; } .rchan-embed-btn:hover, .rchan-embed-btn.rchan-embed-on { background: rgba(200,16,46,.24); } .rchan-embed { position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; margin: 6px 0; } .rchan-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; background: #000; } /* Dead quote (>>NNN pointing at a deleted/pruned post) — muted, not alarming */ .rchan-deadquote { display: inline-block; padding: 4px 8px; font-style: italic; opacity: .6; font-size: .85em; } /* Progressive thread rendering: keep scroll anchoring on so above-viewport inserts (WS pushes, late images) never shove the reader's content down. */ body, .divPosts { overflow-anchor: auto; } /* "N earlier posts" stub — one quiet clickable bar, only on long threads */ .rchan-earlier-stub { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 8px auto 12px; padding: 7px 16px; width: fit-content; cursor: pointer; border: 1px solid #d5d5c8; border-radius: 999px; background: transparent; color: #6b6b66; font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; user-select: none; transition: background .12s, border-color .12s; } .rchan-earlier-stub:hover, .rchan-earlier-stub:focus-visible { background: rgba(0,0,0,.05); border-color: #b8b8a8; outline: none; } .theme_dark .rchan-earlier-stub { border-color: #2c2f36; color: #8b929e; } .theme_dark .rchan-earlier-stub:hover, .theme_dark .rchan-earlier-stub:focus-visible { background: rgba(255,255,255,.06); border-color: #3a3f47; } html.rchan-warmdark .rchan-earlier-stub { border-color: #454542; color: #9b9b94; } html.rchan-warmdark .rchan-earlier-stub:hover, html.rchan-warmdark .rchan-earlier-stub:focus-visible { background: rgba(255,255,255,.05); border-color: #56564f; } .theme_dark .rchan-pagedivider, .theme_dark .rchan-scroll-loader .rchan-ellipsis, .theme_dark .rchan-scroll-end { color: #8b929e; } .theme_dark .rchan-pagedivider::before, .theme_dark .rchan-pagedivider::after { background: #2c2f36; } html.rchan-warmdark .rchan-pagedivider, html.rchan-warmdark .rchan-scroll-loader .rchan-ellipsis, html.rchan-warmdark .rchan-scroll-end { color: #9b9b94; } html.rchan-warmdark .rchan-pagedivider::before, html.rchan-warmdark .rchan-pagedivider::after { background: #454542; } /* catalog markers are inserted OUTSIDE #divThreads (a CSS grid there) so they never become a fixed-height grid row; index markers sit inline in normal block flow (#divThreads isn't a grid on index pages) and need no such care. */ .rchan-cat-scroll-marker { margin: 8px 16px; } /* ================= Cream catalog: uniform grid + fixed-height cards ========== The default catalog packs inline-block cells sized from content → ragged rows and orphan gaps. Give the Cream themes a real grid with fixed-height cards: thumb band → subject → teaser (fills + scrolls) → stat line pinned at bottom. Nothing sizes from content. Scoped to the Cream themes via :is(). ========== */ :is(body.theme_cream, html.rchan-warmdark body) #divThreads:has(.catalogCell) { display: grid !important; gap: 16px; padding: 20px 16px !important; text-align: left; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 360px; } :is(body.theme_cream, html.rchan-warmdark body).rchan-cat-s #divThreads:has(.catalogCell) { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: 260px; } :is(body.theme_cream, html.rchan-warmdark body) .catalogCell { display: flex !important; flex-direction: column; width: auto !important; height: 100%; max-height: none !important; min-height: 0; margin: 0 !important; padding: 0 !important; overflow: hidden; position: relative; text-align: left; cursor: pointer; } /* thumb band: fixed height, cover-cropped for uniform cards */ :is(body.theme_cream, html.rchan-warmdark body) .catalogCell > a.linkThumb { order: 0; flex: none; display: block; width: 100%; height: 180px; overflow: hidden; } :is(body.theme_cream, html.rchan-warmdark body).rchan-cat-s .catalogCell > a.linkThumb { height: 120px; } :is(body.theme_cream, html.rchan-warmdark body) .catalogCell > a.linkThumb img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; object-fit: cover; display: block; margin: 0 !important; box-shadow: none !important; } /* subject line (the

holding .labelSubject) */ :is(body.theme_cream, html.rchan-warmdark body) .catalogCell > p:not(.threadStats) { order: 1; flex: none; margin: 0; padding: 6px 10px 0; line-height: 1.25; } /* teaser: fills the remaining space and scrolls in place (long OPs no longer clip) */ :is(body.theme_cream, html.rchan-warmdark body) .catalogCell > .divMessage { order: 2; flex: 1 1 auto; min-height: 0; margin: 0; padding: 4px 10px 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; font-size: .833rem; line-height: 1.42; text-align: left; } :is(body.theme_cream, html.rchan-warmdark body) .catalogCell > .divMessage::-webkit-scrollbar { width: 6px; } :is(body.theme_cream, html.rchan-warmdark body) .catalogCell > .divMessage::-webkit-scrollbar-track { background: transparent; } body.theme_cream .catalogCell > .divMessage { scrollbar-color: #CFCFC4 transparent; } body.theme_cream .catalogCell > .divMessage::-webkit-scrollbar-thumb { background: #CFCFC4; border-radius: 3px; } html.rchan-warmdark .catalogCell > .divMessage { scrollbar-color: #454542 transparent; } html.rchan-warmdark .catalogCell > .divMessage::-webkit-scrollbar-thumb { background: #454542; border-radius: 3px; } /* stat line pinned at the bottom (teaser's flex:1 pushes it down) */ :is(body.theme_cream, html.rchan-warmdark body) .catalogCell > p.threadStats { order: 3; flex: none; margin: 0 !important; padding: 5px 10px; line-height: 0; border-top: 1px solid rgba(128,128,120,.28); font-size: .6875rem; } /* ---------- Work-safe mode: media blurred until hovered ---------- */ body.rchan-ws .imgLink img, body.rchan-ws .linkThumb img, body.rchan-ws .imgExpanded, body.rchan-ws video:not(#rchan-vidzoom), body.rchan-ws #rchan-banner, body.rchan-ws .dragAndDropThumb, body.rchan-ws .rchan-active-cell img, body.rchan-ws .rchan-gal-thumb img, body.rchan-ws .flagPreview { filter: blur(12px); transition: filter .12s ease; } body.rchan-ws .imgLink img:hover, body.rchan-ws .linkThumb img:hover, body.rchan-ws .imgExpanded:hover, body.rchan-ws video:hover, body.rchan-ws #rchan-banner:hover, body.rchan-ws .dragAndDropThumb:hover, body.rchan-ws .rchan-active-cell img:hover, body.rchan-ws .rchan-gal-thumb img:hover { filter: none; } /* deliberate viewing surfaces stay clear: gallery main stage + hover pop-outs */ body.rchan-ws .rchan-gal-main img, body.rchan-ws .rchan-gal-main video, body.rchan-ws #rchan-zoom { filter: none; } /* ---------- Catalog: dim threads you've already read ---------- */ .catalogCell.rchan-visited { opacity: .5; transition: opacity .15s ease; } .catalogCell.rchan-visited:hover { opacity: 1; } /* ---------- Catalog: watch button on every card ---------- */ .catalogCell { position: relative; } .rchan-catwatch { position: absolute; top: 2px; right: 2px; z-index: 2; border: 0; cursor: pointer; padding: 4px; /* min-width/height (Lighthouse tap-targets wants >=24px; padding+icon alone landed at 22px). 28px instead of exactly 24px — landing precisely on the threshold still failed the audit (sub-pixel/rounding at the boundary), so a few px of margin actually clears it. Icon's own drawn size unchanged. */ min-width: 28px; min-height: 28px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; line-height: 0; opacity: 0; transition: opacity .12s ease; } /* hover-reveal only on real hover-capable pointers — an ancestor :hover-only reveal on touch trips WebKit's "first tap = hover, second tap = click" quirk for EVERY tap on a descendant (incl. the thumbnail). Touch/no-hover shows it at rest instead of gating on a hover that touch can't sustain anyway. */ @media (hover: hover) and (pointer: fine) { .catalogCell:hover .rchan-catwatch { opacity: 1; } } @media (hover: none), (pointer: coarse) { .rchan-catwatch { opacity: 1; } } .rchan-catwatch:focus-visible, .rchan-catwatch.rchan-on { opacity: 1; } .rchan-catwatch:hover { background: #c8102e; } .rchan-catwatch.rchan-on { color: #2ea043; } .rchan-catwatch svg { display: block; } @media (hover: none) { .rchan-catwatch { opacity: .85; } } /* no hover to reveal it on touch */ /* ---------- Empty board state: an invitation, not a void ---------- */ #rchan-empty { text-align: center; margin: 70px auto 40px; max-width: 480px; } .rchan-empty-title { font-family: Tahoma, sans-serif; font-size: 1.75rem; font-weight: 700; letter-spacing: -2px; color: #393939; } .rchan-empty-sub { margin: 8px 0 18px; font-size: .833rem; opacity: .85; } .rchan-empty-cta { padding: 8px 22px; cursor: pointer; font: inherit; font-size: .833rem; font-weight: 700; border: 1px solid #CFCFC4; background: #E6E6DA; color: #393939; box-shadow: 2px 2px 0 rgba(0,0,0,.1); } .rchan-empty-cta:hover { background: #c8102e; color: #fff; border-color: #c8102e; } .theme_dark .rchan-empty-title { color: #c9ccd1; } .theme_dark .rchan-empty-cta { background: #262a31; color: #c9ccd1; border-color: #333; } /* ---------- Watcher unread badge (native counter, restyled) ---------- */ watcher.js appends a counter to #watcherButton and fills it only when watched threads have new replies — style the non-empty state as a red corner badge. */ #watcherButton { position: relative; } #watcherButton span:not(:empty) { position: absolute; top: -8px; right: -11px; background: #c8102e; color: #fff !important; font-family: "Liberation Sans", "Arial", "sans-serif"; font-size: .5625rem; font-weight: 700; line-height: 1; padding: 2px 4px; box-shadow: 1px 1px 0 rgba(0,0,0,.15); pointer-events: none; } /* ---------- Side catalog refresh (word swapped for SVG in ux.js) ---------- */ body #sideCatalogRefreshButton { display: inline-flex; align-items: center; padding: 2px 4px; background: none; border: none; cursor: pointer; color: #274a6b; } body #sideCatalogRefreshButton:hover { color: #c8102e; } .theme_dark #sideCatalogRefreshButton { color: #9fc4e8; } .theme_dark #sideCatalogRefreshButton:hover { color: #d6e8f8; } /* ---------- Icons legibility per theme ---------- */ .theme_dark .coloredIcon, .theme_dark .unhideButton, .theme_dark .embedButton, .theme_dark #showFormsButton, .theme_dark #favouriteButton, .theme_dark .watchButton { color: #9fc4e8 !important; } .theme_dark .coloredIcon:hover, .theme_dark .watchButton:hover, .theme_dark #favouriteButton:hover { color: #d6e8f8 !important; } .coloredIcon, .unhideButton, .embedButton, #favouriteButton, .watchButton { color: #274a6b; } .coloredIcon:hover, .watchButton:hover, #favouriteButton:hover { color: #c8102e; } .checkedFavouriteButton { color: #f2b21e !important; } /* favourited = gold, any theme */ #watcherButton, #galleryLink, #favouriteButton, .watchButton, .hideButton { cursor: pointer; } /* ---------- Quote hover-preview (tooltips.js div.quoteTooltip) ---------- */ .quoteTooltip { position: absolute; z-index: 10002; max-width: min(680px, 92vw); box-shadow: 4px 4px 0 rgba(0,0,0,.18); overflow: hidden; background: #E6E6DA; border: 1px solid #CFCFC4; } .quoteTooltip .innerPost, .quoteTooltip .innerOP { margin: 0 !important; box-shadow: none; display: block; border: none; background: #E6E6DA; } .theme_dark .quoteTooltip, .theme_dark .quoteTooltip .innerPost, .theme_dark .quoteTooltip .innerOP { background: #1f2126 !important; border-color: #2c2f36; } /* ---------- Poster ID pills ---------- */ /* posting.css (loads after us) paints .labelId white with a BLACK text-shadow outline + 5px radius — unreadable with our luminance-picked black text on light pills, and off-system. body prefix outranks it. */ body .labelId { text-shadow: none; border-radius: 0; display: inline-block; padding: 0 5px; line-height: 1.5; font-size: x-small; font-weight: 700; cursor: pointer; } /* Pill colour: hue comes per-ID from ux.js (--idh custom property); each theme renders it at its own muted sat/lightness so the SAME hue identity sits on-palette in cream and dark. !important beats the engine's inline background-color:#. */ body .labelId.rchan-idpill { background-color: hsl(var(--idh, 0), 28%, 66%) !important; color: #393939 !important; } .theme_dark .labelId.rchan-idpill { background-color: hsl(var(--idh, 0), 22%, 34%) !important; color: #c9ccd1 !important; } /* Click-to-highlight is native (posting.processIdLabel swaps the cell class innerPost -> markedPost) but markedPost was painted IDENTICALLY to a normal reply in both themes, so the feature was invisible. Give it the reply-cell structure (the class swap drops .innerPost styling) + a gold-bar tint. body.theme_cream out-specifies the injected head