shaka-player
Version:
DASH/EME video player library
32 lines • 31.2 kB
CSS
/*! @license
* Shaka Player
* Copyright 2016 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
:root{--shaka-controls-w:98%;--shaka-font-family:roboto,sans-serif;--shaka-font-color:#fff;--shaka-font-color-secondary:#ccc;--shaka-font-size:14px;--shaka-font-size-sm:12px;--shaka-bg:#00000080;--shaka-bg-hover:#000000bf;--shaka-bg-90:#000000e6;--shaka-bg-solid:#000;--shaka-bg-menu:#1c1c1ce6;--shaka-title-size:18px;--shaka-badge-color:#fff;--shaka-badge-active:red;--shaka-badge-size:10px;--shaka-icon-size:48px;--shaka-icon-size-sm:calc(var(--shaka-icon-size)/2);--shaka-icon-size-lg:calc(var(--shaka-icon-size)*2/3);--shaka-thumb-color:#fff;--shaka-track-color:#fff;--shaka-thumb-size:12px;--shaka-track-h:4px;--shaka-touch-size:40px;--shaka-rate-border:#ffffff80;--shaka-rate-border-active:#ffffffd9;--shaka-rate-bg-active:#ffffff1a;--shaka-rate-slider:#ffffff40;--shaka-rate-preset-bg:#ffffff1a;--shaka-rate-preset-hover:#ffffff2e;--shaka-rate-preset-active:#fff3;--shaka-rate-preset-border:#ffffffb3}.shaka-hidden{display:none}button,input,select,textarea{font-family:inherit}@media (forced-colors:active){.shaka-context-menu,.shaka-overflow-menu,.shaka-settings-menu{border:1px solid ButtonText}}.shaka-video-container{position:relative;top:0;left:0;display:flex;font-family:var(--shaka-font-family);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}.shaka-video-container .shaka-ui-icon{font-size:var(--shaka-icon-size-sm)}.shaka-video-container *,.shaka-video-container :after,.shaka-video-container :before{box-sizing:revert}.shaka-video-container.pip-mode{background-color:var(--shaka-bg-solid);width:100vw;height:100vh;width:100dvw;height:100dvh}.shaka-video-container:fullscreen{width:100%;height:100%;background-color:var(--shaka-bg-solid)}.shaka-video-container:fullscreen :is(.shaka-speech-to-text-container,.shaka-text-container){font-size:4.4vmin}.shaka-controls-container{position:absolute;top:0;left:0;right:0;bottom:0;margin:0;padding:0;width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;z-index:1}.shaka-video-container:not([shaka-controls=true]) .shaka-controls-container{display:none}.shaka-controls-container *{flex-shrink:0}.shaka-controls-container[casting=true] .shaka-fullscreen-button{display:none}.shaka-canvas-container,.shaka-vr-canvas-container{position:absolute;top:0;left:0;right:0;bottom:0;margin:0;padding:0;width:100%;height:100%;pointer-events:none}.shaka-top-controls{position:absolute;top:0}.shaka-bottom-controls,.shaka-top-controls{width:var(--shaka-controls-w);padding:0;z-index:1}.shaka-context-menu button .shaka-current-selection-span{display:none}.shaka-big-buttons-container{margin:0;width:100%;height:100%;flex-shrink:1;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;gap:2.5%;z-index:2;pointer-events:none}.shaka-big-buttons-container .shaka-ui-icon{width:75%;height:75%}.shaka-big-buttons-container button{width:12.5%;aspect-ratio:1/1;border-radius:50%;border:none;margin:0;padding:0;pointer-events:auto;display:flex;justify-content:center;align-items:center;color:var(--shaka-font-color);background-color:var(--shaka-bg);box-shadow:0 8px 24px #00000059;cursor:pointer;transition:transform .18s ease-out,background-color .18s ease-out;opacity:0;transition:opacity .6s cubic-bezier(.4,0,.6,1)}.shaka-big-buttons-container button:not([disabled]):hover{transform:scale(1.06);background-color:var(--shaka-bg-hover)}.shaka-big-buttons-container button:not([disabled]):active{transform:scale(.96)}@media (prefers-reduced-motion:reduce){.shaka-big-buttons-container button{transition:none}}:is(.shaka-controls-container[casting=true],.shaka-controls-container[shown=true]) .shaka-big-buttons-container button{opacity:1}.shaka-big-buttons-container button[disabled]{cursor:not-allowed}:is(.shaka-controls-container[casting=true],.shaka-controls-container[shown=true]) .shaka-big-buttons-container button[disabled]{opacity:.5}.shaka-video-container.pip-placeholder{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:14px;margin:auto;overflow:hidden}.shaka-video-container.pip-placeholder .pip-poster{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:50%}.shaka-video-container.pip-placeholder .pip-blur-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(18px) brightness(.55);backdrop-filter:blur(18px) brightness(.55);z-index:1}.shaka-video-container.pip-placeholder .pip-icon-group{position:relative;display:flex;justify-content:center;align-items:center;z-index:2;width:15%;aspect-ratio:1/1}.shaka-video-container.pip-placeholder .pip-pulse-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #ffffff59;animation:pip-pulse 2s ease-out infinite;pointer-events:none}@media (prefers-reduced-motion:reduce){.shaka-video-container.pip-placeholder .pip-pulse-ring{animation:none}}@keyframes pip-pulse{0%{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}.shaka-video-container.pip-placeholder .shaka-ui-icon{width:75%;height:75%}.shaka-video-container.pip-placeholder .pip-icon-wrapper{width:100%;aspect-ratio:1/1;border-radius:50%;position:relative;display:flex;justify-content:center;align-items:center;color:var(--shaka-font-color);background-color:#00000073;border:1.5px solid #ffffff40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;transition:transform .18s ease-out,background-color .18s ease-out,border-color .18s ease-out}.shaka-video-container.pip-placeholder .pip-icon-wrapper:hover{transform:scale(1.06);background-color:#0000009e;border-color:#ffffff73}.shaka-video-container.pip-placeholder .pip-icon-wrapper:active{transform:scale(.96)}@media (prefers-reduced-motion:reduce){.shaka-video-container.pip-placeholder .pip-icon-wrapper{transition:none}}.shaka-video-container.pip-placeholder .pip-label{position:relative;z-index:2;margin:0;font-size:var(--shaka-title-size);color:#ffffff8c;letter-spacing:.04em;text-align:center;pointer-events:none;text-shadow:0 1px 6px #000c}.shaka-controls-button-panel,.shaka-controls-top-button-panel{padding:0;margin:0;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;overflow:hidden;min-width:48px;font-size:var(--shaka-font-size-sm);font-weight:400;font-style:normal;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .6s cubic-bezier(.4,0,.6,1)}.shaka-controls-container[casting=true] .shaka-controls-button-panel,.shaka-controls-container[casting=true] .shaka-controls-top-button-panel,.shaka-controls-container[shown=true] .shaka-controls-button-panel,.shaka-controls-container[shown=true] .shaka-controls-top-button-panel{opacity:1}.shaka-controls-button-panel>*,.shaka-controls-top-button-panel>*{color:var(--shaka-font-color);height:var(--shaka-icon-size);width:var(--shaka-icon-size);line-height:.5;padding:0 2px;background:#0000;border:0;cursor:pointer;opacity:.9;transition:opacity .1s cubic-bezier(.4,0,.6,1);text-shadow:0 0 2px var(--shaka-bg)}:is(.shaka-controls-button-panel,.shaka-controls-top-button-panel)>:hover{opacity:1}.shaka-controls-button-panel>.shaka-fast-forward-button .shaka-ui-icon,.shaka-controls-button-panel>.shaka-play-button .shaka-ui-icon,.shaka-controls-button-panel>.shaka-rewind-button .shaka-ui-icon,.shaka-controls-button-panel>.shaka-skip-next-button .shaka-ui-icon,.shaka-controls-button-panel>.shaka-skip-previous-button .shaka-ui-icon,.shaka-controls-top-button-panel>.shaka-fast-forward-button .shaka-ui-icon,.shaka-controls-top-button-panel>.shaka-play-button .shaka-ui-icon,.shaka-controls-top-button-panel>.shaka-rewind-button .shaka-ui-icon,.shaka-controls-top-button-panel>.shaka-skip-next-button .shaka-ui-icon,.shaka-controls-top-button-panel>.shaka-skip-previous-button .shaka-ui-icon{font-size:var(--shaka-icon-size-lg)}.shaka-controls-button-panel>.shaka-fullscreen-button,.shaka-controls-button-panel>.shaka-overflow-menu-button,.shaka-controls-top-button-panel>.shaka-fullscreen-button,.shaka-controls-top-button-panel>.shaka-overflow-menu-button{position:relative}.shaka-controls-button-panel>.shaka-fullscreen-button .shaka-ui-icon,.shaka-controls-button-panel>.shaka-overflow-menu-button .shaka-ui-icon,.shaka-controls-top-button-panel>.shaka-fullscreen-button .shaka-ui-icon,.shaka-controls-top-button-panel>.shaka-overflow-menu-button .shaka-ui-icon{font-size:var(--shaka-icon-size-sm)}:is(.shaka-controls-button-panel,.shaka-controls-top-button-panel)>.shaka-mute-volume-container{width:auto;height:auto;padding:0;background:#0000;border:0}:is(.shaka-controls-button-panel,.shaka-controls-top-button-panel)>.shaka-mute-volume-container .shaka-mute-button{color:var(--shaka-font-color);height:var(--shaka-icon-size);width:var(--shaka-icon-size);line-height:.5;padding:0 2px;background:#0000;border:0;cursor:pointer;opacity:.9;transition:opacity .1s cubic-bezier(.4,0,.6,1);text-shadow:0 0 2px var(--shaka-bg)}:is(.shaka-controls-button-panel,.shaka-controls-top-button-panel)>.shaka-mute-volume-container .shaka-mute-button:hover{opacity:1}:is(.shaka-big-buttons-container,.shaka-controls-button-panel,.shaka-controls-top-button-panel) .shaka-overflow-menu-only{display:none}.shaka-ad-statistics-container,.shaka-statistics-container{overflow-x:hidden;overflow-y:auto;scrollbar-color:#ffffff26 #0000;scrollbar-width:thin;color:var(--shaka-font-color);background-color:#0c0e12e0;border:1px solid #ffffff14;box-shadow:0 4px 24px #00000080;font-size:var(--shaka-font-size);font-family:monospace;padding:0;border-radius:10px;position:absolute;z-index:2;top:15px;max-height:calc(100% - 115px);opacity:0;transition:opacity .6s cubic-bezier(.4,0,.6,1)}.shaka-controls-container[casting=true] .shaka-ad-statistics-container,.shaka-controls-container[casting=true] .shaka-statistics-container,.shaka-controls-container[shown=true] .shaka-ad-statistics-container,.shaka-controls-container[shown=true] .shaka-statistics-container{opacity:1}:is(.shaka-ad-statistics-container,.shaka-statistics-container) .shaka-statistics-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;border-bottom:1px solid #ffffff12}:is(.shaka-ad-statistics-container,.shaka-statistics-container) .shaka-statistics-header svg{width:16px;height:16px;opacity:.35;cursor:pointer;transition:opacity .15s}:is(.shaka-ad-statistics-container,.shaka-statistics-container) .shaka-statistics-header svg:hover{opacity:1}:is(.shaka-ad-statistics-container,.shaka-statistics-container) .shaka-statistics-section-label{display:block;padding:8px 14px 3px;font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#ffffffb3}:is(.shaka-ad-statistics-container,.shaka-statistics-container) .shaka-statistics-divider{display:block;height:1px;background:#ffffff0f;margin:6px 14px;padding:0}.shaka-ad-statistics-container div,.shaka-statistics-container div{display:flex;justify-content:space-between;align-items:center;padding:3px 14px;gap:16px;transition:background .1s}:is(.shaka-ad-statistics-container,.shaka-statistics-container) div:hover{background:#ffffff08}:is(.shaka-ad-statistics-container,.shaka-statistics-container) label{font-size:11px;color:#ffffff73;white-space:nowrap}.shaka-ad-statistics-container span,.shaka-statistics-container span{font-size:11px;color:#ffffffe6;font-variant-numeric:tabular-nums;text-align:right}.shaka-statistics-container{min-width:280px;left:15px}.shaka-ad-statistics-container{min-width:220px;right:15px}.shaka-scrim-container{margin:0;width:100%;position:absolute;left:0;right:0;bottom:0;flex-shrink:1;opacity:0;transition:opacity .6s cubic-bezier(.4,0,.6,1);height:61px;background:linear-gradient(#0000,#00000080)}:is(.shaka-controls-container[casting=true],.shaka-controls-container[shown=true]) .shaka-scrim-container{opacity:1}.shaka-speech-to-text-container,.shaka-text-container{position:absolute;left:0;right:0;top:0;pointer-events:none;bottom:0;width:100%;min-width:48px;transition:bottom .1s cubic-bezier(.4,0,.6,1);transition-delay:.5s;font-size:20px;line-height:1.4;color:var(--shaka-font-color)}:is(.shaka-speech-to-text-container,.shaka-text-container) span.shaka-text-wrapper{display:inline;background:none}.shaka-controls-container[shown=true]~:is(.shaka-speech-to-text-container,.shaka-text-container){transition-delay:0s}.shaka-spinner-container{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;flex-shrink:1;display:flex;justify-content:center;align-items:center}.shaka-video-container:not([shaka-controls=true]) .shaka-spinner-container{display:none}.shaka-hidden-fast-forward-container,.shaka-hidden-rewind-container{height:100%;width:40%;flex-shrink:1;z-index:1}.shaka-hidden-fast-forward-container{position:absolute;left:0;right:0;top:0;bottom:0;left:60%}.shaka-hidden-rewind-container{position:absolute;left:0;right:0;top:0;bottom:0}.shaka-video-container.no-cursor,.shaka-video-container.no-cursor *{cursor:none}.shaka-current-time{font-size:var(--shaka-font-size);color:var(--shaka-font-color);cursor:pointer;width:auto;padding:0 5px}.shaka-current-time[disabled]{background-color:initial;color:var(--shaka-font-color);cursor:default}.shaka-content-title{display:flex;justify-content:center;flex-direction:column;font-size:var(--shaka-title-size);color:var(--shaka-font-color);width:auto;padding:0 5px;text-shadow:0 1px 3px #000c,0 2px 6px #0009}.shaka-controls-container :is(button:focus,input:focus){outline:1px solid Highlight}.shaka-controls-container button:-moz-focus-inner,.shaka-controls-container input:-moz-focus-outer{outline:none;border:0}.shaka-controls-container:not(.shaka-keyboard-navigation) :is(button:focus,input:focus){outline:none}.shaka-fast-forward-container,.shaka-rewind-container{height:100%;width:100%;flex-shrink:1;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:row;justify-content:center;align-items:center;margin:0;border:none;color:var(--shaka-font-color);background-color:var(--shaka-bg);cursor:default;font-size:20px;opacity:0;-webkit-user-select:none;user-select:none}.shaka-fast-forward-container{border-radius:40% 0 0 40%}.shaka-rewind-container{border-radius:0 40% 40% 0}.shaka-forward-rewind-container-icon{font-size:32px}.shaka-range-container{position:relative;top:0;left:0;margin:calc((var(--shaka-thumb-size) - var(--shaka-track-h))/2) 6px;height:var(--shaka-track-h);border-radius:var(--shaka-track-h);background:var(--shaka-track-color);box-sizing:initial}.shaka-volume-bar-container{width:100px;padding:0;transition-property:opacity,width;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.6,1)}.shaka-volume-bar-container:hover{width:100px;opacity:1}@media (max-width:474px){.shaka-volume-bar-container{width:50px}.shaka-volume-bar-container:hover{width:50px}.shaka-mute-button:hover+.shaka-volume-bar-container-allow-hiding,.shaka-mute-volume-container:hover .shaka-volume-bar-container-allow-hiding{width:50px;opacity:1}}.shaka-mute-button+.shaka-volume-bar-container-allow-hiding:not(:focus-within),.shaka-mute-volume-container .shaka-volume-bar-container-allow-hiding:not(:focus-within){width:0;opacity:0}@media (min-width:475px){.shaka-mute-button:hover+.shaka-volume-bar-container-allow-hiding,.shaka-mute-volume-container:hover .shaka-volume-bar-container-allow-hiding{width:100px;opacity:1}}.shaka-mute-volume-container{display:flex;flex-direction:row;align-items:center}.shaka-range-element{-webkit-appearance:none;background:#0000;cursor:pointer;position:absolute;top:0;left:0;right:0;bottom:0;margin:0;padding:0;width:100%;height:100%;height:var(--shaka-touch-size);top:calc((var(--shaka-track-h) - var(--shaka-touch-size))/2);z-index:1}.shaka-range-element::-webkit-slider-runnable-track{width:100%;cursor:pointer;height:var(--shaka-thumb-size);background:#0000;color:#0000;border:none}.shaka-range-element::-webkit-slider-thumb{-webkit-appearance:none;border:none;border-radius:var(--shaka-thumb-size);height:var(--shaka-thumb-size);width:var(--shaka-thumb-size);background:var(--shaka-thumb-color)}.shaka-range-element::-moz-range-track{width:100%;cursor:pointer;height:var(--shaka-thumb-size);background:#0000;color:#0000;border:none}.shaka-range-element::-moz-range-thumb{-webkit-appearance:none;border:none;border-radius:var(--shaka-thumb-size);height:var(--shaka-thumb-size);width:var(--shaka-thumb-size);background:var(--shaka-thumb-color)}.shaka-seek-bar-container{opacity:0;transition:opacity .6s cubic-bezier(.4,0,.6,1);top:5px;height:5px;margin-bottom:var(--shaka-track-h);background-clip:padding-box;border-top:4px solid #0000;border-bottom:4px solid #0000;z-index:-1}:is(.shaka-controls-container[casting=true],.shaka-controls-container[shown=true]) .shaka-seek-bar-container{opacity:1}.shaka-ad-markers,.shaka-chapter-markers{position:absolute;top:0;left:0;right:0;bottom:0;margin:0;padding:0;width:100%;height:100%}.shaka-spacer{cursor:default;flex-shrink:1;flex-grow:1;margin:0}.shaka-sub-menu{position:relative;display:flex;flex-direction:column;align-items:stretch}.shaka-context-menu,.shaka-overflow-menu,.shaka-settings-menu{overflow-x:hidden;overflow-y:auto;scrollbar-color:var(--shaka-font-color) var(--shaka-bg);scrollbar-width:thin;white-space:nowrap;background:var(--shaka-bg-menu);border-radius:12px;max-height:250px;min-width:190px;padding:5px;opacity:0;transition:opacity .6s cubic-bezier(.4,0,.6,1);display:flex;flex-direction:column;align-items:stretch;position:absolute;z-index:2;bottom:calc(var(--shaka-icon-size) + 14px)}.shaka-controls-container[casting=true] .shaka-context-menu,.shaka-controls-container[casting=true] .shaka-overflow-menu,.shaka-controls-container[casting=true] .shaka-settings-menu,.shaka-controls-container[shown=true] .shaka-context-menu,.shaka-controls-container[shown=true] .shaka-overflow-menu,.shaka-controls-container[shown=true] .shaka-settings-menu{opacity:1}:is(.shaka-context-menu,.shaka-overflow-menu,.shaka-settings-menu) button{font-size:var(--shaka-font-size);background:#0000;color:var(--shaka-font-color);border:none;border-radius:12px;min-height:30px;padding:10px;display:flex;align-items:center;cursor:pointer}:is(.shaka-context-menu,.shaka-overflow-menu,.shaka-settings-menu) button:hover{background:#ffffff1a}:is(.shaka-context-menu,.shaka-overflow-menu,.shaka-settings-menu) button label{cursor:pointer}.shaka-keyboard-navigation :is(.shaka-context-menu,.shaka-overflow-menu,.shaka-settings-menu) button:focus{background:#ffffff1a}:is(.shaka-context-menu,.shaka-overflow-menu,.shaka-settings-menu) .shaka-ui-icon{padding-left:0;padding-right:10px}:is(.shaka-context-menu,.shaka-overflow-menu,.shaka-settings-menu) .shaka-ui-icon.shaka-chosen-item{order:-1;line-height:17px;font-size:18px}.shaka-context-menu.shaka-low-position,.shaka-overflow-menu.shaka-low-position,.shaka-settings-menu.shaka-low-position{bottom:var(--shaka-icon-size)}.shaka-overflow-menu span{text-align:left}.shaka-overflow-button{position:relative}.shaka-overflow-button-label{position:relative;display:flex;align-items:center;flex-direction:column}.shaka-overflow-button-label-inline{box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;width:calc(100% - var(--shaka-icon-size-sm));padding-right:calc(var(--shaka-icon-size-sm) + 8px);position:relative}.shaka-overflow-button-label-inline:after{content:"";position:absolute;right:5px;top:50%;transform:translateY(-50%);width:var(--shaka-icon-size-sm);height:var(--shaka-icon-size-sm);background-color:var(--shaka-font-color);mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") no-repeat center;mask-size:contain}.shaka-simple-overflow-button-label-inline{box-sizing:border-box;flex-direction:row;justify-content:space-between;width:calc(100% - 50px)}.shaka-current-selection-span{font-size:var(--shaka-font-size-sm);padding-left:10px}.shaka-current-auto-quality{margin-left:5px;font-size:11px;color:var(--shaka-font-color-secondary)}.shaka-current-quality-mark,.shaka-quality-mark{color:var(--shaka-badge-active);margin-left:2px;font-size:var(--shaka-badge-size);height:17px}.shaka-quality-mark{line-height:6px}.shaka-overflow-playback-rate-mark,.shaka-overflow-quality-mark{background:var(--shaka-badge-active);color:var(--shaka-badge-color);border-radius:2px;font-size:var(--shaka-badge-size);font-weight:700;line-height:1;text-shadow:none;padding:1px;position:absolute;right:4px;top:10px}.shaka-settings-menu span,.shaka-sub-menu span{margin-left:28px}:is(.shaka-settings-menu,.shaka-sub-menu) span.shaka-chosen-item{margin-left:0}:is(.shaka-settings-menu,.shaka-sub-menu) .shaka-chapter-item{display:flex;align-items:center;flex-direction:row}:is(.shaka-settings-menu,.shaka-sub-menu) .shaka-chapter-thumbnail{width:60px;height:34px;overflow:hidden;border-radius:4px;flex-shrink:0;position:relative}:is(.shaka-settings-menu,.shaka-sub-menu) .shaka-chapter{margin-left:10px}:is(.shaka-settings-menu,.shaka-sub-menu) .shaka-queue-item{display:flex;align-items:center;flex-direction:row;height:auto;min-height:30px;white-space:normal}:is(.shaka-settings-menu,.shaka-sub-menu) .shaka-queue-item.shaka-queue-item-current{background:#ffffff14;border-radius:8px}:is(.shaka-settings-menu,.shaka-sub-menu) .shaka-queue-poster{width:60px;height:34px;overflow:hidden;border-radius:4px;flex-shrink:0;position:relative;background:#ffffff0d}:is(.shaka-settings-menu,.shaka-sub-menu) .shaka-queue-poster img{width:100%;height:100%;object-fit:cover;display:block}:is(.shaka-settings-menu,.shaka-sub-menu) .shaka-queue-item-text{display:flex;flex-direction:row;align-items:center;margin-left:10px;flex:1;min-width:0}:is(.shaka-settings-menu,.shaka-sub-menu) .shaka-queue-item-title{margin-left:0;white-space:normal;word-break:break-word;flex:1;min-width:0;max-width:200px;text-align:left}:is(.shaka-settings-menu,.shaka-sub-menu) .shaka-queue-item-text .shaka-ui-icon.shaka-chosen-item{order:1;flex-shrink:0;align-self:center;margin-left:6px}.shaka-back-to-overflow-button{border-bottom:1px solid #fff3;border-radius:0;margin-bottom:5px}.shaka-back-to-overflow-button span{margin-left:0}.shaka-back-to-overflow-button .shaka-ui-icon{padding-right:10px;font-size:18px}.shaka-back-to-overflow-button:hover{background:#0000}.shaka-controls-container[ad-active=true]{pointer-events:none}.shaka-controls-container[ad-active=true] :is(.shaka-bottom-controls,.shaka-top-controls){pointer-events:auto}.shaka-client-side-ad-container,.shaka-server-side-ad-container{position:absolute;left:0;right:0;top:0;bottom:0}.shaka-video-container[shaka-controls=true] :is(.shaka-client-side-ad-container,.shaka-server-side-ad-container) iframe{height:90%}.shaka-ad-controls{display:flex;flex-direction:row;z-index:1;padding-bottom:1%}.shaka-video-container:not([shaka-controls=true]) .shaka-ad-controls{display:none}.shaka-ad-controls :is(button,div){color:var(--shaka-font-color);font-size:medium}.shaka-ad-info{font-size:var(--shaka-font-size);color:var(--shaka-font-color);width:auto;padding:0 5px}.shaka-ad-info[disabled]{background-color:initial;color:var(--shaka-font-color);cursor:default;padding:0}.shaka-skip-ad-container{position:relative;right:calc((100% - var(--shaka-controls-w))/2*-1);display:flex;flex-direction:row;margin:0 0 0 auto}.shaka-skip-ad-button{padding:5px 15px;background:var(--shaka-bg);border:none;cursor:pointer}.shaka-skip-ad-button:disabled{opacity:.5}.shaka-skip-ad-button:not([disabled]):hover{background:var(--shaka-bg-hover)}.shaka-skip-ad-counter{padding:5px;background:var(--shaka-bg);margin:0}
/*!
* @license
* The tooltip is based on https://github.com/felipefialho/css-components/
* Local modifications have been performed.
*
* Copyright (c) 2017 Felipe Fialho
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/.shaka-tooltips-on{overflow:visible}.shaka-tooltips-on>:is(.shaka-tooltip,.shaka-tooltip-status){position:relative}.shaka-tooltips-on>.shaka-tooltip-status:active:after,.shaka-tooltips-on>.shaka-tooltip-status:focus-visible:after,.shaka-tooltips-on>.shaka-tooltip-status:hover:after,.shaka-tooltips-on>.shaka-tooltip:active:after,.shaka-tooltips-on>.shaka-tooltip:focus-visible:after,.shaka-tooltips-on>.shaka-tooltip:hover:after{content:attr(aria-label);line-height:1.2;white-space:nowrap;font-size:var(--shaka-font-size);background:var(--shaka-bg);color:var(--shaka-font-color);border-radius:2px;padding:2px 10px;position:absolute;bottom:calc(var(--shaka-icon-size) + 14px);left:calc(var(--shaka-icon-size)/2);transform:translateX(-50%)}@media (prefers-reduced-transparency){.shaka-tooltips-on>.shaka-tooltip-status:active:after,.shaka-tooltips-on>.shaka-tooltip-status:focus-visible:after,.shaka-tooltips-on>.shaka-tooltip-status:hover:after,.shaka-tooltips-on>.shaka-tooltip:active:after,.shaka-tooltips-on>.shaka-tooltip:focus-visible:after,.shaka-tooltips-on>.shaka-tooltip:hover:after{background-color:var(--shaka-bg-90)}}.shaka-tooltips-on.shaka-tooltips-bottom>.shaka-tooltip:active:after,.shaka-tooltips-on.shaka-tooltips-bottom>.shaka-tooltip:focus-visible:after,.shaka-tooltips-on.shaka-tooltips-bottom>.shaka-tooltip:hover:after{bottom:calc(var(--shaka-icon-size)/2*-1)}.shaka-tooltips-on.shaka-tooltips-low-position>.shaka-tooltip:active:after,.shaka-tooltips-on.shaka-tooltips-low-position>.shaka-tooltip:focus-visible:after,.shaka-tooltips-on.shaka-tooltips-low-position>.shaka-tooltip:hover:after{bottom:var(--shaka-icon-size)}.shaka-tooltips-on>.shaka-tooltip-status:active:after,.shaka-tooltips-on>.shaka-tooltip-status:focus-visible:after,.shaka-tooltips-on>.shaka-tooltip-status:hover:after{content:attr(aria-label) " (" attr(shaka-status) ")"}.shaka-tooltips-on button:first-child:active:after,.shaka-tooltips-on button:first-child:focus-visible:after,.shaka-tooltips-on button:first-child:hover:after{left:0;transform:translateX(0)}.shaka-tooltips-on button:last-child:active:after,.shaka-tooltips-on button:last-child:focus-visible:after,.shaka-tooltips-on button:last-child:hover:after{left:var(--shaka-icon-size);transform:translateX(-100%)}.shaka-player-ui-thumbnail-container{bottom:15px;pointer-events:none;position:absolute;visibility:hidden;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px}.shaka-player-ui-thumbnail-container .shaka-player-ui-thumbnail-image-container{background-color:var(--shaka-bg-solid);border:1px solid var(--shaka-bg-solid);box-shadow:0 8px 8px 0 var(--shaka-bg);min-width:150px;overflow:hidden;position:relative;width:15%}.shaka-player-ui-thumbnail-container .shaka-player-ui-thumbnail-image-container .shaka-player-ui-thumbnail-image{position:absolute}.shaka-player-ui-thumbnail-container .shaka-player-ui-thumbnail-image-container.portrait-thumbnail{min-width:75px;width:7.5%}.shaka-player-ui-thumbnail-container .shaka-player-ui-thumbnail-time-container{display:flex;justify-content:center}.shaka-player-ui-thumbnail-container .shaka-player-ui-thumbnail-time-container .shaka-player-ui-thumbnail-time{background-color:var(--shaka-bg);border-radius:var(--shaka-font-size);color:var(--shaka-font-color);font-size:var(--shaka-font-size);padding:0 5px}@media (prefers-reduced-transparency){.shaka-player-ui-thumbnail-container .shaka-player-ui-thumbnail-time-container .shaka-player-ui-thumbnail-time{background-color:var(--shaka-bg-90)}}.shaka-playback-rates{min-width:240px}.shaka-playback-rate-slider-section{padding:8px 0 4px}.shaka-playback-rate-value{display:block;width:100%;text-align:center;font-size:22px;font-weight:500;color:var(--shaka-font-color);font-variant-numeric:tabular-nums;padding:2px 0 10px;margin-left:0}.shaka-playback-rate-slider-row{display:flex;flex-direction:row;align-items:center;padding:0 10px}.shaka-playback-rate-step-btn{min-height:unset;padding:0;flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--shaka-rate-border);background:#0000;display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:400;line-height:1;color:var(--shaka-font-color);transition:border-color .15s ease,background .15s ease,opacity .15s ease}.shaka-playback-rate-step-btn:disabled{opacity:.3;cursor:default}.shaka-keyboard-navigation .shaka-playback-rate-step-btn:focus:not(:disabled),.shaka-playback-rate-step-btn:hover:not(:disabled){border-color:var(--shaka-rate-border-active);background:var(--shaka-rate-bg-active)}.shaka-playback-rate-slider-container{flex:1;background:var(--shaka-rate-slider)}.shaka-playback-rate-presets{display:flex;flex-direction:row;align-items:center;justify-content:safe center;justify-content:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:6px;padding:6px 10px 10px;white-space:nowrap}.shaka-playback-rate-presets::-webkit-scrollbar{display:none}.shaka-playback-rate-preset-btn{min-height:unset;padding:5px 14px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;color:var(--shaka-font-color);background:var(--shaka-rate-preset-bg);border:1.5px solid #0000;transition:background .15s ease,border-color .15s ease}.shaka-keyboard-navigation .shaka-playback-rate-preset-btn:focus,.shaka-playback-rate-preset-btn:hover{background:var(--shaka-rate-preset-hover)}.shaka-playback-rate-preset-btn.shaka-chosen-item{background:var(--shaka-rate-preset-active);border-color:var(--shaka-rate-preset-border);font-weight:600;color:var(--shaka-font-color);margin-left:0}.shaka-ui-icon{display:inline-block;fill:currentcolor;mask-position:left top;mask-repeat:no-repeat;mask-size:1em 1em;width:1em;height:1em}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-stretch:normal;src:url(https://fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiA8.ttf) format("truetype")}
/*# sourceMappingURL=controls.modern.css.map */