From 87e0bcd92984ecd9e8d9220daae9208fe9cfcb82 Mon Sep 17 00:00:00 2001 From: vickydotbat Date: Thu, 23 Apr 2026 11:57:56 +0200 Subject: [PATCH] Switches & Minor UI Improvements --- AGENTS.md | 6 +- scss/westgate/_categories.scss | 62 ++++++++----------- scss/westgate/_controls.scss | 109 +++++++++++++++++++++++++++++++++ scss/westgate/_responsive.scss | 8 --- scss/westgate/_surfaces.scss | 21 ++++--- scss/westgate/_topics.scss | 12 ---- scss/westgate/_widgets.scss | 31 ++++++++++ 7 files changed, 180 insertions(+), 69 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 6127f1b..9b7fc79 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -98,15 +98,15 @@ Statuses: Complete the following: -- [ ] Draft a design for icons and avatars to look a little more "ornate", like literal signet rings, maybe with some subtle dark steel or faded gold bordering. +- [x] Remove the lines on the left side of the categories page underneath the categories this also exists for subcategories on the "category" page. ## Future Tasks Tasks to be considered in the future, not implemented immediately. Keep them in scope when making decisions. -- [ ] Consider a light mode/dark mode toggle while retaining core theme, preferably without adding a Skin +- [x] Draft a design for icons and avatars to look a little more "ornate", like literal signet rings, maybe with some subtle dark steel or faded gold bordering. Implemented with layered dark steel/faded gold borders and restrained inset highlights for category icons, child category icons, avatars, and user initials. `./nodebb build` passes; local browser validation was blocked because `localhost:4567` was not running. -- [ ] Remove the lines on the left side of the categories page underneath the categories this also exists for subcategories on the "category" page. +- [ ] Consider a light mode/dark mode toggle while retaining core theme, preferably without adding a Skin - [ ] Un-bold "topics" and "posts" and make the color lines replace the black line drived from category background color to either use the foreground color of the icon, or an ornate gilding like the icons (image 2) - [ ] Consider making the category names a bit smoother; it looks like it's not anti-aliased. (image 3) - [ ] Mobile website doesn't use the correct fonts. diff --git a/scss/westgate/_categories.scss b/scss/westgate/_categories.scss index ae8a2d7..8185302 100644 --- a/scss/westgate/_categories.scss +++ b/scss/westgate/_categories.scss @@ -8,18 +8,7 @@ ul.westgate-categories-list { position: relative; display: grid; gap: 0.75rem; - padding-left: 0.9rem; -} - -ul.categories-list::before { - content: ""; - position: absolute; - top: 1.1rem; - bottom: 1.1rem; - left: 0.45rem; - width: 1px; - background: linear-gradient(to bottom, rgba(194, 163, 90, 0.18), rgba(194, 163, 90, 0.04)); - pointer-events: none; + padding-left: 0; } li[component="categories/category"] { @@ -31,33 +20,25 @@ li[component="categories/category"] { transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } -li[component="categories/category"]::before { - content: ""; - position: absolute; - top: 1.75rem; - left: -0.9rem; - width: 0.9rem; - height: 1px; - background: linear-gradient(to right, rgba(194, 163, 90, 0.2), rgba(194, 163, 90, 0.08)); - pointer-events: none; -} - li[component="categories/category"].unread { border-color: rgba(194, 163, 90, 0.24) !important; } li[component="categories/category"] .icon { - border: 1px solid rgba(246, 223, 163, 0.24); + border: 1px solid rgba(246, 223, 163, 0.34); border-radius: 6px !important; box-shadow: - inset 0 1px 0 var(--wg-etched-highlight), - inset 0 -2px 5px rgba(0, 0, 0, 0.38), - 0 0 0 1px rgba(72, 48, 24, 0.42), - 0 8px 18px rgba(0, 0, 0, 0.28); - filter: saturate(0.82) contrast(1.08); + inset 0 1px 0 rgba(255, 242, 204, 0.28), + inset 0 0 0 1px rgba(18, 15, 22, 0.62), + inset 0 -3px 7px rgba(0, 0, 0, 0.52), + 0 0 0 1px rgba(56, 48, 42, 0.9), + 0 0 0 2px rgba(124, 105, 62, 0.24), + 0 9px 18px rgba(0, 0, 0, 0.32); + filter: saturate(0.82) contrast(1.12); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72), - 0 -1px 0 rgba(255, 238, 190, 0.16); + 0 -1px 0 rgba(255, 238, 190, 0.18), + 0 0 8px rgba(0, 0, 0, 0.22); } li[component="categories/category"] h2.title { @@ -116,14 +97,16 @@ ul.category-children { display: inline-flex; align-items: center; justify-content: center; - background: linear-gradient(145deg, rgba(96, 65, 32, 0.54), rgba(36, 18, 29, 0.78)); - border: 1px solid rgba(246, 223, 163, 0.22); + background: linear-gradient(145deg, rgba(105, 82, 45, 0.48), rgba(30, 28, 34, 0.62) 46%, rgba(36, 18, 29, 0.78)); + border: 1px solid rgba(246, 223, 163, 0.3); border-radius: 4px !important; box-shadow: - inset 0 1px 0 rgba(255, 240, 190, 0.26), - inset 0 -1px 3px rgba(0, 0, 0, 0.42), - 0 0 0 1px rgba(27, 17, 18, 0.54); - filter: saturate(0.78) contrast(1.08); + inset 0 1px 0 rgba(255, 240, 190, 0.28), + inset 0 0 0 1px rgba(17, 13, 18, 0.58), + inset 0 -1px 3px rgba(0, 0, 0, 0.46), + 0 0 0 1px rgba(31, 25, 24, 0.72), + 0 0 0 2px rgba(124, 105, 62, 0.18); + filter: saturate(0.8) contrast(1.12); font-size: 0.7rem !important; line-height: 18px !important; } @@ -180,5 +163,10 @@ li[component="categories/category"] .lastpost { } li[component="categories/category"] .teaser .avatar { - box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.2); + box-shadow: + inset 0 1px 0 rgba(255, 242, 204, 0.18), + inset 0 0 0 1px rgba(18, 15, 22, 0.58), + inset 0 -2px 5px rgba(0, 0, 0, 0.42), + 0 0 0 1px rgba(53, 46, 49, 0.88), + 0 0 0 2px rgba(124, 105, 62, 0.2) !important; } diff --git a/scss/westgate/_controls.scss b/scss/westgate/_controls.scss index 9c8814c..d52fef7 100644 --- a/scss/westgate/_controls.scss +++ b/scss/westgate/_controls.scss @@ -69,6 +69,65 @@ color: var(--wg-text) !important; } +.form-select { + padding-right: 2rem; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3e%3cpath d='M2 2.5 7 7.5l5-5' fill='none' stroke='%23c2a35a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important; + background-position: right 0.65rem center !important; + background-repeat: no-repeat !important; + background-size: 0.75rem 0.55rem !important; +} + +.form-control[type="number"], +input[type="number"].form-control { + appearance: textfield; + -moz-appearance: textfield; + padding-right: 0.65rem; + color-scheme: dark; +} + +.form-control[type="number"]::-webkit-inner-spin-button, +.form-control[type="number"]::-webkit-outer-spin-button, +input[type="number"].form-control::-webkit-inner-spin-button, +input[type="number"].form-control::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.form-switch .form-check-input, +.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; + box-shadow: + inset 0 1px 2px rgba(0, 0, 0, 0.48), + 0 0 0 1px rgba(8, 7, 10, 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; +} + +.form-switch .form-check-input:checked, +.form-check-input[role="switch"]:checked { + background-color: var(--wg-gold) !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='%2309080b'/%3e%3c/svg%3e") !important; + border-color: rgba(246, 223, 163, 0.58) !important; + box-shadow: + inset 0 1px 0 rgba(255, 244, 221, 0.2), + 0 0 0 1px rgba(66, 48, 16, 0.5) !important; +} + +.form-switch .form-check-input:focus, +.form-check-input[role="switch"]:focus { + border-color: rgba(216, 194, 138, 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; +} + .quick-reply .card, [component="topic/quickreply/container"] .card { box-shadow: var(--wg-ledger-shadow) !important; @@ -93,6 +152,13 @@ color: var(--wg-text) !important; } +input[type="password"].form-control, +.form-control[type="password"] { + font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; + font-size: 1.05rem; + letter-spacing: 0.08em; +} + .form-control::placeholder, .bootstrap-tagsinput::placeholder, .composer textarea::placeholder, @@ -101,6 +167,49 @@ textarea[component="topic/quickreply/text"]::placeholder { color: rgba(185, 178, 166, 0.62) !important; } +table[component="notification/table"] { + --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[component="notification/table"] :where(th, td, label) { + color: var(--wg-text-soft) !important; +} + +table[component="notification/table"] thead :where(th, td) { + color: var(--wg-ledger-ink-muted) !important; + font-family: var(--wg-font-display); + font-size: 0.86rem; + font-weight: 600; + letter-spacing: 0.02em; +} + +table[component="notification/table"] tbody tr { + border-color: rgba(194, 163, 90, 0.1) !important; +} + +table[component="notification/table"] a[data-type] { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 1.9rem; + min-height: 1.9rem; + border-radius: 999px; + color: var(--wg-text-muted); + text-decoration: none; + transition: background-color 140ms ease, color 140ms ease; +} + +table[component="notification/table"] a[data-type]:hover, +table[component="notification/table"] a[data-type]:focus { + background-color: rgba(194, 163, 90, 0.075); + color: var(--wg-text); +} + .tool-modal { background: transparent !important; border-color: rgba(194, 163, 90, 0.16) !important; diff --git a/scss/westgate/_responsive.scss b/scss/westgate/_responsive.scss index 4ee3133..1c869f3 100644 --- a/scss/westgate/_responsive.scss +++ b/scss/westgate/_responsive.scss @@ -8,20 +8,12 @@ padding-left: 0; } - ul.categories-list::before { - content: none; - } - li[component="categories/category"], li[component="category/topic"], li[component="post"] .post-container { padding: 0.85rem !important; } - li[component="categories/category"]::before { - content: none; - } - li[component="categories/category"] h2.title { font-size: 1.1rem !important; } diff --git a/scss/westgate/_surfaces.scss b/scss/westgate/_surfaces.scss index 254195c..ccae686 100644 --- a/scss/westgate/_surfaces.scss +++ b/scss/westgate/_surfaces.scss @@ -145,22 +145,25 @@ samp, .user-icon, .avatar-tooltip .avatar, .avatar-tooltip img { - border: 1px solid rgba(216, 194, 138, 0.2); + border: 1px solid rgba(216, 194, 138, 0.32); box-shadow: - inset 0 1px 0 rgba(255, 238, 190, 0.18), - inset 0 -2px 4px rgba(0, 0, 0, 0.44), - 0 0 0 1px rgba(24, 13, 19, 0.82), - 0 6px 14px rgba(0, 0, 0, 0.34) !important; - filter: saturate(0.9) contrast(1.05); + inset 0 1px 0 rgba(255, 242, 204, 0.2), + inset 0 0 0 1px rgba(18, 15, 22, 0.58), + inset 0 -3px 6px rgba(0, 0, 0, 0.48), + 0 0 0 1px rgba(53, 46, 49, 0.92), + 0 0 0 2px rgba(124, 105, 62, 0.22), + 0 7px 16px rgba(0, 0, 0, 0.36) !important; + filter: saturate(0.88) contrast(1.08); } .user-icon { background-image: - radial-gradient(circle at 34% 22%, rgba(255, 238, 190, 0.2), transparent 26%), - linear-gradient(145deg, rgba(90, 58, 32, 0.42), rgba(44, 17, 34, 0.22)) !important; + radial-gradient(circle at 34% 22%, rgba(255, 238, 190, 0.22), transparent 25%), + linear-gradient(145deg, rgba(111, 86, 45, 0.36), rgba(30, 29, 34, 0.28) 42%, rgba(44, 17, 34, 0.2)) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78), - 0 -1px 0 rgba(255, 238, 190, 0.12); + 0 -1px 0 rgba(255, 238, 190, 0.16), + 0 0 8px rgba(0, 0, 0, 0.24); } li[component="post"] .avatar, diff --git a/scss/westgate/_topics.scss b/scss/westgate/_topics.scss index 298bd7c..051023b 100644 --- a/scss/westgate/_topics.scss +++ b/scss/westgate/_topics.scss @@ -83,18 +83,6 @@ li[component="category/topic"]:not(.unread) .user-icon { opacity: 0.78; } -li[component="category/topic"]::before { - content: ""; - position: absolute; - top: 0.85rem; - bottom: 0.85rem; - left: 4.55rem; - width: 1px; - background: linear-gradient(to bottom, transparent, var(--wg-ledger-rule-strong), transparent); - pointer-events: none; - opacity: 0.65; -} - li[component="category/topic"]::after { content: ""; position: absolute; diff --git a/scss/westgate/_widgets.scss b/scss/westgate/_widgets.scss index 1b63a53..7bdd757 100644 --- a/scss/westgate/_widgets.scss +++ b/scss/westgate/_widgets.scss @@ -192,6 +192,37 @@ font-family: var(--wg-font-ui); } +[data-widget-area="footer"] > .row:has(> a.btn[href*="/user/"]) { + --bs-gutter-x: 0.45rem; + --bs-gutter-y: 0.45rem; + width: 100%; + margin: 0 0 0.85rem; + padding: 0.6rem; + background: + linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)), + var(--wg-velvet-panel) !important; + border: 1px solid rgba(194, 163, 90, 0.14); + border-radius: 8px; + box-shadow: var(--wg-velvet-shadow); +} + +[data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn { + background: transparent !important; + background-image: none !important; + border: 0 !important; + box-shadow: none !important; + color: var(--wg-text-soft) !important; + min-width: 0; +} + +[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-image: none !important; + color: var(--wg-text) !important; + text-decoration: none; +} + [data-widget-area="sidebar"] .card, [data-widget-area="sidebar"] .alert, [data-widget-area="sidebar"] > :where(div, section, aside):not(:empty):not(.hidden):not(.row):not([data-widget-area]):not(.card):not(.alert):not(.list-group),