ai-manus/chat-client/library/styles/background/tzl.scss

/**
 * @description 黑
 */

body.vab-theme-tzl {
  $base-menu-background: #0032a0;

  .el-scrollbar__bar.is-horizontal {
    height: 18px;
  }

  .el-scrollbar__bar.is-vertical {
    width: 18px;
  }

  @mixin container {
    color: var(--el-color-white) !important;
    background: $base-menu-background !important;
  }

  @mixin active {
    &:hover {
      color: var(--el-color-white) !important;
      background-color: var(--el-color-primary) !important;
    }

    &.is-active {
      color: var(--el-color-white) !important;
      background-color: var(--el-color-primary) !important;
    }
  }

  .logo-container-vertical,
  .logo-container-horizontal,
  .logo-container-comprehensive,
  .logo-container-hv,
  .logo-container-float {
    @include container;
  }

  .logo-container-column {
    .logo {
      @include container;
    }
  }

  .vab-column-bar-container.el-scrollbar {
    .el-tabs {
      .el-tabs__nav-wrap.is-left {
        @include container;
      }

      .el-tabs__nav {
        @include container;
      }

      .el-tabs__item.is-active {
        background: var(--el-color-primary) !important;
      }
    }

    .el-menu {
      .el-menu-item.is-active,
      .el-sub-menu__title.is-active,
      .el-menu-item:hover,
      .el-sub-menu__title:hover {
        i {
          color: var(--el-color-primary) !important;
        }

        color: var(--el-color-primary) !important;
        background-color: var(--el-color-primary-light-9) !important;
      }
    }
  }

  .vab-column-bar-container-card.el-scrollbar {
    .el-tabs {
      .el-tabs__item.is-active {
        background: transparent !important;

        .vab-column-grid {
          background: var(--el-color-primary) !important;
        }
      }
    }
  }

  .vab-column-bar-container-arrow.el-scrollbar {
    .el-tabs {
      .el-tabs__item.is-active {
        background: transparent !important;

        .vab-column-grid {
          background: transparent !important;
        }
      }
    }
  }

  .vab-layout-float,
  .vab-layout-common,
  .vab-layout-vertical,
  .vab-layout-horizontal {
    .el-menu {
      @include container;

      .el-sub-menu .el-sub-menu__title,
      .el-menu-item {
        @include container;
      }
    }

    .vab-side-bar,
    .comprehensive-bar-container {
      @include container;

      .el-menu-item {
        @include active;
      }
    }
  }
  .vab-layout-comprehensive,
  .vab-layout-hv {
    .vab-layout-header {
      &-header {
        @include container;
      }
    }
    .el-menu,
    .vab-side-bar,
    .comprehensive-bar-container {
      background: var(--el-color-white) !important;
      .el-sub-menu .el-sub-menu__title,
      .el-menu-item {
        color: var(--el-color-black) !important;
      }
      .el-menu-item.is-active,
      .el-sub-menu__title.is-active,
      .el-menu-item:hover,
      .el-sub-menu__title:hover {
        i {
          color: var(--el-color-primary) !important;
        }
        color: var(--el-color-primary) !important;
        background-color: var(--el-color-primary-light-9) !important;
        &:after {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          width: 2px;
          content: '';
          background-color: var(--el-color-primary);
          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); // 修正时间单位语法
        }
      }
    }
    .vab-nav {
      @include container;
      .fold-unfold {
        @include container;
      }
      .el-tabs__item {
        color: var(--el-color-white) !important;
      }
      .el-tabs__item.is-active,
      .el-tabs__item:hover {
        color: var(--el-color-white) !important;
      }

      .el-tabs__active-bar {
        background-color: var(--el-color-white) !important;
      }
      .right-panel {
        .user-name {
          color: var(--el-color-white);
        }

        .user-name + i {
          color: var(--el-color-white);
        }
        [class*='ri-'] {
          color: var(--el-color-white);
        }
      }
    }
  }
  .vab-layout-float {
    .el-scrollbar__view .el-menu--collapse.el-menu li.el-sub-menu.is-active {
      .el-sub-menu__title {
        background-color: transparent !important;
      }

      > .el-sub-menu__title {
        background-color: var(--el-color-primary) !important;
      }
    }
  }

  .vab-header {
    @include container;

    .vab-main {
      @include container;

      .right-panel {
        .el-menu {
          &--horizontal {
            .el-sub-menu .el-sub-menu__title,
            .el-menu-item {
              @include active;
            }
          }
        }
        [role='menubar'].el-menu--horizontal {
          > .el-sub-menu.is-active[tabindex='0'] {
            > .el-sub-menu__title {
              color: var(--el-color-white) !important;
              background-color: var(--el-color-primary) !important;
            }
          }
        }
      }
    }
  }

  .vab-tabs {
    &-more {
      &-active,
      &:hover {
        .vab-tabs-more-icon {
          .box:before,
          .box:after {
            background: var(--el-color-primary) !important;
          }
        }
      }
    }

    .vab-tabs-content-card {
      .el-tabs__header {
        .el-tabs__item {
          &.is-active {
            color: var(--el-color-primary) !important;
            background: var(--el-color-primary-light-9) !important;
            border: 1px solid var(--el-color-primary) !important;
          }

          &:hover {
            border: 1px solid var(--el-color-primary) !important;
          }
        }
      }
    }

    .vab-tabs-content-smart {
      .el-tabs__header {
        .el-tabs__item {
          &.is-active {
            background: var(--el-color-primary-light-9) !important;
          }

          &:after {
            background-color: var(--el-color-primary) !important;
          }

          &:hover {
            background: var(--el-color-primary-light-9) !important;
          }
        }
      }
    }

    .vab-tabs-content-smooth {
      .el-tabs__header {
        .el-tabs__item {
          &.is-active {
            color: var(--el-color-primary) !important;
            background: var(--el-color-primary-light-9) !important;

            &:hover {
              color: var(--el-color-primary) !important;
              background: var(--el-color-primary-light-9) !important;
            }
          }

          &:hover {
            color: var(--el-color-black) !important;
          }
        }
      }
    }
  }

  .vab-nav {
    .el-tabs__item.is-active,
    .el-tabs__item:hover {
      color: var(--el-color-primary) !important;
    }

    .el-tabs__active-bar {
      background-color: var(--el-color-primary) !important;
    }
  }

  #nprogress {
    .bar {
      background: var(--el-color-primary) !important;
    }

    .peg {
      box-shadow:
        0 0 10px var(--el-color-primary),
        0 0 5px var(--el-color-primary) !important;
    }
  }
}