and still more :sob: · strawmelonjuice.com/Lumina@304178b

+1 -1

.gitignore

··· 17 17 18 18 # Added by me 19 19 client/build 20 - server/buildq 20 + /server/build 21 21 /server/priv/static/lumina_client*.css 22 22 /server/priv/static/lumina_client*.hash 23 23 /server/priv/static/lumina_client*.mjs

-3037

server/priv/static/lumina_client.css

··· 1 - /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */ 2 - @layer properties; 3 - @layer theme, base, components, utilities; 4 - @layer theme { 5 - :root, :host { 6 - --font-sans: "Vend Sans"; 7 - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', 8 - monospace; 9 - --color-neutral-800: oklch(26.9% 0 0); 10 - --color-black: #000; 11 - --spacing: 0.25rem; 12 - --container-sm: 24rem; 13 - --container-md: 28rem; 14 - --text-xs: 0.75rem; 15 - --text-xs--line-height: calc(1 / 0.75); 16 - --text-lg: 1.125rem; 17 - --text-lg--line-height: calc(1.75 / 1.125); 18 - --text-xl: 1.25rem; 19 - --text-xl--line-height: calc(1.75 / 1.25); 20 - --text-2xl: 1.5rem; 21 - --text-2xl--line-height: calc(2 / 1.5); 22 - --text-3xl: 1.875rem; 23 - --text-3xl--line-height: calc(2.25 / 1.875); 24 - --text-5xl: 3rem; 25 - --text-5xl--line-height: 1; 26 - --font-weight-bold: 700; 27 - --radius-sm: 0.25rem; 28 - --radius-md: 0.375rem; 29 - --radius-lg: 0.5rem; 30 - --radius-xl: 0.75rem; 31 - --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); 32 - --default-transition-duration: 150ms; 33 - --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 34 - --default-font-family: var(--font-sans); 35 - --default-mono-font-family: var(--font-mono); 36 - --font-logo: "Gantari"; 37 - --font-content: "Elms Sans"; 38 - --font-menuitems: "Josefin Sans"; 39 - --font-script: "DM Mono"; 40 - } 41 - } 42 - @layer base { 43 - *, ::after, ::before, ::backdrop, ::file-selector-button { 44 - box-sizing: border-box; 45 - margin: 0; 46 - padding: 0; 47 - border: 0 solid; 48 - } 49 - html, :host { 50 - line-height: 1.5; 51 - -webkit-text-size-adjust: 100%; 52 - tab-size: 4; 53 - 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'); 54 - font-feature-settings: var(--default-font-feature-settings, normal); 55 - font-variation-settings: var(--default-font-variation-settings, normal); 56 - -webkit-tap-highlight-color: transparent; 57 - } 58 - hr { 59 - height: 0; 60 - color: inherit; 61 - border-top-width: 1px; 62 - } 63 - abbr:where([title]) { 64 - -webkit-text-decoration: underline dotted; 65 - text-decoration: underline dotted; 66 - } 67 - h1, h2, h3, h4, h5, h6 { 68 - font-size: inherit; 69 - font-weight: inherit; 70 - } 71 - a { 72 - color: inherit; 73 - -webkit-text-decoration: inherit; 74 - text-decoration: inherit; 75 - } 76 - b, strong { 77 - font-weight: bolder; 78 - } 79 - code, kbd, samp, pre { 80 - font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); 81 - font-feature-settings: var(--default-mono-font-feature-settings, normal); 82 - font-variation-settings: var(--default-mono-font-variation-settings, normal); 83 - font-size: 1em; 84 - } 85 - small { 86 - font-size: 80%; 87 - } 88 - sub, sup { 89 - font-size: 75%; 90 - line-height: 0; 91 - position: relative; 92 - vertical-align: baseline; 93 - } 94 - sub { 95 - bottom: -0.25em; 96 - } 97 - sup { 98 - top: -0.5em; 99 - } 100 - table { 101 - text-indent: 0; 102 - border-color: inherit; 103 - border-collapse: collapse; 104 - } 105 - :-moz-focusring { 106 - outline: auto; 107 - } 108 - progress { 109 - vertical-align: baseline; 110 - } 111 - summary { 112 - display: list-item; 113 - } 114 - ol, ul, menu { 115 - list-style: none; 116 - } 117 - img, svg, video, canvas, audio, iframe, embed, object { 118 - display: block; 119 - vertical-align: middle; 120 - } 121 - img, video { 122 - max-width: 100%; 123 - height: auto; 124 - } 125 - button, input, select, optgroup, textarea, ::file-selector-button { 126 - font: inherit; 127 - font-feature-settings: inherit; 128 - font-variation-settings: inherit; 129 - letter-spacing: inherit; 130 - color: inherit; 131 - border-radius: 0; 132 - background-color: transparent; 133 - opacity: 1; 134 - } 135 - :where(select:is([multiple], [size])) optgroup { 136 - font-weight: bolder; 137 - } 138 - :where(select:is([multiple], [size])) optgroup option { 139 - padding-inline-start: 20px; 140 - } 141 - ::file-selector-button { 142 - margin-inline-end: 4px; 143 - } 144 - ::placeholder { 145 - opacity: 1; 146 - } 147 - @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { 148 - ::placeholder { 149 - color: currentcolor; 150 - @supports (color: color-mix(in lab, red, red)) { 151 - color: color-mix(in oklab, currentcolor 50%, transparent); 152 - } 153 - } 154 - } 155 - textarea { 156 - resize: vertical; 157 - } 158 - ::-webkit-search-decoration { 159 - -webkit-appearance: none; 160 - } 161 - ::-webkit-date-and-time-value { 162 - min-height: 1lh; 163 - text-align: inherit; 164 - } 165 - ::-webkit-datetime-edit { 166 - display: inline-flex; 167 - } 168 - ::-webkit-datetime-edit-fields-wrapper { 169 - padding: 0; 170 - } 171 - ::-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 { 172 - padding-block: 0; 173 - } 174 - ::-webkit-calendar-picker-indicator { 175 - line-height: 1; 176 - } 177 - :-moz-ui-invalid { 178 - box-shadow: none; 179 - } 180 - button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { 181 - appearance: button; 182 - } 183 - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { 184 - height: auto; 185 - } 186 - [hidden]:where(:not([hidden='until-found'])) { 187 - display: none !important; 188 - } 189 - } 190 - @layer utilities { 191 - .modal { 192 - pointer-events: none; 193 - visibility: hidden; 194 - position: fixed; 195 - inset: calc(0.25rem * 0); 196 - margin: calc(0.25rem * 0); 197 - display: grid; 198 - height: 100%; 199 - max-height: none; 200 - width: 100%; 201 - max-width: none; 202 - align-items: center; 203 - justify-items: center; 204 - background-color: transparent; 205 - padding: calc(0.25rem * 0); 206 - color: inherit; 207 - overflow-x: hidden; 208 - transition: translate 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out; 209 - overflow-y: hidden; 210 - overscroll-behavior: contain; 211 - z-index: 999; 212 - &::backdrop { 213 - display: none; 214 - } 215 - &.modal-open, &[open], &:target { 216 - pointer-events: auto; 217 - visibility: visible; 218 - opacity: 100%; 219 - background-color: oklch(0% 0 0/ 0.4); 220 - .modal-box { 221 - translate: 0 0; 222 - scale: 1; 223 - opacity: 1; 224 - } 225 - } 226 - @starting-style { 227 - &.modal-open, &[open], &:target { 228 - visibility: hidden; 229 - opacity: 0%; 230 - } 231 - } 232 - } 233 - .drawer-side { 234 - pointer-events: none; 235 - visibility: hidden; 236 - position: fixed; 237 - inset-inline-start: calc(0.25rem * 0); 238 - top: calc(0.25rem * 0); 239 - z-index: 1; 240 - grid-column-start: 1; 241 - grid-row-start: 1; 242 - display: grid; 243 - width: 100%; 244 - grid-template-columns: repeat(1, minmax(0, 1fr)); 245 - grid-template-rows: repeat(1, minmax(0, 1fr)); 246 - align-items: flex-start; 247 - justify-items: start; 248 - overflow-x: hidden; 249 - overflow-y: hidden; 250 - overscroll-behavior: contain; 251 - opacity: 0%; 252 - transition: opacity 0.2s ease-out 0.1s allow-discrete, visibility 0.3s ease-out 0.1s allow-discrete; 253 - height: 100vh; 254 - height: 100dvh; 255 - > .drawer-overlay { 256 - position: sticky; 257 - top: calc(0.25rem * 0); 258 - cursor: pointer; 259 - place-self: stretch; 260 - background-color: oklch(0% 0 0 / 40%); 261 - } 262 - > * { 263 - grid-column-start: 1; 264 - grid-row-start: 1; 265 - } 266 - > *:not(.drawer-overlay) { 267 - will-change: transform; 268 - transition: translate 0.3s ease-out; 269 - translate: -100%; 270 - [dir="rtl"] & { 271 - translate: 100%; 272 - } 273 - } 274 - } 275 - .modal-toggle { 276 - position: fixed; 277 - height: calc(0.25rem * 0); 278 - width: calc(0.25rem * 0); 279 - appearance: none; 280 - opacity: 0%; 281 - &:checked + .modal { 282 - pointer-events: auto; 283 - visibility: visible; 284 - opacity: 100%; 285 - background-color: oklch(0% 0 0/ 0.4); 286 - .modal-box { 287 - translate: 0 0; 288 - scale: 1; 289 - opacity: 1; 290 - } 291 - } 292 - @starting-style { 293 - &:checked + .modal { 294 - visibility: hidden; 295 - opacity: 0%; 296 - } 297 - } 298 - } 299 - .drawer-toggle { 300 - position: fixed; 301 - height: calc(0.25rem * 0); 302 - width: calc(0.25rem * 0); 303 - appearance: none; 304 - opacity: 0%; 305 - &:checked { 306 - & ~ .drawer-side { 307 - pointer-events: auto; 308 - visibility: visible; 309 - overflow-y: auto; 310 - opacity: 100%; 311 - & > *:not(.drawer-overlay) { 312 - translate: 0%; 313 - } 314 - } 315 - } 316 - &:focus-visible ~ .drawer-content label.drawer-button { 317 - outline: 2px solid; 318 - outline-offset: 2px; 319 - } 320 - } 321 - .tab { 322 - position: relative; 323 - display: inline-flex; 324 - cursor: pointer; 325 - appearance: none; 326 - flex-wrap: wrap; 327 - align-items: center; 328 - justify-content: center; 329 - text-align: center; 330 - webkit-user-select: none; 331 - user-select: none; 332 - &:hover { 333 - @media (hover: hover) { 334 - color: var(--color-base-content); 335 - } 336 - } 337 - --tab-p: 1rem; 338 - --tab-bg: var(--color-base-100); 339 - --tab-border-color: var(--color-base-300); 340 - --tab-radius-ss: 0; 341 - --tab-radius-se: 0; 342 - --tab-radius-es: 0; 343 - --tab-radius-ee: 0; 344 - --tab-order: 0; 345 - --tab-radius-min: calc(0.75rem - var(--border)); 346 - border-color: #0000; 347 - order: var(--tab-order); 348 - height: var(--tab-height); 349 - font-size: 0.875rem; 350 - padding-inline-start: var(--tab-p); 351 - padding-inline-end: var(--tab-p); 352 - &:is(input[type="radio"]) { 353 - min-width: fit-content; 354 - &:after { 355 - content: attr(aria-label); 356 - } 357 - } 358 - &:is(label) { 359 - position: relative; 360 - input { 361 - position: absolute; 362 - inset: calc(0.25rem * 0); 363 - cursor: pointer; 364 - appearance: none; 365 - opacity: 0%; 366 - } 367 - } 368 - &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"]) { 369 - & + .tab-content { 370 - display: block; 371 - height: calc(100% - var(--tab-height) + var(--border)); 372 - } 373 - } 374 - &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"]) { 375 - color: var(--color-base-content); 376 - @supports (color: color-mix(in lab, red, red)) { 377 - color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 378 - } 379 - } 380 - &:not(input):empty { 381 - flex-grow: 1; 382 - cursor: default; 383 - } 384 - &:focus { 385 - --tw-outline-style: none; 386 - outline-style: none; 387 - @media (forced-colors: active) { 388 - outline: 2px solid transparent; 389 - outline-offset: 2px; 390 - } 391 - } 392 - &:focus-visible, &:is(label:has(:checked:focus-visible)) { 393 - outline: 2px solid currentColor; 394 - outline-offset: -5px; 395 - } 396 - &[disabled] { 397 - pointer-events: none; 398 - opacity: 40%; 399 - } 400 - } 401 - .menu { 402 - display: flex; 403 - width: fit-content; 404 - flex-direction: column; 405 - flex-wrap: wrap; 406 - padding: calc(0.25rem * 2); 407 - --menu-active-fg: var(--color-neutral-content); 408 - --menu-active-bg: var(--color-neutral); 409 - font-size: 0.875rem; 410 - :where(li ul) { 411 - position: relative; 412 - margin-inline-start: calc(0.25rem * 4); 413 - padding-inline-start: calc(0.25rem * 2); 414 - white-space: nowrap; 415 - &:before { 416 - position: absolute; 417 - inset-inline-start: calc(0.25rem * 0); 418 - top: calc(0.25rem * 3); 419 - bottom: calc(0.25rem * 3); 420 - background-color: var(--color-base-content); 421 - opacity: 10%; 422 - width: var(--border); 423 - content: ""; 424 - } 425 - } 426 - :where(li > .menu-dropdown:not(.menu-dropdown-show)) { 427 - display: none; 428 - } 429 - :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { 430 - display: grid; 431 - grid-auto-flow: column; 432 - align-content: flex-start; 433 - align-items: center; 434 - gap: calc(0.25rem * 2); 435 - border-radius: var(--radius-field); 436 - padding-inline: calc(0.25rem * 3); 437 - padding-block: calc(0.25rem * 1.5); 438 - text-align: start; 439 - transition-property: color, background-color, box-shadow; 440 - transition-duration: 0.2s; 441 - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); 442 - grid-auto-columns: minmax(auto, max-content) auto max-content; 443 - text-wrap: balance; 444 - user-select: none; 445 - } 446 - :where(li > details > summary) { 447 - --tw-outline-style: none; 448 - outline-style: none; 449 - @media (forced-colors: active) { 450 - outline: 2px solid transparent; 451 - outline-offset: 2px; 452 - } 453 - &::-webkit-details-marker { 454 - display: none; 455 - } 456 - } 457 - :where(li > details > summary), :where(li > .menu-dropdown-toggle) { 458 - &:after { 459 - justify-self: flex-end; 460 - display: block; 461 - height: 0.375rem; 462 - width: 0.375rem; 463 - rotate: -135deg; 464 - translate: 0 -1px; 465 - transition-property: rotate, translate; 466 - transition-duration: 0.2s; 467 - content: ""; 468 - transform-origin: 50% 50%; 469 - box-shadow: 2px 2px inset; 470 - pointer-events: none; 471 - } 472 - } 473 - :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { 474 - rotate: 45deg; 475 - translate: 0 1px; 476 - } 477 - :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) { 478 - &.menu-focus, &:focus-visible { 479 - cursor: pointer; 480 - background-color: var(--color-base-content); 481 - @supports (color: color-mix(in lab, red, red)) { 482 - background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); 483 - } 484 - color: var(--color-base-content); 485 - --tw-outline-style: none; 486 - outline-style: none; 487 - @media (forced-colors: active) { 488 - outline: 2px solid transparent; 489 - outline-offset: 2px; 490 - } 491 - } 492 - } 493 - :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) { 494 - cursor: pointer; 495 - background-color: var(--color-base-content); 496 - @supports (color: color-mix(in lab, red, red)) { 497 - background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); 498 - } 499 - --tw-outline-style: none; 500 - outline-style: none; 501 - @media (forced-colors: active) { 502 - outline: 2px solid transparent; 503 - outline-offset: 2px; 504 - } 505 - box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset; 506 - } 507 - :where(li:empty) { 508 - background-color: var(--color-base-content); 509 - opacity: 10%; 510 - margin: 0.5rem 1rem; 511 - height: 1px; 512 - } 513 - :where(li) { 514 - position: relative; 515 - display: flex; 516 - flex-shrink: 0; 517 - flex-direction: column; 518 - flex-wrap: wrap; 519 - align-items: stretch; 520 - .badge { 521 - justify-self: flex-end; 522 - } 523 - & > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active { 524 - --tw-outline-style: none; 525 - outline-style: none; 526 - @media (forced-colors: active) { 527 - outline: 2px solid transparent; 528 - outline-offset: 2px; 529 - } 530 - color: var(--menu-active-fg); 531 - background-color: var(--menu-active-bg); 532 - background-size: auto, calc(var(--noise) * 100%); 533 - background-image: none, var(--fx-noise); 534 - &:not(&:active) { 535 - box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg); 536 - } 537 - } 538 - &.menu-disabled { 539 - pointer-events: none; 540 - color: var(--color-base-content); 541 - @supports (color: color-mix(in lab, red, red)) { 542 - color: color-mix(in oklab, var(--color-base-content) 20%, transparent); 543 - } 544 - } 545 - } 546 - .dropdown:focus-within { 547 - .menu-dropdown-toggle:after { 548 - rotate: 45deg; 549 - translate: 0 1px; 550 - } 551 - } 552 - .dropdown-content { 553 - margin-top: calc(0.25rem * 2); 554 - padding: calc(0.25rem * 2); 555 - &:before { 556 - display: none; 557 - } 558 - } 559 - } 560 - .dock { 561 - position: fixed; 562 - right: calc(0.25rem * 0); 563 - bottom: calc(0.25rem * 0); 564 - left: calc(0.25rem * 0); 565 - z-index: 1; 566 - display: flex; 567 - width: 100%; 568 - flex-direction: row; 569 - align-items: center; 570 - justify-content: space-around; 571 - background-color: var(--color-base-100); 572 - padding: calc(0.25rem * 2); 573 - color: currentColor; 574 - border-top: 0.5px solid var(--color-base-content); 575 - @supports (color: color-mix(in lab, red, red)) { 576 - border-top: 0.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000); 577 - } 578 - height: 4rem; 579 - height: calc(4rem + env(safe-area-inset-bottom)); 580 - padding-bottom: env(safe-area-inset-bottom); 581 - > * { 582 - position: relative; 583 - margin-bottom: calc(0.25rem * 2); 584 - display: flex; 585 - height: 100%; 586 - max-width: calc(0.25rem * 32); 587 - flex-shrink: 1; 588 - flex-basis: 100%; 589 - cursor: pointer; 590 - flex-direction: column; 591 - align-items: center; 592 - justify-content: center; 593 - gap: 1px; 594 - border-radius: var(--radius-box); 595 - background-color: transparent; 596 - transition: opacity 0.2s ease-out; 597 - @media (hover: hover) { 598 - &:hover { 599 - opacity: 80%; 600 - } 601 - } 602 - &[aria-disabled="true"], &[disabled] { 603 - &, &:hover { 604 - pointer-events: none; 605 - color: var(--color-base-content); 606 - @supports (color: color-mix(in lab, red, red)) { 607 - color: color-mix(in oklab, var(--color-base-content) 10%, transparent); 608 - } 609 - opacity: 100%; 610 - } 611 - } 612 - .dock-label { 613 - font-size: 0.6875rem; 614 - } 615 - &:after { 616 - content: ""; 617 - position: absolute; 618 - height: calc(0.25rem * 1); 619 - width: calc(0.25rem * 6); 620 - border-radius: calc(infinity * 1px); 621 - background-color: transparent; 622 - bottom: 0.2rem; 623 - border-top: 3px solid transparent; 624 - transition: background-color 0.1s ease-out, text-color 0.1s ease-out, width 0.1s ease-out; 625 - } 626 - } 627 - } 628 - .btn { 629 - :where(&) { 630 - width: unset; 631 - } 632 - display: inline-flex; 633 - flex-shrink: 0; 634 - cursor: pointer; 635 - flex-wrap: nowrap; 636 - align-items: center; 637 - justify-content: center; 638 - gap: calc(0.25rem * 1.5); 639 - text-align: center; 640 - vertical-align: middle; 641 - outline-offset: 2px; 642 - webkit-user-select: none; 643 - user-select: none; 644 - padding-inline: var(--btn-p); 645 - color: var(--btn-fg); 646 - --tw-prose-links: var(--btn-fg); 647 - height: var(--size); 648 - font-size: var(--fontsize, 0.875rem); 649 - font-weight: 600; 650 - outline-color: var(--btn-color, var(--color-base-content)); 651 - transition-property: color, background-color, border-color, box-shadow; 652 - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); 653 - transition-duration: 0.2s; 654 - border-start-start-radius: var(--join-ss, var(--radius-field)); 655 - border-start-end-radius: var(--join-se, var(--radius-field)); 656 - border-end-start-radius: var(--join-es, var(--radius-field)); 657 - border-end-end-radius: var(--join-ee, var(--radius-field)); 658 - background-color: var(--btn-bg); 659 - background-size: auto, calc(var(--noise) * 100%); 660 - background-image: none, var(--btn-noise); 661 - border-width: var(--border); 662 - border-style: solid; 663 - border-color: var(--btn-border); 664 - text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15)); 665 - touch-action: manipulation; 666 - box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow); 667 - --size: calc(var(--size-field, 0.25rem) * 10); 668 - --btn-bg: var(--btn-color, var(--color-base-200)); 669 - --btn-fg: var(--color-base-content); 670 - --btn-p: 1rem; 671 - --btn-border: var(--btn-bg); 672 - @supports (color: color-mix(in lab, red, red)) { 673 - --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); 674 - } 675 - --btn-shadow: 0 3px 2px -2px var(--btn-bg), 676 - 0 4px 3px -2px var(--btn-bg); 677 - @supports (color: color-mix(in lab, red, red)) { 678 - --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 679 - 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); 680 - } 681 - --btn-noise: var(--fx-noise); 682 - .prose & { 683 - text-decoration-line: none; 684 - } 685 - @media (hover: hover) { 686 - &:hover { 687 - --btn-bg: var(--btn-color, var(--color-base-200)); 688 - @supports (color: color-mix(in lab, red, red)) { 689 - --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); 690 - } 691 - } 692 - } 693 - &:focus-visible { 694 - outline-width: 2px; 695 - outline-style: solid; 696 - isolation: isolate; 697 - } 698 - &:active:not(.btn-active) { 699 - translate: 0 0.5px; 700 - --btn-bg: var(--btn-color, var(--color-base-200)); 701 - @supports (color: color-mix(in lab, red, red)) { 702 - --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); 703 - } 704 - --btn-border: var(--btn-color, var(--color-base-200)); 705 - @supports (color: color-mix(in lab, red, red)) { 706 - --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); 707 - } 708 - --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); 709 - } 710 - &:is(:disabled, [disabled], .btn-disabled) { 711 - &:not(.btn-link, .btn-ghost) { 712 - background-color: var(--color-base-content); 713 - @supports (color: color-mix(in lab, red, red)) { 714 - background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); 715 - } 716 - box-shadow: none; 717 - } 718 - pointer-events: none; 719 - --btn-border: #0000; 720 - --btn-noise: none; 721 - --btn-fg: var(--color-base-content); 722 - @supports (color: color-mix(in lab, red, red)) { 723 - --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); 724 - } 725 - @media (hover: hover) { 726 - &:hover { 727 - pointer-events: none; 728 - background-color: var(--color-neutral); 729 - @supports (color: color-mix(in lab, red, red)) { 730 - background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); 731 - } 732 - --btn-border: #0000; 733 - --btn-fg: var(--color-base-content); 734 - @supports (color: color-mix(in lab, red, red)) { 735 - --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); 736 - } 737 - } 738 - } 739 - } 740 - &:is(input[type="checkbox"], input[type="radio"]) { 741 - appearance: none; 742 - &::after { 743 - content: attr(aria-label); 744 - } 745 - } 746 - &:where(input:checked:not(.filter .btn)) { 747 - --btn-color: var(--color-primary); 748 - --btn-fg: var(--color-primary-content); 749 - isolation: isolate; 750 - } 751 - } 752 - .loading { 753 - pointer-events: none; 754 - display: inline-block; 755 - aspect-ratio: 1 / 1; 756 - background-color: currentColor; 757 - vertical-align: middle; 758 - width: calc(var(--size-selector, 0.25rem) * 6); 759 - mask-size: 100%; 760 - mask-repeat: no-repeat; 761 - mask-position: center; 762 - mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); 763 - } 764 - .tabs-lift { 765 - --tabs-height: auto; 766 - --tabs-direction: row; 767 - > .tab { 768 - --tab-border: 0 0 var(--border) 0; 769 - --tab-radius-ss: min(var(--radius-field), var(--tab-radius-min)); 770 - --tab-radius-se: min(var(--radius-field), var(--tab-radius-min)); 771 - --tab-radius-es: 0; 772 - --tab-radius-ee: 0; 773 - --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); 774 - --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; 775 - --tab-corner-width: calc(100% + min(var(--radius-field), var(--tab-radius-min)) * 2); 776 - --tab-corner-height: min(var(--radius-field), var(--tab-radius-min)); 777 - --tab-corner-position: top left, top right; 778 - border-width: var(--tab-border); 779 - border-start-start-radius: var(--tab-radius-ss); 780 - border-start-end-radius: var(--tab-radius-se); 781 - border-end-start-radius: var(--tab-radius-es); 782 - border-end-end-radius: var(--tab-radius-ee); 783 - padding: var(--tab-paddings); 784 - border-color: var(--tab-border-colors); 785 - &:is(.tab-active, [aria-selected="true"]):not(.tab-disabled, [disabled]), &:is(input:checked, label:has(:checked)) { 786 - --tab-border: var(--border) var(--border) 0 var(--border); 787 - --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 788 - var(--tab-border-color); 789 - --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) 790 - calc(var(--tab-p) - var(--border)); 791 - --tab-inset: auto auto 0 auto; 792 - --tab-grad: calc(69% - var(--border)); 793 - --radius-start: radial-gradient( 794 - circle at top left, 795 - #0000 var(--tab-grad), 796 - var(--tab-border-color) calc(var(--tab-grad) + 0.25px), 797 - var(--tab-border-color) calc(var(--tab-grad) + var(--border)), 798 - var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px) 799 - ); 800 - --radius-end: radial-gradient( 801 - circle at top right, 802 - #0000 var(--tab-grad), 803 - var(--tab-border-color) calc(var(--tab-grad) + 0.25px), 804 - var(--tab-border-color) calc(var(--tab-grad) + var(--border)), 805 - var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px) 806 - ); 807 - background-color: var(--tab-bg); 808 - &:before { 809 - z-index: 1; 810 - content: ""; 811 - display: block; 812 - position: absolute; 813 - width: var(--tab-corner-width); 814 - height: var(--tab-corner-height); 815 - background-position: var(--tab-corner-position); 816 - background-image: var(--radius-start), var(--radius-end); 817 - background-size: min(var(--radius-field), var(--tab-radius-min)) min(var(--radius-field), var(--tab-radius-min)); 818 - background-repeat: no-repeat; 819 - inset: var(--tab-inset); 820 - } 821 - &:first-child:before { 822 - --radius-start: none; 823 - } 824 - [dir="rtl"] &:first-child:before { 825 - transform: rotateY(180deg); 826 - } 827 - &:last-child:before { 828 - --radius-end: none; 829 - } 830 - [dir="rtl"] &:last-child:before { 831 - transform: rotateY(180deg); 832 - } 833 - } 834 - } 835 - &:has(.tab-content) { 836 - > .tab:first-child { 837 - &:not(.tab-active, [aria-selected="true"]) { 838 - --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 839 - var(--tab-border-color); 840 - } 841 - } 842 - } 843 - .tab-content { 844 - --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; 845 - --tabcontent-radius-ss: 0; 846 - --tabcontent-radius-se: var(--radius-box); 847 - --tabcontent-radius-es: var(--radius-box); 848 - --tabcontent-radius-ee: var(--radius-box); 849 - } 850 - :checked, label:has(:checked), :is(.tab-active, [aria-selected="true"]) { 851 - & + .tab-content { 852 - &:nth-child(1), &:nth-child(n + 3) { 853 - --tabcontent-radius-ss: var(--radius-box); 854 - } 855 - } 856 - } 857 - } 858 - .list { 859 - display: flex; 860 - flex-direction: column; 861 - font-size: 0.875rem; 862 - :where(.list-row) { 863 - --list-grid-cols: minmax(0, auto) 1fr; 864 - position: relative; 865 - display: grid; 866 - grid-auto-flow: column; 867 - gap: calc(0.25rem * 4); 868 - border-radius: var(--radius-box); 869 - padding: calc(0.25rem * 4); 870 - word-break: break-word; 871 - grid-template-columns: var(--list-grid-cols); 872 - &:has(.list-col-grow:nth-child(1)) { 873 - --list-grid-cols: 1fr; 874 - } 875 - &:has(.list-col-grow:nth-child(2)) { 876 - --list-grid-cols: minmax(0, auto) 1fr; 877 - } 878 - &:has(.list-col-grow:nth-child(3)) { 879 - --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr; 880 - } 881 - &:has(.list-col-grow:nth-child(4)) { 882 - --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; 883 - } 884 - &:has(.list-col-grow:nth-child(5)) { 885 - --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; 886 - } 887 - &:has(.list-col-grow:nth-child(6)) { 888 - --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 889 - minmax(0, auto) 1fr; 890 - } 891 - :not(.list-col-wrap) { 892 - grid-row-start: 1; 893 - } 894 - } 895 - & > :not(:last-child) { 896 - &.list-row, .list-row { 897 - &:after { 898 - content: ""; 899 - border-bottom: var(--border) solid; 900 - inset-inline: var(--radius-box); 901 - position: absolute; 902 - bottom: calc(0.25rem * 0); 903 - border-color: var(--color-base-content); 904 - @supports (color: color-mix(in lab, red, red)) { 905 - border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); 906 - } 907 - } 908 - } 909 - } 910 - } 911 - .toast { 912 - position: fixed; 913 - inset-inline-start: auto; 914 - inset-inline-end: calc(0.25rem * 4); 915 - top: auto; 916 - bottom: calc(0.25rem * 4); 917 - display: flex; 918 - flex-direction: column; 919 - gap: calc(0.25rem * 2); 920 - background-color: transparent; 921 - translate: var(--toast-x, 0) var(--toast-y, 0); 922 - width: max-content; 923 - max-width: calc(100vw - 2rem); 924 - & > * { 925 - animation: toast 0.25s ease-out; 926 - } 927 - &:where(.toast-start) { 928 - inset-inline-start: calc(0.25rem * 4); 929 - inset-inline-end: auto; 930 - --toast-x: 0; 931 - } 932 - &:where(.toast-center) { 933 - inset-inline-start: calc(1/2 * 100%); 934 - inset-inline-end: calc(1/2 * 100%); 935 - --toast-x: -50%; 936 - } 937 - &:where(.toast-end) { 938 - inset-inline-start: auto; 939 - inset-inline-end: calc(0.25rem * 4); 940 - --toast-x: 0; 941 - } 942 - &:where(.toast-bottom) { 943 - top: auto; 944 - bottom: calc(0.25rem * 4); 945 - --toast-y: 0; 946 - } 947 - &:where(.toast-middle) { 948 - top: calc(1/2 * 100%); 949 - bottom: auto; 950 - --toast-y: -50%; 951 - } 952 - &:where(.toast-top) { 953 - top: calc(0.25rem * 4); 954 - bottom: auto; 955 - --toast-y: 0; 956 - } 957 - } 958 - .input { 959 - cursor: text; 960 - border: var(--border) solid #0000; 961 - position: relative; 962 - display: inline-flex; 963 - flex-shrink: 1; 964 - appearance: none; 965 - align-items: center; 966 - gap: calc(0.25rem * 2); 967 - background-color: var(--color-base-100); 968 - padding-inline: calc(0.25rem * 3); 969 - vertical-align: middle; 970 - white-space: nowrap; 971 - width: clamp(3rem, 20rem, 100%); 972 - height: var(--size); 973 - font-size: 0.875rem; 974 - touch-action: manipulation; 975 - border-start-start-radius: var(--join-ss, var(--radius-field)); 976 - border-start-end-radius: var(--join-se, var(--radius-field)); 977 - border-end-start-radius: var(--join-es, var(--radius-field)); 978 - border-end-end-radius: var(--join-ee, var(--radius-field)); 979 - border-color: var(--input-color); 980 - box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; 981 - @supports (color: color-mix(in lab, red, red)) { 982 - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; 983 - } 984 - --size: calc(var(--size-field, 0.25rem) * 10); 985 - --input-color: var(--color-base-content); 986 - @supports (color: color-mix(in lab, red, red)) { 987 - --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); 988 - } 989 - &:where(input) { 990 - display: inline-flex; 991 - } 992 - :where(input) { 993 - display: inline-flex; 994 - height: 100%; 995 - width: 100%; 996 - appearance: none; 997 - background-color: transparent; 998 - border: none; 999 - &:focus, &:focus-within { 1000 - --tw-outline-style: none; 1001 - outline-style: none; 1002 - @media (forced-colors: active) { 1003 - outline: 2px solid transparent; 1004 - outline-offset: 2px; 1005 - } 1006 - } 1007 - } 1008 - :where(input[type="url"]), :where(input[type="email"]) { 1009 - direction: ltr; 1010 - } 1011 - :where(input[type="date"]) { 1012 - display: inline-block; 1013 - } 1014 - &:focus, &:focus-within { 1015 - --input-color: var(--color-base-content); 1016 - box-shadow: 0 1px var(--input-color); 1017 - @supports (color: color-mix(in lab, red, red)) { 1018 - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); 1019 - } 1020 - outline: 2px solid var(--input-color); 1021 - outline-offset: 2px; 1022 - isolation: isolate; 1023 - z-index: 1; 1024 - } 1025 - &:has(> input[disabled]), &:is(:disabled, [disabled]) { 1026 - cursor: not-allowed; 1027 - border-color: var(--color-base-200); 1028 - background-color: var(--color-base-200); 1029 - color: var(--color-base-content); 1030 - @supports (color: color-mix(in lab, red, red)) { 1031 - color: color-mix(in oklab, var(--color-base-content) 40%, transparent); 1032 - } 1033 - &::placeholder { 1034 - color: var(--color-base-content); 1035 - @supports (color: color-mix(in lab, red, red)) { 1036 - color: color-mix(in oklab, var(--color-base-content) 20%, transparent); 1037 - } 1038 - } 1039 - box-shadow: none; 1040 - } 1041 - &:has(> input[disabled]) > input[disabled] { 1042 - cursor: not-allowed; 1043 - } 1044 - &::-webkit-date-and-time-value { 1045 - text-align: inherit; 1046 - } 1047 - &[type="number"] { 1048 - &::-webkit-inner-spin-button { 1049 - margin-block: calc(0.25rem * -3); 1050 - margin-inline-end: calc(0.25rem * -3); 1051 - } 1052 - } 1053 - &::-webkit-calendar-picker-indicator { 1054 - position: absolute; 1055 - inset-inline-end: 0.75em; 1056 - } 1057 - } 1058 - .indicator { 1059 - position: relative; 1060 - display: inline-flex; 1061 - width: max-content; 1062 - :where(.indicator-item) { 1063 - z-index: 1; 1064 - position: absolute; 1065 - white-space: nowrap; 1066 - top: var(--indicator-t, 0); 1067 - bottom: var(--indicator-b, auto); 1068 - left: var(--indicator-s, auto); 1069 - right: var(--indicator-e, 0); 1070 - translate: var(--indicator-x, 50%) var(--indicator-y, -50%); 1071 - } 1072 - } 1073 - .timeline { 1074 - position: relative; 1075 - display: flex; 1076 - > li { 1077 - position: relative; 1078 - display: grid; 1079 - flex-shrink: 0; 1080 - align-items: center; 1081 - grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var( --timeline-row-end, minmax(0, 1fr) ); 1082 - grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var( --timeline-col-end, minmax(0, 1fr) ); 1083 - > hr { 1084 - border: none; 1085 - width: 100%; 1086 - &:first-child { 1087 - grid-column-start: 1; 1088 - grid-row-start: 2; 1089 - } 1090 - &:last-child { 1091 - grid-column-start: 3; 1092 - grid-column-end: none; 1093 - grid-row-start: 2; 1094 - grid-row-end: auto; 1095 - } 1096 - @media print { 1097 - border: 0.1px solid var(--color-base-300); 1098 - } 1099 - } 1100 - } 1101 - :where(hr) { 1102 - height: calc(0.25rem * 1); 1103 - background-color: var(--color-base-300); 1104 - } 1105 - &:has(.timeline-middle hr) { 1106 - &:first-child { 1107 - border-start-start-radius: 0; 1108 - border-end-start-radius: 0; 1109 - border-start-end-radius: var(--radius-selector); 1110 - border-end-end-radius: var(--radius-selector); 1111 - } 1112 - &:last-child { 1113 - border-start-start-radius: var(--radius-selector); 1114 - border-end-start-radius: var(--radius-selector); 1115 - border-start-end-radius: 0; 1116 - border-end-end-radius: 0; 1117 - } 1118 - } 1119 - &:not(:has(.timeline-middle)) { 1120 - :first-child hr:last-child { 1121 - border-start-start-radius: var(--radius-selector); 1122 - border-end-start-radius: var(--radius-selector); 1123 - border-start-end-radius: 0; 1124 - border-end-end-radius: 0; 1125 - } 1126 - :last-child hr:first-child { 1127 - border-start-start-radius: 0; 1128 - border-end-start-radius: 0; 1129 - border-start-end-radius: var(--radius-selector); 1130 - border-end-end-radius: var(--radius-selector); 1131 - } 1132 - } 1133 - } 1134 - .card { 1135 - position: relative; 1136 - display: flex; 1137 - flex-direction: column; 1138 - border-radius: var(--radius-box); 1139 - outline-width: 2px; 1140 - transition: outline 0.2s ease-in-out; 1141 - outline: 0 solid #0000; 1142 - outline-offset: 2px; 1143 - &:focus { 1144 - --tw-outline-style: none; 1145 - outline-style: none; 1146 - @media (forced-colors: active) { 1147 - outline: 2px solid transparent; 1148 - outline-offset: 2px; 1149 - } 1150 - } 1151 - &:focus-visible { 1152 - outline-color: currentColor; 1153 - } 1154 - :where(figure:first-child) { 1155 - overflow: hidden; 1156 - border-start-start-radius: inherit; 1157 - border-start-end-radius: inherit; 1158 - border-end-start-radius: unset; 1159 - border-end-end-radius: unset; 1160 - } 1161 - :where(figure:last-child) { 1162 - overflow: hidden; 1163 - border-start-start-radius: unset; 1164 - border-start-end-radius: unset; 1165 - border-end-start-radius: inherit; 1166 - border-end-end-radius: inherit; 1167 - } 1168 - &:where(.card-border) { 1169 - border: var(--border) solid var(--color-base-200); 1170 - } 1171 - &:where(.card-dash) { 1172 - border: var(--border) dashed var(--color-base-200); 1173 - } 1174 - &.image-full { 1175 - display: grid; 1176 - > * { 1177 - grid-column-start: 1; 1178 - grid-row-start: 1; 1179 - } 1180 - > .card-body { 1181 - position: relative; 1182 - color: var(--color-neutral-content); 1183 - } 1184 - :where(figure) { 1185 - overflow: hidden; 1186 - border-radius: inherit; 1187 - } 1188 - > figure img { 1189 - height: 100%; 1190 - object-fit: cover; 1191 - filter: brightness(28%); 1192 - } 1193 - } 1194 - figure { 1195 - display: flex; 1196 - align-items: center; 1197 - justify-content: center; 1198 - } 1199 - &:has(> input:is(input[type="checkbox"], input[type="radio"])) { 1200 - cursor: pointer; 1201 - user-select: none; 1202 - } 1203 - &:has(> :checked) { 1204 - outline: 2px solid currentColor; 1205 - } 1206 - } 1207 - .menu-horizontal { 1208 - display: inline-flex; 1209 - flex-direction: row; 1210 - & > li:not(.menu-title) > details > ul { 1211 - position: absolute; 1212 - margin-inline-start: calc(0.25rem * 0); 1213 - margin-top: calc(0.25rem * 4); 1214 - padding-block: calc(0.25rem * 2); 1215 - padding-inline-end: calc(0.25rem * 2); 1216 - } 1217 - & > li > details > ul { 1218 - &:before { 1219 - content: none; 1220 - } 1221 - } 1222 - :where(& > li:not(.menu-title) > details > ul) { 1223 - border-radius: var(--radius-box); 1224 - background-color: var(--color-base-100); 1225 - box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1); 1226 - } 1227 - } 1228 - .avatar { 1229 - position: relative; 1230 - display: inline-flex; 1231 - vertical-align: middle; 1232 - & > div { 1233 - display: block; 1234 - aspect-ratio: 1 / 1; 1235 - overflow: hidden; 1236 - } 1237 - img { 1238 - height: 100%; 1239 - width: 100%; 1240 - object-fit: cover; 1241 - } 1242 - } 1243 - .checkbox { 1244 - border: var(--border) solid var(--input-color, var(--color-base-content)); 1245 - @supports (color: color-mix(in lab, red, red)) { 1246 - border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); 1247 - } 1248 - position: relative; 1249 - display: inline-block; 1250 - flex-shrink: 0; 1251 - cursor: pointer; 1252 - appearance: none; 1253 - border-radius: var(--radius-selector); 1254 - padding: calc(0.25rem * 1); 1255 - vertical-align: middle; 1256 - color: var(--color-base-content); 1257 - box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000; 1258 - transition: background-color 0.2s, box-shadow 0.2s; 1259 - --size: calc(var(--size-selector, 0.25rem) * 6); 1260 - width: var(--size); 1261 - height: var(--size); 1262 - background-size: auto, calc(var(--noise) * 100%); 1263 - background-image: none, var(--fx-noise); 1264 - &:before { 1265 - --tw-content: ""; 1266 - content: var(--tw-content); 1267 - display: block; 1268 - width: 100%; 1269 - height: 100%; 1270 - rotate: 45deg; 1271 - background-color: currentColor; 1272 - opacity: 0%; 1273 - transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s; 1274 - transition-delay: 0.1s; 1275 - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); 1276 - box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; 1277 - font-size: 1rem; 1278 - line-height: 0.75; 1279 - } 1280 - &:focus-visible { 1281 - outline: 2px solid var(--input-color, currentColor); 1282 - outline-offset: 2px; 1283 - } 1284 - &:checked, &[aria-checked="true"] { 1285 - background-color: var(--input-color, #0000); 1286 - box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); 1287 - &:before { 1288 - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); 1289 - opacity: 100%; 1290 - } 1291 - @media (forced-colors: active) { 1292 - &:before { 1293 - rotate: 0deg; 1294 - background-color: transparent; 1295 - --tw-content: "✔︎"; 1296 - clip-path: none; 1297 - } 1298 - } 1299 - @media print { 1300 - &:before { 1301 - rotate: 0deg; 1302 - background-color: transparent; 1303 - --tw-content: "✔︎"; 1304 - clip-path: none; 1305 - } 1306 - } 1307 - } 1308 - &:indeterminate { 1309 - &:before { 1310 - rotate: 0deg; 1311 - opacity: 100%; 1312 - translate: 0 -35%; 1313 - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); 1314 - } 1315 - } 1316 - &:disabled { 1317 - cursor: not-allowed; 1318 - opacity: 20%; 1319 - } 1320 - } 1321 - .radio { 1322 - position: relative; 1323 - display: inline-block; 1324 - flex-shrink: 0; 1325 - cursor: pointer; 1326 - appearance: none; 1327 - border-radius: calc(infinity * 1px); 1328 - padding: calc(0.25rem * 1); 1329 - vertical-align: middle; 1330 - border: var(--border) solid var(--input-color, currentColor); 1331 - @supports (color: color-mix(in lab, red, red)) { 1332 - border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000)); 1333 - } 1334 - box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset; 1335 - --size: calc(var(--size-selector, 0.25rem) * 6); 1336 - width: var(--size); 1337 - height: var(--size); 1338 - color: var(--input-color, currentColor); 1339 - &:before { 1340 - display: block; 1341 - width: 100%; 1342 - height: 100%; 1343 - border-radius: calc(infinity * 1px); 1344 - --tw-content: ""; 1345 - content: var(--tw-content); 1346 - background-size: auto, calc(var(--noise) * 100%); 1347 - background-image: none, var(--fx-noise); 1348 - } 1349 - &:focus-visible { 1350 - outline: 2px solid currentColor; 1351 - } 1352 - &:checked, &[aria-checked="true"] { 1353 - animation: radio 0.2s ease-out; 1354 - border-color: currentColor; 1355 - background-color: var(--color-base-100); 1356 - &:before { 1357 - background-color: currentColor; 1358 - box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); 1359 - } 1360 - @media (forced-colors: active) { 1361 - &:before { 1362 - outline-style: var(--tw-outline-style); 1363 - outline-width: 1px; 1364 - outline-offset: calc(1px * -1); 1365 - } 1366 - } 1367 - @media print { 1368 - &:before { 1369 - outline: 0.25rem solid; 1370 - outline-offset: -1rem; 1371 - } 1372 - } 1373 - } 1374 - &:disabled { 1375 - cursor: not-allowed; 1376 - opacity: 20%; 1377 - } 1378 - } 1379 - .drawer { 1380 - position: relative; 1381 - display: grid; 1382 - width: 100%; 1383 - grid-auto-columns: max-content auto; 1384 - } 1385 - .absolute { 1386 - position: absolute; 1387 - } 1388 - .fixed { 1389 - position: fixed; 1390 - } 1391 - .relative { 1392 - position: relative; 1393 - } 1394 - .inset-0 { 1395 - inset: calc(var(--spacing) * 0); 1396 - } 1397 - .end { 1398 - inset-inline-end: var(--spacing); 1399 - } 1400 - .top-0 { 1401 - top: calc(var(--spacing) * 0); 1402 - } 1403 - .top-4 { 1404 - top: calc(var(--spacing) * 4); 1405 - } 1406 - .top-\[4rem\] { 1407 - top: 4rem; 1408 - } 1409 - .right-0 { 1410 - right: calc(var(--spacing) * 0); 1411 - } 1412 - .right-4 { 1413 - right: calc(var(--spacing) * 4); 1414 - } 1415 - .bottom-0 { 1416 - bottom: calc(var(--spacing) * 0); 1417 - } 1418 - .bottom-4 { 1419 - bottom: calc(var(--spacing) * 4); 1420 - } 1421 - .bottom-20 { 1422 - bottom: calc(var(--spacing) * 20); 1423 - } 1424 - .left-0 { 1425 - left: calc(var(--spacing) * 0); 1426 - } 1427 - .hero-content { 1428 - isolation: isolate; 1429 - display: flex; 1430 - max-width: 80rem; 1431 - align-items: center; 1432 - justify-content: center; 1433 - gap: calc(0.25rem * 4); 1434 - padding: calc(0.25rem * 4); 1435 - } 1436 - .z-50 { 1437 - z-index: 50; 1438 - } 1439 - .z-100 { 1440 - z-index: 100; 1441 - } 1442 - .tab-content { 1443 - order: var(--tabcontent-order); 1444 - display: none; 1445 - border-color: transparent; 1446 - --tabcontent-radius-ss: 0; 1447 - --tabcontent-radius-se: 0; 1448 - --tabcontent-radius-es: 0; 1449 - --tabcontent-radius-ee: 0; 1450 - --tabcontent-order: 1; 1451 - width: 100%; 1452 - margin: var(--tabcontent-margin); 1453 - border-width: var(--border); 1454 - border-start-start-radius: var(--tabcontent-radius-ss); 1455 - border-start-end-radius: var(--tabcontent-radius-se); 1456 - border-end-start-radius: var(--tabcontent-radius-es); 1457 - border-end-end-radius: var(--tabcontent-radius-ee); 1458 - } 1459 - .hero { 1460 - display: grid; 1461 - width: 100%; 1462 - place-items: center; 1463 - background-size: cover; 1464 - background-position: center; 1465 - & > * { 1466 - grid-column-start: 1; 1467 - grid-row-start: 1; 1468 - } 1469 - } 1470 - .modal-box { 1471 - grid-column-start: 1; 1472 - grid-row-start: 1; 1473 - max-height: 100vh; 1474 - width: calc(11/12 * 100%); 1475 - max-width: 32rem; 1476 - background-color: var(--color-base-100); 1477 - padding: calc(0.25rem * 6); 1478 - transition: translate 0.3s ease-out, scale 0.3s ease-out, opacity 0.2s ease-out 0.05s, box-shadow 0.3s ease-out; 1479 - border-top-left-radius: var(--modal-tl, var(--radius-box)); 1480 - border-top-right-radius: var(--modal-tr, var(--radius-box)); 1481 - border-bottom-left-radius: var(--modal-bl, var(--radius-box)); 1482 - border-bottom-right-radius: var(--modal-br, var(--radius-box)); 1483 - scale: 95%; 1484 - opacity: 0; 1485 - box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px; 1486 - overflow-y: auto; 1487 - overscroll-behavior: contain; 1488 - } 1489 - .drawer-content { 1490 - grid-column-start: 2; 1491 - grid-row-start: 1; 1492 - min-width: calc(0.25rem * 0); 1493 - } 1494 - .float-right { 1495 - float: right; 1496 - } 1497 - .m-0 { 1498 - margin: calc(var(--spacing) * 0); 1499 - } 1500 - .m-4 { 1501 - margin: calc(var(--spacing) * 4); 1502 - } 1503 - .m-8 { 1504 - margin: calc(var(--spacing) * 8); 1505 - } 1506 - .ms-2 { 1507 - margin-inline-start: calc(var(--spacing) * 2); 1508 - } 1509 - .me-2 { 1510 - margin-inline-end: calc(var(--spacing) * 2); 1511 - } 1512 - .modal-action { 1513 - margin-top: calc(0.25rem * 6); 1514 - display: flex; 1515 - justify-content: flex-end; 1516 - gap: calc(0.25rem * 2); 1517 - } 1518 - .mt-2 { 1519 - margin-top: calc(var(--spacing) * 2); 1520 - } 1521 - .mt-4 { 1522 - margin-top: calc(var(--spacing) * 4); 1523 - } 1524 - .mt-10 { 1525 - margin-top: calc(var(--spacing) * 10); 1526 - } 1527 - .mr-2 { 1528 - margin-right: calc(var(--spacing) * 2); 1529 - } 1530 - .mb-2 { 1531 - margin-bottom: calc(var(--spacing) * 2); 1532 - } 1533 - .mb-4 { 1534 - margin-bottom: calc(var(--spacing) * 4); 1535 - } 1536 - .mb-\[20vh\] { 1537 - margin-bottom: 20vh; 1538 - } 1539 - .status { 1540 - display: inline-block; 1541 - aspect-ratio: 1 / 1; 1542 - width: calc(0.25rem * 2); 1543 - height: calc(0.25rem * 2); 1544 - border-radius: var(--radius-selector); 1545 - background-color: var(--color-base-content); 1546 - @supports (color: color-mix(in lab, red, red)) { 1547 - background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); 1548 - } 1549 - background-position: center; 1550 - background-repeat: no-repeat; 1551 - vertical-align: middle; 1552 - color: color-mix(in srgb, #000 30%, transparent); 1553 - @supports (color: color-mix(in lab, red, red)) { 1554 - color: color-mix(in oklab, var(--color-black) 30%, transparent); 1555 - } 1556 - background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000 ); 1557 - box-shadow: 0 2px 3px -1px currentColor; 1558 - @supports (color: color-mix(in lab, red, red)) { 1559 - box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); 1560 - } 1561 - } 1562 - .badge { 1563 - display: inline-flex; 1564 - align-items: center; 1565 - justify-content: center; 1566 - gap: calc(0.25rem * 2); 1567 - border-radius: var(--radius-selector); 1568 - vertical-align: middle; 1569 - color: var(--badge-fg); 1570 - border: var(--border) solid var(--badge-color, var(--color-base-200)); 1571 - font-size: 0.875rem; 1572 - width: fit-content; 1573 - padding-inline: calc(0.25rem * 3 - var(--border)); 1574 - background-size: auto, calc(var(--noise) * 100%); 1575 - background-image: none, var(--fx-noise); 1576 - background-color: var(--badge-bg); 1577 - --badge-bg: var(--badge-color, var(--color-base-100)); 1578 - --badge-fg: var(--color-base-content); 1579 - --size: calc(var(--size-selector, 0.25rem) * 6); 1580 - height: var(--size); 1581 - } 1582 - .tabs { 1583 - display: flex; 1584 - flex-wrap: wrap; 1585 - --tabs-height: auto; 1586 - --tabs-direction: row; 1587 - --tab-height: calc(var(--size-field, 0.25rem) * 10); 1588 - height: var(--tabs-height); 1589 - flex-direction: var(--tabs-direction); 1590 - } 1591 - .navbar { 1592 - display: flex; 1593 - width: 100%; 1594 - align-items: center; 1595 - padding: 0.5rem; 1596 - min-height: 4rem; 1597 - } 1598 - .footer { 1599 - display: grid; 1600 - width: 100%; 1601 - grid-auto-flow: row; 1602 - place-items: start; 1603 - column-gap: calc(0.25rem * 4); 1604 - row-gap: calc(0.25rem * 10); 1605 - font-size: 0.875rem; 1606 - line-height: 1.25rem; 1607 - & > * { 1608 - display: grid; 1609 - place-items: start; 1610 - gap: calc(0.25rem * 2); 1611 - } 1612 - &.footer-center { 1613 - grid-auto-flow: column dense; 1614 - place-items: center; 1615 - text-align: center; 1616 - & > * { 1617 - place-items: center; 1618 - } 1619 - } 1620 - } 1621 - .card-body { 1622 - display: flex; 1623 - flex: auto; 1624 - flex-direction: column; 1625 - gap: calc(0.25rem * 2); 1626 - padding: var(--card-p, 1.5rem); 1627 - font-size: var(--card-fs, 0.875rem); 1628 - :where(p) { 1629 - flex-grow: 1; 1630 - } 1631 - } 1632 - .fieldset-label { 1633 - display: flex; 1634 - align-items: center; 1635 - gap: calc(0.25rem * 1.5); 1636 - color: var(--color-base-content); 1637 - @supports (color: color-mix(in lab, red, red)) { 1638 - color: color-mix(in oklab, var(--color-base-content) 60%, transparent); 1639 - } 1640 - &:has(input) { 1641 - cursor: pointer; 1642 - } 1643 - } 1644 - .alert { 1645 - display: grid; 1646 - align-items: center; 1647 - gap: calc(0.25rem * 4); 1648 - border-radius: var(--radius-box); 1649 - padding-inline: calc(0.25rem * 4); 1650 - padding-block: calc(0.25rem * 3); 1651 - color: var(--color-base-content); 1652 - background-color: var(--alert-color, var(--color-base-200)); 1653 - justify-content: start; 1654 - justify-items: start; 1655 - grid-auto-flow: column; 1656 - grid-template-columns: auto; 1657 - text-align: start; 1658 - border: var(--border) solid var(--color-base-200); 1659 - font-size: 0.875rem; 1660 - line-height: 1.25rem; 1661 - background-size: auto, calc(var(--noise) * 100%); 1662 - background-image: none, var(--fx-noise); 1663 - box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); 1664 - @supports (color: color-mix(in lab, red, red)) { 1665 - box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); 1666 - } 1667 - &:has(:nth-child(2)) { 1668 - grid-template-columns: auto minmax(auto, 1fr); 1669 - } 1670 - &.alert-outline { 1671 - background-color: transparent; 1672 - color: var(--alert-color); 1673 - box-shadow: none; 1674 - background-image: none; 1675 - } 1676 - &.alert-dash { 1677 - background-color: transparent; 1678 - color: var(--alert-color); 1679 - border-style: dashed; 1680 - box-shadow: none; 1681 - background-image: none; 1682 - } 1683 - &.alert-soft { 1684 - color: var(--alert-color, var(--color-base-content)); 1685 - background: var(--alert-color, var(--color-base-content)); 1686 - @supports (color: color-mix(in lab, red, red)) { 1687 - background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) ); 1688 - } 1689 - border-color: var(--alert-color, var(--color-base-content)); 1690 - @supports (color: color-mix(in lab, red, red)) { 1691 - border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) ); 1692 - } 1693 - box-shadow: none; 1694 - background-image: none; 1695 - } 1696 - } 1697 - .fieldset { 1698 - display: grid; 1699 - gap: calc(0.25rem * 1.5); 1700 - padding-block: calc(0.25rem * 1); 1701 - font-size: 0.75rem; 1702 - grid-template-columns: 1fr; 1703 - grid-auto-rows: max-content; 1704 - } 1705 - .mask { 1706 - display: inline-block; 1707 - vertical-align: middle; 1708 - mask-size: contain; 1709 - mask-repeat: no-repeat; 1710 - mask-position: center; 1711 - } 1712 - .block { 1713 - display: block; 1714 - } 1715 - .flex { 1716 - display: flex; 1717 - } 1718 - .hidden { 1719 - display: none; 1720 - } 1721 - .inline { 1722 - display: inline; 1723 - } 1724 - .inline-block { 1725 - display: inline-block; 1726 - } 1727 - .modal-bottom { 1728 - place-items: end; 1729 - :where(.modal-box) { 1730 - height: auto; 1731 - width: 100%; 1732 - max-width: none; 1733 - max-height: calc(100vh - 5em); 1734 - translate: 0 100%; 1735 - scale: 1; 1736 - --modal-tl: var(--radius-box); 1737 - --modal-tr: var(--radius-box); 1738 - --modal-bl: 0; 1739 - --modal-br: 0; 1740 - } 1741 - } 1742 - .btn-circle { 1743 - border-radius: calc(infinity * 1px); 1744 - padding-inline: calc(0.25rem * 0); 1745 - width: var(--size); 1746 - height: var(--size); 1747 - } 1748 - .size-4 { 1749 - width: calc(var(--spacing) * 4); 1750 - height: calc(var(--spacing) * 4); 1751 - } 1752 - .size-\[1\.2em\] { 1753 - width: 1.2em; 1754 - height: 1.2em; 1755 - } 1756 - .h-4 { 1757 - height: calc(var(--spacing) * 4); 1758 - } 1759 - .h-5 { 1760 - height: calc(var(--spacing) * 5); 1761 - } 1762 - .h-6 { 1763 - height: calc(var(--spacing) * 6); 1764 - } 1765 - .h-8 { 1766 - height: calc(var(--spacing) * 8); 1767 - } 1768 - .h-10 { 1769 - height: calc(var(--spacing) * 10); 1770 - } 1771 - .h-32 { 1772 - height: calc(var(--spacing) * 32); 1773 - } 1774 - .h-\[60vh\] { 1775 - height: 60vh; 1776 - } 1777 - .h-\[80lvh\] { 1778 - height: 80lvh; 1779 - } 1780 - .h-auto { 1781 - height: auto; 1782 - } 1783 - .h-full { 1784 - height: 100%; 1785 - } 1786 - .h-screen { 1787 - height: 100vh; 1788 - } 1789 - .max-h-\[45vh\] { 1790 - max-height: 45vh; 1791 - } 1792 - .max-h-\[60vh\] { 1793 - max-height: 60vh; 1794 - } 1795 - .max-h-\[70VH\] { 1796 - max-height: 70VH; 1797 - } 1798 - .max-h-\[calc\(100vh-4rem\)\] { 1799 - max-height: calc(100vh - 4rem); 1800 - } 1801 - .loading-lg { 1802 - width: calc(var(--size-selector, 0.25rem) * 7); 1803 - } 1804 - .loading-md { 1805 - width: calc(var(--size-selector, 0.25rem) * 6); 1806 - } 1807 - .loading-xl { 1808 - width: calc(var(--size-selector, 0.25rem) * 8); 1809 - } 1810 - .w-2\/3 { 1811 - width: calc(2 / 3 * 100%); 1812 - } 1813 - .w-4\/6 { 1814 - width: calc(4 / 6 * 100%); 1815 - } 1816 - .w-5 { 1817 - width: calc(var(--spacing) * 5); 1818 - } 1819 - .w-6 { 1820 - width: calc(var(--spacing) * 6); 1821 - } 1822 - .w-8 { 1823 - width: calc(var(--spacing) * 8); 1824 - } 1825 - .w-28 { 1826 - width: calc(var(--spacing) * 28); 1827 - } 1828 - .w-80 { 1829 - width: calc(var(--spacing) * 80); 1830 - } 1831 - .w-\[24rem\] { 1832 - width: 24rem; 1833 - } 1834 - .w-\[99vw\] { 1835 - width: 99vw; 1836 - } 1837 - .w-full { 1838 - width: 100%; 1839 - } 1840 - .w-screen { 1841 - width: 100vw; 1842 - } 1843 - .max-w-\[unset\] { 1844 - max-width: unset; 1845 - } 1846 - .max-w-md { 1847 - max-width: var(--container-md); 1848 - } 1849 - .max-w-sm { 1850 - max-width: var(--container-sm); 1851 - } 1852 - .flex-1 { 1853 - flex: 1; 1854 - } 1855 - .flex-none { 1856 - flex: none; 1857 - } 1858 - .shrink-0 { 1859 - flex-shrink: 0; 1860 - } 1861 - .transform { 1862 - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); 1863 - } 1864 - .skeleton { 1865 - border-radius: var(--radius-box); 1866 - background-color: var(--color-base-300); 1867 - @media (prefers-reduced-motion: reduce) { 1868 - transition-duration: 15s; 1869 - } 1870 - will-change: background-position; 1871 - animation: skeleton 1.8s ease-in-out infinite; 1872 - background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100% ); 1873 - background-size: 200% auto; 1874 - background-repeat: no-repeat; 1875 - background-position-x: -50%; 1876 - } 1877 - .link { 1878 - cursor: pointer; 1879 - text-decoration-line: underline; 1880 - &:focus { 1881 - --tw-outline-style: none; 1882 - outline-style: none; 1883 - @media (forced-colors: active) { 1884 - outline: 2px solid transparent; 1885 - outline-offset: 2px; 1886 - } 1887 - } 1888 - &:focus-visible { 1889 - outline: 2px solid currentColor; 1890 - outline-offset: 2px; 1891 - } 1892 - } 1893 - .cursor-default { 1894 - cursor: default; 1895 - } 1896 - .cursor-move { 1897 - cursor: move; 1898 - } 1899 - .list-inside { 1900 - list-style-position: inside; 1901 - } 1902 - .list-disc { 1903 - list-style-type: disc; 1904 - } 1905 - .flex-col { 1906 - flex-direction: column; 1907 - } 1908 - .flex-row { 1909 - flex-direction: row; 1910 - } 1911 - .items-center { 1912 - align-items: center; 1913 - } 1914 - .items-end { 1915 - align-items: flex-end; 1916 - } 1917 - .items-start { 1918 - align-items: flex-start; 1919 - } 1920 - .justify-center { 1921 - justify-content: center; 1922 - } 1923 - .justify-end { 1924 - justify-content: flex-end; 1925 - } 1926 - .justify-start { 1927 - justify-content: flex-start; 1928 - } 1929 - .gap-2 { 1930 - gap: calc(var(--spacing) * 2); 1931 - } 1932 - .gap-4 { 1933 - gap: calc(var(--spacing) * 4); 1934 - } 1935 - .space-y-4 { 1936 - :where(& > :not(:last-child)) { 1937 - --tw-space-y-reverse: 0; 1938 - margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); 1939 - margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); 1940 - } 1941 - } 1942 - .truncate { 1943 - overflow: hidden; 1944 - text-overflow: ellipsis; 1945 - white-space: nowrap; 1946 - } 1947 - .overflow-auto { 1948 - overflow: auto; 1949 - } 1950 - .overflow-y-auto { 1951 - overflow-y: auto; 1952 - } 1953 - .overflow-y-clip { 1954 - overflow-y: clip; 1955 - } 1956 - .menu-xl { 1957 - :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { 1958 - border-radius: var(--radius-field); 1959 - padding-inline: calc(0.25rem * 5); 1960 - padding-block: calc(0.25rem * 1.5); 1961 - font-size: 1.375rem; 1962 - } 1963 - .menu-title { 1964 - padding-inline: calc(0.25rem * 6); 1965 - padding-block: calc(0.25rem * 3); 1966 - } 1967 - } 1968 - .rounded-box { 1969 - border-radius: var(--radius-box); 1970 - } 1971 - .rounded-box { 1972 - border-radius: var(--radius-box); 1973 - } 1974 - .rounded-lg { 1975 - border-radius: var(--radius-lg); 1976 - } 1977 - .rounded-md { 1978 - border-radius: var(--radius-md); 1979 - } 1980 - .rounded-none { 1981 - border-radius: 0; 1982 - } 1983 - .rounded-xl { 1984 - border-radius: var(--radius-xl); 1985 - } 1986 - .rounded-t-xl { 1987 - border-top-left-radius: var(--radius-xl); 1988 - border-top-right-radius: var(--radius-xl); 1989 - } 1990 - .rounded-bl-sm { 1991 - border-bottom-left-radius: var(--radius-sm); 1992 - } 1993 - .badge-soft { 1994 - color: var(--badge-color, var(--color-base-content)); 1995 - background-color: var(--badge-color, var(--color-base-content)); 1996 - @supports (color: color-mix(in lab, red, red)) { 1997 - background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) ); 1998 - } 1999 - border-color: var(--badge-color, var(--color-base-content)); 2000 - @supports (color: color-mix(in lab, red, red)) { 2001 - border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) ); 2002 - } 2003 - background-image: none; 2004 - } 2005 - .alert-info { 2006 - border-color: var(--color-info); 2007 - color: var(--color-info-content); 2008 - --alert-color: var(--color-info); 2009 - } 2010 - .border-base-300 { 2011 - border-color: var(--color-base-300); 2012 - } 2013 - .bg-accent { 2014 - background-color: var(--color-accent); 2015 - } 2016 - .bg-base-100 { 2017 - background-color: var(--color-base-100); 2018 - } 2019 - .bg-base-200 { 2020 - background-color: var(--color-base-200); 2021 - } 2022 - .bg-base-300 { 2023 - background-color: var(--color-base-300); 2024 - } 2025 - .bg-black { 2026 - background-color: var(--color-black); 2027 - } 2028 - .bg-error { 2029 - background-color: var(--color-error); 2030 - } 2031 - .bg-info { 2032 - background-color: var(--color-info); 2033 - } 2034 - .bg-neutral { 2035 - background-color: var(--color-neutral); 2036 - } 2037 - .bg-primary { 2038 - background-color: var(--color-primary); 2039 - } 2040 - .bg-secondary { 2041 - background-color: var(--color-secondary); 2042 - } 2043 - .bg-transparent { 2044 - background-color: transparent; 2045 - } 2046 - .loading-spinner { 2047 - mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); 2048 - } 2049 - .mask-squircle { 2050 - mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e"); 2051 - } 2052 - .p-0 { 2053 - padding: calc(var(--spacing) * 0); 2054 - } 2055 - .p-3 { 2056 - padding: calc(var(--spacing) * 3); 2057 - } 2058 - .p-4 { 2059 - padding: calc(var(--spacing) * 4); 2060 - } 2061 - .p-6 { 2062 - padding: calc(var(--spacing) * 6); 2063 - } 2064 - .menu-title { 2065 - padding-inline: calc(0.25rem * 3); 2066 - padding-block: calc(0.25rem * 2); 2067 - color: var(--color-base-content); 2068 - @supports (color: color-mix(in lab, red, red)) { 2069 - color: color-mix(in oklab, var(--color-base-content) 40%, transparent); 2070 - } 2071 - font-size: 0.875rem; 2072 - font-weight: 600; 2073 - } 2074 - .badge-xs { 2075 - --size: calc(var(--size-selector, 0.25rem) * 4); 2076 - font-size: 0.625rem; 2077 - padding-inline: calc(0.25rem * 2 - var(--border)); 2078 - } 2079 - .px-1 { 2080 - padding-inline: calc(var(--spacing) * 1); 2081 - } 2082 - .py-4 { 2083 - padding-block: calc(var(--spacing) * 4); 2084 - } 2085 - .py-6 { 2086 - padding-block: calc(var(--spacing) * 6); 2087 - } 2088 - .text-center { 2089 - text-align: center; 2090 - } 2091 - .align-middle { 2092 - vertical-align: middle; 2093 - } 2094 - .font-content { 2095 - font-family: var(--font-content); 2096 - } 2097 - .font-logo { 2098 - font-family: var(--font-logo); 2099 - } 2100 - .font-menuitems { 2101 - font-family: var(--font-menuitems); 2102 - } 2103 - .font-sans { 2104 - font-family: var(--font-sans); 2105 - } 2106 - .font-script { 2107 - font-family: var(--font-script); 2108 - } 2109 - .text-2xl { 2110 - font-size: var(--text-2xl); 2111 - line-height: var(--tw-leading, var(--text-2xl--line-height)); 2112 - } 2113 - .text-3xl { 2114 - font-size: var(--text-3xl); 2115 - line-height: var(--tw-leading, var(--text-3xl--line-height)); 2116 - } 2117 - .text-5xl { 2118 - font-size: var(--text-5xl); 2119 - line-height: var(--tw-leading, var(--text-5xl--line-height)); 2120 - } 2121 - .text-lg { 2122 - font-size: var(--text-lg); 2123 - line-height: var(--tw-leading, var(--text-lg--line-height)); 2124 - } 2125 - .text-xl { 2126 - font-size: var(--text-xl); 2127 - line-height: var(--tw-leading, var(--text-xl--line-height)); 2128 - } 2129 - .text-xs { 2130 - font-size: var(--text-xs); 2131 - line-height: var(--tw-leading, var(--text-xs--line-height)); 2132 - } 2133 - .text-\[1\.100rem\] { 2134 - font-size: 1.100rem; 2135 - } 2136 - .font-bold { 2137 - --tw-font-weight: var(--font-weight-bold); 2138 - font-weight: var(--font-weight-bold); 2139 - } 2140 - .link-primary { 2141 - color: var(--color-primary); 2142 - @media (hover: hover) { 2143 - &:hover { 2144 - color: var(--color-primary); 2145 - @supports (color: color-mix(in lab, red, red)) { 2146 - color: color-mix(in oklab, var(--color-primary) 80%, #000); 2147 - } 2148 - } 2149 - } 2150 - } 2151 - .text-base-content { 2152 - color: var(--color-base-content); 2153 - } 2154 - .text-error-content { 2155 - color: var(--color-error-content); 2156 - } 2157 - .text-info-content { 2158 - color: var(--color-info-content); 2159 - } 2160 - .text-neutral-content { 2161 - color: var(--color-neutral-content); 2162 - } 2163 - .text-primary-content { 2164 - color: var(--color-primary-content); 2165 - } 2166 - .text-secondary-content { 2167 - color: var(--color-secondary-content); 2168 - } 2169 - .text-warning-content { 2170 - color: var(--color-warning-content); 2171 - } 2172 - .link-hover { 2173 - text-decoration-line: none; 2174 - &:hover { 2175 - @media (hover: hover) { 2176 - text-decoration-line: underline; 2177 - } 2178 - } 2179 - } 2180 - .opacity-50 { 2181 - opacity: 50%; 2182 - } 2183 - .opacity-80 { 2184 - opacity: 80%; 2185 - } 2186 - .shadow-2xl { 2187 - --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); 2188 - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 2189 - } 2190 - .shadow-sm { 2191 - --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)); 2192 - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 2193 - } 2194 - .btn-ghost { 2195 - &:not(.btn-active, :hover, :active:focus, :focus-visible) { 2196 - --btn-shadow: ""; 2197 - --btn-bg: #0000; 2198 - --btn-border: #0000; 2199 - --btn-noise: none; 2200 - &:not(:disabled, [disabled], .btn-disabled) { 2201 - outline-color: currentColor; 2202 - --btn-fg: currentColor; 2203 - } 2204 - } 2205 - @media (hover: none) { 2206 - &:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled) { 2207 - --btn-shadow: ""; 2208 - --btn-bg: #0000; 2209 - --btn-border: #0000; 2210 - --btn-noise: none; 2211 - --btn-fg: currentColor; 2212 - } 2213 - } 2214 - } 2215 - .transition { 2216 - 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, display, content-visibility, overlay, pointer-events; 2217 - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 2218 - transition-duration: var(--tw-duration, var(--default-transition-duration)); 2219 - } 2220 - .transition-\[height\] { 2221 - transition-property: height; 2222 - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 2223 - transition-duration: var(--tw-duration, var(--default-transition-duration)); 2224 - } 2225 - .transition-colors { 2226 - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; 2227 - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 2228 - transition-duration: var(--tw-duration, var(--default-transition-duration)); 2229 - } 2230 - .delay-150 { 2231 - transition-delay: 150ms; 2232 - } 2233 - .duration-300 { 2234 - --tw-duration: 300ms; 2235 - transition-duration: 300ms; 2236 - } 2237 - .ease-in-out { 2238 - --tw-ease: var(--ease-in-out); 2239 - transition-timing-function: var(--ease-in-out); 2240 - } 2241 - .btn-lg { 2242 - --fontsize: 1.125rem; 2243 - --btn-p: 1.25rem; 2244 - --size: calc(var(--size-field, 0.25rem) * 12); 2245 - } 2246 - .badge-secondary { 2247 - --badge-color: var(--color-secondary); 2248 - --badge-fg: var(--color-secondary-content); 2249 - } 2250 - .btn-accent { 2251 - --btn-color: var(--color-accent); 2252 - --btn-fg: var(--color-accent-content); 2253 - } 2254 - .btn-error { 2255 - --btn-color: var(--color-error); 2256 - --btn-fg: var(--color-error-content); 2257 - } 2258 - .btn-info { 2259 - --btn-color: var(--color-info); 2260 - --btn-fg: var(--color-info-content); 2261 - } 2262 - .btn-primary { 2263 - --btn-color: var(--color-primary); 2264 - --btn-fg: var(--color-primary-content); 2265 - } 2266 - .btn-secondary { 2267 - --btn-color: var(--color-secondary); 2268 - --btn-fg: var(--color-secondary-content); 2269 - } 2270 - .btn-success { 2271 - --btn-color: var(--color-success); 2272 - --btn-fg: var(--color-success-content); 2273 - } 2274 - .input-primary { 2275 - &, &:focus, &:focus-within { 2276 - --input-color: var(--color-primary); 2277 - } 2278 - } 2279 - .hover\:scale-110 { 2280 - &:hover { 2281 - @media (hover: hover) { 2282 - --tw-scale-x: 110%; 2283 - --tw-scale-y: 110%; 2284 - --tw-scale-z: 110%; 2285 - scale: var(--tw-scale-x) var(--tw-scale-y); 2286 - } 2287 - } 2288 - } 2289 - .hover\:bg-base-200 { 2290 - &:hover { 2291 - @media (hover: hover) { 2292 - background-color: var(--color-base-200); 2293 - } 2294 - } 2295 - } 2296 - .hover\:opacity-80 { 2297 - &:hover { 2298 - @media (hover: hover) { 2299 - opacity: 80%; 2300 - } 2301 - } 2302 - } 2303 - .sm\:modal-middle { 2304 - @media (width >= 40rem) { 2305 - place-items: center; 2306 - :where(.modal-box) { 2307 - height: auto; 2308 - width: calc(11/12 * 100%); 2309 - max-width: 32rem; 2310 - max-height: calc(100vh - 5em); 2311 - translate: 0 2%; 2312 - scale: 98%; 2313 - --modal-tl: var(--radius-box); 2314 - --modal-tr: var(--radius-box); 2315 - --modal-bl: var(--radius-box); 2316 - --modal-br: var(--radius-box); 2317 - } 2318 - } 2319 - } 2320 - .md\:flex { 2321 - @media (width >= 48rem) { 2322 - display: flex; 2323 - } 2324 - } 2325 - .md\:hidden { 2326 - @media (width >= 48rem) { 2327 - display: none; 2328 - } 2329 - } 2330 - .md\:inline { 2331 - @media (width >= 48rem) { 2332 - display: inline; 2333 - } 2334 - } 2335 - .md\:max-h-\[calc\(100vh-4rem\)\] { 2336 - @media (width >= 48rem) { 2337 - max-height: calc(100vh - 4rem); 2338 - } 2339 - } 2340 - .md\:btn-neutral { 2341 - @media (width >= 48rem) { 2342 - --btn-color: var(--color-neutral); 2343 - --btn-fg: var(--color-neutral-content); 2344 - } 2345 - } 2346 - .lg\:drawer-open { 2347 - @media (width >= 64rem) { 2348 - > .drawer-side { 2349 - overflow-y: auto; 2350 - } 2351 - > .drawer-toggle { 2352 - display: none; 2353 - & ~ .drawer-side { 2354 - pointer-events: auto; 2355 - visibility: visible; 2356 - position: sticky; 2357 - display: block; 2358 - width: auto; 2359 - overscroll-behavior: auto; 2360 - opacity: 100%; 2361 - & > .drawer-overlay { 2362 - cursor: default; 2363 - background-color: transparent; 2364 - } 2365 - & > *:not(.drawer-overlay) { 2366 - translate: 0%; 2367 - [dir="rtl"] & { 2368 - translate: 0%; 2369 - } 2370 - } 2371 - } 2372 - &:checked ~ .drawer-side { 2373 - pointer-events: auto; 2374 - visibility: visible; 2375 - } 2376 - } 2377 - } 2378 - } 2379 - .lg\:absolute { 2380 - @media (width >= 64rem) { 2381 - position: absolute; 2382 - } 2383 - } 2384 - .lg\:block { 2385 - @media (width >= 64rem) { 2386 - display: block; 2387 - } 2388 - } 2389 - .lg\:hidden { 2390 - @media (width >= 64rem) { 2391 - display: none; 2392 - } 2393 - } 2394 - .lg\:h-\[80lvh\] { 2395 - @media (width >= 64rem) { 2396 - height: 80lvh; 2397 - } 2398 - } 2399 - .lg\:max-h-\[90vh\] { 2400 - @media (width >= 64rem) { 2401 - max-height: 90vh; 2402 - } 2403 - } 2404 - .lg\:max-h-\[calc\(100vh-4rem\)\] { 2405 - @media (width >= 64rem) { 2406 - max-height: calc(100vh - 4rem); 2407 - } 2408 - } 2409 - .lg\:w-\[32rem\] { 2410 - @media (width >= 64rem) { 2411 - width: 32rem; 2412 - } 2413 - } 2414 - .lg\:w-\[80vw\] { 2415 - @media (width >= 64rem) { 2416 - width: 80vw; 2417 - } 2418 - } 2419 - .lg\:max-w-\[99vw\] { 2420 - @media (width >= 64rem) { 2421 - max-width: 99vw; 2422 - } 2423 - } 2424 - .lg\:flex-row-reverse { 2425 - @media (width >= 64rem) { 2426 - flex-direction: row-reverse; 2427 - } 2428 - } 2429 - .lg\:text-left { 2430 - @media (width >= 64rem) { 2431 - text-align: left; 2432 - } 2433 - } 2434 - .dark\:bg-neutral-800 { 2435 - @media (prefers-color-scheme: dark) { 2436 - background-color: var(--color-neutral-800); 2437 - } 2438 - } 2439 - } 2440 - @layer base { 2441 - html { 2442 - overflow: clip; 2443 - } 2444 - * { 2445 - -webkit-user-select: none; 2446 - user-select: none; 2447 - } 2448 - body:has(.monthclass-6) main::before { 2449 - margin: 0; 2450 - content: "Happy Pride Month! 💖🏳️‍🌈"; 2451 - justify-content: center; 2452 - align-items: center; 2453 - height: 1.4em; 2454 - color: black; 2455 - width: 100vw; 2456 - border-radius: 0; 2457 - display: inline-flex; 2458 - background-image: linear-gradient(to right, rgb(237, 34, 36), rgb(243, 91, 34), rgb(249, 150, 33), rgb(245, 193, 30), rgb(241, 235, 27) 27%, rgb(241, 235, 27), rgb(241, 235, 27) 33%, rgb(99, 199, 32), rgb(12, 155, 73), rgb(33, 135, 141), rgb(57, 84, 165), rgb(97, 55, 155), rgb(147, 40, 142)); 2459 - } 2460 - body:has(.monthclass-6) { 2461 - --bs: 300% 100%; 2462 - } 2463 - body:has(.monthclass-6) main:hover::before { 2464 - animation: prideBannerAnimation 10s linear infinite; 2465 - } 2466 - @keyframes prideBannerAnimation { 2467 - 25% { 2468 - background-position: 0 0; 2469 - background-size: var(--bs); 2470 - background-repeat: repeat; 2471 - } 2472 - 30% { 2473 - background-position: 50% 0; 2474 - content: "Protect LGBTQ+ Rights! 🏳️‍🌈✊"; 2475 - background-size: var(--bs); 2476 - background-repeat: repeat; 2477 - } 2478 - 50% { 2479 - background-position: 100% 0; 2480 - content: "Protect LGBTQ+ Rights! 🏳️‍🌈✊"; 2481 - background-size: var(--bs); 2482 - background-repeat: repeat; 2483 - } 2484 - 75% { 2485 - background-position: 0 0; 2486 - background-size: var(--bs); 2487 - background-repeat: repeat; 2488 - } 2489 - 80% { 2490 - background-position: 50% 0; 2491 - content: "Protect LGBTQ+ Rights! 🏳️‍🌈 ✊"; 2492 - background-size: var(--bs); 2493 - background-repeat: repeat; 2494 - } 2495 - } 2496 - body:has(.monthclass-6):active main::before { 2497 - animation: none; 2498 - animation-delay: 3s; 2499 - animation-duration: 999s; 2500 - animation-name: transrights; 2501 - animation-iteration-count: 1; 2502 - animation-timing-function: ease-in-out; 2503 - } 2504 - @keyframes transrights { 2505 - 0% { 2506 - content: "Protect trans Rights! ✊ 🩵🩷🤍🩷🩵"; 2507 - background-image: linear-gradient(to right, rgb(85, 205, 252), rgb(179, 157, 233), rgb(247, 168, 184), rgb(246, 216, 221), rgb(255, 255, 255) 45%, rgb(255, 255, 255), rgb(255, 255, 255) 55%, rgb(246, 216, 221), rgb(247, 168, 184), rgb(179, 157, 233), rgb(85, 205, 252)); 2508 - } 2509 - } 2510 - body:has(.dayclass-29.monthclass-2) main::before { 2511 - margin-top: 0.8em; 2512 - margin-bottom: 0.8em; 2513 - content: "[This day does not exist]"; 2514 - justify-content: center; 2515 - align-items: center; 2516 - height: 2.4em; 2517 - flex: none; 2518 - color: yellow; 2519 - width: 100%; 2520 - display: inline-flex; 2521 - background-color: black; 2522 - text-shadow: 22px 4px 2px rgba(255, 255, 0, 0.6); 2523 - box-shadow: 2px 2px 10px 8px #3d3a3a; 2524 - animation-name: glitched; 2525 - animation-duration: 3s; 2526 - animation-iteration-count: infinite; 2527 - animation-timing-function: linear; 2528 - animation-direction: alternate; 2529 - } 2530 - @keyframes glitched { 2531 - 0% { 2532 - transform: skew(-20deg); 2533 - left: -4px; 2534 - } 2535 - 10% { 2536 - transform: skew(-20deg); 2537 - left: -4px; 2538 - } 2539 - 11% { 2540 - transform: skew(0deg); 2541 - left: 2px; 2542 - } 2543 - 50% { 2544 - transform: skew(0deg); 2545 - } 2546 - 51% { 2547 - transform: skew(10deg); 2548 - } 2549 - 59% { 2550 - transform: skew(10deg); 2551 - } 2552 - 60% { 2553 - transform: skew(0deg); 2554 - } 2555 - 100% { 2556 - transform: skew(0deg); 2557 - } 2558 - } 2559 - .lg\:freeroam { 2560 - @media (width >=64rem) { 2561 - left: var(--left); 2562 - top: var(--top); 2563 - transform: var(--transform); 2564 - position: absolute; 2565 - } 2566 - } 2567 - } 2568 - @layer base { 2569 - :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] { 2570 - color-scheme: light; 2571 - --color-base-100: oklch(100% 0 0); 2572 - --color-base-200: oklch(98% 0 0); 2573 - --color-base-300: oklch(95% 0 0); 2574 - --color-base-content: oklch(21% 0.006 285.885); 2575 - --color-primary: oklch(45% 0.24 277.023); 2576 - --color-primary-content: oklch(93% 0.034 272.788); 2577 - --color-secondary: oklch(65% 0.241 354.308); 2578 - --color-secondary-content: oklch(94% 0.028 342.258); 2579 - --color-accent: oklch(77% 0.152 181.912); 2580 - --color-accent-content: oklch(38% 0.063 188.416); 2581 - --color-neutral: oklch(14% 0.005 285.823); 2582 - --color-neutral-content: oklch(92% 0.004 286.32); 2583 - --color-info: oklch(74% 0.16 232.661); 2584 - --color-info-content: oklch(29% 0.066 243.157); 2585 - --color-success: oklch(76% 0.177 163.223); 2586 - --color-success-content: oklch(37% 0.077 168.94); 2587 - --color-warning: oklch(82% 0.189 84.429); 2588 - --color-warning-content: oklch(41% 0.112 45.904); 2589 - --color-error: oklch(71% 0.194 13.428); 2590 - --color-error-content: oklch(27% 0.105 12.094); 2591 - --radius-selector: 0.5rem; 2592 - --radius-field: 0.25rem; 2593 - --radius-box: 0.5rem; 2594 - --size-selector: 0.25rem; 2595 - --size-field: 0.25rem; 2596 - --border: 1px; 2597 - --depth: 1; 2598 - --noise: 0; 2599 - } 2600 - } 2601 - @layer base { 2602 - @media (prefers-color-scheme: dark) { 2603 - :root { 2604 - color-scheme: dark; 2605 - --color-base-100: oklch(25.33% 0.016 252.42); 2606 - --color-base-200: oklch(23.26% 0.014 253.1); 2607 - --color-base-300: oklch(21.15% 0.012 254.09); 2608 - --color-base-content: oklch(97.807% 0.029 256.847); 2609 - --color-primary: oklch(58% 0.233 277.117); 2610 - --color-primary-content: oklch(96% 0.018 272.314); 2611 - --color-secondary: oklch(65% 0.241 354.308); 2612 - --color-secondary-content: oklch(94% 0.028 342.258); 2613 - --color-accent: oklch(77% 0.152 181.912); 2614 - --color-accent-content: oklch(38% 0.063 188.416); 2615 - --color-neutral: oklch(14% 0.005 285.823); 2616 - --color-neutral-content: oklch(92% 0.004 286.32); 2617 - --color-info: oklch(74% 0.16 232.661); 2618 - --color-info-content: oklch(29% 0.066 243.157); 2619 - --color-success: oklch(76% 0.177 163.223); 2620 - --color-success-content: oklch(37% 0.077 168.94); 2621 - --color-warning: oklch(82% 0.189 84.429); 2622 - --color-warning-content: oklch(41% 0.112 45.904); 2623 - --color-error: oklch(71% 0.194 13.428); 2624 - --color-error-content: oklch(27% 0.105 12.094); 2625 - --radius-selector: 0.5rem; 2626 - --radius-field: 0.25rem; 2627 - --radius-box: 0.5rem; 2628 - --size-selector: 0.25rem; 2629 - --size-field: 0.25rem; 2630 - --border: 1px; 2631 - --depth: 1; 2632 - --noise: 0; 2633 - } 2634 - } 2635 - } 2636 - @layer base { 2637 - :root:has(input.theme-controller[value=light]:checked),[data-theme=light] { 2638 - color-scheme: light; 2639 - --color-base-100: oklch(100% 0 0); 2640 - --color-base-200: oklch(98% 0 0); 2641 - --color-base-300: oklch(95% 0 0); 2642 - --color-base-content: oklch(21% 0.006 285.885); 2643 - --color-primary: oklch(45% 0.24 277.023); 2644 - --color-primary-content: oklch(93% 0.034 272.788); 2645 - --color-secondary: oklch(65% 0.241 354.308); 2646 - --color-secondary-content: oklch(94% 0.028 342.258); 2647 - --color-accent: oklch(77% 0.152 181.912); 2648 - --color-accent-content: oklch(38% 0.063 188.416); 2649 - --color-neutral: oklch(14% 0.005 285.823); 2650 - --color-neutral-content: oklch(92% 0.004 286.32); 2651 - --color-info: oklch(74% 0.16 232.661); 2652 - --color-info-content: oklch(29% 0.066 243.157); 2653 - --color-success: oklch(76% 0.177 163.223); 2654 - --color-success-content: oklch(37% 0.077 168.94); 2655 - --color-warning: oklch(82% 0.189 84.429); 2656 - --color-warning-content: oklch(41% 0.112 45.904); 2657 - --color-error: oklch(71% 0.194 13.428); 2658 - --color-error-content: oklch(27% 0.105 12.094); 2659 - --radius-selector: 0.5rem; 2660 - --radius-field: 0.25rem; 2661 - --radius-box: 0.5rem; 2662 - --size-selector: 0.25rem; 2663 - --size-field: 0.25rem; 2664 - --border: 1px; 2665 - --depth: 1; 2666 - --noise: 0; 2667 - } 2668 - } 2669 - @layer base { 2670 - :root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] { 2671 - color-scheme: dark; 2672 - --color-base-100: oklch(25.33% 0.016 252.42); 2673 - --color-base-200: oklch(23.26% 0.014 253.1); 2674 - --color-base-300: oklch(21.15% 0.012 254.09); 2675 - --color-base-content: oklch(97.807% 0.029 256.847); 2676 - --color-primary: oklch(58% 0.233 277.117); 2677 - --color-primary-content: oklch(96% 0.018 272.314); 2678 - --color-secondary: oklch(65% 0.241 354.308); 2679 - --color-secondary-content: oklch(94% 0.028 342.258); 2680 - --color-accent: oklch(77% 0.152 181.912); 2681 - --color-accent-content: oklch(38% 0.063 188.416); 2682 - --color-neutral: oklch(14% 0.005 285.823); 2683 - --color-neutral-content: oklch(92% 0.004 286.32); 2684 - --color-info: oklch(74% 0.16 232.661); 2685 - --color-info-content: oklch(29% 0.066 243.157); 2686 - --color-success: oklch(76% 0.177 163.223); 2687 - --color-success-content: oklch(37% 0.077 168.94); 2688 - --color-warning: oklch(82% 0.189 84.429); 2689 - --color-warning-content: oklch(41% 0.112 45.904); 2690 - --color-error: oklch(71% 0.194 13.428); 2691 - --color-error-content: oklch(27% 0.105 12.094); 2692 - --radius-selector: 0.5rem; 2693 - --radius-field: 0.25rem; 2694 - --radius-box: 0.5rem; 2695 - --size-selector: 0.25rem; 2696 - --size-field: 0.25rem; 2697 - --border: 1px; 2698 - --depth: 1; 2699 - --noise: 0; 2700 - } 2701 - } 2702 - @layer base { 2703 - @property --radialprogress { 2704 - syntax: "<percentage>"; 2705 - inherits: true; 2706 - initial-value: 0%; 2707 - } 2708 - } 2709 - @layer base { 2710 - :root { 2711 - scrollbar-color: currentColor #0000; 2712 - @supports (color: color-mix(in lab, red, red)) { 2713 - scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000; 2714 - } 2715 - } 2716 - } 2717 - @layer base { 2718 - :root { 2719 - --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); 2720 - } 2721 - } 2722 - @layer base { 2723 - :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) { 2724 - overflow: hidden; 2725 - } 2726 - } 2727 - @layer base { 2728 - :where( :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked ) ) { 2729 - scrollbar-gutter: stable; 2730 - background-image: linear-gradient(var(--color-base-100), var(--color-base-100)); 2731 - --root-bg: var(--color-base-100); 2732 - @supports (color: color-mix(in lab, red, red)) { 2733 - --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%); 2734 - } 2735 - } 2736 - :where(.modal[open], .modal-open, .modal-toggle:checked + .modal):not(.modal-start, .modal-end) { 2737 - scrollbar-gutter: stable; 2738 - } 2739 - } 2740 - @layer base { 2741 - :root, [data-theme] { 2742 - background-color: var(--root-bg, var(--color-base-100)); 2743 - color: var(--color-base-content); 2744 - } 2745 - } 2746 - @keyframes radio { 2747 - 0% { 2748 - padding: 5px; 2749 - } 2750 - 50% { 2751 - padding: 3px; 2752 - } 2753 - } 2754 - @keyframes skeleton { 2755 - 0% { 2756 - background-position: 150%; 2757 - } 2758 - 100% { 2759 - background-position: -50%; 2760 - } 2761 - } 2762 - @keyframes progress { 2763 - 50% { 2764 - background-position-x: -115%; 2765 - } 2766 - } 2767 - @keyframes toast { 2768 - 0% { 2769 - scale: 0.9; 2770 - opacity: 0; 2771 - } 2772 - 100% { 2773 - scale: 1; 2774 - opacity: 1; 2775 - } 2776 - } 2777 - @keyframes dropdown { 2778 - 0% { 2779 - opacity: 0; 2780 - } 2781 - } 2782 - @keyframes rating { 2783 - 0%, 40% { 2784 - scale: 1.1; 2785 - filter: brightness(1.05) contrast(1.05); 2786 - } 2787 - } 2788 - @layer base { 2789 - :where(:root),:root:has(input.theme-controller[value=lumina-light]:checked),[data-theme="lumina-light"] { 2790 - color-scheme: light; 2791 - --color-base-100: oklch(96% 0.044 156.743); 2792 - --color-base-200: oklch(97% 0.071 103.193); 2793 - --color-base-300: oklch(94% 0.028 342.258); 2794 - --color-base-content: oklch(51% 0.096 186.391); 2795 - --color-primary: oklch(87% 0.15 154.449); 2796 - --color-primary-content: oklch(30% 0.056 229.695); 2797 - --color-secondary: oklch(51% 0.253 323.949); 2798 - --color-secondary-content: oklch(94% 0.028 342.258); 2799 - --color-accent: oklch(80% 0.114 19.571); 2800 - --color-accent-content: oklch(44% 0.043 257.281); 2801 - --color-neutral: oklch(98% 0.003 247.858); 2802 - --color-neutral-content: oklch(12% 0.042 264.695); 2803 - --color-info: oklch(85% 0.138 181.071); 2804 - --color-info-content: oklch(29% 0.066 243.157); 2805 - --color-success: oklch(76% 0.233 130.85); 2806 - --color-success-content: oklch(37% 0.077 168.94); 2807 - --color-warning: oklch(70% 0.213 47.604); 2808 - --color-warning-content: oklch(27% 0.077 45.635); 2809 - --color-error: oklch(63% 0.237 25.331); 2810 - --color-error-content: oklch(27% 0.105 12.094); 2811 - --radius-selector: 0.75rem; 2812 - --radius-field: 1.25rem; 2813 - --radius-box: 1.5rem; 2814 - --size-selector: 0.25rem; 2815 - --size-field: 0.25rem; 2816 - --border: 1px; 2817 - --depth: 1; 2818 - --noise: 0; 2819 - } 2820 - } 2821 - @layer base { 2822 - @media (prefers-color-scheme: dark) { 2823 - :root { 2824 - color-scheme: dark; 2825 - --color-base-100: oklch(14% 0.02 156.743); 2826 - --color-base-200: oklch(20% 0.03 103.193); 2827 - --color-base-300: oklch(25% 0.02 342.258); 2828 - --color-base-content: oklch(85% 0.08 186.391); 2829 - --color-primary: oklch(50% 0.15 154.449); 2830 - --color-primary-content: oklch(88% 0.09 229.695); 2831 - --color-secondary: oklch(38% 0.23 323.949); 2832 - --color-secondary-content: oklch(90% 0.05 342.258); 2833 - --color-accent: oklch(55% 0.12 19.571); 2834 - --color-accent-content: oklch(87% 0.07 257.281); 2835 - --color-neutral: oklch(12% 0.01 247.858); 2836 - --color-neutral-content: oklch(88% 0.06 264.695); 2837 - --color-info: oklch(55% 0.14 181.071); 2838 - --color-info-content: oklch(90% 0.08 243.157); 2839 - --color-success: oklch(42% 0.22 130.85); 2840 - --color-success-content: oklch(85% 0.09 168.94); 2841 - --color-warning: oklch(50% 0.2 47.604); 2842 - --color-warning-content: oklch(88% 0.08 45.635); 2843 - --color-error: oklch(45% 0.23 25.331); 2844 - --color-error-content: oklch(90% 0.11 12.094); 2845 - --radius-selector: 0.75rem; 2846 - --radius-field: 1.25rem; 2847 - --radius-box: 1.5rem; 2848 - --size-selector: 0.25rem; 2849 - --size-field: 0.25rem; 2850 - --border: 1px; 2851 - --depth: 1; 2852 - --noise: 0; 2853 - } 2854 - } 2855 - } 2856 - @layer base { 2857 - :root:has(input.theme-controller[value=lumina-dark]:checked),[data-theme="lumina-dark"] { 2858 - color-scheme: dark; 2859 - --color-base-100: oklch(14% 0.02 156.743); 2860 - --color-base-200: oklch(20% 0.03 103.193); 2861 - --color-base-300: oklch(25% 0.02 342.258); 2862 - --color-base-content: oklch(85% 0.08 186.391); 2863 - --color-primary: oklch(50% 0.15 154.449); 2864 - --color-primary-content: oklch(88% 0.09 229.695); 2865 - --color-secondary: oklch(38% 0.23 323.949); 2866 - --color-secondary-content: oklch(90% 0.05 342.258); 2867 - --color-accent: oklch(55% 0.12 19.571); 2868 - --color-accent-content: oklch(87% 0.07 257.281); 2869 - --color-neutral: oklch(12% 0.01 247.858); 2870 - --color-neutral-content: oklch(88% 0.06 264.695); 2871 - --color-info: oklch(55% 0.14 181.071); 2872 - --color-info-content: oklch(90% 0.08 243.157); 2873 - --color-success: oklch(42% 0.22 130.85); 2874 - --color-success-content: oklch(85% 0.09 168.94); 2875 - --color-warning: oklch(50% 0.2 47.604); 2876 - --color-warning-content: oklch(88% 0.08 45.635); 2877 - --color-error: oklch(45% 0.23 25.331); 2878 - --color-error-content: oklch(90% 0.11 12.094); 2879 - --radius-selector: 0.75rem; 2880 - --radius-field: 1.25rem; 2881 - --radius-box: 1.5rem; 2882 - --size-selector: 0.25rem; 2883 - --size-field: 0.25rem; 2884 - --border: 1px; 2885 - --depth: 1; 2886 - --noise: 0; 2887 - } 2888 - } 2889 - @property --tw-rotate-x { 2890 - syntax: "*"; 2891 - inherits: false; 2892 - } 2893 - @property --tw-rotate-y { 2894 - syntax: "*"; 2895 - inherits: false; 2896 - } 2897 - @property --tw-rotate-z { 2898 - syntax: "*"; 2899 - inherits: false; 2900 - } 2901 - @property --tw-skew-x { 2902 - syntax: "*"; 2903 - inherits: false; 2904 - } 2905 - @property --tw-skew-y { 2906 - syntax: "*"; 2907 - inherits: false; 2908 - } 2909 - @property --tw-space-y-reverse { 2910 - syntax: "*"; 2911 - inherits: false; 2912 - initial-value: 0; 2913 - } 2914 - @property --tw-font-weight { 2915 - syntax: "*"; 2916 - inherits: false; 2917 - } 2918 - @property --tw-shadow { 2919 - syntax: "*"; 2920 - inherits: false; 2921 - initial-value: 0 0 #0000; 2922 - } 2923 - @property --tw-shadow-color { 2924 - syntax: "*"; 2925 - inherits: false; 2926 - } 2927 - @property --tw-shadow-alpha { 2928 - syntax: "<percentage>"; 2929 - inherits: false; 2930 - initial-value: 100%; 2931 - } 2932 - @property --tw-inset-shadow { 2933 - syntax: "*"; 2934 - inherits: false; 2935 - initial-value: 0 0 #0000; 2936 - } 2937 - @property --tw-inset-shadow-color { 2938 - syntax: "*"; 2939 - inherits: false; 2940 - } 2941 - @property --tw-inset-shadow-alpha { 2942 - syntax: "<percentage>"; 2943 - inherits: false; 2944 - initial-value: 100%; 2945 - } 2946 - @property --tw-ring-color { 2947 - syntax: "*"; 2948 - inherits: false; 2949 - } 2950 - @property --tw-ring-shadow { 2951 - syntax: "*"; 2952 - inherits: false; 2953 - initial-value: 0 0 #0000; 2954 - } 2955 - @property --tw-inset-ring-color { 2956 - syntax: "*"; 2957 - inherits: false; 2958 - } 2959 - @property --tw-inset-ring-shadow { 2960 - syntax: "*"; 2961 - inherits: false; 2962 - initial-value: 0 0 #0000; 2963 - } 2964 - @property --tw-ring-inset { 2965 - syntax: "*"; 2966 - inherits: false; 2967 - } 2968 - @property --tw-ring-offset-width { 2969 - syntax: "<length>"; 2970 - inherits: false; 2971 - initial-value: 0px; 2972 - } 2973 - @property --tw-ring-offset-color { 2974 - syntax: "*"; 2975 - inherits: false; 2976 - initial-value: #fff; 2977 - } 2978 - @property --tw-ring-offset-shadow { 2979 - syntax: "*"; 2980 - inherits: false; 2981 - initial-value: 0 0 #0000; 2982 - } 2983 - @property --tw-duration { 2984 - syntax: "*"; 2985 - inherits: false; 2986 - } 2987 - @property --tw-ease { 2988 - syntax: "*"; 2989 - inherits: false; 2990 - } 2991 - @property --tw-scale-x { 2992 - syntax: "*"; 2993 - inherits: false; 2994 - initial-value: 1; 2995 - } 2996 - @property --tw-scale-y { 2997 - syntax: "*"; 2998 - inherits: false; 2999 - initial-value: 1; 3000 - } 3001 - @property --tw-scale-z { 3002 - syntax: "*"; 3003 - inherits: false; 3004 - initial-value: 1; 3005 - } 3006 - @layer properties { 3007 - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { 3008 - *, ::before, ::after, ::backdrop { 3009 - --tw-rotate-x: initial; 3010 - --tw-rotate-y: initial; 3011 - --tw-rotate-z: initial; 3012 - --tw-skew-x: initial; 3013 - --tw-skew-y: initial; 3014 - --tw-space-y-reverse: 0; 3015 - --tw-font-weight: initial; 3016 - --tw-shadow: 0 0 #0000; 3017 - --tw-shadow-color: initial; 3018 - --tw-shadow-alpha: 100%; 3019 - --tw-inset-shadow: 0 0 #0000; 3020 - --tw-inset-shadow-color: initial; 3021 - --tw-inset-shadow-alpha: 100%; 3022 - --tw-ring-color: initial; 3023 - --tw-ring-shadow: 0 0 #0000; 3024 - --tw-inset-ring-color: initial; 3025 - --tw-inset-ring-shadow: 0 0 #0000; 3026 - --tw-ring-inset: initial; 3027 - --tw-ring-offset-width: 0px; 3028 - --tw-ring-offset-color: #fff; 3029 - --tw-ring-offset-shadow: 0 0 #0000; 3030 - --tw-duration: initial; 3031 - --tw-ease: initial; 3032 - --tw-scale-x: 1; 3033 - --tw-scale-y: 1; 3034 - --tw-scale-z: 1; 3035 - } 3036 - } 3037 - }

-1

server/priv/static/lumina_client_rev.hash

··· 1 - c38920782c033018dc84f180a42d2a9dc9979a5892810ec539f579e88d1baaef

Configure Feed

Configure Feed