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

Theme post code blocks + a11y fixes (impeccable audit) (#25)

Browse Source 
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 `</li>` closing a `<div>` in `quick-search-results.tpl`

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: #25
Co-authored-by: vickydotbat <vickydotbat@tutamail.com>
Co-committed-by: vickydotbat <vickydotbat@tutamail.com>
This commit was merged in pull request #25.
This commit is contained in:
archvillainette
2026-07-16 14:44:39 +00:00
committed by archvillainette
parent 9ec0170e37
commit c3851107ab
21 changed files with 274 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/westgate/_controls.scss
+11 -7
View File
@@ -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;
}