proto-daisy-ui 0.1.225 → 0.1.227

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cjs/proto-daisy-ui.cjs.entry.js +1 -1
  2. package/dist/collection/styles/shadow.css +46 -46
  3. package/dist/components/proto-daisy-ui.js +1 -1
  4. package/dist/esm/proto-daisy-ui.entry.js +1 -1
  5. package/dist/proto-daisy-ui/p-696484b1.entry.js +1 -0
  6. package/dist/proto-daisy-ui/proto-daisy-ui.esm.js +1 -1
  7. package/package.json +4 -4
  8. package/dist/proto-daisy-ui/p-c154193d.entry.js +0 -1
package/dist/cjs/proto-daisy-ui.cjs.entry.js CHANGED
@@ -3,7 +3,7 @@
3
3
  var index = require('./index-H5EhhFIy.js');
4
4
  var store = require('./store-BWDTpfEh.js');
5
5
 
6
- const shadowCss = () => ` @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --spacing: 0.25rem; --container-md: 28rem; --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --font-weight-bold: 700; --radius-md: 0.375rem; } } @layer utilities { .tooltip { @layer daisyui.l1.l2.l3 { position: relative; display: inline-block; --tt-bg: var(--color-neutral); --tt-off: calc(100% + 0.5rem); --tt-tail: calc(100% + 1px + 0.25rem); & > .tooltip-content, &[data-tip]:before { position: absolute; max-width: 20rem; border-radius: var(--radius-field); padding-inline: calc(0.25rem * 2); padding-block: calc(0.25rem * 1); text-align: center; white-space: normal; color: var(--color-neutral-content); opacity: 0%; font-size: 0.875rem; line-height: 1.25; background-color: var(--tt-bg); width: max-content; pointer-events: none; z-index: 2; --tw-content: attr(data-tip); content: var(--tw-content); } &:after { opacity: 0%; background-color: var(--tt-bg); content: ''; pointer-events: none; width: 0.625rem; height: 0.25rem; display: block; position: absolute; mask-repeat: no-repeat; mask-position: -1px 0; --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); mask-image: var(--mask-tooltip); } @media (prefers-reduced-motion: no-preference) { & > .tooltip-content, &[data-tip]:before, &:after { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms; } } &:is([data-tip]:not([data-tip='']), :has(.tooltip-content:not(:empty))) { &.tooltip-open, &:hover, &:has(:focus-visible) { & > .tooltip-content, &[data-tip]:before, &:after { opacity: 100%; --tt-pos: 0rem; @media (prefers-reduced-motion: no-preference) { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s; } } } } } @layer daisyui.l1.l2 { > .tooltip-content, &[data-tip]:before { transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); inset: auto auto var(--tt-off) 50%; } &:after { transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); inset: auto auto var(--tt-tail) 50%; } } } .menu { @layer daisyui.l1.l2.l3 { display: flex; width: fit-content; flex-direction: column; flex-wrap: wrap; padding: calc(0.25rem * 2); --menu-active-fg: var(--color-neutral-content); --menu-active-bg: var(--color-neutral); font-size: 0.875rem; :where(li ul) { position: relative; margin-inline-start: calc(0.25rem * 4); padding-inline-start: calc(0.25rem * 2); white-space: nowrap; &:before { position: absolute; inset-inline-start: calc(0.25rem * 0); top: calc(0.25rem * 3); bottom: calc(0.25rem * 3); background-color: var(--color-base-content); opacity: 10%; width: var(--border); content: ''; } } :where(li > .menu-dropdown:not(.menu-dropdown-show)) { display: none; } :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { display: grid; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: calc(0.25rem * 2); border-radius: var(--radius-field); padding-inline: calc(0.25rem * 3); padding-block: calc(0.25rem * 1.5); text-align: start; transition-property: color, background-color, box-shadow; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); grid-auto-columns: minmax(auto, max-content) auto max-content; text-wrap: balance; user-select: none; } :where(li > details > summary) { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } &::-webkit-details-marker { display: none; } } :where(li > details > summary), :where(li > .menu-dropdown-toggle) { &:after { justify-self: flex-end; display: block; height: 0.375rem; width: 0.375rem; rotate: -135deg; translate: 0 -1px; transition-property: rotate, translate; transition-duration: 0.2s; content: ''; transform-origin: 50% 50%; box-shadow: 2px 2px inset; pointer-events: none; } } details { overflow: hidden; interpolate-size: allow-keywords; } details::details-content { block-size: 0; @media (prefers-reduced-motion: no-preference) { transition-behavior: allow-discrete; transition-property: block-size, content-visibility; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } } details[open]::details-content { block-size: auto; } :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { rotate: 45deg; translate: 0 1px; } :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) { &.menu-focus, &:focus-visible { cursor: pointer; background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); } color: var(--color-base-content); --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } } } :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 ) { cursor: pointer; background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); } --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset; } :where(li:empty) { background-color: var(--color-base-content); opacity: 10%; margin: 0.5rem 1rem; height: 1px; } :where(li) { position: relative; display: flex; flex-shrink: 0; flex-direction: column; flex-wrap: wrap; align-items: stretch; .badge { justify-self: flex-end; } & > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } color: var(--menu-active-fg); background-color: var(--menu-active-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); &:not(&:active) { box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg); } } &.menu-disabled { pointer-events: none; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix( in oklab, var(--color-base-content) 20%, transparent ); } } } .dropdown:focus-within { .menu-dropdown-toggle:after { rotate: 45deg; translate: 0 1px; } } .dropdown-content { margin-top: calc(0.25rem * 2); padding: calc(0.25rem * 2); &:before { display: none; } } } } .dropdown { @layer daisyui.l1.l2.l3 { position: relative; display: inline-block; position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); & > *:not(:has(~ [class*='dropdown-content'])):focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } } .dropdown-content { position: absolute; } &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content { display: none; transform-origin: top; opacity: 0%; scale: 95%; } &[popover], .dropdown-content { z-index: 999; @media (prefers-reduced-motion: no-preference) { animation: dropdown 0.2s; transition-property: opacity, scale, display; transition-behavior: allow-discrete; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } } @starting-style { &[popover], .dropdown-content { scale: 95%; opacity: 0; } } &:not(.dropdown-close) { &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { > [tabindex]:first-child { pointer-events: none; } .dropdown-content { opacity: 100%; scale: 100%; } } &.dropdown-hover:hover { .dropdown-content { opacity: 100%; scale: 100%; } } } &:is(details) { summary { &::-webkit-details-marker { display: none; } } } &:where([popover]) { background: #0000; } &[popover] { position: fixed; color: inherit; @supports not (position-area: bottom) { margin: auto; &.dropdown-close, &.dropdown-open:not(:popover-open) { display: none; transform-origin: top; opacity: 0%; scale: 95%; } &::backdrop { background-color: color-mix(in oklab, #000 30%, #0000); } } &.dropdown-close, &:not(.dropdown-open, :popover-open) { display: none; transform-origin: top; opacity: 0%; scale: 95%; } } } } .btn { :where(&) { @layer daisyui.l1.l2.l3 { width: unset; } } .prose :where(a&:not(.btn-link)):not( :where([class~='not-prose'], [class~='not-prose'] *) ) { text-decoration-line: none; } @layer daisyui.l1.l2.l3 { display: inline-flex; flex-shrink: 0; cursor: pointer; flex-wrap: nowrap; align-items: center; justify-content: center; gap: calc(0.25rem * 1.5); text-align: center; vertical-align: middle; outline-offset: 2px; webkit-user-select: none; user-select: none; padding-inline: var(--btn-p); color: var(--btn-fg); --tw-prose-links: var(--btn-fg); height: var(--size); font-size: var(--fontsize, 0.875rem); font-weight: 600; outline-color: var(--btn-color, var(--color-base-content)); transition-property: color, background-color, border-color, box-shadow; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 0.2s; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); background-color: var(--btn-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--btn-noise); border-width: var(--border); border-style: solid; border-color: var(--btn-border); text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15)); touch-action: manipulation; box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow); --size: calc(var(--size-field, 0.25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); --btn-fg: var(--color-base-content); --btn-p: 1rem; --btn-border: var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix( in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%) ); } --btn-shadow: 0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); } --btn-noise: var(--fx-noise); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix( in oklab, var(--btn-color, var(--color-base-200)), #000 7% ); } } } &:focus-visible, &:has(:focus-visible) { outline-width: 2px; outline-style: solid; isolation: isolate; } &:active:not(.btn-active) { translate: 0 0.5px; --btn-bg: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix( in oklab, var(--btn-color, var(--color-base-200)), #000 5% ); } --btn-border: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix( in oklab, var(--btn-color, var(--color-base-200)), #000 7% ); } --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); } &:is(input[type='checkbox'], input[type='radio']) { appearance: none; &[aria-label]::after { --tw-content: attr(aria-label); content: var(--tw-content); } } &:where(input:checked:not(.filter .btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); isolation: isolate; } } &:disabled { @layer daisyui.l1.l2 { &:not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); } box-shadow: none; } pointer-events: none; --btn-border: #0000; --btn-noise: none; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } } &[disabled] { @layer daisyui.l1.l2 { &:not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); } box-shadow: none; } pointer-events: none; --btn-border: #0000; --btn-noise: none; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } } } .radial-progress { @layer daisyui.l1.l2.l3 { position: relative; display: inline-grid; height: var(--size); width: var(--size); place-content: center; border-radius: calc(infinity * 1px); background-color: transparent; vertical-align: middle; box-sizing: content-box; --value: 0; --size: 5rem; --thickness: calc(var(--size) / 10); --radialprogress: calc(var(--value) * 1%); transition: --radialprogress 0.3s linear; &:before { position: absolute; inset: calc(0.25rem * 0); border-radius: calc(infinity * 1px); content: ''; background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0); webkit-mask: radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) ); mask: radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) ); } &:after { position: absolute; border-radius: calc(infinity * 1px); background-color: currentcolor; transition: transform 0.3s linear; content: ''; inset: calc(50% - var(--thickness) / 2); transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%)); } } } .list { @layer daisyui.l1.l2.l3 { display: flex; flex-direction: column; font-size: 0.875rem; .list-row { --list-grid-cols: minmax(0, auto) 1fr; position: relative; display: grid; grid-auto-flow: column; gap: calc(0.25rem * 4); border-radius: var(--radius-box); padding: calc(0.25rem * 4); word-break: break-word; grid-template-columns: var(--list-grid-cols); } & > :not(:last-child) { &.list-row, .list-row { &:after { content: ''; border-bottom: var(--border) solid; inset-inline: var(--radius-box); position: absolute; bottom: calc(0.25rem * 0); border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix( in oklab, var(--color-base-content) 5%, transparent ); } } } } } @layer daisyui.l1.l2 { .list-row { &:has(.list-col-grow:nth-child(1)) { --list-grid-cols: 1fr; } &:has(.list-col-grow:nth-child(2)) { --list-grid-cols: minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(3)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(4)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(5)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(6)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } > * { grid-row-start: 1; } } } } .table { @layer daisyui.l1.l2.l3 { font-size: 0.875rem; position: relative; width: 100%; border-collapse: separate; --tw-border-spacing-x: calc(0.25rem * 0); --tw-border-spacing-y: calc(0.25rem * 0); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); border-radius: var(--radius-box); text-align: left; &:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *) { text-align: right; } tr.row-hover { &, &:nth-child(even) { &:hover { @media (hover: hover) { background-color: var(--color-base-200); } } } } :where(th, td) { padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 3); vertical-align: middle; } :where(thead, tfoot) { white-space: nowrap; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix( in oklab, var(--color-base-content) 60%, transparent ); } font-size: 0.875rem; font-weight: 600; } :where(tfoot tr:first-child :is(td, th)) { border-top: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); } } :where(.table-pin-rows thead tr) { position: sticky; top: calc(0.25rem * 0); z-index: 1; background-color: var(--color-base-100); } :where(.table-pin-rows tfoot tr) { position: sticky; bottom: calc(0.25rem * 0); z-index: 1; background-color: var(--color-base-100); } :where(.table-pin-cols tr th) { position: sticky; right: calc(0.25rem * 0); left: calc(0.25rem * 0); background-color: var(--color-base-100); } :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) { border-bottom: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); } } } } .navbar { @layer daisyui.l1.l2.l3 { display: flex; width: 100%; align-items: center; padding: 0.5rem; min-height: 4rem; } :where(&) { @layer daisyui.l1.l2 { position: relative; } } } .stats { @layer daisyui.l1.l2.l3 { position: relative; display: inline-grid; grid-auto-flow: column; overflow-x: auto; border-radius: var(--radius-box); } } .progress { @layer daisyui.l1.l2.l3 { position: relative; height: calc(0.25rem * 2); width: 100%; appearance: none; overflow: hidden; border-radius: var(--radius-box); background-color: currentcolor; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, currentcolor 20%, transparent); } color: var(--color-base-content); &:indeterminate { background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); background-size: 200%; background-position-x: 15%; @media (prefers-reduced-motion: no-preference) { animation: progress 5s ease-in-out infinite; } @supports (-moz-appearance: none) { &::-moz-progress-bar { background-color: transparent; @media (prefers-reduced-motion: no-preference) { animation: progress 5s ease-in-out infinite; background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); background-size: 200%; background-position-x: 15%; } } } } @supports (-moz-appearance: none) { &::-moz-progress-bar { border-radius: var(--radius-box); background-color: currentcolor; } } @supports (-webkit-appearance: none) { &::-webkit-progress-bar { border-radius: var(--radius-box); background-color: transparent; } &::-webkit-progress-value { border-radius: var(--radius-box); background-color: currentColor; } } } } .tooltip-left { @layer daisyui.l1.l2 { > .tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%); inset: 50% var(--tt-off) auto auto; } &:after { transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg); inset: 50% calc(var(--tt-tail) + 1px) auto auto; } } } .tooltip-right { @layer daisyui.l1.l2 { > .tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%); inset: 50% auto auto var(--tt-off); } &:after { transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg); inset: 50% auto auto calc(var(--tt-tail) + 1px); } } } .dropdown-end { @layer daisyui.l1.l2 { --anchor-h: span-left; :where(.dropdown-content) { inset-inline-end: calc(0.25rem * 0); translate: 0 0; [dir='rtl'] & { translate: 0 0; } } &.dropdown-left { --anchor-h: left; --anchor-v: span-top; .dropdown-content { top: auto; bottom: calc(0.25rem * 0); } } &.dropdown-right { --anchor-h: right; --anchor-v: span-top; .dropdown-content { top: auto; bottom: calc(0.25rem * 0); } } } } .hero-content { @layer daisyui.l1.l2.l3 { isolation: isolate; display: flex; max-width: 80rem; align-items: center; justify-content: center; gap: calc(0.25rem * 4); padding: calc(0.25rem * 4); } } .hero { @layer daisyui.l1.l2.l3 { display: grid; width: 100%; place-items: center; background-size: cover; background-position: center; & > * { grid-column-start: 1; grid-row-start: 1; } } } .stat-value { @layer daisyui.l1.l2.l3 { grid-column-start: 1; white-space: nowrap; font-size: 2rem; font-weight: 800; } } .stat-desc { @layer daisyui.l1.l2.l3 { grid-column-start: 1; white-space: nowrap; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } font-size: 0.75rem; } } .stat-title { @layer daisyui.l1.l2.l3 { grid-column-start: 1; white-space: nowrap; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } font-size: 0.75rem; } } .divider { @layer daisyui.l1.l2.l3 { display: flex; height: calc(0.25rem * 4); flex-direction: row; align-items: center; align-self: stretch; white-space: nowrap; margin: var(--divider-m, 1rem 0); --divider-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --divider-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); } &:before, &:after { content: ''; height: calc(0.25rem * 0.5); width: 100%; flex-grow: 1; background-color: var(--divider-color); } @media print { &:before, &:after { border: 0.5px solid; } } &:not(:empty) { gap: calc(0.25rem * 4); } } } .m-1 { margin: calc(var(--spacing) * 1); } .label { @layer daisyui.l1.l2.l3 { display: inline-flex; align-items: center; gap: calc(0.25rem * 1.5); white-space: nowrap; color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 60%, transparent); } &:has(input) { cursor: pointer; } &:is(.input > *, .select > *) { display: flex; height: calc(100% - 0.5rem); align-items: center; padding-inline: calc(0.25rem * 3); white-space: nowrap; font-size: inherit; &:first-child { margin-inline-start: calc(0.25rem * -3); margin-inline-end: calc(0.25rem * 3); border-inline-end: var(--border) solid currentColor; @supports (color: color-mix(in lab, red, red)) { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } &:last-child { margin-inline-start: calc(0.25rem * 3); margin-inline-end: calc(0.25rem * -3); border-inline-start: var(--border) solid currentColor; @supports (color: color-mix(in lab, red, red)) { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } } } } .mt-0 { margin-top: calc(var(--spacing) * 0); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mr-8 { margin-right: calc(var(--spacing) * 8); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .ml-auto { margin-left: auto; } .badge { @layer daisyui.l1.l2.l3 { display: inline-flex; align-items: center; justify-content: center; gap: calc(0.25rem * 2); border-radius: var(--radius-selector); vertical-align: middle; color: var(--badge-fg); border: var(--border) solid var(--badge-color, var(--color-base-200)); font-size: 0.875rem; width: fit-content; background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-bg: var(--badge-color, var(--color-base-100)); --badge-fg: var(--color-base-content); --size: calc(var(--size-selector, 0.25rem) * 6); height: var(--size); padding-inline: calc(var(--size) / 2 - var(--border)); } } .stat { @layer daisyui.l1.l2.l3 { display: inline-grid; width: 100%; column-gap: calc(0.25rem * 4); padding-inline: calc(0.25rem * 6); padding-block: calc(0.25rem * 4); grid-template-columns: repeat(1, 1fr); &:not(:last-child) { border-inline-end: var(--border) dashed currentColor; @supports (color: color-mix(in lab, red, red)) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); } border-block-end: none; } } } .alert { border-width: var(--border); border-color: var(--alert-border-color, var(--color-base-200)); @layer daisyui.l1.l2.l3 { border-style: solid; --alert-border-color: var(--color-base-200); display: grid; align-items: center; gap: calc(0.25rem * 4); border-radius: var(--radius-box); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 3); color: var(--color-base-content); background-color: var(--alert-color, var(--color-base-200)); justify-content: start; justify-items: start; grid-auto-flow: column; grid-template-columns: auto; text-align: start; font-size: 0.875rem; line-height: 1.25rem; background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); 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)); @supports (color: color-mix(in lab, red, red)) { 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)); } &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr); } } } .flex { display: flex; } .hidden { display: none; } .inline-block { display: inline-block; } .table { display: table; } .divider-horizontal { @layer daisyui.l1.l2 { --divider-m: 0 1rem; &.divider { height: auto; width: calc(0.25rem * 4); flex-direction: column; &:before { height: 100%; width: calc(0.25rem * 0.5); } &:after { height: 100%; width: calc(0.25rem * 0.5); } } } } .btn-square { @layer daisyui.l1.l2 { padding-inline: calc(0.25rem * 0); width: var(--size); height: var(--size); } } .h-5 { height: calc(var(--spacing) * 5); } .h-6 { height: calc(var(--spacing) * 6); } .h-8 { height: calc(var(--spacing) * 8); } .min-h-screen { min-height: 100vh; } .w-5 { width: calc(var(--spacing) * 5); } .w-6 { width: calc(var(--spacing) * 6); } .w-8 { width: calc(var(--spacing) * 8); } .w-40 { width: calc(var(--spacing) * 40); } .w-52 { width: calc(var(--spacing) * 52); } .w-auto { width: auto; } .w-full { width: 100%; } .max-w-md { max-width: var(--container-md); } .flex-1 { flex: 1; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-shrink-0 { flex-shrink: 0; } .stats-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; overflow-y: auto; .stat:not(:last-child) { border-inline-end: none; border-block-end: var(--border) dashed currentColor; @supports (color: color-mix(in lab, red, red)) { border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); } } } } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-nowrap { flex-wrap: nowrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-4 { gap: calc(var(--spacing) * 4); } .overflow-x-auto { overflow-x: auto; } .rounded-md { border-radius: var(--radius-md); } .bg-accent { background-color: var(--color-accent); } .bg-base-100 { background-color: var(--color-base-100); } .bg-base-200 { background-color: var(--color-base-200); } .bg-clrs-slate { background-color: var(--clrs-slate, #708090); } .bg-neutral { background-color: var(--color-neutral); } .bg-secondary { background-color: var(--color-secondary); } .fill-current { fill: currentcolor; } .stroke-current { stroke: currentcolor; } .p-2 { padding: calc(var(--spacing) * 2); } .p-4 { padding: calc(var(--spacing) * 4); } .py-6 { padding-block: calc(var(--spacing) * 6); } .pt-0 { padding-top: calc(var(--spacing) * 0); } .text-center { text-align: center; } .font-sans { font-family: var(--font-sans); } .text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .alert-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --alert-border-color: var(--color-info); --alert-color: var(--color-info); } } .tooltip-warning { @layer daisyui.l1.l2 { --tt-bg: var(--color-warning); > .tooltip-content, &[data-tip]:before { color: var(--color-warning-content); } } } .text-accent-content { color: var(--color-accent-content); } .text-neutral-content { color: var(--color-neutral-content); } .text-secondary { color: var(--color-secondary); } .text-secondary-content { color: var(--color-secondary-content); } .normal-case { text-transform: none; } .shadow { --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)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .btn-ghost { @layer daisyui.l1 { &:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn) ) { --btn-shadow: ''; --btn-bg: #0000; --btn-border: #0000; --btn-noise: none; &:not(:disabled, [disabled], .btn-disabled) { outline-color: currentcolor; --btn-fg: var(--btn-color, currentColor); } } @media (hover: none) { &:not( .btn-active, :active, :focus-visible, input:checked:not(.filter .btn) ):hover { outline-color: currentcolor; --btn-shadow: ''; --btn-bg: #0000; --btn-fg: var(--btn-color, currentColor); --btn-border: #0000; --btn-noise: none; } } } } .btn-primary { @layer daisyui.l1.l2.l3 { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); } } .lg\\:flex { @media (width >= 64rem) { display: flex; } } .lg\\:inline-block { @media (width >= 64rem) { display: inline-block; } } .lg\\:stats-horizontal { @media (width >= 64rem) { @layer daisyui.l1.l2 { grid-auto-flow: column; overflow-x: auto; .stat:not(:last-child) { border-inline-end: var(--border) dashed currentColor; @supports (color: color-mix(in lab, red, red)) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); } border-block-end: none; } } } } } @layer base { :where(:root), :root:has(input.theme-controller[value='light']:checked), [data-theme='light'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(98% 0 0); --color-base-300: oklch(95% 0 0); --color-base-content: oklch(21% 0.006 285.885); --color-primary: oklch(45% 0.24 277.023); --color-primary-content: oklch(93% 0.034 272.788); --color-secondary: oklch(65% 0.241 354.308); --color-secondary-content: oklch(94% 0.028 342.258); --color-accent: oklch(77% 0.152 181.912); --color-accent-content: oklch(38% 0.063 188.416); --color-neutral: oklch(14% 0.005 285.823); --color-neutral-content: oklch(92% 0.004 286.32); --color-info: oklch(74% 0.16 232.661); --color-info-content: oklch(29% 0.066 243.157); --color-success: oklch(76% 0.177 163.223); --color-success-content: oklch(37% 0.077 168.94); --color-warning: oklch(82% 0.189 84.429); --color-warning-content: oklch(41% 0.112 45.904); --color-error: oklch(71% 0.194 13.428); --color-error-content: oklch(27% 0.105 12.094); --radius-selector: 0.5rem; --radius-field: 0.25rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-base-100: oklch(25.33% 0.016 252.42); --color-base-200: oklch(23.26% 0.014 253.1); --color-base-300: oklch(21.15% 0.012 254.09); --color-base-content: oklch(97.807% 0.029 256.847); --color-primary: oklch(58% 0.233 277.117); --color-primary-content: oklch(96% 0.018 272.314); --color-secondary: oklch(65% 0.241 354.308); --color-secondary-content: oklch(94% 0.028 342.258); --color-accent: oklch(77% 0.152 181.912); --color-accent-content: oklch(38% 0.063 188.416); --color-neutral: oklch(14% 0.005 285.823); --color-neutral-content: oklch(92% 0.004 286.32); --color-info: oklch(74% 0.16 232.661); --color-info-content: oklch(29% 0.066 243.157); --color-success: oklch(76% 0.177 163.223); --color-success-content: oklch(37% 0.077 168.94); --color-warning: oklch(82% 0.189 84.429); --color-warning-content: oklch(41% 0.112 45.904); --color-error: oklch(71% 0.194 13.428); --color-error-content: oklch(27% 0.105 12.094); --radius-selector: 0.5rem; --radius-field: 0.25rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } } @layer base { :root:has(input.theme-controller[value='light']:checked), [data-theme='light'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(98% 0 0); --color-base-300: oklch(95% 0 0); --color-base-content: oklch(21% 0.006 285.885); --color-primary: oklch(45% 0.24 277.023); --color-primary-content: oklch(93% 0.034 272.788); --color-secondary: oklch(65% 0.241 354.308); --color-secondary-content: oklch(94% 0.028 342.258); --color-accent: oklch(77% 0.152 181.912); --color-accent-content: oklch(38% 0.063 188.416); --color-neutral: oklch(14% 0.005 285.823); --color-neutral-content: oklch(92% 0.004 286.32); --color-info: oklch(74% 0.16 232.661); --color-info-content: oklch(29% 0.066 243.157); --color-success: oklch(76% 0.177 163.223); --color-success-content: oklch(37% 0.077 168.94); --color-warning: oklch(82% 0.189 84.429); --color-warning-content: oklch(41% 0.112 45.904); --color-error: oklch(71% 0.194 13.428); --color-error-content: oklch(27% 0.105 12.094); --radius-selector: 0.5rem; --radius-field: 0.25rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='dark']:checked), [data-theme='dark'] { color-scheme: dark; --color-base-100: oklch(25.33% 0.016 252.42); --color-base-200: oklch(23.26% 0.014 253.1); --color-base-300: oklch(21.15% 0.012 254.09); --color-base-content: oklch(97.807% 0.029 256.847); --color-primary: oklch(58% 0.233 277.117); --color-primary-content: oklch(96% 0.018 272.314); --color-secondary: oklch(65% 0.241 354.308); --color-secondary-content: oklch(94% 0.028 342.258); --color-accent: oklch(77% 0.152 181.912); --color-accent-content: oklch(38% 0.063 188.416); --color-neutral: oklch(14% 0.005 285.823); --color-neutral-content: oklch(92% 0.004 286.32); --color-info: oklch(74% 0.16 232.661); --color-info-content: oklch(29% 0.066 243.157); --color-success: oklch(76% 0.177 163.223); --color-success-content: oklch(37% 0.077 168.94); --color-warning: oklch(82% 0.189 84.429); --color-warning-content: oklch(41% 0.112 45.904); --color-error: oklch(71% 0.194 13.428); --color-error-content: oklch(27% 0.105 12.094); --radius-selector: 0.5rem; --radius-field: 0.25rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='aqua']:checked), [data-theme='aqua'] { color-scheme: dark; --color-base-100: oklch(37% 0.146 265.522); --color-base-200: oklch(28% 0.091 267.935); --color-base-300: oklch(22% 0.091 267.935); --color-base-content: oklch(90% 0.058 230.902); --color-primary: oklch(85.661% 0.144 198.645); --color-primary-content: oklch(40.124% 0.068 197.603); --color-secondary: oklch(60.682% 0.108 309.782); --color-secondary-content: oklch(96% 0.016 293.756); --color-accent: oklch(93.426% 0.102 94.555); --color-accent-content: oklch(18.685% 0.02 94.555); --color-neutral: oklch(27% 0.146 265.522); --color-neutral-content: oklch(80% 0.146 265.522); --color-info: oklch(54.615% 0.215 262.88); --color-info-content: oklch(90.923% 0.043 262.88); --color-success: oklch(62.705% 0.169 149.213); --color-success-content: oklch(12.541% 0.033 149.213); --color-warning: oklch(66.584% 0.157 58.318); --color-warning-content: oklch(27% 0.077 45.635); --color-error: oklch(73.95% 0.19 27.33); --color-error-content: oklch(14.79% 0.038 27.33); --radius-selector: 1rem; --radius-field: 0.5rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='business']:checked), [data-theme='business'] { color-scheme: dark; --color-base-100: oklch(24.353% 0 0); --color-base-200: oklch(22.648% 0 0); --color-base-300: oklch(20.944% 0 0); --color-base-content: oklch(84.87% 0 0); --color-primary: oklch(41.703% 0.099 251.473); --color-primary-content: oklch(88.34% 0.019 251.473); --color-secondary: oklch(64.092% 0.027 229.389); --color-secondary-content: oklch(12.818% 0.005 229.389); --color-accent: oklch(67.271% 0.167 35.791); --color-accent-content: oklch(13.454% 0.033 35.791); --color-neutral: oklch(27.441% 0.013 253.041); --color-neutral-content: oklch(85.488% 0.002 253.041); --color-info: oklch(62.616% 0.143 240.033); --color-info-content: oklch(12.523% 0.028 240.033); --color-success: oklch(70.226% 0.094 156.596); --color-success-content: oklch(14.045% 0.018 156.596); --color-warning: oklch(77.482% 0.115 81.519); --color-warning-content: oklch(15.496% 0.023 81.519); --color-error: oklch(51.61% 0.146 29.674); --color-error-content: oklch(90.322% 0.029 29.674); --radius-selector: 0rem; --radius-field: 0.25rem; --radius-box: 0.25rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='corporate']:checked), [data-theme='corporate'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(93% 0 0); --color-base-300: oklch(86% 0 0); --color-base-content: oklch(22.389% 0.031 278.072); --color-primary: oklch(58% 0.158 241.966); --color-primary-content: oklch(100% 0 0); --color-secondary: oklch(55% 0.046 257.417); --color-secondary-content: oklch(100% 0 0); --color-accent: oklch(60% 0.118 184.704); --color-accent-content: oklch(100% 0 0); --color-neutral: oklch(0% 0 0); --color-neutral-content: oklch(100% 0 0); --color-info: oklch(60% 0.126 221.723); --color-info-content: oklch(100% 0 0); --color-success: oklch(62% 0.194 149.214); --color-success-content: oklch(100% 0 0); --color-warning: oklch(85% 0.199 91.936); --color-warning-content: oklch(0% 0 0); --color-error: oklch(70% 0.191 22.216); --color-error-content: oklch(0% 0 0); --radius-selector: 0.25rem; --radius-field: 0.25rem; --radius-box: 0.25rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='fantasy']:checked), [data-theme='fantasy'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(93% 0 0); --color-base-300: oklch(86% 0 0); --color-base-content: oklch(27.807% 0.029 256.847); --color-primary: oklch(37.45% 0.189 325.02); --color-primary-content: oklch(87.49% 0.037 325.02); --color-secondary: oklch(53.92% 0.162 241.36); --color-secondary-content: oklch(90.784% 0.032 241.36); --color-accent: oklch(75.98% 0.204 56.72); --color-accent-content: oklch(15.196% 0.04 56.72); --color-neutral: oklch(27.807% 0.029 256.847); --color-neutral-content: oklch(85.561% 0.005 256.847); --color-info: oklch(72.06% 0.191 231.6); --color-info-content: oklch(0% 0 0); --color-success: oklch(64.8% 0.15 160); --color-success-content: oklch(0% 0 0); --color-warning: oklch(84.71% 0.199 83.87); --color-warning-content: oklch(0% 0 0); --color-error: oklch(71.76% 0.221 22.18); --color-error-content: oklch(0% 0 0); --radius-selector: 1rem; --radius-field: 0.5rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='night']:checked), [data-theme='night'] { color-scheme: dark; --color-base-100: oklch(20.768% 0.039 265.754); --color-base-200: oklch(19.314% 0.037 265.754); --color-base-300: oklch(17.86% 0.034 265.754); --color-base-content: oklch(84.153% 0.007 265.754); --color-primary: oklch(75.351% 0.138 232.661); --color-primary-content: oklch(15.07% 0.027 232.661); --color-secondary: oklch(68.011% 0.158 276.934); --color-secondary-content: oklch(13.602% 0.031 276.934); --color-accent: oklch(72.36% 0.176 350.048); --color-accent-content: oklch(14.472% 0.035 350.048); --color-neutral: oklch(27.949% 0.036 260.03); --color-neutral-content: oklch(85.589% 0.007 260.03); --color-info: oklch(68.455% 0.148 237.251); --color-info-content: oklch(0% 0 0); --color-success: oklch(78.452% 0.132 181.911); --color-success-content: oklch(15.69% 0.026 181.911); --color-warning: oklch(83.242% 0.139 82.95); --color-warning-content: oklch(16.648% 0.027 82.95); --color-error: oklch(71.785% 0.17 13.118); --color-error-content: oklch(14.357% 0.034 13.118); --radius-selector: 1rem; --radius-field: 0.5rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='winter']:checked), [data-theme='winter'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(97.466% 0.011 259.822); --color-base-300: oklch(93.268% 0.016 262.751); --color-base-content: oklch(41.886% 0.053 255.824); --color-primary: oklch(56.86% 0.255 257.57); --color-primary-content: oklch(91.372% 0.051 257.57); --color-secondary: oklch(42.551% 0.161 282.339); --color-secondary-content: oklch(88.51% 0.032 282.339); --color-accent: oklch(59.939% 0.191 335.171); --color-accent-content: oklch(11.988% 0.038 335.171); --color-neutral: oklch(19.616% 0.063 257.651); --color-neutral-content: oklch(83.923% 0.012 257.651); --color-info: oklch(88.127% 0.085 214.515); --color-info-content: oklch(17.625% 0.017 214.515); --color-success: oklch(80.494% 0.077 197.823); --color-success-content: oklch(16.098% 0.015 197.823); --color-warning: oklch(89.172% 0.045 71.47); --color-warning-content: oklch(17.834% 0.009 71.47); --color-error: oklch(73.092% 0.11 20.076); --color-error-content: oklch(14.618% 0.022 20.076); --radius-selector: 1rem; --radius-field: 0.5rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='wireframe']:checked), [data-theme='wireframe'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(97% 0 0); --color-base-300: oklch(94% 0 0); --color-base-content: oklch(20% 0 0); --color-primary: oklch(87% 0 0); --color-primary-content: oklch(26% 0 0); --color-secondary: oklch(87% 0 0); --color-secondary-content: oklch(26% 0 0); --color-accent: oklch(87% 0 0); --color-accent-content: oklch(26% 0 0); --color-neutral: oklch(87% 0 0); --color-neutral-content: oklch(26% 0 0); --color-info: oklch(44% 0.11 240.79); --color-info-content: oklch(90% 0.058 230.902); --color-success: oklch(43% 0.095 166.913); --color-success-content: oklch(90% 0.093 164.15); --color-warning: oklch(47% 0.137 46.201); --color-warning-content: oklch(92% 0.12 95.746); --color-error: oklch(44% 0.177 26.899); --color-error-content: oklch(88% 0.062 18.334); --radius-selector: 0rem; --radius-field: 0.25rem; --radius-box: 0.25rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root { --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); } } @layer base { :root { scrollbar-color: currentColor #0000; @supports (color: color-mix(in lab, red, red)) { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000; } } } @layer base { @property --radialprogress { syntax: '<percentage>'; inherits: true; initial-value: 0%; } } @layer base { :root:not(span) { overflow: var(--page-overflow); } } @layer base { :root { background: var(--page-scroll-bg, var(--root-bg)); --page-scroll-bg-on: linear-gradient( var(--root-bg, #0000), var(--root-bg, #0000) ) var(--root-bg, #0000); @supports (color: color-mix(in lab, red, red)) { --page-scroll-bg-on: linear-gradient( var(--root-bg, #0000), var(--root-bg, #0000) ) color-mix( in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%) ); } --page-scroll-transition-on: background-color 0.3s ease-out; transition: var(--page-scroll-transition); scrollbar-gutter: var(--page-scroll-gutter, unset); scrollbar-gutter: if( style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset ); } @keyframes set-page-has-scroll { 0%, to { --page-has-scroll: 1; } } } @layer base { :root, [data-theme] { background: var(--page-scroll-bg, var(--root-bg)); color: var(--color-base-content); } :where(:root, [data-theme]) { --root-bg: var(--color-base-100); } } @keyframes rating { 0%, 40% { scale: 1.1; filter: brightness(1.05) contrast(1.05); } } @keyframes dropdown { 0% { opacity: 0; } } @keyframes radio { 0% { padding: 5px; } 50% { padding: 3px; } } @keyframes toast { 0% { scale: 0.9; opacity: 0; } 100% { scale: 1; opacity: 1; } } @keyframes rotator { 89.9999%, 100% { --first-item-position: 0 0%; } 90%, 99.9999% { --first-item-position: 0 calc(var(--items) * 100%); } 100% { translate: 0 -100%; } } @keyframes skeleton { 0% { background-position: 150%; } 100% { background-position: -50%; } } @keyframes menu { 0% { opacity: 0; } } @keyframes progress { 50% { background-position-x: -115%; } } `;
6
+ const shadowCss = () => ` @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --spacing: 0.25rem; --container-md: 28rem; --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --font-weight-bold: 700; --radius-md: 0.375rem; } } @layer utilities { .tooltip { @layer daisyui.l1.l2.l3 { position: relative; display: inline-block; --tt-bg: var(--color-neutral); --tt-off: calc(100% + 0.5rem); --tt-tail: calc(100% + 1px + 0.25rem); & > .tooltip-content, &[data-tip]:before { position: absolute; max-width: 20rem; border-radius: var(--radius-field); padding-inline: calc(0.25rem * 2); padding-block: calc(0.25rem * 1); text-align: center; white-space: normal; color: var(--color-neutral-content); opacity: 0%; font-size: 0.875rem; line-height: 1.25; background-color: var(--tt-bg); width: max-content; pointer-events: none; z-index: 2; --tw-content: attr(data-tip); content: var(--tw-content); } &:after { opacity: 0%; background-color: var(--tt-bg); content: ''; pointer-events: none; width: 0.625rem; height: 0.25rem; display: block; position: absolute; mask-repeat: no-repeat; mask-position: -1px 0; --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); mask-image: var(--mask-tooltip); } @media (prefers-reduced-motion: no-preference) { & > .tooltip-content, &[data-tip]:before, &:after { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms; } } &:is([data-tip]:not([data-tip='']), :has(.tooltip-content:not(:empty))) { &.tooltip-open, &:hover, &:has(:focus-visible) { & > .tooltip-content, &[data-tip]:before, &:after { opacity: 100%; --tt-pos: 0rem; @media (prefers-reduced-motion: no-preference) { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s; } } } } } @layer daisyui.l1.l2 { > .tooltip-content, &[data-tip]:before { transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); inset: auto auto var(--tt-off) 50%; } &:after { transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); inset: auto auto var(--tt-tail) 50%; } } } .menu { @layer daisyui.l1.l2.l3 { display: flex; width: fit-content; flex-direction: column; flex-wrap: wrap; padding: calc(0.25rem * 2); --menu-active-fg: var(--color-neutral-content); --menu-active-bg: var(--color-neutral); font-size: 0.875rem; :where(li ul) { position: relative; margin-inline-start: calc(0.25rem * 4); padding-inline-start: calc(0.25rem * 2); white-space: nowrap; &:before { position: absolute; inset-inline-start: calc(0.25rem * 0); top: calc(0.25rem * 3); bottom: calc(0.25rem * 3); background-color: var(--color-base-content); opacity: 10%; width: var(--border); content: ''; } } :where(li > .menu-dropdown:not(.menu-dropdown-show)) { display: none; } :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { display: grid; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: calc(0.25rem * 2); border-radius: var(--radius-field); padding-inline: calc(0.25rem * 3); padding-block: calc(0.25rem * 1.5); text-align: start; transition-property: color, background-color, box-shadow; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); grid-auto-columns: minmax(auto, max-content) auto max-content; text-wrap: balance; user-select: none; } :where(li > details > summary) { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } &::-webkit-details-marker { display: none; } } :where(li > details > summary), :where(li > .menu-dropdown-toggle) { &:after { justify-self: flex-end; display: block; height: 0.375rem; width: 0.375rem; rotate: -135deg; translate: 0 -1px; transition-property: rotate, translate; transition-duration: 0.2s; content: ''; transform-origin: 50% 50%; box-shadow: 2px 2px inset; pointer-events: none; } } details { overflow: hidden; interpolate-size: allow-keywords; } details::details-content { block-size: 0; @media (prefers-reduced-motion: no-preference) { transition-behavior: allow-discrete; transition-property: block-size, content-visibility; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } } details[open]::details-content { block-size: auto; } :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { rotate: 45deg; translate: 0 1px; } :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) { &.menu-focus, &:focus-visible { cursor: pointer; background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); } color: var(--color-base-content); --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } } } :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 ) { cursor: pointer; background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); } --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset; } :where(li:empty) { background-color: var(--color-base-content); opacity: 10%; margin: 0.5rem 1rem; height: 1px; } :where(li) { position: relative; display: flex; flex-shrink: 0; flex-direction: column; flex-wrap: wrap; align-items: stretch; .badge { justify-self: flex-end; } & > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } color: var(--menu-active-fg); background-color: var(--menu-active-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); &:not(&:active) { box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg); } } &.menu-disabled { pointer-events: none; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix( in oklab, var(--color-base-content) 20%, transparent ); } } } .dropdown:focus-within { .menu-dropdown-toggle:after { rotate: 45deg; translate: 0 1px; } } .dropdown-content { margin-top: calc(0.25rem * 2); padding: calc(0.25rem * 2); &:before { display: none; } } } } .dropdown { @layer daisyui.l1.l2.l3 { position: relative; display: inline-block; position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); & > *:not(:has(~ [class*='dropdown-content'])):focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline: 2px solid transparent; outline-offset: 2px; } } .dropdown-content { position: absolute; } &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content { display: none; transform-origin: top; opacity: 0%; scale: 95%; } &[popover], .dropdown-content { z-index: 999; @media (prefers-reduced-motion: no-preference) { animation: dropdown 0.2s; transition-property: opacity, scale, display, overlay; transition-behavior: allow-discrete; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } } @starting-style { &[popover], .dropdown-content { scale: 95%; opacity: 0; } } &:not(.dropdown-close) { &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { > [tabindex]:first-child { pointer-events: none; } .dropdown-content { opacity: 100%; scale: 100%; } } &.dropdown-hover:hover { .dropdown-content { opacity: 100%; scale: 100%; } } } &:is(details) { summary { &::-webkit-details-marker { display: none; } } } &:where([popover]) { background: #0000; } &[popover] { position: fixed; color: inherit; @supports not (position-area: bottom) { margin: auto; &.dropdown-close, &.dropdown-open:not(:popover-open) { display: none; transform-origin: top; opacity: 0%; scale: 95%; } &::backdrop { background-color: color-mix(in oklab, #000 30%, #0000); } } &.dropdown-close, &:not(.dropdown-open, :popover-open) { display: none; transform-origin: top; opacity: 0%; scale: 95%; } } } } .btn { :where(&) { @layer daisyui.l1.l2.l3 { width: unset; } } .prose :where(a&:not(.btn-link)):not( :where([class~='not-prose'], [class~='not-prose'] *) ) { text-decoration-line: none; } @layer daisyui.l1.l2.l3 { display: inline-flex; flex-shrink: 0; cursor: pointer; flex-wrap: nowrap; align-items: center; justify-content: center; gap: calc(0.25rem * 1.5); text-align: center; vertical-align: middle; outline-offset: 2px; webkit-user-select: none; user-select: none; padding-inline: var(--btn-p); color: var(--btn-fg); --tw-prose-links: var(--btn-fg); height: var(--size); font-size: var(--fontsize, 0.875rem); font-weight: 600; outline-color: var(--btn-color, var(--color-base-content)); transition-property: color, background-color, border-color, box-shadow; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 0.2s; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); background-color: var(--btn-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--btn-noise); border-width: var(--border); border-style: solid; border-color: var(--btn-border); text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15)); touch-action: manipulation; box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow); --size: calc(var(--size-field, 0.25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); --btn-fg: var(--color-base-content); --btn-p: 1rem; --btn-border: var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix( in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%) ); } --btn-shadow: 0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); } --btn-noise: var(--fx-noise); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix( in oklab, var(--btn-color, var(--color-base-200)), #000 7% ); } } } &:focus-visible, &:has(:focus-visible) { outline-width: 2px; outline-style: solid; isolation: isolate; } &:active:not(.btn-active) { translate: 0 0.5px; --btn-bg: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix( in oklab, var(--btn-color, var(--color-base-200)), #000 5% ); } --btn-border: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix( in oklab, var(--btn-color, var(--color-base-200)), #000 7% ); } --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); } &:is(input[type='checkbox'], input[type='radio']) { appearance: none; &[aria-label]::after { --tw-content: attr(aria-label); content: var(--tw-content); } } &:where(input:checked:not(.filter .btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); isolation: isolate; } } &:disabled { @layer daisyui.l1.l2 { &:not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); } box-shadow: none; } pointer-events: none; --btn-border: #0000; --btn-noise: none; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } } &[disabled] { @layer daisyui.l1.l2 { &:not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); } box-shadow: none; } pointer-events: none; --btn-border: #0000; --btn-noise: none; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } } } .radial-progress { @layer daisyui.l1.l2.l3 { position: relative; display: inline-grid; height: var(--size); width: var(--size); place-content: center; border-radius: calc(infinity * 1px); background-color: transparent; vertical-align: middle; box-sizing: content-box; --value: 0; --size: 5rem; --thickness: calc(var(--size) / 10); --radialprogress: calc(var(--value) * 1%); transition: --radialprogress 0.3s linear; &:before { position: absolute; inset: calc(0.25rem * 0); border-radius: calc(infinity * 1px); content: ''; background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0); webkit-mask: radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) ); mask: radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) ); } &:after { position: absolute; border-radius: calc(infinity * 1px); background-color: currentcolor; transition: transform 0.3s linear; content: ''; inset: calc(50% - var(--thickness) / 2); transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%)); } } } .list { @layer daisyui.l1.l2.l3 { display: flex; flex-direction: column; font-size: 0.875rem; .list-row { --list-grid-cols: minmax(0, auto) 1fr; position: relative; display: grid; grid-auto-flow: column; gap: calc(0.25rem * 4); border-radius: var(--radius-box); padding: calc(0.25rem * 4); word-break: break-word; grid-template-columns: var(--list-grid-cols); } & > :not(:last-child) { &.list-row, .list-row { &:after { content: ''; border-bottom: var(--border) solid; inset-inline: var(--radius-box); position: absolute; bottom: calc(0.25rem * 0); border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix( in oklab, var(--color-base-content) 5%, transparent ); } } } } } @layer daisyui.l1.l2 { .list-row { &:has(.list-col-grow:nth-child(1)) { --list-grid-cols: 1fr; } &:has(.list-col-grow:nth-child(2)) { --list-grid-cols: minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(3)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(4)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(5)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(6)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } > * { grid-row-start: 1; } } } } .table { @layer daisyui.l1.l2.l3 { font-size: 0.875rem; position: relative; width: 100%; border-collapse: separate; --tw-border-spacing-x: calc(0.25rem * 0); --tw-border-spacing-y: calc(0.25rem * 0); border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); border-radius: var(--radius-box); text-align: left; &:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *) { text-align: right; } tr.row-hover { &, &:nth-child(even) { &:hover { @media (hover: hover) { background-color: var(--color-base-200); } } } } :where(th, td) { padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 3); vertical-align: middle; } :where(thead, tfoot) { white-space: nowrap; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix( in oklab, var(--color-base-content) 60%, transparent ); } font-size: 0.875rem; font-weight: 600; } :where(tfoot tr:first-child :is(td, th)) { border-top: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); } } :where(.table-pin-rows thead tr) { position: sticky; top: calc(0.25rem * 0); z-index: 1; background-color: var(--color-base-100); } :where(.table-pin-rows tfoot tr) { position: sticky; bottom: calc(0.25rem * 0); z-index: 1; background-color: var(--color-base-100); } :where(.table-pin-cols tr th) { position: sticky; right: calc(0.25rem * 0); left: calc(0.25rem * 0); background-color: var(--color-base-100); } :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) { border-bottom: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); } } } } .navbar { @layer daisyui.l1.l2.l3 { display: flex; width: 100%; align-items: center; padding: 0.5rem; min-height: 4rem; } :where(&) { @layer daisyui.l1.l2 { position: relative; } } } .stats { @layer daisyui.l1.l2.l3 { position: relative; display: inline-grid; grid-auto-flow: column; overflow-x: auto; border-radius: var(--radius-box); } } .progress { @layer daisyui.l1.l2.l3 { position: relative; height: calc(0.25rem * 2); width: 100%; appearance: none; overflow: hidden; border-radius: var(--radius-box); background-color: currentcolor; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, currentcolor 20%, transparent); } color: var(--color-base-content); &:indeterminate { background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); background-size: 200%; background-position-x: 15%; @media (prefers-reduced-motion: no-preference) { animation: progress 5s ease-in-out infinite; } @supports (-moz-appearance: none) { &::-moz-progress-bar { background-color: transparent; @media (prefers-reduced-motion: no-preference) { animation: progress 5s ease-in-out infinite; background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); background-size: 200%; background-position-x: 15%; } } } } @supports (-moz-appearance: none) { &::-moz-progress-bar { border-radius: var(--radius-box); background-color: currentcolor; } } @supports (-webkit-appearance: none) { &::-webkit-progress-bar { border-radius: var(--radius-box); background-color: transparent; } &::-webkit-progress-value { border-radius: var(--radius-box); background-color: currentColor; } } } } .tooltip-left { @layer daisyui.l1.l2 { > .tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%); inset: 50% var(--tt-off) auto auto; } &:after { transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg); inset: 50% calc(var(--tt-tail) + 1px) auto auto; } } } .tooltip-right { @layer daisyui.l1.l2 { > .tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%); inset: 50% auto auto var(--tt-off); } &:after { transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg); inset: 50% auto auto calc(var(--tt-tail) + 1px); } } } .dropdown-end { @layer daisyui.l1.l2 { --anchor-h: span-left; :where(.dropdown-content) { inset-inline-end: calc(0.25rem * 0); translate: 0 0; [dir='rtl'] & { translate: 0 0; } } &.dropdown-left { --anchor-h: left; --anchor-v: span-top; .dropdown-content { top: auto; bottom: calc(0.25rem * 0); } } &.dropdown-right { --anchor-h: right; --anchor-v: span-top; .dropdown-content { top: auto; bottom: calc(0.25rem * 0); } } } } .hero-content { @layer daisyui.l1.l2.l3 { isolation: isolate; display: flex; max-width: 80rem; align-items: center; justify-content: center; gap: calc(0.25rem * 4); padding: calc(0.25rem * 4); } } .hero { @layer daisyui.l1.l2.l3 { display: grid; width: 100%; place-items: center; background-size: cover; background-position: center; & > * { grid-column-start: 1; grid-row-start: 1; } } } .stat-value { @layer daisyui.l1.l2.l3 { grid-column-start: 1; white-space: nowrap; font-size: 2rem; font-weight: 800; } } .stat-desc { @layer daisyui.l1.l2.l3 { grid-column-start: 1; white-space: nowrap; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } font-size: 0.75rem; } } .stat-title { @layer daisyui.l1.l2.l3 { grid-column-start: 1; white-space: nowrap; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } font-size: 0.75rem; } } .divider { @layer daisyui.l1.l2.l3 { display: flex; height: calc(0.25rem * 4); flex-direction: row; align-items: center; align-self: stretch; white-space: nowrap; margin: var(--divider-m, 1rem 0); --divider-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --divider-color: color-mix( in oklab, var(--color-base-content) 10%, transparent ); } &:before, &:after { content: ''; height: calc(0.25rem * 0.5); width: 100%; flex-grow: 1; background-color: var(--divider-color); } @media print { &:before, &:after { border: 0.5px solid; } } &:not(:empty) { gap: calc(0.25rem * 4); } } } .m-1 { margin: calc(var(--spacing) * 1); } .label { @layer daisyui.l1.l2.l3 { display: inline-flex; align-items: center; gap: calc(0.25rem * 1.5); white-space: nowrap; color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 60%, transparent); } &:has(input) { cursor: pointer; } &:is(.input > *, .select > *) { display: flex; height: calc(100% - 0.5rem); align-items: center; padding-inline: calc(0.25rem * 3); white-space: nowrap; font-size: inherit; &:first-child { margin-inline-start: calc(0.25rem * -3); margin-inline-end: calc(0.25rem * 3); border-inline-end: var(--border) solid currentColor; @supports (color: color-mix(in lab, red, red)) { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } &:last-child { margin-inline-start: calc(0.25rem * 3); margin-inline-end: calc(0.25rem * -3); border-inline-start: var(--border) solid currentColor; @supports (color: color-mix(in lab, red, red)) { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } } } } .mt-0 { margin-top: calc(var(--spacing) * 0); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mr-8 { margin-right: calc(var(--spacing) * 8); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .ml-auto { margin-left: auto; } .badge { @layer daisyui.l1.l2.l3 { display: inline-flex; align-items: center; justify-content: center; gap: calc(0.25rem * 2); border-radius: var(--radius-selector); vertical-align: middle; color: var(--badge-fg); border: var(--border) solid var(--badge-color, var(--color-base-200)); font-size: 0.875rem; width: fit-content; background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-bg: var(--badge-color, var(--color-base-100)); --badge-fg: var(--color-base-content); --size: calc(var(--size-selector, 0.25rem) * 6); height: var(--size); padding-inline: calc(var(--size) / 2 - var(--border)); } } .stat { @layer daisyui.l1.l2.l3 { display: inline-grid; width: 100%; column-gap: calc(0.25rem * 4); padding-inline: calc(0.25rem * 6); padding-block: calc(0.25rem * 4); grid-template-columns: repeat(1, 1fr); &:not(:last-child) { border-inline-end: var(--border) dashed currentColor; @supports (color: color-mix(in lab, red, red)) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); } border-block-end: none; } } } .alert { border-width: var(--border); border-color: var(--alert-border-color, var(--color-base-200)); @layer daisyui.l1.l2.l3 { border-style: solid; --alert-border-color: var(--color-base-200); display: grid; align-items: center; gap: calc(0.25rem * 4); border-radius: var(--radius-box); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 3); color: var(--color-base-content); background-color: var(--alert-color, var(--color-base-200)); justify-content: start; justify-items: start; grid-auto-flow: column; grid-template-columns: auto; text-align: start; font-size: 0.875rem; line-height: 1.25rem; background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); 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)); @supports (color: color-mix(in lab, red, red)) { 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)); } &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr); } } } .flex { display: flex; } .hidden { display: none; } .inline-block { display: inline-block; } .table { display: table; } .divider-horizontal { @layer daisyui.l1.l2 { --divider-m: 0 1rem; &.divider { height: auto; width: calc(0.25rem * 4); flex-direction: column; &:before { height: 100%; width: calc(0.25rem * 0.5); } &:after { height: 100%; width: calc(0.25rem * 0.5); } } } } .btn-square { @layer daisyui.l1.l2 { padding-inline: calc(0.25rem * 0); width: var(--size); height: var(--size); } } .h-5 { height: calc(var(--spacing) * 5); } .h-6 { height: calc(var(--spacing) * 6); } .h-8 { height: calc(var(--spacing) * 8); } .min-h-screen { min-height: 100vh; } .w-5 { width: calc(var(--spacing) * 5); } .w-6 { width: calc(var(--spacing) * 6); } .w-8 { width: calc(var(--spacing) * 8); } .w-40 { width: calc(var(--spacing) * 40); } .w-52 { width: calc(var(--spacing) * 52); } .w-auto { width: auto; } .w-full { width: 100%; } .max-w-md { max-width: var(--container-md); } .flex-1 { flex: 1; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-shrink-0 { flex-shrink: 0; } .stats-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; overflow-y: auto; .stat:not(:last-child) { border-inline-end: none; border-block-end: var(--border) dashed currentColor; @supports (color: color-mix(in lab, red, red)) { border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); } } } } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-nowrap { flex-wrap: nowrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-4 { gap: calc(var(--spacing) * 4); } .overflow-x-auto { overflow-x: auto; } .rounded-md { border-radius: var(--radius-md); } .bg-accent { background-color: var(--color-accent); } .bg-base-100 { background-color: var(--color-base-100); } .bg-base-200 { background-color: var(--color-base-200); } .bg-clrs-slate { background-color: var(--clrs-slate, #708090); } .bg-neutral { background-color: var(--color-neutral); } .bg-secondary { background-color: var(--color-secondary); } .fill-current { fill: currentcolor; } .stroke-current { stroke: currentcolor; } .p-2 { padding: calc(var(--spacing) * 2); } .p-4 { padding: calc(var(--spacing) * 4); } .py-6 { padding-block: calc(var(--spacing) * 6); } .pt-0 { padding-top: calc(var(--spacing) * 0); } .text-center { text-align: center; } .font-sans { font-family: var(--font-sans); } .text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .alert-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --alert-border-color: var(--color-info); --alert-color: var(--color-info); } } .tooltip-warning { @layer daisyui.l1.l2 { --tt-bg: var(--color-warning); > .tooltip-content, &[data-tip]:before { color: var(--color-warning-content); } } } .text-accent-content { color: var(--color-accent-content); } .text-neutral-content { color: var(--color-neutral-content); } .text-secondary { color: var(--color-secondary); } .text-secondary-content { color: var(--color-secondary-content); } .normal-case { text-transform: none; } .shadow { --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)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .btn-ghost { @layer daisyui.l1 { &:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn) ) { --btn-shadow: ''; --btn-bg: #0000; --btn-border: #0000; --btn-noise: none; &:not(:disabled, [disabled], .btn-disabled) { outline-color: currentcolor; --btn-fg: var(--btn-color, currentColor); } } @media (hover: none) { &:not( .btn-active, :active, :focus-visible, input:checked:not(.filter .btn) ):hover { outline-color: currentcolor; --btn-shadow: ''; --btn-bg: #0000; --btn-fg: var(--btn-color, currentColor); --btn-border: #0000; --btn-noise: none; } } } } .btn-primary { @layer daisyui.l1.l2.l3 { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); } } .lg\\:flex { @media (width >= 64rem) { display: flex; } } .lg\\:inline-block { @media (width >= 64rem) { display: inline-block; } } .lg\\:stats-horizontal { @media (width >= 64rem) { @layer daisyui.l1.l2 { grid-auto-flow: column; overflow-x: auto; .stat:not(:last-child) { border-inline-end: var(--border) dashed currentColor; @supports (color: color-mix(in lab, red, red)) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); } border-block-end: none; } } } } } @layer base { :where(:root), :root:has(input.theme-controller[value='light']:checked), [data-theme='light'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(98% 0 0); --color-base-300: oklch(95% 0 0); --color-base-content: oklch(21% 0.006 285.885); --color-primary: oklch(45% 0.24 277.023); --color-primary-content: oklch(93% 0.034 272.788); --color-secondary: oklch(65% 0.241 354.308); --color-secondary-content: oklch(94% 0.028 342.258); --color-accent: oklch(77% 0.152 181.912); --color-accent-content: oklch(38% 0.063 188.416); --color-neutral: oklch(14% 0.005 285.823); --color-neutral-content: oklch(92% 0.004 286.32); --color-info: oklch(74% 0.16 232.661); --color-info-content: oklch(29% 0.066 243.157); --color-success: oklch(76% 0.177 163.223); --color-success-content: oklch(37% 0.077 168.94); --color-warning: oklch(82% 0.189 84.429); --color-warning-content: oklch(41% 0.112 45.904); --color-error: oklch(71% 0.194 13.428); --color-error-content: oklch(27% 0.105 12.094); --radius-selector: 0.5rem; --radius-field: 0.25rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-base-100: oklch(25.33% 0.016 252.42); --color-base-200: oklch(23.26% 0.014 253.1); --color-base-300: oklch(21.15% 0.012 254.09); --color-base-content: oklch(97.807% 0.029 256.847); --color-primary: oklch(58% 0.233 277.117); --color-primary-content: oklch(96% 0.018 272.314); --color-secondary: oklch(65% 0.241 354.308); --color-secondary-content: oklch(94% 0.028 342.258); --color-accent: oklch(77% 0.152 181.912); --color-accent-content: oklch(38% 0.063 188.416); --color-neutral: oklch(14% 0.005 285.823); --color-neutral-content: oklch(92% 0.004 286.32); --color-info: oklch(74% 0.16 232.661); --color-info-content: oklch(29% 0.066 243.157); --color-success: oklch(76% 0.177 163.223); --color-success-content: oklch(37% 0.077 168.94); --color-warning: oklch(82% 0.189 84.429); --color-warning-content: oklch(41% 0.112 45.904); --color-error: oklch(71% 0.194 13.428); --color-error-content: oklch(27% 0.105 12.094); --radius-selector: 0.5rem; --radius-field: 0.25rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } } @layer base { :root:has(input.theme-controller[value='light']:checked), [data-theme='light'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(98% 0 0); --color-base-300: oklch(95% 0 0); --color-base-content: oklch(21% 0.006 285.885); --color-primary: oklch(45% 0.24 277.023); --color-primary-content: oklch(93% 0.034 272.788); --color-secondary: oklch(65% 0.241 354.308); --color-secondary-content: oklch(94% 0.028 342.258); --color-accent: oklch(77% 0.152 181.912); --color-accent-content: oklch(38% 0.063 188.416); --color-neutral: oklch(14% 0.005 285.823); --color-neutral-content: oklch(92% 0.004 286.32); --color-info: oklch(74% 0.16 232.661); --color-info-content: oklch(29% 0.066 243.157); --color-success: oklch(76% 0.177 163.223); --color-success-content: oklch(37% 0.077 168.94); --color-warning: oklch(82% 0.189 84.429); --color-warning-content: oklch(41% 0.112 45.904); --color-error: oklch(71% 0.194 13.428); --color-error-content: oklch(27% 0.105 12.094); --radius-selector: 0.5rem; --radius-field: 0.25rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='dark']:checked), [data-theme='dark'] { color-scheme: dark; --color-base-100: oklch(25.33% 0.016 252.42); --color-base-200: oklch(23.26% 0.014 253.1); --color-base-300: oklch(21.15% 0.012 254.09); --color-base-content: oklch(97.807% 0.029 256.847); --color-primary: oklch(58% 0.233 277.117); --color-primary-content: oklch(96% 0.018 272.314); --color-secondary: oklch(65% 0.241 354.308); --color-secondary-content: oklch(94% 0.028 342.258); --color-accent: oklch(77% 0.152 181.912); --color-accent-content: oklch(38% 0.063 188.416); --color-neutral: oklch(14% 0.005 285.823); --color-neutral-content: oklch(92% 0.004 286.32); --color-info: oklch(74% 0.16 232.661); --color-info-content: oklch(29% 0.066 243.157); --color-success: oklch(76% 0.177 163.223); --color-success-content: oklch(37% 0.077 168.94); --color-warning: oklch(82% 0.189 84.429); --color-warning-content: oklch(41% 0.112 45.904); --color-error: oklch(71% 0.194 13.428); --color-error-content: oklch(27% 0.105 12.094); --radius-selector: 0.5rem; --radius-field: 0.25rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='aqua']:checked), [data-theme='aqua'] { color-scheme: dark; --color-base-100: oklch(37% 0.146 265.522); --color-base-200: oklch(28% 0.091 267.935); --color-base-300: oklch(22% 0.091 267.935); --color-base-content: oklch(90% 0.058 230.902); --color-primary: oklch(85.661% 0.144 198.645); --color-primary-content: oklch(40.124% 0.068 197.603); --color-secondary: oklch(60.682% 0.108 309.782); --color-secondary-content: oklch(96% 0.016 293.756); --color-accent: oklch(93.426% 0.102 94.555); --color-accent-content: oklch(18.685% 0.02 94.555); --color-neutral: oklch(27% 0.146 265.522); --color-neutral-content: oklch(80% 0.146 265.522); --color-info: oklch(54.615% 0.215 262.88); --color-info-content: oklch(90.923% 0.043 262.88); --color-success: oklch(62.705% 0.169 149.213); --color-success-content: oklch(12.541% 0.033 149.213); --color-warning: oklch(66.584% 0.157 58.318); --color-warning-content: oklch(27% 0.077 45.635); --color-error: oklch(73.95% 0.19 27.33); --color-error-content: oklch(14.79% 0.038 27.33); --radius-selector: 1rem; --radius-field: 0.5rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='business']:checked), [data-theme='business'] { color-scheme: dark; --color-base-100: oklch(24.353% 0 0); --color-base-200: oklch(22.648% 0 0); --color-base-300: oklch(20.944% 0 0); --color-base-content: oklch(84.87% 0 0); --color-primary: oklch(41.703% 0.099 251.473); --color-primary-content: oklch(88.34% 0.019 251.473); --color-secondary: oklch(64.092% 0.027 229.389); --color-secondary-content: oklch(12.818% 0.005 229.389); --color-accent: oklch(67.271% 0.167 35.791); --color-accent-content: oklch(13.454% 0.033 35.791); --color-neutral: oklch(27.441% 0.013 253.041); --color-neutral-content: oklch(85.488% 0.002 253.041); --color-info: oklch(62.616% 0.143 240.033); --color-info-content: oklch(12.523% 0.028 240.033); --color-success: oklch(70.226% 0.094 156.596); --color-success-content: oklch(14.045% 0.018 156.596); --color-warning: oklch(77.482% 0.115 81.519); --color-warning-content: oklch(15.496% 0.023 81.519); --color-error: oklch(51.61% 0.146 29.674); --color-error-content: oklch(90.322% 0.029 29.674); --radius-selector: 0rem; --radius-field: 0.25rem; --radius-box: 0.25rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='corporate']:checked), [data-theme='corporate'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(93% 0 0); --color-base-300: oklch(86% 0 0); --color-base-content: oklch(22.389% 0.031 278.072); --color-primary: oklch(58% 0.158 241.966); --color-primary-content: oklch(100% 0 0); --color-secondary: oklch(55% 0.046 257.417); --color-secondary-content: oklch(100% 0 0); --color-accent: oklch(60% 0.118 184.704); --color-accent-content: oklch(100% 0 0); --color-neutral: oklch(0% 0 0); --color-neutral-content: oklch(100% 0 0); --color-info: oklch(60% 0.126 221.723); --color-info-content: oklch(100% 0 0); --color-success: oklch(62% 0.194 149.214); --color-success-content: oklch(100% 0 0); --color-warning: oklch(85% 0.199 91.936); --color-warning-content: oklch(0% 0 0); --color-error: oklch(70% 0.191 22.216); --color-error-content: oklch(0% 0 0); --radius-selector: 0.25rem; --radius-field: 0.25rem; --radius-box: 0.25rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='fantasy']:checked), [data-theme='fantasy'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(93% 0 0); --color-base-300: oklch(86% 0 0); --color-base-content: oklch(27.807% 0.029 256.847); --color-primary: oklch(37.45% 0.189 325.02); --color-primary-content: oklch(87.49% 0.037 325.02); --color-secondary: oklch(53.92% 0.162 241.36); --color-secondary-content: oklch(90.784% 0.032 241.36); --color-accent: oklch(75.98% 0.204 56.72); --color-accent-content: oklch(15.196% 0.04 56.72); --color-neutral: oklch(27.807% 0.029 256.847); --color-neutral-content: oklch(85.561% 0.005 256.847); --color-info: oklch(72.06% 0.191 231.6); --color-info-content: oklch(0% 0 0); --color-success: oklch(64.8% 0.15 160); --color-success-content: oklch(0% 0 0); --color-warning: oklch(84.71% 0.199 83.87); --color-warning-content: oklch(0% 0 0); --color-error: oklch(71.76% 0.221 22.18); --color-error-content: oklch(0% 0 0); --radius-selector: 1rem; --radius-field: 0.5rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='night']:checked), [data-theme='night'] { color-scheme: dark; --color-base-100: oklch(20.768% 0.039 265.754); --color-base-200: oklch(19.314% 0.037 265.754); --color-base-300: oklch(17.86% 0.034 265.754); --color-base-content: oklch(84.153% 0.007 265.754); --color-primary: oklch(75.351% 0.138 232.661); --color-primary-content: oklch(15.07% 0.027 232.661); --color-secondary: oklch(68.011% 0.158 276.934); --color-secondary-content: oklch(13.602% 0.031 276.934); --color-accent: oklch(72.36% 0.176 350.048); --color-accent-content: oklch(14.472% 0.035 350.048); --color-neutral: oklch(27.949% 0.036 260.03); --color-neutral-content: oklch(85.589% 0.007 260.03); --color-info: oklch(68.455% 0.148 237.251); --color-info-content: oklch(0% 0 0); --color-success: oklch(78.452% 0.132 181.911); --color-success-content: oklch(15.69% 0.026 181.911); --color-warning: oklch(83.242% 0.139 82.95); --color-warning-content: oklch(16.648% 0.027 82.95); --color-error: oklch(71.785% 0.17 13.118); --color-error-content: oklch(14.357% 0.034 13.118); --radius-selector: 1rem; --radius-field: 0.5rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='winter']:checked), [data-theme='winter'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(97.466% 0.011 259.822); --color-base-300: oklch(93.268% 0.016 262.751); --color-base-content: oklch(41.886% 0.053 255.824); --color-primary: oklch(56.86% 0.255 257.57); --color-primary-content: oklch(91.372% 0.051 257.57); --color-secondary: oklch(42.551% 0.161 282.339); --color-secondary-content: oklch(88.51% 0.032 282.339); --color-accent: oklch(59.939% 0.191 335.171); --color-accent-content: oklch(11.988% 0.038 335.171); --color-neutral: oklch(19.616% 0.063 257.651); --color-neutral-content: oklch(83.923% 0.012 257.651); --color-info: oklch(88.127% 0.085 214.515); --color-info-content: oklch(17.625% 0.017 214.515); --color-success: oklch(80.494% 0.077 197.823); --color-success-content: oklch(16.098% 0.015 197.823); --color-warning: oklch(89.172% 0.045 71.47); --color-warning-content: oklch(17.834% 0.009 71.47); --color-error: oklch(73.092% 0.11 20.076); --color-error-content: oklch(14.618% 0.022 20.076); --radius-selector: 1rem; --radius-field: 0.5rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value='wireframe']:checked), [data-theme='wireframe'] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(97% 0 0); --color-base-300: oklch(94% 0 0); --color-base-content: oklch(20% 0 0); --color-primary: oklch(87% 0 0); --color-primary-content: oklch(26% 0 0); --color-secondary: oklch(87% 0 0); --color-secondary-content: oklch(26% 0 0); --color-accent: oklch(87% 0 0); --color-accent-content: oklch(26% 0 0); --color-neutral: oklch(87% 0 0); --color-neutral-content: oklch(26% 0 0); --color-info: oklch(44% 0.11 240.79); --color-info-content: oklch(90% 0.058 230.902); --color-success: oklch(43% 0.095 166.913); --color-success-content: oklch(90% 0.093 164.15); --color-warning: oklch(47% 0.137 46.201); --color-warning-content: oklch(92% 0.12 95.746); --color-error: oklch(44% 0.177 26.899); --color-error-content: oklch(88% 0.062 18.334); --radius-selector: 0rem; --radius-field: 0.25rem; --radius-box: 0.25rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:not(span) { overflow: var(--page-overflow); } } @layer base { :root, [data-theme] { background: var(--page-scroll-bg, var(--root-bg)); color: var(--color-base-content); } :where(:root, [data-theme]) { --root-bg: var(--color-base-100); } } @layer base { :root { background: var(--page-scroll-bg, var(--root-bg)); --page-scroll-bg-on: linear-gradient( var(--root-bg, #0000), var(--root-bg, #0000) ) var(--root-bg, #0000); @supports (color: color-mix(in lab, red, red)) { --page-scroll-bg-on: linear-gradient( var(--root-bg, #0000), var(--root-bg, #0000) ) color-mix( in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%) ); } --page-scroll-transition-on: background-color 0.3s ease-out; transition: var(--page-scroll-transition); scrollbar-gutter: var(--page-scroll-gutter, unset); scrollbar-gutter: if( style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset ); } @keyframes set-page-has-scroll { 0%, to { --page-has-scroll: 1; } } } @layer base { :root { --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); } } @layer base { :root { scrollbar-color: currentColor #0000; @supports (color: color-mix(in lab, red, red)) { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000; } } } @layer base { @property --radialprogress { syntax: '<percentage>'; inherits: true; initial-value: 0%; } } @keyframes menu { 0% { opacity: 0; } } @keyframes dropdown { 0% { opacity: 0; } } @keyframes skeleton { 0% { background-position: 150%; } 100% { background-position: -50%; } } @keyframes rating { 0%, 40% { scale: 1.1; filter: brightness(1.05) contrast(1.05); } } @keyframes progress { 50% { background-position-x: -115%; } } @keyframes toast { 0% { scale: 0.9; opacity: 0; } 100% { scale: 1; opacity: 1; } } @keyframes rotator { 89.9999%, 100% { --first-item-position: 0 0%; } 90%, 99.9999% { --first-item-position: 0 calc(var(--items) * 100%); } 100% { translate: 0 -100%; } } @keyframes radio { 0% { padding: 5px; } 50% { padding: 3px; } } `;
7
7
 
