text: /*!
      SKPlayer
   */
  
  //const
  $white:#FFF;              //主白
  $red:#D94240;             //主红
  $gray:#6A6B6F;            //主灰
  $gray_grandma:#666;       //奶奶灰
  $line:#EBEBF2;            //进度条
  $line_loading:#D3D3E0;    //加载进度条
  $list_bg:#B0B0B0;         //列表项背景
  $list_hover:#DDD;         //列表项hover
  $list_border:#E9E9E9;     //列表项边框
  
  //mixin
  @mixin user-select($value:none){
    user-select:$value;
    -webkit-user-select:$value;
    -moz-user-select:$value;
    -ms-user-select:$value;
  }
  @mixin box-sizing($value:content-box){
    box-sizing:$value;
    -webkit-box-sizing:$value;
    -moz-box-sizing:$value;
  }
  @mixin filter($value:blur(3px)){
    filter:$value;
    -webkit-filter:$value;
  }
  @mixin transition($value:.37s){
    transition:$value;
    -webkit-transition:$value;
    -moz-transition:$value;
  }
  @mixin transform($value:translate(-50%,-50%)){
    transform:$value;
    -webkit-transform:$value;
    -moz-transform:$value;
    -ms-transform:$value;
  }
  @mixin ellipsis{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  
  //css
  #skPlayer{
    width:380px;
    height:100px;
    font-family:Arial,Helvetica,sans-serif;
    position:relative;
    @include user-select();
    cursor:default;
    background-color:$white;
    box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  
    *{
      margin:0;
      padding:0;
      @include box-sizing();
  
      &::before{
        @include box-sizing();
      }
  
      &::after{
        @include box-sizing();
      }
  
    }
  
    .skPlayer-tip-loading{
      font-size:30px;
      color:$gray;
      line-height:100px;
      text-align:center;
    }
  
    .skPlayer-picture{
      width:100px;
      height:100px;
      float:left;
      position:relative;
      border-radius:7px 0 0 5px;
      z-index:3;
    }
  
    .skPlayer-cover{
      width:100%;
      @include transition();
      &.skPlayer-pause{
        @include filter();
      }
    }
  
    .skPlayer-play-btn{
      display:block;
      width:60px;
      height:60px;
      background-color:$red;
      border-radius:50%;
      position:absolute;
      overflow:hidden;
      top:50%;
      left:0;
      @include transform(translate(-50%,-50%) translateZ(0));
      z-index:2;
      @include transition(.7s);
  
      &.skPlayer-pause{
        left:50%;
  
        .skPlayer-left{
          border:14px solid $white;
          border-left:2px solid $white;
          border-right:2px solid $white;
        }
  
        .skPlayer-right{
          top:16px;
        }
  
      }
  
      span{
        display:block;
        width:0;
        height:0;
        position:absolute;
        @include transition();
        @include transform(translateZ(0));
  
        &.skPlayer-left{
          border-left:24px solid $white;
          border-top:14px solid transparent;
          border-bottom:14px solid transparent;
          left:21px;
          top:16px;
        }
  
        &.skPlayer-right{
          border:14px solid $white;
          border-left:2px solid $white;
          border-right:2px solid $white;
          right:21px;
          top:-76px;
        }
  
      }
  
    }
  
    .skPlayer-control{
      width:250px;
      height:75px;
      padding:10px 15px 15px;
      background-color:transparent;
      float:right;
      border-radius:0 7px 7px 0;
      position:relative;
      z-index:2;
      text-align:left;
  
      p{
        line-height:1.2;
        @include ellipsis;
  
        &.skPlayer-name{
          font-size:18px;
          font-weight:700;
          color:$gray;
        }
  
        &.skPlayer-author{
          font-size:15px;
          color:$gray_grandma;
          max-width:90%;
        }
  
      }
  
      >.skPlayer-percent{
        width:250px;
        height:6px;
        background-color:$line;
        margin:9px 0;
        cursor:pointer;
        overflow:hidden;
        position:relative;
  
        .skPlayer-line{
          width:0;
          height:100%;
          background-color:$red;
          position:absolute;
          left:0;
          top:0;
          z-index:2;
        }
  
        .skPlayer-line-loading{
          width:0;
          height:100%;
          background-color:$line_loading;
          position:absolute;
          left:0;
          top:0;
          z-index:1;
          @include transition(.7s);
          @include transform(translateZ(0));
        }
  
      }
  
      .skPlayer-time{
        font-size:15px;
        color:$gray_grandma;
        float:left;
      }
  
      .skPlayer-volume{
        width:120px;
        height:14px;
        float:right;
        position:relative;
        margin:1px 24px 0 0;
  
        .skPlayer-icon{
          display:block;
          width:5px;
          height:6px;
          position:absolute;
          background-color:$gray;
          top:4px;
          left:-20px;
          cursor:pointer;
  
          &.skPlayer-quiet::before{
            display:block;
          }
  
          &::before{
            content:'';
            display:none;
            width:2px;
            height:22px;
            @include transform(rotate(58deg));
            background-color:$gray;
            position:absolute;
            top:-8px;
            left:5px;
          }
  
          &::after{
            content:'';
            display:block;
            width:5px;
            height:6px;
            border-width:4px 5px;
            border-style:solid;
            border-color:transparent $gray transparent transparent;
            position:absolute;
            top:-4px;
            left:-5px;
          }
  
        }
  
        .skPlayer-percent{
          position:absolute;
          width:120px;
          height:14px;
          background-color:$line;
          border-radius:6px;
          overflow:hidden;
          cursor:pointer;
          top:0;
          left:0;
        }
  
        .skPlayer-line{
          height:100%;
          width:100%;
          background-color:$red;
          @include transition();
        }
  
      }
  
      .skPlayer-list-switch{
        display:block;
        width:16px;
        height:15px;
        position:absolute;
        right:15px;
        bottom:12px;
        cursor:pointer;
      }
  
      .skPlayer-list-icon{
        display:block;
        width:16px;
        height:3px;
        background-color:$gray;
        position:absolute;
        right:0;
        bottom:6px;
  
        &::before{
          content:'';
          display:block;
          width:16px;
          height:3px;
          background-color:$gray;
          position:absolute;
          left:0;
          bottom:6px;
        }
  
        &::after{
          content:'';
          display:block;
          width:16px;
          height:3px;
          background-color:$gray;
          position:absolute;
          left:0;
          bottom:-6px;
        }
  
      }
  
      .skPlayer-mode{
        display:block;
        width:16px;
        height:17px;
        background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAABVklEQVQ4y5XTvY6NURQG4OdsnElMFFqFiCgk/htBaFAoRq0QHYO9JTsSVyB6+STfx4hO5QJMZTQkU0gw4gJM4wpIxH8x6+QMxndy3mZl7bXf911r/wwgl/oCJ/2Ll13bnNKDpB8nJtTXBMJlBi1+TjLIpW7+Y0MudYinKPiOeziObRuQL2Epl7oVRkp3cRYfMde1zZv/OA9xBzuDc3WQS92HlXA+1rXN276Zc6mH8CrMjyRcxibcn0SO81rBQwwwn3Auak8mkdfhccQzCbsjeT2FwKjTXQk/IpmdQmBLxG8Jq5HsnUJgf8TVhOeRXJhC4GLEZwkL+IVrcUW9yKUexJUY/VHq2uZdiMxgMZd6tId8GIuxd6Frm/ejl1ixx9prvG18tXKpszgQbc9jGGPfZPyZvuI8HuDWX8afsIwbQYbTWGL8F3Rt8wXXN+j8Mz5gO3asWx/AbzMQVi2KT5GSAAAAAElFTkSuQmCC);
        position:absolute;
        right:15px;
        bottom:51px;
        cursor:pointer;
        &.skPlayer-mode-loop{
          background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAABa0lEQVQ4y5XTu2pVURAG4O9s9QgGC1sLEbEQvMXGG7FRCwutLcROIq4lLASfQOxlC3trbK18AFMZm0QEhcSID2Aan0BB4gWLM8cT48455G+GWWv++WfWzOpBymURM/7HUtvUF4xBZTzOT7gfJAiV3Wjwe5JAymXnPwEplz5eIuMnHuMc9naQb2Ih5bIHhpke4TK+4Grb1CtbKPfxEAeCc7uXcjmK1VA+2zb1h3E9p1xO4n2In6pwCzvwZDM55bIYE/qLtqlX8Qw9zFa4EncvOgRndI/3edhLFQ6FszxpZBswrPRghV/hTG0jwa6wPyqshXNkGwmOhV2r8Dqc6x2BS3jTcX4j7KteyuVE9LSOM/HKWyLi3xmMcbpqm/oj5gxWeT7lcnoMeRrzETvXNvWn4SYWHDbYxgdGo5VymcLxKHsW/Wj7HqPPtI5reIr7m4S/4i3uBhkuYoHRX9A29Xfc6aj8Gz5jH/ZvOO/BH1b7XciLVLbaAAAAAElFTkSuQmCC);
        }
      }
  
    }
  
    .skPlayer-list{
      display:none;
      width:100%;
      position:absolute;
      top:100px;
      padding-top:6px;
      background-color:$white;
      list-style:none;
      max-height:171px;
      overflow-y:auto;
      box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  
      li{
        position:relative;
        height:32px;
        line-height:32px;
        padding:0 15px;
        font-size:12px;
        border-top:1px solid $list_border;
        cursor:pointer;
        @include transition(.2s);
        overflow:hidden;
  
        &:hover{
          background-color:$list_hover;
        }
  
        &.skPlayer-curMusic{
          background-color:$list_bg;
          .skPlayer-list-sign{
            display:block;
          }
        }
  
      }
  
      &::-webkit-scrollbar{
        width:14px;
      }
  
      &::-webkit-scrollbar-track{
        border-left:1px solid $list_border;
      }
  
      &::-webkit-scrollbar-thumb{
        box-shadow:inset 0 0 7px rgba(0,0,0,.3);
        background-color:$red;
      }
  
      .skPlayer-list-sign{
        display:none;
        width:3px;
        height:22px;
        position:absolute;
        left:0;
        top:5px;
        background-color:$red;
      }
  
      .skPlayer-list-index{
        color:$gray_grandma;
        position:absolute;
        left:15px;
        top:0;
      }
  
      .skPlayer-list-name{
        color:$gray;
        float:left;
        margin-left:24px;
        max-width:200px;
        @include ellipsis;
      }
  
      .skPlayer-list-author{
        color:$gray_grandma;
        float:right;
        max-width:107px;
        @include ellipsis;
      }
  
    }
  
    &.skPlayer-list-on{
      .skPlayer-list{
        display:block;
      }
    }
  
  }