@q1travel/design-system 0.4.0 → 0.5.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/.agents/skills/product-design/SKILL.md +25 -48
- package/.agents/skills/product-design/references/coverage-gaps.md +1 -0
- package/.agents/skills/product-design/references/review-component.md +32 -0
- package/.agents/skills/product-design/references/surfaces-overlays.md +4 -9
- package/.agents/skills/product-design/references/surfaces.md +10 -11
- package/README.md +2 -2
- package/contracts/button-api-compatibility.md +63 -0
- package/contracts/interface-guidelines.md +18 -0
- package/dist-pkg/design-system.d.ts +84 -10
- package/dist-pkg/design-system.js +1158 -1081
- package/dist-pkg/style.css +119 -102
- package/package.json +5 -3
- package/.agents/skills/product-design/references/review-geist.md +0 -94
package/dist-pkg/style.css
CHANGED
|
@@ -111,9 +111,9 @@
|
|
|
111
111
|
--q1-color-brand-preview-dark-fg: #ededed;
|
|
112
112
|
--q1-color-mask-visible: #ffffff;
|
|
113
113
|
--q1-color-mask-opaque: #000000;
|
|
114
|
-
/*
|
|
114
|
+
/* 阴影基色恒黑(对标外部参考):不随主题翻转,暗色下阴影不再泛白晕。 */
|
|
115
115
|
--q1-color-shadow: #000000;
|
|
116
|
-
/*
|
|
116
|
+
/* 浮层边框(对标外部参考):亮色=普通边框;暗色=白 14% 发丝 ring——黑影在黑底不可见,浮层清晰度由它承担。 */
|
|
117
117
|
--q1-color-border-overlay: var(--q1-color-gray-400);
|
|
118
118
|
--q1-color-bg-canvas: var(--q1-color-background-100);
|
|
119
119
|
--q1-color-bg-subtle: var(--q1-color-background-200);
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
:root[data-theme='dark'] {
|
|
212
|
-
/*
|
|
212
|
+
/* 画布抬灰(对标外部参考暗色 #0a0a0a):表面自带浮起感,纯黑仅留给 background-200 底壳。 */
|
|
213
213
|
--q1-color-background-100: #0a0a0a;
|
|
214
214
|
--q1-color-background-200: #000000;
|
|
215
215
|
--q1-color-gray-100: #1a1a1a;
|
|
@@ -316,7 +316,7 @@
|
|
|
316
316
|
--q1-color-bg-subtle: var(--q1-color-gray-100);
|
|
317
317
|
--q1-color-bg-panel: var(--q1-color-background-100);
|
|
318
318
|
--q1-color-border: var(--q1-color-gray-200);
|
|
319
|
-
/*
|
|
319
|
+
/* 降档(对标外部参考暗色最亮边框 rgb46):控件描边不再泛白。 */
|
|
320
320
|
--q1-color-border-strong: var(--q1-color-gray-400);
|
|
321
321
|
--q1-color-border-overlay: color-mix(in srgb, #ffffff 14%, transparent);
|
|
322
322
|
--q1-color-text-primary: var(--q1-color-gray-1000);
|
|
@@ -371,7 +371,7 @@
|
|
|
371
371
|
text-decoration: none;
|
|
372
372
|
}
|
|
373
373
|
|
|
374
|
-
.button:hover {
|
|
374
|
+
.button:not(:disabled):not([aria-disabled='true']):hover {
|
|
375
375
|
border-color: var(--q1-color-text-secondary);
|
|
376
376
|
background: var(--q1-color-bg-subtle);
|
|
377
377
|
}
|
|
@@ -387,12 +387,12 @@
|
|
|
387
387
|
color: var(--q1-color-action-on-primary);
|
|
388
388
|
}
|
|
389
389
|
|
|
390
|
-
.button--primary:hover {
|
|
390
|
+
.button--primary:not(:disabled):not([aria-disabled='true']):hover {
|
|
391
391
|
border-color: transparent;
|
|
392
392
|
background: var(--q1-color-action-primary-hover);
|
|
393
393
|
}
|
|
394
394
|
|
|
395
|
-
.button--primary:active {
|
|
395
|
+
.button--primary:not(:disabled):not([aria-disabled='true']):active {
|
|
396
396
|
background: var(--q1-color-action-primary-press);
|
|
397
397
|
}
|
|
398
398
|
|
|
@@ -424,6 +424,12 @@
|
|
|
424
424
|
animation: button-spin 0.7s linear infinite;
|
|
425
425
|
}
|
|
426
426
|
|
|
427
|
+
.button__affix {
|
|
428
|
+
display: inline-flex;
|
|
429
|
+
flex: none;
|
|
430
|
+
align-items: center;
|
|
431
|
+
}
|
|
432
|
+
|
|
427
433
|
.button--sm {
|
|
428
434
|
min-height: 32px;
|
|
429
435
|
padding: 0 var(--q1-space-3);
|
|
@@ -457,7 +463,7 @@
|
|
|
457
463
|
border-radius: 50%;
|
|
458
464
|
}
|
|
459
465
|
|
|
460
|
-
/* Rounded
|
|
466
|
+
/* Rounded(对标外部参考 Rounded,营销页/落地页强调用):药丸形 + 柔和抬起阴影(恒黑 shadow token,暗色不泛白)。 */
|
|
461
467
|
.button--rounded {
|
|
462
468
|
border-radius: 9999px;
|
|
463
469
|
box-shadow:
|
|
@@ -485,7 +491,7 @@
|
|
|
485
491
|
line-height: 1;
|
|
486
492
|
}
|
|
487
493
|
|
|
488
|
-
/* —— 统一着色配方 tone-surface
|
|
494
|
+
/* —— 统一着色配方 tone-surface(对标外部参考:oklch 按 hue 参数化,浅底/边框/深文,暗色反相)——
|
|
489
495
|
Banner/Note/ProjectBanner/状态块共享同一套,消除各自 color-mix 配方漂移;主题自适应,消费方无需 dark 块。 */
|
|
490
496
|
:root {
|
|
491
497
|
--q1-tone-bg-info: oklch(from var(--q1-color-status-info) 0.96 0.03 h);
|
|
@@ -546,10 +552,10 @@
|
|
|
546
552
|
color: var(--q1-color-status-danger);
|
|
547
553
|
}
|
|
548
554
|
|
|
549
|
-
/*
|
|
555
|
+
/* 带前后缀的输入外框(对标外部参考实测结构):flex 让前后缀占真实布局空间,任意宽度的
|
|
550
556
|
字符串/图标几何上都不可能压到输入文字;边框/圆角/焦点环/校验/禁用整体上移到外框,
|
|
551
557
|
内部 input 去皮拉伸填满。绝对定位 + 固定内边距的旧几何只装得下 16px 图标,已废弃。
|
|
552
|
-
overflow 裁掉病态窄容器下前后缀(flex:none
|
|
558
|
+
overflow 裁掉病态窄容器下前后缀(flex:none 不收缩)顶出圆角的溢出,外部参考外框同款;
|
|
553
559
|
焦点环/错误晕是 box-shadow,不受 overflow 裁剪。 */
|
|
554
560
|
.input-control {
|
|
555
561
|
display: flex;
|
|
@@ -622,7 +628,7 @@
|
|
|
622
628
|
background: transparent;
|
|
623
629
|
}
|
|
624
630
|
|
|
625
|
-
/* 前后缀默认带灰块底色 + 朝向 input 一侧的 1px
|
|
631
|
+
/* 前后缀默认带灰块底色 + 朝向 input 一侧的 1px 分隔线(外部参考默认极性,实测块 0/12px 内边距、
|
|
626
632
|
拉满外框高度);禁用态下外框同为 bg-subtle,块与外框同色成扁平、仅剩分隔线,属本品牌层取舍。 */
|
|
627
633
|
.input-control__prefix {
|
|
628
634
|
flex: none;
|
|
@@ -669,7 +675,7 @@
|
|
|
669
675
|
padding-right: 8px;
|
|
670
676
|
}
|
|
671
677
|
|
|
672
|
-
/*
|
|
678
|
+
/* 药丸形(对标外部参考 rounded,实测 9999px 级 pill 半径);双类压过 :has 尺寸档的圆角设定。 */
|
|
673
679
|
.input-control.input-control--rounded {
|
|
674
680
|
border-radius: 9999px;
|
|
675
681
|
}
|
|
@@ -700,7 +706,7 @@
|
|
|
700
706
|
padding-right: 36px;
|
|
701
707
|
}
|
|
702
708
|
|
|
703
|
-
/*
|
|
709
|
+
/* 字段尺寸档(对标外部参考:xs24/sm32/md40/lg48;md=基础 40 不设类)。 */
|
|
704
710
|
.form-control--xs {
|
|
705
711
|
min-height: 24px;
|
|
706
712
|
border-radius: var(--q1-radius-1);
|
|
@@ -724,7 +730,7 @@
|
|
|
724
730
|
}
|
|
725
731
|
|
|
726
732
|
/* Textarea 是多行控件,通用尺寸档的单行 min-height/padding 不适用,这里单独覆盖
|
|
727
|
-
|
|
733
|
+
(外部参考官方 xSmall/small/mediumSmall/large 未给出具体像素值,数值按本库既有体系自定)。 */
|
|
728
734
|
.form-control--textarea.form-control--xs {
|
|
729
735
|
min-height: 64px;
|
|
730
736
|
padding: 6px 8px;
|
|
@@ -822,14 +828,14 @@
|
|
|
822
828
|
box-shadow: var(--q1-shadow-focus);
|
|
823
829
|
}
|
|
824
830
|
|
|
825
|
-
/*
|
|
831
|
+
/* 错误态(对标外部参考):纯红 1px 环 + 红 16% 的 4px 外晕,字段家族共享。 */
|
|
826
832
|
.form-field--error .form-control,
|
|
827
833
|
.form-control[aria-invalid='true'] {
|
|
828
834
|
border-color: var(--q1-color-status-danger);
|
|
829
835
|
box-shadow: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
|
|
830
836
|
}
|
|
831
837
|
|
|
832
|
-
/*
|
|
838
|
+
/* 禁用态(对标外部参考):底色抬灰而非降透明度;opacity:1 归零 Chrome UA 对禁用控件的默认 0.7。 */
|
|
833
839
|
.form-control:disabled {
|
|
834
840
|
background: var(--q1-color-bg-subtle);
|
|
835
841
|
color: var(--q1-color-text-muted);
|
|
@@ -841,7 +847,7 @@
|
|
|
841
847
|
.control-option {
|
|
842
848
|
position: relative;
|
|
843
849
|
display: grid;
|
|
844
|
-
/* 盒 16px 统一(Checkbox 复核拍板:与 Radio 家族一致 +
|
|
850
|
+
/* 盒 16px 统一(Checkbox 复核拍板:与 Radio 家族一致 + 对齐外部参考实测 16×16)。 */
|
|
845
851
|
grid-template-columns: 16px minmax(0, 1fr);
|
|
846
852
|
align-items: start;
|
|
847
853
|
gap: var(--q1-space-3);
|
|
@@ -875,7 +881,7 @@
|
|
|
875
881
|
border-radius: var(--q1-radius-1);
|
|
876
882
|
background: var(--q1-color-bg-panel);
|
|
877
883
|
transform: translateY(1px);
|
|
878
|
-
/*
|
|
884
|
+
/* 状态切换过渡(外部参考实测 0.2s cubic-bezier(0.4,0,0.2,1));颜色过渡非运动类,不需 reduced-motion 门控。 */
|
|
879
885
|
transition:
|
|
880
886
|
border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
|
881
887
|
background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -883,7 +889,7 @@
|
|
|
883
889
|
|
|
884
890
|
.control-option__visual--radio {
|
|
885
891
|
border-radius: 999px;
|
|
886
|
-
/* Radio
|
|
892
|
+
/* Radio 对标外部参考:16px 控件、未选中环用更亮的 muted 灰(外部参考 143 档);环色 0.2s 过渡(实测配方)。 */
|
|
887
893
|
width: 16px;
|
|
888
894
|
height: 16px;
|
|
889
895
|
border-color: var(--q1-color-text-muted);
|
|
@@ -892,7 +898,7 @@
|
|
|
892
898
|
background 0.2s cubic-bezier(0.4, 0, 1, 1);
|
|
893
899
|
}
|
|
894
900
|
|
|
895
|
-
/* 圆点常驻、scale 0→1
|
|
901
|
+
/* 圆点常驻、scale 0→1 切换(对标外部参考实测:0.15s 同 bezier),点击/切换时有生长动效。 */
|
|
896
902
|
.control-option__visual--radio::after {
|
|
897
903
|
content: '';
|
|
898
904
|
position: absolute;
|
|
@@ -911,7 +917,7 @@
|
|
|
911
917
|
}
|
|
912
918
|
}
|
|
913
919
|
|
|
914
|
-
/* Checkbox 选中改前景单色(拍板与 Radio
|
|
920
|
+
/* Checkbox 选中改前景单色(拍板与 Radio 家族统一,对齐外部参考实测):text-primary 填充 + 面板色反色勾,
|
|
915
921
|
两主题自适应;「选中」是状态非动作,不占用 indigo 动作色。 */
|
|
916
922
|
.control-option input:checked + .control-option__visual {
|
|
917
923
|
border-color: var(--q1-color-text-primary);
|
|
@@ -932,7 +938,7 @@
|
|
|
932
938
|
transform: rotate(45deg);
|
|
933
939
|
}
|
|
934
940
|
|
|
935
|
-
/* 半选(indeterminate
|
|
941
|
+
/* 半选(indeterminate):视觉态非第三值,由父级逻辑驱动;填充同选中,标记为居中横杠(外部参考同形)。 */
|
|
936
942
|
.control-option input[type='checkbox']:indeterminate + .control-option__visual {
|
|
937
943
|
border-color: var(--q1-color-text-primary);
|
|
938
944
|
background: var(--q1-color-text-primary);
|
|
@@ -949,7 +955,7 @@
|
|
|
949
955
|
content: '';
|
|
950
956
|
}
|
|
951
957
|
|
|
952
|
-
/* Radio 选中改前景 outline
|
|
958
|
+
/* Radio 选中改前景 outline 风(对标外部参考:text-primary 环 + 8px 点、无填充——它未用品牌色,
|
|
953
959
|
两主题自适应;Checkbox 待其复核实测后再统一)。 */
|
|
954
960
|
.control-option input[type='radio']:checked + .control-option__visual {
|
|
955
961
|
border-color: var(--q1-color-text-primary);
|
|
@@ -960,7 +966,7 @@
|
|
|
960
966
|
transform: scale(1);
|
|
961
967
|
}
|
|
962
968
|
|
|
963
|
-
/* Radio
|
|
969
|
+
/* Radio 禁用改色彩降级(对标外部参考:全灰、不降透明度)。 */
|
|
964
970
|
.control-option input[type='radio']:disabled + .control-option__visual {
|
|
965
971
|
opacity: 1;
|
|
966
972
|
border-color: var(--q1-color-gray-500);
|
|
@@ -987,7 +993,7 @@
|
|
|
987
993
|
box-shadow: var(--q1-shadow-focus);
|
|
988
994
|
}
|
|
989
995
|
|
|
990
|
-
/* Checkbox 禁用改色彩降级(与 Radio
|
|
996
|
+
/* Checkbox 禁用改色彩降级(与 Radio 定稿结论一致、对齐外部参考实测:全灰锚定、不降透明度——
|
|
991
997
|
之前的 opacity 0.56 衰减是 Breadcrumbs/Radio 复核时已定性的违规模式,这里补齐家族最后一块。 */
|
|
992
998
|
.control-option input:disabled + .control-option__visual,
|
|
993
999
|
.control-option input:disabled ~ .control-option__body {
|
|
@@ -1021,7 +1027,7 @@
|
|
|
1021
1027
|
}
|
|
1022
1028
|
|
|
1023
1029
|
.control-option__label {
|
|
1024
|
-
/*
|
|
1030
|
+
/* 排版跟外部参考实测(13/400);标题与描述的层级由颜色区分。 */
|
|
1025
1031
|
font-size: var(--q1-font-size-label-13);
|
|
1026
1032
|
font-weight: var(--q1-font-weight-regular);
|
|
1027
1033
|
line-height: var(--q1-line-height-label-13);
|
|
@@ -1079,7 +1085,7 @@
|
|
|
1079
1085
|
.menu__trigger:hover {
|
|
1080
1086
|
background: color-mix(in srgb, var(--q1-color-text-primary) 4%, transparent);
|
|
1081
1087
|
}
|
|
1082
|
-
/* 图标-only
|
|
1088
|
+
/* 图标-only 触发器(对标外部参考 Custom trigger:可访问名称经 aria-label 暴露)。 */
|
|
1083
1089
|
.menu__trigger--icon {
|
|
1084
1090
|
width: 32px;
|
|
1085
1091
|
height: 32px;
|
|
@@ -1090,7 +1096,7 @@
|
|
|
1090
1096
|
outline: none;
|
|
1091
1097
|
box-shadow: var(--q1-shadow-focus);
|
|
1092
1098
|
}
|
|
1093
|
-
/*
|
|
1099
|
+
/* 实测外部参考:容器 padding 8px(space-2)/radius 12px(radius-4);item 固定 40px 高(靠固定高+
|
|
1094
1100
|
flex 居中,不是 padding 自然撑开),radius-2(6px) 已一致;禁用项只换色不降 opacity(对标
|
|
1095
1101
|
Radio/Note/Modal 已建立的「禁用色彩降级、opacity 恒 1」家族规则)。 */
|
|
1096
1102
|
.menu__popup {
|
|
@@ -1206,7 +1212,7 @@
|
|
|
1206
1212
|
}
|
|
1207
1213
|
}
|
|
1208
1214
|
|
|
1209
|
-
/* 头像:直径由 --q1-avatar-size
|
|
1215
|
+
/* 头像:直径由 --q1-avatar-size 驱动(自由数值,对齐外部参考 size={n} 模型),字号=直径一半。
|
|
1210
1216
|
不设 overflow:hidden——右下角标要越出圆周;需要裁剪的形态各自处理。 */
|
|
1211
1217
|
.avatar {
|
|
1212
1218
|
position: relative;
|
|
@@ -1237,7 +1243,7 @@
|
|
|
1237
1243
|
}
|
|
1238
1244
|
|
|
1239
1245
|
/* 字母/图标回退:实心中性灰盘 + 恒白字。gray-900(亮 4d4d4d/暗 a0a0a0)正好落在
|
|
1240
|
-
|
|
1246
|
+
外部参考实测值(亮 444/暗 999)上;白字用 oklch 字面量(身份盘前景恒白,同外部参考)。
|
|
1241
1247
|
overflow 裁剪兜超长 letter 输入(合法输入 ≤2 字符不受影响)。 */
|
|
1242
1248
|
.avatar--letter,
|
|
1243
1249
|
.avatar--glyph {
|
|
@@ -1247,7 +1253,7 @@
|
|
|
1247
1253
|
overflow: hidden;
|
|
1248
1254
|
}
|
|
1249
1255
|
|
|
1250
|
-
/*
|
|
1256
|
+
/* 占位骨架:微光渐变(外部参考同款三段式,无边框),尊重 prefers-reduced-motion。 */
|
|
1251
1257
|
.avatar--placeholder {
|
|
1252
1258
|
overflow: hidden;
|
|
1253
1259
|
background: var(--q1-color-bg-subtle);
|
|
@@ -1282,7 +1288,7 @@
|
|
|
1282
1288
|
}
|
|
1283
1289
|
}
|
|
1284
1290
|
|
|
1285
|
-
/*
|
|
1291
|
+
/* 右下角标(对标外部参考 With custom icon):直径=头像一半,外环用面板色与主体分离。 */
|
|
1286
1292
|
.avatar__badge {
|
|
1287
1293
|
position: absolute;
|
|
1288
1294
|
right: calc(var(--q1-avatar-size, 32px) * -0.06);
|
|
@@ -1323,7 +1329,7 @@
|
|
|
1323
1329
|
box-shadow: 0 0 0 1px var(--q1-color-bg-panel);
|
|
1324
1330
|
}
|
|
1325
1331
|
|
|
1326
|
-
/* +N
|
|
1332
|
+
/* +N 收纳芯片:恒定深色、不随主题翻转(外部参考双主题实测同值;同族先例:遮罩恒黑)。 */
|
|
1327
1333
|
.avatar--overflow {
|
|
1328
1334
|
background: oklch(0.2 0 0);
|
|
1329
1335
|
color: oklch(0.94 0 0);
|
|
@@ -1332,7 +1338,7 @@
|
|
|
1332
1338
|
font-weight: var(--q1-font-weight-semibold);
|
|
1333
1339
|
}
|
|
1334
1340
|
|
|
1335
|
-
/*
|
|
1341
|
+
/* 实测外部参考:胶囊三档 h20/24/32、字号 11/12/14、字重 500、tabular-nums;图标随档 12/14/16,lg gap 6px。 */
|
|
1336
1342
|
.badge {
|
|
1337
1343
|
display: inline-flex;
|
|
1338
1344
|
align-items: center;
|
|
@@ -1456,13 +1462,24 @@
|
|
|
1456
1462
|
color: oklch(from var(--q1-color-status-danger) 0.74 0.16 h);
|
|
1457
1463
|
}
|
|
1458
1464
|
|
|
1459
|
-
/*
|
|
1465
|
+
/* quiet 档:低强调元数据形态(SKU/条码/待绑定包裹等),视觉≈neutral-subtle——淡染底、无描边,但不带 tone 语义色。 */
|
|
1466
|
+
.badge--quiet {
|
|
1467
|
+
background: oklch(from var(--q1-color-gray-700) 0.95 0 0);
|
|
1468
|
+
color: oklch(from var(--q1-color-gray-700) 0.42 0 0);
|
|
1469
|
+
}
|
|
1470
|
+
|
|
1471
|
+
:root[data-theme='dark'] .badge--quiet {
|
|
1472
|
+
background: oklch(from var(--q1-color-gray-700) 0.26 0 0);
|
|
1473
|
+
color: oklch(from var(--q1-color-gray-700) 0.84 0 0);
|
|
1474
|
+
}
|
|
1475
|
+
|
|
1476
|
+
/* 反转款:深浅互换的强调 badge(实测外部参考 inverted:gray-1000 底 / gray-100 字,token 双主题自翻)。 */
|
|
1460
1477
|
.badge--inverted {
|
|
1461
1478
|
background: var(--q1-color-gray-1000);
|
|
1462
1479
|
color: var(--q1-color-gray-100);
|
|
1463
1480
|
}
|
|
1464
1481
|
|
|
1465
|
-
/* Pill:基于 Badge
|
|
1482
|
+
/* Pill:基于 Badge 样式的特殊链接(实测外部参考:background-200 底 + 1px 内嵌 hairline 环,悬停提亮到 gray-200)。 */
|
|
1466
1483
|
.badge--pill {
|
|
1467
1484
|
background: var(--q1-color-background-200);
|
|
1468
1485
|
color: var(--q1-color-text-primary);
|
|
@@ -1550,7 +1567,7 @@
|
|
|
1550
1567
|
border-color: var(--q1-color-border-strong);
|
|
1551
1568
|
}
|
|
1552
1569
|
|
|
1553
|
-
/*
|
|
1570
|
+
/* 页顶公告形态(对齐外部参考 demo 实测):透明底无边框、内容居中、16px 文案;
|
|
1554
1571
|
与页内卡条(tone 变体)分工,两种定位见页面使用原则。 */
|
|
1555
1572
|
.banner--announcement {
|
|
1556
1573
|
justify-content: center;
|
|
@@ -1566,7 +1583,7 @@
|
|
|
1566
1583
|
line-height: var(--q1-line-height-copy-16);
|
|
1567
1584
|
}
|
|
1568
1585
|
|
|
1569
|
-
/*
|
|
1586
|
+
/* 公告主操作:恒深药丸,双主题同值(外部参考亮暗实测同为深底浅字;同族先例:Avatar +N 芯片、遮罩恒黑)。 */
|
|
1570
1587
|
.banner__cta {
|
|
1571
1588
|
flex-shrink: 0;
|
|
1572
1589
|
display: inline-flex;
|
|
@@ -1733,7 +1750,7 @@ a.breadcrumb__link:hover {
|
|
|
1733
1750
|
font-weight: var(--q1-font-weight-medium);
|
|
1734
1751
|
}
|
|
1735
1752
|
|
|
1736
|
-
/* 禁用态:固定 gray-700
|
|
1753
|
+
/* 禁用态:固定 gray-700(双主题同一色值,外部参考实测),不用透明度衰减——
|
|
1737
1754
|
与 text-muted 在暗色主题会漂到 gray-800 不同,这里刻意锚定 gray-700 原值。 */
|
|
1738
1755
|
.breadcrumb__link--disabled {
|
|
1739
1756
|
color: var(--q1-color-gray-700);
|
|
@@ -1781,7 +1798,7 @@ a.breadcrumb__link:hover {
|
|
|
1781
1798
|
display: none;
|
|
1782
1799
|
}
|
|
1783
1800
|
|
|
1784
|
-
/* menu
|
|
1801
|
+
/* menu 形态(对标外部参考 type="menu" 实测):独立描边药丸,无分隔符;
|
|
1785
1802
|
尺寸/描边/圆角逐字节对齐(22px 高、2px/6px 内距、1px border-overlay、4px 圆角、12px 字)。 */
|
|
1786
1803
|
.breadcrumb--menu .breadcrumb__list {
|
|
1787
1804
|
gap: 6px;
|
|
@@ -1831,7 +1848,7 @@ a.breadcrumb__link:hover {
|
|
|
1831
1848
|
overflow: hidden;
|
|
1832
1849
|
border-radius: var(--q1-radius-4);
|
|
1833
1850
|
background: var(--browser-surface);
|
|
1834
|
-
/* material-small:1px 顶部亮环 + 柔和投影 + 1px
|
|
1851
|
+
/* material-small:1px 顶部亮环 + 柔和投影 + 1px 暗边环(对标外部参考三层叠加)。 */
|
|
1835
1852
|
box-shadow:
|
|
1836
1853
|
inset 0 0 0 1px color-mix(in srgb, white 14%, transparent),
|
|
1837
1854
|
0 1px 2px color-mix(in srgb, black 40%, transparent),
|
|
@@ -1921,7 +1938,7 @@ a.breadcrumb__link:hover {
|
|
|
1921
1938
|
border-radius: 9999px;
|
|
1922
1939
|
}
|
|
1923
1940
|
|
|
1924
|
-
/* 字面量 macOS
|
|
1941
|
+
/* 字面量 macOS 交通灯配色(外部参考实测,双主题同值,与像素级验证过的转换值对齐):
|
|
1925
1942
|
这是操作系统窗口控件的写实模拟,不是语义状态传达,故意不用 --q1-color-status-* token。 */
|
|
1926
1943
|
.browser__dot--close {
|
|
1927
1944
|
background: oklch(0.6921 0.1953 26.36);
|
|
@@ -2065,7 +2082,7 @@ a.breadcrumb__link:hover {
|
|
|
2065
2082
|
object-fit: cover;
|
|
2066
2083
|
}
|
|
2067
2084
|
|
|
2068
|
-
/*
|
|
2085
|
+
/* 窄屏:隐藏导航图标(对标外部参考 max-md:hidden)。起始区常驻自适应宽度、
|
|
2069
2086
|
地址区常驻吃满剩余空间(见 .browser__zone--start/--center),本断点无需再单独处理。 */
|
|
2070
2087
|
@media (max-width: 640px) {
|
|
2071
2088
|
.browser__controls {
|
|
@@ -2073,7 +2090,7 @@ a.breadcrumb__link:hover {
|
|
|
2073
2090
|
}
|
|
2074
2091
|
}
|
|
2075
2092
|
|
|
2076
|
-
/* 书籍封面(2026-07-09
|
|
2093
|
+
/* 书籍封面(2026-07-09 双轮实测外部参考):静止=平面封面(49/60、圆角 6/4/4/6、暗色微光、
|
|
2077
2094
|
双层外阴影随宽度缩放、左缘 8.2% 书脊沟线、排版=宽度线性缩放 0.0836/0.061);
|
|
2078
2095
|
悬停=绕 Y 轴翻开(rotateY -20° + scale 1.066 + translateX -16px,0.25s ease-out——
|
|
2079
2096
|
从冻结的 CSSTransition 关键帧取证;hidden 标签页首测误判"无动效",用户人眼纠正)。 */
|
|
@@ -2180,7 +2197,7 @@ a.breadcrumb__link:hover {
|
|
|
2180
2197
|
background: var(--q1-book-sheen);
|
|
2181
2198
|
}
|
|
2182
2199
|
|
|
2183
|
-
/* 顶部色带(stripe
|
|
2200
|
+
/* 顶部色带(stripe 变体,外部参考默认形态):占封面高度 47.8%。 */
|
|
2184
2201
|
.book__band {
|
|
2185
2202
|
position: relative;
|
|
2186
2203
|
display: flex;
|
|
@@ -2216,7 +2233,7 @@ a.breadcrumb__link:hover {
|
|
|
2216
2233
|
color: var(--book-text);
|
|
2217
2234
|
}
|
|
2218
2235
|
|
|
2219
|
-
/* 书脊沟线:左缘 8.2% 宽度内一条白 25%
|
|
2236
|
+
/* 书脊沟线:左缘 8.2% 宽度内一条白 25% 高光渐变(两主题同值,外部参考实测)。 */
|
|
2220
2237
|
.book__gutter {
|
|
2221
2238
|
position: absolute;
|
|
2222
2239
|
inset: 0 auto 0 0;
|
|
@@ -2246,7 +2263,7 @@ a.breadcrumb__link:hover {
|
|
|
2246
2263
|
object-fit: cover;
|
|
2247
2264
|
}
|
|
2248
2265
|
|
|
2249
|
-
/*
|
|
2266
|
+
/* 纹理(自有配方,外部参考多款纹理样式记 non-goal):细密交叉底纹叠在封面色上,不糊标题。 */
|
|
2250
2267
|
.book--textured .book__cover {
|
|
2251
2268
|
background-image:
|
|
2252
2269
|
repeating-linear-gradient(
|
|
@@ -2317,7 +2334,7 @@ a.breadcrumb__link:hover {
|
|
|
2317
2334
|
padding: var(--q1-space-6);
|
|
2318
2335
|
}
|
|
2319
2336
|
|
|
2320
|
-
/* 分段控件 Switch
|
|
2337
|
+
/* 分段控件 Switch(对标外部参考 Switch):一组互斥选项,选中段抬起;底层 q1-sr-only 单选组,方向键原生可用。 */
|
|
2321
2338
|
.switch-control {
|
|
2322
2339
|
display: inline-flex;
|
|
2323
2340
|
align-items: center;
|
|
@@ -2393,7 +2410,7 @@ a.breadcrumb__link:hover {
|
|
|
2393
2410
|
gap: var(--q1-space-4);
|
|
2394
2411
|
}
|
|
2395
2412
|
|
|
2396
|
-
/* 下划线式 Tabs
|
|
2413
|
+
/* 下划线式 Tabs(对标外部参考):tablist 一条底边基线,选中标签用 2px 前景色底边下划线、透明底、字重 400。 */
|
|
2397
2414
|
.tabs-control {
|
|
2398
2415
|
display: flex;
|
|
2399
2416
|
align-items: center;
|
|
@@ -2452,7 +2469,7 @@ a.breadcrumb__link:hover {
|
|
|
2452
2469
|
align-items: center;
|
|
2453
2470
|
}
|
|
2454
2471
|
|
|
2455
|
-
/* 次级(secondary
|
|
2472
|
+
/* 次级(secondary)变体(对标外部参考 Secondary Tabs):药丸组容器,选中态用前景色填充、无下划线。 */
|
|
2456
2473
|
.tabs-control--secondary {
|
|
2457
2474
|
gap: var(--q1-space-1);
|
|
2458
2475
|
border: 1px solid var(--q1-color-border-strong);
|
|
@@ -2683,7 +2700,7 @@ a.breadcrumb__link:hover {
|
|
|
2683
2700
|
cursor: pointer;
|
|
2684
2701
|
}
|
|
2685
2702
|
|
|
2686
|
-
/*
|
|
2703
|
+
/* 固定时区:只读文本,去掉可点击暗示(外部参考 pinnedTimezone——只读文本非 select)。 */
|
|
2687
2704
|
.cal-inputs__tz--pinned {
|
|
2688
2705
|
cursor: default;
|
|
2689
2706
|
}
|
|
@@ -2956,7 +2973,7 @@ a.breadcrumb__link:hover {
|
|
|
2956
2973
|
height: 1px;
|
|
2957
2974
|
}
|
|
2958
2975
|
|
|
2959
|
-
/*
|
|
2976
|
+
/* 竖向随容器拉伸(对标外部参考 h-full);min-height 防非弹性父容器下塌陷成一点。 */
|
|
2960
2977
|
.separator--vertical {
|
|
2961
2978
|
width: 1px;
|
|
2962
2979
|
height: auto;
|
|
@@ -3041,7 +3058,7 @@ a.breadcrumb__link:hover {
|
|
|
3041
3058
|
.spinner--success { color: var(--q1-color-status-success); }
|
|
3042
3059
|
.spinner--info { color: var(--q1-color-status-info); }
|
|
3043
3060
|
|
|
3044
|
-
/*
|
|
3061
|
+
/* 辐条角度与动画延迟由组件按辐条数内联计算(辐条数随尺寸增减,对标外部参考)。 */
|
|
3045
3062
|
.spinner__bar {
|
|
3046
3063
|
position: absolute;
|
|
3047
3064
|
top: 0;
|
|
@@ -3203,7 +3220,7 @@ a.breadcrumb__link:hover {
|
|
|
3203
3220
|
color: var(--q1-color-text-primary);
|
|
3204
3221
|
}
|
|
3205
3222
|
|
|
3206
|
-
/* 复制按钮 absolute
|
|
3223
|
+
/* 复制按钮 absolute 挂右侧(对标外部参考):单行高度由文本决定(10px 竖向 padding + 20px 行高 ≈ 42),
|
|
3207
3224
|
不被按钮撑高;文本区 padding-right 预留按钮位。 */
|
|
3208
3225
|
.snippet {
|
|
3209
3226
|
position: relative;
|
|
@@ -3216,7 +3233,7 @@ a.breadcrumb__link:hover {
|
|
|
3216
3233
|
background: var(--q1-color-bg-subtle);
|
|
3217
3234
|
}
|
|
3218
3235
|
|
|
3219
|
-
/*
|
|
3236
|
+
/* 反色:纯反色一层(对标外部参考 Inverted),两主题自适应,无内衬块。 */
|
|
3220
3237
|
.snippet--inverted {
|
|
3221
3238
|
border-color: var(--q1-color-text-primary);
|
|
3222
3239
|
background: var(--q1-color-text-primary);
|
|
@@ -3358,7 +3375,7 @@ a.breadcrumb__link:hover {
|
|
|
3358
3375
|
100% { transform: rotate(360deg); }
|
|
3359
3376
|
}
|
|
3360
3377
|
|
|
3361
|
-
/*
|
|
3378
|
+
/* 实测外部参考:条高 10px、圆角 radius-2、轨道 gray-200;填充默认中性前景,
|
|
3362
3379
|
过渡 width/background-color 0.1s ease-in(换色也平滑)。停靠点悬停有气泡,
|
|
3363
3380
|
故裁剪收进 __track 内层,停靠点留在外层不被 overflow 剪掉。 */
|
|
3364
3381
|
.progress {
|
|
@@ -3459,7 +3476,7 @@ a.breadcrumb__link:hover {
|
|
|
3459
3476
|
transform: translate(-50%, 0);
|
|
3460
3477
|
}
|
|
3461
3478
|
|
|
3462
|
-
/*
|
|
3479
|
+
/* 实测外部参考:非填充态背景恒透明,靠边框+图标+正文同色传达类型(不是只图标上色,正文保持中性);
|
|
3463
3480
|
filled 只加浅色底,图标/正文颜色不变——两态共享同一套 tone-fg/tone-border,复用 Banner 已建立的
|
|
3464
3481
|
tone-surface 配方(不新开一层浅色阶)。 */
|
|
3465
3482
|
.note {
|
|
@@ -3492,7 +3509,7 @@ a.breadcrumb__link:hover {
|
|
|
3492
3509
|
font-weight: var(--q1-font-weight-medium);
|
|
3493
3510
|
}
|
|
3494
3511
|
|
|
3495
|
-
/*
|
|
3512
|
+
/* 行动按钮(实测外部参考:32px 高、radius-2、实心反色 CTA,不是我们原来的浅边框按钮)。 */
|
|
3496
3513
|
.note__action {
|
|
3497
3514
|
flex-shrink: 0;
|
|
3498
3515
|
display: inline-flex;
|
|
@@ -3555,7 +3572,7 @@ a.breadcrumb__link:hover {
|
|
|
3555
3572
|
/* secondary 是中性语义,不像其余四档有专属 tone token,填充态用中性 subtle 底。 */
|
|
3556
3573
|
.note--filled.note--secondary { background: var(--q1-color-bg-subtle); }
|
|
3557
3574
|
|
|
3558
|
-
/*
|
|
3575
|
+
/* 禁用态(实测外部参考 Disabled 章节:整体降灰,不因类型保留颜色;对标 Radio 的色彩降级配方,
|
|
3559
3576
|
opacity 恒 1,只换色,源码顺序放在类型规则之后确保覆盖)。
|
|
3560
3577
|
.note--filled.note--info 等是两类选择器(优先级 0,2,0),比 .note--disabled 单类(0,1,0)更高,
|
|
3561
3578
|
源码顺序赢不了优先级差——填充+禁用组合必须用同为两类的选择器才能真正盖掉填充色。 */
|
|
@@ -3574,7 +3591,7 @@ a.breadcrumb__link:hover {
|
|
|
3574
3591
|
}
|
|
3575
3592
|
|
|
3576
3593
|
/* 修正:gray-500 实底 + bg-canvas 深色字在暗色主题几乎不可读(bg-canvas 暗色下是近黑,
|
|
3577
|
-
|
|
3594
|
+
叠在中灰底上对比度太低)。实测外部参考的真实禁用配方是「底色几乎不变、只把字调淡」
|
|
3578
3595
|
(light 主题测得 bg 几乎同色,字从纯白调淡到中灰),改为对底色加 55% 透明度混合。 */
|
|
3579
3596
|
.note--disabled .note__action {
|
|
3580
3597
|
background: var(--q1-color-gray-1000);
|
|
@@ -3769,7 +3786,7 @@ a.breadcrumb__link:hover {
|
|
|
3769
3786
|
color: var(--q1-color-text-secondary);
|
|
3770
3787
|
}
|
|
3771
3788
|
|
|
3772
|
-
/*
|
|
3789
|
+
/* 语言切换按钮组(对标外部参考 Language switcher with tabs):占 header 左侧文件名位。 */
|
|
3773
3790
|
.codeblock__tabs {
|
|
3774
3791
|
display: inline-flex;
|
|
3775
3792
|
gap: var(--q1-space-1);
|
|
@@ -4096,7 +4113,7 @@ a.breadcrumb__link:hover {
|
|
|
4096
4113
|
.context-card-wrap--left .context-card { right: calc(100% + 8px); top: 0; }
|
|
4097
4114
|
.context-card-wrap--right .context-card { left: calc(100% + 8px); top: 0; }
|
|
4098
4115
|
|
|
4099
|
-
/*
|
|
4116
|
+
/* 轴向对齐(对标外部参考 Alignment):默认 start 贴起始边;center 沿轴居中;end 贴结束边。
|
|
4100
4117
|
top/bottom 的轴是水平(left/translateX),left/right 的轴是垂直(top/translateY)。 */
|
|
4101
4118
|
.context-card-wrap--top.context-card-wrap--align-center .context-card,
|
|
4102
4119
|
.context-card-wrap--bottom.context-card-wrap--align-center .context-card {
|
|
@@ -4190,7 +4207,7 @@ a.breadcrumb__link:hover {
|
|
|
4190
4207
|
.rtc-trigger {
|
|
4191
4208
|
border-bottom: 1px dashed var(--q1-color-border-strong);
|
|
4192
4209
|
color: var(--q1-color-text-primary);
|
|
4193
|
-
/*
|
|
4210
|
+
/* 光标铁律:跟外部参考实测(其 RTC 触发器为 pointer)。 */
|
|
4194
4211
|
cursor: pointer;
|
|
4195
4212
|
}
|
|
4196
4213
|
|
|
@@ -4221,13 +4238,13 @@ a.breadcrumb__link:hover {
|
|
|
4221
4238
|
transition: opacity 0.12s ease, visibility 0.12s ease;
|
|
4222
4239
|
}
|
|
4223
4240
|
|
|
4224
|
-
/*
|
|
4241
|
+
/* 长格式相对时间标题行(对标外部参考)。 */
|
|
4225
4242
|
.rtc-card__relative {
|
|
4226
4243
|
font-size: 12px;
|
|
4227
4244
|
color: var(--q1-color-text-primary);
|
|
4228
4245
|
}
|
|
4229
4246
|
|
|
4230
|
-
/* 时区徽章(UTC / GMT+8 小 chip
|
|
4247
|
+
/* 时区徽章(UTC / GMT+8 小 chip,对标外部参考)。 */
|
|
4231
4248
|
.rtc-card__zone {
|
|
4232
4249
|
flex: none;
|
|
4233
4250
|
padding: 1px var(--q1-space-1);
|
|
@@ -4256,8 +4273,8 @@ a.breadcrumb__link:hover {
|
|
|
4256
4273
|
color: var(--q1-color-text-secondary);
|
|
4257
4274
|
}
|
|
4258
4275
|
|
|
4259
|
-
/*
|
|
4260
|
-
flex-wrap
|
|
4276
|
+
/* 项目横幅(对标外部参考实测):radius 0 贴边通栏条;图标随文字色;CTA 亮一档 + medium。
|
|
4277
|
+
flex-wrap 为窄屏防溢出兜底(有理由偏离:外部参考无,正常宽度不可见)。 */
|
|
4261
4278
|
.project-banner {
|
|
4262
4279
|
display: flex;
|
|
4263
4280
|
flex-wrap: wrap;
|
|
@@ -4343,14 +4360,14 @@ a.breadcrumb__link:hover {
|
|
|
4343
4360
|
background: var(--q1-color-bg-subtle);
|
|
4344
4361
|
}
|
|
4345
4362
|
|
|
4346
|
-
/* 分段卡片给容器 16px
|
|
4363
|
+
/* 分段卡片给容器 16px 内边距(对齐外部参考 p-4):section 随之内缩,分隔线不贯满卡片边、左端对齐文字。
|
|
4347
4364
|
这是分隔线"内缩"的来源——不是给线加 inset,而是容器留边、section 无水平 padding,线随 section 内缩。 */
|
|
4348
4365
|
.q1-card--divided {
|
|
4349
4366
|
padding: var(--q1-space-4);
|
|
4350
4367
|
}
|
|
4351
4368
|
|
|
4352
4369
|
.q1-card--divided .q1-card__section {
|
|
4353
|
-
/* 竖排段:只留垂直 padding
|
|
4370
|
+
/* 竖排段:只留垂直 padding(对齐外部参考 py-2),水平交给容器内边距,分隔线因此内缩对齐文字。 */
|
|
4354
4371
|
padding: var(--q1-space-2) 0;
|
|
4355
4372
|
font-size: 14px;
|
|
4356
4373
|
color: var(--q1-color-text-primary);
|
|
@@ -4364,7 +4381,7 @@ a.breadcrumb__link:hover {
|
|
|
4364
4381
|
特异性用 .q1-card.q1-card--row(0,2,0) 压过可点卡片的 a.q1-card(0,1,1),否则 <a> 卡片的 display:block 会把 flex 打回竖排。 */
|
|
4365
4382
|
.q1-card.q1-card--row {
|
|
4366
4383
|
display: flex;
|
|
4367
|
-
/* 横排指标块并列需要空间,解除默认 400px
|
|
4384
|
+
/* 横排指标块并列需要空间,解除默认 400px 限宽,充满容器(对齐外部参考横排充满 demo 框)。 */
|
|
4368
4385
|
max-width: none;
|
|
4369
4386
|
}
|
|
4370
4387
|
|
|
@@ -4373,7 +4390,7 @@ a.breadcrumb__link:hover {
|
|
|
4373
4390
|
}
|
|
4374
4391
|
|
|
4375
4392
|
.q1-card--divided.q1-card--row .q1-card__section {
|
|
4376
|
-
/* 横排段:垂直 padding 归 0(内缩交给容器)、水平 8px
|
|
4393
|
+
/* 横排段:垂直 padding 归 0(内缩交给容器)、水平 8px 给文字到竖线的间距(对齐外部参考 row section 0 8px)。 */
|
|
4377
4394
|
padding: 0 var(--q1-space-2);
|
|
4378
4395
|
}
|
|
4379
4396
|
|
|
@@ -4401,14 +4418,14 @@ a.breadcrumb__link:hover {
|
|
|
4401
4418
|
color: var(--q1-color-text-secondary);
|
|
4402
4419
|
}
|
|
4403
4420
|
|
|
4404
|
-
/*
|
|
4421
|
+
/* 常驻柔和投影(对齐外部参考 shadow):贴地薄影 + 扩散软影两层,让卡片浮于背景。 */
|
|
4405
4422
|
.q1-card--shadow {
|
|
4406
4423
|
box-shadow:
|
|
4407
4424
|
0 1px 2px color-mix(in srgb, var(--q1-color-shadow) 6%, transparent),
|
|
4408
4425
|
0 8px 24px color-mix(in srgb, var(--q1-color-shadow) 8%, transparent);
|
|
4409
4426
|
}
|
|
4410
4427
|
|
|
4411
|
-
/* 无框卡片(bordered={false}
|
|
4428
|
+
/* 无框卡片(bordered={false}):去边框,靠底色/投影表达边界(对齐外部参考 border 可选)。 */
|
|
4412
4429
|
.q1-card--borderless {
|
|
4413
4430
|
border-color: transparent;
|
|
4414
4431
|
}
|
|
@@ -4578,7 +4595,7 @@ a.q1-card:focus-visible {
|
|
|
4578
4595
|
100% { transform: rotate(360deg); }
|
|
4579
4596
|
}
|
|
4580
4597
|
|
|
4581
|
-
/* Esc
|
|
4598
|
+
/* Esc 键帽清除(对标外部参考):清除入口本身就是快捷键教学;点击或按 Esc 清空。 */
|
|
4582
4599
|
.search-input__esc {
|
|
4583
4600
|
position: absolute;
|
|
4584
4601
|
top: 50%;
|
|
@@ -4653,7 +4670,7 @@ a.q1-card:focus-visible {
|
|
|
4653
4670
|
background: var(--q1-color-bg-subtle);
|
|
4654
4671
|
}
|
|
4655
4672
|
|
|
4656
|
-
/* tone="danger"|"warning"
|
|
4673
|
+
/* tone="danger"|"warning" 是整卡状态(对标外部参考 Error/Warning Type):边框着色表达整组处于错误/警告态,
|
|
4657
4674
|
页脚派生轻染底延续状态可读性——不是只染页脚(原 .fieldset__footer--* 语义提升为整卡 .fieldset--*)。 */
|
|
4658
4675
|
.fieldset--danger {
|
|
4659
4676
|
border-color: var(--q1-color-status-danger);
|
|
@@ -4739,7 +4756,7 @@ a.q1-card:focus-visible {
|
|
|
4739
4756
|
justify-content: center;
|
|
4740
4757
|
}
|
|
4741
4758
|
|
|
4742
|
-
/*
|
|
4759
|
+
/* 药丸触发器(对标外部参考):h32 / font 14/500 / 全圆角;颜色走家族 panel+border。 */
|
|
4743
4760
|
.show-more__trigger {
|
|
4744
4761
|
display: inline-flex;
|
|
4745
4762
|
align-items: center;
|
|
@@ -4807,7 +4824,7 @@ a.q1-card:focus-visible {
|
|
|
4807
4824
|
transform: rotate(90deg);
|
|
4808
4825
|
}
|
|
4809
4826
|
/* 收起时面板保留在 DOM(grid 0fr),便于页面内查找命中;visibility 把收起内容移出
|
|
4810
|
-
|
|
4827
|
+
焦点序与读屏树(对齐外部参考 closed 用 hidden/visibility)——关闭时随高度动画结束才隐藏,
|
|
4811
4828
|
打开时立即可见(visibility 的过渡语义天然如此)。 */
|
|
4812
4829
|
.collapse__panel {
|
|
4813
4830
|
display: grid;
|
|
@@ -5137,7 +5154,7 @@ a.q1-card:focus-visible {
|
|
|
5137
5154
|
.choicebox--checkbox:has(.choicebox__input:disabled:checked) .choicebox__indicator {
|
|
5138
5155
|
background: var(--q1-color-gray-500);
|
|
5139
5156
|
}
|
|
5140
|
-
/*
|
|
5157
|
+
/* 实测外部参考:裸轨(无外框/无背景/无 padding),图标抽离文字块、绝对定位在 28px 凹槽外;
|
|
5141
5158
|
悬停只把文字/图标从 text-secondary 加深到 text-primary,无背景浸染、无品牌色——
|
|
5142
5159
|
这是页面间的纯导航链(chrome),不是行动号召,indigo 只守「动作」。 */
|
|
5143
5160
|
.pagination {
|
|
@@ -5175,7 +5192,7 @@ a.q1-card:focus-visible {
|
|
|
5175
5192
|
.pagination__link:hover .pagination__label {
|
|
5176
5193
|
color: var(--q1-color-text-primary);
|
|
5177
5194
|
}
|
|
5178
|
-
/*
|
|
5195
|
+
/* 定位上下文钉在标题文字块(实测外部参考:图标是标题块的子节点,随文字宽度走,
|
|
5179
5196
|
而不是钉在整条链接上)——否则图标会漂出链接可点/可聚焦的框外。 */
|
|
5180
5197
|
.pagination__title-frame {
|
|
5181
5198
|
position: relative;
|
|
@@ -5411,7 +5428,7 @@ a.q1-card:focus-visible {
|
|
|
5411
5428
|
align-items: center;
|
|
5412
5429
|
gap: var(--q1-space-2);
|
|
5413
5430
|
}
|
|
5414
|
-
/*
|
|
5431
|
+
/* 纵向带按钮(对标外部参考 Vertical with buttons):上/滚动区/下 纵向堆叠。 */
|
|
5415
5432
|
.scroller-buttons--vertical {
|
|
5416
5433
|
flex-direction: column;
|
|
5417
5434
|
align-items: stretch;
|
|
@@ -5485,7 +5502,7 @@ a.q1-card:focus-visible {
|
|
|
5485
5502
|
.theme-switcher:disabled .theme-switcher__option {
|
|
5486
5503
|
cursor: default;
|
|
5487
5504
|
}
|
|
5488
|
-
/*
|
|
5505
|
+
/* 实测外部参考(320 框):壳与岛恒黑、键恒灰——拟真设备不随主题翻转;无投影,黑壳对比度即高度感。
|
|
5489
5506
|
键位为 675 框高的实测百分比换算:静音 15%、音量 23.4%/32.4%、电源(右)28.2%。 */
|
|
5490
5507
|
.phone {
|
|
5491
5508
|
position: relative;
|
|
@@ -5539,7 +5556,7 @@ a.q1-card:focus-visible {
|
|
|
5539
5556
|
overflow: hidden;
|
|
5540
5557
|
background: var(--q1-color-bg-canvas);
|
|
5541
5558
|
}
|
|
5542
|
-
/* iOS home 条:设备铬,叠在屏内容底部;我们的屏底色随主题翻转,故取前景色保持可见(
|
|
5559
|
+
/* iOS home 条:设备铬,叠在屏内容底部;我们的屏底色随主题翻转,故取前景色保持可见(外部参考灰占位屏上为恒白)。 */
|
|
5543
5560
|
.phone__home {
|
|
5544
5561
|
position: absolute;
|
|
5545
5562
|
bottom: 1.8%;
|
|
@@ -5744,7 +5761,7 @@ a.q1-card:focus-visible {
|
|
|
5744
5761
|
transform: translateY(var(--y, 0px)) scale(1);
|
|
5745
5762
|
opacity: 1;
|
|
5746
5763
|
}
|
|
5747
|
-
/* 状态 q1-toast:实心 tone 底色 +
|
|
5764
|
+
/* 状态 q1-toast:实心 tone 底色 + 浅色文字(对标外部参考的 success/warning/error) */
|
|
5748
5765
|
.q1-toast--success,
|
|
5749
5766
|
.q1-toast--warning,
|
|
5750
5767
|
.q1-toast--error {
|
|
@@ -5875,7 +5892,7 @@ a.q1-card:focus-visible {
|
|
|
5875
5892
|
border-radius: 999px;
|
|
5876
5893
|
background: var(--q1-color-bg-subtle);
|
|
5877
5894
|
}
|
|
5878
|
-
/*
|
|
5895
|
+
/* 竖条拇指(对标外部参考):6×14 白色小竖条 + 定义环;action-on-primary 两主题恒白(拇指骑在 primary 填充上)。 */
|
|
5879
5896
|
.slider-input::-webkit-slider-thumb {
|
|
5880
5897
|
-webkit-appearance: none;
|
|
5881
5898
|
width: 6px;
|
|
@@ -5936,7 +5953,7 @@ a.q1-card:focus-visible {
|
|
|
5936
5953
|
font-size: 14px;
|
|
5937
5954
|
font-variant-numeric: tabular-nums;
|
|
5938
5955
|
text-align: center;
|
|
5939
|
-
/*
|
|
5956
|
+
/* 隐藏原生步进箭头(对标外部参考):键盘 ↑↓ 步进不受影响,粗调交给滑块。 */
|
|
5940
5957
|
-moz-appearance: textfield;
|
|
5941
5958
|
appearance: textfield;
|
|
5942
5959
|
}
|
|
@@ -6014,7 +6031,7 @@ a.q1-card:focus-visible {
|
|
|
6014
6031
|
color: var(--q1-color-text-secondary);
|
|
6015
6032
|
font-size: 14px;
|
|
6016
6033
|
text-align: center;
|
|
6017
|
-
/*
|
|
6034
|
+
/* 光标铁律:外部参考右键触发区无 cursor 声明(auto),照抄不自建。 */
|
|
6018
6035
|
user-select: none;
|
|
6019
6036
|
}
|
|
6020
6037
|
.context-menu__area:focus-visible {
|
|
@@ -6113,7 +6130,7 @@ a.q1-card:focus-visible {
|
|
|
6113
6130
|
.split-button--secondary .split-button__toggle {
|
|
6114
6131
|
background: var(--q1-color-bg-panel);
|
|
6115
6132
|
}
|
|
6116
|
-
/* 尺寸(与 Button
|
|
6133
|
+
/* 尺寸(与 Button 家族共享外部参考刻度:高 32/40/48、radius 6/6/8、字号 14/14/16) */
|
|
6117
6134
|
.split-button--sm .split-button__primary {
|
|
6118
6135
|
min-height: 32px;
|
|
6119
6136
|
padding: 0 var(--q1-space-3);
|
|
@@ -6261,7 +6278,7 @@ a.q1-card:focus-visible {
|
|
|
6261
6278
|
cursor: pointer;
|
|
6262
6279
|
}
|
|
6263
6280
|
|
|
6264
|
-
/*
|
|
6281
|
+
/* 选项前后图标(对标外部参考 With Prefix/Suffix Icons):前缀随文本、后缀推到行尾。 */
|
|
6265
6282
|
.combobox__option-prefix,
|
|
6266
6283
|
.combobox__option-suffix {
|
|
6267
6284
|
display: inline-flex;
|
|
@@ -6286,7 +6303,7 @@ a.q1-card:focus-visible {
|
|
|
6286
6303
|
color: var(--q1-color-action-primary);
|
|
6287
6304
|
font-weight: 500;
|
|
6288
6305
|
}
|
|
6289
|
-
/*
|
|
6306
|
+
/* 选中项对勾(对标外部参考选中标记):推到行尾,随选中色。 */
|
|
6290
6307
|
.combobox__option-check {
|
|
6291
6308
|
flex: none;
|
|
6292
6309
|
margin-left: auto;
|
|
@@ -6338,7 +6355,7 @@ a.q1-card:focus-visible {
|
|
|
6338
6355
|
color: var(--q1-color-text-secondary);
|
|
6339
6356
|
font-weight: 400;
|
|
6340
6357
|
}
|
|
6341
|
-
/*
|
|
6358
|
+
/* 实测外部参考:菜单 radius-4(12px)、padding space-2(8px)、行高 32px。 */
|
|
6342
6359
|
.multi-select__menu {
|
|
6343
6360
|
position: absolute;
|
|
6344
6361
|
top: calc(100% + var(--q1-space-1));
|
|
@@ -6419,13 +6436,13 @@ a.q1-card:focus-visible {
|
|
|
6419
6436
|
border-radius: var(--q1-radius-1);
|
|
6420
6437
|
color: var(--q1-color-bg-canvas);
|
|
6421
6438
|
}
|
|
6422
|
-
/*
|
|
6439
|
+
/* 实测外部参考:选中态是中性 gray-1000 黑底,不是品牌蓝——与 Radio/Note 行动按钮已定的
|
|
6423
6440
|
「选择控件中性,品牌色只归主动作」规则一致。 */
|
|
6424
6441
|
.multi-select__check--on {
|
|
6425
6442
|
background: var(--q1-color-gray-1000);
|
|
6426
6443
|
border-color: var(--q1-color-gray-1000);
|
|
6427
6444
|
}
|
|
6428
|
-
/*
|
|
6445
|
+
/* 边界:外部参考遇长名靠菜单变宽保持单行;我们改为单行截断更保守——真实业务数据(权限范围名)
|
|
6429
6446
|
长度不可控,任由菜单跟着最长一项无限变宽风险更高;32px 定高行也扛不住换行溢出。 */
|
|
6430
6447
|
.multi-select__option-label {
|
|
6431
6448
|
overflow: hidden;
|
|
@@ -6596,7 +6613,7 @@ a.q1-card:focus-visible {
|
|
|
6596
6613
|
font-size: 11px;
|
|
6597
6614
|
}
|
|
6598
6615
|
|
|
6599
|
-
/*
|
|
6616
|
+
/* 项通用后缀(对标外部参考 With Suffix):元信息文本/状态图标,右对齐、次要色。 */
|
|
6600
6617
|
.command-palette__suffix {
|
|
6601
6618
|
display: inline-flex;
|
|
6602
6619
|
align-items: center;
|
|
@@ -6658,7 +6675,7 @@ a.q1-card:focus-visible {
|
|
|
6658
6675
|
.modal-btn--primary:hover {
|
|
6659
6676
|
background: var(--q1-color-action-primary-hover, var(--q1-color-action-primary));
|
|
6660
6677
|
}
|
|
6661
|
-
/*
|
|
6678
|
+
/* 禁用主按钮(实测外部参考 Disabled actions:色彩降级、opacity 恒 1)。这是实心 CTA 按钮,
|
|
6662
6679
|
对标 Input/Select 已建立的「底色抬灰」表单控件禁用配方,而非 Radio 的描边控件配方——
|
|
6663
6680
|
gray-500 实底配 bg-canvas 字在暗色主题对比度不足,bg-subtle + text-muted 双主题都可读。 */
|
|
6664
6681
|
.modal-btn--primary:disabled {
|
|
@@ -6670,7 +6687,7 @@ a.q1-card:focus-visible {
|
|
|
6670
6687
|
.modal-btn--primary:disabled:hover {
|
|
6671
6688
|
background: var(--q1-color-bg-subtle);
|
|
6672
6689
|
}
|
|
6673
|
-
/* 单按钮场景铺满整行(
|
|
6690
|
+
/* 单按钮场景铺满整行(对标外部参考 Single button):布局属于模态框上下文,不进 Button 本体。 */
|
|
6674
6691
|
.modal__action--full {
|
|
6675
6692
|
width: 100%;
|
|
6676
6693
|
}
|
|
@@ -6690,7 +6707,7 @@ a.q1-card:focus-visible {
|
|
|
6690
6707
|
background: color-mix(in srgb, var(--q1-color-shadow) 45%, transparent);
|
|
6691
6708
|
cursor: default;
|
|
6692
6709
|
}
|
|
6693
|
-
/*
|
|
6710
|
+
/* 实测外部参考:540px 宽(我们原 480)。 */
|
|
6694
6711
|
.modal__dialog {
|
|
6695
6712
|
position: relative;
|
|
6696
6713
|
width: 100%;
|
|
@@ -6742,7 +6759,7 @@ a.q1-card:focus-visible {
|
|
|
6742
6759
|
.modal__body p {
|
|
6743
6760
|
margin: 0;
|
|
6744
6761
|
}
|
|
6745
|
-
/*
|
|
6762
|
+
/* 实测外部参考:取消靠左、主操作靠右(space-between),不是两个按钮一起挤右侧;
|
|
6746
6763
|
仅单个按钮(如确认型 Modal 的「完成」)时退回右对齐,避免孤零零挂在左边。 */
|
|
6747
6764
|
.modal__footer {
|
|
6748
6765
|
display: flex;
|
|
@@ -6819,7 +6836,7 @@ a.q1-card:focus-visible {
|
|
|
6819
6836
|
font-size: 13px;
|
|
6820
6837
|
color: var(--q1-color-red-700);
|
|
6821
6838
|
}
|
|
6822
|
-
/* loading
|
|
6839
|
+
/* loading 态主按钮的加载指示(对标外部参考 Loading 章):连续旋转,尊重 reduced-motion。 */
|
|
6823
6840
|
.destructive-modal__spinner {
|
|
6824
6841
|
margin-right: var(--q1-space-2);
|
|
6825
6842
|
vertical-align: -2px;
|
|
@@ -6936,7 +6953,7 @@ a.q1-card:focus-visible {
|
|
|
6936
6953
|
padding: var(--q1-space-4) var(--q1-space-6);
|
|
6937
6954
|
border-top: 1px solid var(--q1-color-border);
|
|
6938
6955
|
}
|
|
6939
|
-
/*
|
|
6956
|
+
/* 遮罩(对标外部参考):黑 80% 压暗底层页面,拦截外部点击但点击不关闭;恒黑 token 两主题一致。 */
|
|
6940
6957
|
.sheet__backdrop {
|
|
6941
6958
|
position: fixed;
|
|
6942
6959
|
inset: 0;
|
|
@@ -6956,7 +6973,7 @@ a.q1-card:focus-visible {
|
|
|
6956
6973
|
}
|
|
6957
6974
|
}
|
|
6958
6975
|
|
|
6959
|
-
/*
|
|
6976
|
+
/* 悬浮圆角面板(对标外部参考形态):四边不贴屏,inset 12 + 圆角 + 全边框。 */
|
|
6960
6977
|
.sheet__panel {
|
|
6961
6978
|
position: fixed;
|
|
6962
6979
|
z-index: 70;
|
|
@@ -7026,7 +7043,7 @@ a.q1-card:focus-visible {
|
|
|
7026
7043
|
transform: translateY(calc(100% + var(--q1-space-3)));
|
|
7027
7044
|
}
|
|
7028
7045
|
}
|
|
7029
|
-
/*
|
|
7046
|
+
/* 头/尾无分隔线(对标外部参考):层级靠 24px 留白,不画线。 */
|
|
7030
7047
|
.sheet__header {
|
|
7031
7048
|
display: flex;
|
|
7032
7049
|
align-items: center;
|