430 lines
14 KiB
CSS
430 lines
14 KiB
CSS
/**
|
||
* AKSRT Design Tokens v7 — 1:1 Zibll Alignment
|
||
* ------------------------------------------------------------
|
||
* 单一真理源（Single Source of Truth）
|
||
* 所有颜色、字体、间距、动效都从此处读取，禁止在组件内硬编码。
|
||
* 严格对齐 zibll main.css 的视觉值。
|
||
*/
|
||
|
||
:root {
|
||
/* ===== Primary — Zibll theme-color (#f04494 pink) ===== */
|
||
--color-primary: #f04494;
|
||
--color-primary-hover: #e0307e;
|
||
--color-primary-active: #c9206d;
|
||
--color-primary-soft: rgba(240, 68, 148, 0.10);
|
||
--color-primary-softer: rgba(240, 68, 148, 0.05);
|
||
--color-on-primary: #FFFFFF;
|
||
|
||
/* ===== Ink (text) — 对齐 zibll --key-color / --main-color / --muted-color ===== */
|
||
--color-ink: #333333; /* zibll --key-color */
|
||
--color-ink-2: #4e5358; /* zibll --main-color */
|
||
--color-ink-3: #777777; /* zibll --muted-color */
|
||
--color-ink-4: #999999; /* zibll --muted-2-color */
|
||
|
||
/* ===== Surface — 对齐 zibll --body-bg-color / --main-bg-color / --muted-bg-color ===== */
|
||
--surface-page: #f5f6f7; /* zibll --body-bg-color */
|
||
--surface-1: #FFFFFF; /* zibll --main-bg-color */
|
||
--surface-2: #eeeeee; /* zibll --muted-bg-color */
|
||
--surface-3: #e8e8e8; /* 输入框 / code */
|
||
|
||
/* ===== Borders — 对齐 zibll --main-border-color ===== */
|
||
--color-line: rgba(50, 50, 50, 0.06);
|
||
--color-line-soft: rgba(0, 0, 0, 0.03);
|
||
|
||
/* ===== State colors ===== */
|
||
--color-success: #10B981;
|
||
--color-warning: #F59E0B;
|
||
--color-error: #EF4444;
|
||
--color-info: #3B82F6;
|
||
|
||
/* ===== Accent (action green — zibll tabbar/CTA) ===== */
|
||
--color-accent: #18a058;
|
||
--color-accent-soft: rgba(24, 160, 88, 0.12);
|
||
--color-accent-shadow: rgba(24, 160, 88, 0.28);
|
||
|
||
/* ===== Fonts — 对齐 zibll（系统默认字体栈）===== */
|
||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||
|
||
/* ===== Type scale ===== */
|
||
--text-xs: 0.75rem; /* 12 */
|
||
--text-sm: 0.875rem; /* 14 */
|
||
--text-base: 1rem; /* 16 */
|
||
--text-md: 1.125rem; /* 18 */
|
||
--text-lg: 1.25rem; /* 20 */
|
||
--text-xl: 1.5rem; /* 24 */
|
||
--text-2xl: 1.875rem; /* 30 */
|
||
--text-3xl: 2.25rem; /* 36 */
|
||
--text-4xl: 3rem; /* 48 */
|
||
--text-5xl: 3.75rem; /* 60 */
|
||
--leading-tight: 1.2;
|
||
--leading-snug: 1.4;
|
||
--leading-normal: 1.6; /* zibll body line-height */
|
||
--leading-relaxed: 1.6;
|
||
|
||
/* ===== Spacing (4px base) ===== */
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
--space-7: 32px;
|
||
--space-8: 40px;
|
||
--space-9: 48px;
|
||
--space-10: 64px;
|
||
--space-11: 80px;
|
||
--space-12: 96px;
|
||
|
||
/* ===== Radius — 对齐 zibll --main-radius: 8px ===== */
|
||
--radius-sm: 4px;
|
||
--radius: 8px;
|
||
--radius-lg: 8px;
|
||
--radius-xl: 12px;
|
||
--radius-pill: 100px;
|
||
--radius-avatar: 50%;
|
||
|
||
/* ===== Shadows — 对齐 zibll --main-shadow: rgba(116,116,116,0.08) ===== */
|
||
--shadow-sm: 0 0 10px rgba(116, 116, 116, 0.08);
|
||
--shadow: 0 0 10px rgba(116, 116, 116, 0.08);
|
||
--shadow-lg: 0 0 10px rgba(116, 116, 116, 0.12);
|
||
--shadow-drawer: 0 8px 40px rgba(0, 0, 0, 0.20);
|
||
|
||
/* ===== Layout — 对齐 zibll --mian-max-width: 1200px ===== */
|
||
--nav-height: 60px;
|
||
--container: 1200px;
|
||
--container-wide: 1440px;
|
||
--container-read: 720px;
|
||
--container-page: 860px;
|
||
--sidebar-width: 311px;
|
||
--content-gap: 48px;
|
||
--sidebar-bp: 992px;
|
||
|
||
/* ===== Motion ===== */
|
||
--ease: cubic-bezier(.4, 0, .2, 1);
|
||
--ease-out: cubic-bezier(.16, 1, .3, 1);
|
||
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
|
||
--dur-fast: 0.15s;
|
||
--dur: 0.25s;
|
||
--dur-slow: 0.4s;
|
||
|
||
/* ===== Focus Ring — 对齐 zibll focus-shadow-color ===== */
|
||
--focus-ring: 0 0 2px 3px rgba(253, 83, 161, 0.4);
|
||
|
||
/* ===== Z-index layers ===== */
|
||
--z-dropdown: 100;
|
||
--z-sticky: 200;
|
||
--z-fixed: 300;
|
||
--z-overlay: 400;
|
||
--z-modal: 500;
|
||
--z-popover: 600;
|
||
--z-toast: 700;
|
||
--z-tooltip: 800;
|
||
|
||
/* ===== Button sizes — 对齐 zibll ===== */
|
||
--radius-btn: 4px;
|
||
--btn-sm-h: 28px;
|
||
--btn-md-h: 34px;
|
||
--btn-lg-h: 44px;
|
||
|
||
/* ===== Card density — 对齐 zibll .box-body { padding: 15px } ===== */
|
||
--card-padding: 15px;
|
||
--card-padding-sm: 10px;
|
||
--card-gap: 16px;
|
||
|
||
/* ===== Skeleton loader ===== */
|
||
--skeleton-base: var(--surface-2);
|
||
--skeleton-shine: var(--surface-1);
|
||
|
||
/* ===== Extended tokens (used by components) ===== */
|
||
--color-primary-light: var(--color-primary-soft);
|
||
--color-surface: var(--surface-1);
|
||
--color-line-strong: var(--color-line);
|
||
--color-bg-hover: var(--surface-2);
|
||
--color-border-light: var(--color-line-soft);
|
||
--color-fill: var(--surface-2);
|
||
--color-warning-bg: #fffbe6;
|
||
--color-warning-text: #ad6800;
|
||
|
||
--text-secondary: var(--color-ink-3);
|
||
--text-tertiary: var(--color-ink-4);
|
||
|
||
--surface-active: var(--surface-2);
|
||
--surface-card: var(--surface-1);
|
||
--surface-hover: var(--surface-2);
|
||
--surface-secondary: var(--surface-2);
|
||
|
||
--radius-code: var(--radius);
|
||
--radius-full: 100px;
|
||
--shadow-xl: 0 0 10px rgba(116, 116, 116, 0.12);
|
||
--space-16: 64px;
|
||
--z-floating: 900;
|
||
|
||
--transition-fast: 0.15s ease;
|
||
--transition-base: 0.25s ease;
|
||
|
||
/* ===== Composite / Context tokens — 对齐 zibll ===== */
|
||
--header-bg: var(--blur-bg);
|
||
--header-color: var(--color-ink-2);
|
||
--footer-bg: var(--surface-1);
|
||
--footer-color: var(--color-ink-4);
|
||
--blur-bg: rgba(255, 255, 255, 0.80);
|
||
--float-btn-bg: rgba(200, 200, 200, 0.40);
|
||
|
||
/* ===== AKSRT-to-AKSRT canonical aliases ===== */
|
||
--content-max: var(--container);
|
||
--font-heading: var(--font-ui);
|
||
--radius-card: var(--radius);
|
||
--radius-md: var(--radius);
|
||
--color-primary-50: var(--color-primary-soft);
|
||
--color-primary-dark: var(--color-primary-active);
|
||
--shadow-md: var(--shadow);
|
||
--mini-radius: calc(var(--radius) / 1.4);
|
||
--single-cover-scale: 35%;
|
||
|
||
/* ===== Avatar size system — Zibll --this-size 等价 ===== */
|
||
--aksrt-avatar-size-xs: 24px;
|
||
--aksrt-avatar-size-sm: 32px;
|
||
--aksrt-avatar-size: 40px;
|
||
--aksrt-avatar-size-lg: 56px;
|
||
--aksrt-avatar-size-xl: 80px;
|
||
|
||
/* ===== Post card thumbnail scale ===== */
|
||
--aksrt-card-thumb-scale: 56.25%; /* 16:9 */
|
||
|
||
/* ===== Multi-color palette (for buttons / badges / gradients) ===== */
|
||
--aksrt-rose: #f43f5e;
|
||
--aksrt-rose-soft: rgba(244, 63, 94, 0.12);
|
||
--aksrt-blue: #3b82f6;
|
||
--aksrt-blue-soft: rgba(59, 130, 246, 0.12);
|
||
--aksrt-green: #10b981;
|
||
--aksrt-green-soft: rgba(16, 185, 129, 0.12);
|
||
--aksrt-orange: #f97316;
|
||
--aksrt-orange-soft:rgba(249, 115, 22, 0.12);
|
||
--aksrt-purple: #8b5cf6;
|
||
--aksrt-purple-soft:rgba(139, 92, 246, 0.12);
|
||
--aksrt-cyan: #06b6d4;
|
||
--aksrt-cyan-soft: rgba(6, 182, 212, 0.12);
|
||
--aksrt-yellow: #eab308;
|
||
--aksrt-yellow-soft:rgba(234, 179, 8, 0.12);
|
||
--aksrt-red: #ef4444;
|
||
--aksrt-red-soft: rgba(239, 68, 68, 0.12);
|
||
--aksrt-teal: #14b8a6;
|
||
--aksrt-teal-soft: rgba(20, 184, 166, 0.12);
|
||
--aksrt-indigo: #6366f1;
|
||
--aksrt-indigo-soft:rgba(99, 102, 241, 0.12);
|
||
--aksrt-pink: #ec4899;
|
||
--aksrt-pink-soft: rgba(236, 72, 153, 0.12);
|
||
|
||
/* ===== VIP / special gradients ===== */
|
||
--aksrt-vip-gold-1: #f6d365;
|
||
--aksrt-vip-gold-2: #fda085;
|
||
--aksrt-grad-sunset-1: #f093fb;
|
||
--aksrt-grad-sunset-2: #f5576c;
|
||
--aksrt-grad-ocean-1: #4facfe;
|
||
--aksrt-grad-ocean-2: #00f2fe;
|
||
--aksrt-grad-forest-1: #43e97b;
|
||
--aksrt-grad-forest-2: #38f9d7;
|
||
--aksrt-grad-night-1: #a18cd1;
|
||
--aksrt-grad-night-2: #fbc2eb;
|
||
--aksrt-grad-fire-1: #f83600;
|
||
--aksrt-grad-fire-2: #f9d423;
|
||
|
||
/* ===== Component sizing ===== */
|
||
--aksrt-toggle-w: 44px;
|
||
--aksrt-toggle-h: 24px;
|
||
--aksrt-stepper-h: 36px;
|
||
--aksrt-badge-h: 22px;
|
||
|
||
/* ===== Legacy name bridge ===== */
|
||
--text-1: var(--color-ink);
|
||
--text-2: var(--color-ink-2);
|
||
--text-3: var(--color-ink-3);
|
||
--border: var(--color-line);
|
||
--color-text-1: var(--color-ink);
|
||
--color-text-2: var(--color-ink-2);
|
||
--color-text-3: var(--color-ink-3);
|
||
--color-primary-bg: var(--color-primary-softer);
|
||
--color-danger: var(--color-error);
|
||
}
|
||
|
||
/* ============================================================
|
||
* Blur-bg fallback cascade (mirrors zibll behaviour)
|
||
* ============================================================ */
|
||
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
|
||
:root {
|
||
--blur-bg: var(--surface-1);
|
||
--header-bg: var(--surface-1);
|
||
}
|
||
}
|
||
|
||
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
|
||
html.dark,
|
||
body.dark-theme {
|
||
--blur-bg: #37383a;
|
||
--header-bg: #37383a;
|
||
}
|
||
}
|
||
|
||
body.modal-open,
|
||
body.dialog-open {
|
||
--blur-bg: var(--surface-1);
|
||
--header-bg: var(--surface-1);
|
||
}
|
||
|
||
body.modal-open .site-nav,
|
||
body.modal-open .footer-tabbar,
|
||
body.modal-open .float-right .float-btn,
|
||
body.dialog-open .site-nav,
|
||
body.dialog-open .footer-tabbar,
|
||
body.dialog-open .float-right .float-btn {
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
|
||
html.dark body.modal-open,
|
||
html.dark body.dialog-open,
|
||
body.dark-theme body.modal-open,
|
||
body.dark-theme body.dialog-open {
|
||
--blur-bg: #37383a;
|
||
--header-bg: #37383a;
|
||
}
|
||
|
||
/* ============================================================
|
||
* Multi-level container responsive — 对齐 zibll --mian-max-width
|
||
* 不同视口宽度下容器自动调整
|
||
* ============================================================ */
|
||
@media (min-width: 992px) {
|
||
:root {
|
||
--container: 960px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
:root {
|
||
--container: 1140px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1400px) {
|
||
:root {
|
||
--container: 1200px;
|
||
}
|
||
}
|
||
|
||
/* ============================================================
|
||
* Dark Theme — 对齐 zibll .dark-theme (#292a2d 范围)
|
||
* ============================================================ */
|
||
html.dark {
|
||
--color-ink: #f8fafc;
|
||
--color-ink-2: #e5eef7;
|
||
--color-ink-3: #b4b6bb;
|
||
--color-ink-4: #888a8f;
|
||
|
||
--surface-page: #292a2d;
|
||
--surface-1: #323335;
|
||
--surface-2: #2d2e31;
|
||
--surface-3: #3a3b3e;
|
||
|
||
--color-line: rgba(114, 114, 114, 0.1);
|
||
--color-line-soft: rgba(184, 184, 184, 0.02);
|
||
|
||
--color-primary-soft: rgba(240, 68, 148, 0.16);
|
||
--color-primary-softer: rgba(240, 68, 148, 0.08);
|
||
|
||
--color-primary-light: var(--color-primary-soft);
|
||
--color-surface: var(--surface-1);
|
||
--color-line-strong: var(--color-line);
|
||
--color-bg-hover: var(--surface-2);
|
||
--color-border-light: var(--color-line-soft);
|
||
--color-fill: var(--surface-2);
|
||
|
||
--text-secondary: var(--color-ink-3);
|
||
--text-tertiary: var(--color-ink-4);
|
||
|
||
--surface-active: var(--surface-2);
|
||
--surface-card: var(--surface-1);
|
||
--surface-hover: var(--surface-2);
|
||
--surface-secondary: var(--surface-2);
|
||
|
||
--shadow-xl: 0 0 10px rgba(24, 24, 24, 0.15);
|
||
|
||
--shadow-sm: 0 0 10px rgba(24, 24, 24, 0.1);
|
||
--shadow: 0 0 10px rgba(24, 24, 24, 0.1);
|
||
--shadow-lg: 0 0 10px rgba(24, 24, 24, 0.15);
|
||
--shadow-drawer: 0 8px 40px rgba(0, 0, 0, 0.55);
|
||
|
||
--blur-bg: rgba(50, 51, 53, 0.80);
|
||
--float-btn-bg: rgba(70, 70, 70, 0.40);
|
||
--header-bg: var(--blur-bg);
|
||
--footer-bg: var(--surface-1);
|
||
--footer-color: var(--color-ink-4);
|
||
--shadow-md: var(--shadow);
|
||
|
||
--skeleton-base: #3a3b3e;
|
||
--skeleton-shine: #444548;
|
||
|
||
/* Multi-color palette — dark mode: same hue, softer tint backgrounds */
|
||
--aksrt-rose-soft: rgba(244, 63, 94, 0.18);
|
||
--aksrt-blue-soft: rgba(59, 130, 246, 0.18);
|
||
--aksrt-green-soft: rgba(16, 185, 129, 0.18);
|
||
--aksrt-orange-soft:rgba(249, 115, 22, 0.18);
|
||
--aksrt-purple-soft:rgba(139, 92, 246, 0.18);
|
||
--aksrt-cyan-soft: rgba(6, 182, 212, 0.18);
|
||
--aksrt-yellow-soft:rgba(234, 179, 8, 0.18);
|
||
--aksrt-red-soft: rgba(239, 68, 68, 0.18);
|
||
--aksrt-teal-soft: rgba(20, 184, 166, 0.18);
|
||
--aksrt-indigo-soft:rgba(99, 102, 241, 0.18);
|
||
--aksrt-pink-soft: rgba(236, 72, 153, 0.18);
|
||
}
|
||
|
||
/* Dark mode component refinements */
|
||
html.dark .site-nav {
|
||
border-bottom-color: var(--color-line);
|
||
box-shadow: none;
|
||
}
|
||
|
||
html.dark .footer-tabbar {
|
||
background: rgba(50, 51, 53, 0.80);
|
||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.20);
|
||
}
|
||
|
||
html.dark .n-drawer,
|
||
html.dark .n-modal,
|
||
html.dark .n-dialog {
|
||
background: var(--surface-1);
|
||
}
|
||
|
||
html.dark .post-card,
|
||
html.dark .widget,
|
||
html.dark .aksrt-theme-box,
|
||
html.dark .theme-box {
|
||
border-color: var(--color-line);
|
||
}
|
||
|
||
/* body.dark-theme — zibll compatibility alias for html.dark */
|
||
body.dark-theme .site-nav {
|
||
border-bottom-color: var(--color-line);
|
||
box-shadow: none;
|
||
}
|
||
|
||
body.dark-theme .footer-tabbar {
|
||
background: rgba(50, 51, 53, 0.80);
|
||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.20);
|
||
}
|
||
|
||
body.dark-theme .n-drawer,
|
||
body.dark-theme .n-modal,
|
||
body.dark-theme .n-dialog {
|
||
background: var(--surface-1);
|
||
}
|
||
|
||
body.dark-theme .post-card,
|
||
body.dark-theme .widget,
|
||
body.dark-theme .aksrt-theme-box,
|
||
body.dark-theme .theme-box {
|
||
border-color: var(--color-line);
|
||
}
|