/* * gideonite-tokens.css * Gideonite * * Created by Tolu Oridota on 8/8/23. * Copyright © 2023 Nexus Connect. All rights reserved. * * Brand color tokens + Bootstrap 5.3 theme overrides. * * Why this file exists (and lives separate from user.min.css): * The Phoenix theme ships a hollow `user.min.css` meant for user overrides. * Instead of editing the minified file by hand, we load THIS file AFTER * theme.min.css and user.min.css in head.ejs so its :root cascade wins. * Keeping tokens in their own file means: * - Easy to diff in PRs (branding changes are isolated) * - Easy to swap themes in the future (replace one ) * - Source mapping stays intact for the Phoenix minified CSS * * Layered structure (top → bottom): * 1. Raw brand palette — --gideonite-* primitives pulled from * Resouces/ColorSpecs/gideonite-theme-tokens.json * 2. Semantic app tokens — --color-* aliases for app-level usage * (e.g. --color-primary-hover) so component * CSS doesn't hardcode hex values. * 3. Bootstrap overrides — --bs-* variables Bootstrap 5.3 reads at * runtime. Overriding these reskins every * btn, badge, alert, bg-*, text-*, border-* * utility in one shot. Both the hex form * AND the rgb triplet form are required — * Bootstrap uses the triplet inside rgba() * calls (e.g. box-shadow tints on :focus). * * Dark mode: Phoenix listens to `data-bs-theme="dark"` on . We * override the default dark-mode accent colors so "Gideonite navy + gold" * stays consistent whether the user flips the sun/moon toggle or not. */ :root { /* ── 1. Raw brand palette ──────────────────────────────────────── */ --gideonite-navy: #012D64; --gideonite-blue: #0B5098; --gideonite-signal-blue: #2376C3; --gideonite-gold: #E4A218; --gideonite-gold-light: #FCD85B; --gideonite-obsidian: #0B0F14; --gideonite-slate-900: #1F2937; --gideonite-steel-700: #5F6364; --gideonite-silver-500: #A2A5A6; --gideonite-silver-300: #DDDFDF; --gideonite-cloud: #F5F7FA; --gideonite-white: #FFFFFF; /* ── 2. Semantic app tokens (use these in custom component CSS) ── */ --color-primary: var(--gideonite-blue); --color-primary-hover: var(--gideonite-navy); --color-accent: var(--gideonite-gold); --color-accent-soft: var(--gideonite-gold-light); --color-bg: var(--gideonite-cloud); --color-surface: var(--gideonite-white); --color-text: var(--gideonite-slate-900); --color-text-muted: var(--gideonite-steel-700); --color-border: var(--gideonite-silver-300); --color-success: #198754; --color-danger: #DC3545; --color-warning: var(--gideonite-gold); --color-info: var(--gideonite-signal-blue); /* ── 3. Bootstrap 5.3 theme variables ──────────────────────────── */ /* Both `--bs-` (hex, used directly by components) and the `--bs--rgb` triplet (used inside rgba() for focus rings, alert backgrounds, table-striped tints, etc.) must be set. */ --bs-primary: #0B5098; --bs-primary-rgb: 11, 80, 152; --bs-secondary: #A2A5A6; --bs-secondary-rgb: 162, 165, 166; --bs-success: #198754; --bs-success-rgb: 25, 135, 84; --bs-info: #2376C3; --bs-info-rgb: 35, 118, 195; --bs-warning: #E4A218; --bs-warning-rgb: 228, 162, 24; --bs-danger: #DC3545; --bs-danger-rgb: 220, 53, 69; --bs-light: #F5F7FA; --bs-light-rgb: 245, 247, 250; --bs-dark: #012D64; --bs-dark-rgb: 1, 45, 100; /* Link color + hover — default Bootstrap uses --bs-primary, but the hover color defaults to a computed darker shade. Pin it to navy so the "click a link, it goes navy" behavior matches the brand. */ --bs-link-color: #0B5098; --bs-link-color-rgb: 11, 80, 152; --bs-link-hover-color: #012D64; --bs-link-hover-color-rgb: 1, 45, 100; } /* * Dark-mode overrides. Phoenix toggles `data-bs-theme="dark"` on * when the user clicks the moon icon. Bootstrap's default dark palette * desaturates primary — we want the full-strength gold accent to pop * against the dark background, and navy-on-dark becomes the signal blue * (navy has too little contrast against near-black). */ [data-bs-theme="dark"] { --bs-primary: #2376C3; /* signal blue reads brighter on dark */ --bs-primary-rgb: 35, 118, 195; --bs-link-color: #2376C3; --bs-link-color-rgb: 35, 118, 195; --bs-link-hover-color: #FCD85B; /* gold-light for hover on dark bg */ --bs-link-hover-color-rgb: 252, 216, 91; } /* * ── Table edge padding inside flush card bodies ────────────────────── * * Pattern used across the app (dashboard watchlist / gainers / losers, * admin user-management tables): * *
*
* * ... * * The `.p-0` on .card-body lets the table bleed edge-to-edge (so the * row divider lines span the full card width — visually cleaner than a * table floating inside card padding). But Bootstrap's default cell * padding only spaces cells FROM EACH OTHER — the first cell's left * edge and the last cell's right edge end up flush against the card * border, which reads as a layout bug. * * Fix: add horizontal breathing room to the first and last cell of * every row (both and ). 1rem matches Bootstrap's * `ps-3` / `pe-3` utility scale, which is the padding you'd apply * manually per-cell without this rule. * * Selector walk: * .card-body.p-0 the flush card body * > .table-responsive Bootstrap's scroll wrapper * > .table the table itself * > :not(caption) skip ) * > :first-child / :last-child first or last cell in that row * * Using padding-inline-* instead of padding-left/-right keeps the rule * RTL-friendly (matches Bootstrap 5's own logical-property convention). */ .card-body.p-0 > .table-responsive > .table > :not(caption) > * > :first-child { padding-inline-start: 1rem; } .card-body.p-0 > .table-responsive > .table > :not(caption) > * > :last-child { padding-inline-end: 1rem; }
FirstLast
, pick thead/tbody/tfoot * > * every row (