lin-view-ui/lib/theme-chalk/video-player.css

vue components library

@-webkit-keyframes rotate-animation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes rotate-animation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-webkit-keyframes enter-active-animation{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}100%{background-color:rgba(0,0,0,.5);opacity:1;transform:translate(-50%,-50%) scale(1.4)}}@keyframes enter-active-animation{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}100%{background-color:rgba(0,0,0,.5);opacity:1;transform:translate(-50%,-50%) scale(1.4)}}.lin-player-fullscreen{position:relative;display:flex;align-items:center;justify-content:center;height:100%}.lin-player-fullscreen span{font-size:30px;color:#fff;cursor:pointer}.lin-player-fullscreen:hover .lin-player-fullscreen-hover-full{display:block}.lin-player-fullscreen-hover-full{position:absolute;top:-30px;left:0;display:none;width:100%;margin-bottom:10px}@-webkit-keyframes ball-enter-animation{0%{transform:translateY(-50%) scale(0)}100%{transform:translateY(-50%) scale(1)}}@keyframes ball-enter-animation{0%{transform:translateY(-50%) scale(0)}100%{transform:translateY(-50%) scale(1)}}.lin-player-process-mask{position:relative;width:100%;padding:5px 0;cursor:pointer}.lin-player-process-time{position:absolute;top:-20px;left:0;padding:3px;font-size:12px;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:rgba(0,0,0,.5);border-radius:4px}.lin-player-process{position:relative;width:100%;height:3px;cursor:pointer;background-color:rgba(255,255,255,.2)}.lin-player-process-played{position:absolute;top:0;left:0;height:3px;background-color:#b7daff;transition:all .3s}.lin-player-process-loaded{position:absolute;top:0;left:0;height:3px;background-color:rgba(255,255,255,.4);transition:all .3s}.lin-player-process-ball{position:absolute;top:50%;right:-5px;width:11px;height:11px;background-color:#b7daff;border-radius:50%;transform:translateY(-50%)}.lin-player-process-fade-enter-active,.lin-player-process-fade-leave-active{transition:opacity .5s}.lin-player-process-fade-enter,.lin-player-process-fade-leave-to{opacity:0}.lin-player-process-ball-enter-active{-webkit-animation:ball-enter-animation .3s ease-out;animation:ball-enter-animation .3s ease-out}.lin-player-process-ball-leave-active{animation:ball-enter-animation .3s reverse ease-out}.lin-player-volume{position:relative;display:flex;flex-direction:row;align-items:center}.lin-player-volume:hover .lin-player-volume-mask{width:60px;padding:5px 5px}.lin-player-volume-mask{position:relative;width:0;padding:0;margin-left:5px;overflow:hidden;cursor:pointer;transition:all .4s}.lin-player-volume-process{position:relative;width:60px;height:3px;margin:3px 0;background-color:rgba(255,255,255,.2)}.lin-player-volume-process-line{position:absolute;top:0;left:0;width:0;height:3px;background-color:#b7daff}.lin-player-volume-process-ball{position:absolute;top:50%;right:-4px;width:8px;height:8px;background-color:#b7daff;border-radius:50%;transform:translateY(-50%)}.lin-player-volume-icon{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:center;margin-left:15px;vertical-align:top;cursor:pointer}.lin-player-volume-icon>i{font-size:20px;color:#fff}.lin-video-player{position:relative;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#000}.lin-video-player-fix{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;width:100%;height:100%}.lin-video-player-video{width:100%;height:100%;-o-object-fit:fill;object-fit:fill}.lin-video-player-tip{position:absolute;bottom:50px;left:20px;padding:7px 20px;font-size:14px;color:#fff;background-color:rgba(0,0,0,.6);border-radius:4px}.lin-video-player-speed{position:relative;display:flex;align-items:center;justify-content:center;height:100%;margin-right:10px;color:#fff}.lin-video-player-speed:hover .lin-video-player-speed-list{display:block}.lin-video-player-speed-label{min-width:60px;height:20px;padding:5px;font-size:12px;line-height:20px;text-align:center;white-space:nowrap;cursor:pointer}.lin-video-player-speed-list{position:absolute;top:0;left:50%;display:none;padding:5px 0;margin:0;list-style:none;background-color:rgba(0,0,0,.6);transform:translateX(-50%)}.lin-video-player-speed-list .lin-video-player-speed-label:hover{background-color:rgba(0,0,0,.2)}.lin-video-player-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.lin-video-player-loading>span{font-size:30px;color:rgba(255,255,255,.7);-webkit-animation:rotate-animation 2s linear infinite;animation:rotate-animation 2s linear infinite}.lin-video-player-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.lin-video-player-definition{position:relative;display:flex;align-items:center;justify-content:center;height:100%;margin-right:10px;color:#fff}.lin-video-player-definition:hover .lin-video-player-definition-list{display:block}.lin-video-player-definition-label{height:20px;padding:5px 10px;font-size:12px;line-height:20px;text-align:center;white-space:nowrap;cursor:pointer}.lin-video-player-definition-list{position:absolute;top:0;left:50%;display:none;padding:5px 0;margin:0;list-style:none;background-color:rgba(0,0,0,.6);transform:translateX(-50%)}.lin-video-player-definition-list .lin-video-player-definition-label:hover{background-color:rgba(0,0,0,.2)}.lin-video-player-controls{position:absolute;bottom:0;left:0;width:100%}.lin-video-player-controls-group{position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;width:100%;height:40px;padding:0 20px}.lin-video-player-controls-mask{position:absolute;bottom:0;left:0;width:100%;height:98px;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.lin-video-player-icon-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:top;cursor:pointer}.lin-video-player-icon-item>i{font-size:30px;color:#fff}.lin-video-player-time{margin-left:15px;font-size:12px;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lin-video-player-live-tip{display:flex;flex-direction:row;align-items:center;margin-left:20px;font-size:14px;color:#fff}.lin-video-player-live-tip>i{width:6px;height:6px;margin-right:5px;background-color:#b7daff;border-radius:50%}.lin-video-player-process-box{position:absolute;top:-8px;left:0;box-sizing:border-box;width:100%;padding:0 20px}.lin-video-player-controls-right{position:absolute;top:0;right:20px;display:flex;flex-direction:row;align-items:center;height:100%}.lin-video-player-animation{position:absolute;top:50%;left:50%;width:60px;height:60px;line-height:60px;text-align:center;border-radius:50%;transform:translate(-50%,-50%)}.lin-video-player-animation>span{font-size:40px;color:#fff}.lin-video-player-animation-enter-active{-webkit-animation:enter-active-animation .3s ease-out;animation:enter-active-animation .3s ease-out}.lin-video-player-animation-leave-active{display:none;opacity:0}