/* ============================================================ * Funcin VPS Monitor Theme v1.0 — Liquid Glass + Status Glow * Last update: 2026-04-29 * 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.32); --funcin-glass-blur: 16px; --funcin-radius: 16px; --funcin-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace; } html.dark { --funcin-glass-bg: hsl(220 30% 12% / 0.68); --funcin-glass-border: hsl(220 30% 60% / 0.24); } :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. 全局抽象流体背景 v4 (Big Sur 风 + cover 图片) ---------- */ /* light: /custom/background-light.webp 浅底 + 浅色染色 * dark : /custom/background.webp 深底 + 鲜艳光团 * v4 替换了 v3 的 CSS 网格 + accent line + 光斑实现 (A 路线) */ body { isolation: isolate; } html, body { background-color: hsl(220 25% 97%); } html.dark, html.dark body { background-color: hsl(222 40% 4%); } #root, #root.loaded { background-color: transparent !important; } /* Nezha v2 wrapper: #root > div.min-h-screen.bg-background 会盖住 body::before * 把它显式透明化，让流体背景图透出 */ #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: -1; pointer-events: none; /* 白雾遮罩 0.7 + 流体图，降低背景抢戏度 */ background: linear-gradient(rgba(245,247,255,0.7), rgba(245,247,255,0.7)), url('/custom/background-light.webp') center center / cover no-repeat; } html.dark body::before { /* 暗雾遮罩 0.55 + 流体图 */ background: linear-gradient(rgba(6,9,26,0.55), rgba(6,9,26,0.55)), url('/custom/background.webp?v=2') center center / cover no-repeat; } /* ---------- 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: var(--funcin-glass-bg) !important; -webkit-backdrop-filter: blur(var(--funcin-glass-blur)) saturate(180%); backdrop-filter: blur(var(--funcin-glass-blur)) saturate(180%); border: 1px solid var(--funcin-glass-border) !important; box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.12), 0 10px 40px -10px hsl(220 30% 3% / 0.32); transition: transform 220ms cubic-bezier(.4,0,.2,1), box-shadow 220ms cubic-bezier(.4,0,.2,1), border-color 220ms ease; } .rounded-xl.border.bg-card:hover, [data-slot="card"]:hover, [class*="rounded-xl"][class*="border"][class*="bg-card"]:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.10), 0 16px 48px -12px hsl(220 30% 5% / 0.25), 0 0 0 1px var(--funcin-brand-glow); border-color: hsl(var(--funcin-brand-h) var(--funcin-brand-s) 60% / 0.35) !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-"]) { box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.12), 0 10px 40px -10px hsl(220 30% 3% / 0.32), 0 0 0 1px hsl(var(--funcin-online) / 0.18), 0 0 24px -4px hsl(var(--funcin-online) / 0.20); } @keyframes funcin-pulse-online { 0%, 100% { box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.12), 0 10px 40px -10px hsl(220 30% 3% / 0.32), 0 0 0 1px hsl(var(--funcin-online) / 0.18), 0 0 24px -4px hsl(var(--funcin-online) / 0.18); } 50% { box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.12), 0 10px 40px -10px hsl(220 30% 3% / 0.32), 0 0 0 1px hsl(var(--funcin-online) / 0.30), 0 0 32px -2px hsl(var(--funcin-online) / 0.30); } } @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: inset 0 1px 0 0 hsl(0 0% 100% / 0.04), 0 8px 32px -8px hsl(var(--funcin-offline) / 0.20), 0 0 0 1px hsl(var(--funcin-offline) / 0.30), 0 0 24px -4px hsl(var(--funcin-offline) / 0.15); border-color: hsl(var(--funcin-offline) / 0.35) !important; opacity: 0.88; animation: none !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%); }