/* =====================================================
901 - Claude 配色主题 (theme.css)
【使用方法】
在 HTML 的 中引入：
【提供的组件】
1. 按钮：.btn, .btn--outline, .btn--ghost, .btn--sm, .btn--lg
2. 卡片：.card, .card__title, .card__meta
3. 表单：.field, .label, .input, .select, .textarea, .help
4. 提示框：.notice, .notice--info, .notice--success, .notice--warning, .notice--danger
5. 表格：.table-wrap, .table
6. Toast 通知：Toast.success/error/warning/info()（需配合 utils.js）
7. 表单验证：自动显示错误提示
【颜色变量】
--color-bg: #f5f3ee 温暖米色背景
--color-surface: #ffffff 纯白卡片
--color-text: #2e2520 深棕色文字
--color-muted: #73665b 柔和棕灰
--color-border: #e6e3dd 淡边框
--color-accent: #cc785c Claude 橙棕色
【布局容器】
.container 默认宽度（60rem）
.container.is-sm 窄容器（44rem）
.container.is-lg 宽容器（80rem）
【工具类】
.flex, .items-center, .justify-between, .gap-2/3/4
.mt-4/6, .mb-4/6, .w-full
.text-center, .muted, .hidden
【示例】
【注意】
- 基于 CSS Layers（@layer）组织，避免样式冲突
- 支持表单自动验证（HTML5 required/pattern）
- 滚动条自动美化
- 兼容移动端和桌面端
===================================================== */
@layer reset, tokens, base, components, utilities;
/* ========== Reset ========== */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
}
/* ========== Tokens（Claude配色） ========== */
@layer tokens {
:root {
/* Claude官网配色 */
--color-bg: #f5f3ee; /* 温暖米色背景 */
--color-surface: #ffffff; /* 纯白卡片 */
--color-text: #2e2520; /* 深棕色文字 */
--color-muted: #73665b; /* 柔和棕灰 */
--color-border: #e6e3dd; /* 淡边框 */
/* 主题色 */
--color-accent: #cc785c; /* Claude橙棕色 */
--color-accent-hover: #b86a4f;
--color-accent-contrast: #ffffff;
--color-success: #5a9c7f;
--color-warning: #d4a574;
--color-danger: #c45f5f;
/* Typography */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Monaco, Consolas, monospace;
/* Spacing */
--space-2: .5rem;
--space-3: .875rem;
--space-4: 1.25rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-8: 2.5rem;
/* Radius + Shadows */
--radius-sm: .375rem;
--radius-md: .625rem;
--radius-lg: .875rem;
--shadow-sm: 0 1px 3px rgba(46, 37, 32, .08);
--shadow-md: 0 4px 12px rgba(46, 37, 32, .12);
--shadow-lg: 0 8px 24px rgba(46, 37, 32, .15);
/* Layout */
--container-sm: 44rem;
--container-md: 60rem;
--container-lg: 80rem;
}
}
/* ========== Base ========== */
@layer base {
body {
font-family: var(--font-sans);
background: var(--color-bg);
color: var(--color-text);
}
a {
color: var(--color-accent);
text-decoration: none;
transition: color .2s ease;
}
a:hover { color: var(--color-accent-hover); }
h1, h2, h3, h4 {
letter-spacing: -.02em;
line-height: 1.3;
font-weight: 600;
}
h1 { font-size: clamp(2rem, 3vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
p { margin-block: var(--space-3); }
small { font-size: .875rem; color: var(--color-muted); }
code, pre {
font-family: var(--font-mono);
font-size: .9em;
}
pre {
background: var(--color-surface);
border: 1px solid var(--color-border);
padding: var(--space-4);
border-radius: var(--radius-md);
overflow-x: auto;
}
hr {
border: 0;
border-top: 1px solid var(--color-border);
margin: var(--space-6) 0;
}
.container {
width: min(var(--container-md), 100% - 2rem);
margin-inline: auto;
}
.container.is-sm { width: min(var(--container-sm), 100% - 2rem); }
.container.is-lg { width: min(var(--container-lg), 100% - 2rem); }
}
/* ========== Components ========== */
@layer components {
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
border: 1px solid transparent;
padding: .625rem 1.25rem;
border-radius: var(--radius-md);
background: var(--color-accent);
color: var(--color-accent-contrast);
font-weight: 500;
cursor: pointer;
transition: all .2s ease;
}
.btn:hover {
background: var(--color-accent-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }
.btn:disabled {
opacity: .5;
pointer-events: none;
}
.btn--outline {
background: transparent;
color: var(--color-accent);
border-color: var(--color-accent);
}
.btn--outline:hover {
background: var(--color-accent);
color: var(--color-accent-contrast);
}
.btn--ghost {
background: transparent;
color: var(--color-accent);
}
.btn--ghost:hover {
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.btn--sm {
padding: .5rem .875rem;
font-size: .875rem;
}
.btn--lg {
padding: .875rem 1.75rem;
font-size: 1.05rem;
}
/* Card */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
transition: box-shadow .2s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card__title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: var(--space-3);
}
.card__meta {
color: var(--color-muted);
font-size: .875rem;
margin-bottom: var(--space-3);
}
/* Notice / Alert */
.notice {
display: flex;
gap: .75rem;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.notice--info {
background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
}
.notice--success {
background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-success) 25%, var(--color-border));
}
.notice--warning {
background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-warning) 25%, var(--color-border));
}
.notice--danger {
background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-border));
}
/* Form */
.field {
display: grid;
gap: .375rem;
margin-bottom: var(--space-4);
position: relative;
}
.label {
font-weight: 500;
font-size: .9rem;
}
.input, .select, .textarea {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
border-radius: var(--radius-md);
padding: .625rem .875rem;
transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
outline: none;
}
.textarea {
min-height: 6rem;
resize: vertical;
}
.help {
color: var(--color-muted);
font-size: .85rem;
}
/* Table */
.table-wrap {
width: 100%;
overflow-x: auto;
margin-block: var(--space-4);
}
.table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.table th, .table td {
padding: .75rem 1rem;
border-bottom: 1px solid var(--color-border);
text-align: left;
}
.table thead th {
font-weight: 600;
font-size: .875rem;
color: var(--color-muted);
background: var(--color-surface);
}
.table tbody tr:hover td {
background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}
}
/* ========== Utilities ========== */
@layer utilities {
.flex { display: flex; }
.hidden { display: none; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.w-full { width: 100%; }
.text-center { text-align: center; }
.muted { color: var(--color-muted); }
}
/* ========== Toast通知（需配合 utils.js） ========== */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 12px 16px;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 10px;
min-width: 280px;
max-width: 420px;
z-index: 10000;
animation: slideIn 0.3s ease;
}
.toast--success { border-left: 4px solid var(--color-success); }
.toast--warning { border-left: 4px solid var(--color-warning); }
.toast--error { border-left: 4px solid var(--color-danger); }
.toast--info { border-left: 4px solid var(--color-accent); }
.toast__icon {
font-size: 20px;
flex-shrink: 0;
}
.toast__content {
flex: 1;
font-size: .9rem;
line-height: 1.4;
}
.toast__close {
background: none;
border: none;
color: var(--color-muted);
cursor: pointer;
padding: 4px;
font-size: 18px;
line-height: 1;
opacity: .6;
transition: opacity .2s;
}
.toast__close:hover { opacity: 1; }
@keyframes slideIn {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* ========== 表单验证提示 ========== */
.validation-tip {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
background: var(--color-danger);
color: white;
padding: 6px 10px;
border-radius: var(--radius-sm);
font-size: .85rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translateY(5px);
transition: opacity .2s ease, transform .2s ease;
z-index: 1000;
box-shadow: var(--shadow-md);
}
.validation-tip::after {
content: '';
position: absolute;
top: 100%;
left: 16px;
border: 6px solid transparent;
border-top-color: var(--color-danger);
}
.field:has(:invalid:not(:placeholder-shown)) .validation-tip {
opacity: 1;
transform: translateY(0);
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
border-color: var(--color-danger);
}
/* ========== 滚动条 ========== */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--color-bg);
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--color-accent) 40%, transparent);
border-radius: 5px;
border: 2px solid var(--color-bg);
transition: background .2s ease;
}
::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--color-accent) 65%, transparent);
}
* {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--color-accent) 40%, transparent) var(--color-bg);
}
/* ========== Motion preference ========== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}