ai-manus/chat-client/library/styles/background/tech-dark.scss

/**
 * @description 深色科技风主题
 */

body.vab-theme-dark {
  $base-menu-background: #0a1929;
  $tech-primary: #00d4ff;
  $tech-bg-primary: #0a1929;
  $tech-bg-secondary: #1a2332;
  $tech-border: rgba(0, 212, 255, 0.3);

  // 全局背景
  background: linear-gradient(135deg, #0a1929 0%, #1a2332 50%, #0a1929 100%);

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

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

  // 滚动条样式
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(10, 25, 41, 0.5);
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, $tech-primary 0%, rgba(0, 212, 255, 0.5) 100%);
    border-radius: 4px;

    &:hover {
      background: $tech-primary;
    }
  }

  // 卡片样式
  .el-card {
    background: rgba(26, 35, 50, 0.8) !important;
    border: 1px solid $tech-border !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1) !important;

    .el-card__header {
      background: rgba(10, 25, 41, 0.5) !important;
      border-bottom: 1px solid $tech-border !important;
      color: #ffffff !important;
    }
  }

  // 输入框样式
  .el-input__wrapper {
    background-color: rgba(10, 25, 41, 0.6) !important;
    border: 1px solid $tech-border !important;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.1) !important;

    &:hover,
    &.is-focus {
      border-color: $tech-primary !important;
      box-shadow: 0 0 12px rgba(0, 212, 255, 0.3) !important;
    }

    .el-input__inner {
      color: #ffffff !important;

      &::placeholder {
        color: rgba(168, 216, 234, 0.5) !important;
      }
    }
  }

  .el-textarea__inner {
    background-color: rgba(10, 25, 41, 0.6) !important;
    border: 1px solid $tech-border !important;
    color: #ffffff !important;

    &:hover,
    &:focus {
      border-color: $tech-primary !important;
      box-shadow: 0 0 12px rgba(0, 212, 255, 0.3) !important;
    }

    &::placeholder {
      color: rgba(168, 216, 234, 0.5) !important;
    }
  }

  // 按钮样式
  .el-button {
    &--primary {
      background: linear-gradient(135deg, $tech-primary 0%, #0a8bff 100%) !important;
      border-color: $tech-primary !important;
      color: #ffffff !important;
      box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important;

      &:hover {
        background: linear-gradient(135deg, #00e5ff 0%, #1a9bff 100%) !important;
        box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5) !important;
        transform: translateY(-2px);
      }
    }

    &--default {
      background: rgba(26, 35, 50, 0.8) !important;
      border: 1px solid $tech-border !important;
      color: #a8d8ea !important;

      &:hover {
        border-color: $tech-primary !important;
        color: $tech-primary !important;
        background: rgba(0, 212, 255, 0.1) !important;
      }
    }
  }

  // 表格样式
  .el-table {
    background-color: transparent !important;

    th.el-table__cell {
      background-color: rgba(10, 25, 41, 0.8) !important;
      border-bottom: 2px solid $tech-border !important;
      color: $tech-primary !important;
      font-weight: 600;
    }

    tr {
      background-color: rgba(26, 35, 50, 0.6) !important;

      &:hover > td {
        background-color: rgba(0, 212, 255, 0.1) !important;
      }
    }

    td.el-table__cell {
      border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
      color: #040404 !important;
    }
  }

  // 对话框样式
  .el-dialog {
    background: linear-gradient(135deg, rgba(10, 25, 41, 0.98) 0%, rgba(26, 35, 50, 0.98) 100%) !important;
    border: 1px solid $tech-border !important;
    box-shadow: 0 10px 40px rgba(0, 212, 255, 0.2) !important;

    .el-dialog__header {
      border-bottom: 1px solid $tech-border !important;

      .el-dialog__title {
        color: $tech-primary !important;
        font-weight: 600;
      }

      .el-dialog__close {
        color: #a8d8ea !important;

        &:hover {
          color: $tech-primary !important;
        }
      }
    }

    .el-dialog__body {
      color: #e8f4f8 !important;
    }
  }

  // 下拉菜单样式
  .el-dropdown-menu {
    background: rgba(10, 25, 41, 0.98) !important;
    border: 1px solid $tech-border !important;
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.2) !important;

    .el-dropdown-menu__item {
      color: #a8d8ea !important;

      &:hover {
        background: rgba(0, 212, 255, 0.1) !important;
        color: $tech-primary !important;
      }
    }
  }

  // 选择器样式
  .el-select-dropdown {
    background: rgba(10, 25, 41, 0.98) !important;
    border: 1px solid $tech-border !important;
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.2) !important;

    .el-select-dropdown__item {
      color: #a8d8ea !important;

      &:hover,
      &.is-selected {
        background: rgba(0, 212, 255, 0.1) !important;
        color: $tech-primary !important;
      }
    }
  }

  // 全屏布局特定样式
  .vab-layout-fullscreen {
    background: linear-gradient(135deg, #0a1929 0%, #1a2332 50%, #0a1929 100%);

    .app-main-container {
      background: transparent;
    }
  }

  // 主内容区域
  .vab-app-main {
    background: transparent !important;
  }

  // 文本颜色
  .el-text {
    color: #e8f4f8 !important;
  }

  // 消息提示样式
  .el-message {
    background: rgba(10, 25, 41, 0.95) !important;
    border: 1px solid $tech-border !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.2) !important;

    .el-message__content {
      color: #e8f4f8 !important;
    }

    &.el-message--success {
      border-color: rgba(0, 255, 136, 0.5) !important;
    }

    &.el-message--error {
      border-color: rgba(255, 71, 87, 0.5) !important;
    }

    &.el-message--warning {
      border-color: rgba(255, 165, 0, 0.5) !important;
    }
  }

  // 通知样式
  .el-notification {
    background: rgba(10, 25, 41, 0.95) !important;
    border: 1px solid $tech-border !important;
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.3) !important;

    .el-notification__title {
      color: $tech-primary !important;
    }

    .el-notification__content {
      color: #e8f4f8 !important;
    }
  }

  // 加载动画
  .el-loading-mask {
    background-color: rgba(10, 25, 41, 0.8) !important;

    .el-loading-spinner {
      .circular {
        stroke: $tech-primary !important;
      }

      .el-loading-text {
        color: $tech-primary !important;
      }
    }
  }

  // 分页器样式
  .el-pagination {
    .el-pager li {
      background: rgba(26, 35, 50, 0.6) !important;
      color: #a8d8ea !important;
      border: 1px solid transparent;

      &:hover {
        color: $tech-primary !important;
        border-color: $tech-border !important;
      }

      &.is-active {
        background: linear-gradient(135deg, $tech-primary 0%, #0a8bff 100%) !important;
        color: #ffffff !important;
        border-color: $tech-primary !important;
      }
    }

    button {
      background: rgba(26, 35, 50, 0.6) !important;
      color: #a8d8ea !important;

      &:hover {
        color: $tech-primary !important;
      }

      &:disabled {
        color: rgba(168, 216, 234, 0.3) !important;
      }
    }
  }
}