/* ============================================================ 主题变量：浅色为默认，深色由 :root[data-theme="dark"] 覆盖。 data-theme 由 /theme.js 在首屏渲染前写入 。 ============================================================ */ :root { color-scheme: light; --bg: #f7f8fa; --surface: #ffffff; --surface-2: #f9fafb; --border: #e4e7ec; --border-strong: #d0d5dd; --divider: #f2f4f7; --text: #101828; --text-muted: #475467; --text-subtle: #667085; --text-faint: #98a2b3; --accent: #12b76a; --accent-hover: #0fa35c; --accent-contrast: #ffffff; --focus-ring: rgba(18, 183, 106, 0.2); --ok-bg: #ecfdf3; --ok-border: #abefc6; --ok-text: #067647; --ok-solid: #17b26a; --warn-bg: #fffaeb; --warn-border: #fedf89; --warn-text: #b54708; --warn-solid: #f79009; --err-bg: #fef3f2; --err-border: #fecdca; --err-text: #b42318; --err-solid: #f04438; --neutral-bg: #f2f4f7; --neutral-border: #e4e7ec; --neutral-text: #475467; --neutral-solid: #98a2b3; --bar-empty: #e4e7ec; --bar-up: #12b76a; --bar-degraded: #f79009; --bar-down: #f04438; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0f19; --surface: #151a24; --surface-2: #1c2331; --border: #262d3d; --border-strong: #333c4e; --divider: #1f2634; --text: #ecf0f6; --text-muted: #b3bccb; --text-subtle: #98a2b3; --text-faint: #6b7688; --accent: #17b26a; --accent-hover: #12b76a; --accent-contrast: #ffffff; --focus-ring: rgba(23, 178, 106, 0.28); --ok-bg: rgba(23, 178, 106, 0.14); --ok-border: rgba(23, 178, 106, 0.34); --ok-text: #75e0a7; --ok-solid: #17b26a; --warn-bg: rgba(247, 144, 9, 0.14); --warn-border: rgba(247, 144, 9, 0.34); --warn-text: #fec84b; --warn-solid: #f79009; --err-bg: rgba(240, 68, 56, 0.15); --err-border: rgba(240, 68, 56, 0.36); --err-text: #fda29b; --err-solid: #f04438; --neutral-bg: rgba(152, 162, 179, 0.14); --neutral-border: rgba(152, 162, 179, 0.26); --neutral-text: #b3bccb; --neutral-solid: #6b7688; --bar-empty: #2a3242; } /* ===== 基础 ===== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; transition: background-color 0.18s ease, color 0.18s ease; } .container { width: 100%; max-width: 760px; margin: 0 auto; /* 兼容 iPhone 刘海屏横屏安全区 */ padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } .main { padding-top: 32px; padding-bottom: 64px; } /* ===== 顶栏 ===== */ .topbar { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; } .brand { font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; } .admin-link { color: var(--text-muted); text-decoration: none; font-size: 14px; white-space: nowrap; } .admin-link:hover { color: var(--text); } .theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background: var(--surface-2); color: var(--text); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* 浅色显示月亮（点击进入深色），深色显示太阳 */ .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ===== 状态横幅 ===== */ .banner { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-radius: 12px; font-size: 16px; font-weight: 600; border: 1px solid transparent; } .banner-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; } .banner.operational { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); } .banner.operational .banner-dot { background: var(--ok-solid); } .banner.degraded { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); } .banner.degraded .banner-dot { background: var(--warn-solid); } .banner.outage { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); } .banner.outage .banner-dot { background: var(--err-solid); } .banner.empty { background: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral-border); } .banner.empty .banner-dot { background: var(--neutral-solid); } .updated-at { margin: 10px 4px 16px; font-size: 12px; color: var(--text-faint); } /* ===== 服务卡片 ===== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .svc-name { font-size: 16px; font-weight: 600; } .svc-desc { font-size: 13px; color: var(--text-subtle); margin-top: 2px; } .badge { flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .badge.up { background: var(--ok-bg); color: var(--ok-text); } .badge.degraded { background: var(--warn-bg); color: var(--warn-text); } .badge.down { background: var(--err-bg); color: var(--err-text); } .badge.pending, .badge.disabled { background: var(--neutral-bg); color: var(--neutral-text); } .uptime-bar { display: flex; gap: 2px; height: 32px; } .uptime-bar .bar { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--bar-empty); } .bar.up { background: var(--bar-up); } .bar.degraded { background: var(--bar-degraded); } .bar.down { background: var(--bar-down); } .card-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--text-subtle); } .check-error { margin-top: 10px; font-size: 12.5px; color: var(--err-text); background: var(--err-bg); border-radius: 8px; padding: 8px 12px; word-break: break-all; } /* ===== 管理页 ===== */ .card-title { margin: 0 0 16px; font-size: 15px; } .msg { border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px; } .msg.error { background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-border); } .msg.success { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field-wide { grid-column: 1 / -1; } .field label { font-size: 13px; color: var(--text-muted); } .field input, .field select { width: 100%; border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text); } .field input::placeholder { color: var(--text-faint); } .field input:focus, .field select:focus { outline: 2px solid var(--focus-ring); border-color: var(--accent); } .checkbox-row label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); } .checkbox-row input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; } .form-actions { display: flex; gap: 10px; } .btn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); border-radius: 8px; padding: 8px 18px; font-size: 14px; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; } .btn:hover { background: var(--surface-2); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600; } .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn.danger { color: var(--err-text); border-color: var(--err-border); } .btn.danger:hover { background: var(--err-bg); } .svc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--divider); flex-wrap: wrap; } .svc-row:first-child { border-top: none; } .svc-row > div:first-child { min-width: 0; } .svc-row .svc-name { font-size: 14.5px; } .svc-row .svc-url { font-size: 12.5px; color: var(--text-subtle); word-break: break-all; margin-top: 2px; } .svc-row-actions { display: flex; gap: 8px; flex: none; } .empty-hint { color: var(--text-faint); font-size: 13.5px; padding: 8px 0; } /* ============================================================ 响应式 ============================================================ */ @media (max-width: 640px) { .main { padding-top: 20px; padding-bottom: 40px; } .banner { padding: 14px 16px; font-size: 15px; border-radius: 10px; } .card { padding: 16px; border-radius: 10px; } /* 单列表单；输入框 16px 以避免 iOS 聚焦时自动放大 */ .form-grid { grid-template-columns: 1fr; gap: 12px; } .field input, .field select { font-size: 16px; padding: 10px 12px; } .form-actions .btn { flex: 1; } /* 90 个柱子在窄屏用更细的间隙，保证不横向溢出 */ .uptime-bar { gap: 1px; height: 28px; } .uptime-bar .bar { min-width: 1px; border-radius: 1px; } .card-head { gap: 10px; } .svc-name { font-size: 15px; } .card-meta { flex-direction: column; gap: 4px; } .svc-row { align-items: flex-start; } .svc-row-actions { width: 100%; } .svc-row-actions .btn { flex: 1; } } @media (max-width: 380px) { .container { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .brand { font-size: 15px; } .admin-link { font-size: 13px; } .banner { font-size: 14px; padding: 12px 14px; } } /* 触屏设备：加大点击热区 */ @media (pointer: coarse) { .btn { min-height: 44px; } .theme-toggle { width: 40px; height: 40px; } .admin-link { padding: 8px 0; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }