/** * tz-framework – Core Stylesheet * * Served automatically at /tz-assets/tz.css via Router::serveFrameworkAssets(). * * Theming * ------- * Colors are defined as CSS custom properties in :root (light) and [data-theme="dark"]. * The element receives data-theme="light|dark|auto" from the server (APP_DEFAULT_THEME). * A small inline script in applies the user's saved preference from localStorage * before this file is parsed, preventing a flash of the wrong theme. * * Extending * --------- * Override variables in your own stylesheet: * :root { --primary: #7c3aed; } * Inject your stylesheet via View::addStyle('/my.css') or {styles} in your layout. */ /* ── Custom Properties (light theme) ──────────────────────────────────────── */ :root { color-scheme: light; /* Surfaces */ --bg: #f9f6f2; --surface: #ffffff; /* Brand */ --primary: #ea580c; --primary-dark: #c2410c; --primary-fg: #ffffff; /* Text */ --text: #1c1917; --muted: #78716c; /* Borders & shadows */ --border: #e5ddd4; --radius: 8px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); /* Navigation */ --nav-bg: #1c1917; --nav-fg: rgba(255, 255, 255, 0.80); --nav-fg-active: #ffffff; --nav-hover-bg: rgba(255, 255, 255, 0.12); /* Alerts */ --alert-error-bg: #fef2f2; --alert-error-bd: #fecaca; --alert-error-fg: #dc2626; --alert-success-bg:#f0fdf4; --alert-success-bd:#bbf7d0; --alert-success-fg:#16a34a; --alert-info-bg: #fff7ed; --alert-info-bd: #fed7aa; --alert-info-fg: #c2410c; /* Form errors */ --error-fg: #dc2626; --error-bd: #fca5a5; /* Buttons */ --btn-ghost-bg: #ede8e3; --btn-ghost-hover: #ddd7cf; --btn-ghost-fg: #1c1917; } /* ── Dark Theme ────────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --bg: #1a1816; --surface: #252220; --primary: #fb923c; --primary-dark: #f97316; --text: #f5ede4; --muted: #a09890; --border: #3c3530; --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --nav-bg: #141210; --nav-fg: rgba(255, 255, 255, 0.78); --nav-fg-active: #ffffff; --nav-hover-bg: rgba(255, 255, 255, 0.10); --alert-error-bg: #2d1516; --alert-error-bd: #7f1d1d; --alert-error-fg: #fca5a5; --alert-success-bg:#162016; --alert-success-bd:#14532d; --alert-success-fg:#86efac; --alert-info-bg: #291c0e; --alert-info-bd: #7c4a1a; --alert-info-fg: #fdba74; --error-fg: #f87171; --error-bd: #ef4444; --btn-ghost-bg: #38332d; --btn-ghost-hover: #46403a; --btn-ghost-fg: #f0ebe5; } /* ── Auto: follow system preference ───────────────────────────────────────── */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; --bg: #1a1816; --surface: #252220; --primary: #fb923c; --primary-dark: #f97316; --text: #f5ede4; --muted: #a09890; --border: #3c3530; --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --nav-bg: #141210; --nav-fg: rgba(255, 255, 255, 0.78); --nav-fg-active: #ffffff; --nav-hover-bg: rgba(255, 255, 255, 0.10); --alert-error-bg: #2d1516; --alert-error-bd: #7f1d1d; --alert-error-fg: #fca5a5; --alert-success-bg:#162016; --alert-success-bd:#14532d; --alert-success-fg:#86efac; --alert-info-bg: #291c0e; --alert-info-bd: #7c4a1a; --alert-info-fg: #fdba74; --error-fg: #f87171; --error-bd: #ef4444; --btn-ghost-bg: #38332d; --btn-ghost-hover: #46403a; --btn-ghost-fg: #f0ebe5; } } /* ── Reset ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Base ──────────────────────────────────────────────────────────────────── */ body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } a { color: var(--primary); } /* ── Layout ────────────────────────────────────────────────────────────────── */ .container { max-width: 1100px; margin: 2rem auto; padding: 0 1.25rem; } /* ── Page header ───────────────────────────────────────────────────────────── */ /* Standard top row: title on the left, action buttons on the right. */ /* Usage:

…

*/ /*
…
*/ .tz-page-header { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .tz-page-title { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.2; } .tz-page-subtitle { margin: .15rem 0 0; font-size: .88rem; color: var(--muted); font-weight: 400; } .tz-page-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } /* ── Card ──────────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; margin-bottom: 1.5rem; } @media (max-width: 480px) { .card { padding: 1rem; } } h1 { font-size: 1.75rem; margin-bottom: 0.75rem; } h2 { font-size: 1.35rem; margin-bottom: 0.75rem; } p { color: var(--muted); margin-bottom: 1rem; } /* ── Buttons ───────────────────────────────────────────────────────────────── */ .btn { display: inline-block; padding: 0.55rem 1.4rem; background: var(--primary); color: var(--primary-fg); border-radius: var(--radius); text-decoration: none; border: none; cursor: pointer; font-size: 1rem; font-family: inherit; line-height: 1.25; -webkit-appearance: none; appearance: none; /* removes native