halo-theme-hao/templates/assets/libs/aplayer/music.css

595 lines
15 KiB
CSS
Raw Normal View History

2024-04-12 06:35:37 +00:00
#an_music_bg {
display: none;
filter: blur(63px);
opacity: .6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
position: fixed;
z-index: -999;
background-attachment: local;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
transition: .3s
}
body {
background: #0d0d0d;
}
#an_music_bg {
display: block;
}
body[data-type=music] .music-mask{
display: none;
}
body[data-type=music] #rightside{
display: none;
}
body[data-type=music] #web_bg {
display: none;
}
body[data-type=music] #page {
min-height: calc(0px)
}
@media screen and (max-width: 768px) {
body[data-type=music] .page .layout#content-inner {
background: 0 0!important;
}
body[data-type=music] #page-header.not-top-img:not(.nav-fixed) #nav{
background: 0 0!important;
}
}
#page-header.not-top-img #nav .back-home-button,
#page-header.not-top-img #nav a {
color:#F7F7FA;
}
#page-header.not-top-img #nav .back-home-button:hover{
color: var(--heo-card-bg);
}
body[data-type=music] #footer,
body[data-type=music] #nav-music {
display: none;
}
#anMusic-page .aplayer-body {
width: 40%;
height: 75vh;
}
#anMusic-page ol>li:hover {
background: #ffffff33;
border-radius: 6px;
}
@media screen and (max-width: 1400px) {
body #anMusic-page #anMusicBtnGetSong,
body #anMusic-page #anMusicRefreshBtn,
body #anMusic-page #anMusicSwitching {
right: 7vw
}
body #anMusic-page #anMusicSwitching {
bottom: 100px
}
body #anMusic-page #anMusicRefreshBtn {
bottom: 160px
}
body #anMusic-page #anMusicBtnGetSong {
bottom: 220px
}
}
#anMusic-page #anMusicBtnGetSong,
#anMusic-page #anMusicRefreshBtn,
#anMusic-page #anMusicSwitching {
position: fixed;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
width: 50px;
height: 50px;
bottom: 100px;
padding: 5px;
background: var(--heo-white-op);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 50%;
color: #fff;
text-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
cursor: pointer;
z-index: 2
}
#anMusic-page #anMusicBtnGetSong {
right: 11vw
}
#anMusic-page #anMusicRefreshBtn {
right: 7vw
}
#anMusic-page #anMusicSwitching {
right: 15vw
}
@media screen and (max-width: 768px) {
#anMusic-page div#anMusicBtnGetSong {
right: 80px;
bottom: 150px
}
#anMusic-page div#anMusicRefreshBtn {
right: 20px;
bottom: 150px
}
#anMusic-page div#anMusicSwitching {
right: 140px;
bottom: 150px
}
}
#anMusic-page meting-js .aplayer {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-o-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
background: rgba(0, 0, 0, 0);
border: none;
-webkit-box-shadow: none;
box-shadow: none
}
#anMusic-page meting-js .aplayer .aplayer-body {
width: 40%;
height: calc(100vh - 169px)
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-pic {
float: none;
width: 180px;
height: 180px;
border-radius: 12px;
margin: auto;
left: 0;
right: 0;
-webkit-transition: background-image .5s ease-in-out;
-moz-transition: background-image .5s ease-in-out;
-o-transition: background-image .5s ease-in-out;
-ms-transition: background-image .5s ease-in-out;
transition: background-image .5s ease-in-out;
background-size: cover;
background-color: transparent !important
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info {
margin: 0 20px 0 20px;
border-bottom: none
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music {
text-align: center;
height: auto;
margin: 15px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music .aplayer-author,
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music .aplayer-title {
font-size: 1.7rem;
font-weight: 700;
color: #fff
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc {
height: 800%;
margin-top: 10px;
mask-image: linear-gradient(to bottom, #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p {
font-size: 20px;
line-height: 20px !important;
height: 20px !important;
margin: 20px 0 !important;
color: #fff
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p.aplayer-lrc-current {
min-height: 20px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc::after,
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc::before {
display: none
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller {
position: fixed;
max-width: 1500px;
margin: auto;
left: 0;
right: 0;
bottom: 50px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap {
margin: 0 160px 0 150px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
height: 6px;
border-radius: 4px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
height: 6px;
border-radius: 4px;
background: var(--heo-white) !important
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
width: 20px;
height: 20px;
margin-top: -7px;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
-ms-transform: none;
transform: none;
background: #fff !important
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
height: 6px;
border-radius: 4px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time {
position: absolute;
width: 100%;
bottom: 21px;
height: 0;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: end;
-moz-box-pack: end;
-o-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-volume-wrap .aplayer-volume-bar-wrap {
bottom: 0;
right: -5px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
width: 2rem;
height: 1.6rem;
margin-left: 6px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
fill: var(--heo-white);
opacity: .8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80)
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop {
margin-right: 15px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
margin-right: 18px;
margin-top: -8px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-back {
position: absolute;
left: 0;
display: inline
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-play {
position: absolute;
left: 40px;
display: inline
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-forward {
position: absolute;
left: 80px;
display: inline
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-menu {
display: none
}
#anMusic-page meting-js .aplayer .aplayer-list {
width: 60%;
height: 100%
}
#anMusic-page meting-js .aplayer ol {
padding-right: 25px
}
#anMusic-page meting-js .aplayer ol>li {
border-top: 1px solid transparent;
font-size: 14px
}
#anMusic-page meting-js .aplayer ol>li:hover {
background: rgba(255, 255, 255, .2);
border-radius: 6px
}
#anMusic-page meting-js .aplayer ol>li.aplayer-list-light {
background: rgba(255, 255, 255, .2);
border-radius: 6px;
padding: 20px 15px
}
#anMusic-page meting-js .aplayer ol>li.aplayer-list-light span.aplayer-list-title {
font-weight: bolder
}
#anMusic-page meting-js .aplayer ol>li.aplayer-list-light .aplayer-list-cur {
display: none
}
#anMusic-page meting-js .aplayer ol>li span {
color: var(--heo-white)
}
#anMusic-page meting-js .aplayer ol>li span.aplayer-list-author {
opacity: .6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60)
}
@media screen and (max-width: 768px) {
body[data-type=music] #content-inner,
body[data-type=music] #page {
z-index: auto
}
#anMusic-page meting-js .aplayer .aplayer-list {
position: fixed;
z-index: 100;
width: 100%;
bottom: -88%;
left: 0;
background: var(--sidebar-bg);
height: auto;
border-radius: 15px 15px 0 0;
padding: 15px 0
}
#anMusic-page meting-js .aplayer .aplayer-list.aplayer-list-hide {
bottom: 0 !important
}
#anMusic-page meting-js .aplayer .aplayer-list ol {
max-height: 60vh !important;
padding-right: 0
}
#anMusic-page meting-js .aplayer .aplayer-list ol>li {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
margin: 0 10px
}
#anMusic-page meting-js .aplayer .aplayer-list ol>li span {
color: var(--font-color)
}
#anMusic-page meting-js .aplayer .aplayer-list ol>li span.aplayer-list-title {
width: 30%;
max-width: 55%;
width: auto;
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical
}
#anMusic-page meting-js .aplayer .aplayer-list ol>li span.aplayer-list-author {
position: absolute;
right: 10px;
width: auto;
max-width: 35%;
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical
}
#anMusic-page meting-js .aplayer .aplayer-list ol>li.aplayer-list-light {
background: #33a673;
padding: 5px 20px;
border-radius: 10px
}
#anMusic-page meting-js .aplayer .aplayer-list ol>li.aplayer-list-light span {
color: #fff
}
#anMusic-page meting-js .aplayer .aplayer-list ol>li.aplayer-list-light span.aplayer-list-author {
right: 15px
}
#anMusic-page meting-js .aplayer .aplayer-body {
width: 100%;
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 100px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc {
margin-top: 40px;
height: auto;
max-height: 200%;
min-height: 100%;
mask-image: linear-gradient(to bottom, #000, #000, #000, #000, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p.aplayer-lrc-current {
color: #33a673
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller {
width: 100%;
bottom: 100px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-volume-wrap {
left: -66px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap {
bottom: 0;
right: 7px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap {
margin: 0 30px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time {
bottom: -40px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
position: absolute;
width: 100%;
margin-right: 0;
margin-top: -33px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner .aplayer-dtime {
position: absolute;
right: 30px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner .aplayer-ptime {
position: absolute;
left: 35px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-back {
margin: auto;
right: 110px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-play {
margin: auto;
right: 0;
left: 0
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-forward {
margin: auto;
left: 110px;
right: 0
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-order {
position: absolute;
left: 22px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-loop {
position: absolute;
right: 10px
}
#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-menu {
display: inline;
position: absolute;
right: 25px;
top: -90px
}
body[data-type=music] .music-mask{
position: fixed;
z-index: 10;
display: none;
width: 100%;
height: 100%;
background: var(--heo-maskbg);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
transform: translateZ(0);
animation: 0.6s ease 0s 1 normal none running to_show;
left: 0;
top: 0;
}
}