/* 公开站点（`webwebsite/templates/`）独有的区块样式。 * * 为什么单独一个文件：`app.css` 是控制台与落地页共用的（同一批设计 token）， * 站点新增的区块（最新版本横幅、下载卡片、内容页外壳、更新日志条目、404） * 控制台一处都用不到。把它留在这里，"站点改版"就不必碰控制台的样式表。 * * 复用：首页既有的区块（hero / features / plans / formats / steps / os / cta / 顶栏 / 页脚） * 样式全部来自 `app.css`，本文件**一条都不重写** —— 否则同一个组件会有两套定义， * 改一处另一处就变成旧的。这里只写 app.css 里没有的东西。 * * 全部选择器都带 `.landing` 前缀：这个文件将来若被判"并入 app.css"，作用域也已经是收好的。 */ /* ---------------- 顶栏：语言切换里"当前语言"不是链接（不给自己加一条自链接） ---------------- */ .landing .lang-switch span { padding: 4px 12px; border-radius: 999px; font-size: 12px; color: var(--pico-muted-color); white-space: nowrap; } .landing .lang-switch span.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; } /* ---------------- 顶栏的 GitHub 按钮 ---------------- 深底白字、与「进入系统」同高：它是**外链**，视觉上就该和站内 CTA 区分开， 一眼能认出"这是去别的地方"。图标与文字之间的间距靠 gap，不写死宽度。 */ .landing .gh-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; box-sizing: border-box; white-space: nowrap; flex-shrink: 0; background: var(--pico-color); color: #fff; font-size: 13px; font-weight: 500; transition: opacity .15s; } .landing .gh-btn:hover { opacity: .86; } .landing .gh-btn svg { width: 15px; height: 15px; fill: currentColor; display: block; } /* ---------------- D2 徽章（第五种格式的配色） ---------------- 其余四个颜色类住在 app.css 的 landing 段里；D2 是后来加的第五种格式， 样式归站点自有文件，同样只服务公开页的「支持格式」区块。 */ .landing .fmt-pill.f-d2 { background: #fff7ed; color: #c2410c; } /* ---------------- 「开源」区块的仓库 / Issue 入口 ---------------- */ .landing .os-links { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; } .landing .os-links .btn { padding: 11px 24px; font-size: 14.5px; } .landing .os-links .btn svg { width: 16px; height: 16px; fill: currentColor; } /* ---------------- 截图放大：原生 Popover，页面因此不需要一行 JavaScript ---------------- */ .landing .shot-pop { border: none; padding: 0; background: transparent; overflow: visible; max-width: 96vw; max-height: 92vh; } .landing .shot-pop img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(15, 30, 50, .45); } .landing .shot-pop::backdrop { background: rgba(15, 23, 32, .74); } /* ---------------- hero 明暗切换：radio + CSS 兄弟选择器，零 JS ---------------- 两个 radio 藏起来，点击胶囊标签切换；面板按选中态显隐（radio 与面板必须是 兄弟节点，顺序不能动）。胶囊本身住在 .bar 右端，与 bar 文案同一水平线， 所以选中态改用 `:has()` 从 radio 读状态 —— 标签已不是 radio 的兄弟。 */ .landing .hero .view-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .landing .hero .view-pills { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; margin-left: auto; padding: 0; background: none; } /* 窄屏时先让标题让位（省略号），胶囊始终完整可点 */ .landing .terminal .bar span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .landing .hero .view-pills label { /* Pico 给 label 的默认下边距会把可见盒顶到胶囊容器上沿 —— 清零后 flex 的 align-items:center 才是真正的纵向居中 */ display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 3px 12px; border-radius: 999px; font-size: 11.5px; line-height: 1.35; cursor: pointer; color: #93a5b6; border: 1px solid rgba(255, 255, 255, .16); transition: color .15s, background .15s; } .landing .hero .view-pills label:hover { color: #e8ecea; } .landing .hero .terminal:has(#hero-view-light:checked) .view-pills label[for="hero-view-light"], .landing .hero .terminal:has(#hero-view-dark:checked) .view-pills label[for="hero-view-dark"] { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; border-color: transparent; } .landing .hero #hero-view-light:checked ~ .hero-shot.shot-dark { display: none; } .landing .hero #hero-view-dark:checked ~ .hero-shot.shot-light { display: none; } /* ---------------- 「人机共编」区块：AI ⇄ 文本源文件 ⇄ 人 的三节点流 + 对比表 ---------------- 灰底 alt 区块里放白卡片；中间的「文件」节点用品牌浅底强调 —— 它是整条流的主角。 窄屏时三个节点竖排，箭头转 90°。零 JS，纯 CSS。 */ .landing .onefile-flow { display: flex; align-items: stretch; justify-content: center; gap: 14px; } .landing .of-node { flex: 1 1 0; max-width: 330px; padding: 22px 20px; border: 1px solid var(--pico-muted-border-color); border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 10px 26px -14px rgba(30, 20, 60, .18); } .landing .of-node h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 8px; color: var(--pico-color); } .landing .of-node p { font-size: 13.5px; color: var(--pico-muted-color); margin: 0; } .landing .of-node.of-file { border-color: rgba(91, 125, 155, .5); background: var(--brand-tint); box-shadow: 0 12px 30px -14px rgba(91, 125, 155, .4); } .landing .of-arrow { align-self: center; flex: 0 0 auto; font-size: 26px; font-weight: 700; color: var(--brand); } .landing .tbl-wrap { overflow-x: auto; max-width: 720px; margin: 42px auto 0; border: 1px solid var(--pico-muted-border-color); border-radius: 12px; background: #fff; box-shadow: 0 10px 26px -14px rgba(30, 20, 60, .14); } .landing .cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; } .landing .cmp-table th, .landing .cmp-table td { padding: 11px 14px; border-bottom: 1px solid var(--pico-muted-border-color); text-align: center; } .landing .cmp-table thead th { font-size: 13px; font-weight: 600; color: var(--pico-muted-color); } .landing .cmp-table tbody tr:last-child td { border-bottom: none; } .landing .cmp-table tr.is-us td { background: var(--brand-tint); font-weight: 600; color: var(--brand-dark); } .landing .cmp-note { max-width: 720px; margin: 12px auto 0; text-align: center; font-size: 12.5px; color: var(--pico-muted-color); } @media (max-width: 860px) { .landing .onefile-flow { flex-direction: column; align-items: center; } .landing .of-node { max-width: 100%; width: 100%; } .landing .of-arrow { transform: rotate(90deg); } } /* ---------------- 最新版本横幅（首页顶栏正下方） ---------------- */ .landing .latest { background: linear-gradient(180deg, #fff 0%, #f3f7fa 100%); border-bottom: 1px solid var(--pico-muted-border-color); } .landing .latest-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 26px; padding-bottom: 26px; flex-wrap: wrap; } .landing .latest-kicker { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--brand); } .landing .latest-ver { font-size: 27px; font-weight: 800; letter-spacing: -.5px; margin: 6px 0 4px; color: var(--pico-color); font-family: "SF Mono", "JetBrains Mono", Consolas, monospace; } .landing .latest-meta { margin: 0; font-size: 13.5px; color: var(--pico-muted-color); } .landing .latest-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .landing .latest-actions .btn { padding: 11px 24px; font-size: 14.5px; } .landing .latest-actions .sz { font-family: "SF Mono", "JetBrains Mono", Consolas, monospace; font-size: 12px; opacity: .85; } /* ---------------- 下载卡片（首页与下载页共用同一份 DOM） ---------------- */ .landing .dl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; margin-top: 8px; } .landing .dl-card { background: #fff; border: 1px solid var(--pico-muted-border-color); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; box-shadow: 0 1px 3px rgba(30, 20, 60, .06), 0 8px 24px -10px rgba(30, 20, 60, .1); } .landing .dl-card.is-primary { border-color: rgba(91, 125, 155, .5); box-shadow: 0 2px 6px rgba(30, 20, 60, .08), 0 14px 34px -12px rgba(91, 125, 155, .45); } .landing .dl-card header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .landing .dl-card h2, .landing .dl-card h3 { font-size: 17px; font-weight: 700; margin: 0; color: var(--pico-color); } .landing .dl-card .pill { font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 3px 9px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark); } .landing .dl-file { font-family: "SF Mono", "JetBrains Mono", Consolas, monospace; font-size: 12px; color: var(--brand-dark); background: var(--brand-tint); padding: 3px 8px; border-radius: 6px; overflow-wrap: anywhere; margin: 4px 0 2px; } .landing .dl-note { font-size: 13.5px; color: var(--pico-muted-color); margin: 0; } .landing .dl-meta { font-size: 12.5px; color: var(--pico-muted-color); margin: 2px 0 14px; font-variant-numeric: tabular-nums; } .landing .dl-card .btn { padding: 10px 22px; font-size: 14.5px; margin-top: auto; } /* 国内镜像：主按钮下面的次级直链（Gitee 发布附件），不抢主按钮的视觉权重 */ .landing .dl-card .dl-mirror { margin-top: 9px; font-size: 12.5px; color: var(--pico-muted-color); text-decoration: underline; text-underline-offset: 2px; } .landing .dl-card .dl-mirror:hover { color: var(--pico-primary); } .landing .dl-more { text-align: center; margin-top: 26px; font-size: 14.5px; } /* ---------------- 内容页外壳（下载页 / 更新日志 / 404） ---------------- */ .landing .site-main { padding: 30px 0 72px; } /* Pico 会把每个 `