@import "cards.css"; @import "card-group.css"; @import "hvm.css"; @import "player.css"; @import "roll.css"; @import "scans.css"; @import "stories.css"; @import "story.css"; @import "synopsis.css"; @import "registry.css"; @import "notes-table.css"; @import "tags-table.css"; @import "login.css"; @import "story-notes.css"; @import "backlog.css"; @import "processing.css"; @import "vm.css"; /* ========================================== THEME SYSTEM - Resolve-inspired Dark & Light Neutral charcoal grays with muted accents Designed to let video content be the focus Default: Dark theme Toggle: data-theme="light" on ========================================== */ :root { /* --- Backgrounds (Neutral charcoal) --- */ --bg-body: #1e1e1e; /* Main page background */ --bg-player: #181818; /* Darker for video areas */ --bg-panel: #262626; /* Cards, panels, elevated surfaces */ --bg-input: #323232; /* Form inputs */ --bg-hover: #3a3a3a; /* Hover states */ --bg-active: #454545; /* Active/selected */ /* --- Text (Neutral light grays) --- */ --text-primary: #d4d4d4; /* Main content */ --text-secondary: #a0a0a0; /* Less emphasis */ --text-muted: #707070; /* Subtle, labels */ --text-faint: #525252; /* Very subtle, disabled */ --text-inverse: #1e1e1e; /* Text on light backgrounds */ /* --- Borders (Subtle) --- */ --border-default: #3a3a3a; /* Standard */ --border-subtle: #2a2a2a; /* Very subtle */ --border-strong: #4a4a4a; /* Emphasized */ /* --- Links & Navigation (Muted warm accent) --- */ --link-color: #d19a66; /* Muted orange */ --link-hover: #e5c07b; /* Soft gold on hover */ --nav-color: #d19a66; /* Muted orange */ --accent: #6b9dad; /* Muted teal */ --accent-hover: #7eb8c9; /* Lighter teal */ /* --- Semantic Colors (Desaturated) --- */ --success-bg: #1e2a1e; /* Very subtle green tint */ --success-border: #4a7c4f; /* Muted green */ --success-text: #7dae82; /* Soft green */ --warning-bg: #2a261e; /* Very subtle amber tint */ --warning-border: #9a7b32; /* Muted amber */ --warning-text: #d4a84b; /* Soft amber */ --danger-bg: #2a1e1e; /* Very subtle red tint */ --danger-border: #8c4a4a; /* Muted red */ --danger-text: #c67b7b; /* Soft red */ --info-bg: #1e2426; /* Very subtle blue tint */ --info-border: #4a7080; /* Muted blue */ --info-text: #7aacbd; /* Soft blue */ /* --- Highlight --- */ --highlight-bg: #4a6278; /* Muted blue selection */ --highlight-text: #ffffff; /* White on highlight */ --selection-bg: #3a4a5a; /* Selection background */ /* --- Legacy aliases --- */ --dark-text: var(--text-primary); --bg-primary: var(--bg-body); --bg-secondary: var(--bg-panel); --bg-tertiary: var(--bg-input); --border-color: var(--border-default); --success: var(--success-text); --warning: var(--warning-text); --danger: var(--danger-text); } /* ========================================== LIGHT THEME - Neutral/Cool ========================================== */ [data-theme="light"] { /* --- Backgrounds (Neutral) --- */ --bg-body: #f8f9fa; /* Off-white page background */ --bg-player: #ffffff; /* White for video area */ --bg-panel: #ffffff; /* White cards, panels */ --bg-input: #e9ecef; /* Light gray form inputs */ --bg-hover: #dee2e6; /* Hover states */ --bg-active: #ced4da; /* Active/selected */ /* --- Text (Dark grays) --- */ --text-primary: #212529; /* Near-black main content */ --text-secondary: #495057; /* Dark gray, less emphasis */ --text-muted: #6c757d; /* Medium gray, subtle */ --text-faint: #adb5bd; /* Light gray, very subtle */ --text-inverse: #f8f9fa; /* Light text on dark backgrounds */ /* --- Borders --- */ --border-default: #dee2e6; /* Standard border */ --border-subtle: #e9ecef; /* Subtle border */ --border-strong: #ced4da; /* Emphasized border */ /* --- Links & Navigation (Keep Gruvbox orange for warmth) --- */ --link-color: #c65d07; /* Warm orange */ --link-hover: #d97706; /* Brighter orange */ --nav-color: #c65d07; /* Warm orange */ --accent: #0969da; /* Blue accent */ --accent-hover: #0550ae; /* Darker blue */ /* --- Semantic Colors --- */ --success-bg: #d1e7dd; --success-border: #198754; --success-text: #0f5132; --warning-bg: #fff3cd; --warning-border: #ffc107; --warning-text: #664d03; --danger-bg: #f8d7da; --danger-border: #dc3545; --danger-text: #842029; --info-bg: #cff4fc; --info-border: #0dcaf0; --info-text: #055160; /* --- Highlight --- */ --highlight-bg: #ffc107; --highlight-text: #212529; --selection-bg: #e9ecef; } @font-face { font-family: "gill-sans"; font-style: normal; src: url("fonts/GillSans.woff2") format("woff2"), url("fonts/GillSans.woff") format("woff"); } @font-face { font-family: "gill-sans-bold"; font-style: normal; font-weight: bold; src: url("fonts/GillSans-Bold.woff2") format("woff2"), url("fonts/GillSans-Bold.woff") format("woff"); } @font-face { font-family: "gill-sans-italic"; font-style: italic; src: url("fonts/GillSans-Italic.woff2") format("woff2"), url("fonts/GillSans-Italic.woff") format("woff"); } a { color: var(--link-color); } .slash { padding: 0 0.2rem; } body { font-family: Verdana, sans-serif; background-color: var(--bg-body); color: var(--text-primary); .hr-nav { margin-top: 0.75rem; font-size: 1.05rem; min-width: 800px; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto; gap: 0 1.5rem; justify-content: center; align-items: baseline; .nav-link { color: var(--nav-color); } .nav-link:hover { color: var(--link-hover); } /* Reset button styles for dropdown toggles */ button.nav-link, button.dropdown-toggle { background: none; border: none; font: inherit; cursor: pointer; padding: 0; } #user, #login { cursor: pointer; font-size: 0.8em; padding-left: 2rem; color: var(--text-secondary); a { color: var(--text-secondary); text-decoration: none; } a:hover { color: var(--text-primary); } } #user-info { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* Dropdown menu dark theme */ .dropdown-menu { background-color: var(--bg-secondary); border-color: var(--border-color); } .dropdown-item { color: var(--text-primary); } .dropdown-item:hover { background-color: var(--bg-tertiary); color: var(--text-primary); } @media (max-width: 1024px) { font-size: 0.95rem; min-width: 700px; gap: 0 1rem; #user, #login { padding-left: 1rem; } } @media (max-width: 840px) { font-size: 0.95rem; min-width: 680px; #user, #login { padding-left: 0.5rem; } } @media (max-width: 720px) { font-size: 0.85rem; min-width: 580px; } } .outer { text-align: center; margin: 2rem 3rem; min-width: 780px; @media (max-width: 840px) { margin: 1.5rem 1.5rem; min-width: auto; } } #warn-modal { .warn-content { display: flex; flex-direction: row; padding: 1em; background-color: var(--bg-secondary); } } } .phi-footer { text-align: center; padding: 2rem 0; margin-top: 2rem; font-size: 0.85rem; border-top: 1px solid var(--border-color); a { color: var(--text-muted); text-decoration: none; } a:hover { color: var(--link-color); } } /* ======================================== Theme Toggle Button ======================================== */ #theme-toggle { cursor: pointer; padding: 0 0.5rem; color: var(--text-muted); font-size: 1.1em; transition: color 0.2s; } #theme-toggle:hover { color: var(--text-primary); } #theme-toggle .bi-sun-fill { display: none; } #theme-toggle .bi-moon-fill { display: inline; } [data-theme="light"] #theme-toggle .bi-sun-fill { display: inline; } [data-theme="light"] #theme-toggle .bi-moon-fill { display: none; } /* ======================================== Global dark theme overrides for Bootstrap ======================================== */ /* Form controls */ .form-control, .form-select { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); } .form-control:focus, .form-select:focus { background-color: var(--bg-tertiary); border-color: var(--accent); color: var(--text-primary); box-shadow: 0 0 0 0.2rem rgba(108, 178, 247, 0.25); } .form-control::placeholder { color: var(--text-muted); } /* Tables */ .table { color: var(--text-primary); } .table > thead { color: var(--text-secondary); } .table > :not(caption) > * > * { background-color: transparent; border-color: var(--border-color); } .table-hover > tbody > tr:hover > * { background-color: var(--bg-secondary); } /* Cards */ .card { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } /* Modals */ .modal-content { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } .modal-header { border-color: var(--border-color); } .modal-footer { border-color: var(--border-color); } /* Buttons */ .btn-primary { background-color: #0d6efd; border-color: #0d6efd; } .btn-secondary { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); } .btn-secondary:hover { background-color: var(--border-color); border-color: var(--border-color); color: var(--text-primary); } /* Pagination */ .page-link { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--accent); } .page-link:hover { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--accent-hover); } .page-item.active .page-link { background-color: #0d6efd; border-color: #0d6efd; } .page-item.disabled .page-link { background-color: var(--bg-primary); border-color: var(--border-color); color: var(--text-muted); } /* DataTables */ .dataTables_wrapper { color: var(--text-primary); } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); } table.dataTable tbody tr { background-color: var(--bg-primary); } table.dataTable tbody tr:hover { background-color: var(--bg-secondary) !important; } table.dataTable thead th { border-color: var(--border-color); }