/* 外壳与系统界面 */ .boot { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); color: var(--text-3); } .boot-title { font-size: var(--fs-15); color: var(--text); font-weight: var(--fw-semi); } .boot-msg { font-size: var(--fs-13); color: var(--danger); max-width: 280px; text-align: center; } .boot-hint { font-size: var(--fs-12); max-width: 280px; text-align: center; line-height: 1.6; } /* ---- 状态栏 ---- */ .statusbar { position: relative; z-index: 1; flex: none; height: var(--statusbar-h); padding: 0 var(--sp-4); display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text); /* 会话换了顶栏颜色时跟着换（system/chatlook.js），平时透明 */ background: var(--look-status-bg, transparent); } /* 会话上面推出来一整页（编辑译文、「…」里点开的整页）时，状态栏那一行跟着那一页，不再是会话顶栏的颜色（4.744）。 :where 只为不加特异度，播放页那几条（app.css 的 .vp-page）照旧压得住它 */ .statusbar:where(:root:has(.sheet-host:not(.is-exit) > .fullsheet) *) { background: transparent; } .sb-icons { display: flex; align-items: center; gap: var(--sp-1); } .sb-level { font-size: var(--fs-11); color: var(--text-2); } /* 壁纸用 fixed 而不是 absolute。.root 的高度是加载时量出来的可视高度 (见 CLAUDE.md 第 1 条),地址栏一收起可视区就比它高,absolute 会跟着 .root 一起停在半空,底下露出一条底色。fixed 的包含块是视口,永远铺满。 它纯粹是背景,不参与布局,所以不会像 dvh 那样把界面抽动。 */ .wallpaper { position: fixed; inset: 0; z-index: 0; /* 同上：图由 --wall 喂进来，声明写在这儿，美化盖得住 */ background-image: var(--wall, none); background-size: cover; background-position: center; } .screen { flex: 1; min-height: 0; position: relative; overflow: hidden; z-index: 1; } /* 安卓上键盘直接盖在页面上时（浏览器全屏里 Chrome 不缩页面），底边抬到键盘上面（system/viewport.js 的 --kb-inset，4.605） */ :where(:root[data-kb]) .screen { margin-bottom: var(--kb-inset, 0px); } .home-layer, .app-layer { position: absolute; inset: 0; } /* 外壳这两层不许被滚走（4.653）：hidden 的容器手指滚不动，脚本照样滚得动。页面推进来那 400 毫秒新页还在右边， 页面里的 scrollIntoView 把这一层横着滚一截去找它；Chrome 动画完了拉回来，WebKit 不拉，整页停在左边。 Root.js 给这两层挂 onScroll，一滚当场拉回 0（scroll 事件在下一帧画之前派发，看不到那一下）。 不改成 overflow: clip：clip 不是滚动容器，Chrome 的懒加载图片不再提前载入，列表一滚图才冒出来 */ .app-layer { background: var(--bg); overflow: hidden; } /* 从主屏进 app（4.597）：从点的那个图标处放大出来（--open-x/y 由 system/navfx.js 写，没有就从屏幕中间） */ .app-layer { transform-origin: var(--open-x, 50%) var(--open-y, 50%); animation: app-open var(--dur-nav) var(--ease-nav); } @keyframes app-open { from { transform: scale(.3); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } } /* 回到主屏：app 那一层缩回图标处（4.763，Root.js）。主屏已经在下面，手指点得到它 */ .app-layer:where(.is-closing) { pointer-events: none; animation: app-close var(--dur-nav) var(--ease-nav) forwards; } @keyframes app-close { from { transform: none; opacity: 1; } 55% { opacity: 1; } to { transform: scale(.3); opacity: 0; } } /* 主屏与 app 同时在场的那几百毫秒（data-shell-fx）：Dock 不占位置，停在原来的位置（--dock-top）垫在屏幕底下， 主屏这一层照原来的高度（--home-live），两个值都是 Root.js 离开主屏时量的。格子与 app 的高度都和平时一样， 不会因为多了或少了一条 Dock 跳一下 */ .root[data-shell-fx] > .dock { position: absolute; left: 0; right: 0; top: var(--dock-top, auto); margin: 0; z-index: 0; } .root[data-shell-fx] .home-layer { bottom: auto; height: var(--home-live, 100%); } /* 「页面动效」关掉（data-motion，look.js）或系统减弱动态效果：从图标展开也不做 */ :where(:root[data-motion="off"]) .app-layer { animation: none; } @media (prefers-reduced-motion: reduce) { .app-layer { animation: none; } } /* 页面槽（system/runtime.js 的 AppHost，4.597）：每一页在自己的槽里，换页时两个槽叠着做动画 */ .page-slot { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); } /* 左缘右滑时底下那一页跟着手走（4.764，ui/page.js 写 --peek-p）：从左边三成处滑回原位，暗层跟着退。 和推进来时让开的样子（nav-under-out：左移三成、压 .35 的暗）原路对上。松手之后照手指那一页同样的时长与曲线收尾 */ .page-slot:where(.is-peek) { transform: translateX(calc(-30% * (1 - var(--peek-p, 0)))); } .page-slot:where(.is-peek)::after { content: ''; position: absolute; inset: 0; background: var(--scrim); pointer-events: none; opacity: calc(.35 * (1 - var(--peek-p, 0))); } :where(.app-layer[data-peek-settling]) > .page-slot:where(.is-peek) { transition: transform var(--settle-ms) var(--settle-ease); } :where(.app-layer[data-peek-settling]) > .page-slot:where(.is-peek)::after { transition: opacity var(--settle-ms) var(--settle-ease); } /* 左缘右滑时（4.630）：被推开的那一页所在的槽、以及 app 那一层不再垫底色，露出底下挂着的上一页（.is-peek）或主屏 */ .page-slot:has(> .page.is-swiping), .page-slot:has(> .page.is-settling) { background: transparent; } .app-layer:has(> .page-slot > .page.is-swiping), .app-layer:has(> .page-slot > .page.is-settling) { background: transparent; } .page-slot:where(.is-entering) { z-index: 2; box-shadow: var(--shadow-3); animation: nav-in var(--dur-nav) var(--ease-nav); } /* 退场的两个停在动画的终点（forwards，4.637）：动画走 --dur-nav（4.784 起 320ms），卸掉要等多 20ms 的定时器，手机上还常常晚到。 从前没有 fill-mode，动画一完旧页弹回原位盖在最上面，直到被卸掉 —— 返回时旧页整页闪回来一下 */ .page-slot:where(.is-leaving) { z-index: 2; box-shadow: var(--shadow-3); animation: nav-out var(--dur-nav) var(--ease-nav) forwards; } .page-slot:where(.is-under-out) { animation: nav-under-out var(--dur-nav) var(--ease-nav) forwards; } .page-slot:where(.is-under-in) { animation: nav-under-in var(--dur-nav) var(--ease-nav); } /* 往里推时底下那一页压一层暗，看得出是在它上面叠了一页。返回时不压（4.651）：从前返回时这层暗从深往浅退， 用户看到的是「退出会暗一下」「聊天界面退回到列表会暗一下」，像闪屏 */ .page-slot:where(.is-under-out)::after { content: ''; position: absolute; inset: 0; background: var(--scrim); pointer-events: none; animation: nav-dim var(--dur-nav) var(--ease-nav) both; } /* 页面上面推出来一整页（会话菜单、编辑译文）滑进来以后，底下那一页不再画（4.750）。 用户录屏：会话美化里固定在屏幕顶上的那一条（position: fixed、伪元素）穿过会话菜单，状态栏那一行一直是会话美化的颜色。 不管美化怎么写，底下那一页藏起来就透不上来。visibility 不动布局与滚动位置，整页一关立刻画回来； 左缘右滑关整页时（is-swiping / is-settling）照常露出来 */ .app-layer:has(> .sheet-host:not(.is-exit) > .fullsheet > .page:not(.is-swiping, .is-settling)) > .page-slot { animation: slot-covered 0s linear var(--dur) forwards; } @keyframes slot-covered { to { visibility: hidden; } } /* 换页动画进行中两页都不接手指（4.764）。原生转场的那几百毫秒里点了不算：从前连点两下，第二下落在正滑进来的新页上， 又推一页，或者点在正让开的旧页上，推出另一页 —— 看着就是一下一下地跳 */ .page-slot.is-entering, .page-slot.is-leaving, .page-slot.is-under-out, .page-slot.is-under-in { pointer-events: none; } @keyframes nav-in { from { transform: translateX(100%); } to { transform: none; } } @keyframes nav-out { from { transform: none; } to { transform: translateX(100%); } } @keyframes nav-under-out { from { transform: none; } to { transform: translateX(-30%); } } @keyframes nav-under-in { from { transform: translateX(-30%); } to { transform: none; } } @keyframes nav-dim { from { opacity: 0; } to { opacity: .35; } } /* 刘海那一条（--top-inset，见 base.css .root）。主界面、没有顶栏的页面整层往下让； 有顶栏的页面不让，由顶栏自己把高度加上这一条、底色铺上去，字和按钮仍在安全区以下。 让的是页面槽而不是 app 那一层：换页时两个槽里的页一个有顶栏一个没有，各让各的 */ .home-layer, .page-slot { padding-top: var(--top-inset); } .page-slot:has(> .page > .navbar:first-child) { padding-top: 0; } /* 没有顶栏、整页就是一块屏的（Page hideBar 挂的 .is-bare：线下、长篇、角色手机、放映厅全屏、沉浸阅读）： 这一层也不让，页面自己用 --top-inset 让，底色才能一直铺到屏幕顶边（4.277） */ .page-slot:has(> .page:where(.is-bare)) { padding-top: 0; } :where(.page-slot > .page) > .navbar:where(:first-child) { height: calc(var(--navbar-h) + var(--top-inset)); padding-top: var(--top-inset); /* 美化生成器的顶栏挂图从这一条以下摆（4.780，见 skin-gen.js navAnchor） */ --nav-inset: var(--top-inset); } /* ---- 主界面 ---- */ .home { position: relative; height: 100%; display: flex; flex-direction: column; padding: var(--sp-3) var(--sp-5) 0; } /* 底栏关着（4.302）：翻页圆点下面让出 Home Indicator 那一条 */ .home:where(.no-dock) { padding-bottom: var(--safe-bottom); } .home-grid { flex: 1; min-height: 0; display: grid; gap: var(--grid-gap); /* 新版把一屏多出来的高度匀进行距（4.543），由 HomeScreen 量好传进来；旧版不传，与列距相同 */ row-gap: var(--home-row-gap, var(--grid-gap)); align-content: start; justify-content: center; } /* 翻页时旧的那一页（4.323）：克隆一份叠在原处往外走，走完就删。不接点击 */ .home-grid:where(.is-ghost) { position: absolute; left: var(--ghost-l); top: var(--ghost-t); width: var(--ghost-w); height: var(--ghost-h); flex: none; pointer-events: none; } .home-grid.is-edit .cell-app .app-tile, .home-grid.is-edit .cell-widget { animation: jiggle .5s ease-in-out infinite; } /* 整理模式下小组件内部自己的点击（比如点开会话）不能抢走格子的点击， 否则一点就跳进 app，没法移除或移动 */ .home-grid.is-edit .cell-widget .wg { pointer-events: none; } /* 自定义组件是 iframe，没有 .wg。整理模式下点它要打开编辑，不能进组件里交互（4.342）； 旧外壳里它不给脚本、只是静态画面，也不接触摸，长按照常落到主屏 */ .home-grid.is-edit .cell-widget .wg-custom, .wg-custom.is-static { pointer-events: none; } .cell { min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* 不裁：未读角标挂在图标右上角外面一点（.tile-badge 的 -4px），裁了就只剩半个。 名字自己带 ellipsis，横向不会溢出 */ .cell-app { align-items: center; justify-content: flex-start; gap: 5px; cursor: pointer; overflow: visible; } .cell-app:active .app-tile { transform: scale(.93); } .app-tile { position: relative; height: calc(var(--cell, 76px) * var(--tile-ratio) * var(--ph-tile-scale, 1)); width: auto; aspect-ratio: 1; max-width: 100%; flex: none; /* --ph-tile-plate：「外观 - 图标底板颜色」（4.290），没选就是主题的白底 */ border-radius: 24%; background: var(--ph-tile-plate, var(--tile-bg)); display: flex; align-items: center; justify-content: center; box-shadow: var(--tile-shadow); transition: transform var(--dur-fast) var(--ease); } /* 换图标那一页的预览格（ui/iconpicker.js）。只写 background-color，不写简写：简写会把下面 has-image 的 background-image / size 一起重置。排在 has-image / is-bare 之前：特异度相同，后写的赢 */ .app-tile-preview { width: 64px; height: 64px; flex: none; border-radius: 24%; background-color: var(--tile-bg); box-shadow: var(--tile-shadow); display: flex; align-items: center; justify-content: center; } /* 关掉名称时不要改图标大小。Dock 的高度和胶囊的 min-height 都是拿 --tile-ratio 算的，这里单独把 .app-tile 调高，胶囊不会跟着长， 图标就顶出胶囊了。名称只是藏起来，格子里剩下的空间靠居中吃掉。 */ /* 这一格不显示名称（总设置或单独设的，HomeScreen 算好挂 .no-name，4.290）：图标居中 */ .cell-app:where(.no-name) { justify-content: center; } :where(:root[data-icon-shadow="off"]) .app-tile { box-shadow: none; } /* 只能写 background-color。写 background 简写会把下面 .has-image 的 background-size 一起重置成 auto，自定义图标就按原尺寸画、只露出一角。 */ :where(:root[data-wallpaper="on"]) .app-tile { background-color: var(--ph-tile-plate, var(--capsule-bg)); border: 1px solid var(--capsule-border); box-shadow: none; } :where(:root[data-wallpaper="on"][data-glass="on"]) .app-tile { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } /* 变量没设上时退回当前文字色。少了这个兜底，`--icon-color` 一旦缺失， 整格图标就是「位置在、画不出来」，而那正是最难查的一种 */ /* 图形大小（4.566）：单个图标长按里调的 --tile-glyph 优先，其次「外观 - 图标 - 图形大小」写的 --ph-tile-glyph */ .app-tile svg { color: var(--icon-color, currentColor); width: var(--tile-glyph, var(--ph-tile-glyph, 52%)); height: var(--tile-glyph, var(--ph-tile-glyph, 52%)); } /* 线条与实心两份（4.566）：平时显示线条；「图标样式」选了实心，或者自动且这一处开着清透玻璃，换成实心 */ .app-tile .ic-solid { display: none; } :where(:root[data-icon-style="solid"]) .app-tile .ic-solid { display: block; } :where(:root[data-icon-style="solid"]) .app-tile .ic-line { display: none; } :where(:root[data-icon-style="auto"][data-glass-home="on"][data-glass-style="clear"] .home-grid) .app-tile .ic-solid { display: block; } :where(:root[data-icon-style="auto"][data-glass-home="on"][data-glass-style="clear"] .home-grid) .app-tile .ic-line { display: none; } :where(:root[data-icon-style="auto"][data-glass-dock="on"][data-glass-style="clear"] .dock) .app-tile .ic-solid { display: block; } :where(:root[data-icon-style="auto"][data-glass-dock="on"][data-glass-style="clear"] .dock) .app-tile .ic-line { display: none; } /* 图标整张放进去，永远不裁。存的时候已经补成方图带透明边， 这里再用 contain 兜一层：格子万一不是正方也不会切掉。 */ .app-tile:where(.has-image) { /* 图走变量，不走内联样式。挂了契约钩子的元素上写内联样式，作者写什么 都盖不住它（见 ARCHITECTURE 4.136）。变量喂进来，这条声明在这儿 */ background-image: var(--tile-img, none); background-size: var(--tile-img-size, contain); background-position: center; background-repeat: no-repeat; } /* 异形图标：不要底板（换图标那张表里「显示底板」关掉）。只剩图片本身 —— 底色、描边、阴影、毛玻璃、圆角一概去掉。描边只改成透明不去掉，格子大小不变。 排在壁纸、毛玻璃那两条后面才压得过它们：几条特异度相同，靠先后 */ :where(:root) .app-tile:where(.has-image.is-bare) { background-color: transparent; border-color: transparent; box-shadow: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .app-name { font-size: var(--fs-11); color: var(--ph-tile-name-color, var(--text-2)); max-width: 100%; text-align: center; line-height: 1.2; } /* 壁纸下用白字加投影，否则深色壁纸上读不清。 「外观 - 图标名称颜色」选了颜色就用它（look.js 写 --ph-tile-name-color） */ :where(:root[data-wallpaper="on"]) .app-name { color: var(--ph-tile-name-color, var(--on-scrim)); text-shadow: 0 1px 3px rgba(0, 0, 0, .55); } /* 名称投影可以关（4.c158-5）：有的壁纸上那层投影显得脏。和上面一样只有单个类名的特异度，美化写的 .ph-tile-name 照样盖得住（第 18 条） */ :where(:root[data-label-shadow="off"]) .app-name { text-shadow: none; } :root[data-wallpaper="on"] .page-dots .dot { background: rgba(255, 255, 255, .45); } :root[data-wallpaper="on"] .page-dots .dot.is-active { background: var(--on-scrim); } :root[data-wallpaper="on"] .statusbar { color: var(--on-scrim); } /* 整屏接管的页面自己声明状态栏该用哪种字色（ui/page.js 的 statusBarStyle）。 线下、锁屏这些页面的底色和 app 主题未必一致，不声明的话浅底上会是浅字。 */ /* 线下整屏接管时，外壳那条状态栏底下也要是线下的底色，否则深色主题上方 会留一条白边（见 ARCHITECTURE 4.107）。底色由 system/stage.js 写上来。 */ :root[data-stage="on"] .root, :where(:root[data-stage="on"]) .page { background: var(--sg-chrome, var(--bg)); } :root[data-statusbar="light"] .statusbar { color: var(--on-scrim); } :root[data-statusbar="light"] .sb-level { color: var(--on-scrim); opacity: .72; } :root[data-statusbar="dark"] .statusbar { color: var(--on-paper); } :root[data-statusbar="dark"] .sb-level { color: var(--on-paper); opacity: .68; } :root[data-wallpaper="on"] .hi-bar { background: var(--on-scrim); opacity: .7; } /* 名称显不显示由 JS 按总设置与单独设置算好（look.showLabel），这里不再按根上的标记统一藏（4.290） */ .tile-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font-size: var(--fs-11); line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bg); } /* 文件夹：一格里塞四个缩小的图标。做成 2x2 而不是叠成一摞， 因为一眼要看出里面装的是哪几个。多于四个的看不见，点开才有。 */ .folder-tile { position: relative; height: calc(var(--cell, 76px) * var(--tile-ratio) * var(--ph-tile-scale, 1)); width: auto; aspect-ratio: 1; max-width: 100%; flex: none; border-radius: 24%; background: var(--ph-tile-plate, var(--tile-bg)); box-shadow: var(--tile-shadow); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6%; padding: 11%; transition: transform var(--dur-fast) var(--ease); } :root[data-wallpaper="on"] .folder-tile { background: var(--ph-tile-plate, var(--capsule-bg)); border: 1px solid var(--capsule-border); box-shadow: none; } :root[data-wallpaper="on"][data-glass="on"] .folder-tile { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } :root[data-icon-shadow="off"] .folder-tile { box-shadow: none; } .cell-app:active .folder-tile { transform: scale(.93); } .home-grid.is-edit .folder-tile { animation: jiggle .5s ease-in-out infinite; } /* 里面那几个小图标不再自己画底和影子，否则一格里四层阴影糊成一团 */ .folder-dot { display: block; min-width: 0; min-height: 0; } /* 只改底色，不写 background 简写：简写会把 .has-image 的 background-image 一起抹掉， 换过图片的图标在文件夹里就只剩一块白（用户截图，4.290）。底色和格子里那个图标一样， 不再是一块死白 —— 图标颜色设成白色时，白底上什么都看不见 */ .folder-dot .app-tile { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 28%; box-shadow: none; border-width: 0; } /* 自定义封面：换了图或线条图标的文件夹，不再画里面的小图标（4.290） */ .folder-tile:where(.is-cover) { display: flex; align-items: center; justify-content: center; padding: 0; } .folder-tile:where(.is-cover) > .app-tile { height: 100%; width: 100%; box-shadow: none; border-width: 0; background-color: transparent; } .folder-dot .app-tile svg { width: 58%; height: 58%; } /* 打开的文件夹 */ .folder-open { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); padding: var(--sp-2) var(--sp-1) var(--sp-4); } .folder-open .folder-app { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; } .folder-open .app-tile { height: auto; width: 100%; } /* 有壁纸时照旧是上面那条白字（从前那条比这条特异，这里一直不生效）；包进 :where() 之后保持原样，只是不再压住美化 */ :where(:root:not([data-wallpaper="on"]) .folder-open) .app-name { color: var(--text-2); text-shadow: none; } .cell-slot { align-items: center; justify-content: center; border: 1px dashed var(--border-2); border-radius: var(--r-md); color: var(--text-3); cursor: pointer; } .cell-slot svg { color: var(--text-3); } /* ---- 添加页（screens/home/Picker.js，4.592）：小组件按真实样子预览，两列卡片；应用铺成图标网格 ---- */ .wpk-tabs { padding: var(--sp-3) var(--sp-4) 0; margin-top: 0; } .wpk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); padding: var(--sp-4); align-items: start; } .wpk-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1); min-width: 0; text-align: left; color: var(--text); } .wpk-box { position: relative; width: 100%; aspect-ratio: var(--wpk-ratio); overflow: hidden; border-radius: var(--r-lg); background: var(--surface-2); } /* 预览按 4 列主屏的格子排好，再按卡片宽度整块缩小。里面的内容不接指针，点的是整张卡片 */ .wpk-stage { position: absolute; left: 0; top: 0; transform: scale(var(--wpk-k, 0)); transform-origin: 0 0; pointer-events: none; } .wpk-stage > .cell-widget { width: 100%; height: 100%; } .wpk-name { font-size: var(--fs-13); margin-top: var(--sp-1); } .wpk-size { font-size: var(--fs-11); color: var(--text-3); } .apk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-2); padding: var(--sp-4); } .apk-app { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-width: 0; color: var(--text); } :where(.apk-app) .app-tile { width: 52px; height: 52px; } .apk-name { max-width: 100%; font-size: var(--fs-12); } .cell-widget { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; cursor: pointer; /* 小组件的排版按「字不折行」定的（时钟那几个字号、日期一行）：不跟 body 的长词断行走（4.c158-10，wgfit 抓到 2x1 时钟顶出卡片） */ overflow-wrap: normal; } /* 起了名字的小组件（4.290）：外面一层占格子，卡片在上、名字在下 */ .cell-named { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; min-height: 0; } .cell-named > .cell-widget { flex: 1; min-height: 0; } .cell-named > .app-name { flex: none; align-self: center; } /* 小组件的内容包一层（4.294）。5、6 列时网格挂 .is-scaled、写 --wg-k，按 4 列的大小排好再整块缩小； 4 列时这一层不做变换，不另起层叠上下文 */ .wg-fit { width: 100%; height: 100%; } .home-grid:where(.is-scaled) .wg-fit { width: calc(100% / var(--wg-k)); height: calc(100% / var(--wg-k)); transform: scale(var(--wg-k)); transform-origin: 0 0; } /* 去掉卡片底，组件直接落在壁纸上。圆角留着，裁剪仍然按格子来 */ .cell-widget.is-bare { background: none; box-shadow: none; } .cell.is-picked { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-md); } /* 挂件。白底卡片，留白给足，不显得局促 */ .cell-widget { background: var(--wg-solid); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; cursor: pointer; } :root[data-wallpaper="on"] .cell-widget { box-shadow: none; border: 1px solid var(--capsule-border); } :root[data-wallpaper="on"][data-glass="on"] .cell-widget { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } /* 去掉底的挂件：上面两条有壁纸时加的细边与毛玻璃也一起去掉（4.291）。 特异度要压过 :root[data-wallpaper][data-glass] 那一条，所以把两个属性都写上 */ :root[data-wallpaper][data-glass] .cell-widget.is-bare, :root[data-wallpaper] .cell-widget.is-bare, .cell-widget.is-bare { border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .wg { height: 100%; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; color: var(--text); } .wg-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--text-3); } .wg-head svg { color: var(--text-3); } .wg-rows { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; margin-bottom: auto; } .wg-row { min-width: 0; } .wg-row-title { font-size: var(--fs-14); font-weight: var(--fw-medium); } .wg-row-sub { font-size: var(--fs-12); color: var(--text-3); margin-top: 2px; } .wg-moment-text { font-size: var(--fs-13); color: var(--text-2); line-height: 1.55; margin: 4px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .wg-empty { font-size: var(--fs-12); color: var(--text-3); margin: auto; } .wg-stat-num { font-size: var(--fs-56); font-weight: var(--fw-bold); line-height: 1; margin-top: auto; letter-spacing: -2px; } /* 一行高（4.562）：小标题在左、数字在右，下面那行说明放不下就不放 */ .wg-stat:where(.is-low) { flex-direction: row; align-items: center; justify-content: space-between; } .wg-stat:where(.is-low) .wg-stat-num { font-size: var(--fs-40); margin-top: 0; } .wg-stat:where(.is-low) .wg-row-sub { display: none; } .wg-clock { justify-content: center; } .wg-clock-time { font-size: var(--fs-56); font-weight: 200; line-height: 1; letter-spacing: -2px; /* 时刻不断行：全局的 overflow-wrap: anywhere（4.c158-10）让窄格子里「09:53」断成两行，把日期顶出卡片（4.952） */ white-space: nowrap; } /* 播放器横条 */ .wg-player { flex-direction: row; align-items: center; gap: var(--sp-5); padding: var(--sp-5); position: relative; } .wg-player:where(.is-right) { flex-direction: row-reverse; } :where(.wg-player.is-serif) .pl-line { font-family: var(--font-serif); } .pl-cover { flex: none; height: 100%; aspect-ratio: 1; border-radius: var(--r-md); background: var(--capsule-bg); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--text-3); } .pl-cover svg { color: var(--text-3); } .pl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; } :where(.wg-player.is-right) .pl-text { text-align: right; } .pl-mark { position: absolute; top: var(--sp-4); right: var(--sp-4); color: var(--text-3); } :where(.wg-player.is-right) .pl-mark { right: auto; left: var(--sp-4); } .pl-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; } .pl-sm { font-size: var(--fs-12); color: var(--text-3); } .pl-md { font-size: var(--fs-15); color: var(--text-2); } .pl-lg { font-size: var(--fs-20); font-weight: var(--fw-medium); } .pl-xl { font-size: var(--fs-28); font-weight: var(--fw-bold); letter-spacing: -.5px; } /* 文字块与图片块 */ .wg-note { justify-content: center; gap: var(--sp-1); } :where(.wg-note.is-serif) .pl-line { font-family: var(--font-serif); } :where(.wg-note) .pl-line { white-space: normal; } .wg-photo { padding: 0; background-size: cover; background-position: center; justify-content: flex-end; position: relative; } .wg-photo-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-3); background: var(--surface-2); } .wg-photo-empty svg { color: var(--text-3); } .wg-photo-cap { position: relative; padding: var(--sp-3); font-size: var(--fs-13); color: var(--on-scrim); background: linear-gradient(transparent, rgba(0, 0, 0, .55)); } .wg-edit-cover { display: flex; flex-wrap: wrap; gap: var(--sp-2); } /* 自定义组件的粘贴 / 编辑代码框（4.342）：等宽，不自动换行，长代码横着滚 */ .wg-code { width: 100%; font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto; } /* 用 AI 生成组件（4.840）：预览按这一格的像素大小画，比屏幕宽就整块缩到放得下；底下一层是格子的样子 */ .wgg-stage { display: flex; justify-content: center; padding: var(--sp-4) 0; margin-bottom: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; } .wgg-box { width: var(--wgg-w); height: var(--wgg-h); max-width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); } .wgg-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; } .wgg-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); } .page-dots { flex: none; display: flex; justify-content: center; gap: 6px; padding: var(--sp-3) 0; } .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--border-2); } .dot.is-active { background: var(--text-2); } .edit-bar { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); background: var(--surface); border-radius: var(--r-full); box-shadow: var(--shadow-2); } .edit-hint { font-size: var(--fs-12); color: var(--text-2); } .edit-acts { display: flex; align-items: center; gap: var(--sp-1); } /* ---- Dock ---- */ .dock { position: relative; z-index: var(--z-dock); flex: none; /* 图标(cell*ratio) + 胶囊上下内边距(sp-2 x2) + Dock 上下内边距(sp-2 x2) */ height: calc(var(--cell, 76px) * var(--tile-ratio) * var(--ph-tile-scale, 1) + var(--sp-8) + var(--safe-bottom)); min-height: calc(var(--dock-h) + var(--safe-bottom)); padding: var(--sp-2) var(--sp-5) calc(var(--sp-2) + var(--safe-bottom)); background: transparent; z-index: var(--z-dock); } /* 主屏上开着整屏浮层（小组件的写法说明、编辑代码、图标与名称）时 Dock 照常露在下面（4.738，用户：从「这个位置」点进去之后 底栏消失，底下空一条）。整屏浮层挂在主屏那一层，那一层本来就在 Dock 上面，和「这个位置」那个抽屉一样。 从前（4.342）把 Dock 藏起来，藏掉之后那一块只剩壁纸 */ .dock-capsule.is-edit .app-tile { animation: jiggle .5s ease-in-out infinite; } .dock-slot.is-picked .app-tile { outline: 2px solid var(--text); outline-offset: 3px; } .dock-empty.is-edit { border-style: solid; opacity: .7; } /* 空位只在编辑时画出来。平时画一圈虚线框，看着像少装了什么 */ .dock-empty:not(.is-edit) { visibility: hidden; } .dock-capsule { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); min-height: calc(var(--cell, 76px) * var(--tile-ratio) * var(--ph-tile-scale, 1) + var(--sp-4)); background: var(--ph-dock-bg, var(--ph-tile-plate, var(--capsule-bg))); border-radius: var(--r-xl); border: 1px solid var(--capsule-border); } /* 平时只排有 app 的几格（4.302）：每格的宽度与四格排满时相同，胶囊按个数收窄、居中。 四格时正好是整条宽，和从前一样。个数由脚本写进 --dock-n */ .dock-capsule.is-fit { --dock-slot-w: calc((100% - 2 * var(--sp-3) - 2px - 3 * var(--sp-2)) / 4); grid-template-columns: repeat(var(--dock-n, 4), 1fr); width: calc(var(--dock-n, 4) * var(--dock-slot-w) + (var(--dock-n, 4) - 1) * var(--sp-2) + 2 * var(--sp-3) + 2px); margin: 0 auto; } .dock-capsule.is-empty { visibility: hidden; } /* 底栏不透明度（4.c158-5）：选了底栏颜色时 look.js 写 --dock-a（0 到 1），毛玻璃的模糊跟着它变淡，0% 时不模糊、不画边线。 从前只改底色，模糊和壁纸下那圈白边照旧，拖到 0% 看着仍是一整条毛玻璃，像没反应 */ :root[data-glass="on"] .dock-capsule { backdrop-filter: blur(calc(var(--glass-blur) * var(--dock-a, 1))); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--dock-a, 1))); } :where(:root[data-dock-clear="on"]) .dock-capsule { border-color: transparent; } /* iPhone app 里外壳在这条胶囊上面盖了一块系统的液态玻璃（4.549，system/glassdock.js）。 网页这条照旧接手指，只是画成透明；盖住的那块一收起，这条立刻亮回来 */ :where(:root[data-native-dock="on"]) .dock-capsule { opacity: 0; } /* 聊天页的系统液态玻璃（4.944，system/glasschat.js）：外壳在返回键、标题、右上角按钮、加号、输入框、表情键、发送键上 各盖一块系统玻璃，里面是网页画好的图。网页这几个照旧接手指，只是画成透明（data-glass-on）；那一块收起时立刻亮回来。 顶栏与输入栏的底色去掉，浮在消息上面（会话页挂 float-top / float-bottom），消息从玻璃底下过 */ :where([data-glass-on]) { opacity: 0 !important; } :where(:root[data-glass-chat="on"] .page:has(.ph-composer)) > .ph-navbar { background: transparent; border-bottom-color: transparent; box-shadow: none; } :where(:root[data-glass-chat="on"] .page) .ph-composer { background: transparent; border-top-color: transparent; box-shadow: none; } /* 美化在顶栏或底栏上写 --ph-liquid: on 要液态玻璃（4.944）。真正去读它的是 glasschat.js（getComputedStyle），这里接一下，契约核对认得 */ .ph-navbar, .ph-composer { --liquid: var(--ph-liquid, off); } /* 标题收成一枚胶囊，玻璃按它的大小画 */ :where(:root[data-glass-chat="on"] .page:has(.ph-composer) > .navbar) > .ph-nav-title { flex: 0 1 auto; max-width: 62%; margin: 0 auto; height: 36px; padding: 0 var(--sp-4); display: flex; align-items: center; justify-content: center; border-radius: var(--r-full); } .dock-slot { display: flex; align-items: center; justify-content: center; min-width: 0; height: 100%; } /* 底栏显示名称（4.290）：图标下一行字，底栏与胶囊一起加高这一行，图标不顶出胶囊 */ .dock-slot { flex-direction: column; gap: 5px; } .dock:where(.has-names) { height: calc(var(--cell, 76px) * var(--tile-ratio) * var(--ph-tile-scale, 1) + var(--sp-8) + var(--dock-name-h) + var(--safe-bottom)); } .dock:where(.has-names) .dock-capsule { min-height: calc(var(--cell, 76px) * var(--tile-ratio) * var(--ph-tile-scale, 1) + var(--sp-4) + var(--dock-name-h)); } .dock { --dock-name-h: calc(var(--fs-11) * 1.2 + 5px); } .dock-slot .app-name { flex: none; } .dock-empty { border: 1px dashed var(--border-2); border-radius: 24%; opacity: .4; height: calc(var(--cell, 76px) * var(--tile-ratio) * var(--ph-tile-scale, 1)); width: auto; aspect-ratio: 1; align-self: center; } /* ---- 左上角那个悬浮返回键。和底部横条二选一，见 shell/NavBack.js ---- */ .navback { position: absolute; z-index: var(--z-call); /* --vv-top：键盘弹着、整页被推上去时可视区顶边在页面里的位置（system/viewport.js） */ top: calc(var(--top-inset) + var(--vv-top, 0px)); left: var(--sp-1); width: 48px; height: var(--navbar-h); display: flex; align-items: center; justify-content: center; color: var(--text); } /* 页面把顶栏换成了深色或浅色（聊天背景里的「顶栏字色」）：悬浮键跟着换， 不然深色顶栏上压着一个深色箭头 */ /* 挂着契约钩子 .ph-back（4.296）：上下文一律包进 :where()，美化写的单个 .ph-back 压得住 */ :where(:root[data-statusbar="light"]) .navback { color: var(--on-scrim); } :where(:root[data-statusbar="dark"]) .navback { color: var(--on-paper); } /* 开了悬浮键就没有底部横条，页面自己那个返回箭头也让位 —— 同一个位置 不放两个返回。用 visibility 不用 display：导航栏是三列网格， 左边那一格塌掉标题就不居中了 */ :root[data-nav="back"] .home-indicator { display: none; } /* 主屏上没有悬浮键（NavBack 只在应用里），主屏上推进来的整页自己那个返回箭头照旧（4.738，用户：只能右滑退出，没有明确的退出键） */ :root[data-nav="back"] .navbar .nav-left:not(:where(.home-layer *)) { visibility: hidden; } /* 放映厅全屏：悬浮返回键就是「退出全屏」（WatchPage 把 onBack 设成 leaveFull）。 画面是黑的，给它一个半透明的深色圆底才看得见；页面自己那个关闭键让位 —— 画面横过来时它正好转到左上角，被悬浮键盖住 */ :where(:root[data-nav="back"]:has(.wt.is-full)) .navback { top: calc(var(--top-inset) + var(--sp-3)); left: var(--sp-3); width: 34px; height: 34px; border-radius: var(--r-full); background: rgba(0, 0, 0, .45); color: var(--on-scrim); } :root[data-nav="back"] .wt.is-full .wt-exit { display: none; } .home-indicator { /* 浮在底部安全区上，不另占一排（4.714，见 base.css 同号） */ position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-toast); height: var(--safe-bottom); min-height: 22px; display: flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; pointer-events: none; } .home-indicator > .hi-bar { pointer-events: auto; position: relative; } /* 横条只有 4px 高，点的范围往外放一圈；容器本身不接点击，横条两边那一截底栏照常点得到 */ .home-indicator > .hi-bar::after { content: ''; position: absolute; inset: -9px -24px; } :root[data-kb] .home-indicator { display: none; } .hi-bar { width: 108px; height: 4px; border-radius: var(--r-full); background: var(--text-3); opacity: .5; } /* ---- 通知横幅。从顶上掉下来，往上一推收起 ---- */ .banner-host { /* 键盘弹着时整页被推上去，横幅跟着可视区顶边走（--vv-top，见 system/viewport.js） */ position: absolute; top: var(--vv-top, 0px); left: 0; right: 0; z-index: var(--z-banner); /* 绝对定位是贴着 .root 的 padding box 算的，量不到 .root 自己的 padding-top， 所以刘海这段要在这儿再让一次，否则横幅会掉到状态栏底下。 */ padding: calc(var(--safe-top) + var(--sp-2)) var(--sp-3) 0; pointer-events: none; } .banner { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--capsule-bg); border: 1px solid var(--capsule-border); box-shadow: var(--shadow-2); cursor: pointer; animation: banner-in var(--dur) var(--ease-out); } :root[data-glass="on"] .banner { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } .banner.is-leaving { animation: banner-out .2s var(--ease) forwards; } @keyframes banner-in { from { transform: translateY(-130%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes banner-out { to { transform: translateY(-130%); opacity: 0; } } .banner-icon { flex: none; width: 34px; height: 34px; border-radius: var(--r-md); background: var(--tile-bg); color: var(--icon-color); display: flex; align-items: center; justify-content: center; overflow: hidden; } .banner-text { flex: 1; min-width: 0; } .banner-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-11); color: var(--text-3); } .banner-app { min-width: 0; } .banner-time { flex: none; } .banner-title { font-size: var(--fs-14); font-weight: var(--fw-semi); margin-top: 1px; } .banner-body { font-size: var(--fs-13); color: var(--text-2); line-height: 1.4; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 没铺壁纸时胶囊底色几乎透明，横幅会看不清，这里补成实底 */ :root[data-wallpaper="off"] .banner { background: var(--surface); border-color: var(--border); } /* ---- 锁屏 ---- */ .lock { height: 100%; display: flex; flex-direction: column; /* 「上滑解锁」那一行在最底下，不让开安全区就正好压在 Home Indicator 上 */ padding: calc(var(--sp-6) + var(--top-inset)) var(--sp-4) calc(var(--sp-6) + var(--safe-bottom)); background: linear-gradient(170deg, var(--surface-2), var(--bg)); } .lock.has-wallpaper { background: none; } .lock.has-wallpaper .lock-time, .lock.has-wallpaper .lock-date, .lock.has-wallpaper .lock-unlock { color: var(--on-scrim); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); } .lock-clock { text-align: center; margin-top: var(--sp-8); } .lock-time { font-size: var(--fs-56); font-weight: 200; letter-spacing: -2px; line-height: 1.05; } .lock-date { font-size: var(--fs-14); color: var(--text-2); margin-top: var(--sp-1); } .lock-notifications { flex: 1; min-height: 0; margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); } .lock-note { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); color: var(--text-2); cursor: pointer; } .lock-note-body { flex: 1; min-width: 0; } .lock-note-title { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text); } .lock-note-text { font-size: var(--fs-12); color: var(--text-2); margin-top: 1px; } .lock-note-x { color: var(--text-3); padding: var(--sp-1); } .lock-unlock { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-3); font-size: var(--fs-12); padding: var(--sp-4) 0 var(--sp-2); } /* ---- 多任务 ---- */ :root[data-glass="on"] .switcher { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .switcher { position: absolute; inset: 0; z-index: var(--z-app); background: var(--scrim-strong); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); animation: fade-in var(--dur-fast) var(--ease); } .switcher-head { text-align: center; color: var(--on-scrim); font-size: var(--fs-13); opacity: .85; } .switcher-cards { display: flex; gap: var(--sp-3); padding: 0 var(--sp-4); overflow-x: auto; } .sw-card { position: relative; flex: none; width: 116px; height: 168px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3); } .sw-close { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 1; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2); display: flex; align-items: center; justify-content: center; } .sw-body { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); } .sw-body .app-tile { width: 52px; } .sw-name { font-size: var(--fs-12); color: var(--text-2); } /* ---- app 加载与崩溃 ---- */ .app-loading { height: 100%; display: flex; align-items: center; justify-content: center; } .crash { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-6); text-align: center; color: var(--text-3); } .crash-title { font-size: var(--fs-15); color: var(--text); font-weight: var(--fw-semi); margin-top: var(--sp-2); } .crash-msg { font-size: var(--fs-12); color: var(--text-2); max-width: 280px; line-height: 1.6; word-break: break-all; } .crash-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); } /* Love 日历 */ .wg-love { --love-ink: var(--text); color: var(--love-ink); container-type: size; padding: var(--sp-5); gap: var(--sp-4); } .wg-love.is-serif .love-word, .wg-love.is-serif .love-month { font-family: var(--font-serif); } .love-top { display: grid; grid-template-columns: 34% 1fr; gap: var(--sp-4); align-items: center; } .love-avatar { aspect-ratio: 1; border-radius: var(--r-full); border: 2px solid currentColor; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; opacity: .92; } .love-avatar:not(.has-image) { opacity: .34; } .love-right { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .love-word { font-size: var(--fs-28); font-size: clamp(var(--fs-24), 9cqw, var(--fs-56)); line-height: 1; } /* 均衡器。纯装饰，跟着 currentColor 走 */ .love-eq { display: flex; align-items: center; gap: 3px; height: 11cqh; overflow: hidden; } .love-eq i { flex: 1; min-width: 2px; max-width: 3px; height: 40%; background: currentColor; border-radius: var(--r-full); opacity: .82; transform-origin: center; animation: love-eq 1.05s ease-in-out infinite alternate; } .love-eq i:nth-child(2n) { animation-delay: -.25s; } .love-eq i:nth-child(3n) { animation-delay: -.55s; } .love-eq i:nth-child(4n) { animation-delay: -.8s; } @keyframes love-eq { from { transform: scaleY(.35); } to { transform: scaleY(1.9); } } @media (prefers-reduced-motion: reduce) { .love-eq i { animation: none; height: 55%; } } /* 日历吃掉剩下的高度，天数格子按 1fr 平分，固定六行 */ .love-cal { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid currentColor; padding-top: var(--sp-3); } .love-cal { border-top-color: color-mix(in srgb, currentColor 16%, transparent); } .love-cal-head { display: flex; align-items: baseline; justify-content: space-between; } .love-month { font-size: var(--fs-17); line-height: 1; } .love-year { font-size: var(--fs-11); opacity: .45; letter-spacing: .12em; } .love-week, .love-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .love-week { font-size: var(--fs-11); opacity: .48; letter-spacing: .06em; margin: var(--sp-3) 0 var(--sp-2); } .love-days { flex: 1; min-height: 0; } .love-day { display: flex; align-items: center; justify-content: center; font-size: var(--fs-13); line-height: 1; } .love-day.is-today { color: var(--love-ink); } .love-day.is-today svg { display: block; } /* 不是本月的日子淡一档，两周视图会带出下个月的头几天 */ .love-day.is-out { opacity: .3; } /* 2 格见方的小号。只铺两周，所以留白反而可以比原稿更松 */ .wg-love.is-compact { padding: var(--sp-4); gap: var(--sp-3); } .wg-love.is-compact .love-top { grid-template-columns: 32% 1fr; gap: var(--sp-3); } .wg-love.is-compact .love-avatar { border-width: 1.5px; } .wg-love.is-compact .love-word { font-size: var(--fs-20); font-size: clamp(var(--fs-17), 15cqw, var(--fs-28)); } .wg-love.is-compact .love-eq { height: 9cqh; gap: 2px; } .wg-love.is-compact .love-cal { padding-top: var(--sp-3); } .wg-love.is-compact .love-month { font-size: var(--fs-13); } .wg-love.is-compact .love-year { font-size: 9px; letter-spacing: .04em; } .wg-love.is-compact .love-week { font-size: 9px; margin: 6px 0 4px; letter-spacing: 0; } .wg-love.is-compact .love-day { font-size: var(--fs-12); } /* 4 宽 3 高（4.562）：头像那块收小，日历的五六行放得下，不被裁掉 */ .wg-love:where(.is-mid) { gap: var(--sp-2); } .wg-love:where(.is-mid) .love-top { grid-template-columns: 20% 1fr; gap: var(--sp-3); } .wg-love:where(.is-mid) .love-cal { padding-top: var(--sp-2); } .wg-love:where(.is-mid) .love-week { margin: var(--sp-1) 0 2px; } .wg-love:where(.is-mid) .love-day { font-size: var(--fs-12); } /* 自定义组件。iframe 是 sandbox 的，见 widgets.js */ .wg-custom { width: 100%; height: 100%; border: 0; display: block; background: transparent; } .wg-custom-empty { align-items: center; justify-content: center; text-align: center; gap: var(--sp-2); color: var(--text-3); font-size: var(--fs-12); } .wg-custom-empty svg { color: var(--text-3); } .wg-edit-color { display: flex; align-items: center; gap: var(--sp-3); } .wg-edit-color input[type="color"] { width: 46px; height: 32px; padding: 0; border: 0; background: none; border-radius: var(--r-sm); cursor: pointer; } /* ---- 健康挂件 ---- */ /* 显示哪几项由用户挑，所以格子数不固定，按内容平铺 */ .wg-hl { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin-top: auto; margin-bottom: auto; min-width: 0; } .wg-hl-one { min-width: 0; } .wg-hl-one b { display: block; font-size: var(--fs-22); font-weight: var(--fw-semi); line-height: 1.1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .wg-hl-one span { font-size: var(--fs-11); color: var(--text-3); } /* 放不下的那几项（4.902）：一行小字，和数字底下的标签对齐 */ .wg-hl-more { align-self: flex-end; } /* 一格高的时候只剩一行数字，标题栏让出去 */ .wg-health.is-flat .wg-hl { gap: var(--sp-3); align-items: baseline; } .wg-health.is-flat .wg-hl-one b { font-size: var(--fs-18); } /* ---- 保活中断的那一条 ---- */ /* 压在最上面：它本身就是恢复手段，点不到就没有意义 */ .ka-banner { position: fixed; left: var(--sp-4); right: var(--sp-4); top: calc(var(--sp-4) + env(safe-area-inset-top)); z-index: var(--z-banner); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-2); color: var(--text-3); } .ka-text { flex: 1; min-width: 0; } .ka-title { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text); } .ka-sub { font-size: var(--fs-11); color: var(--text-3); margin-top: 1px; } .ka-act { flex: none; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-sm); background: var(--text); color: var(--surface); font-size: var(--fs-13); font-weight: var(--fw-medium); } .ka-close { flex: none; border: 0; background: none; color: var(--text-3); padding: 2px; } /* ---- 相册挂件 ---- */ .wg-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin-top: auto; margin-bottom: auto; min-width: 0; } .wg-shots.is-wide { grid-template-columns: repeat(4, 1fr); } .wg-shot { display: block; aspect-ratio: 1 / 1; border-radius: var(--r-xs); background: var(--surface-2); background-size: cover; background-position: center; } .wg-album.is-flat .wg-shots { grid-template-columns: repeat(3, 1fr); } /* 还没填内容的小组件上那一句提示 */ .wg-hint { font-size: var(--fs-12); color: var(--text-3); line-height: 1.5; } /* ---- 主屏拖动（见 screens/home/drag.js） ---- */ /* 主屏本来就不滚动，格子上把浏览器自己的手势让出来，拖动时 pointermove 才不会被接管 */ .home-grid .cell, .dock-slot { touch-action: none; } /* 跟手的影子。挂在 body 上，不归网格管，所以尺寸、位置全由 drag.js 写死 */ .drag-ghost { position: fixed; z-index: var(--z-toast); margin: 0; pointer-events: none; will-change: transform; transition: none; } .drag-ghost, .drag-ghost * { animation: none !important; } .drag-ghost .app-tile, .drag-ghost.cell-widget { box-shadow: var(--shadow-3); } /* 拿起来的那一格留个淡影在原处，看得出它从哪儿来 */ .cell.is-lifted, .dock-slot.is-lifted { opacity: .25; } /* 让位预览里，拖着的那一格已经排进了落点：那里空着，其他格子围着它让开 */ .cell.is-away { visibility: hidden; } /* 拖着停在文件夹或另一个应用上（4.591）：那一格放大一圈，松手就装进去 / 合成文件夹 */ .cell.is-target { transform: scale(1.14); transition: transform .16s var(--ease); z-index: 1; } /* 文件夹里的应用按住就能拖出来，浏览器自己的手势要让开 */ .folder-open .folder-app { touch-action: none; } /* 松手会落在哪几格 */ .cell-drop { pointer-events: none; border-radius: var(--r-md); border: 2px dashed var(--text-3); background: var(--surface-2); opacity: .7; } .dock-slot.is-over .app-tile, .dock-empty.is-over { outline: 2px solid var(--text); outline-offset: 3px; } /* ---- ins 风小组件（screens/home/insWidgets.js） ---- 黑白、留白、发丝线、衬线字与小写英文标注。颜色一律来自 tokens */ /* 圆头像；ring 为 new 时外面一圈实线（二十四小时内发过动态），seen 时一圈发丝线 */ .ins-round { flex: none; width: var(--round); height: var(--round); border-radius: 50%; padding: 2px; display: inline-flex; } .ins-round.is-new { box-shadow: 0 0 0 1.5px var(--text); } .ins-round.is-seen { box-shadow: 0 0 0 1px var(--border-2); } .ins-round-in { width: 100%; height: 100%; border-radius: 50%; background: var(--surface-2) center / cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: var(--fs-13); color: var(--text-3); } /* 拍立得 */ .ins-polaroid { padding: var(--sp-3); align-items: center; justify-content: center; } .ins-paper { width: 100%; height: 100%; background: var(--paper); color: var(--on-paper); box-shadow: var(--shadow-2); padding: 7% 7% 0; display: flex; flex-direction: column; transition: transform var(--dur-slow) var(--ease-out); } .ins-polaroid.is-tilt-l .ins-paper { transform: rotate(-2.5deg) scale(.96); } .ins-polaroid.is-tilt-r .ins-paper { transform: rotate(2.5deg) scale(.96); } .ins-shot { flex: 1; min-height: 0; background: var(--surface-2) center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--on-paper-2); } .ins-caption { flex: none; height: 26%; min-height: 34px; display: flex; flex-direction: column; justify-content: center; gap: 1px; font-family: var(--font-serif); font-style: italic; min-width: 0; } .ins-caption-t { font-size: var(--fs-14); line-height: 1.25; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ins-caption-d { align-self: flex-end; font-size: var(--fs-9); color: var(--on-paper-2); font-style: normal; letter-spacing: .5px; } /* 两格见方（4.562）：字只排一行，放不下用省略号，不露半截 */ .ins-polaroid:where(:not(.is-tall)) .ins-caption-t { -webkit-line-clamp: 1; } /* 胶片：上下两排齿孔用重复渐变画，颜色取 tokens */ .ins-film { padding: 0; gap: 0; background: var(--film); color: var(--on-film); position: relative; justify-content: center; } .ins-holes { flex: none; height: 12px; margin: 0 6px; background: repeating-linear-gradient(90deg, transparent 0 6px, var(--on-film-2) 6px 12px, transparent 12px 18px); -webkit-mask: linear-gradient(transparent 3px, var(--film) 3px, var(--film) 9px, transparent 9px); mask: linear-gradient(transparent 3px, var(--film) 3px, var(--film) 9px, transparent 9px); opacity: .8; } .ins-frames { flex: 1; min-height: 0; display: flex; gap: 6px; padding: 2px 6px; } .ins-frame { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ins-frame-img { flex: 1; min-height: 0; background: var(--on-film-2) center / cover no-repeat; } .ins-frame-img.is-empty { opacity: .25; } .ins-frame-no { font-family: var(--font-mono); font-size: var(--fs-9); color: var(--on-film-2); letter-spacing: 1px; } /* 片边上的字压在上排齿孔那一条上，底下垫一块片基色，像印在胶片边上 */ .ins-film-mark { position: absolute; right: 14px; top: 0; line-height: 12px; padding: 0 4px; background: var(--film); font-family: var(--font-mono); font-size: var(--fs-9); letter-spacing: 2px; color: var(--on-film-2); } /* 快拍 */ .ins-stories { flex-direction: row; align-items: center; justify-content: flex-start; padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); overflow: hidden; } .ins-story { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; } .ins-story-name { max-width: 100%; font-size: var(--fs-11); color: var(--text-2); } /* 九宫格：没有标题、没有圆角，只有两像素的缝 */ .ins-grid { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; } .ins-tile { background: var(--surface-2) center / cover no-repeat; min-width: 0; min-height: 0; } .ins-tile.is-empty { background: var(--surface-2); } /* 天气 */ .ins-weather { justify-content: center; gap: 2px; } .ins-weather-city { font-size: var(--fs-12); color: var(--text-2); letter-spacing: .3px; } .ins-weather-city span { color: var(--text-3); } .ins-weather-t { font-size: var(--fs-40); font-weight: 200; line-height: 1.1; letter-spacing: -1px; } .ins-weather-t i { font-style: normal; color: var(--text-3); margin: 0 2px; } .ins-weather-x { font-size: var(--fs-13); color: var(--text-2); } .ins-weather-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* 两格高：城市在上、气温居中、天气在下。外面那层拆掉，三行直接排在卡片里 */ .ins-weather:not(.is-flat) .ins-weather-meta { display: contents; } .ins-weather:not(.is-flat) .ins-weather-city { order: -1; } .ins-weather:not(.is-flat) .ins-weather-x { order: 1; } .ins-weather.is-flat { flex-direction: row; align-items: center; gap: var(--sp-3); } .ins-weather.is-flat .ins-weather-t { flex: none; font-size: var(--fs-24); } .ins-weather.is-flat .ins-weather-meta { flex: 1; } /* ---- 登录页 ---- */ .login { height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-6); max-width: 360px; margin: 0 auto; background: var(--bg); overflow-y: auto; } /* 放得下时居中；放不下时（矮屏、键盘弹起、重置密码那一步字段多）从顶上排起，可以滑到底。 不用 justify-content: center：内容一高，上下两端会被裁掉而且滑不到 */ .login > :first-child { margin-top: auto; } .login > :last-child { margin-bottom: auto; } .login-icon { width: 76px; height: 76px; border-radius: var(--r-lg); } .login-title { font-size: var(--fs-24); font-weight: var(--fw-semi); color: var(--text); margin-bottom: var(--sp-3); } .login-note, .login-err { font-size: var(--fs-13); text-align: center; line-height: 1.6; } .login-note { color: var(--text-2); } .login-err { color: var(--danger); } .login-fields { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); } .login-fields input { width: 100%; } .login .btn { width: 100%; margin-top: var(--sp-2); } .login-hint { font-size: var(--fs-12); color: var(--text-3); text-align: center; line-height: 1.6; margin-top: var(--sp-2); } .login-retry, .login-link { font-size: var(--fs-13); color: var(--text-2); text-decoration: underline; padding: var(--sp-2); } /* ---- 排查读数（system/diag.js，地址加 ?diag 才有）。放在屏幕中间，不挡上下两条 ---- */ .diag { position: fixed; left: var(--sp-2); right: var(--sp-2); top: 40%; z-index: calc(var(--z-banner) + 10); margin: 0; padding: var(--sp-2); border-radius: var(--r-md); background: var(--scrim-strong); color: var(--on-scrim); font: var(--fs-11)/1.5 var(--font-mono); white-space: pre-wrap; pointer-events: none; } /* ---- 测试版标记（system/channel.js）。贴在左边缘中间，点不到，不挡边缘返回 ---- */ .test-tag { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: calc(var(--z-banner) + 20); writing-mode: vertical-rl; letter-spacing: 2px; padding: var(--sp-2) 2px; border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--danger); color: var(--on-scrim); font-size: var(--fs-11); opacity: .85; pointer-events: none; } /* 锁屏密码（system/pinlock.js）：时间留在上面，键盘占中间 */ .lock.is-pin { justify-content: space-between; } .lock-pin { display: flex; flex-direction: column; align-items: center; padding-bottom: var(--sp-6); } .lock-pin-acts { display: flex; gap: var(--sp-8); margin-top: var(--sp-5); } .lock-pin-acts button { font-size: var(--fs-14); color: var(--text-2); padding: var(--sp-2); } .lock.has-wallpaper .lock-pin .pinpad-note, .lock.has-wallpaper .lock-pin-acts button, .lock.has-wallpaper .lock-pin .pinpad-del { color: var(--on-scrim); } .lock.has-wallpaper .lock-pin .pinpad-key { background: var(--scrim); color: var(--on-scrim); } .lock.has-wallpaper .lock-pin .pinpad-dots i { border-color: var(--on-scrim); } .lock.has-wallpaper .lock-pin .pinpad-dots i.is-on { background: var(--on-scrim); } /* ---- 使用须知与内测说明（shell/TermsGate.js）---- */ .terms-gate { position: absolute; inset: 0; z-index: var(--z-terms); display: flex; flex-direction: column; background: var(--bg); color: var(--text); padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); } .terms-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-6) var(--sp-5) var(--sp-4); } .terms-title { font-size: var(--fs-20); font-weight: 600; margin-bottom: var(--sp-3); } .terms-sec { margin-top: var(--sp-4); } .terms-sec-title { font-size: var(--fs-15); font-weight: 600; margin-bottom: var(--sp-1); } .terms-p { font-size: var(--fs-14); color: var(--text-2); line-height: 1.7; margin: var(--sp-2) 0 0; } .terms-outro { margin-top: var(--sp-5); color: var(--text); } .terms-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-5); } .terms-gate.is-end { justify-content: center; align-items: center; } .terms-end { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-6); text-align: center; } .terms-end-text { font-size: var(--fs-15); color: var(--text-2); line-height: 1.7; } /* ---- 借用界面的小组件（4.431 第二版，screens/home/mimicWidgets.js） ---- 推文、帖子、对话、日记。只有黑白灰，底有白、黑、毛玻璃三种 */ .mm { --mm-bg: var(--dc-paper); --mm-fg: var(--on-dc); --mm-fg2: var(--on-dc-2); --mm-ln: var(--mm-line); --mm-in: var(--mm-bub-in); --mm-out: var(--mm-bub-out); --mm-on-out: var(--on-mm-bub-out); padding: 0; gap: 0; color: var(--mm-fg); font-family: var(--font); } .mm.is-ink { --mm-bg: var(--dc-ink); --mm-fg: var(--on-dc-ink); --mm-fg2: var(--on-dc-ink-2); --mm-ln: var(--mm-ink-line); --mm-in: var(--mm-ink-bub-in); --mm-out: var(--on-dc-ink); --mm-on-out: var(--dc-ink); } .mm-card { width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0; padding: var(--sp-3) 14px; border-radius: var(--r-xl); overflow: hidden; background: var(--mm-bg); box-shadow: var(--dc-shadow); } .mm.is-ink .mm-card { border: 1px solid var(--film-edge); } .mm.is-glass .mm-card { background: var(--dc-mist); border: 1px solid var(--dc-mist-line); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } .mm-strong { font-weight: var(--fw-semi); color: var(--mm-fg); } .mm-dim { color: var(--mm-fg2); } .mm-face { flex: none; width: var(--mm-face); height: var(--mm-face); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--dc-hole) center / cover no-repeat; background-image: var(--mm-img, none); font-size: var(--fs-12); color: var(--mm-fg2); } .mm-pic { display: flex; align-items: center; justify-content: center; min-height: 0; background: var(--dc-hole) center / cover no-repeat; background-image: var(--mm-img, none); color: var(--dc-hole-ic); } /* 推文 */ .mm-post-head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .mm-post-who { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: var(--fs-14); } .mm-post-who .mm-dim { flex: none; } .mm-post-who .mm-dim.ellipsis { flex: 0 1 auto; } .mm-post-text { margin-top: 6px; font-size: var(--fs-14); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mm-post:where(.is-tall) .mm-post-text { -webkit-line-clamp: 3; } .mm-post-img { flex: 1; margin-top: var(--sp-2); border-radius: var(--r-md); border: 1px solid var(--mm-ln); } .mm-post-bar { margin-top: auto; padding-top: var(--sp-2); display: flex; justify-content: space-between; font-size: var(--fs-12); color: var(--mm-fg2); } .mm-post-bar span { display: inline-flex; align-items: center; gap: 5px; min-width: 40px; } /* 帖子 */ .mm-gram .mm-card { padding: 0; } .mm-gram-head { display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-3); font-size: var(--fs-13); } .mm-gram-head .mm-strong { flex: 1; min-width: 0; } .mm-gram-img { flex: 1; width: 100%; } .mm-gram-bar { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3) 4px; } .mm-gram-bar .mm-gap { flex: 1; } .mm-gram-likes { padding: 0 var(--sp-3); font-size: var(--fs-13); } .mm-gram-cap { padding: 2px var(--sp-3) var(--sp-3); font-size: var(--fs-13); line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mm-gram:where(:not(.is-big)) .mm-gram-head { padding: 7px 10px; font-size: var(--fs-12); } .mm-gram:where(:not(.is-big)) .mm-gram-bar { gap: 10px; padding: 7px 10px 2px; } .mm-gram:where(:not(.is-big)) .mm-gram-likes { padding: 0 10px var(--sp-2); font-size: var(--fs-12); } /* 对话 */ .mm-talk .mm-card { padding: 0; } .mm-talk-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--mm-ln); } .mm-talk-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .mm-talk-who .mm-strong { font-size: var(--fs-13); } .mm-talk-who .mm-dim { font-size: var(--fs-11); } .mm-talk-list { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: var(--sp-2) 10px 10px; overflow: hidden; } .mm-bub { align-self: flex-start; max-width: 82%; display: flex; align-items: flex-end; gap: 6px; padding: 5px 9px; border-radius: 14px 14px 14px 4px; background: var(--mm-in); font-size: var(--fs-13); line-height: 1.4; } .mm-bub.is-me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--mm-out); color: var(--mm-on-out); } .mm-bub-text { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mm-bub-meta { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-9); opacity: .6; } .mm-talk:where(:not(.is-wide)) .mm-bub { max-width: 92%; font-size: var(--fs-12); } /* 日记 */ .mm-diary-date { display: flex; align-items: center; gap: 10px; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--mm-ln); } .mm-diary-d { font-family: var(--font-serif); font-size: var(--fs-40); line-height: .9; } .mm-diary-m { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-11); letter-spacing: .5px; line-height: 1.5; } .mm-diary-m .mm-dim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mm-diary-body { flex: 1; min-height: 0; display: flex; gap: var(--sp-3); margin-top: var(--sp-2); } .mm-diary-text { flex: 1; min-width: 0; font-family: var(--font-serif); font-size: var(--fs-13); line-height: 1.65; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-line; } .mm-diary-text:where(.is-locked) { color: var(--mm-fg2); } .mm-diary:where(.is-wide) .mm-diary-text { -webkit-line-clamp: 2; } .mm-diary-img { flex: none; width: 64px; height: 64px; border-radius: var(--r-sm); } .mm-diary-by { margin-top: auto; text-align: right; font-size: var(--fs-11); } .mm-diary:where(:not(.is-wide)) .mm-diary-d { font-size: var(--fs-28); } .mm-diary:where(:not(.is-wide)) .mm-diary-text { font-size: var(--fs-12); -webkit-line-clamp: 3; } /* ---- 装饰组件（4.431 第五版，screens/home/decorWidgets.js） ---- 照片是主角，形状只用圆、拱、圆角方；字少，大号细衬线数字配一行小斜体；只有黑白灰 */ .dw { padding: 0; gap: 0; position: relative; color: var(--text); font-family: var(--font); container-type: size; } .dw-card { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--dw-card); box-shadow: var(--dw-shadow); } :root[data-wallpaper="on"][data-glass="on"] .dw-card { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } .dw-empty { display: flex; align-items: center; justify-content: center; font-size: var(--fs-12); color: var(--text-3); } .dw-pic { display: block; background: var(--dw-empty) var(--dw-img, none) center / cover no-repeat; } .dw-face { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--dw-empty) var(--dw-img, none) center / cover no-repeat; font-size: var(--fs-13); color: var(--text-2); } .dw-spark { position: absolute; color: var(--text); } .dw-cap { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; } .dw-cap-line { max-width: 92%; font-family: var(--dw-serif); font-style: italic; font-size: var(--fs-12); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dw-cap-kao { font-size: var(--fs-11); color: var(--text-3); } /* 资料卡 · ins：头像外一圈细环，右边三个数字，名字、签名、两个灰按钮 */ .dw-ins { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-3) 18px; } .dw-ins-top { display: flex; align-items: center; gap: 18px; } .dw-ins-ring { flex: none; padding: 3px; border-radius: 50%; border: 1.5px solid var(--text); } .dw-ins-ring .dw-face { width: 54px; height: 54px; box-shadow: 0 0 0 2px var(--dw-ring); } .dw-ins-stats { flex: 1; min-width: 0; display: flex; justify-content: space-around; text-align: center; } .dw-ins-stats b { display: block; font-size: var(--fs-17); font-weight: var(--fw-semi); } .dw-ins-stats span { font-size: var(--fs-11); color: var(--text-2); } .dw-ins-name { margin-top: 6px; font-size: var(--fs-14); font-weight: var(--fw-semi); } .dw-ins-bio { margin-top: 2px; font-size: var(--fs-12); color: var(--text); } .dw-ins-btns { display: flex; gap: 6px; margin-top: 8px; } .dw-ins-btn { flex: 1; height: 24px; border-radius: var(--r-xs); background: var(--dw-chip); font-size: var(--fs-12); font-weight: var(--fw-semi); line-height: 24px; text-align: center; } /* 资料卡 · X：横幅，头像压在横幅下沿，右边一个「已关注」，名字、@、签名、一行小字 */ .dw-x-banner { position: absolute; left: 0; right: 0; top: 0; height: 46px; } .dw-x-avatar { position: absolute; left: 14px; top: 22px; padding: 3px; border-radius: 50%; background: var(--dw-card); } .dw-x-avatar .dw-face { width: 46px; height: 46px; } .dw-x-follow { position: absolute; right: 14px; top: 54px; height: 26px; padding: 0 14px; border-radius: var(--r-full); border: 1px solid var(--border-2); font-size: var(--fs-12); font-weight: var(--fw-semi); line-height: 24px; } .dw-x-body { position: absolute; left: 18px; right: 18px; bottom: 10px; display: flex; flex-direction: column; gap: 0; } .dw-x-name { font-size: var(--fs-15); font-weight: var(--fw-bold); } .dw-x-handle { font-size: var(--fs-11); color: var(--text-2); } .dw-x-bio { margin-top: 2px; font-size: var(--fs-12); } .dw-x-meta { display: flex; gap: 12px; margin-top: 3px; font-size: var(--fs-11); color: var(--text-2); white-space: nowrap; overflow: hidden; } .dw-x-meta span { display: inline-flex; align-items: center; gap: 3px; } .dw-x-meta b { color: var(--text); font-weight: var(--fw-semi); margin-right: 2px; } /* 圆窗：图羽化成圆，三颗小星 */ .dw-moon-pic { position: absolute; left: 50%; top: 2px; width: 76%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; -webkit-mask: radial-gradient(circle, black 56%, transparent 71%); mask: radial-gradient(circle, black 56%, transparent 71%); } .dw-moon .dw-cap { bottom: 0; } .dw-moon .dw-spark-1 { left: 6%; top: 6%; width: 14px; height: 14px; } .dw-moon .dw-spark-2 { right: 7%; top: 12%; width: 9px; height: 9px; } .dw-moon .dw-spark-3 { right: 12%; top: 60%; width: 10px; height: 10px; } /* 唱片：黑胶，中间是图；宽版加唱臂、歌名、进度与一起听的人 */ .dw-disc { position: absolute; left: 50%; top: 14px; width: 62%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: repeating-radial-gradient(circle, var(--dw-disc) 0 1.5px, var(--dw-groove) 1.5px 3px); box-shadow: var(--dw-shadow-2); } .dw-disc.is-spin { animation: dw-spin 12s linear infinite; } @keyframes dw-spin { to { rotate: 360deg; } } .dw-disc-label { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; } .dw-disc-hole { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--dw-hole); } .dw-rec-info { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; } .dw-rec-title { font-family: var(--dw-serif); font-size: var(--fs-15); } .dw-rec-artist { font-family: var(--dw-serif); font-style: italic; font-size: var(--fs-11); color: var(--text-2); } .dw-record.is-wide .dw-disc { left: 16px; top: 50%; width: auto; height: calc(100% - 32px); transform: translateY(-50%); } .dw-record.is-wide .dw-rec-info { left: 54%; right: 18px; top: 22px; bottom: auto; text-align: left; } .dw-arm { position: absolute; left: 38%; top: 6px; width: 44px; height: 60px; fill: var(--dw-card); stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; } .dw-arm path { fill: none; stroke-width: 2; } .dw-arm rect { fill: var(--text); stroke: none; } .dw-rec-now { font-size: var(--fs-9); letter-spacing: 2px; color: var(--text-3); } .dw-record.is-wide .dw-rec-title { margin-top: 8px; font-size: var(--fs-20); line-height: 1.15; } .dw-record.is-wide .dw-rec-artist { margin-top: 2px; font-size: var(--fs-12); } .dw-rec-bar { position: relative; height: 2px; margin-top: 18px; background: var(--border-2); } .dw-rec-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--dw-pct, 0%); background: var(--text); } .dw-rec-bar b { position: absolute; left: var(--dw-pct, 0%); top: -3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--text); } .dw-rec-time { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--dw-serif); font-size: var(--fs-9); color: var(--text-3); } .dw-rec-who { position: absolute; right: 16px; bottom: 12px; display: flex; align-items: center; } .dw-rec-who em { font-style: normal; font-size: var(--fs-11); color: var(--text-3); margin-right: 8px; } .dw-rec-who .dw-face { width: 22px; height: 22px; border: 2px solid var(--dw-card); } .dw-rec-who .dw-face + .dw-face { margin-left: -7px; } /* 月历：左边圆角方照片，右边月份与整月日历 */ .dw-cal { display: flex; gap: 14px; padding: 12px 14px 12px 12px; } .dw-cal-pic { flex: 0 0 40%; border-radius: var(--r-lg); } .dw-cal-side { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dw-cal-head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 0; } .dw-cal-head b { font-family: var(--dw-serif); font-weight: var(--fw-normal); font-size: var(--fs-20); } .dw-cal-head i { font-family: var(--dw-serif); font-size: var(--fs-11); color: var(--text-3); } .dw-cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto repeat(var(--dw-rows), 1fr); margin-top: 6px; font-family: var(--dw-serif); font-size: var(--fs-11); color: var(--text-2); } .dw-cal-w { text-align: center; font-family: var(--font); font-size: var(--fs-9); font-weight: var(--fw-semi); color: var(--text-3); padding-bottom: 2px; } .dw-cal-d { display: flex; align-items: center; justify-content: center; } .dw-cal-d i { font-style: normal; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; } .dw-cal-d.is-out { color: var(--text-3); opacity: .5; } .dw-cal-d.is-today i { background: var(--accent); color: var(--on-accent); } /* 照片堆：后面一张大的、前面一张小的错开，下面一行日期 */ .dw-pile-back, .dw-pile-front { position: absolute; border-radius: var(--r-md); border: 3px solid var(--dw-ring); } .dw-pile-back { left: 4%; top: 2%; width: 66%; aspect-ratio: 1; box-shadow: var(--dw-shadow); } .dw-pile-front { right: 4%; top: 27%; width: 56%; aspect-ratio: 1; box-shadow: var(--dw-shadow-2); } .dw-pile-text { position: absolute; left: 8%; right: 8%; bottom: 4px; font-family: var(--dw-serif); font-style: italic; font-size: var(--fs-11); color: var(--text-2); } /* 照片与时间：照片铺满，左上角白字 */ .dw-time-pic { position: absolute; inset: 0; } .dw-time-shade { position: absolute; inset: 0; background: linear-gradient(160deg, var(--dw-shade), transparent 55%); } .dw-time-clock { position: absolute; left: 18px; top: 10px; font-family: var(--dw-serif); font-weight: 300; font-size: var(--fs-56); line-height: 1.05; letter-spacing: -1px; color: var(--dw-on-photo); } .dw-time-date { position: absolute; left: 20px; top: 72px; font-family: var(--dw-serif); font-style: italic; font-size: var(--fs-12); color: var(--dw-on-photo); } .dw-phototime:where(:not(.is-wide)) .dw-time-clock { font-size: var(--fs-40); left: 14px; } .dw-phototime:where(:not(.is-wide)) .dw-time-date { left: 16px; top: 56px; font-size: var(--fs-11); } /* 对望：两个头像相交，名字，大号天数 */ .dw-pair { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px; } .dw-pair-faces { display: flex; } .dw-pair-faces .dw-face { width: 64px; height: 64px; border: 3px solid var(--dw-ring); box-shadow: var(--dw-shadow); } .dw-pair-faces .dw-face + .dw-face { margin-left: -14px; } .dw-pair-names { max-width: 100%; margin-top: 6px; font-family: var(--dw-serif); font-size: var(--fs-12); color: var(--text-2); } .dw-pair-names em { font-style: italic; color: var(--text-3); margin: 0 5px; } .dw-pair-n { margin-top: 4px; font-family: var(--dw-serif); font-weight: 300; font-size: var(--fs-40); line-height: 1; } .dw-pair-sub { margin-top: 3px; font-family: var(--dw-serif); font-style: italic; font-size: var(--fs-11); color: var(--text-3); } /* 一句：引号、头像、一句话、落款 */ .dw-quote { padding: 16px 18px; } .dw-quote-mark { display: block; font-family: var(--dw-serif); font-size: var(--fs-40); line-height: .7; height: 22px; } .dw-quote .dw-face { position: absolute; right: 16px; top: 14px; width: 30px; height: 30px; } .dw-quote-text { margin-top: 14px; font-family: var(--font-serif); font-size: var(--fs-15); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dw-quote-by { position: absolute; left: 18px; right: 18px; bottom: 14px; font-size: var(--fs-11); color: var(--text-3); } .dw-saying:where(.is-wide) .dw-quote-text { font-size: var(--fs-17); } /* 拱窗：拱形照片，白边，两颗小星 */ .dw-arch-pic { position: absolute; left: 15%; right: 15%; top: 0; bottom: 24px; border-radius: var(--r-full) var(--r-full) var(--r-sm) var(--r-sm); border: 3px solid var(--dw-ring); box-shadow: var(--dw-shadow); } .dw-arch .dw-spark-1 { left: 4%; top: 14%; width: 13px; height: 13px; } .dw-arch .dw-spark-2 { right: 6%; top: 64%; width: 9px; height: 9px; } /* 格子下面写了名字时，组件矮二十来像素（4.431）。按自己的高度收紧，不让字叠到图上 */ @container (max-height: 160px) { .dw-ins { padding: 10px 16px; } .dw-ins-ring .dw-face { width: 44px; height: 44px; } .dw-ins-stats b { font-size: var(--fs-15); } .dw-ins-name { margin-top: 4px; font-size: var(--fs-13); } .dw-ins-bio { font-size: var(--fs-11); } .dw-ins-btns { margin-top: 6px; } .dw-ins-btn { height: 22px; line-height: 22px; font-size: var(--fs-11); } .dw-x-banner { height: 38px; } .dw-x-avatar { top: 16px; } .dw-x-avatar .dw-face { width: 40px; height: 40px; } .dw-x-follow { top: 44px; height: 22px; line-height: 20px; font-size: var(--fs-11); } .dw-x-bio { display: none; } .dw-record:where(:not(.is-wide)) .dw-disc { top: 10px; width: auto; height: calc(100% - 58px); } .dw-record:where(:not(.is-wide)) .dw-rec-info { bottom: 8px; } .dw-pair-faces .dw-face { width: 50px; height: 50px; } .dw-pair-names { margin-top: 4px; font-size: var(--fs-11); } .dw-pair-n { margin-top: 2px; font-size: var(--fs-28); } .dw-quote { padding: 12px 16px; } .dw-quote-text { margin-top: 8px; font-size: var(--fs-14); line-height: 1.5; -webkit-line-clamp: 2; } .dw-quote-by { bottom: 10px; } .dw-cal-grid { margin-top: 2px; } .dw-cal-d i { width: 16px; height: 16px; line-height: 16px; } .dw-moon-pic { width: 68%; } .dw-arch-pic { bottom: 22px; } } /* ---- 不要数据的三块：月相、今年、这一周（4.544） ---- */ .dw-phase { display: flex; align-items: center; justify-content: center; } .dw-phase-disc { position: absolute; left: 50%; top: 40%; width: 52%; max-width: 92px; transform: translate(-50%, -50%); overflow: visible; } .dw-phase-dark { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; } .dw-phase-lit { fill: var(--text); } .dw-phase-text { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; flex-direction: column; align-items: center; gap: 1px; } .dw-phase-name { font-family: var(--dw-serif); font-style: italic; font-size: var(--fs-14); } .dw-phase-sub { font-size: var(--fs-11); color: var(--text-3); } .dw-phase .dw-spark-1 { left: 10%; top: 12%; width: 12px; height: 12px; } .dw-phase .dw-spark-2 { right: 12%; top: 22%; width: 8px; height: 8px; } .dw-phase .dw-spark-3 { left: 20%; top: 58%; width: 7px; height: 7px; } :where(.dw-sphase.is-wide) .dw-phase-disc { left: 24%; top: 50%; width: auto; height: 70%; max-width: none; } :where(.dw-sphase.is-wide) .dw-phase-text { left: 48%; right: 16px; top: 50%; bottom: auto; transform: translateY(-50%); align-items: flex-start; } :where(.dw-sphase.is-wide) .dw-phase-name { font-size: var(--fs-24); } :where(.dw-sphase.is-low) .dw-phase-disc { left: 20%; top: 50%; width: auto; height: 64%; } :where(.dw-sphase.is-low) .dw-phase-text { left: 42%; right: 10px; top: 50%; bottom: auto; transform: translateY(-50%); align-items: flex-start; } :where(.dw-sphase.is-low) .dw-spark-3 { display: none; } .dw-year { display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; } .dw-year-k { font-size: var(--fs-11); letter-spacing: .12em; color: var(--text-3); } .dw-year-n { font-family: var(--dw-serif); font-weight: 300; font-size: 56px; line-height: 1; margin-top: 4px; font-variant-numeric: tabular-nums; } .dw-year-sub { margin-top: 4px; font-family: var(--dw-serif); font-style: italic; font-size: var(--fs-12); color: var(--text-2); } .dw-year-bar { position: relative; display: block; height: 1px; margin-top: 10px; background: var(--border-2); } .dw-year-bar i { position: absolute; left: 0; top: -1px; height: 3px; width: var(--dw-pct); border-radius: 2px; background: var(--text); } .dw-year .dw-spark-1 { right: 14px; top: 14px; width: 12px; height: 12px; } .dw-year .dw-spark-2 { right: 30px; top: 34px; width: 7px; height: 7px; } :where(.dw-syear.is-low) .dw-year { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 8px 14px; } :where(.dw-syear.is-low) .dw-year-n { font-size: var(--fs-28); margin-top: 0; } :where(.dw-syear.is-low) .dw-year-sub { margin-top: 0; } :where(.dw-syear.is-low) .dw-year-bar { flex-basis: 100%; margin-top: 4px; } :where(.dw-syear.is-low) .dw-spark-2 { display: none; } .dw-week { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; } .dw-week-name { font-family: var(--dw-serif); font-style: italic; font-size: var(--fs-17); white-space: nowrap; } .dw-week-dots { display: flex; gap: 6px; } .dw-week-d { display: flex; flex-direction: column; align-items: center; gap: 3px; } .dw-week-d i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--text-3); } .dw-week-d em { font-style: normal; font-size: 9px; color: var(--text-3); } .dw-week-d:where(.is-past) i { background: var(--border-2); box-shadow: none; } .dw-week-d:where(.is-now) i { background: var(--text); box-shadow: none; } .dw-week-d:where(.is-now) em { color: var(--text); font-weight: var(--fw-semi); } :where(.dw-sweek:not(.is-wide)) .dw-week { flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 0 12px; } :where(.dw-sweek:not(.is-wide)) .dw-week-name { font-size: var(--fs-13); } :where(.dw-sweek:not(.is-wide)) .dw-week-dots { gap: 4px; } :where(.dw-sweek:not(.is-wide)) .dw-week-d em { display: none; } /* ---- 节气（4.546）：一圈二十四道刻度，宋体大字的节气名，一行斜体英文 ---- */ .dw-term { display: flex; align-items: center; } .dw-term-wheel { position: absolute; right: 10%; top: 50%; height: 62%; transform: translateY(-50%); overflow: visible; } .dw-term-ring { fill: none; stroke: var(--border-2); stroke-width: 1; } .dw-term-ticks line { stroke: var(--text-3); stroke-width: 1; } .dw-term-dot { fill: var(--text); } .dw-term-text { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 18px; min-width: 0; } .dw-term-name { font-family: var(--font-display, var(--dw-serif)); font-size: 44px; line-height: 1.05; letter-spacing: .04em; } .dw-term-en { font-family: var(--dw-serif); font-style: italic; font-size: var(--fs-13); color: var(--text-2); } .dw-term-next { margin-top: 6px; font-size: var(--fs-11); color: var(--text-3); letter-spacing: .02em; } .dw-term .dw-spark-1 { left: 52%; top: 16%; width: 11px; height: 11px; } .dw-term .dw-spark-2 { left: 46%; bottom: 18%; width: 7px; height: 7px; } /* 两格见方：圆环在上，字在下 */ :where(.dw-sterm:not(.is-wide):not(.is-low)) .dw-term { flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-bottom: 14px; } :where(.dw-sterm:not(.is-wide):not(.is-low)) .dw-term-wheel { right: 12px; top: 14px; height: 46%; transform: none; } :where(.dw-sterm:not(.is-wide):not(.is-low)) .dw-term-text { padding: 0 14px; } :where(.dw-sterm:not(.is-wide):not(.is-low)) .dw-term-name { font-size: 34px; } :where(.dw-sterm:not(.is-wide):not(.is-low)) .dw-spark-1 { left: 14px; top: 16px; } :where(.dw-sterm:not(.is-wide):not(.is-low)) .dw-spark-2 { left: 34px; top: 34px; bottom: auto; } /* 一行高：只有字 */ :where(.dw-sterm.is-low) .dw-term-text { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 8px; padding: 0 14px; } :where(.dw-sterm.is-low) .dw-term-name { font-size: var(--fs-24); } :where(.dw-sterm.is-low) .dw-term-next { margin-top: 0; } :where(.dw-sterm.is-low:not(.is-wide)) .dw-term-en { display: none; } :where(.dw-sterm.is-low) .dw-spark-2 { display: none; } :where(.dw-sterm.is-low) .dw-spark-1 { left: auto; right: 12px; top: 10px; } /* ---- 一键遮挡（4.558，shell/QuickCover.js）：只有时间与日期 ---- */ .quick-cover { position: fixed; inset: 0; z-index: var(--z-cover); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); background: var(--bg); color: var(--text); touch-action: manipulation; } .qc-time { font-size: var(--fs-56); font-weight: var(--fw-normal); font-variant-numeric: tabular-nums; letter-spacing: .02em; } .qc-date { font-size: var(--fs-15); color: var(--text-2); } /* ---- 照着用户的四张模板摆的几块（4.551）：样子跟第一页走 ---- */ /* 自己画的那几层卡与主屏的小组件卡同一套：白底、--r-lg、--shadow-2；铺了壁纸时换成同一层半透明 */ .dw-sf { background: var(--wg-solid); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; } :root[data-wallpaper="on"] .dw-sf { box-shadow: none; border: 1px solid var(--capsule-border); } .dw-photo { display: block; background: var(--surface-2) var(--dw-img, none) center / cover no-repeat; } /* 模板一：两张相框 */ .dw-tilt-back, .dw-tilt-front { position: absolute; display: block; box-sizing: border-box; padding: 6px; } .dw-tilt-back { left: 6%; top: 8%; width: 50%; height: 47%; transform: rotate(-12deg); } .dw-tilt-front { left: 42%; top: 36%; width: 54%; height: 60%; } .dw-tilt-back .dw-photo, .dw-tilt-front .dw-photo { width: 100%; height: 100%; border-radius: var(--r-md); } /* 模板一：两句 */ .dw-note-rows { display: flex; flex-direction: column; justify-content: space-around; flex: 1; min-height: 0; } .dw-note { display: flex; align-items: center; gap: 8px; min-width: 0; } .dw-note:where(.is-mine) { flex-direction: row-reverse; } .dw-note-face { width: 30px; height: 30px; } .dw-note-bubble { min-width: 0; padding: 6px 10px; border-radius: var(--r-lg); background: var(--dw-chip); font-size: var(--fs-13); color: var(--text); } /* 模板二：长卡，底下垫两层 */ .dw-rib { position: absolute; left: 4px; right: 4px; display: block; box-shadow: var(--dw-shadow); } .dw-rib-1 { top: 10%; height: 54%; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); box-sizing: border-box; border-radius: var(--r-full); } .dw-rib-2 { top: 14%; left: 6%; right: 6%; height: 56%; border-radius: var(--r-full); opacity: .7; } .dw-rib-3 { top: 18%; left: 10%; right: 10%; height: 58%; border-radius: var(--r-full); opacity: .4; } .dw-rib-pic { flex: none; height: 72%; aspect-ratio: 1; border-radius: 50%; } /* 一行高（4.552）：胶囊占满大半格，底下两层只露一道边 */ :where(.dw-ribbon.is-low) .dw-rib-1 { top: 6%; height: 70%; } :where(.dw-ribbon.is-low) .dw-rib-2 { top: 10%; height: 70%; } :where(.dw-ribbon.is-low) .dw-rib-3 { top: 14%; height: 70%; } .dw-rib-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .dw-rib-line { font-size: var(--fs-14); color: var(--text); } .dw-rib-by { font-size: var(--fs-12); color: var(--text-3); } /* 模板二：圆；模板三：照片卡 */ .dw-round { display: flex; align-items: center; justify-content: center; } /* 外面那一格会裁掉越界的部分：圆往里收一圈，阴影整个落在格子里，不被切成方的（用户：「圆被裁切在正方形里」） */ .dw-round-pic { width: calc(min(100cqw, 100cqh) - 24px); aspect-ratio: 1; border-radius: 50%; box-shadow: var(--dw-shadow); } .dw-square { padding: 0; } .dw-square-pic { width: 100%; height: 100%; } /* 模板二：双圆 */ .dw-duo { align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; } .dw-duo-line { max-width: 100%; font-size: var(--fs-12); color: var(--text-3); } .dw-duo-pair { display: flex; gap: 6px; justify-content: center; } .dw-duo-c { width: 52px; height: 52px; } .dw-duo-date { font-family: var(--font-display); font-size: var(--fs-24); font-weight: var(--fw-semi); line-height: 1.2; } /* 模板三：圆心 */ .dw-orbit { position: relative; padding: 0; } .dw-orbit-ring { position: absolute; left: 49%; top: 44%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed var(--border-2); } .dw-orbit-pic { position: absolute; left: 49%; top: 44%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; } .dw-orbit-tag { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 10px; border-radius: var(--r-full); background: var(--dw-chip); font-size: var(--fs-12); color: var(--text-2); } /* 毛玻璃开着时卡片里的气泡（字条、两句的对话泡）一起做模糊，和卡片同一层（用户：「毛玻璃的时候那几个气泡状的也要跟随」，4.563） */ :where(:root[data-wallpaper="on"][data-glass="on"]) .dw-orbit-tag { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } :where(:root[data-wallpaper="on"][data-glass="on"]) .dw-note-bubble { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } .dw-orbit-t1 { left: 7.6%; top: 14.7%; width: 31.7%; height: 11.4%; font-family: var(--font-display); font-size: var(--fs-15); font-weight: var(--fw-semi); color: var(--text); } .dw-orbit-t2 { left: 72.9%; top: 34.5%; width: 18.2%; height: 8%; padding: 0 4px; } .dw-orbit-t3 { left: 7.6%; top: 50.4%; width: 18.2%; height: 8%; padding: 0 4px; } .dw-orbit-t4 { left: 63.8%; top: 58.5%; width: 31.7%; height: 11.6%; } .dw-orbit-t5 { left: 8.4%; top: 81%; width: 82.6%; height: 8.2%; font-size: var(--fs-12); color: var(--text-2); } /* 模板四：四根竖条放四张图，铺满整行宽（用户：「宽一点的」） */ .dw-pillars { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--sp-3); padding: 8px 4px 14px; box-sizing: border-box; } .dw-pil { position: relative; height: 100%; border-radius: var(--r-full); box-shadow: var(--dw-shadow); } .dw-pil .dw-photo { position: absolute; inset: 0; } /* ---- 主屏液态玻璃（4.553，system/glasshome.js）：外壳在网页下面铺壁纸、画玻璃，网页这一页只画内容 ---- 底板与 glasshome.js 的 PANELS 一一对应。只在 iPhone app 开了开关、停在主屏时挂上；!important 是因为要压过 铺壁纸、毛玻璃那几条底色（选择器更长），而这一档是用户自己开的、只在外壳里有，美化在这一档里写不进底板是预期的 */ :where(:root[data-glass-home="on"]) body, :where(:root[data-glass-home="on"]) .root { background: transparent !important; } :where(:root[data-glass-home="on"]) .wallpaper { display: none !important; } :where(:root[data-glass-home="on"] .home-grid) .cell-widget:not(.is-bare), :where(:root[data-glass-home="on"] .home-grid) .app-tile:not(.has-image), :where(:root[data-glass-home="on"] .home-grid) .folder-tile, :where(:root[data-glass-dock="on"]) .dock-capsule, :where(:root[data-glass-dock="on"] .dock) .app-tile:not(.has-image), :where(:root[data-glass-home="on"] .home-grid) .dw-sf, :where(:root[data-glass-home="on"] .home-grid) .dw-card, :where(:root[data-glass-home="on"] .home-grid) .dw-orbit-tag, :where(:root[data-glass-home="on"] .home-grid) .dw-note-bubble { background: transparent !important; box-shadow: none !important; border-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 清透那一档（4.564）：系统的 clear 玻璃几乎不糊，黑字压在壁纸上看不清。主屏与底栏里的字、图标改成白色加一点阴影， 和系统主屏的透明图标一样。卡片里自己有底色的（照片、胶片、猫）不受影响：它们的字本来就画在自己的底上 */ /* 底栏那几块只在「底栏液态玻璃」也开着时才是玻璃（data-glass-dock，4.565），关着照旧由网页画 */ :where(:root[data-glass-home="on"][data-glass-style="clear"]) .home, :where(:root[data-glass-dock="on"][data-glass-style="clear"]) .dock { --text: var(--glass-ink); --text-2: var(--glass-ink-2); --text-3: var(--glass-ink-3); --border-2: var(--glass-line); --icon-color: var(--glass-ink); --ph-tile-name-color: var(--glass-ink); text-shadow: var(--glass-ink-shadow); } /* 图形照原生的透明图标（4.569）：亮白不透明，上缘亮、下缘暗、底下一层淡投影；默认占格子 60%（平时 52%），「图形大小」调过的照调过的 */ :where(:root[data-glass-home="on"][data-glass-style="clear"] .home) .app-tile svg, :where(:root[data-glass-dock="on"][data-glass-style="clear"] .dock) .app-tile svg { color: var(--glass-glyph); filter: url(#glyph-emboss); width: var(--tile-glyph, var(--ph-tile-glyph, 60%)); height: var(--tile-glyph, var(--ph-tile-glyph, 60%)); } /* 时差旋钮（4.614）：左边表盘，右边各时区一行；只选一个角色时右边是那一时段的日程 */ .zw { flex-direction: row; align-items: center; gap: var(--sp-3); padding: var(--sp-3); } .zw:where(.is-big) { flex-direction: column; align-items: stretch; } .zw:where(.is-narrow) { justify-content: center; } .zw-dial { position: relative; flex: none; height: 100%; aspect-ratio: 1; max-height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; } .zw:where(.is-big) .zw-dial { height: auto; width: 56%; align-self: center; } .zw-dial > svg { display: block; width: 100%; height: 100%; overflow: visible; } .zw-ring { fill: none; stroke: var(--border-2); stroke-width: 1; } .zw-tick { stroke: var(--text-3); stroke-width: .8; stroke-linecap: round; opacity: .5; } .zw-tick:where(.is-major) { stroke: var(--text-2); stroke-width: 1.4; opacity: 1; } .zw-num { fill: var(--text-3); font-size: 7.5px; text-anchor: middle; font-variant-numeric: tabular-nums; } .zw-hand > line { stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; } .zw-knob { fill: var(--surface); stroke: var(--text); stroke-width: 1.6; } .zw-now { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; padding: 4px 6px; border-radius: var(--r-md); background: transparent; color: var(--text); line-height: 1.1; } .zw-now-time { font-size: var(--fs-15); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; } .zw-now-sub { margin-top: 2px; font-size: var(--fs-11); color: var(--text-3); font-variant-numeric: tabular-nums; } .zw:where(.is-big) .zw-now-time { font-size: var(--fs-20); } .zw-rows, .zw-one { flex: 1; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .zw-rows { gap: 4px; justify-content: center; overflow-y: auto; scrollbar-width: none; } .zw-row { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-3); } .zw-row-main { flex: 1; min-width: 0; } .zw-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; } .zw-row-place { font-size: var(--fs-13); color: var(--text); } .zw-row:where(.is-me) .zw-row-place { color: var(--text-2); } .zw-row-day { flex: none; font-size: var(--fs-11); color: var(--text-3); } .zw-row-who { flex: none; display: inline-flex; gap: 2px; align-items: center; } .zw-row-time { flex: none; font-size: var(--fs-17); font-weight: var(--fw-semi); color: var(--text); font-variant-numeric: tabular-nums; } .zw-more { font-size: var(--fs-11); color: var(--text-3); } .zw-face { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--zw-img, var(--surface-2)) center / cover no-repeat; font-size: var(--fs-11); color: var(--text-2); overflow: hidden; } .zw-one { justify-content: center; gap: 2px; } .zw-one-head { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-13); color: var(--text-2); } .zw-one-time { font-size: var(--fs-28); font-weight: var(--fw-semi); line-height: 1.15; font-variant-numeric: tabular-nums; } .zw-one-time > span { margin-left: 6px; font-size: var(--fs-12); font-weight: var(--fw-regular); color: var(--text-3); } .zw-one-sub { font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zw-plan { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; } .zw-plan-row { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-13); color: var(--text); } .zw-plan-row > i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); transform: translateY(-2px); } .zw-plan-row > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zw-plan-row:where(.is-drop) > span { text-decoration: line-through; color: var(--text-3); } .zw-plan-row:where(.is-done) > span { color: var(--text-2); } .zw-plan-none { font-size: var(--fs-12); color: var(--text-3); } /* 编辑页、AI 生成页里的预览（4.893）：限高，居中 */ .wpk-box.wg-pv { margin: 0 auto; } .wg-size-chips { justify-content: center; padding: var(--sp-3) 0 var(--sp-1); } .wpk-note { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); padding-bottom: var(--sp-3); font-size: var(--fs-13); color: var(--text-3); } .wpk-note > .nav-text { flex: none; }