/* APlayer 样式定义 */
.aplayer{background:#f5f5f5;font-family:Arial,Helvetica,sans-serif;margin:0px;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:66px} /* 窄版时主体和图片样式 */

.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-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:66px!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} /* 播放按钮 SVG 图标的样式 */
.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} /* 暂停按钮 SVG 图标的样式 */

.aplayer .aplayer-info{margin-left:66px;padding:14px 7px 0 2px;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:5px;height:17px;color:#999;font-size:11px;padding-left:0px} /* 播放时间的样式 */
.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:50%;-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)}} /* 旋转动画的定义 */

/*# sourceMappingURL=APlayer.min.css.map*/

/* Width的值可根据喜好调整（屏幕的宽度） */
@media (max-width: 800px) {
    /* Aplayer音乐标签伸缩 */
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
      left: -66px !important;
      /* 默认情况下缩进左侧66px，只留一点箭头部分 */
    }
   
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
      left: 0 !important;
      /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
    }
  }
  /* Aplayer日间模式调整 */
  /* 背景色 */
  .aplayer {
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    position: relative;
  }
   
  .aplayer.aplayer-fixed .aplayer-lrc:after,
  .aplayer.aplayer-fixed .aplayer-lrc:before {
    display: none;
  }
   
  .aplayer.aplayer.aplayer-fixed .aplayer-body {
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    position: fixed;
  }
   
  /* 滚动条 */
  .aplayer .aplayer-list ol::-webkit-scrollbar {
    width: 5px;
  }
   
  .aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--theme-color) !important;
  }
   
  .aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-color) !important;
  }
   
  /* 圆角 */
  .aplayer.aplayer-fixed .aplayer-list {
    border-radius: 6px 6px 0 0 !important;
  }
   
  .aplayer.aplayer-fixed .aplayer-miniswitcher {
    border-radius: 0 6px 6px 0 !important;
  }
   
  .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    transition: 0.28s !important;
    border-radius: 6px !important;
  }
   
  /* 选中与播放中歌曲激活颜色 */
  .aplayer .aplayer-list ol li:hover {
    background: var(--theme-color) !important;
  }
   
  .aplayer .aplayer-list ol li.aplayer-list-light {
    background: var(--theme-color) !important;
  }
   
  /* 歌词 */
  .aplayer-lrc p {
    color: #ffffff !important;
    text-shadow: #000000 1px 0 0, #000000 0 1px 0, #000000 -1px 0 0, #000000
        0 -1px 0 !important;
  }
   
  /* Aplayer黑暗模式 */
  [theme="dark"] 
  .aplayer {
    background: rgba(22, 22, 22, 0.6) !important;
    color: rgb(255, 255, 255);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  }
   
  [theme="dark"] 
  .aplayer.aplayer-fixed .aplayer-body {
    background: rgba(22, 22, 22, 0.6) !important;
    color: rgb(255, 255, 255);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  }
   
  [theme="dark"]
    .aplayer
    .aplayer-info
    .aplayer-controller
    .aplayer-time
    .aplayer-icon
    path {
    fill: #d4d4d4;
  }
   
  [theme="dark"] 
  .aplayer .aplayer-list ol li:hover {
    background: var(--theme-color) !important;
  }
   
  [theme="dark"] 
  .aplayer .aplayer-list ol li.aplayer-list-light {
    background: var(--theme-color) !important;
  }
   
  [theme="dark"] 
  .aplayer .aplayer-info .aplayer-controller .aplayer-time {
    color: #d4d4d4;
  }
   
  [theme="dark"] 
  .aplayer .aplayer-list ol li .aplayer-list-index {
    color: #d4d4d4;
  }
   
  [theme="dark"] 
  .aplayer .aplayer-list ol li .aplayer-list-author {
    color: #d4d4d4;
  }