diff --git a/.gitignore b/.gitignore index 47dc4c4..91f5459 100644 --- a/.gitignore +++ b/.gitignore @@ -24,5 +24,7 @@ tmp/ *.sqlite3 *.sqlite3-shm *.sqlite3-wal + +#dev generated app/web/public/assets/index.js app/web/public/assets/styles.css \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 988727a..9783c99 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -83,70 +83,39 @@ We actively welcome your pull requests: - Node.js (latest stable version) - Docker (for local testing) - Kubernetes cluster (for integration testing) -- PostgreSQL (for local development) ### Setup Steps -1. **Clone the repository:** +- **Clone the repository:** ```bash git clone https://github.com/cloudness-io/cloudness.git cd cloudness ``` -1. **Install dependencies:** +- **Install dependencies:** ```bash make dep make tools ``` -1. **Build the project:** +- **Run the development server:** ```bash -make build +make dev ``` -1. **Set up PostgreSQL:** +- **Access the UI:** -```bash -docker run --name cloudness-pg \ - -e POSTGRES_PASSWORD=postgrespwd \ - -e POSTGRES_USER=cloudnessusr \ - -p 5432:5432 \ - -d postgres:latest -``` - -1. **Configure environment:** - -Create a `.env` file in the project root: - -```bash -CLOUDNESS_DATABASE_DRIVER=postgres -CLOUDNESS_DATABASE_HOST=localhost -CLOUDNESS_DATABASE_PORT=5432 -CLOUDNESS_DATABASE_NAME=cloudness -CLOUDNESS_DATABASE_USER=cloudnessusr -CLOUDNESS_DATABASE_PASSWORD=postgrespwd -CLOUDNESS_DEBUG=true -``` - -1. **Run the application:** - -```bash -./cloudness server .env -``` - -1. **Access the UI:** - -Open your browser at `http://localhost:8000` +Open your browser at `http://localhost:7331` ## Coding Standards ### Go Code - Follow [Effective Go](https://golang.org/doc/effective_go.html) guidelines -- Use `gofmt` to format your code +- Use `make format` to format your code - Run `go vet` to catch common mistakes - Use meaningful variable and function names - Add comments for exported functions and complex logic @@ -171,7 +140,7 @@ func ProcessDeployment(ctx context.Context, spec *DeploymentSpec) error { ### Frontend Code - Follow [Templ](https://templ.guide/) best practices for Go templates -- Use `templ fmt` to format template files +- Use `make format` to format template files - Write semantic HTML in templ components - Use Tailwind CSS utility classes consistently - Keep components small and reusable diff --git a/app/controller/instance/update.go b/app/controller/instance/update.go index ed5a543..2627966 100644 --- a/app/controller/instance/update.go +++ b/app/controller/instance/update.go @@ -22,6 +22,7 @@ type InstanceUpdateInput struct { DNSValidationEnabled bool `json:"dns_validation_enabled,string"` DNSServers string `json:"dns_servers"` ExternalScripts string `json:"external_scripts"` + AdditionalScripts string `json:"additional_scripts"` } type InstanceRegistryUpdateInput struct { @@ -103,6 +104,7 @@ func (c *Controller) Update(ctx context.Context, server *types.Server, in *Insta instance.DNSValidationEnabled = in.DNSValidationEnabled instance.DNSServers = in.DNSServers instance.ExternalScripts = in.ExternalScripts + instance.AdditionalScripts = in.AdditionalScripts err = c.tx.WithTx(ctx, func(ctx context.Context) error { manager, err := c.factory.GetServerManager(server) diff --git a/app/store/database/instance.go b/app/store/database/instance.go index 5815c79..ec3d766 100644 --- a/app/store/database/instance.go +++ b/app/store/database/instance.go @@ -50,6 +50,7 @@ const instanceColumns = ` ,instance_registry_mirror_enabled ,instance_registry_mirror_size ,instance_external_scripts + ,instance_additional_scripts ,instance_created ,instance_updated` @@ -71,6 +72,7 @@ INSERT INTO instances ( ,instance_registry_mirror_enabled ,instance_registry_mirror_size ,instance_external_scripts + ,instance_additional_scripts ,instance_created ,instance_updated ) VALUES ( @@ -90,6 +92,7 @@ INSERT INTO instances ( ,:instance_registry_mirror_enabled ,:instance_registry_mirror_size ,:instance_external_scripts + ,:instance_additional_scripts ,:instance_created ,:instance_updated ) RETURNING instance_id @@ -155,6 +158,7 @@ func (s *InstanceStore) Update(ctx context.Context, instance *types.Instance) (* ,instance_registry_mirror_enabled = :instance_registry_mirror_enabled ,instance_registry_mirror_size = :instance_registry_mirror_size ,instance_external_scripts = :instance_external_scripts + ,instance_additional_scripts = :instance_additional_scripts ,instance_created = :instance_created ,instance_updated = :instance_updated WHERE instance_id = 1` diff --git a/app/store/database/migrate/postgres/0002_alter_instance_table.up.sql b/app/store/database/migrate/postgres/0002_alter_instance_table.up.sql new file mode 100644 index 0000000..624bc76 --- /dev/null +++ b/app/store/database/migrate/postgres/0002_alter_instance_table.up.sql @@ -0,0 +1 @@ +ALTER TABLE instances ADD COLUMN instance_additional_scripts TEXT; diff --git a/app/store/database/migrate/sqlite/0002_alter_instance_table.up.sql b/app/store/database/migrate/sqlite/0002_alter_instance_table.up.sql new file mode 100644 index 0000000..624bc76 --- /dev/null +++ b/app/store/database/migrate/sqlite/0002_alter_instance_table.up.sql @@ -0,0 +1 @@ +ALTER TABLE instances ADD COLUMN instance_additional_scripts TEXT; diff --git a/app/web/public/assets/index.js b/app/web/public/assets/index.js deleted file mode 100644 index 8afef30..0000000 --- a/app/web/public/assets/index.js +++ /dev/null @@ -1,2 +0,0 @@ -(() => { -})(); diff --git a/app/web/public/assets/styles.css b/app/web/public/assets/styles.css deleted file mode 100644 index 3d03b8a..0000000 --- a/app/web/public/assets/styles.css +++ /dev/null @@ -1,3648 +0,0 @@ -/*! 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-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-lime-500: oklch(76.8% 0.233 130.85); - --color-teal-500: oklch(70.4% 0.14 182.503); - --color-teal-600: oklch(60% 0.118 184.704); - --color-cyan-700: oklch(52% 0.105 223.128); - --color-sky-700: oklch(50% 0.134 242.749); - --color-blue-400: oklch(70.7% 0.165 254.624); - --color-blue-600: oklch(54.6% 0.245 262.881); - --color-indigo-400: oklch(67.3% 0.182 276.935); - --color-violet-400: oklch(70.2% 0.183 293.541); - --color-violet-500: oklch(60.6% 0.25 292.717); - --color-slate-300: oklch(86.9% 0.022 252.894); - --color-slate-400: oklch(70.4% 0.04 256.788); - --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-neutral-500: oklch(55.6% 0 0); - --color-black: #000; - --color-white: #fff; - --spacing: 0.25rem; - --breakpoint-sm: 40rem; - --breakpoint-md: 48rem; - --breakpoint-xl: 80rem; - --container-xs: 20rem; - --container-sm: 24rem; - --container-md: 28rem; - --container-lg: 32rem; - --container-xl: 36rem; - --container-2xl: 42rem; - --container-7xl: 80rem; - --text-xs: 0.75rem; - --text-xs--line-height: calc(1 / 0.75); - --text-sm: 0.813rem; - --text-sm--line-height: calc(1 / 0.813); - --text-base: 1rem; - --text-base--line-height: calc(1.5 / 1); - --text-lg: 1.125rem; - --text-lg--line-height: calc(1.75 / 1.125); - --text-xl: 1.25rem; - --text-xl--line-height: calc(1.75 / 1.25); - --text-2xl: 1.5rem; - --text-2xl--line-height: calc(2 / 1.5); - --text-3xl: 1.875rem; - --text-3xl--line-height: calc(2.25 / 1.875); - --text-4xl: 2.25rem; - --text-4xl--line-height: calc(2.5 / 2.25); - --text-5xl: 3rem; - --text-5xl--line-height: 1; - --text-6xl: 3.75rem; - --text-6xl--line-height: 1; - --text-7xl: 4.5rem; - --text-7xl--line-height: 1; - --text-8xl: 6rem; - --text-8xl--line-height: 1; - --text-9xl: 8rem; - --text-9xl--line-height: 1; - --font-weight-light: 300; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; - --font-weight-extrabold: 800; - --tracking-tight: -0.025em; - --tracking-wider: 0.05em; - --radius-xs: 0.125rem; - --radius-sm: 0.25rem; - --radius-md: 0.375rem; - --radius-lg: 0.5rem; - --radius-xl: 0.75rem; - --ease-in: cubic-bezier(0.4, 0, 1, 1); - --ease-out: cubic-bezier(0, 0, 0.2, 1); - --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); - --animate-spin: spin 1s linear infinite; - --animate-bounce: bounce 1s infinite; - --blur-md: 12px; - --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: var(--background-primary); - --color-secondary: var(--background-secondary); - --color-secondary-hover: var(--background-secondary-hover); - --color-dropdown: var(--background-dropdown); - --color-tx-primary: var(--text-primary); - --color-tx-secondary: var(--text-secondary); - --color-brand: var(--brand); - --color-link: var(--link); - --color-link-hover: var(--link-hover); - --color-link-disabled: var(--link-disabled); - --color-disabled: var(--disabled); - --color-success: var(--success); - --color-error: var(--error); - --color-warning: var(--warning); - --color-pending: var(--pending); - --color-border: var(--border); - --text-2xs: 0.625rem; - --text-2xs--line-height: calc(1 / 0.625); - } -} -@layer base { - *, ::after, ::before, ::backdrop, ::file-selector-button { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0 solid; - } - html, :host { - line-height: 1.5; - -webkit-text-size-adjust: 100%; - tab-size: 4; - font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - font-feature-settings: var(--default-font-feature-settings, normal); - font-variation-settings: var(--default-font-variation-settings, normal); - -webkit-tap-highlight-color: transparent; - } - hr { - height: 0; - color: inherit; - border-top-width: 1px; - } - abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - } - h1, h2, h3, h4, h5, h6 { - font-size: inherit; - font-weight: inherit; - } - a { - color: inherit; - -webkit-text-decoration: inherit; - text-decoration: inherit; - } - b, strong { - font-weight: bolder; - } - code, kbd, samp, pre { - font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); - font-feature-settings: var(--default-mono-font-feature-settings, normal); - font-variation-settings: var(--default-mono-font-variation-settings, normal); - font-size: 1em; - } - small { - font-size: 80%; - } - sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - sub { - bottom: -0.25em; - } - sup { - top: -0.5em; - } - table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; - } - :-moz-focusring { - outline: auto; - } - progress { - vertical-align: baseline; - } - summary { - display: list-item; - } - ol, ul, menu { - list-style: none; - } - img, svg, video, canvas, audio, iframe, embed, object { - display: block; - vertical-align: middle; - } - img, video { - max-width: 100%; - height: auto; - } - button, input, select, optgroup, textarea, ::file-selector-button { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - border-radius: 0; - background-color: transparent; - opacity: 1; - } - :where(select:is([multiple], [size])) optgroup { - font-weight: bolder; - } - :where(select:is([multiple], [size])) optgroup option { - padding-inline-start: 20px; - } - ::file-selector-button { - margin-inline-end: 4px; - } - ::placeholder { - opacity: 1; - } - @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); - } - } - } - textarea { - resize: vertical; - } - ::-webkit-search-decoration { - -webkit-appearance: none; - } - ::-webkit-date-and-time-value { - min-height: 1lh; - text-align: inherit; - } - ::-webkit-datetime-edit { - display: inline-flex; - } - ::-webkit-datetime-edit-fields-wrapper { - padding: 0; - } - ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { - padding-block: 0; - } - ::-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; - } -} -@layer utilities { - .pointer-events-none { - pointer-events: none; - } - .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; - } - .relative { - position: relative; - } - .static { - position: static; - } - .sticky { - position: sticky; - } - .inset-0 { - inset: calc(var(--spacing) * 0); - } - .end-0 { - inset-inline-end: calc(var(--spacing) * 0); - } - .top-0 { - top: calc(var(--spacing) * 0); - } - .top-1\/2 { - top: calc(1/2 * 100%); - } - .top-4 { - top: calc(var(--spacing) * 4); - } - .top-11 { - top: calc(var(--spacing) * 11); - } - .top-64 { - top: calc(var(--spacing) * 64); - } - .top-\[-6px\] { - top: -6px; - } - .top-\[10px\] { - top: 10px; - } - .right-0 { - right: calc(var(--spacing) * 0); - } - .right-4 { - right: calc(var(--spacing) * 4); - } - .right-\[10px\] { - right: 10px; - } - .bottom-0 { - bottom: calc(var(--spacing) * 0); - } - .left-0 { - left: calc(var(--spacing) * 0); - } - .left-1\/2 { - left: calc(1/2 * 100%); - } - .left-\[-18px\] { - left: -18px; - } - .z-10 { - z-index: 10; - } - .z-20 { - z-index: 20; - } - .z-40 { - z-index: 40; - } - .z-50 { - z-index: 50; - } - .col-span-2 { - grid-column: span 2 / span 2; - } - .col-span-4 { - grid-column: span 4 / span 4; - } - .col-span-6 { - grid-column: span 6 / span 6; - } - .col-span-10 { - grid-column: span 10 / span 10; - } - .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; - } - } - .m-0 { - margin: calc(var(--spacing) * 0); - } - .m-2 { - margin: calc(var(--spacing) * 2); - } - .-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-3 { - margin-inline: calc(var(--spacing) * 3); - } - .mx-auto { - margin-inline: auto; - } - .-my-1\.5 { - margin-block: calc(var(--spacing) * -1.5); - } - .my-2 { - margin-block: calc(var(--spacing) * 2); - } - .my-4 { - margin-block: calc(var(--spacing) * 4); - } - .my-12 { - margin-block: calc(var(--spacing) * 12); - } - .ms-3 { - margin-inline-start: calc(var(--spacing) * 3); - } - .ms-auto { - margin-inline-start: 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-5 { - margin-top: calc(var(--spacing) * 5); - } - .mt-6 { - margin-top: calc(var(--spacing) * 6); - } - .mt-16 { - margin-top: calc(var(--spacing) * 16); - } - .mt-auto { - margin-top: auto; - } - .mr-2 { - margin-right: calc(var(--spacing) * 2); - } - .mr-4 { - margin-right: calc(var(--spacing) * 4); - } - .mr-12 { - margin-right: calc(var(--spacing) * 12); - } - .mb-1 { - margin-bottom: calc(var(--spacing) * 1); - } - .mb-2 { - margin-bottom: calc(var(--spacing) * 2); - } - .mb-4 { - margin-bottom: calc(var(--spacing) * 4); - } - .mb-20 { - margin-bottom: calc(var(--spacing) * 20); - } - .mb-32 { - margin-bottom: calc(var(--spacing) * 32); - } - .mb-\[0\.215rem\] { - margin-bottom: 0.215rem; - } - .-ml-8 { - margin-left: calc(var(--spacing) * -8); - } - .-ml-12 { - margin-left: calc(var(--spacing) * -12); - } - .ml-1 { - margin-left: calc(var(--spacing) * 1); - } - .ml-2 { - margin-left: calc(var(--spacing) * 2); - } - .ml-4 { - margin-left: calc(var(--spacing) * 4); - } - .ml-auto { - margin-left: auto; - } - .box-border { - box-sizing: border-box; - } - .button { - display: flex; - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - cursor: pointer; - align-items: center; - justify-content: center; - gap: calc(var(--spacing) * 1); - border-radius: var(--radius-xs); - padding-inline: calc(var(--spacing) * 6); - padding-block: calc(var(--spacing) * 1); - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - color: var(--color-white); - opacity: 90%; - 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) { - text-decoration-line: none; - } - } - &:hover { - @media (hover: hover) { - opacity: 100%; - } - } - &:focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - &: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); - } - &:active { - --tw-scale-x: 95%; - --tw-scale-y: 95%; - --tw-scale-z: 95%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - &:disabled { - transform: none; - } - &:disabled { - cursor: not-allowed; - } - &:disabled { - opacity: 50%; - } - &:disabled { - transition-property: none; - } - } - .block { - display: block; - } - .contents { - display: contents; - } - .flex { - display: flex; - } - .grid { - display: grid; - } - .hidden { - display: none; - } - .hidden\! { - display: none !important; - } - .inline-block { - display: inline-block; - } - .inline-flex { - display: inline-flex; - } - .table { - display: table; - } - .aspect-square { - aspect-ratio: 1 / 1; - } - .size-3 { - width: calc(var(--spacing) * 3); - height: calc(var(--spacing) * 3); - } - .size-3\.5 { - width: calc(var(--spacing) * 3.5); - height: calc(var(--spacing) * 3.5); - } - .size-4 { - width: calc(var(--spacing) * 4); - height: calc(var(--spacing) * 4); - } - .size-5 { - width: calc(var(--spacing) * 5); - height: calc(var(--spacing) * 5); - } - .size-6 { - width: calc(var(--spacing) * 6); - height: calc(var(--spacing) * 6); - } - .size-8 { - width: calc(var(--spacing) * 8); - height: calc(var(--spacing) * 8); - } - .h-2 { - height: calc(var(--spacing) * 2); - } - .h-2\.5 { - height: calc(var(--spacing) * 2.5); - } - .h-3 { - height: calc(var(--spacing) * 3); - } - .h-3\.5 { - height: calc(var(--spacing) * 3.5); - } - .h-4 { - height: calc(var(--spacing) * 4); - } - .h-5 { - height: calc(var(--spacing) * 5); - } - .h-6 { - height: calc(var(--spacing) * 6); - } - .h-7 { - height: calc(var(--spacing) * 7); - } - .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-\[calc\(100vh-10rem\)\] { - height: calc(100vh - 10rem); - } - .h-auto { - height: auto; - } - .h-full { - height: 100%; - } - .h-min { - height: min-content; - } - .h-screen { - height: 100vh; - } - .max-h-0 { - max-height: calc(var(--spacing) * 0); - } - .max-h-96 { - max-height: calc(var(--spacing) * 96); - } - .min-h-8 { - min-height: calc(var(--spacing) * 8); - } - .min-h-44 { - min-height: calc(var(--spacing) * 44); - } - .min-h-72 { - min-height: calc(var(--spacing) * 72); - } - .min-h-\[2\.25rem\] { - min-height: 2.25rem; - } - .min-h-\[calc\(100vh-20rem\)\] { - min-height: calc(100vh - 20rem); - } - .min-h-full { - min-height: 100%; - } - .min-h-screen { - min-height: 100vh; - } - .w-1\/2 { - width: calc(1/2 * 100%); - } - .w-2 { - width: calc(var(--spacing) * 2); - } - .w-2\.5 { - width: calc(var(--spacing) * 2.5); - } - .w-2xl { - width: var(--container-2xl); - } - .w-3 { - width: calc(var(--spacing) * 3); - } - .w-3\.5 { - width: calc(var(--spacing) * 3.5); - } - .w-4 { - width: calc(var(--spacing) * 4); - } - .w-5 { - width: calc(var(--spacing) * 5); - } - .w-6 { - width: calc(var(--spacing) * 6); - } - .w-7 { - width: calc(var(--spacing) * 7); - } - .w-8 { - width: calc(var(--spacing) * 8); - } - .w-10 { - width: calc(var(--spacing) * 10); - } - .w-11 { - width: calc(var(--spacing) * 11); - } - .w-12 { - width: calc(var(--spacing) * 12); - } - .w-20 { - width: calc(var(--spacing) * 20); - } - .w-40 { - width: calc(var(--spacing) * 40); - } - .w-\[10\%\] { - width: 10%; - } - .w-\[15\%\] { - width: 15%; - } - .w-\[20\%\] { - width: 20%; - } - .w-\[25\%\] { - width: 25%; - } - .w-\[30\%\] { - width: 30%; - } - .w-\[35\%\] { - width: 35%; - } - .w-\[100\%\] { - width: 100%; - } - .w-auto { - width: auto; - } - .w-fit { - width: fit-content; - } - .w-full { - width: 100%; - } - .w-max { - width: max-content; - } - .w-sm { - width: var(--container-sm); - } - .w-xs { - width: var(--container-xs); - } - .max-w-\(--breakpoint-sm\) { - max-width: var(--breakpoint-sm); - } - .max-w-\(--breakpoint-xl\) { - max-width: var(--breakpoint-xl); - } - .max-w-5 { - max-width: calc(var(--spacing) * 5); - } - .max-w-7xl { - max-width: var(--container-7xl); - } - .max-w-9 { - max-width: calc(var(--spacing) * 9); - } - .max-w-32 { - max-width: calc(var(--spacing) * 32); - } - .max-w-40 { - max-width: calc(var(--spacing) * 40); - } - .max-w-56 { - max-width: calc(var(--spacing) * 56); - } - .max-w-fit { - max-width: fit-content; - } - .max-w-full { - max-width: 100%; - } - .max-w-max { - max-width: max-content; - } - .max-w-md { - max-width: var(--container-md); - } - .max-w-screen { - max-width: 100vw; - } - .max-w-screen-md { - max-width: var(--breakpoint-md); - } - .max-w-sm { - max-width: var(--container-sm); - } - .max-w-xs { - max-width: var(--container-xs); - } - .min-w-0 { - min-width: calc(var(--spacing) * 0); - } - .min-w-6 { - min-width: calc(var(--spacing) * 6); - } - .min-w-20 { - min-width: calc(var(--spacing) * 20); - } - .min-w-24 { - min-width: calc(var(--spacing) * 24); - } - .min-w-40 { - min-width: calc(var(--spacing) * 40); - } - .min-w-52 { - min-width: calc(var(--spacing) * 52); - } - .min-w-full { - min-width: 100%; - } - .min-w-xl { - min-width: var(--container-xl); - } - .min-w-xs { - min-width: var(--container-xs); - } - .flex-1 { - flex: 1; - } - .flex-auto { - flex: auto; - } - .flex-none { - flex: none; - } - .flex-shrink-0 { - flex-shrink: 0; - } - .shrink-0 { - flex-shrink: 0; - } - .flex-grow { - flex-grow: 1; - } - .grow { - flex-grow: 1; - } - .basis-auto { - flex-basis: auto; - } - .-translate-x-1\/2 { - --tw-translate-x: calc(calc(1/2 * 100%) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - .-translate-y-1\/2 { - --tw-translate-y: calc(calc(1/2 * 100%) * -1); - 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-4 { - --tw-translate-y: calc(var(--spacing) * 4); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - .rotate-0 { - rotate: 0deg; - } - .rotate-90 { - rotate: 90deg; - } - .transform { - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - } - .animate-spin { - animation: var(--animate-spin); - } - .link { - cursor: pointer; - color: var(--color-link); - &:hover { - @media (hover: hover) { - color: var(--color-link-hover); - } - } - &:hover { - @media (hover: hover) { - text-decoration-line: underline; - } - } - &:disabled { - color: var(--color-link-disabled); - } - &:disabled { - &:hover { - @media (hover: hover) { - text-decoration-line: none; - } - } - } - } - .cursor-auto { - cursor: auto; - } - .cursor-pointer { - cursor: pointer; - } - .resize { - resize: both; - } - .resize-none { - resize: none; - } - .resize-y { - resize: vertical; - } - .scroll-mt-32 { - scroll-margin-top: calc(var(--spacing) * 32); - } - .appearance-none { - appearance: none; - } - .columns-2 { - columns: 2; - } - .grid-flow-col { - grid-auto-flow: column; - } - .auto-rows-auto { - grid-auto-rows: auto; - } - .grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - .grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - .grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - .grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); - } - .grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - .grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,3fr\)\] { - grid-template-columns: minmax(0,2fr) minmax(0,3fr); - } - .grid-rows-\[auto_minmax\(0px\,1fr\)\] { - grid-template-rows: auto minmax(0px,1fr); - } - .flex-col { - flex-direction: column; - } - .flex-row { - flex-direction: row; - } - .flex-wrap { - flex-wrap: wrap; - } - .place-content-between { - place-content: space-between; - } - .place-items-baseline { - place-items: baseline; - } - .items-baseline { - align-items: baseline; - } - .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; - } - .justify-start { - justify-content: flex-start; - } - .justify-items-stretch { - justify-items: stretch; - } - .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-5 { - gap: calc(var(--spacing) * 5); - } - .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-16 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse))); - } - } - .gap-x-2 { - column-gap: calc(var(--spacing) * 2); - } - .gap-x-3 { - column-gap: calc(var(--spacing) * 3); - } - .gap-x-4 { - column-gap: calc(var(--spacing) * 4); - } - .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))); - } - } - .space-x-6 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse))); - } - } - .space-x-8 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse))); - } - } - .gap-y-4 { - row-gap: calc(var(--spacing) * 4); - } - .divide-x { - :where(& > :not(:last-child)) { - --tw-divide-x-reverse: 0; - border-inline-style: var(--tw-border-style); - border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); - border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-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))); - } - } - .self-auto { - align-self: auto; - } - .self-center { - align-self: center; - } - .self-end { - align-self: flex-end; - } - .truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .overflow-hidden { - overflow: hidden; - } - .overflow-x-auto { - overflow-x: auto; - } - .overflow-x-hidden { - overflow-x: hidden; - } - .overflow-y-auto { - overflow-y: auto; - } - .overflow-y-hidden { - overflow-y: hidden; - } - .overflow-y-visible { - overflow-y: visible; - } - .rounded { - border-radius: 0.25rem; - } - .rounded-full { - border-radius: calc(infinity * 1px); - } - .rounded-lg { - border-radius: var(--radius-lg); - } - .rounded-md { - border-radius: var(--radius-md); - } - .rounded-sm { - border-radius: var(--radius-sm); - } - .rounded-xl { - border-radius: var(--radius-xl); - } - .rounded-xs { - border-radius: var(--radius-xs); - } - .border { - border-style: var(--tw-border-style); - border-width: 1px; - } - .border-2 { - border-style: var(--tw-border-style); - border-width: 2px; - } - .border-y { - border-block-style: var(--tw-border-style); - border-block-width: 1px; - } - .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-l-0 { - border-left-style: var(--tw-border-style); - border-left-width: 0px; - } - .border-dashed { - --tw-border-style: dashed; - border-style: dashed; - } - .border-dotted { - --tw-border-style: dotted; - border-style: dotted; - } - .border-brand { - border-color: var(--color-brand); - } - .border-brand\/50 { - border-color: var(--color-brand); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-brand) 50%, transparent); - } - } - .border-error { - border-color: var(--color-error); - } - .border-link { - border-color: var(--color-link); - } - .border-pending { - border-color: var(--color-pending); - } - .border-slate-300 { - border-color: var(--color-slate-300); - } - .border-success { - border-color: var(--color-success); - } - .border-warning { - border-color: var(--color-warning); - } - .border-warning\/50 { - border-color: var(--color-warning); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-warning) 50%, transparent); - } - } - .bg-black { - background-color: var(--color-black); - } - .bg-brand { - background-color: var(--color-brand); - } - .bg-brand\/10 { - background-color: var(--color-brand); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-brand) 10%, transparent); - } - } - .bg-brand\/15 { - background-color: var(--color-brand); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-brand) 15%, transparent); - } - } - .bg-dropdown { - background-color: var(--color-dropdown); - } - .bg-error { - background-color: var(--color-error); - } - .bg-primary { - background-color: var(--color-primary); - } - .bg-secondary { - background-color: var(--color-secondary); - } - .bg-transparent { - background-color: transparent; - } - .bg-warning\/10 { - background-color: var(--color-warning); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-warning) 10%, transparent); - } - } - .bg-warning\/15 { - background-color: var(--color-warning); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-warning) 15%, transparent); - } - } - .bg-white { - background-color: var(--color-white); - } - .object-cover { - object-fit: cover; - } - .p-0 { - padding: calc(var(--spacing) * 0); - } - .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-6 { - padding: calc(var(--spacing) * 6); - } - .p-\[8px\] { - padding: 8px; - } - .px-0 { - padding-inline: calc(var(--spacing) * 0); - } - .px-1 { - padding-inline: calc(var(--spacing) * 1); - } - .px-1\.5 { - padding-inline: calc(var(--spacing) * 1.5); - } - .px-2 { - padding-inline: calc(var(--spacing) * 2); - } - .px-3 { - padding-inline: calc(var(--spacing) * 3); - } - .px-4 { - padding-inline: calc(var(--spacing) * 4); - } - .px-5 { - padding-inline: calc(var(--spacing) * 5); - } - .px-6 { - padding-inline: calc(var(--spacing) * 6); - } - .py-0\.5 { - padding-block: calc(var(--spacing) * 0.5); - } - .py-1 { - padding-block: calc(var(--spacing) * 1); - } - .py-1\.5 { - padding-block: calc(var(--spacing) * 1.5); - } - .py-2 { - padding-block: calc(var(--spacing) * 2); - } - .py-3 { - padding-block: calc(var(--spacing) * 3); - } - .py-4 { - padding-block: calc(var(--spacing) * 4); - } - .py-8 { - padding-block: calc(var(--spacing) * 8); - } - .py-12 { - padding-block: calc(var(--spacing) * 12); - } - .py-14 { - padding-block: calc(var(--spacing) * 14); - } - .py-24 { - padding-block: calc(var(--spacing) * 24); - } - .pt-1 { - padding-top: calc(var(--spacing) * 1); - } - .pt-2 { - padding-top: calc(var(--spacing) * 2); - } - .pt-3 { - padding-top: calc(var(--spacing) * 3); - } - .pt-4 { - padding-top: calc(var(--spacing) * 4); - } - .pr-0 { - padding-right: calc(var(--spacing) * 0); - } - .pr-2 { - padding-right: calc(var(--spacing) * 2); - } - .pr-3 { - padding-right: calc(var(--spacing) * 3); - } - .pr-4 { - padding-right: calc(var(--spacing) * 4); - } - .pr-7\! { - padding-right: calc(var(--spacing) * 7) !important; - } - .pb-2 { - padding-bottom: calc(var(--spacing) * 2); - } - .pb-3 { - padding-bottom: calc(var(--spacing) * 3); - } - .pb-5 { - padding-bottom: calc(var(--spacing) * 5); - } - .pl-1 { - padding-left: calc(var(--spacing) * 1); - } - .pl-4 { - padding-left: calc(var(--spacing) * 4); - } - .pl-6 { - padding-left: calc(var(--spacing) * 6); - } - .text-center { - text-align: center; - } - .text-left { - text-align: left; - } - .text-right { - text-align: right; - } - .align-middle { - vertical-align: middle; - } - .align-top { - vertical-align: top; - } - .font-mono { - font-family: var(--font-mono); - } - .text-2xl { - font-size: var(--text-2xl); - line-height: var(--tw-leading, var(--text-2xl--line-height)); - } - .text-2xs { - font-size: var(--text-2xs); - line-height: var(--tw-leading, var(--text-2xs--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-7xl { - font-size: var(--text-7xl); - line-height: var(--tw-leading, var(--text-7xl--line-height)); - } - .text-base { - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - } - .text-lg { - font-size: var(--text-lg); - line-height: var(--tw-leading, var(--text-lg--line-height)); - } - .text-sm { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - .text-xl { - font-size: var(--text-xl); - line-height: var(--tw-leading, var(--text-xl--line-height)); - } - .text-xs { - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); - } - .text-\[0\.8rem\] { - font-size: 0.8rem; - } - .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); - } - .leading-7 { - --tw-leading: calc(var(--spacing) * 7); - line-height: calc(var(--spacing) * 7); - } - .leading-9 { - --tw-leading: calc(var(--spacing) * 9); - line-height: calc(var(--spacing) * 9); - } - .leading-none { - --tw-leading: 1; - line-height: 1; - } - .font-bold { - --tw-font-weight: var(--font-weight-bold); - font-weight: var(--font-weight-bold); - } - .font-extrabold { - --tw-font-weight: var(--font-weight-extrabold); - font-weight: var(--font-weight-extrabold); - } - .font-light { - --tw-font-weight: var(--font-weight-light); - font-weight: var(--font-weight-light); - } - .font-medium { - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - } - .font-semibold { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - .tracking-tight { - --tw-tracking: var(--tracking-tight); - letter-spacing: var(--tracking-tight); - } - .tracking-wider { - --tw-tracking: var(--tracking-wider); - letter-spacing: var(--tracking-wider); - } - .text-wrap { - text-wrap: wrap; - } - .break-normal { - overflow-wrap: normal; - word-break: normal; - } - .break-words { - overflow-wrap: break-word; - } - .overflow-ellipsis { - text-overflow: ellipsis; - } - .text-ellipsis { - text-overflow: ellipsis; - } - .whitespace-nowrap { - white-space: nowrap; - } - .text-blue-400 { - color: var(--color-blue-400); - } - .text-blue-600 { - color: var(--color-blue-600); - } - .text-brand { - color: var(--color-brand); - } - .text-current { - color: currentcolor; - } - .text-cyan-700 { - color: var(--color-cyan-700); - } - .text-disabled { - color: var(--color-disabled); - } - .text-error { - color: var(--color-error); - } - .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-indigo-400 { - color: var(--color-indigo-400); - } - .text-lime-500 { - color: var(--color-lime-500); - } - .text-link { - color: var(--color-link); - } - .text-pending { - color: var(--color-pending); - } - .text-secondary { - color: var(--color-secondary); - } - .text-sky-700 { - color: var(--color-sky-700); - } - .text-slate-400 { - color: var(--color-slate-400); - } - .text-success { - color: var(--color-success); - } - .text-teal-500 { - color: var(--color-teal-500); - } - .text-teal-600 { - color: var(--color-teal-600); - } - .text-tx-primary { - color: var(--color-tx-primary); - } - .text-tx-secondary { - color: var(--color-tx-secondary); - } - .text-violet-400 { - color: var(--color-violet-400); - } - .text-violet-500 { - color: var(--color-violet-500); - } - .text-warning { - color: var(--color-warning); - } - .text-yellow-400 { - color: var(--color-yellow-400); - } - .text-yellow-500 { - color: var(--color-yellow-500); - } - .text-yellow-600 { - color: var(--color-yellow-600); - } - .capitalize { - text-transform: capitalize; - } - .lowercase { - text-transform: lowercase; - } - .uppercase { - text-transform: uppercase; - } - .italic { - font-style: italic; - } - .ordinal { - --tw-ordinal: ordinal; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); - } - .opacity-0 { - opacity: 0%; - } - .opacity-70 { - opacity: 70%; - } - .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); - } - .inset-shadow-sidebar { - --tw-inset-shadow: inset 3px 0 var(--tw-inset-shadow-color, var(--link)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .inset-shadow-tabbar { - --tw-inset-shadow: inset 0 -3px var(--tw-inset-shadow-color, var(--link)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .ring-brand { - --tw-ring-color: var(--color-brand); - } - .grayscale-100 { - --tw-grayscale: grayscale(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,); - } - .backdrop-blur-md { - --tw-backdrop-blur: blur(var(--blur-md)); - -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-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)); - } - .duration-150 { - --tw-duration: 150ms; - transition-duration: 150ms; - } - .duration-200 { - --tw-duration: 200ms; - transition-duration: 200ms; - } - .duration-300 { - --tw-duration: 300ms; - transition-duration: 300ms; - } - .duration-500 { - --tw-duration: 500ms; - transition-duration: 500ms; - } - .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); - } - .select-none { - -webkit-user-select: none; - user-select: none; - } - .group-hover\:animate-bounce { - &:is(:where(.group):hover *) { - @media (hover: hover) { - animation: var(--animate-bounce); - } - } - } - .group-hover\:opacity-100 { - &:is(:where(.group):hover *) { - @media (hover: hover) { - opacity: 100%; - } - } - } - .group-hover\/link\:underline { - &:is(:where(.group\/link):hover *) { - @media (hover: hover) { - text-decoration-line: underline; - } - } - } - .peer-checked\:translate-x-6 { - &:is(:where(.peer):checked ~ *) { - --tw-translate-x: calc(var(--spacing) * 6); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - } - .peer-checked\:border-brand { - &:is(:where(.peer):checked ~ *) { - border-color: var(--color-brand); - } - } - .peer-checked\:border-primary { - &:is(:where(.peer):checked ~ *) { - border-color: var(--color-primary); - } - } - .peer-checked\:text-brand { - &:is(:where(.peer):checked ~ *) { - color: var(--color-brand); - } - } - .peer-checked\:opacity-100 { - &:is(:where(.peer):checked ~ *) { - opacity: 100%; - } - } - .peer-checked\:ring-1 { - &:is(:where(.peer):checked ~ *) { - --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); - } - } - .before\:invisible { - &::before { - content: var(--tw-content); - visibility: hidden; - } - } - .before\:absolute { - &::before { - content: var(--tw-content); - position: absolute; - } - } - .before\:top-1\/2 { - &::before { - content: var(--tw-content); - top: calc(1/2 * 100%); - } - } - .before\:left-1\/2 { - &::before { - content: var(--tw-content); - left: calc(1/2 * 100%); - } - } - .before\:h-1\.5 { - &::before { - content: var(--tw-content); - height: calc(var(--spacing) * 1.5); - } - } - .before\:w-1\.5 { - &::before { - content: var(--tw-content); - width: calc(var(--spacing) * 1.5); - } - } - .before\:-translate-x-1\/2 { - &::before { - content: var(--tw-content); - --tw-translate-x: calc(calc(1/2 * 100%) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - } - .before\:-translate-y-1\/2 { - &::before { - content: var(--tw-content); - --tw-translate-y: calc(calc(1/2 * 100%) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - } - .before\:rounded-full { - &::before { - content: var(--tw-content); - border-radius: calc(infinity * 1px); - } - } - .before\:bg-primary { - &::before { - content: var(--tw-content); - background-color: var(--color-primary); - } - } - .first\:mt-0 { - &:first-child { - margin-top: calc(var(--spacing) * 0); - } - } - .checked\:border-brand { - &:checked { - border-color: var(--color-brand); - } - } - .checked\:bg-brand { - &:checked { - background-color: var(--color-brand); - } - } - .checked\:before\:visible { - &:checked { - &::before { - content: var(--tw-content); - visibility: visible; - } - } - } - .focus-within\:border-brand { - &:focus-within { - border-color: var(--color-brand); - } - } - .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\:cursor-pointer { - &:hover { - @media (hover: hover) { - cursor: pointer; - } - } - } - .hover\:border-b-2 { - &:hover { - @media (hover: hover) { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 2px; - } - } - } - .hover\:border-brand { - &:hover { - @media (hover: hover) { - border-color: var(--color-brand); - } - } - } - .hover\:border-link { - &:hover { - @media (hover: hover) { - border-color: var(--color-link); - } - } - } - .hover\:border-b-link { - &:hover { - @media (hover: hover) { - border-bottom-color: var(--color-link); - } - } - } - .hover\:bg-primary { - &:hover { - @media (hover: hover) { - background-color: var(--color-primary); - } - } - } - .hover\:bg-secondary { - &:hover { - @media (hover: hover) { - background-color: var(--color-secondary); - } - } - } - .hover\:bg-secondary-hover { - &:hover { - @media (hover: hover) { - background-color: var(--color-secondary-hover); - } - } - } - .hover\:text-brand { - &:hover { - @media (hover: hover) { - color: var(--color-brand); - } - } - } - .hover\:no-underline { - &:hover { - @media (hover: hover) { - text-decoration-line: none; - } - } - } - .hover\:underline { - &:hover { - @media (hover: hover) { - text-decoration-line: underline; - } - } - } - .hover\:opacity-100 { - &:hover { - @media (hover: hover) { - opacity: 100%; - } - } - } - .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); - } - } - } - .focus\:border-brand { - &:focus { - border-color: var(--color-brand); - } - } - .focus\:border-error { - &:focus { - border-color: var(--color-error); - } - } - .focus\:ring-0 { - &:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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\:outline-hidden { - &:focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - } - .focus\:outline-2 { - &:focus { - outline-style: var(--tw-outline-style); - outline-width: 2px; - } - } - .focus\:outline-offset-2 { - &:focus { - outline-offset: 2px; - } - } - .focus\:outline-brand { - &:focus { - outline-color: var(--color-brand); - } - } - .focus\:outline-none { - &:focus { - --tw-outline-style: none; - outline-style: none; - } - } - .checked\:focus\:outline-brand { - &:checked { - &:focus { - outline-color: var(--color-brand); - } - } - } - .focus-visible\:bg-secondary { - &:focus-visible { - background-color: var(--color-secondary); - } - } - .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-brand { - &:focus-visible { - --tw-ring-color: var(--color-brand); - } - } - .focus-visible\:outline-hidden { - &:focus-visible { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - } - .focus-visible\:outline-none { - &:focus-visible { - --tw-outline-style: none; - outline-style: none; - } - } - .disabled\:pointer-events-none { - &:disabled { - pointer-events: none; - } - } - .disabled\:cursor-default { - &:disabled { - cursor: default; - } - } - .disabled\:cursor-not-allowed { - &:disabled { - cursor: not-allowed; - } - } - .disabled\:border-0 { - &:disabled { - border-style: var(--tw-border-style); - border-width: 0px; - } - } - .disabled\:bg-secondary { - &:disabled { - background-color: var(--color-secondary); - } - } - .disabled\:opacity-50 { - &:disabled { - opacity: 50%; - } - } - .disabled\:hover\:border-0 { - &:disabled { - &:hover { - @media (hover: hover) { - border-style: var(--tw-border-style); - border-width: 0px; - } - } - } - } - .disabled\:focus\:border-0 { - &:disabled { - &:focus { - border-style: var(--tw-border-style); - border-width: 0px; - } - } - } - .has-disabled\:opacity-75 { - &:has(*:disabled) { - opacity: 75%; - } - } - .sm\:col-span-3 { - @media (width >= 40rem) { - grid-column: span 3 / span 3; - } - } - .sm\:mx-6 { - @media (width >= 40rem) { - margin-inline: calc(var(--spacing) * 6); - } - } - .sm\:mx-auto { - @media (width >= 40rem) { - margin-inline: auto; - } - } - .sm\:block { - @media (width >= 40rem) { - display: block; - } - } - .sm\:flex { - @media (width >= 40rem) { - display: flex; - } - } - .sm\:flex\! { - @media (width >= 40rem) { - display: flex !important; - } - } - .sm\:w-52 { - @media (width >= 40rem) { - width: calc(var(--spacing) * 52); - } - } - .sm\:w-64 { - @media (width >= 40rem) { - width: calc(var(--spacing) * 64); - } - } - .sm\:w-\[20\%\] { - @media (width >= 40rem) { - width: 20%; - } - } - .sm\:w-\[30rem\] { - @media (width >= 40rem) { - width: 30rem; - } - } - .sm\:w-\[80\%\] { - @media (width >= 40rem) { - width: 80%; - } - } - .sm\:w-auto { - @media (width >= 40rem) { - width: auto; - } - } - .sm\:w-full { - @media (width >= 40rem) { - width: 100%; - } - } - .sm\:w-md { - @media (width >= 40rem) { - width: var(--container-md); - } - } - .sm\:max-w-full { - @media (width >= 40rem) { - max-width: 100%; - } - } - .sm\:max-w-md { - @media (width >= 40rem) { - max-width: var(--container-md); - } - } - .sm\:max-w-sm { - @media (width >= 40rem) { - max-width: var(--container-sm); - } - } - .sm\:translate-y-0 { - @media (width >= 40rem) { - --tw-translate-y: calc(var(--spacing) * 0); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - } - .sm\:scale-95 { - @media (width >= 40rem) { - --tw-scale-x: 95%; - --tw-scale-y: 95%; - --tw-scale-z: 95%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - } - .sm\:scale-100 { - @media (width >= 40rem) { - --tw-scale-x: 100%; - --tw-scale-y: 100%; - --tw-scale-z: 100%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - } - .sm\:flex-row { - @media (width >= 40rem) { - flex-direction: row; - } - } - .sm\:justify-between { - @media (width >= 40rem) { - justify-content: space-between; - } - } - .sm\:gap-2 { - @media (width >= 40rem) { - gap: calc(var(--spacing) * 2); - } - } - .sm\:overflow-y-auto { - @media (width >= 40rem) { - overflow-y: auto; - } - } - .sm\:border-r { - @media (width >= 40rem) { - border-right-style: var(--tw-border-style); - border-right-width: 1px; - } - } - .sm\:border-l { - @media (width >= 40rem) { - border-left-style: var(--tw-border-style); - border-left-width: 1px; - } - } - .sm\:p-6 { - @media (width >= 40rem) { - padding: calc(var(--spacing) * 6); - } - } - .sm\:px-4 { - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 4); - } - } - .sm\:px-6 { - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 6); - } - } - .sm\:py-2 { - @media (width >= 40rem) { - padding-block: calc(var(--spacing) * 2); - } - } - .sm\:py-32 { - @media (width >= 40rem) { - padding-block: calc(var(--spacing) * 32); - } - } - .sm\:pb-3 { - @media (width >= 40rem) { - padding-bottom: calc(var(--spacing) * 3); - } - } - .sm\:pl-8 { - @media (width >= 40rem) { - padding-left: calc(var(--spacing) * 8); - } - } - .sm\:text-5xl { - @media (width >= 40rem) { - font-size: var(--text-5xl); - line-height: var(--tw-leading, var(--text-5xl--line-height)); - } - } - .sm\:whitespace-nowrap { - @media (width >= 40rem) { - white-space: nowrap; - } - } - .md\:top-48 { - @media (width >= 48rem) { - top: calc(var(--spacing) * 48); - } - } - .md\:mx-auto { - @media (width >= 48rem) { - margin-inline: auto; - } - } - .md\:mt-0 { - @media (width >= 48rem) { - margin-top: calc(var(--spacing) * 0); - } - } - .md\:mt-6 { - @media (width >= 48rem) { - margin-top: calc(var(--spacing) * 6); - } - } - .md\:\!hidden { - @media (width >= 48rem) { - display: none !important; - } - } - .md\:block { - @media (width >= 48rem) { - display: block; - } - } - .md\:h-auto { - @media (width >= 48rem) { - height: auto; - } - } - .md\:min-h-\[39px\] { - @media (width >= 48rem) { - min-height: 39px; - } - } - .md\:w-1\/3 { - @media (width >= 48rem) { - width: calc(1/3 * 100%); - } - } - .md\:w-auto { - @media (width >= 48rem) { - width: auto; - } - } - .md\:max-w-lg { - @media (width >= 48rem) { - max-width: var(--container-lg); - } - } - .md\:min-w-0 { - @media (width >= 48rem) { - min-width: calc(var(--spacing) * 0); - } - } - .md\:min-w-32 { - @media (width >= 48rem) { - min-width: calc(var(--spacing) * 32); - } - } - .md\:grid-cols-\[auto_minmax\(0px\,1fr\)\] { - @media (width >= 48rem) { - grid-template-columns: auto minmax(0px,1fr); - } - } - .md\:grid-rows-none { - @media (width >= 48rem) { - grid-template-rows: none; - } - } - .md\:flex-row { - @media (width >= 48rem) { - flex-direction: row; - } - } - .md\:items-center { - @media (width >= 48rem) { - align-items: center; - } - } - .md\:gap-4 { - @media (width >= 48rem) { - gap: calc(var(--spacing) * 4); - } - } - .md\:space-x-8 { - @media (width >= 48rem) { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse))); - } - } - } - .md\:rounded-t-xl { - @media (width >= 48rem) { - border-top-left-radius: var(--radius-xl); - border-top-right-radius: var(--radius-xl); - } - } - .md\:border-transparent { - @media (width >= 48rem) { - border-color: transparent; - } - } - .md\:bg-transparent { - @media (width >= 48rem) { - background-color: transparent; - } - } - .md\:p-0 { - @media (width >= 48rem) { - padding: calc(var(--spacing) * 0); - } - } - .md\:px-0 { - @media (width >= 48rem) { - padding-inline: calc(var(--spacing) * 0); - } - } - .md\:px-2 { - @media (width >= 48rem) { - padding-inline: calc(var(--spacing) * 2); - } - } - .md\:px-3 { - @media (width >= 48rem) { - padding-inline: calc(var(--spacing) * 3); - } - } - .md\:pr-1 { - @media (width >= 48rem) { - padding-right: calc(var(--spacing) * 1); - } - } - .md\:pr-4 { - @media (width >= 48rem) { - padding-right: calc(var(--spacing) * 4); - } - } - .md\:pb-0 { - @media (width >= 48rem) { - padding-bottom: calc(var(--spacing) * 0); - } - } - .md\:pb-3 { - @media (width >= 48rem) { - padding-bottom: calc(var(--spacing) * 3); - } - } - .md\:pl-4 { - @media (width >= 48rem) { - padding-left: calc(var(--spacing) * 4); - } - } - .md\:pl-5 { - @media (width >= 48rem) { - padding-left: calc(var(--spacing) * 5); - } - } - .md\:pl-8 { - @media (width >= 48rem) { - padding-left: calc(var(--spacing) * 8); - } - } - .md\:text-3xl { - @media (width >= 48rem) { - font-size: var(--text-3xl); - line-height: var(--tw-leading, var(--text-3xl--line-height)); - } - } - .md\:text-5xl { - @media (width >= 48rem) { - font-size: var(--text-5xl); - line-height: var(--tw-leading, var(--text-5xl--line-height)); - } - } - .md\:text-8xl { - @media (width >= 48rem) { - font-size: var(--text-8xl); - line-height: var(--tw-leading, var(--text-8xl--line-height)); - } - } - .md\:text-xl { - @media (width >= 48rem) { - font-size: var(--text-xl); - line-height: var(--tw-leading, var(--text-xl--line-height)); - } - } - .md\:hover\:text-secondary { - @media (width >= 48rem) { - &:hover { - @media (hover: hover) { - color: var(--color-secondary); - } - } - } - } - .md\:focus\:ring-0 { - @media (width >= 48rem) { - &:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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); - } - } - } - .md\:focus\:outline-hidden { - @media (width >= 48rem) { - &:focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - } - } - .lg\:col-span-2 { - @media (width >= 64rem) { - grid-column: span 2 / span 2; - } - } - .lg\:mb-6 { - @media (width >= 64rem) { - margin-bottom: calc(var(--spacing) * 6); - } - } - .lg\:h-full { - @media (width >= 64rem) { - height: 100%; - } - } - .lg\:w-1\/2 { - @media (width >= 64rem) { - width: calc(1/2 * 100%); - } - } - .lg\:w-1\/4 { - @media (width >= 64rem) { - width: calc(1/4 * 100%); - } - } - .lg\:grow { - @media (width >= 64rem) { - flex-grow: 1; - } - } - .lg\:grid-cols-\[1fr_1fr_1fr_auto\] { - @media (width >= 64rem) { - grid-template-columns: 1fr 1fr 1fr auto; - } - } - .lg\:grid-cols-\[1fr_2fr_1fr_auto\] { - @media (width >= 64rem) { - grid-template-columns: 1fr 2fr 1fr auto; - } - } - .lg\:flex-row { - @media (width >= 64rem) { - flex-direction: row; - } - } - .lg\:items-end { - @media (width >= 64rem) { - align-items: flex-end; - } - } - .lg\:space-y-0 { - @media (width >= 64rem) { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))); - } - } - } - .lg\:px-2 { - @media (width >= 64rem) { - padding-inline: calc(var(--spacing) * 2); - } - } - .lg\:px-6 { - @media (width >= 64rem) { - padding-inline: calc(var(--spacing) * 6); - } - } - .lg\:px-8 { - @media (width >= 64rem) { - padding-inline: calc(var(--spacing) * 8); - } - } - .lg\:px-12 { - @media (width >= 64rem) { - padding-inline: calc(var(--spacing) * 12); - } - } - .lg\:py-16 { - @media (width >= 64rem) { - padding-block: calc(var(--spacing) * 16); - } - } - .lg\:text-2xl { - @media (width >= 64rem) { - font-size: var(--text-2xl); - line-height: var(--tw-leading, var(--text-2xl--line-height)); - } - } - .lg\:text-5xl { - @media (width >= 64rem) { - font-size: var(--text-5xl); - line-height: var(--tw-leading, var(--text-5xl--line-height)); - } - } - .lg\:text-6xl { - @media (width >= 64rem) { - font-size: var(--text-6xl); - line-height: var(--tw-leading, var(--text-6xl--line-height)); - } - } - .lg\:text-9xl { - @media (width >= 64rem) { - font-size: var(--text-9xl); - line-height: var(--tw-leading, var(--text-9xl--line-height)); - } - } - .xl\:col-span-1 { - @media (width >= 80rem) { - grid-column: span 1 / span 1; - } - } - .xl\:px-0 { - @media (width >= 80rem) { - padding-inline: calc(var(--spacing) * 0); - } - } - .\32 xl\:space-x-0 { - @media (width >= 96rem) { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 0) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-x-reverse))); - } - } - } - .rtl\:rotate-180 { - &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { - rotate: 180deg; - } - } - .dark\:text-gray-400 { - @media (prefers-color-scheme: dark) { - color: var(--color-gray-400); - } - } - .dark\:text-neutral-500 { - @media (prefers-color-scheme: dark) { - color: var(--color-neutral-500); - } - } - .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none { - &::-webkit-inner-spin-button { - appearance: none; - } - } - .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none { - &::-webkit-outer-spin-button { - appearance: none; - } - } -} -@layer base { - :root { - --success: rgba(85, 163, 98, 1); - --error: rgb(212, 55, 50); - --warning: rgb(192, 144, 2); - --pending: rgba(0, 120, 212, 1); - --background-primary: #151515; - --background-secondary: #242423; - --background-secondary-hover: #4d4c4c; - --background-dropdown: #1a1a1a; - --text-primary: #cfcfcf; - --text-secondary: #989694; - --brand: #2899f5; - --link: #2899f5; - --link-hover: #82c7ff; - --link-disabled: #797775; - --disabled: #797775; - --border: #414141; - --border-mutted: #323130; - } -} -@layer base { - * { - border-color: var(--color-border); - :where(& > :not(:last-child)) { - border-color: var(--color-border); - } - } - html { - -webkit-text-size-adjust: 100%; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - font-family: "Segoe UI", system-ui, "Open Sans", "Helvetica Neue", sans-serif; - font-feature-settings: normal; - font-variation-settings: normal; - -webkit-tap-highlight-color: transparent; - font-weight: 400; - margin: 0; - padding: 0; - background-color: var(--color-primary); - color: var(--color-tx-primary); - } - [x-cloak] { - display: none !important; - } - ::-webkit-scrollbar { - height: 8px; - width: 1.5px; - } - ::-webkit-scrollbar-thumb { - background: var(--border-mutted); - border-radius: 20px; - } - ::-webkit-scrollbar-track { - background: transparent; - } - input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { - border: 1px solid #434346; - -webkit-text-fill-color: #f1f1f1; - -webkit-box-shadow: 0 0 0px 1000px #1b1b1c inset; - transition: background-color 5000s ease-in-out 0s; - } - h3 { - display: flex; - align-items: center; - font-size: var(--text-lg); - line-height: var(--tw-leading, var(--text-lg--line-height)); - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - h4 { - display: flex; - align-items: center; - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - h5 { - display: flex; - align-items: center; - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - } -} -.progress-indicator { - position: fixed; - z-index: 1000; - height: 2px; - width: 100%; - border-radius: 2px; - background-clip: padding-box; - overflow: hidden; - display: none; -} -.progress-indicator .indeterminate:before { - content: ""; - position: absolute; - background-color: inherit; - top: 0; - left: 0; - bottom: 0; - will-change: left, right; - animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; -} -.progress-indicator .indeterminate:after { - content: ""; - position: absolute; - background-color: inherit; - top: 0; - left: 0; - bottom: 0; - will-change: left, right; - animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; - animation-delay: 1.15s; -} -.htmx-request.progress-indicator { - display: inline; -} -.spinner { - width: 100%; - aspect-ratio: 1; - display: grid; - border-radius: 50%; - background: linear-gradient( 0deg, rgb(40 153 245/50%) 30%, #0000 0 70%, rgb(40 153 245/100%) 0 ) 50%/8% 100%, linear-gradient( 90deg, rgb(40 153 245/25%) 30%, #0000 0 70%, rgb(40 153 245/75%) 0 ) 50%/100% 8%; - background-repeat: no-repeat; - animation: l23 1s infinite steps(12); -} -.spinner::before, .spinner::after { - content: ""; - grid-area: 1/1; - border-radius: 50%; - background: inherit; - opacity: 0.915; - transform: rotate(30deg); -} -.spinner::after { - opacity: 0.83; - transform: rotate(60deg); -} -@keyframes l23 { - 100% { - transform: rotate(1turn); - } -} -.button-link { - display: flex; - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - cursor: pointer; - align-items: center; - justify-content: center; - gap: calc(var(--spacing) * 1); - border-radius: var(--radius-xs); - padding-inline: calc(var(--spacing) * 1); - padding-block: calc(var(--spacing) * 1); - color: var(--color-link); - 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) { - color: var(--color-link-hover); - } - } - &:hover { - @media (hover: hover) { - text-decoration-line: none; - } - } - &:focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - &: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); - } - &:active { - --tw-scale-x: 95%; - --tw-scale-y: 95%; - --tw-scale-z: 95%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - &:disabled { - transform: none; - } - &:disabled { - cursor: not-allowed; - } - &:disabled { - color: var(--color-link-disabled); - } - &:disabled { - opacity: 50%; - } - &:disabled { - transition-property: none; - } - &:disabled { - &:hover { - @media (hover: hover) { - text-decoration-line: none; - } - } - } -} -.button-primary { - display: flex; - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - cursor: pointer; - align-items: center; - justify-content: center; - gap: calc(var(--spacing) * 1); - border-radius: var(--radius-xs); - padding-inline: calc(var(--spacing) * 6); - padding-block: calc(var(--spacing) * 1); - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - color: var(--color-white); - opacity: 90%; - 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) { - text-decoration-line: none; - } - } - &:hover { - @media (hover: hover) { - opacity: 100%; - } - } - &:focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - &: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); - } - &:active { - --tw-scale-x: 95%; - --tw-scale-y: 95%; - --tw-scale-z: 95%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - &:disabled { - transform: none; - } - &:disabled { - cursor: not-allowed; - } - &:disabled { - opacity: 50%; - } - &:disabled { - transition-property: none; - } - border-style: var(--tw-border-style); - border-width: 1px; - border-color: var(--color-brand); - background-color: var(--color-brand); -} -.button-inert { - display: flex; - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - cursor: pointer; - align-items: center; - justify-content: center; - gap: calc(var(--spacing) * 1); - border-radius: var(--radius-xs); - padding-inline: calc(var(--spacing) * 6); - padding-block: calc(var(--spacing) * 1); - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - color: var(--color-white); - opacity: 90%; - 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) { - text-decoration-line: none; - } - } - &:hover { - @media (hover: hover) { - opacity: 100%; - } - } - &:focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - &: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); - } - &:active { - --tw-scale-x: 95%; - --tw-scale-y: 95%; - --tw-scale-z: 95%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - &:disabled { - transform: none; - } - &:disabled { - cursor: not-allowed; - } - &:disabled { - opacity: 50%; - } - &:disabled { - transition-property: none; - } - border-style: var(--tw-border-style); - border-width: 1px; - border-color: var(--color-brand); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-brand) 80%, transparent); - } - background-color: transparent; - padding-inline: calc(var(--spacing) * 2); - color: var(--color-brand); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-brand) 80%, transparent); - } -} -.button-neutral { - display: flex; - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - cursor: pointer; - align-items: center; - justify-content: center; - gap: calc(var(--spacing) * 1); - border-radius: var(--radius-xs); - padding-inline: calc(var(--spacing) * 6); - padding-block: calc(var(--spacing) * 1); - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - color: var(--color-white); - opacity: 90%; - 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) { - text-decoration-line: none; - } - } - &:hover { - @media (hover: hover) { - opacity: 100%; - } - } - &:focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - &: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); - } - &:active { - --tw-scale-x: 95%; - --tw-scale-y: 95%; - --tw-scale-z: 95%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - &:disabled { - transform: none; - } - &:disabled { - cursor: not-allowed; - } - &:disabled { - opacity: 50%; - } - &:disabled { - transition-property: none; - } - border-style: var(--tw-border-style); - border-width: 1px; - background-color: transparent; -} -.button-danger { - display: flex; - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - cursor: pointer; - align-items: center; - justify-content: center; - gap: calc(var(--spacing) * 1); - border-radius: var(--radius-xs); - padding-inline: calc(var(--spacing) * 6); - padding-block: calc(var(--spacing) * 1); - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - color: var(--color-white); - opacity: 90%; - 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) { - text-decoration-line: none; - } - } - &:hover { - @media (hover: hover) { - opacity: 100%; - } - } - &:focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - &: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); - } - &:active { - --tw-scale-x: 95%; - --tw-scale-y: 95%; - --tw-scale-z: 95%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - &:disabled { - transform: none; - } - &:disabled { - cursor: not-allowed; - } - &:disabled { - opacity: 50%; - } - &:disabled { - transition-property: none; - } - border-style: var(--tw-border-style); - border-width: 1px; - border-color: var(--color-error); - background-color: var(--color-error); -} -.text-success { - color: var(--success); -} -.text-error { - color: var(--error); -} -.button-success { - border-color: var(--success); -} -.button-error { - border-color: var(--error); -} -.disabled { - pointer-events: none; - opacity: 0.5; - cursor: not-allowed; - filter: grayscale(50%); -} -@keyframes indeterminate { - 0% { - left: -35%; - right: 100%; - } - 60% { - left: 100%; - right: -90%; - } - 100% { - left: 100%; - right: -90%; - } -} -@keyframes indeterminate-short { - 0% { - left: -200%; - right: 100%; - } - 60% { - left: 107%; - right: -8%; - } - 100% { - left: 107%; - right: -8%; - } -} -.icon-sm::before { - font-size: var(--text-sm) !important; -} -.icon-base::before { - font-size: var(--text-base) !important; -} -.icon-lg::before { - font-size: var(--text-lg) !important; -} -.icon-xl::before { - font-size: var(--text-xl) !important; -} -.icon-2xl::before { - font-size: var(--text-2xl) !important; -} -.icon-3xl::before { - font-size: var(--text-3xl) !important; -} -.icon-4xl::before { - font-size: var(--text-4xl) !important; -} -.icon-plain { - color: var(--text-secondary) !important; -} -.htmx-indicator { - display: none; -} -.htmx-request .htmx-indicator { - display: inline-block; - transition: opacity 200ms ease-in; -} -.htmx-request.htmx-indicator { - display: inline-block; - transition: opacity 200ms ease-in; -} -@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-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-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-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-space-y-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-space-x-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-divide-x-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-border-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} -@property --tw-divide-y-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-leading { - syntax: "*"; - inherits: false; -} -@property --tw-tracking { - syntax: "*"; - inherits: false; -} -@property --tw-ordinal { - syntax: "*"; - inherits: false; -} -@property --tw-slashed-zero { - syntax: "*"; - inherits: false; -} -@property --tw-numeric-figure { - syntax: "*"; - inherits: false; -} -@property --tw-numeric-spacing { - syntax: "*"; - inherits: false; -} -@property --tw-numeric-fraction { - syntax: "*"; - inherits: false; -} -@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; -} -@property --tw-backdrop-sepia { - syntax: "*"; - inherits: false; -} -@property --tw-duration { - syntax: "*"; - inherits: false; -} -@property --tw-ease { - syntax: "*"; - inherits: false; -} -@property --tw-content { - syntax: "*"; - initial-value: ""; - inherits: false; -} -@property --tw-outline-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} -@keyframes spin { - to { - transform: rotate(360deg); - } -} -@keyframes bounce { - 0%, 100% { - transform: translateY(-25%); - animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - } - 50% { - transform: none; - animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - } -} -@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-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: 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-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - --tw-space-y-reverse: 0; - --tw-space-x-reverse: 0; - --tw-divide-x-reverse: 0; - --tw-border-style: solid; - --tw-divide-y-reverse: 0; - --tw-leading: initial; - --tw-tracking: initial; - --tw-ordinal: initial; - --tw-slashed-zero: initial; - --tw-numeric-figure: initial; - --tw-numeric-spacing: initial; - --tw-numeric-fraction: initial; - --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: ""; - --tw-outline-style: solid; - } - } -} diff --git a/app/web/views/components/navigations/nav.templ b/app/web/views/components/navigations/nav.templ index 6afc7b2..0f3f6c8 100644 --- a/app/web/views/components/navigations/nav.templ +++ b/app/web/views/components/navigations/nav.templ @@ -15,12 +15,12 @@ templ MainNav(dto *dto.NavBarOption) { class="h-12 grid grid-flow-col pl-4 min-w-full border-b bg-secondary" > logo { views.AppName } - v{ version.GetVersion() } + v{ version.GetVersion() }
diff --git a/app/web/views/components/vinstance/settings.templ b/app/web/views/components/vinstance/settings.templ index d8f5ed9..54b76a1 100644 --- a/app/web/views/components/vinstance/settings.templ +++ b/app/web/views/components/vinstance/settings.templ @@ -25,6 +25,7 @@ templ Settings(instance *types.Instance, server *types.Server) { DNSValidationEnabled: instance.DNSValidationEnabled, DNSServers: instance.DNSServers, ExternalScripts: instance.ExternalScripts, + AdditionalScripts: instance.AdditionalScripts, }) } x-data={ xdata.ToFormData(instance) } x-clock @@ -83,15 +84,25 @@ templ Settings(instance *types.Instance, server *types.Server) { "x-model": "form.dns_servers", }, }) -

