@schlenkr/quassel 0.5.6 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ChatInputToolbar.d.ts +6 -10
- package/ComposerPrimaryAction.d.ts +13 -0
- package/QuasselProvider.d.ts +1 -0
- package/README.md +44 -18
- package/RecordingAura.d.ts +4 -0
- package/chat.css +312 -212
- package/index.d.ts +1 -1
- package/index.js +430 -174
- package/index.js.map +4 -4
- package/options.d.ts +12 -4
- package/package.json +1 -1
- package/texts.d.ts +5 -0
package/chat.css
CHANGED
|
@@ -8,8 +8,6 @@
|
|
|
8
8
|
--qsl-spacing: 0.235rem;
|
|
9
9
|
--qsl-font-weight-medium: 500;
|
|
10
10
|
--qsl-font-weight-semibold: 600;
|
|
11
|
-
--qsl-leading-normal: 1.5;
|
|
12
|
-
--qsl-leading-relaxed: 1.625;
|
|
13
11
|
--qsl-animate-spin: qsl-spin 1s linear infinite;
|
|
14
12
|
--qsl-default-transition-duration: 150ms;
|
|
15
13
|
--qsl-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -23,12 +21,57 @@
|
|
|
23
21
|
container-type: inline-size;
|
|
24
22
|
container-name: chat;
|
|
25
23
|
}
|
|
24
|
+
.qsl\:recording-aura {
|
|
25
|
+
position: fixed;
|
|
26
|
+
visibility: hidden;
|
|
27
|
+
pointer-events: none;
|
|
28
|
+
border: 2px solid var(--qsl-pill-aura-ring-color);
|
|
29
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
30
|
+
border: 2px solid color-mix(in srgb, var(--qsl-pill-aura-ring-color) 55%, transparent);
|
|
31
|
+
}
|
|
32
|
+
border-radius: 50%;
|
|
33
|
+
background: radial-gradient(circle, transparent 42%, var(--qsl-pill-aura-color) 70%, transparent);
|
|
34
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
35
|
+
background: radial-gradient(circle, transparent 42%, color-mix(in srgb, var(--qsl-pill-aura-color) 30%, transparent) 70%, transparent);
|
|
36
|
+
}
|
|
37
|
+
box-shadow: 0 0 18px 5px var(--qsl-pill-aura-color);
|
|
38
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
39
|
+
box-shadow: 0 0 18px 5px color-mix(in srgb, var(--qsl-pill-aura-color) 25%, transparent);
|
|
40
|
+
}
|
|
41
|
+
transition: opacity 80ms linear, transform 80ms linear;
|
|
42
|
+
}
|
|
43
|
+
.qsl\:primary-icon {
|
|
44
|
+
position: absolute;
|
|
45
|
+
display: grid;
|
|
46
|
+
place-items: center;
|
|
47
|
+
opacity: 0;
|
|
48
|
+
transform: scale(0.6) rotate(-30deg);
|
|
49
|
+
transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
50
|
+
pointer-events: none;
|
|
51
|
+
&[data-active="true"] {
|
|
52
|
+
opacity: 1;
|
|
53
|
+
transform: scale(1) rotate(0);
|
|
54
|
+
}
|
|
55
|
+
& svg {
|
|
56
|
+
width: 22px;
|
|
57
|
+
height: 22px;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
26
60
|
.qsl\:pointer-events-auto {
|
|
27
61
|
pointer-events: auto;
|
|
28
62
|
}
|
|
29
63
|
.qsl\:pointer-events-none {
|
|
30
64
|
pointer-events: none;
|
|
31
65
|
}
|
|
66
|
+
.qsl\:recording-dot {
|
|
67
|
+
position: absolute;
|
|
68
|
+
right: 7px;
|
|
69
|
+
top: 7px;
|
|
70
|
+
width: 6px;
|
|
71
|
+
height: 6px;
|
|
72
|
+
border-radius: 50%;
|
|
73
|
+
background: currentColor;
|
|
74
|
+
}
|
|
32
75
|
.qsl\:sr-only {
|
|
33
76
|
position: absolute;
|
|
34
77
|
width: 1px;
|
|
@@ -40,6 +83,48 @@
|
|
|
40
83
|
white-space: nowrap;
|
|
41
84
|
border-width: 0;
|
|
42
85
|
}
|
|
86
|
+
.qsl\:primary-action {
|
|
87
|
+
position: relative;
|
|
88
|
+
display: grid;
|
|
89
|
+
flex: none;
|
|
90
|
+
place-items: center;
|
|
91
|
+
width: 48px;
|
|
92
|
+
height: 48px;
|
|
93
|
+
border-radius: 50%;
|
|
94
|
+
background: var(--qsl-pill-primary-background, var(--qsl-primary));
|
|
95
|
+
color: var(--qsl-pill-primary-foreground, var(--qsl-primary-foreground));
|
|
96
|
+
box-shadow: var(--qsl-pill-primary-shadow, 0 5px 20px -5px var(--qsl-primary));
|
|
97
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
98
|
+
box-shadow: var(--qsl-pill-primary-shadow, 0 5px 20px -5px color-mix(in srgb, var(--qsl-primary) 50%, transparent));
|
|
99
|
+
}
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
touch-action: none;
|
|
102
|
+
user-select: none;
|
|
103
|
+
-webkit-touch-callout: none;
|
|
104
|
+
transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
|
|
105
|
+
&:hover:not(:disabled) {
|
|
106
|
+
filter: brightness(1.08);
|
|
107
|
+
}
|
|
108
|
+
&:active:not(:disabled) {
|
|
109
|
+
transform: scale(0.94);
|
|
110
|
+
}
|
|
111
|
+
&:focus-visible {
|
|
112
|
+
outline: 3px solid var(--qsl-primary);
|
|
113
|
+
outline-offset: 3px;
|
|
114
|
+
}
|
|
115
|
+
&:disabled {
|
|
116
|
+
opacity: 0.45;
|
|
117
|
+
cursor: default;
|
|
118
|
+
}
|
|
119
|
+
&[data-primary-action="recording"] {
|
|
120
|
+
background: var(--qsl-pill-recording-background, var(--qsl-destructive));
|
|
121
|
+
color: var(--qsl-pill-recording-foreground, var(--qsl-background));
|
|
122
|
+
box-shadow: 0 0 0 4px var(--qsl-pill-aura-color, var(--qsl-destructive));
|
|
123
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
124
|
+
box-shadow: 0 0 0 4px color-mix(in srgb, var(--qsl-pill-aura-color, var(--qsl-destructive)) 22%, transparent);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
43
128
|
.qsl\:absolute {
|
|
44
129
|
position: absolute;
|
|
45
130
|
}
|
|
@@ -97,15 +182,6 @@
|
|
|
97
182
|
.qsl\:mx-auto {
|
|
98
183
|
margin-inline: auto;
|
|
99
184
|
}
|
|
100
|
-
.qsl\:my-1 {
|
|
101
|
-
margin-block: var(--qsl-spacing);
|
|
102
|
-
}
|
|
103
|
-
.qsl\:my-2 {
|
|
104
|
-
margin-block: calc(var(--qsl-spacing) * 2);
|
|
105
|
-
}
|
|
106
|
-
.qsl\:my-3 {
|
|
107
|
-
margin-block: calc(var(--qsl-spacing) * 3);
|
|
108
|
-
}
|
|
109
185
|
.qsl\:mt-0 {
|
|
110
186
|
margin-top: 0px;
|
|
111
187
|
}
|
|
@@ -121,9 +197,6 @@
|
|
|
121
197
|
.qsl\:mt-2\.5 {
|
|
122
198
|
margin-top: calc(var(--qsl-spacing) * 2.5);
|
|
123
199
|
}
|
|
124
|
-
.qsl\:mt-3 {
|
|
125
|
-
margin-top: calc(var(--qsl-spacing) * 3);
|
|
126
|
-
}
|
|
127
200
|
.qsl\:mt-4 {
|
|
128
201
|
margin-top: calc(var(--qsl-spacing) * 4);
|
|
129
202
|
}
|
|
@@ -136,9 +209,6 @@
|
|
|
136
209
|
.qsl\:mb-0\.5 {
|
|
137
210
|
margin-bottom: calc(var(--qsl-spacing) * 0.5);
|
|
138
211
|
}
|
|
139
|
-
.qsl\:mb-1 {
|
|
140
|
-
margin-bottom: var(--qsl-spacing);
|
|
141
|
-
}
|
|
142
212
|
.qsl\:mb-1\.5 {
|
|
143
213
|
margin-bottom: calc(var(--qsl-spacing) * 1.5);
|
|
144
214
|
}
|
|
@@ -148,6 +218,45 @@
|
|
|
148
218
|
.qsl\:ml-1\.5 {
|
|
149
219
|
margin-left: calc(var(--qsl-spacing) * 1.5);
|
|
150
220
|
}
|
|
221
|
+
.qsl\:pill-slot {
|
|
222
|
+
display: flex;
|
|
223
|
+
flex: none;
|
|
224
|
+
align-items: center;
|
|
225
|
+
align-self: flex-end;
|
|
226
|
+
gap: 2px;
|
|
227
|
+
min-height: 48px;
|
|
228
|
+
& > button {
|
|
229
|
+
min-width: 36px;
|
|
230
|
+
min-height: 36px;
|
|
231
|
+
border-radius: 999px;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
.qsl\:pill-replacement {
|
|
235
|
+
display: flex;
|
|
236
|
+
flex: 1;
|
|
237
|
+
align-items: center;
|
|
238
|
+
align-self: center;
|
|
239
|
+
min-width: 0;
|
|
240
|
+
min-height: 48px;
|
|
241
|
+
padding-inline: 8px;
|
|
242
|
+
font-size: var(--qsl-base);
|
|
243
|
+
}
|
|
244
|
+
.qsl\:pill-row {
|
|
245
|
+
display: flex;
|
|
246
|
+
align-items: flex-end;
|
|
247
|
+
gap: 4px;
|
|
248
|
+
min-height: 64px;
|
|
249
|
+
min-width: 0;
|
|
250
|
+
padding: 7px;
|
|
251
|
+
border: 1px solid var(--qsl-pill-border, var(--qsl-border));
|
|
252
|
+
border-radius: 32px;
|
|
253
|
+
background: var(--qsl-pill-background, var(--qsl-background));
|
|
254
|
+
box-shadow: var(--qsl-pill-shadow, var(--qsl-bar-shadow));
|
|
255
|
+
transition: border-color 180ms ease, box-shadow 180ms ease;
|
|
256
|
+
&:focus-within {
|
|
257
|
+
border-color: var(--qsl-primary);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
151
260
|
.qsl\:block {
|
|
152
261
|
display: block;
|
|
153
262
|
}
|
|
@@ -187,6 +296,10 @@
|
|
|
187
296
|
width: calc(var(--qsl-spacing) * 9);
|
|
188
297
|
height: calc(var(--qsl-spacing) * 9);
|
|
189
298
|
}
|
|
299
|
+
.qsl\:size-24 {
|
|
300
|
+
width: calc(var(--qsl-spacing) * 24);
|
|
301
|
+
height: calc(var(--qsl-spacing) * 24);
|
|
302
|
+
}
|
|
190
303
|
.qsl\:h-5 {
|
|
191
304
|
height: calc(var(--qsl-spacing) * 5);
|
|
192
305
|
}
|
|
@@ -226,6 +339,20 @@
|
|
|
226
339
|
.qsl\:max-h-\[min\(70dvh\,620px\,var\(--available-height\)\)\] {
|
|
227
340
|
max-height: min(70dvh, 620px, var(--available-height));
|
|
228
341
|
}
|
|
342
|
+
.qsl\:pill-input {
|
|
343
|
+
flex: 1;
|
|
344
|
+
align-self: center;
|
|
345
|
+
min-width: 0;
|
|
346
|
+
min-height: 48px;
|
|
347
|
+
padding: 12px 8px;
|
|
348
|
+
border-radius: 24px;
|
|
349
|
+
font-size: var(--qsl-base);
|
|
350
|
+
line-height: 1.5;
|
|
351
|
+
&:focus-visible {
|
|
352
|
+
outline: 2px solid var(--qsl-primary);
|
|
353
|
+
outline-offset: -2px;
|
|
354
|
+
}
|
|
355
|
+
}
|
|
229
356
|
.qsl\:min-h-0 {
|
|
230
357
|
min-height: 0px;
|
|
231
358
|
}
|
|
@@ -247,9 +374,6 @@
|
|
|
247
374
|
.qsl\:w-\[190px\] {
|
|
248
375
|
width: 190px;
|
|
249
376
|
}
|
|
250
|
-
.qsl\:w-\[320px\] {
|
|
251
|
-
width: 320px;
|
|
252
|
-
}
|
|
253
377
|
.qsl\:w-\[calc\(100\%_-_2_\*_var\(--qsl-chat-horizontal-padding\,24px\)\)\] {
|
|
254
378
|
width: calc(100% - 2 * var(--qsl-chat-horizontal-padding,24px));
|
|
255
379
|
}
|
|
@@ -265,9 +389,6 @@
|
|
|
265
389
|
.qsl\:w-max {
|
|
266
390
|
width: max-content;
|
|
267
391
|
}
|
|
268
|
-
.qsl\:max-w-\[44ch\] {
|
|
269
|
-
max-width: 44ch;
|
|
270
|
-
}
|
|
271
392
|
.qsl\:max-w-\[86\%\] {
|
|
272
393
|
max-width: 86%;
|
|
273
394
|
}
|
|
@@ -354,12 +475,6 @@
|
|
|
354
475
|
.qsl\:\[scrollbar-width\:thin\] {
|
|
355
476
|
scrollbar-width: thin;
|
|
356
477
|
}
|
|
357
|
-
.qsl\:list-decimal {
|
|
358
|
-
list-style-type: decimal;
|
|
359
|
-
}
|
|
360
|
-
.qsl\:list-disc {
|
|
361
|
-
list-style-type: disc;
|
|
362
|
-
}
|
|
363
478
|
.qsl\:flex-col {
|
|
364
479
|
flex-direction: column;
|
|
365
480
|
}
|
|
@@ -426,11 +541,6 @@
|
|
|
426
541
|
.qsl\:gap-\[var\(--qsl-tool-group-gap\,1px\)\] {
|
|
427
542
|
gap: var(--qsl-tool-group-gap,1px);
|
|
428
543
|
}
|
|
429
|
-
:where(.qsl\:space-y-0 > :not(:last-child)) {
|
|
430
|
-
--tw-space-y-reverse: 0;
|
|
431
|
-
margin-block-start: 0;
|
|
432
|
-
margin-block-end: 0;
|
|
433
|
-
}
|
|
434
544
|
.qsl\:gap-x-1\.5 {
|
|
435
545
|
column-gap: calc(var(--qsl-spacing) * 1.5);
|
|
436
546
|
}
|
|
@@ -488,9 +598,6 @@
|
|
|
488
598
|
.qsl\:rounded-panel {
|
|
489
599
|
border-radius: var(--qsl-radius-panel);
|
|
490
600
|
}
|
|
491
|
-
.qsl\:rounded-sm {
|
|
492
|
-
border-radius: var(--qsl-radius-sm, calc(var(--qsl-radius) * 0.6));
|
|
493
|
-
}
|
|
494
601
|
.qsl\:border {
|
|
495
602
|
border-style: var(--tw-border-style);
|
|
496
603
|
border-width: 1px;
|
|
@@ -599,6 +706,9 @@
|
|
|
599
706
|
.qsl\:object-contain {
|
|
600
707
|
object-fit: contain;
|
|
601
708
|
}
|
|
709
|
+
.qsl\:object-cover {
|
|
710
|
+
object-fit: cover;
|
|
711
|
+
}
|
|
602
712
|
.qsl\:p-0 {
|
|
603
713
|
padding: 0px;
|
|
604
714
|
}
|
|
@@ -617,9 +727,6 @@
|
|
|
617
727
|
.qsl\:p-4 {
|
|
618
728
|
padding: calc(var(--qsl-spacing) * 4);
|
|
619
729
|
}
|
|
620
|
-
.qsl\:px-1 {
|
|
621
|
-
padding-inline: var(--qsl-spacing);
|
|
622
|
-
}
|
|
623
730
|
.qsl\:px-2 {
|
|
624
731
|
padding-inline: calc(var(--qsl-spacing) * 2);
|
|
625
732
|
}
|
|
@@ -650,9 +757,6 @@
|
|
|
650
757
|
.qsl\:py-0\.5 {
|
|
651
758
|
padding-block: calc(var(--qsl-spacing) * 0.5);
|
|
652
759
|
}
|
|
653
|
-
.qsl\:py-1 {
|
|
654
|
-
padding-block: var(--qsl-spacing);
|
|
655
|
-
}
|
|
656
760
|
.qsl\:py-1\.5 {
|
|
657
761
|
padding-block: calc(var(--qsl-spacing) * 1.5);
|
|
658
762
|
}
|
|
@@ -716,79 +820,19 @@
|
|
|
716
820
|
.qsl\:text-left {
|
|
717
821
|
text-align: left;
|
|
718
822
|
}
|
|
719
|
-
.qsl\:align-top {
|
|
720
|
-
vertical-align: top;
|
|
721
|
-
}
|
|
722
823
|
.qsl\:font-mono {
|
|
723
824
|
font-family: var(--qsl-mono);
|
|
724
825
|
}
|
|
725
|
-
.qsl\:text-
|
|
726
|
-
font-size: var(--qsl-
|
|
727
|
-
line-height:
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
line-height: var(--tw-leading, var(--qsl-text-sm--line-height, 1.45));
|
|
732
|
-
}
|
|
733
|
-
.qsl\:text-xs {
|
|
734
|
-
font-size: var(--qsl-text-xs, calc(var(--qsl-base) * 0.8));
|
|
735
|
-
line-height: var(--tw-leading, var(--qsl-text-xs--line-height, 1.45));
|
|
736
|
-
}
|
|
737
|
-
.qsl\:text-\[length\:1\.1em\] {
|
|
738
|
-
font-size: 1.1em;
|
|
739
|
-
}
|
|
740
|
-
.qsl\:text-\[length\:1\.2em\] {
|
|
741
|
-
font-size: 1.2em;
|
|
742
|
-
}
|
|
743
|
-
.qsl\:text-\[length\:1em\] {
|
|
744
|
-
font-size: 1em;
|
|
745
|
-
}
|
|
746
|
-
.qsl\:text-chat {
|
|
747
|
-
font-size: var(--qsl-chat-font-size, var(--qsl-base));
|
|
748
|
-
}
|
|
749
|
-
.qsl\:text-label {
|
|
750
|
-
font-size: var(--qsl-text-label, calc(var(--qsl-base) * 0.85));
|
|
751
|
-
}
|
|
752
|
-
.qsl\:text-meta {
|
|
753
|
-
font-size: var(--qsl-text-meta, calc(var(--qsl-base) * 0.8));
|
|
754
|
-
}
|
|
755
|
-
.qsl\:text-timestamp {
|
|
756
|
-
font-size: var(--qsl-timestamp-font-size, var(--qsl-text-trace, calc(var(--qsl-base) * var(--qsl-tool-font-scale, 0.88))));
|
|
757
|
-
}
|
|
758
|
-
.qsl\:text-trace {
|
|
759
|
-
font-size: var(--qsl-text-trace, calc(var(--qsl-base) * var(--qsl-tool-font-scale, 0.88)));
|
|
760
|
-
}
|
|
761
|
-
.qsl\:leading-\[1\.3\] {
|
|
762
|
-
--tw-leading: 1.3;
|
|
763
|
-
line-height: 1.3;
|
|
764
|
-
}
|
|
765
|
-
.qsl\:leading-\[1\.6\] {
|
|
766
|
-
--tw-leading: 1.6;
|
|
767
|
-
line-height: 1.6;
|
|
768
|
-
}
|
|
769
|
-
.qsl\:leading-\[1\.45\] {
|
|
770
|
-
--tw-leading: 1.45;
|
|
771
|
-
line-height: 1.45;
|
|
772
|
-
}
|
|
773
|
-
.qsl\:leading-\[1\.375\] {
|
|
774
|
-
--tw-leading: 1.375;
|
|
775
|
-
line-height: 1.375;
|
|
776
|
-
}
|
|
777
|
-
.qsl\:leading-\[1\.625\] {
|
|
778
|
-
--tw-leading: 1.625;
|
|
779
|
-
line-height: 1.625;
|
|
780
|
-
}
|
|
781
|
-
.qsl\:leading-\[var\(--qsl-chat-line-height\,1\.65\)\] {
|
|
782
|
-
--tw-leading: var(--qsl-chat-line-height,1.65);
|
|
783
|
-
line-height: var(--qsl-chat-line-height,1.65);
|
|
784
|
-
}
|
|
785
|
-
.qsl\:leading-normal {
|
|
786
|
-
--tw-leading: var(--qsl-leading-normal);
|
|
787
|
-
line-height: var(--qsl-leading-normal);
|
|
826
|
+
.qsl\:text-body {
|
|
827
|
+
font-size: var(--qsl-base);
|
|
828
|
+
line-height: 1.5;
|
|
829
|
+
&:where([data-quassel]:not([data-quassel] *)) {
|
|
830
|
+
font-size: var(--qsl-font-size, 13px);
|
|
831
|
+
}
|
|
788
832
|
}
|
|
789
|
-
.qsl\:
|
|
790
|
-
|
|
791
|
-
line-height:
|
|
833
|
+
.qsl\:text-small {
|
|
834
|
+
font-size: calc(var(--qsl-base) * 0.85);
|
|
835
|
+
line-height: 1.4;
|
|
792
836
|
}
|
|
793
837
|
.qsl\:font-medium {
|
|
794
838
|
--tw-font-weight: var(--qsl-font-weight-medium);
|
|
@@ -815,9 +859,6 @@
|
|
|
815
859
|
.qsl\:text-ellipsis {
|
|
816
860
|
text-overflow: ellipsis;
|
|
817
861
|
}
|
|
818
|
-
.qsl\:whitespace-normal {
|
|
819
|
-
white-space: normal;
|
|
820
|
-
}
|
|
821
862
|
.qsl\:whitespace-nowrap {
|
|
822
863
|
white-space: nowrap;
|
|
823
864
|
}
|
|
@@ -873,9 +914,6 @@
|
|
|
873
914
|
.qsl\:underline {
|
|
874
915
|
text-decoration-line: underline;
|
|
875
916
|
}
|
|
876
|
-
.qsl\:\[text-underline-offset\:2px\] {
|
|
877
|
-
text-underline-offset: 2px;
|
|
878
|
-
}
|
|
879
917
|
.qsl\:underline-offset-4 {
|
|
880
918
|
text-underline-offset: 4px;
|
|
881
919
|
}
|
|
@@ -1015,18 +1053,6 @@
|
|
|
1015
1053
|
opacity: 100%;
|
|
1016
1054
|
}
|
|
1017
1055
|
}
|
|
1018
|
-
.qsl\:marker\:text-muted-foreground ::marker {
|
|
1019
|
-
color: var(--qsl-muted-foreground);
|
|
1020
|
-
}
|
|
1021
|
-
.qsl\:marker\:text-muted-foreground::marker {
|
|
1022
|
-
color: var(--qsl-muted-foreground);
|
|
1023
|
-
}
|
|
1024
|
-
.qsl\:marker\:text-muted-foreground ::-webkit-details-marker {
|
|
1025
|
-
color: var(--qsl-muted-foreground);
|
|
1026
|
-
}
|
|
1027
|
-
.qsl\:marker\:text-muted-foreground::-webkit-details-marker {
|
|
1028
|
-
color: var(--qsl-muted-foreground);
|
|
1029
|
-
}
|
|
1030
1056
|
.qsl\:placeholder\:text-muted-foreground::placeholder {
|
|
1031
1057
|
color: var(--qsl-muted-foreground);
|
|
1032
1058
|
}
|
|
@@ -1189,54 +1215,6 @@
|
|
|
1189
1215
|
:where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:p-0 {
|
|
1190
1216
|
padding: 0px;
|
|
1191
1217
|
}
|
|
1192
|
-
:where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:border-white\/35 {
|
|
1193
|
-
border-color: var(--qsl-color-white);
|
|
1194
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1195
|
-
border-color: color-mix(in oklab, var(--qsl-color-white) 35%, transparent);
|
|
1196
|
-
}
|
|
1197
|
-
}
|
|
1198
|
-
:where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:border-white\/50 {
|
|
1199
|
-
border-color: var(--qsl-color-white);
|
|
1200
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1201
|
-
border-color: color-mix(in oklab, var(--qsl-color-white) 50%, transparent);
|
|
1202
|
-
}
|
|
1203
|
-
}
|
|
1204
|
-
:where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:bg-black\/30 {
|
|
1205
|
-
background-color: var(--qsl-color-black);
|
|
1206
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1207
|
-
background-color: color-mix(in oklab, var(--qsl-color-black) 30%, transparent);
|
|
1208
|
-
}
|
|
1209
|
-
}
|
|
1210
|
-
:where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:bg-white\/15 {
|
|
1211
|
-
background-color: var(--qsl-color-white);
|
|
1212
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1213
|
-
background-color: color-mix(in oklab, var(--qsl-color-white) 15%, transparent);
|
|
1214
|
-
}
|
|
1215
|
-
}
|
|
1216
|
-
:where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:bg-white\/20 {
|
|
1217
|
-
background-color: var(--qsl-color-white);
|
|
1218
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1219
|
-
background-color: color-mix(in oklab, var(--qsl-color-white) 20%, transparent);
|
|
1220
|
-
}
|
|
1221
|
-
}
|
|
1222
|
-
:where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:text-inherit {
|
|
1223
|
-
color: inherit;
|
|
1224
|
-
}
|
|
1225
|
-
:where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:underline {
|
|
1226
|
-
text-decoration-line: underline;
|
|
1227
|
-
}
|
|
1228
|
-
:where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:marker\:text-inherit ::marker {
|
|
1229
|
-
color: inherit;
|
|
1230
|
-
}
|
|
1231
|
-
:where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:marker\:text-inherit::marker {
|
|
1232
|
-
color: inherit;
|
|
1233
|
-
}
|
|
1234
|
-
:where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:marker\:text-inherit ::-webkit-details-marker {
|
|
1235
|
-
color: inherit;
|
|
1236
|
-
}
|
|
1237
|
-
:where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:marker\:text-inherit::-webkit-details-marker {
|
|
1238
|
-
color: inherit;
|
|
1239
|
-
}
|
|
1240
1218
|
:where([data-tone="overseer-details"]) .qsl\:in-data-\[tone\=overseer-details\]\:max-h-40 {
|
|
1241
1219
|
max-height: calc(var(--qsl-spacing) * 40);
|
|
1242
1220
|
}
|
|
@@ -1360,6 +1338,11 @@
|
|
|
1360
1338
|
.qsl\:data-\[working\=true\]\:border-primary[data-working="true"] {
|
|
1361
1339
|
border-color: var(--qsl-primary);
|
|
1362
1340
|
}
|
|
1341
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
1342
|
+
.qsl\:motion-safe\:animate-spin {
|
|
1343
|
+
animation: var(--qsl-animate-spin);
|
|
1344
|
+
}
|
|
1345
|
+
}
|
|
1363
1346
|
@media (prefers-reduced-motion: reduce) {
|
|
1364
1347
|
.qsl\:motion-reduce\:animate-none {
|
|
1365
1348
|
animation: none;
|
|
@@ -1608,9 +1591,6 @@
|
|
|
1608
1591
|
:where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:\[\&\>\*\:first-child\]\:mt-0 > :first-child {
|
|
1609
1592
|
margin-top: 0px;
|
|
1610
1593
|
}
|
|
1611
|
-
.qsl\:\[\&\>\*\:last-child\]\:mb-0 > :last-child {
|
|
1612
|
-
margin-bottom: 0px;
|
|
1613
|
-
}
|
|
1614
1594
|
@media (hover:none) {
|
|
1615
1595
|
.qsl\:\[\@media\(hover\:none\)\]\:pointer-events-auto {
|
|
1616
1596
|
pointer-events: auto;
|
|
@@ -1622,21 +1602,6 @@
|
|
|
1622
1602
|
opacity: 100%;
|
|
1623
1603
|
}
|
|
1624
1604
|
}
|
|
1625
|
-
li + .qsl\:\[li\+\&\]\:mt-1 {
|
|
1626
|
-
margin-top: var(--qsl-spacing);
|
|
1627
|
-
}
|
|
1628
|
-
li > .qsl\:\[li\>\&\]\:my-0 {
|
|
1629
|
-
margin-block: 0px;
|
|
1630
|
-
}
|
|
1631
|
-
p + .qsl\:\[p\+\&\]\:mt-3 {
|
|
1632
|
-
margin-top: calc(var(--qsl-spacing) * 3);
|
|
1633
|
-
}
|
|
1634
|
-
pre > .qsl\:\[pre\>\&\]\:bg-transparent {
|
|
1635
|
-
background-color: transparent;
|
|
1636
|
-
}
|
|
1637
|
-
pre > .qsl\:\[pre\>\&\]\:p-0 {
|
|
1638
|
-
padding: 0px;
|
|
1639
|
-
}
|
|
1640
1605
|
}
|
|
1641
1606
|
@property --tw-animation-delay {
|
|
1642
1607
|
syntax: "*";
|
|
@@ -1727,6 +1692,149 @@
|
|
|
1727
1692
|
inherits: true;
|
|
1728
1693
|
initial-value: 13px;
|
|
1729
1694
|
}
|
|
1695
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1696
|
+
[data-layout="pill"] *, [data-recording-aura] {
|
|
1697
|
+
transition: none !important;
|
|
1698
|
+
animation: none !important;
|
|
1699
|
+
}
|
|
1700
|
+
[data-recording-aura] {
|
|
1701
|
+
transform: scale(1.3) !important;
|
|
1702
|
+
opacity: 0.6 !important;
|
|
1703
|
+
}
|
|
1704
|
+
}
|
|
1705
|
+
@layer components {
|
|
1706
|
+
[data-quassel-markdown] {
|
|
1707
|
+
overflow-wrap: anywhere;
|
|
1708
|
+
white-space: normal;
|
|
1709
|
+
}
|
|
1710
|
+
[data-quassel-markdown] :where(strong, b) {
|
|
1711
|
+
font-weight: 700;
|
|
1712
|
+
}
|
|
1713
|
+
[data-quassel-markdown] em {
|
|
1714
|
+
font-style: italic;
|
|
1715
|
+
}
|
|
1716
|
+
[data-quassel-markdown] :where(h1, h2, h3, h4, h5, h6) {
|
|
1717
|
+
font-weight: 700;
|
|
1718
|
+
color: inherit;
|
|
1719
|
+
}
|
|
1720
|
+
[data-quassel-markdown] h1 {
|
|
1721
|
+
margin: 1.5em 0 0.5em;
|
|
1722
|
+
font-size: calc(var(--qsl-base) * 1.3);
|
|
1723
|
+
line-height: 1.25;
|
|
1724
|
+
}
|
|
1725
|
+
[data-quassel-markdown] h2 {
|
|
1726
|
+
margin: 1.5em 0 0.45em;
|
|
1727
|
+
font-size: calc(var(--qsl-base) * 1.15);
|
|
1728
|
+
line-height: 1.3;
|
|
1729
|
+
}
|
|
1730
|
+
[data-quassel-markdown] h3 {
|
|
1731
|
+
margin: 1.35em 0 0.4em;
|
|
1732
|
+
font-size: calc(var(--qsl-base) * 1.05);
|
|
1733
|
+
line-height: 1.35;
|
|
1734
|
+
}
|
|
1735
|
+
[data-quassel-markdown] :where(h4, h5, h6) {
|
|
1736
|
+
margin: 1.2em 0 0.3em;
|
|
1737
|
+
font-size: var(--qsl-base);
|
|
1738
|
+
line-height: 1.4;
|
|
1739
|
+
color: var(--qsl-muted-foreground);
|
|
1740
|
+
}
|
|
1741
|
+
[data-quassel-markdown] :where(p, ul, ol, blockquote, [data-quassel-table]) {
|
|
1742
|
+
margin-block: 0.75em;
|
|
1743
|
+
}
|
|
1744
|
+
[data-quassel-markdown] :where(ul, ol) {
|
|
1745
|
+
padding-left: 1.5em;
|
|
1746
|
+
}
|
|
1747
|
+
[data-quassel-markdown] ul {
|
|
1748
|
+
list-style: disc;
|
|
1749
|
+
}
|
|
1750
|
+
[data-quassel-markdown] ol {
|
|
1751
|
+
list-style: decimal;
|
|
1752
|
+
}
|
|
1753
|
+
[data-quassel-markdown] li {
|
|
1754
|
+
margin-block: 0.3em;
|
|
1755
|
+
}
|
|
1756
|
+
[data-quassel-markdown] li :where(ul, ol) {
|
|
1757
|
+
margin-block: 0.25em 0;
|
|
1758
|
+
}
|
|
1759
|
+
[data-quassel-markdown] li > p {
|
|
1760
|
+
margin: 0;
|
|
1761
|
+
}
|
|
1762
|
+
[data-quassel-markdown] code {
|
|
1763
|
+
padding: 0.12em 0.4em;
|
|
1764
|
+
border-radius: 0.38em;
|
|
1765
|
+
background: var(--qsl-inline-code-background, var(--qsl-secondary));
|
|
1766
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1767
|
+
background: var(--qsl-inline-code-background, color-mix(in srgb, var(--qsl-secondary) 70%, transparent));
|
|
1768
|
+
}
|
|
1769
|
+
box-shadow: inset 0 0 0 1px var(--qsl-inline-code-edge, transparent);
|
|
1770
|
+
color: var(--qsl-inline-code-foreground, inherit);
|
|
1771
|
+
font-size: 0.9em;
|
|
1772
|
+
}
|
|
1773
|
+
[data-quassel-markdown] pre {
|
|
1774
|
+
margin-block: 0.9em;
|
|
1775
|
+
padding: 0.85em 1.05em;
|
|
1776
|
+
border: 1px solid var(--qsl-code-border, var(--qsl-border));
|
|
1777
|
+
border-radius: 0.7em;
|
|
1778
|
+
background: var(--qsl-code-background, var(--qsl-secondary));
|
|
1779
|
+
font-size: 0.9em;
|
|
1780
|
+
}
|
|
1781
|
+
[data-quassel-markdown] pre code {
|
|
1782
|
+
padding: 0;
|
|
1783
|
+
border-radius: 0;
|
|
1784
|
+
background: transparent;
|
|
1785
|
+
box-shadow: none;
|
|
1786
|
+
color: inherit;
|
|
1787
|
+
font-size: inherit;
|
|
1788
|
+
}
|
|
1789
|
+
[data-quassel-markdown] a {
|
|
1790
|
+
color: var(--qsl-primary);
|
|
1791
|
+
text-decoration: underline;
|
|
1792
|
+
text-decoration-thickness: 1px;
|
|
1793
|
+
text-underline-offset: 3px;
|
|
1794
|
+
}
|
|
1795
|
+
[data-quassel-markdown] a:hover {
|
|
1796
|
+
text-decoration-thickness: 2px;
|
|
1797
|
+
}
|
|
1798
|
+
[data-quassel-markdown] blockquote {
|
|
1799
|
+
padding: 0.25em 1em;
|
|
1800
|
+
border-left: 3px solid var(--qsl-primary);
|
|
1801
|
+
background: var(--qsl-blockquote-background, var(--qsl-primary));
|
|
1802
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1803
|
+
background: var(--qsl-blockquote-background, color-mix(in srgb, var(--qsl-primary) 6%, transparent));
|
|
1804
|
+
}
|
|
1805
|
+
color: var(--qsl-muted-foreground);
|
|
1806
|
+
}
|
|
1807
|
+
[data-quassel-markdown] :where(th, td) {
|
|
1808
|
+
max-width: 44ch;
|
|
1809
|
+
padding: 0.5em 0.85em;
|
|
1810
|
+
border: 1px solid var(--qsl-border);
|
|
1811
|
+
text-align: left;
|
|
1812
|
+
vertical-align: top;
|
|
1813
|
+
}
|
|
1814
|
+
[data-quassel-markdown] th {
|
|
1815
|
+
background: var(--qsl-secondary);
|
|
1816
|
+
font-weight: 700;
|
|
1817
|
+
}
|
|
1818
|
+
[data-quassel-markdown] tbody tr:nth-child(even) {
|
|
1819
|
+
background: var(--qsl-secondary);
|
|
1820
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1821
|
+
background: color-mix(in srgb, var(--qsl-secondary) 35%, transparent);
|
|
1822
|
+
}
|
|
1823
|
+
}
|
|
1824
|
+
[data-quassel-markdown] hr {
|
|
1825
|
+
margin-block: 1.6em;
|
|
1826
|
+
border-color: var(--qsl-border);
|
|
1827
|
+
}
|
|
1828
|
+
[data-quassel-markdown] > div > :first-child {
|
|
1829
|
+
margin-top: 0;
|
|
1830
|
+
}
|
|
1831
|
+
[data-quassel-markdown] > div > :last-child {
|
|
1832
|
+
margin-bottom: 0;
|
|
1833
|
+
}
|
|
1834
|
+
:where([data-tone="on-color"]) [data-quassel-markdown] :where(a, blockquote, h4, h5, h6) {
|
|
1835
|
+
color: inherit;
|
|
1836
|
+
}
|
|
1837
|
+
}
|
|
1730
1838
|
@layer theme {
|
|
1731
1839
|
:where(:root, :host, [data-theme="light"], [data-theme="system"]) {
|
|
1732
1840
|
--qsl-color-scheme: light;
|
|
@@ -1838,14 +1946,17 @@
|
|
|
1838
1946
|
font-family: var(--qsl-mono);
|
|
1839
1947
|
font-feature-settings: normal;
|
|
1840
1948
|
font-variation-settings: normal;
|
|
1841
|
-
font-size:
|
|
1949
|
+
font-size: 0.9em;
|
|
1950
|
+
line-height: inherit;
|
|
1842
1951
|
}
|
|
1843
|
-
:where([data-quassel], [data-quassel] *):where(
|
|
1844
|
-
font-size:
|
|
1952
|
+
:where([data-quassel], [data-quassel] *):where(pre, pre code) {
|
|
1953
|
+
font-size: inherit;
|
|
1954
|
+
}
|
|
1955
|
+
:where([data-quassel], [data-quassel] *):where(small, sub, sup) {
|
|
1956
|
+
font-size: calc(var(--qsl-base) * 0.85);
|
|
1957
|
+
line-height: 1.4;
|
|
1845
1958
|
}
|
|
1846
1959
|
:where([data-quassel], [data-quassel] *):where(sub, sup) {
|
|
1847
|
-
font-size: 75%;
|
|
1848
|
-
line-height: 0;
|
|
1849
1960
|
position: relative;
|
|
1850
1961
|
vertical-align: baseline;
|
|
1851
1962
|
}
|
|
@@ -1938,20 +2049,11 @@
|
|
|
1938
2049
|
inherits: false;
|
|
1939
2050
|
initial-value: 0;
|
|
1940
2051
|
}
|
|
1941
|
-
@property --tw-space-y-reverse {
|
|
1942
|
-
syntax: "*";
|
|
1943
|
-
inherits: false;
|
|
1944
|
-
initial-value: 0;
|
|
1945
|
-
}
|
|
1946
2052
|
@property --tw-border-style {
|
|
1947
2053
|
syntax: "*";
|
|
1948
2054
|
inherits: false;
|
|
1949
2055
|
initial-value: solid;
|
|
1950
2056
|
}
|
|
1951
|
-
@property --tw-leading {
|
|
1952
|
-
syntax: "*";
|
|
1953
|
-
inherits: false;
|
|
1954
|
-
}
|
|
1955
2057
|
@property --tw-font-weight {
|
|
1956
2058
|
syntax: "*";
|
|
1957
2059
|
inherits: false;
|
|
@@ -2097,9 +2199,7 @@
|
|
|
2097
2199
|
--tw-translate-x: 0;
|
|
2098
2200
|
--tw-translate-y: 0;
|
|
2099
2201
|
--tw-translate-z: 0;
|
|
2100
|
-
--tw-space-y-reverse: 0;
|
|
2101
2202
|
--tw-border-style: solid;
|
|
2102
|
-
--tw-leading: initial;
|
|
2103
2203
|
--tw-font-weight: initial;
|
|
2104
2204
|
--tw-tracking: initial;
|
|
2105
2205
|
--tw-ordinal: initial;
|