@mkhuda/react-shaka-player/dist/ui.css

React video player built with Shaka-Player

/*! @license
 * Shaka Player
 * Copyright 2016 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */.shaka-hidden{display:none!important}.shaka-video-container{position:relative;top:0;left:0;display:flex}.shaka-video-container .material-icons-round{font-family:"Material Icons Outlined";font-size:24px}.shaka-video-container *{font-family:Roboto-Regular,Roboto,sans-serif}.shaka-video-container:fullscreen{width:100%;height:100%;background-color:#000}.shaka-video-container:fullscreen .shaka-text-container{font-size:4.4vmin}.shaka-video-container:-webkit-full-screen{width:100%;height:100%;background-color:#000}.shaka-video-container:-webkit-full-screen .shaka-text-container{font-size:4.4vmin}.shaka-video-container:-moz-full-screen{width:100%;height:100%;background-color:#000}.shaka-video-container:-moz-full-screen .shaka-text-container{font-size:4.4vmin}.shaka-video-container:-ms-fullscreen{width:100%;height:100%;background-color:#000}.shaka-video-container:-ms-fullscreen .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-bottom-controls{width:96%;padding:0;padding-bottom:2.5%;z-index:1}.shaka-controls-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:12px;font-weight:400;font-style:normal;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;opacity:0;transition:opacity cubic-bezier(.4,0,.6,1) .6s}.shaka-controls-container[casting=true] .shaka-controls-button-panel,.shaka-controls-container[shown=true] .shaka-controls-button-panel{opacity:1}.shaka-controls-button-panel>*{color:#fff;height:32px;margin:1px 6px;padding:0;background:0 0;border:0;cursor:pointer}.shaka-controls-button-panel .shaka-overflow-menu-only{display:none}.shaka-play-button-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}.shaka-scrim-container{margin:0;width:100%;height:100%;flex-shrink:1;position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;transition:opacity cubic-bezier(.4,0,.6,1) .6s;background:linear-gradient(to top,#000 0,rgba(0,0,0,0) 15%)}.shaka-controls-container[casting=true] .shaka-scrim-container,.shaka-controls-container[shown=true] .shaka-scrim-container{opacity:1}.shaka-text-container{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;bottom:0;width:100%;min-width:48px;transition:bottom cubic-bezier(.4,0,.6,1) .1s;transition-delay:.5s}.shaka-text-container span:not(.shaka-text-wrapper){display:inline;font-size:20px;line-height:1.4;background-color:rgba(0,0,0,.8);color:#fff}.shaka-text-container span.shaka-text-wrapper{display:inline;background:0 0}.shaka-controls-container[shown=true]~.shaka-text-container{bottom:15%;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-spinner{position:relative;top:0;left:0;margin:0;box-sizing:border-box;padding:7.8%;width:0;height:0;filter:drop-shadow(0 0 2px rgba(255, 255, 255, .5))}.shaka-play-button{box-sizing:border-box;padding:6%;width:0;height:0;margin:0;border-radius:50%;box-shadow:rgba(0,0,0,.1) 0 0 20px 0;border:none;background-size:50%;background-repeat:no-repeat;background-position:center center;opacity:0;transition:opacity cubic-bezier(.4,0,.6,1) .6s}.shaka-controls-container[casting=true] .shaka-play-button,.shaka-controls-container[shown=true] .shaka-play-button{opacity:1}.shaka-play-button[icon=play]{background-image:url(data:image/svg+xml,%3Csvg%20fill%3D%22%230accee%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M8%205v14l11-7z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%3C%2Fsvg%3E)}.shaka-play-button[icon=pause]{background-image:url(data:image/svg+xml,%3Csvg%20fill%3D%22%230accee%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M6%2019h4V5H6v14zm8-14v14h4V5h-4z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%3C%2Fsvg%3E)}.shaka-current-time{font-size:14px;color:#fff;height:auto;cursor:pointer}.shaka-current-time[disabled]{background-color:transparent;color:#fff;cursor:default}.shaka-controls-container button:focus,.shaka-controls-container input:focus{outline:1px solid Highlight}.shaka-controls-container button:-moz-focus-inner,.shaka-controls-container input:-moz-focus-outer{outline:0;border:0}.shaka-controls-container:not(.shaka-keyboard-navigation) button:focus,.shaka-controls-container:not(.shaka-keyboard-navigation) input:focus{outline:0}.shaka-range-container{position:relative;top:0;left:0;margin:4px 6px;height:4px;border-radius:4px;background:#fff}.shaka-volume-bar-container{width:100px}.shaka-range-element{-webkit-appearance:none;background:0 0;position:absolute;top:0;left:0;right:0;bottom:0;margin:0;padding:0;width:100%;height:100%;height:12px;top:-4px;z-index:1}.shaka-range-element::-webkit-slider-runnable-track{width:100%;height:12px;background:0 0;color:transparent;border:none}.shaka-range-element::-webkit-slider-thumb{-webkit-appearance:none;border:none;border-radius:12px;height:12px;width:12px;background:#fff}.shaka-range-element::-moz-range-track{width:100%;height:12px;background:0 0;color:transparent;border:none}.shaka-range-element::-moz-range-thumb{-webkit-appearance:none;border:none;border-radius:12px;height:12px;width:12px;background:#fff}.shaka-seek-bar-container{opacity:0;transition:opacity cubic-bezier(.4,0,.6,1) .6s}.shaka-controls-container[casting=true] .shaka-seek-bar-container,.shaka-controls-container[shown=true] .shaka-seek-bar-container{opacity:1}.shaka-ad-markers{position:absolute;top:0;left:0;right:0;bottom:0;margin:0;padding:0;width:100%;height:100%}/*!
 * @license
 * The SVG/CSS buffering spinner is based on http://codepen.io/jczimm/pen/vEBpoL
 * Some local modifications have been made.
 *
 * Copyright (c) 2016 by jczimm
 *
 * 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-spinner-svg{position:absolute;top:0;left:0;right:0;bottom:0;animation:rotate 2s linear infinite;transform-origin:center center;width:100%;height:100%;margin:0;padding:0}.shaka-spinner-path{stroke:#0accee;stroke-dasharray:20,200;stroke-dashoffset:0;animation:dash 1s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.shaka-spacer{cursor:default;flex-shrink:1;flex-grow:1;margin:0}.shaka-overflow-menu,.shaka-settings-menu{overflow-x:hidden;overflow-y:auto;white-space:nowrap;background:#fff;box-shadow:0 1px 9px 0 rgba(0,0,0,.4);border-radius:2px;max-height:250px;min-width:180px;opacity:0;transition:opacity cubic-bezier(.4,0,.6,1) .6s;display:flex;flex-direction:column;position:absolute;z-index:2;right:15px;bottom:30px}.shaka-controls-container[casting=true] .shaka-overflow-menu,.shaka-controls-container[casting=true] .shaka-settings-menu,.shaka-controls-container[shown=true] .shaka-overflow-menu,.shaka-controls-container[shown=true] .shaka-settings-menu{opacity:1}.shaka-overflow-menu button,.shaka-settings-menu button{font-size:14px;background:0 0;color:#000;border:none;min-height:30px;padding:3.5px 6px;display:flex;align-items:center;cursor:pointer}.shaka-overflow-menu button:hover,.shaka-settings-menu button:hover{background:#e0e0e0}.shaka-overflow-menu button label,.shaka-settings-menu button label{cursor:pointer}.shaka-keyboard-navigation .shaka-overflow-menu button:focus,.shaka-keyboard-navigation .shaka-settings-menu button:focus{background:#e0e0e0}.shaka-overflow-menu i,.shaka-settings-menu i{padding-left:10px;padding-right:10px}.shaka-overflow-menu.shaka-low-position,.shaka-settings-menu.shaka-low-position{bottom:15px}.shaka-overflow-menu span{text-align:left}.shaka-overflow-button-label{position:relative;display:flex;flex-direction:column}.shaka-current-selection-span{color:rgba(0,0,0,.54)}.shaka-settings-menu span{margin-left:54px}.shaka-back-to-overflow-button span{margin-left:0}.shaka-back-to-overflow-button i{padding-right:20px}.shaka-auto-span{left:17px}.shaka-captions-on{color:#000}.shaka-captions-off{color:grey}.shaka-controls-container[ad-active=true]{pointer-events:none}.shaka-controls-container[ad-active=true] .shaka-bottom-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] .shaka-client-side-ad-container iframe,.shaka-video-container[shaka-controls=true] .shaka-server-side-ad-container iframe{height:90%}.shaka-server-side-ad-container{width:100%;height:100%;flex-shrink:1}.shaka-server-side-ad-container:not([ad-active=true]){pointer-events:none}.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 button,.shaka-ad-controls div{color:#fff;font-size:initial}.shaka-ad-controls div:not(.shaka-skip-ad-counter){margin:1px 6px}.shaka-ad-counter,.shaka-ad-position{display:flex;justify-content:flex-end;flex-direction:column;text-shadow:1px 1px 4px #000}.shaka-skip-ad-container{position:relative;right:-2%;display:flex;flex-direction:row;margin:0}.shaka-skip-ad-button{padding:5px 15px;background:rgba(0,0,0,.7);border:none;cursor:pointer}.shaka-skip-ad-button:disabled{background:rgba(0,0,0,.3)}.shaka-skip-ad-counter{padding:5px 5px;background:rgba(0,0,0,.7);margin:0}@font-face{font-family:"Material Icons Outlined";font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialiconsoutlined/v76/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format("woff2")}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxP.ttf) format("truetype")}@font-face{font-family:"Material Icons Round";font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialiconsround/v65/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmM.otf) format("opentype")}.material-icons-round{font-family:"Material Icons Outlined";font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf) format("truetype")}@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9vAw.ttf) format("truetype")}.material-icons-outlined{font-family:"Material Icons Outlined";font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.mk-theme{font-family:Roboto,sans-serif}.mk-theme .shaka-bottom-controls{width:100%;padding:0;padding-bottom:0;z-index:1}.mk-theme .shaka-bottom-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mk-theme .shaka-ad-controls{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.mk-theme .shaka-controls-button-panel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;height:40px;padding:0 10px}.mk-theme .shaka-range-container{margin:4px 10px 4px 10px;top:0}.mk-theme .shaka-small-play-button{-webkit-box-ordinal-group:-2;-ms-flex-order:-3;order:-3}.mk-theme .shaka-small-play-button[aria-label=Pause]{content:"pause_circle_filled"}.mk-theme .shaka-mute-button{-webkit-box-ordinal-group:-1;-ms-flex-order:-2;order:-2}.mk-theme .shaka-controls-button-panel>*{margin:0;padding:3px 8px;color:#eee;height:40px}.mk-theme .shaka-controls-button-panel>:focus{outline:0;color:#fff}.mk-theme .shaka-controls-button-panel>:hover{color:#fff}.mk-theme .shaka-controls-button-panel .shaka-volume-bar-container{position:relative;z-index:10;left:-1px;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;opacity:0;width:0;-webkit-transition:width .2s cubic-bezier(.4,0,1,1);height:3px;transition:width .2s cubic-bezier(.4,0,1,1);padding:0}.mk-theme .shaka-controls-button-panel .shaka-volume-bar-container:focus,.mk-theme .shaka-controls-button-panel .shaka-volume-bar-container:hover{display:block;width:50px;opacity:1;padding:0 6px}.mk-theme .shaka-mute-button:hover+div{opacity:1;width:50px;padding:0 6px}.mk-theme .shaka-current-time{padding:0 10px;font-size:12px}.mk-theme .shaka-seek-bar-container{height:8px;position:relative;top:0;border-radius:0;margin-bottom:0}.mk-theme .shaka-seek-bar-container .shaka-range-element{opacity:0}.mk-theme .shaka-seek-bar-container:hover .shaka-range-element{opacity:1;cursor:pointer}.mk-theme .shaka-seek-bar-container input[type=range]{height:5px;-webkit-appearance:none;margin:1px 0;opacity:1;width:100%}.mk-theme .shaka-seek-bar-container input[type=range]:focus{outline:0}.mk-theme .shaka-seek-bar-container input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 #000;border:0 solid #000;height:19px;width:26px;border-radius:49px;background:#2eb5c0;cursor:pointer;-webkit-appearance:none}.mk-theme .shaka-seek-bar-container input[type=range]::-moz-range-track{width:100%;height:16px;cursor:pointer;box-shadow:1px 1px 1px #50555c;background:#50555c;border:0 solid #000}.mk-theme .shaka-seek-bar-container input[type=range]::-moz-range-thumb{box-shadow:0 0 0 #000;border:0 solid #000;height:16px;width:26px;border-radius:49px;background:#2eb5c0;cursor:pointer}.mk-theme .shaka-seek-bar-container input[type=range]::-ms-track{width:100%;height:14px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.mk-theme .shaka-seek-bar-container input[type=range]::-ms-fill-lower{background:#50555c;border:0 solid #000;border-radius:28px;box-shadow:1px 1px 1px #50555c}.mk-theme .shaka-seek-bar-container input[type=range]::-ms-fill-upper{background:#50555c;border:0 solid #000;border-radius:28px;box-shadow:1px 1px 1px #50555c}.mk-theme .shaka-seek-bar-container input[type=range]::-ms-thumb{box-shadow:0 0 0 #000;border:0 solid #000;height:19px;width:26px;border-radius:49px;background:#2eb5c0;cursor:pointer}.mk-theme .shaka-video-container *{font-family:Roboto,sans-serif}.mk-theme .shaka-video-container .material-icons-round{font-family:"Material Icons Outlined"}.mk-theme .shaka-overflow-menu,.mk-theme .shaka-settings-menu{border-radius:2px;background:rgba(28,28,28,.9);text-shadow:0 0 2px rgb(0 0 0%);-webkit-transition:opacity .1s cubic-bezier(0,0,.2,1);transition:opacity .1s cubic-bezier(0,0,.2,1);-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;right:10px;bottom:50px;padding:8px 0;min-width:200px}.mk-theme .shaka-settings-menu{padding:0 0 8px 0}.mk-theme .shaka-settings-menu button{font-size:12px}.mk-theme .shaka-settings-menu button span{margin-left:33px;font-size:13px}.mk-theme .shaka-settings-menu button[aria-selected=true]{display:-webkit-box;display:-ms-flexbox;display:flex}.mk-theme .shaka-settings-menu button[aria-selected=true] span{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin-left:0}.mk-theme .shaka-settings-menu button[aria-selected=true] i{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;font-size:18px;padding-left:5px}.mk-theme .shaka-overflow-menu button{padding:0}.mk-theme .shaka-overflow-menu button i{display:none}.mk-theme .shaka-overflow-menu button .shaka-overflow-button-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:default;outline:0;height:40px;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%}.mk-theme .shaka-overflow-menu button .shaka-overflow-button-label span{-ms-flex-negative:initial;flex-shrink:initial;padding-left:15px;font-size:13px;font-weight:500;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mk-theme .shaka-overflow-menu span+span{color:#fff;font-weight:400!important;font-size:12px!important;padding-right:8px;padding-left:0!important}.mk-theme .shaka-overflow-menu span+span:after{content:"navigate_next";font-family:"Material Icons Outlined";font-size:20px}.mk-theme .shaka-overflow-menu .shaka-pip-button span+span{padding-right:15px!important}.mk-theme .shaka-overflow-menu .shaka-pip-button span+span:after{content:""}.mk-theme .shaka-back-to-overflow-button{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:12px;color:#eee;height:40px}.mk-theme .shaka-back-to-overflow-button .material-icons-round{font-family:"Material Icons Outlined";font-size:15px;padding-right:10px}.mk-theme .shaka-back-to-overflow-button span{margin-left:3px!important}.mk-theme .shaka-overflow-menu button:hover,.mk-theme .shaka-settings-menu button:hover{background-color:rgba(255,255,255,.1);cursor:pointer}.mk-theme .shaka-overflow-menu button:hover label,.mk-theme .shaka-settings-menu button:hover label{cursor:pointer}.mk-theme .shaka-overflow-menu button:focus,.mk-theme .shaka-settings-menu button:focus{background-color:rgba(255,255,255,.1);border:none;outline:0}.mk-theme .shaka-overflow-menu button,.mk-theme .shaka-settings-menu button{color:#eee}.mk-theme .shaka-captions-off{color:#bfbfbf}.mk-theme .shaka-overflow-menu-button{font-size:18px;margin-right:5px}.mk-theme .shaka-fullscreen-button:hover{font-size:25px;-webkit-transition:font-size .1s cubic-bezier(0,0,.2,1);transition:font-size .1s cubic-bezier(0,0,.2,1)}