/* ========================================= SRCHNET PLAYER — v5 ========================================= */ :root{ --play-bg:#0a1f0d; --play-icon:#ffffff; --play-hover:#1a3d20; --nav-bg:#0df82c; --nav-icon:#ffffff; --nav-hover:#09c021; --progress-color:#08dd28; --controls-bg:#111111; } /* ========================================= WRAPPER — always 16:9 ========================================= */ .srchnet-player{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; } /* Controls must not be clipped by wrapper */ .srchnet-player .plyr__controls{ overflow:visible !important; } /* ========================================= v3.7 — FULL-BLEED ON MOBILE Handled entirely by JS (srApplyFullBleed in player.js): moves the player to and positions it precisely, with guards so it never fights Plyr's own fullscreen transitions and never flashes a wrong position on load. See the comment in player.js for the full history of approaches tried here. ========================================= */ /* ========================================= PLYR — fills wrapper ========================================= */ .srchnet-player .plyr{ position:absolute; inset:0; width:100% !important; height:100% !important; --plyr-color-main:var(--progress-color); } .srchnet-player .plyr__video-wrapper{ position:absolute; inset:0; width:100% !important; height:100% !important; background:#000; } /* ========================================= VIDEO — contain handles both orientations ========================================= */ .srchnet-player video{ width:100% !important; height:100% !important; object-fit:contain !important; background:#000; display:block; } /* ========================================= POSTER ========================================= */ .srchnet-player .plyr__poster{ background-size:cover !important; background-position:center !important; } /* ========================================= OVERLAY PLAY BUTTON ========================================= */ .overlay-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:var(--play-size,90px); height:var(--play-size,90px); border:none; border-radius:50%; background:var(--play-bg); z-index:20; cursor:pointer; transition:background .2s; display:flex; align-items:center; justify-content:center; } .overlay-play:hover{ background:var(--play-hover) !important; } .overlay-play::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-40%,-50%); border-left:calc(var(--play-size,90px) * 0.31) solid var(--play-icon); border-top:calc(var(--play-size,90px) * 0.20) solid transparent; border-bottom:calc(var(--play-size,90px) * 0.20) solid transparent; } /* ========================================= CONTROLS ========================================= */ .plyr--video .plyr__controls{ background:linear-gradient(transparent,rgba(0,0,0,.78)) !important; padding:6px 8px !important; } .plyr__control:hover, .plyr__control:focus{ background:rgba(255,255,255,.15) !important; } /* Control bar play button — separate color from centered overlay */ .plyr__control[data-plyr="play"]{ color:var(--ctrl-play-bg,#ffffff) !important; border-radius:50% !important; width:36px !important; height:36px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; } .plyr__control[data-plyr="play"]:hover, .plyr__control[data-plyr="play"]:focus{ background:var(--ctrl-play-hover,rgba(255,255,255,.15)) !important; color:var(--ctrl-play-bg,#ffffff) !important; } .plyr__control[data-plyr="play"] svg{ fill:var(--ctrl-play-bg,#ffffff) !important; } /* ========================================= PREV / NEXT ========================================= */ .sr-prev, .sr-next{ background:var(--nav-bg) !important; border:none !important; width:34px !important; height:28px !important; min-width:34px !important; max-width:34px !important; border-radius:6px !important; cursor:pointer !important; margin:0 2px 0 0 !important; flex-shrink:0 !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex-direction:column !important; gap:1px !important; padding:3px 2px !important; overflow:hidden !important; box-sizing:border-box !important; transition:background .2s; } .sr-prev:hover,.sr-next:hover{ background:var(--nav-hover) !important; } .sr-prev svg,.sr-next svg{ width:11px !important; height:11px !important; flex-shrink:0; display:block; pointer-events:none; fill:var(--nav-text-color,#fff); } .sr-skip-label{ font-size:8px !important; font-weight:700; color:var(--nav-text-color,#fff); line-height:1; pointer-events:none; display:block; white-space:nowrap; } /* ========================================= QUALITY SELECTOR (custom dropdown) ========================================= */ .sr-quality-wrap{ position:relative; display:inline-flex; align-items:center; flex-shrink:0; } .sr-quality-btn{ background:transparent; border:none; color:#fff; font-size:11px; font-weight:600; cursor:pointer; padding:4px 6px; border-radius:4px; line-height:1; letter-spacing:.5px; transition:background .2s; white-space:nowrap; } .sr-quality-btn:hover{ background:rgba(255,255,255,.15); } .sr-quality-menu{ display:none; position:absolute; bottom:calc(100% + 8px); right:0; background:rgba(20,20,20,.96); border-radius:6px; overflow:hidden; min-width:80px; box-shadow:0 4px 16px rgba(0,0,0,.5); z-index:200; } .sr-quality-menu.sr-open{ display:block; } .sr-quality-item{ display:block; width:100%; background:none; border:none; color:#fff; font-size:13px; padding:10px 14px; text-align:left; cursor:pointer; transition:background .15s; white-space:nowrap; } .sr-quality-item:hover{ background:rgba(255,255,255,.12); } .sr-quality-item.sr-active{ color:var(--progress-color); font-weight:700; } /* ========================================= FULLSCREEN ========================================= */ .plyr--fullscreen-active video{ object-fit:contain !important; background:#000 !important; } /* ========================================= MOBILE ========================================= */ @media(max-width:768px){ .overlay-play{ width:var(--play-size-mobile,64px) !important; height:var(--play-size-mobile,64px) !important; } .overlay-play::before{ border-left:calc(var(--play-size-mobile,64px) * 0.31) solid var(--play-icon) !important; border-top:calc(var(--play-size-mobile,64px) * 0.20) solid transparent !important; border-bottom:calc(var(--play-size-mobile,64px) * 0.20) solid transparent !important; } .plyr--video .plyr__controls{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; gap:1px !important; padding:5px 5px 5px 12px !important; overflow:visible !important; } .sr-prev,.sr-next{ width:26px !important; height:22px !important; min-width:26px !important; max-width:26px !important; margin:0 1px !important; border-radius:4px !important; padding:2px !important; gap:0 !important; } .sr-prev svg,.sr-next svg{ width:9px !important; height:9px !important; } .plyr__control[data-plyr="play"]{ margin:0 4px !important; padding:5px !important; } .plyr__progress{ flex:1 !important; min-width:60px !important; margin:0 3px !important; } .plyr__progress input[type=range]{ width:100% !important; } .plyr__time{ font-size:10px !important; min-width:auto !important; } /* ---- VOLUME POPUP ---- */ .plyr__volume{ position:relative !important; width:auto !important; min-width:auto !important; flex-shrink:0; } .plyr__volume input[type=range]{ display:none !important; position:absolute !important; bottom:52px !important; left:50% !important; /* translate up, then rotate so slider runs bottom→top */ transform:translateX(-50%) rotate(-90deg) !important; transform-origin:center center !important; width:100px !important; /* tall padding = large touch hit area */ height:6px !important; padding:16px 6px !important; box-sizing:content-box !important; background:rgba(25,25,25,.97) !important; border-radius:30px !important; z-index:10000 !important; /* pointer-events handles drag; touch-action none stops scroll */ touch-action:none !important; cursor:pointer !important; /* smooth thumb movement */ -webkit-appearance:none !important; } .plyr__volume.sr-vol-open input[type=range]{ display:block !important; } /* ---- CONTROLS SHOW/HIDE (YouTube style) ---- No MutationObserver needed. We control visibility purely with CSS classes. */ /* Playing: hide overlay immediately (no transition delay) */ .srchnet-player.sr-playing .overlay-play{ opacity:0; pointer-events:none; transition:none; } /* Force Plyr controls visible */ .srchnet-player.sr-show-controls .plyr .plyr__controls{ opacity:1 !important; transform:translateY(0) !important; visibility:visible !important; pointer-events:auto !important; transition:none !important; } /* When NOT sr-show-controls while playing, hide them */ .srchnet-player.sr-playing:not(.sr-show-controls) .plyr .plyr__controls{ opacity:0 !important; pointer-events:none !important; transition:opacity .4s !important; } /* Quality menu opens upward — fine on mobile too */ .sr-quality-btn{ font-size:10px; padding:3px 4px; } .sr-quality-item{ font-size:12px; padding:9px 12px; } } /* ========================================= HIDE NATIVE BROWSER CONTROLS ========================================= */ video::-webkit-media-controls{ display:none !important; } video::-webkit-media-controls-panel{ display:none !important; } video::-webkit-media-controls-play-button{ display:none !important; } video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; } /* ========================================= GPU ========================================= */ .srchnet-player,.plyr,.plyr video{ will-change:transform; transform:translateZ(0); backface-visibility:hidden; } /* ═══════════════════════════════════════════ SETTINGS PANEL ═══════════════════════════════════════════ */ .sr-gear-btn{ background:transparent !important; border:none; cursor:pointer; padding:6px; color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:opacity .2s; } .sr-gear-btn:hover{ opacity:.8; } .sr-settings-panel{ position:absolute; bottom:56px; right:8px; width:220px; background:rgba(20,20,20,.96); border-radius:10px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.55); z-index:100; display:none; backdrop-filter:blur(6px); } .sr-settings-panel.sr-open{ display:block; } /* Main menu rows */ .sr-settings-row{ display:flex; align-items:center; width:100%; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.07); color:#fff; padding:13px 14px; cursor:pointer; gap:8px; text-align:left; transition:background .15s; } .sr-settings-row:last-child{ border-bottom:none; } .sr-settings-row:hover{ background:rgba(255,255,255,.08); } .sr-row-label{ flex:1; font-size:14px; font-weight:500; } .sr-row-value{ font-size:12px; color:var(--progress-color); font-weight:700; background:rgba(255,255,255,.08); padding:2px 8px; border-radius:4px; flex-shrink:0; } .sr-row-arrow{ color:rgba(255,255,255,.5); flex-shrink:0; } /* Sub panels */ .sr-settings-sub{ display:block; } .sr-settings-sub.sr-hidden{ display:none; } .sr-hidden{ display:none !important; } .sr-sub-header{ display:flex; align-items:center; gap:10px; padding:11px 14px; background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.08); font-size:14px; font-weight:700; color:#fff; } .sr-back-btn{ background:none; border:none; cursor:pointer; color:#fff; padding:2px; display:inline-flex; align-items:center; border-radius:4px; transition:background .15s; } .sr-back-btn:hover{ background:rgba(255,255,255,.12); } /* Items */ .sr-settings-item{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.05); color:#fff; padding:11px 16px; cursor:pointer; font-size:14px; text-align:left; transition:background .15s; } .sr-settings-item:last-child{ border-bottom:none; } .sr-settings-item:hover:not(:disabled){ background:rgba(255,255,255,.08); } .sr-item-dot{ width:10px; height:10px; border-radius:50%; border:2px solid rgba(255,255,255,.3); flex-shrink:0; transition:background .15s, border-color .15s; } .sr-item-active .sr-item-dot{ background:var(--progress-color); border-color:var(--progress-color); } .sr-item-active{ color:var(--progress-color); font-weight:600; } .sr-item-disabled{ opacity:.35; cursor:not-allowed !important; } .sr-item-na{ margin-left:auto; font-size:11px; color:rgba(255,255,255,.35); font-style:italic; } /* ── mobile panel tweaks ── */ @media(max-width:768px){ .sr-settings-panel{ width:190px; bottom:50px; right:4px; /* Prevent panel from overflowing above video */ max-height:calc(100% - 58px); overflow-y:auto; overscroll-behavior:contain; } .sr-settings-row{ padding:11px 12px; } .sr-row-label{ font-size:13px; } .sr-settings-item{ padding:9px 14px; font-size:13px; } .sr-sub-header{ padding:9px 12px; } } /* ========================================= PiP BUTTON ========================================= */ .sr-pip-btn{ background:transparent !important; border:none; cursor:pointer; padding:6px; color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:opacity .2s; flex-shrink:0; } .sr-pip-btn:hover{ opacity:.75; } /* ========================================= CUSTOM FLOATING PiP (fallback) ========================================= */ .sr-float-pip{ position:fixed; bottom:24px; right:20px; width:min(460px, 92vw); aspect-ratio:16/9; z-index:99999; background:#000; border-radius:12px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.65); cursor:move; display:none; } .sr-float-pip.sr-pip-active{ display:block; } .sr-float-pip video{ width:100% !important; height:100% !important; object-fit:contain !important; } .sr-float-pip .sr-pip-close{ position:absolute; top:6px; right:6px; width:24px; height:24px; background:rgba(0,0,0,.7); border:none; border-radius:50%; cursor:pointer; color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center; z-index:10; line-height:1; } .sr-float-pip .sr-pip-close:hover{ background:rgba(200,0,0,.8); } @media(max-width:768px){ .sr-skip-label{ font-size:7px !important; } .sr-float-pip{ width:min(340px, 92vw); bottom:16px; right:8px; } } /* ========================================= v1.9 — 3-SECTION LAYOUT ADDITIONS (appended to original CSS — do not remove above) ========================================= */ /* Progress bar — moved above controls */ .sr-progress-wrap{ position:absolute; left:0; right:0; bottom:44px; /* just above controls */ z-index:10; padding:0 6px; box-sizing:border-box; } .sr-progress-wrap .plyr__progress{ width:100%; } .sr-progress-wrap .plyr__progress input[type=range]{ width:100%; color:var(--progress-color); } /* Hide progress still inside controls (moved to sr-progress-wrap) */ .plyr__controls .plyr__progress{ display:none !important; } /* Hide Plyr's own time elements inside controls (we moved them to sr-time-wrap) */ .plyr__controls > .plyr__time{ display:none !important; } /* Controls bar — keep original gradient, add 3-section flex */ .plyr--video .plyr__controls{ position:absolute !important; bottom:0; left:0; right:0; display:flex !important; align-items:center !important; justify-content:space-between !important; flex-wrap:nowrap !important; width:100% !important; height:44px !important; box-sizing:border-box !important; gap:0 !important; /* Original gradient kept — transparent, readable */ background:linear-gradient(transparent, rgba(0,0,0,.78)) !important; padding:4px 10px !important; } /* Auto-hide classes */ .sr-progress-wrap, .plyr--video .plyr__controls{ transition:opacity .35s; } .srchnet-player.sr-playing.sr-ctrl-hidden .sr-progress-wrap, .srchnet-player.sr-playing.sr-ctrl-hidden .plyr--video .plyr__controls{ opacity:0 !important; pointer-events:none !important; } /* 3 sections */ .sr-ctrl-left{ display:flex; align-items:center; flex:0 0 auto; gap:0; } .sr-ctrl-center{ display:flex; align-items:center; flex:1 1 0; justify-content:center; gap:8px; min-width:0; } .sr-ctrl-right{ display:flex; align-items:center; flex:0 0 auto; gap:0; } /* Time display */ .sr-time-wrap{ display:flex; align-items:center; gap:5px; white-space:nowrap; } .sr-time-wrap .plyr__time{ font-size:13px !important; color:#ffffff !important; font-weight:700; padding:0 !important; min-width:auto !important; text-shadow:0 1px 3px rgba(0,0,0,.7); line-height:1; } .sr-time-wrap .plyr__time--duration{ color:#ffffff !important; font-weight:600 !important; font-size:14px !important; } .sr-time-sep{ color:rgba(255,255,255,.55); font-size:12px; line-height:1; } /* Volume wrapper — keep mute button inside */ .sr-ctrl-left .plyr__volume{ display:flex !important; align-items:center !important; } /* Desktop: PiP and Gear spacing */ @media(min-width:769px){ .sr-pip-btn{ padding:6px 8px !important; } .sr-gear-btn.plyr__control{ padding:6px 8px !important; margin-right:2px !important; } } /* Mobile adjustments */ @media(max-width:768px){ .plyr--video .plyr__controls{ height:38px !important; padding:3px 6px !important; } .sr-progress-wrap{ bottom:38px; padding:0 4px; } .sr-ctrl-center{ gap:4px; } .sr-time-wrap .plyr__time{ font-size:11px !important; } .sr-time-sep{ font-size:10px; } /* Mobile playing: overlay fade */ .srchnet-player.sr-playing .overlay-play{ opacity:0; pointer-events:none; transition:none; } /* Show controls override on mobile */ .srchnet-player.sr-show-controls .sr-progress-wrap, .srchnet-player.sr-show-controls .plyr--video .plyr__controls{ opacity:1 !important; pointer-events:auto !important; transition:none !important; } .srchnet-player.sr-playing:not(.sr-show-controls) .sr-progress-wrap, .srchnet-player.sr-playing:not(.sr-show-controls) .plyr--video .plyr__controls{ opacity:0 !important; pointer-events:none !important; transition:opacity .35s !important; } } /* ========================================= v2.0 ADDITIONS ========================================= */ /* Controls bar — use CSS var for bg (from settings) */ .plyr--video .plyr__controls{ background:var(--ctrl-bar-bg, rgba(0,0,0,0.75)) !important; } /* ── Skip buttons v2.0: clean arrow icon, no label ── */ .sr-skip-btn{ background:transparent !important; border:none !important; cursor:pointer !important; color:var(--nav-text-color, #fff) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:36px !important; height:36px !important; border-radius:50% !important; padding:0 !important; flex-shrink:0 !important; transition:background .2s; } .sr-skip-btn:hover{ background:rgba(255,255,255,.15) !important; } .sr-skip-btn svg{ fill:var(--nav-text-color, #fff) !important; display:block; pointer-events:none; } /* Remove old sr-prev/sr-next styles for skip buttons */ .sr-prev-btn,.sr-next-btn{ min-width:unset !important; height:36px !important; border-radius:50% !important; flex-direction:row !important; gap:0 !important; } /* ── Time display in center ── */ .sr-time-wrap{ display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:14px; font-weight:600; } .sr-time-wrap .plyr__time{ font-size:14px !important; font-weight:700 !important; color:#ffffff !important; text-shadow:0 1px 4px rgba(0,0,0,.9); min-width:auto !important; padding:0 !important; line-height:1; letter-spacing:0.3px; } /* Current time: white bold */ .sr-time-wrap .plyr__time--current{ color:#ffffff !important; font-weight:700 !important; font-size:14px !important; } /* Duration: same as current time */ .sr-time-wrap .plyr__time--duration{ color:#ffffff !important; font-weight:600 !important; font-size:14px !important; } .sr-time-sep{ color:rgba(255,255,255,.5); font-size:13px; font-weight:400; } /* Mobile skip btn size */ .sr-mobile-ui .sr-skip-btn{ width:30px !important; height:30px !important; } .sr-mobile-ui .sr-skip-btn svg{ width:16px !important; height:16px !important; } .sr-mobile-ui .sr-time-wrap .plyr__time{ font-size:12px !important; } .sr-mobile-ui .sr-time-sep{ font-size:11px; } /* ========================================= v3.0 — MOBILE UI ========================================= */ /* Controls bar — single row: progress row (left) + icon stack (right) */ .sr-mobile-ui .plyr--video .plyr__controls{ flex-direction:row !important; align-items:flex-end !important; height:auto !important; padding:4px 8px 6px !important; gap:8px !important; background:var(--ctrl-bar-bg, rgba(0,0,0,0.80)) !important; } /* RIGHT-SIDE ICON STACK: volume | gear | pip | fullscreen — vertical, bottom-aligned so Fullscreen (last item) sits flush with the progress row */ .sr-mobile-ui .sr-mob-top-row{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; flex-shrink:0; width:32px; } /* BOTTOM ROW: curTime | [prev] | progress | [next] | durTime */ .sr-mobile-ui .sr-mob-bot-row{ display:flex; align-items:center; gap:4px; flex:1 1 auto; min-width:0; min-height:30px; /* match icon-stack button height so Fullscreen lines up with progress row */ } /* Progress slot inside bot row — takes all remaining space */ .sr-mobile-ui .sr-mob-progress-inline{ flex:1 1 0; height:20px; display:flex; align-items:center; position:relative; } /* Reposition the actual progress bar into the bot row slot */ .sr-mobile-ui .sr-progress-wrap{ position:static !important; bottom:auto !important; left:auto !important; right:auto !important; padding:0 !important; flex:1 1 0; display:flex; align-items:center; /* Remove from absolute stack — now inline in bot row */ } /* When mobile v3 active, progress wrap is inside controls directly */ .sr-mobile-ui .sr-mob-bot-row .sr-progress-wrap, .sr-mobile-ui .sr-mob-bot-row .plyr__progress{ flex:1 1 0; } .sr-mobile-ui .sr-mob-bot-row .plyr__progress input[type=range]{ width:100%; } /* Time elements in bot row */ .sr-mobile-ui .sr-mob-bot-row .plyr__time{ font-size:11px !important; font-weight:700 !important; color:#ffffff !important; white-space:nowrap; flex-shrink:0; min-width:32px; text-align:center; } .sr-mobile-ui .sr-mob-bot-row .plyr__time--duration{ color:rgba(255,255,255,.75) !important; font-weight:500 !important; } /* Right-side stack buttons (Volume / Gear / PiP / Fullscreen) */ .sr-mobile-ui .sr-mob-top-row .plyr__volume, .sr-mobile-ui .sr-mob-top-row .sr-gear-btn, .sr-mobile-ui .sr-mob-top-row .sr-pip-btn, .sr-mobile-ui .sr-mob-top-row [data-plyr="fullscreen"]{ width:30px !important; height:30px !important; flex-shrink:0; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } .sr-mobile-ui .sr-mob-top-row [data-plyr="fullscreen"]{ background:transparent !important; color:#fff !important; } .sr-mobile-ui .sr-mob-top-row [data-plyr="fullscreen"] svg{ width:18px !important; height:18px !important; } .sr-mobile-ui .sr-mob-top-row .plyr__volume input[type=range]{ display:none !important; /* hidden by default; opens on mute tap */ } .sr-mobile-ui .sr-mob-top-row .plyr__volume.sr-vol-open input[type=range]{ display:block !important; position:absolute !important; top:50% !important; bottom:auto !important; right:36px !important; left:auto !important; transform:translateY(-50%) !important; width:80px !important; height:6px !important; background:rgba(25,25,25,.97) !important; border-radius:30px !important; z-index:10000 !important; touch-action:none !important; -webkit-appearance:none !important; padding:14px 6px !important; box-sizing:content-box !important; } /* Skip buttons in bot row */ .sr-mobile-ui .sr-mob-bot-row .sr-skip-btn{ width:24px !important; height:24px !important; flex-shrink:0; } .sr-mobile-ui .sr-mob-bot-row .sr-skip-btn svg{ width:14px !important; height:14px !important; } /* Inline play button in bot row (only present when Mobile "Play Button" = Show) */ .sr-mobile-ui .sr-mob-bot-row .sr-mob-play-btn{ width:24px !important; height:24px !important; padding:0 !important; margin:0 !important; flex-shrink:0; display:inline-flex !important; align-items:center !important; justify-content:center !important; background:transparent !important; } .sr-mobile-ui .sr-mob-bot-row .sr-mob-play-btn svg{ width:16px !important; height:16px !important; } /* Overlay play button — mobile v3: stays visible while playing */ .srchnet-player.sr-mobile-ui.sr-playing .overlay-play{ opacity:0.45; pointer-events:auto; /* tap to pause */ transition:opacity .3s; } .srchnet-player.sr-mobile-ui.sr-playing.sr-show-controls .overlay-play{ opacity:0.45; } /* Hide/show controls (progress now inside controls, moves together) */ .sr-mobile-ui .sr-progress-wrap{ /* Mobile v3: progress is inside .plyr__controls via bot row */ display:none !important; /* hide the old absolute-positioned wrap */ } .sr-mobile-ui .plyr--video .plyr__controls{ /* already handles show/hide via opacity */ } /* Auto-hide for mobile v3 (controls = 2-row bar) */ .srchnet-player.sr-mobile-ui.sr-playing:not(.sr-show-controls) .plyr--video .plyr__controls{ opacity:0 !important; pointer-events:none !important; transition:opacity .35s !important; } .srchnet-player.sr-mobile-ui.sr-show-controls .plyr--video .plyr__controls{ opacity:1 !important; pointer-events:auto !important; transition:none !important; } /* Mobile v3 — inline progress inside bot row */ .sr-mob-progress-inline{ flex:1 1 0; min-width:0; display:flex; align-items:center; } .sr-mob-progress-inline .plyr__progress{ width:100%; flex:1; } .sr-mob-progress-inline .plyr__progress input[type=range]{ width:100%; color:var(--progress-color); } /* ── Fullscreen icon: hide Plyr default SVGs, show only custom ── */ .plyr__control[data-plyr="fullscreen"] > svg:not(:last-child){ display:none !important; } .plyr__control[data-plyr="fullscreen"] > svg{ display:block !important; } .plyr--fullscreen-active .plyr__control[data-plyr="fullscreen"] > svg{ display:none !important; } .plyr--fullscreen-active .plyr__control[data-plyr="fullscreen"] > svg:last-child{ display:block !important; } /* ── Mobile progress inline fix ── */ .sr-mob-progress-inline{ flex:1 1 0 !important; min-width:0 !important; display:flex !important; align-items:center !important; height:20px !important; } .sr-mob-progress-inline .plyr__progress{ flex:1 !important; width:100% !important; display:flex !important; align-items:center !important; } .sr-mob-progress-inline .plyr__progress input[type=range]{ width:100% !important; color:var(--progress-color) !important; display:block !important; } .sr-mob-progress-inline .plyr__progress__buffer{ display:block !important; } /* Make sure old sr-progress-wrap (absolute) is hidden on mobile */ .sr-mobile-ui .sr-progress-wrap{ display:none !important; } /* ── Mobile top row: hide entirely when empty ── */ .sr-mobile-ui .sr-mob-top-row:empty{ display:none !important; } .sr-mobile-ui .sr-mob-top-row{ min-height:0 !important; } /* When top row has no visible children, collapse it */ .sr-mobile-ui .sr-mob-top-row > *{ display:none; } .sr-mobile-ui .sr-mob-top-row > *[style*="display: flex"], .sr-mobile-ui .sr-mob-top-row > .sr-pip-btn, .sr-mobile-ui .sr-mob-top-row > .sr-gear-btn, .sr-mobile-ui .sr-mob-top-row > .plyr__volume, .sr-mobile-ui .sr-mob-top-row > [data-plyr="fullscreen"]{ display:inline-flex !important; } /* ── Time display v3 fix: readable, not heavy ── */ .sr-mob-bot-row .plyr__time{ font-size:12px !important; font-weight:500 !important; color:rgba(255,255,255,.95) !important; white-space:nowrap !important; flex-shrink:0 !important; min-width:34px !important; text-align:center !important; text-shadow:0 1px 2px rgba(0,0,0,.8) !important; line-height:1 !important; padding:0 !important; } .sr-mob-bot-row .plyr__time--duration{ color:#ffffff !important; font-weight:500 !important; font-size:12px !important; } /* Desktop time — keep v2 style */ .sr-ctrl-center .sr-time-wrap .plyr__time{ font-size:14px !important; font-weight:600 !important; color:#ffffff !important; } .sr-ctrl-center .sr-time-wrap .plyr__time--duration{ color:#ffffff !important; font-weight:600 !important; } /* ── Mobile overlay: smooth show/hide ── */ @media(max-width:768px){ .overlay-play{ transition:opacity .4s ease !important; } /* Playing: overlay hidden by JS (opacity:0) */ /* Paused: overlay visible (opacity:1) via JS */ } /* ── Overlay icon (SVG) styles ── */ .overlay-play svg{ display:block; fill:var(--play-icon, #ffffff); pointer-events:none; flex-shrink:0; } /* Smooth fade transition */ .overlay-play{ transition:opacity .35s ease !important; } /* ══════════════════════════════════════ OVERLAY DUAL ICON — state classes .sr-state-play = show ▶ .sr-state-pause = show ⏸ ══════════════════════════════════════ */ .overlay-play{ transition:opacity .25s ease !important; flex-direction:column; } /* Both icons stacked — only one visible at a time */ .overlay-play .sr-icon-play, .overlay-play .sr-icon-pause{ display:none; /* hidden by default */ align-items:center; justify-content:center; width:100%; height:100%; pointer-events:none; } .overlay-play .sr-icon-play svg, .overlay-play .sr-icon-pause svg{ width:var(--play-icon-size, 55%); height:var(--play-icon-size, 55%); fill:var(--play-icon, #ffffff); display:block; pointer-events:none; } /* sr-state-play → only show ▶ */ .overlay-play.sr-state-play .sr-icon-play { display:flex; } .overlay-play.sr-state-play .sr-icon-pause { display:none; } /* sr-state-pause → only show ⏸ */ .overlay-play.sr-state-pause .sr-icon-play { display:none; } .overlay-play.sr-state-pause .sr-icon-pause { display:flex; } /* Once JS injects the ▶/⏸ SVG pair, hide the old static ::before triangle so it no longer overlaps the toggling icon (v3.5 fix) */ .overlay-play.sr-icons-ready::before{ content:none; } /* Mobile ▶/⏸ icon size (independent from desktop) */ .sr-mobile-ui .overlay-play .sr-icon-play svg, .sr-mobile-ui .overlay-play .sr-icon-pause svg{ width:var(--play-icon-size-mobile, 55%); height:var(--play-icon-size-mobile, 55%); } /* ========================================= v3.6 — SITE LOGO WATERMARK ========================================= */ .sr-logo-wrap{ position:absolute; width:var(--logo-size, 60px); height:auto; max-height:calc(var(--logo-size, 60px) * 1.4); max-width:40%; opacity:var(--logo-opacity, 0.85); z-index:5; pointer-events:none; -webkit-user-drag:none; user-select:none; object-fit:contain; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); } .sr-logo-top-left { top:var(--logo-offset-y, 4px); left:var(--logo-offset-x, 4px); } .sr-logo-top-right { top:var(--logo-offset-y, 4px); right:var(--logo-offset-x, 4px); } .sr-logo-bottom-left { bottom:calc(var(--logo-offset-y, 4px) + 36px); left:var(--logo-offset-x, 4px); } .sr-logo-bottom-right { bottom:calc(var(--logo-offset-y, 4px) + 36px); right:var(--logo-offset-x, 4px); } /* Bottom logo positions: nudge clear of the taller mobile icon stack / progress row */ .sr-mobile-ui .sr-logo-bottom-left { bottom:calc(var(--logo-offset-y, 4px) + 30px); } .sr-mobile-ui .sr-logo-bottom-right { bottom:calc(var(--logo-offset-y, 4px) + 140px); } /* clears the vertical Volume/Gear/PiP/Fullscreen stack */ /* Mobile logo size (independent from desktop) */ .sr-mobile-ui .sr-logo-wrap{ width:var(--logo-size-mobile, 40px); max-height:calc(var(--logo-size-mobile, 40px) * 1.4); }