mirror of
https://github.com/letian1650/N3RD.git
synced 2025-01-31 00:04:50 +08:00
7 lines
24 KiB
CSS
7 lines
24 KiB
CSS
|
/*!
|
|||
|
|
* Mui Player Css Library v1.6.0 @Professional edition
|
|||
|
|
* Date：2021-12-01
|
|||
|
|
* 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,.5));-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%) scaleY(2)!important;transform:translateY(-50%) scaleY(2)!important}.m-player .mplayer-footer .progress .progress-container .touch-effective .progress-hover-scale{-webkit-transform:translateY(-50%) scaleY(3)!important;transform:translateY(-50%) 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 .ball-container{position:absolute;height:100%;width:100%}.m-player .mplayer-footer .progress .progress-container .touch-effective .ball-container .progress-drag{height:30px;width:30px;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s, -webkit-transform .15s}.m-player .mplayer-footer .progress .progress-container .touch-effective .ball-container .progress-drag.hover-scale{-webkit-transform:translate(-50%,-50%) scale(1)!important;transform:translate(-50%,-50%) scale(1)!important}.m-player .mplayer-footer .progress .progress-container .touch-effective .ball-container .progress-drag.default-scale{-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0)}.m-player .mplayer-footer .progress .progress-container .touch-effective .ball-container .progress-drag .progress-ball{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);height:17px;width:17px;border-radius:50%;display:inline-block;background:#f
|