diff --git a/README.md b/README.md index f5cd842..2b42d9b 100644 --- a/README.md +++ b/README.md @@ -1,43 +1,11 @@ # Quickstart Theme for NodeBB -This repository contains all of the preparatory work for a theme based off of the [Harmony theme](https://github.com/NodeBB/nodebb-theme-harmony). If you'd like to base your theme off another supported theme instead, switch to the appropriate branch: - -* [Lavender](https://github.com/NodeBB/nodebb-theme-lavender) - -Fork it to create your own theme based off of it! - -### Some things to change - -* You should rename this theme from `quickstart` to something else. Change all instances of that word in the following files: - * `package.json` - * `plugin.json` - * `theme.json` - -### When you're done... - -Be sure to add some other metadata to the `package.json`, like this: - -``` json -"author": { - "name": "Your Name", - "email": "Your Email", - "url": "Your website" -}, -"repository": { - "type": "git", - "url": "https://github.com/{your-username}/{your-repository}" -}, -"bugs": { - "url": "https://github.com/{your-username}/{your-repository}/issues" -} -``` - Also, add a screenshot! Take a picture of your theme, and save it as "screenshot.png" in the root of your theme folder, then add this to `theme.json`: -``` json +```json "screenshot": "screenshot.png" ``` ### Credits -Material theme by [pichalite](https://github.com/pichalite). \ No newline at end of file +Material theme by [pichalite](https://github.com/pichalite). diff --git a/____bootstrap-overrides.scss b/____bootstrap-overrides.scss new file mode 100644 index 0000000..062de7f --- /dev/null +++ b/____bootstrap-overrides.scss @@ -0,0 +1,170 @@ +// ========================================================= +// WESTGATE BOOTSTRAP VARIABLE OVERRIDES FOR NODEBB +// Put this before Bootstrap/NodeBB imports that consume variables +// ========================================================= + +// --- Core palette +$white: #f5efe4; +$black: #08070a; + +$gray-100: #f0ebe2; +$gray-200: #ddd5c8; +$gray-300: #c7bcad; +$gray-400: #a99d8e; +$gray-500: #8b8074; +$gray-600: #6f665d; +$gray-700: #4d4746; +$gray-800: #1a161d; +$gray-900: #0b0a0d; + +// Accent / theme hues +$blue: #7cafc2; // muted lore blue +$indigo: #6c5a8e; +$purple: #7b4a6f; +$pink: #a06179; +$red: #9c4b4b; +$orange: #b57a45; +$yellow: #c2a35a; // signature Westgate gold +$green: #6f8c5b; +$teal: #5d8c83; +$cyan: #6f9eae; + +// --- Semantic theme colors +$primary: #c2a35a; +$secondary: #1a161d; +$success: #6f8c5b; +$info: #6f9eae; +$warning: #c2a35a; +$danger: #9c4b4b; +$light: #ddd5c8; +$dark: #0b0a0d; + +// --- Body / text / links +$body-bg: #0b0a0d; +$body-color: #e6e0d6; + +$link-color: #d8c28a; +$link-hover-color: #e0c878; + +$emphasis-color: #f0e8dc; +$secondary-color: #b9b2a6; +$tertiary-color: #9a9086; + +$headings-color: #efe7da; + +// --- Borders / surfaces +$border-color: #2a252d; +$border-color-translucent: rgba(194, 163, 90, 0.12); + +$card-bg: #17151a; +$card-cap-bg: #141219; +$card-border-color: rgba(194, 163, 90, 0.12); + +$dropdown-bg: #141219; +$dropdown-border-color: rgba(194, 163, 90, 0.14); +$dropdown-link-color: #b9b2a6; +$dropdown-link-hover-color: #efe7da; +$dropdown-link-hover-bg: #241e26; +$dropdown-link-active-color: #fff4dd; +$dropdown-link-active-bg: #2a2215; +$dropdown-header-color: #9a9086; + +$modal-content-bg: #141219; +$modal-content-border-color: rgba(194, 163, 90, 0.14); +$popover-bg: #141219; +$popover-border-color: rgba(194, 163, 90, 0.14); +$tooltip-bg: #221c24; +$tooltip-color: #e6e0d6; + +// --- Inputs / forms +$input-bg: #110f15; +$input-color: #e6e0d6; +$input-border-color: #2a252d; +$input-placeholder-color: #8f877d; +$input-focus-bg: #151219; +$input-focus-color: #f0e8dc; +$input-focus-border-color: rgba(194, 163, 90, 0.42); +$input-group-addon-bg: #1a161d; +$input-group-addon-border-color: #2a252d; + +$form-check-input-bg: #151219; +$form-check-input-border: 1px solid rgba(194, 163, 90, 0.35); +$form-check-input-checked-bg-color: #a8893f; +$form-check-input-checked-border-color: #c2a35a; + +// --- Navs / tabs / pills +$nav-link-color: #b9b2a6; +$nav-link-hover-color: #e6e0d6; +$nav-tabs-border-color: #2a252d; +$nav-tabs-link-hover-border-color: rgba(194, 163, 90, 0.18); +$nav-tabs-link-active-color: #e0c878; +$nav-tabs-link-active-bg: #141219; +$nav-tabs-link-active-border-color: rgba(194, 163, 90, 0.24); + +$nav-pills-link-active-color: #fff4dd; +$nav-pills-link-active-bg: #473914; + +// --- Buttons +$btn-color: #b9b2a6; +$btn-border-radius: 0.45rem; +$btn-focus-box-shadow: 0 0 0 0.2rem rgba(194, 163, 90, 0.16); + +$btn-close-color: #e6e0d6; +$btn-close-opacity: 0.75; +$btn-close-hover-opacity: 1; + +// --- List groups / tables +$list-group-bg: #141219; +$list-group-border-color: rgba(194, 163, 90, 0.1); +$list-group-color: #b9b2a6; +$list-group-hover-bg: #241e26; +$list-group-action-hover-color: #efe7da; +$list-group-action-active-bg: #2a2215; +$list-group-action-active-color: #e0c878; + +$table-color: #b9b2a6; +$table-bg: transparent; +$table-border-color: rgba(194, 163, 90, 0.12); +$table-striped-bg: rgba(255, 255, 255, 0.012); +$table-hover-bg: rgba(194, 163, 90, 0.05); +$table-hover-color: #efe7da; + +// --- Alerts using your lore palette instead of stock Bootstrap tones +$primary-text-emphasis: #f0e6d8; +$secondary-text-emphasis: #c6beaf; +$success-text-emphasis: #d6e2ce; +$info-text-emphasis: #d2e4ea; +$warning-text-emphasis: #f3e3b2; +$danger-text-emphasis: #e3c2c2; +$light-text-emphasis: #4d4746; +$dark-text-emphasis: #cfc7ba; + +$primary-bg-subtle: rgba(194, 163, 90, 0.14); +$secondary-bg-subtle: rgba(26, 22, 29, 0.92); +$success-bg-subtle: rgba(111, 140, 91, 0.14); +$info-bg-subtle: rgba(111, 158, 174, 0.14); +$warning-bg-subtle: rgba(194, 163, 90, 0.14); +$danger-bg-subtle: rgba(156, 75, 75, 0.14); +$light-bg-subtle: #1a161d; +$dark-bg-subtle: #0b0a0d; + +$primary-border-subtle: rgba(194, 163, 90, 0.28); +$secondary-border-subtle: rgba(194, 163, 90, 0.1); +$success-border-subtle: rgba(111, 140, 91, 0.28); +$info-border-subtle: rgba(111, 158, 174, 0.28); +$warning-border-subtle: rgba(194, 163, 90, 0.28); +$danger-border-subtle: rgba(156, 75, 75, 0.28); +$light-border-subtle: rgba(194, 163, 90, 0.12); +$dark-border-subtle: rgba(194, 163, 90, 0.12); + +// --- Optional: make Bootstrap's theme map explicit for NodeBB components +$theme-colors: ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark +); diff --git a/____live-copy.css b/____live-copy.css new file mode 100644 index 0000000..2400347 --- /dev/null +++ b/____live-copy.css @@ -0,0 +1,2238 @@ +@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Jost:wght@400;500;600;700&display=swap"); +/* ========================================================= + WESTGATE CORE PALETTE + ========================================================= */ + +:root { + --wg-bg: #0f0d12; + --wg-panel: #141219; + --wg-panel-2: #110f15; + --wg-panel-3: #1a161d; + --wg-border: #2a252d; + --wg-border-soft: rgba(194, 163, 90, 0.1); + --wg-border-mid: rgba(194, 163, 90, 0.18); + --wg-gold: #c2a35a; + --wg-gold-soft: #a8893f; + --wg-text: #e6e0d6; + --wg-text-soft: #b9b2a6; + --wg-text-muted: #9a9086; + --wg-plum-hover: #2b232d; + --wg-chip: #231b17; +} + +/* ========================================================= + WESTGATE TYPOGRAPHY + ========================================================= */ + +:root { + --wg-font-ui: "Jost", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; + --wg-font-display: "Cinzel", Georgia, "Times New Roman", serif; + --wg-font-display-plain: "Cinzel", Georgia, "Times New Roman", serif; + --wg-font-reading: "Jost", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; +} + +body { + font-family: var(--wg-font-ui); +} + +h1, +h2, +h3, +h4, +h5 { + font-family: var(--wg-font-display); +} + +/* ========================================================= + TOOLTIPS + ========================================================= */ + +.tooltip { + background: transparent !important; + border: 0 !important; + box-shadow: none !important; + opacity: 1 !important; +} + +.tooltip-inner, +[role="tooltip"] .tooltip-inner { + background: #221c24 !important; + color: var(--wg-text) !important; + border: 1px solid rgba(194, 163, 90, 0.65) !important; + border-radius: 6px !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.04), + 0 4px 12px rgba(0, 0, 0, 0.35) !important; + padding: 0.35rem 0.55rem !important; + font-size: 0.95rem; +} + +.tooltip .tooltip-arrow, +[role="tooltip"] .tooltip-arrow { + display: none !important; +} + +/* ========================================================= + HIDE OLD BRAND / DUPLICATE PAGE TITLE + ========================================================= */ + +.navbar-brand, +[component="brand"], +.brand-container { + display: none !important; +} + +.page-title, +h1.page-title { + display: none !important; +} + +/* only hide generic h1 on NodeBB page-title contexts, not post content */ +body > main h1:not(.topic-title):not([component="post/header"]) { + display: none !important; +} + +/* ========================================================= + CUSTOM MASTHEAD + ========================================================= */ + +.westgate-masthead-link { + display: flex; + justify-content: center; + align-items: center; + + width: auto !important; + max-width: 100%; + + margin: 0.55rem auto 0.2rem; + padding: 0; + + text-decoration: none !important; + position: relative; + z-index: 20; +} + +.westgate-masthead { + display: flex; + align-items: center; + justify-content: center; + gap: 0.85rem; + width: fit-content; + min-width: 360px; + max-width: min(520px, calc(100vw - 8rem)); + margin: 0; + padding: 0.55rem 1.25rem 0.5rem; + text-align: left; + white-space: nowrap; + border: 1px solid var(--wg-border-soft); + border-bottom-color: var(--wg-border-mid); + border-radius: 6px; + background: linear-gradient(to bottom, rgba(20, 18, 25, 0.76), rgba(16, 14, 20, 0.9)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.02), + 0 8px 18px rgba(0, 0, 0, 0.18); +} + +.westgate-masthead::after { + content: ""; + position: absolute; + left: 50%; + top: calc(100% + 8px); + transform: translateX(-50%); + width: min(560px, 58vw); + height: 1px; + background: linear-gradient(to right, transparent, rgba(194, 163, 90, 0.18), transparent); +} + +.westgate-masthead__icon { + width: 48px; + height: 48px; + object-fit: contain; + flex: 0 0 auto; + display: block; + filter: drop-shadow(0 0 6px rgba(194, 163, 90, 0.16)); +} + +.westgate-masthead__text { + display: flex; + flex-direction: column; + line-height: 1; + min-width: 0; +} + +.westgate-masthead__title { + color: var(--wg-text); + font-size: 1.2rem; + font-weight: 700; + letter-spacing: 0.015em; +} + +.westgate-masthead__subtitle { + color: var(--wg-gold); + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.18em; + margin-top: 0.2rem; +} + +.westgate-masthead-link:hover .westgate-masthead { + border-color: var(--wg-border-mid); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.025), + 0 10px 22px rgba(0, 0, 0, 0.22); +} + +.westgate-masthead-link:hover .westgate-masthead__title { + color: #efe7da; +} + +.westgate-masthead-link:hover .westgate-masthead__subtitle { + color: #e0c878; +} + +/* ========================================================= + GLOBAL BUTTONS / BARS + ========================================================= */ + +.btn { + background: transparent; + border: 1px solid transparent; + color: var(--wg-text-soft); +} + +.btn:hover { + background: #241e26; + border-color: var(--wg-gold); + color: var(--wg-text); +} + +.btn-primary, +.category-tools .btn-primary, +.topic-list-header .btn-primary, +.quick-reply .btn-primary, +button[component="topic/quickreply/button"] { + background: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%) !important; + border: 1px solid #a8893f !important; + color: #f0e6d8 !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.06), + 0 2px 8px rgba(0, 0, 0, 0.22); +} + +.btn-primary:hover, +.category-tools .btn-primary:hover, +.topic-list-header .btn-primary:hover, +.quick-reply .btn-primary:hover, +button[component="topic/quickreply/button"]:hover { + background: linear-gradient(to bottom, #6a5720 0%, #53431a 100%) !important; + border-color: var(--wg-gold) !important; + color: #fff4dd !important; +} + +.topic-list-header, +.category-tools, +.btn-toolbar, +.topic-main-buttons .card, +.topic-main-buttons .card-header, +.topic-main-buttons nav, +.topic-main-buttons { + background: linear-gradient(to bottom, #19151c 0%, #15121a 100%) !important; + border: 1px solid #2f2832 !important; + border-radius: 8px; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.03), + inset 0 -1px 0 rgba(0, 0, 0, 0.35); +} + +/* ========================================================= + CATEGORY PAGE / TOPIC LIST LEDGER + ========================================================= */ + +.category-header, +.page-header { + position: relative; +} + +.category-header::after, +.page-header::after { + content: ""; + display: block; + margin-top: 0.7rem; + height: 1px; + background: linear-gradient(to right, transparent, rgba(194, 163, 90, 0.26), transparent); +} + +.category-header h1, +.page-header h1, +body.page-category .category-title { + color: var(--wg-text) !important; + font-weight: 600; + letter-spacing: 0.015em; +} + +.category-description, +.category-header .description, +.page-header .description { + color: #9f968c !important; + font-size: 0.95rem; +} + +ul[component="category"] { + position: relative; + list-style: none; + margin: 0; + padding: 0.85rem; + background: linear-gradient(to bottom, var(--wg-panel) 0%, var(--wg-panel-2) 100%) !important; + border: 1px solid var(--wg-border) !important; + border-radius: 10px; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.025), + inset 0 0 0 1px rgba(194, 163, 90, 0.03), + 0 10px 30px rgba(0, 0, 0, 0.4); + overflow: hidden; +} + +ul[component="category"]::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 3.25rem; + width: 1px; + background: rgba(194, 163, 90, 0.05); + pointer-events: none; +} + +li[component="category/topic"] { + position: relative; + padding: 1rem 0.85rem !important; + margin-bottom: 0.35rem; + border-radius: 6px; + background: transparent !important; + border-bottom: 1px solid rgba(194, 163, 90, 0.08) !important; + transition: + background 0.18s ease, + box-shadow 0.18s ease; +} + +li[component="category/topic"]:nth-child(even) { + background: rgba(255, 255, 255, 0.012) !important; +} + +li[component="category/topic"]:hover { + background: linear-gradient(to right, rgba(194, 163, 90, 0.075), rgba(194, 163, 90, 0.025) 28%, transparent 100%) !important; + box-shadow: + inset 2px 0 0 rgba(194, 163, 90, 0.42), + inset 0 1px 0 rgba(255, 255, 255, 0.02); +} + +li[component="category/topic"] h3[component="topic/header"], +li[component="category/topic"] .title, +li[component="category/topic"] .topic-title { + color: var(--wg-text) !important; + font-weight: 600; + letter-spacing: 0.02em; + font-size: 1.05rem; +} + +li[component="category/topic"] h3[component="topic/header"] a, +li[component="category/topic"] .title a, +li[component="category/topic"] .topic-title a { + color: inherit !important; + text-decoration: none; +} + +li[component="category/topic"]:hover h3[component="topic/header"] a, +li[component="category/topic"]:hover .title a, +li[component="category/topic"]:hover .topic-title a { + color: #f0e6d8 !important; +} + +li[component="category/topic"] .timeago.badge, +li[component="category/topic"] a.timeago.badge, +li[component="category/topic"] a.timeago, +li[component="category/topic"] .badge { + background: var(--wg-chip) !important; + color: #d8c28a !important; + border: 1px solid rgba(194, 163, 90, 0.2) !important; + border-radius: 999px; + text-decoration: none !important; +} + +li[component="category/topic"] .tag, +li[component="category/topic"] .tag-item { + background: rgba(106, 38, 38, 0.18) !important; + color: #d8b1b1 !important; + border: 1px solid rgba(170, 70, 70, 0.24) !important; + border-radius: 999px; +} + +li[component="category/topic"] .meta.stats { + font-variant-numeric: tabular-nums; + opacity: 0.95; +} + +li[component="category/topic"] .meta.stats > div { + background: rgba(255, 255, 255, 0.015) !important; + border: 1px solid rgba(194, 163, 90, 0.08) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); + border-radius: 2px !important; +} + +li[component="category/topic"] .meta.stats .fs-5, +li[component="category/topic"] .meta.stats .ff-secondary { + color: var(--wg-text) !important; +} + +li[component="category/topic"] .meta.stats .text-xs, +li[component="category/topic"] .meta.stats .text-muted { + color: var(--wg-text-muted) !important; +} + +li[component="category/topic"] .avatar { + box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.25); +} + +li[component="category/topic"] [component="topic/teaser"] { + opacity: 0.9; +} + +li[component="category/topic"] [component="topic/teaser"] .lastpost { + border-left-color: rgba(194, 163, 90, 0.45) !important; +} + +li[component="category/topic"] [component="topic/teaser"] .permalink, +li[component="category/topic"] [component="topic/teaser"] .post-content { + color: #a79c90 !important; +} + +li[component="category/topic"]:hover [component="topic/teaser"] { + opacity: 1; +} + +li[component="category/topic"]:hover [component="topic/teaser"] .permalink, +li[component="category/topic"]:hover [component="topic/teaser"] .post-content { + color: #c2b6a8 !important; +} + +/* empty state */ +.alert-info { + background: linear-gradient(to bottom, rgba(71, 18, 24, 0.72), rgba(48, 12, 18, 0.78)) !important; + border: 1px solid rgba(153, 58, 58, 0.45) !important; + color: #ddb8b8 !important; + border-radius: 8px; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.025), + 0 4px 12px rgba(0, 0, 0, 0.18); +} + +.alert-info strong, +.alert-info b { + color: #e8cccc !important; +} + +/* ========================================================= + TOPIC / POST VIEW + ========================================================= */ + +h1[component="post/header"], +h1[component="post/header"] .topic-title { + color: var(--wg-text) !important; + letter-spacing: 0.015em; + font-weight: 650; +} + +.topic-info .badge, +.topic-info a.badge { + background: var(--wg-chip) !important; + color: #d8c28a !important; + border: 1px solid rgba(194, 163, 90, 0.2) !important; + border-radius: 999px; + text-decoration: none !important; +} + +a[component="topic/category"] { + background: rgba(89, 179, 208, 0.18) !important; + color: #b9e3ee !important; + border-color: rgba(89, 179, 208, 0.35) !important; +} + +ul[component="topic"].posts { + position: relative; + padding-top: 0.5rem !important; +} + +ul[component="topic"].posts::before { + content: ""; + position: absolute; + top: 1.5rem; + bottom: 2rem; + left: 22px; + width: 1px; + background: linear-gradient(to bottom, rgba(194, 163, 90, 0.14), rgba(194, 163, 90, 0.05)); + pointer-events: none; +} + +li[component="post"] { + position: relative; + padding-bottom: 1.25rem; +} + +li[component="post"] .post-container { + background: linear-gradient(to bottom, rgba(20, 18, 25, 0.92), rgba(16, 14, 20, 0.96)) !important; + border: 1px solid rgba(194, 163, 90, 0.12); + border-radius: 10px; + padding: 0.9rem 1rem 0.7rem; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.025), + inset 0 0 0 1px rgba(194, 163, 90, 0.02), + 0 8px 22px rgba(0, 0, 0, 0.22); +} + +li[component="post"].topic-owner-post .post-container { + border-left: 2px solid rgba(194, 163, 90, 0.35); +} + +li[component="post"].self-post .post-container { + border-left: 2px solid rgba(89, 179, 208, 0.22); +} + +li[component="post"] .post-container:hover { + background: linear-gradient(to bottom, rgba(24, 21, 30, 0.96), rgba(18, 16, 22, 0.98)) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.03), + inset 2px 0 0 rgba(194, 163, 90, 0.28), + 0 10px 24px rgba(0, 0, 0, 0.28); +} + +li[component="post"] .avatar { + box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.22); +} + +li[component="post"] .bg-body.rounded-circle { + background: var(--wg-panel) !important; + box-shadow: + 0 0 0 2px var(--wg-panel), + 0 0 0 3px rgba(194, 163, 90, 0.1) !important; +} + +li[component="post"] .post-header { + margin-bottom: 0.25rem; +} + +li[component="post"] .post-header a[data-username] { + color: #d8c28a !important; + font-weight: 650; + text-decoration: none; +} + +li[component="post"] .post-header a[data-username]:hover { + color: #e0c878 !important; +} + +li[component="post"] .post-header .text-muted, +li[component="post"] .post-header .timeago { + color: #9e9489 !important; +} + +li[component="post"] .post-index { + color: #7f776d !important; + font-weight: 600; +} + +li[component="post"] .content { + color: var(--wg-text); + line-height: 1.65; + font-size: 1rem; + margin-top: 0.35rem; +} + +li[component="post"] .content h1, +li[component="post"] .content h2, +li[component="post"] .content h3, +li[component="post"] .content h4 { + color: #e8ded0; + letter-spacing: 0.01em; +} + +li[component="post"] .content a { + color: #d8c28a; +} + +li[component="post"] .content a:hover { + color: #e0c878; + text-decoration: underline; +} + +li[component="post"] .content ul, +li[component="post"] .content ol { + padding-left: 1.4rem; +} + +li[component="post"] .content blockquote { + background: rgba(35, 27, 23, 0.45); + border-left: 3px solid rgba(194, 163, 90, 0.35); + border-radius: 6px; + padding: 0.75rem 0.9rem; + color: #d9cec0; +} + +li[component="post"] .content code { + background: #1b171d; + color: #e0c878; + padding: 0.12rem 0.35rem; + border-radius: 4px; +} + +li[component="post"] .content pre { + background: #151219 !important; + border: 1px solid var(--wg-border) !important; + border-radius: 8px; +} + +li[component="post"] .post-footer { + border-bottom-color: rgba(194, 163, 90, 0.08) !important; + margin-top: 0.35rem; +} + +li[component="post"] [component="post/actions"] .btn, +li[component="post"] .post-tools .btn, +li[component="post"] .votes .btn { + color: var(--wg-text-soft); +} + +li[component="post"] [component="post/actions"] .btn:hover, +li[component="post"] .post-tools .btn:hover, +li[component="post"] .votes .btn:hover { + background: #241e26; + color: var(--wg-text); + border-color: var(--wg-gold); +} + +a[component="post/vote-count"] { + background: var(--wg-chip) !important; + color: #d8c28a !important; + border: 1px solid rgba(194, 163, 90, 0.18) !important; + border-radius: 999px; +} + +a[component="post/vote-count"][data-votes^="-"] { + color: #d7a8a8 !important; + border-color: rgba(170, 70, 70, 0.26) !important; + background: rgba(106, 38, 38, 0.16) !important; +} + +.pagination-block .scroller-thumb-icon { + background: var(--wg-gold) !important; + opacity: 0.85; +} + +.pagination-block .thumb-text, +.pagination-block .thumb-timestamp, +.pagination-block .timeago { + color: #a79c90 !important; +} + +.pagination-block .pagetop, +.pagination-block .pagebottom { + color: var(--wg-text-soft) !important; +} + +.pagination-block .pagetop:hover, +.pagination-block .pagebottom:hover { + color: var(--wg-text) !important; + background: #241e26; +} + +.quick-reply textarea, +textarea[component="topic/quickreply/text"] { + background: linear-gradient(to bottom, var(--wg-panel), var(--wg-panel-2)) !important; + border: 1px solid var(--wg-border) !important; + color: var(--wg-text) !important; + border-radius: 8px; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.025), + 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.quick-reply textarea::placeholder, +textarea[component="topic/quickreply/text"]::placeholder { + color: #8f877d !important; +} + +/* ========================================================= + WESTGATE SIDEBARS + HOMEPAGE FINAL + Clean replacement for all previous homepage/sidebar fixes + ========================================================= */ + +/* ----------------------------- + SIDEBARS + ----------------------------- */ +.layout-container > nav[component="sidebar/left"], +.layout-container > nav[component="sidebar/right"], +.offcanvas { + background: #121015 !important; + padding-top: 0.5rem; +} + +.layout-container > nav[component="sidebar/left"] { + border-right: 1px solid var(--wg-border) !important; + border-left: 0 !important; + box-shadow: inset -1px 0 0 rgba(194, 163, 90, 0.12) !important; +} + +.layout-container > nav[component="sidebar/right"] { + border-left: 1px solid var(--wg-border) !important; + border-right: 0 !important; + box-shadow: inset 1px 0 0 rgba(194, 163, 90, 0.12) !important; +} + +.layout-container > nav[component="sidebar/left"] .nav-link, +.layout-container > nav[component="sidebar/right"] .nav-link, +.offcanvas .nav-link { + margin-bottom: 0.35rem; + background: var(--wg-panel-3) !important; + border: 1px solid var(--wg-border) !important; + border-radius: 8px; + color: var(--wg-text-soft) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.03), + inset 0 -1px 0 rgba(0, 0, 0, 0.4); + transition: + background 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + box-shadow 0.2s ease; +} + +.layout-container > nav[component="sidebar/left"] .nav-link:hover, +.layout-container > nav[component="sidebar/right"] .nav-link:hover, +.offcanvas .nav-link:hover { + background: var(--wg-plum-hover) !important; + color: #f0e6d8 !important; + border-color: var(--wg-gold) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.05), + inset 0 -1px 0 rgba(0, 0, 0, 0.35), + 0 0 8px rgba(194, 163, 90, 0.18); +} + +.layout-container > nav[component="sidebar/left"] .nav-link.active, +.layout-container > nav[component="sidebar/right"] .nav-link.active, +.layout-container > nav[component="sidebar/left"] .nav-link[aria-current="page"], +.layout-container > nav[component="sidebar/right"] .nav-link[aria-current="page"], +.offcanvas .nav-link.active, +.offcanvas .nav-link[aria-current="page"] { + background: #2a2215 !important; + color: #e0c878 !important; + border-color: var(--wg-gold) !important; +} + +.layout-container > nav[component="sidebar/left"] i, +.layout-container > nav[component="sidebar/right"] i, +.offcanvas i { + color: var(--wg-gold) !important; +} + +.layout-container > nav[component="sidebar/left"] .nav-link:hover i, +.layout-container > nav[component="sidebar/right"] .nav-link:hover i, +.offcanvas .nav-link:hover i { + color: #e0c878 !important; +} + +/* ----------------------------- + HOMEPAGE CATEGORY INDEX + one shared rail only + ----------------------------- */ +ul.categories-list { + position: relative; + padding-left: 1rem; +} + +/* shared outer rail */ +ul.categories-list::before { + content: ""; + position: absolute; + top: 1.15rem; + bottom: 1.15rem; + left: 3.05rem; + width: 1px; + background: linear-gradient(to bottom, rgba(194, 163, 90, 0.16), rgba(194, 163, 90, 0.05)); + pointer-events: none; + z-index: 0; +} + +li[component="categories/category"] { + position: relative; + margin: 0 0 0.55rem 0.9rem !important; + padding: 1rem 1rem 0.95rem !important; + border-radius: 8px; + overflow: visible; + z-index: 1; + border: 1px solid rgba(194, 163, 90, 0.1) !important; + background: linear-gradient(to right, rgba(36, 18, 30, 0.18), rgba(20, 18, 25, 0.82) 18%, rgba(16, 14, 20, 0.92) 100%) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.02), + inset 0 0 28px rgba(88, 26, 52, 0.08), + 0 8px 20px rgba(0, 0, 0, 0.14); + transition: + background 0.18s ease, + border-color 0.18s ease, + box-shadow 0.18s ease; +} + +/* short branch from shared rail into card */ +li[component="categories/category"]::before { + content: ""; + position: absolute; + left: -0.9rem; + top: 1.62rem; + width: 0.9rem; + height: 1px; + background: linear-gradient(to right, rgba(194, 163, 90, 0.16), rgba(194, 163, 90, 0.08)); + pointer-events: none; +} + +/* absolutely kill any old per-card rail logic */ +li[component="categories/category"]::after { + content: none !important; +} + +li[component="categories/category"]:hover { + border-color: rgba(194, 163, 90, 0.18) !important; + background: linear-gradient(to right, rgba(60, 24, 44, 0.24), rgba(24, 21, 30, 0.92) 18%, rgba(18, 16, 22, 0.98) 100%) !important; + box-shadow: + inset 1px 0 0 rgba(194, 163, 90, 0.18), + inset 0 0 34px rgba(110, 32, 64, 0.11), + 0 10px 24px rgba(0, 0, 0, 0.22); +} + +li[component="categories/category"] .icon { + box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.18); + border-radius: 6px !important; +} + +li[component="categories/category"] h2.title { + position: relative; + color: var(--wg-text) !important; + font-weight: 600; + letter-spacing: 0.015em; + padding-bottom: 0.2rem; +} + +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.12), rgba(194, 163, 90, 0.05), transparent 92%); + pointer-events: none; +} + +ul.category-children { + margin-top: 0.45rem !important; + padding-top: 0.35rem; + border-top: 1px solid rgba(194, 163, 90, 0.08); +} + +.category-children-item > div { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.18rem 0.5rem; + background: rgba(44, 22, 34, 0.28); + border: 1px solid rgba(194, 163, 90, 0.1); + border-radius: 999px; + transition: + background 0.18s ease, + border-color 0.18s ease, + box-shadow 0.18s ease; +} + +.category-children-item > div:hover { + background: rgba(70, 30, 48, 0.38); + border-color: rgba(194, 163, 90, 0.22); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); +} + +.category-children-item a { + color: #d8c28a !important; + text-decoration: none !important; + font-weight: 600; +} + +.category-children-item a:hover { + color: #e0c878 !important; +} + +.category-children-item i.fa-caret-right { + color: #a8893f !important; +} + +li[component="categories/category"] .meta.stats > div { + background: rgba(255, 255, 255, 0.015) !important; + border: 1px solid rgba(194, 163, 90, 0.08) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); + border-radius: 2px !important; +} + +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.35) !important; +} + +li[component="categories/category"] .teaser .avatar { + box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.18); +} + +li[component="categories/category"][data-cid="9"] { + border-left: 2px solid rgba(124, 175, 194, 0.45) !important; +} +li[component="categories/category"][data-cid="10"] { + border-left: 2px solid rgba(134, 193, 185, 0.45) !important; +} +li[component="categories/category"][data-cid="15"] { + border-left: 2px solid rgba(134, 193, 185, 0.45) !important; +} +li[component="categories/category"][data-cid="6"] { + border-left: 2px solid rgba(186, 139, 175, 0.45) !important; +} +li[component="categories/category"][data-cid="7"] { + border-left: 2px solid rgba(161, 181, 108, 0.45) !important; +} +li[component="categories/category"][data-cid="8"] { + border-left: 2px solid rgba(247, 202, 136, 0.45) !important; +} +li[component="categories/category"][data-cid="20"] { + border-left: 2px solid rgba(124, 175, 194, 0.45) !important; +} +li[component="categories/category"][data-cid="21"] { + border-left: 2px solid rgba(171, 70, 66, 0.45) !important; +} + +/* WESTGATE masthead widget + home board sizing */ +[data-widget-area="header"]:has(.westgate-masthead-link) { + display: flex; + justify-content: center; + margin: 0.2rem 0 0.35rem; +} + +.westgate-masthead-link { + flex: 0 1 auto; +} + +body.template-categories #content > .row { + justify-content: center; +} + +body.template-categories #content > .row > div:first-child { + flex: 0 1 1320px; + max-width: 1320px; +} + +body.template-categories ul.categories-list { + width: 100%; + max-width: 1280px; + margin-inline: auto; +} + +@media (max-width: 767.98px) { + [data-widget-area="header"]:has(.westgate-masthead-link) { + margin-top: 0; + } + + .westgate-masthead { + min-width: 0; + width: calc(100vw - 1.5rem); + max-width: calc(100vw - 1.5rem); + } +} + +/* WESTGATE homepage ledger rail repair */ +body.template-categories ul.categories-list { + padding-left: 0 !important; +} + +body.template-categories ul.categories-list::before { + content: none !important; +} + +body.template-categories li[component="categories/category"] { + isolation: isolate; + overflow: hidden; + margin: 0 0 0.65rem 0 !important; + padding: 1rem 1rem 0.95rem !important; + border-left: 1px solid rgba(194, 163, 90, 0.1) !important; +} + +body.template-categories li[component="categories/category"] > * { + position: relative; + z-index: 1; +} + +body.template-categories li[component="categories/category"]::before { + content: "" !important; + position: absolute; + top: 0; + bottom: 0; + left: 3.25rem; + width: 1px; + background: linear-gradient( + to bottom, + transparent 0, + rgba(194, 163, 90, 0.14) 1rem, + rgba(194, 163, 90, 0.08) calc(100% - 1rem), + transparent 100% + ); + pointer-events: none; + z-index: 0; +} + +body.template-categories li[component="categories/category"]::after { + content: "" !important; + position: absolute; + top: 2.25rem; + left: 3.25rem; + width: 2.35rem; + height: 1px; + background: linear-gradient(to right, rgba(194, 163, 90, 0.22), rgba(194, 163, 90, 0.08), transparent); + pointer-events: none; + z-index: 0; +} + +body.template-categories li[component="categories/category"] .icon { + position: relative; + z-index: 2; + box-shadow: + 0 0 0 6px rgba(18, 16, 22, 0.96), + 0 0 0 7px rgba(194, 163, 90, 0.16) !important; +} + +body.template-categories li[component="categories/category"] h2.title::after { + left: 0; + right: 0; + bottom: -0.5rem; + background: linear-gradient(to right, rgba(194, 163, 90, 0.16), rgba(194, 163, 90, 0.06) 55%, transparent 94%) !important; +} + +body.template-categories ul.category-children { + border-top: 0 !important; + padding-top: 0.55rem !important; + margin-top: 0.45rem !important; +} + +body.template-categories li[component="categories/category"] .meta.stats > div { + border-color: rgba(194, 163, 90, 0.09) !important; +} + +/* WESTGATE velvet gradient unification */ +:root { + --wg-velvet-panel: linear-gradient( + 100deg, + rgba(42, 18, 34, 0.42) 0%, + rgba(25, 22, 31, 0.94) 22%, + rgba(18, 16, 23, 0.98) 58%, + rgba(14, 13, 18, 0.96) 100% + ); + --wg-velvet-panel-hover: linear-gradient( + 100deg, + rgba(58, 24, 48, 0.52) 0%, + rgba(30, 25, 38, 0.98) 24%, + rgba(20, 18, 27, 1) 62%, + rgba(15, 14, 20, 0.98) 100% + ); + --wg-velvet-border: rgba(194, 163, 90, 0.13); + --wg-velvet-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), inset 0 0 34px rgba(96, 32, 68, 0.1), 0 10px 26px rgba(0, 0, 0, 0.22); +} + +.westgate-masthead, +.topic-list-header, +.category-tools, +.topic-main-buttons, +.topic-main-buttons .card, +.topic-main-buttons .card-header, +.topic-main-buttons nav, +body.template-categories 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-color: var(--wg-velvet-border) !important; + box-shadow: var(--wg-velvet-shadow) !important; +} + +.westgate-masthead:hover, +body.template-categories 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.2) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.035), + inset 0 0 38px rgba(120, 36, 84, 0.13), + 0 12px 30px rgba(0, 0, 0, 0.28) !important; +} + +body.template-categories li[component="categories/category"] { + border-left: 1px solid var(--wg-velvet-border) !important; +} + +body.template-categories li[component="categories/category"]::before { + left: 3.25rem; + background: linear-gradient( + to bottom, + transparent 0, + rgba(194, 163, 90, 0.16) 0.95rem, + rgba(194, 163, 90, 0.07) calc(100% - 0.95rem), + transparent 100% + ) !important; +} + +body.template-categories li[component="categories/category"]::after { + content: none !important; +} + +body.template-categories li[component="categories/category"] h2.title::after { + left: 0; + right: 0; + bottom: -0.48rem; + opacity: 0.65; + background: linear-gradient(to right, rgba(194, 163, 90, 0.13), rgba(194, 163, 90, 0.045) 58%, transparent 94%) !important; +} + +body.template-categories ul.category-children { + border-top: 0 !important; +} + +li[component="category/topic"] .meta.stats > div, +body.template-categories li[component="categories/category"] .meta.stats > div { + background: rgba(255, 255, 255, 0.018) !important; + border-color: rgba(194, 163, 90, 0.085) !important; +} + +li[component="post"].topic-owner-post .post-container, +li[component="post"].self-post .post-container { + border-left-color: rgba(194, 163, 90, 0.24) !important; +} + +/* WESTGATE topic list full velvet panel */ +body.template-category ul[component="category"] { + padding: 0 !important; + background: transparent !important; + border: 0 !important; + border-radius: 0 !important; + box-shadow: none !important; + overflow: visible !important; +} + +body.template-category ul[component="category"]::before { + content: none !important; +} + +body.template-category li[component="category/topic"] { + overflow: hidden; + isolation: isolate; + margin-bottom: 0.65rem !important; + padding: 1rem !important; + border: 1px solid var(--wg-velvet-border) !important; + border-radius: 8px !important; + background: var(--wg-velvet-panel) !important; + box-shadow: var(--wg-velvet-shadow) !important; +} + +body.template-category li[component="category/topic"]:nth-child(even) { + background: var(--wg-velvet-panel) !important; +} + +body.template-category li[component="category/topic"]:hover { + background: var(--wg-velvet-panel-hover) !important; + border-color: rgba(194, 163, 90, 0.2) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.035), + inset 0 0 38px rgba(120, 36, 84, 0.13), + 0 12px 30px rgba(0, 0, 0, 0.28) !important; +} + +body.template-category li[component="category/topic"] > div { + background: transparent !important; +} + +body.template-category li[component="category/topic"] .meta.stats > div { + background: rgba(255, 255, 255, 0.018) !important; + border: 1px solid rgba(194, 163, 90, 0.085) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important; +} + +body.template-category li[component="category/topic"] [component="topic/teaser"] .lastpost { + background: transparent !important; +} + +/* WESTGATE header order and category identity panel */ +body.template-category #content, +body.template-topic #content { + display: flex; + flex-direction: column; +} + +body.template-category #content > [data-widget-area="header"], +body.template-topic #content > [data-widget-area="header"] { + order: -30; + display: flex; + justify-content: center; + margin: 0.1rem 0 0.75rem; +} + +body.template-category #content > .breadcrumb, +body.template-topic #content > .breadcrumb { + order: -20; + width: min(100%, 1280px); + margin-inline: auto; + padding: 0.35rem 0.65rem; + border: 1px solid rgba(194, 163, 90, 0.08); + border-radius: 6px; + background: linear-gradient(90deg, rgba(18, 16, 23, 0.42), rgba(23, 20, 29, 0.24), transparent 82%); +} + +body.template-category #content > .category-header { + order: -10; +} + +body.template-category .category-header { + width: min(100%, 1280px); + margin-inline: auto; + display: grid !important; + grid-template-columns: auto minmax(0, 1fr) auto; + grid-template-areas: + "icon title stats" + "icon desc desc"; + align-items: center; + gap: 0.45rem 1rem !important; + padding: 0.9rem 1rem !important; + border: 1px solid var(--wg-velvet-border); + border-radius: 8px; + background: var(--wg-velvet-panel) !important; + box-shadow: var(--wg-velvet-shadow) !important; +} + +body.template-category .category-header::after { + content: none !important; +} + +body.template-category .category-header > .d-flex:first-child { + display: contents !important; +} + +body.template-category .category-header .icon { + grid-area: icon; + width: 46px !important; + height: 46px !important; + font-size: 23px !important; + box-shadow: + 0 0 0 5px rgba(18, 16, 22, 0.96), + 0 0 0 6px rgba(194, 163, 90, 0.14) !important; +} + +body.template-category .category-header > .d-flex:first-child > .d-flex { + display: contents !important; +} + +body.template-category .category-header h1 { + grid-area: title; + margin: 0 !important; + font-size: 1.45rem !important; + line-height: 1.15; +} + +body.template-category .category-header h1 + .d-flex { + grid-area: stats; + justify-content: flex-end; + gap: 0.4rem !important; +} + +body.template-category .category-header .badge { + background: rgba(255, 255, 255, 0.018) !important; + border-color: rgba(194, 163, 90, 0.12) !important; + color: var(--wg-text-soft) !important; + border-radius: 5px; +} + +body.template-category .category-header .description { + grid-area: desc; + width: auto !important; + margin: 0 !important; + color: var(--wg-text-muted) !important; +} + +body.template-category .category-header .description p { + margin: 0 !important; +} + +body.template-category #content > .row.flex-fill, +body.template-topic #content > .flex-fill { + order: 0; +} + +@media (max-width: 767.98px) { + body.template-category .category-header { + grid-template-columns: auto minmax(0, 1fr); + grid-template-areas: + "icon title" + "icon stats" + "desc desc"; + } + + body.template-category .category-header h1 + .d-flex { + justify-content: flex-start; + } +} + +/* WESTGATE typography */ +.westgate-masthead__title, +.category-header h1, +h1[component="post/header"] .topic-title, +li[component="categories/category"] h2.title, +li[component="category/topic"] h3[component="topic/header"], +li[component="category/topic"] .topic-title, +.page-header h1, +.category-title { + font-family: var(--wg-font-display) !important; + font-weight: 600 !important; + letter-spacing: 0.036em !important; + text-shadow: + 0 1px 0 rgba(0, 0, 0, 0.9), + 0 0 10px rgba(104, 32, 76, 0.18); +} + +.westgate-masthead__title { + font-size: 1.08rem; + letter-spacing: 0.042em !important; +} + +.westgate-masthead__subtitle, +.breadcrumb, +.badge, +.btn, +.topic-list-header, +.category-tools, +.topic-main-buttons, +.meta.stats, +.timeago, +.category-children-item a, +.dropdown-menu, +.form-control, +.nav-link, +.pagination, +.composer { + font-family: var(--wg-font-ui) !important; +} + +.westgate-masthead__subtitle { + letter-spacing: 0.24em; + font-weight: 600; +} + +li[component="post"] .content, +li[component="post"] .content p, +li[component="post"] .content li, +li[component="post"] .content blockquote, +.composer .preview, +.topic-text, +.post-content { + font-family: var(--wg-font-reading) !important; + font-size: 1.02rem; + line-height: 1.68; + letter-spacing: 0.005em; +} + +li[component="post"] .content h1, +li[component="post"] .content h2, +li[component="post"] .content h3, +li[component="post"] .content h4 { + font-family: var(--wg-font-display-plain) !important; + font-weight: 600; + letter-spacing: 0.03em; +} + +.category-header .description, +li[component="categories/category"] .teaser, +li[component="category/topic"] [component="topic/teaser"] .post-content { + font-family: var(--wg-font-reading) !important; + font-size: 0.98rem; + line-height: 1.45; +} + +li[component="post"] .post-header, +li[component="post"] .post-footer, +li[component="post"] [component="post/actions"], +li[component="post"] .votes, +[component="topic/labels"], +[component="topic/stats"] { + font-family: var(--wg-font-ui) !important; +} + +::selection { + background: rgba(194, 163, 90, 0.32); + color: #fff4dd; +} + +/* WESTGATE account settings readability */ +body.template-account-settings .account, +body.template-account-settings .account-content { + color: var(--wg-text-soft) !important; +} + +body.template-account-settings .account-content > .position-sticky { + background: linear-gradient(100deg, rgba(42, 18, 34, 0.92), rgba(18, 16, 23, 0.98)) !important; + border: 1px solid rgba(194, 163, 90, 0.14); + border-radius: 8px; + box-shadow: var(--wg-velvet-shadow, 0 10px 26px rgba(0, 0, 0, 0.22)); + color: var(--wg-text) !important; + padding: 0.55rem 0.7rem; + z-index: 5; +} + +body.template-account-settings .account-content h3, +body.template-account-settings .account-content h6, +body.template-account-settings .account-content .fw-bold, +body.template-account-settings .account-content .fw-semibold { + color: var(--wg-text) !important; +} + +body.template-account-settings .account-content label, +body.template-account-settings .account-content .form-label, +body.template-account-settings .account-content .form-check-label, +body.template-account-settings .account-content .table, +body.template-account-settings .account-content .table th, +body.template-account-settings .account-content .table td { + color: var(--wg-text-soft) !important; +} + +body.template-account-settings .account-content .form-text, +body.template-account-settings .account-content .text-muted, +body.template-account-settings .account-content .text-secondary, +body.template-account-settings .account-content small { + color: var(--wg-text-muted) !important; +} + +body.template-account-settings .account-content hr, +body.template-account-settings .account-content .table > :not(caption) > * > * { + border-color: rgba(194, 163, 90, 0.14) !important; +} + +body.template-account-settings .account-content .form-control, +body.template-account-settings .account-content .form-select { + background-color: rgba(255, 255, 255, 0.025) !important; + border-color: rgba(194, 163, 90, 0.18) !important; + color: var(--wg-text) !important; +} + +body.template-account-settings .account-content .form-control:focus, +body.template-account-settings .account-content .form-select:focus { + 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; +} + +body.template-account-settings .account-content .form-control::placeholder { + color: rgba(185, 178, 166, 0.62) !important; +} + +body.template-account-settings .account-content .form-check-input { + background-color: rgba(255, 255, 255, 0.035) !important; + border-color: rgba(194, 163, 90, 0.38) !important; +} + +body.template-account-settings .account-content .form-check-input:checked { + background-color: var(--wg-gold-soft) !important; + border-color: var(--wg-gold) !important; +} + +body.template-account-settings [component="notification/table"] { + --bs-table-bg: transparent; + --bs-table-color: var(--wg-text-soft); + --bs-table-border-color: rgba(194, 163, 90, 0.12); + color: var(--wg-text-soft) !important; +} + +body.template-account-settings [component="notification/setting"] label { + color: #cfc6b8 !important; +} + +body.template-account-settings [component="notification/setting"]:hover { + background: rgba(194, 163, 90, 0.045) !important; +} + +body.template-account-settings [component="notification/table"] .text-primary { + color: var(--wg-gold) !important; +} + +body.template-account-settings [component="notification/table"] .text-secondary { + color: #7f8b96 !important; +} + +body.template-account-settings .account .btn-ghost { + color: var(--wg-text-soft) !important; +} + +body.template-account-settings .account .btn-ghost span, +body.template-account-settings .account .btn-ghost .text-xs { + color: var(--wg-text-muted) !important; +} + +body.template-account-settings .account .btn-ghost:hover, +body.template-account-settings .account .btn-ghost:focus, +body.template-account-settings .account .btn-ghost.active { + background: rgba(194, 163, 90, 0.11) !important; + border-color: rgba(194, 163, 90, 0.22) !important; + color: var(--wg-text) !important; +} + +/* WESTGATE account pages widget cleanup */ +body[class*="template-account-"] .account > [data-widget-area="header"] { + display: none !important; +} + +/* WESTGATE masthead scale and rhythm */ +.westgate-masthead-link { + margin: 0.35rem auto 0.45rem !important; +} + +.westgate-masthead { + gap: 1rem !important; + min-width: min(420px, calc(100vw - 2rem)) !important; + max-width: min(640px, calc(100vw - 7rem)) !important; + padding: 0.72rem 1.55rem 0.66rem !important; +} + +.westgate-masthead::after { + top: calc(100% + 7px) !important; + width: min(620px, 62vw) !important; +} + +.westgate-masthead__icon { + width: 54px !important; + height: 54px !important; +} + +.westgate-masthead__title { + font-size: 1.28rem !important; +} + +.westgate-masthead__subtitle { + font-size: 0.74rem !important; + margin-top: 0.23rem !important; +} + +body.template-categories #content > [data-widget-area="header"], +body.template-category #content > [data-widget-area="header"], +body.template-topic #content > [data-widget-area="header"] { + margin-bottom: 0.45rem !important; +} + +@media (max-width: 767.98px) { + .westgate-masthead { + width: min(100%, calc(100vw - 2rem)) !important; + min-width: 0 !important; + max-width: calc(100vw - 2rem) !important; + padding: 0.58rem 0.9rem 0.54rem !important; + } + + .westgate-masthead__icon { + width: 44px !important; + height: 44px !important; + } + + .westgate-masthead__title { + font-size: 1rem !important; + } + + .westgate-masthead__subtitle { + font-size: 0.64rem !important; + } +} + +/* WESTGATE masthead actual width adjustment */ +.westgate-masthead { + width: min(760px, calc(100vw - 7rem)) !important; + max-width: min(760px, calc(100vw - 7rem)) !important; + min-width: 0 !important; + justify-content: center !important; + padding: 0.82rem 1.7rem 0.76rem !important; +} + +.westgate-masthead__icon { + width: 58px !important; + height: 58px !important; +} + +.westgate-masthead__title { + font-size: 1.38rem !important; +} + +.westgate-masthead__subtitle { + font-size: 0.78rem !important; +} + +.westgate-masthead-link { + margin-bottom: 0.25rem !important; +} + +.westgate-masthead::after { + width: min(720px, 66vw) !important; +} + +@media (max-width: 767.98px) { + .westgate-masthead { + width: min(100%, calc(100vw - 2rem)) !important; + max-width: calc(100vw - 2rem) !important; + padding: 0.62rem 0.9rem 0.58rem !important; + } +} + +/* WESTGATE masthead content-width alignment */ +body.template-categories [data-widget-area="header"]:has(.westgate-masthead-link), +body.template-category #content > [data-widget-area="header"]:has(.westgate-masthead-link), +body.template-topic #content > [data-widget-area="header"]:has(.westgate-masthead-link) { + width: min(100%, 1280px) !important; + max-width: 1280px !important; + margin-inline: auto !important; +} + +body.template-categories .westgate-masthead-link, +body.template-category .westgate-masthead-link, +body.template-topic .westgate-masthead-link { + width: 100% !important; + max-width: 100% !important; +} + +body.template-categories .westgate-masthead, +body.template-category .westgate-masthead, +body.template-topic .westgate-masthead { + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + justify-content: center !important; +} + +body.template-categories .westgate-masthead::after, +body.template-category .westgate-masthead::after, +body.template-topic .westgate-masthead::after { + width: min(100%, 1180px) !important; +} + +@media (max-width: 767.98px) { + body.template-categories [data-widget-area="header"]:has(.westgate-masthead-link), + body.template-category #content > [data-widget-area="header"]:has(.westgate-masthead-link), + body.template-topic #content > [data-widget-area="header"]:has(.westgate-masthead-link) { + width: calc(100vw - 1.5rem) !important; + max-width: calc(100vw - 1.5rem) !important; + } +} + +/* WESTGATE header widget lane */ +body:not([class*="template-account-"]) #content > [data-widget-area="header"] { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 0.75rem !important; + width: min(100%, 1280px) !important; + max-width: 1280px !important; + margin: 0.1rem auto 0.85rem !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > script, +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > style { + display: none !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link { + order: -20 !important; + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > :not(.westgate-masthead-link):not(script):not(style) { + order: 10 !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + padding: 0.9rem 1rem !important; + background: var(--wg-velvet-panel) !important; + border: 1px solid var(--wg-velvet-border) !important; + border-radius: 8px !important; + box-shadow: var(--wg-velvet-shadow) !important; + color: var(--wg-text-soft) !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > :not(.westgate-masthead-link):not(script):not(style):hover { + background: var(--wg-velvet-panel-hover) !important; + border-color: rgba(194, 163, 90, 0.2) !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics-list { + display: grid !important; + grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)) !important; + gap: 0.75rem !important; + margin: 0 !important; + padding: 0 !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics { + min-width: 0 !important; + padding: 0.65rem 0.75rem !important; + background: rgba(255, 255, 255, 0.018) !important; + border: 1px solid rgba(194, 163, 90, 0.09) !important; + border-radius: 6px !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics hr { + display: none !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .topic-title, +body:not([class*="template-account-"]) #content > [data-widget-area="header"] a:not(.westgate-masthead-link) { + color: var(--wg-text) !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .text-muted, +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .btn-link { + color: var(--wg-text-muted) !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .westgate-masthead { + width: 100% !important; + max-width: 100% !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .westgate-masthead::after { + content: none !important; +} + +@media (max-width: 767.98px) { + body:not([class*="template-account-"]) #content > [data-widget-area="header"] { + width: calc(100vw - 1.5rem) !important; + max-width: calc(100vw - 1.5rem) !important; + gap: 0.55rem !important; + } + + body:not([class*="template-account-"]) #content > [data-widget-area="header"] > :not(.westgate-masthead-link):not(script):not(style) { + padding: 0.75rem !important; + } +} + +/* WESTGATE header lane separator and tighter rhythm */ +body:not([class*="template-account-"]) #content > [data-widget-area="header"] { + gap: 0.45rem !important; + margin: 0.1rem auto 0.6rem !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link { + position: relative !important; + padding-bottom: 0.42rem !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link::after { + content: "" !important; + position: absolute !important; + left: 50% !important; + bottom: 0 !important; + transform: translateX(-50%) !important; + width: min(760px, 72%) !important; + height: 1px !important; + background: linear-gradient( + to right, + transparent, + rgba(194, 163, 90, 0.18) 18%, + rgba(224, 200, 120, 0.46) 50%, + rgba(194, 163, 90, 0.18) 82%, + transparent + ) !important; + box-shadow: 0 0 10px rgba(194, 163, 90, 0.1) !important; + pointer-events: none !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > :not(.westgate-masthead-link):not(script):not(style) { + margin-top: 0 !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics-list { + gap: 0.6rem !important; +} + +@media (max-width: 767.98px) { + body:not([class*="template-account-"]) #content > [data-widget-area="header"] { + gap: 0.35rem !important; + } + + body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link { + padding-bottom: 0.34rem !important; + } + + body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link::after { + width: min(92%, 560px) !important; + } +} + +/* WESTGATE widget panels and sidebar repair */ +body:not([class*="template-account-"]) #content > [data-widget-area="header"] { + gap: 0.68rem !important; + margin-bottom: 0.85rem !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link { + padding-bottom: 0.58rem !important; +} + +body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)) { + display: grid !important; + grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) !important; + gap: 0.9rem !important; + align-items: start !important; + width: min(100%, 1280px) !important; + max-width: 1280px !important; + margin-inline: auto !important; +} + +body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)) > div:first-child, +body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)) > [data-widget-area="sidebar"] { + float: none !important; + flex: none !important; + width: auto !important; + max-width: none !important; + min-width: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; +} + +body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)) ul.categories-list { + max-width: none !important; +} + +body.template-categories #content > [data-widget-area="sidebar"], +body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] { + display: flex !important; + flex-direction: column !important; + gap: 0.75rem !important; +} + +body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] { + position: sticky !important; + top: 1rem !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="footer"] { + display: flex !important; + flex-direction: column !important; + gap: 0.75rem !important; + width: min(100%, 1280px) !important; + max-width: 1280px !important; + margin: 0.9rem auto 1.2rem !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="footer"]:empty, +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"].hidden { + display: none !important; +} + +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] > :not(script):not(style), +body:not([class*="template-account-"]) #content > [data-widget-area="footer"] > :not(script):not(style) { + width: 100% !important; + box-sizing: border-box !important; + padding: 0.9rem 1rem !important; + background: var(--wg-velvet-panel) !important; + border: 1px solid var(--wg-velvet-border) !important; + border-radius: 8px !important; + box-shadow: var(--wg-velvet-shadow) !important; + color: var(--wg-text-soft) !important; +} + +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] > :not(script):not(style):hover, +body:not([class*="template-account-"]) #content > [data-widget-area="footer"] > :not(script):not(style):hover { + background: var(--wg-velvet-panel-hover) !important; + border-color: rgba(194, 163, 90, 0.2) !important; +} + +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics-list, +body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics-list { + display: flex !important; + flex-direction: column !important; + gap: 0.6rem !important; + margin: 0 !important; + padding: 0 !important; +} + +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics, +body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics, +body:not([class*="template-account-"]) [data-widget-area="footer"] .btn-ghost { + min-width: 0 !important; + padding: 0.65rem 0.75rem !important; + background: rgba(255, 255, 255, 0.018) !important; + border: 1px solid rgba(194, 163, 90, 0.09) !important; + border-radius: 6px !important; + color: var(--wg-text-soft) !important; +} + +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics hr, +body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics hr { + display: none !important; +} + +body:not([class*="template-account-"]) [data-widget-area="sidebar"] a, +body:not([class*="template-account-"]) [data-widget-area="footer"] a { + color: var(--wg-text) !important; +} + +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .text-muted, +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .btn-link, +body:not([class*="template-account-"]) [data-widget-area="footer"] .text-muted, +body:not([class*="template-account-"]) [data-widget-area="footer"] .btn-link { + color: var(--wg-text-muted) !important; +} + +@media (max-width: 1199.98px) { + body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)) { + grid-template-columns: minmax(0, 1fr) !important; + } + + body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] { + position: static !important; + } +} + +/* WESTGATE calmer widget internals */ +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > :not(.westgate-masthead-link):not(script):not(style), +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] > :not(script):not(style), +body:not([class*="template-account-"]) #content > [data-widget-area="footer"] > :not(script):not(style) { + padding: 0.85rem !important; +} + +body:not([class*="template-account-"]) [data-widget-area="header"] .widget-topics-list, +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics-list, +body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics-list { + gap: 0 !important; +} + +body:not([class*="template-account-"]) [data-widget-area="header"] .widget-topics, +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics, +body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics { + padding: 0.75rem 0.15rem !important; + background: transparent !important; + border: 0 !important; + border-radius: 0 !important; + box-shadow: none !important; +} + +body:not([class*="template-account-"]) [data-widget-area="header"] .widget-topics + .widget-topics, +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics + .widget-topics, +body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics + .widget-topics { + border-top: 1px solid rgba(194, 163, 90, 0.1) !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics-list { + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)) !important; + gap: 0.85rem !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics { + padding: 0.35rem 0 !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics + .widget-topics { + border-top: 0 !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics:not(:first-child) { + border-left: 1px solid rgba(194, 163, 90, 0.1) !important; + padding-left: 0.85rem !important; +} + +body:not([class*="template-account-"]) [data-widget-area="footer"] .btn-ghost { + background: transparent !important; + border: 0 !important; + border-radius: 0 !important; + box-shadow: none !important; +} + +body:not([class*="template-account-"]) [data-widget-area="footer"] .btn-ghost + .btn-ghost { + border-left: 1px solid rgba(194, 163, 90, 0.1) !important; +} + +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .topic-title, +body:not([class*="template-account-"]) [data-widget-area="footer"] .topic-title, +body:not([class*="template-account-"]) [data-widget-area="header"] .topic-title { + font-size: 0.98rem !important; + line-height: 1.35 !important; +} + +@media (max-width: 767.98px) { + body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics-list { + display: flex !important; + flex-direction: column !important; + gap: 0 !important; + } + + body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics:not(:first-child) { + border-left: 0 !important; + border-top: 1px solid rgba(194, 163, 90, 0.1) !important; + padding-left: 0 !important; + } +} + +/* WESTGATE header widget flat rows and separator breathing */ +body:not([class*="template-account-"]) #content > [data-widget-area="header"] { + gap: 0.9rem !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link { + padding-bottom: 1.05rem !important; + margin-bottom: 0.15rem !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link::after { + bottom: 0.42rem !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics-list { + gap: 0 !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] li.widget-topics, +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics.d-flex, +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics { + padding: 0.35rem 0.9rem !important; + margin: 0 !important; + background: transparent !important; + border: 0 !important; + border-radius: 0 !important; + box-shadow: none !important; + outline: 0 !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] li.widget-topics + li.widget-topics, +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics + .widget-topics { + border-left: 1px solid rgba(194, 163, 90, 0.12) !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics > div, +body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics .d-flex { + border-color: transparent !important; + box-shadow: none !important; +} + +@media (max-width: 767.98px) { + body:not([class*="template-account-"]) #content > [data-widget-area="header"] { + gap: 0.7rem !important; + } + + body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link { + padding-bottom: 0.82rem !important; + } + + body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link::after { + bottom: 0.32rem !important; + } + + body:not([class*="template-account-"]) #content > [data-widget-area="header"] li.widget-topics + li.widget-topics, + body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics + .widget-topics { + border-left: 0 !important; + border-top: 1px solid rgba(194, 163, 90, 0.1) !important; + } +} + +/* WESTGATE compact sidebar user widgets */ +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] > .row { + display: flex !important; + flex-direction: column !important; + gap: 0 !important; + margin: 0 !important; + padding: 0.35rem 0 !important; +} + +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost { + width: 100% !important; + min-width: 0 !important; + margin: 0 !important; + padding: 0.62rem 0.15rem !important; + background: transparent !important; + border: 0 !important; + border-radius: 0 !important; + box-shadow: none !important; + color: var(--wg-text-soft) !important; +} + +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost + .btn-ghost { + border-top: 1px solid rgba(194, 163, 90, 0.1) !important; +} + +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost:hover, +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost:focus { + background: rgba(255, 255, 255, 0.018) !important; + color: var(--wg-text) !important; +} + +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost .avatar { + --avatar-size: 36px !important; + width: 36px !important; + height: 36px !important; + font-size: 1rem !important; +} + +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost img.avatar { + object-fit: cover !important; +} + +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost .fw-semibold { + color: var(--wg-text) !important; + font-size: 0.95rem !important; + line-height: 1.15 !important; +} + +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost .text-xs { + color: var(--wg-text-muted) !important; + line-height: 1.2 !important; +} + +body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] > :not(script):not(style) { + overflow: hidden !important; +} + +/* WESTGATE widget alignment final pass */ +body:not([class*="template-account-"]) #content, +body:not([class*="template-account-"]) #content > .row.flex-fill, +body:not([class*="template-account-"]) #content > [data-widget-area="footer"] { + box-sizing: border-box !important; +} + +body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)), +body:not([class*="template-account-"]) #content > [data-widget-area="footer"] { + width: 100% !important; + max-width: 1280px !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="footer"] { + align-self: center !important; + margin: 0.75rem auto 1.1rem !important; + padding-inline: 0 !important; + overflow: hidden !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="footer"] > .row { + --bs-gutter-x: 0 !important; + --bs-gutter-y: 0 !important; + display: grid !important; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important; + gap: 0.55rem !important; + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + padding: 0.35rem 0 !important; +} + +body:not([class*="template-account-"]) #content > [data-widget-area="footer"] > .row > * { + width: auto !important; + max-width: 100% !important; + min-width: 0 !important; + margin: 0 !important; + padding: 0.62rem 0.7rem !important; +} + +body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] { + gap: 0.7rem !important; +} + +body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] > :not(script):not(style) { + margin: 0 !important; + max-width: 100% !important; +} + +body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .search-widget .row { + --bs-gutter-x: 0 !important; + --bs-gutter-y: 0 !important; + margin: 0 !important; +} + +body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .search-widget .row > *, +body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .search-widget .col-12 { + padding-inline: 0 !important; +} + +body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .forum-stats { + display: grid !important; + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + gap: 0.45rem !important; + margin: 0 !important; +} + +body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .forum-stats > .d-flex { + display: contents !important; +} + +body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .stats-card { + min-width: 0 !important; +} + +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .text-body, +body:not([class*="template-account-"]) [data-widget-area="footer"] .text-body, +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .text-reset, +body:not([class*="template-account-"]) [data-widget-area="footer"] .text-reset, +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .text-secondary, +body:not([class*="template-account-"]) [data-widget-area="footer"] .text-secondary { + color: var(--wg-text-soft) !important; +} + +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .stats, +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .fw-semibold, +body:not([class*="template-account-"]) [data-widget-area="footer"] .fw-semibold, +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .topic-title, +body:not([class*="template-account-"]) [data-widget-area="footer"] .topic-title { + color: var(--wg-text) !important; +} + +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .fa, +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .fa-fw, +body:not([class*="template-account-"]) [data-widget-area="footer"] .fa, +body:not([class*="template-account-"]) [data-widget-area="footer"] .fa-fw { + color: var(--wg-text-muted) !important; +} + +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .input-group, +body:not([class*="template-account-"]) [data-widget-area="sidebar"] .form-control { + min-width: 0 !important; +} + +@media (max-width: 575.98px) { + body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .forum-stats { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } +} + +/* =========================================================== + Widget Overrides + =========================================================== +*/ + +.wg-category-note { + margin: 10px 0 16px 0; + padding: 10px 14px; + border-left: 3px solid #c2a35a; + background: rgba(20, 18, 25, 0.6); + border-radius: 6px; + font-size: 16px; + color: #b9b2a6; +} diff --git a/____wikijs-live-copy.scss b/____wikijs-live-copy.scss new file mode 100644 index 0000000..6d2d565 --- /dev/null +++ b/____wikijs-live-copy.scss @@ -0,0 +1,1326 @@ +/* THEME SPECIFIC STYLES */ + +.v-main .contents { + color: mc("grey", "800"); + padding: 0.5rem 0 50px; + position: relative; + + > div > *:first-child { + margin-top: 0; + } + + @at-root .theme--dark & { + color: mc("grey", "300"); + } + + // --------------------------------- + // LINKS + // --------------------------------- + + a { + color: mc("blue", "700"); + + &.is-internal-link.is-invalid-page { + color: mc("red", "700"); + + @at-root .theme--dark & { + color: mc("red", "200"); + } + } + + &.is-external-link { + padding-right: 3px; + + &::after { + font-family: "Material Design Icons", sans-serif; + font-size: 24px/1; + padding-left: 3px; + display: inline-block; + content: "\F03CC"; + color: mc("grey", "500"); + text-decoration: none; + } + } + + @at-root .theme--dark & { + color: mc("blue", "200"); + } + } + + // --------------------------------- + // HEADERS + // --------------------------------- + + h1, + h2, + h3, + h4, + h5, + h6 { + position: relative; + + &:first-child { + padding-top: 0; + } + + &:hover { + .toc-anchor { + display: block; + } + } + + .toc-anchor { + display: none; + position: absolute; + right: 1rem; + bottom: 0.5rem; + font-size: 1.25rem; + text-decoration: none; + color: mc("grey", "500"); + } + + & + h2, + & + h3, + & + h4, + & + h5, + & + h6 { + margin-top: 8px; + } + + & + hr.footnotes-sep { + display: none; + } + } + + h1 { + padding: 0; + color: mc("blue", "800"); + margin-top: 2rem; + position: relative; + + @at-root .theme--dark & { + color: mc("grey", "300"); + } + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background: linear-gradient(to right, mc("theme", "primary"), rgba(mc("theme", "primary"), 0)); + border-radius: 3px; + + @at-root .theme--dark & { + background: linear-gradient(to right, mc("blue", "300") 0%, mc("blue", "500") 10%, rgba(mc("blue", "900"), 0) 100%); + } + + @at-root .is-rtl & { + background: linear-gradient(to left, mc("theme", "primary"), rgba(mc("theme", "primary"), 0)); + } + @at-root .theme--dark.is-rtl & { + background: linear-gradient(to left, mc("grey", "600"), rgba(mc("grey", "600"), 0)); + } + } + } + h2 { + margin: 1rem 0 0 0; + color: mc("grey", "800"); + position: relative; + + @at-root .theme--dark & { + color: mc("grey", "400"); + } + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + background: linear-gradient(to right, mc("grey", "700"), rgba(mc("grey", "700"), 0)); + + @at-root .theme--dark & { + background: linear-gradient(to right, mc("grey", "300"), rgba(mc("grey", "700"), 0)); + } + + @at-root .is-rtl & { + background: linear-gradient(to left, mc("grey", "700"), rgba(mc("grey", "700"), 0)); + } + @at-root .theme--dark.is-rtl & { + background: linear-gradient(to left, mc("grey", "300"), rgba(mc("grey", "700"), 0)); + } + } + } + h3 { + margin: 8px 0 0 0; + color: mc("grey", "700"); + position: relative; + + @at-root .theme--dark & { + color: mc("grey", "600"); + } + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 90%); + } + } + h4, + h5, + h6 { + font-size: 1rem; + margin: 8px 0 0 0; + color: mc("grey", "700"); + position: relative; + + @at-root .theme--dark & { + color: mc("grey", "600"); + } + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 70%); + } + } + h5 { + &::after { + background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 50%); + } + } + h6 { + &::after { + background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 30%); + } + } + + // --------------------------------- + // PARAGRAPHS + // --------------------------------- + + p { + padding: 1rem 0 0 0; + margin: 0; + + @at-root .contents > div > p:first-child { + padding-top: 0; + } + + @at-root .v-application & { + margin-bottom: 0; + } + } + + hr { + margin: 1rem 0; + height: 1px; + border: none; + background-color: mc("grey", "400"); + + @at-root .theme--dark & { + background-color: mc("grey", "700"); + } + } + + .emoji { + height: 1.25em; + margin: 0 1px -4px; + } + + .text-huge { + font-size: 1.8em; + } + .text-big { + font-size: 1.4em; + } + .text-small { + font-size: 0.85em; + } + .text-tiny { + font-size: 0.7em; + } + + blockquote { + padding: 0 1rem 1rem 1rem; + background-color: mc("blue-grey", "50"); + border-left: 55px solid mc("blue-grey", "500"); + border-radius: 0.5rem; + margin: 1rem 0; + position: relative; + + @at-root .theme--dark & { + background-color: mc("blue-grey", "900"); + } + + &::before { + display: inline-block; + font: + normal normal normal 24px/1 "Material Design Icons", + sans-serif; + position: absolute; + margin-top: -12px; + top: 50%; + left: -38px; + color: rgba(255, 255, 255, 0.7); + content: "\F0757"; + } + + > p:first-child .emoji { + margin-right: 0.5rem; + } + + &.valign-center > p { + display: flex; + align-items: center; + } + + &.is-info { + background-color: mc("blue", "50"); + border-color: mc("blue", "300"); + color: mc("blue", "900"); + + &::before { + content: "\F02FC"; + } + + code:not([class^="language-"]) { + background-color: mc("blue", "50"); + color: mc("blue", "800"); + } + + @at-root .theme--dark & { + background-color: mc("blue", "900"); + color: mc("blue", "50"); + border-color: mc("blue", "500"); + } + } + &.is-warning { + background-color: mc("orange", "50"); + border-color: mc("orange", "300"); + color: darken(mc("orange", "900"), 10%); + + &::before { + content: "\F0026"; + } + + code:not([class^="language-"]) { + background-color: mc("orange", "50"); + color: mc("orange", "800"); + } + + @at-root .theme--dark & { + background-color: darken(mc("orange", "900"), 5%); + color: mc("orange", "100"); + border-color: mc("orange", "500"); + box-shadow: 0 0 2px 0 mc("grey", "900"); + } + } + &.is-danger { + background-color: mc("red", "50"); + border-color: mc("red", "300"); + color: mc("red", "900"); + + &::before { + content: "\F0159"; + } + + code:not([class^="language-"]) { + background-color: mc("red", "50"); + color: mc("red", "800"); + } + + @at-root .theme--dark & { + background-color: mc("red", "900"); + color: mc("red", "100"); + border-color: mc("red", "500"); + } + } + &.is-success { + background-color: mc("green", "50"); + border-color: mc("green", "300"); + color: mc("green", "900"); + + &::before { + content: "\F0E1E"; + } + + code:not([class^="language-"]) { + background-color: mc("green", "50"); + color: mc("green", "800"); + } + + @at-root .theme--dark & { + background-color: mc("green", "900"); + color: mc("green", "50"); + border-color: mc("green", "500"); + } + } + } + + // --------------------------------- + // ASCIIDOC SPECIFIC + // --------------------------------- + + .admonitionblock { + margin: 1rem 0; + position: relative; + + table { + border: none; + background-color: transparent; + width: 100%; + } + + td.icon { + border-bottom-left-radius: 7px; + border-top-left-radius: 7px; + text-align: center; + width: 56px; + + &::before { + display: inline-block; + font: + normal normal normal 24px/1 "Material Design Icons", + sans-serif !important; + } + } + + td.content { + border-bottom-right-radius: 7px; + border-top-right-radius: 7px; + } + + &.note { + td.icon { + background-color: mc("blue", "300"); + color: mc("blue", "50"); + &::before { + content: "\F02FC"; + } + } + td.content { + color: darken(mc("blue", "900"), 10%); + background-color: mc("blue", "50"); + + @at-root .theme--dark & { + background-color: mc("blue", "900"); + color: mc("blue", "50"); + } + } + } + &.tip { + td.icon { + background-color: mc("green", "300"); + color: mc("green", "50"); + &::before { + content: "\F0335"; + } + } + td.content { + color: darken(mc("green", "900"), 10%); + background-color: mc("green", "50"); + + @at-root .theme--dark & { + background-color: mc("green", "900"); + color: mc("green", "50"); + } + } + } + &.warning { + background-color: transparent !important; + + td.icon { + background-color: mc("orange", "300"); + color: #fff; + &::before { + content: "\F0026"; + } + } + td.content { + color: darken(mc("orange", "900"), 10%); + background-color: mc("orange", "50"); + + @at-root .theme--dark & { + background-color: darken(mc("orange", "900"), 5%); + color: mc("orange", "100"); + } + } + } + &.caution { + td.icon { + background-color: mc("purple", "300"); + color: mc("purple", "50"); + &::before { + content: "\f0238"; + } + } + td.content { + color: darken(mc("purple", "900"), 10%); + background-color: mc("purple", "50"); + + @at-root .theme--dark & { + background-color: mc("purple", "900"); + color: mc("purple", "100"); + } + } + } + &.important { + td.icon { + background-color: mc("red", "300"); + color: mc("red", "50"); + &::before { + content: "\F0159"; + } + } + td.content { + color: darken(mc("red", "900"), 10%); + background-color: mc("red", "50"); + + @at-root .theme--dark & { + background-color: mc("red", "900"); + color: mc("red", "100"); + } + } + } + } + + .exampleblock { + > .title { + font-style: italic; + font-size: 1rem !important; + color: #7a2717; + + @at-root .theme--dark & { + color: mc("brown", "300"); + } + } + > .content { + border: 1px solid mc("grey", "200"); + border-radius: 7px; + margin-bottom: 12px; + padding: 16px; + } + } + // --------------------------------- + // LISTS + // --------------------------------- + + ol, + ul:not(.tabset-tabs) { + padding-top: 1rem; + width: 100%; + + @at-root .is-rtl & { + padding-left: 0; + padding-right: 1rem; + } + + li > ul, + li > ol { + padding-top: 0.5rem; + padding-left: 1rem; + + @at-root .is-rtl & { + padding-left: 0; + padding-right: 1rem; + } + } + + li + li { + margin-top: 0.5rem; + } + + &.links-list { + padding-left: 0; + list-style-type: none; + + @at-root .is-rtl & { + padding-right: 0; + } + + li { + background-color: mc("grey", "50"); + background-image: linear-gradient(to bottom, #fff, mc("grey", "50")); + border-right: 1px solid mc("grey", "200"); + border-bottom: 1px solid mc("grey", "200"); + border-left: 5px solid mc("grey", "300"); + box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1); + padding: 1rem; + border-radius: 5px; + font-weight: 500; + + @at-root .is-rtl & { + border-left-width: 1px; + border-right-width: 5px; + } + + &:hover { + background-image: linear-gradient(to bottom, #fff, lighten(mc("blue", "50"), 4%)); + border-left-color: mc("blue", "500"); + cursor: pointer; + + @at-root .is-rtl & { + border-left-color: mc("grey", "200"); + border-right-width: mc("blue", "500"); + } + } + + &::before { + content: ""; + display: none; + } + + > a { + display: block; + text-decoration: none; + margin: -1rem; + padding: 1rem; + + > em { + font-weight: 400; + font-style: normal; + color: mc("grey", "700"); + display: inline-block; + padding-left: 0.5rem; + border-left: 1px solid mc("grey", "300"); + margin-left: 0.5rem; + + &.is-block { + display: block; + padding-left: 0; + margin-left: 0; + border-left: none; + } + } + } + + > em { + font-weight: 400; + font-style: normal; + } + + @at-root .theme--dark & { + background-color: mc("grey", "50"); + background-image: linear-gradient(to bottom, lighten(mc("grey", "900"), 5%), mc("grey", "900")); + border-right: 1px solid mc("grey", "900"); + border-bottom: 1px solid mc("grey", "900"); + border-left: 5px solid mc("grey", "700"); + box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1); + + @at-root .theme--dark.is-rtl & { + border-left-width: 1px; + border-right-width: 5px; + } + + &:hover { + background-image: linear-gradient(to bottom, lighten(mc("grey", "900"), 2%), darken(mc("grey", "900"), 3%)); + border-left-color: mc("indigo", "300"); + cursor: pointer; + + @at-root .theme--dark.is-rtl & { + border-left-color: mc("grey", "900"); + border-right-width: mc("indigo", "300"); + } + } + } + } + } + + &.grid-list { + margin: 1rem 0 0 0; + background-color: #fff; + border: 1px solid mc("grey", "200"); + padding: 1px; + display: inline-block; + list-style-type: none; + + @at-root .theme--dark & { + background-color: #000; + border: 1px solid mc("grey", "800"); + } + + li { + background-color: mc("grey", "50"); + padding: 0.6rem 1rem; + display: block; + + &:nth-child(odd) { + background-color: mc("grey", "100"); + } + + & + li { + margin-top: 0; + } + + &::before { + content: ""; + display: none; + } + + @at-root .theme--dark & { + background-color: mc("grey", "900"); + + &:nth-child(odd) { + background-color: darken(mc("grey", "900"), 5%); + } + } + } + } + } + + ul:not(.tabset-tabs):not(.contains-task-list) { + list-style: none; + > li::before { + position: absolute; + left: -1.1rem; + content: "\25b8"; + color: mc("grey", "600"); + width: 1.35rem; + + @at-root .is-rtl & { + right: -1.1rem; + content: "\25C3"; + } + } + } + ol, + ul:not(.tabset-tabs) { + > li { + position: relative; + > p { + display: inline-block; + vertical-align: top; + padding-top: 0; + + &:first-child { + width: 100%; + } + } + } + } + + dl { + dt { + margin-top: 0.3em; + margin-bottom: 0.3em; + font-weight: bold; + } + + dd { + margin-left: 1.125em; + margin-bottom: 0.75em; + + > p { + padding: 0; + } + } + } + + // --------------------------------- + // CODE + // --------------------------------- + + code { + background-color: mc("indigo", "50"); + padding: 0 5px; + color: mc("indigo", "800"); + font-family: "Roboto Mono", monospace; + font-weight: normal; + font-size: 1rem; + box-shadow: none; + + &::before, + &::after { + display: none; + } + + @at-root .theme--dark & { + background-color: darken(mc("grey", "900"), 5%); + color: mc("indigo", "100"); + } + } + + .prismjs { + border: none; + border-radius: 5px; + box-shadow: initial; + background-color: mc("grey", "900"); + padding: 1rem 1rem 1rem 3rem; + margin: 1rem 0; + + @at-root .theme--dark & { + background-color: darken(mc("grey", "900"), 5%); + } + + > code { + background-color: transparent; + padding: 0; + color: #fff; + box-shadow: initial; + display: block; + font-size: 0.85rem; + font-family: "Roboto Mono", monospace; + + &:after, + &:before { + content: initial; + letter-spacing: initial; + } + } + } + + .diagram { + margin-top: 1rem; + overflow: auto; + + svg { + color-scheme: light !important; + + &:first-child { + direction: ltr; + } + + @at-root .theme--dark & { + color-scheme: dark !important; + } + } + } + + // --------------------------------- + // TASK LISTS + // --------------------------------- + + .contains-task-list { + padding-left: 0; + } + + .task-list-item { + position: relative; + list-style-type: none; + + &-checkbox[disabled] { + width: 1.1rem; + height: 1.1rem; + top: 2px; + position: relative; + margin-right: 2px; + + &::after { + position: absolute; + left: 0; + top: 0; + content: " "; + display: block; + width: 1.1rem; + height: 1.1rem; + background-color: #fff; + border: 1px solid mc("grey", "400"); + border-radius: 2px; + font-weight: bold; + font-size: 0.8rem; + line-height: 1rem; + text-align: center; + + @at-root .theme--dark & { + background-color: mc("grey", "900"); + border-color: mc("grey", "700"); + } + } + + &[checked]::after { + content: "✓"; + } + } + + .contains-task-list { + padding: 0.5rem 0 0 1.5rem; + } + } + + // --------------------------------- + // TABLES + // --------------------------------- + + table { + margin: 0.5rem 0; + border-spacing: 0; + border-radius: 5px; + border: 1px solid mc("grey", "300"); + + @at-root .theme--dark & { + border-color: mc("grey", "600"); + } + + &.dense { + td, + th { + font-size: 0.85rem; + padding: 0.5rem; + } + } + + th { + padding: 0.75rem; + border-bottom: 2px solid mc("grey", "500"); + color: mc("grey", "600"); + background-color: mc("grey", "100"); + + @at-root .theme--dark & { + background-color: darken(mc("grey", "900"), 8%); + border-bottom-color: mc("grey", "600"); + color: mc("grey", "500"); + } + + &:first-child { + border-top-left-radius: 7px; + } + &:last-child { + border-top-right-radius: 7px; + } + } + + td { + padding: 0.75rem; + } + + tr { + td { + border-bottom: 1px solid mc("grey", "300"); + border-right: 1px solid mc("grey", "100"); + + @at-root .theme--dark & { + border-bottom-color: mc("grey", "700"); + border-right-color: mc("grey", "800"); + } + + &:nth-child(even) { + background-color: mc("grey", "50"); + + @at-root .theme--dark & { + background-color: darken(mc("grey", "900"), 4%); + } + } + + &:last-child { + border-right: none; + } + } + + &:nth-child(even) { + td { + background-color: mc("grey", "50"); + + @at-root .theme--dark & { + background-color: darken(mc("grey", "800"), 8%); + } + + &:nth-child(even) { + background-color: mc("grey", "100"); + + @at-root .theme--dark & { + background-color: darken(mc("grey", "800"), 10%); + } + } + } + } + + &:last-child { + td { + border-bottom: none; + + &:first-child { + border-bottom-left-radius: 7px; + } + &:last-child { + border-bottom-right-radius: 7px; + } + } + } + } + } + + figure.table { + margin: 0; + + > table { + background-color: #fff; + margin: 0; + border-collapse: collapse; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.07); + + @at-root .theme--dark & { + background-color: darken(mc("grey", "900"), 3%); + } + + td, + th { + border: 1px solid mc("blue-grey", "100"); + box-shadow: + inset -1px -1px 0 0 #fff, + inset 1px 0 0 #fff; + padding: 0.5rem 0.75rem; + border-radius: 0 !important; + + @at-root .theme--dark & { + border-color: mc("grey", "700"); + box-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.5); + } + } + + th { + background-color: lighten(mc("blue-grey", "50"), 1%); + font-weight: 700; + color: mc("blue-grey", "700"); + + @at-root .theme--dark & { + background-color: mc("grey", "800"); + color: mc("grey", "400"); + } + } + + thead th { + border-bottom: 2px solid mc("blue-grey", "100"); + + @at-root .theme--dark & { + border-bottom: none; + } + } + + tbody th { + background-color: lighten(mc("blue-grey", "50"), 4%); + + @at-root .theme--dark & { + background-color: darken(mc("grey", "800"), 8%); + } + } + } + } + + // -> Add horizontal scrollbar when table is too wide + .table-container { + width: 100%; + overflow-x: auto; + } + + // --------------------------------- + // IMAGES + // --------------------------------- + + img { + max-width: 100%; + + &.align-left { + float: left; + margin: 0 1rem 1rem 0; + } + &.align-right { + float: right; + margin: 0 0 1rem 1rem; + z-index: 1; + position: relative; + } + &.align-center { + display: block; + max-width: 100%; + margin: auto; + } + &.align-abstopright { + position: absolute; + top: -90px; + right: 1rem; + height: calc(90px - 32px); + width: auto; + + @at-root .is-rtl & { + left: 1rem; + right: initial; + } + } + &.decor-shadow { + box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1); + } + &.decor-outline { + border: 1px solid mc("grey", "400"); + } + &.uml-diagram { + margin: 1rem 0; + } + } + + figure.image { + margin: 1rem 0 0 0; + + img { + margin: 0 auto; + } + figcaption { + padding: 4px 1rem; + text-align: center; + font-size: 12px; + color: mc("grey", "700"); + background-color: mc("grey", "100"); + + @at-root .theme--dark & { + color: mc("grey", "400"); + background-color: mc("grey", "800"); + } + } + } + + figure.image-style-align-right { + float: right; + } + + figure.image-style-align-left { + float: left; + } + + // --------------------------------- + // DETAILS + // --------------------------------- + + details { + background-color: mc("grey", "50"); + margin: 1rem 2rem; + border: 1px solid mc("grey", "300"); + border-radius: 7px; + + > p { + padding-left: 0; + } + + > summary { + border-radius: 7px; + background-color: mc("grey", "50"); + cursor: pointer; + display: list-item; + align-items: center; + padding: 0.4rem 1rem; + transition: background-color 0.4s ease; + + &:focus { + outline: none; + background-color: mc("grey", "100"); + } + + > h1, + h2, + h3, + h4, + h5, + h6 { + width: 95%; + display: inline-block; + + &:first-child { + margin-top: 0; + } + + &:only-child::after { + display: none; + } + } + } + + &[open] { + padding: 1rem; + + > summary { + background-color: mc("grey", "100"); + border-bottom: 1px solid mc("grey", "300"); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + margin: -1rem -1rem 1rem -1rem; + } + } + + @at-root .theme--dark & { + background-color: mc("grey", "900"); + border-color: mc("grey", "700"); + + > summary { + background-color: mc("grey", "900"); + border-color: mc("grey", "700"); + } + + &[open] > summary { + background-color: lighten(mc("grey", "900"), 5%); + } + } + } + + // --------------------------------- + // HIGHLIGHTING + // --------------------------------- + + mark { + &.pen-red { + color: mc("red", "500"); + background-color: initial; + } + &.pen-green { + color: mc("green", "500"); + background-color: initial; + } + &.marker-blue { + background-color: mc("blue", "300"); + } + &.marker-yellow { + background-color: mc("yellow", "300"); + } + &.marker-pink { + background-color: mc("pink", "300"); + } + &.marker-green { + background-color: mc("green", "300"); + } + } + + .mention { + background-color: rgba(153, 0, 48, 0.1); + color: #990030; + + @at-root .theme--dark & { + color: mc("pink", "500"); + } + } +} + +// --------------------------------- +// COMMENTS +// --------------------------------- + +.comments { + &-container { + border-radius: 7px; + } + + &-header { + color: #fff; + padding: 8px 20px; + font-size: 16px; + font-weight: 500; + background-color: mc("blue-grey", "500"); + border-radius: 7px 7px 0 0; + + @at-root .theme--dark & { + background-color: lighten(mc("blue-grey", "900"), 5%); + } + } + + &-main { + background-color: mc("blue-grey", "50"); + border-radius: 0 0 7px 7px; + padding: 20px; + + @at-root .theme--dark & { + background-color: darken(mc("grey", "900"), 5%); + } + } +} + +// --------------- +// RTL FIXES +// Vuetify GH Issue: https://github.com/vuetifyjs/vuetify/issues/6317 +// --------------- + +.is-rtl { + .page-col-content.is-page-header { + @each $size, $width in $grid-breakpoints { + @media (min-width: $width) { + @for $n from 0 through 12 { + &.offset-#{$size}-#{$n} { + margin-left: 0; + margin-right: ($n / 12 * 100) * 1%; + } + } + } + } + } +} + +// --------------- +// PRINT OVERRIDES +// --------------- + +@media print { + .nav-header, + .v-navigation-drawer, + .v-btn--fab, + .page-col-sd, + .v-tooltip__content { + display: none !important; + } + + .layout { + display: block !important; + } + + .page-col-content { + flex-basis: 100% !important; + flex-grow: 1 !important; + max-width: 100% !important; + margin-left: 0 !important; + + > .v-toolbar { + border: 1px solid mc("grey", "300") !important; + border-radius: 7px !important; + + & + .v-divider { + display: none !important; + } + } + } + + .v-main { + padding: 0 !important; + font-size: 14px; + background-color: #fff; + } + + .v-main .contents { + color: #000; + background-color: #fff; + + @at-root .theme--dark & { + color: #000; + } + + .prismjs { + box-shadow: none; + background-color: #fff; + + @at-root .theme--dark & { + background-color: #fff; + } + + > code { + color: #000; + box-shadow: none; + text-shadow: none; + white-space: pre-wrap !important; + overflow-wrap: break-word !important; + } + } + } + + .comments-container { + display: none; + } + + .page-edit-shortcuts { + display: none; + } +} diff --git a/package.json b/package.json index 31b0d05..489fb4a 100644 --- a/package.json +++ b/package.json @@ -1,35 +1,46 @@ { - "name": "nodebb-theme-quickstart", - "version": "0.1.0", - "description": "Enter a description here", - "main": "lib/theme.js", - "keywords": [], - "license": "MIT", - "husky": { - "hooks": { - "pre-commit": "npx lint-staged", - "commit-msg": "npx commitlint -E HUSKY_GIT_PARAMS" - } - }, - "lint-staged": { - "*.js": [ - "eslint --fix", - "git add" - ] - }, - "dependencies": { - }, - "devDependencies": { - "@commitlint/cli": "11.0.0", - "@commitlint/config-angular": "11.0.0", - "eslint": "8.x", - "eslint-config-airbnb-base": "14.2.1", - "eslint-config-nodebb": "0.1.1", - "eslint-plugin-import": "2.x", - "husky": "5.0.9", - "lint-staged": "10.5.4" - }, - "nbbpm": { - "compatibility": "^4.0.0" - }, + "name": "nodebb-theme-westgate", + "version": "0.1.0", + "description": "NodeBB Theme for Shadows Over Westgate", + "author": { + "name": "vickydotbat", + "email": "vickydotbat@tutamail.com", + "url": "https://forum.westgate.pw" + }, + "repository": { + "type": "git", + "url": "https://github.com/vickydotbat/nodebb-theme-westgate" + }, + "bugs": { + "url": "https://github.com/vickydotbat/nodebb-theme-westgate/issues" + }, + "main": "lib/theme.js", + "keywords": [], + "license": "MIT", + "husky": { + "hooks": { + "pre-commit": "npx lint-staged", + "commit-msg": "npx commitlint -E HUSKY_GIT_PARAMS" + } + }, + "lint-staged": { + "*.js": [ + "eslint --fix", + "git add" + ] + }, + "dependencies": {}, + "devDependencies": { + "@commitlint/cli": "11.0.0", + "@commitlint/config-angular": "11.0.0", + "eslint": "8.x", + "eslint-config-airbnb-base": "14.2.1", + "eslint-config-nodebb": "0.1.1", + "eslint-plugin-import": "2.x", + "husky": "5.0.9", + "lint-staged": "10.5.4" + }, + "nbbpm": { + "compatibility": "^4.0.0" + } } diff --git a/plugin.json b/plugin.json index 12e48ad..1e6cd03 100644 --- a/plugin.json +++ b/plugin.json @@ -1,26 +1,23 @@ { - "id": "nodebb-theme-quickstart", - "hooks": [ - { "hook": "static:app.load", "method": "init" }, - { "hook": "filter:admin.header.build", "method": "addAdminNavigation" }, - { "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" }, - { "hook": "filter:config.get", "method": "getThemeConfig" }, - { "hook": "filter:settings.get", "method": "getAdminSettings"}, - { "hook": "filter:user.saveSettings", "method": "saveUserSettings" }, - { "hook": "filter:user.profileMenu", "method": "addProfileItem" }, - { "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" } - ], - "scripts": [ - "public/client.js", - "../nodebb-theme-harmony/public/harmony.js" - ], - "templates": "templates", - "modules": { - "../admin/plugins/theme-quickstart.js": "../nodebb-theme-harmony/public/admin.js", - "../client/account/theme.js": "../nodebb-theme-harmony/public/settings.js" - }, - "staticDirs": { - "inter": "node_modules/@fontsource/inter/files", - "poppins": "node_modules/@fontsource/poppins/files" - } + "id": "nodebb-theme-westgate", + "hooks": [ + { "hook": "static:app.load", "method": "init" }, + { "hook": "filter:admin.header.build", "method": "addAdminNavigation" }, + { "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" }, + { "hook": "filter:config.get", "method": "getThemeConfig" }, + { "hook": "filter:settings.get", "method": "getAdminSettings" }, + { "hook": "filter:user.saveSettings", "method": "saveUserSettings" }, + { "hook": "filter:user.profileMenu", "method": "addProfileItem" }, + { "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" } + ], + "scripts": ["public/client.js", "../nodebb-theme-harmony/public/harmony.js"], + "templates": "templates", + "modules": { + "../admin/plugins/theme-quickstart.js": "../nodebb-theme-harmony/public/admin.js", + "../client/account/theme.js": "../nodebb-theme-harmony/public/settings.js" + }, + "staticDirs": { + "inter": "node_modules/@fontsource/inter/files", + "poppins": "node_modules/@fontsource/poppins/files" + } } diff --git a/theme.json b/theme.json index 81c5658..96ec259 100644 --- a/theme.json +++ b/theme.json @@ -1,7 +1,7 @@ { - "id": "nodebb-theme-quickstart", - "name": "My Theme Name", - "description": "Enter a description here", - "url": "https://github.com/nodebb/nodebb-theme-quickstart", - "baseTheme": "nodebb-theme-harmony" + "id": "nodebb-theme-westgate", + "name": "My Theme Name", + "description": "Enter a description here", + "url": "https://github.com/nodebb/nodebb-theme-westgate", + "baseTheme": "nodebb-theme-harmony" } diff --git a/theme.scss b/theme.scss index 0205216..46ade79 100644 --- a/theme.scss +++ b/theme.scss @@ -1,4 +1,4 @@ // override harmony font-path -$font-path: "./plugins/nodebb-theme-quickstart"; +$font-path: "./plugins/nodebb-theme-westgate"; @import "../nodebb-theme-harmony/theme";