coveragebook_components 0.8.9 → 0.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.css +254 -242
  3. data/app/assets/build/coco/app.js +64 -34
  4. data/app/assets/build/coco/book.css +23 -16
  5. data/app/assets/build/coco/book.js +50 -21
  6. data/app/assets/js/libs/alpine/directives/dropdown.js +5 -2
  7. data/app/components/coco/app/elements/alert/alert.css +1 -1
  8. data/app/components/coco/app/elements/button/button.css +38 -58
  9. data/app/components/coco/app/elements/button/button.rb +2 -3
  10. data/app/components/coco/app/elements/button_group/button_group.css +7 -2
  11. data/app/components/coco/app/elements/button_group/button_group.html.erb +2 -1
  12. data/app/components/coco/app/elements/button_group/button_group.js +28 -14
  13. data/app/components/coco/app/elements/button_to/button_to.css +4 -8
  14. data/app/components/coco/app/elements/color_picker_button/color_picker_button.css +1 -2
  15. data/app/components/coco/app/elements/image_picker_button/image_picker_button.css +1 -2
  16. data/app/components/coco/app/elements/layout_picker_button/layout_picker_button.css +1 -2
  17. data/app/components/coco/app/elements/menu/menu.css +7 -5
  18. data/app/components/coco/app/elements/menu_button/menu_button.css +1 -2
  19. data/app/components/coco/app/elements/snackbar/snackbar.css +3 -3
  20. data/app/components/coco/base/button/button.css +9 -9
  21. data/app/components/coco/base/button/button.html.erb +16 -18
  22. data/app/components/coco/base/button/button.js +6 -18
  23. data/app/components/coco/base/button/button.rb +38 -58
  24. data/app/components/coco/base/button/button_dropdown.js +27 -0
  25. data/lib/coco.rb +1 -1
  26. metadata +3 -6
  27. data/app/assets/build/coco/app.dev.css +0 -5535
  28. data/app/assets/build/coco/app.dev.js +0 -27473
  29. data/app/assets/build/coco/book.dev.css +0 -2009
  30. data/app/assets/build/coco/book.dev.js +0 -15801
