@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/image-viewer.css

@@ -0,0 +1,588 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 image viewer 样式。 */
+
+@import '../family/action-control.css';
+@import '../family/loading-ring.css';
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-image-viewer {
+    --xh-image-viewer-skin: 1;
+  }
+
+  .xh-scope-image-viewer[data-part='backdrop'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-image-viewer-backdrop-layer, var(--xh-_layer, var(--xh-layer-modal)));
+    /* 与对话框同一层全局遮罩：看片台的深浅由遮罩令牌统一定 */
+    background: var(--xh-image-viewer-backdrop-bg, var(--xh-bg-overlay));
+  }
+
+  /* 同一层底色之上再糊背后的页面 */
+  .xh-scope-image-viewer[data-part='backdrop'][data-variant='blur'] {
+    -webkit-backdrop-filter: blur(var(--xh-image-viewer-backdrop-blur, var(--xh-overlay-backdrop-blur)));
+    backdrop-filter: blur(var(--xh-image-viewer-backdrop-blur, var(--xh-overlay-backdrop-blur)));
+  }
+
+  /* 去掉底色，只留下这一层吃指针：交互外关闭与滚动锁定照旧 */
+  .xh-scope-image-viewer[data-part='backdrop'][data-variant='transparent'] {
+    background: transparent;
+  }
+
+  .xh-scope-image-viewer[data-part='backdrop'][data-state='open']:not([data-instant]) {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-image-viewer[data-part='backdrop'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  .xh-scope-image-viewer[data-part='positioner'] {
+    /* 工具条是页面主题的实体面，看片层（content）却整层是白墨域：页面主题下的面色、描边与字色
+       在域外的这一层取一次，交给工具条 */
+    --xh-_image-viewer-page-surface: var(--xh-bg-surface);
+    --xh-_image-viewer-page-border: var(--xh-border-default);
+    --xh-_image-viewer-page-fg: var(--xh-fg-muted);
+
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-image-viewer-layer, var(--xh-_layer, var(--xh-layer-modal)));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .xh-scope-image-viewer[data-part='content'] {
+    /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+    isolation: isolate;
+
+    /* 作者塞进浮层的图标：内容层给一档 md 的尺，十颗钮各自再按 Action Control 档位覆盖 */
+    --xh-icon-size: var(--xh-image-viewer-icon-size, var(--xh-glyph-size-md));
+    /* 翻页钮、关闭钮与计数共用的深色 chrome：压在使用者的图片上的半透明深底，取画面控件面那组令牌，
+       不取页面语义面。白面压在亮图上分不出来（白 30% 的面压亮图不到 1.4:1），这几件留在深纱上 */
+    --xh-_image-viewer-chrome-bg: var(--xh-image-viewer-chrome-bg, var(--xh-bg-media-chrome));
+    --xh-_image-viewer-chrome-bg-hover: var(--xh-image-viewer-action-bg-hover, var(--xh-bg-media-chrome-hover));
+    --xh-_image-viewer-chrome-bg-active: var(--xh-image-viewer-action-bg-active, var(--xh-bg-media-chrome-active));
+
+    position: relative;
+    inline-size: 100%;
+    block-size: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    /* 深色底上的工具条与计数固定用浅字，不随主题翻 */
+    color: var(--xh-image-viewer-fg, var(--xh-fg-on-media-chrome));
+  }
+
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  .xh-scope-image-viewer[data-part='content'][data-state='open']:not([data-instant]) {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-image-viewer[data-part='content'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  .xh-scope-image-viewer[data-part='viewport'] {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: grab;
+    /* 平移与滚轮都归指针会话，浏览器手势不抢 */
+    touch-action: none;
+  }
+
+  .xh-scope-image-viewer[data-part='viewport'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  /* 原图还在路上：指针先报出来，此刻拖也没有东西可拖 */
+  .xh-scope-image-viewer[data-part='viewport'][data-loading] {
+    cursor: progress;
+  }
+
+  /* 取图期间画面正中一枚加载环：不给的话打开一张几 MB 的原图，台前是一整块什么都没有的暗底，
+     用户分不清是在加载还是这张图坏了。环由加载环配方画（连接层投影 data-xh-loading-ring），
+     随 data-loading 淡入淡出；前景随看片层的白墨域 */
+  .xh-scope-image-viewer[data-part='viewport'] {
+    /* 画面正中那两枚状态图形（加载环与警示字形）的尺：看片台是整幅画面，取控件图标档的最大一档 */
+    --xh-icon-size: var(--xh-image-viewer-status-size, var(--xh-glyph-size-lg));
+  }
+
+  .xh-scope-image-viewer[data-part='viewport']::before {
+    content: '';
+    position: absolute;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
+  /* 取图失败：画面正中一枚警示字形（取危险色，非颜色通道），替掉浏览器画的破图与替代文字 */
+  .xh-scope-image-viewer[data-part='viewport'][data-error]::after {
+    content: '';
+    position: absolute;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    background-color: var(--xh-image-viewer-error-fg, var(--xh-fg-danger));
+    -webkit-mask: var(--xh-glyph-mark-warning) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-warning) center / contain no-repeat;
+  }
+
+  .xh-scope-image-viewer[data-part='image'] {
+    max-inline-size: 90%;
+    max-block-size: 85%;
+    user-select: none;
+    /* 位移、旋转与缩放都是内联 style 写的，只给按钮带来的缩放旋转一点缓动；拖拽平移要跟手，不缓。
+       新图取到之后淡入 */
+    transition:
+      translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      opacity var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 取图期间（打开与换下标）：换图那一刻变换直接归位、不补间——转过、放大过的旧图不当着用户转回、缩回；
+     旧图随即让位，视口垫着的占位面顶上，不露底色闪一拍。取到之后撤掉这一档，按上面的进场档淡入 */
+  .xh-scope-image-viewer[data-part='image'][data-loading] {
+    opacity: 0;
+    transition: none;
+  }
+
+  /* 载不出来的图不露浏览器的破图：整张让位给视口正中的警示字形，替代文字仍在可及树里 */
+  .xh-scope-image-viewer[data-part='image'][data-error] {
+    visibility: hidden;
+  }
+
+  /* 拖拽期间平移每帧都在改：只在这一档备好合成层，松手后随 data-dragging 一起撤掉 */
+  .xh-scope-image-viewer[data-part='image'][data-dragging] {
+    transition: none;
+    will-change: translate;
+  }
+
+  /* 松手后弹簧带着平移惯性滑行、越出范围时回弹，同样逐帧写变换，不能再叠一层过渡；落定即撤 */
+  .xh-scope-image-viewer[data-part='image'][data-animating] {
+    transition: none;
+    will-change: translate;
+  }
+
+  /* —— 悬浮件 ——
+     四件都钉在铺满视口的那一层的边上，贴边一律与安全区取大的一头：刘海、圆角与
+     底部横条压住的那一段由系统给出，贴边比它窄时钮会被切掉一角；桌面上 env() 恒为 0。
+     安全区只有物理方向的四个名字，行内轴上两侧同取较宽的那一段，RTL 下不会翻错边。
+     工具条是容器、计数是一行字的气泡，各按身份取圆角（surface / control），
+     --xh-image-viewer-overlay-radius 仍是两者共用的使用者入口；翻页钮的面走下面的桥接槽 */
+  .xh-scope-image-viewer[data-part='toolbar'],
+  .xh-scope-image-viewer[data-part='counter'] {
+    position: absolute;
+    z-index: 1;
+  }
+
+  /* 计数：一行浅字压在深纱上 */
+  .xh-scope-image-viewer[data-part='counter'] {
+    background: var(--xh-_image-viewer-chrome-bg);
+    color: inherit;
+    border: none;
+  }
+
+  /* 工具条：页面主题的实体面（亮色白面、暗色深面）+ 1px 描边。面色在看片层的白墨域之外取
+     （定位层捕获的页面取值），连接层在它身上打 data-xh-ink-surface：七颗钮与作者放进来的内容
+     按这块底自成墨色域，字色、悬停阶梯与焦点环都随面的深浅走，不再钉在浅字上。
+     强制色下面被换成 Canvas、与遮罩同色，边界只剩这圈描边 */
+  .xh-scope-image-viewer[data-part='toolbar'] {
+    --xh-ink-surface: var(--xh-image-viewer-toolbar-bg, var(--xh-_image-viewer-page-surface));
+
+    inset-block-end: max(var(--xh-space-6), env(safe-area-inset-bottom));
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    display: flex;
+    align-items: center;
+    gap: var(--xh-image-viewer-toolbar-gap, var(--xh-space-1));
+    padding: var(--xh-image-viewer-toolbar-padding, var(--xh-space-1_5) var(--xh-space-4));
+    border: var(--xh-stroke-thin) solid var(--xh-_image-viewer-page-border);
+    border-radius: var(--xh-image-viewer-toolbar-radius-outer, var(--xh-image-viewer-overlay-radius, var(--xh-shape-surface)));
+    background: var(--xh-image-viewer-toolbar-bg, var(--xh-_image-viewer-page-surface));
+    color: var(--xh-_image-viewer-page-fg);
+  }
+
+  /* 起点是逻辑属性、平移是物理通道：rtl 下行内分量掉头，工具条与计数才落回中线 */
+  .xh-scope-image-viewer[data-part='toolbar']:dir(rtl) {
+    translate: 50% 0;
+  }
+
+  /* 工具条里的七颗钮：接 Action Control icon 档 xs（字形 16px），视觉盒放大到 box md（36px），
+     底色交给工具条，本体只管命中区与按压。钮是工具条这块面上的墨色域：悬停 / 按下走白底阶梯
+     （100 → 200），字取次要字色，都按工具条的底色求值。
+     position 交给配方的 relative：粗指针下 44px 命中区 ::after 以钮自身为包含块；
+     这里若写 static，七块命中区会一起以工具条为包含块、彼此盖住，触屏上只剩最后一颗可点 */
+  .xh-scope-image-viewer[data-part='toolbar'] > [data-part] {
+    --xh-action-visual-size: var(--xh-control-box-md);
+    --xh-action-min-inline-size: var(--xh-control-box-md);
+    --xh-action-bg-rest: transparent;
+    --xh-action-bg-hover: var(--xh-bg-subtle);
+    --xh-action-bg-pressed: var(--xh-bg-subtle-hover);
+    --xh-action-bg-focus-visible: transparent;
+    --xh-action-bg-disabled: transparent;
+    --xh-action-fg-rest: var(--xh-fg-muted);
+    --xh-action-fg-hover: var(--xh-fg-muted);
+    --xh-action-fg-pressed: var(--xh-fg-muted);
+    --xh-action-fg-focus-visible: var(--xh-fg-muted);
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
+    --xh-action-border-rest: transparent;
+    --xh-action-border-hover: transparent;
+    --xh-action-border-pressed: transparent;
+    --xh-action-border-focus-visible: transparent;
+    --xh-action-border-disabled: transparent;
+    --xh-action-radius: var(--xh-image-viewer-toolbar-radius, var(--xh-_action-profile-radius));
+    --xh-icon-size: var(--xh-image-viewer-icon-size, var(--xh-_action-profile-glyph-size));
+  }
+
+  .xh-scope-image-viewer[data-part='counter'] {
+    inset-block-start: max(var(--xh-space-6), env(safe-area-inset-top));
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    padding: var(--xh-image-viewer-counter-padding, var(--xh-space-1) var(--xh-space-3));
+    border-radius: var(--xh-image-viewer-counter-radius, var(--xh-image-viewer-overlay-radius, var(--xh-shape-control)));
+    font-size: var(--xh-text-secondary-size);
+  }
+
+  .xh-scope-image-viewer[data-part='counter']:dir(rtl) {
+    translate: 50% 0;
+  }
+
+  /* 翻页与关闭钮的尺：看片台上的媒体控制钮与同档控件等高（control-h，md 32px），字形比控件内
+     图标低一档（sm / md 16px、lg 20px），不压画面。三颗钮与组件同档 */
+  .xh-scope-image-viewer:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger']) {
+    --xh-_image-viewer-nav-size: var(--xh-control-h-md);
+    --xh-_image-viewer-nav-glyph: var(--xh-glyph-size-sm);
+  }
+
+  .xh-scope-image-viewer:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'])[data-xh-action-size='sm'] {
+    --xh-_image-viewer-nav-size: var(--xh-control-h-sm);
+  }
+
+  .xh-scope-image-viewer:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'])[data-xh-action-size='lg'] {
+    --xh-_image-viewer-nav-size: var(--xh-control-h-lg);
+    --xh-_image-viewer-nav-glyph: var(--xh-glyph-size-md);
+  }
+
+  /* 两颗翻页钮：浮在图上的单图标圆钮，接 Action Control floating 档（正方盒取 circle），视觉盒改走上面的尺。
+     面桥接到自家深色 chrome：跟的是图上那层半透明深底不是页面底色，所以不取 frosted 缺省面，
+     也不取语义档的 --xh-bg-subtle-*；到头时是原生 disabled，压不动的东西不给回应 */
+  .xh-scope-image-viewer[data-part='prev-trigger'],
+  .xh-scope-image-viewer[data-part='next-trigger'] {
+    --xh-action-bg-rest: var(--xh-_image-viewer-chrome-bg);
+    --xh-action-bg-hover: var(--xh-_image-viewer-chrome-bg-hover);
+    --xh-action-bg-pressed: var(--xh-_image-viewer-chrome-bg-active);
+    --xh-action-bg-focus-visible: var(--xh-_image-viewer-chrome-bg);
+    --xh-action-bg-disabled: var(--xh-_image-viewer-chrome-bg);
+    --xh-action-fg-rest: currentColor;
+    --xh-action-fg-hover: currentColor;
+    --xh-action-fg-pressed: currentColor;
+    --xh-action-fg-focus-visible: currentColor;
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
+    --xh-action-border-rest: transparent;
+    --xh-action-border-hover: transparent;
+    --xh-action-border-pressed: transparent;
+    --xh-action-border-focus-visible: transparent;
+    --xh-action-border-disabled: transparent;
+    --xh-action-radius: var(--xh-image-viewer-overlay-radius, var(--xh-_action-profile-radius));
+    --xh-action-visual-size: var(--xh-image-viewer-nav-size, var(--xh-_image-viewer-nav-size));
+    --xh-action-min-inline-size: var(--xh-image-viewer-nav-size, var(--xh-_image-viewer-nav-size));
+    --xh-icon-size: var(--xh-image-viewer-icon-size, var(--xh-_image-viewer-nav-glyph));
+
+    position: absolute;
+    z-index: 1;
+  }
+
+  .xh-scope-image-viewer[data-part='prev-trigger'] {
+    inset-inline-start: max(var(--xh-space-5), env(safe-area-inset-left), env(safe-area-inset-right));
+    inset-block-start: 50%;
+    translate: 0 -50%;
+  }
+
+  .xh-scope-image-viewer[data-part='next-trigger'] {
+    inset-inline-end: max(var(--xh-space-5), env(safe-area-inset-left), env(safe-area-inset-right));
+    inset-block-start: 50%;
+    translate: 0 -50%;
+  }
+
+  /* 右上角的关闭钮：悬浮在媒体上的单图标动作，与翻页钮同走 Action Control floating 档、同一把尺（圆形）；
+     面与翻页钮同一层深色 chrome，离右上角比翻页钮离边远一档，不与画面边角的内容挤在一起 */
+  .xh-scope-image-viewer[data-part='close-trigger'] {
+    --xh-action-bg-rest: var(--xh-_image-viewer-chrome-bg);
+    --xh-action-bg-hover: var(--xh-image-viewer-close-bg-hover, var(--xh-_image-viewer-chrome-bg-hover));
+    --xh-action-bg-pressed: var(--xh-image-viewer-close-bg-active, var(--xh-_image-viewer-chrome-bg-active));
+    --xh-action-bg-focus-visible: var(--xh-_image-viewer-chrome-bg);
+    --xh-action-bg-disabled: var(--xh-_image-viewer-chrome-bg);
+    /* 看图时整块 chrome 盖住页面，叉的颜色随那层继承；使用者要单独换叉的颜色走这支槽 */
+    --xh-action-fg-rest: var(--xh-image-viewer-close-fg, currentColor);
+    --xh-action-fg-hover: var(--xh-image-viewer-close-fg, currentColor);
+    --xh-action-fg-pressed: var(--xh-image-viewer-close-fg, currentColor);
+    --xh-action-fg-focus-visible: var(--xh-image-viewer-close-fg, currentColor);
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
+    --xh-action-border-rest: transparent;
+    --xh-action-border-hover: transparent;
+    --xh-action-border-pressed: transparent;
+    --xh-action-border-focus-visible: transparent;
+    --xh-action-border-disabled: transparent;
+    --xh-action-radius: var(--xh-image-viewer-close-radius, var(--xh-shape-circle));
+    --xh-action-visual-size: var(--xh-image-viewer-close-size, var(--xh-_image-viewer-nav-size));
+    --xh-action-min-inline-size: var(--xh-image-viewer-close-size, var(--xh-_image-viewer-nav-size));
+    --xh-icon-size: var(--xh-image-viewer-icon-size, var(--xh-_image-viewer-nav-glyph));
+
+    position: absolute;
+    z-index: 1;
+    inset-block-start: max(var(--xh-space-8), env(safe-area-inset-top));
+    inset-inline-end: max(var(--xh-space-8), env(safe-area-inset-left), env(safe-area-inset-right));
+  }
+
+  /* liquid 档：data-material="liquid" 下控制层换成液态面，深色纱那一套只属于 standard 档。
+     液态面按下层（使用者的图片、遮罩）写墨色域，前景跟着墨色走，不再钉在浅字上。
+     工具条是不贴边的一维栏、计数是一行字的 chip，取 pill；翻页与关闭是媒体控制钮，取 circle */
+  :where([data-material='liquid']) .xh-scope-image-viewer[data-part='toolbar'][data-xh-liquid],
+  :where([data-material='liquid']) .xh-scope-image-viewer[data-part='counter'][data-xh-liquid] {
+    border: var(--xh-stroke-thin) solid var(--xh-material-liquid-border);
+    background: var(--xh-image-viewer-chrome-bg, var(--xh-_liquid-bg));
+    color: var(--xh-material-liquid-fg);
+    box-shadow: var(--xh-_liquid-shadow);
+    -webkit-backdrop-filter: var(--xh-material-liquid-backdrop);
+    backdrop-filter: var(--xh-material-liquid-backdrop);
+    /* 换到深浅不同的图上时色调翻转：底色、字色、细线与投影一起淡变 */
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 液态工具条自己就是墨色域（按下层写 data-xh-ink）：钮不再按页面面色另取墨色，
+     撤掉 ink-surface，钮里的墨色随这块液态面的域走 */
+  :where([data-material='liquid']) .xh-scope-image-viewer[data-part='toolbar'][data-xh-liquid] {
+    --xh-ink-surface: initial;
+
+    border-radius: var(--xh-image-viewer-toolbar-radius-outer, var(--xh-image-viewer-overlay-radius, var(--xh-shape-pill)));
+  }
+
+  :where([data-material='liquid']) .xh-scope-image-viewer[data-part='counter'][data-xh-liquid] {
+    border-radius: var(--xh-image-viewer-counter-radius, var(--xh-image-viewer-overlay-radius, var(--xh-shape-pill)));
+  }
+
+  /* 工具条里的钮：悬停 / 按下取墨色淡底阶梯，工具条这块液态面就是它们的墨色域 */
+  :where([data-material='liquid']) .xh-scope-image-viewer[data-part='toolbar'][data-xh-liquid] > [data-part] {
+    --xh-action-bg-hover: var(--xh-image-viewer-action-bg-hover, var(--xh-bg-subtle));
+    --xh-action-bg-pressed: var(--xh-image-viewer-action-bg-active, var(--xh-bg-subtle-hover));
+    --xh-action-fg-rest: currentColor;
+    --xh-action-fg-hover: currentColor;
+    --xh-action-fg-pressed: currentColor;
+    --xh-action-fg-focus-visible: currentColor;
+  }
+
+  :where([data-material='liquid']) .xh-scope-image-viewer[data-part='prev-trigger'][data-xh-liquid],
+  :where([data-material='liquid']) .xh-scope-image-viewer[data-part='next-trigger'][data-xh-liquid],
+  :where([data-material='liquid']) .xh-scope-image-viewer[data-part='close-trigger'][data-xh-liquid] {
+    --xh-action-bg-rest: var(--xh-image-viewer-chrome-bg, var(--xh-_liquid-bg));
+    --xh-action-bg-hover: var(--xh-image-viewer-action-bg-hover, var(--xh-_liquid-bg-hover));
+    --xh-action-bg-pressed: var(--xh-image-viewer-action-bg-active, var(--xh-_liquid-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-image-viewer-chrome-bg, var(--xh-material-liquid-focus-surface));
+    --xh-action-bg-disabled: var(--xh-image-viewer-chrome-bg, var(--xh-_liquid-bg));
+    --xh-action-fg-rest: var(--xh-material-liquid-fg);
+    --xh-action-fg-hover: var(--xh-material-liquid-fg);
+    --xh-action-fg-pressed: var(--xh-material-liquid-fg);
+    --xh-action-fg-focus-visible: var(--xh-material-liquid-fg);
+    --xh-action-border-rest: var(--xh-material-liquid-border);
+    --xh-action-border-hover: var(--xh-material-liquid-border);
+    --xh-action-border-pressed: var(--xh-material-liquid-border);
+    --xh-action-border-focus-visible: var(--xh-material-liquid-border);
+    --xh-action-border-disabled: var(--xh-material-liquid-border);
+    --xh-action-fg-disabled: var(--xh-fg-disabled);
+    --xh-action-shadow-rest: var(--xh-_liquid-shadow);
+    --xh-action-shadow-hover: var(--xh-_liquid-shadow);
+    --xh-action-shadow-pressed: var(--xh-_liquid-shadow);
+    --xh-action-shadow-focus-visible: var(--xh-_liquid-shadow);
+    --xh-action-shadow-disabled: var(--xh-_liquid-shadow);
+
+    color: var(--xh-material-liquid-fg);
+    -webkit-backdrop-filter: var(--xh-material-liquid-backdrop);
+    backdrop-filter: var(--xh-material-liquid-backdrop);
+    transform: var(--xh-_liquid-deform);
+  }
+
+  /* 叉的前景仍认使用者的那支槽；圆钮取 circle */
+  :where([data-material='liquid']) .xh-scope-image-viewer[data-part='close-trigger'][data-xh-liquid] {
+    --xh-action-fg-rest: var(--xh-image-viewer-close-fg, var(--xh-material-liquid-fg));
+    --xh-action-fg-hover: var(--xh-image-viewer-close-fg, var(--xh-material-liquid-fg));
+    --xh-action-fg-pressed: var(--xh-image-viewer-close-fg, var(--xh-material-liquid-fg));
+    --xh-action-fg-focus-visible: var(--xh-image-viewer-close-fg, var(--xh-material-liquid-fg));
+    --xh-action-bg-hover: var(--xh-image-viewer-close-bg-hover, var(--xh-_liquid-bg-hover));
+    --xh-action-bg-pressed: var(--xh-image-viewer-close-bg-active, var(--xh-_liquid-bg-pressed));
+    --xh-action-radius: var(--xh-image-viewer-close-radius, var(--xh-shape-circle));
+  }
+
+  /* 三颗钮的面是一层深色纱，纱底下是使用者的图片，环色算不出稳定的取值。
+     content 把前景钉死在浅字上、三颗钮的前景随它继承，环取 currentColor 即是那支浅字，
+     不随图片内容也不随主题翻 */
+  .xh-scope-image-viewer[data-part='close-trigger']:focus-visible,
+  .xh-scope-image-viewer[data-part='prev-trigger']:focus-visible,
+  .xh-scope-image-viewer[data-part='next-trigger']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  .xh-scope-image-viewer[data-part='close-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  .xh-scope-image-viewer[data-part='zoom-in-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-zoom-in) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-zoom-in) center / contain no-repeat;
+  }
+
+  .xh-scope-image-viewer[data-part='zoom-out-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-zoom-out) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-zoom-out) center / contain no-repeat;
+  }
+
+  .xh-scope-image-viewer[data-part='rotate-left-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-rotate-left) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-rotate-left) center / contain no-repeat;
+  }
+
+  .xh-scope-image-viewer[data-part='rotate-right-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-rotate-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-rotate-right) center / contain no-repeat;
+  }
+
+  .xh-scope-image-viewer[data-part='flip-horizontal-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-flip-horizontal) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-flip-horizontal) center / contain no-repeat;
+  }
+
+  .xh-scope-image-viewer[data-part='flip-vertical-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-flip-vertical) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-flip-vertical) center / contain no-repeat;
+  }
+
+  .xh-scope-image-viewer[data-part='prev-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+  }
+
+  .xh-scope-image-viewer[data-part='next-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+  }
+
+  .xh-scope-image-viewer[data-part='close-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-image-viewer[data-part='positioner'][hidden],
+  .xh-scope-image-viewer[data-part='viewport'][hidden],
+  .xh-scope-image-viewer[data-part='toolbar'][hidden],
+  .xh-scope-image-viewer[data-part='prev-trigger'][hidden],
+  .xh-scope-image-viewer[data-part='next-trigger'][hidden] {
+    display: none;
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    .xh-scope-image-viewer[data-part='backdrop'],
+    .xh-scope-image-viewer[data-part='positioner'] {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       落在 Canvas 面上的取 CanvasText；
+       禁用取 GrayText */
+    .xh-scope-image-viewer[data-part='viewport'][data-error]::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .xh-scope-image-viewer:is([data-part='zoom-in-trigger'], [data-part='zoom-out-trigger'], [data-part='rotate-left-trigger'], [data-part='rotate-right-trigger'], [data-part='flip-horizontal-trigger'], [data-part='flip-vertical-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-image-viewer:is([data-part='zoom-in-trigger'], [data-part='zoom-out-trigger'], [data-part='rotate-left-trigger'], [data-part='rotate-right-trigger'], [data-part='flip-horizontal-trigger'], [data-part='flip-vertical-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-image-viewer:is([data-part='zoom-in-trigger'], [data-part='zoom-out-trigger'], [data-part='rotate-left-trigger'], [data-part='rotate-right-trigger'], [data-part='flip-horizontal-trigger'], [data-part='flip-vertical-trigger'], [data-part='prev-trigger'], [data-part='next-trigger'], [data-part='close-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}