External Scripts

+

Scripts

@shared.Textarea(&shared.TextareaProps{ - Name: "external_scripts", - Label: "External Scripts", - Tooltip: "External scripts to be loaded in the dashboard,e.g. analytics", + Name: "external_scripts", + Label: "External Javascript", + Tooltip: "External javascript to be loaded in the dashboard", + Placeholder: "var data=`test` \nconsole.log(data)", Attrs: templ.Attributes{ "x-model": "form.external_scripts", }, }) + @shared.Textarea(&shared.TextareaProps{ + Name: "additional_scripts", + Label: "Additional Scripts", + Tooltip: "Additional scripts to be loaded in the dashboard", + Placeholder: "\n", + Attrs: templ.Attributes{ + "x-model": "form.additional_scripts", + }, + }) @shared.UpdateDiv("/settings") } diff --git a/app/web/views/layouts/base.templ b/app/web/views/layouts/base.templ index 47905eb..1ace1ef 100644 --- a/app/web/views/layouts/base.templ +++ b/app/web/views/layouts/base.templ @@ -87,6 +87,7 @@ templ baseLayout() { @shared.ExternalScripts(request.InstanceSettingsFrom(ctx)) + @shared.AdditionalScripts(request.InstanceSettingsFrom(ctx)) " + instance.ExternalScripts + "") } } + +templ AdditionalScripts(instance *types.Instance, ok bool) { + if ok && instance.AdditionalScripts!= "" { + @templ.Raw(strings.ReplaceAll(instance.AdditionalScripts, "