@@ -1,2009 +0,0 @@
1
- /*
2
- ! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
3
- *//*
4
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
5
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
6
- */
7
-
8
- *,
9
- ::before,
10
- ::after {
11
- box-sizing: border-box; /* 1 */
12
- border-width: 0; /* 2 */
13
- border-style: solid; /* 2 */
14
- border-color: #E5E7EB; /* 2 */
15
- }
16
-
17
- ::before,
18
- ::after {
19
- --tw-content: '';
20
- }
21
-
22
- /*
23
- 1. Use a consistent sensible line-height in all browsers.
24
- 2. Prevent adjustments of font size after orientation changes in iOS.
25
- 3. Use a more readable tab size.
26
- 4. Use the user's configured `sans` font-family by default.
27
- 5. Use the user's configured `sans` font-feature-settings by default.
28
- 6. Use the user's configured `sans` font-variation-settings by default.
29
- */
30
-
31
- html {
32
- line-height: 1.5; /* 1 */
33
- -webkit-text-size-adjust: 100%; /* 2 */
34
- -moz-tab-size: 4; /* 3 */
35
- -o-tab-size: 4;
36
- tab-size: 4; /* 3 */
37
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
38
- font-feature-settings: normal; /* 5 */
39
- font-variation-settings: normal; /* 6 */
40
- }
41
-
42
- /*
43
- 1. Remove the margin in all browsers.
44
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
45
- */
46
-
47
- body {
48
- margin: 0; /* 1 */
49
- line-height: inherit; /* 2 */
50
- }
51
-
52
- /*
53
- 1. Add the correct height in Firefox.
54
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
55
- 3. Ensure horizontal rules are visible by default.
56
- */
57
-
58
- hr {
59
- height: 0; /* 1 */
60
- color: inherit; /* 2 */
61
- border-top-width: 1px; /* 3 */
62
- }
63
-
64
- /*
65
- Add the correct text decoration in Chrome, Edge, and Safari.
66
- */
67
-
68
- abbr:where([title]) {
69
- -webkit-text-decoration: underline dotted;
70
- text-decoration: underline dotted;
71
- }
72
-
73
- /*
74
- Remove the default font size and weight for headings.
75
- */
76
-
77
- h1,
78
- h2,
79
- h3,
80
- h4,
81
- h5,
82
- h6 {
83
- font-size: inherit;
84
- font-weight: inherit;
85
- }
86
-
87
- /*
88
- Reset links to optimize for opt-in styling instead of opt-out.
89
- */
90
-
91
- a {
92
- color: inherit;
93
- text-decoration: inherit;
94
- }
95
-
96
- /*
97
- Add the correct font weight in Edge and Safari.
98
- */
99
-
100
- b,
101
- strong {
102
- font-weight: bolder;
103
- }
104
-
105
- /*
106
- 1. Use the user's configured `mono` font family by default.
107
- 2. Correct the odd `em` font sizing in all browsers.
108
- */
109
-
110
- code,
111
- kbd,
112
- samp,
113
- pre {
114
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
115
- font-size: 1em; /* 2 */
116
- }
117
-
118
- /*
119
- Add the correct font size in all browsers.
120
- */
121
-
122
- small {
123
- font-size: 80%;
124
- }
125
-
126
- /*
127
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
128
- */
129
-
130
- sub,
131
- sup {
132
- font-size: 75%;
133
- line-height: 0;
134
- position: relative;
135
- vertical-align: baseline;
136
- }
137
-
138
- sub {
139
- bottom: -0.25em;
140
- }
141
-
142
- sup {
143
- top: -0.5em;
144
- }
145
-
146
- /*
147
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
148
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
149
- 3. Remove gaps between table borders by default.
150
- */
151
-
152
- table {
153
- text-indent: 0; /* 1 */
154
- border-color: inherit; /* 2 */
155
- border-collapse: collapse; /* 3 */
156
- }
157
-
158
- /*
159
- 1. Change the font styles in all browsers.
160
- 2. Remove the margin in Firefox and Safari.
161
- 3. Remove default padding in all browsers.
162
- */
163
-
164
- button,
165
- input,
166
- optgroup,
167
- select,
168
- textarea {
169
- font-family: inherit; /* 1 */
170
- font-feature-settings: inherit; /* 1 */
171
- font-variation-settings: inherit; /* 1 */
172
- font-size: 100%; /* 1 */
173
- font-weight: inherit; /* 1 */
174
- line-height: inherit; /* 1 */
175
- color: inherit; /* 1 */
176
- margin: 0; /* 2 */
177
- padding: 0; /* 3 */
178
- }
179
-
180
- /*
181
- Remove the inheritance of text transform in Edge and Firefox.
182
- */
183
-
184
- button,
185
- select {
186
- text-transform: none;
187
- }
188
-
189
- /*
190
- 1. Correct the inability to style clickable types in iOS and Safari.
191
- 2. Remove default button styles.
192
- */
193
-
194
- button,
195
- [type='button'],
196
- [type='reset'],
197
- [type='submit'] {
198
- -webkit-appearance: button; /* 1 */
199
- background-color: transparent; /* 2 */
200
- background-image: none; /* 2 */
201
- }
202
-
203
- /*
204
- Use the modern Firefox focus style for all focusable elements.
205
- */
206
-
207
- :-moz-focusring {
208
- outline: auto;
209
- }
210
-
211
- /*
212
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
213
- */
214
-
215
- :-moz-ui-invalid {
216
- box-shadow: none;
217
- }
218
-
219
- /*
220
- Add the correct vertical alignment in Chrome and Firefox.
221
- */
222
-
223
- progress {
224
- vertical-align: baseline;
225
- }
226
-
227
- /*
228
- Correct the cursor style of increment and decrement buttons in Safari.
229
- */
230
-
231
- ::-webkit-inner-spin-button,
232
- ::-webkit-outer-spin-button {
233
- height: auto;
234
- }
235
-
236
- /*
237
- 1. Correct the odd appearance in Chrome and Safari.
238
- 2. Correct the outline style in Safari.
239
- */
240
-
241
- [type='search'] {
242
- -webkit-appearance: textfield; /* 1 */
243
- outline-offset: -2px; /* 2 */
244
- }
245
-
246
- /*
247
- Remove the inner padding in Chrome and Safari on macOS.
248
- */
249
-
250
- ::-webkit-search-decoration {
251
- -webkit-appearance: none;
252
- }
253
-
254
- /*
255
- 1. Correct the inability to style clickable types in iOS and Safari.
256
- 2. Change font properties to `inherit` in Safari.
257
- */
258
-
259
- ::-webkit-file-upload-button {
260
- -webkit-appearance: button; /* 1 */
261
- font: inherit; /* 2 */
262
- }
263
-
264
- /*
265
- Add the correct display in Chrome and Safari.
266
- */
267
-
268
- summary {
269
- display: list-item;
270
- }
271
-
272
- /*
273
- Removes the default spacing and border for appropriate elements.
274
- */
275
-
276
- blockquote,
277
- dl,
278
- dd,
279
- h1,
280
- h2,
281
- h3,
282
- h4,
283
- h5,
284
- h6,
285
- hr,
286
- figure,
287
- p,
288
- pre {
289
- margin: 0;
290
- }
291
-
292
- fieldset {
293
- margin: 0;
294
- padding: 0;
295
- }
296
-
297
- legend {
298
- padding: 0;
299
- }
300
-
301
- ol,
302
- ul,
303
- menu {
304
- list-style: none;
305
- margin: 0;
306
- padding: 0;
307
- }
308
-
309
- /*
310
- Reset default styling for dialogs.
311
- */
312
- dialog {
313
- padding: 0;
314
- }
315
-
316
- /*
317
- Prevent resizing textareas horizontally by default.
318
- */
319
-
320
- textarea {
321
- resize: vertical;
322
- }
323
-
324
- /*
325
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
326
- 2. Set the default placeholder color to the user's configured gray 400 color.
327
- */
328
-
329
- input::-moz-placeholder, textarea::-moz-placeholder {
330
- opacity: 1; /* 1 */
331
- color: #9CA3AF; /* 2 */
332
- }
333
-
334
- input::placeholder,
335
- textarea::placeholder {
336
- opacity: 1; /* 1 */
337
- color: #9CA3AF; /* 2 */
338
- }
339
-
340
- /*
341
- Set the default cursor for buttons.
342
- */
343
-
344
- button,
345
- [role="button"] {
346
- cursor: pointer;
347
- }
348
-
349
- /*
350
- Make sure disabled buttons don't get the pointer cursor.
351
- */
352
- :disabled {
353
- cursor: default;
354
- }
355
-
356
- /*
357
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
358
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
359
- This can trigger a poorly considered lint error in some tools but is included by design.
360
- */
361
-
362
- img,
363
- svg,
364
- video,
365
- canvas,
366
- audio,
367
- iframe,
368
- embed,
369
- object {
370
- display: block; /* 1 */
371
- vertical-align: middle; /* 2 */
372
- }
373
-
374
- /*
375
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
376
- */
377
-
378
- img,
379
- video {
380
- max-width: 100%;
381
- height: auto;
382
- }
383
-
384
- /* Make elements with the HTML hidden attribute stay hidden by default */
385
- [hidden] {
386
- display: none;
387
- }
388
-
389
- [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
390
- -webkit-appearance: none;
391
- -moz-appearance: none;
392
- appearance: none;
393
- background-color: #fff;
394
- border-color: #6B7280;
395
- border-width: 1px;
396
- border-radius: 0px;
397
- padding-top: 0.5rem;
398
- padding-right: 0.75rem;
399
- padding-bottom: 0.5rem;
400
- padding-left: 0.75rem;
401
- font-size: 1rem;
402
- line-height: 1.5rem;
403
- --tw-shadow: 0 0 #0000;
404
- }
405
-
406
- [type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
407
- outline: 2px solid transparent;
408
- outline-offset: 2px;
409
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
410
- --tw-ring-offset-width: 0px;
411
- --tw-ring-offset-color: #fff;
412
- --tw-ring-color: #0284C7;
413
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
414
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
415
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
416
- border-color: #0284C7;
417
- }
418
-
419
- input::-moz-placeholder, textarea::-moz-placeholder {
420
- color: #6B7280;
421
- opacity: 1;
422
- }
423
-
424
- input::placeholder,textarea::placeholder {
425
- color: #6B7280;
426
- opacity: 1;
427
- }
428
-
429
- ::-webkit-datetime-edit-fields-wrapper {
430
- padding: 0;
431
- }
432
-
433
- ::-webkit-date-and-time-value {
434
- min-height: 1.5em;
435
- text-align: inherit;
436
- }
437
-
438
- ::-webkit-datetime-edit {
439
- display: inline-flex;
440
- }
441
-
442
- ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
443
- padding-top: 0;
444
- padding-bottom: 0;
445
- }
446
-
447
- select {
448
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
449
- background-position: right 0.5rem center;
450
- background-repeat: no-repeat;
451
- background-size: 1.5em 1.5em;
452
- padding-right: 2.5rem;
453
- -webkit-print-color-adjust: exact;
454
- print-color-adjust: exact;
455
- }
456
-
457
- [multiple],[size]:where(select:not([size="1"])) {
458
- background-image: initial;
459
- background-position: initial;
460
- background-repeat: unset;
461
- background-size: initial;
462
- padding-right: 0.75rem;
463
- -webkit-print-color-adjust: unset;
464
- print-color-adjust: unset;
465
- }
466
-
467
- [type='checkbox'],[type='radio'] {
468
- -webkit-appearance: none;
469
- -moz-appearance: none;
470
- appearance: none;
471
- padding: 0;
472
- -webkit-print-color-adjust: exact;
473
- print-color-adjust: exact;
474
- display: inline-block;
475
- vertical-align: middle;
476
- background-origin: border-box;
477
- -webkit-user-select: none;
478
- -moz-user-select: none;
479
- user-select: none;
480
- flex-shrink: 0;
481
- height: 1rem;
482
- width: 1rem;
483
- color: #0284C7;
484
- background-color: #fff;
485
- border-color: #6B7280;
486
- border-width: 1px;
487
- --tw-shadow: 0 0 #0000;
488
- }
489
-
490
- [type='checkbox'] {
491
- border-radius: 0px;
492
- }
493
-
494
- [type='radio'] {
495
- border-radius: 100%;
496
- }
497
-
498
- [type='checkbox']:focus,[type='radio']:focus {
499
- outline: 2px solid transparent;
500
- outline-offset: 2px;
501
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
502
- --tw-ring-offset-width: 2px;
503
- --tw-ring-offset-color: #fff;
504
- --tw-ring-color: #0284C7;
505
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
506
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
507
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
508
- }
509
-
510
- [type='checkbox']:checked,[type='radio']:checked {
511
- border-color: transparent;
512
- background-color: currentColor;
513
- background-size: 100% 100%;
514
- background-position: center;
515
- background-repeat: no-repeat;
516
- }
517
-
518
- [type='checkbox']:checked {
519
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
520
- }
521
-
522
- [type='radio']:checked {
523
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
524
- }
525
-
526
- [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
527
- border-color: transparent;
528
- background-color: currentColor;
529
- }
530
-
531
- [type='checkbox']:indeterminate {
532
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
533
- border-color: transparent;
534
- background-color: currentColor;
535
- background-size: 100% 100%;
536
- background-position: center;
537
- background-repeat: no-repeat;
538
- }
539
-
540
- [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
541
- border-color: transparent;
542
- background-color: currentColor;
543
- }
544
-
545
- [type='file'] {
546
- background: unset;
547
- border-color: inherit;
548
- border-width: 0;
549
- border-radius: 0;
550
- padding: 0;
551
- font-size: unset;
552
- line-height: inherit;
553
- }
554
-
555
- [type='file']:focus {
556
- outline: 1px solid ButtonText;
557
- outline: 1px auto -webkit-focus-ring-color;
558
- }
559
- :root {
560
- --app-height: 100%;
561
- }
562
-
563
- html {
564
- scroll-behavior: smooth;
565
- font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
566
- --tw-text-opacity: 1;
567
- color: rgb(17 24 39 / var(--tw-text-opacity));
568
- }
569
-
570
- @media (prefers-reduced-motion: no-preference) {
571
-
572
- html {
573
- scroll-behavior: auto;
574
- }
575
- }
576
-
577
- a {
578
- color: currentColor;
579
- text-decoration-line: underline;
580
- text-underline-offset: 2px;
581
- }
582
-
583
- [x-cloak] {
584
- display: none !important;
585
- }
586
-
587
- *, ::before, ::after {
588
- --tw-border-spacing-x: 0;
589
- --tw-border-spacing-y: 0;
590
- --tw-translate-x: 0;
591
- --tw-translate-y: 0;
592
- --tw-rotate: 0;
593
- --tw-skew-x: 0;
594
- --tw-skew-y: 0;
595
- --tw-scale-x: 1;
596
- --tw-scale-y: 1;
597
- --tw-pan-x: ;
598
- --tw-pan-y: ;
599
- --tw-pinch-zoom: ;
600
- --tw-scroll-snap-strictness: proximity;
601
- --tw-gradient-from-position: ;
602
- --tw-gradient-via-position: ;
603
- --tw-gradient-to-position: ;
604
- --tw-ordinal: ;
605
- --tw-slashed-zero: ;
606
- --tw-numeric-figure: ;
607
- --tw-numeric-spacing: ;
608
- --tw-numeric-fraction: ;
609
- --tw-ring-inset: ;
610
- --tw-ring-offset-width: 0px;
611
- --tw-ring-offset-color: #fff;
612
- --tw-ring-color: rgb(14 165 233 / 0.5);
613
- --tw-ring-offset-shadow: 0 0 #0000;
614
- --tw-ring-shadow: 0 0 #0000;
615
- --tw-shadow: 0 0 #0000;
616
- --tw-shadow-colored: 0 0 #0000;
617
- --tw-blur: ;
618
- --tw-brightness: ;
619
- --tw-contrast: ;
620
- --tw-grayscale: ;
621
- --tw-hue-rotate: ;
622
- --tw-invert: ;
623
- --tw-saturate: ;
624
- --tw-sepia: ;
625
- --tw-drop-shadow: ;
626
- --tw-backdrop-blur: ;
627
- --tw-backdrop-brightness: ;
628
- --tw-backdrop-contrast: ;
629
- --tw-backdrop-grayscale: ;
630
- --tw-backdrop-hue-rotate: ;
631
- --tw-backdrop-invert: ;
632
- --tw-backdrop-opacity: ;
633
- --tw-backdrop-saturate: ;
634
- --tw-backdrop-sepia: ;
635
- }
636
-
637
- ::backdrop {
638
- --tw-border-spacing-x: 0;
639
- --tw-border-spacing-y: 0;
640
- --tw-translate-x: 0;
641
- --tw-translate-y: 0;
642
- --tw-rotate: 0;
643
- --tw-skew-x: 0;
644
- --tw-skew-y: 0;
645
- --tw-scale-x: 1;
646
- --tw-scale-y: 1;
647
- --tw-pan-x: ;
648
- --tw-pan-y: ;
649
- --tw-pinch-zoom: ;
650
- --tw-scroll-snap-strictness: proximity;
651
- --tw-gradient-from-position: ;
652
- --tw-gradient-via-position: ;
653
- --tw-gradient-to-position: ;
654
- --tw-ordinal: ;
655
- --tw-slashed-zero: ;
656
- --tw-numeric-figure: ;
657
- --tw-numeric-spacing: ;
658
- --tw-numeric-fraction: ;
659
- --tw-ring-inset: ;
660
- --tw-ring-offset-width: 0px;
661
- --tw-ring-offset-color: #fff;
662
- --tw-ring-color: rgb(14 165 233 / 0.5);
663
- --tw-ring-offset-shadow: 0 0 #0000;
664
- --tw-ring-shadow: 0 0 #0000;
665
- --tw-shadow: 0 0 #0000;
666
- --tw-shadow-colored: 0 0 #0000;
667
- --tw-blur: ;
668
- --tw-brightness: ;
669
- --tw-contrast: ;
670
- --tw-grayscale: ;
671
- --tw-hue-rotate: ;
672
- --tw-invert: ;
673
- --tw-saturate: ;
674
- --tw-sepia: ;
675
- --tw-drop-shadow: ;
676
- --tw-backdrop-blur: ;
677
- --tw-backdrop-brightness: ;
678
- --tw-backdrop-contrast: ;
679
- --tw-backdrop-grayscale: ;
680
- --tw-backdrop-hue-rotate: ;
681
- --tw-backdrop-invert: ;
682
- --tw-backdrop-opacity: ;
683
- --tw-backdrop-saturate: ;
684
- --tw-backdrop-sepia: ;
685
- }
686
- [data-tippy-root] {
687
- z-index: 10010 !important;
688
- }
689
- .tippy-box[data-theme^="coco-"] {
690
- white-space: normal;
691
- background-color: transparent;
692
- font-size: 16px;
693
- line-height: 20px;
694
- --tw-text-opacity: 1;
695
- color: rgb(17 24 39 / var(--tw-text-opacity));
696
- }
697
- .tippy-box[data-theme^="coco-"] .tippy-content {
698
- padding: 0px;
699
- }
700
- /* arrow border */
701
- .tippy-box[data-theme^="coco-"] .tippy-svg-arrow > svg:first-child {
702
- fill: transparent;
703
- }
704
- /* arrow background */
705
- .tippy-box[data-theme^="coco-"] .tippy-svg-arrow > svg:last-child {
706
- fill: transparent;
707
- }
708
- /* Tooltip theme */
709
- .tippy-box[data-theme~="coco-tooltip"] {
710
- border-radius: 0.5rem;
711
- --tw-bg-opacity: 1;
712
- background-color: rgb(31 41 55 / var(--tw-bg-opacity));
713
- font-size: 14px;
714
- line-height: 16px;
715
- --tw-text-opacity: 1;
716
- color: rgb(255 255 255 / var(--tw-text-opacity));
717
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
718
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
719
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
720
- }
721
- .tippy-box[data-theme~="coco-tooltip"] .tippy-content {
722
- max-width: 240px;
723
- overflow: hidden;
724
- text-overflow: ellipsis;
725
- white-space: nowrap;
726
- padding-left: 0.75rem;
727
- padding-right: 0.75rem;
728
- padding-top: 0.5rem;
729
- padding-bottom: 0.5rem;
730
- }
731
- /* arrow background */
732
- .tippy-box[data-theme~="coco-tooltip"] .tippy-svg-arrow > svg:first-child {
733
- display: none;
734
- }
735
- .tippy-box[data-theme~="coco-tooltip"] .tippy-svg-arrow > svg:last-child {
736
- fill: #111827;
737
- }
738
- [x-dropdown] [x-dropdown\:content] {
739
- display: none;
740
- }
741
- [data-coco] {
742
- font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
743
- --tw-text-opacity: 1;
744
- color: rgb(17 24 39 / var(--tw-text-opacity));
745
- }
746
- [data-coco] h1,
747
- [data-coco] h2,
748
- [data-coco] h3,
749
- [data-coco] h4,
750
- [data-coco] h5,
751
- [data-coco] h6 {
752
- font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
753
- }
754
- [data-coco][data-component="avatar"] {
755
- display: block;
756
- flex: none;
757
- overflow: hidden;
758
- border-radius: 9999px;
759
- }
760
- [data-coco][data-component="avatar"] img {
761
- width: 100%;
762
- border-radius: 9999px;
763
- }
764
- [data-coco][data-component="avatar"][data-size="sm"] {
765
- height: 1.25rem;
766
- width: 1.25rem;
767
- }
768
- [data-coco][data-component="avatar"][data-size="md"] {
769
- height: 1.5rem;
770
- width: 1.5rem;
771
- }
772
- [data-coco][data-component="avatar"][data-size="lg"] {
773
- height: 1.75rem;
774
- width: 1.75rem;
775
- }
776
- [data-coco][data-component="avatar"][data-size="xl"] {
777
- height: 2rem;
778
- width: 2rem;
779
- }
780
- [data-coco].coco-button {
781
- display: flex;
782
- width: auto;
783
- flex: none;
784
- -webkit-user-select: none;
785
- -moz-user-select: none;
786
- user-select: none;
787
- border-width: 1px;
788
- border-color: transparent;
789
- background-color: transparent;
790
- color: currentColor;
791
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
792
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
793
- transition-duration: 150ms;
794
- width: -moz-min-content;
795
- width: min-content;
796
- }
797
- [data-coco].coco-button .button-element {
798
- display: inline-flex;
799
- width: 100%;
800
- text-decoration-line: none;
801
- outline: 2px solid transparent;
802
- outline-offset: 2px;
803
- }
804
- [data-coco].coco-button .button-element:focus-visible {
805
- outline-width: 0px;
806
- }
807
- [data-coco].coco-button .button-inner {
808
- margin-left: auto;
809
- margin-right: auto;
810
- display: inline-flex;
811
- align-items: center;
812
- gap: 0.5rem;
813
- text-align: center;
814
- width: -moz-fit-content;
815
- width: fit-content;
816
- }
817
- [data-coco].coco-button .button-content {
818
- position: relative;
819
- order: 2;
820
- display: inline-flex;
821
- align-items: center;
822
- white-space: nowrap;
823
- line-height: 1;
824
- }
825
- [data-coco].coco-button .button-state-content {
826
- display: contents;
827
- }
828
- [data-coco].coco-button .button-icon {
829
- order: 1;
830
- display: inline-flex;
831
- align-items: center;
832
- }
833
- [data-coco].coco-button .button-dropdown {
834
- display: contents;
835
- border-radius: 0.375rem;
836
- }
837
- [data-coco].coco-button .button-toggle {
838
- order: 3;
839
- }
840
- /* disabled */
841
- [data-coco].coco-button[data-disabled="true"] .button-element {
842
- pointer-events: none;
843
- cursor: not-allowed;
844
- }
845
- /* loading */
846
- @keyframes spin {
847
-
848
- to {
849
- transform: rotate(360deg);
850
- }
851
- }
852
- [data-coco].coco-button[data-state="loading"] > .button-element .button-icon {
853
- animation: spin 1.5s linear infinite;
854
- }
855
- /* Fit */
856
- [data-coco].coco-button[data-fit="full"] {
857
- width: 100%;
858
- }
859
- /* Icons */
860
- [data-coco].coco-button[data-icon-position="end"] > .button-element .button-content {
861
- order: 1;
862
- }
863
- [data-coco].coco-button[data-icon-position="end"] > .button-element .button-icon {
864
- order: 2;
865
- }
866
- [data-coco].coco-button[data-icon-position="end"] > .button-element .button-toggle {
867
- order: 3;
868
- }
869
- [data-coco].coco-button.with-icon[data-collapsed="true"] > .button-element .button-content {
870
- display: none;
871
- }
872
- [data-coco][data-component="dropdown"] {
873
- width: -moz-fit-content;
874
- width: fit-content;
875
- }
876
- [data-coco][data-component="dropdown"] .dropdown-trigger {
877
- cursor: pointer;
878
- width: -moz-fit-content;
879
- width: fit-content;
880
- }
881
- @supports (aspect-ratio: 1 / 1) {
882
-
883
- [data-coco][data-component="youtube-embed"] {
884
- aspect-ratio: 16/9;
885
- }
886
- }
887
- @supports not (aspect-ratio: 1 / 1) {
888
-
889
- [data-coco][data-component="youtube-embed"]::before {
890
- content: "";
891
- float: left;
892
- padding-top: calc(100% / (16/9));
893
- }
894
-
895
- [data-coco][data-component="youtube-embed"]::after {
896
- clear: left;
897
- content: "";
898
- display: block;
899
- }
900
- }
901
- [data-coco][data-component="youtube-embed"] iframe {
902
- height: 100%;
903
- width: 100%;
904
- }
905
- [data-coco][data-component="icon"] {
906
- display: flex;
907
- height: 1.5rem;
908
- width: 1.5rem;
909
- flex: none;
910
- overflow: hidden;
911
- color: currentColor;
912
- }
913
- [data-coco][data-component="icon"] svg {
914
- height: 100%;
915
- width: 100%;
916
- }
917
- /* Styles */
918
- [data-coco][data-component="icon"][data-icon]:not([data-style="fill"]):not([data-style="custom"]) svg {
919
- fill: none;
920
- stroke: currentColor;
921
- stroke-width: 2;
922
- color: currentColor;
923
- stroke-linecap: round;
924
- stroke-linejoin: round;
925
- }
926
- [data-coco][data-component="icon"][data-icon][data-style="fill"] svg {
927
- fill: currentColor;
928
- color: currentColor;
929
- stroke-linecap: round;
930
- stroke-linejoin: round;
931
- }
932
- /* Sizes */
933
- [data-coco][data-component="icon"][data-size="xs"] {
934
- height: 0.75rem;
935
- width: 0.75rem;
936
- }
937
- [data-coco][data-component="icon"][data-size="sm"] {
938
- height: 1rem;
939
- width: 1rem;
940
- }
941
- [data-coco][data-component="icon"][data-size="md"] {
942
- height: 1.25rem;
943
- width: 1.25rem;
944
- }
945
- [data-coco][data-component="icon"][data-size="lg"] {
946
- height: 1.5rem;
947
- width: 1.5rem;
948
- }
949
- [data-coco][data-component="icon"][data-size="xl"] {
950
- height: 2rem;
951
- width: 2rem;
952
- }
953
- [data-coco][data-component="icon"][data-size="xxl"] {
954
- height: 2.5rem;
955
- width: 2.5rem;
956
- }
957
- [data-coco][data-component="icon"][data-size="full"] {
958
- height: 100%;
959
- width: 100%;
960
- }
961
- /* Motion */
962
- @keyframes spin {
963
-
964
- to {
965
- transform: rotate(360deg);
966
- }
967
- }
968
- [data-coco][data-component="icon"][data-spin="true"] svg {
969
- animation: spin 1.5s linear infinite;
970
- }
971
- @keyframes spin {
972
-
973
- to {
974
- transform: rotate(360deg);
975
- }
976
- }
977
- [data-coco][data-component="icon"][data-spin="reverse"] svg {
978
- animation: spin 1.5s linear infinite reverse;
979
- }
980
- [data-coco][data-component="image"] {
981
- display: block;
982
- max-width: 100%;
983
- }
984
- [data-coco][data-component="image-uploader"] {
985
- display: contents;
986
- }
987
- [data-coco][data-component="image-uploader"][data-click="true"] {
988
- cursor: pointer;
989
- }
990
- [data-coco][data-component="image-uploader"] .uploader-input {
991
- display: none;
992
- }
993
- [data-coco].coco-link {
994
- display: inline-flex;
995
- align-items: center;
996
- }
997
- [data-coco].coco-link.with-icon > [data-component="icon"] {
998
- order: 1;
999
- margin-right: 0.4em;
1000
- }
1001
- [data-coco].coco-link.with-icon .link-text {
1002
- order: 2;
1003
- }
1004
- [data-coco].coco-link.with-icon[data-icon-position="end"] .link-text {
1005
- order: 1;
1006
- margin-right: 0.4em;
1007
- }
1008
- [data-coco].coco-link.with-icon[data-icon-position="end"] [data-component="icon"] {
1009
- order: 2;
1010
- margin-right: 0px;
1011
- }
1012
- [data-coco][data-component="modal"] {
1013
- position: fixed;
1014
- inset: 0px;
1015
- z-index: 10000;
1016
- overflow-y: auto;
1017
- scroll-behavior: smooth;
1018
- }
1019
- [data-coco][data-component="modal"] .modal-overlay {
1020
- position: fixed;
1021
- inset: 0px;
1022
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1023
- --tw-bg-opacity: 0.6;
1024
- }
1025
- [data-coco][data-component="modal"] .modal-container {
1026
- position: relative;
1027
- z-index: 10000;
1028
- display: flex;
1029
- align-items: center;
1030
- justify-content: center;
1031
- padding: 0.5rem;
1032
- }
1033
- @media (min-width: 576px) {
1034
-
1035
- [data-coco][data-component="modal"] .modal-container {
1036
- padding: 2rem;
1037
- }
1038
- }
1039
- [data-coco][data-component="modal"] .modal-container {
1040
- min-height: var(--app-height);
1041
- }
1042
- [data-coco][data-component="modal"] .modal-content {
1043
- display: contents;
1044
- }
1045
- /* transitions */
1046
- [data-coco][data-component="modal"] .modal-overlay.overlay-enter {
1047
- transition-duration: 200ms;
1048
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1049
- }
1050
- [data-coco][data-component="modal"] .modal-overlay.overlay-enter-start {
1051
- opacity: 0;
1052
- }
1053
- [data-coco][data-component="modal"] .modal-overlay.overlay-enter-end {
1054
- opacity: 1;
1055
- }
1056
- [data-coco][data-component="modal"] .modal-overlay.overlay-leave {
1057
- transition-duration: 150ms;
1058
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
1059
- }
1060
- [data-coco][data-component="modal"] .modal-overlay.overlay-leave-start {
1061
- opacity: 1;
1062
- }
1063
- [data-coco][data-component="modal"] .modal-overlay.overlay-leave-end {
1064
- opacity: 0;
1065
- }
1066
- [data-coco][data-component="modal"] .modal-container.container-enter {
1067
- transition-duration: 400ms;
1068
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1069
- }
1070
- [data-coco][data-component="modal"] .modal-container.container-enter-start {
1071
- --tw-translate-y: 1rem;
1072
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1073
- opacity: 0;
1074
- }
1075
- @media (min-width: 576px) {
1076
-
1077
- [data-coco][data-component="modal"] .modal-container.container-enter-start {
1078
- --tw-translate-y: 0px;
1079
- --tw-scale-x: .95;
1080
- --tw-scale-y: .95;
1081
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1082
- }
1083
- }
1084
- [data-coco][data-component="modal"] .modal-container.container-enter-end {
1085
- --tw-translate-y: 0px;
1086
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1087
- opacity: 1;
1088
- }
1089
- @media (min-width: 576px) {
1090
-
1091
- [data-coco][data-component="modal"] .modal-container.container-enter-end {
1092
- --tw-scale-x: 1;
1093
- --tw-scale-y: 1;
1094
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1095
- }
1096
- }
1097
- [data-coco][data-component="modal"] .modal-container.container-leave {
1098
- transition-duration: 150ms;
1099
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
1100
- }
1101
- [data-coco][data-component="modal"] .modal-container.container-leave-start {
1102
- --tw-translate-y: 0px;
1103
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1104
- opacity: 1;
1105
- }
1106
- @media (min-width: 576px) {
1107
-
1108
- [data-coco][data-component="modal"] .modal-container.container-leave-start {
1109
- --tw-scale-x: 1;
1110
- --tw-scale-y: 1;
1111
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1112
- }
1113
- }
1114
- [data-coco][data-component="modal"] .modal-container.container-leave-end {
1115
- --tw-translate-y: 1rem;
1116
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1117
- opacity: 0;
1118
- }
1119
- @media (min-width: 576px) {
1120
-
1121
- [data-coco][data-component="modal"] .modal-container.container-leave-end {
1122
- --tw-translate-y: 0px;
1123
- --tw-scale-x: .95;
1124
- --tw-scale-y: .95;
1125
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1126
- }
1127
- }
1128
- .modal-frame {
1129
- display: contents;
1130
- }
1131
- /*
1132
- Limit the size of modal content when rendered in the
1133
- host page rather than displayed as a modal.
1134
- */
1135
- [data-role="inline-modal-content"] {
1136
- margin-left: auto;
1137
- margin-right: auto;
1138
- max-width: 42rem;
1139
- }
1140
- [data-role="inline-modal-content"] [data-component="modal-dialog"] {
1141
- border-radius: 0.75rem;
1142
- border-width: 1px;
1143
- --tw-border-opacity: 1;
1144
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1145
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1146
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1147
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1148
- }
1149
- [data-coco][data-component="modal-dialog"] {
1150
- width: 100%;
1151
- border-radius: 0.75rem;
1152
- }
1153
- .modal-frame [data-coco][data-component="modal-dialog"] {
1154
- --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1155
- --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1156
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1157
- max-width: 42rem; /* temp until sizes added */
1158
- }
1159
- [data-coco][data-component="modal-dialog"] .modal-dialog-header {
1160
- position: relative;
1161
- display: flex;
1162
- align-items: center;
1163
- height: 3.5rem;
1164
- border-top-left-radius: 0.75rem;
1165
- border-top-right-radius: 0.75rem;
1166
- border-bottom-width: 1px;
1167
- --tw-border-opacity: 1;
1168
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1169
- --tw-bg-opacity: 1;
1170
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1171
- padding-left: 1rem;
1172
- padding-right: 1rem;
1173
- }
1174
- @media (min-width: 576px) {
1175
-
1176
- [data-coco][data-component="modal-dialog"] .modal-dialog-header {
1177
- height: 4rem;
1178
- padding-left: 2rem;
1179
- padding-right: 2rem;
1180
- }
1181
- }
1182
- [data-coco][data-component="modal-dialog"] .modal-dialog-title {
1183
- width: 100%;
1184
- overflow: hidden;
1185
- text-overflow: ellipsis;
1186
- white-space: nowrap;
1187
- padding-right: 1.5rem;
1188
- font-size: 1.125rem;
1189
- line-height: 1.75rem;
1190
- font-weight: 700;
1191
- }
1192
- [data-coco][data-component="modal-dialog"] .modal-dialog-close {
1193
- position: absolute;
1194
- top: 50%;
1195
- right: 0.25rem;
1196
- display: block;
1197
- flex: none;
1198
- --tw-translate-y: -50%;
1199
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1200
- padding: 0.5rem;
1201
- }
1202
- @media (min-width: 576px) {
1203
-
1204
- [data-coco][data-component="modal-dialog"] .modal-dialog-close {
1205
- right: 0.75rem;
1206
- }
1207
- }
1208
- [data-coco][data-component="modal-dialog"] .modal-dialog-close {
1209
- --tw-text-opacity: 1;
1210
- color: rgb(156 163 175 / var(--tw-text-opacity));
1211
- }
1212
- [data-coco][data-component="modal-dialog"] .modal-dialog-close:hover {
1213
- --tw-text-opacity: 1;
1214
- color: rgb(31 41 55 / var(--tw-text-opacity));
1215
- }
1216
- [data-coco][data-component="modal-dialog"] .modal-dialog-close:focus {
1217
- outline: 2px solid transparent;
1218
- outline-offset: 2px;
1219
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1220
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1221
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1222
- }
1223
- [data-coco][data-component="modal-dialog"] .modal-dialog-content {
1224
- border-radius: 0.75rem;
1225
- --tw-bg-opacity: 1;
1226
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1227
- padding-left: 1rem;
1228
- padding-right: 1rem;
1229
- padding-top: 1rem;
1230
- padding-bottom: 1rem;
1231
- }
1232
- @media (min-width: 576px) {
1233
-
1234
- [data-coco][data-component="modal-dialog"] .modal-dialog-content {
1235
- padding-left: 2rem;
1236
- padding-right: 2rem;
1237
- padding-top: 1.5rem;
1238
- padding-bottom: 1.5rem;
1239
- }
1240
- }
1241
- [data-coco][data-component="modal-dialog"] .modal-dialog-header + .modal-dialog-content {
1242
- border-top-left-radius: 0px;
1243
- border-top-right-radius: 0px;
1244
- }
1245
- [data-coco][data-component="modal-lightbox"] {
1246
- position: relative;
1247
- width: -moz-fit-content;
1248
- width: fit-content;
1249
- }
1250
- [data-coco][data-component="modal-lightbox"] .modal-lightbox-close {
1251
- position: absolute;
1252
- right: -0.375rem;
1253
- top: -0.375rem;
1254
- z-index: 20;
1255
- flex: none;
1256
- border-radius: 9999px;
1257
- padding: 0.5rem;
1258
- transition-property: all;
1259
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1260
- transition-duration: 150ms;
1261
- }
1262
- @media (min-width: 576px) {
1263
-
1264
- [data-coco][data-component="modal-lightbox"] .modal-lightbox-close {
1265
- right: -1rem;
1266
- top: -1rem;
1267
- }
1268
- }
1269
- [data-coco][data-component="modal-lightbox"] .modal-lightbox-close {
1270
- --tw-bg-opacity: 1;
1271
- background-color: rgb(17 24 39 / var(--tw-bg-opacity));
1272
- --tw-text-opacity: 1;
1273
- color: rgb(255 255 255 / var(--tw-text-opacity));
1274
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1275
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1276
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1277
- }
1278
- [data-coco][data-component="modal-lightbox"] .modal-lightbox-close:focus {
1279
- outline: 2px solid transparent;
1280
- outline-offset: 2px;
1281
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1282
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1283
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1284
- }
1285
- [data-coco][data-component="modal-lightbox"] .modal-lightbox-content {
1286
- position: relative;
1287
- min-height: 100px;
1288
- min-width: 100px;
1289
- overflow: hidden;
1290
- border-radius: 0.75rem;
1291
- width: -moz-fit-content;
1292
- width: fit-content;
1293
- }
1294
- [data-coco][data-component="modal-lightbox"] .modal-lightbox-loader {
1295
- position: absolute;
1296
- inset: 0px;
1297
- display: flex;
1298
- align-items: center;
1299
- justify-content: center;
1300
- background-color: rgb(0 0 0 / 0.6);
1301
- --tw-text-opacity: 1;
1302
- color: rgb(255 255 255 / var(--tw-text-opacity));
1303
- opacity: 0.7;
1304
- }
1305
- [data-coco][data-component="modal-lightbox"] .modal-lightbox-media {
1306
- position: relative;
1307
- z-index: 10;
1308
- }
1309
- [data-coco][data-component="modal-lightbox"] .modal-lightbox-media img {
1310
- width: 100%;
1311
- }
1312
- [data-coco][data-component="modal-lightbox"].\!loaded .modal-lightbox-content {
1313
- --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1314
- --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1315
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1316
- }
1317
- [data-coco][data-component="modal-lightbox"].loaded .modal-lightbox-content {
1318
- --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1319
- --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1320
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1321
- }
1322
- [data-coco][data-component="pager-link"] {
1323
- display: block;
1324
- --tw-scale-x: .75;
1325
- --tw-scale-y: .75;
1326
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1327
- background-color: rgb(55 65 81 / var(--tw-bg-opacity));
1328
- --tw-bg-opacity: 0.4;
1329
- padding-top: 0.625rem;
1330
- padding-bottom: 0.625rem;
1331
- padding-left: 0.25rem;
1332
- padding-right: 0.25rem;
1333
- transition-property: all;
1334
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1335
- transition-duration: 150ms;
1336
- }
1337
- [data-coco][data-component="pager-link"]:hover {
1338
- --tw-scale-x: 1;
1339
- --tw-scale-y: 1;
1340
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1341
- --tw-bg-opacity: 0.6;
1342
- }
1343
- @media (min-width: 992px) {
1344
-
1345
- [data-coco][data-component="pager-link"] {
1346
- --tw-scale-x: 1;
1347
- --tw-scale-y: 1;
1348
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1349
- }
1350
-
1351
- [data-coco][data-component="pager-link"]:hover {
1352
- --tw-scale-x: 1.25;
1353
- --tw-scale-y: 1.25;
1354
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1355
- }
1356
- }
1357
- [data-coco][data-component="pager-link"] {
1358
- width: -moz-min-content;
1359
- width: min-content;
1360
- }
1361
- [data-coco][data-component="pager-link"] .coco-icon {
1362
- position: relative;
1363
- --tw-text-opacity: 1;
1364
- color: rgb(255 255 255 / var(--tw-text-opacity));
1365
- }
1366
- [data-coco][data-component="pager-link"][data-direction="previous"] {
1367
- transform-origin: left;
1368
- border-top-right-radius: 0.375rem;
1369
- border-bottom-right-radius: 0.375rem;
1370
- }
1371
- [data-coco][data-component="pager-link"][data-direction="previous"] .coco-icon {
1372
- margin-left: -0.25rem;
1373
- }
1374
- [data-coco][data-component="pager-link"][data-direction="next"] {
1375
- transform-origin: right;
1376
- border-top-left-radius: 0.375rem;
1377
- border-bottom-left-radius: 0.375rem;
1378
- }
1379
- [data-coco][data-component="pager-link"][data-direction="next"] .coco-icon {
1380
- margin-right: -0.25rem;
1381
- }
1382
- [data-coco][data-component="panel"] {
1383
- display: contents;
1384
- }
1385
- [data-coco][data-component="panel"] .panel-content {
1386
- display: contents;
1387
- }
1388
- /* Only style Coco panels that are not rendered inside legacy panel components */
1389
- [data-coco][data-component="panel"]:not([data-component="panel"] [data-component="panel"]) {
1390
- display: block;
1391
- border-radius: 0.75rem;
1392
- border-width: 1px;
1393
- --tw-border-opacity: 1;
1394
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1395
- --tw-bg-opacity: 1;
1396
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1397
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1398
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1399
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1400
- }
1401
- [data-coco][data-component="panel"]:not([data-component="panel"] [data-component="panel"]) .panel-content {
1402
- display: block;
1403
- padding: max(min(5%, 2rem), 1rem);
1404
- }
1405
- [data-coco][data-component="placeholder"] {
1406
- padding: 1rem;
1407
- }
1408
- [data-coco][data-component="placeholder"][data-boxed="true"] {
1409
- border-width: 1px;
1410
- border-style: dashed;
1411
- --tw-border-opacity: 1;
1412
- border-color: rgb(156 163 175 / var(--tw-border-opacity));
1413
- --tw-bg-opacity: 1;
1414
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1415
- }
1416
- [data-coco][data-component="placeholder"][data-prose="true"] .placeholder-content > :not([hidden]) ~ :not([hidden]) {
1417
- --tw-space-y-reverse: 0;
1418
- margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
1419
- margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
1420
- }
1421
- [data-coco][data-component="placeholder"][data-prose="false"] {
1422
- text-align: center;
1423
- }
1424
- [data-coco][data-component="placeholder"][data-size="full"] {
1425
- height: 100%;
1426
- width: 100%;
1427
- }
1428
- [data-coco][data-component="placeholder"][data-size="full"] .placeholder-inner {
1429
- display: flex;
1430
- height: 100%;
1431
- width: 100%;
1432
- align-items: center;
1433
- justify-content: center;
1434
- }
1435
- [data-coco][data-component="placeholder"][data-size="full"] .placeholder-content {
1436
- margin: auto;
1437
- }
1438
- [data-coco][data-component="poll-controller"] {
1439
- display: contents;
1440
- }
1441
- [data-coco][data-component="book-editable-slide"] {
1442
- /*
1443
- * slide-padding-lg at max (1480px): 240px (16.2%)
1444
- * slide-padding-lg at min (320px): 16.2% x 320px = 52px
1445
- */
1446
- --slide-padding-lg: clamp(52px, 16.2cqw, 240px);
1447
-
1448
- /*
1449
- * slide-padding-md at max (1480px): 120px (8.1%)
1450
- * slide-padding-md at min (320px): 8.1% x 320px = 26px
1451
- */
1452
- --slide-padding-md: clamp(26px, 8.1cqw, 120px);
1453
-
1454
- /*
1455
- * slide-padding-sm at max (1480px): 80px (5.4%)
1456
- * slide-padding-sm at min (320px): 5.4% x 320px = 17px
1457
- */
1458
- --slide-padding-sm: max(24px, clamp(17px, 5.4cqw, 80px));
1459
-
1460
- /* Visually-adjusted small padding size for grid gap and header spacing */
1461
- --slide-padding-sm-internal: max(20px, clamp(16px, 4.9cqw, 72px));
1462
-
1463
- /*
1464
- * Small title font size at max (1480px): 64px (4.3%)
1465
- * Small title font size at min (320px): 4.3% x 320px = 13.8px
1466
- */
1467
- --title-font-size: max(
1468
- 32px,
1469
- clamp(13.8px, 4.3cqw, 64px)
1470
- );
1471
-
1472
- /*
1473
- * Text font size at max (1480px): 24px / 1.62%
1474
- * Text font size at min (320px): 1.62% x 320px = 5.2px
1475
- */
1476
- --text-font-size: max(12px, clamp(6.1px, 1.86cqw, 28px));
1477
-
1478
- /* ------------- */
1479
-
1480
- position: relative;
1481
-
1482
- border-radius: 0.375rem;
1483
-
1484
- container-type: inline-size;
1485
-
1486
- --tw-bg-opacity: 1;
1487
-
1488
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1489
-
1490
- background-size: cover;
1491
-
1492
- background-position: center;
1493
-
1494
- background-repeat: no-repeat;
1495
-
1496
- min-width: 320px;
1497
- }
1498
- [data-coco][data-component="book-editable-slide"] .slide-aspect {
1499
- display: grid;
1500
- min-height: 62.5cqw;
1501
- grid-template-columns: repeat(1, minmax(0, 1fr));
1502
- grid-template-rows: repeat(1, minmax(0, 1fr));
1503
- }
1504
- @container (min-width: 700px) {
1505
-
1506
- @supports (aspect-ratio: 1 / 1) {
1507
-
1508
- [data-coco][data-component="book-editable-slide"] .slide-aspect {
1509
- aspect-ratio: 16 / 10;
1510
- }
1511
- }
1512
-
1513
- @supports not (aspect-ratio: 1 / 1) {
1514
-
1515
- [data-coco][data-component="book-editable-slide"] .slide-aspect::before {
1516
- content: "";
1517
- float: left;
1518
- padding-top: calc(100% / (16 / 10));
1519
- }
1520
-
1521
- [data-coco][data-component="book-editable-slide"] .slide-aspect::after {
1522
- clear: left;
1523
- content: "";
1524
- display: block;
1525
- }
1526
- }
1527
- }
1528
- [data-coco][data-component="book-editable-slide"] .slide-container {
1529
- overflow: hidden;
1530
- }
1531
- @container (min-width: 700px) {
1532
-
1533
- [data-coco][data-component="book-editable-slide"] .slide-container {
1534
- position: absolute;
1535
- inset: 0px;
1536
- }
1537
- }
1538
- [data-coco][data-component="book-editable-slide"] .slide-container {
1539
- padding-left: 1.5rem;
1540
- padding-right: 1.5rem;
1541
- padding-top: 2.5rem;
1542
- padding-bottom: 2.5rem;
1543
- }
1544
- @container (min-width: 700px) {
1545
-
1546
- [data-coco][data-component="book-editable-slide"] .slide-container {
1547
- padding-left: var(--slide-padding-md);
1548
- padding-right: var(--slide-padding-md);
1549
- padding-top: var(--slide-padding-md);
1550
- padding-bottom: var(--slide-padding-md);
1551
- }
1552
- }
1553
- [data-coco][data-component="book-editable-slide"] .slide-layout {
1554
- height: 100%;
1555
- width: 100%;
1556
- }
1557
- @container (min-width: 700px) {
1558
-
1559
- [data-coco][data-component="book-editable-slide"] .slide-layout {
1560
- display: grid;
1561
- }
1562
- }
1563
- [data-coco][data-component="book-editable-slide"] .slide-header,
1564
- [data-coco][data-component="book-editable-slide"] .slide-text,
1565
- [data-coco][data-component="book-editable-slide"] .slide-media {
1566
- display: none;
1567
- }
1568
- [data-coco][data-component="book-editable-slide"] .slide-group {
1569
- display: contents;
1570
- }
1571
- [data-coco][data-component="book-editable-slide"] .slide-header {
1572
- width: 100%;
1573
- }
1574
- [data-coco][data-component="book-editable-slide"] .slide-title {
1575
- width: 100%;
1576
- font-weight: 700;
1577
- color: currentColor;
1578
- overflow-wrap: anywhere;
1579
- line-height: 1.1;
1580
- font-size: var(--title-font-size);
1581
- }
1582
- [data-coco][data-component="book-editable-slide"] .slide-text {
1583
- width: 100%;
1584
- overflow: hidden;
1585
- font-size: 1rem;
1586
- line-height: 1.5rem;
1587
- color: currentColor;
1588
- line-height: 1.5;
1589
- }
1590
- [data-coco][data-component="book-editable-slide"] .slide-media {
1591
- position: relative;
1592
- width: 100%;
1593
- font-size: 1rem;
1594
- line-height: 1.5rem;
1595
- color: currentColor;
1596
- }
1597
- @container (min-width: 700px) {
1598
- [data-coco][data-component="book-editable-slide"] .slide-text,
1599
- [data-coco][data-component="book-editable-slide"] .slide-media {
1600
- font-size: var(--text-font-size);
1601
- }
1602
- [data-coco][data-component="book-editable-slide"] .slide-media-wrapper {
1603
- position: absolute;
1604
- inset: 0px;
1605
- height: 100%;
1606
- width: 100%;
1607
- }
1608
- }
1609
- [data-coco][data-component="book-editable-slide"] .slide-media-wrapper img {
1610
- height: 100%;
1611
- width: 100%;
1612
- -o-object-fit: contain;
1613
- object-fit: contain;
1614
- -o-object-position: center;
1615
- object-position: center;
1616
- }
1617
- /* layouts */
1618
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] {
1619
- /*
1620
- * Title font size at max (1480px): 80px (5.4%)
1621
- * Title font size at min (320px): 5.4% x 320px = 17px
1622
- */
1623
- --title-font-size: max(
1624
- 38px,
1625
- clamp(17px, 5.4cqw, 80px)
1626
- );
1627
-
1628
- /*
1629
- * Text font size at max (1480px): 32px / 2.16%
1630
- * Text font size at min (320px): 2.16% x 320px = 7px
1631
- */
1632
- --text-font-size: max(
1633
- 15px,
1634
- clamp(7px, 2.16cqw, 32px)
1635
- );
1636
- }
1637
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-container {
1638
- padding-top: 3rem;
1639
- padding-bottom: 3rem;
1640
- }
1641
- @container (min-width: 700px) {
1642
-
1643
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-container {
1644
- padding-left: var(--slide-padding-lg);
1645
- padding-right: var(--slide-padding-lg);
1646
- padding-top: var(--slide-padding-md);
1647
- padding-bottom: var(--slide-padding-md);
1648
- }
1649
- }
1650
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-layout {
1651
- margin-left: auto;
1652
- margin-right: auto;
1653
- max-width: 475px;
1654
- }
1655
- @container (min-width: 700px) {
1656
-
1657
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-layout {
1658
- max-width: 100%;
1659
- }
1660
- }
1661
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-layout {
1662
- grid-template-areas: "content";
1663
- }
1664
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] [data-role="group-primary-text"] {
1665
- display: flex;
1666
- height: 100%;
1667
- flex-direction: column;
1668
- align-items: center;
1669
- justify-content: center;
1670
- text-align: center;
1671
- grid-area: content;
1672
- }
1673
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] [data-role="header"],
1674
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] [data-role="text-primary"] {
1675
- display: block;
1676
- }
1677
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-text {
1678
- line-height: 1.4;
1679
- }
1680
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"].with-title .slide-text {
1681
- margin-top: 0.875em;
1682
- }
1683
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
1684
- padding-top: 2.5rem;
1685
- padding-bottom: 2.5rem;
1686
- }
1687
- @container (min-width: 700px) {
1688
-
1689
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
1690
- padding-top: var(--slide-padding-sm);
1691
- padding-bottom: var(--slide-padding-sm);
1692
- }
1693
-
1694
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-layout {
1695
- padding-top: 4.8cqw;
1696
- padding-bottom: 4.8cqw;
1697
- }
1698
- }
1699
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-layout {
1700
- grid-template-areas: "content";
1701
- grid-template-rows: auto;
1702
- }
1703
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"].with-title .slide-layout {
1704
- padding-top: 0px;
1705
- padding-bottom: 0px;
1706
- grid-template-areas:
1707
- "header"
1708
- "content";
1709
- grid-template-rows: min-content auto;
1710
- grid-gap: var(--slide-padding-sm-internal);
1711
- }
1712
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-role="header"],
1713
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-role="text-primary"] {
1714
- display: block;
1715
- }
1716
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-role="header"] {
1717
- grid-area: header;
1718
- margin-bottom: 1.25rem;
1719
- }
1720
- @container (min-width: 700px) {
1721
-
1722
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-role="header"] {
1723
- margin-bottom: 0px;
1724
- }
1725
- }
1726
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-role="text-primary"] {
1727
- grid-area: content;
1728
- }
1729
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container {
1730
- padding: 1.5rem;
1731
- }
1732
- @container (min-width: 700px) {
1733
-
1734
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container {
1735
- padding: var(--slide-padding-sm);
1736
- }
1737
- }
1738
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-layout {
1739
- grid-template-areas: "content";
1740
- grid-template-rows: 100%;
1741
- }
1742
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] [data-role="media-primary"] {
1743
- display: block;
1744
- height: 100%;
1745
- grid-area: content;
1746
- }
1747
- [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-media-wrapper {
1748
- height: 100%;
1749
- }
1750
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-container {
1751
- padding-top: 2.5rem;
1752
- padding-bottom: 2.5rem;
1753
- }
1754
- @container (min-width: 700px) {
1755
-
1756
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-container {
1757
- padding: var(--slide-padding-md);
1758
- }
1759
- }
1760
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] .slide-layout {
1761
- grid-template-areas: "text media";
1762
- grid-template-rows: 100%;
1763
- grid-template-columns: 1fr 1fr;
1764
- grid-gap: var(--slide-padding-sm-internal);
1765
- }
1766
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="header"],
1767
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="text-primary"],
1768
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="media-primary"],
1769
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="group-primary-text"] {
1770
- display: block;
1771
- }
1772
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="group-primary-text"] {
1773
- grid-area: text;
1774
- }
1775
- @container (min-width: 700px) {
1776
-
1777
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="group-primary-text"] {
1778
- display: flex;
1779
- height: 100%;
1780
- flex-direction: column;
1781
- justify-content: center;
1782
- }
1783
- }
1784
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="media-primary"] {
1785
- margin-top: 1.5rem;
1786
- }
1787
- @container (min-width: 700px) {
1788
-
1789
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="media-primary"] {
1790
- margin-top: 0px;
1791
- }
1792
- }
1793
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"] [data-role="media-primary"] {
1794
- grid-area: media;
1795
- }
1796
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-mixed"].with-title .slide-text {
1797
- margin-top: 0.875em;
1798
- }
1799
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-container {
1800
- padding-top: 2.5rem;
1801
- padding-bottom: 2.5rem;
1802
- }
1803
- @container (min-width: 700px) {
1804
-
1805
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-container {
1806
- padding: var(--slide-padding-sm);
1807
- }
1808
-
1809
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-layout {
1810
- padding-top: 4.8cqw;
1811
- padding-bottom: 4.8cqw;
1812
- }
1813
- }
1814
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-layout {
1815
- grid-template-areas: "primary secondary";
1816
- grid-template-rows: auto;
1817
- grid-template-columns: 1fr 1fr;
1818
- grid-gap: var(--slide-padding-sm-internal);
1819
- }
1820
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"].with-title .slide-layout {
1821
- padding-top: 0px;
1822
- padding-bottom: 0px;
1823
- grid-template-areas:
1824
- "header header"
1825
- "primary secondary";
1826
- grid-template-rows: min-content auto;
1827
- }
1828
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="header"],
1829
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-primary"],
1830
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-secondary"] {
1831
- display: block;
1832
- }
1833
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="header"] {
1834
- grid-area: header;
1835
- }
1836
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-primary"] {
1837
- grid-area: primary;
1838
- }
1839
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-secondary"] {
1840
- grid-area: secondary;
1841
- }
1842
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-header,
1843
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-primary"] {
1844
- margin-bottom: 1.5rem;
1845
- }
1846
- @container (min-width: 700px) {
1847
-
1848
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-header,
1849
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-role="text-primary"] {
1850
- margin-bottom: 0px;
1851
- }
1852
- }
1853
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-container {
1854
- padding-top: 2.5rem;
1855
- padding-bottom: 2.5rem;
1856
- }
1857
- @container (min-width: 700px) {
1858
-
1859
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-container {
1860
- padding: var(--slide-padding-sm);
1861
- }
1862
-
1863
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout {
1864
- padding-top: 4.8cqw;
1865
- padding-bottom: 4.8cqw;
1866
- }
1867
- }
1868
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout {
1869
- grid-template-areas: "primary secondary";
1870
- grid-template-rows: auto;
1871
- grid-template-columns: 1fr 1fr;
1872
- grid-gap: var(--slide-padding-sm-internal);
1873
- }
1874
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"].with-title .slide-layout {
1875
- padding-top: 0px;
1876
- padding-bottom: 0px;
1877
- grid-template-areas:
1878
- "header header"
1879
- "primary secondary";
1880
- grid-template-rows: min-content auto;
1881
- }
1882
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="header"],
1883
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-primary"],
1884
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-secondary"] {
1885
- display: block;
1886
- }
1887
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="header"] {
1888
- grid-area: header;
1889
- }
1890
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-primary"] {
1891
- grid-area: primary;
1892
- }
1893
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-secondary"] {
1894
- grid-area: secondary;
1895
- }
1896
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-header,
1897
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-primary"] {
1898
- margin-bottom: 1.5rem;
1899
- }
1900
- @container (min-width: 700px) {
1901
-
1902
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-header,
1903
- [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-role="media-primary"] {
1904
- margin-bottom: 0px;
1905
- }
1906
- }
1907
- [data-coco][data-component="book-media-slide"] img {
1908
- height: 100%;
1909
- width: 100%;
1910
- border-radius: 0.375rem;
1911
- -o-object-fit: contain;
1912
- object-fit: contain;
1913
- }
1914
- .visible {
1915
- visibility: visible;
1916
- }
1917
- .static {
1918
- position: static;
1919
- }
1920
- .fixed {
1921
- position: fixed;
1922
- }
1923
- .\!block {
1924
- display: block !important;
1925
- }
1926
- .block {
1927
- display: block;
1928
- }
1929
- .flex {
1930
- display: flex;
1931
- }
1932
- .grid {
1933
- display: grid;
1934
- }
1935
- .contents {
1936
- display: contents;
1937
- }
1938
- .hidden {
1939
- display: none;
1940
- }
1941
- .resize {
1942
- resize: both;
1943
- }
1944
- .italic {
1945
- font-style: italic;
1946
- }
1947
- .\!text-red-500 {
1948
- --tw-text-opacity: 1 !important;
1949
- color: rgb(239 68 68 / var(--tw-text-opacity)) !important;
1950
- }
1951
- .text-amber-500 {
1952
- --tw-text-opacity: 1;
1953
- color: rgb(245 158 11 / var(--tw-text-opacity));
1954
- }
1955
- .text-red-500 {
1956
- --tw-text-opacity: 1;
1957
- color: rgb(239 68 68 / var(--tw-text-opacity));
1958
- }
1959
- .text-teal-500 {
1960
- --tw-text-opacity: 1;
1961
- color: rgb(20 184 166 / var(--tw-text-opacity));
1962
- }
1963
- .underline {
1964
- text-decoration-line: underline;
1965
- }
1966
- .filter {
1967
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1968
- }
1969
- /* Transparent gray blend-mode background utilities */
1970
- .\!icon {
1971
- }
1972
- .icon {
1973
- }
1974
- .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
1975
- [data-tippy-root]{max-width:calc(100vw - 10px)}
1976
- .tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}
1977
- .tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}
1978
- .tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}
1979
- .tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}
1980
- .tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}
1981
- .tippy-box[data-placement^=left]>.tippy-arrow{right:0}
1982
- .tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}
1983
- .tippy-box[data-placement^=right]>.tippy-arrow{left:0}
1984
- .tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}
1985
- .tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}
1986
- .tippy-arrow{width:16px;height:16px;color:#333}
1987
- .tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}
1988
- .tippy-content{position:relative;padding:5px 9px;z-index:1}
1989
- .tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}
1990
- .tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}
1991
- .tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}
1992
- .tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}
1993
- .tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}
1994
- .tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}
1995
- .tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}
1996
- .tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}
1997
- .tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}
1998
- .tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}
1999
- .tippy-box{border:1px transparent}
2000
- .tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}
2001
- .tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}
2002
- .tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}
2003
- .tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}
2004
- .tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}
2005
- .tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}
2006
- .tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}
2007
- .tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}
2008
- .tippy-arrow{border-color:inherit}
2009
- .tippy-arrow:after{content:"";z-index:-1;position:absolute;border-color:transparent;border-style:solid}