/**
 * author:hesha@alibaba-inc.com
 * data:2022-07-01
 * version:V1.0.0 
 */
 .main{
  width: 100vw;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  position: relative;
}
@media (min-aspect-ratio:10/100) and (max-aspect-ratio:1000/580)  {
  .main{
    display: flex;
    flex-flow: row wrap;
  }
  view.part_1{
    --lister-width:100vw;
    --lister-height:78vh;
    width: var(--lister-width);
    height: var(--lister-height);
    --lister-font-size:var(--base-font-size,32px);

  }
  view.channel_list{
    padding:2vmin 5vmin;
  }
  view.part_2{
    --player-width:100vw;
    --player-height:20vh;
    --lister-width:100vw;
    --lister-height:60vh;
    --lister-font-size:var(--base-font-size,32px);
    --player-title-visible:none;
    --player-singer-visible:none;
    --player-picture-visible:none;
    --player-progress-visible:flex;
    --player-control-visible:flex;
    --player-font-size:var(--base-font-size,32px);

    width: var(--player-width);
    height: var(--player-height);
  }
  view.part_2_player{
    padding:0 5vmin;
  }
}

@media (min-aspect-ratio:100/100) and (max-aspect-ratio:1000/580)  {
  view.part_1{
    --lister-font-size:var(--base-font-size,32px);
    --lister-menu-width:calc(6 * var(--lister-font-size));
  }
}
@media (min-aspect-ratio:1000/330) and (max-aspect-ratio:1000/200)  {
  .main{
    display: flex;
    flex-flow: row nowrap;
  }
  view.part_1{
    --lister-width:130vh;
    --lister-height:100vh;
    width: var(--lister-width);
    height: var(--lister-height);
    --lister-menu-width:6em;
    --lister-font-size:var(--base-font-size,32px);
  }
  view.channel_list{
    padding:5vmin;
  }
  view.part_2{
    --player-width:calc( 100vw - 130vh - 5vmin) ;
    --player-height:100vh;
    --player-font-size:var(--base-font-size,32px);
    --lister-width:calc( 100vw - 215vh) ;
    --lister-height:90vh;
    --lister-font-size:var(--base-font-size,32px);
    width: var(--player-width);
    height: var(--player-height);
  }
  view.part_2_player{
    padding:15vh 80vh 15vh 0;
    position: relative;
  }
  view.lister-show{
    bottom: 5vmin;
  }
  view.player-pic{
    position: absolute;
    top:10vmin;
    right: 0px;
    width: 80vh !important;
    height:80vh;
  }
  view.player-pic image{
    width:64vh;
    height:64vh;
  }
  /* 副架模式  */
  .prefers-right-handle-drive  view.part_1{
    order: 2;
  }
  .prefers-right-handle-drive  view.part_2{
    order: 1;
  }

  .prefers-right-handle-drive  view.part_2_player{
    padding:15vh 0vh 15vh 80vh;
    position: relative;
  }
  .prefers-right-handle-drive view.player-pic{
    position: absolute;
    top:10vmin;
    left: 0px;
    width: 80vh !important;
    height:80vh;
  }
  .prefers-right-handle-drive view.lister-show{
    left:80vh;
  }
  .prefers-right-handle-drive view.lister-hide{
    left:80vh;
  }
}

@media (min-aspect-ratio:1000/580) and (max-aspect-ratio:1000/330) {
  .main{
    display: flex;
    flex-flow: row nowrap;
  }
  view.part_1{
   
    --lister-height:100vh;
    --lister-font-size:var(--base-font-size,32px);
    --lister-menu-width:6em;
    --lister-width:calc(100vh + 6 * var(--lister-font-size) );
    height: var(--lister-height);
    box-sizing: border-box;
  }
  view.channel_list{
    padding:5vmin;
    box-sizing: border-box;
  }
  view.part_2{
    --lister-font-size:var(--base-font-size,32px);
    --player-width:calc( 100vw - 100vh - var(--lister-font-size) * 6 );
    --player-height:100vh;
    --player-font-size:var(--base-font-size,32px);
    --lister-width:calc( 100vw - 105vh - var(--lister-font-size) * 6 );
    --lister-height:90vh;
    width: var(--player-width);
    height: var(--player-height);
  }
  view.lister-show{
    bottom: 5vmin;
    right: 5vmin;
  }
  view.lister-hide{
    right: 5vmin;
  }
  view.part_2_player{
    padding:5vh 5vh 5vh 0;
  }
  view.part_2{
    --player-picture-visible:flex;
  }
  image.player-pic-image{
    height: 35vh;
    width: 35vh;
  }
  /* 针对右侧模式 */
  .prefers-right-handle-drive  view.part_1{
    order: 2;
  }
  .prefers-right-handle-drive  view.part_2{
    order: 1;
  }
  .prefers-right-handle-drive view.part_2_player{
    padding:5vh 0vh 5vh 5vh;
  }
  .prefers-right-handle-drive view.lister-show{
    bottom: 5vmin;
    left: 5vmin;
  }
  .prefers-right-handle-drive view.lister-hide{
    left: 5vmin;
  }
}
/* 当高度超过760 调整字号大小。 */
@media (min-height:760px) and (orientation: landscape ){
  view.part_1{
    --lister-font-size:var(--base-font-size,32px);
  }
  view.part_2{
    --player-font-size:var(--base-font-size,32px);
    --lister-font-size:var(--base-font-size,32px);
  }
}