@mrchar/cumquat 0.0.0-stage → 0.1.1
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/LICENSE +21 -0
- package/README.md +90 -2
- package/dist/components/index.d.ts +4372 -0
- package/dist/components/index.js +10368 -0
- package/dist/composables/index.d.ts +1962 -0
- package/dist/composables/index.js +4135 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/package.json +62 -4
- package/style.css +2 -0
- package/themes/basic.css +2783 -0
- package/themes/dark.css +41 -0
- package/themes/glass.css +265 -0
- package/themes/high-contrast.css +45 -0
- package/themes/light.css +11 -0
package/themes/basic.css
ADDED
|
@@ -0,0 +1,2783 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Cumquat 基础主题（basic）
|
|
3
|
+
*
|
|
4
|
+
* 所有组件的完整样式定义：布局、间距、圆角、阴影、字体、排版与颜色。
|
|
5
|
+
* 语义 token 通过 Tailwind v4 @theme 在本文件注册（取值来自 Tailwind
|
|
6
|
+
* 内置色板），因此其他主题只需在本主题之后覆盖同名 token 或个别规则
|
|
7
|
+
* 即可整体换肤。
|
|
8
|
+
*
|
|
9
|
+
* 用法：在入口 CSS 中于 tailwindcss 之后引入本文件，
|
|
10
|
+
* 再引入 light / dark / high-contrast / glass 等差异主题。
|
|
11
|
+
*
|
|
12
|
+
* 注意：本文件保持单文件形态、不含嵌套 @import，避免在 dev 模式下
|
|
13
|
+
* 经包名导入时嵌套样式丢失的问题。
|
|
14
|
+
*/
|
|
15
|
+
@theme {
|
|
16
|
+
/* 品牌主色 */
|
|
17
|
+
--color-cumquat-accent: #4f46e5;
|
|
18
|
+
--color-cumquat-accent-hover: #4338ca;
|
|
19
|
+
--color-cumquat-accent-active: #3730a3;
|
|
20
|
+
--color-cumquat-accent-soft: #eef2ff;
|
|
21
|
+
|
|
22
|
+
/* 品牌主色色阶（与 accent 同族的 indigo 阶） */
|
|
23
|
+
--color-cumquat-primary-50: #eef2ff;
|
|
24
|
+
--color-cumquat-primary-100: #e0e7ff;
|
|
25
|
+
--color-cumquat-primary-200: #c7d2fe;
|
|
26
|
+
--color-cumquat-primary-300: #a5b4fc;
|
|
27
|
+
--color-cumquat-primary-400: #818cf8;
|
|
28
|
+
--color-cumquat-primary-500: #6366f1;
|
|
29
|
+
--color-cumquat-primary-600: #4f46e5;
|
|
30
|
+
--color-cumquat-primary-700: #4338ca;
|
|
31
|
+
--color-cumquat-primary-800: #3730a3;
|
|
32
|
+
--color-cumquat-primary-900: #312e81;
|
|
33
|
+
|
|
34
|
+
/* 表面 / 背景 */
|
|
35
|
+
--color-cumquat-surface: #ffffff;
|
|
36
|
+
--color-cumquat-surface-2: #f8fafc;
|
|
37
|
+
--color-cumquat-surface-3: #f1f5f9;
|
|
38
|
+
|
|
39
|
+
/* 描边 */
|
|
40
|
+
--color-cumquat-border: #e2e8f0;
|
|
41
|
+
--color-cumquat-border-strong: #cbd5e1;
|
|
42
|
+
|
|
43
|
+
/* 遮罩 */
|
|
44
|
+
--color-cumquat-overlay: #0f172a;
|
|
45
|
+
|
|
46
|
+
/* 文本 */
|
|
47
|
+
--color-cumquat-text: #0f172a;
|
|
48
|
+
--color-cumquat-text-muted: #64748b;
|
|
49
|
+
--color-cumquat-text-disabled: #94a3b8;
|
|
50
|
+
--color-cumquat-text-inverse: #ffffff;
|
|
51
|
+
|
|
52
|
+
/* 语义状态色 */
|
|
53
|
+
--color-cumquat-success: #16a34a;
|
|
54
|
+
--color-cumquat-success-soft: #dcfce7;
|
|
55
|
+
--color-cumquat-warning: #d97706;
|
|
56
|
+
--color-cumquat-warning-soft: #fef3c7;
|
|
57
|
+
--color-cumquat-danger: #dc2626;
|
|
58
|
+
--color-cumquat-danger-soft: #fee2e2;
|
|
59
|
+
--color-cumquat-info: #0284c7;
|
|
60
|
+
--color-cumquat-info-soft: #e0f2fe;
|
|
61
|
+
|
|
62
|
+
/* 圆角与阴影 */
|
|
63
|
+
--radius-cumquat: 0.5rem;
|
|
64
|
+
--shadow-cumquat-overlay: 0 4px 16px rgb(0 0 0 / 0.12);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/*
|
|
68
|
+
* 基础主题 · 共享过渡与 basic 场景组件
|
|
69
|
+
* （Button / Icon / Input / Card / Divider / Avatar / Badge / Statistic / Typography / Tag / Empty）
|
|
70
|
+
*/
|
|
71
|
+
@layer components {
|
|
72
|
+
/* 共享淡入淡出过渡：<Transition name="cumquat-fade"> */
|
|
73
|
+
.cumquat-fade-enter-active,
|
|
74
|
+
.cumquat-fade-leave-active {
|
|
75
|
+
@apply transition-opacity duration-150;
|
|
76
|
+
}
|
|
77
|
+
.cumquat-fade-enter-from,
|
|
78
|
+
.cumquat-fade-leave-to {
|
|
79
|
+
@apply opacity-0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* ---------- Button ---------- */
|
|
83
|
+
.cumquat-button {
|
|
84
|
+
@apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-cumquat font-medium transition-colors;
|
|
85
|
+
@apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cumquat-accent;
|
|
86
|
+
@apply disabled:cursor-not-allowed disabled:opacity-50;
|
|
87
|
+
}
|
|
88
|
+
.cumquat-button--primary {
|
|
89
|
+
@apply bg-cumquat-accent text-cumquat-text-inverse;
|
|
90
|
+
}
|
|
91
|
+
.cumquat-button--primary:hover {
|
|
92
|
+
@apply bg-cumquat-accent-hover;
|
|
93
|
+
}
|
|
94
|
+
.cumquat-button--primary:active {
|
|
95
|
+
@apply bg-cumquat-accent-active;
|
|
96
|
+
}
|
|
97
|
+
.cumquat-button--secondary {
|
|
98
|
+
@apply border border-cumquat-border bg-cumquat-surface text-cumquat-text;
|
|
99
|
+
}
|
|
100
|
+
.cumquat-button--secondary:hover {
|
|
101
|
+
@apply border-cumquat-border-strong bg-cumquat-surface-2;
|
|
102
|
+
}
|
|
103
|
+
.cumquat-button--danger {
|
|
104
|
+
@apply bg-cumquat-danger text-cumquat-text-inverse;
|
|
105
|
+
}
|
|
106
|
+
.cumquat-button--danger:hover {
|
|
107
|
+
@apply opacity-90;
|
|
108
|
+
}
|
|
109
|
+
.cumquat-button--ghost {
|
|
110
|
+
@apply text-cumquat-text;
|
|
111
|
+
}
|
|
112
|
+
.cumquat-button--ghost:hover {
|
|
113
|
+
@apply bg-cumquat-surface-3;
|
|
114
|
+
}
|
|
115
|
+
.cumquat-button--sm {
|
|
116
|
+
@apply h-8 px-3 text-xs;
|
|
117
|
+
}
|
|
118
|
+
.cumquat-button--md {
|
|
119
|
+
@apply h-10 px-4 text-sm;
|
|
120
|
+
}
|
|
121
|
+
.cumquat-button--lg {
|
|
122
|
+
@apply h-11 px-6 text-base;
|
|
123
|
+
}
|
|
124
|
+
.cumquat-button--block {
|
|
125
|
+
@apply w-full;
|
|
126
|
+
}
|
|
127
|
+
.cumquat-button__spinner {
|
|
128
|
+
@apply size-4 animate-spin;
|
|
129
|
+
}
|
|
130
|
+
.cumquat-button__spinner-track {
|
|
131
|
+
@apply opacity-25;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* ---------- Icon ---------- */
|
|
135
|
+
.cumquat-icon {
|
|
136
|
+
@apply size-4 shrink-0;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* ---------- Input ---------- */
|
|
140
|
+
.cumquat-input {
|
|
141
|
+
@apply relative inline-flex w-full items-center;
|
|
142
|
+
}
|
|
143
|
+
.cumquat-input__inner {
|
|
144
|
+
@apply w-full rounded-cumquat border border-cumquat-border bg-cumquat-surface px-3 text-cumquat-text transition-colors;
|
|
145
|
+
@apply placeholder:text-cumquat-text-muted focus:border-cumquat-accent focus:outline-none focus:ring-2 focus:ring-cumquat-accent/20;
|
|
146
|
+
@apply disabled:cursor-not-allowed disabled:bg-cumquat-surface-3 disabled:opacity-60;
|
|
147
|
+
}
|
|
148
|
+
.cumquat-input--sm .cumquat-input__inner {
|
|
149
|
+
@apply h-8 text-xs;
|
|
150
|
+
}
|
|
151
|
+
.cumquat-input--md .cumquat-input__inner {
|
|
152
|
+
@apply h-10 text-sm;
|
|
153
|
+
}
|
|
154
|
+
.cumquat-input--lg .cumquat-input__inner {
|
|
155
|
+
@apply h-11 text-base;
|
|
156
|
+
}
|
|
157
|
+
.cumquat-input--invalid .cumquat-input__inner {
|
|
158
|
+
@apply border-cumquat-danger focus:border-cumquat-danger focus:ring-cumquat-danger/20;
|
|
159
|
+
}
|
|
160
|
+
.cumquat-input--prefix .cumquat-input__inner {
|
|
161
|
+
@apply pl-9;
|
|
162
|
+
}
|
|
163
|
+
.cumquat-input--suffix .cumquat-input__inner {
|
|
164
|
+
@apply pr-9;
|
|
165
|
+
}
|
|
166
|
+
.cumquat-input__prefix {
|
|
167
|
+
@apply pointer-events-none absolute left-3 flex items-center text-cumquat-text-muted;
|
|
168
|
+
}
|
|
169
|
+
.cumquat-input__suffix {
|
|
170
|
+
@apply pointer-events-none absolute right-3 flex items-center text-cumquat-text-muted;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* ---------- Card ---------- */
|
|
174
|
+
.cumquat-card {
|
|
175
|
+
@apply overflow-hidden rounded-cumquat bg-cumquat-surface transition-shadow;
|
|
176
|
+
}
|
|
177
|
+
.cumquat-card--bordered {
|
|
178
|
+
@apply border border-cumquat-border;
|
|
179
|
+
}
|
|
180
|
+
.cumquat-card--hoverable:hover {
|
|
181
|
+
@apply shadow-cumquat-overlay;
|
|
182
|
+
}
|
|
183
|
+
.cumquat-card__header {
|
|
184
|
+
@apply border-b border-cumquat-border px-5 py-4;
|
|
185
|
+
}
|
|
186
|
+
.cumquat-card__title {
|
|
187
|
+
@apply text-base font-semibold text-cumquat-text;
|
|
188
|
+
}
|
|
189
|
+
.cumquat-card__body {
|
|
190
|
+
@apply px-5 py-4 text-sm text-cumquat-text;
|
|
191
|
+
}
|
|
192
|
+
.cumquat-card__footer {
|
|
193
|
+
@apply border-t border-cumquat-border bg-cumquat-surface-2 px-5 py-3 text-sm text-cumquat-text-muted;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* ---------- Divider ---------- */
|
|
197
|
+
.cumquat-divider {
|
|
198
|
+
@apply flex items-center text-sm text-cumquat-text-muted;
|
|
199
|
+
}
|
|
200
|
+
.cumquat-divider--horizontal {
|
|
201
|
+
@apply my-4 w-full;
|
|
202
|
+
}
|
|
203
|
+
.cumquat-divider--vertical {
|
|
204
|
+
@apply mx-1 h-4 self-stretch;
|
|
205
|
+
}
|
|
206
|
+
.cumquat-divider__line {
|
|
207
|
+
@apply flex-1;
|
|
208
|
+
}
|
|
209
|
+
.cumquat-divider--horizontal .cumquat-divider__line {
|
|
210
|
+
@apply h-px bg-cumquat-border;
|
|
211
|
+
}
|
|
212
|
+
.cumquat-divider--horizontal.cumquat-divider--dashed .cumquat-divider__line {
|
|
213
|
+
@apply h-0 border-t border-dashed border-cumquat-border bg-transparent;
|
|
214
|
+
}
|
|
215
|
+
.cumquat-divider--vertical .cumquat-divider__line {
|
|
216
|
+
@apply w-px bg-cumquat-border;
|
|
217
|
+
}
|
|
218
|
+
.cumquat-divider--vertical.cumquat-divider--dashed .cumquat-divider__line {
|
|
219
|
+
@apply w-0 border-l border-dashed border-cumquat-border bg-transparent;
|
|
220
|
+
}
|
|
221
|
+
.cumquat-divider__label {
|
|
222
|
+
@apply px-3;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* ---------- Avatar ---------- */
|
|
226
|
+
.cumquat-avatar {
|
|
227
|
+
@apply inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-cumquat-surface-3 font-medium text-cumquat-text-muted;
|
|
228
|
+
}
|
|
229
|
+
.cumquat-avatar--sm {
|
|
230
|
+
@apply size-8 text-xs;
|
|
231
|
+
}
|
|
232
|
+
.cumquat-avatar--md {
|
|
233
|
+
@apply size-10 text-sm;
|
|
234
|
+
}
|
|
235
|
+
.cumquat-avatar--lg {
|
|
236
|
+
@apply size-12 text-base;
|
|
237
|
+
}
|
|
238
|
+
.cumquat-avatar--circle {
|
|
239
|
+
@apply rounded-full;
|
|
240
|
+
}
|
|
241
|
+
.cumquat-avatar--square {
|
|
242
|
+
@apply rounded-cumquat;
|
|
243
|
+
}
|
|
244
|
+
.cumquat-avatar__img {
|
|
245
|
+
@apply size-full object-cover;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/* ---------- Badge ---------- */
|
|
249
|
+
.cumquat-badge {
|
|
250
|
+
@apply relative inline-flex;
|
|
251
|
+
}
|
|
252
|
+
.cumquat-badge__sup {
|
|
253
|
+
@apply absolute -top-1.5 -right-1.5 flex h-4.5 min-w-4.5 items-center justify-center rounded-full border-2 border-cumquat-surface bg-cumquat-danger px-1 text-[0.65rem] font-medium text-cumquat-text-inverse;
|
|
254
|
+
}
|
|
255
|
+
.cumquat-badge__sup--dot {
|
|
256
|
+
@apply size-2.5 min-w-0 px-0;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* ---------- Statistic ---------- */
|
|
260
|
+
.cumquat-statistic {
|
|
261
|
+
@apply flex flex-col gap-1;
|
|
262
|
+
}
|
|
263
|
+
.cumquat-statistic__title {
|
|
264
|
+
@apply text-sm text-cumquat-text-muted;
|
|
265
|
+
}
|
|
266
|
+
.cumquat-statistic__value {
|
|
267
|
+
@apply flex items-baseline gap-0.5 font-semibold text-cumquat-text;
|
|
268
|
+
}
|
|
269
|
+
.cumquat-statistic__prefix {
|
|
270
|
+
@apply text-base;
|
|
271
|
+
}
|
|
272
|
+
.cumquat-statistic__number {
|
|
273
|
+
@apply text-3xl tracking-tight tabular-nums;
|
|
274
|
+
}
|
|
275
|
+
.cumquat-statistic__suffix {
|
|
276
|
+
@apply text-base text-cumquat-text-muted;
|
|
277
|
+
}
|
|
278
|
+
.cumquat-statistic__state {
|
|
279
|
+
@apply text-base text-cumquat-text-muted;
|
|
280
|
+
}
|
|
281
|
+
.cumquat-statistic__state.cq-state--error {
|
|
282
|
+
@apply text-cumquat-danger;
|
|
283
|
+
}
|
|
284
|
+
.cumquat-statistic__retry {
|
|
285
|
+
@apply ml-1 cursor-pointer bg-transparent underline underline-offset-2;
|
|
286
|
+
}
|
|
287
|
+
.cumquat-statistic__retry:hover {
|
|
288
|
+
@apply opacity-80;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/* ---------- Typography ---------- */
|
|
292
|
+
.cumquat-typography {
|
|
293
|
+
@apply m-0 text-base text-cumquat-text;
|
|
294
|
+
}
|
|
295
|
+
.cumquat-typography--1 {
|
|
296
|
+
@apply text-3xl font-bold;
|
|
297
|
+
}
|
|
298
|
+
.cumquat-typography--2 {
|
|
299
|
+
@apply text-2xl font-bold;
|
|
300
|
+
}
|
|
301
|
+
.cumquat-typography--3 {
|
|
302
|
+
@apply text-xl font-semibold;
|
|
303
|
+
}
|
|
304
|
+
.cumquat-typography--4 {
|
|
305
|
+
@apply text-lg font-semibold;
|
|
306
|
+
}
|
|
307
|
+
.cumquat-typography--ellipsis {
|
|
308
|
+
@apply truncate;
|
|
309
|
+
}
|
|
310
|
+
.cumquat-typography__copy {
|
|
311
|
+
@apply ml-1.5 inline-flex size-5 cursor-pointer items-center justify-center align-text-bottom text-cumquat-text-muted transition-colors;
|
|
312
|
+
}
|
|
313
|
+
.cumquat-typography__copy:hover {
|
|
314
|
+
@apply text-cumquat-accent;
|
|
315
|
+
}
|
|
316
|
+
.cumquat-typography__copy-icon {
|
|
317
|
+
@apply size-3.5;
|
|
318
|
+
}
|
|
319
|
+
.cumquat-typography__copy-icon--success {
|
|
320
|
+
@apply text-cumquat-success;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
/* ---------- Tag ---------- */
|
|
324
|
+
.cumquat-tag {
|
|
325
|
+
@apply inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium;
|
|
326
|
+
}
|
|
327
|
+
.cumquat-tag--default {
|
|
328
|
+
@apply bg-cumquat-surface-3 text-cumquat-text;
|
|
329
|
+
}
|
|
330
|
+
.cumquat-tag--primary {
|
|
331
|
+
@apply bg-cumquat-accent-soft text-cumquat-accent;
|
|
332
|
+
}
|
|
333
|
+
.cumquat-tag--success {
|
|
334
|
+
@apply bg-cumquat-success-soft text-cumquat-success;
|
|
335
|
+
}
|
|
336
|
+
.cumquat-tag--warning {
|
|
337
|
+
@apply bg-cumquat-warning-soft text-cumquat-warning;
|
|
338
|
+
}
|
|
339
|
+
.cumquat-tag--danger {
|
|
340
|
+
@apply bg-cumquat-danger-soft text-cumquat-danger;
|
|
341
|
+
}
|
|
342
|
+
.cumquat-tag__close {
|
|
343
|
+
@apply cursor-pointer opacity-60 transition-opacity;
|
|
344
|
+
}
|
|
345
|
+
.cumquat-tag__close:hover {
|
|
346
|
+
@apply opacity-100;
|
|
347
|
+
}
|
|
348
|
+
.cumquat-tag__close-icon {
|
|
349
|
+
@apply size-3;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* ---------- Empty ---------- */
|
|
353
|
+
.cumquat-empty {
|
|
354
|
+
@apply flex flex-col items-center justify-center gap-3 px-6 py-12;
|
|
355
|
+
}
|
|
356
|
+
.cumquat-empty__image {
|
|
357
|
+
@apply size-16 text-cumquat-border-strong;
|
|
358
|
+
}
|
|
359
|
+
.cumquat-empty__description {
|
|
360
|
+
@apply text-sm text-cumquat-text-muted;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
/*
|
|
365
|
+
* 基础主题 · form-controls 场景组件
|
|
366
|
+
* （Select / Checkbox / Radio / RadioGroup / Switch / InputNumber / Rate /
|
|
367
|
+
* Segmented / AutoComplete / Mention / Form / FormItem / TreeSelect / Slider）
|
|
368
|
+
*/
|
|
369
|
+
@layer components {
|
|
370
|
+
/* ---------- Select ---------- */
|
|
371
|
+
.cumquat-select {
|
|
372
|
+
@apply relative inline-block w-full;
|
|
373
|
+
}
|
|
374
|
+
.cumquat-select__trigger {
|
|
375
|
+
@apply flex h-10 w-full cursor-pointer items-center justify-between gap-2 rounded-cumquat border border-cumquat-border px-3 text-sm transition-colors;
|
|
376
|
+
@apply focus:outline-none focus:ring-2 focus:ring-cumquat-accent/20;
|
|
377
|
+
@apply disabled:cursor-not-allowed disabled:bg-cumquat-surface-3 disabled:opacity-60;
|
|
378
|
+
}
|
|
379
|
+
.cumquat-select__trigger--open {
|
|
380
|
+
@apply border-cumquat-accent;
|
|
381
|
+
}
|
|
382
|
+
/* 多选：标签可换行，高度自适应 */
|
|
383
|
+
.cumquat-select__trigger--multiple {
|
|
384
|
+
@apply h-auto min-h-10 flex-wrap justify-start gap-1 py-1.5;
|
|
385
|
+
}
|
|
386
|
+
.cumquat-select__tag {
|
|
387
|
+
@apply inline-flex max-w-full items-center gap-1 rounded-cumquat bg-cumquat-surface-3 px-2 py-0.5 text-xs text-cumquat-text;
|
|
388
|
+
}
|
|
389
|
+
.cumquat-select__tag-close {
|
|
390
|
+
@apply flex size-3.5 shrink-0 cursor-pointer items-center justify-center rounded-full text-cumquat-text-muted transition-colors;
|
|
391
|
+
}
|
|
392
|
+
.cumquat-select__tag-close:hover {
|
|
393
|
+
@apply bg-cumquat-danger/10 text-cumquat-danger;
|
|
394
|
+
}
|
|
395
|
+
.cumquat-select__tag-close-icon {
|
|
396
|
+
@apply size-3;
|
|
397
|
+
}
|
|
398
|
+
.cumquat-select__search {
|
|
399
|
+
@apply min-w-0 flex-1 border-0 bg-transparent text-sm text-cumquat-text outline-none placeholder:text-cumquat-text-muted;
|
|
400
|
+
}
|
|
401
|
+
.cumquat-select__clear {
|
|
402
|
+
@apply flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-cumquat-text-muted transition-colors;
|
|
403
|
+
}
|
|
404
|
+
.cumquat-select__clear:hover {
|
|
405
|
+
@apply bg-cumquat-surface-2 text-cumquat-text;
|
|
406
|
+
}
|
|
407
|
+
.cumquat-select__clear-icon {
|
|
408
|
+
@apply size-3.5;
|
|
409
|
+
}
|
|
410
|
+
.cumquat-select__value {
|
|
411
|
+
@apply text-cumquat-text;
|
|
412
|
+
}
|
|
413
|
+
.cumquat-select__value--placeholder {
|
|
414
|
+
@apply text-cumquat-text-muted;
|
|
415
|
+
}
|
|
416
|
+
.cumquat-select__arrow {
|
|
417
|
+
@apply size-4 text-cumquat-text-muted transition-transform;
|
|
418
|
+
}
|
|
419
|
+
.cumquat-select__arrow--open {
|
|
420
|
+
@apply rotate-180;
|
|
421
|
+
}
|
|
422
|
+
.cumquat-select__dropdown {
|
|
423
|
+
@apply absolute z-20 mt-1.5 max-h-60 w-full overflow-auto rounded-cumquat border border-cumquat-border bg-cumquat-surface py-1 shadow-cumquat-overlay;
|
|
424
|
+
}
|
|
425
|
+
/* 虚拟滚动占位行：仅用于撑高，不参与交互 */
|
|
426
|
+
.cumquat-select__spacer {
|
|
427
|
+
@apply pointer-events-none p-0;
|
|
428
|
+
}
|
|
429
|
+
.cumquat-select__group-title {
|
|
430
|
+
@apply px-3 py-1 text-xs font-medium text-cumquat-text-muted;
|
|
431
|
+
}
|
|
432
|
+
.cumquat-select__option {
|
|
433
|
+
@apply cursor-pointer px-3 py-2 text-sm text-cumquat-text transition-colors;
|
|
434
|
+
}
|
|
435
|
+
.cumquat-select__option:not(.cumquat-select__option--disabled):not(
|
|
436
|
+
.cumquat-select__option--active
|
|
437
|
+
):hover {
|
|
438
|
+
@apply bg-cumquat-surface-2;
|
|
439
|
+
}
|
|
440
|
+
.cumquat-select__option--active {
|
|
441
|
+
@apply bg-cumquat-accent-soft font-medium text-cumquat-accent;
|
|
442
|
+
}
|
|
443
|
+
.cumquat-select__option--disabled {
|
|
444
|
+
@apply cursor-not-allowed text-cumquat-text-muted opacity-50;
|
|
445
|
+
}
|
|
446
|
+
.cumquat-select__loading,
|
|
447
|
+
.cumquat-select__empty {
|
|
448
|
+
@apply px-3 py-2 text-sm text-cumquat-text-muted;
|
|
449
|
+
}
|
|
450
|
+
.cumquat-select__error {
|
|
451
|
+
@apply flex items-center gap-2 px-3 py-2 text-sm text-cumquat-danger;
|
|
452
|
+
}
|
|
453
|
+
.cumquat-select__retry {
|
|
454
|
+
@apply cursor-pointer bg-transparent underline underline-offset-2;
|
|
455
|
+
}
|
|
456
|
+
.cumquat-select__retry:hover {
|
|
457
|
+
@apply opacity-80;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
/* ---------- Checkbox ---------- */
|
|
461
|
+
.cumquat-checkbox {
|
|
462
|
+
@apply inline-flex cursor-pointer items-center gap-2 text-sm text-cumquat-text select-none;
|
|
463
|
+
}
|
|
464
|
+
.cumquat-checkbox--disabled {
|
|
465
|
+
@apply cursor-not-allowed opacity-50;
|
|
466
|
+
}
|
|
467
|
+
.cumquat-checkbox__input {
|
|
468
|
+
@apply sr-only;
|
|
469
|
+
}
|
|
470
|
+
.cumquat-checkbox__input:focus-visible + .cumquat-checkbox__box {
|
|
471
|
+
@apply outline-2 outline-offset-2 outline-cumquat-accent;
|
|
472
|
+
}
|
|
473
|
+
.cumquat-checkbox__box {
|
|
474
|
+
@apply flex size-4.5 shrink-0 items-center justify-center rounded border border-cumquat-border-strong bg-cumquat-surface transition-colors;
|
|
475
|
+
}
|
|
476
|
+
.cumquat-checkbox__box--active {
|
|
477
|
+
@apply border-cumquat-accent bg-cumquat-accent text-cumquat-text-inverse;
|
|
478
|
+
}
|
|
479
|
+
.cumquat-checkbox__icon {
|
|
480
|
+
@apply size-3;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
/* ---------- Radio ---------- */
|
|
484
|
+
.cumquat-radio {
|
|
485
|
+
@apply inline-flex cursor-pointer items-center gap-2 text-sm text-cumquat-text select-none;
|
|
486
|
+
}
|
|
487
|
+
.cumquat-radio--disabled {
|
|
488
|
+
@apply cursor-not-allowed opacity-50;
|
|
489
|
+
}
|
|
490
|
+
.cumquat-radio__input {
|
|
491
|
+
@apply sr-only;
|
|
492
|
+
}
|
|
493
|
+
.cumquat-radio__input:focus-visible + .cumquat-radio__dot {
|
|
494
|
+
@apply outline-2 outline-offset-2 outline-cumquat-accent;
|
|
495
|
+
}
|
|
496
|
+
.cumquat-radio__dot {
|
|
497
|
+
@apply flex size-4.5 shrink-0 items-center justify-center rounded-full border border-cumquat-border-strong bg-cumquat-surface transition-colors;
|
|
498
|
+
}
|
|
499
|
+
.cumquat-radio__dot--checked {
|
|
500
|
+
@apply border-cumquat-accent;
|
|
501
|
+
}
|
|
502
|
+
.cumquat-radio__inner {
|
|
503
|
+
@apply size-2 rounded-full bg-transparent transition-colors;
|
|
504
|
+
}
|
|
505
|
+
.cumquat-radio__inner--checked {
|
|
506
|
+
@apply bg-cumquat-accent;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
/* ---------- RadioGroup ---------- */
|
|
510
|
+
.cumquat-radio-group--horizontal {
|
|
511
|
+
@apply flex flex-wrap items-center gap-4;
|
|
512
|
+
}
|
|
513
|
+
.cumquat-radio-group--vertical {
|
|
514
|
+
@apply flex flex-col items-start gap-2.5;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
/* ---------- Switch ---------- */
|
|
518
|
+
.cumquat-switch {
|
|
519
|
+
@apply relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-cumquat-border-strong transition-colors;
|
|
520
|
+
@apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cumquat-accent;
|
|
521
|
+
@apply disabled:cursor-not-allowed disabled:opacity-50;
|
|
522
|
+
}
|
|
523
|
+
.cumquat-switch--checked {
|
|
524
|
+
@apply bg-cumquat-accent;
|
|
525
|
+
}
|
|
526
|
+
.cumquat-switch__thumb {
|
|
527
|
+
@apply pointer-events-none inline-block size-4.5 translate-x-0.5 transform rounded-full bg-white shadow transition-transform;
|
|
528
|
+
}
|
|
529
|
+
.cumquat-switch__thumb--checked {
|
|
530
|
+
@apply translate-x-5;
|
|
531
|
+
}
|
|
532
|
+
.cumquat-switch__label {
|
|
533
|
+
@apply ml-2 text-sm text-cumquat-text select-none;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
/* ---------- InputNumber ---------- */
|
|
537
|
+
.cumquat-input-number {
|
|
538
|
+
@apply inline-flex h-10 items-stretch overflow-hidden rounded-cumquat border border-cumquat-border bg-cumquat-surface transition-colors;
|
|
539
|
+
@apply focus-within:border-cumquat-accent focus-within:ring-2 focus-within:ring-cumquat-accent/20;
|
|
540
|
+
}
|
|
541
|
+
.cumquat-input-number--disabled {
|
|
542
|
+
@apply cursor-not-allowed opacity-60;
|
|
543
|
+
}
|
|
544
|
+
.cumquat-input-number__decrease {
|
|
545
|
+
@apply flex w-9 cursor-pointer items-center justify-center text-cumquat-text-muted transition-colors;
|
|
546
|
+
@apply disabled:cursor-not-allowed disabled:opacity-40;
|
|
547
|
+
}
|
|
548
|
+
.cumquat-input-number__decrease:hover {
|
|
549
|
+
@apply bg-cumquat-surface-2 text-cumquat-text;
|
|
550
|
+
}
|
|
551
|
+
.cumquat-input-number__increase {
|
|
552
|
+
@apply flex w-9 cursor-pointer items-center justify-center text-cumquat-text-muted transition-colors;
|
|
553
|
+
@apply disabled:cursor-not-allowed disabled:opacity-40;
|
|
554
|
+
}
|
|
555
|
+
.cumquat-input-number__increase:hover {
|
|
556
|
+
@apply bg-cumquat-surface-2 text-cumquat-text;
|
|
557
|
+
}
|
|
558
|
+
.cumquat-input-number__input {
|
|
559
|
+
@apply w-14 border-x border-cumquat-border bg-transparent text-center text-sm text-cumquat-text;
|
|
560
|
+
@apply focus:outline-none disabled:cursor-not-allowed;
|
|
561
|
+
}
|
|
562
|
+
.cumquat-input-number__icon {
|
|
563
|
+
@apply size-3.5;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
/* ---------- Rate ---------- */
|
|
567
|
+
.cumquat-rate {
|
|
568
|
+
@apply inline-flex items-center gap-1;
|
|
569
|
+
}
|
|
570
|
+
.cumquat-rate__star {
|
|
571
|
+
@apply cursor-pointer text-cumquat-border-strong transition-transform;
|
|
572
|
+
}
|
|
573
|
+
.cumquat-rate__star:not(.cumquat-rate__star--disabled):hover {
|
|
574
|
+
@apply scale-110;
|
|
575
|
+
}
|
|
576
|
+
.cumquat-rate__star--active {
|
|
577
|
+
@apply text-cumquat-warning;
|
|
578
|
+
}
|
|
579
|
+
.cumquat-rate__star--disabled {
|
|
580
|
+
@apply cursor-not-allowed opacity-50;
|
|
581
|
+
}
|
|
582
|
+
.cumquat-rate__icon {
|
|
583
|
+
@apply size-6;
|
|
584
|
+
}
|
|
585
|
+
.cumquat-rate__value {
|
|
586
|
+
@apply ml-1.5 text-sm text-cumquat-text-muted;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
/* ---------- Segmented ---------- */
|
|
590
|
+
.cumquat-segmented {
|
|
591
|
+
@apply inline-flex gap-1 rounded-cumquat bg-cumquat-surface-3 p-1;
|
|
592
|
+
}
|
|
593
|
+
.cumquat-segmented__item {
|
|
594
|
+
@apply cursor-pointer rounded px-4 py-1.5 text-sm font-medium text-cumquat-text-muted transition-all;
|
|
595
|
+
@apply disabled:cursor-not-allowed disabled:opacity-50;
|
|
596
|
+
}
|
|
597
|
+
.cumquat-segmented__item:not(.cumquat-segmented__item--active):hover {
|
|
598
|
+
@apply text-cumquat-text;
|
|
599
|
+
}
|
|
600
|
+
.cumquat-segmented__item--active {
|
|
601
|
+
@apply bg-cumquat-surface text-cumquat-text shadow-sm;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
/* ---------- AutoComplete ---------- */
|
|
605
|
+
.cumquat-autocomplete {
|
|
606
|
+
@apply relative inline-block w-full;
|
|
607
|
+
}
|
|
608
|
+
.cumquat-autocomplete__input {
|
|
609
|
+
@apply h-10 w-full rounded-cumquat border border-cumquat-border bg-cumquat-surface px-3 text-sm text-cumquat-text transition-colors;
|
|
610
|
+
@apply placeholder:text-cumquat-text-muted focus:border-cumquat-accent focus:outline-none focus:ring-2 focus:ring-cumquat-accent/20;
|
|
611
|
+
}
|
|
612
|
+
.cumquat-autocomplete__dropdown {
|
|
613
|
+
@apply absolute z-20 mt-1.5 max-h-52 w-full overflow-auto rounded-cumquat border border-cumquat-border bg-cumquat-surface py-1 shadow-cumquat-overlay;
|
|
614
|
+
}
|
|
615
|
+
.cumquat-autocomplete__option {
|
|
616
|
+
@apply cursor-pointer px-3 py-2 text-sm text-cumquat-text transition-colors;
|
|
617
|
+
}
|
|
618
|
+
.cumquat-autocomplete__option:hover {
|
|
619
|
+
@apply bg-cumquat-surface-2;
|
|
620
|
+
}
|
|
621
|
+
.cumquat-autocomplete__state {
|
|
622
|
+
@apply flex items-center gap-2 px-3 py-2 text-sm text-cumquat-text-muted;
|
|
623
|
+
}
|
|
624
|
+
.cumquat-autocomplete__state.cq-state--error {
|
|
625
|
+
@apply text-cumquat-danger;
|
|
626
|
+
}
|
|
627
|
+
.cumquat-autocomplete__retry {
|
|
628
|
+
@apply cursor-pointer bg-transparent underline underline-offset-2;
|
|
629
|
+
}
|
|
630
|
+
.cumquat-autocomplete__retry:hover {
|
|
631
|
+
@apply opacity-80;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
/* ---------- Mention ---------- */
|
|
635
|
+
.cumquat-mention {
|
|
636
|
+
@apply relative inline-block w-full;
|
|
637
|
+
}
|
|
638
|
+
.cumquat-mention__input {
|
|
639
|
+
@apply h-10 w-full rounded-cumquat border border-cumquat-border bg-cumquat-surface px-3 text-sm text-cumquat-text transition-colors;
|
|
640
|
+
@apply placeholder:text-cumquat-text-muted focus:border-cumquat-accent focus:outline-none focus:ring-2 focus:ring-cumquat-accent/20;
|
|
641
|
+
}
|
|
642
|
+
.cumquat-mention__dropdown {
|
|
643
|
+
@apply absolute z-20 mt-1.5 max-h-44 w-full overflow-auto rounded-cumquat border border-cumquat-border bg-cumquat-surface py-1 shadow-cumquat-overlay;
|
|
644
|
+
}
|
|
645
|
+
.cumquat-mention__option {
|
|
646
|
+
@apply cursor-pointer px-3 py-2 text-sm text-cumquat-text transition-colors;
|
|
647
|
+
}
|
|
648
|
+
.cumquat-mention__option:hover {
|
|
649
|
+
@apply bg-cumquat-surface-2;
|
|
650
|
+
}
|
|
651
|
+
.cumquat-mention__at {
|
|
652
|
+
@apply font-medium text-cumquat-accent;
|
|
653
|
+
}
|
|
654
|
+
.cumquat-mention__loading {
|
|
655
|
+
@apply px-3 py-2 text-sm text-cumquat-text-muted;
|
|
656
|
+
}
|
|
657
|
+
.cumquat-mention__error {
|
|
658
|
+
@apply flex items-center gap-2 px-3 py-2 text-sm text-cumquat-danger;
|
|
659
|
+
}
|
|
660
|
+
.cumquat-mention__retry {
|
|
661
|
+
@apply cursor-pointer bg-transparent underline underline-offset-2;
|
|
662
|
+
}
|
|
663
|
+
.cumquat-mention__retry:hover {
|
|
664
|
+
@apply opacity-80;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
/* ---------- Form ---------- */
|
|
668
|
+
.cumquat-form {
|
|
669
|
+
@apply flex flex-col gap-4;
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
/* ---------- FormItem ---------- */
|
|
673
|
+
.cumquat-form-item {
|
|
674
|
+
@apply flex flex-col gap-1.5;
|
|
675
|
+
}
|
|
676
|
+
.cumquat-form-item__label {
|
|
677
|
+
@apply text-sm text-cumquat-text;
|
|
678
|
+
}
|
|
679
|
+
.cumquat-form-item__required {
|
|
680
|
+
@apply mr-0.5 text-cumquat-danger;
|
|
681
|
+
}
|
|
682
|
+
.cumquat-form-item__error {
|
|
683
|
+
@apply text-xs text-cumquat-danger;
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
/* ---------- TreeSelect ---------- */
|
|
687
|
+
.cumquat-tree-select {
|
|
688
|
+
@apply relative inline-block w-full;
|
|
689
|
+
}
|
|
690
|
+
.cumquat-tree-select__trigger {
|
|
691
|
+
@apply flex h-10 w-full cursor-pointer items-center justify-between gap-2 rounded-cumquat border border-cumquat-border px-3 text-sm transition-colors;
|
|
692
|
+
@apply focus:outline-none focus:ring-2 focus:ring-cumquat-accent/20;
|
|
693
|
+
}
|
|
694
|
+
.cumquat-tree-select__trigger--open {
|
|
695
|
+
@apply border-cumquat-accent;
|
|
696
|
+
}
|
|
697
|
+
.cumquat-tree-select__value {
|
|
698
|
+
@apply text-cumquat-text;
|
|
699
|
+
}
|
|
700
|
+
.cumquat-tree-select__value--placeholder {
|
|
701
|
+
@apply text-cumquat-text-muted;
|
|
702
|
+
}
|
|
703
|
+
.cumquat-tree-select__arrow {
|
|
704
|
+
@apply size-4 text-cumquat-text-muted transition-transform;
|
|
705
|
+
}
|
|
706
|
+
.cumquat-tree-select__arrow--open {
|
|
707
|
+
@apply rotate-180;
|
|
708
|
+
}
|
|
709
|
+
.cumquat-tree-select__panel {
|
|
710
|
+
@apply absolute z-20 mt-1.5 max-h-64 w-full overflow-y-auto rounded-cumquat border border-cumquat-border bg-cumquat-surface py-1.5 shadow-cumquat-overlay;
|
|
711
|
+
}
|
|
712
|
+
.cumquat-tree-select__node {
|
|
713
|
+
@apply flex cursor-pointer items-center gap-1.5 px-3 py-2 text-sm text-cumquat-text transition-colors;
|
|
714
|
+
}
|
|
715
|
+
.cumquat-tree-select__node:hover {
|
|
716
|
+
@apply bg-cumquat-surface-2;
|
|
717
|
+
}
|
|
718
|
+
.cumquat-tree-select__expander {
|
|
719
|
+
@apply flex size-4 cursor-pointer items-center justify-center text-cumquat-text-muted transition-transform;
|
|
720
|
+
}
|
|
721
|
+
.cumquat-tree-select__expander--expanded {
|
|
722
|
+
@apply rotate-90;
|
|
723
|
+
}
|
|
724
|
+
.cumquat-tree-select__expander-icon {
|
|
725
|
+
@apply size-3.5;
|
|
726
|
+
}
|
|
727
|
+
.cumquat-tree-select__expander-spacer {
|
|
728
|
+
@apply size-4 shrink-0;
|
|
729
|
+
}
|
|
730
|
+
.cumquat-tree-select__expander--loading {
|
|
731
|
+
@apply size-4 animate-spin rounded-full border-2 border-cumquat-border border-t-cumquat-accent;
|
|
732
|
+
}
|
|
733
|
+
.cumquat-tree-select__expander--error {
|
|
734
|
+
@apply text-cumquat-danger;
|
|
735
|
+
}
|
|
736
|
+
.cumquat-tree-select__state {
|
|
737
|
+
@apply flex items-center gap-2 px-3 py-2 text-sm text-cumquat-text-muted;
|
|
738
|
+
}
|
|
739
|
+
.cumquat-tree-select__state.cq-state--error {
|
|
740
|
+
@apply text-cumquat-danger;
|
|
741
|
+
}
|
|
742
|
+
.cumquat-tree-select__retry {
|
|
743
|
+
@apply cursor-pointer bg-transparent underline underline-offset-2;
|
|
744
|
+
}
|
|
745
|
+
.cumquat-tree-select__retry:hover {
|
|
746
|
+
@apply opacity-80;
|
|
747
|
+
}
|
|
748
|
+
.cumquat-tree-select__indent {
|
|
749
|
+
@apply size-4 shrink-0;
|
|
750
|
+
}
|
|
751
|
+
.cumquat-tree-select__tree {
|
|
752
|
+
@apply py-0.5;
|
|
753
|
+
}
|
|
754
|
+
.cumquat-tree-select__search {
|
|
755
|
+
@apply sticky top-0 border-b border-cumquat-border bg-cumquat-surface p-2;
|
|
756
|
+
}
|
|
757
|
+
.cumquat-tree-select__search-input {
|
|
758
|
+
@apply h-8 w-full rounded-cumquat border border-cumquat-border bg-cumquat-surface px-2.5 text-sm text-cumquat-text outline-none;
|
|
759
|
+
@apply focus:border-cumquat-accent;
|
|
760
|
+
}
|
|
761
|
+
.cumquat-tree-select__leaf {
|
|
762
|
+
@apply flex cursor-pointer items-center py-2 pl-3 pr-3 text-sm text-cumquat-text-muted transition-colors;
|
|
763
|
+
}
|
|
764
|
+
.cumquat-tree-select__leaf:not(.cumquat-tree-select__leaf--active):hover {
|
|
765
|
+
@apply bg-cumquat-surface-2 text-cumquat-text;
|
|
766
|
+
}
|
|
767
|
+
.cumquat-tree-select__leaf--active {
|
|
768
|
+
@apply bg-cumquat-accent-soft font-medium text-cumquat-accent;
|
|
769
|
+
}
|
|
770
|
+
|
|
771
|
+
/* ---------- Slider ---------- */
|
|
772
|
+
.cumquat-slider {
|
|
773
|
+
@apply flex w-full cursor-pointer items-center;
|
|
774
|
+
}
|
|
775
|
+
.cumquat-slider--disabled {
|
|
776
|
+
@apply cursor-not-allowed opacity-50;
|
|
777
|
+
}
|
|
778
|
+
.cumquat-slider__track {
|
|
779
|
+
@apply relative h-1.5 w-full rounded-full bg-cumquat-surface-3;
|
|
780
|
+
}
|
|
781
|
+
.cumquat-slider__fill {
|
|
782
|
+
@apply absolute inset-y-0 left-0 rounded-full bg-cumquat-accent;
|
|
783
|
+
}
|
|
784
|
+
.cumquat-slider__thumb {
|
|
785
|
+
@apply absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-cumquat-accent bg-cumquat-surface shadow transition-transform;
|
|
786
|
+
}
|
|
787
|
+
.cumquat-slider:not(.cumquat-slider--disabled) .cumquat-slider__thumb:hover {
|
|
788
|
+
@apply scale-110;
|
|
789
|
+
}
|
|
790
|
+
.cumquat-slider__value {
|
|
791
|
+
@apply ml-3 w-8 text-right text-xs text-cumquat-text-muted;
|
|
792
|
+
}
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
/*
|
|
796
|
+
* 基础主题 · overlay 场景组件
|
|
797
|
+
* （Dialog / Drawer / Dropdown / Popover / Popconfirm / Tooltip）
|
|
798
|
+
*/
|
|
799
|
+
@layer components {
|
|
800
|
+
/* ---------- Dialog ---------- */
|
|
801
|
+
.cumquat-dialog {
|
|
802
|
+
@apply fixed inset-0 z-50 flex items-center justify-center p-4;
|
|
803
|
+
}
|
|
804
|
+
.cumquat-dialog__mask {
|
|
805
|
+
@apply absolute inset-0 bg-black/40;
|
|
806
|
+
}
|
|
807
|
+
.cumquat-dialog__panel {
|
|
808
|
+
@apply relative flex max-h-[85vh] w-full flex-col rounded-cumquat border border-cumquat-border bg-cumquat-surface shadow-cumquat-overlay;
|
|
809
|
+
}
|
|
810
|
+
.cumquat-dialog__header {
|
|
811
|
+
@apply flex items-center justify-between border-b border-cumquat-border px-6 py-4;
|
|
812
|
+
}
|
|
813
|
+
.cumquat-dialog__title {
|
|
814
|
+
@apply text-base font-semibold text-cumquat-text;
|
|
815
|
+
}
|
|
816
|
+
.cumquat-dialog__close {
|
|
817
|
+
@apply cursor-pointer text-cumquat-text-muted transition-colors;
|
|
818
|
+
}
|
|
819
|
+
.cumquat-dialog__close:hover {
|
|
820
|
+
@apply text-cumquat-text;
|
|
821
|
+
}
|
|
822
|
+
.cumquat-dialog__close-icon {
|
|
823
|
+
@apply size-5;
|
|
824
|
+
}
|
|
825
|
+
.cumquat-dialog__body {
|
|
826
|
+
@apply overflow-y-auto px-6 py-4 text-sm text-cumquat-text;
|
|
827
|
+
}
|
|
828
|
+
.cumquat-dialog__footer {
|
|
829
|
+
@apply flex justify-end gap-3 border-t border-cumquat-border px-6 py-4;
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
/* ---------- Drawer ---------- */
|
|
833
|
+
.cumquat-drawer {
|
|
834
|
+
@apply fixed inset-0 z-50;
|
|
835
|
+
}
|
|
836
|
+
.cumquat-drawer__mask {
|
|
837
|
+
@apply absolute inset-0 bg-black/40;
|
|
838
|
+
}
|
|
839
|
+
.cumquat-drawer__panel {
|
|
840
|
+
@apply absolute inset-y-0 right-0 flex w-80 max-w-full flex-col border-l border-cumquat-border bg-cumquat-surface shadow-cumquat-overlay;
|
|
841
|
+
}
|
|
842
|
+
.cumquat-drawer__header {
|
|
843
|
+
@apply flex items-center justify-between border-b border-cumquat-border px-5 py-4;
|
|
844
|
+
}
|
|
845
|
+
.cumquat-drawer__title {
|
|
846
|
+
@apply text-base font-semibold text-cumquat-text;
|
|
847
|
+
}
|
|
848
|
+
.cumquat-drawer__close {
|
|
849
|
+
@apply cursor-pointer text-cumquat-text-muted transition-colors;
|
|
850
|
+
}
|
|
851
|
+
.cumquat-drawer__close:hover {
|
|
852
|
+
@apply text-cumquat-text;
|
|
853
|
+
}
|
|
854
|
+
.cumquat-drawer__close-icon {
|
|
855
|
+
@apply size-5;
|
|
856
|
+
}
|
|
857
|
+
.cumquat-drawer__body {
|
|
858
|
+
@apply flex-1 overflow-y-auto px-5 py-4 text-sm text-cumquat-text;
|
|
859
|
+
}
|
|
860
|
+
.cumquat-drawer__footer {
|
|
861
|
+
@apply flex justify-end gap-3 border-t border-cumquat-border px-5 py-4;
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
/* ---------- Dropdown ---------- */
|
|
865
|
+
.cumquat-dropdown {
|
|
866
|
+
@apply relative inline-block;
|
|
867
|
+
}
|
|
868
|
+
.cumquat-dropdown__trigger {
|
|
869
|
+
@apply inline-flex;
|
|
870
|
+
}
|
|
871
|
+
.cumquat-dropdown__menu {
|
|
872
|
+
@apply absolute left-0 z-20 mt-1.5 min-w-36 rounded-cumquat border border-cumquat-border bg-cumquat-surface py-1.5 shadow-cumquat-overlay;
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
/* ---------- Popover ---------- */
|
|
876
|
+
.cumquat-popover {
|
|
877
|
+
@apply relative inline-block;
|
|
878
|
+
}
|
|
879
|
+
.cumquat-popover__trigger {
|
|
880
|
+
@apply inline-flex;
|
|
881
|
+
}
|
|
882
|
+
.cumquat-popover__content {
|
|
883
|
+
@apply absolute bottom-full left-1/2 z-20 mb-2 w-64 -translate-x-1/2 rounded-cumquat border border-cumquat-border bg-cumquat-surface p-4 text-sm shadow-cumquat-overlay;
|
|
884
|
+
}
|
|
885
|
+
.cumquat-popover__arrow {
|
|
886
|
+
@apply absolute -bottom-1.5 left-1/2 size-3 -translate-x-1/2 rotate-45 border-r border-b border-cumquat-border bg-cumquat-surface;
|
|
887
|
+
}
|
|
888
|
+
.cumquat-popover__title {
|
|
889
|
+
@apply mb-1.5 font-semibold text-cumquat-text;
|
|
890
|
+
}
|
|
891
|
+
.cumquat-popover__body {
|
|
892
|
+
@apply text-cumquat-text-muted;
|
|
893
|
+
}
|
|
894
|
+
.cumquat-popover__footer {
|
|
895
|
+
@apply mt-3 flex justify-end gap-2;
|
|
896
|
+
}
|
|
897
|
+
|
|
898
|
+
/* ---------- Popconfirm ---------- */
|
|
899
|
+
.cumquat-popconfirm {
|
|
900
|
+
@apply relative inline-block;
|
|
901
|
+
}
|
|
902
|
+
.cumquat-popconfirm__trigger {
|
|
903
|
+
@apply inline-flex;
|
|
904
|
+
}
|
|
905
|
+
.cumquat-popconfirm__content {
|
|
906
|
+
@apply absolute bottom-full left-1/2 z-20 mb-2 w-60 -translate-x-1/2 rounded-cumquat border border-cumquat-border bg-cumquat-surface p-3 text-sm shadow-cumquat-overlay;
|
|
907
|
+
}
|
|
908
|
+
.cumquat-popconfirm__arrow {
|
|
909
|
+
@apply absolute -bottom-1.5 left-1/2 size-3 -translate-x-1/2 rotate-45 border-r border-b border-cumquat-border bg-cumquat-surface;
|
|
910
|
+
}
|
|
911
|
+
.cumquat-popconfirm__text {
|
|
912
|
+
@apply text-cumquat-text;
|
|
913
|
+
}
|
|
914
|
+
.cumquat-popconfirm__actions {
|
|
915
|
+
@apply mt-2.5 flex justify-end gap-2;
|
|
916
|
+
}
|
|
917
|
+
.cumquat-popconfirm__cancel {
|
|
918
|
+
@apply cursor-pointer rounded-cumquat border border-cumquat-border px-2.5 py-1 text-xs text-cumquat-text transition-colors;
|
|
919
|
+
}
|
|
920
|
+
.cumquat-popconfirm__cancel:hover {
|
|
921
|
+
@apply bg-cumquat-surface-2;
|
|
922
|
+
}
|
|
923
|
+
.cumquat-popconfirm__ok {
|
|
924
|
+
@apply cursor-pointer rounded-cumquat bg-cumquat-accent px-2.5 py-1 text-xs text-cumquat-text-inverse transition-colors;
|
|
925
|
+
}
|
|
926
|
+
.cumquat-popconfirm__ok:hover {
|
|
927
|
+
@apply bg-cumquat-accent-hover;
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
/* ---------- Tooltip ---------- */
|
|
931
|
+
.cumquat-tooltip {
|
|
932
|
+
@apply relative inline-flex;
|
|
933
|
+
}
|
|
934
|
+
.cumquat-tooltip__content {
|
|
935
|
+
@apply pointer-events-none absolute z-20 rounded-md bg-cumquat-text px-2.5 py-1.5 text-xs whitespace-nowrap text-cumquat-text-inverse shadow-cumquat-overlay;
|
|
936
|
+
}
|
|
937
|
+
.cumquat-tooltip__content--top {
|
|
938
|
+
@apply bottom-full left-1/2 mb-1.5 -translate-x-1/2;
|
|
939
|
+
}
|
|
940
|
+
.cumquat-tooltip__content--bottom {
|
|
941
|
+
@apply top-full left-1/2 mt-1.5 -translate-x-1/2;
|
|
942
|
+
}
|
|
943
|
+
}
|
|
944
|
+
|
|
945
|
+
/*
|
|
946
|
+
* 基础主题 · data-display 场景组件
|
|
947
|
+
* （Table / Pagination / Tabs / Collapse / Tree / Cascader / Timeline / Steps / Descriptions / Carousel / Progress / Image）
|
|
948
|
+
*/
|
|
949
|
+
@layer components {
|
|
950
|
+
/* ---------- Table ---------- */
|
|
951
|
+
.cumquat-table {
|
|
952
|
+
@apply w-full overflow-x-auto rounded-cumquat border border-cumquat-border;
|
|
953
|
+
}
|
|
954
|
+
.cumquat-table__table {
|
|
955
|
+
@apply w-full border-collapse bg-cumquat-surface text-sm;
|
|
956
|
+
}
|
|
957
|
+
.cumquat-table__head-row {
|
|
958
|
+
@apply bg-cumquat-surface-2;
|
|
959
|
+
}
|
|
960
|
+
.cumquat-table__th {
|
|
961
|
+
@apply min-w-20 whitespace-nowrap border-b border-cumquat-border px-4 py-3 font-medium text-cumquat-text-muted;
|
|
962
|
+
}
|
|
963
|
+
.cumquat-table__th-title {
|
|
964
|
+
@apply inline-flex max-w-full items-center gap-1 align-bottom;
|
|
965
|
+
}
|
|
966
|
+
.cumquat-table__th-text {
|
|
967
|
+
@apply max-w-48 overflow-hidden text-ellipsis whitespace-nowrap;
|
|
968
|
+
}
|
|
969
|
+
.cumquat-table__th--left,
|
|
970
|
+
.cumquat-table__td--left {
|
|
971
|
+
@apply text-left;
|
|
972
|
+
}
|
|
973
|
+
.cumquat-table__th--center,
|
|
974
|
+
.cumquat-table__td--center {
|
|
975
|
+
@apply text-center;
|
|
976
|
+
}
|
|
977
|
+
.cumquat-table__th--right,
|
|
978
|
+
.cumquat-table__td--right {
|
|
979
|
+
@apply text-right;
|
|
980
|
+
}
|
|
981
|
+
.cumquat-table__row {
|
|
982
|
+
@apply transition-colors;
|
|
983
|
+
}
|
|
984
|
+
.cumquat-table__row:hover {
|
|
985
|
+
@apply bg-cumquat-surface-2;
|
|
986
|
+
}
|
|
987
|
+
.cumquat-table__row--striped {
|
|
988
|
+
@apply bg-cumquat-surface-2/60;
|
|
989
|
+
}
|
|
990
|
+
.cumquat-table__td {
|
|
991
|
+
@apply border-b border-cumquat-border px-4 py-3 text-cumquat-text;
|
|
992
|
+
}
|
|
993
|
+
.cumquat-table__empty {
|
|
994
|
+
@apply px-4 py-10 text-center text-cumquat-text-muted;
|
|
995
|
+
}
|
|
996
|
+
.cumquat-table__loading {
|
|
997
|
+
@apply inline-block size-5 animate-spin rounded-full border-2 border-cumquat-border border-t-cumquat-accent;
|
|
998
|
+
}
|
|
999
|
+
.cumquat-table__retry {
|
|
1000
|
+
@apply cursor-pointer bg-transparent text-cumquat-danger underline underline-offset-2;
|
|
1001
|
+
}
|
|
1002
|
+
.cumquat-table__retry:hover {
|
|
1003
|
+
@apply opacity-80;
|
|
1004
|
+
}
|
|
1005
|
+
.cumquat-table--stale .cumquat-table__table {
|
|
1006
|
+
@apply opacity-60 transition-opacity;
|
|
1007
|
+
}
|
|
1008
|
+
.cumquat-table__errorbar {
|
|
1009
|
+
@apply flex items-center gap-2 border-b border-cumquat-border px-4 py-2 text-sm text-cumquat-danger;
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
/* ---------- 单元格竞选渲染器 ---------- */
|
|
1013
|
+
.cumquat-cell--number,
|
|
1014
|
+
.cumquat-cell--date,
|
|
1015
|
+
.cumquat-cell--datetime {
|
|
1016
|
+
@apply tabular-nums;
|
|
1017
|
+
}
|
|
1018
|
+
.cumquat-cell--boolean {
|
|
1019
|
+
@apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium;
|
|
1020
|
+
}
|
|
1021
|
+
.cumquat-cell--boolean-yes {
|
|
1022
|
+
@apply bg-cumquat-accent-soft text-cumquat-accent;
|
|
1023
|
+
}
|
|
1024
|
+
.cumquat-cell--boolean-no {
|
|
1025
|
+
@apply bg-cumquat-surface-2 text-cumquat-text-muted;
|
|
1026
|
+
}
|
|
1027
|
+
.cumquat-cell--enum {
|
|
1028
|
+
@apply inline-flex items-center rounded-cumquat border border-cumquat-border bg-cumquat-surface-2 px-2 py-0.5 text-xs text-cumquat-text;
|
|
1029
|
+
}
|
|
1030
|
+
.cumquat-cell--enum-unknown {
|
|
1031
|
+
@apply border-dashed text-cumquat-text-muted;
|
|
1032
|
+
}
|
|
1033
|
+
.cumquat-cell--tag {
|
|
1034
|
+
@apply inline-flex items-center rounded-cumquat bg-cumquat-accent-soft px-2 py-0.5 text-xs text-cumquat-accent;
|
|
1035
|
+
}
|
|
1036
|
+
.cumquat-cell--email,
|
|
1037
|
+
.cumquat-cell--link {
|
|
1038
|
+
@apply text-cumquat-accent underline-offset-2 hover:underline;
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
/* ---------- Pagination ---------- */
|
|
1042
|
+
.cumquat-pagination {
|
|
1043
|
+
@apply inline-flex items-center gap-1.5;
|
|
1044
|
+
}
|
|
1045
|
+
.cumquat-pagination__prev,
|
|
1046
|
+
.cumquat-pagination__next {
|
|
1047
|
+
@apply flex size-8 cursor-pointer items-center justify-center rounded-cumquat border border-cumquat-border bg-cumquat-surface text-cumquat-text transition-colors;
|
|
1048
|
+
@apply disabled:cursor-not-allowed disabled:opacity-40;
|
|
1049
|
+
}
|
|
1050
|
+
.cumquat-pagination__prev:hover,
|
|
1051
|
+
.cumquat-pagination__next:hover {
|
|
1052
|
+
@apply bg-cumquat-surface-2;
|
|
1053
|
+
}
|
|
1054
|
+
.cumquat-pagination__icon {
|
|
1055
|
+
@apply size-4;
|
|
1056
|
+
}
|
|
1057
|
+
.cumquat-pagination__ellipsis {
|
|
1058
|
+
@apply px-1 text-cumquat-text-muted;
|
|
1059
|
+
}
|
|
1060
|
+
.cumquat-pagination__page {
|
|
1061
|
+
@apply flex size-8 cursor-pointer items-center justify-center rounded-cumquat border border-cumquat-border bg-cumquat-surface text-sm text-cumquat-text transition-colors;
|
|
1062
|
+
}
|
|
1063
|
+
.cumquat-pagination__page:not(.cumquat-pagination__page--active):hover {
|
|
1064
|
+
@apply bg-cumquat-surface-2;
|
|
1065
|
+
}
|
|
1066
|
+
.cumquat-pagination__page--active {
|
|
1067
|
+
@apply border-cumquat-accent bg-cumquat-accent font-medium text-cumquat-text-inverse;
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
/* ---------- Tabs ---------- */
|
|
1071
|
+
.cumquat-tabs {
|
|
1072
|
+
@apply flex flex-col gap-4;
|
|
1073
|
+
}
|
|
1074
|
+
.cumquat-tabs__nav {
|
|
1075
|
+
@apply flex items-center gap-1 border-b border-cumquat-border;
|
|
1076
|
+
}
|
|
1077
|
+
.cumquat-tabs__tab {
|
|
1078
|
+
@apply relative -mb-px cursor-pointer border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-cumquat-text-muted transition-colors;
|
|
1079
|
+
@apply disabled:cursor-not-allowed disabled:opacity-50;
|
|
1080
|
+
}
|
|
1081
|
+
.cumquat-tabs__tab:not(.cumquat-tabs__tab--active):hover {
|
|
1082
|
+
@apply text-cumquat-text;
|
|
1083
|
+
}
|
|
1084
|
+
.cumquat-tabs__tab--active {
|
|
1085
|
+
@apply border-cumquat-accent text-cumquat-accent;
|
|
1086
|
+
}
|
|
1087
|
+
.cumquat-tabs__state {
|
|
1088
|
+
@apply px-4 py-2.5 text-sm text-cumquat-text-muted;
|
|
1089
|
+
}
|
|
1090
|
+
.cumquat-tabs__state.cq-state--error {
|
|
1091
|
+
@apply text-cumquat-danger;
|
|
1092
|
+
}
|
|
1093
|
+
.cumquat-tabs__retry {
|
|
1094
|
+
@apply ml-1 cursor-pointer bg-transparent underline underline-offset-2;
|
|
1095
|
+
}
|
|
1096
|
+
.cumquat-tabs__retry:hover {
|
|
1097
|
+
@apply opacity-80;
|
|
1098
|
+
}
|
|
1099
|
+
.cumquat-tabs__panel {
|
|
1100
|
+
@apply text-sm text-cumquat-text;
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
/* ---------- Collapse ---------- */
|
|
1104
|
+
.cumquat-collapse {
|
|
1105
|
+
@apply flex flex-col divide-y divide-cumquat-border rounded-cumquat border border-cumquat-border bg-cumquat-surface;
|
|
1106
|
+
}
|
|
1107
|
+
.cumquat-collapse__header {
|
|
1108
|
+
@apply flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3.5 text-left text-sm font-medium text-cumquat-text transition-colors;
|
|
1109
|
+
}
|
|
1110
|
+
.cumquat-collapse__header:hover {
|
|
1111
|
+
@apply bg-cumquat-surface-2;
|
|
1112
|
+
}
|
|
1113
|
+
.cumquat-collapse__state {
|
|
1114
|
+
@apply px-4 py-4 text-sm text-cumquat-text-muted;
|
|
1115
|
+
}
|
|
1116
|
+
.cumquat-collapse__state.cq-state--error {
|
|
1117
|
+
@apply text-cumquat-danger;
|
|
1118
|
+
}
|
|
1119
|
+
.cumquat-collapse__retry {
|
|
1120
|
+
@apply ml-1 cursor-pointer bg-transparent underline underline-offset-2;
|
|
1121
|
+
}
|
|
1122
|
+
.cumquat-collapse__retry:hover {
|
|
1123
|
+
@apply opacity-80;
|
|
1124
|
+
}
|
|
1125
|
+
.cumquat-collapse__chevron {
|
|
1126
|
+
@apply size-4 shrink-0 text-cumquat-text-muted transition-transform;
|
|
1127
|
+
}
|
|
1128
|
+
.cumquat-collapse__chevron--expanded {
|
|
1129
|
+
@apply rotate-180;
|
|
1130
|
+
}
|
|
1131
|
+
.cumquat-collapse__content {
|
|
1132
|
+
@apply px-4 pb-4 text-sm text-cumquat-text-muted;
|
|
1133
|
+
}
|
|
1134
|
+
.cumquat-collapse__content-wrap {
|
|
1135
|
+
display: grid;
|
|
1136
|
+
grid-template-rows: 0fr;
|
|
1137
|
+
}
|
|
1138
|
+
.cumquat-collapse__content-wrap--in {
|
|
1139
|
+
animation: cumquat-collapse-expand 0.2s ease forwards;
|
|
1140
|
+
}
|
|
1141
|
+
.cumquat-collapse__content-wrap .cumquat-collapse__content {
|
|
1142
|
+
overflow: hidden;
|
|
1143
|
+
}
|
|
1144
|
+
@keyframes cumquat-collapse-expand {
|
|
1145
|
+
from {
|
|
1146
|
+
grid-template-rows: 0fr;
|
|
1147
|
+
}
|
|
1148
|
+
to {
|
|
1149
|
+
grid-template-rows: 1fr;
|
|
1150
|
+
}
|
|
1151
|
+
}
|
|
1152
|
+
|
|
1153
|
+
/* ---------- Tree ---------- */
|
|
1154
|
+
.cumquat-tree {
|
|
1155
|
+
@apply flex flex-col gap-0.5 text-sm;
|
|
1156
|
+
}
|
|
1157
|
+
.cumquat-tree__row {
|
|
1158
|
+
@apply flex cursor-pointer items-center gap-1.5 rounded px-2 py-1.5 transition-colors;
|
|
1159
|
+
}
|
|
1160
|
+
.cumquat-tree__row:hover {
|
|
1161
|
+
@apply bg-cumquat-surface-2;
|
|
1162
|
+
}
|
|
1163
|
+
.cumquat-tree__expander {
|
|
1164
|
+
@apply flex size-4 cursor-pointer items-center justify-center text-cumquat-text-muted transition-transform;
|
|
1165
|
+
}
|
|
1166
|
+
.cumquat-tree__expander--expanded {
|
|
1167
|
+
@apply rotate-90;
|
|
1168
|
+
}
|
|
1169
|
+
.cumquat-tree__expander-icon {
|
|
1170
|
+
@apply size-3.5;
|
|
1171
|
+
}
|
|
1172
|
+
.cumquat-tree__expander-placeholder {
|
|
1173
|
+
@apply size-4 shrink-0;
|
|
1174
|
+
}
|
|
1175
|
+
.cumquat-tree__expander--loading {
|
|
1176
|
+
@apply size-4 animate-spin rounded-full border-2 border-cumquat-border border-t-cumquat-accent;
|
|
1177
|
+
}
|
|
1178
|
+
.cumquat-tree__expander--error {
|
|
1179
|
+
@apply text-cumquat-danger;
|
|
1180
|
+
}
|
|
1181
|
+
.cumquat-tree__state {
|
|
1182
|
+
@apply flex items-center gap-2 px-3 py-2 text-sm text-cumquat-text-muted;
|
|
1183
|
+
}
|
|
1184
|
+
.cumquat-tree__state.cq-state--error {
|
|
1185
|
+
@apply text-cumquat-danger;
|
|
1186
|
+
}
|
|
1187
|
+
.cumquat-tree__retry {
|
|
1188
|
+
@apply cursor-pointer bg-transparent underline underline-offset-2;
|
|
1189
|
+
}
|
|
1190
|
+
.cumquat-tree__retry:hover {
|
|
1191
|
+
@apply opacity-80;
|
|
1192
|
+
}
|
|
1193
|
+
.cumquat-tree__indent {
|
|
1194
|
+
@apply size-4 shrink-0;
|
|
1195
|
+
}
|
|
1196
|
+
.cumquat-tree__checkbox {
|
|
1197
|
+
@apply size-3.5 cursor-pointer accent-cumquat-accent;
|
|
1198
|
+
}
|
|
1199
|
+
.cumquat-tree__label {
|
|
1200
|
+
@apply text-cumquat-text;
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
/* ---------- Cascader ---------- */
|
|
1204
|
+
.cumquat-cascader {
|
|
1205
|
+
@apply relative inline-block w-full;
|
|
1206
|
+
}
|
|
1207
|
+
.cumquat-cascader__trigger {
|
|
1208
|
+
@apply flex h-10 w-full cursor-pointer items-center justify-between gap-2 rounded-cumquat border border-cumquat-border px-3 text-sm transition-colors;
|
|
1209
|
+
@apply focus:outline-none focus:ring-2 focus:ring-cumquat-accent/20;
|
|
1210
|
+
}
|
|
1211
|
+
.cumquat-cascader__trigger--open {
|
|
1212
|
+
@apply border-cumquat-accent;
|
|
1213
|
+
}
|
|
1214
|
+
.cumquat-cascader__value {
|
|
1215
|
+
@apply text-cumquat-text;
|
|
1216
|
+
}
|
|
1217
|
+
.cumquat-cascader__value--placeholder {
|
|
1218
|
+
@apply text-cumquat-text-muted;
|
|
1219
|
+
}
|
|
1220
|
+
.cumquat-cascader__trigger-icon {
|
|
1221
|
+
@apply size-4 text-cumquat-text-muted;
|
|
1222
|
+
}
|
|
1223
|
+
.cumquat-cascader__panel {
|
|
1224
|
+
@apply absolute z-20 mt-1.5 flex rounded-cumquat border border-cumquat-border bg-cumquat-surface shadow-cumquat-overlay;
|
|
1225
|
+
}
|
|
1226
|
+
.cumquat-cascader__column {
|
|
1227
|
+
@apply max-h-60 min-w-40 overflow-y-auto border-r border-cumquat-border py-1.5 last:border-r-0;
|
|
1228
|
+
}
|
|
1229
|
+
.cumquat-cascader__option {
|
|
1230
|
+
@apply flex cursor-pointer items-center justify-between gap-3 px-3 py-2 text-sm text-cumquat-text transition-colors;
|
|
1231
|
+
}
|
|
1232
|
+
.cumquat-cascader__option:not(.cumquat-cascader__option--selected):hover {
|
|
1233
|
+
@apply bg-cumquat-surface-2;
|
|
1234
|
+
}
|
|
1235
|
+
.cumquat-cascader__option--selected {
|
|
1236
|
+
@apply bg-cumquat-accent-soft font-medium text-cumquat-accent;
|
|
1237
|
+
}
|
|
1238
|
+
.cumquat-cascader__option-icon {
|
|
1239
|
+
@apply size-3.5 text-cumquat-text-muted;
|
|
1240
|
+
}
|
|
1241
|
+
.cumquat-cascader__state {
|
|
1242
|
+
@apply flex items-center gap-2 whitespace-nowrap px-3 py-2 text-sm text-cumquat-text-muted;
|
|
1243
|
+
}
|
|
1244
|
+
.cumquat-cascader__state.cq-state--error {
|
|
1245
|
+
@apply text-cumquat-danger;
|
|
1246
|
+
}
|
|
1247
|
+
.cumquat-cascader__retry {
|
|
1248
|
+
@apply cursor-pointer whitespace-nowrap bg-transparent underline underline-offset-2;
|
|
1249
|
+
}
|
|
1250
|
+
.cumquat-cascader__retry:hover {
|
|
1251
|
+
@apply opacity-80;
|
|
1252
|
+
}
|
|
1253
|
+
|
|
1254
|
+
/* ---------- Timeline ---------- */
|
|
1255
|
+
.cumquat-timeline {
|
|
1256
|
+
@apply flex flex-col;
|
|
1257
|
+
}
|
|
1258
|
+
.cumquat-timeline__item {
|
|
1259
|
+
@apply relative flex gap-4 pb-6 last:pb-0;
|
|
1260
|
+
}
|
|
1261
|
+
.cumquat-timeline__line {
|
|
1262
|
+
@apply absolute top-3.5 left-[5.5px] h-full w-px bg-cumquat-border;
|
|
1263
|
+
}
|
|
1264
|
+
.cumquat-timeline__dot {
|
|
1265
|
+
@apply relative z-10 mt-1.5 size-3 shrink-0 rounded-full ring-4 ring-cumquat-surface;
|
|
1266
|
+
}
|
|
1267
|
+
.cumquat-timeline__dot--primary {
|
|
1268
|
+
@apply bg-cumquat-accent;
|
|
1269
|
+
}
|
|
1270
|
+
.cumquat-timeline__dot--success {
|
|
1271
|
+
@apply bg-cumquat-success;
|
|
1272
|
+
}
|
|
1273
|
+
.cumquat-timeline__dot--warning {
|
|
1274
|
+
@apply bg-cumquat-warning;
|
|
1275
|
+
}
|
|
1276
|
+
.cumquat-timeline__dot--danger {
|
|
1277
|
+
@apply bg-cumquat-danger;
|
|
1278
|
+
}
|
|
1279
|
+
.cumquat-timeline__state {
|
|
1280
|
+
@apply py-4 text-sm text-cumquat-text-muted;
|
|
1281
|
+
}
|
|
1282
|
+
.cumquat-timeline__state.cq-state--error {
|
|
1283
|
+
@apply text-cumquat-danger;
|
|
1284
|
+
}
|
|
1285
|
+
.cumquat-timeline__retry {
|
|
1286
|
+
@apply ml-1 cursor-pointer bg-transparent underline underline-offset-2;
|
|
1287
|
+
}
|
|
1288
|
+
.cumquat-timeline__retry:hover {
|
|
1289
|
+
@apply opacity-80;
|
|
1290
|
+
}
|
|
1291
|
+
.cumquat-timeline__body {
|
|
1292
|
+
@apply flex-1;
|
|
1293
|
+
}
|
|
1294
|
+
.cumquat-timeline__heading {
|
|
1295
|
+
@apply flex items-baseline gap-3;
|
|
1296
|
+
}
|
|
1297
|
+
.cumquat-timeline__title {
|
|
1298
|
+
@apply text-sm font-semibold text-cumquat-text;
|
|
1299
|
+
}
|
|
1300
|
+
.cumquat-timeline__time {
|
|
1301
|
+
@apply text-xs text-cumquat-text-muted;
|
|
1302
|
+
}
|
|
1303
|
+
.cumquat-timeline__content {
|
|
1304
|
+
@apply mt-1 text-sm text-cumquat-text-muted;
|
|
1305
|
+
}
|
|
1306
|
+
.cumquat-timeline__extra {
|
|
1307
|
+
@apply mt-1.5;
|
|
1308
|
+
}
|
|
1309
|
+
|
|
1310
|
+
/* ---------- Steps ---------- */
|
|
1311
|
+
.cumquat-steps {
|
|
1312
|
+
@apply flex w-full items-start;
|
|
1313
|
+
}
|
|
1314
|
+
.cumquat-steps__step {
|
|
1315
|
+
@apply relative flex flex-1 flex-col items-center;
|
|
1316
|
+
}
|
|
1317
|
+
.cumquat-steps__line {
|
|
1318
|
+
@apply absolute top-4 right-1/2 h-0.5 w-full bg-cumquat-accent;
|
|
1319
|
+
}
|
|
1320
|
+
.cumquat-steps__line--waiting {
|
|
1321
|
+
@apply bg-cumquat-border;
|
|
1322
|
+
}
|
|
1323
|
+
.cumquat-steps__dot {
|
|
1324
|
+
@apply relative z-10 flex size-8 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors;
|
|
1325
|
+
}
|
|
1326
|
+
.cumquat-steps__dot--done {
|
|
1327
|
+
@apply border-cumquat-accent bg-cumquat-accent text-cumquat-text-inverse;
|
|
1328
|
+
}
|
|
1329
|
+
.cumquat-steps__dot--active {
|
|
1330
|
+
@apply border-cumquat-accent bg-cumquat-surface text-cumquat-accent;
|
|
1331
|
+
}
|
|
1332
|
+
.cumquat-steps__dot--waiting {
|
|
1333
|
+
@apply border-cumquat-border bg-cumquat-surface text-cumquat-text-muted;
|
|
1334
|
+
}
|
|
1335
|
+
.cumquat-steps__dot-icon {
|
|
1336
|
+
@apply size-4;
|
|
1337
|
+
}
|
|
1338
|
+
.cumquat-steps__text {
|
|
1339
|
+
@apply mt-2 flex flex-col items-center gap-0.5 text-center;
|
|
1340
|
+
}
|
|
1341
|
+
.cumquat-steps__title {
|
|
1342
|
+
@apply text-sm font-medium text-cumquat-text;
|
|
1343
|
+
}
|
|
1344
|
+
.cumquat-steps__title--waiting {
|
|
1345
|
+
@apply text-cumquat-text-muted;
|
|
1346
|
+
}
|
|
1347
|
+
.cumquat-steps__description {
|
|
1348
|
+
@apply text-xs text-cumquat-text-muted;
|
|
1349
|
+
}
|
|
1350
|
+
|
|
1351
|
+
/* ---------- Descriptions ---------- */
|
|
1352
|
+
.cumquat-descriptions__title {
|
|
1353
|
+
@apply mb-3 text-base font-semibold text-cumquat-text;
|
|
1354
|
+
}
|
|
1355
|
+
.cumquat-descriptions__state {
|
|
1356
|
+
@apply py-4 text-sm text-cumquat-text-muted;
|
|
1357
|
+
}
|
|
1358
|
+
.cumquat-descriptions__state.cq-state--error {
|
|
1359
|
+
@apply text-cumquat-danger;
|
|
1360
|
+
}
|
|
1361
|
+
.cumquat-descriptions__retry {
|
|
1362
|
+
@apply ml-1 cursor-pointer bg-transparent underline underline-offset-2;
|
|
1363
|
+
}
|
|
1364
|
+
.cumquat-descriptions__retry:hover {
|
|
1365
|
+
@apply opacity-80;
|
|
1366
|
+
}
|
|
1367
|
+
.cumquat-descriptions__list {
|
|
1368
|
+
@apply grid gap-x-8 gap-y-3 overflow-hidden rounded-cumquat text-sm;
|
|
1369
|
+
}
|
|
1370
|
+
.cumquat-descriptions--bordered .cumquat-descriptions__list {
|
|
1371
|
+
@apply gap-0 border border-cumquat-border divide-y divide-cumquat-border;
|
|
1372
|
+
}
|
|
1373
|
+
.cumquat-descriptions__item {
|
|
1374
|
+
@apply flex gap-2;
|
|
1375
|
+
}
|
|
1376
|
+
.cumquat-descriptions--bordered .cumquat-descriptions__item {
|
|
1377
|
+
@apply flex-col gap-0;
|
|
1378
|
+
}
|
|
1379
|
+
.cumquat-descriptions__label {
|
|
1380
|
+
@apply shrink-0 text-cumquat-text-muted;
|
|
1381
|
+
}
|
|
1382
|
+
.cumquat-descriptions--bordered .cumquat-descriptions__label {
|
|
1383
|
+
@apply bg-cumquat-surface-2 px-4 py-2.5 font-medium;
|
|
1384
|
+
}
|
|
1385
|
+
.cumquat-descriptions__value {
|
|
1386
|
+
@apply text-cumquat-text;
|
|
1387
|
+
}
|
|
1388
|
+
.cumquat-descriptions--bordered .cumquat-descriptions__value {
|
|
1389
|
+
@apply px-4 py-2.5;
|
|
1390
|
+
}
|
|
1391
|
+
|
|
1392
|
+
/* ---------- Carousel ---------- */
|
|
1393
|
+
.cumquat-carousel {
|
|
1394
|
+
@apply relative w-full overflow-hidden rounded-cumquat border border-cumquat-border bg-cumquat-surface-2;
|
|
1395
|
+
}
|
|
1396
|
+
.cumquat-carousel__slide {
|
|
1397
|
+
@apply flex size-full flex-col items-center justify-center gap-2 bg-cumquat-surface-3;
|
|
1398
|
+
}
|
|
1399
|
+
.cumquat-carousel__slide-text {
|
|
1400
|
+
@apply text-2xl font-semibold text-cumquat-text-muted;
|
|
1401
|
+
}
|
|
1402
|
+
.cumquat-carousel__state {
|
|
1403
|
+
@apply flex size-full items-center justify-center gap-2 text-sm text-cumquat-text-muted;
|
|
1404
|
+
}
|
|
1405
|
+
.cumquat-carousel__state.cq-state--error {
|
|
1406
|
+
@apply text-cumquat-danger;
|
|
1407
|
+
}
|
|
1408
|
+
.cumquat-carousel__retry {
|
|
1409
|
+
@apply cursor-pointer bg-transparent underline underline-offset-2;
|
|
1410
|
+
}
|
|
1411
|
+
.cumquat-carousel__retry:hover {
|
|
1412
|
+
@apply opacity-80;
|
|
1413
|
+
}
|
|
1414
|
+
.cumquat-carousel__prev,
|
|
1415
|
+
.cumquat-carousel__next {
|
|
1416
|
+
@apply absolute top-1/2 z-10 flex size-9 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-cumquat-surface/80 text-cumquat-text shadow transition-opacity;
|
|
1417
|
+
}
|
|
1418
|
+
.cumquat-carousel__prev {
|
|
1419
|
+
@apply left-3;
|
|
1420
|
+
}
|
|
1421
|
+
.cumquat-carousel__next {
|
|
1422
|
+
@apply right-3;
|
|
1423
|
+
}
|
|
1424
|
+
.cumquat-carousel__prev:hover,
|
|
1425
|
+
.cumquat-carousel__next:hover {
|
|
1426
|
+
@apply bg-cumquat-surface;
|
|
1427
|
+
}
|
|
1428
|
+
.cumquat-carousel__arrow-icon {
|
|
1429
|
+
@apply size-5;
|
|
1430
|
+
}
|
|
1431
|
+
.cumquat-carousel__indicators {
|
|
1432
|
+
@apply absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 gap-2;
|
|
1433
|
+
}
|
|
1434
|
+
.cumquat-carousel__indicator {
|
|
1435
|
+
@apply h-2 w-2 cursor-pointer rounded-full bg-cumquat-border-strong transition-all;
|
|
1436
|
+
}
|
|
1437
|
+
.cumquat-carousel__indicator:not(.cumquat-carousel__indicator--active):hover {
|
|
1438
|
+
@apply bg-cumquat-text-muted;
|
|
1439
|
+
}
|
|
1440
|
+
.cumquat-carousel__indicator--active {
|
|
1441
|
+
@apply w-6 bg-cumquat-accent;
|
|
1442
|
+
}
|
|
1443
|
+
|
|
1444
|
+
/* ---------- Progress ---------- */
|
|
1445
|
+
.cumquat-progress {
|
|
1446
|
+
@apply flex w-full items-center gap-3;
|
|
1447
|
+
}
|
|
1448
|
+
.cumquat-progress__track {
|
|
1449
|
+
@apply h-2 flex-1 overflow-hidden rounded-full bg-cumquat-surface-3;
|
|
1450
|
+
}
|
|
1451
|
+
.cumquat-progress__bar {
|
|
1452
|
+
@apply h-full rounded-full transition-[width] duration-300;
|
|
1453
|
+
}
|
|
1454
|
+
.cumquat-progress__bar--normal {
|
|
1455
|
+
@apply bg-cumquat-accent;
|
|
1456
|
+
}
|
|
1457
|
+
.cumquat-progress__bar--success {
|
|
1458
|
+
@apply bg-cumquat-success;
|
|
1459
|
+
}
|
|
1460
|
+
.cumquat-progress__bar--warning {
|
|
1461
|
+
@apply bg-cumquat-warning;
|
|
1462
|
+
}
|
|
1463
|
+
.cumquat-progress__bar--danger {
|
|
1464
|
+
@apply bg-cumquat-danger;
|
|
1465
|
+
}
|
|
1466
|
+
.cumquat-progress__text {
|
|
1467
|
+
@apply w-10 text-right text-xs text-cumquat-text-muted;
|
|
1468
|
+
}
|
|
1469
|
+
.cumquat-progress--circle {
|
|
1470
|
+
@apply inline-flex w-auto justify-center;
|
|
1471
|
+
}
|
|
1472
|
+
.cumquat-progress__circle-wrap {
|
|
1473
|
+
@apply relative inline-flex items-center justify-center;
|
|
1474
|
+
}
|
|
1475
|
+
.cumquat-progress__circle-wrap .cumquat-progress__text {
|
|
1476
|
+
@apply absolute inset-0 flex w-auto items-center justify-center text-center;
|
|
1477
|
+
}
|
|
1478
|
+
.cumquat-progress__circle-track {
|
|
1479
|
+
stroke: var(--cumquat-surface-3, #e5e7eb);
|
|
1480
|
+
}
|
|
1481
|
+
.cumquat-progress__circle {
|
|
1482
|
+
transition: stroke-dashoffset 0.3s ease;
|
|
1483
|
+
}
|
|
1484
|
+
.cumquat-progress__circle--normal {
|
|
1485
|
+
stroke: var(--cumquat-accent, #2563eb);
|
|
1486
|
+
}
|
|
1487
|
+
.cumquat-progress__circle--success {
|
|
1488
|
+
stroke: var(--cumquat-success, #16a34a);
|
|
1489
|
+
}
|
|
1490
|
+
.cumquat-progress__circle--warning {
|
|
1491
|
+
stroke: var(--cumquat-warning, #d97706);
|
|
1492
|
+
}
|
|
1493
|
+
.cumquat-progress__circle--danger {
|
|
1494
|
+
stroke: var(--cumquat-danger, #dc2626);
|
|
1495
|
+
}
|
|
1496
|
+
|
|
1497
|
+
/* ---------- Image ---------- */
|
|
1498
|
+
.cumquat-image {
|
|
1499
|
+
@apply relative inline-block overflow-hidden bg-cumquat-surface-2;
|
|
1500
|
+
}
|
|
1501
|
+
.cumquat-image--rounded {
|
|
1502
|
+
@apply rounded-cumquat;
|
|
1503
|
+
}
|
|
1504
|
+
.cumquat-image__img {
|
|
1505
|
+
@apply block size-full object-cover;
|
|
1506
|
+
}
|
|
1507
|
+
.cumquat-image__fallback {
|
|
1508
|
+
@apply flex size-full min-h-32 min-w-32 flex-col items-center justify-center gap-1.5 text-cumquat-text-muted;
|
|
1509
|
+
}
|
|
1510
|
+
.cumquat-image__fallback-icon {
|
|
1511
|
+
@apply size-8;
|
|
1512
|
+
}
|
|
1513
|
+
.cumquat-image__fallback-text {
|
|
1514
|
+
@apply text-xs;
|
|
1515
|
+
}
|
|
1516
|
+
}
|
|
1517
|
+
|
|
1518
|
+
/*
|
|
1519
|
+
* 基础主题 · feedback 场景组件
|
|
1520
|
+
*（Message / Alert / Notification / Loading / Skeleton / Result / Upload）
|
|
1521
|
+
*/
|
|
1522
|
+
@layer components {
|
|
1523
|
+
/* ---------- Message ---------- */
|
|
1524
|
+
.cumquat-message {
|
|
1525
|
+
@apply flex items-center gap-2.5 rounded-cumquat px-4 py-2.5 text-sm shadow-cumquat-overlay;
|
|
1526
|
+
}
|
|
1527
|
+
.cumquat-message--info {
|
|
1528
|
+
@apply bg-cumquat-info-soft text-cumquat-info;
|
|
1529
|
+
}
|
|
1530
|
+
.cumquat-message--success {
|
|
1531
|
+
@apply bg-cumquat-success-soft text-cumquat-success;
|
|
1532
|
+
}
|
|
1533
|
+
.cumquat-message--warning {
|
|
1534
|
+
@apply bg-cumquat-warning-soft text-cumquat-warning;
|
|
1535
|
+
}
|
|
1536
|
+
.cumquat-message--danger {
|
|
1537
|
+
@apply bg-cumquat-danger-soft text-cumquat-danger;
|
|
1538
|
+
}
|
|
1539
|
+
.cumquat-message__dot {
|
|
1540
|
+
@apply size-2 shrink-0 rounded-full;
|
|
1541
|
+
}
|
|
1542
|
+
.cumquat-message__dot--info {
|
|
1543
|
+
@apply bg-cumquat-info;
|
|
1544
|
+
}
|
|
1545
|
+
.cumquat-message__dot--success {
|
|
1546
|
+
@apply bg-cumquat-success;
|
|
1547
|
+
}
|
|
1548
|
+
.cumquat-message__dot--warning {
|
|
1549
|
+
@apply bg-cumquat-warning;
|
|
1550
|
+
}
|
|
1551
|
+
.cumquat-message__dot--danger {
|
|
1552
|
+
@apply bg-cumquat-danger;
|
|
1553
|
+
}
|
|
1554
|
+
.cumquat-message__body {
|
|
1555
|
+
@apply flex-1;
|
|
1556
|
+
}
|
|
1557
|
+
.cumquat-message__close {
|
|
1558
|
+
@apply cursor-pointer opacity-60 transition-opacity;
|
|
1559
|
+
}
|
|
1560
|
+
.cumquat-message__close:hover {
|
|
1561
|
+
@apply opacity-100;
|
|
1562
|
+
}
|
|
1563
|
+
.cumquat-message__close-icon {
|
|
1564
|
+
@apply size-3.5;
|
|
1565
|
+
}
|
|
1566
|
+
|
|
1567
|
+
/* ---------- Alert ---------- */
|
|
1568
|
+
.cumquat-alert {
|
|
1569
|
+
@apply flex items-start gap-3 rounded-cumquat px-4 py-3;
|
|
1570
|
+
}
|
|
1571
|
+
.cumquat-alert--info {
|
|
1572
|
+
@apply bg-cumquat-info-soft text-cumquat-info;
|
|
1573
|
+
}
|
|
1574
|
+
.cumquat-alert--success {
|
|
1575
|
+
@apply bg-cumquat-success-soft text-cumquat-success;
|
|
1576
|
+
}
|
|
1577
|
+
.cumquat-alert--warning {
|
|
1578
|
+
@apply bg-cumquat-warning-soft text-cumquat-warning;
|
|
1579
|
+
}
|
|
1580
|
+
.cumquat-alert--danger {
|
|
1581
|
+
@apply bg-cumquat-danger-soft text-cumquat-danger;
|
|
1582
|
+
}
|
|
1583
|
+
.cumquat-alert__icon {
|
|
1584
|
+
@apply mt-0.5 size-4 shrink-0;
|
|
1585
|
+
}
|
|
1586
|
+
.cumquat-alert__body {
|
|
1587
|
+
@apply flex-1;
|
|
1588
|
+
}
|
|
1589
|
+
.cumquat-alert__title {
|
|
1590
|
+
@apply font-semibold;
|
|
1591
|
+
}
|
|
1592
|
+
.cumquat-alert__content {
|
|
1593
|
+
@apply text-sm opacity-90;
|
|
1594
|
+
}
|
|
1595
|
+
.cumquat-alert__close {
|
|
1596
|
+
@apply cursor-pointer opacity-60 transition-opacity;
|
|
1597
|
+
}
|
|
1598
|
+
.cumquat-alert__close:hover {
|
|
1599
|
+
@apply opacity-100;
|
|
1600
|
+
}
|
|
1601
|
+
.cumquat-alert__close-icon {
|
|
1602
|
+
@apply size-4;
|
|
1603
|
+
}
|
|
1604
|
+
|
|
1605
|
+
/* ---------- Notification ---------- */
|
|
1606
|
+
.cumquat-notification {
|
|
1607
|
+
@apply w-80 rounded-cumquat border border-cumquat-border bg-cumquat-surface p-4 shadow-cumquat-overlay;
|
|
1608
|
+
}
|
|
1609
|
+
.cumquat-notification__inner {
|
|
1610
|
+
@apply flex items-start gap-3;
|
|
1611
|
+
}
|
|
1612
|
+
.cumquat-notification__dot {
|
|
1613
|
+
@apply mt-1.5 size-2 shrink-0 rounded-full;
|
|
1614
|
+
}
|
|
1615
|
+
.cumquat-notification__dot--info {
|
|
1616
|
+
@apply bg-cumquat-info;
|
|
1617
|
+
}
|
|
1618
|
+
.cumquat-notification__dot--success {
|
|
1619
|
+
@apply bg-cumquat-success;
|
|
1620
|
+
}
|
|
1621
|
+
.cumquat-notification__dot--warning {
|
|
1622
|
+
@apply bg-cumquat-warning;
|
|
1623
|
+
}
|
|
1624
|
+
.cumquat-notification__dot--danger {
|
|
1625
|
+
@apply bg-cumquat-danger;
|
|
1626
|
+
}
|
|
1627
|
+
.cumquat-notification__body {
|
|
1628
|
+
@apply flex-1;
|
|
1629
|
+
}
|
|
1630
|
+
.cumquat-notification__title {
|
|
1631
|
+
@apply text-sm font-semibold text-cumquat-text;
|
|
1632
|
+
}
|
|
1633
|
+
.cumquat-notification__content {
|
|
1634
|
+
@apply mt-0.5 text-sm text-cumquat-text-muted;
|
|
1635
|
+
}
|
|
1636
|
+
.cumquat-notification__close {
|
|
1637
|
+
@apply cursor-pointer text-cumquat-text-muted transition-colors;
|
|
1638
|
+
}
|
|
1639
|
+
.cumquat-notification__close:hover {
|
|
1640
|
+
@apply text-cumquat-text;
|
|
1641
|
+
}
|
|
1642
|
+
.cumquat-notification__close-icon {
|
|
1643
|
+
@apply size-4;
|
|
1644
|
+
}
|
|
1645
|
+
|
|
1646
|
+
/* ---------- Loading ---------- */
|
|
1647
|
+
.cumquat-loading {
|
|
1648
|
+
@apply inline-flex items-center gap-2.5;
|
|
1649
|
+
}
|
|
1650
|
+
.cumquat-loading__spinner {
|
|
1651
|
+
@apply inline-block animate-spin rounded-full border-cumquat-border border-t-cumquat-accent;
|
|
1652
|
+
}
|
|
1653
|
+
.cumquat-loading__spinner--sm {
|
|
1654
|
+
@apply size-4 border-2;
|
|
1655
|
+
}
|
|
1656
|
+
.cumquat-loading__spinner--md {
|
|
1657
|
+
@apply size-6 border-2;
|
|
1658
|
+
}
|
|
1659
|
+
.cumquat-loading__spinner--lg {
|
|
1660
|
+
@apply size-9 border-4;
|
|
1661
|
+
}
|
|
1662
|
+
.cumquat-loading__text {
|
|
1663
|
+
@apply text-sm text-cumquat-text-muted;
|
|
1664
|
+
}
|
|
1665
|
+
|
|
1666
|
+
/* ---------- Skeleton ---------- */
|
|
1667
|
+
.cumquat-skeleton {
|
|
1668
|
+
@apply flex animate-pulse gap-3;
|
|
1669
|
+
}
|
|
1670
|
+
.cumquat-skeleton__avatar {
|
|
1671
|
+
@apply size-10 shrink-0 rounded-full bg-cumquat-surface-3;
|
|
1672
|
+
}
|
|
1673
|
+
.cumquat-skeleton__lines {
|
|
1674
|
+
@apply flex flex-1 flex-col gap-2.5;
|
|
1675
|
+
}
|
|
1676
|
+
.cumquat-skeleton__line {
|
|
1677
|
+
@apply h-3.5 rounded bg-cumquat-surface-3;
|
|
1678
|
+
}
|
|
1679
|
+
.cumquat-skeleton__line--full {
|
|
1680
|
+
@apply w-full;
|
|
1681
|
+
}
|
|
1682
|
+
.cumquat-skeleton__line--last {
|
|
1683
|
+
@apply w-2/3;
|
|
1684
|
+
}
|
|
1685
|
+
|
|
1686
|
+
/* ---------- Result ---------- */
|
|
1687
|
+
.cumquat-result {
|
|
1688
|
+
@apply flex flex-col items-center gap-3 px-6 py-10 text-center;
|
|
1689
|
+
}
|
|
1690
|
+
.cumquat-result__icon {
|
|
1691
|
+
@apply flex size-16 items-center justify-center rounded-full;
|
|
1692
|
+
}
|
|
1693
|
+
.cumquat-result--success .cumquat-result__icon {
|
|
1694
|
+
@apply bg-cumquat-success-soft text-cumquat-success;
|
|
1695
|
+
}
|
|
1696
|
+
.cumquat-result--error .cumquat-result__icon {
|
|
1697
|
+
@apply bg-cumquat-danger-soft text-cumquat-danger;
|
|
1698
|
+
}
|
|
1699
|
+
.cumquat-result--warning .cumquat-result__icon {
|
|
1700
|
+
@apply bg-cumquat-warning-soft text-cumquat-warning;
|
|
1701
|
+
}
|
|
1702
|
+
.cumquat-result--info .cumquat-result__icon {
|
|
1703
|
+
@apply bg-cumquat-info-soft text-cumquat-info;
|
|
1704
|
+
}
|
|
1705
|
+
.cumquat-result__icon-svg {
|
|
1706
|
+
@apply size-8;
|
|
1707
|
+
}
|
|
1708
|
+
.cumquat-result__title {
|
|
1709
|
+
@apply text-lg font-semibold text-cumquat-text;
|
|
1710
|
+
}
|
|
1711
|
+
.cumquat-result__subtitle {
|
|
1712
|
+
@apply text-sm text-cumquat-text-muted;
|
|
1713
|
+
}
|
|
1714
|
+
.cumquat-result__extra {
|
|
1715
|
+
@apply mt-2 flex gap-3;
|
|
1716
|
+
}
|
|
1717
|
+
|
|
1718
|
+
/* ---------- Upload ---------- */
|
|
1719
|
+
.cumquat-upload {
|
|
1720
|
+
@apply flex flex-col gap-3;
|
|
1721
|
+
}
|
|
1722
|
+
.cumquat-upload__dragger {
|
|
1723
|
+
@apply flex flex-col items-center justify-center gap-2 rounded-cumquat border-2 border-dashed px-6 py-8 text-center transition-colors;
|
|
1724
|
+
@apply border-cumquat-border-strong;
|
|
1725
|
+
}
|
|
1726
|
+
.cumquat-upload__dragger:hover {
|
|
1727
|
+
@apply border-cumquat-accent;
|
|
1728
|
+
}
|
|
1729
|
+
.cumquat-upload__dragger--dragging {
|
|
1730
|
+
@apply border-cumquat-accent bg-cumquat-accent-soft;
|
|
1731
|
+
}
|
|
1732
|
+
.cumquat-upload__icon {
|
|
1733
|
+
@apply size-8 text-cumquat-text-muted;
|
|
1734
|
+
}
|
|
1735
|
+
.cumquat-upload__hint {
|
|
1736
|
+
@apply text-sm text-cumquat-text;
|
|
1737
|
+
}
|
|
1738
|
+
.cumquat-upload__hint-action {
|
|
1739
|
+
@apply font-medium text-cumquat-accent;
|
|
1740
|
+
}
|
|
1741
|
+
.cumquat-upload__list {
|
|
1742
|
+
@apply flex flex-col gap-1.5;
|
|
1743
|
+
}
|
|
1744
|
+
.cumquat-upload__item {
|
|
1745
|
+
@apply flex items-center gap-2 rounded-cumquat bg-cumquat-surface-2 px-3 py-2 text-sm;
|
|
1746
|
+
}
|
|
1747
|
+
.cumquat-upload__file-icon {
|
|
1748
|
+
@apply size-4 shrink-0 text-cumquat-text-muted;
|
|
1749
|
+
}
|
|
1750
|
+
.cumquat-upload__name {
|
|
1751
|
+
@apply flex-1 truncate text-cumquat-text;
|
|
1752
|
+
}
|
|
1753
|
+
.cumquat-upload__size {
|
|
1754
|
+
@apply text-xs text-cumquat-text-muted;
|
|
1755
|
+
}
|
|
1756
|
+
.cumquat-upload__progressing {
|
|
1757
|
+
@apply inline-block size-3.5 animate-spin rounded-full border-2 border-cumquat-border border-t-cumquat-accent;
|
|
1758
|
+
}
|
|
1759
|
+
.cumquat-upload__remove {
|
|
1760
|
+
@apply cursor-pointer text-cumquat-text-muted transition-colors;
|
|
1761
|
+
}
|
|
1762
|
+
.cumquat-upload__remove:hover {
|
|
1763
|
+
@apply text-cumquat-danger;
|
|
1764
|
+
}
|
|
1765
|
+
.cumquat-upload__remove-icon {
|
|
1766
|
+
@apply size-4;
|
|
1767
|
+
}
|
|
1768
|
+
|
|
1769
|
+
/* Chat 聊天框 */
|
|
1770
|
+
.cumquat-chat {
|
|
1771
|
+
@apply flex flex-col overflow-hidden rounded-cumquat border border-cumquat-border bg-cumquat-surface;
|
|
1772
|
+
}
|
|
1773
|
+
.cumquat-chat__body {
|
|
1774
|
+
@apply flex flex-1 flex-col gap-3 overflow-y-auto px-4 py-3;
|
|
1775
|
+
}
|
|
1776
|
+
.cumquat-chat__older {
|
|
1777
|
+
@apply flex justify-center py-1;
|
|
1778
|
+
}
|
|
1779
|
+
.cumquat-chat__older-btn {
|
|
1780
|
+
@apply cursor-pointer rounded-cumquat px-3 py-1 text-xs text-cumquat-text-muted transition-colors;
|
|
1781
|
+
}
|
|
1782
|
+
.cumquat-chat__older-btn:hover {
|
|
1783
|
+
@apply bg-cumquat-accent-soft text-cumquat-accent;
|
|
1784
|
+
}
|
|
1785
|
+
.cumquat-chat__older-btn:disabled {
|
|
1786
|
+
@apply cursor-not-allowed opacity-60;
|
|
1787
|
+
}
|
|
1788
|
+
.cumquat-chat__older-end {
|
|
1789
|
+
@apply text-xs text-cumquat-text-muted;
|
|
1790
|
+
}
|
|
1791
|
+
.cumquat-chat__empty {
|
|
1792
|
+
@apply py-8 text-center text-sm text-cumquat-text-muted;
|
|
1793
|
+
}
|
|
1794
|
+
.cumquat-chat__row {
|
|
1795
|
+
@apply flex;
|
|
1796
|
+
}
|
|
1797
|
+
.cumquat-chat__row--self {
|
|
1798
|
+
@apply justify-end;
|
|
1799
|
+
}
|
|
1800
|
+
.cumquat-chat__bubble {
|
|
1801
|
+
@apply max-w-[80%] rounded-cumquat bg-cumquat-surface-2 px-3 py-2 text-sm;
|
|
1802
|
+
}
|
|
1803
|
+
.cumquat-chat__bubble--self {
|
|
1804
|
+
@apply bg-cumquat-accent-soft;
|
|
1805
|
+
}
|
|
1806
|
+
.cumquat-chat__bubble--sending {
|
|
1807
|
+
@apply opacity-70;
|
|
1808
|
+
}
|
|
1809
|
+
.cumquat-chat__bubble--failed {
|
|
1810
|
+
@apply border border-cumquat-danger;
|
|
1811
|
+
}
|
|
1812
|
+
.cumquat-chat__meta {
|
|
1813
|
+
@apply mb-1 flex items-center gap-2 text-xs text-cumquat-text-muted;
|
|
1814
|
+
}
|
|
1815
|
+
.cumquat-chat__content {
|
|
1816
|
+
@apply break-words text-cumquat-text [white-space:pre-wrap];
|
|
1817
|
+
}
|
|
1818
|
+
.cumquat-chat__retry {
|
|
1819
|
+
@apply mt-1 cursor-pointer text-xs text-cumquat-danger;
|
|
1820
|
+
}
|
|
1821
|
+
.cumquat-chat__alert {
|
|
1822
|
+
@apply flex items-center gap-2 border-t border-cumquat-border bg-cumquat-danger-soft px-4 py-1.5 text-xs text-cumquat-danger;
|
|
1823
|
+
}
|
|
1824
|
+
.cumquat-chat__alert-retry {
|
|
1825
|
+
@apply cursor-pointer font-medium underline;
|
|
1826
|
+
}
|
|
1827
|
+
.cumquat-chat__footer {
|
|
1828
|
+
@apply flex shrink-0 items-center gap-2 border-t border-cumquat-border px-3 py-2;
|
|
1829
|
+
}
|
|
1830
|
+
.cumquat-chat--disabled {
|
|
1831
|
+
@apply pointer-events-none opacity-60;
|
|
1832
|
+
}
|
|
1833
|
+
}
|
|
1834
|
+
|
|
1835
|
+
/*
|
|
1836
|
+
* 基础主题 · navigation 场景组件
|
|
1837
|
+
* （Breadcrumb / Menu / Anchor / BackTop / Affix / FloatButton / DatePicker /
|
|
1838
|
+
* TimePicker / Calendar / ColorPicker / Transfer / VirtualList / Layout / Grid / Space）
|
|
1839
|
+
*/
|
|
1840
|
+
@layer components {
|
|
1841
|
+
/* ---------- Breadcrumb ---------- */
|
|
1842
|
+
.cumquat-breadcrumb {
|
|
1843
|
+
@apply flex flex-wrap items-center gap-1.5 text-sm;
|
|
1844
|
+
}
|
|
1845
|
+
.cumquat-breadcrumb__separator {
|
|
1846
|
+
@apply text-cumquat-text-muted;
|
|
1847
|
+
}
|
|
1848
|
+
.cumquat-breadcrumb__link {
|
|
1849
|
+
@apply text-cumquat-text-muted transition-colors;
|
|
1850
|
+
}
|
|
1851
|
+
.cumquat-breadcrumb__link:hover {
|
|
1852
|
+
@apply text-cumquat-accent;
|
|
1853
|
+
}
|
|
1854
|
+
.cumquat-breadcrumb__current {
|
|
1855
|
+
@apply font-medium;
|
|
1856
|
+
}
|
|
1857
|
+
.cumquat-breadcrumb__current--last {
|
|
1858
|
+
@apply text-cumquat-text;
|
|
1859
|
+
}
|
|
1860
|
+
.cumquat-breadcrumb__current--muted {
|
|
1861
|
+
@apply text-cumquat-text-muted;
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
/* ---------- Menu ---------- */
|
|
1865
|
+
.cumquat-menu {
|
|
1866
|
+
@apply flex w-56 flex-col gap-0.5 rounded-cumquat border border-cumquat-border bg-cumquat-surface p-2;
|
|
1867
|
+
}
|
|
1868
|
+
.cumquat-menu__group {
|
|
1869
|
+
@apply flex w-full cursor-pointer items-center justify-between rounded px-3 py-2 text-sm font-medium text-cumquat-text transition-colors;
|
|
1870
|
+
}
|
|
1871
|
+
.cumquat-menu__group:hover {
|
|
1872
|
+
@apply bg-cumquat-surface-2;
|
|
1873
|
+
}
|
|
1874
|
+
.cumquat-menu__chevron {
|
|
1875
|
+
@apply size-3.5 text-cumquat-text-muted transition-transform;
|
|
1876
|
+
}
|
|
1877
|
+
.cumquat-menu__chevron--expanded {
|
|
1878
|
+
@apply rotate-180;
|
|
1879
|
+
}
|
|
1880
|
+
.cumquat-menu__subgroup {
|
|
1881
|
+
@apply flex flex-col gap-0.5 pl-3;
|
|
1882
|
+
}
|
|
1883
|
+
.cumquat-menu__item {
|
|
1884
|
+
@apply cursor-pointer rounded px-3 py-2 text-left text-sm transition-colors;
|
|
1885
|
+
}
|
|
1886
|
+
.cumquat-menu__item--active {
|
|
1887
|
+
@apply bg-cumquat-accent-soft font-medium text-cumquat-accent;
|
|
1888
|
+
}
|
|
1889
|
+
.cumquat-menu__item--inactive {
|
|
1890
|
+
@apply text-cumquat-text-muted;
|
|
1891
|
+
}
|
|
1892
|
+
.cumquat-menu__item--inactive:hover {
|
|
1893
|
+
@apply bg-cumquat-surface-2 text-cumquat-text;
|
|
1894
|
+
}
|
|
1895
|
+
.cumquat-menu__state {
|
|
1896
|
+
@apply px-3 py-4 text-sm text-cumquat-text-muted;
|
|
1897
|
+
}
|
|
1898
|
+
.cumquat-menu__state.cq-state--error {
|
|
1899
|
+
@apply text-cumquat-danger;
|
|
1900
|
+
}
|
|
1901
|
+
.cumquat-menu__retry {
|
|
1902
|
+
@apply ml-1 cursor-pointer bg-transparent underline underline-offset-2;
|
|
1903
|
+
}
|
|
1904
|
+
.cumquat-menu__retry:hover {
|
|
1905
|
+
@apply opacity-80;
|
|
1906
|
+
}
|
|
1907
|
+
|
|
1908
|
+
/* ---------- Anchor ---------- */
|
|
1909
|
+
.cumquat-anchor {
|
|
1910
|
+
@apply flex flex-col gap-0.5 border-l-2 border-cumquat-border;
|
|
1911
|
+
}
|
|
1912
|
+
.cumquat-anchor__link {
|
|
1913
|
+
@apply -ml-0.5 border-l-2 px-4 py-1.5 text-sm transition-colors;
|
|
1914
|
+
}
|
|
1915
|
+
.cumquat-anchor__link--active {
|
|
1916
|
+
@apply border-cumquat-accent font-medium text-cumquat-accent;
|
|
1917
|
+
}
|
|
1918
|
+
.cumquat-anchor__link--inactive {
|
|
1919
|
+
@apply border-transparent text-cumquat-text-muted;
|
|
1920
|
+
}
|
|
1921
|
+
.cumquat-anchor__link--inactive:hover {
|
|
1922
|
+
@apply text-cumquat-text;
|
|
1923
|
+
}
|
|
1924
|
+
|
|
1925
|
+
/* ---------- BackTop ---------- */
|
|
1926
|
+
.cumquat-back-top {
|
|
1927
|
+
@apply fixed z-40 flex size-11 cursor-pointer items-center justify-center rounded-full border border-cumquat-border bg-cumquat-surface text-cumquat-text shadow-cumquat-overlay transition-colors;
|
|
1928
|
+
}
|
|
1929
|
+
.cumquat-back-top:hover {
|
|
1930
|
+
@apply bg-cumquat-surface-2;
|
|
1931
|
+
}
|
|
1932
|
+
.cumquat-back-top__icon {
|
|
1933
|
+
@apply size-5;
|
|
1934
|
+
}
|
|
1935
|
+
|
|
1936
|
+
/* ---------- FloatButton ---------- */
|
|
1937
|
+
.cumquat-float-button {
|
|
1938
|
+
@apply fixed right-6 bottom-6 z-40 flex flex-col items-center gap-2.5;
|
|
1939
|
+
}
|
|
1940
|
+
.cumquat-float-button__actions {
|
|
1941
|
+
@apply flex flex-col items-center gap-2.5;
|
|
1942
|
+
}
|
|
1943
|
+
.cumquat-float-button__action {
|
|
1944
|
+
@apply flex size-10 cursor-pointer items-center justify-center rounded-full border border-cumquat-border bg-cumquat-surface text-xs text-cumquat-text shadow-cumquat-overlay transition-transform;
|
|
1945
|
+
}
|
|
1946
|
+
.cumquat-float-button__action:hover {
|
|
1947
|
+
@apply scale-105;
|
|
1948
|
+
}
|
|
1949
|
+
.cumquat-float-button__trigger {
|
|
1950
|
+
@apply flex size-12 cursor-pointer items-center justify-center rounded-full bg-cumquat-accent text-cumquat-text-inverse shadow-cumquat-overlay transition-colors;
|
|
1951
|
+
}
|
|
1952
|
+
.cumquat-float-button__trigger:hover {
|
|
1953
|
+
@apply bg-cumquat-accent-hover;
|
|
1954
|
+
}
|
|
1955
|
+
.cumquat-float-button__icon {
|
|
1956
|
+
@apply size-5 transition-transform;
|
|
1957
|
+
}
|
|
1958
|
+
.cumquat-float-button__icon--expanded {
|
|
1959
|
+
@apply rotate-45;
|
|
1960
|
+
}
|
|
1961
|
+
|
|
1962
|
+
/* ---------- DatePicker ---------- */
|
|
1963
|
+
.cumquat-date-picker {
|
|
1964
|
+
@apply relative inline-block w-64;
|
|
1965
|
+
}
|
|
1966
|
+
.cumquat-date-picker__trigger {
|
|
1967
|
+
@apply flex h-10 w-full cursor-pointer items-center justify-between gap-2 rounded-cumquat border border-cumquat-border px-3 text-sm transition-colors;
|
|
1968
|
+
}
|
|
1969
|
+
.cumquat-date-picker__trigger:focus {
|
|
1970
|
+
@apply outline-none ring-2 ring-cumquat-accent/20;
|
|
1971
|
+
}
|
|
1972
|
+
.cumquat-date-picker__trigger--open {
|
|
1973
|
+
@apply border-cumquat-accent;
|
|
1974
|
+
}
|
|
1975
|
+
.cumquat-date-picker__value--selected {
|
|
1976
|
+
@apply text-cumquat-text;
|
|
1977
|
+
}
|
|
1978
|
+
.cumquat-date-picker__value--placeholder {
|
|
1979
|
+
@apply text-cumquat-text-muted;
|
|
1980
|
+
}
|
|
1981
|
+
.cumquat-date-picker__icon {
|
|
1982
|
+
@apply size-4 text-cumquat-text-muted;
|
|
1983
|
+
}
|
|
1984
|
+
.cumquat-date-picker__panel {
|
|
1985
|
+
@apply absolute z-20 mt-1.5 w-full rounded-cumquat border border-cumquat-border bg-cumquat-surface p-3 shadow-cumquat-overlay;
|
|
1986
|
+
}
|
|
1987
|
+
.cumquat-date-picker__month {
|
|
1988
|
+
@apply mb-2 text-center text-sm font-semibold text-cumquat-text;
|
|
1989
|
+
}
|
|
1990
|
+
.cumquat-date-picker__grid {
|
|
1991
|
+
@apply grid grid-cols-7 gap-0.5 text-center text-xs;
|
|
1992
|
+
}
|
|
1993
|
+
.cumquat-date-picker__weekday {
|
|
1994
|
+
@apply py-1 text-cumquat-text-muted;
|
|
1995
|
+
}
|
|
1996
|
+
.cumquat-date-picker__day {
|
|
1997
|
+
@apply flex aspect-square cursor-pointer items-center justify-center rounded transition-colors;
|
|
1998
|
+
}
|
|
1999
|
+
.cumquat-date-picker__day--empty {
|
|
2000
|
+
@apply cursor-default text-transparent;
|
|
2001
|
+
}
|
|
2002
|
+
.cumquat-date-picker__day--selected {
|
|
2003
|
+
@apply bg-cumquat-accent font-medium text-cumquat-text-inverse;
|
|
2004
|
+
}
|
|
2005
|
+
.cumquat-date-picker__day--default {
|
|
2006
|
+
@apply text-cumquat-text;
|
|
2007
|
+
}
|
|
2008
|
+
.cumquat-date-picker__day--default:hover {
|
|
2009
|
+
@apply bg-cumquat-surface-2;
|
|
2010
|
+
}
|
|
2011
|
+
|
|
2012
|
+
/* ---------- TimePicker ---------- */
|
|
2013
|
+
.cumquat-time-picker {
|
|
2014
|
+
@apply relative inline-block w-40;
|
|
2015
|
+
}
|
|
2016
|
+
.cumquat-time-picker__trigger {
|
|
2017
|
+
@apply flex h-10 w-full cursor-pointer items-center justify-between gap-2 rounded-cumquat border border-cumquat-border px-3 text-sm transition-colors;
|
|
2018
|
+
}
|
|
2019
|
+
.cumquat-time-picker__trigger:focus {
|
|
2020
|
+
@apply outline-none ring-2 ring-cumquat-accent/20;
|
|
2021
|
+
}
|
|
2022
|
+
.cumquat-time-picker__trigger--open {
|
|
2023
|
+
@apply border-cumquat-accent;
|
|
2024
|
+
}
|
|
2025
|
+
.cumquat-time-picker__value--selected {
|
|
2026
|
+
@apply text-cumquat-text;
|
|
2027
|
+
}
|
|
2028
|
+
.cumquat-time-picker__value--placeholder {
|
|
2029
|
+
@apply text-cumquat-text-muted;
|
|
2030
|
+
}
|
|
2031
|
+
.cumquat-time-picker__icon {
|
|
2032
|
+
@apply size-4 text-cumquat-text-muted;
|
|
2033
|
+
}
|
|
2034
|
+
.cumquat-time-picker__panel {
|
|
2035
|
+
@apply absolute z-20 mt-1.5 flex w-full gap-1 rounded-cumquat border border-cumquat-border bg-cumquat-surface p-2 shadow-cumquat-overlay;
|
|
2036
|
+
}
|
|
2037
|
+
.cumquat-time-picker__hours,
|
|
2038
|
+
.cumquat-time-picker__minutes {
|
|
2039
|
+
@apply max-h-40 flex-1 overflow-y-auto text-center text-xs;
|
|
2040
|
+
}
|
|
2041
|
+
.cumquat-time-picker__hour,
|
|
2042
|
+
.cumquat-time-picker__minute {
|
|
2043
|
+
@apply cursor-pointer rounded px-2 py-1.5 transition-colors;
|
|
2044
|
+
}
|
|
2045
|
+
.cumquat-time-picker__hour--selected,
|
|
2046
|
+
.cumquat-time-picker__minute--selected {
|
|
2047
|
+
@apply bg-cumquat-accent text-cumquat-text-inverse;
|
|
2048
|
+
}
|
|
2049
|
+
.cumquat-time-picker__hour--default,
|
|
2050
|
+
.cumquat-time-picker__minute--default {
|
|
2051
|
+
@apply text-cumquat-text;
|
|
2052
|
+
}
|
|
2053
|
+
.cumquat-time-picker__hour--default:hover,
|
|
2054
|
+
.cumquat-time-picker__minute--default:hover {
|
|
2055
|
+
@apply bg-cumquat-surface-2;
|
|
2056
|
+
}
|
|
2057
|
+
|
|
2058
|
+
/* ---------- Calendar ---------- */
|
|
2059
|
+
.cumquat-calendar {
|
|
2060
|
+
@apply inline-block rounded-cumquat border border-cumquat-border bg-cumquat-surface p-4;
|
|
2061
|
+
}
|
|
2062
|
+
.cumquat-calendar__header {
|
|
2063
|
+
@apply mb-3 flex items-center justify-between;
|
|
2064
|
+
}
|
|
2065
|
+
.cumquat-calendar__nav {
|
|
2066
|
+
@apply flex size-8 cursor-pointer items-center justify-center rounded text-cumquat-text-muted transition-colors;
|
|
2067
|
+
}
|
|
2068
|
+
.cumquat-calendar__nav:hover {
|
|
2069
|
+
@apply bg-cumquat-surface-2 text-cumquat-text;
|
|
2070
|
+
}
|
|
2071
|
+
.cumquat-calendar__nav-icon {
|
|
2072
|
+
@apply size-4;
|
|
2073
|
+
}
|
|
2074
|
+
.cumquat-calendar__month {
|
|
2075
|
+
@apply text-sm font-semibold text-cumquat-text;
|
|
2076
|
+
}
|
|
2077
|
+
.cumquat-calendar__grid {
|
|
2078
|
+
@apply grid grid-cols-7 gap-1 text-center text-sm;
|
|
2079
|
+
}
|
|
2080
|
+
.cumquat-calendar__state {
|
|
2081
|
+
@apply flex items-center justify-center gap-2 py-2 text-xs text-cumquat-text-muted;
|
|
2082
|
+
}
|
|
2083
|
+
.cumquat-calendar__state.cq-state--error {
|
|
2084
|
+
@apply text-cumquat-danger;
|
|
2085
|
+
}
|
|
2086
|
+
.cumquat-calendar__retry {
|
|
2087
|
+
@apply cursor-pointer bg-transparent underline underline-offset-2;
|
|
2088
|
+
}
|
|
2089
|
+
.cumquat-calendar__retry:hover {
|
|
2090
|
+
@apply opacity-80;
|
|
2091
|
+
}
|
|
2092
|
+
.cumquat-calendar__weekday {
|
|
2093
|
+
@apply py-1.5 text-xs text-cumquat-text-muted;
|
|
2094
|
+
}
|
|
2095
|
+
.cumquat-calendar__day {
|
|
2096
|
+
@apply flex aspect-square cursor-pointer items-center justify-center rounded-cumquat text-cumquat-text transition-colors;
|
|
2097
|
+
}
|
|
2098
|
+
.cumquat-calendar__day--empty {
|
|
2099
|
+
@apply cursor-default text-transparent;
|
|
2100
|
+
}
|
|
2101
|
+
.cumquat-calendar__day--selected {
|
|
2102
|
+
@apply bg-cumquat-accent font-medium text-cumquat-text-inverse;
|
|
2103
|
+
}
|
|
2104
|
+
.cumquat-calendar__day--default:hover {
|
|
2105
|
+
@apply bg-cumquat-surface-2;
|
|
2106
|
+
}
|
|
2107
|
+
|
|
2108
|
+
/* ---------- ColorPicker ---------- */
|
|
2109
|
+
.cumquat-color-picker {
|
|
2110
|
+
@apply relative inline-block;
|
|
2111
|
+
}
|
|
2112
|
+
.cumquat-color-picker__trigger {
|
|
2113
|
+
@apply flex h-10 w-40 cursor-pointer items-center gap-2.5 rounded-cumquat border border-cumquat-border bg-cumquat-surface px-2.5 text-sm transition-colors;
|
|
2114
|
+
}
|
|
2115
|
+
.cumquat-color-picker__trigger:focus {
|
|
2116
|
+
@apply outline-none ring-2 ring-cumquat-accent/20;
|
|
2117
|
+
}
|
|
2118
|
+
.cumquat-color-picker__trigger--open {
|
|
2119
|
+
@apply border-cumquat-accent;
|
|
2120
|
+
}
|
|
2121
|
+
.cumquat-color-picker__swatch {
|
|
2122
|
+
@apply size-5 rounded border border-cumquat-border;
|
|
2123
|
+
}
|
|
2124
|
+
.cumquat-color-picker__value {
|
|
2125
|
+
@apply font-mono text-xs text-cumquat-text uppercase;
|
|
2126
|
+
}
|
|
2127
|
+
.cumquat-color-picker__panel {
|
|
2128
|
+
@apply absolute z-20 mt-1.5 w-64 rounded-cumquat border border-cumquat-border bg-cumquat-surface p-3 shadow-cumquat-overlay;
|
|
2129
|
+
}
|
|
2130
|
+
.cumquat-color-picker__area {
|
|
2131
|
+
@apply relative h-28 cursor-pointer rounded-cumquat;
|
|
2132
|
+
}
|
|
2133
|
+
.cumquat-color-picker__gradient-dark {
|
|
2134
|
+
@apply absolute inset-0 rounded-cumquat bg-gradient-to-r from-black/60 to-transparent;
|
|
2135
|
+
}
|
|
2136
|
+
.cumquat-color-picker__gradient-light {
|
|
2137
|
+
@apply absolute inset-0 rounded-cumquat bg-gradient-to-t from-white to-transparent;
|
|
2138
|
+
}
|
|
2139
|
+
.cumquat-color-picker__thumb {
|
|
2140
|
+
@apply absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow;
|
|
2141
|
+
}
|
|
2142
|
+
.cumquat-color-picker__hue {
|
|
2143
|
+
@apply relative mt-3 h-2.5 cursor-pointer rounded-full;
|
|
2144
|
+
background: linear-gradient(
|
|
2145
|
+
to right,
|
|
2146
|
+
#ff0000,
|
|
2147
|
+
#ffff00,
|
|
2148
|
+
#00ff00,
|
|
2149
|
+
#00ffff,
|
|
2150
|
+
#0000ff,
|
|
2151
|
+
#ff00ff,
|
|
2152
|
+
#ff0000
|
|
2153
|
+
);
|
|
2154
|
+
}
|
|
2155
|
+
.cumquat-color-picker__hue-thumb {
|
|
2156
|
+
@apply absolute top-1/2 left-1/3 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-cumquat-surface shadow;
|
|
2157
|
+
}
|
|
2158
|
+
.cumquat-color-picker__presets {
|
|
2159
|
+
@apply mt-3 grid grid-cols-10 gap-1.5;
|
|
2160
|
+
}
|
|
2161
|
+
.cumquat-color-picker__preset {
|
|
2162
|
+
@apply size-4.5 cursor-pointer rounded border transition-transform;
|
|
2163
|
+
}
|
|
2164
|
+
.cumquat-color-picker__preset:hover {
|
|
2165
|
+
@apply scale-110;
|
|
2166
|
+
}
|
|
2167
|
+
.cumquat-color-picker__preset--selected {
|
|
2168
|
+
@apply border-cumquat-text ring-2 ring-cumquat-accent ring-offset-1;
|
|
2169
|
+
}
|
|
2170
|
+
.cumquat-color-picker__preset--default {
|
|
2171
|
+
@apply border-cumquat-border;
|
|
2172
|
+
}
|
|
2173
|
+
|
|
2174
|
+
/* ---------- Transfer ---------- */
|
|
2175
|
+
.cumquat-transfer {
|
|
2176
|
+
@apply flex items-center gap-3;
|
|
2177
|
+
}
|
|
2178
|
+
.cumquat-transfer__panel {
|
|
2179
|
+
@apply flex w-56 flex-col rounded-cumquat border border-cumquat-border bg-cumquat-surface;
|
|
2180
|
+
}
|
|
2181
|
+
.cumquat-transfer__header {
|
|
2182
|
+
@apply border-b border-cumquat-border px-3 py-2.5 text-sm font-medium text-cumquat-text;
|
|
2183
|
+
}
|
|
2184
|
+
.cumquat-transfer__list {
|
|
2185
|
+
@apply max-h-56 overflow-y-auto p-1.5;
|
|
2186
|
+
}
|
|
2187
|
+
.cumquat-transfer__item {
|
|
2188
|
+
@apply cursor-pointer rounded px-2.5 py-1.5 text-sm transition-colors;
|
|
2189
|
+
}
|
|
2190
|
+
.cumquat-transfer__item--left {
|
|
2191
|
+
@apply text-cumquat-text;
|
|
2192
|
+
}
|
|
2193
|
+
.cumquat-transfer__item--left:hover {
|
|
2194
|
+
@apply bg-cumquat-accent-soft;
|
|
2195
|
+
}
|
|
2196
|
+
.cumquat-transfer__item--right {
|
|
2197
|
+
@apply text-cumquat-accent;
|
|
2198
|
+
}
|
|
2199
|
+
.cumquat-transfer__item--right:hover {
|
|
2200
|
+
@apply bg-cumquat-danger-soft text-cumquat-danger;
|
|
2201
|
+
}
|
|
2202
|
+
.cumquat-transfer__empty {
|
|
2203
|
+
@apply px-2.5 py-6 text-center text-xs text-cumquat-text-muted;
|
|
2204
|
+
}
|
|
2205
|
+
.cumquat-transfer__state {
|
|
2206
|
+
@apply flex items-center justify-center gap-2 px-2.5 py-6 text-xs text-cumquat-text-muted;
|
|
2207
|
+
}
|
|
2208
|
+
.cumquat-transfer__state.cq-state--error {
|
|
2209
|
+
@apply text-cumquat-danger;
|
|
2210
|
+
}
|
|
2211
|
+
.cumquat-transfer__retry {
|
|
2212
|
+
@apply cursor-pointer bg-transparent underline underline-offset-2;
|
|
2213
|
+
}
|
|
2214
|
+
.cumquat-transfer__retry:hover {
|
|
2215
|
+
@apply opacity-80;
|
|
2216
|
+
}
|
|
2217
|
+
.cumquat-transfer__actions {
|
|
2218
|
+
@apply flex flex-col gap-2;
|
|
2219
|
+
}
|
|
2220
|
+
.cumquat-transfer__action {
|
|
2221
|
+
@apply flex size-8 items-center justify-center rounded-full bg-cumquat-surface-3 text-cumquat-text-muted;
|
|
2222
|
+
}
|
|
2223
|
+
.cumquat-transfer__action-icon {
|
|
2224
|
+
@apply size-4;
|
|
2225
|
+
}
|
|
2226
|
+
|
|
2227
|
+
/* ---------- VirtualList ---------- */
|
|
2228
|
+
.cumquat-virtual-list {
|
|
2229
|
+
@apply overflow-y-auto rounded-cumquat border border-cumquat-border bg-cumquat-surface;
|
|
2230
|
+
}
|
|
2231
|
+
.cumquat-virtual-list__item {
|
|
2232
|
+
@apply flex items-center gap-3 border-b border-cumquat-border px-4 text-sm text-cumquat-text;
|
|
2233
|
+
}
|
|
2234
|
+
.cumquat-virtual-list__item:last-child {
|
|
2235
|
+
@apply border-b-0;
|
|
2236
|
+
}
|
|
2237
|
+
.cumquat-virtual-list__index {
|
|
2238
|
+
@apply w-8 text-xs text-cumquat-text-muted tabular-nums;
|
|
2239
|
+
}
|
|
2240
|
+
|
|
2241
|
+
/* ---------- Layout ---------- */
|
|
2242
|
+
.cumquat-layout {
|
|
2243
|
+
@apply w-full;
|
|
2244
|
+
}
|
|
2245
|
+
.cumquat-layout--vertical {
|
|
2246
|
+
@apply flex flex-col;
|
|
2247
|
+
}
|
|
2248
|
+
.cumquat-layout--horizontal {
|
|
2249
|
+
@apply flex flex-row;
|
|
2250
|
+
}
|
|
2251
|
+
.cumquat-layout__middle {
|
|
2252
|
+
@apply flex flex-1 flex-row;
|
|
2253
|
+
}
|
|
2254
|
+
.cumquat-layout__header,
|
|
2255
|
+
.cumquat-layout__footer {
|
|
2256
|
+
@apply shrink-0;
|
|
2257
|
+
}
|
|
2258
|
+
.cumquat-layout__sider {
|
|
2259
|
+
@apply w-56 shrink-0 overflow-hidden transition-[width] duration-200;
|
|
2260
|
+
}
|
|
2261
|
+
.cumquat-layout__sider--collapsed {
|
|
2262
|
+
@apply w-14;
|
|
2263
|
+
}
|
|
2264
|
+
.cumquat-layout__body {
|
|
2265
|
+
@apply min-w-0 flex-1;
|
|
2266
|
+
}
|
|
2267
|
+
|
|
2268
|
+
/* ---------- Grid ---------- */
|
|
2269
|
+
.cumquat-grid {
|
|
2270
|
+
@apply grid;
|
|
2271
|
+
}
|
|
2272
|
+
.cumquat-grid--cols-1 {
|
|
2273
|
+
@apply grid-cols-1;
|
|
2274
|
+
}
|
|
2275
|
+
.cumquat-grid--cols-2 {
|
|
2276
|
+
@apply grid-cols-1 sm:grid-cols-2;
|
|
2277
|
+
}
|
|
2278
|
+
.cumquat-grid--cols-3 {
|
|
2279
|
+
@apply grid-cols-1 sm:grid-cols-3;
|
|
2280
|
+
}
|
|
2281
|
+
.cumquat-grid--cols-4 {
|
|
2282
|
+
@apply grid-cols-2 sm:grid-cols-4;
|
|
2283
|
+
}
|
|
2284
|
+
.cumquat-grid--gap-none {
|
|
2285
|
+
@apply gap-0;
|
|
2286
|
+
}
|
|
2287
|
+
.cumquat-grid--gap-sm {
|
|
2288
|
+
@apply gap-2;
|
|
2289
|
+
}
|
|
2290
|
+
.cumquat-grid--gap-md {
|
|
2291
|
+
@apply gap-4;
|
|
2292
|
+
}
|
|
2293
|
+
.cumquat-grid--gap-lg {
|
|
2294
|
+
@apply gap-6;
|
|
2295
|
+
}
|
|
2296
|
+
.cumquat-grid--centered {
|
|
2297
|
+
@apply mx-auto max-w-6xl;
|
|
2298
|
+
}
|
|
2299
|
+
|
|
2300
|
+
/* ---------- Space ---------- */
|
|
2301
|
+
.cumquat-space {
|
|
2302
|
+
@apply flex;
|
|
2303
|
+
}
|
|
2304
|
+
.cumquat-space--vertical {
|
|
2305
|
+
@apply flex-col;
|
|
2306
|
+
}
|
|
2307
|
+
.cumquat-space--horizontal {
|
|
2308
|
+
@apply items-center;
|
|
2309
|
+
}
|
|
2310
|
+
.cumquat-space--wrap {
|
|
2311
|
+
@apply flex-wrap items-center;
|
|
2312
|
+
}
|
|
2313
|
+
.cumquat-space--size-sm {
|
|
2314
|
+
@apply gap-1.5;
|
|
2315
|
+
}
|
|
2316
|
+
.cumquat-space--size-md {
|
|
2317
|
+
@apply gap-3;
|
|
2318
|
+
}
|
|
2319
|
+
.cumquat-space--size-lg {
|
|
2320
|
+
@apply gap-6;
|
|
2321
|
+
}
|
|
2322
|
+
}
|
|
2323
|
+
|
|
2324
|
+
/*
|
|
2325
|
+
* 基础主题 · extras 场景组件
|
|
2326
|
+
* （Watermark / Tour / QRCode）
|
|
2327
|
+
*/
|
|
2328
|
+
@layer components {
|
|
2329
|
+
/* ---------- Watermark ---------- */
|
|
2330
|
+
.cumquat-watermark {
|
|
2331
|
+
@apply pointer-events-none absolute inset-0 z-10 overflow-hidden select-none;
|
|
2332
|
+
}
|
|
2333
|
+
.cumquat-watermark__grid {
|
|
2334
|
+
@apply absolute -inset-16 flex flex-wrap content-center;
|
|
2335
|
+
}
|
|
2336
|
+
.cumquat-watermark__item {
|
|
2337
|
+
@apply text-sm whitespace-nowrap text-cumquat-text/8;
|
|
2338
|
+
}
|
|
2339
|
+
|
|
2340
|
+
/* ---------- Tour ---------- */
|
|
2341
|
+
.cumquat-tour {
|
|
2342
|
+
@apply fixed inset-0 z-50;
|
|
2343
|
+
}
|
|
2344
|
+
.cumquat-tour__mask {
|
|
2345
|
+
@apply absolute inset-0 bg-black/50;
|
|
2346
|
+
}
|
|
2347
|
+
.cumquat-tour__card {
|
|
2348
|
+
@apply absolute top-1/3 left-1/2 w-72 -translate-x-1/2 rounded-cumquat border border-cumquat-border bg-cumquat-surface p-4 shadow-cumquat-overlay;
|
|
2349
|
+
}
|
|
2350
|
+
.cumquat-tour__step-count {
|
|
2351
|
+
@apply mb-1 text-xs text-cumquat-text-muted;
|
|
2352
|
+
}
|
|
2353
|
+
.cumquat-tour__title {
|
|
2354
|
+
@apply text-sm font-semibold text-cumquat-text;
|
|
2355
|
+
}
|
|
2356
|
+
.cumquat-tour__content {
|
|
2357
|
+
@apply mt-1 text-sm text-cumquat-text-muted;
|
|
2358
|
+
}
|
|
2359
|
+
.cumquat-tour__actions {
|
|
2360
|
+
@apply mt-3 flex items-center justify-between;
|
|
2361
|
+
}
|
|
2362
|
+
.cumquat-tour__prev {
|
|
2363
|
+
@apply cursor-pointer rounded-cumquat border border-cumquat-border px-3 py-1 text-xs text-cumquat-text transition-colors;
|
|
2364
|
+
}
|
|
2365
|
+
.cumquat-tour__prev:hover {
|
|
2366
|
+
@apply bg-cumquat-surface-2;
|
|
2367
|
+
}
|
|
2368
|
+
.cumquat-tour__next {
|
|
2369
|
+
@apply cursor-pointer rounded-cumquat bg-cumquat-accent px-3 py-1 text-xs text-cumquat-text-inverse transition-colors;
|
|
2370
|
+
}
|
|
2371
|
+
.cumquat-tour__next:hover {
|
|
2372
|
+
@apply bg-cumquat-accent-hover;
|
|
2373
|
+
}
|
|
2374
|
+
|
|
2375
|
+
/* ---------- QRCode ---------- */
|
|
2376
|
+
.cumquat-qrcode {
|
|
2377
|
+
@apply grid bg-cumquat-surface p-2;
|
|
2378
|
+
}
|
|
2379
|
+
.cumquat-qrcode__cell {
|
|
2380
|
+
@apply aspect-square;
|
|
2381
|
+
}
|
|
2382
|
+
.cumquat-qrcode__cell--dark {
|
|
2383
|
+
@apply bg-cumquat-text;
|
|
2384
|
+
}
|
|
2385
|
+
.cumquat-qrcode__cell--light {
|
|
2386
|
+
@apply bg-transparent;
|
|
2387
|
+
}
|
|
2388
|
+
|
|
2389
|
+
/* ---------- CodeCard ---------- */
|
|
2390
|
+
.cumquat-code-card {
|
|
2391
|
+
@apply overflow-hidden rounded-cumquat border border-cumquat-border bg-cumquat-surface;
|
|
2392
|
+
}
|
|
2393
|
+
.cumquat-code-card__header {
|
|
2394
|
+
@apply border-b border-cumquat-border px-4 py-2.5;
|
|
2395
|
+
}
|
|
2396
|
+
.cumquat-code-card__title {
|
|
2397
|
+
@apply text-sm font-medium text-cumquat-text;
|
|
2398
|
+
}
|
|
2399
|
+
.cumquat-code-card__preview {
|
|
2400
|
+
@apply p-4;
|
|
2401
|
+
}
|
|
2402
|
+
.cumquat-code-card__toolbar {
|
|
2403
|
+
@apply flex items-center justify-end gap-1 border-t border-cumquat-border px-2 py-1.5;
|
|
2404
|
+
}
|
|
2405
|
+
.cumquat-code-card__action {
|
|
2406
|
+
@apply inline-flex h-7 cursor-pointer items-center gap-1 rounded-cumquat px-2 text-xs text-cumquat-text-muted transition-colors hover:bg-cumquat-surface-2 hover:text-cumquat-text;
|
|
2407
|
+
}
|
|
2408
|
+
.cumquat-code-card__action--active,
|
|
2409
|
+
.cumquat-code-card__action--active:hover {
|
|
2410
|
+
@apply text-cumquat-accent;
|
|
2411
|
+
}
|
|
2412
|
+
.cumquat-code-card__action-icon {
|
|
2413
|
+
@apply size-3.5;
|
|
2414
|
+
}
|
|
2415
|
+
.cumquat-code-card__code {
|
|
2416
|
+
@apply border-t border-cumquat-border bg-cumquat-surface-2;
|
|
2417
|
+
}
|
|
2418
|
+
.cumquat-code-card__plain,
|
|
2419
|
+
.cumquat-code-card__highlight .shiki {
|
|
2420
|
+
@apply max-h-96 overflow-auto p-4 font-mono text-xs leading-relaxed text-cumquat-text;
|
|
2421
|
+
}
|
|
2422
|
+
.cumquat-code-card__highlight .shiki {
|
|
2423
|
+
@apply bg-transparent;
|
|
2424
|
+
}
|
|
2425
|
+
.cumquat-code-card__editor {
|
|
2426
|
+
@apply block max-h-96 w-full resize-y overflow-auto border-0 bg-transparent p-4 font-mono text-xs leading-relaxed text-cumquat-text outline-none;
|
|
2427
|
+
}
|
|
2428
|
+
/* shiki 双主题：默认亮色，暗色主题下切换 --shiki-dark */
|
|
2429
|
+
.cumquat-code-card__highlight .shiki span {
|
|
2430
|
+
color: var(--shiki-light);
|
|
2431
|
+
}
|
|
2432
|
+
.cq-theme-dark .cumquat-code-card__highlight .shiki span,
|
|
2433
|
+
.dark .cumquat-code-card__highlight .shiki span {
|
|
2434
|
+
color: var(--shiki-dark);
|
|
2435
|
+
}
|
|
2436
|
+
|
|
2437
|
+
/* ============================================================
|
|
2438
|
+
* 统一 hover 交互增强
|
|
2439
|
+
*
|
|
2440
|
+
* 在所有主题下为可交互元素提供一致的悬浮反馈：
|
|
2441
|
+
* - 过渡曲线统一为带弹性的 cubic-bezier，时长 0.2s；
|
|
2442
|
+
* - 按钮 / 图标按钮：hover 上浮 + 阴影，active 回落；
|
|
2443
|
+
* - 可悬浮卡片：上浮 + 阴影加深；
|
|
2444
|
+
* - 行 / 选项：hover 时左侧轻微缩进，增强指向感。
|
|
2445
|
+
* ============================================================ */
|
|
2446
|
+
|
|
2447
|
+
/* 统一过渡曲线：所有可交互元素 */
|
|
2448
|
+
.cumquat-button,
|
|
2449
|
+
.cumquat-card--hoverable,
|
|
2450
|
+
.cumquat-back-top,
|
|
2451
|
+
.cumquat-float-button__trigger,
|
|
2452
|
+
.cumquat-float-button__action,
|
|
2453
|
+
.cumquat-carousel__prev,
|
|
2454
|
+
.cumquat-carousel__next,
|
|
2455
|
+
.cumquat-dialog__close,
|
|
2456
|
+
.cumquat-drawer__close,
|
|
2457
|
+
.cumquat-message__close,
|
|
2458
|
+
.cumquat-alert__close,
|
|
2459
|
+
.cumquat-notification__close,
|
|
2460
|
+
.cumquat-tag__close,
|
|
2461
|
+
.cumquat-typography__copy,
|
|
2462
|
+
.cumquat-popconfirm__cancel,
|
|
2463
|
+
.cumquat-popconfirm__ok,
|
|
2464
|
+
.cumquat-tour__prev,
|
|
2465
|
+
.cumquat-tour__next,
|
|
2466
|
+
.cumquat-pagination__prev,
|
|
2467
|
+
.cumquat-pagination__next,
|
|
2468
|
+
.cumquat-pagination__page,
|
|
2469
|
+
.cumquat-input-number__decrease,
|
|
2470
|
+
.cumquat-input-number__increase,
|
|
2471
|
+
.cumquat-calendar__nav,
|
|
2472
|
+
.cumquat-upload__remove,
|
|
2473
|
+
.cumquat-code-card__action {
|
|
2474
|
+
@apply transition-all duration-200;
|
|
2475
|
+
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
2476
|
+
}
|
|
2477
|
+
|
|
2478
|
+
/* 按钮：hover 上浮 + 阴影，active 回落 */
|
|
2479
|
+
.cumquat-button:not(:disabled):not(.cumquat-button--loading):hover {
|
|
2480
|
+
transform: translateY(-1px);
|
|
2481
|
+
box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
|
|
2482
|
+
}
|
|
2483
|
+
.cumquat-button:not(:disabled):not(.cumquat-button--loading):active {
|
|
2484
|
+
transform: translateY(0);
|
|
2485
|
+
box-shadow: none;
|
|
2486
|
+
}
|
|
2487
|
+
|
|
2488
|
+
/* 可悬浮卡片：上浮 + 阴影加深 */
|
|
2489
|
+
.cumquat-card--hoverable {
|
|
2490
|
+
@apply transition-all duration-200;
|
|
2491
|
+
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
2492
|
+
}
|
|
2493
|
+
.cumquat-card--hoverable:hover {
|
|
2494
|
+
transform: translateY(-2px);
|
|
2495
|
+
box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
|
|
2496
|
+
}
|
|
2497
|
+
|
|
2498
|
+
/* 图标按钮类（关闭、返回顶部、悬浮按钮、轮播箭头）：hover 放大 + 阴影 */
|
|
2499
|
+
.cumquat-back-top:hover,
|
|
2500
|
+
.cumquat-float-button__trigger:hover,
|
|
2501
|
+
.cumquat-float-button__action:hover,
|
|
2502
|
+
.cumquat-carousel__prev:hover,
|
|
2503
|
+
.cumquat-carousel__next:hover {
|
|
2504
|
+
transform: scale(1.06);
|
|
2505
|
+
box-shadow: 0 4px 16px rgb(0 0 0 / 0.14);
|
|
2506
|
+
}
|
|
2507
|
+
.cumquat-back-top:active,
|
|
2508
|
+
.cumquat-float-button__trigger:active,
|
|
2509
|
+
.cumquat-float-button__action:active,
|
|
2510
|
+
.cumquat-carousel__prev:active,
|
|
2511
|
+
.cumquat-carousel__next:active {
|
|
2512
|
+
transform: scale(0.98);
|
|
2513
|
+
}
|
|
2514
|
+
|
|
2515
|
+
/* 行 / 选项 hover：轻微缩进增强指向感 */
|
|
2516
|
+
.cumquat-table__row:hover .cumquat-table__td:first-child,
|
|
2517
|
+
.cumquat-menu__item--inactive:hover,
|
|
2518
|
+
.cumquat-tree__row:hover,
|
|
2519
|
+
.cumquat-select__option:hover,
|
|
2520
|
+
.cumquat-autocomplete__option:hover,
|
|
2521
|
+
.cumquat-mention__option:hover,
|
|
2522
|
+
.cumquat-cascader__option:not(.cumquat-cascader__option--selected):hover,
|
|
2523
|
+
.cumquat-tree-select__node:hover,
|
|
2524
|
+
.cumquat-tree-select__leaf:not(.cumquat-tree-select__leaf--active):hover {
|
|
2525
|
+
padding-left: calc(var(--spacing) * 4.5);
|
|
2526
|
+
}
|
|
2527
|
+
.cumquat-table__td,
|
|
2528
|
+
.cumquat-menu__item--inactive,
|
|
2529
|
+
.cumquat-tree__row,
|
|
2530
|
+
.cumquat-select__option,
|
|
2531
|
+
.cumquat-autocomplete__option,
|
|
2532
|
+
.cumquat-mention__option,
|
|
2533
|
+
.cumquat-cascader__option,
|
|
2534
|
+
.cumquat-tree-select__node,
|
|
2535
|
+
.cumquat-tree-select__leaf {
|
|
2536
|
+
transition:
|
|
2537
|
+
background-color 0.2s ease,
|
|
2538
|
+
color 0.2s ease,
|
|
2539
|
+
padding-left 0.2s ease;
|
|
2540
|
+
}
|
|
2541
|
+
}
|
|
2542
|
+
|
|
2543
|
+
/*
|
|
2544
|
+
* 基础主题 · P3 组件增强
|
|
2545
|
+
* （Slider 刻度 / Rate 半星 / Transfer 勾选搜索 / Affix / Statistic /
|
|
2546
|
+
* Typography 编辑截断 / Image 预览 / Carousel 播放指示）
|
|
2547
|
+
*/
|
|
2548
|
+
@layer components {
|
|
2549
|
+
/* ---------- Slider ---------- */
|
|
2550
|
+
.cumquat-slider--range {
|
|
2551
|
+
@apply w-full;
|
|
2552
|
+
}
|
|
2553
|
+
.cumquat-slider__tick {
|
|
2554
|
+
@apply absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-cumquat-border;
|
|
2555
|
+
}
|
|
2556
|
+
.cumquat-slider__marks {
|
|
2557
|
+
@apply relative mt-2 block h-4;
|
|
2558
|
+
}
|
|
2559
|
+
.cumquat-slider__mark {
|
|
2560
|
+
@apply absolute -translate-x-1/2 text-xs text-cumquat-text-muted;
|
|
2561
|
+
}
|
|
2562
|
+
.cumquat-slider__thumb--high {
|
|
2563
|
+
@apply bg-cumquat-primary-600;
|
|
2564
|
+
}
|
|
2565
|
+
|
|
2566
|
+
/* ---------- Rate 半星 ---------- */
|
|
2567
|
+
.cumquat-rate__star--half {
|
|
2568
|
+
position: relative;
|
|
2569
|
+
}
|
|
2570
|
+
.cumquat-rate__icon--bg {
|
|
2571
|
+
@apply absolute inset-0 text-cumquat-border;
|
|
2572
|
+
}
|
|
2573
|
+
.cumquat-rate__icon--half {
|
|
2574
|
+
position: absolute;
|
|
2575
|
+
inset: 0 auto 0 0;
|
|
2576
|
+
width: 50%;
|
|
2577
|
+
overflow: hidden;
|
|
2578
|
+
}
|
|
2579
|
+
|
|
2580
|
+
/* ---------- Transfer 增强 ---------- */
|
|
2581
|
+
.cumquat-transfer__check-all {
|
|
2582
|
+
@apply flex cursor-pointer items-center gap-2 text-xs font-medium text-cumquat-text;
|
|
2583
|
+
}
|
|
2584
|
+
.cumquat-transfer__search {
|
|
2585
|
+
@apply mx-2 mb-1 w-[calc(100%-1rem)] rounded border border-cumquat-border bg-cumquat-surface px-2 py-1 text-xs text-cumquat-text outline-none focus:border-cumquat-primary-500;
|
|
2586
|
+
}
|
|
2587
|
+
.cumquat-transfer__checkbox {
|
|
2588
|
+
@apply mr-2;
|
|
2589
|
+
}
|
|
2590
|
+
.cumquat-transfer__item {
|
|
2591
|
+
@apply flex cursor-pointer items-center;
|
|
2592
|
+
}
|
|
2593
|
+
.cumquat-transfer__item--disabled {
|
|
2594
|
+
@apply cursor-not-allowed opacity-50;
|
|
2595
|
+
}
|
|
2596
|
+
.cumquat-transfer__action:disabled {
|
|
2597
|
+
@apply cursor-not-allowed opacity-40;
|
|
2598
|
+
}
|
|
2599
|
+
|
|
2600
|
+
/* ---------- Affix ---------- */
|
|
2601
|
+
.cumquat-affix--fixed {
|
|
2602
|
+
@apply shadow-cumquat-overlay;
|
|
2603
|
+
}
|
|
2604
|
+
|
|
2605
|
+
/* ---------- Statistic ---------- */
|
|
2606
|
+
.cumquat-statistic--countdown .cumquat-statistic__number {
|
|
2607
|
+
@apply font-mono tabular-nums;
|
|
2608
|
+
}
|
|
2609
|
+
|
|
2610
|
+
/* ---------- Typography 增强 ---------- */
|
|
2611
|
+
.cumquat-typography--clamp {
|
|
2612
|
+
@apply overflow-hidden;
|
|
2613
|
+
}
|
|
2614
|
+
.cumquat-typography--start {
|
|
2615
|
+
direction: rtl;
|
|
2616
|
+
text-overflow: ellipsis;
|
|
2617
|
+
}
|
|
2618
|
+
.cumquat-typography--middle {
|
|
2619
|
+
@apply flex items-center;
|
|
2620
|
+
}
|
|
2621
|
+
.cumquat-typography__head {
|
|
2622
|
+
@apply min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap;
|
|
2623
|
+
}
|
|
2624
|
+
.cumquat-typography__tail {
|
|
2625
|
+
@apply shrink-0 whitespace-nowrap;
|
|
2626
|
+
}
|
|
2627
|
+
.cumquat-typography__actions {
|
|
2628
|
+
@apply ml-1 inline-flex items-center gap-0.5 align-middle;
|
|
2629
|
+
}
|
|
2630
|
+
.cumquat-typography__edit {
|
|
2631
|
+
@apply flex cursor-pointer items-center justify-center rounded p-0.5 text-cumquat-text-muted transition-colors hover:bg-cumquat-surface-2 hover:text-cumquat-primary-600;
|
|
2632
|
+
}
|
|
2633
|
+
.cumquat-typography__editor {
|
|
2634
|
+
@apply w-full rounded border border-cumquat-primary-500 bg-cumquat-surface p-1 text-sm text-cumquat-text outline-none;
|
|
2635
|
+
}
|
|
2636
|
+
|
|
2637
|
+
/* ---------- Image 预览 ---------- */
|
|
2638
|
+
.cumquat-image {
|
|
2639
|
+
@apply relative inline-flex;
|
|
2640
|
+
}
|
|
2641
|
+
.cumquat-image--previewable .cumquat-image__img {
|
|
2642
|
+
@apply cursor-zoom-in;
|
|
2643
|
+
}
|
|
2644
|
+
.cumquat-image__placeholder {
|
|
2645
|
+
@apply inline-block size-full animate-pulse rounded bg-cumquat-surface-2;
|
|
2646
|
+
}
|
|
2647
|
+
.cumquat-image__fallback--button {
|
|
2648
|
+
@apply cursor-pointer border-0 bg-transparent p-0;
|
|
2649
|
+
}
|
|
2650
|
+
.cumquat-image-preview {
|
|
2651
|
+
@apply fixed inset-0 z-[1000] flex items-center justify-center bg-cumquat-overlay/80;
|
|
2652
|
+
}
|
|
2653
|
+
.cumquat-image-preview__img {
|
|
2654
|
+
@apply max-h-[80vh] max-w-[80vw] select-none transition-transform duration-150;
|
|
2655
|
+
}
|
|
2656
|
+
.cumquat-image-preview__img--dragging {
|
|
2657
|
+
@apply cursor-grabbing transition-none;
|
|
2658
|
+
}
|
|
2659
|
+
.cumquat-image-preview__toolbar {
|
|
2660
|
+
@apply absolute bottom-6 flex items-center gap-1 rounded-full bg-cumquat-surface px-2 py-1 text-sm shadow-cumquat-overlay;
|
|
2661
|
+
}
|
|
2662
|
+
.cumquat-image-preview__toolbar button {
|
|
2663
|
+
@apply flex size-8 cursor-pointer items-center justify-center rounded-full text-cumquat-text transition-colors hover:bg-cumquat-surface-2;
|
|
2664
|
+
}
|
|
2665
|
+
|
|
2666
|
+
/* ---------- Carousel 播放指示 ---------- */
|
|
2667
|
+
.cumquat-carousel__playing {
|
|
2668
|
+
@apply absolute right-3 top-3 size-1.5 rounded-full bg-cumquat-primary-500;
|
|
2669
|
+
}
|
|
2670
|
+
|
|
2671
|
+
/* ---------- P4：Calendar 面板/范围/日程 ---------- */
|
|
2672
|
+
.cumquat-calendar__day:not(:disabled):hover {
|
|
2673
|
+
@apply bg-cumquat-surface-2;
|
|
2674
|
+
}
|
|
2675
|
+
.cumquat-calendar__day:disabled {
|
|
2676
|
+
@apply cursor-not-allowed text-cumquat-text-disabled;
|
|
2677
|
+
}
|
|
2678
|
+
.cumquat-calendar__day--today {
|
|
2679
|
+
@apply ring-1 ring-cumquat-primary-500;
|
|
2680
|
+
}
|
|
2681
|
+
.cumquat-calendar__day--in-range {
|
|
2682
|
+
@apply rounded-none bg-cumquat-primary-50;
|
|
2683
|
+
}
|
|
2684
|
+
.cumquat-calendar__day--range-start,
|
|
2685
|
+
.cumquat-calendar__day--range-end {
|
|
2686
|
+
@apply rounded-none bg-cumquat-primary-100;
|
|
2687
|
+
}
|
|
2688
|
+
.cumquat-calendar__day--selected:hover {
|
|
2689
|
+
@apply bg-cumquat-accent;
|
|
2690
|
+
}
|
|
2691
|
+
.cumquat-calendar__dot {
|
|
2692
|
+
@apply absolute bottom-0.5 size-1 rounded-full bg-cumquat-primary-500;
|
|
2693
|
+
}
|
|
2694
|
+
.cumquat-calendar__day {
|
|
2695
|
+
position: relative;
|
|
2696
|
+
}
|
|
2697
|
+
.cumquat-calendar__panel-grid {
|
|
2698
|
+
@apply grid grid-cols-4 gap-1 text-center text-sm;
|
|
2699
|
+
}
|
|
2700
|
+
.cumquat-calendar__panel-grid--years {
|
|
2701
|
+
@apply grid-cols-3;
|
|
2702
|
+
}
|
|
2703
|
+
.cumquat-calendar__panel-cell {
|
|
2704
|
+
@apply cursor-pointer rounded-cumquat px-2 py-2.5 text-cumquat-text transition-colors hover:bg-cumquat-surface-2 disabled:cursor-not-allowed disabled:text-cumquat-text-disabled;
|
|
2705
|
+
}
|
|
2706
|
+
.cumquat-calendar__panel-cell--muted {
|
|
2707
|
+
@apply text-cumquat-text-muted;
|
|
2708
|
+
}
|
|
2709
|
+
|
|
2710
|
+
/* ---------- P4：ColorPicker 透明度/输入 ---------- */
|
|
2711
|
+
.cumquat-color-picker__alpha {
|
|
2712
|
+
@apply relative mt-3 h-2.5 cursor-pointer rounded-full;
|
|
2713
|
+
}
|
|
2714
|
+
.cumquat-color-picker__alpha-thumb {
|
|
2715
|
+
@apply absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full border-2 border-white bg-cumquat-surface shadow;
|
|
2716
|
+
}
|
|
2717
|
+
.cumquat-color-picker__hex {
|
|
2718
|
+
@apply mt-3 w-full rounded border border-cumquat-border bg-cumquat-surface px-2 py-1 font-mono text-xs uppercase text-cumquat-text outline-none focus:border-cumquat-primary-500;
|
|
2719
|
+
}
|
|
2720
|
+
|
|
2721
|
+
/* ---------- P4：VirtualList 绝对定位窗口 ---------- */
|
|
2722
|
+
.cumquat-virtual-list__inner {
|
|
2723
|
+
@apply relative m-0 list-none p-0;
|
|
2724
|
+
}
|
|
2725
|
+
.cumquat-virtual-list__item {
|
|
2726
|
+
@apply absolute inset-x-0 list-none;
|
|
2727
|
+
}
|
|
2728
|
+
.cumquat-virtual-list--stale {
|
|
2729
|
+
@apply opacity-60;
|
|
2730
|
+
}
|
|
2731
|
+
.cumquat-virtual-list__state {
|
|
2732
|
+
@apply m-0 py-6 text-center text-xs text-cumquat-text-muted;
|
|
2733
|
+
}
|
|
2734
|
+
.cumquat-virtual-list__state.cq-state--error {
|
|
2735
|
+
@apply text-cumquat-danger;
|
|
2736
|
+
}
|
|
2737
|
+
.cumquat-virtual-list__state--sentinel {
|
|
2738
|
+
@apply absolute inset-x-0 bottom-0 bg-cumquat-surface/80 py-1;
|
|
2739
|
+
}
|
|
2740
|
+
.cumquat-virtual-list__retry {
|
|
2741
|
+
@apply cursor-pointer bg-transparent underline underline-offset-2;
|
|
2742
|
+
}
|
|
2743
|
+
.cumquat-virtual-list__retry:hover {
|
|
2744
|
+
@apply opacity-80;
|
|
2745
|
+
}
|
|
2746
|
+
|
|
2747
|
+
/* ---------- P4：Watermark 覆层 ---------- */
|
|
2748
|
+
.cumquat-watermark {
|
|
2749
|
+
@apply static inset-auto z-auto overflow-visible;
|
|
2750
|
+
position: relative;
|
|
2751
|
+
pointer-events: auto;
|
|
2752
|
+
}
|
|
2753
|
+
.cumquat-watermark__layer {
|
|
2754
|
+
@apply pointer-events-none absolute inset-0 overflow-hidden;
|
|
2755
|
+
}
|
|
2756
|
+
.cumquat-watermark__canvas {
|
|
2757
|
+
@apply absolute inset-0;
|
|
2758
|
+
}
|
|
2759
|
+
.cumquat-watermark__item {
|
|
2760
|
+
@apply pointer-events-none absolute select-none whitespace-nowrap;
|
|
2761
|
+
}
|
|
2762
|
+
|
|
2763
|
+
/* ---------- P4：Tour 挖空/关闭/跳过 ---------- */
|
|
2764
|
+
.cumquat-tour__mask {
|
|
2765
|
+
position: absolute;
|
|
2766
|
+
background: rgb(23 23 23 / 50%);
|
|
2767
|
+
}
|
|
2768
|
+
.cumquat-tour__mask--full {
|
|
2769
|
+
@apply inset-0;
|
|
2770
|
+
}
|
|
2771
|
+
.cumquat-tour__card--anchored {
|
|
2772
|
+
@apply w-72;
|
|
2773
|
+
}
|
|
2774
|
+
.cumquat-tour__close {
|
|
2775
|
+
@apply absolute right-2 top-2 flex size-6 cursor-pointer items-center justify-center rounded-full text-cumquat-text-muted transition-colors hover:bg-cumquat-surface-2 hover:text-cumquat-text;
|
|
2776
|
+
}
|
|
2777
|
+
.cumquat-tour__close svg {
|
|
2778
|
+
@apply size-3.5;
|
|
2779
|
+
}
|
|
2780
|
+
.cumquat-tour__skip {
|
|
2781
|
+
@apply mr-auto cursor-pointer text-xs text-cumquat-text-muted transition-colors hover:text-cumquat-text;
|
|
2782
|
+
}
|
|
2783
|
+
}
|