/* ===================================================================== Sending Board One stylesheet for the whole site. The ASP version redeclared its styles inside every page, so a colour change meant editing 12 files. ===================================================================== */ /* --- tokens ---------------------------------------------------------- Everything colour-related is a custom property, which is what makes the campaign themes possible: a theme is one block of overrides, nothing else in the file changes. :root holds the DEFAULT theme (Noir). Every other theme is an override block below it. To make a different theme the default, move its slug onto the :root selector and set Theme::FALLBACK to match. -------------------------------------------------------------------- */ :root, [data-theme="noir"] { /* --- shared by every theme unless one deliberately overrides --- */ --up: #43cb8d; --down: #f0707d; --danger: #f0707d; --npc: #c2cddd; --npc-soft: rgba(194, 205, 221, 0.12); --npc-line: rgba(194, 205, 221, 0.34); --radius: 14px; --radius-sm: 9px; --gap: 1rem; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .22); --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --- Noir: the default theme --- */ --bg: #0a0c0e; --bg-soft: #101316; --surface: #15191d; --surface-2: #1c2126; --surface-hover: #242a31; --border: #2a3138; --border-strong: #3a434c; --text: #e8edf1; --text-dim: #9aa6b1; --text-faint: #6b7681; --accent: #5fc8d8; --accent-deep: #2f96a6; --accent-soft: rgba(95, 200, 216, 0.13); --accent-line: rgba(95, 200, 216, 0.33); --accent-strong: rgba(95, 200, 216, 0.22); --accent-hover: #82d8e5; --on-accent: #04161a; --glow: #16242a; --topbar-bg: rgba(10, 12, 14, .85); } /* --- campaign themes ------------------------------------------------- Set site-wide by a GM. The slug lands on . Only the tokens that differ from :root need listing. -------------------------------------------------------------------- */ [data-theme="DIA"] { --bg: #0a1412; --bg-soft: #0f1917; --surface: #171620; --surface-2: #272535; --surface-hover: #393950; --border: #3d1d26; --border-strong: #79152b; --text: #edf4f2; --text-dim: #b5c5c1; --text-faint: #86958f; --accent: #0e8f68; --accent-deep: #3d7a69; --accent-soft: rgba(14, 143, 104, 0.14); --accent-line: rgba(14, 143, 104, 0.35); --accent-strong: rgba(14, 143, 104, 0.24); --accent-hover: #3d7a69; --on-accent: #06100d; --glow: #a1142d; --topbar-bg: rgba(10, 20, 18, .85); --npc: #3d7a69; --npc-soft: rgba(14, 143, 104, 0.16); --npc-line: rgba(14, 143, 104, 0.16); } /* --- base ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: radial-gradient(1100px 600px at 50% -10%, var(--glow) 0%, transparent 70%), var(--bg); background-attachment: fixed; color: var(--text); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); padding: .1em .35em; border-radius: 4px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .muted { color: var(--text-dim); } .right { text-align: right; } .dot { color: var(--text-faint); padding: 0 .15em; } /* --- top bar --------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--topbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .topbar-inner { max-width: 1120px; margin: 0 auto; padding: .65rem 1rem; display: flex; align-items: center; gap: 1.25rem; } .brand { display: flex; align-items: center; gap: .55rem; font-weight: 680; font-size: 1.02rem; color: var(--text); letter-spacing: -0.015em; white-space: nowrap; } .brand:hover { text-decoration: none; color: var(--text); } /* The mark itself is an inline SVG in views/partials/brand.php - edit it there. Only its size is set here. */ .brand-mark { flex: none; display: block; } .brand-mark-sm { width: 26px; height: 26px; } .brand-mark-lg { width: 46px; height: 46px; } .topnav { display: flex; gap: .15rem; margin-right: auto; } .topnav a { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: var(--radius-sm); color: var(--text-dim); font-weight: 550; font-size: .92rem; } .topnav a:hover { background: var(--surface); color: var(--text); text-decoration: none; } .topnav a.is-active { color: var(--text); background: var(--accent-soft); } .badge { min-width: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 750; line-height: 1.25rem; text-align: center; } .badge[hidden] { display: none; } /* --- account menu ---------------------------------------------------- */ .menu { position: relative; } .menu-trigger { display: flex; align-items: center; gap: .55rem; padding: .3rem .55rem .3rem .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font: inherit; cursor: pointer; transition: background .15s, border-color .15s; } .menu-trigger:hover { background: var(--surface-hover); border-color: var(--border-strong); } .menu-trigger-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; max-width: 11rem; } .menu-trigger-text strong { font-size: .87rem; font-weight: 600; } .menu-trigger-text strong, .menu-trigger-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-trigger-text small { font-size: .76rem; color: var(--text-faint); } .menu-caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: var(--text-faint); margin-top: 3px; flex: none; } .menu-panel { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 15rem; padding: .35rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1px; } .menu-panel[hidden] { display: none; } .menu-heading { padding: .5rem .65rem; font-size: .8rem; color: var(--text-dim); border-bottom: 1px solid var(--border); margin-bottom: .25rem; } .menu-heading strong { color: var(--text); } .menu-panel a, .menu-signout { display: block; width: 100%; padding: .5rem .65rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .menu-panel a:hover, .menu-signout:hover { background: var(--surface-hover); text-decoration: none; } .menu-signout { color: var(--down); } .menu-note { display: block; color: var(--text-faint); font-size: .78rem; } /* --- layout ---------------------------------------------------------- */ .shell { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1rem 4rem; } .split { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 1.5rem; align-items: start; } .feed { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; } .sidebar { position: sticky; top: 4.5rem; display: flex; flex-direction: column; gap: var(--gap); } .page { display: flex; flex-direction: column; gap: var(--gap); } .page.narrow, .narrow { max-width: 680px; margin-inline: auto; width: 100%; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .25rem; } .page-head h1 { font-size: 1.55rem; } .page-sub { color: var(--text-dim); font-size: .92rem; margin: .3rem 0 0; } .section-title { font-size: .82rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin: .75rem 0 -.25rem; display: flex; align-items: baseline; gap: .6rem; } .section-title.flush { margin: 0 0 1rem; } .section-note { text-transform: none; letter-spacing: 0; font-weight: 450; color: var(--text-faint); font-size: .78rem; } .back-link { font-size: .9rem; color: var(--text-dim); } .back-link:hover { color: var(--accent); } /* --- card ------------------------------------------------------------ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; } .empty { text-align: center; padding: 3rem 1.5rem; color: var(--text-dim); } .empty h2 { font-size: 1.1rem; color: var(--text); margin-bottom: .4rem; } .empty .btn { margin-top: 1rem; } /* --- flashes and notices --------------------------------------------- */ .flashes { max-width: 1120px; margin: 1rem auto -0.5rem; padding: 0 1rem; display: flex; flex-direction: column; gap: .5rem; } .flash, .notice { padding: .7rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-2); font-size: .92rem; } .flash-success, .notice-success { border-color: rgba(67, 203, 141, .4); background: rgba(67, 203, 141, .1); color: #b6f0d5; } .flash-error, .notice-error { border-color: rgba(240, 112, 125, .4); background: rgba(240, 112, 125, .1); color: #ffc6cc; } .notice { margin-bottom: 1rem; } /* --- buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: 550 .92rem/1.2 var(--font); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .06s; } .btn:hover { text-decoration: none; background: var(--surface-hover); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 650; } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text-dim); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-quiet { background: var(--accent-soft); color: var(--accent); } .btn-quiet:hover { background: var(--accent-strong); } .btn-danger { background: rgba(240, 112, 125, .15); color: var(--down); border-color: rgba(240, 112, 125, .35); } .btn-danger:hover { background: rgba(240, 112, 125, .25); } .btn-block { width: 100%; } .btn-sm { padding: .38rem .7rem; font-size: .85rem; } .icon-btn { background: none; border: 0; color: var(--text-faint); font-size: 1.3rem; line-height: 1; padding: .15rem .4rem; border-radius: var(--radius-sm); cursor: pointer; } .icon-btn:hover { background: rgba(240, 112, 125, .15); color: var(--down); } .pill { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font-size: .85rem; font-weight: 550; } .pill:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; } /* --- tags ------------------------------------------------------------ */ .tag { display: inline-block; padding: .08rem .42rem; border-radius: 5px; font-size: .68rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; } .tag-npc { background: var(--npc-soft); color: var(--npc); border: 1px solid var(--npc-line); } .tag-gm { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); } .tag-warn { background: rgba(240, 112, 125, .14); color: var(--down); border: 1px solid rgba(240, 112, 125, .3); } /* --- avatars --------------------------------------------------------- */ .avatar { --size: 42px; width: var(--size); height: var(--size); flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: hsl(var(--avatar-hue, 215) 40% 26%); border: 1px solid var(--border-strong); color: hsl(var(--avatar-hue, 215) 60% 82%); font-weight: 650; user-select: none; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-xs { --size: 18px; font-size: .58rem; } .avatar-sm { --size: 32px; font-size: .78rem; } .avatar-md { --size: 42px; font-size: .92rem; } .avatar-lg { --size: 60px; font-size: 1.25rem; } .avatar-xl { --size: 88px; font-size: 1.8rem; } a.avatar:hover { border-color: var(--accent); } /* "No character chosen yet." Dashed and hollow so it reads as an empty slot waiting to be filled, not as somebody's face. */ .avatar-none { background: var(--bg-soft); border-style: dashed; border-color: var(--border-strong); color: var(--text-faint); } .avatar-none svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } /* --- composer -------------------------------------------------------- */ .composer { display: flex; flex-direction: column; gap: .85rem; } .composer-top { display: flex; gap: .8rem; align-items: flex-start; } .composer-fields { flex: 1; display: flex; flex-direction: column; gap: .6rem; min-width: 0; } .composer-title { font-size: 1rem; font-weight: 600; } .composer-body { resize: vertical; min-height: 4.5rem; } .composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .1rem; } .composer-actions { display: flex; align-items: center; gap: .8rem; margin-left: auto; } .composer-hint { color: var(--text-faint); font-size: .8rem; } /* the "Replying to X" bar above the box */ .composer-quote { display: flex; align-items: center; gap: .4rem; min-width: 0; padding: .4rem .55rem; background: var(--bg-soft); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); font-size: .85rem; color: var(--text-dim); } .composer-quote[hidden] { display: none; } .composer-quote-label { color: var(--text-faint); flex: none; } .composer-quote-author { color: var(--text); font-weight: 620; flex: none; } .composer-quote-body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .composer-quote-cancel { flex: none; margin-left: auto; text-decoration: none; } .composer-quote-cancel:hover { text-decoration: none; } /* the handles offered while you are typing an @ */ .mention-menu { position: absolute; z-index: 30; left: 0; right: 0; bottom: calc(100% - 1.0rem); max-height: 15rem; overflow-y: auto; margin: 0; padding: .25rem; list-style: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); } .mention-menu[hidden] { display: none; } .mention-option { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .9rem; } .mention-option.is-active { background: var(--accent-soft); } .mention-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .mention-avatar.is-blank { display: grid; place-items: center; background: var(--surface-2); color: var(--text-faint); font-size: .68rem; font-weight: 700; } .mention-name { color: var(--text); font-weight: 600; } .mention-handle { color: var(--text-faint); font-size: .84rem; } .mention-option .tag { margin-left: auto; } .file-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-dim); font-size: .85rem; cursor: pointer; max-width: 100%; } .file-btn:hover { border-color: var(--accent); color: var(--accent); } .file-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .file-btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; } .file-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- posts ----------------------------------------------------------- */ .post { display: flex; flex-direction: column; gap: .75rem; transition: border-color .15s; } .post:hover { border-color: var(--border-strong); } .post.is-npc { border-left: 3px solid var(--npc); } .post-head { display: flex; gap: .75rem; align-items: flex-start; } .post-byline { flex: 1; min-width: 0; } .post-author { font-weight: 620; font-size: .98rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .post-author a { color: var(--text); } .post-meta { font-size: .84rem; color: var(--text-faint); display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; } .post-meta a { color: var(--text-faint); } .post-meta a:hover { color: var(--accent); } .post-title { font-size: 1.15rem; margin-top: -.15rem; } .post-title a { color: var(--text); } .post-body { word-wrap: break-word; overflow-wrap: anywhere; } /* The image keeps its own shape. It was previously stretched to the full column width and cropped to fit a fixed height, which mangled anything tall or small - a portrait screenshot lost its top and bottom, and a little emote got blown up. Bound it instead: never wider than the column, never taller than 32rem, and scaled rather than cut. */ .post-image { display: block; width: fit-content; max-width: 100%; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); } .post-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: 32rem; } .post-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .mention { color: var(--accent); font-weight: 550; padding: 0 .12em; border-radius: 3px; background: var(--accent-soft); } .mention:hover { background: var(--accent-strong); text-decoration: none; } /* --- vote ------------------------------------------------------------ */ .vote { display: inline-flex; align-items: center; gap: .1rem; padding: .15rem; background: var(--bg-soft); border: 2px solid var(--border); border-radius: 999px; } .vote-btn { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--text-faint); cursor: pointer; transition: background .12s, color .12s; } .vote-btn svg { width: 15px; height: 15px; } /* The d20: a hexagon silhouette with the roll as the hero. A full facet net is unreadable at 15px - the lines and the numeral compete for the same pixels and both lose - so the shape carries the die and the numeral carries the meaning. */ .vote-btn .die-body { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } .vote-btn .die-num { fill: currentColor; font: 800 10px/1 var(--font); text-anchor: middle; /* Centres on the glyph box rather than the baseline, which would hang the digits high - they are cap-height with no descender. */ dominant-baseline: central; } .vote-btn:hover { background: var(--surface-hover); color: var(--text); } .vote-up.is-active { color: var(--up); background: rgba(67, 203, 141, .16); } .vote-down.is-active { color: var(--down); background: rgba(240, 112, 125, .16); } .vote { position: relative; } .vote-score { display: inline-flex; align-items: baseline; gap: .28rem; padding: .18rem .5rem; border: 0; border-radius: 999px; background: none; font: 650 .88rem/1.4 var(--font); font-variant-numeric: tabular-nums; color: var(--text-dim); cursor: pointer; white-space: nowrap; } .vote-score:hover { background: var(--surface-hover); color: var(--text); } .vote-score.is-positive { color: var(--up); } .vote-score.is-negative { color: var(--down); } .vote-score[aria-expanded="true"] { background: var(--surface-hover); } .vote-unit { font-size: .74rem; font-weight: 550; letter-spacing: .03em; color: var(--text-faint); } /* --- who voted ------------------------------------------------------- */ .voters { position: absolute; top: calc(100% + .4rem); left: 0; z-index: 30; min-width: 12.5rem; max-width: 17rem; max-height: 15rem; overflow-y: auto; padding: .7rem .8rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: .85rem; white-space: normal; } .voters[hidden] { display: none; } .voters-group + .voters-group { margin-top: .6rem; } .voters-head { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .2rem; } .voters-head.is-up { color: var(--up); } .voters-head.is-down { color: var(--down); } .voters-names { color: var(--text-dim); line-height: 1.5; } .voters-empty, .voters-loading { color: var(--text-faint); margin: 0; font-style: italic; } /* --- replies --------------------------------------------------------- */ .replies { padding: 0; display: flex; flex-direction: column; } .reply { display: flex; gap: .7rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); } .reply:last-child { border-bottom: 0; } .reply:target { background: var(--accent-soft); } .reply.is-npc { box-shadow: inset 3px 0 0 var(--npc); } .reply-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; } .reply-head { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .87rem; color: var(--text-faint); } .reply-author { font-weight: 620; color: var(--text); font-size: .93rem; } .reply-handle, .reply-time { color: var(--text-faint); } .reply-time:hover { color: var(--accent); } .reply-delete { margin-left: auto; } .reply-body { word-wrap: break-word; overflow-wrap: anywhere; } .reply-foot { margin-top: .1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .reply-action { padding: .2rem .75rem; border-radius: var(--radius-sm); color: var(--text-faint); font-size: .82rem; font-weight: 600; } .reply-action:hover { background: var(--surface-2); color: var(--accent); text-decoration: none; } /* --- the quoted reply, Discord-style --------------------------------- The hook is one absolutely-positioned box with two borders and a rounded corner: its top edge is the horizontal run, its left edge drops back down into the avatar gutter of the reply doing the quoting. That gutter has to be empty for the drop to land anywhere, so a reply carrying a quote pushes its own avatar down to the name line - which is the same thing Discord does. -------------------------------------------------------------------- */ .reply.has-quote > .avatar { margin-top: 1.6rem; } .reply-quote { position: relative; display: flex; left: -0.3rem; top: -0.09rem; align-items: center; gap: .35rem; min-width: 0; margin-bottom: .1rem; font-size: .84rem; color: var(--text-dim); } .reply-quote::before { content: ""; position: absolute; left: -1.45rem; top: 50%; bottom: -.35rem; width: 1.15rem; border-left: 2px solid var(--border-strong); border-top: 2px solid var(--border-strong); border-top-left-radius: 8px; } .reply-quote:hover { text-decoration: none; color: var(--text); } .reply-quote:hover::before { border-color: var(--accent-line); } .reply-quote-author { color: var(--text); font-weight: 620; flex: none; } .reply-quote.is-npc .reply-quote-author { color: var(--npc); } .reply-quote .avatar { flex: none; } .reply-quote-body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- sidebar cards --------------------------------------------------- */ .side-card { padding: .95rem 1rem; } .side-title { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .75rem; } .side-identity { display: flex; gap: .75rem; align-items: center; margin-bottom: .9rem; } .side-name { font-weight: 650; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .side-handle { color: var(--text-faint); font-size: .85rem; } .side-filters { display: flex; flex-direction: column; gap: 1px; } .side-filters a { padding: .45rem .6rem; border-radius: var(--radius-sm); color: var(--text-dim); font-size: .9rem; } .side-filters a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .side-filters a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .side-online { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; } .side-online li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--text-dim); } .side-online a { color: var(--text-dim); } .side-online a:hover { color: var(--text); } .dot-online { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(67, 203, 141, .16); flex: none; } /* --- pager ----------------------------------------------------------- */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; } .pager-label { color: var(--text-faint); font-size: .85rem; } /* --- forms ----------------------------------------------------------- */ .input { width: 100%; padding: .6rem .75rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s; } .input::placeholder { color: var(--text-faint); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } textarea.input { resize: vertical; } .input-sm { padding: .38rem .55rem; font-size: .87rem; } .form { display: flex; flex-direction: column; gap: 1.1rem; } .field { display: flex; flex-direction: column; gap: .4rem; } .field > span { font-size: .87rem; font-weight: 600; color: var(--text-dim); } .field > span em { font-style: normal; font-weight: 400; color: var(--text-faint); } .field small { color: var(--text-faint); font-size: .8rem; } .input-prefixed { position: relative; display: block; } .input-prefix { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; } .input-prefixed .input { padding-left: 1.7rem; } .check { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .check input { margin-top: .25rem; accent-color: var(--accent); width: 16px; height: 16px; } .check span { display: flex; flex-direction: column; gap: .15rem; } .check small { color: var(--text-faint); font-size: .82rem; } .form-avatar { display: flex; align-items: center; gap: 1rem; } .form-actions { display: flex; justify-content: flex-end; gap: .6rem; } .danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-color: rgba(240, 112, 125, .25); } .danger-zone strong { display: block; } .danger-zone small { color: var(--text-faint); } /* --- sign in / sign up ----------------------------------------------- */ .gate { max-width: 24rem; margin: 3rem auto; display: flex; flex-direction: column; gap: 1.5rem; } .gate-brand { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; } .gate-brand h1 { font-size: 1.5rem; } .gate-brand p { color: var(--text-dim); font-size: .92rem; margin: 0; } .gate-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; } .gate-foot { text-align: center; font-size: .9rem; color: var(--text-dim); margin: 0; } /* --- character picker ------------------------------------------------ */ .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: var(--gap); } .pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.4rem 1rem 1.1rem; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s, transform .12s; } .pick:hover { border-color: var(--border-strong); transform: translateY(-2px); } .pick.is-current { border-color: var(--accent); background: linear-gradient(var(--accent-soft), transparent 60%), var(--surface); } .pick-name { font-weight: 650; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: center; } .pick-handle { color: var(--text-faint); font-size: .85rem; } .pick-bio { color: var(--text-dim); font-size: .84rem; margin: .2rem 0 .4rem; } .pick .btn { margin-top: auto; } .pick-edit { position: absolute; top: .6rem; right: .75rem; font-size: .8rem; color: var(--text-faint); } .pick-edit:hover { color: var(--accent); } /* --- roster ---------------------------------------------------------- */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .tabs { display: inline-flex; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; } .tabs a { padding: .35rem .9rem; border-radius: 999px; color: var(--text-dim); font-size: .88rem; font-weight: 550; } .tabs a:hover { color: var(--text); text-decoration: none; } .tabs a.is-active { background: var(--accent); color: var(--on-accent); } .search { flex: 1; max-width: 18rem; min-width: 12rem; } .roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gap); } /* Avatar and name share the top row; the bio and the footer span the full card. Putting the follow button beside the name instead squeezed the bio into a column barely wide enough for two words. */ .roster-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem .85rem; align-content: start; } .roster-card.is-npc { border-left: 3px solid var(--npc); } .roster-id { align-self: center; min-width: 0; } .roster-name { font-weight: 640; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .roster-name a { color: var(--text); } .roster-handle { color: var(--text-faint); font-size: .85rem; } .roster-bio { grid-column: 1 / -1; color: var(--text-dim); font-size: .87rem; margin: 0; } .roster-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: auto; } .roster-stats { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .8rem; color: var(--text-faint); } .roster-stats strong { color: var(--text-dim); } .roster-player { font-style: italic; } /* --- profile --------------------------------------------------------- */ .profile-head { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem; } .profile-head.is-npc { border-left: 3px solid var(--npc); } .profile-top { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; } .profile-id { flex: 1; min-width: 0; } .profile-id h1 { font-size: 1.4rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .profile-handle { color: var(--text-faint); } .profile-actions { display: flex; gap: .5rem; align-items: center; } .profile-bio { color: var(--text-dim); margin: 0; } .profile-stats { display: flex; gap: 1.75rem; margin: 0; padding-top: .9rem; border-top: 1px solid var(--border); flex-wrap: wrap; } .profile-stats div { display: flex; flex-direction: column-reverse; gap: .1rem; } .profile-stats dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .profile-stats dd { margin: 0; font-size: 1.15rem; font-weight: 650; } /* --- alerts ---------------------------------------------------------- */ .alerts { padding: 0; display: flex; flex-direction: column; } .alert { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); color: var(--text-dim); } .alert:last-child { border-bottom: 0; } .alert:hover { background: var(--surface-2); text-decoration: none; } .alert.is-unread { background: var(--accent-soft); } .alert.is-unread:hover { background: var(--accent-strong); } .alert-text { flex: 1; min-width: 0; font-size: .92rem; } .alert-text strong { color: var(--text); } .alert-time { color: var(--text-faint); font-size: .8rem; white-space: nowrap; } /* --- sidebar ads ----------------------------------------------------- */ .ad-slot .side-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .ad-dots { display: flex; gap: 4px; } .ad-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); transition: background .2s; } .ad-dots span.is-on { background: var(--accent); } .ad[hidden] { display: none; } .ad img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); } .ad-caption { color: var(--text-faint); font-size: .76rem; line-height: 1.45; margin: .5rem 0 0; } .ad a:hover img { border-color: var(--accent-line); } /* --- admin panel ----------------------------------------------------- */ .admin-tabs { align-self: flex-start; margin-bottom: .25rem; } .admin-cards { display: flex; flex-direction: column; gap: .75rem; } .admin-card { display: flex; flex-direction: column; gap: .2rem; color: var(--text); transition: border-color .15s, transform .1s; } .admin-card:hover { border-color: var(--accent-line); text-decoration: none; transform: translateY(-1px); } .admin-card h2 { font-size: 1.02rem; } .admin-card p { color: var(--text-dim); font-size: .88rem; margin: 0; } .admin-stat { color: var(--text-faint); font-size: .82rem; margin-top: .35rem; } .admin-card .tag { align-self: flex-start; margin-top: .4rem; } .ad-admin-list { display: flex; flex-direction: column; gap: .75rem; } .ad-admin { display: flex; align-items: flex-start; gap: .9rem; padding: .85rem; } .ad-admin.is-off { opacity: .58; } .ad-admin-thumb { width: 92px; height: 62px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); flex: none; } .ad-admin-body { flex: 1; min-width: 0; } .ad-admin-title { font-weight: 620; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; } .ad-admin-caption { color: var(--text-dim); font-size: .85rem; margin: .15rem 0 0; } .ad-admin-meta { color: var(--text-faint); font-size: .78rem; margin-top: .35rem; } .ad-admin-actions { display: flex; align-items: center; gap: .4rem; flex: none; } .tag-off { background: var(--surface-2); color: var(--text-faint); border: 1px solid var(--border-strong); } /* The users table needs more room than the other admin pages. */ .wide-page { max-width: 900px; } /* the Discord page's "what is configured" list */ .check-list { list-style: none; margin: .75rem 0 0; padding: 0; } .check { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; padding: .5rem 0; border-top: 1px solid var(--border); font-size: .9rem; } .check:first-child { border-top: 0; } .check-mark { flex: none; width: 1rem; font-weight: 700; } .check.is-ok .check-mark { color: var(--up); } .check.is-bad .check-mark { color: var(--down); } .check.is-idle .check-mark { color: var(--text-faint); } .check-name { font-weight: 620; min-width: 7rem; } .check-detail { color: var(--text-dim); flex: 1; min-width: 12rem; overflow-wrap: anywhere; } .check-inline { display: flex; align-items: flex-start; gap: .55rem; margin: .75rem 0 1rem; color: var(--text-dim); font-size: .87rem; line-height: 1.5; } .check-inline input { margin-top: .25rem; flex: none; } /* --- theme picker ---------------------------------------------------- */ .theme-grid { display: flex; flex-direction: column; gap: .75rem; } .theme-card { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; transition: border-color .15s, background .15s; } .theme-card:hover { border-color: var(--border-strong); } .theme-card.is-current { border-color: var(--accent-line); background: linear-gradient(var(--accent-soft), transparent 120%), var(--surface); } .theme-swatch { display: flex; flex: none; width: 74px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-strong); } .theme-swatch span { flex: 1; } .theme-meta { flex: 1; min-width: 0; } .theme-name { font-weight: 640; display: flex; align-items: center; gap: .45rem; } .theme-note { color: var(--text-dim); font-size: .86rem; margin: .15rem 0 0; } .theme-card .btn[disabled] { opacity: .55; cursor: default; } .theme-footnote { font-size: .85rem; } /* --- tables ---------------------------------------------------------- */ .table-wrap { padding: 0; overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 44rem; } .table th, .table td { padding: .75rem 1rem; text-align: left; vertical-align: top; } .table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); border-bottom: 1px solid var(--border); font-weight: 650; } .table tbody tr + tr td { border-top: 1px solid var(--border); } .table td.right, .table th.right { text-align: right; } .row-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; } .inline-form { display: flex; gap: .35rem; } .inline-form .input { width: 9.5rem; } .plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; } .plain-list li { display: flex; align-items: center; gap: .7rem; } .plain-list li > div { flex: 1; min-width: 0; } .plain-list small { color: var(--text-faint); margin-left: .35rem; } /* --- responsive ------------------------------------------------------ */ @media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .sidebar { position: static; order: -1; } .side-card:not([data-online-card]) { display: none; } /* filters live in the header on mobile */ } @media (max-width: 640px) { .shell { padding: 1rem .75rem 3rem; } .topbar-inner { gap: .6rem; padding: .55rem .75rem; } .brand-text { display: none; } .topnav a { padding: .45rem .55rem; } .menu-trigger-text { display: none; } .composer-hint { display: none; } .page-head h1 { font-size: 1.3rem; } .profile-stats { gap: 1.1rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }