@niagads/ui 0.2.5-alpha.0 → 1.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/README.md +20 -20
  2. package/package.json +3 -3
  3. package/dist/Alert.js +0 -2
  4. package/dist/Alert.js.map +0 -1
  5. package/dist/Button.js +0 -2
  6. package/dist/Button.js.map +0 -1
  7. package/dist/Card.js +0 -2
  8. package/dist/Card.js.map +0 -1
  9. package/dist/Checkbox.js +0 -2
  10. package/dist/Checkbox.js.map +0 -1
  11. package/dist/Common/dist/utils.js +0 -2
  12. package/dist/Common/dist/utils.js.map +0 -1
  13. package/dist/Navigation.js +0 -2
  14. package/dist/Navigation.js.map +0 -1
  15. package/dist/RadioButton.js +0 -2
  16. package/dist/RadioButton.js.map +0 -1
  17. package/dist/Select.js +0 -2
  18. package/dist/Select.js.map +0 -1
  19. package/dist/Skeleton.js +0 -2
  20. package/dist/Skeleton.js.map +0 -1
  21. package/dist/TextInput.js +0 -2
  22. package/dist/TextInput.js.map +0 -1
  23. package/dist/client/Dropdown.js +0 -2
  24. package/dist/client/Dropdown.js.map +0 -1
  25. package/dist/client/HelpIcon.js +0 -2
  26. package/dist/client/HelpIcon.js.map +0 -1
  27. package/dist/client/Slider.js +0 -2
  28. package/dist/client/Slider.js.map +0 -1
  29. package/dist/client/Tabs.js +0 -2
  30. package/dist/client/Tabs.js.map +0 -1
  31. package/dist/client/Tooltip.js +0 -2
  32. package/dist/client/Tooltip.js.map +0 -1
  33. package/dist/client/index.d.ts +0 -63
  34. package/dist/client/index.js +0 -2
  35. package/dist/client/index.js.map +0 -1
  36. package/dist/index.d.ts +0 -100
  37. package/dist/index.js +0 -2
  38. package/dist/index.js.map +0 -1
  39. package/dist/layouts/RootLayout.js +0 -2
  40. package/dist/layouts/RootLayout.js.map +0 -1
  41. package/dist/layouts/index.d.ts +0 -28
  42. package/dist/layouts/index.js +0 -2
  43. package/dist/layouts/index.js.map +0 -1
  44. package/dist/niagads-ui.css +0 -1539
  45. package/dist/niagads-ui.css.map +0 -1
