diff --git a/AGENTS.md b/AGENTS.md index 9a99da9..9493ef3 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -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 diff --git a/scss/westgate/_categories.scss b/scss/westgate/_categories.scss index d38d5f5..ae8a2d7 100644 --- a/scss/westgate/_categories.scss +++ b/scss/westgate/_categories.scss @@ -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; } diff --git a/scss/westgate/_controls.scss b/scss/westgate/_controls.scss index f50144c..fb62de9 100644 --- a/scss/westgate/_controls.scss +++ b/scss/westgate/_controls.scss @@ -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, diff --git a/scss/westgate/_posts.scss b/scss/westgate/_posts.scss index 7f44b7a..af000d5 100644 --- a/scss/westgate/_posts.scss +++ b/scss/westgate/_posts.scss @@ -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; } diff --git a/scss/westgate/_topics.scss b/scss/westgate/_topics.scss index 1076d8e..298bd7c 100644 --- a/scss/westgate/_topics.scss +++ b/scss/westgate/_topics.scss @@ -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 { diff --git a/scss/westgate/_widgets.scss b/scss/westgate/_widgets.scss new file mode 100644 index 0000000..1b63a53 --- /dev/null +++ b/scss/westgate/_widgets.scss @@ -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; +} diff --git a/templates/partials/topics_list.tpl b/templates/partials/topics_list.tpl index 6c15f98..2fb8c7c 100644 --- a/templates/partials/topics_list.tpl +++ b/templates/partials/topics_list.tpl @@ -56,7 +56,7 @@ {{{ each ./tags }}} - {./valueEscaped} + {./valueEscaped} {{{ end }}} diff --git a/theme.scss b/theme.scss index 11bdddd..ff52ee6 100644 --- a/theme.scss +++ b/theme.scss @@ -5,4 +5,5 @@ @import "./scss/westgate/topics"; @import "./scss/westgate/posts"; @import "./scss/westgate/controls"; +@import "./scss/westgate/widgets"; @import "./scss/westgate/responsive";