/* Player-only layout. Base declarations work in Android 6 / WebView 66; media and authority state, including [hidden], remain owned by the player. */ #playerView.unified-player { --viewer-surface: #10191d; --viewer-text: #e9f0f1; --viewer-muted: #93aba8; --viewer-green: #53c6a7; --viewer-selected: #193a33; --viewer-drawer-width: 288px; --viewer-target: 40px; --viewer-row: 40px; --viewer-left: 16px; --viewer-right: 16px; --viewer-top: 16px; --viewer-sheet-height: 56%; --viewer-sheet-bottom: 16px; --viewer-controls-bottom: 20px; --viewer-feedback-gap: 16px; position: relative; display: block; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden; background: #0b1012; color: var(--viewer-text); font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif; font-size: 16px; color-scheme: dark; } #playerView.unified-player.compact-player-ui:not(.platform-tv) { --viewer-target: 44px; --viewer-row: 45px; } @media (pointer: coarse), (any-pointer: coarse) { #playerView.unified-player:not(.platform-tv) { --viewer-target: 44px; --viewer-row: 45px; } } #playerView.unified-player.platform-tv { --viewer-drawer-width: 280px; --viewer-target: 40px; --viewer-row: 38px; } #playerView.unified-player, #playerView.unified-player *, #playerView.unified-player *::before, #playerView.unified-player *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } #playerView.unified-player .player-panel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } #playerView.unified-player #videoStage { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; min-height: 0; max-height: none; padding: 0; margin: 0; border: 0; border-radius: 0; background: #0b1012; aspect-ratio: auto; } #playerView.unified-player #videoSurface { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: auto; min-height: 0; padding: 0; margin: 0; background: #0b1012; } #playerView.unified-player #video, #playerView.unified-player #playbackStillFrame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; object-fit: contain; } #playerView.unified-player #videoSurface .player-brand-surface { padding: 16px; background: #0b1012; background-image: none; } #playerView.unified-player #channelPanel { display: block; position: absolute; z-index: 30; top: var(--viewer-top); right: auto; bottom: var(--viewer-sheet-bottom); left: var(--viewer-left); width: var(--viewer-drawer-width); height: calc(100% - var(--viewer-top) - var(--viewer-sheet-bottom)); max-width: calc(100% - var(--viewer-left) - var(--viewer-right)); max-height: none; align-self: stretch; padding: 0; margin: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--viewer-surface); color: var(--viewer-text); box-shadow: 0 16px 42px rgba(0,0,0,.2); } #playerView.unified-player #expandedSidebarPanel { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; padding: 0; } #playerView.unified-player #expandedSidebarPanel > * { order: 0; } #playerView.unified-player #channelDrawerHeader { order: 0; display: flex; flex: 0 0 auto; align-items: center; width: 100%; min-height: 0; padding: 8px 8px 6px; gap: 0; overflow: visible; } #playerView.unified-player #channelDrawerHeader > button:not([hidden]) { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-width: var(--viewer-target); height: var(--viewer-target); min-height: var(--viewer-target); padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--viewer-muted); font-size: 14px; } #playerView.unified-player #channelDrawerHeader > button + button { margin-left: 4px; } #playerView.unified-player #channelDrawerHeader #sidebarCollapseButton { flex: 1 1 auto; justify-content: flex-start; color: var(--viewer-text); font-size: 16px; font-weight: 600; } #playerView.unified-player #channelDrawerHeader .sidebar-action-label { font-size: inherit; line-height: 20px; } #playerView.unified-player #channelDrawerHeader .ui-icon { width: 18px; height: 18px; margin-left: 4px; } #playerView.unified-player #channelDrawerHeader > button[aria-pressed="true"], #playerView.unified-player #channelDrawerHeader > button[aria-expanded="true"]:not(#sidebarCollapseButton) { background: var(--viewer-selected); color: var(--viewer-green); } #playerView.unified-player #channelSearchPanel { order: 1; display: flex; flex: 0 0 auto; align-items: center; height: var(--viewer-target); min-height: var(--viewer-target); margin: 2px 12px 8px; padding: 0 8px; border: 0; border-radius: 7px; background: #0b1215; color: var(--viewer-muted); } #playerView.unified-player #channelSearch { flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; min-height: 0; padding: 0 6px; border: 0; background: transparent; color: var(--viewer-text); font-size: 15px; } #playerView.unified-player #channelSearchClearButton { flex: 0 0 auto; min-width: var(--viewer-target); min-height: var(--viewer-target); height: var(--viewer-target); padding: 0 4px; border: 0; background: transparent; color: var(--viewer-muted); font-size: 12px; } #playerView.unified-player #channelQuickFilters { order: 2; display: flex; flex: 0 0 auto; flex-wrap: nowrap; margin: 0 12px 8px; padding: 0; gap: 0; } #playerView.unified-player #channelQuickFilters > button:not([hidden]) { display: block; flex: 1 1 0; width: 0; min-width: 0; min-height: var(--viewer-target); height: var(--viewer-target); padding: 0 2px; border: 0; border-radius: 6px; background: transparent; color: var(--viewer-muted); font-size: 12px; } #playerView.unified-player #channelQuickFilters > button + button { margin-left: 3px; } #playerView.unified-player #channelQuickFilters > button[aria-pressed="true"] { background: var(--viewer-selected); color: var(--viewer-green); } #playerView.unified-player .channel-filter-bar { order: 3; flex: 0 0 auto; min-height: 0; margin: 0 12px 8px; padding: 0; color: var(--viewer-muted); } #playerView.unified-player:not(.catalog-filtered) .channel-filter-bar, #playerView.unified-player.sidebar-search-open .channel-filter-bar { display: none !important; } #playerView.unified-player.catalog-filtered:not(.sidebar-search-open) .channel-filter-bar { display: flex; } #playerView.unified-player #channelClearFiltersButton { min-width: var(--viewer-target); min-height: var(--viewer-target); border: 0; border-radius: 6px; background: var(--viewer-selected); color: var(--viewer-text); } #playerView.unified-player #channelBrowseControls { order: 4; flex: 0 0 auto; margin: 0 12px 8px; padding: 0; } #playerView.unified-player #channelList { order: 5; display: block; grid-template-columns: none; flex: 1 1 auto; min-height: 0; width: 100%; padding: 0 8px 8px; margin: 0; overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 0; background: transparent; color: #c5d1ce; scrollbar-width: thin; scrollbar-color: #344b48 transparent; } #playerView.unified-player #channelList .channel-row { display: grid; grid-template-columns: 22px minmax(0,1fr) 44px; align-items: center; min-width: 0; min-height: var(--viewer-row); margin: 1px 0; padding: 0 0 0 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; } #playerView.unified-player #channelList .channel-row[aria-selected="true"] { background: var(--viewer-selected); color: #e6f6ef; } #playerView.unified-player #channelList .channel-name { padding: 0 4px 0 10px; font-size: 16px; font-weight: 500; } #playerView.unified-player #channelList .channel-index { color: #758d85; text-align: left; font-size: 12px; } #playerView.unified-player #channelList .availability-dot { display: none; } #playerView.unified-player #channelList .favorite-button { width: 44px; min-width: 44px; height: var(--viewer-row); min-height: var(--viewer-row); padding: 0; border: 0; border-radius: 7px; background: transparent; color: #72988b; } #playerView.unified-player #channelList .favorite-button.active { color: var(--viewer-green); } #playerView.unified-player #channelList .favorite-button.favorite-reminder { color: #dda236; background: rgba(255,213,107,.18); } #playerView.unified-player #channelList .channel-has-report { grid-template-columns: minmax(0,1fr) 78px 44px; } #playerView.unified-player #channelList .channel-has-report .manual-source-report { grid-column: 2; } #playerView.unified-player #channelList .channel-has-report .favorite-button { grid-column: 3; } #playerView.unified-player #channelPagination { order: 6; flex: 0 0 auto; padding: 4px 12px 8px; } #playerView.unified-player #channelPagination button { min-height: var(--viewer-target); border: 0; background: transparent; color: var(--viewer-muted); } #playerView.unified-player #allChannelsTab, #playerView.unified-player #fullscreenChannelsButton, #playerView.unified-player #tvRemoteHint { display: none !important; } #playerView.unified-player.sidebar-collapsed #channelPanel { top: var(--viewer-top); right: auto; bottom: auto; left: var(--viewer-left); width: auto; height: auto; max-width: calc(100% - var(--viewer-left) - var(--viewer-right)); overflow: visible; border-radius: 10px; background: transparent; box-shadow: none; transform: none; } #playerView.unified-player #collapsedSidebarRail { width: auto; height: auto; min-height: 0; padding: 0; } #playerView.unified-player #sidebarExpandButton:not([hidden]) { display: inline-flex; align-items: center; width: auto; min-width: var(--viewer-target); height: var(--viewer-target); min-height: var(--viewer-target); padding: 0 14px; border: 0; border-radius: 10px; background: var(--viewer-surface); color: var(--viewer-text); box-shadow: 0 8px 20px rgba(0,0,0,.15); } #playerView.unified-player #sidebarExpandButton .collapsed-label { display: inline; margin-left: 6px; font-size: 15px; } #playerView.unified-player #playerControls { display: flex; align-items: center; flex-wrap: wrap; position: absolute; z-index: 20; top: auto; right: auto; bottom: var(--viewer-controls-bottom); left: calc(50% + (var(--viewer-left) - var(--viewer-right)) / 2); width: max-content; max-width: calc(100% - var(--viewer-left) - var(--viewer-right)); height: auto; min-height: 0; gap: 0; padding: 6px 8px 6px 14px; margin: 0; border: 0; border-radius: 12px; background: var(--viewer-surface); box-shadow: 0 8px 28px rgba(0,0,0,.2); transform: translateX(-50%); opacity: 1; visibility: visible; pointer-events: auto; } #playerView.unified-player:not(.sidebar-collapsed) #playerControls, #playerView.unified-player.fullscreen-channel-picker-open #playerControls { left: calc(50% + (var(--viewer-left) + var(--viewer-drawer-width) + 16px - var(--viewer-right)) / 2); max-width: calc(100% - var(--viewer-left) - var(--viewer-right) - var(--viewer-drawer-width) - 16px); } #playerView.unified-player #playerControls .playback-status { display: block; flex: 0 1 auto; min-width: 0; min-height: 0; max-width: 220px; margin: 0; padding: 0 16px 0 2px; overflow: hidden; color: var(--viewer-text); white-space: nowrap; } #playerView.unified-player #playbackStatus { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; } #playerView.unified-player #statusDot, #playerView.unified-player #sourceStatus, #playerView.unified-player #licenseStatus { display: none; } #playerView.unified-player #playerControls .control-actions { display: flex; flex: 0 1 auto; align-items: center; flex-wrap: wrap; min-width: 0; width: auto; gap: 0; } #playerView.unified-player #playerControls .control-actions > * + * { margin-left: 4px; } #playerView.unified-player #playerControls .video-icon-button, #playerView.unified-player #playerControls .video-source-button, #playerView.unified-player #sidebarMoreButton { width: auto; min-width: var(--viewer-target); min-height: var(--viewer-target); height: var(--viewer-target); padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #d1ded8; } #playerView.unified-player #playPauseButton { color: #a2ddc5; } #playerView.unified-player #playerControls .video-source-button { font-size: 13px; } #playerView.unified-player.compact-player-ui #switchSourceButton { width: var(--viewer-target); padding: 0; } #playerView.unified-player.compact-player-ui #switchSourceButton .source-switch-label { display: none; } #playerView.unified-player.compact-player-ui #switchSourceButton .ui-icon { display: block; } #playerView.unified-player #playerControls .player-secondary-controls { position: static; display: block; flex: 0 0 auto; } #playerView.unified-player.compact-player-ui .player-secondary-controls { display: none !important; } #playerView.unified-player #sidebarMorePanel { top: auto; right: 0; bottom: calc(100% + 12px); left: auto; width: 320px; max-width: 100%; max-height: calc(var(--desktop-visible-height, 100vh) - 100% - var(--viewer-controls-bottom) - 28px); padding: 12px; overflow: auto; background: var(--viewer-surface); color: var(--viewer-text); } #playerView.unified-player #sidebarMorePanel #volumeSlider { display: block; width: 100%; } #playerView.unified-player #sidebarMorePanel #playerNumber { grid-column: 1 / -1; max-width: 100%; } #playerView.unified-player #playerControls .control-actions > #volumeSlider, #playerView.unified-player #playerControls .control-actions > #volumeText, #playerView.unified-player #playerControls > #playerNumber { display: none; } #playerView.unified-player #playbackAction { position: static; flex: 0 1 auto; flex-wrap: wrap; width: auto; margin: 0; padding: 0; } #playerView.unified-player #playbackActionMessage.playback-error-message { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); max-height: 35vh; overflow: auto; padding: 10px; border: 0; border-radius: 8px; background: var(--viewer-surface); color: var(--viewer-text); white-space: normal; } #playerView.unified-player #playerControls .vod-timeline { flex: 1 1 100%; width: 100%; min-width: 120px; max-width: none; min-height: var(--viewer-target); } #playerView.unified-player #playerControls .vod-resume { flex: 1 1 100%; min-height: var(--viewer-target); } #playerView.unified-player #loadingOverlay { left: 50%; right: auto; bottom: 88px; max-width: calc(100% - 32px); transform: translateX(-50%); background: var(--viewer-surface); } #playerView.unified-player #loadingOverlay .loading-line { display: none; } #playerView.unified-player #loadingText { max-width: 100%; } #playerView.unified-player.controls-hidden #playerControls { opacity: 0; visibility: hidden; pointer-events: none; } #playerView.unified-player.controls-hidden #playerControls:focus-within { opacity: 1; visibility: visible; pointer-events: auto; } #playerView.unified-player.controls-hidden.vod-controls-visible #playerControls { opacity: 1; visibility: visible; pointer-events: auto; } #playerView.unified-player.sidebar-collapsed.controls-hidden #channelPanel:not(:focus-within) { visibility: hidden; } #playerView.unified-player button:focus, #playerView.unified-player input:focus, #playerView.unified-player select:focus, #playerView.unified-player .channel-row:focus { outline: 3px solid #ffbf55; outline-offset: -3px; } #playerView.unified-player #channelPanel, #playerView.unified-player #playerControls { filter: none; backdrop-filter: none; } html.app-fullscreen-active #playerView.unified-player { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; } #playerView.unified-player.fullscreen-channel-picker-open #channelPanel { top: var(--viewer-top); right: auto; bottom: var(--viewer-sheet-bottom); left: var(--viewer-left); width: var(--viewer-drawer-width); height: calc(100% - var(--viewer-top) - var(--viewer-sheet-bottom)); background: var(--viewer-surface); border-radius: 12px; overflow: hidden; transform: none; } /* The real activation controller moves the original form into this dialog. */ #activationCodeDialog { top: 0; right: 0; bottom: 0; left: 0; width: calc(100vw - 32px); max-width: 380px; max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 12px; background: #0b1012; color: #e9f0f1; color-scheme: dark; box-shadow: none; filter: none; backdrop-filter: none; } #activationCodeDialog::backdrop { background: #0b1012; backdrop-filter: none; } #activationCodeDialog, #activationCodeDialog *, #activationCodeDialog *::before, #activationCodeDialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } #activationCodeDialog .sign-in-card { width: 100%; padding: 32px 24px 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; } #activationCodeDialog #lockedTitle { margin: 28px 0 16px; color: #c6d5ce; font-size: 17px; line-height: 1.3; font-weight: 500; } #activationCodeDialog #activationForm { display: flex; flex-direction: column; width: 100%; gap: 0; } #activationCodeDialog #activationForm > :not([hidden]) ~ :not([hidden]) { margin-top: 10px; } #activationCodeDialog label { color: #93aba8; font-size: 13px; line-height: 1.4; text-align: left; } #activationCodeDialog input, #activationCodeDialog select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #304940; border-radius: 8px; background: #10191d; color: #f0f8f4; caret-color: #53c6a7; } #activationCodeDialog #accountUsername { text-align: center; letter-spacing: .12em; font-size: 19px; } #activationCodeDialog #activationServer { text-align: left; letter-spacing: normal; font-size: 14px; } #activationCodeDialog #activationSubmitButton, #activationCodeDialog #playerGrantUse { min-height: 46px; margin-top: 2px; padding: 8px 14px; border: 0; border-radius: 8px; background: #3d8d71; color: #fff; font-size: 16px; font-weight: 560; } #activationCodeDialog #activationSubmitButton:hover:not(:disabled), #activationCodeDialog #playerGrantUse:hover:not(:disabled) { background: #499d80; } #activationCodeDialog #activationStatus { min-height: 18px; margin: 10px 0 0 !important; color: #93aba8; font-size: 13px; line-height: 1.5; } #activationCodeDialog #activationCodeClose { top: 8px; right: 8px; min-width: 44px; min-height: 44px; height: 44px; padding: 0 8px; border: 0; background: transparent; color: #93aba8; } #activationCodeDialog button:focus, #activationCodeDialog input:focus, #activationCodeDialog select:focus { outline: 3px solid #ffbf55; outline-offset: -3px; } @media (max-height: 500px) { #activationCodeDialog .sign-in-card { padding: 20px 24px; } #activationCodeDialog #lockedTitle { margin: 12px 0; font-size: 16px; } #activationCodeDialog input, #activationCodeDialog #activationSubmitButton { min-height: 44px; } #activationCodeDialog:not(.compact-player-ui) #activationForm { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-row-gap: 10px; grid-column-gap: 12px; } #activationCodeDialog:not(.compact-player-ui) #activationForm > :not([hidden]) { margin-top: 0; } } @supports (bottom: env(safe-area-inset-bottom, 0px)) { #playerView.unified-player { --viewer-left: calc(16px + env(safe-area-inset-left, 0px)); --viewer-right: calc(16px + env(safe-area-inset-right, 0px)); --viewer-top: calc(16px + env(safe-area-inset-top, 0px)); --viewer-sheet-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); --viewer-controls-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } } @media (orientation: portrait) and (max-width: 1100px) { #playerView.unified-player:not(.sidebar-collapsed) #channelPanel, #playerView.unified-player.fullscreen-channel-picker-open #channelPanel { top: auto; right: auto; bottom: var(--viewer-sheet-bottom); left: calc(50% + (var(--viewer-left) - var(--viewer-right)) / 2); width: calc(100% - var(--viewer-left) - var(--viewer-right)); max-width: 460px; height: var(--viewer-sheet-height); max-height: none; transform: translateX(-50%); } #playerView.unified-player:not(.sidebar-collapsed) #videoSurface, #playerView.unified-player.fullscreen-channel-picker-open #videoSurface { bottom: calc(var(--viewer-sheet-height) + var(--viewer-sheet-bottom)); } #playerView.unified-player:not(.sidebar-collapsed) #playerControls, #playerView.unified-player.fullscreen-channel-picker-open #playerControls { display: none; } #playerView.unified-player #playerControls { max-width: calc(100% - var(--viewer-left) - var(--viewer-right)); padding: 6px; } #playerView.unified-player #playerControls .playback-status { max-width: 150px; padding-right: 7px; } #playerView.unified-player #playbackStatus { font-size: 13px; } #playerView.unified-player #loadingOverlay { bottom: 16px; } #playerView.unified-player.playback-feedback-visible:not(.sidebar-collapsed) #playerControls, #playerView.unified-player.playback-feedback-visible.fullscreen-channel-picker-open #playerControls { display: flex; left: calc(50% + (var(--viewer-left) - var(--viewer-right)) / 2); bottom: calc(var(--viewer-sheet-height) + var(--viewer-sheet-bottom) + var(--viewer-feedback-gap)); max-width: calc(100% - var(--viewer-left) - var(--viewer-right)); } } @media (orientation: portrait) and (max-width: 1100px) and (max-height: 430px) { #playerView.unified-player { --viewer-sheet-height: calc(100% - var(--viewer-sheet-bottom) - 96px); --viewer-feedback-gap: 0px; } #playerView.unified-player #playbackActionMessage.playback-error-message { max-height: 28px; } } @media (orientation: landscape) and (max-width: 600px) { #playerView.unified-player #playerControls { padding: 6px; } #playerView.unified-player:not(.sidebar-collapsed) #playerControls .control-actions > * + *, #playerView.unified-player.fullscreen-channel-picker-open #playerControls .control-actions > * + * { margin-left: 0; } }