@@ -1,1539 +0,0 @@
1
- /*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
2
- @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
3
- @layer theme, base, components, utilities;
4
- @layer theme {
5
- :root, :host {
6
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
- "Courier New", monospace;
10
- --color-red-50: oklch(0.971 0.013 17.38);
11
- --color-red-300: oklch(0.808 0.114 19.571);
12
- --color-red-400: oklch(0.704 0.191 22.216);
13
- --color-red-800: oklch(0.444 0.177 26.899);
14
- --color-red-950: oklch(0.258 0.092 26.042);
15
- --color-yellow-50: oklch(0.987 0.026 102.212);
16
- --color-yellow-300: oklch(0.905 0.182 98.111);
17
- --color-yellow-800: oklch(0.476 0.114 61.907);
18
- --color-green-50: oklch(0.982 0.018 155.826);
19
- --color-green-300: oklch(0.871 0.15 154.449);
20
- --color-green-400: oklch(0.792 0.209 151.711);
21
- --color-green-800: oklch(0.448 0.119 151.328);
22
- --color-blue-50: oklch(0.97 0.014 254.604);
23
- --color-blue-300: oklch(0.809 0.105 251.813);
24
- --color-blue-400: oklch(0.707 0.165 254.624);
25
- --color-blue-500: oklch(0.623 0.214 259.815);
26
- --color-blue-700: oklch(0.488 0.243 264.376);
27
- --color-blue-800: oklch(0.424 0.199 265.638);
28
- --color-purple-900: oklch(0.381 0.176 304.987);
29
- --color-pink-500: oklch(0.656 0.241 354.308);
30
- --color-slate-50: oklch(0.984 0.003 247.858);
31
- --color-slate-300: oklch(0.869 0.022 252.894);
32
- --color-slate-500: oklch(0.554 0.046 257.417);
33
- --color-gray-50: oklch(0.985 0.002 247.839);
34
- --color-gray-100: oklch(0.967 0.003 264.542);
35
- --color-gray-200: oklch(0.928 0.006 264.531);
36
- --color-gray-300: oklch(0.872 0.01 258.338);
37
- --color-gray-400: oklch(0.707 0.022 261.325);
38
- --color-gray-500: oklch(0.551 0.027 264.364);
39
- --color-gray-600: oklch(0.446 0.03 256.802);
40
- --color-gray-700: oklch(0.373 0.034 259.733);
41
- --color-gray-800: oklch(0.278 0.033 256.848);
42
- --color-gray-900: oklch(0.21 0.034 264.665);
43
- --color-neutral-200: oklch(0.922 0 0);
44
- --color-neutral-500: oklch(0.556 0 0);
45
- --color-black: #000;
46
- --color-white: #fff;
47
- --spacing: 0.25rem;
48
- --breakpoint-xl: 80rem;
49
- --container-sm: 24rem;
50
- --text-xs: 0.75rem;
51
- --text-xs--line-height: calc(1 / 0.75);
52
- --text-sm: 0.875rem;
53
- --text-sm--line-height: calc(1.25 / 0.875);
54
- --text-base: 1rem;
55
- --text-base--line-height: calc(1.5 / 1);
56
- --text-lg: 1.125rem;
57
- --text-lg--line-height: calc(1.75 / 1.125);
58
- --text-2xl: 1.5rem;
59
- --text-2xl--line-height: calc(2 / 1.5);
60
- --font-weight-normal: 400;
61
- --font-weight-medium: 500;
62
- --font-weight-semibold: 600;
63
- --font-weight-bold: 700;
64
- --tracking-tight: -0.025em;
65
- --radius-sm: 0.25rem;
66
- --radius-md: 0.375rem;
67
- --radius-lg: 0.5rem;
68
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
69
- --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
70
- --default-transition-duration: 150ms;
71
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
72
- --default-font-family: var(--font-sans);
73
- --default-mono-font-family: var(--font-mono);
74
- --color-primary: #3d5263;
75
- --color-secondary: #f9c664;
76
- --color-accent: #618eb5;
77
- --color-accent-dark: #27333f;
78
- }
79
- }
80
- @layer base {
81
- *, ::after, ::before, ::backdrop, ::file-selector-button {
82
- box-sizing: border-box;
83
- margin: 0;
84
- padding: 0;
85
- border: 0 solid;
86
- }
87
- html, :host {
88
- line-height: 1.5;
89
- -webkit-text-size-adjust: 100%;
90
- tab-size: 4;
91
- font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
92
- font-feature-settings: var(--default-font-feature-settings, normal);
93
- font-variation-settings: var(--default-font-variation-settings, normal);
94
- -webkit-tap-highlight-color: transparent;
95
- }
96
- hr {
97
- height: 0;
98
- color: inherit;
99
- border-top-width: 1px;
100
- }
101
- abbr:where([title]) {
102
- -webkit-text-decoration: underline dotted;
103
- text-decoration: underline dotted;
104
- }
105
- h1, h2, h3, h4, h5, h6 {
106
- font-size: inherit;
107
- font-weight: inherit;
108
- }
109
- a {
110
- color: inherit;
111
- -webkit-text-decoration: inherit;
112
- text-decoration: inherit;
113
- }
114
- b, strong {
115
- font-weight: bolder;
116
- }
117
- code, kbd, samp, pre {
118
- font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
119
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
120
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
121
- font-size: 1em;
122
- }
123
- small {
124
- font-size: 80%;
125
- }
126
- sub, sup {
127
- font-size: 75%;
128
- line-height: 0;
129
- position: relative;
130
- vertical-align: baseline;
131
- }
132
- sub {
133
- bottom: -0.25em;
134
- }
135
- sup {
136
- top: -0.5em;
137
- }
138
- table {
139
- text-indent: 0;
140
- border-color: inherit;
141
- border-collapse: collapse;
142
- }
143
- :-moz-focusring {
144
- outline: auto;
145
- }
146
- progress {
147
- vertical-align: baseline;
148
- }
149
- summary {
150
- display: list-item;
151
- }
152
- ol, ul, menu {
153
- list-style: none;
154
- }
155
- img, svg, video, canvas, audio, iframe, embed, object {
156
- display: block;
157
- vertical-align: middle;
158
- }
159
- img, video {
160
- max-width: 100%;
161
- height: auto;
162
- }
163
- button, input, select, optgroup, textarea, ::file-selector-button {
164
- font: inherit;
165
- font-feature-settings: inherit;
166
- font-variation-settings: inherit;
167
- letter-spacing: inherit;
168
- color: inherit;
169
- border-radius: 0;
170
- background-color: transparent;
171
- opacity: 1;
172
- }
173
- :where(select:is([multiple], [size])) optgroup {
174
- font-weight: bolder;
175
- }
176
- :where(select:is([multiple], [size])) optgroup option {
177
- padding-inline-start: 20px;
178
- }
179
- ::file-selector-button {
180
- margin-inline-end: 4px;
181
- }
182
- ::placeholder {
183
- opacity: 1;
184
- }
185
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
186
- ::placeholder {
187
- color: color-mix(in oklab, currentColor 50%, transparent);
188
- }
189
- }
190
- textarea {
191
- resize: vertical;
192
- }
193
- ::-webkit-search-decoration {
194
- -webkit-appearance: none;
195
- }
196
- ::-webkit-date-and-time-value {
197
- min-height: 1lh;
198
- text-align: inherit;
199
- }
200
- ::-webkit-datetime-edit {
201
- display: inline-flex;
202
- }
203
- ::-webkit-datetime-edit-fields-wrapper {
204
- padding: 0;
205
- }
206
- ::-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 {
207
- padding-block: 0;
208
- }
209
- :-moz-ui-invalid {
210
- box-shadow: none;
211
- }
212
- button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
213
- appearance: button;
214
- }
215
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
216
- height: auto;
217
- }
218
- [hidden]:where(:not([hidden="until-found"])) {
219
- display: none !important;
220
- }
221
- }
222
- @layer utilities {
223
- .sr-only {
224
- position: absolute;
225
- width: 1px;
226
- height: 1px;
227
- padding: 0;
228
- margin: -1px;
229
- overflow: hidden;
230
- clip: rect(0, 0, 0, 0);
231
- white-space: nowrap;
232
- border-width: 0;
233
- }
234
- .absolute {
235
- position: absolute;
236
- }
237
- .relative {
238
- position: relative;
239
- }
240
- .-inset-0\.5 {
241
- inset: calc(var(--spacing) * -0.5);
242
- }
243
- .right-0 {
244
- right: calc(var(--spacing) * 0);
245
- }
246
- .z-10 {
247
- z-index: 10;
248
- }
249
- .container {
250
- width: 100%;
251
- @media (width >= 40rem) {
252
- max-width: 40rem;
253
- }
254
- @media (width >= 48rem) {
255
- max-width: 48rem;
256
- }
257
- @media (width >= 64rem) {
258
- max-width: 64rem;
259
- }
260
- @media (width >= 80rem) {
261
- max-width: 80rem;
262
- }
263
- @media (width >= 96rem) {
264
- max-width: 96rem;
265
- }
266
- }
267
- .my-2\.5 {
268
- margin-block: calc(var(--spacing) * 2.5);
269
- }
270
- .me-3 {
271
- margin-inline-end: calc(var(--spacing) * 3);
272
- }
273
- .mt-2 {
274
- margin-top: calc(var(--spacing) * 2);
275
- }
276
- .mt-4 {
277
- margin-top: calc(var(--spacing) * 4);
278
- }
279
- .mt-\[2px\] {
280
- margin-top: 2px;
281
- }
282
- .mt-\[60px\] {
283
- margin-top: 60px;
284
- }
285
- .-mr-2 {
286
- margin-right: calc(var(--spacing) * -2);
287
- }
288
- .mb-2 {
289
- margin-bottom: calc(var(--spacing) * 2);
290
- }
291
- .mb-2\.5 {
292
- margin-bottom: calc(var(--spacing) * 2.5);
293
- }
294
- .mb-4 {
295
- margin-bottom: calc(var(--spacing) * 4);
296
- }
297
- .ml-2 {
298
- margin-left: calc(var(--spacing) * 2);
299
- }
300
- .block {
301
- display: block;
302
- }
303
- .contents {
304
- display: contents;
305
- }
306
- .flex {
307
- display: flex;
308
- }
309
- .hidden {
310
- display: none;
311
- }
312
- .inline {
313
- display: inline;
314
- }
315
- .inline-block {
316
- display: inline-block;
317
- }
318
- .inline-flex {
319
- display: inline-flex;
320
- }
321
- .table {
322
- display: table;
323
- }
324
- .size-6 {
325
- width: calc(var(--spacing) * 6);
326
- height: calc(var(--spacing) * 6);
327
- }
328
- .h-2 {
329
- height: calc(var(--spacing) * 2);
330
- }
331
- .h-2\.5 {
332
- height: calc(var(--spacing) * 2.5);
333
- }
334
- .h-4 {
335
- height: calc(var(--spacing) * 4);
336
- }
337
- .h-10 {
338
- height: calc(var(--spacing) * 10);
339
- }
340
- .h-48 {
341
- height: calc(var(--spacing) * 48);
342
- }
343
- .min-h-full {
344
- min-height: 100%;
345
- }
346
- .w-4 {
347
- width: calc(var(--spacing) * 4);
348
- }
349
- .w-10 {
350
- width: calc(var(--spacing) * 10);
351
- }
352
- .w-24 {
353
- width: calc(var(--spacing) * 24);
354
- }
355
- .w-32 {
356
- width: calc(var(--spacing) * 32);
357
- }
358
- .w-48 {
359
- width: calc(var(--spacing) * 48);
360
- }
361
- .w-56 {
362
- width: calc(var(--spacing) * 56);
363
- }
364
- .w-full {
365
- width: 100%;
366
- }
367
- .max-w-\[300px\] {
368
- max-width: 300px;
369
- }
370
- .max-w-\[360px\] {
371
- max-width: 360px;
372
- }
373
- .max-w-sm {
374
- max-width: var(--container-sm);
375
- }
376
- .flex-shrink-0 {
377
- flex-shrink: 0;
378
- }
379
- .origin-top-right {
380
- transform-origin: top right;
381
- }
382
- .animate-pulse {
383
- animation: var(--animate-pulse);
384
- }
385
- .flex-col {
386
- flex-direction: column;
387
- }
388
- .items-center {
389
- align-items: center;
390
- }
391
- .justify-between {
392
- justify-content: space-between;
393
- }
394
- .justify-center {
395
- justify-content: center;
396
- }
397
- .space-y-2 {
398
- :where(& > :not(:last-child)) {
399
- --tw-space-y-reverse: 0;
400
- margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
401
- margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
402
- }
403
- }
404
- .gap-x-1\.5 {
405
- column-gap: calc(var(--spacing) * 1.5);
406
- }
407
- .space-x-2 {
408
- :where(& > :not(:last-child)) {
409
- --tw-space-x-reverse: 0;
410
- margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
411
- margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
412
- }
413
- }
414
- .divide-x {
415
- :where(& > :not(:last-child)) {
416
- --tw-divide-x-reverse: 0;
417
- border-inline-style: var(--tw-border-style);
418
- border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
419
- border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
420
- }
421
- }
422
- .divide-y {
423
- :where(& > :not(:last-child)) {
424
- --tw-divide-y-reverse: 0;
425
- border-bottom-style: var(--tw-border-style);
426
- border-top-style: var(--tw-border-style);
427
- border-top-width: calc(1px * var(--tw-divide-y-reverse));
428
- border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
429
- }
430
- }
431
- .divide-gray-200 {
432
- :where(& > :not(:last-child)) {
433
- border-color: var(--color-gray-200);
434
- }
435
- }
436
- .rounded-full {
437
- border-radius: calc(infinity * 1px);
438
- }
439
- .rounded-lg {
440
- border-radius: var(--radius-lg);
441
- }
442
- .rounded-md {
443
- border-radius: var(--radius-md);
444
- }
445
- .rounded-sm {
446
- border-radius: var(--radius-sm);
447
- }
448
- .border {
449
- border-style: var(--tw-border-style);
450
- border-width: 1px;
451
- }
452
- .border-gray-200 {
453
- border-color: var(--color-gray-200);
454
- }
455
- .bg-gray-50 {
456
- background-color: var(--color-gray-50);
457
- }
458
- .bg-gray-200 {
459
- background-color: var(--color-gray-200);
460
- }
461
- .bg-gray-300 {
462
- background-color: var(--color-gray-300);
463
- }
464
- .bg-gray-800 {
465
- background-color: var(--color-gray-800);
466
- }
467
- .bg-white {
468
- background-color: var(--color-white);
469
- }
470
- .p-2 {
471
- padding: calc(var(--spacing) * 2);
472
- }
473
- .p-2\.5 {
474
- padding: calc(var(--spacing) * 2.5);
475
- }
476
- .p-4 {
477
- padding: calc(var(--spacing) * 4);
478
- }
479
- .px-3 {
480
- padding-inline: calc(var(--spacing) * 3);
481
- }
482
- .py-2 {
483
- padding-block: calc(var(--spacing) * 2);
484
- }
485
- .pr-2 {
486
- padding-right: calc(var(--spacing) * 2);
487
- }
488
- .text-center {
489
- text-align: center;
490
- }
491
- .text-left {
492
- text-align: left;
493
- }
494
- .align-middle {
495
- vertical-align: middle;
496
- }
497
- .text-sm {
498
- font-size: var(--text-sm);
499
- line-height: var(--tw-leading, var(--text-sm--line-height));
500
- }
501
- .text-xs {
502
- font-size: var(--text-xs);
503
- line-height: var(--tw-leading, var(--text-xs--line-height));
504
- }
505
- .font-bold {
506
- --tw-font-weight: var(--font-weight-bold);
507
- font-weight: var(--font-weight-bold);
508
- }
509
- .font-normal {
510
- --tw-font-weight: var(--font-weight-normal);
511
- font-weight: var(--font-weight-normal);
512
- }
513
- .font-semibold {
514
- --tw-font-weight: var(--font-weight-semibold);
515
- font-weight: var(--font-weight-semibold);
516
- }
517
- .text-gray-200 {
518
- color: var(--color-gray-200);
519
- }
520
- .text-gray-400 {
521
- color: var(--color-gray-400);
522
- }
523
- .text-gray-900 {
524
- color: var(--color-gray-900);
525
- }
526
- .underline {
527
- text-decoration-line: underline;
528
- }
529
- .shadow {
530
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
531
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
532
- }
533
- .shadow-lg {
534
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
535
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
536
- }
537
- .shadow-md {
538
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
539
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
540
- }
541
- .shadow-sm {
542
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
543
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
544
- }
545
- .ring-1 {
546
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
547
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
548
- }
549
- .shadow-accent {
550
- --tw-shadow-color: var(--color-accent);
551
- }
552
- .ring-black {
553
- --tw-ring-color: var(--color-black);
554
- }
555
- .ring-gray-300 {
556
- --tw-ring-color: var(--color-gray-300);
557
- }
558
- .outline {
559
- outline-style: var(--tw-outline-style);
560
- outline-width: 1px;
561
- }
562
- .transition {
563
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
564
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
565
- transition-duration: var(--tw-duration, var(--default-transition-duration));
566
- }
567
- .ring-inset {
568
- --tw-ring-inset: inset;
569
- }
570
- .hover\:bg-gray-50 {
571
- &:hover {
572
- @media (hover: hover) {
573
- background-color: var(--color-gray-50);
574
- }
575
- }
576
- }
577
- .hover\:bg-gray-700 {
578
- &:hover {
579
- @media (hover: hover) {
580
- background-color: var(--color-gray-700);
581
- }
582
- }
583
- }
584
- .hover\:text-white {
585
- &:hover {
586
- @media (hover: hover) {
587
- color: var(--color-white);
588
- }
589
- }
590
- }
591
- .focus\:border-blue-500 {
592
- &:focus {
593
- border-color: var(--color-blue-500);
594
- }
595
- }
596
- .focus\:ring-2 {
597
- &:focus {
598
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
599
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
600
- }
601
- }
602
- .focus\:ring-blue-500 {
603
- &:focus {
604
- --tw-ring-color: var(--color-blue-500);
605
- }
606
- }
607
- .focus\:ring-white {
608
- &:focus {
609
- --tw-ring-color: var(--color-white);
610
- }
611
- }
612
- .focus\:ring-offset-2 {
613
- &:focus {
614
- --tw-ring-offset-width: 2px;
615
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
616
- }
617
- }
618
- .focus\:ring-offset-gray-800 {
619
- &:focus {
620
- --tw-ring-offset-color: var(--color-gray-800);
621
- }
622
- }
623
- .focus\:outline-hidden {
624
- &:focus {
625
- --tw-outline-style: none;
626
- outline-style: none;
627
- @media (forced-colors: active) {
628
- outline: 2px solid transparent;
629
- outline-offset: 2px;
630
- }
631
- }
632
- }
633
- .focus\:outline-none {
634
- &:focus {
635
- --tw-outline-style: none;
636
- outline-style: none;
637
- }
638
- }
639
- .md\:flex {
640
- @media (width >= 48rem) {
641
- display: flex;
642
- }
643
- }
644
- .md\:hidden {
645
- @media (width >= 48rem) {
646
- display: none;
647
- }
648
- }
649
- .md\:items-center {
650
- @media (width >= 48rem) {
651
- align-items: center;
652
- }
653
- }
654
- .md\:p-6 {
655
- @media (width >= 48rem) {
656
- padding: calc(var(--spacing) * 6);
657
- }
658
- }
659
- }
660
- :root {
661
- --rt-color-white: #fff;
662
- --rt-color-dark: #222;
663
- --rt-color-success: #8dc572;
664
- --rt-color-error: #be6464;
665
- --rt-color-warning: #f0ad4e;
666
- --rt-color-info: #337ab7;
667
- --rt-opacity: 0.9;
668
- --rt-transition-show-delay: 0.15s;
669
- --rt-transition-closing-delay: 0.15s;
670
- }
671
- .core-styles-module_tooltip__3vRRp {
672
- left: 0;
673
- opacity: 0;
674
- pointer-events: none;
675
- position: absolute;
676
- top: 0;
677
- will-change: opacity;
678
- }
679
- .core-styles-module_fixed__pcSol {
680
- position: fixed;
681
- }
682
- .core-styles-module_arrow__cvMwQ {
683
- background: inherit;
684
- position: absolute;
685
- }
686
- .core-styles-module_noArrow__xock6 {
687
- display: none;
688
- }
689
- .core-styles-module_clickable__ZuTTB {
690
- pointer-events: auto;
691
- }
692
- .core-styles-module_show__Nt9eE {
693
- opacity: var(--rt-opacity);
694
- transition: opacity var(--rt-transition-show-delay) ease-out;
695
- }
696
- .core-styles-module_closing__sGnxF {
697
- opacity: 0;
698
- transition: opacity var(--rt-transition-closing-delay) ease-in;
699
- }
700
- .styles-module_tooltip__mnnfp {
701
- border-radius: 3px;
702
- font-size: 90%;
703
- padding: 8px 16px;
704
- width: max-content;
705
- }
706
- .styles-module_arrow__K0L3T {
707
- height: 8px;
708
- width: 8px;
709
- }
710
- [class*=react-tooltip__place-top]>.styles-module_arrow__K0L3T {
711
- transform: rotate(45deg);
712
- }
713
- [class*=react-tooltip__place-right]>.styles-module_arrow__K0L3T {
714
- transform: rotate(135deg);
715
- }
716
- [class*=react-tooltip__place-bottom]>.styles-module_arrow__K0L3T {
717
- transform: rotate(225deg);
718
- }
719
- [class*=react-tooltip__place-left]>.styles-module_arrow__K0L3T {
720
- transform: rotate(315deg);
721
- }
722
- .styles-module_dark__xNqje {
723
- background: var(--rt-color-dark);
724
- color: var(--rt-color-white);
725
- }
726
- .styles-module_light__Z6W-X {
727
- background-color: var(--rt-color-white);
728
- color: var(--rt-color-dark);
729
- }
730
- .styles-module_success__A2AKt {
731
- background-color: var(--rt-color-success);
732
- color: var(--rt-color-white);
733
- }
734
- .styles-module_warning__SCK0X {
735
- background-color: var(--rt-color-warning);
736
- color: var(--rt-color-white);
737
- }
738
- .styles-module_error__JvumD {
739
- background-color: var(--rt-color-error);
740
- color: var(--rt-color-white);
741
- }
742
- .styles-module_info__BWdHW {
743
- background-color: var(--rt-color-info);
744
- color: var(--rt-color-white);
745
- }
746
- .ui-link {
747
- color: var(--color-blue-700);
748
- &:visited {
749
- color: var(--color-purple-900);
750
- }
751
- &:hover {
752
- @media (hover: hover) {
753
- text-decoration-line: underline;
754
- }
755
- }
756
- &:active {
757
- color: var(--color-red-950);
758
- }
759
- }
760
- .ui-info-link {
761
- cursor: pointer;
762
- color: var(--color-blue-700);
763
- text-decoration-line: underline;
764
- text-decoration-color: var(--color-blue-700);
765
- text-decoration-style: dashed;
766
- text-underline-offset: 4px;
767
- }
768
- .icon-disabled {
769
- stroke: var(--color-slate-300);
770
- }
771
- .info-bubble, .inline-info-bubble {
772
- width: calc(var(--spacing) * 4);
773
- height: calc(var(--spacing) * 4);
774
- stroke: var(--color-primary);
775
- color: transparent;
776
- }
777
- .inline-info-bubble {
778
- margin-left: calc(var(--spacing) * 1);
779
- }
780
- .icon-button {
781
- width: calc(var(--spacing) * 4);
782
- height: calc(var(--spacing) * 4);
783
- stroke-width: 4;
784
- }
785
- .ui-alert {
786
- margin-bottom: calc(var(--spacing) * 4);
787
- display: flex;
788
- border-radius: var(--radius-lg);
789
- padding: calc(var(--spacing) * 4);
790
- font-size: var(--text-sm);
791
- line-height: var(--tw-leading, var(--text-sm--line-height));
792
- &.info {
793
- border-color: var(--color-blue-300);
794
- background-color: var(--color-blue-50);
795
- color: var(--color-blue-800);
796
- @media (prefers-color-scheme: dark) {
797
- border-color: var(--color-blue-800);
798
- }
799
- @media (prefers-color-scheme: dark) {
800
- background-color: var(--color-gray-800);
801
- }
802
- @media (prefers-color-scheme: dark) {
803
- color: var(--color-blue-400);
804
- }
805
- }
806
- &.warning {
807
- border-color: var(--color-yellow-300);
808
- background-color: var(--color-yellow-50);
809
- color: var(--color-yellow-800);
810
- @media (prefers-color-scheme: dark) {
811
- border-color: var(--color-yellow-800);
812
- }
813
- @media (prefers-color-scheme: dark) {
814
- background-color: var(--color-gray-800);
815
- }
816
- @media (prefers-color-scheme: dark) {
817
- color: var(--color-yellow-300);
818
- }
819
- }
820
- &.danger {
821
- border-color: var(--color-red-300);
822
- background-color: var(--color-red-50);
823
- color: var(--color-red-800);
824
- @media (prefers-color-scheme: dark) {
825
- border-color: var(--color-red-800);
826
- }
827
- @media (prefers-color-scheme: dark) {
828
- background-color: var(--color-gray-800);
829
- }
830
- @media (prefers-color-scheme: dark) {
831
- color: var(--color-red-400);
832
- }
833
- }
834
- &.success {
835
- border-color: var(--color-green-300);
836
- background-color: var(--color-green-50);
837
- color: var(--color-green-800);
838
- @media (prefers-color-scheme: dark) {
839
- border-color: var(--color-green-800);
840
- }
841
- @media (prefers-color-scheme: dark) {
842
- background-color: var(--color-gray-800);
843
- }
844
- @media (prefers-color-scheme: dark) {
845
- color: var(--color-green-400);
846
- }
847
- }
848
- &.default {
849
- border-color: var(--color-gray-300);
850
- background-color: var(--color-gray-50);
851
- color: var(--color-gray-800);
852
- @media (prefers-color-scheme: dark) {
853
- border-color: var(--color-gray-600);
854
- }
855
- @media (prefers-color-scheme: dark) {
856
- background-color: var(--color-gray-800);
857
- }
858
- @media (prefers-color-scheme: dark) {
859
- color: var(--color-gray-400);
860
- }
861
- }
862
- }
863
- .ui-button {
864
- display: inline-flex;
865
- cursor: pointer;
866
- align-items: center;
867
- border-radius: var(--radius-lg);
868
- border-style: var(--tw-border-style);
869
- border-width: 1px;
870
- --tw-border-style: solid;
871
- border-style: solid;
872
- font-family: Inter;
873
- font-size: var(--text-sm);
874
- line-height: var(--tw-leading, var(--text-sm--line-height));
875
- --tw-font-weight: var(--font-weight-medium);
876
- font-weight: var(--font-weight-medium);
877
- &:focus {
878
- z-index: 10;
879
- }
880
- &:focus {
881
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
882
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
883
- }
884
- &:disabled {
885
- border-style: var(--tw-border-style);
886
- border-width: 1px;
887
- }
888
- &:disabled {
889
- background-color: var(--color-slate-50);
890
- }
891
- &:disabled {
892
- color: var(--color-slate-500);
893
- }
894
- &.primary {
895
- border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
896
- background-color: var(--color-primary);
897
- color: var(--color-white);
898
- &:hover {
899
- @media (hover: hover) {
900
- background-color: color-mix(in oklab, var(--color-primary) 85%, transparent);
901
- }
902
- }
903
- &:focus {
904
- --tw-ring-color: var(--color-accent);
905
- }
906
- }
907
- &.secondary {
908
- border-color: var(--color-secondary);
909
- background-color: var(--color-secondary);
910
- color: var(--color-primary);
911
- &:hover {
912
- @media (hover: hover) {
913
- background-color: color-mix(in oklab, var(--color-secondary) 85%, transparent);
914
- }
915
- }
916
- &:focus {
917
- --tw-ring-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
918
- }
919
- }
920
- &.accent {
921
- border-color: var(--color-accent);
922
- background-color: var(--color-accent);
923
- color: var(--color-white);
924
- &:hover {
925
- @media (hover: hover) {
926
- background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
927
- }
928
- }
929
- &:focus {
930
- --tw-ring-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
931
- }
932
- &:focus {
933
- --tw-outline-style: none;
934
- outline-style: none;
935
- }
936
- }
937
- &.white {
938
- border-color: var(--color-white);
939
- background-color: var(--color-white);
940
- color: var(--color-primary);
941
- &:hover {
942
- @media (hover: hover) {
943
- border-color: var(--color-gray-100);
944
- }
945
- }
946
- &:hover {
947
- @media (hover: hover) {
948
- background-color: var(--color-gray-100);
949
- }
950
- }
951
- &:hover {
952
- @media (hover: hover) {
953
- color: var(--color-blue-700);
954
- }
955
- }
956
- &:focus {
957
- --tw-ring-color: var(--color-blue-700);
958
- }
959
- &:focus {
960
- --tw-outline-style: none;
961
- outline-style: none;
962
- }
963
- }
964
- &.default {
965
- border-color: var(--color-blue-500);
966
- background-color: var(--color-blue-500);
967
- color: var(--color-white);
968
- &:hover {
969
- @media (hover: hover) {
970
- background-color: var(--color-blue-700);
971
- }
972
- }
973
- &:focus {
974
- --tw-ring-color: var(--color-blue-700);
975
- }
976
- }
977
- &.sm {
978
- padding-inline: calc(var(--spacing) * 1);
979
- padding-block: calc(var(--spacing) * 1);
980
- }
981
- &.md {
982
- padding-inline: calc(var(--spacing) * 4);
983
- padding-block: calc(var(--spacing) * 2);
984
- }
985
- &.lg {
986
- padding-inline: calc(var(--spacing) * 5);
987
- padding-block: calc(var(--spacing) * 2.5);
988
- font-size: var(--text-2xl);
989
- line-height: var(--tw-leading, var(--text-2xl--line-height));
990
- }
991
- }
992
- .ui-card, .ui-card-link {
993
- max-width: var(--container-sm);
994
- border-style: var(--tw-border-style);
995
- border-width: 1px;
996
- border-color: var(--color-gray-200);
997
- background-color: var(--color-white);
998
- padding: calc(var(--spacing) * 6);
999
- }
1000
- .ui-card-link {
1001
- display: block;
1002
- &:hover {
1003
- @media (hover: hover) {
1004
- background-color: var(--color-gray-100);
1005
- }
1006
- }
1007
- @media (prefers-color-scheme: dark) {
1008
- background-color: var(--color-gray-800);
1009
- }
1010
- }
1011
- .ui-card-header {
1012
- margin-bottom: calc(var(--spacing) * 2);
1013
- font-size: var(--text-2xl);
1014
- line-height: var(--tw-leading, var(--text-2xl--line-height));
1015
- --tw-font-weight: var(--font-weight-bold);
1016
- font-weight: var(--font-weight-bold);
1017
- --tw-tracking: var(--tracking-tight);
1018
- letter-spacing: var(--tracking-tight);
1019
- color: var(--color-gray-900);
1020
- }
1021
- .ui-card-body {
1022
- margin-bottom: calc(var(--spacing) * 3);
1023
- --tw-font-weight: var(--font-weight-normal);
1024
- font-weight: var(--font-weight-normal);
1025
- color: var(--color-gray-500);
1026
- @media (prefers-color-scheme: dark) {
1027
- color: var(--color-gray-400);
1028
- }
1029
- }
1030
- .ui-checkbox, .ui-radio {
1031
- &.primary {
1032
- accent-color: var(--color-primary);
1033
- }
1034
- &.secondary {
1035
- accent-color: var(--color-secondary);
1036
- }
1037
- &.accent {
1038
- accent-color: var(--color-accent);
1039
- }
1040
- &.pink {
1041
- accent-color: var(--color-pink-500);
1042
- }
1043
- }
1044
- .ui-text-input {
1045
- position: relative;
1046
- margin: calc(var(--spacing) * 0);
1047
- display: block;
1048
- width: 100%;
1049
- border-radius: 0.25rem;
1050
- border-style: var(--tw-border-style);
1051
- border-width: 1px;
1052
- --tw-border-style: solid;
1053
- border-style: solid;
1054
- border-color: var(--color-neutral-200);
1055
- background-color: transparent;
1056
- background-clip: padding-box;
1057
- padding-inline: calc(var(--spacing) * 3);
1058
- padding-block: 0.25rem;
1059
- font-size: var(--text-base);
1060
- line-height: var(--tw-leading, var(--text-base--line-height));
1061
- --tw-leading: 1.6;
1062
- line-height: 1.6;
1063
- --tw-font-weight: var(--font-weight-normal);
1064
- font-weight: var(--font-weight-normal);
1065
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
1066
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1067
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1068
- --tw-duration: 200ms;
1069
- transition-duration: 200ms;
1070
- --tw-ease: var(--ease-in-out);
1071
- transition-timing-function: var(--ease-in-out);
1072
- --tw-outline-style: none;
1073
- outline-style: none;
1074
- &::placeholder {
1075
- color: var(--color-neutral-500);
1076
- }
1077
- &:focus {
1078
- z-index: 3;
1079
- }
1080
- &:focus {
1081
- border-color: var(--color-blue-500);
1082
- }
1083
- &:focus {
1084
- --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05));
1085
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1086
- }
1087
- &:focus {
1088
- --tw-outline-style: none;
1089
- outline-style: none;
1090
- }
1091
- @media (prefers-reduced-motion: reduce) {
1092
- transition-property: none;
1093
- }
1094
- }
1095
- .ui-container {
1096
- position: relative;
1097
- z-index: 2;
1098
- margin: auto;
1099
- display: block;
1100
- width: 100%;
1101
- max-width: 1264px;
1102
- justify-content: space-between;
1103
- background-image: none;
1104
- &.full {
1105
- max-width: 100%;
1106
- }
1107
- }
1108
- .ui-nav {
1109
- position: fixed;
1110
- inset-inline-start: calc(var(--spacing) * 0);
1111
- top: calc(var(--spacing) * 0);
1112
- z-index: 20;
1113
- width: 100%;
1114
- border-bottom-style: var(--tw-border-style);
1115
- border-bottom-width: 2px;
1116
- border-color: var(--color-secondary);
1117
- &.light {
1118
- background-color: var(--color-white);
1119
- }
1120
- &.primary {
1121
- border-color: var(--color-accent-dark);
1122
- background-color: var(--color-primary);
1123
- }
1124
- &.secondary {
1125
- background-color: var(--color-secondary);
1126
- }
1127
- &.dark {
1128
- background-color: var(--color-accent-dark);
1129
- }
1130
- }
1131
- .ui-nav-inner-container {
1132
- margin-inline: auto;
1133
- display: flex;
1134
- max-width: var(--breakpoint-xl);
1135
- flex-wrap: wrap;
1136
- align-items: center;
1137
- justify-content: space-between;
1138
- padding: calc(var(--spacing) * 2);
1139
- }
1140
- .ui-nav-brand {
1141
- display: flex;
1142
- align-items: center;
1143
- :where(& > :not(:last-child)) {
1144
- --tw-space-x-reverse: 0;
1145
- margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
1146
- margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
1147
- }
1148
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
1149
- :where(& > :not(:last-child)) {
1150
- --tw-space-x-reverse: 1;
1151
- }
1152
- }
1153
- }
1154
- .ui-nav-brand-label {
1155
- align-self: center;
1156
- font-size: var(--text-2xl);
1157
- line-height: var(--tw-leading, var(--text-2xl--line-height));
1158
- --tw-font-weight: var(--font-weight-semibold);
1159
- font-weight: var(--font-weight-semibold);
1160
- white-space: nowrap;
1161
- color: var(--color-white);
1162
- &.light, &.secondary {
1163
- color: var(--color-accent-dark);
1164
- }
1165
- }
1166
- .ui-nav-item-container {
1167
- display: none;
1168
- width: 100%;
1169
- align-items: center;
1170
- justify-content: space-between;
1171
- @media (width >= 48rem) {
1172
- order: 1;
1173
- }
1174
- @media (width >= 48rem) {
1175
- display: flex;
1176
- }
1177
- @media (width >= 48rem) {
1178
- width: auto;
1179
- }
1180
- }
1181
- .ui-nav-item-list {
1182
- margin-top: calc(var(--spacing) * 4);
1183
- display: flex;
1184
- flex-direction: column;
1185
- border-radius: var(--radius-lg);
1186
- border-style: var(--tw-border-style);
1187
- border-width: 1px;
1188
- padding: calc(var(--spacing) * 4);
1189
- --tw-font-weight: var(--font-weight-medium);
1190
- font-weight: var(--font-weight-medium);
1191
- @media (width >= 48rem) {
1192
- margin-top: calc(var(--spacing) * 0);
1193
- }
1194
- @media (width >= 48rem) {
1195
- flex-direction: row;
1196
- }
1197
- @media (width >= 48rem) {
1198
- :where(& > :not(:last-child)) {
1199
- --tw-space-x-reverse: 0;
1200
- margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
1201
- margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
1202
- }
1203
- }
1204
- @media (width >= 48rem) {
1205
- border-style: var(--tw-border-style);
1206
- border-width: 0px;
1207
- }
1208
- @media (width >= 48rem) {
1209
- padding: calc(var(--spacing) * 0);
1210
- }
1211
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
1212
- :where(& > :not(:last-child)) {
1213
- --tw-space-x-reverse: 1;
1214
- }
1215
- }
1216
- }
1217
- .ui-nav-link {
1218
- display: block;
1219
- padding-inline: calc(var(--spacing) * 3);
1220
- padding-block: calc(var(--spacing) * 2);
1221
- font-size: var(--text-lg);
1222
- line-height: var(--tw-leading, var(--text-lg--line-height));
1223
- color: var(--color-white);
1224
- &:hover {
1225
- @media (hover: hover) {
1226
- border-radius: var(--radius-sm);
1227
- }
1228
- }
1229
- &:hover {
1230
- @media (hover: hover) {
1231
- background-color: var(--color-secondary);
1232
- }
1233
- }
1234
- &:hover {
1235
- @media (hover: hover) {
1236
- color: var(--color-primary);
1237
- }
1238
- }
1239
- &.light {
1240
- color: var(--color-primary);
1241
- }
1242
- &.secondary {
1243
- color: var(--color-primary);
1244
- &:hover {
1245
- @media (hover: hover) {
1246
- color: var(--color-white);
1247
- }
1248
- }
1249
- }
1250
- }
1251
- .ui-nav-mobile {
1252
- @media (width >= 48rem) {
1253
- display: none;
1254
- }
1255
- }
1256
- .ui-nav-mobile-menu {
1257
- :where(& > :not(:last-child)) {
1258
- --tw-space-y-reverse: 0;
1259
- margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
1260
- margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
1261
- }
1262
- padding-inline: calc(var(--spacing) * 2);
1263
- padding-top: calc(var(--spacing) * 2);
1264
- padding-bottom: calc(var(--spacing) * 3);
1265
- @media (width >= 40rem) {
1266
- padding-inline: calc(var(--spacing) * 3);
1267
- }
1268
- }
1269
- .ui-slider {
1270
- height: calc(var(--spacing) * 2);
1271
- width: 100%;
1272
- cursor: pointer;
1273
- appearance: none;
1274
- border-radius: var(--radius-lg);
1275
- &.primary {
1276
- background-color: var(--color-primary);
1277
- }
1278
- &.secondary {
1279
- background-color: var(--color-secondary);
1280
- }
1281
- &.accent {
1282
- background-color: var(--color-accent);
1283
- }
1284
- &.default {
1285
- background-color: var(--color-blue-500);
1286
- }
1287
- }
1288
- .ui-slider-label {
1289
- margin-bottom: calc(var(--spacing) * 2);
1290
- display: block;
1291
- font-size: var(--text-sm);
1292
- line-height: var(--tw-leading, var(--text-sm--line-height));
1293
- --tw-font-weight: var(--font-weight-medium);
1294
- font-weight: var(--font-weight-medium);
1295
- }
1296
- .ui-slider-range-label {
1297
- position: absolute;
1298
- font-size: var(--text-sm);
1299
- line-height: var(--tw-leading, var(--text-sm--line-height));
1300
- &.start {
1301
- inset-inline-start: calc(var(--spacing) * 2);
1302
- bottom: calc(var(--spacing) * -2);
1303
- }
1304
- &.end {
1305
- inset-inline-end: calc(var(--spacing) * 2);
1306
- bottom: calc(var(--spacing) * -2);
1307
- }
1308
- }
1309
- .ui-select {
1310
- display: block;
1311
- width: 100%;
1312
- background-color: var(--color-gray-50);
1313
- padding: calc(var(--spacing) * 2.5);
1314
- font-size: var(--text-sm);
1315
- line-height: var(--tw-leading, var(--text-sm--line-height));
1316
- color: var(--color-gray-900);
1317
- &.outline {
1318
- border-radius: var(--radius-lg);
1319
- border-style: var(--tw-border-style);
1320
- border-width: 1px;
1321
- --tw-border-style: solid;
1322
- border-style: solid;
1323
- border-color: var(--color-gray-300);
1324
- &:focus {
1325
- border-color: var(--color-blue-500);
1326
- }
1327
- &:focus {
1328
- --tw-ring-color: var(--color-blue-500);
1329
- }
1330
- }
1331
- &.plain {
1332
- border-style: var(--tw-border-style);
1333
- border-width: 0px;
1334
- background-color: var(--color-white);
1335
- &:focus {
1336
- background-color: var(--color-gray-100);
1337
- }
1338
- }
1339
- &.underline {
1340
- border-top-style: var(--tw-border-style);
1341
- border-top-width: 0px;
1342
- border-right-style: var(--tw-border-style);
1343
- border-right-width: 0px;
1344
- border-bottom-style: var(--tw-border-style);
1345
- border-bottom-width: 1px;
1346
- border-left-style: var(--tw-border-style);
1347
- border-left-width: 0px;
1348
- --tw-border-style: solid;
1349
- border-style: solid;
1350
- border-color: var(--color-black);
1351
- background-color: var(--color-white);
1352
- &:focus {
1353
- border-color: var(--color-blue-500);
1354
- }
1355
- }
1356
- }
1357
- .ui-select-label {
1358
- display: block;
1359
- padding: calc(var(--spacing) * 2);
1360
- font-size: var(--text-sm);
1361
- line-height: var(--tw-leading, var(--text-sm--line-height));
1362
- --tw-font-weight: var(--font-weight-medium);
1363
- font-weight: var(--font-weight-medium);
1364
- color: var(--color-gray-900);
1365
- }
1366
- .ui-tabs-container {
1367
- position: relative;
1368
- right: calc(var(--spacing) * 0);
1369
- font-family: Open Sans;
1370
- }
1371
- .ui-tab-list {
1372
- display: flex;
1373
- list-style-type: none;
1374
- flex-wrap: wrap;
1375
- border-radius: var(--radius-md);
1376
- background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
1377
- padding-inline: calc(var(--spacing) * 1.5);
1378
- padding-block: calc(var(--spacing) * 1.5);
1379
- }
1380
- .ui-tab-list-item {
1381
- z-index: 30;
1382
- margin-inline-end: calc(var(--spacing) * 2);
1383
- .ui-tab-button {
1384
- display: inline-block;
1385
- cursor: pointer;
1386
- border-top-left-radius: var(--radius-sm);
1387
- border-top-right-radius: var(--radius-sm);
1388
- border-bottom-style: var(--tw-border-style);
1389
- border-bottom-width: 2px;
1390
- border-color: var(--color-gray-400);
1391
- padding-inline: calc(var(--spacing) * 4);
1392
- padding-block: calc(var(--spacing) * 2);
1393
- text-align: center;
1394
- --tw-font-weight: var(--font-weight-semibold);
1395
- font-weight: var(--font-weight-semibold);
1396
- color: var(--color-gray-400);
1397
- &:hover {
1398
- @media (hover: hover) {
1399
- border-color: var(--color-secondary);
1400
- }
1401
- }
1402
- &:hover {
1403
- @media (hover: hover) {
1404
- color: var(--color-primary);
1405
- }
1406
- }
1407
- &.ui-active-tab {
1408
- cursor: default;
1409
- border-color: var(--color-secondary);
1410
- background-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
1411
- color: var(--color-accent-dark);
1412
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
1413
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1414
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1415
- transition-delay: 100ms;
1416
- --tw-duration: 300ms;
1417
- transition-duration: 300ms;
1418
- --tw-ease: var(--ease-in-out);
1419
- transition-timing-function: var(--ease-in-out);
1420
- }
1421
- }
1422
- }
1423
- .ui-tab-panel {
1424
- width: 100%;
1425
- border-radius: var(--radius-lg);
1426
- padding: calc(var(--spacing) * 4);
1427
- }
1428
- @property --tw-space-y-reverse {
1429
- syntax: "*";
1430
- inherits: false;
1431
- initial-value: 0;
1432
- }
1433
- @property --tw-space-x-reverse {
1434
- syntax: "*";
1435
- inherits: false;
1436
- initial-value: 0;
1437
- }
1438
- @property --tw-divide-x-reverse {
1439
- syntax: "*";
1440
- inherits: false;
1441
- initial-value: 0;
1442
- }
1443
- @property --tw-border-style {
1444
- syntax: "*";
1445
- inherits: false;
1446
- initial-value: solid;
1447
- }
1448
- @property --tw-divide-y-reverse {
1449
- syntax: "*";
1450
- inherits: false;
1451
- initial-value: 0;
1452
- }
1453
- @property --tw-font-weight {
1454
- syntax: "*";
1455
- inherits: false;
1456
- }
1457
- @property --tw-shadow {
1458
- syntax: "*";
1459
- inherits: false;
1460
- initial-value: 0 0 #0000;
1461
- }
1462
- @property --tw-shadow-color {
1463
- syntax: "*";
1464
- inherits: false;
1465
- }
1466
- @property --tw-inset-shadow {
1467
- syntax: "*";
1468
- inherits: false;
1469
- initial-value: 0 0 #0000;
1470
- }
1471
- @property --tw-inset-shadow-color {
1472
- syntax: "*";
1473
- inherits: false;
1474
- }
1475
- @property --tw-ring-color {
1476
- syntax: "*";
1477
- inherits: false;
1478
- }
1479
- @property --tw-ring-shadow {
1480
- syntax: "*";
1481
- inherits: false;
1482
- initial-value: 0 0 #0000;
1483
- }
1484
- @property --tw-inset-ring-color {
1485
- syntax: "*";
1486
- inherits: false;
1487
- }
1488
- @property --tw-inset-ring-shadow {
1489
- syntax: "*";
1490
- inherits: false;
1491
- initial-value: 0 0 #0000;
1492
- }
1493
- @property --tw-ring-inset {
1494
- syntax: "*";
1495
- inherits: false;
1496
- }
1497
- @property --tw-ring-offset-width {
1498
- syntax: "<length>";
1499
- inherits: false;
1500
- initial-value: 0px;
1501
- }
1502
- @property --tw-ring-offset-color {
1503
- syntax: "*";
1504
- inherits: false;
1505
- initial-value: #fff;
1506
- }
1507
- @property --tw-ring-offset-shadow {
1508
- syntax: "*";
1509
- inherits: false;
1510
- initial-value: 0 0 #0000;
1511
- }
1512
- @property --tw-outline-style {
1513
- syntax: "*";
1514
- inherits: false;
1515
- initial-value: solid;
1516
- }
1517
- @property --tw-tracking {
1518
- syntax: "*";
1519
- inherits: false;
1520
- }
1521
- @property --tw-leading {
1522
- syntax: "*";
1523
- inherits: false;
1524
- }
1525
- @property --tw-duration {
1526
- syntax: "*";
1527
- inherits: false;
1528
- }
1529
- @property --tw-ease {
1530
- syntax: "*";
1531
- inherits: false;
1532
- }
1533
- @keyframes pulse {
1534
- 50% {
1535
- opacity: 0.5;
1536
- }
1537
- }
1538
-
1539
- /*# sourceMappingURL=niagads-ui.css.map */