Allows you to use Mastodon and Bluesky comments on your Lustre blog
hexdocs.pm/chilp/
blog
gleam
lustre
indieweb
mastodon
bluesky
comments
Let the people style!
Signed-off-by: MLC Bloeiman <mar@strawmelonjuice.com>
+2158
-98
+1
.gitignore
+1
.gitignore
changelog.md
docs/changelog.md
changelog.md
docs/changelog.md
+1859
docs/basic.css
+1859
docs/basic.css
···
1
+
.comment-widget {
2
+
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
3
+
@layer properties;
4
+
@layer theme, base, components, utilities;
5
+
@layer theme {
6
+
*,
7
+
* {
8
+
--font-sans:
9
+
ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
10
+
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
11
+
--font-mono:
12
+
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
13
+
"Liberation Mono", "Courier New", monospace;
14
+
--color-black: #000;
15
+
--color-white: #fff;
16
+
--spacing: 0.25rem;
17
+
--text-xs: 0.75rem;
18
+
--text-xs--line-height: calc(1 / 0.75);
19
+
--text-sm: 0.875rem;
20
+
--text-sm--line-height: calc(1.25 / 0.875);
21
+
--text-2xl: 1.5rem;
22
+
--text-2xl--line-height: calc(2 / 1.5);
23
+
--font-weight-semibold: 600;
24
+
--font-weight-extrabold: 800;
25
+
--radius-lg: 0.5rem;
26
+
--default-font-family: var(--font-sans);
27
+
--default-mono-font-family: var(--font-mono);
28
+
}
29
+
}
30
+
@layer base {
31
+
*,
32
+
::after,
33
+
::before,
34
+
::backdrop,
35
+
::file-selector-button {
36
+
box-sizing: border-box;
37
+
margin: 0;
38
+
padding: 0;
39
+
border: 0 solid;
40
+
}
41
+
html,
42
+
* {
43
+
line-height: 1.5;
44
+
-webkit-text-size-adjust: 100%;
45
+
tab-size: 4;
46
+
font-family: var(
47
+
--default-font-family,
48
+
ui-sans-serif,
49
+
system-ui,
50
+
sans-serif,
51
+
"Apple Color Emoji",
52
+
"Segoe UI Emoji",
53
+
"Segoe UI Symbol",
54
+
"Noto Color Emoji"
55
+
);
56
+
font-feature-settings: var(--default-font-feature-settings, normal);
57
+
font-variation-settings: var(--default-font-variation-settings, normal);
58
+
-webkit-tap-highlight-color: transparent;
59
+
}
60
+
hr {
61
+
height: 0;
62
+
color: inherit;
63
+
border-top-width: 1px;
64
+
}
65
+
abbr:where([title]) {
66
+
-webkit-text-decoration: underline dotted;
67
+
text-decoration: underline dotted;
68
+
}
69
+
h1,
70
+
h2,
71
+
h3,
72
+
h4,
73
+
h5,
74
+
h6 {
75
+
font-size: inherit;
76
+
font-weight: inherit;
77
+
}
78
+
a {
79
+
color: inherit;
80
+
-webkit-text-decoration: inherit;
81
+
text-decoration: inherit;
82
+
}
83
+
b,
84
+
strong {
85
+
font-weight: bolder;
86
+
}
87
+
code,
88
+
kbd,
89
+
samp,
90
+
pre {
91
+
font-family: var(
92
+
--default-mono-font-family,
93
+
ui-monospace,
94
+
SFMono-Regular,
95
+
Menlo,
96
+
Monaco,
97
+
Consolas,
98
+
"Liberation Mono",
99
+
"Courier New",
100
+
monospace
101
+
);
102
+
font-feature-settings: var(--default-mono-font-feature-settings, normal);
103
+
font-variation-settings: var(
104
+
--default-mono-font-variation-settings,
105
+
normal
106
+
);
107
+
font-size: 1em;
108
+
}
109
+
small {
110
+
font-size: 80%;
111
+
}
112
+
sub,
113
+
sup {
114
+
font-size: 75%;
115
+
line-height: 0;
116
+
position: relative;
117
+
vertical-align: baseline;
118
+
}
119
+
sub {
120
+
bottom: -0.25em;
121
+
}
122
+
sup {
123
+
top: -0.5em;
124
+
}
125
+
table {
126
+
text-indent: 0;
127
+
border-color: inherit;
128
+
border-collapse: collapse;
129
+
}
130
+
:-moz-focusring {
131
+
outline: auto;
132
+
}
133
+
progress {
134
+
vertical-align: baseline;
135
+
}
136
+
summary {
137
+
display: list-item;
138
+
}
139
+
ol,
140
+
ul,
141
+
menu {
142
+
list-style: none;
143
+
}
144
+
img,
145
+
svg,
146
+
video,
147
+
canvas,
148
+
audio,
149
+
iframe,
150
+
embed,
151
+
object {
152
+
display: block;
153
+
vertical-align: middle;
154
+
}
155
+
img,
156
+
video {
157
+
max-width: 100%;
158
+
height: auto;
159
+
}
160
+
button,
161
+
input,
162
+
select,
163
+
optgroup,
164
+
textarea,
165
+
::file-selector-button {
166
+
font: inherit;
167
+
font-feature-settings: inherit;
168
+
font-variation-settings: inherit;
169
+
letter-spacing: inherit;
170
+
color: inherit;
171
+
border-radius: 0;
172
+
background-color: transparent;
173
+
opacity: 1;
174
+
}
175
+
:where(select:is([multiple], [size])) optgroup {
176
+
font-weight: bolder;
177
+
}
178
+
:where(select:is([multiple], [size])) optgroup option {
179
+
padding-inline-start: 20px;
180
+
}
181
+
::file-selector-button {
182
+
margin-inline-end: 4px;
183
+
}
184
+
::placeholder {
185
+
opacity: 1;
186
+
}
187
+
@supports (not (-webkit-appearance: -apple-pay-button)) or
188
+
(contain-intrinsic-size: 1px) {
189
+
::placeholder {
190
+
color: currentcolor;
191
+
@supports (color: color-mix(in lab, red, red)) {
192
+
color: color-mix(in oklab, currentcolor 50%, transparent);
193
+
}
194
+
}
195
+
}
196
+
textarea {
197
+
resize: vertical;
198
+
}
199
+
::-webkit-search-decoration {
200
+
-webkit-appearance: none;
201
+
}
202
+
::-webkit-date-and-time-value {
203
+
min-height: 1lh;
204
+
text-align: inherit;
205
+
}
206
+
::-webkit-datetime-edit {
207
+
display: inline-flex;
208
+
}
209
+
::-webkit-datetime-edit-fields-wrapper {
210
+
padding: 0;
211
+
}
212
+
::-webkit-datetime-edit,
213
+
::-webkit-datetime-edit-year-field,
214
+
::-webkit-datetime-edit-month-field,
215
+
::-webkit-datetime-edit-day-field,
216
+
::-webkit-datetime-edit-hour-field,
217
+
::-webkit-datetime-edit-minute-field,
218
+
::-webkit-datetime-edit-second-field,
219
+
::-webkit-datetime-edit-millisecond-field,
220
+
::-webkit-datetime-edit-meridiem-field {
221
+
padding-block: 0;
222
+
}
223
+
::-webkit-calendar-picker-indicator {
224
+
line-height: 1;
225
+
}
226
+
:-moz-ui-invalid {
227
+
box-shadow: none;
228
+
}
229
+
button,
230
+
input:where([type="button"], [type="reset"], [type="submit"]),
231
+
::file-selector-button {
232
+
appearance: button;
233
+
}
234
+
::-webkit-inner-spin-button,
235
+
::-webkit-outer-spin-button {
236
+
height: auto;
237
+
}
238
+
[hidden]:where(:not([hidden="until-found"])) {
239
+
display: none !important;
240
+
}
241
+
}
242
+
@layer utilities {
243
+
.tooltip {
244
+
@layer daisyui.l1.l2.l3 {
245
+
position: relative;
246
+
display: inline-block;
247
+
--tt-bg: var(--color-neutral);
248
+
--tt-off: calc(100% + 0.5rem);
249
+
--tt-tail: calc(100% + 1px + 0.25rem);
250
+
& > .tooltip-content,
251
+
&[data-tip]:before {
252
+
position: absolute;
253
+
max-width: 20rem;
254
+
border-radius: var(--radius-field);
255
+
padding-inline: calc(0.25rem * 2);
256
+
padding-block: calc(0.25rem * 1);
257
+
text-align: center;
258
+
white-space: normal;
259
+
color: var(--color-neutral-content);
260
+
opacity: 0%;
261
+
font-size: 0.875rem;
262
+
line-height: 1.25;
263
+
background-color: var(--tt-bg);
264
+
width: max-content;
265
+
pointer-events: none;
266
+
z-index: 2;
267
+
--tw-content: attr(data-tip);
268
+
content: var(--tw-content);
269
+
}
270
+
&:after {
271
+
opacity: 0%;
272
+
background-color: var(--tt-bg);
273
+
content: "";
274
+
pointer-events: none;
275
+
width: 0.625rem;
276
+
height: 0.25rem;
277
+
display: block;
278
+
position: absolute;
279
+
mask-repeat: no-repeat;
280
+
mask-position: -1px 0;
281
+
--mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
282
+
mask-image: var(--mask-tooltip);
283
+
}
284
+
@media (prefers-reduced-motion: no-preference) {
285
+
& > .tooltip-content,
286
+
&[data-tip]:before,
287
+
&:after {
288
+
transition:
289
+
opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms,
290
+
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
291
+
}
292
+
}
293
+
&:is(
294
+
[data-tip]:not([data-tip=""]),
295
+
:has(.tooltip-content:not(:empty))
296
+
) {
297
+
&.tooltip-open,
298
+
&:hover,
299
+
&:has(:focus-visible) {
300
+
& > .tooltip-content,
301
+
&[data-tip]:before,
302
+
&:after {
303
+
opacity: 100%;
304
+
--tt-pos: 0rem;
305
+
@media (prefers-reduced-motion: no-preference) {
306
+
transition:
307
+
opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s,
308
+
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
309
+
}
310
+
}
311
+
}
312
+
}
313
+
}
314
+
@layer daisyui.l1.l2 {
315
+
> .tooltip-content,
316
+
&[data-tip]:before {
317
+
transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
318
+
inset: auto auto var(--tt-off) 50%;
319
+
}
320
+
&:after {
321
+
transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
322
+
inset: auto auto var(--tt-tail) 50%;
323
+
}
324
+
}
325
+
}
326
+
.tab {
327
+
@layer daisyui.l1.l2.l3 {
328
+
position: relative;
329
+
display: inline-flex;
330
+
cursor: pointer;
331
+
appearance: none;
332
+
flex-wrap: wrap;
333
+
align-items: center;
334
+
justify-content: center;
335
+
text-align: center;
336
+
webkit-user-select: none;
337
+
user-select: none;
338
+
&:hover {
339
+
@media (hover: hover) {
340
+
color: var(--color-base-content);
341
+
}
342
+
}
343
+
--tab-p: 0.75rem;
344
+
--tab-bg: var(--color-base-100);
345
+
--tab-border-color: var(--color-base-300);
346
+
--tab-radius-ss: 0;
347
+
--tab-radius-se: 0;
348
+
--tab-radius-es: 0;
349
+
--tab-radius-ee: 0;
350
+
--tab-order: 0;
351
+
--tab-radius-min: calc(0.75rem - var(--border));
352
+
--tab-radius-limit: min(var(--radius-field), var(--tab-radius-min));
353
+
--tab-radius-grad:
354
+
#0000 calc(69% - var(--border)),
355
+
var(--tab-border-color) calc(69% - var(--border) + 0.25px),
356
+
var(--tab-border-color) 69%, var(--tab-bg) calc(69% + 0.25px);
357
+
border-color: #0000;
358
+
order: var(--tab-order);
359
+
height: var(--tab-height);
360
+
font-size: 0.875rem;
361
+
padding-inline: var(--tab-p);
362
+
&:is(input[type="radio"]) {
363
+
min-width: fit-content;
364
+
&:after {
365
+
--tw-content: attr(aria-label);
366
+
content: var(--tw-content);
367
+
}
368
+
}
369
+
&:is(label) {
370
+
position: relative;
371
+
input {
372
+
position: absolute;
373
+
inset: calc(0.25rem * 0);
374
+
cursor: pointer;
375
+
appearance: none;
376
+
opacity: 0%;
377
+
}
378
+
}
379
+
&:checked,
380
+
&:is(label:has(:checked)),
381
+
&:is(
382
+
.tab-active,
383
+
[aria-selected="true"],
384
+
[aria-current="true"],
385
+
[aria-current="page"]
386
+
) {
387
+
& + .tab-content {
388
+
display: block;
389
+
}
390
+
}
391
+
&:not(
392
+
:checked,
393
+
label:has(:checked),
394
+
:hover,
395
+
.tab-active,
396
+
[aria-selected="true"],
397
+
[aria-current="true"],
398
+
[aria-current="page"]
399
+
) {
400
+
color: var(--color-base-content);
401
+
@supports (color: color-mix(in lab, red, red)) {
402
+
color: color-mix(
403
+
in oklab,
404
+
var(--color-base-content) 50%,
405
+
transparent
406
+
);
407
+
}
408
+
}
409
+
&:not(input):empty {
410
+
flex-grow: 1;
411
+
cursor: default;
412
+
}
413
+
&:focus {
414
+
--tw-outline-style: none;
415
+
outline-style: none;
416
+
@media (forced-colors: active) {
417
+
outline: 2px solid transparent;
418
+
outline-offset: 2px;
419
+
}
420
+
}
421
+
&:focus-visible,
422
+
&:is(label:has(:checked:focus-visible)) {
423
+
outline: 2px solid currentColor;
424
+
outline-offset: -5px;
425
+
}
426
+
&[disabled] {
427
+
pointer-events: none;
428
+
opacity: 40%;
429
+
}
430
+
}
431
+
}
432
+
.btn {
433
+
:where(&) {
434
+
@layer daisyui.l1.l2.l3 {
435
+
width: unset;
436
+
}
437
+
}
438
+
.prose
439
+
:where(a&:not(.btn-link)):not(
440
+
:where([class~="not-prose"], [class~="not-prose"] *)
441
+
) {
442
+
text-decoration-line: none;
443
+
}
444
+
@layer daisyui.l1.l2.l3 {
445
+
display: inline-flex;
446
+
flex-shrink: 0;
447
+
cursor: pointer;
448
+
flex-wrap: nowrap;
449
+
align-items: center;
450
+
justify-content: center;
451
+
gap: calc(0.25rem * 1.5);
452
+
text-align: center;
453
+
vertical-align: middle;
454
+
outline-offset: 2px;
455
+
webkit-user-select: none;
456
+
user-select: none;
457
+
padding-inline: var(--btn-p);
458
+
color: var(--btn-fg);
459
+
--tw-prose-links: var(--btn-fg);
460
+
height: var(--size);
461
+
font-size: var(--fontsize, 0.875rem);
462
+
font-weight: 600;
463
+
outline-color: var(--btn-color, var(--color-base-content));
464
+
transition-property: color, background-color, border-color, box-shadow;
465
+
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
466
+
transition-duration: 0.2s;
467
+
border-start-start-radius: var(--join-ss, var(--radius-field));
468
+
border-start-end-radius: var(--join-se, var(--radius-field));
469
+
border-end-start-radius: var(--join-es, var(--radius-field));
470
+
border-end-end-radius: var(--join-ee, var(--radius-field));
471
+
background-color: var(--btn-bg);
472
+
background-size: auto, calc(var(--noise) * 100%);
473
+
background-image: none, var(--btn-noise);
474
+
border-width: var(--border);
475
+
border-style: solid;
476
+
border-color: var(--btn-border);
477
+
text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
478
+
touch-action: manipulation;
479
+
box-shadow:
480
+
0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset,
481
+
var(--btn-shadow);
482
+
--size: calc(var(--size-field, 0.25rem) * 10);
483
+
--btn-bg: var(--btn-color, var(--color-base-200));
484
+
--btn-fg: var(--color-base-content);
485
+
--btn-p: 1rem;
486
+
--btn-border: var(--btn-bg);
487
+
@supports (color: color-mix(in lab, red, red)) {
488
+
--btn-border: color-mix(
489
+
in oklab,
490
+
var(--btn-bg),
491
+
#000 calc(var(--depth) * 5%)
492
+
);
493
+
}
494
+
--btn-shadow:
495
+
0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg);
496
+
@supports (color: color-mix(in lab, red, red)) {
497
+
--btn-shadow:
498
+
0 3px 2px -2px
499
+
color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
500
+
0 4px 3px -2px
501
+
color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
502
+
}
503
+
--btn-noise: var(--fx-noise);
504
+
@media (hover: hover) {
505
+
&:hover {
506
+
--btn-bg: var(--btn-color, var(--color-base-200));
507
+
@supports (color: color-mix(in lab, red, red)) {
508
+
--btn-bg: color-mix(
509
+
in oklab,
510
+
var(--btn-color, var(--color-base-200)),
511
+
#000 7%
512
+
);
513
+
}
514
+
}
515
+
}
516
+
&:focus-visible,
517
+
&:has(:focus-visible) {
518
+
outline-width: 2px;
519
+
outline-style: solid;
520
+
isolation: isolate;
521
+
}
522
+
&:active:not(.btn-active) {
523
+
translate: 0 0.5px;
524
+
--btn-bg: var(--btn-color, var(--color-base-200));
525
+
@supports (color: color-mix(in lab, red, red)) {
526
+
--btn-bg: color-mix(
527
+
in oklab,
528
+
var(--btn-color, var(--color-base-200)),
529
+
#000 5%
530
+
);
531
+
}
532
+
--btn-border: var(--btn-color, var(--color-base-200));
533
+
@supports (color: color-mix(in lab, red, red)) {
534
+
--btn-border: color-mix(
535
+
in oklab,
536
+
var(--btn-color, var(--color-base-200)),
537
+
#000 7%
538
+
);
539
+
}
540
+
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
541
+
}
542
+
&:is(input[type="checkbox"], input[type="radio"]) {
543
+
appearance: none;
544
+
&[aria-label]::after {
545
+
--tw-content: attr(aria-label);
546
+
content: var(--tw-content);
547
+
}
548
+
}
549
+
&:where(input:checked:not(.filter .btn)) {
550
+
--btn-color: var(--color-primary);
551
+
--btn-fg: var(--color-primary-content);
552
+
isolation: isolate;
553
+
}
554
+
}
555
+
&:disabled {
556
+
@layer daisyui.l1.l2 {
557
+
&:not(.btn-link, .btn-ghost) {
558
+
background-color: var(--color-base-content);
559
+
@supports (color: color-mix(in lab, red, red)) {
560
+
background-color: color-mix(
561
+
in oklab,
562
+
var(--color-base-content) 10%,
563
+
transparent
564
+
);
565
+
}
566
+
box-shadow: none;
567
+
}
568
+
pointer-events: none;
569
+
--btn-border: #0000;
570
+
--btn-noise: none;
571
+
--btn-fg: var(--color-base-content);
572
+
@supports (color: color-mix(in lab, red, red)) {
573
+
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
574
+
}
575
+
}
576
+
}
577
+
&[disabled] {
578
+
@layer daisyui.l1.l2 {
579
+
&:not(.btn-link, .btn-ghost) {
580
+
background-color: var(--color-base-content);
581
+
@supports (color: color-mix(in lab, red, red)) {
582
+
background-color: color-mix(
583
+
in oklab,
584
+
var(--color-base-content) 10%,
585
+
transparent
586
+
);
587
+
}
588
+
box-shadow: none;
589
+
}
590
+
pointer-events: none;
591
+
--btn-border: #0000;
592
+
--btn-noise: none;
593
+
--btn-fg: var(--color-base-content);
594
+
@supports (color: color-mix(in lab, red, red)) {
595
+
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
596
+
}
597
+
}
598
+
}
599
+
}
600
+
.input {
601
+
@layer daisyui.l1.l2.l3 {
602
+
cursor: text;
603
+
border: var(--border) solid #0000;
604
+
position: relative;
605
+
display: inline-flex;
606
+
flex-shrink: 1;
607
+
appearance: none;
608
+
align-items: center;
609
+
gap: calc(0.25rem * 2);
610
+
background-color: var(--color-base-100);
611
+
padding-inline: calc(0.25rem * 3);
612
+
vertical-align: middle;
613
+
white-space: nowrap;
614
+
width: clamp(3rem, 20rem, 100%);
615
+
height: var(--size);
616
+
font-size: max(var(--font-size, 0.875rem), 0.875rem);
617
+
touch-action: manipulation;
618
+
border-start-start-radius: var(--join-ss, var(--radius-field));
619
+
border-start-end-radius: var(--join-se, var(--radius-field));
620
+
border-end-start-radius: var(--join-es, var(--radius-field));
621
+
border-end-end-radius: var(--join-ee, var(--radius-field));
622
+
border-color: var(--input-color);
623
+
box-shadow:
624
+
0 1px var(--input-color) inset,
625
+
0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
626
+
@supports (color: color-mix(in lab, red, red)) {
627
+
box-shadow:
628
+
0 1px
629
+
color-mix(
630
+
in oklab,
631
+
var(--input-color) calc(var(--depth) * 10%),
632
+
#0000
633
+
)
634
+
inset,
635
+
0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
636
+
}
637
+
--size: calc(var(--size-field, 0.25rem) * 10);
638
+
--input-color: var(--color-base-content);
639
+
@supports (color: color-mix(in lab, red, red)) {
640
+
--input-color: color-mix(
641
+
in oklab,
642
+
var(--color-base-content) 20%,
643
+
#0000
644
+
);
645
+
}
646
+
&:where(input) {
647
+
display: inline-flex;
648
+
}
649
+
:where(input) {
650
+
display: inline-flex;
651
+
height: 100%;
652
+
width: 100%;
653
+
appearance: none;
654
+
background-color: transparent;
655
+
border: none;
656
+
&:focus,
657
+
&:focus-within {
658
+
--tw-outline-style: none;
659
+
outline-style: none;
660
+
@media (forced-colors: active) {
661
+
outline: 2px solid transparent;
662
+
outline-offset: 2px;
663
+
}
664
+
}
665
+
}
666
+
:where(input[type="url"]),
667
+
:where(input[type="email"]) {
668
+
direction: ltr;
669
+
}
670
+
:where(input[type="date"]) {
671
+
display: inline-flex;
672
+
}
673
+
&:focus,
674
+
&:focus-within {
675
+
--input-color: var(--color-base-content);
676
+
box-shadow: 0 1px var(--input-color);
677
+
@supports (color: color-mix(in lab, red, red)) {
678
+
box-shadow: 0 1px
679
+
color-mix(
680
+
in oklab,
681
+
var(--input-color) calc(var(--depth) * 10%),
682
+
#0000
683
+
);
684
+
}
685
+
outline: 2px solid var(--input-color);
686
+
outline-offset: 2px;
687
+
isolation: isolate;
688
+
}
689
+
@media (pointer: coarse) {
690
+
@supports (-webkit-touch-callout: none) {
691
+
&:focus,
692
+
&:focus-within {
693
+
--font-size: 1rem;
694
+
}
695
+
}
696
+
}
697
+
&:has(> input[disabled]),
698
+
&:is(:disabled, [disabled]),
699
+
fieldset:disabled & {
700
+
cursor: not-allowed;
701
+
border-color: var(--color-base-200);
702
+
background-color: var(--color-base-200);
703
+
color: var(--color-base-content);
704
+
@supports (color: color-mix(in lab, red, red)) {
705
+
color: color-mix(
706
+
in oklab,
707
+
var(--color-base-content) 40%,
708
+
transparent
709
+
);
710
+
}
711
+
&::placeholder {
712
+
color: var(--color-base-content);
713
+
@supports (color: color-mix(in lab, red, red)) {
714
+
color: color-mix(
715
+
in oklab,
716
+
var(--color-base-content) 20%,
717
+
transparent
718
+
);
719
+
}
720
+
}
721
+
box-shadow: none;
722
+
}
723
+
&:has(> input[disabled]) > input[disabled] {
724
+
cursor: not-allowed;
725
+
}
726
+
&::-webkit-date-and-time-value {
727
+
text-align: inherit;
728
+
}
729
+
&[type="number"] {
730
+
&::-webkit-inner-spin-button {
731
+
margin-block: calc(0.25rem * -3);
732
+
margin-inline-end: calc(0.25rem * -3);
733
+
}
734
+
}
735
+
&::-webkit-calendar-picker-indicator {
736
+
position: absolute;
737
+
inset-inline-end: 0.75em;
738
+
}
739
+
&:has(> input[type="date"]) {
740
+
:where(input[type="date"]) {
741
+
display: inline-flex;
742
+
webkit-appearance: none;
743
+
appearance: none;
744
+
}
745
+
input[type="date"]::-webkit-calendar-picker-indicator {
746
+
position: absolute;
747
+
inset-inline-end: 0.75em;
748
+
width: 1em;
749
+
height: 1em;
750
+
cursor: pointer;
751
+
}
752
+
}
753
+
}
754
+
}
755
+
.avatar {
756
+
@layer daisyui.l1.l2.l3 {
757
+
position: relative;
758
+
display: inline-flex;
759
+
vertical-align: middle;
760
+
& > div {
761
+
display: block;
762
+
aspect-ratio: 1 / 1;
763
+
overflow: hidden;
764
+
}
765
+
img {
766
+
height: 100%;
767
+
width: 100%;
768
+
object-fit: cover;
769
+
}
770
+
}
771
+
}
772
+
.card {
773
+
@layer daisyui.l1.l2.l3 {
774
+
position: relative;
775
+
display: flex;
776
+
flex-direction: column;
777
+
border-radius: var(--radius-box);
778
+
outline-width: 2px;
779
+
transition: outline 0.2s ease-in-out;
780
+
outline: 0 solid #0000;
781
+
outline-offset: 2px;
782
+
&:focus {
783
+
--tw-outline-style: none;
784
+
outline-style: none;
785
+
@media (forced-colors: active) {
786
+
outline: 2px solid transparent;
787
+
outline-offset: 2px;
788
+
}
789
+
}
790
+
&:focus-visible {
791
+
outline-color: currentColor;
792
+
}
793
+
:where(figure:first-child) {
794
+
overflow: hidden;
795
+
border-start-start-radius: inherit;
796
+
border-start-end-radius: inherit;
797
+
border-end-start-radius: unset;
798
+
border-end-end-radius: unset;
799
+
}
800
+
:where(figure:last-child) {
801
+
overflow: hidden;
802
+
border-start-start-radius: unset;
803
+
border-start-end-radius: unset;
804
+
border-end-start-radius: inherit;
805
+
border-end-end-radius: inherit;
806
+
}
807
+
figure {
808
+
display: flex;
809
+
align-items: center;
810
+
justify-content: center;
811
+
}
812
+
&:has(> input:is(input[type="checkbox"], input[type="radio"])) {
813
+
cursor: pointer;
814
+
user-select: none;
815
+
}
816
+
&:has(> :checked) {
817
+
outline: 2px solid currentColor;
818
+
}
819
+
}
820
+
}
821
+
.absolute {
822
+
position: absolute;
823
+
}
824
+
.start {
825
+
inset-inline-start: var(--spacing);
826
+
}
827
+
.end {
828
+
inset-inline-end: var(--spacing);
829
+
}
830
+
.top-1 {
831
+
top: calc(var(--spacing) * 1);
832
+
}
833
+
.right-2 {
834
+
right: calc(var(--spacing) * 2);
835
+
}
836
+
.right-8 {
837
+
right: calc(var(--spacing) * 8);
838
+
}
839
+
.join {
840
+
display: inline-flex;
841
+
align-items: stretch;
842
+
--join-ss: 0;
843
+
--join-se: 0;
844
+
--join-es: 0;
845
+
--join-ee: 0;
846
+
:where(.join-item) {
847
+
border-start-start-radius: var(--join-ss, 0);
848
+
border-start-end-radius: var(--join-se, 0);
849
+
border-end-start-radius: var(--join-es, 0);
850
+
border-end-end-radius: var(--join-ee, 0);
851
+
* {
852
+
--join-ss: var(--radius-field);
853
+
--join-se: var(--radius-field);
854
+
--join-es: var(--radius-field);
855
+
--join-ee: var(--radius-field);
856
+
}
857
+
}
858
+
> .join-item:where(:first-child) {
859
+
--join-ss: var(--radius-field);
860
+
--join-se: 0;
861
+
--join-es: var(--radius-field);
862
+
--join-ee: 0;
863
+
}
864
+
:first-child:not(:last-child) {
865
+
:where(.join-item) {
866
+
--join-ss: var(--radius-field);
867
+
--join-se: 0;
868
+
--join-es: var(--radius-field);
869
+
--join-ee: 0;
870
+
}
871
+
}
872
+
> .join-item:where(:last-child) {
873
+
--join-ss: 0;
874
+
--join-se: var(--radius-field);
875
+
--join-es: 0;
876
+
--join-ee: var(--radius-field);
877
+
}
878
+
:last-child:not(:first-child) {
879
+
:where(.join-item) {
880
+
--join-ss: 0;
881
+
--join-se: var(--radius-field);
882
+
--join-es: 0;
883
+
--join-ee: var(--radius-field);
884
+
}
885
+
}
886
+
> .join-item:where(:only-child) {
887
+
--join-ss: var(--radius-field);
888
+
--join-se: var(--radius-field);
889
+
--join-es: var(--radius-field);
890
+
--join-ee: var(--radius-field);
891
+
}
892
+
:only-child {
893
+
:where(.join-item) {
894
+
--join-ss: var(--radius-field);
895
+
--join-se: var(--radius-field);
896
+
--join-es: var(--radius-field);
897
+
--join-ee: var(--radius-field);
898
+
}
899
+
}
900
+
> :where(:focus, :has(:focus)) {
901
+
z-index: 1;
902
+
}
903
+
@media (hover: hover) {
904
+
> :where(.btn:hover, :has(.btn:hover)) {
905
+
isolation: isolate;
906
+
}
907
+
}
908
+
}
909
+
.tabs-box {
910
+
@layer daisyui.l1.l2 {
911
+
background-color: var(--color-base-200);
912
+
padding: calc(0.25rem * 1);
913
+
--tabs-box-radius: calc(3 * var(--radius-field));
914
+
border-radius: calc(
915
+
min(var(--tab-height) / 2, var(--radius-field)) +
916
+
min(0.25rem, var(--tabs-box-radius))
917
+
);
918
+
box-shadow:
919
+
0 -0.5px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
920
+
0 0.5px oklch(0% 0 0 / calc(var(--depth) * 0.05)) inset;
921
+
> .tab {
922
+
border-radius: var(--radius-field);
923
+
border-style: none;
924
+
&:focus-visible,
925
+
&:is(label:has(:checked:focus-visible)) {
926
+
outline-offset: 2px;
927
+
}
928
+
&:focus-visible {
929
+
z-index: 1;
930
+
}
931
+
}
932
+
> :is(
933
+
.tab-active,
934
+
[aria-selected="true"],
935
+
[aria-current="true"],
936
+
[aria-current="page"]
937
+
):not(.tab-disabled, [disabled]),
938
+
> :is(input:checked),
939
+
> :is(label:has(:checked)) {
940
+
background-color: var(--tab-bg, var(--color-base-100));
941
+
box-shadow:
942
+
0 1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
943
+
0 1px 1px -1px var(--color-neutral),
944
+
0 1px 6px -4px var(--color-neutral);
945
+
@supports (color: color-mix(in lab, red, red)) {
946
+
box-shadow:
947
+
0 1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
948
+
0 1px 1px -1px
949
+
color-mix(
950
+
in oklab,
951
+
var(--color-neutral) calc(var(--depth) * 50%),
952
+
#0000
953
+
),
954
+
0 1px 6px -4px
955
+
color-mix(
956
+
in oklab,
957
+
var(--color-neutral) calc(var(--depth) * 100%),
958
+
#0000
959
+
);
960
+
}
961
+
@media (forced-colors: active) {
962
+
border: 1px solid;
963
+
}
964
+
}
965
+
> .tab-content {
966
+
margin-top: calc(0.25rem * 1);
967
+
height: calc(100% - var(--tab-height) + var(--border) - 0.5rem);
968
+
border-radius: calc(
969
+
min(var(--tab-height) / 2, var(--radius-field)) +
970
+
min(0.25rem, var(--tabs-box-radius)) - var(--border)
971
+
);
972
+
}
973
+
}
974
+
}
975
+
.float-right {
976
+
float: right;
977
+
}
978
+
.my-5 {
979
+
margin-block: calc(var(--spacing) * 5);
980
+
}
981
+
.label {
982
+
@layer daisyui.l1.l2.l3 {
983
+
display: inline-flex;
984
+
align-items: center;
985
+
gap: calc(0.25rem * 1.5);
986
+
white-space: nowrap;
987
+
color: currentcolor;
988
+
@supports (color: color-mix(in lab, red, red)) {
989
+
color: color-mix(in oklab, currentcolor 60%, transparent);
990
+
}
991
+
&:has(input) {
992
+
cursor: pointer;
993
+
}
994
+
&:is(.input > *, .select > *) {
995
+
display: flex;
996
+
height: calc(100% - 0.5rem);
997
+
align-items: center;
998
+
padding-inline: calc(0.25rem * 3);
999
+
white-space: nowrap;
1000
+
font-size: inherit;
1001
+
&:first-child {
1002
+
margin-inline-start: calc(0.25rem * -3);
1003
+
margin-inline-end: calc(0.25rem * 3);
1004
+
border-inline-end: var(--border) solid currentColor;
1005
+
@supports (color: color-mix(in lab, red, red)) {
1006
+
border-inline-end: var(--border) solid
1007
+
color-mix(in oklab, currentColor 10%, #0000);
1008
+
}
1009
+
}
1010
+
&:last-child {
1011
+
margin-inline-start: calc(0.25rem * 3);
1012
+
margin-inline-end: calc(0.25rem * -3);
1013
+
border-inline-start: var(--border) solid currentColor;
1014
+
@supports (color: color-mix(in lab, red, red)) {
1015
+
border-inline-start: var(--border) solid
1016
+
color-mix(in oklab, currentColor 10%, #0000);
1017
+
}
1018
+
}
1019
+
}
1020
+
}
1021
+
}
1022
+
.join-item {
1023
+
&:where(*:not(:first-child, :disabled, [disabled], .btn-disabled)) {
1024
+
margin-inline-start: calc(var(--border, 1px) * -1);
1025
+
margin-block-start: 0;
1026
+
}
1027
+
&:where(*:is(:disabled, [disabled], .btn-disabled)) {
1028
+
border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px);
1029
+
}
1030
+
}
1031
+
.ms-2 {
1032
+
margin-inline-start: calc(var(--spacing) * 2);
1033
+
}
1034
+
.-mt-1 {
1035
+
margin-top: calc(var(--spacing) * -1);
1036
+
}
1037
+
.mt-2 {
1038
+
margin-top: calc(var(--spacing) * 2);
1039
+
}
1040
+
.mt-5 {
1041
+
margin-top: calc(var(--spacing) * 5);
1042
+
}
1043
+
.mr-2 {
1044
+
margin-right: calc(var(--spacing) * 2);
1045
+
}
1046
+
.mb-2 {
1047
+
margin-bottom: calc(var(--spacing) * 2);
1048
+
}
1049
+
.mb-8 {
1050
+
margin-bottom: calc(var(--spacing) * 8);
1051
+
}
1052
+
.ml-1 {
1053
+
margin-left: calc(var(--spacing) * 1);
1054
+
}
1055
+
.badge {
1056
+
@layer daisyui.l1.l2.l3 {
1057
+
display: inline-flex;
1058
+
align-items: center;
1059
+
justify-content: center;
1060
+
gap: calc(0.25rem * 2);
1061
+
border-radius: var(--radius-selector);
1062
+
vertical-align: middle;
1063
+
color: var(--badge-fg);
1064
+
border: var(--border) solid var(--badge-color, var(--color-base-200));
1065
+
font-size: 0.875rem;
1066
+
width: fit-content;
1067
+
background-size: auto, calc(var(--noise) * 100%);
1068
+
background-image: none, var(--fx-noise);
1069
+
background-color: var(--badge-bg);
1070
+
--badge-bg: var(--badge-color, var(--color-base-100));
1071
+
--badge-fg: var(--color-base-content);
1072
+
--size: calc(var(--size-selector, 0.25rem) * 6);
1073
+
height: var(--size);
1074
+
padding-inline: calc(var(--size) / 2 - var(--border));
1075
+
}
1076
+
}
1077
+
.tabs {
1078
+
@layer daisyui.l1.l2.l3 {
1079
+
display: flex;
1080
+
flex-wrap: wrap;
1081
+
--tabs-height: auto;
1082
+
--tabs-direction: row;
1083
+
--tab-height: calc(var(--size-field, 0.25rem) * 10);
1084
+
height: var(--tabs-height);
1085
+
flex-direction: var(--tabs-direction);
1086
+
}
1087
+
}
1088
+
.alert {
1089
+
border-width: var(--border);
1090
+
border-color: var(--alert-border-color, var(--color-base-200));
1091
+
@layer daisyui.l1.l2.l3 {
1092
+
border-style: solid;
1093
+
--alert-border-color: var(--color-base-200);
1094
+
display: grid;
1095
+
align-items: center;
1096
+
gap: calc(0.25rem * 4);
1097
+
border-radius: var(--radius-box);
1098
+
padding-inline: calc(0.25rem * 4);
1099
+
padding-block: calc(0.25rem * 3);
1100
+
color: var(--color-base-content);
1101
+
background-color: var(--alert-color, var(--color-base-200));
1102
+
justify-content: start;
1103
+
justify-items: start;
1104
+
grid-auto-flow: column;
1105
+
grid-template-columns: auto;
1106
+
text-align: start;
1107
+
font-size: 0.875rem;
1108
+
line-height: 1.25rem;
1109
+
background-size: auto, calc(var(--noise) * 100%);
1110
+
background-image: none, var(--fx-noise);
1111
+
box-shadow:
1112
+
0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset,
1113
+
0 1px #000,
1114
+
0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
1115
+
@supports (color: color-mix(in lab, red, red)) {
1116
+
box-shadow:
1117
+
0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset,
1118
+
0 1px
1119
+
color-mix(
1120
+
in oklab,
1121
+
color-mix(
1122
+
in oklab,
1123
+
#000 20%,
1124
+
var(--alert-color, var(--color-base-200))
1125
+
)
1126
+
calc(var(--depth) * 20%),
1127
+
#0000
1128
+
),
1129
+
0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
1130
+
}
1131
+
&:has(:nth-child(2)) {
1132
+
grid-template-columns: auto minmax(auto, 1fr);
1133
+
}
1134
+
}
1135
+
}
1136
+
.mask {
1137
+
@layer daisyui.l1.l2.l3 {
1138
+
display: inline-block;
1139
+
vertical-align: middle;
1140
+
mask-size: contain;
1141
+
mask-repeat: no-repeat;
1142
+
mask-position: center;
1143
+
}
1144
+
}
1145
+
.contents {
1146
+
display: contents;
1147
+
}
1148
+
.flex {
1149
+
display: flex;
1150
+
}
1151
+
.hidden {
1152
+
display: none;
1153
+
}
1154
+
.inline {
1155
+
display: inline;
1156
+
}
1157
+
.btn-circle {
1158
+
@layer daisyui.l1.l2 {
1159
+
border-radius: calc(infinity * 1px);
1160
+
padding-inline: calc(0.25rem * 0);
1161
+
width: var(--size);
1162
+
height: var(--size);
1163
+
}
1164
+
}
1165
+
.h-6 {
1166
+
height: calc(var(--spacing) * 6);
1167
+
}
1168
+
.h-\[45px\] {
1169
+
height: 45px;
1170
+
}
1171
+
.h-full {
1172
+
height: 100%;
1173
+
}
1174
+
.max-h-\[45px\] {
1175
+
max-height: 45px;
1176
+
}
1177
+
.w-6 {
1178
+
width: calc(var(--spacing) * 6);
1179
+
}
1180
+
.w-\[45px\] {
1181
+
width: 45px;
1182
+
}
1183
+
.w-full {
1184
+
width: 100%;
1185
+
}
1186
+
.flex-1 {
1187
+
flex: 1;
1188
+
}
1189
+
.flex-none {
1190
+
flex: none;
1191
+
}
1192
+
.shrink-0 {
1193
+
flex-shrink: 0;
1194
+
}
1195
+
.link {
1196
+
@layer daisyui.l1.l2.l3 {
1197
+
cursor: pointer;
1198
+
text-decoration-line: underline;
1199
+
&:focus {
1200
+
--tw-outline-style: none;
1201
+
outline-style: none;
1202
+
@media (forced-colors: active) {
1203
+
outline: 2px solid transparent;
1204
+
outline-offset: 2px;
1205
+
}
1206
+
}
1207
+
&:focus-visible {
1208
+
outline: 2px solid currentColor;
1209
+
outline-offset: 2px;
1210
+
}
1211
+
}
1212
+
}
1213
+
.flex-col {
1214
+
flex-direction: column;
1215
+
}
1216
+
.items-center {
1217
+
align-items: center;
1218
+
}
1219
+
.gap-2 {
1220
+
gap: calc(var(--spacing) * 2);
1221
+
}
1222
+
.space-y-10 {
1223
+
:where(& > :not(:last-child)) {
1224
+
--tw-space-y-reverse: 0;
1225
+
margin-block-start: calc(
1226
+
calc(var(--spacing) * 10) * var(--tw-space-y-reverse)
1227
+
);
1228
+
margin-block-end: calc(
1229
+
calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse))
1230
+
);
1231
+
}
1232
+
}
1233
+
.rounded-lg {
1234
+
border-radius: var(--radius-lg);
1235
+
}
1236
+
.border {
1237
+
border-style: var(--tw-border-style);
1238
+
border-width: 1px;
1239
+
}
1240
+
.border-s-4 {
1241
+
border-inline-start-style: var(--tw-border-style);
1242
+
border-inline-start-width: 4px;
1243
+
}
1244
+
.border-b-2 {
1245
+
border-bottom-style: var(--tw-border-style);
1246
+
border-bottom-width: 2px;
1247
+
}
1248
+
.border-dotted {
1249
+
--tw-border-style: dotted;
1250
+
border-style: dotted;
1251
+
}
1252
+
.border-base-200 {
1253
+
border-color: var(--color-base-200);
1254
+
}
1255
+
.border-base-300 {
1256
+
border-color: var(--color-base-300);
1257
+
}
1258
+
.bg-\[\#006aff\] {
1259
+
background-color: #006aff;
1260
+
}
1261
+
.bg-\[\#595aff\] {
1262
+
background-color: #595aff;
1263
+
}
1264
+
.bg-\[\#ed5345\] {
1265
+
background-color: #ed5345;
1266
+
}
1267
+
.bg-base-100 {
1268
+
background-color: var(--color-base-100);
1269
+
}
1270
+
.bg-base-200\/70 {
1271
+
background-color: var(--color-base-200);
1272
+
@supports (color: color-mix(in lab, red, red)) {
1273
+
background-color: color-mix(
1274
+
in oklab,
1275
+
var(--color-base-200) 70%,
1276
+
transparent
1277
+
);
1278
+
}
1279
+
}
1280
+
.bg-black {
1281
+
background-color: var(--color-black);
1282
+
}
1283
+
.bg-white {
1284
+
background-color: var(--color-white);
1285
+
}
1286
+
.bg-white\/65 {
1287
+
background-color: color-mix(in srgb, #fff 65%, transparent);
1288
+
@supports (color: color-mix(in lab, red, red)) {
1289
+
background-color: color-mix(
1290
+
in oklab,
1291
+
var(--color-white) 65%,
1292
+
transparent
1293
+
);
1294
+
}
1295
+
}
1296
+
.mask-squircle {
1297
+
@layer daisyui.l1.l2 {
1298
+
mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
1299
+
}
1300
+
}
1301
+
.stroke-current {
1302
+
stroke: currentcolor;
1303
+
}
1304
+
.p-10 {
1305
+
padding: calc(var(--spacing) * 10);
1306
+
}
1307
+
.px-5 {
1308
+
padding-inline: calc(var(--spacing) * 5);
1309
+
}
1310
+
.pt-5 {
1311
+
padding-top: calc(var(--spacing) * 5);
1312
+
}
1313
+
.pb-5 {
1314
+
padding-bottom: calc(var(--spacing) * 5);
1315
+
}
1316
+
.pl-4 {
1317
+
padding-left: calc(var(--spacing) * 4);
1318
+
}
1319
+
.pl-5 {
1320
+
padding-left: calc(var(--spacing) * 5);
1321
+
}
1322
+
.text-2xl {
1323
+
font-size: var(--text-2xl);
1324
+
line-height: var(--tw-leading, var(--text-2xl--line-height));
1325
+
}
1326
+
.text-sm {
1327
+
font-size: var(--text-sm);
1328
+
line-height: var(--tw-leading, var(--text-sm--line-height));
1329
+
}
1330
+
.text-xs {
1331
+
font-size: var(--text-xs);
1332
+
line-height: var(--tw-leading, var(--text-xs--line-height));
1333
+
}
1334
+
.badge-sm {
1335
+
@layer daisyui.l1.l2 {
1336
+
--size: calc(var(--size-selector, 0.25rem) * 5);
1337
+
font-size: 0.75rem;
1338
+
}
1339
+
}
1340
+
.font-extrabold {
1341
+
--tw-font-weight: var(--font-weight-extrabold);
1342
+
font-weight: var(--font-weight-extrabold);
1343
+
}
1344
+
.font-semibold {
1345
+
--tw-font-weight: var(--font-weight-semibold);
1346
+
font-weight: var(--font-weight-semibold);
1347
+
}
1348
+
.alert-error {
1349
+
@layer daisyui.l1.l2 {
1350
+
color: var(--color-error-content);
1351
+
--alert-border-color: var(--color-error);
1352
+
--alert-color: var(--color-error);
1353
+
}
1354
+
}
1355
+
.text-\[\#3da0c8\] {
1356
+
color: #3da0c8;
1357
+
}
1358
+
.text-\[\#006aff\] {
1359
+
color: #006aff;
1360
+
}
1361
+
.text-\[\#595aff\] {
1362
+
color: #595aff;
1363
+
}
1364
+
.text-base-content {
1365
+
color: var(--color-base-content);
1366
+
}
1367
+
.text-base-content\/70 {
1368
+
color: var(--color-base-content);
1369
+
@supports (color: color-mix(in lab, red, red)) {
1370
+
color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
1371
+
}
1372
+
}
1373
+
.text-base-content\/80 {
1374
+
color: var(--color-base-content);
1375
+
@supports (color: color-mix(in lab, red, red)) {
1376
+
color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
1377
+
}
1378
+
}
1379
+
.text-white {
1380
+
color: var(--color-white);
1381
+
}
1382
+
.italic {
1383
+
font-style: italic;
1384
+
}
1385
+
.opacity-50 {
1386
+
opacity: 50%;
1387
+
}
1388
+
.shadow-sm {
1389
+
--tw-shadow:
1390
+
0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
1391
+
0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1392
+
box-shadow:
1393
+
var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
1394
+
var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1395
+
}
1396
+
.shadow-xl {
1397
+
--tw-shadow:
1398
+
0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
1399
+
0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1400
+
box-shadow:
1401
+
var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
1402
+
var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1403
+
}
1404
+
.outline {
1405
+
outline-style: var(--tw-outline-style);
1406
+
outline-width: 1px;
1407
+
}
1408
+
.btn-ghost {
1409
+
@layer daisyui.l1 {
1410
+
&:not(
1411
+
.btn-active,
1412
+
:hover,
1413
+
:active:focus,
1414
+
:focus-visible,
1415
+
input:checked:not(.filter .btn)
1416
+
) {
1417
+
--btn-shadow: "";
1418
+
--btn-bg: #0000;
1419
+
--btn-border: #0000;
1420
+
--btn-noise: none;
1421
+
&:not(:disabled, [disabled], .btn-disabled) {
1422
+
outline-color: currentcolor;
1423
+
--btn-fg: var(--btn-color, currentColor);
1424
+
}
1425
+
}
1426
+
@media (hover: none) {
1427
+
&:not(
1428
+
.btn-active,
1429
+
:active,
1430
+
:focus-visible,
1431
+
input:checked:not(.filter .btn)
1432
+
):hover {
1433
+
outline-color: currentcolor;
1434
+
--btn-shadow: "";
1435
+
--btn-bg: #0000;
1436
+
--btn-fg: var(--btn-color, currentColor);
1437
+
--btn-border: #0000;
1438
+
--btn-noise: none;
1439
+
}
1440
+
}
1441
+
}
1442
+
}
1443
+
.btn-sm {
1444
+
@layer daisyui.l1.l2 {
1445
+
--fontsize: 0.75rem;
1446
+
--btn-p: 0.75rem;
1447
+
--size: calc(var(--size-field, 0.25rem) * 8);
1448
+
}
1449
+
}
1450
+
.badge-accent {
1451
+
@layer daisyui.l1.l2 {
1452
+
--badge-color: var(--color-accent);
1453
+
--badge-fg: var(--color-accent-content);
1454
+
}
1455
+
}
1456
+
.badge-info {
1457
+
@layer daisyui.l1.l2 {
1458
+
--badge-color: var(--color-info);
1459
+
--badge-fg: var(--color-info-content);
1460
+
}
1461
+
}
1462
+
.btn-primary {
1463
+
@layer daisyui.l1.l2.l3 {
1464
+
--btn-color: var(--color-primary);
1465
+
--btn-fg: var(--color-primary-content);
1466
+
}
1467
+
}
1468
+
.card-dash {
1469
+
@layer daisyui.l1.l2 {
1470
+
border: var(--border) dashed var(--color-base-200);
1471
+
}
1472
+
}
1473
+
.focus\:outline-primary {
1474
+
&:focus {
1475
+
outline-color: var(--color-primary);
1476
+
}
1477
+
}
1478
+
}
1479
+
@layer base {
1480
+
:where(*),
1481
+
*:has(input.theme-controller[value="light"]:checked),
1482
+
[data-theme="light"] {
1483
+
color-scheme: light;
1484
+
--color-base-100: oklch(100% 0 0);
1485
+
--color-base-200: oklch(98% 0 0);
1486
+
--color-base-300: oklch(95% 0 0);
1487
+
--color-base-content: oklch(21% 0.006 285.885);
1488
+
--color-primary: oklch(45% 0.24 277.023);
1489
+
--color-primary-content: oklch(93% 0.034 272.788);
1490
+
--color-secondary: oklch(65% 0.241 354.308);
1491
+
--color-secondary-content: oklch(94% 0.028 342.258);
1492
+
--color-accent: oklch(77% 0.152 181.912);
1493
+
--color-accent-content: oklch(38% 0.063 188.416);
1494
+
--color-neutral: oklch(14% 0.005 285.823);
1495
+
--color-neutral-content: oklch(92% 0.004 286.32);
1496
+
--color-info: oklch(74% 0.16 232.661);
1497
+
--color-info-content: oklch(29% 0.066 243.157);
1498
+
--color-success: oklch(76% 0.177 163.223);
1499
+
--color-success-content: oklch(37% 0.077 168.94);
1500
+
--color-warning: oklch(82% 0.189 84.429);
1501
+
--color-warning-content: oklch(41% 0.112 45.904);
1502
+
--color-error: oklch(71% 0.194 13.428);
1503
+
--color-error-content: oklch(27% 0.105 12.094);
1504
+
--radius-selector: 0.5rem;
1505
+
--radius-field: 0.25rem;
1506
+
--radius-box: 0.5rem;
1507
+
--size-selector: 0.25rem;
1508
+
--size-field: 0.25rem;
1509
+
--border: 1px;
1510
+
--depth: 1;
1511
+
--noise: 0;
1512
+
}
1513
+
}
1514
+
@layer base {
1515
+
@media (prefers-color-scheme: dark) {
1516
+
*:not([data-theme]) {
1517
+
color-scheme: dark;
1518
+
--color-base-100: oklch(25.33% 0.016 252.42);
1519
+
--color-base-200: oklch(23.26% 0.014 253.1);
1520
+
--color-base-300: oklch(21.15% 0.012 254.09);
1521
+
--color-base-content: oklch(97.807% 0.029 256.847);
1522
+
--color-primary: oklch(58% 0.233 277.117);
1523
+
--color-primary-content: oklch(96% 0.018 272.314);
1524
+
--color-secondary: oklch(65% 0.241 354.308);
1525
+
--color-secondary-content: oklch(94% 0.028 342.258);
1526
+
--color-accent: oklch(77% 0.152 181.912);
1527
+
--color-accent-content: oklch(38% 0.063 188.416);
1528
+
--color-neutral: oklch(14% 0.005 285.823);
1529
+
--color-neutral-content: oklch(92% 0.004 286.32);
1530
+
--color-info: oklch(74% 0.16 232.661);
1531
+
--color-info-content: oklch(29% 0.066 243.157);
1532
+
--color-success: oklch(76% 0.177 163.223);
1533
+
--color-success-content: oklch(37% 0.077 168.94);
1534
+
--color-warning: oklch(82% 0.189 84.429);
1535
+
--color-warning-content: oklch(41% 0.112 45.904);
1536
+
--color-error: oklch(71% 0.194 13.428);
1537
+
--color-error-content: oklch(27% 0.105 12.094);
1538
+
--radius-selector: 0.5rem;
1539
+
--radius-field: 0.25rem;
1540
+
--radius-box: 0.5rem;
1541
+
--size-selector: 0.25rem;
1542
+
--size-field: 0.25rem;
1543
+
--border: 1px;
1544
+
--depth: 1;
1545
+
--noise: 0;
1546
+
}
1547
+
}
1548
+
}
1549
+
@layer base {
1550
+
*:has(input.theme-controller[value="light"]:checked),
1551
+
[data-theme="light"] {
1552
+
color-scheme: light;
1553
+
--color-base-100: oklch(100% 0 0);
1554
+
--color-base-200: oklch(98% 0 0);
1555
+
--color-base-300: oklch(95% 0 0);
1556
+
--color-base-content: oklch(21% 0.006 285.885);
1557
+
--color-primary: oklch(45% 0.24 277.023);
1558
+
--color-primary-content: oklch(93% 0.034 272.788);
1559
+
--color-secondary: oklch(65% 0.241 354.308);
1560
+
--color-secondary-content: oklch(94% 0.028 342.258);
1561
+
--color-accent: oklch(77% 0.152 181.912);
1562
+
--color-accent-content: oklch(38% 0.063 188.416);
1563
+
--color-neutral: oklch(14% 0.005 285.823);
1564
+
--color-neutral-content: oklch(92% 0.004 286.32);
1565
+
--color-info: oklch(74% 0.16 232.661);
1566
+
--color-info-content: oklch(29% 0.066 243.157);
1567
+
--color-success: oklch(76% 0.177 163.223);
1568
+
--color-success-content: oklch(37% 0.077 168.94);
1569
+
--color-warning: oklch(82% 0.189 84.429);
1570
+
--color-warning-content: oklch(41% 0.112 45.904);
1571
+
--color-error: oklch(71% 0.194 13.428);
1572
+
--color-error-content: oklch(27% 0.105 12.094);
1573
+
--radius-selector: 0.5rem;
1574
+
--radius-field: 0.25rem;
1575
+
--radius-box: 0.5rem;
1576
+
--size-selector: 0.25rem;
1577
+
--size-field: 0.25rem;
1578
+
--border: 1px;
1579
+
--depth: 1;
1580
+
--noise: 0;
1581
+
}
1582
+
}
1583
+
@layer base {
1584
+
*:has(input.theme-controller[value="dark"]:checked),
1585
+
[data-theme="dark"] {
1586
+
color-scheme: dark;
1587
+
--color-base-100: oklch(25.33% 0.016 252.42);
1588
+
--color-base-200: oklch(23.26% 0.014 253.1);
1589
+
--color-base-300: oklch(21.15% 0.012 254.09);
1590
+
--color-base-content: oklch(97.807% 0.029 256.847);
1591
+
--color-primary: oklch(58% 0.233 277.117);
1592
+
--color-primary-content: oklch(96% 0.018 272.314);
1593
+
--color-secondary: oklch(65% 0.241 354.308);
1594
+
--color-secondary-content: oklch(94% 0.028 342.258);
1595
+
--color-accent: oklch(77% 0.152 181.912);
1596
+
--color-accent-content: oklch(38% 0.063 188.416);
1597
+
--color-neutral: oklch(14% 0.005 285.823);
1598
+
--color-neutral-content: oklch(92% 0.004 286.32);
1599
+
--color-info: oklch(74% 0.16 232.661);
1600
+
--color-info-content: oklch(29% 0.066 243.157);
1601
+
--color-success: oklch(76% 0.177 163.223);
1602
+
--color-success-content: oklch(37% 0.077 168.94);
1603
+
--color-warning: oklch(82% 0.189 84.429);
1604
+
--color-warning-content: oklch(41% 0.112 45.904);
1605
+
--color-error: oklch(71% 0.194 13.428);
1606
+
--color-error-content: oklch(27% 0.105 12.094);
1607
+
--radius-selector: 0.5rem;
1608
+
--radius-field: 0.25rem;
1609
+
--radius-box: 0.5rem;
1610
+
--size-selector: 0.25rem;
1611
+
--size-field: 0.25rem;
1612
+
--border: 1px;
1613
+
--depth: 1;
1614
+
--noise: 0;
1615
+
}
1616
+
}
1617
+
@layer base {
1618
+
* {
1619
+
--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
1620
+
}
1621
+
}
1622
+
@layer base {
1623
+
* {
1624
+
scrollbar-color: currentColor #0000;
1625
+
@supports (color: color-mix(in lab, red, red)) {
1626
+
scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
1627
+
}
1628
+
}
1629
+
}
1630
+
@layer base {
1631
+
@property --radialprogress {
1632
+
syntax: "<percentage>";
1633
+
inherits: true;
1634
+
initial-value: 0%;
1635
+
}
1636
+
}
1637
+
@layer base {
1638
+
*:not(span) {
1639
+
overflow: var(--page-overflow);
1640
+
}
1641
+
}
1642
+
@layer base {
1643
+
* {
1644
+
background: var(--page-scroll-bg, var(--root-bg));
1645
+
--page-scroll-bg-on: linear-gradient(
1646
+
var(--root-bg, #0000),
1647
+
var(--root-bg, #0000)
1648
+
)
1649
+
var(--root-bg, #0000);
1650
+
@supports (color: color-mix(in lab, red, red)) {
1651
+
--page-scroll-bg-on: linear-gradient(
1652
+
var(--root-bg, #0000),
1653
+
var(--root-bg, #0000)
1654
+
)
1655
+
color-mix(
1656
+
in srgb,
1657
+
var(--root-bg, #0000),
1658
+
oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%)
1659
+
);
1660
+
}
1661
+
--page-scroll-transition-on: background-color 0.3s ease-out;
1662
+
transition: var(--page-scroll-transition);
1663
+
scrollbar-gutter: var(--page-scroll-gutter, unset);
1664
+
scrollbar-gutter: if(
1665
+
style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ;
1666
+
else: unset
1667
+
);
1668
+
}
1669
+
@keyframes set-page-has-scroll {
1670
+
0%,
1671
+
to {
1672
+
--page-has-scroll: 1;
1673
+
}
1674
+
}
1675
+
}
1676
+
@layer base {
1677
+
*,
1678
+
[data-theme] {
1679
+
background: var(--page-scroll-bg, var(--root-bg));
1680
+
color: var(--color-base-content);
1681
+
}
1682
+
:where(*, [data-theme]) {
1683
+
--root-bg: var(--color-base-100);
1684
+
}
1685
+
}
1686
+
@keyframes rating {
1687
+
0%,
1688
+
40% {
1689
+
scale: 1.1;
1690
+
filter: brightness(1.05) contrast(1.05);
1691
+
}
1692
+
}
1693
+
@keyframes dropdown {
1694
+
0% {
1695
+
opacity: 0;
1696
+
}
1697
+
}
1698
+
@keyframes radio {
1699
+
0% {
1700
+
padding: 5px;
1701
+
}
1702
+
50% {
1703
+
padding: 3px;
1704
+
}
1705
+
}
1706
+
@keyframes toast {
1707
+
0% {
1708
+
scale: 0.9;
1709
+
opacity: 0;
1710
+
}
1711
+
100% {
1712
+
scale: 1;
1713
+
opacity: 1;
1714
+
}
1715
+
}
1716
+
@keyframes rotator {
1717
+
89.9999%,
1718
+
100% {
1719
+
--first-item-position: 0 0%;
1720
+
}
1721
+
90%,
1722
+
99.9999% {
1723
+
--first-item-position: 0 calc(var(--items) * 100%);
1724
+
}
1725
+
100% {
1726
+
translate: 0 -100%;
1727
+
}
1728
+
}
1729
+
@keyframes skeleton {
1730
+
0% {
1731
+
background-position: 150%;
1732
+
}
1733
+
100% {
1734
+
background-position: -50%;
1735
+
}
1736
+
}
1737
+
@keyframes menu {
1738
+
0% {
1739
+
opacity: 0;
1740
+
}
1741
+
}
1742
+
@keyframes progress {
1743
+
50% {
1744
+
background-position-x: -115%;
1745
+
}
1746
+
}
1747
+
@property --tw-space-y-reverse {
1748
+
syntax: "*";
1749
+
inherits: false;
1750
+
initial-value: 0;
1751
+
}
1752
+
@property --tw-border-style {
1753
+
syntax: "*";
1754
+
inherits: false;
1755
+
initial-value: solid;
1756
+
}
1757
+
@property --tw-font-weight {
1758
+
syntax: "*";
1759
+
inherits: false;
1760
+
}
1761
+
@property --tw-shadow {
1762
+
syntax: "*";
1763
+
inherits: false;
1764
+
initial-value: 0 0 #0000;
1765
+
}
1766
+
@property --tw-shadow-color {
1767
+
syntax: "*";
1768
+
inherits: false;
1769
+
}
1770
+
@property --tw-shadow-alpha {
1771
+
syntax: "<percentage>";
1772
+
inherits: false;
1773
+
initial-value: 100%;
1774
+
}
1775
+
@property --tw-inset-shadow {
1776
+
syntax: "*";
1777
+
inherits: false;
1778
+
initial-value: 0 0 #0000;
1779
+
}
1780
+
@property --tw-inset-shadow-color {
1781
+
syntax: "*";
1782
+
inherits: false;
1783
+
}
1784
+
@property --tw-inset-shadow-alpha {
1785
+
syntax: "<percentage>";
1786
+
inherits: false;
1787
+
initial-value: 100%;
1788
+
}
1789
+
@property --tw-ring-color {
1790
+
syntax: "*";
1791
+
inherits: false;
1792
+
}
1793
+
@property --tw-ring-shadow {
1794
+
syntax: "*";
1795
+
inherits: false;
1796
+
initial-value: 0 0 #0000;
1797
+
}
1798
+
@property --tw-inset-ring-color {
1799
+
syntax: "*";
1800
+
inherits: false;
1801
+
}
1802
+
@property --tw-inset-ring-shadow {
1803
+
syntax: "*";
1804
+
inherits: false;
1805
+
initial-value: 0 0 #0000;
1806
+
}
1807
+
@property --tw-ring-inset {
1808
+
syntax: "*";
1809
+
inherits: false;
1810
+
}
1811
+
@property --tw-ring-offset-width {
1812
+
syntax: "<length>";
1813
+
inherits: false;
1814
+
initial-value: 0px;
1815
+
}
1816
+
@property --tw-ring-offset-color {
1817
+
syntax: "*";
1818
+
inherits: false;
1819
+
initial-value: #fff;
1820
+
}
1821
+
@property --tw-ring-offset-shadow {
1822
+
syntax: "*";
1823
+
inherits: false;
1824
+
initial-value: 0 0 #0000;
1825
+
}
1826
+
@property --tw-outline-style {
1827
+
syntax: "*";
1828
+
inherits: false;
1829
+
initial-value: solid;
1830
+
}
1831
+
@layer properties {
1832
+
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
1833
+
((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
1834
+
*,
1835
+
::before,
1836
+
::after,
1837
+
::backdrop {
1838
+
--tw-space-y-reverse: 0;
1839
+
--tw-border-style: solid;
1840
+
--tw-font-weight: initial;
1841
+
--tw-shadow: 0 0 #0000;
1842
+
--tw-shadow-color: initial;
1843
+
--tw-shadow-alpha: 100%;
1844
+
--tw-inset-shadow: 0 0 #0000;
1845
+
--tw-inset-shadow-color: initial;
1846
+
--tw-inset-shadow-alpha: 100%;
1847
+
--tw-ring-color: initial;
1848
+
--tw-ring-shadow: 0 0 #0000;
1849
+
--tw-inset-ring-color: initial;
1850
+
--tw-inset-ring-shadow: 0 0 #0000;
1851
+
--tw-ring-inset: initial;
1852
+
--tw-ring-offset-width: 0px;
1853
+
--tw-ring-offset-color: #fff;
1854
+
--tw-ring-offset-shadow: 0 0 #0000;
1855
+
--tw-outline-style: solid;
1856
+
}
1857
+
}
1858
+
}
1859
+
}
+86
docs/styling.md
+86
docs/styling.md
···
1
+
# Styling the Chilp widget
2
+
3
+
## With DaisyUI
4
+
5
+
Chilp v2 or newer does not inline it's own CSS, but instead comes with [DaisyUI](https://daisyui.com/)-compatible classes, this means you can optimally have Chilp adapted to your own site's theme.
6
+
7
+
Do note, Tailwind may need to be pointed to the classes Chilp uses, so make sure to either source it on the `./dist` folder AFTER build, or
8
+
```css
9
+
@import "tailwindcss";
10
+
@plugin "daisyui";
11
+
@source "./build/packages/chilp/src/chilp/widget.gleam";
12
+
```
13
+
```
14
+
```
15
+
16
+
Try something like the above. You could of course also point to the `build/dev/javascript`, especially if you work with a path dependency (in which case the `widget.gleam` file won't be in `./build/`).
17
+
18
+
## Styling with OatUI
19
+
20
+
[Oat](https://oat.ink/) is an ultra-lightweight HTML + CSS, semantic UI component library with no framework, build, or other dependencies. OatUI can style most of Chilp out of the box without even including it's javascript. Chilp applies mostly semantic HTML and has some extra attributes added for enhanced compatibility with Oat.
21
+
22
+
Some things that Oat can't style, need a slight bit of manual CSS'ing:
23
+
```css
24
+
.chilp-oat-enhance-hide {
25
+
display: none;
26
+
}
27
+
28
+
.chilp-oat-enhance-inset-2em {
29
+
padding-inline-start: 2em;
30
+
}
31
+
32
+
.chilp-oat-enhance-inset-1em {
33
+
padding-inline-start: 1em;
34
+
}
35
+
36
+
.chilp-oat-enhance-inset-quoteblock {
37
+
border-left: 1px solid;
38
+
padding-inline-start: 1.5em;
39
+
}
40
+
41
+
.chilp-oat-enhance-inset-blueskyreply,
42
+
.chilp-oat-enhance-inset-witchskyreply,
43
+
.chilp-oat-enhance-inset-blackskyreply {
44
+
/* We reset an oat-set value here. */
45
+
gap: unset !important;
46
+
}
47
+
48
+
.chilp-oat-enhance-inset-blueskyreply {
49
+
color: rgb(0, 106, 255);
50
+
background-color: white;
51
+
52
+
&::after {
53
+
content: "luesky";
54
+
}
55
+
}
56
+
57
+
.chilp-oat-enhance-inset-blackskyreply {
58
+
color: white;
59
+
background-color: black;
60
+
61
+
&::after {
62
+
content: "lacksky";
63
+
}
64
+
}
65
+
66
+
.chilp-oat-enhance-inset-witchskyreply {
67
+
color: white;
68
+
background-color: rgb(237, 83, 69);
69
+
70
+
&::after {
71
+
content: "itchsky";
72
+
}
73
+
}
74
+
75
+
```
76
+
77
+
But with this, Oat can fully style Chilp widgets as well!
78
+
79
+
## Vanilla CSS
80
+
81
+
If you'd like to not use DaisyUI or OatUI, styling the widget yourself is very viable, all elements are queryable using css classes.
82
+
83
+
There is also an [example of DaisyUI output](https://tangled.org/strawmelonjuice.com/chilp/blob/main/docs/basic.css) sourced merely off the widget, with no theme or colourscheme information included, this is a 'basic default'.
84
+
You should probably not embed that file. TailwindCSS/DaisyUI normally runs over a whole site and can optimise the css quite well, but because this css is generated purely off one component, it'll be massive if put together with your own styles. It'll contain CSS you won't need. And it won't style well on all sites, as it is scoped to not spill out to your site (`:root` and `:host` are for example removed, and the entire file is scoped to the `comment-widget`-class).
85
+
But you _can_ embed that file if you're just testing out things, and may use it as reference when you write your own CSS for the widget. I bet your CSS will make it look way more awesome!
86
+
+51
examples/lustre_chilp_app/assets/styled-oat.css
+51
examples/lustre_chilp_app/assets/styled-oat.css
···
1
+
@import "https://unpkg.com/@knadh/oat/oat.min.css";
2
+
3
+
.chilp-oat-enhance-hide {
4
+
display: none;
5
+
}
6
+
7
+
.chilp-oat-enhance-inset-2em {
8
+
padding-inline-start: 2em;
9
+
}
10
+
11
+
.chilp-oat-enhance-inset-1em {
12
+
padding-inline-start: 1em;
13
+
}
14
+
15
+
.chilp-oat-enhance-inset-quoteblock {
16
+
border-left: 1px solid;
17
+
padding-inline-start: 1.5em;
18
+
}
19
+
20
+
.chilp-oat-enhance-inset-blueskyreply,
21
+
.chilp-oat-enhance-inset-witchskyreply,
22
+
.chilp-oat-enhance-inset-blackskyreply {
23
+
gap: unset;
24
+
}
25
+
26
+
.chilp-oat-enhance-inset-blueskyreply {
27
+
color: rgb(0, 106, 255);
28
+
background-color: white;
29
+
30
+
&::after {
31
+
content: "luesky";
32
+
}
33
+
}
34
+
35
+
.chilp-oat-enhance-inset-blackskyreply {
36
+
color: white;
37
+
background-color: black;
38
+
39
+
&::after {
40
+
content: "lacksky";
41
+
}
42
+
}
43
+
44
+
.chilp-oat-enhance-inset-witchskyreply {
45
+
color: white;
46
+
background-color: rgb(237, 83, 69);
47
+
48
+
&::after {
49
+
content: "itchsky";
50
+
}
51
+
}
+20
-22
examples/lustre_chilp_app/bun.lock
bun.lock
+20
-22
examples/lustre_chilp_app/bun.lock
bun.lock
···
3
3
"configVersion": 1,
4
4
"workspaces": {
5
5
"": {
6
-
"dependencies": {
7
-
"@tailwindcss/cli": "^4.2.2",
8
-
"tailwindcss": "^4.2.2",
9
-
},
10
6
"devDependencies": {
7
+
"@tailwindcss/cli": "^4.2.2",
11
8
"daisyui": "^5.5.19",
9
+
"tailwindcss": "^4.2.2",
12
10
},
13
11
},
14
12
},
···
51
49
52
50
"@parcel/watcher-win32-x64": ["@parcel/watcher-win32-x64@2.5.6", "", { "os": "win32", "cpu": "x64" }, "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw=="],
53
51
54
-
"@tailwindcss/cli": ["@tailwindcss/cli@4.2.2", "", { "dependencies": { "@parcel/watcher": "^2.5.1", "@tailwindcss/node": "4.2.2", "@tailwindcss/oxide": "4.2.2", "enhanced-resolve": "^5.19.0", "mri": "^1.2.0", "picocolors": "^1.1.1", "tailwindcss": "4.2.2" }, "bin": { "tailwindcss": "dist/index.mjs" } }, "sha512-iJS+8kAFZ8HPqnh0O5DHCLjo4L6dD97DBQEkrhfSO4V96xeefUus2jqsBs1dUMt3OU9Ks4qIkiY0mpL5UW+4LQ=="],
52
+
"@tailwindcss/cli": ["@tailwindcss/cli@4.2.4", "", { "dependencies": { "@parcel/watcher": "^2.5.1", "@tailwindcss/node": "4.2.4", "@tailwindcss/oxide": "4.2.4", "enhanced-resolve": "^5.19.0", "mri": "^1.2.0", "picocolors": "^1.1.1", "tailwindcss": "4.2.4" }, "bin": { "tailwindcss": "dist/index.mjs" } }, "sha512-e87GGhuXxnyQPyA0TS8an/3wNpj+OUmx8u0F4BicYr48TF72032AIu5917rRYaWm7HorXi3GSZ/uG+ohqP6AKA=="],
55
53
56
-
"@tailwindcss/node": ["@tailwindcss/node@4.2.2", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.19.0", "jiti": "^2.6.1", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.2.2" } }, "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA=="],
54
+
"@tailwindcss/node": ["@tailwindcss/node@4.2.4", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.19.0", "jiti": "^2.6.1", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.2.4" } }, "sha512-Ai7+yQPxz3ddrDQzFfBKdHEVBg0w3Zl83jnjuwxnZOsnH9pGn93QHQtpU0p/8rYWxvbFZHneni6p1BSLK4DkGA=="],
57
55
58
-
"@tailwindcss/oxide": ["@tailwindcss/oxide@4.2.2", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.2.2", "@tailwindcss/oxide-darwin-arm64": "4.2.2", "@tailwindcss/oxide-darwin-x64": "4.2.2", "@tailwindcss/oxide-freebsd-x64": "4.2.2", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.2", "@tailwindcss/oxide-linux-arm64-gnu": "4.2.2", "@tailwindcss/oxide-linux-arm64-musl": "4.2.2", "@tailwindcss/oxide-linux-x64-gnu": "4.2.2", "@tailwindcss/oxide-linux-x64-musl": "4.2.2", "@tailwindcss/oxide-wasm32-wasi": "4.2.2", "@tailwindcss/oxide-win32-arm64-msvc": "4.2.2", "@tailwindcss/oxide-win32-x64-msvc": "4.2.2" } }, "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg=="],
56
+
"@tailwindcss/oxide": ["@tailwindcss/oxide@4.2.4", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.2.4", "@tailwindcss/oxide-darwin-arm64": "4.2.4", "@tailwindcss/oxide-darwin-x64": "4.2.4", "@tailwindcss/oxide-freebsd-x64": "4.2.4", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.4", "@tailwindcss/oxide-linux-arm64-gnu": "4.2.4", "@tailwindcss/oxide-linux-arm64-musl": "4.2.4", "@tailwindcss/oxide-linux-x64-gnu": "4.2.4", "@tailwindcss/oxide-linux-x64-musl": "4.2.4", "@tailwindcss/oxide-wasm32-wasi": "4.2.4", "@tailwindcss/oxide-win32-arm64-msvc": "4.2.4", "@tailwindcss/oxide-win32-x64-msvc": "4.2.4" } }, "sha512-9El/iI069DKDSXwTvB9J4BwdO5JhRrOweGaK25taBAvBXyXqJAX+Jqdvs8r8gKpsI/1m0LeJLyQYTf/WLrBT1Q=="],
59
57
60
-
"@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.2.2", "", { "os": "android", "cpu": "arm64" }, "sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg=="],
58
+
"@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.2.4", "", { "os": "android", "cpu": "arm64" }, "sha512-e7MOr1SAn9U8KlZzPi1ZXGZHeC5anY36qjNwmZv9pOJ8E4Q6jmD1vyEHkQFmNOIN7twGPEMXRHmitN4zCMN03g=="],
61
59
62
-
"@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.2.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg=="],
60
+
"@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-tSC/Kbqpz/5/o/C2sG7QvOxAKqyd10bq+ypZNf+9Fi2TvbVbv1zNpcEptcsU7DPROaSbVgUXmrzKhurFvo5eDg=="],
63
61
64
-
"@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.2.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw=="],
62
+
"@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-yPyUXn3yO/ufR6+Kzv0t4fCg2qNr90jxXc5QqBpjlPNd0NqyDXcmQb/6weunH/MEDXW5dhyEi+agTDiqa3WsGg=="],
65
63
66
-
"@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.2.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ=="],
64
+
"@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.2.4", "", { "os": "freebsd", "cpu": "x64" }, "sha512-BoMIB4vMQtZsXdGLVc2z+P9DbETkiopogfWZKbWwM8b/1Vinbs4YcUwo+kM/KeLkX3Ygrf4/PsRndKaYhS8Eiw=="],
67
65
68
-
"@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2", "", { "os": "linux", "cpu": "arm" }, "sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ=="],
66
+
"@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-7pIHBLTHYRAlS7V22JNuTh33yLH4VElwKtB3bwchK/UaKUPpQ0lPQiOWcbm4V3WP2I6fNIJ23vABIvoy2izdwA=="],
69
67
70
-
"@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.2.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw=="],
68
+
"@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-+E4wxJ0ZGOzSH325reXTWB48l42i93kQqMvDyz5gqfRzRZ7faNhnmvlV4EPGJU3QJM/3Ab5jhJ5pCRUsKn6OQw=="],
71
69
72
-
"@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.2.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag=="],
70
+
"@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g=="],
73
71
74
-
"@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.2.2", "", { "os": "linux", "cpu": "x64" }, "sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg=="],
72
+
"@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA=="],
75
73
76
-
"@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.2.2", "", { "os": "linux", "cpu": "x64" }, "sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ=="],
74
+
"@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA=="],
77
75
78
-
"@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.2.2", "", { "dependencies": { "@emnapi/core": "^1.8.1", "@emnapi/runtime": "^1.8.1", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.1.1", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q=="],
76
+
"@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.2.4", "", { "dependencies": { "@emnapi/core": "^1.8.1", "@emnapi/runtime": "^1.8.1", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.1.1", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw=="],
79
77
80
-
"@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.2.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ=="],
78
+
"@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.2.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-L9BXqxC4ToVgwMFqj3pmZRqyHEztulpUJzCxUtLjobMCzTPsGt1Fa9enKbOpY2iIyVtaHNeNvAK8ERP/64sqGQ=="],
81
79
82
-
"@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.2.2", "", { "os": "win32", "cpu": "x64" }, "sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA=="],
80
+
"@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.2.4", "", { "os": "win32", "cpu": "x64" }, "sha512-ESlKG0EpVJQwRjXDDa9rLvhEAh0mhP1sF7sap9dNZT0yyl9SAG6T7gdP09EH0vIv0UNTlo6jPWyujD6559fZvw=="],
83
81
84
82
"daisyui": ["daisyui@5.5.19", "", {}, "sha512-pbFAkl1VCEh/MPCeclKL61I/MqRIFFhNU7yiXoDDRapXN4/qNCoMxeCCswyxEEhqL5eiTTfwHvucFtOE71C9sA=="],
85
83
86
84
"detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
87
85
88
-
"enhanced-resolve": ["enhanced-resolve@5.20.1", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.0" } }, "sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA=="],
86
+
"enhanced-resolve": ["enhanced-resolve@5.21.0", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-otxSQPw4lkOZWkHpB3zaEQs6gWYEsmX4xQF68ElXC/TWvGxGMSGOvoNbaLXm6/cS/fSfHtsEdw90y20PCd+sCA=="],
89
87
90
88
"graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
91
89
···
131
129
132
130
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
133
131
134
-
"tailwindcss": ["tailwindcss@4.2.2", "", {}, "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q=="],
132
+
"tailwindcss": ["tailwindcss@4.2.4", "", {}, "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA=="],
135
133
136
-
"tapable": ["tapable@2.3.2", "", {}, "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA=="],
134
+
"tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
137
135
138
136
"@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" }, "bundled": true }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
139
137
+6
-2
examples/lustre_chilp_app/gleam.toml
+6
-2
examples/lustre_chilp_app/gleam.toml
···
14
14
15
15
[dependencies]
16
16
gleam_stdlib = ">= 0.44.0 and < 2.0.0"
17
-
chilp = {path = "../.."}
17
+
chilp = { path = "../.." }
18
18
lustre = ">= 5.5.2 and < 6.0.0"
19
19
glentities = ">= 6.2.1 and < 7.0.0"
20
20
···
22
22
gleeunit = ">= 1.0.0 and < 2.0.0"
23
23
lustre_dev_tools = ">= 2.3.4 and < 3.0.0"
24
24
25
+
[tools.lustre.dev]
26
+
watch_mode = "none" # Better to restart, as the styles also need to be copied here.
27
+
25
28
[tools.lustre.build]
26
29
no_tailwind = true
27
30
28
31
[tools.lustre.html]
29
-
stylesheets = [{ href = "/styled.css" }]
32
+
stylesheets = [{ href = "/styled-oat.css" }]
33
+
# stylesheets = [{ href = "/styled.css" }]
-9
examples/lustre_chilp_app/package.json
-9
examples/lustre_chilp_app/package.json
-3
examples/lustre_chilp_app/src/input.css
-3
examples/lustre_chilp_app/src/input.css
+1
flake.nix
+1
flake.nix
+3
-2
gleam.toml
+3
-2
gleam.toml
···
1
1
name = "chilp"
2
2
description = "Allows you to use Mastodon and Bluesky comments on your Lustre blog."
3
-
version = "2.0.0-rc4"
3
+
version = "2.0.1-rc"
4
4
gleam = ">= 1.15.0"
5
5
licences = ["Apache-2.0"]
6
6
repository = { type = "tangled", user = "did:plc:jgtfsmv25thfs4zmydtbccnn", repo = "chilp" }
7
7
documentation.pages = [
8
-
{ title = "Changelog", path = "changelog.html", source = "./changelog.md" },
8
+
{ title = "Changelog", path = "changelog.html", source = "./docs/changelog.md" },
9
+
{ title = "Changelog", path = "styling.html", source = "./docs/styling.md" },
9
10
]
10
11
11
12
+20
justfile
+20
justfile
···
1
+
# https://just.systems
2
+
3
+
[private]
4
+
default:
5
+
gleam check
6
+
@just --list
7
+
8
+
generate-basestyles:
9
+
@echo ".comment-widget {" > ./docs/basic.css
10
+
tailwindcss -i ./src/input.css -o ./docs/temp.css --optimise
11
+
sed -i -e 's/:host/*/g' ./docs/temp.css
12
+
sed -i -e 's/:root/*/g' ./docs/temp.css
13
+
cat ./docs/temp.css >> ./docs/basic.css
14
+
rm ./docs/temp.css
15
+
@echo "}" >> ./docs/basic.css
16
+
bunx prettier -w docs/basic.css
17
+
18
+
run-example: generate-basestyles
19
+
cp ./docs/basic.css ./examples/lustre_chilp_app/assets/styled.css
20
+
cd ./examples/lustre_chilp_app/; gleam run -m lustre/dev start
+10
package.json
+10
package.json
+98
-60
src/chilp/widget.gleam
+98
-60
src/chilp/widget.gleam
···
230
230
event.on_click(SetTab(3)),
231
231
attribute.class("absolute right-2 top-1"),
232
232
]
233
-
False, True -> [attribute.class("hidden")]
233
+
False, True -> [
234
+
attribute.class("hidden chilp-oat-enhance-hide"),
235
+
]
234
236
}
235
237
],
236
238
[
···
294
296
attribute.role("tablist"),
295
297
],
296
298
[
297
-
html.a(
299
+
html.button(
298
300
[
299
301
attribute.role("tab"),
300
302
event.on_click(SetTab(1)),
301
303
attribute.classes([
302
304
#("tab", True),
303
-
#("tab-active", model.open_tab == 1),
305
+
#("tab-active outline", model.open_tab == 1),
304
306
]),
305
307
],
306
308
[
307
309
html.text("Mastodon"),
308
310
],
309
311
),
310
-
html.a(
312
+
html.button(
311
313
[
312
314
attribute.role("tab"),
313
315
event.on_click(SetTab(2)),
314
316
attribute.classes([
315
317
#("tab", True),
316
-
#("tab-active", model.open_tab == 2),
318
+
#("tab-active outline", model.open_tab == 2),
317
319
]),
318
320
],
319
321
[html.text("Bluesky")],
···
523
525
use <- bool.guard(when: is_command, return: element.none())
524
526
html.article([attribute.class("comment mt-2")], [
525
527
html.header([attribute.class("flex")], [
526
-
html.img([
527
-
attribute.src(comment.author_avatar_url),
528
-
attribute.class("avatar w-[45px] h-[45px] mask mask-squircle flex-none"),
529
-
attribute.alt("@"),
530
-
]),
528
+
html.figure(
529
+
[
530
+
attribute("aria-label", comment.author_username),
531
+
attribute.class("small"),
532
+
attribute("data-variant", "avatar"),
533
+
],
534
+
[
535
+
html.img([
536
+
attribute.src(comment.author_avatar_url),
537
+
attribute.class(
538
+
"avatar w-[45px] h-[45px] mask mask-squircle flex-none",
539
+
),
540
+
attribute.alt("@"),
541
+
]),
542
+
],
543
+
),
531
544
html.div([attribute.class("meta pl-4 max-h-[45px]")], [
532
-
html.span([attribute.class("display-name")], [
533
-
html.text(comment.displayname),
534
-
case comment.source {
535
-
"Mastodon" ->
536
-
html.div(
537
-
[
538
-
attribute.class(
539
-
"badge badge-sm badge-info ms-2 bg-[#595aff] text-white",
540
-
),
541
-
],
542
-
[
543
-
element.text("Fediverse"),
544
-
],
545
-
)
546
-
"Bluesky" ->
547
-
html.div(
548
-
[
549
-
attribute.class(
550
-
"badge badge-sm badge-info ms-2 bg-[#006aff] text-white",
551
-
),
552
-
],
553
-
[
554
-
element.text("Bluesky"),
555
-
],
556
-
)
557
-
_ -> element.none()
558
-
},
559
-
case is_by_op {
560
-
True ->
561
-
html.div(
562
-
[
563
-
attribute.class("badge badge-sm badge-accent ms-2"),
564
-
],
565
-
[
566
-
element.text("Author"),
567
-
],
568
-
)
569
-
False -> element.none()
570
-
},
571
-
]),
545
+
html.span(
546
+
[attribute.class("display-name chilp-oat-enhance-inset-1em")],
547
+
[
548
+
html.text(comment.displayname),
549
+
case comment.source {
550
+
"Mastodon" ->
551
+
html.div(
552
+
[
553
+
attribute("data-variant", "secondary"),
554
+
attribute.class(
555
+
"badge badge-sm badge-info ms-2 bg-[#595aff] text-white",
556
+
),
557
+
],
558
+
[
559
+
element.text("Fediverse"),
560
+
],
561
+
)
562
+
"Bluesky" ->
563
+
html.div(
564
+
[
565
+
attribute("data-variant", "secondary"),
566
+
attribute.class(
567
+
"badge badge-sm badge-info ms-2 bg-[#006aff] text-white",
568
+
),
569
+
],
570
+
[
571
+
element.text("Bluesky"),
572
+
],
573
+
)
574
+
_ -> element.none()
575
+
},
576
+
case is_by_op {
577
+
True ->
578
+
html.div(
579
+
[
580
+
attribute("data-variant", "outline"),
581
+
attribute.class("badge badge-sm badge-accent ms-2"),
582
+
],
583
+
[
584
+
element.text("Author"),
585
+
],
586
+
)
587
+
False -> element.none()
588
+
},
589
+
],
590
+
),
572
591
html.p([attribute.class("text-xs")], [
573
592
html.a(
574
593
[
···
642
661
html.section(
643
662
[
644
663
attribute.class(
645
-
"pl-5 border-s-4 border-default bg-neutral-secondary-soft",
664
+
"pl-5 border-s-4 border-default bg-neutral-secondary-soft chilp-oat-enhance-inset-2em",
646
665
),
647
666
],
648
667
list.sort(comment.children, sort_comments)
649
-
|> list.map(view_rendered_comment(
650
-
_,
651
-
bsky_op_profile,
652
-
mastodon_op_profile,
653
-
)),
668
+
|> list.map(fn(child) {
669
+
html.div(
670
+
[attribute.class("chilp-oat-enhance-inset-quoteblock")],
671
+
[
672
+
view_rendered_comment(
673
+
child,
674
+
bsky_op_profile,
675
+
mastodon_op_profile,
676
+
),
677
+
],
678
+
)
679
+
}),
654
680
)
655
681
},
656
682
]),
···
686
712
687
713
fn view_respond_on_bsky(bskylink: String) -> Element(Msg) {
688
714
let icon_link = fn(label: String, new_base: String, color_class: String) {
689
-
html.a(
715
+
html.button(
690
716
[
691
717
attribute.href(string.replace(bskylink, "bsky.app", new_base)),
692
718
attribute.target("_blank"),
···
707
733
html.span([attribute.class("text-xs mr-2 opacity-50")], [
708
734
element.text("Open in:"),
709
735
]),
710
-
icon_link("Bluesky", "bsky.app", "text-[#006aff] bg-white"),
711
-
icon_link("Blacksky", "blacksky.community", "text-white bg-black"),
712
-
icon_link("Witchsky", "witchsky.app", "bg-[#ed5345] text-white"),
736
+
icon_link(
737
+
"Bluesky",
738
+
"bsky.app",
739
+
"text-[#006aff] bg-white chilp-oat-enhance-inset-blueskyreply",
740
+
),
741
+
icon_link(
742
+
"Blacksky",
743
+
"blacksky.community",
744
+
"text-white bg-black chilp-oat-enhance-inset-blackskyreply",
745
+
),
746
+
icon_link(
747
+
"Witchsky",
748
+
"witchsky.app",
749
+
"bg-[#ed5345] text-white chilp-oat-enhance-inset-witchskyreply",
750
+
),
713
751
]),
714
752
])
715
753
}