@xihan-ui/styles 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +101 -0
- package/component-tokens.d.ts +0 -15
- package/components.tokens.json +65 -396
- package/css/accordion.css +6 -6
- package/css/alert.css +2 -2
- package/css/anchor.css +3 -3
- package/css/approval.css +8 -8
- package/css/back-top.css +2 -2
- package/css/badge.css +1 -1
- package/css/breadcrumb.css +1 -1
- package/css/button-group.css +1 -1
- package/css/button.css +2 -2
- package/css/calendar-picker.css +8 -8
- package/css/calendar-range-picker.css +9 -9
- package/css/card.css +1 -1
- package/css/carousel.css +6 -6
- package/css/cascader.css +3 -5
- package/css/checkbox-group.css +10 -10
- package/css/checkbox.css +5 -5
- package/css/clipboard.css +4 -4
- package/css/code-view.css +2 -2
- package/css/collapsible.css +4 -4
- package/css/color-picker.css +2 -4
- package/css/color-slider.css +4 -4
- package/css/color-swatch-picker.css +5 -5
- package/css/combobox.css +2 -4
- package/css/command.css +3 -5
- package/css/context-menu.css +4 -6
- package/css/date-picker.css +0 -2
- package/css/date-range-picker.css +0 -2
- package/css/descriptions.css +1 -1
- package/css/dialog.css +5 -7
- package/css/diff-view.css +4 -4
- package/css/download-trigger.css +3 -3
- package/css/drawer.css +9 -15
- package/css/empty-state.css +1 -1
- package/css/field.css +1 -1
- package/css/fieldset.css +1 -1
- package/css/file-upload.css +1 -1
- package/css/float-button.css +3 -3
- package/css/floating-panel.css +6 -8
- package/css/form.css +3 -3
- package/css/heatmap.css +1 -1
- package/css/hover-card.css +2 -4
- package/css/image-cropper.css +2 -2
- package/css/image-viewer.css +2 -4
- package/css/infinite-scroll.css +2 -2
- package/css/input-group.css +2 -2
- package/css/json-viewer.css +5 -5
- package/css/kbd.css +1 -1
- package/css/layout.css +3 -3
- package/css/list.css +1 -1
- package/css/listbox.css +26 -17
- package/css/log.css +2 -2
- package/css/mention.css +0 -2
- package/css/menu.css +5 -7
- package/css/menubar.css +6 -8
- package/css/message-feed.css +2 -2
- package/css/navigation-menu.css +5 -7
- package/css/notification.css +3 -3
- package/css/page-header.css +1 -1
- package/css/pagination.css +5 -7
- package/css/popconfirm.css +6 -8
- package/css/popover.css +5 -7
- package/css/prompt-input.css +1 -1
- package/css/question-flow.css +7 -7
- package/css/radio-group.css +9 -9
- package/css/rating.css +4 -4
- package/css/reasoning.css +5 -5
- package/css/reset.css +1 -1
- package/css/segmented.css +7 -7
- package/css/select.css +2 -4
- package/css/side-nav.css +4 -6
- package/css/signature-pad.css +7 -7
- package/css/slider.css +5 -5
- package/css/sortable.css +1 -1
- package/css/splitter.css +1 -1
- package/css/steps.css +10 -10
- package/css/switch.css +8 -8
- package/css/table.css +11 -11
- package/css/tabs.css +12 -12
- package/css/tag-group.css +39 -35
- package/css/tag.css +2 -2
- package/css/time-picker.css +0 -2
- package/css/time-range-picker.css +0 -2
- package/css/toast.css +3 -3
- package/css/toggle-group.css +4 -4
- package/css/toggle.css +2 -2
- package/css/tool-call.css +5 -5
- package/css/toolbar.css +4 -4
- package/css/tooltip.css +4 -6
- package/css/tour.css +7 -9
- package/css/transfer.css +6 -6
- package/css/tree-select.css +3 -5
- package/css/tree.css +46 -99
- package/css/virtualizer.css +1 -1
- package/family/collection-item.css +61 -12
- package/family/motion.css +1 -1
- package/index.css +506 -553
- package/index.unlayered.css +506 -553
- package/package.json +2 -2
package/index.unlayered.css
CHANGED
|
@@ -1111,8 +1111,13 @@
|
|
|
1111
1111
|
font-size: var(--xh-collection-description-font-size, var(--xh-control-caption-md));
|
|
1112
1112
|
}
|
|
1113
1113
|
|
|
1114
|
+
/* 快捷键提示:与说明同档同色的次级文字,只是落位在行尾而不是第 2 行。
|
|
1115
|
+
不换行——它是一串按键记号,折行会被读成两个组合。跟着 description 那支前景走,因此也不跟语气。 */
|
|
1114
1116
|
[data-xh-collection-slot='shortcut'] {
|
|
1115
1117
|
grid-column: shortcut;
|
|
1118
|
+
color: var(--xh-_collection-description-fg);
|
|
1119
|
+
font-size: var(--xh-collection-shortcut-font-size, var(--xh-control-caption-md));
|
|
1120
|
+
white-space: nowrap;
|
|
1116
1121
|
}
|
|
1117
1122
|
|
|
1118
1123
|
[data-xh-collection-slot='suffix'] {
|
|
@@ -1132,20 +1137,9 @@
|
|
|
1132
1137
|
margin-inline-start: var(--xh-collection-gap, var(--xh-_collection-gap));
|
|
1133
1138
|
}
|
|
1134
1139
|
|
|
1135
|
-
/* page
|
|
1140
|
+
/* page 上下文:对号与 overlay 同在行尾的 indicator 列(trailing);当前项的起始侧指示条按配方开关(none),none 即只由行面与字色表达。 */
|
|
1136
1141
|
[data-scope][data-xh-collection-item][data-xh-collection-context='page'] {
|
|
1137
1142
|
position: relative;
|
|
1138
|
-
grid-template-columns:
|
|
1139
|
-
[indicator] max-content
|
|
1140
|
-
[prefix] max-content
|
|
1141
|
-
[text] minmax(0, 1fr)
|
|
1142
|
-
[shortcut] max-content
|
|
1143
|
-
[suffix] max-content;
|
|
1144
|
-
}
|
|
1145
|
-
|
|
1146
|
-
[data-scope][data-xh-collection-item][data-xh-collection-context='page'] [data-xh-collection-slot='indicator'] {
|
|
1147
|
-
margin-inline-start: 0;
|
|
1148
|
-
margin-inline-end: var(--xh-collection-gap, var(--xh-_collection-gap));
|
|
1149
1143
|
}
|
|
1150
1144
|
|
|
1151
1145
|
[data-scope][data-xh-collection-item][data-in-path] {
|
|
@@ -1196,6 +1190,31 @@
|
|
|
1196
1190
|
transition-timing-function: var(--xh-motion-ease-press);
|
|
1197
1191
|
}
|
|
1198
1192
|
|
|
1193
|
+
/* 语气段:条目自身动作的性质,静息只换字、hover / 高亮 / 按下换语气淡底,节奏与中性行一致。
|
|
1194
|
+
必须排在上下文段之前:语气与 selected / current 同特指度,靠源序让选中与当前压过语气。 */
|
|
1195
|
+
[data-scope][data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
|
|
1196
|
+
--xh-_collection-bg: transparent;
|
|
1197
|
+
--xh-_collection-fg: var(--xh-tone-fg);
|
|
1198
|
+
}
|
|
1199
|
+
|
|
1200
|
+
[data-scope][data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
|
|
1201
|
+
--xh-_collection-bg: var(--xh-tone-subtle);
|
|
1202
|
+
--xh-_collection-fg: var(--xh-tone-fg);
|
|
1203
|
+
}
|
|
1204
|
+
|
|
1205
|
+
[data-scope][data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
|
|
1206
|
+
--xh-_collection-bg: var(--xh-tone-subtle);
|
|
1207
|
+
--xh-_collection-fg: var(--xh-tone-fg);
|
|
1208
|
+
}
|
|
1209
|
+
|
|
1210
|
+
[data-scope][data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
|
|
1211
|
+
--xh-_collection-bg: var(--xh-tone-subtle-hover);
|
|
1212
|
+
--xh-_collection-fg: var(--xh-tone-fg);
|
|
1213
|
+
|
|
1214
|
+
transition-duration: var(--xh-motion-duration-press);
|
|
1215
|
+
transition-timing-function: var(--xh-motion-ease-press);
|
|
1216
|
+
}
|
|
1217
|
+
|
|
1199
1218
|
[data-scope][data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
|
|
1200
1219
|
--xh-_collection-bg: var(--xh-collection-bg-selected, transparent);
|
|
1201
1220
|
--xh-_collection-fg: var(--xh-collection-fg-selected, var(--xh-material-frosted-fg));
|
|
@@ -1543,6 +1562,36 @@
|
|
|
1543
1562
|
--xh-_collection-indicator-fg: HighlightText;
|
|
1544
1563
|
}
|
|
1545
1564
|
|
|
1565
|
+
/* 语气在强制颜色下退出:逐态用系统色盖回家族缺省,只留图标与文案通道。
|
|
1566
|
+
语气段在媒体查询外的特指度比这里的基础态各高一级,必须逐条同形盖回,不能只写一条。 */
|
|
1567
|
+
[data-scope][data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
|
|
1568
|
+
--xh-_collection-bg: Canvas;
|
|
1569
|
+
--xh-_collection-fg: CanvasText;
|
|
1570
|
+
--xh-_collection-outline: transparent;
|
|
1571
|
+
--xh-_collection-indicator-fg: ButtonText;
|
|
1572
|
+
}
|
|
1573
|
+
|
|
1574
|
+
[data-scope][data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
|
|
1575
|
+
--xh-_collection-bg: Highlight;
|
|
1576
|
+
--xh-_collection-fg: HighlightText;
|
|
1577
|
+
--xh-_collection-outline: transparent;
|
|
1578
|
+
--xh-_collection-indicator-fg: HighlightText;
|
|
1579
|
+
}
|
|
1580
|
+
|
|
1581
|
+
[data-scope][data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
|
|
1582
|
+
--xh-_collection-bg: Canvas;
|
|
1583
|
+
--xh-_collection-fg: CanvasText;
|
|
1584
|
+
--xh-_collection-outline: Highlight;
|
|
1585
|
+
--xh-_collection-indicator-fg: Highlight;
|
|
1586
|
+
}
|
|
1587
|
+
|
|
1588
|
+
[data-scope][data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
|
|
1589
|
+
--xh-_collection-bg: Highlight;
|
|
1590
|
+
--xh-_collection-fg: HighlightText;
|
|
1591
|
+
--xh-_collection-outline: transparent;
|
|
1592
|
+
--xh-_collection-indicator-fg: HighlightText;
|
|
1593
|
+
}
|
|
1594
|
+
|
|
1546
1595
|
[data-scope][data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
|
|
1547
1596
|
--xh-_collection-bg: Canvas;
|
|
1548
1597
|
--xh-_collection-fg: CanvasText;
|
|
@@ -1785,7 +1834,7 @@
|
|
|
1785
1834
|
/* family/motion.css */
|
|
1786
1835
|
/* 定义 motion 样式。 */
|
|
1787
1836
|
|
|
1788
|
-
/*
|
|
1837
|
+
/* 共享关键帧的唯一真源。
|
|
1789
1838
|
*
|
|
1790
1839
|
* 动画名的查找只认「文档里有没有这个名字」:引用别处文件里的名字,那份文件不一定在场,
|
|
1791
1840
|
* 动画会静默地整个不跑。所以引用这里任一名字的皮肤都 @import 本文件,单独引入那份皮肤时
|
|
@@ -2120,7 +2169,7 @@
|
|
|
2120
2169
|
}
|
|
2121
2170
|
|
|
2122
2171
|
/* —— 触发器 ——
|
|
2123
|
-
浮在内容之上的单图标圆钮,接 Action Control floating
|
|
2172
|
+
浮在内容之上的单图标圆钮,接 Action Control floating 档:盒型(md = box-lg 48px,圆形)、
|
|
2124
2173
|
四态面、0.97 按压与 44px 命中区由家族配方按 data-xh-action-variant / -size 给出。
|
|
2125
2174
|
这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与几何槽映射。
|
|
2126
2175
|
整件只有这一颗按钮,槽名与其余一样不带部件段(照 float-button 的 --xh-float-button-size) */
|
|
@@ -2139,7 +2188,7 @@
|
|
|
2139
2188
|
--xh-action-border-pressed: var(--xh-back-top-border-hover, var(--xh-_action-variant-border-pressed));
|
|
2140
2189
|
--xh-action-border-focus-visible: var(--xh-back-top-border, var(--xh-_action-variant-border-focus-visible));
|
|
2141
2190
|
--xh-action-border-disabled: var(--xh-back-top-border, var(--xh-_action-variant-border-disabled));
|
|
2142
|
-
/*
|
|
2191
|
+
/* 矩阵各态无影(淡底与阴影互斥);outline 那一档的磨砂投影在下面另桥接 */
|
|
2143
2192
|
--xh-action-shadow-rest: var(--xh-back-top-shadow, none);
|
|
2144
2193
|
--xh-action-shadow-hover: var(--xh-back-top-shadow, none);
|
|
2145
2194
|
--xh-action-shadow-pressed: var(--xh-back-top-shadow, none);
|
|
@@ -2439,7 +2488,7 @@
|
|
|
2439
2488
|
}
|
|
2440
2489
|
|
|
2441
2490
|
/* 独立 Button 按下时缩一档;组内段却靠共边重叠一像素,单段缩放会同时撕开两侧接缝。
|
|
2442
|
-
组内仍保留 active 换底与撤高光,只把会改变外轮廓几何的 scale
|
|
2491
|
+
组内仍保留 active 换底与撤高光,只把会改变外轮廓几何的 scale 收掉(允许的只换面);
|
|
2443
2492
|
键盘与触屏的按压由 Headless 投影 data-pressed,与指针 :active 同一档。 */
|
|
2444
2493
|
[data-scope='button-group'][data-part='root']
|
|
2445
2494
|
> [data-scope='button'][data-part='root']:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]),
|
|
@@ -2487,7 +2536,7 @@
|
|
|
2487
2536
|
/* 一个尺寸档只换这几个私有槽,每一格与格内两段都从根上继承它们,
|
|
2488
2537
|
换档不必给每个部件各写一条选择器 */
|
|
2489
2538
|
--xh-_descriptions-gap: var(--xh-space-3);
|
|
2490
|
-
/* 标签是每一格的集合标题:叠着排时与取值隔 space-2
|
|
2539
|
+
/* 标签是每一格的集合标题:叠着排时与取值隔 space-2(集合标题与集合的间距) */
|
|
2491
2540
|
--xh-_descriptions-pair-gap: var(--xh-space-2);
|
|
2492
2541
|
--xh-_descriptions-label-gap: var(--xh-space-2);
|
|
2493
2542
|
--xh-_descriptions-py: var(--xh-space-2);
|
|
@@ -2737,10 +2786,10 @@
|
|
|
2737
2786
|
--xh-diff-view-skin: 1;
|
|
2738
2787
|
}
|
|
2739
2788
|
|
|
2740
|
-
/* 一张静态内容面:--xh-border-default 描边 + surface 底 +
|
|
2789
|
+
/* 一张静态内容面:--xh-border-default 描边 + surface 底 + 无影(边界只由描边承担);
|
|
2741
2790
|
头部、行号列与并排接缝的内部分隔线走另一支 --xh-diff-view-divider(subtle) */
|
|
2742
2791
|
[data-scope='diff-view'][data-part='root'] {
|
|
2743
|
-
/* 作者塞进部件里的图标与皮肤画的兜底字形同一把尺:md 档,随 data-size
|
|
2792
|
+
/* 作者塞进部件里的图标与皮肤画的兜底字形同一把尺:md 档,随 data-size 换档 */
|
|
2744
2793
|
--xh-icon-size: var(--xh-diff-view-icon-size, var(--xh-glyph-size-md));
|
|
2745
2794
|
|
|
2746
2795
|
/* 尺寸缺省档:不写 data-size 时的取值。三档都只写这三个私有槽,
|
|
@@ -2981,7 +3030,7 @@
|
|
|
2981
3030
|
color: var(--xh-diff-view-punctuation-fg, var(--xh-fg-subtle));
|
|
2982
3031
|
}
|
|
2983
3032
|
|
|
2984
|
-
/* 折起来的那一行:整行都是展开按钮。行是淡底承载面,向按钮下发 hover 200 → pressed 300
|
|
3033
|
+
/* 折起来的那一行:整行都是展开按钮。行是淡底承载面,向按钮下发 hover 200 → pressed 300 */
|
|
2985
3034
|
[data-scope='diff-view'][data-part='gap'] {
|
|
2986
3035
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
2987
3036
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
@@ -2999,7 +3048,7 @@
|
|
|
2999
3048
|
}
|
|
3000
3049
|
|
|
3001
3050
|
/* 展开按钮铺满折叠格,盒型、悬停与按下面由 Action Control 的 disclosure-trigger 档给(ghost 形态,
|
|
3002
|
-
|
|
3051
|
+
按下只换面不缩放);这里只把使用者槽映射到桥接槽:圆角归零贴住格边、纵向内衬归零、
|
|
3003
3052
|
高度锚在代码行高上让折叠格与相邻代码行同高,字号跟着正文走 */
|
|
3004
3053
|
[data-scope='diff-view'][data-part='gap-trigger'] {
|
|
3005
3054
|
--xh-action-radius: 0;
|
|
@@ -3175,7 +3224,7 @@
|
|
|
3175
3224
|
}
|
|
3176
3225
|
|
|
3177
3226
|
/*
|
|
3178
|
-
*
|
|
3227
|
+
* 触发器就是这一个原生按钮,是定尺的独立动作按钮:盒型、三档几何、四态面、0.97 按压与粗指针
|
|
3179
3228
|
* 命中区由家族配方按 data-xh-action-variant / -size 给出(缺省 subtle 由连接层显式投影,只有 solid 才品牌实心)。
|
|
3180
3229
|
* 这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与几何槽映射;
|
|
3181
3230
|
* 要换成品牌样式的作者改 --xh-download-trigger-* 这一族槽位,或直接写自己的类名。
|
|
@@ -3197,7 +3246,7 @@
|
|
|
3197
3246
|
--xh-action-border-pressed: var(--xh-download-trigger-border-hover, var(--xh-_action-variant-border-pressed));
|
|
3198
3247
|
--xh-action-border-focus-visible: var(--xh-download-trigger-border, var(--xh-_action-variant-border-focus-visible));
|
|
3199
3248
|
--xh-action-border-disabled: var(--xh-download-trigger-border-disabled, var(--xh-_action-variant-border-disabled));
|
|
3200
|
-
/*
|
|
3249
|
+
/* 矩阵各态无影(淡底与阴影互斥):solid 也不再悬停抬影,使用者槽仍可自行加 */
|
|
3201
3250
|
--xh-action-shadow-hover: var(--xh-download-trigger-shadow-hover, none);
|
|
3202
3251
|
--xh-action-radius: var(--xh-download-trigger-radius, var(--xh-shape-control));
|
|
3203
3252
|
--xh-action-visual-size: var(--xh-download-trigger-h, var(--xh-_action-profile-visual-size));
|
|
@@ -3261,7 +3310,7 @@
|
|
|
3261
3310
|
margin: auto;
|
|
3262
3311
|
border: var(--xh-stroke-thin) solid transparent;
|
|
3263
3312
|
border-block-start-color: var(--xh-_download-trigger-loading-fg);
|
|
3264
|
-
/* 正圆的加载环:正方盒取 circle
|
|
3313
|
+
/* 正圆的加载环:正方盒取 circle */
|
|
3265
3314
|
border-radius: var(--xh-shape-circle);
|
|
3266
3315
|
opacity: 0;
|
|
3267
3316
|
animation:
|
|
@@ -3535,7 +3584,7 @@
|
|
|
3535
3584
|
[data-scope='fieldset'][data-part='legend'] {
|
|
3536
3585
|
padding: 0;
|
|
3537
3586
|
margin-block-end: var(--xh-fieldset-legend-gap, var(--xh-space-2));
|
|
3538
|
-
/*
|
|
3587
|
+
/* 组标题是「一组字段的标题」,归集合标题角色:fg-muted,与组 --xh-space-2,字号字重同字段标签 */
|
|
3539
3588
|
color: var(--xh-fieldset-legend-fg, var(--xh-fg-muted));
|
|
3540
3589
|
font-size: var(--xh-fieldset-legend-font-size, var(--xh-text-label-size));
|
|
3541
3590
|
font-weight: var(--xh-fieldset-legend-font-weight, var(--xh-text-label-weight));
|
|
@@ -3802,7 +3851,7 @@
|
|
|
3802
3851
|
/* —— 形态:给展开列表里原生动作项用的面 ——
|
|
3803
3852
|
触发器的面由 Action Control 形态矩阵按 data-xh-action-variant 给(solid / subtle / ghost),
|
|
3804
3853
|
原生动作项读不到矩阵,这几块私有槽按矩阵同一张表镜像;ghost 与 outline 的悬停 / 按下走画布承载的
|
|
3805
|
-
阶梯(100 → 200
|
|
3854
|
+
阶梯(100 → 200)。缺省 outline(连接层不传 variant 时显式落)是磨砂面:背景、边缘、
|
|
3806
3855
|
顶光、投影与磨砂从同一份 M2 配方取,高对比、减少透明度、打印和强制色便能一起降级——钮浮在正文
|
|
3807
3856
|
之上,透空的面在任何内容上都读不出边界,所以 outline 这一档面留着 */
|
|
3808
3857
|
[data-scope='float-button'][data-part='root'][data-variant='solid'] {
|
|
@@ -3846,7 +3895,7 @@
|
|
|
3846
3895
|
}
|
|
3847
3896
|
|
|
3848
3897
|
/* —— 触发器 ——
|
|
3849
|
-
浮在内容之上的单图标圆钮,接 Action Control floating
|
|
3898
|
+
浮在内容之上的单图标圆钮,接 Action Control floating 档:盒型(md = box-lg 48px,圆形)、
|
|
3850
3899
|
四态面、0.97 按压与 44px 命中区由家族配方按 data-xh-action-variant / -size 给出。
|
|
3851
3900
|
这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与几何槽映射 */
|
|
3852
3901
|
[data-scope='float-button'][data-part='trigger'] {
|
|
@@ -3864,7 +3913,7 @@
|
|
|
3864
3913
|
--xh-action-border-pressed: var(--xh-float-button-border-hover, var(--xh-_action-variant-border-pressed));
|
|
3865
3914
|
--xh-action-border-focus-visible: var(--xh-float-button-border, var(--xh-_action-variant-border-focus-visible));
|
|
3866
3915
|
--xh-action-border-disabled: var(--xh-float-button-border, var(--xh-_action-variant-border-disabled));
|
|
3867
|
-
/*
|
|
3916
|
+
/* 矩阵各态无影(淡底与阴影互斥);outline 那一档的磨砂投影在下面另桥接 */
|
|
3868
3917
|
--xh-action-shadow-rest: var(--xh-float-button-shadow, none);
|
|
3869
3918
|
--xh-action-shadow-hover: var(--xh-float-button-shadow, none);
|
|
3870
3919
|
--xh-action-shadow-pressed: var(--xh-float-button-shadow, none);
|
|
@@ -4061,7 +4110,7 @@
|
|
|
4061
4110
|
皮肤只管层级、配色、圆角、阴影、把手的摆放与状态表现。 */
|
|
4062
4111
|
|
|
4063
4112
|
[data-scope='floating-panel'][data-part='root'] {
|
|
4064
|
-
/*
|
|
4113
|
+
/* 作者塞进面板里的图标按控件档取;标题栏上的按钮另由家族配方按各自的档下发字形尺 */
|
|
4065
4114
|
--xh-icon-size: var(--xh-floating-panel-icon-size, var(--xh-glyph-size-md));
|
|
4066
4115
|
|
|
4067
4116
|
/* 面板本身是 fixed 定位,root 只是作者那棵树里的容器,不参与排布 */
|
|
@@ -4079,7 +4128,7 @@
|
|
|
4079
4128
|
}
|
|
4080
4129
|
|
|
4081
4130
|
/*
|
|
4082
|
-
*
|
|
4131
|
+
* 开合触发器是页面上的独立文字按钮:盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
|
|
4083
4132
|
* 由家族配方按连接层投影的 data-xh-action-variant / -size 给出(此前只缩放不换底)。这里只把公开槽桥接到
|
|
4084
4133
|
* 矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与几何槽映射。
|
|
4085
4134
|
*/
|
|
@@ -4124,9 +4173,7 @@
|
|
|
4124
4173
|
面板整棵子树都在 positioner 底下,它一收就不生成盒子,退场动画一帧都播不出来。
|
|
4125
4174
|
真正的收起由宿主在退场结束后落成内联 display:none。 */
|
|
4126
4175
|
|
|
4127
|
-
/* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
|
|
4128
4176
|
[data-scope='floating-panel'][data-part='positioner'][data-state='open'] {
|
|
4129
|
-
will-change: opacity, scale;
|
|
4130
4177
|
animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
4131
4178
|
}
|
|
4132
4179
|
|
|
@@ -4199,7 +4246,7 @@
|
|
|
4199
4246
|
display: none;
|
|
4200
4247
|
}
|
|
4201
4248
|
|
|
4202
|
-
/*
|
|
4249
|
+
/* 浮层内标题:14 / 600 */
|
|
4203
4250
|
[data-scope='floating-panel'][data-part='title'] {
|
|
4204
4251
|
margin: 0;
|
|
4205
4252
|
flex: 1 1 auto;
|
|
@@ -4316,7 +4363,7 @@
|
|
|
4316
4363
|
|
|
4317
4364
|
/*
|
|
4318
4365
|
* —— 标题栏上的按钮 ——
|
|
4319
|
-
*
|
|
4366
|
+
* 形态钮与关闭钮是标题栏上的单图标钮:正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针
|
|
4320
4367
|
* 命中区由家族配方给出——磨砂白面上走画布承载阶梯悬停 --xh-bg-subtle(100)→ 按下 --xh-bg-subtle-hover(200),
|
|
4321
4368
|
* 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省);
|
|
4322
4369
|
* 静息前景取磨砂面的 muted 字色,悬停 / 按下回到 fg-default。
|
|
@@ -4349,7 +4396,7 @@
|
|
|
4349
4396
|
display: none;
|
|
4350
4397
|
}
|
|
4351
4398
|
|
|
4352
|
-
/* 当前形态的那颗钮是按下的开关(aria-pressed),无滑块开关的 on
|
|
4399
|
+
/* 当前形态的那颗钮是按下的开关(aria-pressed),无滑块开关的 on 态取品牌淡底:
|
|
4353
4400
|
rest 12% → hover 20% → pressed 28%,前景一律 --xh-fg-on-brand-subtle(对比度由该令牌承担);
|
|
4354
4401
|
淡底不是实心面,焦点吃库环 */
|
|
4355
4402
|
[data-scope='floating-panel'][data-part='window-state-trigger'][data-state='on'] {
|
|
@@ -4370,7 +4417,7 @@
|
|
|
4370
4417
|
}
|
|
4371
4418
|
}
|
|
4372
4419
|
|
|
4373
|
-
/* 正文是浮在页面之上的 Overlay
|
|
4420
|
+
/* 正文是浮在页面之上的 Overlay 滚动面:原生细条由 reset 层统一给,滚到头不把页面一起带走;
|
|
4374
4421
|
内容高度不动态变化,不写 scrollbar-gutter */
|
|
4375
4422
|
[data-scope='floating-panel'][data-part='body'] {
|
|
4376
4423
|
flex: 1 1 auto;
|
|
@@ -5786,7 +5833,7 @@
|
|
|
5786
5833
|
padding-block: var(--xh-heatmap-tooltip-py, var(--xh-space-1));
|
|
5787
5834
|
padding-inline: var(--xh-heatmap-tooltip-px, var(--xh-space-2));
|
|
5788
5835
|
border-radius: var(--xh-heatmap-tooltip-radius, var(--xh-shape-control));
|
|
5789
|
-
/* 与 Tooltip
|
|
5836
|
+
/* 与 Tooltip 同一副反白气泡:任何浮层都得有一圈非透明描边,描边从字色里兑两成,
|
|
5790
5837
|
深浅主题与语气换色时跟着字色走;影走 frosted 紧凑档,与 Tooltip 的 content 同深 */
|
|
5791
5838
|
border: var(--xh-stroke-thin) solid var(--xh-heatmap-tooltip-border, color-mix(in oklab, var(--xh-heatmap-tooltip-fg, var(--xh-bg-surface)) 20%, transparent));
|
|
5792
5839
|
background: var(--xh-heatmap-tooltip-bg, var(--xh-fg-default));
|
|
@@ -6064,7 +6111,7 @@
|
|
|
6064
6111
|
background: var(--xh-kbd-bg, var(--xh-bg-subtle));
|
|
6065
6112
|
color: var(--xh-kbd-fg, var(--xh-fg-muted));
|
|
6066
6113
|
font-family: var(--xh-kbd-font, inherit);
|
|
6067
|
-
/* 快捷键是次级标注,字号取 caption
|
|
6114
|
+
/* 快捷键是次级标注,字号取 caption 档 */
|
|
6068
6115
|
font-size: var(--xh-kbd-font-size, var(--xh-text-caption-size));
|
|
6069
6116
|
font-weight: var(--xh-kbd-font-weight, var(--xh-font-weight-medium));
|
|
6070
6117
|
line-height: var(--xh-leading-none);
|
|
@@ -6167,7 +6214,7 @@
|
|
|
6167
6214
|
}
|
|
6168
6215
|
|
|
6169
6216
|
/* 圆形裁切取 circle 档(50%):shape 的固定长度档画出来是胶囊不是椭圆,
|
|
6170
|
-
|
|
6217
|
+
裁切框的宽高由数据决定、两边通常不等长,只有百分比才随框变成椭圆;圆角只能来自语义形状令牌 */
|
|
6171
6218
|
[data-scope='image-cropper'][data-part='crop-area'][data-shape='round'] {
|
|
6172
6219
|
--xh-_image-cropper-corner-radius: var(--xh-shape-circle);
|
|
6173
6220
|
|
|
@@ -6251,7 +6298,7 @@
|
|
|
6251
6298
|
content: '';
|
|
6252
6299
|
}
|
|
6253
6300
|
|
|
6254
|
-
/* 把手静息是白面(bg-surface
|
|
6301
|
+
/* 把手静息是白面(bg-surface),悬停从同一语义面派生一档,不切到品牌淡底;拖动中才是品牌实心 */
|
|
6255
6302
|
[data-scope='image-cropper'][data-part='crop-handle']:hover:not([data-disabled], [data-readonly]) {
|
|
6256
6303
|
--xh-_image-cropper-handle-color: var(--xh-image-cropper-handle-bg-hover, var(--xh-bg-subtle));
|
|
6257
6304
|
}
|
|
@@ -6485,11 +6532,11 @@
|
|
|
6485
6532
|
|
|
6486
6533
|
/*
|
|
6487
6534
|
* 取下一页的按钮:与哨兵同一条通路的键盘入口,摆在列表末尾自成一行——铺满一行的独立动作条目,
|
|
6488
|
-
* 接 Action Control 的 row 档、outline
|
|
6535
|
+
* 接 Action Control 的 row 档、outline 形态:宽度由容器给、高度随内容、按下只换面不缩放;
|
|
6489
6536
|
* 盒几何、中性描边与透明底、悬停 / 按下 / 禁用面、焦点环与粗指针热区全由家族给,
|
|
6490
6537
|
* 白底承载 hover 100 → pressed 200。这里只把使用者槽映射到桥接槽,并把文案居中:
|
|
6491
6538
|
* 它是一行里唯一的东西,靠起始缘会像一条没对齐的列表项。
|
|
6492
|
-
* 行高不吃家族的单行档:row
|
|
6539
|
+
* 行高不吃家族的单行档:row 档允许换行、高度随内容,折行的文案走正文行高
|
|
6493
6540
|
*/
|
|
6494
6541
|
[data-scope='infinite-scroll'][data-part='load-more-trigger'] {
|
|
6495
6542
|
--xh-action-gap: var(--xh-infinite-scroll-load-more-gap, var(--xh-_action-profile-gap));
|
|
@@ -6542,7 +6589,7 @@
|
|
|
6542
6589
|
--xh-_input-group-font-size: var(--xh-control-font-md);
|
|
6543
6590
|
--xh-_input-group-bg: transparent;
|
|
6544
6591
|
--xh-_input-group-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
|
|
6545
|
-
/* 组壳按字段外壳画 outline
|
|
6592
|
+
/* 组壳按字段外壳画 outline 描边:静息 --xh-border-control、悬停升 -hover、聚焦换 -focus,无影 */
|
|
6546
6593
|
--xh-_input-group-border: var(--xh-border-control);
|
|
6547
6594
|
--xh-_input-group-border-hover: var(--xh-border-control-hover);
|
|
6548
6595
|
--xh-_input-group-border-focus: var(--xh-border-control-focus);
|
|
@@ -6575,7 +6622,7 @@
|
|
|
6575
6622
|
transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
|
|
6576
6623
|
}
|
|
6577
6624
|
|
|
6578
|
-
/* subtle:淡底顶替描边表达边界,描边只退成透明而不去掉;悬停浮出 --xh-border-control
|
|
6625
|
+
/* subtle:淡底顶替描边表达边界,描边只退成透明而不去掉;悬停浮出 --xh-border-control */
|
|
6579
6626
|
[data-scope='input-group'][data-part='root'][data-variant='subtle'] {
|
|
6580
6627
|
--xh-_input-group-bg: var(--xh-bg-subtle);
|
|
6581
6628
|
--xh-_input-group-bg-hover: var(--xh-bg-subtle-hover);
|
|
@@ -6805,7 +6852,7 @@
|
|
|
6805
6852
|
/* 缺省态(md 档)。等宽字体让层级缩进与值的长度对得齐。
|
|
6806
6853
|
逐类型配色走 --xh-syntax-* 语法令牌,与代码块的记号色同源、随主题明暗切换。 */
|
|
6807
6854
|
[data-scope='json-viewer'][data-part='root'] {
|
|
6808
|
-
/* 作者放进空态格里的图标按档取尺,缺省 md,随 data-size
|
|
6855
|
+
/* 作者放进空态格里的图标按档取尺,缺省 md,随 data-size 换档。
|
|
6809
6856
|
查看器自绘的状态字形(分支行首的展开方向 chevron)不读这支:它是指示符,与所在的把手盒同走
|
|
6810
6857
|
--xh-control-indicator-* 一族——branch-trigger 在自己身上把 --xh-icon-size 改接到盒的尺 */
|
|
6811
6858
|
--xh-icon-size: var(--xh-json-viewer-icon-size, var(--xh-glyph-size-md));
|
|
@@ -6826,7 +6873,7 @@
|
|
|
6826
6873
|
display: none;
|
|
6827
6874
|
}
|
|
6828
6875
|
|
|
6829
|
-
/* 面画在两档容器与空态格上,root
|
|
6876
|
+
/* 面画在两档容器与空态格上,root 只是壳。三档按边界三选一:outline 即基础规则
|
|
6830
6877
|
(--xh-border-default 描边 + surface 底 + 无影);淡底档描边透明、底换 subtle;
|
|
6831
6878
|
无框档边框留着但透明——去掉外框不会让行的位置跳一格 */
|
|
6832
6879
|
[data-scope='json-viewer'][data-part='root'][data-variant='subtle']
|
|
@@ -6857,7 +6904,7 @@
|
|
|
6857
6904
|
}
|
|
6858
6905
|
|
|
6859
6906
|
/* 常驻容器不是浮层:两轴都可能溢出——深层缩进往行首方向推、长字符串往行尾伸;
|
|
6860
|
-
页内结构容器走 reset
|
|
6907
|
+
页内结构容器走 reset 层的原生细条,不写 overscroll */
|
|
6861
6908
|
[data-scope='json-viewer'][data-part='tree'] {
|
|
6862
6909
|
display: flex;
|
|
6863
6910
|
flex-direction: column;
|
|
@@ -6945,7 +6992,7 @@
|
|
|
6945
6992
|
user-select: none;
|
|
6946
6993
|
}
|
|
6947
6994
|
|
|
6948
|
-
/* 按下只换面不缩放:白底承载 hover 100 → pressed 200
|
|
6995
|
+
/* 按下只换面不缩放:白底承载 hover 100 → pressed 200(集合行不允许零反馈);
|
|
6949
6996
|
指针按住由 :active 表出,Space / Enter 与触屏按住由 Headless 投影 data-pressed,三种输入同一副面 */
|
|
6950
6997
|
[data-scope='json-viewer'][data-part='branch-control']:not([data-disabled]):is(:active, [data-pressed]) {
|
|
6951
6998
|
background: var(--xh-json-viewer-row-bg-active, var(--xh-bg-subtle-hover));
|
|
@@ -7005,7 +7052,7 @@
|
|
|
7005
7052
|
}
|
|
7006
7053
|
|
|
7007
7054
|
/* 展开箭头与勾选标记同宽,两种行的文字起点才对得齐。
|
|
7008
|
-
盒里的 chevron
|
|
7055
|
+
盒里的 chevron 是指示符:与盒同边长,--xh-icon-size 在自己身上改接到盒的尺——
|
|
7009
7056
|
root 那支只管作者图标的 --xh-json-viewer-icon-size 不流进来,按图标档取的 20px 会比 16px 的盒还大;
|
|
7010
7057
|
branch-indicator 由适配器固定渲染在这颗把手里,继承即可 */
|
|
7011
7058
|
[data-scope='json-viewer'][data-part='branch-trigger'] {
|
|
@@ -7208,7 +7255,7 @@
|
|
|
7208
7255
|
}
|
|
7209
7256
|
|
|
7210
7257
|
/* 宽度过渡在这里声明一次,展开与折叠两档、以及 props 直接写进内联的宽度,走的都是这一条。
|
|
7211
|
-
占位档的侧栏是淡底承载面:把手摆进来时由它下发 hover 200 → pressed 300
|
|
7258
|
+
占位档的侧栏是淡底承载面:把手摆进来时由它下发 hover 200 → pressed 300;
|
|
7212
7259
|
覆盖档换成 elevated 白底,那一档的规则把阶梯写回 100 → 200 */
|
|
7213
7260
|
[data-scope='layout'][data-part='sider'] {
|
|
7214
7261
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
@@ -7335,7 +7382,7 @@
|
|
|
7335
7382
|
写成槽位而不是写死 ±100%:贴边用的是逻辑 inset,RTL 下行首落在物理右边,
|
|
7336
7383
|
位移若写死物理方向就会出现「贴在右边、却从左边滑进来」 */
|
|
7337
7384
|
--xh-_layout-sheet-shift: -100%;
|
|
7338
|
-
/* 这一档的底是 elevated
|
|
7385
|
+
/* 这一档的底是 elevated 白底:交互阶梯按承载面走,把上面占位档下发的 200 → 300 写回
|
|
7339
7386
|
白底的 hover 100 → pressed 200 */
|
|
7340
7387
|
--xh-action-host-bg-hover: var(--xh-bg-subtle);
|
|
7341
7388
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-hover);
|
|
@@ -7361,7 +7408,7 @@
|
|
|
7361
7408
|
env(safe-area-inset-left),
|
|
7362
7409
|
env(safe-area-inset-right)
|
|
7363
7410
|
);
|
|
7364
|
-
/* 盖在内容之上、带遮罩的一面走 sheet
|
|
7411
|
+
/* 盖在内容之上、带遮罩的一面走 sheet 三件套(--xh-material-elevated-bg / -border / -shadow),
|
|
7365
7412
|
贴着内容那一侧描一条边;占位档的侧栏不画投影 */
|
|
7366
7413
|
border-inline-end: var(--xh-stroke-thin) solid var(--xh-layout-border, var(--xh-material-elevated-border));
|
|
7367
7414
|
background: var(--xh-layout-sider-bg, var(--xh-material-elevated-bg));
|
|
@@ -7452,7 +7499,7 @@
|
|
|
7452
7499
|
--xh-_list-item-gap: var(--xh-space-3);
|
|
7453
7500
|
--xh-_list-title-size: var(--xh-control-font-md);
|
|
7454
7501
|
--xh-_list-description-size: var(--xh-control-caption-md);
|
|
7455
|
-
/* 条目悬停换到的面:坐在白底上是 100,淡底档的根把它抬到 200
|
|
7502
|
+
/* 条目悬停换到的面:坐在白底上是 100,淡底档的根把它抬到 200(按承载面的阶梯) */
|
|
7456
7503
|
--xh-_list-item-bg-hover: var(--xh-bg-subtle);
|
|
7457
7504
|
|
|
7458
7505
|
display: flex;
|
|
@@ -7619,7 +7666,7 @@
|
|
|
7619
7666
|
--xh-_log-font-size: var(--xh-text-secondary-size);
|
|
7620
7667
|
--xh-_log-content-px: var(--xh-space-3);
|
|
7621
7668
|
|
|
7622
|
-
/* 一张静态内容面:--xh-border-default 描边 + surface 底 +
|
|
7669
|
+
/* 一张静态内容面:--xh-border-default 描边 + surface 底 + 无影(描边与淡底互斥),
|
|
7623
7670
|
与 code-view / diff-view / json-viewer 同走 solid */
|
|
7624
7671
|
position: relative;
|
|
7625
7672
|
display: flex;
|
|
@@ -7700,7 +7747,7 @@
|
|
|
7700
7747
|
|
|
7701
7748
|
/* 回到底部:浮在视口右下角,收起时不卸载只隐藏。盒型、悬停 / 按下面与缩放由 Action Control 的
|
|
7702
7749
|
floating 档给(circle 正方盒、ghost 形态:白底承载 hover 100 → pressed 200);材质随角落浮钮族走
|
|
7703
|
-
frosted 四件套(底 + 边 + 影 +
|
|
7750
|
+
frosted 四件套(底 + 边 + 影 + 磨砂),这里只把使用者槽映射到桥接槽:
|
|
7704
7751
|
字形按 xs 档取 --xh-_action-profile-glyph-size(16px),与 back-top 同一把尺 */
|
|
7705
7752
|
[data-scope='log'][data-part='scroll-to-end-trigger'] {
|
|
7706
7753
|
--xh-_log-scroll-to-end-trigger-shadow: var(--xh-log-scroll-to-end-trigger-shadow, var(--xh-material-frosted-shadow));
|
|
@@ -8503,8 +8550,6 @@
|
|
|
8503
8550
|
|
|
8504
8551
|
[data-scope='mention'][data-part='content'][data-state='open'] {
|
|
8505
8552
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
8506
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
8507
|
-
will-change: opacity, translate;
|
|
8508
8553
|
}
|
|
8509
8554
|
|
|
8510
8555
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -8739,7 +8784,7 @@
|
|
|
8739
8784
|
--xh-_page-header-radius: var(--xh-shape-surface);
|
|
8740
8785
|
}
|
|
8741
8786
|
|
|
8742
|
-
/* outline 是一张静态内容面:--xh-border-default 描边撑住这块面的边界 + surface
|
|
8787
|
+
/* outline 是一张静态内容面:--xh-border-default 描边撑住这块面的边界 + surface 底,不叠投影;
|
|
8743
8788
|
--xh-border-subtle 只作 ghost 贴底那条分隔线用,不当根面外边 */
|
|
8744
8789
|
[data-scope='page-header'][data-part='root'][data-variant='outline'] {
|
|
8745
8790
|
border: var(--xh-stroke-thin) solid var(--xh-page-header-border, var(--xh-border-default));
|
|
@@ -9229,7 +9274,7 @@
|
|
|
9229
9274
|
}
|
|
9230
9275
|
|
|
9231
9276
|
/*
|
|
9232
|
-
*
|
|
9277
|
+
* 触发器是页面上的独立文字按钮:盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
|
|
9233
9278
|
* 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则,
|
|
9234
9279
|
* 只把作者塞进按钮的图标接到随档字形尺(md = 20px)。
|
|
9235
9280
|
*/
|
|
@@ -9291,7 +9336,7 @@
|
|
|
9291
9336
|
/* 面板排成三列:左列吃掉剩余宽度,右两列各摆一颗按钮。
|
|
9292
9337
|
标题、说明与作者塞进来的内容各占一整行,两颗按钮因此并排落在最后一行的右侧。 */
|
|
9293
9338
|
[data-scope='popconfirm'][data-part='content'] {
|
|
9294
|
-
/*
|
|
9339
|
+
/* 作者塞进面板里的图标按控件档取;两颗动作钮另由家族配方按 sm 档下发字形尺 */
|
|
9295
9340
|
--xh-icon-size: var(--xh-popconfirm-icon-size, var(--xh-glyph-size-md));
|
|
9296
9341
|
/* 尺寸档只换这两个私有槽 */
|
|
9297
9342
|
--xh-_popconfirm-pad: var(--xh-surface-pad-md);
|
|
@@ -9308,7 +9353,7 @@
|
|
|
9308
9353
|
/* 说明文案长度由作者给,矮视口下不限高面板会整块伸出视口且滚不到 */
|
|
9309
9354
|
max-block-size: min(var(--xh-popconfirm-max-h, var(--xh-overlay-max-h)), var(--xh-_popconfirm-available-h));
|
|
9310
9355
|
overflow-y: auto;
|
|
9311
|
-
/* 浮在页面之上的 Overlay
|
|
9356
|
+
/* 浮在页面之上的 Overlay 滚动面:滚到头不把页面一起带走 */
|
|
9312
9357
|
overscroll-behavior: contain;
|
|
9313
9358
|
padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-pad));
|
|
9314
9359
|
padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-pad));
|
|
@@ -9352,8 +9397,6 @@
|
|
|
9352
9397
|
|
|
9353
9398
|
[data-scope='popconfirm'][data-part='content'][data-state='open'] {
|
|
9354
9399
|
animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
9355
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
9356
|
-
will-change: opacity, scale, translate;
|
|
9357
9400
|
}
|
|
9358
9401
|
|
|
9359
9402
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -9384,7 +9427,7 @@
|
|
|
9384
9427
|
color: var(--xh-popconfirm-title-fg, var(--xh-material-frosted-fg));
|
|
9385
9428
|
}
|
|
9386
9429
|
|
|
9387
|
-
/*
|
|
9430
|
+
/* 说明文字走说明档:13px + fg-muted */
|
|
9388
9431
|
[data-scope='popconfirm'][data-part='description'] {
|
|
9389
9432
|
margin: 0;
|
|
9390
9433
|
min-inline-size: 0;
|
|
@@ -9409,7 +9452,7 @@
|
|
|
9409
9452
|
|
|
9410
9453
|
/*
|
|
9411
9454
|
* —— 两颗按钮 ——
|
|
9412
|
-
*
|
|
9455
|
+
* 确认与取消都是浮层末行的文字按钮:盒型、sm 档几何、四态面、0.97 按压并换底、粗指针命中区与
|
|
9413
9456
|
* 强制色由家族配方按连接层投影的 data-xh-action-variant / -size 给出。这里只把公开槽桥接到矩阵之前
|
|
9414
9457
|
* (使用者槽 → 形态矩阵 → 家族缺省)与几何映射;内衬与圆角槽取两颗共用的 action 段。
|
|
9415
9458
|
*/
|
|
@@ -9434,7 +9477,7 @@
|
|
|
9434
9477
|
grid-column: 3;
|
|
9435
9478
|
}
|
|
9436
9479
|
|
|
9437
|
-
/*
|
|
9480
|
+
/* 确认是实心的主操作。底色走共享语气槽:作者在 content 上写 data-tone="danger"
|
|
9438
9481
|
就整体换成危险色,不写则用品牌色——配方 solid 列本就读 --xh-_tone,这里只桥接使用者槽 */
|
|
9439
9482
|
[data-scope='popconfirm'][data-part='confirm-trigger'] {
|
|
9440
9483
|
--xh-action-bg-rest: var(--xh-popconfirm-confirm-bg, var(--xh-_action-variant-bg-rest));
|
|
@@ -9533,7 +9576,7 @@
|
|
|
9533
9576
|
}
|
|
9534
9577
|
|
|
9535
9578
|
/* root 就是视觉盒:描边、底色、圆角、聚焦环、悬停与禁用面由 Field Chrome 家族画在它身上(静息描边式:
|
|
9536
|
-
canvas 底 + --xh-border-control 描边 + 无影,不用 soft
|
|
9579
|
+
canvas 底 + --xh-border-control 描边 + 无影,不用 soft,登记的例外只在 8px surface 圆角),内部 textarea
|
|
9537
9580
|
无边框;align-items: flex-end 让按钮随输入框长高贴着底边。
|
|
9538
9581
|
三个视觉轴都落在 root 上:形态三档由家族按 data-variant 生成,语气管用哪族颜色,尺寸管高度与字号 */
|
|
9539
9582
|
[data-scope='prompt-input'][data-part='root'] {
|
|
@@ -9800,7 +9843,7 @@
|
|
|
9800
9843
|
* Typography prose 里的 <pre>——它是库内唯一不带 data-part 的滚动面,作者只写 <pre> 不写角色。
|
|
9801
9844
|
* 皮肤不得再手写 scrollbar-width / scrollbar-color(stylelint 判红),要藏条写 none。
|
|
9802
9845
|
* 这里不写 scrollbar-gutter:auto 是初始值,stable 只给内容高度会变的容器由皮肤显式写。
|
|
9803
|
-
* ::-webkit-scrollbar-thumb 的圆角取 pill:原生滑块与自绘 scrollbar:thumb
|
|
9846
|
+
* ::-webkit-scrollbar-thumb 的圆角取 pill:原生滑块与自绘 scrollbar:thumb 同为一维对象,
|
|
9804
9847
|
* 不再按厚度折半凑半圆,三档厚度都是同一身份。
|
|
9805
9848
|
*
|
|
9806
9849
|
* 令牌住在 xihan.tokens 层、排在本层之后,但自定义属性的求值不受层序影响:
|
|
@@ -9865,13 +9908,13 @@
|
|
|
9865
9908
|
--xh-reasoning-skin: 1;
|
|
9866
9909
|
}
|
|
9867
9910
|
|
|
9868
|
-
/* 一张淡底面:--xh-bg-subtle 底 + 透明边位 +
|
|
9869
|
-
缺省淡底承载开关:向它下发 hover 200 → pressed 300
|
|
9911
|
+
/* 一张淡底面:--xh-bg-subtle 底 + 透明边位 + 无影(subtle 无影),描边留给 outline 档打开。
|
|
9912
|
+
缺省淡底承载开关:向它下发 hover 200 → pressed 300 的阶梯,白底档在形态规则里改回 100 → 200 */
|
|
9870
9913
|
[data-scope='reasoning'][data-part='root'] {
|
|
9871
9914
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
9872
9915
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
9873
9916
|
|
|
9874
|
-
/*
|
|
9917
|
+
/* 作者塞进两个图形位的图标与皮肤画的兜底字形同一把尺:按档取,与开关的家族档同步——
|
|
9875
9918
|
不写 data-size 时字号是 sm 档,字形随之取 sm */
|
|
9876
9919
|
--xh-_reasoning-icon-size: var(--xh-glyph-size-sm);
|
|
9877
9920
|
--xh-icon-size: var(--xh-reasoning-icon-size, var(--xh-_reasoning-icon-size));
|
|
@@ -9900,7 +9943,7 @@
|
|
|
9900
9943
|
|
|
9901
9944
|
/* —— 形态 —— */
|
|
9902
9945
|
/* 缺省档即 subtle,写在上面那条基础规则里 */
|
|
9903
|
-
/* 描边分区:--xh-border-default 描边 + surface
|
|
9946
|
+
/* 描边分区:--xh-border-default 描边 + surface 底(静态内容面);
|
|
9904
9947
|
白底承载面把开关的阶梯改回 hover 100 → pressed 200 */
|
|
9905
9948
|
[data-scope='reasoning'][data-part='root'][data-variant='outline'] {
|
|
9906
9949
|
--xh-action-host-bg-hover: var(--xh-bg-subtle);
|
|
@@ -9928,7 +9971,7 @@
|
|
|
9928
9971
|
}
|
|
9929
9972
|
|
|
9930
9973
|
/* 开关铺满一行,盒型、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给(ghost 形态,
|
|
9931
|
-
阶梯由根按承载面经 host
|
|
9974
|
+
阶梯由根按承载面经 host 槽下发,按下只换面不缩放);这里只把使用者槽映射到桥接槽:
|
|
9932
9975
|
圆角归零贴住面边,内衬与字号沿用本组件的档位(不取 profile 的内衬,几何不变),字色三态都停在
|
|
9933
9976
|
弱一档的 muted(开关不是正文);字形尺由根按同一档位给 */
|
|
9934
9977
|
[data-scope='reasoning'][data-part='trigger'] {
|
|
@@ -10429,17 +10472,17 @@
|
|
|
10429
10472
|
--xh-_segmented-px: var(--xh-control-px-md);
|
|
10430
10473
|
--xh-_segmented-gap: var(--xh-control-gap-md);
|
|
10431
10474
|
--xh-_segmented-font-size: var(--xh-control-font-md);
|
|
10432
|
-
/*
|
|
10475
|
+
/* 指示器(有滑块开关的白色抬起面)的底、描边与选中段的文字色;没写 data-tone 时就是这里的取值 */
|
|
10433
10476
|
--xh-_segmented-indicator-bg: var(--xh-bg-surface-raised);
|
|
10434
10477
|
--xh-_segmented-fg-selected: var(--xh-fg-default);
|
|
10435
|
-
/* 轨道是淡底承载面:段坐在它上面,悬停 200 → 按下 300
|
|
10478
|
+
/* 轨道是淡底承载面:段坐在它上面,悬停 200 → 按下 300,host 槽向内下发同一副阶梯 */
|
|
10436
10479
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
10437
10480
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
10438
10481
|
|
|
10439
10482
|
/* 一行排不下就折行:每个选项都必须看得见、点得到,硬撑一行会把末尾几段顶出容器。
|
|
10440
10483
|
段各自带圆角,折行不会切角;不改成横向滚动是因为段离轨道内沿只有一格衬距,
|
|
10441
10484
|
轨道一旦成为滚动容器,段的焦点环(画在段外侧 2px 处)会被裁掉。
|
|
10442
|
-
|
|
10485
|
+
轨道是一块淡底面:--xh-bg-subtle 底 + 同宽透明占位边 + 无影,边界由滑块的描边与轨道底色的落差承担 */
|
|
10443
10486
|
position: relative;
|
|
10444
10487
|
display: inline-flex;
|
|
10445
10488
|
flex-wrap: wrap;
|
|
@@ -10559,7 +10602,7 @@
|
|
|
10559
10602
|
white-space: nowrap;
|
|
10560
10603
|
cursor: pointer;
|
|
10561
10604
|
user-select: none;
|
|
10562
|
-
/*
|
|
10605
|
+
/* 段是轨道里铺开的一段(Segmented item 归行级),按下只换面不缩放:transition 里没有 scale */
|
|
10563
10606
|
transition:
|
|
10564
10607
|
color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
|
|
10565
10608
|
background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
|
|
@@ -10580,14 +10623,14 @@
|
|
|
10580
10623
|
}
|
|
10581
10624
|
|
|
10582
10625
|
/* 悬停只提亮未选中的那几段:选中段的底下压着指示器,再变色就成了两套强调。
|
|
10583
|
-
底色用中性的悬停档——它是「指哪一段」的轻反馈,不表达选中;段坐在淡底轨道里,悬停取 200
|
|
10626
|
+
底色用中性的悬停档——它是「指哪一段」的轻反馈,不表达选中;段坐在淡底轨道里,悬停取 200 */
|
|
10584
10627
|
[data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-state='checked']):hover {
|
|
10585
10628
|
background-color: var(--xh-segmented-item-bg-hover, var(--xh-bg-subtle-hover));
|
|
10586
10629
|
color: var(--xh-segmented-item-fg-hover, var(--xh-fg-default));
|
|
10587
10630
|
}
|
|
10588
10631
|
|
|
10589
10632
|
/* 按下去要有回应:未选中段换到按下面(淡底承载 300),几何不动;只读段不压。
|
|
10590
|
-
|
|
10633
|
+
选中段不叠按下面:它压着的白色滑块本身就是选中身份(有滑块开关无叠加态) */
|
|
10591
10634
|
[data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-readonly]):not([data-state='checked']):is(:active, [data-pressed]) {
|
|
10592
10635
|
background-color: var(--xh-segmented-item-bg-pressed, var(--xh-bg-subtle-active));
|
|
10593
10636
|
transition-duration: var(--xh-motion-duration-press);
|
|
@@ -10632,7 +10675,7 @@
|
|
|
10632
10675
|
inset-block-start: var(--xh-_segmented-indicator-y);
|
|
10633
10676
|
inline-size: var(--xh-_segmented-indicator-w);
|
|
10634
10677
|
block-size: var(--xh-_segmented-indicator-h);
|
|
10635
|
-
/*
|
|
10678
|
+
/* 白色抬起面三件(有滑块开关):surface-raised 底 + border-default 描边 + raised 影,描边必须在,影只是加成。
|
|
10636
10679
|
尺寸由连接层按段的盒量出,描边吃进盒里(border-box),滑块与段仍是同一块矩形 */
|
|
10637
10680
|
border: var(--xh-stroke-thin) solid var(--xh-segmented-indicator-border, var(--xh-border-default));
|
|
10638
10681
|
border-radius: var(--xh-segmented-indicator-radius, var(--xh-shape-inset));
|
|
@@ -10706,7 +10749,7 @@
|
|
|
10706
10749
|
gap: var(--xh-signature-pad-gap, var(--xh-space-2));
|
|
10707
10750
|
}
|
|
10708
10751
|
|
|
10709
|
-
/*
|
|
10752
|
+
/* 复合单字段的标签:14 / 500 / fg-default,不随档;贴画布 space-1——
|
|
10710
10753
|
容器的 gap 归画布之后的部件,标签在它之上补一段差值把距离收成目标值 */
|
|
10711
10754
|
[data-scope='signature-pad'][data-part='label'] {
|
|
10712
10755
|
margin-block-end: calc(
|
|
@@ -10725,7 +10768,7 @@
|
|
|
10725
10768
|
/* 画布是块状的写字区:宽度铺满外层,高度由宽高比决定。
|
|
10726
10769
|
控件行高那把尺量的是一行控件,一块要写字的面积用不上它。
|
|
10727
10770
|
touch-action 由连接层内联写死,触摸落笔才不会被页面滚动抢走。
|
|
10728
|
-
|
|
10771
|
+
外壳按字段规则自绘(登记的画布型字段例外:字段家族配方钉死控件行高,画布按宽高比撑高吃不下它):
|
|
10729
10772
|
静息透明底 + border-control 描边 + control 圆角 + 无影 */
|
|
10730
10773
|
[data-scope='signature-pad'][data-part='control'] {
|
|
10731
10774
|
display: block;
|
|
@@ -10754,13 +10797,13 @@
|
|
|
10754
10797
|
}
|
|
10755
10798
|
|
|
10756
10799
|
/* 只读仍看得见签名,只是改不动:收掉手型,别暗示"在这儿能写";
|
|
10757
|
-
|
|
10800
|
+
面按字段只读规则只换到淡底,描边不动 */
|
|
10758
10801
|
[data-scope='signature-pad'][data-part='control'][data-readonly]:not([data-disabled]) {
|
|
10759
10802
|
background: var(--xh-signature-pad-bg-readonly, var(--xh-bg-subtle));
|
|
10760
10803
|
cursor: default;
|
|
10761
10804
|
}
|
|
10762
10805
|
|
|
10763
|
-
/*
|
|
10806
|
+
/* 字段禁用面:描边退到 border-default、底换淡底 */
|
|
10764
10807
|
[data-scope='signature-pad'][data-part='control'][data-disabled] {
|
|
10765
10808
|
border-color: var(--xh-signature-pad-border-disabled, var(--xh-border-default));
|
|
10766
10809
|
background: var(--xh-signature-pad-bg-disabled, var(--xh-bg-subtle));
|
|
@@ -10783,9 +10826,9 @@
|
|
|
10783
10826
|
}
|
|
10784
10827
|
|
|
10785
10828
|
/*
|
|
10786
|
-
*
|
|
10829
|
+
* 清空按钮是画布旁的独立文字按钮:盒型、sm 档几何、outline 四态面、0.97 按压与粗指针命中区由家族配方
|
|
10787
10830
|
* 按连接层投影的 data-xh-action-variant / -size 给出(缺省 outline,白底承载阶梯 100 → 200)。这里只把公开槽
|
|
10788
|
-
* 桥接到矩阵之前(使用者槽 → 形态矩阵 →
|
|
10831
|
+
* 桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与几何槽映射,矩阵各态无影(淡底与阴影互斥)。
|
|
10789
10832
|
*/
|
|
10790
10833
|
[data-scope='signature-pad'][data-part='clear-trigger'] {
|
|
10791
10834
|
--xh-action-bg-rest: var(--xh-signature-pad-clear-bg, var(--xh-_action-variant-bg-rest));
|
|
@@ -10825,7 +10868,7 @@
|
|
|
10825
10868
|
--xh-action-ring-color-focus-visible: currentColor;
|
|
10826
10869
|
}
|
|
10827
10870
|
|
|
10828
|
-
/*
|
|
10871
|
+
/* 签没签的那句话是说明角色:13 / fg-muted / leading-normal。读屏靠它播报,看得见的人也用得上,因此不做视觉隐藏 */
|
|
10829
10872
|
[data-scope='signature-pad'][data-part='status'] {
|
|
10830
10873
|
color: var(--xh-signature-pad-status-fg, var(--xh-fg-muted));
|
|
10831
10874
|
font-size: var(--xh-signature-pad-status-font-size, var(--xh-text-secondary-size));
|
|
@@ -10995,7 +11038,7 @@
|
|
|
10995
11038
|
padding-inline: var(--xh-tag-px, var(--xh-_tag-px));
|
|
10996
11039
|
padding-block: var(--xh-tag-py, var(--xh-_tag-py));
|
|
10997
11040
|
border: var(--xh-stroke-thin) solid var(--xh-tag-border, var(--xh-material-soft-border));
|
|
10998
|
-
/* 状态 chip
|
|
11041
|
+
/* 状态 chip 的身份是胶囊(pill 只给状态 chip 与一维对象) */
|
|
10999
11042
|
border-radius: var(--xh-tag-radius, var(--xh-shape-pill));
|
|
11000
11043
|
background: var(--xh-tag-bg, var(--xh-material-soft-bg));
|
|
11001
11044
|
box-shadow: var(--xh-tag-shadow, var(--xh-material-soft-shadow));
|
|
@@ -11076,7 +11119,7 @@
|
|
|
11076
11119
|
transition-timing-function: var(--xh-motion-ease-press);
|
|
11077
11120
|
}
|
|
11078
11121
|
|
|
11079
|
-
/*
|
|
11122
|
+
/* 按住的叉落着焦点(focus-visible + pressed 保留焦点环):按压面是从字色兑出的 22% 底,
|
|
11080
11123
|
压在淡底 / 选中面上把面往字色那头带了一档,默认环与这块混色面在浅色档上只剩 2.2–2.9。
|
|
11081
11124
|
环改取叉自己的字色:按压面正是从这支色兑出来的,字色压在它上面的对比与字压在标签面上同源,
|
|
11082
11125
|
六族语气与深浅两态都过 3:1;实心档本来就取字色,这条与它同一口径 */
|
|
@@ -12493,10 +12536,10 @@
|
|
|
12493
12536
|
--xh-alert-skin: 1;
|
|
12494
12537
|
}
|
|
12495
12538
|
|
|
12496
|
-
/* 提示本体是一层中性 surface:边界由 --xh-border-default
|
|
12539
|
+
/* 提示本体是一层中性 surface:边界由 --xh-border-default 描边承担、无影(静态反馈面),
|
|
12497
12540
|
语气只落到图标与标题,不会用整块彩底抢走正文层级。 */
|
|
12498
12541
|
[data-scope='alert'][data-part='root'] {
|
|
12499
|
-
/* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺:Feedback 指示符统一 md
|
|
12542
|
+
/* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺:Feedback 指示符统一 md 档 */
|
|
12500
12543
|
--xh-icon-size: var(--xh-alert-icon-size, var(--xh-glyph-size-md));
|
|
12501
12544
|
|
|
12502
12545
|
display: flex;
|
|
@@ -12682,7 +12725,7 @@
|
|
|
12682
12725
|
--xh-_empty-state-gap: var(--xh-stack-gap-md);
|
|
12683
12726
|
--xh-_empty-state-py: var(--xh-section-py-md);
|
|
12684
12727
|
--xh-_empty-state-icon-size: var(--xh-glyph-size-2xl);
|
|
12685
|
-
/* 标题走 Surface / Feedback 标题档 14/600
|
|
12728
|
+
/* 标题走 Surface / Feedback 标题档 14/600;sm 同档只缩图形与留白,lg 升到页面级 heading-3 */
|
|
12686
12729
|
--xh-_empty-state-title-size: var(--xh-text-label-size);
|
|
12687
12730
|
/* 图标区的强调色:由 data-status(状态码)或 data-tone(语气)换掉;两样都没写就退成中性 */
|
|
12688
12731
|
--xh-_empty-state-accent: var(--xh-fg-subtle);
|
|
@@ -13189,7 +13232,7 @@
|
|
|
13189
13232
|
}
|
|
13190
13233
|
|
|
13191
13234
|
[data-scope='accordion'][data-part='root'] {
|
|
13192
|
-
/* 作者塞进正文里的图标与皮肤画的兜底字形同一把尺:md
|
|
13235
|
+
/* 作者塞进正文里的图标与皮肤画的兜底字形同一把尺:md 档,标题栏上另按家族档取值 */
|
|
13193
13236
|
--xh-icon-size: var(--xh-accordion-icon-size, var(--xh-glyph-size-md));
|
|
13194
13237
|
|
|
13195
13238
|
/* 尺寸档只换正文这两个私有槽,正文从 root 继承它们;标题栏的三档几何由家族 disclosure-trigger 档给 */
|
|
@@ -13274,7 +13317,7 @@
|
|
|
13274
13317
|
border-inline-start: 0;
|
|
13275
13318
|
}
|
|
13276
13319
|
|
|
13277
|
-
/* outline:一张静态内容面,--xh-border-default 描边 + surface 底 +
|
|
13320
|
+
/* outline:一张静态内容面,--xh-border-default 描边 + surface 底 + 无影(边界只由描边承担);
|
|
13278
13321
|
根的外边走 --xh-accordion-border,与条与条之间的分隔线槽 --xh-accordion-item-border 各管各的 */
|
|
13279
13322
|
[data-scope='accordion'][data-part='root'][data-variant='outline'] {
|
|
13280
13323
|
border: var(--xh-stroke-thin) solid var(--xh-accordion-border, var(--xh-border-default));
|
|
@@ -13285,7 +13328,7 @@
|
|
|
13285
13328
|
}
|
|
13286
13329
|
|
|
13287
13330
|
/* subtle:同一块连续表面,底换成淡底,描边让位给底色但留住 1px 边位(三档几何一致);
|
|
13288
|
-
淡底承载面向标题栏下发 hover 200 → pressed 300
|
|
13331
|
+
淡底承载面向标题栏下发 hover 200 → pressed 300 */
|
|
13289
13332
|
[data-scope='accordion'][data-part='root'][data-variant='subtle'] {
|
|
13290
13333
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
13291
13334
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
@@ -13314,7 +13357,7 @@
|
|
|
13314
13357
|
}
|
|
13315
13358
|
|
|
13316
13359
|
/* 标题栏铺满一行,盒型、三档几何、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给
|
|
13317
|
-
(ghost 形态:白底承载 hover 100 → pressed 200,淡底容器由根下发 host
|
|
13360
|
+
(ghost 形态:白底承载 hover 100 → pressed 200,淡底容器由根下发 host 槽;按下只换面不缩放);
|
|
13318
13361
|
这里只把使用者槽映射到桥接槽:字色三态同值(家族的 hover / pressed 字色规则比皮肤更特定,不映射会被换回
|
|
13319
13362
|
缺省字色),字形按标题栏自己的档位取 --xh-_action-profile-glyph-size;边归零贴住条目,几何与迁移前一致 */
|
|
13320
13363
|
[data-scope='accordion'][data-part='trigger'] {
|
|
@@ -13336,7 +13379,7 @@
|
|
|
13336
13379
|
}
|
|
13337
13380
|
|
|
13338
13381
|
/* 展开态自带一个槽:与常态共用一个的话,作者一改常态字色,
|
|
13339
|
-
展开那一档的语气高亮就跟着被抹平,再也分不开。悬停 /
|
|
13382
|
+
展开那一档的语气高亮就跟着被抹平,再也分不开。悬停 / 按下的面与收起态同档(open 与家族 hover 同档中性) */
|
|
13340
13383
|
[data-scope='accordion'][data-part='trigger'][data-state='open'] {
|
|
13341
13384
|
--xh-action-fg-rest: var(--xh-accordion-trigger-fg-open, var(--xh-_accordion-open-fg));
|
|
13342
13385
|
--xh-action-fg-hover: var(--xh-accordion-trigger-fg-open, var(--xh-_accordion-open-fg));
|
|
@@ -13356,7 +13399,7 @@
|
|
|
13356
13399
|
flex: none;
|
|
13357
13400
|
color: var(--xh-accordion-indicator-fg, var(--xh-fg-muted));
|
|
13358
13401
|
line-height: var(--xh-leading-none);
|
|
13359
|
-
/*
|
|
13402
|
+
/* 指示器与正文同档转向:正文 enter 档展开,箭头也用同一段时长翻过去 */
|
|
13360
13403
|
transition: rotate var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
13361
13404
|
}
|
|
13362
13405
|
|
|
@@ -13431,7 +13474,7 @@
|
|
|
13431
13474
|
--xh-_anchor-link-px: var(--xh-control-px-md);
|
|
13432
13475
|
/* 当前那一节的指示条与文字随语气走。没写 data-tone 时这两个槽都没被声明,退回品牌色。
|
|
13433
13476
|
指示条是装饰性的色条,取柔和档;文字要压在普通背景上读,取语气的文字档——
|
|
13434
|
-
|
|
13477
|
+
导航当前页缺省是 --xh-fg-brand-strong,比指示条深一档。
|
|
13435
13478
|
聚焦环不在其列,它恒是 --xh-ring-focus */
|
|
13436
13479
|
--xh-_anchor-accent: var(--xh-_tone-soft, var(--xh-fg-brand));
|
|
13437
13480
|
--xh-_anchor-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
|
|
@@ -13493,7 +13536,7 @@
|
|
|
13493
13536
|
}
|
|
13494
13537
|
|
|
13495
13538
|
/* 链接的几何、字号与面全经家族桥接槽:静息 muted / regular,悬停走白底承载 hover 100 + default 字,
|
|
13496
|
-
按下 pressed 200
|
|
13539
|
+
按下 pressed 200 只换面;当前那一节(导航当前页)brand-strong 字色(随语气的
|
|
13497
13540
|
--xh-_anchor-accent-text)+ medium 字重都跟着变,2px 指示线放了 indicator 部件由部件滑动、没放则由
|
|
13498
13541
|
下面的静态线规则画在当前链接自己身上。本条 (0,2,0) 压过家族基础块 (0,1,0),不能再写 color / background。
|
|
13499
13542
|
position: relative 是静态线的定位参照 */
|
|
@@ -13567,7 +13610,7 @@
|
|
|
13567
13610
|
inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
|
|
13568
13611
|
}
|
|
13569
13612
|
|
|
13570
|
-
/* 目录里没放 indicator
|
|
13613
|
+
/* 目录里没放 indicator 部件时,当前那一节的链接自画一条静态指示线(导航当前页):
|
|
13571
13614
|
与 Tabs line 档同一取法,作者不必为了这条线多放一个部件。
|
|
13572
13615
|
线画在当前链接的 ::after 上,以链接盒为定位参照(上面已给 position: relative),
|
|
13573
13616
|
厚度 / 颜色 / 圆角与 indicator 部件读同一组槽与缺省——作者改一处,部件与静态线一起改。
|
|
@@ -13663,10 +13706,10 @@
|
|
|
13663
13706
|
--xh-approval-skin: 1;
|
|
13664
13707
|
}
|
|
13665
13708
|
|
|
13666
|
-
/* 一块要人做决定的静态内容面:--xh-border-default 描边 + surface 底 +
|
|
13709
|
+
/* 一块要人做决定的静态内容面:--xh-border-default 描边 + surface 底 + 无影(边界只由描边承担),
|
|
13667
13710
|
作者打了语气时描边染成语气色作强调(下面那条),判定落定后描边退回中性 */
|
|
13668
13711
|
[data-scope='approval'][data-part='root'] {
|
|
13669
|
-
/* 作者塞进标题 / 说明 /
|
|
13712
|
+
/* 作者塞进标题 / 说明 / 结果条里的图标按档取尺,缺省 md;勾选记号另按盒比例量 */
|
|
13670
13713
|
--xh-_approval-icon-size: var(--xh-glyph-size-md);
|
|
13671
13714
|
--xh-icon-size: var(--xh-approval-icon-size, var(--xh-_approval-icon-size));
|
|
13672
13715
|
|
|
@@ -13701,7 +13744,7 @@
|
|
|
13701
13744
|
border-color: var(--xh-approval-border, var(--xh-_tone, var(--xh-border-default)));
|
|
13702
13745
|
}
|
|
13703
13746
|
|
|
13704
|
-
/* 判过了就不再抢注意力:语气色边退回中性描边(根面外边不取 subtle
|
|
13747
|
+
/* 判过了就不再抢注意力:语气色边退回中性描边(根面外边不取 subtle)。
|
|
13705
13748
|
排在语气那条之后:同等特指度,落定要盖得过语气 */
|
|
13706
13749
|
[data-scope='approval'][data-part='root']:not([data-state='pending']) {
|
|
13707
13750
|
border-color: var(--xh-approval-border-settled, var(--xh-border-default));
|
|
@@ -13711,7 +13754,7 @@
|
|
|
13711
13754
|
/* 缺省档即 outline,写在上面那条基础规则里。
|
|
13712
13755
|
两档排在落定那条之后:它们把描边整个撤掉,排在前面会被落定那条按同等特指度盖回来 */
|
|
13713
13756
|
/* 底色分区:描边让位给底色,闸门嵌在别人的面里时不再多一圈线;
|
|
13714
|
-
淡底承载面向授权行与拒绝钮下发 hover 200 → pressed 300
|
|
13757
|
+
淡底承载面向授权行与拒绝钮下发 hover 200 → pressed 300 */
|
|
13715
13758
|
[data-scope='approval'][data-part='root'][data-variant='subtle'] {
|
|
13716
13759
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
13717
13760
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
@@ -13727,7 +13770,7 @@
|
|
|
13727
13770
|
box-shadow: none;
|
|
13728
13771
|
}
|
|
13729
13772
|
|
|
13730
|
-
/* 标题走 Surface 标题档 14/600
|
|
13773
|
+
/* 标题走 Surface 标题档 14/600 */
|
|
13731
13774
|
[data-scope='approval'][data-part='title'] {
|
|
13732
13775
|
display: block;
|
|
13733
13776
|
margin: 0;
|
|
@@ -13777,9 +13820,9 @@
|
|
|
13777
13820
|
}
|
|
13778
13821
|
|
|
13779
13822
|
/* 一项授权:整行可点、可聚焦,勾选记号在左。盒型、悬停 / 按下 / 禁用面由 Action Control 的 row 档给
|
|
13780
|
-
(ghost 形态:白底承载 hover 100 → pressed 200
|
|
13823
|
+
(ghost 形态:白底承载 hover 100 → pressed 200,按下只换面不缩放;禁用守卫认 data-disabled),
|
|
13781
13824
|
这里只把使用者槽映射到桥接槽,内衬与间距沿用本组件的档位。
|
|
13782
|
-
行高不吃家族的单行档:row
|
|
13825
|
+
行高不吃家族的单行档:row 档允许换行、高度随内容,一条会折行的授权文案走正文行高 */
|
|
13783
13826
|
[data-scope='approval'][data-part='item'] {
|
|
13784
13827
|
--xh-action-gap: var(--xh-approval-item-gap, var(--xh-space-1_5));
|
|
13785
13828
|
--xh-action-padding-inline: var(--xh-approval-item-px, var(--xh-space-2));
|
|
@@ -13940,7 +13983,7 @@
|
|
|
13940
13983
|
|
|
13941
13984
|
/* 两颗按钮是离散动作控件:盒几何、悬停 / 按下与 0.97 按压、焦点环、禁用与在途面全由 Action Control 的
|
|
13942
13985
|
text 档给,组件只映射既有使用者槽。批准走 solid 档:判定闸门里的主要动作,与 Button 缺省同为品牌实心;
|
|
13943
|
-
拒绝走 outline 档:非 Button
|
|
13986
|
+
拒绝走 outline 档:非 Button 的触发器缺省中性描边。
|
|
13944
13987
|
三档守卫由连接层投影:判定在途是 data-loading + aria-disabled(保住可聚焦,家族给在途面:底色不置灰、
|
|
13945
13988
|
指针 progress),必选项没勾满与落定是 data-disabled(家族给禁用面:置灰底、置灰字、not-allowed)。
|
|
13946
13989
|
两颗共用的几何与字号写在一起 */
|
|
@@ -14219,7 +14262,7 @@
|
|
|
14219
14262
|
}
|
|
14220
14263
|
|
|
14221
14264
|
/* 圆点形态:只表示「有」,不表示「有几个」——收掉内边距与文字盒。
|
|
14222
|
-
宽高同槽的正方盒按身份取 circle
|
|
14265
|
+
宽高同槽的正方盒按身份取 circle,不沿用计数档的胶囊冒充圆:
|
|
14223
14266
|
胶囊那 9999px 在正方盒上虽也画成圆,形状身份却写错了档,作者按圆点覆盖圆角时无处落手。
|
|
14224
14267
|
圆点直径只有六到十像素,一像素的内高光会占去顶上一大截、读成缺了一圈的描边,这里收掉 */
|
|
14225
14268
|
[data-scope='badge'][data-part='indicator'][data-dot] {
|
|
@@ -14435,7 +14478,7 @@
|
|
|
14435
14478
|
}
|
|
14436
14479
|
|
|
14437
14480
|
/* 链接的几何、字号与面全经家族桥接槽:静息 muted / regular,悬停走白底承载 hover 100 + 随语气的字色,
|
|
14438
|
-
按下 pressed 200
|
|
14481
|
+
按下 pressed 200 只换面;当前页那条不再是"可去的地方":连接层投影
|
|
14439
14482
|
data-xh-collection-terminal,家族给透明面 + 随语气的 fg-default + medium + cursor default,不响应悬停与按下,
|
|
14440
14483
|
并压过它同时带的 aria-disabled 禁用面。本条 (0,2,0) 压过家族基础块 (0,1,0),不能再写 color / background */
|
|
14441
14484
|
[data-scope='breadcrumb'][data-part='link'] {
|
|
@@ -14558,7 +14601,7 @@
|
|
|
14558
14601
|
--xh-action-fg-loading: var(--xh-button-fg, var(--xh-_action-variant-fg-loading));
|
|
14559
14602
|
--xh-action-highlight-rest: transparent;
|
|
14560
14603
|
--xh-action-highlight-pressed: transparent;
|
|
14561
|
-
/* 海拔只有 solid
|
|
14604
|
+
/* 海拔只有 solid 一档有:其余形态无影,私有槽在下面的 solid 块里才被赋值 */
|
|
14562
14605
|
--xh-_button-shadow-rest: var(--xh-button-shadow, none);
|
|
14563
14606
|
--xh-_button-shadow-hover: var(--xh-button-shadow-hover, none);
|
|
14564
14607
|
--xh-_button-shadow-pressed: none;
|
|
@@ -14579,7 +14622,7 @@
|
|
|
14579
14622
|
font-weight: var(--xh-button-font-weight, var(--xh-text-label-weight));
|
|
14580
14623
|
}
|
|
14581
14624
|
|
|
14582
|
-
/* Button soft
|
|
14625
|
+
/* Button soft 是登记在册的 raised 消费者:solid 一档静息带顶光与贴地软影,悬停抬到 raised,按下只留顶光。
|
|
14583
14626
|
成组时段与段共边焊成一条,静息不落软影、悬停不抬起——投影会压到左右两段的面上,
|
|
14584
14627
|
ButtonGroup 用 --xh-_button-group-shadow-rest / -hover 只留顶光 */
|
|
14585
14628
|
[data-scope='button'][data-part='root'][data-variant='solid'] {
|
|
@@ -14895,7 +14938,7 @@
|
|
|
14895
14938
|
}
|
|
14896
14939
|
|
|
14897
14940
|
[data-scope='calendar-picker'][data-part='root'] {
|
|
14898
|
-
/* 翻页钮是 sm 档的图标钮(--xh-control-h-sm 见方),钮里的图标按 sm 档取 --xh-glyph-size-sm
|
|
14941
|
+
/* 翻页钮是 sm 档的图标钮(--xh-control-h-sm 见方),钮里的图标按 sm 档取 --xh-glyph-size-sm;
|
|
14899
14942
|
作者塞进去的图标与皮肤画的兜底字形同一把尺 */
|
|
14900
14943
|
--xh-icon-size: var(--xh-calendar-picker-icon-size, var(--xh-glyph-size-sm));
|
|
14901
14944
|
|
|
@@ -14934,7 +14977,7 @@
|
|
|
14934
14977
|
|
|
14935
14978
|
/* 标题里的年与月:点它们逐级钻上去(年 → 十年格、月 → 月格)。
|
|
14936
14979
|
长得像标题而不像按钮——它本来就是标题,只是可点 */
|
|
14937
|
-
/* 标题里的年与月接 Action Control text
|
|
14980
|
+
/* 标题里的年与月接 Action Control text 档(日期翻页按钮同族):盒、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡
|
|
14938
14981
|
由家族配方给,这里只把使用者槽映射到桥接槽。长得像标题而不像按钮——它本来就是标题,只是可点:静息透明(ghost),
|
|
14939
14982
|
悬停只换字色不换底(标题不是一枚按钮面),按下换到 200 档中性面(白底承载);到顶那一层只作标题显示,
|
|
14940
14983
|
光标别装成能点,也不再换面 */
|
|
@@ -14960,7 +15003,7 @@
|
|
|
14960
15003
|
display: none;
|
|
14961
15004
|
}
|
|
14962
15005
|
|
|
14963
|
-
/* 四颗方向钮接 Action Control icon
|
|
15006
|
+
/* 四颗方向钮接 Action Control icon 档(日期翻页按钮)、ghost 形态:正方盒、悬停 / 按下 / 禁用面、0.97 缩放与换底、
|
|
14964
15007
|
粗指针热区、焦点环与过渡由家族配方给,这里只把使用者槽映射到桥接槽;钮坐在日历的白底上,悬停 100 → 按下 200 */
|
|
14965
15008
|
[data-scope='calendar-picker'][data-part='prev-year-trigger'],
|
|
14966
15009
|
[data-scope='calendar-picker'][data-part='prev-trigger'],
|
|
@@ -15017,7 +15060,7 @@
|
|
|
15017
15060
|
align-content: start;
|
|
15018
15061
|
max-block-size: var(--xh-calendar-picker-year-grid-max-h, var(--xh-viewport-h-sm));
|
|
15019
15062
|
padding-inline-end: var(--xh-calendar-picker-year-grid-pe, var(--xh-space-1));
|
|
15020
|
-
/* 页内结构容器走原生细条(reset 层统一给)、滚动链保持 auto
|
|
15063
|
+
/* 页内结构容器走原生细条(reset 层统一给)、滚动链保持 auto;嵌进 date-picker 浮层时由那份皮肤补 contain */
|
|
15021
15064
|
overflow-y: auto;
|
|
15022
15065
|
}
|
|
15023
15066
|
|
|
@@ -15118,7 +15161,7 @@
|
|
|
15118
15161
|
display: none;
|
|
15119
15162
|
}
|
|
15120
15163
|
|
|
15121
|
-
/* 日期格接 Action Control text
|
|
15164
|
+
/* 日期格接 Action Control text 档(日历格是定尺控件,属格状当前)、ghost 形态:悬停 / 按下 / 禁用面、
|
|
15122
15165
|
0.97 缩放与换底、焦点环与过渡由家族配方给,这里只把使用者槽映射到桥接槽。几何仍由网格给:宽度由 week-row 的
|
|
15123
15166
|
等分轨道给、高度按 aspect-ratio 跟着走(block-size 归 auto,不取家族的固定高),日历才不会被长月份拉扁。
|
|
15124
15167
|
格子坐在日历的白底上:悬停 100 → 按下 200;今天 / 选中 / 邻月 / 不可用只换下面的私有槽 */
|
|
@@ -15183,7 +15226,7 @@
|
|
|
15183
15226
|
--xh-_calendar-picker-cell-fg: var(--xh-calendar-picker-cell-fg-outside, var(--xh-fg-subtle));
|
|
15184
15227
|
}
|
|
15185
15228
|
|
|
15186
|
-
/* 今天:1px 品牌环 +
|
|
15229
|
+
/* 今天:1px 品牌环 + 品牌字(brand-subtle 退出 today 语义),底透明、悬停走普通格的阶梯;
|
|
15187
15230
|
选中仍用后面的实心强调面,两个状态叠加时不会混成同一种反馈 */
|
|
15188
15231
|
[data-scope='calendar-picker'][data-part='cell-trigger'][data-today] {
|
|
15189
15232
|
--xh-_calendar-picker-cell-bg: var(--xh-calendar-picker-today-bg, transparent);
|
|
@@ -15191,7 +15234,7 @@
|
|
|
15191
15234
|
--xh-_calendar-picker-cell-fg: var(--xh-calendar-picker-today-fg, var(--xh-fg-brand));
|
|
15192
15235
|
}
|
|
15193
15236
|
|
|
15194
|
-
/* 实心强调面给单选 /
|
|
15237
|
+
/* 实心强调面给单选 / 多选的选中格(格状当前):悬停不换面,按下压到 active 档(光缩放在深色底上看不出回执)。
|
|
15195
15238
|
面是实心的,环色与面同族,画在面里就看不出来;环改取面自己的前景色——
|
|
15196
15239
|
那一族色本来就要在这块面上把字读清楚,与面的对比是按可读性定的 */
|
|
15197
15240
|
[data-scope='calendar-picker'][data-part='cell-trigger'][data-selected] {
|
|
@@ -15231,7 +15274,7 @@
|
|
|
15231
15274
|
--xh-action-ring-color-focus-visible: var(--xh-ring-focus);
|
|
15232
15275
|
}
|
|
15233
15276
|
|
|
15234
|
-
/* 不可用又选中的格:退到中性淡底 +
|
|
15277
|
+
/* 不可用又选中的格:退到中性淡底 + 置灰字(禁用面),选中身份仍由这块底与未选中的透明格分开 */
|
|
15235
15278
|
[data-scope='calendar-picker'][data-part='cell-trigger'][data-disabled][data-selected] {
|
|
15236
15279
|
--xh-action-bg-disabled: var(--xh-calendar-picker-cell-bg-selected-disabled, var(--xh-bg-subtle));
|
|
15237
15280
|
}
|
|
@@ -15334,7 +15377,7 @@
|
|
|
15334
15377
|
}
|
|
15335
15378
|
|
|
15336
15379
|
[data-scope='calendar-range-picker'][data-part='root'] {
|
|
15337
|
-
/* 翻页钮是 sm 档的图标钮(--xh-control-h-sm 见方),钮里的图标按 sm 档取 --xh-glyph-size-sm
|
|
15380
|
+
/* 翻页钮是 sm 档的图标钮(--xh-control-h-sm 见方),钮里的图标按 sm 档取 --xh-glyph-size-sm;
|
|
15338
15381
|
作者塞进去的图标与皮肤画的兜底字形同一把尺 */
|
|
15339
15382
|
--xh-icon-size: var(--xh-calendar-range-picker-icon-size, var(--xh-glyph-size-sm));
|
|
15340
15383
|
|
|
@@ -15373,7 +15416,7 @@
|
|
|
15373
15416
|
|
|
15374
15417
|
/* 标题里的年与月:点它们逐级钻上去(年 → 十年格、月 → 月格)。
|
|
15375
15418
|
长得像标题而不像按钮——它本来就是标题,只是可点 */
|
|
15376
|
-
/* 标题里的年与月接 Action Control text
|
|
15419
|
+
/* 标题里的年与月接 Action Control text 档(日期翻页按钮同族):盒、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡
|
|
15377
15420
|
由家族配方给,这里只把使用者槽映射到桥接槽。长得像标题而不像按钮——它本来就是标题,只是可点:静息透明(ghost),
|
|
15378
15421
|
悬停只换字色不换底(标题不是一枚按钮面),按下换到 200 档中性面(白底承载);到顶那一层只作标题显示,
|
|
15379
15422
|
光标别装成能点,也不再换面 */
|
|
@@ -15399,7 +15442,7 @@
|
|
|
15399
15442
|
display: none;
|
|
15400
15443
|
}
|
|
15401
15444
|
|
|
15402
|
-
/* 四颗方向钮接 Action Control icon
|
|
15445
|
+
/* 四颗方向钮接 Action Control icon 档(日期翻页按钮)、ghost 形态:正方盒、悬停 / 按下 / 禁用面、0.97 缩放与换底、
|
|
15403
15446
|
粗指针热区、焦点环与过渡由家族配方给,这里只把使用者槽映射到桥接槽;钮坐在日历的白底上,悬停 100 → 按下 200 */
|
|
15404
15447
|
[data-scope='calendar-range-picker'][data-part='prev-year-trigger'],
|
|
15405
15448
|
[data-scope='calendar-range-picker'][data-part='prev-trigger'],
|
|
@@ -15456,7 +15499,7 @@
|
|
|
15456
15499
|
align-content: start;
|
|
15457
15500
|
max-block-size: var(--xh-calendar-range-picker-year-grid-max-h, var(--xh-viewport-h-sm));
|
|
15458
15501
|
padding-inline-end: var(--xh-calendar-range-picker-year-grid-pe, var(--xh-space-1));
|
|
15459
|
-
/* 页内结构容器走原生细条(reset 层统一给)、滚动链保持 auto
|
|
15502
|
+
/* 页内结构容器走原生细条(reset 层统一给)、滚动链保持 auto;嵌进 date-picker 浮层时由那份皮肤补 contain */
|
|
15460
15503
|
overflow-y: auto;
|
|
15461
15504
|
}
|
|
15462
15505
|
|
|
@@ -15601,7 +15644,7 @@
|
|
|
15601
15644
|
border-radius: var(--xh-calendar-range-picker-cell-radius, var(--xh-shape-inset));
|
|
15602
15645
|
}
|
|
15603
15646
|
|
|
15604
|
-
/* 日期格接 Action Control text
|
|
15647
|
+
/* 日期格接 Action Control text 档(日历格是定尺控件,属格状当前)、ghost 形态:悬停 / 按下 / 禁用面、
|
|
15605
15648
|
0.97 缩放与换底、焦点环与过渡由家族配方给,这里只把使用者槽映射到桥接槽。几何仍由网格给:宽度由 week-row 的
|
|
15606
15649
|
等分轨道给、高度按 aspect-ratio 跟着走(block-size 归 auto,不取家族的固定高),日历才不会被长月份拉扁。
|
|
15607
15650
|
格子坐在日历的白底上:悬停 100 → 按下 200;今天 / 选中 / 邻月 / 不可用只换下面的私有槽 */
|
|
@@ -15666,13 +15709,13 @@
|
|
|
15666
15709
|
--xh-_calendar-range-picker-cell-fg: var(--xh-calendar-range-picker-cell-fg-outside, var(--xh-fg-subtle));
|
|
15667
15710
|
}
|
|
15668
15711
|
|
|
15669
|
-
/*
|
|
15712
|
+
/* 区间中段的格坐在品牌淡底的轨道上(页内选中 12%):悬停 20%、按下 28%,铺在格子自己的选中片上 */
|
|
15670
15713
|
[data-scope='calendar-range-picker'][data-part='cell-trigger'][data-in-range]:not([data-outside-month], [data-disabled], [data-range-start], [data-range-end]) {
|
|
15671
15714
|
--xh-_calendar-range-picker-cell-bg-hover: var(--xh-calendar-range-picker-range-cell-bg-hover, var(--xh-bg-brand-subtle-hover));
|
|
15672
15715
|
--xh-_calendar-range-picker-cell-bg-pressed: var(--xh-calendar-range-picker-range-cell-bg-pressed, var(--xh-bg-brand-subtle-active));
|
|
15673
15716
|
}
|
|
15674
15717
|
|
|
15675
|
-
/* 今天:1px 品牌环 +
|
|
15718
|
+
/* 今天:1px 品牌环 + 品牌字(brand-subtle 退出 today 语义),底透明、悬停走普通格的阶梯;
|
|
15676
15719
|
落在区间里时环压在轨道上,选中仍用后面的实心强调面,状态叠加时不会混成同一种反馈 */
|
|
15677
15720
|
[data-scope='calendar-range-picker'][data-part='cell-trigger'][data-today] {
|
|
15678
15721
|
--xh-_calendar-range-picker-cell-bg: var(--xh-calendar-range-picker-today-bg, transparent);
|
|
@@ -15680,7 +15723,7 @@
|
|
|
15680
15723
|
--xh-_calendar-range-picker-cell-fg: var(--xh-calendar-range-picker-today-fg, var(--xh-fg-brand));
|
|
15681
15724
|
}
|
|
15682
15725
|
|
|
15683
|
-
/* 实心强调面只给单选 /
|
|
15726
|
+
/* 实心强调面只给单选 / 多选的选中格与区间的两端(格状当前):悬停不换面,按下压到 active 档(光缩放在深色底上
|
|
15684
15727
|
看不出回执);区间中段的格子由格子上的轨道铺底,自己不换面——不然一整段都是实心圆,就分不出哪两格是端点。
|
|
15685
15728
|
面是实心的,环色与面同族,画在面里就看不出来;环改取面自己的前景色——
|
|
15686
15729
|
那一族色本来就要在这块面上把字读清楚,与面的对比是按可读性定的 */
|
|
@@ -15722,7 +15765,7 @@
|
|
|
15722
15765
|
--xh-action-ring-color-focus-visible: var(--xh-ring-focus);
|
|
15723
15766
|
}
|
|
15724
15767
|
|
|
15725
|
-
/* 不可用又选中的格:退到中性淡底 +
|
|
15768
|
+
/* 不可用又选中的格:退到中性淡底 + 置灰字(禁用面),选中身份仍由这块底与未选中的透明格分开 */
|
|
15726
15769
|
[data-scope='calendar-range-picker'][data-part='cell-trigger'][data-disabled][data-selected] {
|
|
15727
15770
|
--xh-action-bg-disabled: var(--xh-calendar-range-picker-cell-bg-selected-disabled, var(--xh-bg-subtle));
|
|
15728
15771
|
}
|
|
@@ -15842,7 +15885,7 @@
|
|
|
15842
15885
|
}
|
|
15843
15886
|
|
|
15844
15887
|
/* Card 是带统一内边距与节奏的内容面;布局方向可由作者在根上覆盖。
|
|
15845
|
-
边界由 --xh-border-default 描边承担,raised
|
|
15888
|
+
边界由 --xh-border-default 描边承担,raised 落影只是抬起的加成(Card 是唯一登记 raised 的静态面,
|
|
15846
15889
|
且 raised 必带描边);内衬只走 --xh-surface-* 阶梯。 */
|
|
15847
15890
|
[data-scope='card'][data-part='root'] {
|
|
15848
15891
|
position: relative;
|
|
@@ -16029,10 +16072,10 @@
|
|
|
16029
16072
|
display: none;
|
|
16030
16073
|
}
|
|
16031
16074
|
|
|
16032
|
-
/* 两端按钮与播放开关:浮在媒体之上的单图标圆钮,接 Action Control floating
|
|
16075
|
+
/* 两端按钮与播放开关:浮在媒体之上的单图标圆钮,接 Action Control floating 档:
|
|
16033
16076
|
盒型(md = box-lg 48px,圆形)、四态面、0.97 按压与 44px 命中区由家族配方给出,组件没有 size 轴、固定 md。
|
|
16034
16077
|
连接层不投影 variant:面由这里桥接到磨砂缺省(使用者槽 → 磨砂面),悬停 / 按下的底走画布承载的阶梯
|
|
16035
|
-
(100 → 200
|
|
16078
|
+
(100 → 200),边缘与投影不动;这里只留定位、桥接槽与图标尺 */
|
|
16036
16079
|
[data-scope='carousel'][data-part='prev-trigger'],
|
|
16037
16080
|
[data-scope='carousel'][data-part='next-trigger'],
|
|
16038
16081
|
[data-scope='carousel'][data-part='autoplay-trigger'] {
|
|
@@ -16142,7 +16185,7 @@
|
|
|
16142
16185
|
translate: -50% 0;
|
|
16143
16186
|
}
|
|
16144
16187
|
|
|
16145
|
-
/* 分页点与 Tour
|
|
16188
|
+
/* 分页点与 Tour 的步骤点同一种语言:8px 圆点,当前页拉长成 20px 胶囊并换品牌色。
|
|
16146
16189
|
本体就是那颗点:没有文字(页码交给作者,默认不显示),底色即标记。
|
|
16147
16190
|
悬停 / 按下的回执落在点的颜色上:中性标记按前景阶梯加深一档、再加深一档;当前页按品牌阶梯压一档 */
|
|
16148
16191
|
[data-scope='carousel'][data-part='indicator'] {
|
|
@@ -16183,7 +16226,7 @@
|
|
|
16183
16226
|
background: var(--xh-carousel-indicator-bg-hover, var(--xh-fg-muted));
|
|
16184
16227
|
}
|
|
16185
16228
|
|
|
16186
|
-
/*
|
|
16229
|
+
/* 按下:点的颜色再压一档,同时缩一下(同时换底);指针按住由 :active 表出,
|
|
16187
16230
|
Space / Enter 与触屏按住由 Headless 投影 data-pressed,三种输入同一副面 */
|
|
16188
16231
|
[data-scope='carousel'][data-part='indicator']:is(:active, [data-pressed]):not([data-current]) {
|
|
16189
16232
|
background: var(--xh-carousel-indicator-bg-active, var(--xh-fg-default));
|
|
@@ -16201,7 +16244,7 @@
|
|
|
16201
16244
|
|
|
16202
16245
|
/* 当前页:data-current 与 aria-current='true' 由连接层成对给出,
|
|
16203
16246
|
样式挂在 data 钩子上,无障碍语义留给 aria,两边各司其职。
|
|
16204
|
-
拉长成胶囊并换品牌色(格状当前 =
|
|
16247
|
+
拉长成胶囊并换品牌色(格状当前 = 实心品牌) */
|
|
16205
16248
|
[data-scope='carousel'][data-part='indicator'][data-current] {
|
|
16206
16249
|
inline-size: var(--xh-carousel-indicator-size-current, var(--xh-space-5));
|
|
16207
16250
|
border-radius: var(--xh-carousel-indicator-radius-current, var(--xh-shape-pill));
|
|
@@ -16228,7 +16271,7 @@
|
|
|
16228
16271
|
transition-timing-function: var(--xh-motion-ease-press);
|
|
16229
16272
|
}
|
|
16230
16273
|
|
|
16231
|
-
/*
|
|
16274
|
+
/* 自动播放的进度:胶囊是品牌淡底当轨道(仍是「当前」语义;淡底上公共环够对比,不灌环色),
|
|
16232
16275
|
品牌填充条从起点沿轨道方向长满这一页的时长;暂停时定住 */
|
|
16233
16276
|
[data-scope='carousel'][data-part='root'][data-autoplay]
|
|
16234
16277
|
[data-scope='carousel'][data-part='indicator'][data-current],
|
|
@@ -16554,7 +16597,7 @@
|
|
|
16554
16597
|
/* 私有槽同时声明在根与 positioner 上:浮层被搬到 portal 落点,不是根的后代,继承不过去 */
|
|
16555
16598
|
[data-scope='cascader']:is([data-part='root'], [data-part='positioner']) {
|
|
16556
16599
|
/* 作者塞进触发器指示符槽的图标跟着尺寸档走,与皮肤画的兜底字形同一把尺;列里条目的由家族随
|
|
16557
|
-
data-xh-collection-size
|
|
16600
|
+
data-xh-collection-size 下发。级联选择器自绘的状态字形(标记盒里的勾与半选杠、分支箭头)
|
|
16558
16601
|
不读这支:它们是指示符,走 --xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size 改接到
|
|
16559
16602
|
盒的尺,分支箭头走 --xh-cascader-branch-arrow-size */
|
|
16560
16603
|
--xh-icon-size: var(--xh-cascader-icon-size, var(--xh-glyph-size-md));
|
|
@@ -16822,8 +16865,6 @@
|
|
|
16822
16865
|
|
|
16823
16866
|
[data-scope='cascader'][data-part='content'][data-state='open'] {
|
|
16824
16867
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
16825
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
16826
|
-
will-change: opacity, translate;
|
|
16827
16868
|
}
|
|
16828
16869
|
|
|
16829
16870
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -16996,7 +17037,7 @@
|
|
|
16996
17037
|
/* 分支条目行尾画右向小箭头:不点开也看得出还有下一级。落在家族网格的 suffix 列、跨两行居中。
|
|
16997
17038
|
与菜单族的子菜单箭头同走字形令牌——此前这里是「描全边框再抹掉两条、把剩下的直角旋 45 度」,
|
|
16998
17039
|
作者换掉标记时换不动它,RTL 还得再翻一次旋转角。
|
|
16999
|
-
|
|
17040
|
+
箭头是指示符:与同一行的标记盒同走 --xh-control-indicator-size,不读家族按档下发的
|
|
17000
17041
|
--xh-icon-size——按图标档取的 20px 会比 16px 的标记盒大一圈 */
|
|
17001
17042
|
[data-scope='cascader'][data-part='item'][data-branch]::after {
|
|
17002
17043
|
content: '';
|
|
@@ -17029,7 +17070,7 @@
|
|
|
17029
17070
|
|
|
17030
17071
|
/* 勾选标记落在家族网格的 indicator 列,只在选中项上显形(家族按 aria-selected / data-state=checked 给);
|
|
17031
17072
|
未选中时占位不塌,切换选中不引起行宽抖动。
|
|
17032
|
-
|
|
17073
|
+
盒里的勾与半选杠是指示符:盒在自己身上把 --xh-icon-size 改接到盒的尺,皮肤画的兜底字形与作者
|
|
17033
17074
|
塞进盒里的 XhIcon 读同一把尺、与盒同边长(行尾标记不是勾选格,不取 × 0.75,与搜索候选行尾的勾同尺);
|
|
17034
17075
|
不读家族按档下发到行的 --xh-icon-size——那支只管作者放进条目里的图标,按图标档取的 20px 会比 16 / 14 的盒还大 */
|
|
17035
17076
|
[data-scope='cascader'][data-part='item-indicator'] {
|
|
@@ -17357,8 +17398,8 @@
|
|
|
17357
17398
|
/* 实心底上的勾与横杠,同样没写 data-tone 时退回原来的品牌底前景色 */
|
|
17358
17399
|
--xh-_checkbox-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
|
|
17359
17400
|
|
|
17360
|
-
/* 方框接 Action Control icon
|
|
17361
|
-
|
|
17401
|
+
/* 方框接 Action Control icon 档(定尺方框):盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
|
|
17402
|
+
焦点环由家族配方给,这里只把使用者槽映射到桥接槽。面按字段静息形态取值:透明底 +
|
|
17362
17403
|
--xh-border-control 描边 + 无影,不消费海拔与顶光;悬停只把描边升一档,底不动;按下换到 200 档中性面
|
|
17363
17404
|
(白底承载);边长随 --xh-control-indicator-* 走,不取家族的 profile 尺寸。
|
|
17364
17405
|
常态 / 勾中 / 校验失败 / 只读只换下面四支私有槽,桥接槽的映射写一次 */
|
|
@@ -17431,7 +17472,7 @@
|
|
|
17431
17472
|
|
|
17432
17473
|
/* 悬停标签文字时也让控制盒回应,整行可点不再只有移到 16px 小盒上才看得出来:
|
|
17433
17474
|
指针落在方框上时由家族的悬停块换到 --xh-action-border-hover,落在标签文字上时这里补同一档;
|
|
17434
|
-
未勾选的方框描边升一档(字段静息 → hover
|
|
17475
|
+
未勾选的方框描边升一档(字段静息 → hover 的同一条阶梯),勾中 / 校验失败的方框由上面的映射钉住不换 */
|
|
17435
17476
|
@media (hover: hover) {
|
|
17436
17477
|
[data-scope='checkbox'][data-part='label']:not([data-disabled]):not([data-readonly]):hover
|
|
17437
17478
|
[data-scope='checkbox'][data-part='root'] {
|
|
@@ -17543,7 +17584,7 @@
|
|
|
17543
17584
|
}
|
|
17544
17585
|
|
|
17545
17586
|
/* —— 带文字的整行:<label> 包住控件与文字,与 checkbox-group 的条目、switch 的标签同一副样子 ——
|
|
17546
|
-
文字是控件自己的文字,字号随 size 档取 --xh-control-font
|
|
17587
|
+
文字是控件自己的文字,字号随 size 档取 --xh-control-font-*(控件字号随档);
|
|
17547
17588
|
行高取正文档,长文字可以自然换行 */
|
|
17548
17589
|
[data-scope='checkbox'][data-part='label'] {
|
|
17549
17590
|
--xh-_checkbox-label-gap: var(--xh-control-gap-md);
|
|
@@ -17568,7 +17609,7 @@
|
|
|
17568
17609
|
--xh-_checkbox-label-font-size: var(--xh-control-font-lg);
|
|
17569
17610
|
}
|
|
17570
17611
|
|
|
17571
|
-
/* 禁用标签色统一 --xh-fg-subtle
|
|
17612
|
+
/* 禁用标签色统一 --xh-fg-subtle */
|
|
17572
17613
|
[data-scope='checkbox'][data-part='label'][data-disabled] {
|
|
17573
17614
|
color: var(--xh-checkbox-label-fg-disabled, var(--xh-fg-subtle));
|
|
17574
17615
|
cursor: not-allowed;
|
|
@@ -17631,7 +17672,7 @@
|
|
|
17631
17672
|
[data-scope='checkbox-group'][data-part='root'] {
|
|
17632
17673
|
/* 尺寸档只换这四个私有槽,条目、方框与全选格都从 root 继承它们,
|
|
17633
17674
|
换档不必给每个部件各写一条选择器。方框与字形照 checkbox 的档位走,
|
|
17634
|
-
单体与集合里的同一枚方框必须一样大;条目文字是控件文字,随档取 --xh-control-font
|
|
17675
|
+
单体与集合里的同一枚方框必须一样大;条目文字是控件文字,随档取 --xh-control-font-* */
|
|
17635
17676
|
--xh-_checkbox-group-box: var(--xh-control-indicator-md);
|
|
17636
17677
|
--xh-_checkbox-group-glyph: calc(var(--xh-_checkbox-group-box) * 0.75);
|
|
17637
17678
|
--xh-_checkbox-group-gap: var(--xh-control-gap-md);
|
|
@@ -17642,7 +17683,7 @@
|
|
|
17642
17683
|
/* 勾中的填色随语气走;没写 data-tone 时退回品牌色 */
|
|
17643
17684
|
--xh-_checkbox-group-accent: var(--xh-_tone, var(--xh-bg-brand));
|
|
17644
17685
|
--xh-_checkbox-group-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
|
|
17645
|
-
/*
|
|
17686
|
+
/* 方框是字段家族的控制盒(字段静息形态):透明底 + --xh-border-control 描边 + 无影,不消费海拔与顶光 */
|
|
17646
17687
|
--xh-_checkbox-group-bg: var(--xh-checkbox-group-indicator-bg, transparent);
|
|
17647
17688
|
/* 条目与全选格是方框的承载面:行自己坐画布走 100 → 200,行面上的方框按淡底容器阶梯再上一档(200 → 300)。
|
|
17648
17689
|
两支私有槽是这一档的唯一来源——宿主拿它们给 --xh-action-host-bg-* 赋值(桥接槽只写不读),
|
|
@@ -17651,7 +17692,7 @@
|
|
|
17651
17692
|
--xh-_checkbox-group-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
17652
17693
|
|
|
17653
17694
|
/* 标题与条目都是根的直接子节点,一支 gap 同时管「标题到集合」与「条目之间」:
|
|
17654
|
-
集合标题与集合隔 --xh-space-2
|
|
17695
|
+
集合标题与集合隔 --xh-space-2,同组条目之间也是同一档紧密关系 */
|
|
17655
17696
|
display: flex;
|
|
17656
17697
|
gap: var(--xh-checkbox-group-gap, var(--xh-space-2));
|
|
17657
17698
|
}
|
|
@@ -17684,7 +17725,7 @@
|
|
|
17684
17725
|
align-items: center;
|
|
17685
17726
|
}
|
|
17686
17727
|
|
|
17687
|
-
/*
|
|
17728
|
+
/* 集合标题:14 / 500 / fg-muted,字号不随 size 档 */
|
|
17688
17729
|
[data-scope='checkbox-group'][data-part='label'] {
|
|
17689
17730
|
color: var(--xh-checkbox-group-label-fg, var(--xh-fg-muted));
|
|
17690
17731
|
font-size: var(--xh-checkbox-group-label-font-size, var(--xh-text-label-size));
|
|
@@ -17698,7 +17739,7 @@
|
|
|
17698
17739
|
color: var(--xh-checkbox-group-label-fg-disabled, var(--xh-fg-subtle));
|
|
17699
17740
|
}
|
|
17700
17741
|
|
|
17701
|
-
/* 条目是「方框 +
|
|
17742
|
+
/* 条目是「方框 + 文案」的整行命中区:接 Action Control row 档、ghost 形态,悬停 / 按下 / 禁用面、手型、
|
|
17702
17743
|
过渡与焦点环由家族给,按下只换面不缩放(row 档专属按压块 scale: none);这里只把使用者槽映射到桥接槽。
|
|
17703
17744
|
行自己坐画布走 100 → 200(--xh-action-bg-* 钉住自己的面),行面上的方框按淡底容器阶梯再上一档
|
|
17704
17745
|
(--xh-action-host-bg-* 向内声明自己是方框的承载面,host 槽只对后代生效——自己的面已由 --xh-action-bg-* 钉住;
|
|
@@ -17762,7 +17803,7 @@
|
|
|
17762
17803
|
box-shadow: var(--xh-checkbox-group-indicator-shadow, none);
|
|
17763
17804
|
font-size: var(--xh-checkbox-group-indicator-font-size, var(--xh-_checkbox-group-glyph));
|
|
17764
17805
|
line-height: var(--xh-leading-none);
|
|
17765
|
-
/*
|
|
17806
|
+
/* 方框不缩放(行级只换面),过渡只有底与描边;按下走 press 时间线、释放同走 micro */
|
|
17766
17807
|
transition:
|
|
17767
17808
|
background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
|
|
17768
17809
|
border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
|
|
@@ -17774,7 +17815,7 @@
|
|
|
17774
17815
|
content: '';
|
|
17775
17816
|
}
|
|
17776
17817
|
|
|
17777
|
-
/* 悬停整行时未勾选的方框描边升一档(字段静息 → hover
|
|
17818
|
+
/* 悬停整行时未勾选的方框描边升一档(字段静息 → hover 的同一条阶梯);
|
|
17778
17819
|
勾中的方框描边与底同色,悬停不换描边——填色本身已经在表达状态 */
|
|
17779
17820
|
@media (hover: hover) {
|
|
17780
17821
|
[data-scope='checkbox-group'][data-part='root']:not([data-disabled]):not([data-readonly]):not([data-invalid])
|
|
@@ -17795,7 +17836,7 @@
|
|
|
17795
17836
|
}
|
|
17796
17837
|
|
|
17797
17838
|
/* 按下去要有回应。方框不是激活宿主:宿主是投影了 row 档的整行(条目 / 全选格),方框在宿主的
|
|
17798
|
-
:hover / :is(:active, [data-pressed]) 下读宿主 host
|
|
17839
|
+
:hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面、不缩放——行按下是 200,
|
|
17799
17840
|
坐在上面的方框到 300(行以 --xh-action-host-bg-pressed 声明自己是方框的承载面,桥接槽只写不读,
|
|
17800
17841
|
方框读的是喂给它的那支私有槽),勾中的换到语气的 active 档;
|
|
17801
17842
|
与家族按压块同一时间线(按下 --xh-motion-duration-press,释放同走 micro) */
|
|
@@ -17884,7 +17925,7 @@
|
|
|
17884
17925
|
border-color: var(--xh-checkbox-group-indicator-border-invalid, var(--xh-border-invalid));
|
|
17885
17926
|
}
|
|
17886
17927
|
|
|
17887
|
-
/*
|
|
17928
|
+
/* 禁用:--xh-border-default 描边 + --xh-bg-subtle 底 + --xh-fg-disabled 字形,不靠 opacity */
|
|
17888
17929
|
[data-scope='checkbox-group'][data-part='root'][data-disabled]
|
|
17889
17930
|
[data-scope='checkbox-group'][data-part='indicator'],
|
|
17890
17931
|
[data-scope='checkbox-group'][data-part='item'][data-disabled]
|
|
@@ -17906,7 +17947,7 @@
|
|
|
17906
17947
|
家族的禁用块同样只读 data-disabled。position 是给叠在方框上的那颗字形 ::after 当定位基准 */
|
|
17907
17948
|
[data-scope='checkbox-group'][data-part='select-all-trigger'] {
|
|
17908
17949
|
--xh-action-gap: var(--xh-checkbox-group-select-all-trigger-gap, var(--xh-_checkbox-group-gap));
|
|
17909
|
-
/* 全选格的身份是嵌在 control
|
|
17950
|
+
/* 全选格的身份是嵌在 control 内的小方框(select-all 方框取 inset),与条目方框同一档 */
|
|
17910
17951
|
--xh-action-radius: var(--xh-checkbox-group-select-all-trigger-radius, var(--xh-shape-inset));
|
|
17911
17952
|
--xh-action-font-size: var(--xh-checkbox-group-select-all-trigger-font-size, var(--xh-_checkbox-group-font-size));
|
|
17912
17953
|
--xh-action-padding-inline: 0;
|
|
@@ -18130,7 +18171,7 @@
|
|
|
18130
18171
|
border-end-end-radius: 0;
|
|
18131
18172
|
}
|
|
18132
18173
|
|
|
18133
|
-
/* 焦点边一律 --xh-border-control-focus,不随 tone
|
|
18174
|
+
/* 焦点边一律 --xh-border-control-focus,不随 tone */
|
|
18134
18175
|
[data-scope='clipboard'][data-part='input']:focus-visible {
|
|
18135
18176
|
border-color: var(--xh-clipboard-input-border-focus, var(--xh-border-control-focus));
|
|
18136
18177
|
}
|
|
@@ -18151,7 +18192,7 @@
|
|
|
18151
18192
|
-webkit-text-fill-color: var(--xh-clipboard-input-autofill-fg, var(--xh-fg-default));
|
|
18152
18193
|
}
|
|
18153
18194
|
|
|
18154
|
-
/*
|
|
18195
|
+
/* 复制钮是定尺的独立动作按钮:盒型、四态面、0.97 按压与粗指针命中区由家族配方给出,
|
|
18155
18196
|
这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与几何槽映射。
|
|
18156
18197
|
叠格布局要保留:两侧指示器叠在同一格,切换时不抖宽度 */
|
|
18157
18198
|
[data-scope='clipboard'][data-part='copy-trigger'] {
|
|
@@ -18171,7 +18212,7 @@
|
|
|
18171
18212
|
--xh-action-border-pressed: var(--xh-clipboard-copy-trigger-border-hover, var(--xh-_action-variant-border-pressed));
|
|
18172
18213
|
--xh-action-border-focus-visible: var(--xh-clipboard-copy-trigger-border, var(--xh-_action-variant-border-focus-visible));
|
|
18173
18214
|
--xh-action-border-disabled: var(--xh-clipboard-copy-trigger-border-disabled, var(--xh-_action-variant-border-disabled));
|
|
18174
|
-
/*
|
|
18215
|
+
/* 矩阵各态无影(淡底与阴影互斥):solid 也不再悬停抬影,使用者槽仍可自行加 */
|
|
18175
18216
|
--xh-action-shadow-hover: var(--xh-clipboard-copy-trigger-shadow-hover, none);
|
|
18176
18217
|
--xh-action-radius: var(--xh-clipboard-copy-trigger-radius, var(--xh-shape-control));
|
|
18177
18218
|
--xh-action-visual-size: var(--xh-clipboard-copy-trigger-h, var(--xh-_clipboard-h));
|
|
@@ -18237,7 +18278,7 @@
|
|
|
18237
18278
|
margin: auto;
|
|
18238
18279
|
border: var(--xh-stroke-thin) solid transparent;
|
|
18239
18280
|
border-block-start-color: currentColor;
|
|
18240
|
-
/* 正圆的加载环:正方盒取 circle
|
|
18281
|
+
/* 正圆的加载环:正方盒取 circle */
|
|
18241
18282
|
border-radius: var(--xh-shape-circle);
|
|
18242
18283
|
opacity: 0;
|
|
18243
18284
|
animation:
|
|
@@ -18358,7 +18399,7 @@
|
|
|
18358
18399
|
--xh-code-view-skin: 1;
|
|
18359
18400
|
}
|
|
18360
18401
|
|
|
18361
|
-
/* 一张静态内容面:--xh-border-default 描边 + surface 底 +
|
|
18402
|
+
/* 一张静态内容面:--xh-border-default 描边 + surface 底 + 无影(边界只由描边承担),
|
|
18362
18403
|
overflow: hidden 让内部 <pre> 的滚动内容沿圆角收边;不设 display,排布由作者决定。
|
|
18363
18404
|
color 给整段未着色的代码定基线,字号在这里消费一次,缺省即 sm 档。 */
|
|
18364
18405
|
[data-scope='code-view'][data-part='root'] {
|
|
@@ -18546,7 +18587,7 @@
|
|
|
18546
18587
|
}
|
|
18547
18588
|
|
|
18548
18589
|
/* 折叠条是铺满一行的 disclosure trigger,盒型、悬停与按下面由 Action Control 的 disclosure-trigger 档给
|
|
18549
|
-
(ghost 形态:白底承载 hover 100 → pressed 200
|
|
18590
|
+
(ghost 形态:白底承载 hover 100 → pressed 200,按下只换面不缩放);这里只把使用者槽映射到
|
|
18550
18591
|
桥接槽:圆角归零贴住卡边,内衬沿用代码区的横向内距与折叠条自己的纵向内距,字号与头部条同档。
|
|
18551
18592
|
顶边是与头部条同一支的内部分隔线:配方按状态写 border-color 简写,四个状态的边色槽都映射到
|
|
18552
18593
|
这支分隔色,再把四边宽归零、只留顶边一条 */
|
|
@@ -18635,7 +18676,7 @@
|
|
|
18635
18676
|
/* 根容器自己不排版,这条只声明尺寸档的私有槽:正文与标题行从 root 继承它们,
|
|
18636
18677
|
换档不必给部件各写一条选择器;触发器的三档几何由家族 disclosure-trigger 档给 */
|
|
18637
18678
|
[data-scope='collapsible'][data-part='root'] {
|
|
18638
|
-
/* 作者塞进正文里的图标与皮肤画的兜底字形同一把尺:md
|
|
18679
|
+
/* 作者塞进正文里的图标与皮肤画的兜底字形同一把尺:md 档,触发器上另按家族档取值 */
|
|
18639
18680
|
--xh-icon-size: var(--xh-collapsible-icon-size, var(--xh-glyph-size-md));
|
|
18640
18681
|
|
|
18641
18682
|
--xh-_collapsible-trigger-gap: var(--xh-control-gap-md);
|
|
@@ -18675,7 +18716,7 @@
|
|
|
18675
18716
|
}
|
|
18676
18717
|
|
|
18677
18718
|
/* 触发器铺满一行,盒型、三档几何、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给
|
|
18678
|
-
(ghost 形态:根无壳,按画布承载 hover 100 → pressed 200
|
|
18719
|
+
(ghost 形态:根无壳,按画布承载 hover 100 → pressed 200;按下只换面不缩放);
|
|
18679
18720
|
这里只把使用者槽映射到桥接槽:字色三态同值(家族的 hover / pressed 字色规则比皮肤更特定,不映射会被换回
|
|
18680
18721
|
缺省字色),字形按触发器自己的档位取 --xh-_action-profile-glyph-size;边归零贴住标题行,几何与迁移前一致 */
|
|
18681
18722
|
[data-scope='collapsible'][data-part='trigger'] {
|
|
@@ -18697,7 +18738,7 @@
|
|
|
18697
18738
|
}
|
|
18698
18739
|
|
|
18699
18740
|
/* 展开着的那一档单开一个槽:与常态共用一个的话,作者一改常态字色就把展开态也改掉了。
|
|
18700
|
-
悬停 /
|
|
18741
|
+
悬停 / 按下的面与收起态同档(open 与家族 hover 同档中性) */
|
|
18701
18742
|
[data-scope='collapsible'][data-part='trigger'][data-state='open'] {
|
|
18702
18743
|
--xh-action-fg-rest: var(--xh-collapsible-trigger-fg-open, var(--xh-_collapsible-open-fg));
|
|
18703
18744
|
--xh-action-fg-hover: var(--xh-collapsible-trigger-fg-open, var(--xh-_collapsible-open-fg));
|
|
@@ -18717,7 +18758,7 @@
|
|
|
18717
18758
|
justify-content: center;
|
|
18718
18759
|
color: var(--xh-collapsible-indicator-fg, var(--xh-fg-muted));
|
|
18719
18760
|
line-height: var(--xh-leading-none);
|
|
18720
|
-
/*
|
|
18761
|
+
/* 指示器与正文同档转向:正文 enter 档展开,箭头也用同一段时长翻过去 */
|
|
18721
18762
|
transition: rotate var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
18722
18763
|
}
|
|
18723
18764
|
|
|
@@ -19130,9 +19171,9 @@
|
|
|
19130
19171
|
padding-inline: var(--xh-color-picker-content-px, var(--xh-space-3));
|
|
19131
19172
|
max-block-size: min(var(--xh-color-picker-max-h, var(--xh-viewport-h-md)), var(--xh-_color-picker-available-h));
|
|
19132
19173
|
overflow-y: auto;
|
|
19133
|
-
/*
|
|
19174
|
+
/* 浮层滚动面:滚到头不把页面一起带走 */
|
|
19134
19175
|
overscroll-behavior: contain;
|
|
19135
|
-
/* 面域 + 滑杆 + 通道输入的表单型多列面板,走 floating
|
|
19176
|
+
/* 面域 + 滑杆 + 通道输入的表单型多列面板,走 floating 材质——实体底 + --xh-border-default 描边 +
|
|
19136
19177
|
--xh-elevation-floating 落影,不透景、不画顶部边界光 */
|
|
19137
19178
|
border: var(--xh-stroke-thin) solid var(--xh-color-picker-content-border, var(--xh-border-default));
|
|
19138
19179
|
border-radius: var(--xh-color-picker-content-radius, var(--xh-shape-overlay));
|
|
@@ -19142,9 +19183,7 @@
|
|
|
19142
19183
|
pointer-events: auto;
|
|
19143
19184
|
}
|
|
19144
19185
|
|
|
19145
|
-
/* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
|
|
19146
19186
|
[data-scope='color-picker'][data-part='content'][data-state='open'] {
|
|
19147
|
-
will-change: opacity, translate;
|
|
19148
19187
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
19149
19188
|
}
|
|
19150
19189
|
|
|
@@ -19450,7 +19489,7 @@
|
|
|
19450
19489
|
|
|
19451
19490
|
display: flex;
|
|
19452
19491
|
flex-direction: column;
|
|
19453
|
-
/*
|
|
19492
|
+
/* 字段标签贴控件(复合单字段) */
|
|
19454
19493
|
gap: var(--xh-color-slider-gap, var(--xh-space-1));
|
|
19455
19494
|
}
|
|
19456
19495
|
|
|
@@ -19460,10 +19499,10 @@
|
|
|
19460
19499
|
align-items: center;
|
|
19461
19500
|
}
|
|
19462
19501
|
|
|
19463
|
-
/*
|
|
19502
|
+
/* 禁用不整体压暗:标签是文字,换到禁用前景;颜色带与拇指画的是颜色本身,换不得色,
|
|
19464
19503
|
压暗只做一次、落在 control 上(track / thumb 各自再叠一层 opacity 会越叠越黑),拇指另收掉抬升 */
|
|
19465
19504
|
|
|
19466
|
-
/* 字段标签:14 / 500 / fg-default
|
|
19505
|
+
/* 字段标签:14 / 500 / fg-default,禁用换到 --xh-fg-subtle */
|
|
19467
19506
|
[data-scope='color-slider'][data-part='label'] {
|
|
19468
19507
|
color: var(--xh-color-slider-label-fg, var(--xh-fg-default));
|
|
19469
19508
|
font-size: var(--xh-color-slider-label-font-size, var(--xh-text-label-size));
|
|
@@ -19549,7 +19588,7 @@
|
|
|
19549
19588
|
}
|
|
19550
19589
|
|
|
19551
19590
|
/* 圆点浮在轨道之上:轨道是流内的,拇指是绝对定位的,天然后来居上。
|
|
19552
|
-
拇指填的是当前那一档的颜色(连接层写进私有槽),拇指是可拖起的 raised
|
|
19591
|
+
拇指填的是当前那一档的颜色(连接层写进私有槽),拇指是可拖起的 raised 面:
|
|
19553
19592
|
--xh-border-default 描边把它从任何底色里框出来,raised 影只是加成、不作边界。
|
|
19554
19593
|
box-sizing 必须显式写:描边要吃进直径里,否则下面按半个直径回拉的负外边距就对不上圆心。 */
|
|
19555
19594
|
[data-scope='color-slider'][data-part='thumb'] {
|
|
@@ -19773,7 +19812,7 @@
|
|
|
19773
19812
|
--xh-_color-swatch-picker-indicator: var(--xh-control-indicator-lg);
|
|
19774
19813
|
}
|
|
19775
19814
|
|
|
19776
|
-
/*
|
|
19815
|
+
/* 标题独占一行,格子从下一行起排。复合单字段的标签:14 / 500 / fg-default,不随档;
|
|
19777
19816
|
与格子的距离贴控件 space-1——容器的 gap 归格子之间,标签在它之上补一段差值把距离收成目标值 */
|
|
19778
19817
|
[data-scope='color-swatch-picker'][data-part='label'] {
|
|
19779
19818
|
flex-basis: 100%;
|
|
@@ -19802,7 +19841,7 @@
|
|
|
19802
19841
|
flex: none;
|
|
19803
19842
|
inline-size: var(--xh-color-swatch-picker-item-size, var(--xh-_color-swatch-picker-cell));
|
|
19804
19843
|
block-size: var(--xh-color-swatch-picker-item-size, var(--xh-_color-swatch-picker-cell));
|
|
19805
|
-
/* 色块 item 的身份是 inset
|
|
19844
|
+
/* 色块 item 的身份是 inset(嵌在 control 内的小块) */
|
|
19806
19845
|
border-radius: var(--xh-color-swatch-picker-item-radius, var(--xh-shape-inset));
|
|
19807
19846
|
outline: none;
|
|
19808
19847
|
cursor: pointer;
|
|
@@ -19810,12 +19849,12 @@
|
|
|
19810
19849
|
}
|
|
19811
19850
|
|
|
19812
19851
|
/* 指到哪一格:描边换到控件的悬停边(border-strong 只留给 contrast-more 与登记的强调边);
|
|
19813
|
-
|
|
19852
|
+
选中的那一格保留自己的品牌描边(选中身份不被悬停盖掉) */
|
|
19814
19853
|
[data-scope='color-swatch-picker'][data-part='item']:not([data-disabled], [data-readonly], [data-state='checked']):hover {
|
|
19815
19854
|
--xh-_color-swatch-picker-edge: var(--xh-color-swatch-picker-swatch-border-hover, var(--xh-border-control-hover));
|
|
19816
19855
|
}
|
|
19817
19856
|
|
|
19818
|
-
/*
|
|
19857
|
+
/* 这一格的底色就是它要展示的那个颜色,换底等于把展示物盖掉(的「同时换底」在这里落不下去),
|
|
19819
19858
|
交互回执只能落在别处:按下去看下压,描边同时换到品牌色作第二通道(按住即将选中的那一格)。
|
|
19820
19859
|
置灰与只读的都不压;指针 :active 与 Headless 投影的 data-pressed 看见同一副按压面 */
|
|
19821
19860
|
[data-scope='color-swatch-picker'][data-part='item']:not([data-disabled], [data-readonly]):is(:active, [data-pressed]) {
|
|
@@ -19884,7 +19923,7 @@
|
|
|
19884
19923
|
inline-size: var(--xh-color-swatch-picker-indicator-size, var(--xh-_color-swatch-picker-indicator));
|
|
19885
19924
|
block-size: var(--xh-color-swatch-picker-indicator-size, var(--xh-_color-swatch-picker-indicator));
|
|
19886
19925
|
border: var(--xh-stroke-thin) solid var(--xh-color-swatch-picker-indicator-border, var(--xh-bg-canvas));
|
|
19887
|
-
/* 正方盒取 circle
|
|
19926
|
+
/* 正方盒取 circle(宽高同槽的盒不得用 pill 冒充圆) */
|
|
19888
19927
|
border-radius: var(--xh-shape-circle);
|
|
19889
19928
|
background: var(--xh-color-swatch-picker-indicator-bg, var(--xh-_color-swatch-picker-accent));
|
|
19890
19929
|
opacity: 0;
|
|
@@ -20041,7 +20080,7 @@
|
|
|
20041
20080
|
|
|
20042
20081
|
/* 作者塞进指示符槽的图标跟着控件的尺寸档走;它自己写了 size 时仍以作者的为准。
|
|
20043
20082
|
浮层条目里自绘的状态字形(勾选标记所在的标记盒与盒里的勾)不读这支:它们是指示符,走
|
|
20044
|
-
--xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size
|
|
20083
|
+
--xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size 改接到盒的尺 */
|
|
20045
20084
|
--xh-icon-size: var(--xh-combobox-icon-size, var(--xh-glyph-size-md));
|
|
20046
20085
|
|
|
20047
20086
|
/* 语气只落在勾选标记上,单选与多选正文使用同一颜色。 */
|
|
@@ -20279,8 +20318,6 @@
|
|
|
20279
20318
|
|
|
20280
20319
|
[data-scope='combobox'][data-part='content'][data-state='open'] {
|
|
20281
20320
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
20282
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
20283
|
-
will-change: opacity, translate;
|
|
20284
20321
|
}
|
|
20285
20322
|
|
|
20286
20323
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -20381,7 +20418,7 @@
|
|
|
20381
20418
|
|
|
20382
20419
|
/* 勾选标记落在家族网格的 indicator 列,只在选中项上显形(家族按 aria-selected / data-state=checked 给);
|
|
20383
20420
|
未选中时占位不塌,切换选中不引起行宽抖动。
|
|
20384
|
-
|
|
20421
|
+
盒与盒里的勾是指示符:盒按指示符档取尺,并在自己身上把 --xh-icon-size 改接到盒的尺,皮肤画的
|
|
20385
20422
|
兜底勾与作者塞进盒里的 XhIcon 读同一把尺、与盒同边长(勾选标记不是勾选格,不取 × 0.75,与 Select /
|
|
20386
20423
|
Listbox / Menu 族同口径);不读 root / positioner 按档下发的 --xh-icon-size——那支只管作者放进条目里的
|
|
20387
20424
|
图标,按图标档取的 20px 比 16 / 14 的指示符档大一圈 */
|
|
@@ -20489,7 +20526,7 @@
|
|
|
20489
20526
|
谁先命中谁给出这一档的取值;条目、检索框与提示条都从面板继承下去 */
|
|
20490
20527
|
[data-scope='command']:is([data-part='positioner'], [data-part='content']) {
|
|
20491
20528
|
/* 条目外的字形(分组标题、底部提示条)按档取尺,缺省 md,随 data-size 换档;命令里的图标由家族随
|
|
20492
|
-
data-xh-collection-size
|
|
20529
|
+
data-xh-collection-size 下发 */
|
|
20493
20530
|
--xh-icon-size: var(--xh-command-icon-size, var(--xh-glyph-size-md));
|
|
20494
20531
|
|
|
20495
20532
|
/* 尺寸档只换这六个私有槽,换档不必给每个部件各写一条选择器 */
|
|
@@ -20588,7 +20625,7 @@
|
|
|
20588
20625
|
max-inline-size: var(--xh-command-max-w, var(--xh-_command-max-w));
|
|
20589
20626
|
/* 封顶才有可滚的余量:不封顶结果列表会一路撑到视口外,滚动条永远出不来 */
|
|
20590
20627
|
max-block-size: var(--xh-command-max-h, var(--xh-overlay-max-h));
|
|
20591
|
-
/* 模态命令面板与 Dialog 同档:overlay 圆角 + sheet 三件套(material-elevated 的边 / 底 /
|
|
20628
|
+
/* 模态命令面板与 Dialog 同档:overlay 圆角 + sheet 三件套(material-elevated 的边 / 底 / 影),
|
|
20592
20629
|
边界由描边承担,不再只靠落影 */
|
|
20593
20630
|
border: var(--xh-stroke-thin) solid var(--xh-command-border, var(--xh-material-elevated-border));
|
|
20594
20631
|
border-radius: var(--xh-command-radius, var(--xh-shape-overlay));
|
|
@@ -20618,8 +20655,6 @@
|
|
|
20618
20655
|
|
|
20619
20656
|
[data-scope='command'][data-part='content'][data-state='open'] {
|
|
20620
20657
|
animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
20621
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
20622
|
-
will-change: opacity, scale, translate;
|
|
20623
20658
|
}
|
|
20624
20659
|
|
|
20625
20660
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -20675,7 +20710,7 @@
|
|
|
20675
20710
|
min-block-size: 0;
|
|
20676
20711
|
padding-block: var(--xh-command-list-py, var(--xh-space-2));
|
|
20677
20712
|
padding-inline: var(--xh-command-list-px, var(--xh-space-2));
|
|
20678
|
-
/*
|
|
20713
|
+
/* 模态面板里的滚动面:到底后不把滚动链穿透给页面 */
|
|
20679
20714
|
overflow-y: auto;
|
|
20680
20715
|
overscroll-behavior: contain;
|
|
20681
20716
|
}
|
|
@@ -20925,7 +20960,7 @@
|
|
|
20925
20960
|
/* 私有槽同时声明在根与 positioner 上:浮层被搬到 portal 落点,不是根的后代,继承不过去 */
|
|
20926
20961
|
[data-scope='context-menu']:is([data-part='root'], [data-part='positioner']) {
|
|
20927
20962
|
/* 条目外的字形(分组标题等)按档取尺,缺省 md,随 data-size 换档;同样声明在 positioner 上,被搬走的浮层
|
|
20928
|
-
才拿得到;条目里作者放的图标由家族随 data-xh-collection-size
|
|
20963
|
+
才拿得到;条目里作者放的图标由家族随 data-xh-collection-size 下发。菜单自绘的状态字形(标记位的盒、
|
|
20929
20964
|
盒里兜底的勾、子菜单的展开 chevron)不读这支:它们是指示符,走 --xh-control-indicator-* 一族——标记位在
|
|
20930
20965
|
自己身上把 --xh-icon-size 改接到盒的尺,子菜单箭头走 --xh-context-menu-submenu-indicator-size */
|
|
20931
20966
|
--xh-icon-size: var(--xh-context-menu-icon-size, var(--xh-glyph-size-md));
|
|
@@ -20964,7 +20999,7 @@
|
|
|
20964
20999
|
-webkit-backdrop-filter: var(--xh-context-menu-backdrop, var(--xh-material-frosted-backdrop));
|
|
20965
21000
|
backdrop-filter: var(--xh-context-menu-backdrop, var(--xh-material-frosted-backdrop));
|
|
20966
21001
|
/* 条目超过上限就在菜单内部滚;内收焦点环不会被内边距缘裁掉。
|
|
20967
|
-
|
|
21002
|
+
浮层滚动面:到底后不把滚动链穿透给页面 */
|
|
20968
21003
|
overflow-y: auto;
|
|
20969
21004
|
overscroll-behavior: contain;
|
|
20970
21005
|
pointer-events: auto;
|
|
@@ -21040,8 +21075,6 @@
|
|
|
21040
21075
|
|
|
21041
21076
|
/* 首帧落位后从锚点一侧淡入短移,不缩放整张面。 */
|
|
21042
21077
|
[data-scope='context-menu'][data-part='content'][data-state='open'] {
|
|
21043
|
-
/* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
|
|
21044
|
-
will-change: opacity, translate;
|
|
21045
21078
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
21046
21079
|
}
|
|
21047
21080
|
|
|
@@ -21122,7 +21155,7 @@
|
|
|
21122
21155
|
}
|
|
21123
21156
|
|
|
21124
21157
|
/* 子菜单箭头留在主行末端;description 即使写在它前面,也由 order 独占下一行。
|
|
21125
|
-
|
|
21158
|
+
箭头是指示符:与标记位的盒同走 --xh-control-indicator-size,不读 --xh-icon-size——
|
|
21126
21159
|
按图标档取的 20px 会比 16px 的标记位盒大一圈 */
|
|
21127
21160
|
[data-scope='context-menu'][data-part='item'][aria-haspopup='menu']::after {
|
|
21128
21161
|
content: '';
|
|
@@ -21154,7 +21187,7 @@
|
|
|
21154
21187
|
display: none;
|
|
21155
21188
|
}
|
|
21156
21189
|
|
|
21157
|
-
/* 标记位(勾选符号 /
|
|
21190
|
+
/* 标记位(勾选符号 / 图标)按作者写入的槽位留在主行,不为没写的条目强制占列。盒是指示符:按指示符档
|
|
21158
21191
|
取尺,与 Menu / Cascader 的标记位同走 --xh-control-indicator-size,不读家族按档下发的 --xh-icon-size——
|
|
21159
21192
|
按图标档取的 20px 会比同一行 16px 的指示符档大一圈。盒在自己身上把 --xh-icon-size 改接到盒的尺,
|
|
21160
21193
|
皮肤画的兜底勾与作者塞进标记位的 XhIcon 读同一把尺、与盒同边长(行尾标记不是勾选格,不取 × 0.75);
|
|
@@ -21794,8 +21827,6 @@
|
|
|
21794
21827
|
}
|
|
21795
21828
|
|
|
21796
21829
|
[data-scope='date-picker'][data-part='content'][data-state='open'] {
|
|
21797
|
-
/* 只在展开态挂着:随状态属性一起消失,不长期占着合成层 */
|
|
21798
|
-
will-change: opacity, translate;
|
|
21799
21830
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
21800
21831
|
}
|
|
21801
21832
|
|
|
@@ -22560,8 +22591,6 @@
|
|
|
22560
22591
|
}
|
|
22561
22592
|
|
|
22562
22593
|
[data-scope='date-range-picker'][data-part='content'][data-state='open'] {
|
|
22563
|
-
/* 只在展开态挂着:随状态属性一起消失,不长期占着合成层 */
|
|
22564
|
-
will-change: opacity, translate;
|
|
22565
22594
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
22566
22595
|
}
|
|
22567
22596
|
|
|
@@ -22843,7 +22872,7 @@
|
|
|
22843
22872
|
}
|
|
22844
22873
|
|
|
22845
22874
|
/*
|
|
22846
|
-
*
|
|
22875
|
+
* 触发器是页面上的独立文字按钮:盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
|
|
22847
22876
|
* 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则,
|
|
22848
22877
|
* 只把作者塞进按钮的图标接到随档字形尺(md = 20px)。
|
|
22849
22878
|
*/
|
|
@@ -22907,7 +22936,7 @@
|
|
|
22907
22936
|
}
|
|
22908
22937
|
|
|
22909
22938
|
[data-scope='dialog'][data-part='content'] {
|
|
22910
|
-
/*
|
|
22939
|
+
/* 作者塞进面板里的图标按控件档取;语气徽记与关闭钮另有各自的尺 */
|
|
22911
22940
|
--xh-icon-size: var(--xh-dialog-icon-size, var(--xh-glyph-size-md));
|
|
22912
22941
|
|
|
22913
22942
|
/* 尺寸档只换这一个私有槽。它声明在 content 而不是别处:dialog 的解剖里没有 root,
|
|
@@ -22975,8 +23004,6 @@
|
|
|
22975
23004
|
|
|
22976
23005
|
[data-scope='dialog'][data-part='content'][data-state='open'] {
|
|
22977
23006
|
animation: xh-dialog-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
22978
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
22979
|
-
will-change: opacity, scale, translate;
|
|
22980
23007
|
}
|
|
22981
23008
|
|
|
22982
23009
|
[data-scope='dialog'][data-part='content'][data-state='closed'] {
|
|
@@ -23057,7 +23084,7 @@
|
|
|
23057
23084
|
|
|
23058
23085
|
/* 正文段:面板里唯一会滚的一段。最小高度归零,
|
|
23059
23086
|
否则弹性项按内容撑高,容器再矮也不产生溢出,滚动条永远出不来。
|
|
23060
|
-
模态 body
|
|
23087
|
+
模态 body 是原生细条滚动面:细条由 reset 层统一给,滚到头不把页面一起带走 */
|
|
23061
23088
|
[data-scope='dialog'][data-part='body'] {
|
|
23062
23089
|
flex: 1 1 auto;
|
|
23063
23090
|
min-block-size: 0;
|
|
@@ -23100,7 +23127,7 @@
|
|
|
23100
23127
|
color: var(--xh-dialog-title-fg, var(--xh-fg-default));
|
|
23101
23128
|
}
|
|
23102
23129
|
|
|
23103
|
-
/*
|
|
23130
|
+
/* 说明文字走说明档:13px + fg-muted */
|
|
23104
23131
|
[data-scope='dialog'][data-part='description'] {
|
|
23105
23132
|
margin: 0;
|
|
23106
23133
|
font-size: var(--xh-dialog-description-font-size, var(--xh-text-secondary-size));
|
|
@@ -23115,7 +23142,7 @@
|
|
|
23115
23142
|
}
|
|
23116
23143
|
|
|
23117
23144
|
/*
|
|
23118
|
-
*
|
|
23145
|
+
* 关闭钮是面板角落的单图标钮:正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
|
|
23119
23146
|
* 由家族配方给出——白面上走画布承载阶梯悬停 --xh-bg-subtle(100)→ 按下 --xh-bg-subtle-hover(200),
|
|
23120
23147
|
* 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与摆放,
|
|
23121
23148
|
* 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面,缺省仍是透明底与悬停字色;
|
|
@@ -23292,7 +23319,7 @@
|
|
|
23292
23319
|
/* root 留在页面原地,只是 data-side / data-state 的落点,不该凭空多出一层盒子把
|
|
23293
23320
|
trigger 从作者的 flex / grid 行里挤出去,故 display: contents。 */
|
|
23294
23321
|
[data-scope='drawer'][data-part='root'] {
|
|
23295
|
-
/*
|
|
23322
|
+
/* 作者塞进面板里的图标按控件档取;触发器与关闭钮另由家族配方按各自的档下发字形尺 */
|
|
23296
23323
|
--xh-icon-size: var(--xh-drawer-icon-size, var(--xh-glyph-size-md));
|
|
23297
23324
|
|
|
23298
23325
|
display: contents;
|
|
@@ -23310,7 +23337,7 @@
|
|
|
23310
23337
|
}
|
|
23311
23338
|
|
|
23312
23339
|
/*
|
|
23313
|
-
*
|
|
23340
|
+
* 触发器是页面上的独立文字按钮:盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
|
|
23314
23341
|
* 由家族配方按连接层投影的 data-xh-action-variant / -size 给出(此前自写描边盒型,hover 落 200 / active 落 300)。
|
|
23315
23342
|
* 这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与几何槽映射。
|
|
23316
23343
|
*/
|
|
@@ -23344,7 +23371,7 @@
|
|
|
23344
23371
|
}
|
|
23345
23372
|
|
|
23346
23373
|
/* 抽屉展开期间触发按钮压住不弹起:面板贴在视口边上,它和按钮往往离得很远,
|
|
23347
|
-
按钮自己得说明"这一扇是我开的"。open 与家族 hover
|
|
23374
|
+
按钮自己得说明"这一扇是我开的"。open 与家族 hover 同档中性:
|
|
23348
23375
|
白底承载的 --xh-bg-subtle(100)+ 悬停描边,聚焦时这块面留着 */
|
|
23349
23376
|
[data-scope='drawer'][data-part='trigger'][data-state='open'] {
|
|
23350
23377
|
--xh-action-bg-rest: var(--xh-drawer-trigger-bg-open, var(--xh-bg-subtle));
|
|
@@ -23444,13 +23471,13 @@
|
|
|
23444
23471
|
env(safe-area-inset-left),
|
|
23445
23472
|
env(safe-area-inset-right)
|
|
23446
23473
|
);
|
|
23447
|
-
/* M4 sheet
|
|
23474
|
+
/* M4 sheet 三件套:任何浮层不得只靠 box-shadow 分层,亮色下面板与页面同色,
|
|
23448
23475
|
1px 描边才是它的边界;影只是加成 */
|
|
23449
23476
|
border: var(--xh-stroke-thin) solid var(--xh-drawer-border, var(--xh-material-elevated-border));
|
|
23450
23477
|
background: var(--xh-drawer-bg, var(--xh-material-elevated-bg));
|
|
23451
23478
|
color: var(--xh-drawer-fg, var(--xh-material-elevated-fg));
|
|
23452
23479
|
box-shadow: var(--xh-drawer-shadow, var(--xh-material-elevated-shadow));
|
|
23453
|
-
/* 作者不用 header / body / footer
|
|
23480
|
+
/* 作者不用 header / body / footer 三段时它是唯一的滚动层:模态面滚到头不把页面一起带走 */
|
|
23454
23481
|
overflow: auto;
|
|
23455
23482
|
overscroll-behavior: contain;
|
|
23456
23483
|
/* 尺寸是照视口那条边算出来的,padding 再往外顶就会把面板挤出屏幕、
|
|
@@ -23535,13 +23562,7 @@
|
|
|
23535
23562
|
border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-overlay));
|
|
23536
23563
|
}
|
|
23537
23564
|
|
|
23538
|
-
/*
|
|
23539
|
-
合成层随 data-state 一起收走,收起后不再占着 */
|
|
23540
|
-
[data-scope='drawer'][data-part='content'][data-state='open'] {
|
|
23541
|
-
will-change: translate;
|
|
23542
|
-
}
|
|
23543
|
-
|
|
23544
|
-
/* 滑入/滑出按边配对。入场是整面板从画外推入的大尺度位移(§9.5):走 --xh-motion-duration-slide
|
|
23565
|
+
/* 滑入/滑出按边配对。入场是整面板从画外推入的大尺度位移:走 --xh-motion-duration-slide
|
|
23545
23566
|
与 --xh-motion-ease-slide;退场仍走 exit 档。退场一律 forwards:presence 要等 animationend 才卸载,
|
|
23546
23567
|
不定住终态,面板会在最后一帧弹回原位再消失。 */
|
|
23547
23568
|
[data-scope='drawer'][data-part='content'][data-side='right'][data-state='open'] {
|
|
@@ -23598,7 +23619,7 @@
|
|
|
23598
23619
|
|
|
23599
23620
|
/* 正文段:面板里唯一会滚的一段。最小高度归零,
|
|
23600
23621
|
否则弹性项按内容撑高,容器再矮也不产生溢出,滚动条永远出不来。
|
|
23601
|
-
模态 body
|
|
23622
|
+
模态 body 是原生细条滚动面:细条由 reset 层统一给,滚到头不把页面一起带走 */
|
|
23602
23623
|
[data-scope='drawer'][data-part='body'] {
|
|
23603
23624
|
flex: 1 1 auto;
|
|
23604
23625
|
min-block-size: 0;
|
|
@@ -23636,7 +23657,7 @@
|
|
|
23636
23657
|
color: var(--xh-drawer-title-fg, var(--xh-fg-default));
|
|
23637
23658
|
}
|
|
23638
23659
|
|
|
23639
|
-
/*
|
|
23660
|
+
/* 说明文字走说明档:13px + fg-muted */
|
|
23640
23661
|
[data-scope='drawer'][data-part='description'] {
|
|
23641
23662
|
margin: 0;
|
|
23642
23663
|
font-size: var(--xh-drawer-description-font-size, var(--xh-text-secondary-size));
|
|
@@ -23651,7 +23672,7 @@
|
|
|
23651
23672
|
}
|
|
23652
23673
|
|
|
23653
23674
|
/*
|
|
23654
|
-
*
|
|
23675
|
+
* 关闭钮是面板角落的单图标钮:正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
|
|
23655
23676
|
* 由家族配方给出——白面上走画布承载阶梯悬停 --xh-bg-subtle(100)→ 按下 --xh-bg-subtle-hover(200),
|
|
23656
23677
|
* 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与摆放,
|
|
23657
23678
|
* 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面(与 dialog 一致),缺省仍是透明底与悬停字色;
|
|
@@ -24065,7 +24086,7 @@
|
|
|
24065
24086
|
--xh-field-border-hover: var(--xh-field-control-border-hover, var(--xh-_field-variant-border-hover));
|
|
24066
24087
|
--xh-field-border-focus: var(--xh-field-control-border-focus, var(--xh-_field-variant-border-focus));
|
|
24067
24088
|
--xh-field-border-invalid: var(--xh-field-control-border-invalid, var(--xh-_field-variant-border-invalid));
|
|
24068
|
-
/*
|
|
24089
|
+
/* 焦点环与家族同一支公共环,不再留逐组件的环色槽(焦点边与环一律公共) */
|
|
24069
24090
|
--xh-field-ring-focus: var(--xh-ring-focus);
|
|
24070
24091
|
--xh-field-ring-invalid: var(--xh-ring-invalid);
|
|
24071
24092
|
--xh-field-shadow-rest: var(--xh-field-control-shadow, none);
|
|
@@ -24138,7 +24159,7 @@
|
|
|
24138
24159
|
[data-scope='file-upload'][data-part='root'] {
|
|
24139
24160
|
/* 作者放进缩略图槽、删除钮与清空钮里的图标跟着字号走,与皮肤画的兜底叉同一把尺。
|
|
24140
24161
|
条目行首自绘的状态标记(传完的勾、失败的警示)不读这支:它们是指示符,与同一行里 icon 档的
|
|
24141
|
-
删除钮并排、走 --xh-control-indicator-*
|
|
24162
|
+
删除钮并排、走 --xh-control-indicator-* 一族,尺寸由 --xh-file-upload-item-mark-size 单独控 */
|
|
24142
24163
|
--xh-icon-size: var(--xh-file-upload-icon-size, var(--xh-glyph-size-text));
|
|
24143
24164
|
|
|
24144
24165
|
display: flex;
|
|
@@ -24744,7 +24765,7 @@
|
|
|
24744
24765
|
color: var(--xh-form-summary-fg, var(--xh-fg-danger));
|
|
24745
24766
|
font-size: var(--xh-form-summary-font-size, var(--xh-text-body-size));
|
|
24746
24767
|
line-height: var(--xh-leading-normal);
|
|
24747
|
-
/*
|
|
24768
|
+
/* 静态反馈面:边界由描边承担,不带落影(solid 无影) */
|
|
24748
24769
|
box-shadow: var(--xh-form-summary-shadow, none);
|
|
24749
24770
|
}
|
|
24750
24771
|
|
|
@@ -24764,7 +24785,7 @@
|
|
|
24764
24785
|
animation: xh-form-summary-enter var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
24765
24786
|
}
|
|
24766
24787
|
|
|
24767
|
-
/*
|
|
24788
|
+
/* 摘要里的每一条是一个真链接,指向对应字段容器。铺满一行的集合行:悬停 / 按下只换面不缩放,
|
|
24768
24789
|
底面坐在摘要的 surface 白底上,走白底承载阶梯 100 → 200;换面走按压时间线,释放回 release 档 */
|
|
24769
24790
|
[data-scope='form'][data-part='error-summary-item'] {
|
|
24770
24791
|
display: block;
|
|
@@ -24860,7 +24881,7 @@
|
|
|
24860
24881
|
|
|
24861
24882
|
/* 两颗按钮是离散动作控件:盒几何、悬停 / 按下与 0.97 按压、焦点环、禁用面全由 Action Control 的 text 档给,
|
|
24862
24883
|
组件只映射既有使用者槽。提交走 solid 档:表单提交是这一组里的主要动作,与 Button 缺省同为品牌实心;
|
|
24863
|
-
重置走 outline 档:非 Button
|
|
24884
|
+
重置走 outline 档:非 Button 的触发器缺省中性描边。两颗共用的几何与字号写在一起 */
|
|
24864
24885
|
[data-scope='form'][data-part='submit-trigger'],
|
|
24865
24886
|
[data-scope='form'][data-part='reset-trigger'] {
|
|
24866
24887
|
--xh-action-visual-size: var(--xh-form-trigger-h, var(--xh-_action-profile-visual-size));
|
|
@@ -25038,7 +25059,7 @@
|
|
|
25038
25059
|
/* 内容由作者给,长度不可预知:不限高就整块伸出视口且滚不到 */
|
|
25039
25060
|
max-block-size: min(var(--xh-hover-card-max-h, var(--xh-overlay-max-h)), var(--xh-_hover-card-available-h));
|
|
25040
25061
|
overflow-y: auto;
|
|
25041
|
-
/* 浮在页面之上的 Overlay
|
|
25062
|
+
/* 浮在页面之上的 Overlay 滚动面:滚到头不把页面一起带走 */
|
|
25042
25063
|
overscroll-behavior: contain;
|
|
25043
25064
|
padding-block: var(--xh-hover-card-py, var(--xh-_hover-card-pad));
|
|
25044
25065
|
padding-inline: var(--xh-hover-card-px, var(--xh-_hover-card-pad));
|
|
@@ -25074,8 +25095,6 @@
|
|
|
25074
25095
|
|
|
25075
25096
|
[data-scope='hover-card'][data-part='content'][data-state='open'] {
|
|
25076
25097
|
animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
25077
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
25078
|
-
will-change: opacity, scale, translate;
|
|
25079
25098
|
}
|
|
25080
25099
|
|
|
25081
25100
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -25103,7 +25122,7 @@
|
|
|
25103
25122
|
color: var(--xh-hover-card-title-fg, var(--xh-fg-default));
|
|
25104
25123
|
}
|
|
25105
25124
|
|
|
25106
|
-
/*
|
|
25125
|
+
/* 说明文字走说明档:13px + fg-muted */
|
|
25107
25126
|
[data-scope='hover-card'][data-part='description'] {
|
|
25108
25127
|
margin: 0;
|
|
25109
25128
|
font-size: var(--xh-hover-card-description-font-size, var(--xh-text-secondary-size));
|
|
@@ -25399,9 +25418,7 @@
|
|
|
25399
25418
|
color: var(--xh-image-viewer-fg, var(--xh-color-neutral-0));
|
|
25400
25419
|
}
|
|
25401
25420
|
|
|
25402
|
-
/* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
|
|
25403
25421
|
[data-scope='image-viewer'][data-part='content'][data-state='open'] {
|
|
25404
|
-
will-change: opacity;
|
|
25405
25422
|
animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
|
|
25406
25423
|
}
|
|
25407
25424
|
|
|
@@ -25459,7 +25476,7 @@
|
|
|
25459
25476
|
四件都钉在铺满视口的那一层的边上,贴边一律与安全区取大的一头:刘海、圆角与
|
|
25460
25477
|
底部横条压住的那一段由系统给出,贴边比它窄时钮会被切掉一角;桌面上 env() 恒为 0。
|
|
25461
25478
|
安全区只有物理方向的四个名字,行内轴上两侧同取较宽的那一段,RTL 下不会翻错边。
|
|
25462
|
-
工具条是容器、计数是一行字的气泡,各按身份取圆角(surface / control
|
|
25479
|
+
工具条是容器、计数是一行字的气泡,各按身份取圆角(surface / control),
|
|
25463
25480
|
--xh-image-viewer-overlay-radius 仍是两者共用的使用者入口;翻页钮的面走下面的桥接槽 */
|
|
25464
25481
|
[data-scope='image-viewer'][data-part='toolbar'],
|
|
25465
25482
|
[data-scope='image-viewer'][data-part='counter'] {
|
|
@@ -25514,7 +25531,7 @@
|
|
|
25514
25531
|
font-size: var(--xh-text-secondary-size);
|
|
25515
25532
|
}
|
|
25516
25533
|
|
|
25517
|
-
/* 两颗翻页钮:浮在图上的单图标圆钮,接 Action Control floating 档 md(48px,正方盒取 circle
|
|
25534
|
+
/* 两颗翻页钮:浮在图上的单图标圆钮,接 Action Control floating 档 md(48px,正方盒取 circle)。
|
|
25518
25535
|
面桥接到自家深色 chrome:跟的是图上那层半透明深底不是页面底色,所以不取 frosted 缺省面,
|
|
25519
25536
|
也不取语义档的 --xh-bg-subtle-*;到头时是原生 disabled,压不动的东西不给回应 */
|
|
25520
25537
|
[data-scope='image-viewer'][data-part='prev-trigger'],
|
|
@@ -25727,10 +25744,10 @@
|
|
|
25727
25744
|
|
|
25728
25745
|
[data-scope='listbox'][data-part='root'] {
|
|
25729
25746
|
/* 条目外的字形(空态 / 在途占位里作者塞的图标)按档取尺,缺省 md;条目内的字形由家族随
|
|
25730
|
-
data-xh-collection-size
|
|
25747
|
+
data-xh-collection-size 下发。列表框自绘的状态字形(行尾对号所在的标记盒与盒里的勾)不读这支:
|
|
25731
25748
|
它们是指示符,走 --xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size 改接到盒的尺 */
|
|
25732
25749
|
--xh-icon-size: var(--xh-listbox-icon-size, var(--xh-glyph-size-md));
|
|
25733
|
-
/*
|
|
25750
|
+
/* 定高小列表的自绘条挂在根上:根是条子的定位盒,轨道底色关掉才不会在列表右缘糊出一条灰带 */
|
|
25734
25751
|
--xh-scrollbar-track-bg: transparent;
|
|
25735
25752
|
|
|
25736
25753
|
/* 尺寸档只换这四个私有槽,条目、分组标题与空态占位都从 root 继承它们,
|
|
@@ -25927,7 +25944,7 @@
|
|
|
25927
25944
|
}
|
|
25928
25945
|
|
|
25929
25946
|
/* 取下一页的按钮:铺满一行摆在列表尾——铺满一行的独立动作条目,接 Action Control 的 row 档、
|
|
25930
|
-
ghost
|
|
25947
|
+
ghost 形态:宽度由容器给、高度随内容、按下只换面不缩放;盒几何、悬停 / 按下 / 禁用面、
|
|
25931
25948
|
焦点环与粗指针热区全由家族给,白底承载 hover 100 → pressed 200。
|
|
25932
25949
|
这里只把使用者槽映射到桥接槽并把文案居中:它是一行里唯一的东西,靠起始缘会像一条没对齐的条目 */
|
|
25933
25950
|
[data-scope='listbox'][data-part='load-more-trigger'] {
|
|
@@ -25943,7 +25960,7 @@
|
|
|
25943
25960
|
|
|
25944
25961
|
justify-content: center;
|
|
25945
25962
|
text-align: center;
|
|
25946
|
-
/* row
|
|
25963
|
+
/* row 档允许换行、高度随内容,折行的文案走正文行高 */
|
|
25947
25964
|
line-height: var(--xh-leading-normal);
|
|
25948
25965
|
}
|
|
25949
25966
|
|
|
@@ -25951,11 +25968,11 @@
|
|
|
25951
25968
|
display: none;
|
|
25952
25969
|
}
|
|
25953
25970
|
|
|
25954
|
-
/* 条目走 Collection Item 的
|
|
25955
|
-
(白底承载 hover 100 → pressed 200
|
|
25956
|
-
|
|
25957
|
-
|
|
25958
|
-
|
|
25971
|
+
/* 条目走 Collection Item 的 overlay 语境,与树选择同一种选中读法:网格、尺寸档、悬停 / 高亮 / 按下面
|
|
25972
|
+
(白底承载 hover 100 → pressed 200)由家族给,选中不换面、不换字色,只在行尾亮对号,
|
|
25973
|
+
选中叠悬停 / 按下沿用同一条阶梯;禁用面(字色降级、not-allowed、不换面)也归家族。
|
|
25974
|
+
这里只把公开槽映射到桥接槽,不复制任何状态选择器。
|
|
25975
|
+
列表框坐在 surface 白底上,前景走 fg-default 而不是浮层的 frosted 前景 */
|
|
25959
25976
|
[data-scope='listbox'][data-part='item'] {
|
|
25960
25977
|
--xh-collection-block-padding: var(--xh-listbox-item-py, var(--xh-_listbox-item-py));
|
|
25961
25978
|
--xh-collection-inline-padding: var(--xh-listbox-item-px, var(--xh-_listbox-item-px));
|
|
@@ -25968,10 +25985,10 @@
|
|
|
25968
25985
|
--xh-collection-fg-hover: var(--xh-listbox-item-fg, var(--xh-fg-default));
|
|
25969
25986
|
--xh-collection-fg-keyboard-highlight: var(--xh-listbox-item-fg, var(--xh-fg-default));
|
|
25970
25987
|
--xh-collection-fg-pressed: var(--xh-listbox-item-fg, var(--xh-fg-default));
|
|
25971
|
-
--xh-collection-fg-selected: var(--xh-listbox-item-fg-selected, var(--xh-fg-
|
|
25972
|
-
--xh-collection-fg-selected-hover: var(--xh-listbox-item-fg-selected, var(--xh-fg-
|
|
25973
|
-
--xh-collection-fg-selected-highlight: var(--xh-listbox-item-fg-selected, var(--xh-fg-
|
|
25974
|
-
--xh-collection-fg-selected-pressed: var(--xh-listbox-item-fg-selected, var(--xh-fg-
|
|
25988
|
+
--xh-collection-fg-selected: var(--xh-listbox-item-fg-selected, var(--xh-listbox-item-fg, var(--xh-fg-default)));
|
|
25989
|
+
--xh-collection-fg-selected-hover: var(--xh-listbox-item-fg-selected, var(--xh-listbox-item-fg, var(--xh-fg-default)));
|
|
25990
|
+
--xh-collection-fg-selected-highlight: var(--xh-listbox-item-fg-selected, var(--xh-listbox-item-fg, var(--xh-fg-default)));
|
|
25991
|
+
--xh-collection-fg-selected-pressed: var(--xh-listbox-item-fg-selected, var(--xh-listbox-item-fg, var(--xh-fg-default)));
|
|
25975
25992
|
--xh-collection-font-weight-selected: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-regular));
|
|
25976
25993
|
--xh-collection-font-weight-selected-hover: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-regular));
|
|
25977
25994
|
--xh-collection-font-weight-selected-highlight: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-regular));
|
|
@@ -25979,7 +25996,9 @@
|
|
|
25979
25996
|
--xh-collection-bg-hover: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
|
|
25980
25997
|
--xh-collection-bg-keyboard-highlight: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
|
|
25981
25998
|
--xh-collection-bg-pressed: var(--xh-listbox-item-bg-pressed, var(--xh-bg-subtle-hover));
|
|
25982
|
-
--xh-collection-bg-selected: var(--xh-listbox-item-bg-
|
|
25999
|
+
--xh-collection-bg-selected-hover: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
|
|
26000
|
+
--xh-collection-bg-selected-highlight: var(--xh-listbox-item-bg-hover, var(--xh-bg-subtle));
|
|
26001
|
+
--xh-collection-bg-selected-pressed: var(--xh-listbox-item-bg-pressed, var(--xh-bg-subtle-hover));
|
|
25983
26002
|
/* data-highlighted 跟的是连接层记的焦点条目(指针点选也会落焦):只换面,焦点环在 :focus-visible 下再接回 */
|
|
25984
26003
|
--xh-collection-outline-keyboard-highlight: transparent;
|
|
25985
26004
|
--xh-collection-outline-selected-highlight: transparent;
|
|
@@ -26018,10 +26037,10 @@
|
|
|
26018
26037
|
text-overflow: ellipsis;
|
|
26019
26038
|
}
|
|
26020
26039
|
|
|
26021
|
-
/*
|
|
26040
|
+
/* 勾选标记落在家族网格行尾的 indicator 列(page 与 overlay 同位);显隐与颜色由家族按选中态给,
|
|
26022
26041
|
未选中时占位不塌,切换选中不引起行宽抖动。
|
|
26023
|
-
|
|
26024
|
-
兜底勾与作者塞进盒里的 XhIcon
|
|
26042
|
+
盒与盒里的勾是指示符:盒按指示符档取尺,并在自己身上把 --xh-icon-size 改接到盒的尺,皮肤画的
|
|
26043
|
+
兜底勾与作者塞进盒里的 XhIcon 读同一把尺、与盒同边长(对号不是勾选格,不取 × 0.75,与 Menu 族同口径);
|
|
26025
26044
|
不读家族按档下发到行的 --xh-icon-size——那支只管作者放进条目里的图标,按图标档取的 20px 比 16 / 14 的指示符档大一圈 */
|
|
26026
26045
|
[data-scope='listbox'][data-part='item-indicator'] {
|
|
26027
26046
|
--xh-icon-size: var(--xh-listbox-item-indicator-size, var(--xh-control-indicator-size));
|
|
@@ -26050,6 +26069,13 @@
|
|
|
26050
26069
|
mask: var(--xh-glyph-mark-check) center / contain no-repeat;
|
|
26051
26070
|
}
|
|
26052
26071
|
|
|
26072
|
+
@media print {
|
|
26073
|
+
/* 打印默认丢底色,而对号是遮罩出来的一块底色:行本就不换面,丢了它选中在纸上就没了踪影 */
|
|
26074
|
+
[data-scope='listbox'][data-part='item-indicator'] {
|
|
26075
|
+
print-color-adjust: exact;
|
|
26076
|
+
}
|
|
26077
|
+
}
|
|
26078
|
+
|
|
26053
26079
|
/* styles/loading-bar.css */
|
|
26054
26080
|
/* 定义 loading bar 样式。 */
|
|
26055
26081
|
|
|
@@ -26228,14 +26254,14 @@
|
|
|
26228
26254
|
}
|
|
26229
26255
|
|
|
26230
26256
|
/* 触发器的长相归作者,皮肤只表达展开态:展开着的那一张是打开路径,落与家族 hover 同档的中性面——
|
|
26231
|
-
|
|
26257
|
+
打开中不是选中,不用品牌色、不接语气;哪一张开着由浮层本身说明。不加粗:加粗会推挤相邻内容 */
|
|
26232
26258
|
[data-scope='menu'][data-part='trigger']:not([data-disabled])[data-state='open'] {
|
|
26233
26259
|
background: var(--xh-menu-trigger-bg-active, var(--xh-bg-subtle));
|
|
26234
26260
|
}
|
|
26235
26261
|
|
|
26236
26262
|
[data-scope='menu'][data-part='content'] {
|
|
26237
26263
|
/* 条目外的字形(分组标题等)按档取尺,缺省 md,随 data-size 换档;条目里作者放的图标由家族随
|
|
26238
|
-
data-xh-collection-size
|
|
26264
|
+
data-xh-collection-size 下发。菜单自绘的状态字形(标记位的盒、子菜单的展开 chevron)不读这支:
|
|
26239
26265
|
它们是指示符,走 --xh-control-indicator-* 一族——标记位在自己身上把 --xh-icon-size 改接到盒的尺,
|
|
26240
26266
|
子菜单箭头走 --xh-menu-submenu-indicator-size */
|
|
26241
26267
|
--xh-icon-size: var(--xh-menu-icon-size, var(--xh-glyph-size-md));
|
|
@@ -26267,7 +26293,7 @@
|
|
|
26267
26293
|
-webkit-backdrop-filter: var(--xh-menu-backdrop, var(--xh-material-frosted-backdrop));
|
|
26268
26294
|
backdrop-filter: var(--xh-menu-backdrop, var(--xh-material-frosted-backdrop));
|
|
26269
26295
|
/* 条目超过上限就在菜单内部滚。条目的焦点环是内收的,滚动容器裁在内边距缘上,环切不着。
|
|
26270
|
-
|
|
26296
|
+
浮层滚动面:到底后不把滚动链穿透给页面 */
|
|
26271
26297
|
overflow-y: auto;
|
|
26272
26298
|
overscroll-behavior: contain;
|
|
26273
26299
|
pointer-events: auto;
|
|
@@ -26296,9 +26322,7 @@
|
|
|
26296
26322
|
outline: none;
|
|
26297
26323
|
}
|
|
26298
26324
|
|
|
26299
|
-
/* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
|
|
26300
26325
|
[data-scope='menu'][data-part='content'][data-state='open'] {
|
|
26301
|
-
will-change: opacity, translate;
|
|
26302
26326
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
26303
26327
|
}
|
|
26304
26328
|
|
|
@@ -26378,7 +26402,7 @@
|
|
|
26378
26402
|
display: none;
|
|
26379
26403
|
}
|
|
26380
26404
|
|
|
26381
|
-
/* 标记位(勾选符号 /
|
|
26405
|
+
/* 标记位(勾选符号 / 图标):定宽占位,切换内容不引起行宽抖动。盒是指示符:按指示符档取尺,
|
|
26382
26406
|
与 Cascader / Select 的标记位同走 --xh-control-indicator-size,不读家族按档下发的 --xh-icon-size——
|
|
26383
26407
|
按图标档取的 20px 会比同一行 16px 的指示符档大一圈。盒在自己身上把 --xh-icon-size 改接到盒的尺,
|
|
26384
26408
|
作者塞进标记位的 XhIcon 与盒同尺;条目上那支只管作者直接放进条目里的图标 */
|
|
@@ -26428,7 +26452,7 @@
|
|
|
26428
26452
|
}
|
|
26429
26453
|
|
|
26430
26454
|
/* 带子菜单的条目行尾画右向小箭头:不点开也看得出还有下一级。
|
|
26431
|
-
|
|
26455
|
+
箭头与作者内容同排,用自动外距推到行尾。箭头是指示符:与标记位的盒同走
|
|
26432
26456
|
--xh-control-indicator-size,不读 --xh-icon-size——按图标档取的 20px 会比 16px 的标记位盒大一圈 */
|
|
26433
26457
|
[data-scope='menu'][data-part='item'][aria-haspopup='menu']::after {
|
|
26434
26458
|
content: '';
|
|
@@ -26563,8 +26587,8 @@
|
|
|
26563
26587
|
|
|
26564
26588
|
/* 入口归 Collection Item 展开路径 / 打开中(nav 语境):几何、字号与面全经家族桥接槽。静息字色取 default
|
|
26565
26589
|
(菜单名不是次要文字,不取 nav 缺省的 muted),悬停走白底承载 hover 100,展开着的那一张由连接层投影
|
|
26566
|
-
data-in-path
|
|
26567
|
-
按下 pressed 200
|
|
26590
|
+
data-in-path,家族给与悬停同档的中性面——打开中不是选中,不用品牌色、不接语气、不加粗;
|
|
26591
|
+
按下 pressed 200 只换面不缩放;禁用走 aria-disabled,家族给禁用字色与 not-allowed。
|
|
26568
26592
|
本条 (0,2,0) 压过家族基础块 (0,1,0),不能再写 background / color / cursor */
|
|
26569
26593
|
[data-scope='menubar'][data-part='trigger'] {
|
|
26570
26594
|
--xh-collection-block-padding: var(--xh-menubar-trigger-py, var(--xh-_menubar-trigger-py));
|
|
@@ -26644,7 +26668,7 @@
|
|
|
26644
26668
|
缺省档写在第一条:trigger 与条目的行内内缩都走 control-px 档(随密度轴)、纵向走 space 档,换档各挪一级 */
|
|
26645
26669
|
[data-scope='menubar']:is([data-part='root'], [data-part='positioner']) {
|
|
26646
26670
|
/* 条目外的字形(分组标题、入口)按档取尺,缺省 md,随 data-size 换档;同样声明在 positioner 上,被搬走的
|
|
26647
|
-
浮层才拿得到;条目里作者放的图标由家族随 data-xh-collection-size
|
|
26671
|
+
浮层才拿得到;条目里作者放的图标由家族随 data-xh-collection-size 下发。菜单栏自绘的状态字形(标记位的盒、
|
|
26648
26672
|
盒里兜底的勾、子菜单的展开 chevron)不读这支:它们是指示符,走 --xh-control-indicator-* 一族——标记位在
|
|
26649
26673
|
自己身上把 --xh-icon-size 改接到盒的尺,子菜单箭头走 --xh-menubar-submenu-indicator-size */
|
|
26650
26674
|
--xh-icon-size: var(--xh-menubar-icon-size, var(--xh-glyph-size-md));
|
|
@@ -26698,7 +26722,7 @@
|
|
|
26698
26722
|
-webkit-backdrop-filter: var(--xh-menubar-backdrop, var(--xh-material-frosted-backdrop));
|
|
26699
26723
|
backdrop-filter: var(--xh-menubar-backdrop, var(--xh-material-frosted-backdrop));
|
|
26700
26724
|
/* 条目超过上限就在菜单内部滚。条目的焦点环是内收的,滚动容器裁在内边距缘上,环切不着。
|
|
26701
|
-
|
|
26725
|
+
浮层滚动面:到底后不把滚动链穿透给页面 */
|
|
26702
26726
|
overflow-y: auto;
|
|
26703
26727
|
overscroll-behavior: contain;
|
|
26704
26728
|
pointer-events: auto;
|
|
@@ -26729,8 +26753,6 @@
|
|
|
26729
26753
|
|
|
26730
26754
|
/* 首开从锚点一侧淡入短移,不缩放整张菜单面。 */
|
|
26731
26755
|
[data-scope='menubar'][data-part='content'][data-state='open'] {
|
|
26732
|
-
/* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
|
|
26733
|
-
will-change: opacity, translate;
|
|
26734
26756
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
26735
26757
|
}
|
|
26736
26758
|
|
|
@@ -26817,7 +26839,7 @@
|
|
|
26817
26839
|
|
|
26818
26840
|
/* 带子菜单的条目行尾画右向小箭头:不点开也看得出还有下一级。
|
|
26819
26841
|
description 按 order 独占下一行,箭头仍留在主行末端。
|
|
26820
|
-
|
|
26842
|
+
箭头是指示符:与标记位的盒同走 --xh-control-indicator-size,不读 --xh-icon-size——
|
|
26821
26843
|
按图标档取的 20px 会比 16px 的标记位盒大一圈 */
|
|
26822
26844
|
[data-scope='menubar'][data-part='item'][aria-haspopup='menu']::after {
|
|
26823
26845
|
content: '';
|
|
@@ -26849,7 +26871,7 @@
|
|
|
26849
26871
|
display: none;
|
|
26850
26872
|
}
|
|
26851
26873
|
|
|
26852
|
-
/* 标记位(勾选符号 /
|
|
26874
|
+
/* 标记位(勾选符号 / 图标)按作者写入的位置留在主行,不为没写的条目强制占列。盒是指示符:按指示符档
|
|
26853
26875
|
取尺,与 Menu / ContextMenu 的标记位同走 --xh-control-indicator-size,不读家族按档下发的 --xh-icon-size——
|
|
26854
26876
|
按图标档取的 20px 会比同一行 16px 的指示符档大一圈。盒在自己身上把 --xh-icon-size 改接到盒的尺,
|
|
26855
26877
|
皮肤画的兜底勾与作者塞进标记位的 XhIcon 读同一把尺、与盒同边长(行尾标记不是勾选格,不取 × 0.75);
|
|
@@ -27012,7 +27034,7 @@
|
|
|
27012
27034
|
overscroll-behavior: contain;
|
|
27013
27035
|
}
|
|
27014
27036
|
|
|
27015
|
-
/*
|
|
27037
|
+
/* 流式视口的内容高度一直在变,还在用原生滚动条的视口留一条空道,滚动条出现与消失时不推动文字。
|
|
27016
27038
|
带 data-xh-scrollbar 的容器已经把原生条藏成零宽,这条空道对它没有布局作用,排除掉 */
|
|
27017
27039
|
[data-scope='message-feed'][data-part='viewport']:not([data-xh-scrollbar]) {
|
|
27018
27040
|
scrollbar-gutter: stable;
|
|
@@ -27056,7 +27078,7 @@
|
|
|
27056
27078
|
|
|
27057
27079
|
/* 回到底部:浮在滚动区右下角,收起时不卸载只隐藏。盒型、悬停 / 按下面与缩放由 Action Control 的
|
|
27058
27080
|
floating 档给(circle 正方盒、ghost 形态:白底承载 hover 100 → pressed 200);材质随角落浮钮族走
|
|
27059
|
-
frosted 四件套(底 + 边 + 影 +
|
|
27081
|
+
frosted 四件套(底 + 边 + 影 + 磨砂),这里只把使用者槽映射到桥接槽:
|
|
27060
27082
|
字形按 xs 档取 --xh-_action-profile-glyph-size(16px),与 log / back-top 同一把尺 */
|
|
27061
27083
|
[data-scope='message-feed'][data-part='scroll-to-end-trigger'] {
|
|
27062
27084
|
--xh-_message-feed-scroll-to-end-trigger-shadow: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-material-frosted-shadow));
|
|
@@ -27157,7 +27179,7 @@
|
|
|
27157
27179
|
换档不必给每个部件各写一条选择器。面板与共享外壳都是 root 的后代,一并继承。
|
|
27158
27180
|
trigger 的字号经家族桥接槽接回 root 这一档,不另立私有槽 */
|
|
27159
27181
|
/* 入口里的方向标记按档取尺,缺省 md,随 data-size 换档;面板里链接内的字形由家族随
|
|
27160
|
-
data-xh-collection-size
|
|
27182
|
+
data-xh-collection-size 下发 */
|
|
27161
27183
|
--xh-icon-size: var(--xh-navigation-menu-icon-size, var(--xh-glyph-size-md));
|
|
27162
27184
|
|
|
27163
27185
|
--xh-_navigation-menu-font-size: var(--xh-control-font-md);
|
|
@@ -27168,7 +27190,7 @@
|
|
|
27168
27190
|
--xh-_navigation-menu-link-px: var(--xh-control-px-md);
|
|
27169
27191
|
--xh-_navigation-menu-link-font-size: var(--xh-control-font-md);
|
|
27170
27192
|
|
|
27171
|
-
/*
|
|
27193
|
+
/* 悬停、键盘锚点与展开着的入口同走中性灰轻档、不接语气槽:打开中不是选中,不用品牌色 */
|
|
27172
27194
|
--xh-_navigation-menu-highlight-bg: var(--xh-bg-subtle);
|
|
27173
27195
|
|
|
27174
27196
|
/* 语气只落在指示条上;没写 data-tone 时 --xh-_tone 没被声明,退回品牌色。
|
|
@@ -27245,7 +27267,7 @@
|
|
|
27245
27267
|
/* 入口归 Collection Item 展开路径 / 打开中(nav 语境):几何、字号、面与字重全经家族桥接槽。静息 muted /
|
|
27246
27268
|
regular,悬停走白底承载 hover 100 + default 字;展开着的那一张由连接层投影 data-in-path,家族给与悬停同档的
|
|
27247
27269
|
中性面——打开中不是选中,不用品牌色、不加粗(横排的栏加粗会推挤相邻触发器),哪一张开着由指示条与转向的
|
|
27248
|
-
箭头说明;按下 pressed 200
|
|
27270
|
+
箭头说明;按下 pressed 200 只换面不缩放;禁用走 aria-disabled,家族给禁用字色与 not-allowed。
|
|
27249
27271
|
高度由 block-size 定,块向内边距归零。本条 (0,2,0) 压过家族基础块 (0,1,0),不能再写 background / color /
|
|
27250
27272
|
font-weight / cursor;也不写 font: inherit(reset.css 已抹平按钮 UA 字体,再写会把家族给的字号字重一并盖掉) */
|
|
27251
27273
|
[data-scope='navigation-menu'][data-part='trigger'] {
|
|
@@ -27306,9 +27328,7 @@
|
|
|
27306
27328
|
inset-inline-start: calc(100% + var(--xh-navigation-menu-content-offset, var(--xh-space-1)));
|
|
27307
27329
|
}
|
|
27308
27330
|
|
|
27309
|
-
/* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
|
|
27310
27331
|
[data-scope='navigation-menu'][data-part='content'][data-state='open'] {
|
|
27311
|
-
will-change: opacity, scale;
|
|
27312
27332
|
animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
27313
27333
|
}
|
|
27314
27334
|
|
|
@@ -27329,7 +27349,7 @@
|
|
|
27329
27349
|
|
|
27330
27350
|
/* 面板里的链接归 Collection Item 导航当前(nav 语境):悬停 / 键盘高亮(白底承载 100)与按下(200)面由家族
|
|
27331
27351
|
按 :hover / :focus-visible / :active 给出,指向当前页面的那一条(data-current)取 strong 档品牌字色 +
|
|
27332
|
-
medium
|
|
27352
|
+
medium 字重,字色不随语气、不加下划线(下划线是"可点"的信号,它已经在这儿了);这里只把公开槽
|
|
27333
27353
|
映射到桥接槽。面板是实色 floating 面,常态字色取 --xh-fg-default 而非 nav 缺省的 muted。
|
|
27334
27354
|
布局保持 flex:链接是一行文字,不用家族网格。position: relative 是当前链接静态线的定位参照 */
|
|
27335
27355
|
[data-scope='navigation-menu'][data-part='link'] {
|
|
@@ -27391,7 +27411,7 @@
|
|
|
27391
27411
|
color: var(--xh-fg-disabled);
|
|
27392
27412
|
}
|
|
27393
27413
|
|
|
27394
|
-
/*
|
|
27414
|
+
/* 指向当前页面的链接自画一条静态指示线(导航当前页):与 Tabs line / Anchor 同一取法,作者不必为了
|
|
27395
27415
|
这条线多放一个部件。下面的 indicator 部件表达的是「哪张面板开着」而不是当前页,所以这条线不随部件收起,
|
|
27396
27416
|
两者各说各的:部件亮着时开着的入口下有一条、当前页链接上另有一条。
|
|
27397
27417
|
线画在当前链接的 ::after 上,以链接盒为定位参照(上面已给 position: relative),
|
|
@@ -27631,12 +27651,12 @@
|
|
|
27631
27651
|
* 竖排 flex 里这两件事都做不到(叉会变成第三行)。
|
|
27632
27652
|
* 底与描边一律中性,语气只由左列那枚字形承载:整片兑色是轻提示那条的做法,
|
|
27633
27653
|
* 一张有标题有正文的卡片全片染色会把两层文字都压在同一片语气色上。
|
|
27634
|
-
* 面走 sheet
|
|
27654
|
+
* 面走 sheet 三件套(--xh-material-elevated-bg / -border / -shadow,与 toast 同一套)。
|
|
27635
27655
|
*
|
|
27636
27656
|
* 卡片的槽带 item 段(--xh-notification-item-*),与摞的 --xh-notification-inset 分开。
|
|
27637
27657
|
*/
|
|
27638
27658
|
[data-scope='notification'][data-part='item'] {
|
|
27639
|
-
/* 作者塞进卡片里的图标与皮肤画的兜底字形同一把尺:Feedback 指示符统一 md
|
|
27659
|
+
/* 作者塞进卡片里的图标与皮肤画的兜底字形同一把尺:Feedback 指示符统一 md 档;
|
|
27640
27660
|
左列那枚类型字形另有自己的尺寸槽,叉与操作钮的字形各按按钮档取值 */
|
|
27641
27661
|
--xh-icon-size: var(--xh-notification-icon-size, var(--xh-glyph-size-md));
|
|
27642
27662
|
|
|
@@ -27840,7 +27860,7 @@
|
|
|
27840
27860
|
}
|
|
27841
27861
|
|
|
27842
27862
|
/* 操作钮是带文案的离散动作钮:盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
|
|
27843
|
-
的 text outline 档给(连接层投 sm;非 Button
|
|
27863
|
+
的 text outline 档给(连接层投 sm;非 Button 的触发器缺省中性描边、透明底),组件只映射既有使用者槽。
|
|
27844
27864
|
语气只落到左列字形:这颗钮坐在带 data-tone 的卡片里,底 / 边 / 字钉在中性语义面上,不随语气;
|
|
27845
27865
|
卡片是 sheet 白面承载:hover --xh-bg-subtle(100)→ pressed --xh-bg-subtle-hover(200) */
|
|
27846
27866
|
[data-scope='notification'][data-part='item-action-trigger'] {
|
|
@@ -28169,7 +28189,7 @@
|
|
|
28169
28189
|
/* 私有槽同时声明在根与 positioner 上:摊开的页码面板被搬到 portal 落点,
|
|
28170
28190
|
不是根的后代,继承不过去。面板里的页码格子与主区那排消费的是同一批槽 */
|
|
28171
28191
|
[data-scope='pagination']:is([data-part='root'], [data-part='positioner']) {
|
|
28172
|
-
/*
|
|
28192
|
+
/* 作者塞进面板或分页行里的图标按档取字形尺;四类格子上另按家族档位取同一把尺 */
|
|
28173
28193
|
--xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-md));
|
|
28174
28194
|
|
|
28175
28195
|
/* 尺寸档只换这三个私有槽,上一页/下一页、页码与省略号都从这两处继承它们,
|
|
@@ -28220,7 +28240,7 @@
|
|
|
28220
28240
|
display: none;
|
|
28221
28241
|
}
|
|
28222
28242
|
|
|
28223
|
-
/* 四类格子接 Action Control 的 text 档,缺省中性的 ghost
|
|
28243
|
+
/* 四类格子接 Action Control 的 text 档,缺省中性的 ghost 形态(只有 Button 品牌实心):盒型、三档几何、
|
|
28224
28244
|
透明描边(省略号也占一条,两者内容盒等高,一行里对得齐)、悬停 100 → 按下 200(画布承载)、禁用面、按压缩放与
|
|
28225
28245
|
过渡都由家族给;这里只把使用者槽映射到桥接槽并保留分页自己的排版。
|
|
28226
28246
|
等宽的关键:1 与 10 的内容宽度不同,靠最小宽度把它们撑到同一格,行宽才不会随当前页左右抖动 */
|
|
@@ -28239,7 +28259,7 @@
|
|
|
28239
28259
|
--xh-action-fg-rest: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-rest));
|
|
28240
28260
|
--xh-action-fg-hover: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-hover));
|
|
28241
28261
|
--xh-action-fg-pressed: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-pressed));
|
|
28242
|
-
/*
|
|
28262
|
+
/* 作者塞进上一页/下一页的图标按档取字形尺,与皮肤画的兜底字形同一把尺 */
|
|
28243
28263
|
--xh-icon-size: var(--xh-pagination-icon-size, var(--xh-_action-profile-glyph-size));
|
|
28244
28264
|
|
|
28245
28265
|
flex: none;
|
|
@@ -28258,7 +28278,7 @@
|
|
|
28258
28278
|
/* 首末页的上一页 / 下一页是原生 disabled(不可聚焦、进不了 Tab 序列),连接层同时给 data-disabled,
|
|
28259
28279
|
家族按 data-disabled 画禁用面(透明底 + --xh-fg-disabled);分页条目从不禁用 */
|
|
28260
28280
|
|
|
28261
|
-
/*
|
|
28281
|
+
/* 当前页(格状当前):data-current 与 aria-current='page' 由连接层成对给出,样式挂在 data 钩子上,
|
|
28262
28282
|
无障碍语义留给 aria。实心品牌面 + 配对前景、不加粗——字重一变字形就变宽,页码格子会跟着长一点,
|
|
28263
28283
|
正是这里要避免的抖动;悬停 / 按下沿 brand → brand-hover → brand-active 走,三态都经桥接槽交给家族画,
|
|
28264
28284
|
solid 面允许一条顶高光,环色改取面自己的前景 */
|
|
@@ -28390,7 +28410,7 @@
|
|
|
28390
28410
|
var(--xh-_pagination-available-h)
|
|
28391
28411
|
);
|
|
28392
28412
|
overflow-y: auto;
|
|
28393
|
-
/*
|
|
28413
|
+
/* 浮层滚动面:滚到底不把滚动量交给页面(只给 Overlay 家族滚动面) */
|
|
28394
28414
|
overscroll-behavior: contain;
|
|
28395
28415
|
padding: var(--xh-pagination-content-p, var(--xh-space-1));
|
|
28396
28416
|
border: var(--xh-stroke-thin) solid var(--xh-pagination-content-border, var(--xh-border-default));
|
|
@@ -28401,9 +28421,7 @@
|
|
|
28401
28421
|
pointer-events: auto;
|
|
28402
28422
|
}
|
|
28403
28423
|
|
|
28404
|
-
/* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
|
|
28405
28424
|
[data-scope='pagination'][data-part='content'][data-state='open'] {
|
|
28406
|
-
will-change: opacity, scale;
|
|
28407
28425
|
animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
28408
28426
|
}
|
|
28409
28427
|
|
|
@@ -28749,7 +28767,7 @@
|
|
|
28749
28767
|
}
|
|
28750
28768
|
|
|
28751
28769
|
/*
|
|
28752
|
-
*
|
|
28770
|
+
* 触发器是页面上的独立文字按钮:盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
|
|
28753
28771
|
* 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则,
|
|
28754
28772
|
* 只把作者塞进按钮的图标接到随档字形尺(md = 20px)。
|
|
28755
28773
|
*/
|
|
@@ -28763,7 +28781,7 @@
|
|
|
28763
28781
|
}
|
|
28764
28782
|
|
|
28765
28783
|
[data-scope='popover'][data-part='content'] {
|
|
28766
|
-
/*
|
|
28784
|
+
/* 作者塞进面板里的图标按控件档取;关闭钮另由家族配方按 sm 档下发字形尺 */
|
|
28767
28785
|
--xh-icon-size: var(--xh-popover-icon-size, var(--xh-glyph-size-md));
|
|
28768
28786
|
|
|
28769
28787
|
/* 尺寸档只换这两个私有槽。popover 没有 root 部件,size 落在浮层树最外层的 content 上。
|
|
@@ -28781,7 +28799,7 @@
|
|
|
28781
28799
|
/* 内容由作者给,长度不可预知:不限高就整块伸出视口且滚不到 */
|
|
28782
28800
|
max-block-size: min(var(--xh-popover-max-h, var(--xh-overlay-max-h)), var(--xh-_popover-available-h));
|
|
28783
28801
|
overflow-y: auto;
|
|
28784
|
-
/* 浮在页面之上的 Overlay
|
|
28802
|
+
/* 浮在页面之上的 Overlay 滚动面:滚到头不把页面一起带走 */
|
|
28785
28803
|
overscroll-behavior: contain;
|
|
28786
28804
|
padding-block: var(--xh-popover-py, var(--xh-_popover-pad));
|
|
28787
28805
|
padding-inline: var(--xh-popover-px, var(--xh-_popover-pad));
|
|
@@ -28816,8 +28834,6 @@
|
|
|
28816
28834
|
|
|
28817
28835
|
[data-scope='popover'][data-part='content'][data-state='open'] {
|
|
28818
28836
|
animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
28819
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
28820
|
-
will-change: opacity, scale, translate;
|
|
28821
28837
|
}
|
|
28822
28838
|
|
|
28823
28839
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -28845,7 +28861,7 @@
|
|
|
28845
28861
|
color: var(--xh-popover-title-fg, var(--xh-material-frosted-fg));
|
|
28846
28862
|
}
|
|
28847
28863
|
|
|
28848
|
-
/*
|
|
28864
|
+
/* 说明文字走说明档:13px + fg-muted */
|
|
28849
28865
|
[data-scope='popover'][data-part='description'] {
|
|
28850
28866
|
margin: 0;
|
|
28851
28867
|
font-size: var(--xh-popover-description-font-size, var(--xh-text-secondary-size));
|
|
@@ -28860,7 +28876,7 @@
|
|
|
28860
28876
|
}
|
|
28861
28877
|
|
|
28862
28878
|
/*
|
|
28863
|
-
*
|
|
28879
|
+
* 关闭钮是浮层角落的单图标钮:正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
|
|
28864
28880
|
* 由家族配方给出——磨砂白面上走画布承载阶梯悬停 --xh-bg-subtle(100)→ 按下 --xh-bg-subtle-hover(200),
|
|
28865
28881
|
* 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与摆放,
|
|
28866
28882
|
* 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面,缺省仍是透明底与悬停字色:
|
|
@@ -29136,10 +29152,10 @@
|
|
|
29136
29152
|
--xh-question-flow-skin: 1;
|
|
29137
29153
|
}
|
|
29138
29154
|
|
|
29139
|
-
/* 一张静态内容面:--xh-border-default 描边 + surface 底 +
|
|
29155
|
+
/* 一张静态内容面:--xh-border-default 描边 + surface 底 + 无影(边界只由描边承担)。
|
|
29140
29156
|
三个视觉轴都落在 root 上:形态管底与描边怎么画,语气管用哪族颜色,尺寸管内衬、按钮高度与字号 */
|
|
29141
29157
|
[data-scope='question-flow'][data-part='root'] {
|
|
29142
|
-
/*
|
|
29158
|
+
/* 作者塞进翻页钮的图标按档取尺,与皮肤画的兜底字形同一把尺 */
|
|
29143
29159
|
--xh-icon-size: var(--xh-question-flow-icon-size, var(--xh-glyph-size-md));
|
|
29144
29160
|
/* 尺寸缺省档:不写 data-size 时按中档走 */
|
|
29145
29161
|
--xh-_question-flow-p: var(--xh-space-4);
|
|
@@ -29169,7 +29185,7 @@
|
|
|
29169
29185
|
/* 描边式是缺省档,写在上面那条基础规则里 */
|
|
29170
29186
|
/* 填充式:底色顶替描边表达边界。描边只退成透明而不去掉,
|
|
29171
29187
|
1px 的位置留着,与 outline 档并排时基线对得上;
|
|
29172
|
-
淡底承载面向选项行与几颗中性钮下发 hover 200 → pressed 300
|
|
29188
|
+
淡底承载面向选项行与几颗中性钮下发 hover 200 → pressed 300 */
|
|
29173
29189
|
[data-scope='question-flow'][data-part='root'][data-variant='subtle'] {
|
|
29174
29190
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
29175
29191
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
@@ -29265,7 +29281,7 @@
|
|
|
29265
29281
|
pointer-events: auto;
|
|
29266
29282
|
}
|
|
29267
29283
|
|
|
29268
|
-
/* 题干就是这一题的标题,也是选项组的可访问名:走 Surface 标题档 14/600
|
|
29284
|
+
/* 题干就是这一题的标题,也是选项组的可访问名:走 Surface 标题档 14/600 */
|
|
29269
29285
|
[data-scope='question-flow'][data-part='prompt'] {
|
|
29270
29286
|
display: block;
|
|
29271
29287
|
margin: 0;
|
|
@@ -29290,9 +29306,9 @@
|
|
|
29290
29306
|
}
|
|
29291
29307
|
|
|
29292
29308
|
/* 一个选项:整行可点、可聚焦,记号在左。盒型、悬停 / 按下 / 禁用面由 Action Control 的 row 档给
|
|
29293
|
-
(ghost 形态:白底承载 hover 100 → pressed 200
|
|
29309
|
+
(ghost 形态:白底承载 hover 100 → pressed 200,按下只换面不缩放;禁用守卫认 data-disabled),
|
|
29294
29310
|
这里只把使用者槽映射到桥接槽,内衬与间距沿用本组件的档位;字色三态同一支,选中档在下面换一档。
|
|
29295
|
-
行高不吃家族的单行档:row
|
|
29311
|
+
行高不吃家族的单行档:row 档允许换行、高度随内容,一条会折行的选项文案走正文行高 */
|
|
29296
29312
|
[data-scope='question-flow'][data-part='item'] {
|
|
29297
29313
|
--xh-action-gap: var(--xh-question-flow-item-gap, var(--xh-space-1_5));
|
|
29298
29314
|
--xh-action-padding-inline: var(--xh-question-flow-item-px, var(--xh-space-2));
|
|
@@ -29373,7 +29389,7 @@
|
|
|
29373
29389
|
display: none;
|
|
29374
29390
|
}
|
|
29375
29391
|
|
|
29376
|
-
/* 单选那一档把方格收成圆:正方盒取 circle
|
|
29392
|
+
/* 单选那一档把方格收成圆:正方盒取 circle */
|
|
29377
29393
|
[data-scope='question-flow'][data-part='item-indicator'][data-select-mode='single'] {
|
|
29378
29394
|
border-radius: var(--xh-question-flow-indicator-radius-single, var(--xh-shape-circle));
|
|
29379
29395
|
}
|
|
@@ -29651,7 +29667,7 @@
|
|
|
29651
29667
|
--xh-_radio-group-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
29652
29668
|
|
|
29653
29669
|
/* 标题与条目都是根的直接子节点,一支 gap 同时管「标题到集合」与「条目之间」:
|
|
29654
|
-
集合标题与集合隔 --xh-space-2
|
|
29670
|
+
集合标题与集合隔 --xh-space-2,同组条目之间也是同一档紧密关系 */
|
|
29655
29671
|
display: flex;
|
|
29656
29672
|
gap: var(--xh-radio-group-gap, var(--xh-space-2));
|
|
29657
29673
|
}
|
|
@@ -29681,7 +29697,7 @@
|
|
|
29681
29697
|
--xh-_radio-group-indicator: var(--xh-control-indicator-lg);
|
|
29682
29698
|
}
|
|
29683
29699
|
|
|
29684
|
-
/*
|
|
29700
|
+
/* 集合标题:14 / 500 / fg-muted,字号不随 size 档——随档的是条目文字 */
|
|
29685
29701
|
[data-scope='radio-group'][data-part='label'] {
|
|
29686
29702
|
color: var(--xh-radio-group-label-fg, var(--xh-fg-muted));
|
|
29687
29703
|
font-size: var(--xh-radio-group-label-font-size, var(--xh-text-label-size));
|
|
@@ -29689,12 +29705,12 @@
|
|
|
29689
29705
|
line-height: var(--xh-leading-none);
|
|
29690
29706
|
}
|
|
29691
29707
|
|
|
29692
|
-
/* label 自己不带状态属性,整组禁用只写在 root 上,禁用标签色统一 --xh-fg-subtle
|
|
29708
|
+
/* label 自己不带状态属性,整组禁用只写在 root 上,禁用标签色统一 --xh-fg-subtle */
|
|
29693
29709
|
[data-scope='radio-group'][data-part='root'][data-disabled] [data-scope='radio-group'][data-part='label'] {
|
|
29694
29710
|
color: var(--xh-radio-group-label-fg-disabled, var(--xh-fg-subtle));
|
|
29695
29711
|
}
|
|
29696
29712
|
|
|
29697
|
-
/* 条目是「圆圈 +
|
|
29713
|
+
/* 条目是「圆圈 + 文案」的整行命中区:接 Action Control row 档、ghost 形态,悬停 / 按下 / 禁用面、手型、
|
|
29698
29714
|
过渡与焦点环由家族给,按下只换面不缩放(row 档专属按压块 scale: none);这里只把使用者槽映射到桥接槽。
|
|
29699
29715
|
行自己坐画布走 100 → 200(--xh-action-bg-* 钉住自己的面),行面上的圆圈按淡底容器阶梯再上一档
|
|
29700
29716
|
(--xh-action-host-bg-* 向内声明自己是圆圈的承载面,host 槽只对后代生效——自己的面已由 --xh-action-bg-* 钉住;
|
|
@@ -29738,8 +29754,8 @@
|
|
|
29738
29754
|
--xh-action-cursor-focus-visible: default;
|
|
29739
29755
|
}
|
|
29740
29756
|
|
|
29741
|
-
/*
|
|
29742
|
-
|
|
29757
|
+
/* 圆圈是字段家族的控制盒(字段静息形态):透明底 + --xh-border-control 描边 + 无影。
|
|
29758
|
+
不缩放(行级只换面),过渡只有底与描边;按下走 press 时间线、释放同走 micro */
|
|
29743
29759
|
[data-scope='radio-group'][data-part='indicator'] {
|
|
29744
29760
|
display: inline-flex;
|
|
29745
29761
|
flex: none;
|
|
@@ -29755,7 +29771,7 @@
|
|
|
29755
29771
|
background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
|
|
29756
29772
|
}
|
|
29757
29773
|
|
|
29758
|
-
/* 悬停整行时未选中的圆圈描边升一档(字段静息 → hover
|
|
29774
|
+
/* 悬停整行时未选中的圆圈描边升一档(字段静息 → hover 的同一条阶梯);
|
|
29759
29775
|
选中圈与校验失败的圈保住各自的描边——圈内的点 / 警示色本身已经在表达状态 */
|
|
29760
29776
|
[data-scope='radio-group'][data-part='item']:not([data-disabled]):not([data-readonly]):hover
|
|
29761
29777
|
> [data-scope='radio-group'][data-part='indicator']:not([data-state='checked']):not([data-invalid]) {
|
|
@@ -29763,7 +29779,7 @@
|
|
|
29763
29779
|
}
|
|
29764
29780
|
|
|
29765
29781
|
/* 按下去要有回应。圆圈不是激活宿主:宿主是投影了 row 档的整行条目,圆圈在宿主的
|
|
29766
|
-
:hover / :is(:active, [data-pressed]) 下读宿主 host
|
|
29782
|
+
:hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面、不缩放——行按下是 200,
|
|
29767
29783
|
坐在上面的圆圈到 300(行以 --xh-action-host-bg-pressed 声明自己是圆圈的承载面,桥接槽只写不读,
|
|
29768
29784
|
圆圈读的是喂给它的那支私有槽),描边不动、几何不动;
|
|
29769
29785
|
与家族按压块同一时间线(按下 --xh-motion-duration-press,释放同走 micro) */
|
|
@@ -29808,7 +29824,7 @@
|
|
|
29808
29824
|
background: var(--xh-radio-group-indicator-dot-pressed, var(--xh-_tone-active, var(--xh-bg-brand-active)));
|
|
29809
29825
|
}
|
|
29810
29826
|
|
|
29811
|
-
/*
|
|
29827
|
+
/* 禁用:--xh-border-default 描边 + --xh-bg-subtle 底 + --xh-fg-disabled 圆点,不靠 opacity;
|
|
29812
29828
|
与 checkbox-group 方框、独立 checkbox 逐档一致。条目自己带 data-disabled(组禁用也逐条下放),圆圈读它 */
|
|
29813
29829
|
[data-scope='radio-group'][data-part='item'][data-disabled] > [data-scope='radio-group'][data-part='indicator'] {
|
|
29814
29830
|
border-color: var(--xh-radio-group-indicator-border-disabled, var(--xh-border-default));
|
|
@@ -29874,7 +29890,7 @@
|
|
|
29874
29890
|
根上不留基准它就会贴到更外层的定位祖先上,原生校验提示跟着飘到页面别处。 */
|
|
29875
29891
|
[data-scope='rating'][data-part='root'] {
|
|
29876
29892
|
/* 尺寸档只换这三个私有槽,星星与分值都从 root 继承它们,换档不必给每个部件各写一条选择器。
|
|
29877
|
-
星是控件内的字形,按档取 --xh-glyph-size-sm / md / lg
|
|
29893
|
+
星是控件内的字形,按档取 --xh-glyph-size-sm / md / lg;标签字号不随档 */
|
|
29878
29894
|
--xh-_rating-item-gap: var(--xh-control-gap-md);
|
|
29879
29895
|
--xh-_rating-item-size: var(--xh-glyph-size-md);
|
|
29880
29896
|
--xh-_rating-item-box-size: var(--xh-control-action-size);
|
|
@@ -29886,7 +29902,7 @@
|
|
|
29886
29902
|
position: relative;
|
|
29887
29903
|
display: inline-flex;
|
|
29888
29904
|
flex-direction: column;
|
|
29889
|
-
/*
|
|
29905
|
+
/* 字段标签贴控件(复合单字段) */
|
|
29890
29906
|
gap: var(--xh-rating-gap, var(--xh-space-1));
|
|
29891
29907
|
}
|
|
29892
29908
|
|
|
@@ -29903,7 +29919,7 @@
|
|
|
29903
29919
|
--xh-_rating-font-size: var(--xh-control-font-lg);
|
|
29904
29920
|
}
|
|
29905
29921
|
|
|
29906
|
-
/* 字段标签:14 / 500 / fg-default
|
|
29922
|
+
/* 字段标签:14 / 500 / fg-default,禁用换到 --xh-fg-subtle;文字部件不叠 opacity */
|
|
29907
29923
|
[data-scope='rating'][data-part='label'] {
|
|
29908
29924
|
color: var(--xh-rating-label-fg, var(--xh-fg-default));
|
|
29909
29925
|
font-size: var(--xh-rating-label-font-size, var(--xh-text-label-size));
|
|
@@ -29963,7 +29979,7 @@
|
|
|
29963
29979
|
|
|
29964
29980
|
/* 条目固定成一枚方形图标盒:连接层用 clientWidth 判定指针落在左半还是右半,
|
|
29965
29981
|
固定盒能让半档分界与图形中心严格重合。
|
|
29966
|
-
星接 Action Control icon
|
|
29982
|
+
星接 Action Control icon 档(定尺的星):盒型、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族配方给,
|
|
29967
29983
|
这里只把使用者槽映射到桥接槽。静息透明(ghost 形态);悬停不换底——悬停预览由点亮的星形(data-highlighted)
|
|
29968
29984
|
表达,再给盒换面是重复的通道;按下换到 200 档中性面(白底承载)。前景五态映射同一个值:点亮时五态一起换到
|
|
29969
29985
|
点亮色,家族的悬停 / 按下块才不会把点亮色换回静息色;禁用不换前景,星带整体的压暗落在 control 的 opacity 上 */
|
|
@@ -30429,7 +30445,7 @@
|
|
|
30429
30445
|
[data-scope='select'][data-part='root'] {
|
|
30430
30446
|
/* 作者塞进指示符槽的图标跟着控件的尺寸档走;它自己写了 size 时仍以作者的为准。
|
|
30431
30447
|
浮层条目里自绘的状态字形(勾选标记所在的标记盒与盒里的勾)不读这支:它们是指示符,走
|
|
30432
|
-
--xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size
|
|
30448
|
+
--xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size 改接到盒的尺 */
|
|
30433
30449
|
--xh-icon-size: var(--xh-select-icon-size, var(--xh-glyph-size-md));
|
|
30434
30450
|
|
|
30435
30451
|
display: inline-flex;
|
|
@@ -30743,8 +30759,6 @@
|
|
|
30743
30759
|
|
|
30744
30760
|
[data-scope='select'][data-part='content'][data-state='open'] {
|
|
30745
30761
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
30746
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
30747
|
-
will-change: opacity, translate;
|
|
30748
30762
|
}
|
|
30749
30763
|
|
|
30750
30764
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -30879,7 +30893,7 @@
|
|
|
30879
30893
|
}
|
|
30880
30894
|
|
|
30881
30895
|
/* 勾选标记只在选中项上出现;未选中时占位不塌,切换选中不引起行宽抖动。
|
|
30882
|
-
|
|
30896
|
+
盒与盒里的勾是指示符:盒按指示符档取尺,并在自己身上把 --xh-icon-size 改接到盒的尺,皮肤画的
|
|
30883
30897
|
兜底勾与作者塞进盒里的 XhIcon 读同一把尺、与盒同边长(勾选标记不是勾选格,不取 × 0.75,与 Listbox / Menu 族
|
|
30884
30898
|
同口径);不读家族按档下发到行的 --xh-icon-size——那支只管作者放进条目里的图标,按图标档取的 20px 比
|
|
30885
30899
|
16 / 14 的指示符档大一圈 */
|
|
@@ -31073,7 +31087,7 @@
|
|
|
31073
31087
|
不是根的后代,继承不过去。面板里的行与栏内那些消费的是同一批槽 */
|
|
31074
31088
|
[data-scope='side-nav']:is([data-part='root'], [data-part='positioner']) {
|
|
31075
31089
|
/* 行外的字形按档取尺,缺省 md,随 data-size 换档并同样声明在定位层上(弹出面板里的行也拿得到);
|
|
31076
|
-
行内的由家族随 data-xh-collection-size
|
|
31090
|
+
行内的由家族随 data-xh-collection-size 下发。这支只管作者放进行里的图标:
|
|
31077
31091
|
侧栏自绘的状态字形(分支行尾的展开方向 chevron)是指示符,branch-indicator 在自己身上
|
|
31078
31092
|
把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺 */
|
|
31079
31093
|
--xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-md));
|
|
@@ -31172,7 +31186,7 @@
|
|
|
31172
31186
|
}
|
|
31173
31187
|
|
|
31174
31188
|
/* —— 行:分支按钮与链接同一副长相 ——
|
|
31175
|
-
两种行都走 Collection Item 的 page
|
|
31189
|
+
两种行都走 Collection Item 的 page 语境(页内持久集合):悬停 / 高亮 / 按下面(白底承载 hover 100 →
|
|
31176
31190
|
pressed 200,只换面不缩放)、当前页(品牌淡底 + 淡底前景 + 起始侧 2px 指示条,current+hover 20% /
|
|
31177
31191
|
+pressed 28%)、展开路径(与 hover 同档的中性面,不用品牌色、不加粗)与禁用面都由家族按 data-current /
|
|
31178
31192
|
data-in-path / aria-disabled 给出。这里只把公开槽映射到桥接槽。
|
|
@@ -31307,15 +31321,13 @@
|
|
|
31307
31321
|
box-shadow: var(--xh-side-nav-popout-shadow, var(--xh-elevation-floating));
|
|
31308
31322
|
|
|
31309
31323
|
/* 子导航条目数没有上限,矮视口下不限高就整块伸出视口且滚不到。
|
|
31310
|
-
|
|
31324
|
+
浮层滚动面:到底后不把滚动链穿透给页面;细条由 reset 层给 */
|
|
31311
31325
|
max-block-size: min(var(--xh-side-nav-popout-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_side-nav-available-h));
|
|
31312
31326
|
overflow-y: auto;
|
|
31313
31327
|
overscroll-behavior: contain;
|
|
31314
31328
|
}
|
|
31315
31329
|
|
|
31316
|
-
/* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
|
|
31317
31330
|
[data-scope='side-nav'][data-part='branch-content'][data-popout][data-state='open'] {
|
|
31318
|
-
will-change: opacity, scale;
|
|
31319
31331
|
animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
31320
31332
|
}
|
|
31321
31333
|
|
|
@@ -31326,7 +31338,7 @@
|
|
|
31326
31338
|
}
|
|
31327
31339
|
|
|
31328
31340
|
/* 箭头是行尾的后缀:auto 外边距把它顶到行尾,家族按 suffix 槽下发的外边距已在行上归零。
|
|
31329
|
-
盒里的 chevron
|
|
31341
|
+
盒里的 chevron 是指示符:盒按指示符档定尺(comfortable 16 / compact 14,与 Tree / TreeSelect
|
|
31330
31342
|
的 branch-indicator 同款定尺盒),--xh-icon-size 在自己身上改接到盒的尺,兜底字形与作者塞进盒里的
|
|
31331
31343
|
XhIcon 读同一把尺、与盒同边长;不读家族按档下发到行的 --xh-icon-size——那支只管作者放进行里的
|
|
31332
31344
|
图标,按图标档取的 20px 比指示符档大一圈。盒自己定尺而不随字形撑开:转 90° 时才不抖 */
|
|
@@ -31403,7 +31415,7 @@
|
|
|
31403
31415
|
|
|
31404
31416
|
display: flex;
|
|
31405
31417
|
flex-direction: column;
|
|
31406
|
-
/*
|
|
31418
|
+
/* 字段标签贴控件(复合单字段) */
|
|
31407
31419
|
gap: var(--xh-slider-gap, var(--xh-space-1));
|
|
31408
31420
|
}
|
|
31409
31421
|
|
|
@@ -31413,10 +31425,10 @@
|
|
|
31413
31425
|
align-items: center;
|
|
31414
31426
|
}
|
|
31415
31427
|
|
|
31416
|
-
/*
|
|
31428
|
+
/* 禁用不整体压暗:前景与表面各自降级——连接层把 data-disabled 发到每个角色节点上,
|
|
31417
31429
|
轨道、区间、拇指、刻度与标签就近消费,写在各自的规则里 */
|
|
31418
31430
|
|
|
31419
|
-
/* 字段标签:14 / 500 / fg-default
|
|
31431
|
+
/* 字段标签:14 / 500 / fg-default,禁用换到 --xh-fg-subtle */
|
|
31420
31432
|
[data-scope='slider'][data-part='label'] {
|
|
31421
31433
|
color: var(--xh-slider-label-fg, var(--xh-fg-default));
|
|
31422
31434
|
font-size: var(--xh-slider-label-font-size, var(--xh-text-label-size));
|
|
@@ -31522,7 +31534,7 @@
|
|
|
31522
31534
|
/* 圆点浮在轨道之上:轨道是流内的,拇指是绝对定位的,天然后来居上,不必再堆 z-index。
|
|
31523
31535
|
box-sizing 必须显式写:描边要吃进直径里,否则实际盒子比 --xh-_thumb-size 宽两条边,
|
|
31524
31536
|
下面按半个直径回拉的负外边距就对不上圆心。
|
|
31525
|
-
拇指是可拖起的 raised
|
|
31537
|
+
拇指是可拖起的 raised 面:描边取 --xh-border-default,raised 影只是加成、不作边界 */
|
|
31526
31538
|
[data-scope='slider'][data-part='thumb'] {
|
|
31527
31539
|
position: absolute;
|
|
31528
31540
|
box-sizing: border-box;
|
|
@@ -31655,7 +31667,7 @@
|
|
|
31655
31667
|
pointer-events: none;
|
|
31656
31668
|
}
|
|
31657
31669
|
|
|
31658
|
-
/* 刻度点是正方盒,取 circle
|
|
31670
|
+
/* 刻度点是正方盒,取 circle(正方盒不得用 pill 冒充圆) */
|
|
31659
31671
|
[data-scope='slider'][data-part='tick'] {
|
|
31660
31672
|
position: absolute;
|
|
31661
31673
|
inset-block-start: 50%;
|
|
@@ -31791,7 +31803,7 @@
|
|
|
31791
31803
|
opacity: var(--xh-sortable-item-opacity-dragging, 0.9);
|
|
31792
31804
|
}
|
|
31793
31805
|
|
|
31794
|
-
/*
|
|
31806
|
+
/* 把手是只有字形的离散动作钮(定尺把手):盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、
|
|
31795
31807
|
禁用面全由 Action Control 的 icon ghost 档给(连接层投 xs:24px 正方盒,与此前 --xh-control-action-size
|
|
31796
31808
|
同尺寸),组件只映射既有使用者槽。静息透明,白底承载 hover 100 → pressed 200(此前悬停落 200 是错档)。
|
|
31797
31809
|
手型不是 pointer:抓起来拖的东西给 grab,按住拖动中给 grabbing;家族的手型槽逐态映射 */
|
|
@@ -32028,7 +32040,7 @@
|
|
|
32028
32040
|
cursor: row-resize;
|
|
32029
32041
|
}
|
|
32030
32042
|
|
|
32031
|
-
/* 分隔条是一根线不是一块面:悬停不走面阶梯(300 只留给 pressed
|
|
32043
|
+
/* 分隔条是一根线不是一块面:悬停不走面阶梯(300 只留给 pressed),
|
|
32032
32044
|
按线取——与字段描边 rest → hover 同向加深一档 */
|
|
32033
32045
|
[data-scope='splitter'][data-part='resize-trigger']:hover {
|
|
32034
32046
|
background: var(--xh-splitter-trigger-bg-hover, var(--xh-border-control));
|
|
@@ -32077,7 +32089,7 @@
|
|
|
32077
32089
|
}
|
|
32078
32090
|
|
|
32079
32091
|
[data-scope='steps'][data-part='root'] {
|
|
32080
|
-
/* 作者放进标题 / 说明里的图标按档取尺,缺省 sm
|
|
32092
|
+
/* 作者放进标题 / 说明里的图标按档取尺,缺省 sm。走过的步里皮肤画的兜底对号不读这支:
|
|
32081
32093
|
它是指示符,与序号圆点同走 --xh-control-indicator-* 一族——圆点在自己身上把 --xh-icon-size
|
|
32082
32094
|
改接到 --xh-steps-indicator-mark-size,兜底对号与作者塞进圆点里的 XhIcon 读同一把尺 */
|
|
32083
32095
|
--xh-icon-size: var(--xh-steps-icon-size, var(--xh-glyph-size-sm));
|
|
@@ -32091,14 +32103,14 @@
|
|
|
32091
32103
|
/* 语气落在当前步的标记、走过那几步的对号与连接线上:强调色画描边与填充,
|
|
32092
32104
|
accent-text 是普通底上的强调文字(走过与当前步的标题),on-accent 是实心底上的前景。
|
|
32093
32105
|
没写 data-tone 时 --xh-_tone 一族没被声明,三个槽都退回原来的品牌配色。
|
|
32094
|
-
|
|
32106
|
+
走过的步不再用品牌淡底(brand-subtle 退出 completed 语义),淡底那两支私有槽随之撤掉 */
|
|
32095
32107
|
--xh-_steps-accent: var(--xh-_tone, var(--xh-bg-brand));
|
|
32096
32108
|
--xh-_steps-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
|
|
32097
32109
|
/* 走过的步里那枚对号:中性淡底上的品牌色标记,不用标题那档更深的字色 */
|
|
32098
32110
|
--xh-_steps-accent-mark: var(--xh-_tone-fg, var(--xh-fg-brand));
|
|
32099
32111
|
--xh-_steps-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
|
|
32100
32112
|
/* 触发器是序号圆点的承载面:圆点静息就坐在 --xh-bg-subtle(100)的淡底上,阶梯按淡底容器走
|
|
32101
|
-
(hover 200 → pressed 300
|
|
32113
|
+
(hover 200 → pressed 300)。两支私有槽是这一档的唯一来源——触发器拿它们给
|
|
32102
32114
|
--xh-action-host-bg-* 赋值(桥接槽只写不读),圆点悬停 / 按下读同一支私有槽,即与宿主的 host 槽同源 */
|
|
32103
32115
|
--xh-_steps-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
32104
32116
|
--xh-_steps-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
@@ -32197,7 +32209,7 @@
|
|
|
32197
32209
|
align-items: flex-start;
|
|
32198
32210
|
}
|
|
32199
32211
|
|
|
32200
|
-
/* 触发器是「序号 + 标题 +
|
|
32212
|
+
/* 触发器是「序号 + 标题 + 说明」的整块内容行:接 Action Control row 档、ghost 形态,悬停 / 按下 / 禁用面、
|
|
32201
32213
|
手型、过渡与焦点环由家族给,按下只换面不缩放(row 档专属按压块 scale: none);这里只把使用者槽映射到桥接槽。
|
|
32202
32214
|
触发器既是 Action Control 又是圆点的承载面:自己坐画布走 hover 100 → pressed 200,由 --xh-action-bg-* 钉住;
|
|
32203
32215
|
--xh-action-host-bg-* 只对圆点生效(圆点自己是 100 的淡底,坐在触发器面上再上一档到 200 / 300)。
|
|
@@ -32246,9 +32258,9 @@
|
|
|
32246
32258
|
color: var(--xh-fg-disabled);
|
|
32247
32259
|
}
|
|
32248
32260
|
|
|
32249
|
-
/*
|
|
32261
|
+
/* 序号圆点:未开始使用中性面,当前步骤实心强调,已完成步骤中性面上画品牌对号。 */
|
|
32250
32262
|
[data-scope='steps'][data-part='indicator'] {
|
|
32251
|
-
/*
|
|
32263
|
+
/* 圆点里的字形是指示符:对号按指示符档取尺、随密度换档(comfortable 16 / compact 14),
|
|
32252
32264
|
不读 root 上只管作者标题 / 说明图标的 --xh-steps-icon-size;作者塞进圆点的 XhIcon 与兜底对号同一把尺。
|
|
32253
32265
|
圆点自己走 space / control-h 的尺(最小 28px),不随密度,两档字形在三档圆点里都留得出边距 */
|
|
32254
32266
|
--xh-icon-size: var(--xh-steps-indicator-mark-size, var(--xh-control-indicator-size));
|
|
@@ -32280,8 +32292,8 @@
|
|
|
32280
32292
|
display: none;
|
|
32281
32293
|
}
|
|
32282
32294
|
|
|
32283
|
-
/*
|
|
32284
|
-
:hover / :is(:active, [data-pressed]) 下读宿主 host
|
|
32295
|
+
/* 圆点是格状当前的标记,但不是激活宿主:宿主是投影了 row 档的触发器;圆点在宿主的
|
|
32296
|
+
:hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面,同一时间线,不缩放——
|
|
32285
32297
|
圆点自己是 100 的淡底,坐在触发器的 hover 面(100)上,再上一档到 200 才与承载面分得开,按下到 300;
|
|
32286
32298
|
当前步的实心面按下换语气 active 档 */
|
|
32287
32299
|
[data-scope='steps'][data-part='trigger']:hover:not([data-disabled])
|
|
@@ -32316,7 +32328,7 @@
|
|
|
32316
32328
|
box-shadow: var(--xh-steps-indicator-shadow, var(--xh-_steps-highlight));
|
|
32317
32329
|
}
|
|
32318
32330
|
|
|
32319
|
-
/*
|
|
32331
|
+
/* 走过的步:中性淡底(透明边位)承一枚品牌色对号;标了语气的步对号跟语气的前景走 */
|
|
32320
32332
|
[data-scope='steps'][data-part='indicator'][data-state='completed'] {
|
|
32321
32333
|
border-color: var(--xh-steps-indicator-border-completed, transparent);
|
|
32322
32334
|
background: var(--xh-steps-indicator-bg-completed, var(--xh-bg-subtle));
|
|
@@ -32370,7 +32382,7 @@
|
|
|
32370
32382
|
color: var(--xh-steps-title-fg-toned, var(--xh-_steps-accent-text));
|
|
32371
32383
|
}
|
|
32372
32384
|
|
|
32373
|
-
/*
|
|
32385
|
+
/* 说明走说明角色:13 / fg-muted / leading-normal,不随 size 档 */
|
|
32374
32386
|
[data-scope='steps'][data-part='description'] {
|
|
32375
32387
|
grid-column: 2;
|
|
32376
32388
|
color: var(--xh-steps-description-fg, var(--xh-fg-muted));
|
|
@@ -32503,9 +32515,9 @@
|
|
|
32503
32515
|
--xh-_switch-track-bg-pressed: var(--xh-switch-bg-pressed, var(--xh-_switch-track-bg));
|
|
32504
32516
|
--xh-_switch-fg: var(--xh-switch-fg, var(--xh-fg-default));
|
|
32505
32517
|
|
|
32506
|
-
/* 轨道接 Action Control text
|
|
32518
|
+
/* 轨道接 Action Control text 档(定尺轨道):悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
|
|
32507
32519
|
焦点环与过渡由家族配方给,这里只把轨道的私有槽映射到桥接槽。轨道没有实描边(边界以内描边画,不吃行程),
|
|
32508
|
-
边位映射 transparent 并把 border 宽度归零;内描边经 shadow
|
|
32520
|
+
边位映射 transparent 并把 border 宽度归零;内描边经 shadow 通道各态同一支。悬停不换面(阶梯只给按下) */
|
|
32509
32521
|
--xh-action-visual-size: var(--xh-_switch-track-h);
|
|
32510
32522
|
--xh-action-min-inline-size: calc(var(--xh-_switch-track-h) * 2 - var(--xh-_switch-pad) * 2);
|
|
32511
32523
|
--xh-action-padding-inline: var(--xh-_switch-pad);
|
|
@@ -32551,7 +32563,7 @@
|
|
|
32551
32563
|
|
|
32552
32564
|
/* 只读:值仍要读得清、也仍会随表单提交,所以不压对比度、也不借禁用那档灰。
|
|
32553
32565
|
变的是"动不动得了":指针不摆手型、按下不缩放不换底(家族的按压块由这里的映射钉回静息面),
|
|
32554
|
-
|
|
32566
|
+
选中档的轨道退回未选中那一档的中性底(交互态的底只从语义面派生),
|
|
32555
32567
|
滑块收掉那层抬起的投影——投影是"这颗按得动"的信号。与文本框只读那一档同口径(压低底色而非置灰)。
|
|
32556
32568
|
滑块停在哪一端不受影响,值本身仍由位置这条非颜色通道读出。 */
|
|
32557
32569
|
[data-scope='switch'][data-part='root'][data-readonly]:not([data-disabled]) {
|
|
@@ -32588,7 +32600,7 @@
|
|
|
32588
32600
|
box-shadow: var(--xh-switch-thumb-shadow-readonly, none);
|
|
32589
32601
|
}
|
|
32590
32602
|
|
|
32591
|
-
/*
|
|
32603
|
+
/* 禁用:不靠 opacity——轨道退回 --xh-bg-subtle 底 + --xh-border-default 内描边,滑块前景置灰;
|
|
32592
32604
|
选中的禁用轨道同样退回中性面,值由滑块位置读出。面与手型由家族的禁用块按映射给 */
|
|
32593
32605
|
[data-scope='switch'][data-part='root'][data-disabled] {
|
|
32594
32606
|
--xh-_switch-track-border: var(--xh-switch-border-disabled, var(--xh-border-default));
|
|
@@ -32625,7 +32637,7 @@
|
|
|
32625
32637
|
}
|
|
32626
32638
|
}
|
|
32627
32639
|
|
|
32628
|
-
/* 滑块是 raised
|
|
32640
|
+
/* 滑块是 raised 抬起面(可拖起部件,逐部件登记):--xh-bg-surface-raised 底 + --xh-border-default 描边 +
|
|
32629
32641
|
--xh-elevation-raised 影,无顶光;描边必须在,影只是加成 */
|
|
32630
32642
|
[data-scope='switch'][data-part='thumb'] {
|
|
32631
32643
|
position: relative;
|
|
@@ -32695,13 +32707,13 @@
|
|
|
32695
32707
|
block-size: 60%;
|
|
32696
32708
|
border: var(--xh-stroke-thin) solid transparent;
|
|
32697
32709
|
border-block-start-color: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
|
|
32698
|
-
/*
|
|
32710
|
+
/* 加载环是等宽高的圆(全部加载环取 circle) */
|
|
32699
32711
|
border-radius: var(--xh-shape-circle);
|
|
32700
32712
|
animation: xh-switch-rotate var(--xh-switch-loading-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
|
|
32701
32713
|
}
|
|
32702
32714
|
|
|
32703
32715
|
/* —— 带文字的整行:<label> 包住控件与文字,与 checkbox 的标签、checkbox-group 的条目同一副样子 ——
|
|
32704
|
-
文字是控件自己的文字,字号随 size 档取 --xh-control-font
|
|
32716
|
+
文字是控件自己的文字,字号随 size 档取 --xh-control-font-*(控件字号随档);
|
|
32705
32717
|
行高取正文档,长文字可以自然换行 */
|
|
32706
32718
|
[data-scope='switch'][data-part='label'] {
|
|
32707
32719
|
--xh-_switch-label-font-size: var(--xh-control-font-md);
|
|
@@ -32723,7 +32735,7 @@
|
|
|
32723
32735
|
--xh-_switch-label-font-size: var(--xh-control-font-lg);
|
|
32724
32736
|
}
|
|
32725
32737
|
|
|
32726
|
-
/* 禁用标签色统一 --xh-fg-subtle
|
|
32738
|
+
/* 禁用标签色统一 --xh-fg-subtle */
|
|
32727
32739
|
[data-scope='switch'][data-part='label'][data-disabled] {
|
|
32728
32740
|
color: var(--xh-switch-label-fg-disabled, var(--xh-fg-subtle));
|
|
32729
32741
|
cursor: not-allowed;
|
|
@@ -32863,7 +32875,7 @@
|
|
|
32863
32875
|
既不让页面上的层号插进来,也不让它们漏出去压住别人 */
|
|
32864
32876
|
isolation: isolate;
|
|
32865
32877
|
|
|
32866
|
-
/* 作者放进单元格、列头与把手里的图标按档取尺,缺省 md
|
|
32878
|
+
/* 作者放进单元格、列头与把手里的图标按档取尺,缺省 md;表体行上的由家族随 data-xh-collection-size 下发。
|
|
32867
32879
|
表格自绘的状态字形(排序方向、勾、半选杠、展开方向)不读这支:它们是指示符,与所在的方盒同走
|
|
32868
32880
|
--xh-control-indicator-* 一族——五颗把手在自己身上把 --xh-icon-size 改接到方盒的尺,排序钮那支叫 --xh-table-sort-size */
|
|
32869
32881
|
--xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-md));
|
|
@@ -33007,7 +33019,7 @@
|
|
|
33007
33019
|
outline: none;
|
|
33008
33020
|
}
|
|
33009
33021
|
|
|
33010
|
-
/* 表头是淡底承载面:里头的触发器按淡底阶梯走(hover 200 → pressed 300),阶梯由 host
|
|
33022
|
+
/* 表头是淡底承载面:里头的触发器按淡底阶梯走(hover 200 → pressed 300),阶梯由 host 槽向内下发;
|
|
33011
33023
|
排序钮是 ghost 图标钮,悬停 / 按下面就从这两支 host 槽取 */
|
|
33012
33024
|
[data-scope='table'][data-part='header'] {
|
|
33013
33025
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
@@ -33031,7 +33043,7 @@
|
|
|
33031
33043
|
font-weight: var(--xh-table-footer-font-weight, var(--xh-font-weight-medium));
|
|
33032
33044
|
}
|
|
33033
33045
|
|
|
33034
|
-
/* 表体行走 Collection Item 的 page
|
|
33046
|
+
/* 表体行走 Collection Item 的 page 语境(页内持久集合):悬停 / 高亮 / 按下面(白底承载 hover 100 →
|
|
33035
33047
|
pressed 200)与选中面(品牌淡底 + 淡底前景,selected+hover 20% / +pressed 28%)由家族按 aria-selected /
|
|
33036
33048
|
aria-disabled 给出,标记由行首的勾选把手承担。这里只把公开槽映射到桥接槽,并逐项盖掉家族的行盒几何:
|
|
33037
33049
|
行是 flex 容器(列宽由单元格的内联尺寸决定,不进家族网格)、不内衬、不圆角、字号与光标随表格本身
|
|
@@ -33199,7 +33211,7 @@
|
|
|
33199
33211
|
}
|
|
33200
33212
|
|
|
33201
33213
|
/* 五个把手共用一副方形盒子,两种行的文字起点才对得齐;列设置区那颗与表头里的选择框同款,一眼看得出是同一件事。
|
|
33202
|
-
五颗都接 Action Control icon
|
|
33214
|
+
五颗都接 Action Control icon 档(定尺方框):盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族
|
|
33203
33215
|
配方给,这里只把使用者槽映射到桥接槽;边长仍按 --xh-control-indicator-size 走。三颗勾选框是 outline 形态
|
|
33204
33216
|
(字段静息形态:透明底 + --xh-border-control 描边),展开箭头与排序钮是 ghost;空框与箭头坐在白底行上,
|
|
33205
33217
|
按下落 200 档,已勾选的品牌实心面按下派生 active 面;排序钮坐在表头淡底上,阶梯另由 host 槽给(见下) */
|
|
@@ -33249,7 +33261,7 @@
|
|
|
33249
33261
|
}
|
|
33250
33262
|
}
|
|
33251
33263
|
|
|
33252
|
-
/*
|
|
33264
|
+
/* 盒里的字形是指示符:这四颗把手各自把 --xh-icon-size 改接到方盒的尺上,兜底字形与作者塞进盒里的
|
|
33253
33265
|
XhIcon 读同一把尺,root 那支只管作者放进单元格与把手里图标的 --xh-table-icon-size 不流进来。
|
|
33254
33266
|
三颗勾选框的勾与半选杠按方盒边长 × 0.75,与 Checkbox 的 --xh-_checkbox-glyph、Tree 勾选把手同一比例;
|
|
33255
33267
|
展开箭头的 chevron 与方盒同边长,同 Tree 的 branch-trigger */
|
|
@@ -33352,7 +33364,7 @@
|
|
|
33352
33364
|
mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
|
|
33353
33365
|
}
|
|
33354
33366
|
|
|
33355
|
-
/*
|
|
33367
|
+
/* 禁用:--xh-border-default 描边 + --xh-bg-subtle 底,勾藏起来;家族的禁用块按映射给 */
|
|
33356
33368
|
[data-scope='table'][data-part='select-all-trigger'][data-disabled],
|
|
33357
33369
|
[data-scope='table'][data-part='column-visibility-trigger'][data-disabled],
|
|
33358
33370
|
[data-scope='table'][data-part='row-select-trigger'][data-disabled] {
|
|
@@ -33403,7 +33415,7 @@
|
|
|
33403
33415
|
outline: none;
|
|
33404
33416
|
}
|
|
33405
33417
|
|
|
33406
|
-
/*
|
|
33418
|
+
/* 排序钮是列头里独立的定尺图标钮:不包列名,列名留在列头上、它排在列名之后,auto 外边距把它
|
|
33407
33419
|
推到行尾侧与列宽把手并排。盒型与 0.97 按压由家族 icon 档给(见五颗把手共用块);坐在表头淡底上,
|
|
33408
33420
|
悬停 / 按下面按 header 的 host 槽下发的阶梯走(hover 200 → pressed 300),不取白底行那档。
|
|
33409
33421
|
箭头静息取 subtle 前景,参与排序的列换成默认前景(见字形块) */
|
|
@@ -33673,7 +33685,7 @@
|
|
|
33673
33685
|
悬停恒真,而悬停那条是 0-6-0、选中那条是 0-3-0,少写一层祖先这块淡底就会被那两档盖掉。
|
|
33674
33686
|
禁用的行不接换父落点,:not([data-disabled]) 不会漏画任何一处高亮 */
|
|
33675
33687
|
[data-scope='table'][data-part='root'] [data-scope='table'][data-part='body'] > [data-scope='table'][data-part='row'][data-drop='inside']:not([data-disabled]) {
|
|
33676
|
-
/*
|
|
33688
|
+
/* 落点不是选中:品牌淡底专属选中,落点面取悬停之上一档的中性面 */
|
|
33677
33689
|
background: var(--xh-table-drop-inside-bg, var(--xh-bg-subtle-hover));
|
|
33678
33690
|
}
|
|
33679
33691
|
|
|
@@ -33707,7 +33719,7 @@
|
|
|
33707
33719
|
}
|
|
33708
33720
|
|
|
33709
33721
|
/* 排序方向用箭头字形表出来:aria-sort 只报给读屏,视觉侧也得有对应的东西。
|
|
33710
|
-
|
|
33722
|
+
箭头是指示符:尺寸读钮自己改接过的 --xh-icon-size(--xh-table-sort-size,缺省与方盒同边长),
|
|
33711
33723
|
与同一表头里的勾选框方盒、列拖拽把手同走 --xh-control-indicator-size,按图标档取的 20px 会比
|
|
33712
33724
|
16px 的方盒与列头文字都大一圈。:empty 守卫同展开箭头:作者塞了自己的图标就整个顶掉兜底;
|
|
33713
33725
|
flex: none 是因为 ghost 那圈透明描边仍占位,不钉住的话与盒同边长的箭头会被挤窄一个描边。
|
|
@@ -33815,7 +33827,7 @@
|
|
|
33815
33827
|
}
|
|
33816
33828
|
|
|
33817
33829
|
/* 取下一页的按钮:铺满一行摆在表尾——铺满一行的独立动作条目,接 Action Control 的 row 档、
|
|
33818
|
-
ghost
|
|
33830
|
+
ghost 形态:宽度由容器给、高度随内容、按下只换面不缩放;盒几何、悬停 / 按下 / 禁用面、
|
|
33819
33831
|
焦点环与粗指针热区全由家族给,白底承载 hover 100 → pressed 200。
|
|
33820
33832
|
这里只把使用者槽映射到桥接槽并把文案居中:它是一行里唯一的东西,靠起始缘会像一条没对齐的行 */
|
|
33821
33833
|
[data-scope='table'][data-part='load-more-trigger'] {
|
|
@@ -33831,7 +33843,7 @@
|
|
|
33831
33843
|
|
|
33832
33844
|
justify-content: center;
|
|
33833
33845
|
text-align: center;
|
|
33834
|
-
/* row
|
|
33846
|
+
/* row 档允许换行、高度随内容,折行的文案走正文行高 */
|
|
33835
33847
|
line-height: var(--xh-leading-normal);
|
|
33836
33848
|
}
|
|
33837
33849
|
|
|
@@ -33934,7 +33946,7 @@
|
|
|
33934
33946
|
/* 缺省是 line 变体:透明标签带,选中项由文字与底部指示条表达。Web Components 升级前还没有
|
|
33935
33947
|
data-variant,这组几何基础值也必须画成相同结果,避免定义完成时闪换样式;line 档的面与字色由家族
|
|
33936
33948
|
按升级后写入的家族角色给,升级前那一帧只有几何没有面色(与 side-nav / menu 同)。
|
|
33937
|
-
|
|
33949
|
+
悬停与按下的面按承载面分档:line 档经家族走白底承载 hover 100 → pressed 200;card 坐在
|
|
33938
33950
|
画布上 hover 100 → pressed 200;segment 坐在淡底轨道里 hover 200 → pressed 300。card / segment 的
|
|
33939
33951
|
六支面槽只在各自形态块里赋值,line 档不消费它们 */
|
|
33940
33952
|
--xh-_tabs-list-gap: var(--xh-space-0);
|
|
@@ -33996,7 +34008,7 @@
|
|
|
33996
34008
|
}
|
|
33997
34009
|
|
|
33998
34010
|
/* 卡片式:基线收掉,选中的那张标签自己成为一张有描边有底的卡片,顶边一条指示条。
|
|
33999
|
-
标签坐在画布上,悬停 100 → 按下 200
|
|
34011
|
+
标签坐在画布上,悬停 100 → 按下 200(白底承载) */
|
|
34000
34012
|
[data-scope='tabs'][data-part='root'][data-variant='card'] {
|
|
34001
34013
|
--xh-_tabs-list-gap: var(--xh-control-gap-md);
|
|
34002
34014
|
--xh-_tabs-list-bg: transparent;
|
|
@@ -34015,7 +34027,7 @@
|
|
|
34015
34027
|
--xh-_tabs-accent-text: var(--xh-_tone-fg, var(--xh-fg-default));
|
|
34016
34028
|
}
|
|
34017
34029
|
|
|
34018
|
-
/*
|
|
34030
|
+
/* 分段式(有滑块开关):淡底轨道承载一块白色抬起的选中面,选中文字保持默认字色。
|
|
34019
34031
|
未选中标签坐在淡底轨道里,悬停 200 → 按下 300;选中面自己不再叠悬停 / 按下态。
|
|
34020
34032
|
选中面的三件(surface-raised 底、border-default 描边、raised 影)写在下面标签自己的规则里 */
|
|
34021
34033
|
[data-scope='tabs'][data-part='root'][data-variant='segment'] {
|
|
@@ -34080,8 +34092,8 @@
|
|
|
34080
34092
|
translate: 0 var(--xh-_tabs-scroll);
|
|
34081
34093
|
}
|
|
34082
34094
|
|
|
34083
|
-
/* segment 档的标签带是一块淡底面:--xh-bg-subtle 底 + 一圈透明占位边 +
|
|
34084
|
-
它同时是标签的淡底承载面,向内下发 hover 200 → pressed 300
|
|
34095
|
+
/* segment 档的标签带是一块淡底面:--xh-bg-subtle 底 + 一圈透明占位边 + 无影(三选一)。
|
|
34096
|
+
它同时是标签的淡底承载面,向内下发 hover 200 → pressed 300 的承载阶梯;
|
|
34085
34097
|
只写在标签带上不写在 root 上:内容面板里的按钮坐在画布上,不该跟着抬一档 */
|
|
34086
34098
|
[data-scope='tabs'][data-part='root'][data-variant='segment'] [data-scope='tabs'][data-part='list'] {
|
|
34087
34099
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
@@ -34111,9 +34123,9 @@
|
|
|
34111
34123
|
min-inline-size: auto;
|
|
34112
34124
|
}
|
|
34113
34125
|
|
|
34114
|
-
/* line
|
|
34126
|
+
/* line 档(导航当前页):把公开槽映射到 Collection Item 的 nav 语境桥接槽。静息 muted / regular,
|
|
34115
34127
|
悬停 100 + default 字,按下 200 只换面;当前页透明面 + 品牌深字(随语气的 --xh-_tabs-accent-text)+
|
|
34116
|
-
medium,叠悬停 100
|
|
34128
|
+
medium,叠悬停 100。2px 指示线不由家族按条目画:放了 indicator 部件是 list 上的滑动部件,
|
|
34117
34129
|
没放则由下面的静态线规则画在选中标签自己身上。高度由 block-size 定,块向内边距归零 */
|
|
34118
34130
|
[data-scope='tabs'][data-part='root'][data-variant='line'] [data-scope='tabs'][data-part='trigger'] {
|
|
34119
34131
|
--xh-collection-block-padding: var(--xh-space-0);
|
|
@@ -34137,7 +34149,7 @@
|
|
|
34137
34149
|
color: var(--xh-tabs-trigger-fg, var(--xh-fg-muted));
|
|
34138
34150
|
font-weight: var(--xh-tabs-trigger-font-weight, var(--xh-text-label-weight));
|
|
34139
34151
|
cursor: pointer;
|
|
34140
|
-
/*
|
|
34152
|
+
/* 标签是铺开的一段(Tabs trigger 归行级),按下只换面不缩放:transition 里没有 scale */
|
|
34141
34153
|
transition:
|
|
34142
34154
|
color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
|
|
34143
34155
|
background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
|
|
@@ -34166,7 +34178,7 @@
|
|
|
34166
34178
|
}
|
|
34167
34179
|
|
|
34168
34180
|
/* 按下去要有回应:card / segment 档的未选中标签换到按下面(card 200、segment 300),几何不动。
|
|
34169
|
-
选中标签不叠按下面:card 的卡片面与 segment
|
|
34181
|
+
选中标签不叠按下面:card 的卡片面与 segment 的抬起面本身就是选中身份(有滑块开关无叠加态) */
|
|
34170
34182
|
[data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])
|
|
34171
34183
|
[data-scope='tabs'][data-part='trigger']:not([data-disabled]):not([data-state='active']):is(:active, [data-pressed]) {
|
|
34172
34184
|
background: var(--xh-tabs-trigger-bg-pressed, var(--xh-_tabs-trigger-bg-pressed));
|
|
@@ -34185,7 +34197,7 @@
|
|
|
34185
34197
|
font-weight: var(--xh-tabs-trigger-font-weight-active, var(--xh-font-weight-medium));
|
|
34186
34198
|
}
|
|
34187
34199
|
|
|
34188
|
-
/* segment
|
|
34200
|
+
/* segment 档的选中标签就是那块白色抬起的滑块面(有滑块开关):surface-raised 底 +
|
|
34189
34201
|
border-default 描边 + raised 影三件写在标签自己身上。标签带里放了 indicator 部件时,
|
|
34190
34202
|
这块面搬到部件上跟着滑(见下面的 indicator 规则),标签自己透空、只留字 */
|
|
34191
34203
|
[data-scope='tabs'][data-part='root'][data-variant='segment']
|
|
@@ -34386,7 +34398,7 @@
|
|
|
34386
34398
|
display: none;
|
|
34387
34399
|
}
|
|
34388
34400
|
|
|
34389
|
-
/* segment
|
|
34401
|
+
/* segment 档(有滑块开关):部件就是那块白色抬起的滑块面,四个几何量都取、整块跟着滑——
|
|
34390
34402
|
surface-raised 底 + border-default 描边 + raised 影三件与 Segmented 的滑块同一套;
|
|
34391
34403
|
描边吃进盒里(border-box),面与标签仍是同一块矩形。标签压在它上面,点击一律交给标签。
|
|
34392
34404
|
用连续档而不是进场那条:滑块是被推过去的,起步就该有速度;四个几何量同时走,标签宽不等时才不会先变形再挪位 */
|
|
@@ -34410,7 +34422,7 @@
|
|
|
34410
34422
|
block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
|
|
34411
34423
|
}
|
|
34412
34424
|
|
|
34413
|
-
/* line 档没放 indicator
|
|
34425
|
+
/* line 档没放 indicator 部件时,选中标签自画一条静态指示线(导航当前页):
|
|
34414
34426
|
横向缺省也要像纵向示例那样有一条选中线,作者不必为了这条线多放一个部件。
|
|
34415
34427
|
线画在选中标签的 ::after 上,以标签盒为定位参照(基础规则里已是 position: relative),
|
|
34416
34428
|
厚度 / 颜色 / 圆角与 indicator 部件读同一组槽与缺省——作者改一处,部件与静态线一起改。
|
|
@@ -34708,7 +34720,7 @@
|
|
|
34708
34720
|
cursor: pointer;
|
|
34709
34721
|
}
|
|
34710
34722
|
|
|
34711
|
-
/*
|
|
34723
|
+
/* 按下去要有回应:可选的芯片是一颗定尺的离散控件,整枚轻微下压并同时换底
|
|
34712
34724
|
(白底承载 hover 100 → pressed 200),松手即弹回。置灰的不压;
|
|
34713
34725
|
指针 :active 与 Headless 投影的 data-pressed 看见同一副按压面 */
|
|
34714
34726
|
[data-scope='tag-group'][data-part='list']
|
|
@@ -34742,7 +34754,7 @@
|
|
|
34742
34754
|
background: var(--xh-tag-group-item-bg-pressed-solid, var(--xh-_tone-active, var(--xh-bg-brand-active)));
|
|
34743
34755
|
}
|
|
34744
34756
|
|
|
34745
|
-
/* 悬停与键盘锚点共用白底承载的 hover
|
|
34757
|
+
/* 悬停与键盘锚点共用白底承载的 hover 档(hover 100 → pressed 200):
|
|
34746
34758
|
data-highlighted 跟的是连接层记的焦点标签,与选中互相独立。
|
|
34747
34759
|
实心标签不进这里:它的字是实心底上配对的那支前景色,换成灰底就读不出来了;
|
|
34748
34760
|
实心档在这两档里面不换,回执落在按压缩放与聚焦环上 */
|
|
@@ -34765,32 +34777,8 @@
|
|
|
34765
34777
|
}
|
|
34766
34778
|
|
|
34767
34779
|
/* —— 选中 —— */
|
|
34768
|
-
/*
|
|
34769
|
-
|
|
34770
|
-
标了语气的组从语气层取同一条曲线。置灰的标签不进这里:它的边与字都已退成置灰色。
|
|
34771
|
-
实心档另有一条:它的面本身就是那族色,淡底与配对前景压在上面都读不出来 */
|
|
34772
|
-
[data-scope='tag-group'][data-part='list']
|
|
34773
|
-
> [data-scope='tag'][data-part='root'][data-selected]:not([data-disabled]):not([data-variant='solid']) {
|
|
34774
|
-
border-color: var(--xh-tag-group-item-border-selected, transparent);
|
|
34775
|
-
background: var(--xh-tag-group-item-bg-selected, var(--xh-_tone-subtle, var(--xh-bg-brand-subtle)));
|
|
34776
|
-
color: var(--xh-tag-group-item-fg-selected, var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle)));
|
|
34777
|
-
}
|
|
34778
|
-
|
|
34779
|
-
[data-scope='tag-group'][data-part='list']
|
|
34780
|
-
> [data-scope='tag'][data-part='root'][data-selected]:not([data-disabled]):not([data-variant='solid']):is(:hover, [data-highlighted]) {
|
|
34781
|
-
background: var(--xh-tag-group-item-bg-selected-hover, var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover)));
|
|
34782
|
-
}
|
|
34783
|
-
|
|
34784
|
-
[data-scope='tag-group'][data-part='list']
|
|
34785
|
-
> [data-scope='tag'][data-part='root'][data-selected][data-selectable]:not([data-disabled]):not([data-variant='solid']):is(:active, [data-pressed]) {
|
|
34786
|
-
background: var(--xh-tag-group-item-bg-selected-pressed, var(--xh-_tone-subtle-active, var(--xh-bg-brand-subtle-active)));
|
|
34787
|
-
}
|
|
34788
|
-
|
|
34789
|
-
/* 实心标签选中:字不换(仍是 tag.css 给的面配对前景色,作者的 --xh-tag-fg 照旧生效),
|
|
34790
|
-
描边取字色,在实心底上描出一圈;环由 tag.css 取 currentColor,跟着字走 */
|
|
34791
|
-
[data-scope='tag-group'][data-part='list'] > [data-scope='tag'][data-part='root'][data-variant='solid'][data-selected]:not([data-disabled]) {
|
|
34792
|
-
border-color: var(--xh-tag-group-item-border-selected, currentColor);
|
|
34793
|
-
}
|
|
34780
|
+
/* 与树选择同一种读法:选中的标签面、字与描边都不换,悬停 / 锚点 / 按下沿用未选中的那条阶梯,
|
|
34781
|
+
只在文字后亮一枚对号(见下面 item-indicator 那几块) */
|
|
34794
34782
|
|
|
34795
34783
|
/* 标签里那一格:文字与摘除钮排在一条线上。它是 tag 根与 tag 的 label / close-trigger 之间的一层,
|
|
34796
34784
|
间距照抄所在标签的那一档,有它与没它标签长得一样 */
|
|
@@ -34806,7 +34794,8 @@
|
|
|
34806
34794
|
display: none;
|
|
34807
34795
|
}
|
|
34808
34796
|
|
|
34809
|
-
/*
|
|
34797
|
+
/* 选中标记:跟在文字后面的一枚对号,与摘除钮的叉同一把随文尺(标签是纯行内文字组件);
|
|
34798
|
+
作者写在格里哪儿都排到文字与作者内容之后、摘除钮之前。
|
|
34810
34799
|
作者塞进来的图标读同一支 --xh-icon-size。连接层没选中时给 hidden,UA 的 display:none 被上面的 display 盖住,
|
|
34811
34800
|
这里压回去 */
|
|
34812
34801
|
[data-scope='tag-group'][data-part='item-indicator'] {
|
|
@@ -34814,17 +34803,34 @@
|
|
|
34814
34803
|
|
|
34815
34804
|
display: inline-flex;
|
|
34816
34805
|
flex: none;
|
|
34806
|
+
order: 1;
|
|
34817
34807
|
align-items: center;
|
|
34818
34808
|
justify-content: center;
|
|
34819
34809
|
inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
|
|
34820
34810
|
block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
|
|
34821
|
-
|
|
34811
|
+
/* 与树选择的行尾对号同色:标了语气的组取语气字色,没写语气取品牌前景 */
|
|
34812
|
+
color: var(--xh-tag-group-item-indicator-fg, var(--xh-_tone-fg, var(--xh-fg-brand)));
|
|
34822
34813
|
}
|
|
34823
34814
|
|
|
34824
34815
|
[data-scope='tag-group'][data-part='item-indicator'][hidden] {
|
|
34825
34816
|
display: none;
|
|
34826
34817
|
}
|
|
34827
34818
|
|
|
34819
|
+
/* 实心标签的面本身就是那族色,品牌 / 语气字色压在上面读不出来:对号取面配对的那支前景色 */
|
|
34820
|
+
[data-scope='tag'][data-part='root'][data-variant='solid'] [data-scope='tag-group'][data-part='item-indicator'] {
|
|
34821
|
+
color: var(--xh-tag-group-item-indicator-fg, currentColor);
|
|
34822
|
+
}
|
|
34823
|
+
|
|
34824
|
+
/* 置灰的标签里对号跟着字一起退成置灰色 */
|
|
34825
|
+
[data-scope='tag-group'][data-part='item-indicator'][data-disabled] {
|
|
34826
|
+
color: inherit;
|
|
34827
|
+
}
|
|
34828
|
+
|
|
34829
|
+
/* 摘除钮是操作,排在对号之后、格的最末 */
|
|
34830
|
+
[data-scope='tag-group'][data-part='cell'] > [data-scope='tag'][data-part='close-trigger'] {
|
|
34831
|
+
order: 2;
|
|
34832
|
+
}
|
|
34833
|
+
|
|
34828
34834
|
/* 没写内容就由皮肤画兜底对号;作者往部件里塞了自己的图形,这条即不命中 */
|
|
34829
34835
|
[data-scope='tag-group'][data-part='item-indicator']:empty::before {
|
|
34830
34836
|
content: '';
|
|
@@ -34837,12 +34843,15 @@
|
|
|
34837
34843
|
}
|
|
34838
34844
|
|
|
34839
34845
|
@media (forced-colors: active) {
|
|
34840
|
-
/*
|
|
34846
|
+
/* 选中只由对号表达:遮罩出来的那块底色用系统高亮色画,按下时标签整枚反成 Highlight,对号换成反白 */
|
|
34847
|
+
[data-scope='tag-group'][data-part='item-indicator']:empty::before {
|
|
34848
|
+
background-color: Highlight;
|
|
34849
|
+
}
|
|
34850
|
+
|
|
34841
34851
|
[data-scope='tag-group'][data-part='list']
|
|
34842
|
-
> [data-scope='tag'][data-part='root'][data-
|
|
34843
|
-
|
|
34844
|
-
background:
|
|
34845
|
-
color: HighlightText;
|
|
34852
|
+
> [data-scope='tag'][data-part='root'][data-selectable]:not([data-disabled]):not([data-variant='solid']):is(:active, [data-pressed])
|
|
34853
|
+
[data-scope='tag-group'][data-part='item-indicator']:empty::before {
|
|
34854
|
+
background-color: HighlightText;
|
|
34846
34855
|
}
|
|
34847
34856
|
|
|
34848
34857
|
/* 按下:常态靠底色深一档表出,这一档里底色被统一换成 Canvas;按住那一下用系统高亮反色画回来 */
|
|
@@ -34853,6 +34862,13 @@
|
|
|
34853
34862
|
}
|
|
34854
34863
|
}
|
|
34855
34864
|
|
|
34865
|
+
@media print {
|
|
34866
|
+
/* 打印默认丢底色,而对号是遮罩出来的一块底色:标签本就不换面,丢了它选中在纸上就没了踪影 */
|
|
34867
|
+
[data-scope='tag-group'][data-part='item-indicator'] {
|
|
34868
|
+
print-color-adjust: exact;
|
|
34869
|
+
}
|
|
34870
|
+
}
|
|
34871
|
+
|
|
34856
34872
|
/* styles/tags-input.css */
|
|
34857
34873
|
/* TagsInput 独立皮肤同时传递引入字段视觉盒与字段内动作;full bundle 递归去重。 */
|
|
34858
34874
|
|
|
@@ -35865,8 +35881,6 @@
|
|
|
35865
35881
|
}
|
|
35866
35882
|
|
|
35867
35883
|
[data-scope='time-picker'][data-part='content'][data-state='open'] {
|
|
35868
|
-
/* 只在展开态挂着:随状态属性一起消失,不长期占着合成层 */
|
|
35869
|
-
will-change: opacity, translate;
|
|
35870
35884
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
35871
35885
|
}
|
|
35872
35886
|
|
|
@@ -36514,8 +36528,6 @@
|
|
|
36514
36528
|
}
|
|
36515
36529
|
|
|
36516
36530
|
[data-scope='time-range-picker'][data-part='content'][data-state='open'] {
|
|
36517
|
-
/* 只在展开态挂着:随状态属性一起消失,不长期占着合成层 */
|
|
36518
|
-
will-change: opacity, translate;
|
|
36519
36531
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
36520
36532
|
}
|
|
36521
36533
|
|
|
@@ -36970,9 +36982,9 @@
|
|
|
36970
36982
|
}
|
|
36971
36983
|
|
|
36972
36984
|
/* 中性浮层承载整条反馈,语气只落到状态字形和标题。
|
|
36973
|
-
面走 sheet
|
|
36985
|
+
面走 sheet 三件套(--xh-material-elevated-bg / -border / -shadow,亮暗两档同有 1px 描边)。 */
|
|
36974
36986
|
[data-scope='toast'][data-part='root'] {
|
|
36975
|
-
/* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺:Feedback 指示符统一 md
|
|
36987
|
+
/* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺:Feedback 指示符统一 md 档 */
|
|
36976
36988
|
--xh-icon-size: var(--xh-toast-icon-size, var(--xh-glyph-size-md));
|
|
36977
36989
|
|
|
36978
36990
|
--xh-toast-y: var(--xh-toast-offset-collapsed, 0px);
|
|
@@ -37219,7 +37231,7 @@
|
|
|
37219
37231
|
}
|
|
37220
37232
|
|
|
37221
37233
|
/* 操作钮是带文案的离散动作钮:盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
|
|
37222
|
-
的 text outline 档给(连接层投 sm;非 Button
|
|
37234
|
+
的 text outline 档给(连接层投 sm;非 Button 的触发器缺省中性描边、透明底),组件只映射既有使用者槽。
|
|
37223
37235
|
语气只落到状态字形和标题:这颗钮坐在带 data-tone 的条子里,底 / 边 / 字钉在中性语义面上,不随语气;
|
|
37224
37236
|
条子是 sheet 白面承载:hover --xh-bg-subtle(100)→ pressed --xh-bg-subtle-hover(200)。
|
|
37225
37237
|
条子是单行 flex,按钮不参与伸缩:文案长了该换行的是文字 */
|
|
@@ -37369,7 +37381,7 @@
|
|
|
37369
37381
|
|
|
37370
37382
|
/* 未按下的四档形态由家族形态矩阵按 data-xh-action-variant 给出(缺省 subtle 由连接层显式投影;solid 未按下时
|
|
37371
37383
|
投 ghost,只在按下时才是品牌实心);公开槽桥接到矩阵之前:使用者槽 → 形态矩阵 → 家族缺省。
|
|
37372
|
-
按下(on
|
|
37384
|
+
按下(on)是无滑块开关的选中面:品牌淡底 12 → 悬停 20 → 按压 28,前景 fg-on-brand-subtle,
|
|
37373
37385
|
私有槽在下面的 data-state='on' 块里接到桥接槽上。 */
|
|
37374
37386
|
[data-scope='toggle'][data-part='root'] {
|
|
37375
37387
|
--xh-_toggle-bg-on: var(--xh-toggle-bg-on, var(--xh-_tone-subtle, var(--xh-bg-brand-subtle)));
|
|
@@ -37452,7 +37464,7 @@
|
|
|
37452
37464
|
--xh-action-border-disabled: var(--xh-_toggle-border-on);
|
|
37453
37465
|
}
|
|
37454
37466
|
|
|
37455
|
-
/* 使用者的 --xh-toggle-shadow
|
|
37467
|
+
/* 使用者的 --xh-toggle-shadow 只落在按下面上:矩阵各态无影,淡底与阴影互斥 */
|
|
37456
37468
|
[data-scope='toggle'][data-part='root'][data-state='on'] {
|
|
37457
37469
|
--xh-action-shadow-rest: var(--xh-toggle-shadow, none);
|
|
37458
37470
|
--xh-action-shadow-hover: var(--xh-toggle-shadow, none);
|
|
@@ -37523,8 +37535,8 @@
|
|
|
37523
37535
|
/* 形态的落点:没写 data-variant 时这十支保持缺省档的取值,段的规则读的是
|
|
37524
37536
|
「使用者令牌 → 这十支 → 语义令牌」三级,使用者令牌永远排在形态之前。
|
|
37525
37537
|
未选中那五支管段的壳,选中那五支管当前值那一段。
|
|
37526
|
-
缺省档(subtle)的段坐在自己的淡底面上,悬停 200 → 按下 300
|
|
37527
|
-
|
|
37538
|
+
缺省档(subtle)的段坐在自己的淡底面上,悬停 200 → 按下 300(淡底承载);
|
|
37539
|
+
选中段是无滑块开关:品牌淡底 + 淡底前景,悬停 20% → 按下 28% */
|
|
37528
37540
|
--xh-_toggle-group-item-bg: var(--xh-bg-subtle);
|
|
37529
37541
|
--xh-_toggle-group-item-bg-hover: var(--xh-bg-subtle-hover);
|
|
37530
37542
|
--xh-_toggle-group-item-bg-active: var(--xh-bg-subtle-active);
|
|
@@ -37589,7 +37601,7 @@
|
|
|
37589
37601
|
--xh-_toggle-group-item-highlight-on: none;
|
|
37590
37602
|
}
|
|
37591
37603
|
|
|
37592
|
-
/* outline 与 ghost 的段坐在画布上:悬停 100 → 按下 200
|
|
37604
|
+
/* outline 与 ghost 的段坐在画布上:悬停 100 → 按下 200(白底承载) */
|
|
37593
37605
|
[data-scope='toggle-group'][data-part='root'][data-variant='outline'] {
|
|
37594
37606
|
--xh-_toggle-group-item-bg: transparent;
|
|
37595
37607
|
--xh-_toggle-group-item-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
|
|
@@ -37751,7 +37763,7 @@
|
|
|
37751
37763
|
|
|
37752
37764
|
/* 选中态:单选是 role=radio + aria-checked,多选是原生按钮 + aria-pressed,
|
|
37753
37765
|
两套 ARIA 各出一半,样式一条都对不上——只有 data-state 是两种模式共同的出口。
|
|
37754
|
-
|
|
37766
|
+
无滑块开关:品牌淡底 + 淡底前景,悬停 20% → 按下 28%,三态都经桥接槽交给家族画;
|
|
37755
37767
|
用哪族颜色由 data-tone 决定:语气槽沿继承流下来,root 自己写了 tone 算、
|
|
37756
37768
|
整组落在语气容器里也算;没有语气就退回品牌配色,与不接语气时逐值相同。
|
|
37757
37769
|
使用者令牌排在语气之前:写了组件槽就以它为准。
|
|
@@ -37926,7 +37938,7 @@
|
|
|
37926
37938
|
--xh-tool-call-skin: 1;
|
|
37927
37939
|
}
|
|
37928
37940
|
|
|
37929
|
-
/* 一张静态内容面:--xh-border-default 描边 + surface 底 +
|
|
37941
|
+
/* 一张静态内容面:--xh-border-default 描边 + surface 底 + 无影(边界只由描边承担);
|
|
37930
37942
|
审批位与详情区的内部分隔线走另一支 --xh-tool-call-divider(subtle)。
|
|
37931
37943
|
卡片建出来时淡入并向上收一段,一屏若干张的错峰交给外层容器排 */
|
|
37932
37944
|
[data-scope='tool-call'][data-part='root'] {
|
|
@@ -37939,7 +37951,7 @@
|
|
|
37939
37951
|
/* 影另落一份进私有槽给语气档:它要把影与左侧色条叠成一条 box-shadow,缺省无影写成零影占位 */
|
|
37940
37952
|
--xh-_tool-call-shadow: var(--xh-tool-call-shadow, 0 0 0 transparent);
|
|
37941
37953
|
|
|
37942
|
-
/* 作者塞进指示符里的图标与皮肤画的兜底字形同一把尺:md
|
|
37954
|
+
/* 作者塞进指示符里的图标与皮肤画的兜底字形同一把尺:md 档,开关上另按家族档取值 */
|
|
37943
37955
|
--xh-icon-size: var(--xh-tool-call-icon-size, var(--xh-glyph-size-md));
|
|
37944
37956
|
|
|
37945
37957
|
display: block;
|
|
@@ -37959,7 +37971,7 @@
|
|
|
37959
37971
|
/* —— 形态 —— */
|
|
37960
37972
|
/* 缺省档即 outline,写在上面那条基础规则里 */
|
|
37961
37973
|
/* 底色分区:描边让位给底色,嵌在别人的面里时不再多一圈线;
|
|
37962
|
-
淡底承载面向开关下发 hover 200 → pressed 300
|
|
37974
|
+
淡底承载面向开关下发 hover 200 → pressed 300 */
|
|
37963
37975
|
[data-scope='tool-call'][data-part='root'][data-variant='subtle'] {
|
|
37964
37976
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
37965
37977
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
@@ -37994,7 +38006,7 @@
|
|
|
37994
38006
|
}
|
|
37995
38007
|
|
|
37996
38008
|
/* 开关铺满一行,盒型、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给(ghost 形态:
|
|
37997
|
-
白底承载 hover 100 → pressed 200
|
|
38009
|
+
白底承载 hover 100 → pressed 200,按下只换面不缩放);这里只把使用者槽映射到桥接槽:
|
|
37998
38010
|
圆角归零贴住卡边,内衬与字号沿用卡片的档位(不取 profile 的 md 档内衬,几何不变),
|
|
37999
38011
|
字形按开关自己的档位取 --xh-_action-profile-glyph-size */
|
|
38000
38012
|
[data-scope='tool-call'][data-part='trigger'] {
|
|
@@ -38219,7 +38231,7 @@
|
|
|
38219
38231
|
animation: xh-disclosure-expand var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
38220
38232
|
}
|
|
38221
38233
|
|
|
38222
|
-
/* 退场走 exit
|
|
38234
|
+
/* 退场走 exit 档曲线 */
|
|
38223
38235
|
[data-scope='tool-call'][data-part='content'][data-state='closed'] {
|
|
38224
38236
|
animation: xh-disclosure-collapse var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
|
|
38225
38237
|
}
|
|
@@ -38392,7 +38404,7 @@
|
|
|
38392
38404
|
}
|
|
38393
38405
|
|
|
38394
38406
|
/* 淡底档:带内距、换成 subtle 底,描边让位给底色但留住 1px 边位(与 outline 几何一致),无影;
|
|
38395
|
-
淡底承载面向条目下发 hover 200 → pressed 300
|
|
38407
|
+
淡底承载面向条目下发 hover 200 → pressed 300 */
|
|
38396
38408
|
[data-scope='toolbar'][data-part='root'][data-variant='subtle'] {
|
|
38397
38409
|
--xh-_toolbar-root-p: var(--xh-_toolbar-p);
|
|
38398
38410
|
--xh-_toolbar-root-border-width: var(--xh-stroke-thin);
|
|
@@ -38401,7 +38413,7 @@
|
|
|
38401
38413
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
38402
38414
|
}
|
|
38403
38415
|
|
|
38404
|
-
/* 附着式工具面:一张静态内容面,--xh-border-default 描边 + surface 底 +
|
|
38416
|
+
/* 附着式工具面:一张静态内容面,--xh-border-default 描边 + surface 底 + 无影(边界只由描边承担)。 */
|
|
38405
38417
|
[data-scope='toolbar'][data-part='root'][data-variant='outline'] {
|
|
38406
38418
|
--xh-_toolbar-root-p: var(--xh-_toolbar-p);
|
|
38407
38419
|
--xh-_toolbar-root-border-width: var(--xh-stroke-thin);
|
|
@@ -38468,7 +38480,7 @@
|
|
|
38468
38480
|
|
|
38469
38481
|
/* 默认条目是一枚无描边工具按钮:盒型、三档几何、悬停 / 按下 / 禁用面与按压缩放由 Action Control 的
|
|
38470
38482
|
text 档给(ghost 形态:ghost 根按画布承载 hover 100 → pressed 200,subtle 根与分组由 host 槽下发
|
|
38471
|
-
200 → 300
|
|
38483
|
+
200 → 300);这里只把使用者槽映射到桥接槽(-gap / -h / -px / -radius / -bg / -bg-hover /
|
|
38472
38484
|
-bg-active / -bg-disabled / -fg / -font-size 保留为第一参数)。作者仍可用类名或内联样式完整覆盖。 */
|
|
38473
38485
|
[data-scope='toolbar'][data-part='item'] {
|
|
38474
38486
|
--xh-action-gap: var(--xh-toolbar-item-gap, var(--xh-control-gap-sm));
|
|
@@ -38488,7 +38500,7 @@
|
|
|
38488
38500
|
touch-action: manipulation;
|
|
38489
38501
|
}
|
|
38490
38502
|
|
|
38491
|
-
/*
|
|
38503
|
+
/* 无滑块开关的按下态:品牌淡底 + 淡底前景,hover / 按下沿 12% → 20% → 28% 三档走;
|
|
38492
38504
|
三态都经桥接槽交给家族画,禁用面仍由家族按 data-disabled 给 */
|
|
38493
38505
|
[data-scope='toolbar'][data-part='item'][aria-pressed='true'] {
|
|
38494
38506
|
--xh-action-bg-rest: var(--xh-toolbar-item-bg-pressed, var(--xh-bg-brand-subtle));
|
|
@@ -38659,10 +38671,10 @@
|
|
|
38659
38671
|
--xh-_tooltip-py: var(--xh-space-1);
|
|
38660
38672
|
--xh-_tooltip-px: var(--xh-space-2);
|
|
38661
38673
|
--xh-_tooltip-font-size: var(--xh-control-caption-md);
|
|
38662
|
-
/* Tooltip
|
|
38674
|
+
/* Tooltip 保留反白身份(登记的反白 compact frosted):短提示要与可交互的普通主题浮层一眼分开。
|
|
38663
38675
|
94% 是六种 tone 在纯黑/纯白最坏底色上仍托住 4.5:1 正文的首个安全档。
|
|
38664
38676
|
边不取 --xh-material-frosted-border:那是深色 14% 的透明边,压在反白深底上看不见,
|
|
38665
|
-
|
|
38677
|
+
浮层要的 1px 可见边界由 on 色 20% 拼色承担;浮层不用玻璃高光,顶光缺省不画 */
|
|
38666
38678
|
--xh-_tooltip-solid: var(--xh-_tone, var(--xh-fg-default));
|
|
38667
38679
|
--xh-_tooltip-on: var(--xh-_tone-on, var(--xh-bg-surface));
|
|
38668
38680
|
--xh-_tooltip-border: color-mix(in oklab, var(--xh-_tooltip-on) 20%, transparent);
|
|
@@ -38690,7 +38702,7 @@
|
|
|
38690
38702
|
text-wrap: pretty;
|
|
38691
38703
|
--xh-_tooltip-elevation-shadow: var(--xh-tooltip-shadow, var(--xh-material-frosted-compact-shadow));
|
|
38692
38704
|
|
|
38693
|
-
/*
|
|
38705
|
+
/* 顶光槽缺省透明(不用顶部高光),使用者要加自行灌色 */
|
|
38694
38706
|
box-shadow:
|
|
38695
38707
|
inset 0 var(--xh-stroke-thin) 0 var(--xh-tooltip-highlight, transparent),
|
|
38696
38708
|
var(--xh-_tooltip-elevation-shadow);
|
|
@@ -38710,11 +38722,9 @@
|
|
|
38710
38722
|
pointer-events: none;
|
|
38711
38723
|
}
|
|
38712
38724
|
|
|
38713
|
-
/* 入场走 enter
|
|
38725
|
+
/* 入场走 enter 档(锚定列表族的 tooltip 入场 --xh-motion-duration-enter),退场仍是 exit */
|
|
38714
38726
|
[data-scope='tooltip'][data-part='content'][data-state='open'] {
|
|
38715
38727
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
38716
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
38717
|
-
will-change: opacity, translate;
|
|
38718
38728
|
}
|
|
38719
38729
|
|
|
38720
38730
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -38973,7 +38983,7 @@
|
|
|
38973
38983
|
padding-inline: var(--xh-tour-px, var(--xh-surface-px-md));
|
|
38974
38984
|
/* 引导步骤的正文长度由作者定,矮视口下不限高气泡会整块伸出视口 */
|
|
38975
38985
|
max-block-size: min(var(--xh-tour-max-h, var(--xh-overlay-max-h)), var(--xh-_tour-available-h));
|
|
38976
|
-
/* M4 sheet
|
|
38986
|
+
/* M4 sheet 三件套,与 dialog 同源:1px 描边是它的边界,不透明底,影只是加成 */
|
|
38977
38987
|
border: var(--xh-stroke-thin) solid var(--xh-tour-border, var(--xh-material-elevated-border));
|
|
38978
38988
|
border-radius: var(--xh-tour-radius, var(--xh-shape-overlay));
|
|
38979
38989
|
background: var(--xh-tour-bg, var(--xh-material-elevated-bg));
|
|
@@ -38993,8 +39003,6 @@
|
|
|
38993
39003
|
|
|
38994
39004
|
[data-scope='tour'][data-part='content'][data-state='open'] {
|
|
38995
39005
|
animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
38996
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
38997
|
-
will-change: opacity, scale, translate;
|
|
38998
39006
|
}
|
|
38999
39007
|
|
|
39000
39008
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -39017,7 +39025,7 @@
|
|
|
39017
39025
|
padding-inline-end: calc(var(--xh-tour-close-size, var(--xh-control-h-sm)) + var(--xh-surface-action-inset));
|
|
39018
39026
|
}
|
|
39019
39027
|
|
|
39020
|
-
/*
|
|
39028
|
+
/* 说明文字走说明档:13px + fg-muted */
|
|
39021
39029
|
[data-scope='tour'][data-part='description'] {
|
|
39022
39030
|
margin: 0;
|
|
39023
39031
|
font-size: var(--xh-text-secondary-size);
|
|
@@ -39042,7 +39050,7 @@
|
|
|
39042
39050
|
display: none;
|
|
39043
39051
|
}
|
|
39044
39052
|
|
|
39045
|
-
/* 圆点:8px 正圆取 circle
|
|
39053
|
+
/* 圆点:8px 正圆取 circle(分页点统一款),未走到的一档取中性描边色。
|
|
39046
39054
|
宽度与底色都随状态换,换步那一下能看出进度在推进 */
|
|
39047
39055
|
[data-scope='tour'][data-part='progress-dot'] {
|
|
39048
39056
|
inline-size: var(--xh-space-2);
|
|
@@ -39068,7 +39076,7 @@
|
|
|
39068
39076
|
|
|
39069
39077
|
/*
|
|
39070
39078
|
* —— 末行三颗按钮 ——
|
|
39071
|
-
* 上一步 / 下一步 /
|
|
39079
|
+
* 上一步 / 下一步 / 跳过都是气泡末行的文字按钮:盒型、sm 档几何、四态面、0.97 按压并换底、粗指针命中区与
|
|
39072
39080
|
* 强制色由家族配方按连接层投影的 data-xh-action-variant / -size 给出。这里只把公开槽桥接到矩阵之前
|
|
39073
39081
|
* (使用者槽 → 形态矩阵 → 家族缺省)与几何映射;内衬与圆角槽三颗共用。
|
|
39074
39082
|
*/
|
|
@@ -39087,7 +39095,7 @@
|
|
|
39087
39095
|
display: none;
|
|
39088
39096
|
}
|
|
39089
39097
|
|
|
39090
|
-
/* 下一步是整条引导的主线动作,显式 solid
|
|
39098
|
+
/* 下一步是整条引导的主线动作,显式 solid:底、字与影三组使用者槽桥到配方 solid 列之前 */
|
|
39091
39099
|
[data-scope='tour'][data-part='next-trigger'] {
|
|
39092
39100
|
--xh-action-bg-rest: var(--xh-tour-next-bg, var(--xh-_action-variant-bg-rest));
|
|
39093
39101
|
--xh-action-bg-hover: var(--xh-tour-next-bg-hover, var(--xh-_action-variant-bg-hover));
|
|
@@ -39106,7 +39114,7 @@
|
|
|
39106
39114
|
}
|
|
39107
39115
|
|
|
39108
39116
|
/*
|
|
39109
|
-
*
|
|
39117
|
+
* 关闭钮是气泡角落的单图标钮:正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
|
|
39110
39118
|
* 由家族配方给出——白面上走画布承载阶梯悬停 --xh-bg-subtle(100)→ 按下 --xh-bg-subtle-hover(200),
|
|
39111
39119
|
* 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与摆放;
|
|
39112
39120
|
* 静息前景取 muted 字色,悬停 / 按下 / 聚焦回到 fg-default。
|
|
@@ -39163,7 +39171,7 @@
|
|
|
39163
39171
|
}
|
|
39164
39172
|
|
|
39165
39173
|
/* 气泡限高之后只让正文让步:标题与上下步按钮滚出视线就点不到了。
|
|
39166
|
-
|
|
39174
|
+
模态气泡里的原生细条滚动面:细条由 reset 层统一给,滚到头不把页面一起带走;内容高度不动态变化,不写 gutter */
|
|
39167
39175
|
[data-scope='tour'][data-part='description'] {
|
|
39168
39176
|
flex: 1 1 auto;
|
|
39169
39177
|
min-block-size: 0;
|
|
@@ -39258,9 +39266,9 @@
|
|
|
39258
39266
|
所以只能按位置显式安放,不能靠自动流——自动流会把"往回搬"甩到目标面板的位置上 */
|
|
39259
39267
|
[data-scope='transfer'][data-part='root'] {
|
|
39260
39268
|
/* 条目外的字形(空态占位里作者塞的图标)按档取尺,缺省 md;条目内的字形由家族随 data-xh-collection-size
|
|
39261
|
-
下发,搬运钮内的按 Action Control icon
|
|
39269
|
+
下发,搬运钮内的按 Action Control icon 档取,勾选格里的勾按边长比例取 */
|
|
39262
39270
|
--xh-icon-size: var(--xh-transfer-icon-size, var(--xh-glyph-size-md));
|
|
39263
|
-
/*
|
|
39271
|
+
/* 两侧定高小列表的自绘条挂在根上:根是条子的定位盒(面板不定位),轨道底色关掉才不会在列表边缘糊出一条灰带 */
|
|
39264
39272
|
--xh-scrollbar-track-bg: transparent;
|
|
39265
39273
|
|
|
39266
39274
|
/* 尺寸档只换这五个私有槽,面板头、搜索框、条目与勾选格都从 root 继承它们,
|
|
@@ -39376,7 +39384,7 @@
|
|
|
39376
39384
|
min-inline-size: 0;
|
|
39377
39385
|
overflow: hidden;
|
|
39378
39386
|
color: var(--xh-transfer-panel-title-fg, var(--xh-fg-default));
|
|
39379
|
-
/* 面板标头是 Surface 内的标题:14 / 600
|
|
39387
|
+
/* 面板标头是 Surface 内的标题:14 / 600 */
|
|
39380
39388
|
font-size: var(--xh-transfer-panel-title-font-size, var(--xh-text-label-size));
|
|
39381
39389
|
font-weight: var(--xh-transfer-panel-title-font-weight, var(--xh-font-weight-semibold));
|
|
39382
39390
|
line-height: var(--xh-leading-none);
|
|
@@ -39521,7 +39529,7 @@
|
|
|
39521
39529
|
color: var(--xh-fg-disabled);
|
|
39522
39530
|
}
|
|
39523
39531
|
|
|
39524
|
-
/* 条目走 Collection Item 的 page
|
|
39532
|
+
/* 条目走 Collection Item 的 page 语境(页内持久集合):悬停 / 高亮 / 按下面(白底承载 hover 100 →
|
|
39525
39533
|
pressed 200)与勾选行的选中面(品牌淡底 + 淡底前景,selected+hover 20% / +pressed 28%)都由家族按
|
|
39526
39534
|
aria-selected / aria-disabled 给出,标记由行首的勾选方框承担;禁用面(字色降级、not-allowed、不换面)
|
|
39527
39535
|
也归家族。这里只把公开槽映射到桥接槽。
|
|
@@ -39684,7 +39692,7 @@
|
|
|
39684
39692
|
}
|
|
39685
39693
|
|
|
39686
39694
|
/* 全选格是原生按钮(三态经 aria-checked 上报,激活由平台负责),禁用同时打原生 disabled 与 data-disabled。
|
|
39687
|
-
它是「方框 +
|
|
39695
|
+
它是「方框 + 文案」的整行命中区:接 Action Control text 档、ghost 形态,悬停 / 按下 / 禁用面与过渡由家族给
|
|
39688
39696
|
(白底承载 hover 100 → pressed 200),按下只换面不缩放(--xh-action-scale-pressed: none),勾选回执落在方框上;
|
|
39689
39697
|
盒随内容收宽、高度取 xs 档的 24px 命中地板(方框 16px 居中其间),text 档的内距与最小宽度归零。
|
|
39690
39698
|
position 是给叠在方框上的那颗字形 ::after 当定位基准 */
|
|
@@ -39722,7 +39730,7 @@
|
|
|
39722
39730
|
|
|
39723
39731
|
/* 两颗搬运钮是只有字形的离散动作钮:接 Action Control 的 icon 档、outline 形态(中性描边、透明底,
|
|
39724
39732
|
白底承载 hover 100 → pressed 200,按下 0.97 并同时换底),盒、焦点环、粗指针热区与禁用面由家族给;
|
|
39725
|
-
此前的 raised
|
|
39733
|
+
此前的 raised 悬停抬升退役(边界只由描边承担)。这里只把使用者槽映射到桥接槽;
|
|
39726
39734
|
钮是正方盒,按 sm 档取一个控件高 */
|
|
39727
39735
|
[data-scope='transfer'][data-part='to-target-trigger'],
|
|
39728
39736
|
[data-scope='transfer'][data-part='to-source-trigger'] {
|
|
@@ -39859,8 +39867,8 @@
|
|
|
39859
39867
|
|
|
39860
39868
|
[data-scope='tree'][data-part='root'] {
|
|
39861
39869
|
/* 行外的字形(空态 / 在途占位里作者塞的图标)按档取尺,树没有 size 轴、固定 md;
|
|
39862
|
-
行内的由家族随 data-xh-collection-size
|
|
39863
|
-
|
|
39870
|
+
行内的由家族随 data-xh-collection-size 下发。这支只管作者放进行里的图标:
|
|
39871
|
+
树自绘的状态字形(展开方向、行尾对号与半选杠)是指示符,各部件在自己身上
|
|
39864
39872
|
把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺 */
|
|
39865
39873
|
--xh-icon-size: var(--xh-tree-icon-size, var(--xh-glyph-size-md));
|
|
39866
39874
|
|
|
@@ -39990,10 +39998,10 @@
|
|
|
39990
39998
|
}
|
|
39991
39999
|
|
|
39992
40000
|
/* 行:叶子与分支共用同一套盒子,两种行在视觉上必须齐平。
|
|
39993
|
-
行走 Collection Item 的
|
|
39994
|
-
|
|
39995
|
-
aria-selected / data-selected 与 aria-disabled / data-disabled
|
|
39996
|
-
布局保持 flex
|
|
40001
|
+
行走 Collection Item 的 overlay 语境,与树选择同一种选中读法:悬停 / 高亮 / 按下面(白底承载
|
|
40002
|
+
hover 100 → pressed 200)由家族给,选中不换面、不换字色,只在行尾亮对号,选中叠悬停 / 按下沿用同一条阶梯;
|
|
40003
|
+
家族按 aria-selected / data-selected 与 aria-disabled / data-disabled 给出,这里只把公开槽映射到桥接槽。
|
|
40004
|
+
布局保持 flex 而不用家族网格:一行里可以并排多个前导部件(箭头、拖拽把手)与作者自己的图标、
|
|
39997
40005
|
按钮,单列的 prefix 放不下;间距统一由行的 gap 给,家族按槽下发的外边距(--xh-collection-gap)归零 */
|
|
39998
40006
|
[data-scope='tree'][data-part='item'],
|
|
39999
40007
|
[data-scope='tree'][data-part='branch-control'] {
|
|
@@ -40004,18 +40012,18 @@
|
|
|
40004
40012
|
--xh-collection-radius: var(--xh-tree-row-radius, var(--xh-shape-control));
|
|
40005
40013
|
/* 作者的图标尺槽经桥接槽下发到行,家族缺省按 md 档 */
|
|
40006
40014
|
--xh-collection-glyph-size: var(--xh-tree-icon-size, var(--xh-_collection-glyph-size));
|
|
40007
|
-
/* 箭头 /
|
|
40015
|
+
/* 箭头 / 对号盒与叶子的占位同一把尺:指示符档,与同一行里的拖拽把手同走
|
|
40008
40016
|
--xh-control-indicator-size(comfortable 16 / compact 14)。不读家族按档下发的 --xh-icon-size——
|
|
40009
|
-
那支只管作者放进行里的图标,按图标档取的 20px 会比 16px
|
|
40017
|
+
那支只管作者放进行里的图标,按图标档取的 20px 会比 16px 的指示符盒大一圈 */
|
|
40010
40018
|
--xh-_tree-indicator-size: var(--xh-tree-indicator-size, var(--xh-control-indicator-size));
|
|
40011
40019
|
--xh-collection-fg-rest: var(--xh-tree-row-fg, var(--xh-fg-default));
|
|
40012
40020
|
--xh-collection-fg-hover: var(--xh-tree-row-fg, var(--xh-fg-default));
|
|
40013
40021
|
--xh-collection-fg-keyboard-highlight: var(--xh-tree-row-fg, var(--xh-fg-default));
|
|
40014
40022
|
--xh-collection-fg-pressed: var(--xh-tree-row-fg, var(--xh-fg-default));
|
|
40015
|
-
--xh-collection-fg-selected: var(--xh-tree-row-fg-selected, var(--xh-fg-
|
|
40016
|
-
--xh-collection-fg-selected-hover: var(--xh-tree-row-fg-selected, var(--xh-fg-
|
|
40017
|
-
--xh-collection-fg-selected-highlight: var(--xh-tree-row-fg-selected, var(--xh-fg-
|
|
40018
|
-
--xh-collection-fg-selected-pressed: var(--xh-tree-row-fg-selected, var(--xh-fg-
|
|
40023
|
+
--xh-collection-fg-selected: var(--xh-tree-row-fg-selected, var(--xh-tree-row-fg, var(--xh-fg-default)));
|
|
40024
|
+
--xh-collection-fg-selected-hover: var(--xh-tree-row-fg-selected, var(--xh-tree-row-fg, var(--xh-fg-default)));
|
|
40025
|
+
--xh-collection-fg-selected-highlight: var(--xh-tree-row-fg-selected, var(--xh-tree-row-fg, var(--xh-fg-default)));
|
|
40026
|
+
--xh-collection-fg-selected-pressed: var(--xh-tree-row-fg-selected, var(--xh-tree-row-fg, var(--xh-fg-default)));
|
|
40019
40027
|
--xh-collection-font-weight-selected: var(--xh-tree-row-selected-font-weight, var(--xh-font-weight-regular));
|
|
40020
40028
|
--xh-collection-font-weight-selected-hover: var(--xh-tree-row-selected-font-weight, var(--xh-font-weight-regular));
|
|
40021
40029
|
--xh-collection-font-weight-selected-highlight: var(--xh-tree-row-selected-font-weight, var(--xh-font-weight-regular));
|
|
@@ -40023,11 +40031,13 @@
|
|
|
40023
40031
|
--xh-collection-bg-hover: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
|
|
40024
40032
|
--xh-collection-bg-keyboard-highlight: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
|
|
40025
40033
|
--xh-collection-bg-pressed: var(--xh-tree-row-bg-pressed, var(--xh-bg-subtle-hover));
|
|
40026
|
-
--xh-collection-bg-selected: var(--xh-tree-row-bg-
|
|
40034
|
+
--xh-collection-bg-selected-hover: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
|
|
40035
|
+
--xh-collection-bg-selected-highlight: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
|
|
40036
|
+
--xh-collection-bg-selected-pressed: var(--xh-tree-row-bg-pressed, var(--xh-bg-subtle-hover));
|
|
40027
40037
|
/* data-highlighted 跟的是连接层记的焦点行(指针点选也会落焦):只换面,焦点环在 :focus-visible 下再接回 */
|
|
40028
40038
|
--xh-collection-outline-keyboard-highlight: transparent;
|
|
40029
40039
|
--xh-collection-outline-selected-highlight: transparent;
|
|
40030
|
-
/*
|
|
40040
|
+
/* 行尾对号:槽按本部件取名(item-check-fg),标记部件的旧槽留在兜底位 */
|
|
40031
40041
|
--xh-collection-indicator-fg-rest: var(--xh-tree-item-check-fg, var(--xh-tree-item-indicator-fg, var(--xh-fg-brand)));
|
|
40032
40042
|
--xh-collection-indicator-fg-checked: var(--xh-tree-item-check-fg, var(--xh-tree-item-indicator-fg, var(--xh-fg-brand)));
|
|
40033
40043
|
--xh-collection-indicator-fg-selected: var(--xh-tree-item-check-fg, var(--xh-tree-item-indicator-fg, var(--xh-fg-brand)));
|
|
@@ -40050,12 +40060,9 @@
|
|
|
40050
40060
|
box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
|
|
40051
40061
|
}
|
|
40052
40062
|
|
|
40053
|
-
/*
|
|
40054
|
-
|
|
40055
|
-
|
|
40056
|
-
[data-orientation='vertical'] > [data-scope='tree'][data-part='item']:not(
|
|
40057
|
-
:has(> [data-scope='tree'][data-part='item-indicator'])
|
|
40058
|
-
) {
|
|
40063
|
+
/* 分支行的首格是展开箭头,叶子行没有这一格,由行盒自己补出来(对号在行尾,不再替叶子顶这一格),
|
|
40064
|
+
否则叶子会比同级分支往行首缩一格,层级关系读不出来。占位宽度与箭头盒同一把尺 */
|
|
40065
|
+
[data-orientation='vertical'] > [data-scope='tree'][data-part='item'] {
|
|
40059
40066
|
padding-inline-start: calc(
|
|
40060
40067
|
var(--xh-tree-row-px, var(--xh-control-px-md)) +
|
|
40061
40068
|
var(--xh-_tree-indicator-size) +
|
|
@@ -40086,76 +40093,6 @@
|
|
|
40086
40093
|
--xh-collection-cursor-rest: not-allowed;
|
|
40087
40094
|
}
|
|
40088
40095
|
|
|
40089
|
-
/* 勾选把手:勾选态只画在它身上,不碰行底色——底色那条通道归高亮 */
|
|
40090
|
-
[data-scope='tree'][data-part='item-checkbox'],
|
|
40091
|
-
[data-scope='tree'][data-part='branch-checkbox'] {
|
|
40092
|
-
/* 方框里的勾按边长的比例取尺(与 Checkbox 同一比例),不吃家族按档下发的行内字形尺 */
|
|
40093
|
-
--xh-icon-size: calc(var(--xh-tree-checkbox-size, var(--xh-control-indicator-size)) * 0.75);
|
|
40094
|
-
|
|
40095
|
-
display: inline-grid;
|
|
40096
|
-
place-items: center;
|
|
40097
|
-
flex: none;
|
|
40098
|
-
inline-size: var(--xh-tree-checkbox-size, var(--xh-control-indicator-size));
|
|
40099
|
-
block-size: var(--xh-tree-checkbox-size, var(--xh-control-indicator-size));
|
|
40100
|
-
border: var(--xh-stroke-thin) solid var(--xh-tree-checkbox-border, var(--xh-border-control));
|
|
40101
|
-
border-radius: var(--xh-tree-checkbox-radius, var(--xh-shape-inset));
|
|
40102
|
-
background: var(--xh-tree-checkbox-bg, transparent);
|
|
40103
|
-
color: var(--xh-tree-checkbox-fg, var(--xh-fg-on-brand));
|
|
40104
|
-
}
|
|
40105
|
-
|
|
40106
|
-
[data-scope='tree'][data-part='item-checkbox'][data-selected],
|
|
40107
|
-
[data-scope='tree'][data-part='branch-checkbox'][data-selected] {
|
|
40108
|
-
border-color: var(--xh-tree-checkbox-border-checked, var(--xh-bg-brand));
|
|
40109
|
-
background: var(--xh-tree-checkbox-bg-checked, var(--xh-bg-brand));
|
|
40110
|
-
}
|
|
40111
|
-
|
|
40112
|
-
/* 面是实心的,环色与面同族,画在面里就看不出来;环改取面自己的前景色——
|
|
40113
|
-
那一族色本来就要在这块面上把字读清楚,与面的对比是按可读性定的。
|
|
40114
|
-
勾满与半选铺的是同一块实心底,两态一起收 */
|
|
40115
|
-
[data-scope='tree'][data-part='item-checkbox'][data-selected]:focus-visible,
|
|
40116
|
-
[data-scope='tree'][data-part='item-checkbox'][data-indeterminate]:focus-visible,
|
|
40117
|
-
[data-scope='tree'][data-part='branch-checkbox'][data-selected]:focus-visible,
|
|
40118
|
-
[data-scope='tree'][data-part='branch-checkbox'][data-indeterminate]:focus-visible {
|
|
40119
|
-
--xh-_ring-color: currentColor;
|
|
40120
|
-
}
|
|
40121
|
-
|
|
40122
|
-
/* 半选:级联勾选下「子树勾了一部分」的第三态,此前发了 data-indeterminate 却没人画 */
|
|
40123
|
-
[data-scope='tree'][data-part='item-checkbox'][data-indeterminate]:not([data-selected]),
|
|
40124
|
-
[data-scope='tree'][data-part='branch-checkbox'][data-indeterminate]:not([data-selected]) {
|
|
40125
|
-
border-color: var(--xh-tree-checkbox-border-checked, var(--xh-bg-brand));
|
|
40126
|
-
background: var(--xh-tree-checkbox-bg-checked, var(--xh-bg-brand));
|
|
40127
|
-
}
|
|
40128
|
-
|
|
40129
|
-
/* 没写内容就由皮肤画;作者往把手里塞了自己的图形,这条规则即不命中 */
|
|
40130
|
-
[data-scope='tree'][data-part='item-checkbox'][data-selected]:empty::before,
|
|
40131
|
-
[data-scope='tree'][data-part='branch-checkbox'][data-selected]:empty::before {
|
|
40132
|
-
content: '';
|
|
40133
|
-
display: inline-block;
|
|
40134
|
-
inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
|
|
40135
|
-
block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
|
|
40136
|
-
vertical-align: var(--xh-glyph-baseline-shift);
|
|
40137
|
-
background-color: currentColor;
|
|
40138
|
-
-webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
|
|
40139
|
-
mask: var(--xh-glyph-mark-check) center / contain no-repeat;
|
|
40140
|
-
}
|
|
40141
|
-
|
|
40142
|
-
[data-scope='tree'][data-part='item-checkbox'][data-indeterminate]:not([data-selected]):empty::before,
|
|
40143
|
-
[data-scope='tree'][data-part='branch-checkbox'][data-indeterminate]:not([data-selected]):empty::before {
|
|
40144
|
-
content: '';
|
|
40145
|
-
display: inline-block;
|
|
40146
|
-
inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
|
|
40147
|
-
block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
|
|
40148
|
-
vertical-align: var(--xh-glyph-baseline-shift);
|
|
40149
|
-
background-color: currentColor;
|
|
40150
|
-
-webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
|
|
40151
|
-
mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
|
|
40152
|
-
}
|
|
40153
|
-
|
|
40154
|
-
[data-scope='tree'][data-part='item-checkbox'][data-disabled],
|
|
40155
|
-
[data-scope='tree'][data-part='branch-checkbox'][data-disabled] {
|
|
40156
|
-
border-color: var(--xh-tree-checkbox-border-disabled, var(--xh-border-default));
|
|
40157
|
-
}
|
|
40158
|
-
|
|
40159
40096
|
[data-scope='tree'][data-part='item-text'],
|
|
40160
40097
|
[data-scope='tree'][data-part='branch-text'] {
|
|
40161
40098
|
flex: 1;
|
|
@@ -40166,14 +40103,16 @@
|
|
|
40166
40103
|
text-overflow: ellipsis;
|
|
40167
40104
|
}
|
|
40168
40105
|
|
|
40169
|
-
/*
|
|
40170
|
-
|
|
40106
|
+
/* 选中对号落在行尾,与树选择同位:作者在行里摆在哪儿都排到最后,
|
|
40107
|
+
行尾那一格(item-suffix)在它之前;正文吃满剩余宽度,对号因此贴着行的末端。
|
|
40108
|
+
未选中时占位不塌,切换选中不引起行宽抖动。盒尺取指示符档;盒里的对号是指示符,
|
|
40171
40109
|
在自己身上把 --xh-icon-size 改接到盒的尺,兜底对号与作者塞进盒里的 XhIcon 读同一把尺、与盒同边长 */
|
|
40172
40110
|
[data-scope='tree'][data-part='item-indicator'] {
|
|
40173
40111
|
--xh-icon-size: var(--xh-_tree-indicator-size);
|
|
40174
40112
|
|
|
40175
40113
|
display: inline-flex;
|
|
40176
40114
|
flex: none;
|
|
40115
|
+
order: 1;
|
|
40177
40116
|
align-items: center;
|
|
40178
40117
|
justify-content: center;
|
|
40179
40118
|
inline-size: var(--xh-_tree-indicator-size);
|
|
@@ -40183,9 +40122,20 @@
|
|
|
40183
40122
|
display: none;
|
|
40184
40123
|
}
|
|
40185
40124
|
|
|
40125
|
+
/* 家族只按行的 aria-selected 显示对号:分支行的 aria-selected 在 branch 上、半选没有选中语义,
|
|
40126
|
+
这两档按标记自身的 data-selected / data-indeterminate 显形 */
|
|
40127
|
+
[data-scope='tree'][data-part='item-indicator']:is([data-selected], [data-indeterminate]) {
|
|
40128
|
+
visibility: visible;
|
|
40129
|
+
}
|
|
40130
|
+
|
|
40131
|
+
/* 分支行的禁用不在行的 aria-disabled 上(那在 branch 上),标记按自身的 data-disabled 降级 */
|
|
40132
|
+
[data-scope='tree'][data-part='item-indicator'][data-disabled] {
|
|
40133
|
+
color: var(--xh-fg-disabled);
|
|
40134
|
+
}
|
|
40135
|
+
|
|
40186
40136
|
/* 展开箭头与方向指示符:两者都可能被作者用作"点这里展开"的把手,
|
|
40187
40137
|
所以尺寸与叶子的勾选标记一致,两种行的文字起点才对得齐。
|
|
40188
|
-
盒里的 chevron
|
|
40138
|
+
盒里的 chevron 是指示符:与盒同边长,--xh-icon-size 在自己身上改接到盒的尺 */
|
|
40189
40139
|
[data-scope='tree'][data-part='branch-trigger'],
|
|
40190
40140
|
[data-scope='tree'][data-part='branch-indicator'] {
|
|
40191
40141
|
--xh-icon-size: var(--xh-_tree-indicator-size);
|
|
@@ -40281,6 +40231,11 @@
|
|
|
40281
40231
|
mask: var(--xh-glyph-mark-check) center / contain no-repeat;
|
|
40282
40232
|
}
|
|
40283
40233
|
|
|
40234
|
+
[data-scope='tree'][data-part='item-indicator'][data-indeterminate]:not([data-selected]):empty::before {
|
|
40235
|
+
-webkit-mask-image: var(--xh-glyph-mark-minus);
|
|
40236
|
+
mask-image: var(--xh-glyph-mark-minus);
|
|
40237
|
+
}
|
|
40238
|
+
|
|
40284
40239
|
/* —— 节点拖拽搬家 —— */
|
|
40285
40240
|
/* 整行都是拖动源,光标换成抓手告诉人这一行按得动。
|
|
40286
40241
|
这条不写 touch-action:整行关掉纵向手势,树容器自己就滚不动了;
|
|
@@ -40386,7 +40341,7 @@
|
|
|
40386
40341
|
禁用的节点从来不做落点,这一段因此不会漏画任何一处高亮 */
|
|
40387
40342
|
[data-scope='tree'][data-part='item'][data-drop='inside']:not([data-disabled]),
|
|
40388
40343
|
[data-scope='tree'][data-part='branch-control'][data-drop='inside']:not([data-disabled]) {
|
|
40389
|
-
/* 落点不是选中:品牌淡底专属选中 /
|
|
40344
|
+
/* 落点不是选中:品牌淡底专属选中 / 当前,落点面取悬停之上一档的中性面 */
|
|
40390
40345
|
background: var(--xh-tree-drop-inside-bg, var(--xh-bg-subtle-hover));
|
|
40391
40346
|
box-shadow: inset 0 0 0 var(--xh-tree-drop-line, var(--xh-stroke-thick))
|
|
40392
40347
|
var(--xh-tree-drop-fg, var(--xh-border-control-focus));
|
|
@@ -40405,11 +40360,11 @@
|
|
|
40405
40360
|
border: 0;
|
|
40406
40361
|
}
|
|
40407
40362
|
|
|
40408
|
-
|
|
40409
|
-
|
|
40410
|
-
[data-scope='tree'][data-part='item-
|
|
40411
|
-
|
|
40412
|
-
|
|
40363
|
+
@media print {
|
|
40364
|
+
/* 打印默认丢底色,而对号与半选杠是遮罩出来的一块底色:行本就不换面,丢了它选中在纸上就没了踪影 */
|
|
40365
|
+
[data-scope='tree'][data-part='item-indicator'] {
|
|
40366
|
+
print-color-adjust: exact;
|
|
40367
|
+
}
|
|
40413
40368
|
}
|
|
40414
40369
|
|
|
40415
40370
|
/* styles/tree-select.css */
|
|
@@ -40474,7 +40429,7 @@
|
|
|
40474
40429
|
[data-scope='tree-select']:is([data-part='root'], [data-part='positioner']) {
|
|
40475
40430
|
/* 作者塞进触发器指示符槽 / 清除钮的图标跟着尺寸档走,与皮肤画的兜底字形同一把尺。这支只管作者放进
|
|
40476
40431
|
盒与行里的图标:面板里自绘的状态字形(展开方向、行尾对号与半选杠)是指示符,各部件在自己身上
|
|
40477
|
-
把 --xh-icon-size 改接到 --xh-control-indicator-*
|
|
40432
|
+
把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺 */
|
|
40478
40433
|
--xh-icon-size: var(--xh-tree-select-icon-size, var(--xh-glyph-size-md));
|
|
40479
40434
|
|
|
40480
40435
|
/* 尺寸档只换这几个私有槽,盒与树里的行都从这两处继承它们,换档不必给每个部件各写一条选择器;
|
|
@@ -40732,8 +40687,6 @@
|
|
|
40732
40687
|
|
|
40733
40688
|
[data-scope='tree-select'][data-part='content'][data-state='open'] {
|
|
40734
40689
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
40735
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
40736
|
-
will-change: opacity, translate;
|
|
40737
40690
|
}
|
|
40738
40691
|
|
|
40739
40692
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -40957,7 +40910,7 @@
|
|
|
40957
40910
|
/* 勾选标记落在家族网格的 indicator 列;未选中时占位不塌,切换选中不引起行宽抖动。
|
|
40958
40911
|
尺寸槽按各自部件取名:行内的勾与展开箭头分别是 item- 与 branch- 段,
|
|
40959
40912
|
触发器上那枚箭头是 --xh-tree-select-indicator-*,三处各调各的。
|
|
40960
|
-
盒里的对号 /
|
|
40913
|
+
盒里的对号 / 半选杠是指示符:在自己身上把 --xh-icon-size 改接到盒的尺,兜底字形与作者
|
|
40961
40914
|
塞进盒里的 XhIcon 读同一把尺、与盒同边长;不读家族按档下发到行的 --xh-icon-size——那支只管
|
|
40962
40915
|
作者放进行里的图标,按图标档取的 20px 会比 16 / 14 的盒还大 */
|
|
40963
40916
|
[data-scope='tree-select'][data-part='item-indicator'] {
|
|
@@ -40987,7 +40940,7 @@
|
|
|
40987
40940
|
|
|
40988
40941
|
/* 展开箭头与方向指示符:两者都可能被作者用作「点这里展开」的把手,
|
|
40989
40942
|
所以尺寸与叶子的勾选标记一致,两种行的文字起点才对得齐。
|
|
40990
|
-
盒里的 chevron
|
|
40943
|
+
盒里的 chevron 是指示符:与盒同边长,--xh-icon-size 在自己身上改接到盒的尺 */
|
|
40991
40944
|
[data-scope='tree-select'][data-part='branch-trigger'],
|
|
40992
40945
|
[data-scope='tree-select'][data-part='branch-indicator'] {
|
|
40993
40946
|
--xh-icon-size: var(--xh-tree-select-branch-indicator-size, var(--xh-control-indicator-size));
|
|
@@ -41143,7 +41096,7 @@
|
|
|
41143
41096
|
overflow-x: auto;
|
|
41144
41097
|
overflow-y: auto;
|
|
41145
41098
|
/* 页内结构容器,滚到尽头把剩余的滚动交给外层(overscroll-behavior 保持 auto):
|
|
41146
|
-
contain 只给浮层、模态 body
|
|
41099
|
+
contain 只给浮层、模态 body 与粘底视口。滚动条走 reset 层的原生细条 */
|
|
41147
41100
|
}
|
|
41148
41101
|
|
|
41149
41102
|
/* 单向列表把另一条轴关掉:那一向既没有内容也没有位移,能滚就成了滚不回来的暗格 */
|