photo-live/apps/admin/src/assets/styles/custom/ui06.scss

/**
 * UI06 全局视觉对齐层（admin-preview-2026-09-22 示例基准）
 * 冲突时以示例为准（方案 §0）；本文件只做浅色主题覆盖，深色主题保持可用不重设计。
 * 示例 token 对照：docs/designs/admin-preview-2026-09-22/styles.css `:root`
 */

/* ── 浅色主题变量对齐 ── */
:root {
  /* 工作区背景 #F5F7FA（示例 --bg） */
  --default-bg-color: #f5f7fa;
  /* 边框 #E5EAF1（示例 --line） */
  --art-card-border: #e5eaf1;
  --default-border: #e5eaf1;
  --default-border-dashed: #e5eaf1;
  /* Element 基准字号/圆角（示例正文 12–13px、控件 8px） */
  --el-font-size-base: 13px;
  --el-border-radius-base: 8px;
}

/* ── 字体（示例：系统无衬线栈，Windows 中文优先 Microsoft YaHei） ── */
body {
  font: 13px/1.55 system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei',
    sans-serif;
}

/* ── 卡片：白底 + 1px 边框 + 12px 圆角，无重阴影（示例 .card） ── */
.el-card {
  --el-card-border-color: #e5eaf1;
  --el-card-border-radius: 12px;
  border-radius: 12px;
  border: 1px solid #e5eaf1;
  box-shadow: none;

  &.is-always-shadow,
  &.is-hover-shadow:hover {
    box-shadow: none;
  }
}

/* ── 按钮：38px 高、8px 圆角（示例 .btn） ── */
.el-button {
  min-height: 38px;
  border-radius: 8px;
  font-weight: 550;

  &--small {
    min-height: 30px;
  }
}

/* ── 输入/选择器：38px 高（示例 .input） ── */
.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner {
  border-radius: 8px;
}

.el-input .el-input__inner {
  height: 38px;
}

/* ── 表格：浅底表头 + 轻分隔（示例 .data-table） ── */
.el-table {
  --el-table-header-bg-color: #f7f9fc;
  --el-table-header-text-color: #8291a6;
  --el-table-row-hover-bg-color: #f5f8fd;
  --el-table-border-color: #eef1f5;

  th.el-table__cell {
    font-size: 11px;
    font-weight: 500;
  }

  .el-table__cell {
    padding: 13px 0;
  }
}

/* ── 对话框：16px 圆角（示例 .dialog） ── */
.el-dialog {
  --el-dialog-border-radius: 16px;
}

/* ── 标签（状态 pill 基调：10–11px、6px 圆角） ── */
.el-tag {
  border-radius: 6px;
  font-size: 11px;
}

/* ── 分段（示例 .seg：#edf1f7 轨道、选中白底蓝字） ── */
.el-segmented {
  --el-border-radius-base: 8px;
  background-color: #edf1f7;
  padding: 3px;

  .el-segmented__item-selected {
    background-color: #ffffff;
    color: var(--el-color-primary);
  }
}

/* ── 页面标题层级（示例：页面 27px / 卡片 17px） ── */
.el-breadcrumb {
  font-size: 12px;
}

/* ── 焦点可见（示例 focus-visible 3px 蓝框） ── */
.el-button:focus-visible,
.el-input__inner:focus-visible,
.el-select__wrapper:focus-visible {
  outline: 3px solid #9fc7ff;
  outline-offset: 2px;
}

/* ══════════ 治理页通用（示例 .workspace / .page-heading / .stats / .stat / .info-strip） ══════════ */

.ui06-page {
  max-width: 1660px;
  padding: 28px 30px 44px;
  margin: auto;
}

.ui06-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;

  h1 {
    font-size: 27px;
    letter-spacing: -0.7px;
    line-height: 1.4;
  }

  > div > p {
    margin-top: 6px;
    font-size: 12px;
    color: #7b899f;
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
}

/* 三列统计卡（示例 .stats / .stat） */
.ui06-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 22px;

  .ui06-stat {
    padding: 21px;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 12px;

    p {
      font-size: 11px;
      color: #8797ac;
    }

    strong {
      display: block;
      margin: 9px 0 4px;
      font-size: 27px;
      font-weight: 650;
      letter-spacing: -0.6px;

      .unit {
        font-size: 17px;
        font-weight: 600;
      }
    }

    small {
      font-size: 10px;
      color: #97a4b5;
    }
  }
}

/* 提示条（示例 .info-strip） */
.ui06-info-strip {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #6480a8;
  background: #edf4fe;
  border: 1px solid #e2edfc;
  border-radius: 9px;
}

@media (max-width: 900px) {
  .ui06-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ui06-page {
    padding: 20px 14px 40px;
  }

  .ui06-page-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* 卡片头标题（示例 .card-head h2 17px） */
.ui06-card-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}