/* * Theme CSS — Brand Colors & Dark Mode * Uses CSS custom properties for consistent color usage across the app. */ :root { --color-brand: #171717; --color-brand-hover: #404040; --color-brand-light: #f5f5f5; } /* Utility classes for brand colors */ .text-brand { color: var(--color-brand); } .bg-brand { background-color: var(--color-brand); } .bg-brand-hover { background-color: var(--color-brand-hover); } .hover\:bg-brand-hover:hover { background-color: var(--color-brand-hover); } .border-brand { border-color: var(--color-brand); } .ring-brand { --tw-ring-color: var(--color-brand); } .focus\:ring-brand:focus { --tw-ring-color: var(--color-brand); } .focus\:border-brand:focus { border-color: var(--color-brand); } .focus\:ring-brand:focus { --tw-ring-color: var(--color-brand); } /* Top loading bar: shown during HTMX navigation via hx-indicator */ .loading-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--color-brand); z-index: 9999; transition: none; } .loading-bar.htmx-request { width: 90%; transition: width 8s cubic-bezier(0.1, 0.05, 0, 1); } /* Alpine.js: prevent flash of hidden content before Alpine initializes */ [x-cloak] { display: none !important; } /* Button loading spinner: label and spinner stack in the same grid cell so the button always keeps the label's width. */ .btn-loading { display: grid; } .btn-loading > * { grid-area: 1 / 1; place-self: center; } .btn-spinner { visibility: hidden; } .htmx-request .btn-label { visibility: hidden; } .htmx-request .btn-spinner { visibility: visible; } /* Confirm dialog — styled replacing native confirm() */ .confirm-dialog { position: fixed; margin: auto; max-width: 24rem; width: calc(100% - 2rem); padding: 1.5rem; border: 1px solid #d4d4d4; border-radius: 0.375rem; background: #fff; color: #111; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); } .confirm-dialog::backdrop { background: rgb(0 0 0 / 0.4); } .confirm-dialog-message { font-size: 0.875rem; line-height: 1.5; margin: 0 0 1.25rem; } .confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } .confirm-dialog-cancel, .confirm-dialog-confirm { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; border: none; cursor: pointer; transition: background-color 0.15s; } .confirm-dialog-cancel { background: #f5f5f5; color: #525252; } .confirm-dialog-cancel:hover { background: #e5e5e5; } .confirm-dialog-confirm { background: #171717; color: #fff; } .confirm-dialog-confirm:hover { background: #262626; } /* Dark mode: applied via .dark class on (managed by theme-toggle.js) */ .dark .confirm-dialog { background: #1c1c1c; color: #e5e7eb; border-color: #404040; } .dark .confirm-dialog::backdrop { background: rgb(0 0 0 / 0.6); } .dark .confirm-dialog-cancel { background: #262626; color: #d4d4d4; } .dark .confirm-dialog-cancel:hover { background: #404040; } .dark .confirm-dialog-confirm { background: #fafafa; color: #171717; } .dark .confirm-dialog-confirm:hover { background: #e5e5e5; } /* Channel status indicator — pulsing green left border */ @keyframes pulse-green { 0%, 100% { border-left-color: #22c55e; } 50% { border-left-color: #86efac; } } .channel-active { border-left: 3px solid #22c55e; animation: pulse-green 2s ease-in-out infinite; } .channel-inactive { border-left: 3px solid #d4d4d4; } .dark .channel-active { border-left-color: #4ade80; } .dark .channel-inactive { border-left-color: #525252; } @keyframes pulse-green-dark { 0%, 100% { border-left-color: #4ade80; } 50% { border-left-color: #166534; } } .dark .channel-active { animation: pulse-green-dark 2s ease-in-out infinite; } /* Sidebar navigation items */ .sidebar-item { color: #737373; transition: color 0.2s; font-size: 13px; } .sidebar-item:hover { color: #000000; } .sidebar-item-active { color: #000000; font-weight: 600; font-size: 13px; } .dark .sidebar-item { color: #9ca3af; } .dark .sidebar-item:hover { color: #e5e7eb; } .dark .sidebar-item-active { color: #e5e7eb; font-weight: 600; } .dark { --color-brand: #e5e7eb; --color-brand-hover: #d1d5db; --color-brand-light: #1f2937; color-scheme: dark; }