archvillainetteandvickydotbat
985ff0755d
Closes #36. ## What was wrong `/wiki/manage` showed its table in near-black text on the near-black page: the header row, the `tid`, `Posts` and `Created` columns were effectively invisible. ## Root cause The theme repaints Bootstrap's **light** colour mode dark (`$body-color`, `$body-bg`, `$card-bg`, …) but never overrode `$body-emphasis-color`, which Bootstrap defaults to `$black` (`#09080b` here). Everything that chains to `--bs-emphasis-color` inherited that ink: - `--bs-table-color` / `-striped-` / `-hover-` / `-active-` on any plain `.table` - `--bs-tooltip-bg` (dark text on a dark tooltip) - `--bs-nav-tabs-link-active-color`, `--bs-nav-underline-link-active-color` - `--bs-list-group-action-hover-color` / `-active-color` - the `.text-emphasis` / `.link-body-emphasis` utilities `_controls.scss` had already patched this by hand for the two tables anyone had noticed (`notification/table`, `flags/list`) and for post-content tables. Every other table in the forum was still broken. Fixing the variable once is a smaller diff than a third per-table patch, and it covers tables that do not exist yet. ## The change One variable in `scss/overrides.scss` — the file whose stated job is exactly this — plus a contract test so the next dark-repaint variable that goes missing fails a check instead of shipping. ## Verification Booted the `sow-nodebb` dev stack with this working tree mounted (`PLUGIN_PATH=../sow-nodebb-theme`), seeded a wiki namespace with topics, and compared `/wiki/manage` before and after: unreadable → fully legible, gold rules and buttons unchanged. Also eyeballed `/categories`, `/notifications`, `/user/admin`, a topic, `/wiki` and `/flags` for regressions — none. The ACP is unaffected: it builds from `admin/overrides`, not this file. All `tests/*.test.js` pass; the new test fails when the variable is reverted. Co-authored-by: vickydotbat <zoelynne.victoria@gmail.com> Reviewed-on: #37
120 lines
4.1 KiB
SCSS
120 lines
4.1 KiB
SCSS
// only overrides to bs5 variables here
|
|
|
|
$font-path: "./plugins/nodebb-theme-westgate";
|
|
|
|
$wg-ink: #0f0d12;
|
|
$wg-ink-2: #141119;
|
|
$wg-panel: #18141d;
|
|
$wg-panel-2: #110f15;
|
|
$wg-plum: #2a1222;
|
|
$wg-plum-soft: #3a1830;
|
|
$wg-gold: #c2a35a;
|
|
$wg-gold-soft: #a8893f;
|
|
$wg-text: #e6e0d6;
|
|
$wg-text-soft: #b9b2a6;
|
|
$wg-text-muted: #9a9086;
|
|
$wg-red: #8e3438;
|
|
|
|
// below are the default values from harmony theme overrides.scss file
|
|
// feel free to change these for your custom theme
|
|
|
|
// Harmony colours
|
|
$white: #f3ede4 !default;
|
|
$gray-100: #e6e0d6 !default;
|
|
$gray-200: #cfc5b7 !default;
|
|
$gray-300: #b9b2a6 !default;
|
|
$gray-400: #9a9086 !default;
|
|
$gray-500: #7f756f !default;
|
|
$gray-600: #625760 !default;
|
|
$gray-700: #3a323c !default;
|
|
$gray-800: #241f28 !default;
|
|
$gray-900: #141119 !default;
|
|
$black: #09080b !default;
|
|
|
|
$blue: #8fb3c4 !default;
|
|
$red: $wg-red !default;
|
|
$yellow: $wg-gold !default;
|
|
$green: #789365 !default;
|
|
$cyan: #7cafc2 !default;
|
|
|
|
$primary: $wg-gold !default;
|
|
$secondary: $wg-text-muted !default;
|
|
$success: $green !default;
|
|
$info: $cyan !default;
|
|
$warning: $yellow !default;
|
|
$danger: $red !default;
|
|
$light: $wg-text !default;
|
|
$dark: $wg-ink !default;
|
|
|
|
$body-color: $wg-text-soft !default;
|
|
$body-bg: $wg-ink !default;
|
|
// We repaint Bootstrap's LIGHT colour mode dark, so emphasis must be light too.
|
|
// Bootstrap defaults it to $black; leaving it there paints near-black text on our
|
|
// dark surfaces wherever a component chains to --bs-emphasis-color: plain .table
|
|
// (e.g. /wiki/manage), tooltips, nav-tabs/nav-underline active links, list-group
|
|
// hover states, and the .text-emphasis / .link-body-emphasis utilities.
|
|
$body-emphasis-color: $wg-text !default;
|
|
$body-tertiary-bg: $wg-panel !default;
|
|
$text-muted: $wg-text-muted !default;
|
|
$border-color: rgba($wg-gold, 0.14) !default;
|
|
$link-color: $wg-gold !default;
|
|
$link-hover-color: lighten($wg-gold, 9%) !default;
|
|
|
|
$card-bg: $wg-panel !default;
|
|
$card-cap-bg: $wg-panel-2 !default;
|
|
$card-border-color: rgba($wg-gold, 0.12) !default;
|
|
$dropdown-bg: #18141d !default;
|
|
$dropdown-border-color: rgba($wg-gold, 0.16) !default;
|
|
$dropdown-link-color: $wg-text-soft !default;
|
|
$dropdown-link-hover-color: $wg-text !default;
|
|
$dropdown-link-hover-bg: rgba($wg-gold, 0.08) !default;
|
|
$input-bg: rgba($white, 0.025) !default;
|
|
$input-color: $wg-text !default;
|
|
$input-border-color: rgba($wg-gold, 0.18) !default;
|
|
$input-focus-border-color: rgba($wg-gold, 0.42) !default;
|
|
$input-placeholder-color: rgba($wg-text-soft, 0.74) !default;
|
|
$btn-border-radius: 6px !default;
|
|
$border-radius: 8px !default;
|
|
$border-radius-sm: 6px !default;
|
|
|
|
$btn-ghost-hover-color: mix($light, $dark, 90%);
|
|
$btn-ghost-active-color: lighten($btn-ghost-hover-color, 5%);
|
|
$btn-ghost-hover-color-dark: mix($dark, $light, 90%);
|
|
$btn-ghost-active-color-dark: lighten($btn-ghost-hover-color-dark, 5%);
|
|
|
|
:root {
|
|
--btn-ghost-hover-color: #{$btn-ghost-hover-color};
|
|
--btn-ghost-active-color: #{$btn-ghost-active-color};
|
|
}
|
|
[data-bs-theme="dark"] {
|
|
--btn-ghost-hover-color: #{$btn-ghost-hover-color-dark};
|
|
--btn-ghost-active-color: #{$btn-ghost-active-color-dark};
|
|
}
|
|
|
|
// no caret on dropdown-toggle
|
|
$enable-caret: false;
|
|
|
|
// disable smooth scroll, this makes window.scrollTo(0,0) in ajaxify.js take x milliseconds
|
|
$enable-smooth-scroll: false;
|
|
|
|
$enable-shadows: true;
|
|
|
|
$link-decoration: none;
|
|
$link-hover-decoration: underline;
|
|
|
|
// Custom fonts
|
|
$font-family-sans-serif: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
$font-family-secondary: "Cinzel", Georgia, "Times New Roman", serif !default;
|
|
$font-family-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
|
$font-weight-semibold: 500 !default;
|
|
$small-font-size: 0.875rem !default;
|
|
|
|
$breadcrumb-divider: quote("→");
|
|
$breadcrumb-divider-color: $wg-gold-soft !default;
|
|
$breadcrumb-active-color: $body-color !default;
|
|
$breadcrumb-item-padding-x: 12px !default;
|
|
|
|
.form-control::placeholder, .bootstrap-tagsinput::placeholder {
|
|
color: $input-placeholder-color !important;
|
|
}
|