From c6776133bc425602d017840a41973dc9ef172dd3 Mon Sep 17 00:00:00 2001 From: vickydotbat Date: Thu, 23 Apr 2026 12:16:10 +0200 Subject: [PATCH] Added references --- AGENTS.md | 10 +- ____bootstrap-overrides.scss | 170 --- ____wikijs-live-copy.scss | 1326 ----------------- _references/custom_css_live.txt | 97 ++ _references/custom_javascript.txt | 190 +++ .../ref_palettes.css | 0 6 files changed, 290 insertions(+), 1503 deletions(-) delete mode 100644 ____bootstrap-overrides.scss delete mode 100644 ____wikijs-live-copy.scss create mode 100644 _references/custom_css_live.txt create mode 100644 _references/custom_javascript.txt rename ____live-copy.css => _references/ref_palettes.css (100%) diff --git a/AGENTS.md b/AGENTS.md index 9b7fc79..a44a9fd 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -25,15 +25,11 @@ Use this palette direction: - Avoid bright, playful, clinical, or flat SaaS-style treatment. - Favor depth, restraint, texture, and rich contrast over loud ornament. -Reference prior theme work in this repo through files prefixed with `____`: +Reference prior theme work in this repo through files in the `_references` directory: -- `____live-copy.css` -- `____wikijs-live-copy.scss` -- `____bootstrap-overrides.scss` +`ref_palettes.css` is the clearest reference for the intended slick gradient treatment. Use that direction for foreground elements such as panels, topic rows, buttons, borders, accents, and active states. Keep gradients rich and polished, but avoid turning the entire page into a decorative gradient background. -`____live-copy.css` is the clearest reference for the intended slick gradient treatment. Use that direction for foreground elements such as panels, topic rows, buttons, borders, accents, and active states. Keep gradients rich and polished, but avoid turning the entire page into a decorative gradient background. - -When adding new visuals, study the `____` reference files first and match the existing direction before introducing new motifs. +When adding new visuals, study the reference files first and match the existing direction before introducing new motifs. ## NodeBB Theme Rules diff --git a/____bootstrap-overrides.scss b/____bootstrap-overrides.scss deleted file mode 100644 index 062de7f..0000000 --- a/____bootstrap-overrides.scss +++ /dev/null @@ -1,170 +0,0 @@ -// ========================================================= -// WESTGATE BOOTSTRAP VARIABLE OVERRIDES FOR NODEBB -// Put this before Bootstrap/NodeBB imports that consume variables -// ========================================================= - -// --- Core palette -$white: #f5efe4; -$black: #08070a; - -$gray-100: #f0ebe2; -$gray-200: #ddd5c8; -$gray-300: #c7bcad; -$gray-400: #a99d8e; -$gray-500: #8b8074; -$gray-600: #6f665d; -$gray-700: #4d4746; -$gray-800: #1a161d; -$gray-900: #0b0a0d; - -// Accent / theme hues -$blue: #7cafc2; // muted lore blue -$indigo: #6c5a8e; -$purple: #7b4a6f; -$pink: #a06179; -$red: #9c4b4b; -$orange: #b57a45; -$yellow: #c2a35a; // signature Westgate gold -$green: #6f8c5b; -$teal: #5d8c83; -$cyan: #6f9eae; - -// --- Semantic theme colors -$primary: #c2a35a; -$secondary: #1a161d; -$success: #6f8c5b; -$info: #6f9eae; -$warning: #c2a35a; -$danger: #9c4b4b; -$light: #ddd5c8; -$dark: #0b0a0d; - -// --- Body / text / links -$body-bg: #0b0a0d; -$body-color: #e6e0d6; - -$link-color: #d8c28a; -$link-hover-color: #e0c878; - -$emphasis-color: #f0e8dc; -$secondary-color: #b9b2a6; -$tertiary-color: #9a9086; - -$headings-color: #efe7da; - -// --- Borders / surfaces -$border-color: #2a252d; -$border-color-translucent: rgba(194, 163, 90, 0.12); - -$card-bg: #17151a; -$card-cap-bg: #141219; -$card-border-color: rgba(194, 163, 90, 0.12); - -$dropdown-bg: #141219; -$dropdown-border-color: rgba(194, 163, 90, 0.14); -$dropdown-link-color: #b9b2a6; -$dropdown-link-hover-color: #efe7da; -$dropdown-link-hover-bg: #241e26; -$dropdown-link-active-color: #fff4dd; -$dropdown-link-active-bg: #2a2215; -$dropdown-header-color: #9a9086; - -$modal-content-bg: #141219; -$modal-content-border-color: rgba(194, 163, 90, 0.14); -$popover-bg: #141219; -$popover-border-color: rgba(194, 163, 90, 0.14); -$tooltip-bg: #221c24; -$tooltip-color: #e6e0d6; - -// --- Inputs / forms -$input-bg: #110f15; -$input-color: #e6e0d6; -$input-border-color: #2a252d; -$input-placeholder-color: #8f877d; -$input-focus-bg: #151219; -$input-focus-color: #f0e8dc; -$input-focus-border-color: rgba(194, 163, 90, 0.42); -$input-group-addon-bg: #1a161d; -$input-group-addon-border-color: #2a252d; - -$form-check-input-bg: #151219; -$form-check-input-border: 1px solid rgba(194, 163, 90, 0.35); -$form-check-input-checked-bg-color: #a8893f; -$form-check-input-checked-border-color: #c2a35a; - -// --- Navs / tabs / pills -$nav-link-color: #b9b2a6; -$nav-link-hover-color: #e6e0d6; -$nav-tabs-border-color: #2a252d; -$nav-tabs-link-hover-border-color: rgba(194, 163, 90, 0.18); -$nav-tabs-link-active-color: #e0c878; -$nav-tabs-link-active-bg: #141219; -$nav-tabs-link-active-border-color: rgba(194, 163, 90, 0.24); - -$nav-pills-link-active-color: #fff4dd; -$nav-pills-link-active-bg: #473914; - -// --- Buttons -$btn-color: #b9b2a6; -$btn-border-radius: 0.45rem; -$btn-focus-box-shadow: 0 0 0 0.2rem rgba(194, 163, 90, 0.16); - -$btn-close-color: #e6e0d6; -$btn-close-opacity: 0.75; -$btn-close-hover-opacity: 1; - -// --- List groups / tables -$list-group-bg: #141219; -$list-group-border-color: rgba(194, 163, 90, 0.1); -$list-group-color: #b9b2a6; -$list-group-hover-bg: #241e26; -$list-group-action-hover-color: #efe7da; -$list-group-action-active-bg: #2a2215; -$list-group-action-active-color: #e0c878; - -$table-color: #b9b2a6; -$table-bg: transparent; -$table-border-color: rgba(194, 163, 90, 0.12); -$table-striped-bg: rgba(255, 255, 255, 0.012); -$table-hover-bg: rgba(194, 163, 90, 0.05); -$table-hover-color: #efe7da; - -// --- Alerts using your lore palette instead of stock Bootstrap tones -$primary-text-emphasis: #f0e6d8; -$secondary-text-emphasis: #c6beaf; -$success-text-emphasis: #d6e2ce; -$info-text-emphasis: #d2e4ea; -$warning-text-emphasis: #f3e3b2; -$danger-text-emphasis: #e3c2c2; -$light-text-emphasis: #4d4746; -$dark-text-emphasis: #cfc7ba; - -$primary-bg-subtle: rgba(194, 163, 90, 0.14); -$secondary-bg-subtle: rgba(26, 22, 29, 0.92); -$success-bg-subtle: rgba(111, 140, 91, 0.14); -$info-bg-subtle: rgba(111, 158, 174, 0.14); -$warning-bg-subtle: rgba(194, 163, 90, 0.14); -$danger-bg-subtle: rgba(156, 75, 75, 0.14); -$light-bg-subtle: #1a161d; -$dark-bg-subtle: #0b0a0d; - -$primary-border-subtle: rgba(194, 163, 90, 0.28); -$secondary-border-subtle: rgba(194, 163, 90, 0.1); -$success-border-subtle: rgba(111, 140, 91, 0.28); -$info-border-subtle: rgba(111, 158, 174, 0.28); -$warning-border-subtle: rgba(194, 163, 90, 0.28); -$danger-border-subtle: rgba(156, 75, 75, 0.28); -$light-border-subtle: rgba(194, 163, 90, 0.12); -$dark-border-subtle: rgba(194, 163, 90, 0.12); - -// --- Optional: make Bootstrap's theme map explicit for NodeBB components -$theme-colors: ( - "primary": $primary, - "secondary": $secondary, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark -); diff --git a/____wikijs-live-copy.scss b/____wikijs-live-copy.scss deleted file mode 100644 index 6d2d565..0000000 --- a/____wikijs-live-copy.scss +++ /dev/null @@ -1,1326 +0,0 @@ -/* THEME SPECIFIC STYLES */ - -.v-main .contents { - color: mc("grey", "800"); - padding: 0.5rem 0 50px; - position: relative; - - > div > *:first-child { - margin-top: 0; - } - - @at-root .theme--dark & { - color: mc("grey", "300"); - } - - // --------------------------------- - // LINKS - // --------------------------------- - - a { - color: mc("blue", "700"); - - &.is-internal-link.is-invalid-page { - color: mc("red", "700"); - - @at-root .theme--dark & { - color: mc("red", "200"); - } - } - - &.is-external-link { - padding-right: 3px; - - &::after { - font-family: "Material Design Icons", sans-serif; - font-size: 24px/1; - padding-left: 3px; - display: inline-block; - content: "\F03CC"; - color: mc("grey", "500"); - text-decoration: none; - } - } - - @at-root .theme--dark & { - color: mc("blue", "200"); - } - } - - // --------------------------------- - // HEADERS - // --------------------------------- - - h1, - h2, - h3, - h4, - h5, - h6 { - position: relative; - - &:first-child { - padding-top: 0; - } - - &:hover { - .toc-anchor { - display: block; - } - } - - .toc-anchor { - display: none; - position: absolute; - right: 1rem; - bottom: 0.5rem; - font-size: 1.25rem; - text-decoration: none; - color: mc("grey", "500"); - } - - & + h2, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: 8px; - } - - & + hr.footnotes-sep { - display: none; - } - } - - h1 { - padding: 0; - color: mc("blue", "800"); - margin-top: 2rem; - position: relative; - - @at-root .theme--dark & { - color: mc("grey", "300"); - } - - &::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 2px; - background: linear-gradient(to right, mc("theme", "primary"), rgba(mc("theme", "primary"), 0)); - border-radius: 3px; - - @at-root .theme--dark & { - background: linear-gradient(to right, mc("blue", "300") 0%, mc("blue", "500") 10%, rgba(mc("blue", "900"), 0) 100%); - } - - @at-root .is-rtl & { - background: linear-gradient(to left, mc("theme", "primary"), rgba(mc("theme", "primary"), 0)); - } - @at-root .theme--dark.is-rtl & { - background: linear-gradient(to left, mc("grey", "600"), rgba(mc("grey", "600"), 0)); - } - } - } - h2 { - margin: 1rem 0 0 0; - color: mc("grey", "800"); - position: relative; - - @at-root .theme--dark & { - color: mc("grey", "400"); - } - - &::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 1px; - background: linear-gradient(to right, mc("grey", "700"), rgba(mc("grey", "700"), 0)); - - @at-root .theme--dark & { - background: linear-gradient(to right, mc("grey", "300"), rgba(mc("grey", "700"), 0)); - } - - @at-root .is-rtl & { - background: linear-gradient(to left, mc("grey", "700"), rgba(mc("grey", "700"), 0)); - } - @at-root .theme--dark.is-rtl & { - background: linear-gradient(to left, mc("grey", "300"), rgba(mc("grey", "700"), 0)); - } - } - } - h3 { - margin: 8px 0 0 0; - color: mc("grey", "700"); - position: relative; - - @at-root .theme--dark & { - color: mc("grey", "600"); - } - - &::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 1px; - background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 90%); - } - } - h4, - h5, - h6 { - font-size: 1rem; - margin: 8px 0 0 0; - color: mc("grey", "700"); - position: relative; - - @at-root .theme--dark & { - color: mc("grey", "600"); - } - - &::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 1px; - background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 70%); - } - } - h5 { - &::after { - background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 50%); - } - } - h6 { - &::after { - background: linear-gradient(to right, mc("grey", "500"), rgba(mc("grey", "500"), 0) 30%); - } - } - - // --------------------------------- - // PARAGRAPHS - // --------------------------------- - - p { - padding: 1rem 0 0 0; - margin: 0; - - @at-root .contents > div > p:first-child { - padding-top: 0; - } - - @at-root .v-application & { - margin-bottom: 0; - } - } - - hr { - margin: 1rem 0; - height: 1px; - border: none; - background-color: mc("grey", "400"); - - @at-root .theme--dark & { - background-color: mc("grey", "700"); - } - } - - .emoji { - height: 1.25em; - margin: 0 1px -4px; - } - - .text-huge { - font-size: 1.8em; - } - .text-big { - font-size: 1.4em; - } - .text-small { - font-size: 0.85em; - } - .text-tiny { - font-size: 0.7em; - } - - blockquote { - padding: 0 1rem 1rem 1rem; - background-color: mc("blue-grey", "50"); - border-left: 55px solid mc("blue-grey", "500"); - border-radius: 0.5rem; - margin: 1rem 0; - position: relative; - - @at-root .theme--dark & { - background-color: mc("blue-grey", "900"); - } - - &::before { - display: inline-block; - font: - normal normal normal 24px/1 "Material Design Icons", - sans-serif; - position: absolute; - margin-top: -12px; - top: 50%; - left: -38px; - color: rgba(255, 255, 255, 0.7); - content: "\F0757"; - } - - > p:first-child .emoji { - margin-right: 0.5rem; - } - - &.valign-center > p { - display: flex; - align-items: center; - } - - &.is-info { - background-color: mc("blue", "50"); - border-color: mc("blue", "300"); - color: mc("blue", "900"); - - &::before { - content: "\F02FC"; - } - - code:not([class^="language-"]) { - background-color: mc("blue", "50"); - color: mc("blue", "800"); - } - - @at-root .theme--dark & { - background-color: mc("blue", "900"); - color: mc("blue", "50"); - border-color: mc("blue", "500"); - } - } - &.is-warning { - background-color: mc("orange", "50"); - border-color: mc("orange", "300"); - color: darken(mc("orange", "900"), 10%); - - &::before { - content: "\F0026"; - } - - code:not([class^="language-"]) { - background-color: mc("orange", "50"); - color: mc("orange", "800"); - } - - @at-root .theme--dark & { - background-color: darken(mc("orange", "900"), 5%); - color: mc("orange", "100"); - border-color: mc("orange", "500"); - box-shadow: 0 0 2px 0 mc("grey", "900"); - } - } - &.is-danger { - background-color: mc("red", "50"); - border-color: mc("red", "300"); - color: mc("red", "900"); - - &::before { - content: "\F0159"; - } - - code:not([class^="language-"]) { - background-color: mc("red", "50"); - color: mc("red", "800"); - } - - @at-root .theme--dark & { - background-color: mc("red", "900"); - color: mc("red", "100"); - border-color: mc("red", "500"); - } - } - &.is-success { - background-color: mc("green", "50"); - border-color: mc("green", "300"); - color: mc("green", "900"); - - &::before { - content: "\F0E1E"; - } - - code:not([class^="language-"]) { - background-color: mc("green", "50"); - color: mc("green", "800"); - } - - @at-root .theme--dark & { - background-color: mc("green", "900"); - color: mc("green", "50"); - border-color: mc("green", "500"); - } - } - } - - // --------------------------------- - // ASCIIDOC SPECIFIC - // --------------------------------- - - .admonitionblock { - margin: 1rem 0; - position: relative; - - table { - border: none; - background-color: transparent; - width: 100%; - } - - td.icon { - border-bottom-left-radius: 7px; - border-top-left-radius: 7px; - text-align: center; - width: 56px; - - &::before { - display: inline-block; - font: - normal normal normal 24px/1 "Material Design Icons", - sans-serif !important; - } - } - - td.content { - border-bottom-right-radius: 7px; - border-top-right-radius: 7px; - } - - &.note { - td.icon { - background-color: mc("blue", "300"); - color: mc("blue", "50"); - &::before { - content: "\F02FC"; - } - } - td.content { - color: darken(mc("blue", "900"), 10%); - background-color: mc("blue", "50"); - - @at-root .theme--dark & { - background-color: mc("blue", "900"); - color: mc("blue", "50"); - } - } - } - &.tip { - td.icon { - background-color: mc("green", "300"); - color: mc("green", "50"); - &::before { - content: "\F0335"; - } - } - td.content { - color: darken(mc("green", "900"), 10%); - background-color: mc("green", "50"); - - @at-root .theme--dark & { - background-color: mc("green", "900"); - color: mc("green", "50"); - } - } - } - &.warning { - background-color: transparent !important; - - td.icon { - background-color: mc("orange", "300"); - color: #fff; - &::before { - content: "\F0026"; - } - } - td.content { - color: darken(mc("orange", "900"), 10%); - background-color: mc("orange", "50"); - - @at-root .theme--dark & { - background-color: darken(mc("orange", "900"), 5%); - color: mc("orange", "100"); - } - } - } - &.caution { - td.icon { - background-color: mc("purple", "300"); - color: mc("purple", "50"); - &::before { - content: "\f0238"; - } - } - td.content { - color: darken(mc("purple", "900"), 10%); - background-color: mc("purple", "50"); - - @at-root .theme--dark & { - background-color: mc("purple", "900"); - color: mc("purple", "100"); - } - } - } - &.important { - td.icon { - background-color: mc("red", "300"); - color: mc("red", "50"); - &::before { - content: "\F0159"; - } - } - td.content { - color: darken(mc("red", "900"), 10%); - background-color: mc("red", "50"); - - @at-root .theme--dark & { - background-color: mc("red", "900"); - color: mc("red", "100"); - } - } - } - } - - .exampleblock { - > .title { - font-style: italic; - font-size: 1rem !important; - color: #7a2717; - - @at-root .theme--dark & { - color: mc("brown", "300"); - } - } - > .content { - border: 1px solid mc("grey", "200"); - border-radius: 7px; - margin-bottom: 12px; - padding: 16px; - } - } - // --------------------------------- - // LISTS - // --------------------------------- - - ol, - ul:not(.tabset-tabs) { - padding-top: 1rem; - width: 100%; - - @at-root .is-rtl & { - padding-left: 0; - padding-right: 1rem; - } - - li > ul, - li > ol { - padding-top: 0.5rem; - padding-left: 1rem; - - @at-root .is-rtl & { - padding-left: 0; - padding-right: 1rem; - } - } - - li + li { - margin-top: 0.5rem; - } - - &.links-list { - padding-left: 0; - list-style-type: none; - - @at-root .is-rtl & { - padding-right: 0; - } - - li { - background-color: mc("grey", "50"); - background-image: linear-gradient(to bottom, #fff, mc("grey", "50")); - border-right: 1px solid mc("grey", "200"); - border-bottom: 1px solid mc("grey", "200"); - border-left: 5px solid mc("grey", "300"); - box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1); - padding: 1rem; - border-radius: 5px; - font-weight: 500; - - @at-root .is-rtl & { - border-left-width: 1px; - border-right-width: 5px; - } - - &:hover { - background-image: linear-gradient(to bottom, #fff, lighten(mc("blue", "50"), 4%)); - border-left-color: mc("blue", "500"); - cursor: pointer; - - @at-root .is-rtl & { - border-left-color: mc("grey", "200"); - border-right-width: mc("blue", "500"); - } - } - - &::before { - content: ""; - display: none; - } - - > a { - display: block; - text-decoration: none; - margin: -1rem; - padding: 1rem; - - > em { - font-weight: 400; - font-style: normal; - color: mc("grey", "700"); - display: inline-block; - padding-left: 0.5rem; - border-left: 1px solid mc("grey", "300"); - margin-left: 0.5rem; - - &.is-block { - display: block; - padding-left: 0; - margin-left: 0; - border-left: none; - } - } - } - - > em { - font-weight: 400; - font-style: normal; - } - - @at-root .theme--dark & { - background-color: mc("grey", "50"); - background-image: linear-gradient(to bottom, lighten(mc("grey", "900"), 5%), mc("grey", "900")); - border-right: 1px solid mc("grey", "900"); - border-bottom: 1px solid mc("grey", "900"); - border-left: 5px solid mc("grey", "700"); - box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1); - - @at-root .theme--dark.is-rtl & { - border-left-width: 1px; - border-right-width: 5px; - } - - &:hover { - background-image: linear-gradient(to bottom, lighten(mc("grey", "900"), 2%), darken(mc("grey", "900"), 3%)); - border-left-color: mc("indigo", "300"); - cursor: pointer; - - @at-root .theme--dark.is-rtl & { - border-left-color: mc("grey", "900"); - border-right-width: mc("indigo", "300"); - } - } - } - } - } - - &.grid-list { - margin: 1rem 0 0 0; - background-color: #fff; - border: 1px solid mc("grey", "200"); - padding: 1px; - display: inline-block; - list-style-type: none; - - @at-root .theme--dark & { - background-color: #000; - border: 1px solid mc("grey", "800"); - } - - li { - background-color: mc("grey", "50"); - padding: 0.6rem 1rem; - display: block; - - &:nth-child(odd) { - background-color: mc("grey", "100"); - } - - & + li { - margin-top: 0; - } - - &::before { - content: ""; - display: none; - } - - @at-root .theme--dark & { - background-color: mc("grey", "900"); - - &:nth-child(odd) { - background-color: darken(mc("grey", "900"), 5%); - } - } - } - } - } - - ul:not(.tabset-tabs):not(.contains-task-list) { - list-style: none; - > li::before { - position: absolute; - left: -1.1rem; - content: "\25b8"; - color: mc("grey", "600"); - width: 1.35rem; - - @at-root .is-rtl & { - right: -1.1rem; - content: "\25C3"; - } - } - } - ol, - ul:not(.tabset-tabs) { - > li { - position: relative; - > p { - display: inline-block; - vertical-align: top; - padding-top: 0; - - &:first-child { - width: 100%; - } - } - } - } - - dl { - dt { - margin-top: 0.3em; - margin-bottom: 0.3em; - font-weight: bold; - } - - dd { - margin-left: 1.125em; - margin-bottom: 0.75em; - - > p { - padding: 0; - } - } - } - - // --------------------------------- - // CODE - // --------------------------------- - - code { - background-color: mc("indigo", "50"); - padding: 0 5px; - color: mc("indigo", "800"); - font-family: "Roboto Mono", monospace; - font-weight: normal; - font-size: 1rem; - box-shadow: none; - - &::before, - &::after { - display: none; - } - - @at-root .theme--dark & { - background-color: darken(mc("grey", "900"), 5%); - color: mc("indigo", "100"); - } - } - - .prismjs { - border: none; - border-radius: 5px; - box-shadow: initial; - background-color: mc("grey", "900"); - padding: 1rem 1rem 1rem 3rem; - margin: 1rem 0; - - @at-root .theme--dark & { - background-color: darken(mc("grey", "900"), 5%); - } - - > code { - background-color: transparent; - padding: 0; - color: #fff; - box-shadow: initial; - display: block; - font-size: 0.85rem; - font-family: "Roboto Mono", monospace; - - &:after, - &:before { - content: initial; - letter-spacing: initial; - } - } - } - - .diagram { - margin-top: 1rem; - overflow: auto; - - svg { - color-scheme: light !important; - - &:first-child { - direction: ltr; - } - - @at-root .theme--dark & { - color-scheme: dark !important; - } - } - } - - // --------------------------------- - // TASK LISTS - // --------------------------------- - - .contains-task-list { - padding-left: 0; - } - - .task-list-item { - position: relative; - list-style-type: none; - - &-checkbox[disabled] { - width: 1.1rem; - height: 1.1rem; - top: 2px; - position: relative; - margin-right: 2px; - - &::after { - position: absolute; - left: 0; - top: 0; - content: " "; - display: block; - width: 1.1rem; - height: 1.1rem; - background-color: #fff; - border: 1px solid mc("grey", "400"); - border-radius: 2px; - font-weight: bold; - font-size: 0.8rem; - line-height: 1rem; - text-align: center; - - @at-root .theme--dark & { - background-color: mc("grey", "900"); - border-color: mc("grey", "700"); - } - } - - &[checked]::after { - content: "✓"; - } - } - - .contains-task-list { - padding: 0.5rem 0 0 1.5rem; - } - } - - // --------------------------------- - // TABLES - // --------------------------------- - - table { - margin: 0.5rem 0; - border-spacing: 0; - border-radius: 5px; - border: 1px solid mc("grey", "300"); - - @at-root .theme--dark & { - border-color: mc("grey", "600"); - } - - &.dense { - td, - th { - font-size: 0.85rem; - padding: 0.5rem; - } - } - - th { - padding: 0.75rem; - border-bottom: 2px solid mc("grey", "500"); - color: mc("grey", "600"); - background-color: mc("grey", "100"); - - @at-root .theme--dark & { - background-color: darken(mc("grey", "900"), 8%); - border-bottom-color: mc("grey", "600"); - color: mc("grey", "500"); - } - - &:first-child { - border-top-left-radius: 7px; - } - &:last-child { - border-top-right-radius: 7px; - } - } - - td { - padding: 0.75rem; - } - - tr { - td { - border-bottom: 1px solid mc("grey", "300"); - border-right: 1px solid mc("grey", "100"); - - @at-root .theme--dark & { - border-bottom-color: mc("grey", "700"); - border-right-color: mc("grey", "800"); - } - - &:nth-child(even) { - background-color: mc("grey", "50"); - - @at-root .theme--dark & { - background-color: darken(mc("grey", "900"), 4%); - } - } - - &:last-child { - border-right: none; - } - } - - &:nth-child(even) { - td { - background-color: mc("grey", "50"); - - @at-root .theme--dark & { - background-color: darken(mc("grey", "800"), 8%); - } - - &:nth-child(even) { - background-color: mc("grey", "100"); - - @at-root .theme--dark & { - background-color: darken(mc("grey", "800"), 10%); - } - } - } - } - - &:last-child { - td { - border-bottom: none; - - &:first-child { - border-bottom-left-radius: 7px; - } - &:last-child { - border-bottom-right-radius: 7px; - } - } - } - } - } - - figure.table { - margin: 0; - - > table { - background-color: #fff; - margin: 0; - border-collapse: collapse; - box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.07); - - @at-root .theme--dark & { - background-color: darken(mc("grey", "900"), 3%); - } - - td, - th { - border: 1px solid mc("blue-grey", "100"); - box-shadow: - inset -1px -1px 0 0 #fff, - inset 1px 0 0 #fff; - padding: 0.5rem 0.75rem; - border-radius: 0 !important; - - @at-root .theme--dark & { - border-color: mc("grey", "700"); - box-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.5); - } - } - - th { - background-color: lighten(mc("blue-grey", "50"), 1%); - font-weight: 700; - color: mc("blue-grey", "700"); - - @at-root .theme--dark & { - background-color: mc("grey", "800"); - color: mc("grey", "400"); - } - } - - thead th { - border-bottom: 2px solid mc("blue-grey", "100"); - - @at-root .theme--dark & { - border-bottom: none; - } - } - - tbody th { - background-color: lighten(mc("blue-grey", "50"), 4%); - - @at-root .theme--dark & { - background-color: darken(mc("grey", "800"), 8%); - } - } - } - } - - // -> Add horizontal scrollbar when table is too wide - .table-container { - width: 100%; - overflow-x: auto; - } - - // --------------------------------- - // IMAGES - // --------------------------------- - - img { - max-width: 100%; - - &.align-left { - float: left; - margin: 0 1rem 1rem 0; - } - &.align-right { - float: right; - margin: 0 0 1rem 1rem; - z-index: 1; - position: relative; - } - &.align-center { - display: block; - max-width: 100%; - margin: auto; - } - &.align-abstopright { - position: absolute; - top: -90px; - right: 1rem; - height: calc(90px - 32px); - width: auto; - - @at-root .is-rtl & { - left: 1rem; - right: initial; - } - } - &.decor-shadow { - box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1); - } - &.decor-outline { - border: 1px solid mc("grey", "400"); - } - &.uml-diagram { - margin: 1rem 0; - } - } - - figure.image { - margin: 1rem 0 0 0; - - img { - margin: 0 auto; - } - figcaption { - padding: 4px 1rem; - text-align: center; - font-size: 12px; - color: mc("grey", "700"); - background-color: mc("grey", "100"); - - @at-root .theme--dark & { - color: mc("grey", "400"); - background-color: mc("grey", "800"); - } - } - } - - figure.image-style-align-right { - float: right; - } - - figure.image-style-align-left { - float: left; - } - - // --------------------------------- - // DETAILS - // --------------------------------- - - details { - background-color: mc("grey", "50"); - margin: 1rem 2rem; - border: 1px solid mc("grey", "300"); - border-radius: 7px; - - > p { - padding-left: 0; - } - - > summary { - border-radius: 7px; - background-color: mc("grey", "50"); - cursor: pointer; - display: list-item; - align-items: center; - padding: 0.4rem 1rem; - transition: background-color 0.4s ease; - - &:focus { - outline: none; - background-color: mc("grey", "100"); - } - - > h1, - h2, - h3, - h4, - h5, - h6 { - width: 95%; - display: inline-block; - - &:first-child { - margin-top: 0; - } - - &:only-child::after { - display: none; - } - } - } - - &[open] { - padding: 1rem; - - > summary { - background-color: mc("grey", "100"); - border-bottom: 1px solid mc("grey", "300"); - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin: -1rem -1rem 1rem -1rem; - } - } - - @at-root .theme--dark & { - background-color: mc("grey", "900"); - border-color: mc("grey", "700"); - - > summary { - background-color: mc("grey", "900"); - border-color: mc("grey", "700"); - } - - &[open] > summary { - background-color: lighten(mc("grey", "900"), 5%); - } - } - } - - // --------------------------------- - // HIGHLIGHTING - // --------------------------------- - - mark { - &.pen-red { - color: mc("red", "500"); - background-color: initial; - } - &.pen-green { - color: mc("green", "500"); - background-color: initial; - } - &.marker-blue { - background-color: mc("blue", "300"); - } - &.marker-yellow { - background-color: mc("yellow", "300"); - } - &.marker-pink { - background-color: mc("pink", "300"); - } - &.marker-green { - background-color: mc("green", "300"); - } - } - - .mention { - background-color: rgba(153, 0, 48, 0.1); - color: #990030; - - @at-root .theme--dark & { - color: mc("pink", "500"); - } - } -} - -// --------------------------------- -// COMMENTS -// --------------------------------- - -.comments { - &-container { - border-radius: 7px; - } - - &-header { - color: #fff; - padding: 8px 20px; - font-size: 16px; - font-weight: 500; - background-color: mc("blue-grey", "500"); - border-radius: 7px 7px 0 0; - - @at-root .theme--dark & { - background-color: lighten(mc("blue-grey", "900"), 5%); - } - } - - &-main { - background-color: mc("blue-grey", "50"); - border-radius: 0 0 7px 7px; - padding: 20px; - - @at-root .theme--dark & { - background-color: darken(mc("grey", "900"), 5%); - } - } -} - -// --------------- -// RTL FIXES -// Vuetify GH Issue: https://github.com/vuetifyjs/vuetify/issues/6317 -// --------------- - -.is-rtl { - .page-col-content.is-page-header { - @each $size, $width in $grid-breakpoints { - @media (min-width: $width) { - @for $n from 0 through 12 { - &.offset-#{$size}-#{$n} { - margin-left: 0; - margin-right: ($n / 12 * 100) * 1%; - } - } - } - } - } -} - -// --------------- -// PRINT OVERRIDES -// --------------- - -@media print { - .nav-header, - .v-navigation-drawer, - .v-btn--fab, - .page-col-sd, - .v-tooltip__content { - display: none !important; - } - - .layout { - display: block !important; - } - - .page-col-content { - flex-basis: 100% !important; - flex-grow: 1 !important; - max-width: 100% !important; - margin-left: 0 !important; - - > .v-toolbar { - border: 1px solid mc("grey", "300") !important; - border-radius: 7px !important; - - & + .v-divider { - display: none !important; - } - } - } - - .v-main { - padding: 0 !important; - font-size: 14px; - background-color: #fff; - } - - .v-main .contents { - color: #000; - background-color: #fff; - - @at-root .theme--dark & { - color: #000; - } - - .prismjs { - box-shadow: none; - background-color: #fff; - - @at-root .theme--dark & { - background-color: #fff; - } - - > code { - color: #000; - box-shadow: none; - text-shadow: none; - white-space: pre-wrap !important; - overflow-wrap: break-word !important; - } - } - } - - .comments-container { - display: none; - } - - .page-edit-shortcuts { - display: none; - } -} diff --git a/_references/custom_css_live.txt b/_references/custom_css_live.txt new file mode 100644 index 0000000..3ada9db --- /dev/null +++ b/_references/custom_css_live.txt @@ -0,0 +1,97 @@ +.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 new file mode 100644 index 0000000..f1972b5 --- /dev/null +++ b/_references/custom_javascript.txt @@ -0,0 +1,190 @@ +(() => { + 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/____live-copy.css b/_references/ref_palettes.css similarity index 100% rename from ____live-copy.css rename to _references/ref_palettes.css