260 lines
8.3 KiB
CSS
260 lines
8.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ═══════════════════════════════════════════
|
|
shadcn/ui CSS 变量体系（由 ThemeContext 动态切换）
|
|
═══════════════════════════════════════════ */
|
|
@layer base {
|
|
:root {
|
|
--background: 222 47% 5%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222 47% 8%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222 47% 8%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222 47% 5%;
|
|
--secondary: 217 33% 17%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217 33% 17%;
|
|
--muted-foreground: 215 20% 65%;
|
|
--accent: 217 33% 17%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--border: 217 33% 17%;
|
|
--input: 217 33% 17%;
|
|
--ring: 212 68% 58%;
|
|
--radius: 0.75rem;
|
|
--color-temp: 211 85% 52%;
|
|
--color-gas: 252 65% 58%;
|
|
--color-valve: 32 90% 52%;
|
|
--color-struct: 160 55% 42%;
|
|
--shadow-xs: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
|
|
--shadow-sm: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
|
|
--shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
|
|
--shadow-lg: 0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
|
|
--transition-smooth: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
box-sizing: border-box;
|
|
}
|
|
button {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
color: inherit;
|
|
border: 0;
|
|
}
|
|
body {
|
|
background: #000a1e;
|
|
color: #a8d8ff;
|
|
min-height: 100vh;
|
|
font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
Apple 风格工具类（用于浅色主题模块）
|
|
═══════════════════════════════════════════ */
|
|
@layer utilities {
|
|
.card-glass {
|
|
background-color: rgba(255,255,255,0.88);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid rgba(255,255,255,0.7);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.card-solid {
|
|
background-color: #ffffff;
|
|
border: 1px solid #e8e8ed;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.card-elevated {
|
|
background-color: #ffffff;
|
|
border: 1px solid rgba(232,232,237,0.6);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.sidebar-bg {
|
|
background-color: rgba(248,248,250,0.98);
|
|
backdrop-filter: blur(20px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%);
|
|
}
|
|
.text-gradient-primary {
|
|
background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(252 70% 58%));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.list-card {
|
|
background-color: #ffffff;
|
|
border: 1px solid #e8e8ed;
|
|
border-radius: 10px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
|
transition: all 0.18s ease;
|
|
}
|
|
.list-card:hover {
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
.list-card-active {
|
|
background-color: #f0f7ff;
|
|
border-color: rgba(10,122,255,0.3);
|
|
box-shadow: 0 2px 10px rgba(10,122,255,0.10);
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
太空舱主题 CSS — 动画关键帧
|
|
═══════════════════════════════════════════ */
|
|
|
|
@keyframes space-border-scan {
|
|
0% { left: -100%; }
|
|
100% { left: 200%; }
|
|
}
|
|
|
|
@keyframes space-pulse {
|
|
0%, 100% { opacity: 0.5; box-shadow: 0 0 10px rgba(0,212,255,0.2); }
|
|
50% { opacity: 1; box-shadow: 0 0 25px rgba(0,212,255,0.6); }
|
|
}
|
|
|
|
@keyframes star-twinkle {
|
|
0%, 100% { opacity: 0.3; transform: scale(1); }
|
|
50% { opacity: 1; transform: scale(1.4); }
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
from { opacity: 0; transform: translateX(-20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes slide-in-right-space {
|
|
from { opacity: 0; transform: translateX(20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes slide-in-up {
|
|
from { opacity: 0; transform: translateY(16px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes notice-in {
|
|
from { opacity: 0; transform: translateX(-12px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes card-in {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes glow-pulse {
|
|
0%, 100% { box-shadow: 0 0 10px rgba(0,212,255,0.2); }
|
|
50% { box-shadow: 0 0 30px rgba(0,212,255,0.5); }
|
|
}
|
|
|
|
@keyframes scan-line {
|
|
0% { top: 0%; opacity: 0.6; }
|
|
100% { top: 100%; opacity: 0; }
|
|
}
|
|
|
|
/* 拖入模块处理动画 */
|
|
@keyframes module-spin {
|
|
0% { transform: rotateY(0deg) scale(1); }
|
|
30% { transform: rotateY(90deg) scale(0.92); }
|
|
60% { transform: rotateY(180deg) scale(0.88); }
|
|
80% { transform: rotateY(270deg) scale(0.92); }
|
|
100% { transform: rotateY(360deg) scale(1); }
|
|
}
|
|
|
|
@keyframes orbit-ring {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes orbit-ring-rev {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(-360deg); }
|
|
}
|
|
|
|
@keyframes processing-dots {
|
|
0%, 20% { opacity: 0.2; transform: scale(0.8); }
|
|
50% { opacity: 1; transform: scale(1.2); }
|
|
80%, 100%{ opacity: 0.2; transform: scale(0.8); }
|
|
}
|
|
|
|
@keyframes content-reveal {
|
|
from { opacity: 0; transform: translateY(18px) scale(0.97); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
@keyframes scan-sweep {
|
|
0% { top: -4px; opacity: 0; }
|
|
10% { opacity: 0.8; }
|
|
90% { opacity: 0.8; }
|
|
100% { top: 100%; opacity: 0; }
|
|
}
|
|
|
|
/* 知识图谱模块动画 */
|
|
@keyframes fade-in-up {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slide-in-right {
|
|
from { opacity: 0; transform: translateX(14px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
太空舱主题 CSS — 动画工具类
|
|
═══════════════════════════════════════════ */
|
|
|
|
.space-animate-left { animation: slide-in-left 0.4s cubic-bezier(0.4,0,0.2,1); }
|
|
.space-animate-right { animation: slide-in-right-space 0.4s cubic-bezier(0.4,0,0.2,1); }
|
|
.space-animate-up { animation: slide-in-up 0.4s cubic-bezier(0.4,0,0.2,1); }
|
|
.space-pulse { animation: space-pulse 2.5s ease-in-out infinite; }
|
|
.glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }
|
|
|
|
.space-card {
|
|
background: rgba(0, 20, 60, 0.55);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(0, 212, 255, 0.25);
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.06), inset 0 1px 0 rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.space-scroll::-webkit-scrollbar { width: 4px; }
|
|
.space-scroll::-webkit-scrollbar-track { background: rgba(0,212,255,0.04); }
|
|
.space-scroll::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.25); border-radius: 4px; }
|
|
.space-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.45); }
|
|
|
|
::-webkit-scrollbar { width: 5px; height: 5px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 10px; }
|
|
|
|
.module-processing {
|
|
animation: module-spin 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
transform-style: preserve-3d;
|
|
perspective: 800px;
|
|
}
|
|
|
|
.content-reveal {
|
|
animation: content-reveal 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
|
}
|
|
|
|
.graph-node { cursor: pointer; }
|
|
|
|
.animate-fade-in-up { animation: fade-in-up 0.25s ease-out; }
|
|
.animate-slide-in-right { animation: slide-in-right 0.25s ease-out; }
|