/* ============================================================ Haidraulic · iOS 半透明设计系统 (v3.1) 全站共享：主页 / 工具索引 / 热榜 / 资源共享 / 登录 / 各工具页 ------------------------------------------------------------ 设计语言：Apple iOS 17 风格 —— 毛玻璃材质、系统字体、 大圆角、分段控件、SF 蓝强调色、柔和阴影。 深浅色：由 切换，可手动指定， 未指定时跟随系统偏好（见 haidraulic.js 的 HAI.theme）。 ============================================================ */ /* ============================================================ 1. 设计令牌（浅色主题 = 默认值） ============================================================ */ :root { color-scheme: light; /* —— 系统字体栈（SF Pro → 苹方 → 微软雅黑）—— */ --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* —— iOS 系统色 —— */ --blue: #0A84FF; --blue-deep: #0060DF; --green: #30D158; --teal: #40C8E0; --indigo: #5E5CE6; --purple: #BF5AF2; --pink: #FF375F; --orange: #FF9F0A; --red: #FF453A; --yellow: #FFD60A; /* —— 语义色 —— */ --accent: var(--blue); --accent-strong: var(--blue-deep); --danger: var(--red); --success: var(--green); --warning: var(--orange); /* —— 文本层级 —— */ --text-1: rgba(0, 0, 0, 0.92); --text-2: rgba(60, 60, 67, 0.72); --text-3: rgba(60, 60, 67, 0.48); --text-4: rgba(60, 60, 67, 0.30); /* —— 玻璃材质 —— */ --glass-bg: rgba(255, 255, 255, 0.52); --glass-bg-strong: rgba(255, 255, 255, 0.72); --glass-bg-soft: rgba(255, 255, 255, 0.34); --glass-border: rgba(255, 255, 255, 0.65); --glass-blur: blur(30px) saturate(180%); --glass-shadow: 0 10px 30px rgba(16, 24, 40, 0.10); --glass-shadow-lg: 0 20px 50px rgba(16, 24, 40, 0.14); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.75); /* —— 不支持 backdrop-filter 时的实心降级色 —— */ --glass-fallback: rgba(255, 255, 255, 0.94); --glass-soft-fallback: rgba(255, 255, 255, 0.86); --nav-fallback: rgba(255, 255, 255, 0.94); /* —— 填充色（用于控件）—— */ --fill-1: rgba(120, 120, 128, 0.10); --fill-2: rgba(120, 120, 128, 0.16); --fill-3: rgba(120, 120, 128, 0.24); --separator: rgba(60, 60, 67, 0.14); /* —— 主题化表面（深色主题只覆盖这一段）—— */ --page-bg: #E9EDF6; --wallpaper-filter: blur(46px); --nav-bg: rgba(255, 255, 255, 0.62); --nav-border: rgba(255, 255, 255, 0.55); --nav-active-bg: rgba(10, 132, 255, 0.14); --nav-active-fg: var(--blue-deep); --field-bg: rgba(255, 255, 255, 0.62); --field-border: rgba(255, 255, 255, 0.70); --option-bg: #ffffff; --option-fg: #111111; --th-bg: rgba(255, 255, 255, 0.55); --row-hover: rgba(255, 255, 255, 0.42); --row-hover-strong: rgba(255, 255, 255, 0.55); --surface-tint: rgba(255, 255, 255, 0.42); --seg-active-bg: rgba(255, 255, 255, 0.95); --seg-active-fg: rgba(0, 0, 0, 0.92); --control-border: rgba(255, 255, 255, 0.50); --badge-border: rgba(255, 255, 255, 0.60); --code-bg: rgba(255, 255, 255, 0.60); --hover-strong: rgba(255, 255, 255, 0.92); --toast-bg: rgba(255, 255, 255, 0.86); --toggle-fg: rgba(60, 60, 67, 0.85); --brand-ink: #20214F; --badge-blue-fg: #0060DF; --badge-green-fg: #1B7F3B; --badge-purple-fg: #7A2FB5; --badge-orange-fg: #9A5B00; --badge-red-fg: #B32318; --badge-teal-fg: #0E6E80; /* —— 圆角 —— */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-full: 999px; /* —— 间距 —— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; /* —— 布局 —— */ --content-w: 1080px; --gutter: 22px; --nav-h: 62px; /* —— 动效 —— */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur: 0.28s; } /* ============================================================ 2. 深色主题 由 触发；HAI.theme 会在首屏渲染前写好该属性， 未手动选择时跟随系统偏好。 ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --text-1: rgba(255, 255, 255, 0.95); --text-2: rgba(235, 235, 245, 0.62); --text-3: rgba(235, 235, 245, 0.42); --text-4: rgba(235, 235, 245, 0.26); --accent-strong: #6FB4FF; --glass-bg: rgba(40, 42, 54, 0.52); --glass-bg-strong: rgba(44, 46, 58, 0.74); --glass-bg-soft: rgba(40, 42, 54, 0.36); --glass-border: rgba(255, 255, 255, 0.14); --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.36); --glass-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.48); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.10); --glass-fallback: rgba(38, 40, 50, 0.96); --glass-soft-fallback: rgba(38, 40, 50, 0.90); --nav-fallback: rgba(28, 30, 40, 0.96); --fill-1: rgba(120, 120, 128, 0.24); --fill-2: rgba(120, 120, 128, 0.32); --fill-3: rgba(120, 120, 128, 0.44); --separator: rgba(235, 235, 245, 0.16); --page-bg: #0B0D14; --wallpaper-filter: blur(58px) brightness(0.62); --nav-bg: rgba(28, 30, 40, 0.62); --nav-border: rgba(255, 255, 255, 0.10); --nav-active-bg: rgba(10, 132, 255, 0.26); --nav-active-fg: #6FB4FF; --field-bg: rgba(255, 255, 255, 0.08); --field-border: rgba(255, 255, 255, 0.14); --option-bg: #1C1E28; --option-fg: #ffffff; --th-bg: rgba(255, 255, 255, 0.06); --row-hover: rgba(255, 255, 255, 0.06); --row-hover-strong: rgba(255, 255, 255, 0.10); --surface-tint: rgba(255, 255, 255, 0.06); --seg-active-bg: rgba(120, 120, 128, 0.44); --seg-active-fg: #ffffff; --control-border: rgba(255, 255, 255, 0.12); --badge-border: rgba(255, 255, 255, 0.14); --code-bg: rgba(255, 255, 255, 0.12); --hover-strong: rgba(120, 120, 128, 0.38); --toast-bg: rgba(44, 46, 58, 0.88); --toggle-fg: rgba(235, 235, 245, 0.80); --brand-ink: #D7DAF5; --badge-blue-fg: #7CBAFF; --badge-green-fg: #6FE08F; --badge-purple-fg: #D9A3FF; --badge-orange-fg: #FFC46B; --badge-red-fg: #FF8A82; --badge-teal-fg: #7FDCEB; } /* ============================================================ 3. 基础重置 ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text-1); background-color: var(--page-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -0.01em; padding-bottom: env(safe-area-inset-bottom); transition: background-color 0.4s var(--ease), color 0.4s var(--ease); } /* iOS 风格柔和渐变壁纸：毛玻璃需要有内容可透 */ body::before { content: ""; position: fixed; inset: -25%; z-index: -2; pointer-events: none; background: radial-gradient(42% 42% at 12% 18%, rgba(10, 132, 255, 0.55), transparent 62%), radial-gradient(38% 38% at 88% 12%, rgba(191, 90, 242, 0.45), transparent 62%), radial-gradient(40% 40% at 78% 82%, rgba(255, 55, 95, 0.34), transparent 64%), radial-gradient(46% 46% at 18% 88%, rgba(64, 200, 224, 0.42), transparent 66%), radial-gradient(34% 34% at 52% 52%, rgba(94, 92, 230, 0.26), transparent 70%); filter: var(--wallpaper-filter); transition: filter 0.4s var(--ease); } /* 轻微噪点，避免大面积渐变出现色带 */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35; 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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); } img, svg, video { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: none; } ::selection { background: rgba(10, 132, 255, 0.28); color: var(--text-1); } :focus-visible { outline: 3px solid rgba(10, 132, 255, 0.55); outline-offset: 2px; border-radius: var(--r-xs); } /* 滚动条（WebKit）*/ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(120, 120, 128, 0.34); border: 3px solid transparent; border-radius: var(--r-full); background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 128, 0.52); background-clip: content-box; } /* ============================================================ 4. 布局容器 ============================================================ */ .container { width: 100%; max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); } .page { padding: var(--sp-7) 0 var(--sp-8); } /* ============================================================ 5. 玻璃材质原语 ============================================================ */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--glass-shadow), var(--glass-inset); } .glass-strong { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--glass-shadow-lg), var(--glass-inset); } .glass-soft { background: var(--glass-bg-soft); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--control-border); border-radius: var(--r-md); } /* 不支持 backdrop-filter 时的降级：提高不透明度保证可读性 */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .glass-strong { background: var(--glass-fallback); } .glass-soft { background: var(--glass-soft-fallback); } .nav-bar { background: var(--nav-fallback) !important; } } /* ============================================================ 6. 顶部导航栏（玻璃，吸顶） ============================================================ */ .nav-bar { position: sticky; top: 0; z-index: 200; background: var(--nav-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--nav-border); box-shadow: 0 1px 0 rgba(60, 60, 67, 0.06), 0 8px 24px rgba(16, 24, 40, 0.06); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--nav-h); } .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text-1); white-space: nowrap; } .brand:hover { color: var(--text-1); } /* 标识：用 mask 上色，logo 自动跟随主题，深浅色共用一份文件 */ .brand-logo { display: block; flex: none; height: 38px; width: 162px; /* 338.669 : 79.32 ≈ 4.27 : 1 */ background-color: var(--brand-ink); -webkit-mask: url("/static/img/logo.svg") no-repeat left center / contain; mask: url("/static/img/logo.svg") no-repeat left center / contain; } /* 极老的浏览器不支持 mask 时，退回直接贴图（浅色下同样是深蓝） */ @supports not ((-webkit-mask-image: url("/static/img/logo.svg")) or (mask-image: url("/static/img/logo.svg"))) { .brand-logo { background-color: transparent; background-image: url("/static/img/logo.svg"); background-repeat: no-repeat; background-position: left center; background-size: contain; } } /* ---------- 分类图标（src/icon/ → build/build_category_icons.py → static/img/cat/） ---------- */ /* 与标识同一套思路：图标只提供形状（mask 取 alpha），颜色由 currentColor 决定， 深浅色自动跟随。原始 SVG 里的深色 fill（#010101 / #333333 / #053B6A …） 在深色模式下会直接看不见，走 mask 就绕开了。 尺寸用 em，图标随所在标题的字号自动缩放，各处不用分别调。 */ .cat-ico { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.16em; margin-right: 0.35em; /* 与后面的分类名拉开一点距离 */ background-color: currentColor; -webkit-mask-image: var(--ico); mask-image: var(--ico); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* 不支持 mask 时退回直接贴图：浅色下观感一致，深色下会偏暗 */ @supports not ((-webkit-mask-image: url("/static/img/logo.svg")) or (mask-image: url("/static/img/logo.svg"))) { .cat-ico { background-color: transparent; background-image: var(--ico); background-repeat: no-repeat; background-position: center; background-size: contain; } } .brand sup { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; color: var(--text-3); letter-spacing: 0.02em; align-self: flex-start; margin-top: 3px; } .nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--text-2); padding: 7px 13px; border-radius: var(--r-full); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); white-space: nowrap; } .nav-links a:hover { background: var(--fill-1); color: var(--text-1); } .nav-links a.is-active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 600; } @media (max-width: 720px) { .nav-inner { flex-wrap: wrap; padding: 8px 0; gap: 6px; } .nav-links { gap: 2px; } .nav-links a { font-size: 13px; padding: 6px 10px; } .brand-logo { height: 30px; width: 128px; } } /* ============================================================ 7. 深色 / 浅色切换按钮 ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; margin-left: 4px; color: var(--toggle-fg); background: var(--fill-1); border: 1px solid var(--badge-border); border-radius: var(--r-full); cursor: pointer; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease); -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background: var(--fill-2); color: var(--text-1); } .theme-toggle:active { transform: scale(0.9); } .theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* 浅色时显示月亮（点击进入深色），深色时显示太阳 */ .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* 工具页浮动版本 */ .theme-toggle.is-float { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 18px; z-index: 500; width: 42px; height: 42px; margin: 0; color: var(--text-1); background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--glass-border); box-shadow: 0 4px 14px rgba(16, 24, 40, 0.10), var(--glass-inset); } .theme-toggle.is-float svg { width: 19px; height: 19px; } @media (max-width: 620px) { .theme-toggle { width: 32px; height: 32px; } .theme-toggle.is-float { width: 38px; height: 38px; right: 12px; top: calc(10px + env(safe-area-inset-top)); } } /* ============================================================ 8. 返回按钮（全站统一） ============================================================ */ .back-bar { display: flex; align-items: center; gap: var(--sp-2); padding: 14px 0 0; } .back-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1; color: var(--text-1); background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-full); padding: 9px 16px 9px 12px; cursor: pointer; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.10), var(--glass-inset); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); -webkit-tap-highlight-color: transparent; } .back-btn:hover { background: var(--hover-strong); transform: translateX(-2px); } .back-btn:active { transform: scale(0.96); } .back-btn svg { width: 15px; height: 15px; flex: none; } /* 工具页浮动版本（不占文档流）*/ .back-btn.is-float { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 18px; z-index: 500; } @media (max-width: 620px) { .back-btn { font-size: 13px; padding: 8px 14px 8px 10px; } .back-btn.is-float { left: 12px; top: calc(10px + env(safe-area-inset-top)); } } /* ============================================================ 9. 排版 ============================================================ */ .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-3); font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; color: var(--text-1); } h1 { font-size: clamp(34px, 6vw, 54px); font-weight: 700; letter-spacing: -0.035em; } h2 { font-size: clamp(24px, 3.6vw, 34px); } h3 { font-size: 20px; } h4 { font-size: 16px; } p { margin: 0 0 var(--sp-4); color: var(--text-2); } p:last-child { margin-bottom: 0; } .lead { font-size: 18px; line-height: 1.55; color: var(--text-2); max-width: 60ch; } .muted { color: var(--text-3); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .text-right { text-align: right; } .hidden { display: none !important; } /* ============================================================ 10. 区块 ============================================================ */ .section { padding: var(--sp-7) 0 0; } .section:last-child { padding-bottom: 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; } .section-head .section-title { margin: var(--sp-2) 0 0; } .section-link { font-size: 14px; font-weight: 500; color: var(--accent-strong); display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: var(--r-full); background: var(--nav-active-bg); transition: background var(--dur) var(--ease); } .section-link:hover { background: var(--nav-active-bg); filter: brightness(0.94); } /* ============================================================ 11. 按钮 ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #fff; background: linear-gradient(180deg, #2E93FF, var(--accent)); border: none; border-radius: var(--r-full); padding: 11px 22px; cursor: pointer; text-decoration: none; box-shadow: 0 6px 18px rgba(10, 132, 255, 0.32); transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); -webkit-tap-highlight-color: transparent; white-space: nowrap; } .btn:hover { filter: brightness(1.07); transform: translateY(-1px); } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; } .btn-ghost { color: var(--text-1); background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08); } .btn-ghost:hover { background: var(--hover-strong); } .btn-danger { background: linear-gradient(180deg, #FF6B62, var(--danger)); box-shadow: 0 6px 18px rgba(255, 69, 58, 0.3); } .btn-sm { font-size: 13px; padding: 7px 14px; } .btn-block { width: 100%; } /* ============================================================ 12. 表单控件（iOS 风格） ============================================================ */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); } .field > label, .form-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); } .input, .select, .textarea, input[type="text"], input[type="password"], input[type="number"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="file"], select, textarea { width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--text-1); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--r-sm); padding: 11px 14px; outline: none; box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.05); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); -webkit-appearance: none; appearance: none; } .input:focus, .select:focus, .textarea:focus, input:focus, select:focus, textarea:focus { border-color: rgba(10, 132, 255, 0.75); box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18); } input::placeholder, textarea::placeholder { color: var(--text-4); } .textarea { min-height: 110px; resize: vertical; line-height: 1.55; } .select, select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; padding-right: 38px; } select option { color: var(--option-fg); background: var(--option-bg); } input[type="file"] { padding: 9px 12px; cursor: pointer; } input[type="file"]::file-selector-button { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-1); background: var(--fill-2); border: none; border-radius: var(--r-full); padding: 7px 14px; margin-right: 12px; cursor: pointer; } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); vertical-align: -3px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); } .form-grid .span-2 { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .form-hint { font-size: 12.5px; color: var(--text-3); } /* ============================================================ 13. 分段控件（iOS Segmented Control） ============================================================ */ .segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--fill-1); border-radius: var(--r-full); border: 1px solid var(--control-border); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); overflow-x: auto; max-width: 100%; scrollbar-width: none; } .segmented::-webkit-scrollbar { display: none; } .segmented .seg { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--text-2); background: transparent; border: none; border-radius: var(--r-full); padding: 7px 15px; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .segmented .seg:hover { color: var(--text-1); } .segmented .seg.is-active { background: var(--seg-active-bg); color: var(--seg-active-fg); font-weight: 600; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12); } /* ============================================================ 14. 卡片与网格 ============================================================ */ .grid { display: grid; gap: var(--sp-4); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } .card { display: block; padding: var(--sp-5); color: inherit; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--glass-shadow), var(--glass-inset); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .card:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-lg), var(--glass-inset); background: var(--glass-bg-strong); } .card-title { font-size: 18px; font-weight: 650; margin: 0 0 6px; letter-spacing: -0.02em; } .card-desc { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0; } .card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--separator); font-size: 12.5px; color: var(--text-3); } /* ============================================================ 15. 徽章 / 标签 ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-2); background: var(--fill-1); border: 1px solid var(--badge-border); border-radius: var(--r-full); padding: 3px 10px; white-space: nowrap; } .badge-blue { color: var(--badge-blue-fg); background: rgba(10, 132, 255, 0.15); } .badge-green { color: var(--badge-green-fg); background: rgba(48, 209, 88, 0.18); } .badge-purple { color: var(--badge-purple-fg); background: rgba(191, 90, 242, 0.16); } .badge-orange { color: var(--badge-orange-fg); background: rgba(255, 159, 10, 0.20); } .badge-red { color: var(--badge-red-fg); background: rgba(255, 69, 58, 0.16); } .badge-teal { color: var(--badge-teal-fg); background: rgba(64, 200, 224, 0.20); } /* ============================================================ 16. 数据表格 ============================================================ */ .table-wrap { overflow-x: auto; border-radius: var(--r-lg); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-inset); } table { width: 100%; border-collapse: collapse; font-size: 14px; } thead th { position: sticky; top: 0; text-align: left; font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); background: var(--th-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 12px 16px; border-bottom: 1px solid var(--separator); white-space: nowrap; } tbody td { padding: 13px 16px; border-bottom: 1px solid var(--separator); color: var(--text-2); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background 0.2s var(--ease); } tbody tr:hover { background: var(--row-hover); } td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ============================================================ 17. 空状态 / 提示条 ============================================================ */ .empty-state { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--text-3); font-size: 14.5px; } .empty-state svg { width: 46px; height: 46px; margin: 0 auto var(--sp-3); color: var(--text-4); } .notice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); font-size: 14px; line-height: 1.55; background: rgba(10, 132, 255, 0.12); border: 1px solid rgba(10, 132, 255, 0.24); color: var(--text-1); margin-bottom: var(--sp-5); } .notice-warn { background: rgba(255, 159, 10, 0.15); border-color: rgba(255, 159, 10, 0.32); } .notice-error { background: rgba(255, 69, 58, 0.13); border-color: rgba(255, 69, 58, 0.3); } .notice-success { background: rgba(48, 209, 88, 0.15); border-color: rgba(48, 209, 88, 0.3); } .notice strong { font-weight: 650; } .notice code { font-family: var(--font-mono); font-size: 12.5px; background: var(--code-bg); border-radius: 5px; padding: 1px 6px; } /* 浮动 Toast */ .toast-host { position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 900; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { font-size: 14px; font-weight: 500; color: var(--text-1); background: var(--toast-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-full); padding: 10px 20px; box-shadow: var(--glass-shadow-lg); animation: toast-in 0.32s var(--ease); } .toast-error { color: var(--badge-red-fg); } @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } } /* ============================================================ 18. 页脚 ============================================================ */ .site-footer { margin-top: var(--sp-8); padding: var(--sp-7) 0 var(--sp-5); border-top: 1px solid var(--nav-border); background: var(--glass-bg-soft); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } .footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1.3fr; gap: var(--sp-6); align-items: start; } .footer-logo { display: block; height: 32px; width: 137px; /* 与导航栏同比例 338.669 : 79.32 */ background-color: var(--brand-ink); -webkit-mask: url("/static/img/logo.svg") no-repeat left center / contain; mask: url("/static/img/logo.svg") no-repeat left center / contain; } @supports not ((-webkit-mask-image: url("/static/img/logo.svg")) or (mask-image: url("/static/img/logo.svg"))) { .footer-logo { background-color: transparent; background-image: url("/static/img/logo.svg"); background-repeat: no-repeat; background-position: left center; background-size: contain; } } .footer-tagline { font-size: 13px; color: var(--text-3); line-height: 1.6; margin: var(--sp-3) 0 0; max-width: 30ch; } .footer-col h4 { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--sp-3); } /* 注意：这里的 :not(.footer-item) 不能去掉。 「关注我们」那一列里的抖音是 ， 而 .footer-col > a 的特异性(0,1,1)高于 .footer-item(0,1,0)， 一旦被它命中就会从 flex 变成 block，图标和文字各占一行。 */ .footer-col > a:not(.footer-item) { display: block; font-size: 13.5px; color: var(--text-2); padding: 5px 0; transition: color var(--dur) var(--ease); } .footer-col > a:not(.footer-item):hover { color: var(--accent-strong); } /* 联系方式行 */ .footer-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); padding: 5px 0; transition: color var(--dur) var(--ease); } .footer-item > span { color: var(--text-3); white-space: nowrap; } .footer-item b { font-weight: 600; color: var(--text-1); white-space: nowrap; } .footer-ico { width: 17px; height: 17px; flex: none; color: var(--text-3); transition: color var(--dur) var(--ease); } a.footer-item:hover { color: var(--accent-strong); } a.footer-item:hover .footer-ico, a.footer-item:hover > span { color: var(--accent-strong); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--separator); font-size: 12.5px; color: var(--text-4); } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .footer-brand { grid-column: 1 / -1; } .footer-logo { height: 28px; width: 120px; } } @media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } } /* ============================================================ 19. 工具页兼容层 旧工具页（o_ring_search / Thread_Assistant 等）自带内联样式， 这里用高优先级规则统一到 iOS 玻璃语言。 新增工具页建议直接引用本文件，无需内联样式。 ============================================================ */ body.tool-page { /* 旧工具页常把 body 设成 flex + center，会让返回栏和主内容变成并排的两个 flex item（返回按钮被挤到最左）。这里强制回到普通文档流。 */ display: block !important; padding: 0 !important; } /* 工具页顶部返回栏（独立于 .tool-page .container 的 padding 覆盖）*/ .tool-page .tool-backbar { max-width: 1080px !important; margin: 0 auto !important; padding: 18px var(--gutter) 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* 旧版页面容器 */ .tool-page .container, .tool-page .wrapper, .tool-page .page, .tool-page .app { max-width: 1080px !important; margin: 0 auto !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 var(--gutter) !important; min-height: 0 !important; } /* 旧版黑色/彩色渐变 header → 玻璃条 */ .tool-page .header, .tool-page .topbar, .tool-page .page-header, .tool-page .app-header { background: var(--glass-bg) !important; background-image: none !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; color: var(--text-1) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--glass-shadow), var(--glass-inset) !important; padding: var(--sp-5) !important; margin-bottom: var(--sp-4) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: var(--sp-3) !important; position: static !important; } .tool-page .header h1, .tool-page .topbar h1, .tool-page .page-header h1 { color: var(--text-1) !important; font-family: var(--font-sans) !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.03em !important; margin: 0 !important; } .tool-page .header p, .tool-page .header .subtitle, .tool-page .header .version { color: var(--text-3) !important; font-size: 13px !important; margin: 4px 0 0 !important; } /* 旧版内容区 / 区块 → 玻璃卡片 */ .tool-page .content, .tool-page .main, .tool-page .body { padding: 0 !important; background: transparent !important; } .tool-page .section, .tool-page .panel, .tool-page .card, .tool-page .query-section, .tool-page .result-section, .tool-page .results-section, .tool-page .filter-section, .tool-page .search-section, .tool-page .info-box, .tool-page .output-box, .tool-page .result-box, .tool-page .form-group { background: var(--glass-bg) !important; background-image: none !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--glass-shadow), var(--glass-inset) !important; padding: var(--sp-5) !important; margin-bottom: var(--sp-4) !important; color: var(--text-1) !important; } .tool-page .section-title, .tool-page .panel-title, .tool-page .query-section h3, .tool-page .result-section h3, .tool-page .section h3 { font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 650 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--text-3) !important; border-bottom: 1px solid var(--separator) !important; padding-bottom: 10px !important; margin: 0 0 var(--sp-4) !important; } /* 旧版菜单栏 / 工具栏 */ .tool-page .menu-bar, .tool-page .toolbar, .tool-page .actions, .tool-page .button-group, .tool-page .controls { background: transparent !important; border: none !important; } .tool-page .menu-item { background: var(--glass-bg-strong) !important; background-image: none !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; color: var(--text-1) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--r-full) !important; padding: 9px 18px !important; font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -0.01em !important; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08) !important; cursor: pointer !important; } .tool-page .menu-item:hover { background: var(--hover-strong) !important; color: var(--text-1) !important; } /* 旧版标签页 */ .tool-page .tabs { display: inline-flex !important; gap: 2px !important; padding: 3px !important; background: var(--fill-1) !important; border: 1px solid var(--control-border) !important; border-radius: var(--r-full) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; backdrop-filter: blur(20px) saturate(160%) !important; margin-bottom: var(--sp-4) !important; } .tool-page .tab { font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--text-2) !important; background: transparent !important; border-radius: var(--r-full) !important; padding: 8px 18px !important; cursor: pointer !important; text-transform: none !important; letter-spacing: -0.01em !important; } .tool-page .tab.active { background: var(--seg-active-bg) !important; color: var(--seg-active-fg) !important; font-weight: 650 !important; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12) !important; } /* 旧版标签页用 ::after 画了一条下划线，新的胶囊样式不需要它 */ .tool-page .tab::after, .tool-page .tab::before, .tool-page .tab.active::after, .tool-page .tab.active::before, .tool-page .menu-item::after, .tool-page .menu-item::before { content: none !important; display: none !important; } /* 返回键 / 主题切换键一律不带下划线 */ .tool-page .back-btn, .tool-page .theme-toggle, .back-btn, .theme-toggle { text-decoration: none !important; } /* 旧版结果网格条目 */ .tool-page .result-item, .tool-page .result-row, .tool-page .data-row { background: var(--surface-tint) !important; border: 1px solid var(--separator) !important; border-radius: var(--r-sm) !important; padding: 10px 14px !important; margin-bottom: 6px !important; color: var(--text-1) !important; font-size: 14px !important; } /* 旧版状态栏 / 页脚 */ .tool-page .status-bar, .tool-page .footer { background: var(--glass-bg) !important; background-image: none !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--glass-shadow) !important; padding: var(--sp-4) var(--sp-5) !important; margin-top: var(--sp-4) !important; color: var(--text-3) !important; font-size: 13px !important; text-align: center !important; } /* 旧版模态框 注意两个老页面的类名约定是相反的： · o_ring_search → .modal 是遮罩层，.modal-content 是弹窗本体 · Thread_Assistant → .modal-overlay 是遮罩层，.modal 才是弹窗本体 所以 .modal 先按遮罩处理，再用更具体的选择器把「遮罩里的 .modal」还原成弹窗。 */ /* 遮罩层 */ .tool-page .modal, .tool-page .modal-overlay { background: rgba(20, 22, 30, 0.42) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; } /* 弹窗本体 */ .tool-page .modal-content, .tool-page .modal-box, .tool-page .modal-overlay > .modal { background: var(--glass-bg-strong) !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--r-xl) !important; box-shadow: var(--glass-shadow-lg) !important; padding: var(--sp-6) !important; color: var(--text-1) !important; } /* 旧版硬编码文字色 → 主题令牌，否则深色模式下「深灰字 + 深色底」直接看不见 */ .tool-page .result-label, .tool-page .range-label, .tool-page .input-group label, .tool-page .select-wrapper label, .tool-page .help-content h3, .tool-page .help-content p, .tool-page .modal p, .tool-page .result-desc, .tool-page .field-label { color: var(--text-2) !important; } .tool-page .result-value, .tool-page .modal h3, .tool-page .modal-title, .tool-page .help-content strong { color: var(--text-1) !important; } .tool-page .result-value { font-family: var(--font-mono) !important; } .tool-page .modal-header { border-bottom: 1px solid var(--separator) !important; } .tool-page .close-btn { background: var(--fill-2) !important; border: none !important; border-radius: var(--r-full) !important; color: var(--text-2) !important; width: 32px !important; height: 32px !important; font-size: 20px !important; line-height: 1 !important; cursor: pointer !important; } .tool-page .close-btn:hover { background: var(--fill-3) !important; color: var(--text-1) !important; } /* 旧版表单控件 */ .tool-page input[type="text"], .tool-page input[type="number"], .tool-page input[type="search"], .tool-page input[type="password"], .tool-page select, .tool-page textarea { font-family: var(--font-sans) !important; font-size: 15px !important; color: var(--text-1) !important; /* 用 background-color 而非 background 简写，避免覆盖掉 select 的下拉箭头 */ background-color: var(--field-bg) !important; border: 1px solid var(--field-border) !important; border-radius: var(--r-sm) !important; padding: 10px 13px !important; max-width: none !important; width: auto !important; box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.05) !important; margin: 0 !important; text-transform: none !important; letter-spacing: normal !important; } .tool-page input:focus, .tool-page select:focus, .tool-page textarea:focus { border-color: rgba(10, 132, 255, 0.75) !important; box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18) !important; } .tool-page label { font-family: var(--font-sans) !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: var(--text-3) !important; display: block !important; margin-bottom: 5px !important; } /* 旧版按钮 */ .tool-page button:not(.close-btn):not(.theme-toggle), .tool-page .btn, .tool-page input[type="submit"] { font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 600 !important; color: #fff !important; background: linear-gradient(180deg, #2E93FF, var(--accent)) !important; background-image: linear-gradient(180deg, #2E93FF, var(--accent)) !important; border: none !important; border-radius: var(--r-full) !important; padding: 10px 20px !important; cursor: pointer !important; text-transform: none !important; letter-spacing: -0.01em !important; box-shadow: 0 6px 18px rgba(10, 132, 255, 0.3) !important; transform: none !important; transition: filter var(--dur) var(--ease) !important; } .tool-page button:not(.close-btn):not(.theme-toggle):hover, .tool-page .btn:hover { filter: brightness(1.08) !important; } /* 旧版表格 */ .tool-page table { width: 100% !important; border-collapse: collapse !important; background: transparent !important; border: none !important; font-size: 14px !important; } .tool-page th { background: var(--th-bg) !important; color: var(--text-3) !important; font-family: var(--font-sans) !important; font-size: 11.5px !important; font-weight: 650 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 11px 14px !important; border-bottom: 1px solid var(--separator) !important; text-align: left !important; } .tool-page td { padding: 11px 14px !important; border-bottom: 1px solid var(--separator) !important; color: var(--text-2) !important; background: transparent !important; font-variant-numeric: tabular-nums !important; } .tool-page tbody tr:hover td { background: var(--row-hover) !important; } /* 旧版滑块 */ .tool-page .slider-track { background: var(--fill-2) !important; height: 8px !important; border-radius: var(--r-full) !important; } .tool-page .slider-range { background: var(--accent) !important; height: 8px !important; border-radius: var(--r-full) !important; } /* 滑块本体用「正文色的反色」填充，再套一圈页面底色描边， 这样无论浅色还是深色，滑块都不会和轨道或文字糊在一起。 */ .tool-page .slider-handle { background: var(--text-1) !important; border: 3px solid var(--page-bg) !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; box-shadow: 0 2px 10px rgba(16, 24, 40, 0.35) !important; } .tool-page .slider-handle:hover { background: var(--text-1) !important; } /* 旧版徽章 */ .tool-page .badge, .tool-page .tag, .tool-page .chip, .tool-page .pill { font-family: var(--font-sans) !important; font-size: 11.5px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0.02em !important; color: var(--text-2) !important; background: var(--fill-1) !important; border: 1px solid var(--badge-border) !important; border-radius: var(--r-full) !important; padding: 3px 10px !important; } /* 旧版结果文本区 */ .tool-page pre, .tool-page code, .tool-page .result-text, .tool-page .output { font-family: var(--font-mono) !important; font-size: 13px !important; color: var(--text-1) !important; background: var(--surface-tint) !important; border: 1px solid var(--separator) !important; border-radius: var(--r-sm) !important; padding: var(--sp-3) !important; } /* ============================================================ 20. 弹窗（原生 ）与行内说明 ============================================================ */ dialog.hai-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(82vh, 820px); padding: 0; margin: auto; display: flex; flex-direction: column; overflow: hidden; color: var(--text-1); background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--glass-shadow-lg), var(--glass-inset); } dialog.hai-dialog:not([open]) { display: none; } dialog.hai-dialog::backdrop { background: rgba(16, 18, 26, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* 极老浏览器没有 showModal()，退化成普通定位 */ dialog.hai-dialog.is-fallback { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; } .hai-dialog-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--separator); } .hai-dialog-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .hai-dialog-close { flex: none; width: 32px; height: 32px; display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--text-2); background: var(--fill-2); border: none; border-radius: var(--r-full); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .hai-dialog-close:hover { background: var(--fill-3); color: var(--text-1); } .hai-dialog-body { padding: var(--sp-5) var(--sp-6) var(--sp-6); overflow-y: auto; font-size: 14px; line-height: 1.8; color: var(--text-2); } .hai-dialog-body p { margin: 0 0 var(--sp-4); } .hai-dialog-body p:last-child { margin-bottom: 0; } .hai-dialog-body h3 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--text-1); margin: var(--sp-5) 0 var(--sp-3); } .hai-dialog-body h3:first-child { margin-top: 0; } .hai-dialog-body strong { color: var(--text-1); font-weight: 650; } .hai-dialog-body .contact { display: inline-block; font-family: var(--font-mono); font-size: 13.5px; color: var(--accent-strong); background: var(--nav-active-bg); border-radius: var(--r-sm); padding: 2px 10px; } /* 标题下的注释行 + 说明按钮 */ .hint-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); } .hint-note { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; } .hint-note svg { width: 15px; height: 15px; flex: none; } .hint-btn { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--accent-strong); background: var(--nav-active-bg); border: none; border-radius: var(--r-full); padding: 5px 13px; cursor: pointer; white-space: nowrap; transition: filter var(--dur) var(--ease); } .hint-btn:hover { filter: brightness(0.94); } .hint-btn:active { transform: scale(0.97); } /* 页脚里的文字按钮 */ .linklike { font-family: inherit; font-size: inherit; color: var(--text-2); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur) var(--ease); } .linklike:hover { color: var(--accent-strong); } @media (max-width: 620px) { .hai-dialog-head { padding: var(--sp-4) var(--sp-5); } .hai-dialog-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); font-size: 13.5px; } .hai-dialog-body h3 { font-size: 14px; } } /* ============================================================ 21. 小液智能问答：右下角悬浮入口 + 终端风格对话框 ------------------------------------------------------------ 配色与样式刻意照搬 onetnote rag 那套终端界面（等宽字体、荧光绿、 CRT 扫描线、块状光标、开机日志），所以这里的颜色**不跟站点深浅主题走**， 永远是黑底绿字。 ============================================================ */ :root { --term-bg: #040906; --term-panel: #07120b; --term-line: #123d24; --term-line2: #1d5c37; --term-fg: #3ddc84; --term-br: #8dffb8; --term-dim: #35a862; --term-mute: #256b40; --term-err: #ff6b6b; --term-font: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, Menlo, 'Liberation Mono', 'Microsoft YaHei', monospace; } /* ---------- 右下角悬浮入口 ---------- */ .ask-fab { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 900; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; font: 600 13.5px/1 var(--term-font); letter-spacing: 0.04em; color: var(--term-br); background: linear-gradient(180deg, #0b2416 0%, var(--term-panel) 100%); border: 1px solid var(--term-line2); border-radius: 4px; cursor: pointer; box-shadow: 0 0 18px rgba(61, 220, 132, 0.28), 0 10px 26px rgba(0, 0, 0, 0.28); text-shadow: 0 0 6px rgba(61, 220, 132, 0.45); transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ask-fab:hover { color: #d6ffe6; box-shadow: 0 0 26px rgba(61, 220, 132, 0.45), 0 12px 30px rgba(0, 0, 0, 0.32); } .ask-fab:active { transform: translateY(1px); } .ask-fab:focus-visible { outline: 2px solid var(--term-br); outline-offset: 3px; } .ask-fab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--term-fg); box-shadow: 0 0 8px var(--term-fg); animation: askPulse 2.6s ease-in-out infinite; } .ask-fab-cur { display: inline-block; width: 7px; height: 13px; background: var(--term-fg); animation: askBlink 1.1s steps(1) infinite; } @keyframes askPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes askBlink { 50% { opacity: 0; } } /* ---------- 对话框外壳（盖掉玻璃皮肤的观感）---------- */ dialog.hai-dialog.ask-dialog { width: min(880px, calc(100vw - 24px)); max-height: min(88vh, 800px); color: var(--term-fg); background: var(--term-bg); background-image: radial-gradient(130% 90% at 50% -10%, #0b2416 0%, var(--term-bg) 62%); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--term-line2); border-radius: 3px; box-shadow: 0 0 40px rgba(61, 220, 132, 0.22), 0 24px 60px rgba(0, 0, 0, 0.5); font: 14px/1.7 var(--term-font); text-shadow: 0 0 6px rgba(61, 220, 132, 0.35); overflow: hidden; } dialog.ask-dialog::backdrop { background: rgba(2, 6, 4, 0.72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* CRT 扫描线：只铺在框里，别挡住点击 */ .ask-crt { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.28) 2px 4px); animation: askFlick 7s infinite; } @keyframes askFlick { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.45; } } .ask-dialog ::selection { background: var(--term-line2); color: var(--term-br); } .ask-dialog code { background: #0d2416; color: var(--term-br); padding: 0 4px; border-radius: 2px; } /* ---------- 标题栏 ---------- */ .ask-term-head { position: relative; z-index: 4; flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--term-line); background: rgba(7, 18, 11, 0.72); } .ask-term-dots { display: flex; gap: 5px; flex: none; } .ask-term-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--term-mute); box-shadow: 0 0 6px var(--term-mute); } .ask-term-dots i:first-child { background: var(--term-dim); } .ask-term-head h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; color: var(--term-br); text-shadow: 0 0 10px rgba(141, 255, 184, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-term-meta { margin-left: auto; color: var(--term-mute); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52%; } .ask-term-close { flex: none; color: var(--term-dim); background: transparent; border: 1px solid var(--term-line2); border-radius: 2px; padding: 0 7px; line-height: 1.6; } .ask-term-close:hover { color: var(--term-err); border-color: var(--term-err); } /* ---------- 日志区 ---------- */ .ask-term-log { position: relative; z-index: 4; flex: 1 1 auto; min-height: 190px; overflow-y: auto; padding: 14px 16px; scrollbar-width: thin; scrollbar-color: var(--term-line2) transparent; } .ask-term-log::-webkit-scrollbar { width: 8px; } .ask-term-log::-webkit-scrollbar-thumb { background: var(--term-line2); border-radius: 4px; } .ask-line { white-space: pre-wrap; word-break: break-word; } .ask-boot { color: var(--term-dim); font-size: 12.5px; } .ask-boot b { color: var(--term-br); font-weight: 400; } .ask-boot.is-err, .ask-boot.is-err b { color: var(--term-err); } .ask-q { margin: 14px 0 4px; color: var(--term-br); } .ask-q span { color: var(--term-dim); margin-right: 6px; } .ask-a { border-left: 2px solid var(--term-line2); padding-left: 12px; margin: 4px 0 14px; color: var(--term-br); } .ask-a.is-err { border-left-color: var(--term-err); color: var(--term-err); text-shadow: 0 0 6px rgba(255, 107, 107, 0.35); } .ask-a b { color: #d6ffe6; font-weight: 700; text-shadow: 0 0 10px rgba(214, 255, 230, 0.5); } .ask-cur { display: inline-block; width: 8px; height: 15px; background: var(--term-br); vertical-align: -2px; box-shadow: 0 0 8px var(--term-br); animation: askBlink 1s steps(1) infinite; } .ask-src { margin-top: 10px; border-top: 1px dashed var(--term-line); padding-top: 7px; } .ask-src summary { cursor: pointer; color: var(--term-dim); font-size: 12.5px; list-style: none; } .ask-src summary::-webkit-details-marker { display: none; } .ask-src summary::before { content: '[+] '; } .ask-src[open] summary::before { content: '[-] '; } .ask-src .txt { white-space: pre-wrap; color: var(--term-dim); background: var(--term-panel); border: 1px solid var(--term-line); padding: 8px; margin: 6px 0 0; max-height: 240px; overflow: auto; font-size: 12.5px; } /* ---------- 话题标签 ---------- */ .ask-term-chips { position: relative; z-index: 4; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 16px 8px; } .ask-term-chips i { color: var(--term-mute); font-style: normal; font-size: 12px; } .ask-chip { font: inherit; font-size: 12.5px; padding: 2px 4px; color: var(--term-fg); background: transparent; border: 1px solid var(--term-line2); border-radius: 2px; cursor: pointer; } .ask-chip::before { content: '['; color: var(--term-mute); } .ask-chip::after { content: ']'; color: var(--term-mute); } .ask-chip:hover { background: var(--term-line); color: var(--term-br); box-shadow: 0 0 10px rgba(61, 220, 132, 0.3); } .ask-chip:disabled { opacity: 0.4; cursor: default; } /* ---------- 输入行 ---------- */ .ask-term-form { position: relative; z-index: 4; flex: none; border-top: 1px solid var(--term-line); background: rgba(7, 18, 11, 0.8); } .ask-term-input { display: flex; align-items: center; gap: 8px; padding: 9px 16px; } .ask-ps1 { color: var(--term-br); white-space: nowrap; flex: none; font-size: 13px; } .ask-ps1 u { text-decoration: none; color: var(--term-dim); } .ask-blk { width: 8px; height: 16px; background: var(--term-fg); flex: none; animation: askBlink 1.1s steps(1) infinite; } .ask-term-input textarea { flex: 1; resize: none; height: 44px; padding: 8px 0; color: var(--term-br); background: transparent; border: 0; outline: none; font: inherit; text-shadow: inherit; } .ask-term-input textarea::placeholder { color: var(--term-dim); opacity: 0.75; } .ask-term-input textarea:disabled { opacity: 0.5; } #askSend { flex: none; font: inherit; font-size: 12.5px; padding: 5px 11px; color: var(--term-fg); background: transparent; border: 1px solid var(--term-line2); border-radius: 2px; cursor: pointer; } #askSend:hover:not(:disabled) { background: var(--term-line); color: var(--term-br); box-shadow: 0 0 10px rgba(61, 220, 132, 0.3); } #askSend:disabled { opacity: 0.4; cursor: default; } @media (max-width: 640px) { .ask-term-head { padding: 8px 12px; } .ask-term-head h2 { font-size: 13px; } .ask-term-meta { display: none; } .ask-term-log { padding: 12px; } .ask-term-chips { padding: 0 12px 6px; } .ask-term-input { padding: 8px 12px; gap: 6px; } .ask-ps1, .ask-blk, .ask-q span { display: none; } .ask-term-input textarea { height: 40px; } .ask-fab { padding: 8px 12px; font-size: 13px; } } /* ============================================================ 22. 无障碍：尊重「减少动态效果」 ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }