/* ========================================================================== 页面层 · 各视图专属样式 ========================================================================== */ /* ---------------------------------------------------------------- 档案馆首页 */ /* * 摘要 + 「概览」触发器那一行。 * * 离标题多远这一条外边距挂**在这一行**上，不挂在 .archive-summary 自己身上。 * 原来它是挂在摘要上的，而那是摘要还独占一行（.page-head__sub）时写的： * 进了 .row（align-items: center）之后，摘要的 margin 盒被行居中，正文因此 * 比按钮低半条外边距 —— 实测按钮比旁边那行字高出 4.0px， * 看起来就是"它一个人在上面一点"。 * * 取 --space-1（4px，和 .page-head__sub 同一个刻度）不是随手挑的： * 这一行的高度（30px）由按钮决定、正文只有 21px —— 居中之后正文的头顶 * 正好在这个数上落回原来那一格，所以**摘要那行字一个像素都没动**（实测 top 74.97px）， * 往下走的是按钮，它来就文字。整个页头的代价只是高了 4px（81.5 → 85.5）。 * * align-items 从 .row 的 center 改成 **baseline**：整行按"字压在同一条基线上"排。 * 居中对的是两个**盒子**的中心，而两个盒子不一样高（按钮 30px、正文 21px）、 * 字也不一样大（标签 12px、正文 13px），所以盒子对齐了字还能差半像素； * 基线的对齐才是眼睛看到的那条线。顺带解决另一种情况：摘要万一折成两行， * 按钮会跟**第一行**齐平，而不是漂在两行中间（那看着就是"没对齐"）。 * 实测这一行的高度两种对齐下都是 30px，页头高度不变。 * * 两个 gap 是分开给的，因为它们在两种排法下各管一件事： * column-gap 16px —— 同一行时，摘要文字到「概览」两个字的可见空档 * （按钮那 13px 内边距被下面那条负外边距挂到线外了， * 所以这里的数就是**眼睛看到的**空档，不再是 12+13=25px） * row-gap 4px —— 摘要折行、按钮掉到下一行时（手机上就是）， * 按钮盒里的标签上下各带约 15px 空气（44px 触控高度 − 19px 行盒）， * 所以这里给 4px，看到的才是约 19px，不是 30px */ .archive-head-sub { margin-top: var(--space-1); align-items: baseline; column-gap: var(--space-4); row-gap: var(--space-1); } .archive-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted-foreground); } .archive-summary b { font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; } .archive-summary__sep { color: var(--border-strong); } .archive-toolbar { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); } .archive-toolbar__row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .archive-toolbar__row .select, .toolbar-select { flex: 0 0 auto; width: auto; min-width: 7.5rem; } .archive-toolbar__row .input-icon { flex: 1 1 16rem; min-width: 12rem; } .filters { display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: calc(-1 * var(--space-1)); } .filters .grow { min-width: var(--space-2); } /* 换行时「多选」自动靠右，不会掉到左边显得像另一个筛选条件 */ .filters > .btn { margin-left: auto; } /* 状态筛选做成下划线页签：一排文字比一排胶囊更容易扫读，也不会和卡片抢注意力 */ .filters--tabs .chip { position: relative; padding: var(--space-2) 0; border: none; background: none; border-radius: 0; font-size: var(--text-sm); color: var(--muted-foreground); } .filters--tabs .chip + .chip { margin-left: var(--space-5); } @media (hover: hover) { .filters--tabs .chip:hover { color: var(--foreground); } } .filters--tabs .chip::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1.5px; background: transparent; border-radius: 2px; transition: background var(--dur-fast) var(--ease-out); } .filters--tabs .chip[aria-pressed="true"] { background: none; color: var(--foreground); font-weight: 600; } .filters--tabs .chip[aria-pressed="true"]::after { background: var(--primary); } .filters--tabs .chip[aria-pressed="true"] .chip__count { color: var(--primary); opacity: 1; } /* ---------------------------------------------------------------- 搜索 / 添加 */ .search-hero { margin-bottom: var(--space-6); } .search-hero__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; } .search-hero__sub { color: var(--muted-foreground); margin-top: var(--space-1); font-size: var(--text-sm); } .search-box { margin-top: var(--space-5); max-width: 42rem; } .search-box .input { min-height: 2.75rem; font-size: var(--text-base); border-radius: var(--radius-lg); padding-left: 2.75rem; } .search-box .input-icon > svg { left: var(--space-4); width: 1.125rem; height: 1.125rem; } .search-filters { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); max-width: 42rem; } .search-filters .select { width: 100%; } .result-list { display: flex; flex-direction: column; } .result-item { display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--border); transition: background var(--dur-fast) var(--ease-out); } .result-item:first-child { border-top: 1px solid var(--border); } @media (hover: hover) { .result-item:hover { background: color-mix(in srgb, var(--foreground) 3%, transparent); } } .result-item__poster { width: 3.75rem; flex-shrink: 0; } @media (min-width: 640px) { .result-item__poster { width: 4.25rem; } } .result-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); } .result-item__title { font-size: var(--text-base); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .result-item__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted-foreground); } .result-item__overview { font-size: var(--text-sm); color: var(--muted-foreground); } .result-item__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); } /* ---------------------------------------------------------------- 作品详情 */ .work-hero { margin-bottom: var(--space-6); } .work-hero__inner { display: flex; flex-direction: column; gap: var(--space-5); } @media (min-width: 768px) { .work-hero__inner { flex-direction: row; gap: var(--space-8); } } .work-hero__poster { width: 7rem; flex-shrink: 0; } @media (min-width: 768px) { .work-hero__poster { width: 10rem; } } .work-hero__poster .poster { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .work-hero__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); } .work-hero__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-tight); letter-spacing: -0.01em; } @media (min-width: 768px) { .work-hero__title { font-size: var(--text-3xl); } } .work-hero__original { color: var(--faint-foreground); font-size: var(--text-sm); } .work-hero__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--muted-foreground); } .work-hero__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); } .work-hero__overview { font-size: var(--text-sm); color: var(--muted-foreground); max-width: 46rem; padding-left: var(--space-4); border-left: 2px solid var(--border); } .work-hero__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); } .round-block { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .round-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--background); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .round-block__title { font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); } .round-block__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .timeline { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding-left: var(--space-5); } .timeline::before { content: ""; position: absolute; left: 3px; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--border); } .timeline__item { position: relative; } .timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--space-5) + 0px); top: 0.42rem; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--background); } .timeline__date { font-size: var(--text-xs); color: var(--faint-foreground); font-variant-numeric: tabular-nums; } .record-card { border-bottom: 1px solid var(--border); padding-block: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .record-card:last-child { border-bottom: none; } .record-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .record-card__meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted-foreground); } .record-card__meta > span { display: inline-flex; align-items: center; gap: var(--space-1); } .record-card__note { font-size: var(--text-sm); line-height: var(--leading-normal); white-space: pre-wrap; font-family: var(--font-display); } /* * 这里原来是一整段「配图墙」（.photo-wall / .photo-pin / .photo-pin__*）。 * * 整段删掉的原因：那面墙已经从「配图」页去掉了（用户原话「下面那个展开的去掉」 * 「下面那个没用」）—— 堆栈看的就是同一批照片，而且堆栈和观影记录是连着的， * 墙只是把同样的照片再铺一遍。逐张删除的能力挪进了全屏抽屉，功能没丢。 * 留着一整套没人用的选择器，下一个人会以为还有第二种照片视图。 */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-2); } .photo-tile { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--muted); cursor: zoom-in; } .photo-tile img { width: 100%; height: 100%; object-fit: cover; } .photo-tile__flag { position: absolute; top: var(--space-1); left: var(--space-1); } .photo-tile__del { position: absolute; top: var(--space-1); right: var(--space-1); width: 1.375rem; height: 1.375rem; border-radius: var(--radius-sm); background: rgb(0 0 0 / 0.62); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); } @media (hover: hover) { .photo-tile:hover .photo-tile__del, .photo-tile:focus-within .photo-tile__del { opacity: 1; } } .uploader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--muted-foreground); font-size: var(--text-sm); cursor: pointer; text-align: center; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } @media (hover: hover) { .uploader:hover, .uploader.is-dragover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); } } /* ---------------------------------------------------------------- 时间胶囊 */ .thread { position: relative; padding: var(--space-4) 0 var(--space-4) var(--space-5); border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: var(--space-3); } .thread--pending { border-left-style: dashed; border-left-color: var(--primary-line); } .thread__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted-foreground); } .thread__content { font-family: var(--font-display); font-size: var(--text-base); line-height: var(--leading-normal); white-space: pre-wrap; } .thread__answer { border-left: 2px solid var(--primary-line); padding-left: var(--space-3); font-size: var(--text-sm); color: var(--muted-foreground); white-space: pre-wrap; } .thread__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } /* ---------------------------------------------------------------- 问答 */ .question-item { padding: var(--space-4) 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-3); } .question-item:last-child { border-bottom: none; } .question-item__q { font-weight: 600; display: flex; align-items: flex-start; gap: var(--space-2); } .question-item__a { font-size: var(--text-sm); color: var(--muted-foreground); white-space: pre-wrap; border-left: 2px solid var(--border); padding-left: var(--space-3); } /* ---------------------------------------------------------------- 伴侣 / 关系 */ .entity-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-2); } .entity-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2); border-radius: var(--radius-md); } @media (hover: hover) { .entity-card:hover { background: var(--muted); } } .entity-card__avatar { width: 2.125rem; height: 2.125rem; border-radius: var(--radius-md); flex-shrink: 0; display: grid; place-items: center; font-weight: 600; background: var(--muted); color: var(--muted-foreground); font-size: var(--text-sm); } .entity-card__name { font-weight: 500; font-size: var(--text-sm); } .entity-card__role { font-size: var(--text-xs); color: var(--faint-foreground); } /* ---------------------------------------------------------------- 图谱 */ /* 工具栏与图例是绝对定位的，必须有这个 relative 容器兜住， 否则它们会相对视口定位、飘到页面右上角去。 */ .graph-stage { position: relative; } .graph-shell { position: relative; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--card); } .graph-canvas { width: 100%; height: clamp(22rem, 60dvh, 42rem); display: block; touch-action: none; cursor: grab; } .graph-canvas:active { cursor: grabbing; } .graph-toolbar { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); background: color-mix(in srgb, var(--popover) 90%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-1); } /* * 关系图那一屏：左图右表单的两栏工作台。 * * 宽度比例写在 CSS 里而不是 inline style 上，窄屏才有得改 * （内联样式特异性高过样式表，手机上塌不成一栏）。 */ .relations-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); } /* ------------------------------------------------------- 关系图 · 全屏查看 */ /* * "伪全屏"：铺满视口的一层浮层，不是浏览器的 requestFullscreen。 * * 为什么不用真全屏 API：真全屏会把整个应用（含"完成/清空"这些按钮和 * 右侧表单）一起放大，用户要的只是"把这张图单独拿出来看大一点"； * 而且 iOS Safari 对非视频元素的 requestFullscreen 支持一直不完整。 * * 层次：bar（标题 + ❌）/ body（画布）。stage 是同一个节点被搬进来的， * 所以进出的缩放、平移、选中状态都留着。 */ .graph-fullscreen { position: fixed; inset: 0; /* * 85 这个数是挑出来的，不是随手写的： * 要在宿主弹窗之上（--z-modal: 70），否则"铺满视口"会变成"铺满那个弹窗"； * 要在 toast 之下（--z-toast: 90）—— 全屏看图时后台同步失败、 * "已删除"这类提示必须还能看见，被浮层压住就等于没有； * 要在命令面板之下（--z-cmdk: 100），⌘K 仍然能把面板叫到最上面。 * * 这一档给"宿主本身是弹窗"的图（角色关系图）。宿主是页面里一块的 * （作品星系 / 共看关系网）用下面那个 --page 变体，见那里的说明。 */ z-index: 85; display: flex; flex-direction: column; background: var(--background); color: var(--foreground); animation: fa-fade-in var(--dur-normal) var(--ease-out) both; /* * 底部安全区（iPhone 的小白条）。 * * 不留给它的话画布会一直铺到屏幕最下沿 —— 而那一小条是**系统截走触摸**的， * 单手拿手机时拇指正好落在那里：在图上拖拽平移会变成"上滑回桌面"。 * box-sizing 是 border-box、元素又是 fixed inset:0，所以这条 padding * 只是把 .graph-fullscreen__body（flex: 1）挤矮 34px， * 浮层总高仍然等于视口高度，不会多出滚动条。 * 实测（CDP 覆写刘海 47 / 手势条 34）：画布底边从 844 → 810，正好让开手势条。 */ padding-bottom: env(safe-area-inset-bottom, 0px); } /* * 宿主是"页面里的一块"时（作品星系、共看关系网），浮层**故意压在弹窗之下**。 * * 因为图里双击一个节点会开出作品详情弹窗（--z-modal: 70）：浮层要是比它高， * 那个弹窗会被整个盖住 —— 用户看到的是"双击没反应"，其实弹窗已经开了、 * 焦点也被它抓走了，人在一个看不见的对话框里按键盘。 * * 65 仍然高过导航(40)、吸顶条(20)、弹窗遮罩(60)，"盖住应用其他一切"照样成立； * 低于 toast(90) 和命令面板(100)，提示和 ⌘K 也不会被吃掉。 */ .graph-fullscreen--page { z-index: 65; } .graph-fullscreen__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5); border-bottom: 1px solid var(--border); background: var(--card); padding-top: max(var(--space-2), env(safe-area-inset-top)); } .graph-fullscreen__title { font-size: var(--text-sm); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .graph-fullscreen__hint { flex: 1 1 auto; min-width: 0; font-size: var(--text-2xs); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * ✕ 必须永远贴在右上角。 * * 电脑上把 ✕ 顶到最右边的是它前面那条 hint（flex: 1 1 auto 会吃掉剩余空间）， * 而手机档把 hint 收掉了（见下面 768 那段）—— 于是窄屏上没有人再吃空间， * 这一列就变成"标题 + ✕"从左往右挨着排，✕ 落在半空中： * 实测 390 宽下它的右边缘在 217px，而不是贴着 390。 * margin-inline-start: auto 让 ✕ 自己吃掉剩余空间，与 hint 在不在无关。 */ .graph-fullscreen__close { flex: 0 0 auto; margin-inline-start: auto; } /* 画布宿主必须是"有确定高度"的那一层，否则 canvas 的 height:100% 无从计算 */ .graph-fullscreen__body { position: relative; flex: 1 1 auto; min-height: 0; } .graph-stage--full { position: absolute; inset: 0; } .graph-stage--full .graph-shell { height: 100%; border: 0; border-radius: 0; } .graph-stage--full .graph-canvas { height: 100%; } .graph-legend { position: absolute; left: var(--space-3); bottom: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); max-width: calc(100% - var(--space-6)); background: color-mix(in srgb, var(--popover) 90%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-2xs); color: var(--muted-foreground); } .legend-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; } /* 群体颜色的小圆点：和图上角色外圈的环是同一个色 */ .group-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(128,128,128,0.25); } /* 右侧列表行：指上去有个底色，暗示"这一行和左边联动" */ .relation-row { border-radius: var(--radius-sm); padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; } @media (hover: hover) { .relation-row:hover { background: var(--muted); } } /* 角色关系图用圆点大小区分主次，所以图例也要能显示两种大小 */ .legend-dot--lg { width: 0.72rem; height: 0.72rem; } /* 线的颜色区分关系性质：实线 / 虚线两段，外加一个分隔符和群体光晕示意 */ .legend-line { width: 1.1rem; height: 2px; border-radius: 2px; flex-shrink: 0; } .legend-line--dash { background-image: linear-gradient(90deg, currentColor 0 55%, transparent 55% 100%); background-size: 8px 2px; background-repeat: repeat-x; } .legend-sep { width: 1px; height: 0.85rem; background: var(--border); } .legend-hull { width: 1rem; height: 0.72rem; border-radius: var(--radius-sm); border: 1px dashed var(--muted-foreground); background: color-mix(in srgb, var(--muted-foreground) 10%, transparent); } .graph-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); box-shadow: var(--shadow-lg); max-width: 16rem; } /* ------------------------------------------------- 关系图 · 手机竖屏 */ /* * 关系图这一屏的手机档规则**只有这一处**（连"两栏塌成一栏"也在）， * 不散在 mobile.css 里。 * * 理由："这一屏在手机上长什么样"是一件事 —— 几栏、画布多高、工具条横排还是 * 竖排、全屏那层的标题怎么收 —— 分成两个文件之后，改的人要同时知道 * "mobile.css 后加载会赢"这条隐含规则，才能判断哪条生效。 * * 位置也有讲究：这一段必须排在**所有 `.graph-*` / `.legend-*` 普通规则之后**。 * 同特异性时后者胜，写在前面的话上面那条 `.graph-legend { … padding … }` * 会把它盖掉（tools/check.mjs 有一条"响应式失效"专门抓这个，第一版就是这么被抓的）。 */ @media (max-width: 900px) { /* * 两栏工作台塌成一栏：图在上、表单在下。 * * 不塌的话，390px 宽的手机上左边只剩 ~250px 给画布、右边 ~125px 给表单 —— * 图看不清、表单里的输入框窄到打不了字，两边都废。 * `.relations-split` 这个类名是为它加的：原来宽度比例内联写在 style 上， * 内联样式赢过样式表，窄屏根本盖不住。 */ .relations-split { grid-template-columns: minmax(0, 1fr); } /* * 画布高度：竖屏下 60dvh（约 506px）太高 —— 弹窗本身是底部抽屉， * 92dvh 里塞进 506px 的图之后，下面"关系表单"基本看不见， * 用户得先滚过一整屏图才够得着编辑区。压到 46dvh 让两者同屏。 */ .graph-canvas { height: clamp(18rem, 46dvh, 28rem); } /* * 工具条：电脑上是右上角竖排一列，手机上一列在触控尺寸下要占 * 4×44 + 间距 ≈ 198px —— 一半的画布。横排一行只占 54px 高 * （实测三个按钮 150×54），而图的内容本来就在中间，横排更划算。 */ .graph-toolbar { flex-direction: row; } .graph-legend { gap: var(--space-1) var(--space-3); padding: var(--space-1) var(--space-2); } } @media (max-width: 768px) { /* 全屏那层的副标题在窄屏上会把标题挤成省略号，直接收掉 */ .graph-fullscreen__hint { display: none; } .graph-fullscreen__bar { padding-left: var(--space-4); } } /* ---------------------------------------------------------------- 观影宇宙 */ /* 目录式索引：一行一个去处，比 2x2 大卡片更容易扫读，也不占满首屏 */ .hub-list { border-top: 1px solid var(--border); } .hub-row { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-2); border-bottom: 1px solid var(--border); transition: background var(--dur-fast) var(--ease-out); } @media (hover: hover) { .hub-row:hover { background: color-mix(in srgb, var(--foreground) 3%, transparent); } } .hub-row__icon { flex-shrink: 0; width: 1.25rem; color: var(--faint-foreground); margin-top: 0.15rem; } @media (hover: hover) { .hub-row:hover .hub-row__icon { color: var(--primary); } } .hub-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); } .hub-row__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; } .hub-row__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; } .hub-row__meta { font-size: var(--text-xs); color: var(--faint-foreground); font-variant-numeric: tabular-nums; } .hub-row__desc { font-size: var(--text-sm); color: var(--muted-foreground); max-width: 42rem; } .hub-row__go { flex-shrink: 0; align-self: center; color: var(--faint-foreground); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } @media (hover: hover) { .hub-row:hover .hub-row__go { color: var(--primary); transform: translateX(3px); } } /* ---------------------------------------------------------------- 年刊 */ .yearbook { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--card); } .yearbook__cover { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-10) var(--space-8); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--foreground) 2.5%, var(--card)); } .yearbook__year { font-family: var(--font-display); font-size: clamp(3rem, 11vw, 5.5rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.04em; color: var(--foreground); } .yearbook__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; } .yearbook__section { padding: var(--space-6) var(--space-8); border-top: 1px solid var(--border); } .yearbook__section:first-of-type { border-top: none; } .yearbook__section-title { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-5); display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; } /* * 月度足迹的柱子。 * * 原来这里是内联的 `transition: height …`，**一次都没播过** —— * 柱子是每次 render 用 h() 新建的元素，而 render() 内部是 * container.replaceChildren()（core/dom.js）：旧节点被整体换掉， * 新元素没有"旧值"，transition 需要同一元素上的旧值→新值才会触发。 * * 所以改用 @keyframes：动画在元素插入时就会开始播，不需要旧值。 * animation-fill-mode: both 是关键 —— 它让 element 在 animation-delay 那段 * 等待期里保持 from 帧（scaleY(0)），否则柱子会先满高闪一下再缩回去。 * * 动 scaleY 而不是 height：height 每帧都要重排这一列的兄弟节点， * scaleY 走合成层。柱子的 height 仍然由内联样式给最终值，动画只负责"立起来"这个过程。 * * 时长走 --dur-reveal（tokens.css），它在 prefers-reduced-motion 里会被压到 1ms。 */ .yearbook__bar { transform-origin: bottom; animation: fa-bar-rise var(--dur-reveal) var(--ease-out) both; } @keyframes fa-bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } .quote-wall { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .quote-wall { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .quote-wall { grid-template-columns: repeat(3, 1fr); } } .quote-card { padding: var(--space-4) 0 0; border-top: 2px solid var(--border); display: flex; flex-direction: column; gap: var(--space-3); } .quote-card__text { font-family: var(--font-display); font-size: var(--text-base); line-height: var(--leading-normal); white-space: pre-wrap; } .quote-card__from { font-size: var(--text-xs); color: var(--faint-foreground); } .bar-list { display: flex; flex-direction: column; gap: var(--space-3); } .bar-row { display: grid; grid-template-columns: minmax(4rem, 9rem) 1fr auto; align-items: center; gap: var(--space-3); font-size: var(--text-sm); } .bar-row__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); } .bar-row__track { height: 4px; border-radius: var(--radius-full); background: var(--muted); overflow: hidden; } .bar-row__fill { height: 100%; border-radius: var(--radius-full); background: var(--primary); transition: width var(--dur-slow) var(--ease-out); } .bar-row__value { font-variant-numeric: tabular-nums; color: var(--faint-foreground); font-size: var(--text-xs); min-width: 2.25rem; text-align: right; } /* ---------------------------------------------------------------- 档案馆 · 数据栏（原设置页「概览」） */ /* * 八个数字 + 三块分布从设置页搬到了档案馆页（js/views/archive.js）。 * * **排版必须在这里重写一遍**：原来那些数字的字号挂在 .settings-page 底下 * （`.settings-page .settings-stats .stat__value`，那批规则已随「概览」从本文件删掉）， * 搬到档案馆页之后那些覆盖一条都不再生效 —— 只剩 app.css 里的基础 .stat（text-xl）， * 八个数字会一起缩小，主次（馆藏作品最大）也跟着没了。 * * 取向照旧：不做"KPI 卡片"，只有数字和细间距 —— 和 app.css 的 .stat-strip 一致 * （那段注释写着这个应用的数据栏该是"一本刊物的数据栏，而不是仪表盘卡片"）。 * * 展开 / 收起是一段**高度过渡**（js 那边量真实内容高度，见 archive.js 的 slideStats）： * 外层只负责高度、被动画改的就是它；内容全在里面那层 __inner 上。 * 分两层是为了"压到 0 也能量准"—— 外层被压成 0 高时，__inner 照样按自己的内容排。 */ .archive-stats { display: block; /* * 高度是这一页唯一的过渡属性，而且**只有展开 / 收起时才会被改**： * 平常内联样式是空的，高度就是 auto（数据变了高度跟着变，不会被钉死）。 * * 时长与曲线走 --dur-disclose / --ease-in-out，**不是** --dur-slow / --ease-out： * 后者前 3 帧就走掉 60%，450px 的面板单帧最多跳 138px（占总高的 31%）—— * 眼睛读到的就是"内容突然出现"，用户报的正是这个。这一档单帧最多约 8%， * 每一帧都看得出空间在长，整段也只要 400ms。 * * 「减少动态效果」下 --dur-disclose 被压到 1ms，js 那边还有一条 REDUCE 短路 —— * 两条路都到得了终止态，而且都不是"动得轻一点"，是不动。 */ transition: height var(--dur-disclose) var(--ease-in-out); } /* * 收起时必须是真的收起。 * 上面给了 display，hidden 属性（UA 的 display:none）会被它盖掉，收起后 * 会留一个空壳占着位置 —— 和 .settings-panel[hidden] 是同一个坑、同一个写法。 */ .archive-stats[hidden] { display: none; } /* * 内容那一层：**永远是内容的真实高度**，不参与外层的收缩。 * 下面这块底距从外层挪到了这里（原来是 .archive-stats 的 margin-bottom）： * 挂在外层的话，收起（display: none）时它整块消失、展开时又整块冒出来， * 页面在动画之外还会**多跳 20px**；放进内层就成了被量进去的高度， * 跟内容一起让出来。外层也因此不该再有外边距。 */ .archive-stats__inner { display: flex; flex-direction: column; gap: var(--space-6); padding-bottom: var(--space-5); flex: none; } /* * 数字格。 * 窄屏两列：馆藏作品（hero）和"看过的"（wide）各占满一整行，其余两两一排。 * 2 + 2 + 6 = 10 格 = 5 行整，不留空格子。 */ .archive-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-5); } .archive-stats__hero { grid-column: span 2; } .archive-stats__wide { grid-column: span 2; } .archive-stats .stat__value { font-size: var(--text-2xl); } .archive-stats__hero .stat__value { font-size: var(--text-3xl); } /* * 三块分布。 * auto-fit + 每块自己定宽（≤34rem）而不是让格子拉伸： * 里面是 .bar-row 的进度条，一条拉到 1000px 以上，"谁长谁短"反而看不出来。 * 宽屏三块并排、窄屏自然落成一列。 */ .archive-stats__dists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6) var(--space-8); } .archive-stats__dist { min-width: 0; max-width: 34rem; } .archive-stats__dist-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3); } /* * 分布里的进度条：标签列收窄一档，数值列照旧。 * 只写在 .archive-stats__dist 作用域内 —— .bar-row 是年刊页、作品页共用的 * 基础规则（上面那三条），改它会把那两页一起动掉。 */ .archive-stats__dist .bar-row { grid-template-columns: minmax(3.5rem, 7rem) minmax(0, 1fr) auto; gap: var(--space-3); } /* 一份数据都没有时的空状态（档案馆页的主状态之一，按正经内容做，不做成一行灰字） */ .archive-stats__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } /* 空状态里那两句是"标题 + 说明"（archive.js 里是两个裸

，没有类名）： 第一行给一层主标题的分量，第二行是被压下去的说明 */ .archive-stats__empty p { font-size: var(--text-sm); color: var(--muted-foreground); max-width: 34rem; text-wrap: pretty; } .archive-stats__empty p:first-child { font-size: var(--text-base); font-weight: 600; color: var(--foreground); } /* * 摘要行右边那个展开 / 收起按钮。 * 状态只写在 aria-expanded 上（没有 .is-open 之类的类），所以箭头旋转也认它 —— * 一旦有人把它换成 class，这里会立刻看得出来（箭头不动了），不会静默失效。 * * 箭头是 trailing 的（archive.js 用 iconRight 给），所以下面这条选择器不用改： * 它认的是按钮里那个 svg，不认它在文字前面还是后面。 * 转的是 180°（收起朝下、展开朝上），用的是**和面板高度同一个时长与曲线** —— * 两个字要一起动完才读成一次状态切换；箭头 110ms 就转完、面板 400ms 才长完的话， * 眼睛看到的是两件事，而不是"同一个内容被打开了"。 * * 字号跟摘要同一档（--text-sm = 13px，.btn--sm 默认是 --text-xs = 12px）： * 它和那行字读起来得是**同一条线上的东西**。小一号的标签摆在同一行里， * 即使基线对齐了，看起来也像"另贴上去的一个小东西"，而不是那行字的一部分。 * * margin-inline 那条负外边距是"对齐"的关键，两件事一起解决： * · 同一行时：按钮自带 13px 横向内边距（12 padding + 1 border），那是**底色**的边距、 * 不是文字的边距。不抵消的话，摘要文字到「概览」会空出 25px（12 行距 + 13 内边距）， * 而眼睛只认文字到文字。抵消掉之后，行上的 column-gap 就是看到的那条空档。 * · 换行时（手机上按钮掉到第二行）：文字会正好压在行的左边缘上，跟上面那行字对齐 —— * 不抵消就是缩进 13px，看着"歪了一点"（用户报的就是这个）。 * 底色因此是**对称地挂在文字两边**的，hover 不会只往一边扑。 * 注意：这个 13px 是 .btn--sm 的 padding-inline + .btn 的 1px 边框推出来的， * 哪天动了那两个数，这里也要跟着动。 */ .archive-stats-toggle { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); margin-inline: calc(-1 * (var(--space-3) + 1px)); color: var(--muted-foreground); } @media (hover: hover) { .archive-stats-toggle:hover { color: var(--foreground); } } /* 和 .archive-stats 的 transition 必须是**同一条**：同一个时长、同一条曲线。 改一处忘了另一处，箭头和面板就会各走各的（一个转完了一个还在长）。 */ .archive-stats-toggle svg { transition: transform var(--dur-disclose) var(--ease-in-out); } .archive-stats-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* * 宽屏：三列。 * hero 仍然占两格 —— 2（hero）+ 1（wide）+ 6 = 9 格 = 3×3 整，正好铺满。 */ @media (min-width: 1024px) { .archive-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); } .archive-stats__wide { grid-column: auto; } .archive-stats__hero .stat__value { font-size: var(--text-4xl); } } /* ---------------------------------------------------------------- 排列方式 */ /* * 工具栏右边那一颗「排列」触发器 + 它下面那块面板（八种排法、两个类别）。 * * 三层高度过渡（面板、两个类别的说明、以及三个箭头）**必须是同一条时长与曲线** —— * 那个数只在 tokens.css 的 --dur-disclose 里，js 那边（ui/disclose.js）也只有兜底 * 一个同名常量。箭头 110ms 就转完、面板 400ms 才长完的话，眼睛看到的是两件事， * 而不是"同一个内容被打开了"（「概览」那一轮踩过，注释留在 archive.js 里）。 * * finesse · register=product · shell=档案馆主页不变（页头 + 工具栏 + 网格区） * · palette=inherited（一个色值都没加，选项卡只用 --card/--border/--primary*） * · type=不改刻度（沿用 --text-xs/sm/base 三档） * · layout=C 轴：**同一批数据换八种编排** —— 平面两种（网格 / 列表）+ 空间六种 * · engine=D 轴：CSS 3D（perspective + preserve-3d）+ 手写 rAF，零依赖、零动画库 * · material=E 轴：卡片从"平铺的格子"变成**可以被拿起来的物件**（抬起 / 归位 / 转动） * · SOUL=6 SPECTACLE=6 DENSITY=7 */ /* 触发器：和「概览」同一档字号（--text-sm），因为它在工具栏里要跟筛选器读成一行 */ .archive-layout-toggle { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted-foreground); } @media (hover: hover) { .archive-layout-toggle:hover { color: var(--foreground); } } /* * 箭头只转**最后那一颗** svg。 * 这颗按钮左边还有一个"当前排法"的图标（网格 / 扇形 / 星球…）， * 写 `svg` 会把两颗一起转 180° —— 那颗图标看着就像倒过来了。 */ .archive-layout-toggle svg, .arrange-group__head svg { transition: transform var(--dur-disclose) var(--ease-in-out); } .archive-layout-toggle[aria-expanded="true"] svg:last-of-type, .arrange-group__head[aria-expanded="true"] svg { transform: rotate(180deg); } /* 面板：外层只管高度，内容是 __inner 的真实高度（见 ui/disclose.js 的契约） */ .archive-arrange { display: block; transition: height var(--dur-disclose) var(--ease-in-out); } /* 收起时必须是真的收起：上面给了 display，hidden 属性（UA 的 display:none）会被它盖掉 */ .archive-arrange[hidden] { display: none; } .archive-arrange__inner { display: flex; flex-direction: column; padding-bottom: var(--space-5); border-top: 1px solid var(--border); } /* 一个类别 = 一行可折叠的说明 */ .arrange-group { border-bottom: 1px solid var(--border); } .arrange-group__head { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 2.75rem; /* 44px：触控下限，手机上这一行要能点中 */ padding: var(--space-3) 0; text-align: start; font-size: var(--text-sm); color: var(--muted-foreground); } @media (hover: hover) { .arrange-group__head:hover { color: var(--foreground); } } .arrange-group__title { font-weight: 600; color: var(--foreground); } /* 「现在用的是哪一种」：收起时这一行唯一的实质信息，所以给它正常字色而不是灰的 */ .arrange-group__current { color: var(--muted-foreground); } /* 箭头钉在整行的最右缘：它是"这一行下面还有东西"的尾巴，不是跟在文字后面的标点 */ .arrange-group__head svg { margin-inline-start: auto; flex: 0 0 auto; color: var(--faint-foreground); } .arrange-group__body { display: block; transition: height var(--dur-disclose) var(--ease-in-out); } .arrange-group__body[hidden] { display: none; } .arrange-group__inner { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-5); } /* 说明文字：一整段话，不切成列表 —— 它回答的是"这两种有什么区别、什么时候用" */ .arrange-group__note { font-size: var(--text-sm); color: var(--muted-foreground); max-width: 46rem; text-wrap: pretty; } /* 选项：一类里的几种排法 */ .arrange-options { display: grid; /* * 10rem 是量出来的：探索排列有 6 种，桌面上这一行正好排满 6 个（一屏看完， * 不用横着找）；手机上落成两列、每个 165px，说明文字还读得下去。 * 写成 13.5rem 的话桌面上每行只放得下 5 个，第 6 个（波浪矩阵）会孤零零换行。 */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-2); } .arrange-option { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); text-align: start; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } @media (hover: hover) { .arrange-option:hover { border-color: var(--border-strong); } } /* 当前这一种：主色边框 + 主色底 + 一颗勾。三样一起说，不靠单一颜色 */ .arrange-option.is-active { border-color: var(--primary-line); background: var(--primary-soft); } .arrange-option__icon { flex: 0 0 auto; margin-top: 1px; color: var(--muted-foreground); } .arrange-option.is-active .arrange-option__icon { color: var(--primary); } .arrange-option__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .arrange-option__label { font-size: var(--text-sm); font-weight: 600; } .arrange-option__hint { font-size: var(--text-xs); color: var(--muted-foreground); text-wrap: pretty; } .arrange-option__check { flex: 0 0 auto; margin-inline-start: auto; color: var(--primary); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); } .arrange-option.is-active .arrange-option__check { opacity: 1; } /* ---------------------------------------------------------------- 空间舞台 */ /* * 六种探索排法的画布。 * * 舞台高度按排法定：扇形要向上散开、螺旋要往上盘，都比波浪矩阵高一截。 * 用 dvh 而不是 vh —— 手机地址栏收放时 vh 不会变，舞台会比屏幕还高。 * * 透视给**相机层**（.stage__camera）、preserve-3d 给里面那层：一个灭点， * 整片卡片在同一个空间里。卡片各自给透视的话，每张的灭点都不一样， * 一屏卡片像被拧过（app.css 的 .grid-auto 那段注释是同一个道理）。 * * 相机层隔出来是为了**平移**：把整台构图摆到舞台正中，得在透视**外面**做， * 否则位移会跟着每张卡的 z 一起被透视除掉（前后两张移的量不一样 = 把它拧斜）。 */ .stage-wrap { display: flex; flex-direction: column; gap: var(--space-2); } :root { /* * 「扇形展开那一档的舞台高度」提成变量：它是**选中那张的基准大小**的来源 * （见 js/ui/stage.js 的 focusCardWidth）。 * * 为什么 JS 不自己写一遍 clamp(...dvh...)：dvh 到底等于多少浏览器说了算， * 手机上还随地址栏伸缩 —— JS 里那份必然对不上（实测移动模拟里 window.innerHeight * 报的是内容高度，1212/1041/886，每种排法一个数，于是基准也跟着每种排法一个数）。 * 所以 JS 挂一个用这条变量的隐藏元素去**量**。 */ --stage-h-fan: clamp(19rem, 54dvh, 32rem); /* * 「圆柱环绕那一档」的舞台高度 —— **电脑端选中那张的基准**，也是所有排法的基础高度 * （圆柱自己不覆盖 --stage-h，用的就是这一条）。 * 用户的原话：「电脑端最好的应该是圆柱，因为圆柱这个位置和大小应该是最好的…… * 就把它拉正，就像圆柱这样的一个位置和大小。」 * 圆柱和扇形一样，卡片高都占自己舞台高的 66%，所以两档的差别只在这条高度上。 */ --stage-h-cylinder: clamp(18rem, 50dvh, 30rem); /* * 「波浪矩阵那一档」的舞台高度 —— 手机端"卡片大小以波浪为准"那条要用它去算波浪的卡片。 * 用户的原话：「我说的是波浪吧？我说的是跟波浪的那个大小都一样……每个统一就统一。」 */ --stage-h-wave: clamp(17rem, 48dvh, 29rem); /* * 「球面那一档」的舞台高度 —— **电脑端"统一卡片大小"的基准**（球面的半径从它算）。 * 用户：「电脑端就以球面那个大小为主。」 */ --stage-h-sphere: clamp(20rem, 50dvh, 30rem); } /* 只用来量的探针：和扇形展开的舞台一样高，不参与排版也不接指针 */ .stage-probe { position: absolute; left: -9999px; top: 0; width: 1px; height: var(--stage-h-fan); visibility: hidden; pointer-events: none; } .stage-probe--wave { height: var(--stage-h-wave); } .stage-probe--sphere { height: var(--stage-h-sphere); } .stage { /* * 舞台高度：**这一轮整体调高了一档**（用户："探索排列这些布局都有点小"）。 * * 六种几何里，半径和卡片大小都是从舞台的宽高里倒推的 —— 舞台矮，整台东西就小。 * 现在按视口高度给（dvh），桌面上大约半屏、手机上大约半屏多一点； * 上限卡住是因为再高就会把分页条整个推到屏幕外，反而不好翻页。 */ --stage-h: var(--stage-h-cylinder); position: relative; height: var(--stage-h); /* * 手机上竖向还能滚页面，横向才归拖动。 * 写成 none 的话，手指落在卡片上就滚不动页面了 —— 那是最容易被当成"页面卡住"的一种写法。 */ touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .stage[data-arrangement="fan"] { --stage-h: var(--stage-h-fan); } .stage[data-arrangement="depth"] { --stage-h: clamp(18rem, 52dvh, 30rem); } .stage[data-arrangement="sphere"] { --stage-h: var(--stage-h-sphere); } .stage[data-arrangement="helix"] { --stage-h: clamp(20rem, 56dvh, 33rem); } .stage[data-arrangement="wave"] { --stage-h: var(--stage-h-wave); } .stage__camera { position: absolute; inset: 0; /* * 相机与 space **不接指针**：整台构图被 scale 放大、又被相机平移之后， * 它们的**命中盒子**会跟着变大、可能盖到工具栏上 —— * 表现就是"点了某个排法之后，档案馆的按钮全点不动了"。 * 只留 .stage 自己那一块（正好是舞台的大小）接指针。 */ pointer-events: none; /* 透视在这一层：它同时也是"把构图平移到正中"的那一层（纯屏幕位移，见 stage.js） */ perspective: 1200px; perspective-origin: 50% 42%; transform-style: preserve-3d; transition: transform var(--dur-normal) var(--ease-out); } .stage__space { position: absolute; inset: 0; pointer-events: none; /* 同上：接指针的只有 .stage 那一块 */ transform-style: preserve-3d; /* 拖动 / 惯性期间这一条会被 .is-dragging 关掉，否则卡片慢半拍（跟手才是手感） */ transition: transform var(--dur-normal) var(--ease-out); } .stage.is-dragging { cursor: grabbing; } .stage.is-dragging .stage__space, .stage.is-dragging .stage__card { transition: none; } /* * 每档"飞到正中"的那一下，用的节奏**跟着几何走**（用户："因为排版不同，所以做的交互 * 也是不同的……每次点开它都会到一样的位置，但确实动作是不一样的……这个动作是根据 * 排版来的，没有强行加绚丽的动作"）。 * * 动作本身就来自起始矩阵的差别：转盘上的三种要从**旋转的面上甩出来**（同时把朝向转正）， * 扇形要从**弧上抬起来并转正**，纵深是**从自己那一层往前抽**，波浪是**从起伏里浮起来**。 * 这里只调时长与缓动，让这四种"手感"各自站得住： * · 转盘三种（圆柱/球面/螺旋）：走得久一点，缓动带一点过冲 —— "甩出来、再定住" * · 扇形：中等，稳稳收住 * · 纵深：短而干脆 —— 往前抽不需要铺垫 * · 波浪：**不覆盖**，用默认那档。它每帧都在重画 transform（起伏）， * 拉长会让整片浪糊掉。 */ .stage { --focus-dur: var(--dur-normal); --focus-ease: var(--ease-out); } .stage[data-arrangement="fan"] { --focus-dur: 260ms; } .stage[data-arrangement="depth"] { --focus-dur: 220ms; } .stage[data-arrangement="cylinder"] { --focus-dur: 340ms; --focus-ease: cubic-bezier(0.3, 1.2, 0.5, 1); } .stage[data-arrangement="sphere"] { --focus-dur: 360ms; --focus-ease: cubic-bezier(0.3, 1.2, 0.5, 1); } .stage[data-arrangement="helix"] { --focus-dur: 340ms; --focus-ease: cubic-bezier(0.3, 1.2, 0.5, 1); } /* * 一张卡。 * * 定位靠 left/top 50% + 自己的 `translate(-50%,-50%)`（transform 由 js 拼）， * 所以旋转、外推、抬起全在一句话里，不会和定位打架。 * 宽度由 js 按量到的舞台宽度写内联（见 stage.js 的 measure），这里只给一个兜底。 */ .stage__card { position: absolute; left: 50%; top: 50%; display: block; width: 8rem; border-radius: var(--radius-md); /* * **卡片不接指针事件**，点击统一落到舞台上，由 js 自己算命中 * （见 ui/stage-math.js 的文件头：Chrome 在 preserve-3d 里只认得出最前面那一张卡， * 实测 12 张里只有 1 张点得中）。 * 键盘不受影响：pointer-events: none 只挡指针，Tab 与 Enter 照旧。 */ pointer-events: none; transition: transform var(--focus-dur) var(--focus-ease), opacity var(--dur-normal) var(--ease-out); } /* 不转的那三种：整块舞台都是"可以点的卡片"，指针就是手 */ .stage[data-arrangement="fan"], .stage[data-arrangement="depth"], .stage[data-arrangement="wave"] { cursor: pointer; } /* 能拖的三种：默认张开手，拖住时握起来（.is-dragging 在下面） */ .stage[data-arrangement="cylinder"], .stage[data-arrangement="sphere"], .stage[data-arrangement="helix"] { cursor: grab; } .stage__card .poster { box-shadow: var(--shadow-md); } .stage__card.is-focused .poster { box-shadow: var(--shadow-xl); } .stage__card:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } /* * 背对镜头的卡片要真的看不见。 * 圆柱 / 球面 / 螺旋是**围起来**的：转过去的那一半背面朝人， * 不隐藏的话它们会以镜像的样子透在前面 —— 遮挡关系（"远处被近处挡住"）就假了。 */ .stage[data-arrangement="cylinder"] .stage__card, .stage[data-arrangement="sphere"] .stage__card, .stage[data-arrangement="helix"] .stage__card { backface-visibility: hidden; } /* * 选中的那一张抬起来之后，其余的往后退一档。 * 只给三种"平面感"的排法（扇形 / 纵深 / 波浪）：它们本来就靠前后堆叠区分， * 而圆柱那三种的远近由 3D 自己说，再压一层透明度就浑浊了。 */ .stage[data-arrangement="fan"] .stage__card.is-behind, .stage[data-arrangement="depth"] .stage__card.is-behind, .stage[data-arrangement="wave"] .stage__card.is-behind { opacity: 0.6; } /* 卡面上的片名：字很小是因为卡片本身只有 58–132px 宽，标题只是"这是哪一部"的线索 */ .stage__card-title { font-size: var(--text-2xs); font-weight: 600; line-height: var(--leading-snug); } .stage__card-overlay { gap: var(--space-1); } /* * 舞台底下那一行：没选中时是手势提示，选中后换成片名 + 「详情」。 * * 高度**常驻**（min-height），不是"出现时把页面往下推一下"—— * 舞台是个固定高度的盒子，脚下一行忽有忽无会让整页跳一格。 */ .stage__bar { display: flex; align-items: center; min-height: 2.75rem; } .stage__hint { font-size: var(--text-xs); color: var(--muted-foreground); } .stage__focus { display: flex; align-items: center; gap: var(--space-3); width: 100%; } .stage__focus-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .stage__focus-title { font-size: var(--text-sm); font-weight: 600; } .stage__focus-meta { font-size: var(--text-xs); color: var(--muted-foreground); } .stage__focus-hint { font-size: var(--text-xs); color: var(--faint-foreground); margin-inline-start: auto; } .stage__detail { flex: 0 0 auto; } @media (max-width: 640px) { /* 手机上这一行留给片名和按钮：那句"再点一次…"挤不下，交互提示已在上面的 act 里说过 */ .stage__focus-hint { display: none; } } /* ---------------------------------------------------------------- 回收箱 */ .trash-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border); } .trash-item:first-child { border-top: 1px solid var(--border); } .trash-item__poster { width: 2.5rem; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; } .trash-item__body { flex: 1 1 auto; min-width: 0; } /* ---------------------------------------------------------------- 设置 */ .settings-section { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); } .settings-section__title { font-size: var(--text-base); font-weight: 600; } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .settings-row__label { font-size: var(--text-sm); font-weight: 500; } .settings-row__desc { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: 2px; } .accent-picker { display: flex; flex-wrap: wrap; gap: var(--space-3); } .accent-swatch { width: 1.875rem; height: 1.875rem; border-radius: var(--radius-md); position: relative; border: 1px solid rgb(0 0 0 / 0.12); transition: transform var(--dur-fast) var(--ease-out); } @media (hover: hover) { .accent-swatch:hover { transform: scale(1.08); } } .accent-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--foreground); } .accent-swatch[aria-checked="true"]::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 58% no-repeat; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.55)); } .avatar-edit { position: relative; width: 4rem; height: 4rem; flex-shrink: 0; } .avatar-edit__img { width: 100%; height: 100%; border-radius: var(--radius-lg); object-fit: cover; background: var(--muted); } .avatar-edit__fallback { width: 100%; height: 100%; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--muted); color: var(--muted-foreground); font-size: var(--text-xl); font-family: var(--font-display); font-weight: 600; } .avatar-edit__btn { position: absolute; right: -6px; bottom: -6px; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-md); background: var(--foreground); color: var(--background); display: grid; place-items: center; border: 2px solid var(--card); } /* ========================================================================== 设置页 · #/profile -------------------------------------------------------------------------- 这一段的类名**全部挂在 .settings-page 底下**（这个页面自己的根，见 js/views/profile.js 的 renderPage）。这一点是刻意的：invite.js 也在用 .settings-section / .settings-row，它的样子由上面那几条基础规则说了算， 这里一条都不改 —— 设置页换了皮，邀请页一个字不动。 配色只用现有令牌（--card / --border / --primary* / --destructive）—— 三套主题 + 可换主色都得成立，所以"层次"是靠间距、不透明度、1px 线和 玻璃令牌做出来的，不引入第二套色板。 骨架：**一张清单 + 一次只开一块**。 手机 清单是整页，点一行 → 清单收起、那一块占满（.settings-page[data-pushed="true"]） 电脑 清单缩成左边一列，右边直接是选中那块（同一份 DOM，两种摆法） 九块内容一直挂在那儿，只切 hidden —— 所以切来切去不丢任何正在编辑的东西。 finesse · register=product · shell=master-detail（清单 + 面板） · palette=inherited(tokens) · SOUL=5 SPECTACLE=2 DENSITY=7 ========================================================================== */ /* ---------------------------------------------------------------- 页头 */ /* * 这里原本有一条 `.page-head:has(+ .settings-page)` 覆盖，用来修一个布局事故： * 带返回的页头是两个 flex item（「‹ 返回」+「标题」），被 space-between 推到 * 同一行两端，标题因此右对齐、和下面左对齐的清单打架。 * * 现在**根因没了**：设置页页头不再放返回（理由见 profile.js 里那段注释 —— * 它和底栏/侧栏的「设置」重复，又落在手机上最容易误触的左上角，还会把 * "敲回车才存"的输入静默丢掉）。页头只剩「标题 + 副标题」一个 flex item， * space-between 对单个子元素不起作用，标题自然贴左缘，不需要任何覆盖。 * * 邀请页、回收箱、作品页、年刊、伙伴页仍带返回，那边保持原样、一行未动。 */ /* ---------------------------------------------------------------- 页面骨架 */ /* * ============================================================ 视觉语言 * * 这一页前三轮（v37 五区索引 / v38 换骨架 / v39 收窄单列）都在解决**秩序**： * 先把长滚动切成一屏清单，再把宽度收到 40rem、把行高压到 56px。 * 秩序对了，但用户仍然说「太普通、没有重点、没什么新奇」—— * 因为三轮的 soul/spectacle 都取的 5/2，也就是每轮都主动选了"最没个性"那一档， * 配色一律 inherited、排版一个字没动。秩序不等于设计。 * * 这一轮补的是**视觉语言**，方向是「接触印相样张（contact sheet）」： * · 胶片是**黑的**，不是米色做旧的。所以配色仍然全部继承（三主题 × 8 主色 * 必须自动成立），个性做在层级、排版、结构上，不靠发明一套新配色 —— * 这也避开了本项目记录在案的"二阶默认：档案馆=做旧（米色纸+牛皮纸+衬线大标题）"。 * · **等宽字承担元数据**：像样张边上的片号、拍摄参数。所有小标签统一走 * --font-mono + 大字距 + 小字号，它们一眼就和正文分开，读者知道那是"标注"。 * · **全站一支黑体**（--font-display 已改成黑体，见 tokens.css）： * 宋体被用户否掉了 —— 那是写字的字体，界面字号下笔画会糊， * 而且和正文混排像两套东西拼的。层级改由字号与字重承担。 * · **编号是结构，不是装饰**：每块面板顶上有个片号（设置 · 01 / 08）， * 编号来自 CSS 计数器，随板块增删自动走，不需要在 JS 里维护一份序号。 * · 分隔用发丝线（1px --border），不用卡片套卡片 —— 盒子只会让一页重新变挤。 */ .settings-page { display: block; } .settings-page__panels { min-width: 0; } /* * 这一页通用的"标注"字样：等宽、小、字距拉开、颜色退后。 * 单独抽出来是因为片号、小节标题、字段名、快捷键名、存储分组名都要用它 —— * 全页只有一种"标注腔调"，才像同一份文档。 */ .settings-page .settings-block__title, .settings-page .settings-field__head > .settings-field__label, .settings-page .storage-group__title, .settings-page .settings-shortcuts > * > span:first-child { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); } /* ---------------------------------------------------------------- 清单 */ /* * 清单不只是目录，**它是这一页的状态板**：每行右边写着这一项现在的样子 * （「浅色 · 铜绿」「已使用 1.3 MB」「记录只在这台设备上」）。 * 一屏之内就知道自己叫什么、什么主题、占了多少、登没登录、TMDB 配没配、 * 馆藏多大 —— 这些信息原来散在四千多像素的长滚动里。 * * v40 的样子：不再是一张"卡片里塞八行"，而是**一张索引**。 * 行与行之间一条发丝线，外面那圈边框去掉 —— 去掉盒子的那一刻， * 页面就从"一堆控件"变成"一份文档"。 * * （v44 曾给每行加过一个 01…08 的片号，v45 删掉：见下面那段说明。） */ .settings-page .settings-nav__list { display: flex; flex-direction: column; } /* * 位置读数（"你看到第几块"）。**只有电脑档有**，样子在下面 ≥1024px 那一段。 * * 手机上这里必须整个不显示：手机档的清单是一整页、点进去面板头就写着 * 「设置 · 02 / 08」，同一件事在同一个视口里说两遍。手机和电脑是同一份 * DOM 的两种摆法，所以"关掉"写在基础规则里、由电脑档那条打开， * 而不是反过来 —— 反过来的话手机档会先按电脑档画一帧（那正是这段布局 * 一直在躲的事）。 */ .settings-page .settings-nav__position { display: none; } .settings-page .settings-nav__item { position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 3.5rem; padding: var(--space-3) 0; text-align: left; color: inherit; border-bottom: 1px solid var(--border); transition: background var(--dur-fast) var(--ease-out); } .settings-page .settings-nav__item:last-child { border-bottom: 0; } @media (hover: hover) { .settings-page .settings-nav__item:hover { background: var(--accent); } } /* 全宽的列表行用内缩的焦点环（base.css 那条是 offset +2，会把环压到相邻行上） */ .settings-page .settings-nav__item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } /* * 片号：**只留在面板里，清单上不留**。 * * 清单原来也有一列 01…08。那是形式主义 —— 面板头上「设置 · 02 / 08」 * 有意义（你在第几块、一共几块），而清单上那个号**什么也不回答**： * 它不是步骤、不是优先级、也没有顺序含义，八行读下来只是多了八个数字。 * 用户直接点名了这一处。删掉之后每行的左缘回到文字本身，也更安静。 * * 计数器和 ::before 整块撤掉；下面 .settings-nav__item 的内边距与 gap * 相应收一档（少了 20px 的号位列 + 12px 的间距）。 */ /* * 分组：只留空白，不加行、不加标题、不改结构。 * * 清单连成一片"实心墙"的原因不是行高，是**每一行都长得一模一样、行距也一样**： * 眼睛找不到可以停下来的地方。按用途切成四段 —— 你自己（个人信息 / 外观）、 * 数据与资料（存储 / 备份 / 账号 / 影片资料）、更多与关于、危险操作。 * * 分组点挑的是 storage / about / danger 这三行，**没有挂在概览（stats）上** —— * 概览那一行已经搬去档案馆页（见 .archive-stats）。 */ .settings-page .settings-nav__item[data-view="storage"], .settings-page .settings-nav__item[data-view="about"], .settings-page .settings-nav__item[data-view="danger"] { margin-top: var(--space-5); border-top: 1px solid var(--border); padding-top: var(--space-4); } /* * 分组交界处只能有一条线。 * * 分组行自己加了 border-top，而它上面那一行仍有 border-bottom —— 两行之间 * 隔着 --space-5(20px) 的空白，于是同一个分组边界画出**两条并排的发丝线** * （放大截图里能直接数出来，读起来像漏删了一条）。 * 行挨着行（间距 0）时两条线重合看不出来，只有分组处才暴露。 * * 收紧办法：让"分隔行"自己那条线负责，把紧邻它的上一行的下边线收掉。 * 用 :has() 一次覆盖三个分组点，不必各写一份。:has() 在本项目有先例 * （mobile.css 的 body:has(.bulkbar)）。 */ .settings-page .settings-nav__item:has(+ .settings-nav__item[data-view="storage"]), .settings-page .settings-nav__item:has(+ .settings-nav__item[data-view="about"]), .settings-page .settings-nav__item:has(+ .settings-nav__item[data-view="danger"]) { border-bottom-color: transparent; } /* * 图标退到"标记"的位置：比正文暗、比片号亮，不参与竞争。 * 原来它是 32px 的实底方块，八行排下来是一片灰格子墙 —— 和"安静"是反的。 * 现在只留字形本身，底色全去；当前项才给它主色。 */ .settings-page .settings-nav__icon { flex: 0 0 auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--faint-foreground); transition: color var(--dur-fast) var(--ease-out); } .settings-page .settings-nav__text { flex: 1 1 auto; min-width: 0; } .settings-page .settings-nav__label { display: block; font-size: var(--text-base); font-weight: 500; letter-spacing: -0.005em; /* 紧凑行高是行高压到 56px 的另一半：默认 1.62 的行盒把这一行顶到 24px */ line-height: var(--leading-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * 摘要走等宽 —— 它写的是"当前值"（浅色 · 铜绿 / 1.3 MB / 25 部）， * 本质是元数据。等宽字让八行的数字列天然对齐（tabular-nums）， * 也让它和上面的名称一眼分开，不必靠颜色区分。 */ .settings-page .settings-nav__summary { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-foreground); /* * 字距只给拉丁文。其它"标注"（小节标题、字段名）是纯 CJK 或短词， * 拉开的字距好看；但摘要里常有「邀请朋友 · 回收箱 · 快捷键」这种长中文串， * 0.12em 会把 11px 的字撑宽约 8%，正是英文档那几行被切掉的最后一根稻草。 * 这里收到 0.02em —— 等宽的"标注腔调"靠字体本身就能立住，不需要字距帮忙。 */ letter-spacing: 0.02em; font-variant-numeric: tabular-nums; line-height: var(--leading-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-page .settings-nav__chevron { flex: 0 0 auto; color: var(--faint-foreground); } /* * 当前那一行。 * * 编号转主色 + 名称加重 + 一点底色，就够了 —— 全页只有一处是"当前"。 * * 试过再加一根行首的主色竖线，**实测是错的**：它和编号抢同一块位置， * 把数字压成了「)7」，而且两个标记说同一件事。app.css 的注释里本来就 * 点名否掉"侧边彩色竖条"那套做法 —— 这次是实测证明了它，不是照搬规则。 */ .settings-page .settings-nav__item[aria-current="true"] { background: var(--secondary); } .settings-page .settings-nav__item[aria-current="true"]::before { color: var(--primary); } .settings-page .settings-nav__item[aria-current="true"] .settings-nav__label { font-weight: 600; } .settings-page .settings-nav__item[aria-current="true"] .settings-nav__icon { color: var(--primary); } /* 危险操作那一行：一眼能认出来，但不刺眼 */ .settings-page .settings-nav__item--danger .settings-nav__icon { color: var(--destructive); } .settings-page .settings-nav__item--danger .settings-nav__label { color: var(--destructive); } /* ---------------------------------------------------------------- 面板 */ .settings-page .settings-panel[hidden] { display: none; } .settings-page .settings-panel { display: flex; flex-direction: column; gap: var(--space-6); } /* * 面板头：一块的"抬头"。 * * 上面那条通栏的 ::before 是**片号**（设置 · 01 / 08），由下面 panel__index 那个 * 元素提供内容；这一层负责把它排成一小行等宽标签，再让标题以大字压住版面。 * * 标题走 --font-display，而它现在是**黑体**（见 tokens.css 里那段说明： * 用户否掉了宋体）。层级不靠换字形，靠字号与字重 —— 标题 24px/600 * 压在 13px 的正文之上，对比足够，不需要另一支字体来撑。 */ .settings-page .settings-panel__head { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .settings-page .settings-panel__index { font-family: var(--font-mono); font-size: var(--text-2xs); /* * 字距只给数字和斜杠，**不摊到中文上**。 * * 这条原来是 0.14em 的整串字距。西文小字拉开字距是对的（那是"标注"的腔调）， * 但「设置 · 02 / 08」里有中文，CJK 字面本来就填满字身，再拉 0.14em * 就成了「设 置 · 02 / 08」——放大看是散的。 * 现在把字距下沉到那个数字片段自己的元素上（.settings-panel__count）， * 中文按原样排。 */ letter-spacing: normal; /* 数字对齐：等宽字撤掉之后，2/8 这类数字要靠 tabular-nums 才不会左右跳 */ font-variant-numeric: tabular-nums; color: var(--faint-foreground); } .settings-page .settings-panel__count { letter-spacing: 0.14em; } .settings-page .settings-panel__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: 0.01em; line-height: var(--leading-tight); text-wrap: balance; /* 它是被程序聚焦的（切面板时把读屏/键盘用户送到这儿），不是 Tab 到的一站， 所以不画焦点环 —— "你在哪"由整块面板换掉来说 */ outline: none; } /* * 面板内的返回。 * * 手机上是**这一级的返回**（回清单）。页头那个「返回」已经删掉（见 profile.js * 里那段说明：和底栏/侧栏的「设置」重复、落在最容易误触的左上角）。 * 触控目标按 44px 起（手机上这类"上一级"必须够得着）。 */ .settings-page .settings-panel__back { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; min-height: 2.75rem; margin-left: calc(var(--space-2) * -1); padding: 0 var(--space-2); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--muted-foreground); transition: color var(--dur-fast) var(--ease-out); } @media (hover: hover) { .settings-page .settings-panel__back:hover { color: var(--foreground); } } .settings-page .settings-panel__body { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; /* * 单列正文：正文最宽 40rem，贴内容区左缘。 * * 这里**不写断点**是故意的 —— max-width 只在"容器比 40rem 还宽"时才起作用， * 窄窗口和手机天然就是满宽，写进媒体查询反而要多维护一套。 * * 原来这条上限是 46rem，而且写在 ≥1024px 那一档的 * `.settings-panel:not(.settings-panel--stats)` 里。那个 :not() 是死选择器： * js 里没有任何一处加过 settings-panel--stats（panel() 只加 --danger）， * 所以它等于全部面板；留着只会把这里的 40rem 盖掉。 */ max-width: 40rem; } /* ---------------------------------------------------------------- 块 */ /* * 面板里的每一块不再自带盒子：分隔靠间距和一条细线。 * 类名仍是 .settings-section（别的页面也在用这个类名，这里只做页面内的覆盖）。 * * 间距节奏（这一页统一按这四档，不再处处 --space-5 / --space-6）： * 组内 8px 标签 → 控件（.settings-field） * 组间 12px 同一块里的几个小节（这里） * 块间 20px 一个表单里的几件事（.settings-fields） * 大块 24px 面板里的一块 → 下一块（.settings-panel__body） */ .settings-page .settings-section { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; border: 0; border-radius: 0; background: none; } .settings-page .settings-section__note { font-size: var(--text-xs); color: var(--muted-foreground); line-height: var(--leading-normal); text-wrap: pretty; } .settings-page .settings-block__title { font-size: var(--text-sm); font-weight: 600; } /* ---------------------------------------------------------------- 事实行 */ /* * 「标签 — 一句状态 — 动作」的一行。 * * 解决的是**面板里空**：备份那块原来只有一段说明 + 五个按钮平铺， * 却占着 640×500 的空场，上半截堆一坨、下面全空（用户说"里面还是很一般"）。 * 根因不是排版，是**内容没有形状** —— 五个按钮是平权的，谁在管什么看不出来。 * * 现在每一行自带三样：等宽小标签（这一行管什么）、一句**由数据算出来的**状态、 * 以及挂在这一行上的动作。于是不点进面板也能从状态那句话知道现在什么情况， * 而按钮不再是一坨，它们各自有归属。 * * 这一行不是列表项，是**读数**：标签在左、动作在右、状态贴着动作， * 中间留白由 flex 吸收（和 .storage-row 同一套阅读顺序，但更紧凑）。 * 类名用 settings-fact 而不是 settings-row —— 后者在本文件 607 行起是 * **别的页面也在用的基础规则**，不能占。 */ .settings-page .settings-facts { display: flex; flex-direction: column; } .settings-page .settings-fact { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .settings-page .settings-fact:last-child { border-bottom: 0; } /* * 标签和状态都贴顶，不垂直居中。 * * 有一行的状态是整句说明（会折成两行），居中之后那个小标签会浮在两句之间， * 和上下两行的标签不在一条线上 —— 一列标签歪了，整张表就散了。 * 贴顶之后三个标签左缘、顶缘都在一条线上，第二行起就读成一张真正的表。 */ .settings-page .settings-fact__label { flex: 0 0 auto; width: 4.5rem; align-self: flex-start; padding-top: 1px; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.02em; color: var(--muted-foreground); } .settings-page .settings-fact__value { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); line-height: var(--leading-snug); overflow-wrap: anywhere; } .settings-page .settings-fact__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; align-self: flex-start; justify-content: flex-end; } /* * 状态里带一个头像 + 两行（名字在上、状态在下）时用这两个： * 名字要有分量，状态要退后 —— 和整页"标签弱、读数强"的层级一致。 * 两者都必须 display:block，否则它们是行内 span，会挤成一行。 */ .settings-page .settings-fact__strong { display: block; font-weight: 600; } .settings-page .settings-fact__sub { display: block; font-size: var(--text-xs); color: var(--muted-foreground); margin-top: 1px; } /* 手机档：标签独占一行，动作换到下面，别把一行挤成三截 */ @media (max-width: 768px) { .settings-page .settings-fact { flex-wrap: wrap; gap: var(--space-2) var(--space-3); } .settings-page .settings-fact__label { width: auto; } .settings-page .settings-fact__value { flex-basis: 100%; order: 3; } .settings-page .settings-fact__actions { flex: 1 1 auto; justify-content: flex-start; } } /* ---------------------------------------------------------------- 快捷键 */ /* * 这一段原来**一条规则都没有**。 * * .settings-shortcuts 是个裸 div（display:block），里面九行 .row-between 各自为政： * 左边一个标签、右边一颗键帽，键帽宽度随内容变（实测 89 / 58 / 30 / 17px）。 * 右缘虽然都贴到面板右边，左缘却参差不齐 —— 就是"键帽在右侧竖着叠、 * 无对齐无容器"那个观感；而且九行之间一点缝都没有（22px × 9 连成一片）。 * * 现在每一行是两列网格：名称 1fr、键帽 auto 且固定宽度 ⇒ 九颗键帽左右两缘都对齐。 * 键帽是"等宽字 + 内边距 + 淡底 + 细边"，底色走 --muted、边线走 --border， * 三套主题都成立；不是透明底的描边方框。 */ .settings-page .settings-shortcuts { display: grid; gap: var(--space-1) 0; } .settings-page .settings-shortcuts > * { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); } .settings-page .settings-shortcuts kbd { width: 6.5rem; text-align: center; white-space: nowrap; padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted); color: var(--foreground); font-family: var(--font-mono); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; } /* 表单块（标题在上、控件在下，整行宽） */ .settings-page .settings-field { display: flex; flex-direction: column; gap: var(--space-2); } .settings-page .settings-field__head { display: flex; flex-direction: column; gap: 2px; } .settings-page .settings-fields { display: flex; flex-direction: column; gap: var(--space-5); } .settings-page .settings-note { display: flex; flex-direction: column; gap: var(--space-2); } /* 块内间距由 flex gap 管，分隔线自己不再上下各留一段 */ .settings-page .divider { margin-block: 0; } /* ---------------------------------------------------------------- 签名块 */ /* * 这一页唯一的"展示"时刻。昵称本来就要署在年刊的落款上， * 所以给它最大的字号、最重的字重 —— 全页只有这一处是"展示"。 */ .settings-page .settings-signature { display: flex; align-items: center; gap: var(--space-4); } .settings-page .settings-signature__text { min-width: 0; } .settings-page .settings-signature__name { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-tight); letter-spacing: -0.01em; overflow-wrap: anywhere; /* 长昵称不许把面板撑破 */ } .settings-page .settings-signature__hint { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: var(--space-1); } /* ---------------------------------------------------------------- 外观 */ /* * 主题：**三张圆角卡片 → 一条编号条目**。 * * 原来这里是三张 112×52 的圆角卡（图标 + 居中标签），是 iOS 设置 / * shadcn 示例里出现频率最高的那一款。它不算难看，问题在于**它和左边刚建立 * 的索引腔调毫无关系**：左边是等宽片号 + 发丝线 + 无边框，右边突然变成三个 * 带边框的圆角盒子 —— 一页里两套语言，整屏最"通用"的就是这一处。 * * 现在它和清单说同一种话：三个**挨着排的条目**，各自带一个等宽片号 * （01 / 02 / 03，CSS 计数器），条目之间用发丝线分，没有边框、没有圆角、 * 没有居中 —— 内容左对齐，和清单行同一个左缘。 * * 类名仍是 .segmented / .segmented__item —— 冒烟按它找「浅色 / 深色 / 午夜黑」。 */ .settings-page .settings-section--appearance .segmented--themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; max-width: 26rem; padding: 0; background: none; border-radius: 0; counter-reset: theme-index; border-top: 1px solid var(--border); } .settings-page .settings-section--appearance .segmented__item { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 3rem; padding: var(--space-3) var(--space-2) var(--space-3) 0; border: 0; border-radius: 0; background: none; color: var(--muted-foreground); font-size: var(--text-sm); text-align: left; white-space: normal; /* 基础规则是 nowrap，条目里要允许换行 */ } /* 片号：和左侧清单同一个计数器手法、同一个宽度节奏 */ .settings-page .settings-section--appearance .segmented__item::before { counter-increment: theme-index; content: counter(theme-index, decimal-leading-zero); flex: 0 0 auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xs); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--faint-foreground); transition: color var(--dur-fast) var(--ease-out); } .settings-page .settings-section--appearance .segmented__label { text-align: left; } /* 图标退成标记，和清单行里的图标一个位置、一个分量 */ .settings-page .settings-section--appearance .segmented__item svg { flex: 0 0 auto; opacity: 0.85; } .settings-page .settings-section--appearance .segmented__item[aria-selected="true"] { color: var(--foreground); font-weight: 600; box-shadow: none; } .settings-page .settings-section--appearance .segmented__item[aria-selected="true"]::before { color: var(--primary); } .settings-page .settings-section--appearance .segmented__item[aria-selected="true"] svg { color: var(--primary); opacity: 1; } @media (hover: hover) { .settings-page .settings-section--appearance .segmented__item:hover { color: var(--foreground); } } /* ---------------------------------------------------------------- 语言 */ /* * 语言：**主题那条编号轨道，原样再用一次**。 * * 改之前这里是一个原生