abingyydsandClaude Sonnet 4.6
b34e81bb58
问题：非黑色背景的主题下，共享页面中的灰色/黑色硬编码颜色不协调 修复方案： 1. 扩展 CSS 变量体系：新增 --page-surface, --page-surface-hover, --page-divider, --page-inset, --page-success/warning/danger/info 2. .theme-light 和 .theme-claude 各自定义对应的浅色值 3. Tailwind 新增 text-page-success/warning/danger/info 语义色 4. 新增 CSS 工具类: bg-page-surface, hover:bg-page-surface-hover, border-page-divider, bg-page-inset 修改文件： - index.css: 扩展 CSS 变量 + 工具类 - tailwind.config.js: 新增语义色 token - Dashboard: SpotlightCard → 简单 glass 卡片，hover 色修复 - Pricing: border-white/hover-white → 主题感知类 - Tokens: bg-black/bg-neutral-800 → bg-page-inset/surface - Topup: SpotlightCard → glass，hover/text 色修复 - ConfigExporter: 下拉菜单/代码预览区全面适配 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
248 lines
7.0 KiB
CSS
248 lines
7.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--brand: 99 102 241;
|
|
/* Text colors */
|
|
--page-text: 255 255 255;
|
|
--page-text-secondary: 163 163 163;
|
|
--page-text-muted: 115 115 115;
|
|
--page-label: 212 212 212;
|
|
--page-link: 129 140 248;
|
|
/* Surface colors */
|
|
--page-card-bg: rgba(255,255,255,0.03);
|
|
--page-card-border: rgba(255,255,255,0.06);
|
|
--page-input-bg: rgba(255,255,255,0.04);
|
|
--page-input-border: rgba(255,255,255,0.1);
|
|
--page-surface: rgba(255,255,255,0.04);
|
|
--page-surface-hover: rgba(255,255,255,0.08);
|
|
--page-divider: rgba(255,255,255,0.06);
|
|
--page-inset: rgba(0,0,0,0.4);
|
|
/* Semantic colors — dark mode defaults */
|
|
--page-success: 74 222 128;
|
|
--page-success-text: 74 222 128;
|
|
--page-warning: 250 204 21;
|
|
--page-warning-text: 253 224 71;
|
|
--page-danger: 248 113 113;
|
|
--page-danger-text: 248 113 113;
|
|
--page-info: 192 132 252;
|
|
--page-info-text: 192 132 252;
|
|
}
|
|
|
|
body {
|
|
@apply bg-black text-white;
|
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
}
|
|
|
|
::selection {
|
|
@apply bg-brand-500/30;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
@apply w-1.5;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-neutral-700 rounded-full;
|
|
}
|
|
|
|
.theme-light ::-webkit-scrollbar-thumb {
|
|
@apply bg-neutral-300;
|
|
}
|
|
|
|
/* Light theme variable overrides */
|
|
.theme-light {
|
|
--page-text: 17 24 39;
|
|
--page-text-secondary: 107 114 128;
|
|
--page-text-muted: 156 163 175;
|
|
--page-label: 55 65 81;
|
|
--page-link: 79 70 229;
|
|
--page-card-bg: rgba(255,255,255,0.85);
|
|
--page-card-border: rgb(229,231,235);
|
|
--page-input-bg: #fff;
|
|
--page-input-border: rgb(209,213,219);
|
|
--page-surface: rgba(0,0,0,0.03);
|
|
--page-surface-hover: rgba(0,0,0,0.06);
|
|
--page-divider: rgb(229,231,235);
|
|
--page-inset: rgba(0,0,0,0.04);
|
|
--page-success: 22 163 74;
|
|
--page-success-text: 22 163 74;
|
|
--page-warning: 202 138 4;
|
|
--page-warning-text: 161 98 7;
|
|
--page-danger: 220 38 38;
|
|
--page-danger-text: 220 38 38;
|
|
--page-info: 124 58 237;
|
|
--page-info-text: 124 58 237;
|
|
}
|
|
|
|
.theme-claude {
|
|
--page-link: 217 119 87;
|
|
--page-card-bg: rgba(255,255,255,0.7);
|
|
--page-card-border: #E8DDD0;
|
|
--page-surface: rgba(61,48,36,0.04);
|
|
--page-surface-hover: rgba(61,48,36,0.08);
|
|
--page-divider: #E8DDD0;
|
|
--page-inset: rgba(61,48,36,0.06);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.glass {
|
|
background: var(--page-card-bg);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid var(--page-card-border);
|
|
@apply rounded-2xl;
|
|
}
|
|
|
|
.glass-sm {
|
|
background: var(--page-card-bg);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid var(--page-card-border);
|
|
@apply rounded-xl;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply px-6 py-2.5 rounded-xl bg-brand-600 font-medium text-sm
|
|
hover:bg-brand-500 active:bg-brand-700
|
|
transition-all duration-200 ease-out
|
|
shadow-lg shadow-brand-600/20
|
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply px-6 py-2.5 rounded-xl font-medium text-sm
|
|
transition-all duration-200 ease-out
|
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
border: 1px solid var(--page-input-border);
|
|
color: rgb(var(--page-label));
|
|
}
|
|
.btn-secondary:hover {
|
|
background: rgba(var(--page-text), 0.05);
|
|
}
|
|
|
|
.input {
|
|
@apply w-full px-4 py-2.5 rounded-xl text-sm
|
|
focus:outline-none focus:ring-2 focus:ring-brand-500/40 focus:border-brand-500/60
|
|
transition-all duration-200;
|
|
background: var(--page-input-bg);
|
|
border: 1px solid var(--page-input-border);
|
|
color: rgb(var(--page-text));
|
|
}
|
|
.input::placeholder {
|
|
color: rgb(var(--page-text-muted));
|
|
}
|
|
|
|
.card-glow {
|
|
@apply relative overflow-hidden;
|
|
}
|
|
|
|
.card-glow::before {
|
|
content: '';
|
|
@apply absolute -inset-0.5 bg-gradient-to-r from-brand-500/20 via-purple-500/20 to-pink-500/20 rounded-2xl opacity-0 transition-opacity duration-500;
|
|
}
|
|
|
|
.card-glow:hover::before {
|
|
@apply opacity-100;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════
|
|
Light theme shared-page color overrides
|
|
Outside @layer to win specificity over Tailwind utilities.
|
|
═══════════════════════════════════════════════════════════ */
|
|
|
|
/* Map dark-theme text utilities to light-appropriate colors.
|
|
Uses a data attribute to avoid Tailwind circular-dependency issues. */
|
|
.theme-light {
|
|
/* Override body defaults scoped to this container */
|
|
color: rgb(17 24 39);
|
|
}
|
|
|
|
/* Glass cards get subtle shadow in light mode */
|
|
.theme-light .glass,
|
|
.theme-light .glass-sm {
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
/* Light theme input focus */
|
|
.theme-light .input:focus {
|
|
border-color: rgb(99 102 241);
|
|
box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
|
|
}
|
|
|
|
/* Card glow toned down */
|
|
.theme-light .card-glow::before {
|
|
background: linear-gradient(to right, rgba(99,102,241,0.06), rgba(168,85,247,0.06), rgba(236,72,153,0.06));
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════
|
|
Claude theme accent overrides
|
|
═══════════════════════════════════════════════ */
|
|
.theme-claude .btn-primary {
|
|
background-color: #D97757;
|
|
box-shadow: 0 4px 14px rgba(217,119,87,0.15);
|
|
}
|
|
.theme-claude .btn-primary:hover {
|
|
background-color: #C4613F;
|
|
}
|
|
.theme-claude .btn-primary:active {
|
|
background-color: #A85232;
|
|
}
|
|
|
|
.theme-claude .glass,
|
|
.theme-claude .glass-sm {
|
|
border-color: #E8DDD0;
|
|
}
|
|
|
|
.theme-claude .input {
|
|
border-color: #D9C5B2;
|
|
}
|
|
.theme-claude .input:focus {
|
|
border-color: #D97757;
|
|
box-shadow: 0 0 0 3px rgba(217,119,87,0.15);
|
|
}
|
|
|
|
.theme-claude .btn-secondary {
|
|
border-color: #D9C5B2;
|
|
color: #6B5D4F;
|
|
}
|
|
.theme-claude .btn-secondary:hover {
|
|
background-color: rgba(217,119,87,0.05);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════
|
|
Theme-aware utility classes for surfaces/dividers
|
|
═══════════════════════════════════════════════ */
|
|
.surface {
|
|
background: var(--page-surface);
|
|
}
|
|
.surface-hover:hover {
|
|
background: var(--page-surface-hover);
|
|
}
|
|
.bg-page-inset {
|
|
background: var(--page-inset);
|
|
}
|
|
.divide-page > * + * {
|
|
border-color: var(--page-divider);
|
|
}
|
|
.border-page-divider {
|
|
border-color: var(--page-divider);
|
|
}
|
|
.bg-page-surface {
|
|
background: var(--page-surface);
|
|
}
|
|
.bg-page-surface-hover {
|
|
background: var(--page-surface-hover);
|
|
}
|
|
.hover\:bg-page-surface:hover {
|
|
background: var(--page-surface);
|
|
}
|
|
.hover\:bg-page-surface-hover:hover {
|
|
background: var(--page-surface-hover);
|
|
}
|