8
8
  const ProtoDaisyUi = class {
9
9
  constructor(hostRef) {
package/dist/collection/styles/shadow.css CHANGED
@@ -341,7 +341,7 @@
341
341
  z-index: 999;
342
342
  @media (prefers-reduced-motion: no-preference) {
343
343
  animation: dropdown 0.2s;
344
- transition-property: opacity, scale, display;
344
+ transition-property: opacity, scale, display, overlay;
345
345
  transition-behavior: allow-discrete;
346
346
  transition-duration: 0.2s;
347
347
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1826,28 +1826,18 @@
1826
1826
  }
1827
1827
  }
1828
1828
  @layer base {
1829
- :root {
1830
- --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
1831
- }
1832
- }
1833
- @layer base {
1834
- :root {
1835
- scrollbar-color: currentColor #0000;
1836
- @supports (color: color-mix(in lab, red, red)) {
1837
- scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
1838
- }
1829
+ :root:not(span) {
1830
+ overflow: var(--page-overflow);
1839
1831
  }
1840
1832
  }
1841
1833
  @layer base {
1842
- @property --radialprogress {
1843
- syntax: '<percentage>';
1844
- inherits: true;
1845
- initial-value: 0%;
1834
+ :root,
1835
+ [data-theme] {
1836
+ background: var(--page-scroll-bg, var(--root-bg));
1837
+ color: var(--color-base-content);
1846
1838
  }
1847
- }
1848
- @layer base {
1849
- :root:not(span) {
1850
- overflow: var(--page-overflow);
1839
+ :where(:root, [data-theme]) {
1840
+ --root-bg: var(--color-base-100);
1851
1841
  }
1852
1842
  }
1853
1843
  @layer base {
@@ -1885,20 +1875,28 @@
1885
1875
  }
1886
1876
  }
1887
1877
  @layer base {
1888
- :root,
1889
- [data-theme] {
1890
- background: var(--page-scroll-bg, var(--root-bg));
1891
- color: var(--color-base-content);
1878
+ :root {
1879
+ --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
1892
1880
  }
1893
- :where(:root, [data-theme]) {
1894
- --root-bg: var(--color-base-100);
1881
+ }
1882
+ @layer base {
1883
+ :root {
1884
+ scrollbar-color: currentColor #0000;
1885
+ @supports (color: color-mix(in lab, red, red)) {
1886
+ scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
1887
+ }
1895
1888
  }
1896
1889
  }
1897
- @keyframes rating {
1898
- 0%,
1899
- 40% {
1900
- scale: 1.1;
1901
- filter: brightness(1.05) contrast(1.05);
1890
+ @layer base {
1891
+ @property --radialprogress {
1892
+ syntax: '<percentage>';
1893
+ inherits: true;
1894
+ initial-value: 0%;
1895
+ }
1896
+ }
1897
+ @keyframes menu {
1898
+ 0% {
1899
+ opacity: 0;
1902
1900
  }
1903
1901
  }
1904
1902
  @keyframes dropdown {
@@ -1906,12 +1904,24 @@
1906
1904
  opacity: 0;
1907
1905
  }
1908
1906
  }
1909
- @keyframes radio {
1907
+ @keyframes skeleton {
1910
1908
  0% {
1911
- padding: 5px;
1909
+ background-position: 150%;
1910
+ }
1911
+ 100% {
1912
+ background-position: -50%;
1912
1913
  }
1914
+ }
1915
+ @keyframes rating {
1916
+ 0%,
1917
+ 40% {
1918
+ scale: 1.1;
1919
+ filter: brightness(1.05) contrast(1.05);
1920
+ }
1921
+ }
1922
+ @keyframes progress {
1913
1923
  50% {
1914
- padding: 3px;
1924
+ background-position-x: -115%;
1915
1925
  }
1916
1926
  }
1917
1927
  @keyframes toast {
@@ -1937,21 +1947,11 @@
1937
1947
  translate: 0 -100%;
1938
1948
  }
1939
1949
  }
1940
- @keyframes skeleton {
1941
- 0% {
1942
- background-position: 150%;
1943
- }
1944
- 100% {
1945
- background-position: -50%;
1946
- }
1947
- }
1948
- @keyframes menu {
1950
+ @keyframes radio {
1949
1951
  0% {
1950
- opacity: 0;
1952
+ padding: 5px;
1951
1953
  }
1952
- }
1953
- @keyframes progress {
1954
1954
  50% {
1955
- background-position-x: -115%;
1955
+ padding: 3px;
1956
1956
  }
1957
1957
  }