/* ============================================================================= * HyperAI Relay 统一 CSS * 深色主题 + 橙色强调 + 响应式 * =========================================================================== */ :root { /* 深色主题(默认)*/ --bg: #0a0a0a; --bg-elev: #141414; --bg-elev-2: #1a1a1a; --border: #262626; --border-strong: #3a3a3a; --fg: #e5e5e5; --fg-muted: #a3a3a3; --fg-dim: #737373; --brand: #ff6b35; --brand-hover: #e55a28; --success: #22c55e; --danger: #ef4444; --warn: #eab308; --topnav-bg: rgba(10, 10, 10, 0.95); --hover-tint: rgba(255, 255, 255, 0.02); --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --radius: 6px; --radius-lg: 8px; --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace; } /* 浅色主题 —— 通过 激活 */ [data-theme="light"] { --bg: #ffffff; --bg-elev: #f7f7f8; --bg-elev-2: #ededef; --border: #e4e4e7; --border-strong: #d4d4d8; --fg: #18181b; --fg-muted: #52525b; --fg-dim: #71717a; --brand: #ea580c; /* 橙色略深一点,白底对比度更好 */ --brand-hover: #c2410c; --success: #16a34a; --danger: #dc2626; --warn: #ca8a04; --topnav-bg: rgba(255, 255, 255, 0.9); --hover-tint: rgba(0, 0, 0, 0.035); --shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-size: 15px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- top nav ---------- */ .topnav { position: sticky; top: 0; z-index: 10; background: var(--topnav-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .topnav-inner { max-width: 1280px; margin: 0 auto; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .brand { font-size: 1.15rem; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; } .brand span { color: var(--brand); margin-left: 2px; } .nav-right { display: flex; gap: 20px; align-items: center; font-size: 0.9rem; } .nav-right a { color: var(--fg-muted); font-weight: 500; } .nav-right a:hover { color: var(--fg); text-decoration: none; } .nav-right .nav-highlight { color: var(--brand, #ff6b35); border: 1px solid var(--brand, #ff6b35); padding: 4px 10px; border-radius: 4px; font-weight: 600; transition: background 0.15s, color 0.15s; } .nav-right .nav-highlight:hover { background: var(--brand, #ff6b35); color: #fff; } .nav-right .user-email { color: var(--fg-dim); font-size: 0.8rem; } .btn-link { background: none; border: 0; color: var(--fg-muted); cursor: pointer; font: inherit; padding: 0; } .btn-link:hover { color: var(--fg); } .inline { display: inline; } /* ---------- theme toggle ---------- */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--fg-muted); border-radius: var(--radius); padding: 6px 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s, background 0.15s; margin-right: 12px; width: 36px; height: 32px; box-sizing: border-box; } .theme-toggle:hover { border-color: var(--brand); color: var(--brand); background: var(--hover-tint); } .theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; } /* 默认(没设 data-theme 或 dark): 显示月亮,隐藏太阳 */ .theme-icon-light { display: none; } .theme-icon-dark { display: block; } /* 亮色主题:显示太阳,隐藏月亮 */ [data-theme="light"] .theme-icon-light { display: block; } [data-theme="light"] .theme-icon-dark { display: none; } /* ---------- main ---------- */ .main { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; } h1, h2, h3, h4 { color: var(--fg); font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: 1.85rem; margin-bottom: 20px; } h2 { font-size: 1.4rem; margin: 32px 0 16px; } h3 { font-size: 1.1rem; margin: 24px 0 12px; } p { margin-bottom: 12px; color: var(--fg); } .muted { color: var(--fg-muted); } .dim { color: var(--fg-dim); } .small { font-size: 0.85rem; } .mono { font-family: var(--mono); } .right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; } .hidden { display: none; } /* ---------- card ---------- */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; } .card h2:first-child, .card h3:first-child { margin-top: 0; } .card-sub { color: var(--fg-muted); font-size: 0.9rem; margin-bottom: 16px; } /* ---------- buttons ---------- */ .btn { display: inline-block; background: var(--brand); color: #fff; /* 强制白色,橙色背景上永远用白色 */ padding: 10px 20px; border: 0; border-radius: var(--radius); cursor: pointer; text-decoration: none; font-size: 0.92rem; font-weight: 600; font-family: inherit; transition: background 0.15s; } .btn:hover { background: var(--brand-hover); text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-sm { padding: 6px 14px; font-size: 0.82rem; } .btn-lg { padding: 14px 32px; font-size: 1.05rem; } .btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--fg); } .btn-secondary:hover { background: var(--bg-elev-2); border-color: var(--border-strong); } .btn-danger { background: var(--danger); } .btn-danger:hover { background: #dc2626; } .btn-ghost { background: transparent; color: var(--fg-muted); padding: 6px 12px; } .btn-ghost:hover { color: var(--fg); } /* ---------- forms ---------- */ form label { display: block; color: var(--fg-muted); font-size: 0.8rem; font-weight: 500; margin-bottom: 6px; margin-top: 16px; text-transform: uppercase; letter-spacing: 0.05em; } form label:first-child { margin-top: 0; } form input[type="text"], form input[type="email"], form input[type="password"], form input[type="number"], form select, form textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; color: var(--fg); font-size: 0.95rem; font-family: inherit; transition: border-color 0.15s; } form input:focus, form select:focus, form textarea:focus { outline: 0; border-color: var(--brand); } form textarea { min-height: 80px; resize: vertical; } .form-error { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--danger); padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; } .form-success { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.3); color: var(--success); padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; } .form-info { background: rgba(255, 107, 53, 0.08); border: 1px solid rgba(255, 107, 53, 0.3); color: var(--brand); padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; margin: 0 -4px; } table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } th { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); color: var(--fg-muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } td { padding: 12px 10px; border-bottom: 1px solid var(--border); color: var(--fg); } tr:last-child td { border-bottom: 0; } tr:hover td { background: var(--hover-tint); } /* ---------- code / key ---------- */ .code, code { font-family: var(--mono); background: var(--bg); padding: 2px 6px; border-radius: 4px; color: var(--brand); font-size: 0.85em; border: 1px solid var(--border); } pre.code-block { font-family: var(--mono); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; color: var(--fg); margin: 16px 0; } /* ---------- pills / badges ---------- */ .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; } .pill-active, .pill-success { background: rgba(34, 197, 94, 0.12); color: var(--success); } .pill-warn { background: rgba(234, 179, 8, 0.12); color: var(--warn); } .pill-danger, .pill-revoked, .pill-suspended, .pill-disabled, .pill-exhausted { background: rgba(239, 68, 68, 0.12); color: var(--danger); } .pill-info, .pill-stream { background: rgba(59, 130, 246, 0.12); color: #60a5fa; } .pill-muted { background: rgba(163, 163, 163, 0.12); color: var(--fg-muted); } /* ---------- stat grid ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px; } .stat-label { color: var(--fg-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--fg); margin-top: 10px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-sub { color: var(--fg-dim); font-size: 0.75rem; margin-top: 4px; } /* ---------- flex helpers ---------- */ .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .flex-col { display: flex; flex-direction: column; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-16 { margin-bottom: 16px; } /* ---------- layouts ---------- */ .narrow { max-width: 560px; margin: 40px auto; } .two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } } /* ---------- doc page(markdown 渲染)---------- */ .doc-content { max-width: 760px; margin: 0 auto; padding: 40px; } .doc-content h1, .doc-content h2, .doc-content h3 { color: var(--fg); } .doc-content p, .doc-content li { color: var(--fg); line-height: 1.75; } .doc-content a { color: var(--brand); } .doc-content ul, .doc-content ol { padding-left: 24px; margin-bottom: 16px; } .doc-content li { margin-bottom: 6px; } .doc-content code { background: var(--bg); padding: 2px 6px; border-radius: 4px; color: var(--brand); font-size: 0.85em; border: 1px solid var(--border); font-family: var(--mono); } .doc-content pre { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; overflow-x: auto; margin: 16px 0; } .doc-content pre code { background: none; border: 0; padding: 0; color: var(--fg); } .doc-content table { margin: 16px 0; } .doc-content hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; } .doc-content blockquote { border-left: 3px solid var(--brand); padding: 8px 16px; margin: 16px 0; color: var(--fg-muted); background: var(--bg-elev); } /* ---------- footer ---------- */ .footer { text-align: center; padding: 40px 20px; color: var(--fg-dim); font-size: 0.85rem; border-top: 1px solid var(--border); margin-top: 60px; } .footer a { color: var(--fg-dim); } .footer a:hover { color: var(--brand); } .footer-sub { margin-top: 8px; font-size: 0.78rem; color: var(--fg-dim); opacity: 0.7; } /* ---------- responsive ---------- */ @media (max-width: 640px) { html, body { font-size: 14px; } .main { padding: 20px 16px 60px; } .card { padding: 20px 16px; } h1 { font-size: 1.5rem; } .topnav-inner { padding: 10px 16px; gap: 10px; } .nav-right { gap: 12px; font-size: 0.82rem; } .nav-right .user-email { display: none; } .stat-value { font-size: 1.4rem; } th, td { padding: 10px 6px; } }