sonist/src/css/app.scss

@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:rgba(0, 0, 0, .2);

  // 标题栏样式
  .title-bar {
    position:relative;
    display:flex;
    align-items:center;
    z-index:9;
    height:26px;
    
    .btn-box {
      display:inline-flex;;
      width:auto;height:12px;padding:0 8px;
  
      .item {
        display:inline-flex;
        width:12px;height:12px;
        margin:0 3px;
        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);}
      }
    }
 
  }

  .main-body {
    overflow:hidden;
    flex:1;
    display: flex;
    justify-content:space-between;

    .aside {
      width:180px;
      height:100%;
      padding:0 16px;
      line-height:2;

      fieldset {
        border:0;
        color:#ebebeb;
        font-size:12px;

        legend {
          font-size:18px;
          background:linear-gradient(to bottom,#58ffdf 50%, #459888);
          background-clip:text;
          color:transparent;
        }

        .item {
          padding-left:12px;
          line-height:1.75;
        }

        button {
          width:42px;height:16px;
          margin-left:12px;
          font-size:10px;
          border:0;
          border-radius:9px;
          background:nth($cb, 1);
          color:#fff;
        }
      }
    }

    .song-box {
      width:618px;

      .preview {
        position:relative;
        display:flex;
        align-items:center;
        width:100%;
        height:99px;
        padding-bottom:16px;
        border-bottom:1px solid rgba(200, 200, 200, .1);

        .album {
          width:80px;height:80px;
          img {width:100%;height:100%;}
        }

        .info {
          display:flex;
          flex-direction:column;
          justify-content:center;
          width:320px;
          margin-left:32px;
  
          strong {
            height:36px;
            font-size:18px;
            font-weight: normal;
          }
  
          cite {
            font-size:12px;
            font-style:normal;
            
          }
          p {font-size:12px;color:#bdbdbd;}
        }

        .duration {
          position:absolute;
          right:32px;
          top:16px;
          font-size:12px;
          color:#bdbdbd;
          
        }
        .total {
          position:absolute;
          right:32px;
          bottom:16px;
          font-size:16px;
          font-weight:bold;
          font-family:Raleway;
        }
      }

      .scroll-box {
        width:100%;
        height:269px;
        padding:16px 6px;
        border-top:1px solid rgba(32, 32, 32, .1);
      }

      .list {
        height:237px;
        font-size:12px;

        .item {
          display:flex;
          align-items:center;
          height:26px;
          padding:0 12px;
          border-radius:13px;

          .idx {
            position:relative;
            width:64px;
            padding-left:16px;
            font-size:12px;
            font-family:Raleway;
          }
          
          .name {
            overflow:hidden;
            flex:1;
          }
          .artist {
            overflow:hidden;
            width:128px;
            margin-left:12px;
          }
          .duration {
            width:42px;
            margin-left:12px;
          }

          &.on {
            color:#feac23;
            font-size:14px;

            .idx::before {
              position:absolute;
              left:0;top:3px;
              font-size:10px;
              content:"▶ ";
            }
          }

          &.active, &:hover {
            color:#58ffdf;
            background: rgba(29, 77, 68, 0.15);
          }
        }
      }
    }
  }





  .play-bar {
    height:66px;width:100%;
    background:rgba(255, 255, 255, .25);
    color:#fff;

    .stat-bar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      height:20px;
      color: #ebebeb;

      .time {
        width:42px;
        margin:0 6px;
        text-align:center;
        font-size:12px;
      }

      .progress {
        flex:1;
        display:flex;
        align-items: flex-start;
        height:3px;
        background: #b2cfe3;
      }

      .thumb {
        width:8%;
        height:3px;
        background:#58ffdf;
      }
    }

    .ctrl-box {
      display:flex;
      height:46px;

      .holder {
        flex:1;
      }

      .info {
        display:flex;
        flex-direction:column;
        justify-content:center;
        width:320px;
        height:42px;
        padding-left:12px;
        line-height:1.25;

        strong {
          font-size:14px;
          font-weight: 500;
        }

        cite {
          font-size:12px;
          font-style:normal;
          color:#aeaeae;
        }
      }
      
      .play-btn {
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:120px;
        height:38px;
        margin-left:32px;
        text-align:center;

        .item {
          width:28px;height:28px;
          line-height:28px;
          border-radius:50%;
          background:rgba(255, 255, 255, .1);
          fill: currentColor;
          cursor:pointer;
          transition:color .1s ease-in-out;

          &.on {
            width:36px;height:36px;
            line-height:36px;
            font-size:16px;
          }

          &:hover {
            color: #58ffdf;
          }
          &:active {
            color: #46d1b8;
          }
        }
      }

      .play-action {
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:64px;
        height:38px;
        margin-right:16px;
        font-size:12px;

        .item {
          width:28px;height:28px;
          line-height:28px;
          fill: currentColor;
          transition:color .1s ease-in-out;
          cursor:pointer;

          &:hover {
            color: #58ffdf;
          }
          &:active {
            color: #46d1b8;
          }
        }
      }
    }
  }


}