305 lines
7.4 KiB
CSS
305 lines
7.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ==================== CSS Properties for Animations ==================== */
|
|
/* Border Beam Animation Variable */
|
|
@property --start {
|
|
syntax: '<number>';
|
|
initial-value: 0;
|
|
inherits: false;
|
|
}
|
|
|
|
/* Shimmer Position */
|
|
@property --shimmer-position {
|
|
syntax: '<percentage>';
|
|
initial-value: 0%;
|
|
inherits: false;
|
|
}
|
|
|
|
:root {
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
--font-dot-matrix: 'DSEG7-Classic', 'JetBrains Mono', monospace;
|
|
--wooo-radius-xs: 2px;
|
|
--wooo-radius-sm: 4px;
|
|
--wooo-radius-control: 6px;
|
|
--wooo-radius-card: 8px;
|
|
--wooo-radius-panel: 8px;
|
|
--wooo-radius-pill: 9999px;
|
|
--wooo-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
--wooo-shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
/* ==================== Nothing Dot Matrix Font ==================== */
|
|
/* DSEG7-Classic - Digital 7-Segment Display Font */
|
|
@font-face {
|
|
font-family: 'DSEG7-Classic';
|
|
src: url('/fonts/DSEG7Classic-Bold.woff2') format('woff2'),
|
|
url('/fonts/DSEG7Classic-Bold.woff') format('woff');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'DSEG7-Classic';
|
|
src: url('/fonts/DSEG7Classic-Regular.woff2') format('woff2'),
|
|
url('/fonts/DSEG7Classic-Regular.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* ==================== Nothing.tech Light Theme Base ==================== */
|
|
@layer base {
|
|
html {
|
|
@apply antialiased;
|
|
}
|
|
|
|
body {
|
|
@apply bg-nothing-gray-50 text-nothing-gray-900;
|
|
font-feature-settings: 'liga' 1, 'calt' 1;
|
|
}
|
|
|
|
/* 點陣紋理背景 (Dot Matrix Pattern) */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
background-image: radial-gradient(
|
|
circle at center,
|
|
rgba(0, 0, 0, 0.04) 1px,
|
|
transparent 1px
|
|
);
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
/* 主內容層級 */
|
|
#__next,
|
|
main {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 滾動條 - 極簡風格 */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-nothing-gray-300 rounded-full;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-nothing-gray-400;
|
|
}
|
|
|
|
/* 選取樣式 */
|
|
::selection {
|
|
@apply bg-nothing-gray-900 text-nothing-white;
|
|
}
|
|
}
|
|
|
|
/* ==================== Glass Components ==================== */
|
|
@layer components {
|
|
/* 主要玻璃卡片 */
|
|
.glass-card {
|
|
@apply bg-white/70 backdrop-blur-glass border border-black/[0.08] rounded-glass shadow-glass;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.glass-card:hover {
|
|
@apply bg-white/80 shadow-glass-hover border-black/[0.12];
|
|
}
|
|
|
|
/* 頂部導航 */
|
|
.glass-header {
|
|
@apply bg-white/85 backdrop-blur-[20px] border-b border-black/[0.06];
|
|
}
|
|
|
|
/* AI Copilot 面板 */
|
|
.glass-copilot {
|
|
@apply bg-nothing-gray-50/90 backdrop-blur-[20px] border border-status-thinking/20 rounded-glass;
|
|
box-shadow: 0 4px 24px rgba(139, 92, 246, 0.1);
|
|
}
|
|
|
|
/* 狀態指示點 */
|
|
.status-dot {
|
|
@apply w-2 h-2 rounded-full;
|
|
}
|
|
|
|
.status-dot-healthy {
|
|
@apply status-dot bg-status-healthy;
|
|
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
|
|
}
|
|
|
|
.status-dot-syncing {
|
|
@apply status-dot bg-status-syncing animate-pulse;
|
|
box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
.status-dot-warning {
|
|
@apply status-dot bg-status-warning;
|
|
box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
|
|
}
|
|
|
|
.status-dot-critical {
|
|
@apply status-dot bg-status-critical animate-breathe;
|
|
box-shadow: 0 0 8px rgba(255, 51, 0, 0.5);
|
|
}
|
|
|
|
.status-dot-idle {
|
|
@apply status-dot bg-status-idle;
|
|
}
|
|
|
|
.status-dot-thinking {
|
|
@apply status-dot bg-status-thinking animate-breathe;
|
|
box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
|
|
}
|
|
|
|
/* 節點標籤 */
|
|
.node-badge {
|
|
@apply inline-flex items-center gap-1.5 px-2 py-0.5 rounded-button;
|
|
@apply bg-nothing-gray-100 text-nothing-gray-700 font-mono text-xs;
|
|
}
|
|
|
|
/* 服務列表項 */
|
|
.service-item {
|
|
@apply flex items-center justify-between py-2 px-3 rounded-button;
|
|
@apply hover:bg-nothing-gray-100/50 transition-colors;
|
|
}
|
|
|
|
/* 按鈕 - 主要 */
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-button;
|
|
@apply bg-nothing-gray-900 text-nothing-white font-medium text-sm;
|
|
@apply hover:bg-nothing-gray-800 transition-colors;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-nothing-gray-400 focus:ring-offset-2;
|
|
}
|
|
|
|
/* 按鈕 - 次要 */
|
|
.btn-secondary {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-button;
|
|
@apply bg-nothing-gray-100 text-nothing-gray-800 font-medium text-sm;
|
|
@apply hover:bg-nothing-gray-200 transition-colors;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-nothing-gray-300 focus:ring-offset-2;
|
|
}
|
|
|
|
/* 按鈕 - 警告 */
|
|
.btn-warning {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-button;
|
|
@apply bg-status-critical/10 text-status-critical font-medium text-sm;
|
|
@apply hover:bg-status-critical/20 transition-colors;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-status-critical/30 focus:ring-offset-2;
|
|
}
|
|
|
|
/* AI 思考指示器 */
|
|
.ai-indicator {
|
|
@apply animate-breathe;
|
|
}
|
|
|
|
/* 掃描線動畫 */
|
|
.scan-line {
|
|
@apply absolute inset-0 overflow-hidden;
|
|
}
|
|
|
|
.scan-line::after {
|
|
content: '';
|
|
@apply absolute inset-y-0 w-1/3;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(139, 92, 246, 0.1),
|
|
transparent
|
|
);
|
|
animation: scan 2s linear infinite;
|
|
}
|
|
}
|
|
|
|
/* ==================== Utilities ==================== */
|
|
@layer utilities {
|
|
/* Nothing.tech 高對比墨水色 (禁止 muted-foreground) */
|
|
.text-ink {
|
|
color: #111111;
|
|
}
|
|
|
|
.text-ink-secondary {
|
|
color: #525252;
|
|
}
|
|
|
|
/* Dot Matrix Display Numbers (靈魂注入) */
|
|
.font-dot-matrix {
|
|
font-family: var(--font-dot-matrix);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* 巨型數字顯示 (2x size) */
|
|
.dot-matrix-display {
|
|
font-family: var(--font-dot-matrix);
|
|
font-size: 2.5rem;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
color: #111111;
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.dot-matrix-display-sm {
|
|
font-family: var(--font-dot-matrix);
|
|
font-size: 1.5rem;
|
|
line-height: 1.2;
|
|
font-weight: 700;
|
|
color: #111111;
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
/* 文字漸層 */
|
|
.text-gradient {
|
|
@apply bg-clip-text text-transparent;
|
|
background-image: linear-gradient(135deg, #111111 0%, #525252 100%);
|
|
}
|
|
|
|
/* 網格背景 (替代方案) */
|
|
.bg-grid {
|
|
background-image:
|
|
linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
|
|
background-size: 32px 32px;
|
|
}
|
|
|
|
/* 隱藏滾動條但保留功能 */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes ring-spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes orb-pulse {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.08); opacity: 0.85; }
|
|
}
|