curriculum-project-hub/hub/filelib-web/src/app.css

@import "tailwindcss";

/* 全局 UI 主题令牌(与 hub 端 uiTheme.ts 同源) */
@theme {
  --color-bg: #fcfcfb;
  --color-panel: #ffffff;
  --color-sidebar: #f7f7f5;
  --color-ink: #1a1a18;
  --color-ink-2: #6b6a66;
  --color-ink-3: #9c9b96;
  --color-line: #ecece8;
  --color-line-soft: #f1f1ee;
  --color-hover: #f4f4f1;
  --color-selected: #ebebe7;
  --color-accent: #1a1a18;
  --color-accent-hover: #333330;
  --color-danger: #a13a33;
  --color-guide: #e9e9e5;
  --color-diff-add-bg: #f3f6f2;
  --color-diff-add-text: #4a6741;
  --color-diff-del-bg: #f8f2f1;
  --color-diff-del-text: #a13a33;
}

html,
body {
  height: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family:
    "Inter",
    -apple-system,
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 共享组件层(ADR-0029)。
 *
 * 从已删除的 hub/src/database/routes/uiTheme.ts 原样搬来。组件只带布局工具类,
 * 不重述这里的组件样式 —— 第一版迁移只搬了上面的 @theme 令牌,把按钮/输入框/
 * 面板样式在每个组件里内联重写了一遍,后台随即明显退化。 */
@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-line);
    background: var(--color-panel);
    color: var(--color-ink);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
  }
  .btn:hover {
    background: var(--color-hover);
  }
  .btn-sm {
    padding: 4px 9px;
    font-size: 11.5px;
  }
  .btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
  }
  .btn-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
  }
  .btn-danger {
    border-color: transparent;
    background: transparent;
    color: var(--color-danger);
  }
  .btn-danger:hover {
    background: color-mix(in srgb, var(--color-danger) 7%, transparent);
  }

  .panel {
    background: var(--color-panel);
    border: 1px solid var(--color-line-soft);
    border-radius: 10px;
    padding: 20px 22px;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--color-line-soft);
    color: var(--color-ink-3);
    background: var(--color-panel);
  }

  .input,
  .select,
  .textarea {
    width: 100%;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid var(--color-line);
    background: var(--color-panel);
    font-size: 13px;
    color: var(--color-ink);
    font-family: inherit;
    outline: none;
    transition: border-color 120ms ease;
  }
  .input:focus,
  .select:focus,
  .textarea:focus {
    border-color: var(--color-accent);
  }
  .textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.75;
    resize: vertical;
  }
  .form-label {
    display: block;
    font-size: 11.5px;
    color: var(--color-ink-3);
    margin-bottom: 4px;
  }
  .form-row {
    margin-bottom: 12px;
  }

  table.list {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  table.list th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-ink-3);
    padding: 4px 0;
  }
  table.list td {
    padding: 8px 0;
    border-top: 1px solid var(--color-line-soft);
  }
  table.list tr:first-child td {
    border-top: none;
  }

  .quiet {
    color: var(--color-ink-3);
    font-size: 12.5px;
  }
  .section-title {
    font-size: 13px;
    font-weight: 600;
  }
  .section-note {
    font-size: 11.5px;
    color: var(--color-ink-3);
  }
  .file-meta {
    font-size: 11px;
    color: var(--color-ink-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .link-danger {
    color: var(--color-danger);
    font-size: 12.5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .link-danger:hover {
    text-decoration: underline;
  }

  /* 开关。真 checkbox 藏在下面 —— 保留键盘可达与 :checked 语义,不做 div 假开关。 */
  .switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
  }
  .switch > input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .switch > span {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background: var(--color-line);
    transition: background 0.16s;
  }
  .switch > span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.16s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  .switch > input:checked + span {
    background: var(--color-accent);
  }
  .switch > input:checked + span::after {
    transform: translateX(13px);
  }
  .switch > input:focus-visible + span {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}

/* diff 渲染 */
pre.diff {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.75;
}
pre.diff .add {
  display: block;
  color: var(--color-diff-add-text);
  background: var(--color-diff-add-bg);
}
pre.diff .del {
  display: block;
  color: var(--color-diff-del-text);
  background: var(--color-diff-del-bg);
}