diff --git a/_references/custom_css_live.txt b/_references/custom_css_live.txt deleted file mode 100644 index 3ada9db..0000000 --- a/_references/custom_css_live.txt +++ /dev/null @@ -1,97 +0,0 @@ -.wg-latest-strip { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 1rem; - width: 100%; - margin: 0 0 1.35rem; -} - -.wg-latest-card { - position: relative; - min-width: 0; - padding: 1rem 1.1rem; - overflow: hidden; - background: - linear-gradient(100deg, rgba(32, 19, 30, 0.96), rgba(13, 12, 17, 0.98)), - rgba(13, 12, 17, 0.98); - border: 1px solid rgba(194, 163, 90, 0.2); - border-radius: 6px; - box-shadow: - inset 0 1px 0 rgba(255, 244, 221, 0.04), - 0 14px 30px rgba(0, 0, 0, 0.26); -} - -.wg-latest-card::before { - content: ""; - position: absolute; - inset: 0 auto 0 0; - width: 3px; - background: rgba(194, 163, 90, 0.58); -} - -.wg-latest-card--patch::before { - background: rgba(143, 178, 119, 0.58); -} - -.wg-latest-kicker { - margin-bottom: 0.45rem; - color: #c2a35a; - font-family: var(--wg-font-display, Georgia, serif); - font-size: 0.82rem; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.wg-latest-title { - display: block; - color: var(--wg-text, #e6e0d6); - font-family: var(--wg-font-display, Georgia, serif); - font-size: 1.08rem; - font-weight: 600; - line-height: 1.25; - text-decoration: none; -} - -.wg-latest-title:hover, -.wg-latest-title:focus { - color: #fff4dd; - text-decoration: none; -} - -.wg-latest-meta { - min-height: 1.15rem; - margin-top: 0.35rem; - color: rgba(185, 178, 166, 0.78); - font-family: var(--wg-font-ui, system-ui, sans-serif); - font-size: 0.78rem; -} - -.wg-latest-excerpt { - display: -webkit-box; - margin: 0.55rem 0 0; - overflow: hidden; - color: rgba(216, 208, 196, 0.84); - font-family: var(--wg-font-text, Georgia, serif); - font-size: 0.9rem; - line-height: 1.45; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} - -.wg-latest-card.is-loading .wg-latest-title, -.wg-latest-card.is-empty .wg-latest-title { - color: rgba(185, 178, 166, 0.74); -} - -@media (max-width: 767px) { - .wg-latest-strip { - grid-template-columns: 1fr; - gap: 0.75rem; - margin-bottom: 1rem; - } - - .wg-latest-card { - padding: 0.9rem 1rem; - } -} diff --git a/_references/custom_javascript.txt b/_references/custom_javascript.txt deleted file mode 100644 index f1972b5..0000000 --- a/_references/custom_javascript.txt +++ /dev/null @@ -1,190 +0,0 @@ -(() => { - const WESTGATE_LATEST_CONFIG = [ - { - key: 'announcement', - cid: 1, - emptyTitle: 'No announcements yet', - }, - { - key: 'patch', - cid: 10, - emptyTitle: 'No patch notes yet', - }, - ]; - - const getRelativePath = () => { - return window.config && window.config.relative_path ? window.config.relative_path : ''; - }; - - const unwrap = (payload) => { - return payload && payload.response ? payload.response : payload; - }; - - const textFromHtml = (html) => { - const el = document.createElement('div'); - el.innerHTML = html || ''; - - const firstParagraph = Array.from(el.querySelectorAll('p')) - .map((p) => (p.textContent || '').replace(/\s+/g, ' ').trim()) - .find(Boolean); - - return (firstParagraph || el.textContent || '').replace(/\s+/g, ' ').trim(); - }; - - const truncate = (text, limit = 240) => { - if (!text || text.length <= limit) { - return text || ''; - } - - return `${text.slice(0, limit).replace(/\s+\S*$/, '')}...`; - }; - - const formatDate = (value) => { - const timestamp = Number(value); - if (!timestamp) { - return ''; - } - - const date = new Date(timestamp); - if (Number.isNaN(date.getTime())) { - return ''; - } - - return new Intl.DateTimeFormat(undefined, { - month: 'short', - day: 'numeric', - }).format(date); - }; - - const getJSON = async (url) => { - const response = await fetch(url, { - credentials: 'same-origin', - headers: { - accept: 'application/json', - }, - }); - - if (!response.ok) { - throw new Error(`Request failed: ${response.status}`); - } - - return unwrap(await response.json()); - }; - - const getTopicExcerpt = async (topic) => { - const relativePath = getRelativePath(); - const topicPath = topic.slug || topic.tid; - - try { - const topicData = await getJSON(`${relativePath}/api/topic/${topicPath}?page=1&sort=oldest_to_newest`); - const firstPost = topicData.posts && topicData.posts[0]; - const firstPostText = textFromHtml(firstPost && firstPost.content); - - if (firstPostText) { - return truncate(firstPostText); - } - } catch (error) { - console.warn('[Westgate latest widget original post excerpt]', error); - } - - if (topic.mainPost && topic.mainPost.content) { - const mainPostText = textFromHtml(topic.mainPost.content); - if (mainPostText) { - return truncate(mainPostText); - } - } - - if (topic.teaser && topic.teaser.content) { - return truncate(textFromHtml(topic.teaser.content)); - } - - return ''; - }; - - const getLatestTopic = async (cid) => { - const relativePath = getRelativePath(); - const category = await getJSON(`${relativePath}/api/v3/categories/${cid}/topics?sort=recently_created&after=0`); - const topic = category.topics && category.topics[0]; - - if (!topic) { - return null; - } - - let excerpt = ''; - - try { - excerpt = await getTopicExcerpt(topic); - } catch (error) { - console.warn('[Westgate latest widget excerpt]', error); - } - - return { - title: topic.titleRaw || topic.title || 'Untitled', - url: `${relativePath}/topic/${topic.slug || topic.tid}`, - author: topic.user && (topic.user.displayname || topic.user.username), - date: formatDate(topic.timestamp || topic.lastposttime), - excerpt, - }; - }; - - const renderCard = async (root, source) => { - const card = root.querySelector(`[data-card="${source.key}"]`); - if (!card) { - return; - } - - const title = card.querySelector('.wg-latest-title'); - const meta = card.querySelector('.wg-latest-meta'); - const excerpt = card.querySelector('.wg-latest-excerpt'); - - card.classList.add('is-loading'); - card.classList.remove('is-empty'); - title.textContent = 'Loading...'; - title.removeAttribute('href'); - meta.textContent = ''; - excerpt.textContent = ''; - - try { - const topic = await getLatestTopic(source.cid); - - if (!topic) { - card.classList.remove('is-loading'); - card.classList.add('is-empty'); - title.textContent = source.emptyTitle; - return; - } - - title.textContent = topic.title; - title.href = topic.url; - meta.textContent = [topic.author, topic.date].filter(Boolean).join(' ยท '); - excerpt.textContent = topic.excerpt || ''; - card.classList.remove('is-loading', 'is-empty'); - } catch (error) { - console.warn('[Westgate latest widget]', error); - card.classList.remove('is-loading'); - card.classList.add('is-empty'); - title.textContent = source.emptyTitle; - meta.textContent = 'Unable to load right now'; - } - }; - - const renderLatestStrip = () => { - const root = document.querySelector('[data-westgate-latest]'); - - if (!root || root.dataset.loaded === '1') { - return; - } - - root.dataset.loaded = '1'; - WESTGATE_LATEST_CONFIG.forEach((source) => renderCard(root, source)); - }; - - document.addEventListener('DOMContentLoaded', renderLatestStrip); - window.addEventListener('load', renderLatestStrip); - - if (window.jQuery) { - window.jQuery(window).on('action:ajaxify.end', renderLatestStrip); - } - - renderLatestStrip(); -})(); diff --git a/_references/ref_palettes.css b/_references/ref_palettes.css deleted file mode 100644 index 2400347..0000000 --- a/_references/ref_palettes.css +++ /dev/null @@ -1,2238 +0,0 @@ -@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/scss/westgate/_surfaces.scss b/scss/westgate/_surfaces.scss index c4d2383..e8187ee 100644 --- a/scss/westgate/_surfaces.scss +++ b/scss/westgate/_surfaces.scss @@ -1,37 +1,37 @@ html, body { - background: var(--wg-bg); - color: var(--wg-text-soft); + background: var(--wg-bg); + color: var(--wg-text-soft); } body { - font-family: var(--wg-font-text); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + font-family: var(--wg-font-text); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } #panel { - background: var(--wg-bg); + background: var(--wg-bg); } .layout-container, #content { - color: var(--wg-text-soft); + color: var(--wg-text-soft); } a { - color: var(--wg-gold); + color: var(--wg-gold); - &:hover, - &:focus { - color: #e0c878; - } + &:hover, + &:focus { + color: #e0c878; + } } .text-muted, .text-secondary, .link-secondary { - color: var(--wg-text-muted) !important; + color: var(--wg-text-muted) !important; } .bg-body, @@ -39,9 +39,9 @@ a { .card, .card-header, .list-group-item { - background-color: var(--wg-panel) !important; - color: var(--wg-text-soft); - border-color: var(--wg-border-soft) !important; + background-color: var(--wg-panel) !important; + color: var(--wg-text-soft); + border-color: var(--wg-border-soft) !important; } .westgate-surface, @@ -52,210 +52,118 @@ li[component="category/topic"], li[component="post"] .post-container, .quick-reply textarea, textarea[component="topic/quickreply/text"] { - background: var(--wg-velvet-panel) !important; - border: 1px solid var(--wg-border) !important; - border-radius: 8px !important; - box-shadow: var(--wg-velvet-shadow) !important; + background: var(--wg-velvet-panel) !important; + border: 1px solid var(--wg-border) !important; + border-radius: 8px !important; + box-shadow: var(--wg-velvet-shadow) !important; } .westgate-surface-hover, li[component="categories/category"]:hover, li[component="category/topic"]:hover, li[component="post"] .post-container:hover { - background: var(--wg-velvet-panel-hover) !important; - border-color: rgba(194, 163, 90, 0.22) !important; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.035), - inset 0 0 38px rgba(120, 36, 84, 0.14), - 0 12px 30px rgba(0, 0, 0, 0.3) !important; -} - -.westgate-powered-by { - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - gap: 10px; - padding: 10px 0 14px; - color: var(--wg-text-muted); - font-family: var(--wg-font-ui); - font-size: 0.875rem; - letter-spacing: 0; - line-height: 1.2; - text-align: center; -} - -.westgate-powered-pill { - display: inline-flex; - align-items: center; - gap: 7px; - min-height: 32px; - padding: 6px 12px; - background: var(--wg-velvet-panel) !important; - border: 1px solid var(--wg-border) !important; - border-radius: 8px; - box-shadow: var(--wg-velvet-shadow) !important; - color: var(--wg-text-muted); - line-height: 1; - text-decoration: none; - transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease; -} - -.westgate-powered-pill:hover, -.westgate-powered-pill:focus { - background: var(--wg-velvet-panel-hover) !important; - border-color: rgba(194, 163, 90, 0.22) !important; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.035), - inset 0 0 38px rgba(120, 36, 84, 0.14), - 0 12px 30px rgba(0, 0, 0, 0.3) !important; - color: #efe7da; - text-decoration: none; - outline: none; -} - -.westgate-powered-pill:focus-visible { - border-color: rgba(216, 194, 138, 0.38) !important; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.035), - inset 0 0 38px rgba(120, 36, 84, 0.14), - 0 0 0 2px rgba(194, 163, 90, 0.18), - 0 12px 30px rgba(0, 0, 0, 0.3) !important; -} - -.westgate-powered-by .powered-label { - color: var(--wg-ledger-ink); - font-weight: 600; - opacity: 0.95; - white-space: nowrap; -} - -.westgate-powered-pill:hover .powered-label, -.westgate-powered-pill:focus .powered-label { - color: #efe7da; -} - -.westgate-powered-by .nodebb-logo, -.westgate-powered-by .ckeditor-logo { - display: block; - width: auto; - opacity: 0.95; -} - -.westgate-powered-by .nodebb-logo { - height: 14px; - transform: translateY(-1px); -} - -.westgate-powered-by .ckeditor-logo { - height: 14px; -} - -.westgate-powered-pill:hover .nodebb-logo, -.westgate-powered-pill:focus .nodebb-logo, -.westgate-powered-pill:hover .ckeditor-logo, -.westgate-powered-pill:focus .ckeditor-logo { - opacity: 1; -} - -.westgate-powered-by .ckeditor-logo path[fill="#1C2331"] { - fill: #f2edf7; + background: var(--wg-velvet-panel-hover) !important; + border-color: rgba(194, 163, 90, 0.22) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.035), + inset 0 0 38px rgba(120, 36, 84, 0.14), + 0 12px 30px rgba(0, 0, 0, 0.3) !important; } .wg-latest-strip { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 1rem; - width: 100%; - margin: 0 0 1.35rem; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; + width: 100%; + margin: 0 0 1.35rem; } .wg-latest-card { - position: relative; - min-width: 0; - padding: 1rem 1.1rem; - overflow: hidden; - background: - linear-gradient(to bottom, rgba(255, 244, 221, 0.018), rgba(0, 0, 0, 0.08)), - var(--wg-velvet-panel) !important; - border: 1px solid rgba(194, 163, 90, 0.2); - border-radius: 8px; - box-shadow: var(--wg-velvet-shadow); + position: relative; + min-width: 0; + padding: 1rem 1.1rem; + overflow: hidden; + background: + linear-gradient(to bottom, rgba(255, 244, 221, 0.018), rgba(0, 0, 0, 0.08)), + var(--wg-velvet-panel) !important; + border: 1px solid rgba(194, 163, 90, 0.2); + border-radius: 8px; + box-shadow: var(--wg-velvet-shadow); } .wg-latest-card::before { - content: ""; - position: absolute; - inset: 0 auto 0 0; - width: 3px; - background: rgba(194, 163, 90, 0.58); + content: ""; + position: absolute; + inset: 0 auto 0 0; + width: 3px; + background: rgba(194, 163, 90, 0.58); } .wg-latest-card--patch::before { - background: rgba(143, 178, 119, 0.58); + background: rgba(143, 178, 119, 0.58); } .wg-latest-kicker { - margin-bottom: 0.45rem; - color: var(--wg-gold); - font-family: var(--wg-font-display); - font-size: 0.82rem; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; + margin-bottom: 0.45rem; + color: var(--wg-gold); + font-family: var(--wg-font-display); + font-size: 0.82rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; } .wg-latest-title { - display: block; - color: var(--wg-text); - font-family: var(--wg-font-display); - font-size: 1.08rem; - font-weight: 600; - line-height: 1.25; - text-decoration: none; + display: block; + color: var(--wg-text); + font-family: var(--wg-font-display); + font-size: 1.08rem; + font-weight: 600; + line-height: 1.25; + text-decoration: none; } .wg-latest-title:hover, .wg-latest-title:focus { - color: #fff4dd; - text-decoration: none; + color: #fff4dd; + text-decoration: none; } .wg-latest-meta { - min-height: 1.15rem; - margin-top: 0.35rem; - color: rgba(185, 178, 166, 0.78); - font-family: var(--wg-font-ui); - font-size: 0.78rem; + min-height: 1.15rem; + margin-top: 0.35rem; + color: rgba(185, 178, 166, 0.78); + font-family: var(--wg-font-ui); + font-size: 0.78rem; } .wg-latest-excerpt { - display: -webkit-box; - margin: 0.55rem 0 0; - overflow: hidden; - color: rgba(216, 208, 196, 0.84); - font-family: var(--wg-font-text); - font-size: 0.9rem; - line-height: 1.45; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; + display: -webkit-box; + margin: 0.55rem 0 0; + overflow: hidden; + color: rgba(216, 208, 196, 0.84); + font-family: var(--wg-font-text); + font-size: 0.9rem; + line-height: 1.45; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; } .wg-latest-card.is-loading .wg-latest-title, .wg-latest-card.is-empty .wg-latest-title { - color: rgba(185, 178, 166, 0.74); + color: rgba(185, 178, 166, 0.74); } @media (max-width: 767px) { - .wg-latest-strip { - grid-template-columns: 1fr; - gap: 0.75rem; - margin-bottom: 1rem; - } + .wg-latest-strip { + grid-template-columns: 1fr; + gap: 0.75rem; + margin-bottom: 1rem; + } - .wg-latest-card { - padding: 0.9rem 1rem; - } + .wg-latest-card { + padding: 0.9rem 1rem; + } } .badge, @@ -268,8 +176,8 @@ li[component="post"] .post-container:hover { .category-tools, .meta.stats, .timeago { - font-family: var(--wg-font-ui); - letter-spacing: 0; + font-family: var(--wg-font-ui); + letter-spacing: 0; } h1, @@ -281,11 +189,13 @@ h5, .topic-title, li[component="categories/category"] h2.title, li[component="category/topic"] h3[component="topic/header"] { - color: var(--wg-text); - font-family: var(--wg-font-display); - font-weight: 600; - letter-spacing: 0; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 10px rgba(104, 32, 76, 0.16); + color: var(--wg-text); + font-family: var(--wg-font-display); + font-weight: 600; + letter-spacing: 0; + text-shadow: + 0 1px 0 rgba(0, 0, 0, 0.9), + 0 0 10px rgba(104, 32, 76, 0.16); } p, @@ -295,7 +205,7 @@ li, .topic-text, [component="post/content"], [component="chat/message/body"] { - font-family: var(--wg-font-text); + font-family: var(--wg-font-text); } code, @@ -303,29 +213,29 @@ kbd, pre, samp, .text-tabular { - font-family: var(--wg-font-code) !important; + font-family: var(--wg-font-code) !important; } .breadcrumb { - --bs-breadcrumb-divider-color: var(--wg-gold-soft); - color: var(--wg-text-muted); + --bs-breadcrumb-divider-color: var(--wg-gold-soft); + color: var(--wg-text-muted); } .breadcrumb a, .breadcrumb-item.active { - color: var(--wg-text-muted); + color: var(--wg-text-muted); } .alert { - background: rgba(194, 163, 90, 0.08); - border-color: rgba(194, 163, 90, 0.18); - color: var(--wg-text-soft); + background: rgba(194, 163, 90, 0.08); + border-color: rgba(194, 163, 90, 0.18); + color: var(--wg-text-soft); } .alert-danger { - background: rgba(142, 52, 56, 0.16); - border-color: rgba(142, 52, 56, 0.32); - color: #d8b1b1; + background: rgba(142, 52, 56, 0.16); + border-color: rgba(142, 52, 56, 0.32); + color: #d8b1b1; } .avatar, @@ -333,64 +243,73 @@ samp, .user-icon, .avatar-tooltip .avatar, .avatar-tooltip img { - border: 1px solid rgba(216, 194, 138, 0.32); - box-shadow: - inset 0 1px 0 rgba(255, 242, 204, 0.2), - inset 0 0 0 1px rgba(18, 15, 22, 0.58), - inset 0 -3px 6px rgba(0, 0, 0, 0.48), - 0 0 0 1px rgba(53, 46, 49, 0.92), - 0 0 0 2px rgba(124, 105, 62, 0.22), - 0 7px 16px rgba(0, 0, 0, 0.36) !important; - filter: saturate(0.88) contrast(1.08); + border: 1px solid rgba(216, 194, 138, 0.32); + box-shadow: + inset 0 1px 0 rgba(255, 242, 204, 0.2), + inset 0 0 0 1px rgba(18, 15, 22, 0.58), + inset 0 -3px 6px rgba(0, 0, 0, 0.48), + 0 0 0 1px rgba(53, 46, 49, 0.92), + 0 0 0 2px rgba(124, 105, 62, 0.22), + 0 7px 16px rgba(0, 0, 0, 0.36) !important; + filter: saturate(0.88) contrast(1.08); } .user-icon { - background-image: - radial-gradient(circle at 34% 22%, rgba(255, 238, 190, 0.22), transparent 25%), - linear-gradient(145deg, rgba(111, 86, 45, 0.36), rgba(30, 29, 34, 0.28) 42%, rgba(44, 17, 34, 0.2)) !important; - text-shadow: - 0 1px 0 rgba(0, 0, 0, 0.78), - 0 -1px 0 rgba(255, 238, 190, 0.16), - 0 0 8px rgba(0, 0, 0, 0.24); + background-image: + radial-gradient( + circle at 34% 22%, + rgba(255, 238, 190, 0.22), + transparent 25% + ), + linear-gradient( + 145deg, + rgba(111, 86, 45, 0.36), + rgba(30, 29, 34, 0.28) 42%, + rgba(44, 17, 34, 0.2) + ) !important; + text-shadow: + 0 1px 0 rgba(0, 0, 0, 0.78), + 0 -1px 0 rgba(255, 238, 190, 0.16), + 0 0 8px rgba(0, 0, 0, 0.24); } li[component="post"] .avatar, li[component="category/topic"] .avatar, li[component="category/topic"] .user-icon { - border-radius: 999px !important; + border-radius: 999px !important; } .status { - box-shadow: - 0 0 0 2px var(--wg-status-ring), - 0 0 0 3px rgba(216, 194, 138, 0.14), - 0 0 12px rgba(0, 0, 0, 0.34); + box-shadow: + 0 0 0 2px var(--wg-status-ring), + 0 0 0 3px rgba(216, 194, 138, 0.14), + 0 0 12px rgba(0, 0, 0, 0.34); - &.online { - color: var(--wg-status-online) !important; - background-color: var(--wg-status-online) !important; - } + &.online { + color: var(--wg-status-online) !important; + background-color: var(--wg-status-online) !important; + } - &.away { - color: var(--wg-status-away) !important; - background-color: var(--wg-status-away) !important; - } + &.away { + color: var(--wg-status-away) !important; + background-color: var(--wg-status-away) !important; + } - &.dnd { - color: var(--wg-status-dnd) !important; - background-color: var(--wg-status-dnd) !important; - } + &.dnd { + color: var(--wg-status-dnd) !important; + background-color: var(--wg-status-dnd) !important; + } - &.offline { - color: var(--wg-status-offline) !important; - background-color: var(--wg-status-offline) !important; - } + &.offline { + color: var(--wg-status-offline) !important; + background-color: var(--wg-status-offline) !important; + } } .fa-circle.status { - text-shadow: - 0 0 0 2px var(--wg-status-ring), - 0 0 10px rgba(0, 0, 0, 0.34); + text-shadow: + 0 0 0 2px var(--wg-status-ring), + 0 0 10px rgba(0, 0, 0, 0.34); } .account, @@ -404,7 +323,7 @@ li[component="category/topic"] .user-icon { .user-profile, .user-card, .profile-card { - color: var(--wg-text-soft); + color: var(--wg-text-soft); } .notifications-dropdown .notification-list > :where(div, li), @@ -412,22 +331,26 @@ li[component="category/topic"] .user-icon { .chats-dropdown [component="chat/recent/room"], .chats-list [component="chat/recent/room"], [component="chat/public/room"] { - background: - linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)), - var(--wg-velvet-panel) !important; - border: 1px solid rgba(194, 163, 90, 0.14) !important; - border-radius: 8px !important; - box-shadow: - inset 0 1px 0 rgba(255, 244, 221, 0.028), - 0 8px 18px rgba(0, 0, 0, 0.18) !important; - color: var(--wg-text-soft) !important; + background: + linear-gradient( + to bottom, + rgba(255, 241, 196, 0.018), + rgba(8, 7, 10, 0.08) + ), + var(--wg-velvet-panel) !important; + border: 1px solid rgba(194, 163, 90, 0.14) !important; + border-radius: 8px !important; + box-shadow: + inset 0 1px 0 rgba(255, 244, 221, 0.028), + 0 8px 18px rgba(0, 0, 0, 0.18) !important; + color: var(--wg-text-soft) !important; } .notifications-dropdown .notification-list > :where(div, li) + :where(div, li), .notifications-list > :where(div, li) + :where(div, li), .chats-dropdown [component="chat/recent/room"] + hr, .chats-list [component="chat/recent/room"] + hr { - margin-top: 0.4rem !important; + margin-top: 0.4rem !important; } .notifications-dropdown :where(.btn.btn-ghost, .mark-read), @@ -435,16 +358,20 @@ li[component="category/topic"] .user-icon { .chats-dropdown :where(.chat-room-btn, .mark-read), .chats-list :where(.chat-room-btn, .mark-read), [component="chat/public/room"] { - color: var(--wg-text-soft) !important; + color: var(--wg-text-soft) !important; } .notifications-dropdown .mark-read, .notifications-list .mark-read, .chats-dropdown .mark-read, .chats-list .mark-read { - border-color: rgba(194, 163, 90, 0.18) !important; - border-radius: 6px !important; - background: linear-gradient(to bottom, rgba(255, 244, 221, 0.018), rgba(0, 0, 0, 0.08)) !important; + border-color: rgba(194, 163, 90, 0.18) !important; + border-radius: 6px !important; + background: linear-gradient( + to bottom, + rgba(255, 244, 221, 0.018), + rgba(0, 0, 0, 0.08) + ) !important; } .notifications-dropdown .mark-read:hover, @@ -455,16 +382,16 @@ li[component="category/topic"] .user-icon { .chats-dropdown .mark-read:focus, .chats-list .mark-read:hover, .chats-list .mark-read:focus { - background: rgba(194, 163, 90, 0.08) !important; + background: rgba(194, 163, 90, 0.08) !important; } .chats-dropdown .chat-room-btn, .chats-list .chat-room-btn, [component="chat/public/room"] { - border: 1px solid rgba(194, 163, 90, 0.12) !important; - border-radius: 8px !important; - background: transparent !important; - box-shadow: none !important; + border: 1px solid rgba(194, 163, 90, 0.12) !important; + border-radius: 8px !important; + background: transparent !important; + box-shadow: none !important; } .chats-dropdown [component="chat/recent"] .active .chat-room-btn, @@ -472,9 +399,9 @@ li[component="category/topic"] .user-icon { [component="chat/public/room"]:hover, [component="chat/public/room"]:focus, [component="chat/public/room"].unread { - background: rgba(194, 163, 90, 0.08) !important; - border-color: rgba(194, 163, 90, 0.24) !important; - color: var(--wg-text) !important; + background: rgba(194, 163, 90, 0.08) !important; + border-color: rgba(194, 163, 90, 0.24) !important; + color: var(--wg-text) !important; } .notifications-dropdown [component="notifications/item/link"], @@ -484,7 +411,7 @@ li[component="category/topic"] .user-icon { .chats-dropdown .teaser-content, .chats-list .teaser-content, [component="chat/public/room"] { - color: var(--wg-text-soft) !important; + color: var(--wg-text-soft) !important; } .notifications-dropdown [component="notifications/item/link"]:hover, @@ -496,63 +423,68 @@ li[component="category/topic"] .user-icon { .chats-list .chat-room-btn:hover .room-name, .chats-list .chat-room-btn:focus .room-name, [component="chat/public/room"]:hover { - color: var(--wg-text) !important; + color: var(--wg-text) !important; } [component="chat/public/room/unread/count"], .chats-dropdown .badge.bg-light, .chats-list .badge.bg-light { - background: - linear-gradient(to bottom, rgba(216, 194, 138, 0.13), rgba(70, 45, 52, 0.28)) !important; - border: 1px solid rgba(194, 163, 90, 0.28) !important; - color: var(--wg-ledger-ink) !important; + background: linear-gradient( + to bottom, + rgba(216, 194, 138, 0.13), + rgba(70, 45, 52, 0.28) + ) !important; + border: 1px solid rgba(194, 163, 90, 0.28) !important; + color: var(--wg-ledger-ink) !important; } [component="chat/user/list"] [component="chat/user/list/username"] { - color: var(--wg-text-muted) !important; + color: var(--wg-text-muted) !important; } -[component="chat/user/list"] [data-uid].online [component="chat/user/list/username"] { - color: var(--wg-text) !important; - font-weight: 600; +[component="chat/user/list"] + [data-uid].online + [component="chat/user/list/username"] { + color: var(--wg-text) !important; + font-weight: 600; } .page-flags [component="flags/filters"] { - border-bottom-color: rgba(194, 163, 90, 0.12) !important; + border-bottom-color: rgba(194, 163, 90, 0.12) !important; } .page-flags [component="flags/list"] { - --bs-table-bg: transparent; - --bs-table-color: var(--wg-text-soft); - --bs-table-border-color: rgba(194, 163, 90, 0.1); - --bs-table-hover-bg: rgba(194, 163, 90, 0.04); - --bs-table-hover-color: var(--wg-text); - color: var(--wg-text-soft) !important; + --bs-table-bg: transparent; + --bs-table-color: var(--wg-text-soft); + --bs-table-border-color: rgba(194, 163, 90, 0.1); + --bs-table-hover-bg: rgba(194, 163, 90, 0.04); + --bs-table-hover-color: var(--wg-text); + color: var(--wg-text-soft) !important; } .page-flags [component="flags/list"] :where(th, td) { - color: var(--wg-text-soft) !important; - border-color: rgba(194, 163, 90, 0.1) !important; + color: var(--wg-text-soft) !important; + border-color: rgba(194, 163, 90, 0.1) !important; } .page-flags [component="flags/list"] thead :where(th, td) { - color: var(--wg-ledger-ink-muted) !important; + color: var(--wg-ledger-ink-muted) !important; } .page-flags [component="flags/list"] a.text-reset { - color: var(--wg-text-muted) !important; + color: var(--wg-text-muted) !important; } .page-flags [component="flags/list"] a.text-reset:hover, .page-flags [component="flags/list"] a.text-reset:focus { - color: var(--wg-text) !important; + color: var(--wg-text) !important; } .page-flags [component="flags/list"] input[type="checkbox"] { - accent-color: var(--wg-gold); + accent-color: var(--wg-gold); } .page-flags [component="flags/list"] .badge, .page-flags .card.card-header { - color: var(--wg-text) !important; + color: var(--wg-text) !important; }