From c52c4d18a18b3e3d1f9bd3db577d5de13f2f70fb Mon Sep 17 00:00:00 2001 From: Per Stark Date: Thu, 20 Mar 2025 21:31:00 +0100 Subject: [PATCH] fix: chat drawer height --- .gitignore | 1 + assets/style.css | 5097 ------------------------------------ templates/chat/drawer.html | 2 +- 3 files changed, 2 insertions(+), 5098 deletions(-) delete mode 100644 assets/style.css diff --git a/.gitignore b/.gitignore index aab5642..7e88e5f 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,4 @@ devenv.local.nix # pre-commit .pre-commit-config.yaml +assets/style.css diff --git a/assets/style.css b/assets/style.css deleted file mode 100644 index ac6bf8e..0000000 --- a/assets/style.css +++ /dev/null @@ -1,5097 +0,0 @@ -/*! tailwindcss v4.0.0-beta.9 | MIT License | https://tailwindcss.com */ -@layer theme, base, components, utilities; -@layer theme { - :root { - --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - "Liberation Mono", "Courier New", monospace; - --color-red-50: oklch(0.971 0.013 17.38); - --color-red-100: oklch(0.936 0.032 17.717); - --color-red-200: oklch(0.885 0.062 18.334); - --color-red-300: oklch(0.808 0.114 19.571); - --color-red-400: oklch(0.704 0.191 22.216); - --color-red-500: oklch(0.637 0.237 25.331); - --color-red-600: oklch(0.577 0.245 27.325); - --color-red-700: oklch(0.505 0.213 27.518); - --color-red-800: oklch(0.444 0.177 26.899); - --color-red-900: oklch(0.396 0.141 25.723); - --color-red-950: oklch(0.258 0.092 26.042); - --color-orange-50: oklch(0.98 0.016 73.684); - --color-orange-100: oklch(0.954 0.038 75.164); - --color-orange-200: oklch(0.901 0.076 70.697); - --color-orange-300: oklch(0.837 0.128 66.29); - --color-orange-400: oklch(0.75 0.183 55.934); - --color-orange-500: oklch(0.705 0.213 47.604); - --color-orange-600: oklch(0.646 0.222 41.116); - --color-orange-700: oklch(0.553 0.195 38.402); - --color-orange-800: oklch(0.47 0.157 37.304); - --color-orange-900: oklch(0.408 0.123 38.172); - --color-orange-950: oklch(0.266 0.079 36.259); - --color-amber-50: oklch(0.987 0.022 95.277); - --color-amber-100: oklch(0.962 0.059 95.617); - --color-amber-200: oklch(0.924 0.12 95.746); - --color-amber-300: oklch(0.879 0.169 91.605); - --color-amber-400: oklch(0.828 0.189 84.429); - --color-amber-500: oklch(0.769 0.188 70.08); - --color-amber-600: oklch(0.666 0.179 58.318); - --color-amber-700: oklch(0.555 0.163 48.998); - --color-amber-800: oklch(0.473 0.137 46.201); - --color-amber-900: oklch(0.414 0.112 45.904); - --color-amber-950: oklch(0.279 0.077 45.635); - --color-yellow-50: oklch(0.987 0.026 102.212); - --color-yellow-100: oklch(0.973 0.071 103.193); - --color-yellow-200: oklch(0.945 0.129 101.54); - --color-yellow-300: oklch(0.905 0.182 98.111); - --color-yellow-400: oklch(0.852 0.199 91.936); - --color-yellow-500: oklch(0.795 0.184 86.047); - --color-yellow-600: oklch(0.681 0.162 75.834); - --color-yellow-700: oklch(0.554 0.135 66.442); - --color-yellow-800: oklch(0.476 0.114 61.907); - --color-yellow-900: oklch(0.421 0.095 57.708); - --color-yellow-950: oklch(0.286 0.066 53.813); - --color-lime-50: oklch(0.986 0.031 120.757); - --color-lime-100: oklch(0.967 0.067 122.328); - --color-lime-200: oklch(0.938 0.127 124.321); - --color-lime-300: oklch(0.897 0.196 126.665); - --color-lime-400: oklch(0.841 0.238 128.85); - --color-lime-500: oklch(0.768 0.233 130.85); - --color-lime-600: oklch(0.648 0.2 131.684); - --color-lime-700: oklch(0.532 0.157 131.589); - --color-lime-800: oklch(0.453 0.124 130.933); - --color-lime-900: oklch(0.405 0.101 131.063); - --color-lime-950: oklch(0.274 0.072 132.109); - --color-green-50: oklch(0.982 0.018 155.826); - --color-green-100: oklch(0.962 0.044 156.743); - --color-green-200: oklch(0.925 0.084 155.995); - --color-green-300: oklch(0.871 0.15 154.449); - --color-green-400: oklch(0.792 0.209 151.711); - --color-green-500: oklch(0.723 0.219 149.579); - --color-green-600: oklch(0.627 0.194 149.214); - --color-green-700: oklch(0.527 0.154 150.069); - --color-green-800: oklch(0.448 0.119 151.328); - --color-green-900: oklch(0.393 0.095 152.535); - --color-green-950: oklch(0.266 0.065 152.934); - --color-emerald-50: oklch(0.979 0.021 166.113); - --color-emerald-100: oklch(0.95 0.052 163.051); - --color-emerald-200: oklch(0.905 0.093 164.15); - --color-emerald-300: oklch(0.845 0.143 164.978); - --color-emerald-400: oklch(0.765 0.177 163.223); - --color-emerald-500: oklch(0.696 0.17 162.48); - --color-emerald-600: oklch(0.596 0.145 163.225); - --color-emerald-700: oklch(0.508 0.118 165.612); - --color-emerald-800: oklch(0.432 0.095 166.913); - --color-emerald-900: oklch(0.378 0.077 168.94); - --color-emerald-950: oklch(0.262 0.051 172.552); - --color-teal-50: oklch(0.984 0.014 180.72); - --color-teal-100: oklch(0.953 0.051 180.801); - --color-teal-200: oklch(0.91 0.096 180.426); - --color-teal-300: oklch(0.855 0.138 181.071); - --color-teal-400: oklch(0.777 0.152 181.912); - --color-teal-500: oklch(0.704 0.14 182.503); - --color-teal-600: oklch(0.6 0.118 184.704); - --color-teal-700: oklch(0.511 0.096 186.391); - --color-teal-800: oklch(0.437 0.078 188.216); - --color-teal-900: oklch(0.386 0.063 188.416); - --color-teal-950: oklch(0.277 0.046 192.524); - --color-cyan-50: oklch(0.984 0.019 200.873); - --color-cyan-100: oklch(0.956 0.045 203.388); - --color-cyan-200: oklch(0.917 0.08 205.041); - --color-cyan-300: oklch(0.865 0.127 207.078); - --color-cyan-400: oklch(0.789 0.154 211.53); - --color-cyan-500: oklch(0.715 0.143 215.221); - --color-cyan-600: oklch(0.609 0.126 221.723); - --color-cyan-700: oklch(0.52 0.105 223.128); - --color-cyan-800: oklch(0.45 0.085 224.283); - --color-cyan-900: oklch(0.398 0.07 227.392); - --color-cyan-950: oklch(0.302 0.056 229.695); - --color-sky-50: oklch(0.977 0.013 236.62); - --color-sky-100: oklch(0.951 0.026 236.824); - --color-sky-200: oklch(0.901 0.058 230.902); - --color-sky-300: oklch(0.828 0.111 230.318); - --color-sky-400: oklch(0.746 0.16 232.661); - --color-sky-500: oklch(0.685 0.169 237.323); - --color-sky-600: oklch(0.588 0.158 241.966); - --color-sky-700: oklch(0.5 0.134 242.749); - --color-sky-800: oklch(0.443 0.11 240.79); - --color-sky-900: oklch(0.391 0.09 240.876); - --color-sky-950: oklch(0.293 0.066 243.157); - --color-blue-50: oklch(0.97 0.014 254.604); - --color-blue-100: oklch(0.932 0.032 255.585); - --color-blue-200: oklch(0.882 0.059 254.128); - --color-blue-300: oklch(0.809 0.105 251.813); - --color-blue-400: oklch(0.707 0.165 254.624); - --color-blue-500: oklch(0.623 0.214 259.815); - --color-blue-600: oklch(0.546 0.245 262.881); - --color-blue-700: oklch(0.488 0.243 264.376); - --color-blue-800: oklch(0.424 0.199 265.638); - --color-blue-900: oklch(0.379 0.146 265.522); - --color-blue-950: oklch(0.282 0.091 267.935); - --color-indigo-50: oklch(0.962 0.018 272.314); - --color-indigo-100: oklch(0.93 0.034 272.788); - --color-indigo-200: oklch(0.87 0.065 274.039); - --color-indigo-300: oklch(0.785 0.115 274.713); - --color-indigo-400: oklch(0.673 0.182 276.935); - --color-indigo-500: oklch(0.585 0.233 277.117); - --color-indigo-600: oklch(0.511 0.262 276.966); - --color-indigo-700: oklch(0.457 0.24 277.023); - --color-indigo-800: oklch(0.398 0.195 277.366); - --color-indigo-900: oklch(0.359 0.144 278.697); - --color-indigo-950: oklch(0.257 0.09 281.288); - --color-violet-50: oklch(0.969 0.016 293.756); - --color-violet-100: oklch(0.943 0.029 294.588); - --color-violet-200: oklch(0.894 0.057 293.283); - --color-violet-300: oklch(0.811 0.111 293.571); - --color-violet-400: oklch(0.702 0.183 293.541); - --color-violet-500: oklch(0.606 0.25 292.717); - --color-violet-600: oklch(0.541 0.281 293.009); - --color-violet-700: oklch(0.491 0.27 292.581); - --color-violet-800: oklch(0.432 0.232 292.759); - --color-violet-900: oklch(0.38 0.189 293.745); - --color-violet-950: oklch(0.283 0.141 291.089); - --color-purple-50: oklch(0.977 0.014 308.299); - --color-purple-100: oklch(0.946 0.033 307.174); - --color-purple-200: oklch(0.902 0.063 306.703); - --color-purple-300: oklch(0.827 0.119 306.383); - --color-purple-400: oklch(0.714 0.203 305.504); - --color-purple-500: oklch(0.627 0.265 303.9); - --color-purple-600: oklch(0.558 0.288 302.321); - --color-purple-700: oklch(0.496 0.265 301.924); - --color-purple-800: oklch(0.438 0.218 303.724); - --color-purple-900: oklch(0.381 0.176 304.987); - --color-purple-950: oklch(0.291 0.149 302.717); - --color-fuchsia-50: oklch(0.977 0.017 320.058); - --color-fuchsia-100: oklch(0.952 0.037 318.852); - --color-fuchsia-200: oklch(0.903 0.076 319.62); - --color-fuchsia-300: oklch(0.833 0.145 321.434); - --color-fuchsia-400: oklch(0.74 0.238 322.16); - --color-fuchsia-500: oklch(0.667 0.295 322.15); - --color-fuchsia-600: oklch(0.591 0.293 322.896); - --color-fuchsia-700: oklch(0.518 0.253 323.949); - --color-fuchsia-800: oklch(0.452 0.211 324.591); - --color-fuchsia-900: oklch(0.401 0.17 325.612); - --color-fuchsia-950: oklch(0.293 0.136 325.661); - --color-pink-50: oklch(0.971 0.014 343.198); - --color-pink-100: oklch(0.948 0.028 342.258); - --color-pink-200: oklch(0.899 0.061 343.231); - --color-pink-300: oklch(0.823 0.12 346.018); - --color-pink-400: oklch(0.718 0.202 349.761); - --color-pink-500: oklch(0.656 0.241 354.308); - --color-pink-600: oklch(0.592 0.249 0.584); - --color-pink-700: oklch(0.525 0.223 3.958); - --color-pink-800: oklch(0.459 0.187 3.815); - --color-pink-900: oklch(0.408 0.153 2.432); - --color-pink-950: oklch(0.284 0.109 3.907); - --color-rose-50: oklch(0.969 0.015 12.422); - --color-rose-100: oklch(0.941 0.03 12.58); - --color-rose-200: oklch(0.892 0.058 10.001); - --color-rose-300: oklch(0.81 0.117 11.638); - --color-rose-400: oklch(0.712 0.194 13.428); - --color-rose-500: oklch(0.645 0.246 16.439); - --color-rose-600: oklch(0.586 0.253 17.585); - --color-rose-700: oklch(0.514 0.222 16.935); - --color-rose-800: oklch(0.455 0.188 13.697); - --color-rose-900: oklch(0.41 0.159 10.272); - --color-rose-950: oklch(0.271 0.105 12.094); - --color-slate-50: oklch(0.984 0.003 247.858); - --color-slate-100: oklch(0.968 0.007 247.896); - --color-slate-200: oklch(0.929 0.013 255.508); - --color-slate-300: oklch(0.869 0.022 252.894); - --color-slate-400: oklch(0.704 0.04 256.788); - --color-slate-500: oklch(0.554 0.046 257.417); - --color-slate-600: oklch(0.446 0.043 257.281); - --color-slate-700: oklch(0.372 0.044 257.287); - --color-slate-800: oklch(0.279 0.041 260.031); - --color-slate-900: oklch(0.208 0.042 265.755); - --color-slate-950: oklch(0.129 0.042 264.695); - --color-gray-50: oklch(0.985 0.002 247.839); - --color-gray-100: oklch(0.967 0.003 264.542); - --color-gray-200: oklch(0.928 0.006 264.531); - --color-gray-300: oklch(0.872 0.01 258.338); - --color-gray-400: oklch(0.707 0.022 261.325); - --color-gray-500: oklch(0.551 0.027 264.364); - --color-gray-600: oklch(0.446 0.03 256.802); - --color-gray-700: oklch(0.373 0.034 259.733); - --color-gray-800: oklch(0.278 0.033 256.848); - --color-gray-900: oklch(0.21 0.034 264.665); - --color-gray-950: oklch(0.13 0.028 261.692); - --color-zinc-50: oklch(0.985 0 0); - --color-zinc-100: oklch(0.967 0.001 286.375); - --color-zinc-200: oklch(0.92 0.004 286.32); - --color-zinc-300: oklch(0.871 0.006 286.286); - --color-zinc-400: oklch(0.705 0.015 286.067); - --color-zinc-500: oklch(0.552 0.016 285.938); - --color-zinc-600: oklch(0.442 0.017 285.786); - --color-zinc-700: oklch(0.37 0.013 285.805); - --color-zinc-800: oklch(0.274 0.006 286.033); - --color-zinc-900: oklch(0.21 0.006 285.885); - --color-zinc-950: oklch(0.141 0.005 285.823); - --color-neutral-50: oklch(0.985 0 0); - --color-neutral-100: oklch(0.97 0 0); - --color-neutral-200: oklch(0.922 0 0); - --color-neutral-300: oklch(0.87 0 0); - --color-neutral-400: oklch(0.708 0 0); - --color-neutral-500: oklch(0.556 0 0); - --color-neutral-600: oklch(0.439 0 0); - --color-neutral-700: oklch(0.371 0 0); - --color-neutral-800: oklch(0.269 0 0); - --color-neutral-900: oklch(0.205 0 0); - --color-neutral-950: oklch(0.145 0 0); - --color-stone-50: oklch(0.985 0.001 106.423); - --color-stone-100: oklch(0.97 0.001 106.424); - --color-stone-200: oklch(0.923 0.003 48.717); - --color-stone-300: oklch(0.869 0.005 56.366); - --color-stone-400: oklch(0.709 0.01 56.259); - --color-stone-500: oklch(0.553 0.013 58.071); - --color-stone-600: oklch(0.444 0.011 73.639); - --color-stone-700: oklch(0.374 0.01 67.558); - --color-stone-800: oklch(0.268 0.007 34.298); - --color-stone-900: oklch(0.216 0.006 56.043); - --color-stone-950: oklch(0.147 0.004 49.25); - --color-black: #000; - --color-white: #fff; - --spacing: 0.25rem; - --breakpoint-sm: 40rem; - --breakpoint-md: 48rem; - --breakpoint-lg: 64rem; - --breakpoint-xl: 80rem; - --breakpoint-2xl: 96rem; - --container-3xs: 16rem; - --container-2xs: 18rem; - --container-xs: 20rem; - --container-sm: 24rem; - --container-md: 28rem; - --container-lg: 32rem; - --container-xl: 36rem; - --container-2xl: 42rem; - --container-3xl: 48rem; - --container-4xl: 56rem; - --container-5xl: 64rem; - --container-6xl: 72rem; - --container-7xl: 80rem; - --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); - --text-base: 1rem; - --text-base--line-height: calc(1.5 / 1); - --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); - --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); - --text-4xl: 2.25rem; - --text-4xl--line-height: calc(2.5 / 2.25); - --text-5xl: 3rem; - --text-5xl--line-height: 1; - --text-6xl: 3.75rem; - --text-6xl--line-height: 1; - --text-7xl: 4.5rem; - --text-7xl--line-height: 1; - --text-8xl: 6rem; - --text-8xl--line-height: 1; - --text-9xl: 8rem; - --text-9xl--line-height: 1; - --font-weight-thin: 100; - --font-weight-extralight: 200; - --font-weight-light: 300; - --font-weight-normal: 400; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; - --font-weight-extrabold: 800; - --font-weight-black: 900; - --tracking-tighter: -0.05em; - --tracking-tight: -0.025em; - --tracking-normal: 0em; - --tracking-wide: 0.025em; - --tracking-wider: 0.05em; - --tracking-widest: 0.1em; - --leading-tight: 1.25; - --leading-snug: 1.375; - --leading-normal: 1.5; - --leading-relaxed: 1.625; - --leading-loose: 2; - --radius-xs: 0.125rem; - --radius-sm: 0.25rem; - --radius-md: 0.375rem; - --radius-lg: 0.5rem; - --radius-xl: 0.75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; - --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); - --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), - 0 2px 4px -2px rgb(0 0 0 / 0.1); - --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); - --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), - 0 8px 10px -6px rgb(0 0 0 / 0.1); - --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); - --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); - --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); - --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); - --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); - --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); - --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); - --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); - --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); - --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); - --ease-in: cubic-bezier(0.4, 0, 1, 1); - --ease-out: cubic-bezier(0, 0, 0.2, 1); - --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); - --animate-spin: spin 1s linear infinite; - --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; - --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; - --animate-bounce: bounce 1s infinite; - --blur-xs: 4px; - --blur-sm: 8px; - --blur-md: 12px; - --blur-lg: 16px; - --blur-xl: 24px; - --blur-2xl: 40px; - --blur-3xl: 64px; - --perspective-dramatic: 100px; - --perspective-near: 300px; - --perspective-normal: 500px; - --perspective-midrange: 800px; - --perspective-distant: 1200px; - --aspect-video: 16 / 9; - --default-transition-duration: 150ms; - --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - --default-font-family: var(--font-sans); - --default-font-feature-settings: var(--font-sans--font-feature-settings); - --default-font-variation-settings: var( - --font-sans--font-variation-settings - ); - --default-mono-font-family: var(--font-mono); - --default-mono-font-feature-settings: var( - --font-mono--font-feature-settings - ); - --default-mono-font-variation-settings: var( - --font-mono--font-variation-settings - ); - } -} -@layer base { - *, ::after, ::before, ::backdrop, ::file-selector-button { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0 solid; - } - html, :host { - line-height: 1.5; - -webkit-text-size-adjust: 100%; - tab-size: 4; - font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ); - font-feature-settings: var(--default-font-feature-settings, normal); - font-variation-settings: var( --default-font-variation-settings, normal ); - -webkit-tap-highlight-color: transparent; - } - body { - line-height: inherit; - } - hr { - height: 0; - color: inherit; - border-top-width: 1px; - } - abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - } - h1, h2, h3, h4, h5, h6 { - font-size: inherit; - font-weight: inherit; - } - a { - color: inherit; - -webkit-text-decoration: inherit; - text-decoration: inherit; - } - b, strong { - font-weight: bolder; - } - code, kbd, samp, pre { - font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ); - font-feature-settings: var( --default-mono-font-feature-settings, normal ); - font-variation-settings: var( --default-mono-font-variation-settings, normal ); - font-size: 1em; - } - small { - font-size: 80%; - } - sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - sub { - bottom: -0.25em; - } - sup { - top: -0.5em; - } - table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; - } - :-moz-focusring { - outline: auto; - } - progress { - vertical-align: baseline; - } - summary { - display: list-item; - } - ol, ul, menu { - list-style-type: none; - } - img, svg, video, canvas, audio, iframe, embed, object { - display: block; - vertical-align: middle; - } - img, video { - max-width: 100%; - height: auto; - } - button, input, select, optgroup, textarea, ::file-selector-button { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - border-radius: 0; - background-color: transparent; - opacity: 1; - } - :where(select:is([multiple], [size])) optgroup { - font-weight: bolder; - } - :where(select:is([multiple], [size])) optgroup option { - padding-inline-start: 20px; - } - ::file-selector-button { - margin-inline-end: 4px; - } - ::placeholder { - opacity: 1; - color: color-mix(in oklab, currentColor 50%, transparent); - } - textarea { - resize: vertical; - } - ::-webkit-search-decoration { - -webkit-appearance: none; - } - ::-webkit-date-and-time-value { - min-height: 1lh; - text-align: inherit; - } - ::-webkit-datetime-edit { - display: inline-flex; - } - ::-webkit-datetime-edit-fields-wrapper { - padding: 0; - } - ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { - padding-block: 0; - } - :-moz-ui-invalid { - box-shadow: none; - } - button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { - appearance: button; - } - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { - height: auto; - } - [hidden]:where(:not([hidden="until-found"])) { - display: none !important; - } -} -@layer utilities { - .menu { - display: flex; - width: fit-content; - flex-direction: column; - flex-wrap: wrap; - padding: calc(0.25rem * 2); - 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) { - 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; - } - } - :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: color-mix(in oklab, var(--color-base-content) 10%, transparent); - color: var(--color-base-content); - 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: color-mix(in oklab, var(--color-base-content) 10%, transparent); - 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 { - background-color: var(--color-neutral); - color: var(--color-neutral-content); - outline: 2px solid transparent; - outline-offset: 2px; - background-size: calc(var(--noise) * 1000px); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); - &:not(&:active) { - box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral); - } - } - &.menu-disabled { - pointer-events: none; - color: color-mix(in oklab, var(--color-base-content) 20%, transparent); - } - } - } - .btn { - 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; - text-decoration-line: none; - outline-offset: 2px; - webkit-user-select: none; - user-select: none; - padding-inline: var(--btn-p); - color: var(--btn-fg); - height: var(--size); - font-size: 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: calc(var(--noise) * 100%); - background-image: var(--btn-noise); - border-width: var(--border); - border-style: solid; - border-color: var(--btn-border); - text-shadow: 0 0.5px oklch(1 0 0 / calc(var(--depth) * 0.15)); - box-shadow: 0 0.5px 0 0.5px color-mix( in oklab, color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%), transparent ) 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: color-mix(in oklab, var(--btn-bg), black calc(var(--depth) * 5%)); - --btn-shadow: 0 3px 2px -2px - color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), transparent), - 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), transparent); - --btn-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); - &:hover { - --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), black 7%); - } - &.btn-active { - --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), black 7%); - --btn-shadow: 0 0 0 0 oklch(0% 0 0/0.07); - isolation: isolate; - } - &:focus-visible { - outline-width: 2px; - outline-style: solid; - } - &:active:not(.btn-active) { - translate: 0 0.5px; - --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), black 5%); - --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), black 7%); - --btn-shadow: 0 0 0 0 oklch(0% 0 0/0.07); - } - &:is(:disabled, [disabled], .btn-disabled) { - &:not(.btn-link, .btn-ghost) { - background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); - box-shadow: none; - } - pointer-events: none; - --btn-border: transparent; - --btn-noise: none; - --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, transparent); - &:hover { - pointer-events: none; - background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); - --btn-border: transparent; - --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, transparent); - } - } - &:is(input[type="checkbox"], input[type="radio"]) { - appearance: none; - &::after { - content: attr(aria-label); - } - &:checked { - --btn-color: var(--color-primary); - --btn-bg: var(--color-primary); - --btn-fg: var(--color-primary-content); - --btn-border: var(--color-primary); - &:focus-visible { - outline-color: var(--color-primary); - } - &:hover { - --btn-bg: color-mix(in oklab, var(--color-primary) 90%, black); - --btn-border: color-mix(in oklab, var(--color-primary) 90%, black); - } - } - } - } - .drawer-side { - pointer-events: none; - visibility: hidden; - position: fixed; - inset-inline-start: calc(0.25rem * 0); - top: calc(0.25rem * 0); - grid-column-start: 1; - grid-row-start: 1; - display: grid; - width: 100%; - grid-template-columns: repeat(1, minmax(0, 1fr)); - grid-template-rows: repeat(1, minmax(0, 1fr)); - align-items: flex-start; - justify-items: start; - overflow-x: hidden; - overflow-y: hidden; - overscroll-behavior: contain; - opacity: 0%; - transition: opacity 0.2s ease-out 0.1s allow-discrete, visibility 0.3s ease-out 0.1s allow-discrete; - height: 100vh; - height: 100dvh; - > .drawer-overlay { - position: sticky; - top: calc(0.25rem * 0); - cursor: pointer; - place-self: stretch; - background-color: oklch(0% 0 0 / 40%); - } - > * { - grid-column-start: 1; - grid-row-start: 1; - } - > *:not(.drawer-overlay) { - will-change: transform; - transition: translate 0.3s ease-out; - translate: -100%; - [dir="rtl"] & { - translate: 100%; - } - } - } - .modal { - pointer-events: none; - visibility: hidden; - position: fixed; - inset: calc(0.25rem * 0); - margin: calc(0.25rem * 0); - display: grid; - height: 100%; - max-height: none; - width: 100%; - max-width: none; - align-items: center; - justify-items: center; - background-color: transparent; - padding: calc(0.25rem * 0); - color: inherit; - overflow-x: hidden; - transition: transform 0.3s ease-out allow-discrete, visibility 0.3s ease-out allow-discrete, opacity 0.1s ease-out allow-discrete; - overflow-y: hidden; - overscroll-behavior: contain; - z-index: 999; - &:not(dialog:not(.modal-open)), &::backdrop { - opacity: 100%; - @starting-style { - visibility: hidden; - } - @starting-style { - opacity: 0%; - } - background-color: oklch(0% 0 0/ 0.4); - transition: display 0.3s ease-out allow-discrete, opacity 0.3s ease-out allow-discrete, visibility 0.3s ease-out allow-discrete; - } - &.modal-open, &[open], &:target { - pointer-events: auto; - visibility: visible; - opacity: 100%; - @starting-style { - visibility: hidden; - } - @starting-style { - opacity: 0%; - } - .modal-box { - translate: 0 0; - scale: 1; - opacity: 1; - } - } - } - .\!tooltip { - position: relative !important; - display: inline-block !important; - --tt-bg: var(--color-neutral) !important; - --tt-off: calc(100% + 0.5rem) !important; - --tt-tail: calc(100% + 1px + 0.25rem) !important; - > :where(.tooltip-content), &[data-tip]:before { - position: absolute !important; - max-width: 20rem !important; - border-radius: var(--radius-field) !important; - padding-inline: calc(0.25rem * 2) !important; - padding-block: calc(0.25rem * 1) !important; - text-align: center !important; - white-space: normal !important; - color: var(--color-neutral-content) !important; - opacity: 0% !important; - font-size: 0.875rem !important; - line-height: 1.25em !important; - 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 !important; - background-color: var(--tt-bg) !important; - width: max-content !important; - pointer-events: none !important; - z-index: 1 !important; - --tw-content: attr(data-tip) !important; - content: var(--tw-content) !important; - } - &:after { - position: absolute !important; - position: absolute !important; - opacity: 0% !important; - background-color: var(--tt-bg) !important; - 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 !important; - content: "" !important; - pointer-events: none !important; - width: 0.625rem !important; - height: 0.25rem !important; - display: block !important; - mask-repeat: no-repeat !important; - mask-position: -1px 0 !important; - mask-image: 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") !important; - } - &.tooltip-open, &[data-tip]:hover, &:hover, &:has(:focus-visible) { - > .tooltip-content, &[data-tip]:before, &:after { - opacity: 100% !important; - --tt-pos: 0rem !important; - transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms !important; - } - } - > .tooltip-content, &[data-tip]:before { - transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important; - inset: auto auto var(--tt-off) 50% !important; - } - &:after { - transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important; - inset: auto auto var(--tt-tail) 50% !important; - } - } - .tooltip { - position: relative; - display: inline-block; - --tt-bg: var(--color-neutral); - --tt-off: calc(100% + 0.5rem); - --tt-tail: calc(100% + 1px + 0.25rem); - > :where(.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.25em; - 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; - background-color: var(--tt-bg); - width: max-content; - pointer-events: none; - z-index: 1; - --tw-content: attr(data-tip); - content: var(--tw-content); - } - &:after { - position: absolute; - position: absolute; - opacity: 0%; - background-color: var(--tt-bg); - 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; - content: ""; - pointer-events: none; - width: 0.625rem; - height: 0.25rem; - display: block; - mask-repeat: no-repeat; - mask-position: -1px 0; - mask-image: 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"); - } - &.tooltip-open, &[data-tip]:hover, &:hover, &:has(:focus-visible) { - > .tooltip-content, &[data-tip]:before, &:after { - opacity: 100%; - --tt-pos: 0rem; - transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; - } - } - > .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%; - } - } - .floating-label { - position: relative; - display: block; - input { - display: block; - &::placeholder { - color: transparent; - } - } - > span { - position: absolute; - inset-inline-start: calc(0.25rem * 3); - top: calc(1/2 * 100%); - z-index: 1; - background-color: var(--color-base-100); - padding-inline: calc(0.25rem * 1); - opacity: 50%; - line-height: 1; - border-radius: 2px; - pointer-events: none; - translate: 0 -50%; - transition: top 0.1s ease-out, translate 0.1s ease-out, scale 0.1s ease-out, opacity 0.1s ease-out; - } - &:focus-within, &:not(:has(input:placeholder-shown)) { - > span { - opacity: 100%; - top: 0; - translate: -12.5% calc(-50% - 0.125em); - scale: 0.75; - } - } - &:has(.input-xs) span { - font-size: 0.6875rem; - } - &:has(.input-sm) span { - font-size: 0.75rem; - } - &:has(.input-md) span { - font-size: 0.875rem; - } - &:has(.input-lg) span { - font-size: 1.125rem; - } - &:has(.input-xl) span { - font-size: 1.375rem; - } - } - .drawer-open { - > .drawer-side { - overflow-y: auto; - } - > .drawer-toggle { - display: none; - & ~ .drawer-side { - pointer-events: auto; - visibility: visible; - position: sticky; - display: block; - width: auto; - overscroll-behavior: auto; - opacity: 100%; - & > .drawer-overlay { - cursor: default; - background-color: transparent; - } - & > *:not(.drawer-overlay) { - translate: 0%; - [dir="rtl"] & { - translate: 0%; - } - } - } - &:checked ~ .drawer-side { - pointer-events: auto; - visibility: visible; - } - } - } - .drawer-toggle { - position: fixed; - height: calc(0.25rem * 0); - width: calc(0.25rem * 0); - appearance: none; - opacity: 0%; - &:checked { - & ~ .drawer-side { - pointer-events: auto; - visibility: visible; - overflow-y: auto; - opacity: 100%; - & > *:not(.drawer-overlay) { - translate: 0%; - } - } - } - &:focus-visible ~ .drawer-content label.drawer-button { - outline: 2px solid; - outline-offset: 2px; - } - } - .loading { - pointer-events: none; - display: inline-block; - aspect-ratio: 1 / 1; - width: calc(0.25rem * 6); - background-color: currentColor; - vertical-align: middle; - 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"); - } - .validator { - &:user-valid, &:has(:user-valid) { - &, &:focus, &:checked, &[aria-checked="true"], &:focus-within { - --input-color: var(--color-success); - } - } - &:user-invalid, &:has(:user-invalid) { - &, &:focus, &:checked, &[aria-checked="true"], &:focus-within { - --input-color: var(--color-error); - } - & ~ .validator-hint { - visibility: visible; - display: block; - color: var(--color-error); - } - } - & ~ .validator-hint { - visibility: hidden; - } - } - .visible { - visibility: visible; - } - .select { - border: var(--border) solid transparent; - position: relative; - display: inline-flex; - flex-shrink: 1; - appearance: none; - align-items: center; - gap: calc(0.25rem * 1.5); - background-color: var(--color-base-100); - padding-inline-start: calc(0.25rem * 4); - padding-inline-end: calc(0.25rem * 7); - vertical-align: middle; - width: clamp(3rem, 20rem, 100%); - height: var(--size); - font-size: 0.875rem; - 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-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); - background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); - background-size: 4px 4px, 4px 4px; - background-repeat: no-repeat; - text-overflow: ellipsis; - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; - border-color: var(--input-color); - --input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); - --size: calc(var(--size-field, 0.25rem) * 10); - [dir="rtl"] & { - background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%); - } - select { - margin-inline-start: calc(0.25rem * -4); - margin-inline-end: calc(0.25rem * -7); - height: 100%; - width: calc(100% + 2.75rem); - appearance: none; - background-color: transparent; - padding-inline-start: calc(0.25rem * 4); - padding-inline-end: calc(0.25rem * 7); - border-style: none; - &:focus, &:focus-within { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - &:focus, &:focus-within { - --input-color: var(--color-base-content); - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent); - outline: 2px solid var(--input-color); - outline-offset: 2px; - } - &:has(> select[disabled]), &:is(:disabled, [disabled]) { - cursor: not-allowed; - border-color: var(--color-base-200); - background-color: var(--color-base-200); - color: color-mix(in oklab, var(--color-base-content) 40%, transparent); - &::placeholder { - color: color-mix(in oklab, var(--color-base-content) 20%, transparent); - } - } - &:has(> select[disabled]) > select[disabled] { - cursor: not-allowed; - } - } - .toggle { - border: var(--border) solid currentColor; - color: var(--input-color); - position: relative; - display: inline-grid; - flex-shrink: 0; - cursor: pointer; - appearance: none; - place-content: center; - vertical-align: middle; - webkit-user-select: none; - user-select: none; - grid-template-columns: 0fr 1fr 1fr; - border-radius: calc(var(--radius-selector) + var(--toggle-p)); - padding: var(--toggle-p); - box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), transparent) inset; - transition: color 0.3s, grid-template-columns 0.2s; - --input-color: color-mix(in oklab, var(--color-base-content) 50%, transparent); - --toggle-p: 0.1875rem; - --size: calc(var(--size-selector, 0.25rem) * 6); - width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2); - height: var(--size); - > * { - z-index: 1; - grid-column: span 1 / span 1; - grid-column-start: 2; - grid-row-start: 1; - height: 100%; - cursor: pointer; - appearance: none; - background-color: transparent; - padding: calc(0.25rem * 0.5); - transition: opacity 0.2s, rotate 0.4s; - border: none; - &:focus { - outline: 2px solid transparent; - outline-offset: 2px; - } - &:nth-child(2) { - color: var(--color-base-100); - rotate: 0deg; - } - &:nth-child(3) { - color: var(--color-base-100); - opacity: 0%; - rotate: -15deg; - } - } - &:has(:checked) { - > :nth-child(2) { - opacity: 0%; - rotate: 15deg; - } - > :nth-child(3) { - opacity: 100%; - rotate: 0deg; - } - } - &:before { - position: relative; - inset-inline-start: calc(0.25rem * 0); - grid-column-start: 2; - grid-row-start: 1; - aspect-ratio: 1 / 1; - height: 100%; - border-radius: var(--radius-selector); - background-color: currentColor; - @media print { - outline: .25rem solid; - } - @media print { - outline-offset: -1rem; - } - translate: 0; - --tw-content: ""; - content: var(--tw-content); - transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s; - box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), transparent); - background-size: calc(var(--noise) * 1000px); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); - @media (forced-colors: active) { - outline-style: var(--tw-outline-style); - outline-width: 1px; - outline-offset: calc(1px * -1); - } - } - &:focus-visible, &:has(:focus-visible) { - outline: 2px solid currentColor; - outline-offset: 2px; - } - &:checked, &[aria-checked="true"], &:has(> input:checked) { - grid-template-columns: 1fr 1fr 0fr; - background-color: var(--color-base-100); - --input-color: var(--color-base-content); - &:before { - background-color: currentColor; - @starting-style { - opacity: 0; - } - } - } - &:indeterminate { - grid-template-columns: 0.5fr 1fr 0.5fr; - } - &:disabled { - cursor: not-allowed; - opacity: 30%; - &:before { - background-color: transparent; - border: var(--border) solid currentColor; - } - } - } - .card { - position: relative; - display: flex; - flex-direction: column; - border-radius: var(--radius-box); - outline-width: 2px; - transition: outline 0.2s ease-in-out; - outline: 0 solid transparent; - outline-offset: 2px; - &:focus { - outline: 2px solid transparent; - outline-offset: 2px; - } - &:focus-visible { - outline-color: currentColor; - } - :where(figure:first-child) { - overflow: hidden; - border-start-start-radius: inherit; - border-start-end-radius: inherit; - border-end-start-radius: unset; - border-end-end-radius: unset; - } - :where(figure:last-child) { - overflow: hidden; - border-start-start-radius: unset; - border-start-end-radius: unset; - border-end-start-radius: inherit; - border-end-end-radius: inherit; - } - &:where(.card-border) { - border: var(--border) solid var(--color-base-200); - } - &:where(.card-dash) { - border: var(--border) dashed var(--color-base-200); - } - &.image-full { - display: grid; - &:before { - position: relative; - grid-column-start: 1; - grid-row-start: 1; - border-radius: var(--radius-box); - background-color: var(--color-neutral); - opacity: 75%; - content: ""; - } - > * { - grid-column-start: 1; - grid-row-start: 1; - } - > .card-body { - position: relative; - color: var(--color-neutral-content); - } - :where(figure) { - overflow: hidden; - border-radius: inherit; - } - > figure img { - height: 100%; - object-fit: cover; - } - } - figure { - display: flex; - align-items: center; - justify-content: center; - } - &:has(> input:is(input[type="checkbox"], input[type="radio"])) { - cursor: pointer; - user-select: none; - } - &:has(> :checked) { - outline: 2px solid currentColor; - } - } - .checkbox { - border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, transparent)); - position: relative; - flex-shrink: 0; - cursor: pointer; - appearance: none; - border-radius: var(--radius-selector); - padding: calc(0.25rem * 1); - vertical-align: middle; - color: var(--color-base-content); - box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 transparent inset, 0 0 transparent; - transition: background-color 0.2s, box-shadow 0.2s; - --size: calc(var(--size-selector, 0.25rem) * 6); - width: var(--size); - height: var(--size); - background-size: calc(var(--noise) * 1000px); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); - &:before { - --tw-content: ""; - content: var(--tw-content); - display: block; - width: 100%; - height: 100%; - rotate: 45deg; - background-color: currentColor; - opacity: 0%; - transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s; - transition-delay: 0.1s; - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); - box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; - font-size: 1rem; - line-height: 0.75; - } - &:focus-visible { - outline: 2px solid var(--input-color, currentColor); - outline-offset: 2px; - } - &:checked, &[aria-checked="true"] { - background-color: var(--input-color, transparent); - box-shadow: 0 0 transparent inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); - &:before { - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); - opacity: 100%; - @media print { - rotate: 0deg; - } - @media print { - background-color: transparent; - } - @media print { - --tw-content: "✔︎"; - } - @media print { - clip-path: none; - } - @media (forced-colors: active) { - rotate: 0deg; - background-color: transparent; - --tw-content: "✔︎"; - clip-path: none; - } - } - } - &:indeterminate { - &:before { - rotate: 0deg; - opacity: 100%; - translate: 0 -35%; - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); - } - } - &:disabled { - cursor: not-allowed; - opacity: 20%; - } - } - .radio { - position: relative; - flex-shrink: 0; - cursor: pointer; - appearance: none; - border-radius: calc(infinity * 1px); - padding: calc(0.25rem * 1); - vertical-align: middle; - border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, transparent)); - box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset; - --size: calc(var(--size-selector, 0.25rem) * 6); - width: var(--size); - height: var(--size); - color: var(--input-color, currentColor); - &:before { - display: block; - width: 100%; - height: 100%; - border-radius: calc(infinity * 1px); - --tw-content: ""; - content: var(--tw-content); - background-size: calc(var(--noise) * 1000px); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); - } - &:focus-visible { - outline: 2px solid currentColor; - } - &:checked, &[aria-checked="true"] { - animation: radio 0.2s ease-out; - border-color: currentColor; - background-color: var(--color-base-100); - &:before { - background-color: currentColor; - @media print { - outline: .25rem solid; - } - @media print { - outline-offset: -1rem; - } - box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); - @media (forced-colors: active) { - outline-style: var(--tw-outline-style); - outline-width: 1px; - outline-offset: calc(1px * -1); - } - } - } - &:disabled { - cursor: not-allowed; - opacity: 20%; - } - } - .table { - font-size: 0.875rem; - position: relative; - width: 100%; - 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: color-mix(in oklab, var(--color-base-content) 60%, transparent); - font-size: 0.875rem; - font-weight: 600; - } - :where(tfoot) { - border-top: var(--border) solid var(--color-base-200); - } - :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, tbody tr:not(:last-child), tbody tr:first-child:last-child) { - border-bottom: var(--border) solid var(--color-base-200); - } - } - .list { - 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); - &: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; - } - &:has(:not(:last-child)), &:not(:last-child) { - &:after { - content: ""; - border-bottom: var(--border) solid; - inset-inline: var(--radius-box); - position: absolute; - bottom: calc(0.25rem * 0); - border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); - } - } - :not(.list-col-wrap) { - grid-row-start: 1; - } - } - } - .chat-bubble { - position: relative; - display: block; - width: fit-content; - border-radius: var(--radius-field); - background-color: var(--color-base-300); - padding-inline: calc(0.25rem * 4); - padding-block: calc(0.25rem * 2); - color: var(--color-base-content); - min-height: 2rem; - min-width: 2.5rem; - max-width: 90%; - &:before { - position: absolute; - bottom: calc(0.25rem * 0); - height: calc(0.25rem * 3); - width: calc(0.25rem * 3); - background-color: inherit; - content: ""; - mask-repeat: no-repeat; - mask-image: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); - mask-position: 0px -1px; - mask-size: 13px; - } - } - .toast { - position: fixed; - inset-inline-start: auto; - inset-inline-end: calc(0.25rem * 0); - top: auto; - bottom: calc(0.25rem * 0); - margin: calc(0.25rem * 4); - display: flex; - min-width: fit-content; - flex-direction: column; - gap: calc(0.25rem * 2); - background-color: transparent; - white-space: nowrap; - translate: var(--toast-x, 0) var(--toast-y, 0); - & > * { - animation: toast 0.25s ease-out; - } - &:where(.toast-start) { - inset-inline-start: calc(0.25rem * 0); - inset-inline-end: auto; - --toast-x: 0; - } - &:where(.toast-center) { - inset-inline-start: calc(1/2 * 100%); - inset-inline-end: calc(1/2 * 100%); - --toast-x: -50%; - } - &:where(.toast-end) { - inset-inline-start: auto; - inset-inline-end: calc(0.25rem * 0); - --toast-x: 0; - } - &:where(.toast-bottom) { - top: auto; - bottom: calc(0.25rem * 0); - --toast-y: 0; - } - &:where(.toast-middle) { - top: calc(1/2 * 100%); - bottom: auto; - --toast-y: -50%; - } - &:where(.toast-top) { - top: calc(0.25rem * 0); - bottom: auto; - --toast-y: 0; - } - } - .rating { - position: relative; - display: inline-flex; - vertical-align: middle; - & input { - border: none; - appearance: none; - } - :where(*) { - animation: rating 0.25s ease-out; - height: calc(0.25rem * 6); - width: calc(0.25rem * 6); - border-radius: 0; - background-color: var(--color-base-content); - opacity: 20%; - &: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 { - transition: scale 0.2s ease-out; - scale: 1.1; - } - } - & *:active:focus { - animation: none; - scale: 1.1; - } - &.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); - } - } - .swap { - position: relative; - display: inline-grid; - cursor: pointer; - place-content: center; - vertical-align: middle; - webkit-user-select: none; - user-select: none; - input { - appearance: none; - border: none; - } - > * { - grid-column-start: 1; - grid-row-start: 1; - transition-property: transform, rotate, opacity; - transition-duration: 0.2s; - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); - } - .swap-on, .swap-indeterminate, input:indeterminate ~ .swap-on { - opacity: 0%; - } - input:checked, input:indeterminate { - & ~ .swap-off { - opacity: 0%; - } - } - input:checked ~ .swap-on, input:indeterminate ~ .swap-indeterminate { - opacity: 100%; - } - } - .menu-horizontal { - display: inline-flex; - flex-direction: row; - & > li:not(.menu-title) > details > ul { - position: absolute; - margin-inline-start: calc(0.25rem * 0); - margin-top: calc(0.25rem * 4); - padding-block: calc(0.25rem * 2); - padding-inline-end: calc(0.25rem * 2); - } - & > li > details > ul { - &:before { - content: none; - } - } - :where(& > li:not(.menu-title) > details > ul) { - border-radius: var(--radius-box); - background-color: var(--color-base-100); - box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1); - } - } - .progress { - position: relative; - height: calc(0.25rem * 2); - width: 100%; - appearance: none; - overflow: hidden; - border-radius: var(--radius-box); - 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%, transparent 10%, transparent 90% ); - background-size: 200%; - background-position-x: 15%; - animation: progress 5s ease-in-out infinite; - @supports (-moz-appearance: none) { - &::-moz-progress-bar { - background-color: transparent; - background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, transparent 10%, transparent 90% ); - background-size: 200%; - background-position-x: 15%; - animation: progress 5s ease-in-out infinite; - } - } - } - @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; - } - } - } - .stats { - position: relative; - display: inline-grid; - grid-auto-flow: column; - overflow-x: auto; - border-radius: var(--radius-box); - } - .drawer { - position: relative; - display: grid; - width: 100%; - grid-auto-columns: max-content auto; - } - .absolute { - position: absolute; - } - .fixed { - position: fixed; - } - .relative { - position: relative; - } - .static { - position: static; - } - .inset-x-0 { - inset-inline: calc(var(--spacing) * 0); - } - .inset-y-0 { - inset-block: calc(var(--spacing) * 0); - } - .chat-end { - place-items: end; - grid-template-columns: 1fr auto; - .chat-header { - grid-column-start: 1; - } - .chat-footer { - grid-column-start: 1; - } - .chat-image { - grid-column-start: 2; - } - .chat-bubble { - grid-column-start: 1; - border-end-end-radius: 0; - &:before { - transform: rotateY(180deg); - inset-inline-start: 100%; - } - [dir="rtl"] &:before { - transform: rotateY(0deg); - } - } - } - .chat-start { - place-items: start; - grid-template-columns: auto 1fr; - .chat-header { - grid-column-start: 2; - } - .chat-footer { - grid-column-start: 2; - } - .chat-image { - grid-column-start: 1; - } - .chat-bubble { - grid-column-start: 2; - border-end-start-radius: 0; - &:before { - transform: rotateY(0deg); - inset-inline-start: -0.75rem; - } - [dir="rtl"] &:before { - transform: rotateY(180deg); - } - } - } - .\!top-2\.5 { - top: calc(var(--spacing) * 2.5) !important; - } - .top-1 { - top: calc(var(--spacing) * 1); - } - .top-9 { - top: calc(var(--spacing) * 9); - } - .right-0 { - right: calc(var(--spacing) * 0); - } - .right-0\.5 { - right: calc(var(--spacing) * 0.5); - } - .bottom-0 { - bottom: calc(var(--spacing) * 0); - } - .\!left-3 { - left: calc(var(--spacing) * 3) !important; - } - .left-0 { - left: calc(var(--spacing) * 0); - } - .file-input { - cursor: pointer; - cursor: pointer; - border: var(--border) solid transparent; - display: inline-flex; - appearance: none; - align-items: center; - vertical-align: middle; - webkit-user-select: none; - user-select: none; - width: clamp(3rem, 20rem, 100%); - height: var(--size); - padding-inline-end: 0.75rem; - font-size: 0.875rem; - line-height: 2; - 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)); - border-color: var(--input-color); - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; - --size: calc(var(--size-field, 0.25rem) * 10); - --input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); - &:where(::file-selector-button) { - color: var(--color-base-content); - } - &::file-selector-button { - margin-inline-end: calc(0.25rem * 4); - cursor: pointer; - padding-inline: calc(0.25rem * 4); - webkit-user-select: none; - user-select: none; - height: calc(100% + var(--border) * 2); - margin-block: calc(var(--border) * -1); - margin-inline-start: calc(var(--border) * -1); - font-size: 0.875rem; - color: var(--btn-fg); - border-width: var(--border); - border-style: solid; - border-color: var(--btn-border); - border-start-start-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); - border-end-start-radius: calc(var(--join-es, var(--radius-field) - var(--border))); - font-weight: 600; - background-color: var(--btn-bg); - background-size: calc(var(--noise) * 100%); - background-image: var(--btn-noise); - text-shadow: 0 0.5px oklch(1 0 0 / calc(var(--depth) * 0.15)); - box-shadow: 0 0.5px 0 0.5px color-mix( in oklab, color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%), transparent ) 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-border: color-mix(in oklab, var(--btn-bg), black 5%); - --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, transparent), - 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) 30%, transparent); - --btn-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); - } - &:focus { - --input-color: var(--color-base-content); - box-shadow: 0 1px color-mix(in oklab, var(--input-color) 10%, transparent); - outline: 2px solid var(--input-color); - outline-offset: 2px; - isolation: isolate; - } - &:has(> input[disabled]), &:is(:disabled, [disabled]) { - cursor: not-allowed; - border-color: var(--color-base-200); - background-color: var(--color-base-200); - &::placeholder { - color: color-mix(in oklab, var(--color-base-content) 20%, transparent); - } - box-shadow: none; - color: color-mix(in oklch, var(--color-base-content) 20%, transparent); - &::file-selector-button { - cursor: not-allowed; - border-color: var(--color-base-200); - background-color: var(--color-base-200); - --btn-border: transparent; - --btn-noise: none; - --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, transparent); - } - } - } - .\!input { - cursor: text !important; - border: var(--border) solid transparent !important; - display: inline-flex !important; - flex-shrink: 1 !important; - appearance: none !important; - align-items: center !important; - gap: calc(0.25rem * 2) !important; - background-color: var(--color-base-100) !important; - padding-inline: calc(0.25rem * 3) !important; - vertical-align: middle !important; - white-space: nowrap !important; - width: clamp(3rem, 20rem, 100%) !important; - height: var(--size) !important; - font-size: 0.875rem !important; - border-start-start-radius: var(--join-ss, var(--radius-field)) !important; - border-start-end-radius: var(--join-se, var(--radius-field)) !important; - border-end-start-radius: var(--join-es, var(--radius-field)) !important; - border-end-end-radius: var(--join-ee, var(--radius-field)) !important; - border-color: var(--input-color) !important; - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset !important; - --size: calc(var(--size-field, 0.25rem) * 10) !important; - --input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important; - &:where(input) { - display: inline-block !important; - } - :where(input) { - display: inline-block !important; - height: 100% !important; - width: 100% !important; - appearance: none !important; - background-color: transparent !important; - border: none !important; - &:focus, &:focus-within { - outline: 2px solid transparent !important; - outline-offset: 2px !important; - } - } - &:focus, &:focus-within { - --input-color: var(--color-base-content) !important; - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) !important; - outline: 2px solid var(--input-color) !important; - outline-offset: 2px !important; - isolation: isolate !important; - } - &:has(> input[disabled]), &:is(:disabled, [disabled]) { - cursor: not-allowed !important; - border-color: var(--color-base-200) !important; - background-color: var(--color-base-200) !important; - color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important; - &::placeholder { - color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important; - } - box-shadow: none !important; - } - &:has(> input[disabled]) > input[disabled] { - cursor: not-allowed !important; - } - &::-webkit-date-and-time-value { - text-align: inherit !important; - } - &[type="number"] { - &::-webkit-inner-spin-button { - margin-block: calc(0.25rem * -3) !important; - margin-inline-end: calc(0.25rem * -3) !important; - } - } - &[list] { - &::-webkit-calendar-picker-indicator { - } - } - } - .input { - cursor: text; - border: var(--border) solid transparent; - display: inline-flex; - flex-shrink: 1; - appearance: none; - align-items: center; - gap: calc(0.25rem * 2); - background-color: var(--color-base-100); - padding-inline: calc(0.25rem * 3); - vertical-align: middle; - white-space: nowrap; - width: clamp(3rem, 20rem, 100%); - height: var(--size); - font-size: 0.875rem; - 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)); - border-color: var(--input-color); - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; - --size: calc(var(--size-field, 0.25rem) * 10); - --input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); - &:where(input) { - display: inline-block; - } - :where(input) { - display: inline-block; - height: 100%; - width: 100%; - appearance: none; - background-color: transparent; - border: none; - &:focus, &:focus-within { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - &:focus, &:focus-within { - --input-color: var(--color-base-content); - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent); - outline: 2px solid var(--input-color); - outline-offset: 2px; - isolation: isolate; - } - &:has(> input[disabled]), &:is(:disabled, [disabled]) { - cursor: not-allowed; - border-color: var(--color-base-200); - background-color: var(--color-base-200); - color: color-mix(in oklab, var(--color-base-content) 40%, transparent); - &::placeholder { - color: color-mix(in oklab, var(--color-base-content) 20%, transparent); - } - box-shadow: none; - } - &:has(> input[disabled]) > input[disabled] { - cursor: not-allowed; - } - &::-webkit-date-and-time-value { - text-align: inherit; - } - &[type="number"] { - &::-webkit-inner-spin-button { - margin-block: calc(0.25rem * -3); - margin-inline-end: calc(0.25rem * -3); - } - } - &[list] { - &::-webkit-calendar-picker-indicator { - } - } - } - .textarea { - border: var(--border) solid transparent; - min-height: calc(0.25rem * 20); - flex-shrink: 1; - appearance: none; - border-radius: var(--radius-field); - background-color: var(--color-base-100); - padding-block: calc(0.25rem * 2); - vertical-align: middle; - width: clamp(3rem, 20rem, 100%); - padding-inline-start: 0.75rem; - padding-inline-end: 0.75rem; - font-size: 0.875rem; - border-color: var(--input-color); - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; - --size: calc(var(--size-field, 0.25rem) * 10); - --input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); - textarea { - appearance: none; - background-color: transparent; - border: none; - &:focus, &:focus-within { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - &:focus, &:focus-within { - --input-color: var(--color-base-content); - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent); - outline: 2px solid var(--input-color); - outline-offset: 2px; - isolation: isolate; - } - &:has(> textarea[disabled]), &:is(:disabled, [disabled]) { - cursor: not-allowed; - border-color: var(--color-base-200); - background-color: var(--color-base-200); - color: color-mix(in oklab, var(--color-base-content) 40%, transparent); - &::placeholder { - color: color-mix(in oklab, var(--color-base-content) 20%, transparent); - } - box-shadow: none; - } - &:has(> textarea[disabled]) > textarea[disabled] { - cursor: not-allowed; - } - } - .z-10 { - z-index: 10; - } - .z-20 { - z-index: 20; - } - .z-50 { - z-index: 50; - } - .z-\[9999\] { - z-index: 9999; - } - .modal-box { - grid-column-start: 1; - grid-row-start: 1; - width: calc(11/12 * 100%); - max-width: 32rem; - background-color: var(--color-base-100); - padding: calc(0.25rem * 6); - transition: translate 0.3s ease-out, scale 0.3s ease-out, opacity 0.2s ease-out 0.05s, box-shadow 0.3s ease-out; - border-top-left-radius: var(--modal-tl, var(--radius-box)); - border-top-right-radius: var(--modal-tr, var(--radius-box)); - border-bottom-left-radius: var(--modal-bl, var(--radius-box)); - border-bottom-right-radius: var(--modal-br, var(--radius-box)); - scale: 95%; - opacity: 0; - box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px; - overflow-y: auto; - overscroll-behavior: contain; - } - .hero { - display: grid; - width: 100%; - place-items: center; - background-size: cover; - background-position: center; - & > * { - grid-column-start: 1; - grid-row-start: 1; - } - } - .stat-desc { - grid-column-start: 1; - white-space: nowrap; - color: color-mix(in oklab, var(--color-base-content) 60%, transparent); - font-size: 0.75rem; - } - .stat-title { - grid-column-start: 1; - white-space: nowrap; - color: color-mix(in oklab, var(--color-base-content) 60%, transparent); - font-size: 0.75rem; - } - .stat-value { - grid-column-start: 1; - white-space: nowrap; - font-size: 2rem; - font-weight: 800; - } - .drawer-content { - grid-column-start: 2; - grid-row-start: 1; - min-width: calc(0.25rem * 0); - } - .chat-footer { - grid-row-start: 3; - display: flex; - gap: calc(0.25rem * 1); - font-size: 0.6875rem; - } - .list-col-wrap { - grid-row-start: 2; - } - .container { - width: 100%; - @media (width >= 40rem) { - max-width: 40rem; - } - @media (width >= 48rem) { - max-width: 48rem; - } - @media (width >= 64rem) { - max-width: 64rem; - } - @media (width >= 80rem) { - max-width: 80rem; - } - @media (width >= 96rem) { - max-width: 96rem; - } - } - .filter { - display: flex; - flex-wrap: wrap; - input[type="radio"] { - width: auto; - } - input { - overflow: hidden; - opacity: 100%; - scale: 1; - transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s, width 0.1s allow-discrete; - &:not(:last-child) { - margin-inline-end: calc(0.25rem * 1); - } - &.filter-reset { - aspect-ratio: 1 / 1; - &::after { - content: "×"; - } - } - } - &:not(:has(input:checked:not(.filter-reset))) { - .filter-reset, input[type="reset"] { - scale: 0; - border-width: 0; - margin-inline: calc(0.25rem * 0); - width: calc(0.25rem * 0); - padding-inline: calc(0.25rem * 0); - opacity: 0%; - } - } - &:has(input:checked:not(.filter-reset)) { - input:not(:checked, .filter-reset, input[type="reset"]) { - scale: 0; - border-width: 0; - margin-inline: calc(0.25rem * 0); - width: calc(0.25rem * 0); - padding-inline: calc(0.25rem * 0); - opacity: 0%; - } - } - } - .mx-auto { - margin-inline: auto; - } - .divider { - margin-block: calc(0.25rem * 4); - display: flex; - height: calc(0.25rem * 4); - flex-direction: row; - align-items: center; - align-self: stretch; - white-space: nowrap; - &:before, &:after { - content: ""; - height: calc(0.25rem * 0.5); - width: 100%; - flex-grow: 1; - background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); - @media print { - border: 0.5px solid; - } - } - &:not(:empty) { - gap: calc(0.25rem * 4); - } - } - .input-md { - --size: calc(var(--size-field, 0.25rem) * 10); - font-size: 0.875rem; - &[type="number"] { - &::-webkit-inner-spin-button { - margin-block: calc(0.25rem * -3); - margin-inline-end: calc(0.25rem * -3); - } - } - } - .my-2 { - margin-block: calc(var(--spacing) * 2); - } - .my-4 { - margin-block: calc(var(--spacing) * 4); - } - .my-10 { - margin-block: calc(var(--spacing) * 10); - } - .my-12 { - margin-block: calc(var(--spacing) * 12); - } - .\!input { - .label { - display: flex !important; - height: calc(100% - 0.5rem) !important; - align-items: center !important; - padding-inline: calc(0.25rem * 3) !important; - font-size: inherit !important; - &:first-child { - margin-inline-start: calc(0.25rem * -3) !important; - margin-inline-end: calc(0.25rem * 3) !important; - border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, transparent) !important; - } - &:last-child { - margin-inline-start: calc(0.25rem * 3) !important; - margin-inline-end: calc(0.25rem * -3) !important; - border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, transparent) !important; - } - } - } - .input { - .label { - display: flex; - height: calc(100% - 0.5rem); - align-items: center; - padding-inline: calc(0.25rem * 3); - 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 color-mix(in oklab, currentColor 10%, transparent); - } - &:last-child { - margin-inline-start: calc(0.25rem * 3); - margin-inline-end: calc(0.25rem * -3); - border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, transparent); - } - } - } - .select { - .label { - display: flex; - height: calc(100% - 0.5rem); - align-items: center; - padding-inline: calc(0.25rem * 3); - 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 color-mix(in oklab, currentColor 10%, transparent); - } - &:last-child { - margin-inline-start: calc(0.25rem * 3); - margin-inline-end: calc(0.25rem * -3); - border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, transparent); - } - } - } - .prose { - color: var(--tw-prose-body); - max-width: 90ch; - :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; - } - :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-lead); - font-size: 1.25em; - line-height: 1.6; - margin-top: 1.2em; - margin-bottom: 1.2em; - } - :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-links); - text-decoration: underline; - font-weight: 500; - } - :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-bold); - font-weight: 600; - } - :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: decimal; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-inline-start: 1.625em; - } - :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-alpha; - } - :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-alpha; - } - :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-alpha; - } - :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-alpha; - } - :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-roman; - } - :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-roman; - } - :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-roman; - } - :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-roman; - } - :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: decimal; - } - :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: disc; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-inline-start: 1.625em; - } - :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { - font-weight: 400; - color: var(--tw-prose-counters); - } - :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { - color: var(--tw-prose-bullets); - } - :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.25em; - } - :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-color: var(--tw-prose-hr); - border-top-width: 1; - margin-top: 3em; - margin-bottom: 3em; - } - :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 500; - font-style: italic; - color: var(--tw-prose-quotes); - border-inline-start-width: 0.25rem; - border-inline-start-color: var(--tw-prose-quote-borders); - quotes: "\201C""\201D""\2018""\2019"; - margin-top: 1.6em; - margin-bottom: 1.6em; - padding-inline-start: 1em; - } - :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: open-quote; - } - :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: close-quote; - } - :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 800; - font-size: 2.25em; - margin-top: 0; - margin-bottom: 0.8888889em; - line-height: 1.1111111; - } - :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 900; - color: inherit; - } - :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 700; - font-size: 1.5em; - margin-top: 2em; - margin-bottom: 1em; - line-height: 1.3333333; - } - :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 800; - color: inherit; - } - :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - font-size: 1.25em; - margin-top: 1.6em; - margin-bottom: 0.6em; - line-height: 1.6; - } - :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 700; - color: inherit; - } - :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.5em; - margin-bottom: 0.5em; - line-height: 1.5; - } - :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 700; - color: inherit; - } - :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; - } - :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - display: block; - margin-top: 2em; - margin-bottom: 2em; - } - :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; - } - :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 500; - font-family: inherit; - color: var(--tw-prose-kbd); - box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); - font-size: 0.875em; - border-radius: 0.3125rem; - padding-top: 0.1875em; - padding-inline-end: 0.375em; - padding-bottom: 0.1875em; - padding-inline-start: 0.375em; - } - :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-code); - font-weight: 600; - font-size: 0.875em; - } - :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: "`"; - } - :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: "`"; - } - :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - font-size: 0.875em; - } - :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - font-size: 0.9em; - } - :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-pre-code); - background-color: var(--tw-prose-pre-bg); - overflow-x: auto; - font-weight: 400; - font-size: 0.875em; - line-height: 1.7142857; - margin-top: 1.7142857em; - margin-bottom: 1.7142857em; - border-radius: 0.375rem; - padding-top: 0.8571429em; - padding-inline-end: 1.1428571em; - padding-bottom: 0.8571429em; - padding-inline-start: 1.1428571em; - } - :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - background-color: transparent; - border-width: 0; - border-radius: 0; - padding: 0; - font-weight: inherit; - color: inherit; - font-size: inherit; - font-family: inherit; - line-height: inherit; - } - :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: none; - } - :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: none; - } - :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - width: 100%; - table-layout: auto; - margin-top: 2em; - margin-bottom: 2em; - font-size: 0.875em; - line-height: 1.7142857; - } - :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-th-borders); - } - :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - vertical-align: bottom; - padding-inline-end: 0.5714286em; - padding-bottom: 0.5714286em; - padding-inline-start: 0.5714286em; - } - :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-td-borders); - } - :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 0; - } - :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - vertical-align: baseline; - } - :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-top-width: 1px; - border-top-color: var(--tw-prose-th-borders); - } - :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - vertical-align: top; - } - :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-align: start; - } - :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; - } - :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-captions); - font-size: 0.875em; - line-height: 1.4285714; - margin-top: 0.8571429em; - } - --tw-prose-body: oklch(0.373 0.034 259.733); - --tw-prose-headings: oklch(0.21 0.034 264.665); - --tw-prose-lead: oklch(0.446 0.03 256.802); - --tw-prose-links: oklch(0.21 0.034 264.665); - --tw-prose-bold: oklch(0.21 0.034 264.665); - --tw-prose-counters: oklch(0.551 0.027 264.364); - --tw-prose-bullets: oklch(0.872 0.01 258.338); - --tw-prose-hr: oklch(0.928 0.006 264.531); - --tw-prose-quotes: oklch(0.21 0.034 264.665); - --tw-prose-quote-borders: oklch(0.928 0.006 264.531); - --tw-prose-captions: oklch(0.551 0.027 264.364); - --tw-prose-kbd: oklch(0.21 0.034 264.665); - --tw-prose-kbd-shadows: NaN NaN NaN; - --tw-prose-code: oklch(0.21 0.034 264.665); - --tw-prose-pre-code: oklch(0.928 0.006 264.531); - --tw-prose-pre-bg: oklch(0.278 0.033 256.848); - --tw-prose-th-borders: oklch(0.872 0.01 258.338); - --tw-prose-td-borders: oklch(0.928 0.006 264.531); - --tw-prose-invert-body: oklch(0.872 0.01 258.338); - --tw-prose-invert-headings: #fff; - --tw-prose-invert-lead: oklch(0.707 0.022 261.325); - --tw-prose-invert-links: #fff; - --tw-prose-invert-bold: #fff; - --tw-prose-invert-counters: oklch(0.707 0.022 261.325); - --tw-prose-invert-bullets: oklch(0.446 0.03 256.802); - --tw-prose-invert-hr: oklch(0.373 0.034 259.733); - --tw-prose-invert-quotes: oklch(0.967 0.003 264.542); - --tw-prose-invert-quote-borders: oklch(0.373 0.034 259.733); - --tw-prose-invert-captions: oklch(0.707 0.022 261.325); - --tw-prose-invert-kbd: #fff; - --tw-prose-invert-kbd-shadows: 255 255 255; - --tw-prose-invert-code: #fff; - --tw-prose-invert-pre-code: oklch(0.872 0.01 258.338); - --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); - --tw-prose-invert-th-borders: oklch(0.446 0.03 256.802); - --tw-prose-invert-td-borders: oklch(0.373 0.034 259.733); - font-size: 1rem; - line-height: 1.75; - :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; - } - :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5em; - margin-bottom: 0.5em; - } - :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.375em; - } - :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.375em; - } - :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; - } - :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - } - :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; - } - :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - } - :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; - } - :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; - } - :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; - } - :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5em; - padding-inline-start: 1.625em; - } - :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; - } - :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; - } - :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-top: 0.5714286em; - padding-inline-end: 0.5714286em; - padding-bottom: 0.5714286em; - padding-inline-start: 0.5714286em; - } - :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; - } - :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; - } - :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; - } - :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 0; - } - } - .prose-sm { - font-size: 0.875rem; - line-height: 1.7142857; - :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.1428571em; - margin-bottom: 1.1428571em; - } - :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 1.2857143em; - line-height: 1.5555556; - margin-top: 0.8888889em; - margin-bottom: 0.8888889em; - } - :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.3333333em; - margin-bottom: 1.3333333em; - padding-inline-start: 1.1111111em; - } - :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 2.1428571em; - margin-top: 0; - margin-bottom: 0.8em; - line-height: 1.2; - } - :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 1.4285714em; - margin-top: 1.6em; - margin-bottom: 0.8em; - line-height: 1.4; - } - :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 1.2857143em; - margin-top: 1.5555556em; - margin-bottom: 0.4444444em; - line-height: 1.5555556; - } - :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.4285714em; - margin-bottom: 0.5714286em; - line-height: 1.4285714; - } - :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.7142857em; - margin-bottom: 1.7142857em; - } - :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.7142857em; - margin-bottom: 1.7142857em; - } - :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; - } - :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.7142857em; - margin-bottom: 1.7142857em; - } - :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.8571429em; - border-radius: 0.3125rem; - padding-top: 0.1428571em; - padding-inline-end: 0.3571429em; - padding-bottom: 0.1428571em; - padding-inline-start: 0.3571429em; - } - :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.8571429em; - } - :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.9em; - } - :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.8888889em; - } - :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.8571429em; - line-height: 1.6666667; - margin-top: 1.6666667em; - margin-bottom: 1.6666667em; - border-radius: 0.25rem; - padding-top: 0.6666667em; - padding-inline-end: 1em; - padding-bottom: 0.6666667em; - padding-inline-start: 1em; - } - :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.1428571em; - margin-bottom: 1.1428571em; - padding-inline-start: 1.5714286em; - } - :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.1428571em; - margin-bottom: 1.1428571em; - padding-inline-start: 1.5714286em; - } - :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.2857143em; - margin-bottom: 0.2857143em; - } - :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.4285714em; - } - :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.4285714em; - } - :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5714286em; - margin-bottom: 0.5714286em; - } - :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.1428571em; - } - :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.1428571em; - } - :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.1428571em; - } - :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.1428571em; - } - :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5714286em; - margin-bottom: 0.5714286em; - } - :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.1428571em; - margin-bottom: 1.1428571em; - } - :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.1428571em; - } - :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.2857143em; - padding-inline-start: 1.5714286em; - } - :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2.8571429em; - margin-bottom: 2.8571429em; - } - :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.8571429em; - line-height: 1.5; - } - :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 1em; - padding-bottom: 0.6666667em; - padding-inline-start: 1em; - } - :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; - } - :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; - } - :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-top: 0.6666667em; - padding-inline-end: 1em; - padding-bottom: 0.6666667em; - padding-inline-start: 1em; - } - :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; - } - :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; - } - :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.7142857em; - margin-bottom: 1.7142857em; - } - :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; - } - :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.8571429em; - line-height: 1.3333333; - margin-top: 0.6666667em; - } - :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 0; - } - } - .modal-action { - margin-top: calc(0.25rem * 6); - display: flex; - justify-content: flex-end; - gap: calc(0.25rem * 2); - } - .validator-hint { - margin-top: calc(0.25rem * 2); - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); - } - .mt-1 { - margin-top: calc(var(--spacing) * 1); - } - .mt-2 { - margin-top: calc(var(--spacing) * 2); - } - .mt-4 { - margin-top: calc(var(--spacing) * 4); - } - .mt-6 { - margin-top: calc(var(--spacing) * 6); - } - .mt-8 { - margin-top: calc(var(--spacing) * 8); - } - .mt-10 { - margin-top: calc(var(--spacing) * 10); - } - .mr-1 { - margin-right: calc(var(--spacing) * 1); - } - .fieldset-legend { - 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-2 { - margin-bottom: calc(var(--spacing) * 2); - } - .mb-6 { - margin-bottom: calc(var(--spacing) * 6); - } - .mb-8 { - margin-bottom: calc(var(--spacing) * 8); - } - .mb-10 { - margin-bottom: calc(var(--spacing) * 10); - } - .ml-1 { - margin-left: calc(var(--spacing) * 1); - } - .alert { - display: grid; - width: 100%; - 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 minmax(auto, 1fr); - text-align: start; - border: var(--border) solid var(--color-base-200); - font-size: 0.875rem; - line-height: 1.25rem; - background-size: calc(var(--noise) * 1000px); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); - 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, black 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), transparent ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); - &.alert-outline { - background-color: transparent; - color: var(--alert-color); - box-shadow: none; - background-image: none; - } - &.alert-dash { - background-color: transparent; - color: var(--alert-color); - border-style: dashed; - box-shadow: none; - background-image: none; - } - &.alert-soft { - color: var(--alert-color, var(--color-base-content)); - background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) ); - border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) ); - box-shadow: none; - background-image: none; - } - } - .badge { - display: inline-flex; - align-items: center; - justify-content: center; - gap: calc(0.25rem * 2); - border-radius: var(--radius-selector); - vertical-align: middle; - color: var(--color-base-content); - border: var(--border) solid var(--badge-color, var(--color-base-200)); - font-size: 0.875rem; - width: fit-content; - padding-inline: calc(0.25rem * 3 - var(--border)); - background-size: calc(var(--noise) * 1000px); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); - background-color: var(--badge-color, var(--color-base-100)); - --size: calc(var(--size-selector, 0.25rem) * 6); - height: var(--size); - &.badge-outline { - color: var(--badge-color, var(--color-base-content)); - border-color: currentColor; - background-color: transparent; - background-image: none; - box-shadow: none; - } - &.badge-dash { - color: var(--badge-color, var(--color-base-content)); - background-color: transparent; - border-style: dashed; - background-image: none; - box-shadow: none; - } - &.badge-soft { - color: var(--badge-color, var(--color-base-content)); - background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) ); - border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) ); - background-image: none; - box-shadow: none; - } - } - .status { - display: inline-block; - aspect-ratio: 1 / 1; - width: calc(0.25rem * 2); - height: calc(0.25rem * 2); - border-radius: var(--radius-selector); - background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); - background-position: center; - background-repeat: no-repeat; - vertical-align: middle; - color: color-mix(in oklab, var(--color-black) 30%, transparent); - background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), transparent ); - box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), transparent); - } - .footer { - display: grid; - width: 100%; - grid-auto-flow: row; - place-items: start; - column-gap: calc(0.25rem * 4); - row-gap: calc(0.25rem * 10); - font-size: 0.875rem; - line-height: 1.25rem; - & > * { - display: grid; - place-items: start; - gap: calc(0.25rem * 2); - } - &.footer-center { - grid-auto-flow: column dense; - place-items: center; - text-align: center; - & > * { - place-items: center; - } - } - } - .card-body { - display: flex; - flex: auto; - flex-direction: column; - gap: calc(0.25rem * 2); - padding: var(--card-p, 2rem); - font-size: var(--card-fs, 0.875rem); - :where(p) { - flex-grow: 1; - } - } - .hero-content { - display: flex; - max-width: 80rem; - align-items: center; - justify-content: center; - gap: calc(0.25rem * 4); - padding: calc(0.25rem * 4); - } - .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-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\! { - display: inline-flex !important; - align-items: stretch !important; - --join-ss: 0 !important; - --join-se: 0 !important; - --join-es: 0 !important; - --join-ee: 0 !important; - :where(.join-item) { - border-start-start-radius: var(--join-ss, 0) !important; - border-start-end-radius: var(--join-se, 0) !important; - border-end-start-radius: var(--join-es, 0) !important; - border-end-end-radius: var(--join-ee, 0) !important; - } - > .join-item:where(:first-child) { - --join-ss: var(--radius-field) !important; - --join-se: 0 !important; - --join-es: var(--radius-field) !important; - --join-ee: 0 !important; - } - :first-child:not(:last-child) { - :where(.join-item) { - --join-ss: var(--radius-field) !important; - --join-se: 0 !important; - --join-es: var(--radius-field) !important; - --join-ee: 0 !important; - } - } - > .join-item:where(:last-child) { - --join-ss: 0 !important; - --join-se: var(--radius-field) !important; - --join-es: 0 !important; - --join-ee: var(--radius-field) !important; - } - :last-child:not(:first-child) { - :where(.join-item) { - --join-ss: 0 !important; - --join-se: var(--radius-field) !important; - --join-es: 0 !important; - --join-ee: var(--radius-field) !important; - } - } - } - .stat { - 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 color-mix(in oklab, currentColor 10%, transparent); - border-block-end: none; - } - } - .card-title { - display: flex; - align-items: center; - gap: calc(0.25rem * 2); - font-size: var(--cardtitle-fs, 1.125rem); - font-weight: 600; - } - .fieldset { - display: grid; - gap: calc(0.25rem * 1.5); - padding-block: calc(0.25rem * 1); - font-size: 0.75rem; - grid-template-columns: 1fr; - } - .fieldset-label { - display: flex; - align-items: center; - gap: calc(0.25rem * 1.5); - color: color-mix(in oklab, var(--color-base-content) 60%, transparent); - &:is(label, a), &:has(input) { - cursor: pointer; - } - } - .label { - display: inline-flex; - align-items: center; - gap: calc(0.25rem * 1.5); - color: color-mix(in oklab, currentColor 60%, transparent); - &:has(input) { - cursor: pointer; - } - } - .navbar { - display: flex; - width: 100%; - align-items: center; - padding: 0.5rem; - min-height: 4rem; - } - .card-actions { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - gap: calc(0.25rem * 2); - } - .chat { - display: grid; - column-gap: calc(0.25rem * 3); - padding-block: calc(0.25rem * 1); - } - .block { - display: block; - } - .contents { - display: contents; - } - .flex { - display: flex; - } - .grid { - display: grid; - } - .hidden { - display: none; - } - .table { - display: table; - } - .btn-square { - padding-inline: calc(0.25rem * 0); - width: var(--size); - height: var(--size); - } - .size-5 { - width: calc(var(--spacing) * 5); - height: calc(var(--spacing) * 5); - } - .size-6 { - width: calc(var(--spacing) * 6); - height: calc(var(--spacing) * 6); - } - .size-10 { - width: calc(var(--spacing) * 10); - height: calc(var(--spacing) * 10); - } - .h-3 { - height: calc(var(--spacing) * 3); - } - .h-5 { - height: calc(var(--spacing) * 5); - } - .h-24 { - height: calc(var(--spacing) * 24); - } - .h-32 { - height: calc(var(--spacing) * 32); - } - .h-\[calc\(100vh-65px\)\] { - height: calc(100vh - 65px); - } - .h-\[calc\(100vh-175px\)\] { - height: calc(100vh - 175px); - } - .min-h-\[100dvh\] { - min-height: 100dvh; - } - .min-h-screen { - min-height: 100vh; - } - .loading-sm { - width: calc(var(--size-selector, 0.25rem) * 5); - } - .w-3 { - width: calc(var(--spacing) * 3); - } - .w-5 { - width: calc(var(--spacing) * 5); - } - .w-32 { - width: calc(var(--spacing) * 32); - } - .w-72 { - width: calc(var(--spacing) * 72); - } - .w-full { - width: 100%; - } - .\!max-w-none { - max-width: none !important; - } - .max-w-\(--breakpoint-sm\) { - max-width: var(--breakpoint-sm); - } - .max-w-3xl { - max-width: var(--container-3xl); - } - .max-w-\[20ch\] { - max-width: 20ch; - } - .max-w-\[90\%\] { - max-width: 90%; - } - .max-w-\[160px\] { - max-width: 160px; - } - .max-w-full { - max-width: 100%; - } - .max-w-xs { - max-width: var(--container-xs); - } - .min-w-72 { - min-width: calc(var(--spacing) * 72); - } - .flex-1 { - flex: 1; - } - .flex-shrink-0 { - flex-shrink: 0; - } - .flex-grow { - flex-grow: 1; - } - .grow { - flex-grow: 1; - } - .scale-75 { - --tw-scale-x: 75%; - --tw-scale-y: 75%; - --tw-scale-z: 75%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - .rotate-180 { - rotate: 180deg; - } - .swap-rotate { - .swap-on, .swap-indeterminate, input:indeterminate ~ .swap-on { - rotate: 45deg; - } - input:checked, input:indeterminate { - & ~ .swap-on { - rotate: 0deg; - } - & ~ .swap-off { - rotate: calc(45deg * -1); - } - } - &:where(.swap-active) { - & ~ .swap-on { - rotate: 0deg; - } - .swap-off { - rotate: calc(45deg * -1); - } - } - } - .skeleton { - border-radius: var(--radius-box); - background-color: var(--color-base-300); - @media (prefers-reduced-motion: reduce) { - transition-duration: 15s; - } - will-change: background-position; - animation: skeleton 1.8s ease-in-out infinite; - background-image: linear-gradient( 105deg, transparent 0% 40%, var(--color-base-100) 50%, transparent 60% 100% ); - background-size: 200% auto; - background-repeat: no-repeat; - background-position-x: -50%; - } - .animate-pulse { - animation: var(--animate-pulse); - } - .link { - cursor: pointer; - text-decoration-line: underline; - &:focus { - outline: 2px solid transparent; - outline-offset: 2px; - } - &:focus-visible { - outline: 2px solid currentColor; - outline-offset: 2px; - } - } - .cursor-pointer { - cursor: pointer; - } - .resize { - resize: both; - } - .resize-none { - resize: none; - } - .stats-vertical { - grid-auto-flow: row; - overflow-y: auto; - .stat:not(:last-child) { - border-inline-end: none; - border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, transparent); - } - } - .grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - .flex-col { - flex-direction: column; - } - .flex-wrap { - flex-wrap: wrap; - } - .items-center { - align-items: center; - } - .justify-between { - justify-content: space-between; - } - .justify-center { - justify-content: center; - } - .justify-end { - justify-content: flex-end; - } - .justify-start { - justify-content: flex-start; - } - .gap-1 { - gap: calc(var(--spacing) * 1); - } - .gap-2 { - gap: calc(var(--spacing) * 2); - } - .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-y-4 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); - } - } - .space-y-6 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); - } - } - .space-y-8 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))); - } - } - .space-x-2 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); - } - } - .space-x-4 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); - } - } - .truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .overflow-auto { - overflow: auto; - } - .overflow-clip { - overflow: clip; - } - .overflow-hidden { - overflow: hidden; - } - .overflow-x-auto { - overflow-x: auto; - } - .overflow-y-auto { - overflow-y: auto; - } - .rounded-2xl { - border-radius: var(--radius-2xl); - } - .rounded-box { - border-radius: var(--radius-box); - } - .rounded-box { - border-radius: var(--radius-box); - } - .rounded-full { - border-radius: calc(infinity * 1px); - } - .rounded-lg { - border-radius: var(--radius-lg); - } - .rounded-md { - border-radius: var(--radius-md); - } - .rounded-t-none { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - .rounded-b-none { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } - .border { - border-style: var(--tw-border-style); - border-width: 1px; - } - .textarea-ghost { - background-color: transparent; - box-shadow: none; - border-color: transparent; - &:focus, &:focus-within { - background-color: var(--color-base-100); - color: var(--color-base-content); - border-color: transparent; - box-shadow: none; - } - } - .alert-success { - border-color: var(--color-success); - color: var(--color-success-content); - --alert-color: var(--color-success); - } - .border-base-content\/5 { - border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); - } - .border-neutral-700 { - border-color: var(--color-neutral-700); - } - .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-neutral-800 { - background-color: var(--color-neutral-800); - } - .bg-secondary { - background-color: var(--color-secondary); - } - .bg-white { - background-color: var(--color-white); - } - .bg-linear-to-r { - --tw-gradient-position: to right in oklab,; - background-image: linear-gradient(var(--tw-gradient-stops)); - } - .from-primary { - --tw-gradient-from: var(--color-primary); - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - .to-secondary { - --tw-gradient-to: var(--color-secondary); - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - .bg-clip-text { - background-clip: text; - } - .fill-current { - fill: currentColor; - } - .\!p-0 { - padding: calc(var(--spacing) * 0) !important; - } - .p-0 { - padding: calc(var(--spacing) * 0); - } - .p-0\.5 { - padding: calc(var(--spacing) * 0.5); - } - .p-2 { - padding: calc(var(--spacing) * 2); - } - .p-3 { - padding: calc(var(--spacing) * 3); - } - .p-4 { - padding: calc(var(--spacing) * 4); - } - .badge-xs { - --size: calc(var(--size-selector, 0.25rem) * 4); - font-size: 0.625rem; - padding-inline: calc(0.25rem * 2 - var(--border)); - } - .container { - padding-inline: 10px; - @media (width >= 40rem) { - padding-inline: 2rem; - } - @media (width >= 64rem) { - padding-inline: 4rem; - } - @media (width >= 80rem) { - padding-inline: 5rem; - } - @media (width >= 96rem) { - padding-inline: 6rem; - } - } - .px-1 { - padding-inline: calc(var(--spacing) * 1); - } - .px-4 { - padding-inline: calc(var(--spacing) * 4); - } - .py-4 { - padding-block: calc(var(--spacing) * 4); - } - .pt-10 { - padding-top: calc(var(--spacing) * 10); - } - .pr-3 { - padding-right: calc(var(--spacing) * 3); - } - .pr-8 { - padding-right: calc(var(--spacing) * 8); - } - .pr-12 { - padding-right: calc(var(--spacing) * 12); - } - .pb-0 { - padding-bottom: calc(var(--spacing) * 0); - } - .pb-10 { - padding-bottom: calc(var(--spacing) * 10); - } - .pl-3 { - padding-left: calc(var(--spacing) * 3); - } - .text-center { - text-align: center; - } - .text-left { - text-align: left; - } - .font-satoshi { - font-family: Satoshi, sans-serif; - } - .text-2xl { - font-size: var(--text-2xl); - line-height: var(--tw-leading, var(--text-2xl--line-height)); - } - .text-3xl { - font-size: var(--text-3xl); - line-height: var(--tw-leading, var(--text-3xl--line-height)); - } - .text-4xl { - font-size: var(--text-4xl); - line-height: var(--tw-leading, var(--text-4xl--line-height)); - } - .text-5xl { - font-size: var(--text-5xl); - line-height: var(--tw-leading, var(--text-5xl--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)); - } - .btn-lg { - font-size: 1.125rem; - --btn-p: 1.25rem; - --size: calc(var(--size-field, 0.25rem) * 12); - } - .btn-sm { - font-size: 0.75rem; - --btn-p: 0.75rem; - --size: calc(var(--size-field, 0.25rem) * 8); - } - .font-bold { - --tw-font-weight: var(--font-weight-bold); - font-weight: var(--font-weight-bold); - } - .font-extrabold { - --tw-font-weight: var(--font-weight-extrabold); - font-weight: var(--font-weight-extrabold); - } - .font-light { - --tw-font-weight: var(--font-weight-light); - font-weight: var(--font-weight-light); - } - .font-semibold { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - .tracking-wide { - --tw-tracking: var(--tracking-wide); - letter-spacing: var(--tracking-wide); - } - .break-words { - overflow-wrap: break-word; - } - .whitespace-pre-wrap { - white-space: pre-wrap; - } - .badge-neutral { - --badge-color: var(--color-neutral); - color: var(--color-neutral-content); - } - .badge-primary { - --badge-color: var(--color-primary); - color: var(--color-primary-content); - } - .link-primary { - color: var(--color-primary); - &:hover { - color: color-mix(in oklab, var(--color-primary) 80%, black); - } - } - .text-accent { - color: var(--color-accent); - } - .text-accent-content { - color: var(--color-accent-content); - } - .text-base-content { - color: var(--color-base-content); - } - .text-base-content\/60 { - color: color-mix(in oklab, var(--color-base-content) 60%, transparent); - } - .text-blue-500 { - color: var(--color-blue-500); - } - .text-error { - color: var(--color-error); - } - .text-gray-500 { - color: var(--color-gray-500); - } - .text-primary { - color: var(--color-primary); - } - .text-primary-content { - color: var(--color-primary-content); - } - .text-secondary { - color: var(--color-secondary); - } - .text-secondary-content { - color: var(--color-secondary-content); - } - .text-transparent { - color: transparent; - } - .text-white { - color: var(--color-white); - } - .lowercase { - text-transform: lowercase; - } - .uppercase { - text-transform: uppercase; - } - .opacity-50 { - opacity: 50%; - } - .opacity-60 { - opacity: 60%; - } - .opacity-70 { - opacity: 70%; - } - .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); - } - .shadow-md { - --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - 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 { - &:not(.btn-active, :hover, :active:focus, :focus-visible) { - --btn-shadow: ""; - --btn-bg: transparent; - --btn-border: transparent; - --btn-noise: none; - &:not(:disabled, [disabled], .btn-disabled) { - outline-color: currentColor; - --btn-fg: currentColor; - } - } - } - .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,); - } - .transition { - transition-property: color, background-color, border-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; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - .transition-transform { - transition-property: transform, translate, scale, rotate; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - .ease-in { - --tw-ease: var(--ease-in); - transition-timing-function: var(--ease-in); - } - .btn-accent { - --btn-color: var(--color-accent); - --btn-fg: var(--color-accent-content); - } - .btn-error { - --btn-color: var(--color-error); - --btn-fg: var(--color-error-content); - } - .btn-outline { - &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) { - --btn-shadow: ""; - --btn-bg: transparent; - --btn-fg: var(--btn-color); - --btn-border: var(--btn-color); - --btn-noise: none; - } - } - .btn-primary { - --btn-color: var(--color-primary); - --btn-fg: var(--color-primary-content); - } - .btn-secondary { - --btn-color: var(--color-secondary); - --btn-fg: var(--color-secondary-content); - } - .loading-dots { - mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E"); - } - .prose { - :root & { - --tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, transparent); - --tw-prose-headings: var(--color-base-content); - --tw-prose-lead: var(--color-base-content); - --tw-prose-links: var(--color-base-content); - --tw-prose-bold: var(--color-base-content); - --tw-prose-counters: var(--color-base-content); - --tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, transparent); - --tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, transparent); - --tw-prose-quotes: var(--color-base-content); - --tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, transparent); - --tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, transparent); - --tw-prose-code: var(--color-base-content); - --tw-prose-pre-code: var(--color-neutral-content); - --tw-prose-pre-bg: var(--color-neutral); - --tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, transparent); - --tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, transparent); - } - } - .hover\:text-blue-700 { - &:hover { - @media (hover: hover) { - color: var(--color-blue-700); - } - } - } - .hover\:text-gray-700 { - &:hover { - @media (hover: hover) { - color: var(--color-gray-700); - } - } - } - .hover\:underline { - &:hover { - @media (hover: hover) { - text-decoration-line: underline; - } - } - } - .focus\:outline-none { - &:focus { - --tw-outline-style: none; - outline-style: none; - } - } - .sm\:mt-4 { - @media (width >= 40rem) { - margin-top: calc(var(--spacing) * 4); - } - } - .sm\:max-w-md { - @media (width >= 40rem) { - max-width: var(--container-md); - } - } - .sm\:grid-cols-2 { - @media (width >= 40rem) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - .sm\:flex-row { - @media (width >= 40rem) { - flex-direction: row; - } - } - .sm\:rounded-b-2xl { - @media (width >= 40rem) { - border-bottom-right-radius: var(--radius-2xl); - border-bottom-left-radius: var(--radius-2xl); - } - } - .sm\:px-0 { - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 0); - } - } - .sm\:pb-4 { - @media (width >= 40rem) { - padding-bottom: calc(var(--spacing) * 4); - } - } - .sm\:text-6xl { - @media (width >= 40rem) { - font-size: var(--text-6xl); - line-height: var(--tw-leading, var(--text-6xl--line-height)); - } - } - .md\:prose-base { - @media (width >= 48rem) { - font-size: 1rem; - line-height: 1.75; - :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; - } - :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 1.25em; - line-height: 1.6; - margin-top: 1.2em; - margin-bottom: 1.2em; - } - :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.6em; - margin-bottom: 1.6em; - padding-inline-start: 1em; - } - :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 2.25em; - margin-top: 0; - margin-bottom: 0.8888889em; - line-height: 1.1111111; - } - :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 1.5em; - margin-top: 2em; - margin-bottom: 1em; - line-height: 1.3333333; - } - :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 1.25em; - margin-top: 1.6em; - margin-bottom: 0.6em; - line-height: 1.6; - } - :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.5em; - margin-bottom: 0.5em; - line-height: 1.5; - } - :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; - } - :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; - } - :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; - } - :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; - } - :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.875em; - border-radius: 0.3125rem; - padding-top: 0.1875em; - padding-inline-end: 0.375em; - padding-bottom: 0.1875em; - padding-inline-start: 0.375em; - } - :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.875em; - } - :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.875em; - } - :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.9em; - } - :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.875em; - line-height: 1.7142857; - margin-top: 1.7142857em; - margin-bottom: 1.7142857em; - border-radius: 0.375rem; - padding-top: 0.8571429em; - padding-inline-end: 1.1428571em; - padding-bottom: 0.8571429em; - padding-inline-start: 1.1428571em; - } - :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-inline-start: 1.625em; - } - :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-inline-start: 1.625em; - } - :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5em; - margin-bottom: 0.5em; - } - :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.375em; - } - :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.375em; - } - :where(.prose-base > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; - } - :where(.prose-base > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - } - :where(.prose-base > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; - } - :where(.prose-base > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - } - :where(.prose-base > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; - } - :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; - } - :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; - } - :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - } - :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5em; - padding-inline-start: 1.625em; - } - :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 3em; - margin-bottom: 3em; - } - :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.875em; - line-height: 1.7142857; - } - :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0.5714286em; - padding-bottom: 0.5714286em; - padding-inline-start: 0.5714286em; - } - :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; - } - :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; - } - :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-top: 0.5714286em; - padding-inline-end: 0.5714286em; - padding-bottom: 0.5714286em; - padding-inline-start: 0.5714286em; - } - :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; - } - :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; - } - :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; - } - :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; - } - :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: 0.875em; - line-height: 1.4285714; - margin-top: 0.8571429em; - } - :where(.prose-base > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(.prose-base > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 0; - } - } - } - .md\:grid-cols-2 { - @media (width >= 48rem) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - .md\:grid-cols-3 { - @media (width >= 48rem) { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - } - .lg\:stats-horizontal { - @media (width >= 64rem) { - grid-auto-flow: column; - overflow-x: auto; - .stat:not(:last-child) { - border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, transparent); - border-block-end: none; - } - } - } - .lg\:grid-cols-3 { - @media (width >= 64rem) { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - } - .lg\:grid-cols-\[auto_1fr\] { - @media (width >= 64rem) { - grid-template-columns: auto 1fr; - } - } - .xl\:drawer-open { - @media (width >= 80rem) { - > .drawer-side { - overflow-y: auto; - } - > .drawer-toggle { - display: none; - & ~ .drawer-side { - pointer-events: auto; - visibility: visible; - position: sticky; - display: block; - width: auto; - overscroll-behavior: auto; - opacity: 100%; - & > .drawer-overlay { - cursor: default; - background-color: transparent; - } - & > *:not(.drawer-overlay) { - translate: 0%; - [dir="rtl"] & { - translate: 0%; - } - } - } - &:checked ~ .drawer-side { - pointer-events: auto; - visibility: visible; - } - } - } - } - .xl\:hidden { - @media (width >= 80rem) { - display: none; - } - } - .prose-h1\:mb-2 { - & :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) { - margin-bottom: calc(var(--spacing) * 2); - } - } - .prose-h2\:my-2 { - & :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) { - margin-block: calc(var(--spacing) * 2); - } - } - .prose-p\:my-2 { - & :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) { - margin-block: calc(var(--spacing) * 2); - } - } - .prose-pre\:my-2 { - & :is(:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *))) { - margin-block: calc(var(--spacing) * 2); - } - } - .prose-ul\:my-2 { - & :is(:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *))) { - margin-block: calc(var(--spacing) * 2); - } - } - .\[\&\:before\]\:opacity-60 { - &:before { - opacity: 60%; - } - } - .\[\&\:before\]\:content-\[\'Content\:_\'\] { - &:before { - --tw-content: 'Content: '; - content: var(--tw-content); - } - } - .\[\&\:before\]\:content-\[\'Instructions\:_\'\] { - &:before { - --tw-content: 'Instructions: '; - content: var(--tw-content); - } - } - .\[\&\:before\]\:content-\[\'Status\:_\'\] { - &:before { - --tw-content: 'Status: '; - content: var(--tw-content); - } - } -} -@view-transition { - navigation: auto; -} -@layer base { - body { - font-family: Satoshi, sans-serif; - } - html { - scrollbar-gutter: stable; - } - *, ::after, ::before, ::backdrop, ::file-selector-button { - border-color: var(--color-gray-200, currentColor); - } -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-Light.woff2') format('woff2'), url('fonts/Satoshi-Light.woff') format('woff'), url('fonts/Satoshi-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-LightItalic.woff2') format('woff2'), url('fonts/Satoshi-LightItalic.woff') format('woff'), url('fonts/Satoshi-LightItalic.ttf') format('truetype'); - font-weight: 300; - font-style: italic; - font-display: swap; -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-Regular.woff2') format('woff2'), url('fonts/Satoshi-Regular.woff') format('woff'), url('fonts/Satoshi-Regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-Italic.woff2') format('woff2'), url('fonts/Satoshi-Italic.woff') format('woff'), url('fonts/Satoshi-Italic.ttf') format('truetype'); - font-weight: 400; - font-style: italic; - font-display: swap; -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-Medium.woff2') format('woff2'), url('fonts/Satoshi-Medium.woff') format('woff'), url('fonts/Satoshi-Medium.ttf') format('truetype'); - font-weight: 500; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-MediumItalic.woff2') format('woff2'), url('fonts/Satoshi-MediumItalic.woff') format('woff'), url('fonts/Satoshi-MediumItalic.ttf') format('truetype'); - font-weight: 500; - font-style: italic; - font-display: swap; -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-Bold.woff2') format('woff2'), url('fonts/Satoshi-Bold.woff') format('woff'), url('fonts/Satoshi-Bold.ttf') format('truetype'); - font-weight: 700; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-BoldItalic.woff2') format('woff2'), url('fonts/Satoshi-BoldItalic.woff') format('woff'), url('fonts/Satoshi-BoldItalic.ttf') format('truetype'); - font-weight: 700; - font-style: italic; - font-display: swap; -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-Black.woff2') format('woff2'), url('fonts/Satoshi-Black.woff') format('woff'), url('fonts/Satoshi-Black.ttf') format('truetype'); - font-weight: 900; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-BlackItalic.woff2') format('woff2'), url('fonts/Satoshi-BlackItalic.woff') format('woff'), url('fonts/Satoshi-BlackItalic.ttf') format('truetype'); - font-weight: 900; - font-style: italic; - font-display: swap; -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-Variable.woff2') format('woff2'), url('fonts/Satoshi-Variable.woff') format('woff'), url('fonts/Satoshi-Variable.ttf') format('truetype'); - font-weight: 300 900; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'Satoshi'; - src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2'), url('fonts/Satoshi-VariableItalic.woff') format('woff'), url('fonts/Satoshi-VariableItalic.ttf') format('truetype'); - font-weight: 300 900; - font-style: italic; - font-display: swap; -} -@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 { - 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, -[data-theme] { - background-color: var(--root-bg, var(--color-base-100)); - color: var(--color-base-content); - } -} -@layer base { - *, -::after, -::backdrop, -::before, -::file-selector-button { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0 solid; - } - :host, -html { - line-height: 1.5; - font-family: var( - --default-font-family, - ui-sans-serif, - system-ui, - sans-serif, - "Apple Color Emoji", - "Segoe UI Emoji", - "Segoe UI Symbol", - "Noto Color Emoji" - ); - webkit-tap-highlight-color: transparent; - } - body { - line-height: inherit; - } - hr { - height: 0; - color: inherit; - border-top-width: 1px; - } - h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; - } - a { - color: inherit; - webkit-text-decoration: inherit; - text-decoration: inherit; - } - table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; - } - ::file-selector-button, -button, -input, -optgroup, -select, -textarea { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - background: 0 0; - } - input:where(:not([type="button"], [type="reset"], [type="submit"])), -select, -textarea { - border-width: 1px; - } - ::file-selector-button, -button, -input:where([type="button"], [type="reset"], [type="submit"]) { - appearance: button; - } - :-moz-focusring { - outline: auto; - } - :-moz-ui-invalid { - box-shadow: none; - } - ::-webkit-search-decoration { - webkit-appearance: none; - } - menu, -ol, -ul { - list-style: none; - } - textarea { - resize: vertical; - } - ::placeholder { - opacity: 1; - color: color-mix(in oklch, currentColor 50%, transparent); - } - audio, -canvas, -embed, -iframe, -img, -object, -svg, -video { - display: block; - vertical-align: middle; - } - img, -video { - max-width: 100%; - height: auto; - } -} -@layer base { - :where( - :root:has( - .modal-open, - .modal[open], - .modal:target, - .modal-toggle:checked, - .drawer:not(.drawer-open) > .drawer-toggle:checked - ) -) { - scrollbar-gutter: stable; - background-image: linear-gradient(var(--color-base-100), var(--color-base-100)); - --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%); - } -} -@layer base { - @property --radialprogress { - syntax: ""; - inherits: true; - initial-value: 0%; - } -} -@layer base { - :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) { - overflow: hidden; - } -} -@keyframes dropdown { - 0% { - opacity: 0; - } -} -@keyframes rating { - 0%, 40% { - scale: 1.1; - filter: brightness(1.05) contrast(1.05); - } -} -@keyframes radio { - 0% { - padding: 5px; - } - 50% { - padding: 3px; - } -} -@keyframes progress { - 50% { - background-position-x: -115%; - } -} -@keyframes skeleton { - 0% { - background-position: 150%; - } - 100% { - background-position: -50%; - } -} -@keyframes toast { - 0% { - scale: 0.9; - opacity: 0; - } - 100% { - scale: 1; - opacity: 1; - } -} -@supports (-moz-orient: inline) { - @layer base { - *, ::before, ::after, ::backdrop { - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - --tw-space-y-reverse: 0; - --tw-space-x-reverse: 0; - --tw-border-style: solid; - --tw-gradient-position: initial; - --tw-gradient-from: #0000; - --tw-gradient-via: #0000; - --tw-gradient-to: #0000; - --tw-gradient-stops: initial; - --tw-gradient-via-stops: initial; - --tw-gradient-from-position: 0%; - --tw-gradient-via-position: 50%; - --tw-gradient-to-position: 100%; - --tw-font-weight: initial; - --tw-tracking: initial; - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --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; - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-ease: initial; - --tw-content: ""; - } - } -} -@keyframes spin { - to { - transform: rotate(360deg); - } -} -@keyframes ping { - 75%, 100% { - transform: scale(2); - opacity: 0; - } -} -@keyframes pulse { - 50% { - opacity: 0.5; - } -} -@keyframes bounce { - 0%, 100% { - transform: translateY(-25%); - animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - } - 50% { - transform: none; - animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - } -} -@property --tw-scale-x { - syntax: "*"; - inherits: false; - initial-value: 1; -} -@property --tw-scale-y { - syntax: "*"; - inherits: false; - initial-value: 1; -} -@property --tw-scale-z { - syntax: "*"; - inherits: false; - initial-value: 1; -} -@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-gradient-position { - syntax: "*"; - inherits: false; -} -@property --tw-gradient-from { - syntax: ""; - inherits: false; - initial-value: #0000; -} -@property --tw-gradient-via { - syntax: ""; - inherits: false; - initial-value: #0000; -} -@property --tw-gradient-to { - syntax: ""; - inherits: false; - initial-value: #0000; -} -@property --tw-gradient-stops { - syntax: "*"; - inherits: false; -} -@property --tw-gradient-via-stops { - syntax: "*"; - inherits: false; -} -@property --tw-gradient-from-position { - syntax: ""; - inherits: false; - initial-value: 0%; -} -@property --tw-gradient-via-position { - syntax: ""; - inherits: false; - initial-value: 50%; -} -@property --tw-gradient-to-position { - syntax: ""; - inherits: false; - initial-value: 100%; -} -@property --tw-font-weight { - syntax: "*"; - inherits: false; -} -@property --tw-tracking { - syntax: "*"; - inherits: false; -} -@property --tw-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-shadow-color { - syntax: "*"; - inherits: false; -} -@property --tw-inset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-inset-shadow-color { - syntax: "*"; - inherits: false; -} -@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-blur { - syntax: "*"; - inherits: false; -} -@property --tw-brightness { - 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-ease { - syntax: "*"; - inherits: false; -} -@property --tw-content { - syntax: "*"; - inherits: false; - initial-value: ""; -} diff --git a/templates/chat/drawer.html b/templates/chat/drawer.html index 5f58e8e..6388701 100644 --- a/templates/chat/drawer.html +++ b/templates/chat/drawer.html @@ -1,4 +1,4 @@ -
+