/* Base */ .cehls-player{ position:relative; width:100%; aspect-ratio:16/9; background:#000; --cehls-accent:#fff; --cehls-ctrl-bg:rgba(0,0,0,.55); --cehls-ctrl-fg:#fff; } .cehls-player video{ width:100%; height:100%; display:block; object-fit:cover; background:#000; } /* SVG icon baseline */ .cehls-player .icon{ display:block; fill:currentColor; } /* Centre play/pause button */ .cehls-center-toggle{ position:absolute; inset:0; margin:auto; border-radius:999px; border:none; display:grid; place-items:center; background:transparent; color:var(--cehls-ctrl-fg); cursor:pointer; z-index:1; transition:transform .15s ease, opacity .15s ease; } button.cehls-center-toggle { background-color: transparent !important; } .cehls-center-toggle .play{ display:block; } .cehls-center-toggle .pause{ display:none; } .cehls-player.is-playing .cehls-center-toggle .play{ display:none; } .cehls-player.is-playing .cehls-center-toggle .pause{ display:block; } /* Controls bar (volume | time-left | timeline flex | time-right | fs) */ .cehls-controls{ position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:auto auto 1fr auto auto; gap:12px; align-items:center; padding:10px 12px; color:var(--cehls-ctrl-fg); z-index:2; } .cehls-time-left,.cehls-time-right{ font:500 12px/1.2 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; white-space:nowrap; } /* Timeline with buffer + progress */ .cehls-timeline{ position:relative; height:8px; background:rgba(255,255,255,.22); border-radius:999px; cursor:pointer; outline:none; } .cehls-timeline::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); pointer-events:none; } .cehls-buffer{ position:absolute; left:0; top:0; bottom:0; width:0%; background:rgba(255,255,255,.35); border-radius:inherit; } .cehls-progress{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--cehls-accent); border-radius:inherit; } .cehls-timeline:focus .cehls-progress{ box-shadow:0 0 0 3px rgba(79,70,229,.35); } /* Volume */ .cehls-volume{ position:relative; display:flex; align-items:center; } .cehls-mute{ width: 35px; height: 35px; border-radius: 8px; border: none; color: var(--cehls-ctrl-fg); display: flex ; place-items: center; cursor: pointer; justify-content: center; align-items: center; align-content: center; padding: 0px; } /* show correct SVG based on muted state */ .cehls-mute .volume{ display:block; } .cehls-mute .muted{ display:none; } .cehls-player.is-muted .cehls-mute .volume{ display:none; } .cehls-player.is-muted .cehls-mute .muted{ display:block; } /* Hover volume slider (vertical) */ .cehls-vol-slider{ position: absolute; left: 50%; bottom: calc(60% + 10px); transform: translateX(-50%) translateY(8px); background: rgb(0 0 0 / 0%); padding: 10px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 3; } .cehls-volume:hover .cehls-vol-slider{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); } .cehls-vol-slider input[type=range]{ width:24px; height:110px; background:transparent; padding:0 15px!important; } /* === Custom cross-browser vertical volume slider (no webkit/moz pseudos) === */ .cehls-vol-slider{ position: relative; width: 36px; /* slider hitbox width */ height: 140px; /* total popup height */ padding: 10px 0; display: grid; place-items: center; } /* Visual track */ .cehls-vol-slider .vol-track{ position: relative; width: 4px; height: 110px; border-radius: 999px; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); } /* Filled portion (bottom-up) */ .cehls-vol-slider .vol-fill{ position: absolute; left: 0; right: 0; bottom: 0; height: var(--vol-pct, 100%); background: var(--cehls-accent); border-radius: inherit; } /* Thumb */ /* The real input, full overlay, but invisible */ .cehls-vol-slider .vol-native{ position: absolute; inset: 10px 0; /* match track padding */ margin: 0; width: 100%; height: calc(100% - 20px); appearance: none; background: transparent; opacity: 0; /* keep it interactive & accessible */ cursor: pointer; } /* Optional hover affordance */ .cehls-vol-slider:hover .vol-thumb{ transform: translate(-50%, -50%) scale(1.05); } /* Fullscreen button */ .cehls-fullscreen { width: 31px; height: 31px; border-radius: 8px; border: none; color: var(--cehls-ctrl-fg); display: flex; place-items: center; background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2217%22%20height%3D%2225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0%200h17v25h-17z%22%20fill%3D%22none%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22m9.32047%2014.0275%205.97253%205.9725h-4.793a.5.5%200%200%200%200%201h5.3999a1.10154%201.10154%200%200%200%201.1001-1.1001v-5.3999a.5.5%200%200%200%20-1%200v4.793l-5.9725-5.9725a.49995.49995%200%200%200%20-.707.707z%22%2F%3E%3Cpath%20d%3D%22m7.67953%2010.9725-5.97253-5.9725h4.793a.5.5%200%200%200%200-1h-5.3999a1.10154%201.10154%200%200%200%20-1.1001%201.1001v5.3999a.5.5%200%200%200%201%200v-4.793l5.9725%205.9725a.49995.49995%200%200%200%20.707-.707z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)!important; background-repeat: no-repeat!important; background-position: 50% 50%!important; opacity: 0.7; background-color: transparent !important; } .cehls-fullscreen:hover{ opacity: 1; transition } /* Mouse idle hint */ .cehls-player.mouse-idle .cehls-center-toggle{ opacity:.35; transform:scale(.92); } /* Auto-hide controls when not interacting and video is playing */ .cehls-controls{ opacity:1; transition: opacity .25s ease; padding:0 18px 18px 18px; margin:0 10%; max-width: 948px!important; margin-left: auto!important; margin-right: auto!important; } .cehls-player.controls-hidden .cehls-controls{ opacity:0; pointer-events:none; transition:opacity .3s ease; } /* Also hide in fullscreen */ .cehls-player:fullscreen.controls-hidden .cehls-controls, .cehls-player:-webkit-full-screen.controls-hidden .cehls-controls{ opacity:0; pointer-events:none; } /* Hide cursor in fullscreen when controls are hidden */ .cehls-player:fullscreen.controls-hidden, .cehls-player:-webkit-full-screen.controls-hidden{ cursor:none; } /* Hide centre button when controls are hidden and video is playing */ .cehls-player.is-playing.controls-hidden .cehls-center-toggle{ opacity:0; pointer-events:none; transform:scale(.92); transition:opacity .2s ease, transform .2s ease; } .cehls-player .cehls-center-toggle{ opacity:1; } /* Keep controls visible while interacting (matches existing JS) */ .cehls-player.is-interacting .cehls-controls{ opacity:1; pointer-events:auto; } /* Keep volume slider open when JS sets .open or when focused (accessibility) */ .cehls-volume.open .cehls-vol-slider, .cehls-volume:focus-within .cehls-vol-slider{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); } /* ===== Apple-style skin (visuals only) ===== */ .cehls-player{ --apl-scrim: rgba(22,22,24,.6); --apl-glass: rgba(255,255,255,.08); --apl-glass-hover: rgba(255,255,255,.14); --apl-border: rgba(255,255,255,.18); --apl-fg: rgba(255,255,255,.96); --apl-fg-muted: rgba(255,255,255,.65); --apl-focus: #0071e3; } /* Controls bar: subtle glass scrim, no hard width cap */ .cehls-controls{ padding: 10px 14px 16px; max-width: none; margin: 0; color: var(--apl-fg); } /* Time labels — clean, slightly brighter */ .cehls-time-left, .cehls-time-right{ color: #fff; font-weight: 600; letter-spacing: .01em; } /* Timeline: slim, crisp track + buffered + accent progress */ .cehls-timeline{ height: 4px; background: rgba(255,255,255,.22); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); } .cehls-buffer{ background: rgba(255,255,255,.32); } .cehls-progress{ background: var(--cehls-accent, #fff); } /* Knob at the head of progress, appears on hover/focus */ .cehls-progress::after{ content:""; position:absolute; right:-6px; top:50%; width:12px; height:12px; border-radius:50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.08); transform: translateY(-50%) scale(.85); opacity: 0; transition: opacity .12s ease, transform .12s ease; } .cehls-timeline:hover .cehls-progress::after, .cehls-timeline:focus .cehls-progress::after{ opacity:1; transform: translateY(-50%) scale(1); } /* Auto-hide visuals remain intact; ensure centre button sync looks slick */ .cehls-player.is-playing.controls-hidden .cehls-center-toggle{ opacity: 0; transform: scale(.92); } /* Ensure the new layout still gives the timeline the flexible column */ .cehls-controls{ grid-template-columns: auto auto 1fr auto auto; /* volume | time-left | bar | time-right | fs */ } /* Overlay that follows controls visibility */ .cehls-overlay{ position:absolute; inset:0; z-index:1; /* below controls (z-index:2), above video */ pointer-events:none; /* never block clicks/drags */ background: radial-gradient(ellipse at bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,0) 70%) ,linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%); opacity:0; transition: opacity .18s ease; } /* Show overlay when controls are shown */ .cehls-player:not(.controls-hidden) .cehls-overlay{ opacity:1; } /* Keep centre button above the overlay */ .cehls-center-toggle{ z-index:1; } /* Controls are already at z-index:2 */ .cehls-controls { background-color: #ffffff00!important; } span.icon.play { min-width: 75px; min-height: 75px; background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0%200h75v75h-75z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22m17%2057.40318v-39.72769c0-4.05144%202.4984-6.17549%205.59106-6.17549a7.28466%207.28466%200%200%201%204.28213%201.18l33.10681%2019.07719c2.934%201.69137%204.52%203.06807%204.52%205.74281s-1.586%204.05144-4.52%205.74281l-33.10681%2019.07719a7.28466%207.28466%200%200%201%20-4.28213%201.18c-3.09266%200-5.59106-2.04539-5.59106-6.09682z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E); } span.icon.pause { min-width: 75px; min-height: 75px; background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0%200h75v75h-75z%22%20fill%3D%22none%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20height%3D%2251%22%20rx%3D%224%22%20width%3D%2216%22%20x%3D%2217%22%20y%3D%2212%22%2F%3E%3Crect%20height%3D%2251%22%20rx%3D%224%22%20width%3D%2216%22%20x%3D%2242%22%20y%3D%2212%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E); } span.icon.volume { background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2221%22%20height%3D%2225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2025%22%3E%3Ctitle%3Espeaker.2.fill_reduced%401x%3C%2Ftitle%3E%3Crect%20width%3D%2221%22%20height%3D%2225%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M15.44879%2C16.3875a.55051.55051%2C0%2C0%2C1-.45716-.85518%2C5.45379%2C5.45379%2C0%2C0%2C0-.02246-6.06147.55025.55025%2C0%2C1%2C1%2C.91236-.61537%2C6.55712%2C6.55712%2C0%2C0%2C1%2C.02637%2C7.28636A.54931.54931%2C0%2C0%2C1%2C15.44879%2C16.3875Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M18.524%2C19a.52388.52388%2C0%2C0%2C1-.32053-.109.55375.55375%2C0%2C0%2C1-.10621-.76458%2C9.543%2C9.543%2C0%2C0%2C0%2C0-11.25256.55375.55375%2C0%2C0%2C1%2C.10621-.76458.52648.52648%2C0%2C0%2C1%2C.74726.10853%2C10.65433%2C10.65433%2C0%2C0%2C1%2C0%2C12.56466A.52777.52777%2C0%2C0%2C1%2C18.524%2C19Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M11%2C20.14826a.93.93%2C0%2C0%2C1-1.58725.58258L4.4%2C16H1.5A1.50064%2C1.50064%2C0%2C0%2C1%2C0%2C14.5v-4A1.50064%2C1.50064%2C0%2C0%2C1%2C1.5%2C9H4.4L9.41275%2C4.24957A.93.93%2C0%2C0%2C1%2C11%2C4.83215Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E); width: 34px; height: 35px; background-repeat: no-repeat; background-position: 50% 50%; } span.icon.muted { background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2221%22%20height%3D%2225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2025%22%3E%3Ctitle%3Espeaker.slash.fill_reduced%401x%3C%2Ftitle%3E%3Crect%20width%3D%2221%22%20height%3D%2225%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M15.0535%2C20.83783a.55655.55655%2C0%2C0%2C0%2C.78293.00244.548.548%2C0%2C0%2C0%2C.003-.77812L.9465%2C5.16168a.55776.55776%2C0%2C0%2C0-.78293-.00244.548.548%2C0%2C0%2C0-.00295.77812Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M1.5%2C9A1.50062%2C1.50062%2C0%2C0%2C0%2C0%2C10.5v4A1.50062%2C1.50062%2C0%2C0%2C0%2C1.5%2C16H4.4l5.0127%2C4.73083A.93.93%2C0%2C0%2C0%2C11%2C20.14825V18.33807L1.66559%2C9Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M11%2C4.83215a.93.93%2C0%2C0%2C0-1.58728-.58258L5.39526%2C8.05682%2C11%2C13.66382Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E); width: 34px; height: 35px; background-repeat: no-repeat; background-position: 50% 50%; } button.cehls-mute { opacity: 0.7; } button.cehls-mute:hover { opacity: 1; } /* Volume wrapper behaves like a single button in the grid */ .cehls-volume{ position: relative; display: inline-grid; align-items: center; width: 36px; /* same width as the mute button */ } /* Mute button (unchanged visual) */ .cehls-mute{ width:36px; height:36px; border-radius:8px; border:none;color:var(--cehls-ctrl-fg); display:grid; place-items:center; cursor:pointer; background-color: transparent !important;; } /* Slider is absolutely positioned above the button; doesn’t affect layout */ .cehls-vol-slider{ position: absolute; left: 50%; bottom: calc(100% + 10px); /* sit just above the button */ transform: translateX(-50%) translateY(8px); padding: 10px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 3; /* above overlay/controls */ } /* Show while hovering the button or the slider itself, and keep open when focused */ .cehls-volume:hover .cehls-vol-slider, .cehls-mute:focus + .cehls-vol-slider, .cehls-vol-slider:hover, .cehls-volume.open .cehls-vol-slider, .cehls-volume:focus-within .cehls-vol-slider{ opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Custom cross-browser slider UI (if you added it earlier) */ .cehls-vol-slider .vol-track{ position: relative; width: 4px; height: 110px; border-radius: 999px; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); } .cehls-vol-slider .vol-fill{ position:absolute; left:0; right:0; bottom:0; height: var(--vol-pct, 100%); background: var(--cehls-accent); border-radius: inherit; } .cehls-vol-slider .vol-thumb{ position:absolute; left:50%; bottom: var(--vol-pct, 100%); transform: translate(-50%, 50%)!important; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.08); } .cehls-vol-slider .vol-native{ position:absolute; inset:0; margin:0; width:100%; height:100%; appearance:none; background:transparent; opacity:0; cursor:pointer; } /* Fill the OS fullscreen area (not just the browser viewport) */ .cehls-player:fullscreen{ width: 100vw; height: 100vh; aspect-ratio: auto; /* drop fixed ratio in FS */ } .cehls-player:fullscreen video{ width: 100%; height: 100%; object-fit: contain; /* avoid cropping in fullscreen */ } /* Safari/WebKit prefix */ .cehls-player:-webkit-full-screen{ width: 100vw; height: 100vh; aspect-ratio: auto; } .cehls-player:-webkit-full-screen video{ width: 100%; height: 100%; object-fit: contain; } /* In fullscreen, hide the mouse cursor when controls are hidden */ .cehls-player:fullscreen.controls-hidden { cursor: none; } .cehls-player:-webkit-full-screen.controls-hidden { cursor: none; } /* While interacting, never hide the controls (wins over .controls-hidden) */ .cehls-player.is-interacting .cehls-controls{ opacity: 1 !important; pointer-events: auto !important; } /* Hovering the controls themselves should also keep them shown */ .cehls-player .cehls-controls:hover{ opacity: 1; pointer-events: auto; } /* Prevent page scroll during vertical volume drag */ .cehls-vol-slider { touch-action: none; } .cehls-progress{ will-change: width; } .cehls-timeline{ user-select: none; touch-action: none; } .cehls-controls-wrapper { padding: 10px 14px 16px; max-width: none; margin: 0; color: var(--apl-fg);