/* ===== 开屏标题字体 ===== */ @font-face { font-family: 'Boot Title'; src: url('../fonts/%E6%A0%87%E9%A2%98.woff2?v=1.3.1') format('woff2'); font-weight: 700; /* 静态字体 */ font-style: normal; font-display: swap; /* 字体无法加载先用兜底字体渲染，避免留白 */ } :root { /* ===== 颜色 ===== */ --c-bg: #ffffff; /* 纯白，用于卡片/页面底 */ --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); /* 聊天组件的输入栏 */ --glass-blur: blur(20px) saturate(180%) brightness(1.05); --glass-blur-flat: blur(20px) saturate(180%); /* Dock 与「完成」不提亮 */ --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); /* ===== 圆角 ===== */ --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; /* ===== 安全区 ===== */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); /* 竖屏恒为 0，留着以后加横屏/抽屉用 */ --sar: 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: 28px; /* 大数字：额度、计数 */ --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"] { --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) 提亮 */ --glass-blur: blur(20px) saturate(160%) brightness(0.72); --glass-blur-flat: blur(20px) saturate(160%) brightness(0.72); --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; /* 禁止橡皮筋回弹 / 下拉刷新 */ } body { margin: 0; padding: 0; width: 100%; min-height: 100vh; 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; } img { display: block; max-width: 100%; } /* 设备外框：始终等于整个视口，桌面上同样铺满窗口 */ .device-frame { position: relative; /* #boot / #app 的定位基准 */ width: 100%; height: 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 标签 */ re-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; } /* ===== 桌面鼠标悬停态：只允许改玻璃背景的透明度 ===== */ @media (hover: hover) { .app-icon:hover .icon-bg, .dock-item:hover .dock-icon-bg { background: var(--glass-fill-hover); /* 静止态是 --glass-fill */ } }