Flatten panel gradients to subtle purple, themed 404, gold links
- Replace the velvet/ledger diagonal plum gradients with one flat purple per surface (anchored to the group-card tone rgb(24,20,29)); topbar now uses the same flat tone so it meshes with the panels - Add a Westgate-themed 404 page (Night Masks warning, fa-mask icon), vertically centered in the content area; strings in westgate.json - Set Bootstrap link CSS vars globally so utility-classed links (alert-link, link-*) get the wiki gold like plain anchors Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -397,7 +397,7 @@ table[component="notification/table"] a[data-type]:focus {
|
||||
transparent calc(100% - 1px),
|
||||
rgba(194, 163, 90, 0.055) calc(100% - 1px)
|
||||
),
|
||||
linear-gradient(100deg, rgba(32, 19, 30, 0.98), rgba(13, 12, 17, 0.98)) !important;
|
||||
var(--wg-velvet-panel) !important;
|
||||
background-size:
|
||||
100% var(--wg-ledger-line),
|
||||
auto;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@include media-breakpoint-down(lg) {
|
||||
#panel {
|
||||
background: linear-gradient(180deg, rgba(18, 15, 22, 0.96), rgba(9, 8, 11, 1));
|
||||
background: rgba(17, 14, 21, 0.98);
|
||||
}
|
||||
|
||||
ul.categories-list,
|
||||
|
||||
@@ -5,6 +5,10 @@ body {
|
||||
}
|
||||
|
||||
body {
|
||||
--bs-link-color: var(--wg-gold);
|
||||
--bs-link-color-rgb: 194, 163, 90;
|
||||
--bs-link-hover-color: #e0c878;
|
||||
--bs-link-hover-color-rgb: 224, 200, 120;
|
||||
font-family: var(--wg-font-text);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@@ -14,6 +18,12 @@ body {
|
||||
background: var(--wg-bg);
|
||||
}
|
||||
|
||||
// h-100 on #content collapses inside the flex-grown #panel, so the 404's
|
||||
// flex-fill never gets height to center in; let #content grow instead
|
||||
body.template-404 #content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.layout-container,
|
||||
#content {
|
||||
color: var(--wg-text-soft);
|
||||
|
||||
@@ -105,12 +105,7 @@
|
||||
--wg-border-soft: rgba(194, 163, 90, 0.08);
|
||||
--wg-focus: rgba(194, 163, 90, 0.28);
|
||||
--wg-focus-ring: #c2a35a;
|
||||
--wg-ledger-panel: linear-gradient(
|
||||
100deg,
|
||||
rgba(38, 22, 35, 0.5) 0%,
|
||||
rgba(19, 17, 24, 0.97) 34%,
|
||||
rgba(13, 12, 17, 0.98) 100%
|
||||
);
|
||||
--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);
|
||||
@@ -120,20 +115,8 @@
|
||||
--wg-ledger-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024), inset 0 -1px 0 rgba(0, 0, 0, 0.42), 0 8px 18px rgba(0, 0, 0, 0.2);
|
||||
--wg-etched-highlight: rgba(246, 223, 163, 0.34);
|
||||
--wg-etched-shadow: rgba(23, 12, 16, 0.82);
|
||||
--wg-velvet-panel: linear-gradient(
|
||||
100deg,
|
||||
rgba(42, 18, 34, 0.46) 0%,
|
||||
rgba(25, 22, 31, 0.95) 23%,
|
||||
rgba(18, 16, 23, 0.99) 62%,
|
||||
rgba(13, 12, 17, 0.98) 100%
|
||||
);
|
||||
--wg-velvet-panel-hover: linear-gradient(
|
||||
100deg,
|
||||
rgba(58, 24, 48, 0.56) 0%,
|
||||
rgba(31, 25, 39, 0.98) 23%,
|
||||
rgba(21, 18, 27, 1) 62%,
|
||||
rgba(15, 14, 20, 0.99) 100%
|
||||
);
|
||||
--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));
|
||||
}
|
||||
|
||||
@@ -1,10 +1,4 @@
|
||||
$wg-topbar-panel-bg: linear-gradient(
|
||||
100deg,
|
||||
#2a1222 0%,
|
||||
#19161f 23%,
|
||||
#121017 62%,
|
||||
#0d0c11 100%
|
||||
);
|
||||
$wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
|
||||
|
||||
.wg-layout-container {
|
||||
min-height: 100vh;
|
||||
@@ -14,9 +8,7 @@ $wg-topbar-panel-bg: linear-gradient(
|
||||
top: 0;
|
||||
z-index: 1020;
|
||||
color: var(--wg-text-soft);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 241, 196, 0.035), transparent 42%),
|
||||
linear-gradient(90deg, rgba(42, 18, 34, 0.96), rgba(15, 13, 18, 0.98) 38%, rgba(9, 8, 11, 0.99));
|
||||
background: rgba(24, 20, 29, 0.98);
|
||||
border-bottom: 1px solid rgba(194, 163, 90, 0.2);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 244, 221, 0.04),
|
||||
|
||||
@@ -54,7 +54,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(100deg, rgba(42, 18, 34, 0.34), rgba(18, 16, 23, 0.96) 62%, rgba(13, 12, 17, 0.98)) !important;
|
||||
var(--wg-velvet-panel) !important;
|
||||
background-size: 100% var(--wg-ledger-line), auto;
|
||||
border: 1px solid rgba(194, 163, 90, 0.14);
|
||||
border-radius: 8px;
|
||||
|
||||
Reference in New Issue
Block a user