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

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:
2026-07-16 14:44:39 +00:00
committed by archvillainette
parent 9ec0170e37
commit c3851107ab
21 changed files with 274 additions and 94 deletions
+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;
}
+2 -2
View File
@@ -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;
}
+97 -2
View File
@@ -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;
+10
View File
@@ -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;
}
}
+5 -5
View File
@@ -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;
}
+8 -2
View File
@@ -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) {
+4 -4
View File
@@ -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)) {
+6 -6
View File
@@ -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);
}
+22 -22
View File
@@ -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;
}