/* ========================================================= Foundit 统一风格覆盖层（howtovibe） - 导航栏：完全复刻 Foundit 主页（固定玻璃头 + 渐变 + 精确尺寸） - 强调色：统一为 FE6A04（覆盖 JS 行内变量） - 深色模式：中性色板对齐主页 + 修复卡片示例的硬编码浅色表面 ========================================================= */ /* ---------- 0. 导航栏随主题同步淡变（background-color + mask，非 gradient） ---------- 玻璃头原本用 linear-gradient(background-image) 承载，但 CSS 无法对 background-image 做 transition，导致切换主题时导航栏瞬切 / 滞后于页面背景。 改法：把玻璃头底色改为「可过渡的 background-color(--header-solid)」，上下透明 衰减交给原本就存在的 mask-image 完成（mask 透明度曲线与原渐变一致）。 这样导航栏与 html/body 共用同一条 background-color .4s 过渡，严格同步， 且不依赖 @property / 伪元素继承重绘，Safari/Chrome/FF 表现一致。 */ /* ---------- 1. 强调色统一为 FE6A04 ---------- 使用 !important 以压过 howtovibe-static.js 在 行内写入的 --brand / --accent（其 setTheme 不带 !important，故此处可覆盖）。 */ html { --brand: #FE6A04 !important; --brand-hover: #e05f00 !important; --accent: #FE6A04 !important; --brand-light: rgba(254, 106, 4, .14) !important; --accent-light: rgba(254, 106, 4, .14) !important; } /* ---------- 2. 主页导航栏（与主页完全一致） ---------- */ /* 头部的底层变量（浅色 / 深色分别给出） */ :root { --header-solid: rgba(250, 250, 250, .97); --header-search-bg: rgba(255, 255, 255, .45); --header-search-focus-bg: rgba(255, 255, 255, .78); --header-search-focus-border: rgba(22, 22, 22, .22); --header-control-hover: rgba(22, 22, 22, .08); /* 主页用 --muted 表示次级文字，howtovibe 未定义，这里补齐 */ --muted: #6b6b6b; } :root { --header-height: 74px; } main { padding-top: var(--header-height); } .site-header { position: fixed; z-index: 30; top: 0; right: 0; left: 0; height: 116px; pointer-events: none; } .site-header::before { position: absolute; inset: 0 0 auto; height: 116px; background-color: var(--header-solid); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); content: ""; mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .65) 40%, rgba(0, 0, 0, .24) 72%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .65) 40%, rgba(0, 0, 0, .24) 72%, transparent 100%); } .site-header__inner { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; width: calc(100% - 56px); min-height: var(--header-height); align-items: center; gap: 24px; margin-inline: auto; pointer-events: auto; } .brand { font-size: 18px; font-weight: 600; letter-spacing: -.04em; text-decoration: none; display: inline-flex; align-items: center; } .brand-logo { display: block; width: 76px; height: 20px; } .brand-logo__image { width: 100%; height: 100%; object-fit: contain; object-position: left center; } /* 视觉隐藏但供屏幕阅读器读取（与主页 main.css 完全一致） */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .main-nav { display: flex; align-items: center; gap: 24px; } .main-nav a, .text-action { color: var(--muted); font-size: 13px; text-decoration: none; transition: color 180ms ease, opacity 180ms ease; } .main-nav a:hover, .main-nav a.active, .text-action:hover { color: var(--text); } /* .nav-macro 由 howtovibe-static.js 动态填充分类按钮，样式对齐 .main-nav a */ .nav-macro button { color: var(--muted); font-size: 13px; font-weight: 500; background: transparent; border: 0; padding: 6px 4px; font-family: inherit; transition: color 180ms ease, background-color 180ms ease; } .nav-macro button:hover { color: var(--text); } .nav-macro button.on { color: var(--text); font-weight: 600; } .header-actions { display: flex; align-items: center; justify-self: end; gap: 4px; } .header-search { display: flex; width: min(100%, 188px); min-height: 34px; align-items: center; border: 1px solid transparent; border-radius: 999px; background: var(--header-search-bg); padding: 0 5px 0 12px; transition: background-color 180ms ease, border-color 180ms ease; } .header-search:focus-within { border-color: var(--header-search-focus-border); background: var(--header-search-focus-bg); } .header-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; line-height: 1.3; } .header-search input::placeholder { color: var(--muted); opacity: 1; } .header-search button { display: grid; width: 26px; height: 26px; flex: none; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); padding: 0; transition: background-color 180ms ease, color 180ms ease; } .header-search button:hover { background: var(--header-control-hover); color: var(--text); } .header-search svg { width: 15px; height: 15px; } .theme-toggle { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); padding: 0; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; } .theme-toggle:hover { background: var(--header-control-hover); color: var(--text); } .theme-toggle[aria-pressed="true"] { color: var(--text); } .theme-toggle__icon { width: 17px; height: 17px; } .theme-toggle__icon--sun { display: none; } html[data-theme="dark"] .theme-toggle__icon--sun { display: block; } html[data-theme="dark"] .theme-toggle__icon--moon { display: none; } /* 旧版品牌色圆点按钮（已不在新结构中） */ .nav-circle { display: none !important; } /* 彻底移除自定义鼠标指针：确保始终使用系统原生光标，隐藏任何残留的 .cursor-fx 跟随元素 */ html.has-cursor-fx, html.has-cursor-fx * { cursor: auto !important; } .cursor-fx { display: none !important; } /* ---------- 3. 深色模式：中性色板对齐主页 ---------- */ html[data-theme="dark"] { color-scheme: dark; --bg: #171717 !important; --bg-soft: #1d1d1d !important; --bg-hover: #292929 !important; --text: #f1f1f1 !important; --text-2: #d0d0d0 !important; --text-3: #a8a8a8 !important; --border: #393939 !important; --border-light: #2a2a2a !important; /* 演示组件在暗色下的“抬升表面”，与 #1d1d1d 画布形成对比 */ --surface-raised: #262626 !important; --muted: #a8a8a8 !important; --header-solid: rgba(23, 23, 23, .97); --header-search-bg: rgba(44, 44, 44, .7); --header-search-focus-bg: rgba(54, 54, 54, .92); --header-search-focus-border: rgba(241, 241, 241, .32); --header-control-hover: rgba(241, 241, 241, .12); /* 强调色的暗色淡背景（橙色调） */ --brand-light: rgba(254, 106, 4, .16) !important; --accent-light: rgba(254, 106, 4, .16) !important; --green-light: color-mix(in srgb, #00b42a 16%, #1d1d1d) !important; --red-light: color-mix(in srgb, #f53f3f 16%, #1d1d1d) !important; } html, body { background: var(--bg); color: var(--text); } /* 主题切换时的明度渐变过渡：仅在 html.theme-transition 生效，避免首屏闪烁。 只过渡 background-color / border-color —— 不过渡 color/fill/box-shadow， 否则全量文字重绘 + 阴影重算会导致整页卡顿。背景渐变已足够呈现浅↔深平滑切换。 */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color .4s ease, border-color .4s ease !important; } /* 修复：卡片悬浮边框在暗色下原是浅灰 #d9dbe0 */ html[data-theme="dark"] .card:hover { border-color: var(--border) !important; } /* ---------- 4. 卡片示例深色模式适配（自动生成） ---------- /* 仅将“写死近白色/浅灰表面”的演示组件映射到暗色抬升表面，保留语义色（绿/红/橙等） */ html[data-theme="dark"] .ac-panel:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ac-sc-mask>.pop:not(.on), .form-sc-mask>.pop:not(.on), .tree-select-sc-mask>.pop:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .alert-scene-card:not(.on), .toast-scene:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .anat-part.is-anat-active .c-link:hover:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .anat-part.is-anat-active .idx:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .api-req:not(.on), .api-resp:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .apple-film:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .apple-menu:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .apple-thumb aside:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .apple-thumb>div:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .apple-toolbar:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .back-top-scene:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .backtop-sc-btn:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .bento-health:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .bento-health article:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .bento-score>i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .cas-cols:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .cascader-sc-goods:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .catalog-video>div:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .cdn-edge:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .cdn-origin:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .clone-anat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .clone-gh:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .commerce-copy:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .commerce-photo span:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .commit-anat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .cp-card .cp-item:not(.on), .cp-card .cp-item:first-child:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .cr-arrow:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .crs-arr:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .crs-sc-arr:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .cta-demo:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .cursor-anat-input:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .date-picker-sc-stat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .db-anat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .db-table:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .demo-check>i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .demo-radio>i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .demo-switch .track:before:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .deploy-step:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .diff-anat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .diff-demo:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .dm-box:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .dm-scene:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .dns-node:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .dom-anat .dom-seg:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .dom-demo-row:not(.on), .dom-demo-search:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .dp-panel:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .drawer-anat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .drawer-box:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .drawer-panel:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .drawer-scene:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .dt-scene:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .dt-toast:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .editorial-city:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .env-var-anat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .env-var-file:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .fade-anat-fr:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .fade-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .fade-f:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .fade-v-fr:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .faq-item:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .footer-d-form:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .footer-demo:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .gd-col:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .gd-dot.hollow:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .gd-stage:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-box:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-command:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-device-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-device-card:not(.on), .git-file-card:not(.on), .git-folder-card:not(.on), .git-repo-card:not(.on), .git-version-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-device-screen:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-diff-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-diff-card.is-after:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-diff-card.is-before:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-drawer:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-file-list:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-file-mark:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-file-mark:after:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-folder-icon:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-folder-icon:before:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-merge-result:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-repo-card.is-cloud:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-repo-icon:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-review-change:not(.on), .git-review-checks:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .git-shared-history:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .gitflow-box:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .gitflow-br:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .gitflow-br-tag.green:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .gitflow-col:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .gitflow-node:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .gitflow-tag.green:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .gitignore-anat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .gitignore-file:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .glass-anat-final:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .glass-anat-tintchip:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .glass-demo-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .glass-now nav b:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .glass-player>header button:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .glass-progress:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .glass-progress i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .glass-queue:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .glass-sc-frost:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .glass-v-chip.light:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .glass-v-chip.strong:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .hero-d-ghost:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .hero-demo:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .html-anat:not(.on), .html-page:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .html-node:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .http-msg:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .https-anat .https-cert:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .https-bar:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .md-anat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .md-col:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .merge-cf:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .merge-cf-yours:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .minimal-command:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .minimal-focus article:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .minimal-list:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-box:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-btn.outline:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-casc:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-drop:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-icon-btn:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-input:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-modal:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-notif:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-phone:not(.on), .mk-popover:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-radio:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-scene:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-select:not(.on), .mk-textarea:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-step i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-switch i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-toast:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-truncate:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .mk-win:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .modal-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-anatomy>span:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-commerce:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-enterprise:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-enterprise>footer:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-enterprise>header:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-mini.commerce:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-mini.enterprise:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-mini.saas:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-playful>footer:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-playful>header:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-saas>header:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-scene.commerce:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-scene.enterprise:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-scene.enterprise aside>div:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-scene.saas:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ms-scene.saas aside>div:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .nav:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .navbar-d-bar:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .navbar-d-win:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .navbar-demo:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .notification-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .notion-db em:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .notion-db header:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .notion-project:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .notion-project aside:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .npm-anat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .npm-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .pg-sc>span:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .play-face:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .play-note.white:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .popconfirm-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .popover-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .pr-anat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .pr-demo:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .pricing-btn.ghost:not(.on), .sp-demo:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .pricing-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .pricing-d-toggle:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .progress-card:not(.on), .skeleton-frame:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .progress-ring i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .prompt-box:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .prompt-copy:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .push-anat:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .r-dot:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .radio-btns .rb:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .saas-grid article:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .sc-bar .sc-url:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .seg-opt.on:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .seg-sc>span.on:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .seg-thumb:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .select-panel:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .sidebar-wire-side i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .single-site-browser:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .single-site-chrome:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .single-site-chrome>span:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .single-site-final button:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .single-site-page:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .sld-th:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .stash-box:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .stash-item:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .steps-sc .s-node i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .sticky-sc-view:not(.on) { background-color: var(--surface-raised) !important; } /* ---------- 4b. 设计风格「示意样式」预览：保持作者配色（不随深色模式改变） ---------- 根因：设计风格（设计风格 tab）每张卡片内的 .card-demo.style-preview 是一段 「示意样式」——用硬编码颜色（如 #fcfcfc / #1d1d1f、玻璃质感 rgba(255,255,255,.16)、 粗野主义黄黑 #ffc62d/#050505 等）直接绘制出该设计语言的真实观感。这些组件本身 不使用任何 --bg/--text 主题变量。若随站点深色模式被映射到暗色抬升表面，会让示意 失真、无法表达原风格。因此这里刻意不为 .style-* 写任何 html[data-theme="dark"] 覆盖规则，使其在深浅两种主题下都保持作者原始配色（即「不改变颜色」）。 */ /* ---------- 4c. 设计风格预览容器：深色模式下也按浅色变量渲染 ---------- 根因（续 4b）：设计风格卡片与卡片详情里的「示意样式」预览，会复用 Foundit 的 真实组件（如 .bento-health、.swiss-exhibit、.glass-player、.material-card 等）。 这些组件在 html[data-theme="dark"] 下被 foundit-theme.css 的通用规则映射到暗色 变量（--surface-raised / --bg / --border / --text 等）；同时预览容器自身 .dh-demo.style-detail-demo 也用 background:var(--bg-soft)、border:var(--border-light) ——二者在深色模式下都会变暗。预览只为「原样展示设计风格」，不该随站点主题变暗。 做法：在以下两类预览作用域内，把这些暗色变量重新钉回浅色取值（用 !important 压过 html[data-theme="dark"] 上的同名 !important 变量）： · 卡片内： .card-demo.style-preview · 卡片详情内：.style-detail-demo（内含 .style-detail-canvas 与 .style-*-demo 模拟样式） 于是所有通用暗色覆盖规则在预览内仍「生效」，但解析出的都是浅色——预览因此与浅色 模式下观感一致，即「示意样式不在深色模式下改变颜色」。作用域外不受影响。 */ html[data-theme="dark"] .card-demo.style-preview, html[data-theme="dark"] .style-detail-demo, html[data-theme="dark"] .style-detail-canvas { --surface-raised: #f5f5f7 !important; --bg: #ffffff !important; --bg-soft: #f4f4f5 !important; --bg-hover: #ececec !important; --border: #e6e6ea !important; --border-light: #f0f0f2 !important; --text: #18181b !important; --text-2: #3f3f46 !important; --text-3: #71717a !important; --muted: #71717a !important; --green-light: rgba(0, 180, 42, .12) !important; --red-light: rgba(245, 63, 63, .12) !important; } /* ---------- 4d. 非设计风格详情：补齐「写死浅色表面」的演示组件 ---------- 根因：前端/后端/技术/AI/Git 等详情页里的演示组件把背景「写死」成浅色，而内部 文字继承主题变量 --text（深色模式下变浅色），于是「浅色表面 + 浅色文字 = 文字 不可见」。分三类： ① 场景/用法截图（.scene-*、.usage-*、.mk-row、.backtop-sc、.sticky-sc-stuck、 .foundation-box）内部用 inline style="background:#fff"； ② 选中态分段控件 .seg-opt.on（class 写死 background:#fff）； ③ 告警条 .alert-box.is-warning（class 写死 background:#fff7e8）。 做法：仅在 html[data-theme="dark"] 下，把这些写死浅色背景强制映射到暗色抬升 表面 --surface-raised（用 !important 压过 inline style / class 规则）；告警条用 暗色琥珀色调保留「警告」语义。作用域限定在详情内容区 main 内的演示容器；设计风格 预览（.style-detail-* / .card-demo.style-preview，其内部用 class 写死浅色而非 inline #fff）不受影响（已被 4c 钉为浅色）。 */ html[data-theme="dark"] main .scene-item [style*="background:#fff"], html[data-theme="dark"] main .scenes [style*="background:#fff"], html[data-theme="dark"] main .scene-list [style*="background:#fff"], html[data-theme="dark"] main .scene-shot [style*="background:#fff"], html[data-theme="dark"] main .usage-box [style*="background:#fff"], html[data-theme="dark"] main .usage-grid [style*="background:#fff"], html[data-theme="dark"] main .backtop-sc [style*="background:#fff"], html[data-theme="dark"] main .sticky-sc-stuck [style*="background:#fff"], html[data-theme="dark"] main .foundation-box [style*="background:#fff"], html[data-theme="dark"] main .scene-item [style*="background-color:#fff"], html[data-theme="dark"] main .scenes [style*="background-color:#fff"], html[data-theme="dark"] main .scene-list [style*="background-color:#fff"], html[data-theme="dark"] main .scene-shot [style*="background-color:#fff"], html[data-theme="dark"] main .usage-box [style*="background-color:#fff"], html[data-theme="dark"] main .usage-grid [style*="background-color:#fff"], html[data-theme="dark"] main .backtop-sc [style*="background-color:#fff"], html[data-theme="dark"] main .sticky-sc-stuck [style*="background-color:#fff"], html[data-theme="dark"] main .foundation-box [style*="background-color:#fff"] { background-color: var(--surface-raised) !important; } html[data-theme="dark"] main .seg-opt.on { background-color: var(--surface-raised) !important; color: var(--text) !important; } html[data-theme="dark"] main .alert-box.is-warning { background-color: color-mix(in srgb, #ffc62d 16%, #1d1d1d) !important; border-color: color-mix(in srgb, #ffc62d 38%, #1d1d1d) !important; } /* ---------- 4h. 设计原则容器 .principles-box：深色模式下变暗 ---------- 出现位置：22 个 design（style-*）详情里的「设计原则 · Principles」小节，元素为
。VibeHub 源规则写死浅色渐变 `.principles-box{background:linear-gradient(180deg,#fff,var(--brand-light,#f4f6ff) 220%)}`， 顶部 #fff 写死，深色模式下整块仍是白底（computed 实测 backgroundImage = linear-gradient(rgb(255,255,255), rgba(254,106,4,.16) 220%)，lum=1.00），与深色页面 格格不入。该元素不在 .mk 内（不受 4g 影响），属于真实内容容器，按需求应随深色模式 动态变暗。做法：在 html[data-theme="dark"] 下把背景改为「暗表面 → 略深暗底」的渐变， 并保留品牌橙描边（--brand-light），使「设计原则」语义在深浅模式下一致可读。用字面 暗色字面量而非变量，避免落入 4g 在 .mk 内把 --surface-raised 钉回浅色的例外。 */ html[data-theme="dark"] .principles-box { background: linear-gradient(180deg, #262626, #1c1c1c 220%) !important; border-color: var(--brand-light) !important; } /* 设计风格区段锁定为浅色：主题切换按钮置灰且不可点击 */ .theme-toggle.is-locked { opacity: .4; cursor: not-allowed; pointer-events: none; } /* ---------- 4i. 详情页内容深色模式细节修复 ---------- ① 面包屑分隔符 .breadcrumb-separator：VibeHub 写死 color:#393939（深灰）， 深色模式下落在深色页面上对比度仅 ~1.55，几乎看不见。改为暗色下的浅灰 --text-3。 ② Git 类详情的命令行文本 .git-command：VibeHub 写死 color:rgb(87,96,106)（GitHub 浅色 静音色），落在深色代码底 rgb(38,38,38) 上对比度仅 ~2.4。改为暗色下的 --text-2， 保证 git/commit/branch/merge/push/clone/pull/stash/gitignore/diff 等页面命令行可读。 */ html[data-theme="dark"] .breadcrumb-separator { color: var(--text-3) !important; } html[data-theme="dark"] .git-command { color: var(--text-2) !important; } /* ---------- 4e. 非设计风格详情：其余「深色下变浅底 + 浅字 = 不可见」的组件 ---------- 4d 已处理 inline #fff 的场景/用法截图与告警条。本段补齐其余同类缺陷： ① 气泡/提示类用 background:var(--text)：浅色模式 --text 近黑 → 深底；深色模式 --text 变浅灰 → 浅底，白字不可见。.tooltip-tb / .disabled-anat-reason / .trunc-v-bubble / .trunc-sc-bubble / .sc-body-inner 统一改为暗色抬升表面 + 白字。 ② 橙/琥珀芯片写死浅奶油底 #fff7e8/#fff7ed：.mk-tag.orange / .url-seg.path / .cdn-cache / .result-icon.is-warn / .foundation-step.orange / .foundation-box.orange → 暗琥珀底 + 浅橙字，保留强调语义。 ③ 模拟 UI 窗口/栏/滑块写死纯白 #fff：.mk-win / .mk-scene / .url-bar / .seg-thumb 及其白透底 li 项 → 暗色表面。 ④ 玻璃拟态组件写死白透底 .glass-sc-view（非设计风格演示）→ 暗玻璃。 作用域限定 main；设计风格预览（.style-detail-*）不受影响（其由 4c 钉为浅色， 且这些组件类基本不出现在风格预览中）。 */ html[data-theme="dark"] main .tooltip-tb, html[data-theme="dark"] main .disabled-anat-reason, html[data-theme="dark"] main .trunc-v-bubble, html[data-theme="dark"] main .trunc-sc-bubble, html[data-theme="dark"] main .sc-body-inner { background: var(--surface-raised) !important; color: #fff !important; } html[data-theme="dark"] main .tooltip-tb:after, html[data-theme="dark"] main .trunc-v-bubble:after, html[data-theme="dark"] main .trunc-sc-bubble:after, html[data-theme="dark"] main .disabled-anat-reason:after { border-top-color: var(--surface-raised) !important; border-bottom-color: var(--surface-raised) !important; } html[data-theme="dark"] main .url-seg.path, html[data-theme="dark"] main .cdn-cache, html[data-theme="dark"] main .result-icon.is-warn, html[data-theme="dark"] main .foundation-step.orange, html[data-theme="dark"] main .foundation-box.orange { background: color-mix(in srgb, #ffc62d 16%, #1d1d1d) !important; color: #ffb066 !important; border-color: color-mix(in srgb, #ffc62d 40%, #1d1d1d) !important; } html[data-theme="dark"] main .url-bar, html[data-theme="dark"] main .seg-thumb { background: var(--surface-raised) !important; } html[data-theme="dark"] main .glass-sc-view { background: rgba(0, 0, 0, .45) !important; border-color: rgba(255, 255, 255, .14) !important; } /* ---------- 4f. 行内 style 写死浅色的演示元素（无稳定 class）---------- 剩余不可见元素几乎都是「无 class、用 inline style 写死浅色背景」的演示片段： · tooltip/复制提示/画外音用 background:var(--text)（浅色模式 --text 近黑→深底； 深色模式 --text 变浅灰→浅底，白字不可见）； · 毛玻璃/玻璃拟态 chips 用 rgba(255,255,255,x)（浅玻璃）； · 选中态文本高亮 #8fb4ff、示例 chip #ffe9a8/#f2f4f8 等写死浅色。 行内样式需用属性选择器 + !important 覆盖：玻璃类→暗玻璃；var(--text) 气泡→暗表面+ 白字；其余→暗色抬升表面。仅限 main；设计风格预览用 4c 钉为浅色、且不含此类行内浅底， 故不受影响。 */ html[data-theme="dark"] main [style*="background:var(--text)"], html[data-theme="dark"] main [style*="background: var(--text)"] { background: var(--surface-raised) !important; color: #fff !important; } html[data-theme="dark"] main [style*="rgba(255, 255, 255"], html[data-theme="dark"] main [style*="rgba(255,255,255"] { background: rgba(0, 0, 0, .5) !important; } html[data-theme="dark"] main [style*="background:#ffe9a8"], html[data-theme="dark"] main [style*="background:#f2f4f8"], html[data-theme="dark"] main [style*="background:#8fb4ff"] { background: var(--surface-raised) !important; } /* 分段控件选中项（.seg-sc 内 class 仅为 .on 的选中段） */ html[data-theme="dark"] main .seg-sc span.on { background: var(--surface-raised) !important; color: var(--text) !important; } /* ---------- 4g. 模拟 UI 示意（.mk 系列）：深色模式下保持作者浅色配色 ---------- 根因（续 4c）：详情页里大量「模拟 UI 示意」用 .mk 系列组件（.mk-win 模拟窗口、 .mk-input / .mk-btn / .mk-tag 等模拟控件）。这些组件在浅色模式下用 theme 变量渲染 （--surface-raised≈#f5f5f7、--bg-soft、--border-light、--text-2 等），并写死少量浅色 hex（如 #fff 背景 + var(--text) 文字）。本文件自动生成的 dark 覆盖段 （.mk-*:not(.on){background:var(--surface-raised)} 等）会在 html[data-theme="dark"] 下把它们映射成暗色表面，使「示意」失真、也违背「模拟 UI 示意组件不要改变颜色」的需求。 做法：在 .mk 作用域内把这些暗色变量用 !important 钉回浅色取值（与 4c 设计风格预览同 机制，但只钉「背景/边框/文字/强调」类变量）：于是所有 .mk-*:not(.on) 的暗色覆盖规则 在 .mk 内仍「生效」，但解析出的都是浅色——模拟 UI 因此与浅色模式完全一致。 关键例外：刻意【不】钉 --bg。因为本文件对提示气泡有 `html[data-theme="dark"] .mk-tip-bubble{background:var(--bg)!important;color:#fff}` 的专用规则，意图让气泡在深浅两种模式下都是「暗底 + 白字」（其浅色模式 bg 也是暗色 var(--text)）。若把 --bg 也钉成浅色，气泡会变白底白字而不可见。故 --bg 保留为站点 深色值，气泡维持暗底白字；其余 mk 组件本就不依赖 --bg（用 --surface-raised / --bg-soft / 写死 #fff），不受影响。作用域外（真实组件详情、其余页面）仍正常深色。 */ html[data-theme="dark"] .mk { --surface-raised: #f5f5f7 !important; --bg-soft: #f4f4f5 !important; --bg-hover: #ececec !important; --border: #e6e6ea !important; --border-light: #f0f0f2 !important; --text: #18181b !important; --text-2: #3f3f46 !important; --text-3: #71717a !important; --muted: #71717a !important; --brand: #FE6A04 !important; --accent: #FE6A04 !important; --brand-light: rgba(254, 106, 4, .14) !important; --accent-light: rgba(254, 106, 4, .14) !important; --green-light: rgba(0, 180, 42, .12) !important; --red-light: rgba(245, 63, 63, .12) !important; } /* 步骤条等「父级 .on、子元素无 .on」的模拟控件：自动段 .mk-step i:not(.on) 会把 激活步的圆点（本应 background:var(--brand) 橙底白字）强制成表面色，导致白字落在 浅色圆点上不可见。这里用更高优先级还原其「作者浅色模式配色」（橙底白字）。 */ html[data-theme="dark"] .mk .mk-step.on i { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; } /* ---------- 4j. 社交证明「模拟产品官网」预览（.sp-site / .sp-demo）：深色模式保持浅色 ---------- 与 4g 同源：.sp-site 是一段「模拟产品官网」示意（客户 logo 墙、用户证言、数据指标）， 整体按浅色官网设计（大量写死深色文字 + 浅色卡片）。自动 dark 段把容器映射成暗表面后， 内部深色文字变为「深底 + 深字」不可见。做法同 4g：在 .sp-site/.sp-demo 作用域内把暗色 变量钉回浅色；并显式把各子容器强制为浅色表面，覆盖「某子容器用 var(--text) 作背景」 这类自动段例外（.sp-testimonial 即如此，会被映射成深色卡片导致深字不可见）。 */ html[data-theme="dark"] .sp-site, html[data-theme="dark"] .sp-demo { --surface-raised: #f5f5f7 !important; --bg-soft: #f4f4f5 !important; --bg-hover: #ececec !important; --border: #e6e6ea !important; --border-light: #f0f0f2 !important; --text: #18181b !important; --text-2: #3f3f46 !important; --text-3: #71717a !important; --muted: #71717a !important; --brand: #FE6A04 !important; --accent: #FE6A04 !important; --brand-light: rgba(254, 106, 4, .14) !important; --accent-light: rgba(254, 106, 4, .14) !important; --green-light: rgba(0, 180, 42, .12) !important; --red-light: rgba(245, 63, 63, .12) !important; background: #f5f5f7 !important; } /* 显式强制整段「模拟官网」各子容器为浅色表面。用 main 作用域 + :is() 提升特异性， 压过自动段 html[data-theme="dark"] main .X:not(.on){background:var(--*)!important} （后者会把某些子容器映射成暗面，而所用变量未在上方钉回浅色）。 */ html[data-theme="dark"] main .sp-site, html[data-theme="dark"] main .sp-demo, html[data-theme="dark"] main .sp-site :is(.sp-site-heading, .sp-brand-strip, .sp-proof-layout, .sp-evidence-panel, .sp-editorial, .sp-person, .sp-metric-grid, .sp-publication-mark, .sp-verified, .sp-editorial-quote) { background: #f5f5f7 !important; } html[data-theme="dark"] main .sp-site .sp-testimonial { background: #ffffff !important; } /* 修正：「已验证客户」(.sp-verified) 用 color(srgb 1 1 1 / .7) 浅色文字，落在浅色表面 下不可见；深色模式改为 --text-3（深灰）保证可读。 */ html[data-theme="dark"] .sp-verified { color: var(--text-3) !important; } /* ---------- 4k. 模拟「代码 / 终端 / diff / 解剖示意」：深色模式保持浅色（同 4g .mk / 4j .sp） ---------- 这些「模拟代码编辑器 / 终端 / git diff / 解剖示意」作者按浅色主题设计（白底 + 紫/绿/红 语法高亮、白底 diff 行、暗色终端配绿/白字）。自动段 html[data-theme="dark"] main .X:not(.on){background:var(--surface-raised)!important} 会把 .anat-stage / .html-anat / .diff-anat / .scene-shot 等表面压成暗表面；本块在作用域内把 --surface-raised/--bg-soft/ --bg/--text 等变量钉回浅色取值，使自动段规则解析为浅色（与 4g 同机制），模拟代码/终端/ 解剖示意观感与浅色模式一致、内部语法 token 可读。注意刻意不钉 --text 为浅色（应保持浅色 模式深色文字），且 .terminal-win 是作者刻意设计的暗色终端，仅恢复其提示符/命令文字为 绿/白（真实终端配色），不强行改亮。 */ /* 仅钉「模拟代码 / 终端 / diff」这类具体容器（.html-anat / .diff-anat / .merge-anat / .git-diff-card / .diff-demo），不要把通用解剖包装 .anat-stage/.anat-wrap 也钉亮—— 后者是组件画廊页的真实组件展示框，本就深色 + 浅字，钉亮会使其内部浅字不可见。 */ /* 追加钉亮范围（复核回归后确认的真缺陷容器）： 白底解剖示意容器（VibeHub 原生 background:#fff）：.push-anat / .clone-anat / .commit-anat / .env-var-anat / .pr-anat / .md-anat / .npm-anat / .gitignore-anat， 内部含 CSS 硬编码紫色 token（如 .push-origin / .clone-host），压暗后不可读，保持浅色。 注意：git 故事里的模拟 GitHub 卡片（.git-device-card / .git-repo-card / .git-review-change 等）不在此列——它们改为「真正暗色化」，见下方 4L 块。 */ /* 仅保留非 git 的浅色图示框（html / env-var / md / npm / diff-demo 等通用代码/解剖示意， 留浅色与浅色模式一致）。git 相关的 .anat 图示框（push/clone/commit/pr/gitignore/diff/ merge）与 .git-diff-card 改为「真正暗色化」，见下方 4L-ext 块（必须从本浅色钉回列表移除， 否则自动暗色段 html[data-theme=dark] main .X:not(.on){background:var(--surface-raised)!important} 会把钉回的 --surface-raised:#fff 解析为白底而胜出）。 */ html[data-theme="dark"] main .html-anat, html[data-theme="dark"] main .diff-demo, html[data-theme="dark"] main .env-var-anat, html[data-theme="dark"] main .md-anat, html[data-theme="dark"] main .npm-anat { --surface-raised: #ffffff !important; --bg: #ffffff !important; --bg-soft: #f5f5f7 !important; --bg-hover: #ececec !important; --border: #e6e6ea !important; --border-light: #f0f0f2 !important; --text: #18181b !important; --text-2: #3f3f46 !important; --text-3: #71717a !important; --muted: #71717a !important; --brand: #FE6A04 !important; --accent: #FE6A04 !important; } /* 终端提示符/命令文字：恢复绿/白（真实终端配色，跨浅/深主题均可读） */ .mk .terminal-p { color: #4ade80 !important; } .mk .terminal-c { color: #ffffff !important; } /* diff 行背景在深色下改亮，使 +/-/状态文字（绿/红语义色）在浅底上清晰可读 */ html[data-theme="dark"] main .diff-line, html[data-theme="dark"] main .diff-f, html[data-theme="dark"] main .diff-hunk { background: #f5f5f7 !important; } /* 语法高亮 token：落在深色表面（.sc-body/.anat-stage 等通用解剖框）时改用更亮的紫， 保证可读；落在已钉亮的代码框（.html-anat/.diff-anat）内则恢复作者原紫，避免浅底浅字。 */ html[data-theme="dark"] .html-tagname { color: #c4a6ff !important; } html[data-theme="dark"] .html-anat .html-tagname, html[data-theme="dark"] .diff-anat .html-tagname { color: #7c3aed !important; } /* scene 代码样例框（.sc-body-inner 已由 4e 改为暗表面+白字）内部的「内联硬编码浅色主题 token」——作者按浅色底设计的紫（#7c3aed）、GitHub 绿（#1a7f37）、GitHub 红（#d1242f）， 在暗表面上对比度不足（2.6~3.0）。深色模式统一提亮为对应暗色主题语义色。 注意选择器用 [style*="color:#xxx"] 精确匹配文字色，避免误伤 background:#7c3aed 的徽章； 排除自带浅色内联背景的元素（如 diff 行 background:#dafbe1/#ffebe9 + 绿/红字， 本就落浅底可读，提亮反而变浅底浅字）。.variant-demo（暗色演示框）同样含内联紫 token。 */ html[data-theme="dark"] main .sc-body-inner [style*="color:#7c3aed"]:not([style*="background"]), html[data-theme="dark"] main .variant-demo [style*="color:#7c3aed"]:not([style*="background"]) { color: #c4a6ff !important; } html[data-theme="dark"] main .sc-body-inner [style*="color:#1a7f37"]:not([style*="background"]) { color: #3fb950 !important; } html[data-theme="dark"] main .sc-body-inner [style*="color:#d1242f"]:not([style*="background"]) { color: #f85149 !important; } /* ---------- 4L. 模拟 GitHub 卡片：深色模式真正「暗色化」（暗底 + 浅字）---------- 用户要求：git 模拟 UI 卡片在深色模式下也要暗色，与整体深色页面协调（不再钉白底）。 做法：① 在 .git-story 作用域把 --git-* 变量重设为 GitHub 暗色主题取值，卡片内所有 走 var(--git-*) 的主色（标题 --git-ink、绿 --git-green、蓝软底 --git-blue-soft、 紫 --git-purple）自动跟随；② 再覆盖少量「硬编码浅色」：卡片 background:#fff / 边框 #dfe3e8、图标深色描边 #57606a、部分套浅底变体（is-cloud/is-success/is-change/is-new/ git-merge-result）的背景与次要文字；③ 仍是模拟 GitHub 风格，只是配色切到暗色主题。 叙述文字（.git-story 外的 .dh-demo 文字）不受影响，继续用 --text-2 落暗 hero 上。 */ html[data-theme="dark"] main .git-story { --git-ink: #e6edf3; --git-green: #3fb950; --git-blue: #58a6ff; --git-purple: #a371f7; --git-blue-soft: #151d2e; --git-green-soft: #11271b; --text-2: #c9d1d9; --muted: #8b949e; } /* git 故事卡片区整体外壳：压过 VibeHub 的白色渐变底 */ html[data-theme="dark"] main .git-story-main { background: #1b1b1e !important; border-color: #30363d !important; } html[data-theme="dark"] main .git-story-main>.git-simple-flow>.git-file-card, html[data-theme="dark"] main .git-story-main>.git-simple-flow>.git-repo-card, html[data-theme="dark"] main .git-story-main>.git-simple-flow>.git-version-card { background-color: #161b22 !important; } /* 卡片本体（中性底）：暗底 + 暗边框（压过 VibeHub 的 background:#fff 与 border:#dfe3e8， 也压过自动暗色段的中性灰底，保证统一暗色观感 + 特异性足以胜出自动段） */ html[data-theme="dark"] main .git-story .git-device-card, html[data-theme="dark"] main .git-story .git-repo-card, html[data-theme="dark"] main .git-story .git-folder-card, html[data-theme="dark"] main .git-story .git-file-card, html[data-theme="dark"] main .git-story .git-file-list, html[data-theme="dark"] main .git-story .git-review-change { background-color: #161b22 !important; border-color: #30363d !important; } /* 套浅底变体 → 各自的暗色语义软底 + 暗色语义边框 */ html[data-theme="dark"] main .git-story .git-repo-card.is-cloud, html[data-theme="dark"] main .git-story .git-device-screen { background-color: #21262d !important; border-color: #444c56 !important; } html[data-theme="dark"] main .git-story .git-repo-card.is-success, html[data-theme="dark"] main .git-story .git-folder-card.is-green, html[data-theme="dark"] main .git-story .git-review-checks { background-color: #11271b !important; border-color: #238636 !important; } html[data-theme="dark"] main .git-story .git-version-card { background-color: #151d2e !important; border-color: #1f6feb !important; } html[data-theme="dark"] main .git-story .git-version-card.is-new { border-color: #388bfd !important; box-shadow: 0 0 0 3px rgba(56,139,253,.2) !important; } html[data-theme="dark"] main .git-story .git-file-card.is-change { background-color: #211a0e !important; border-color: #9e6a03 !important; } html[data-theme="dark"] main .git-story .git-file-card.is-change small { color: #d29922 !important; } html[data-theme="dark"] main .git-story .git-merge-result { background-color: #1c162b !important; border-color: #6e40c9 !important; } /* 次要文字 / 图标描边：提亮为暗底可读的浅灰 */ html[data-theme="dark"] main .git-device-card small, html[data-theme="dark"] main .git-repo-card small, html[data-theme="dark"] main .git-folder-card small, html[data-theme="dark"] main .git-file-card small, html[data-theme="dark"] main .git-version-card small, html[data-theme="dark"] main .git-merge-result small, html[data-theme="dark"] main .git-review-change small, html[data-theme="dark"] main .git-review-checks span { color: #8b949e !important; } html[data-theme="dark"] main .git-story .git-repo-icon, html[data-theme="dark"] main .git-story .git-folder-icon, html[data-theme="dark"] main .git-story .git-file-mark { background-color: #21262d !important; border-color: #444c56 !important; } html[data-theme="dark"] main .git-repo-icon i, html[data-theme="dark"] main .git-folder-icon:before { background-color: #444c56 !important; } html[data-theme="dark"] main .git-device-screen:after { background: #6e7681 !important; } html[data-theme="dark"] main .git-story .git-file-list>span { border-color: #30363d !important; color: #8b949e !important; } html[data-theme="dark"] main .git-file-list>span i { border-color: #8b949e !important; } html[data-theme="dark"] main .git-file-list>span b { color: var(--git-green) !important; } html[data-theme="dark"] main .git-story .git-file-list>span.is-secret { color: #d29922 !important; background-color: #2d2515 !important; } html[data-theme="dark"] main .git-review-checks b { color: #3fb950 !important; } /* usage-box 内的命令说明卡片（.mk / .mk-win / .mk.bad）：原来沿用浅色主题底 （--bg-soft:#f4f4f5），在深色 usage-box 里仍是浅灰块。改为暗底并提亮内部文字变量。 注意根 html[data-theme="dark"] 上的 --text-2 带 !important，局部重定义必须也加 !important 才能覆盖。 */ html[data-theme="dark"] main .usage-box .mk, html[data-theme="dark"] main .usage-box .mk-win, html[data-theme="dark"] main .usage-box .mk.bad { --surface-raised: #0d1117 !important; --bg-soft: #161b22 !important; --bg-hover: #21262d !important; --border: #30363d !important; --border-light: #30363d !important; --text: #e6edf3 !important; --text-2: #c9d1d9 !important; --text-3: #8b949e !important; --muted: #8b949e !important; background-color: #161b22 !important; border-color: #30363d !important; } html[data-theme="dark"] main .usage-box .mk .terminal-win { background-color: #1f2430 !important; } /* ---------- 4L-ext. git 图示框 / 命令 mock 子面板：深色模式真正「暗色化」---------- 用户要求 git 模拟 UI 全部暗色。这些 .anat 图示框（push/clone/commit/pr/gitignore/ diff/merge）与命令 mock 子面板（merge-cf / clone-url / mk-input / mk-drop / mk-select / pr-merge）已从 4k 浅色钉回列表移除，此处改为暗底 + 暗边框；其内部「硬编码浅色主题 token」（紫 #7c3aed、绿 #1a7f37、灰 #57606a 等）在暗底上对比度不足，统一提亮为暗色 主题语义色（GitHub 暗紫 #c4a6ff / 暗绿 #3fb950 / 浅灰 #8b949e）。 注意 .diff-anat / .merge-anat 内 .html-tagname 在 4k 中被设为暗紫 #7c3aed（当时框体 白底可读），现框体改暗底须改回亮紫 #c4a6ff，否则不可见。 */ html[data-theme="dark"] main .push-anat, html[data-theme="dark"] main .clone-anat, html[data-theme="dark"] main .commit-anat, html[data-theme="dark"] main .pr-anat, html[data-theme="dark"] main .gitignore-anat, html[data-theme="dark"] main .diff-anat, html[data-theme="dark"] main .merge-anat, html[data-theme="dark"] main .git-diff-card { background-color: #161b22 !important; border-color: #30363d !important; } /* git 图示框内硬编码语法 token → 暗色主题语义色 */ html[data-theme="dark"] main .push-anat .push-origin, html[data-theme="dark"] main .clone-anat .clone-host, html[data-theme="dark"] main .commit-anat .html-tagname, html[data-theme="dark"] main .diff-anat .html-tagname, html[data-theme="dark"] main .merge-anat .html-tagname, html[data-theme="dark"] main .pr-anat .html-tagname, html[data-theme="dark"] main .gitignore-anat .html-tagname { color: #c4a6ff !important; } html[data-theme="dark"] main .clone-anat .clone-user, html[data-theme="dark"] main .push-anat .push-cmd { color: #d29922 !important; } html[data-theme="dark"] main .clone-anat .clone-proto, html[data-theme="dark"] main .clone-anat .clone-repo { color: #8b949e !important; } /* 命令 mock 子面板（merge-cf / mk-input / mk-drop / mk-select / pr-merge / clone-url）：暗底。 这些面板内部嵌套 .mk / .mk-win 命令卡，被 4g 全局钉成浅色（--surface-raised:#f5f5f7 等）， 须在此把变量重新钉回暗色，其内 .mk-input/.mk-drop/.mk-select/.mk-row 等子面板随之变暗。 */ html[data-theme="dark"] main .merge-cf, html[data-theme="dark"] main .mk-input, html[data-theme="dark"] main .mk-drop, html[data-theme="dark"] main .mk-select, html[data-theme="dark"] main .pr-merge, html[data-theme="dark"] main .clone-url, html[data-theme="dark"] main .merge-cf .mk, html[data-theme="dark"] main .merge-cf .mk-win, html[data-theme="dark"] main .clone-url .mk, html[data-theme="dark"] main .clone-url .mk-win, html[data-theme="dark"] main .pr-merge .mk, html[data-theme="dark"] main .pr-merge .mk-win { --surface-raised: #0d1117 !important; --bg-soft: #161b22 !important; --bg-hover: #21262d !important; --border: #30363d !important; --border-light: #30363d !important; --text: #e6edf3 !important; --text-2: #c9d1d9 !important; --text-3: #8b949e !important; --muted: #8b949e !important; background-color: #0d1117 !important; border-color: #30363d !important; color: #c9d1d9 !important; } /* .diff-anat 已改暗底，覆盖 4k 对 .diff-line 的强制浅底，改回暗色 diff 行。 行内 +/- 语义字由 .ap 类控制，保持亮绿/亮红以保证可读。 */ html[data-theme="dark"] main .diff-anat .diff-line, html[data-theme="dark"] main .diff-anat .diff-f, html[data-theme="dark"] main .diff-anat .diff-hunk { background: #0d1117 !important; } /* git 合并冲突示意芯片：浅色语义底 → 暗色主题语义底 + 亮语义字 */ html[data-theme="dark"] main .merge-cf .merge-cf-mark { background: #2d2515 !important; color: #d29922 !important; } html[data-theme="dark"] main .merge-cf .merge-cf-theirs { background: #161b22 !important; color: #79c0ff !important; } html[data-theme="dark"] main .merge-cf .merge-cf-yours { background: #11271b !important; color: #3fb950 !important; } /* git-diff-card 内 红/绿 diff 芯片（原浅红 #ffebe9 / 浅绿 #dafbe1）：暗色主题语义底。 .is-before/.is-after 与 .git-diff-card 同元素，亮块是其内 子元素，故同时命中两者。 */ html[data-theme="dark"] main .git-diff-card.is-before, html[data-theme="dark"] main .git-diff-card.is-before b { background: #2d1417 !important; color: #f85149 !important; } html[data-theme="dark"] main .git-diff-card.is-after, html[data-theme="dark"] main .git-diff-card.is-after b { background: #11271b !important; color: #3fb950 !important; } /* main 范围内所有内联语义芯片 / 信息框（无论位于 .sc-body-inner / .mk / .git-diff-card 等）： 作者按浅色底设计的语义色统一改为暗色主题语义底 + 亮字。 */ html[data-theme="dark"] main [style*="#ffebe9"] { background: #2d1417 !important; color: #f85149 !important; } html[data-theme="dark"] main [style*="#dafbe1"] { background: #11271b !important; color: #3fb950 !important; } html[data-theme="dark"] main [style*="#f0fdf4"] { background: #11271b !important; color: #3fb950 !important; } html[data-theme="dark"] main [style*="#ffe8d9"] { background: #2d2515 !important; color: #d29922 !important; } html[data-theme="dark"] main [style*="#fff7e8"] { background: #2d2515 !important; color: #d29922 !important; } html[data-theme="dark"] main [style*="#eaf2ff"] { background: #161b22 !important; color: #79c0ff !important; } html[data-theme="dark"] main [style*="#eff6ff"] { background: #161b22 !important; color: #79c0ff !important; } html[data-theme="dark"] main [style*="#ddf4ff"] { background: #161b22 !important; color: #79c0ff !important; } html[data-theme="dark"] .swiss-exhibit:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .swx i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .tabs-v-card i.on:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .toast-pill:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .tp-panel:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .tr-box:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .trans-v-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .trunc-anat-result:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ts-check:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ts-check.half:after:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ts-panel:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ul-drop:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ul-file:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .ul-thumb.add:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .url-bar:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .uv-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .vh-map-core-code i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .vh-map-term:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .vh-map-term.light:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .vh-map-toggle-track:after:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .vh-map-window-bar i:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .vh-welcome-card:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .vh-welcome-close:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .vh-welcome-close:hover:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .wt-dir:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .y2k-browser:not(.on), .y2k-scene-nav:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .y2k-guest:not(.on), .y2k-person:not(.on), .y2k-player:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .y2k-scene-book:not(.on), .y2k-scene-content>.y2k-scene-player:not(.on), .y2k-scene-content>aside:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .y2k-scene-book:not(.on), .y2k-scene-content>aside:not(.on), .y2k-scene-content>main:not(.on) { background-color: var(--surface-raised) !important; } html[data-theme="dark"] .anat-part.is-anat-active .c-link:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .apple-crop:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .apple-crop.crop-a:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .apple-crop.crop-b:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .apple-inspector:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .apple-thumb aside:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .apple-thumb>section>aside:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .badge-d .b-dot:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .badge-d .b-num:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .badge-d .b-status:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .bento-coach button:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .btn-spin:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .c-box:after:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .card:hover:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .catalog-color-picker i:not(.on), .catalog-swatches i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .demo-check input:checked+i:after:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .demo-check input:disabled+i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .demo-check.half input:checked+i:after:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .demo-check>i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .demo-radio input:disabled+i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .demo-radio>i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .git-branch-lane i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .git-history-preview>div i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .git-merge-path i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .glass-demo-card:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .glass-player>header button:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .glass-queue:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .glass-sc-frost:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .hero-d-avas i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .mk-box:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .mk-box.on:after:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .mk-radio:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .mk-step i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .ms-scene.organic aside>div:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .ms-scene.saas aside>div:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .organic-photo>i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .popconfirm-arrow:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .popover-arrow:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .popover-arrow-up:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .r-dot:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .saas-grid article:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .saas-product>header:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .sp-d-avas i:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .tabs-v-card i.on:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .tr-box:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .tr-box.on:after:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .tre-sc-box.on:after:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .ts-check:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .ts-check.on:after:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .vh-map-core:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .vh-map-mini-ui:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .vh-map-term:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .vh-map-term.light:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .y2k-browser:not(.on), .y2k-scene-nav:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .y2k-guest:not(.on), .y2k-person:not(.on), .y2k-player:not(.on) { border-color: var(--border) !important; } html[data-theme="dark"] .popconfirm-arrow { border-color: var(--surface-raised) !important; } html[data-theme="dark"] .popover-arrow { border-color: var(--surface-raised) !important; } html[data-theme="dark"] .popover-arrow-up { border-color: var(--surface-raised) !important; } html[data-theme="dark"] .crs-arr { border-color: var(--surface-raised) !important; } /* 提示气泡 / 进度条：暗色下 --text 解析为浅灰，需修正为暗色背景 */ html[data-theme="dark"] .bar-fill { background: var(--brand) !important; } html[data-theme="dark"] .tip-bubble, html[data-theme="dark"] .disabled-why-tip, html[data-theme="dark"] .mk-tip-bubble { background: var(--bg) !important; color: #fff !important; } html[data-theme="dark"] .tip-bubble:after, html[data-theme="dark"] .disabled-why-tip:after, html[data-theme="dark"] .mk-tip-bubble:after { border-top-color: var(--bg) !important; border-bottom-color: var(--bg) !important; } /* ========================================================= 统一页脚（Foundit） ========================================================= */ .foundit-footer { position: relative; margin-top: 72px; border-top: 1px solid var(--border); overflow: hidden; background: var(--bg); } .foundit-footer__inner { width: min(100% - 56px, 1180px); margin-inline: auto; padding: 56px 0 48px; } .foundit-footer__top { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 48px; align-items: start; } .foundit-footer__logo { display: inline-block; width: 96px; } .foundit-footer__logo .brand-logo__image { width: 96px; height: auto; } .foundit-footer__tagline { max-width: 240px; margin-top: 16px; color: var(--text-2); font-size: 13px; line-height: 1.6; } .foundit-footer__copyright { margin-top: 16px; color: var(--text-3); font-size: 12px; line-height: 1.6; } .foundit-footer__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .foundit-footer__group h3 { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text); } .foundit-footer__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .foundit-footer__group a { color: var(--text-2); font-size: 13px; line-height: 1.5; text-decoration: none; transition: color 0.18s ease; } .foundit-footer__group a:hover { color: var(--text); } /* ========================================================= 响应式 ========================================================= */ @media (max-width: 900px) { .foundit-footer__top { grid-template-columns: 1fr; gap: 36px; } .foundit-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } } /* 移动端复刻主页头部行为：logo + 搜索图标 + 主题切换； 分类导航交由 .mobile-macro-tabs 承接（避免与头部重叠） */ @media (max-width: 620px) { :root { --header-height: 64px; } .site-header { height: 102px; } .site-header::before { height: 102px; } .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 64px; min-height: var(--header-height); gap: 8px; } .brand-logo { width: 58px; height: 16px; } .main-nav.nav-macro { display: none; } .header-actions { gap: 0; margin-right: -2px; } .header-search { width: 44px; min-height: 44px; justify-content: center; border-color: transparent; background: transparent; padding: 0; } .header-search input { display: none; } .header-search button { width: 44px; height: 44px; } } @media (max-width: 520px) { .foundit-footer__links { grid-template-columns: 1fr; } } /* ---------- 5. 取消内容区/详情页容器的底部 margin / padding ---------- */ /* 根因：源 VibeHub CSS 中 .catalog-layout 用 `margin:0 auto`、.detail 用 `margin:0 auto`，二者 margin-bottom 本就为 0；真正造成与页脚之间大段空白的 是 padding-bottom（catalog-layout 为 96px/移动 64px，detail 为 80px）。 一并清零（!important 压过各断点下的非 !important 写法）。 */ .catalog-layout { margin-bottom: 0 !important; padding-bottom: 0 !important; } .detail { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ---------- 6. special-detail（technology 详情页核心组件）样式补全 ---------- */ /* 根因：这些组件（学习目标 / 概念图解 / 代码编辑器 / 浏览器预览 / 对比演示）的 样式在 howtovibe 静态化时未纳入 VibeHub CSS（VibeHub 源 CSS 中 .special-detail* 及内部组件规则均为 0 条），导致 technology 类详情页该区块完全无样式、无法正常渲染。 此处按 Foundit 设计语言补齐，使其正常渲染（浅/深双主题）。 */ /* 6.1 容器与区块间距 */ .special-detail { display: block; } .special-detail > section { margin-top: 30px; } .special-detail > section:first-child { margin-top: 0; } .special-section { margin-top: 30px; } /* 6.2 学习目标 learning-contract */ .learning-contract { display: flex; align-items: stretch; gap: 16px; background: var(--brand-light); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 14px; padding: 18px 20px; } .learning-contract > div { flex: 1; min-width: 0; } .learning-contract > span[aria-hidden] { display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 20px; font-weight: 700; flex: none; } .learning-contract small { display: block; color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: .03em; margin-bottom: 4px; } .learning-contract p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.6; } /* 6.3 概念演示舞台 concept-stage / interactive-demo */ .concept-stage, .interactive-demo { position: relative; margin-top: 16px; background: var(--bg-soft, #f4f4f5); border: 1px solid var(--border); border-radius: 16px; padding: 18px; } .scene-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .scene-controls button { font: inherit; font-size: 13px; cursor: pointer; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text-2); } .scene-controls button.on { background: var(--brand); border-color: var(--brand); color: #fff; } /* 6.4 workbench 布局网格 */ .workbench-grid { display: grid; gap: 14px; } .workbench-grid.two-region { grid-template-columns: 1fr 1fr; } .workbench-grid.three-region { grid-template-columns: 1fr 1.2fr 1fr; } @media (max-width: 760px) { .workbench-grid.two-region, .workbench-grid.three-region { grid-template-columns: 1fr; } } /* 6.5 项目文件树 project-tree */ .project-tree { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .project-tree strong { display: block; margin-bottom: 8px; color: var(--text); } .project-tree span { display: block; padding: 3px 6px; border-radius: 6px; color: var(--text-2); } .project-tree span.active { background: var(--brand-light); color: var(--brand); } /* 6.6 代码编辑器 real-editor */ .real-editor { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .real-editor-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg-soft, #f4f4f5); } .real-editor-head span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .real-editor-head span:nth-child, .real-editor-head span:nth-child(2) { background: #febc2e; } .real-editor-head span:nth-child(3) { background: #28c840; } .real-editor-head b { margin-left: auto; color: var(--text-2); font-weight: 500; font-size: 12px; } .real-code { padding: 10px 0; } .real-code > div { display: flex; align-items: flex-start; gap: 10px; padding: 2px 12px; } .real-code > div.active { background: var(--brand-light); } .real-code > div.error { background: rgba(245, 63, 63, .12); } .real-code i { color: var(--text-3); font-style: normal; min-width: 18px; text-align: right; user-select: none; } .real-code code { color: var(--text); white-space: pre-wrap; word-break: break-word; } /* 6.7 浏览器预览 real-browser */ .real-browser { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); } .real-browser-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-soft, #f4f4f5); border-bottom: 1px solid var(--border); } .real-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c7c7c7; } .real-browser-bar span { margin-left: 6px; font-size: 12px; color: var(--text-2); font-family: ui-monospace, monospace; } .real-browser-page { padding: 16px; } .real-browser-status { padding: 6px 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); } /* 6.8 预览内容区（todo / shop / posts / 项目） */ .todo-preview, .shop-preview, .posts-preview, .project-and-code { display: grid; gap: 8px; } .todo-preview b, .shop-preview b, .posts-preview b, .project-and-code b { font-size: 15px; } .todo-preview span, .shop-preview span, .posts-preview span, .project-and-code span { color: var(--text-2); font-size: 14px; } .todo-preview button, .button-preview { margin-top: 6px; align-self: start; font: inherit; font-size: 13px; cursor: pointer; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--brand); background: var(--brand); color: #fff; } .visual-callout { display: block; margin-top: 10px; color: var(--brand); font-size: 13px; font-weight: 500; } .task-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--text); } /* 6.9 plain-explanation 解释列表 */ .plain-explanation { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; } .plain-explanation > li { display: flex; gap: 14px; align-items: flex-start; } .plain-explanation > li > span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; } .plain-explanation > li > div { min-width: 0; } .plain-explanation strong { display: block; color: var(--text); margin-bottom: 4px; font-size: 15px; } .plain-explanation p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.65; } /* 6.10 boundary-note 边界提示 */ .boundary-note { margin-top: 30px; padding: 14px 16px; border-left: 3px solid var(--brand); background: var(--brand-light); border-radius: 0 10px 10px 0; } .boundary-note small { display: block; font-weight: 600; color: var(--brand); margin-bottom: 4px; font-size: 13px; } .boundary-note p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.65; } /* 6.11 learning-links 学习链接 */ .learning-links { display: grid; gap: 10px; margin-top: 14px; } .learning-links a.c-ref { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); transition: border-color .15s, background .15s; } .learning-links a.c-ref:hover { border-color: var(--brand); background: var(--brand-light); } .learning-links a.c-ref span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-light); color: var(--brand); display: grid; place-items: center; font-size: 12px; font-weight: 700; } .learning-links a.c-ref strong { font-size: 15px; } .learning-links a.c-ref b { margin-left: auto; color: var(--brand); } .learning-links a.c-ref small { color: var(--text-3); font-size: 12px; } /* 6.12 ts-compare 对比演示 */ .compare-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .compare-heading span { font-weight: 600; color: var(--text); } .compare-heading button { font: inherit; font-size: 13px; cursor: pointer; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--brand); background: var(--brand); color: #fff; } .same-task-compare { display: grid; gap: 14px; } .run-result, .type-result { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); } .run-result small, .type-result small { display: block; color: var(--text-3); font-size: 12px; margin-bottom: 2px; } .run-result strong, .type-result strong { color: var(--text); font-size: 14px; } .run-result.bad, .type-result.bad { background: rgba(245, 63, 63, .1); border-color: rgba(245, 63, 63, .4); } .run-result.bad strong, .type-result.bad strong { color: #e5484d; } .stage-conclusion { margin: 14px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.7; } /* 6.13 tailwind 演示 */ .tailwind-code-line { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .tailwind-code-line button { font: inherit; cursor: pointer; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-soft, #f4f4f5); color: var(--text-2); } .tailwind-code-line button.on { background: var(--brand); border-color: var(--brand); color: #fff; } .tailwind-result { margin-top: 14px; display: grid; gap: 14px; } .computed-rules { display: flex; flex-direction: column; gap: 4px; font-family: ui-monospace, monospace; font-size: 13px; } .computed-rules span { color: var(--text-3); } .computed-rules span.on { color: var(--text); } .tailwind-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 18px; } .tailwind-card.has-padding { padding: 24px; } .tailwind-card small { display: block; color: var(--text-3); font-size: 12px; margin-bottom: 4px; } .tailwind-card strong { display: block; font-size: 16px; margin-bottom: 6px; } .tailwind-card p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; } /* 6.14 终端模拟 / 其他修饰 */ .real-terminal { background: #1d1d1f; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: #e6e6e6; } .real-terminal .real-code > div { padding: 2px 12px; } .real-terminal i { color: #6b7280; } .real-terminal code { color: #e6e6e6; } /* 6.15 深色模式适配 */ html[data-theme="dark"] .learning-contract { background: color-mix(in srgb, var(--brand) 14%, transparent); } html[data-theme="dark"] .concept-stage, html[data-theme="dark"] .interactive-demo { background: #1a1a1a; } html[data-theme="dark"] .real-editor-head, html[data-theme="dark"] .real-browser-bar { background: #262626; } html[data-theme="dark"] .real-terminal { background: #0f0f0f; } html[data-theme="dark"] .boundary-note, html[data-theme="dark"] .learning-links a.c-ref span { background: color-mix(in srgb, var(--brand) 16%, transparent); } html[data-theme="dark"] .run-result.bad, html[data-theme="dark"] .type-result.bad { background: rgba(245, 63, 63, .16); } /* ---------- 7. references-section 延伸阅读 · 权威出处 ---------- */ /* 根因：VibeHub 源 CSS 中 .references-section / .reference-list / .reference-link / .reference-title / .reference-source 规则条数均为 0，howtovibe 静态化时该组件族 样式完全缺失，导致「延伸阅读」区块无样式堆叠。此处按 Foundit 设计语言补齐， 风格与 learning-links 外链卡片保持一致。 */ .references-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); } .references-section .section-title { margin-bottom: 14px; } .reference-list { display: grid; gap: 10px; } @media (min-width: 640px) { .reference-list { grid-template-columns: 1fr 1fr; } } .reference-link { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 13px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); transition: border-color .15s, background .15s, transform .15s; } .reference-link:hover { border-color: var(--brand); background: var(--brand-light); transform: translateY(-1px); } .reference-title { font-size: 15px; font-weight: 600; line-height: 1.4; } .reference-source { margin-left: auto; flex: none; color: var(--brand); font-size: 13px; font-weight: 600; white-space: nowrap; } /* 7.1 深色模式适配 */ html[data-theme="dark"] .reference-link:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); } /* ---------- 8. 移除页面级网格背景 ---------- */ /* 根因：VibeHub CSS 为 .catalog-page:before 设置了由 linear-gradient 构成的 32px 网格线背景（叠加径向渐变遮罩），覆盖在 catalog 页面顶部。这里将其整体隐藏。 */ .catalog-page:before { display: none !important; } /* ---------- 9. tech-brand-icon 跟随主题切换 ---------- */ /* 现状：`.tech-brand-icon` 的 没有任何 fill 属性，也没有 CSS 规则 着色，因此两主题下均渲染为默认黑色 rgb(0,0,0)，内联的 --tech-brand-color 未生效。 期望：浅色跟随品牌色（--tech-brand-color），深色模式切换为白色图标。 */ .tech-brand-icon svg { fill: var(--tech-brand-color, currentColor); } html[data-theme="dark"] .tech-brand-icon svg { fill: #ffffff; } /* ---------- 10. 移除 catalog-heading 内的装饰伪元素 ---------- */ /* 现状：`.catalog-heading` 本身（::before/::after）均为 content:none，无伪元素； 但其内部子元素 `.catalog-title-end`（标题末尾「术语」字样）带 ::after 橙色 小圆点（VibeHub 源 CSS：width:7px;height:7px;border-radius:50%;background:var(--brand)）， 这是 catalog-heading 区域内唯一可见的装饰伪元素。此处将其隐藏。 */ .catalog-title-end::after { display: none !important; } /* ---------- 11. 页脚来源声明（foundit-footer__source） ---------- */ /* 在 foundit-footer__copyright 上方新增一行「本页面来源于 oil-oil」，点击跳转外部仓库。 沿用页脚既有排版（muted 文字、12px、与主版权保持自然间距）。 */ .foundit-footer__source { margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--text-3); } .foundit-footer__source a { color: var(--brand); text-decoration: none; transition: opacity .15s ease; } .foundit-footer__source a:hover { opacity: .8; text-decoration: underline; }