diff --git a/pkg/web/assets/css/styles.css b/pkg/web/assets/css/styles.css index f70a7c6..c0685ae 100644 --- a/pkg/web/assets/css/styles.css +++ b/pkg/web/assets/css/styles.css @@ -7,14 +7,46 @@ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --color-green-100: oklch(96.2% 0.044 156.743); + --color-green-800: oklch(44.8% 0.119 151.328); + --color-teal-700: oklch(51.1% 0.096 186.391); + --color-gray-500: oklch(55.1% 0.027 264.364); + --color-gray-600: oklch(44.6% 0.03 256.802); + --color-gray-800: oklch(27.8% 0.033 256.848); --color-black: #000; + --color-white: #fff; --spacing: 0.25rem; + --container-xs: 20rem; +<<<<<<< HEAD + --container-4xl: 56rem; +======= + --container-lg: 32rem; +>>>>>>> aaf8eac (add some margins to the index page) + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); +<<<<<<< HEAD + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); +======= +>>>>>>> aaf8eac (add some margins to the index page) + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); +<<<<<<< HEAD + --font-weight-semibold: 600; +======= --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); + --font-weight-semibold: 600; + --font-weight-bold: 700; --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); +>>>>>>> aaf8eac (add some margins to the index page) --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); @@ -170,6 +202,311 @@ } } @layer utilities { +<<<<<<< HEAD +======= + .diff { + @layer daisyui.l1.l2.l3 { + position: relative; + display: grid; + width: 100%; + overflow: hidden; + webkit-user-select: none; + user-select: none; + grid-template-rows: 1fr 1.8rem 1fr; + direction: ltr; + container-type: inline-size; + grid-template-columns: auto 1fr; + &:focus-visible, &:has(.diff-item-1:focus-visible) { + outline-style: var(--tw-outline-style); + outline-width: 2px; + outline-offset: 1px; + outline-color: var(--color-base-content); + } + &:focus-visible { + outline-style: var(--tw-outline-style); + outline-width: 2px; + outline-offset: 1px; + outline-color: var(--color-base-content); + .diff-resizer { + min-width: 95cqi; + max-width: 95cqi; + } + } + &:has(.diff-item-1:focus-visible) { + outline-style: var(--tw-outline-style); + outline-width: 2px; + outline-offset: 1px; + .diff-resizer { + min-width: 5cqi; + max-width: 5cqi; + } + } + @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) { + &:focus { + .diff-resizer { + min-width: 5cqi; + max-width: 5cqi; + } + } + &:has(.diff-item-1:focus) { + .diff-resizer { + min-width: 95cqi; + max-width: 95cqi; + } + } + } + } + } + .fab { + @layer daisyui.l1.l2.l3 { + pointer-events: none; + position: fixed; + inset-inline-end: calc(0.25rem * 4); + bottom: calc(0.25rem * 4); + z-index: 999; + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + gap: calc(0.25rem * 2); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + white-space: nowrap; + > * { + pointer-events: auto; + display: flex; + align-items: center; + gap: calc(0.25rem * 2); + &:hover, &:has(:focus-visible) { + z-index: 1; + } + } + > [tabindex] { + &:first-child { + position: relative; + display: grid; + transition-property: opacity, visibility, rotate; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + } + .fab-close { + position: absolute; + inset-inline-end: calc(0.25rem * 0); + bottom: calc(0.25rem * 0); + } + .fab-main-action { + position: absolute; + inset-inline-end: calc(0.25rem * 0); + bottom: calc(0.25rem * 0); + } + &:focus-within { + &:has(.fab-close), &:has(.fab-main-action) { + > [tabindex] { + rotate: 90deg; + opacity: 0%; + } + } + > [tabindex]:first-child { + pointer-events: none; + } + > :nth-child(n + 2) { + visibility: visible; + --tw-scale-x: 100%; + --tw-scale-y: 100%; + --tw-scale-z: 100%; + scale: var(--tw-scale-x) var(--tw-scale-y); + opacity: 100%; + } + } + > :nth-child(n + 2) { + visibility: hidden; + --tw-scale-x: 80%; + --tw-scale-y: 80%; + --tw-scale-z: 80%; + scale: var(--tw-scale-x) var(--tw-scale-y); + opacity: 0%; + transition-property: opacity, scale, visibility; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + &.fab-main-action, &.fab-close { + --tw-scale-x: 100%; + --tw-scale-y: 100%; + --tw-scale-z: 100%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + > :nth-child(3) { + transition-delay: 30ms; + } + > :nth-child(4) { + transition-delay: 60ms; + } + > :nth-child(5) { + transition-delay: 90ms; + } + > :nth-child(6) { + transition-delay: 120ms; + } + } + } +>>>>>>> aaf8eac (add some margins to the index page) + .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%; + } + } + } +<<<<<<< HEAD +======= + .tab { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-flex; + cursor: pointer; + appearance: none; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; + webkit-user-select: none; + user-select: none; + &:hover { + @media (hover: hover) { + color: var(--color-base-content); + } + } + --tab-p: 0.75rem; + --tab-bg: var(--color-base-100); + --tab-border-color: var(--color-base-300); + --tab-radius-ss: 0; + --tab-radius-se: 0; + --tab-radius-es: 0; + --tab-radius-ee: 0; + --tab-order: 0; + --tab-radius-min: calc(0.75rem - var(--border)); + --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min)); + --tab-radius-grad: #0000 calc(69% - var(--border)), + var(--tab-border-color) calc(69% - var(--border) + 0.25px), + var(--tab-border-color) 69%, + var(--tab-bg) calc(69% + 0.25px); + border-color: #0000; + order: var(--tab-order); + height: var(--tab-height); + font-size: 0.875rem; + padding-inline: var(--tab-p); + &:is(input[type="radio"]) { + min-width: fit-content; + &:after { + --tw-content: attr(aria-label); + content: var(--tw-content); + } + } + &:is(label) { + position: relative; + input { + position: absolute; + inset: calc(0.25rem * 0); + cursor: pointer; + appearance: none; + opacity: 0%; + } + } + &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { + & + .tab-content { + display: block; + } + } + &:not( :checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"] ) { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); + } + } + &:not(input):empty { + flex-grow: 1; + cursor: default; + } + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus-visible, &:is(label:has(:checked:focus-visible)) { + outline: 2px solid currentColor; + outline-offset: -5px; + } + &[disabled] { + pointer-events: none; + opacity: 40%; + } + } + } +>>>>>>> aaf8eac (add some margins to the index page) .menu { @layer daisyui.l1.l2.l3 { display: flex; @@ -347,143 +684,15 @@ } } } - .collapse-arrow { - @layer daisyui.l1.l2 { - > .collapse-title:after { - position: absolute; - display: block; - height: 0.5rem; - width: 0.5rem; - transform: translateY(-100%) rotate(45deg); - @media (prefers-reduced-motion: no-preference) { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 0.2s; - } - top: 50%; - inset-inline-end: 1.4rem; - content: ""; - transform-origin: 75% 75%; - box-shadow: 2px 2px; - pointer-events: none; - } - } - } - .collapse-plus { - @layer daisyui.l1.l2 { - > .collapse-title:after { - position: absolute; - display: block; - height: 0.5rem; - width: 0.5rem; - @media (prefers-reduced-motion: no-preference) { - transition-property: all; - transition-duration: 300ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - } - top: 0.9rem; - inset-inline-end: 1.4rem; - --tw-content: "+"; - content: var(--tw-content); - pointer-events: 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; @@ -610,6 +819,20 @@ } } } + .loading { + @layer daisyui.l1.l2.l3 { + pointer-events: none; + display: inline-block; + aspect-ratio: 1 / 1; + background-color: currentcolor; + vertical-align: middle; + width: calc(var(--size-selector, 0.25rem) * 6); + mask-size: 100%; + mask-repeat: no-repeat; + mask-position: center; + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); + } + } .collapse { &:not(td, tr, colgroup) { visibility: revert-layer; @@ -755,24 +978,45 @@ } } } - .collapse-content { + .validator-hint { @layer daisyui.l1.l2.l3 { - grid-column-start: 1; - grid-row-start: 1; + visibility: hidden; + margin-top: calc(0.25rem * 2); + font-size: 0.75rem; } + } +<<<<<<< HEAD +======= + .validator-hint { @layer daisyui.l1.l2.l3 { - content-visibility: hidden; - grid-column-start: 1; - grid-row-start: 2; - min-height: 0; - padding-left: 1rem; - padding-right: 1rem; - cursor: unset; - @supports not (content-visibility: hidden) { - visibility: hidden; + visibility: hidden; + margin-top: calc(0.25rem * 2); + font-size: 0.75rem; + } + } +>>>>>>> aaf8eac (add some margins to the index page) + .validator { + @layer daisyui.l1.l2.l3 { + &:user-valid, &:has(:user-valid) { + &, &:focus, &:checked, &[aria-checked="true"], &:focus-within { + --input-color: var(--color-success); +<<<<<<< HEAD +======= + } } - @media (prefers-reduced-motion: no-preference) { - transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out; + &:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid="false"]), &:has([aria-invalid]:not([aria-invalid="false"])) { + &, &:focus, &:checked, &[aria-checked="true"], &:focus-within { + --input-color: var(--color-error); + } + & ~ .validator-hint { + visibility: visible; + color: var(--color-error); + } + } + } + &:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid="false"]), &:has([aria-invalid]:not([aria-invalid="false"])) { + & ~ .validator-hint { + display: revert-layer; } } } @@ -785,8 +1029,23 @@ padding-bottom: 1rem; @supports not (content-visibility: visible) { visibility: visible; +>>>>>>> aaf8eac (add some margins to the index page) } } + &:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid="false"]), &:has([aria-invalid]:not([aria-invalid="false"])) { + &, &:focus, &:checked, &[aria-checked="true"], &:focus-within { + --input-color: var(--color-error); + } + & ~ .validator-hint { + visibility: visible; + color: var(--color-error); + } + } + } + &:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid="false"]), &:has([aria-invalid]:not([aria-invalid="false"])) { + & ~ .validator-hint { + display: revert-layer; + } } } .collapse { @@ -795,6 +1054,67 @@ .visible { visibility: visible; } +<<<<<<< HEAD +======= + .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; + } + } + } + } .toast { @layer daisyui.l1.l2.l3 { position: fixed; @@ -816,6 +1136,7 @@ } } } +>>>>>>> aaf8eac (add some margins to the index page) .input { @layer daisyui.l1.l2.l3 { cursor: text; @@ -938,6 +1259,23 @@ } } } + .indicator { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-flex; + width: max-content; + :where(.indicator-item) { + z-index: 1; + position: absolute; + white-space: nowrap; + top: var(--indicator-t, 0); + bottom: var(--indicator-b, auto); + left: var(--indicator-s, auto); + right: var(--indicator-e, 0); + translate: var(--indicator-x, 50%) var(--indicator-y, -50%); + } + } + } .table { @layer daisyui.l1.l2.l3 { font-size: 0.875rem; @@ -1102,6 +1440,27 @@ } } } + .diff-resizer { + @layer daisyui.l1.l2.l3 { + position: relative; + isolation: isolate; + z-index: 2; + grid-column-start: 1; + grid-row-start: 2; + height: calc(0.25rem * 3); + width: 50cqi; + max-width: calc(100cqi - 1rem); + min-width: 1rem; + resize: horizontal; + overflow: hidden; + opacity: 0%; + transform: scaleY(5) translate(0.32rem, 50%); + cursor: ew-resize; + transform-origin: 100% 100%; + clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem)); + transition: min-width 0.3s ease-out, max-width 0.3s ease-out; + } + } .select { @layer daisyui.l1.l2.l3 { border: var(--border) solid #0000; @@ -1307,20 +1666,6 @@ } } } - .collapse-title { - @layer daisyui.l1.l2.l3 { - grid-column-start: 1; - grid-row-start: 1; - } - @layer daisyui.l1.l2.l3 { - position: relative; - width: 100%; - padding: 1rem; - padding-inline-end: 3rem; - min-height: 1lh; - transition: background-color 0.2s ease-out; - } - } .checkbox { @layer daisyui.l1.l2.l3 { border: var(--border) solid var(--input-color, var(--color-base-content)); @@ -1471,72 +1816,27 @@ } } } - .rating { + .navbar { @layer daisyui.l1.l2.l3 { - position: relative; - display: inline-flex; - vertical-align: middle; - & input { - border: none; - appearance: none; - } - :where(*) { - height: calc(0.25rem * 6); - width: calc(0.25rem * 6); - border-radius: 0; - background-color: var(--color-base-content); - opacity: 20%; - @media (prefers-reduced-motion: no-preference) { - animation: rating 0.25s ease-out; - } - &:is(input) { - cursor: pointer; - } - } - & .rating-hidden { - width: calc(0.25rem * 2); - background-color: transparent; - } - input[type="radio"]:checked { - background-image: none; - } - * { - &:checked, &[aria-checked="true"], &[aria-current="true"], &:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) { - opacity: 100%; - } - &:focus-visible { - scale: 1.1; - @media (prefers-reduced-motion: no-preference) { - transition: scale 0.2s ease-out; - } - } - } - & *:active:focus { - animation: none; - scale: 1.1; + display: flex; + width: 100%; + align-items: center; + padding: 0.5rem; + min-height: 4rem; + } + :where(&) { + @layer daisyui.l1.l2 { + position: relative; } } - @layer daisyui.l1.l2 { - &.rating-xs :where(*:not(.rating-hidden)) { - width: calc(0.25rem * 4); - height: calc(0.25rem * 4); - } - &.rating-sm :where(*:not(.rating-hidden)) { - width: calc(0.25rem * 5); - height: calc(0.25rem * 5); - } - &.rating-md :where(*:not(.rating-hidden)) { - width: calc(0.25rem * 6); - height: calc(0.25rem * 6); - } - &.rating-lg :where(*:not(.rating-hidden)) { - width: calc(0.25rem * 7); - height: calc(0.25rem * 7); - } - &.rating-xl :where(*:not(.rating-hidden)) { - width: calc(0.25rem * 8); - height: calc(0.25rem * 8); - } + } + .stats { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-grid; + grid-auto-flow: column; + overflow-x: auto; + border-radius: var(--radius-box); } } .progress { @@ -1589,8 +1889,116 @@ } } } +<<<<<<< HEAD + .sticky { + position: sticky; + } + .tooltip-top { + @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%; + } + } + } + .top-0 { + top: calc(var(--spacing) * 0); +======= + .absolute { + position: absolute; + } + .relative { + position: relative; + } .static { position: static; +>>>>>>> aaf8eac (add some margins to the index page) + } + .tooltip-top { + @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%; + } + } + } + .join { + display: inline-flex; + align-items: stretch; + --join-ss: 0; + --join-se: 0; + --join-es: 0; + --join-ee: 0; + :where(.join-item) { + border-start-start-radius: var(--join-ss, 0); + border-start-end-radius: var(--join-se, 0); + border-end-start-radius: var(--join-es, 0); + border-end-end-radius: var(--join-ee, 0); + * { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + } + > .join-item:where(:first-child) { + --join-ss: var(--radius-field); + --join-se: 0; + --join-es: var(--radius-field); + --join-ee: 0; + } + :first-child:not(:last-child) { + :where(.join-item) { + --join-ss: var(--radius-field); + --join-se: 0; + --join-es: var(--radius-field); + --join-ee: 0; + } + } + > .join-item:where(:last-child) { + --join-ss: 0; + --join-se: var(--radius-field); + --join-es: 0; + --join-ee: var(--radius-field); + } + :last-child:not(:first-child) { + :where(.join-item) { + --join-ss: 0; + --join-se: var(--radius-field); + --join-es: 0; + --join-ee: var(--radius-field); + } + } + > .join-item:where(:only-child) { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + :only-child { + :where(.join-item) { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + } + > :where(:focus, :has(:focus)) { + z-index: 1; + } + @media (hover: hover) { + > :where(.btn:hover, :has(.btn:hover)) { + isolation: isolate; + } + } } .textarea { @layer daisyui.l1.l2.l3 { @@ -1667,6 +2075,126 @@ } } } +<<<<<<< HEAD + .z-10 { + z-index: 10; + } + .mx-auto { + margin-inline: auto; + } + .input-lg { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 12); + font-size: max(var(--font-size, 1.125rem), 1.125rem); + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * -3); +======= + .stack { + @layer daisyui.l1.l2.l3 { + display: inline-grid; + grid-template-columns: 3px 4px 1fr 4px 3px; + grid-template-rows: 3px 4px 1fr 4px 3px; + & > * { + height: 100%; + width: 100%; + &:nth-child(n + 2) { + width: 100%; + opacity: 70%; + } + &:nth-child(2) { + z-index: 2; + opacity: 90%; + } + &:nth-child(1) { + z-index: 3; + width: 100%; + } + } + } + @layer daisyui.l1.l2 { + &, &.stack-bottom { + > * { + grid-column: 3 / 4; + grid-row: 3 / 6; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 6; + grid-row: 1 / 4; + } + } + } + &.stack-top { + > * { + grid-column: 3 / 4; + grid-row: 1 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 6; + grid-row: 3 / 6; + } + } + } + &.stack-start { + > * { + grid-column: 1 / 4; + grid-row: 3 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 3 / 6; + grid-row: 1 / 6; + } + } + } + &.stack-end { + > * { + grid-column: 3 / 6; + grid-row: 3 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 4; + grid-row: 1 / 6; + } + } + } + } + } + .tab-content { + @layer daisyui.l1.l2.l3 { + order: var(--tabcontent-order); + display: none; + border-color: transparent; + --tabcontent-radius-ss: var(--radius-box); + --tabcontent-radius-se: var(--radius-box); + --tabcontent-radius-es: var(--radius-box); + --tabcontent-radius-ee: var(--radius-box); + --tabcontent-order: 1; + width: 100%; + height: calc(100% - var(--tab-height) + var(--border)); + margin: var(--tabcontent-margin); + border-width: var(--border); + border-start-start-radius: var(--tabcontent-radius-ss); + border-start-end-radius: var(--tabcontent-radius-se); + border-end-start-radius: var(--tabcontent-radius-es); + border-end-end-radius: var(--tabcontent-radius-ee); + } + } + .m-5 { + margin: calc(var(--spacing) * 5); + } .filter { @layer daisyui.l1.l2.l3 { display: flex; @@ -1708,10 +2236,144 @@ width: calc(0.25rem * 0); padding-inline: calc(0.25rem * 0); opacity: 0%; +>>>>>>> aaf8eac (add some margins to the index page) } } } } +<<<<<<< HEAD + .input-md { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 10); + font-size: max(var(--font-size, 0.875rem), 0.875rem); +======= + .mx-auto { + margin-inline: auto; + } + .input-lg { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 12); + font-size: max(var(--font-size, 1.125rem), 1.125rem); +>>>>>>> aaf8eac (add some margins to the index page) + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * -3); + } + } + } + } + .input-sm { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 8); + font-size: max(var(--font-size, 0.75rem), 0.75rem); + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -2); + margin-inline-end: calc(0.25rem * -3); + } + } + } + } + .input-xl { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 14); + font-size: max(var(--font-size, 1.375rem), 1.375rem); + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -4); + margin-inline-end: calc(0.25rem * -3); + } + } + } + } + .input-xs { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 6); + font-size: max(var(--font-size, 0.6875rem), 0.6875rem); + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -1); + margin-inline-end: calc(0.25rem * -3); + } + } + } + } + .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); + } + } + } + } + } +<<<<<<< HEAD + .mt-0\! { + margin-top: calc(var(--spacing) * 0) !important; + } +======= + .mt-0 { + margin-top: calc(var(--spacing) * 0); + } + .mt-0\! { + margin-top: calc(var(--spacing) * 0) !important; + } + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } +>>>>>>> aaf8eac (add some margins to the index page) + .mt-4 { + margin-top: calc(var(--spacing) * 4); + } + .fieldset-legend { + @layer daisyui.l1.l2.l3 { + margin-bottom: calc(0.25rem * -1); + display: flex; + align-items: center; + justify-content: space-between; + gap: calc(0.25rem * 2); + padding-block: calc(0.25rem * 2); + color: var(--color-base-content); + font-weight: 600; + } + } + .mb-4 { + margin-bottom: calc(var(--spacing) * 4); + } + .mb-12 { + margin-bottom: calc(var(--spacing) * 12); + } .status { @layer daisyui.l1.l2.l3 { display: inline-block; @@ -1737,26 +2399,148 @@ } } } - .badge { + .navbar-end { + @layer daisyui.l1.l2.l3 { + display: inline-flex; + align-items: center; + width: 50%; + justify-content: flex-end; + } + } + .navbar-start { + @layer daisyui.l1.l2.l3 { + display: inline-flex; + align-items: center; + width: 50%; + justify-content: flex-start; + } + } + .navbar-center { + @layer daisyui.l1.l2.l3 { + display: inline-flex; + align-items: center; + flex-shrink: 0; + } + } + .fieldset-label { + @layer daisyui.l1.l2.l3 { + display: flex; + align-items: center; + gap: calc(0.25rem * 1.5); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + &:has(input) { + cursor: pointer; + } + } + } + .fieldset { + @layer daisyui.l1.l2.l3 { + display: grid; + gap: calc(0.25rem * 1.5); + padding-block: calc(0.25rem * 1); + font-size: 0.75rem; + grid-template-columns: 1fr; + grid-auto-rows: max-content; + } + } + .kbd { + box-shadow: none; @layer daisyui.l1.l2.l3 { display: inline-flex; align-items: center; justify-content: center; - gap: calc(0.25rem * 2); - border-radius: var(--radius-selector); + border-radius: var(--radius-field); + background-color: var(--color-base-200); vertical-align: middle; - color: var(--badge-fg); - border: var(--border) solid var(--badge-color, var(--color-base-200)); + padding-inline: 0.5em; + border: var(--border) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); + } + border-bottom: calc(var(--border) + 1px) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); + } + --size: calc(var(--size-selector, 0.25rem) * 6); font-size: 0.875rem; - width: fit-content; + height: var(--size); + min-width: var(--size); + } + } + .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; + } + } + } + .fieldset-label { + @layer daisyui.l1.l2.l3 { + display: flex; + align-items: center; + gap: calc(0.25rem * 1.5); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + &:has(input) { + cursor: pointer; + } + } + } + .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); - 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)); + 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); + } + } + } + .fieldset { + @layer daisyui.l1.l2.l3 { + display: grid; + gap: calc(0.25rem * 1.5); + padding-block: calc(0.25rem * 1); + font-size: 0.75rem; + grid-template-columns: 1fr; + grid-auto-rows: max-content; } } .mask { @@ -1768,37 +2552,96 @@ mask-position: center; } } +<<<<<<< HEAD +======= + .block { + display: block; + } +>>>>>>> aaf8eac (add some margins to the index page) + .flex { + display: flex; + } + .hidden { + display: none; + } .inline { display: inline; } .table { display: table; } +<<<<<<< HEAD + .btn-square { + @layer daisyui.l1.l2 { + padding-inline: calc(0.25rem * 0); + width: var(--size); + height: var(--size); + } + } + .h-6 { + height: calc(var(--spacing) * 6); + } + .min-h-12 { + min-height: calc(var(--spacing) * 12); + } + .min-h-\[calc\(100vh-4rem\)\] { + min-height: calc(100vh - 4rem); + } + .min-h-screen { + min-height: 100vh; + } + .w-full { + width: 100%; + } + .max-w-4xl { + max-width: var(--container-4xl); + } + .max-w-7 { + max-width: calc(var(--spacing) * 7); + } + .max-w-xs { + max-width: var(--container-xs); + } + .min-w-\[32rem\] { + min-width: 32rem; + } + .flex-1 { + flex: 1; +======= + .h-6 { + height: calc(var(--spacing) * 6); + } + .w-full { + width: 100%; + } + .max-w-7 { + max-width: calc(var(--spacing) * 7); + } + .max-w-lg { + max-width: var(--container-lg); + } + .max-w-xs { + max-width: var(--container-xs); + } + .flex-1 { + flex: 1; + } .flex-shrink { flex-shrink: 1; } + .flex-grow { + flex-grow: 1; + } + .grow { + flex-grow: 1; + } .border-collapse { border-collapse: collapse; +>>>>>>> aaf8eac (add some margins to the index page) } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .skeleton { - @layer daisyui.l1.l2.l3 { - border-radius: var(--radius-box); - background-color: var(--color-base-300); - @media (prefers-reduced-motion: reduce) { - transition-duration: 15s; - } - will-change: background-position; - background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100% ); - background-size: 200% auto; - background-position-x: -50%; - @media (prefers-reduced-motion: no-preference) { - animation: skeleton 1.8s ease-in-out infinite; - } - } - } .link { @layer daisyui.l1.l2.l3 { cursor: pointer; @@ -1820,45 +2663,438 @@ .resize { resize: both; } + .flex-col { + flex-direction: column; + } +<<<<<<< HEAD + .items-center { + align-items: center; + } + .justify-center { + justify-content: center; + } + .gap-4 { + gap: calc(var(--spacing) * 4); + } + .gap-6 { + gap: calc(var(--spacing) * 6); + } + .space-y-1 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-x-1 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); + } + } + .overflow-x-auto { + overflow-x: auto; +======= .flex-wrap { flex-wrap: wrap; +>>>>>>> aaf8eac (add some margins to the index page) + } + .items-center { + align-items: center; + } + .items-start { + align-items: flex-start; + } + .justify-between { + justify-content: space-between; + } + .justify-center { + justify-content: center; + } + .gap-2 { + gap: calc(var(--spacing) * 2); + } + .gap-6 { + gap: calc(var(--spacing) * 6); + } + .space-y-1 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-2 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-x-1 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); + } + } + .truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .overflow-x-auto { + overflow-x: auto; + } + .rounded { + border-radius: 0.25rem; } .border { border-style: var(--tw-border-style); border-width: 1px; } +<<<<<<< HEAD + .border-none { + --tw-border-style: none; + border-style: none; + } + .border-base-content\/20 { + border-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + .bg-base-100 { + background-color: var(--color-base-100); + } + .bg-base-200 { + background-color: var(--color-base-200); + } + .bg-primary { + background-color: var(--color-primary); + } + .p-0\! { + padding: calc(var(--spacing) * 0) !important; + } + .p-4 { + padding: calc(var(--spacing) * 4); + } + .select-lg { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 12); + font-size: 1.125rem; + option { + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 1.5); + } + } + } + .select-sm { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 8); + font-size: 0.75rem; + option { + padding-inline: calc(0.25rem * 2.5); + padding-block: calc(0.25rem * 1); + } + } + } + .select-xl { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 14); + font-size: 1.375rem; + option { + padding-inline: calc(0.25rem * 5); + padding-block: calc(0.25rem * 1.5); + } + } + } + .select-xs { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 6); + font-size: 0.6875rem; + option { + padding-inline: calc(0.25rem * 2); + padding-block: calc(0.25rem * 1); + } + } + } + .px-2 { + padding-inline: calc(var(--spacing) * 2); + } + .px-4 { + padding-inline: calc(var(--spacing) * 4); + } + .px-6 { + padding-inline: calc(var(--spacing) * 6); + } + .py-2 { + padding-block: calc(var(--spacing) * 2); + } + .text-base { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + } + .text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + .text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } + .textarea-lg { + @layer daisyui.l1.l2 { + font-size: max(var(--font-size, 1.125rem), 1.125rem); + } + } + .textarea-sm { + @layer daisyui.l1.l2 { + font-size: max(var(--font-size, 0.75rem), 0.75rem); + } + } + .textarea-xl { + @layer daisyui.l1.l2 { + font-size: max(var(--font-size, 1.375rem), 1.375rem); + } + } + .textarea-xs { + @layer daisyui.l1.l2 { + font-size: max(var(--font-size, 0.6875rem), 0.6875rem); + } + } + .font-semibold { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } + .whitespace-nowrap { + white-space: nowrap; + } + .text-base-content { + color: var(--color-base-content); + } + .text-error { + color: var(--color-error); + } + .text-primary { + color: var(--color-primary); + } + .text-primary-content { + color: var(--color-primary-content); + } + .shadow-sm { + --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); + } + .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; + } + } + } +======= + .bg-green-100 { + background-color: var(--color-green-100); + } + .bg-white { + background-color: var(--color-white); + } .mask-repeat { mask-repeat: repeat; } + .p-0 { + padding: calc(var(--spacing) * 0); + } + .p-0\! { + padding: calc(var(--spacing) * 0) !important; + } + .p-4 { + padding: calc(var(--spacing) * 4); + } + .select-lg { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 12); + font-size: 1.125rem; + option { + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 1.5); + } + } + } + .select-sm { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 8); + font-size: 0.75rem; + option { + padding-inline: calc(0.25rem * 2.5); + padding-block: calc(0.25rem * 1); + } + } + } + .select-xl { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 14); + font-size: 1.375rem; + option { + padding-inline: calc(0.25rem * 5); + padding-block: calc(0.25rem * 1.5); + } + } + } + .select-xs { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 6); + font-size: 0.6875rem; + option { + padding-inline: calc(0.25rem * 2); + padding-block: calc(0.25rem * 1); + } + } + } + .px-4 { + padding-inline: calc(var(--spacing) * 4); + } + .py-1 { + padding-block: calc(var(--spacing) * 1); + } + .py-2 { + padding-block: calc(var(--spacing) * 2); + } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } + .text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + .text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } + .textarea-lg { + @layer daisyui.l1.l2 { + font-size: max(var(--font-size, 1.125rem), 1.125rem); + } + } + .textarea-sm { + @layer daisyui.l1.l2 { + font-size: max(var(--font-size, 0.75rem), 0.75rem); + } + } + .textarea-xl { + @layer daisyui.l1.l2 { + font-size: max(var(--font-size, 1.375rem), 1.375rem); + } + } + .textarea-xs { + @layer daisyui.l1.l2 { + font-size: max(var(--font-size, 0.6875rem), 0.6875rem); + } + } + .font-semibold { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } .text-wrap { text-wrap: wrap; } + .alert-error { + @layer daisyui.l1.l2 { + color: var(--color-error-content); + --alert-border-color: var(--color-error); + --alert-color: var(--color-error); + } + } + .alert-success { + @layer daisyui.l1.l2 { + color: var(--color-success-content); + --alert-border-color: var(--color-success); + --alert-color: var(--color-success); + } + } + .text-error { + color: var(--color-error); + } + .text-gray-500 { + color: var(--color-gray-500); + } + .text-gray-600 { + color: var(--color-gray-600); + } + .text-gray-800 { + color: var(--color-gray-800); + } + .text-green-800 { + color: var(--color-green-800); + } + .text-primary { + color: var(--color-primary); + } .underline { text-decoration-line: underline; } + .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); + } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } + .invert { + --tw-invert: invert(100%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); +>>>>>>> aaf8eac (add some margins to the index page) } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } - .ease-in-out { - --tw-ease: var(--ease-in-out); - transition-timing-function: var(--ease-in-out); - } - .ease-out { - --tw-ease: var(--ease-out); - transition-timing-function: var(--ease-out); + .btn-sm { + @layer daisyui.l1.l2 { + --fontsize: 0.75rem; + --btn-p: 0.75rem; + --size: calc(var(--size-field, 0.25rem) * 8); + } } .btn-primary { @layer daisyui.l1.l2.l3 { @@ -1866,6 +3102,58 @@ --btn-fg: var(--color-primary-content); } } + .range-lg { + @layer daisyui.l1.l2 { + --range-thumb-size: calc(var(--size-selector, 0.25rem) * 7); + } + } + .range-sm { + @layer daisyui.l1.l2 { + --range-thumb-size: calc(var(--size-selector, 0.25rem) * 5); + } + } + .range-xl { + @layer daisyui.l1.l2 { + --range-thumb-size: calc(var(--size-selector, 0.25rem) * 8); + } + } + .range-xs { + @layer daisyui.l1.l2 { + --range-thumb-size: calc(var(--size-selector, 0.25rem) * 4); + } + } + .textarea-error { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-error); + } + } + } +<<<<<<< HEAD + .hover\:bg-primary-content\/20 { + &:hover { + @media (hover: hover) { + background-color: var(--color-primary-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-primary-content) 20%, transparent); + } + } + } + } + .hover\:opacity-90 { + &:hover { + @media (hover: hover) { + opacity: 90%; +======= + .hover\:shadow { + &:hover { + @media (hover: hover) { + --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); +>>>>>>> aaf8eac (add some margins to the index page) + } + } + } } @layer base { :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] { @@ -2234,73 +3522,167 @@ syntax: "*"; inherits: false; } +@property --tw-space-y-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-space-x-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } +@property --tw-font-weight { +<<<<<<< HEAD +======= + syntax: "*"; + inherits: false; +} +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { +>>>>>>> aaf8eac (add some margins to the index page) syntax: "*"; inherits: false; } -@property --tw-brightness { +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { syntax: "*"; inherits: false; } -@property --tw-contrast { - syntax: "*"; - inherits: false; -} -@property --tw-grayscale { - syntax: "*"; - inherits: false; -} -@property --tw-hue-rotate { - syntax: "*"; - inherits: false; -} -@property --tw-invert { - syntax: "*"; - inherits: false; -} -@property --tw-opacity { - syntax: "*"; - inherits: false; -} -@property --tw-saturate { - syntax: "*"; - inherits: false; -} -@property --tw-sepia { - syntax: "*"; - inherits: false; -} -@property --tw-drop-shadow { - syntax: "*"; - inherits: false; -} -@property --tw-drop-shadow-color { - syntax: "*"; - inherits: false; -} -@property --tw-drop-shadow-alpha { +@property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } -@property --tw-drop-shadow-size { +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { syntax: "*"; inherits: false; } -@property --tw-ease { +@property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { syntax: "*"; inherits: false; } +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { @@ -2309,7 +3691,26 @@ --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; + --tw-space-y-reverse: 0; + --tw-space-x-reverse: 0; --tw-border-style: solid; + --tw-font-weight: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; +<<<<<<< HEAD +======= --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; @@ -2325,6 +3726,7 @@ --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-ease: initial; +>>>>>>> aaf8eac (add some margins to the index page) } } } diff --git a/pkg/web/components/base/input.templ b/pkg/web/components/base/input.templ index 87c5049..f23657e 100644 --- a/pkg/web/components/base/input.templ +++ b/pkg/web/components/base/input.templ @@ -6,6 +6,7 @@ type InputProps struct { Label string Type string // defaults to "text" Value string + Class string Placeholder string Description string Error string @@ -37,7 +38,7 @@ templ Input(props InputProps) {