twist-aplayer
Version:
A shadui theme aplayer
2 lines (1 loc) • 15.4 kB
CSS
.twist-aplayer-icon{width:var(--tp-icon-width);height:var(--tp-icon-width);border:none;background-color:transparent;outline:none;cursor:pointer;opacity:.8;vertical-align:middle;padding:0;font-size:var(--tp-icon-font-size);margin:0;display:inline-block}.twist-aplayer-icon path{transition:all var(--tp-icon-transition-timing) var(--tp-icon-transition-function)}.twist-aplayer .twist-aplayer-icon-lrc-inactivity svg{opacity:.4}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-right{display:flex;justify-content:center;align-items:center}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-back,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-forward,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-lrc,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-play{display:inline-block}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-back,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-forward,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-menu,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-play{position:absolute;bottom:27px;width:20px;height:20px;font-size:20px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-back{right:75px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-play{right:50px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-forward{right:25px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-icon-menu{right:0%}.twist-aplayer--withlist .twist-aplayer-icon-order,.twist-aplayer--withlist .twist-aplayer-icon-menu{display:inline}.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer-icon{transform:rotateY(0)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.twist-aplayer-bar{margin:0 0 0 5px;padding:4px 0;cursor:pointer;flex:1;transition:all .2s ease-in-out}.twist-aplayer-bar-vars{--tp-bar-width: 100%;--tp-bar-height: 2px;--tp-bar-background: hsl(var(--tp-primary) / .2);--tp-bar-played-background: hsl(var(--tp-accent-foreground));--tp-bar-loaded-background: hsl(var(--tp-secondary));--tp-bar-loaded-transition-timing: .5s;--tp-bar-loaded-transition-function: ease;--tp-bar-thumb-width: 10px;--tp-bar-thumb-height: 10px;--tp-bar-thumb-margin-top: -4px;--tp-bar-thumb-margin-right: -10px;--tp-bar-thumb-transition-function: ease-in-out;--tp-bar-thumb-transition-timing: .3s;--tp-bar-thumb-hover-scale: 1;--tp-bar-thumb-border-radius: 50%;--tp-bar-thumb-background: hsl(var(--tp-foreground))}.twist-aplayer-bar__inner{position:relative;width:var(--tp-bar-width);height:var(--tp-bar-height);background:var(--tp-bar-background)}.twist-aplayer-bar__loaded{position:absolute;left:0;top:0;bottom:0;height:var(--tp-bar-height);background:var(--tp-bar-loaded-background);transition:all var(--tp-bar-loaded-transition-timing) var(--tp-bar-loaded-transition-function)}.twist-aplayer-bar__played{position:absolute;left:0;top:0;bottom:0;height:var(--tp-bar-height);background-color:var(--tp-bar-played-background)}.twist-aplayer-bar__thumb{position:absolute;top:0;right:5px;margin-top:var(--tp-bar-thumb-margin-top);margin-right:var(--tp-bar-thumb-margin-right);width:var(--tp-bar-thumb-width);height:var(--tp-bar-thumb-height);border-radius:var(--tp-bar-thumb-border-radius);cursor:pointer;background-color:var(--tp-bar-thumb-background);transition:all var(--tp-bar-thumb-transition-timing) var(--tp-bar-thumb-transition-function);transform:scale(0);-webkit-transform:scale(0)}.twist-aplayer-bar:hover .twist-aplayer-bar__thumb{transform:scale(var(--tp-bar-thumb-hover-scale));-webkit-transform:scale(var(--tp-bar-thumb-hover-scale))}.twist-aplayer-volumn{position:relative;display:inline-block;margin-left:3px;cursor:pointer}.twist-aplayer-volumn-vars{--tp-volume-bar-background: hsl(var(--tp-primary) / .3);--tp-volume-bar-width: 5px;--tp-volume-bar-height: 35px;--tp-volume-bar-border-radius: 2.5px;--tp-volume-thumb-width: 5px;--tp-volume-thumb-background: hsl(var(--tp-primary));--tp-volume-thumb-transition-function: ease;--tp-volume-bar-wrap-transition-function: ease-in-out;--tp-volume-bar-wrap-timing: .2s;--tp-volume-thumb-timing: .1s}.twist-aplayer-volumn__bar-wrap{position:absolute;bottom:15px;right:-3px;width:25px;height:0;z-index:99;overflow:hidden;transition:all var(--tp-volume-bar-wrap-timing) var(--tp-volume-bar-wrap-transition-function)}.twist-aplayer-volumn:hover .twist-aplayer-volumn__bar-wrap,.twist-aplayer-volumn__bar-wrap--active{height:40px}.twist-aplayer-volumn__bar{position:absolute;bottom:0;right:10px;width:var(--tp-volume-bar-width);height:var(--tp-volume-bar-height);background:var(--tp-volume-bar-background);border-radius:var(--tp-volume-bar-border-radius);overflow:hidden}.twist-aplayer-volumn__thumb{position:absolute;bottom:0;right:0;width:var(--tp-volume-thumb-width);background-color:var(--tp-volume-thumb-background);transition:all var(--tp-volume-thumb-timing) var(--tp-volume-thumb-transition-function)}.twist-aplayer-list{overflow:auto;transition:all .5s ease;will-change:height;display:none;overflow:hidden}.twist-aplayer-list-vars{--tp-list-scrollbar-thumb-color: #8884;--tp-list-scrollbar-thumb-hover-color: hsl(var(--tp-muted-foreground) / .6)}.twist-aplayer-list--hide{max-height:0}.twist-aplayer-list ol{list-style-type:none;margin:0;padding:0;overflow-y:auto}.twist-aplayer-list ol li{position:relative;height:32px;line-height:32px;padding:0 15px;font-size:12px;border-top:1px solid hsl(var(--tp-border));cursor:pointer;transition:all .2s ease;overflow:hidden;margin:0;background-color:hsl(var(--tp-background))}.twist-aplayer-list ol li.twist-aplayer-list--active{background-color:hsl(var(--tp-secondary))}.twist-aplayer-list ol li:first-child{border:none}.twist-aplayer-list ol li:hover{background-color:hsl(var(--tp-secondary)/.8)}.twist-aplayer-list ol::-webkit-scrollbar{width:5px}.twist-aplayer-list ol::-webkit-scrollbar-thumb{border-radius:3px;background-color:var(--tp-list-scrollbar-thumb-color)}.twist-aplayer-list ol::-webkit-scrollbar-thumb:hover{background-color:var(--tp-list-scrollbar-thumb-hover-color)}.twist-aplayer-list__cur{display:none;width:3px;height:22px;position:absolute;left:0;top:5px;cursor:pointer;background-color:hsl(var(--tp-accent-foreground))}.twist-aplayer-list--active .twist-aplayer-list__cur{display:inline-block}.twist-aplayer-list__index{color:hsl(var(--tp-muted-foreground));margin-right:12px;cursor:pointer}.twist-aplayer-list__title{color:hsl(var(--tp-secondary-foreground))}.twist-aplayer-list__author{color:hsl(var(--tp-muted-foreground));float:right;cursor:pointer}.twist-aplayer-lrc{display:none;position:relative;height:30px;text-align:center;overflow:hidden;margin:-10px 0 7px}.twist-aplayer-lrc:after,.twist-aplayer-lrc:before{content:" ";position:absolute;z-index:1;display:block;overflow:hidden;width:100%}.twist-aplayer-lrc:before{top:0;height:10%;background:linear-gradient(180deg,hsl(var(--tp-background)) 0,#fff0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00ffffff",GradientType=0)}.twist-aplayer-lrc:after{bottom:0;height:33%;background:linear-gradient(180deg,#fff0 0,hsl(var(--tp-background)));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff",endColorstr="#ccffffff",GradientType=0)}.twist-aplayer-lrc p{font-size:12px;color:hsl(var(--tp-secondary-foreground));line-height:16px;height:16px;padding:0;margin:0;transition:all .5s ease-out;opacity:.4;overflow:hidden;text-shadow:none}.twist-aplayer-lrc__contents{width:100%;transition:all .5s ease-out;-webkit-user-select:text;-moz-user-select:text;user-select:text;cursor:default}.twist-aplayer-lrc p.twist-aplayer-lrc__current{opacity:1;overflow:visible;height:auto;min-height:16px}.twist-aplayer-lrc.twist-aplayer-lrc--hide{display:none}.twist-aplayer-light{--tp-background: 0 0% 100%;--tp-foreground: 240 10% 3.9%;--tp-card: 0 0% 100%;--tp-card-foreground: 240 10% 3.9%;--tp-primary: 240 5.9% 10%;--tp-primary-foreground: 0 0% 98%;--tp-secondary: 240 4.8% 95.9%;--tp-secondary-foreground: 240 5.9% 10%;--tp-muted: 240 4.8% 95.9%;--tp-muted-foreground: 240 3.8% 46.1%;--tp-accent: 240 4.8% 95.9%;--tp-accent-foreground: 240 5.9% 10%;--tp-border: 240 5.9% 90%}.twist-aplayer-dark{--tp-background: 240 10% 3.9%;--tp-foreground: 0 0% 98%;--tp-card: 240 10% 3.9%;--tp-card-foreground: 0 0% 98%;--tp-primary: 0 0% 98%;--tp-primary-foreground: 240 5.9% 10%;--tp-secondary: 240 3.7% 15.9%;--tp-secondary-foreground: 0 0% 98%;--tp-muted: 240 3.7% 15.9%;--tp-muted-foreground: 240 5% 64.9%;--tp-accent: 240 3.7% 15.9%;--tp-accent-foreground: 0 0% 98%;--tp-border: 240 3.7% 15.9%}.twist-aplayer-vars{--tp-icon-width: 15px;--tp-icon-height: 15px;--tp-icon-font-size: 15px;--tp-icon-transition-function: ease-in-out;--tp-icon-transition-timing: .2s;--tp-max-width: 400px;--tp-zIndex: 99;--tp-pic-width: 66px;--tp-pic-height: 66px;--tp-pic-transition-function: ease;--tp-pic-transition-timing: .3s;--tp-button-background: rgba(0, 0, 0, .2);--tp-box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tp-user-border: hsl(var(--tp-border) / .3)}.twist-aplayer{font-family:Arial,Helvetica,sans-serif;-webkit-user-select:none;-moz-user-select:none;user-select:none;line-height:normal;border-radius:2px;margin:5px;box-shadow:var(--tp-box-shadow);overflow:hidden}.twist-aplayer *{box-sizing:content-box}.twist-aplayer__body{background-color:hsl(var(--tp-background))}.twist-aplayer__pic{position:relative;float:left;width:var(--tp-pic-width);height:var(--tp-pic-height);background-size:cover;background-position:50%;transition:all var(--tp-pic-transition-timing) var(--tp-pic-transition-function);cursor:pointer}.twist-aplayer__button{position:absolute;border-radius:50%;opacity:.8;text-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px #0003;background:hsl(var(--tp-primary-foreground));transition:all .1s ease}.twist-aplayer--play{width:28px;height:28px;bottom:50%;right:50%;margin:0 -15px -15px 0}.twist-aplayer--play svg{position:absolute;top:4px;left:5px;height:20px;width:20px}.twist-aplayer--pause{font-size:12px;width:18px;height:18px;bottom:4px;right:4px}.twist-aplayer--pause svg{position:absolute;top:3px;left:3px;height:12px;width:12px}.twist-aplayer--play path,.twist-aplayer--pause path{fill:hsl(var(--tp-accent-foreground))}.twist-aplayer__info{margin-left:66px;padding:14px 7px 0 10px;height:66px;box-sizing:border-box}.twist-aplayer__music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0 0 13px 5px;-webkit-user-select:text;-moz-user-select:text;user-select:text;cursor:default;padding-bottom:2px;height:20px}.twist-aplayer__title{color:hsl(var(--tp-secondary-foreground));font-size:14px}.twist-aplayer__author{font-size:12px;color:hsl(var(--tp-muted-foreground))}.twist-aplayer__author>a{color:inherit;text-decoration:none}.twist-aplayer-controller{position:relative;display:flex}.twist-aplayer-controller__time{position:relative;right:0;bottom:4px;height:17px;font-size:11px;padding-left:7px}.twist-aplayer-controller__time-inner{color:hsl(var(--tp-muted-foreground));vertical-align:middle}.twist-aplayer-controller__time .twist-aplayer-icon{cursor:pointer;transition:all .2s ease}.twist-aplayer-controller__time .twist-aplayer-icon path{fill:hsl(var(--tp-muted-foreground))}.twist-aplayer-controller__time .twist-aplayer-icon:hover path{fill:hsl(var(--tp-primary))}.twist-aplayer__notice{opacity:0;position:absolute;top:50%;left:50%;z-index:100;transform:translate(-50%,-50%);font-size:12px;border-radius:4px;padding:5px 10px;transition:all .3s ease-in-out;overflow:hidden;pointer-events:none;background-color:hsl(var(--tp-accent));color:hsl(var(--tp-accent-foreground))}.twist-aplayer__miniswitcher{display:none;position:absolute;top:0;right:0;bottom:0;height:100%;background:hsl(var(--tp-accent));width:18px;border-radius:0 2px 2px 0}.twist-aplayer__miniswitcher .twist-aplayer-icon{height:100%;width:100%;transform:rotateY(180deg);transition:all .3s ease}.twist-aplayer__miniswitcher .twist-aplayer-icon path{fill:hsl(var(--tp-muted-foreground))}.twist-aplayer-icon-lrc-inactivity svg{opacity:.4}.twist-aplayer-icon-loading{display:none}.twist-aplayer-icon-loading svg{position:absolute;top:1px;left:1px;width:8px;height:8px;animation:rotate 1s linear infinite}.twist-aplayer-icon-loading svg path{fill:hsl(var(--tp-background))}.twist-aplayer-icon-back,.twist-aplayer-icon-forward,.twist-aplayer-icon-lrc,.twist-aplayer-icon-order,.twist-aplayer-icon-play{display:none}.twist-aplayer--border{border:1px solid var(--tp-user-border)}.twist-aplayer.twist-aplayer--fixed{position:fixed;bottom:0;left:0;right:0;margin:0;z-index:var(--tp-zIndex);overflow:visible;max-width:var(--tp-max-width);box-shadow:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__body{position:fixed;bottom:0;left:0;right:0;margin:0;z-index:99;padding-right:18px;transition:all .3s ease;max-width:400px}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__info{transform:scaleX(1);transform-origin:0 0;transition:all .3s ease;border-bottom:none;border-top:1px solid hsl(var(--tp-border))}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-list{margin-bottom:65px;border:1px solid hsl(var(--tp-border));border-bottom:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__music{width:calc(100% - 105px)}.twist-aplayer.twist-aplayer--fixed .twist-aplayer.twist-aplayer--border.twist-aplayer--list-folded .twist-aplayer__info,.twist-aplayer.twist-aplayer--fixed .twist-aplayer--list-folded .twist-aplayer__info{border-top:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer--border.twist-aplayer--list-folded .twist-aplayer__info,.twist-aplayer.twist-aplayer--fixed .twist-aplayer--list-folded .twist-aplayer__info{border-bottom:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc{display:block;position:fixed;bottom:10px;left:0;right:0;margin:0;z-index:98;pointer-events:none;text-shadow:-1px -1px 0 #fff}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc:after,.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc:before{display:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-lrc.twist-aplayer-lrc--hide{display:none}.twist-aplayer.twist-aplayer--fixed .twist-aplayer__miniswitcher{display:block}.twist-aplayer.twist-aplayer--fixed .twist-aplayer-list--hide.twist-aplayer-list{border-top:none}.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow{width:66px}.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer__info,.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer-list{display:none}.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer__body,.twist-aplayer.twist-aplayer--fixed.twist-aplayer--narrow .twist-aplayer__pic{width:66px;height:66px}.twist-aplayer.twist-aplayer--withlist .twist-aplayer-list{display:block}.twist-aplayer.twist-aplayer--withlist .twist-aplayer__info{border-bottom:1px solid hsl(var(--tp-border))}.twist-aplayer.twist-aplayer--withlrc .twist-aplayer__info{margin-left:90px;height:90px;padding:10px 7px 0}.twist-aplayer.twist-aplayer--withlrc .twist-aplayer__pic{width:90px;height:90px}.twist-aplayer.twist-aplayer--withlrc .twist-aplayer-lrc,.twist-aplayer--loading .twist-aplayer-icon-loading{display:block}.twist-aplayer--normal.twist-aplayer--border.twist-aplayer--list-folded .twist-aplayer__info,.twist-aplayer--withlist.twist-aplayer--list-folded .twist-aplayer__info{border-bottom:none}