/* ============================================================================= * SMS WEB Designer — admin GUI styles. * Visual identity inspired by yarotech.net: * - Dark-first palette (true black #0a0a0a) with subtle white surfaces * - Yarotech brand triad accent (red / green / blue) used sparingly * - Geist font (loaded from Google Fonts in _layout.ejs) * - Theme variables drive everything; light mode swaps them * ============================================================================= */ /* ---- Yarotech brand triad (constant across themes) ---- */ :root { --brand-red: #E53935; --brand-green: #2E9E2E; --brand-blue: #5B8AC5; } /* ---- Light theme (default for daytime use) ---- */ :root { --fg: #18191c; --bg: #faf9f7; --muted: #565e6e; --accent: var(--brand-blue); --accent-hover: #4a78b5; --danger: var(--brand-red); --ok: var(--brand-green); --border: #d6d9de; --surface: #fff; --surface-alt: #f9fafb; --flash-bg: #fff3cd; --flash-border: #ffe69c; --badge-ok-bg: #dcfce7; --badge-err-bg: #fee2e2; --badge-muted-bg: #e5e7eb; --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03); } /* ---- Dark theme (the yarotech.net look) ---- */ :root[data-theme="dark"] { --fg: #f4f4f5; --bg: #0a0a0a; --muted: #a1a1aa; --accent: #7BAEEF; /* lighter brand-blue for AA contrast on near-black */ --accent-hover: #94c2ff; --danger: #ff6b66; --ok: #4ade80; --border: rgba(255, 255, 255, 0.12); --surface: #131313; /* subtle elevated surface — "rgba(255,255,255,0.02)" baked into a solid */ --surface-alt: #1a1a1a; /* "rgba(255,255,255,0.04)" baked in */ --flash-bg: rgba(229, 57, 53, 0.12); --flash-border: rgba(229, 57, 53, 0.35); --badge-ok-bg: rgba(46, 158, 46, 0.15); --badge-err-bg: rgba(229, 57, 53, 0.15); --badge-muted-bg: rgba(255, 255, 255, 0.07); --shadow-card: 0 0 0 1px rgba(255,255,255,0.04); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fg: #f4f4f5; --bg: #0a0a0a; --muted: #a1a1aa; --accent: #7BAEEF; --accent-hover: #94c2ff; --danger: #ff6b66; --ok: #4ade80; --border: rgba(255, 255, 255, 0.12); --surface: #131313; --surface-alt: #1a1a1a; --flash-bg: rgba(229, 57, 53, 0.12); --flash-border: rgba(229, 57, 53, 0.35); --badge-ok-bg: rgba(46, 158, 46, 0.15); --badge-err-bg: rgba(229, 57, 53, 0.15); --badge-muted-bg: rgba(255, 255, 255, 0.07); --shadow-card: 0 0 0 1px rgba(255,255,255,0.04); } } /* ---- Reset + base ---- */ * { box-sizing: border-box; } body { margin: 0; font: 15px/1.62 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================================= * Left sidebar navigation (SaaS-style) — replaces the former top nav bar. * - Vertical rail: brand at top, scrollable link list, utility footer holding * the theme toggle, guided-tour "?" trigger, collapse control, and Logout. * - Collapsible to a slim icon-only rail. State persists in localStorage * ('admin-sidebar-collapsed') and is applied to before * paint (inline script in _layout.ejs) so there's no flash. * - On mobile it becomes an off-canvas left drawer toggled by #nav-toggle * (see the responsive layer below). * ============================================================================= */ :root { --sidebar-w: 236px; /* expanded rail width */ --sidebar-w-collapsed: 68px; /* icon-only rail width */ } .layout { display: flex; align-items: flex-start; min-height: 100vh; } .sidebar { position: sticky; top: 0; align-self: flex-start; flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; /* the nav list scrolls internally, not the rail */ transition: flex-basis 0.18s ease, width 0.18s ease, transform 0.22s ease; z-index: 40; } /* Vertical triad accent along the right edge — the yarotech signature line, rotated from the old topnav's bottom border. */ .sidebar::after { content: ''; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; background: linear-gradient(180deg, transparent 0%, var(--brand-red) 22%, var(--brand-green) 50%, var(--brand-blue) 78%, transparent 100%); opacity: 0.5; pointer-events: none; } /* ---- Brand (top of the rail) ---- */ .sidebar-top { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 16px 18px; min-height: 62px; } .brand { font-weight: 600; text-decoration: none; color: var(--fg); font-size: 15px; letter-spacing: -0.01em; display: inline-flex; align-items: center; flex-wrap: wrap; /* long business name -> "Web Agency" drops to the next line instead of being clipped */ gap: 2px 10px; /* row-gap 2px when wrapped, column-gap 10px inline */ min-width: 0; } .brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; } .brand-logo-dark { display: none; } :root[data-theme="dark"] .brand-logo-light { display: none; } :root[data-theme="dark"] .brand-logo-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo-light { display: none; } :root:not([data-theme="light"]) .brand-logo-dark { display: block; } } .brand-text { line-height: 1; white-space: nowrap; } /* Logo-less fallback: the tenant's business name as an accent-colored wordmark beside the constant "Web Agent" product name. Correct in light + dark via the theme var --accent (picks up the per-tenant accent injected by _layout.ejs). */ .brand-name { font-size: 16.5px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--accent); white-space: normal; /* a long name wraps across lines within the sidebar */ word-break: break-word; min-width: 0; } /* ---- Nav links (vertical list). #topnav-menu is preserved as the container. */ .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; } .sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background 0.14s ease, color 0.14s ease; } .sidebar-nav a:hover { color: var(--fg); background: var(--surface-alt); } .sidebar-nav a.active { color: var(--accent); background: rgba(91, 138, 197, 0.12); } /* Unread badge on the "What's New" + "Flags" nav items — a small red count pill, top-right of the item so it shows in both expanded and collapsed (icon-only) sidebar modes. BOTH host items MUST be position:relative, or the absolutely- positioned badge escapes to the nearest positioned ancestor and shows up as a stray dot near the top (this was the bug for the Flags badge). */ #nav-updates, #nav-flags { position: relative; } .nav-badge { position: absolute; top: 5px; right: 8px; box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; line-height: 1; background: #e5393e; color: #fff; border-radius: 8px; pointer-events: none; } /* The author `display:inline-flex` above beats the [hidden] attribute's UA `display:none`, so a count-0 badge would linger as an EMPTY red dot (the JS only sets `hidden`, expecting that to hide it). This makes `hidden` actually hide the badge — for both Flags and What's New. */ .nav-badge[hidden] { display: none; } /* One-time dashboard coachmark — an arrow tooltip pointing at the "+ New Client & Site" button (mirrors the chat "View Site" coachmark). Fixed + viewport-clamped by JS, so it's safe on any width. */ .dash-coach { position: fixed; z-index: 200; display: none; max-width: min(270px, calc(100vw - 16px)); padding: 10px 13px; background: #2563eb; color: #fff; border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,0.35); cursor: pointer; } .dash-coach.show { display: block; animation: dashCoachIn 0.25s ease-out; } @keyframes dashCoachIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .dash-coach .dash-coach-arrow { position: absolute; top: -7px; left: 20px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #2563eb; } :root[data-theme="dark"] .sidebar-nav a.active { background: rgba(123, 174, 239, 0.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar-nav a.active { background: rgba(123, 174, 239, 0.14); } } .nav-ico { width: 20px; height: 20px; flex-shrink: 0; } .nav-label { overflow: hidden; text-overflow: ellipsis; } /* ---- Utility footer (theme toggle, tour "?", collapse control, Logout) ---- */ .sidebar-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-top: 1px solid var(--border); } .sidebar-tools { display: flex; align-items: center; gap: 8px; } /* #11 — iOS-style sliding light/dark switch (replaces the plain emoji button). Same #theme-toggle id + click logic; the JS flips .is-dark to match the effective theme and the knob (carrying the current mode's icon) slides. `.rdy` gates the transition so a dark-mode load doesn't animate on first paint. */ #theme-toggle.theme-switch { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 4px 6px; border: 0; background: none; cursor: pointer; color: var(--fg); font: inherit; -webkit-tap-highlight-color: transparent; } #theme-toggle.theme-switch .theme-switch-track { position: relative; box-sizing: border-box; flex: 0 0 auto; width: 46px; height: 25px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-alt); } #theme-toggle.theme-switch.rdy .theme-switch-track { transition: background .28s ease, border-color .28s ease; } #theme-toggle.theme-switch .theme-switch-knob { position: absolute; top: 2px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30); display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; } #theme-toggle.theme-switch.rdy .theme-switch-knob { transition: transform .28s cubic-bezier(.5, .1, .3, 1.35); } #theme-toggle.theme-switch .theme-switch-knob::after { content: "☀️"; } #theme-toggle.theme-switch .theme-switch-text { font-size: 13px; font-weight: 500; letter-spacing: .01em; } #theme-toggle.theme-switch.is-dark .theme-switch-track { background: color-mix(in srgb, var(--accent) 52%, #12151b); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } #theme-toggle.theme-switch.is-dark .theme-switch-knob { transform: translateX(21px); } #theme-toggle.theme-switch.is-dark .theme-switch-knob::after { content: "🌙"; } #theme-toggle.theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } /* Collapsed rail: hide the word, keep just the switch. */ :root[data-sidebar="collapsed"] #theme-toggle.theme-switch .theme-switch-text { display: none; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; padding: 0; min-height: 0; /* override the global button min-height */ font-size: 15px; line-height: 1; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease; } .icon-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-alt); } .tour-trigger { font-weight: 700; } /* Labelled "? Tour" pill — the top-right guided-tour launcher beside New Client & Site. */ .tour-pill { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; width: auto; height: 36px; padding: 0 13px; min-height: 0; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease; } .tour-pill:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-alt); } .tour-pill .tour-pill-q { font-weight: 800; font-size: 15px; line-height: 1; } .sidebar-collapse { margin-left: auto; } /* push the collapse toggle to the far edge */ .sidebar-collapse .chev { width: 16px; height: 16px; transition: transform 0.18s ease; } .sidebar-logout { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background 0.14s ease, color 0.14s ease; } .sidebar-logout:hover { color: var(--danger); background: var(--surface-alt); } .sidebar-logout .nav-ico { width: 20px; height: 20px; flex-shrink: 0; } /* ---- Content column — sits beside the rail and flexes to fill the rest. */ .content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* ---- "+ New Site" quick-action ----------------------------------------------- * A persistent primary CTA to the new-build form (/admin/builds/new). * Desktop: a slim top bar (.content-topbar) pins it to the top-right of the * content column, lined up with
's right edge. Mobile: the same button is * relocated into .mobile-topbar (see the responsive layer) beside the hamburger. * Background uses --accent / --accent-hover, so it tracks the injected per-tenant * brand accent AND dark mode automatically, matching the app's other primary * buttons (which are