@allbluecn/web-app 0.4.10 → 0.4.13

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.
@@ -0,0 +1,464 @@
1
+ /*
2
+ * shadcn/typeset
3
+ * https://ui.shadcn.com/docs/typeset.
4
+ */
5
+
6
+ @layer components {
7
+ .typeset {
8
+ --typeset-font-body: inherit;
9
+ --typeset-font-heading: var(--font-heading);
10
+ --typeset-font-mono: var(--font-mono);
11
+ --typeset-size: 1em;
12
+ --typeset-leading: 1.75;
13
+ --typeset-flow: 1.25em;
14
+ }
15
+ }
16
+
17
+ @layer components {
18
+ .typeset {
19
+ font-family: var(--typeset-font-body);
20
+ font-size: calc(var(--typeset-size) * 1.125);
21
+ line-height: var(--typeset-leading);
22
+ color: var(--color-foreground, currentColor);
23
+ overflow-wrap: break-word;
24
+ margin-trim: block-start;
25
+
26
+ @media (min-width: 70rem), print {
27
+ font-size: var(--typeset-size);
28
+ }
29
+
30
+ --typeset-muted: var(
31
+ --color-muted-foreground,
32
+ color-mix(in oklab, currentColor 60%, transparent)
33
+ );
34
+ --typeset-rule: var(
35
+ --color-border,
36
+ color-mix(in oklab, currentColor 20%, transparent)
37
+ );
38
+ }
39
+
40
+ .typeset
41
+ *:not(
42
+ :where(
43
+ .not-typeset,
44
+ [data-not-typeset],
45
+ .not-typeset *,
46
+ [data-not-typeset] *
47
+ )
48
+ ) {
49
+ &:where(p) {
50
+ margin-block-start: var(--typeset-flow);
51
+ margin-block-end: 0;
52
+ }
53
+
54
+ &:where(h1, h2, h3, h4, h5, h6) {
55
+ color: var(--color-foreground, currentColor);
56
+ font-family: var(--typeset-font-heading);
57
+ font-weight: 600;
58
+ margin-block-end: 0;
59
+ }
60
+ &:where(h1) {
61
+ font-size: 1.75em;
62
+ line-height: 1.3;
63
+ margin-block-start: var(--typeset-flow);
64
+ }
65
+ &:where(h2) {
66
+ font-size: 1.25em;
67
+ line-height: 1.4;
68
+ margin-block-start: calc(var(--typeset-flow) * 1.4);
69
+ }
70
+ &:where(h3) {
71
+ font-size: 1.125em;
72
+ line-height: 1.45;
73
+ margin-block-start: var(--typeset-flow);
74
+ }
75
+ &:where(h4) {
76
+ font-size: 1em;
77
+ line-height: 1.5;
78
+ margin-block-start: var(--typeset-flow);
79
+ }
80
+ &:where(h5) {
81
+ font-size: 0.875em;
82
+ line-height: 1.5;
83
+ font-weight: 500;
84
+ color: var(--typeset-muted);
85
+ margin-block-start: calc(var(--typeset-flow) / 0.875);
86
+ }
87
+ &:where(h6) {
88
+ font-size: 0.8125em;
89
+ line-height: 1.5;
90
+ font-weight: 500;
91
+ letter-spacing: 0.08em;
92
+ text-transform: uppercase;
93
+ color: var(--typeset-muted);
94
+ margin-block-start: calc(var(--typeset-flow) / 0.8125);
95
+ }
96
+ &:where([id]) {
97
+ scroll-margin-block-start: var(--typeset-flow);
98
+ }
99
+
100
+ &:where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
101
+ margin-block-start: 1em;
102
+ }
103
+ &:where(:is(h1, h2, h3, h4) :is(code)) {
104
+ font-size: 0.9em;
105
+ }
106
+
107
+ &:where(a) {
108
+ color: inherit;
109
+ font-weight: 500;
110
+ text-decoration-line: underline;
111
+ text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
112
+ }
113
+ &:where(a:hover) {
114
+ text-decoration-color: currentColor;
115
+ }
116
+ &:where(a:focus-visible) {
117
+ outline: 2px solid var(--color-ring, currentColor);
118
+ outline-offset: 2px;
119
+ border-radius: 0.125em;
120
+ }
121
+ &:where(:is(h1, h2, h3, h4, h5, h6) :is(a)) {
122
+ font-weight: inherit;
123
+ }
124
+
125
+ &:where(strong, b) {
126
+ font-weight: 600;
127
+ }
128
+ &:where(:is(h1, h2, h3, h4) :is(strong, b)) {
129
+ font-weight: 600;
130
+ }
131
+ &:where(mark) {
132
+ background-color: color-mix(
133
+ in oklab,
134
+ oklch(0.86 0.17 95) 40%,
135
+ transparent
136
+ );
137
+ color: inherit;
138
+ padding: 0.05em 0.15em;
139
+ border-radius: 0.2em;
140
+ }
141
+ &:where(abbr[title]) {
142
+ text-decoration-line: underline;
143
+ text-decoration-style: dotted;
144
+ text-underline-offset: 0.2em;
145
+ cursor: help;
146
+ }
147
+ &:where(del, s) {
148
+ color: var(--typeset-muted);
149
+ text-decoration-line: line-through;
150
+ }
151
+ &:where(sup, sub) {
152
+ font-size: 0.75em;
153
+ line-height: 0;
154
+ position: relative;
155
+ vertical-align: baseline;
156
+ }
157
+ &:where(sup) {
158
+ top: -0.5em;
159
+ }
160
+ &:where(sub) {
161
+ bottom: -0.25em;
162
+ }
163
+ &:where(sup a) {
164
+ text-decoration-line: none;
165
+ font-weight: 500;
166
+ }
167
+
168
+ &:where(ul) {
169
+ list-style-type: disc;
170
+ }
171
+ &:where(ol) {
172
+ list-style-type: decimal;
173
+ }
174
+ &:where(ul ul) {
175
+ list-style-type: circle;
176
+ }
177
+ &:where(ul ul ul) {
178
+ list-style-type: square;
179
+ }
180
+ &:where(ol[type="a" i]) {
181
+ list-style-type: lower-alpha;
182
+ }
183
+ &:where(ol[type="i" i]) {
184
+ list-style-type: lower-roman;
185
+ }
186
+ &:where(ol[type="A" s]) {
187
+ list-style-type: upper-alpha;
188
+ }
189
+ &:where(ol[type="I" s]) {
190
+ list-style-type: upper-roman;
191
+ }
192
+ &:where(ul, ol) {
193
+ margin-block-start: var(--typeset-flow);
194
+ margin-block-end: 0;
195
+ padding-inline-start: 1.5em;
196
+ }
197
+ &:where(li) {
198
+ margin-block-start: 0.5em;
199
+ padding-inline-start: 0.4em;
200
+ }
201
+ &:where(li > p, li > ul, li > ol) {
202
+ margin-block-start: 0.5em;
203
+ }
204
+ &:where(ul > li)::marker {
205
+ color: var(--typeset-muted);
206
+ }
207
+ &:where(ol > li)::marker {
208
+ color: var(--typeset-muted);
209
+ }
210
+
211
+ &:where(ul.contains-task-list) {
212
+ list-style-type: none;
213
+ padding-inline-start: 0.25em;
214
+ }
215
+ &:where(li.task-list-item > input[type="checkbox"]) {
216
+ margin-inline-end: 0.5em;
217
+ vertical-align: -0.1em;
218
+ accent-color: var(--color-primary, currentColor);
219
+ }
220
+
221
+ &:where(details) {
222
+ margin-block-start: var(--typeset-flow);
223
+ margin-block-end: 0;
224
+ }
225
+ &:where(summary) {
226
+ cursor: pointer;
227
+ font-weight: 500;
228
+ }
229
+ &:where(summary)::marker {
230
+ color: var(--typeset-muted);
231
+ }
232
+
233
+ &:where(kbd) {
234
+ font-family: inherit;
235
+ font-size: 0.85em;
236
+ font-weight: 500;
237
+ border: 1px solid var(--typeset-rule);
238
+ border-block-end-width: 2px;
239
+ border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
240
+ padding: 0.0625em 0.35em;
241
+ }
242
+
243
+ &:where(dl) {
244
+ margin-block-start: var(--typeset-flow);
245
+ margin-block-end: 0;
246
+ }
247
+ &:where(dt) {
248
+ font-weight: 500;
249
+ margin-block-start: 1em;
250
+ }
251
+ &:where(dt + dt) {
252
+ margin-block-start: 0.25em;
253
+ }
254
+ &:where(dd) {
255
+ margin-block-start: 0.25em;
256
+ margin-inline-start: 0;
257
+ padding-inline-start: 1em;
258
+ color: var(--typeset-muted);
259
+ }
260
+
261
+ &:where(:not(pre) > code) {
262
+ background-color: var(
263
+ --color-muted,
264
+ color-mix(in oklab, currentColor 8%, transparent)
265
+ );
266
+ font-family: var(--typeset-font-mono);
267
+ font-size: 0.85em;
268
+ border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
269
+ padding: 0.125em 0.3em;
270
+ }
271
+
272
+ &:where(pre) {
273
+ background-color: var(
274
+ --color-muted,
275
+ color-mix(in oklab, currentColor 8%, transparent)
276
+ );
277
+ font-family: var(--typeset-font-mono);
278
+ font-size: 0.875em;
279
+ line-height: 1.5;
280
+ tab-size: 2;
281
+ direction: ltr;
282
+ border-radius: var(--radius, 0.5em);
283
+ padding: 0.75em 1em;
284
+ overflow-x: auto;
285
+ margin-block-start: calc(var(--typeset-flow) / 0.875);
286
+ margin-block-end: 0;
287
+ }
288
+ &:where(pre code) {
289
+ background-color: transparent;
290
+ font-family: inherit;
291
+ font-size: inherit;
292
+ padding: 0;
293
+ border-radius: 0;
294
+ }
295
+
296
+ &:where(blockquote) {
297
+ border-inline-start: 2px solid var(--typeset-rule);
298
+ padding-inline-start: 1em;
299
+ margin-block-start: var(--typeset-flow);
300
+ margin-block-end: 0;
301
+ margin-inline: 0;
302
+ }
303
+
304
+ &:where(hr) {
305
+ border: 0;
306
+ border-block-start: 1px solid var(--typeset-rule);
307
+ margin-block-start: calc(var(--typeset-flow) * 2.4);
308
+ margin-block-end: 0;
309
+ }
310
+ &:where(hr + h1, hr + h2, hr + h3, hr + h4) {
311
+ margin-block-start: var(--typeset-flow);
312
+ }
313
+
314
+ &:where(.footnotes, [data-footnotes]) {
315
+ margin-block-start: calc(var(--typeset-flow) * 2);
316
+ border-block-start: 1px solid var(--typeset-rule);
317
+ padding-block-start: var(--typeset-flow);
318
+ font-size: 0.875em;
319
+ color: var(--typeset-muted);
320
+ }
321
+
322
+ &:where(math[display="block"]) {
323
+ margin-block-start: var(--typeset-flow);
324
+ margin-block-end: 0;
325
+ overflow-x: auto;
326
+ overflow-y: hidden;
327
+ padding-block: 0.25em;
328
+ }
329
+
330
+ &:where(img, video) {
331
+ border-radius: var(--radius, 0.5em);
332
+ max-width: 100%;
333
+ height: auto;
334
+ margin-block-start: var(--typeset-flow);
335
+ margin-block-end: 0;
336
+ }
337
+ &:where(p img) {
338
+ margin-block-start: 0;
339
+ }
340
+ &:where(figure) {
341
+ margin-block-start: var(--typeset-flow);
342
+ margin-block-end: 0;
343
+ margin-inline: 0;
344
+ }
345
+ &:where(figcaption, caption) {
346
+ color: var(--typeset-muted);
347
+ font-size: 0.875em;
348
+ text-align: center;
349
+ margin-block-start: calc(0.75em / 0.875);
350
+ }
351
+ &:where(caption) {
352
+ caption-side: bottom;
353
+ }
354
+
355
+ &:where(table) {
356
+ max-width: 100%;
357
+ font-size: 1em;
358
+ line-height: 1.5;
359
+ font-variant-numeric: tabular-nums;
360
+ border-collapse: separate;
361
+ border-spacing: 0;
362
+ border-block-end: 1px solid var(--typeset-rule);
363
+ margin-block-start: var(--typeset-flow);
364
+ margin-block-end: 0;
365
+ }
366
+
367
+ &:where(.typeset-scroll) {
368
+ overflow-x: auto;
369
+ margin-block-start: var(--typeset-flow);
370
+ }
371
+ &:where(.typeset-scroll > *) {
372
+ margin-block-start: 0;
373
+ }
374
+ &:where(.typeset-scroll table) {
375
+ width: max-content;
376
+ max-width: none;
377
+ }
378
+ &:where(thead th) {
379
+ font-weight: 500;
380
+ text-align: start;
381
+ white-space: nowrap;
382
+ padding: 0.65em 1em;
383
+ }
384
+ &:where(:is(tbody, tfoot) :is(td, th)) {
385
+ padding: 0.75em 1em;
386
+ text-align: start;
387
+ vertical-align: top;
388
+ border-block-start: 1px solid var(--typeset-rule);
389
+ }
390
+ &:where(tbody th, tfoot th) {
391
+ font-weight: 500;
392
+ }
393
+ &:where(th:first-child, td:first-child) {
394
+ padding-inline-start: 0;
395
+ }
396
+ &:where(th[align="center"], td[align="center"]) {
397
+ text-align: center;
398
+ }
399
+ &:where(th[align="right"], td[align="right"]) {
400
+ text-align: end;
401
+ }
402
+
403
+ &:where(li > blockquote, li > table, li > figure) {
404
+ margin-block-start: 0.5em;
405
+ }
406
+ &:where(li > pre) {
407
+ margin-block-start: calc(0.5em / 0.875);
408
+ }
409
+
410
+ @media print {
411
+ &:where(pre, table, blockquote, figure) {
412
+ break-inside: avoid;
413
+ }
414
+ &:where(h1, h2, h3, h4) {
415
+ break-after: avoid;
416
+ }
417
+ }
418
+
419
+ @media (forced-colors: active) {
420
+ &:where(:not(pre) > code) {
421
+ border: 1px solid;
422
+ }
423
+ }
424
+ }
425
+
426
+ .typeset
427
+ > :where(:first-child):not(
428
+ :where(
429
+ .not-typeset,
430
+ [data-not-typeset],
431
+ .not-typeset *,
432
+ [data-not-typeset] *
433
+ )
434
+ ),
435
+ .typeset
436
+ > :where(:first-child)
437
+ > :where(:first-child):not(
438
+ :where(
439
+ .not-typeset,
440
+ [data-not-typeset],
441
+ .not-typeset *,
442
+ [data-not-typeset] *
443
+ )
444
+ ),
445
+ .typeset
446
+ :where(
447
+ li > :first-child,
448
+ blockquote > :first-child,
449
+ td > :first-child,
450
+ th > :first-child,
451
+ dd > :first-child,
452
+ figure > :first-child,
453
+ figure > picture > img
454
+ ):not(
455
+ :where(
456
+ .not-typeset,
457
+ [data-not-typeset],
458
+ .not-typeset *,
459
+ [data-not-typeset] *
460
+ )
461
+ ) {
462
+ margin-block-start: 0;
463
+ }
464
+ }