From c3851107ab49cb0c8500b46364a1e63dadd9ae39 Mon Sep 17 00:00:00 2001 From: vickydotbat Date: Thu, 16 Jul 2026 14:44:39 +0000 Subject: [PATCH] Theme post code blocks + a11y fixes (impeccable audit) (#25) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Code blocks in posts rendered with the markdown plugin's default light highlight.js theme — white blocks on the dark ledger. This adds dark velvet pre/code styling and a Westgate-toned syntax palette (gold keywords, ledger-ink titles, muted green strings) for post content and the composer preview. Also picks up the quick wins from an impeccable audit: - Visible focus ring on the mobile drawer search (input had `outline: 0` with no replacement) - Input placeholder contrast raised to pass WCAG 4.5:1; tagsinput placeholder reuses the token instead of `$gray-500` - `prefers-reduced-motion` block zeroing transitions/animations (there were none before) - Fixed a stray `` closing a `
` in `quick-search-results.tpl` 🤖 Generated with [Claude Code](https://claude.com/claude-code) Reviewed-on: https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/pulls/25 Co-authored-by: vickydotbat Co-committed-by: vickydotbat --- DESIGN.md | 22 ++++- languages/en-GB/westgate.json | 21 +++- lib/theme.js | 5 + plugin.json | 1 + public/client.js | 34 ++++++- scss/overrides.scss | 4 +- scss/westgate/_controls.scss | 18 ++-- scss/westgate/_pages.scss | 4 +- scss/westgate/_posts.scss | 99 ++++++++++++++++++- scss/westgate/_responsive.scss | 10 ++ scss/westgate/_surfaces.scss | 10 +- scss/westgate/_topbar.scss | 10 +- scss/westgate/_topics.scss | 8 +- scss/westgate/_widgets.scss | 12 +-- scss/westgate/_wiki-prose.scss | 44 ++++----- templates/category.tpl | 8 +- .../category/selector-dropdown-content.tpl | 2 +- templates/partials/footer/westgate-global.tpl | 38 +++---- templates/partials/header/topbar.tpl | 12 +-- templates/partials/quick-search-results.tpl | 2 +- templates/partials/topics_list.tpl | 4 +- 21 files changed, 274 insertions(+), 94 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index de62da9..74293c8 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -37,7 +37,10 @@ typography: fontFamily: "'IBM Plex Mono', ui-monospace, monospace" fontWeight: 400 rounded: - md: "8px" + xs: "3px" + sm: "4px" + md: "6px" + lg: "8px" spacing: 2xs: "0.25rem" xs: "0.5rem" @@ -61,7 +64,7 @@ components: card: backgroundColor: "{colors.velvet-panel}" textColor: "{colors.ash-text}" - rounded: "{rounded.md}" + rounded: "{rounded.lg}" --- # Design System: Westgate @@ -152,25 +155,31 @@ Shadows here are candlelight, not physics. They set mood — a soft top highligh ### Named Rules **The Candlelight Rule.** Shadows are atmosphere. If you need to show one thing sits above another, change the panel tone and border alpha; do not invent a bigger shadow. +## 4½. Motion & Modes + +- Transitions are short (0.16–0.25s) and touch only paint/composite properties (color, background, border-color, box-shadow, transform). No layout-property animation. +- A global `prefers-reduced-motion: reduce` block zeroes all transition and animation durations. +- Box-shadow focus rings carry a transparent 2px outline so forced-colors / high-contrast mode still shows focus. + ## 5. Components Etched and restrained: controls read as engraved metal — thin gilt borders, quiet vertical gradients, nothing shouts. ### Buttons -- **Shape:** softly rounded (Bootstrap default radius; surfaces use 8px). +- **Shape:** softly rounded. Radius scale: 8px for surfaces (cards, panels, dropdowns), 6px for controls and post containers, 4px for chips and inline code, 3px for tiny badges. - **Primary:** dark gold plate. Gradient #5a4a1a → #473914, border Old Gilt (#a8893f), text #f0e6d8, with a 1px inner top highlight. Hover warms the gradient to #6a5720 → #53431a and brightens the border to Tarnished Gold. - **Secondary / Ghost:** near-transparent dark fill (rgba(8,7,10,0.12)) with a gilt border at 28% alpha and text #d8cec0. Hover adds a faint gold wash (rgba(194,163,90,0.075)) and strengthens the border. - **Focus:** 2px outline in solid Tarnished Gold (#c2a35a, the `--wg-focus-ring` token) — WCAG wants ≥3:1 for focus indicators, so the outline never uses the soft alpha token. The soft token (rgba(194,163,90,0.28)) is only for input glows. ### Cards / Containers (the velvet surface) -- **Corner Style:** 8px radius. +- **Corner Style:** 8px radius (6px on post containers). - **Background:** the velvet gradient — a 100° sweep from bruised plum (rgba(42,18,34,0.46)) into near-black — over category rows, topic rows, post containers, and headers. - **Border:** 1px Tarnished Gold at 14% alpha; hover raises it to 22%. - **Shadow Strategy:** Velvet rest → Velvet hover (see Elevation). - **Plain panels** (cards, list-group items) use flat Velvet Panel (#18141d) with a soft gold border at 8% alpha. ### Inputs / Fields -- **Style:** near-black well (rgba(18,15,22,0.96)), 1px gilt border at 18% alpha, Bone Text. Placeholders are Ash Text at 62% alpha. +- **Style:** near-black well (rgba(18,15,22,0.96)), 1px gilt border at 18% alpha, Bone Text. Placeholders are Ash Text at 74% alpha (the floor that keeps 4.5:1 contrast). - **Focus:** border rises to gold at 50% alpha plus a 1px gold ring (rgba(194,163,90,0.28)) and a faint light wash. Focus is always visible. - **Selects:** custom gold chevron (inline SVG, stroke #c2a35a). - **Switches:** dark track with gilt border; the thumb is a Ledger Ink dot. @@ -178,6 +187,9 @@ Etched and restrained: controls read as engraved metal — thin gilt borders, qu ### Navigation (topbar) - Cinzel labels, tracked 0.08em and uppercase, over the dark base. Count bubbles honor the `hidden` class and only show with a real count. +### Code (posts, composer preview, wiki prose) +Code is written in a darker well of the same page: blocks use a vertical near-black gradient (rgba(18,15,22,0.92) → rgba(8,7,10,0.82)) with a gilt border at 22% alpha and 6px radius; inline code sits in rgba(8,7,10,0.45) with a 12% gilt border and 4px radius, in IBM Plex Mono. Syntax colors stay in the court's palette: keywords Gold Lit (#e0c878), titles/functions Ledger Ink (#d8c28a), types/built-ins Tarnished Gold (#c2a35a), strings a muted moss (#a3c58a), numbers/attributes a dry apricot (#d9a37a), comments Dust Text italic, deletions #c55a5f. Never ship the highlighter's default light theme. + ### The Ledger (signature component) Ruled, page-like surfaces (notification tables, list ledgers): a flat 100° gradient from dark plum into black, faint gold rulings (rgba(194,163,90,0.055)) with stronger rules (0.16) for structure, headers in Cinzel Ledger Ink Muted, text in Ledger Ink, and Wax Seal (#a84a4e) for stamped accents. diff --git a/languages/en-GB/westgate.json b/languages/en-GB/westgate.json index 8d11c7f..a23dbe8 100644 --- a/languages/en-GB/westgate.json +++ b/languages/en-GB/westgate.json @@ -1,5 +1,24 @@ { "wiki-badge": "Wiki", "404.title": "You've wandered off the map.", - "404.message": "This alley leads nowhere, and in Westgate, nowhere is where the Night Masks find you.
Turn back to the lantern-lit streets before they notice you lingering." + "404.message": "This alley leads nowhere, and in Westgate, nowhere is where the Night Masks find you.
Turn back to the lantern-lit streets before they notice you lingering.", + "view-original": "View Original", + "copy-handle": "Copy handle", + "select-topic": "Select topic", + "footer.description": "A Neverwinter Nights: Enhanced Edition persistent world of gothic intrigue, set in the Forgotten Realms port city of Westgate.", + "footer.motto": "Mind the shadows.", + "footer.explore": "Explore", + "footer.home": "Home", + "footer.news": "News", + "footer.gallery": "Gallery", + "footer.dev-blog": "Dev Blog", + "footer.join-team": "Join the Team", + "footer.community": "Community", + "footer.forums": "Forums", + "footer.wiki": "Wiki", + "footer.register": "Register", + "footer.how-to-join": "How to Join", + "footer.copyright": "© %1 Shadows Over Westgate · A NWN:EE Persistent World", + "footer.setting": "Forgotten Realms · Westgate · Sea of Fallen Stars", + "footer.powered-by": "Powered by" } diff --git a/lib/theme.js b/lib/theme.js index 007ba75..3146ffc 100644 --- a/lib/theme.js +++ b/lib/theme.js @@ -178,6 +178,11 @@ library.filterMiddlewareRenderHeader = async function (hookData) { return hookData; }; +library.filterMiddlewareRenderFooter = async function (hookData) { + hookData.templateData.currentYear = new Date().getFullYear(); + return hookData; +}; + // generated avatars stay in the court's palette instead of core's material-design brights; // core deterministically remaps any stored color not in this list (src/user/data.js) library.getIconBackgrounds = async function (data) { diff --git a/plugin.json b/plugin.json index 8e235af..d09231c 100644 --- a/plugin.json +++ b/plugin.json @@ -9,6 +9,7 @@ { "hook": "filter:user.saveSettings", "method": "saveUserSettings" }, { "hook": "filter:user.profileMenu", "method": "addProfileItem" }, { "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" }, + { "hook": "filter:middleware.renderFooter", "method": "filterMiddlewareRenderFooter" }, { "hook": "filter:user.iconBackgrounds", "method": "getIconBackgrounds" } ], "scripts": ["public/client.js", "../nodebb-theme-harmony/public/harmony.js"], diff --git a/public/client.js b/public/client.js index 9ae41d7..04839e8 100644 --- a/public/client.js +++ b/public/client.js @@ -115,13 +115,15 @@ return element && element.offsetWidth ? element.offsetWidth : 0; } - function setMobileTableMinWidth(table, wrapper) { + function measureMobileTableMinWidth(table) { const columnCount = getTableColumnCount(table); const measuredWidth = getRenderedWidth(table); const columnWidthFloor = getTableColumnWidthFloor(table, columnCount); const desktopWidthFloor = tableUsesFluidWidth(table) && columnCount >= 8 ? WIKI_TABLE_DESKTOP_MIN_WIDTH : 0; - const minWidth = Math.ceil(Math.max(measuredWidth, columnWidthFloor, desktopWidthFloor)); + return Math.ceil(Math.max(measuredWidth, columnWidthFloor, desktopWidthFloor)); + } + function applyMobileTableMinWidth(wrapper, minWidth) { if (minWidth > 0 && wrapper && wrapper.style && typeof wrapper.style.setProperty === 'function') { wrapper.style.setProperty('--wg-mobile-table-min-width', `${minWidth}px`); } @@ -133,6 +135,7 @@ return; } + const wrapped = []; toArray(scope.querySelectorAll(WIKI_TABLE_SELECTOR)).forEach((table) => { if (!table || !table.parentNode || table.closest(SKIP_TABLE_SELECTOR)) { return; @@ -144,8 +147,16 @@ wrapper.setAttribute('aria-label', 'Scrollable table'); table.parentNode.insertBefore(wrapper, table); wrapper.appendChild(table); - setMobileTableMinWidth(table, wrapper); + wrapped.push({ table, wrapper }); }); + + // batch: measure every table first, then write, so reads and writes + // don't interleave and force repeated reflows + wrapped + .map(({ table, wrapper }) => ({ wrapper, minWidth: measureMobileTableMinWidth(table) })) + .forEach(({ wrapper, minWidth }) => { + applyMobileTableMinWidth(wrapper, minWidth); + }); } function getWestgateTopbar() { @@ -223,6 +234,20 @@ $(document).ready(function () { wrapWestgateWikiTables(document); initWestgateTopbar(); + + // topic-select checkboxes are elements; make them keyboard-operable + $(document).on('keydown', 'i[component="topic/select"]', function (ev) { + if (ev.key === 'Enter' || ev.key === ' ') { + ev.preventDefault(); + $(this).trigger('click'); + } + }); + $(document).on('click', 'i[component="topic/select"]', function () { + // core toggles the icon class in its own click handler; sync after it runs + setTimeout(() => { + this.setAttribute('aria-checked', this.classList.contains('fa-check-square') ? 'true' : 'false'); + }, 0); + }); $(window).on('action:ajaxify.end', function () { wrapWestgateWikiTables(document); initWestgateTopbar(); @@ -272,6 +297,9 @@ class: category.class || classMap[String(category.cid)] || '', })); callback(null, payload); + }).catch(() => { + // class map is cosmetic; never block search results on it + callback(null, payload); }); }); }; diff --git a/scss/overrides.scss b/scss/overrides.scss index 7e93c75..7c57860 100644 --- a/scss/overrides.scss +++ b/scss/overrides.scss @@ -66,7 +66,7 @@ $input-bg: rgba($white, 0.025) !default; $input-color: $wg-text !default; $input-border-color: rgba($wg-gold, 0.18) !default; $input-focus-border-color: rgba($wg-gold, 0.42) !default; -$input-placeholder-color: rgba($wg-text-soft, 0.62) !default; +$input-placeholder-color: rgba($wg-text-soft, 0.74) !default; $btn-border-radius: 6px !default; $border-radius: 8px !default; $border-radius-sm: 6px !default; @@ -109,5 +109,5 @@ $breadcrumb-active-color: $body-color !default; $breadcrumb-item-padding-x: 12px !default; .form-control::placeholder, .bootstrap-tagsinput::placeholder { - color: $gray-500 !important; + color: $input-placeholder-color !important; } diff --git a/scss/westgate/_controls.scss b/scss/westgate/_controls.scss index 5524417..8cc1ed6 100644 --- a/scss/westgate/_controls.scss +++ b/scss/westgate/_controls.scss @@ -216,8 +216,12 @@ input[type="number"].form-control::-webkit-outer-spin-button { border-color: rgba(194, 163, 90, 0.5) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), - 0 0 0 1px rgba(194, 163, 90, 0.28) !important; + 0 0 0 1px var(--wg-focus) !important; color: var(--wg-text) !important; + // invisible normally; forced-colors mode paints transparent outlines in the + // system highlight color, so box-shadow-only focus stays visible there + outline: 2px solid transparent; + outline-offset: 1px; } input[type="password"].form-control, @@ -318,7 +322,7 @@ table[component="notification/table"] a[data-type]:focus { background-size: 100% 1.65rem, auto; - border-color: rgba(194, 163, 90, 0.28) !important; + border-color: var(--wg-focus) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035), 0 0 0 1px rgba(0, 0, 0, 0.28) !important; @@ -427,7 +431,7 @@ table[component="notification/table"] a[data-type]:focus { border-radius: 8px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), - 0 0 0 1px rgba(194, 163, 90, 0.28) !important; + 0 0 0 1px var(--wg-focus) !important; } .composer .title-container { @@ -461,7 +465,7 @@ table[component="notification/table"] a[data-type]:focus { [component="composer"] .btn:hover, .quick-reply .btn:hover, [component="topic/quickreply/container"] .btn:hover { - background: rgba(194, 163, 90, 0.08) !important; + background: var(--wg-border-soft) !important; color: var(--wg-text) !important; } @@ -521,14 +525,14 @@ table[component="notification/table"] a[data-type]:focus { color: var(--wg-gold) !important; } .dropdown-item.active { - background-color: rgba(194, 163, 90, 0.08) !important; + background-color: var(--wg-border-soft) !important; } .dropdown-item:hover, .dropdown-item:focus, .dropdown-menu .nav-link:hover, .dropdown-menu .nav-link:focus { - background: rgba(194, 163, 90, 0.08) !important; + background: var(--wg-border-soft) !important; color: var(--wg-text) !important; } @@ -602,7 +606,7 @@ table[component="notification/table"] a[data-type]:focus { [component="sidebar/right"] .nav-link:focus, .bottombar-nav .nav-link:hover, .bottombar-nav .nav-link:focus { - background: rgba(194, 163, 90, 0.08); + background: var(--wg-border-soft); color: var(--wg-text) !important; } diff --git a/scss/westgate/_pages.scss b/scss/westgate/_pages.scss index 50a7f9e..824d6b7 100644 --- a/scss/westgate/_pages.scss +++ b/scss/westgate/_pages.scss @@ -136,7 +136,7 @@ a.sow-card:hover { letter-spacing: 0.08em; text-transform: uppercase; color: var(--wg-gold); - background: rgba(194, 163, 90, 0.08); + background: var(--wg-border-soft); border: 1px solid var(--wg-gold-soft); border-radius: 4px; padding: 3px 9px; @@ -654,7 +654,7 @@ a.sow-card:hover { margin-top: var(--wg-space-md); padding: 3px 9px; color: var(--wg-gold); - background: rgba(194, 163, 90, 0.08); + background: var(--wg-border-soft); border: 1px solid var(--wg-gold-soft); border-radius: 4px; } diff --git a/scss/westgate/_posts.scss b/scss/westgate/_posts.scss index bdda286..811de7c 100644 --- a/scss/westgate/_posts.scss +++ b/scss/westgate/_posts.scss @@ -129,6 +129,101 @@ li[component="post"] .content h4 { text-shadow: none; } +// Code in posts: the markdown plugin ships a light highlight.js stylesheet +// (white .hljs background), so both the block and its syntax colors must be +// 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); + border-radius: 4px; + padding: 0.1em 0.35em; + color: var(--wg-text); + font-family: var(--wg-font-code); + font-size: 0.88em; +} + +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; + 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-width: thin; +} + +li[component="post"] .content pre code, +.composer .preview pre code { + background: transparent; + border: 0; + padding: 0; + color: inherit; + font-size: 0.85rem; +} + +li[component="post"] .content pre code.hljs, +.composer .preview pre code.hljs { + background: transparent !important; + color: var(--wg-text-soft) !important; + + .hljs-comment, + .hljs-quote { + color: var(--wg-text-muted); + font-style: italic; + } + + .hljs-keyword, + .hljs-selector-tag, + .hljs-literal, + .hljs-tag { + color: #e0c878; + } + + .hljs-string, + .hljs-regexp, + .hljs-addition { + color: #a3c58a; + } + + .hljs-number, + .hljs-attr, + .hljs-attribute, + .hljs-variable, + .hljs-template-variable, + .hljs-symbol { + color: #d9a37a; + } + + .hljs-title, + .hljs-section, + .hljs-name, + .hljs-selector-id, + .hljs-selector-class { + color: var(--wg-ledger-ink); + } + + .hljs-type, + .hljs-built_in, + .hljs-builtin-name, + .hljs-meta { + color: var(--wg-gold); + } + + .hljs-deletion { + color: #c55a5f; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: 600; + } +} + li[component="post"] .content blockquote { background: rgba(35, 27, 23, 0.36); border-left: 3px solid rgba(194, 163, 90, 0.4); @@ -150,7 +245,7 @@ li[component="post"] [component="post/reply-count"] { li[component="post"] [component="post/actions"] .btn:hover, li[component="post"] [component="post/reply-count"]:hover { color: var(--wg-text) !important; - background: rgba(194, 163, 90, 0.08) !important; + background: var(--wg-border-soft) !important; border-color: rgba(194, 163, 90, 0.2) !important; } @@ -239,7 +334,7 @@ li[component="post"] [component="post/downvote"] { .pagination-block { background: - linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.08) calc(100% - 1px)), + linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-border-soft) calc(100% - 1px)), rgba(18, 15, 22, 0.96) !important; background-size: 100% var(--wg-ledger-line), auto; border-color: var(--wg-ledger-border) !important; diff --git a/scss/westgate/_responsive.scss b/scss/westgate/_responsive.scss index 9a64978..9622d76 100644 --- a/scss/westgate/_responsive.scss +++ b/scss/westgate/_responsive.scss @@ -54,3 +54,13 @@ box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.28); } } + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/scss/westgate/_surfaces.scss b/scss/westgate/_surfaces.scss index b4e0bb2..ba107e5 100644 --- a/scss/westgate/_surfaces.scss +++ b/scss/westgate/_surfaces.scss @@ -141,7 +141,7 @@ samp, } .alert { - background: rgba(194, 163, 90, 0.08); + background: var(--wg-border-soft); border-color: rgba(194, 163, 90, 0.18); color: var(--wg-text-soft); } @@ -291,7 +291,7 @@ li[component="category/topic"] .user-icon { rgba(8, 7, 10, 0.08) ), var(--wg-velvet-panel) !important; - border: 1px solid rgba(194, 163, 90, 0.14) !important; + border: 1px solid var(--wg-border) !important; border-radius: 8px !important; box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.028), @@ -335,7 +335,7 @@ li[component="category/topic"] .user-icon { .chats-dropdown .mark-read:focus, .chats-list .mark-read:hover, .chats-list .mark-read:focus { - background: rgba(194, 163, 90, 0.08) !important; + background: var(--wg-border-soft) !important; } .chats-dropdown .chat-room-btn, @@ -352,7 +352,7 @@ li[component="category/topic"] .user-icon { [component="chat/public/room"]:hover, [component="chat/public/room"]:focus, [component="chat/public/room"].unread { - background: rgba(194, 163, 90, 0.08) !important; + background: var(--wg-border-soft) !important; border-color: rgba(194, 163, 90, 0.24) !important; color: var(--wg-text) !important; } @@ -387,7 +387,7 @@ li[component="category/topic"] .user-icon { rgba(216, 194, 138, 0.13), rgba(70, 45, 52, 0.28) ) !important; - border: 1px solid rgba(194, 163, 90, 0.28) !important; + border: 1px solid var(--wg-focus) !important; color: var(--wg-ledger-ink) !important; } diff --git a/scss/westgate/_topbar.scss b/scss/westgate/_topbar.scss index 0caed92..1684bc0 100644 --- a/scss/westgate/_topbar.scss +++ b/scss/westgate/_topbar.scss @@ -189,7 +189,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98); .wg-topbar .btn.btn-light:hover, .wg-topbar .btn.btn-light:focus { color: var(--wg-text) !important; - background: rgba(194, 163, 90, 0.08) !important; + background: var(--wg-border-soft) !important; } // one primary vocabulary: the dark gold plate from _controls.scss @@ -296,6 +296,12 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98); outline: 0; } +// 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); + box-shadow: 0 0 0 1px var(--wg-focus); +} + .wg-topbar__drawer-nav, .wg-topbar__drawer-actions, .wg-topbar__drawer-auth { @@ -323,7 +329,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98); .wg-topbar__drawer-actions a:focus { color: var(--wg-text); border-color: rgba(194, 163, 90, 0.22); - background: rgba(194, 163, 90, 0.08); + background: var(--wg-border-soft); } @media (max-width: 1199.98px) { diff --git a/scss/westgate/_topics.scss b/scss/westgate/_topics.scss index e08f017..cedd429 100644 --- a/scss/westgate/_topics.scss +++ b/scss/westgate/_topics.scss @@ -28,7 +28,7 @@ body.template-category .category-header .description { .topic-list-header .btn { background: transparent !important; - border-color: rgba(194, 163, 90, 0.14) !important; + border-color: var(--wg-border) !important; color: var(--wg-text-soft) !important; font-family: var(--wg-font-ui); } @@ -57,7 +57,7 @@ li[component="category/topic"] { overflow: hidden; background: linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)), - linear-gradient(to right, rgba(194, 163, 90, 0.08), transparent 5.25rem), + linear-gradient(to right, var(--wg-border-soft), transparent 5.25rem), var(--wg-ledger-panel) !important; background-size: 100% var(--wg-ledger-line), auto, auto; border: 1px solid var(--wg-ledger-border) !important; @@ -89,7 +89,7 @@ li[component="category/topic"]::after { right: 0; left: 0; height: 1px; - background: linear-gradient(to right, rgba(194, 163, 90, 0.28), rgba(194, 163, 90, 0.05), transparent); + background: linear-gradient(to right, var(--wg-focus), rgba(194, 163, 90, 0.05), transparent); pointer-events: none; } @@ -133,7 +133,7 @@ li[component="category/topic"].pinned:not(.unread) { 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-left-color: rgba(194, 163, 90, 0.28) !important; + border-left-color: var(--wg-focus) !important; } li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.pinned)) { diff --git a/scss/westgate/_widgets.scss b/scss/westgate/_widgets.scss index 6e725f7..3280149 100644 --- a/scss/westgate/_widgets.scss +++ b/scss/westgate/_widgets.scss @@ -56,7 +56,7 @@ linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)), var(--wg-velvet-panel) !important; background-size: 100% var(--wg-ledger-line), auto; - border: 1px solid rgba(194, 163, 90, 0.14); + border: 1px solid var(--wg-border); border-radius: 8px; box-shadow: var(--wg-velvet-shadow); } @@ -81,7 +81,7 @@ [data-widget-area] .card-header { background: - linear-gradient(to right, rgba(194, 163, 90, 0.08), rgba(42, 18, 34, 0.2), transparent), + 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; color: var(--wg-ledger-ink) !important; @@ -97,7 +97,7 @@ } [data-widget-area] .card-header + .card-body { - border-top: 1px solid rgba(194, 163, 90, 0.08); + border-top: 1px solid var(--wg-border-soft); } [data-widget-area] .alert { @@ -135,7 +135,7 @@ background: linear-gradient(to right, rgba(194, 163, 90, 0.12), transparent 5rem), var(--wg-velvet-panel) !important; - border-color: rgba(194, 163, 90, 0.28) !important; + border-color: var(--wg-focus) !important; border-left-color: rgba(194, 163, 90, 0.62) !important; color: #e0cea2 !important; } @@ -184,7 +184,7 @@ [data-widget-area] .list-group-item { background: rgba(255, 255, 255, 0.014) !important; - border-color: rgba(194, 163, 90, 0.08) !important; + border-color: var(--wg-border-soft) !important; color: var(--wg-text-soft) !important; } @@ -234,7 +234,7 @@ background: linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)), var(--wg-velvet-panel) !important; - border: 1px solid rgba(194, 163, 90, 0.14); + border: 1px solid var(--wg-border); border-radius: 8px; box-shadow: var(--wg-velvet-shadow); } diff --git a/scss/westgate/_wiki-prose.scss b/scss/westgate/_wiki-prose.scss index 9f2e1a7..a9aaeb4 100644 --- a/scss/westgate/_wiki-prose.scss +++ b/scss/westgate/_wiki-prose.scss @@ -83,7 +83,7 @@ --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: rgba(194, 163, 90, 0.08); + --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-padding: 0; @@ -102,7 +102,7 @@ --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 18px rgba(194, 163, 90, 0.08); + 0 0 18px var(--wg-border-soft); --wiki-ck-base-background: #18141d; --wiki-ck-base-foreground: #1e1824; @@ -121,7 +121,7 @@ --wiki-ck-toolbar-border: rgba(194, 163, 90, 0.18); --wiki-ck-button-bg: transparent; --wiki-ck-button-hover-bg: rgba(194, 163, 90, 0.1); - --wiki-ck-button-active-bg: rgba(194, 163, 90, 0.14); + --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); @@ -244,7 +244,7 @@ font-family: var(--wg-font-ui); font-weight: 100; line-height: 1; - text-shadow: 0 0 10px rgba(194, 163, 90, 0.28); + text-shadow: 0 0 10px var(--wg-focus); } .westgate-wiki .wiki-article-prose .wiki-callout::after, @@ -333,9 +333,9 @@ linear-gradient( 90deg, transparent, - rgba(194, 163, 90, 0.28) 22%, + var(--wg-focus) 22%, rgba(194, 163, 90, 0.82) 50%, - rgba(194, 163, 90, 0.28) 78%, + var(--wg-focus) 78%, transparent ) ); @@ -385,9 +385,9 @@ linear-gradient( 90deg, transparent, - rgba(194, 163, 90, 0.28) 22%, + var(--wg-focus) 22%, rgba(194, 163, 90, 0.82) 50%, - rgba(194, 163, 90, 0.28) 78%, + var(--wg-focus) 78%, transparent ) ); @@ -553,7 +553,7 @@ } .westgate-wiki .wiki-sidebar-disclosure__summary:focus { - box-shadow: inset 0 0 0 2px rgba(194, 163, 90, 0.28) !important; + box-shadow: inset 0 0 0 2px var(--wg-focus) !important; } .westgate-wiki .wiki-article-toc__ol.wiki-article-toc__ol--nest { @@ -662,8 +662,8 @@ .westgate-wiki .wiki-index-jump-link:focus, .westgate-wiki .wiki-index-jump-link.is-active { background: - linear-gradient(180deg, rgba(194, 163, 90, 0.14), rgba(81, 25, 61, 0.12)), - rgba(194, 163, 90, 0.08) !important; + 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; transform: translateY(-1px); @@ -694,7 +694,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%, rgba(194, 163, 90, 0.28) 31% 58%, transparent 59%); + background: radial-gradient(circle, #e0c878 0 30%, var(--wg-focus) 31% 58%, transparent 59%); block-size: 0.42rem; content: ""; inline-size: 0.42rem; @@ -725,7 +725,7 @@ } .westgate-wiki .wiki-index-entry--subpage::after { - background: linear-gradient(180deg, rgba(194, 163, 90, 0.08), 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(194, 163, 90, 0.34))); block-size: 1.18rem; content: ""; inline-size: 1px; @@ -793,7 +793,7 @@ } .westgate-wiki .wiki-topic-list__item--subpage::after { - background: linear-gradient(180deg, rgba(194, 163, 90, 0.08), var(--wiki-tree-line-color)); + background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color)); block-size: 0.44em; content: ""; inline-size: 1px; @@ -871,7 +871,7 @@ } .westgate-wiki .wiki-sidebar-directory .wiki-sidebar-nav-row--page:has(.wiki-sidebar-parent-path)::before { - background: linear-gradient(90deg, var(--wiki-sidebar-tree-line-color), rgba(194, 163, 90, 0.08)); + background: linear-gradient(90deg, var(--wiki-sidebar-tree-line-color), var(--wg-border-soft)); block-size: 1px; content: ""; inline-size: 0.7rem; @@ -942,7 +942,7 @@ .westgate-wiki .wiki-index-entry-badge { background: rgba(194, 163, 90, 0.055) !important; - border-color: rgba(194, 163, 90, 0.14) !important; + border-color: var(--wg-border) !important; } .westgate-wiki .wiki-fab-dock--floating { @@ -1088,7 +1088,7 @@ .westgate-wiki-compose .ck.ck-toolbar .ck.ck-button:focus-visible, .westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button:focus-visible { - outline: 2px solid rgba(194, 163, 90, 0.28) !important; + outline: 2px solid var(--wg-focus) !important; outline-offset: 1px; } @@ -1200,7 +1200,7 @@ .westgate-wiki .wiki-article-prose :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table), .westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-content :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table), .westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-content :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table) { - border: 1px solid rgba(194, 163, 90, 0.14); + border: 1px solid var(--wg-border); border-radius: 7px; box-shadow: inset -1.25rem 0 1rem -1rem rgba(194, 163, 90, 0.16), @@ -1263,7 +1263,7 @@ .westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-content pre[data-language]::after, .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: rgba(194, 163, 90, 0.14) !important; + background: var(--wg-border) !important; border: 1px solid rgba(194, 163, 90, 0.22) !important; border-radius: 0 0 0 5px !important; color: var(--wg-text-soft) !important; @@ -1372,7 +1372,7 @@ body:has(#westgate-wiki-compose) .ck.ck-dropdown__panel .ck.ck-button:not(.ck-co body:has(#westgate-wiki-compose) .ck.ck-balloon-panel:not(.ck-powered-by-balloon) .ck.ck-button:not(.ck-color-grid__tile).ck-on, body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid__tile).ck-on { background: var(--wiki-ck-button-on-bg) !important; - border-color: rgba(194, 163, 90, 0.28) !important; + border-color: var(--wg-focus) !important; color: var(--wiki-ck-button-on-color) !important; } @@ -1542,7 +1542,7 @@ body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box:focus { } body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box.ck-on { - background: rgba(194, 163, 90, 0.28) !important; + background: var(--wg-focus) !important; border-color: rgba(246, 223, 163, 0.64) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.08), @@ -1582,7 +1582,7 @@ body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-input, .ck-input border-color: rgba(194, 163, 90, 0.5) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.026), - 0 0 0 1px rgba(194, 163, 90, 0.28) !important; + 0 0 0 1px var(--wg-focus) !important; outline: none !important; } diff --git a/templates/category.tpl b/templates/category.tpl index d53c030..61d06c7 100644 --- a/templates/category.tpl +++ b/templates/category.tpl @@ -21,8 +21,8 @@ {{{ if !isNumber(cid) }}} - View Original - + [[westgate:view-original]] + {{{ end }}} {{{ if (!feeds:disableRSS && rssFeedUrl) }}} @@ -39,7 +39,7 @@ {{{ if ./handleFull }}}

[[category:handle.description, {handleFull}]] - +

{{{ end }}} @@ -65,7 +65,7 @@ {{{ end }}} diff --git a/templates/partials/category/selector-dropdown-content.tpl b/templates/partials/category/selector-dropdown-content.tpl index e66d869..34d7670 100644 --- a/templates/partials/category/selector-dropdown-content.tpl +++ b/templates/partials/category/selector-dropdown-content.tpl @@ -24,7 +24,7 @@ {{{ each categoryItems }}}

- A Neverwinter Nights: Enhanced Edition persistent world of gothic intrigue, set in the Forgotten Realms port city of Westgate. + [[westgate:footer.description]]

-

Mind the shadows.

+

[[westgate:footer.motto]]

-