/* ═══════════════════════════════════════════════════════════════════════════ GetJustly — Theme switching (light default + dark) Light values live in each stylesheet's own :root. This file adds the one new shared token (--gj-on-accent) and the full DARK override, applied when is set by gj_theme.js. Selector [data-theme="dark"] beats the bare :root, so dark wins only when toggled. ─────────────────────────────────────────────────────────────────────────── */ :root { /* text/colour that sits ON the solid accent button (black in light) */ --gj-on-accent: #f6f6f7; --gj-topbar: rgba(255,255,255,0.72); /* glassy sticky top bar */ } html[data-theme="dark"] { /* ── GetJustly editorial + web tokens (getjustly_pages / _web / login) ── */ --gj-bg: #0a0a0a; --gj-surface: #161616; --gj-surface-raised: #1f1f1f; --gj-surface-hover: #1f1f1f; --gj-surface-elevated:#1f1f1f; --gj-surface-2: #1f1f1f; --gj-border: rgba(255,255,255,0.09); --gj-border-strong: rgba(255,255,255,0.15); --gj-border-hover: rgba(255,255,255,0.15); --gj-border-active: rgba(255,255,255,0.22); --gj-hairline: rgba(255,255,255,0.08); --gj-hairline-2: rgba(255,255,255,0.14); --gj-text: rgba(255,255,255,0.90); --gj-text-secondary: rgba(255,255,255,0.55); --gj-text-muted: rgba(255,255,255,0.38); --gj-text-faint: rgba(255,255,255,0.18); --gj-t1: rgba(255,255,255,0.92); --gj-t2: rgba(255,255,255,0.56); --gj-t3: rgba(255,255,255,0.40); --gj-ink: #f5f5f5; --gj-accent: #f5f5f5; --gj-accent-hover: #ffffff; --gj-accent-dim: rgba(255,255,255,0.07); --gj-on-accent: #0a0a0a; /* dark text on the white accent button */ --gj-brand: #f5f5f5; --gj-brand-bright: #f5f5f5; --gj-topbar: rgba(10,10,10,0.72); /* glassy dark top bar */ --gj-success: rgba(255,255,255,0.72); /* monochrome */ --gj-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4); /* ── Frappe web tokens (getjustly_web.css) ── */ --bg-color: #0a0a0a; --fg-color: #161616; --fg-hover-color: #1f1f1f; --text-color: rgba(255,255,255,0.90); --text-muted: rgba(255,255,255,0.45); --text-light: rgba(255,255,255,0.35); --heading-color: #f5f5f5; --border-color: rgba(255,255,255,0.09); --dark-border-color: rgba(255,255,255,0.14); --table-border-color: rgba(255,255,255,0.08); --gray-50: #161616; --gray-100: #1f1f1f; --gray-200: #262626; --gray-300: #333333; --card-bg: #161616; --navbar-bg: #0a0a0a; --modal-bg: #1f1f1f; --toast-bg: #1f1f1f; --popover-bg: #1f1f1f; --control-bg: #161616; --control-bg-on-gray: #1f1f1f; --subtle-fg: #161616; --subtle-accent: rgba(255,255,255,0.05); --disabled-control-bg:#161616; --card-bg: #161616; --btn-default-bg: #1f1f1f; --btn-default-hover-bg:#262626; --btn-primary: #f5f5f5; --primary-color: #f5f5f5; --scrollbar-thumb-color: rgba(255,255,255,0.16); --scrollbar-track-color: #0a0a0a; } /* Logos are black (brightness(0)) for light bars — invert to white on dark */ html[data-theme="dark"] .gj-pg-topbar-logo img, html[data-theme="dark"] .gj-footer-logo img, html[data-theme="dark"] .navbar .navbar-brand img, html[data-theme="dark"] .navbar-toggler-icon, html[data-theme="dark"] .navbar-toggler .icon { filter: brightness(0) invert(1) !important; } /* Smooth the flip (but not on first paint — gj_theme.js adds .gj-theme-ready) */ html.gj-theme-ready body, html.gj-theme-ready .gj-pg-root, html.gj-theme-ready .gj-pg-topbar, html.gj-theme-ready [class^="gj-"], html.gj-theme-ready [class*=" gj-"] { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* Chrome/nav/button links never underline on hover (Frappe's global a:hover adds one). Prose/article body links keep their underline. */ .gj-pg-topbar a:hover, .gj-footer a:hover, .gj-footer-col a:hover, .gj-settings-menu a:hover, .gj-settings-opt:hover, .gj-cp-action:hover, .gj-cp-next-cta:hover, .gj-cp-section:hover, .gj-kh-cta-primary:hover, .gj-kh-cta-secondary:hover, .gj-kh-card:hover, a.gj-btn:hover, .gj-btn:hover, .gj-link:hover { text-decoration: none !important; } /* ── ⋯ settings menu (theme + language) ─────────────────────────────── */ .gj-settings-menu { position: relative; display: inline-flex; align-items: center; font-family: var(--gj-font, -apple-system, BlinkMacSystemFont, "Inter", sans-serif); } .gj-settings-menu--float { position: fixed; top: 14px; right: 16px; z-index: 2147483000; } .gj-settings-btn { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--gj-text-secondary, rgba(0,0,0,0.55)); transition: color .15s, background .15s; } .gj-settings-menu--float .gj-settings-btn { background: var(--gj-surface, #fff); border: 1px solid var(--gj-border, rgba(0,0,0,0.08)); box-shadow: 0 2px 10px rgba(0,0,0,0.18); } .gj-settings-btn:hover { color: var(--gj-text, #171717); background: var(--gj-accent-dim, rgba(0,0,0,0.05)); } .gj-settings-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 196px; background: var(--gj-surface, #fff); border: 1px solid var(--gj-border, rgba(0,0,0,0.08)); border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,0.22); padding: 6px; } .gj-settings-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; color: var(--gj-text-muted, rgba(0,0,0,0.4)); padding: 9px 10px 4px; } /* The menu docks inside the page nav (often uppercase/letter-spaced links); keep menu options in normal case regardless of the host nav's link styles. */ .gj-settings-menu .gj-settings-opt, .gj-settings-pop a.gj-settings-opt { text-transform: none !important; letter-spacing: -0.005em !important; font-size: 13px !important; font-weight: 400; /* language items are and would otherwise inherit the host nav's muted link colour (higher specificity) — force readable menu text. */ color: var(--gj-text) !important; } .gj-settings-pop a.gj-settings-opt:hover { color: var(--gj-text) !important; } .gj-settings-opt { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 400; color: var(--gj-text, #171717); text-decoration: none !important; transition: background .12s; } .gj-settings-opt:hover { background: var(--gj-accent-dim, rgba(0,0,0,0.05)); } .gj-settings-opt.is-active { font-weight: 600; } .gj-settings-opt.is-active::after { content: "✓"; margin-left: auto; font-size: 12px; } .gj-settings-sep { height: 1px; background: var(--gj-border, rgba(0,0,0,0.08)); margin: 5px 4px; } /* The chat page is now theme-aware (light + dark, follows the ⋯ toggle). Its ⋯ menu inherits the page's themed --gj-* tokens, so no dark-lock is needed here — the button + popup flip with the rest of the chat UI. */ /* ── Global toast (replaces native alert) — theme-aware ─────────────── */ .gj-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px); z-index: 2147483600; display: flex; align-items: center; gap: 9px; background: var(--gj-surface, #fff); color: var(--gj-text, #171717); border: 1px solid var(--gj-border-strong, rgba(0,0,0,0.12)); border-radius: 12px; padding: 11px 16px; font-size: 0.85rem; max-width: 90vw; font-family: var(--gj-font, -apple-system, BlinkMacSystemFont, "Inter", sans-serif); box-shadow: 0 12px 36px rgba(0,0,0,0.28); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s cubic-bezier(0.22,1,0.36,1); } .gj-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .gj-toast svg { width: 16px; height: 16px; flex-shrink: 0; } .gj-toast.err svg { color: var(--gj-danger, #e5503e); }