733 lines
19 KiB
CSS
733 lines
19 KiB
CSS
@import "tailwindcss";
|
||
@import "tw-animate-css";
|
||
|
||
/* =============================================
|
||
* 游戏专属 CSS 变量（大厂保卫战）
|
||
* ============================================= */
|
||
:root {
|
||
--game-bg: #0F0F23;
|
||
--game-primary: #7C3AED;
|
||
--game-secondary: #A78BFA;
|
||
--game-cta: #F43F5E;
|
||
--game-text: #E2E8F0;
|
||
--game-path: #3d2b1f;
|
||
--game-buildable: #1e3a5f;
|
||
--game-hover: #2d5a8e;
|
||
--game-border: #0a1628;
|
||
--game-hud: rgba(10, 22, 40, 0.9);
|
||
}
|
||
|
||
/* =============================================
|
||
* 像素字体 class
|
||
* ============================================= */
|
||
.font-pixel {
|
||
font-family: 'Press Start 2P', monospace;
|
||
}
|
||
|
||
.font-vt323 {
|
||
font-family: 'VT323', monospace;
|
||
}
|
||
|
||
/* =============================================
|
||
* CRT 扫描线效果（主页封面）
|
||
* ============================================= */
|
||
.crt-overlay {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.crt-overlay::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(0, 0, 0, 0.08) 2px,
|
||
rgba(0, 0, 0, 0.08) 4px
|
||
);
|
||
pointer-events: none;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* =============================================
|
||
* 霓虹发光动画
|
||
* ============================================= */
|
||
@keyframes neon-pulse {
|
||
0%, 100% {
|
||
text-shadow:
|
||
0 0 7px #A78BFA,
|
||
0 0 10px #A78BFA,
|
||
0 0 21px #A78BFA,
|
||
0 0 42px #7C3AED;
|
||
}
|
||
50% {
|
||
text-shadow:
|
||
0 0 4px #A78BFA,
|
||
0 0 7px #A78BFA,
|
||
0 0 13px #A78BFA,
|
||
0 0 26px #7C3AED;
|
||
}
|
||
}
|
||
|
||
@keyframes neon-border-pulse {
|
||
0%, 100% {
|
||
box-shadow:
|
||
0 0 5px #A78BFA,
|
||
0 0 10px #A78BFA,
|
||
0 0 20px #7C3AED,
|
||
inset 0 0 5px rgba(167, 139, 250, 0.1);
|
||
}
|
||
50% {
|
||
box-shadow:
|
||
0 0 3px #A78BFA,
|
||
0 0 6px #A78BFA,
|
||
0 0 12px #7C3AED,
|
||
inset 0 0 3px rgba(167, 139, 250, 0.05);
|
||
}
|
||
}
|
||
|
||
@keyframes glitch-skew {
|
||
0%, 100% { transform: skewX(0); }
|
||
2% { transform: skewX(-1deg); }
|
||
4% { transform: skewX(0.5deg); }
|
||
6% { transform: skewX(0); }
|
||
88% { transform: skewX(0); }
|
||
90% { transform: skewX(1deg); }
|
||
92% { transform: skewX(-0.5deg); }
|
||
94% { transform: skewX(0); }
|
||
}
|
||
|
||
@keyframes scanline-move {
|
||
0% { transform: translateY(-100%); }
|
||
100% { transform: translateY(100vh); }
|
||
}
|
||
|
||
.neon-title {
|
||
color: #A78BFA;
|
||
animation: neon-pulse 2.5s ease-in-out infinite, glitch-skew 8s ease-in-out infinite;
|
||
}
|
||
|
||
.neon-border {
|
||
border: 1px solid #A78BFA;
|
||
animation: neon-border-pulse 2.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes float-text {
|
||
0%, 100% { transform: translateY(0px); }
|
||
50% { transform: translateY(-6px); }
|
||
}
|
||
|
||
.game-cover-scanline {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: rgba(167, 139, 250, 0.15);
|
||
animation: scanline-move 6s linear infinite;
|
||
pointer-events: none;
|
||
z-index: 11;
|
||
}
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
|
||
@theme inline {
|
||
--font-sans: "Avenir Next", "SF Pro Rounded", "SF Pro Display", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", sans-serif;
|
||
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
--radius-xl: calc(var(--radius) + 4px);
|
||
--radius-2xl: calc(var(--radius) + 10px);
|
||
--radius-3xl: calc(var(--radius) + 16px);
|
||
--radius-4xl: calc(var(--radius) + 22px);
|
||
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--color-card: var(--card);
|
||
--color-card-foreground: var(--card-foreground);
|
||
--color-popover: var(--popover);
|
||
--color-popover-foreground: var(--popover-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-muted: var(--muted);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-accent: var(--accent);
|
||
--color-accent-foreground: var(--accent-foreground);
|
||
--color-destructive: var(--destructive);
|
||
--color-border: var(--border);
|
||
--color-input: var(--input);
|
||
--color-ring: var(--ring);
|
||
--color-chart-1: var(--chart-1);
|
||
--color-chart-2: var(--chart-2);
|
||
--color-chart-3: var(--chart-3);
|
||
--color-chart-4: var(--chart-4);
|
||
--color-chart-5: var(--chart-5);
|
||
--color-sidebar: var(--sidebar);
|
||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||
--color-sidebar-primary: var(--sidebar-primary);
|
||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||
--color-sidebar-accent: var(--sidebar-accent);
|
||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||
--color-sidebar-border: var(--sidebar-border);
|
||
--color-sidebar-ring: var(--sidebar-ring);
|
||
--color-brand: var(--brand);
|
||
--color-brand-foreground: var(--brand-foreground);
|
||
--color-success: var(--success);
|
||
--color-warning: var(--warning);
|
||
}
|
||
|
||
:root {
|
||
--radius: 0.875rem;
|
||
|
||
--background: #f5f1ea;
|
||
--foreground: #171412;
|
||
|
||
--card: #fffdf8;
|
||
--card-foreground: #171412;
|
||
|
||
--popover: #fffdf8;
|
||
--popover-foreground: #171412;
|
||
|
||
--primary: #8a6742;
|
||
--primary-foreground: #fffaf4;
|
||
|
||
--secondary: #ece4d7;
|
||
--secondary-foreground: #2e241c;
|
||
|
||
--muted: #efe8dd;
|
||
--muted-foreground: #7c6f62;
|
||
|
||
--accent: #e8dfd1;
|
||
--accent-foreground: #4b3724;
|
||
|
||
--destructive: #cb5f74;
|
||
|
||
--border: #ddd2c2;
|
||
--input: #cfbfaa;
|
||
--ring: rgba(138, 103, 66, 0.22);
|
||
|
||
--brand: #8a6742;
|
||
--brand-foreground: #fffaf4;
|
||
--success: #5e856b;
|
||
--warning: #c98a45;
|
||
|
||
--chart-1: #8a6742;
|
||
--chart-2: #b79267;
|
||
--chart-3: #6d7788;
|
||
--chart-4: #5e856b;
|
||
--chart-5: #c98253;
|
||
|
||
--sidebar: #fffdf8;
|
||
--sidebar-foreground: #171412;
|
||
--sidebar-primary: #8a6742;
|
||
--sidebar-primary-foreground: #fffaf4;
|
||
--sidebar-accent: #e8dfd1;
|
||
--sidebar-accent-foreground: #2e241c;
|
||
--sidebar-border: #ddd2c2;
|
||
--sidebar-ring: rgba(138, 103, 66, 0.22);
|
||
|
||
--editor-surface: rgba(255, 251, 245, 0.92);
|
||
--editor-surface-muted: rgba(239, 232, 221, 0.92);
|
||
--editor-border: rgba(124, 111, 98, 0.22);
|
||
--editor-border-strong: rgba(124, 111, 98, 0.36);
|
||
--editor-shadow: rgba(23, 20, 18, 0.14);
|
||
--editor-text: #2e241c;
|
||
--editor-text-muted: rgba(46, 36, 28, 0.54);
|
||
--editor-accent: #8a6742;
|
||
--editor-accent-soft: rgba(138, 103, 66, 0.12);
|
||
--editor-danger: #cb5f74;
|
||
--editor-danger-soft: rgba(203, 95, 116, 0.12);
|
||
|
||
--page-glow-1: rgba(206, 185, 156, 0.32);
|
||
--page-glow-2: rgba(170, 142, 96, 0.18);
|
||
--page-gradient-top: #fcfaf6;
|
||
--page-gradient-bottom: #f5f1ea;
|
||
--gradient-subtle-1: #fcfaf6;
|
||
--gradient-subtle-2: #f1e8db;
|
||
--gradient-subtle-3: #e6dac8;
|
||
--gradient-brand-1: #3a2b1e;
|
||
--gradient-brand-2: #8a6742;
|
||
--gradient-brand-3: #d0b08c;
|
||
--text-gradient-1: #171412;
|
||
--text-gradient-2: #8a6742;
|
||
--text-gradient-3: #c7a173;
|
||
--glass-bg: rgba(255, 251, 245, 0.84);
|
||
--glass-border: rgba(221, 210, 194, 0.92);
|
||
--glow-shadow: rgba(138, 103, 66, 0.2);
|
||
--brand-shadow: rgba(138, 103, 66, 0.26);
|
||
--terminal-background: #17171d;
|
||
--terminal-surface: #121218;
|
||
--terminal-border: rgba(255, 255, 255, 0.08);
|
||
--terminal-text: #f3f4f6;
|
||
--terminal-text-muted: rgba(243, 244, 246, 0.66);
|
||
--terminal-prompt: #b79267;
|
||
}
|
||
|
||
.dark {
|
||
--background: #09090d;
|
||
--foreground: #f5f7ff;
|
||
|
||
--card: #12131a;
|
||
--card-foreground: #f5f7ff;
|
||
|
||
--popover: #141624;
|
||
--popover-foreground: #f5f7ff;
|
||
|
||
--primary: #8f7cff;
|
||
--primary-foreground: #f8f7ff;
|
||
|
||
--secondary: #171826;
|
||
--secondary-foreground: #e8ebff;
|
||
|
||
--muted: #131422;
|
||
--muted-foreground: #9da2bf;
|
||
|
||
--accent: #1b1d31;
|
||
--accent-foreground: #d9ddff;
|
||
|
||
--destructive: #ff7ea8;
|
||
|
||
--border: rgba(126, 132, 173, 0.2);
|
||
--input: rgba(126, 132, 173, 0.28);
|
||
--ring: rgba(143, 124, 255, 0.36);
|
||
|
||
--brand: #a18cff;
|
||
--brand-foreground: #f8f7ff;
|
||
--success: #48d7c2;
|
||
--warning: #ffb86b;
|
||
|
||
--chart-1: #8f7cff;
|
||
--chart-2: #45d4ff;
|
||
--chart-3: #5f7cff;
|
||
--chart-4: #ff78b8;
|
||
--chart-5: #ffb86b;
|
||
|
||
--sidebar: #0f1018;
|
||
--sidebar-foreground: #f5f7ff;
|
||
--sidebar-primary: #8f7cff;
|
||
--sidebar-primary-foreground: #f8f7ff;
|
||
--sidebar-accent: #1b1d31;
|
||
--sidebar-accent-foreground: #f5f7ff;
|
||
--sidebar-border: rgba(126, 132, 173, 0.2);
|
||
--sidebar-ring: rgba(143, 124, 255, 0.36);
|
||
|
||
--editor-surface: rgba(18, 19, 26, 0.92);
|
||
--editor-surface-muted: rgba(27, 29, 49, 0.86);
|
||
--editor-border: rgba(126, 132, 173, 0.2);
|
||
--editor-border-strong: rgba(126, 132, 173, 0.34);
|
||
--editor-shadow: rgba(0, 0, 0, 0.32);
|
||
--editor-text: #f5f7ff;
|
||
--editor-text-muted: rgba(245, 247, 255, 0.58);
|
||
--editor-accent: #8f7cff;
|
||
--editor-accent-soft: rgba(143, 124, 255, 0.16);
|
||
--editor-danger: #ff7ea8;
|
||
--editor-danger-soft: rgba(255, 126, 168, 0.16);
|
||
|
||
--page-glow-1: rgba(143, 124, 255, 0.2);
|
||
--page-glow-2: rgba(69, 212, 255, 0.12);
|
||
--page-gradient-top: #151625;
|
||
--page-gradient-bottom: #09090d;
|
||
--gradient-subtle-1: #191b2d;
|
||
--gradient-subtle-2: #10111b;
|
||
--gradient-subtle-3: #09090d;
|
||
--gradient-brand-1: #6156ff;
|
||
--gradient-brand-2: #9a7cff;
|
||
--gradient-brand-3: #45d4ff;
|
||
--text-gradient-1: #f5f7ff;
|
||
--text-gradient-2: #a18cff;
|
||
--text-gradient-3: #45d4ff;
|
||
--glass-bg: rgba(18, 19, 26, 0.84);
|
||
--glass-border: rgba(126, 132, 173, 0.18);
|
||
--glow-shadow: rgba(143, 124, 255, 0.22);
|
||
--brand-shadow: rgba(143, 124, 255, 0.28);
|
||
--terminal-background: #12131a;
|
||
--terminal-surface: #0d0f16;
|
||
--terminal-border: rgba(255, 255, 255, 0.08);
|
||
--terminal-text: #f5f7ff;
|
||
--terminal-text-muted: rgba(245, 247, 255, 0.64);
|
||
--terminal-prompt: #a18cff;
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border outline-ring/50;
|
||
}
|
||
|
||
html {
|
||
font-family: "Avenir Next", "SF Pro Rounded", "SF Pro Display", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
body {
|
||
@apply bg-background text-foreground;
|
||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||
min-height: 100vh;
|
||
background-image:
|
||
radial-gradient(circle at top left, var(--page-glow-1), transparent 34%),
|
||
radial-gradient(circle at 85% 12%, var(--page-glow-2), transparent 22%),
|
||
linear-gradient(180deg, var(--page-gradient-top) 0%, var(--page-gradient-bottom) 100%);
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
::selection {
|
||
background: var(--ring);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
@keyframes artifact-shuffle-in {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(24px) scale(0.9) rotate(-4deg);
|
||
}
|
||
40% {
|
||
opacity: 1;
|
||
transform: translateY(-6px) scale(1.03) rotate(2deg);
|
||
}
|
||
70% {
|
||
transform: translateY(3px) scale(0.98) rotate(-1deg);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
.animate-artifact-shuffle-in {
|
||
animation-name: artifact-shuffle-in;
|
||
animation-duration: 800ms;
|
||
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
||
animation-fill-mode: backwards;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
.card {
|
||
@apply rounded-xl bg-card;
|
||
border: 1px solid var(--border);
|
||
box-shadow:
|
||
0 1px 2px rgba(16, 38, 52, 0.03),
|
||
0 14px 34px rgba(16, 38, 52, 0.06);
|
||
}
|
||
|
||
.card:hover {
|
||
border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
|
||
box-shadow:
|
||
0 1px 2px rgba(16, 38, 52, 0.04),
|
||
0 18px 42px rgba(16, 38, 52, 0.08);
|
||
}
|
||
|
||
.dark .card {
|
||
box-shadow:
|
||
0 1px 2px rgba(0, 0, 0, 0.28),
|
||
0 18px 48px rgba(0, 0, 0, 0.24);
|
||
}
|
||
|
||
.glow-effect {
|
||
box-shadow: 0 14px 32px var(--glow-shadow);
|
||
}
|
||
|
||
.dark .glow-effect {
|
||
box-shadow: 0 14px 38px var(--glow-shadow);
|
||
}
|
||
|
||
.btn-brand {
|
||
@apply bg-primary text-primary-foreground transition-all duration-200;
|
||
}
|
||
|
||
.btn-brand:hover {
|
||
box-shadow: 0 12px 26px var(--brand-shadow);
|
||
}
|
||
|
||
.surface-panel {
|
||
background: color-mix(in srgb, var(--card) 92%, white 8%);
|
||
border: 1px solid var(--border);
|
||
box-shadow:
|
||
0 1px 2px rgba(16, 38, 52, 0.03),
|
||
0 22px 52px rgba(16, 38, 52, 0.08);
|
||
backdrop-filter: blur(14px);
|
||
}
|
||
|
||
.surface-subtle {
|
||
background: color-mix(in srgb, var(--card) 84%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
|
||
}
|
||
|
||
.prose {
|
||
@apply text-foreground leading-relaxed;
|
||
}
|
||
|
||
.prose h1 { @apply mt-6 mb-4 text-2xl font-bold; }
|
||
.prose h2 { @apply mt-5 mb-3 text-xl font-bold; }
|
||
.prose h3 { @apply mt-4 mb-2 text-lg font-bold; }
|
||
.prose p { @apply my-3; }
|
||
.prose ul { @apply my-3 list-disc pl-6; }
|
||
.prose ol { @apply my-3 list-decimal pl-6; }
|
||
.prose li { @apply my-1; }
|
||
.prose blockquote { @apply my-4 border-l-4 border-muted pl-4 italic; }
|
||
.prose code { @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm; }
|
||
.prose pre { @apply my-4 overflow-x-auto rounded-xl border border-border bg-card p-4; }
|
||
.prose pre code { @apply bg-transparent p-0; }
|
||
.prose table { @apply my-6 w-full border-collapse text-sm; }
|
||
.prose th { @apply border border-border bg-muted/50 px-4 py-2 text-left font-bold; }
|
||
.prose td { @apply border border-border px-4 py-2; }
|
||
.prose tr:nth-child(even) { @apply bg-muted/20; }
|
||
}
|
||
|
||
@layer utilities {
|
||
.transition-default {
|
||
@apply transition-all duration-200 ease-out;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar {
|
||
width: 4px;
|
||
height: 4px;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-track {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||
background-color: rgba(97, 119, 133, 0.36);
|
||
border-radius: 9999px;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba(97, 119, 133, 0.5);
|
||
}
|
||
|
||
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
|
||
background-color: rgba(159, 180, 188, 0.24);
|
||
border-radius: 9999px;
|
||
}
|
||
|
||
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba(159, 180, 188, 0.36);
|
||
}
|
||
|
||
.bg-gradient-subtle {
|
||
background: linear-gradient(180deg, var(--gradient-subtle-1) 0%, var(--gradient-subtle-2) 52%, var(--gradient-subtle-3) 100%);
|
||
}
|
||
|
||
.dark .bg-gradient-subtle {
|
||
background: linear-gradient(180deg, var(--gradient-subtle-1) 0%, var(--gradient-subtle-2) 50%, var(--gradient-subtle-3) 100%);
|
||
}
|
||
|
||
.bg-gradient-brand {
|
||
background: linear-gradient(135deg, var(--gradient-brand-1) 0%, var(--gradient-brand-2) 48%, var(--gradient-brand-3) 100%);
|
||
}
|
||
|
||
.glass {
|
||
@apply backdrop-blur-md;
|
||
background: var(--glass-bg);
|
||
border: 1px solid var(--glass-border);
|
||
}
|
||
|
||
.dark .glass {
|
||
background: var(--glass-bg);
|
||
border: 1px solid var(--glass-border);
|
||
}
|
||
|
||
.hover-lift {
|
||
@apply transition-all duration-200 ease-out;
|
||
}
|
||
|
||
.hover-lift:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow:
|
||
0 10px 22px rgba(16, 38, 52, 0.08),
|
||
0 4px 10px rgba(16, 38, 52, 0.04);
|
||
}
|
||
|
||
.dark .hover-lift:hover {
|
||
box-shadow:
|
||
0 8px 16px rgba(0, 0, 0, 0.3),
|
||
0 4px 8px rgba(0, 0, 0, 0.16);
|
||
}
|
||
|
||
.press-effect {
|
||
@apply transition-transform duration-100 ease-out;
|
||
}
|
||
|
||
.press-effect:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.focus-ring {
|
||
@apply outline-none ring-2 ring-primary/20 ring-offset-2 ring-offset-background;
|
||
}
|
||
|
||
.text-gradient {
|
||
@apply bg-clip-text text-transparent;
|
||
background-image: linear-gradient(135deg, var(--text-gradient-1) 0%, var(--text-gradient-2) 48%, var(--text-gradient-3) 100%);
|
||
}
|
||
|
||
.dark .text-gradient {
|
||
background-image: linear-gradient(135deg, var(--text-gradient-1) 0%, var(--text-gradient-2) 46%, var(--text-gradient-3) 100%);
|
||
}
|
||
|
||
.text-brand {
|
||
color: var(--brand);
|
||
}
|
||
|
||
.shadow-soft {
|
||
box-shadow:
|
||
0 4px 12px rgba(16, 38, 52, 0.04),
|
||
0 10px 24px rgba(16, 38, 52, 0.05);
|
||
}
|
||
|
||
.border-hover {
|
||
@apply border border-border transition-colors duration-200;
|
||
}
|
||
|
||
.border-hover:hover {
|
||
border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
|
||
}
|
||
|
||
/* ================================================
|
||
* 全局覆盖 slate/zinc 硬编码颜色 → 语义变量
|
||
* slate 色系为冷色调（偏蓝），本项目为暖色调，
|
||
* 统一替换确保亮色/深色模式下颜色风格一致
|
||
* ================================================ */
|
||
|
||
/* 背景 */
|
||
.bg-white {
|
||
background-color: var(--card);
|
||
}
|
||
|
||
.bg-slate-50,
|
||
.bg-zinc-50,
|
||
.bg-gray-50 {
|
||
background-color: var(--card);
|
||
}
|
||
|
||
.bg-slate-100,
|
||
.bg-zinc-100 {
|
||
background-color: var(--accent);
|
||
}
|
||
|
||
/* 文字 */
|
||
.text-black,
|
||
.text-slate-900,
|
||
.text-zinc-900 {
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.text-slate-800,
|
||
.text-zinc-800,
|
||
.text-slate-700,
|
||
.text-zinc-700 {
|
||
color: color-mix(in srgb, var(--foreground) 80%, transparent);
|
||
}
|
||
|
||
.text-slate-600,
|
||
.text-zinc-600 {
|
||
color: color-mix(in srgb, var(--muted-foreground) 120%, transparent);
|
||
}
|
||
|
||
.text-slate-500,
|
||
.text-zinc-500,
|
||
.text-gray-500,
|
||
.text-slate-400,
|
||
.text-zinc-400,
|
||
.text-gray-400 {
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
.text-slate-300,
|
||
.text-zinc-300 {
|
||
color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
|
||
}
|
||
|
||
/* 边框 */
|
||
.border-slate-100,
|
||
.border-slate-200,
|
||
.border-zinc-100,
|
||
.border-zinc-200 {
|
||
border-color: var(--border);
|
||
}
|
||
|
||
.border-slate-700,
|
||
.border-slate-800,
|
||
.border-zinc-700,
|
||
.border-zinc-800 {
|
||
border-color: var(--border);
|
||
}
|
||
|
||
/* hover 背景 */
|
||
.hover\:bg-slate-50:hover,
|
||
.hover\:bg-slate-100:hover,
|
||
.hover\:bg-zinc-50:hover,
|
||
.hover\:bg-zinc-100:hover {
|
||
background-color: var(--accent);
|
||
}
|
||
|
||
.editor-floating-panel {
|
||
background: var(--editor-surface);
|
||
border: 1px solid var(--editor-border);
|
||
box-shadow:
|
||
0 18px 44px var(--editor-shadow),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||
backdrop-filter: blur(18px);
|
||
}
|
||
|
||
.editor-floating-panel-soft {
|
||
background: var(--editor-surface);
|
||
border: 1px solid var(--editor-border);
|
||
box-shadow:
|
||
0 12px 34px var(--editor-shadow),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.14);
|
||
backdrop-filter: blur(18px);
|
||
}
|
||
|
||
.editor-toolbar-chip {
|
||
background: var(--editor-surface-muted);
|
||
border: 1px solid transparent;
|
||
color: var(--editor-text);
|
||
}
|
||
|
||
.editor-toolbar-chip:hover {
|
||
background: color-mix(in srgb, var(--editor-accent-soft) 55%, var(--editor-surface-muted));
|
||
}
|
||
|
||
.editor-toolbar-chip-active {
|
||
background: var(--editor-accent-soft);
|
||
color: var(--editor-accent);
|
||
}
|
||
|
||
.editor-toolbar-divider {
|
||
background: var(--editor-border);
|
||
}
|
||
|
||
.editor-toolbar-danger {
|
||
background: var(--editor-danger-soft);
|
||
color: var(--editor-danger);
|
||
}
|
||
|
||
/* 深色背景（终端/代码块）保留不覆盖：bg-slate-900 bg-slate-950 */
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.3; }
|
||
}
|