/*
  昼夜模式适配 
  默认使用黑夜模式 weibo flag 类型：
  1-新,2-热,4-爆,16-沸 
*/

:root{
  --flag_color_new:hsla(60,100%,30%,1);
  --flag_color_hot:hsla(25,80%,50%,1);
  --flag_color_bao:hsla(350,74%,40%,1);
  --flag_color_fei:hsla(300,67%,36%,1);

  --brand-main-color:#F59800;
}
/* 白天模式 */
@media (prefers-color-scheme:light) { 
  :root{
    --flag_color_new:hsla(60,100%,35%,1);
    --flag_color_hot:hsla(25,100%,55%,1);
    --flag_color_bao:hsla(350,88%,46%,1);
    --flag_color_fei:hsla(300,67%,42%,1);
    --brand-main-color:#E21C1E;
  }
}
.flag1{
  background:var(--flag_color_new);
  color: #fff;
}
.flag2{
  background: var(--flag_color_hot);
  color: #fff;
}
.flag4{
  background: var(--flag_color_bao);
  color: #fff;
}
.flag16{
  background: var(--flag_color_fei);
  color: #fff;
}
.flag1::before{
  content: '新';
}
.flag2::before{
  content: '热';
}
.flag4::before{
  content: '爆';
  
}
.flag16::before{
  content: '沸';
}

/*
.hs-lister-listItem:hover .li-big-text,.hs-lister-listItem:active .li-big-text{
  opacity: 0.7!important;
}
*/

/* 横竖屏适配方案 */
.main{
  display: flex;
  color:var(--font_color);
  background: var( --bg_color);
}
.beian{
  position: absolute;
  left: 0;
  margin: 0 auto;
  font-size: 2vmin;
  bottom: 2.5vmin;
  width: 100%;
  text-align: center;
  opacity: 0.5;
}


:root{
  --lister-width:50vmax;
  --lister-height:100vmin;
  --lister-font-size:30px;
  --player-width:calc( 100vw - var(--lister-width));
  --player-height:100vmin;
  --player-font-size:30px;

}

@media (min-aspect-ratio:10/100) and (max-aspect-ratio:1000/749)  {

  .main{
    flex-wrap: wrap;
    --lister-width:calc( 100vw - 0vmin );
    --lister-height:calc( 65vh );
    --lister-font-size:30px;
    --player-width:calc( 100vw);
    --player-height:calc( 30vh  );
    --player-font-size:30px;
    --player-title-visible:flex;
    --player-singer-visible:none;
    --player-picture-visible:none;
    --player-progress-visible:flex;
    --player-control-visible:flex;
  }
  view.listerView{
    padding: 5vmin;
    padding-bottom: 0;
  }
  view.playerView{
    padding: 5vmin; 
  }
  .beian{
    font-size: 1vmin;
 
  }

}
@media (min-aspect-ratio:20/100) and (max-aspect-ratio:1000/749) and (max-height:670px){
  .main{
    --lister-font-size:25px;
    --player-font-size:30px;
    --player-title-visible:none;
    --player-progress-visible:none;
  }
}

@media (min-aspect-ratio:200/1000) and (max-aspect-ratio:660/1000) {
  .main{
    --lister-font-size:4vmin;
    --player-progress-visible:flex;
    --player-font-size:5vmin;  
  }

}

/* 横屏适配的方案 */

/* 横屏适配情况下，当高度不够高的时候*/
@media (min-aspect-ratio:1000/750) and (max-aspect-ratio:1000/400) and (max-height:670px){
  .player-pic{
    
  }
}

/* 适配 4:3 到 10:4 的屏，将以两列方式布局。*/
@media (min-aspect-ratio:1000/750) and (max-aspect-ratio:1000/400)  {

  .main{
    
    --lister-width:calc(55vw);
    --lister-height:100vmin;
    --lister-font-size:30px;

    --player-width:calc( 45vw + 10vmin);
    --player-height:100vmin;
    --player-font-size:30px;
    

  }
  view.listerView{
    padding: 10vmin;
    padding-right: 0;
   
    position: relative;
    left: 0;

  }
  view.playerView{
    padding: 10vmin;
  
  }
  view.player-pic image{
    width: 30vh;
    height: 30vh;
  }
}

@media (min-aspect-ratio:1000/399) and (max-aspect-ratio:1000/250)  {
  .main{
    --lister-width:calc(40vw - 0vmin );
    --lister-height:100vmin;
    --lister-font-size:30px;

    --player-width:calc( 60vw - 0vmin);
    --player-height:100vmin;
    --player-font-size:30px;

  }
  view.listerView{
    padding: 10vmin;
    padding-right: 0;
  }
  view.playerView{
    padding: 10vmin 90vmin 10vmin 10vmin;
    position: relative;
    
    
  }
  view.player-pic{
    position: absolute;
    right: 5vmin;
    top:10vmin;
    width: 80vmin;
    height: 80vmin;
    align-items:center;
    
  }
  view.player-pic::before{
    height: 70vmin;
    width: 70vmin;
    border-radius: 10%;
    border:10px solid rgba(128,128,128,0.1);
    
    position: absolute;
   }
  view.player-pic image{
    height: 68vmin;
    width: 68vmin;
    border-radius: 10%;
    background-color: rgba(128,128,128,0.05);
  }

}


@media (min-aspect-ratio:1000/200) and (max-height:300px){
  view.listerView{
    display: none;
  }
  :root{
    --lister-width:0px;
    --lister-height:0px;
    --lister-font-size:30px;
    --player-width:100vw;
    --player-height:100vh;
    --player-font-size:30px;
    --player-title-visible:none;
    --player-singer-visible:none;
    --player-picture-visible:none;
    --player-progress-visible:none;

  }
}