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

prototype(#53): palette candidates as runtime token swaps

Browse Source 
Throwaway. Tokenises the theme's literal colours so candidate palettes can be
swapped in the browser, adds three candidates (Plum Noir one-metal, two-metal
pewter, two-metal plus a champagne inset), a WCAG checker, a seeder and the
screenshots they are judged on.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
archvillainette
2026-07-31 16:31:41 +02:00
co-authored by Claude Opus 5
parent cfef363107
commit ea36116e62
48 changed files with 743 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/westgate/_categories.scss
+13 -13
View File
@@ -24,7 +24,7 @@ li[component="categories/category"] {
}
li[component="categories/category"].unread {
border-color: rgba(194, 163, 90, 0.24) !important;
border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
}
li[component="categories/category"] .icon {
@@ -34,8 +34,8 @@ li[component="categories/category"] .icon {
// plate into the velvet register while keeping the per-category hue
background-image: linear-gradient(
160deg,
rgba(42, 18, 34, 0.42),
rgba(9, 8, 11, 0.58)
rgba(var(--wg-plum-rgb), 0.42),
rgba(var(--wg-bg-deep-rgb), 0.58)
);
box-shadow:
inset 0 1px 0 rgba(255, 242, 204, 0.28),
@@ -55,8 +55,8 @@ body.template-category .category-header .icon {
border: 1px solid var(--wg-etched-highlight);
background-image: linear-gradient(
160deg,
rgba(42, 18, 34, 0.42),
rgba(9, 8, 11, 0.58)
rgba(var(--wg-plum-rgb), 0.42),
rgba(var(--wg-bg-deep-rgb), 0.58)
);
filter: saturate(0.62) contrast(1.12);
box-shadow:
@@ -223,8 +223,8 @@ li[component="categories/category"] h2.title::after {
height: 1px;
background: linear-gradient(
to right,
rgba(194, 163, 90, 0.13),
rgba(194, 163, 90, 0.045) 58%,
rgba(var(--wg-gold-rgb), 0.13),
rgba(var(--wg-gold-rgb), 0.045) 58%,
transparent 94%
);
pointer-events: none;
@@ -261,7 +261,7 @@ ul.category-children {
min-height: 2.1rem;
padding: 0.25rem 0.65rem 0.25rem 0.3rem;
background: rgba(44, 22, 34, 0.3);
border: 1px solid rgba(194, 163, 90, 0.11);
border: 1px solid rgba(var(--wg-gold-rgb), 0.11);
border-radius: 8px;
transition:
background 0.18s ease,
@@ -304,12 +304,12 @@ ul.category-children {
.category-children-item > div:hover,
.westgate-category-child:hover {
background: rgba(70, 30, 48, 0.4);
border-color: rgba(194, 163, 90, 0.24);
border-color: rgba(var(--wg-gold-rgb), 0.24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.category-children-item a {
color: #d8c28a !important;
color: var(--wg-ledger-ink) !important;
display: block;
min-width: 0;
font-weight: 600;
@@ -318,14 +318,14 @@ ul.category-children {
}
.category-children-item a:hover {
color: #e0c878 !important;
color: var(--wg-gold-lit) !important;
}
li[component="categories/category"] .meta.stats > div {
min-height: 3.55rem;
padding: var(--wg-space-2xs) var(--wg-space-xs);
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.09) !important;
border-radius: 3px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
@@ -349,7 +349,7 @@ li[component="categories/category"] .meta.stats .text-muted {
}
li[component="categories/category"] .lastpost {
border-left-color: rgba(194, 163, 90, 0.36) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.36) !important;
}
li[component="categories/category"] .teaser .avatar {
scss/westgate/_controls.scss
+78 -78
View File
@@ -1,13 +1,13 @@
.btn-primary {
--bs-btn-bg: #5a4a1a;
--bs-btn-border-color: #a8893f;
--bs-btn-bg: var(--wg-gold-plate);
--bs-btn-border-color: var(--wg-gold-soft);
--bs-btn-color: #f0e6d8;
--bs-btn-hover-bg: #6a5720;
--bs-btn-hover-border-color: #c2a35a;
--bs-btn-hover-color: #fff4dd;
--bs-btn-hover-bg: var(--wg-gold-plate-hover);
--bs-btn-hover-border-color: var(--wg-gold);
--bs-btn-hover-color: var(--wg-gold-hi);
--bs-btn-active-bg: #493914;
--bs-btn-active-border-color: #c2a35a;
background-image: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
--bs-btn-active-border-color: var(--wg-gold);
background-image: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 8px rgba(0, 0, 0, 0.24);
@@ -15,7 +15,7 @@
.btn-primary:hover,
.btn-primary:focus {
background-image: linear-gradient(to bottom, #6a5720 0%, #53431a 100%);
background-image: linear-gradient(to bottom, var(--wg-gold-plate-hover) 0%, var(--wg-gold-plate-mid) 100%);
}
.btn-secondary,
@@ -23,13 +23,13 @@
.btn-ghost,
.btn-outline-secondary {
--bs-btn-color: #d8cec0;
--bs-btn-bg: rgba(8, 7, 10, 0.12);
--bs-btn-border-color: rgba(216, 194, 138, 0.28);
--bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
--bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
--bs-btn-hover-color: var(--wg-text);
--bs-btn-hover-bg: rgba(194, 163, 90, 0.075);
--bs-btn-hover-border-color: rgba(216, 194, 138, 0.44);
--bs-btn-active-bg: rgba(194, 163, 90, 0.12);
--bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
--bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.075);
--bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
--bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
--bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
background-image: linear-gradient(
to bottom,
rgba(255, 244, 221, 0.018),
@@ -39,36 +39,36 @@
}
.btn-light {
--bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
--bs-btn-hover-border-color: rgba(216, 194, 138, 0.5);
--bs-btn-active-bg: rgba(194, 163, 90, 0.15);
--bs-btn-active-border-color: rgba(216, 194, 138, 0.56);
--bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
--bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
--bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.15);
--bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.56);
}
// core's guest sign-up prompt ships btn-warning/btn-info: remap to the
// theme's two button voices (dark gold plate + ghost)
.guest-cta-alert .btn-warning {
--bs-btn-bg: #5a4a1a;
--bs-btn-border-color: #a8893f;
--bs-btn-bg: var(--wg-gold-plate);
--bs-btn-border-color: var(--wg-gold-soft);
--bs-btn-color: #f0e6d8;
--bs-btn-hover-bg: #6a5720;
--bs-btn-hover-border-color: #c2a35a;
--bs-btn-hover-color: #fff4dd;
--bs-btn-hover-bg: var(--wg-gold-plate-hover);
--bs-btn-hover-border-color: var(--wg-gold);
--bs-btn-hover-color: var(--wg-gold-hi);
--bs-btn-active-bg: #493914;
--bs-btn-active-border-color: #c2a35a;
--bs-btn-active-color: #fff4dd;
background-image: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
--bs-btn-active-border-color: var(--wg-gold);
--bs-btn-active-color: var(--wg-gold-hi);
background-image: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
}
.guest-cta-alert .btn-info {
--bs-btn-color: #d8cec0;
--bs-btn-bg: rgba(8, 7, 10, 0.12);
--bs-btn-border-color: rgba(216, 194, 138, 0.28);
--bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
--bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
--bs-btn-hover-color: var(--wg-text);
--bs-btn-hover-bg: rgba(194, 163, 90, 0.075);
--bs-btn-hover-border-color: rgba(216, 194, 138, 0.44);
--bs-btn-active-bg: rgba(194, 163, 90, 0.12);
--bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
--bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.075);
--bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
--bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
--bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
--bs-btn-active-color: var(--wg-text);
background-image: none;
}
@@ -84,12 +84,12 @@
.modal-footer .btn[data-bs-dismiss="modal"],
.modal-footer .btn[data-dismiss="modal"] {
--bs-btn-color: #d8cec0;
--bs-btn-bg: rgba(8, 7, 10, 0.16);
--bs-btn-border-color: rgba(216, 194, 138, 0.34);
--bs-btn-hover-color: #fff4dd;
--bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
--bs-btn-hover-border-color: rgba(216, 194, 138, 0.52);
--bs-btn-active-bg: rgba(194, 163, 90, 0.13);
--bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.16);
--bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.34);
--bs-btn-hover-color: var(--wg-gold-hi);
--bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
--bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.52);
--bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.13);
background-image: linear-gradient(
to bottom,
rgba(255, 244, 221, 0.024),
@@ -115,7 +115,7 @@
[component="topic/quickreply/container"] .card,
[component="topic/quickreply/container"] .card-body {
background-color: rgba(18, 15, 22, 0.96) !important;
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
color: var(--wg-text) !important;
}
@@ -147,17 +147,17 @@ input[type="number"].form-control::-webkit-outer-spin-button {
.form-check-input[role="switch"] {
background-color: rgba(255, 244, 221, 0.08) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23d8c28a'/%3e%3c/svg%3e") !important;
border-color: rgba(216, 194, 138, 0.26) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.26) !important;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.48),
0 0 0 1px rgba(8, 7, 10, 0.46) !important;
0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.46) !important;
cursor: pointer;
}
.form-switch .form-check-input:hover,
.form-check-input[role="switch"]:hover {
background-color: rgba(255, 244, 221, 0.12) !important;
border-color: rgba(216, 194, 138, 0.38) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.38) !important;
}
.form-switch .form-check-input:checked,
@@ -172,10 +172,10 @@ input[type="number"].form-control::-webkit-outer-spin-button {
.form-switch .form-check-input:focus,
.form-check-input[role="switch"]:focus {
border-color: rgba(216, 194, 138, 0.5) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.5) !important;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(194, 163, 90, 0.3) !important;
0 0 0 1px rgba(var(--wg-gold-rgb), 0.3) !important;
}
.quick-reply .card,
@@ -213,7 +213,7 @@ input[type="number"].form-control::-webkit-outer-spin-button {
.composer input:focus,
.composer .CodeMirror-focused {
background-color: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026),
0 0 0 1px var(--wg-focus) !important;
@@ -250,17 +250,17 @@ table[component="notification/table"],
li[component="post"] .content table {
--bs-table-bg: transparent;
--bs-table-color: var(--wg-text-soft);
--bs-table-border-color: rgba(194, 163, 90, 0.16);
--bs-table-striped-bg: rgba(194, 163, 90, 0.035);
--bs-table-border-color: rgba(var(--wg-gold-rgb), 0.16);
--bs-table-striped-bg: rgba(var(--wg-gold-rgb), 0.035);
--bs-table-striped-color: var(--wg-text-soft);
--bs-table-hover-bg: rgba(194, 163, 90, 0.04);
--bs-table-hover-bg: rgba(var(--wg-gold-rgb), 0.04);
--bs-table-hover-color: var(--wg-text);
color: var(--wg-text-soft) !important;
}
// classless markdown tables in posts don't get Bootstrap's .table variables
li[component="post"] .content table :where(th, td) {
border-color: rgba(194, 163, 90, 0.16);
border-color: rgba(var(--wg-gold-rgb), 0.16);
}
table[component="notification/table"] :where(th, td, label) {
@@ -277,7 +277,7 @@ li[component="post"] .content table thead :where(th, td) {
}
table[component="notification/table"] tbody tr {
border-color: rgba(194, 163, 90, 0.1) !important;
border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
}
table[component="notification/table"] a[data-type] {
@@ -296,13 +296,13 @@ table[component="notification/table"] a[data-type] {
table[component="notification/table"] a[data-type]:hover,
table[component="notification/table"] a[data-type]:focus {
background-color: rgba(194, 163, 90, 0.075);
background-color: rgba(var(--wg-gold-rgb), 0.075);
color: var(--wg-text);
}
.tool-modal {
background: transparent !important;
border-color: rgba(194, 163, 90, 0.16) !important;
border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
}
.tool-modal .bootstrap-tagsinput {
@@ -316,7 +316,7 @@ table[component="notification/table"] a[data-type]:focus {
linear-gradient(
to bottom,
transparent calc(100% - 1px),
rgba(194, 163, 90, 0.055) calc(100% - 1px)
rgba(var(--wg-gold-rgb), 0.055) calc(100% - 1px)
),
rgba(12, 10, 15, 0.92) !important;
background-size:
@@ -337,10 +337,10 @@ table[component="notification/table"] a[data-type]:focus {
padding: 0.2rem 0.48rem !important;
background: linear-gradient(
to bottom,
rgba(216, 194, 138, 0.13),
rgba(var(--wg-ledger-ink-rgb), 0.13),
rgba(70, 45, 52, 0.28)
) !important;
border: 1px solid rgba(194, 163, 90, 0.3) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.3) !important;
border-radius: 3px !important;
color: #e5d6b5 !important;
font-family: var(--wg-font-ui);
@@ -370,7 +370,7 @@ table[component="notification/table"] a[data-type]:focus {
rgba(23, 19, 28, 0.99),
rgba(12, 10, 15, 0.99)
) !important;
border: 1px solid rgba(194, 163, 90, 0.22) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
border-radius: 4px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.42);
}
@@ -399,13 +399,13 @@ table[component="notification/table"] a[data-type]:focus {
linear-gradient(
to bottom,
transparent calc(100% - 1px),
rgba(194, 163, 90, 0.055) calc(100% - 1px)
rgba(var(--wg-gold-rgb), 0.055) calc(100% - 1px)
),
var(--wg-velvet-panel) !important;
background-size:
100% var(--wg-ledger-line),
auto;
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
color: var(--wg-text-soft) !important;
}
@@ -447,7 +447,7 @@ table[component="notification/table"] a[data-type]:focus {
.composer .title-container input:focus,
.composer .title-container .form-control:focus {
border-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
box-shadow: none !important;
}
@@ -457,7 +457,7 @@ table[component="notification/table"] a[data-type]:focus {
.quick-reply .btn,
[component="topic/quickreply/container"] .btn {
color: var(--wg-text-soft) !important;
border-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
}
.composer .formatting-bar .btn:hover,
@@ -480,14 +480,14 @@ table[component="notification/table"] a[data-type]:focus {
rgba(23, 19, 28, 0.98),
rgba(13, 12, 17, 0.99)
) !important;
border-color: rgba(194, 163, 90, 0.16) !important;
border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
color: var(--wg-text-soft) !important;
}
.nav-tabs,
.nav-pills,
.list-group {
border-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
}
.nav-tabs .nav-link,
@@ -499,8 +499,8 @@ table[component="notification/table"] a[data-type]:focus {
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.list-group-item.active {
background: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(194, 163, 90, 0.26) !important;
background: rgba(var(--wg-gold-rgb), 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.26) !important;
color: var(--wg-text) !important;
}
@@ -510,7 +510,7 @@ table[component="notification/table"] a[data-type]:focus {
rgba(24, 20, 29, 0.98),
rgba(17, 15, 21, 0.99)
) !important;
border: 1px solid rgba(194, 163, 90, 0.16) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.16) !important;
border-radius: 8px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}
@@ -542,21 +542,21 @@ table[component="notification/table"] a[data-type]:focus {
.page-link {
background: rgba(255, 255, 255, 0.018);
border-color: rgba(194, 163, 90, 0.1);
border-color: rgba(var(--wg-gold-rgb), 0.1);
color: var(--wg-text-soft);
}
.page-link:hover,
.page-link:focus,
.active > .page-link {
background: rgba(194, 163, 90, 0.12);
border-color: rgba(194, 163, 90, 0.25);
background: rgba(var(--wg-gold-rgb), 0.12);
border-color: rgba(var(--wg-gold-rgb), 0.25);
color: var(--wg-text);
}
.tooltip-inner {
background: #221c24 !important;
border: 1px solid rgba(194, 163, 90, 0.65) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.65) !important;
border-radius: 6px !important;
color: var(--wg-text) !important;
box-shadow:
@@ -576,7 +576,7 @@ table[component="notification/table"] a[data-type]:focus {
rgba(20, 18, 25, 0.96),
rgba(13, 12, 17, 0.98)
) !important;
border-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
color: var(--wg-text-soft) !important;
}
@@ -593,10 +593,10 @@ table[component="notification/table"] a[data-type]:focus {
[component="sidebar/right"] .nav-link[aria-current="page"],
.bottombar-nav .nav-link.active,
.bottombar-nav .nav-link[aria-current="page"] {
background: rgba(194, 163, 90, 0.1) !important;
background: rgba(var(--wg-gold-rgb), 0.1) !important;
color: var(--wg-text) !important;
box-shadow:
inset 0 0 0 1px rgba(194, 163, 90, 0.12),
inset 0 0 0 1px rgba(var(--wg-gold-rgb), 0.12),
inset 0 1px 0 rgba(255, 244, 221, 0.035);
}
@@ -629,14 +629,14 @@ table[component="notification/table"] a[data-type]:focus {
.page-flags [component="flags/filters"] .btn-warning {
--bs-btn-color: var(--wg-text-soft);
--bs-btn-bg: rgba(8, 7, 10, 0.12);
--bs-btn-border-color: rgba(216, 194, 138, 0.28);
--bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
--bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
--bs-btn-hover-color: var(--wg-text);
--bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
--bs-btn-hover-border-color: rgba(216, 194, 138, 0.46);
--bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
--bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.46);
--bs-btn-active-color: var(--wg-text);
--bs-btn-active-bg: rgba(194, 163, 90, 0.12);
--bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
--bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
--bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
background-image: linear-gradient(
to bottom,
rgba(255, 244, 221, 0.018),
scss/westgate/_footer.scss
+4 -4
View File
@@ -1,6 +1,6 @@
.wg-footer {
margin-top: 1.25rem;
border-top: 1px solid rgba(194, 163, 90, 0.16);
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.16);
color: var(--wg-text-muted);
background:
linear-gradient(180deg, rgba(13, 9, 18, 0), rgba(8, 5, 12, 0.76)),
@@ -123,7 +123,7 @@
width: min(100%, var(--wg-page-width));
margin: 0 auto;
padding: 1.375rem clamp(1rem, 4vw, 2rem);
border-top: 1px solid rgba(194, 163, 90, 0.1);
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.1);
p {
margin: 0;
@@ -164,9 +164,9 @@
&:hover,
&:focus {
border-color: rgba(194, 163, 90, 0.22);
border-color: rgba(var(--wg-gold-rgb), 0.22);
color: var(--wg-text-soft);
background: rgba(194, 163, 90, 0.06);
background: rgba(var(--wg-gold-rgb), 0.06);
}
&:focus-visible {
scss/westgate/_pages.scss
+13 -13
View File
@@ -192,33 +192,33 @@ a.sow-card:hover {
text-transform: uppercase;
font-weight: 600;
color: #d8cec0;
background: rgba(194, 163, 90, 0.06);
background: rgba(var(--wg-gold-rgb), 0.06);
padding: 12px 24px;
border-radius: 6px;
border: 1px solid rgba(216, 194, 138, 0.28);
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.28);
transition: background 0.2s, border-color 0.2s;
&:hover,
&:focus {
color: var(--wg-text);
background: rgba(194, 163, 90, 0.075);
border-color: rgba(216, 194, 138, 0.44);
background: rgba(var(--wg-gold-rgb), 0.075);
border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
}
// Matches the theme's .btn-primary dark gold plate (see _controls.scss).
&.primary {
color: #f0e6d8;
background: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
border-color: #a8893f;
background: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
border-color: var(--wg-gold-soft);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 8px rgba(0, 0, 0, 0.24);
&:hover,
&:focus {
color: #fff4dd;
background: linear-gradient(to bottom, #6a5720 0%, #53431a 100%);
border-color: #c2a35a;
color: var(--wg-gold-hi);
background: linear-gradient(to bottom, var(--wg-gold-plate-hover) 0%, var(--wg-gold-plate-mid) 100%);
border-color: var(--wg-gold);
}
}
}
@@ -434,7 +434,7 @@ a.sow-card:hover {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(9, 8, 11, 0.55) 0%, rgba(9, 8, 11, 0.25) 38%, rgba(9, 8, 11, 0.82) 86%, var(--wg-bg) 100%);
background: linear-gradient(180deg, rgba(var(--wg-bg-deep-rgb), 0.55) 0%, rgba(var(--wg-bg-deep-rgb), 0.25) 38%, rgba(var(--wg-bg-deep-rgb), 0.82) 86%, var(--wg-bg) 100%);
}
.sow-home-hero-inner {
@@ -672,7 +672,7 @@ a.sow-card:hover {
line-height: 1.7;
background: var(--wg-ledger-panel);
border: 1px solid var(--wg-ledger-border);
border-left-color: rgba(194, 163, 90, 0.32);
border-left-color: rgba(var(--wg-gold-rgb), 0.32);
border-radius: 6px;
box-shadow: var(--wg-ledger-shadow);
@@ -1000,9 +1000,9 @@ a.sow-card:hover {
text-transform: uppercase;
font-weight: 600;
color: #d8cec0;
background: rgba(194, 163, 90, 0.06);
background: rgba(var(--wg-gold-rgb), 0.06);
padding: 12px 24px;
border: 1px solid rgba(216, 194, 138, 0.28);
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.28);
border-radius: 6px;
}
scss/westgate/_posts.scss
+26 -26
View File
@@ -10,8 +10,8 @@ body.template-topic [component="topic/stats"] {
body.template-topic .topic-info .badge,
body.template-topic [component="topic/stats"] .badge {
background: rgba(8, 7, 10, 0.22) !important;
border-color: rgba(194, 163, 90, 0.16) !important;
background: rgba(var(--wg-bg-deepest-rgb), 0.22) !important;
border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
color: var(--wg-ledger-ink-muted) !important;
font-family: var(--wg-font-ui);
}
@@ -27,7 +27,7 @@ ul[component="topic"].posts::before {
bottom: 1.5rem;
left: 1.55rem;
width: 1px;
background: linear-gradient(to bottom, rgba(194, 163, 90, 0.18), rgba(194, 163, 90, 0.07));
background: linear-gradient(to bottom, rgba(var(--wg-gold-rgb), 0.18), rgba(var(--wg-gold-rgb), 0.07));
pointer-events: none;
}
@@ -37,7 +37,7 @@ li[component="post"] {
li[component="post"] .post-container-parent > .bg-body {
background: var(--wg-bg) !important;
box-shadow: 0 0 0 5px var(--wg-bg), 0 0 0 6px rgba(194, 163, 90, 0.18) !important;
box-shadow: 0 0 0 5px var(--wg-bg), 0 0 0 6px rgba(var(--wg-gold-rgb), 0.18) !important;
}
li[component="post"] .post-container {
@@ -48,7 +48,7 @@ li[component="post"] .post-container {
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto;
border: 1px solid var(--wg-ledger-border) !important;
border-left: 1px solid rgba(194, 163, 90, 0.32) !important;
border-left: 1px solid rgba(var(--wg-gold-rgb), 0.32) !important;
border-radius: 6px !important;
box-shadow: var(--wg-ledger-shadow) !important;
}
@@ -60,13 +60,13 @@ li[component="post"] .post-container::before {
right: 1rem;
left: 1rem;
height: 1px;
background: linear-gradient(to right, rgba(194, 163, 90, 0.16), rgba(194, 163, 90, 0.05), transparent);
background: linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.16), rgba(var(--wg-gold-rgb), 0.05), transparent);
pointer-events: none;
}
li[component="post"].topic-owner-post .post-container,
li[component="post"].self-post .post-container {
border-left-color: rgba(194, 163, 90, 0.46) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.46) !important;
}
li[component="post"] .post-header {
@@ -111,7 +111,7 @@ li[component="post"] .content .wg-mobile-table-scroll {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
scrollbar-width: thin;
}
@@ -134,8 +134,8 @@ li[component="post"] .content h4 {
// re-inked for the dark ledger.
li[component="post"] .content code,
.composer .preview code {
background: rgba(8, 7, 10, 0.45);
border: 1px solid rgba(194, 163, 90, 0.12);
background: rgba(var(--wg-bg-deepest-rgb), 0.45);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
border-radius: 4px;
padding: 0.1em 0.35em;
color: var(--wg-text);
@@ -145,12 +145,12 @@ li[component="post"] .content code,
li[component="post"] .content pre,
.composer .preview pre {
background: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(8, 7, 10, 0.82)) !important;
border: 1px solid rgba(194, 163, 90, 0.22) !important;
background: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(var(--wg-bg-deepest-rgb), 0.82)) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
border-radius: 6px;
padding: 0.85rem 1rem;
color: var(--wg-text-soft) !important;
scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
scrollbar-width: thin;
}
@@ -178,7 +178,7 @@ li[component="post"] .content pre code.hljs,
.hljs-selector-tag,
.hljs-literal,
.hljs-tag {
color: #e0c878;
color: var(--wg-gold-lit);
}
.hljs-string,
@@ -225,29 +225,29 @@ li[component="post"] .content pre code.hljs,
}
li[component="post"] .content blockquote {
background: rgba(42, 18, 34, 0.4);
border: 1px solid rgba(194, 163, 90, 0.14);
background: rgba(var(--wg-plum-rgb), 0.4);
border: 1px solid rgba(var(--wg-gold-rgb), 0.14);
border-radius: 6px;
padding: 0.75rem 1rem;
}
li[component="post"] .post-footer {
border-bottom: 0 !important;
border-top: 1px solid rgba(194, 163, 90, 0.095);
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.095);
padding-top: 0.55rem;
}
li[component="post"] [component="post/actions"] .btn,
li[component="post"] [component="post/reply-count"] {
color: var(--wg-text-muted) !important;
border-color: rgba(194, 163, 90, 0.1) !important;
border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
}
li[component="post"] [component="post/actions"] .btn:hover,
li[component="post"] [component="post/reply-count"]:hover {
color: var(--wg-text) !important;
background: var(--wg-border-soft) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
}
@media (min-width: 992px) {
@@ -293,7 +293,7 @@ li[component="post"] [component="post/downvote"] {
// Font Awesome 7: fa-heart-crack (fa-heart-broken alias)
--fa: "\f7a9";
font-size: 0.95rem;
color: rgba(194, 163, 90, 0.82);
color: rgba(var(--wg-gold-rgb), 0.82);
}
&.downvoted {
@@ -319,7 +319,7 @@ li[component="post"] [component="post/downvote"] {
.topic-sidebar-tools .btn:not(.btn-primary),
[component="topic/navigator"] {
background: rgba(255, 255, 255, 0.018) !important;
border-color: rgba(194, 163, 90, 0.1) !important;
border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
color: var(--wg-text-soft) !important;
}
@@ -363,7 +363,7 @@ li[component="post"] [component="post/downvote"] {
}
body.template-topic .sticky-top hr {
border-color: rgba(194, 163, 90, 0.12);
border-color: rgba(var(--wg-gold-rgb), 0.12);
}
textarea[component="topic/quickreply/text"],
@@ -381,7 +381,7 @@ textarea[component="topic/quickreply/text"],
textarea[component="topic/quickreply/text"]:focus,
.quick-reply textarea:focus {
border-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
box-shadow: none !important;
}
@@ -395,7 +395,7 @@ textarea[component="topic/quickreply/text"]:focus,
.quick-reply .card-body,
[component="topic/quickreply/container"] .card-body {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.05) calc(100% - 1px)),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.05) calc(100% - 1px)),
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto;
border-color: var(--wg-ledger-border) !important;
@@ -405,8 +405,8 @@ textarea[component="topic/quickreply/text"]:focus,
.quick-reply .card-header,
[component="topic/quickreply/container"] .card-header {
background: rgba(8, 7, 10, 0.22) !important;
border-color: rgba(194, 163, 90, 0.12) !important;
background: rgba(var(--wg-bg-deepest-rgb), 0.22) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
color: var(--wg-ledger-ink-muted) !important;
font-family: var(--wg-font-ui);
}
scss/westgate/_search.scss
+1 -1
View File
@@ -7,7 +7,7 @@
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wg-gold);
background: rgba(194, 163, 90, 0.1);
background: rgba(var(--wg-gold-rgb), 0.1);
border: 1px solid var(--wg-ledger-border);
vertical-align: middle;
}
scss/westgate/_surfaces.scss
+16 -16
View File
@@ -7,7 +7,7 @@ body {
body {
--bs-link-color: var(--wg-gold);
--bs-link-color-rgb: 194, 163, 90;
--bs-link-hover-color: #e0c878;
--bs-link-hover-color: var(--wg-gold-lit);
--bs-link-hover-color-rgb: 224, 200, 120;
font-family: var(--wg-font-text);
-webkit-font-smoothing: antialiased;
@@ -34,7 +34,7 @@ a {
&:hover,
&:focus {
color: #e0c878;
color: var(--wg-gold-lit);
}
}
@@ -73,7 +73,7 @@ li[component="categories/category"]:hover,
li[component="category/topic"]:hover,
li[component="post"] .post-container:hover {
background: var(--wg-velvet-panel-hover) !important;
border-color: rgba(194, 163, 90, 0.22) !important;
border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
inset 0 0 38px rgba(120, 36, 84, 0.14),
@@ -142,13 +142,13 @@ samp,
.alert {
background: var(--wg-border-soft);
border-color: rgba(194, 163, 90, 0.18);
border-color: rgba(var(--wg-gold-rgb), 0.18);
color: var(--wg-text-soft);
}
.alert-danger {
background: rgba(142, 52, 56, 0.16);
border-color: rgba(142, 52, 56, 0.32);
background: rgba(var(--wg-red-rgb), 0.16);
border-color: rgba(var(--wg-red-rgb), 0.32);
color: #d8b1b1;
}
@@ -157,7 +157,7 @@ samp,
.user-icon,
.avatar-tooltip .avatar,
.avatar-tooltip img {
border: 1px solid rgba(216, 194, 138, 0.32);
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.32);
box-shadow:
inset 0 1px 0 rgba(255, 242, 204, 0.2),
inset 0 0 0 1px rgba(18, 15, 22, 0.58),
@@ -196,7 +196,7 @@ li[component="category/topic"] .user-icon {
.status {
box-shadow:
0 0 0 2px var(--wg-status-ring),
0 0 0 3px rgba(216, 194, 138, 0.14),
0 0 0 3px rgba(var(--wg-ledger-ink-rgb), 0.14),
0 0 12px rgba(0, 0, 0, 0.34);
&.online {
@@ -255,7 +255,7 @@ li[component="category/topic"] .user-icon {
@mixin wg-velvet-cover {
background-image:
radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%),
linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important;
linear-gradient(100deg, var(--wg-plum), var(--wg-panel-2) 55%, var(--wg-bg-deep)) !important;
}
// replace core's grey-triangle default cover with the velvet material
@@ -288,7 +288,7 @@ li[component="category/topic"] .user-icon {
linear-gradient(
to bottom,
rgba(255, 241, 196, 0.018),
rgba(8, 7, 10, 0.08)
rgba(var(--wg-bg-deepest-rgb), 0.08)
),
var(--wg-velvet-panel) !important;
border: 1px solid var(--wg-border) !important;
@@ -318,7 +318,7 @@ li[component="category/topic"] .user-icon {
.notifications-list .mark-read,
.chats-dropdown .mark-read,
.chats-list .mark-read {
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
border-radius: 6px !important;
background: linear-gradient(
to bottom,
@@ -341,7 +341,7 @@ li[component="category/topic"] .user-icon {
.chats-dropdown .chat-room-btn,
.chats-list .chat-room-btn,
[component="chat/public/room"] {
border: 1px solid rgba(194, 163, 90, 0.12) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.12) !important;
border-radius: 8px !important;
background: transparent !important;
box-shadow: none !important;
@@ -353,7 +353,7 @@ li[component="category/topic"] .user-icon {
[component="chat/public/room"]:focus,
[component="chat/public/room"].unread {
background: var(--wg-border-soft) !important;
border-color: rgba(194, 163, 90, 0.24) !important;
border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
color: var(--wg-text) !important;
}
@@ -384,7 +384,7 @@ li[component="category/topic"] .user-icon {
.chats-list .badge.bg-light {
background: linear-gradient(
to bottom,
rgba(216, 194, 138, 0.13),
rgba(var(--wg-ledger-ink-rgb), 0.13),
rgba(70, 45, 52, 0.28)
) !important;
border: 1px solid var(--wg-focus) !important;
@@ -403,13 +403,13 @@ li[component="category/topic"] .user-icon {
}
.page-flags [component="flags/filters"] {
border-bottom-color: rgba(194, 163, 90, 0.12) !important;
border-bottom-color: rgba(var(--wg-gold-rgb), 0.12) !important;
}
// table variables shared with notification/post tables live in _controls.scss
.page-flags [component="flags/list"] :where(th, td) {
color: var(--wg-text-soft) !important;
border-color: rgba(194, 163, 90, 0.1) !important;
border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
}
.page-flags [component="flags/list"] thead :where(th, td) {
scss/westgate/_tokens.scss
+23 -9
View File
@@ -92,23 +92,37 @@
--wg-plum-soft: #3a1830;
--wg-gold: #c2a35a;
--wg-gold-soft: #a8893f;
--wg-gold-lit: #e0c878;
--wg-gold-hi: #fff4dd;
--wg-gold-plate: #5a4a1a;
--wg-gold-plate-hover: #6a5720;
--wg-gold-plate-mid: #53431a;
--wg-gold-plate-deep: #473914;
--wg-red: #8e3438;
/* prototype (#53): rgb triples so alpha uses swap with the palette candidate */
--wg-gold-rgb: 194, 163, 90;
--wg-ledger-ink-rgb: 216, 194, 138;
--wg-bg-deep-rgb: 9, 8, 11;
--wg-bg-deepest-rgb: 8, 7, 10;
--wg-plum-rgb: 42, 18, 34;
--wg-red-rgb: 142, 52, 56;
--wg-stamp-rgb: 168, 74, 78;
--wg-status-online: #7fb86a;
--wg-status-away: #d9b44a;
--wg-status-dnd: #c55a5f;
--wg-status-offline: #b7b0a6;
--wg-status-ring: rgba(9, 8, 11, 0.9);
--wg-status-ring: rgba(var(--wg-bg-deep-rgb), 0.9);
--wg-text: #e6e0d6;
--wg-text-soft: #b9b2a6;
--wg-text-muted: #9a9086;
--wg-border: rgba(194, 163, 90, 0.14);
--wg-border-soft: rgba(194, 163, 90, 0.08);
--wg-focus: rgba(194, 163, 90, 0.28);
--wg-border: rgba(var(--wg-gold-rgb), 0.14);
--wg-border-soft: rgba(var(--wg-gold-rgb), 0.08);
--wg-focus: rgba(var(--wg-gold-rgb), 0.28);
--wg-focus-ring: #c2a35a;
--wg-ledger-panel: rgba(21, 17, 26, 0.97);
--wg-ledger-ruling: rgba(194, 163, 90, 0.055);
--wg-ledger-rule-strong: rgba(194, 163, 90, 0.16);
--wg-ledger-border: rgba(194, 163, 90, 0.18);
--wg-ledger-ruling: rgba(var(--wg-gold-rgb), 0.055);
--wg-ledger-rule-strong: rgba(var(--wg-gold-rgb), 0.16);
--wg-ledger-border: rgba(var(--wg-gold-rgb), 0.18);
--wg-ledger-ink: #d8c28a;
--wg-ledger-ink-muted: #a99d8f;
--wg-ledger-stamp: #a84a4e;
@@ -118,11 +132,11 @@
--wg-velvet-panel: rgba(24, 20, 29, 0.97);
--wg-velvet-panel-hover: rgba(31, 26, 38, 0.98);
--wg-velvet-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), inset 0 0 34px rgba(96, 32, 68, 0.11), 0 10px 26px rgba(0, 0, 0, 0.24);
--wg-control-bg: linear-gradient(to bottom, rgba(194, 163, 90, 0.15), rgba(194, 163, 90, 0.05));
--wg-control-bg: linear-gradient(to bottom, rgba(var(--wg-gold-rgb), 0.15), rgba(var(--wg-gold-rgb), 0.05));
}
::selection {
background: rgba(194, 163, 90, 0.32);
background: rgba(var(--wg-gold-rgb), 0.32);
color: #fff4dd;
}
scss/westgate/_topbar.scss
+24 -24
View File
@@ -9,7 +9,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
z-index: 1020;
color: var(--wg-text-soft);
background: rgb(24, 20, 29);
border-bottom: 1px solid rgba(194, 163, 90, 0.2);
border-bottom: 1px solid rgba(var(--wg-gold-rgb), 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.04),
0 12px 32px rgba(0, 0, 0, 0.34);
@@ -47,14 +47,14 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
justify-content: center;
width: 2.3rem;
height: 2.3rem;
border: 1px solid rgba(194, 163, 90, 0.36);
border: 1px solid rgba(var(--wg-gold-rgb), 0.36);
border-radius: 50%;
color: var(--wg-gold);
background:
radial-gradient(circle at 38% 24%, rgba(255, 238, 190, 0.2), transparent 30%),
linear-gradient(145deg, rgba(58, 24, 48, 0.7), rgba(10, 9, 13, 0.98));
box-shadow:
inset 0 0 0 1px rgba(9, 8, 11, 0.66),
inset 0 0 0 1px rgba(var(--wg-bg-deep-rgb), 0.66),
0 8px 18px rgba(0, 0, 0, 0.35);
font-family: var(--wg-font-display);
font-weight: 700;
@@ -105,8 +105,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar .nav-item.active > .nav-link,
.wg-topbar .nav-item.active > .navigation-link {
color: #f3ede4;
border-color: rgba(194, 163, 90, 0.2);
background: rgba(194, 163, 90, 0.075);
border-color: rgba(var(--wg-gold-rgb), 0.2);
background: rgba(var(--wg-gold-rgb), 0.075);
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
}
@@ -137,8 +137,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__utility-list [component$="/count"],
.wg-topbar__drawer-actions [component$="/count"],
.wg-topbar [component="navigation/count"] {
background: linear-gradient(to bottom, rgba(142, 52, 56, 0.92), rgba(84, 28, 39, 0.96)) !important;
border: 1px solid rgba(216, 194, 138, 0.26);
background: linear-gradient(to bottom, rgba(var(--wg-red-rgb), 0.92), rgba(84, 28, 39, 0.96)) !important;
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.26);
color: #fff0dc;
}
@@ -159,7 +159,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar .user-dropdown {
min-width: min(22rem, calc(100vw - 1.5rem));
max-width: calc(100vw - 1.5rem);
border: 1px solid rgba(194, 163, 90, 0.22) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
border-radius: 8px !important;
color: var(--wg-text-soft) !important;
background:
@@ -210,7 +210,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__register {
border: 1px solid var(--wg-gold-soft) !important;
color: #f0e6d8 !important;
background: linear-gradient(to bottom, #5a4a1a, #473914) !important;
background: linear-gradient(to bottom, var(--wg-gold-plate), var(--wg-gold-plate-deep)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 8px rgba(0, 0, 0, 0.24);
@@ -221,8 +221,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__register:hover,
.wg-topbar__register:focus {
border-color: var(--wg-gold) !important;
color: #fff4dd !important;
background: linear-gradient(to bottom, #6a5720, #53431a) !important;
color: var(--wg-gold-hi) !important;
background: linear-gradient(to bottom, var(--wg-gold-plate-hover), var(--wg-gold-plate-mid)) !important;
}
.wg-topbar__login,
@@ -241,15 +241,15 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__login {
color: var(--wg-text-soft);
border: 1px solid rgba(194, 163, 90, 0.2);
background: rgba(194, 163, 90, 0.055);
border: 1px solid rgba(var(--wg-gold-rgb), 0.2);
background: rgba(var(--wg-gold-rgb), 0.055);
}
.wg-topbar__login:hover,
.wg-topbar__login:focus {
color: var(--wg-text);
border-color: rgba(194, 163, 90, 0.3);
background: rgba(194, 163, 90, 0.1);
border-color: rgba(var(--wg-gold-rgb), 0.3);
background: rgba(var(--wg-gold-rgb), 0.1);
}
.wg-topbar__burger {
@@ -258,21 +258,21 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border: 1px solid rgba(194, 163, 90, 0.22);
border: 1px solid rgba(var(--wg-gold-rgb), 0.22);
border-radius: 6px;
color: var(--wg-text-soft);
background: rgba(194, 163, 90, 0.055);
background: rgba(var(--wg-gold-rgb), 0.055);
}
.wg-topbar__burger:hover,
.wg-topbar__burger:focus {
color: var(--wg-text);
background: rgba(194, 163, 90, 0.1);
background: rgba(var(--wg-gold-rgb), 0.1);
}
.wg-topbar__drawer {
display: none;
border-top: 1px solid rgba(194, 163, 90, 0.12);
border-top: 1px solid rgba(var(--wg-gold-rgb), 0.12);
background:
linear-gradient(180deg, rgba(255, 244, 221, 0.025), transparent 38%),
$wg-topbar-panel-bg;
@@ -294,10 +294,10 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
display: flex;
align-items: center;
gap: 0.55rem;
border: 1px solid rgba(194, 163, 90, 0.18);
border: 1px solid rgba(var(--wg-gold-rgb), 0.18);
border-radius: 8px;
padding: 0.5rem 0.65rem;
background: rgba(9, 8, 11, 0.45);
background: rgba(var(--wg-bg-deep-rgb), 0.45);
}
.wg-topbar__drawer-search input {
@@ -311,7 +311,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
// The input's own outline is off; put the visible focus ring on its wrapper.
.wg-topbar__drawer-search:focus-within {
border-color: rgba(194, 163, 90, 0.5);
border-color: rgba(var(--wg-gold-rgb), 0.5);
box-shadow: 0 0 0 1px var(--wg-focus);
}
@@ -328,7 +328,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
align-items: center;
justify-content: space-between;
gap: 0.55rem;
border: 1px solid rgba(194, 163, 90, 0.12);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
border-radius: 7px;
padding: 0.62rem 0.7rem;
color: var(--wg-text-soft);
@@ -341,7 +341,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
.wg-topbar__drawer-actions a:hover,
.wg-topbar__drawer-actions a:focus {
color: var(--wg-text);
border-color: rgba(194, 163, 90, 0.22);
border-color: rgba(var(--wg-gold-rgb), 0.22);
background: var(--wg-border-soft);
}
scss/westgate/_topics.scss
+48 -48
View File
@@ -35,8 +35,8 @@ body.template-category .category-header .description {
.topic-list-header .btn:hover,
.topic-list-header .btn:focus {
background: rgba(194, 163, 90, 0.075) !important;
border-color: rgba(194, 163, 90, 0.26) !important;
background: rgba(var(--wg-gold-rgb), 0.075) !important;
border-color: rgba(var(--wg-gold-rgb), 0.26) !important;
color: var(--wg-text) !important;
}
@@ -61,7 +61,7 @@ li[component="category/topic"] {
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto, auto;
border: 1px solid var(--wg-ledger-border) !important;
border-left: 1px solid rgba(194, 163, 90, 0.34) !important;
border-left: 1px solid rgba(var(--wg-gold-rgb), 0.34) !important;
border-radius: 6px !important;
box-shadow: var(--wg-ledger-shadow) !important;
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
@@ -69,11 +69,11 @@ li[component="category/topic"] {
li[component="category/topic"]:not(.unread) {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.026) calc(100% - 1px)),
linear-gradient(to right, rgba(194, 163, 90, 0.024), transparent 5.25rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.026) calc(100% - 1px)),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.024), transparent 5.25rem),
linear-gradient(100deg, rgba(24, 17, 25, 0.28) 0%, rgba(14, 13, 18, 0.91) 42%, rgba(9, 8, 12, 0.95) 100%) !important;
border-color: rgba(194, 163, 90, 0.085) !important;
border-left-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.085) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.12) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014), inset 0 -1px 0 rgba(0, 0, 0, 0.36) !important;
}
@@ -89,50 +89,50 @@ li[component="category/topic"]::after {
right: 0;
left: 0;
height: 1px;
background: linear-gradient(to right, var(--wg-focus), rgba(194, 163, 90, 0.05), transparent);
background: linear-gradient(to right, var(--wg-focus), rgba(var(--wg-gold-rgb), 0.05), transparent);
pointer-events: none;
}
li[component="category/topic"].unread:nth-child(even) {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.055) calc(100% - 1px)),
linear-gradient(to right, rgba(216, 194, 138, 0.09), transparent 5.25rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.055) calc(100% - 1px)),
linear-gradient(to right, rgba(var(--wg-ledger-ink-rgb), 0.09), transparent 5.25rem),
var(--wg-ledger-panel) !important;
background-size: 100% var(--wg-ledger-line), auto, auto;
}
li[component="category/topic"]:hover {
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), inset 0 0 16px rgba(120, 36, 84, 0.07), 0 8px 18px rgba(0, 0, 0, 0.2) !important;
}
li[component="category/topic"].unread {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.052) calc(100% - 1px)),
linear-gradient(to right, rgba(216, 194, 138, 0.085), transparent 5.65rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.052) calc(100% - 1px)),
linear-gradient(to right, rgba(var(--wg-ledger-ink-rgb), 0.085), transparent 5.65rem),
var(--wg-ledger-panel) !important;
border-color: rgba(216, 194, 138, 0.17) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.17) !important;
border-left-color: var(--wg-ledger-ink) !important;
box-shadow: var(--wg-ledger-shadow) !important;
}
li[component="category/topic"].pinned {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(194, 163, 90, 0.075), transparent 5.75rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(var(--wg-gold-rgb), 0.075), transparent 5.75rem),
var(--wg-ledger-panel) !important;
border-left-color: rgba(216, 194, 138, 0.44) !important;
border-left-color: rgba(var(--wg-ledger-ink-rgb), 0.44) !important;
box-shadow:
var(--wg-ledger-shadow),
inset 0 -1px 0 rgba(216, 194, 138, 0.055) !important;
inset 0 -1px 0 rgba(var(--wg-ledger-ink-rgb), 0.055) !important;
}
li[component="category/topic"].pinned:not(.unread) {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.036) calc(100% - 1px)),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.036) calc(100% - 1px)),
linear-gradient(90deg, rgba(122, 101, 45, 0.09), transparent 5.75rem),
linear-gradient(100deg, rgba(28, 22, 26, 0.36), rgba(13, 12, 17, 0.94)) !important;
border-color: rgba(194, 163, 90, 0.12) !important;
border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
border-left-color: var(--wg-focus) !important;
}
@@ -147,7 +147,7 @@ li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.
right: 0.25rem;
height: 1px;
background:
linear-gradient(to right, transparent, rgba(216, 194, 138, 0.22), rgba(142, 52, 56, 0.1), transparent);
linear-gradient(to right, transparent, rgba(var(--wg-ledger-ink-rgb), 0.22), rgba(var(--wg-red-rgb), 0.1), transparent);
}
li[component="category/topic"].locked {
@@ -155,11 +155,11 @@ li[component="category/topic"].locked {
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(150, 72, 78, 0.04) calc(100% - 1px)),
linear-gradient(90deg, rgba(93, 47, 54, 0.11), transparent 5.75rem),
var(--wg-ledger-panel) !important;
border-color: rgba(168, 74, 78, 0.18) !important;
border-left-color: rgba(168, 74, 78, 0.42) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.18) !important;
border-left-color: rgba(var(--wg-stamp-rgb), 0.42) !important;
box-shadow:
var(--wg-ledger-shadow),
0 0 12px rgba(142, 52, 56, 0.09) !important;
0 0 12px rgba(var(--wg-red-rgb), 0.09) !important;
}
li[component="category/topic"].locked:not(.unread) {
@@ -167,19 +167,19 @@ li[component="category/topic"].locked:not(.unread) {
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(150, 72, 78, 0.034) calc(100% - 1px)),
linear-gradient(90deg, rgba(82, 39, 46, 0.1), transparent 5.75rem),
linear-gradient(100deg, rgba(24, 16, 21, 0.38), rgba(11, 10, 14, 0.95)) !important;
border-color: rgba(168, 74, 78, 0.14) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.14) !important;
}
li[component="category/topic"].locked.pinned {
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(168, 74, 78, 0.1), rgba(194, 163, 90, 0.065) 4.4rem, transparent 7rem),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.045) calc(100% - 1px)),
linear-gradient(90deg, rgba(var(--wg-stamp-rgb), 0.1), rgba(var(--wg-gold-rgb), 0.065) 4.4rem, transparent 7rem),
var(--wg-ledger-panel) !important;
border-color: rgba(168, 74, 78, 0.2) !important;
border-left-color: rgba(168, 74, 78, 0.58) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.2) !important;
border-left-color: rgba(var(--wg-stamp-rgb), 0.58) !important;
box-shadow:
var(--wg-ledger-shadow),
0 0 14px rgba(142, 52, 56, 0.085) !important;
0 0 14px rgba(var(--wg-red-rgb), 0.085) !important;
}
li[component="category/topic"].pinned::after,
@@ -189,13 +189,13 @@ li[component="category/topic"].locked::after {
li[component="category/topic"].pinned [component="topic/pinned"] {
background: rgba(93, 78, 32, 0.34) !important;
border-color: rgba(216, 194, 138, 0.28) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.28) !important;
color: var(--wg-ledger-ink) !important;
}
li[component="category/topic"].locked [component="topic/locked"] {
background: rgba(72, 31, 38, 0.38) !important;
border-color: rgba(168, 74, 78, 0.32) !important;
border-color: rgba(var(--wg-stamp-rgb), 0.32) !important;
color: #d7aaa5 !important;
}
@@ -215,7 +215,7 @@ li[component="category/topic"] .title {
ul.topics-list li[component="category/topic"].unread .title,
ul[component="category"] li[component="category/topic"].unread .title {
color: #f0e7da !important;
text-shadow: 0 0 7px rgba(216, 194, 138, 0.045);
text-shadow: 0 0 7px rgba(var(--wg-ledger-ink-rgb), 0.045);
}
ul.topics-list li[component="category/topic"]:not(.unread) .title,
@@ -242,8 +242,8 @@ li[component="category/topic"] .badge,
a[component="topic/category"] {
position: relative;
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(8, 7, 10, 0.2)) !important;
border-color: rgba(194, 163, 90, 0.18) !important;
linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
border-radius: 3px !important;
box-shadow:
inset 0 1px 0 rgba(255, 238, 190, 0.055),
@@ -284,20 +284,20 @@ li[component="category/topic"] [component="topic/labels"] .badge i {
}
li[component="category/topic"] [component="topic/watched"] {
background: linear-gradient(to bottom, rgba(59, 72, 50, 0.25), rgba(8, 7, 10, 0.2)) !important;
background: linear-gradient(to bottom, rgba(59, 72, 50, 0.25), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(143, 166, 100, 0.22) !important;
color: #b7c59d !important;
}
li[component="category/topic"] [component="topic/ignored"],
li[component="category/topic"] [component="topic/moved"] {
background: linear-gradient(to bottom, rgba(72, 67, 58, 0.22), rgba(8, 7, 10, 0.18)) !important;
background: linear-gradient(to bottom, rgba(72, 67, 58, 0.22), rgba(var(--wg-bg-deepest-rgb), 0.18)) !important;
border-color: rgba(169, 157, 143, 0.16) !important;
color: #aaa095 !important;
}
li[component="category/topic"] [component="topic/scheduled"] {
background: linear-gradient(to bottom, rgba(70, 56, 90, 0.24), rgba(8, 7, 10, 0.2)) !important;
background: linear-gradient(to bottom, rgba(70, 56, 90, 0.24), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(160, 135, 190, 0.2) !important;
color: #c0aed0 !important;
}
@@ -306,9 +306,9 @@ li[component="category/topic"] .tag,
li[component="category/topic"] .tag-item,
.tag-list .tag {
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.026), rgba(8, 7, 10, 0.2)) !important;
border-color: rgba(194, 163, 90, 0.22) !important;
border-left: 1px solid rgba(216, 194, 138, 0.32) !important;
linear-gradient(to bottom, rgba(255, 241, 196, 0.026), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
border-left: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.32) !important;
color: #cdbb8b !important;
display: inline-flex;
align-items: center;
@@ -326,7 +326,7 @@ li[component="category/topic"] .tag-item,
li[component="category/topic"] .tag i,
li[component="category/topic"] .tag-item i,
.tag-list .tag i {
color: #d8c28a;
color: var(--wg-ledger-ink);
font-size: 0.68rem;
opacity: 0.88;
}
@@ -348,8 +348,8 @@ li[component="category/topic"] [component="topic/select"] {
align-items: center;
justify-content: center;
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.045), rgba(8, 7, 10, 0.28));
border: 1px solid rgba(194, 163, 90, 0.22);
linear-gradient(to bottom, rgba(255, 241, 196, 0.045), rgba(var(--wg-bg-deepest-rgb), 0.28));
border: 1px solid rgba(var(--wg-gold-rgb), 0.22);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255, 238, 190, 0.06),
@@ -360,7 +360,7 @@ li[component="category/topic"] [component="topic/select"] {
li[component="category/topic"] [component="topic/select"]:hover,
li[component="category/topic"] [component="topic/select"]:focus {
border-color: rgba(216, 194, 138, 0.42);
border-color: rgba(var(--wg-ledger-ink-rgb), 0.42);
color: var(--wg-ledger-ink) !important;
}
@@ -368,7 +368,7 @@ li[component="category/topic"] .meta.stats > div {
min-height: 3.25rem;
padding: var(--wg-space-2xs) var(--wg-space-xs);
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.09) !important;
border-radius: 3px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
@@ -394,7 +394,7 @@ li[component="category/topic"] .meta.stats .text-muted {
li[component="category/topic"] [component="topic/teaser"] .lastpost {
background: transparent !important;
border-left-color: rgba(194, 163, 90, 0.42) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.42) !important;
color: var(--wg-ledger-ink-muted);
}
@@ -417,5 +417,5 @@ li[component="category/topic"] [component="topic/teaser"] .timeago {
.topic-thumbs .topic-thumb {
background: rgba(255, 255, 255, 0.025) !important;
border: 1px solid rgba(194, 163, 90, 0.12);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
}
scss/westgate/_widgets.scss
+23 -23
View File
@@ -53,7 +53,7 @@
) {
padding: var(--wg-space-md);
background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.045) calc(100% - 1px)),
var(--wg-velvet-panel) !important;
background-size: 100% var(--wg-ledger-line), auto;
border: 1px solid var(--wg-border);
@@ -71,9 +71,9 @@
[data-widget-area] .westgate-widget-card,
[data-widget-area] .wg-widget-card {
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.024), rgba(8, 7, 10, 0.08)),
linear-gradient(to bottom, rgba(255, 241, 196, 0.024), rgba(var(--wg-bg-deepest-rgb), 0.08)),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.15) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.15) !important;
border-radius: 8px !important;
box-shadow: var(--wg-velvet-shadow) !important;
color: var(--wg-text-soft) !important;
@@ -81,9 +81,9 @@
[data-widget-area] .card-header {
background:
linear-gradient(to right, var(--wg-border-soft), rgba(42, 18, 34, 0.2), transparent),
rgba(8, 7, 10, 0.24) !important;
border-color: rgba(194, 163, 90, 0.13) !important;
linear-gradient(to right, var(--wg-border-soft), rgba(var(--wg-plum-rgb), 0.2), transparent),
rgba(var(--wg-bg-deepest-rgb), 0.24) !important;
border-color: rgba(var(--wg-gold-rgb), 0.13) !important;
color: var(--wg-ledger-ink) !important;
font-family: var(--wg-font-display);
font-weight: 600;
@@ -102,9 +102,9 @@
[data-widget-area] .alert {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.055), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.055), transparent 5rem),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.2) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.2) !important;
border-left-width: 2px !important;
border-radius: 8px;
box-shadow:
@@ -124,28 +124,28 @@
[data-widget-area] .alert-info {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.07), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.07), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
border-left-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.5) !important;
color: var(--wg-text-soft) !important;
}
[data-widget-area] .alert-warning {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.12), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.12), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: var(--wg-focus) !important;
border-left-color: rgba(194, 163, 90, 0.62) !important;
border-left-color: rgba(var(--wg-gold-rgb), 0.62) !important;
color: #e0cea2 !important;
}
[data-widget-area] .alert-danger {
background:
linear-gradient(to right, rgba(142, 52, 56, 0.12), transparent 5rem),
linear-gradient(to right, rgba(var(--wg-red-rgb), 0.12), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: rgba(142, 52, 56, 0.32) !important;
border-left-color: rgba(142, 52, 56, 0.62) !important;
border-color: rgba(var(--wg-red-rgb), 0.32) !important;
border-left-color: rgba(var(--wg-red-rgb), 0.62) !important;
color: #d8b1b1 !important;
}
@@ -171,13 +171,13 @@
[data-widget-area] :where(a:not(.btn):not(.nav-link):not(.dropdown-item)):hover,
[data-widget-area] :where(a:not(.btn):not(.nav-link):not(.dropdown-item)):focus {
color: #e0c878;
color: var(--wg-gold-lit);
text-decoration: underline;
}
[data-widget-area] .list-group {
background: transparent !important;
border: 1px solid rgba(194, 163, 90, 0.12);
border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
border-radius: 8px;
overflow: hidden;
}
@@ -190,8 +190,8 @@
[data-widget-area] .badge {
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(8, 7, 10, 0.2)) !important;
border: 1px solid rgba(194, 163, 90, 0.18) !important;
linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.18) !important;
color: var(--wg-ledger-ink-muted) !important;
font-family: var(--wg-font-ui);
}
@@ -204,7 +204,7 @@
[data-widget-area] :where(.forum-stats, .stats-card) > .d-flex,
[data-widget-area] :where(.stats-card, .stats) :where(.card, .card-header) {
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.09) !important;
border-radius: 3px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
@@ -232,7 +232,7 @@
margin: 0 0 var(--wg-space-sm);
padding: 0.6rem;
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),
linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(var(--wg-bg-deepest-rgb), 0.08)),
var(--wg-velvet-panel) !important;
border: 1px solid var(--wg-border);
border-radius: 8px;
@@ -250,7 +250,7 @@
[data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn:hover,
[data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn:focus {
background: rgba(194, 163, 90, 0.06) !important;
background: rgba(var(--wg-gold-rgb), 0.06) !important;
background-image: none !important;
color: var(--wg-text) !important;
text-decoration: none;
scss/westgate/_wiki-prose.scss
+138 -138
View File
@@ -13,18 +13,18 @@
--wiki-chrome-page-title-font-weight: 500;
--wiki-chrome-muted-color: var(--wg-text-muted);
--wiki-chrome-link-color: var(--wg-gold);
--wiki-chrome-link-hover-color: #e0c878;
--wiki-chrome-link-hover-color: var(--wg-gold-lit);
--wiki-chrome-accent-color: var(--wg-gold-soft);
--wiki-chrome-hero-bg: linear-gradient(
180deg,
rgba(42, 18, 34, 0.55) 0%,
rgba(var(--wg-plum-rgb), 0.55) 0%,
rgba(18, 16, 23, 0.98) 100%
);
--wiki-chrome-warning-border: rgba(194, 163, 90, 0.45);
--wiki-chrome-warning-border: rgba(var(--wg-gold-rgb), 0.45);
/* Backdrop scrims (drawer/dialog overlays): deep charcoal instead of the
plugin's slate-blue defaults, so overlays stay warm against the theme. */
--wiki-scrim: rgba(9, 8, 11, 0.55);
--wiki-scrim-strong: rgba(9, 8, 11, 0.8);
--wiki-scrim: rgba(var(--wg-bg-deep-rgb), 0.55);
--wiki-scrim-strong: rgba(var(--wg-bg-deep-rgb), 0.8);
--wiki-chrome-danger: var(--wg-red);
--wiki-chrome-danger-hover: #c55a5f;
--wiki-redlink-color: #c06a6e;
@@ -49,107 +49,107 @@
--wiki-prose-h4-size: 1.26rem;
--wiki-prose-heading-rule: linear-gradient(
90deg,
rgba(194, 163, 90, 0.42),
rgba(194, 163, 90, 0.1) 54%,
rgba(var(--wg-gold-rgb), 0.42),
rgba(var(--wg-gold-rgb), 0.1) 54%,
transparent
);
--wiki-prose-link-color: var(--wg-gold);
--wiki-prose-link-hover-color: #e0c878;
--wiki-prose-link-hover-color: var(--wg-gold-lit);
--wiki-prose-blockquote-bg: rgba(35, 27, 23, 0.36);
--wiki-prose-blockquote-border: rgba(194, 163, 90, 0.4);
--wiki-prose-blockquote-border: rgba(var(--wg-gold-rgb), 0.4);
--wiki-prose-blockquote-color: var(--wg-text-soft);
--wiki-prose-code-font-family: var(--wg-font-code);
--wiki-prose-code-bg: rgba(8, 7, 10, 0.45);
--wiki-prose-code-border: rgba(194, 163, 90, 0.12);
--wiki-prose-code-bg: rgba(var(--wg-bg-deepest-rgb), 0.45);
--wiki-prose-code-border: rgba(var(--wg-gold-rgb), 0.12);
--wiki-prose-code-color: var(--wg-text);
--wiki-prose-pre-bg: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(8, 7, 10, 0.82));
--wiki-prose-pre-border: rgba(194, 163, 90, 0.22);
--wiki-prose-pre-bg: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(var(--wg-bg-deepest-rgb), 0.82));
--wiki-prose-pre-border: rgba(var(--wg-gold-rgb), 0.22);
--wiki-prose-pre-color: var(--wg-text-soft);
--wiki-prose-hr-color: rgba(194, 163, 90, 0.18);
--wiki-prose-table-border: rgba(194, 163, 90, 0.12);
--wiki-prose-hr-color: rgba(var(--wg-gold-rgb), 0.18);
--wiki-prose-table-border: rgba(var(--wg-gold-rgb), 0.12);
--wiki-prose-table-head-color: var(--wg-ledger-ink-muted);
--wiki-prose-table-hover-bg: rgba(194, 163, 90, 0.04);
--wiki-prose-table-hover-bg: rgba(var(--wg-gold-rgb), 0.04);
--wiki-prose-table-hover-color: var(--wg-text);
--wiki-prose-caption-bg: rgba(8, 7, 10, 0.42);
--wiki-prose-caption-bg: rgba(var(--wg-bg-deepest-rgb), 0.42);
--wiki-prose-caption-color: var(--wg-text-muted);
--wiki-prose-caption-font-family: var(--wg-font-text);
--wiki-prose-footnote-border: rgba(194, 163, 90, 0.2);
--wiki-prose-footnote-border: rgba(var(--wg-gold-rgb), 0.2);
--wiki-prose-footnote-color: var(--wg-text-muted);
--wiki-prose-footnote-marker-color: var(--wg-gold);
--wiki-prose-footnote-popover-bg: linear-gradient(180deg, rgba(28, 20, 33, 0.98), rgba(14, 11, 17, 0.98));
--wiki-prose-footnote-popover-border: rgba(194, 163, 90, 0.26);
--wiki-prose-footnote-popover-border: rgba(var(--wg-gold-rgb), 0.26);
--wiki-prose-footnote-popover-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.035),
0 14px 30px rgba(0, 0, 0, 0.46);
--wiki-prose-footnote-target-bg: var(--wg-border-soft);
--wiki-prose-image-bg: rgba(8, 7, 10, 0.36);
--wiki-prose-image-border: rgba(194, 163, 90, 0.18);
--wiki-prose-image-bg: rgba(var(--wg-bg-deepest-rgb), 0.36);
--wiki-prose-image-border: rgba(var(--wg-gold-rgb), 0.18);
--wiki-prose-image-padding: 0;
--wiki-prose-image-radius: 7px;
--wiki-prose-image-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.025),
0 8px 20px rgba(0, 0, 0, 0.18);
--wiki-prose-media-iframe-border: rgba(194, 163, 90, 0.15);
--wiki-prose-media-iframe-border: rgba(var(--wg-gold-rgb), 0.15);
--wiki-prose-raw-embed-bg: rgba(8, 7, 10, 0.4);
--wiki-prose-raw-embed-border: rgba(194, 163, 90, 0.25);
--wiki-prose-raw-embed-bg: rgba(var(--wg-bg-deepest-rgb), 0.4);
--wiki-prose-raw-embed-border: rgba(var(--wg-gold-rgb), 0.25);
--wiki-prose-raw-embed-color: var(--wg-text-muted);
--wiki-compose-editable-bg: rgba(24, 15, 29, 0.94);
--wiki-compose-editable-border-color: rgba(202, 164, 106, 0.2);
--wiki-compose-editable-focus-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026),
0 0 0 1px rgba(194, 163, 90, 0.3),
0 0 0 1px rgba(var(--wg-gold-rgb), 0.3),
0 0 18px var(--wg-border-soft);
--wiki-ck-base-background: #18141d;
--wiki-ck-base-background: var(--wg-panel);
--wiki-ck-base-foreground: #1e1824;
--wiki-ck-base-border: rgba(194, 163, 90, 0.22);
--wiki-ck-base-border: rgba(var(--wg-gold-rgb), 0.22);
--wiki-ck-base-text: #cfc5b7;
/* CKEditor UI: .ck-reset_all and toolbar SVGs use --ck-color-text / currentColor */
--wiki-ck-ui-text: rgba(244, 236, 220, 0.92);
--wiki-ck-toolbar-icon-color: rgba(244, 236, 220, 0.9);
--wiki-ck-tooltip-background: rgba(10, 8, 14, 0.96);
--wiki-ck-tooltip-text: rgba(244, 236, 220, 0.95);
--wiki-ck-focus-border: rgba(194, 163, 90, 0.45);
--wiki-ck-focus-outer-shadow: rgba(194, 163, 90, 0.12);
--wiki-ck-focus-border: rgba(var(--wg-gold-rgb), 0.45);
--wiki-ck-focus-outer-shadow: rgba(var(--wg-gold-rgb), 0.12);
--wiki-ck-shadow-drop: rgba(0, 0, 0, 0.45);
--wiki-ck-shadow-inner: rgba(0, 0, 0, 0.25);
--wiki-ck-toolbar-background: #16121a;
--wiki-ck-toolbar-border: rgba(194, 163, 90, 0.18);
--wiki-ck-toolbar-border: rgba(var(--wg-gold-rgb), 0.18);
--wiki-ck-button-bg: transparent;
--wiki-ck-button-hover-bg: rgba(194, 163, 90, 0.1);
--wiki-ck-button-hover-bg: rgba(var(--wg-gold-rgb), 0.1);
--wiki-ck-button-active-bg: var(--wg-border);
--wiki-ck-button-on-bg: rgba(194, 163, 90, 0.12);
--wiki-ck-button-on-hover-bg: rgba(194, 163, 90, 0.18);
--wiki-ck-button-on-active-bg: rgba(194, 163, 90, 0.22);
--wiki-ck-button-on-bg: rgba(var(--wg-gold-rgb), 0.12);
--wiki-ck-button-on-hover-bg: rgba(var(--wg-gold-rgb), 0.18);
--wiki-ck-button-on-active-bg: rgba(var(--wg-gold-rgb), 0.22);
--wiki-ck-button-on-color: #e6d9b8;
--wiki-ck-dropdown-background: #1a1520;
--wiki-ck-dropdown-border: rgba(194, 163, 90, 0.2);
--wiki-ck-input-background: rgba(9, 8, 11, 0.55);
--wiki-ck-input-border: rgba(194, 163, 90, 0.22);
--wiki-ck-input-text: #e6e0d6;
--wiki-ck-dropdown-border: rgba(var(--wg-gold-rgb), 0.2);
--wiki-ck-input-background: rgba(var(--wg-bg-deep-rgb), 0.55);
--wiki-ck-input-border: rgba(var(--wg-gold-rgb), 0.22);
--wiki-ck-input-text: var(--wg-text);
--wiki-ck-list-background: #1a1520;
--wiki-ck-list-hover-bg: rgba(194, 163, 90, 0.1);
--wiki-ck-list-on-bg: rgba(194, 163, 90, 0.16);
--wiki-ck-list-hover-bg: rgba(var(--wg-gold-rgb), 0.1);
--wiki-ck-list-on-bg: rgba(var(--wg-gold-rgb), 0.16);
--wiki-ck-list-on-text: #f0e6cc;
--wiki-ck-panel-background: #1a1520;
--wiki-ck-panel-border: rgba(194, 163, 90, 0.2);
--wiki-ck-panel-border: rgba(var(--wg-gold-rgb), 0.2);
--wiki-ck-switch-off-bg: #2a2430;
--wiki-ck-label-bg: #16121a;
--wiki-fab-bg: rgba(18, 15, 22, 0.9);
--wiki-fab-border-color: rgba(194, 163, 90, 0.18);
--wiki-fab-border-color: rgba(var(--wg-gold-rgb), 0.18);
--wiki-fab-shadow: var(--wg-velvet-shadow);
--wiki-fab-btn-bg: rgba(194, 163, 90, 0.075);
--wiki-fab-btn-border: rgba(216, 194, 138, 0.24);
--wiki-fab-danger-bg: rgba(142, 52, 56, 0.16);
--wiki-fab-btn-bg: rgba(var(--wg-gold-rgb), 0.075);
--wiki-fab-btn-border: rgba(var(--wg-ledger-ink-rgb), 0.24);
--wiki-fab-danger-bg: rgba(var(--wg-red-rgb), 0.16);
--wiki-editor-table-handle-layer: 4;
--wiki-infobox-layer: 1;
@@ -279,7 +279,7 @@
.westgate-wiki .card.wiki-card:hover,
.westgate-wiki .card.wiki-topic-card:hover {
background: var(--wg-velvet-panel-hover) !important;
border-color: rgba(194, 163, 90, 0.22) !important;
border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
inset 0 0 38px rgba(120, 36, 84, 0.14),
@@ -412,7 +412,7 @@
90deg,
transparent,
var(--wg-focus) 22%,
rgba(194, 163, 90, 0.82) 50%,
rgba(var(--wg-gold-rgb), 0.82) 50%,
var(--wg-focus) 78%,
transparent
)
@@ -428,8 +428,8 @@
--wiki-prose-heading-rule-right,
linear-gradient(
270deg,
rgba(194, 163, 90, 0.82),
rgba(194, 163, 90, 0.24) 54%,
rgba(var(--wg-gold-rgb), 0.82),
rgba(var(--wg-gold-rgb), 0.24) 54%,
transparent
)
);
@@ -464,7 +464,7 @@
90deg,
transparent,
var(--wg-focus) 22%,
rgba(194, 163, 90, 0.82) 50%,
rgba(var(--wg-gold-rgb), 0.82) 50%,
var(--wg-focus) 78%,
transparent
)
@@ -479,8 +479,8 @@
--wiki-prose-heading-rule-right,
linear-gradient(
270deg,
rgba(194, 163, 90, 0.82),
rgba(194, 163, 90, 0.24) 54%,
rgba(var(--wg-gold-rgb), 0.82),
rgba(var(--wg-gold-rgb), 0.24) 54%,
transparent
)
);
@@ -587,7 +587,7 @@
.westgate-wiki .wiki-breadcrumb-trail__link:hover,
.westgate-wiki .wiki-breadcrumb-trail__link:focus {
color: #e0c878;
color: var(--wg-gold-lit);
text-decoration: underline;
}
@@ -610,18 +610,18 @@
.westgate-wiki :where(.wiki-card-link, .wiki-card h2 a, .wiki-topic-list a, .wiki-index-entry-title, .wiki-index-jump-link, .wiki-page-byline__userlink) {
color: var(--wg-gold) !important;
text-decoration-color: rgba(194, 163, 90, 0.5);
text-decoration-color: rgba(var(--wg-gold-rgb), 0.5);
}
.westgate-wiki :where(.wiki-card-link, .wiki-card h2 a, .wiki-topic-list a, .wiki-index-entry-title, .wiki-index-jump-link, .wiki-page-byline__userlink):hover,
.westgate-wiki :where(.wiki-card-link, .wiki-card h2 a, .wiki-topic-list a, .wiki-index-entry-title, .wiki-index-jump-link, .wiki-page-byline__userlink):focus {
color: #e0c878 !important;
color: var(--wg-gold-lit) !important;
text-decoration-color: currentColor;
}
.westgate-wiki .wiki-sidebar-disclosure__summary {
background: linear-gradient(180deg, rgba(255, 244, 221, 0.025), rgba(0, 0, 0, 0.075)) !important;
border-bottom-color: rgba(194, 163, 90, 0.11) !important;
border-bottom-color: rgba(var(--wg-gold-rgb), 0.11) !important;
color: var(--wg-text);
font-family: var(--wg-font-ui);
font-size: 0.82rem;
@@ -635,13 +635,13 @@
}
.westgate-wiki .wiki-article-toc__ol.wiki-article-toc__ol--nest {
border-inline-start-color: rgba(194, 163, 90, 0.18);
border-inline-start-color: rgba(var(--wg-gold-rgb), 0.18);
}
.westgate-wiki .wiki-article-toc__link,
.westgate-wiki .wiki-sidebar-nav-ns,
.westgate-wiki .wiki-sidebar-root {
color: #d8c28a !important;
color: var(--wg-ledger-ink) !important;
font-family: var(--wg-font-ui);
}
@@ -683,20 +683,20 @@
color: var(--wg-gold);
font-family: var(--wg-font-ui);
font-weight: 700;
text-shadow: 0 0 8px rgba(194, 163, 90, 0.22);
text-shadow: 0 0 8px rgba(var(--wg-gold-rgb), 0.22);
}
.westgate-wiki .wiki-namespace-directory {
--wiki-tree-indent: 1.28rem;
--wiki-tree-line-color: rgba(194, 163, 90, 0.34);
--wiki-tree-line-color: rgba(var(--wg-gold-rgb), 0.34);
margin-block-start: 0.78rem;
}
.westgate-wiki .wiki-directory-filter {
background:
linear-gradient(180deg, rgba(255, 244, 221, 0.028), rgba(0, 0, 0, 0.1)),
rgba(8, 7, 10, 0.4) !important;
border-color: rgba(194, 163, 90, 0.18) !important;
rgba(var(--wg-bg-deepest-rgb), 0.4) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
border-radius: 7px !important;
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
color: var(--wg-text-soft) !important;
@@ -712,16 +712,16 @@
background:
linear-gradient(180deg, rgba(255, 244, 221, 0.04), rgba(0, 0, 0, 0.08)),
rgba(14, 11, 17, 0.76) !important;
border-color: rgba(194, 163, 90, 0.38) !important;
border-color: rgba(var(--wg-gold-rgb), 0.38) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.04),
0 0 0 0.18rem rgba(194, 163, 90, 0.09) !important;
0 0 0 0.18rem rgba(var(--wg-gold-rgb), 0.09) !important;
color: var(--wg-text) !important;
}
.westgate-wiki .wiki-index-jump--dynamic {
background: rgba(8, 7, 10, 0.18);
border-block: 1px solid rgba(194, 163, 90, 0.1);
background: rgba(var(--wg-bg-deepest-rgb), 0.18);
border-block: 1px solid rgba(var(--wg-gold-rgb), 0.1);
gap: 0.36rem;
margin-block: 0.72rem 0.9rem !important;
padding-block: 0.46rem;
@@ -730,8 +730,8 @@
.westgate-wiki .wiki-index-jump-link {
background:
linear-gradient(180deg, rgba(255, 244, 221, 0.035), rgba(0, 0, 0, 0.1)),
rgba(194, 163, 90, 0.045) !important;
border-color: rgba(194, 163, 90, 0.16) !important;
rgba(var(--wg-gold-rgb), 0.045) !important;
border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.03);
transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
@@ -742,8 +742,8 @@
background:
linear-gradient(180deg, var(--wg-border), rgba(81, 25, 61, 0.12)),
var(--wg-border-soft) !important;
border-color: rgba(216, 194, 138, 0.36) !important;
color: #fff4dd !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.36) !important;
color: var(--wg-gold-hi) !important;
transform: translateY(-1px);
}
@@ -772,7 +772,7 @@
}
.westgate-wiki .wiki-namespace-directory .wiki-index-entry:not(.wiki-index-entry--subpage) .wiki-index-entry-main::before {
background: radial-gradient(circle, #e0c878 0 30%, var(--wg-focus) 31% 58%, transparent 59%);
background: radial-gradient(circle, var(--wg-gold-lit) 0 30%, var(--wg-focus) 31% 58%, transparent 59%);
block-size: 0.42rem;
content: "";
inline-size: 0.42rem;
@@ -793,7 +793,7 @@
}
.westgate-wiki .wiki-index-entry--subpage::before {
background: linear-gradient(90deg, var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)), rgba(194, 163, 90, 0.12));
background: linear-gradient(90deg, var(--wiki-tree-line-color, rgba(var(--wg-gold-rgb), 0.34)), rgba(var(--wg-gold-rgb), 0.12));
position: absolute;
block-size: 1px;
content: "";
@@ -803,7 +803,7 @@
}
.westgate-wiki .wiki-index-entry--subpage::after {
background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)));
background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color, rgba(var(--wg-gold-rgb), 0.34)));
block-size: 1.18rem;
content: "";
inline-size: 1px;
@@ -834,8 +834,8 @@
.westgate-wiki .wiki-namespace-directory .wiki-index-entry-main:hover .wiki-index-entry-title,
.westgate-wiki .wiki-namespace-directory .wiki-index-entry-main:focus-within .wiki-index-entry-title {
color: #fff4dd !important;
text-shadow: 0 0 10px rgba(194, 163, 90, 0.16);
color: var(--wg-gold-hi) !important;
text-shadow: 0 0 10px rgba(var(--wg-gold-rgb), 0.16);
}
.westgate-wiki .wiki-index-entry--subpage[style*="--wiki-title-depth: 2"] .wiki-index-entry-title,
@@ -852,7 +852,7 @@
.westgate-wiki .wiki-topic-list__item--subpage {
--wiki-tree-indent: 1rem;
--wiki-tree-line-color: rgba(194, 163, 90, 0.36);
--wiki-tree-line-color: rgba(var(--wg-gold-rgb), 0.36);
list-style: none;
margin-block-start: -0.15rem;
margin-inline-start: calc(var(--wiki-title-depth, 1) * var(--wiki-tree-indent));
@@ -861,7 +861,7 @@
}
.westgate-wiki .wiki-topic-list__item--subpage::before {
background: linear-gradient(90deg, var(--wiki-tree-line-color), rgba(194, 163, 90, 0.12));
background: linear-gradient(90deg, var(--wiki-tree-line-color), rgba(var(--wg-gold-rgb), 0.12));
position: absolute;
block-size: 1px;
content: "";
@@ -917,11 +917,11 @@
.westgate-wiki .wiki-sidebar-directory {
--wiki-sidebar-tree-indent: 1.1rem;
--wiki-sidebar-tree-line-color: rgba(194, 163, 90, 0.26);
--wiki-sidebar-tree-line-color: rgba(var(--wg-gold-rgb), 0.26);
}
.westgate-wiki .wiki-sidebar-directory .wiki-sidebar-nav-rows--child-pages {
border-inline-start-color: rgba(194, 163, 90, 0.16) !important;
border-inline-start-color: rgba(var(--wg-gold-rgb), 0.16) !important;
margin-inline-start: 0.42rem;
padding-inline-start: 0.66rem;
}
@@ -959,7 +959,7 @@
}
.westgate-wiki .wiki-sidebar-directory .wiki-sidebar-nav-row--page:has(.wiki-sidebar-parent-path)::after {
background: linear-gradient(180deg, rgba(194, 163, 90, 0.06), var(--wiki-sidebar-tree-line-color));
background: linear-gradient(180deg, rgba(var(--wg-gold-rgb), 0.06), var(--wiki-sidebar-tree-line-color));
block-size: 0.58em;
content: "";
inline-size: 1px;
@@ -998,7 +998,7 @@
.westgate-wiki .wiki-sidebar-list a:hover,
.westgate-wiki .wiki-sidebar-list a:focus {
text-decoration: underline !important;
text-decoration-color: rgba(194, 163, 90, 0.55);
text-decoration-color: rgba(var(--wg-gold-rgb), 0.55);
text-underline-offset: 0.12em;
}
@@ -1015,11 +1015,11 @@
.westgate-wiki .wiki-sidebar-divider,
.westgate-wiki .wiki-index-section-rule,
.westgate-wiki .wiki-index-letter {
border-color: rgba(194, 163, 90, 0.13) !important;
border-color: rgba(var(--wg-gold-rgb), 0.13) !important;
}
.westgate-wiki .wiki-index-entry-badge {
background: rgba(194, 163, 90, 0.055) !important;
background: rgba(var(--wg-gold-rgb), 0.055) !important;
border-color: var(--wg-border) !important;
}
@@ -1029,14 +1029,14 @@
.westgate-wiki .wiki-fab-dock-inner {
background: rgba(18, 15, 22, 0.9) !important;
border-color: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
border-radius: 8px !important;
box-shadow: var(--wg-velvet-shadow) !important;
}
.westgate-wiki .wiki-fab-btn {
background: rgba(194, 163, 90, 0.075) !important;
border-color: rgba(216, 194, 138, 0.24) !important;
background: rgba(var(--wg-gold-rgb), 0.075) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.24) !important;
border-radius: 6px !important;
color: var(--wg-gold) !important;
text-decoration: none !important;
@@ -1046,15 +1046,15 @@
.westgate-wiki .wiki-fab-btn:hover,
.westgate-wiki .wiki-fab-btn:focus,
.westgate-wiki .wiki-fab-btn:active {
background: rgba(194, 163, 90, 0.13) !important;
border-color: rgba(216, 194, 138, 0.44) !important;
color: #fff4dd !important;
background: rgba(var(--wg-gold-rgb), 0.13) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.44) !important;
color: var(--wg-gold-hi) !important;
text-decoration: none !important;
}
.westgate-wiki .wiki-fab-btn--danger,
.westgate-wiki .wiki-fab-btn.wiki-delete-page {
background: rgba(142, 52, 56, 0.16) !important;
background: rgba(var(--wg-red-rgb), 0.16) !important;
border-color: rgba(197, 90, 95, 0.36) !important;
color: #d98286 !important;
}
@@ -1063,7 +1063,7 @@
.westgate-wiki .wiki-fab-btn--danger:focus,
.westgate-wiki .wiki-fab-btn.wiki-delete-page:hover,
.westgate-wiki .wiki-fab-btn.wiki-delete-page:focus {
background: rgba(142, 52, 56, 0.24) !important;
background: rgba(var(--wg-red-rgb), 0.24) !important;
border-color: rgba(197, 90, 95, 0.54) !important;
color: #f0a2a5 !important;
text-decoration: none !important;
@@ -1144,15 +1144,15 @@
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button.ck-on,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on {
background: var(--wiki-ck-button-hover-bg) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
color: #fff4dd !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
color: var(--wg-gold-hi) !important;
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
}
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button.ck-on,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on {
background: var(--wiki-ck-button-on-bg) !important;
border-color: rgba(194, 163, 90, 0.3) !important;
border-color: rgba(var(--wg-gold-rgb), 0.3) !important;
color: var(--wiki-ck-button-on-color) !important;
}
@@ -1161,7 +1161,7 @@
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on:hover,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on:focus {
background: var(--wiki-ck-button-on-hover-bg) !important;
color: #fff4dd !important;
color: var(--wg-gold-hi) !important;
}
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button:focus-visible,
@@ -1200,8 +1200,8 @@
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-splitbutton:hover > .ck.ck-button,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-splitbutton:hover > .ck.ck-dropdown__button {
background: var(--wiki-ck-button-hover-bg) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
color: #fff4dd !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
color: var(--wg-gold-hi) !important;
}
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-color-selector__remove-color,
@@ -1218,8 +1218,8 @@
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button_with-text:hover,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button_with-text:focus {
background: var(--wiki-ck-button-hover-bg) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
color: #fff4dd !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
color: var(--wg-gold-hi) !important;
}
.westgate-wiki-compose .ck.ck-editor__main > .ck.ck-editor__editable,
@@ -1239,7 +1239,7 @@
border-radius: 7px !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.035),
inset 0 0 0 1px rgba(8, 7, 10, 0.45),
inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.45),
inset 0 -8px 24px rgba(0, 0, 0, 0.22),
0 8px 18px rgba(0, 0, 0, 0.18) !important;
color: var(--wiki-prose-pre-color) !important;
@@ -1281,7 +1281,7 @@
border: 1px solid var(--wg-border);
border-radius: 7px;
box-shadow:
inset -1.25rem 0 1rem -1rem rgba(194, 163, 90, 0.16),
inset -1.25rem 0 1rem -1rem rgba(var(--wg-gold-rgb), 0.16),
0 0.6rem 1.4rem rgba(0, 0, 0, 0.16);
display: block;
inline-size: 100%;
@@ -1289,7 +1289,7 @@
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
scrollbar-width: thin;
}
@@ -1342,7 +1342,7 @@
.westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-content pre[data-language]::after,
.westgate-wiki-compose .ck-code-block-language-label {
background: var(--wg-border) !important;
border: 1px solid rgba(194, 163, 90, 0.22) !important;
border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
border-radius: 0 0 0 5px !important;
color: var(--wg-text-soft) !important;
font-family: var(--wg-font-ui) !important;
@@ -1354,30 +1354,30 @@
.westgate-wiki-compose .ck-source-editing-area textarea,
.westgate-wiki-compose .ck.ck-source-editing-area,
.westgate-wiki-compose textarea.ck-source-editing-area {
background: rgba(9, 8, 11, 0.92) !important;
background: rgba(var(--wg-bg-deep-rgb), 0.92) !important;
color: var(--wg-text-soft) !important;
}
.westgate-wiki-compose .ck-source-editing-area textarea,
.westgate-wiki-compose textarea.ck-source-editing-area {
border-color: rgba(194, 163, 90, 0.24) !important;
border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.025),
inset 0 0 0 1px rgba(8, 7, 10, 0.45) !important;
inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.45) !important;
caret-color: var(--wg-gold);
font-family: var(--wg-font-code) !important;
}
.westgate-wiki-compose .ck-source-editing-area textarea:focus,
.westgate-wiki-compose textarea.ck-source-editing-area:focus {
border-color: rgba(194, 163, 90, 0.45) !important;
border-color: rgba(var(--wg-gold-rgb), 0.45) !important;
box-shadow: var(--wiki-compose-editable-focus-shadow) !important;
outline: none !important;
}
.westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-focused,
.westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-focused {
border-color: rgba(194, 163, 90, 0.45) !important;
border-color: rgba(var(--wg-gold-rgb), 0.45) !important;
box-shadow: var(--wiki-compose-editable-focus-shadow) !important;
}
@@ -1387,17 +1387,17 @@ body:has(#westgate-wiki-compose) .ck.ck-dialog {
--ck-color-button-default-background: var(--wiki-ck-button-bg);
--ck-color-button-default-hover-background: var(--wiki-ck-button-hover-bg);
--ck-color-button-default-active-background: var(--wiki-ck-button-active-bg);
--ck-color-button-action-background: rgba(194, 163, 90, 0.18);
--ck-color-button-action-hover-background: rgba(194, 163, 90, 0.26);
--ck-color-button-action-active-background: rgba(194, 163, 90, 0.32);
--ck-color-button-action-background: rgba(var(--wg-gold-rgb), 0.18);
--ck-color-button-action-hover-background: rgba(var(--wg-gold-rgb), 0.26);
--ck-color-button-action-active-background: rgba(var(--wg-gold-rgb), 0.32);
--ck-color-button-action-disabled-background: transparent;
--ck-color-button-action-text: #fff4dd;
--ck-color-button-action-text: var(--wg-gold-hi);
--ck-color-button-on-background: var(--wiki-ck-button-on-bg);
--ck-color-button-on-hover-background: var(--wiki-ck-button-on-hover-bg);
--ck-color-button-on-active-background: var(--wiki-ck-button-on-active-bg);
--ck-color-button-on-color: var(--wiki-ck-button-on-color);
--ck-color-input-disabled-background: rgba(9, 8, 11, 0.34);
--ck-color-input-disabled-border: rgba(194, 163, 90, 0.12);
--ck-color-input-disabled-background: rgba(var(--wg-bg-deep-rgb), 0.34);
--ck-color-input-disabled-border: rgba(var(--wg-gold-rgb), 0.12);
--ck-color-input-disabled-text: rgba(185, 178, 166, 0.42);
--ck-color-labeled-field-label-background: var(--wiki-ck-panel-background);
background: var(--wiki-ck-panel-background) !important;
@@ -1416,7 +1416,7 @@ body:has(#westgate-wiki-compose) .ck.ck-dialog :where(.ck, .ck-label, .ck-button
body:has(#westgate-wiki-compose) .ck.ck-form__header {
background: linear-gradient(180deg, rgba(255, 244, 221, 0.025), rgba(0, 0, 0, 0.075)) !important;
border-bottom-color: rgba(194, 163, 90, 0.16) !important;
border-bottom-color: rgba(var(--wg-gold-rgb), 0.16) !important;
color: var(--wg-text) !important;
}
@@ -1442,8 +1442,8 @@ body:has(#westgate-wiki-compose) .ck.ck-balloon-panel:not(.ck-powered-by-balloon
body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid__tile):hover,
body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid__tile):focus {
background: var(--wiki-ck-button-hover-bg) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
color: #fff4dd !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
color: var(--wg-gold-hi) !important;
}
body:has(#westgate-wiki-compose) .ck.ck-dropdown__panel .ck.ck-button:not(.ck-color-grid__tile).ck-on,
@@ -1456,9 +1456,9 @@ body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid_
body:has(#westgate-wiki-compose) .ck.ck-balloon-panel:not(.ck-powered-by-balloon) .ck.ck-button-action,
body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button-action {
background: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(194, 163, 90, 0.3) !important;
color: #fff4dd !important;
background: rgba(var(--wg-gold-rgb), 0.18) !important;
border-color: rgba(var(--wg-gold-rgb), 0.3) !important;
color: var(--wg-gold-hi) !important;
font-weight: 700 !important;
}
@@ -1518,8 +1518,8 @@ body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form .ck-label {
body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form .ck.ck-input,
body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form input.ck-input-text {
background: rgba(9, 8, 11, 0.68) !important;
border-color: rgba(194, 163, 90, 0.24) !important;
background: rgba(var(--wg-bg-deep-rgb), 0.68) !important;
border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
color: var(--wg-text) !important;
font-family: var(--wg-font-ui) !important;
}
@@ -1531,7 +1531,7 @@ body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form input.ck-input-tex
}
body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form .ck.ck-button-find {
color: #fff4dd !important;
color: var(--wg-gold-hi) !important;
font-family: var(--wg-font-ui) !important;
font-weight: 700 !important;
}
@@ -1585,13 +1585,13 @@ body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile.ck-color-selector__colo
body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile:hover:not(.ck-disabled),
body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile:focus:not(.ck-disabled) {
box-shadow:
inset 0 0 0 1px rgba(8, 7, 10, 0.76),
0 0 0 2px rgba(216, 194, 138, 0.66) !important;
inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.76),
0 0 0 2px rgba(var(--wg-ledger-ink-rgb), 0.66) !important;
}
body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile.ck-on {
box-shadow:
inset 0 0 0 1px rgba(8, 7, 10, 0.86),
inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.86),
0 0 0 2px rgba(246, 223, 163, 0.82) !important;
}
@@ -1601,21 +1601,21 @@ body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown__grid {
}
body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box {
background: rgba(194, 163, 90, 0.075) !important;
border: 1px solid rgba(216, 194, 138, 0.26) !important;
background: rgba(var(--wg-gold-rgb), 0.075) !important;
border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.26) !important;
border-radius: 4px !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.035),
0 0 0 1px rgba(8, 7, 10, 0.36) !important;
0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.36) !important;
}
body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box:hover,
body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box:focus {
background: rgba(194, 163, 90, 0.18) !important;
border-color: rgba(216, 194, 138, 0.52) !important;
background: rgba(var(--wg-gold-rgb), 0.18) !important;
border-color: rgba(var(--wg-ledger-ink-rgb), 0.52) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.055),
0 0 0 1px rgba(194, 163, 90, 0.24) !important;
0 0 0 1px rgba(var(--wg-gold-rgb), 0.24) !important;
outline: none !important;
}
@@ -1624,7 +1624,7 @@ body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box.ck-on {
border-color: rgba(246, 223, 163, 0.64) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.08),
0 0 0 1px rgba(194, 163, 90, 0.34) !important;
0 0 0 1px rgba(var(--wg-gold-rgb), 0.34) !important;
}
body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown__label {
@@ -1647,17 +1647,17 @@ body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-label, .ck-label
}
body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-input, .ck-input-text, input[type="text"], input[type="search"]) {
background: rgba(9, 8, 11, 0.74) !important;
border-color: rgba(194, 163, 90, 0.26) !important;
background: rgba(var(--wg-bg-deep-rgb), 0.74) !important;
border-color: rgba(var(--wg-gold-rgb), 0.26) !important;
color: var(--wg-text) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.025),
0 0 0 1px rgba(8, 7, 10, 0.42) !important;
0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.42) !important;
caret-color: var(--wg-gold);
}
body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-input, .ck-input-text, input[type="text"], input[type="search"]):focus {
border-color: rgba(194, 163, 90, 0.5) !important;
border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.026),
0 0 0 1px var(--wg-focus) !important;
@@ -1682,7 +1682,7 @@ body:has(#westgate-wiki-compose) .ck.ck-emoji-picker .ck-emoji-categories__item:
body:has(#westgate-wiki-compose) .ck.ck-emoji-picker .ck-emoji-categories__item:focus,
body:has(#westgate-wiki-compose) .ck.ck-emoji-picker .ck-emoji-categories__item.ck-on {
background: var(--wiki-ck-button-hover-bg) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035) !important;
}