7 lines
30 KiB
CSS
7 lines
30 KiB
CSS
|
/*!
|
|||
|
|
* Mui Player Css Library v1.8.1 @Professional edition
|
|||
|
|
* Date：2023-01-28
|
|||
|
|
* Released under GPL-3.0 license
|
|||
|
|
* https://muiplayer.js.org/
|
|||
|
|
*/
|
|||
|
|
.m-player{width:auto;height:225px;position:relative;overflow:hidden;background:#000;outline:none;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.m-player .mplayer-footer{color:#fff;position:absolute;bottom:0;right:0;left:0;background:linear-gradient(180deg,hsla(0,0%,100%,0),rgba(0,0,0,.65));-webkit-transform:translateY(50px);transform:translateY(50px);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;z-index:7;height:48px;padding:0 10px}.m-player .mplayer-footer.show{-webkit-transform:translateY(0)!important;transform:translateY(0)!important}.m-player .mplayer-footer .progress{display:flex;align-items:center;justify-content:space-between;height:inherit}.m-player .mplayer-footer .progress .progress-container{display:flex;align-items:center;flex:1;height:25px}.m-player .mplayer-footer .progress .progress-container.upper-position{position:absolute;left:20px;right:20px;bottom:100%;margin-bottom:-10.5px}.m-player .mplayer-footer .progress .progress-container .touch-effective{position:relative;height:100%;display:flex;flex:1;align-items:center;margin-left:8px;margin-right:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.m-player .mplayer-footer .progress .progress-container .touch-effective .progress-default-scale{border-radius:0!important;-webkit-transform:translateY(-50%) translateZ(0) scaleY(2)!important;transform:translateY(-50%) translateZ(0) scaleY(2)!important}.m-player .mplayer-footer .progress .progress-container .touch-effective .progress-hover-scale{-webkit-transform:translateY(-50%) translateZ(0) scaleY(3)!important;transform:translateY(-50%) translateZ(0) scaleY(3)!important}.m-player .mplayer-footer .progress .progress-container .touch-effective .progress-total{width:100%;background-color:hsla(0,0%,100%,.2);overflow:hidden}.m-player .mplayer-footer .progress .progress-container .touch-effective .progress-play,.m-player .mplayer-footer .progress .progress-container .touch-effective .progress-total{position:absolute;height:2px;border-radius:5px;top:50%;-webkit-transform:scaleY(.9) translateY(-50%);transform:scaleY(.9) translateY(-50%);transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s, -webkit-transform .15s}.m-player .mplayer-footer .progress .progress-container .touch-effective .progress-buffered{background-color:hsla(0,0%,71%,.7);position:absolute;height:2px;border-top-left-radius:5px;border-bottom-left-radius:5px;top:50%;-webkit-transform:scaleY(.9) translateY(-50%);transform:scaleY(.9) translateY(-50%);transition:width .15s,-webkit-transform;transition:transform,width .15s;transition:transform,width .15s,-webkit-transform}.m-player .mplayer-footer .progress .progress-container .touch-effective .progress-prompt{position:absolute;height:2px;width:9px;top:50%;-webkit-transform:scaleY(.9) translateY(-50%);transform:scaleY(.9) translateY(-50%);transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s, -webkit-transform .15s;z-index:6}.m-player .mplayer-footer .progress .progress-container .touch-effective .progress-seekline{position:absolute;background-color:#ddd;height:2px;width:3px;top:50%;-webkit-transform:scaleY(.9) translateY(-50%);transform:scaleY(.9) translateY(-50%);transition:left 0s linear;z-index:5;visibility:hidden}.m-player .mplayer-footer .progress .progress-container .touch-effective .ball-container,.m-player .mplayer-footer .progress .progress-container .touch-effective .prompts-container{position:absolute;height:100%;width:100%}.m-player .mplayer-footer .progress .progress-container .touch-effective .ball-container .progress-drag,.m-player .mplayer-footer .progress .progress-container .touch-effective .prompts-container .progress-drag{height:30px;width:30px;position:absolute;top:50%;-webkit-trans
|