/* * Kodi — Shared Styles * * ALL colors live here as CSS variables. No hex values in any HTML file. * Theme toggle via data-theme on . Managed by theme.js. * * Usage: in every page . */ /* ================================================================ THEME VARIABLES ================================================================ */ :root, [data-theme="light"] { /* Page */ --bg: #f8f7f4; --text: #2a2a2a; --text-secondary: #666; --text-muted: #999; --text-dim: #bbb; --text-faint: #ccc; --heading: #1a1a1a; /* Surfaces */ --surface: #f0eeea; --surface-alt: #edecea; --surface-hover: #e8e6e1; --surface-input: #fff; --surface-raised: #f4f3f0; --surface-inset: #f8f7f4; /* Borders */ --border: #e0ddd8; --border-light: #e8e6e1; --border-strong: #d8d6d1; --border-focus: #c0bdb8; /* Interactive */ --btn-bg: #e8e6e1; --btn-hover: #ddd; --btn-text: #2a2a2a; --cta-bg: #2a2a2a; --cta-text: #f0eeea; --cta-hover: #444; --link: #557; /* Status */ --success: #7ab87a; --success-bg: #e8f5e8; --success-text: #2a5a2a; --warning-bg: #fdf8f0; --warning-text: #8a6a20; --warning-border: #e8dcc8; --error-text: #8b4049; --error-bg: #f5e6e8; --error-border: #e8cdd0; /* Checklist-specific */ --check-green: #4a4; --check-green-bg: #e8f5e8; --step-current-bg: #fdf8f0; --step-current-border: #e8dcc8; --ember-text: #446688; --mik-text: #886644; --wait-mik-bg: #fdf8f0; --wait-mik-text: #886644; --wait-ember-bg: #eef4fa; --wait-ember-text: #446688; --wait-done-bg: #e8f5e8; --wait-done-text: #2a5a2a; --approve-bg: #fdf8f0; --approve-border: #e8dcc8; --approve-btn-bg: #e8dcc8; --approve-btn-text:#886644; --reject-text: #c87a7a; --reject-border: #c87a7a; --kill-text: #c66; --badge-active-bg: #eef4fa; --badge-active-text:#446688; --badge-closed-bg: #e8f5e8; --badge-closed-text:#2a5a2a; --badge-proposed: #e8e6e1; --badge-reviewed: #e8f5e8; --badge-approved: #d0f0d0; --badge-parked: #fdf8f0; --badge-killed: #f5e6e8; /* Scrollbar */ --scroll-thumb: #d8d6d1; --scroll-track: transparent; /* Theme orb */ --orb-bg: #e8e6e1; --orb-text: #666; --orb-border: #ddd; /* Focus ring */ --focus-shadow: rgba(0, 0, 0, 0.06); /* Gold accent (status, highlights) */ --accent: #c8a050; --accent-text: #886644; } [data-theme="dark"] { /* Page */ --bg: #111; --text: #ccc; --text-secondary: #888; --text-muted: #666; --text-dim: #555; --text-faint: #444; --heading: #eee; /* Surfaces */ --surface: #1a1a1a; --surface-alt: #1e1e1e; --surface-hover: #222; --surface-input: #111; --surface-raised: #1a1a1a; --surface-inset: #151515; /* Borders */ --border: #2a2a2a; --border-light: #222; --border-strong: #333; --border-focus: #555; /* Interactive */ --btn-bg: #333; --btn-hover: #444; --btn-text: #ccc; --cta-bg: #2a3a2a; --cta-text: #ccc; --cta-hover: #3a4a3a; --link: #8ac; /* Status */ --success: #7ab87a; --success-bg: #1a3a1a; --success-text: #6c6; --warning-bg: #3a3a1a; --warning-text: #cc8; --warning-border: #4a4a2a; --error-text: #c88; --error-bg: #2a1a1a; --error-border: #3a2a2a; /* Checklist-specific */ --check-green: #4a4; --check-green-bg: #2a3a2a; --step-current-bg: #1a1a10; --step-current-border: #3a3a1a; --ember-text: #8ac; --mik-text: #ca8; --wait-mik-bg: #3a2a1a; --wait-mik-text: #ca8; --wait-ember-bg: #1a2a3a; --wait-ember-text: #8ac; --wait-done-bg: #1a3a1a; --wait-done-text: #6c6; --approve-bg: #2a1f14; --approve-border: #4a3a2a; --approve-btn-bg: #3a2a1a; --approve-btn-text:#ca8; --reject-text: #c88; --reject-border: #c66; --kill-text: #c66; --badge-active-bg: #1a2a3a; --badge-active-text:#8ac; --badge-closed-bg: #1a3a1a; --badge-closed-text:#6c6; --badge-proposed: #333; --badge-reviewed: #2a3a2a; --badge-approved: #1a3a1a; --badge-parked: #3a3a1a; --badge-killed: #3a1a1a; /* Scrollbar */ --scroll-thumb: #333; --scroll-track: transparent; /* Theme orb */ --orb-bg: #222; --orb-text: #aaa; --orb-border: #333; /* Focus ring */ --focus-shadow: rgba(255, 255, 255, 0.06); /* Gold accent */ --accent: #c8a050; --accent-text: #ca8; } /* ================================================================ BASE RESET + TYPOGRAPHY ================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* ================================================================ SHARED COMPONENTS ================================================================ */ /* --- Header / Nav bar --- */ .kodi-header { padding: 16px 24px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; gap: 8px; } .kodi-header a { color: var(--text-secondary); text-decoration: none; font-size: 13px; } .kodi-header a:hover { color: var(--heading); } .kodi-header .sep { color: var(--text-faint); } .kodi-header .page-title { color: var(--text); font-size: 13px; } /* --- Buttons --- */ .btn { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--border-strong); padding: 6px 16px; border-radius: 4px; cursor: pointer; font-size: 12px; font-family: inherit; transition: background 0.15s; } .btn:hover { background: var(--btn-hover); } .btn-cta { background: var(--cta-bg); color: var(--cta-text); border: none; padding: 14px 24px; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit; transition: background 0.15s, transform 0.1s; } .btn-cta:hover { background: var(--cta-hover); transform: translateY(-1px); } .btn-cta:active { transform: translateY(0); } /* --- Forms --- */ .kodi-input { width: 100%; background: var(--surface-input); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 4px; font-size: 13px; font-family: inherit; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .kodi-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-shadow); } .kodi-input::placeholder { color: var(--text-faint); } textarea.kodi-input { resize: vertical; min-height: 40px; } /* --- Cards --- */ .kodi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; margin-bottom: 8px; } .kodi-card:hover { border-color: var(--border-strong); } /* --- Status badges --- */ .badge { display: inline-block; font-size: 11px; padding: 2px 10px; border-radius: 10px; } .badge-active { background: var(--badge-active-bg); color: var(--badge-active-text); } .badge-closed { background: var(--badge-closed-bg); color: var(--badge-closed-text); } .badge-proposed { background: var(--badge-proposed); color: var(--text-muted); } .badge-reviewed { background: var(--badge-reviewed); color: var(--success-text); } .badge-approved { background: var(--badge-approved); color: var(--success-text); } .badge-parked { background: var(--badge-parked); color: var(--warning-text); } .badge-killed { background: var(--badge-killed); color: var(--error-text); } /* --- Labels --- */ .label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; } /* --- Scrollbar --- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--scroll-track); } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }