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/53-palette-candidates
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
1 Commits
prototype/north-star-frame-b .. prototype/53-palette-candidates
Author SHA1 Message Date
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
52 changed files with 743 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/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;
}