/* ============================================================ 鲸影 · WhaleShadow — 主题系统（5 套） 配色不是随手调的，全部取自成熟的知名配色方案： 夜蓝 Night Blue（本项目自定义，默认） 摩卡 Catppuccin Mocha https://catppuccin.com 东京夜 Tokyo Night Storm https://github.com/folke/tokyonight.nvim 神奈川 Kanagawa Dragon https://github.com/rebelot/kanagawa.nvim 玫瑰 Rosé Pine Dawn https://rosepinetheme.com 每套 44 个语义 token。其中 bg/panel/border/text/accent/语义色直接来自 各方案的官方色值；tint / glow / divider / 渐变由色板按统一规则推导， 以保证 5 套主题的明暗层次关系一致（不会有一套看起来特别脏）。 通过 切换。样式表正文完全与主题无关 —— 正文里没有任何硬编码色值。 ⚠️ `:root` 放的是默认主题（夜蓝）的 token，因此必须与 `[data-theme="night"]` 保持同值；改默认主题要同时改两处， 另一处在 app.js 的 DEFAULT_THEME。 ============================================================ */ /* 通用变量（与配色无关）──────────────────────── */ :root { --radius: 12px; --mono: "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace; } /* ══ 夜蓝 Night Blue ════════════════════════════════════════ 默认。深海军蓝 + 天青，长时间盯盘最耐看。 */ :root, [data-theme="night"] { --bg: #070b14; --bg-2: #0d1420; --bg-3: #131c2b; --panel: #0e1622; --border: #1d2839; --border-2: #2b3a51; --text: #e4ecf8; --text-2: #93a6c2; --text-3: #6b7f9c; --accent: #5aa9e6; --accent-2: #7fc0f5; --accent-3: #3b7cb5; --glow: rgba(90,169,230,0.28); --on-accent: #06121d; --up: #e0665d; --up-soft: #ef9a93; --down: #4fae86; --down-soft: #7fd0ad; --warn: #d8a24c; --purple: #a08fd0; --purple-soft: #c3b7e6; --neutral: #6b7f9c; --tint-up: rgba(224,102,93,0.14); --tint-up-2: rgba(224,102,93,0.3); --tint-down: rgba(79,174,134,0.14); --tint-down-2: rgba(79,174,134,0.3); --tint-purple: rgba(160,143,208,0.14); --tint-purple-2: rgba(160,143,208,0.3); --tint-warn: rgba(216,162,76,0.13); --tint-warn-2: rgba(216,162,76,0.38); --tint-accent: rgba(90,169,230,0.12); --tint-accent-2: rgba(90,169,230,0.32); --tint-focus: rgba(90,169,230,0.16); --tint-neutral: rgba(107,127,156,0.18); --tint-neutral-2: rgba(107,127,156,0.34); --tint-row-hover: rgba(90,169,230,0.055); --tint-head: rgba(13,20,32,0.84); --tint-mask: rgba(7,11,20,0.7); --tint-shadow: rgba(0,0,0,0.55); --divider: rgba(29,40,57,0.7); --scroll-thumb: #2b3a51; --accent-grad: linear-gradient(180deg,#a4cff1,#5aa9e6 55%,#498abc); --halo-1: rgba(90,169,230,0.1); --halo-2: rgba(59,124,181,0.08); } /* ══ 摩卡 Catppuccin Mocha ══════════════════════════════════ Catppuccin 官方配色。柔和低对比，眼睛最不累。 */ [data-theme="mocha"] { --bg: #1e1e2e; --bg-2: #181825; --bg-3: #313244; --panel: #181825; --border: #313244; --border-2: #45475a; --text: #cdd6f4; --text-2: #bac2de; --text-3: #7f849c; --accent: #89b4fa; --accent-2: #b4befe; --accent-3: #74c7ec; --glow: rgba(137,180,250,0.28); --on-accent: #11111b; --up: #f38ba8; --up-soft: #eba0ac; --down: #a6e3a1; --down-soft: #94e2d5; --warn: #f9e2af; --purple: #cba6f7; --purple-soft: #f5c2e7; --neutral: #6c7086; --tint-up: rgba(243,139,168,0.14); --tint-up-2: rgba(243,139,168,0.3); --tint-down: rgba(166,227,161,0.14); --tint-down-2: rgba(166,227,161,0.3); --tint-purple: rgba(203,166,247,0.14); --tint-purple-2: rgba(203,166,247,0.3); --tint-warn: rgba(249,226,175,0.13); --tint-warn-2: rgba(249,226,175,0.38); --tint-accent: rgba(137,180,250,0.12); --tint-accent-2: rgba(137,180,250,0.32); --tint-focus: rgba(137,180,250,0.16); --tint-neutral: rgba(108,112,134,0.18); --tint-neutral-2: rgba(108,112,134,0.34); --tint-row-hover: rgba(137,180,250,0.055); --tint-head: rgba(24,24,37,0.84); --tint-mask: rgba(30,30,46,0.7); --tint-shadow: rgba(0,0,0,0.55); --divider: rgba(49,50,68,0.7); --scroll-thumb: #45475a; --accent-grad: linear-gradient(180deg,#bed5fc,#89b4fa 55%,#7093cd); --halo-1: rgba(137,180,250,0.1); --halo-2: rgba(116,199,236,0.08); } /* ══ 东京夜 Tokyo Night Storm ═══════════════════════════════ Tokyo Night Storm。冷调蓝紫，长时间阅读最舒服。 */ [data-theme="tokyo"] { --bg: #24283b; --bg-2: #1f2335; --bg-3: #292e42; --panel: #1f2335; --border: #292e42; --border-2: #3b4261; --text: #c0caf5; --text-2: #a9b1d6; --text-3: #565f89; --accent: #7aa2f7; --accent-2: #89ddff; --accent-3: #3d59a1; --glow: rgba(122,162,247,0.28); --on-accent: #1a1b26; --up: #f7768e; --up-soft: #ff899d; --down: #9ece6a; --down-soft: #73daca; --warn: #e0af68; --purple: #bb9af7; --purple-soft: #9d7cd8; --neutral: #565f89; --tint-up: rgba(247,118,142,0.14); --tint-up-2: rgba(247,118,142,0.3); --tint-down: rgba(158,206,106,0.14); --tint-down-2: rgba(158,206,106,0.3); --tint-purple: rgba(187,154,247,0.14); --tint-purple-2: rgba(187,154,247,0.3); --tint-warn: rgba(224,175,104,0.13); --tint-warn-2: rgba(224,175,104,0.38); --tint-accent: rgba(122,162,247,0.12); --tint-accent-2: rgba(122,162,247,0.32); --tint-focus: rgba(122,162,247,0.16); --tint-neutral: rgba(86,95,137,0.18); --tint-neutral-2: rgba(86,95,137,0.34); --tint-row-hover: rgba(122,162,247,0.055); --tint-head: rgba(31,35,53,0.84); --tint-mask: rgba(36,40,59,0.7); --tint-shadow: rgba(0,0,0,0.55); --divider: rgba(41,46,66,0.7); --scroll-thumb: #3b4261; --accent-grad: linear-gradient(180deg,#b5cbfa,#7aa2f7 55%,#6484ca); --halo-1: rgba(122,162,247,0.1); --halo-2: rgba(61,89,161,0.08); } /* ══ 神奈川 Kanagawa Dragon ═════════════════════════════════ Kanagawa Dragon。墨色暖调，安静沉稳。 */ [data-theme="kanagawa"] { --bg: #181616; --bg-2: #1d1c19; --bg-3: #282727; --panel: #1d1c19; --border: #282727; --border-2: #393836; --text: #c5c9c5; --text-2: #a6a69c; --text-3: #7a8382; --accent: #8ba4b0; --accent-2: #a3d4d5; --accent-3: #658594; --glow: rgba(139,164,176,0.28); --on-accent: #12120f; --up: #c4746e; --up-soft: #d9a594; --down: #87a987; --down-soft: #8a9a7b; --warn: #c4b28a; --purple: #a292a3; --purple-soft: #b8b4d0; --neutral: #625e5a; --tint-up: rgba(196,116,110,0.14); --tint-up-2: rgba(196,116,110,0.3); --tint-down: rgba(135,169,135,0.14); --tint-down-2: rgba(135,169,135,0.3); --tint-purple: rgba(162,146,163,0.14); --tint-purple-2: rgba(162,146,163,0.3); --tint-warn: rgba(196,178,138,0.13); --tint-warn-2: rgba(196,178,138,0.38); --tint-accent: rgba(139,164,176,0.12); --tint-accent-2: rgba(139,164,176,0.32); --tint-focus: rgba(139,164,176,0.16); --tint-neutral: rgba(98,94,90,0.18); --tint-neutral-2: rgba(98,94,90,0.34); --tint-row-hover: rgba(139,164,176,0.055); --tint-head: rgba(29,28,25,0.84); --tint-mask: rgba(24,22,22,0.7); --tint-shadow: rgba(0,0,0,0.55); --divider: rgba(40,39,39,0.7); --scroll-thumb: #393836; --accent-grad: linear-gradient(180deg,#bfccd3,#8ba4b0 55%,#718690); --halo-1: rgba(139,164,176,0.1); --halo-2: rgba(101,133,148,0.08); } /* ══ 玫瑰 Rosé Pine Dawn（浅色）═════════════════════════════ Rosé Pine Dawn。暖米底浅色主题，白天或明亮环境用。 */ [data-theme="dawn"] { --bg: #faf4ed; --bg-2: #fffaf3; --bg-3: #f2e9e1; --panel: #fffaf3; --border: #f2e9e1; --border-2: #dfdad9; --text: #575279; --text-2: #797593; --text-3: #9893a5; --accent: #907aa9; --accent-2: #56949f; --accent-3: #6e6389; --glow: rgba(144,122,169,0.2); --on-accent: #fffaf3; --up: #b4637a; --up-soft: #a04f66; --down: #286983; --down-soft: #1f5568; --warn: #ea9d34; --purple: #907aa9; --purple-soft: #7b6595; --neutral: #9893a5; --tint-up: rgba(180,99,122,0.11); --tint-up-2: rgba(180,99,122,0.28); --tint-down: rgba(40,105,131,0.11); --tint-down-2: rgba(40,105,131,0.28); --tint-purple: rgba(144,122,169,0.11); --tint-purple-2: rgba(144,122,169,0.28); --tint-warn: rgba(234,157,52,0.12); --tint-warn-2: rgba(234,157,52,0.3); --tint-accent: rgba(144,122,169,0.11); --tint-accent-2: rgba(144,122,169,0.28); --tint-focus: rgba(144,122,169,0.2); --tint-neutral: rgba(152,147,165,0.12); --tint-neutral-2: rgba(152,147,165,0.28); --tint-row-hover: rgba(144,122,169,0.06); --tint-head: rgba(255,250,243,0.88); --tint-mask: rgba(36,33,26,0.42); --tint-shadow: rgba(60,52,36,0.18); --divider: rgba(242,233,225,0.9); --scroll-thumb: #dfdad9; --accent-grad: linear-gradient(180deg,#c1b5cf,#907aa9 55%,#76648a); --halo-1: rgba(144,122,169,0.07); --halo-2: rgba(110,99,137,0.05); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(900px 500px at 12% -8%, var(--halo-1), transparent 60%), radial-gradient(700px 400px at 88% 0%, var(--halo-2), transparent 60%); pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } /* ── 顶栏 ─────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px; background: var(--tint-head); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .brand { display: flex; align-items: center; gap: 13px; } .logo-mark { width: 66px; height: 31px; flex: 0 0 auto; display: block; object-fit: contain; filter: drop-shadow(0 0 14px var(--glow)); transition: filter .25s; } .brand:hover .logo-mark { filter: drop-shadow(0 0 22px var(--glow)); } .brand-text h1 { margin: 0; font-size: 20px; letter-spacing: 6px; font-weight: 700; /* 渐变随主题走：每套主题各自定义 --accent-grad */ background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); } .brand-text .sub { font-size: 11px; color: var(--text-3); letter-spacing: .6px; } .topbar-right { display: flex; align-items: center; gap: 18px; } .prices { display: flex; gap: 9px; } .price-chip { display: flex; align-items: baseline; gap: 7px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 9px; padding: 6px 12px; } .price-chip .sym { font-size: 11px; color: var(--text-3); font-weight: 700; letter-spacing: .5px; } .price-chip .val { font-family: var(--mono); font-size: 14px; font-weight: 600; } .conn { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); } .conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 9px currentColor; } .conn.live .dot { background: var(--down); animation: pulse 2s infinite; } .conn.down .dot { background: var(--up); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ── 主题切换：5 个色点，克制不抢眼 ────────────── */ .theme-switch { display: flex; align-items: center; gap: 7px; padding: 4px 9px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px; } .theme-dot { width: 15px; height: 15px; padding: 0; border-radius: 50%; cursor: pointer; border: none; outline: 1px solid var(--border-2); outline-offset: 1px; transition: transform .15s, outline-color .15s; /* 色点本身是该主题的「底色 → 强调色」斜切渐变，一眼能看出是什么风格 */ background: linear-gradient(135deg, var(--dot-bg) 0 48%, var(--dot-accent) 52% 100%); } .theme-dot:hover { transform: scale(1.15); } .theme-dot.active { outline: 2px solid var(--accent); outline-offset: 2px; transform: scale(1.08); } .theme-dot:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } @media (max-width: 900px) { .theme-switch { display: none; } } /* ── 标签页 ───────────────────────────────────── */ .tabs { display: flex; gap: 3px; padding: 0 22px; background: var(--tint-head); border-bottom: 1px solid var(--border); position: sticky; top: 65px; z-index: 49; backdrop-filter: blur(14px); flex-wrap: wrap; } .tab { background: none; border: none; color: var(--text-3); padding: 13px 17px; font-size: 13.5px; font-weight: 500; cursor: pointer; position: relative; font-family: inherit; transition: color .15s; } .tab:hover { color: var(--text-2); } .tab.active { color: var(--accent); } .tab.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, var(--accent-3), var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--glow); } main { padding: 22px 26px 60px; max-width: 1720px; margin: 0 auto; } .panel { display: none; } .panel.active { display: block; animation: fade .25s ease; } @keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* ── KPI ──────────────────────────────────────── */ .kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; } .kpi { background: linear-gradient(160deg, var(--panel), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; position: relative; overflow: hidden; } .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent-2), var(--accent), var(--accent-3)); opacity: .9; } .kpi-label { font-size: 11.5px; color: var(--text-3); letter-spacing: .4px; margin-bottom: 7px; } .kpi-val { font-family: var(--mono); font-size: 23px; font-weight: 650; letter-spacing: -.5px; } .kpi-val.accent { color: var(--accent); } .kpi-val.up { color: var(--up); } .kpi-val.down { color: var(--down); } .kpi-sub { font-size: 11px; color: var(--text-3); margin-top: 5px; } /* ── 工具条 ───────────────────────────────────── */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } .toolbar-right { display: flex; gap: 9px; align-items: center; } select, input[type="search"], input[type="text"] { background: var(--bg-3); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; font-size: 13px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } select:focus, input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--tint-focus); } input[type="search"] { min-width: 260px; } input::placeholder { color: var(--text-3); } .btn { background: var(--bg-3); color: var(--text-2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 15px; font-size: 13px; cursor: pointer; font-family: inherit; text-decoration: none; display: inline-block; transition: all .15s; } .btn:hover { border-color: var(--accent-2); color: var(--text); background: var(--bg-3); } .btn.small { padding: 5px 11px; font-size: 12px; } .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; } .toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; user-select: none; } .toggle input { accent-color: var(--accent); cursor: pointer; } /* ── 多选下拉（链 / 资产 / 规则 / 类型 …）───────────────────────── * 原生