/* ============================================ O'Kapoo FlowBot - DaisyUI Bridge Styles Minimal CSS for JS-driven show/hide and animations ============================================ */ /* Modal bridge: JS uses classList.add/remove('active') */ /* Using .fb-modal to avoid conflict with DaisyUI's native .modal */ .fb-modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 999; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .fb-modal.active { display: flex; } /* Custom dialog overlay bridge */ .custom-dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 100; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .custom-dialog-overlay.active { display: flex; } /* Tab content bridge for item modal: JS uses classList.add/remove('active') */ .source-tab { display: none; } .source-tab.active { display: block; } /* Main tabs bridge: JS uses style.display */ .main-tab { /* controlled via JS style.display */ } /* Dialog animation */ @keyframes dialogSlideIn { from { transform: translateY(-30px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .custom-dialog { animation: dialogSlideIn 0.25s ease-out; } /* Toast animations */ @keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toastSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } /* Pulsing status dot for playing state */ @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .status-dot-playing { animation: pulse-dot 1.5s ease-in-out infinite; } /* ============================================ Player card emphasis ============================================ */ .player-card { background: linear-gradient(135deg, #0c2a4a 0%, #0a1929 50%, #112240 100%); border: 1px solid rgba(56, 189, 248, 0.15); transition: all 0.6s ease; } /* Glow styles are inline in index.php for priority over Tailwind/DaisyUI */ /* Schedule item active state enhancements */ .schedule-card-active { border-color: oklch(var(--p)) !important; background: oklch(var(--p) / 0.1) !important; } /* Time slot playing/current indicators */ .time-slot-playing { border-left: 4px solid oklch(var(--su)); background: oklch(var(--su) / 0.08); } .time-slot-current { border-left: 4px solid oklch(var(--wa)); background: oklch(var(--wa) / 0.08); } .time-slot-pause { border-left: 4px solid oklch(var(--wa)); background: oklch(var(--wa) / 0.05); } /* Smooth transitions */ .schedule-card { transition: all 0.2s ease; } .schedule-card:hover { border-color: oklch(var(--p) / 0.5); transform: translateY(-1px); } /* Scrollbar styling for dark theme */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: oklch(var(--b2)); } ::-webkit-scrollbar-thumb { background: oklch(var(--b3)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: oklch(var(--bc) / 0.3); } /* Dock spacing for mobile content */ @media (max-width: 1023px) { .main-content { padding-bottom: 5rem; } } /* ============================================ Desktop: larger layout and typography ============================================ */ @media (min-width: 1024px) { /* Bump base font size for the whole page */ html { font-size: 15.5px; } /* Wider container */ .max-w-6xl { max-width: 90rem !important; /* effectively full width with padding */ } /* Player card */ .card-body { padding: 2rem; } /* Player title */ #currentRadioName { font-size: 2.5rem !important; } #radioStatus { font-size: 0.9rem !important; } /* Play button */ #playBtn { width: 4.5rem; height: 4.5rem; } #playBtn svg { width: 2rem; height: 2rem; } /* Volume slider */ #volumeSlider { width: 10rem; } /* Program info stats */ #programInfo .stat { padding: 1.5rem; } #programInfo .stat-title { font-size: 0.8rem; margin-bottom: 0.25rem; } #programInfo .stat-value { font-size: 1.15rem; } #programInfo .stat-desc { font-size: 0.8rem; } /* Podcast controls */ #podcastControls { padding: 1.5rem 2rem; } #podcastControls .btn { height: 2.5rem; min-height: 2.5rem; font-size: 0.9rem; } #currentTimeDisplay, #durationDisplay { font-size: 0.9rem; min-width: 3.5rem; } #podcastDurationInfo { font-size: 0.85rem; } /* Tabs */ .tabs .tab { font-size: 0.95rem; padding: 0.75rem 1.5rem; height: auto; } /* Schedule items list */ #scheduleItemsList > div { padding: 1rem 1.5rem; } #scheduleItemsList .font-mono { font-size: 0.95rem; } #scheduleItemsList .text-sm { font-size: 0.875rem; } #scheduleItemsList .badge { font-size: 0.8rem; } #scheduleItemsList .btn-xs { height: 2.25rem; min-height: 2.25rem; width: 2.25rem; } #scheduleItemsList .btn-xs svg { width: 1.1rem; height: 1.1rem; } /* Schedule cards grid */ #schedulesList .card-body { padding: 1.5rem; } #schedulesList .font-semibold { font-size: 1.05rem; } /* Section headings */ #scheduleDetailsTitle, .text-lg.font-bold { font-size: 1.2rem !important; } /* Navbar */ .navbar { padding: 0.75rem 1.5rem; } .navbar .text-xl { font-size: 1.25rem; } .navbar .badge { font-size: 0.85rem; padding: 0.5rem 0.75rem; } } /* Extra-wide screens: even more space */ @media (min-width: 1600px) { html { font-size: 16px; } } /* ============================================ Sleep Timer ============================================ */ #sleepTimerBtn.text-primary { color: oklch(var(--p)); opacity: 1; } #sleepTimerBtn.text-primary i { opacity: 1; } #sleepTimerBadge { font-size: 0.6rem; min-width: 1.2rem; height: 1rem; padding: 0 0.2rem; line-height: 1; justify-content: center; align-items: center; } #sleepTimerMenu .btn-ghost { font-weight: normal; } #sleepTimerMenu .btn-ghost:hover { background: oklch(var(--p) / 0.15); } #sleepTimerCustom { background: oklch(var(--b3)); } #sleepTimerCountdown { color: oklch(var(--p)); }