ZY-Player/src/assets/scss/theme/light.scss

.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-input{
    color: var(--l-fc-1);
    background-color: var(--l-bgc-1);
    input{
      color: var(--l-fc-1);
      background-color: var(--l-bgc-1);
    }
  }
  .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);
              }
            }
          }
        }
      }
    }
  }
  .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(--l-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);
              }
            }
          }
        }
      }
    }
  }
  .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);
  }
  // Page of list using table and picture
  .listpage{
    color: var(--l-fc-2);
    .listpage-header{
      border-bottom-color: var(--l-c-3);
      .btn{
        &:hover{
          color: var(--l-fc-3)
        }
      }
      .el-button{
        background-color: var(--l-bgc-2);
        color: var(--l-fc-2);
        &:hover{
          color: var(--l-fc-3)
        }
      }
      .el-input{
        input{
          background-color: var(--l-bgc-1);
          border: 1px solid var(--l-bgc-1);
          color: var(--l-fc-2);
        }
      }
      .el-select-dropdown{
        color: var(--l-fc-1);
        border: none;
        background-color: var(--l-bgc-1);
        box-shadow: var(--l-bsc);
      }
      .el-select-dropdown__item{
        color: var(--l-fc-1);
        border: none;
        background-color: var(--l-bgc-1);
      }
      .el-select-dropdown__item.hover, .el-select-dropdown__item.selected{
        color: var(--l-fc-1);
        background-color: var(--l-bgc-2);
        box-shadow: var(--l-bsc);
      }
      .zy-autocomplete {
        color: var(--l-fc-1);
        background-color: var(--l-bgc-1);
        box-shadow: var(--l-bsc);
        li {
          color: var(--l-fc-1);
          background-color: var(--l-bgc-1);
          &:hover{
            background-color: var(--l-bgc-2);
          }
        }
      }
    }
    .listpage-body{
      color: var(--l-fc-1);
      background-color: var(--l-bgc-1);
      &: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);
        }
      }
      .show-table{
       /* 设置el-table的样式*/
        .el-table{
          color: var(--l-fc-1);
          background-color: var(--l-bgc-1);
        }
        .el-table__body-wrapper{
          &: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);
            }
          }
        }
       .el-input{
          input{
            background-color: var(--l-bgc-2);
            border: 1px solid var(--l-bgc-2);
            color: var(--l-fc-1);
          }
        }
        .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
          color: var(--l-fc-1);
          background-color: var(--l-bgc-1);
          border-bottom-color: var(--l-c-2);
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
          background-color: var(--l-bgc-2);
        }
        .el-button{
          color: var(--l-fc-1);
          &:hover{
            color: var(--l-fc-3)
          }
        }
      }
      .show-picture{
        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);
          }
        }
      }
    }
  }
}