kurihada
12279117f3
- CSS 变量驱动的主题系统，所有颜色响应 data-theme 属性 - 新增语义化色彩 heading/secondary/tertiary，替换硬编码 text-white/text-gray-* - 右上角三态主题按钮（自动/浅色/深色），全局可用无需登录 - layout.tsx 内联脚本防闪烁 - 修复个人中心页面溢出无法滚动
89 lines
1.9 KiB
CSS
89 lines
1.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #030712;
|
|
--foreground: #f3f4f6;
|
|
--surface: #111827;
|
|
--elevated: #1f2937;
|
|
--inset: #0a0f1a;
|
|
--border: #1f2937;
|
|
--subtle: #374151;
|
|
--muted: #6b7280;
|
|
--dim: #4b5563;
|
|
--accent: #10b981;
|
|
--accent-hover: #059669;
|
|
--heading: #ffffff;
|
|
--secondary: #d1d5db;
|
|
--tertiary: #9ca3af;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--background: #f8fafc;
|
|
--foreground: #1e293b;
|
|
--surface: #ffffff;
|
|
--elevated: #f1f5f9;
|
|
--inset: #e2e8f0;
|
|
--border: #e2e8f0;
|
|
--subtle: #cbd5e1;
|
|
--muted: #64748b;
|
|
--dim: #94a3b8;
|
|
--accent: #059669;
|
|
--accent-hover: #047857;
|
|
--heading: #0f172a;
|
|
--secondary: #334155;
|
|
--tertiary: #64748b;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-surface: var(--surface);
|
|
--color-elevated: var(--elevated);
|
|
--color-inset: var(--inset);
|
|
--color-border: var(--border);
|
|
--color-subtle: var(--subtle);
|
|
--color-muted: var(--muted);
|
|
--color-dim: var(--dim);
|
|
--color-accent: var(--accent);
|
|
--color-accent-hover: var(--accent-hover);
|
|
--color-heading: var(--heading);
|
|
--color-secondary: var(--secondary);
|
|
--color-tertiary: var(--tertiary);
|
|
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
-webkit-overflow-scrolling: none;
|
|
touch-action: pan-y;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.scrollbar-none {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.scrollbar-none::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes img-fade-out {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|