sonist/css/modules.scss

@charset "UTF-8";
/**
 * 各模块的样式
 * @authors yutent<yutent@doui.cc>
 * @date 2018/12/24 17:11:35
 */

@import "./var.scss";


// 歌手模块
.do-mod-artist {position:relative;display:flex;width:100%;height:100%;

  .filter-box  {flex:0 1 12rem;border-right:.1rem solid  nth($cp, 1);text-align:right;
  
    .item {width:100%;height:2.4rem;padding:0 1.2rem;line-height:2.4rem;color:nth($cgr, 1);
      
      &.active {color:nth($ct,1);font-weight:bold}
      &:hover {padding-right:1.3rem;color:nth($ct,1);}
    }
    .pipe {display:block;width:100%;height:.7rem;}
  
  }

  .list-box  {overflow-y:auto;display:flex;flex-flow:row wrap;flex:1;padding:0 1rem;
  
    .item  {display:flex;justify-content:center;align-items:center;flex:45%;height:7rem;margin:1rem 2.5%;padding:.5rem;background:nth($cp, 1);
      img {flex:0 1 6rem;height:6rem}
      summary {flex:2;padding:0 1rem;}
      strong {font-size:1.6rem}
      p {font-size:1.2rem;color:nth($cgr, 1)}
    }
  
  }

  /* ------------------------------------------------------------ */
  /* --------------------    歌手&专辑样式     -------------------- */
  /* ------------------------------------------------------------ */


  .artist-box  {
    position:absolute;left:0;top:0;z-index:9;width:100%;height:100%;
    background-size:cover;background-repeat:no-repeat;background-position:center center;

    .content {display:flex;flex-flow:column wrap;width:100%;height:100%;padding:1.5rem 2.5rem;background:linear-gradient(to bottom,#fff 2%, rgba(255, 255, 255, .75), #fff 98%);backdrop-filter:blur(1rem);

      
      .name {flex:0 1 3.6rem;font-size:1.4rem;font-style:italic;font-weight:normal;
        a {text-decoration:underline;color:nth($ct, 1)}
        i {color:nth($cgr, 1)}
      }
      .desc {flex:0 1 3rem; font-size:1.2rem;color:nth($cgr, 1);
        span {padding:0 .5rem;text-decoration:underline;color:nth($ct, 1)}
      }
    
      .song-album {flex:1;display:flex;flex-flow:column wrap;}
      .tab {flex:0 1  3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:.1rem solid nth($cp, 2);text-align:center;
  
        .item {flex:0 0 7.5rem;height:3rem;margin:0 .3rem;
        
          &.active {border-bottom:.2rem solid nth($ct, 1);color:nth($ct, 1);}
          &.disabled {opacity:.25}
        }
      }
    
    }
  }


}



// 本地音乐模块
.do-mod-local {flex:1;display:flex;flex-flow:column wrap;
    
  .tabbar {flex:0 1  3rem;padding:0 1rem;line-height:2.9rem;border-bottom:.1rem solid rgba(200, 200, 200, .3);
  
    .refresh {margin-left:1rem;color:nth($ct, 1);text-decoration:underline;
      
      &:hover {color:nth($co, 1)}
      &:active {color:nth($ct, 1);transform:scale(1.1)}
    }
  }

  .table {overflow:auto;flex:1;

    .stat {width:2.6rem;height:2.6rem;line-height:2.6rem;}
    .ac {text-align:center}

    .active {color:nth($ct, 1);background:rgba(255, 255, 255, 0.6);;
      
      i {animation: play 2s infinite linear;}
    }
  }


  .edit-form {position:absolute;left:0;top:0;z-index:90;display:flex;justify-content:center;align-items:center;width:100%;height:100%;
  
  
    .form {position:relative;display:flex;flex-flow:column wrap;flex:0 40rem;width:5rem;height:auto;padding:.5rem 4rem 2rem;background:#fff;box-shadow:0 .5rem  2rem rgba(0, 0, 0, .2);
    
      .section {display:flex;flex:1;justify-content:center;align-items:center;margin:1rem 0;
      
        &.title  {line-height:2;font-size:1.6rem;
          i {position:absolute;right:1rem;top:1rem;color:nth($list: $cr, $n: 1);}
          i:hover {transform:scale(1.2);font-weight:bold}
        }

        .label {flex:0 5rem;padding-right:2rem;color:nth($cgr, 1);text-align:right;}
        .field {flex:1}
      }
    
    }
  
  }


}



// 搜索&试听模块
.do-mod-search {flex:1;display:flex;flex-flow:column wrap;
    
  .tabbar {flex:0 1  3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:.1rem solid nth($cp, 2);text-align:center;
  
    .item {flex:0 0 7.5rem;height:3rem;margin:0 .3rem;border:.1rem solid rgba(200, 200, 200, .3);background:rgba(255, 255, 255, .3);color:nth($cp, 3);

    
      &.active {border-bottom-color:transparent;color:nth($cd, 1);}
      i {color:nth($cr, 1)}
    }
  }

  .table {overflow:auto;flex:1;

    .active {color:nth($ct, 1)}
    .ac {text-align:center}
  }


}



.do-mod-profile  {overflow-y:auto;padding:0 3rem;

  .title {position:relative;width:100%;height:6rem;line-height:6rem;border-bottom:.1rem solid nth($cp, 3);font-size:1.8rem;
  
    .save {position:absolute;bottom:.3rem;right:0;}
  }

  .block {display:flex;justify-content:center;align-items:center;width:100%;padding:2rem  0;border-bottom:.1rem solid nth($cp, 1);
  
    .label {flex:0 1 20rem;}
    .field {flex:1;display:flex;align-items:center;}
    .do-radio {margin-right:2rem}
    .desc {line-height:2;
      p {margin-top:1.5rem;}
    }
  }
}























.artist-desc-layer {width:60rem;height:30rem;

  .layer-content {overflow-y:auto;height:85%!important;padding:1rem;line-height:2;text-indent:2em;}
}