.theme-light{
  background-color: var(--l-bgc-1);
  .xgplayer-skin-default video{
    background-color: var(--l-bgc-2);
  }
  .el-pagination{
    color: var(--l-fc-1);
    .el-pagination__total, .el-pagination__jump, .el-input__inner{
      color: var(--l-fc-1);
    }
    .el-pager{
      .number:hover{
        color: var(--l-c-8);
      }
      .active{
        color: var(--l-c-9);
      }
    }
    .more, .btn-next, .btn-prev{
      &:hover{
        color: var(--l-c-8);
      }
    }
  }
  .zy-select{
    color: var(--l-fc-1);
    background-color: var(--l-bgc-1);
    box-shadow: var(--l-bsc);
    &:hover{
      box-shadow: var(--l-bsc-hover);
    }
    .vs-options{
      background-color: var(--l-bgc-1);
      box-shadow: var(--l-bsc);
      ul{
        li{
          &:hover{
            background-color: var(--l-c-1);
          }
          &.active{
            background-color: var(--l-c-3);
          }
        }
      }
    }
  }
  .zy-table{
    color: var(--l-fc-2);
    .tHead{
      background-color: var(--l-bgc-1);
      border-bottom-color: var(--l-c-3);
    }
    .tBody{
      border-bottom-color: var(--l-c-3);
      ul{
        li{
          border-bottom-color: var(--l-c-2);
          &:hover{
            animation: l-tableHoverAni 0.2s ease both;
            @keyframes l-tableHoverAni {
              to{
                box-shadow: var(--l-bsc-hover);
              }
            }
          }
          span{
            &.btn:hover{
              color: var(--l-fc-3)
            }
          }
        }
      }
    }
    .tFooter{
      .tFooter-span{
        color: var(--l-fc-1);
      }
    }
  }
  .zy-scroll{
    &:hover{
      &::-webkit-scrollbar-thumb {
        box-shadow: var(--l-bsc-scroll);
        background: var(--l-c-3);
      }
      &::-webkit-scrollbar-track {
        box-shadow: var(--l-bsc-scroll);
        background: var(--bgc);
      }
    }
  }
  .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{
        svg{
          stroke: var(--l-c-0);
          stroke-width: 2;
          fill: var(--l-c-2);
        }
      }
    }
  }
  .frame{
    span{
      &.min{
        background-color: #ffbe2a;
      }
      &.close{
        background-color: #ff5f56;
      }
    }
  }
  .detail{
    color: var(--l-fc-1);
    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_urls, .mp4_urls{
          border-color: var(--l-c-2);
        }
        .m3u8_urls, .mp4_urls{
          .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{
    .top{
      .search{
        background-color: var(--l-bgc-1);
        box-shadow: var(--l-bsc);
        &:hover{
          box-shadow: var(--l-bsc-hover);
        }
        svg{
          stroke: #823aa099;
          stroke-width: 1;
          fill: none;
        }
        .search-box{
          background-color: none;
        }
        &.active{
          box-shadow: var(--l-bsc-hover);
          svg{
            stroke-width: 1.5;
            fill: var(--l-c-2);
          }
        }
        input{
          color: var(--l-fc-1);
        }
      }
    }
    .middle{
      background-color: var(--l-bgc-1);
      box-shadow: var(--l-bsc);
    }
  }
  .play{
    background-color: var(--l-bgc-1);
    box-shadow: var(--l-bsc);
    .title{
      color: var(--d-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);
            }
          }
        }
      }
    }
    .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);
            }
          }
        }
        .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);
              }
            }
          }
        }
      }
    }
    .play-mask{
      background-color: var(--l-bgc-1);
      color: var(--l-fc-1);
    }
  }
  .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);
        }
      }
    }
    .theme{
      .title{
        color: var(--l-fc-1);
      }
      .theme-item{
        box-shadow: var(--l-bsc);
        &: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);
      }
    }
  }
  .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);
    }
  }
}
