diff --git a/prototype/README.md b/prototype/README.md new file mode 100644 index 0000000..a12b953 --- /dev/null +++ b/prototype/README.md @@ -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 +``` diff --git a/prototype/_base-plumnoir.css b/prototype/_base-plumnoir.css new file mode 100644 index 0000000..8a35201 --- /dev/null +++ b/prototype/_base-plumnoir.css @@ -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); +} diff --git a/prototype/candidate-a.css b/prototype/candidate-a.css new file mode 100644 index 0000000..7874033 --- /dev/null +++ b/prototype/candidate-a.css @@ -0,0 +1 @@ +/* A — Plum Noir Ledger. One metal. Surfaces re-tuned, gold does every job it does today. */ diff --git a/prototype/candidate-b.css b/prototype/candidate-b.css new file mode 100644 index 0000000..1532293 --- /dev/null +++ b/prototype/candidate-b.css @@ -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 */ +} diff --git a/prototype/candidate-c.css b/prototype/candidate-c.css new file mode 100644 index 0000000..2d130d1 --- /dev/null +++ b/prototype/candidate-c.css @@ -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; } diff --git a/prototype/contrast.py b/prototype/contrast.py new file mode 100644 index 0000000..0de5ac6 --- /dev/null +++ b/prototype/contrast.py @@ -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}") diff --git a/prototype/probe.js b/prototype/probe.js new file mode 100644 index 0000000..b67306d --- /dev/null +++ b/prototype/probe.js @@ -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(); +})(); diff --git a/prototype/seed.js b/prototype/seed.js new file mode 100644 index 0000000..f5f7f49 --- /dev/null +++ b/prototype/seed.js @@ -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); +})(); diff --git a/prototype/shots.js b/prototype/shots.js new file mode 100644 index 0000000..f281855 --- /dev/null +++ b/prototype/shots.js @@ -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(); +})(); diff --git a/prototype/shots/cards-a-crop.png b/prototype/shots/cards-a-crop.png new file mode 100644 index 0000000..0bb359e Binary files /dev/null and b/prototype/shots/cards-a-crop.png differ diff --git a/prototype/shots/cards-a.png b/prototype/shots/cards-a.png new file mode 100644 index 0000000..1baabb2 Binary files /dev/null and b/prototype/shots/cards-a.png differ diff --git a/prototype/shots/cards-b-crop.png b/prototype/shots/cards-b-crop.png new file mode 100644 index 0000000..824ec08 Binary files /dev/null and b/prototype/shots/cards-b-crop.png differ diff --git a/prototype/shots/cards-b.png b/prototype/shots/cards-b.png new file mode 100644 index 0000000..17415a7 Binary files /dev/null and b/prototype/shots/cards-b.png differ diff --git a/prototype/shots/cards-baseline-crop.png b/prototype/shots/cards-baseline-crop.png new file mode 100644 index 0000000..131cc86 Binary files /dev/null and b/prototype/shots/cards-baseline-crop.png differ diff --git a/prototype/shots/cards-baseline.png b/prototype/shots/cards-baseline.png new file mode 100644 index 0000000..2c4f712 Binary files /dev/null and b/prototype/shots/cards-baseline.png differ diff --git a/prototype/shots/cards-c-crop.png b/prototype/shots/cards-c-crop.png new file mode 100644 index 0000000..f1ad78b Binary files /dev/null and b/prototype/shots/cards-c-crop.png differ diff --git a/prototype/shots/cards-c.png b/prototype/shots/cards-c.png new file mode 100644 index 0000000..7b9ba41 Binary files /dev/null and b/prototype/shots/cards-c.png differ diff --git a/prototype/shots/categories-a-crop.png b/prototype/shots/categories-a-crop.png new file mode 100644 index 0000000..e83d1e8 Binary files /dev/null and b/prototype/shots/categories-a-crop.png differ diff --git a/prototype/shots/categories-a.png b/prototype/shots/categories-a.png new file mode 100644 index 0000000..c82707d Binary files /dev/null and b/prototype/shots/categories-a.png differ diff --git a/prototype/shots/categories-b-crop.png b/prototype/shots/categories-b-crop.png new file mode 100644 index 0000000..b09da09 Binary files /dev/null and b/prototype/shots/categories-b-crop.png differ diff --git a/prototype/shots/categories-b.png b/prototype/shots/categories-b.png new file mode 100644 index 0000000..e76a59b Binary files /dev/null and b/prototype/shots/categories-b.png differ diff --git a/prototype/shots/categories-baseline-crop.png b/prototype/shots/categories-baseline-crop.png new file mode 100644 index 0000000..67a3f70 Binary files /dev/null and b/prototype/shots/categories-baseline-crop.png differ diff --git a/prototype/shots/categories-baseline.png b/prototype/shots/categories-baseline.png new file mode 100644 index 0000000..5d44113 Binary files /dev/null and b/prototype/shots/categories-baseline.png differ diff --git a/prototype/shots/categories-c-crop.png b/prototype/shots/categories-c-crop.png new file mode 100644 index 0000000..b09da09 Binary files /dev/null and b/prototype/shots/categories-c-crop.png differ diff --git a/prototype/shots/categories-c.png b/prototype/shots/categories-c.png new file mode 100644 index 0000000..e76a59b Binary files /dev/null and b/prototype/shots/categories-c.png differ diff --git a/prototype/shots/home-b.png b/prototype/shots/home-b.png new file mode 100644 index 0000000..956db5a Binary files /dev/null and b/prototype/shots/home-b.png differ diff --git a/prototype/shots/home-baseline.png b/prototype/shots/home-baseline.png new file mode 100644 index 0000000..bf6170d Binary files /dev/null and b/prototype/shots/home-baseline.png differ diff --git a/prototype/shots/quote-c.png b/prototype/shots/quote-c.png new file mode 100644 index 0000000..dcc3537 Binary files /dev/null and b/prototype/shots/quote-c.png differ diff --git a/prototype/shots/topic-a-crop.png b/prototype/shots/topic-a-crop.png new file mode 100644 index 0000000..eef5d9d Binary files /dev/null and b/prototype/shots/topic-a-crop.png differ diff --git a/prototype/shots/topic-a.png b/prototype/shots/topic-a.png new file mode 100644 index 0000000..be3b9a1 Binary files /dev/null and b/prototype/shots/topic-a.png differ diff --git a/prototype/shots/topic-b-crop.png b/prototype/shots/topic-b-crop.png new file mode 100644 index 0000000..021d8e1 Binary files /dev/null and b/prototype/shots/topic-b-crop.png differ diff --git a/prototype/shots/topic-b.png b/prototype/shots/topic-b.png new file mode 100644 index 0000000..672e7ce Binary files /dev/null and b/prototype/shots/topic-b.png differ diff --git a/prototype/shots/topic-baseline-crop.png b/prototype/shots/topic-baseline-crop.png new file mode 100644 index 0000000..1a9175b Binary files /dev/null and b/prototype/shots/topic-baseline-crop.png differ diff --git a/prototype/shots/topic-baseline.png b/prototype/shots/topic-baseline.png new file mode 100644 index 0000000..c3df2dd Binary files /dev/null and b/prototype/shots/topic-baseline.png differ diff --git a/prototype/shots/topic-c-crop.png b/prototype/shots/topic-c-crop.png new file mode 100644 index 0000000..021d8e1 Binary files /dev/null and b/prototype/shots/topic-c-crop.png differ diff --git a/prototype/shots/topic-c.png b/prototype/shots/topic-c.png new file mode 100644 index 0000000..ce40f9a Binary files /dev/null and b/prototype/shots/topic-c.png differ diff --git a/scss/westgate/_categories.scss b/scss/westgate/_categories.scss index ef512fd..2930941 100644 --- a/scss/westgate/_categories.scss +++ b/scss/westgate/_categories.scss @@ -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 { diff --git a/scss/westgate/_controls.scss b/scss/westgate/_controls.scss index 8cc1ed6..fa3a64d 100644 --- a/scss/westgate/_controls.scss +++ b/scss/westgate/_controls.scss @@ -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), diff --git a/scss/westgate/_footer.scss b/scss/westgate/_footer.scss index 4df50af..5b2bc62 100644 --- a/scss/westgate/_footer.scss +++ b/scss/westgate/_footer.scss @@ -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 { diff --git a/scss/westgate/_pages.scss b/scss/westgate/_pages.scss index 7769960..e33ae0a 100644 --- a/scss/westgate/_pages.scss +++ b/scss/westgate/_pages.scss @@ -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; } diff --git a/scss/westgate/_posts.scss b/scss/westgate/_posts.scss index 46ccdf6..f9fb30e 100644 --- a/scss/westgate/_posts.scss +++ b/scss/westgate/_posts.scss @@ -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); } diff --git a/scss/westgate/_search.scss b/scss/westgate/_search.scss index ba19512..6e1b2fa 100644 --- a/scss/westgate/_search.scss +++ b/scss/westgate/_search.scss @@ -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; } diff --git a/scss/westgate/_surfaces.scss b/scss/westgate/_surfaces.scss index ba107e5..261e83d 100644 --- a/scss/westgate/_surfaces.scss +++ b/scss/westgate/_surfaces.scss @@ -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) { diff --git a/scss/westgate/_tokens.scss b/scss/westgate/_tokens.scss index cf1deab..c5af7fb 100644 --- a/scss/westgate/_tokens.scss +++ b/scss/westgate/_tokens.scss @@ -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; } diff --git a/scss/westgate/_topbar.scss b/scss/westgate/_topbar.scss index ff33ead..bd4949d 100644 --- a/scss/westgate/_topbar.scss +++ b/scss/westgate/_topbar.scss @@ -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); } diff --git a/scss/westgate/_topics.scss b/scss/westgate/_topics.scss index cedd429..75114c6 100644 --- a/scss/westgate/_topics.scss +++ b/scss/westgate/_topics.scss @@ -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); } diff --git a/scss/westgate/_widgets.scss b/scss/westgate/_widgets.scss index 3280149..bfa807a 100644 --- a/scss/westgate/_widgets.scss +++ b/scss/westgate/_widgets.scss @@ -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; diff --git a/scss/westgate/_wiki-prose.scss b/scss/westgate/_wiki-prose.scss index a55b0d3..076cc2c 100644 --- a/scss/westgate/_wiki-prose.scss +++ b/scss/westgate/_wiki-prose.scss @@ -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; }