/* ============================================================ * Funcin VPS Monitor Theme v2.0 — Premium Glass + Aurora BG + Status Rail * Last update: 2026-07-08 (迁移 NC-1o-3:纯 CSS 光团背景替丢失的 webp; * 卡片多层深阴影+顶部光泽;在线/离线左侧状态色条区分) * Served via Nginx /custom/funcin-theme.css, injected into at first byte * ============================================================ */ /* ---------- 1. 品牌 token ---------- */ :root { --funcin-brand-h: 175; --funcin-brand-s: 70%; --funcin-brand-l: 50%; --funcin-brand: hsl(var(--funcin-brand-h) var(--funcin-brand-s) var(--funcin-brand-l)); --funcin-brand-glow: hsl(var(--funcin-brand-h) var(--funcin-brand-s) 60% / 0.4); --funcin-online: 142 76% 45%; --funcin-offline: 0 72% 55%; --funcin-warning: 35 92% 55%; --funcin-glass-bg: hsl(0 0% 100% / 0.72); --funcin-glass-border: hsl(0 0% 100% / 0.36); --funcin-glass-blur: 12px; --funcin-radius: 16px; --funcin-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace; } html.dark { /* 干净的冷调玻璃:适度实心(0.62)去奶雾感,仍略透;冷灰蓝不发白 */ --funcin-glass-bg: hsl(220 20% 26% / 0.62); --funcin-glass-border: hsl(210 45% 82% / 0.22); } :root { --primary: var(--funcin-brand-h) var(--funcin-brand-s) var(--funcin-brand-l); --ring: var(--funcin-brand-h) var(--funcin-brand-s) var(--funcin-brand-l); --radius: var(--funcin-radius); } /* ---------- 2. 全局高级背景 v5 (纯 CSS 光团 + 深色渐变 + 微噪点) ---------- */ /* v5：不再依赖 webp 图片（迁移后丢失），改纯 CSS 多层光团，更稳且更高级。 * body::before = 光团+渐变底；body::after = 微噪点质感层 */ body { isolation: isolate; } html, body { background-color: hsl(222 32% 96%); } html.dark, html.dark body { background-color: hsl(221 24% 21%); } #root, #root.loaded { background-color: transparent !important; } #root > div[class*="min-h-screen"], #root > div.bg-background { background-color: transparent !important; background-image: none !important; } /* 光团 + 底色渐变 */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(58% 52% at 14% 6%, hsl(var(--funcin-brand-h) 65% 62% / 0.16), transparent 60%), radial-gradient(48% 48% at 88% 10%, hsl(255 60% 62% / 0.12), transparent 60%), radial-gradient(52% 48% at 86% 96%, hsl(200 72% 55% / 0.12), transparent 62%), linear-gradient(150deg, hsl(222 38% 98%), hsl(220 32% 95%) 60%, hsl(218 34% 93%)); } html.dark body::before { background: /* 品牌青极光 左上(主光) */ radial-gradient(62% 56% at 10% 2%, hsl(var(--funcin-brand-h) 78% 48% / 0.28), transparent 56%), /* 冷紫极光 右上 */ radial-gradient(52% 52% at 92% 6%, hsl(260 70% 58% / 0.22), transparent 58%), /* 冷蓝极光 右下 */ radial-gradient(58% 54% at 86% 100%, hsl(200 82% 50% / 0.18), transparent 60%), /* 青绿呼应 左下(弱) */ radial-gradient(46% 46% at 4% 96%, hsl(168 70% 45% / 0.12), transparent 58%), /* 中心暗核聚焦(进一步软化) */ radial-gradient(78% 68% at 50% 45%, transparent 58%, hsl(223 30% 16% / 0.18) 100%), /* 深色渐变底(再调浅,深灰蓝) */ linear-gradient(158deg, hsl(221 28% 25%), hsl(222 26% 21%) 52%, hsl(221 30% 18%)); } /* 微噪点质感层（premium 触感，SVG feTurbulence data-uri） */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.30; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } html.dark body::after { opacity: 0.05; mix-blend-mode: soft-light; } /* ---------- 3. 液态玻璃卡片 ---------- */ .rounded-xl.border.bg-card, .rounded-lg.border.bg-card, [data-slot="card"], [class*="rounded-xl"][class*="border"][class*="bg-card"], [class*="rounded-lg"][class*="border"][class*="bg-card"] { /* 内部直接透明,只保留边线(与概览卡统一) */ background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--funcin-glass-border) !important; box-shadow: none !important; transition: transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms cubic-bezier(.22,.61,.36,1), background 200ms ease, border-color 200ms ease; } html.dark .rounded-xl.border.bg-card, html.dark [data-slot="card"], html.dark [class*="rounded-xl"][class*="border"][class*="bg-card"] { background: transparent !important; box-shadow: none !important; } .rounded-xl.border.bg-card:hover, [data-slot="card"]:hover, [class*="rounded-xl"][class*="border"][class*="bg-card"]:hover { transform: translateY(-4px); /* 悬停浮现一层薄玻璃底 + 轻微上模糊,给"聚焦激活"反馈 */ background: hsl(220 22% 30% / 0.40) !important; -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); border-color: hsl(var(--funcin-brand-h) var(--funcin-brand-s) 68% / 0.80) !important; box-shadow: 0 0 0 1px var(--funcin-brand-glow), 0 18px 42px -16px hsl(224 50% 2% / 0.60), 0 0 40px -6px var(--funcin-brand-glow) !important; z-index: 2; } /* ---------- 3c. ui Card(概览/筛选/列表:rounded-lg bg-card + ring ring-stone,无 border → 默认近黑)统一玻璃 ---------- */ [class*="bg-card"][class*="ring-stone"] { /* 内部直接透明,不加填充蒙层,只保留边线 */ background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--funcin-glass-border) !important; --tw-ring-color: transparent !important; /* 干掉默认 ring-stone 描边,换玻璃 border */ box-shadow: none !important; transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; } html.dark [class*="bg-card"][class*="ring-stone"] { background: transparent !important; box-shadow: none !important; } /* 概览/筛选卡 hover:轻聚焦反馈 */ [class*="bg-card"][class*="ring-stone"]:hover { background: hsl(220 22% 30% / 0.30) !important; border-color: hsl(var(--funcin-brand-h) var(--funcin-brand-s) 68% / 0.65) !important; box-shadow: 0 0 26px -10px var(--funcin-brand-glow) !important; transform: translateY(-2px); } /* 概览"在线/离线"卡按 hover:ring-green/red 语义染状态色:顶部重点线 + 微光 */ html.dark [class*="bg-card"][class*="ring-stone"][class*="ring-green-"] { border-top: 2px solid hsl(var(--funcin-online) / 0.55) !important; box-shadow: 0 0 20px -10px hsl(var(--funcin-online) / 0.30) !important; } html.dark [class*="bg-card"][class*="ring-stone"][class*="ring-red-"] { border-top: 2px solid hsl(var(--funcin-offline) / 0.55) !important; box-shadow: 0 0 20px -10px hsl(var(--funcin-offline) / 0.30) !important; } /* ---------- 4. 状态色光晕 + 左侧状态色条(元素区分) ---------- */ /* 在线:绿色左条 + 绿光晕 */ .rounded-xl.border.bg-card:has([class*="bg-green-"]), [data-slot="card"]:has([class*="bg-green-"]), .rounded-xl.border.bg-card:has([class*="text-green-"]) { border-left: 3px solid hsl(var(--funcin-online) / 0.60) !important; box-shadow: 0 0 22px -8px hsl(var(--funcin-online) / 0.22) !important; } @keyframes funcin-pulse-online { 0%, 100% { box-shadow: 0 0 20px -8px hsl(var(--funcin-online) / 0.18) !important; } 50% { box-shadow: 0 0 30px -6px hsl(var(--funcin-online) / 0.30) !important; } } @media (prefers-reduced-motion: no-preference) { .rounded-xl.border.bg-card:has([class*="bg-green-"]), [data-slot="card"]:has([class*="bg-green-"]) { animation: funcin-pulse-online 4s ease-in-out infinite; } } /* 离线:红色左条 + 红光晕 + 略暗 */ .rounded-xl.border.bg-card:has([class*="bg-red-"]), [data-slot="card"]:has([class*="bg-red-"]), .rounded-xl.border.bg-card:has([class*="text-red-"]) { box-shadow: 0 0 22px -8px hsl(var(--funcin-offline) / 0.24) !important; border-color: hsl(var(--funcin-offline) / 0.40) !important; border-left: 3px solid hsl(var(--funcin-offline) / 0.70) !important; opacity: 0.9; animation: none !important; } /* ---------- 4b. 地区色:细描边 + 顶部重点色线 + 微染（--fr-hue 由 augment.js 按国家设） ---------- */ /* 🇺🇸212蓝 🇭🇰348玫 🇩🇪42金 🇯🇵315粉 🇸🇬165青绿 🇬🇧262紫 🇳🇱22橙 …；左侧仍为在线/离线状态条 */ .server-card-list > *[style*="--fr-hue"] { border: 1px solid hsl(var(--fr-hue) 48% 66% / 0.30) !important; border-top: 2px solid hsl(var(--fr-hue) 72% 62% / 0.58) !important; } html.dark .server-card-list > *[style*="--fr-hue"] { border: 1px solid hsl(var(--fr-hue) 46% 68% / 0.32) !important; border-top: 2px solid hsl(var(--fr-hue) 70% 64% / 0.60) !important; background: transparent !important; } /* 状态优先:在线/离线的左侧色条压过地区色左边框(状态 > 地区) */ .server-card-list > *[style*="--fr-hue"]:has([class*="bg-green-"]), .server-card-list > *[style*="--fr-hue"]:has([class*="text-green-"]) { border-left: 3px solid hsl(var(--funcin-online) / 0.60) !important; } .server-card-list > *[style*="--fr-hue"]:has([class*="bg-red-"]), .server-card-list > *[style*="--fr-hue"]:has([class*="text-red-"]) { border-left: 3px solid hsl(var(--funcin-offline) / 0.70) !important; } /* 4b-2. 阶段B(源码化):--fr-hue 由 ServerCard 组件设(data-funcin-card), 选择器脱离 .server-card-list > * 层级依赖 → 上游虚拟滚动(v2.4.1+)免疫 */ [data-funcin-card][style*="--fr-hue"] { border: 1px solid hsl(var(--fr-hue) 48% 66% / 0.30) !important; border-top: 2px solid hsl(var(--fr-hue) 72% 62% / 0.58) !important; } html.dark [data-funcin-card][style*="--fr-hue"] { border: 1px solid hsl(var(--fr-hue) 46% 68% / 0.32) !important; border-top: 2px solid hsl(var(--fr-hue) 70% 64% / 0.60) !important; background: transparent !important; } [data-funcin-card][style*="--fr-hue"]:has([class*="bg-green-"]), [data-funcin-card][style*="--fr-hue"]:has([class*="text-green-"]) { border-left: 3px solid hsl(var(--funcin-online) / 0.60) !important; } [data-funcin-card][style*="--fr-hue"]:has([class*="bg-red-"]), [data-funcin-card][style*="--fr-hue"]:has([class*="text-red-"]) { border-left: 3px solid hsl(var(--funcin-offline) / 0.70) !important; } /* ---------- 5. 进度条渐变 ---------- */ [role="progressbar"] > div, [role="progressbar"] > [class*="bg-primary"], [data-slot="progress-indicator"], .h-full[class*="bg-primary"] { background: linear-gradient(90deg, hsl(var(--funcin-brand-h) 80% 55%), hsl(calc(var(--funcin-brand-h) + 30) 80% 60%) ) !important; box-shadow: 0 0 12px -2px var(--funcin-brand-glow); } /* ---------- 6. 字体 / 等宽数字 ---------- */ code, kbd, samp, pre, [class*="font-mono"] { font-family: var(--funcin-font-mono); font-feature-settings: "calt" 1, "ss01" 1; } body { font-variant-numeric: tabular-nums; } [class*="text-2xl"], [class*="text-3xl"], [class*="text-4xl"] { letter-spacing: -0.02em; font-feature-settings: "tnum" 1, "ss01" 1; } /* ---------- 7. Header 玻璃感 ---------- */ header, nav[role="navigation"] { -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%); background: var(--funcin-glass-bg) !important; border-bottom: 1px solid var(--funcin-glass-border) !important; } /* ---------- 8. 主按钮渐变 ---------- */ button[class*="bg-primary"]:not([class*="bg-primary-foreground"]), [data-slot="button"][data-variant="default"] { background: linear-gradient(135deg, hsl(var(--funcin-brand-h) 80% 50%), hsl(calc(var(--funcin-brand-h) - 10) 85% 45%) ) !important; box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.18), 0 4px 12px -2px var(--funcin-brand-glow); transition: all 200ms cubic-bezier(.4,0,.2,1); } button[class*="bg-primary"]:not([class*="bg-primary-foreground"]):hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.24), 0 8px 20px -4px var(--funcin-brand-glow); } /* ---------- 9. 滚动条 ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: hsl(var(--funcin-brand-h) 30% 50% / 0.30); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--funcin-brand-h) 60% 55% / 0.55); background-clip: padding-box; } * { scrollbar-color: hsl(var(--funcin-brand-h) 30% 50% / 0.4) transparent; } /* ---------- 10. 选区高亮 ---------- */ ::selection { background: hsl(var(--funcin-brand-h) var(--funcin-brand-s) 70% / 0.35); color: inherit; } /* ---------- 11. 移动端降级 ---------- */ @media (max-width: 640px) { :root { --funcin-glass-blur: 8px; } html, body { animation: none !important; } .rounded-xl.border.bg-card:has([class*="bg-green-"]), [data-slot="card"]:has([class*="bg-green-"]) { animation: none !important; } .rounded-xl.border.bg-card:hover, [data-slot="card"]:hover { transform: none !important; } } /* ---------- 12. 减少动效 ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- 13. 打印降级 ---------- */ @media print { html, body { animation: none; background: white !important; } .rounded-xl.border.bg-card, [data-slot="card"] { backdrop-filter: none !important; background: white !important; box-shadow: 0 0 0 1px #ddd !important; animation: none !important; } } /* ---------- 14. 卡片高度自适应（极简、不动布局） ---------- */ .rounded-xl.border.bg-card, .rounded-lg.border.bg-card, [data-slot="card"], [class*="rounded-xl"][class*="border"][class*="bg-card"], [class*="rounded-lg"][class*="border"][class*="bg-card"] { height: auto !important; min-height: unset !important; max-height: none !important; overflow: visible !important; } [class*="grid-cols-"], [class*="auto-rows-"] { grid-auto-rows: auto !important; } /* ---------- 17. 隐藏视图切换里的"列表/inline"按钮 ---------- */ button:has(svg path[d^="M14 17h2.75"]) { display: none !important; } /* ---------- 18. 隐藏概览右上角的人物插画 ---------- */ img[src*="animated-man"] { display: none !important; } /* ---------- 16. 服务器卡片：一排三卡 + 纵向多行布局 ---------- */ /* 基于实际 DOM： * .server-card-list — 网格容器 (md:grid-cols-2) * 每张卡 .rounded-lg.border.bg-card.flex.flex-col....lg:flex-row * ├─
名字 + 旗 + 状态点 * ├─
移动端独占 * ├─
指标容器（含 grid-cols-5） * └─
我们注入的扩展行 */ /* 网格列数：>=1024px 三列，>=1600px 四列 */ @media (min-width: 1024px) { .server-card-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* 卡片改纵向流：头部 → 指标 → 扩展行；覆盖 Nezha 的 lg:flex-row */ .server-card-list > * { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 14px 16px !important; position: relative !important; /* 让 .funcin-uptime 的 absolute 定位有锚点 */ } /* 卡片右上角:meta 容器(OS 徽章 + 在线时长 并排) */ .funcin-meta { position: absolute; top: 14px; right: 16px; display: flex; gap: 6px; align-items: center; pointer-events: none; } /* OS 徽章(挪自原 funcin-extras 中的 .os 项) */ .funcin-os-badge { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: hsl(var(--funcin-brand-h) 30% 40%); background: hsl(var(--funcin-brand-h) 30% 50% / 0.10); border: 1px solid hsl(var(--funcin-brand-h) 30% 50% / 0.25); padding: 2px 8px; border-radius: 999px; letter-spacing: 0.02em; user-select: none; } html.dark .funcin-os-badge { color: hsl(var(--funcin-brand-h) 35% 70%); background: hsl(var(--funcin-brand-h) 35% 55% / 0.12); border-color: hsl(var(--funcin-brand-h) 35% 60% / 0.28); } .funcin-os-icon { margin-right: 2px; opacity: 0.85; } /* 在线时长(原本 absolute,现在在 .funcin-meta 内随 flex 排列) */ .funcin-uptime { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: hsl(var(--funcin-brand-h) var(--funcin-brand-s) 45%); background: hsl(var(--funcin-brand-h) 70% 50% / 0.10); border: 1px solid hsl(var(--funcin-brand-h) 70% 50% / 0.25); padding: 2px 8px; border-radius: 999px; letter-spacing: 0.02em; pointer-events: none; user-select: none; } html.dark .funcin-uptime { color: hsl(var(--funcin-brand-h) 75% 65%); background: hsl(var(--funcin-brand-h) 75% 55% / 0.14); border-color: hsl(var(--funcin-brand-h) 75% 60% / 0.30); } .funcin-uptime-icon { margin-right: 2px; opacity: 0.85; } /* 头部 section 撑满卡片宽度，移除 lg:w-40 (160px) 限制 */ .server-card-list > * > section:first-child { width: 100% !important; grid-template-columns: auto auto 1fr !important; } /* 名字保持单行 + 字号略提升 */ .server-card-list > * > section:first-child p { white-space: nowrap !important; word-break: keep-all !important; font-size: 0.9rem !important; } /* 指标 section：保持 5 列，缩 gap，让窄卡片也塞得下 */ .server-card-list section[class*="grid-cols-5"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; width: 100%; } /* 每个指标列：撤掉 w-14 (56px) 固定宽，改成自适应 */ .server-card-list section[class*="grid-cols-5"] > div { width: auto !important; min-width: 0 !important; } /* 指标容器：撑满卡片宽度（原本 lg:items-start 把它推到右边） */ .server-card-list > * > div:not(.funcin-extras):not(.lg\\:hidden) { width: 100%; align-items: stretch !important; } /* 让进度条更明显一点：从 3px 加到 4px */ .server-card-list [role="progressbar"] { height: 4px !important; } /* funcin-extras 在卡片末尾全宽（原本被挤到右侧） */ .server-card-list .funcin-extras { width: 100%; flex-basis: 100%; } /* ---------- 15. JS 注入的"扩展信息行"样式（累计流量 + 系统版本） ---------- */ /* 强制单行：↑ X ↓ Y ⇅ Z/M (P%) 都挤在一行 * 布局：上/下行靠左并排,周期合计 margin-left: auto 推到右侧 * 收缩策略：所有项 min-width: 0,周期项允许 overflow ellipsis 兜底 * !important 用于压制 section 16/段 16 内 .server-card-list .funcin-extras 的更高特异性规则 */ .server-card-list .funcin-extras, .funcin-extras { display: flex !important; gap: 8px !important; flex-wrap: nowrap !important; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed hsl(var(--funcin-brand-h) 30% 60% / 0.25); font-size: 0.68rem; font-variant-numeric: tabular-nums; color: hsl(220 15% 40%); width: 100%; min-width: 0; overflow: hidden; } html.dark .funcin-extras { color: hsl(220 15% 70%); border-top-color: hsl(var(--funcin-brand-h) 30% 60% / 0.20); } .funcin-extra-item { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; min-width: 0; } /* 周期合计推到右端,空间不足时允许收缩并截断 */ .funcin-extra-item.cycle { margin-left: auto; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .funcin-extra-item b { font-weight: 600; color: hsl(var(--funcin-brand-h) var(--funcin-brand-s) 35%); letter-spacing: -0.01em; } html.dark .funcin-extra-item b { color: hsl(var(--funcin-brand-h) 60% 70%); } .funcin-extra-item.up { color: hsl(35 70% 40%); } .funcin-extra-item.down { color: hsl(200 70% 40%); } .funcin-extra-item.os { color: hsl(var(--funcin-brand-h) 30% 40%); } html.dark .funcin-extra-item.up { color: hsl(35 80% 65%); } html.dark .funcin-extra-item.down { color: hsl(200 80% 70%); } html.dark .funcin-extra-item.os { color: hsl(var(--funcin-brand-h) 50% 70%); } /* 月度流量周期合计(⇅):默认绿色,>=90% 黄,>=100% 红 */ .funcin-extra-item.cycle { color: hsl(var(--funcin-online)); } .funcin-extra-item.cycle b { color: hsl(var(--funcin-online)); } .funcin-extra-item.cycle.warn, .funcin-extra-item.cycle.warn b { color: hsl(var(--funcin-warning)); } .funcin-extra-item.cycle.danger, .funcin-extra-item.cycle.danger b{ color: hsl(var(--funcin-offline)); font-weight: 700; } /* 回退态(配额未配/API 没数据):灰色弱化,提示这是原始累计值不是月度 */ .funcin-extra-item.fallback, .funcin-extra-item.fallback b { color: hsl(0 0% 55%); font-style: italic; } html.dark .funcin-extra-item.fallback, html.dark .funcin-extra-item.fallback b { color: hsl(0 0% 50%); }