/* ========================================================================== Project Stylesheet (Time-Tracker App) Purpose: - Centralized color system via CSS variables (light/dark ready) - Consistent buttons, badges, cards, and calendar visuals - Small utility classes used across templates How to tweak: - Prefer changing tokens under `:root` (and `body.theme-dark`) to update colors globally. - Avoid deleting rules; many templates rely on these class names. - When adding variants, append at the end and keep comments concise. Notes: - Tailwind is used via CDN in templates; this file layers brand styles on top of it and fills gaps (e.g., calendars, print helpers). ========================================================================== */ /* --- Table of Contents ----------------------------------------------------- 1) Design tokens (light/dark) 2) Base elements 3) Buttons & forms 4) Status chips 5) Utilities (cards, table-like, toast, etc.) 6) Calendar system 7) Micro-animations 8) Landing helpers 9) Badges & highlights (holiday, today) 10) Print helpers 11) Today bubbles 12) Calendar squad badge 13) Accessibility & motion prefs ------------------------------------------------------------------------- */ /* static/style.css */ /* ------------------------------ /* Design Tokens (Themeable) These variables drive the whole app's palette. Change once, affect everywhere. Light theme lives in :root; dark theme overrides live under body.theme-dark. */ :root { /* Light (default) */ --bg: #f5f7fa; --surface: #ffffff; --text: #333333; --muted: #6b7280; --heading: #2a4d69; --link: #2a4d69; --link-hover: #1e3c57; --border: #e5e7eb; /* Accents */ --gold: #c9a227; --gold-hover: #e6b93a; --success: #16a34a; --warning: #f59e0b; --danger: #dc2626; /* Chips (light) */ --chip-available-bg: #d4edda; --chip-available-fg: #155724; --chip-sick-bg: #f8d7da; --chip-sick-fg: #721c24; --chip-vacation-bg: #fff3cd; --chip-vacation-fg: #856404; } /* Theme: Dark Add `theme-dark` to to opt into a darker palette. Variables below mirror the light tokens so components don't need special-case CSS. */ /* Dark theme switch: apply to */ body.theme-dark { --bg: #0d0d0d; /* primary dark */ --surface: #1a1a1a; /* card bg */ --text: #f5f5f5; --muted: #b3b3b3; --heading: #f5f5f5; --link: #c9a227; /* gold */ --link-hover: #e6b93a; --border: #2e2e2e; --gold: #c9a227; --gold-hover: #e6b93a; --success: #4ade80; /* readable on dark */ --warning: #fbbf24; --danger: #f87171; /* Chips (dark) */ --chip-available-bg: rgba(22, 163, 74, 0.15); --chip-available-fg: #86efac; --chip-sick-bg: rgba(220, 38, 38, 0.15); --chip-sick-fg: #fca5a5; --chip-vacation-bg: rgba(245, 158, 11, 0.15); --chip-vacation-fg: #fcd34d; } /* ------------------------------ Base elements (use variables) ------------------------------ */ body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg); color: var(--text); margin: 0; padding: 0; } h1, h2, h3 { color: var(--heading); margin-bottom: 0.5em; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } /* Focus ring for links (accessibility, brand-consistent) */ a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; } /* Container card */ .container { max-width: 960px; margin: 2em auto; padding: 2em; background-color: var(--surface); border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.06); } /* Buttons - Semantic color is gold by default (brand accent) - Subtle elevation on hover for affordance - .btn is reusable on for nav actions */ /* Buttons */ button, input[type="submit"], .btn { background-color: var(--gold); color: #0d0d0d; /* readable on gold */ border: 1px solid transparent; padding: 0.65em 1.2em; border-radius: 12px; cursor: pointer; font-weight: 700; transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease; display: inline-flex; align-items: center; gap: .25rem; box-shadow: 0 2px 6px rgba(201,162,39,0.25); text-decoration: none; /* for */ } button:hover, input[type="submit"]:hover, .btn:hover { background-color: var(--gold-hover); box-shadow: 0 6px 16px rgba(233, 185, 58, 0.32); } button:active, input[type="submit"]:active, .btn:active { transform: translateY(1px); } /* Forms */ label { display: block; margin-top: 1em; font-weight: 600; color: var(--text); } input, select, textarea { width: 100%; padding: 0.6em 0.75em; margin-top: 0.3em; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25); } /* Lists */ ul { padding-left: 1.5em; } /* Status Chips Compatible with older templates that render … Colors are bound to tokens to stay readable in light/dark modes. */ /* ------------------------------ Status chips (compatible with old classes) ------------------------------ */ .status-box { display: inline-block; padding: 0.25em 0.6em; border-radius: 999px; font-size: 0.85em; font-weight: 700; border: 1px solid transparent; } .status-Available { background-color: var(--chip-available-bg); color: var(--chip-available-fg); border-color: rgba(22, 163, 74, 0.25); } .status-Sick { background-color: var(--chip-sick-bg); color: var(--chip-sick-fg); border-color: rgba(220, 38, 38, 0.25); } .status-Vacation { background-color: var(--chip-vacation-bg); color: var(--chip-vacation-fg); border-color: rgba(245, 158, 11, 0.25); } /* ------------------------------ Helpful utilities for templates ------------------------------ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .card--tight { padding: 0.75rem 1rem; } .card--loose { padding: 1rem 1.25rem; } /* Table-like helper For simple list rows with trailing actions (used in admin tables). */ .table-like { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .table-like .row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; } .table-like .row + .row { border-top: 1px solid var(--border); } #toast { transition: opacity 0.5s ease; } #toast.fade-out { opacity: 0; } /* A11y helper: content visible to screen readers but visually hidden */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Calendar System .calendar-container, .weekday-head: base text colors .cal-empty: placeholder cells (outside current month) .cal-card: day cards (hover affordance + border) .cal-card--mine: highlights days relevant to the logged-in user's squad .cal-holiday / .badge--holiday: annotate holidays .cal-today / .cal-today-glow: stronger focus for "today" cell .badge--today: tiny inline indicator used near headers */ /* ── Calendar theming helpers ─────────────────────────── */ .calendar-container { color: var(--text); } .weekday-head { color: var(--muted); } .cal-empty { background: rgba(255,255,255,0.04); border: 1px solid var(--border); } /* Day card base */ .cal-card { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .cal-card:hover { border-color: var(--gold); box-shadow: 0 6px 16px rgba(201,162,39,0.18); } /* Highlight for the logged-in user's squad day */ .cal-card--mine { outline: 2px solid rgba(201,162,39,0.55); outline-offset: 0px; box-shadow: 0 6px 18px rgba(201,162,39,0.22); } /* Muted text utility */ .muted { color: var(--muted); } /* ---------- Emoji helper ---------- */ .emoji { font-size: 28px; line-height: 1; display: inline-block; transform: translateY(1px); } /* ---------- Segmented control ---------- */ .segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); } .segmented label { position: relative; cursor: pointer; } .segmented input { position: absolute; opacity: 0; pointer-events: none; } .segmented .pill { display: inline-flex; align-items: center; justify-content: center; padding: .45rem .9rem; font-weight: 700; color: var(--text); transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease; } .segmented label:hover .pill { background: rgba(201,162,39,0.08); } .segmented .pill:active { transform: translateY(1px); } .segmented input:focus + .pill { box-shadow: 0 0 0 3px rgba(201,162,39,0.25) inset; } .segmented input:checked + .pill { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold), 0 1px 4px rgba(201,162,39,0.25); } /* ---------- Progress bars ---------- */ .progress { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.06); border: 1px solid var(--border); } .progress__fill { height: 100%; background: var(--gold); } /* ---------- Micro-animations ---------- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn .45s ease-out both; } /* --- Landing page helpers (appearance only) ------------------ */ .nav-card { display: block; color: inherit; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 1rem 1.25rem; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: transform .12s ease, box-shadow .18s ease, border-color .15s ease; text-decoration: none; } .nav-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 10px 24px rgba(201,162,39,0.18); text-decoration: none; } .nav-card__title { font-weight: 700; } .nav-card__meta { font-size: .85rem; } .admin-banner { padding: .6rem 1rem; background: rgba(201,162,39,0.12); border: 1px solid rgba(201,162,39,0.35); border-radius: 12px; text-align: center; color: var(--gold-hover); font-weight: 800; letter-spacing: .06em; } /* Emoji sizing on landing */ .emoji { font-size: 24px; line-height: 1; display: inline-block; transform: translateY(2px); } /* Note: `.emoji` appears twice intentionally; the latter tunes size on landing. */ /* Danger button variant for Logout */ .btn.btn--danger { background: var(--danger); color: #fff; box-shadow: 0 2px 6px rgba(220, 38, 38, .25); } .btn.btn--danger:hover { background: #b91c1c; box-shadow: 0 6px 16px rgba(220, 38, 38, .32); } /* Light blue badge for Logged */ .badge--info { background: rgba(59,130,246,0.15); color: #93c5fd; border-color: rgba(59,130,246,0.35); } /* Holiday highlight */ .badge--holiday { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border-color: rgba(245, 158, 11, 0.35); } .cal-holiday { border-color: rgba(245,158,11,0.6); box-shadow: 0 0 0 2px rgba(245,158,11,0.25) inset; } /* Today highlight (when you're on duty) */ .cal-today { /* subtle inner ring */ box-shadow: inset 0 0 0 2px rgba(201,162,39,0.55); } /* Outer glow to make today pop just a bit more */ .cal-today-glow { box-shadow: inset 0 0 0 2px rgba(201,162,39,0.55), /* inner ring (kept for robustness) */ 0 0 0 3px rgba(201,162,39,0.25), /* soft outline */ 0 12px 26px rgba(201,162,39,0.20); /* outer glow */ } /* Tiny pill for "Today" */ .badge--today { background: rgba(99,102,241,0.15); /* indigo-ish */ color: #a5b4fc; border-color: rgba(99,102,241,0.35); } /* Print helpers Elements marked `.only-print` appear only in print; footer stays pinned. */ .only-print { display: none; } @media print { .only-print { display: block !important; } .print-footer { position: fixed; bottom: 0; left: 0; right: 0; padding-top: 4px; background: #fff !important; color: #000 !important; } } /* Today bubbles (day number) - .today-bubble: indigo glow (original) - .today-bubble-yellow: yellow glow (higher contrast on tinted columns) Keep both; templates switch the class based on product preference. */ .today-bubble { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.55rem; /* slightly bigger */ border-radius: 9999px; /* pill/circle */ background: rgba(99, 102, 241, 0.25); /* indigo tint */ box-shadow: 0 0 0.5rem rgba(99, 102, 241, 0.5); /* soft glow */ color: #e5e7eb; /* near-white text */ font-weight: 700; transform: scale(1.06); } .today-bubble-yellow { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.55rem; /* slightly larger than default day */ border-radius: 9999px; /* pill/circle */ background: rgba(250, 204, 21, 0.18); /* amber tint */ box-shadow: 0 0 10px rgba(250, 204, 21, 0.75); /* yellow glow */ color: #fefce8; /* light text for contrast */ font-weight: 700; line-height: 1; /* keep the bubble tight */ transform: scale(1.06); /* small emphasis */ text-shadow: 0 0 2px rgba(0,0,0,0.35); /* keep digits readable */ } /* === Calendar: Squad letter badge (appears on 'my' days) ================= */ .cal-card { position: relative; } /* ensure absolute children (badge) position correctly */ .cal-squad-badge { position: absolute; top: 6px; right: 6px; font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 9999px; background: var(--gold); /* brand accent for visibility */ color: #0d0d0d; /* readable on gold */ box-shadow: 0 1px 3px rgba(0,0,0,.25); letter-spacing: .02em; opacity: .98; line-height: 1; } /* High-contrast variant (optional utility if the card is busy) */ .cal-squad-badge--on-dark { background: #fef08a; /* light amber */ color: #1f2937; /* slate-800 */ } /* === Reusable notification badge ========================================== Usage: place inside a relatively-positioned parent (e.g., .relative), typically top-right. Color tokens can be swapped if you theme it. ------------------------------------------------------------------------- */ .notif-badge { position: absolute; top: -6px; right: -6px; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: var(--danger); color: #fff; font-size: 0.75rem; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--surface); } /* ========================================================================== Button System (standardized variants & sizes) - Use: ,