From 996c0107c9ced5f53b8f21423948d6f32c245ab0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= Date: Tue, 17 Feb 2026 22:14:16 +0100 Subject: [PATCH] Housekeeping * Updated flowbite to 4.x * Start revamping styles * Remove unused GraphQL code * Make some templates more robuts --- common/input.css | 108 +- games/graphql/types.py | 11 +- games/models.py | 4 + games/schema.py | 2 - games/static/base.css | 2382 ++++++++++++++--- games/templates/add_game.html | 6 +- games/templates/add_purchase.html | 6 +- games/templates/add_session.html | 54 +- games/templates/cotton/button.html | 9 +- games/templates/cotton/button_group.html | 2 +- .../cotton/button_group_button_sm.html | 2 + games/templates/cotton/layouts/add.html | 8 +- games/templates/cotton/layouts/base.html | 5 +- games/templates/cotton/modal.html | 17 + games/templates/cotton/search_field.html | 17 +- games/templates/navbar.html | 2 +- games/views/purchase.py | 31 +- games/views/session.py | 4 +- package.json | 2 +- 19 files changed, 2191 insertions(+), 481 deletions(-) create mode 100644 games/templates/cotton/modal.html diff --git a/common/input.css b/common/input.css index c0b8b61..cc84747 100644 --- a/common/input.css +++ b/common/input.css @@ -4,7 +4,8 @@ @plugin '@tailwindcss/forms'; @plugin 'flowbite/plugin'; -@source '../node_modules/flowbite/**/*.js'; +@source "../node_modules/flowbite"; +@import "flowbite/src/themes/default"; @custom-variant dark (&:is(.dark *)); @@ -25,6 +26,7 @@ --color-background: #1f2937; } + /* The default border color has changed to `currentcolor` in Tailwind CSS v4, so we've added these compatibility styles to make sure everything still @@ -103,16 +105,6 @@ font-style: normal; } - /* a:hover { - text-decoration-color: #ff4400; - color: rgb(254, 185, 160); - transition: all 0.2s ease-out; -} */ - - /* form label { - @apply dark:text-slate-400; -} */ - .responsive-table { @apply dark:text-white mx-auto table-fixed; } @@ -135,38 +127,17 @@ } } -/* form input, -select, -textarea { - @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100; -} */ - form input:disabled, select:disabled, textarea:disabled { - @apply dark:bg-slate-800 dark:text-slate-500 cursor-not-allowed; + @apply cursor-not-allowed bg-neutral-secondary-strong text-fg-disabled; + } .errorlist { @apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px]; } -/* @media screen and (min-width: 768px) { - form input, - select, - textarea { - width: 300px; - } -} */ - -/* @media screen and (max-width: 768px) { - form input, - select, - textarea { - width: 150px; - } -} */ - #button-container button { @apply mx-1; } @@ -207,34 +178,43 @@ textarea:disabled { padding-left: 1em; } -/* .truncate-container { - @apply inline-block relative; - a { - @apply inline-block truncate max-w-20char transition-all group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4; - - } -} */ - -label { - @apply dark:text-slate-500; -} - -[type="text"], [type="password"], [type="datetime-local"], [type="datetime"], [type="date"], [type="number"], select, textarea { - @apply dark:bg-slate-600 dark:text-slate-300; -} - -[type="submit"] { - @apply dark:text-white font-bold dark:bg-blue-600 px-4 py-2; -} - -form div label { - @apply dark:text-white; -} - -form div { - @apply flex flex-col; -} - -div [type="submit"] { - @apply mt-3; +#add-form { + .form-row-button-group { + display: flex; + flex-direction: row; + @apply gap-0 p-0; + button { + @apply mr-0; + &:first-child { + @apply rounded-e-none; + } + &:nth-child(2) { + @apply rounded-none; + } + &:last-child { + @apply rounded-s-none; + } + } + } + label { + @apply mb-2.5 text-sm font-medium text-heading; + } + input:not([type="checkbox"]) { + @apply mb-3 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body; + } + input[type="checkbox"] { + @apply w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft; + } + select { + @apply w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body; + } + textarea { + @apply bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body; + } + :has(> label + input[type="checkbox"]) { + @apply mb-3 mt-6; + display: flex; + flex-direction: row; + justify-content: space-between; + } } diff --git a/games/graphql/types.py b/games/graphql/types.py index 4d2de17..1f41968 100644 --- a/games/graphql/types.py +++ b/games/graphql/types.py @@ -1,7 +1,8 @@ from graphene_django import DjangoObjectType from games.models import Device as DeviceModel -from games.models import Edition as EditionModel + +# from games.models import Edition as EditionModel from games.models import Game as GameModel from games.models import Platform as PlatformModel from games.models import Purchase as PurchaseModel @@ -14,10 +15,10 @@ class Game(DjangoObjectType): fields = "__all__" -class Edition(DjangoObjectType): - class Meta: - model = EditionModel - fields = "__all__" +# class Edition(DjangoObjectType): +# class Meta: +# model = EditionModel +# fields = "__all__" class Purchase(DjangoObjectType): diff --git a/games/models.py b/games/models.py index 34f6f6a..00c4a68 100644 --- a/games/models.py +++ b/games/models.py @@ -232,6 +232,10 @@ class Purchase(models.Model): or self.price_currency != purchase_to_compare.price_currency ) + def refund(self): + self.date_refunded = timezone.now() + self.save() + def save(self, *args, **kwargs): if self.type != Purchase.GAME and not self.related_purchase: raise ValidationError( diff --git a/games/schema.py b/games/schema.py index 96d2239..4549ed1 100644 --- a/games/schema.py +++ b/games/schema.py @@ -3,7 +3,6 @@ import graphene from games.graphql.mutations import GameMutation from games.graphql.queries import ( DeviceQuery, - EditionQuery, GameQuery, PlatformQuery, PurchaseQuery, @@ -13,7 +12,6 @@ from games.graphql.queries import ( class Query( GameQuery, - EditionQuery, DeviceQuery, PlatformQuery, PurchaseQuery, diff --git a/games/static/base.css b/games/static/base.css index d0ebaac..cf9d23a 100644 --- a/games/static/base.css +++ b/games/static/base.css @@ -8,19 +8,205 @@ --font-serif: IBM Plex Serif, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; --font-mono: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --color-red-50: oklch(97.1% 0.013 17.38); + --color-red-100: oklch(93.6% 0.032 17.717); + --color-red-200: oklch(88.5% 0.062 18.334); + --color-red-300: oklch(80.8% 0.114 19.571); + --color-red-400: oklch(70.4% 0.191 22.216); + --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-600: oklch(57.7% 0.245 27.325); + --color-red-700: oklch(50.5% 0.213 27.518); + --color-red-800: oklch(44.4% 0.177 26.899); + --color-red-900: oklch(39.6% 0.141 25.723); + --color-red-950: oklch(25.8% 0.092 26.042); + --color-orange-50: oklch(98% 0.016 73.684); + --color-orange-100: oklch(95.4% 0.038 75.164); + --color-orange-200: oklch(90.1% 0.076 70.697); + --color-orange-300: oklch(83.7% 0.128 66.29); + --color-orange-400: oklch(75% 0.183 55.934); + --color-orange-500: oklch(70.5% 0.213 47.604); + --color-orange-600: oklch(64.6% 0.222 41.116); + --color-orange-700: oklch(55.3% 0.195 38.402); + --color-orange-800: oklch(47% 0.157 37.304); + --color-orange-900: oklch(40.8% 0.123 38.172); + --color-orange-950: oklch(26.6% 0.079 36.259); + --color-yellow-50: oklch(98.7% 0.026 102.212); + --color-yellow-100: oklch(97.3% 0.071 103.193); + --color-yellow-200: oklch(94.5% 0.129 101.54); + --color-yellow-300: oklch(90.5% 0.182 98.111); + --color-yellow-400: oklch(85.2% 0.199 91.936); + --color-yellow-500: oklch(79.5% 0.184 86.047); + --color-yellow-600: oklch(68.1% 0.162 75.834); + --color-yellow-700: oklch(55.4% 0.135 66.442); + --color-yellow-800: oklch(47.6% 0.114 61.907); + --color-yellow-900: oklch(42.1% 0.095 57.708); + --color-lime-200: oklch(93.8% 0.127 124.321); + --color-lime-300: oklch(89.7% 0.196 126.665); + --color-lime-400: oklch(84.1% 0.238 128.85); + --color-lime-500: oklch(76.8% 0.233 130.85); + --color-lime-600: oklch(64.8% 0.2 131.684); + --color-lime-800: oklch(45.3% 0.124 130.933); + --color-green-50: oklch(98.2% 0.018 155.826); + --color-green-100: oklch(96.2% 0.044 156.743); + --color-green-200: oklch(92.5% 0.084 155.995); + --color-green-300: oklch(87.1% 0.15 154.449); + --color-green-400: oklch(79.2% 0.209 151.711); + --color-green-500: oklch(72.3% 0.219 149.579); + --color-green-600: oklch(62.7% 0.194 149.214); + --color-green-700: oklch(52.7% 0.154 150.069); + --color-green-800: oklch(44.8% 0.119 151.328); + --color-green-900: oklch(39.3% 0.095 152.535); + --color-green-950: oklch(26.6% 0.065 152.934); + --color-emerald-50: oklch(97.9% 0.021 166.113); + --color-emerald-100: oklch(95% 0.052 163.051); + --color-emerald-200: oklch(90.5% 0.093 164.15); + --color-emerald-300: oklch(84.5% 0.143 164.978); + --color-emerald-600: oklch(59.6% 0.145 163.225); + --color-emerald-700: oklch(50.8% 0.118 165.612); + --color-emerald-800: oklch(43.2% 0.095 166.913); + --color-emerald-900: oklch(37.8% 0.077 168.94); + --color-emerald-950: oklch(26.2% 0.051 172.552); + --color-teal-50: oklch(98.4% 0.014 180.72); + --color-teal-100: oklch(95.3% 0.051 180.801); + --color-teal-200: oklch(91% 0.096 180.426); + --color-teal-300: oklch(85.5% 0.138 181.071); + --color-teal-400: oklch(77.7% 0.152 181.912); + --color-teal-500: oklch(70.4% 0.14 182.503); + --color-teal-600: oklch(60% 0.118 184.704); + --color-teal-700: oklch(51.1% 0.096 186.391); + --color-teal-800: oklch(43.7% 0.078 188.216); + --color-cyan-50: oklch(98.4% 0.019 200.873); + --color-cyan-100: oklch(95.6% 0.045 203.388); + --color-cyan-200: oklch(91.7% 0.08 205.041); + --color-cyan-300: oklch(86.5% 0.127 207.078); + --color-cyan-400: oklch(78.9% 0.154 211.53); + --color-cyan-500: oklch(71.5% 0.143 215.221); + --color-cyan-600: oklch(60.9% 0.126 221.723); + --color-cyan-700: oklch(52% 0.105 223.128); + --color-cyan-800: oklch(45% 0.085 224.283); + --color-cyan-900: oklch(39.8% 0.07 227.392); + --color-cyan-950: oklch(30.2% 0.056 229.695); + --color-sky-400: oklch(74.6% 0.16 232.661); + --color-sky-500: oklch(68.5% 0.169 237.323); + --color-sky-600: oklch(58.8% 0.158 241.966); + --color-blue-50: oklch(97% 0.014 254.604); + --color-blue-100: oklch(93.2% 0.032 255.585); + --color-blue-200: oklch(88.2% 0.059 254.128); + --color-blue-300: oklch(80.9% 0.105 251.813); + --color-blue-400: oklch(70.7% 0.165 254.624); + --color-blue-500: oklch(62.3% 0.214 259.815); + --color-blue-600: oklch(54.6% 0.245 262.881); + --color-blue-700: oklch(48.8% 0.243 264.376); + --color-blue-800: oklch(42.4% 0.199 265.638); + --color-blue-900: oklch(37.9% 0.146 265.522); + --color-blue-950: oklch(28.2% 0.091 267.935); + --color-indigo-50: oklch(96.2% 0.018 272.314); + --color-indigo-100: oklch(93% 0.034 272.788); + --color-indigo-200: oklch(87% 0.065 274.039); + --color-indigo-300: oklch(78.5% 0.115 274.713); + --color-indigo-400: oklch(67.3% 0.182 276.935); + --color-indigo-500: oklch(58.5% 0.233 277.117); + --color-indigo-600: oklch(51.1% 0.262 276.966); + --color-indigo-700: oklch(45.7% 0.24 277.023); + --color-indigo-800: oklch(39.8% 0.195 277.366); + --color-indigo-900: oklch(35.9% 0.144 278.697); + --color-indigo-950: oklch(25.7% 0.09 281.288); + --color-purple-50: oklch(97.7% 0.014 308.299); + --color-purple-100: oklch(94.6% 0.033 307.174); + --color-purple-200: oklch(90.2% 0.063 306.703); + --color-purple-300: oklch(82.7% 0.119 306.383); + --color-purple-400: oklch(71.4% 0.203 305.504); + --color-purple-500: oklch(62.7% 0.265 303.9); + --color-purple-600: oklch(55.8% 0.288 302.321); + --color-purple-700: oklch(49.6% 0.265 301.924); + --color-purple-800: oklch(43.8% 0.218 303.724); + --color-purple-900: oklch(38.1% 0.176 304.987); + --color-fuchsia-500: oklch(66.7% 0.295 322.15); + --color-fuchsia-600: oklch(59.1% 0.293 322.896); + --color-pink-50: oklch(97.1% 0.014 343.198); + --color-pink-100: oklch(94.8% 0.028 342.258); + --color-pink-200: oklch(89.9% 0.061 343.231); + --color-pink-300: oklch(82.3% 0.12 346.018); + --color-pink-400: oklch(71.8% 0.202 349.761); + --color-pink-500: oklch(65.6% 0.241 354.308); + --color-pink-600: oklch(59.2% 0.249 0.584); + --color-pink-700: oklch(52.5% 0.223 3.958); + --color-pink-800: oklch(45.9% 0.187 3.815); + --color-pink-900: oklch(40.8% 0.153 2.432); + --color-pink-950: oklch(28.4% 0.109 3.907); + --color-rose-50: oklch(96.9% 0.015 12.422); + --color-rose-100: oklch(94.1% 0.03 12.58); + --color-rose-200: oklch(89.2% 0.058 10.001); + --color-rose-300: oklch(81% 0.117 11.638); + --color-rose-500: oklch(64.5% 0.246 16.439); + --color-rose-700: oklch(51.4% 0.222 16.935); + --color-rose-800: oklch(45.5% 0.188 13.697); + --color-rose-900: oklch(41% 0.159 10.272); + --color-rose-950: oklch(27.1% 0.105 12.094); + --color-slate-50: oklch(98.4% 0.003 247.858); + --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); + --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); + --color-slate-950: oklch(12.9% 0.042 264.695); + --color-gray-50: oklch(98.5% 0.002 247.839); + --color-gray-100: oklch(96.7% 0.003 264.542); + --color-gray-200: oklch(92.8% 0.006 264.531); + --color-gray-300: oklch(87.2% 0.01 258.338); + --color-gray-400: oklch(70.7% 0.022 261.325); + --color-gray-500: oklch(55.1% 0.027 264.364); + --color-gray-600: oklch(44.6% 0.03 256.802); + --color-gray-700: oklch(37.3% 0.034 259.733); + --color-gray-800: oklch(27.8% 0.033 256.848); + --color-gray-900: oklch(21% 0.034 264.665); + --color-gray-950: oklch(13% 0.028 261.692); + --color-zinc-50: oklch(98.5% 0 0); + --color-zinc-100: oklch(96.7% 0.001 286.375); + --color-zinc-200: oklch(92% 0.004 286.32); + --color-zinc-300: oklch(87.1% 0.006 286.286); + --color-zinc-400: oklch(70.5% 0.015 286.067); + --color-zinc-500: oklch(55.2% 0.016 285.938); + --color-zinc-600: oklch(44.2% 0.017 285.786); + --color-zinc-700: oklch(37% 0.013 285.805); + --color-zinc-800: oklch(27.4% 0.006 286.033); + --color-zinc-900: oklch(21% 0.006 285.885); + --color-zinc-950: oklch(14.1% 0.005 285.823); + --color-neutral-50: oklch(98.5% 0 0); + --color-neutral-100: oklch(97% 0 0); + --color-neutral-200: oklch(92.2% 0 0); + --color-neutral-300: oklch(87% 0 0); + --color-neutral-400: oklch(70.8% 0 0); + --color-neutral-500: oklch(55.6% 0 0); + --color-neutral-600: oklch(43.9% 0 0); + --color-neutral-700: oklch(37.1% 0 0); + --color-neutral-800: oklch(26.9% 0 0); + --color-neutral-900: oklch(20.5% 0 0); + --color-neutral-950: oklch(14.5% 0 0); + --color-stone-50: oklch(98.5% 0.001 106.423); + --color-stone-100: oklch(97% 0.001 106.424); + --color-stone-200: oklch(92.3% 0.003 48.717); + --color-stone-300: oklch(86.9% 0.005 56.366); + --color-stone-400: oklch(70.9% 0.01 56.259); + --color-stone-500: oklch(55.3% 0.013 58.071); + --color-stone-600: oklch(44.4% 0.011 73.639); + --color-stone-700: oklch(37.4% 0.01 67.558); + --color-stone-800: oklch(26.8% 0.007 34.298); + --color-stone-900: oklch(21.6% 0.006 56.043); + --color-stone-950: oklch(14.7% 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-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; @@ -28,6 +214,8 @@ --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; + --container-4xl: 56rem; + --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; @@ -46,29 +234,79 @@ --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-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; - --tracking-tight: -0.025em; + --font-weight-black: 900; + --tracking-tighter: -0.8px; + --tracking-tight: -0.4px; + --tracking-normal: 0em; + --tracking-wide: 0.025em; + --tracking-wider: 0.05em; + --tracking-widest: 0.1em; --leading-tight: 1.25; + --leading-normal: 1.5; --leading-relaxed: 1.625; - --radius-xs: 0.125rem; - --radius-sm: 0.25rem; + --leading-loose: 2; + --radius-xs: 4px; + --radius-sm: 6px; --radius-md: 0.375rem; - --radius-lg: 0.5rem; + --radius-lg: 16px; --radius-xl: 0.75rem; --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; - --blur-sm: 8px; + --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --blur-xs: 4px; --blur-lg: 16px; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); + --radius: 8px; + --spacing-8xl: 90rem; + --leading-9: 36px; + --leading-6: 24px; + --leading-none: 1px; + --leading-5: 20px; + --radius-base: 12px; + --color-body: var(--color-gray-600); + --color-heading: var(--color-gray-900); + --color-fg-brand: var(--color-blue-700); + --color-fg-disabled: var(--color-gray-400); + --color-neutral-primary-soft: var(--color-white); + --color-neutral-primary: var(--color-white); + --color-neutral-primary-medium: var(--color-white); + --color-neutral-secondary-soft: var(--color-gray-50); + --color-neutral-secondary: var(--color-gray-50); + --color-neutral-secondary-medium: var(--color-gray-50); + --color-neutral-secondary-strong: var(--color-gray-50); + --color-neutral-tertiary: var(--color-gray-100); + --color-neutral-tertiary-medium: var(--color-gray-100); + --color-neutral-quaternary: var(--color-gray-200); + --color-brand-soft: var(--color-blue-100); + --color-brand: var(--color-blue-700); + --color-brand-medium: var(--color-blue-200); + --color-brand-strong: var(--color-blue-800); + --color-dark: var(--color-gray-800); + --color-light: var(--color-gray-100); + --color-default: var(--color-gray-200); + --color-default-medium: var(--color-gray-200); + --color-dark-backdrop: var(--color-gray-950); + --color-accent: #7c3aed; } } @layer base { @@ -243,6 +481,312 @@ white-space: nowrap; border-width: 0; } + .datatable-wrapper { + width: 100%; + & .datatable-top { + display: flex; + justify-content: space-between; + flex-direction: column-reverse; + align-items: start; + gap: 1rem; + margin-bottom: 1rem; + @media (min-width: 640px) { + flex-direction: row-reverse; + align-items: center; + } + } + & .datatable-search .datatable-input { + color: var(--color-heading); + font-size: 0.875rem; + border: 1px solid var(--color-default); + border-radius: var(--radius-base); + background-color: var(--color-neutral-secondary-soft); + min-width: 16rem; + } + & .datatable-input { + color: var(--color-heading); + font-size: 0.875rem; + border: 1px solid var(--color-default); + border-radius: var(--radius-base); + background-color: var(--color-neutral-secondary-soft); + min-width: 16rem; + } + & thead th .datatable-input { + background-color: var(--color-neutral-primary); + font-weight: 400; + color: var(--color-heading); + padding-top: .35rem; + padding-bottom: .35rem; + min-width: 0; + } + & .datatable-top .datatable-dropdown { + color: var(--color-body); + font-size: 0.875rem; + } + & .datatable-top .datatable-dropdown .datatable-selector { + background-color: var(--color-neutral-secondary-soft); + color: var(--color-heading); + font-size: 0.875rem; + border: 1px solid var(--color-default); + border-radius: var(--radius-base); + margin-right: 0.25rem; + min-width: 4rem; + } + & .datatable-container thead tr.search-filtering-row th { + padding-top: 0; + } + & .datatable-search .datatable-input:focus { + border-color: var(--color-brand); + } + & .datatable-container { + overflow-x: auto; + border: 1px solid var(--color-default); + border-radius: var(--radius-base); + } + & .datatable-table { + width: 100%; + font-size: 0.875rem; + color: var(--color-body); + text-align: left; + } + & .datatable-table thead { + font-size: 0.75rem; + color: var(--color-body); + background-color: var(--color-neutral-secondary-medium); + border-bottom: 1px solid var(--color-default); + } + & .datatable-table thead th { + white-space: nowrap; + } + & .datatable-table thead th { + width: auto !important; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + } + & .datatable-table tbody th { + width: auto !important; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + } + & .datatable-table tbody td { + width: auto !important; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + } + & .datatable-table thead th .datatable-sorter { + text-transform: uppercase; + } + & .datatable-table thead th { + text-transform: uppercase; + } + & .datatable-table thead th .datatable-sorter:hover { + color: var(--color-heading); + } + & .datatable-table thead th.datatable-ascending .datatable-sorter { + color: var(--color-heading); + } + & .datatable-table thead th.datatable-descending .datatable-sorter { + color: var(--color-heading); + } + & .datatable-table tbody tr.selected { + background-color: var(--color-neutral-secondary); + } + & .datatable-table tbody tr { + border-bottom: 1px solid var(--color-default); + } + & .datatable-table tbody tr:last-child { + border-bottom: 0; + } + & .datatable-table .datatable-empty { + text-align: center; + } + & .datatable-bottom { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: start; + margin-top: 1rem; + gap: 1rem; + @media (min-width: 640px) { + flex-direction: row; + align-items: center; + } + } + & .datatable-bottom .datatable-info { + color: var(--color-body); + font-size: 0.875rem; + } + & .datatable-bottom .datatable-pagination .datatable-pagination-list { + display: flex; + align-items: center; + height: 2rem; + font-size: 0.875rem; + } + & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link { + display: flex; + align-items: center; + color: var(--color-body); + background-color: var(--color-neutral-secondary-medium); + font-weight: 500; + padding-left: 0.75rem; + padding-right: 0.75rem; + height: 2rem; + font-size: 0.875rem; + border-top: 1px solid var(--color-default); + border-bottom: 1px solid var(--color-default); + border-right: 1px solid var(--color-default); + } + & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:hover .datatable-pagination-list-item-link { + color: var(--color-heading); + background-color: var(--color-neutral-tertiary-medium); + } + & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type { + position: relative; + } + & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type { + position: relative; + } + & .datatable-bottom .datatable-pagination .datatable-pagination-list-item.datatable-active .datatable-pagination-list-item-link { + color: var(--color-fg-brand); + background-color: var(--color-neutral-tertiary-medium); + } + & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link { + border-top-left-radius: var(--radius-base); + border-bottom-left-radius: var(--radius-base); + border-left: 1px solid var(--color-default); + } + & .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link { + border-top-right-radius: var(--radius-base); + border-bottom-right-radius: var(--radius-base); + border-left: 0; + } + & .datatable-bottom .datatable-pagination .datatable-pagination-list-item-link:hover { + background-color: var(--color-neutral-secondary-medium); + color: var(--color-body); + } + } + .datatable-bottom { + .datatable-wrapper & { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: start; + margin-top: 1rem; + gap: 1rem; + @media (min-width: 640px) { + flex-direction: row; + align-items: center; + } + } + .datatable-wrapper & .datatable-info { + color: var(--color-body); + font-size: 0.875rem; + } + .datatable-wrapper & .datatable-pagination .datatable-pagination-list { + display: flex; + align-items: center; + height: 2rem; + font-size: 0.875rem; + } + .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link { + display: flex; + align-items: center; + color: var(--color-body); + background-color: var(--color-neutral-secondary-medium); + font-weight: 500; + padding-left: 0.75rem; + padding-right: 0.75rem; + height: 2rem; + font-size: 0.875rem; + border-top: 1px solid var(--color-default); + border-bottom: 1px solid var(--color-default); + border-right: 1px solid var(--color-default); + } + .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:hover .datatable-pagination-list-item-link { + color: var(--color-heading); + background-color: var(--color-neutral-tertiary-medium); + } + .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type { + position: relative; + } + .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type { + position: relative; + } + .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item.datatable-active .datatable-pagination-list-item-link { + color: var(--color-fg-brand); + background-color: var(--color-neutral-tertiary-medium); + } + .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link { + border-top-left-radius: var(--radius-base); + border-bottom-left-radius: var(--radius-base); + border-left: 1px solid var(--color-default); + } + .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link { + border-top-right-radius: var(--radius-base); + border-bottom-right-radius: var(--radius-base); + border-left: 0; + } + .datatable-wrapper & .datatable-pagination .datatable-pagination-list-item-link:hover { + background-color: var(--color-neutral-secondary-medium); + color: var(--color-body); + } + } + .datatable-pagination { + .datatable-wrapper .datatable-bottom & .datatable-pagination-list { + display: flex; + align-items: center; + height: 2rem; + font-size: 0.875rem; + } + .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link { + display: flex; + align-items: center; + color: var(--color-body); + background-color: var(--color-neutral-secondary-medium); + font-weight: 500; + padding-left: 0.75rem; + padding-right: 0.75rem; + height: 2rem; + font-size: 0.875rem; + border-top: 1px solid var(--color-default); + border-bottom: 1px solid var(--color-default); + border-right: 1px solid var(--color-default); + } + .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:hover .datatable-pagination-list-item-link { + color: var(--color-heading); + background-color: var(--color-neutral-tertiary-medium); + } + .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type { + position: relative; + } + .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type { + position: relative; + } + .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item.datatable-active .datatable-pagination-list-item-link { + color: var(--color-fg-brand); + background-color: var(--color-neutral-tertiary-medium); + } + .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:first-of-type .datatable-pagination-list-item-link { + border-top-left-radius: var(--radius-base); + border-bottom-left-radius: var(--radius-base); + border-left: 1px solid var(--color-default); + } + .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item:last-of-type .datatable-pagination-list-item-link { + border-top-right-radius: var(--radius-base); + border-bottom-right-radius: var(--radius-base); + border-left: 0; + } + .datatable-wrapper .datatable-bottom & .datatable-pagination-list-item-link:hover { + background-color: var(--color-neutral-secondary-medium); + color: var(--color-body); + } + } .absolute { position: absolute; } @@ -258,12 +802,18 @@ .inset-0 { inset: calc(var(--spacing) * 0); } + .inset-y-0 { + inset-block: calc(var(--spacing) * 0); + } .inset-y-3 { inset-block: calc(var(--spacing) * 3); } .start-0 { inset-inline-start: calc(var(--spacing) * 0); } + .end-1\.5 { + inset-inline-end: calc(var(--spacing) * 1.5); + } .top-0 { top: calc(var(--spacing) * 0); } @@ -285,6 +835,9 @@ .bottom-0 { bottom: calc(var(--spacing) * 0); } + .bottom-1\.5 { + bottom: calc(var(--spacing) * 1.5); + } .bottom-2 { bottom: calc(var(--spacing) * 2); } @@ -360,18 +913,314 @@ .me-2 { margin-inline-end: calc(var(--spacing) * 2); } + .mt-0 { + margin-top: calc(var(--spacing) * 0); + } .mt-1 { margin-top: calc(var(--spacing) * 1); } + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } + .mt-3 { + margin-top: calc(var(--spacing) * 3); + } .mt-4 { margin-top: calc(var(--spacing) * 4); } + .mt-5 { + margin-top: calc(var(--spacing) * 5); + } + .apexcharts-canvas { + & .apexcharts-tooltip { + background-color: primary !important; + color: var(--color-body) !important; + border: 0 !important; + border-radius: var(--radius-base) !important; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; + } + .dark & .apexcharts-tooltip { + background-color: var(--color-neutral-secondary-medium) !important; + color: var(--color-body) !important; + border-color: var(--color-default) !important; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; + } + & .apexcharts-tooltip .apexcharts-tooltip-title { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + padding-right: 0.75rem !important; + padding-left: 0.75rem !important; + margin-bottom: 0.75rem !important; + background-color: var(--color-neutral-tertiary-medium) !important; + border-color: var(--color-light) !important; + font-size: 0.875rem !important; + font-weight: 600 !important; + color: var(--color-heading) !important; + } + .dark & .apexcharts-tooltip .apexcharts-tooltip-title { + background-color: var(--color-neutral-tertiary-medium) !important; + border-color: var(--color-light) !important; + color: var(--color-heading) !important; + } + & .apexcharts-xaxistooltip { + color: var(--color-body) !important; + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + padding-right: 0.75rem !important; + padding-left: 0.75rem !important; + border-color: transparent !important; + background-color: white !important; + border-radius: 8px !important; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; + } + .dark & .apexcharts-xaxistooltip { + color: var(--color-body) !important; + background-color: var(--color-neutral-secondary-medium) !important; + } + & .apexcharts-tooltip .apexcharts-tooltip-text-y-label { + color: var(--color-body) !important; + font-size: 0.875rem !important; + } + .dark & .apexcharts-tooltip .apexcharts-tooltip-text-y-label { + color: var(--color-body) !important; + } + & .apexcharts-tooltip .apexcharts-tooltip-text-y-value { + color: var(--color-heading); + font-size: 0.875rem !important; + } + .dark & .apexcharts-tooltip .apexcharts-tooltip-text-y-value { + color: white !important; + } + & .apexcharts-xaxistooltip-text { + font-weight: 400 !important; + font-size: 0.875rem !important; + } + & .apexcharts-xaxistooltip:after { + border-bottom-color: var(--color-neutral-primary-medium) !important; + } + & .apexcharts-xaxistooltip:before { + border-bottom-color: var(--color-neutral-primary-medium) !important; + } + & .apexcharts-xaxistooltip:after { + border-width: 8px !important; + margin-left: -8px !important; + } + & .apexcharts-xaxistooltip:before { + border-width: 10px !important; + margin-left: -10px !important; + } + & .apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-y-group { + padding: 0 !important; + } + & .apexcharts-tooltip-series-group.apexcharts-active { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; + padding-bottom: 0.75rem !important; + background-color: var(--color-neutral-primary-medium) !important; + color: var(--color-body) !important; + } + .dark & .apexcharts-tooltip-series-group.apexcharts-active { + background-color: var(--color-neutral-secondary-medium) !important; + color: var(--color-body) !important; + } + & .apexcharts-tooltip-series-group.apexcharts-active:first-of-type { + padding-top: 0.75rem !important; + } + & .apexcharts-legend { + padding: 0 !important; + } + & .apexcharts-legend-text { + font-size: 0.75rem !important; + font-weight: 500 !important; + padding-left: 1.25rem !important; + color: var(--color-body) !important; + } + :is([dir=rtl]) & .apexcharts-legend-text { + padding-right: 0.5rem !important; + } + & .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover { + color: var(--color-heading) !important; + } + .dark & .apexcharts-legend-text { + color: var(--color-body) !important; + } + .dark & .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover { + color: heading !important; + } + & .apexcharts-legend-series { + margin-left: 0.5rem !important; + margin-right: 0.5rem !important; + margin-bottom: 0.25rem !important; + display: flex !important; + align-items: center !important; + } + .dark & .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value { + fill: white !important; + } + & .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label { + fill: var(--color-body) !important; + font-size: 1rem,[object Object] !important; + font-weight: 400 !important; + } + .dark & .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label { + fill: var(--color-body) !important; + } + & .apexcharts-datalabels .apexcharts-text.apexcharts-pie-label { + font-size: 0.75rem,[object Object] !important; + font-weight: 600 !important; + text-shadow: none !important; + filter: none !important; + } + } + .apexcharts-legend-series { + .apexcharts-canvas & { + margin-left: 0.5rem !important; + margin-right: 0.5rem !important; + margin-bottom: 0.25rem !important; + display: flex !important; + align-items: center !important; + } + } + .apexcharts-tooltip { + .apexcharts-canvas & { + background-color: primary !important; + color: var(--color-body) !important; + border: 0 !important; + border-radius: var(--radius-base) !important; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; + } + .dark .apexcharts-canvas & { + background-color: var(--color-neutral-secondary-medium) !important; + color: var(--color-body) !important; + border-color: var(--color-default) !important; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; + } + .apexcharts-canvas & .apexcharts-tooltip-title { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + padding-right: 0.75rem !important; + padding-left: 0.75rem !important; + margin-bottom: 0.75rem !important; + background-color: var(--color-neutral-tertiary-medium) !important; + border-color: var(--color-light) !important; + font-size: 0.875rem !important; + font-weight: 600 !important; + color: var(--color-heading) !important; + } + .dark .apexcharts-canvas & .apexcharts-tooltip-title { + background-color: var(--color-neutral-tertiary-medium) !important; + border-color: var(--color-light) !important; + color: var(--color-heading) !important; + } + .apexcharts-canvas & .apexcharts-tooltip-text-y-label { + color: var(--color-body) !important; + font-size: 0.875rem !important; + } + .dark .apexcharts-canvas & .apexcharts-tooltip-text-y-label { + color: var(--color-body) !important; + } + .apexcharts-canvas & .apexcharts-tooltip-text-y-value { + color: var(--color-heading); + font-size: 0.875rem !important; + } + :is([dir=rtl]) & .apexcharts-tooltip-marker { + margin-right: 0px !important; + margin-left: 0.375rem !important; + } + .dark .apexcharts-canvas & .apexcharts-tooltip-text-y-value { + color: white !important; + } + } + .datatable-top { + .datatable-wrapper & { + display: flex; + justify-content: space-between; + flex-direction: column-reverse; + align-items: start; + gap: 1rem; + margin-bottom: 1rem; + @media (min-width: 640px) { + flex-direction: row-reverse; + align-items: center; + } + } + .datatable-wrapper & .datatable-dropdown { + color: var(--color-body); + font-size: 0.875rem; + } + .datatable-wrapper & .datatable-dropdown .datatable-selector { + background-color: var(--color-neutral-secondary-soft); + color: var(--color-heading); + font-size: 0.875rem; + border: 1px solid var(--color-default); + border-radius: var(--radius-base); + margin-right: 0.25rem; + min-width: 4rem; + } + } + .apexcharts-tooltip-marker { + :is([dir=rtl]) .apexcharts-tooltip & { + margin-right: 0px !important; + margin-left: 0.375rem !important; + } + } + .datatable-dropdown { + .datatable-wrapper .datatable-top & { + color: var(--color-body); + font-size: 0.875rem; + } + .datatable-wrapper .datatable-top & .datatable-selector { + background-color: var(--color-neutral-secondary-soft); + color: var(--color-heading); + font-size: 0.875rem; + border: 1px solid var(--color-default); + border-radius: var(--radius-base); + margin-right: 0.25rem; + min-width: 4rem; + } + } + .datatable-selector { + .datatable-wrapper .datatable-top .datatable-dropdown & { + background-color: var(--color-neutral-secondary-soft); + color: var(--color-heading); + font-size: 0.875rem; + border: 1px solid var(--color-default); + border-radius: var(--radius-base); + margin-right: 0.25rem; + min-width: 4rem; + } + } .mr-4 { margin-right: calc(var(--spacing) * 4); } + .apexcharts-tooltip-title { + .apexcharts-canvas .apexcharts-tooltip & { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + padding-right: 0.75rem !important; + padding-left: 0.75rem !important; + margin-bottom: 0.75rem !important; + background-color: var(--color-neutral-tertiary-medium) !important; + border-color: var(--color-light) !important; + font-size: 0.875rem !important; + font-weight: 600 !important; + color: var(--color-heading) !important; + } + .dark .apexcharts-canvas .apexcharts-tooltip & { + background-color: var(--color-neutral-tertiary-medium) !important; + border-color: var(--color-light) !important; + color: var(--color-heading) !important; + } + } + .mb-1 { + margin-bottom: calc(var(--spacing) * 1); + } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } + .mb-2\.5 { + margin-bottom: calc(var(--spacing) * 2.5); + } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } @@ -387,15 +1236,167 @@ .mb-10 { margin-bottom: calc(var(--spacing) * 10); } + .apexcharts-xaxistooltip { + .apexcharts-canvas & { + color: var(--color-body) !important; + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + padding-right: 0.75rem !important; + padding-left: 0.75rem !important; + border-color: transparent !important; + background-color: white !important; + border-radius: 8px !important; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; + } + .dark .apexcharts-canvas & { + color: var(--color-body) !important; + background-color: var(--color-neutral-secondary-medium) !important; + } + .apexcharts-canvas &:after { + border-bottom-color: var(--color-neutral-primary-medium) !important; + } + .apexcharts-canvas &:before { + border-bottom-color: var(--color-neutral-primary-medium) !important; + } + .apexcharts-canvas &:after { + border-width: 8px !important; + margin-left: -8px !important; + } + .apexcharts-canvas &:before { + border-width: 10px !important; + margin-left: -10px !important; + } + } .ml-auto { margin-left: auto; } + .box-border { + box-sizing: border-box; + } + .form-checkbox { + appearance: none; + padding: 0; + print-color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + user-select: none; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: oklch(54.6% 0.245 262.881); + background-color: #fff; + border-color: oklch(55.1% 0.027 264.364); + border-width: 1px; + --tw-shadow: 0 0 #0000; + border-radius: 0px; + &:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: oklch(54.6% 0.245 262.881); + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + &:checked { + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + } + &:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); + @media (forced-colors: active) { + appearance: auto; + } + } + &:checked:hover { + border-color: transparent; + background-color: currentColor; + } + &:checked:focus { + border-color: transparent; + background-color: currentColor; + } + &:indeterminate { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + @media (forced-colors: active) { + appearance: auto; + } + } + &:indeterminate:hover { + border-color: transparent; + background-color: currentColor; + } + &:indeterminate:focus { + border-color: transparent; + background-color: currentColor; + } + } + .datatable-pagination-list-item-link { + .datatable-wrapper .datatable-bottom .datatable-pagination & { + display: flex; + align-items: center; + color: var(--color-body); + background-color: var(--color-neutral-secondary-medium); + font-weight: 500; + padding-left: 0.75rem; + padding-right: 0.75rem; + height: 2rem; + font-size: 0.875rem; + border-top: 1px solid var(--color-default); + border-bottom: 1px solid var(--color-default); + border-right: 1px solid var(--color-default); + } + .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:hover & { + color: var(--color-heading); + background-color: var(--color-neutral-tertiary-medium); + } + .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item.datatable-active & { + color: var(--color-fg-brand); + background-color: var(--color-neutral-tertiary-medium); + } + .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:first-of-type & { + border-top-left-radius: var(--radius-base); + border-bottom-left-radius: var(--radius-base); + border-left: 1px solid var(--color-default); + } + .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item:last-of-type & { + border-top-right-radius: var(--radius-base); + border-bottom-right-radius: var(--radius-base); + border-left: 0; + } + .datatable-wrapper .datatable-bottom .datatable-pagination &:hover { + background-color: var(--color-neutral-secondary-medium); + color: var(--color-body); + } + } + .datatable-pagination-list { + .datatable-wrapper .datatable-bottom .datatable-pagination & { + display: flex; + align-items: center; + height: 2rem; + font-size: 0.875rem; + } + } .block { display: block; } .flex { display: flex; } + .grid { + display: grid; + } .hidden { display: none; } @@ -415,9 +1416,6 @@ width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } - .h-2 { - height: calc(var(--spacing) * 2); - } .h-2\.5 { height: calc(var(--spacing) * 2.5); } @@ -436,9 +1434,6 @@ .h-8 { height: calc(var(--spacing) * 8); } - .h-9 { - height: calc(var(--spacing) * 9); - } .h-10 { height: calc(var(--spacing) * 10); } @@ -448,21 +1443,83 @@ .h-\[calc\(100\%-1rem\)\] { height: calc(100% - 1rem); } + .h-full { + height: 100%; + } .max-h-full { max-height: 100%; } .min-h-screen { min-height: 100vh; } - .w-1 { - width: calc(var(--spacing) * 1); + .datatable-table { + .datatable-wrapper & { + width: 100%; + font-size: 0.875rem; + color: var(--color-body); + text-align: left; + } + .datatable-wrapper & thead { + font-size: 0.75rem; + color: var(--color-body); + background-color: var(--color-neutral-secondary-medium); + border-bottom: 1px solid var(--color-default); + } + .datatable-wrapper & thead th { + white-space: nowrap; + } + .datatable-wrapper & thead th { + width: auto !important; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .datatable-wrapper & tbody th { + width: auto !important; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .datatable-wrapper & tbody td { + width: auto !important; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .datatable-wrapper & thead th .datatable-sorter { + text-transform: uppercase; + } + .datatable-wrapper & thead th { + text-transform: uppercase; + } + .datatable-wrapper & thead th .datatable-sorter:hover { + color: var(--color-heading); + } + .datatable-wrapper & thead th.datatable-ascending .datatable-sorter { + color: var(--color-heading); + } + .datatable-wrapper & thead th.datatable-descending .datatable-sorter { + color: var(--color-heading); + } + .datatable-wrapper & tbody tr.selected { + background-color: var(--color-neutral-secondary); + } + .datatable-wrapper & tbody tr { + border-bottom: 1px solid var(--color-default); + } + .datatable-wrapper & tbody tr:last-child { + border-bottom: 0; + } + .datatable-wrapper & .datatable-empty { + text-align: center; + } } .w-1\/2 { width: calc(1/2 * 100%); } - .w-2 { - width: calc(var(--spacing) * 2); - } .w-2\.5 { width: calc(var(--spacing) * 2.5); } @@ -514,6 +1571,9 @@ .max-w-120 { max-width: calc(var(--spacing) * 120); } + .max-w-md { + max-width: var(--container-md); + } .max-w-sm { max-width: var(--container-sm); } @@ -523,18 +1583,54 @@ .max-w-xs { max-width: var(--container-xs); } + .datatable-input { + .datatable-wrapper .datatable-search & { + color: var(--color-heading); + font-size: 0.875rem; + border: 1px solid var(--color-default); + border-radius: var(--radius-base); + background-color: var(--color-neutral-secondary-soft); + min-width: 16rem; + } + .datatable-wrapper & { + color: var(--color-heading); + font-size: 0.875rem; + border: 1px solid var(--color-default); + border-radius: var(--radius-base); + background-color: var(--color-neutral-secondary-soft); + min-width: 16rem; + } + .datatable-wrapper thead th & { + background-color: var(--color-neutral-primary); + font-weight: 400; + color: var(--color-heading); + padding-top: .35rem; + padding-bottom: .35rem; + min-width: 0; + } + .datatable-wrapper .datatable-search &:focus { + border-color: var(--color-brand); + } + } + .datatable-search { + .datatable-wrapper & .datatable-input { + color: var(--color-heading); + font-size: 0.875rem; + border: 1px solid var(--color-default); + border-radius: var(--radius-base); + background-color: var(--color-neutral-secondary-soft); + min-width: 16rem; + } + .datatable-wrapper & .datatable-input:focus { + border-color: var(--color-brand); + } + } .flex-1 { flex: 1; } .flex-shrink { flex-shrink: 1; } - .shrink { - flex-shrink: 1; - } - .border-collapse { - border-collapse: collapse; - } .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); @@ -567,9 +1663,15 @@ .animate-spin { animation: var(--animate-spin); } + .cursor-default { + cursor: default; + } .cursor-not-allowed { cursor: not-allowed; } + .cursor-pointer { + cursor: pointer; + } .resize { resize: both; } @@ -621,6 +1723,9 @@ .gap-2 { gap: calc(var(--spacing) * 2); } + .gap-3 { + gap: calc(var(--spacing) * 3); + } .gap-4 { gap: calc(var(--spacing) * 4); } @@ -669,7 +1774,7 @@ } .divide-gray-100 { :where(& > :not(:last-child)) { - border-color: #F3F4F6; + border-color: var(--color-gray-100); } } .self-center { @@ -683,6 +1788,16 @@ .overflow-hidden { overflow: hidden; } + .datatable-container { + .datatable-wrapper & thead tr.search-filtering-row th { + padding-top: 0; + } + .datatable-wrapper & { + overflow-x: auto; + border: 1px solid var(--color-default); + border-radius: var(--radius-base); + } + } .overflow-x-auto { overflow-x: auto; } @@ -692,6 +1807,12 @@ .overflow-y-auto { overflow-y: auto; } + .rounded { + border-radius: var(--radius); + } + .rounded-base { + border-radius: var(--radius-base); + } .rounded-lg { border-radius: var(--radius-lg); } @@ -707,39 +1828,39 @@ .rounded-xs { border-radius: var(--radius-xs); } + .rounded-s-base { + border-start-start-radius: var(--radius-base); + border-end-start-radius: var(--radius-base); + } .rounded-s-lg { border-start-start-radius: var(--radius-lg); border-end-start-radius: var(--radius-lg); } + .rounded-e-base { + border-start-end-radius: var(--radius-base); + border-end-end-radius: var(--radius-base); + } .rounded-e-lg { border-start-end-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg); } .rounded-t { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; + border-top-left-radius: var(--radius); + border-top-right-radius: var(--radius); } .rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; } - .rounded-l-lg { - border-top-left-radius: var(--radius-lg); - border-bottom-left-radius: var(--radius-lg); - } .rounded-tl-none { border-top-left-radius: 0; } - .rounded-r-lg { - border-top-right-radius: var(--radius-lg); - border-bottom-right-radius: var(--radius-lg); - } .rounded-tr-md { border-top-right-radius: var(--radius-md); } .rounded-b { - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; + border-bottom-right-radius: var(--radius); + border-bottom-left-radius: var(--radius); } .rounded-b-md { border-bottom-right-radius: var(--radius-md); @@ -769,86 +1890,268 @@ border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } - .border-blue-600 { - border-color: #1C64F2; + .dark { + & .apexcharts-canvas .apexcharts-tooltip { + background-color: var(--color-neutral-secondary-medium) !important; + color: var(--color-body) !important; + border-color: var(--color-default) !important; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; + } + & .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title { + background-color: var(--color-neutral-tertiary-medium) !important; + border-color: var(--color-light) !important; + color: var(--color-heading) !important; + } + & .apexcharts-canvas .apexcharts-xaxistooltip { + color: var(--color-body) !important; + background-color: var(--color-neutral-secondary-medium) !important; + } + & .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-label { + color: var(--color-body) !important; + } + & .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-value { + color: white !important; + } + & .apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active { + background-color: var(--color-neutral-secondary-medium) !important; + color: var(--color-body) !important; + } + & .apexcharts-canvas .apexcharts-legend-text { + color: var(--color-body) !important; + } + & .apexcharts-canvas .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover { + color: heading !important; + } + & .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value { + fill: white !important; + } + & .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label { + fill: var(--color-body) !important; + } + & .apexcharts-gridline { + stroke: var(--color-default) !important; + } + & .apexcharts-xcrosshairs { + stroke: var(--color-default) !important; + } + & .apexcharts-ycrosshairs { + stroke: var(--color-default) !important; + } + } + .border-accent { + border-color: var(--color-accent); + } + .border-brand { + border-color: var(--color-brand); + } + .border-default { + border-color: var(--color-default); + } + .border-default-medium { + border-color: var(--color-default-medium); } .border-gray-100 { - border-color: #F3F4F6; + border-color: var(--color-gray-100); } .border-gray-200 { - border-color: #E5E7EB; + border-color: var(--color-gray-200); } .border-gray-300 { - border-color: #D1D5DB; + border-color: var(--color-gray-300); } .border-purple-200 { - border-color: #DCD7FE; + border-color: var(--color-purple-200); + } + .border-transparent { + border-color: transparent; + } + .apexcharts-active { + .apexcharts-canvas .apexcharts-tooltip-series-group& .apexcharts-tooltip-y-group { + padding: 0 !important; + } + .apexcharts-canvas .apexcharts-tooltip-series-group& { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; + padding-bottom: 0.75rem !important; + background-color: var(--color-neutral-primary-medium) !important; + color: var(--color-body) !important; + } + .dark .apexcharts-canvas .apexcharts-tooltip-series-group& { + background-color: var(--color-neutral-secondary-medium) !important; + color: var(--color-body) !important; + } + .apexcharts-canvas .apexcharts-tooltip-series-group&:first-of-type { + padding-top: 0.75rem !important; + } + } + .datatable-active { + .datatable-wrapper .datatable-bottom .datatable-pagination .datatable-pagination-list-item& .datatable-pagination-list-item-link { + color: var(--color-fg-brand); + background-color: var(--color-neutral-tertiary-medium); + } + } + .selectedCell { + background-color: var(--color-neutral-secondary-medium); + .dark & { + background-color: var(--color-neutral-secondary-medium); + } + } + .bg-black\/70 { + background-color: color-mix(in srgb, #000 70%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-black) 70%, transparent); + } } .bg-blue-100 { - background-color: #E1EFFE; + background-color: var(--color-blue-100); } .bg-blue-700 { - background-color: #1A56DB; + background-color: var(--color-blue-700); + } + .bg-brand { + background-color: var(--color-brand); + } + .bg-dark-backdrop\/70 { + background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 70%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-dark-backdrop) 70%, transparent); + } } .bg-gray-50 { - background-color: #F9FAFB; - } - .bg-gray-50\! { - background-color: #F9FAFB !important; + background-color: var(--color-gray-50); } .bg-gray-100 { - background-color: #F3F4F6; - } - .bg-gray-200 { - background-color: #E5E7EB; + background-color: var(--color-gray-100); } .bg-gray-400 { - background-color: #9CA3AF; + background-color: var(--color-gray-400); } .bg-gray-500 { - background-color: #6B7280; - } - .bg-gray-800 { - background-color: #1F2937; + background-color: var(--color-gray-500); } .bg-gray-800\/20 { - background-color: color-mix(in oklab, #1F2937 20%, transparent); - } - .bg-gray-900 { - background-color: #111827; + background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-gray-800) 20%, transparent); + } } .bg-gray-900\/50 { - background-color: color-mix(in oklab, #111827 50%, transparent); + background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent); + } } .bg-green-500 { - background-color: #0E9F6E; + background-color: var(--color-green-500); } .bg-green-600 { - background-color: #057A55; + background-color: var(--color-green-600); } .bg-green-700 { - background-color: #046C4E; + background-color: var(--color-green-700); + } + .bg-neutral-primary { + background-color: var(--color-neutral-primary); + } + .bg-neutral-primary-medium { + background-color: var(--color-neutral-primary-medium); + } + .bg-neutral-primary-soft { + background-color: var(--color-neutral-primary-soft); + } + .bg-neutral-secondary-medium { + background-color: var(--color-neutral-secondary-medium); + } + .bg-neutral-tertiary-medium { + background-color: var(--color-neutral-tertiary-medium); } .bg-orange-400 { - background-color: #FF8A4C; + background-color: var(--color-orange-400); } .bg-purple-500 { - background-color: #9061F9; + background-color: var(--color-purple-500); } .bg-red-500 { - background-color: #F05252; + background-color: var(--color-red-500); } .bg-red-700 { - background-color: #C81E1E; + background-color: var(--color-red-700); } .bg-transparent { background-color: transparent; } .bg-white { - background-color: #ffffff; + background-color: var(--color-white); } .bg-white\/50 { - background-color: color-mix(in oklab, #ffffff 50%, transparent); + background-color: color-mix(in srgb, #fff 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 50%, transparent); + } + } + .dark { + & .selectedCell { + background-color: var(--color-neutral-secondary-medium); + } + } + .selected { + .datatable-wrapper .datatable-table tbody tr& { + background-color: var(--color-neutral-secondary); + } + } + .apexcharts-datalabels-group { + & .apexcharts-text.apexcharts-datalabel-value { + fill: var(--color-heading) !important; + font-size: 1.875rem,[object Object] !important; + font-weight: 700 !important; + } + .dark .apexcharts-canvas & .apexcharts-text.apexcharts-datalabel-value { + fill: white !important; + } + .apexcharts-canvas & .apexcharts-text.apexcharts-datalabel-label { + fill: var(--color-body) !important; + font-size: 1rem,[object Object] !important; + font-weight: 400 !important; + } + .dark .apexcharts-canvas & .apexcharts-text.apexcharts-datalabel-label { + fill: var(--color-body) !important; + } + } + .apexcharts-datalabel-label { + .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text& { + fill: var(--color-body) !important; + font-size: 1rem,[object Object] !important; + font-weight: 400 !important; + } + .dark .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text& { + fill: var(--color-body) !important; + } + } + .apexcharts-datalabel-value { + .apexcharts-datalabels-group .apexcharts-text& { + fill: var(--color-heading) !important; + font-size: 1.875rem,[object Object] !important; + font-weight: 700 !important; + } + .dark .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text& { + fill: white !important; + } + } + .apexcharts-ycrosshairs { + stroke: var(--color-default) !important; + .dark & { + stroke: var(--color-default) !important; + } + } + .apexcharts-legend { + .apexcharts-canvas & { + padding: 0 !important; + } + } + .apexcharts-tooltip-y-group { + .apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active & { + padding: 0 !important; + } } .p-1 { padding: calc(var(--spacing) * 1); @@ -859,9 +2162,18 @@ .p-2 { padding: calc(var(--spacing) * 2); } + .p-2\.5 { + padding: calc(var(--spacing) * 2.5); + } + .p-3 { + padding: calc(var(--spacing) * 3); + } .p-4 { padding: calc(var(--spacing) * 4); } + .p-5 { + padding: calc(var(--spacing) * 5); + } .p-6 { padding: calc(var(--spacing) * 6); } @@ -883,15 +2195,15 @@ .px-6 { padding-inline: calc(var(--spacing) * 6); } - .py-0 { - padding-block: calc(var(--spacing) * 0); - } .py-0\.5 { padding-block: calc(var(--spacing) * 0.5); } .py-1 { padding-block: calc(var(--spacing) * 1); } + .py-1\.5 { + padding-block: calc(var(--spacing) * 1.5); + } .py-2 { padding-block: calc(var(--spacing) * 2); } @@ -910,6 +2222,9 @@ .ps-3 { padding-inline-start: calc(var(--spacing) * 3); } + .ps-9 { + padding-inline-start: calc(var(--spacing) * 9); + } .ps-10 { padding-inline-start: calc(var(--spacing) * 10); } @@ -919,9 +2234,42 @@ .pt-8 { padding-top: calc(var(--spacing) * 8); } + .search-filtering-row { + .datatable-wrapper .datatable-container thead tr& th { + padding-top: 0; + } + } + .apexcharts-legend-text { + .apexcharts-canvas & { + font-size: 0.75rem !important; + font-weight: 500 !important; + padding-left: 1.25rem !important; + color: var(--color-body) !important; + } + :is([dir=rtl]) .apexcharts-canvas & { + padding-right: 0.5rem !important; + } + .apexcharts-canvas &:not(.apexcharts-inactive-legend):hover { + color: var(--color-heading) !important; + } + .dark .apexcharts-canvas & { + color: var(--color-body) !important; + } + .dark .apexcharts-canvas &:not(.apexcharts-inactive-legend):hover { + color: heading !important; + } + } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } + .pb-16 { + padding-bottom: calc(var(--spacing) * 16); + } + .datatable-empty { + .datatable-wrapper .datatable-table & { + text-align: center; + } + } .text-center { text-align: center; } @@ -931,6 +2279,9 @@ .text-right { text-align: right; } + .align-baseline { + vertical-align: baseline; + } .align-middle { vertical-align: middle; } @@ -979,17 +2330,67 @@ font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } + .apexcharts-datalabels { + .apexcharts-canvas & .apexcharts-text.apexcharts-pie-label { + font-size: 0.75rem,[object Object] !important; + font-weight: 600 !important; + text-shadow: none !important; + filter: none !important; + } + } + .apexcharts-pie-label { + .apexcharts-canvas .apexcharts-datalabels .apexcharts-text& { + font-size: 0.75rem,[object Object] !important; + font-weight: 600 !important; + text-shadow: none !important; + filter: none !important; + } + } + .apexcharts-xaxistooltip-text { + .apexcharts-canvas & { + font-weight: 400 !important; + font-size: 0.875rem !important; + } + } + .apexcharts-tooltip-text-y-label { + .apexcharts-canvas .apexcharts-tooltip & { + color: var(--color-body) !important; + font-size: 0.875rem !important; + } + .dark .apexcharts-canvas .apexcharts-tooltip & { + color: var(--color-body) !important; + } + } + .apexcharts-tooltip-text-y-value { + .apexcharts-canvas .apexcharts-tooltip & { + color: var(--color-heading); + font-size: 0.875rem !important; + } + .dark .apexcharts-canvas .apexcharts-tooltip & { + color: white !important; + } + } + .datatable-info { + .datatable-wrapper .datatable-bottom & { + color: var(--color-body); + font-size: 0.875rem; + } + } + .leading-5 { + --tw-leading: var(--leading-5); + line-height: var(--leading-5); + } .leading-6 { - --tw-leading: calc(var(--spacing) * 6); - line-height: calc(var(--spacing) * 6); + --tw-leading: var(--leading-6); + line-height: var(--leading-6); } .leading-9 { - --tw-leading: calc(var(--spacing) * 9); - line-height: calc(var(--spacing) * 9); + --tw-leading: var(--leading-9); + line-height: var(--leading-9); } .leading-none { - --tw-leading: 1; - line-height: 1; + --tw-leading: var(--leading-none); + line-height: var(--leading-none); } .leading-relaxed { --tw-leading: var(--leading-relaxed); @@ -1026,38 +2427,71 @@ .text-balance { text-wrap: balance; } - .text-wrap { - text-wrap: wrap; - } .whitespace-nowrap { white-space: nowrap; } + .datatable-sorter { + .datatable-wrapper .datatable-table thead th & { + text-transform: uppercase; + } + .datatable-wrapper .datatable-table thead th &:hover { + color: var(--color-heading); + } + .datatable-wrapper .datatable-table thead th.datatable-ascending & { + color: var(--color-heading); + } + .datatable-wrapper .datatable-table thead th.datatable-descending & { + color: var(--color-heading); + } + } + .datatable-ascending { + .datatable-wrapper .datatable-table thead th& .datatable-sorter { + color: var(--color-heading); + } + } + .datatable-descending { + .datatable-wrapper .datatable-table thead th& .datatable-sorter { + color: var(--color-heading); + } + } .text-black { - color: #000000; + color: var(--color-black); } .text-blue-600 { - color: #1C64F2; + color: var(--color-blue-600); } .text-blue-800 { - color: #1E429F; + color: var(--color-blue-800); + } + .text-body { + color: var(--color-body); + } + .text-fg-brand { + color: var(--color-fg-brand); + } + .text-fg-disabled { + color: var(--color-fg-disabled); } .text-gray-300 { - color: #D1D5DB; + color: var(--color-gray-300); } .text-gray-400 { - color: #9CA3AF; + color: var(--color-gray-400); } .text-gray-500 { - color: #6B7280; + color: var(--color-gray-500); } .text-gray-600 { - color: #4B5563; + color: var(--color-gray-600); } .text-gray-700 { - color: #374151; + color: var(--color-gray-700); } .text-gray-900 { - color: #111827; + color: var(--color-gray-900); + } + .text-heading { + color: var(--color-heading); } .text-slate-300 { color: var(--color-slate-300); @@ -1066,10 +2500,10 @@ color: var(--color-slate-500); } .text-white { - color: #ffffff; + color: var(--color-white); } .text-yellow-300 { - color: #FACA15; + color: var(--color-yellow-300); } .lowercase { text-transform: lowercase; @@ -1077,9 +2511,6 @@ .uppercase { text-transform: uppercase; } - .no-underline { - text-decoration-line: none; - } .no-underline\! { text-decoration-line: none !important; } @@ -1098,12 +2529,17 @@ .opacity-100 { opacity: 100%; } - .shadow-2xs { - --tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / 0.05)); + .shadow-lg\/50 { + --tw-shadow-alpha: 50%; + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 50%)), 0 4px 6px -4px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 50%)); 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)); + .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-2xs { + --tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / 0.05)); 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 { @@ -1122,8 +2558,8 @@ outline-style: var(--tw-outline-style); outline-width: 1px; } - .blur-sm { - --tw-blur: blur(var(--blur-sm)); + .blur { + --tw-blur: blur(8px); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .filter { @@ -1134,10 +2570,6 @@ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -1214,7 +2646,7 @@ .group-hover\:bg-purple-600 { &:is(:where(.group):hover *) { @media (hover: hover) { - background-color: #7E3AF2; + background-color: var(--color-purple-600); } } } @@ -1235,14 +2667,14 @@ .group-hover\:text-purple-100 { &:is(:where(.group):hover *) { @media (hover: hover) { - color: #EDEBFE; + color: var(--color-purple-100); } } } .group-hover\:decoration-purple-900 { &:is(:where(.group):hover *) { @media (hover: hover) { - text-decoration-color: #4A1D96; + text-decoration-color: var(--color-purple-900); } } } @@ -1257,7 +2689,7 @@ .group-hover\:outline-purple-400 { &:is(:where(.group):hover *) { @media (hover: hover) { - outline-color: #AC94FA; + outline-color: var(--color-purple-400); } } } @@ -1269,14 +2701,19 @@ } } } + .placeholder\:text-body { + &::placeholder { + color: var(--color-body); + } + } .odd\:bg-white { &:nth-child(odd) { - background-color: #ffffff; + background-color: var(--color-white); } } .even\:bg-gray-50 { &:nth-child(even) { - background-color: #F9FAFB; + background-color: var(--color-gray-50); } } .hover\:cursor-pointer { @@ -1286,136 +2723,150 @@ } } } - .hover\:border-gray-300 { + .hover\:border-default { &:hover { @media (hover: hover) { - border-color: #D1D5DB; + border-color: var(--color-default); } } } .hover\:border-green-600 { &:hover { @media (hover: hover) { - border-color: #057A55; + border-color: var(--color-green-600); } } } .hover\:bg-blue-800 { &:hover { @media (hover: hover) { - background-color: #1E429F; + background-color: var(--color-blue-800); + } + } + } + .hover\:bg-brand-strong { + &:hover { + @media (hover: hover) { + background-color: var(--color-brand-strong); } } } .hover\:bg-gray-50 { &:hover { @media (hover: hover) { - background-color: #F9FAFB; + background-color: var(--color-gray-50); } } } .hover\:bg-gray-100 { &:hover { @media (hover: hover) { - background-color: #F3F4F6; + background-color: var(--color-gray-100); } } } .hover\:bg-gray-200 { &:hover { @media (hover: hover) { - background-color: #E5E7EB; + background-color: var(--color-gray-200); } } } .hover\:bg-green-500 { &:hover { @media (hover: hover) { - background-color: #0E9F6E; + background-color: var(--color-green-500); } } } .hover\:bg-green-700 { &:hover { @media (hover: hover) { - background-color: #046C4E; + background-color: var(--color-green-700); } } } .hover\:bg-green-800 { &:hover { @media (hover: hover) { - background-color: #03543F; + background-color: var(--color-green-800); + } + } + } + .hover\:bg-neutral-tertiary-medium { + &:hover { + @media (hover: hover) { + background-color: var(--color-neutral-tertiary-medium); } } } .hover\:bg-red-100 { &:hover { @media (hover: hover) { - background-color: #FDE8E8; + background-color: var(--color-red-100); } } } .hover\:bg-red-500 { &:hover { @media (hover: hover) { - background-color: #F05252; + background-color: var(--color-red-500); } } } .hover\:bg-red-800 { &:hover { @media (hover: hover) { - background-color: #9B1C1C; + background-color: var(--color-red-800); } } } .hover\:bg-white { &:hover { @media (hover: hover) { - background-color: #ffffff; - } - } - } - .hover\:text-blue-600 { - &:hover { - @media (hover: hover) { - color: #1C64F2; + background-color: var(--color-white); } } } .hover\:text-blue-700 { &:hover { @media (hover: hover) { - color: #1A56DB; + color: var(--color-blue-700); } } } - .hover\:text-gray-600 { + .hover\:text-fg-brand { &:hover { @media (hover: hover) { - color: #4B5563; + color: var(--color-fg-brand); } } } .hover\:text-gray-700 { &:hover { @media (hover: hover) { - color: #374151; + color: var(--color-gray-700); } } } .hover\:text-gray-900 { &:hover { @media (hover: hover) { - color: #111827; + color: var(--color-gray-900); + } + } + } + .hover\:text-heading { + &:hover { + @media (hover: hover) { + color: var(--color-heading); } } } .hover\:text-white { &:hover { @media (hover: hover) { - color: #ffffff; + color: var(--color-white); } } } @@ -1426,12 +2877,17 @@ } .focus\:border-blue-500 { &:focus { - border-color: #3F83F8; + border-color: var(--color-blue-500); + } + } + .focus\:border-brand { + &:focus { + border-color: var(--color-brand); } } .focus\:text-blue-700 { &:focus { - color: #1A56DB; + color: var(--color-blue-700); } } .focus\:ring-2 { @@ -1448,47 +2904,62 @@ } .focus\:ring-blue-300 { &:focus { - --tw-ring-color: #A4CAFE; + --tw-ring-color: var(--color-blue-300); } } .focus\:ring-blue-500 { &:focus { - --tw-ring-color: #3F83F8; + --tw-ring-color: var(--color-blue-500); } } .focus\:ring-blue-700 { &:focus { - --tw-ring-color: #1A56DB; + --tw-ring-color: var(--color-blue-700); + } + } + .focus\:ring-brand { + &:focus { + --tw-ring-color: var(--color-brand); + } + } + .focus\:ring-brand-medium { + &:focus { + --tw-ring-color: var(--color-brand-medium); } } .focus\:ring-gray-100 { &:focus { - --tw-ring-color: #F3F4F6; + --tw-ring-color: var(--color-gray-100); } } .focus\:ring-gray-200 { &:focus { - --tw-ring-color: #E5E7EB; + --tw-ring-color: var(--color-gray-200); } } .focus\:ring-green-300 { &:focus { - --tw-ring-color: #84E1BC; + --tw-ring-color: var(--color-green-300); } } .focus\:ring-green-500 { &:focus { - --tw-ring-color: #0E9F6E; + --tw-ring-color: var(--color-green-500); } } .focus\:ring-green-700 { &:focus { - --tw-ring-color: #046C4E; + --tw-ring-color: var(--color-green-700); + } + } + .focus\:ring-neutral-tertiary { + &:focus { + --tw-ring-color: var(--color-neutral-tertiary); } } .focus\:ring-red-300 { &:focus { - --tw-ring-color: #F8B4B4; + --tw-ring-color: var(--color-red-300); } } .focus\:ring-offset-2 { @@ -1499,7 +2970,7 @@ } .focus\:ring-offset-blue-200 { &:focus { - --tw-ring-offset-color: #C3DDFD; + --tw-ring-offset-color: var(--color-blue-200); } } .focus\:outline-hidden { @@ -1512,6 +2983,12 @@ } } } + .focus\:outline-none { + &:focus { + --tw-outline-style: none; + outline-style: none; + } + } .sm\:table-cell { @media (width >= 40rem) { display: table-cell; @@ -1631,7 +3108,7 @@ } .md\:bg-white { @media (width >= 48rem) { - background-color: #ffffff; + background-color: var(--color-white); } } .md\:p-0 { @@ -1651,7 +3128,7 @@ } .md\:text-blue-700 { @media (width >= 48rem) { - color: #1A56DB; + color: var(--color-blue-700); } } .md\:hover\:bg-transparent { @@ -1667,7 +3144,7 @@ @media (width >= 48rem) { &:hover { @media (hover: hover) { - color: #1A56DB; + color: var(--color-blue-700); } } } @@ -1697,6 +3174,11 @@ max-width: var(--breakpoint-2xl); } } + .rtl\:rotate-180 { + &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + rotate: 180deg; + } + } .rtl\:space-x-reverse { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { :where(& > :not(:last-child)) { @@ -1728,123 +3210,127 @@ .dark\:divide-gray-600 { &:is(.dark *) { :where(& > :not(:last-child)) { - border-color: #4B5563; + border-color: var(--color-gray-600); } } } - .dark\:border-blue-500 { - &:is(.dark *) { - border-color: #3F83F8; - } - } .dark\:border-gray-500 { &:is(.dark *) { - border-color: #6B7280; + border-color: var(--color-gray-500); } } .dark\:border-gray-600 { &:is(.dark *) { - border-color: #4B5563; + border-color: var(--color-gray-600); } } .dark\:border-gray-700 { &:is(.dark *) { - border-color: #374151; + border-color: var(--color-gray-700); } } .dark\:border-purple-600 { &:is(.dark *) { - border-color: #7E3AF2; - } - } - .dark\:border-transparent { - &:is(.dark *) { - border-color: transparent; + border-color: var(--color-purple-600); } } .dark\:bg-blue-200 { &:is(.dark *) { - background-color: #C3DDFD; + background-color: var(--color-blue-200); } } .dark\:bg-blue-600 { &:is(.dark *) { - background-color: #1C64F2; + background-color: var(--color-blue-600); + } + } + .dark\:bg-gray-600 { + &:is(.dark *) { + background-color: var(--color-gray-600); + } + } + .dark\:bg-gray-600\/50 { + &:is(.dark *) { + background-color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-gray-600) 50%, transparent); + } } } .dark\:bg-gray-700 { &:is(.dark *) { - background-color: #374151; - } - } - .dark\:bg-gray-700\! { - &:is(.dark *) { - background-color: #374151 !important; + background-color: var(--color-gray-700); } } .dark\:bg-gray-800 { &:is(.dark *) { - background-color: #1F2937; + background-color: var(--color-gray-800); } } .dark\:bg-gray-800\/50 { &:is(.dark *) { - background-color: color-mix(in oklab, #1F2937 50%, transparent); + background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent); + } } } .dark\:bg-gray-900 { &:is(.dark *) { - background-color: #111827; + background-color: var(--color-gray-900); } } .dark\:bg-gray-900\/80 { &:is(.dark *) { - background-color: color-mix(in oklab, #111827 80%, transparent); + background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent); + } } } .dark\:bg-green-600 { &:is(.dark *) { - background-color: #057A55; + background-color: var(--color-green-600); } } .dark\:bg-purple-800 { &:is(.dark *) { - background-color: #5521B5; + background-color: var(--color-purple-800); } } .dark\:bg-red-600 { &:is(.dark *) { - background-color: #E02424; - } - } - .dark\:text-blue-500 { - &:is(.dark *) { - color: #3F83F8; + background-color: var(--color-red-600); } } .dark\:text-blue-800 { &:is(.dark *) { - color: #1E429F; + color: var(--color-blue-800); } } .dark\:text-gray-200 { &:is(.dark *) { - color: #E5E7EB; + color: var(--color-gray-200); } } .dark\:text-gray-300 { &:is(.dark *) { - color: #D1D5DB; + color: var(--color-gray-300); } } .dark\:text-gray-400 { &:is(.dark *) { - color: #9CA3AF; + color: var(--color-gray-400); + } + } + .dark\:text-gray-500 { + &:is(.dark *) { + color: var(--color-gray-500); } } .dark\:text-gray-600 { &:is(.dark *) { - color: #4B5563; + color: var(--color-gray-600); } } .dark\:text-slate-300 { @@ -1864,27 +3350,27 @@ } .dark\:text-white { &:is(.dark *) { - color: #ffffff; + color: var(--color-white); } } .dark\:placeholder-gray-400 { &:is(.dark *) { &::placeholder { - color: #9CA3AF; + color: var(--color-gray-400); } } } .dark\:odd\:bg-gray-900 { &:is(.dark *) { &:nth-child(odd) { - background-color: #111827; + background-color: var(--color-gray-900); } } } .dark\:even\:bg-gray-800 { &:is(.dark *) { &:nth-child(even) { - background-color: #1F2937; + background-color: var(--color-gray-800); } } } @@ -1892,7 +3378,7 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - border-color: #046C4E; + border-color: var(--color-green-700); } } } @@ -1901,7 +3387,7 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - border-color: #C81E1E; + border-color: var(--color-red-700); } } } @@ -1910,7 +3396,7 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - background-color: #1A56DB; + background-color: var(--color-blue-700); } } } @@ -1919,7 +3405,7 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - background-color: #4B5563; + background-color: var(--color-gray-600); } } } @@ -1928,7 +3414,7 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - background-color: #374151; + background-color: var(--color-gray-700); } } } @@ -1937,7 +3423,7 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - background-color: #1F2937; + background-color: var(--color-gray-800); } } } @@ -1946,7 +3432,7 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - background-color: #057A55; + background-color: var(--color-green-600); } } } @@ -1955,7 +3441,7 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - background-color: #046C4E; + background-color: var(--color-green-700); } } } @@ -1964,25 +3450,7 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - background-color: #C81E1E; - } - } - } - } - .dark\:hover\:text-blue-500 { - &:is(.dark *) { - &:hover { - @media (hover: hover) { - color: #3F83F8; - } - } - } - } - .dark\:hover\:text-gray-300 { - &:is(.dark *) { - &:hover { - @media (hover: hover) { - color: #D1D5DB; + background-color: var(--color-red-700); } } } @@ -1991,7 +3459,7 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - color: #ffffff; + color: var(--color-white); } } } @@ -1999,70 +3467,70 @@ .dark\:focus\:border-blue-500 { &:is(.dark *) { &:focus { - border-color: #3F83F8; + border-color: var(--color-blue-500); } } } .dark\:focus\:text-white { &:is(.dark *) { &:focus { - color: #ffffff; + color: var(--color-white); } } } .dark\:focus\:ring-blue-500 { &:is(.dark *) { &:focus { - --tw-ring-color: #3F83F8; + --tw-ring-color: var(--color-blue-500); } } } .dark\:focus\:ring-blue-800 { &:is(.dark *) { &:focus { - --tw-ring-color: #1E429F; + --tw-ring-color: var(--color-blue-800); } } } .dark\:focus\:ring-gray-600 { &:is(.dark *) { &:focus { - --tw-ring-color: #4B5563; + --tw-ring-color: var(--color-gray-600); } } } .dark\:focus\:ring-gray-700 { &:is(.dark *) { &:focus { - --tw-ring-color: #374151; + --tw-ring-color: var(--color-gray-700); } } } .dark\:focus\:ring-green-500 { &:is(.dark *) { &:focus { - --tw-ring-color: #0E9F6E; + --tw-ring-color: var(--color-green-500); } } } .dark\:focus\:ring-green-800 { &:is(.dark *) { &:focus { - --tw-ring-color: #03543F; + --tw-ring-color: var(--color-green-800); } } } .dark\:focus\:ring-red-900 { &:is(.dark *) { &:focus { - --tw-ring-color: #771D1D; + --tw-ring-color: var(--color-red-900); } } } .md\:dark\:bg-gray-900 { @media (width >= 48rem) { &:is(.dark *) { - background-color: #111827; + background-color: var(--color-gray-900); } } } @@ -2076,7 +3544,7 @@ .md\:dark\:text-blue-500 { @media (width >= 48rem) { &:is(.dark *) { - color: #3F83F8; + color: var(--color-blue-500); } } } @@ -2096,7 +3564,7 @@ &:is(.dark *) { &:hover { @media (hover: hover) { - color: #3F83F8; + color: var(--color-blue-500); } } } @@ -2165,6 +3633,89 @@ } } } +.dark { + --color-body: var(--color-gray-400); + --color-body-subtle: var(--color-gray-400); + --color-heading: var(--color-white); + --color-fg-brand-subtle: var(--color-blue-200); + --color-fg-brand: var(--color-blue-500); + --color-fg-brand-strong: var(--color-blue-400); + --color-fg-success: var(--color-emerald-600); + --color-fg-success-strong: var(--color-emerald-300); + --color-fg-danger: var(--color-rose-500); + --color-fg-danger-strong: var(--color-rose-300); + --color-fg-warning-subtle: var(--color-orange-500); + --color-fg-warning: var(--color-orange-300); + --color-fg-yellow: var(--color-yellow-400); + --color-fg-disabled: var(--color-gray-600); + --color-fg-purple: var(--color-purple-500); + --color-fg-cyan: var(--color-cyan-500); + --color-fg-indigo: var(--color-indigo-500); + --color-fg-pink: var(--color-pink-500); + --color-fg-lime: var(--color-lime-500); + --color-neutral-primary-soft: var(--color-gray-900); + --color-neutral-primary: var(--color-gray-950); + --color-neutral-primary-medium: var(--color-gray-800); + --color-neutral-primary-strong: var(--color-gray-700); + --color-neutral-secondary-soft: var(--color-gray-900); + --color-neutral-secondary: var(--color-gray-950); + --color-neutral-secondary-medium: var(--color-gray-800); + --color-neutral-secondary-strong: var(--color-gray-700); + --color-neutral-secondary-strongest: var(--color-gray-600); + --color-neutral-tertiary-soft: var(--color-gray-900); + --color-neutral-tertiary: var(--color-gray-800); + --color-neutral-tertiary-medium: var(--color-gray-700); + --color-neutral-quaternary: var(--color-gray-700); + --color-neutral-quaternary-medium: var(--color-gray-600); + --color-gray: var(--color-gray-600); + --color-brand-softer: var(--color-blue-950); + --color-brand-soft: var(--color-blue-900); + --color-brand: var(--color-blue-600); + --color-brand-medium: var(--color-blue-900); + --color-brand-strong: var(--color-blue-700); + --color-success-soft: var(--color-emerald-950); + --color-success: var(--color-emerald-600); + --color-success-medium: var(--color-emerald-900); + --color-success-strong: var(--color-emerald-700); + --color-danger-soft: var(--color-rose-950); + --color-danger: var(--color-rose-700); + --color-danger-medium: var(--color-rose-900); + --color-danger-strong: var(--color-rose-800); + --color-warning-soft: var(--color-orange-950); + --color-warning: var(--color-orange-600); + --color-warning-medium: var(--color-orange-900); + --color-warning-strong: var(--color-orange-700); + --color-dark-soft: var(--color-gray-700); + --color-dark: var(--color-gray-800); + --color-dark-strong: var(--color-gray-700); + --color-disabled: var(--color-gray-800); + --color-purple: var(--color-purple-500); + --color-sky: var(--color-sky-500); + --color-teal: var(--color-teal-500); + --color-pink: var(--color-pink-500); + --color-cyan: var(--color-cyan-500); + --color-fuchsia: var(--color-fuchsia-500); + --color-indigo: var(--color-indigo-500); + --color-orange: var(--color-orange-400); + --color-buffer: var(--color-gray-950); + --color-buffer-medium: var(--color-gray-900); + --color-buffer-strong: var(--color-gray-800); + --color-muted: var(--color-gray-900); + --color-light-subtle: var(--color-gray-900); + --color-light: var(--color-gray-800); + --color-light-medium: var(--color-gray-700); + --color-default-subtle: var(--color-gray-900); + --color-default: var(--color-gray-800); + --color-default-medium: var(--color-gray-700); + --color-default-strong: var(--color-gray-600); + --color-success-subtle: var(--color-emerald-900); + --color-danger-subtle: var(--color-rose-900); + --color-warning-subtle: var(--color-orange-900); + --color-brand-subtle: var(--color-blue-900); + --color-brand-light: var(--color-blue-600); + --color-dark-subtle: var(--color-gray-700); + --color-dark-backdrop: var(--color-gray-950); +} @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentcolor); @@ -2205,17 +3756,17 @@ margin-inline: auto; table-layout: fixed; &:is(.dark *) { - color: #ffffff; + color: var(--color-white); } } .responsive-table tr:nth-child(even) { - background-color: #E5EDFF; + background-color: var(--color-indigo-100); &:is(.dark *) { background-color: var(--color-slate-800); } } .responsive-table tbody tr:nth-child(odd) { - background-color: #CDDBFE; + background-color: var(--color-indigo-200); &:is(.dark *) { background-color: var(--color-slate-900); } @@ -2236,18 +3787,14 @@ } form input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; - &:is(.dark *) { - background-color: var(--color-slate-800); - } - &:is(.dark *) { - color: var(--color-slate-500); - } + background-color: var(--color-neutral-secondary-strong); + color: var(--color-fg-disabled); } .errorlist { margin-top: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 1); width: 300px; - background-color: #E02424; + background-color: var(--color-red-600); padding-block: calc(var(--spacing) * 2); padding-left: calc(var(--spacing) * 3); color: var(--color-slate-200); @@ -2267,7 +3814,7 @@ form input:disabled, select:disabled, textarea:disabled { .basic-button { display: inline-block; border-radius: var(--radius-sm); - background-color: #1C64F2; + background-color: var(--color-blue-600); padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 2.5); font-size: var(--text-xs); @@ -2276,7 +3823,7 @@ form input:disabled, select:disabled, textarea:disabled { line-height: var(--leading-tight); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); - color: #ffffff; + color: var(--color-white); text-transform: uppercase; --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); @@ -2289,7 +3836,7 @@ form input:disabled, select:disabled, textarea:disabled { transition-timing-function: var(--ease-in-out); &:hover { @media (hover: hover) { - background-color: #1A56DB; + background-color: var(--color-blue-700); } } &:hover { @@ -2299,7 +3846,7 @@ form input:disabled, select:disabled, textarea:disabled { } } &:focus { - background-color: #1A56DB; + background-color: var(--color-blue-700); } &:focus { --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)); @@ -2318,7 +3865,7 @@ form input:disabled, select:disabled, textarea:disabled { } } &:active { - background-color: #1E429F; + background-color: var(--color-blue-800); } &:active { --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)); @@ -2345,48 +3892,138 @@ form input:disabled, select:disabled, textarea:disabled { margin-bottom: 0.5em; padding-left: 1em; } -label { - &:is(.dark *) { - color: var(--color-slate-500); +#add-form { + .form-row-button-group { + display: flex; + flex-direction: row; + gap: calc(var(--spacing) * 0); + padding: calc(var(--spacing) * 0); + button { + margin-right: calc(var(--spacing) * 0); + &:first-child { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + &:nth-child(2) { + border-radius: 0; + } + &:last-child { + border-start-start-radius: 0; + border-end-start-radius: 0; + } + } } -} -[type="text"], [type="password"], [type="datetime-local"], [type="datetime"], [type="date"], [type="number"], select, textarea { - &:is(.dark *) { - background-color: var(--color-slate-600); + label { + margin-bottom: calc(var(--spacing) * 2.5); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + color: var(--color-heading); } - &:is(.dark *) { - color: var(--color-slate-300); + input:not([type="checkbox"]) { + margin-bottom: calc(var(--spacing) * 3); + display: block; + width: 100%; + border-radius: var(--radius-base); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-default-medium); + background-color: var(--color-neutral-secondary-medium); + padding-inline: calc(var(--spacing) * 3); + padding-block: calc(var(--spacing) * 2.5); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + color: var(--color-heading); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + &::placeholder { + color: var(--color-body); + } + &:focus { + border-color: var(--color-brand); + } + &:focus { + --tw-ring-color: var(--color-brand); + } } -} -[type="submit"] { - padding-inline: calc(var(--spacing) * 4); - padding-block: calc(var(--spacing) * 2); - --tw-font-weight: var(--font-weight-bold); - font-weight: var(--font-weight-bold); - &:is(.dark *) { - background-color: #1C64F2; + input[type="checkbox"] { + height: calc(var(--spacing) * 4); + width: calc(var(--spacing) * 4); + border-radius: var(--radius-xs); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-default-medium); + background-color: var(--color-neutral-secondary-medium); + &:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + &:focus { + --tw-ring-color: var(--color-brand-soft); + } } - &:is(.dark *) { - color: #ffffff; + select { + width: 100%; + border-radius: var(--radius-base); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-default-medium); + background-color: var(--color-neutral-secondary-medium); + padding-inline: calc(var(--spacing) * 3); + padding-block: calc(var(--spacing) * 2.5); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + color: var(--color-heading); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + &::placeholder { + color: var(--color-body); + } + &:focus { + border-color: var(--color-brand); + } + &:focus { + --tw-ring-color: var(--color-brand); + } } -} -form div label { - &:is(.dark *) { - color: #ffffff; + textarea { + display: block; + width: 100%; + border-radius: var(--radius-base); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-default-medium); + background-color: var(--color-neutral-secondary-medium); + padding: calc(var(--spacing) * 3.5); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + color: var(--color-heading); + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + &::placeholder { + color: var(--color-body); + } + &:focus { + border-color: var(--color-brand); + } + &:focus { + --tw-ring-color: var(--color-brand); + } + } + :has(> label + input[type="checkbox"]) { + margin-top: calc(var(--spacing) * 6); + margin-bottom: calc(var(--spacing) * 3); + display: flex; + flex-direction: row; + justify-content: space-between; } -} -form div { - display: flex; - flex-direction: column; -} -div [type="submit"] { - margin-top: calc(var(--spacing) * 3); } @layer base { input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select { appearance: none; background-color: #fff; - border-color: #6B7280; + border-color: oklch(55.1% 0.027 264.364); border-width: 1px; border-radius: 0px; padding-top: 0.5rem; @@ -2402,15 +4039,15 @@ div [type="submit"] { --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; - --tw-ring-color: #1C64F2; + --tw-ring-color: oklch(54.6% 0.245 262.881); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - border-color: #1C64F2; + border-color: oklch(54.6% 0.245 262.881); } } input::placeholder,textarea::placeholder { - color: #6B7280; + color: oklch(55.1% 0.027 264.364); opacity: 1; } ::-webkit-datetime-edit-fields-wrapper { @@ -2430,7 +4067,7 @@ div [type="submit"] { padding-bottom: 0; } select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; @@ -2456,9 +4093,9 @@ div [type="submit"] { flex-shrink: 0; height: 1rem; width: 1rem; - color: #1C64F2; + color: oklch(54.6% 0.245 262.881); background-color: #fff; - border-color: #6B7280; + border-color: oklch(55.1% 0.027 264.364); border-width: 1px; --tw-shadow: 0 0 #0000; } @@ -2474,7 +4111,7 @@ div [type="submit"] { --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 2px; --tw-ring-offset-color: #fff; - --tw-ring-color: #1C64F2; + --tw-ring-color: oklch(54.6% 0.245 262.881); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -2548,7 +4185,7 @@ div [type="submit"] { } [data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before { border-style: solid; - border-color: oklch(92.8% 0.006 264.531); + border-color: var(--color-neutral-tertiary); } [data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before { border-bottom-width: 1px; @@ -2567,16 +4204,16 @@ div [type="submit"] { border-right-width: 1px; } .tooltip[data-popper-placement^='top'] > .tooltip-arrow { - bottom: -4px; + bottom: -3px; } .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow { - top: -4px; + top: -3px; } .tooltip[data-popper-placement^='left'] > .tooltip-arrow { - right: -4px; + right: -3px; } .tooltip[data-popper-placement^='right'] > .tooltip-arrow { - left: -4px; + left: -3px; } .tooltip.invisible > .tooltip-arrow:before { visibility: hidden; @@ -2606,19 +4243,19 @@ div [type="submit"] { } [role="tooltip"] > [data-popper-arrow]:before { border-style: solid; - border-color: oklch(92.8% 0.006 264.531); + border-color: var(--color-neutral-tertiary); } .dark [role="tooltip"] > [data-popper-arrow]:before { border-style: solid; - border-color: oklch(44.6% 0.03 256.802); + border-color: var(--color-dark); } [role="tooltip"] > [data-popper-arrow]:after { border-style: solid; - border-color: oklch(92.8% 0.006 264.531); + border-color: var(--color-neutral-tertiary); } .dark [role="tooltip"] > [data-popper-arrow]:after { border-style: solid; - border-color: oklch(44.6% 0.03 256.802); + border-color: var(--color-dark); } [data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before { border-bottom-width: 1px; @@ -2653,16 +4290,16 @@ div [type="submit"] { border-right-width: 1px; } [data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow] { - bottom: -5px; + bottom: -4px; } [data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow] { - top: -5px; + top: -4px; } [data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow] { - right: -5px; + right: -4px; } [data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow] { - left: -5px; + left: -4px; } [role="tooltip"].invisible > [data-popper-arrow]:before { visibility: hidden; @@ -2675,7 +4312,7 @@ div [type="submit"] { [type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { appearance: none; background-color: #fff; - border-color: #6B7280; + border-color: var(--color-body); border-width: 1px; border-radius: 0px; padding-top: 0.5rem; @@ -2691,15 +4328,15 @@ div [type="submit"] { --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; - --tw-ring-color: #1C64F2; + --tw-ring-color: var(--color-brand); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - border-color: #1C64F2; + border-color: var(--color-brand); } } input::placeholder,textarea::placeholder { - color: #6B7280; + color: var(--color-body); opacity: 1; } ::-webkit-datetime-edit-fields-wrapper { @@ -2709,7 +4346,7 @@ div [type="submit"] { background: none; } select:not([size]) { - background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 0.75em 0.75em; @@ -2730,6 +4367,7 @@ div [type="submit"] { print-color-adjust: unset; } [type='checkbox'],[type='radio'] { + position: relative; appearance: none; padding: 0; print-color-adjust: exact; @@ -2737,12 +4375,12 @@ div [type="submit"] { vertical-align: middle; background-origin: border-box; user-select: none; - shrink: 0; + flex-shrink: 0; height: 1rem; width: 1rem; - color: #1C64F2; + color: var(--color-brand); background-color: #fff; - border-color: #6B7280; + border-color: var(--color-default); border-width: 1px; --tw-shadow: 0 0 #0000; } @@ -2753,49 +4391,85 @@ div [type="submit"] { border-radius: 100%; } [type='checkbox']:focus,[type='radio']:focus { - outline: 2px solid transparent; - outline-offset: 2px; + outline: 1px solid transparent; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 2px; --tw-ring-offset-color: #fff; - --tw-ring-color: #1C64F2; + --tw-ring-color: var(--color-brand); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + [type='checkbox']:checked,.dark [type='checkbox']:checked { + border-color: currentColor !important; + } [type='checkbox']:checked,[type='radio']:checked,.dark [type='checkbox']:checked,.dark [type='radio']:checked { - border-color: transparent; - background-color: currentColor; - background-size: 0.55em 0.55em; + background-color: currentColor !important; + background-size: 0.85em 0.85em !important; background-position: center; background-repeat: no-repeat; } [type='checkbox']:checked { - background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 11.917 9.724 16.5 19 7.5'/%3e %3c/svg%3e"); background-repeat: no-repeat; - background-size: 0.55em 0.55em; + background-size: 0.75em 0.75em; print-color-adjust: exact; } - [type='radio']:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); - background-size: 1em 1em; + [type='radio']:checked:before, [type='radio']:disabled:checked:before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 100%; + background-color: var(--color-brand); + width: .9em !important; + height: .9em !important; } - .dark [type='radio']:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); - background-size: 1em 1em; + [type='radio']:checked:after, [type='radio']:disabled:checked:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 100%; + background-color: var(--color-white); + width: .35em !important; + height: .35em !important; + } + .dark [type='radio']:checked:before, .dark [type='radio']:disabled:checked:before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 100%; + background-color: var(--color-brand); + width: .9em !important; + height: .9em !important; + } + .dark [type='radio']:checked:after, .dark [type='radio']:disabled:checked:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 100%; + background-color: var(--color-white); + width: .35em !important; + height: .35em !important; } [type='checkbox']:indeterminate { background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e"); - background-color: currentColor; - border-color: transparent; + background-color: currentColor !important; + border-color: transparent !important; background-position: center; background-repeat: no-repeat; - background-size: 0.55em 0.55em; + background-size: 1.55em 1.55em; print-color-adjust: exact; } [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { - border-color: transparent; - background-color: currentColor; + border-color: transparent !important; + background-color: currentColor !important; } [type='file'] { background: unset; @@ -2810,14 +4484,11 @@ div [type="submit"] { outline: 1px auto inherit; } input[type=file]::file-selector-button { - color: white; - background: #1F2937; + color: var(--color-body); + background: var(--color-neutral-quaternary); border: 0; font-weight: 500; font-size: 0.875rem; - font-size { - line-height: calc(1.25 / 0.875); - } cursor: pointer; padding-top: 0.625rem; padding-bottom: 0.625rem; @@ -2826,7 +4497,7 @@ div [type="submit"] { margin-inline-start: -1rem; margin-inline-end: 1rem; &:hover { - background: #374151; + background: var(--color-neutral-quaternary); } } :is([dir=rtl]) input[type=file]::file-selector-button { @@ -2834,16 +4505,16 @@ div [type="submit"] { padding-left: 1rem; } .dark input[type=file]::file-selector-button { - color: white; - background: #4B5563; + color: var(--color-body); + background: var(--color-neutral-quaternary); &:hover { - background: #6B7280; + background: var(--color-neutral-quaternary); } } input[type="range"]::-webkit-slider-thumb { height: 1.25rem; width: 1.25rem; - background: #1C64F2; + background: var(--color-brand); border-radius: 9999px; border: 0; appearance: none; @@ -2852,10 +4523,10 @@ div [type="submit"] { cursor: pointer; } input[type="range"]:disabled::-webkit-slider-thumb { - background: #9CA3AF; + background: var(--color-body); } .dark input[type="range"]:disabled::-webkit-slider-thumb { - background: #6B7280; + background: var(--color-body); } input[type="range"]:focus::-webkit-slider-thumb { outline: 2px solid transparent; @@ -2869,7 +4540,7 @@ div [type="submit"] { input[type="range"]::-moz-range-thumb { height: 1.25rem; width: 1.25rem; - background: #1C64F2; + background: var(--color-brand); border-radius: 9999px; border: 0; appearance: none; @@ -2878,16 +4549,16 @@ div [type="submit"] { cursor: pointer; } input[type="range"]:disabled::-moz-range-thumb { - background: #9CA3AF; + background: var(--color-body); } .dark input[type="range"]:disabled::-moz-range-thumb { - background: #6B7280; + background: var(--color-body); } input[type="range"]::-moz-range-progress { - background: #3F83F8; + background: var(--color-brand); } input[type="range"]::-ms-fill-lower { - background: #3F83F8; + background: var(--color-brand); } input[type="range"].range-sm::-webkit-slider-thumb { height: 1rem; @@ -2911,7 +4582,7 @@ div [type="submit"] { top: 0.125rem; left: 0.125rem; background: white; - border-color: #D1D5DB; + border-color: var(--color-default); border-width: 1px; border-radius: 9999px; height: 1.25rem; @@ -2925,8 +4596,8 @@ div [type="submit"] { border-color: white; } input:checked + .toggle-bg { - background: #1C64F2; - border-color: #1C64F2; + background: var(--color-brand); + border-color: var(--color-brand); } } @property --tw-translate-x { @@ -3168,6 +4839,11 @@ div [type="submit"] { transform: rotate(360deg); } } +@keyframes pulse { + 50% { + opacity: 0.5; + } +} @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { diff --git a/games/templates/add_game.html b/games/templates/add_game.html index a6c67a6..6d486c3 100644 --- a/games/templates/add_game.html +++ b/games/templates/add_game.html @@ -1,7 +1,9 @@ - + > + Submit & Create Purchase + diff --git a/games/templates/add_purchase.html b/games/templates/add_purchase.html index b1df211..38a2f5a 100644 --- a/games/templates/add_purchase.html +++ b/games/templates/add_purchase.html @@ -3,9 +3,11 @@ - + value="Submit & Create Session"> + diff --git a/games/templates/add_session.html b/games/templates/add_session.html index 6226611..966bd23 100644 --- a/games/templates/add_session.html +++ b/games/templates/add_session.html @@ -1,36 +1,38 @@ -
- - {% csrf_token %} - {% for field in form %} - - +
+
+ + {% csrf_token %} + {% for field in form %} +
+ {{ field.label_tag }} {% if field.name == "note" %} -
+ {{ field }} {% else %} - + {{ field }} {% endif %} {% if field.name == "timestamp_start" or field.name == "timestamp_end" %} - + + Set to now + Toggle text + + Copy {%if field.name == "timestamp_start" %}start{% else %}end{% endif %} value to {%if field.name == "timestamp_start" %}end{% else %}start{% endif %} + + {% endif %} - + {% endfor %} - - - - -
{{ field.label_tag }}{{ field }}{{ field }} -
- - - -
-
- -
-
+
+ + Submit + +
+
+ {{ additional_row }} +
+ + + diff --git a/games/templates/cotton/button.html b/games/templates/cotton/button.html index 015b44b..8cdee89 100644 --- a/games/templates/cotton/button.html +++ b/games/templates/cotton/button.html @@ -1,6 +1,11 @@ - diff --git a/games/templates/cotton/button_group.html b/games/templates/cotton/button_group.html index 76a0aeb..8427279 100644 --- a/games/templates/cotton/button_group.html +++ b/games/templates/cotton/button_group.html @@ -2,7 +2,7 @@ {% if slot %}{{ slot }}{% endif %} {% for button in buttons %} {% if button.slot %} - + {% endif %} {% endfor %} diff --git a/games/templates/cotton/button_group_button_sm.html b/games/templates/cotton/button_group_button_sm.html index 56e233b..f536bd5 100644 --- a/games/templates/cotton/button_group_button_sm.html +++ b/games/templates/cotton/button_group_button_sm.html @@ -1,5 +1,7 @@ {% if color == "gray" %} + + + diff --git a/games/templates/navbar.html b/games/templates/navbar.html index 370ea88..e77d5d8 100644 --- a/games/templates/navbar.html +++ b/games/templates/navbar.html @@ -1,5 +1,5 @@ {% load static %} -