/* ========================================================================== 全站设计系统 site.css（所有标准页面共用，与首页设计语言一致） -------------------------------------------------------------------------- · 浅色默认 + 深色适配（跟随 html[data-theme]） · 顶栏 / 导航 / 计时 chip / 页脚 / 自定义光标 / 焦点态统一 · 自定义光标由 assets/common.js 驱动（桌面精确指针时启用）说明：标准页面均带，故用 body[data-page] 提升优先级，覆盖 style.css 中 [data-theme="light"] 的同名规则；notes.html 不引入本文件。 ========================================================================== */ /* ---------- 全站配色（浅色默认；变量作用于 body 子树） ---------- */ body{ --bg:#f8fafc; --bg2:#f1f5f9; --glass:#ffffff; --glass2:#f8fafc; --line:rgba(15,23,42,.08); --line2:rgba(15,23,42,.14); --ink:#1e293b; --sub:#64748b; --dim:#94a3b8; --acc:#4f46e5; --acc2:#7c3aed; --acc-dim:rgba(79,70,229,.08); --acc-line:rgba(79,70,229,.32); --brand-grad:linear-gradient(135deg,#4f46e5,#7c3aed); background:var(--bg);color:var(--ink) } html[data-theme="dark"] body{ --bg:#0b1120; --bg2:#0f172a; --glass:rgba(30,41,59,.55); --glass2:rgba(30,41,59,.8); --line:rgba(148,163,184,.14); --line2:rgba(148,163,184,.26); --ink:#e2e8f0; --sub:#94a3b8; --dim:#64748b; --acc:#818cf8; --acc2:#a78bfa; --acc-dim:rgba(129,140,248,.14); --acc-line:rgba(129,140,248,.42) } /* ---------- 顶栏 ---------- */ body[data-page] .topbar{ background:rgba(255,255,255,.78); border-bottom:1px solid var(--line); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px) } html[data-theme="dark"] body[data-page] .topbar{background:rgba(11,17,32,.72)} body[data-page] .brand h1{color:var(--ink)} body[data-page] .brand-logo{ background:var(--brand-grad);border:none; box-shadow:0 6px 16px rgba(79,70,229,.28) } body[data-page] .brand-logo .logo-ic{color:#fff} /* ---------- 导航（隐藏图标框，纯文字 + 品牌色选中态） ---------- */ body[data-page] .nb-ic{display:none} body[data-page] .nav-btn{font-size:13.5px;font-weight:500} body[data-page] .nav-btn:hover{background:var(--acc-dim);color:var(--ink)} body[data-page] .nav-btn.on{ background:var(--acc-dim);color:var(--acc);font-weight:700; box-shadow:inset 0 0 0 1px var(--acc-line) } body[data-page] .nav-more-menu{background:rgba(255,255,255,.96);box-shadow:0 18px 50px rgba(15,23,42,.16)} html[data-theme="dark"] body[data-page] .nav-more-menu{background:rgba(15,23,42,.96)} /* ---------- 顶栏右侧：计时 chip / 重置 ---------- */ body[data-page] .tb-chip{ display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:99px; background:var(--acc-dim);border:1px solid var(--acc-line);font-size:11.5px;color:var(--sub) } body[data-page] .tb-chip b{color:var(--acc);font-weight:700} body[data-page] .tb-reset{background:#fff;border-color:var(--line2);color:var(--dim)} body[data-page] .tb-reset:hover{color:var(--acc);border-color:var(--acc-line);transform:rotate(-20deg)} html[data-theme="dark"] body[data-page] .tb-reset{background:transparent} /* 主题切换按钮（文字版：夜间 / 日间） */ body[data-page] .tb-theme{ width:auto;height:32px;padding:0 14px;border-radius:99px; font-size:12px;font-weight:700;color:#4f46e5;background:#fff; border:1.5px solid var(--acc-line);box-shadow:0 2px 8px rgba(15,23,42,.06) } body[data-page] .tb-theme:hover{background:var(--acc-dim);color:var(--acc);transform:none} html[data-theme="dark"] body[data-page] .tb-theme{background:transparent;color:#a5b4fc} /* ---------- 内容卡片 / 控件在浅色下的通用质感 ---------- */ body[data-page] .btn{ background:var(--brand-grad);color:#fff;border-color:transparent; box-shadow:0 6px 16px rgba(79,70,229,.22) } body[data-page] .btn:hover{filter:brightness(1.07)} body[data-page] .btn.ghost{background:#fff;color:#4f46e5;border:1.5px solid #c7d2fe;box-shadow:none} body[data-page] .btn.ghost:hover{background:#4f46e5;color:#fff;border-color:#4f46e5} body[data-page] .chip{background:#fff;border:1px solid var(--line2)} body[data-page] .chip:hover{border-color:var(--acc-line);background:var(--acc-dim);color:var(--acc)} body[data-page] .chip.on{background:var(--acc-dim);border-color:var(--acc-line);color:var(--acc)} body[data-page] .dir-link,body[data-page] .pub-go{color:#4f46e5;font-weight:600} html[data-theme="dark"] body[data-page] .chip{background:var(--glass)} html[data-theme="dark"] body[data-page] .btn.ghost{background:transparent;color:#a5b4fc;border-color:var(--acc-line)} html[data-theme="dark"] body[data-page] .dir-link,html[data-theme="dark"] body[data-page] .pub-go{color:#a5b4fc} /* 分子结构式预览：夜间模式加一层淡淡亮底，衬托亮色结构线（SmilesDrawer dark 主题） */ html[data-theme="dark"] body[data-page] .skel{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} html[data-theme="dark"] body[data-page] .sd-box{background:rgba(255,255,255,.04)} /* ---------- 页脚 ---------- */ body[data-page] .pf-footer{ max-width:none;margin:20px 0 0;padding:44px 36px 0; background:#f8fafc;border-top:1px solid var(--line) } html[data-theme="dark"] body[data-page] .pf-footer{background:#0b1120} body[data-page] .pf-inner{max-width:1100px;margin:0 auto} body[data-page] .pf-name .logo-ic{display:none} body[data-page] .pf-col a{font-size:13px} body[data-page] .pf-col a:hover{color:#4f46e5} html[data-theme="dark"] body[data-page] .pf-col a:hover{color:#a5b4fc} body[data-page] .pf-bottom{max-width:1100px;margin:0 auto;border-top:1px solid var(--line)} /* ---------- 自定义光标（桌面精确指针 + 非减少动画偏好时启用） ---------- */ /* 默认隐藏光标元素，避免在不支持的设备上露出内部箭头文本 */ .cur{display:none} @media (pointer:fine) and (min-width:769px) and (prefers-reduced-motion:no-preference){ /* 全站统一隐藏系统指针（含卡片/按钮/输入框），只显示自定义圆环 */ body[data-page],body[data-page] *{cursor:none !important} .cur{ display:block;position:fixed;top:0;left:0;z-index:99999;pointer-events:none;mix-blend-mode:normal; width:20px;height:20px;border-radius:50%; border:1.5px solid rgba(79,70,229,.75);background:rgba(79,70,229,.06); transform:translate(-50%,-50%); transition:opacity .25s ease,width .22s cubic-bezier(.22,1,.36,1),height .22s cubic-bezier(.22,1,.36,1),border-color .2s,background .2s; opacity:0;will-change:transform } .cur.show{opacity:1} /* 按用户要求：全站不显示箭头字符（安全兜底，元素内不保留箭头） */ .cur .cur-arr{display:none} /* hover 交互元素（链接/卡片）：JS 按元素尺寸温和放大（1.2 倍，上限 56px），边框变淡 */ .cur.hover{border-color:rgba(79,70,229,.38);background:rgba(79,70,229,.04)} /* 悬停输入区：圆环变色提示（天蓝，替代系统 I-beam），形状保持不变 */ .cur.typing{border-color:rgba(14,165,233,.9);background:rgba(14,165,233,.16)} } /* 减少动画偏好：禁用自定义光标，恢复默认指针 */ @media (prefers-reduced-motion:reduce){ .cur{display:none !important} body[data-page],body[data-page] *{cursor:auto !important} } /* ============ 主题切换动画（新主题从右上角圆形扩散） ============ */ /* 由 common.js 的 toggleMainTheme 驱动（View Transitions API）；扩散原点取自主题按钮位置，默认右上角（100%, 0%） */ ::view-transition-old(root), ::view-transition-new(root){animation:none;mix-blend-mode:normal} ::view-transition-old(root){z-index:1} ::view-transition-new(root){z-index:2147483646;animation:vtReveal .55s cubic-bezier(.4,0,.2,1) both} @keyframes vtReveal{ from{clip-path:circle(0% at var(--vt-x,100%) var(--vt-y,0%))} to{clip-path:circle(150% at var(--vt-x,100%) var(--vt-y,0%))} } @media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){animation:none} } /* ---------- 可访问性：焦点状态 ---------- */ body[data-page] a:focus-visible,body[data-page] button:focus-visible, body[data-page] .hc:focus-visible,body[data-page] .qcard:focus-visible{ outline:2.5px solid #4f46e5;outline-offset:3px;border-radius:12px } /* ============ 分子绘制窗口（SMILES 实时预览 + 片段模板） ============ */ .draw-prev{ margin-top:8px;min-height:200px;display:flex;align-items:center;justify-content:center; border:1.5px dashed var(--line2);border-radius:12px;background:rgba(15,23,42,.02);padding:6px } html[data-theme="dark"] body[data-page] .draw-prev{background:rgba(255,255,255,.03)} .draw-prev svg{width:100%;max-width:320px;height:200px} .draw-tpls{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center} .draw-tpls .tpl-title{font-size:12px;color:var(--sub);margin-right:2px} .tpl{ border:1px solid var(--line2);background:#fff;border-radius:8px;padding:4px 10px; font-size:12px;font-family:Consolas,"Space Grotesk",monospace;cursor:pointer;color:var(--sub);transition:all .18s } .tpl:hover{color:var(--acc);border-color:var(--acc-line);background:var(--acc-dim);transform:translateY(-1px)} html[data-theme="dark"] body[data-page] .tpl{background:transparent} .draw-status{font-size:12px;margin-top:8px;color:var(--sub)} .draw-status .ok{color:#059669;font-weight:600} html[data-theme="dark"] body[data-page] .draw-status .ok{color:#34d399} .draw-status .err{color:#e11d48;font-weight:600} html[data-theme="dark"] body[data-page] .draw-status .err{color:#fb7185} /* ============ 分子结构对比窗口 ============ */ .cmp-tip{font-size:12.5px;color:var(--sub);margin:6px 0 2px;line-height:1.7} .cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px} .cmp-slot{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--glass)} .cmp-slot select{ width:100%;padding:8px 10px;border-radius:9px;border:1.5px solid var(--line2); background:#fff;color:var(--ink);font-size:12.5px;font-family:inherit;outline:none;transition:border-color .2s } .cmp-slot select:focus{border-color:var(--acc)} html[data-theme="dark"] body[data-page] .cmp-slot select{background:#0f172a} .cmp-svg{ min-height:150px;display:flex;align-items:center;justify-content:center; border:1px dashed var(--line2);border-radius:10px;margin-top:8px;padding:6px;background:rgba(15,23,42,.02) } html[data-theme="dark"] body[data-page] .cmp-svg{background:rgba(255,255,255,.03)} .cmp-svg svg{width:100%;max-width:240px;height:150px} .cmp-meta{margin-top:8px;font-size:12px;color:var(--sub);line-height:1.7} .cmp-meta b{display:block;color:var(--ink);font-size:13px} .cmp-meta code{display:block;font-size:10.5px;word-break:break-all;color:var(--dim);margin-top:2px;font-family:Consolas,monospace} @media (max-width:560px){.cmp-grid{grid-template-columns:1fr}} /* ============ 学习笔记页（知识卡片 + 术语词典合并）Tab ============ */ .ltabs{display:flex;gap:8px;margin:2px 0 18px;border-bottom:1px solid var(--line);padding-bottom:12px;flex-wrap:wrap} .ltab{ border:1px solid var(--line2);background:#fff;border-radius:99px;padding:8px 18px; font-size:13.5px;font-weight:600;color:var(--sub);cursor:pointer;font-family:inherit;transition:all .2s } .ltab:hover{color:var(--acc);border-color:var(--acc-line);transform:translateY(-1px)} .ltab.on{background:var(--brand-grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(79,70,229,.25)} .ltab .ltab-num{font-size:11px;font-weight:500;opacity:.85} html[data-theme="dark"] body[data-page] .ltab{background:transparent} .ltab-pane{min-height:40vh}