ShadowsOverWestgate/sow-nodebb-theme
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Activity

Compare commits

merge into: ShadowsOverWestgate/sow-nodebb-theme:prototype/north-star-frame-b
Branches Tags
ShadowsOverWestgate/sow-nodebb-theme:main ShadowsOverWestgate/sow-nodebb-theme:prototype/54-ornament-set ShadowsOverWestgate/sow-nodebb-theme:prototype/53-palette-candidates ShadowsOverWestgate/sow-nodebb-theme:prototype/north-star-frame-b
..
pull from: ShadowsOverWestgate/sow-nodebb-theme:prototype/54-ornament-set
Branches Tags
ShadowsOverWestgate/sow-nodebb-theme:main ShadowsOverWestgate/sow-nodebb-theme:prototype/54-ornament-set ShadowsOverWestgate/sow-nodebb-theme:prototype/53-palette-candidates ShadowsOverWestgate/sow-nodebb-theme:prototype/north-star-frame-b
3 Commits
prototype/north-star-frame-b .. prototype/54-ornament-set
Author SHA1 Message Date
archvillainette 7a29402d93 prototype(#54): variants and the settled ledger row 
Adds the three category-list variants the set was judged against (roomy,
tabular, tabular+gold) and the fixes that came out of looking at them in a
browser:

- square everywhere, with enough specificity to beat the theme's own
  `border-radius: 8px !important`; only the status dot stays round
- a drop shadow under every bounded surface, so a square edge reads as an
  edge and not a cut
- Cinzel always uppercase
- the Well component: the three right-hand readings sit in recesses on a
  shared grid, inset on all four sides
- the clamped teaser clamps by line count, not by NodeBB's hard max-height,
  which was cutting the glyphs
 2026-07-31 18:00:47 +02:00
archvillainetteandClaude Opus 5 1a479023d5 prototype(#54): ornament and frame component set as a specimen page 
Throwaway. Names the closed component vocabulary (rail, panel, plaque,
band, ledger, four dividers, section header, icon, horizon, stamp) and
shows it at both densities with zero images, plus the same components
mapped onto the live category list and topic.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
 2026-07-31 16:47:44 +02:00
archvillainetteandClaude Opus 5 ea36116e62 prototype(#53): palette candidates as runtime token swaps 
Throwaway. Tokenises the theme's literal colours so candidate palettes can be
swapped in the browser, adds three candidates (Plum Noir one-metal, two-metal
pewter, two-metal plus a champagne inset), a WCAG checker, a seeder and the
screenshots they are judged on.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
 2026-07-31 16:31:41 +02:00
77 changed files with 1807 additions and 841 deletions
Expand all files Collapse all files
prototype/README.md
+21
View File
@@ -0,0 +1,21 @@
# Throwaway prototype for #53 — palette candidates on a dense page
Not for merge. The theme SCSS on this branch is mechanically tokenised (literal
hexes and `rgba()` triples turned into `var(--wg-*)`) so a candidate palette can
be swapped at runtime instead of rebuilt per candidate.
- `contrast.py` — WCAG check for every candidate surface/ink pair. Run first.
- `_base-plumnoir.css` + `candidate-{a,b,c}.css` — the candidates, as `:root` overrides.
- `seed.js` — categories + one 13-post topic with a quote, over the REST API.
- `shots.js` / `probe.js` — screenshots and a computed-style probe, both against the live stack.
- `shots/` — the images the resolution is judged on.
Replay:
```bash
cd ../sow-nodebb && nix develop --command make dev-reset && nix develop --command make dev
cd - && node prototype/seed.js
export PLAYWRIGHT_BROWSERS_PATH=$(nix build --print-out-paths --no-link nixpkgs#playwright-driver.browsers)
P=$(nix build --print-out-paths --no-link nixpkgs#playwright-test)
NODE_PATH=$P/lib/node_modules nix shell nixpkgs#playwright-test -c node prototype/shots.js
```
prototype/_base-plumnoir.css
+16
View File
@@ -0,0 +1,16 @@
/* shared by all candidates: the Plum Noir surface lineage (#49 rule "re-tune, don't replace") */
:root {
--wg-bg: #150E13;
--wg-bg-deep: #0C0810;
--wg-bg-deep-rgb: 12, 8, 16;
--wg-bg-deepest-rgb: 8, 6, 11;
--wg-panel: #21161C;
--wg-panel-2: #180F16;
--wg-panel-3: #351E28;
--wg-plum: #351E28;
--wg-plum-rgb: 53, 30, 40;
--wg-plum-soft: #4A2A38;
--wg-velvet-panel: rgba(33, 22, 28, 0.97);
--wg-velvet-panel-hover: rgba(45, 30, 38, 0.98);
--wg-ledger-panel: rgba(24, 15, 22, 0.97);
}
prototype/a-ledger.html
-144
View File
@@ -1,144 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A — Ledger is the frame</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root{
--gold:#c2a35a; --gilt:#a8893f; --gold-lit:#e0c878;
--plum-noir:#351e28; --blood:#8e3438; --wax:#a84a4e;
--crypt:#0f0d12; --grave:#09080b;
--panel:#18141d; --panel-deep:#110f15; --panel-raised:#201924;
--bone:#e6e0d6; --ash:#b9b2a6; --dust:#9a9086;
--ink:#d8c28a; --ink-muted:#a99d8f;
--rule:1.78rem;
}
*{box-sizing:border-box}
body{
margin:0; background:var(--grave); color:var(--ash);
font:400 1rem/1.6 Jost, system-ui, sans-serif;
padding:2.5rem 1rem 4rem;
}
h1,h2,h3{font-family:Cinzel,Georgia,serif;font-weight:600;color:var(--bone);margin:0;
text-shadow:0 1px 0 rgba(0,0,0,.9), 0 0 10px rgba(104,32,76,.16)}
.label{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.78rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* the book: one bound object, hard edges, margins */
.book{
max-width:1180px;margin:0 auto;background:var(--crypt);
border:1px solid rgba(194,163,90,.22);
box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.03);
position:relative;
}
/* corner pieces — bookbinding */
.book::before,.book::after{content:"";position:absolute;width:34px;height:34px;pointer-events:none}
.book::before{top:8px;left:8px;border-top:1px solid var(--gilt);border-left:1px solid var(--gilt)}
.book::after{bottom:8px;right:8px;border-bottom:1px solid var(--gilt);border-right:1px solid var(--gilt)}
/* topbar reads as a running head, not a nav bar */
.runninghead{
display:flex;justify-content:space-between;align-items:baseline;
padding:1.1rem 3.2rem .9rem;border-bottom:1px solid rgba(194,163,90,.18);
background:linear-gradient(180deg,#1a1017,var(--crypt));
}
.runninghead nav{display:flex;gap:1.8rem}
.runninghead a{color:var(--ink-muted);text-decoration:none;font-family:Cinzel,serif;
font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.runninghead a:hover{color:var(--gold-lit)}
.folio{color:var(--dust);font-size:.74rem;letter-spacing:.1em}
/* frontispiece — a title page, not a hero */
.frontispiece{padding:4.5rem 3.2rem 3rem;text-align:center;
background:radial-gradient(120% 90% at 50% 0%, rgba(53,30,40,.55), transparent 70%)}
.frontispiece h1{font-size:2.9rem;letter-spacing:.04em}
.frontispiece .sub{color:var(--dust);font-size:.82rem;letter-spacing:.22em;
text-transform:uppercase;font-family:Cinzel,serif;margin-top:.9rem}
.fade-rule{height:1px;margin:1.8rem auto;max-width:420px;
background:linear-gradient(90deg,transparent,var(--gilt),transparent)}
.seal{display:inline-block;margin-top:.4rem;width:44px;height:44px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, var(--wax), #5e2124);
box-shadow:inset 0 -2px 6px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.5)}
.epigraph{max-width:560px;margin:1.6rem auto 0;color:var(--ink-muted);
font-style:italic;font-size:.95rem}
/* the index: entries in ruled columns */
.leaf{padding:1rem 3.2rem 3rem}
.leaf-head{display:flex;justify-content:space-between;align-items:baseline;
padding-bottom:.5rem;border-bottom:1px solid rgba(194,163,90,.14);margin-bottom:.2rem}
.entry{
display:grid;grid-template-columns:1fr 8rem 5rem;gap:1rem;align-items:baseline;
min-height:var(--rule);padding:.42rem 0;
border-bottom:1px solid rgba(194,163,90,.07);
}
.entry:hover{background:linear-gradient(90deg,rgba(53,30,40,.5),transparent)}
.entry .t{color:var(--ink);font-family:Cinzel,serif;font-size:.98rem}
.entry .m{color:var(--dust);font-size:.8rem;text-align:right}
.entry .n{color:var(--gold);font-size:.8rem;text-align:right;font-variant-numeric:tabular-nums}
.two{display:grid;grid-template-columns:1fr 300px;gap:3rem;padding:0 3.2rem 3rem}
.marginalia{border-left:1px solid rgba(194,163,90,.14);padding-left:1.4rem}
.marginalia p{font-size:.88rem;color:var(--dust)}
.plaque{display:inline-block;padding:.28rem .7rem;border:1px solid rgba(194,163,90,.3);
background:var(--panel-deep);color:var(--ink);font-family:Cinzel,serif;
font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.colophon{padding:1.4rem 3.2rem;border-top:1px solid rgba(194,163,90,.18);
display:flex;justify-content:space-between;color:var(--dust);font-size:.74rem;
letter-spacing:.08em;background:var(--panel-deep)}
.tag{color:#7a7168;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
text-align:center;margin:0 auto 1.2rem;max-width:1180px}
</style>
</head>
<body>
<div class="tag">Option A — the ledger is the frame · zero images</div>
<div class="book">
<div class="runninghead">
<span class="label">Shadows Over Westgate</span>
<nav><a href="#">The Court</a><a href="#">Entries</a><a href="#">Archive</a><a href="#">Petitions</a><a href="#">Enter</a></nav>
<span class="folio">fol. i</span>
</div>
<div class="frontispiece">
<div class="label">Being an account of the city and its debts</div>
<div class="fade-rule"></div>
<h1>Shadows Over Westgate</h1>
<div class="sub">A record kept against the dark</div>
<div class="fade-rule"></div>
<div class="seal"></div>
<p class="epigraph">Everyone in this city is compromised. The only question the ledger asks is by how much, and to whom.</p>
<div style="margin-top:1.6rem"><span class="plaque">Open the record</span></div>
</div>
<div class="leaf">
<div class="leaf-head"><h2 style="font-size:1.05rem;letter-spacing:.06em">Latest entries</h2><span class="folio">fol. ii — vii</span></div>
<div class="entry"><span class="t">The Ashgate Concession</span><span class="m">Ledgerkeeper</span><span class="n">41</span></div>
<div class="entry"><span class="t">On the matter of the second seal</span><span class="m">V. Marrow</span><span class="n">17</span></div>
<div class="entry"><span class="t">Debts owed to the Clockmakers' Guild</span><span class="m">Anonymous</span><span class="n">8</span></div>
<div class="entry"><span class="t">Petition: the widow at Candlewharf</span><span class="m">House Verrine</span><span class="n">63</span></div>
<div class="entry"><span class="t">Errata to the census of 1114</span><span class="m">Ledgerkeeper</span><span class="n">2</span></div>
</div>
<div class="two">
<div>
<h3 style="font-size:1rem;letter-spacing:.06em">From the archive</h3>
<div class="fade-rule" style="margin:.9rem 0 1.2rem;max-width:none"></div>
<p>The city keeps two books. One is public, ruled and countersigned, and it is a lie of omission. The other is this one.</p>
<p>Entries are made nightly. Corrections are made rarely, and never by the same hand twice.</p>
</div>
<aside class="marginalia">
<div class="label" style="font-size:.7rem">Standing</div>
<p style="margin-top:.8rem">The record is open. Fourteen hands are writing tonight.</p>
<div class="fade-rule" style="margin:1.2rem 0;max-width:none"></div>
<div class="label" style="font-size:.7rem">Seals in force</div>
<p style="margin-top:.8rem">Verrine · Marrow · the Guild</p>
</aside>
</div>
<div class="colophon"><span>Kept at Westgate</span><span>fol. vii of ccxi</span></div>
</div>
</body>
</html>
prototype/candidate-a.css
+1
View File
@@ -0,0 +1 @@
/* A — Plum Noir Ledger. One metal. Surfaces re-tuned, gold does every job it does today. */
prototype/candidate-b.css
+15
View File
@@ -0,0 +1,15 @@
/* B — Two Metals. A + pewter #9EA7B3: pewter structures, gilt marks what matters or can be touched. */
:root {
--wg-pewter: #9EA7B3;
--wg-pewter-rgb: 158, 167, 179;
/* structure moves to pewter */
--wg-border: rgba(var(--wg-pewter-rgb), 0.20);
--wg-border-soft: rgba(var(--wg-pewter-rgb), 0.11);
--wg-ledger-ruling: rgba(var(--wg-pewter-rgb), 0.075);
--wg-ledger-rule-strong: rgba(var(--wg-pewter-rgb), 0.20);
--wg-ledger-border: rgba(var(--wg-pewter-rgb), 0.24);
/* metadata is structure, not value */
--wg-text-muted: #9EA7B3;
--wg-ledger-ink-muted: #9EA7B3;
/* gilt keeps: links, ledger ink, buttons, focus ring, stamps */
}
prototype/candidate-c.css
+17
View File
@@ -0,0 +1,17 @@
/* C — Two Metals + plain paper. B + one champagne inset, to test whether a light surface earns a slot. */
:root {
--wg-paper: #EFE5D2;
--wg-ink-on-light: #351E28;
--wg-focus-ring-on-light: #09080B;
}
/* the inset: quoted material is paper pasted into the ledger. No metal on it (#50 finding 9). */
blockquote, .wg-paper {
background: var(--wg-paper) !important;
color: var(--wg-ink-on-light) !important;
border: 0 !important;
border-left: 3px solid var(--wg-red) !important;
box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.35) !important;
}
blockquote a, .wg-paper a { color: #6E1F2A !important; }
blockquote *, .wg-paper * { color: inherit !important; }
blockquote :focus-visible, .wg-paper :focus-visible { outline-color: var(--wg-focus-ring-on-light) !important; }
prototype/contrast.py
+78
View File
@@ -0,0 +1,78 @@
#!/usr/bin/env python3
"""Throwaway WCAG 2.x contrast check for the #53 palette candidates.
Same method as the #50 headroom research: relative luminance, (L1+.05)/(L2+.05),
alpha colours flattened over their real backdrop first (source-over, sRGB).
Self-checks against WCAG's published values before printing anything.
"""
def _srgb(c):
c /= 255
return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
def rgb(h):
h = h.lstrip("#")
return tuple(int(h[i : i + 2], 16) for i in (0, 2, 4))
def lum(h):
r, g, b = rgb(h)
return 0.2126 * _srgb(r) + 0.7152 * _srgb(g) + 0.0722 * _srgb(b)
def flatten(fg, alpha, bg):
f, b = rgb(fg), rgb(bg)
return "#%02x%02x%02x" % tuple(round(f[i] * alpha + b[i] * (1 - alpha)) for i in range(3))
def ratio(a, b):
la, lb = lum(a), lum(b)
hi, lo = max(la, lb), min(la, lb)
return (hi + 0.05) / (lo + 0.05)
def _selfcheck():
assert round(ratio("#000000", "#ffffff"), 1) == 21.0
assert round(ratio("#767676", "#ffffff"), 2) == 4.54
assert round(ratio("#949494", "#ffffff"), 2) == 3.03
assert ratio("#959595", "#ffffff") < 3.0
assert flatten("#ffffff", 0.5, "#000000") == "#808080"
_selfcheck()
# candidate surfaces (the invented ones need proving; the rest come from #50)
SURFACES = {
"bg #150E13": "#150E13",
"bg-deep #0C0810": "#0C0810",
"panel #21161C": "#21161C",
"panel-2 #180F16": "#180F16",
"panel-3 / Plum Noir #351E28": "#351E28",
"plum-soft #4A2A38": "#4A2A38",
"paper / champagne #EFE5D2": "#EFE5D2",
}
INKS = {
"Bone #E6E0D6": "#E6E0D6",
"Ash #B9B2A6": "#B9B2A6",
"Dust #9A9086": "#9A9086",
"Ledger Ink #D8C28A": "#D8C28A",
"Tarnished Gold #C2A35A": "#C2A35A",
"Old Gilt #A8893F": "#A8893F",
"Gold Lit #E0C878": "#E0C878",
"Pewter #9EA7B3": "#9EA7B3",
"Ink-on-light #351E28": "#351E28",
"Red #8E3438": "#8E3438",
"Stamp #A84A4E": "#A84A4E",
}
if __name__ == "__main__":
w = max(len(k) for k in INKS)
for sname, s in SURFACES.items():
print(f"\n== {sname}")
for iname, i in INKS.items():
r = ratio(i, s)
tag = "AA" if r >= 4.5 else ("large/non-text" if r >= 3.0 else "FAIL")
print(f" {iname:<{w}} {r:6.2f} {tag}")
prototype/forum.html
-91
View File
@@ -1,91 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Westgate — the archive</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="shell.css">
<style>
/* indoors: same shell, ornament turned down, ledger takes over */
/* One Rail: shell and content share the same left/right edge on every page.
Nothing is inset inside anything. Density is spacing and ornament only. */
:root{--fit:.35}
.crumb{display:flex;gap:.6rem;align-items:baseline;padding:1.2rem var(--rail) .4rem;
font-size:.8rem;color:var(--dust)}
.crumb a{text-decoration:none;color:var(--ink-muted)}
.crumb span{color:var(--pewter-deep)}
.room{display:grid;grid-template-columns:1fr 300px;gap:2rem;padding:.6rem var(--rail) 3rem;
background:var(--crypt)}
.bar{display:flex;justify-content:space-between;align-items:center;
padding:.5rem .2rem 1rem}
.bar h1{font-size:1.35rem;letter-spacing:.05em}
aside .box{padding-left:1.2rem;margin-bottom:1.6rem;position:relative}
aside .box::before{content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:1px;
background:linear-gradient(180deg,rgba(140,143,151,.3),transparent)}
/* the page title sits on a fading rule, not a hard bar */
.bar{border-bottom:0}
aside p{font-size:.88rem;color:var(--dust);margin:.6rem 0 0}
.pager{display:flex;gap:.4rem;justify-content:flex-end;margin-top:1rem;
font-size:.8rem;color:var(--dust)}
.pager b{color:var(--gold);font-weight:400}
</style>
</head>
<body>
<div class="tag">Indoors — app density (--fit: .35)</div>
<div class="page">
<header class="lintel">
<a class="mark" href="index.html">Shadows Over Westgate</a>
<nav>
<a href="index.html">The City</a>
<a href="forum.html" aria-current="page">Forum</a>
<a href="forum.html">Archive</a>
<a href="forum.html">Enter</a>
</nav>
<div class="rivets"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
</header>
<div class="status"><span class="lamp"></span> The gates are open. Fourteen souls walk the city tonight.</div>
<div class="crumb"><a href="index.html">The City</a><span>·</span><a href="forum.html">The Archive</a><span>·</span><span>Entries of the Court</span></div>
<div class="room">
<main>
<div class="bar">
<h1>Entries of the Court</h1>
<a class="btn" href="#">New entry</a>
</div>
<div class="ledger framed">
<div class="row head"><span>Entry</span><span>Hand</span><span>Replies</span><span>Last</span></div>
<div class="row"><a class="t" href="#">The Ashgate Concession</a><span class="m">Ledgerkeeper</span><span class="n">41</span><span class="d">2h</span></div>
<div class="row"><a class="t" href="#">On the matter of the second seal</a><span class="m">V. Marrow</span><span class="n">17</span><span class="d">5h</span></div>
<div class="row"><a class="t" href="#">Debts owed to the Clockmakers' Guild</a><span class="m">Anonymous</span><span class="n">8</span><span class="d">9h</span></div>
<div class="row"><a class="t" href="#">Petition: the widow at Candlewharf</a><span class="m">House Verrine</span><span class="n">63</span><span class="d">1d</span></div>
<div class="row"><a class="t" href="#">Errata to the census of 1114</a><span class="m">Ledgerkeeper</span><span class="n">2</span><span class="d">1d</span></div>
<div class="row"><a class="t" href="#">Concerning the Foundry night shift</a><span class="m">Grell</span><span class="n">29</span><span class="d">2d</span></div>
<div class="row"><a class="t" href="#">A list of names, unsigned</a><span class="m">Anonymous</span><span class="n">104</span><span class="d">2d</span></div>
<div class="row"><a class="t" href="#">On lamp oil and its accounting</a><span class="m">Sable</span><span class="n">6</span><span class="d">3d</span></div>
<div class="row"><a class="t" href="#">The harbour tithe, revised</a><span class="m">House Verrine</span><span class="n">12</span><span class="d">4d</span></div>
<div class="row" style="border:0"><a class="t" href="#">Who kept the third key</a><span class="m">V. Marrow</span><span class="n">38</span><span class="d">6d</span></div>
</div>
<div class="pager"><b>1</b> · 2 · 3 · 4 · 211</div>
</main>
<aside>
<div class="box"><div class="label dull" style="font-size:.7rem">Tonight</div>
<p>Rain off the harbour. Two wards dark. The Foundry is still running.</p></div>
<div class="box"><div class="label dull" style="font-size:.7rem">Seals in force</div>
<p>Verrine · Marrow · the Guild</p></div>
<div class="box"><div class="label dull" style="font-size:.7rem">Newly arrived</div>
<p>Three petitioners at the Verrine gate.</p></div>
</aside>
</div>
<footer class="foundation"><span>Westgate</span><span>Est. 1114 · the record is kept</span></footer>
</div>
</body>
</html>
prototype/index.html
-105
View File
@@ -1,105 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Westgate — outdoors</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="shell.css">
<style>
/* showcase-only furniture: lives on the home page, nowhere else */
.horizon{position:relative;min-height:440px;display:flex;flex-direction:column;
justify-content:flex-end;padding:5rem var(--rail) 3rem;overflow:hidden;
background:
radial-gradient(70% 55% at 50% 100%, rgba(200,176,138,.16), transparent 70%),
radial-gradient(90% 70% at 50% 100%, rgba(53,30,40,.85), transparent 72%),
linear-gradient(180deg,#07060a 0%, #0d0b11 55%, #16121a 100%)}
.skyline{position:absolute;left:0;right:0;bottom:0;height:190px;display:flex;
align-items:flex-end;gap:6px;padding:0 1rem;opacity:.92}
.skyline b{display:block;background:#06050880;
border-top:1px solid rgba(140,143,151,.10);box-shadow:0 -1px 0 rgba(0,0,0,.9)}
/* One Rail: the hero sits on the same 3-column grid as the plaques below,
so its right edge lands on a shared grid line — a column, not an inset. */
.horizon .inner{position:relative;display:grid;
grid-template-columns:repeat(3,1fr);column-gap:1px}
.horizon .inner > *{grid-column:1 / span 2}
.horizon h1{font-size:3.2rem;letter-spacing:.03em;line-height:1.08}
.horizon p{color:var(--ink-muted);margin-top:1rem}
.cta{display:flex;gap:.9rem;margin-top:1.8rem}
/* plaques divided by rules that fade top and bottom, not a hard grid */
.band{display:grid;grid-template-columns:repeat(3,1fr)}
.plaque{background:linear-gradient(180deg,#191419,#120f14);
padding:1.6rem var(--rail);position:relative}
.plaque + .plaque::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
background:linear-gradient(180deg,transparent,rgba(194,163,90,.28),transparent)}
.plaque h3{font-size:1.05rem;letter-spacing:.05em;margin:.7rem 0 .5rem}
.plaque p{font-size:.9rem;color:var(--dust);margin:0}
.dispatches{padding:2.5rem var(--rail);background:var(--crypt);
border-top:0}
.dispatches .lead{display:flex;justify-content:space-between;align-items:baseline;
margin-bottom:.9rem}
.dispatches a.more{font-family:Cinzel,serif;font-size:.74rem;letter-spacing:.14em;
text-transform:uppercase;text-decoration:none}
</style>
</head>
<body>
<div class="tag">Outdoors — showcase density (--fit: 1)</div>
<div class="page">
<header class="lintel">
<a class="mark" href="index.html">Shadows Over Westgate</a>
<nav>
<a href="index.html" aria-current="page">The City</a>
<a href="forum.html">Forum</a>
<a href="forum.html">Archive</a>
<a href="forum.html">Enter</a>
</nav>
<div class="rivets"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
</header>
<div class="status"><span class="lamp"></span> The gates are open. Fourteen souls walk the city tonight.</div>
<section class="horizon">
<div class="skyline">
<b style="width:5%;height:52%"></b><b style="width:3%;height:74%"></b><b style="width:7%;height:38%"></b>
<b style="width:4%;height:88%"></b><b style="width:6%;height:46%"></b><b style="width:3%;height:96%"></b>
<b style="width:8%;height:34%"></b><b style="width:5%;height:66%"></b><b style="width:4%;height:44%"></b>
<b style="width:9%;height:28%"></b><b style="width:3%;height:80%"></b><b style="width:6%;height:40%"></b>
<b style="width:4%;height:58%"></b><b style="width:7%;height:32%"></b><b style="width:5%;height:70%"></b>
<b style="width:3%;height:50%"></b><b style="width:8%;height:36%"></b><b style="width:4%;height:62%"></b>
</div>
<div class="inner">
<div class="label">A gothic-fantasy roleplay city</div>
<h1>The lamps are lit.<br>No one is innocent.</h1>
<p>Renaissance stone, clockwork and lightning, and a court that has ruled from behind the shutters for four hundred years. You are already compromised. Decide what it bought you.</p>
<div class="cta">
<a class="btn" href="forum.html">Enter the city</a>
<a class="btn dull" href="forum.html">Read the archive</a>
</div>
</div>
</section>
<section class="band">
<div class="plaque"><div class="label dull">Decadence</div><h3>The Court</h3><p>Houses, favours, and debts that outlive the people who signed them.</p></div>
<div class="plaque"><div class="label dull">Decay</div><h3>The Wards</h3><p>Candlewharf, Ashgate, the Foundry. Gaslight where the money is, dark where it is not.</p></div>
<div class="plaque"><div class="label dull">Machinery</div><h3>The Guild</h3><p>Clockwork, steam, and the new lightning — sold to anyone who can pay the interest.</p></div>
</section>
<section class="dispatches">
<div class="lead">
<div class="label">Latest dispatches</div>
<a class="more" href="forum.html">All entries →</a>
</div>
<div class="fade-rule" style="margin-bottom:1rem"></div>
<div class="ledger framed">
<div class="row"><a class="t" href="forum.html">The Ashgate Concession</a><span class="m">Ledgerkeeper</span><span class="n">41</span><span class="d">2h</span></div>
<div class="row"><a class="t" href="forum.html">On the matter of the second seal</a><span class="m">V. Marrow</span><span class="n">17</span><span class="d">5h</span></div>
<div class="row" style="border:0"><a class="t" href="forum.html">Petition: the widow at Candlewharf</a><span class="m">House Verrine</span><span class="n">63</span><span class="d">1d</span></div>
</div>
</section>
<footer class="foundation"><span>Westgate</span><span>Est. 1114 · the record is kept</span></footer>
</div>
</body>
</html>
prototype/ornament/README.md
+27
View File
@@ -0,0 +1,27 @@
# Throwaway prototype for #54 — the ornament and frame component set
Not for merge. Nothing here is theme code; it is the named component set made
concrete so it can be looked at.
- `ornament.css` — the component set itself, standalone, zero images.
- `specimen.html` — every named component, at both densities, on one page.
- `real-surface.css` — the same components mapped onto real NodeBB markup.
- `shots.js` — before/after on the live category list and a 13-post topic.
- `shots/` — the images the resolution is judged on.
The palette is candidate B from #53, injected at runtime (`../_base-plumnoir.css`
plus `../candidate-b.css`), so no rebuild is needed to see it.
Replay:
```bash
# specimen page — needs http, not file://: mask-image on an SVG is blocked by CORS
python3 -m http.server 8931 # then open /prototype/ornament/specimen.html
# real surface
cd ../sow-nodebb && nix develop --command make dev-reset && nix develop --command make dev
cd - && node prototype/seed.js
export PLAYWRIGHT_BROWSERS_PATH=$(nix build --print-out-paths --no-link nixpkgs#playwright-driver.browsers)
P=$(nix build --print-out-paths --no-link nixpkgs#playwright-test)
NODE_PATH=$P/lib/node_modules nix shell nixpkgs#playwright-test -c node prototype/ornament/shots.js
```
prototype/ornament/ornament.css
+299
View File
@@ -0,0 +1,299 @@
/* #54 — the ornament and frame component set, as a closed vocabulary.
Throwaway. Zero images: every mark here is CSS. Palette = candidate B (#53). */
/* ---- palette B (from prototype/_base-plumnoir.css + candidate-b.css) ---- */
:root {
--wg-bg: #150e13;
--wg-bg-deep: #0c0810;
--wg-panel: #21161c;
--wg-panel-2: #180f16;
--wg-panel-3: #351e28;
--wg-plum: #351e28;
--wg-plum-soft: #4a2a38;
--wg-gold: #c2a35a;
--wg-gold-rgb: 194, 163, 90;
--wg-gold-lit: #e0c878;
--wg-old-gilt: #a8893f;
--wg-ledger-ink: #d8c28a;
--wg-red: #8e3438;
--wg-stamp: #a84a4e;
--wg-pewter: #9ea7b3;
--wg-pewter-rgb: 158, 167, 179;
--wg-text: #e6e0d6;
--wg-text-soft: #b9b2a6;
--wg-text-muted: #9ea7b3;
/* the four dividers, as tokens — this list is closed */
--wg-ruling: rgba(var(--wg-pewter-rgb), 0.075);
--wg-edge: rgba(var(--wg-pewter-rgb), 0.2);
--wg-edge-soft: rgba(var(--wg-pewter-rgb), 0.11);
--wg-page-width: 1420px;
--wg-ledger-line: 1.78rem;
--wg-font-display: Cinzel, Georgia, serif;
--wg-font-body: Jost, system-ui, sans-serif;
}
/* ======================================================================
1. RAIL — not decoration, a constraint. One left edge, one right edge,
every page, every density (#49 One Rail).
====================================================================== */
.wg-rail {
max-width: var(--wg-page-width);
margin-inline: auto;
padding-inline: 1.5rem;
}
/* ======================================================================
2. PANEL — the bounded surface. Two weights, nothing between.
Edges Fade (#49): the edge is a masked overlay, strongest at the top,
gone by the bottom. No hairline runs corner to corner.
====================================================================== */
.wg-panel {
position: relative;
background: var(--wg-panel);
border-radius: 0;
padding: var(--wg-pad, 1rem);
}
.wg-panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid var(--wg-edge);
-webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.12));
mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.12));
pointer-events: none;
}
/* cheap panel: the same shape one step down. No sheen, no fade — flat. */
.wg-panel--plain {
background: var(--wg-panel-2);
}
.wg-panel--plain::before {
border-color: var(--wg-edge-soft);
-webkit-mask-image: none;
mask-image: none;
}
/* velvet sheen — texture #1. Inset only, never an asset. */
.wg-panel--velvet {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025),
inset 0 0 34px rgba(96, 32, 68, 0.11),
0 10px 26px rgba(0, 0, 0, 0.24);
}
.wg-panel--velvet:hover {
background: color-mix(in srgb, var(--wg-panel) 88%, var(--wg-plum-soft));
}
/* ======================================================================
3. PLAQUE — a name plate, not a band. inline-block is the whole idea.
Page titles and standing labels. Suppressed where the logo does the job.
====================================================================== */
.wg-plaque {
display: inline-block;
background: var(--wg-bg-deep);
border: 1px solid var(--wg-edge);
padding: 0.35rem 1rem;
font-family: var(--wg-font-display);
font-weight: 600;
font-size: 0.86rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wg-ledger-ink);
}
.wg-plaque--gilt {
border-color: rgba(var(--wg-gold-rgb), 0.34);
}
/* the straddling legend: a title sitting on its own panel edge */
.wg-legend {
position: relative;
}
.wg-legend > .wg-plaque {
position: absolute;
top: -1.05rem;
left: 1.25rem;
}
/* ======================================================================
4. BAND — a strip that spans the rail, edge to edge. Never inset.
Shell chrome only: topbar, lintel, footer, thresholds.
====================================================================== */
.wg-band {
position: relative;
background: var(--wg-panel-2);
padding-block: 0.75rem;
}
/* LINTEL — divider #3. Gilt rule that bleeds light downward (#48 Warframe). */
.wg-band--lintel {
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.5);
background-image: linear-gradient(
180deg,
rgba(var(--wg-gold-rgb), 0.1),
transparent 32px
);
}
/* ======================================================================
5. LEDGER — the archive interior. Ruled rows, one line height.
====================================================================== */
.wg-ledger {
background: var(--wg-panel-2);
border-radius: 0;
overflow: hidden;
}
.wg-ledger__row {
display: flex;
gap: 1rem;
align-items: baseline;
min-height: calc(var(--wg-ledger-line) * 1.6);
padding: 0.6rem 1rem;
/* RULING — divider #1. Row separation, nothing else. */
background: linear-gradient(
to bottom,
transparent calc(100% - 1px),
var(--wg-ruling) calc(100% - 1px)
);
/* gilt left mark: this row has something at stake (unread, owned) */
border-left: 1px solid transparent;
}
.wg-ledger__row--marked {
border-left-color: rgba(var(--wg-gold-rgb), 0.34);
}
.wg-ledger__row:last-child {
background: none;
}
/* ======================================================================
DIVIDERS — the closed list. Four, and no fifth.
1. ruling (above, .wg-ledger__row)
2. fading rule
3. lintel (above, .wg-band--lintel)
4. spine
====================================================================== */
.wg-rule {
height: 1px;
border: 0;
background: linear-gradient(90deg, var(--wg-edge), transparent);
}
.wg-spine {
position: relative;
padding-left: 1.25rem;
}
.wg-spine::before {
content: "";
position: absolute;
left: 0;
top: 0.2rem;
bottom: 0.2rem;
width: 1px;
background: linear-gradient(
to bottom,
rgba(var(--wg-gold-rgb), 0.18),
rgba(var(--wg-gold-rgb), 0.07)
);
}
/* ======================================================================
SECTION HEADER — one component, two forms.
A header earns ornament by switching face and case, not by gaining a
background or a flourish (#48 Warframe).
====================================================================== */
.wg-head {
font-family: var(--wg-font-body);
font-weight: 600;
font-size: 1rem;
letter-spacing: 0;
text-transform: none;
color: var(--wg-text-soft);
margin: 0 0 0.5rem;
}
.wg-head--earned {
font-family: var(--wg-font-display);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wg-ledger-ink);
}
/* the one permitted flourish, and only on an earned header: a rule that
starts at the text and fades out to the rail. */
.wg-head--earned.wg-head--ruled {
display: flex;
align-items: center;
gap: 0.9rem;
}
.wg-head--earned.wg-head--ruled::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(var(--wg-gold-rgb), 0.34), transparent);
}
/* ======================================================================
ICON — mask over a token, never a coloured image.
Pewter structures, gilt marks value (#49 Two Metals).
====================================================================== */
.wg-icon {
display: inline-block;
width: var(--wg-icon-size, 20px);
height: var(--wg-icon-size, 20px);
background-color: var(--wg-pewter);
-webkit-mask: var(--wg-icon-src) center / contain no-repeat;
mask: var(--wg-icon-src) center / contain no-repeat;
vertical-align: -0.2em;
}
.wg-icon--gilt {
background-color: var(--wg-gold);
}
/* ======================================================================
HORIZON — texture #2. The city at night instead of hero art.
Showcase only. Radial, warm, never cyan (#49 No Machines).
====================================================================== */
.wg-horizon {
background:
radial-gradient(
120% 80% at 50% 100%,
rgba(var(--wg-gold-rgb), 0.12),
transparent 62%
),
linear-gradient(180deg, var(--wg-bg-deep), var(--wg-bg));
}
/* ======================================================================
DENSITY — one shell, two densities. Ornament weight and row spacing
only. Width never changes (One Rail).
====================================================================== */
.wg-showcase {
--wg-pad: 1.5rem;
--wg-icon-size: 28px;
}
.wg-app {
--wg-pad: 0.75rem;
--wg-icon-size: 20px;
}
/* app density: sheen off, plaques off except the page title, headers reduced */
.wg-app .wg-panel--velvet {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.42);
}
.wg-app .wg-band--lintel {
background-image: linear-gradient(
180deg,
rgba(var(--wg-gold-rgb), 0.06),
transparent 18px
);
}
/* ======================================================================
STAMP — the only red. A state or a mark of loss, never decoration.
====================================================================== */
.wg-stamp {
font-family: var(--wg-font-display);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wg-stamp);
border: 1px solid rgba(168, 74, 78, 0.45);
padding: 0.1rem 0.5rem;
}
prototype/ornament/real-surface.css
+180
View File
@@ -0,0 +1,180 @@
/* #54 — the component set applied to one real surface: the category list and
a topic, on the live stack. Injected at runtime over palette B. Throwaway.
Every rule below is one of the named components doing its job on real
NodeBB markup. Nothing new is invented here. */
/* ---- SQUARE. One shape, every surface. A cut or rounded corner is a second
shape language and the shell only gets one. ---- */
/* specificity has to beat the theme's own `border-radius: 8px !important` */
html body [class],
html body [class]::before,
html body [class]::after,
html body [class] [class],
html body [class] [class][class],
html body blockquote,
html body pre,
html body code,
html body img,
html body input,
html body textarea,
html body button {
border-radius: 0 !important;
}
/* Signets stay square like everything else — the theme's own signet plate is
the settled treatment and it is square. Only the status dot is round,
because it is a dot. */
html body [class] [class].status,
html body .status {
border-radius: 50% !important;
}
/* ---- PANEL: edges fade. No hairline runs corner to corner, but the edge is
present enough to hold the panel off the page. ---- */
li[component="categories/category"],
li[component="category/topic"],
.westgate-surface,
.card,
ul.categories-list,
ul.westgate-categories-list,
[component="post/content"],
.post-container {
border-color: transparent !important;
position: relative;
}
ul.categories-list::after,
ul.westgate-categories-list::after,
.westgate-surface::after,
.post-container::after,
body.template-category .category-header::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(var(--wg-pewter-rgb), 0.34);
-webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.16));
mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.16));
pointer-events: none;
z-index: 2;
}
/* ---- A square edge with no falloff reads as a cut, not an edge. Every
bounded surface sits on a wide, offset-down black shadow: no lift, no
stacking claim, just the corner catching the room (Candlelight). ---- */
html body ul.categories-list,
html body ul.westgate-categories-list,
html body .westgate-surface,
html body .post-container,
html body .topic-list-header,
html body [data-widget-area] .card,
html body.template-category .category-header {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.02),
0 10px 26px rgba(0, 0, 0, 0.34),
0 2px 4px rgba(0, 0, 0, 0.28) !important;
}
/* ---- LEDGER: rows are ruled, not boxed. The category list is a ledger:
one surface, ruled rows, no gaps and no per-row card. ---- */
ul.categories-list,
ul.westgate-categories-list {
gap: 0 !important;
background: var(--wg-panel-2);
}
ul.categories-list li[component="categories/category"],
ul.westgate-categories-list li[component="categories/category"] {
border-radius: 0 !important;
background: none !important;
/* RULING — the only separator inside a ledger */
background-image: linear-gradient(
to bottom,
transparent calc(100% - 1px),
var(--wg-ledger-ruling) calc(100% - 1px)
) !important;
}
ul.categories-list li[component="categories/category"]::after,
ul.westgate-categories-list li[component="categories/category"]::after {
content: none;
}
/* ---- SECTION HEADER: earned form = display face + uppercase + one colour
token + the single permitted flourish, a gilt rule fading to the rail. ---- */
li[component="categories/category"] h2.title,
.category-header h1,
[data-widget-area] .card-header {
display: flex !important;
align-items: center;
gap: 0.9rem;
font-family: var(--wg-font-display) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--wg-ledger-ink) !important;
background: none !important;
}
li[component="categories/category"] h2.title::after,
.category-header h1::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(var(--wg-gold-rgb), 0.34), transparent);
}
/* ---- CASE: Cinzel is always uppercase. One rule, no exceptions, because
its lowercase is a small-caps design and reads as a weaker version of the
same thing rather than a second voice. ---- */
html body [class] h1,
html body [class] h2,
html body [class] h3,
html body .topic-title,
html body .breadcrumb {
text-transform: uppercase !important;
}
/* ---- PLAQUE: the page title becomes a name plate, not a band. ---- */
body.template-category .category-header .category-title,
body.template-topic .topic-title h1 {
display: inline-block;
background: var(--wg-bg-deep);
border: 1px solid var(--wg-border);
padding: 0.35rem 1rem;
font-family: var(--wg-font-display);
font-size: 0.95rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wg-ledger-ink);
}
/* ---- ICON: pewter is structure. Gilt is reserved for what can be touched. ---- */
li[component="categories/category"] .icon [class*="wg-icon-"],
li[component="categories/category"] [class*="wg-icon-"] {
background-color: var(--wg-pewter) !important;
}
/* The category icon plate keeps its plum wash and desaturation: ACP colours
arrive candy-bright and the existing treatment is what pulls them into the
register. Only its ring moves from gilt to pewter — the plate structures,
it does not mark value. */
li[component="categories/category"] .icon {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -3px 7px rgba(0, 0, 0, 0.52),
0 0 0 1px rgba(var(--wg-pewter-rgb), 0.24) !important;
}
/* ---- LINTEL: the topbar is a threshold, and says so. ---- */
.wg-topbar,
#header-menu {
border-bottom: 0 !important;
}
.wg-topbar {
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.5) !important;
background-image: linear-gradient(
180deg,
rgba(var(--wg-gold-rgb), 0.1),
transparent 32px
) !important;
}
/* ---- APP DENSITY: sheen off. Hierarchy is tone plus the two metals. ---- */
li[component="categories/category"],
li[component="category/topic"] {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.42) !important;
}
prototype/ornament/shots.js
Vendored
+47
View File
@@ -0,0 +1,47 @@
// Throwaway screenshotter for #54. Palette B is the ground; the only variable
// is whether the ornament component set is applied.
// PLAYWRIGHT_BROWSERS_PATH=... nix shell nixpkgs#playwright-test -c node prototype/ornament/shots.js
const fs = require('fs');
const path = require('path');
const { chromium } = require('playwright');
const BASE = process.env.BASE || 'http://localhost:4567';
const OUT = path.join(__dirname, 'shots');
const read = (f) => fs.readFileSync(path.join(__dirname, f), 'utf8');
const paletteB = read('../_base-plumnoir.css') + read('../candidate-b.css');
const ornament = read('real-surface.css');
const VARIANTS = { before: paletteB, after: paletteB + ornament };
const PAGES = [
['categories', '/categories'],
['category', '/category/8'],
['topic', '/topic/2'],
];
(async () => {
fs.mkdirSync(OUT, { recursive: true });
const browser = await chromium.launch();
const ctx = await browser.newContext({ viewport: { width: 1600, height: 1000 }, deviceScaleFactor: 2 });
const page = await ctx.newPage();
await page.goto(BASE + '/login');
await page.fill('#username', 'admin');
await page.fill('#password', 'Admin12345!');
await page.click('#login');
await page.waitForLoadState('networkidle');
for (const [name, css] of Object.entries(VARIANTS)) {
for (const [pname, url] of PAGES) {
await page.goto(BASE + url, { waitUntil: 'networkidle' });
await page.addStyleTag({ content: css });
await page.waitForTimeout(500);
await page.screenshot({ path: path.join(OUT, `${pname}-${name}.png`), fullPage: true });
await page.screenshot({
path: path.join(OUT, `${pname}-${name}-crop.png`),
clip: { x: 120, y: 60, width: 1060, height: 620 },
});
console.log(pname, name);
}
}
await browser.close();
})();
prototype/ornament/shots/categories-after-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

prototype/ornament/shots/categories-after.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 559 KiB

prototype/ornament/shots/categories-before-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

prototype/ornament/shots/categories-before.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 635 KiB

prototype/ornament/shots/category-after-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

prototype/ornament/shots/category-after.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 421 KiB

prototype/ornament/shots/category-before-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 KiB

prototype/ornament/shots/category-before.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 418 KiB

prototype/ornament/shots/cats-ledger.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 226 KiB

prototype/ornament/shots/cats-roomy.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

prototype/ornament/shots/cats-tabular-gold.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

prototype/ornament/shots/cats-tabular.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

prototype/ornament/shots/specimen-full.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 235 KiB

prototype/ornament/shots/topic-after-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB

prototype/ornament/shots/topic-after.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 962 KiB

prototype/ornament/shots/topic-before-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

prototype/ornament/shots/topic-before.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 969 KiB

prototype/ornament/specimen.html
+272
View File
@@ -0,0 +1,272 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>#54 — ornament and frame specimen (zero images)</title>
<style>
@font-face {
font-family: Cinzel;
src: url("../../public/fonts/cinzel/cinzel-latin-600-normal.woff2") format("woff2");
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: Jost;
src: url("../../public/fonts/jost/jost-latin-400-normal.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: Jost;
src: url("../../public/fonts/jost/jost-latin-600-normal.woff2") format("woff2");
font-weight: 600;
font-display: swap;
}
</style>
<link rel="stylesheet" href="ornament.css" />
<style>
body {
margin: 0;
background: var(--wg-bg);
color: var(--wg-text-soft);
font-family: var(--wg-font-body);
line-height: 1.55;
}
h1,
h2 {
font-family: var(--wg-font-display);
color: var(--wg-text);
font-weight: 600;
}
section {
padding-block: 2.5rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.note {
color: var(--wg-text-muted);
font-size: 0.82rem;
}
a {
color: var(--wg-gold);
}
.swatchrow {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
align-items: center;
}
</style>
</head>
<body>
<!-- SHELL: identical in both densities. Band + lintel + rail. -->
<div class="wg-band">
<div class="wg-rail" style="display: flex; gap: 1.5rem; align-items: center">
<span
style="
font-family: var(--wg-font-display);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wg-ledger-ink);
"
>Shadows Over Westgate</span
>
<span class="note">topbar — same band, same rail, every page</span>
</div>
</div>
<div class="wg-band wg-band--lintel wg-horizon" style="padding-block: 3rem">
<div class="wg-rail">
<h1 style="margin: 0 0 0.5rem; font-size: 2.6rem">The City and Its Ledger</h1>
<p class="note" style="margin: 0">
LINTEL + HORIZON — the threshold into the page. Zero images: the glow is a radial
gradient, the rule bleeds 32px of light downward.
</p>
</div>
</div>
<main class="wg-rail">
<!-- ================= SHOWCASE DENSITY ================= -->
<section class="wg-showcase">
<h2 class="wg-head wg-head--earned wg-head--ruled">Showcase density</h2>
<p class="note">
Earned header: display face, uppercase, one colour token, and the single permitted
flourish — a gilt rule that starts at the text and fades to the rail.
</p>
<div class="grid" style="margin-top: 1.5rem">
<div class="wg-panel wg-panel--velvet">
<h3 class="wg-head wg-head--earned" style="font-size: 0.95rem">Panel</h3>
<p>
The bounded surface. Its edge is a masked overlay — full strength at the top, gone
by the bottom. No hairline runs corner to corner.
</p>
</div>
<div class="wg-panel wg-panel--plain">
<h3 class="wg-head" style="font-size: 0.95rem">Plain panel</h3>
<p>
The cheap panel. One tone down, softer edge, no sheen, no fade. This is what a
panel looks like when it has nothing to say.
</p>
</div>
<div class="wg-panel wg-panel--velvet wg-legend">
<span class="wg-plaque">Plaque</span>
<p style="margin-top: 0.75rem">
A name plate, not a band — <code>inline-block</code> is the whole idea. As a
straddling legend it sits on its own panel edge.
</p>
</div>
</div>
<h2 class="wg-head wg-head--earned wg-head--ruled" style="margin-top: 2.5rem">
The divider inventory
</h2>
<p class="note">Four. There is no fifth. Anything else is a habit, not a divider.</p>
<div class="wg-panel wg-panel--plain" style="margin-top: 1rem">
<p><strong>1. Ruling</strong> — row separation inside a ledger, and nowhere else.</p>
<div class="wg-ledger" style="margin: 0.75rem 0 1.5rem">
<div class="wg-ledger__row wg-ledger__row--marked">
<span style="color: var(--wg-ledger-ink)">A marked row</span>
<span class="note" style="margin-left: auto">14 replies · 2h</span>
</div>
<div class="wg-ledger__row">
<span>An ordinary row</span>
<span class="note" style="margin-left: auto">3 replies · 5h</span>
</div>
<div class="wg-ledger__row">
<span>Another ordinary row</span>
<span class="note" style="margin-left: auto">no replies · 1d</span>
</div>
</div>
<p><strong>2. Fading rule</strong> — between sections. It ends by fading, not by stopping.</p>
<hr class="wg-rule" style="margin: 0.75rem 0 1.5rem" />
<p><strong>3. Lintel</strong> — a threshold. One per band, at the top of the page shell.</p>
<div class="wg-band wg-band--lintel" style="margin: 0.75rem 0 1.5rem; padding: 1rem">
<span class="note">the band below a lintel</span>
</div>
<p><strong>4. Spine</strong> — a vertical fade marking a sequence: a thread of posts.</p>
<div class="wg-spine" style="margin-top: 0.75rem">
<p style="margin: 0">First reply in the thread.</p>
<p style="margin: 0.5rem 0 0">Second reply, same spine.</p>
</div>
</div>
<h2 class="wg-head wg-head--earned wg-head--ruled" style="margin-top: 2.5rem">
Icons, stamps, and the two metals
</h2>
<div class="wg-panel wg-panel--velvet" style="margin-top: 1rem">
<div class="swatchrow">
<span
class="wg-icon"
style="--wg-icon-src: url('../../public/game-icons/scroll-unfurled.svg')"
></span>
<span
class="wg-icon"
style="--wg-icon-src: url('../../public/game-icons/tavern-sign.svg')"
></span>
<span
class="wg-icon"
style="--wg-icon-src: url('../../public/game-icons/duality-mask.svg')"
></span>
<span class="note">pewter: structure and identity</span>
<span
class="wg-icon wg-icon--gilt"
style="--wg-icon-src: url('../../public/game-icons/wax-seal.svg')"
></span>
<span class="note">gilt: this matters, or can be touched</span>
<span class="wg-stamp">Closed</span>
<span class="note">the only red</span>
</div>
<p class="note" style="margin-bottom: 0">
Every icon is a mask over a token, never a coloured file — one asset serves every
state and forced-colors mode.
</p>
</div>
</section>
<hr class="wg-rule" />
<!-- ================= APP DENSITY ================= -->
<section class="wg-app">
<h2 class="wg-head wg-head--earned wg-head--ruled">App density — same rail, same shell</h2>
<p class="note">
Identical width, identical components. Sheen off, rows tighter, headers reduced, icons
one step smaller. Nothing here is a different component; it is the same set turned down.
</p>
<div style="display: flex; gap: 1rem; align-items: baseline; margin: 1rem 0">
<span class="wg-plaque">Roleplay</span>
<span class="note">the page title keeps its plaque; nothing else gets one</span>
</div>
<div class="wg-ledger">
<div class="wg-ledger__row wg-ledger__row--marked">
<span
class="wg-icon"
style="--wg-icon-src: url('../../public/game-icons/stabbed-note.svg')"
></span>
<span style="color: var(--wg-text)">Notices from the Night Market</span>
<span class="note" style="margin-left: auto">42 · 12m</span>
</div>
<div class="wg-ledger__row">
<span
class="wg-icon"
style="--wg-icon-src: url('../../public/game-icons/mute.svg')"
></span>
<span>Rumors heard near the docks</span>
<span class="note" style="margin-left: auto">9 · 1h</span>
</div>
<div class="wg-ledger__row">
<span
class="wg-icon"
style="--wg-icon-src: url('../../public/game-icons/sword-altar.svg')"
></span>
<span>Journal of a compromised clerk</span>
<span class="note" style="margin-left: auto">3 · 6h</span>
</div>
<div class="wg-ledger__row">
<span
class="wg-icon"
style="--wg-icon-src: url('../../public/game-icons/cowled.svg')"
></span>
<span>Faction standing, second quarter</span>
<span class="note" style="margin-left: auto">27 · 1d</span>
</div>
</div>
<h3 class="wg-head" style="margin-top: 1.5rem">A reduced header (has not earned ornament)</h3>
<div class="wg-panel wg-panel--plain">
<p style="margin: 0">
Body face, no case switch, no rule, no background. The reduced header is the default;
ornament is the exception that has to be argued for.
</p>
</div>
</section>
<hr class="wg-rule" />
<section>
<h2 class="wg-head wg-head--earned">The standing test</h2>
<p class="note" style="max-width: 60ch">
This page contains no images of any kind — every frame, rule, plaque, glow, and icon
above is CSS or a mask over a token. If this page looks unfinished, the component set
is not done.
</p>
</section>
</main>
<div class="wg-band wg-band--lintel" style="margin-top: 3rem; padding-block: 2rem">
<div class="wg-rail">
<span class="note">Footer — the same band and lintel that opened the page.</span>
</div>
</div>
</body>
</html>
prototype/ornament/variant-gold.css
+30
View File
@@ -0,0 +1,30 @@
/* Variant: gilt structures, pewter only speaks.
Two Metals inverted from #53's assignment — the metals keep separate jobs,
but the visible edge work goes back to gold and pewter is demoted to
metadata text only. Answers "there is too much silver now". */
:root {
--wg-border: rgba(var(--wg-gold-rgb), 0.2);
--wg-border-soft: rgba(var(--wg-gold-rgb), 0.11);
--wg-ledger-ruling: rgba(var(--wg-gold-rgb), 0.08);
--wg-ledger-rule-strong: rgba(var(--wg-gold-rgb), 0.2);
--wg-ledger-border: rgba(var(--wg-gold-rgb), 0.24);
}
/* panel edges, ledger edge, icon ring: gilt */
html body ul.categories-list::after,
html body ul.westgate-categories-list::after,
html body .westgate-surface::after,
html body .post-container::after,
html body.template-category .category-header::after {
border-color: rgba(var(--wg-gold-rgb), 0.28) !important;
}
html body li[component="categories/category"] .icon {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -3px 7px rgba(0, 0, 0, 0.52),
0 0 0 1px rgba(var(--wg-gold-rgb), 0.28) !important;
}
/* category names keep the ledger ink, one step brighter than body */
html body li[component="categories/category"] h2.title,
html body li[component="categories/category"] h2.title a {
color: var(--wg-ledger-ink) !important;
}
prototype/ornament/variant-roomy.css
+30
View File
@@ -0,0 +1,30 @@
/* Variant: rows breathe. The category list goes back to separate panels with
air between them, instead of one ruled ledger. Same components, same square
shape, same fading edge — only the ledger reading is dropped. */
html body ul.categories-list,
html body ul.westgate-categories-list {
gap: var(--wg-space-sm, 0.75rem) !important;
background: none !important;
}
html body ul.categories-list::after,
html body ul.westgate-categories-list::after {
content: none;
}
html body ul.categories-list li[component="categories/category"],
html body ul.westgate-categories-list li[component="categories/category"] {
background: var(--wg-panel-2) !important;
background-image: none !important;
padding: var(--wg-space-md, 1rem) !important;
}
/* each row gets its own fading edge, since it is a panel again */
html body ul.categories-list li[component="categories/category"]::after,
html body ul.westgate-categories-list li[component="categories/category"]::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(var(--wg-pewter-rgb), 0.34);
-webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.16));
mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.16));
pointer-events: none;
z-index: 2;
}
prototype/ornament/variant-tabular.css
+179
View File
@@ -0,0 +1,179 @@
/* Variant: the ledger row as a line in a record, not three blocks in a row.
The data columns move into WELLS; the left side stays prose. */
/* ---- WELL — a recess, the inverse of Panel. Panel is laid on the surface
and casts down; a well is cut into it and shadows inward. Three of them,
one per reading, bleeding to the row's right edge. The gap between two
wells is their divider: a well never carries a rule inside it. ---- */
html body li[component="categories/category"] > div.col-lg-5 {
background: none !important;
box-shadow: none !important;
align-items: stretch !important;
padding: 0 !important;
gap: 0.4rem !important;
/* the wells sit inside the row's margin on every side — a well cut flush to
the right edge reads as the row running off the page */
margin: 0 !important;
}
/* the stat pair: two equal columns of well, not two little cards */
html body li[component="categories/category"] .meta.stats,
html body li[component="categories/category"] .stats {
display: grid !important;
/* the counts need only their own width; the room goes to the teaser */
grid-template-columns: 6rem 6rem !important;
justify-content: end !important;
gap: 0.4rem !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
/* the well itself */
html body li[component="categories/category"] .stats .card,
html body li[component="categories/category"] .stats .card-header,
html body li[component="categories/category"] .teaser {
/* the basin sits below the row it is cut into, but not as dead as the
page floor: between panel-2 and bg-deep */
background: color-mix(in srgb, var(--wg-panel-2) 45%, var(--wg-bg-deep)) !important;
background-image: none !important;
border: 0 !important;
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(var(--wg-gold-rgb), 0.1) !important;
padding: 0.5rem 0.85rem !important;
}
/* the teaser is prose, so it gets the room and a proper margin of its own */
html body li[component="categories/category"] .teaser {
flex: 1 1 auto !important;
/* the basin's inset is even on all four sides — a wider left/right inset
reads as the text not filling the well */
padding: 0.55rem !important;
}
/* the teaser's inner blocks are flex items once the well is a flex box, so
they shrink to their text and stop filling. Make them fill it. */
html body li[component="categories/category"] .lastpost,
html body li[component="categories/category"] .westgate-lastpost {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
}
html body li[component="categories/category"] [component="category/posts"] {
padding-left: 0 !important;
width: 100% !important;
min-width: 0 !important;
/* the byline and its line of prose are one block, not two rows */
gap: 0.1rem !important;
height: auto !important;
line-height: 1.35 !important;
}
html body li[component="categories/category"] .teaser .text-nowrap {
line-height: 1.2 !important;
/* the signet's ring is drawn outside its 18px box, and this row is
`text-truncate` (overflow: hidden), so at x=0 the left of the ring is cut.
Give it the ring's width back. */
padding-left: 2px !important;
}
html body li[component="categories/category"] .stats .card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
/* the number carries; the label is engraved and small */
html body li[component="categories/category"] .stats .card > span:first-child {
font-family: var(--wg-font-display) !important;
color: var(--wg-text) !important;
}
html body li[component="categories/category"] .stats .card > span + span,
html body li[component="categories/category"] .stats small {
font-family: var(--wg-font-display) !important;
font-size: 0.78rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--wg-text-muted) !important;
}
/* the teaser well reads as text, so it is set left and loses NodeBB's
inline pure-white rule — a ledger has one ruling weight, not two */
html body li[component="categories/category"] .teaser {
display: flex !important;
align-items: center !important;
}
html body li[component="categories/category"] .teaser *,
html body li[component="categories/category"] .lastpost,
html body li[component="categories/category"] .westgate-lastpost {
text-align: left !important;
border-left: 0 !important;
padding-left: 0 !important;
}
/* the byline row must stretch, or it shrinks to its own text and the
`text-truncate` on it starts clipping the signet */
html body li[component="categories/category"] [component="category/posts"],
html body li[component="categories/category"] .lastpost,
html body li[component="categories/category"] .westgate-lastpost {
align-items: stretch !important;
justify-content: center !important;
}
html body li[component="categories/category"] .teaser .text-nowrap,
html body li[component="categories/category"] .teaser .post-content {
width: 100% !important;
max-width: 100% !important;
}
html body li[component="categories/category"] .teaser p,
html body li[component="categories/category"] [component="category/posts"] p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0 !important;
color: var(--wg-text-muted) !important;
}
/* the left side is prose and stops at its own measure; the wells take the
room that was standing empty between the two */
html body li[component="categories/category"] > div.col-lg-7 {
flex: 0 0 46% !important;
max-width: 46% !important;
}
html body li[component="categories/category"] > div.col-lg-5 {
flex: 1 1 auto !important;
max-width: none !important;
}
/* one baseline for the whole row, so rows scan as lines rather than pages.
The columns stretch: a centred well cannot grow, so a two-line teaser
overflows it top and bottom and gets clipped. */
html body li[component="categories/category"] {
align-items: stretch !important;
}
html body li[component="categories/category"] .teaser,
html body li[component="categories/category"] .lastpost,
html body li[component="categories/category"] .westgate-lastpost,
html body li[component="categories/category"] [component="category/posts"] {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
/* the clamp keeps its own overflow — it is what puts the ellipsis on. But its
line box has to be taller than the glyphs, or `overflow: hidden` shaves the
ascenders off the first line and the descenders off the last. */
html body li[component="categories/category"] .post-content {
height: auto !important;
min-height: 0 !important;
line-height: 1.5 !important;
/* NodeBB's `line-clamp-sm-2` clamps by a hard `max-height` sized to its own
line-height. Ours is taller, so that max-height cuts the glyphs. Drop it
and clamp by line count instead. */
max-height: none !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
html body li[component="categories/category"] h2.title {
margin-bottom: 0.15rem !important;
}
prototype/probe.js
Vendored
+48
View File
@@ -0,0 +1,48 @@
// Did the candidate CSS actually reach the pixels? Computed-style probe for #53.
const fs = require('fs');
const path = require('path');
const { chromium } = require('playwright');
const BASE = process.env.BASE || 'http://localhost:4567';
const read = (f) => fs.readFileSync(path.join(__dirname, f), 'utf8');
const base = read('_base-plumnoir.css');
const CANDIDATES = { baseline: '', a: base, b: base + read('candidate-b.css') };
const PROBES = [
['body', 'backgroundColor'],
['[component="post"]', 'backgroundColor'],
['[component="post"] .post-header, [component="post"] .topic-item-header', 'color'],
['.timeago', 'color'],
['[component="post"]', 'borderTopColor'],
['.topic-title, h1', 'color'],
['a[href^="/user/"]', 'color'],
];
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1600, height: 1000 } });
await page.goto(BASE + '/login');
await page.fill('#username', 'admin');
await page.fill('#password', 'Admin12345!');
await page.click('#login');
await page.waitForLoadState('networkidle');
const rows = {};
for (const [name, css] of Object.entries(CANDIDATES)) {
await page.goto(BASE + '/topic/2', { waitUntil: 'networkidle' });
if (css) await page.addStyleTag({ content: css });
rows[name] = await page.evaluate(
(probes) =>
probes.map(([sel, prop]) => {
const el = document.querySelector(sel);
return el ? getComputedStyle(el)[prop] : 'MISSING';
}),
PROBES,
);
}
PROBES.forEach(([sel, prop], i) => {
console.log(
`${sel} ${prop}\n baseline ${rows.baseline[i]}\n a ${rows.a[i]}\n b ${rows.b[i]}`,
);
});
await browser.close();
})();
prototype/seed.js
Vendored
+88
View File
@@ -0,0 +1,88 @@
// Throwaway seeder for #53: categories + one dense topic, over the REST API.
// node prototype/seed.js (needs the dev stack up on :4567)
const BASE = process.env.BASE || 'http://localhost:4567';
const USER = 'admin', PASS = 'Admin12345!';
let cookie = '';
async function req(path, opts = {}) {
const res = await fetch(BASE + path, {
...opts,
redirect: 'manual',
headers: { 'Content-Type': 'application/json', Cookie: cookie, ...(opts.headers || {}) },
});
const set = res.headers.getSetCookie?.() || [];
if (set.length) cookie = set.map((c) => c.split(';')[0]).join('; ');
const text = await res.text();
try { return { status: res.status, body: JSON.parse(text) }; } catch { return { status: res.status, body: text }; }
}
const CATS = [
['The Gate House', 'Announcements from the Warden of the Gate. Read before you post.'],
['The Velvet Ledger', 'In-character correspondence, letters, and the record of the city.'],
['The Undercroft', 'Rules lawyering, builds, and mechanics. Bring numbers.'],
['Petitions', 'Support, bug reports, and requests to the staff.'],
['The Long Table', 'Off-topic. Keep it civil, keep it quiet.'],
];
const POSTS = [
'The lamplighters have not come to the Ashgate quarter in nine nights. The Watch says this is a matter of budget. The Watch says a great many things.',
'It is a matter of budget. The oil comes up the river and the river is being taxed twice, once by the Crown and once by whoever is currently pretending to be the Crown at the Narrows.',
'Nine nights is long enough that people have started leaving their own lamps out. Which is charity, and also a list of which houses have oil.',
'I walked it last week. There are chalk marks on seven doors between the cooperage and the old chapel. Not guild marks. Not any mark I know.',
'Post the marks. If they are what I think they are then this is not a budget problem and the Watch is not being slow, it is being paid.',
'I am not posting the marks in a public thread. Ask me in the Ledger and I will write it out properly.',
'Seconding that. Last time someone posted a sigil here it was scrubbed off every door in the quarter inside a day and we learned nothing.',
'For what it is worth the chapel bell has also stopped, and nobody has said a word about that either.',
'The bell is a rope problem, not a conspiracy. I fixed a bell in Southcant last winter, same silence, same rumours, one frayed rope.',
'Then the rope was cut, in the same nine nights the lamps went out, in the same quarter. You are describing a coincidence as if it were a comfort.',
'Nobody here has said the word out loud so I will: the last time a quarter went dark and quiet, three families sold their houses in a week and none of them were seen again.',
'They were seen. Just not by anyone willing to say where.',
];
(async () => {
await req('/login'); // prime csrf
const cfg = await req('/api/config');
const csrf = cfg.body.csrf_token;
const h = { 'x-csrf-token': csrf };
const login = await req('/login', { method: 'POST', headers: h, body: JSON.stringify({ username: USER, password: PASS }) });
if (login.status >= 400) throw new Error('login failed: ' + login.status + ' ' + JSON.stringify(login.body));
const cfg2 = await req('/api/config');
const h2 = { 'x-csrf-token': cfg2.body.csrf_token };
const cids = [];
for (const [name, description] of CATS) {
const r = await req('/api/v3/categories', { method: 'POST', headers: h2, body: JSON.stringify({ name, description }) });
if (!r.body?.response?.cid) throw new Error('category failed: ' + JSON.stringify(r.body));
cids.push(r.body.response.cid);
console.log('category', name, '->', r.body.response.cid);
}
// a few short topics so the category list has recent activity
const titles = [
'The lamps in the Ashgate quarter',
'Read this before you post in the Ledger',
'Damage reduction stacking, one more time',
'Cannot log in after the patch',
'What is everyone drinking',
];
let denseTid = null;
for (let i = 0; i < titles.length; i++) {
const r = await req('/api/v3/topics', {
method: 'POST', headers: h2,
body: JSON.stringify({ cid: cids[i % cids.length], title: titles[i], content: POSTS[0] }),
});
const tid = r.body?.response?.tid;
console.log('topic', titles[i], '->', tid);
if (i === 0) denseTid = tid;
}
for (const content of POSTS.slice(1)) {
await req(`/api/v3/topics/${denseTid}`, { method: 'POST', headers: h2, body: JSON.stringify({ content }) });
}
// one quoted reply, so candidate C's paper inset has something to render
await req(`/api/v3/topics/${denseTid}`, {
method: 'POST', headers: h2,
body: JSON.stringify({ content: '> They were seen. Just not by anyone willing to say where.\n\nThat is the whole city in one line, and I would like it on a plaque.' }),
});
console.log('dense topic:', BASE + '/topic/' + denseTid);
})();
prototype/shell.css
-108
View File
@@ -1,108 +0,0 @@
/* Throwaway prototype — Frame B shell, two metals, one shell / two densities.
Not for merge. Values here are candidates, not tokens. */
:root{
--gold:#c2a35a; --gilt:#a8893f; --gold-lit:#e0c878;
--plum-noir:#351e28; --blood:#8e3438; --wax:#a84a4e;
--crypt:#0f0d12; --grave:#09080b;
--panel:#18141d; --panel-deep:#110f15; --panel-raised:#201924;
--bone:#e6e0d6; --ash:#b9b2a6; --dust:#9a9086;
--ink:#d8c28a; --ink-muted:#a99d8f;
/* second metal — structural only */
--pewter:#8c8f97; --pewter-deep:#5a5d64;
--filament:#c8b08a;
/* the Threshold: one knob per density */
--fit:1; /* ornament weight: 1 outdoors, 0.35 indoors */
--page:1420px;
--rail:2rem; /* One Rail: the only horizontal edge on any page */
}
*{box-sizing:border-box}
body{margin:0;background:var(--grave);color:var(--ash);
font:400 1rem/1.6 Jost,system-ui,sans-serif}
a{color:var(--gold)}
h1,h2,h3{font-family:Cinzel,Georgia,serif;font-weight:600;color:var(--bone);margin:0;
text-shadow:0 1px 0 rgba(0,0,0,.9), 0 0 10px rgba(104,32,76,.16)}
.label{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.78rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.label.dull{color:var(--pewter)}
.page{max-width:var(--page);margin:0 auto}
.fade-rule{height:1px;background:linear-gradient(90deg,transparent,var(--gilt),transparent)}
/* ---- lintel: identical on every page ---- */
.lintel{
display:flex;align-items:center;gap:2rem;padding:.85rem var(--rail);position:relative;
background:linear-gradient(180deg,#1b1a1f,#111015);
border-top:1px solid rgba(140,143,151,calc(.28 * var(--fit) + .06));
box-shadow:0 14px 30px rgba(0,0,0,.5);
}
/* the lintel's underside is a gilt rule that fades out, not a hard line */
.lintel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(194,163,90,.32) 12%,
rgba(194,163,90,.32) 88%,transparent)}
.rivets{position:absolute;inset:auto 0 6px 0;display:flex;justify-content:space-between;
padding:0 1rem;opacity:var(--fit)}
.rivets i{width:4px;height:4px;border-radius:50%;background:var(--pewter-deep);
box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.mark{font-family:Cinzel,serif;color:var(--gold);letter-spacing:.18em;
text-transform:uppercase;font-size:.86rem;text-decoration:none}
.lintel nav{display:flex;gap:1.6rem;margin-left:auto}
.lintel nav a{color:var(--ink-muted);text-decoration:none;font-family:Cinzel,serif;
font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.lintel nav a:hover{color:var(--gold-lit)}
.lintel nav a[aria-current]{color:var(--gold);border-bottom:1px solid var(--gilt)}
/* ---- status: a sentence, on every page ---- */
.status{display:flex;align-items:center;gap:.8rem;padding:.9rem var(--rail);
background:var(--panel-deep);font-size:.88rem;color:var(--ink-muted);
position:relative}
.status::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(140,143,151,.24) 12%,
rgba(140,143,151,.24) 88%,transparent)}
.lamp{width:8px;height:8px;border-radius:50%;background:var(--filament);
box-shadow:0 0 10px 2px rgba(200,176,138,.5)}
/* ---- foundation: identical on every page ---- */
.foundation{padding:1.6rem var(--rail);background:#0a090c;position:relative;
display:flex;justify-content:space-between;color:var(--dust);
font-size:.74rem;letter-spacing:.1em}
.foundation::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(194,163,90,.26) 12%,
rgba(194,163,90,.26) 88%,transparent)}
/* ---- buttons ---- */
.btn{display:inline-block;padding:.6rem 1.3rem;font-family:Cinzel,serif;font-size:.76rem;
letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--gilt);
color:var(--ink);background:linear-gradient(180deg,#2a2214,#1a1510);text-decoration:none}
.btn.dull{border-color:rgba(140,143,151,.4);color:var(--pewter);
background:linear-gradient(180deg,#232529,#16171b)}
/* ---- gilded frame: a notched plate with corner marks, not a box ----
Edges fade rather than stop; corners are cut, then re-marked in gilt. */
/* No corner marks: an ornament inset from an edge agrees with nothing and
reads as misalignment. The plate is carried by material and fading rules. */
.framed{position:relative}
/* a rule that fades at both ends — the default separator */
.hair{height:1px;border:0;margin:0;
background:linear-gradient(90deg,transparent,rgba(194,163,90,.34) 18%,
rgba(194,163,90,.34) 82%,transparent)}
.hair.dull{background:linear-gradient(90deg,transparent,rgba(140,143,151,.3) 18%,
rgba(140,143,151,.3) 82%,transparent)}
/* ---- ledger interior: the archive material ---- */
.ledger{background:var(--panel);
box-shadow:inset 0 0 0 1px rgba(194,163,90,.10),
inset 0 1px 0 rgba(255,255,255,.022),
0 8px 22px rgba(0,0,0,.28)}
.ledger .row{display:grid;grid-template-columns:1fr 8rem 4rem 5rem;gap:1rem;
align-items:baseline;min-height:1.78rem;padding:.5rem 1.2rem;
border-bottom:1px solid rgba(194,163,90,.07)}
.ledger .row:hover{background:linear-gradient(90deg,rgba(53,30,40,.55),transparent)}
.ledger .t{color:var(--ink);font-family:Cinzel,serif;font-size:.95rem;text-decoration:none}
.ledger .m,.ledger .n,.ledger .d{font-size:.8rem;text-align:right;color:var(--dust)}
.ledger .n{color:var(--gold);font-variant-numeric:tabular-nums}
/* header row uses pewter — it structures, it is not touchable */
.ledger .head{background:var(--panel-deep);border-bottom:1px solid rgba(140,143,151,.2)}
.ledger .head span{font-family:Cinzel,serif;font-size:.7rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--pewter)}
.tag{color:#7a7168;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
text-align:center;padding:1rem 0 .4rem}
prototype/shots.js
Vendored
+52
View File
@@ -0,0 +1,52 @@
// Throwaway screenshotter for #53. Logs in, then for each candidate injects the
// candidate's :root override at runtime and shoots the pages that matter.
// PLAYWRIGHT_BROWSERS_PATH=... nix shell nixpkgs#playwright-test -c node prototype/shots.js
const fs = require('fs');
const path = require('path');
const { chromium } = require('playwright');
const BASE = process.env.BASE || 'http://localhost:4567';
const OUT = process.env.OUT || path.join(__dirname, 'shots');
const read = (f) => fs.readFileSync(path.join(__dirname, f), 'utf8');
const base = read('_base-plumnoir.css');
const CANDIDATES = {
baseline: '',
a: base + read('candidate-a.css'),
b: base + read('candidate-b.css'),
c: base + read('candidate-b.css') + read('candidate-c.css'),
};
const PAGES = [
['topic', '/topic/2'],
['categories', '/categories'],
['cards', process.env.CARDS_URL || '/recent'],
];
(async () => {
fs.mkdirSync(OUT, { recursive: true });
const browser = await chromium.launch();
const ctx = await browser.newContext({ viewport: { width: 1600, height: 1000 }, deviceScaleFactor: 2 });
const page = await ctx.newPage();
await page.goto(BASE + '/login');
await page.fill('#username', 'admin');
await page.fill('#password', 'Admin12345!');
await page.click('#login');
await page.waitForLoadState('networkidle');
for (const [name, css] of Object.entries(CANDIDATES)) {
for (const [pname, url] of PAGES) {
await page.goto(BASE + url, { waitUntil: 'networkidle' });
if (css) await page.addStyleTag({ content: css });
await page.waitForTimeout(400);
const file = path.join(OUT, `${pname}-${name}.png`);
await page.screenshot({ path: file, fullPage: true });
// close crop: the same region every time, so candidates can be compared at real size
const crop = path.join(OUT, `${pname}-${name}-crop.png`);
await page.screenshot({ path: crop, clip: { x: 120, y: 60, width: 1060, height: 620 } });
console.log(file);
}
}
await browser.close();
})();
prototype/shots/cards-a-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 728 KiB

prototype/shots/cards-a.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

prototype/shots/cards-b-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 728 KiB

prototype/shots/cards-b.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

prototype/shots/cards-baseline-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 720 KiB

prototype/shots/cards-baseline.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

prototype/shots/cards-c-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 728 KiB

prototype/shots/cards-c.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

prototype/shots/categories-a-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

prototype/shots/categories-a.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 629 KiB

prototype/shots/categories-b-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 KiB

prototype/shots/categories-b.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 634 KiB

prototype/shots/categories-baseline-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 205 KiB

prototype/shots/categories-baseline.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 619 KiB

prototype/shots/categories-c-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 KiB

prototype/shots/categories-c.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 634 KiB

prototype/shots/home-b.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 KiB

prototype/shots/home-baseline.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 478 KiB

prototype/shots/quote-c.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 217 KiB

prototype/shots/topic-a-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

prototype/shots/topic-a.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 964 KiB

prototype/shots/topic-b-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

prototype/shots/topic-b.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 KiB

prototype/shots/topic-baseline-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

prototype/shots/topic-baseline.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 959 KiB

prototype/shots/topic-c-crop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

prototype/shots/topic-c.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 970 KiB

scss/westgate/_categories.scss
+13 -13
View File
@@ -24,7 +24,7 @@ li[component="categories/category"] {
}
li[component="categories/category"].unread {
border-color: rgba(194, 163, 90, 0.24) !important;
border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
}
li[component="categories/category"] .icon {
@@ -34,8 +34,8 @@ li[component="categories/category"] .icon {
// plate into the velvet register while keeping the per-category hue
background-image: linear-gradient(
160deg,
rgba(42, 18, 34, 0.42),
rgba(9, 8, 11, 0.58)
rgba(var(--wg-plum-rgb), 0.42),
rgba(var(--wg-bg-deep-rgb), 0.58)
);
box-shadow:
inset 0 1px 0 rgba(255, 242, 204, 0.28),
@@ -55,8 +55,8 @@ body.template-category .category-header .icon {
border: 1px solid var(--wg-etched-highlight);
background-image: linear-gradient(
160deg,
rgba(42, 18, 34, 0.42),
rgba(9, 8, 11, 0.58)
rgba(var(--wg-plum-rgb), 0.42),
rgba(var(--wg-bg-deep-rgb), 0.58)
);
filter: saturate(0.62) contrast(1.12);
box-shadow:
@@ -223,8 +223,8 @@ li[component="categories/category"] h2.title::after {
height: 1px;
background: linear-gradient(
to right,
rgba(194, 163, 90, 0.13),
rgba(194, 163, 90, 0.045) 58%,
rgba(var(--wg-gold-rgb), 0.13),
rgba(var(--wg-gold-rgb), 0.045) 58%,
transparent 94%
);
pointer-events: none;
@@ -261,7 +261,7 @@ ul.category-children {
min-height: 2.1rem;
padding: 0.25rem 0.65rem 0.25rem 0.3rem;
background: rgba(44, 22, 34, 0.3);
border: 1px solid rgba(194, 163, 90, 0.11);
border: 1px solid rgba(var(--wg-gold-rgb), 0.11);
border-radius: 8px;
transition:
background 0.18s ease,
@@ -304,12 +304,12 @@ ul.category-children {
.category-children-item > div:hover,
.westgate-category-child:hover {
background: rgba(70, 30, 48, 0.4);
border-color: rgba(194, 163, 90, 0.24);
border-color: rgba(var(--wg-gold-rgb), 0.24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.category-children-item a {
color: #d8c28a !important;
color: var(--wg-ledger-ink) !important;
display: block;
min-width: 0;
font-weight: 600;
@@ -318,14 +318,14 @@ ul.category-children {
}
.category-children-item a:hover {
color: #e0c878 !important;
color: var(--wg-gold-lit) !important;
}
li[component="categories/category"] .meta.stats > div {
min-height: 3.55rem;
padding: var(--wg-space-2xs) var(--wg-space-xs);
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.09) !important;
border-radius: 3px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
@@ -349,7 +349,7 @@ li[component="categories/category"] .meta.stats .text-muted {
}
li[component="categories/category"] .lastpost {
border-left-color: rgba(194, 163, 90, 0.36) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.36) !important;
}
li[component="categories/category"] .teaser .avatar {
scss/westgate/_controls.scss
+78 -78
View File
@@ -1,13 +1,13 @@
.btn-primary {
--bs-btn-bg: #5a4a1a;
--bs-btn-border-color: #a8893f;
--bs-btn-bg: var(--wg-gold-plate);
--bs-btn-border-color: var(--wg-gold-soft);
--bs-btn-color: #f0e6d8;
--bs-btn-hover-bg: #6a5720;
--bs-btn-hover-border-color: #c2a35a;
--bs-btn-hover-color: #fff4dd;
--bs-btn-hover-bg: var(--wg-gold-plate-hover);
--bs-btn-hover-border-color: var(--wg-gold);
--bs-btn-hover-color: var(--wg-gold-hi);
--bs-btn-active-bg: #493914;
--bs-btn-active-border-color: #c2a35a;
background-image: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
--bs-btn-active-border-color: var(--wg-gold);
background-image: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 8px rgba(0, 0, 0, 0.24);
@@ -15,7 +15,7 @@
.btn-primary:hover,
.btn-primary:focus {
background-image: linear-gradient(to bottom, #6a5720 0%, #53431a 100%);
background-image: linear-gradient(to bottom, var(--wg-gold-plate-hover) 0%, var(--wg-gold-plate-mid) 100%);
}
.btn-secondary,
@@ -23,13 +23,13 @@
.btn-ghost,
.btn-outline-secondary {
--bs-btn-color: #d8cec0;
--bs-btn-bg: rgba(8, 7, 10, 0.12);
--bs-btn-border-color: rgba(216, 194, 138, 0.28);
--bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
--bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
--bs-btn-hover-color: var(--wg-text);
--bs-btn-hover-bg: rgba(194, 163, 90, 0.075);
--bs-btn-hover-border-color: rgba(216, 194, 138, 0.44);
--bs-btn-active-bg: rgba(194, 163, 90, 0.12);
--bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
--bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.075);
--bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
--bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
--bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
background-image: linear-gradient(
to bottom,
rgba(255, 244, 221, 0.018),
@@ -39,36 +39,36 @@
}
.btn-light {
--bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
--bs-btn-hover-border-color: rgba(216, 194, 138, 0.5);
--bs-btn-active-bg: rgba(194, 163, 90, 0.15);
--bs-btn-active-border-color: rgba(216, 194, 138, 0.56);
--bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
--bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
--bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.15);
--bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.56);
}
// core's guest sign-up prompt ships btn-warning/btn-info: remap to the
// theme's two button voices (dark gold plate + ghost)
.guest-cta-alert .btn-warning {
--bs-btn-bg: #5a4a1a;
--bs-btn-border-color: #a8893f;
--bs-btn-bg: var(--wg-gold-plate);
--bs-btn-border-color: var(--wg-gold-soft);
--bs-btn-color: #f0e6d8;
--bs-btn-hover-bg: #6a5720;
--bs-btn-hover-border-color: #c2a35a;
--bs-btn-hover-color: #fff4dd;
--bs-btn-hover-bg: var(--wg-gold-plate-hover);
--bs-btn-hover-border-color: var(--wg-gold);
--bs-btn-hover-color: var(--wg-gold-hi);
--bs-btn-active-bg: #493914;
--bs-btn-active-border-color: #c2a35a;
--bs-btn-active-color: #fff4dd;
background-image: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
--bs-btn-active-border-color: var(--wg-gold);
--bs-btn-active-color: var(--wg-gold-hi);
background-image: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
}
.guest-cta-alert .btn-info {
--bs-btn-color: #d8cec0;
--bs-btn-bg: rgba(8, 7, 10, 0.12);
--bs-btn-border-color: rgba(216, 194, 138, 0.28);
--bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
--bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
--bs-btn-hover-color: var(--wg-text);
--bs-btn-hover-bg: rgba(194, 163, 90, 0.075);
--bs-btn-hover-border-color: rgba(216, 194, 138, 0.44);
--bs-btn-active-bg: rgba(194, 163, 90, 0.12);
--bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
--bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.075);
--bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
--bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
--bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
--bs-btn-active-color: var(--wg-text);
background-image: none;
}
@@ -84,12 +84,12 @@
.modal-footer .btn[data-bs-dismiss="modal"],
.modal-footer .btn[data-dismiss="modal"] {
--bs-btn-color: #d8cec0;
--bs-btn-bg: rgba(8, 7, 10, 0.16);
--bs-btn-border-color: rgba(216, 194, 138, 0.34);
--bs-btn-hover-color: #fff4dd;
--bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
--bs-btn-hover-border-color: rgba(216, 194, 138, 0.52);
--bs-btn-active-bg: rgba(194, 163, 90, 0.13);
--bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.16);
--bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.34);
--bs-btn-hover-color: var(--wg-gold-hi);
--bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
--bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.52);
--bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.13);
background-image: linear-gradient(
to bottom,
rgba(255, 244, 221, 0.024),
@@ -115,7 +115,7 @@
[component="topic/quickreply/container"] .card,
[component="topic/quickreply/container"] .card-body {
background-color: rgba(18, 15, 22, 0.96) !important;
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
color: var(--wg-text) !important;
}
@@ -147,17 +147,17 @@ input[type="number"].form-control::-webkit-outer-spin-button {
.form-check-input[role="switch"] {
background-color: rgba(255, 244, 221, 0.08) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23d8c28a'/%3e%3c/svg%3e") !important;
border-color: rgba(216, 194, 138, 0.26) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.26) !important;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.48),
0 0 0 1px rgba(8, 7, 10, 0.46) !important;
0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.46) !important;
cursor: pointer;
}
.form-switch .form-check-input:hover,
.form-check-input[role="switch"]:hover {
background-color: rgba(255, 244, 221, 0.12) !important;
border-color: rgba(216, 194, 138, 0.38) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.38) !important;
}
.form-switch .form-check-input:checked,
@@ -172,10 +172,10 @@ input[type="number"].form-control::-webkit-outer-spin-button {
.form-switch .form-check-input:focus,
.form-check-input[role="switch"]:focus {
border-color: rgba(216, 194, 138, 0.5) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.5) !important;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(194, 163, 90, 0.3) !important;
0 0 0 1px rgba(var(--wg-gold-rgb), 0.3) !important;
}
.quick-reply .card,
@@ -213,7 +213,7 @@ input[type="number"].form-control::-webkit-outer-spin-button {
.composer input:focus,
.composer .CodeMirror-focused {
background-color: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026),
0 0 0 1px var(--wg-focus) !important;
@@ -250,17 +250,17 @@ table[component="notification/table"],
li[component="post"] .content table {
--bs-table-bg: transparent;
--bs-table-color: var(--wg-text-soft);
--bs-table-border-color: rgba(194, 163, 90, 0.16);
--bs-table-striped-bg: rgba(194, 163, 90, 0.035);
--bs-table-border-color: rgba(var(--wg-gold-rgb), 0.16);
--bs-table-striped-bg: rgba(var(--wg-gold-rgb), 0.035);
--bs-table-striped-color: var(--wg-text-soft);
--bs-table-hover-bg: rgba(194, 163, 90, 0.04);
--bs-table-hover-bg: rgba(var(--wg-gold-rgb), 0.04);
--bs-table-hover-color: var(--wg-text);
color: var(--wg-text-soft) !important;
}
// classless markdown tables in posts don't get Bootstrap's .table variables
li[component="post"] .content table :where(th, td) {
border-color: rgba(194, 163, 90, 0.16);
border-color: rgba(var(--wg-gold-rgb), 0.16);
}
table[component="notification/table"] :where(th, td, label) {
@@ -277,7 +277,7 @@ li[component="post"] .content table thead :where(th, td) {
}
table[component="notification/table"] tbody tr {
border-color: rgba(194, 163, 90, 0.1) !important;
border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
}
table[component="notification/table"] a[data-type] {
@@ -296,13 +296,13 @@ table[component="notification/table"] a[data-type] {
table[component="notification/table"] a[data-type]:hover,
table[component="notification/table"] a[data-type]:focus {
background-color: rgba(194, 163, 90, 0.075);
background-color: rgba(var(--wg-gold-rgb), 0.075);
color: var(--wg-text);
}
.tool-modal {
background: transparent !important;
border-color: rgba(194, 163, 90, 0.16) !important;
border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
}
.tool-modal .bootstrap-tagsinput {
@@ -316,7 +316,7 @@ table[component="notification/table"] a[data-type]:focus {
linear-gradient(
to bottom,
transparent calc(100% - 1px),
rgba(194, 163, 90, 0.055) calc(100% - 1px)
rgba(var(--wg-gold-rgb), 0.055) calc(100% - 1px)
),
rgba(12, 10, 15, 0.92) !important;
background-size:
@@ -337,10 +337,10 @@ table[component="notification/table"] a[data-type]:focus {
padding: 0.2rem 0.48rem !important;
background: linear-gradient(
to bottom,
rgba(216, 194, 138, 0.13),
rgba(var(--wg-ledger-ink-rgb), 0.13),
rgba(70, 45, 52, 0.28)
) !important;
border: 1px solid rgba(194, 163, 90, 0.3) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.3) !important;
border-radius: 3px !important;
color: #e5d6b5 !important;
font-family: var(--wg-font-ui);
@@ -370,7 +370,7 @@ table[component="notification/table"] a[data-type]:focus {
rgba(23, 19, 28, 0.99),
rgba(12, 10, 15, 0.99)
) !important;
border: 1px solid rgba(194, 163, 90, 0.22) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
border-radius: 4px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.42);
}
@@ -399,13 +399,13 @@ table[component="notification/table"] a[data-type]:focus {
linear-gradient(
to bottom,
transparent calc(100% - 1px),
rgba(194, 163, 90, 0.055) calc(100% - 1px)
rgba(var(--wg-gold-rgb), 0.055) calc(100% - 1px)
),
var(--wg-velvet-panel) !important;
background-size:
100% var(--wg-ledger-line),
auto;
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
color: var(--wg-text-soft) !important;
}
@@ -447,7 +447,7 @@ table[component="notification/table"] a[data-type]:focus {
.composer .title-container input:focus,
.composer .title-container .form-control:focus {
border-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
box-shadow: none !important;
}
@@ -457,7 +457,7 @@ table[component="notification/table"] a[data-type]:focus {
.quick-reply .btn,
[component="topic/quickreply/container"] .btn {
color: var(--wg-text-soft) !important;
border-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
}
.composer .formatting-bar .btn:hover,
@@ -480,14 +480,14 @@ table[component="notification/table"] a[data-type]:focus {
rgba(23, 19, 28, 0.98),
rgba(13, 12, 17, 0.99)
) !important;
border-color: rgba(194, 163, 90, 0.16) !important;
border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
color: var(--wg-text-soft) !important;
}
.nav-tabs,
.nav-pills,
.list-group {
border-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
}
.nav-tabs .nav-link,
@@ -499,8 +499,8 @@ table[component="notification/table"] a[data-type]:focus {
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.list-group-item.active {
background: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(194, 163, 90, 0.26) !important;
background: rgba(var(--wg-gold-rgb), 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.26) !important;
color: var(--wg-text) !important;
}
@@ -510,7 +510,7 @@ table[component="notification/table"] a[data-type]:focus {
rgba(24, 20, 29, 0.98),
rgba(17, 15, 21, 0.99)
) !important;
border: 1px solid rgba(194, 163, 90, 0.16) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.16) !important;
border-radius: 8px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}
@@ -542,21 +542,21 @@ table[component="notification/table"] a[data-type]:focus {
.page-link {
background: rgba(255, 255, 255, 0.018);
border-color: rgba(194, 163, 90, 0.1);
border-color: rgba(var(--wg-gold-rgb), 0.1);
color: var(--wg-text-soft);
}
.page-link:hover,
.page-link:focus,
.active > .page-link {
background: rgba(194, 163, 90, 0.12);
border-color: rgba(194, 163, 90, 0.25);
background: rgba(var(--wg-gold-rgb), 0.12);
border-color: rgba(var(--wg-gold-rgb), 0.25);
color: var(--wg-text);
}
.tooltip-inner {
background: #221c24 !important;
border: 1px solid rgba(194, 163, 90, 0.65) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.65) !important;
border-radius: 6px !important;
color: var(--wg-text) !important;
box-shadow:
@@ -576,7 +576,7 @@ table[component="notification/table"] a[data-type]:focus {
rgba(20, 18, 25, 0.96),
rgba(13, 12, 17, 0.98)
) !important;
border-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
color: var(--wg-text-soft) !important;
}
@@ -593,10 +593,10 @@ table[component="notification/table"] a[data-type]:focus {
[component="sidebar/right"] .nav-link[aria-current="page"],
.bottombar-nav .nav-link.active,
.bottombar-nav .nav-link[aria-current="page"] {
background: rgba(194, 163, 90, 0.1) !important;
background: rgba(var(--wg-gold-rgb), 0.1) !important;
color: var(--wg-text) !important;
box-shadow:
inset 0 0 0 1px rgba(194, 163, 90, 0.12),
inset 0 0 0 1px rgba(var(--wg-gold-rgb), 0.12),
inset 0 1px 0 rgba(255, 244, 221, 0.035);
}
@@ -629,14 +629,14 @@ table[component="notification/table"] a[data-type]:focus {
.page-flags [component="flags/filters"] .btn-warning {
--bs-btn-color: var(--wg-text-soft);
--bs-btn-bg: rgba(8, 7, 10, 0.12);
--bs-btn-border-color: rgba(216, 194, 138, 0.28);
--bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
--bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
--bs-btn-hover-color: var(--wg-text);
--bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
--bs-btn-hover-border-color: rgba(216, 194, 138, 0.46);
--bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
--bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.46);
--bs-btn-active-color: var(--wg-text);
--bs-btn-active-bg: rgba(194, 163, 90, 0.12);
--bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
--bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
--bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
background-image: linear-gradient(
to bottom,
rgba(255, 244, 221, 0.018),
scss/westgate/_footer.scss
+4 -4
View File
@@ -1,6 +1,6 @@
.wg-footer {
margin-top: 1.25rem;
border-top: 1px solid rgba(194, 163, 90, 0.16);
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.16);
color: var(--wg-text-muted);
background:
linear-gradient(180deg, rgba(13, 9, 18, 0), rgba(8, 5, 12, 0.76)),
@@ -123,7 +123,7 @@
width: min(100%, var(--wg-page-width));
margin: 0 auto;
padding: 1.375rem clamp(1rem, 4vw, 2rem);
border-top: 1px solid rgba(194, 163, 90, 0.1);
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.1);
p {
margin: 0;
@@ -164,9 +164,9 @@
&:hover,
&:focus {
border-color: rgba(194, 163, 90, 0.22);
border-color: rgba(var(--wg-gold-rgb), 0.22);
color: var(--wg-text-soft);
background: rgba(194, 163, 90, 0.06);
background: rgba(var(--wg-gold-rgb), 0.06);
}
&:focus-visible {
scss/westgate/_pages.scss
+13 -13
View File
@@ -192,33 +192,33 @@ a.sow-card:hover {
text-transform: uppercase;
font-weight: 600;
color: #d8cec0;
background: rgba(194, 163, 90, 0.06);
background: rgba(var(--wg-gold-rgb), 0.06);
padding: 12px 24px;
border-radius: 6px;
border: 1px solid rgba(216, 194, 138, 0.28);
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.28);
transition: background 0.2s, border-color 0.2s;
&:hover,
&:focus {
color: var(--wg-text);
background: rgba(194, 163, 90, 0.075);
border-color: rgba(216, 194, 138, 0.44);
background: rgba(var(--wg-gold-rgb), 0.075);
border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
}
// Matches the theme's .btn-primary dark gold plate (see _controls.scss).
&.primary {
color: #f0e6d8;
background: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
border-color: #a8893f;
background: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
border-color: var(--wg-gold-soft);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 8px rgba(0, 0, 0, 0.24);
&:hover,
&:focus {
color: #fff4dd;
background: linear-gradient(to bottom, #6a5720 0%, #53431a 100%);
border-color: #c2a35a;
color: var(--wg-gold-hi);
background: linear-gradient(to bottom, var(--wg-gold-plate-hover) 0%, var(--wg-gold-plate-mid) 100%);
border-color: var(--wg-gold);
}
}
}
@@ -434,7 +434,7 @@ a.sow-card:hover {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(9, 8, 11, 0.55) 0%, rgba(9, 8, 11, 0.25) 38%, rgba(9, 8, 11, 0.82) 86%, var(--wg-bg) 100%);
background: linear-gradient(180deg, rgba(var(--wg-bg-deep-rgb), 0.55) 0%, rgba(var(--wg-bg-deep-rgb), 0.25) 38%, rgba(var(--wg-bg-deep-rgb), 0.82) 86%, var(--wg-bg) 100%);
}
.sow-home-hero-inner {
@@ -672,7 +672,7 @@ a.sow-card:hover {
line-height: 1.7;
background: var(--wg-ledger-panel);
border: 1px solid var(--wg-ledger-border);
border-left-color: rgba(194, 163, 90, 0.32);
border-left-color: rgba(var(--wg-gold-rgb), 0.32);
border-radius: 6px;
box-shadow: var(--wg-ledger-shadow);
@@ -1000,9 +1000,9 @@ a.sow-card:hover {
text-transform: uppercase;
font-weight: 600;
color: #d8cec0;
background: rgba(194, 163, 90, 0.06);
background: rgba(var(--wg-gold-rgb), 0.06);
padding: 12px 24px;
border: 1px solid rgba(216, 194, 138, 0.28);
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.28);
border-radius: 6px;
}
scss/westgate/_posts.scss
+26 -26
View File
@@ -10,8 +10,8 @@ body.template-topic [component="topic/stats"] {
body.template-topic .topic-info .badge,
body.template-topic [component="topic/stats"] .badge {
background: rgba(8, 7, 10, 0.22) !important;
border-color: rgba(194, 163, 90, 0.16) !important;
background: rgba(var(--wg-bg-deepest-rgb), 0.22) !important;
border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
color: var(--wg-ledger-ink-muted) !important;
font-family: var(--wg-font-ui);
}
@@ -27,7 +27,7 @@ ul[component="topic"].posts::before {
bottom: 1.5rem;
left: 1.55rem;
width: 1px;
background: linear-gradient(to bottom, rgba(194, 163, 90, 0.18), rgba(194, 163, 90, 0.07));
background: linear-gradient(to bottom, rgba(var(--wg-gold-rgb), 0.18), rgba(var(--wg-gold-rgb), 0.07));
pointer-events: none;
}
@@ -37,7 +37,7 @@ li[component="post"] {
li[component="post"] .post-container-parent > .bg-body {
background: var(--wg-bg) !important;
box-shadow: 0 0 0 5px var(--wg-bg), 0 0 0 6px rgba(194, 163, 90, 0.18) !important;
box-shadow: 0 0 0 5px var(--wg-bg), 0 0 0 6px rgba(var(--wg-gold-rgb), 0.18) !important;
}
li[component="post"] .post-container {
@@ -48,7 +48,7 @@ li[component="post"] .post-container {
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto;
border: 1px solid var(--wg-ledger-border) !important;
border-left: 1px solid rgba(194, 163, 90, 0.32) !important;
border-left: 1px solid rgba(var(--wg-gold-rgb), 0.32) !important;
border-radius: 6px !important;
box-shadow: var(--wg-ledger-shadow) !important;
}
@@ -60,13 +60,13 @@ li[component="post"] .post-container::before {
right: 1rem;
left: 1rem;
height: 1px;
background: linear-gradient(to right, rgba(194, 163, 90, 0.16), rgba(194, 163, 90, 0.05), transparent);
background: linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.16), rgba(var(--wg-gold-rgb), 0.05), transparent);
pointer-events: none;
}
li[component="post"].topic-owner-post .post-container,
li[component="post"].self-post .post-container {
border-left-color: rgba(194, 163, 90, 0.46) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.46) !important;
}
li[component="post"] .post-header {
@@ -111,7 +111,7 @@ li[component="post"] .content .wg-mobile-table-scroll {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
scrollbar-width: thin;
}
@@ -134,8 +134,8 @@ li[component="post"] .content h4 {
// re-inked for the dark ledger.
li[component="post"] .content code,
.composer .preview code {
background: rgba(8, 7, 10, 0.45);
border: 1px solid rgba(194, 163, 90, 0.12);
background: rgba(var(--wg-bg-deepest-rgb), 0.45);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
border-radius: 4px;
padding: 0.1em 0.35em;
color: var(--wg-text);
@@ -145,12 +145,12 @@ li[component="post"] .content code,
li[component="post"] .content pre,
.composer .preview pre {
background: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(8, 7, 10, 0.82)) !important;
border: 1px solid rgba(194, 163, 90, 0.22) !important;
background: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(var(--wg-bg-deepest-rgb), 0.82)) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
border-radius: 6px;
padding: 0.85rem 1rem;
color: var(--wg-text-soft) !important;
scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
scrollbar-width: thin;
}
@@ -178,7 +178,7 @@ li[component="post"] .content pre code.hljs,
.hljs-selector-tag,
.hljs-literal,
.hljs-tag {
color: #e0c878;
color: var(--wg-gold-lit);
}
.hljs-string,
@@ -225,29 +225,29 @@ li[component="post"] .content pre code.hljs,
}
li[component="post"] .content blockquote {
background: rgba(42, 18, 34, 0.4);
border: 1px solid rgba(194, 163, 90, 0.14);
background: rgba(var(--wg-plum-rgb), 0.4);
border: 1px solid rgba(var(--wg-gold-rgb), 0.14);
border-radius: 6px;
padding: 0.75rem 1rem;
}
li[component="post"] .post-footer {
border-bottom: 0 !important;
border-top: 1px solid rgba(194, 163, 90, 0.095);
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.095);
padding-top: 0.55rem;
}
li[component="post"] [component="post/actions"] .btn,
li[component="post"] [component="post/reply-count"] {
color: var(--wg-text-muted) !important;
border-color: rgba(194, 163, 90, 0.1) !important;
border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
}
li[component="post"] [component="post/actions"] .btn:hover,
li[component="post"] [component="post/reply-count"]:hover {
color: var(--wg-text) !important;
background: var(--wg-border-soft) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
}
@media (min-width: 992px) {
@@ -293,7 +293,7 @@ li[component="post"] [component="post/downvote"] {
// Font Awesome 7: fa-heart-crack (fa-heart-broken alias)
--fa: "\f7a9";
font-size: 0.95rem;
color: rgba(194, 163, 90, 0.82);
color: rgba(var(--wg-gold-rgb), 0.82);
}
&.downvoted {
@@ -319,7 +319,7 @@ li[component="post"] [component="post/downvote"] {
.topic-sidebar-tools .btn:not(.btn-primary),
[component="topic/navigator"] {
background: rgba(255, 255, 255, 0.018) !important;
border-color: rgba(194, 163, 90, 0.1) !important;
border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
color: var(--wg-text-soft) !important;
}
@@ -363,7 +363,7 @@ li[component="post"] [component="post/downvote"] {
}
body.template-topic .sticky-top hr {
border-color: rgba(194, 163, 90, 0.12);
border-color: rgba(var(--wg-gold-rgb), 0.12);
}
textarea[component="topic/quickreply/text"],
@@ -381,7 +381,7 @@ textarea[component="topic/quickreply/text"],
textarea[component="topic/quickreply/text"]:focus,
.quick-reply textarea:focus {
border-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
box-shadow: none !important;
}
@@ -395,7 +395,7 @@ textarea[component="topic/quickreply/text"]:focus,
.quick-reply .card-body,
[component="topic/quickreply/container"] .card-body {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.05) calc(100% - 1px)),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.05) calc(100% - 1px)),
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto;
border-color: var(--wg-ledger-border) !important;
@@ -405,8 +405,8 @@ textarea[component="topic/quickreply/text"]:focus,
.quick-reply .card-header,
[component="topic/quickreply/container"] .card-header {
background: rgba(8, 7, 10, 0.22) !important;
border-color: rgba(194, 163, 90, 0.12) !important;
background: rgba(var(--wg-bg-deepest-rgb), 0.22) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
color: var(--wg-ledger-ink-muted) !important;
font-family: var(--wg-font-ui);
}
scss/westgate/_search.scss
+1 -1
View File
@@ -7,7 +7,7 @@
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wg-gold);
background: rgba(194, 163, 90, 0.1);
background: rgba(var(--wg-gold-rgb), 0.1);
border: 1px solid var(--wg-ledger-border);
vertical-align: middle;
}
scss/westgate/_surfaces.scss
+16 -16
View File
@@ -7,7 +7,7 @@ body {
body {
--bs-link-color: var(--wg-gold);
--bs-link-color-rgb: 194, 163, 90;
--bs-link-hover-color: #e0c878;
--bs-link-hover-color: var(--wg-gold-lit);
--bs-link-hover-color-rgb: 224, 200, 120;
font-family: var(--wg-font-text);
-webkit-font-smoothing: antialiased;
@@ -34,7 +34,7 @@ a {
&:hover,
&:focus {
color: #e0c878;
color: var(--wg-gold-lit);
}
}
@@ -73,7 +73,7 @@ li[component="categories/category"]:hover,
li[component="category/topic"]:hover,
li[component="post"] .post-container:hover {
background: var(--wg-velvet-panel-hover) !important;
border-color: rgba(194, 163, 90, 0.22) !important;
border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
inset 0 0 38px rgba(120, 36, 84, 0.14),
@@ -142,13 +142,13 @@ samp,
.alert {
background: var(--wg-border-soft);
border-color: rgba(194, 163, 90, 0.18);
border-color: rgba(var(--wg-gold-rgb), 0.18);
color: var(--wg-text-soft);
}
.alert-danger {
background: rgba(142, 52, 56, 0.16);
border-color: rgba(142, 52, 56, 0.32);
background: rgba(var(--wg-red-rgb), 0.16);
border-color: rgba(var(--wg-red-rgb), 0.32);
color: #d8b1b1;
}
@@ -157,7 +157,7 @@ samp,
.user-icon,
.avatar-tooltip .avatar,
.avatar-tooltip img {
border: 1px solid rgba(216, 194, 138, 0.32);
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.32);
box-shadow:
inset 0 1px 0 rgba(255, 242, 204, 0.2),
inset 0 0 0 1px rgba(18, 15, 22, 0.58),
@@ -196,7 +196,7 @@ li[component="category/topic"] .user-icon {
.status {
box-shadow:
0 0 0 2px var(--wg-status-ring),
0 0 0 3px rgba(216, 194, 138, 0.14),
0 0 0 3px rgba(var(--wg-ledger-ink-rgb), 0.14),
0 0 12px rgba(0, 0, 0, 0.34);
&.online {
@@ -255,7 +255,7 @@ li[component="category/topic"] .user-icon {
@mixin wg-velvet-cover {
background-image:
radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%),
linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important;
linear-gradient(100deg, var(--wg-plum), var(--wg-panel-2) 55%, var(--wg-bg-deep)) !important;
}
// replace core's grey-triangle default cover with the velvet material
@@ -288,7 +288,7 @@ li[component="category/topic"] .user-icon {
linear-gradient(
to bottom,
rgba(255, 241, 196, 0.018),
rgba(8, 7, 10, 0.08)
rgba(var(--wg-bg-deepest-rgb), 0.08)
),
var(--wg-velvet-panel) !important;
border: 1px solid var(--wg-border) !important;
@@ -318,7 +318,7 @@ li[component="category/topic"] .user-icon {
.notifications-list .mark-read,
.chats-dropdown .mark-read,
.chats-list .mark-read {
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
border-radius: 6px !important;
background: linear-gradient(
to bottom,
@@ -341,7 +341,7 @@ li[component="category/topic"] .user-icon {
.chats-dropdown .chat-room-btn,
.chats-list .chat-room-btn,
[component="chat/public/room"] {
border: 1px solid rgba(194, 163, 90, 0.12) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.12) !important;
border-radius: 8px !important;
background: transparent !important;
box-shadow: none !important;
@@ -353,7 +353,7 @@ li[component="category/topic"] .user-icon {
[component="chat/public/room"]:focus,
[component="chat/public/room"].unread {
background: var(--wg-border-soft) !important;
border-color: rgba(194, 163, 90, 0.24) !important;
border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
color: var(--wg-text) !important;
}
@@ -384,7 +384,7 @@ li[component="category/topic"] .user-icon {
.chats-list .badge.bg-light {
background: linear-gradient(
to bottom,
rgba(216, 194, 138, 0.13),
rgba(var(--wg-ledger-ink-rgb), 0.13),
rgba(70, 45, 52, 0.28)
) !important;
border: 1px solid var(--wg-focus) !important;
@@ -403,13 +403,13 @@ li[component="category/topic"] .user-icon {
}
.page-flags [component="flags/filters"] {
border-bottom-color: rgba(194, 163, 90, 0.12) !important;
border-bottom-color: rgba(var(--wg-gold-rgb), 0.12) !important;
}
// table variables shared with notification/post tables live in _controls.scss
.page-flags [component="flags/list"] :where(th, td) {
color: var(--wg-text-soft) !important;
border-color: rgba(194, 163, 90, 0.1) !important;
border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
}
.page-flags [component="flags/list"] thead :where(th, td) {
scss/westgate/_tokens.scss
+23 -9
View File
@@ -92,23 +92,37 @@
--wg-plum-soft: #3a1830;
--wg-gold: #c2a35a;
--wg-gold-soft: #a8893f;
--wg-gold-lit: #e0c878;
--wg-gold-hi: #fff4dd;
--wg-gold-plate: #5a4a1a;
--wg-gold-plate-hover: #6a5720;
--wg-gold-plate-mid: #53431a;
--wg-gold-plate-deep: #473914;
--wg-red: #8e3438;
/* prototype (#53): rgb triples so alpha uses swap with the palette candidate */
--wg-gold-rgb: 194, 163, 90;
--wg-ledger-ink-rgb: 216, 194, 138;
--wg-bg-deep-rgb: 9, 8, 11;
--wg-bg-deepest-rgb: 8, 7, 10;
--wg-plum-rgb: 42, 18, 34;
--wg-red-rgb: 142, 52, 56;
--wg-stamp-rgb: 168, 74, 78;
--wg-status-online: #7fb86a;
--wg-status-away: #d9b44a;
--wg-status-dnd: #c55a5f;
--wg-status-offline: #b7b0a6;
--wg-status-ring: rgba(9, 8, 11, 0.9);
--wg-status-ring: rgba(var(--wg-bg-deep-rgb), 0.9);
--wg-text: #e6e0d6;
--wg-text-soft: #b9b2a6;
--wg-text-muted: #9a9086;
--wg-border: rgba(194, 163, 90, 0.14);
--wg-border-soft: rgba(194, 163, 90, 0.08);
--wg-focus: rgba(194, 163, 90, 0.28);
--wg-border: rgba(var(--wg-gold-rgb), 0.14);
--wg-border-soft: rgba(var(--wg-gold-rgb), 0.08);
--wg-focus: rgba(var(--wg-gold-rgb), 0.28);
--wg-focus-ring: #c2a35a;
--wg-ledger-panel: rgba(21, 17, 26, 0.97);
--wg-ledger-ruling: rgba(194, 163, 90, 0.055);
--wg-ledger-rule-strong: rgba(194, 163, 90, 0.16);
--wg-ledger-border: rgba(194, 163, 90, 0.18);
--wg-ledger-ruling: rgba(var(--wg-gold-rgb), 0.055);
--wg-ledger-rule-strong: rgba(var(--wg-gold-rgb), 0.16);
--wg-ledger-border: rgba(var(--wg-gold-rgb), 0.18);
--wg-ledger-ink: #d8c28a;
--wg-ledger-ink-muted: #a99d8f;
--wg-ledger-stamp: #a84a4e;
@@ -118,11 +132,11 @@
--wg-velvet-panel: rgba(24, 20, 29, 0.97);
--wg-velvet-panel-hover: rgba(31, 26, 38, 0.98);
--wg-velvet-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), inset 0 0 34px rgba(96, 32, 68, 0.11), 0 10px 26px rgba(0, 0, 0, 0.24);
--wg-control-bg: linear-gradient(to bottom, rgba(194, 163, 90, 0.15), rgba(194, 163, 90, 0.05));
--wg-control-bg: linear-gradient(to bottom, rgba(var(--wg-gold-rgb), 0.15), rgba(var(--wg-gold-rgb), 0.05));
}
::selection {
background: rgba(194, 163, 90, 0.32);
background: rgba(var(--wg-gold-rgb), 0.32);
color: #fff4dd;
}
scss/westgate/_topbar.scss
+24 -24
View File
@@ -9,7 +9,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
z-index: 1020;
color: var(--wg-text-soft);
background: rgb(24, 20, 29);
border-bottom: 1px solid rgba(194, 163, 90, 0.2);
border-bottom: 1px solid rgba(var(--wg-gold-rgb), 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.04),
0 12px 32px rgba(0, 0, 0, 0.34);
@@ -47,14 +47,14 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
justify-content: center;
width: 2.3rem;
height: 2.3rem;
border: 1px solid rgba(194, 163, 90, 0.36);
border: 1px solid rgba(var(--wg-gold-rgb), 0.36);
border-radius: 50%;
color: var(--wg-gold);
background:
radial-gradient(circle at 38% 24%, rgba(255, 238, 190, 0.2), transparent 30%),
linear-gradient(145deg, rgba(58, 24, 48, 0.7), rgba(10, 9, 13, 0.98));
box-shadow:
inset 0 0 0 1px rgba(9, 8, 11, 0.66),
inset 0 0 0 1px rgba(var(--wg-bg-deep-rgb), 0.66),
0 8px 18px rgba(0, 0, 0, 0.35);
font-family: var(--wg-font-display);
font-weight: 700;
@@ -105,8 +105,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar .nav-item.active > .nav-link,
.wg-topbar .nav-item.active > .navigation-link {
color: #f3ede4;
border-color: rgba(194, 163, 90, 0.2);
background: rgba(194, 163, 90, 0.075);
border-color: rgba(var(--wg-gold-rgb), 0.2);
background: rgba(var(--wg-gold-rgb), 0.075);
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
}
@@ -137,8 +137,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__utility-list [component$="/count"],
.wg-topbar__drawer-actions [component$="/count"],
.wg-topbar [component="navigation/count"] {
background: linear-gradient(to bottom, rgba(142, 52, 56, 0.92), rgba(84, 28, 39, 0.96)) !important;
border: 1px solid rgba(216, 194, 138, 0.26);
background: linear-gradient(to bottom, rgba(var(--wg-red-rgb), 0.92), rgba(84, 28, 39, 0.96)) !important;
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.26);
color: #fff0dc;
}
@@ -159,7 +159,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar .user-dropdown {
min-width: min(22rem, calc(100vw - 1.5rem));
max-width: calc(100vw - 1.5rem);
border: 1px solid rgba(194, 163, 90, 0.22) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
border-radius: 8px !important;
color: var(--wg-text-soft) !important;
background:
@@ -210,7 +210,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__register {
border: 1px solid var(--wg-gold-soft) !important;
color: #f0e6d8 !important;
background: linear-gradient(to bottom, #5a4a1a, #473914) !important;
background: linear-gradient(to bottom, var(--wg-gold-plate), var(--wg-gold-plate-deep)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 8px rgba(0, 0, 0, 0.24);
@@ -221,8 +221,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__register:hover,
.wg-topbar__register:focus {
border-color: var(--wg-gold) !important;
color: #fff4dd !important;
background: linear-gradient(to bottom, #6a5720, #53431a) !important;
color: var(--wg-gold-hi) !important;
background: linear-gradient(to bottom, var(--wg-gold-plate-hover), var(--wg-gold-plate-mid)) !important;
}
.wg-topbar__login,
@@ -241,15 +241,15 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__login {
color: var(--wg-text-soft);
border: 1px solid rgba(194, 163, 90, 0.2);
background: rgba(194, 163, 90, 0.055);
border: 1px solid rgba(var(--wg-gold-rgb), 0.2);
background: rgba(var(--wg-gold-rgb), 0.055);
}
.wg-topbar__login:hover,
.wg-topbar__login:focus {
color: var(--wg-text);
border-color: rgba(194, 163, 90, 0.3);
background: rgba(194, 163, 90, 0.1);
border-color: rgba(var(--wg-gold-rgb), 0.3);
background: rgba(var(--wg-gold-rgb), 0.1);
}
.wg-topbar__burger {
@@ -258,21 +258,21 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border: 1px solid rgba(194, 163, 90, 0.22);
border: 1px solid rgba(var(--wg-gold-rgb), 0.22);
border-radius: 6px;
color: var(--wg-text-soft);
background: rgba(194, 163, 90, 0.055);
background: rgba(var(--wg-gold-rgb), 0.055);
}
.wg-topbar__burger:hover,
.wg-topbar__burger:focus {
color: var(--wg-text);
background: rgba(194, 163, 90, 0.1);
background: rgba(var(--wg-gold-rgb), 0.1);
}
.wg-topbar__drawer {
display: none;
border-top: 1px solid rgba(194, 163, 90, 0.12);
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.12);
background:
linear-gradient(180deg, rgba(255, 244, 221, 0.025), transparent 38%),
$wg-topbar-panel-bg;
@@ -294,10 +294,10 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
display: flex;
align-items: center;
gap: 0.55rem;
border: 1px solid rgba(194, 163, 90, 0.18);
border: 1px solid rgba(var(--wg-gold-rgb), 0.18);
border-radius: 8px;
padding: 0.5rem 0.65rem;
background: rgba(9, 8, 11, 0.45);
background: rgba(var(--wg-bg-deep-rgb), 0.45);
}
.wg-topbar__drawer-search input {
@@ -311,7 +311,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
// The input's own outline is off; put the visible focus ring on its wrapper.
.wg-topbar__drawer-search:focus-within {
border-color: rgba(194, 163, 90, 0.5);
border-color: rgba(var(--wg-gold-rgb), 0.5);
box-shadow: 0 0 0 1px var(--wg-focus);
}
@@ -328,7 +328,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
align-items: center;
justify-content: space-between;
gap: 0.55rem;
border: 1px solid rgba(194, 163, 90, 0.12);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
border-radius: 7px;
padding: 0.62rem 0.7rem;
color: var(--wg-text-soft);
@@ -341,7 +341,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__drawer-actions a:hover,
.wg-topbar__drawer-actions a:focus {
color: var(--wg-text);
border-color: rgba(194, 163, 90, 0.22);
border-color: rgba(var(--wg-gold-rgb), 0.22);
background: var(--wg-border-soft);
}
scss/westgate/_topics.scss
+48 -48
View File
@@ -35,8 +35,8 @@ body.template-category .category-header .description {
.topic-list-header .btn:hover,
.topic-list-header .btn:focus {
background: rgba(194, 163, 90, 0.075) !important;
border-color: rgba(194, 163, 90, 0.26) !important;
background: rgba(var(--wg-gold-rgb), 0.075) !important;
border-color: rgba(var(--wg-gold-rgb), 0.26) !important;
color: var(--wg-text) !important;
}
@@ -61,7 +61,7 @@ li[component="category/topic"] {
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto, auto;
border: 1px solid var(--wg-ledger-border) !important;
border-left: 1px solid rgba(194, 163, 90, 0.34) !important;
border-left: 1px solid rgba(var(--wg-gold-rgb), 0.34) !important;
border-radius: 6px !important;
box-shadow: var(--wg-ledger-shadow) !important;
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
@@ -69,11 +69,11 @@ li[component="category/topic"] {
li[component="category/topic"]:not(.unread) {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.026) calc(100% - 1px)),
linear-gradient(to right, rgba(194, 163, 90, 0.024), transparent 5.25rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.026) calc(100% - 1px)),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.024), transparent 5.25rem),
linear-gradient(100deg, rgba(24, 17, 25, 0.28) 0%, rgba(14, 13, 18, 0.91) 42%, rgba(9, 8, 12, 0.95) 100%) !important;
border-color: rgba(194, 163, 90, 0.085) !important;
border-left-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.085) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.12) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014), inset 0 -1px 0 rgba(0, 0, 0, 0.36) !important;
}
@@ -89,50 +89,50 @@ li[component="category/topic"]::after {
right: 0;
left: 0;
height: 1px;
background: linear-gradient(to right, var(--wg-focus), rgba(194, 163, 90, 0.05), transparent);
background: linear-gradient(to right, var(--wg-focus), rgba(var(--wg-gold-rgb), 0.05), transparent);
pointer-events: none;
}
li[component="category/topic"].unread:nth-child(even) {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.055) calc(100% - 1px)),
linear-gradient(to right, rgba(216, 194, 138, 0.09), transparent 5.25rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.055) calc(100% - 1px)),
linear-gradient(to right, rgba(var(--wg-ledger-ink-rgb), 0.09), transparent 5.25rem),
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto, auto;
}
li[component="category/topic"]:hover {
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), inset 0 0 16px rgba(120, 36, 84, 0.07), 0 8px 18px rgba(0, 0, 0, 0.2) !important;
}
li[component="category/topic"].unread {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.052) calc(100% - 1px)),
linear-gradient(to right, rgba(216, 194, 138, 0.085), transparent 5.65rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.052) calc(100% - 1px)),
linear-gradient(to right, rgba(var(--wg-ledger-ink-rgb), 0.085), transparent 5.65rem),
var(--wg-ledger-panel) !important;
border-color: rgba(216, 194, 138, 0.17) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.17) !important;
border-left-color: var(--wg-ledger-ink) !important;
box-shadow: var(--wg-ledger-shadow) !important;
}
li[component="category/topic"].pinned {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(194, 163, 90, 0.075), transparent 5.75rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(var(--wg-gold-rgb), 0.075), transparent 5.75rem),
var(--wg-ledger-panel) !important;
border-left-color: rgba(216, 194, 138, 0.44) !important;
border-left-color: rgba(var(--wg-ledger-ink-rgb), 0.44) !important;
box-shadow:
var(--wg-ledger-shadow),
inset 0 -1px 0 rgba(216, 194, 138, 0.055) !important;
inset 0 -1px 0 rgba(var(--wg-ledger-ink-rgb), 0.055) !important;
}
li[component="category/topic"].pinned:not(.unread) {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.036) calc(100% - 1px)),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.036) calc(100% - 1px)),
linear-gradient(90deg, rgba(122, 101, 45, 0.09), transparent 5.75rem),
linear-gradient(100deg, rgba(28, 22, 26, 0.36), rgba(13, 12, 17, 0.94)) !important;
border-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
border-left-color: var(--wg-focus) !important;
}
@@ -147,7 +147,7 @@ li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.
right: 0.25rem;
height: 1px;
background:
linear-gradient(to right, transparent, rgba(216, 194, 138, 0.22), rgba(142, 52, 56, 0.1), transparent);
linear-gradient(to right, transparent, rgba(var(--wg-ledger-ink-rgb), 0.22), rgba(var(--wg-red-rgb), 0.1), transparent);
}
li[component="category/topic"].locked {
@@ -155,11 +155,11 @@ li[component="category/topic"].locked {
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(150, 72, 78, 0.04) calc(100% - 1px)),
linear-gradient(90deg, rgba(93, 47, 54, 0.11), transparent 5.75rem),
var(--wg-ledger-panel) !important;
border-color: rgba(168, 74, 78, 0.18) !important;
border-left-color: rgba(168, 74, 78, 0.42) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.18) !important;
border-left-color: rgba(var(--wg-stamp-rgb), 0.42) !important;
box-shadow:
var(--wg-ledger-shadow),
0 0 12px rgba(142, 52, 56, 0.09) !important;
0 0 12px rgba(var(--wg-red-rgb), 0.09) !important;
}
li[component="category/topic"].locked:not(.unread) {
@@ -167,19 +167,19 @@ li[component="category/topic"].locked:not(.unread) {
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(150, 72, 78, 0.034) calc(100% - 1px)),
linear-gradient(90deg, rgba(82, 39, 46, 0.1), transparent 5.75rem),
linear-gradient(100deg, rgba(24, 16, 21, 0.38), rgba(11, 10, 14, 0.95)) !important;
border-color: rgba(168, 74, 78, 0.14) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.14) !important;
}
li[component="category/topic"].locked.pinned {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(168, 74, 78, 0.1), rgba(194, 163, 90, 0.065) 4.4rem, transparent 7rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(var(--wg-stamp-rgb), 0.1), rgba(var(--wg-gold-rgb), 0.065) 4.4rem, transparent 7rem),
var(--wg-ledger-panel) !important;
border-color: rgba(168, 74, 78, 0.2) !important;
border-left-color: rgba(168, 74, 78, 0.58) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.2) !important;
border-left-color: rgba(var(--wg-stamp-rgb), 0.58) !important;
box-shadow:
var(--wg-ledger-shadow),
0 0 14px rgba(142, 52, 56, 0.085) !important;
0 0 14px rgba(var(--wg-red-rgb), 0.085) !important;
}
li[component="category/topic"].pinned::after,
@@ -189,13 +189,13 @@ li[component="category/topic"].locked::after {
li[component="category/topic"].pinned [component="topic/pinned"] {
background: rgba(93, 78, 32, 0.34) !important;
border-color: rgba(216, 194, 138, 0.28) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.28) !important;
color: var(--wg-ledger-ink) !important;
}
li[component="category/topic"].locked [component="topic/locked"] {
background: rgba(72, 31, 38, 0.38) !important;
border-color: rgba(168, 74, 78, 0.32) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.32) !important;
color: #d7aaa5 !important;
}
@@ -215,7 +215,7 @@ li[component="category/topic"] .title {
ul.topics-list li[component="category/topic"].unread .title,
ul[component="category"] li[component="category/topic"].unread .title {
color: #f0e7da !important;
text-shadow: 0 0 7px rgba(216, 194, 138, 0.045);
text-shadow: 0 0 7px rgba(var(--wg-ledger-ink-rgb), 0.045);
}
ul.topics-list li[component="category/topic"]:not(.unread) .title,
@@ -242,8 +242,8 @@ li[component="category/topic"] .badge,
a[component="topic/category"] {
position: relative;
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(8, 7, 10, 0.2)) !important;
border-color: rgba(194, 163, 90, 0.18) !important;
linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
border-radius: 3px !important;
box-shadow:
inset 0 1px 0 rgba(255, 238, 190, 0.055),
@@ -284,20 +284,20 @@ li[component="category/topic"] [component="topic/labels"] .badge i {
}
li[component="category/topic"] [component="topic/watched"] {
background: linear-gradient(to bottom, rgba(59, 72, 50, 0.25), rgba(8, 7, 10, 0.2)) !important;
background: linear-gradient(to bottom, rgba(59, 72, 50, 0.25), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(143, 166, 100, 0.22) !important;
color: #b7c59d !important;
}
li[component="category/topic"] [component="topic/ignored"],
li[component="category/topic"] [component="topic/moved"] {
background: linear-gradient(to bottom, rgba(72, 67, 58, 0.22), rgba(8, 7, 10, 0.18)) !important;
background: linear-gradient(to bottom, rgba(72, 67, 58, 0.22), rgba(var(--wg-bg-deepest-rgb), 0.18)) !important;
border-color: rgba(169, 157, 143, 0.16) !important;
color: #aaa095 !important;
}
li[component="category/topic"] [component="topic/scheduled"] {
background: linear-gradient(to bottom, rgba(70, 56, 90, 0.24), rgba(8, 7, 10, 0.2)) !important;
background: linear-gradient(to bottom, rgba(70, 56, 90, 0.24), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(160, 135, 190, 0.2) !important;
color: #c0aed0 !important;
}
@@ -306,9 +306,9 @@ li[component="category/topic"] .tag,
li[component="category/topic"] .tag-item,
.tag-list .tag {
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.026), rgba(8, 7, 10, 0.2)) !important;
border-color: rgba(194, 163, 90, 0.22) !important;
border-left: 1px solid rgba(216, 194, 138, 0.32) !important;
linear-gradient(to bottom, rgba(255, 241, 196, 0.026), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
border-left: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.32) !important;
color: #cdbb8b !important;
display: inline-flex;
align-items: center;
@@ -326,7 +326,7 @@ li[component="category/topic"] .tag-item,
li[component="category/topic"] .tag i,
li[component="category/topic"] .tag-item i,
.tag-list .tag i {
color: #d8c28a;
color: var(--wg-ledger-ink);
font-size: 0.68rem;
opacity: 0.88;
}
@@ -348,8 +348,8 @@ li[component="category/topic"] [component="topic/select"] {
align-items: center;
justify-content: center;
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.045), rgba(8, 7, 10, 0.28));
border: 1px solid rgba(194, 163, 90, 0.22);
linear-gradient(to bottom, rgba(255, 241, 196, 0.045), rgba(var(--wg-bg-deepest-rgb), 0.28));
border: 1px solid rgba(var(--wg-gold-rgb), 0.22);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255, 238, 190, 0.06),
@@ -360,7 +360,7 @@ li[component="category/topic"] [component="topic/select"] {
li[component="category/topic"] [component="topic/select"]:hover,
li[component="category/topic"] [component="topic/select"]:focus {
border-color: rgba(216, 194, 138, 0.42);
border-color: rgba(var(--wg-ledger-ink-rgb), 0.42);
color: var(--wg-ledger-ink) !important;
}
@@ -368,7 +368,7 @@ li[component="category/topic"] .meta.stats > div {
min-height: 3.25rem;
padding: var(--wg-space-2xs) var(--wg-space-xs);
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.09) !important;
border-radius: 3px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
@@ -394,7 +394,7 @@ li[component="category/topic"] .meta.stats .text-muted {
li[component="category/topic"] [component="topic/teaser"] .lastpost {
background: transparent !important;
border-left-color: rgba(194, 163, 90, 0.42) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.42) !important;
color: var(--wg-ledger-ink-muted);
}
@@ -417,5 +417,5 @@ li[component="category/topic"] [component="topic/teaser"] .timeago {
.topic-thumbs .topic-thumb {
background: rgba(255, 255, 255, 0.025) !important;
border: 1px solid rgba(194, 163, 90, 0.12);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
}
scss/westgate/_widgets.scss
+23 -23
View File
@@ -53,7 +53,7 @@
) {
padding: var(--wg-space-md);
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.045) calc(100% - 1px)),
var(--wg-velvet-panel) !important;
background-size: 100% var(--wg-ledger-line), auto;
border: 1px solid var(--wg-border);
@@ -71,9 +71,9 @@
[data-widget-area] .westgate-widget-card,
[data-widget-area] .wg-widget-card {
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.024), rgba(8, 7, 10, 0.08)),
linear-gradient(to bottom, rgba(255, 241, 196, 0.024), rgba(var(--wg-bg-deepest-rgb), 0.08)),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.15) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.15) !important;
border-radius: 8px !important;
box-shadow: var(--wg-velvet-shadow) !important;
color: var(--wg-text-soft) !important;
@@ -81,9 +81,9 @@
[data-widget-area] .card-header {
background:
linear-gradient(to right, var(--wg-border-soft), rgba(42, 18, 34, 0.2), transparent),
rgba(8, 7, 10, 0.24) !important;
border-color: rgba(194, 163, 90, 0.13) !important;
linear-gradient(to right, var(--wg-border-soft), rgba(var(--wg-plum-rgb), 0.2), transparent),
rgba(var(--wg-bg-deepest-rgb), 0.24) !important;
border-color: rgba(var(--wg-gold-rgb), 0.13) !important;
color: var(--wg-ledger-ink) !important;
font-family: var(--wg-font-display);
font-weight: 600;
@@ -102,9 +102,9 @@
[data-widget-area] .alert {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.055), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.055), transparent 5rem),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.2) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.2) !important;
border-left-width: 2px !important;
border-radius: 8px;
box-shadow:
@@ -124,28 +124,28 @@
[data-widget-area] .alert-info {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.07), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.07), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
border-left-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.5) !important;
color: var(--wg-text-soft) !important;
}
[data-widget-area] .alert-warning {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.12), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.12), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: var(--wg-focus) !important;
border-left-color: rgba(194, 163, 90, 0.62) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.62) !important;
color: #e0cea2 !important;
}
[data-widget-area] .alert-danger {
background:
linear-gradient(to right, rgba(142, 52, 56, 0.12), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-red-rgb), 0.12), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: rgba(142, 52, 56, 0.32) !important;
border-left-color: rgba(142, 52, 56, 0.62) !important;
border-color: rgba(var(--wg-red-rgb), 0.32) !important;
border-left-color: rgba(var(--wg-red-rgb), 0.62) !important;
color: #d8b1b1 !important;
}
@@ -171,13 +171,13 @@
[data-widget-area] :where(a:not(.btn):not(.nav-link):not(.dropdown-item)):hover,
[data-widget-area] :where(a:not(.btn):not(.nav-link):not(.dropdown-item)):focus {
color: #e0c878;
color: var(--wg-gold-lit);
text-decoration: underline;
}
[data-widget-area] .list-group {
background: transparent !important;
border: 1px solid rgba(194, 163, 90, 0.12);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
border-radius: 8px;
overflow: hidden;
}
@@ -190,8 +190,8 @@
[data-widget-area] .badge {
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(8, 7, 10, 0.2)) !important;
border: 1px solid rgba(194, 163, 90, 0.18) !important;
linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.18) !important;
color: var(--wg-ledger-ink-muted) !important;
font-family: var(--wg-font-ui);
}
@@ -204,7 +204,7 @@
[data-widget-area] :where(.forum-stats, .stats-card) > .d-flex,
[data-widget-area] :where(.stats-card, .stats) :where(.card, .card-header) {
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.09) !important;
border-radius: 3px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
@@ -232,7 +232,7 @@
margin: 0 0 var(--wg-space-sm);
padding: 0.6rem;
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),
linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(var(--wg-bg-deepest-rgb), 0.08)),
var(--wg-velvet-panel) !important;
border: 1px solid var(--wg-border);
border-radius: 8px;
@@ -250,7 +250,7 @@
[data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn:hover,
[data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn:focus {
background: rgba(194, 163, 90, 0.06) !important;
background: rgba(var(--wg-gold-rgb), 0.06) !important;
background-image: none !important;
color: var(--wg-text) !important;
text-decoration: none;
scss/westgate/_wiki-prose.scss
+138 -138
View File
@@ -13,18 +13,18 @@
--wiki-chrome-page-title-font-weight: 500;
--wiki-chrome-muted-color: var(--wg-text-muted);
--wiki-chrome-link-color: var(--wg-gold);
--wiki-chrome-link-hover-color: #e0c878;
--wiki-chrome-link-hover-color: var(--wg-gold-lit);
--wiki-chrome-accent-color: var(--wg-gold-soft);
--wiki-chrome-hero-bg: linear-gradient(
180deg,
rgba(42, 18, 34, 0.55) 0%,
rgba(var(--wg-plum-rgb), 0.55) 0%,
rgba(18, 16, 23, 0.98) 100%
);
--wiki-chrome-warning-border: rgba(194, 163, 90, 0.45);
--wiki-chrome-warning-border: rgba(var(--wg-gold-rgb), 0.45);
/* Backdrop scrims (drawer/dialog overlays): deep charcoal instead of the
plugin's slate-blue defaults, so overlays stay warm against the theme. */
--wiki-scrim: rgba(9, 8, 11, 0.55);
--wiki-scrim-strong: rgba(9, 8, 11, 0.8);
--wiki-scrim: rgba(var(--wg-bg-deep-rgb), 0.55);
--wiki-scrim-strong: rgba(var(--wg-bg-deep-rgb), 0.8);
--wiki-chrome-danger: var(--wg-red);
--wiki-chrome-danger-hover: #c55a5f;
--wiki-redlink-color: #c06a6e;
@@ -49,107 +49,107 @@
--wiki-prose-h4-size: 1.26rem;
--wiki-prose-heading-rule: linear-gradient(
90deg,
rgba(194, 163, 90, 0.42),
rgba(194, 163, 90, 0.1) 54%,
rgba(var(--wg-gold-rgb), 0.42),
rgba(var(--wg-gold-rgb), 0.1) 54%,
transparent
);
--wiki-prose-link-color: var(--wg-gold);
--wiki-prose-link-hover-color: #e0c878;
--wiki-prose-link-hover-color: var(--wg-gold-lit);
--wiki-prose-blockquote-bg: rgba(35, 27, 23, 0.36);
--wiki-prose-blockquote-border: rgba(194, 163, 90, 0.4);
--wiki-prose-blockquote-border: rgba(var(--wg-gold-rgb), 0.4);
--wiki-prose-blockquote-color: var(--wg-text-soft);
--wiki-prose-code-font-family: var(--wg-font-code);
--wiki-prose-code-bg: rgba(8, 7, 10, 0.45);
--wiki-prose-code-border: rgba(194, 163, 90, 0.12);
--wiki-prose-code-bg: rgba(var(--wg-bg-deepest-rgb), 0.45);
--wiki-prose-code-border: rgba(var(--wg-gold-rgb), 0.12);
--wiki-prose-code-color: var(--wg-text);
--wiki-prose-pre-bg: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(8, 7, 10, 0.82));
--wiki-prose-pre-border: rgba(194, 163, 90, 0.22);
--wiki-prose-pre-bg: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(var(--wg-bg-deepest-rgb), 0.82));
--wiki-prose-pre-border: rgba(var(--wg-gold-rgb), 0.22);
--wiki-prose-pre-color: var(--wg-text-soft);
--wiki-prose-hr-color: rgba(194, 163, 90, 0.18);
--wiki-prose-table-border: rgba(194, 163, 90, 0.12);
--wiki-prose-hr-color: rgba(var(--wg-gold-rgb), 0.18);
--wiki-prose-table-border: rgba(var(--wg-gold-rgb), 0.12);
--wiki-prose-table-head-color: var(--wg-ledger-ink-muted);
--wiki-prose-table-hover-bg: rgba(194, 163, 90, 0.04);
--wiki-prose-table-hover-bg: rgba(var(--wg-gold-rgb), 0.04);
--wiki-prose-table-hover-color: var(--wg-text);
--wiki-prose-caption-bg: rgba(8, 7, 10, 0.42);
--wiki-prose-caption-bg: rgba(var(--wg-bg-deepest-rgb), 0.42);
--wiki-prose-caption-color: var(--wg-text-muted);
--wiki-prose-caption-font-family: var(--wg-font-text);
--wiki-prose-footnote-border: rgba(194, 163, 90, 0.2);
--wiki-prose-footnote-border: rgba(var(--wg-gold-rgb), 0.2);
--wiki-prose-footnote-color: var(--wg-text-muted);
--wiki-prose-footnote-marker-color: var(--wg-gold);
--wiki-prose-footnote-popover-bg: linear-gradient(180deg, rgba(28, 20, 33, 0.98), rgba(14, 11, 17, 0.98));
--wiki-prose-footnote-popover-border: rgba(194, 163, 90, 0.26);
--wiki-prose-footnote-popover-border: rgba(var(--wg-gold-rgb), 0.26);
--wiki-prose-footnote-popover-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.035),
0 14px 30px rgba(0, 0, 0, 0.46);
--wiki-prose-footnote-target-bg: var(--wg-border-soft);
--wiki-prose-image-bg: rgba(8, 7, 10, 0.36);
--wiki-prose-image-border: rgba(194, 163, 90, 0.18);
--wiki-prose-image-bg: rgba(var(--wg-bg-deepest-rgb), 0.36);
--wiki-prose-image-border: rgba(var(--wg-gold-rgb), 0.18);
--wiki-prose-image-padding: 0;
--wiki-prose-image-radius: 7px;
--wiki-prose-image-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.025),
0 8px 20px rgba(0, 0, 0, 0.18);
--wiki-prose-media-iframe-border: rgba(194, 163, 90, 0.15);
--wiki-prose-media-iframe-border: rgba(var(--wg-gold-rgb), 0.15);
--wiki-prose-raw-embed-bg: rgba(8, 7, 10, 0.4);
--wiki-prose-raw-embed-border: rgba(194, 163, 90, 0.25);
--wiki-prose-raw-embed-bg: rgba(var(--wg-bg-deepest-rgb), 0.4);
--wiki-prose-raw-embed-border: rgba(var(--wg-gold-rgb), 0.25);
--wiki-prose-raw-embed-color: var(--wg-text-muted);
--wiki-compose-editable-bg: rgba(24, 15, 29, 0.94);
--wiki-compose-editable-border-color: rgba(202, 164, 106, 0.2);
--wiki-compose-editable-focus-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026),
0 0 0 1px rgba(194, 163, 90, 0.3),
0 0 0 1px rgba(var(--wg-gold-rgb), 0.3),
0 0 18px var(--wg-border-soft);
--wiki-ck-base-background: #18141d;
--wiki-ck-base-background: var(--wg-panel);
--wiki-ck-base-foreground: #1e1824;
--wiki-ck-base-border: rgba(194, 163, 90, 0.22);
--wiki-ck-base-border: rgba(var(--wg-gold-rgb), 0.22);
--wiki-ck-base-text: #cfc5b7;
/* CKEditor UI: .ck-reset_all and toolbar SVGs use --ck-color-text / currentColor */
--wiki-ck-ui-text: rgba(244, 236, 220, 0.92);
--wiki-ck-toolbar-icon-color: rgba(244, 236, 220, 0.9);
--wiki-ck-tooltip-background: rgba(10, 8, 14, 0.96);
--wiki-ck-tooltip-text: rgba(244, 236, 220, 0.95);
--wiki-ck-focus-border: rgba(194, 163, 90, 0.45);
--wiki-ck-focus-outer-shadow: rgba(194, 163, 90, 0.12);
--wiki-ck-focus-border: rgba(var(--wg-gold-rgb), 0.45);
--wiki-ck-focus-outer-shadow: rgba(var(--wg-gold-rgb), 0.12);
--wiki-ck-shadow-drop: rgba(0, 0, 0, 0.45);
--wiki-ck-shadow-inner: rgba(0, 0, 0, 0.25);
--wiki-ck-toolbar-background: #16121a;
--wiki-ck-toolbar-border: rgba(194, 163, 90, 0.18);
--wiki-ck-toolbar-border: rgba(var(--wg-gold-rgb), 0.18);
--wiki-ck-button-bg: transparent;
--wiki-ck-button-hover-bg: rgba(194, 163, 90, 0.1);
--wiki-ck-button-hover-bg: rgba(var(--wg-gold-rgb), 0.1);
--wiki-ck-button-active-bg: var(--wg-border);
--wiki-ck-button-on-bg: rgba(194, 163, 90, 0.12);
--wiki-ck-button-on-hover-bg: rgba(194, 163, 90, 0.18);
--wiki-ck-button-on-active-bg: rgba(194, 163, 90, 0.22);
--wiki-ck-button-on-bg: rgba(var(--wg-gold-rgb), 0.12);
--wiki-ck-button-on-hover-bg: rgba(var(--wg-gold-rgb), 0.18);
--wiki-ck-button-on-active-bg: rgba(var(--wg-gold-rgb), 0.22);
--wiki-ck-button-on-color: #e6d9b8;
--wiki-ck-dropdown-background: #1a1520;
--wiki-ck-dropdown-border: rgba(194, 163, 90, 0.2);
--wiki-ck-input-background: rgba(9, 8, 11, 0.55);
--wiki-ck-input-border: rgba(194, 163, 90, 0.22);
--wiki-ck-input-text: #e6e0d6;
--wiki-ck-dropdown-border: rgba(var(--wg-gold-rgb), 0.2);
--wiki-ck-input-background: rgba(var(--wg-bg-deep-rgb), 0.55);
--wiki-ck-input-border: rgba(var(--wg-gold-rgb), 0.22);
--wiki-ck-input-text: var(--wg-text);
--wiki-ck-list-background: #1a1520;
--wiki-ck-list-hover-bg: rgba(194, 163, 90, 0.1);
--wiki-ck-list-on-bg: rgba(194, 163, 90, 0.16);
--wiki-ck-list-hover-bg: rgba(var(--wg-gold-rgb), 0.1);
--wiki-ck-list-on-bg: rgba(var(--wg-gold-rgb), 0.16);
--wiki-ck-list-on-text: #f0e6cc;
--wiki-ck-panel-background: #1a1520;
--wiki-ck-panel-border: rgba(194, 163, 90, 0.2);
--wiki-ck-panel-border: rgba(var(--wg-gold-rgb), 0.2);
--wiki-ck-switch-off-bg: #2a2430;
--wiki-ck-label-bg: #16121a;
--wiki-fab-bg: rgba(18, 15, 22, 0.9);
--wiki-fab-border-color: rgba(194, 163, 90, 0.18);
--wiki-fab-border-color: rgba(var(--wg-gold-rgb), 0.18);
--wiki-fab-shadow: var(--wg-velvet-shadow);
--wiki-fab-btn-bg: rgba(194, 163, 90, 0.075);
--wiki-fab-btn-border: rgba(216, 194, 138, 0.24);
--wiki-fab-danger-bg: rgba(142, 52, 56, 0.16);
--wiki-fab-btn-bg: rgba(var(--wg-gold-rgb), 0.075);
--wiki-fab-btn-border: rgba(var(--wg-ledger-ink-rgb), 0.24);
--wiki-fab-danger-bg: rgba(var(--wg-red-rgb), 0.16);
--wiki-editor-table-handle-layer: 4;
--wiki-infobox-layer: 1;
@@ -279,7 +279,7 @@
.westgate-wiki .card.wiki-card:hover,
.westgate-wiki .card.wiki-topic-card:hover {
background: var(--wg-velvet-panel-hover) !important;
border-color: rgba(194, 163, 90, 0.22) !important;
border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
inset 0 0 38px rgba(120, 36, 84, 0.14),
@@ -412,7 +412,7 @@
90deg,
transparent,
var(--wg-focus) 22%,
rgba(194, 163, 90, 0.82) 50%,
rgba(var(--wg-gold-rgb), 0.82) 50%,
var(--wg-focus) 78%,
transparent
)
@@ -428,8 +428,8 @@
--wiki-prose-heading-rule-right,
linear-gradient(
270deg,
rgba(194, 163, 90, 0.82),
rgba(194, 163, 90, 0.24) 54%,
rgba(var(--wg-gold-rgb), 0.82),
rgba(var(--wg-gold-rgb), 0.24) 54%,
transparent
)
);
@@ -464,7 +464,7 @@
90deg,
transparent,
var(--wg-focus) 22%,
rgba(194, 163, 90, 0.82) 50%,
rgba(var(--wg-gold-rgb), 0.82) 50%,
var(--wg-focus) 78%,
transparent
)
@@ -479,8 +479,8 @@
--wiki-prose-heading-rule-right,
linear-gradient(
270deg,
rgba(194, 163, 90, 0.82),
rgba(194, 163, 90, 0.24) 54%,
rgba(var(--wg-gold-rgb), 0.82),
rgba(var(--wg-gold-rgb), 0.24) 54%,
transparent
)
);
@@ -587,7 +587,7 @@
.westgate-wiki .wiki-breadcrumb-trail__link:hover,
.westgate-wiki .wiki-breadcrumb-trail__link:focus {
color: #e0c878;
color: var(--wg-gold-lit);
text-decoration: underline;
}
@@ -610,18 +610,18 @@
.westgate-wiki :where(.wiki-card-link, .wiki-card h2 a, .wiki-topic-list a, .wiki-index-entry-title, .wiki-index-jump-link, .wiki-page-byline__userlink) {
color: var(--wg-gold) !important;
text-decoration-color: rgba(194, 163, 90, 0.5);
text-decoration-color: rgba(var(--wg-gold-rgb), 0.5);
}
.westgate-wiki :where(.wiki-card-link, .wiki-card h2 a, .wiki-topic-list a, .wiki-index-entry-title, .wiki-index-jump-link, .wiki-page-byline__userlink):hover,
.westgate-wiki :where(.wiki-card-link, .wiki-card h2 a, .wiki-topic-list a, .wiki-index-entry-title, .wiki-index-jump-link, .wiki-page-byline__userlink):focus {
color: #e0c878 !important;
color: var(--wg-gold-lit) !important;
text-decoration-color: currentColor;
}
.westgate-wiki .wiki-sidebar-disclosure__summary {
background: linear-gradient(180deg, rgba(255, 244, 221, 0.025), rgba(0, 0, 0, 0.075)) !important;
border-bottom-color: rgba(194, 163, 90, 0.11) !important;
border-bottom-color: rgba(var(--wg-gold-rgb), 0.11) !important;
color: var(--wg-text);
font-family: var(--wg-font-ui);
font-size: 0.82rem;
@@ -635,13 +635,13 @@
}
.westgate-wiki .wiki-article-toc__ol.wiki-article-toc__ol--nest {
border-inline-start-color: rgba(194, 163, 90, 0.18);
border-inline-start-color: rgba(var(--wg-gold-rgb), 0.18);
}
.westgate-wiki .wiki-article-toc__link,
.westgate-wiki .wiki-sidebar-nav-ns,
.westgate-wiki .wiki-sidebar-root {
color: #d8c28a !important;
color: var(--wg-ledger-ink) !important;
font-family: var(--wg-font-ui);
}
@@ -683,20 +683,20 @@
color: var(--wg-gold);
font-family: var(--wg-font-ui);
font-weight: 700;
text-shadow: 0 0 8px rgba(194, 163, 90, 0.22);
text-shadow: 0 0 8px rgba(var(--wg-gold-rgb), 0.22);
}
.westgate-wiki .wiki-namespace-directory {
--wiki-tree-indent: 1.28rem;
--wiki-tree-line-color: rgba(194, 163, 90, 0.34);
--wiki-tree-line-color: rgba(var(--wg-gold-rgb), 0.34);
margin-block-start: 0.78rem;
}
.westgate-wiki .wiki-directory-filter {
background:
linear-gradient(180deg, rgba(255, 244, 221, 0.028), rgba(0, 0, 0, 0.1)),
rgba(8, 7, 10, 0.4) !important;
border-color: rgba(194, 163, 90, 0.18) !important;
rgba(var(--wg-bg-deepest-rgb), 0.4) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
border-radius: 7px !important;
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
color: var(--wg-text-soft) !important;
@@ -712,16 +712,16 @@
background:
linear-gradient(180deg, rgba(255, 244, 221, 0.04), rgba(0, 0, 0, 0.08)),
rgba(14, 11, 17, 0.76) !important;
border-color: rgba(194, 163, 90, 0.38) !important;
border-color: rgba(var(--wg-gold-rgb), 0.38) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.04),
0 0 0 0.18rem rgba(194, 163, 90, 0.09) !important;
0 0 0 0.18rem rgba(var(--wg-gold-rgb), 0.09) !important;
color: var(--wg-text) !important;
}
.westgate-wiki .wiki-index-jump--dynamic {
background: rgba(8, 7, 10, 0.18);
border-block: 1px solid rgba(194, 163, 90, 0.1);
background: rgba(var(--wg-bg-deepest-rgb), 0.18);
border-block: 1px solid rgba(var(--wg-gold-rgb), 0.1);
gap: 0.36rem;
margin-block: 0.72rem 0.9rem !important;
padding-block: 0.46rem;
@@ -730,8 +730,8 @@
.westgate-wiki .wiki-index-jump-link {
background:
linear-gradient(180deg, rgba(255, 244, 221, 0.035), rgba(0, 0, 0, 0.1)),
rgba(194, 163, 90, 0.045) !important;
border-color: rgba(194, 163, 90, 0.16) !important;
rgba(var(--wg-gold-rgb), 0.045) !important;
border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.03);
transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
@@ -742,8 +742,8 @@
background:
linear-gradient(180deg, var(--wg-border), rgba(81, 25, 61, 0.12)),
var(--wg-border-soft) !important;
border-color: rgba(216, 194, 138, 0.36) !important;
color: #fff4dd !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.36) !important;
color: var(--wg-gold-hi) !important;
transform: translateY(-1px);
}
@@ -772,7 +772,7 @@
}
.westgate-wiki .wiki-namespace-directory .wiki-index-entry:not(.wiki-index-entry--subpage) .wiki-index-entry-main::before {
background: radial-gradient(circle, #e0c878 0 30%, var(--wg-focus) 31% 58%, transparent 59%);
background: radial-gradient(circle, var(--wg-gold-lit) 0 30%, var(--wg-focus) 31% 58%, transparent 59%);
block-size: 0.42rem;
content: "";
inline-size: 0.42rem;
@@ -793,7 +793,7 @@
}
.westgate-wiki .wiki-index-entry--subpage::before {
background: linear-gradient(90deg, var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)), rgba(194, 163, 90, 0.12));
background: linear-gradient(90deg, var(--wiki-tree-line-color, rgba(var(--wg-gold-rgb), 0.34)), rgba(var(--wg-gold-rgb), 0.12));
position: absolute;
block-size: 1px;
content: "";
@@ -803,7 +803,7 @@
}
.westgate-wiki .wiki-index-entry--subpage::after {
background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)));
background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color, rgba(var(--wg-gold-rgb), 0.34)));
block-size: 1.18rem;
content: "";
inline-size: 1px;
@@ -834,8 +834,8 @@
.westgate-wiki .wiki-namespace-directory .wiki-index-entry-main:hover .wiki-index-entry-title,
.westgate-wiki .wiki-namespace-directory .wiki-index-entry-main:focus-within .wiki-index-entry-title {
color: #fff4dd !important;
text-shadow: 0 0 10px rgba(194, 163, 90, 0.16);
color: var(--wg-gold-hi) !important;
text-shadow: 0 0 10px rgba(var(--wg-gold-rgb), 0.16);
}
.westgate-wiki .wiki-index-entry--subpage[style*="--wiki-title-depth: 2"] .wiki-index-entry-title,
@@ -852,7 +852,7 @@
.westgate-wiki .wiki-topic-list__item--subpage {
--wiki-tree-indent: 1rem;
--wiki-tree-line-color: rgba(194, 163, 90, 0.36);
--wiki-tree-line-color: rgba(var(--wg-gold-rgb), 0.36);
list-style: none;
margin-block-start: -0.15rem;
margin-inline-start: calc(var(--wiki-title-depth, 1) * var(--wiki-tree-indent));
@@ -861,7 +861,7 @@
}
.westgate-wiki .wiki-topic-list__item--subpage::before {
background: linear-gradient(90deg, var(--wiki-tree-line-color), rgba(194, 163, 90, 0.12));
background: linear-gradient(90deg, var(--wiki-tree-line-color), rgba(var(--wg-gold-rgb), 0.12));
position: absolute;
block-size: 1px;
content: "";
@@ -917,11 +917,11 @@
.westgate-wiki .wiki-sidebar-directory {
--wiki-sidebar-tree-indent: 1.1rem;
--wiki-sidebar-tree-line-color: rgba(194, 163, 90, 0.26);
--wiki-sidebar-tree-line-color: rgba(var(--wg-gold-rgb), 0.26);
}
.westgate-wiki .wiki-sidebar-directory .wiki-sidebar-nav-rows--child-pages {
border-inline-start-color: rgba(194, 163, 90, 0.16) !important;
border-inline-start-color: rgba(var(--wg-gold-rgb), 0.16) !important;
margin-inline-start: 0.42rem;
padding-inline-start: 0.66rem;
}
@@ -959,7 +959,7 @@
}
.westgate-wiki .wiki-sidebar-directory .wiki-sidebar-nav-row--page:has(.wiki-sidebar-parent-path)::after {
background: linear-gradient(180deg, rgba(194, 163, 90, 0.06), var(--wiki-sidebar-tree-line-color));
background: linear-gradient(180deg, rgba(var(--wg-gold-rgb), 0.06), var(--wiki-sidebar-tree-line-color));
block-size: 0.58em;
content: "";
inline-size: 1px;
@@ -998,7 +998,7 @@
.westgate-wiki .wiki-sidebar-list a:hover,
.westgate-wiki .wiki-sidebar-list a:focus {
text-decoration: underline !important;
text-decoration-color: rgba(194, 163, 90, 0.55);
text-decoration-color: rgba(var(--wg-gold-rgb), 0.55);
text-underline-offset: 0.12em;
}
@@ -1015,11 +1015,11 @@
.westgate-wiki .wiki-sidebar-divider,
.westgate-wiki .wiki-index-section-rule,
.westgate-wiki .wiki-index-letter {
border-color: rgba(194, 163, 90, 0.13) !important;
border-color: rgba(var(--wg-gold-rgb), 0.13) !important;
}
.westgate-wiki .wiki-index-entry-badge {
background: rgba(194, 163, 90, 0.055) !important;
background: rgba(var(--wg-gold-rgb), 0.055) !important;
border-color: var(--wg-border) !important;
}
@@ -1029,14 +1029,14 @@
.westgate-wiki .wiki-fab-dock-inner {
background: rgba(18, 15, 22, 0.9) !important;
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
border-radius: 8px !important;
box-shadow: var(--wg-velvet-shadow) !important;
}
.westgate-wiki .wiki-fab-btn {
background: rgba(194, 163, 90, 0.075) !important;
border-color: rgba(216, 194, 138, 0.24) !important;
background: rgba(var(--wg-gold-rgb), 0.075) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.24) !important;
border-radius: 6px !important;
color: var(--wg-gold) !important;
text-decoration: none !important;
@@ -1046,15 +1046,15 @@
.westgate-wiki .wiki-fab-btn:hover,
.westgate-wiki .wiki-fab-btn:focus,
.westgate-wiki .wiki-fab-btn:active {
background: rgba(194, 163, 90, 0.13) !important;
border-color: rgba(216, 194, 138, 0.44) !important;
color: #fff4dd !important;
background: rgba(var(--wg-gold-rgb), 0.13) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.44) !important;
color: var(--wg-gold-hi) !important;
text-decoration: none !important;
}
.westgate-wiki .wiki-fab-btn--danger,
.westgate-wiki .wiki-fab-btn.wiki-delete-page {
background: rgba(142, 52, 56, 0.16) !important;
background: rgba(var(--wg-red-rgb), 0.16) !important;
border-color: rgba(197, 90, 95, 0.36) !important;
color: #d98286 !important;
}
@@ -1063,7 +1063,7 @@
.westgate-wiki .wiki-fab-btn--danger:focus,
.westgate-wiki .wiki-fab-btn.wiki-delete-page:hover,
.westgate-wiki .wiki-fab-btn.wiki-delete-page:focus {
background: rgba(142, 52, 56, 0.24) !important;
background: rgba(var(--wg-red-rgb), 0.24) !important;
border-color: rgba(197, 90, 95, 0.54) !important;
color: #f0a2a5 !important;
text-decoration: none !important;
@@ -1144,15 +1144,15 @@
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button.ck-on,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on {
background: var(--wiki-ck-button-hover-bg) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
color: #fff4dd !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
color: var(--wg-gold-hi) !important;
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
}
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button.ck-on,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on {
background: var(--wiki-ck-button-on-bg) !important;
border-color: rgba(194, 163, 90, 0.3) !important;
border-color: rgba(var(--wg-gold-rgb), 0.3) !important;
color: var(--wiki-ck-button-on-color) !important;
}
@@ -1161,7 +1161,7 @@
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on:hover,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on:focus {
background: var(--wiki-ck-button-on-hover-bg) !important;
color: #fff4dd !important;
color: var(--wg-gold-hi) !important;
}
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button:focus-visible,
@@ -1200,8 +1200,8 @@
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-splitbutton:hover > .ck.ck-button,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-splitbutton:hover > .ck.ck-dropdown__button {
background: var(--wiki-ck-button-hover-bg) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
color: #fff4dd !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
color: var(--wg-gold-hi) !important;
}
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-color-selector__remove-color,
@@ -1218,8 +1218,8 @@
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button_with-text:hover,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button_with-text:focus {
background: var(--wiki-ck-button-hover-bg) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
color: #fff4dd !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
color: var(--wg-gold-hi) !important;
}
.westgate-wiki-compose .ck.ck-editor__main > .ck.ck-editor__editable,
@@ -1239,7 +1239,7 @@
border-radius: 7px !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.035),
inset 0 0 0 1px rgba(8, 7, 10, 0.45),
inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.45),
inset 0 -8px 24px rgba(0, 0, 0, 0.22),
0 8px 18px rgba(0, 0, 0, 0.18) !important;
color: var(--wiki-prose-pre-color) !important;
@@ -1281,7 +1281,7 @@
border: 1px solid var(--wg-border);
border-radius: 7px;
box-shadow:
inset -1.25rem 0 1rem -1rem rgba(194, 163, 90, 0.16),
inset -1.25rem 0 1rem -1rem rgba(var(--wg-gold-rgb), 0.16),
0 0.6rem 1.4rem rgba(0, 0, 0, 0.16);
display: block;
inline-size: 100%;
@@ -1289,7 +1289,7 @@
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
scrollbar-width: thin;
}
@@ -1342,7 +1342,7 @@
.westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-content pre[data-language]::after,
.westgate-wiki-compose .ck-code-block-language-label {
background: var(--wg-border) !important;
border: 1px solid rgba(194, 163, 90, 0.22) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
border-radius: 0 0 0 5px !important;
color: var(--wg-text-soft) !important;
font-family: var(--wg-font-ui) !important;
@@ -1354,30 +1354,30 @@
.westgate-wiki-compose .ck-source-editing-area textarea,
.westgate-wiki-compose .ck.ck-source-editing-area,
.westgate-wiki-compose textarea.ck-source-editing-area {
background: rgba(9, 8, 11, 0.92) !important;
background: rgba(var(--wg-bg-deep-rgb), 0.92) !important;
color: var(--wg-text-soft) !important;
}
.westgate-wiki-compose .ck-source-editing-area textarea,
.westgate-wiki-compose textarea.ck-source-editing-area {
border-color: rgba(194, 163, 90, 0.24) !important;
border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.025),
inset 0 0 0 1px rgba(8, 7, 10, 0.45) !important;
inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.45) !important;
caret-color: var(--wg-gold);
font-family: var(--wg-font-code) !important;
}
.westgate-wiki-compose .ck-source-editing-area textarea:focus,
.westgate-wiki-compose textarea.ck-source-editing-area:focus {
border-color: rgba(194, 163, 90, 0.45) !important;
border-color: rgba(var(--wg-gold-rgb), 0.45) !important;
box-shadow: var(--wiki-compose-editable-focus-shadow) !important;
outline: none !important;
}
.westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-focused,
.westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-focused {
border-color: rgba(194, 163, 90, 0.45) !important;
border-color: rgba(var(--wg-gold-rgb), 0.45) !important;
box-shadow: var(--wiki-compose-editable-focus-shadow) !important;
}
@@ -1387,17 +1387,17 @@ body:has(#westgate-wiki-compose) .ck.ck-dialog {
--ck-color-button-default-background: var(--wiki-ck-button-bg);
--ck-color-button-default-hover-background: var(--wiki-ck-button-hover-bg);
--ck-color-button-default-active-background: var(--wiki-ck-button-active-bg);
--ck-color-button-action-background: rgba(194, 163, 90, 0.18);
--ck-color-button-action-hover-background: rgba(194, 163, 90, 0.26);
--ck-color-button-action-active-background: rgba(194, 163, 90, 0.32);
--ck-color-button-action-background: rgba(var(--wg-gold-rgb), 0.18);
--ck-color-button-action-hover-background: rgba(var(--wg-gold-rgb), 0.26);
--ck-color-button-action-active-background: rgba(var(--wg-gold-rgb), 0.32);
--ck-color-button-action-disabled-background: transparent;
--ck-color-button-action-text: #fff4dd;
--ck-color-button-action-text: var(--wg-gold-hi);
--ck-color-button-on-background: var(--wiki-ck-button-on-bg);
--ck-color-button-on-hover-background: var(--wiki-ck-button-on-hover-bg);
--ck-color-button-on-active-background: var(--wiki-ck-button-on-active-bg);
--ck-color-button-on-color: var(--wiki-ck-button-on-color);
--ck-color-input-disabled-background: rgba(9, 8, 11, 0.34);
--ck-color-input-disabled-border: rgba(194, 163, 90, 0.12);
--ck-color-input-disabled-background: rgba(var(--wg-bg-deep-rgb), 0.34);
--ck-color-input-disabled-border: rgba(var(--wg-gold-rgb), 0.12);
--ck-color-input-disabled-text: rgba(185, 178, 166, 0.42);
--ck-color-labeled-field-label-background: var(--wiki-ck-panel-background);
background: var(--wiki-ck-panel-background) !important;
@@ -1416,7 +1416,7 @@ body:has(#westgate-wiki-compose) .ck.ck-dialog :where(.ck, .ck-label, .ck-button
body:has(#westgate-wiki-compose) .ck.ck-form__header {
background: linear-gradient(180deg, rgba(255, 244, 221, 0.025), rgba(0, 0, 0, 0.075)) !important;
border-bottom-color: rgba(194, 163, 90, 0.16) !important;
border-bottom-color: rgba(var(--wg-gold-rgb), 0.16) !important;
color: var(--wg-text) !important;
}
@@ -1442,8 +1442,8 @@ body:has(#westgate-wiki-compose) .ck.ck-balloon-panel:not(.ck-powered-by-balloon
body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid__tile):hover,
body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid__tile):focus {
background: var(--wiki-ck-button-hover-bg) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
color: #fff4dd !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
color: var(--wg-gold-hi) !important;
}
body:has(#westgate-wiki-compose) .ck.ck-dropdown__panel .ck.ck-button:not(.ck-color-grid__tile).ck-on,
@@ -1456,9 +1456,9 @@ body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid_
body:has(#westgate-wiki-compose) .ck.ck-balloon-panel:not(.ck-powered-by-balloon) .ck.ck-button-action,
body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button-action {
background: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(194, 163, 90, 0.3) !important;
color: #fff4dd !important;
background: rgba(var(--wg-gold-rgb), 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.3) !important;
color: var(--wg-gold-hi) !important;
font-weight: 700 !important;
}
@@ -1518,8 +1518,8 @@ body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form .ck-label {
body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form .ck.ck-input,
body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form input.ck-input-text {
background: rgba(9, 8, 11, 0.68) !important;
border-color: rgba(194, 163, 90, 0.24) !important;
background: rgba(var(--wg-bg-deep-rgb), 0.68) !important;
border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
color: var(--wg-text) !important;
font-family: var(--wg-font-ui) !important;
}
@@ -1531,7 +1531,7 @@ body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form input.ck-input-tex
}
body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form .ck.ck-button-find {
color: #fff4dd !important;
color: var(--wg-gold-hi) !important;
font-family: var(--wg-font-ui) !important;
font-weight: 700 !important;
}
@@ -1585,13 +1585,13 @@ body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile.ck-color-selector__colo
body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile:hover:not(.ck-disabled),
body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile:focus:not(.ck-disabled) {
box-shadow:
inset 0 0 0 1px rgba(8, 7, 10, 0.76),
0 0 0 2px rgba(216, 194, 138, 0.66) !important;
inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.76),
0 0 0 2px rgba(var(--wg-ledger-ink-rgb), 0.66) !important;
}
body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile.ck-on {
box-shadow:
inset 0 0 0 1px rgba(8, 7, 10, 0.86),
inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.86),
0 0 0 2px rgba(246, 223, 163, 0.82) !important;
}
@@ -1601,21 +1601,21 @@ body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown__grid {
}
body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box {
background: rgba(194, 163, 90, 0.075) !important;
border: 1px solid rgba(216, 194, 138, 0.26) !important;
background: rgba(var(--wg-gold-rgb), 0.075) !important;
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.26) !important;
border-radius: 4px !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.035),
0 0 0 1px rgba(8, 7, 10, 0.36) !important;
0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.36) !important;
}
body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box:hover,
body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box:focus {
background: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(216, 194, 138, 0.52) !important;
background: rgba(var(--wg-gold-rgb), 0.18) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.52) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.055),
0 0 0 1px rgba(194, 163, 90, 0.24) !important;
0 0 0 1px rgba(var(--wg-gold-rgb), 0.24) !important;
outline: none !important;
}
@@ -1624,7 +1624,7 @@ body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box.ck-on {
border-color: rgba(246, 223, 163, 0.64) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.08),
0 0 0 1px rgba(194, 163, 90, 0.34) !important;
0 0 0 1px rgba(var(--wg-gold-rgb), 0.34) !important;
}
body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown__label {
@@ -1647,17 +1647,17 @@ body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-label, .ck-label
}
body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-input, .ck-input-text, input[type="text"], input[type="search"]) {
background: rgba(9, 8, 11, 0.74) !important;
border-color: rgba(194, 163, 90, 0.26) !important;
background: rgba(var(--wg-bg-deep-rgb), 0.74) !important;
border-color: rgba(var(--wg-gold-rgb), 0.26) !important;
color: var(--wg-text) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.025),
0 0 0 1px rgba(8, 7, 10, 0.42) !important;
0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.42) !important;
caret-color: var(--wg-gold);
}
body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-input, .ck-input-text, input[type="text"], input[type="search"]):focus {
border-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.026),
0 0 0 1px var(--wg-focus) !important;
@@ -1682,7 +1682,7 @@ body:has(#westgate-wiki-compose) .ck.ck-emoji-picker .ck-emoji-categories__item:
body:has(#westgate-wiki-compose) .ck.ck-emoji-picker .ck-emoji-categories__item:focus,
body:has(#westgate-wiki-compose) .ck.ck-emoji-picker .ck-emoji-categories__item.ck-on {
background: var(--wiki-ck-button-hover-bg) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035) !important;
}