dsh-arknights-theme 1.0.4 → 1.1.0

package/README.md

@@ -16,7 +16,7 @@ a coat of theme paint.
 **预构建包（推荐） / Prebuilt tarball (recommended)**
 
 ```sh
-dsh plugin add https://github.com/Theflowyears/dsh-arknights-theme/releases/download/v1.0.4/dsh-arknights-theme-1.0.4.tgz
+dsh plugin add https://github.com/Theflowyears/dsh-arknights-theme/releases/download/v1.1.0/dsh-arknights-theme-1.1.0.tgz
 ```
 
 **从仓库安装 / From the repository**
@@ -95,7 +95,7 @@ This is the manual: what the package is made of, what is measured per wallpaper,
 glyph is used, how to rebuild it, and where its limits are. Installation and the highlight reel
 live on the repository front page.
 
-- 版本 / Version: **1.0.4**
+- 版本 / Version: **1.1.0**
 - 适用 / Requires: DSH Web，`@deepseek-ai/cordis` 4.x
 - 许可 / Licence: 代码 MIT，美术素材不在 MIT 范围内（见 [版权与署名](#版权与署名--rights-and-credit)）
 
@@ -152,6 +152,28 @@ Twelve, each measured once at import time, with the result recorded in `assets/w
 实测范围 / Measured ranges: `blurSigma` 16.7–33.3 · `featherRatio` 0.110–0.147 ·
 `saturation` 0.07–0.42 · 12 张 / 12 images, 7.9 MiB 包内 / inside the package.
 
+### 导入自己的图 / Import your own
+
+选择器底部有一行「＋ 导入本地图片」：PNG / JPEG / WebP / GIF / AVIF，单张 ≤ 24 MB，最多 24 张。
+There is a "＋ 导入本地图片" row under the picker's grid: PNG / JPEG / WebP / GIF / AVIF, up to
+24 MB per file, 24 pictures kept.
+
+**导入即解算，用的就是上面那套数字。** 解算器的常量由构建注入（`SOLVER`），页面里的算术是逐行移植，
+所以一张你自己的图会和内置十二张走完全相同的路径——同样的玻璃区间、同样的 OKLCH 墨色求解、同样的
+分析标签（`横屏 · 中间调 · 中饱和 · 暖红`）——而不是"先放着，以后再算"。
+**Solved on import, with the same numbers.** The solver's constants are injected by the build and the
+arithmetic is ported line for line, so your picture goes through exactly the path the shipped twelve
+did: same glass band, same OKLCH ink solve, same analysis label. `check-solver-parity.mjs` compares
+the two implementations number for number on every build.
+
+图片存在 `%TEMP%/dsh-amiya-wallpaper-user`（按内容哈希命名），**不在包目录里**，所以升级或重装不会
+丢，也不会把用户自己的图打进发布的 tarball。文件名不落盘：只有你自己输入的标题会被保存，否则
+显示「导入 01」——相册里的文件名不该出现在别人能读的地方。
+Pictures live in `%TEMP%/dsh-amiya-wallpaper-user`, named by content hash, **outside the package**, so
+they survive an upgrade and can never be swept into a published tarball. File names are not stored:
+only a caption you type is kept, otherwise the row is numbered — a camera roll's names have no
+business being readable by anything else.
+
 ---
 
 ## 可读性是算出来的 / Readability is solved, not guessed
@@ -309,8 +331,14 @@ rather than spread across the twelve files as a guess.
   The picker chrome, settings screen and dialogs are only re-coloured — their layout is the
   host's own, and stays that way.
 - 壁纸按宽屏与窄屏两种裁切生成；极端超宽比例下会以 `cover` 填充并依赖边缘虚化遮住裁切。
+  导入的图片**不做两种裁切**：它们是原图，两种比例都指向同一个文件，靠 `cover` 填充。
   Two cuts are generated; at extreme aspect ratios the picture is `cover`-fitted and the edge
-  blur hides the crop.
+  blur hides the crop. An imported picture has no second cut — both aspect cases point at the same
+  file and `cover` does the fitting.
+- 导入的图存在临时目录里。系统清理 `%TEMP%` 会把它们一并清掉——这是有意的取舍：它们不该住在
+  包目录或 profile 状态里。
+  Imported pictures live in the temp directory, so a system cleanup of `%TEMP%` takes them too.
+  That is the intended trade: they belong neither in the package directory nor in profile state.
 - 本仓库的构建产物经过量化验收（对比度矩阵、资源完整性、结构检查），但**没有任何自动化测试
   能代替肉眼**：配色是否好看，最终以你眼睛为准。
   The build is verified quantitatively (contrast matrix, asset integrity, structural checks),

package/assets/skin.css

@@ -62,7 +62,11 @@ html[data-amiya-skin='1'] body::before {
   background-size: cover, cover, cover;
   background-position: center center, center center, center center;
   background-repeat: no-repeat, no-repeat, no-repeat;
-  background-attachment: fixed, fixed, fixed;
+  /* No `background-attachment: fixed` here. It used to be declared, and it was pure cost: this layer
+     is already `position: fixed` and viewport-sized, so its padding box never scrolls — the attachment
+     only made the compositor re-resolve the background against the scroll offset on every frame. On a
+     desktop-sized (or 5K) window over a 2560px picture that is the most expensive thing on the page,
+     and it bought nothing. */
 }
 
 /* The generated assets come in a 16:9 and a 3:4 cut. Below 3:2 the wide cut would
@@ -1039,6 +1043,110 @@ html[data-amiya-skin='1'] body:not([data-ds-dark-theme]) .amiya-dock {
   color: rgb(198 206 216 / 74%);
 }
 
+/* --- 20b. Importing a local picture ----------------------------------------------- */
+/* The picker's own row, between the grid and the immersion dial: one button, one hidden file input,
+   and a line of status. It sits inside the picker rather than in the host's chrome because the picker
+   is already the "which picture" surface — a second entry point for the same question would be the
+   confusing shape, not the convenient one. */
+.amiya-picker__import {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px 12px;
+  border-bottom: 1px solid rgb(242 181 68 / 12%);
+}
+/* The native control is the only thing on the page that can open a file dialog, so it stays in the
+   DOM — just not in the layout, and out of the tab order (the button beside it takes the focus). */
+.amiya-picker__file {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.amiya-picker__import-btn {
+  flex: none;
+  padding: 7px 14px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  color: rgb(255 214 140 / 96%);
+  background: rgb(242 181 68 / 12%);
+  border: 1px solid rgb(242 181 68 / 40%);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.amiya-picker__import-btn:hover:not(:disabled) {
+  color: rgb(255 226 168);
+  background: rgb(242 181 68 / 22%);
+  border-color: rgb(242 181 68 / 70%);
+}
+.amiya-picker__import-btn:disabled {
+  cursor: progress;
+  color: rgb(242 181 68 / 60%);
+  border-color: rgb(242 181 68 / 26%);
+}
+.amiya-picker__import-hint {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  line-height: 1.6;
+  color: rgb(198 206 216 / 76%);
+  text-overflow: ellipsis;
+}
+.amiya-picker__import-hint.is-error {
+  color: rgb(242 140 128 / 92%);
+}
+
+/* An imported cell is marked, and carries its own remove control: the shipped twelve can be chosen
+   but not deleted, and the two must not look alike. */
+.amiya-picker__cell.is-imported {
+  border-color: rgb(143 208 255 / 40%);
+}
+.amiya-picker__cell.is-imported:hover {
+  border-color: rgb(143 208 255 / 72%);
+}
+.amiya-picker__cell.is-imported.is-active {
+  border-color: rgb(143 208 255 / 86%);
+  box-shadow:
+    0 0 0 1px rgb(143 208 255 / 34%),
+    0 10px 26px -14px rgb(143 208 255 / 50%);
+}
+.amiya-picker__remove {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  font-size: 11px;
+  line-height: 1;
+  color: rgb(255 255 255 / 92%);
+  background: rgb(4 6 9 / 78%);
+  border: 1px solid rgb(242 140 128 / 52%);
+  border-radius: 7px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 140ms ease, background 140ms ease, border-color 140ms ease;
+}
+/* Revealed on hover *and* on keyboard focus, so it is not a mouse-only affordance. */
+.amiya-picker__cell:hover .amiya-picker__remove,
+.amiya-picker__cell:focus-within .amiya-picker__remove,
+.amiya-picker__remove:focus-visible {
+  opacity: 1;
+}
+.amiya-picker__remove:hover {
+  background: rgb(122 32 24 / 92%);
+  border-color: rgb(242 140 128 / 88%);
+}
+
 /* --- 21. The illustrator credit, collapsed ---------------------------------------- */
 /* A native <details>, so "折叠" costs no state and no keyboard handling of its own: the
    summary is the disclosure, the list is its content, and the whole thing stays out of
@@ -1748,7 +1856,7 @@ html[data-amiya-skin='1'] body:not([data-ds-dark-theme]) [data-approval-key] [cl
   filter: drop-shadow(0 0 0.5px rgb(74 44 0)) drop-shadow(0 0 0.5px rgb(74 44 0));
 }
 
-/* --- 23. The question card is signed too ------------------------------------------ */
+/* --- 22b. The question card is signed too ------------------------------------------ */
 /* The card that offers the user a choice ends in two buttons — 跳过本题 and 提交 — inside
    `footerActions`, and it is anchored by its own `data-question-key` (the question flow's
    root). Same treatment as the approval panel: each signature rides *inside* its button
@@ -1796,3 +1904,170 @@ html[data-amiya-skin='1'] [data-question-key] [class$='_footerActions'] > button
   filter: drop-shadow(0 0 0.5px currentColor) drop-shadow(0 0 4px rgb(242 181 68 / 30%));
 }
 
+/* --- 23. The task ledger is legible --------------------------------------- */
+/* The host's todo panel — the row that reads "任务 · 3 已完成，1 进行中，2 待处理" and expands into the
+   list below the composer — was the one surface the skin left alone, and on a wallpaper it became
+   unreadable. Its own stylesheet declares `background: var(--dsw-specific-menu)` with no fallback,
+   and `--dsw-specific-menu` is the strong glass: solved to sit between 0.58 and 0.84 opacity at the
+   immersive end of the dial (the user's default is 20, which lands near the thin end). So over the
+   picture the panel was roughly 60% translucent while its three text tokens were all the *tertiary*
+   label colour — and the complaint is exactly what those two facts produce: it melts into the
+   background, and the collapse affordance is a bare chevron in tertiary grey at the far edge.
+
+    It is not a dialog (`section[data-testid='todo-panel']`, mounted in `conversation.input.dock`),
+   so the near-opaque pinning section 14 does for `[role='dialog']` never applied to it. Fixing it by
+   raising the global menu glass would have made every menu and selector heavy at full immersion,
+   where the point of the dial is to show the picture — so this pins the panel itself instead.
+
+   Anchored on `data-testid`, not on the module hash: the class prefix (`DXuOLW_`) is regenerated per
+   host build, while the test id is part of what the host ships and names. */
+html[data-amiya-skin='1'] [data-testid='todo-panel'] {
+  /* Solid enough that nothing behind it competes with the text, still the skin's own veil colour so
+     it reads as one material with the composer card above it. */
+  --dsh-amiya-ledger-alpha: 96%;
+  background: rgb(9 12 17 / var(--dsh-amiya-ledger-alpha));
+  border: 1px solid rgb(242 181 68 / 22%);
+  box-shadow: var(--dsh-elevation-panel), inset 0 1px 0 rgb(255 255 255 / 5%);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+html[data-amiya-skin='1'] body:not([data-ds-dark-theme]) [data-testid='todo-panel'] {
+  background: rgb(252 253 254 / var(--dsh-amiya-ledger-alpha));
+  border-color: rgb(146 100 12 / 30%);
+  box-shadow: var(--dsh-elevation-panel), inset 0 1px 0 rgb(255 255 255 / 60%);
+}
+/* The header is the only control on the panel — clicking it collapses the list — and it was drawn
+   in tertiary grey like a caption. Give it the primary label, and let the hover read as a target. */
+html[data-amiya-skin='1'] [data-testid='todo-panel'] [class$='_header'] {
+  color: var(--dsh-amiya-ink, rgb(249 250 251));
+}
+html[data-amiya-skin='1'] [data-testid='todo-panel'] [class$='_title'] {
+  letter-spacing: 0.06em;
+  color: var(--dsh-amiya-ink, rgb(249 250 251));
+}
+/* The count line carries the actual state ("… 2 待处理"), so it gets the amber accent rather than the
+   host's tertiary grey. */
+html[data-amiya-skin='1'] [data-testid='todo-panel'] [class$='_progress'] {
+  color: rgb(242 181 68 / 92%);
+  font-variant-numeric: tabular-nums;
+}
+html[data-amiya-skin='1'] body:not([data-ds-dark-theme]) [data-testid='todo-panel'] [class$='_progress'] {
+  color: rgb(122 82 8 / 92%);
+}
+/* The collapse affordance: the host's chevron is 14px tertiary grey at the panel's far edge, which
+   is why "where do I close this" was not obvious. Same glyph, but it now reads as a button — a
+   bordered hit area, brighter ink, and a visible rotation when open. */
+html[data-amiya-skin='1'] [data-testid='todo-panel'] [class$='_chevron'] {
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  margin-left: auto;
+  color: rgb(242 181 68 / 88%);
+  border: 1px solid rgb(242 181 68 / 34%);
+  border-radius: 7px;
+  background: rgb(242 181 68 / 8%);
+  transition: background 120ms ease, color 120ms ease, transform 160ms ease;
+}
+html[data-amiya-skin='1'] body:not([data-ds-dark-theme]) [data-testid='todo-panel'] [class$='_chevron'] {
+  color: rgb(122 82 8 / 90%);
+  border-color: rgb(146 100 12 / 36%);
+  background: rgb(146 100 12 / 10%);
+}
+html[data-amiya-skin='1'] [data-testid='todo-panel'] [class$='_header']:hover [class$='_chevron'] {
+  color: rgb(255 206 98);
+  background: rgb(242 181 68 / 18%);
+}
+/* Expanded, the chevron points down; collapsed, up. The host swaps the icon rather than rotating
+   it, so this only states the direction the glyph already has. */
+html[data-amiya-skin='1'] [data-testid='todo-panel'] [class$='_header'][aria-expanded='true'] [class$='_chevron'] {
+  transform: rotate(180deg);
+}
+/* The rows themselves: the host paints every one in secondary/tertiary grey. Status is the thing a
+   reader scans for here, so each row's dot keeps the host's state colour while the text rises to the
+   skin's own ink, and a finished item dims rather than being struck through invisibly. */
+html[data-amiya-skin='1'] [data-testid='todo-panel'] [class$='_item'] {
+  color: var(--dsh-amiya-ink-2, rgb(195 201 210));
+}
+html[data-amiya-skin='1'] [data-testid='todo-panel'] [class$='_item'][data-status='completed'] {
+  color: var(--dsh-amiya-ink-4, rgb(148 156 166));
+}
+html[data-amiya-skin='1'] [data-testid='todo-panel'] [class$='_item'][data-status='in_progress'] {
+  color: var(--dsh-amiya-ink, rgb(249 250 251));
+}
+/* The lead checklist glyph sat in the same tertiary grey as the counts; make it the panel's mark. */
+html[data-amiya-skin='1'] [data-testid='todo-panel'] [class$='_lead'] {
+  color: rgb(242 181 68 / 86%);
+}
+html[data-amiya-skin='1'] body:not([data-ds-dark-theme]) [data-testid='todo-panel'] [class$='_lead'] {
+  color: rgb(122 82 8 / 86%);
+}
+
+/* --- 24. The desktop window ------------------------------------------------ */
+/* DSH Desktop marks its own shell on <html> — `data-windows-titlebar` on Windows, `data-platform`
+   everywhere — and the layout package reacts to both. Three of its reactions collide with a skin that
+   paints a picture behind the interface, and none of them can be fixed from the web profile side:
+
+   1. On Windows the frame itself is given `background: var(--dsw-specific-sidebar-fill)`. That token
+      is the *strong glass* this skin solves per wallpaper (0.52–0.92 alpha), so the desktop build
+      paints a full-window glass plate over the picture: the wallpaper reads washed out on Windows
+      while the same build on macOS (`.frame { background: 0 0 }`) and the browser do not. The strip
+      at the top gets that fill from its own pseudo-element anyway, so the plate is pure duplication.
+   2. The top `--dsh-windows-titlebar-height` band is a drag region, and anything fixed covers it.
+      The picker is a full-window overlay, which made the window impossible to move while it was open
+      and dimmed the window controls with the same backdrop the panel uses.
+   3. `.centerCol` is given a 16px rounded top-left corner on Windows; the skin's own corners are
+      solved per surface, so nothing needs doing there — noted so the next reader does not "fix" it.
+
+   Nothing below changes layout: the frame keeps its padding, the columns keep their geometry, and on
+   a host without these attributes every rule here is inert. */
+html[data-amiya-skin='1'][data-windows-titlebar] [class*='_frame'] {
+  /* Transparent rather than the glass plate: the wallpaper layer (body::before) is the picture, and
+     the titlebar strip repaints itself from its own pseudo-element. */
+  background: transparent !important;
+}
+/* The strip keeps the same material as the sidebar, and takes the hairline the rest of the chrome
+   uses so it reads as this skin's titlebar rather than as a foreign band above it. */
+html[data-amiya-skin='1'][data-windows-titlebar] [class*='_frame']::before {
+  border-bottom: 1px solid rgb(242 181 68 / 22%);
+  box-shadow: 0 1px 0 rgb(0 0 0 / 30%);
+}
+html[data-amiya-skin='1'][data-windows-titlebar] body:not([data-ds-dark-theme]) [class*='_frame']::before {
+  border-bottom-color: rgb(146 100 12 / 26%);
+  box-shadow: 0 1px 0 rgb(255 255 255 / 40%);
+}
+/* The picker stands down from the titlebar band, using the host's own clearance variable — declared
+   only under `data-windows-titlebar`, so the fallback is what runs everywhere else. The panel's height
+   budget shrinks by the same amount, or the bottom row would be clipped on short windows. */
+html[data-amiya-skin='1'] .amiya-picker {
+  top: var(--dsh-frame-top-clearance, 0px);
+}
+html[data-amiya-skin='1'] .amiya-picker__panel {
+  max-height: calc(100vh - 96px - var(--dsh-frame-top-clearance, 0px));
+}
+/* A window drag region only ever belongs to the titlebar. If a future host wraps one of these
+   surfaces in a drag strip, the control inside it must still take the click. */
+html[data-amiya-skin='1'] .amiya-picker,
+html[data-amiya-skin='1'] .amiya-picker *,
+html[data-amiya-skin='1'] [data-slot='conversation.composer.dock'] * {
+  -webkit-app-region: no-drag;
+}
+/* The sidebar's own controls, written with the dialog stand-down every other sidebar-scoped rule here
+   uses: a dialog that renders inside the column must not inherit this either. */
+html[data-amiya-skin='1'] [class*='_sidebarCol']:not(:has([role='dialog'], [role='alertdialog'])) button,
+html[data-amiya-skin='1'] [class*='_sidebarCol']:not(:has([role='dialog'], [role='alertdialog'])) input,
+html[data-amiya-skin='1'] [class*='_sidebarCol']:not(:has([role='dialog'], [role='alertdialog'])) a {
+  -webkit-app-region: no-drag;
+}
+/* The skin's own transitions, stood down for readers who ask the system for less motion. Scoped to
+   the elements that declare them rather than to `*`: a universal rule here would also flatten the
+   host's transitions, which is not this skin's business. */
+@media (prefers-reduced-motion: reduce) {
+  html[data-amiya-skin='1'] .amiya-picker__cell,
+  html[data-amiya-skin='1'] .amiya-picker__import-btn,
+  html[data-amiya-skin='1'] .amiya-picker__remove,
+  html[data-amiya-skin='1'] [data-testid='todo-panel'] [class$='_chevron'],
+  html[data-amiya-skin='1'] .amiya-step {
+    transition-duration: 0.01ms;
+  }
+}
+