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

Second Pass

Browse Source
This commit is contained in:
archvillainette
2026-04-22 18:11:03 +02:00
parent cd89fc2eb6
commit 6fff00a8b2
8 changed files with 304 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
+1 -9
View File
@@ -98,15 +98,7 @@ Statuses:
Complete the following:
- [ ] Mesh the look of topic counters (votes|posts|views) with the counters on categories/subcategories (topics|posts)
- [?] Are "locked", "pinned", "tag", and "time since posted" elements using chosen our custom fonts? They look off somehow; pinned/locked look is nice, but maybe try our UI font but bolded for all those elements.
- [ ] Tags on topics lost their icons
- [ ] Quick Reply:
- [ ] Double glow around boxes is too much; one surrounding layer should be sufficient
- [ ] New Topic Composer:
- [ ] Left side active box glow not rounded on the left top and bottom corners
- [ ] Left side active box not rounded on the right top and bottom corners (independent of glow)
- [ ] Right side double-glow (see Quick Reply) needs toning down/removal
- [x] Make a pass through widgets so they match the theme aesthetic. Ensure compatibility is preserved for different container types (card, alert, etc) and style those elements accordingly in a fitting way.
## Future Tasks
scss/westgate/_categories.scss
+6
View File
@@ -169,6 +169,12 @@ li[component="categories/category"] .post-content {
color: var(--wg-text-muted) !important;
}
li[component="categories/category"] .meta.stats .text-xs,
li[component="categories/category"] .meta.stats .text-muted {
font-family: var(--wg-font-ui);
font-weight: 600;
}
li[component="categories/category"] .lastpost {
border-left-color: rgba(194, 163, 90, 0.36) !important;
}
scss/westgate/_controls.scss
+56 -2
View File
@@ -69,6 +69,16 @@
color: var(--wg-text) !important;
}
.quick-reply .card,
[component="topic/quickreply/container"] .card {
box-shadow: var(--wg-ledger-shadow) !important;
}
.quick-reply .card-body,
[component="topic/quickreply/container"] .card-body {
box-shadow: none !important;
}
.form-control:focus,
.form-select:focus,
.bootstrap-tagsinput:focus,
@@ -76,8 +86,10 @@
.composer input:focus,
.composer .CodeMirror-focused {
background-color: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(194, 163, 90, 0.42) !important;
box-shadow: 0 0 0 0.18rem rgba(194, 163, 90, 0.12) !important;
border-color: rgba(194, 163, 90, 0.5) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026),
0 0 0 1px rgba(194, 163, 90, 0.28) !important;
color: var(--wg-text) !important;
}
@@ -179,6 +191,48 @@ textarea[component="topic/quickreply/text"]::placeholder {
color: var(--wg-text-soft) !important;
}
.composer .write-container,
.composer .preview-container {
overflow: hidden;
border-radius: 8px !important;
box-shadow: none !important;
}
.composer .write,
.composer .preview,
.composer .CodeMirror,
.composer .CodeMirror-scroll,
[component="composer"] .card-body {
border-radius: inherit !important;
box-shadow: none !important;
}
.composer .write:focus,
.composer .preview:focus,
.composer .CodeMirror-focused {
border-radius: 8px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026),
0 0 0 1px rgba(194, 163, 90, 0.28) !important;
}
.composer .title-container {
border-radius: 8px !important;
box-shadow: none !important;
}
.composer .title-container input,
.composer .title-container .form-control {
border-radius: inherit !important;
box-shadow: none !important;
}
.composer .title-container input:focus,
.composer .title-container .form-control:focus {
border-color: rgba(194, 163, 90, 0.5) !important;
box-shadow: none !important;
}
.composer .formatting-bar .btn,
.composer .btn-toolbar .btn,
[component="composer"] .btn,
scss/westgate/_posts.scss
+10 -1
View File
@@ -195,6 +195,15 @@ textarea[component="topic/quickreply/text"],
rgba(18, 15, 22, 0.92) !important;
background-size: 100% 1.82rem, auto;
border-color: var(--wg-ledger-border) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026),
0 4px 12px rgba(0, 0, 0, 0.16) !important;
}
textarea[component="topic/quickreply/text"]:focus,
.quick-reply textarea:focus {
border-color: rgba(194, 163, 90, 0.5) !important;
box-shadow: none !important;
}
.quick-reply,
@@ -211,7 +220,7 @@ textarea[component="topic/quickreply/text"],
var(--wg-ledger-panel) !important;
background-size: 100% 1.82rem, auto;
border-color: var(--wg-ledger-border) !important;
box-shadow: var(--wg-ledger-shadow) !important;
box-shadow: none !important;
color: var(--wg-text-soft) !important;
}
scss/westgate/_topics.scss
+25 -8
View File
@@ -273,9 +273,19 @@ a[component="topic/category"] {
text-decoration: none !important;
}
li[component="category/topic"] [component="topic/labels"],
li[component="category/topic"] [component="topic/tags"],
li[component="category/topic"] .timeago,
li[component="category/topic"] .permalink {
font-family: var(--wg-font-ui);
font-weight: 600;
letter-spacing: 0;
}
li[component="category/topic"] [component="topic/labels"] .badge {
letter-spacing: 0.015em;
text-transform: uppercase;
font-weight: 600 !important;
}
li[component="category/topic"] [component="topic/labels"] .badge i {
@@ -319,10 +329,19 @@ li[component="category/topic"] .tag-item,
letter-spacing: 0;
line-height: 1.15;
min-height: 1.38rem;
padding: 0.22rem 0.48rem;
gap: 0.28rem;
padding: 0.22rem 0.48rem 0.22rem 0.42rem;
text-transform: none;
}
li[component="category/topic"] .tag i,
li[component="category/topic"] .tag-item i,
.tag-list .tag i {
color: #d8c28a;
font-size: 0.68rem;
opacity: 0.88;
}
li[component="category/topic"] [component="topic/tags"] a {
text-decoration: none !important;
}
@@ -358,19 +377,16 @@ li[component="category/topic"] [component="topic/select"]:focus {
li[component="category/topic"] .meta.stats > div {
min-height: 3.25rem;
background: rgba(8, 7, 10, 0.18) !important;
border: 0 !important;
border-inline-start: 1px solid rgba(194, 163, 90, 0.12) !important;
border-radius: 0 !important;
box-shadow: none !important;
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important;
border-radius: 3px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
li[component="category/topic"] .meta.stats .fs-5,
li[component="category/topic"] .meta.stats .ff-secondary {
color: var(--wg-text) !important;
font-family: var(--wg-font-code);
font-size: 1.1rem !important;
font-variant-numeric: tabular-nums;
}
li[component="category/topic"] .meta.stats .text-xs,
@@ -383,6 +399,7 @@ li[component="category/topic"] [component="topic/teaser"] .post-content {
li[component="category/topic"] .meta.stats .text-xs,
li[component="category/topic"] .meta.stats .text-muted {
font-family: var(--wg-font-ui);
font-weight: 600;
}
li[component="category/topic"] [component="topic/teaser"] .lastpost {
scss/westgate/_widgets.scss
+204
View File
@@ -0,0 +1,204 @@
[data-widget-area] {
color: var(--wg-text-soft);
}
[data-widget-area="header"],
[data-widget-area="footer"] {
display: grid;
gap: 0.85rem;
}
[data-widget-area="header"] {
margin-bottom: 0.85rem;
}
[data-widget-area="footer"] {
margin-top: 1rem;
}
[data-widget-area="sidebar"],
[data-widget-area="sidebar-footer"] {
display: grid;
align-content: start;
gap: 0.85rem;
}
[data-widget-area] > :where(.card, .alert, .list-group, .forum-stats, .stats, .well, .jumbotron),
[data-widget-area] > :where(div, section, aside):not(:empty):not(.hidden):not(.row):not([data-widget-area]) {
color: var(--wg-text-soft);
}
[data-widget-area] > :where(div, section, aside):not(:empty):not(.hidden):not(.row):not([data-widget-area]):not(.card):not(.alert):not(.list-group) {
padding: 0.85rem;
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;
background-size: 100% 1.78rem, auto;
border: 1px solid rgba(194, 163, 90, 0.14);
border-radius: 8px;
box-shadow: var(--wg-velvet-shadow);
}
[data-widget-area] .card,
[data-widget-area] .card.card-header,
[data-widget-area] .card.text-bg-light,
[data-widget-area] .card-header.text-bg-light,
[data-widget-area] .well,
[data-widget-area] .jumbotron {
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.024), rgba(8, 7, 10, 0.08)),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.15) !important;
border-radius: 8px !important;
box-shadow: var(--wg-velvet-shadow) !important;
color: var(--wg-text-soft) !important;
}
[data-widget-area] .card-header {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.08), rgba(42, 18, 34, 0.2), transparent),
rgba(8, 7, 10, 0.24) !important;
border-color: rgba(194, 163, 90, 0.13) !important;
color: var(--wg-ledger-ink) !important;
font-family: var(--wg-font-display);
font-weight: 600;
letter-spacing: 0;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.74);
}
[data-widget-area] .card-body {
background: transparent !important;
color: var(--wg-text-soft);
}
[data-widget-area] .card-header + .card-body {
border-top: 1px solid rgba(194, 163, 90, 0.08);
}
[data-widget-area] .alert {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.055), transparent 5rem),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.2) !important;
border-left-width: 2px !important;
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.035),
0 8px 20px rgba(0, 0, 0, 0.22);
color: var(--wg-text-soft) !important;
}
[data-widget-area] .alert-success {
background:
linear-gradient(to right, rgba(120, 147, 101, 0.09), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: rgba(120, 147, 101, 0.26) !important;
border-left-color: rgba(120, 147, 101, 0.54) !important;
color: #c4d2b4 !important;
}
[data-widget-area] .alert-info {
background:
linear-gradient(to right, rgba(194, 163, 90, 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;
color: var(--wg-text-soft) !important;
}
[data-widget-area] .alert-warning {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.12), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: rgba(194, 163, 90, 0.28) !important;
border-left-color: rgba(194, 163, 90, 0.62) !important;
color: #e0cea2 !important;
}
[data-widget-area] .alert-danger {
background:
linear-gradient(to right, rgba(142, 52, 56, 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;
color: #d8b1b1 !important;
}
[data-widget-area] :where(h1, h2, h3, h4, h5, h6) {
color: var(--wg-text);
font-family: var(--wg-font-display);
font-weight: 600;
letter-spacing: 0;
}
[data-widget-area] :where(p, ul, ol) {
margin-bottom: 0.65rem;
}
[data-widget-area] :where(p, li, small, .text-sm) {
color: var(--wg-text-soft);
}
[data-widget-area] :where(a:not(.btn):not(.nav-link):not(.dropdown-item)) {
color: var(--wg-ledger-ink);
text-decoration: none;
}
[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;
text-decoration: underline;
}
[data-widget-area] .list-group {
background: transparent !important;
border: 1px solid rgba(194, 163, 90, 0.12);
border-radius: 8px;
overflow: hidden;
}
[data-widget-area] .list-group-item {
background: rgba(255, 255, 255, 0.014) !important;
border-color: rgba(194, 163, 90, 0.08) !important;
color: var(--wg-text-soft) !important;
}
[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;
color: var(--wg-ledger-ink-muted) !important;
font-family: var(--wg-font-ui);
}
[data-widget-area] :where(.forum-stats, .stats-card, .stats) {
color: var(--wg-text-soft);
font-family: var(--wg-font-ui);
}
[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-radius: 3px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
[data-widget-area] :where(.forum-stats, .stats-card, .stats) :where(.fs-5, .ff-secondary, strong, .fw-semibold) {
color: var(--wg-text) !important;
}
[data-widget-area] :where(.btn, .form-control, .form-select) {
font-family: var(--wg-font-ui);
}
[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),
[data-widget-area="sidebar-footer"] .card,
[data-widget-area="sidebar-footer"] .alert,
[data-widget-area="sidebar-footer"] > :where(div, section, aside):not(:empty):not(.hidden):not(.row):not([data-widget-area]):not(.card):not(.alert):not(.list-group) {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.024),
0 8px 18px rgba(0, 0, 0, 0.18) !important;
}
templates/partials/topics_list.tpl
+1 -1
View File
@@ -56,7 +56,7 @@
<span data-tid="{./tid}" component="topic/tags" class="lh-1 tag-list d-flex flex-wrap gap-1 {{{ if !./tags.length }}}hidden{{{ end }}}">
{{{ each ./tags }}}
<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}"><i class="fa fa-tag" aria-hidden="true"></i>{./valueEscaped}</span></a>
{{{ end }}}
</span>
theme.scss
+1
View File
@@ -5,4 +5,5 @@
@import "./scss/westgate/topics";
@import "./scss/westgate/posts";
@import "./scss/westgate/controls";
@import "./scss/westgate/widgets";
@import "./scss/westgate/responsive";