@charset "UTF-8";
/**
 * {sonist app style}
 * @authors yutent<yutent@doui.cc>
 * @date 2018/12/16 17:15:07
 */


@import "./var.scss";

#app {position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:linear-gradient(to bottom, #fff, nth($cp, 1));

  // 标题栏样式
  .title-bar {position:relative;z-index:9;display:flex;height:5rem;
    
    .btn-box {position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0;
  
      .item {display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover;}
  
      &.focus {
        .quit {background-image:url(/images/btn-close.svg);}
        .min {background-image:url(/images/btn-mini.svg);}
        // .max {background-image:url(/images/btn-maxi.svg);}
      }
      &:hover {
        .quit {background-image:url(/images/btn-close_a.svg);}
        .min {background-image:url(/images/btn-mini_a.svg);}
        // .max {background-image:url(/images/btn-maxi_a.svg);}
      }
    }
  
    .btn-box-win {position:absolute;right:1.2rem;top:0;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem;
  
      .item,
      .opt {position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem;
      }
      .item {text-align:center;

        &:hover {background:rgba(0, 0, 0, .05);}
        &.quit:hover {color:nth($cr, 1);}
        &.disabled {color:nth($cp, 3);background:none}
      }
  
      .opt i {font-size:1.8rem;}
  
      .opt-list {position:absolute;z-index:100;right:0;top:2.2rem;width:13rem;height:auto;padding:.8rem 0;background:#fff;box-shadow:0 .5rem  2rem rgba(0, 0, 0, .1);font-size:1.4rem;
        span {display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem;
          
          i {padding-right:.8rem;}
          &.pipe {height:.1rem;margin:.5rem  0;border-bottom:.1rem solid nth($cp, 1)}
          &:hover  {background:nth($cp, 1)}
        }
      }
    }

    // 工具栏
    .holder {width:18rem;height:100%;}

    .tools {flex:1;padding:1rem;
      
      .search {display:flex;width:30rem;}
    }
  }


  // 主体样式
  .main-body {flex:1;display:flex;
  
    // 侧边栏
    .sidebar {width:18rem;position:relative;height:100%;
  
      // 用户信息
      .user-box {width:14rem;height:16.5rem;margin:0 2rem;text-align:center;
      
        .avatar {overflow:hidden;width:10rem;height:10rem;margin:0 2rem;border:.5rem solid #fff;border-radius:50%;box-shadow:0 .5rem  1.5rem rgba(0, 0, 0, .15);}
        img {width:100%;height:100%;}
        .uname {line-height:2;font-weight:normal;}
      }
  
      // 功能菜单导航
      .music-box {width:100%;height:auto;padding:0 1.5rem;
  
        dt.title {line-height:4rem;color:nth($cgr, 1)}
        dd.item {height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:nth($cgr, 3);
  
          .icon {float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem;}
          &:hover {padding-left:.9rem;color:nth($ct, 1);}
          &.active {border-radius:.3rem;background:nth($ct, 1);color:#fff;}
          &.disabled {opacity:.25}
        }
      }
  
      
    }

    // 功能模块
    .module {position:relative;flex:1;display:flex;flex-direction:column;}
  }


  .contrl-bar {position:relative;z-index:99;display:flex;height:6.5rem;
  
    // 播放控制按钮
    .play-box {
      display:flex;align-items:center;width:16rem;height:4.5rem;margin:1rem;padding:.5rem 1rem;border-radius:.75rem;background:#fff;box-shadow:0 .25rem 1rem rgba(0, 0, 0, .075);


      .btn-bg {
        position:absolute;
        left:3.25rem;
        height: 3.5rem;
        border-left: 3.25rem solid nth($cp, 1);
        border-top: .25rem solid transparent;
        border-bottom: .25rem solid transparent;

        &::before {position:absolute;left:-5rem;top:-.25rem;width:3.5rem;height:3.5rem;border-radius:50%;background:nth($cp, 1);content:""}
        &::after {position:absolute;right:-1.5rem;top:0;width:3rem;height:3rem;border-radius:50%;background:nth($cp, 1);content:""}
      }

      .action {position:relative;display:flex;justify-content:center;align-items:center;

        &.play {width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;box-shadow:0 .25rem .5rem rgba(0, 0, 0, .2)}
        &.next {width:2rem;height:2rem;margin-left:.75rem}
      }
    }

    // 播放条
    .stat-box {position:relative;flex:1;display:flex;justify-content:center;align-items:center;
    
      .song-stat {flex:1;height:6.5rem;margin:0 2rem 0 0;

        canvas {display:flex;width:100%;height:100%;}
      }

      .ctrl {position:relative;flex:0 1 3.5rem;height:3rem;line-height:3rem;text-align:center;color:nth($ct, 2);font-size:2rem;

        &:hover {color:nth($ct, 1)}
        &:active {color:nth($ct, 3)}
        &.lrc {margin-right:2rem;font-size:1.6rem;}

        .volume-ctrl {display:none;flex-direction:column;justify-content:flex-end;position:absolute;left:.5rem;bottom:3rem;width:2.4rem;height:12rem;padding:1rem .8rem;background:#fff;border-radius:.3rem;box-shadow:0 0 1rem rgba(0, 0, 0, .1);
        
          em {flex:0 0;border-radius:.5rem;background:nth($ct, 1)}
        }

        &.volume:hover .volume-ctrl {display:flex}
      }

    }
  
  }




  // 播放状态下的 模糊特效
  &.blur  {background:rgba(255, 255, 255, .85);backdrop-filter:blur(1rem);


    .title-bar {
      .holder {background:rgba(255, 255, 255, .3);}
      .tools input {background:rgba(255, 255, 255, .8);}
    }
  
    .main-body {
      
      .sidebar {background:rgba(255, 255, 255, .3);}
    }

    .contrl-bar {background:rgba(255, 255, 255, .35)}
    
  
  }

  // ktv状态下的 模糊特效
  &.ktv  {
    .contrl-bar {background:rgba(233, 233, 233, .1);
    
      .play-box  .item,
      .stat-box .ctrl {color:#fff;
      
        &:hover {color:nth($cr, 1)}
      }
    }
  }


  .ktv-box {overflow:hidden;position:absolute;z-index:80;left:0;top:0;width:100%;height:100%;background-color:nth($cd, 3);background-size:cover;background-repeat:no-repeat;color:#fff;
  
    .inner-content  {display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29, 35, 44, 0.767);backdrop-filter:blur(1rem);
    
      .info {flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2;

        img {width:30rem;height:30rem;border:.5rem solid rgba(255, 255, 255, .5);border-radius:50%;}
        .summary {flex:1; padding:0 5rem}
        pre {overflow:auto;height:30rem}
        h3 {line-height:3;font-size:1.8rem;}
      }
      .lrc-box {flex:0 10rem;display:flex;flex-flow:column wrap;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem;
        
        section {flex:1;display:flex;
        
          &.left {justify-content:flex-start;}
          &.right {justify-content:flex-end}

          span {background-clip:text!important;color:transparent;}
        }
      
      }


      .tool-box {position:absolute;right:0;top:15rem;width:13rem;height:auto;padding:1.5rem 0;background:rgba(255, 255, 255, .1);border-radius:.3rem  0 0 .3rem;opacity:.3;transform:translateX(8.8rem);@include  ts();
      
        .item {height:3.4rem;padding:0 .8rem;line-height:3.4rem;
        
          &:hover {background:rgba(255, 255, 255, .1);}
        }
        i {padding:0 1rem 0 .8rem}
      
        &:hover {opacity:1;transform:translateX(0)}
      }

      .slide-down {position:absolute;right:1rem;top:1rem;width:3rem;height:2rem;line-height:1.8rem;border:.1rem solid nth($cgr, 1);border-radius:.3rem;text-align:center;
        i {transform:rotate(90deg)}
      }


      .search-box {display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0;z-index:82;width:100%;height:56rem;background:rgba(29, 35, 44, 0.5);backdrop-filter:blur(.4rem);
      
        .content {width:60rem;height:auto;padding:2rem;background:rgba(255, 255, 255, .8);color:nth($cd, 1);
        
          .title {height:3rem;line-height:2rem;font-size:1.4rem;text-align:center;
          
            i {float:right;font-size:2rem;color:nth($cr, 1);}
          }

          .section {height:3.5rem;
            
            input {width:100%;}
          }

          .result {overflow-y:auto;width:100%;max-height:30rem;padding:1rem;background:rgba(255, 255, 255, .2);
          
            .item  {display:flex;justify-content:center;align-items:center;margin:.3rem 0;text-align:center;

              &:nth-child(1) {line-height:2;border-bottom:.1rem solid nth($cgr, 1);}
            
              span {flex:1;
              
                &:nth-child(1) {flex:3}
              }
            }
          
          }
        
        }
      
      
      }



    }
  
  }


  .loading {position:fixed;left:0;top:0;z-index:65536;display:flex;justify-content:center;align-items:center;width:100%;height:100%;
  
    .box {position:relative;display:flex;justify-content:center;align-items:center;width:8rem;height:8rem;
      
      i {position:absolute;width:8rem;height:8rem;border:3px solid nth($ct, 1);border-radius:50%;opacity:.5;
        &:nth-child(1) {animation:load 2.5s ease-in-out infinite;}
        &:nth-child(2) {animation:load 2.5s .5s ease-in-out infinite;}
        &:nth-child(3) {animation:load 2.5s 1s ease-in-out infinite;}
        &:nth-child(4) {animation:load 2.5s 1.5s ease-in-out infinite;}
        &:nth-child(5) {animation:load 2.5s 2s ease-in-out infinite;}
      }
      span {position:absolute;width:8rem;height:8rem;background:url(/images/load1.png) no-repeat center center;background-size:cover;
        
        &:nth-child(6) {animation:play 1.5s linear infinite;}
        &:nth-child(7) {background-image:url(/images/load2.png);animation:load2 2.5s linear infinite;}
      }
      cite {font-size:2.4rem;}
    }
  
  }

}
















.do-mod-contextmenu {width:145px;height:auto;padding:8px 0;line-height:35px;font-size:1.3rem;
  li {overflow:hidden;width:100%;height:35px;padding:0 10px;@include ts(background);cursor:default;
    &:hover {background:nth($cp, 1)}
    i {padding:0 3px;font-size:1.6rem;vertical-align:bottom;}
  }
}
.do-layer .layer-box.do-mod-contextmenu__fixed {padding:0}


@keyframes load {
  from {opacity: .5;  transform: scale(1)}
  to {opacity: 0;  transform: scale(1.5)}
}

@keyframes load2 {
  from {transform:rotate(360deg)}
  to {transform:rotate(0deg)}
}

@keyframes play {
  from {transform:rotate(0deg)}
  to {transform:rotate(360deg)}
}