diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..8a2ab50 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,86 @@ +# AGENTS.md + +## Project + +This repository is `nodebb-theme-westgate`, a NodeBB theme for the Shadows Over Westgate forum. + +It is forked from `nodebb-theme-quickstart` and should remain a small, focused NodeBB child theme rather than a full replacement for NodeBB or Harmony. + +## Local Environment + +- Theme repo: `/home/vicky/Projects/nodebb-dev/nodebb-theme-westgate` +- Working NodeBB install: `/home/vicky/Projects/nodebb-dev/forum` +- Development workflow uses Grunt hot reload from the NodeBB install. +- This theme targets NodeBB 4.x compatibility, as declared in `package.json`. + +## Theme Direction + +The visual target is black velvet silk, darkness, vampirism, decadence, and decay. + +Use this palette direction: + +- Plum and near-black as the dominant base. +- Muted gold for accents, borders, small highlights, and important affordances. +- Red only sparingly, preferably as a subtle detail or state color. +- Avoid bright, playful, clinical, or flat SaaS-style treatment. +- Favor depth, restraint, texture, and rich contrast over loud ornament. + +Reference prior theme work in this repo through files prefixed with `____`: + +- `____live-copy.css` +- `____wikijs-live-copy.scss` +- `____bootstrap-overrides.scss` + +`____live-copy.css` is the clearest reference for the intended slick gradient treatment. Use that direction for foreground elements such as panels, topic rows, buttons, borders, accents, and active states. Keep gradients rich and polished, but avoid turning the entire page into a decorative gradient background. + +When adding new visuals, study the `____` reference files first and match the existing direction before introducing new motifs. + +## NodeBB Theme Rules + +Follow the current NodeBB theme model: + +- `theme.json` defines theme metadata and the base theme. +- This project uses `baseTheme: "nodebb-theme-harmony"`. +- Keep this as a child theme unless the user explicitly asks for a larger rewrite. +- `theme.scss` is the theme entry point and must stay imports-only. +- Do not append substantive CSS/SCSS directly to `theme.scss`. +- Do not add new root-level theme styling files. +- Put substantive Westgate-specific style overrides under focused files in `scss/`. +- Keep `scss/overrides.scss` focused on Bootstrap/Harmony variable overrides that must load before Bootstrap. +- Template overrides belong under `templates/` and must preserve the same relative path as the Harmony template they replace. +- Do not copy or redefine Harmony templates unless an actual override is needed. +- If a template does not exist here, NodeBB inherits it from the configured base theme. + +NodeBB theme documentation: https://docs.nodebb.org/development/themes/ + +## Current Files Of Interest + +- `theme.json`: theme metadata and `baseTheme`. +- `plugin.json`: hooks, scripts, modules, template path, and static dirs. +- `theme.scss`: NodeBB SCSS entry point. +- `scss/overrides.scss`: current Westgate override layer. +- `lib/theme.js` and `lib/controllers.js`: server-side theme hooks/controllers. +- `public/client.js`: client-side theme behavior. +- `templates/`: local template overrides and admin templates. + +## Working Practices + +- Keep edits scoped to the theme package unless the task explicitly names the NodeBB install. +- Do not modify the working NodeBB install at `/home/vicky/Projects/nodebb-dev/forum` except for running build/dev commands or when explicitly asked. +- Prefer existing NodeBB, Harmony, Bootstrap, and local theme patterns over introducing new frameworks. +- Keep selectors maintainable and avoid broad global overrides unless they are intentional theme-wide tokens or resets. +- Avoid unrelated formatting churn. +- Before overriding a template, inspect the corresponding Harmony template and copy only what is necessary. +- Preserve accessibility: readable contrast, visible focus states, usable hover/active states, and no text hidden purely for visual effect unless there is an accessible alternative. + +## Validation + +Use the local NodeBB workflow when practical: + +- From `/home/vicky/Projects/nodebb-dev/forum`, run the existing Grunt hot-reload task used by the project. +- Rebuild NodeBB assets when template or SCSS changes require it. +- For template overrides, verify that the rendered route uses the local template rather than falling back unexpectedly. +- For style work, check both desktop and mobile widths. +- Playwright browser validation is available in this environment after asset rebuilds; use it for rendered route checks and desktop/mobile screenshots against `http://localhost:4567`. + +If validation cannot be run, report what was changed and what still needs to be checked in the running forum. diff --git a/general_theme_idea.png b/general_theme_idea.png new file mode 100644 index 0000000..62de747 Binary files /dev/null and b/general_theme_idea.png differ diff --git a/package.json b/package.json index 489fb4a..e9af6f9 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,11 @@ "git add" ] }, - "dependencies": {}, + "dependencies": { + "@fontsource/cinzel": "^5.2.8", + "@fontsource/ibm-plex-mono": "^5.2.7", + "@fontsource/jost": "^5.2.8" + }, "devDependencies": { "@commitlint/cli": "11.0.0", "@commitlint/config-angular": "11.0.0", diff --git a/plugin.json b/plugin.json index 1e6cd03..13b5592 100644 --- a/plugin.json +++ b/plugin.json @@ -17,7 +17,8 @@ "../client/account/theme.js": "../nodebb-theme-harmony/public/settings.js" }, "staticDirs": { - "inter": "node_modules/@fontsource/inter/files", - "poppins": "node_modules/@fontsource/poppins/files" + "cinzel": "node_modules/@fontsource/cinzel/files", + "jost": "node_modules/@fontsource/jost/files", + "ibm-plex-mono": "node_modules/@fontsource/ibm-plex-mono/files" } } diff --git a/scss/overrides.scss b/scss/overrides.scss index e3d9d96..7e93c75 100644 --- a/scss/overrides.scss +++ b/scss/overrides.scss @@ -1,42 +1,75 @@ // only overrides to bs5 variables here +$font-path: "./plugins/nodebb-theme-westgate"; + +$wg-ink: #0f0d12; +$wg-ink-2: #141119; +$wg-panel: #18141d; +$wg-panel-2: #110f15; +$wg-plum: #2a1222; +$wg-plum-soft: #3a1830; +$wg-gold: #c2a35a; +$wg-gold-soft: #a8893f; +$wg-text: #e6e0d6; +$wg-text-soft: #b9b2a6; +$wg-text-muted: #9a9086; +$wg-red: #8e3438; + // below are the default values from harmony theme overrides.scss file // feel free to change these for your custom theme // Harmony colours -$white: #fff !default; -$gray-100: #f8f9fa !default; -$gray-200: #e9ecef !default; -$gray-300: #dee2e6 !default; -$gray-400: #ced4da !default; -$gray-500: #adb5bd !default; -$gray-600: #6c757d !default; -$gray-700: #495057 !default; -$gray-800: #343a40 !default; -$gray-900: #212529 !default; -$black: #000 !default; +$white: #f3ede4 !default; +$gray-100: #e6e0d6 !default; +$gray-200: #cfc5b7 !default; +$gray-300: #b9b2a6 !default; +$gray-400: #9a9086 !default; +$gray-500: #7f756f !default; +$gray-600: #625760 !default; +$gray-700: #3a323c !default; +$gray-800: #241f28 !default; +$gray-900: #141119 !default; +$black: #09080b !default; -$blue: #0d6efd !default; -$red: #dc3545 !default; -$yellow: #ffc107 !default; -$green: #198754 !default; -$cyan: #0dcaf0 !default; +$blue: #8fb3c4 !default; +$red: $wg-red !default; +$yellow: $wg-gold !default; +$green: #789365 !default; +$cyan: #7cafc2 !default; -$primary: $blue !default; -$secondary: $gray-600 !default; +$primary: $wg-gold !default; +$secondary: $wg-text-muted !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; $danger: $red !default; -$light: $gray-100 !default; -$dark: $gray-900 !default; +$light: $wg-text !default; +$dark: $wg-ink !default; -$body-color: $gray-800 !default; -$body-bg: $white !default; -$body-tertiary-bg: $gray-200 !default; -$text-muted: $gray-600 !default; -$border-color: $gray-200 !default; -$link-color: shade-color($blue, 20%) !default; +$body-color: $wg-text-soft !default; +$body-bg: $wg-ink !default; +$body-tertiary-bg: $wg-panel !default; +$text-muted: $wg-text-muted !default; +$border-color: rgba($wg-gold, 0.14) !default; +$link-color: $wg-gold !default; +$link-hover-color: lighten($wg-gold, 9%) !default; + +$card-bg: $wg-panel !default; +$card-cap-bg: $wg-panel-2 !default; +$card-border-color: rgba($wg-gold, 0.12) !default; +$dropdown-bg: #18141d !default; +$dropdown-border-color: rgba($wg-gold, 0.16) !default; +$dropdown-link-color: $wg-text-soft !default; +$dropdown-link-hover-color: $wg-text !default; +$dropdown-link-hover-bg: rgba($wg-gold, 0.08) !default; +$input-bg: rgba($white, 0.025) !default; +$input-color: $wg-text !default; +$input-border-color: rgba($wg-gold, 0.18) !default; +$input-focus-border-color: rgba($wg-gold, 0.42) !default; +$input-placeholder-color: rgba($wg-text-soft, 0.62) !default; +$btn-border-radius: 6px !default; +$border-radius: 8px !default; +$border-radius-sm: 6px !default; $btn-ghost-hover-color: mix($light, $dark, 90%); $btn-ghost-active-color: lighten($btn-ghost-hover-color, 5%); @@ -64,13 +97,14 @@ $link-decoration: none; $link-hover-decoration: underline; // Custom fonts -$font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -$font-family-secondary: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$font-family-sans-serif: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +$font-family-secondary: "Cinzel", Georgia, "Times New Roman", serif !default; +$font-family-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-weight-semibold: 500 !default; $small-font-size: 0.875rem !default; $breadcrumb-divider: quote("→"); -$breadcrumb-divider-color: $gray-500 !default; +$breadcrumb-divider-color: $wg-gold-soft !default; $breadcrumb-active-color: $body-color !default; $breadcrumb-item-padding-x: 12px !default; diff --git a/scss/westgate/_categories.scss b/scss/westgate/_categories.scss new file mode 100644 index 0000000..d38d5f5 --- /dev/null +++ b/scss/westgate/_categories.scss @@ -0,0 +1,178 @@ +body.template-categories #content > .row, +.westgate-categories-page { + margin-top: 0.25rem; +} + +ul.categories-list, +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; +} + +li[component="categories/category"] { + position: relative; + isolation: isolate; + margin: 0 !important; + padding: 1rem !important; + overflow: visible; + 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-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); + text-shadow: + 0 1px 0 rgba(0, 0, 0, 0.72), + 0 -1px 0 rgba(255, 238, 190, 0.16); +} + +li[component="categories/category"] h2.title { + position: relative; + padding-bottom: 0.18rem; + font-size: 1.24rem !important; + text-transform: uppercase; +} + +li[component="categories/category"] h2.title a { + color: var(--wg-text) !important; + text-decoration: none; +} + +li[component="categories/category"] h2.title::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: -0.45rem; + height: 1px; + background: linear-gradient(to right, rgba(194, 163, 90, 0.13), rgba(194, 163, 90, 0.045) 58%, transparent 94%); + pointer-events: none; +} + +li[component="categories/category"] .description { + color: var(--wg-text-muted) !important; + line-height: 1.45; +} + +ul.category-children { + margin-top: 0.55rem !important; + padding-top: 0.35rem; + border-top: 0 !important; +} + +.category-children-item > div, +.westgate-category-child { + display: inline-flex; + align-items: center; + gap: 0.35rem; + max-width: 100%; + padding: 0.2rem 0.55rem; + background: rgba(44, 22, 34, 0.3); + border: 1px solid rgba(194, 163, 90, 0.11); + border-radius: 999px; + transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; +} + +.westgate-category-child .icon, +.westgate-child-icon, +.category-children-item i.fa-caret-right { + width: 18px !important; + height: 18px !important; + min-width: 18px; + 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); + 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); + font-size: 0.7rem !important; + line-height: 18px !important; +} + +.category-children-item i.fa-caret-right { + color: var(--wg-ledger-ink) !important; +} + +.category-children-item > div:hover, +.westgate-category-child:hover { + background: rgba(70, 30, 48, 0.4); + border-color: rgba(194, 163, 90, 0.24); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); +} + +.category-children-item a { + color: #d8c28a !important; + font-weight: 600; + text-decoration: none !important; +} + +.category-children-item a:hover { + color: #e0c878 !important; +} + +li[component="categories/category"] .meta.stats > div { + min-height: 3.55rem; + 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); +} + +li[component="categories/category"] .meta.stats .fs-5, +li[component="categories/category"] .meta.stats .ff-secondary { + color: var(--wg-text) !important; +} + +li[component="categories/category"] .meta.stats .text-xs, +li[component="categories/category"] .meta.stats .text-muted, +li[component="categories/category"] .teaser, +li[component="categories/category"] .post-content { + color: var(--wg-text-muted) !important; +} + +li[component="categories/category"] .lastpost { + border-left-color: rgba(194, 163, 90, 0.36) !important; +} + +li[component="categories/category"] .teaser .avatar { + box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.2); +} diff --git a/scss/westgate/_controls.scss b/scss/westgate/_controls.scss new file mode 100644 index 0000000..f50144c --- /dev/null +++ b/scss/westgate/_controls.scss @@ -0,0 +1,320 @@ +.btn-primary { + --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; + background-image: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.24); +} + +.btn-primary:hover, +.btn-primary:focus { + background-image: linear-gradient(to bottom, #6a5720 0%, #53431a 100%); +} + +.btn-secondary, +.btn-ghost, +.btn-outline-secondary { + --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); + background-image: linear-gradient(to bottom, rgba(255, 244, 221, 0.018), rgba(0, 0, 0, 0.06)); + box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035); +} + +.modal-footer .btn-secondary, +.bootbox .modal-footer .btn-secondary, +.modal-footer .btn[data-bs-dismiss="modal"], +.modal-footer .btn[data-dismiss="modal"] { + --bs-btn-color: #d8cec0; + --bs-btn-bg: rgba(8, 7, 10, 0.16); + --bs-btn-border-color: rgba(216, 194, 138, 0.34); + --bs-btn-hover-color: #fff4dd; + --bs-btn-hover-bg: rgba(194, 163, 90, 0.09); + --bs-btn-hover-border-color: rgba(216, 194, 138, 0.52); + --bs-btn-active-bg: rgba(194, 163, 90, 0.13); + background-image: linear-gradient(to bottom, rgba(255, 244, 221, 0.024), rgba(0, 0, 0, 0.08)); + box-shadow: + inset 0 1px 0 rgba(255, 244, 221, 0.04), + 0 2px 8px rgba(0, 0, 0, 0.22); +} + +.form-control, +.form-select, +.bootstrap-tagsinput, +.composer textarea, +.composer input, +.composer .write, +.composer .preview, +.composer .CodeMirror, +.composer .CodeMirror-scroll, +.quick-reply, +.quick-reply .card, +.quick-reply .card-body, +.quick-reply .quickreply-message, +[component="topic/quickreply/container"], +[component="topic/quickreply/container"] .card, +[component="topic/quickreply/container"] .card-body { + background-color: rgba(18, 15, 22, 0.96) !important; + border-color: rgba(194, 163, 90, 0.18) !important; + color: var(--wg-text) !important; +} + +.form-control:focus, +.form-select:focus, +.bootstrap-tagsinput:focus, +.composer textarea:focus, +.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; + color: var(--wg-text) !important; +} + +.form-control::placeholder, +.bootstrap-tagsinput::placeholder, +.composer textarea::placeholder, +.quick-reply textarea::placeholder, +textarea[component="topic/quickreply/text"]::placeholder { + color: rgba(185, 178, 166, 0.62) !important; +} + +.tool-modal { + background: transparent !important; + border-color: rgba(194, 163, 90, 0.16) !important; +} + +.tool-modal .bootstrap-tagsinput { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.35rem; + min-height: 3rem; + padding: 0.45rem 0.55rem !important; + background: + linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.055) calc(100% - 1px)), + rgba(12, 10, 15, 0.92) !important; + background-size: 100% 1.65rem, auto; + border-color: rgba(194, 163, 90, 0.28) !important; + box-shadow: + inset 0 1px 0 rgba(255, 244, 221, 0.035), + 0 0 0 1px rgba(0, 0, 0, 0.28) !important; +} + +.tool-modal .bootstrap-tagsinput .tag, +.tool-modal .bootstrap-tagsinput .badge { + display: inline-flex; + align-items: center; + min-height: 1.35rem; + margin: 0 !important; + padding: 0.2rem 0.48rem !important; + background: + linear-gradient(to bottom, rgba(216, 194, 138, 0.13), rgba(70, 45, 52, 0.28)) !important; + border: 1px solid rgba(194, 163, 90, 0.3) !important; + border-radius: 3px !important; + color: #e5d6b5 !important; + font-family: var(--wg-font-ui); + font-size: 0.75rem; + line-height: 1.1; +} + +.tool-modal .bootstrap-tagsinput .tag [data-role="remove"], +.tool-modal .bootstrap-tagsinput .badge [data-role="remove"] { + color: rgba(230, 224, 214, 0.78); + margin-left: 0.32rem; +} + +.tool-modal .bootstrap-tagsinput input { + flex: 1 1 15rem; + min-width: 13rem; + height: 1.6rem; + margin: 0; + color: var(--wg-text) !important; +} + +.tool-modal .bootstrap-tagsinput .ui-autocomplete { + min-width: 14rem; + padding: 0.35rem; + background: linear-gradient(to bottom, rgba(23, 19, 28, 0.99), rgba(12, 10, 15, 0.99)) !important; + border: 1px solid rgba(194, 163, 90, 0.22) !important; + border-radius: 4px; + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.42); +} + +.tool-modal .bootstrap-tagsinput .ui-menu-item, +.tool-modal .bootstrap-tagsinput .ui-menu-item-wrapper { + color: var(--wg-text-soft); + font-family: var(--wg-font-ui); +} + +.composer, +.composer .composer-container, +.composer .resizer, +.composer .formatting-bar, +.composer .title-container, +.composer .tags-container, +.composer .category-list-container, +.composer .preview-container, +.composer .write-container, +.composer .imagedrop, +[component="composer"], +[component="composer"] .card, +[component="composer"] .card-header, +[component="composer"] .card-body { + background: + linear-gradient(to bottom, 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; + background-size: 100% 1.82rem, auto; + border-color: rgba(194, 163, 90, 0.18) !important; + color: var(--wg-text-soft) !important; +} + +.composer .formatting-bar .btn, +.composer .btn-toolbar .btn, +[component="composer"] .btn, +.quick-reply .btn, +[component="topic/quickreply/container"] .btn { + color: var(--wg-text-soft) !important; + border-color: rgba(194, 163, 90, 0.12) !important; +} + +.composer .formatting-bar .btn:hover, +.composer .btn-toolbar .btn:hover, +[component="composer"] .btn:hover, +.quick-reply .btn:hover, +[component="topic/quickreply/container"] .btn:hover { + background: rgba(194, 163, 90, 0.08) !important; + color: var(--wg-text) !important; +} + +.modal-content, +.modal-header, +.modal-footer, +.offcanvas, +.offcanvas-header, +.offcanvas-body { + background: linear-gradient(180deg, rgba(23, 19, 28, 0.98), rgba(13, 12, 17, 0.99)) !important; + border-color: rgba(194, 163, 90, 0.16) !important; + color: var(--wg-text-soft) !important; +} + +.nav-tabs, +.nav-pills, +.list-group { + border-color: rgba(194, 163, 90, 0.12) !important; +} + +.nav-tabs .nav-link, +.nav-pills .nav-link, +.list-group-item { + color: var(--wg-text-soft) !important; +} + +.nav-tabs .nav-link.active, +.nav-pills .nav-link.active, +.list-group-item.active { + background: rgba(194, 163, 90, 0.12) !important; + border-color: rgba(194, 163, 90, 0.26) !important; + color: var(--wg-text) !important; +} + +.dropdown-menu { + background: linear-gradient(to bottom, rgba(24, 20, 29, 0.98), rgba(17, 15, 21, 0.99)) !important; + border: 1px solid rgba(194, 163, 90, 0.16) !important; + border-radius: 8px; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34); +} + +.dropdown-item, +.dropdown-menu .nav-link { + color: var(--wg-text-soft) !important; +} + +.dropdown-item:hover, +.dropdown-item:focus, +.dropdown-menu .nav-link:hover, +.dropdown-menu .nav-link:focus { + background: rgba(194, 163, 90, 0.08) !important; + color: var(--wg-text) !important; +} + +.badge { + border-radius: 4px; +} + +.page-link { + background: rgba(255, 255, 255, 0.018); + border-color: rgba(194, 163, 90, 0.1); + color: var(--wg-text-soft); +} + +.page-link:hover, +.page-link:focus, +.active > .page-link { + background: rgba(194, 163, 90, 0.12); + border-color: rgba(194, 163, 90, 0.25); + color: var(--wg-text); +} + +.tooltip-inner { + background: #221c24 !important; + border: 1px solid rgba(194, 163, 90, 0.65) !important; + border-radius: 6px !important; + color: var(--wg-text) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.35) !important; +} + +.tooltip .tooltip-arrow { + display: none !important; +} + +[component="sidebar/left"], +[component="sidebar/right"], +.bottombar-nav { + background: linear-gradient(180deg, rgba(20, 18, 25, 0.96), rgba(13, 12, 17, 0.98)) !important; + border-color: rgba(194, 163, 90, 0.12) !important; + color: var(--wg-text-soft) !important; +} + +[component="sidebar/left"] .nav-link, +[component="sidebar/right"] .nav-link, +.bottombar-nav .nav-link { + color: var(--wg-text-soft) !important; + border-radius: 6px; +} + +[component="sidebar/left"] .nav-link:hover, +[component="sidebar/left"] .nav-link:focus, +[component="sidebar/right"] .nav-link:hover, +[component="sidebar/right"] .nav-link:focus, +.bottombar-nav .nav-link:hover, +.bottombar-nav .nav-link:focus { + background: rgba(194, 163, 90, 0.08); + color: var(--wg-text) !important; +} + +[component="sidebar/right"] .text-secondary, +[component="sidebar/right"] [data-widget-area="sidebar-footer"] { + color: var(--wg-text-muted) !important; +} + +[component="navigation/count"], +[component="unread/count"] { + background-color: var(--wg-red) !important; + color: #f2dddd; +} + +:focus-visible { + outline: 2px solid var(--wg-focus) !important; + outline-offset: 2px; +} diff --git a/scss/westgate/_posts.scss b/scss/westgate/_posts.scss new file mode 100644 index 0000000..7f44b7a --- /dev/null +++ b/scss/westgate/_posts.scss @@ -0,0 +1,224 @@ +body.template-topic h1[component="post/header"] .topic-title { + color: var(--wg-text); + text-shadow: none; +} + +body.template-topic .topic-info, +body.template-topic [component="topic/stats"] { + color: var(--wg-text-muted); +} + +body.template-topic .topic-info .badge, +body.template-topic [component="topic/stats"] .badge { + background: rgba(8, 7, 10, 0.22) !important; + border-color: rgba(194, 163, 90, 0.16) !important; + color: var(--wg-ledger-ink-muted) !important; + font-family: var(--wg-font-ui); +} + +ul[component="topic"].posts { + position: relative; +} + +ul[component="topic"].posts::before { + content: ""; + position: absolute; + top: 1.3rem; + bottom: 1.5rem; + left: 1.55rem; + width: 1px; + background: linear-gradient(to bottom, rgba(194, 163, 90, 0.18), rgba(194, 163, 90, 0.07)); + pointer-events: none; +} + +li[component="post"] { + color: var(--wg-text-soft); +} + +li[component="post"] .post-container-parent > .bg-body { + background: var(--wg-bg) !important; + box-shadow: 0 0 0 5px var(--wg-bg), 0 0 0 6px rgba(194, 163, 90, 0.18) !important; +} + +li[component="post"] .post-container { + position: relative; + padding: 1rem 1rem 0.85rem; + background: + linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)), + 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-radius: 6px !important; + box-shadow: var(--wg-ledger-shadow) !important; +} + +li[component="post"] .post-container::before { + content: ""; + position: absolute; + top: 2.95rem; + right: 1rem; + left: 1rem; + height: 1px; + background: linear-gradient(to right, rgba(194, 163, 90, 0.16), rgba(194, 163, 90, 0.05), transparent); + pointer-events: none; +} + +li[component="post"].topic-owner-post .post-container, +li[component="post"].self-post .post-container { + border-left-color: rgba(194, 163, 90, 0.46) !important; +} + +li[component="post"] .post-header { + min-height: 2rem; + padding-bottom: 0.45rem; + color: var(--wg-ledger-ink-muted); + font-family: var(--wg-font-ui); + font-size: 0.86rem; +} + +li[component="post"] .post-header a.fw-bold { + color: var(--wg-ledger-ink) !important; + font-weight: 600 !important; +} + +li[component="post"] .post-index { + color: var(--wg-ledger-ink-muted) !important; + font-family: var(--wg-font-code); + font-size: 0.78rem; + font-variant-numeric: tabular-nums; +} + +li[component="post"] .content, +li[component="post"] .content p, +li[component="post"] .content li, +li[component="post"] .content blockquote, +.topic-text, +.post-content { + color: var(--wg-text-soft); + line-height: 1.68; +} + +li[component="post"] .content { + padding-top: 0.35rem; +} + +li[component="post"] .content h1, +li[component="post"] .content h2, +li[component="post"] .content h3, +li[component="post"] .content h4 { + color: var(--wg-text); + font-family: var(--wg-font-display); + text-shadow: none; +} + +li[component="post"] .content blockquote { + background: rgba(35, 27, 23, 0.36); + border-left: 3px solid rgba(194, 163, 90, 0.4); + padding: 0.75rem 1rem; +} + +li[component="post"] .post-footer { + border-bottom: 0 !important; + border-top: 1px solid rgba(194, 163, 90, 0.095); + padding-top: 0.55rem; +} + +li[component="post"] [component="post/actions"] .btn, +li[component="post"] [component="post/reply-count"] { + color: var(--wg-text-muted) !important; + border-color: rgba(194, 163, 90, 0.1) !important; +} + +li[component="post"] [component="post/actions"] .btn:hover, +li[component="post"] [component="post/reply-count"]:hover { + color: var(--wg-text) !important; + background: rgba(194, 163, 90, 0.08) !important; + border-color: rgba(194, 163, 90, 0.2) !important; +} + +.topic-sidebar-tools .btn, +[component="topic/navigator"] { + background: rgba(255, 255, 255, 0.018) !important; + border-color: rgba(194, 163, 90, 0.1) !important; + color: var(--wg-text-soft) !important; +} + +[component="topic/navigator"] .pagination-text, +[component="topic/navigator"] .scroller-content, +.topic-sidebar-tools, +.topic-sidebar-tools .btn { + font-family: var(--wg-font-ui); +} + +[component="topic/navigator"] .scroller-thumb-icon { + background: var(--wg-ledger-ink) !important; +} + +.pagination-block { + background: + linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.08) calc(100% - 1px)), + rgba(18, 15, 22, 0.96) !important; + background-size: 100% 1.55rem, auto; + border-color: var(--wg-ledger-border) !important; + box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32) !important; + color: var(--wg-ledger-ink) !important; + font-family: var(--wg-font-ui); +} + +.pagination-block.text-bg-light { + color: var(--wg-ledger-ink) !important; +} + +.pagination-block a, +.pagination-block .btn, +.pagination-block i { + color: var(--wg-ledger-ink) !important; +} + +.pagination-block .pagination-text { + color: var(--wg-text) !important; + font-family: var(--wg-font-display); + font-size: 0.82rem; + letter-spacing: 0.02em; +} + +body.template-topic .sticky-top hr { + border-color: rgba(194, 163, 90, 0.12); +} + +textarea[component="topic/quickreply/text"], +.quick-reply textarea { + color: var(--wg-text) !important; + background: + linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)), + rgba(18, 15, 22, 0.92) !important; + background-size: 100% 1.82rem, auto; + border-color: var(--wg-ledger-border) !important; +} + +.quick-reply, +[component="topic/quickreply/container"] { + background: transparent !important; +} + +.quick-reply .card, +[component="topic/quickreply/container"] .card, +.quick-reply .card-body, +[component="topic/quickreply/container"] .card-body { + background: + linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.05) calc(100% - 1px)), + 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; + color: var(--wg-text-soft) !important; +} + +.quick-reply .card-header, +[component="topic/quickreply/container"] .card-header { + background: rgba(8, 7, 10, 0.22) !important; + border-color: rgba(194, 163, 90, 0.12) !important; + color: var(--wg-ledger-ink-muted) !important; + font-family: var(--wg-font-ui); +} diff --git a/scss/westgate/_responsive.scss b/scss/westgate/_responsive.scss new file mode 100644 index 0000000..4ee3133 --- /dev/null +++ b/scss/westgate/_responsive.scss @@ -0,0 +1,58 @@ +@include media-breakpoint-down(lg) { + #panel { + background: linear-gradient(180deg, rgba(18, 15, 22, 0.96), rgba(9, 8, 11, 1)); + } + + ul.categories-list, + ul.westgate-categories-list { + 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; + } + + .category-children-item > div { + width: 100%; + } + + .topic-list-header > .card { + align-items: stretch !important; + } + + .topic-list-header [component="category/controls"] { + width: 100%; + } +} + +@include media-breakpoint-down(md) { + .category-header { + padding: 0.85rem; + } + + li[component="post"] .content, + li[component="post"] .content p, + .topic-text, + .post-content { + font-size: 1rem; + line-height: 1.58; + } + + .bottombar-nav { + box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.28); + } +} diff --git a/scss/westgate/_surfaces.scss b/scss/westgate/_surfaces.scss new file mode 100644 index 0000000..254195c --- /dev/null +++ b/scss/westgate/_surfaces.scss @@ -0,0 +1,184 @@ +html, +body { + background: var(--wg-bg); + color: var(--wg-text-soft); +} + +body { + font-family: var(--wg-font-text); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +#panel { + background: var(--wg-bg); +} + +.layout-container, +#content { + color: var(--wg-text-soft); +} + +a { + color: var(--wg-gold); + + &:hover, + &:focus { + color: #e0c878; + } +} + +.text-muted, +.text-secondary, +.link-secondary { + color: var(--wg-text-muted) !important; +} + +.bg-body, +.bg-light, +.card, +.card-header, +.list-group-item { + background-color: var(--wg-panel) !important; + color: var(--wg-text-soft); + border-color: var(--wg-border-soft) !important; +} + +.westgate-surface, +.topic-list-header > .card, +.category-header, +li[component="categories/category"], +li[component="category/topic"], +li[component="post"] .post-container, +.quick-reply textarea, +textarea[component="topic/quickreply/text"] { + background: var(--wg-velvet-panel) !important; + border: 1px solid var(--wg-border) !important; + border-radius: 8px !important; + box-shadow: var(--wg-velvet-shadow) !important; +} + +.westgate-surface-hover, +li[component="categories/category"]:hover, +li[component="category/topic"]:hover, +li[component="post"] .post-container:hover { + background: var(--wg-velvet-panel-hover) !important; + border-color: rgba(194, 163, 90, 0.22) !important; + 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) !important; +} + +.badge, +.btn, +.dropdown-menu, +.form-control, +.form-select, +.pagination, +.topic-list-header, +.category-tools, +.meta.stats, +.timeago { + font-family: var(--wg-font-ui); + letter-spacing: 0; +} + +h1, +h2, +h3, +h4, +h5, +.category-title, +.topic-title, +li[component="categories/category"] h2.title, +li[component="category/topic"] h3[component="topic/header"] { + color: var(--wg-text); + font-family: var(--wg-font-display); + font-weight: 600; + letter-spacing: 0; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 10px rgba(104, 32, 76, 0.16); +} + +p, +li, +.description, +.post-content, +.topic-text, +[component="post/content"], +[component="chat/message/body"] { + font-family: var(--wg-font-text); +} + +code, +kbd, +pre, +samp, +.text-tabular { + font-family: var(--wg-font-code) !important; +} + +.breadcrumb { + --bs-breadcrumb-divider-color: var(--wg-gold-soft); + color: var(--wg-text-muted); +} + +.breadcrumb a, +.breadcrumb-item.active { + color: var(--wg-text-muted); +} + +.alert { + background: rgba(194, 163, 90, 0.08); + border-color: rgba(194, 163, 90, 0.18); + color: var(--wg-text-soft); +} + +.alert-danger { + background: rgba(142, 52, 56, 0.16); + border-color: rgba(142, 52, 56, 0.32); + color: #d8b1b1; +} + +.avatar, +[component="user/picture"] img, +.user-icon, +.avatar-tooltip .avatar, +.avatar-tooltip img { + border: 1px solid rgba(216, 194, 138, 0.2); + 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); +} + +.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; + text-shadow: + 0 1px 0 rgba(0, 0, 0, 0.78), + 0 -1px 0 rgba(255, 238, 190, 0.12); +} + +li[component="post"] .avatar, +li[component="category/topic"] .avatar, +li[component="category/topic"] .user-icon { + border-radius: 999px !important; +} + +.account, +.account .profile, +.account .cover, +.users .users-container, +.groups.list, +.notifications-list, +.chats-list, +.settings, +.user-profile, +.user-card, +.profile-card { + color: var(--wg-text-soft); +} diff --git a/scss/westgate/_tokens.scss b/scss/westgate/_tokens.scss new file mode 100644 index 0000000..6d41754 --- /dev/null +++ b/scss/westgate/_tokens.scss @@ -0,0 +1,106 @@ +@font-face { + font-family: "Cinzel"; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url("./plugins/nodebb-theme-westgate/cinzel/cinzel-latin-600-normal.woff2") format("woff2"); +} + +@font-face { + font-family: "Jost"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("./plugins/nodebb-theme-westgate/jost/jost-latin-400-normal.woff2") format("woff2"); +} + +@font-face { + font-family: "Jost"; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url("./plugins/nodebb-theme-westgate/jost/jost-latin-600-normal.woff2") format("woff2"); +} + +@font-face { + font-family: "Jost"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url("./plugins/nodebb-theme-westgate/jost/jost-latin-400-italic.woff2") format("woff2"); +} + +@font-face { + font-family: "IBM Plex Mono"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("./plugins/nodebb-theme-westgate/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); +} + +@font-face { + font-family: "IBM Plex Mono"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url("./plugins/nodebb-theme-westgate/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); +} + +:root { + --wg-font-display: "Cinzel", Georgia, "Times New Roman", serif; + --wg-font-text: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; + --wg-font-ui: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; + --wg-font-code: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; + --wg-bg: #0f0d12; + --wg-bg-deep: #09080b; + --wg-panel: #18141d; + --wg-panel-2: #110f15; + --wg-panel-3: #201924; + --wg-plum: #2a1222; + --wg-plum-soft: #3a1830; + --wg-gold: #c2a35a; + --wg-gold-soft: #a8893f; + --wg-red: #8e3438; + --wg-text: #e6e0d6; + --wg-text-soft: #b9b2a6; + --wg-text-muted: #9a9086; + --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-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-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); + --wg-ledger-ink: #d8c28a; + --wg-ledger-ink-muted: #a99d8f; + --wg-ledger-stamp: #a84a4e; + --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-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)); +} + +::selection { + background: rgba(194, 163, 90, 0.32); + color: #fff4dd; +} diff --git a/scss/westgate/_topics.scss b/scss/westgate/_topics.scss new file mode 100644 index 0000000..1076d8e --- /dev/null +++ b/scss/westgate/_topics.scss @@ -0,0 +1,403 @@ +body.template-category .category-header { + padding: 1rem; +} + +body.template-category .category-header .icon { + border-radius: 6px !important; + box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.2), 0 8px 18px rgba(0, 0, 0, 0.28); +} + +body.template-category .category-header h1 { + color: var(--wg-text); + text-transform: uppercase; +} + +body.template-category .category-header .description { + color: var(--wg-text-muted) !important; +} + +.topic-list-header { + background: transparent !important; +} + +.topic-list-header > .card { + padding: 0.55rem !important; + background: rgba(18, 15, 22, 0.78) !important; + border-color: var(--wg-ledger-border) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important; +} + +.topic-list-header .btn { + background: transparent !important; + border-color: rgba(194, 163, 90, 0.14) !important; + color: var(--wg-text-soft) !important; + font-family: var(--wg-font-ui); +} + +.topic-list-header .btn:hover, +.topic-list-header .btn:focus { + background: rgba(194, 163, 90, 0.075) !important; + border-color: rgba(194, 163, 90, 0.26) !important; + color: var(--wg-text) !important; +} + +ul[component="category"] { + display: grid; + gap: 0.85rem; + padding: 0 !important; + background: transparent !important; + border: 0 !important; + box-shadow: none !important; +} + +li[component="category/topic"] { + position: relative; + isolation: isolate; + margin: 0 !important; + padding: 0.95rem 1rem !important; + overflow: hidden; + background: + linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)), + linear-gradient(to right, rgba(194, 163, 90, 0.08), transparent 5.25rem), + 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-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; +} + +li[component="category/topic"]:not(.unread) { + background: + linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.026) calc(100% - 1px)), + linear-gradient(to right, rgba(194, 163, 90, 0.024), transparent 5.25rem), + linear-gradient(100deg, rgba(24, 17, 25, 0.28) 0%, rgba(14, 13, 18, 0.91) 42%, rgba(9, 8, 12, 0.95) 100%) !important; + border-color: rgba(194, 163, 90, 0.085) !important; + border-left-color: rgba(194, 163, 90, 0.12) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014), inset 0 -1px 0 rgba(0, 0, 0, 0.36) !important; +} + +li[component="category/topic"]:not(.unread) .avatar, +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; + top: 0; + right: 0; + left: 0; + height: 1px; + background: linear-gradient(to right, rgba(194, 163, 90, 0.28), rgba(194, 163, 90, 0.05), transparent); + pointer-events: none; +} + +li[component="category/topic"].unread:nth-child(even) { + background: + linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.055) calc(100% - 1px)), + linear-gradient(to right, rgba(216, 194, 138, 0.09), transparent 5.25rem), + var(--wg-ledger-panel) !important; + background-size: 100% 1.78rem, auto, auto; +} + +li[component="category/topic"]:hover { + border-color: rgba(194, 163, 90, 0.18) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), inset 0 0 16px rgba(120, 36, 84, 0.07), 0 8px 18px rgba(0, 0, 0, 0.2) !important; +} + +li[component="category/topic"].unread { + background: + linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.052) calc(100% - 1px)), + linear-gradient(to right, rgba(216, 194, 138, 0.085), transparent 5.65rem), + 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; +} + +li[component="category/topic"].pinned { + background: + linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.045) calc(100% - 1px)), + linear-gradient(90deg, rgba(194, 163, 90, 0.075), transparent 5.75rem), + var(--wg-ledger-panel) !important; + border-left-color: rgba(216, 194, 138, 0.44) !important; + box-shadow: + var(--wg-ledger-shadow), + inset 0 -1px 0 rgba(216, 194, 138, 0.055) !important; +} + +li[component="category/topic"].pinned:not(.unread) { + background: + linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.036) calc(100% - 1px)), + linear-gradient(90deg, rgba(122, 101, 45, 0.09), transparent 5.75rem), + linear-gradient(100deg, rgba(28, 22, 26, 0.36), rgba(13, 12, 17, 0.94)) !important; + border-color: rgba(194, 163, 90, 0.12) !important; + border-left-color: rgba(194, 163, 90, 0.28) !important; +} + +li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.pinned)) { + margin-bottom: 0.85rem !important; +} + +li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.pinned))::after { + top: auto; + bottom: -0.48rem; + left: 0.25rem; + right: 0.25rem; + height: 1px; + background: + linear-gradient(to right, transparent, rgba(216, 194, 138, 0.22), rgba(142, 52, 56, 0.1), transparent); +} + +li[component="category/topic"].locked { + background: + linear-gradient(to bottom, transparent calc(100% - 1px), rgba(150, 72, 78, 0.04) calc(100% - 1px)), + linear-gradient(90deg, rgba(93, 47, 54, 0.11), transparent 5.75rem), + var(--wg-ledger-panel) !important; + border-color: rgba(168, 74, 78, 0.18) !important; + 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; +} + +li[component="category/topic"].locked:not(.unread) { + background: + linear-gradient(to bottom, transparent calc(100% - 1px), rgba(150, 72, 78, 0.034) calc(100% - 1px)), + linear-gradient(90deg, rgba(82, 39, 46, 0.1), transparent 5.75rem), + linear-gradient(100deg, rgba(24, 16, 21, 0.38), rgba(11, 10, 14, 0.95)) !important; + border-color: rgba(168, 74, 78, 0.14) !important; +} + +li[component="category/topic"].locked.pinned { + background: + linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)), + linear-gradient(90deg, rgba(168, 74, 78, 0.1), rgba(194, 163, 90, 0.065) 4.4rem, transparent 7rem), + var(--wg-ledger-panel) !important; + border-color: rgba(168, 74, 78, 0.2) !important; + 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; +} + +li[component="category/topic"].pinned::after, +li[component="category/topic"].locked::after { + height: 2px; +} + +li[component="category/topic"].pinned [component="topic/pinned"] { + background: rgba(93, 78, 32, 0.34) !important; + border-color: rgba(216, 194, 138, 0.28) !important; + color: var(--wg-ledger-ink) !important; +} + +li[component="category/topic"].locked [component="topic/locked"] { + background: rgba(72, 31, 38, 0.38) !important; + border-color: rgba(168, 74, 78, 0.32) !important; + color: #d7aaa5 !important; +} + +li[component="category/topic"].locked.pinned [component="topic/pinned"], +li[component="category/topic"].locked.pinned [component="topic/locked"] { + border-style: double !important; +} + +li[component="category/topic"] h3[component="topic/header"], +li[component="category/topic"] .title { + color: #ded5ca !important; + font-size: 1.15rem !important; + line-height: 1.2; + text-shadow: none; +} + +ul.topics-list li[component="category/topic"].unread .title, +ul[component="category"] li[component="category/topic"].unread .title { + color: #f0e7da !important; + text-shadow: 0 0 7px rgba(216, 194, 138, 0.045); +} + +ul.topics-list li[component="category/topic"]:not(.unread) .title, +ul[component="category"] li[component="category/topic"]:not(.unread) .title { + color: #bdb4a8 !important; +} + +li[component="category/topic"] h3[component="topic/header"] a, +li[component="category/topic"] .title a, +li[component="category/topic"].unread h3[component="topic/header"] a.text-reset, +li[component="category/topic"].unread .title a.text-reset { + --bs-link-color-rgb: 222, 213, 202; + color: inherit !important; + text-decoration: none; +} + +li[component="category/topic"]:hover h3[component="topic/header"] a, +li[component="category/topic"]:hover .title a { + color: #efe7da !important; +} + +li[component="category/topic"] .badge, +.topic-info .badge, +a[component="topic/category"] { + position: relative; + background: + linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(8, 7, 10, 0.2)) !important; + border-color: rgba(194, 163, 90, 0.18) !important; + border-radius: 3px !important; + box-shadow: + inset 0 1px 0 rgba(255, 238, 190, 0.055), + inset 0 -1px 0 rgba(0, 0, 0, 0.3); + color: var(--wg-ledger-ink-muted) !important; + font-family: var(--wg-font-ui); + font-size: 0.72rem; + line-height: 1.15; + padding: 0.18rem 0.38rem; + text-decoration: none !important; +} + +li[component="category/topic"] [component="topic/labels"] .badge { + letter-spacing: 0.015em; + text-transform: uppercase; +} + +li[component="category/topic"] [component="topic/labels"] .badge i { + color: var(--wg-ledger-ink); + margin-right: 0.12rem; + opacity: 0.86; +} + +li[component="category/topic"] [component="topic/watched"] { + background: linear-gradient(to bottom, rgba(59, 72, 50, 0.25), rgba(8, 7, 10, 0.2)) !important; + border-color: rgba(143, 166, 100, 0.22) !important; + color: #b7c59d !important; +} + +li[component="category/topic"] [component="topic/ignored"], +li[component="category/topic"] [component="topic/moved"] { + background: linear-gradient(to bottom, rgba(72, 67, 58, 0.22), rgba(8, 7, 10, 0.18)) !important; + border-color: rgba(169, 157, 143, 0.16) !important; + color: #aaa095 !important; +} + +li[component="category/topic"] [component="topic/scheduled"] { + background: linear-gradient(to bottom, rgba(70, 56, 90, 0.24), rgba(8, 7, 10, 0.2)) !important; + border-color: rgba(160, 135, 190, 0.2) !important; + color: #c0aed0 !important; +} + +li[component="category/topic"] .tag, +li[component="category/topic"] .tag-item, +.tag-list .tag { + background: + linear-gradient(to bottom, rgba(255, 241, 196, 0.026), rgba(8, 7, 10, 0.2)) !important; + border-color: rgba(194, 163, 90, 0.22) !important; + border-left: 1px solid rgba(216, 194, 138, 0.32) !important; + color: #cdbb8b !important; + display: inline-flex; + align-items: center; + font-family: var(--wg-font-ui); + font-size: 0.72rem; + font-weight: 500 !important; + letter-spacing: 0; + line-height: 1.15; + min-height: 1.38rem; + padding: 0.22rem 0.48rem; + text-transform: none; +} + +li[component="category/topic"] [component="topic/tags"] a { + text-decoration: none !important; +} + +li[component="category/topic"] .tag::before, +li[component="category/topic"] .tag-item::before, +.tag-list .tag::before { + content: none !important; +} + +li[component="category/topic"] [component="topic/select"] { + width: 1.15rem; + height: 1.15rem; + display: inline-flex; + align-items: center; + justify-content: center; + background: + linear-gradient(to bottom, rgba(255, 241, 196, 0.045), rgba(8, 7, 10, 0.28)); + border: 1px solid rgba(194, 163, 90, 0.22); + border-radius: 3px; + box-shadow: + inset 0 1px 0 rgba(255, 238, 190, 0.06), + 0 0 0 1px rgba(0, 0, 0, 0.3); + color: var(--wg-ledger-ink-muted) !important; + font-size: 0.72rem; +} + +li[component="category/topic"] [component="topic/select"]:hover, +li[component="category/topic"] [component="topic/select"]:focus { + border-color: rgba(216, 194, 138, 0.42); + color: var(--wg-ledger-ink) !important; +} + +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; +} + +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, +li[component="category/topic"] .meta.stats .text-muted, +li[component="category/topic"] [component="topic/teaser"], +li[component="category/topic"] [component="topic/teaser"] .post-content { + color: var(--wg-text-muted) !important; +} + +li[component="category/topic"] .meta.stats .text-xs, +li[component="category/topic"] .meta.stats .text-muted { + font-family: var(--wg-font-ui); +} + +li[component="category/topic"] [component="topic/teaser"] .lastpost { + background: transparent !important; + border-left-color: rgba(194, 163, 90, 0.42) !important; + color: var(--wg-ledger-ink-muted); +} + +li[component="category/topic"] [component="topic/teaser"] .permalink, +li[component="category/topic"] [component="topic/teaser"] .timeago { + color: var(--wg-ledger-ink-muted) !important; + font-family: var(--wg-font-ui); +} + +.topic-thumbs .topic-thumb { + background: rgba(255, 255, 255, 0.025) !important; + border: 1px solid rgba(194, 163, 90, 0.12); +} diff --git a/templates/categories.tpl b/templates/categories.tpl new file mode 100644 index 0000000..a8747cd --- /dev/null +++ b/templates/categories.tpl @@ -0,0 +1,29 @@ +
+ {{{ each widgets.header }}} + {{widgets.header.html}} + {{{ end }}} +
+
+
+ {{{ if pagination.pages.length }}} +
+ {{{ end }}} + + + +
+
+ {{{ each widgets.sidebar }}} + {{widgets.sidebar.html}} + {{{ end }}} +
+
+
+ {{{ each widgets.footer }}} + {{widgets.footer.html}} + {{{ end }}} +
diff --git a/templates/partials/categories/children.tpl b/templates/partials/categories/children.tpl new file mode 100644 index 0000000..bb8abca --- /dev/null +++ b/templates/partials/categories/children.tpl @@ -0,0 +1,12 @@ + diff --git a/templates/partials/categories/item.tpl b/templates/partials/categories/item.tpl new file mode 100644 index 0000000..bbe649c --- /dev/null +++ b/templates/partials/categories/item.tpl @@ -0,0 +1,71 @@ +
  • + + +
    +
    + {buildCategoryIcon(@value, "40px", "rounded-1")} +
    +
    +

    + +

    + {{{ if ./descriptionParsed }}} +
    + {./descriptionParsed} +
    + {{{ end }}} + {{{ if !./link }}} +
    + + + {humanReadableNumber(./totalTopicCount, 0)} + + + + {humanReadableNumber(./totalPostCount, 0)} + + {{{ if ./teaser }}} + + {{{ end }}} +
    + {{{ end }}} + {{{ if !config.hideSubCategories }}} + {{{ if ./children.length }}} +
      + {{{ each ./children }}} + {{{ if !./isSection }}} +
    • +
      + {buildCategoryIcon(@value, "18px", "westgate-child-icon rounded-1")} + {./name} +
      +
      • + {{{ end }}} + {{{ end }}} +
    + {{{ end }}} + {{{ end }}} +
    +
    + {{{ if !./link }}} +
    +
    +
    + {humanReadableNumber(./totalTopicCount, 0)} + [[global:topics]] + +
    +
    + {humanReadableNumber(./totalPostCount, 0)} + [[global:posts]] + +
    +
    + {{{ if !config.hideCategoryLastPost }}} +
    + +
    + {{{ end }}} +
    + {{{ end }}} +
    • diff --git a/templates/partials/categories/lastpost.tpl b/templates/partials/categories/lastpost.tpl new file mode 100644 index 0000000..23f27c2 --- /dev/null +++ b/templates/partials/categories/lastpost.tpl @@ -0,0 +1,24 @@ +
    + {{{ each ./posts }}} + {{{ if @first }}} +
    +
    + {buildAvatar(posts.user, "18px", true)} + +
    +
    + + {./content} +
    +
    + {{{ end }}} + {{{ end }}} + + {{{ if !./posts.length }}} +
    +
    + [[category:no-new-posts]] +
    +
    + {{{ end }}} +
    diff --git a/templates/partials/topics_list.tpl b/templates/partials/topics_list.tpl new file mode 100644 index 0000000..6c15f98 --- /dev/null +++ b/templates/partials/topics_list.tpl @@ -0,0 +1,131 @@ + diff --git a/theme.scss b/theme.scss index 46ade79..11bdddd 100644 --- a/theme.scss +++ b/theme.scss @@ -1,4 +1,8 @@ -// override harmony font-path -$font-path: "./plugins/nodebb-theme-westgate"; - @import "../nodebb-theme-harmony/theme"; +@import "./scss/westgate/tokens"; +@import "./scss/westgate/surfaces"; +@import "./scss/westgate/categories"; +@import "./scss/westgate/topics"; +@import "./scss/westgate/posts"; +@import "./scss/westgate/controls"; +@import "./scss/westgate/responsive"; diff --git a/yarn.lock b/yarn.lock index 2b3acb7..923497c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -186,6 +186,21 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@fontsource/cinzel@^5.2.8": + version "5.2.8" + resolved "https://registry.yarnpkg.com/@fontsource/cinzel/-/cinzel-5.2.8.tgz#3f33487cd56e3de642558af0e054a51624747599" + integrity sha512-B9WeF/jPlOJOrcXfX96cy4KfM+s1QcU2C9W2hE3azBOBzPvzFkNpBovT5JmhAeicE/s4HZWKF9LF5hmEcqlbsw== + +"@fontsource/ibm-plex-mono@^5.2.7": + version "5.2.7" + resolved "https://registry.yarnpkg.com/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.2.7.tgz#1e0ec89cef7b669c624664df018e6d1369e883f1" + integrity sha512-MKAb8qV+CaiMQn2B0dIi1OV3565NYzp3WN5b4oT6LTkk+F0jR6j0ZN+5BKJiIhffDC3rtBULsYZE65+0018z9w== + +"@fontsource/jost@^5.2.8": + version "5.2.8" + resolved "https://registry.yarnpkg.com/@fontsource/jost/-/jost-5.2.8.tgz#0a7f74b796fe7889b30a597950643583203318e0" + integrity sha512-PEK7oGJL8r+YZm6BriWhmCql9DhVYTMt0iEQbZHo8mqfIPIZo67Tm68xEIaRA0yB3wsHA7Tm66yMQDIxq3Bjqw== + "@humanwhocodes/config-array@^0.9.2": version "0.9.2" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.2.tgz#68be55c737023009dfc5fe245d51181bb6476914"