From 0dd3f0413775bf71f30a5e0f097f153da5dc4640 Mon Sep 17 00:00:00 2001 From: pacnpal <183241239+pacnpal@users.noreply.github.com> Date: Wed, 24 Sep 2025 10:00:12 -0400 Subject: [PATCH] feat: Update Cloudflare Images settings and enhance Tailwind CSS utility classes for improved styling and responsiveness --- config/django/base.py | 10 +- static/css/tailwind.css | 333 +++++++++++++++++++++++++++++++++++++++- 2 files changed, 337 insertions(+), 6 deletions(-) diff --git a/config/django/base.py b/config/django/base.py index eec9e121..00d7fe6c 100644 --- a/config/django/base.py +++ b/config/django/base.py @@ -183,14 +183,14 @@ WSGI_APPLICATION = "thrillwiki.wsgi.application" # Cloudflare Images Settings - Updated for django-cloudflareimages-toolkit CLOUDFLARE_IMAGES = { - 'ACCOUNT_ID': config("CLOUDFLARE_IMAGES_ACCOUNT_ID"), - 'API_TOKEN': config("CLOUDFLARE_IMAGES_API_TOKEN"), - 'ACCOUNT_HASH': config("CLOUDFLARE_IMAGES_ACCOUNT_HASH"), + 'ACCOUNT_ID': config("CLOUDFLARE_IMAGES_ACCOUNT_ID", default="development"), + 'API_TOKEN': config("CLOUDFLARE_IMAGES_API_TOKEN", default="development"), + 'ACCOUNT_HASH': config("CLOUDFLARE_IMAGES_ACCOUNT_HASH", default="development"), # Optional settings 'DEFAULT_VARIANT': 'public', 'UPLOAD_TIMEOUT': 300, - 'WEBHOOK_SECRET': config("CLOUDFLARE_IMAGES_WEBHOOK_SECRET", default=""), + 'WEBHOOK_SECRET': config("CLOUDFLARE_IMAGES_WEBHOOK_SECRET", default="development"), 'CLEANUP_EXPIRED_HOURS': 24, 'MAX_FILE_SIZE': 10 * 1024 * 1024, # 10MB 'ALLOWED_FORMATS': ['jpeg', 'png', 'gif', 'webp'], @@ -315,7 +315,7 @@ TEST_RUNNER = "django.test.runner.DiscoverRunner" ROADTRIP_CACHE_TIMEOUT = 3600 * 24 # 24 hours for geocoding ROADTRIP_ROUTE_CACHE_TIMEOUT = 3600 * 6 # 6 hours for routes ROADTRIP_MAX_REQUESTS_PER_SECOND = 1 # Respect OSM rate limits -ROADTRIP_USER_AGENT = config("ROADTRIP_USER_AGENT") +ROADTRIP_USER_AGENT = config("ROADTRIP_USER_AGENT", default="ThrillWiki/1.0 (+https://thrillwiki.com)") ROADTRIP_REQUEST_TIMEOUT = 10 # seconds ROADTRIP_MAX_RETRIES = 3 ROADTRIP_BACKOFF_FACTOR = 2 diff --git a/static/css/tailwind.css b/static/css/tailwind.css index 3ca5d879..f1648bdf 100644 --- a/static/css/tailwind.css +++ b/static/css/tailwind.css @@ -20,6 +20,7 @@ --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-400: oklch(75% 0.183 55.934); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); @@ -217,7 +218,7 @@ } html, :host { line-height: 1.5; - -webkit-text-size-adjust: none; + -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); font-feature-settings: var(--default-font-feature-settings, normal); @@ -425,6 +426,9 @@ .top-4 { top: calc(var(--spacing) * 4); } + .top-6 { + top: calc(var(--spacing) * 6); + } .top-full { top: 100%; } @@ -449,6 +453,9 @@ .bottom-0 { bottom: calc(var(--spacing) * 0); } + .bottom-3 { + bottom: calc(var(--spacing) * 3); + } .bottom-4 { bottom: calc(var(--spacing) * 4); } @@ -470,6 +477,9 @@ .left-5 { left: calc(var(--spacing) * 5); } + .isolate { + isolation: isolate; + } .z-0 { z-index: 0; } @@ -587,6 +597,9 @@ .mt-4 { margin-top: calc(var(--spacing) * 4); } + .mt-5 { + margin-top: calc(var(--spacing) * 5); + } .mt-6 { margin-top: calc(var(--spacing) * 6); } @@ -791,6 +804,9 @@ .h-full { height: 100%; } + .max-h-0 { + max-height: calc(var(--spacing) * 0); + } .max-h-48 { max-height: calc(var(--spacing) * 48); } @@ -806,6 +822,9 @@ .max-h-\[90vh\] { max-height: 90vh; } + .max-h-screen { + max-height: 100vh; + } .min-h-20 { min-height: calc(var(--spacing) * 20); } @@ -1124,6 +1143,9 @@ .gap-4 { gap: calc(var(--spacing) * 4); } + .gap-5 { + gap: calc(var(--spacing) * 5); + } .gap-6 { gap: calc(var(--spacing) * 6); } @@ -1214,6 +1236,13 @@ margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } + .space-x-6 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse))); + } + } .space-x-8 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -1367,6 +1396,12 @@ border-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent); } } + .border-gray-200\/60 { + border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 60%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-gray-200) 60%, transparent); + } + } .border-gray-300 { border-color: var(--color-gray-300); } @@ -1376,6 +1411,9 @@ .border-green-200 { border-color: var(--color-green-200); } + .border-green-300 { + border-color: var(--color-green-300); + } .border-green-500 { border-color: var(--color-green-500); } @@ -1409,6 +1447,9 @@ .border-red-200 { border-color: var(--color-red-200); } + .border-red-300 { + border-color: var(--color-red-300); + } .border-red-400 { border-color: var(--color-red-400); } @@ -1424,9 +1465,15 @@ .border-yellow-200 { border-color: var(--color-yellow-200); } + .border-yellow-300 { + border-color: var(--color-yellow-300); + } .border-yellow-400 { border-color: var(--color-yellow-400); } + .border-t-blue-600 { + border-top-color: var(--color-blue-600); + } .border-t-transparent { border-top-color: transparent; } @@ -1454,6 +1501,12 @@ background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } + .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-black\/90 { background-color: color-mix(in srgb, #000 90%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -1610,6 +1663,9 @@ .bg-teal-100 { background-color: var(--color-teal-100); } + .bg-transparent { + background-color: transparent; + } .bg-violet-100 { background-color: var(--color-violet-100); } @@ -1683,6 +1739,13 @@ } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .from-black\/30 { + --tw-gradient-from: color-mix(in srgb, #000 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-from: color-mix(in oklab, var(--color-black) 30%, transparent); + } + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .from-black\/70 { --tw-gradient-from: color-mix(in srgb, #000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -1694,6 +1757,10 @@ --tw-gradient-from: var(--color-blue-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .from-blue-100 { + --tw-gradient-from: var(--color-blue-100); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .from-blue-500 { --tw-gradient-from: var(--color-blue-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -1765,6 +1832,11 @@ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-purple-600 { + --tw-gradient-via: var(--color-purple-600); + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } .via-transparent { --tw-gradient-via: transparent; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); @@ -1811,10 +1883,18 @@ --tw-gradient-to: var(--color-pink-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .to-pink-600 { + --tw-gradient-to: var(--color-pink-600); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .to-purple-50 { --tw-gradient-to: var(--color-purple-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .to-purple-100 { + --tw-gradient-to: var(--color-purple-100); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .to-purple-600 { --tw-gradient-to: var(--color-purple-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -1946,6 +2026,12 @@ .pt-4 { padding-top: calc(var(--spacing) * 4); } + .pt-5 { + padding-top: calc(var(--spacing) * 5); + } + .pt-6 { + padding-top: calc(var(--spacing) * 6); + } .pr-3 { padding-right: calc(var(--spacing) * 3); } @@ -2288,6 +2374,10 @@ --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-2xl { + --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -2312,6 +2402,10 @@ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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); } + .ring-1 { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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); + } .ring-2 { --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); @@ -2320,9 +2414,42 @@ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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); } + .shadow-blue-200\/50 { + --tw-shadow-color: color-mix(in srgb, oklch(88.2% 0.059 254.128) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-200) 50%, transparent) var(--tw-shadow-alpha), transparent); + } + } + .shadow-gray-200\/50 { + --tw-shadow-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-200) 50%, transparent) var(--tw-shadow-alpha), transparent); + } + } + .shadow-green-200\/50 { + --tw-shadow-color: color-mix(in srgb, oklch(92.5% 0.084 155.995) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-200) 50%, transparent) var(--tw-shadow-alpha), transparent); + } + } + .shadow-red-200\/50 { + --tw-shadow-color: color-mix(in srgb, oklch(88.5% 0.062 18.334) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-200) 50%, transparent) var(--tw-shadow-alpha), transparent); + } + } + .shadow-yellow-200\/50 { + --tw-shadow-color: color-mix(in srgb, oklch(94.5% 0.129 101.54) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yellow-200) 50%, transparent) var(--tw-shadow-alpha), transparent); + } + } .ring-blue-500 { --tw-ring-color: var(--color-blue-500); } + .ring-gray-300 { + --tw-ring-color: var(--color-gray-300); + } .ring-offset-2 { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); @@ -2438,6 +2565,10 @@ --tw-duration: 500ms; transition-duration: 500ms; } + .duration-700 { + --tw-duration: 700ms; + transition-duration: 700ms; + } .ease-in { --tw-ease: var(--ease-in); transition-timing-function: var(--ease-in); @@ -2466,6 +2597,18 @@ -webkit-user-select: none; user-select: none; } + .\[coverage\:report\] { + coverage: report; + } + .\[coverage\:run\] { + coverage: run; + } + .\[tool\:pytest\] { + tool: pytest; + } + .ring-inset { + --tw-ring-inset: inset; + } .group-hover\:translate-x-1 { &:is(:where(.group):hover *) { @media (hover: hover) { @@ -2474,6 +2617,14 @@ } } } + .group-hover\:translate-x-2 { + &:is(:where(.group):hover *) { + @media (hover: hover) { + --tw-translate-x: calc(var(--spacing) * 2); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + } + } .group-hover\:scale-105 { &:is(:where(.group):hover *) { @media (hover: hover) { @@ -2508,6 +2659,14 @@ } } } + .group-hover\:shadow-lg { + &:is(:where(.group):hover *) { + @media (hover: hover) { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + } .file\:border-0 { &::file-selector-button { border-style: var(--tw-border-style); @@ -2568,6 +2727,13 @@ } } } + .hover\:scale-\[1\.01\] { + &:hover { + @media (hover: hover) { + scale: 1.01; + } + } + } .hover\:scale-\[1\.02\] { &:hover { @media (hover: hover) { @@ -3017,6 +3183,14 @@ } } } + .hover\:shadow-2xl { + &:hover { + @media (hover: hover) { + --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + } .hover\:shadow-lg { &:hover { @media (hover: hover) { @@ -3081,6 +3255,11 @@ left: calc(var(--spacing) * 32); } } + .focus\:z-20 { + &:focus { + z-index: 20; + } + } .focus\:z-50 { &:focus { z-index: 50; @@ -3210,6 +3389,11 @@ } } } + .focus\:outline-offset-0 { + &:focus { + outline-offset: 0px; + } + } .focus\:outline-none { &:focus { --tw-outline-style: none; @@ -3241,6 +3425,28 @@ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } } + .focus-visible\:outline { + &:focus-visible { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } + } + .focus-visible\:outline-2 { + &:focus-visible { + outline-style: var(--tw-outline-style); + outline-width: 2px; + } + } + .focus-visible\:outline-offset-2 { + &:focus-visible { + outline-offset: 2px; + } + } + .focus-visible\:outline-blue-600 { + &:focus-visible { + outline-color: var(--color-blue-600); + } + } .focus-visible\:outline-none { &:focus-visible { --tw-outline-style: none; @@ -3327,6 +3533,11 @@ margin-bottom: calc(var(--spacing) * 8); } } + .sm\:mb-12 { + @media (width >= 40rem) { + margin-bottom: calc(var(--spacing) * 12); + } + } .sm\:mb-16 { @media (width >= 40rem) { margin-bottom: calc(var(--spacing) * 16); @@ -3492,6 +3703,11 @@ gap: calc(var(--spacing) * 6); } } + .sm\:gap-8 { + @media (width >= 40rem) { + gap: calc(var(--spacing) * 8); + } + } .sm\:space-y-0 { @media (width >= 40rem) { :where(& > :not(:last-child)) { @@ -3561,6 +3777,11 @@ padding: calc(var(--spacing) * 6); } } + .sm\:p-7 { + @media (width >= 40rem) { + padding: calc(var(--spacing) * 7); + } + } .sm\:px-0 { @media (width >= 40rem) { padding-inline: calc(var(--spacing) * 0); @@ -3606,6 +3827,11 @@ padding-block: calc(var(--spacing) * 6); } } + .sm\:py-8 { + @media (width >= 40rem) { + padding-block: calc(var(--spacing) * 8); + } + } .sm\:pt-4 { @media (width >= 40rem) { padding-top: calc(var(--spacing) * 4); @@ -3616,12 +3842,24 @@ text-align: left; } } + .sm\:text-2xl { + @media (width >= 40rem) { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + } .sm\:text-3xl { @media (width >= 40rem) { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } } + .sm\:text-4xl { + @media (width >= 40rem) { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + } + } .sm\:text-base { @media (width >= 40rem) { font-size: var(--text-base); @@ -3809,6 +4047,11 @@ display: none; } } + .lg\:aspect-\[4\/3\] { + @media (width >= 64rem) { + aspect-ratio: 4/3; + } + } .lg\:w-1\/4 { @media (width >= 64rem) { width: calc(1/4 * 100%); @@ -3824,6 +4067,11 @@ width: calc(var(--spacing) * 48); } } + .lg\:w-64 { + @media (width >= 64rem) { + width: calc(var(--spacing) * 64); + } + } .lg\:max-w-2xl { @media (width >= 64rem) { max-width: var(--container-2xl); @@ -3879,6 +4127,11 @@ gap: calc(var(--spacing) * 6); } } + .lg\:gap-7 { + @media (width >= 64rem) { + gap: calc(var(--spacing) * 7); + } + } .lg\:gap-8 { @media (width >= 64rem) { gap: calc(var(--spacing) * 8); @@ -3927,6 +4180,12 @@ line-height: var(--tw-leading, var(--text-4xl--line-height)); } } + .lg\:text-5xl { + @media (width >= 64rem) { + font-size: var(--text-5xl); + line-height: var(--tw-leading, var(--text-5xl--line-height)); + } + } .lg\:text-6xl { @media (width >= 64rem) { font-size: var(--text-6xl); @@ -3980,6 +4239,16 @@ max-height: calc(100vh - 2rem); } } + .xl\:w-72 { + @media (width >= 80rem) { + width: calc(var(--spacing) * 72); + } + } + .xl\:w-80 { + @media (width >= 80rem) { + width: calc(var(--spacing) * 80); + } + } .xl\:grid-cols-2 { @media (width >= 80rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -3995,6 +4264,11 @@ grid-template-columns: repeat(4, minmax(0, 1fr)); } } + .xl\:flex-row { + @media (width >= 80rem) { + flex-direction: row; + } + } .xl\:overflow-y-auto { @media (width >= 80rem) { overflow-y: auto; @@ -4082,6 +4356,14 @@ } } } + .dark\:border-gray-600\/60 { + @media (prefers-color-scheme: dark) { + border-color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 60%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-gray-600) 60%, transparent); + } + } + } .dark\:border-gray-700 { @media (prefers-color-scheme: dark) { border-color: var(--color-gray-700); @@ -4095,6 +4377,14 @@ } } } + .dark\:border-gray-700\/60 { + @media (prefers-color-scheme: dark) { + border-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 60%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent); + } + } + } .dark\:border-green-700 { @media (prefers-color-scheme: dark) { border-color: var(--color-green-700); @@ -4128,6 +4418,11 @@ border-color: var(--color-yellow-800); } } + .dark\:border-t-blue-400 { + @media (prefers-color-scheme: dark) { + border-top-color: var(--color-blue-400); + } + } .dark\:bg-blue-400\/30 { @media (prefers-color-scheme: dark) { background-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 30%, transparent); @@ -4281,6 +4576,14 @@ background-color: var(--color-orange-900); } } + .dark\:bg-orange-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-orange-900) 30%, transparent); + } + } + } .dark\:bg-purple-800 { @media (prefers-color-scheme: dark) { background-color: var(--color-purple-800); @@ -4407,6 +4710,15 @@ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } + .dark\:from-blue-900\/30 { + @media (prefers-color-scheme: dark) { + --tw-gradient-from: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-from: color-mix(in oklab, var(--color-blue-900) 30%, transparent); + } + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + } .dark\:from-gray-600 { @media (prefers-color-scheme: dark) { --tw-gradient-from: var(--color-gray-600); @@ -4537,6 +4849,15 @@ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } + .dark\:to-purple-900\/30 { + @media (prefers-color-scheme: dark) { + --tw-gradient-to: color-mix(in srgb, oklch(38.1% 0.176 304.987) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-to: color-mix(in oklab, var(--color-purple-900) 30%, transparent); + } + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + } .dark\:to-purple-950 { @media (prefers-color-scheme: dark) { --tw-gradient-to: var(--color-purple-950); @@ -4648,6 +4969,11 @@ color: var(--color-orange-200); } } + .dark\:text-orange-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-orange-400); + } + } .dark\:text-primary { @media (prefers-color-scheme: dark) { color: var(--color-primary); @@ -4749,6 +5075,11 @@ } } } + .dark\:ring-gray-600 { + @media (prefers-color-scheme: dark) { + --tw-ring-color: var(--color-gray-600); + } + } .dark\:ring-yellow-400\/30 { @media (prefers-color-scheme: dark) { --tw-ring-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 30%, transparent);