mirror of https://github.com/IoTcat/Ushio-js.git
parent
f6600774f5
commit
7bcebf78a5
12 changed files with 1248 additions and 13 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,604 @@ |
||||
/* APlayer */ |
||||
#ap-f{ |
||||
position: absolute; |
||||
z-index: 9999; |
||||
} |
||||
.aplayer { |
||||
background:#fff; |
||||
font-family:Arial, Helvetica, sans-serif; |
||||
margin:5px; |
||||
box-shadow:0 2px 2px 0 rgba(0, 0, 0, .07), 0 1px 5px 0 rgba(0, 0, 0, .1); |
||||
border-radius:2px; |
||||
overflow:hidden; |
||||
-webkit-user-select:none; |
||||
-moz-user-select:none; |
||||
-ms-user-select:none; |
||||
user-select:none; |
||||
line-height:normal; |
||||
position:relative; |
||||
} |
||||
.aplayer * { |
||||
box-sizing:content-box |
||||
} |
||||
.aplayer svg { |
||||
width:100%; |
||||
height:100% |
||||
} |
||||
.aplayer svg circle, .aplayer svg path { |
||||
fill:#fff |
||||
} |
||||
.aplayer.aplayer-withlist .aplayer-info { |
||||
border-bottom:1px solid #e9e9e9 |
||||
} |
||||
.aplayer.aplayer-withlist .aplayer-list { |
||||
display:block |
||||
} |
||||
.aplayer.aplayer-withlist .aplayer-icon-order, .aplayer.aplayer-withlist .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu { |
||||
display:inline |
||||
} |
||||
.aplayer.aplayer-withlrc .aplayer-pic { |
||||
height:90px; |
||||
width:90px |
||||
} |
||||
.aplayer.aplayer-withlrc .aplayer-info { |
||||
margin-left:90px; |
||||
height:90px; |
||||
padding:10px 7px 0 |
||||
} |
||||
.aplayer.aplayer-withlrc .aplayer-lrc { |
||||
display:block |
||||
} |
||||
.aplayer.aplayer-narrow { |
||||
width:66px |
||||
} |
||||
.aplayer.aplayer-narrow .aplayer-info, .aplayer.aplayer-narrow .aplayer-list { |
||||
display:none |
||||
} |
||||
.aplayer.aplayer-narrow .aplayer-body, .aplayer.aplayer-narrow .aplayer-pic { |
||||
height:66px; |
||||
width:0px |
||||
} |
||||
.aplayer.aplayer-fixed { |
||||
position:fixed; |
||||
bottom:0; |
||||
left:0; |
||||
right:0; |
||||
margin:0; |
||||
z-index:99; |
||||
overflow:visible; |
||||
max-width:400px; |
||||
box-shadow:none |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-list { |
||||
margin-bottom:65px; |
||||
border:1px solid #eee; |
||||
border-bottom:none |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-body { |
||||
position:fixed; |
||||
bottom:0; |
||||
left:0; |
||||
right:0; |
||||
margin:0; |
||||
z-index:99; |
||||
background:#fff; |
||||
padding-right:18px; |
||||
transition:all .3s ease; |
||||
max-width:400px |
||||
} |
||||
.aplayer.aplayer-fixed .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 |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-lrc:after, .aplayer.aplayer-fixed .aplayer-lrc:before { |
||||
display:none |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-info { |
||||
-webkit-transform:scaleX(1); |
||||
transform:scaleX(1); |
||||
-webkit-transform-origin:0 0; |
||||
transform-origin:0 0; |
||||
transition:all .3s ease; |
||||
border-bottom:none; |
||||
border-top:1px solid #e9e9e9 |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-info .aplayer-music { |
||||
width:calc(100% - 105px) |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-miniswitcher { |
||||
display:block |
||||
} |
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-info { |
||||
display:block; |
||||
-webkit-transform:scaleX(0); |
||||
transform:scaleX(0) |
||||
} |
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body { |
||||
width:0px!important |
||||
} |
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon { |
||||
-webkit-transform:rotateY(0); |
||||
transform:rotateY(0) |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-back, .aplayer.aplayer-fixed .aplayer-icon-forward, .aplayer.aplayer-fixed .aplayer-icon-lrc, .aplayer.aplayer-fixed .aplayer-icon-play { |
||||
display:inline-block |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-back, .aplayer.aplayer-fixed .aplayer-icon-forward, .aplayer.aplayer-fixed .aplayer-icon-menu, .aplayer.aplayer-fixed .aplayer-icon-play { |
||||
position:absolute; |
||||
bottom:27px; |
||||
width:20px; |
||||
height:20px |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-back { |
||||
right:75px |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-play { |
||||
right:50px |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-forward { |
||||
right:25px |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-menu { |
||||
right:0 |
||||
} |
||||
.aplayer.aplayer-arrow .aplayer-icon-loop, .aplayer.aplayer-arrow .aplayer-icon-order, .aplayer.aplayer-mobile .aplayer-icon-volume-down { |
||||
display:none |
||||
} |
||||
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-loading-icon { |
||||
display:block |
||||
} |
||||
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { |
||||
-webkit-transform:scale(1); |
||||
transform:scale(1) |
||||
} |
||||
.aplayer .aplayer-body { |
||||
position:relative |
||||
} |
||||
.aplayer .aplayer-icon { |
||||
width:15px; |
||||
height:15px; |
||||
border:none; |
||||
background-color:transparent; |
||||
outline:none; |
||||
cursor:pointer; |
||||
opacity:.8; |
||||
vertical-align:middle; |
||||
padding:0; |
||||
font-size:12px; |
||||
margin:0; |
||||
display:inline-block |
||||
} |
||||
.aplayer .aplayer-icon path { |
||||
transition:all .2s ease-in-out |
||||
} |
||||
.aplayer .aplayer-icon-back, .aplayer .aplayer-icon-forward, .aplayer .aplayer-icon-lrc, .aplayer .aplayer-icon-order, .aplayer .aplayer-icon-play { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-icon-lrc-inactivity svg { |
||||
opacity:.4 |
||||
} |
||||
.aplayer .aplayer-icon-forward { |
||||
-webkit-transform:rotate(180deg); |
||||
transform:rotate(180deg) |
||||
} |
||||
.aplayer .aplayer-lrc-content { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-pic { |
||||
position:relative; |
||||
float:left; |
||||
height:66px; |
||||
width:66px; |
||||
background-size:cover; |
||||
background-position:50%; |
||||
transition:all .3s ease; |
||||
cursor:pointer |
||||
} |
||||
.aplayer .aplayer-pic:hover .aplayer-button { |
||||
opacity:1 |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-button { |
||||
position:absolute; |
||||
border-radius:50%; |
||||
opacity:.8; |
||||
text-shadow:0 1px 1px rgba(0, 0, 0, .2); |
||||
box-shadow:0 1px 1px rgba(0, 0, 0, .2); |
||||
background:rgba(0, 0, 0, .2); |
||||
transition:all .1s ease |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-button path { |
||||
fill:#fff |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-hide { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-play { |
||||
width:26px; |
||||
height:26px; |
||||
border:2px solid #fff; |
||||
bottom:50%; |
||||
right:50%; |
||||
margin:0 -15px -15px 0 |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-play svg { |
||||
position:absolute; |
||||
top:3px; |
||||
left:4px; |
||||
height:20px; |
||||
width:20px |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-pause { |
||||
width:16px; |
||||
height:16px; |
||||
border:2px solid #fff; |
||||
bottom:4px; |
||||
right:4px |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-pause svg { |
||||
position:absolute; |
||||
top:2px; |
||||
left:2px; |
||||
height:12px; |
||||
width:12px |
||||
} |
||||
.aplayer .aplayer-info { |
||||
margin-left:66px; |
||||
padding:14px 7px 0 10px; |
||||
height:66px; |
||||
box-sizing:border-box |
||||
} |
||||
.aplayer .aplayer-info .aplayer-music { |
||||
overflow:hidden; |
||||
white-space:nowrap; |
||||
text-overflow:ellipsis; |
||||
margin:0 0 13px 5px; |
||||
-webkit-user-select:text; |
||||
-moz-user-select:text; |
||||
-ms-user-select:text; |
||||
user-select:text; |
||||
cursor:default; |
||||
padding-bottom:2px; |
||||
height:20px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-music .aplayer-title { |
||||
font-size:14px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-music .aplayer-author { |
||||
font-size:12px; |
||||
color:#666 |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller { |
||||
position:relative; |
||||
display:flex |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap { |
||||
margin:0 0 0 5px; |
||||
padding:4px 0; |
||||
cursor:pointer!important; |
||||
flex:1 |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb { |
||||
-webkit-transform:scale(1); |
||||
transform:scale(1) |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { |
||||
position:relative; |
||||
height:2px; |
||||
width:100%; |
||||
background:#cdcdcd |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { |
||||
position:absolute; |
||||
left:0; |
||||
top:0; |
||||
bottom:0; |
||||
background:#aaa; |
||||
height:2px; |
||||
transition:all .5s ease |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { |
||||
position:absolute; |
||||
left:0; |
||||
top:0; |
||||
bottom:0; |
||||
height:2px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { |
||||
position:absolute; |
||||
top:0; |
||||
right:5px; |
||||
margin-top:-4px; |
||||
margin-right:-10px; |
||||
height:10px; |
||||
width:10px; |
||||
border-radius:50%; |
||||
cursor:pointer; |
||||
transition:all .3s ease-in-out; |
||||
-webkit-transform:scale(0); |
||||
transform:scale(0) |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time { |
||||
position:relative; |
||||
right:0; |
||||
bottom:4px; |
||||
height:17px; |
||||
color:#999; |
||||
font-size:11px; |
||||
padding-left:7px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner { |
||||
vertical-align:middle |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon { |
||||
cursor:pointer; |
||||
transition:all .2s ease |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path { |
||||
fill:#666 |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop { |
||||
margin-right:2px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path { |
||||
fill:#000 |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu, .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu, .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap { |
||||
position:relative; |
||||
display:inline-block; |
||||
margin-left:3px; |
||||
cursor:pointer!important |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap { |
||||
height:40px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap { |
||||
position:absolute; |
||||
bottom:15px; |
||||
right:-3px; |
||||
width:25px; |
||||
height:0; |
||||
z-index:99; |
||||
overflow:hidden; |
||||
transition:all .2s ease-in-out |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active { |
||||
height:40px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar { |
||||
position:absolute; |
||||
bottom:0; |
||||
right:10px; |
||||
width:5px; |
||||
height:35px; |
||||
background:#aaa; |
||||
border-radius:2.5px; |
||||
overflow:hidden |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume { |
||||
position:absolute; |
||||
bottom:0; |
||||
right:0; |
||||
width:5px; |
||||
transition:all .1s ease |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon svg { |
||||
position:absolute; |
||||
-webkit-animation:rotate 1s linear infinite; |
||||
animation:rotate 1s linear infinite |
||||
} |
||||
.aplayer .aplayer-lrc { |
||||
display:none; |
||||
position:relative; |
||||
height:30px; |
||||
text-align:center; |
||||
overflow:hidden; |
||||
margin:-10px 0 7px |
||||
} |
||||
.aplayer .aplayer-lrc:before { |
||||
top:0; |
||||
height:10%; |
||||
background:linear-gradient(180deg, #fff 0, hsla(0, 0%, 100%, 0)); |
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=0) |
||||
} |
||||
.aplayer .aplayer-lrc:after, .aplayer .aplayer-lrc:before { |
||||
position:absolute; |
||||
z-index:1; |
||||
display:block; |
||||
overflow:hidden; |
||||
width:100%; |
||||
content:" " |
||||
} |
||||
.aplayer .aplayer-lrc:after { |
||||
bottom:0; |
||||
height:33%; |
||||
background:linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .8)); |
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ccffffff", GradientType=0) |
||||
} |
||||
.aplayer .aplayer-lrc p { |
||||
font-size:12px; |
||||
color:#666; |
||||
line-height:16px!important; |
||||
height:16px!important; |
||||
padding:0!important; |
||||
margin:0!important; |
||||
transition:all .5s ease-out; |
||||
opacity:.4; |
||||
overflow:hidden |
||||
} |
||||
.aplayer .aplayer-lrc p.aplayer-lrc-current { |
||||
opacity:1; |
||||
overflow:visible; |
||||
height:auto!important; |
||||
min-height:16px |
||||
} |
||||
.aplayer .aplayer-lrc.aplayer-lrc-hide { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-lrc .aplayer-lrc-contents { |
||||
width:100%; |
||||
transition:all .5s ease-out; |
||||
-webkit-user-select:text; |
||||
-moz-user-select:text; |
||||
-ms-user-select:text; |
||||
user-select:text; |
||||
cursor:default |
||||
} |
||||
.aplayer .aplayer-list { |
||||
overflow:auto; |
||||
transition:all .5s ease; |
||||
will-change:height; |
||||
display:none; |
||||
overflow:hidden |
||||
} |
||||
.aplayer .aplayer-list.aplayer-list-hide { |
||||
max-height:0!important |
||||
} |
||||
.aplayer .aplayer-list ol { |
||||
list-style-type:none; |
||||
margin:0; |
||||
padding:0; |
||||
overflow-y:auto |
||||
} |
||||
.aplayer .aplayer-list ol::-webkit-scrollbar { |
||||
width:5px |
||||
} |
||||
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb { |
||||
border-radius:3px; |
||||
background-color:#eee |
||||
} |
||||
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover { |
||||
background-color:#ccc |
||||
} |
||||
.aplayer .aplayer-list ol li { |
||||
position:relative; |
||||
height:32px; |
||||
line-height:32px; |
||||
padding:0 15px; |
||||
font-size:12px; |
||||
border-top:1px solid #e9e9e9; |
||||
cursor:pointer; |
||||
transition:all .2s ease; |
||||
overflow:hidden; |
||||
margin:0 |
||||
} |
||||
.aplayer .aplayer-list ol li:first-child { |
||||
border-top:none |
||||
} |
||||
.aplayer .aplayer-list ol li:hover { |
||||
background:#efefef |
||||
} |
||||
.aplayer .aplayer-list ol li.aplayer-list-light { |
||||
background:#e9e9e9 |
||||
} |
||||
.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur { |
||||
display:inline-block |
||||
} |
||||
.aplayer .aplayer-list ol li .aplayer-list-cur { |
||||
display:none; |
||||
width:3px; |
||||
height:22px; |
||||
position:absolute; |
||||
left:0; |
||||
top:5px; |
||||
cursor:pointer |
||||
} |
||||
.aplayer .aplayer-list ol li .aplayer-list-index { |
||||
color:#666; |
||||
margin-right:12px; |
||||
cursor:pointer |
||||
} |
||||
.aplayer .aplayer-list ol li .aplayer-list-author { |
||||
color:#666; |
||||
float:right; |
||||
cursor:pointer |
||||
} |
||||
.aplayer .aplayer-notice { |
||||
opacity:0; |
||||
position:absolute; |
||||
top:50%; |
||||
left:250%; |
||||
-webkit-transform:translate(-50%, -50%); |
||||
transform:translate(-50%, -50%); |
||||
font-size:12px; |
||||
border-radius:4px; |
||||
padding:5px 10px; |
||||
transition:all .3s ease-in-out; |
||||
overflow:hidden; |
||||
color:#fff; |
||||
pointer-events:none; |
||||
background-color:#f4f4f5; |
||||
color:#909399 |
||||
} |
||||
.aplayer .aplayer-miniswitcher { |
||||
display:none; |
||||
position:absolute; |
||||
top:0; |
||||
right:0; |
||||
bottom:0; |
||||
height:100%; |
||||
background:#e6e6e6; |
||||
width:18px; |
||||
border-radius:0 2px 2px 0 |
||||
} |
||||
.aplayer .aplayer-miniswitcher .aplayer-icon { |
||||
height:100%; |
||||
width:100%; |
||||
-webkit-transform:rotateY(180deg); |
||||
transform:rotateY(180deg); |
||||
transition:all .3s ease |
||||
} |
||||
.aplayer .aplayer-miniswitcher .aplayer-icon path { |
||||
fill:#666 |
||||
} |
||||
.aplayer .aplayer-miniswitcher .aplayer-icon:hover path { |
||||
fill:#000 |
||||
} |
||||
@-webkit-keyframes aplayer-roll { |
||||
0% { |
||||
left:0 |
||||
} |
||||
to { |
||||
left:-100% |
||||
} |
||||
} |
||||
@keyframes aplayer-roll { |
||||
0% { |
||||
left:0 |
||||
} |
||||
to { |
||||
left:-100% |
||||
} |
||||
} |
||||
@-webkit-keyframes rotate { |
||||
0% { |
||||
-webkit-transform:rotate(0); |
||||
transform:rotate(0) |
||||
} |
||||
to { |
||||
-webkit-transform:rotate(1turn); |
||||
transform:rotate(1turn) |
||||
} |
||||
} |
||||
@keyframes rotate { |
||||
0% { |
||||
-webkit-transform:rotate(0); |
||||
transform:rotate(0) |
||||
} |
||||
to { |
||||
-webkit-transform:rotate(1turn); |
||||
transform:rotate(1turn) |
||||
} |
||||
} |
File diff suppressed because one or more lines are too long
@ -0,0 +1,604 @@ |
||||
/* APlayer */ |
||||
#ap-f{ |
||||
position: absolute; |
||||
z-index: 9999; |
||||
} |
||||
.aplayer { |
||||
background:#fff; |
||||
font-family:Arial, Helvetica, sans-serif; |
||||
margin:5px; |
||||
box-shadow:0 2px 2px 0 rgba(0, 0, 0, .07), 0 1px 5px 0 rgba(0, 0, 0, .1); |
||||
border-radius:2px; |
||||
overflow:hidden; |
||||
-webkit-user-select:none; |
||||
-moz-user-select:none; |
||||
-ms-user-select:none; |
||||
user-select:none; |
||||
line-height:normal; |
||||
position:relative; |
||||
} |
||||
.aplayer * { |
||||
box-sizing:content-box |
||||
} |
||||
.aplayer svg { |
||||
width:100%; |
||||
height:100% |
||||
} |
||||
.aplayer svg circle, .aplayer svg path { |
||||
fill:#fff |
||||
} |
||||
.aplayer.aplayer-withlist .aplayer-info { |
||||
border-bottom:1px solid #e9e9e9 |
||||
} |
||||
.aplayer.aplayer-withlist .aplayer-list { |
||||
display:block |
||||
} |
||||
.aplayer.aplayer-withlist .aplayer-icon-order, .aplayer.aplayer-withlist .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu { |
||||
display:inline |
||||
} |
||||
.aplayer.aplayer-withlrc .aplayer-pic { |
||||
height:90px; |
||||
width:90px |
||||
} |
||||
.aplayer.aplayer-withlrc .aplayer-info { |
||||
margin-left:90px; |
||||
height:90px; |
||||
padding:10px 7px 0 |
||||
} |
||||
.aplayer.aplayer-withlrc .aplayer-lrc { |
||||
display:block |
||||
} |
||||
.aplayer.aplayer-narrow { |
||||
width:66px |
||||
} |
||||
.aplayer.aplayer-narrow .aplayer-info, .aplayer.aplayer-narrow .aplayer-list { |
||||
display:none |
||||
} |
||||
.aplayer.aplayer-narrow .aplayer-body, .aplayer.aplayer-narrow .aplayer-pic { |
||||
height:66px; |
||||
width:0px |
||||
} |
||||
.aplayer.aplayer-fixed { |
||||
position:fixed; |
||||
bottom:0; |
||||
left:0; |
||||
right:0; |
||||
margin:0; |
||||
z-index:99; |
||||
overflow:visible; |
||||
max-width:400px; |
||||
box-shadow:none |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-list { |
||||
margin-bottom:65px; |
||||
border:1px solid #eee; |
||||
border-bottom:none |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-body { |
||||
position:fixed; |
||||
bottom:0; |
||||
left:0; |
||||
right:0; |
||||
margin:0; |
||||
z-index:99; |
||||
background:#fff; |
||||
padding-right:18px; |
||||
transition:all .3s ease; |
||||
max-width:400px |
||||
} |
||||
.aplayer.aplayer-fixed .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 |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-lrc:after, .aplayer.aplayer-fixed .aplayer-lrc:before { |
||||
display:none |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-info { |
||||
-webkit-transform:scaleX(1); |
||||
transform:scaleX(1); |
||||
-webkit-transform-origin:0 0; |
||||
transform-origin:0 0; |
||||
transition:all .3s ease; |
||||
border-bottom:none; |
||||
border-top:1px solid #e9e9e9 |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-info .aplayer-music { |
||||
width:calc(100% - 105px) |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-miniswitcher { |
||||
display:block |
||||
} |
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-info { |
||||
display:block; |
||||
-webkit-transform:scaleX(0); |
||||
transform:scaleX(0) |
||||
} |
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body { |
||||
width:0px!important |
||||
} |
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon { |
||||
-webkit-transform:rotateY(0); |
||||
transform:rotateY(0) |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-back, .aplayer.aplayer-fixed .aplayer-icon-forward, .aplayer.aplayer-fixed .aplayer-icon-lrc, .aplayer.aplayer-fixed .aplayer-icon-play { |
||||
display:inline-block |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-back, .aplayer.aplayer-fixed .aplayer-icon-forward, .aplayer.aplayer-fixed .aplayer-icon-menu, .aplayer.aplayer-fixed .aplayer-icon-play { |
||||
position:absolute; |
||||
bottom:27px; |
||||
width:20px; |
||||
height:20px |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-back { |
||||
right:75px |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-play { |
||||
right:50px |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-forward { |
||||
right:25px |
||||
} |
||||
.aplayer.aplayer-fixed .aplayer-icon-menu { |
||||
right:0 |
||||
} |
||||
.aplayer.aplayer-arrow .aplayer-icon-loop, .aplayer.aplayer-arrow .aplayer-icon-order, .aplayer.aplayer-mobile .aplayer-icon-volume-down { |
||||
display:none |
||||
} |
||||
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-loading-icon { |
||||
display:block |
||||
} |
||||
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { |
||||
-webkit-transform:scale(1); |
||||
transform:scale(1) |
||||
} |
||||
.aplayer .aplayer-body { |
||||
position:relative |
||||
} |
||||
.aplayer .aplayer-icon { |
||||
width:15px; |
||||
height:15px; |
||||
border:none; |
||||
background-color:transparent; |
||||
outline:none; |
||||
cursor:pointer; |
||||
opacity:.8; |
||||
vertical-align:middle; |
||||
padding:0; |
||||
font-size:12px; |
||||
margin:0; |
||||
display:inline-block |
||||
} |
||||
.aplayer .aplayer-icon path { |
||||
transition:all .2s ease-in-out |
||||
} |
||||
.aplayer .aplayer-icon-back, .aplayer .aplayer-icon-forward, .aplayer .aplayer-icon-lrc, .aplayer .aplayer-icon-order, .aplayer .aplayer-icon-play { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-icon-lrc-inactivity svg { |
||||
opacity:.4 |
||||
} |
||||
.aplayer .aplayer-icon-forward { |
||||
-webkit-transform:rotate(180deg); |
||||
transform:rotate(180deg) |
||||
} |
||||
.aplayer .aplayer-lrc-content { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-pic { |
||||
position:relative; |
||||
float:left; |
||||
height:66px; |
||||
width:66px; |
||||
background-size:cover; |
||||
background-position:50%; |
||||
transition:all .3s ease; |
||||
cursor:pointer |
||||
} |
||||
.aplayer .aplayer-pic:hover .aplayer-button { |
||||
opacity:1 |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-button { |
||||
position:absolute; |
||||
border-radius:50%; |
||||
opacity:.8; |
||||
text-shadow:0 1px 1px rgba(0, 0, 0, .2); |
||||
box-shadow:0 1px 1px rgba(0, 0, 0, .2); |
||||
background:rgba(0, 0, 0, .2); |
||||
transition:all .1s ease |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-button path { |
||||
fill:#fff |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-hide { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-play { |
||||
width:26px; |
||||
height:26px; |
||||
border:2px solid #fff; |
||||
bottom:50%; |
||||
right:50%; |
||||
margin:0 -15px -15px 0 |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-play svg { |
||||
position:absolute; |
||||
top:3px; |
||||
left:4px; |
||||
height:20px; |
||||
width:20px |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-pause { |
||||
width:16px; |
||||
height:16px; |
||||
border:2px solid #fff; |
||||
bottom:4px; |
||||
right:4px |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-pause svg { |
||||
position:absolute; |
||||
top:2px; |
||||
left:2px; |
||||
height:12px; |
||||
width:12px |
||||
} |
||||
.aplayer .aplayer-info { |
||||
margin-left:66px; |
||||
padding:14px 7px 0 10px; |
||||
height:66px; |
||||
box-sizing:border-box |
||||
} |
||||
.aplayer .aplayer-info .aplayer-music { |
||||
overflow:hidden; |
||||
white-space:nowrap; |
||||
text-overflow:ellipsis; |
||||
margin:0 0 13px 5px; |
||||
-webkit-user-select:text; |
||||
-moz-user-select:text; |
||||
-ms-user-select:text; |
||||
user-select:text; |
||||
cursor:default; |
||||
padding-bottom:2px; |
||||
height:20px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-music .aplayer-title { |
||||
font-size:14px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-music .aplayer-author { |
||||
font-size:12px; |
||||
color:#666 |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller { |
||||
position:relative; |
||||
display:flex |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap { |
||||
margin:0 0 0 5px; |
||||
padding:4px 0; |
||||
cursor:pointer!important; |
||||
flex:1 |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb { |
||||
-webkit-transform:scale(1); |
||||
transform:scale(1) |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { |
||||
position:relative; |
||||
height:2px; |
||||
width:100%; |
||||
background:#cdcdcd |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { |
||||
position:absolute; |
||||
left:0; |
||||
top:0; |
||||
bottom:0; |
||||
background:#aaa; |
||||
height:2px; |
||||
transition:all .5s ease |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { |
||||
position:absolute; |
||||
left:0; |
||||
top:0; |
||||
bottom:0; |
||||
height:2px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { |
||||
position:absolute; |
||||
top:0; |
||||
right:5px; |
||||
margin-top:-4px; |
||||
margin-right:-10px; |
||||
height:10px; |
||||
width:10px; |
||||
border-radius:50%; |
||||
cursor:pointer; |
||||
transition:all .3s ease-in-out; |
||||
-webkit-transform:scale(0); |
||||
transform:scale(0) |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time { |
||||
position:relative; |
||||
right:0; |
||||
bottom:4px; |
||||
height:17px; |
||||
color:#999; |
||||
font-size:11px; |
||||
padding-left:7px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner { |
||||
vertical-align:middle |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon { |
||||
cursor:pointer; |
||||
transition:all .2s ease |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path { |
||||
fill:#666 |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop { |
||||
margin-right:2px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path { |
||||
fill:#000 |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu, .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu, .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap { |
||||
position:relative; |
||||
display:inline-block; |
||||
margin-left:3px; |
||||
cursor:pointer!important |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap { |
||||
height:40px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap { |
||||
position:absolute; |
||||
bottom:15px; |
||||
right:-3px; |
||||
width:25px; |
||||
height:0; |
||||
z-index:99; |
||||
overflow:hidden; |
||||
transition:all .2s ease-in-out |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active { |
||||
height:40px |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar { |
||||
position:absolute; |
||||
bottom:0; |
||||
right:10px; |
||||
width:5px; |
||||
height:35px; |
||||
background:#aaa; |
||||
border-radius:2.5px; |
||||
overflow:hidden |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume { |
||||
position:absolute; |
||||
bottom:0; |
||||
right:0; |
||||
width:5px; |
||||
transition:all .1s ease |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon svg { |
||||
position:absolute; |
||||
-webkit-animation:rotate 1s linear infinite; |
||||
animation:rotate 1s linear infinite |
||||
} |
||||
.aplayer .aplayer-lrc { |
||||
display:none; |
||||
position:relative; |
||||
height:30px; |
||||
text-align:center; |
||||
overflow:hidden; |
||||
margin:-10px 0 7px |
||||
} |
||||
.aplayer .aplayer-lrc:before { |
||||
top:0; |
||||
height:10%; |
||||
background:linear-gradient(180deg, #fff 0, hsla(0, 0%, 100%, 0)); |
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=0) |
||||
} |
||||
.aplayer .aplayer-lrc:after, .aplayer .aplayer-lrc:before { |
||||
position:absolute; |
||||
z-index:1; |
||||
display:block; |
||||
overflow:hidden; |
||||
width:100%; |
||||
content:" " |
||||
} |
||||
.aplayer .aplayer-lrc:after { |
||||
bottom:0; |
||||
height:33%; |
||||
background:linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .8)); |
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ccffffff", GradientType=0) |
||||
} |
||||
.aplayer .aplayer-lrc p { |
||||
font-size:12px; |
||||
color:#666; |
||||
line-height:16px!important; |
||||
height:16px!important; |
||||
padding:0!important; |
||||
margin:0!important; |
||||
transition:all .5s ease-out; |
||||
opacity:.4; |
||||
overflow:hidden |
||||
} |
||||
.aplayer .aplayer-lrc p.aplayer-lrc-current { |
||||
opacity:1; |
||||
overflow:visible; |
||||
height:auto!important; |
||||
min-height:16px |
||||
} |
||||
.aplayer .aplayer-lrc.aplayer-lrc-hide { |
||||
display:none |
||||
} |
||||
.aplayer .aplayer-lrc .aplayer-lrc-contents { |
||||
width:100%; |
||||
transition:all .5s ease-out; |
||||
-webkit-user-select:text; |
||||
-moz-user-select:text; |
||||
-ms-user-select:text; |
||||
user-select:text; |
||||
cursor:default |
||||
} |
||||
.aplayer .aplayer-list { |
||||
overflow:auto; |
||||
transition:all .5s ease; |
||||
will-change:height; |
||||
display:none; |
||||
overflow:hidden |
||||
} |
||||
.aplayer .aplayer-list.aplayer-list-hide { |
||||
max-height:0!important |
||||
} |
||||
.aplayer .aplayer-list ol { |
||||
list-style-type:none; |
||||
margin:0; |
||||
padding:0; |
||||
overflow-y:auto |
||||
} |
||||
.aplayer .aplayer-list ol::-webkit-scrollbar { |
||||
width:5px |
||||
} |
||||
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb { |
||||
border-radius:3px; |
||||
background-color:#eee |
||||
} |
||||
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover { |
||||
background-color:#ccc |
||||
} |
||||
.aplayer .aplayer-list ol li { |
||||
position:relative; |
||||
height:32px; |
||||
line-height:32px; |
||||
padding:0 15px; |
||||
font-size:12px; |
||||
border-top:1px solid #e9e9e9; |
||||
cursor:pointer; |
||||
transition:all .2s ease; |
||||
overflow:hidden; |
||||
margin:0 |
||||
} |
||||
.aplayer .aplayer-list ol li:first-child { |
||||
border-top:none |
||||
} |
||||
.aplayer .aplayer-list ol li:hover { |
||||
background:#efefef |
||||
} |
||||
.aplayer .aplayer-list ol li.aplayer-list-light { |
||||
background:#e9e9e9 |
||||
} |
||||
.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur { |
||||
display:inline-block |
||||
} |
||||
.aplayer .aplayer-list ol li .aplayer-list-cur { |
||||
display:none; |
||||
width:3px; |
||||
height:22px; |
||||
position:absolute; |
||||
left:0; |
||||
top:5px; |
||||
cursor:pointer |
||||
} |
||||
.aplayer .aplayer-list ol li .aplayer-list-index { |
||||
color:#666; |
||||
margin-right:12px; |
||||
cursor:pointer |
||||
} |
||||
.aplayer .aplayer-list ol li .aplayer-list-author { |
||||
color:#666; |
||||
float:right; |
||||
cursor:pointer |
||||
} |
||||
.aplayer .aplayer-notice { |
||||
opacity:0; |
||||
position:absolute; |
||||
top:50%; |
||||
left:250%; |
||||
-webkit-transform:translate(-50%, -50%); |
||||
transform:translate(-50%, -50%); |
||||
font-size:12px; |
||||
border-radius:4px; |
||||
padding:5px 10px; |
||||
transition:all .3s ease-in-out; |
||||
overflow:hidden; |
||||
color:#fff; |
||||
pointer-events:none; |
||||
background-color:#f4f4f5; |
||||
color:#909399 |
||||
} |
||||
.aplayer .aplayer-miniswitcher { |
||||
display:none; |
||||
position:absolute; |
||||
top:0; |
||||
right:0; |
||||
bottom:0; |
||||
height:100%; |
||||
background:#e6e6e6; |
||||
width:18px; |
||||
border-radius:0 2px 2px 0 |
||||
} |
||||
.aplayer .aplayer-miniswitcher .aplayer-icon { |
||||
height:100%; |
||||
width:100%; |
||||
-webkit-transform:rotateY(180deg); |
||||
transform:rotateY(180deg); |
||||
transition:all .3s ease |
||||
} |
||||
.aplayer .aplayer-miniswitcher .aplayer-icon path { |
||||
fill:#666 |
||||
} |
||||
.aplayer .aplayer-miniswitcher .aplayer-icon:hover path { |
||||
fill:#000 |
||||
} |
||||
@-webkit-keyframes aplayer-roll { |
||||
0% { |
||||
left:0 |
||||
} |
||||
to { |
||||
left:-100% |
||||
} |
||||
} |
||||
@keyframes aplayer-roll { |
||||
0% { |
||||
left:0 |
||||
} |
||||
to { |
||||
left:-100% |
||||
} |
||||
} |
||||
@-webkit-keyframes rotate { |
||||
0% { |
||||
-webkit-transform:rotate(0); |
||||
transform:rotate(0) |
||||
} |
||||
to { |
||||
-webkit-transform:rotate(1turn); |
||||
transform:rotate(1turn) |
||||
} |
||||
} |
||||
@keyframes rotate { |
||||
0% { |
||||
-webkit-transform:rotate(0); |
||||
transform:rotate(0) |
||||
} |
||||
to { |
||||
-webkit-transform:rotate(1turn); |
||||
transform:rotate(1turn) |
||||
} |
||||
} |
Loading…
Reference in new issue