diff --git a/public/css/main.css b/public/css/main.css index 3396145..63aed3f 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -862,6 +862,13 @@ video::cue { pointer-events: none; } +/* iOS safe area for now playing overlay */ +@supports (bottom: env(safe-area-inset-bottom)) { + .now-playing-overlay { + bottom: calc(60px + env(safe-area-inset-bottom, 0px)); + } +} + /* Fullscreen mode for video container */ .video-container:fullscreen { width: 100%; @@ -879,6 +886,34 @@ video::cue { bottom: 80px; } +/* Safari fullscreen support (required for iOS) */ +.video-container:-webkit-full-screen { + width: 100%; + height: 100%; + background: #000; +} + +.video-container:-webkit-full-screen #video-player { + width: 100%; + height: 100%; + object-fit: contain; +} + +.video-container:-webkit-full-screen .now-playing-overlay { + bottom: 80px; +} + +/* Fullscreen safe area for controls - especially for iOS */ +.video-container:fullscreen .watch-bottom-bar, +.video-container:-webkit-full-screen .watch-bottom-bar { + padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); +} + +.video-container:fullscreen .watch-top-bar, +.video-container:-webkit-full-screen .watch-top-bar { + padding-top: calc(var(--space-lg) + env(safe-area-inset-top, 0px)); +} + .channel-nav { display: flex; flex-direction: column; @@ -3333,6 +3368,14 @@ kbd { pointer-events: none; } +/* iOS safe area support for landscape mode (notched devices) */ +@supports (padding: env(safe-area-inset-left)) { + .watch-overlay { + padding-left: env(safe-area-inset-left, 0px); + padding-right: env(safe-area-inset-right, 0px); + } +} + /* Top Bar */ .watch-top-bar { display: flex; @@ -4026,6 +4069,15 @@ kbd { .next-info h4 { max-width: none; } + + /* iOS Safari safe area adjustments for mobile */ + .watch-next-episode { + bottom: calc(100px + env(safe-area-inset-bottom, 0px)); + } + + .watch-bottom-bar { + padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); + } } /* Player Overflow Menu */