.theme-light{
  background-color: var(--l-bgc-1);
  .zy-select{
    color: var(--l-fc-1);
    background-color: var(--l-bgc-1);
    box-shadow: var(--l-bsc);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    &:hover{
      box-shadow: var(--l-bsc-hover);
    }
    .vs-options{
      background-color: var(--l-bgc-1);
      box-shadow: var(--l-bsc);
      ul{
        overflow-y: scroll;
        li{
          &:hover{
            background-color: var(--l-c-1);
          }
          &.active{
            background-color: var(--l-c-3);
          }
        }
      }
    }
    .vs-input{
      input{
        color: var(--l-fc-1);
        &::-webkit-input-placeholder{
          color: var(--l-fc-1);
        }
      }
    }
  }
  .zy-checkbox{
    color: var(--l-fc-1);
  }
  .zy-table{
    color: var(--l-fc-2);
    .tHeader{
      border-bottom-color: var(--l-c-3);
      .btn{
        &:hover{
          color: var(--l-fc-3)
        }
      }
    }
    .tBody{
      border-bottom-color: var(--l-c-3);
      ul{
        li{
          border-bottom-color: var(--l-c-2);
          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
          &:hover{
            box-shadow: var(--l-bsc-hover);
          }
          span{
            &.btn:hover{
              color: var(--l-fc-3)
            }
          }
        }
      }
    }
  }
  .zy-scroll{
    &:hover{
      &::-webkit-scrollbar-thumb {
        box-shadow: var(--l-bsc-scroll);
        background: var(--l-c-5);
      }
      &::-webkit-scrollbar-track {
        box-shadow: var(--l-bsc-scroll);
        background: var(--l-bgc-1);
      }
    }
  }
  .zy-loading{
    .loader{
      color: var(--l-c-3);
    }
  }
  .zy-body{
    background-color: var(--l-bgc-2);
  }
  .aside{
    .zy-svg{
      svg{
        stroke: var(--l-c-0);
      }
      &:hover{
        background-color: var(--l-c-2);
      }
      &.active{
        background-color: var(--l-bgc-2);
        svg{
          stroke: var(--l-c-0);
          stroke-width: 2;
          fill: var(--l-c-2);
        }
      }
    }
  }
  .frame{
    span{
      &.min{
        background-color: #32dc36;
      }
      &.max{
        background-color: #ffbe2a;
      }
      &.close{
        background-color: #ff5f56;
      }
      &.top{
        background-color: #f3bab7;
      }
    }
  }
  .detail{
    color: var(--l-fc-1) !important;
    background-color:var(--l-bgc-1);
    box-shadow: var(--l-bsc-2);
    .detail-content{
      .detail-close{
        svg{
          stroke-width: 1;
          stroke: var(--l-c-8);
          &:hover{
            stroke-width: 2px;
            stroke: var(--l-c-9);
          }
        }
      }
      .detail-body{
        .info, .desc, .m3u8, .operate{
          border-color: var(--l-c-2);
        }
        .operate{
          span{
            &:hover{
              color: var(--l-fc-2);
            }
          }
        }
        .m3u8{
          .box{
            span{
              border-color: var(--l-c-5);
              &:hover{
                color: var(--l-fc-2);
                background-color: var(--l-c-1);
                border-color: var(--l-c-8);
              }
            }
          }
        }
      }
    }
  }
  .film{
    .body{
      background-color: var(--l-bgc-1);
      box-shadow: var(--l-bsc);
      .show-img{
        color: var(--l-fc-1);
        .card{
          background-color: var(--l-bgc-1);
          box-shadow: var(--l-bsc);
          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
          &:hover{
            box-shadow: var(--l-bsc-hover);
          }
        }
      }
    }
  }
  .play{
    background-color: var(--l-bgc-1);
    box-shadow: var(--l-bsc);
    .title{
      color: var(--l-fc-1);
      .right {
        svg {
          fill: var(--l-fc-1);
        }
      }
    }
    .box{
      .more{
        span{
          svg{
            stroke: var(--l-c-5);
            stroke-width: 1;
            fill: none;
          }
          &:hover{
            svg{
              stroke: var(--l-c-8);
              stroke-width: 1.5;
              fill: var(--l-c-2);
            }
          }
          &.active{
            svg{
              stroke: var(--l-c-9);
              stroke-width: 2;
              fill: var(--l-c-3);
            }
          }
          &.last-tip {
            color: var(--l-fc-1);
            font-size: 14px;
          }
        }
      }
    }
    .list{
      border: 1px solid var(--l-c-3);
      background-color: var(--l-bgc-2);
      .list-top{
        color: var(--l-fc-2);
        .list-top-close{
          svg{
            stroke: var(--l-c-5);
            stroke-width: 1;
            fill: none;
            &:hover{
              stroke: var(--l-c-8);
              stroke-width: 1.5;
              fill: var(--l-c-2);
            }
          }
        }
      }
      .list-body{
        .list-item{
          li{
            color: var(--l-fc-1);
            &.active{
              background-color: var(--l-c-2);
              color: var(--l-fc-3);
            }
            &:hover{
              background-color: var(--d-c-3);
            }
          }
        }
        .list-history{
          li{
            .title{
              color: var(--l-fc-1);
            }
            &.active{
              background-color: var(--l-c-2);
              .title{
                color: var(--l-fc-3);
              }
            }
            &:hover{
              background-color: var(--l-c-3);
              .detail-delete{
                display: inline-block;
                color: var(--l-fc-2);
              }
            }
            .detail-delete{
              &:hover{
                background-color: var(--l-c-2);
              }
            }
          }
        }
      }
    }
  }
  .star{
    background-color: var(--l-bgc-1);
    box-shadow: var(--l-bsc);
  }
  .setting{
    background-color: var(--l-bgc-1);
    box-shadow: var(--l-bsc);
    .info{
      a{
        color: var(--l-fc-1);
        &:hover{
          color: var(--l-fc-2);
        }
      }
    }
    .view, .search, .shortcut, .site{
      .title{
        color: var(--l-fc-1);
      }
    }
    .theme{
      .title{
        color: var(--l-fc-1);
      }
      .theme-item{
        box-shadow: var(--l-bsc);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        &:hover{
          box-shadow: var(--l-bsc-hover);
          .theme-name{
            color: var(--l-fc-2)
          }
        }
        .theme-name{
          color: var(--l-fc-1);
        }
      }
    }
    .qrcode{
      .title{
        color: var(--l-fc-1);
      }
      .qrcode-item{
        box-shadow: var(--l-bsc);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        &:hover{
          box-shadow: var(--l-bsc-hover);
        }
      }
    }
  }
  .share{
    background-color: var(--l-bgc-1);
    color: var(--l-fc-1);
    border: 1px solid var(--l-c-8);
    .right{
      color: var(--l-fc-1);
      .tops{
        color: var(--l-fc-2);
      }
    }
    .share-mask{
      background-color: var(--l-bgc-1);
    }
  }
  .history{
    background-color: var(--l-bgc-1);
    box-shadow: var(--l-bsc);
  }
}
