/* ===== 开屏标题字体 ===== */ @font-face { font-family: 'Boot Title'; src: url('../fonts/%E6%A0%87%E9%A2%98.woff2?v=817fc6930d') format('woff2'); font-weight: 700; /* 静态字体 */ font-style: normal; font-display: swap; /* 字体无法加载先用兜底字体渲染，避免留白 */ } /* * 日夜两套色值各带一个类名别名（.theme-light / .theme-dark）： * 全站换肤仍然只认 上的 data-theme，但主题样式页的预览卡要在同一屏里 * 同时呈现两套，就得能在局部套整套变量。类名与 :root 写在同一条规则上， * 值只有一份，不存在两处要同步的问题。 * * **凡是「一个变量引用另一个主题变量」的声明，必须留在这一组里**—— * 自定义属性在「声明它的那个元素」上求值，落在别处就会被钉死成日间那一档。 * --glass-blur 引用 --glass-bright 就是这么一对，两个都在下面。 * 反例见 setting-theme.css 的 --solid-fill：它声明在 :root 上， * 所以预览里的纯色底只能直接写 var(--c-surface-2)。 * * 圆角 / 字号 / 动效 / 安全区那几段与日夜无关，留在下面那个纯 :root 块里。 */ :root, .theme-light { /* ===== 颜色 ===== */ --c-bg: #ffffff; /* 纯白，用于卡片/页面底 */ --c-surface-s: #fafafa; /* 柔和自然白色 */ --c-surface-l: #f7f7f7; /* 亮白，用于卡片/页面底 */ --c-surface: #f6f6f6; /* 主背景灰，桌面壁纸基色 */ --c-surface-mid: #f4f4f4; /* 稍暗灰色 */ --c-surface-2: #ededed; /* 次级灰，渐变暗端 */ --c-surface-3: #e4e4e4; /* 按压态灰 */ --c-desk: #d9d9d9; /* 预留颜色 */ --c-border: rgba(0, 0, 0, 0.05); --c-border-m: rgba(0, 0, 0, 0.09); --c-text: #3a3a3a; /* 主文字：深灰，不要用纯黑 */ --c-title: #6e6e6e; /* 标题文字 */ --c-sub: #939393; /* 次要文字 */ --c-hint: #b8b8b8; /* 最弱提示文字 */ --c-accent: #8a8a8a; /* 强调灰 */ --c-accent-dark: #787878; /* 图标字形颜色 */ /* ===== 阴影 ===== */ --shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); /* ===== 主屏玻璃材质 ===== 日夜两套值都收在这里，home.css / home-widgets.css 只引用不写死。 纯色主题不动这些变量，它换的是 setting-theme.css 里那组 [data-material="solid"] 规则 */ --glass-fill: rgba(255, 255, 255, 0.1); /* 图标底 / 组件底 */ --glass-fill-dock: rgba(255, 255, 255, 0.06); /* Dock 长条，比图标底更淡 */ --glass-fill-hover: rgba(255, 255, 255, 0.18); /* 桌面鼠标悬停 */ --glass-fill-banner: rgba(255, 255, 255, 0.62); /* 提示横幅，压在图标上要更实 */ --glass-fill-btn: rgba(255, 255, 255, 0.55); /* 编辑模式的「完成」 */ --glass-fill-field: rgba(255, 255, 255, 0.45); /* 聊天组件的输入栏 */ /* 亮度单独抽成一个数，主题样式页的滑块只覆盖这两个，blur / saturate 不动。 日间 flat 恒比主玻璃低一档（原来是「不写 brightness」，等值于 1）—— Dock 与「完成」 不跟着提亮是刻意的，滑块拖动时这道差由 THEME_FLAT_GAP 原样带着走 */ --glass-bright: 1.05; --glass-bright-flat: 1; /* Dock 与「完成」不提亮 */ --glass-blur: blur(20px) saturate(180%) brightness(var(--glass-bright)); --glass-blur-flat: blur(20px) saturate(180%) brightness(var(--glass-bright-flat)); --glass-edge-highlight: rgba(255, 255, 255, 0.4); --glass-edge-soft: rgba(255, 255, 255, 0.14); /* 页码点直接压在壁纸上，日夜要换向 */ --dot-off: rgba(0, 0, 0, 0.16); --dot-on: rgba(0, 0, 0, 0.42); } /* 以下与日夜无关，只挂 :root —— 不进 .theme-light，那个类只管配色 */ :root { /* ===== 圆角 ===== */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-pill: 100px; /* ===== 弹窗标题条（.api-modal-head.is-bar）===== 后面的同款弹窗都照这一套走，尺寸只改这里 */ --modal-x-size: 30px; /* 右上角关闭键的圆底直径 */ --modal-x-gap: 12px; /* 标题块与关闭键之间的最小间距 */ --modal-btn-h: 38px; /* 底部按钮，与聊天名片上那两颗同高 */ /* ===== 动效（全站统一，不要各写各的）===== */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur: 0.2s; /* ===== 安全区 ===== --safe-area-inset-* 是安卓外壳（Capacitor 的 SystemBars）量好后写到 上的： 部分安卓机的 WebView 里 env() 恒为 0，顶栏会钻到状态栏 / 挖孔底下，所以优先用它。 网页版和 iOS 没有这几个变量，照旧吃 env() */ --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); --sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px)); /* 竖屏恒为 0，留着以后加横屏/抽屉用 */ --sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px)); /* ===== 桌面网格行数 ===== 6 行是为了让一格高度贴合一个图标（约 87px），组件才排得出正常尺寸。 调大这个值会把行挤扁到装不下图标标签，见 PROMPT/18_桌面拖拽与小组件.md */ --desktop-grid-rows: 6; /* ===== 字体 ===== */ --font-ui: -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; --font-display: 'Boot Title', -apple-system, BlinkMacSystemFont, sans-serif; --font-size-body: 14px; /* ===== 排版层级「统一，禁止各页各写一套」===== */ --title-size: 32px; /* 一级页大标题：左对齐、独占一行 */ --title-weight: 600; --page-title-size: 18px; /* 二级页标题：与返回键同排居中，用 32px 会顶到按钮 */ --page-title-weight: 500; --metric-size: 24px; /* 大数字：额度、计数 */ --metric-weight: 600; --label-size: 10px; /* 分组标题共用 */ --label-weight: 500; --row-name-size: 14px; /* 行名 */ --row-name-weight: 450; --row-value-size: 12px; /* 行右侧状态文字 */ } /* ===== 夜间模式 ===== * 设计与理由见 PROMPT/20_主题样式页.md，属性由 js/setting-theme.js 打在 上。 * 这里只覆盖变量，所以新增页面一律引用变量，不要自己写十六进制。 * 改色时必须守住「--c-bg 比 --c-surface-3 更突出」—— 卡槽滑块与开关滑钮全靠它。 */ :root[data-theme="dark"], .theme-dark { --c-bg: #3d3d3d; --c-surface: #101010; --c-surface-mid: #232323; --c-surface-2: #1c1c1c; --c-surface-3: #2a2a2a; --c-desk: #2a2a2a; --c-border: rgba(255, 255, 255, 0.06); --c-border-m: rgba(255, 255, 255, 0.13); --c-text: #ececec; --c-title: #c0c0c0; --c-sub: #8c8c8c; --c-hint: #6a6a6a; --c-accent: #9a9a9a; --c-accent-dark: #a8a8a8; /* 黑影落在暗底上几乎看不见，只能整体加重 */ --shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.45); --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --glass-fill: rgba(255, 255, 255, 0.08); --glass-fill-dock: rgba(255, 255, 255, 0.05); --glass-fill-hover: rgba(255, 255, 255, 0.14); --glass-fill-banner: rgba(28, 28, 28, 0.7); --glass-fill-btn: rgba(42, 42, 42, 0.62); --glass-fill-field: rgba(255, 255, 255, 0.1); /* 暗底上的玻璃要把背后压暗，不能再 brightness(1.05) 提亮。 夜间 flat 与主玻璃同值：暗底上再拉开一道差，Dock 会直接糊成一片黑 */ --glass-bright: 0.72; --glass-bright-flat: 0.72; --glass-blur: blur(20px) saturate(160%) brightness(var(--glass-bright)); --glass-blur-flat: blur(20px) saturate(160%) brightness(var(--glass-bright-flat)); --glass-edge-highlight: rgba(255, 255, 255, 0.26); --glass-edge-soft: rgba(255, 255, 255, 0.08); --dot-off: rgba(255, 255, 255, 0.2); --dot-on: rgba(255, 255, 255, 0.55); } /* ===== 全局重置 ===== */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; /* 去掉点击时的灰色高亮块 */ -webkit-touch-callout: none; /* 长按不弹系统菜单 */ } html { height: 100%; overflow: hidden; overscroll-behavior: none; /* 禁止橡皮筋回弹 / 下拉刷新 */ /* iOS 会把「一行长得要截断」的那几块字自作主张放大，同一页有的卡大有的卡小， * 省略号也跟着失效。关掉它，字号一律听样式表的 */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; padding: 0; width: 100%; min-height: 100vh; min-height: min(100vh, var(--screen-h, 100vh)); /* 理由见 .device-frame */ display: flex; justify-content: center; overflow: hidden; overscroll-behavior: none; font-family: var(--font-ui); font-size: var(--font-size-body); color: var(--c-text); background: var(--c-surface); user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased; } input, textarea { user-select: text; } /* 输入框字号必须 >= 16px，否则 iOS 一聚焦就放大整页 */ input, textarea, select { font-size: 16px; outline: none; } button { border: none; background: none; cursor: pointer; font-family: inherit; } /* 安卓长按图片会起系统拖拽：拖拽一接管，整页的触摸都收不到了；图的地址又是整段 Data URL， * 打包交给系统时超限直接闪退。全应用没有一处靠原生拖拽，一律关掉（JS 那一半见 scroll-guard.js）。 * 长按存图走的是系统菜单，不是拖拽，导出页那几张不受影响 */ img { display: block; max-width: 100%; -webkit-user-drag: none; } /* 设备外框：始终等于整个视口，桌面上同样铺满窗口 */ .device-frame { position: relative; /* #boot / #app 的定位基准 */ width: 100%; height: 100vh; /* iOS 26 的主屏 App 在部分机型上会把 100vh 报得比屏幕还高（iPhone 15 / 26.1 实测多出 * 顶部安全区那 59pt）：Dock 被挤到屏幕外，系统再把整页往上一推，第一排图标又顶进状态栏。 * --screen-h 由 boot.js 只在主屏 App 里写（= 屏幕高度），外框不许比它高。 * 别处没有这个变量，兜底回 100vh，行为不变 */ height: min(100vh, var(--screen-h, 100vh)); overflow: hidden; } #app { width: 100%; height: 100%; /* 跟随 .device-frame 的实际高度 */ position: relative; overflow: hidden; display: flex; flex-direction: column; } /* 只负责滚动行为，不带 flex: 1 —— 需要撑开的容器自己写 */ .scroll-area { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* reicon 标签。.qp-folder-ico 是自己画的那枚 folder（home.js 的 folderIconHtml()）， * 它是来替 的，摆位必须与 逐条一致 —— 少一条 inline-flex， * 放进