diff --git a/rides/migrations/0003_add_company_model.py b/rides/migrations/0003_add_company_model.py deleted file mode 100644 index 92e9ee8e..00000000 --- a/rides/migrations/0003_add_company_model.py +++ /dev/null @@ -1,43 +0,0 @@ -# Generated by Django 5.2.5 on 2025-08-16 23:12 - -import django.contrib.postgres.fields -from django.db import migrations, models -import django.utils.timezone - - -class Migration(migrations.Migration): - - dependencies = [ - ("rides", "0002_add_business_constraints"), - ] - - operations = [ - migrations.CreateModel( - name='Company', - fields=[ - ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), - ('created_at', models.DateTimeField(default=django.utils.timezone.now)), - ('updated_at', models.DateTimeField(auto_now=True)), - ('name', models.CharField(max_length=255)), - ('slug', models.SlugField(max_length=255, unique=True)), - ('roles', django.contrib.postgres.fields.ArrayField( - base_field=models.CharField( - choices=[('MANUFACTURER', 'Ride Manufacturer'), ('DESIGNER', 'Ride Designer'), ('OPERATOR', 'Park Operator'), ('PROPERTY_OWNER', 'Property Owner')], - max_length=20 - ), - blank=True, - default=list, - size=None - )), - ('description', models.TextField(blank=True)), - ('website', models.URLField(blank=True)), - ('founded_date', models.DateField(blank=True, null=True)), - ('rides_count', models.IntegerField(default=0)), - ('coasters_count', models.IntegerField(default=0)), - ], - options={ - 'verbose_name_plural': 'Companies', - 'ordering': ['name'], - }, - ), - ] diff --git a/rides/migrations/0004_alter_company_created_at_company_insert_insert_and_more.py b/rides/migrations/0004_alter_company_created_at_company_insert_insert_and_more.py deleted file mode 100644 index f7d3cd6f..00000000 --- a/rides/migrations/0004_alter_company_created_at_company_insert_insert_and_more.py +++ /dev/null @@ -1,49 +0,0 @@ -# Generated by Django 5.2.5 on 2025-08-16 23:13 - -import pgtrigger.compiler -import pgtrigger.migrations -from django.db import migrations, models - - -class Migration(migrations.Migration): - - dependencies = [ - ("rides", "0003_add_company_model"), - ] - - operations = [ - migrations.AlterField( - model_name="company", - name="created_at", - field=models.DateTimeField(auto_now_add=True), - ), - pgtrigger.migrations.AddTrigger( - model_name="company", - trigger=pgtrigger.compiler.Trigger( - name="insert_insert", - sql=pgtrigger.compiler.UpsertTriggerSql( - func='INSERT INTO "rides_companyevent" ("coasters_count", "created_at", "description", "founded_date", "id", "name", "pgh_context_id", "pgh_created_at", "pgh_label", "pgh_obj_id", "rides_count", "roles", "slug", "updated_at", "website") VALUES (NEW."coasters_count", NEW."created_at", NEW."description", NEW."founded_date", NEW."id", NEW."name", _pgh_attach_context(), NOW(), \'insert\', NEW."id", NEW."rides_count", NEW."roles", NEW."slug", NEW."updated_at", NEW."website"); RETURN NULL;', - hash="[AWS-SECRET-REMOVED]", - operation="INSERT", - pgid="pgtrigger_insert_insert_e7194", - table="rides_company", - when="AFTER", - ), - ), - ), - pgtrigger.migrations.AddTrigger( - model_name="company", - trigger=pgtrigger.compiler.Trigger( - name="update_update", - sql=pgtrigger.compiler.UpsertTriggerSql( - condition="WHEN (OLD.* IS DISTINCT FROM NEW.*)", - func='INSERT INTO "rides_companyevent" ("coasters_count", "created_at", "description", "founded_date", "id", "name", "pgh_context_id", "pgh_created_at", "pgh_label", "pgh_obj_id", "rides_count", "roles", "slug", "updated_at", "website") VALUES (NEW."coasters_count", NEW."created_at", NEW."description", NEW."founded_date", NEW."id", NEW."name", _pgh_attach_context(), NOW(), \'update\', NEW."id", NEW."rides_count", NEW."roles", NEW."slug", NEW."updated_at", NEW."website"); RETURN NULL;', - hash="[AWS-SECRET-REMOVED]", - operation="UPDATE", - pgid="pgtrigger_update_update_456a8", - table="rides_company", - when="AFTER", - ), - ), - ), - ] diff --git a/scripts/dev_server.sh b/scripts/dev_server.sh index 265602a4..b6ce2620 100755 --- a/scripts/dev_server.sh +++ b/scripts/dev_server.sh @@ -24,7 +24,7 @@ export ALLOWED_HOSTS="localhost,127.0.0.1,0.0.0.0" export CSRF_TRUSTED_ORIGINS="http://localhost:8000,http://127.0.0.1:8000,https://127.0.0.1:8000" # Database configuration (PostgreSQL with PostGIS) -export DATABASE_URL="postgis://thrillwiki_user:thrillwiki_pass@localhost:5432/thrillwiki_db" +export DATABASE_URL="postgis://thrillwiki_user:thrillwiki@localhost:5432/thrillwiki_test_db" # Cache configuration (use locmem for development if Redis not available) export CACHE_URL="locmemcache://" @@ -100,7 +100,7 @@ uv run manage.py collectstatic --noinput --clear # Build Tailwind CSS if command -v npm &> /dev/null; then echo "🎨 Building Tailwind CSS..." - uv run manage.py tailwindcss --build + uv run manage.py tailwind build else echo "⚠️ npm not found, skipping Tailwind CSS build" fi diff --git a/staticfiles/account/js/account.js b/staticfiles/account/js/account.js new file mode 100644 index 00000000..fbc5135c --- /dev/null +++ b/staticfiles/account/js/account.js @@ -0,0 +1,20 @@ +(function () { + const allauth = window.allauth = window.allauth || {} + + function manageEmailForm (o) { + const actions = document.getElementsByName('action_remove') + if (actions.length) { + actions[0].addEventListener('click', function (e) { + if (!window.confirm(o.i18n.confirmDelete)) { + e.preventDefault() + } + }) + } + } + + allauth.account = { + forms: { + manageEmailForm + } + } +})() diff --git a/staticfiles/account/js/onload.js b/staticfiles/account/js/onload.js new file mode 100644 index 00000000..1a224c9c --- /dev/null +++ b/staticfiles/account/js/onload.js @@ -0,0 +1,12 @@ +(function () { + document.addEventListener('DOMContentLoaded', function () { + Array.from(document.querySelectorAll('script[data-allauth-onload]')).forEach(scriptElt => { + const funcRef = scriptElt.dataset.allauthOnload + if (typeof funcRef === 'string' && funcRef.startsWith('allauth.')) { + const funcArg = JSON.parse(scriptElt.textContent) + const func = funcRef.split('.').reduce((acc, part) => acc && acc[part], window) + func(funcArg) + } + }) + }) +})() diff --git a/staticfiles/admin/css/base.css b/staticfiles/admin/css/base.css index ac283260..37910431 100644 --- a/staticfiles/admin/css/base.css +++ b/staticfiles/admin/css/base.css @@ -1121,6 +1121,7 @@ a.deletelink:focus, a.deletelink:hover { margin: 0; border-top: 1px solid var(--hairline-color); width: 100%; + box-sizing: border-box; } .paginator a:link, .paginator a:visited { diff --git a/staticfiles/admin/css/dark_mode.css b/staticfiles/admin/css/dark_mode.css index 7e12a815..65b58d03 100644 --- a/staticfiles/admin/css/dark_mode.css +++ b/staticfiles/admin/css/dark_mode.css @@ -84,8 +84,8 @@ html[data-theme="dark"] { .theme-toggle svg { vertical-align: middle; - height: 1rem; - width: 1rem; + height: 1.5rem; + width: 1.5rem; display: none; } diff --git a/staticfiles/admin/css/forms.css b/staticfiles/admin/css/forms.css index 4f49b613..c6ce7883 100644 --- a/staticfiles/admin/css/forms.css +++ b/staticfiles/admin/css/forms.css @@ -449,17 +449,6 @@ body.popup .submit-row { _width: 700px; } -.inline-group ul.tools { - padding: 0; - margin: 0; - list-style: none; -} - -.inline-group ul.tools li { - display: inline; - padding: 0 5px; -} - .inline-group div.add-row, .inline-group .tabular tr.add-row td { color: var(--body-quiet-color); @@ -473,11 +462,8 @@ body.popup .submit-row { border-bottom: 1px solid var(--hairline-color); } -.inline-group ul.tools a.add, .inline-group div.add-row a, .inline-group .tabular tr.add-row td a { - background: url(../img/icon-addlink.svg) 0 1px no-repeat; - padding-left: 16px; font-size: 0.75rem; } diff --git a/staticfiles/admin/css/responsive.css b/staticfiles/admin/css/responsive.css index 932e824c..f0fcade4 100644 --- a/staticfiles/admin/css/responsive.css +++ b/staticfiles/admin/css/responsive.css @@ -254,10 +254,6 @@ input[type="submit"], button { align-items: center; } - .selector .selector-filter label { - margin: 0 8px 0 0; - } - .selector .selector-filter input { width: 100%; min-height: 0; @@ -277,29 +273,7 @@ input[type="submit"], button { margin-bottom: 5px; } - .selector ul.selector-chooser { - width: 26px; - height: 52px; - padding: 2px 0; - border-radius: 20px; - transform: translateY(-10px); - } - - .selector-add, .selector-remove { - width: 20px; - height: 20px; - background-size: 20px auto; - } - - .selector-add { - background-position: 0 -120px; - } - - .selector-remove { - background-position: 0 -80px; - } - - a.selector-chooseall, a.selector-clearall { + .selector-chooseall, .selector-clearall { align-self: center; } @@ -321,8 +295,6 @@ input[type="submit"], button { } .stacked ul.selector-chooser { - width: 52px; - height: 26px; padding: 0 2px; transform: none; } @@ -331,42 +303,6 @@ input[type="submit"], button { padding: 3px; } - .stacked .selector-add, .stacked .selector-remove { - background-size: 20px auto; - } - - .stacked .selector-add { - background-position: 0 -40px; - } - - .stacked .active.selector-add { - background-position: 0 -40px; - } - - .active.selector-add:focus, .active.selector-add:hover { - background-position: 0 -140px; - } - - .stacked .active.selector-add:focus, .stacked .active.selector-add:hover { - background-position: 0 -60px; - } - - .stacked .selector-remove { - background-position: 0 0; - } - - .stacked .active.selector-remove { - background-position: 0 0; - } - - .active.selector-remove:focus, .active.selector-remove:hover { - background-position: 0 -100px; - } - - .stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover { - background-position: 0 -20px; - } - .help-tooltip, .selector .help-icon { display: none; } @@ -649,6 +585,7 @@ input[type="submit"], button { .related-widget-wrapper .selector { order: 1; + flex: 1 0 auto; } .related-widget-wrapper > a { @@ -679,9 +616,9 @@ input[type="submit"], button { } .selector ul.selector-chooser { - display: block; - width: 52px; - height: 26px; + display: flex; + width: 60px; + height: 30px; padding: 0 2px; transform: none; } @@ -694,16 +631,16 @@ input[type="submit"], button { background-position: 0 0; } - .active.selector-remove:focus, .active.selector-remove:hover { - background-position: 0 -20px; + :enabled.selector-remove:focus, :enabled.selector-remove:hover { + background-position: 0 -24px; } .selector-add { - background-position: 0 -40px; + background-position: 0 -48px; } - .active.selector-add:focus, .active.selector-add:hover { - background-position: 0 -60px; + :enabled.selector-add:focus, :enabled.selector-add:hover { + background-position: 0 -72px; } /* Inlines */ diff --git a/staticfiles/admin/css/responsive_rtl.css b/staticfiles/admin/css/responsive_rtl.css index 33b57848..5e8f5c59 100644 --- a/staticfiles/admin/css/responsive_rtl.css +++ b/staticfiles/admin/css/responsive_rtl.css @@ -28,18 +28,12 @@ margin-left: 0; } - [dir="rtl"] .inline-group ul.tools a.add, [dir="rtl"] .inline-group div.add-row a, [dir="rtl"] .inline-group .tabular tr.add-row td a { padding: 8px 26px 8px 10px; background-position: calc(100% - 8px) 9px; } - [dir="rtl"] .selector .selector-filter label { - margin-right: 0; - margin-left: 8px; - } - [dir="rtl"] .object-tools li { float: right; } @@ -53,22 +47,6 @@ padding-left: 0; padding-right: 16px; } - - [dir="rtl"] .selector-add { - background-position: 0 -80px; - } - - [dir="rtl"] .selector-remove { - background-position: 0 -120px; - } - - [dir="rtl"] .active.selector-add:focus, .active.selector-add:hover { - background-position: 0 -100px; - } - - [dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover { - background-position: 0 -140px; - } } /* MOBILE */ @@ -97,15 +75,15 @@ background-position: 0 0; } - [dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover { - background-position: 0 -20px; + [dir="rtl"] :enabled.selector-remove:focus, :enabled.selector-remove:hover { + background-position: 0 -24px; } [dir="rtl"] .selector-add { - background-position: 0 -40px; + background-position: 0 -48px; } - [dir="rtl"] .active.selector-add:focus, .active.selector-add:hover { - background-position: 0 -60px; + [dir="rtl"] :enabled.selector-add:focus, :enabled.selector-add:hover { + background-position: 0 -72px; } } diff --git a/staticfiles/admin/css/rtl.css b/staticfiles/admin/css/rtl.css index b8f60e0a..a2556d04 100644 --- a/staticfiles/admin/css/rtl.css +++ b/staticfiles/admin/css/rtl.css @@ -220,34 +220,36 @@ fieldset .fieldBox { } .selector-add { - background: url(../img/selector-icons.svg) 0 -64px no-repeat; + background: url(../img/selector-icons.svg) 0 -96px no-repeat; + background-size: 24px auto; } -.active.selector-add:focus, .active.selector-add:hover { - background-position: 0 -80px; +:enabled.selector-add:focus, :enabled.selector-add:hover { + background-position: 0 -120px; } .selector-remove { - background: url(../img/selector-icons.svg) 0 -96px no-repeat; + background: url(../img/selector-icons.svg) 0 -144px no-repeat; + background-size: 24px auto; } -.active.selector-remove:focus, .active.selector-remove:hover { - background-position: 0 -112px; +:enabled.selector-remove:focus, :enabled.selector-remove:hover { + background-position: 0 -168px; } -a.selector-chooseall { +.selector-chooseall { background: url(../img/selector-icons.svg) right -128px no-repeat; } -a.active.selector-chooseall:focus, a.active.selector-chooseall:hover { +:enabled.selector-chooseall:focus, :enabled.selector-chooseall:hover { background-position: 100% -144px; } -a.selector-clearall { +.selector-clearall { background: url(../img/selector-icons.svg) 0 -160px no-repeat; } -a.active.selector-clearall:focus, a.active.selector-clearall:hover { +:enabled.selector-clearall:focus, :enabled.selector-clearall:hover { background-position: 0 -176px; } diff --git a/staticfiles/admin/css/widgets.css b/staticfiles/admin/css/widgets.css index cc64811a..538af2eb 100644 --- a/staticfiles/admin/css/widgets.css +++ b/staticfiles/admin/css/widgets.css @@ -2,7 +2,7 @@ .selector { display: flex; - flex-grow: 1; + flex: 1; gap: 0 10px; } @@ -14,17 +14,20 @@ } .selector-available, .selector-chosen { - text-align: center; display: flex; flex-direction: column; flex: 1 1; } -.selector-available h2, .selector-chosen h2 { +.selector-available-title, .selector-chosen-title { border: 1px solid var(--border-color); border-radius: 4px 4px 0 0; } +.selector .helptext { + font-size: 0.6875rem; +} + .selector-chosen .list-footer-display { border: 1px solid var(--border-color); border-top: none; @@ -40,14 +43,25 @@ color: var(--breadcrumbs-fg); } -.selector-chosen h2 { +.selector-chosen-title { background: var(--secondary); color: var(--header-link-color); + padding: 8px; } -.selector .selector-available h2 { +.aligned .selector-chosen-title label { + color: var(--header-link-color); + width: 100%; +} + +.selector-available-title { background: var(--darkened-bg); color: var(--body-quiet-color); + padding: 8px; +} + +.aligned .selector-available-title label { + width: 100%; } .selector .selector-filter { @@ -59,6 +73,7 @@ margin: 0; text-align: left; display: flex; + gap: 8px; } .selector .selector-filter label, @@ -77,14 +92,9 @@ flex-grow: 1; } -.selector .selector-available input, -.selector .selector-chosen input { - margin-left: 8px; -} - .selector ul.selector-chooser { align-self: center; - width: 22px; + width: 30px; background-color: var(--selected-bg); border-radius: 10px; margin: 0; @@ -114,40 +124,43 @@ } .selector-add, .selector-remove { - width: 16px; - height: 16px; + width: 24px; + height: 24px; display: block; text-indent: -3000px; overflow: hidden; cursor: default; opacity: 0.55; + border: none; } -.active.selector-add, .active.selector-remove { +:enabled.selector-add, :enabled.selector-remove { opacity: 1; } -.active.selector-add:hover, .active.selector-remove:hover { +:enabled.selector-add:hover, :enabled.selector-remove:hover { cursor: pointer; } .selector-add { - background: url(../img/selector-icons.svg) 0 -96px no-repeat; + background: url(../img/selector-icons.svg) 0 -144px no-repeat; + background-size: 24px auto; } -.active.selector-add:focus, .active.selector-add:hover { - background-position: 0 -112px; +:enabled.selector-add:focus, :enabled.selector-add:hover { + background-position: 0 -168px; } .selector-remove { - background: url(../img/selector-icons.svg) 0 -64px no-repeat; + background: url(../img/selector-icons.svg) 0 -96px no-repeat; + background-size: 24px auto; } -.active.selector-remove:focus, .active.selector-remove:hover { - background-position: 0 -80px; +:enabled.selector-remove:focus, :enabled.selector-remove:hover { + background-position: 0 -120px; } -a.selector-chooseall, a.selector-clearall { +.selector-chooseall, .selector-clearall { display: inline-block; height: 16px; text-align: left; @@ -158,38 +171,39 @@ a.selector-chooseall, a.selector-clearall { color: var(--body-quiet-color); text-decoration: none; opacity: 0.55; + border: none; } -a.active.selector-chooseall:focus, a.active.selector-clearall:focus, -a.active.selector-chooseall:hover, a.active.selector-clearall:hover { +:enabled.selector-chooseall:focus, :enabled.selector-clearall:focus, +:enabled.selector-chooseall:hover, :enabled.selector-clearall:hover { color: var(--link-fg); } -a.active.selector-chooseall, a.active.selector-clearall { +:enabled.selector-chooseall, :enabled.selector-clearall { opacity: 1; } -a.active.selector-chooseall:hover, a.active.selector-clearall:hover { +:enabled.selector-chooseall:hover, :enabled.selector-clearall:hover { cursor: pointer; } -a.selector-chooseall { +.selector-chooseall { padding: 0 18px 0 0; background: url(../img/selector-icons.svg) right -160px no-repeat; cursor: default; } -a.active.selector-chooseall:focus, a.active.selector-chooseall:hover { +:enabled.selector-chooseall:focus, :enabled.selector-chooseall:hover { background-position: 100% -176px; } -a.selector-clearall { +.selector-clearall { padding: 0 0 0 18px; background: url(../img/selector-icons.svg) 0 -128px no-repeat; cursor: default; } -a.active.selector-clearall:focus, a.active.selector-clearall:hover { +:enabled.selector-clearall:focus, :enabled.selector-clearall:hover { background-position: 0 -144px; } @@ -219,8 +233,9 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover { } .stacked ul.selector-chooser { - height: 22px; - width: 50px; + display: flex; + height: 30px; + width: 64px; margin: 0 0 10px 40%; background-color: #eee; border-radius: 10px; @@ -237,32 +252,34 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover { } .stacked .selector-add { - background: url(../img/selector-icons.svg) 0 -32px no-repeat; + background: url(../img/selector-icons.svg) 0 -48px no-repeat; + background-size: 24px auto; cursor: default; } -.stacked .active.selector-add { - background-position: 0 -32px; +.stacked :enabled.selector-add { + background-position: 0 -48px; cursor: pointer; } -.stacked .active.selector-add:focus, .stacked .active.selector-add:hover { - background-position: 0 -48px; +.stacked :enabled.selector-add:focus, .stacked :enabled.selector-add:hover { + background-position: 0 -72px; cursor: pointer; } .stacked .selector-remove { background: url(../img/selector-icons.svg) 0 0 no-repeat; + background-size: 24px auto; cursor: default; } -.stacked .active.selector-remove { +.stacked :enabled.selector-remove { background-position: 0 0px; cursor: pointer; } -.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover { - background-position: 0 -16px; +.stacked :enabled.selector-remove:focus, .stacked :enabled.selector-remove:hover { + background-position: 0 -24px; cursor: pointer; } @@ -318,28 +335,30 @@ table p.datetime { position: relative; display: inline-block; vertical-align: middle; - height: 16px; - width: 16px; + height: 24px; + width: 24px; overflow: hidden; } .datetimeshortcuts .clock-icon { background: url(../img/icon-clock.svg) 0 0 no-repeat; + background-size: 24px auto; } .datetimeshortcuts a:focus .clock-icon, .datetimeshortcuts a:hover .clock-icon { - background-position: 0 -16px; + background-position: 0 -24px; } .datetimeshortcuts .date-icon { background: url(../img/icon-calendar.svg) 0 0 no-repeat; + background-size: 24px auto; top: -1px; } .datetimeshortcuts a:focus .date-icon, .datetimeshortcuts a:hover .date-icon { - background-position: 0 -16px; + background-position: 0 -24px; } .timezonewarning { @@ -558,9 +577,10 @@ ul.timelist, .timelist li { float: right; text-indent: -9999px; background: url(../img/inline-delete.svg) 0 0 no-repeat; - width: 16px; - height: 16px; + width: 1.5rem; + height: 1.5rem; border: 0px none; + margin-bottom: .25rem; } .inline-deletelink:focus, .inline-deletelink:hover { diff --git a/staticfiles/admin/img/inline-delete.svg b/staticfiles/admin/img/inline-delete.svg index 17d1ad67..87511505 100644 --- a/staticfiles/admin/img/inline-delete.svg +++ b/staticfiles/admin/img/inline-delete.svg @@ -1,3 +1,3 @@ - + diff --git a/staticfiles/admin/js/SelectFilter2.js b/staticfiles/admin/js/SelectFilter2.js index 69574124..970b511b 100644 --- a/staticfiles/admin/js/SelectFilter2.js +++ b/staticfiles/admin/js/SelectFilter2.js @@ -15,6 +15,7 @@ Requires core.js and SelectBox.js. const from_box = document.getElementById(field_id); from_box.id += '_from'; // change its ID from_box.className = 'filtered'; + from_box.setAttribute('aria-labelledby', field_id + '_from_title'); for (const p of from_box.parentNode.getElementsByTagName('p')) { if (p.classList.contains("info")) { @@ -38,18 +39,15 @@ Requires core.js and SelectBox.js. //
const selector_available = quickElement('div', selector_div); selector_available.className = 'selector-available'; - const title_available = quickElement('h2', selector_available, interpolate(gettext('Available %s') + ' ', [field_name])); + const selector_available_title = quickElement('div', selector_available); + selector_available_title.id = field_id + '_from_title'; + selector_available_title.className = 'selector-available-title'; + quickElement('label', selector_available_title, interpolate(gettext('Available %s') + ' ', [field_name]), 'for', field_id + '_from'); quickElement( - 'span', title_available, '', - 'class', 'help help-tooltip help-icon', - 'title', interpolate( - gettext( - 'This is the list of available %s. You may choose some by ' + - 'selecting them in the box below and then clicking the ' + - '"Choose" arrow between the two boxes.' - ), - [field_name] - ) + 'p', + selector_available_title, + interpolate(gettext('Choose %s by selecting them and then select the "Choose" arrow button.'), [field_name]), + 'class', 'helptext' ); const filter_p = quickElement('p', selector_available, '', 'id', field_id + '_filter'); @@ -60,7 +58,7 @@ Requires core.js and SelectBox.js. quickElement( 'span', search_filter_label, '', 'class', 'help-tooltip search-label-icon', - 'title', interpolate(gettext("Type into this box to filter down the list of available %s."), [field_name]) + 'aria-label', interpolate(gettext("Type into this box to filter down the list of available %s."), [field_name]) ); filter_p.appendChild(document.createTextNode(' ')); @@ -69,32 +67,47 @@ Requires core.js and SelectBox.js. filter_input.id = field_id + '_input'; selector_available.appendChild(from_box); - const choose_all = quickElement('a', selector_available, gettext('Choose all'), 'title', interpolate(gettext('Click to choose all %s at once.'), [field_name]), 'href', '#', 'id', field_id + '_add_all_link'); - choose_all.className = 'selector-chooseall'; + const choose_all = quickElement( + 'button', + selector_available, + interpolate(gettext('Choose all %s'), [field_name]), + 'id', field_id + '_add_all', + 'class', 'selector-chooseall', + 'type', 'button' + ); // ",{class:"select2-results__options select2-results__options--nested"});p.append(l),s.append(a),s.append(p)}else this.template(e,t);return f.StoreData(t,"data",e),t},i.prototype.bind=function(t,e){var l=this,n=t.id+"-results";this.$results.attr("id",n),t.on("results:all",function(e){l.clear(),l.append(e.data),t.isOpen()&&(l.setClasses(),l.highlightFirstItem())}),t.on("results:append",function(e){l.append(e.data),t.isOpen()&&l.setClasses()}),t.on("query",function(e){l.hideMessages(),l.showLoading(e)}),t.on("select",function(){t.isOpen()&&(l.setClasses(),l.options.get("scrollAfterSelect")&&l.highlightFirstItem())}),t.on("unselect",function(){t.isOpen()&&(l.setClasses(),l.options.get("scrollAfterSelect")&&l.highlightFirstItem())}),t.on("open",function(){l.$results.attr("aria-expanded","true"),l.$results.attr("aria-hidden","false"),l.setClasses(),l.ensureHighlightVisible()}),t.on("close",function(){l.$results.attr("aria-expanded","false"),l.$results.attr("aria-hidden","true"),l.$results.removeAttr("aria-activedescendant")}),t.on("results:toggle",function(){var e=l.getHighlightedResults();0!==e.length&&e.trigger("mouseup")}),t.on("results:select",function(){var e=l.getHighlightedResults();if(0!==e.length){var t=f.GetData(e[0],"data");"true"==e.attr("aria-selected")?l.trigger("close",{}):l.trigger("select",{data:t})}}),t.on("results:previous",function(){var e=l.getHighlightedResults(),t=l.$results.find("[aria-selected]"),n=t.index(e);if(!(n<=0)){var i=n-1;0===e.length&&(i=0);var r=t.eq(i);r.trigger("mouseenter");var o=l.$results.offset().top,s=r.offset().top,a=l.$results.scrollTop()+(s-o);0===i?l.$results.scrollTop(0):s-o<0&&l.$results.scrollTop(a)}}),t.on("results:next",function(){var e=l.getHighlightedResults(),t=l.$results.find("[aria-selected]"),n=t.index(e)+1;if(!(n>=t.length)){var i=t.eq(n);i.trigger("mouseenter");var r=l.$results.offset().top+l.$results.outerHeight(!1),o=i.offset().top+i.outerHeight(!1),s=l.$results.scrollTop()+o-r;0===n?l.$results.scrollTop(0):rthis.$results.outerHeight()||o<0)&&this.$results.scrollTop(r)}},i.prototype.template=function(e,t){var n=this.options.get("templateResult"),i=this.options.get("escapeMarkup"),r=n(e,t);null==r?t.style.display="none":"string"==typeof r?t.innerHTML=i(r):h(t).append(r)},i}),e.define("select2/keys",[],function(){return{BACKSPACE:8,TAB:9,ENTER:13,SHIFT:16,CTRL:17,ALT:18,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40,DELETE:46}}),e.define("select2/selection/base",["jquery","../utils","../keys"],function(n,i,r){function o(e,t){this.$element=e,this.options=t,o.__super__.constructor.call(this)}return i.Extend(o,i.Observable),o.prototype.render=function(){var e=n('');return this._tabindex=0,null!=i.GetData(this.$element[0],"old-tabindex")?this._tabindex=i.GetData(this.$element[0],"old-tabindex"):null!=this.$element.attr("tabindex")&&(this._tabindex=this.$element.attr("tabindex")),e.attr("title",this.$element.attr("title")),e.attr("tabindex",this._tabindex),e.attr("aria-disabled","false"),this.$selection=e},o.prototype.bind=function(e,t){var n=this,i=e.id+"-results";this.container=e,this.$selection.on("focus",function(e){n.trigger("focus",e)}),this.$selection.on("blur",function(e){n._handleBlur(e)}),this.$selection.on("keydown",function(e){n.trigger("keypress",e),e.which===r.SPACE&&e.preventDefault()}),e.on("results:focus",function(e){n.$selection.attr("aria-activedescendant",e.data._resultId)}),e.on("selection:update",function(e){n.update(e.data)}),e.on("open",function(){n.$selection.attr("aria-expanded","true"),n.$selection.attr("aria-owns",i),n._attachCloseHandler(e)}),e.on("close",function(){n.$selection.attr("aria-expanded","false"),n.$selection.removeAttr("aria-activedescendant"),n.$selection.removeAttr("aria-owns"),n.$selection.trigger("focus"),n._detachCloseHandler(e)}),e.on("enable",function(){n.$selection.attr("tabindex",n._tabindex),n.$selection.attr("aria-disabled","false")}),e.on("disable",function(){n.$selection.attr("tabindex","-1"),n.$selection.attr("aria-disabled","true")})},o.prototype._handleBlur=function(e){var t=this;window.setTimeout(function(){document.activeElement==t.$selection[0]||n.contains(t.$selection[0],document.activeElement)||t.trigger("blur",e)},1)},o.prototype._attachCloseHandler=function(e){n(document.body).on("mousedown.select2."+e.id,function(e){var t=n(e.target).closest(".select2");n(".select2.select2-container--open").each(function(){this!=t[0]&&i.GetData(this,"element").select2("close")})})},o.prototype._detachCloseHandler=function(e){n(document.body).off("mousedown.select2."+e.id)},o.prototype.position=function(e,t){t.find(".selection").append(e)},o.prototype.destroy=function(){this._detachCloseHandler(this.container)},o.prototype.update=function(e){throw new Error("The `update` method must be defined in child classes.")},o.prototype.isEnabled=function(){return!this.isDisabled()},o.prototype.isDisabled=function(){return this.options.get("disabled")},o}),e.define("select2/selection/single",["jquery","./base","../utils","../keys"],function(e,t,n,i){function r(){r.__super__.constructor.apply(this,arguments)}return n.Extend(r,t),r.prototype.render=function(){var e=r.__super__.render.call(this);return e.addClass("select2-selection--single"),e.html(''),e},r.prototype.bind=function(t,e){var n=this;r.__super__.bind.apply(this,arguments);var i=t.id+"-container";this.$selection.find(".select2-selection__rendered").attr("id",i).attr("role","textbox").attr("aria-readonly","true"),this.$selection.attr("aria-labelledby",i),this.$selection.on("mousedown",function(e){1===e.which&&n.trigger("toggle",{originalEvent:e})}),this.$selection.on("focus",function(e){}),this.$selection.on("blur",function(e){}),t.on("focus",function(e){t.isOpen()||n.$selection.trigger("focus")})},r.prototype.clear=function(){var e=this.$selection.find(".select2-selection__rendered");e.empty(),e.removeAttr("title")},r.prototype.display=function(e,t){var n=this.options.get("templateSelection");return this.options.get("escapeMarkup")(n(e,t))},r.prototype.selectionContainer=function(){return e("")},r.prototype.update=function(e){if(0!==e.length){var t=e[0],n=this.$selection.find(".select2-selection__rendered"),i=this.display(t,n);n.empty().append(i);var r=t.title||t.text;r?n.attr("title",r):n.removeAttr("title")}else this.clear()},r}),e.define("select2/selection/multiple",["jquery","./base","../utils"],function(r,e,l){function n(e,t){n.__super__.constructor.apply(this,arguments)}return l.Extend(n,e),n.prototype.render=function(){var e=n.__super__.render.call(this);return e.addClass("select2-selection--multiple"),e.html(''),e},n.prototype.bind=function(e,t){var i=this;n.__super__.bind.apply(this,arguments),this.$selection.on("click",function(e){i.trigger("toggle",{originalEvent:e})}),this.$selection.on("click",".select2-selection__choice__remove",function(e){if(!i.isDisabled()){var t=r(this).parent(),n=l.GetData(t[0],"data");i.trigger("unselect",{originalEvent:e,data:n})}})},n.prototype.clear=function(){var e=this.$selection.find(".select2-selection__rendered");e.empty(),e.removeAttr("title")},n.prototype.display=function(e,t){var n=this.options.get("templateSelection");return this.options.get("escapeMarkup")(n(e,t))},n.prototype.selectionContainer=function(){return r('
  • ×
    • ')},n.prototype.update=function(e){if(this.clear(),0!==e.length){for(var t=[],n=0;n×');a.StoreData(i[0],"data",t),this.$selection.find(".select2-selection__rendered").prepend(i)}},e}),e.define("select2/selection/search",["jquery","../utils","../keys"],function(i,a,l){function e(e,t,n){e.call(this,t,n)}return e.prototype.render=function(e){var t=i('
    • ');this.$searchContainer=t,this.$search=t.find("input");var n=e.call(this);return this._transferTabIndex(),n},e.prototype.bind=function(e,t,n){var i=this,r=t.id+"-results";e.call(this,t,n),t.on("open",function(){i.$search.attr("aria-controls",r),i.$search.trigger("focus")}),t.on("close",function(){i.$search.val(""),i.$search.removeAttr("aria-controls"),i.$search.removeAttr("aria-activedescendant"),i.$search.trigger("focus")}),t.on("enable",function(){i.$search.prop("disabled",!1),i._transferTabIndex()}),t.on("disable",function(){i.$search.prop("disabled",!0)}),t.on("focus",function(e){i.$search.trigger("focus")}),t.on("results:focus",function(e){e.data._resultId?i.$search.attr("aria-activedescendant",e.data._resultId):i.$search.removeAttr("aria-activedescendant")}),this.$selection.on("focusin",".select2-search--inline",function(e){i.trigger("focus",e)}),this.$selection.on("focusout",".select2-search--inline",function(e){i._handleBlur(e)}),this.$selection.on("keydown",".select2-search--inline",function(e){if(e.stopPropagation(),i.trigger("keypress",e),i._keyUpPrevented=e.isDefaultPrevented(),e.which===l.BACKSPACE&&""===i.$search.val()){var t=i.$searchContainer.prev(".select2-selection__choice");if(0this.maximumInputLength?this.trigger("results:message",{message:"inputTooLong",args:{maximum:this.maximumInputLength,input:t.term,params:t}}):e.call(this,t,n)},e}),e.define("select2/data/maximumSelectionLength",[],function(){function e(e,t,n){this.maximumSelectionLength=n.get("maximumSelectionLength"),e.call(this,t,n)}return e.prototype.bind=function(e,t,n){var i=this;e.call(this,t,n),t.on("select",function(){i._checkIfMaximumSelected()})},e.prototype.query=function(e,t,n){var i=this;this._checkIfMaximumSelected(function(){e.call(i,t,n)})},e.prototype._checkIfMaximumSelected=function(e,n){var i=this;this.current(function(e){var t=null!=e?e.length:0;0=i.maximumSelectionLength?i.trigger("results:message",{message:"maximumSelected",args:{maximum:i.maximumSelectionLength}}):n&&n()})},e}),e.define("select2/dropdown",["jquery","./utils"],function(t,e){function n(e,t){this.$element=e,this.options=t,n.__super__.constructor.call(this)}return e.Extend(n,e.Observable),n.prototype.render=function(){var e=t('');return e.attr("dir",this.options.get("dir")),this.$dropdown=e},n.prototype.bind=function(){},n.prototype.position=function(e,t){},n.prototype.destroy=function(){this.$dropdown.remove()},n}),e.define("select2/dropdown/search",["jquery","../utils"],function(o,e){function t(){}return t.prototype.render=function(e){var t=e.call(this),n=o('');return this.$searchContainer=n,this.$search=n.find("input"),t.prepend(n),t},t.prototype.bind=function(e,t,n){var i=this,r=t.id+"-results";e.call(this,t,n),this.$search.on("keydown",function(e){i.trigger("keypress",e),i._keyUpPrevented=e.isDefaultPrevented()}),this.$search.on("input",function(e){o(this).off("keyup")}),this.$search.on("keyup input",function(e){i.handleSearch(e)}),t.on("open",function(){i.$search.attr("tabindex",0),i.$search.attr("aria-controls",r),i.$search.trigger("focus"),window.setTimeout(function(){i.$search.trigger("focus")},0)}),t.on("close",function(){i.$search.attr("tabindex",-1),i.$search.removeAttr("aria-controls"),i.$search.removeAttr("aria-activedescendant"),i.$search.val(""),i.$search.trigger("blur")}),t.on("focus",function(){t.isOpen()||i.$search.trigger("focus")}),t.on("results:all",function(e){null!=e.query.term&&""!==e.query.term||(i.showSearch(e)?i.$searchContainer.removeClass("select2-search--hide"):i.$searchContainer.addClass("select2-search--hide"))}),t.on("results:focus",function(e){e.data._resultId?i.$search.attr("aria-activedescendant",e.data._resultId):i.$search.removeAttr("aria-activedescendant")})},t.prototype.handleSearch=function(e){if(!this._keyUpPrevented){var t=this.$search.val();this.trigger("query",{term:t})}this._keyUpPrevented=!1},t.prototype.showSearch=function(e,t){return!0},t}),e.define("select2/dropdown/hidePlaceholder",[],function(){function e(e,t,n,i){this.placeholder=this.normalizePlaceholder(n.get("placeholder")),e.call(this,t,n,i)}return e.prototype.append=function(e,t){t.results=this.removePlaceholder(t.results),e.call(this,t)},e.prototype.normalizePlaceholder=function(e,t){return"string"==typeof t&&(t={id:"",text:t}),t},e.prototype.removePlaceholder=function(e,t){for(var n=t.slice(0),i=t.length-1;0<=i;i--){var r=t[i];this.placeholder.id===r.id&&n.splice(i,1)}return n},e}),e.define("select2/dropdown/infiniteScroll",["jquery"],function(n){function e(e,t,n,i){this.lastParams={},e.call(this,t,n,i),this.$loadingMore=this.createLoadingMore(),this.loading=!1}return e.prototype.append=function(e,t){this.$loadingMore.remove(),this.loading=!1,e.call(this,t),this.showLoadingMore(t)&&(this.$results.append(this.$loadingMore),this.loadMoreIfNeeded())},e.prototype.bind=function(e,t,n){var i=this;e.call(this,t,n),t.on("query",function(e){i.lastParams=e,i.loading=!0}),t.on("query:append",function(e){i.lastParams=e,i.loading=!0}),this.$results.on("scroll",this.loadMoreIfNeeded.bind(this))},e.prototype.loadMoreIfNeeded=function(){var e=n.contains(document.documentElement,this.$loadingMore[0]);if(!this.loading&&e){var t=this.$results.offset().top+this.$results.outerHeight(!1);this.$loadingMore.offset().top+this.$loadingMore.outerHeight(!1)<=t+50&&this.loadMore()}},e.prototype.loadMore=function(){this.loading=!0;var e=n.extend({},{page:1},this.lastParams);e.page++,this.trigger("query:append",e)},e.prototype.showLoadingMore=function(e,t){return t.pagination&&t.pagination.more},e.prototype.createLoadingMore=function(){var e=n('
  • '),t=this.options.get("translations").get("loadingMore");return e.html(t(this.lastParams)),e},e}),e.define("select2/dropdown/attachBody",["jquery","../utils"],function(f,a){function e(e,t,n){this.$dropdownParent=f(n.get("dropdownParent")||document.body),e.call(this,t,n)}return e.prototype.bind=function(e,t,n){var i=this;e.call(this,t,n),t.on("open",function(){i._showDropdown(),i._attachPositioningHandler(t),i._bindContainerResultHandlers(t)}),t.on("close",function(){i._hideDropdown(),i._detachPositioningHandler(t)}),this.$dropdownContainer.on("mousedown",function(e){e.stopPropagation()})},e.prototype.destroy=function(e){e.call(this),this.$dropdownContainer.remove()},e.prototype.position=function(e,t,n){t.attr("class",n.attr("class")),t.removeClass("select2"),t.addClass("select2-container--open"),t.css({position:"absolute",top:-999999}),this.$container=n},e.prototype.render=function(e){var t=f(""),n=e.call(this);return t.append(n),this.$dropdownContainer=t},e.prototype._hideDropdown=function(e){this.$dropdownContainer.detach()},e.prototype._bindContainerResultHandlers=function(e,t){if(!this._containerResultsHandlersBound){var n=this;t.on("results:all",function(){n._positionDropdown(),n._resizeDropdown()}),t.on("results:append",function(){n._positionDropdown(),n._resizeDropdown()}),t.on("results:message",function(){n._positionDropdown(),n._resizeDropdown()}),t.on("select",function(){n._positionDropdown(),n._resizeDropdown()}),t.on("unselect",function(){n._positionDropdown(),n._resizeDropdown()}),this._containerResultsHandlersBound=!0}},e.prototype._attachPositioningHandler=function(e,t){var n=this,i="scroll.select2."+t.id,r="resize.select2."+t.id,o="orientationchange.select2."+t.id,s=this.$container.parents().filter(a.hasScroll);s.each(function(){a.StoreData(this,"select2-scroll-position",{x:f(this).scrollLeft(),y:f(this).scrollTop()})}),s.on(i,function(e){var t=a.GetData(this,"select2-scroll-position");f(this).scrollTop(t.y)}),f(window).on(i+" "+r+" "+o,function(e){n._positionDropdown(),n._resizeDropdown()})},e.prototype._detachPositioningHandler=function(e,t){var n="scroll.select2."+t.id,i="resize.select2."+t.id,r="orientationchange.select2."+t.id;this.$container.parents().filter(a.hasScroll).off(n),f(window).off(n+" "+i+" "+r)},e.prototype._positionDropdown=function(){var e=f(window),t=this.$dropdown.hasClass("select2-dropdown--above"),n=this.$dropdown.hasClass("select2-dropdown--below"),i=null,r=this.$container.offset();r.bottom=r.top+this.$container.outerHeight(!1);var o={height:this.$container.outerHeight(!1)};o.top=r.top,o.bottom=r.top+o.height;var s=this.$dropdown.outerHeight(!1),a=e.scrollTop(),l=e.scrollTop()+e.height(),c=ar.bottom+s,d={left:r.left,top:o.bottom},p=this.$dropdownParent;"static"===p.css("position")&&(p=p.offsetParent());var h={top:0,left:0};(f.contains(document.body,p[0])||p[0].isConnected)&&(h=p.offset()),d.top-=h.top,d.left-=h.left,t||n||(i="below"),u||!c||t?!c&&u&&t&&(i="below"):i="above",("above"==i||t&&"below"!==i)&&(d.top=o.top-h.top-s),null!=i&&(this.$dropdown.removeClass("select2-dropdown--below select2-dropdown--above").addClass("select2-dropdown--"+i),this.$container.removeClass("select2-container--below select2-container--above").addClass("select2-container--"+i)),this.$dropdownContainer.css(d)},e.prototype._resizeDropdown=function(){var e={width:this.$container.outerWidth(!1)+"px"};this.options.get("dropdownAutoWidth")&&(e.minWidth=e.width,e.position="relative",e.width="auto"),this.$dropdown.css(e)},e.prototype._showDropdown=function(e){this.$dropdownContainer.appendTo(this.$dropdownParent),this._positionDropdown(),this._resizeDropdown()},e}),e.define("[AWS-SECRET-REMOVED]",[],function(){function e(e,t,n,i){this.minimumResultsForSearch=n.get("minimumResultsForSearch"),this.minimumResultsForSearch<0&&(this.minimumResultsForSearch=1/0),e.call(this,t,n,i)}return e.prototype.showSearch=function(e,t){return!(function e(t){for(var n=0,i=0;i');return e.attr("dir",this.options.get("dir")),this.$container=e,this.$container.addClass("select2-container--"+this.options.get("theme")),u.StoreData(e[0],"element",this.$element),e},d}),e.define("select2/compat/utils",["jquery"],function(s){return{syncCssClasses:function(e,t,n){var i,r,o=[];(i=s.trim(e.attr("class")))&&s((i=""+i).split(/\s+/)).each(function(){0===this.indexOf("select2-")&&o.push(this)}),(i=s.trim(t.attr("class")))&&s((i=""+i).split(/\s+/)).each(function(){0!==this.indexOf("select2-")&&null!=(r=n(this))&&o.push(r)}),e.attr("class",o.join(" "))}}}),e.define("select2/compat/containerCss",["jquery","./utils"],function(s,a){function l(e){return null}function e(){}return e.prototype.render=function(e){var t=e.call(this),n=this.options.get("containerCssClass")||"";s.isFunction(n)&&(n=n(this.$element));var i=this.options.get("adaptContainerCssClass");if(i=i||l,-1!==n.indexOf(":all:")){n=n.replace(":all:","");var r=i;i=function(e){var t=r(e);return null!=t?t+" "+e:e}}var o=this.options.get("containerCss")||{};return s.isFunction(o)&&(o=o(this.$element)),a.syncCssClasses(t,this.$element,i),t.css(o),t.addClass(n),t},e}),e.define("select2/compat/dropdownCss",["jquery","./utils"],function(s,a){function l(e){return null}function e(){}return e.prototype.render=function(e){var t=e.call(this),n=this.options.get("dropdownCssClass")||"";s.isFunction(n)&&(n=n(this.$element));var i=this.options.get("adaptDropdownCssClass");if(i=i||l,-1!==n.indexOf(":all:")){n=n.replace(":all:","");var r=i;i=function(e){var t=r(e);return null!=t?t+" "+e:e}}var o=this.options.get("dropdownCss")||{};return s.isFunction(o)&&(o=o(this.$element)),a.syncCssClasses(t,this.$element,i),t.css(o),t.addClass(n),t},e}),e.define("select2/compat/initSelection",["jquery"],function(i){function e(e,t,n){n.get("debug")&&window.console&&console.warn&&console.warn("Select2: The `initSelection` option has been deprecated in favor of a custom data adapter that overrides the `current` method. This method is now called multiple times instead of a single time when the instance is initialized. Support will be removed for the `initSelection` option in future versions of Select2"),this.initSelection=n.get("initSelection"),this._isInitialized=!1,e.call(this,t,n)}return e.prototype.current=function(e,t){var n=this;this._isInitialized?e.call(this,t):this.initSelection.call(null,this.$element,function(e){n._isInitialized=!0,i.isArray(e)||(e=[e]),t(e)})},e}),e.define("select2/compat/inputData",["jquery","../utils"],function(s,i){function e(e,t,n){this._currentData=[],this._valueSeparator=n.get("valueSeparator")||",","hidden"===t.prop("type")&&n.get("debug")&&console&&console.warn&&console.warn("Select2: Using a hidden input with Select2 is no longer supported and may stop working in the future. It is recommended to use a `');this.$searchContainer=t,this.$search=t.find("input");var n=e.call(this);return this._transferTabIndex(),n},e.prototype.bind=function(e,t,n){var i=this,r=t.id+"-results";e.call(this,t,n),t.on("open",function(){i.$search.attr("aria-controls",r),i.$search.trigger("focus")}),t.on("close",function(){i.$search.val(""),i.$search.removeAttr("aria-controls"),i.$search.removeAttr("aria-activedescendant"),i.$search.trigger("focus")}),t.on("enable",function(){i.$search.prop("disabled",!1),i._transferTabIndex()}),t.on("disable",function(){i.$search.prop("disabled",!0)}),t.on("focus",function(e){i.$search.trigger("focus")}),t.on("results:focus",function(e){e.data._resultId?i.$search.attr("aria-activedescendant",e.data._resultId):i.$search.removeAttr("aria-activedescendant")}),this.$selection.on("focusin",".select2-search--inline",function(e){i.trigger("focus",e)}),this.$selection.on("focusout",".select2-search--inline",function(e){i._handleBlur(e)}),this.$selection.on("keydown",".select2-search--inline",function(e){if(e.stopPropagation(),i.trigger("keypress",e),i._keyUpPrevented=e.isDefaultPrevented(),e.which===l.BACKSPACE&&""===i.$search.val()){var t=i.$searchContainer.prev(".select2-selection__choice");if(0this.maximumInputLength?this.trigger("results:message",{message:"inputTooLong",args:{maximum:this.maximumInputLength,input:t.term,params:t}}):e.call(this,t,n)},e}),e.define("select2/data/maximumSelectionLength",[],function(){function e(e,t,n){this.maximumSelectionLength=n.get("maximumSelectionLength"),e.call(this,t,n)}return e.prototype.bind=function(e,t,n){var i=this;e.call(this,t,n),t.on("select",function(){i._checkIfMaximumSelected()})},e.prototype.query=function(e,t,n){var i=this;this._checkIfMaximumSelected(function(){e.call(i,t,n)})},e.prototype._checkIfMaximumSelected=function(e,n){var i=this;this.current(function(e){var t=null!=e?e.length:0;0=i.maximumSelectionLength?i.trigger("results:message",{message:"maximumSelected",args:{maximum:i.maximumSelectionLength}}):n&&n()})},e}),e.define("select2/dropdown",["jquery","./utils"],function(t,e){function n(e,t){this.$element=e,this.options=t,n.__super__.constructor.call(this)}return e.Extend(n,e.Observable),n.prototype.render=function(){var e=t('');return e.attr("dir",this.options.get("dir")),this.$dropdown=e},n.prototype.bind=function(){},n.prototype.position=function(e,t){},n.prototype.destroy=function(){this.$dropdown.remove()},n}),e.define("select2/dropdown/search",["jquery","../utils"],function(o,e){function t(){}return t.prototype.render=function(e){var t=e.call(this),n=o('');return this.$searchContainer=n,this.$search=n.find("input"),t.prepend(n),t},t.prototype.bind=function(e,t,n){var i=this,r=t.id+"-results";e.call(this,t,n),this.$search.on("keydown",function(e){i.trigger("keypress",e),i._keyUpPrevented=e.isDefaultPrevented()}),this.$search.on("input",function(e){o(this).off("keyup")}),this.$search.on("keyup input",function(e){i.handleSearch(e)}),t.on("open",function(){i.$search.attr("tabindex",0),i.$search.attr("aria-controls",r),i.$search.trigger("focus"),window.setTimeout(function(){i.$search.trigger("focus")},0)}),t.on("close",function(){i.$search.attr("tabindex",-1),i.$search.removeAttr("aria-controls"),i.$search.removeAttr("aria-activedescendant"),i.$search.val(""),i.$search.trigger("blur")}),t.on("focus",function(){t.isOpen()||i.$search.trigger("focus")}),t.on("results:all",function(e){null!=e.query.term&&""!==e.query.term||(i.showSearch(e)?i.$searchContainer.removeClass("select2-search--hide"):i.$searchContainer.addClass("select2-search--hide"))}),t.on("results:focus",function(e){e.data._resultId?i.$search.attr("aria-activedescendant",e.data._resultId):i.$search.removeAttr("aria-activedescendant")})},t.prototype.handleSearch=function(e){if(!this._keyUpPrevented){var t=this.$search.val();this.trigger("query",{term:t})}this._keyUpPrevented=!1},t.prototype.showSearch=function(e,t){return!0},t}),e.define("select2/dropdown/hidePlaceholder",[],function(){function e(e,t,n,i){this.placeholder=this.normalizePlaceholder(n.get("placeholder")),e.call(this,t,n,i)}return e.prototype.append=function(e,t){t.results=this.removePlaceholder(t.results),e.call(this,t)},e.prototype.normalizePlaceholder=function(e,t){return"string"==typeof t&&(t={id:"",text:t}),t},e.prototype.removePlaceholder=function(e,t){for(var n=t.slice(0),i=t.length-1;0<=i;i--){var r=t[i];this.placeholder.id===r.id&&n.splice(i,1)}return n},e}),e.define("select2/dropdown/infiniteScroll",["jquery"],function(n){function e(e,t,n,i){this.lastParams={},e.call(this,t,n,i),this.$loadingMore=this.createLoadingMore(),this.loading=!1}return e.prototype.append=function(e,t){this.$loadingMore.remove(),this.loading=!1,e.call(this,t),this.showLoadingMore(t)&&(this.$results.append(this.$loadingMore),this.loadMoreIfNeeded())},e.prototype.bind=function(e,t,n){var i=this;e.call(this,t,n),t.on("query",function(e){i.lastParams=e,i.loading=!0}),t.on("query:append",function(e){i.lastParams=e,i.loading=!0}),this.$results.on("scroll",this.loadMoreIfNeeded.bind(this))},e.prototype.loadMoreIfNeeded=function(){var e=n.contains(document.documentElement,this.$loadingMore[0]);if(!this.loading&&e){var t=this.$results.offset().top+this.$results.outerHeight(!1);this.$loadingMore.offset().top+this.$loadingMore.outerHeight(!1)<=t+50&&this.loadMore()}},e.prototype.loadMore=function(){this.loading=!0;var e=n.extend({},{page:1},this.lastParams);e.page++,this.trigger("query:append",e)},e.prototype.showLoadingMore=function(e,t){return t.pagination&&t.pagination.more},e.prototype.createLoadingMore=function(){var e=n('
  • '),t=this.options.get("translations").get("loadingMore");return e.html(t(this.lastParams)),e},e}),e.define("select2/dropdown/attachBody",["jquery","../utils"],function(f,a){function e(e,t,n){this.$dropdownParent=f(n.get("dropdownParent")||document.body),e.call(this,t,n)}return e.prototype.bind=function(e,t,n){var i=this;e.call(this,t,n),t.on("open",function(){i._showDropdown(),i._attachPositioningHandler(t),i._bindContainerResultHandlers(t)}),t.on("close",function(){i._hideDropdown(),i._detachPositioningHandler(t)}),this.$dropdownContainer.on("mousedown",function(e){e.stopPropagation()})},e.prototype.destroy=function(e){e.call(this),this.$dropdownContainer.remove()},e.prototype.position=function(e,t,n){t.attr("class",n.attr("class")),t.removeClass("select2"),t.addClass("select2-container--open"),t.css({position:"absolute",top:-999999}),this.$container=n},e.prototype.render=function(e){var t=f(""),n=e.call(this);return t.append(n),this.$dropdownContainer=t},e.prototype._hideDropdown=function(e){this.$dropdownContainer.detach()},e.prototype._bindContainerResultHandlers=function(e,t){if(!this._containerResultsHandlersBound){var n=this;t.on("results:all",function(){n._positionDropdown(),n._resizeDropdown()}),t.on("results:append",function(){n._positionDropdown(),n._resizeDropdown()}),t.on("results:message",function(){n._positionDropdown(),n._resizeDropdown()}),t.on("select",function(){n._positionDropdown(),n._resizeDropdown()}),t.on("unselect",function(){n._positionDropdown(),n._resizeDropdown()}),this._containerResultsHandlersBound=!0}},e.prototype._attachPositioningHandler=function(e,t){var n=this,i="scroll.select2."+t.id,r="resize.select2."+t.id,o="orientationchange.select2."+t.id,s=this.$container.parents().filter(a.hasScroll);s.each(function(){a.StoreData(this,"select2-scroll-position",{x:f(this).scrollLeft(),y:f(this).scrollTop()})}),s.on(i,function(e){var t=a.GetData(this,"select2-scroll-position");f(this).scrollTop(t.y)}),f(window).on(i+" "+r+" "+o,function(e){n._positionDropdown(),n._resizeDropdown()})},e.prototype._detachPositioningHandler=function(e,t){var n="scroll.select2."+t.id,i="resize.select2."+t.id,r="orientationchange.select2."+t.id;this.$container.parents().filter(a.hasScroll).off(n),f(window).off(n+" "+i+" "+r)},e.prototype._positionDropdown=function(){var e=f(window),t=this.$dropdown.hasClass("select2-dropdown--above"),n=this.$dropdown.hasClass("select2-dropdown--below"),i=null,r=this.$container.offset();r.bottom=r.top+this.$container.outerHeight(!1);var o={height:this.$container.outerHeight(!1)};o.top=r.top,o.bottom=r.top+o.height;var s=this.$dropdown.outerHeight(!1),a=e.scrollTop(),l=e.scrollTop()+e.height(),c=ar.bottom+s,d={left:r.left,top:o.bottom},p=this.$dropdownParent;"static"===p.css("position")&&(p=p.offsetParent());var h={top:0,left:0};(f.contains(document.body,p[0])||p[0].isConnected)&&(h=p.offset()),d.top-=h.top,d.left-=h.left,t||n||(i="below"),u||!c||t?!c&&u&&t&&(i="below"):i="above",("above"==i||t&&"below"!==i)&&(d.top=o.top-h.top-s),null!=i&&(this.$dropdown.removeClass("select2-dropdown--below select2-dropdown--above").addClass("select2-dropdown--"+i),this.$container.removeClass("select2-container--below select2-container--above").addClass("select2-container--"+i)),this.$dropdownContainer.css(d)},e.prototype._resizeDropdown=function(){var e={width:this.$container.outerWidth(!1)+"px"};this.options.get("dropdownAutoWidth")&&(e.minWidth=e.width,e.position="relative",e.width="auto"),this.$dropdown.css(e)},e.prototype._showDropdown=function(e){this.$dropdownContainer.appendTo(this.$dropdownParent),this._positionDropdown(),this._resizeDropdown()},e}),e.define("select2/dropdown/minimumResultsForSearch",[],function(){function e(e,t,n,i){this.minimumResultsForSearch=n.get("minimumResultsForSearch"),this.minimumResultsForSearch<0&&(this.minimumResultsForSearch=1/0),e.call(this,t,n,i)}return e.prototype.showSearch=function(e,t){return!(function e(t){for(var n=0,i=0;i');return e.attr("dir",this.options.get("dir")),this.$container=e,this.$container.addClass("select2-container--"+this.options.get("theme")),u.StoreData(e[0],"element",this.$element),e},d}),e.define("select2/compat/utils",["jquery"],function(s){return{syncCssClasses:function(e,t,n){var i,r,o=[];(i=s.trim(e.attr("class")))&&s((i=""+i).split(/\s+/)).each(function(){0===this.indexOf("select2-")&&o.push(this)}),(i=s.trim(t.attr("class")))&&s((i=""+i).split(/\s+/)).each(function(){0!==this.indexOf("select2-")&&null!=(r=n(this))&&o.push(r)}),e.attr("class",o.join(" "))}}}),e.define("select2/compat/containerCss",["jquery","./utils"],function(s,a){function l(e){return null}function e(){}return e.prototype.render=function(e){var t=e.call(this),n=this.options.get("containerCssClass")||"";s.isFunction(n)&&(n=n(this.$element));var i=this.options.get("adaptContainerCssClass");if(i=i||l,-1!==n.indexOf(":all:")){n=n.replace(":all:","");var r=i;i=function(e){var t=r(e);return null!=t?t+" "+e:e}}var o=this.options.get("containerCss")||{};return s.isFunction(o)&&(o=o(this.$element)),a.syncCssClasses(t,this.$element,i),t.css(o),t.addClass(n),t},e}),e.define("select2/compat/dropdownCss",["jquery","./utils"],function(s,a){function l(e){return null}function e(){}return e.prototype.render=function(e){var t=e.call(this),n=this.options.get("dropdownCssClass")||"";s.isFunction(n)&&(n=n(this.$element));var i=this.options.get("adaptDropdownCssClass");if(i=i||l,-1!==n.indexOf(":all:")){n=n.replace(":all:","");var r=i;i=function(e){var t=r(e);return null!=t?t+" "+e:e}}var o=this.options.get("dropdownCss")||{};return s.isFunction(o)&&(o=o(this.$element)),a.syncCssClasses(t,this.$element,i),t.css(o),t.addClass(n),t},e}),e.define("select2/compat/initSelection",["jquery"],function(i){function e(e,t,n){n.get("debug")&&window.console&&console.warn&&console.warn("Select2: The `initSelection` option has been deprecated in favor of a custom data adapter that overrides the `current` method. This method is now called multiple times instead of a single time when the instance is initialized. Support will be removed for the `initSelection` option in future versions of Select2"),this.initSelection=n.get("initSelection"),this._isInitialized=!1,e.call(this,t,n)}return e.prototype.current=function(e,t){var n=this;this._isInitialized?e.call(this,t):this.initSelection.call(null,this.$element,function(e){n._isInitialized=!0,i.isArray(e)||(e=[e]),t(e)})},e}),e.define("select2/compat/inputData",["jquery","../utils"],function(s,i){function e(e,t,n){this._currentData=[],this._valueSeparator=n.get("valueSeparator")||",","hidden"===t.prop("type")&&n.get("debug")&&console&&console.warn&&console.warn("Select2: Using a hidden input with Select2 is no longer supported and may stop working in the future. It is recommended to use a ` box value when multiselect is false + requestAnimationFrame(function () { + const parent = document.getElementById(`${name}__container`); + const id = parent.getAttribute('id'); + if (phac_aspc_autocomplete_blur_skip[id]) return false; + if (!parent.contains(document.activeElement)) { + // Focus has left the component + + // Reset the component's state + phac_aspc_autocomplete_closed[id] = false; + if (phac_aspc_autocomplete_keyup_debounce[id]) { + clearTimeout(phac_aspc_autocomplete_keyup_debounce[id]) + phac_aspc_autocomplete_keyup_debounce[id] = false; + } + + // Get reference to box + const el = document.getElementById(name + '__textinput'); + + // Abort active HTMX operations on the input box to avoid race conditions + htmx.trigger(el, 'htmx:abort'); + + // Set the text input value + const data_el = document.getElementById(name + '__data'); + if (!sync) { + el.value = ''; + } else { + el.value = data_el.getAttribute('data-phac-aspc-autocomplete'); + } + phac_aspc_autocomplete_set_initial_value(parent, true); + + // Get reference to list of results + const results = document.getElementById(name + '__items'); + + // Get reference to aria live area + const live = document.getElementById(name + '__info'); + + // Test if HTMX is currently in the process of swapping + if (results.classList.contains('htmx-swapping')) { + // To ensure the results are hidden, wait for HTMX to finish, then hide. + results.addEventListener( + 'htmx:afterSettle', () => { + phac_aspc_autocomplete_hide_results(parent); + } + ); + } + // Hide the results + phac_aspc_autocomplete_hide_results(parent); + + // Clear the live info + live.innerHTML = ''; + + // Change the min-width of the text input back to the (small) default + parent.querySelector('.textinput') + .parentElement.classList.remove('ac-active'); + + // Ensure no elements remain 'focused', and set focus to input + phac_aspc_autocomplete_clear_focus(parent, item); + } + }); +} + +function phac_aspc_autocomplete_item_click_handler(event) { + const container = event.target.closest('.phac_aspc_form_autocomplete'); + const results = container.querySelector('.results'); + const open = results && results.classList.contains('show'); + if (open) { + phac_aspc_autocomplete_clear_focus(container, true); + phac_aspc_autocomplete_hide_results(container); + } + return true; +} + +function phac_aspc_autocomplete_focus_handler(event) { + const container = event.target.closest('.phac_aspc_form_autocomplete'); + phac_aspc_autocomplete_clear_focus(container, true); + phac_aspc_autocomplete_set_initial_value(container); + setTimeout(() => { + // Announce selected items to screen readers. (if any) + const info = container.querySelector('.live_info'); + info.innerHTML += ' '; + }, 100); +} + +const phac_aspc_autocomplete_initial_value = {}; +function phac_aspc_autocomplete_set_initial_value(container, reset = false) { + const id = container.getAttribute('id'); + const el = container.querySelector('.textinput'); + if (reset) { + phac_aspc_autocomplete_initial_value[id] = undefined; + return; + } + if (phac_aspc_autocomplete_initial_value[id] === undefined) { + phac_aspc_autocomplete_initial_value[id] = el.value; + } +} + +phac_aspc_autocomplete_closed = {}; +function phac_aspc_autocomplete_click_handler(event) { + if (event.target.classList.contains('item')) return true; + const container = event.target.closest('.phac_aspc_form_autocomplete'); + const id = container.getAttribute('id'); + const results = container.querySelector('.results'); + const open = results && results.classList.contains('show'); + const text_box = container.querySelector('.textinput'); + + phac_aspc_autocomplete_set_initial_value(container); + phac_aspc_autocomplete_clear_focus(container, true); + + phac_aspc_autocomplete_closed[id] = open; + if (open) { + phac_aspc_autocomplete_hide_results(container); + } else { + text_box.dispatchEvent(new Event('phac_aspc_autocomplete_trigger')); + } + return false; +} + +const phac_aspc_autocomplete_keyup_debounce = {}; +function phac_aspc_autocomplete_keyup_handler(event) { + if (event.keyCode === 13) return false; + const debounce = phac_aspc_autocomplete_keyup_debounce; + const value = phac_aspc_autocomplete_initial_value; + const elem = event.target; + + const container = elem.closest('.phac_aspc_form_autocomplete'); + const id = container.getAttribute('id'); + + phac_aspc_autocomplete_set_initial_value(container); + + if (debounce[id]) { + clearTimeout(debounce[id]); + debounce[id] = false; + } + + const v = elem.value; + + debounce[id] = setTimeout(() => { + if (!phac_aspc_autocomplete_closed[id] && v != value[id]) { + elem.dispatchEvent(new Event('phac_aspc_autocomplete_trigger')); + } else if ( + phac_aspc_autocomplete_closed[id] && + v != value[id] && + v == '' + ) { + phac_aspc_autocomplete_closed[id] = false; + } + value[id] = v; + }, 250); + return true; +} + +const phac_aspc_autocomplete_keydown_debounce = {}; +function phac_aspc_autocomplete_keydown_handler(event) { + if (event.target.classList.contains('textinput') && event.keyCode > 47) { + // Expands the min-width of text input to a reasonable size when typing + event.target.parentElement.classList.add('ac-active'); + } else if (event.target.classList.contains('textinput') && event.keyCode === 8 + && event.target.value.length === 1) { + // Shrinks the min-width of text input back to the (small) default if + // the text input is empty due to backspacing + event.target.parentElement.classList.remove('ac-active'); + } + // Handler responsible for keyboard navigation (up, down, esc and backspace) + const debounce = phac_aspc_autocomplete_keydown_debounce; + const whereTo = (container, down = true, skip_element = true, count = 1) => { + // This function determines which element should receive focus + // TODO: bug with down + if (!container) return null; + const results = container.querySelector('.results'); + let element = container.querySelector('.hasFocus'); + const must_skip = Boolean(element); + const fallback = down ? results.querySelector('a:first-child') + : results.querySelector('a:last-child'); + if (!element) element = fallback; + if (!element) return null; + const dir = down ? + elem => elem.nextElementSibling : elem => elem.previousElementSibling; + + let el = skip_element && must_skip ? dir(element) : element; + let counter = count; + while (el && counter > 0) { + if (el.getAttribute('href')) { + if (counter === 1) return el; + } + if (counter !== 1) counter -= 1; + el = dir(el); + } + if (counter > 0) return fallback; + return null; + } + const switchFocus = (element, container) => { + phac_aspc_autocomplete_clear_focus(container); + const el = container.querySelector('.textinput'); + el.setAttribute('aria-activedescendant', element.getAttribute('id')); + element.classList.add('hasFocus'); + element.scrollIntoView({ block: 'nearest' }) + } + const selectFocusedItem = (container) => { + const item = container.querySelector('.hasFocus'); + if (item) { + item.dispatchEvent(new Event('click')); + } + return item; + } + const focusWhenResultsShown = (container, timeout, up) => { + // This function uses polling to wait for the results to be shown before + // moving focus. + const id = container.getAttribute('id'); + const results = container.querySelector('.results'); + if (!results || !results.classList.contains('show')) { + if (timeout > 0) { + if (debounce[id]) + clearTimeout(debounce[id]); + debounce[id] = + setTimeout( + () => focusWhenResultsShown(container, timeout - 100, up), + 100 + ); + } + return false; + } + debounce[id] = undefined; + phac_aspc_autocomplete_closed[id] = false; + if (up) { + const prev = whereTo(container, false); + if (prev) switchFocus(prev, container); + } else { + const next = whereTo(container, true, false); + if (next) switchFocus(next, container); + } + } + + const getPageSize = (container) => { + const r1 = container.getBoundingClientRect(); + const r2 = container.querySelector('.item').getBoundingClientRect(); + return Math.floor((r1.bottom - r1.top) / (r2.bottom - r2.top)); + } + + const container = event.target.closest('.phac_aspc_form_autocomplete'); + const results = container.querySelector('.results'); + const id = container.getAttribute('id'); + + phac_aspc_autocomplete_set_initial_value(container); + + if (event.keyCode === 27) { + // Escape key + if (results && results.classList.contains('show')) { + phac_aspc_autocomplete_clear_focus(container, true); + phac_aspc_autocomplete_hide_results(container); + phac_aspc_autocomplete_closed[id] = true; + } else { + event.target.value = ''; + } + } else if (event.keyCode === 13) { + // Enter key + if (results && results.classList.contains('show')) { + selectFocusedItem(container); + phac_aspc_autocomplete_clear_focus(container, true); + phac_aspc_autocomplete_hide_results(container); + } + return false; + } else if ( + event.keyCode === 8 && + event.target.value.length === 0 + ) { + // Backspace key on text input + const chip = container.querySelectorAll('.chip a'); + if (chip.length > 0) chip[chip.length - 1].dispatchEvent(new Event('click')); + } else if (event.keyCode === 33) { + // Page up key + if (results) { + const prev = whereTo( + container, + false, + true, + getPageSize(results) + ); + if (prev) switchFocus(prev, container); + return false; + } + } else if (event.keyCode === 34) { + // Page down key + if (results) { + const next = whereTo( + container, + true, + true, + getPageSize(results) + ); + if (next) switchFocus(next, container); + return false; + } + } else if (event.keyCode === 40) { + // down arrow + // Open the results if they are not shown + if (!results || !results.classList.contains('show')) { + event.target.dispatchEvent(new Event('phac_aspc_autocomplete_trigger')); + if (event.altKey) { + phac_aspc_autocomplete_closed[id] = false; + } else { + focusWhenResultsShown(container, 3000); + } + } else { + const next = whereTo(container); + if (next) switchFocus(next, container); + } + return false; + } else if (event.keyCode === 38) { + // up arrow on item + // Open the results if they are not shown + if (!results || !results.classList.contains('show')) { + event.target.dispatchEvent(new Event('phac_aspc_autocomplete_trigger')); + if (event.altKey) { + phac_aspc_autocomplete_closed[id] = false; + } else { + focusWhenResultsShown(container, 3000, true); + } + } else { + const prev = whereTo(container, false); + if (prev) switchFocus(prev, container); + } + return false; + } else { + phac_aspc_autocomplete_closed[id] = false; + } + phac_aspc_autocomplete_clear_focus(container, true); + return true; +} + +class AbstractAutocompleteHelper { + /* + this is a helper class to manipulate autocomplete components + creating instances has zero side-effects + it's assumed you may instantiate the same component multiple times + */ + constructor(fieldName, componentPrefix="") { + this.fieldName = fieldName; + this.componentPrefix = componentPrefix; + } + getComponentId(){ + return this.componentPrefix + this.fieldName; + } + getContainer(){ + return document.getElementById(`${this.getComponentId()}__container`); + } + getInput(){ + return this.getContainer().querySelector(`#${this.getComponentId()}__textinput`); + } + getInputWrapper(){ + return this.getContainer().querySelector(`#${this.getComponentId()}`); + } + getResultItems(){ + return this.getContainer().querySelector(`#${this.getComponentId()}__items`); + } + getInfo(){ + return this.getContainer().querySelector(`#${this.getComponentId()}__info`); + } + getDataContainer(){ + return this.getContainer().querySelector(`#${this.getComponentId()}__data`); + } + // behavioral methods + clear(){ + this.getInput().value = ''; + this.getInputWrapper().innerHTML = ''; + this.getResultItems().innerHTML = ''; + this.getInfo().innerHTML = ''; + this.getDataContainer().removeAttribute('data-phac-aspc-autocomplete'); + } +} + +class SingleAutocompleteHelper extends AbstractAutocompleteHelper {} + +class MultiAutocompleteHelper extends AbstractAutocompleteHelper { + getSrDescription(){ + return this.getContainer().querySelector(`#${this.getComponentId()}__sr_description`); + } + + getChips(){ + return this.getContainer().querySelectorAll(`#${this.getComponentId()}_ac_container li.chip`); + } + + clear(){ + super.clear(); + this.getChips().forEach(chip => chip.remove()); + this.getSrDescription().innerHTML = ''; + } +} \ No newline at end of file diff --git a/staticfiles/css/inline-edit.css b/staticfiles/css/inline-edit.css deleted file mode 100644 index a0b77294..00000000 --- a/staticfiles/css/inline-edit.css +++ /dev/null @@ -1,187 +0,0 @@ -/* Inline editing styles */ -.editable-container { - position: relative; -} - -[data-editable] { - position: relative; - padding: 0.25rem; - border-radius: 0.25rem; - transition: background-color 0.2s; -} - -[data-editable]:hover { - background-color: rgba(0, 0, 0, 0.05); -} - -.dark [data-editable]:hover { - background-color: rgba(255, 255, 255, 0.05); -} - -[data-edit-button] { - opacity: 0; - position: absolute; - right: 0.5rem; - top: 0.5rem; - transition: opacity 0.2s; - padding: 0.5rem; - border-radius: 0.375rem; - background-color: rgba(255, 255, 255, 0.9); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -} - -.dark [data-edit-button] { - background-color: rgba(31, 41, 55, 0.9); -} - -.editable-container:hover [data-edit-button] { - opacity: 1; -} - -.form-input, .form-textarea, .form-select { - width: 100%; - padding: 0.5rem; - border: 1px solid #e2e8f0; - border-radius: 0.375rem; - background-color: white; - transition: border-color 0.2s, box-shadow 0.2s; -} - -.dark .form-input, .dark .form-textarea, .dark .form-select { - background-color: #1f2937; - border-color: #374151; - color: white; -} - -.form-input:focus, .form-textarea:focus, .form-select:focus { - outline: none; - border-color: #4f46e5; - box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); -} - -.dark .form-input:focus, .dark .form-textarea:focus, .dark .form-select:focus { - border-color: #6366f1; - box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); -} - -/* Notifications */ -.notification { - position: fixed; - bottom: 1rem; - right: 1rem; - padding: 1rem; - border-radius: 0.5rem; - color: white; - max-width: 24rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); - z-index: 50; - animation: slide-in 0.3s ease-out; -} - -.notification-success { - background-color: #059669; -} - -.dark .notification-success { - background-color: #047857; -} - -.notification-error { - background-color: #dc2626; -} - -.dark .notification-error { - background-color: #b91c1c; -} - -.notification-info { - background-color: #3b82f6; -} - -.dark .notification-info { - background-color: #2563eb; -} - -@keyframes slide-in { - from { - transform: translateX(100%); - opacity: 0; - } - to { - transform: translateX(0); - opacity: 1; - } -} - -/* Add/Edit Form Styles */ -.form-section { - @apply space-y-6; -} - -.form-group { - @apply space-y-2; -} - -.form-label { - @apply block text-sm font-medium text-gray-700 dark:text-gray-300; -} - -.form-error { - @apply mt-1 text-sm text-red-600 dark:text-red-400; -} - -.form-help { - @apply mt-1 text-sm text-gray-500 dark:text-gray-400; -} - -/* Button Styles */ -.btn { - @apply inline-flex items-center justify-center px-4 py-2 font-medium transition-colors rounded-lg; -} - -.btn-primary { - @apply text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600; -} - -.btn-secondary { - @apply text-gray-700 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500; -} - -.btn-danger { - @apply text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600; -} - -/* Status Badges */ -.status-badge { - @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; -} - -.status-operating { - @apply text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-200; -} - -.status-closed { - @apply text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-200; -} - -.status-construction { - @apply text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-200; -} - -/* Navigation Links */ -.nav-link { - @apply flex items-center px-3 py-2 text-gray-700 transition-colors rounded-lg dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700; -} - -.nav-link i { - @apply mr-2; -} - -/* Menu Items */ -.menu-item { - @apply flex items-center w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700; -} - -.menu-item i { - @apply mr-3; -} diff --git a/staticfiles/css/src/input.css b/staticfiles/css/src/input.css index c0c7d323..6ce1b596 100644 --- a/staticfiles/css/src/input.css +++ b/staticfiles/css/src/input.css @@ -1,15 +1,20 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import "tailwindcss"; + +@theme { + --color-primary: #4f46e5; + --color-secondary: #e11d48; + --color-accent: #8b5cf6; + --font-family-sans: Poppins, sans-serif; +} @layer components { /* Button Styles */ .btn-primary { - @apply inline-flex items-center px-6 py-2.5 border border-transparent rounded-full shadow-md text-sm font-medium text-white bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-105 transition-all; + @apply inline-flex items-center px-6 py-2.5 border border-transparent rounded-full shadow-md text-sm font-medium text-white bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 focus:outline-hidden focus:ring-3 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-105 transition-all; } .btn-secondary { - @apply inline-flex items-center px-6 py-2.5 border border-gray-200 dark:border-gray-700 rounded-full shadow-md text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-105 transition-all; + @apply inline-flex items-center px-6 py-2.5 border border-gray-200 dark:border-gray-700 rounded-full shadow-md text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-3 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-105 transition-all; } /* [Previous styles remain unchanged until mobile menu section...] */ @@ -65,7 +70,7 @@ #theme-toggle:checked+.theme-toggle-btn i::before { content: "\f185"; - color: theme('colors.yellow.400'); + @apply text-yellow-400; } /* Navigation Components */ @@ -138,7 +143,7 @@ @media (min-width: 1024px) { #mobileMenu { - @apply hidden !important; + @apply !hidden; } } @@ -153,7 +158,7 @@ /* Form Components */ .form-input { - @apply w-full px-4 py-3 text-gray-900 transition-all border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary; + @apply w-full px-4 py-3 text-gray-900 transition-all border border-gray-200 rounded-lg shadow-xs dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-xs dark:text-white focus:ring-3 focus:ring-primary/50 focus:border-primary; } .form-label { @@ -187,7 +192,7 @@ /* Auth Components */ .auth-card { - @apply w-full max-w-md p-8 mx-auto border shadow-xl bg-white/90 dark:bg-gray-800/90 rounded-2xl backdrop-blur-sm border-gray-200/50 dark:border-gray-700/50; + @apply w-full max-w-md p-8 mx-auto border shadow-xl bg-white/90 dark:bg-gray-800/90 rounded-2xl backdrop-blur-xs border-gray-200/50 dark:border-gray-700/50; } .auth-title { @@ -217,7 +222,7 @@ /* Social Login Buttons */ .btn-social { - @apply w-full flex items-center justify-center px-6 py-3 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-[1.02] transition-all mb-3; + @apply w-full flex items-center justify-center px-6 py-3 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-3 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-[1.02] transition-all mb-3; } .btn-discord { @@ -230,7 +235,7 @@ /* Alert Components */ .alert { - @apply p-4 mb-4 shadow-lg rounded-xl backdrop-blur-sm; + @apply p-4 mb-4 shadow-lg rounded-xl backdrop-blur-xs; } .alert-success { @@ -262,6 +267,122 @@ @apply grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3; } + /* Adaptive Grid System - White Space Solutions */ + .grid-adaptive { + @apply grid gap-6; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + } + + .grid-adaptive-sm { + @apply grid gap-4; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + } + + .grid-adaptive-lg { + @apply grid gap-8; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + } + + /* Stats Grid - Always Even Layout */ + .grid-stats { + @apply grid gap-4; + /* Default: Force 2+3 layout for small screens */ + grid-template-columns: repeat(2, 1fr); + } + + .grid-stats-wide { + @apply grid gap-4; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + } + + /* Enhanced Responsive Grid */ + .grid-responsive { + @apply grid grid-cols-1 gap-6; + @apply sm:grid-cols-2; + @apply md:grid-cols-3; + @apply lg:grid-cols-4; + @apply xl:grid-cols-5; + @apply 2xl:grid-cols-6; + } + + .grid-responsive-cards { + @apply grid grid-cols-1 gap-6; + @apply md:grid-cols-2; + @apply lg:grid-cols-3; + @apply xl:grid-cols-4; + @apply 2xl:grid-cols-5; + } + + /* Tablet-specific optimizations for 768px breakpoint */ + @media (min-width: 768px) and (max-width: 1023px) { + .grid-adaptive-sm { + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + } + /* Force 2+3 even layout for tablets */ + .grid-stats { + grid-template-columns: repeat(2, 1fr); + } + .grid-adaptive { + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + } + } + + /* Content-aware grid adjustments */ + @media (min-width: 1024px) and (max-width: 1279px) { + .grid-adaptive { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + } + .grid-adaptive-lg { + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + } + /* Force 3+2 even layout for intermediate sizes */ + .grid-stats { + grid-template-columns: repeat(3, 1fr); + } + } + + @media (min-width: 1280px) { + .grid-adaptive { + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + } + .grid-adaptive-lg { + grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); + } + /* Force 5-column even layout for large screens */ + .grid-stats { + grid-template-columns: repeat(5, 1fr); + } + } + + /* Priority Card - Operator/Owner Full-Width Responsive Behavior */ + .card-stats-priority { + /* Full width by default (small screens) */ + grid-column: 1 / -1; + } + + /* Medium screens - still full width for emphasis */ + @media (min-width: 768px) and (max-width: 1023px) { + .card-stats-priority { + grid-column: 1 / -1; + } + } + + /* Large screens - normal grid behavior */ + @media (min-width: 1024px) { + .card-stats-priority { + grid-column: auto; + } + } + + @media (min-width: 1536px) { + .grid-adaptive { + grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); + } + .grid-adaptive-lg { + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + } + } + /* Typography */ .heading-1 { @apply mb-6 text-3xl font-bold text-gray-900 dark:text-white; @@ -279,4 +400,56 @@ .turnstile { @apply flex items-center justify-center my-4; } + + /* Layout Optimization - Phase 1 Critical Fixes */ + /* Optimized Padding System */ + .p-compact { + @apply p-5; /* 20px - replaces excessive p-6 (24px) */ + } + + .p-optimized { + @apply p-4; /* 16px - replaces p-6 (24px) for 33% reduction */ + } + + .p-minimal { + @apply p-3; /* 12px - replaces p-2 (8px) for consistency */ + } + + /* Consistent Card Heights */ + .card-standard { + @apply min-h-[120px]; + } + + .card-large { + @apply min-h-[200px]; + } + + .card-stats { + @apply min-h-[80px]; + } + + /* Mobile Responsive Padding Adjustments */ + @media (max-width: 768px) { + .p-compact { + @apply p-4; /* 16px on mobile */ + } + .p-optimized { + @apply p-3.5; /* 14px on mobile */ + } + .p-minimal { + @apply p-2.5; /* 10px on mobile */ + } + + .card-standard { + @apply min-h-[100px]; + } + + .card-large { + @apply min-h-[160px]; + } + + .card-stats { + @apply min-h-[80px]; + } + } } diff --git a/staticfiles/css/tailwind.css b/staticfiles/css/tailwind.css index dab10d4b..339f78ee 100644 --- a/staticfiles/css/tailwind.css +++ b/staticfiles/css/tailwind.css @@ -1,4414 +1,4730 @@ -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -/* -! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -html, -:host { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: Poppins, sans-serif; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ - -webkit-tap-highlight-color: transparent; - /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-feature-settings: normal; - /* 2 */ - font-variation-settings: normal; - /* 3 */ - font-size: 1em; - /* 4 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - letter-spacing: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-[AWS-SECRET-REMOVED]d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.[AWS-SECRET-REMOVED]) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -[type='text'],input:where(:not([type])),[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 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: #fff; - border-color: #6b7280; - border-width: 1px; - border-radius: 0px; - padding-top: 0.5rem; - padding-right: 0.75rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - font-size: 1rem; - line-height: 1.5rem; - --tw-shadow: 0 0 #0000; -} - -[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; - --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: #2563eb; -} - -input::-moz-placeholder, textarea::-moz-placeholder { - color: #6b7280; - opacity: 1; -} - -input::placeholder,textarea::placeholder { - color: #6b7280; - opacity: 1; -} - -::-webkit-datetime-edit-fields-wrapper { - padding: 0; -} - -::-webkit-date-and-time-value { - min-height: 1.5em; - text-align: inherit; -} - -::-webkit-datetime-edit { - display: inline-flex; -} - -::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { - padding-top: 0; - 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-position: right 0.5rem center; - background-repeat: no-repeat; - background-size: 1.5em 1.5em; - padding-right: 2.5rem; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; -} - -[multiple],[size]:where(select:not([size="1"])) { - background-image: initial; - background-position: initial; - background-repeat: unset; - background-size: initial; - padding-right: 0.75rem; - -webkit-print-color-adjust: unset; - print-color-adjust: unset; -} - -[type='checkbox'],[type='radio'] { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - padding: 0; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - display: inline-block; - vertical-align: middle; - background-origin: border-box; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - flex-shrink: 0; - height: 1rem; - width: 1rem; - color: #2563eb; - background-color: #fff; - border-color: #6b7280; - border-width: 1px; - --tw-shadow: 0 0 #0000; -} - -[type='checkbox'] { - border-radius: 0px; -} - -[type='radio'] { - border-radius: 100%; -} - -[type='checkbox']:focus,[type='radio']: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: #2563eb; - --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); -} - -[type='checkbox']:checked,[type='radio']:checked { - border-color: transparent; - background-color: currentColor; - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; -} - -[type='checkbox']: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) { - [type='checkbox']:checked { - -webkit-appearance: auto; - -moz-appearance: auto; - appearance: auto; +/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */ +@layer properties; +@layer theme, base, components, utilities; +@layer theme { + :root, :host { + --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-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-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-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-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-sky-300: oklch(82.8% 0.111 230.318); + --color-sky-400: oklch(74.6% 0.16 232.661); + --color-sky-800: oklch(44.3% 0.11 240.79); + --color-sky-900: oklch(39.1% 0.09 240.876); + --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-indigo-50: oklch(96.2% 0.018 272.314); + --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-300: oklch(82.7% 0.119 306.383); + --color-purple-500: oklch(62.7% 0.265 303.9); + --color-purple-600: oklch(55.8% 0.288 302.321); + --color-purple-800: oklch(43.8% 0.218 303.724); + --color-purple-900: oklch(38.1% 0.176 304.987); + --color-purple-950: oklch(29.1% 0.149 302.717); + --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-black: #000; + --color-white: #fff; + --spacing: 0.25rem; + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + --container-xs: 20rem; + --container-md: 28rem; + --container-lg: 32rem; + --container-2xl: 42rem; + --container-3xl: 48rem; + --container-4xl: 56rem; + --container-6xl: 72rem; + --container-7xl: 80rem; + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2.25 / 1.875); + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2.5 / 2.25); + --text-5xl: 3rem; + --text-5xl--line-height: 1; + --text-6xl: 3.75rem; + --text-6xl--line-height: 1; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --radius-2xl: 1rem; + --ease-in: cubic-bezier(0.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, 0.2, 1); + --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); + --animate-spin: spin 1s linear infinite; + --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --blur-xs: 4px; + --blur-sm: 8px; + --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); + --color-primary: #4f46e5; + --color-secondary: #e11d48; + --color-accent: #8b5cf6; + --font-family-sans: Poppins, sans-serif; } } - -[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"); -} - -@media (forced-colors: active) { - [type='radio']:checked { - -webkit-appearance: auto; - -moz-appearance: auto; - appearance: auto; +@layer base { + *, ::after, ::before, ::backdrop, ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; } -} - -[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { - border-color: transparent; - background-color: currentColor; -} - -[type='checkbox']: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) { - [type='checkbox']:indeterminate { - -webkit-appearance: auto; - -moz-appearance: auto; - appearance: auto; + html, :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; } -} - -[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { - border-color: transparent; - background-color: currentColor; -} - -[type='file'] { - background: unset; - border-color: inherit; - border-width: 0; - border-radius: 0; - padding: 0; - font-size: unset; - line-height: inherit; -} - -[type='file']:focus { - outline: 1px solid ButtonText; - outline: 1px auto -webkit-focus-ring-color; -} - -.\!container { - width: 100% !important; -} - -.container { - width: 100%; -} - -@media (min-width: 640px) { - .\!container { - max-width: 640px !important; + hr { + height: 0; + color: inherit; + border-top-width: 1px; } - - .container { - max-width: 640px; + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; } -} - -@media (min-width: 768px) { - .\!container { - max-width: 768px !important; + h1, h2, h3, h4, h5, h6 { + font-size: inherit; + font-weight: inherit; } - - .container { - max-width: 768px; + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; } -} - -@media (min-width: 1024px) { - .\!container { - max-width: 1024px !important; + b, strong { + font-weight: bolder; } - - .container { - max-width: 1024px; + code, kbd, samp, pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; } -} - -@media (min-width: 1280px) { - .\!container { - max-width: 1280px !important; + small { + font-size: 80%; } - - .container { - max-width: 1280px; + sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } -} - -@media (min-width: 1536px) { - .\!container { - max-width: 1536px !important; + sub { + bottom: -0.25em; } - - .container { - max-width: 1536px; + sup { + top: -0.5em; } -} - -.prose { - color: var(--tw-prose-body); - max-width: 65ch; -} - -.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; -} - -.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-lead); - font-size: 1.25em; - line-height: 1.6; - margin-top: 1.2em; - margin-bottom: 1.2em; -} - -.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-links); - text-decoration: underline; - font-weight: 500; -} - -.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-bold); - font-weight: 600; -} - -.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: decimal; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-inline-start: 1.625em; -} - -.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-alpha; -} - -.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-alpha; -} - -.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-alpha; -} - -.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-alpha; -} - -.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-roman; -} - -.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-roman; -} - -.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-roman; -} - -.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-roman; -} - -.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: decimal; -} - -.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: disc; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-inline-start: 1.625em; -} - -.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { - font-weight: 400; - color: var(--tw-prose-counters); -} - -.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { - color: var(--tw-prose-bullets); -} - -.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.25em; -} - -.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-color: var(--tw-prose-hr); - border-top-width: 1px; - margin-top: 3em; - margin-bottom: 3em; -} - -.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 500; - font-style: italic; - color: var(--tw-prose-quotes); - border-inline-start-width: 0.25rem; - border-inline-start-color: var(--tw-prose-quote-borders); - quotes: "\201C""\201D""\2018""\2019"; - margin-top: 1.6em; - margin-bottom: 1.6em; - padding-inline-start: 1em; -} - -.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: open-quote; -} - -.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: close-quote; -} - -.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 800; - font-size: 2.25em; - margin-top: 0; - margin-bottom: 0.8888889em; - line-height: 1.1111111; -} - -.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 900; - color: inherit; -} - -.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 700; - font-size: 1.5em; - margin-top: 2em; - margin-bottom: 1em; - line-height: 1.3333333; -} - -.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 800; - color: inherit; -} - -.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - font-size: 1.25em; - margin-top: 1.6em; - margin-bottom: 0.6em; - line-height: 1.6; -} - -.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 700; - color: inherit; -} - -.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.5em; - margin-bottom: 0.5em; - line-height: 1.5; -} - -.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 700; - color: inherit; -} - -.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - display: block; - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 500; - font-family: inherit; - color: var(--tw-prose-kbd); - box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); - font-size: 0.875em; - border-radius: 0.3125rem; - padding-top: 0.1875em; - padding-inline-end: 0.375em; - padding-bottom: 0.1875em; - padding-inline-start: 0.375em; -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-code); - font-weight: 600; - font-size: 0.875em; -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: "`"; -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: "`"; -} - -.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - font-size: 0.875em; -} - -.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - font-size: 0.9em; -} - -.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-pre-code); - background-color: var(--tw-prose-pre-bg); - overflow-x: auto; - font-weight: 400; - font-size: 0.875em; - line-height: 1.7142857; - margin-top: 1.7142857em; - margin-bottom: 1.7142857em; - border-radius: 0.375rem; - padding-top: 0.8571429em; - padding-inline-end: 1.1428571em; - padding-bottom: 0.8571429em; - padding-inline-start: 1.1428571em; -} - -.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - background-color: transparent; - border-width: 0; - border-radius: 0; - padding: 0; - font-weight: inherit; - color: inherit; - font-size: inherit; - font-family: inherit; - line-height: inherit; -} - -.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: none; -} - -.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: none; -} - -.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - width: 100%; - table-layout: auto; - margin-top: 2em; - margin-bottom: 2em; - font-size: 0.875em; - line-height: 1.7142857; -} - -.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-th-borders); -} - -.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - vertical-align: bottom; - padding-inline-end: 0.5714286em; - padding-bottom: 0.5714286em; - padding-inline-start: 0.5714286em; -} - -.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-td-borders); -} - -.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 0; -} - -.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - vertical-align: baseline; -} - -.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-top-width: 1px; - border-top-color: var(--tw-prose-th-borders); -} - -.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - vertical-align: top; -} - -.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-align: start; -} - -.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; -} - -.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-captions); - font-size: 0.875em; - line-height: 1.4285714; - margin-top: 0.8571429em; -} - -.prose { - --tw-prose-body: #374151; - --tw-prose-headings: #111827; - --tw-prose-lead: #4b5563; - --tw-prose-links: #111827; - --tw-prose-bold: #111827; - --tw-prose-counters: #6b7280; - --tw-prose-bullets: #d1d5db; - --tw-prose-hr: #e5e7eb; - --tw-prose-quotes: #111827; - --tw-prose-quote-borders: #e5e7eb; - --tw-prose-captions: #6b7280; - --tw-prose-kbd: #111827; - --tw-prose-kbd-shadows: 17 24 39; - --tw-prose-code: #111827; - --tw-prose-pre-code: #e5e7eb; - --tw-prose-pre-bg: #1f2937; - --tw-prose-th-borders: #d1d5db; - --tw-prose-td-borders: #e5e7eb; - --tw-prose-invert-body: #d1d5db; - --tw-prose-invert-headings: #fff; - --tw-prose-invert-lead: #9ca3af; - --tw-prose-invert-links: #fff; - --tw-prose-invert-bold: #fff; - --tw-prose-invert-counters: #9ca3af; - --tw-prose-invert-bullets: #4b5563; - --tw-prose-invert-hr: #374151; - --tw-prose-invert-quotes: #f3f4f6; - --tw-prose-invert-quote-borders: #374151; - --tw-prose-invert-captions: #9ca3af; - --tw-prose-invert-kbd: #fff; - --tw-prose-invert-kbd-shadows: 255 255 255; - --tw-prose-invert-code: #fff; - --tw-prose-invert-pre-code: #d1d5db; - --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); - --tw-prose-invert-th-borders: #4b5563; - --tw-prose-invert-td-borders: #374151; - font-size: 1rem; - line-height: 1.75; -} - -.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; -} - -.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.375em; -} - -.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.375em; -} - -.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; -} - -.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; -} - -.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; -} - -.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; -} - -.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; -} - -.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; -} - -.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; -} - -.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5em; - padding-inline-start: 1.625em; -} - -.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; -} - -.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; -} - -.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-top: 0.5714286em; - padding-inline-end: 0.5714286em; - padding-bottom: 0.5714286em; - padding-inline-start: 0.5714286em; -} - -.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; -} - -.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; -} - -.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 0; -} - -.form-input,.form-textarea,.form-select,.form-multiselect { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: #fff; - border-color: #6b7280; - border-width: 1px; - border-radius: 0px; - padding-top: 0.5rem; - padding-right: 0.75rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - font-size: 1rem; - line-height: 1.5rem; - --tw-shadow: 0 0 #0000; -} - -.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; - --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: #2563eb; -} - -.form-input::-moz-placeholder, .form-textarea::-moz-placeholder { - color: #6b7280; - opacity: 1; -} - -.form-input::placeholder,.form-textarea::placeholder { - color: #6b7280; - opacity: 1; -} - -.form-input::-webkit-datetime-edit-fields-wrapper { - padding: 0; -} - -.form-input::-webkit-date-and-time-value { - min-height: 1.5em; - text-align: inherit; -} - -.form-input::-webkit-datetime-edit { - display: inline-flex; -} - -.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field { - padding-top: 0; - padding-bottom: 0; -} - -.form-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-position: right 0.5rem center; - background-repeat: no-repeat; - background-size: 1.5em 1.5em; - padding-right: 2.5rem; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; -} - -.form-select:where([size]:not([size="1"])) { - background-image: initial; - background-position: initial; - background-repeat: unset; - background-size: initial; - padding-right: 0.75rem; - -webkit-print-color-adjust: unset; - print-color-adjust: unset; -} - -.aspect-h-9 { - --tw-aspect-h: 9; -} - -.aspect-w-16 { - position: relative; - padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%); - --tw-aspect-w: 16; -} - -.aspect-w-16 > * { - position: absolute; - height: 100%; - width: 100%; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -/* Button Styles */ - -.btn-primary { - display: inline-flex; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - align-items: center; - border-radius: 9999px; - border-width: 1px; - border-color: transparent; - background-image: linear-gradient(to right, var(--tw-gradient-stops)); - --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); - --tw-gradient-to: #e11d48 var(--tw-gradient-to-position); - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 0.625rem; - padding-bottom: 0.625rem; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 500; - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.btn-primary:hover { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - --tw-gradient-from: rgb(79 70 229 / 0.9) var(--tw-gradient-from-position); - --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); - --tw-gradient-to: rgb(225 29 72 / 0.9) var(--tw-gradient-to-position); -} - -.btn-primary:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --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, 0 0 #0000); - --tw-ring-color: rgb(79 70 229 / 0.5); - --tw-ring-offset-width: 2px; -} - -.btn-secondary { - display: inline-flex; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - align-items: center; - border-radius: 9999px; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 0.625rem; - padding-bottom: 0.625rem; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 500; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.btn-secondary:hover { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); -} - -.btn-secondary:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --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, 0 0 #0000); - --tw-ring-color: rgb(79 70 229 / 0.5); - --tw-ring-offset-width: 2px; -} - -.btn-secondary:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -.btn-secondary:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)); -} - -/* [Previous styles remain unchanged until mobile menu section...] */ - -/* Mobile Menu */ - -#mobileMenu { - max-height: 0px; - overflow: hidden; - opacity: 0; - transition-property: all; - transition-duration: 300ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -#mobileMenu.show { - max-height: 300px; - opacity: 1; -} - -#mobileMenu .space-y-4 { - padding-bottom: 1.5rem; -} - -.mobile-nav-link.primary { - background-image: linear-gradient(to right, var(--tw-gradient-stops)); - --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); - --tw-gradient-to: #e11d48 var(--tw-gradient-to-position); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.mobile-nav-link.primary:hover { - --tw-gradient-from: rgb(79 70 229 / 0.9) var(--tw-gradient-from-position); - --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); - --tw-gradient-to: rgb(225 29 72 / 0.9) var(--tw-gradient-to-position); -} - -.mobile-nav-link.primary i { - margin-right: 0.75rem; - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -/* Theme Toggle */ - -#theme-toggle+.theme-toggle-btn i::before { - content: "\f186"; - font-family: "Font Awesome 5 Free"; - font-weight: 900; -} - -#theme-toggle:checked+.theme-toggle-btn i::before { - content: "\f185"; - color: #facc15; -} - -/* Navigation Components */ - -.nav-link { - display: flex; - align-items: center; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.nav-link:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -/* Extra small screens (540px and below) */ - -@media (max-width: 540px) { - .nav-link { - padding-left: 0.5rem; - padding-right: 0.5rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-size: 0.875rem; - line-height: 1.25rem; + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; } - - .nav-link i { - margin-right: 0.25rem; - font-size: 1rem; - line-height: 1.5rem; + :-moz-focusring { + outline: auto; } - - .nav-link span { - font-size: 0.875rem; - line-height: 1.25rem; + progress { + vertical-align: baseline; } - - .site-logo { - padding-left: 0.25rem; - padding-right: 0.25rem; - font-size: 1.125rem; - line-height: 1.75rem; + summary { + display: list-item; } - - .nav-container { - padding-left: 0.5rem; - padding-right: 0.5rem; + ol, ul, menu { + list-style: none; } -} - -/* Small screens (541px to 767px) */ - -@media (min-width: 541px) and (max-width: 767px) { - .nav-link { - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; + img, svg, video, canvas, audio, iframe, embed, object { + display: block; + vertical-align: middle; } - - .nav-link i { - margin-right: 0.5rem; + img, video { + max-width: 100%; + height: auto; } - - .site-logo { - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 1.25rem; - line-height: 1.75rem; + button, input, select, optgroup, textarea, ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; } - - .nav-container { - padding-left: 1rem; - padding-right: 1rem; + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; } -} - -/* Medium screens and up */ - -@media (min-width: 768px) { - .nav-link { - border-radius: 0.5rem; - border-width: 1px; - border-color: transparent; - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 0.625rem; - padding-bottom: 0.625rem; - font-weight: 500; + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; } - - .nav-link:hover { - border-color: rgb(79 70 229 / 0.2); + ::file-selector-button { + margin-inline-end: 4px; } - - .nav-link:hover:is(.dark *) { - border-color: rgb(79 70 229 / 0.3); + ::placeholder { + opacity: 1; } - - .nav-link i { - margin-right: 0.75rem; - font-size: 1.125rem; - line-height: 1.75rem; + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } } - - .site-logo { - padding-left: 0.75rem; - padding-right: 0.75rem; - font-size: 1.5rem; - line-height: 2rem; + textarea { + resize: vertical; } - - .nav-container { - padding-left: 1.5rem; - padding-right: 1.5rem; + ::-webkit-search-decoration { + -webkit-appearance: none; } -} - -.nav-link:hover { - background-color: rgb(79 70 229 / 0.1); - --tw-text-opacity: 1; - color: rgb(79 70 229 / var(--tw-text-opacity)); -} - -.nav-link:hover:is(.dark *) { - background-color: rgb(79 70 229 / 0.2); - --tw-text-opacity: 1; - color: rgb(79 70 229 / var(--tw-text-opacity)); -} - -.nav-link i { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.nav-link i:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -.nav-link:hover i { - --tw-text-opacity: 1; - color: rgb(79 70 229 / var(--tw-text-opacity)); -} - -@media (min-width: 1024px) { - #mobileMenu { + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + :-moz-ui-invalid { + box-shadow: none; + } + button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { + appearance: button; + } + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden='until-found'])) { display: none !important; } } - -/* Menu Items */ - -.menu-item { - display: flex; - width: 100%; - align-items: center; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 0.875rem; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.menu-item:first-child { - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -.menu-item:last-child { - border-bottom-right-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; -} - -.menu-item:hover { - background-color: rgb(79 70 229 / 0.1); - --tw-text-opacity: 1; - color: rgb(79 70 229 / var(--tw-text-opacity)); -} - -.menu-item:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -.menu-item:hover:is(.dark *) { - background-color: rgb(79 70 229 / 0.2); - --tw-text-opacity: 1; - color: rgb(79 70 229 / var(--tw-text-opacity)); -} - -.menu-item i { - margin-right: 0.75rem; - font-size: 1rem; - line-height: 1.5rem; - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.menu-item i:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -/* Form Components */ - -.form-input { - width: 100%; - border-radius: 0.5rem; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - background-color: rgb(255 255 255 / 0.7); - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - --tw-backdrop-blur: blur(4px); - -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-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.form-input:focus { - --tw-border-opacity: 1; - border-color: rgb(79 70 229 / var(--tw-border-opacity)); - --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, 0 0 #0000); - --tw-ring-color: rgb(79 70 229 / 0.5); -} - -.form-input:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity)); - background-color: rgb(31 41 55 / 0.7); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.form-label { - margin-bottom: 0.375rem; - display: block; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 500; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.form-label:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -.form-error { - margin-top: 0.5rem; - font-size: 0.875rem; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); -} - -.form-error:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(248 113 113 / var(--tw-text-opacity)); -} - -/* Status Badges */ - -.status-badge { - display: inline-flex; - align-items: center; - border-radius: 9999px; - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 500; -} - -.status-operating { - --tw-bg-opacity: 1; - background-color: rgb(220 252 231 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(22 101 52 / var(--tw-text-opacity)); -} - -.status-operating:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(21 128 61 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(240 253 244 / var(--tw-text-opacity)); -} - -.status-closed { - --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity)); -} - -.status-closed:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(254 242 242 / var(--tw-text-opacity)); -} - -.status-construction { - --tw-bg-opacity: 1; - background-color: rgb(254 249 195 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(133 77 14 / var(--tw-text-opacity)); -} - -.status-construction:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(202 138 4 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(254 252 232 / var(--tw-text-opacity)); -} - -/* Auth Components */ - -.auth-card { - margin-left: auto; - margin-right: auto; - width: 100%; - max-width: 28rem; - border-radius: 1rem; - border-width: 1px; - border-color: rgb(229 231 235 / 0.5); - background-color: rgb(255 255 255 / 0.9); - padding: 2rem; - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - --tw-backdrop-blur: blur(4px); - -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); -} - -.auth-card:is(.dark *) { - border-color: rgb(55 65 81 / 0.5); - background-color: rgb(31 41 55 / 0.9); -} - -.auth-title { - margin-bottom: 2rem; - background-image: linear-gradient(to right, var(--tw-gradient-stops)); - --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); - --tw-gradient-to: #e11d48 var(--tw-gradient-to-position); - -webkit-background-clip: text; - background-clip: text; - text-align: center; - font-size: 1.5rem; - line-height: 2rem; - font-weight: 700; - color: transparent; -} - -.auth-divider { - position: relative; - margin-top: 1.5rem; - margin-bottom: 1.5rem; - text-align: center; -} - -.auth-divider::before, - .auth-divider::after { - position: absolute; - top: 50%; - width: 33.333333%; - border-top-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - --tw-content: ''; - content: var(--tw-content); -} - -.auth-divider:is(.dark *)::before, - .auth-divider:is(.dark *)::after { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity)); -} - -.auth-divider::before { - left: 0px; -} - -.auth-divider::after { - right: 0px; -} - -.auth-divider span { - background-color: rgb(255 255 255 / 0.9); - padding-left: 1rem; - padding-right: 1rem; - font-size: 0.875rem; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.auth-divider span:is(.dark *) { - background-color: rgb(31 41 55 / 0.9); - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -/* Social Login Buttons */ - -.btn-social { - margin-bottom: 0.75rem; - display: flex; - width: 100%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - align-items: center; - justify-content: center; - border-radius: 0.5rem; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 500; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.btn-social:hover { - --tw-scale-x: 1.02; - --tw-scale-y: 1.02; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); -} - -.btn-social:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --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, 0 0 #0000); - --tw-ring-color: rgb(79 70 229 / 0.5); - --tw-ring-offset-width: 2px; -} - -.btn-social:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -.btn-social:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)); -} - -.btn-discord { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); - --tw-shadow-color: rgb(229 231 235 / 0.5); - --tw-shadow: var(--tw-shadow-colored); -} - -.btn-discord:hover { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); -} - -.btn-discord:is(.dark *) { - --tw-shadow-color: rgb(17 24 39 / 0.5); - --tw-shadow: var(--tw-shadow-colored); -} - -.btn-google { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); - --tw-shadow-color: rgb(229 231 235 / 0.5); - --tw-shadow: var(--tw-shadow-colored); -} - -.btn-google:hover { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); -} - -.btn-google:is(.dark *) { - --tw-shadow-color: rgb(17 24 39 / 0.5); - --tw-shadow: var(--tw-shadow-colored); -} - -/* Alert Components */ - -.alert { - margin-bottom: 1rem; - border-radius: 0.75rem; - padding: 1rem; - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - --tw-backdrop-blur: blur(4px); - -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); -} - -.alert-error { - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(254 202 202 / var(--tw-border-opacity)); - background-color: rgb(254 226 226 / 0.9); - --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity)); -} - -.alert-error:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(185 28 28 / var(--tw-border-opacity)); - background-color: rgb(153 27 27 / 0.3); - --tw-text-opacity: 1; - color: rgb(254 226 226 / var(--tw-text-opacity)); -} - -/* Layout Components */ - -.card { - border-radius: 0.5rem; - border-width: 1px; - border-color: rgb(229 231 235 / 0.5); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - padding: 1.5rem; - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.card:is(.dark *) { - border-color: rgb(55 65 81 / 0.5); - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); -} - -/* Typography */ - -/* Turnstile Widget */ - -.turnstile { - margin-top: 1rem; - margin-bottom: 1rem; - display: flex; - align-items: center; - justify-content: center; -} - -.visible { - visibility: visible; -} - -.static { - position: static; -} - -.fixed { - position: fixed; -} - -.absolute { - position: absolute; -} - -.relative { - position: relative; -} - -.sticky { - position: sticky; -} - -.inset-0 { - inset: 0px; -} - -.bottom-0 { - bottom: 0px; -} - -.bottom-4 { - bottom: 1rem; -} - -.left-0 { - left: 0px; -} - -.right-0 { - right: 0px; -} - -.right-4 { - right: 1rem; -} - -.top-0 { - top: 0px; -} - -.top-4 { - top: 1rem; -} - -.z-20 { - z-index: 20; -} - -.z-40 { - z-index: 40; -} - -.z-50 { - z-index: 50; -} - -.z-\[60\] { - z-index: 60; -} - -.col-span-1 { - grid-column: span 1 / span 1; -} - -.col-span-12 { - grid-column: span 12 / span 12; -} - -.col-span-2 { - grid-column: span 2 / span 2; -} - -.col-span-3 { - grid-column: span 3 / span 3; -} - -.col-span-full { - grid-column: 1 / -1; -} - -.-mx-1\.5 { - margin-left: -0.375rem; - margin-right: -0.375rem; -} - -.-my-1\.5 { - margin-top: -0.375rem; - margin-bottom: -0.375rem; -} - -.mx-1 { - margin-left: 0.25rem; - margin-right: 0.25rem; -} - -.mx-2 { - margin-left: 0.5rem; - margin-right: 0.5rem; -} - -.mx-4 { - margin-left: 1rem; - margin-right: 1rem; -} - -.mx-8 { - margin-left: 2rem; - margin-right: 2rem; -} - -.mx-auto { - margin-left: auto; - margin-right: auto; -} - -.my-auto { - margin-top: auto; - margin-bottom: auto; -} - -.-mb-px { - margin-bottom: -1px; -} - -.mb-1 { - margin-bottom: 0.25rem; -} - -.mb-10 { - margin-bottom: 2.5rem; -} - -.mb-12 { - margin-bottom: 3rem; -} - -.mb-2 { - margin-bottom: 0.5rem; -} - -.mb-3 { - margin-bottom: 0.75rem; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.mb-6 { - margin-bottom: 1.5rem; -} - -.mb-8 { - margin-bottom: 2rem; -} - -.ml-0\.5 { - margin-left: 0.125rem; -} - -.ml-1 { - margin-left: 0.25rem; -} - -.ml-1\.5 { - margin-left: 0.375rem; -} - -.ml-2 { - margin-left: 0.5rem; -} - -.ml-3 { - margin-left: 0.75rem; -} - -.ml-6 { - margin-left: 1.5rem; -} - -.ml-auto { - margin-left: auto; -} - -.mr-1 { - margin-right: 0.25rem; -} - -.mr-1\.5 { - margin-right: 0.375rem; -} - -.mr-2 { - margin-right: 0.5rem; -} - -.mr-2\.5 { - margin-right: 0.625rem; +@layer utilities { + .pointer-events-none { + pointer-events: none; + } + .collapse { + visibility: collapse; + } + .invisible { + visibility: hidden; + } + .visible { + visibility: visible; + } + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + .absolute { + position: absolute; + } + .fixed { + position: fixed; + } + .fixed\! { + position: fixed !important; + } + .relative { + position: relative; + } + .static { + position: static; + } + .sticky { + position: sticky; + } + .inset-0 { + inset: calc(var(--spacing) * 0); + } + .inset-y-0 { + inset-block: calc(var(--spacing) * 0); + } + .top-0 { + top: calc(var(--spacing) * 0); + } + .top-1\/2 { + top: calc(1/2 * 100%); + } + .top-3 { + top: calc(var(--spacing) * 3); + } + .top-4 { + top: calc(var(--spacing) * 4); + } + .right-0 { + right: calc(var(--spacing) * 0); + } + .right-3 { + right: calc(var(--spacing) * 3); + } + .right-4 { + right: calc(var(--spacing) * 4); + } + .bottom-0 { + bottom: calc(var(--spacing) * 0); + } + .bottom-4 { + bottom: calc(var(--spacing) * 4); + } + .left-0 { + left: calc(var(--spacing) * 0); + } + .left-3 { + left: calc(var(--spacing) * 3); + } + .left-4 { + left: calc(var(--spacing) * 4); + } + .z-0 { + z-index: 0; + } + .z-10 { + z-index: 10; + } + .z-20 { + z-index: 20; + } + .z-40 { + z-index: 40; + } + .z-50 { + z-index: 50; + } + .z-\[60\] { + z-index: 60; + } + .col-span-1 { + grid-column: span 1 / span 1; + } + .col-span-2 { + grid-column: span 2 / span 2; + } + .col-span-3 { + grid-column: span 3 / span 3; + } + .col-span-4 { + grid-column: span 4 / span 4; + } + .col-span-8 { + grid-column: span 8 / span 8; + } + .col-span-12 { + grid-column: span 12 / span 12; + } + .col-span-full { + grid-column: 1 / -1; + } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; + } + } + .-mx-1\.5 { + margin-inline: calc(var(--spacing) * -1.5); + } + .mx-1 { + margin-inline: calc(var(--spacing) * 1); + } + .mx-2 { + margin-inline: calc(var(--spacing) * 2); + } + .mx-4 { + margin-inline: calc(var(--spacing) * 4); + } + .mx-8 { + margin-inline: calc(var(--spacing) * 8); + } + .mx-auto { + margin-inline: auto; + } + .-my-1\.5 { + margin-block: calc(var(--spacing) * -1.5); + } + .my-auto { + margin-block: auto; + } + .mt-1 { + margin-top: calc(var(--spacing) * 1); + } + .mt-1\.5 { + margin-top: calc(var(--spacing) * 1.5); + } + .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-6 { + margin-top: calc(var(--spacing) * 6); + } + .mt-8 { + margin-top: calc(var(--spacing) * 8); + } + .mt-auto { + margin-top: auto; + } + .mr-1 { + margin-right: calc(var(--spacing) * 1); + } + .mr-1\.5 { + margin-right: calc(var(--spacing) * 1.5); + } + .mr-2 { + margin-right: calc(var(--spacing) * 2); + } + .mr-2\.5 { + margin-right: calc(var(--spacing) * 2.5); + } + .mr-3 { + margin-right: calc(var(--spacing) * 3); + } + .mr-4 { + margin-right: calc(var(--spacing) * 4); + } + .-mb-px { + margin-bottom: -1px; + } + .mb-1 { + margin-bottom: calc(var(--spacing) * 1); + } + .mb-2 { + margin-bottom: calc(var(--spacing) * 2); + } + .mb-3 { + margin-bottom: calc(var(--spacing) * 3); + } + .mb-4 { + margin-bottom: calc(var(--spacing) * 4); + } + .mb-6 { + margin-bottom: calc(var(--spacing) * 6); + } + .mb-8 { + margin-bottom: calc(var(--spacing) * 8); + } + .mb-10 { + margin-bottom: calc(var(--spacing) * 10); + } + .mb-12 { + margin-bottom: calc(var(--spacing) * 12); + } + .-ml-0\.5 { + margin-left: calc(var(--spacing) * -0.5); + } + .-ml-1 { + margin-left: calc(var(--spacing) * -1); + } + .ml-1 { + margin-left: calc(var(--spacing) * 1); + } + .ml-1\.5 { + margin-left: calc(var(--spacing) * 1.5); + } + .ml-2 { + margin-left: calc(var(--spacing) * 2); + } + .ml-3 { + margin-left: calc(var(--spacing) * 3); + } + .ml-4 { + margin-left: calc(var(--spacing) * 4); + } + .ml-6 { + margin-left: calc(var(--spacing) * 6); + } + .ml-auto { + margin-left: auto; + } + .line-clamp-2 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + .\!hidden { + display: none !important; + } + .block { + display: block; + } + .contents { + display: contents; + } + .flex { + display: flex; + } + .grid { + display: grid; + } + .hidden { + display: none; + } + .inline { + display: inline; + } + .inline-block { + display: inline-block; + } + .inline-flex { + display: inline-flex; + } + .table { + display: table; + } + .table-caption { + display: table-caption; + } + .table-cell { + display: table-cell; + } + .h-2 { + height: calc(var(--spacing) * 2); + } + .h-2\.5 { + height: calc(var(--spacing) * 2.5); + } + .h-3 { + height: calc(var(--spacing) * 3); + } + .h-4 { + height: calc(var(--spacing) * 4); + } + .h-5 { + height: calc(var(--spacing) * 5); + } + .h-6 { + height: calc(var(--spacing) * 6); + } + .h-8 { + height: calc(var(--spacing) * 8); + } + .h-10 { + height: calc(var(--spacing) * 10); + } + .h-12 { + height: calc(var(--spacing) * 12); + } + .h-16 { + height: calc(var(--spacing) * 16); + } + .h-24 { + height: calc(var(--spacing) * 24); + } + .h-32 { + height: calc(var(--spacing) * 32); + } + .h-48 { + height: calc(var(--spacing) * 48); + } + .h-64 { + height: calc(var(--spacing) * 64); + } + .h-96 { + height: calc(var(--spacing) * 96); + } + .h-\[300px\] { + height: 300px; + } + .h-auto { + height: auto; + } + .h-full { + height: 100%; + } + .max-h-60 { + max-height: calc(var(--spacing) * 60); + } + .max-h-96 { + max-height: calc(var(--spacing) * 96); + } + .max-h-\[90vh\] { + max-height: 90vh; + } + .min-h-20 { + min-height: calc(var(--spacing) * 20); + } + .min-h-\[100px\] { + min-height: 100px; + } + .min-h-\[120px\] { + min-height: 120px; + } + .min-h-screen { + min-height: 100vh; + } + .w-2 { + width: calc(var(--spacing) * 2); + } + .w-3 { + width: calc(var(--spacing) * 3); + } + .w-4 { + width: calc(var(--spacing) * 4); + } + .w-5 { + width: calc(var(--spacing) * 5); + } + .w-6 { + width: calc(var(--spacing) * 6); + } + .w-8 { + width: calc(var(--spacing) * 8); + } + .w-10 { + width: calc(var(--spacing) * 10); + } + .w-12 { + width: calc(var(--spacing) * 12); + } + .w-16 { + width: calc(var(--spacing) * 16); + } + .w-24 { + width: calc(var(--spacing) * 24); + } + .w-32 { + width: calc(var(--spacing) * 32); + } + .w-64 { + width: calc(var(--spacing) * 64); + } + .w-auto { + width: auto; + } + .w-fit { + width: fit-content; + } + .w-full { + width: 100%; + } + .max-w-2xl { + max-width: var(--container-2xl); + } + .max-w-3xl { + max-width: var(--container-3xl); + } + .max-w-4xl { + max-width: var(--container-4xl); + } + .max-w-6xl { + max-width: var(--container-6xl); + } + .max-w-7xl { + max-width: var(--container-7xl); + } + .max-w-\[800px\] { + max-width: 800px; + } + .max-w-lg { + max-width: var(--container-lg); + } + .max-w-md { + max-width: var(--container-md); + } + .max-w-none { + max-width: none; + } + .max-w-xs { + max-width: var(--container-xs); + } + .min-w-0 { + min-width: calc(var(--spacing) * 0); + } + .min-w-16 { + min-width: calc(var(--spacing) * 16); + } + .min-w-\[200px\] { + min-width: 200px; + } + .flex-1 { + flex: 1; + } + .flex-shrink { + flex-shrink: 1; + } + .flex-shrink-0 { + flex-shrink: 0; + } + .shrink-0 { + flex-shrink: 0; + } + .flex-grow { + flex-grow: 1; + } + .grow { + flex-grow: 1; + } + .-translate-y-1\/2 { + --tw-translate-y: calc(calc(1/2 * 100%) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .-translate-y-2 { + --tw-translate-y: calc(var(--spacing) * -2); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .-translate-y-full { + --tw-translate-y: -100%; + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-y-0 { + --tw-translate-y: calc(var(--spacing) * 0); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-y-full { + --tw-translate-y: 100%; + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .scale-95 { + --tw-scale-x: 95%; + --tw-scale-y: 95%; + --tw-scale-z: 95%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + .scale-100 { + --tw-scale-x: 100%; + --tw-scale-y: 100%; + --tw-scale-z: 100%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + .rotate-180 { + rotate: 180deg; + } + .transform { + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + } + .animate-pulse { + animation: var(--animate-pulse); + } + .animate-spin { + animation: var(--animate-spin); + } + .cursor-grab { + cursor: grab; + } + .cursor-not-allowed { + cursor: not-allowed; + } + .cursor-pointer { + cursor: pointer; + } + .resize { + resize: both; + } + .resize-none { + resize: none; + } + .grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + .flex-col { + flex-direction: column; + } + .flex-wrap { + flex-wrap: wrap; + } + .items-center { + align-items: center; + } + .items-end { + align-items: flex-end; + } + .items-start { + align-items: flex-start; + } + .justify-between { + justify-content: space-between; + } + .justify-center { + justify-content: center; + } + .justify-end { + justify-content: flex-end; + } + .gap-1 { + gap: calc(var(--spacing) * 1); + } + .gap-2 { + gap: calc(var(--spacing) * 2); + } + .gap-3 { + gap: calc(var(--spacing) * 3); + } + .gap-4 { + gap: calc(var(--spacing) * 4); + } + .gap-6 { + gap: calc(var(--spacing) * 6); + } + .gap-8 { + gap: calc(var(--spacing) * 8); + } + .space-y-1 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-2 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-3 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-4 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-6 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); + } + } + .-space-x-px { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(-1px * var(--tw-space-x-reverse)); + margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-1 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-2 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-3 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-4 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); + } + } + .divide-y { + :where(& > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(1px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + } + } + .divide-gray-200 { + :where(& > :not(:last-child)) { + border-color: var(--color-gray-200); + } + } + .truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .overflow-auto { + overflow: auto; + } + .overflow-hidden { + overflow: hidden; + } + .overflow-y-auto { + overflow-y: auto; + } + .rounded { + border-radius: 0.25rem; + } + .rounded-2xl { + border-radius: var(--radius-2xl); + } + .rounded-full { + border-radius: calc(infinity * 1px); + } + .rounded-lg { + border-radius: var(--radius-lg); + } + .rounded-md { + border-radius: var(--radius-md); + } + .rounded-t-lg { + border-top-left-radius: var(--radius-lg); + border-top-right-radius: var(--radius-lg); + } + .rounded-l-lg { + border-top-left-radius: var(--radius-lg); + border-bottom-left-radius: var(--radius-lg); + } + .rounded-l-md { + border-top-left-radius: var(--radius-md); + border-bottom-left-radius: var(--radius-md); + } + .rounded-r-lg { + border-top-right-radius: var(--radius-lg); + border-bottom-right-radius: var(--radius-lg); + } + .rounded-r-md { + border-top-right-radius: var(--radius-md); + border-bottom-right-radius: var(--radius-md); + } + .rounded-b-lg { + border-bottom-right-radius: var(--radius-lg); + border-bottom-left-radius: var(--radius-lg); + } + .border { + border-style: var(--tw-border-style); + border-width: 1px; + } + .border-2 { + border-style: var(--tw-border-style); + border-width: 2px; + } + .border-4 { + border-style: var(--tw-border-style); + border-width: 4px; + } + .border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + } + .border-b { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1px; + } + .border-b-2 { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 2px; + } + .border-dashed { + --tw-border-style: dashed; + border-style: dashed; + } + .border-blue-100 { + border-color: var(--color-blue-100); + } + .border-blue-200 { + border-color: var(--color-blue-200); + } + .border-blue-200\/50 { + border-color: color-mix(in srgb, oklch(88.2% 0.059 254.128) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-blue-200) 50%, transparent); + } + } + .border-blue-300 { + border-color: var(--color-blue-300); + } + .border-blue-400 { + border-color: var(--color-blue-400); + } + .border-blue-500 { + border-color: var(--color-blue-500); + } + .border-blue-600 { + border-color: var(--color-blue-600); + } + .border-gray-100 { + border-color: var(--color-gray-100); + } + .border-gray-200 { + border-color: var(--color-gray-200); + } + .border-gray-200\/50 { + border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent); + } + } + .border-gray-300 { + border-color: var(--color-gray-300); + } + .border-gray-700 { + border-color: var(--color-gray-700); + } + .border-green-500 { + border-color: var(--color-green-500); + } + .border-green-600 { + border-color: var(--color-green-600); + } + .border-primary { + border-color: var(--color-primary); + } + .border-purple-600 { + border-color: var(--color-purple-600); + } + .border-red-400 { + border-color: var(--color-red-400); + } + .border-red-500 { + border-color: var(--color-red-500); + } + .border-red-600 { + border-color: var(--color-red-600); + } + .border-transparent { + border-color: transparent; + } + .border-t-transparent { + border-top-color: transparent; + } + .bg-black\/50 { + background-color: color-mix(in srgb, #000 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-black) 50%, transparent); + } + } + .bg-black\/90 { + background-color: color-mix(in srgb, #000 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-black) 90%, transparent); + } + } + .bg-blue-50 { + background-color: var(--color-blue-50); + } + .bg-blue-100 { + background-color: var(--color-blue-100); + } + .bg-blue-500 { + background-color: var(--color-blue-500); + } + .bg-blue-500\/50 { + background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent); + } + } + .bg-blue-500\/75 { + background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 75%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-500) 75%, transparent); + } + } + .bg-blue-600 { + background-color: var(--color-blue-600); + } + .bg-blue-900\/40 { + background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 40%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-900) 40%, transparent); + } + } + .bg-gray-50 { + background-color: var(--color-gray-50); + } + .bg-gray-100 { + background-color: var(--color-gray-100); + } + .bg-gray-200 { + background-color: var(--color-gray-200); + } + .bg-gray-500 { + background-color: var(--color-gray-500); + } + .bg-gray-800 { + background-color: var(--color-gray-800); + } + .bg-gray-900 { + background-color: var(--color-gray-900); + } + .bg-green-100 { + background-color: var(--color-green-100); + } + .bg-green-500 { + background-color: var(--color-green-500); + } + .bg-green-600 { + background-color: var(--color-green-600); + } + .bg-green-900\/40 { + background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 40%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-green-900) 40%, transparent); + } + } + .bg-purple-100 { + background-color: var(--color-purple-100); + } + .bg-purple-500 { + background-color: var(--color-purple-500); + } + .bg-red-50 { + background-color: var(--color-red-50); + } + .bg-red-100 { + background-color: var(--color-red-100); + } + .bg-red-500 { + background-color: var(--color-red-500); + } + .bg-red-600 { + background-color: var(--color-red-600); + } + .bg-red-900\/40 { + background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 40%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-red-900) 40%, transparent); + } + } + .bg-white { + background-color: var(--color-white); + } + .bg-white\/10 { + background-color: color-mix(in srgb, #fff 10%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 10%, transparent); + } + } + .bg-white\/80 { + background-color: color-mix(in srgb, #fff 80%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 80%, transparent); + } + } + .bg-white\/90 { + background-color: color-mix(in srgb, #fff 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 90%, transparent); + } + } + .bg-yellow-100 { + background-color: var(--color-yellow-100); + } + .bg-yellow-500 { + background-color: var(--color-yellow-500); + } + .bg-yellow-600 { + background-color: var(--color-yellow-600); + } + .bg-yellow-900\/40 { + background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 40%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-yellow-900) 40%, transparent); + } + } + .bg-gradient-to-br { + --tw-gradient-position: to bottom right in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + } + .bg-gradient-to-r { + --tw-gradient-position: to right in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + } + .bg-gradient-to-t { + --tw-gradient-position: to top in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + } + .from-black\/70 { + --tw-gradient-from: color-mix(in srgb, #000 70%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, 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-blue-50 { + --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-primary { + --tw-gradient-from: var(--color-primary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .from-white { + --tw-gradient-from: var(--color-white); + --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)); + } + .via-blue-50 { + --tw-gradient-via: var(--color-blue-50); + --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); + } + .to-indigo-50 { + --tw-gradient-to: var(--color-indigo-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-secondary { + --tw-gradient-to: var(--color-secondary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .to-transparent { + --tw-gradient-to: 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)); + } + .bg-clip-text { + background-clip: text; + } + .object-contain { + object-fit: contain; + } + .object-cover { + object-fit: cover; + } + .p-1 { + padding: calc(var(--spacing) * 1); + } + .p-1\.5 { + padding: calc(var(--spacing) * 1.5); + } + .p-2 { + padding: calc(var(--spacing) * 2); + } + .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); + } + .p-8 { + padding: calc(var(--spacing) * 8); + } + .px-2 { + padding-inline: calc(var(--spacing) * 2); + } + .px-2\.5 { + padding-inline: calc(var(--spacing) * 2.5); + } + .px-3 { + padding-inline: calc(var(--spacing) * 3); + } + .px-4 { + padding-inline: calc(var(--spacing) * 4); + } + .px-6 { + padding-inline: calc(var(--spacing) * 6); + } + .px-8 { + padding-inline: calc(var(--spacing) * 8); + } + .py-0\.5 { + padding-block: calc(var(--spacing) * 0.5); + } + .py-1 { + padding-block: calc(var(--spacing) * 1); + } + .py-2 { + padding-block: calc(var(--spacing) * 2); + } + .py-2\.5 { + padding-block: calc(var(--spacing) * 2.5); + } + .py-3 { + padding-block: calc(var(--spacing) * 3); + } + .py-4 { + padding-block: calc(var(--spacing) * 4); + } + .py-5 { + padding-block: calc(var(--spacing) * 5); + } + .py-6 { + padding-block: calc(var(--spacing) * 6); + } + .py-8 { + padding-block: calc(var(--spacing) * 8); + } + .py-12 { + padding-block: calc(var(--spacing) * 12); + } + .py-16 { + padding-block: calc(var(--spacing) * 16); + } + .pt-2 { + padding-top: calc(var(--spacing) * 2); + } + .pt-4 { + padding-top: calc(var(--spacing) * 4); + } + .pr-3 { + padding-right: calc(var(--spacing) * 3); + } + .pr-4 { + padding-right: calc(var(--spacing) * 4); + } + .pb-4 { + padding-bottom: calc(var(--spacing) * 4); + } + .pl-3 { + padding-left: calc(var(--spacing) * 3); + } + .pl-10 { + padding-left: calc(var(--spacing) * 10); + } + .text-center { + text-align: center; + } + .text-left { + text-align: left; + } + .text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + .text-3xl { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + } + .text-4xl { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + } + .text-5xl { + font-size: var(--text-5xl); + line-height: var(--tw-leading, var(--text-5xl--line-height)); + } + .text-6xl { + font-size: var(--text-6xl); + line-height: var(--tw-leading, var(--text-6xl--line-height)); + } + .text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + .text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } + .leading-4 { + --tw-leading: calc(var(--spacing) * 4); + line-height: calc(var(--spacing) * 4); + } + .leading-5 { + --tw-leading: calc(var(--spacing) * 5); + line-height: calc(var(--spacing) * 5); + } + .leading-6 { + --tw-leading: calc(var(--spacing) * 6); + line-height: calc(var(--spacing) * 6); + } + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } + .font-medium { + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + } + .font-normal { + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + } + .font-semibold { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } + .text-blue-400 { + color: var(--color-blue-400); + } + .text-blue-500 { + color: var(--color-blue-500); + } + .text-blue-600 { + color: var(--color-blue-600); + } + .text-blue-700 { + color: var(--color-blue-700); + } + .text-blue-800 { + color: var(--color-blue-800); + } + .text-blue-900 { + color: var(--color-blue-900); + } + .text-gray-200 { + color: var(--color-gray-200); + } + .text-gray-300 { + color: var(--color-gray-300); + } + .text-gray-400 { + color: var(--color-gray-400); + } + .text-gray-500 { + color: var(--color-gray-500); + } + .text-gray-600 { + color: var(--color-gray-600); + } + .text-gray-700 { + color: var(--color-gray-700); + } + .text-gray-700\/75 { + color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 75%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-gray-700) 75%, transparent); + } + } + .text-gray-800 { + color: var(--color-gray-800); + } + .text-gray-900 { + color: var(--color-gray-900); + } + .text-green-400 { + color: var(--color-green-400); + } + .text-green-600 { + color: var(--color-green-600); + } + .text-green-700 { + color: var(--color-green-700); + } + .text-green-800 { + color: var(--color-green-800); + } + .text-primary { + color: var(--color-primary); + } + .text-purple-600 { + color: var(--color-purple-600); + } + .text-purple-800 { + color: var(--color-purple-800); + } + .text-red-100 { + color: var(--color-red-100); + } + .text-red-400 { + color: var(--color-red-400); + } + .text-red-500 { + color: var(--color-red-500); + } + .text-red-600 { + color: var(--color-red-600); + } + .text-red-700 { + color: var(--color-red-700); + } + .text-red-800 { + color: var(--color-red-800); + } + .text-sky-900 { + color: var(--color-sky-900); + } + .text-transparent { + color: transparent; + } + .text-white { + color: var(--color-white); + } + .text-yellow-400 { + color: var(--color-yellow-400); + } + .text-yellow-500 { + color: var(--color-yellow-500); + } + .text-yellow-600 { + color: var(--color-yellow-600); + } + .text-yellow-700 { + color: var(--color-yellow-700); + } + .text-yellow-800 { + color: var(--color-yellow-800); + } + .lowercase { + text-transform: lowercase; + } + .uppercase { + text-transform: uppercase; + } + .placeholder-gray-500 { + &::placeholder { + color: var(--color-gray-500); + } + } + .opacity-0 { + opacity: 0%; + } + .opacity-25 { + opacity: 25%; + } + .opacity-50 { + opacity: 50%; + } + .opacity-75 { + opacity: 75%; + } + .opacity-100 { + opacity: 100%; + } + .shadow { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-lg { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-md { + --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-sm { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-xl { + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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-xs { + --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); + } + .ring { + --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); + } + .ring-3 { + --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); + } + .ring-blue-500 { + --tw-ring-color: var(--color-blue-500); + } + .ring-primary\/20 { + --tw-ring-color: color-mix(in srgb, #4f46e5 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent); + } + } + .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); + } + .ring-offset-white { + --tw-ring-offset-color: var(--color-white); + } + .\!outline-hidden { + --tw-outline-style: none !important; + outline-style: none !important; + @media (forced-colors: active) { + outline: 2px solid transparent !important; + outline-offset: 2px !important; + } + } + .outline-hidden { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } + .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,); + } + .invert { + --tw-invert: invert(100%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .\!filter { + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important; + } + .filter { + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .backdrop-blur-lg { + --tw-backdrop-blur: blur(var(--blur-lg)); + -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-blur-sm { + --tw-backdrop-blur: blur(var(--blur-sm)); + -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-blur-xs { + --tw-backdrop-blur: blur(var(--blur-xs)); + -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, visibility, content-visibility, overlay, pointer-events; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-all { + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-colors { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-opacity { + transition-property: opacity; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-shadow { + transition-property: box-shadow; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-transform { + transition-property: transform, translate, scale, rotate; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-normal { + transition-behavior: normal; + } + .duration-75 { + --tw-duration: 75ms; + transition-duration: 75ms; + } + .duration-100 { + --tw-duration: 100ms; + transition-duration: 100ms; + } + .duration-150 { + --tw-duration: 150ms; + transition-duration: 150ms; + } + .duration-200 { + --tw-duration: 200ms; + transition-duration: 200ms; + } + .duration-300 { + --tw-duration: 300ms; + transition-duration: 300ms; + } + .ease-in { + --tw-ease: var(--ease-in); + transition-timing-function: var(--ease-in); + } + .ease-in-out { + --tw-ease: var(--ease-in-out); + transition-timing-function: var(--ease-in-out); + } + .ease-out { + --tw-ease: var(--ease-out); + transition-timing-function: var(--ease-out); + } + .\!outline-none { + --tw-outline-style: none !important; + outline-style: none !important; + } + .outline-none { + --tw-outline-style: none; + outline-style: none; + } + .\[coverage\:report\] { + coverage: report; + } + .\[coverage\:run\] { + coverage: run; + } + .group-hover\:scale-105 { + &:is(:where(.group):hover *) { + @media (hover: hover) { + --tw-scale-x: 105%; + --tw-scale-y: 105%; + --tw-scale-z: 105%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + } + .group-hover\:opacity-100 { + &:is(:where(.group):hover *) { + @media (hover: hover) { + opacity: 100%; + } + } + } + .last\:mb-0 { + &:last-child { + margin-bottom: calc(var(--spacing) * 0); + } + } + .hover\:-translate-y-1 { + &:hover { + @media (hover: hover) { + --tw-translate-y: calc(var(--spacing) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + } + } + .hover\:scale-105 { + &:hover { + @media (hover: hover) { + --tw-scale-x: 105%; + --tw-scale-y: 105%; + --tw-scale-z: 105%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + } + .hover\:scale-\[1\.02\] { + &:hover { + @media (hover: hover) { + scale: 1.02; + } + } + } + .hover\:border-gray-300 { + &:hover { + @media (hover: hover) { + border-color: var(--color-gray-300); + } + } + } + .hover\:border-primary\/20 { + &:hover { + @media (hover: hover) { + border-color: color-mix(in srgb, #4f46e5 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-primary) 20%, transparent); + } + } + } + } + .hover\:bg-blue-50 { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-50); + } + } + } + .hover\:bg-blue-100 { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-100); + } + } + } + .hover\:bg-blue-200 { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-200); + } + } + } + .hover\:bg-blue-500 { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-500); + } + } + } + .hover\:bg-blue-700 { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-700); + } + } + } + .hover\:bg-gray-50 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-50); + } + } + } + .hover\:bg-gray-100 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-100); + } + } + } + .hover\:bg-gray-200 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-200); + } + } + } + .hover\:bg-gray-300 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-300); + } + } + } + .hover\:bg-green-50 { + &:hover { + @media (hover: hover) { + background-color: var(--color-green-50); + } + } + } + .hover\:bg-green-500 { + &:hover { + @media (hover: hover) { + background-color: var(--color-green-500); + } + } + } + .hover\:bg-green-700 { + &:hover { + @media (hover: hover) { + background-color: var(--color-green-700); + } + } + } + .hover\:bg-primary\/10 { + &:hover { + @media (hover: hover) { + background-color: color-mix(in srgb, #4f46e5 10%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); + } + } + } + } + .hover\:bg-purple-50 { + &:hover { + @media (hover: hover) { + background-color: var(--color-purple-50); + } + } + } + .hover\:bg-red-50 { + &:hover { + @media (hover: hover) { + background-color: var(--color-red-50); + } + } + } + .hover\:bg-red-500 { + &:hover { + @media (hover: hover) { + background-color: var(--color-red-500); + } + } + } + .hover\:bg-red-700 { + &:hover { + @media (hover: hover) { + background-color: var(--color-red-700); + } + } + } + .hover\:bg-white\/20 { + &:hover { + @media (hover: hover) { + background-color: color-mix(in srgb, #fff 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 20%, transparent); + } + } + } + } + .hover\:bg-yellow-500 { + &:hover { + @media (hover: hover) { + background-color: var(--color-yellow-500); + } + } + } + .hover\:bg-yellow-600 { + &:hover { + @media (hover: hover) { + background-color: var(--color-yellow-600); + } + } + } + .hover\:from-primary\/90 { + &:hover { + @media (hover: hover) { + --tw-gradient-from: color-mix(in srgb, #4f46e5 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-from: color-mix(in oklab, var(--color-primary) 90%, 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)); + } + } + } + .hover\:to-secondary\/90 { + &:hover { + @media (hover: hover) { + --tw-gradient-to: color-mix(in srgb, #e11d48 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-to: color-mix(in oklab, var(--color-secondary) 90%, 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)); + } + } + } + .hover\:text-blue-500 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-500); + } + } + } + .hover\:text-blue-600 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-600); + } + } + } + .hover\:text-blue-700 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-700); + } + } + } + .hover\:text-blue-800 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-800); + } + } + } + .hover\:text-blue-900 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-900); + } + } + } + .hover\:text-gray-300 { + &:hover { + @media (hover: hover) { + color: var(--color-gray-300); + } + } + } + .hover\:text-gray-600 { + &:hover { + @media (hover: hover) { + color: var(--color-gray-600); + } + } + } + .hover\:text-gray-700 { + &:hover { + @media (hover: hover) { + color: var(--color-gray-700); + } + } + } + .hover\:text-gray-900 { + &:hover { + @media (hover: hover) { + color: var(--color-gray-900); + } + } + } + .hover\:text-primary { + &:hover { + @media (hover: hover) { + color: var(--color-primary); + } + } + } + .hover\:text-primary\/80 { + &:hover { + @media (hover: hover) { + color: color-mix(in srgb, #4f46e5 80%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-primary) 80%, transparent); + } + } + } + } + .hover\:text-red-700 { + &:hover { + @media (hover: hover) { + color: var(--color-red-700); + } + } + } + .hover\:text-sky-800 { + &:hover { + @media (hover: hover) { + color: var(--color-sky-800); + } + } + } + .hover\:underline { + &:hover { + @media (hover: hover) { + text-decoration-line: underline; + } + } + } + .hover\:shadow-lg { + &: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); + } + } + } + .hover\:shadow-md { + &:hover { + @media (hover: hover) { + --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); + } + } + } + .hover\:shadow-xl { + &:hover { + @media (hover: hover) { + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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); + } + } + } + .hover\:ring-2 { + &:hover { + @media (hover: hover) { + --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\:border-blue-500 { + &:focus { + border-color: var(--color-blue-500); + } + } + .focus\:bg-gray-100 { + &:focus { + background-color: var(--color-gray-100); + } + } + .focus\:underline { + &:focus { + text-decoration-line: underline; + } + } + .focus\:placeholder-gray-400 { + &:focus { + &::placeholder { + color: var(--color-gray-400); + } + } + } + .focus\:ring-1 { + &:focus { + --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); + } + } + .focus\:ring-2 { + &: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\:ring-3 { + &:focus { + --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); + } + } + .focus\:ring-blue-500 { + &:focus { + --tw-ring-color: var(--color-blue-500); + } + } + .focus\:ring-primary\/50 { + &:focus { + --tw-ring-color: color-mix(in srgb, #4f46e5 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent); + } + } + } + .focus\:ring-offset-2 { + &:focus { + --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); + } + } + .focus\:outline-hidden { + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + } + .focus\:outline-none { + &:focus { + --tw-outline-style: none; + outline-style: none; + } + } + .focus-visible\:ring-2 { + &:focus-visible { + --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-visible\:ring-primary\/50 { + &:focus-visible { + --tw-ring-color: color-mix(in srgb, #4f46e5 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent); + } + } + } + .active\:transform { + &:active { + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + } + } + .disabled\:cursor-not-allowed { + &:disabled { + cursor: not-allowed; + } + } + .disabled\:opacity-50 { + &:disabled { + opacity: 50%; + } + } + .sm\:col-span-3 { + @media (width >= 40rem) { + grid-column: span 3 / span 3; + } + } + .sm\:col-span-4 { + @media (width >= 40rem) { + grid-column: span 4 / span 4; + } + } + .sm\:col-span-9 { + @media (width >= 40rem) { + grid-column: span 9 / span 9; + } + } + .sm\:mb-16 { + @media (width >= 40rem) { + margin-bottom: calc(var(--spacing) * 16); + } + } + .sm\:block { + @media (width >= 40rem) { + display: block; + } + } + .sm\:flex { + @media (width >= 40rem) { + display: flex; + } + } + .sm\:hidden { + @media (width >= 40rem) { + display: none; + } + } + .sm\:flex-1 { + @media (width >= 40rem) { + flex: 1; + } + } + .sm\:grid-cols-2 { + @media (width >= 40rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + .sm\:grid-cols-12 { + @media (width >= 40rem) { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + } + .sm\:items-center { + @media (width >= 40rem) { + align-items: center; + } + } + .sm\:justify-between { + @media (width >= 40rem) { + justify-content: space-between; + } + } + .sm\:justify-end { + @media (width >= 40rem) { + justify-content: flex-end; + } + } + .sm\:space-x-4 { + @media (width >= 40rem) { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); + } + } + } + .sm\:space-x-6 { + @media (width >= 40rem) { + :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))); + } + } + } + .sm\:rounded-lg { + @media (width >= 40rem) { + border-radius: var(--radius-lg); + } + } + .sm\:p-6 { + @media (width >= 40rem) { + padding: calc(var(--spacing) * 6); + } + } + .sm\:px-6 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 6); + } + } + .md\:col-span-1 { + @media (width >= 48rem) { + grid-column: span 1 / span 1; + } + } + .md\:col-span-2 { + @media (width >= 48rem) { + grid-column: span 2 / span 2; + } + } + .md\:col-span-3 { + @media (width >= 48rem) { + grid-column: span 3 / span 3; + } + } + .md\:mb-8 { + @media (width >= 48rem) { + margin-bottom: calc(var(--spacing) * 8); + } + } + .md\:block { + @media (width >= 48rem) { + display: block; + } + } + .md\:flex { + @media (width >= 48rem) { + display: flex; + } + } + .md\:grid { + @media (width >= 48rem) { + display: grid; + } + } + .md\:hidden { + @media (width >= 48rem) { + display: none; + } + } + .md\:h-\[140px\] { + @media (width >= 48rem) { + height: 140px; + } + } + .md\:w-48 { + @media (width >= 48rem) { + width: calc(var(--spacing) * 48); + } + } + .md\:grid-cols-2 { + @media (width >= 48rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + .md\:grid-cols-3 { + @media (width >= 48rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + .md\:grid-cols-4 { + @media (width >= 48rem) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + } + .md\:flex-row { + @media (width >= 48rem) { + flex-direction: row; + } + } + .md\:items-center { + @media (width >= 48rem) { + align-items: center; + } + } + .md\:space-x-3 { + @media (width >= 48rem) { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); + } + } + } + .md\:py-12 { + @media (width >= 48rem) { + padding-block: calc(var(--spacing) * 12); + } + } + .md\:text-2xl { + @media (width >= 48rem) { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + } + .md\:text-5xl { + @media (width >= 48rem) { + font-size: var(--text-5xl); + line-height: var(--tw-leading, var(--text-5xl--line-height)); + } + } + .lg\:col-span-1 { + @media (width >= 64rem) { + grid-column: span 1 / span 1; + } + } + .lg\:col-span-2 { + @media (width >= 64rem) { + grid-column: span 2 / span 2; + } + } + .lg\:col-span-3 { + @media (width >= 64rem) { + grid-column: span 3 / span 3; + } + } + .lg\:flex { + @media (width >= 64rem) { + display: flex; + } + } + .lg\:hidden { + @media (width >= 64rem) { + display: none; + } + } + .lg\:w-1\/4 { + @media (width >= 64rem) { + width: calc(1/4 * 100%); + } + } + .lg\:w-3\/4 { + @media (width >= 64rem) { + width: calc(3/4 * 100%); + } + } + .lg\:grid-cols-2 { + @media (width >= 64rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + .lg\:grid-cols-3 { + @media (width >= 64rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + .lg\:grid-cols-4 { + @media (width >= 64rem) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + } + .lg\:grid-cols-5 { + @media (width >= 64rem) { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + } + .lg\:grid-cols-6 { + @media (width >= 64rem) { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + } + .lg\:flex-row { + @media (width >= 64rem) { + flex-direction: row; + } + } + .lg\:px-8 { + @media (width >= 64rem) { + padding-inline: calc(var(--spacing) * 8); + } + } + .lg\:text-3xl { + @media (width >= 64rem) { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + } + } + .lg\:text-4xl { + @media (width >= 64rem) { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + } + } + .lg\:text-6xl { + @media (width >= 64rem) { + font-size: var(--text-6xl); + line-height: var(--tw-leading, var(--text-6xl--line-height)); + } + } + .dark\:border-blue-600 { + @media (prefers-color-scheme: dark) { + border-color: var(--color-blue-600); + } + } + .dark\:border-blue-700\/50 { + @media (prefers-color-scheme: dark) { + border-color: color-mix(in srgb, oklch(48.8% 0.243 264.376) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-blue-700) 50%, transparent); + } + } + } + .dark\:border-gray-600 { + @media (prefers-color-scheme: dark) { + border-color: var(--color-gray-600); + } + } + .dark\:border-gray-700 { + @media (prefers-color-scheme: dark) { + border-color: var(--color-gray-700); + } + } + .dark\:border-gray-700\/50 { + @media (prefers-color-scheme: dark) { + border-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent); + } + } + } + .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); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-400) 30%, transparent); + } + } + } + .dark\:bg-blue-500 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-blue-500); + } + } + .dark\:bg-blue-700 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-blue-700); + } + } + .dark\:bg-blue-800 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-blue-800); + } + } + .dark\:bg-blue-900 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-blue-900); + } + } + .dark\:bg-blue-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent); + } + } + } + .dark\:bg-blue-900\/40 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 40%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-900) 40%, transparent); + } + } + } + .dark\:bg-gray-600 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-600); + } + } + .dark\:bg-gray-700 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-700); + } + } + .dark\:bg-gray-700\/50 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent); + } + } + } + .dark\:bg-gray-800 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-800); + } + } + .dark\:bg-gray-800\/90 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-gray-800) 90%, transparent); + } + } + } + .dark\:bg-gray-900 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-900); + } + } + .dark\:bg-gray-900\/80 { + @media (prefers-color-scheme: dark) { + 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-200 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-green-200); + } + } + .dark\:bg-green-500 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-green-500); + } + } + .dark\:bg-green-700 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-green-700); + } + } + .dark\:bg-green-800 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-green-800); + } + } + .dark\:bg-green-900 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-green-900); + } + } + .dark\:bg-purple-800 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-purple-800); + } + } + .dark\:bg-purple-900 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-purple-900); + } + } + .dark\:bg-red-200 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-red-200); + } + } + .dark\:bg-red-500 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-red-500); + } + } + .dark\:bg-red-700 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-red-700); + } + } + .dark\:bg-red-800 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-red-800); + } + } + .dark\:bg-red-900 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-red-900); + } + } + .dark\:bg-red-900\/40 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 40%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-red-900) 40%, transparent); + } + } + } + .dark\:bg-yellow-200 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-yellow-200); + } + } + .dark\:bg-yellow-400\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent); + } + } + } + .dark\:bg-yellow-600 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-yellow-600); + } + } + .dark\:bg-yellow-700 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-yellow-700); + } + } + .dark\:bg-yellow-800 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-yellow-800); + } + } + .dark\:bg-yellow-900 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-yellow-900); + } + } + .dark\:bg-yellow-900\/50 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-yellow-900) 50%, transparent); + } + } + } + .dark\:from-blue-900 { + @media (prefers-color-scheme: dark) { + --tw-gradient-from: var(--color-blue-900); + --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-950 { + @media (prefers-color-scheme: dark) { + --tw-gradient-from: var(--color-gray-950); + --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\:via-indigo-950 { + @media (prefers-color-scheme: dark) { + --tw-gradient-via: var(--color-indigo-950); + --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); + } + } + .dark\:to-indigo-900 { + @media (prefers-color-scheme: dark) { + --tw-gradient-to: var(--color-indigo-900); + --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); + --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\:text-blue-50 { + @media (prefers-color-scheme: dark) { + color: var(--color-blue-50); + } + } + .dark\:text-blue-100 { + @media (prefers-color-scheme: dark) { + color: var(--color-blue-100); + } + } + .dark\:text-blue-200 { + @media (prefers-color-scheme: dark) { + color: var(--color-blue-200); + } + } + .dark\:text-blue-300 { + @media (prefers-color-scheme: dark) { + color: var(--color-blue-300); + } + } + .dark\:text-blue-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-blue-400); + } + } + .dark\:text-blue-500 { + @media (prefers-color-scheme: dark) { + color: var(--color-blue-500); + } + } + .dark\:text-gray-200 { + @media (prefers-color-scheme: dark) { + color: var(--color-gray-200); + } + } + .dark\:text-gray-300 { + @media (prefers-color-scheme: dark) { + color: var(--color-gray-300); + } + } + .dark\:text-gray-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-gray-400); + } + } + .dark\:text-gray-500 { + @media (prefers-color-scheme: dark) { + color: var(--color-gray-500); + } + } + .dark\:text-gray-600 { + @media (prefers-color-scheme: dark) { + color: var(--color-gray-600); + } + } + .dark\:text-green-200 { + @media (prefers-color-scheme: dark) { + color: var(--color-green-200); + } + } + .dark\:text-green-300 { + @media (prefers-color-scheme: dark) { + color: var(--color-green-300); + } + } + .dark\:text-green-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-green-400); + } + } + .dark\:text-green-800 { + @media (prefers-color-scheme: dark) { + color: var(--color-green-800); + } + } + .dark\:text-green-900 { + @media (prefers-color-scheme: dark) { + color: var(--color-green-900); + } + } + .dark\:text-primary { + @media (prefers-color-scheme: dark) { + color: var(--color-primary); + } + } + .dark\:text-purple-300 { + @media (prefers-color-scheme: dark) { + color: var(--color-purple-300); + } + } + .dark\:text-red-200 { + @media (prefers-color-scheme: dark) { + color: var(--color-red-200); + } + } + .dark\:text-red-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-red-400); + } + } + .dark\:text-red-800 { + @media (prefers-color-scheme: dark) { + color: var(--color-red-800); + } + } + .dark\:text-red-900 { + @media (prefers-color-scheme: dark) { + color: var(--color-red-900); + } + } + .dark\:text-sky-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-sky-400); + } + } + .dark\:text-white { + @media (prefers-color-scheme: dark) { + color: var(--color-white); + } + } + .dark\:text-yellow-50 { + @media (prefers-color-scheme: dark) { + color: var(--color-yellow-50); + } + } + .dark\:text-yellow-200 { + @media (prefers-color-scheme: dark) { + color: var(--color-yellow-200); + } + } + .dark\:text-yellow-300 { + @media (prefers-color-scheme: dark) { + color: var(--color-yellow-300); + } + } + .dark\:text-yellow-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-yellow-400); + } + } + .dark\:text-yellow-800 { + @media (prefers-color-scheme: dark) { + color: var(--color-yellow-800); + } + } + .dark\:ring-1 { + @media (prefers-color-scheme: dark) { + --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); + } + } + .dark\:ring-blue-400\/30 { + @media (prefers-color-scheme: dark) { + --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--color-blue-400) 30%, transparent); + } + } + } + .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); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent); + } + } + } + .dark\:hover\:border-primary\/30 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + border-color: color-mix(in srgb, #4f46e5 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); + } + } + } + } + } + .dark\:hover\:bg-blue-500 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-500); + } + } + } + } + .dark\:hover\:bg-blue-600 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-600); + } + } + } + } + .dark\:hover\:bg-blue-800 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-800); + } + } + } + } + .dark\:hover\:bg-blue-900 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-900); + } + } + } + } + .dark\:hover\:bg-blue-900\/40 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 40%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-900) 40%, transparent); + } + } + } + } + } + .dark\:hover\:bg-gray-500 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-500); + } + } + } + } + .dark\:hover\:bg-gray-600 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-600); + } + } + } + } + .dark\:hover\:bg-gray-700 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-700); + } + } + } + } + .dark\:hover\:bg-green-600 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-green-600); + } + } + } + } + .dark\:hover\:bg-green-900 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-green-900); + } + } + } + } + .dark\:hover\:bg-purple-900 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-purple-900); + } + } + } + } + .dark\:hover\:bg-red-600 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-red-600); + } + } + } + } + .dark\:hover\:bg-red-900\/20 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent); + } + } + } + } + } + .dark\:hover\:bg-yellow-600 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-yellow-600); + } + } + } + } + .dark\:hover\:text-blue-300 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + color: var(--color-blue-300); + } + } + } + } + .dark\:hover\:text-blue-400 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + color: var(--color-blue-400); + } + } + } + } + .dark\:hover\:text-gray-200 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + color: var(--color-gray-200); + } + } + } + } + .dark\:hover\:text-gray-300 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + color: var(--color-gray-300); + } + } + } + } + .dark\:hover\:text-primary { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + color: var(--color-primary); + } + } + } + } + .dark\:hover\:text-sky-300 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + color: var(--color-sky-300); + } + } + } + } + .dark\:hover\:text-white { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + color: var(--color-white); + } + } + } + } + .dark\:focus\:bg-gray-700 { + @media (prefers-color-scheme: dark) { + &:focus { + background-color: var(--color-gray-700); + } + } + } +} +@layer components { + .btn-primary { + display: inline-flex; + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + align-items: center; + border-radius: calc(infinity * 1px); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: transparent; + --tw-gradient-position: to right in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + --tw-gradient-from: var(--color-primary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + --tw-gradient-to: var(--color-secondary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + padding-inline: calc(var(--spacing) * 6); + padding-block: 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-white); + --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); + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + &:hover { + @media (hover: hover) { + --tw-scale-x: 105%; + --tw-scale-y: 105%; + --tw-scale-z: 105%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + &:hover { + @media (hover: hover) { + --tw-gradient-from: color-mix(in srgb, #4f46e5 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-from: color-mix(in oklab, var(--color-primary) 90%, 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)); + } + } + &:hover { + @media (hover: hover) { + --tw-gradient-to: color-mix(in srgb, #e11d48 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-to: color-mix(in oklab, var(--color-secondary) 90%, 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)); + } + } + &:focus { + --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); + } + &:focus { + --tw-ring-color: color-mix(in srgb, #4f46e5 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent); + } + } + &:focus { + --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); + } + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + } + .btn-secondary { + display: inline-flex; + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + align-items: center; + border-radius: calc(infinity * 1px); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-gray-200); + background-color: var(--color-white); + padding-inline: calc(var(--spacing) * 6); + padding-block: 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-gray-700); + --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); + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + &:hover { + @media (hover: hover) { + --tw-scale-x: 105%; + --tw-scale-y: 105%; + --tw-scale-z: 105%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-50); + } + } + &:focus { + --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); + } + &:focus { + --tw-ring-color: color-mix(in srgb, #4f46e5 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent); + } + } + &:focus { + --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); + } + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + @media (prefers-color-scheme: dark) { + border-color: var(--color-gray-700); + } + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-800); + } + @media (prefers-color-scheme: dark) { + color: var(--color-gray-200); + } + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-700); + } + } + } + } + #mobileMenu { + max-height: calc(var(--spacing) * 0); + overflow: hidden; + opacity: 0%; + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 300ms; + transition-duration: 300ms; + --tw-ease: var(--ease-in-out); + transition-timing-function: var(--ease-in-out); + } + #mobileMenu.show { + max-height: 300px; + opacity: 100%; + } + #mobileMenu .space-y-4 { + padding-bottom: calc(var(--spacing) * 6); + } + .mobile-nav-link { + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-lg); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: transparent; + padding-inline: calc(var(--spacing) * 6); + padding-block: calc(var(--spacing) * 3); + color: var(--color-gray-700); + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + &:hover { + @media (hover: hover) { + border-color: color-mix(in srgb, #4f46e5 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-primary) 20%, transparent); + } + } + } + &:hover { + @media (hover: hover) { + background-color: color-mix(in srgb, #4f46e5 10%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); + } + } + } + &:hover { + @media (hover: hover) { + color: var(--color-primary); + } + } + @media (prefers-color-scheme: dark) { + color: var(--color-gray-200); + } + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + border-color: color-mix(in srgb, #4f46e5 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); + } + } + } + } + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: color-mix(in srgb, #4f46e5 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); + } + } + } + } + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + color: var(--color-primary); + } + } + } + } + .mobile-nav-link i { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + @media (max-width: 540px) { + .mobile-nav-link i { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + } + .mobile-nav-link.primary { + --tw-gradient-position: to right in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + --tw-gradient-from: var(--color-primary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + --tw-gradient-to: var(--color-secondary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + color: var(--color-white); + &:hover { + @media (hover: hover) { + --tw-gradient-from: color-mix(in srgb, #4f46e5 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-from: color-mix(in oklab, var(--color-primary) 90%, 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)); + } + } + &:hover { + @media (hover: hover) { + --tw-gradient-to: color-mix(in srgb, #e11d48 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-gradient-to: color-mix(in oklab, var(--color-secondary) 90%, 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)); + } + } + } + .mobile-nav-link.primary i { + margin-right: calc(var(--spacing) * 3); + color: var(--color-white); + } + .mobile-nav-link.secondary { + background-color: var(--color-gray-100); + color: var(--color-gray-700); + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-200); + } + } + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-700); + } + @media (prefers-color-scheme: dark) { + color: var(--color-gray-300); + } + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-600); + } + } + } + } + .mobile-nav-link.secondary i { + margin-right: calc(var(--spacing) * 3); + color: var(--color-gray-500); + @media (prefers-color-scheme: dark) { + color: var(--color-gray-400); + } + } + #theme-toggle+.theme-toggle-btn i::before { + content: "\f186"; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + } + #theme-toggle:checked+.theme-toggle-btn i::before { + content: "\f185"; + color: var(--color-yellow-400); + } + .nav-link { + display: flex; + align-items: center; + color: var(--color-gray-700); + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + @media (prefers-color-scheme: dark) { + color: var(--color-gray-200); + } + } + @media (max-width: 540px) { + .nav-link { + padding-inline: calc(var(--spacing) * 2); + padding-block: calc(var(--spacing) * 2); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .nav-link i { + margin-right: calc(var(--spacing) * 1); + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + } + .nav-link span { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .site-logo { + padding-inline: calc(var(--spacing) * 1); + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .nav-container { + padding-inline: calc(var(--spacing) * 2); + } + } + @media (min-width: 541px) and (max-width: 767px) { + .nav-link { + padding-inline: calc(var(--spacing) * 3); + padding-block: calc(var(--spacing) * 2); + } + .nav-link i { + margin-right: calc(var(--spacing) * 2); + } + .site-logo { + padding-inline: calc(var(--spacing) * 2); + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + .nav-container { + padding-inline: calc(var(--spacing) * 4); + } + } + @media (min-width: 768px) { + .nav-link { + border-radius: var(--radius-lg); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: transparent; + padding-inline: calc(var(--spacing) * 6); + padding-block: calc(var(--spacing) * 2.5); + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + &:hover { + @media (hover: hover) { + border-color: color-mix(in srgb, #4f46e5 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-primary) 20%, transparent); + } + } + } + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + border-color: color-mix(in srgb, #4f46e5 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); + } + } + } + } + } + .nav-link i { + margin-right: calc(var(--spacing) * 3); + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .site-logo { + padding-inline: calc(var(--spacing) * 3); + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + .nav-container { + padding-inline: calc(var(--spacing) * 6); + } + } + .nav-link:hover { + background-color: color-mix(in srgb, #4f46e5 10%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); + } + color: var(--color-primary); + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, #4f46e5 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); + } + } + @media (prefers-color-scheme: dark) { + color: var(--color-primary); + } + } + .nav-link i { + color: var(--color-gray-500); + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + @media (prefers-color-scheme: dark) { + color: var(--color-gray-400); + } + } + .nav-link:hover i { + color: var(--color-primary); + } + @media (min-width: 1024px) { + #mobileMenu { + display: none !important; + } + } + .menu-item { + display: flex; + width: 100%; + align-items: center; + padding-inline: calc(var(--spacing) * 4); + padding-block: calc(var(--spacing) * 3); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + color: var(--color-gray-700); + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + &:first-child { + border-top-left-radius: var(--radius-lg); + border-top-right-radius: var(--radius-lg); + } + &:last-child { + border-bottom-right-radius: var(--radius-lg); + border-bottom-left-radius: var(--radius-lg); + } + &:hover { + @media (hover: hover) { + background-color: color-mix(in srgb, #4f46e5 10%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); + } + } + } + &:hover { + @media (hover: hover) { + color: var(--color-primary); + } + } + @media (prefers-color-scheme: dark) { + color: var(--color-gray-200); + } + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: color-mix(in srgb, #4f46e5 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); + } + } + } + } + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + color: var(--color-primary); + } + } + } + } + .menu-item i { + margin-right: calc(var(--spacing) * 3); + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + color: var(--color-gray-500); + @media (prefers-color-scheme: dark) { + color: var(--color-gray-400); + } + } + .form-input { + width: 100%; + border-radius: var(--radius-lg); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-gray-200); + background-color: color-mix(in srgb, #fff 70%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 70%, transparent); + } + padding-inline: calc(var(--spacing) * 4); + padding-block: calc(var(--spacing) * 3); + color: var(--color-gray-900); + --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); + --tw-backdrop-blur: blur(var(--blur-xs)); + -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-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + &:focus { + border-color: var(--color-primary); + } + &:focus { + --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); + } + &:focus { + --tw-ring-color: color-mix(in srgb, #4f46e5 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent); + } + } + @media (prefers-color-scheme: dark) { + border-color: var(--color-gray-700); + } + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 70%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-gray-800) 70%, transparent); + } + } + @media (prefers-color-scheme: dark) { + color: var(--color-white); + } + } + .form-label { + margin-bottom: calc(var(--spacing) * 1.5); + display: block; + 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-gray-700); + @media (prefers-color-scheme: dark) { + color: var(--color-gray-300); + } + } + .form-hint { + margin-top: calc(var(--spacing) * 2); + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); + } + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + color: var(--color-gray-500); + @media (prefers-color-scheme: dark) { + color: var(--color-gray-400); + } + } + .form-error { + margin-top: calc(var(--spacing) * 2); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + color: var(--color-red-600); + @media (prefers-color-scheme: dark) { + color: var(--color-red-400); + } + } + .status-badge { + display: inline-flex; + align-items: center; + border-radius: calc(infinity * 1px); + padding-inline: calc(var(--spacing) * 3); + padding-block: calc(var(--spacing) * 1); + 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); + } + .status-operating { + background-color: var(--color-green-100); + color: var(--color-green-800); + @media (prefers-color-scheme: dark) { + background-color: var(--color-green-700); + } + @media (prefers-color-scheme: dark) { + color: var(--color-green-50); + } + } + .status-closed { + background-color: var(--color-red-100); + color: var(--color-red-800); + @media (prefers-color-scheme: dark) { + background-color: var(--color-red-700); + } + @media (prefers-color-scheme: dark) { + color: var(--color-red-50); + } + } + .status-construction { + background-color: var(--color-yellow-100); + color: var(--color-yellow-800); + @media (prefers-color-scheme: dark) { + background-color: var(--color-yellow-600); + } + @media (prefers-color-scheme: dark) { + color: var(--color-yellow-50); + } + } + .auth-card { + margin-inline: auto; + width: 100%; + max-width: var(--container-md); + border-radius: var(--radius-2xl); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent); + } + background-color: color-mix(in srgb, #fff 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 90%, transparent); + } + padding: calc(var(--spacing) * 8); + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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); + --tw-backdrop-blur: blur(var(--blur-xs)); + -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,); + @media (prefers-color-scheme: dark) { + border-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent); + } + } + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-gray-800) 90%, transparent); + } + } + } + .auth-title { + margin-bottom: calc(var(--spacing) * 8); + --tw-gradient-position: to right in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + --tw-gradient-from: var(--color-primary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + --tw-gradient-to: var(--color-secondary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + background-clip: text; + text-align: center; + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + color: transparent; + } + .auth-divider { + position: relative; + margin-block: calc(var(--spacing) * 6); + text-align: center; + } + .auth-divider::before, .auth-divider::after { + position: absolute; + top: calc(1/2 * 100%); + width: calc(1/3 * 100%); + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-color: var(--color-gray-200); + --tw-content: ''; + content: var(--tw-content); + @media (prefers-color-scheme: dark) { + border-color: var(--color-gray-700); + } + } + .auth-divider::before { + left: calc(var(--spacing) * 0); + } + .auth-divider::after { + right: calc(var(--spacing) * 0); + } + .auth-divider span { + background-color: color-mix(in srgb, #fff 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 90%, transparent); + } + padding-inline: calc(var(--spacing) * 4); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + color: var(--color-gray-500); + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-gray-800) 90%, transparent); + } + } + @media (prefers-color-scheme: dark) { + color: var(--color-gray-400); + } + } + .btn-social { + margin-bottom: calc(var(--spacing) * 3); + display: flex; + width: 100%; + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + align-items: center; + justify-content: center; + border-radius: var(--radius-lg); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-gray-200); + background-color: var(--color-white); + padding-inline: calc(var(--spacing) * 6); + padding-block: calc(var(--spacing) * 3); + 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-gray-700); + --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); + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + &:hover { + @media (hover: hover) { + scale: 1.02; + } + } + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-50); + } + } + &:focus { + --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); + } + &:focus { + --tw-ring-color: color-mix(in srgb, #4f46e5 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent); + } + } + &:focus { + --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); + } + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + @media (prefers-color-scheme: dark) { + border-color: var(--color-gray-700); + } + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-800); + } + @media (prefers-color-scheme: dark) { + color: var(--color-gray-200); + } + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-700); + } + } + } + } + .btn-discord { + border-color: var(--color-gray-200); + background-color: var(--color-white); + color: var(--color-gray-700); + --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); + } + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-50); + } + } + @media (prefers-color-scheme: dark) { + --tw-shadow-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-900) 50%, transparent) var(--tw-shadow-alpha), transparent); + } + } + } + .btn-google { + border-color: var(--color-gray-200); + background-color: var(--color-white); + color: var(--color-gray-700); + --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); + } + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-50); + } + } + @media (prefers-color-scheme: dark) { + --tw-shadow-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-900) 50%, transparent) var(--tw-shadow-alpha), transparent); + } + } + } + .alert { + margin-bottom: calc(var(--spacing) * 4); + border-radius: var(--radius-xl); + padding: calc(var(--spacing) * 4); + --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); + --tw-backdrop-blur: blur(var(--blur-xs)); + -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,); + } + .alert-success { + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-green-200); + background-color: color-mix(in srgb, oklch(96.2% 0.044 156.743) 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-green-100) 90%, transparent); + } + color: var(--color-green-800); + @media (prefers-color-scheme: dark) { + border-color: var(--color-green-700); + } + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(44.8% 0.119 151.328) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-green-800) 30%, transparent); + } + } + @media (prefers-color-scheme: dark) { + color: var(--color-green-100); + } + } + .alert-error { + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-red-200); + background-color: color-mix(in srgb, oklch(93.6% 0.032 17.717) 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-red-100) 90%, transparent); + } + color: var(--color-red-800); + @media (prefers-color-scheme: dark) { + border-color: var(--color-red-700); + } + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(44.4% 0.177 26.899) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-red-800) 30%, transparent); + } + } + @media (prefers-color-scheme: dark) { + color: var(--color-red-100); + } + } + .alert-warning { + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-yellow-200); + background-color: color-mix(in srgb, oklch(97.3% 0.071 103.193) 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-yellow-100) 90%, transparent); + } + color: var(--color-yellow-800); + @media (prefers-color-scheme: dark) { + border-color: var(--color-yellow-700); + } + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(47.6% 0.114 61.907) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-yellow-800) 30%, transparent); + } + } + @media (prefers-color-scheme: dark) { + color: var(--color-yellow-100); + } + } + .alert-info { + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-blue-200); + background-color: color-mix(in srgb, oklch(93.2% 0.032 255.585) 90%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-100) 90%, transparent); + } + color: var(--color-blue-800); + @media (prefers-color-scheme: dark) { + border-color: var(--color-blue-700); + } + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(42.4% 0.199 265.638) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-800) 30%, transparent); + } + } + @media (prefers-color-scheme: dark) { + color: var(--color-blue-100); + } + } + .card { + border-radius: var(--radius-lg); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent); + } + background-color: var(--color-white); + padding: calc(var(--spacing) * 6); + --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); + @media (prefers-color-scheme: dark) { + border-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent); + } + } + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-800); + } + } + .card-hover { + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + transition-property: transform, translate, scale, rotate; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + &:hover { + @media (hover: hover) { + --tw-translate-y: calc(var(--spacing) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + } + } + .grid-cards { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: calc(var(--spacing) * 6); + @media (width >= 48rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + @media (width >= 64rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + .grid-adaptive { + display: grid; + gap: calc(var(--spacing) * 6); + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + } + .grid-adaptive-sm { + display: grid; + gap: calc(var(--spacing) * 4); + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + } + .grid-adaptive-lg { + display: grid; + gap: calc(var(--spacing) * 8); + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + } + .grid-stats { + display: grid; + gap: calc(var(--spacing) * 4); + grid-template-columns: repeat(2, 1fr); + } + .grid-stats-wide { + display: grid; + gap: calc(var(--spacing) * 4); + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + } + .grid-responsive { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: calc(var(--spacing) * 6); + @media (width >= 40rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + @media (width >= 48rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + @media (width >= 64rem) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + @media (width >= 80rem) { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + @media (width >= 96rem) { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + } + .grid-responsive-cards { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: calc(var(--spacing) * 6); + @media (width >= 48rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + @media (width >= 64rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + @media (width >= 80rem) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + @media (width >= 96rem) { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + } + @media (min-width: 768px) and (max-width: 1023px) { + .grid-adaptive-sm { + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + } + .grid-stats { + grid-template-columns: repeat(2, 1fr); + } + .grid-adaptive { + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + } + } + @media (min-width: 1024px) and (max-width: 1279px) { + .grid-adaptive { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + } + .grid-adaptive-lg { + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + } + .grid-stats { + grid-template-columns: repeat(3, 1fr); + } + } + @media (min-width: 1280px) { + .grid-adaptive { + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + } + .grid-adaptive-lg { + grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); + } + .grid-stats { + grid-template-columns: repeat(5, 1fr); + } + } + .card-stats-priority { + grid-column: 1 / -1; + } + @media (min-width: 768px) and (max-width: 1023px) { + .card-stats-priority { + grid-column: 1 / -1; + } + } + @media (min-width: 1024px) { + .card-stats-priority { + grid-column: auto; + } + } + @media (min-width: 1536px) { + .grid-adaptive { + grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); + } + .grid-adaptive-lg { + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + } + } + .heading-1 { + margin-bottom: calc(var(--spacing) * 6); + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + color: var(--color-gray-900); + @media (prefers-color-scheme: dark) { + color: var(--color-white); + } + } + .heading-2 { + margin-bottom: calc(var(--spacing) * 4); + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + color: var(--color-gray-900); + @media (prefers-color-scheme: dark) { + color: var(--color-white); + } + } + .text-body { + color: var(--color-gray-600); + @media (prefers-color-scheme: dark) { + color: var(--color-gray-300); + } + } + .turnstile { + margin-block: calc(var(--spacing) * 4); + display: flex; + align-items: center; + justify-content: center; + } + .p-compact { + padding: calc(var(--spacing) * 5); + } + .p-optimized { + padding: calc(var(--spacing) * 4); + } + .p-minimal { + padding: calc(var(--spacing) * 3); + } + .card-standard { + min-height: 120px; + } + .card-large { + min-height: 200px; + } + .card-stats { + min-height: 80px; + } + @media (max-width: 768px) { + .p-compact { + padding: calc(var(--spacing) * 4); + } + .p-optimized { + padding: calc(var(--spacing) * 3.5); + } + .p-minimal { + padding: calc(var(--spacing) * 2.5); + } + .card-standard { + min-height: 100px; + } + .card-large { + min-height: 160px; + } + .card-stats { + min-height: 80px; + } + } +} +@property --tw-translate-x { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-y { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-z { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-scale-x { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-scale-y { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-scale-z { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-rotate-x { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-y { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-z { + syntax: "*"; + inherits: false; +} +@property --tw-skew-x { + syntax: "*"; + inherits: false; +} +@property --tw-skew-y { + syntax: "*"; + inherits: false; +} +@property --tw-space-y-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-space-x-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-divide-y-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-gradient-position { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-from { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-via { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-to { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-stops { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-via-stops { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-from-position { + syntax: ""; + inherits: false; + initial-value: 0%; +} +@property --tw-gradient-via-position { + syntax: ""; + inherits: false; + initial-value: 50%; +} +@property --tw-gradient-to-position { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-leading { + syntax: "*"; + inherits: false; +} +@property --tw-font-weight { + syntax: "*"; + inherits: false; +} +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-blur { + syntax: "*"; + inherits: false; +} +@property --tw-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-invert { + syntax: "*"; + inherits: false; +} +@property --tw-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-drop-shadow-size { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-blur { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-invert { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-saturate { + syntax: "*"; + inherits: false; } - -.mr-3 { - margin-right: 0.75rem; +@property --tw-backdrop-sepia { + syntax: "*"; + inherits: false; } - -.mt-0\.5 { - margin-top: 0.125rem; +@property --tw-duration { + syntax: "*"; + inherits: false; } - -.mt-1 { - margin-top: 0.25rem; +@property --tw-ease { + syntax: "*"; + inherits: false; } - -.mt-1\.5 { - margin-top: 0.375rem; +@property --tw-content { + syntax: "*"; + inherits: false; + initial-value: ""; } - -.mt-2 { - margin-top: 0.5rem; -} - -.mt-3 { - margin-top: 0.75rem; -} - -.mt-4 { - margin-top: 1rem; -} - -.mt-6 { - margin-top: 1.5rem; -} - -.mt-auto { - margin-top: auto; -} - -.block { - display: block; -} - -.inline-block { - display: inline-block; -} - -.flex { - display: flex; -} - -.inline-flex { - display: inline-flex; -} - -.table { - display: table; -} - -.grid { - display: grid; -} - -.hidden { - display: none; -} - -.h-16 { - height: 4rem; -} - -.h-2 { - height: 0.5rem; -} - -.h-2\.5 { - height: 0.625rem; -} - -.h-24 { - height: 6rem; -} - -.h-4 { - height: 1rem; -} - -.h-48 { - height: 12rem; -} - -.h-5 { - height: 1.25rem; -} - -.h-8 { - height: 2rem; -} - -.h-\[300px\] { - height: 300px; -} - -.h-auto { - height: auto; -} - -.h-full { - height: 100%; -} - -.max-h-60 { - max-height: 15rem; -} - -.max-h-\[90vh\] { - max-height: 90vh; -} - -.min-h-screen { - min-height: 100vh; -} - -.w-16 { - width: 4rem; -} - -.w-24 { - width: 6rem; -} - -.w-32 { - width: 8rem; -} - -.w-4 { - width: 1rem; -} - -.w-5 { - width: 1.25rem; -} - -.w-64 { - width: 16rem; -} - -.w-8 { - width: 2rem; -} - -.w-auto { - width: auto; -} - -.w-fit { - width: -moz-fit-content; - width: fit-content; -} - -.w-full { - width: 100%; -} - -.min-w-\[200px\] { - min-width: 200px; -} - -.max-w-2xl { - max-width: 42rem; -} - -.max-w-3xl { - max-width: 48rem; -} - -.max-w-4xl { - max-width: 56rem; -} - -.max-w-6xl { - max-width: 72rem; -} - -.max-w-7xl { - max-width: 80rem; -} - -.max-w-\[800px\] { - max-width: 800px; -} - -.max-w-lg { - max-width: 32rem; -} - -.max-w-md { - max-width: 28rem; -} - -.max-w-none { - max-width: none; -} - -.max-w-xs { - max-width: 20rem; -} - -.flex-1 { - flex: 1 1 0%; -} - -.flex-shrink-0 { - flex-shrink: 0; -} - -.flex-grow { - flex-grow: 1; -} - -.-translate-y-2 { - --tw-translate-y: -0.5rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.-translate-y-full { - --tw-translate-y: -100%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-y-0 { - --tw-translate-y: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.translate-y-full { - --tw-translate-y: 100%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.scale-100 { - --tw-scale-x: 1; - --tw-scale-y: 1; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.scale-95 { - --tw-scale-x: .95; - --tw-scale-y: .95; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - @keyframes spin { to { transform: rotate(360deg); } } - -.animate-spin { - animation: spin 1s linear infinite; -} - -.cursor-pointer { - cursor: pointer; -} - -.resize-none { - resize: none; -} - -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - -.grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); -} - -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); -} - -.flex-col { - flex-direction: column; -} - -.flex-wrap { - flex-wrap: wrap; -} - -.items-start { - align-items: flex-start; -} - -.items-end { - align-items: flex-end; -} - -.items-center { - align-items: center; -} - -.justify-end { - justify-content: flex-end; -} - -.justify-center { - justify-content: center; -} - -.justify-between { - justify-content: space-between; -} - -.gap-1 { - gap: 0.25rem; -} - -.gap-2 { - gap: 0.5rem; -} - -.gap-3 { - gap: 0.75rem; -} - -.gap-4 { - gap: 1rem; -} - -.gap-6 { - gap: 1.5rem; -} - -.space-x-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.25rem * var(--tw-space-x-reverse)); - margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-x-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-x-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.75rem * var(--tw-space-x-reverse)); - margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-x-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-y-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} - -.space-y-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); -} - -.space-y-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} - -.space-y-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - -.space-y-6 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); -} - -.overflow-auto { - overflow: auto; -} - -.overflow-hidden { - overflow: hidden; -} - -.overflow-y-auto { - overflow-y: auto; -} - -.rounded { - border-radius: 0.25rem; -} - -.rounded-full { - border-radius: 9999px; -} - -.rounded-lg { - border-radius: 0.5rem; -} - -.rounded-md { - border-radius: 0.375rem; -} - -.rounded-b-lg { - border-bottom-right-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; -} - -.rounded-l-lg { - border-top-left-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; -} - -.rounded-l-md { - border-top-left-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; -} - -.rounded-r-lg { - border-top-right-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; -} - -.rounded-r-md { - border-top-right-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; -} - -.rounded-t-lg { - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -.border { - border-width: 1px; -} - -.border-2 { - border-width: 2px; -} - -.border-4 { - border-width: 4px; -} - -.border-b { - border-bottom-width: 1px; -} - -.border-b-2 { - border-bottom-width: 2px; -} - -.border-t { - border-top-width: 1px; -} - -.border-dashed { - border-style: dashed; -} - -.border-blue-200\/50 { - border-color: rgb(191 219 254 / 0.5); -} - -.border-blue-500 { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - -.border-blue-600 { - --tw-border-opacity: 1; - border-color: rgb(37 99 235 / var(--tw-border-opacity)); -} - -.border-gray-200 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); -} - -.border-gray-200\/50 { - border-color: rgb(229 231 235 / 0.5); -} - -.border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - -.border-gray-700 { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity)); -} - -.border-green-500 { - --tw-border-opacity: 1; - border-color: rgb(34 197 94 / var(--tw-border-opacity)); -} - -.border-primary { - --tw-border-opacity: 1; - border-color: rgb(79 70 229 / var(--tw-border-opacity)); -} - -.border-red-400 { - --tw-border-opacity: 1; - border-color: rgb(248 113 113 / var(--tw-border-opacity)); -} - -.border-red-500 { - --tw-border-opacity: 1; - border-color: rgb(239 68 68 / var(--tw-border-opacity)); -} - -.border-transparent { - border-color: transparent; -} - -.border-t-transparent { - border-top-color: transparent; -} - -.bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); -} - -.bg-black\/50 { - background-color: rgb(0 0 0 / 0.5); -} - -.bg-blue-100 { - --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); -} - -.bg-blue-50 { - --tw-bg-opacity: 1; - background-color: rgb(239 246 255 / var(--tw-bg-opacity)); -} - -.bg-blue-500 { - --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); -} - -.bg-blue-600 { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} - -.bg-blue-900\/40 { - background-color: rgb(30 58 138 / 0.4); -} - -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - -.bg-gray-200 { - --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); -} - -.bg-gray-50 { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); -} - -.bg-gray-500 { - --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); -} - -.bg-gray-800 { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); -} - -.bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); -} - -.bg-gray-900\/80 { - background-color: rgb(17 24 39 / 0.8); -} - -.bg-green-100 { - --tw-bg-opacity: 1; - background-color: rgb(220 252 231 / var(--tw-bg-opacity)); -} - -.bg-green-500 { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); -} - -.bg-green-600 { - --tw-bg-opacity: 1; - background-color: rgb(22 163 74 / var(--tw-bg-opacity)); -} - -.bg-green-900\/40 { - background-color: rgb(20 83 45 / 0.4); -} - -.bg-red-100 { - --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); -} - -.bg-red-500 { - --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); -} - -.bg-red-600 { - --tw-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--tw-bg-opacity)); -} - -.bg-red-900\/40 { - background-color: rgb(127 29 29 / 0.4); -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.bg-white\/10 { - background-color: rgb(255 255 255 / 0.1); -} - -.bg-white\/80 { - background-color: rgb(255 255 255 / 0.8); -} - -.bg-white\/90 { - background-color: rgb(255 255 255 / 0.9); -} - -.bg-yellow-100 { - --tw-bg-opacity: 1; - background-color: rgb(254 249 195 / var(--tw-bg-opacity)); -} - -.bg-yellow-500 { - --tw-bg-opacity: 1; - background-color: rgb(234 179 8 / var(--tw-bg-opacity)); -} - -.bg-yellow-600 { - --tw-bg-opacity: 1; - background-color: rgb(202 138 4 / var(--tw-bg-opacity)); -} - -.bg-yellow-900\/40 { - background-color: rgb(113 63 18 / 0.4); -} - -.bg-opacity-50 { - --tw-bg-opacity: 0.5; -} - -.bg-opacity-75 { - --tw-bg-opacity: 0.75; -} - -.bg-opacity-90 { - --tw-bg-opacity: 0.9; -} - -.bg-gradient-to-br { - background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); -} - -.bg-gradient-to-r { - background-image: linear-gradient(to right, var(--tw-gradient-stops)); -} - -.from-primary { - --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.from-white { - --tw-gradient-from: #fff var(--tw-gradient-from-position); - --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.via-blue-50 { - --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), #eff6ff var(--tw-gradient-via-position), var(--tw-gradient-to); -} - -.to-indigo-50 { - --tw-gradient-to: #eef2ff var(--tw-gradient-to-position); -} - -.to-secondary { - --tw-gradient-to: #e11d48 var(--tw-gradient-to-position); -} - -.bg-clip-text { - -webkit-background-clip: text; - background-clip: text; -} - -.object-contain { - -o-object-fit: contain; - object-fit: contain; -} - -.object-cover { - -o-object-fit: cover; - object-fit: cover; -} - -.p-0\.5 { - padding: 0.125rem; -} - -.p-1 { - padding: 0.25rem; -} - -.p-1\.5 { - padding: 0.375rem; -} - -.p-2 { - padding: 0.5rem; -} - -.p-3 { - padding: 0.75rem; -} - -.p-4 { - padding: 1rem; -} - -.p-6 { - padding: 1.5rem; -} - -.p-8 { - padding: 2rem; -} - -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.px-8 { - padding-left: 2rem; - padding-right: 2rem; -} - -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.py-12 { - padding-top: 3rem; - padding-bottom: 3rem; -} - -.py-16 { - padding-top: 4rem; - padding-bottom: 4rem; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.py-2\.5 { - padding-top: 0.625rem; - padding-bottom: 0.625rem; -} - -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} - -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.py-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - -.py-8 { - padding-top: 2rem; - padding-bottom: 2rem; -} - -.pb-4 { - padding-bottom: 1rem; -} - -.text-left { - text-align: left; -} - -.text-center { - text-align: center; -} - -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - -.text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; -} - -.text-5xl { - font-size: 3rem; - line-height: 1; -} - -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} - -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - -.text-xs { - font-size: 0.75rem; - line-height: 1rem; -} - -.font-bold { - font-weight: 700; -} - -.font-medium { - font-weight: 500; -} - -.font-normal { - font-weight: 400; -} - -.font-semibold { - font-weight: 600; -} - -.uppercase { - text-transform: uppercase; -} - -.lowercase { - text-transform: lowercase; -} - -.leading-tight { - line-height: 1.25; -} - -.text-blue-400 { - --tw-text-opacity: 1; - color: rgb(96 165 250 / var(--tw-text-opacity)); -} - -.text-blue-500 { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); -} - -.text-blue-600 { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity)); -} - -.text-blue-800 { - --tw-text-opacity: 1; - color: rgb(30 64 175 / var(--tw-text-opacity)); -} - -.text-blue-900 { - --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity)); -} - -.text-gray-200 { - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -.text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -.text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.text-gray-700 { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.text-gray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.text-green-400 { - --tw-text-opacity: 1; - color: rgb(74 222 128 / var(--tw-text-opacity)); -} - -.text-green-600 { - --tw-text-opacity: 1; - color: rgb(22 163 74 / var(--tw-text-opacity)); -} - -.text-green-700 { - --tw-text-opacity: 1; - color: rgb(21 128 61 / var(--tw-text-opacity)); -} - -.text-green-800 { - --tw-text-opacity: 1; - color: rgb(22 101 52 / var(--tw-text-opacity)); -} - -.text-primary { - --tw-text-opacity: 1; - color: rgb(79 70 229 / var(--tw-text-opacity)); -} - -.text-red-400 { - --tw-text-opacity: 1; - color: rgb(248 113 113 / var(--tw-text-opacity)); -} - -.text-red-500 { - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); -} - -.text-red-600 { - --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); -} - -.text-red-700 { - --tw-text-opacity: 1; - color: rgb(185 28 28 / var(--tw-text-opacity)); -} - -.text-red-800 { - --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity)); -} - -.text-sky-900 { - --tw-text-opacity: 1; - color: rgb(12 74 110 / var(--tw-text-opacity)); -} - -.text-transparent { - color: transparent; -} - -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.text-yellow-400 { - --tw-text-opacity: 1; - color: rgb(250 204 21 / var(--tw-text-opacity)); -} - -.text-yellow-500 { - --tw-text-opacity: 1; - color: rgb(234 179 8 / var(--tw-text-opacity)); -} - -.text-yellow-600 { - --tw-text-opacity: 1; - color: rgb(202 138 4 / var(--tw-text-opacity)); -} - -.text-yellow-700 { - --tw-text-opacity: 1; - color: rgb(161 98 7 / var(--tw-text-opacity)); -} - -.text-yellow-800 { - --tw-text-opacity: 1; - color: rgb(133 77 14 / var(--tw-text-opacity)); -} - -.opacity-0 { - opacity: 0; -} - -.opacity-100 { - opacity: 1; -} - -.shadow { - --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-md { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-xl { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.ring-2 { - --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, 0 0 #0000); -} - -.ring-blue-500 { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); -} - -.ring-primary\/20 { - --tw-ring-color: rgb(79 70 229 / 0.2); -} - -.filter { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -.backdrop-blur-lg { - --tw-backdrop-blur: blur(16px); - -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-blur-sm { - --tw-backdrop-blur: blur(4px); - -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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-opacity { - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-shadow { - transition-property: box-shadow; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.duration-100 { - transition-duration: 100ms; -} - -.duration-200 { - transition-duration: 200ms; -} - -.duration-300 { - transition-duration: 300ms; -} - -.duration-75 { - transition-duration: 75ms; -} - -.ease-in { - transition-timing-function: cubic-bezier(0.4, 0, 1, 1); -} - -.ease-out { - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); -} - -.dark\:prose-invert:is(.dark *) { - --tw-prose-body: var(--tw-prose-invert-body); - --tw-prose-headings: var(--tw-prose-invert-headings); - --tw-prose-lead: var(--tw-prose-invert-lead); - --tw-prose-links: var(--tw-prose-invert-links); - --tw-prose-bold: var(--tw-prose-invert-bold); - --tw-prose-counters: var(--tw-prose-invert-counters); - --tw-prose-bullets: var(--tw-prose-invert-bullets); - --tw-prose-hr: var(--tw-prose-invert-hr); - --tw-prose-quotes: var(--tw-prose-invert-quotes); - --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); - --tw-prose-captions: var(--tw-prose-invert-captions); - --tw-prose-kbd: var(--tw-prose-invert-kbd); - --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows); - --tw-prose-code: var(--tw-prose-invert-code); - --tw-prose-pre-code: var(--tw-prose-invert-pre-code); - --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); - --tw-prose-th-borders: var(--tw-prose-invert-th-borders); - --tw-prose-td-borders: var(--tw-prose-invert-td-borders); -} - -.last\:mb-0:last-child { - margin-bottom: 0px; -} - -.hover\:-translate-y-1:hover { - --tw-translate-y: -0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:scale-105:hover { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:scale-\[1\.02\]:hover { - --tw-scale-x: 1.02; - --tw-scale-y: 1.02; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:border-gray-300:hover { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - -.hover\:bg-blue-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); -} - -.hover\:bg-blue-500:hover { - --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); -} - -.hover\:bg-blue-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); -} - -.hover\:bg-gray-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - -.hover\:bg-gray-200:hover { - --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); -} - -.hover\:bg-gray-300:hover { - --tw-bg-opacity: 1; - background-color: rgb(209 213 219 / var(--tw-bg-opacity)); -} - -.hover\:bg-gray-50:hover { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); -} - -.hover\:bg-green-500:hover { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); -} - -.hover\:bg-red-50:hover { - --tw-bg-opacity: 1; - background-color: rgb(254 242 242 / var(--tw-bg-opacity)); -} - -.hover\:bg-red-500:hover { - --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); -} - -.hover\:bg-red-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--tw-bg-opacity)); -} - -.hover\:bg-white\/20:hover { - background-color: rgb(255 255 255 / 0.2); -} - -.hover\:bg-yellow-500:hover { - --tw-bg-opacity: 1; - background-color: rgb(234 179 8 / var(--tw-bg-opacity)); -} - -.hover\:bg-yellow-600:hover { - --tw-bg-opacity: 1; - background-color: rgb(202 138 4 / var(--tw-bg-opacity)); -} - -.hover\:text-blue-500:hover { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); -} - -.hover\:text-blue-600:hover { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity)); -} - -.hover\:text-blue-700:hover { - --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity)); -} - -.hover\:text-blue-800:hover { - --tw-text-opacity: 1; - color: rgb(30 64 175 / var(--tw-text-opacity)); -} - -.hover\:text-blue-900:hover { - --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity)); -} - -.hover\:text-gray-300:hover { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -.hover\:text-gray-600:hover { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.hover\:text-gray-700:hover { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.hover\:text-gray-900:hover { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.hover\:text-primary:hover { - --tw-text-opacity: 1; - color: rgb(79 70 229 / var(--tw-text-opacity)); -} - -.hover\:text-primary\/80:hover { - color: rgb(79 70 229 / 0.8); -} - -.hover\:text-sky-800:hover { - --tw-text-opacity: 1; - color: rgb(7 89 133 / var(--tw-text-opacity)); -} - -.hover\:underline:hover { - text-decoration-line: underline; -} - -.hover\:shadow-md:hover { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.hover\:shadow-xl:hover { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.focus\:border-blue-500:focus { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - -.focus\:underline:focus { - text-decoration-line: underline; -} - -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.focus\:ring-2:focus { - --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, 0 0 #0000); -} - -.focus\:ring-blue-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); -} - -.focus\:ring-primary\/50:focus { - --tw-ring-color: rgb(79 70 229 / 0.5); -} - -.focus\:ring-offset-2:focus { - --tw-ring-offset-width: 2px; -} - -.disabled\:opacity-50:disabled { - opacity: 0.5; -} - -.group:hover .group-hover\:scale-105 { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:opacity-100 { - opacity: 1; -} - -.dark\:border-blue-700\/50:is(.dark *) { - border-color: rgb(29 78 216 / 0.5); -} - -.dark\:border-gray-600:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); -} - -.dark\:border-gray-700:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity)); -} - -.dark\:border-gray-700\/50:is(.dark *) { - border-color: rgb(55 65 81 / 0.5); -} - -.dark\:bg-blue-400\/30:is(.dark *) { - background-color: rgb(96 165 250 / 0.3); -} - -.dark\:bg-blue-500:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); -} - -.dark\:bg-blue-700:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); -} - -.dark\:bg-blue-900\/30:is(.dark *) { - background-color: rgb(30 58 138 / 0.3); -} - -.dark\:bg-blue-900\/40:is(.dark *) { - background-color: rgb(30 58 138 / 0.4); -} - -.dark\:bg-gray-600:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(75 85 99 / var(--tw-bg-opacity)); -} - -.dark\:bg-gray-700:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)); -} - -.dark\:bg-gray-700\/50:is(.dark *) { - background-color: rgb(55 65 81 / 0.5); -} - -.dark\:bg-gray-800:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); -} - -.dark\:bg-gray-800\/90:is(.dark *) { - background-color: rgb(31 41 55 / 0.9); -} - -.dark\:bg-gray-900:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); -} - -.dark\:bg-gray-900\/80:is(.dark *) { - background-color: rgb(17 24 39 / 0.8); -} - -.dark\:bg-green-200:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(187 247 208 / var(--tw-bg-opacity)); -} - -.dark\:bg-green-700:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(21 128 61 / var(--tw-bg-opacity)); -} - -.dark\:bg-red-200:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); -} - -.dark\:bg-red-700:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--tw-bg-opacity)); -} - -.dark\:bg-yellow-200:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(254 240 138 / var(--tw-bg-opacity)); -} - -.dark\:bg-yellow-400\/30:is(.dark *) { - background-color: rgb(250 204 21 / 0.3); -} - -.dark\:bg-yellow-600:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(202 138 4 / var(--tw-bg-opacity)); -} - -.dark\:bg-yellow-700:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(161 98 7 / var(--tw-bg-opacity)); -} - -.dark\:bg-yellow-900\/50:is(.dark *) { - background-color: rgb(113 63 18 / 0.5); -} - -.dark\:from-gray-950:is(.dark *) { - --tw-gradient-from: #030712 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(3 7 18 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.dark\:via-indigo-950:is(.dark *) { - --tw-gradient-to: rgb(30 27 75 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), #1e1b4b var(--tw-gradient-via-position), var(--tw-gradient-to); -} - -.dark\:to-purple-950:is(.dark *) { - --tw-gradient-to: #3b0764 var(--tw-gradient-to-position); -} - -.dark\:text-blue-200:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(191 219 254 / var(--tw-text-opacity)); -} - -.dark\:text-blue-300:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(147 197 253 / var(--tw-text-opacity)); -} - -.dark\:text-blue-400:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(96 165 250 / var(--tw-text-opacity)); -} - -.dark\:text-blue-50:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(239 246 255 / var(--tw-text-opacity)); -} - -.dark\:text-blue-500:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); -} - -.dark\:text-gray-200:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -.dark\:text-gray-300:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -.dark\:text-gray-400:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -.dark\:text-gray-500:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.dark\:text-gray-600:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.dark\:text-green-400:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(74 222 128 / var(--tw-text-opacity)); -} - -.dark\:text-green-50:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(240 253 244 / var(--tw-text-opacity)); -} - -.dark\:text-green-800:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(22 101 52 / var(--tw-text-opacity)); -} - -.dark\:text-green-900:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(20 83 45 / var(--tw-text-opacity)); -} - -.dark\:text-red-400:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(248 113 113 / var(--tw-text-opacity)); -} - -.dark\:text-red-800:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity)); -} - -.dark\:text-red-900:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(127 29 29 / var(--tw-text-opacity)); -} - -.dark\:text-sky-400:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(56 189 248 / var(--tw-text-opacity)); -} - -.dark\:text-white:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.dark\:text-yellow-200:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(254 240 138 / var(--tw-text-opacity)); -} - -.dark\:text-yellow-300:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(253 224 71 / var(--tw-text-opacity)); -} - -.dark\:text-yellow-400:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(250 204 21 / var(--tw-text-opacity)); -} - -.dark\:text-yellow-50:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(254 252 232 / var(--tw-text-opacity)); -} - -.dark\:text-yellow-800:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(133 77 14 / var(--tw-text-opacity)); -} - -.dark\:ring-1:is(.dark *) { - --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, 0 0 #0000); -} - -.dark\:ring-blue-400\/30:is(.dark *) { - --tw-ring-color: rgb(96 165 250 / 0.3); -} - -.dark\:ring-yellow-400\/30:is(.dark *) { - --tw-ring-color: rgb(250 204 21 / 0.3); -} - -.dark\:hover\:bg-blue-500:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); -} - -.dark\:hover\:bg-blue-600:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} - -.dark\:hover\:bg-blue-800:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(30 64 175 / var(--tw-bg-opacity)); -} - -.dark\:hover\:bg-blue-900\/40:hover:is(.dark *) { - background-color: rgb(30 58 138 / 0.4); -} - -.dark\:hover\:bg-gray-500:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); -} - -.dark\:hover\:bg-gray-600:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(75 85 99 / var(--tw-bg-opacity)); -} - -.dark\:hover\:bg-gray-700:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)); -} - -.dark\:hover\:bg-green-600:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(22 163 74 / var(--tw-bg-opacity)); -} - -.dark\:hover\:bg-red-600:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--tw-bg-opacity)); -} - -.dark\:hover\:bg-red-900\/20:hover:is(.dark *) { - background-color: rgb(127 29 29 / 0.2); -} - -.dark\:hover\:bg-yellow-600:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(202 138 4 / var(--tw-bg-opacity)); -} - -.dark\:hover\:text-blue-300:hover:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(147 197 253 / var(--tw-text-opacity)); -} - -.dark\:hover\:text-blue-400:hover:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(96 165 250 / var(--tw-text-opacity)); -} - -.dark\:hover\:text-gray-200:hover:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -.dark\:hover\:text-gray-300:hover:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -.dark\:hover\:text-primary:hover:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(79 70 229 / var(--tw-text-opacity)); -} - -.dark\:hover\:text-sky-300:hover:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(125 211 252 / var(--tw-text-opacity)); -} - -.dark\:hover\:text-white:hover:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -@media (min-width: 640px) { - .sm\:col-span-3 { - grid-column: span 3 / span 3; - } - - .sm\:col-span-4 { - grid-column: span 4 / span 4; - } - - .sm\:col-span-8 { - grid-column: span 8 / span 8; - } - - .sm\:col-span-9 { - grid-column: span 9 / span 9; - } - - .sm\:mb-16 { - margin-bottom: 4rem; - } - - .sm\:grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .sm\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .sm\:flex-row { - flex-direction: row; - } - - .sm\:items-end { - align-items: flex-end; - } - - .sm\:items-center { - align-items: center; - } - - .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); - } - - .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1.5rem * var(--tw-space-x-reverse)); - margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); - } - - .sm\:px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; - } - - .sm\:text-2xl { - font-size: 1.5rem; - line-height: 2rem; - } - - .sm\:text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; - } - - .sm\:text-base { - font-size: 1rem; - line-height: 1.5rem; - } - - .sm\:text-lg { - font-size: 1.125rem; - line-height: 1.75rem; - } - - .sm\:text-sm { - font-size: 0.875rem; - line-height: 1.25rem; - } - - .sm\:text-xl { - font-size: 1.25rem; - line-height: 1.75rem; - } - - .sm\:text-xs { - font-size: 0.75rem; - line-height: 1rem; +@keyframes pulse { + 50% { + opacity: 0.5; } } - -@media (min-width: 768px) { - .md\:col-span-1 { - grid-column: span 1 / span 1; - } - - .md\:col-span-2 { - grid-column: span 2 / span 2; - } - - .md\:mb-8 { - margin-bottom: 2rem; - } - - .md\:h-\[140px\] { - height: 140px; - } - - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .md\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .md\:flex-row { - flex-direction: row; - } - - .md\:items-center { - align-items: center; - } - - .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.75rem * var(--tw-space-x-reverse)); - margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); - } - - .md\:py-12 { - padding-top: 3rem; - padding-bottom: 3rem; - } - - .md\:text-2xl { - font-size: 1.5rem; - line-height: 2rem; - } - - .md\:text-5xl { - font-size: 3rem; - line-height: 1; - } - - .md\:text-lg { - font-size: 1.125rem; - line-height: 1.75rem; - } -} - -@media (min-width: 1024px) { - .lg\:col-span-1 { - grid-column: span 1 / span 1; - } - - .lg\:col-span-2 { - grid-column: span 2 / span 2; - } - - .lg\:flex { - display: flex; - } - - .lg\:hidden { - display: none; - } - - .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .lg\:px-8 { - padding-left: 2rem; - padding-right: 2rem; - } - - .lg\:text-2xl { - font-size: 1.5rem; - line-height: 2rem; - } - - .lg\:text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; - } - - .lg\:text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; - } - - .lg\:text-6xl { - font-size: 3.75rem; - line-height: 1; - } - - .lg\:text-base { - font-size: 1rem; - line-height: 1.5rem; - } - - .lg\:text-lg { - font-size: 1.125rem; - line-height: 1.75rem; +@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 { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + --tw-space-y-reverse: 0; + --tw-space-x-reverse: 0; + --tw-divide-y-reverse: 0; + --tw-border-style: solid; + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-leading: initial; + --tw-font-weight: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-outline-style: solid; + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + --tw-backdrop-blur: initial; + --tw-backdrop-brightness: initial; + --tw-backdrop-contrast: initial; + --tw-backdrop-grayscale: initial; + --tw-backdrop-hue-rotate: initial; + --tw-backdrop-invert: initial; + --tw-backdrop-opacity: initial; + --tw-backdrop-saturate: initial; + --tw-backdrop-sepia: initial; + --tw-duration: initial; + --tw-ease: initial; + --tw-content: ""; + } } } diff --git a/staticfiles/debug_toolbar/css/print.css b/staticfiles/debug_toolbar/css/print.css new file mode 100644 index 00000000..58d30847 --- /dev/null +++ b/staticfiles/debug_toolbar/css/print.css @@ -0,0 +1,3 @@ +#djDebug { + display: none !important; +} diff --git a/staticfiles/debug_toolbar/css/toolbar.css b/staticfiles/debug_toolbar/css/toolbar.css new file mode 100644 index 00000000..43b43206 --- /dev/null +++ b/staticfiles/debug_toolbar/css/toolbar.css @@ -0,0 +1,1184 @@ +/* Variable definitions */ +:root { + /* Font families are the same as in Django admin/css/base.css */ + --djdt-font-family-primary: + "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji"; + --djdt-font-family-monospace: + ui-monospace, Menlo, Monaco, "Cascadia Mono", + "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", + "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", + monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji"; +} + +:root, +#djDebug[data-theme="light"] { + --djdt-font-color: black; + --djdt-background-color: white; + --djdt-panel-content-background-color: #eee; + --djdt-panel-content-table-background-color: var(--djdt-background-color); + --djdt-panel-title-background-color: #ffc; + --djdt-djdt-panel-content-table-strip-background-color: #f5f5f5; + --djdt--highlighted-background-color: lightgrey; + --djdt-toggle-template-background-color: #bbb; + + --djdt-sql-font-color: #333; + --djdt-pre-text-color: #555; + --djdt-path-and-locals: #777; + --djdt-stack-span-color: black; + --djdt-template-highlight-color: #333; + + --djdt-table-border-color: #ccc; + --djdt-button-border-color: var(--djdt-table-border-color); + --djdt-pre-border-color: var(--djdt-table-border-color); + --djdt-raw-border-color: var(--djdt-table-border-color); +} + +#djDebug[data-theme="dark"] { + --djdt-font-color: #f8f8f2; + --djdt-background-color: #1e293bff; + --djdt-panel-content-background-color: #0f1729ff; + --djdt-panel-content-table-background-color: var(--djdt-background-color); + --djdt-panel-title-background-color: #242432; + --djdt-djdt-panel-content-table-strip-background-color: #324154ff; + --djdt--highlighted-background-color: #2c2a7dff; + --djdt-toggle-template-background-color: #282755; + + --djdt-sql-font-color: var(--djdt-font-color); + --djdt-pre-text-color: var(--djdt-font-color); + --djdt-path-and-locals: #65758cff; + --djdt-stack-span-color: #7c8fa4; + --djdt-template-highlight-color: var(--djdt-stack-span-color); + + --djdt-table-border-color: #324154ff; + --djdt-button-border-color: var(--djdt-table-border-color); + --djdt-pre-border-color: var(--djdt-table-border-color); + --djdt-raw-border-color: var(--djdt-table-border-color); +} + +/* Debug Toolbar CSS Reset, adapted from Eric Meyer's CSS Reset */ +#djDebug { + color: var(--djdt-font-color); + background: var(--djdt-background-color); +} +#djDebug, +#djDebug div, +#djDebug span, +#djDebug applet, +#djDebug object, +#djDebug iframe, +#djDebug h1, +#djDebug h2, +#djDebug h3, +#djDebug h4, +#djDebug h5, +#djDebug h6, +#djDebug p, +#djDebug blockquote, +#djDebug pre, +#djDebug a, +#djDebug abbr, +#djDebug acronym, +#djDebug address, +#djDebug big, +#djDebug cite, +#djDebug code, +#djDebug del, +#djDebug dfn, +#djDebug em, +#djDebug font, +#djDebug img, +#djDebug ins, +#djDebug kbd, +#djDebug q, +#djDebug s, +#djDebug samp, +#djDebug small, +#djDebug strike, +#djDebug strong, +#djDebug sub, +#djDebug sup, +#djDebug tt, +#djDebug var, +#djDebug b, +#djDebug u, +#djDebug i, +#djDebug center, +#djDebug dl, +#djDebug dt, +#djDebug dd, +#djDebug ol, +#djDebug ul, +#djDebug li, +#djDebug fieldset, +#djDebug form, +#djDebug label, +#djDebug legend, +#djDebug table, +#djDebug caption, +#djDebug tbody, +#djDebug tfoot, +#djDebug thead, +#djDebug tr, +#djDebug th, +#djDebug td, +#djDebug summary, +#djDebug button { + margin: 0; + padding: 0; + min-width: auto; + width: auto; + min-height: auto; + height: auto; + border: 0; + outline: 0; + font-size: 12px; + line-height: 1.5em; + color: var(--djdt-font-color); + vertical-align: baseline; + background-color: transparent; + font-family: var(--djdt-font-family-primary); + text-align: left; + text-shadow: none; + white-space: normal; + transition: none; +} + +#djDebug button { + background-color: #eee; + background-image: linear-gradient(to bottom, #eee, #cccccc); + border: 1px solid var(--djdt-button-border-color); + border-bottom: 1px solid #bbb; + border-radius: 3px; + color: #333; + line-height: 1; + padding: 0 8px; + text-align: center; + text-shadow: 0 1px 0 #eee; +} + +#djDebug button:hover { + background-color: #ddd; + background-image: linear-gradient(to bottom, #ddd, #bbb); + border-color: #bbb; + border-bottom-color: #999; + cursor: pointer; + text-shadow: 0 1px 0 #ddd; +} + +#djDebug button:active { + border: 1px solid #aaa; + border-bottom: 1px solid #888; + box-shadow: + inset 0 0 5px 2px #aaa, + 0 1px 0 0 #eee; +} + +#djDebug #djDebugToolbar { + background-color: #111; + width: 220px; + z-index: 100000000; + position: fixed; + top: 0; + bottom: 0; + right: 0; + opacity: 0.9; + overflow-y: auto; +} + +#djDebug #djDebugToolbar small { + color: #999; +} + +#djDebug #djDebugToolbar ul { + margin: 0; + padding: 0; + list-style: none; +} + +#djDebug #djDebugToolbar li { + border-bottom: 1px solid #222; + color: #fff; + display: block; + font-weight: bold; + float: none; + margin: 0; + padding: 0; + position: relative; + width: auto; +} + +#djDebug #djDebugToolbar input[type="checkbox"] { + float: right; + margin: 10px; +} + +#djDebug #djDebugToolbar li > a, +#djDebug #djDebugToolbar li > div.djdt-contentless { + font-weight: normal; + font-style: normal; + text-decoration: none; + display: block; + font-size: 16px; + padding: 7px 10px 8px 25px; + color: #fff; +} +#djDebug #djDebugToolbar li > div.djdt-disabled { + font-style: italic; + color: #999; +} + +#djDebug #djDebugToolbar li a:hover { + color: #111; + background-color: #ffc; +} + +#djDebug #djDebugToolbar li.djdt-active { + background: #333; +} + +#djDebug #djDebugToolbar li.djdt-active:before { + content: "▶"; + font-family: var(--djdt-font-family-primary); + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + color: #eee; + font-size: 150%; +} + +#djDebug #djDebugToolbar li.djdt-active a:hover { + color: #b36a60; + background-color: transparent; +} + +#djDebug #djDebugToolbar li small { + font-size: 12px; + color: #999; + font-style: normal; + text-decoration: none; +} + +#djDebug #djDebugToolbarHandle { + position: fixed; + transform: translateY(-100%) rotate(-90deg); + transform-origin: right bottom; + background-color: #fff; + border: 1px solid #111; + border-bottom: 0; + top: 0; + right: 0; + z-index: 100000000; + opacity: 0.75; +} + +#djDebug #djShowToolBarButton { + padding: 0 5px; + border: 4px solid #fff; + border-bottom-width: 0; + color: #fff; + font-size: 22px; + font-weight: bold; + background: #000; + opacity: 0.6; +} + +#djDebug #djShowToolBarButton:hover { + background-color: #111; + border-color: #ffe761; + cursor: move; + opacity: 1; +} + +#djDebug #djShowToolBarD { + color: #cf9; + font-size: 22px; +} + +#djDebug #djShowToolBarJ { + color: #cf9; + font-size: 16px; +} + +#djDebug pre, +#djDebug code { + display: block; + font-family: var(--djdt-font-family-monospace); + overflow: auto; +} + +#djDebug code { + font-size: 12px; + white-space: pre; +} + +#djDebug pre { + white-space: pre-wrap; + color: var(--djdt-pre-text-color); + border: 1px solid var(--djdt-pre-border-color); + border-collapse: collapse; + background-color: var(--djdt-background-color); + padding: 2px 3px; + margin-bottom: 3px; +} + +#djDebug .djdt-panelContent { + position: fixed; + margin: 0; + top: 0; + right: 220px; + bottom: 0; + left: 0px; + background-color: var(--djdt-panel-content-background-color); + color: #666; + z-index: 100000000; +} + +#djDebug .djdt-panelContent > div { + border-bottom: 1px solid #ddd; +} + +#djDebug .djDebugPanelTitle { + position: absolute; + background-color: var(--djdt-panel-title-background-color); + color: #666; + padding-left: 20px; + top: 0; + right: 0; + left: 0; + height: 50px; +} + +#djDebug .djDebugPanelTitle code { + display: inline; + font-size: inherit; +} + +#djDebug .djDebugPanelContent { + position: absolute; + top: 50px; + right: 0; + bottom: 0; + left: 0; + height: auto; + padding: 5px 0 0 20px; +} + +#djDebug .djDebugPanelContent .djdt-loader { + margin: 80px auto; + border: 6px solid white; + border-radius: 50%; + border-top: 6px solid #ffe761; + width: 38px; + height: 38px; + animation: spin 2s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +#djDebug .djDebugPanelContent .djdt-scroll { + height: 100%; + overflow: auto; + display: block; + padding: 0 10px 0 0; +} + +#djDebug h3 { + font-size: 24px; + font-weight: normal; + line-height: 50px; +} + +#djDebug h4 { + font-size: 20px; + font-weight: bold; + margin-top: 0.8em; +} + +#djDebug .djdt-panelContent table { + border: 1px solid var(--djdt-table-border-color); + border-collapse: collapse; + width: 100%; + background-color: var(--djdt-panel-content-table-background-color); + display: table; + margin-top: 0.8em; + overflow: auto; +} +#djDebug .djdt-panelContent tbody > tr:nth-child(odd):not(.djdt-highlighted) { + background-color: var(--djdt-panel-content-table-strip-background-color); +} +#djDebug .djdt-panelContent tbody td, +#djDebug .djdt-panelContent tbody th { + vertical-align: top; + padding: 2px 3px; +} +#djDebug .djdt-panelContent tbody td.djdt-time { + text-align: center; +} + +#djDebug .djdt-panelContent thead th { + padding: 1px 6px 1px 3px; + text-align: left; + font-weight: bold; + font-size: 14px; + white-space: nowrap; +} +#djDebug .djdt-panelContent tbody th { + width: 12em; + text-align: right; + color: #666; + padding-right: 0.5em; +} + +#djDebug .djTemplateContext { + background-color: var(--djdt-background-color); +} + +#djDebug .djdt-panelContent .djDebugClose { + position: absolute; + top: 4px; + right: 15px; + line-height: 16px; + border: 6px solid #ddd; + border-radius: 50%; + background: #fff; + color: #ddd; + font-weight: 900; + font-size: 20px; + height: 36px; + width: 36px; + padding: 0 0 5px; + box-sizing: border-box; + display: grid; + place-items: center; +} + +#djDebug .djdt-panelContent .djDebugClose:hover { + background: #c0695d; +} + +#djDebug .djdt-panelContent dt, +#djDebug .djdt-panelContent dd { + display: block; +} + +#djDebug .djdt-panelContent dt { + margin-top: 0.75em; +} + +#djDebug .djdt-panelContent dd { + margin-left: 10px; +} + +#djDebug a.toggleTemplate { + padding: 4px; + background-color: var(--djdt-toggle-template-background-color); + border-radius: 3px; +} + +#djDebug a.toggleTemplate:hover { + padding: 4px; + background-color: #444; + color: #ffe761; + border-radius: 3px; +} + +#djDebug .djDebugCollapsed { + color: var(--djdt-sql-font-color); +} + +#djDebug .djDebugUncollapsed { + color: var(--djdt-sql-font-color); +} + +#djDebug .djUnselected { + display: none; +} + +#djDebug tr.djSelected { + display: table-row; +} + +#djDebug .djDebugSql { + overflow-wrap: anywhere; +} + +#djDebug .djSQLDetailsDiv tbody th { + text-align: left; +} + +#djDebug span.djDebugLineChart { + background-color: #777; + height: 3px; + position: absolute; + bottom: 0; + top: 0; + left: 0; + display: block; + z-index: 1000000001; +} +#djDebug span.djDebugLineChartWarning { + background-color: #900; +} + +#djDebug .highlight { + color: var(--djdt-font-color); +} +#djDebug .highlight .err { + color: var(--djdt-font-color); +} /* Error */ + +/* +Styles for pygments HTMLFormatter + +- This should match debug_toolbar/panels/templates/views.py::template_source +- Each line needs to be prefixed with #djDebug .highlight as well. +- The .w definition needs to include: + white-space: pre-wrap + +To regenerate: + + from pygments.formatters import HtmlFormatter + print(HtmlFormatter(wrapcode=True).get_style_defs()) + */ +#djDebug[data-theme="light"] .highlight pre { + line-height: 125%; +} +#djDebug[data-theme="light"] .highlight td.linenos .normal { + color: inherit; + background-color: transparent; + padding-left: 5px; + padding-right: 5px; +} +#djDebug[data-theme="light"] .highlight span.linenos { + color: inherit; + background-color: transparent; + padding-left: 5px; + padding-right: 5px; +} +#djDebug[data-theme="light"] .highlight td.linenos .special { + color: #000000; + background-color: #ffffc0; + padding-left: 5px; + padding-right: 5px; +} +#djDebug[data-theme="light"] .highlight span.linenos.special { + color: #000000; + background-color: #ffffc0; + padding-left: 5px; + padding-right: 5px; +} +#djDebug[data-theme="light"] .highlight .hll { + background-color: #ffffcc; +} +#djDebug[data-theme="light"] .highlight .c { + color: #3d7b7b; + font-style: italic; +} /* Comment */ +#djDebug[data-theme="light"] .highlight .err { + border: 1px solid #ff0000; +} /* Error */ +#djDebug[data-theme="light"] .highlight .k { + color: #008000; + font-weight: bold; +} /* Keyword */ +#djDebug[data-theme="light"] .highlight .o { + color: #666666; +} /* Operator */ +#djDebug[data-theme="light"] .highlight .ch { + color: #3d7b7b; + font-style: italic; +} /* Comment.Hashbang */ +#djDebug[data-theme="light"] .highlight .cm { + color: #3d7b7b; + font-style: italic; +} /* Comment.Multiline */ +#djDebug[data-theme="light"] .highlight .cp { + color: #9c6500; +} /* Comment.Preproc */ +#djDebug[data-theme="light"] .highlight .cpf { + color: #3d7b7b; + font-style: italic; +} /* Comment.PreprocFile */ +#djDebug[data-theme="light"] .highlight .c1 { + color: #3d7b7b; + font-style: italic; +} /* Comment.Single */ +#djDebug[data-theme="light"] .highlight .cs { + color: #3d7b7b; + font-style: italic; +} /* Comment.Special */ +#djDebug[data-theme="light"] .highlight .gd { + color: #a00000; +} /* Generic.Deleted */ +#djDebug[data-theme="light"] .highlight .ge { + font-style: italic; +} /* Generic.Emph */ +#djDebug[data-theme="light"] .highlight .ges { + font-weight: bold; + font-style: italic; +} /* Generic.EmphStrong */ +#djDebug[data-theme="light"] .highlight .gr { + color: #e40000; +} /* Generic.Error */ +#djDebug[data-theme="light"] .highlight .gh { + color: #000080; + font-weight: bold; +} /* Generic.Heading */ +#djDebug[data-theme="light"] .highlight .gi { + color: #008400; +} /* Generic.Inserted */ +#djDebug[data-theme="light"] .highlight .go { + color: #717171; +} /* Generic.Output */ +#djDebug[data-theme="light"] .highlight .gp { + color: #000080; + font-weight: bold; +} /* Generic.Prompt */ +#djDebug[data-theme="light"] .highlight .gs { + font-weight: bold; +} /* Generic.Strong */ +#djDebug[data-theme="light"] .highlight .gu { + color: #800080; + font-weight: bold; +} /* Generic.Subheading */ +#djDebug[data-theme="light"] .highlight .gt { + color: #0044dd; +} /* Generic.Traceback */ +#djDebug[data-theme="light"] .highlight .kc { + color: #008000; + font-weight: bold; +} /* Keyword.Constant */ +#djDebug[data-theme="light"] .highlight .kd { + color: #008000; + font-weight: bold; +} /* Keyword.Declaration */ +#djDebug[data-theme="light"] .highlight .kn { + color: #008000; + font-weight: bold; +} /* Keyword.Namespace */ +#djDebug[data-theme="light"] .highlight .kp { + color: #008000; +} /* Keyword.Pseudo */ +#djDebug[data-theme="light"] .highlight .kr { + color: #008000; + font-weight: bold; +} /* Keyword.Reserved */ +#djDebug[data-theme="light"] .highlight .kt { + color: #b00040; +} /* Keyword.Type */ +#djDebug[data-theme="light"] .highlight .m { + color: #666666; +} /* Literal.Number */ +#djDebug[data-theme="light"] .highlight .s { + color: #ba2121; +} /* Literal.String */ +#djDebug[data-theme="light"] .highlight .na { + color: #687822; +} /* Name.Attribute */ +#djDebug[data-theme="light"] .highlight .nb { + color: #008000; +} /* Name.Builtin */ +#djDebug[data-theme="light"] .highlight .nc { + color: #0000ff; + font-weight: bold; +} /* Name.Class */ +#djDebug[data-theme="light"] .highlight .no { + color: #880000; +} /* Name.Constant */ +#djDebug[data-theme="light"] .highlight .nd { + color: #aa22ff; +} /* Name.Decorator */ +#djDebug[data-theme="light"] .highlight .ni { + color: #717171; + font-weight: bold; +} /* Name.Entity */ +#djDebug[data-theme="light"] .highlight .ne { + color: #cb3f38; + font-weight: bold; +} /* Name.Exception */ +#djDebug[data-theme="light"] .highlight .nf { + color: #0000ff; +} /* Name.Function */ +#djDebug[data-theme="light"] .highlight .nl { + color: #767600; +} /* Name.Label */ +#djDebug[data-theme="light"] .highlight .nn { + color: #0000ff; + font-weight: bold; +} /* Name.Namespace */ +#djDebug[data-theme="light"] .highlight .nt { + color: #008000; + font-weight: bold; +} /* Name.Tag */ +#djDebug[data-theme="light"] .highlight .nv { + color: #19177c; +} /* Name.Variable */ +#djDebug[data-theme="light"] .highlight .ow { + color: #aa22ff; + font-weight: bold; +} /* Operator.Word */ +#djDebug[data-theme="light"] .highlight .w { + color: #bbbbbb; + white-space: pre-wrap; +} /* Text.Whitespace */ +#djDebug[data-theme="light"] .highlight .mb { + color: #666666; +} /* Literal.Number.Bin */ +#djDebug[data-theme="light"] .highlight .mf { + color: #666666; +} /* Literal.Number.Float */ +#djDebug[data-theme="light"] .highlight .mh { + color: #666666; +} /* Literal.Number.Hex */ +#djDebug[data-theme="light"] .highlight .mi { + color: #666666; +} /* Literal.Number.Integer */ +#djDebug[data-theme="light"] .highlight .mo { + color: #666666; +} /* Literal.Number.Oct */ +#djDebug[data-theme="light"] .highlight .sa { + color: #ba2121; +} /* Literal.String.Affix */ +#djDebug[data-theme="light"] .highlight .sb { + color: #ba2121; +} /* Literal.String.Backtick */ +#djDebug[data-theme="light"] .highlight .sc { + color: #ba2121; +} /* Literal.String.Char */ +#djDebug[data-theme="light"] .highlight .dl { + color: #ba2121; +} /* Literal.String.Delimiter */ +#djDebug[data-theme="light"] .highlight .sd { + color: #ba2121; + font-style: italic; +} /* Literal.String.Doc */ +#djDebug[data-theme="light"] .highlight .s2 { + color: #ba2121; +} /* Literal.String.Double */ +#djDebug[data-theme="light"] .highlight .se { + color: #aa5d1f; + font-weight: bold; +} /* Literal.String.Escape */ +#djDebug[data-theme="light"] .highlight .sh { + color: #ba2121; +} /* Literal.String.Heredoc */ +#djDebug[data-theme="light"] .highlight .si { + color: #a45a77; + font-weight: bold; +} /* Literal.String.Interpol */ +#djDebug[data-theme="light"] .highlight .sx { + color: #008000; +} /* Literal.String.Other */ +#djDebug[data-theme="light"] .highlight .sr { + color: #a45a77; +} /* Literal.String.Regex */ +#djDebug[data-theme="light"] .highlight .s1 { + color: #ba2121; +} /* Literal.String.Single */ +#djDebug[data-theme="light"] .highlight .ss { + color: #19177c; +} /* Literal.String.Symbol */ +#djDebug[data-theme="light"] .highlight .bp { + color: #008000; +} /* Name.Builtin.Pseudo */ +#djDebug[data-theme="light"] .highlight .fm { + color: #0000ff; +} /* Name.Function.Magic */ +#djDebug[data-theme="light"] .highlight .vc { + color: #19177c; +} /* Name.Variable.Class */ +#djDebug[data-theme="light"] .highlight .vg { + color: #19177c; +} /* Name.Variable.Global */ +#djDebug[data-theme="light"] .highlight .vi { + color: #19177c; +} /* Name.Variable.Instance */ +#djDebug[data-theme="light"] .highlight .vm { + color: #19177c; +} /* Name.Variable.Magic */ +#djDebug[data-theme="light"] .highlight .il { + color: #666666; +} /* Literal.Number.Integer.Long */ + +#djDebug[data-theme="dark"] .highlight .hll { + background-color: #f1fa8c; +} +#djDebug[data-theme="dark"] .highlight { + background: #282a36; + color: #f8f8f2; +} +#djDebug[data-theme="dark"] .highlight .c { + color: #6272a4; +} /* Comment */ +#djDebug[data-theme="dark"] .highlight .err { + color: #f8f8f2; +} /* Error */ +#djDebug[data-theme="dark"] .highlight .g { + color: #f8f8f2; +} /* Generic */ +#djDebug[data-theme="dark"] .highlight .k { + color: #ff79c6; +} /* Keyword */ +#djDebug[data-theme="dark"] .highlight .l { + color: #f8f8f2; +} /* Literal */ +#djDebug[data-theme="dark"] .highlight .n { + color: #f8f8f2; +} /* Name */ +#djDebug[data-theme="dark"] .highlight .o { + color: #ff79c6; +} /* Operator */ +#djDebug[data-theme="dark"] .highlight .x { + color: #f8f8f2; +} /* Other */ +#djDebug[data-theme="dark"] .highlight .p { + color: #f8f8f2; +} /* Punctuation */ +#djDebug[data-theme="dark"] .highlight .ch { + color: #6272a4; +} /* Comment.Hashbang */ +#djDebug[data-theme="dark"] .highlight .cm { + color: #6272a4; +} /* Comment.Multiline */ +#djDebug[data-theme="dark"] .highlight .cp { + color: #ff79c6; +} /* Comment.Preproc */ +#djDebug[data-theme="dark"] .highlight .cpf { + color: #6272a4; +} /* Comment.PreprocFile */ +#djDebug[data-theme="dark"] .highlight .c1 { + color: #6272a4; +} /* Comment.Single */ +#djDebug[data-theme="dark"] .highlight .cs { + color: #6272a4; +} /* Comment.Special */ +#djDebug[data-theme="dark"] .highlight .gd { + color: #8b080b; +} /* Generic.Deleted */ +#djDebug[data-theme="dark"] .highlight .ge { + color: #f8f8f2; + text-decoration: underline; +} /* Generic.Emph */ +#djDebug[data-theme="dark"] .highlight .gr { + color: #f8f8f2; +} /* Generic.Error */ +#djDebug[data-theme="dark"] .highlight .gh { + color: #f8f8f2; + font-weight: bold; +} /* Generic.Heading */ +#djDebug[data-theme="dark"] .highlight .gi { + color: #f8f8f2; + font-weight: bold; +} /* Generic.Inserted */ +#djDebug[data-theme="dark"] .highlight .go { + color: #44475a; +} /* Generic.Output */ +#djDebug[data-theme="dark"] .highlight .gp { + color: #f8f8f2; +} /* Generic.Prompt */ +#djDebug[data-theme="dark"] .highlight .gs { + color: #f8f8f2; +} /* Generic.Strong */ +#djDebug[data-theme="dark"] .highlight .gu { + color: #f8f8f2; + font-weight: bold; +} /* Generic.Subheading */ +#djDebug[data-theme="dark"] .highlight .gt { + color: #f8f8f2; +} /* Generic.Traceback */ +#djDebug[data-theme="dark"] .highlight .kc { + color: #ff79c6; +} /* Keyword.Constant */ +#djDebug[data-theme="dark"] .highlight .kd { + color: #8be9fd; + font-style: italic; +} /* Keyword.Declaration */ +#djDebug[data-theme="dark"] .highlight .kn { + color: #ff79c6; +} /* Keyword.Namespace */ +#djDebug[data-theme="dark"] .highlight .kp { + color: #ff79c6; +} /* Keyword.Pseudo */ +#djDebug[data-theme="dark"] .highlight .kr { + color: #ff79c6; +} /* Keyword.Reserved */ +#djDebug[data-theme="dark"] .highlight .kt { + color: #8be9fd; +} /* Keyword.Type */ +#djDebug[data-theme="dark"] .highlight .ld { + color: #f8f8f2; +} /* Literal.Date */ +#djDebug[data-theme="dark"] .highlight .m { + color: #bd93f9; +} /* Literal.Number */ +#djDebug[data-theme="dark"] .highlight .s { + color: #f1fa8c; +} /* Literal.String */ +#djDebug[data-theme="dark"] .highlight .na { + color: #50fa7b; +} /* Name.Attribute */ +#djDebug[data-theme="dark"] .highlight .nb { + color: #8be9fd; + font-style: italic; +} /* Name.Builtin */ +#djDebug[data-theme="dark"] .highlight .nc { + color: #50fa7b; +} /* Name.Class */ +#djDebug[data-theme="dark"] .highlight .no { + color: #f8f8f2; +} /* Name.Constant */ +#djDebug[data-theme="dark"] .highlight .nd { + color: #f8f8f2; +} /* Name.Decorator */ +#djDebug[data-theme="dark"] .highlight .ni { + color: #f8f8f2; +} /* Name.Entity */ +#djDebug[data-theme="dark"] .highlight .ne { + color: #f8f8f2; +} /* Name.Exception */ +#djDebug[data-theme="dark"] .highlight .nf { + color: #50fa7b; +} /* Name.Function */ +#djDebug[data-theme="dark"] .highlight .nl { + color: #8be9fd; + font-style: italic; +} /* Name.Label */ +#djDebug[data-theme="dark"] .highlight .nn { + color: #f8f8f2; +} /* Name.Namespace */ +#djDebug[data-theme="dark"] .highlight .nx { + color: #f8f8f2; +} /* Name.Other */ +#djDebug[data-theme="dark"] .highlight .py { + color: #f8f8f2; +} /* Name.Property */ +#djDebug[data-theme="dark"] .highlight .nt { + color: #ff79c6; +} /* Name.Tag */ +#djDebug[data-theme="dark"] .highlight .nv { + color: #8be9fd; + font-style: italic; +} /* Name.Variable */ +#djDebug[data-theme="dark"] .highlight .ow { + color: #ff79c6; +} /* Operator.Word */ +#djDebug[data-theme="dark"] .highlight .w { + color: #f8f8f2; +} /* Text.Whitespace */ +#djDebug[data-theme="dark"] .highlight .mb { + color: #bd93f9; +} /* Literal.Number.Bin */ +#djDebug[data-theme="dark"] .highlight .mf { + color: #bd93f9; +} /* Literal.Number.Float */ +#djDebug[data-theme="dark"] .highlight .mh { + color: #bd93f9; +} /* Literal.Number.Hex */ +#djDebug[data-theme="dark"] .highlight .mi { + color: #bd93f9; +} /* Literal.Number.Integer */ +#djDebug[data-theme="dark"] .highlight .mo { + color: #bd93f9; +} /* Literal.Number.Oct */ +#djDebug[data-theme="dark"] .highlight .sa { + color: #f1fa8c; +} /* Literal.String.Affix */ +#djDebug[data-theme="dark"] .highlight .sb { + color: #f1fa8c; +} /* Literal.String.Backtick */ +#djDebug[data-theme="dark"] .highlight .sc { + color: #f1fa8c; +} /* Literal.String.Char */ +#djDebug[data-theme="dark"] .highlight .dl { + color: #f1fa8c; +} /* Literal.String.Delimiter */ +#djDebug[data-theme="dark"] .highlight .sd { + color: #f1fa8c; +} /* Literal.String.Doc */ +#djDebug[data-theme="dark"] .highlight .s2 { + color: #f1fa8c; +} /* Literal.String.Double */ +#djDebug[data-theme="dark"] .highlight .se { + color: #f1fa8c; +} /* Literal.String.Escape */ +#djDebug[data-theme="dark"] .highlight .sh { + color: #f1fa8c; +} /* Literal.String.Heredoc */ +#djDebug[data-theme="dark"] .highlight .si { + color: #f1fa8c; +} /* Literal.String.Interpol */ +#djDebug[data-theme="dark"] .highlight .sx { + color: #f1fa8c; +} /* Literal.String.Other */ +#djDebug[data-theme="dark"] .highlight .sr { + color: #f1fa8c; +} /* Literal.String.Regex */ +#djDebug[data-theme="dark"] .highlight .s1 { + color: #f1fa8c; +} /* Literal.String.Single */ +#djDebug[data-theme="dark"] .highlight .ss { + color: #f1fa8c; +} /* Literal.String.Symbol */ +#djDebug[data-theme="dark"] .highlight .bp { + color: #f8f8f2; + font-style: italic; +} /* Name.Builtin.Pseudo */ +#djDebug[data-theme="dark"] .highlight .fm { + color: #50fa7b; +} /* Name.Function.Magic */ +#djDebug[data-theme="dark"] .highlight .vc { + color: #8be9fd; + font-style: italic; +} /* Name.Variable.Class */ +#djDebug[data-theme="dark"] .highlight .vg { + color: #8be9fd; + font-style: italic; +} /* Name.Variable.Global */ +#djDebug[data-theme="dark"] .highlight .vi { + color: #8be9fd; + font-style: italic; +} /* Name.Variable.Instance */ +#djDebug[data-theme="dark"] .highlight .vm { + color: #8be9fd; + font-style: italic; +} /* Name.Variable.Magic */ +#djDebug[data-theme="dark"] .highlight .il { + color: #bd93f9; +} /* Literal.Number.Integer.Long */ + +#djDebug svg.djDebugLineChart { + width: 100%; + height: 1.5em; +} + +#djDebug svg.djDebugLineChartWarning rect { + fill: #900; +} + +#djDebug svg.djDebugLineChartInTransaction rect { + fill: #d3ff82; +} +#djDebug svg.djDebugLineChart line { + stroke: #94b24d; +} + +#djDebug .djDebugRowWarning .djdt-time { + color: red; +} +#djDebug .djdt-panelContent table .djdt-toggle { + width: 14px; + padding-top: 3px; +} +#djDebug .djdt-panelContent table .djdt-actions { + min-width: 70px; + white-space: nowrap; +} +#djDebug .djdt-color:after { + content: "\00a0"; +} +#djDebug .djToggleSwitch { + box-sizing: content-box; + padding: 0; + border: 1px solid #999; + border-radius: 0; + width: 12px; + color: #777; + background: linear-gradient(to bottom, #fff, #dcdcdc); +} +#djDebug .djNoToggleSwitch { + height: 14px; + width: 14px; + display: inline-block; +} + +#djDebug .djSQLDetailsDiv { + margin-top: 0.8em; +} + +#djDebug .djdt-stack span { + color: var(--djdt-stack-span-color); + font-weight: bold; +} +#djDebug .djdt-stack span.djdt-path, +#djDebug .djdt-stack pre.djdt-locals, +#djDebug .djdt-stack pre.djdt-locals span { + color: var(--djdt-path-and-locals); + font-weight: normal; +} +#djDebug .djdt-stack span.djdt-code { + font-weight: normal; +} +#djDebug .djdt-stack pre.djdt-locals { + margin: 0 27px 27px 27px; +} +#djDebug .djdt-raw { + background-color: #fff; + border: 1px solid var(--djdt-raw-border-color); + margin-top: 0.8em; + padding: 5px; + white-space: pre-wrap; +} + +#djDebug .djdt-width-20 { + width: 20%; +} +#djDebug .djdt-width-30 { + width: 30%; +} +#djDebug .djdt-width-60 { + width: 60%; +} +#djDebug .djdt-max-height-100 { + max-height: 100%; +} +#djDebug .djdt-highlighted { + background-color: var(--djdt--highlighted-background-color); +} +#djDebug tr.djdt-highlighted.djdt-profile-row { + background-color: #ffc; +} +#djDebug tr.djdt-highlighted.djdt-profile-row:nth-child(2n + 1) { + background-color: #dd9; +} +@keyframes djdt-flash-new { + from { + background-color: green; + } + to { + background-color: inherit; + } +} +#djDebug .flash-new { + animation: djdt-flash-new 1s; +} + +.djdt-hidden { + display: none; +} + +#djDebug #djDebugToolbar a#djToggleThemeButton { + display: flex; + align-items: center; + cursor: pointer; +} +#djToggleThemeButton > svg { + margin-left: auto; +} +#djDebug[data-user-theme="light"] #djToggleThemeButton svg.theme-light, +#djDebug[data-user-theme="dark"] #djToggleThemeButton svg.theme-dark, +#djDebug[data-user-theme="auto"] #djToggleThemeButton svg.theme-auto { + display: block; + height: 1rem; + width: 1rem; +} diff --git a/staticfiles/debug_toolbar/js/history.js b/staticfiles/debug_toolbar/js/history.js new file mode 100644 index 00000000..c2644eca --- /dev/null +++ b/staticfiles/debug_toolbar/js/history.js @@ -0,0 +1,108 @@ +import { $$, ajaxForm, replaceToolbarState } from "./utils.js"; + +const djDebug = document.getElementById("djDebug"); + +function difference(setA, setB) { + const _difference = new Set(setA); + for (const elem of setB) { + _difference.delete(elem); + } + return _difference; +} + +/** + * Create an array of dataset properties from a NodeList. + */ +function pluckData(nodes, key) { + return [...nodes].map((obj) => obj.dataset[key]); +} + +function refreshHistory() { + const formTarget = djDebug.querySelector(".refreshHistory"); + const container = document.getElementById("djdtHistoryRequests"); + const oldIds = new Set( + pluckData( + container.querySelectorAll("tr[data-request-id]"), + "requestId" + ) + ); + + ajaxForm(formTarget) + .then((data) => { + // Remove existing rows first then re-populate with new data + for (const node of container.querySelectorAll( + "tr[data-request-id]" + )) { + node.remove(); + } + for (const request of data.requests) { + container.innerHTML = request.content + container.innerHTML; + } + }) + .then(() => { + const allIds = new Set( + pluckData( + container.querySelectorAll("tr[data-request-id]"), + "requestId" + ) + ); + const newIds = difference(allIds, oldIds); + const lastRequestId = newIds.values().next().value; + return { + allIds, + newIds, + lastRequestId, + }; + }) + .then((refreshInfo) => { + for (const newId of refreshInfo.newIds) { + const row = container.querySelector( + `tr[data-request-id="${newId}"]` + ); + row.classList.add("flash-new"); + } + setTimeout(() => { + for (const row of container.querySelectorAll( + "tr[data-request-id]" + )) { + row.classList.remove("flash-new"); + } + }, 2000); + }); +} + +function switchHistory(newRequestId) { + const formTarget = djDebug.querySelector( + `.switchHistory[data-request-id='${newRequestId}']` + ); + const tbody = formTarget.closest("tbody"); + + const highlighted = tbody.querySelector(".djdt-highlighted"); + if (highlighted) { + highlighted.classList.remove("djdt-highlighted"); + } + formTarget.closest("tr").classList.add("djdt-highlighted"); + + ajaxForm(formTarget).then((data) => { + if (Object.keys(data).length === 0) { + const container = document.getElementById("djdtHistoryRequests"); + container.querySelector( + `button[data-request-id="${newRequestId}"]` + ).innerHTML = "Switch [EXPIRED]"; + } + replaceToolbarState(newRequestId, data); + }); +} + +$$.on(djDebug, "click", ".switchHistory", function (event) { + event.preventDefault(); + switchHistory(this.dataset.requestId); +}); + +$$.on(djDebug, "click", ".refreshHistory", (event) => { + event.preventDefault(); + refreshHistory(); +}); +// We don't refresh the whole toolbar each fetch or ajax request, +// so we need to refresh the history when we open the panel +$$.onPanelRender(djDebug, "HistoryPanel", refreshHistory); diff --git a/staticfiles/debug_toolbar/js/redirect.js b/staticfiles/debug_toolbar/js/redirect.js new file mode 100644 index 00000000..6976de4b --- /dev/null +++ b/staticfiles/debug_toolbar/js/redirect.js @@ -0,0 +1 @@ +document.getElementById("redirect_to").focus(); diff --git a/staticfiles/debug_toolbar/js/timer.js b/staticfiles/debug_toolbar/js/timer.js new file mode 100644 index 00000000..a01dbb2d --- /dev/null +++ b/staticfiles/debug_toolbar/js/timer.js @@ -0,0 +1,82 @@ +import { $$ } from "./utils.js"; + +function insertBrowserTiming() { + const timingOffset = performance.timing.navigationStart; + const timingEnd = performance.timing.loadEventEnd; + const totalTime = timingEnd - timingOffset; + function getLeft(stat) { + if (totalTime !== 0) { + return ( + ((performance.timing[stat] - timingOffset) / totalTime) * 100.0 + ); + } + return 0; + } + function getCSSWidth(stat, endStat) { + let width = 0; + if (totalTime !== 0) { + width = + ((performance.timing[endStat] - performance.timing[stat]) / + totalTime) * + 100.0; + } + const denominator = 100.0 - getLeft(stat); + if (denominator !== 0) { + // Calculate relative percent (same as sql panel logic) + width = (100.0 * width) / denominator; + } else { + width = 0; + } + return width < 1 ? "2px" : `${width}%`; + } + function addRow(tbody, stat, endStat) { + const row = document.createElement("tr"); + const elapsed = performance.timing[stat] - timingOffset; + if (endStat) { + const duration = + performance.timing[endStat] - performance.timing[stat]; + // Render a start through end bar + row.innerHTML = ` +${stat.replace("Start", "")} + +${elapsed} (+${duration}) +`; + row.querySelector("rect").setAttribute( + "width", + getCSSWidth(stat, endStat) + ); + } else { + // Render a point in time + row.innerHTML = ` +${stat} + +${elapsed} +`; + row.querySelector("rect").setAttribute("width", 2); + } + row.querySelector("rect").setAttribute("x", getLeft(stat)); + tbody.appendChild(row); + } + + const browserTiming = document.getElementById("djDebugBrowserTiming"); + // Determine if the browser timing section has already been rendered. + if (browserTiming.classList.contains("djdt-hidden")) { + const tbody = document.getElementById("djDebugBrowserTimingTableBody"); + // This is a reasonably complete and ordered set of timing periods (2 params) and events (1 param) + addRow(tbody, "domainLookupStart", "domainLookupEnd"); + addRow(tbody, "connectStart", "connectEnd"); + addRow(tbody, "requestStart", "responseEnd"); // There is no requestEnd + addRow(tbody, "responseStart", "responseEnd"); + addRow(tbody, "domLoading", "domComplete"); // Spans the events below + addRow(tbody, "domInteractive"); + addRow(tbody, "domContentLoadedEventStart", "domContentLoadedEventEnd"); + addRow(tbody, "loadEventStart", "loadEventEnd"); + browserTiming.classList.remove("djdt-hidden"); + } +} + +const djDebug = document.getElementById("djDebug"); +// Insert the browser timing now since it's possible for this +// script to miss the initial panel load event. +insertBrowserTiming(); +$$.onPanelRender(djDebug, "TimerPanel", insertBrowserTiming); diff --git a/staticfiles/debug_toolbar/js/toolbar.js b/staticfiles/debug_toolbar/js/toolbar.js new file mode 100644 index 00000000..60984220 --- /dev/null +++ b/staticfiles/debug_toolbar/js/toolbar.js @@ -0,0 +1,403 @@ +import { $$, ajax, debounce, replaceToolbarState } from "./utils.js"; + +function onKeyDown(event) { + if (event.keyCode === 27) { + djdt.hideOneLevel(); + } +} + +function getDebugElement() { + // Fetch the debug element from the DOM. + // This is used to avoid writing the element's id + // everywhere the element is being selected. A fixed reference + // to the element should be avoided because the entire DOM could + // be reloaded such as via HTMX boosting. + return document.getElementById("djDebug"); +} + +const djdt = { + handleDragged: false, + needUpdateOnFetch: false, + init() { + const djDebug = getDebugElement(); + djdt.needUpdateOnFetch = djDebug.dataset.updateOnFetch === "True"; + $$.on(djDebug, "click", "#djDebugPanelList li a", function (event) { + event.preventDefault(); + if (!this.className) { + return; + } + const panelId = this.className; + const current = document.getElementById(panelId); + if ($$.visible(current)) { + djdt.hidePanels(); + } else { + djdt.hidePanels(); + + $$.show(current); + this.parentElement.classList.add("djdt-active"); + + const inner = current.querySelector( + ".djDebugPanelContent .djdt-scroll" + ); + const requestId = djDebug.dataset.requestId; + if (requestId && inner.children.length === 0) { + const url = new URL( + djDebug.dataset.renderPanelUrl, + window.location + ); + url.searchParams.append("request_id", requestId); + url.searchParams.append("panel_id", panelId); + ajax(url).then((data) => { + inner.previousElementSibling.remove(); // Remove AJAX loader + inner.innerHTML = data.content; + $$.executeScripts(data.scripts); + $$.applyStyles(inner); + djDebug.dispatchEvent( + new CustomEvent("djdt.panel.render", { + detail: { panelId: panelId }, + }) + ); + }); + } else { + djDebug.dispatchEvent( + new CustomEvent("djdt.panel.render", { + detail: { panelId: panelId }, + }) + ); + } + } + }); + $$.on(djDebug, "click", ".djDebugClose", () => { + djdt.hideOneLevel(); + }); + $$.on( + djDebug, + "click", + ".djDebugPanelButton input[type=checkbox]", + function () { + djdt.cookie.set( + this.dataset.cookie, + this.checked ? "on" : "off", + { + path: "/", + expires: 10, + } + ); + } + ); + + // Used by the SQL and template panels + $$.on(djDebug, "click", ".remoteCall", function (event) { + event.preventDefault(); + + let url; + const ajaxData = {}; + + if (this.tagName === "BUTTON") { + const form = this.closest("form"); + url = this.formAction; + ajaxData.method = form.method.toUpperCase(); + ajaxData.body = new FormData(form); + } else if (this.tagName === "A") { + url = this.href; + } + + ajax(url, ajaxData).then((data) => { + const win = document.getElementById("djDebugWindow"); + win.innerHTML = data.content; + $$.show(win); + }); + }); + + // Used by the cache, profiling and SQL panels + $$.on(djDebug, "click", ".djToggleSwitch", function () { + const id = this.dataset.toggleId; + const toggleOpen = "+"; + const toggleClose = "-"; + const openMe = this.textContent === toggleOpen; + const name = this.dataset.toggleName; + const container = document.getElementById(`${name}_${id}`); + for (const el of container.querySelectorAll(".djDebugCollapsed")) { + $$.toggle(el, openMe); + } + for (const el of container.querySelectorAll( + ".djDebugUncollapsed" + )) { + $$.toggle(el, !openMe); + } + for (const el of this.closest( + ".djDebugPanelContent" + ).querySelectorAll(`.djToggleDetails_${id}`)) { + if (openMe) { + el.classList.add("djSelected"); + el.classList.remove("djUnselected"); + this.textContent = toggleClose; + } else { + el.classList.remove("djSelected"); + el.classList.add("djUnselected"); + this.textContent = toggleOpen; + } + const switch_ = el.querySelector(".djToggleSwitch"); + if (switch_) { + switch_.textContent = this.textContent; + } + } + }); + + $$.on(djDebug, "click", "#djHideToolBarButton", (event) => { + event.preventDefault(); + djdt.hideToolbar(); + }); + + $$.on(djDebug, "click", "#djShowToolBarButton", () => { + if (!djdt.handleDragged) { + djdt.showToolbar(); + } + }); + let startPageY; + let baseY; + const handle = document.getElementById("djDebugToolbarHandle"); + function onHandleMove(event) { + // Chrome can send spurious mousemove events, so don't do anything unless the + // cursor really moved. Otherwise, it will be impossible to expand the toolbar + // due to djdt.handleDragged being set to true. + if (djdt.handleDragged || event.pageY !== startPageY) { + let top = baseY + event.pageY; + + if (top < 0) { + top = 0; + } else if (top + handle.offsetHeight > window.innerHeight) { + top = window.innerHeight - handle.offsetHeight; + } + + handle.style.top = `${top}px`; + djdt.handleDragged = true; + } + } + $$.on(djDebug, "mousedown", "#djShowToolBarButton", (event) => { + event.preventDefault(); + startPageY = event.pageY; + baseY = handle.offsetTop - startPageY; + document.addEventListener("mousemove", onHandleMove); + + document.addEventListener( + "mouseup", + (event) => { + document.removeEventListener("mousemove", onHandleMove); + if (djdt.handleDragged) { + event.preventDefault(); + localStorage.setItem("djdt.top", handle.offsetTop); + requestAnimationFrame(() => { + djdt.handleDragged = false; + }); + djdt.ensureHandleVisibility(); + } + }, + { once: true } + ); + }); + + // Make sure the debug element is rendered at least once. + // showToolbar will continue to show it in the future if the + // entire DOM is reloaded. + $$.show(djDebug); + const show = + localStorage.getItem("djdt.show") || djDebug.dataset.defaultShow; + if (show === "true") { + djdt.showToolbar(); + } else { + djdt.hideToolbar(); + } + if (djDebug.dataset.sidebarUrl !== undefined) { + djdt.updateOnAjax(); + } + + const prefersDark = window.matchMedia( + "(prefers-color-scheme: dark)" + ).matches; + const themeList = prefersDark + ? ["auto", "light", "dark"] + : ["auto", "dark", "light"]; + const setTheme = (theme) => { + djDebug.setAttribute( + "data-theme", + theme === "auto" ? (prefersDark ? "dark" : "light") : theme + ); + djDebug.setAttribute("data-user-theme", theme); + }; + + // Updates the theme using user settings + let userTheme = localStorage.getItem("djdt.user-theme") || "auto"; + setTheme(userTheme); + + // Adds the listener to the Theme Toggle Button + $$.on(djDebug, "click", "#djToggleThemeButton", () => { + const index = themeList.indexOf(userTheme); + userTheme = themeList[(index + 1) % themeList.length]; + localStorage.setItem("djdt.user-theme", userTheme); + setTheme(userTheme); + }); + }, + hidePanels() { + const djDebug = getDebugElement(); + $$.hide(document.getElementById("djDebugWindow")); + for (const el of djDebug.querySelectorAll(".djdt-panelContent")) { + $$.hide(el); + } + for (const el of document.querySelectorAll("#djDebugToolbar li")) { + el.classList.remove("djdt-active"); + } + }, + ensureHandleVisibility() { + const handle = document.getElementById("djDebugToolbarHandle"); + // set handle position + const handleTop = Math.min( + localStorage.getItem("djdt.top") || 265, + window.innerHeight - handle.offsetWidth + ); + handle.style.top = `${handleTop}px`; + }, + hideToolbar() { + djdt.hidePanels(); + + $$.hide(document.getElementById("djDebugToolbar")); + + const handle = document.getElementById("djDebugToolbarHandle"); + $$.show(handle); + djdt.ensureHandleVisibility(); + window.addEventListener("resize", djdt.ensureHandleVisibility); + document.removeEventListener("keydown", onKeyDown); + + localStorage.setItem("djdt.show", "false"); + }, + hideOneLevel() { + const win = document.getElementById("djDebugWindow"); + if ($$.visible(win)) { + $$.hide(win); + } else { + const toolbar = document.getElementById("djDebugToolbar"); + if (toolbar.querySelector("li.djdt-active")) { + djdt.hidePanels(); + } else { + djdt.hideToolbar(); + } + } + }, + showToolbar() { + document.addEventListener("keydown", onKeyDown); + $$.show(document.getElementById("djDebug")); + $$.hide(document.getElementById("djDebugToolbarHandle")); + $$.show(document.getElementById("djDebugToolbar")); + localStorage.setItem("djdt.show", "true"); + window.removeEventListener("resize", djdt.ensureHandleVisibility); + }, + updateOnAjax() { + const sidebarUrl = + document.getElementById("djDebug").dataset.sidebarUrl; + const slowjax = debounce(ajax, 200); + + function handleAjaxResponse(requestId) { + const encodedRequestId = encodeURIComponent(requestId); + const dest = `${sidebarUrl}?request_id=${encodedRequestId}`; + slowjax(dest).then((data) => { + if (djdt.needUpdateOnFetch) { + replaceToolbarState(encodedRequestId, data); + } + }); + } + + // Patch XHR / traditional AJAX requests + const origOpen = XMLHttpRequest.prototype.open; + XMLHttpRequest.prototype.open = function (...args) { + this.addEventListener("load", function () { + // Chromium emits a "Refused to get unsafe header" uncatchable warning + // when the header can't be fetched. While it doesn't impede execution + // it's worrisome to developers. + if ( + this.getAllResponseHeaders().indexOf("djdt-request-id") >= 0 + ) { + handleAjaxResponse( + this.getResponseHeader("djdt-request-id") + ); + } + }); + origOpen.apply(this, args); + }; + + const origFetch = window.fetch; + window.fetch = function (...args) { + // Heads up! Before modifying this code, please be aware of the + // possible unhandled errors that might arise from changing this. + // For details, see + // https://github.com/django-commons/django-debug-toolbar/pull/2100 + const promise = origFetch.apply(this, args); + return promise.then((response) => { + if (response.headers.get("djdt-request-id") !== null) { + try { + handleAjaxResponse( + response.headers.get("djdt-request-id") + ); + } catch (err) { + throw new Error( + `"${err.name}" occurred within django-debug-toolbar: ${err.message}` + ); + } + } + return response; + }); + }; + }, + cookie: { + get(key) { + if (!document.cookie.includes(key)) { + return null; + } + + const cookieArray = document.cookie.split("; "); + const cookies = {}; + + for (const e of cookieArray) { + const parts = e.split("="); + cookies[parts[0]] = parts[1]; + } + + return cookies[key]; + }, + set(key, value, options = {}) { + if (typeof options.expires === "number") { + const days = options.expires; + const expires = new Date(); + expires.setDate(expires.setDate() + days); + options.expires = expires; + } + + document.cookie = [ + `${encodeURIComponent(key)}=${String(value)}`, + options.expires + ? `; expires=${options.expires.toUTCString()}` + : "", + options.path ? `; path=${options.path}` : "", + options.domain ? `; domain=${options.domain}` : "", + options.secure ? "; secure" : "", + "samesite" in options + ? `; samesite=${options.samesite}` + : "; samesite=lax", + ].join(""); + + return value; + }, + }, +}; +window.djdt = { + show_toolbar: djdt.showToolbar, + hide_toolbar: djdt.hideToolbar, + init: djdt.init, + close: djdt.hideOneLevel, + cookie: djdt.cookie, +}; + +if (document.readyState !== "loading") { + djdt.init(); +} else { + document.addEventListener("DOMContentLoaded", djdt.init); +} diff --git a/staticfiles/debug_toolbar/js/utils.js b/staticfiles/debug_toolbar/js/utils.js new file mode 100644 index 00000000..9b34f86f --- /dev/null +++ b/staticfiles/debug_toolbar/js/utils.js @@ -0,0 +1,144 @@ +const $$ = { + on(root, eventName, selector, fn) { + root.removeEventListener(eventName, fn); + root.addEventListener(eventName, (event) => { + const target = event.target.closest(selector); + if (root.contains(target)) { + fn.call(target, event); + } + }); + }, + onPanelRender(root, panelId, fn) { + /* + This is a helper function to attach a handler for a `djdt.panel.render` + event of a specific panel. + + root: The container element that the listener should be attached to. + panelId: The Id of the panel. + fn: A function to execute when the event is triggered. + */ + root.addEventListener("djdt.panel.render", (event) => { + if (event.detail.panelId === panelId) { + fn.call(event); + } + }); + }, + show(element) { + element.classList.remove("djdt-hidden"); + }, + hide(element) { + element.classList.add("djdt-hidden"); + }, + toggle(element, value) { + if (value) { + $$.show(element); + } else { + $$.hide(element); + } + }, + visible(element) { + return !element.classList.contains("djdt-hidden"); + }, + executeScripts(scripts) { + for (const script of scripts) { + const el = document.createElement("script"); + el.type = "module"; + el.src = script; + el.async = true; + document.head.appendChild(el); + } + }, + applyStyles(container) { + /* + * Given a container element, apply styles set via data-djdt-styles attribute. + * The format is data-djdt-styles="styleName1:value;styleName2:value2" + * The style names should use the CSSStyleDeclaration camel cased names. + */ + for (const element of container.querySelectorAll( + "[data-djdt-styles]" + )) { + const styles = element.dataset.djdtStyles || ""; + for (const styleText of styles.split(";")) { + const styleKeyPair = styleText.split(":"); + if (styleKeyPair.length === 2) { + const name = styleKeyPair[0].trim(); + const value = styleKeyPair[1].trim(); + element.style[name] = value; + } + } + } + }, +}; + +function ajax(url, init) { + return fetch(url, Object.assign({ credentials: "same-origin" }, init)) + .then((response) => { + if (response.ok) { + return response + .json() + .catch((error) => + Promise.reject( + new Error( + `The response is a invalid Json object : ${error}` + ) + ) + ); + } + return Promise.reject( + new Error(`${response.status}: ${response.statusText}`) + ); + }) + .catch((error) => { + const win = document.getElementById("djDebugWindow"); + win.innerHTML = `

    ${error.message}

    `; + $$.show(win); + throw error; + }); +} + +function ajaxForm(element) { + const form = element.closest("form"); + const url = new URL(form.action); + const formData = new FormData(form); + for (const [name, value] of formData.entries()) { + url.searchParams.append(name, value); + } + const ajaxData = { + method: form.method.toUpperCase(), + }; + return ajax(url, ajaxData); +} + +function replaceToolbarState(newRequestId, data) { + const djDebug = document.getElementById("djDebug"); + djDebug.setAttribute("data-request-id", newRequestId); + // Check if response is empty, it could be due to an expired requestId. + for (const panelId of Object.keys(data)) { + const panel = document.getElementById(panelId); + if (panel) { + panel.outerHTML = data[panelId].content; + document.getElementById(`djdt-${panelId}`).outerHTML = + data[panelId].button; + } + } +} + +function debounce(func, delay) { + let timer = null; + let resolves = []; + + return (...args) => { + clearTimeout(timer); + timer = setTimeout(() => { + const result = func(...args); + for (const r of resolves) { + r(result); + } + resolves = []; + }, delay); + + return new Promise((r) => resolves.push(r)); + }; +} + +export { $$, ajax, ajaxForm, replaceToolbarState, debounce }; diff --git a/staticfiles/django-htmx.js b/staticfiles/django_htmx/django-htmx.js similarity index 100% rename from staticfiles/django-htmx.js rename to staticfiles/django_htmx/django-htmx.js diff --git a/staticfiles/django_htmx/htmx.js b/staticfiles/django_htmx/htmx.js new file mode 100644 index 00000000..4c8203ef --- /dev/null +++ b/staticfiles/django_htmx/htmx.js @@ -0,0 +1,5310 @@ +var htmx = (function() { + 'use strict' + + // Public API + const htmx = { + // Tsc madness here, assigning the functions directly results in an invalid TypeScript output, but reassigning is fine + /* Event processing */ + /** @type {typeof onLoadHelper} */ + onLoad: null, + /** @type {typeof processNode} */ + process: null, + /** @type {typeof addEventListenerImpl} */ + on: null, + /** @type {typeof removeEventListenerImpl} */ + off: null, + /** @type {typeof triggerEvent} */ + trigger: null, + /** @type {typeof ajaxHelper} */ + ajax: null, + /* DOM querying helpers */ + /** @type {typeof find} */ + find: null, + /** @type {typeof findAll} */ + findAll: null, + /** @type {typeof closest} */ + closest: null, + /** + * Returns the input values that would resolve for a given element via the htmx value resolution mechanism + * + * @see https://htmx.org/api/#values + * + * @param {Element} elt the element to resolve values on + * @param {HttpVerb} type the request type (e.g. **get** or **post**) non-GET's will include the enclosing form of the element. Defaults to **post** + * @returns {Object} + */ + values: function(elt, type) { + const inputValues = getInputValues(elt, type || 'post') + return inputValues.values + }, + /* DOM manipulation helpers */ + /** @type {typeof removeElement} */ + remove: null, + /** @type {typeof addClassToElement} */ + addClass: null, + /** @type {typeof removeClassFromElement} */ + removeClass: null, + /** @type {typeof toggleClassOnElement} */ + toggleClass: null, + /** @type {typeof takeClassForElement} */ + takeClass: null, + /** @type {typeof swap} */ + swap: null, + /* Extension entrypoints */ + /** @type {typeof defineExtension} */ + defineExtension: null, + /** @type {typeof removeExtension} */ + removeExtension: null, + /* Debugging */ + /** @type {typeof logAll} */ + logAll: null, + /** @type {typeof logNone} */ + logNone: null, + /* Debugging */ + /** + * The logger htmx uses to log with + * + * @see https://htmx.org/api/#logger + */ + logger: null, + /** + * A property holding the configuration htmx uses at runtime. + * + * Note that using a [meta tag](https://htmx.org/docs/#config) is the preferred mechanism for setting these properties. + * + * @see https://htmx.org/api/#config + */ + config: { + /** + * Whether to use history. + * @type boolean + * @default true + */ + historyEnabled: true, + /** + * The number of pages to keep in **sessionStorage** for history support. + * @type number + * @default 10 + */ + historyCacheSize: 10, + /** + * @type boolean + * @default false + */ + refreshOnHistoryMiss: false, + /** + * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted. + * @type HtmxSwapStyle + * @default 'innerHTML' + */ + defaultSwapStyle: 'innerHTML', + /** + * The default delay between receiving a response from the server and doing the swap. + * @type number + * @default 0 + */ + defaultSwapDelay: 0, + /** + * The default delay between completing the content swap and settling attributes. + * @type number + * @default 20 + */ + defaultSettleDelay: 20, + /** + * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present. + * @type boolean + * @default true + */ + includeIndicatorStyles: true, + /** + * The class to place on indicators when a request is in flight. + * @type string + * @default 'htmx-indicator' + */ + indicatorClass: 'htmx-indicator', + /** + * The class to place on triggering elements when a request is in flight. + * @type string + * @default 'htmx-request' + */ + requestClass: 'htmx-request', + /** + * The class to temporarily place on elements that htmx has added to the DOM. + * @type string + * @default 'htmx-added' + */ + addedClass: 'htmx-added', + /** + * The class to place on target elements when htmx is in the settling phase. + * @type string + * @default 'htmx-settling' + */ + settlingClass: 'htmx-settling', + /** + * The class to place on target elements when htmx is in the swapping phase. + * @type string + * @default 'htmx-swapping' + */ + swappingClass: 'htmx-swapping', + /** + * Allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility. + * @type boolean + * @default true + */ + allowEval: true, + /** + * If set to false, disables the interpretation of script tags. + * @type boolean + * @default true + */ + allowScriptTags: true, + /** + * If set, the nonce will be added to inline scripts. + * @type string + * @default '' + */ + inlineScriptNonce: '', + /** + * If set, the nonce will be added to inline styles. + * @type string + * @default '' + */ + inlineStyleNonce: '', + /** + * The attributes to settle during the settling phase. + * @type string[] + * @default ['class', 'style', 'width', 'height'] + */ + attributesToSettle: ['class', 'style', 'width', 'height'], + /** + * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates. + * @type boolean + * @default false + */ + withCredentials: false, + /** + * @type number + * @default 0 + */ + timeout: 0, + /** + * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**. + * @type {'full-jitter' | ((retryCount:number) => number)} + * @default "full-jitter" + */ + wsReconnectDelay: 'full-jitter', + /** + * The type of binary data being received over the WebSocket connection + * @type BinaryType + * @default 'blob' + */ + wsBinaryType: 'blob', + /** + * @type string + * @default '[hx-disable], [data-hx-disable]' + */ + disableSelector: '[hx-disable], [data-hx-disable]', + /** + * @type {'auto' | 'instant' | 'smooth'} + * @default 'instant' + */ + scrollBehavior: 'instant', + /** + * If the focused element should be scrolled into view. + * @type boolean + * @default false + */ + defaultFocusScroll: false, + /** + * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser + * @type boolean + * @default false + */ + getCacheBusterParam: false, + /** + * If set to true, htmx will use the View Transition API when swapping in new content. + * @type boolean + * @default false + */ + globalViewTransitions: false, + /** + * htmx will format requests with these methods by encoding their parameters in the URL, not the request body + * @type {(HttpVerb)[]} + * @default ['get', 'delete'] + */ + methodsThatUseUrlParams: ['get', 'delete'], + /** + * If set to true, disables htmx-based requests to non-origin hosts. + * @type boolean + * @default false + */ + selfRequestsOnly: true, + /** + * If set to true htmx will not update the title of the document when a title tag is found in new content + * @type boolean + * @default false + */ + ignoreTitle: false, + /** + * Whether the target of a boosted element is scrolled into the viewport. + * @type boolean + * @default true + */ + scrollIntoViewOnBoost: true, + /** + * The cache to store evaluated trigger specifications into. + * You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy) + * @type {Object|null} + * @default null + */ + triggerSpecsCache: null, + /** @type boolean */ + disableInheritance: false, + /** @type HtmxResponseHandlingConfig[] */ + responseHandling: [ + { code: '204', swap: false }, + { code: '[23]..', swap: true }, + { code: '[45]..', swap: false, error: true } + ], + /** + * Whether to process OOB swaps on elements that are nested within the main response element. + * @type boolean + * @default true + */ + allowNestedOobSwaps: true, + /** + * Whether to treat history cache miss full page reload requests as a "HX-Request" by returning this response header + * This should always be disabled when using HX-Request header to optionally return partial responses + * @type boolean + * @default true + */ + historyRestoreAsHxRequest: true + }, + /** @type {typeof parseInterval} */ + parseInterval: null, + /** + * proxy of window.location used for page reload functions + * @type location + */ + location, + /** @type {typeof internalEval} */ + _: null, + version: '2.0.6' + } + // Tsc madness part 2 + htmx.onLoad = onLoadHelper + htmx.process = processNode + htmx.on = addEventListenerImpl + htmx.off = removeEventListenerImpl + htmx.trigger = triggerEvent + htmx.ajax = ajaxHelper + htmx.find = find + htmx.findAll = findAll + htmx.closest = closest + htmx.remove = removeElement + htmx.addClass = addClassToElement + htmx.removeClass = removeClassFromElement + htmx.toggleClass = toggleClassOnElement + htmx.takeClass = takeClassForElement + htmx.swap = swap + htmx.defineExtension = defineExtension + htmx.removeExtension = removeExtension + htmx.logAll = logAll + htmx.logNone = logNone + htmx.parseInterval = parseInterval + htmx._ = internalEval + + const internalAPI = { + addTriggerHandler, + bodyContains, + canAccessLocalStorage, + findThisElement, + filterValues, + swap, + hasAttribute, + getAttributeValue, + getClosestAttributeValue, + getClosestMatch, + getExpressionVars, + getHeaders, + getInputValues, + getInternalData, + getSwapSpecification, + getTriggerSpecs, + getTarget, + makeFragment, + mergeObjects, + makeSettleInfo, + oobSwap, + querySelectorExt, + settleImmediately, + shouldCancel, + triggerEvent, + triggerErrorEvent, + withExtensions + } + + const VERBS = ['get', 'post', 'put', 'delete', 'patch'] + const VERB_SELECTOR = VERBS.map(function(verb) { + return '[hx-' + verb + '], [data-hx-' + verb + ']' + }).join(', ') + + //= =================================================================== + // Utilities + //= =================================================================== + + /** + * Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes. + * + * Caution: Accepts an int followed by either **s** or **ms**. All other values use **parseFloat** + * + * @see https://htmx.org/api/#parseInterval + * + * @param {string} str timing string + * @returns {number|undefined} + */ + function parseInterval(str) { + if (str == undefined) { + return undefined + } + + let interval = NaN + if (str.slice(-2) == 'ms') { + interval = parseFloat(str.slice(0, -2)) + } else if (str.slice(-1) == 's') { + interval = parseFloat(str.slice(0, -1)) * 1000 + } else if (str.slice(-1) == 'm') { + interval = parseFloat(str.slice(0, -1)) * 1000 * 60 + } else { + interval = parseFloat(str) + } + return isNaN(interval) ? undefined : interval + } + + /** + * @param {Node} elt + * @param {string} name + * @returns {(string | null)} + */ + function getRawAttribute(elt, name) { + return elt instanceof Element && elt.getAttribute(name) + } + + /** + * @param {Element} elt + * @param {string} qualifiedName + * @returns {boolean} + */ + // resolve with both hx and data-hx prefixes + function hasAttribute(elt, qualifiedName) { + return !!elt.hasAttribute && (elt.hasAttribute(qualifiedName) || + elt.hasAttribute('data-' + qualifiedName)) + } + + /** + * + * @param {Node} elt + * @param {string} qualifiedName + * @returns {(string | null)} + */ + function getAttributeValue(elt, qualifiedName) { + return getRawAttribute(elt, qualifiedName) || getRawAttribute(elt, 'data-' + qualifiedName) + } + + /** + * @param {Node} elt + * @returns {Node | null} + */ + function parentElt(elt) { + const parent = elt.parentElement + if (!parent && elt.parentNode instanceof ShadowRoot) return elt.parentNode + return parent + } + + /** + * @returns {Document} + */ + function getDocument() { + return document + } + + /** + * @param {Node} elt + * @param {boolean} global + * @returns {Node|Document} + */ + function getRootNode(elt, global) { + return elt.getRootNode ? elt.getRootNode({ composed: global }) : getDocument() + } + + /** + * @param {Node} elt + * @param {(e:Node) => boolean} condition + * @returns {Node | null} + */ + function getClosestMatch(elt, condition) { + while (elt && !condition(elt)) { + elt = parentElt(elt) + } + + return elt || null + } + + /** + * @param {Element} initialElement + * @param {Element} ancestor + * @param {string} attributeName + * @returns {string|null} + */ + function getAttributeValueWithDisinheritance(initialElement, ancestor, attributeName) { + const attributeValue = getAttributeValue(ancestor, attributeName) + const disinherit = getAttributeValue(ancestor, 'hx-disinherit') + var inherit = getAttributeValue(ancestor, 'hx-inherit') + if (initialElement !== ancestor) { + if (htmx.config.disableInheritance) { + if (inherit && (inherit === '*' || inherit.split(' ').indexOf(attributeName) >= 0)) { + return attributeValue + } else { + return null + } + } + if (disinherit && (disinherit === '*' || disinherit.split(' ').indexOf(attributeName) >= 0)) { + return 'unset' + } + } + return attributeValue + } + + /** + * @param {Element} elt + * @param {string} attributeName + * @returns {string | null} + */ + function getClosestAttributeValue(elt, attributeName) { + let closestAttr = null + getClosestMatch(elt, function(e) { + return !!(closestAttr = getAttributeValueWithDisinheritance(elt, asElement(e), attributeName)) + }) + if (closestAttr !== 'unset') { + return closestAttr + } + } + + /** + * @param {Node} elt + * @param {string} selector + * @returns {boolean} + */ + function matches(elt, selector) { + return elt instanceof Element && elt.matches(selector) + } + + /** + * @param {string} str + * @returns {string} + */ + function getStartTag(str) { + const tagMatcher = /<([a-z][^\/\0>\x20\t\r\n\f]*)/i + const match = tagMatcher.exec(str) + if (match) { + return match[1].toLowerCase() + } else { + return '' + } + } + + /** + * @param {string} resp + * @returns {Document} + */ + function parseHTML(resp) { + const parser = new DOMParser() + return parser.parseFromString(resp, 'text/html') + } + + /** + * @param {DocumentFragment} fragment + * @param {Node} elt + */ + function takeChildrenFor(fragment, elt) { + while (elt.childNodes.length > 0) { + fragment.append(elt.childNodes[0]) + } + } + + /** + * @param {HTMLScriptElement} script + * @returns {HTMLScriptElement} + */ + function duplicateScript(script) { + const newScript = getDocument().createElement('script') + forEach(script.attributes, function(attr) { + newScript.setAttribute(attr.name, attr.value) + }) + newScript.textContent = script.textContent + newScript.async = false + if (htmx.config.inlineScriptNonce) { + newScript.nonce = htmx.config.inlineScriptNonce + } + return newScript + } + + /** + * @param {HTMLScriptElement} script + * @returns {boolean} + */ + function isJavaScriptScriptNode(script) { + return script.matches('script') && (script.type === 'text/javascript' || script.type === 'module' || script.type === '') + } + + /** + * we have to make new copies of script tags that we are going to insert because + * SOME browsers (not saying who, but it involves an element and an animal) don't + * execute scripts created in