// aplayer 音乐 导航栏相关
@media screen and (max-width: $device-mobile)
  .l_header
    .list-v
      .aplayer,.aplayer-pic
        border-radius: $border-card * 0.5
        width: 64px
        height: 64px

.aplayer-container
  display: flex
  justify-content: center
  min-height: 100px
  meting-js
    max-width: 100%


.aplayer
  max-width: 500px
  border-radius: 4px
  color: var(--color-text)
  font-family: $fontfamily
  .aplayer-list
    text-align: left
  @media screen and (max-width: $device-mobile)
    border-radius: $border-card

.l_header
  .aplayer-volume-wrap
    display: none !important // 隐藏导航栏播放器音量调节 see: https://github.com/volantis-x/hexo-theme-volantis/issues/328


if hexo-config('plugins.aplayer.autoHide')
  .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body
    left: -66px !important
    &:hover
      left: 0px !important


dark_aplayer()
  .aplayer
    background: var(--color-site-bg)
  .aplayer .aplayer-list ol li:hover
    background: var(--theme-a20)
  .aplayer .aplayer-list ol li.aplayer-list-light
    background: var(--color-block)
  .aplayer-info
    background: var(--color-site-bg) !important
  .aplayer .aplayer-lrc:before
    background: linear-gradient(180deg,#282c34 0,hsla(0,0%,100%,0))
  .aplayer .aplayer-lrc:after
    background: linear-gradient(180deg,hsla(0,0%,0%,0) 0,hsla(0,0%,13%,.8))
  .aplayer-pic
    filter: brightness(convert(hexo-config('color_scheme.dark.brightness')))
  .aplayer .aplayer-list ol li
    border-top: 1px solid var(--color-card)
  .aplayer.aplayer-withlist .aplayer-info
    border-bottom: 1px solid var(--color-block)
  .aplayer .aplayer-notice
    background-color: var(--color-site-bg) !important

    
volantis-dark(dark_aplayer)