improvements
This commit is contained in:
@@ -45,6 +45,40 @@
|
||||
--bs-btn-active-border-color: rgba(216, 194, 138, 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-color: #f0e6d8;
|
||||
--bs-btn-hover-bg: #6a5720;
|
||||
--bs-btn-hover-border-color: #c2a35a;
|
||||
--bs-btn-hover-color: #fff4dd;
|
||||
--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%);
|
||||
}
|
||||
|
||||
.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-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-active-color: var(--wg-text);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.guest-cta-alert .btn-close {
|
||||
filter: invert(86%) sepia(16%) saturate(360%) hue-rotate(356deg)
|
||||
brightness(95%) contrast(90%);
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.modal-footer .btn-secondary,
|
||||
.bootbox .modal-footer .btn-secondary,
|
||||
.modal-footer .btn[data-bs-dismiss="modal"],
|
||||
@@ -207,20 +241,30 @@ textarea[component="topic/quickreply/text"]::placeholder {
|
||||
color: rgba(185, 178, 166, 0.62) !important;
|
||||
}
|
||||
|
||||
table[component="notification/table"] {
|
||||
table[component="notification/table"],
|
||||
.page-flags [component="flags/list"],
|
||||
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.1);
|
||||
--bs-table-border-color: rgba(194, 163, 90, 0.16);
|
||||
--bs-table-striped-bg: rgba(194, 163, 90, 0.035);
|
||||
--bs-table-striped-color: var(--wg-text-soft);
|
||||
--bs-table-hover-bg: rgba(194, 163, 90, 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);
|
||||
}
|
||||
|
||||
table[component="notification/table"] :where(th, td, label) {
|
||||
color: var(--wg-text-soft) !important;
|
||||
}
|
||||
|
||||
table[component="notification/table"] thead :where(th, td) {
|
||||
table[component="notification/table"] thead :where(th, td),
|
||||
li[component="post"] .content table thead :where(th, td) {
|
||||
color: var(--wg-ledger-ink-muted) !important;
|
||||
font-family: var(--wg-font-display);
|
||||
font-size: 0.86rem;
|
||||
@@ -622,6 +666,6 @@ table[component="notification/table"] a[data-type]:focus {
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--wg-focus) !important;
|
||||
outline: 2px solid var(--wg-focus-ring) !important;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
+12
-20
@@ -127,7 +127,7 @@
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #7f756f;
|
||||
color: var(--wg-text-muted);
|
||||
font-family: var(--wg-font-ui);
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.45;
|
||||
@@ -148,6 +148,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// quiet ghost credits — third-party names must never be the loudest pixels
|
||||
.wg-footer .wg-footer__powered-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -155,46 +156,37 @@
|
||||
gap: 0.45rem;
|
||||
width: 10.875rem;
|
||||
min-height: 2rem;
|
||||
border: 1px solid var(--wg-border);
|
||||
border: 1px solid var(--wg-border-soft);
|
||||
border-radius: 8px;
|
||||
padding: 0.42rem 0.75rem;
|
||||
color: var(--wg-text-muted);
|
||||
background: var(--wg-velvet-panel);
|
||||
box-shadow: var(--wg-velvet-shadow);
|
||||
background: rgba(255, 244, 221, 0.02);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: rgba(194, 163, 90, 0.22);
|
||||
color: #efe7da;
|
||||
background: var(--wg-velvet-panel-hover);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.035),
|
||||
inset 0 0 38px rgba(120, 36, 84, 0.14),
|
||||
0 12px 30px rgba(0, 0, 0, 0.3);
|
||||
color: var(--wg-text-soft);
|
||||
background: rgba(194, 163, 90, 0.06);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.035),
|
||||
inset 0 0 38px rgba(120, 36, 84, 0.14),
|
||||
0 0 0 2px rgba(194, 163, 90, 0.18),
|
||||
0 12px 30px rgba(0, 0, 0, 0.3);
|
||||
outline: 2px solid var(--wg-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.wg-footer .wg-footer__powered-label {
|
||||
color: var(--wg-ledger-ink);
|
||||
color: var(--wg-text-muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wg-footer .wg-footer__powered-name {
|
||||
color: #f2edf7;
|
||||
font-family: var(--wg-font-display);
|
||||
color: var(--wg-text-soft);
|
||||
font-family: var(--wg-font-ui);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@ li[component="post"] .post-container {
|
||||
var(--wg-ledger-panel) !important;
|
||||
background-size: 100% 1.82rem, auto;
|
||||
border: 1px solid var(--wg-ledger-border) !important;
|
||||
border-left: 2px solid rgba(194, 163, 90, 0.32) !important;
|
||||
border-left: 1px solid rgba(194, 163, 90, 0.32) !important;
|
||||
border-radius: 6px !important;
|
||||
box-shadow: var(--wg-ledger-shadow) !important;
|
||||
}
|
||||
@@ -101,6 +101,23 @@ li[component="post"] .content blockquote,
|
||||
|
||||
li[component="post"] .content {
|
||||
padding-top: 0.35rem;
|
||||
max-width: 82ch;
|
||||
}
|
||||
|
||||
// client.js wraps wide post tables in a focusable scroll container
|
||||
li[component="post"] .content .wg-mobile-table-scroll {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
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-width: thin;
|
||||
}
|
||||
|
||||
li[component="post"] .content .wg-mobile-table-scroll > table {
|
||||
min-width: var(--wg-mobile-table-min-width, max-content);
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
li[component="post"] .content h1,
|
||||
|
||||
@@ -216,6 +216,21 @@ li[component="category/topic"] .user-icon {
|
||||
0 0 10px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
// user data (email, join/last-online dates) never wears the engraving —
|
||||
// Harmony marks these with .text-break + .ff-secondary in the stats row
|
||||
.account-stats .text-break.ff-secondary {
|
||||
font-family: var(--wg-font-text);
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// replace core's grey-triangle default cover with the velvet material
|
||||
.cover[style*="cover-default.png"] {
|
||||
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;
|
||||
}
|
||||
|
||||
.account,
|
||||
.account .profile,
|
||||
.account .cover,
|
||||
@@ -357,15 +372,7 @@ li[component="category/topic"] .user-icon {
|
||||
border-bottom-color: rgba(194, 163, 90, 0.12) !important;
|
||||
}
|
||||
|
||||
.page-flags [component="flags/list"] {
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-color: var(--wg-text-soft);
|
||||
--bs-table-border-color: rgba(194, 163, 90, 0.1);
|
||||
--bs-table-hover-bg: rgba(194, 163, 90, 0.04);
|
||||
--bs-table-hover-color: var(--wg-text);
|
||||
color: var(--wg-text-soft) !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;
|
||||
|
||||
@@ -96,6 +96,7 @@
|
||||
--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-focus-ring: #c2a35a;
|
||||
--wg-ledger-panel: linear-gradient(
|
||||
100deg,
|
||||
rgba(38, 22, 35, 0.5) 0%,
|
||||
|
||||
@@ -200,11 +200,24 @@ $wg-topbar-panel-bg: linear-gradient(
|
||||
background: rgba(194, 163, 90, 0.08) !important;
|
||||
}
|
||||
|
||||
// one primary vocabulary: the dark gold plate from _controls.scss
|
||||
.wg-topbar .btn-primary,
|
||||
.wg-topbar__register {
|
||||
border-color: rgba(194, 163, 90, 0.34) !important;
|
||||
color: #1b1208 !important;
|
||||
background: linear-gradient(to bottom, #d8c28a, var(--wg-gold)) !important;
|
||||
border: 1px solid var(--wg-gold-soft) !important;
|
||||
color: #f0e6d8 !important;
|
||||
background: linear-gradient(to bottom, #5a4a1a, #473914) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06),
|
||||
0 2px 8px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.wg-topbar .btn-primary:hover,
|
||||
.wg-topbar .btn-primary:focus,
|
||||
.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;
|
||||
}
|
||||
|
||||
.wg-topbar__login,
|
||||
|
||||
@@ -61,7 +61,7 @@ li[component="category/topic"] {
|
||||
var(--wg-ledger-panel) !important;
|
||||
background-size: 100% 1.78rem, auto, auto;
|
||||
border: 1px solid var(--wg-ledger-border) !important;
|
||||
border-left: 2px solid rgba(194, 163, 90, 0.34) !important;
|
||||
border-left: 1px solid rgba(194, 163, 90, 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;
|
||||
@@ -113,9 +113,7 @@ li[component="category/topic"].unread {
|
||||
var(--wg-ledger-panel) !important;
|
||||
border-color: rgba(216, 194, 138, 0.17) !important;
|
||||
border-left-color: var(--wg-ledger-ink) !important;
|
||||
box-shadow:
|
||||
var(--wg-ledger-shadow),
|
||||
inset 2px 0 0 rgba(216, 194, 138, 0.1) !important;
|
||||
box-shadow: var(--wg-ledger-shadow) !important;
|
||||
}
|
||||
|
||||
li[component="category/topic"].pinned {
|
||||
@@ -161,8 +159,7 @@ li[component="category/topic"].locked {
|
||||
border-left-color: rgba(168, 74, 78, 0.42) !important;
|
||||
box-shadow:
|
||||
var(--wg-ledger-shadow),
|
||||
0 0 12px rgba(142, 52, 56, 0.09),
|
||||
inset 2px 0 0 rgba(142, 52, 56, 0.1) !important;
|
||||
0 0 12px rgba(142, 52, 56, 0.09) !important;
|
||||
}
|
||||
|
||||
li[component="category/topic"].locked:not(.unread) {
|
||||
@@ -182,8 +179,7 @@ li[component="category/topic"].locked.pinned {
|
||||
border-left-color: rgba(168, 74, 78, 0.58) !important;
|
||||
box-shadow:
|
||||
var(--wg-ledger-shadow),
|
||||
0 0 14px rgba(142, 52, 56, 0.085),
|
||||
inset 2px 0 0 rgba(216, 194, 138, 0.13) !important;
|
||||
0 0 14px rgba(142, 52, 56, 0.085) !important;
|
||||
}
|
||||
|
||||
li[component="category/topic"].pinned::after,
|
||||
@@ -275,6 +271,12 @@ li[component="category/topic"] [component="topic/labels"] .badge {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
// timestamps are data, not labels — the Engraving Rule keeps them plain
|
||||
li[component="category/topic"] [component="topic/labels"] .badge.timeago {
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
li[component="category/topic"] [component="topic/labels"] .badge i {
|
||||
color: var(--wg-ledger-ink);
|
||||
margin-right: 0.12rem;
|
||||
@@ -395,6 +397,17 @@ li[component="category/topic"] [component="topic/teaser"] .lastpost {
|
||||
color: var(--wg-ledger-ink-muted);
|
||||
}
|
||||
|
||||
// Harmony marks teasers with .border-2 + .lh-sm: keep the gilt edge at 1px
|
||||
// and give the clamped teaser text breathing room
|
||||
.lastpost.border-2 {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
||||
.lastpost.lh-sm,
|
||||
.lastpost .lh-sm {
|
||||
line-height: 1.35 !important;
|
||||
}
|
||||
|
||||
li[component="category/topic"] [component="topic/teaser"] .permalink,
|
||||
li[component="category/topic"] [component="topic/teaser"] .timeago {
|
||||
color: var(--wg-ledger-ink-muted) !important;
|
||||
|
||||
@@ -1216,7 +1216,7 @@
|
||||
}
|
||||
|
||||
.westgate-wiki .wiki-article-prose .wg-mobile-table-scroll:focus {
|
||||
outline: 2px solid rgba(194, 163, 90, 0.42);
|
||||
outline: 2px solid var(--wg-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user