/* ========================================================================== Sriracha custom.css Load this AFTER global.css and the active theme css (burichan/futaba/ sriracha) via extra_header.gohtml. It only overrides selectors that already exist in the official templates, so it survives upgrades. Tune the variables below first -- most of the visual change comes from just those. ========================================================================== */ :root { --sr-radius: 8px; --sr-gap: 10px; --sr-border: rgba(127, 127, 127, 0.35); --sr-accent: #0080d0; } /* Theme-specific tuning: only these blocks touch color, scoped per stylesheet so switching themes doesn't fight this file. Sriracha's own JS doesn't expose which theme is active as an attribute, so extra_header.gohtml's inline script mirrors it onto for us. If you ever remove that script, these rules simply stop matching and .op.post/.reply.post fall back to transparent (colorless, borders only) -- always safe, never broken. */ html[data-style="sriracha"] { --sr-op-bg: #161b22; --sr-reply-bg: #1c2128; --sr-muted: #8b949e; } html[data-style="burichan"] { --sr-op-bg: #eef2ff; --sr-reply-bg: #d6daf0; --sr-muted: #707070; } html[data-style="futaba"] { --sr-op-bg: #ffe; --sr-reply-bg: #f0e0d6; --sr-muted: #707070; } /* ---- Base type & rhythm ---------------------------------------------- */ html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; font-size: 15px; } .message { line-height: 1.55; margin: 0.6em 1em 0.4em; } /* ---- Post cards -------------------------------------------------------- .op.post and .reply.post are the two structural hooks that exist on every post in imgboard_post.gohtml. Cards + a left accent bar read as "modern" without touching any markup. */ .op.post, .reply.post { border-radius: var(--sr-radius); margin-bottom: var(--sr-gap); transition: border-color 0.15s ease; } .op.post { background: var(--sr-op-bg, transparent); border-left: 3px solid var(--sr-accent); padding: 10px 12px; } .reply.post { border-left: 3px solid var(--sr-border); padding: 8px 10px; } .reply.post:hover { border-left-color: var(--sr-accent); } /* reply.post lives inside a
, the doubledash cell is the ">>" gutter -- give it breathing room instead of the default cramped inline glyph */ .doubledash { color: var(--sr-muted); padding-right: 6px; } /* highlighted target post (deep-linked / hash-jumped to) */ .forumpost:target, .reply:target { border: 1px solid var(--sr-accent) !important; box-shadow: 0 0 0 1px var(--sr-accent); } /* ---- Post header line (.postinfo, in imgboard_post_label.gohtml) ----- */ .postinfo { font-size: 0.85em; color: var(--sr-muted); } .postername { color: #05714B; font-weight: 650; } .filetitle { color: var(--sr-accent); font-weight: 600; } .reflink a { opacity: 0.8; } .reflink a:hover { opacity: 1; } /* ---- Attachments (imgboard_post_attachment.gohtml) -------------------- */ .thumb { border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .attachmentinfo { font-size: 0.8em; color: var(--sr-muted); } /* ---- Omitted-posts / thread nav ---------------------------------------- */ .omittedposts { font-size: 0.85em; opacity: 0.75; } /* ---- Nav / admin bars --------------------------------------------------- */ .navbar, .adminbar { font-size: 0.85em; padding: 4px 0; } .logo { font-weight: 700; letter-spacing: -0.02em; } /* ---- Catalog (imgboard_catalog.gohtml) --------------------------------- If you keep the stock markup, this alone tightens it up. For a real grid, use catalog.gohtml below instead -- these rules also style that version's markup. */ .catalogindex { border: none !important; } .catalogindex td { border: none !important; padding: 6px !important; } .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sr-gap); margin-top: var(--sr-gap); } .catalog-card { background: var(--sr-op-bg, transparent); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); padding: 6px; text-align: center; overflow: hidden; transition: border-color 0.15s ease, transform 0.1s ease; } .catalog-card:hover { border-color: var(--sr-accent); transform: translateY(-2px); } .catalog-card img { max-width: 100%; max-height: 160px; border-radius: 4px; margin-bottom: 4px; } .catalog-card .catalog-replies { font-size: 0.75em; color: var(--sr-muted); } .catalog-card .catalog-teaser { font-size: 0.8em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---- Mobile ------------------------------------------------------------- */ @media all and (max-width: 600px) { .op.post, .reply.post { border-radius: 0; border-left-width: 3px; margin-left: -8px; margin-right: -8px; } .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }