diff --git a/DysonNetwork.Sphere/Pages/Account/Profile.cshtml b/DysonNetwork.Sphere/Pages/Account/Profile.cshtml index 17bdfc3..0f93334 100644 --- a/DysonNetwork.Sphere/Pages/Account/Profile.cshtml +++ b/DysonNetwork.Sphere/Pages/Account/Profile.cshtml @@ -6,53 +6,44 @@ @if (Model.Account != null) { -
+
-

Profile Settings

-

Manage your account information and preferences

+

Profile Settings

+

Manage your account information and preferences

-
-
+
+
-
- - @Model.Account.Name?.Substring(0, 1).ToUpper() - +
+
+ @Model.Account.Name?[..1].ToUpper() +
-

- @Model.Account.Nick -

-

@Model.Account.Name

+

@Model.Account.Nick

+

@@@Model.Account.Name

-
-
-
@Model.Account.Profile.Level
-
Level
+
+
+
Level
+
@Model.Account.Profile.Level
-
-
@Model.Account.Profile.Experience
-
XP
+
+
XP
+
@Model.Account.Profile.Experience
-
-
- @Model.Account.CreatedAt.ToDateTimeUtc().ToString("yyyy/MM/dd") -
-
Member since
+
+
Member since
+
@Model.Account.CreatedAt.ToDateTimeUtc().ToString("yyyy/MM")
@@ -61,181 +52,107 @@
-
- -
- +
+ +
+

Profile Information

+ +
+
+

Basic Information

+
+
+
Full Name
+
@($"{Model.Account.Profile.FirstName} {Model.Account.Profile.MiddleName} {Model.Account.Profile.LastName}".Trim())
+
+
+
Username
+
@Model.Account.Name
+
+
+
Nickname
+
@Model.Account.Nick
+
+
+
Gender
+
@Model.Account.Profile.Gender
+
+
+
+ +
+

Additional Details

+
+
+
Location
+
@Model.Account.Profile.Location
+
+
+
Birthday
+
@Model.Account.Profile.Birthday?.ToString("MMMM d, yyyy", System.Globalization.CultureInfo.InvariantCulture)
+
+
+
Bio
+
@(string.IsNullOrEmpty(Model.Account.Profile.Bio) ? "No bio provided" : Model.Account.Profile.Bio)
+
+
+
+
- -
- -
-

Profile - Information

+ +
+

Security Settings

-
-
-

Basic - Information

-
-
-
Full - Name -
-
- @($"{Model.Account.Profile.FirstName} {Model.Account.Profile.MiddleName} {Model.Account.Profile.LastName}".Trim()) -
+
+
+
+

Access Token

+

Use this token to authenticate with the API

+
+
+ +
-
-
- Username -
-
@Model.Account.Name
-
-
-
- Nickname -
-
@Model.Account.Nick
-
-
-
- Gender -
-
@Model.Account.Profile.Gender
-
-
-
- -
-

Additional - Details

-
-
-
- Location -
-
@Model.Account.Profile.Location
-
-
-
- Birthday -
-
- @Model.Account.Profile.Birthday?.ToString("MMMM d, yyyy", System.Globalization.CultureInfo.InvariantCulture) -
-
-
-
Bio -
-
- @(string.IsNullOrEmpty(Model.Account.Profile.Bio) ? "No bio provided" : Model.Account.Profile.Bio) -
-
-
-
-
- -
- -
-
- - - +
- -
@@ -124,4 +112,4 @@ _ => scope }; } -} +} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Auth/Callback.cshtml b/DysonNetwork.Sphere/Pages/Auth/Callback.cshtml index f152a00..64e90fe 100644 --- a/DysonNetwork.Sphere/Pages/Auth/Callback.cshtml +++ b/DysonNetwork.Sphere/Pages/Auth/Callback.cshtml @@ -5,10 +5,12 @@ Layout = "_Layout"; } -
-
-

Authentication Successful

-

You can now close this window and return to the application.

+
+
+
+

Authentication Successful

+

You can now close this window and return to the application.

+
@@ -44,4 +46,4 @@ } })(); -} +} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Auth/Challenge.cshtml b/DysonNetwork.Sphere/Pages/Auth/Challenge.cshtml index cec4aab..657bd21 100644 --- a/DysonNetwork.Sphere/Pages/Auth/Challenge.cshtml +++ b/DysonNetwork.Sphere/Pages/Auth/Challenge.cshtml @@ -6,8 +6,11 @@ Response.Redirect($"/web/auth/challenge/{Model.Id}/select-factor"); } -
-
-

Redirecting to authentication page...

+
+
+
+ +

Redirecting to authentication page...

+
-
\ No newline at end of file +
diff --git a/DysonNetwork.Sphere/Pages/Auth/Login.cshtml b/DysonNetwork.Sphere/Pages/Auth/Login.cshtml index 5e07eb0..4df12ff 100644 --- a/DysonNetwork.Sphere/Pages/Auth/Login.cshtml +++ b/DysonNetwork.Sphere/Pages/Auth/Login.cshtml @@ -5,32 +5,32 @@ var returnUrl = Model.ReturnUrl ?? ""; } -
-
-

Login

- -
- -
- - - +
+
+
+
+

Welcome back!

+

Login to your Solar Network account to continue.

+ + +
+ + + +
+
+ +
+
+ Have no account?
+ + Create a new account → + +
+
- - - -
- Have no account? - - - Create a new account → -
diff --git a/DysonNetwork.Sphere/Pages/Auth/SelectFactor.cshtml b/DysonNetwork.Sphere/Pages/Auth/SelectFactor.cshtml index d8b188e..18922ef 100644 --- a/DysonNetwork.Sphere/Pages/Auth/SelectFactor.cshtml +++ b/DysonNetwork.Sphere/Pages/Auth/SelectFactor.cshtml @@ -5,54 +5,92 @@ ViewData["Title"] = "Select Authentication Method"; } -
-
-

Select Authentication Method

+
+
+
+
+

Select Authentication Method

- @if (Model.AuthChallenge == null) - { -

Challenge not found or expired.

- } - else if (Model.AuthChallenge.StepRemain == 0) - { -

Challenge completed. Redirecting...

- } - else - { -

Please select an authentication method:

- -
- @foreach (var factor in Model.AuthFactors) + @if (Model.AuthChallenge == null) { -
-
- - - @if (factor.Type == AccountAuthFactorType.EmailCode) - { -
- - -
- } - - -
+
+ + + + Challenge not found or expired. +
+ } + else if (Model.AuthChallenge.StepRemain == 0) + { +
+ + + + Challenge completed. Redirecting... +
+ } + else + { +

Please select an authentication method:

+ +
+ @foreach (var factor in Model.AuthFactors) + { +
+ + + @if (factor.Type == AccountAuthFactorType.EmailCode) + { +
+
+
+

@GetFactorDisplayName(factor.Type)

+

@GetFactorDescription(factor.Type)

+
+
+
+ +
+ +
+
+
+ } + else + { +
+
+
+

@GetFactorDisplayName(factor.Type)

+

@GetFactorDescription(factor.Type)

+
+
+ +
+
+
+ } +
+ }
}
- } +
@@ -78,4 +116,4 @@ _ => string.Empty }; -} +} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Auth/VerifyFactor.cshtml b/DysonNetwork.Sphere/Pages/Auth/VerifyFactor.cshtml index 816a152..d7062a0 100644 --- a/DysonNetwork.Sphere/Pages/Auth/VerifyFactor.cshtml +++ b/DysonNetwork.Sphere/Pages/Auth/VerifyFactor.cshtml @@ -5,73 +5,82 @@ ViewData["Title"] = "Verify Your Identity"; } -
-
-

Verify Your Identity

-

- @switch (Model.FactorType) - { - case AccountAuthFactorType.EmailCode: - We've sent a verification code to your email. - break; - case AccountAuthFactorType.InAppCode: - Enter the code from your authenticator app. - break; - case AccountAuthFactorType.TimedCode: - Enter your time-based verification code. - break; - case AccountAuthFactorType.PinCode: - Enter your PIN code. - break; - case AccountAuthFactorType.Password: - Enter your password. - break; - default: - Please verify your identity. - break; - } -

+
+
+
+
+

Verify Your Identity

+

+ @switch (Model.FactorType) + { + case AccountAuthFactorType.EmailCode: + We've sent a verification code to your email. + break; + case AccountAuthFactorType.InAppCode: + Enter the code from your authenticator app. + break; + case AccountAuthFactorType.TimedCode: + Enter your time-based verification code. + break; + case AccountAuthFactorType.PinCode: + Enter your PIN code. + break; + case AccountAuthFactorType.Password: + Enter your password. + break; + default: + Please verify your identity. + break; + } +

- @if (Model.AuthChallenge == null) - { -

Challenge not found or expired.

- } - else if (Model.AuthChallenge.StepRemain == 0) - { -

Verification successful. Redirecting...

- } - else - { -
-
- -
- - - -
+ @if (Model.AuthChallenge == null) + { +
+ + Challenge not found or expired. +
+ } + else if (Model.AuthChallenge.StepRemain == 0) + { +
+ + Verification successful. Redirecting... +
+ } + else + { + +
+ +
+ + + +
- +
+ +
-
- - ← Back to authentication methods - -
-
- } +
+ + ← Back to authentication methods + +
+ + } +
+
@section Scripts { @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); } -} +} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Checkpoint/CheckpointPage.cshtml b/DysonNetwork.Sphere/Pages/Checkpoint/CheckpointPage.cshtml index bedf0ac..cd392bc 100644 --- a/DysonNetwork.Sphere/Pages/Checkpoint/CheckpointPage.cshtml +++ b/DysonNetwork.Sphere/Pages/Checkpoint/CheckpointPage.cshtml @@ -38,73 +38,73 @@ } -
-
-
-

Security Check

-

Please complete the contest below to confirm you're not a robot

+
+
+
+
+
+

Security Check

+

Please complete the contest below to confirm you're not a robot

-
- @switch (provider) - { - case "cloudflare": -
+
+ @switch (provider) + { + case "cloudflare": +
+
+ break; + case "recaptcha": +
+
+ break; + case "hcaptcha": +
+
+ break; + default: +
+ + Captcha provider not configured correctly. +
+ break; + } +
+ +
+
Solar Network Anti-Robot
+
+ Powered by + @switch (provider) + { + case "cloudflare": + + Cloudflare Turnstile + + break; + case "recaptcha": + + Google reCaptcha + + break; + default: + Nothing + break; + } +
+ Hosted by + + DysonNetwork.Sphere +
- break; - case "recaptcha": -
-
- break; - case "hcaptcha": -
-
- break; - default: -
-

- Captcha provider not configured correctly. -

-
- break; - } -
-
- -
-
Solar Network Anti-Robot
-
- Powered by - @switch (provider) - { - case "cloudflare": - - Cloudflare Turnstile - - break; - case "recaptcha": - - Google reCaptcha - - break; - default: - Nothing - break; - } -
- Hosted by - - DysonNetwork.Sphere - +
+
-
\ No newline at end of file +
diff --git a/DysonNetwork.Sphere/Pages/Index.cshtml b/DysonNetwork.Sphere/Pages/Index.cshtml index 89e6254..6da58d5 100644 --- a/DysonNetwork.Sphere/Pages/Index.cshtml +++ b/DysonNetwork.Sphere/Pages/Index.cshtml @@ -4,26 +4,20 @@ ViewData["Title"] = "The Solar Network"; } -
-
-

- Solar Network -

-

- This Solar Network instance is up and running. -

-
- - Get started - -
-
- - API Docs - - - Learn more - -
+
+
+
+

Solar Network

+

This Solar Network instance is up and running.

+ Get started +
+ + API Docs + + + Learn more + +
+
diff --git a/DysonNetwork.Sphere/Pages/Index.cshtml.cs b/DysonNetwork.Sphere/Pages/Index.cshtml.cs index 59832d8..0c6ba9e 100644 --- a/DysonNetwork.Sphere/Pages/Index.cshtml.cs +++ b/DysonNetwork.Sphere/Pages/Index.cshtml.cs @@ -6,6 +6,5 @@ public class IndexModel : PageModel { public void OnGet() { - // Add any page initialization logic here } } \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Shared/_Layout.cshtml b/DysonNetwork.Sphere/Pages/Shared/_Layout.cshtml index 3ba1725..e484363 100644 --- a/DysonNetwork.Sphere/Pages/Shared/_Layout.cshtml +++ b/DysonNetwork.Sphere/Pages/Shared/_Layout.cshtml @@ -5,34 +5,44 @@ @ViewData["Title"] + + + + - -
- + + } + else + { +
  • + login +
    • + } + +
    -@* The header 64px *@ -
    +
    @RenderBody()
    diff --git a/DysonNetwork.Sphere/Pages/Spell/MagicSpellPage.cshtml b/DysonNetwork.Sphere/Pages/Spell/MagicSpellPage.cshtml index 5f3e8dd..1828549 100644 --- a/DysonNetwork.Sphere/Pages/Spell/MagicSpellPage.cshtml +++ b/DysonNetwork.Sphere/Pages/Spell/MagicSpellPage.cshtml @@ -6,96 +6,86 @@ ViewData["Title"] = "Magic Spell"; } -
    -
    -
    -

    Magic Spell

    +
    +
    +
    +

    Magic Spell

    @if (Model.IsSuccess) { -
    -

    The spell was applied successfully!

    -

    Now you can close this page.

    +
    + + The spell was applied successfully! +

    Now you can close this page.

    } else if (Model.CurrentSpell == null) { -
    -

    The spell was expired or does not exist.

    +
    + + The spell was expired or does not exist.
    } else { -
    -
    -

    - The spell is for - @System.Text.RegularExpressions.Regex.Replace(Model.CurrentSpell!.Type.ToString(), "([a-z])([A-Z])", "$1 $2") -

    -

    for @@@Model.CurrentSpell.Account?.Name

    -
    -
    - @if (Model.CurrentSpell.ExpiresAt.HasValue) - { -

    Available until @Model.CurrentSpell.ExpiresAt.Value.ToDateTimeUtc().ToString("g")

    - } - @if (Model.CurrentSpell.AffectedAt.HasValue) - { -

    Available after @Model.CurrentSpell.AffectedAt.Value.ToDateTimeUtc().ToString("g")

    - } -
    -

    Would you like to apply this spell?

    -
    - -
    - - - @if (Model.CurrentSpell?.Type == MagicSpellType.AuthPasswordReset) - { -
    - - +
    +
    +

    + @System.Text.RegularExpressions.Regex.Replace(Model.CurrentSpell!.Type.ToString(), "([a-z])([A-Z])", "$1 $2") +

    +

    for @@ @Model.CurrentSpell.Account?.Name

    +
    + @if (Model.CurrentSpell.ExpiresAt.HasValue) + { +

    Available until @Model.CurrentSpell.ExpiresAt.Value.ToDateTimeUtc().ToString("g")

    + } + @if (Model.CurrentSpell.AffectedAt.HasValue) + { +

    Available after @Model.CurrentSpell.AffectedAt.Value.ToDateTimeUtc().ToString("g")

    + }
    - } +

    Would you like to apply this spell?

    + + + - - + @if (Model.CurrentSpell?.Type == MagicSpellType.AuthPasswordReset) + { +
    + + +
    + } + +
    + +
    + +
    +
    } -
    - -
    -
    Solar Network
    -
    - - Solsynth LLC - - © @DateTime.Now.Year -
    - Powered by - - DysonNetwork.Sphere - + +
    +
    Solar Network
    +
    + + Solsynth LLC + + © @DateTime.Now.Year +
    + Powered by + + DysonNetwork.Sphere + +
    -
    \ No newline at end of file +
    diff --git a/DysonNetwork.Sphere/package.json b/DysonNetwork.Sphere/package.json index b93b1a4..21a1ad7 100644 --- a/DysonNetwork.Sphere/package.json +++ b/DysonNetwork.Sphere/package.json @@ -6,7 +6,8 @@ "css:build": "npx @tailwindcss/cli -i ./wwwroot/css/site.css -o ./wwwroot/css/styles.css" }, "devDependencies": { + "@tailwindcss/cli": "^4.1.7", "@tailwindcss/postcss": "^4.1.7", - "@tailwindcss/cli": "^4.1.7" + "daisyui": "^5.0.46" } } \ No newline at end of file diff --git a/DysonNetwork.Sphere/wwwroot/css/site.css b/DysonNetwork.Sphere/wwwroot/css/site.css index a9c9763..6f172a5 100644 --- a/DysonNetwork.Sphere/wwwroot/css/site.css +++ b/DysonNetwork.Sphere/wwwroot/css/site.css @@ -1,10 +1,88 @@ @import "tailwindcss"; +@plugin "daisyui"; + @layer theme, base, components, utilities; + @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/preflight.css" layer(base); @import "tailwindcss/utilities.css" layer(utilities); +@theme { + --font-sans: "Nunito", sans-serif; + --font-mono: "Noto Sans Mono", monospace; +} + +@plugin "daisyui/theme" { + name: "light"; + default: true; + prefersdark: false; + color-scheme: "light"; + --color-base-100: oklch(100% 0 0); + --color-base-200: oklch(98% 0 0); + --color-base-300: oklch(95% 0 0); + --color-base-content: oklch(21% 0.006 285.885); + --color-primary: oklch(62% 0.0873 281deg); + --color-primary-content: oklch(93% 0.034 272.788); + --color-secondary: oklch(62% 0.214 259.815); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(82% 0.111 230.318); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(79% 0.209 151.711); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.5rem; + --radius-box: 1rem; + --size-selector: 0.28125rem; + --size-field: 0.28125rem; + --border: 1px; + --depth: 1; + --noise: 1; +} + +@plugin "daisyui/theme" { + name: "dark"; + default: false; + prefersdark: true; + color-scheme: "dark"; + --color-base-100: oklch(0% 0 0); + --color-base-200: oklch(20% 0.016 285.938); + --color-base-300: oklch(25% 0.013 285.805); + --color-base-content: oklch(97.807% 0.029 256.847); + --color-primary: oklch(50% 0.0873 281deg); + --color-primary-content: oklch(96% 0.018 272.314); + --color-secondary: oklch(62% 0.214 259.815); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(21% 0.006 285.885); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(82% 0.111 230.318); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(79% 0.209 151.711); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(64% 0.246 16.439); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.5rem; + --radius-box: 1rem; + --size-selector: 0.28125rem; + --size-field: 0.28125rem; + --border: 1px; + --depth: 1; + --noise: 1; +} + @layer base { html, body { padding: 0; @@ -12,6 +90,10 @@ box-sizing: border-box; } + .material-symbols-outlined { + font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; + } + /* For Firefox. */ * { scrollbar-width: none; @@ -23,14 +105,6 @@ } } -.btn-primary { - @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors dark:bg-blue-600 dark:hover:bg-blue-700; -} - -.btn-text { - @apply text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300; -} - .container-default { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; } \ No newline at end of file diff --git a/DysonNetwork.Sphere/wwwroot/css/styles.css b/DysonNetwork.Sphere/wwwroot/css/styles.css index dca1395..f20e8d0 100644 --- a/DysonNetwork.Sphere/wwwroot/css/styles.css +++ b/DysonNetwork.Sphere/wwwroot/css/styles.css @@ -3,46 +3,14 @@ @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-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-yellow-100: oklch(97.3% 0.071 103.193); - --color-yellow-200: oklch(94.5% 0.129 101.54); - --color-yellow-800: oklch(47.6% 0.114 61.907); - --color-yellow-900: oklch(42.1% 0.095 57.708); - --color-green-100: oklch(96.2% 0.044 156.743); - --color-green-200: oklch(92.5% 0.084 155.995); - --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-800: oklch(44.8% 0.119 151.328); - --color-green-900: oklch(39.3% 0.095 152.535); - --color-blue-100: oklch(93.2% 0.032 255.585); - --color-blue-300: oklch(80.9% 0.105 251.813); + --font-sans: "Nunito", sans-serif; + --font-mono: "Noto Sans Mono", monospace; --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-900: oklch(37.9% 0.146 265.522); - --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-white: #fff; + --color-black: #000; --spacing: 0.25rem; + --container-xs: 20rem; --container-md: 28rem; - --container-lg: 32rem; - --container-2xl: 42rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: 0.75rem; @@ -61,17 +29,11 @@ --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-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; - --font-weight-extrabold: 800; - --tracking-tight: -0.025em; --radius-md: 0.375rem; - --radius-lg: 0.5rem; - --default-transition-duration: 150ms; - --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + --blur-md: 12px; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } @@ -222,27 +184,1178 @@ } } @layer utilities { + .tooltip { + position: relative; + display: inline-block; + --tt-bg: var(--color-neutral); + --tt-off: calc(100% + 0.5rem); + --tt-tail: calc(100% + 1px + 0.25rem); + > :where(.tooltip-content), &:where([data-tip]):before { + position: absolute; + max-width: 20rem; + border-radius: var(--radius-field); + padding-inline: calc(0.25rem * 2); + padding-block: calc(0.25rem * 1); + text-align: center; + white-space: normal; + color: var(--color-neutral-content); + opacity: 0%; + font-size: 0.875rem; + line-height: 1.25; + transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms; + background-color: var(--tt-bg); + width: max-content; + pointer-events: none; + z-index: 2; + --tw-content: attr(data-tip); + content: var(--tw-content); + } + &:after { + position: absolute; + position: absolute; + opacity: 0%; + background-color: var(--tt-bg); + transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms; + content: ""; + pointer-events: none; + width: 0.625rem; + height: 0.25rem; + display: block; + mask-repeat: no-repeat; + mask-position: -1px 0; + --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); + mask-image: var(--mask-tooltip); + } + &.tooltip-open, &[data-tip]:not([data-tip=""]):hover, &:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover, &:has(:focus-visible) { + > .tooltip-content, &[data-tip]:before, &:after { + opacity: 100%; + --tt-pos: 0rem; + transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; + } + } + > .tooltip-content, &[data-tip]:before { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); + inset: auto auto var(--tt-off) 50%; + } + &:after { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); + inset: auto auto var(--tt-tail) 50%; + } + } + .tab { + position: relative; + display: inline-flex; + cursor: pointer; + appearance: none; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; + webkit-user-select: none; + user-select: none; + &:hover { + @media (hover: hover) { + color: var(--color-base-content); + } + } + --tab-p: 1rem; + --tab-bg: var(--color-base-100); + --tab-border-color: var(--color-base-300); + --tab-radius-ss: 0; + --tab-radius-se: 0; + --tab-radius-es: 0; + --tab-radius-ee: 0; + --tab-order: 0; + --tab-radius-min: calc(0.75rem - var(--border)); + border-color: #0000; + order: var(--tab-order); + height: var(--tab-height); + font-size: 0.875rem; + padding-inline-start: var(--tab-p); + padding-inline-end: var(--tab-p); + &:is(input[type="radio"]) { + min-width: fit-content; + &:after { + content: attr(aria-label); + } + } + &:is(label) { + position: relative; + input { + position: absolute; + inset: calc(0.25rem * 0); + cursor: pointer; + appearance: none; + opacity: 0%; + } + } + &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"]) { + & + .tab-content { + display: block; + height: calc(100% - var(--tab-height) + var(--border)); + } + } + &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"]) { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); + } + } + &:not(input):empty { + flex-grow: 1; + cursor: default; + } + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus-visible, &:is(label:has(:checked:focus-visible)) { + outline: 2px solid currentColor; + outline-offset: -5px; + } + &[disabled] { + pointer-events: none; + opacity: 40%; + } + } + .menu { + display: flex; + width: fit-content; + flex-direction: column; + flex-wrap: wrap; + padding: calc(0.25rem * 2); + --menu-active-fg: var(--color-neutral-content); + --menu-active-bg: var(--color-neutral); + font-size: 0.875rem; + :where(li ul) { + position: relative; + margin-inline-start: calc(0.25rem * 4); + padding-inline-start: calc(0.25rem * 2); + white-space: nowrap; + &:before { + position: absolute; + inset-inline-start: calc(0.25rem * 0); + top: calc(0.25rem * 3); + bottom: calc(0.25rem * 3); + background-color: var(--color-base-content); + opacity: 10%; + width: var(--border); + content: ""; + } + } + :where(li > .menu-dropdown:not(.menu-dropdown-show)) { + display: none; + } + :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { + display: grid; + grid-auto-flow: column; + align-content: flex-start; + align-items: center; + gap: calc(0.25rem * 2); + border-radius: var(--radius-field); + padding-inline: calc(0.25rem * 3); + padding-block: calc(0.25rem * 1.5); + text-align: start; + transition-property: color, background-color, box-shadow; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + grid-auto-columns: minmax(auto, max-content) auto max-content; + text-wrap: balance; + user-select: none; + } + :where(li > details > summary) { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + &::-webkit-details-marker { + display: none; + } + } + :where(li > details > summary), :where(li > .menu-dropdown-toggle) { + &:after { + justify-self: flex-end; + display: block; + height: 0.375rem; + width: 0.375rem; + rotate: -135deg; + translate: 0 -1px; + transition-property: rotate, translate; + transition-duration: 0.2s; + content: ""; + transform-origin: 50% 50%; + box-shadow: 2px 2px inset; + pointer-events: none; + } + } + :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { + rotate: 45deg; + translate: 0 1px; + } + :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) { + &.menu-focus, &:focus-visible { + cursor: pointer; + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + color: var(--color-base-content); + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + } + :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) { + cursor: pointer; + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset; + } + :where(li:empty) { + background-color: var(--color-base-content); + opacity: 10%; + margin: 0.5rem 1rem; + height: 1px; + } + :where(li) { + position: relative; + display: flex; + flex-shrink: 0; + flex-direction: column; + flex-wrap: wrap; + align-items: stretch; + .badge { + justify-self: flex-end; + } + & > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + color: var(--menu-active-fg); + background-color: var(--menu-active-bg); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + &:not(&:active) { + box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg); + } + } + &.menu-disabled { + pointer-events: none; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + } + .dropdown:focus-within { + .menu-dropdown-toggle:after { + rotate: 45deg; + translate: 0 1px; + } + } + .dropdown-content { + margin-top: calc(0.25rem * 2); + padding: calc(0.25rem * 2); + &:before { + display: none; + } + } + } + .btn { + :where(&) { + width: unset; + } + display: inline-flex; + flex-shrink: 0; + cursor: pointer; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + gap: calc(0.25rem * 1.5); + text-align: center; + vertical-align: middle; + outline-offset: 2px; + webkit-user-select: none; + user-select: none; + padding-inline: var(--btn-p); + color: var(--btn-fg); + --tw-prose-links: var(--btn-fg); + height: var(--size); + font-size: var(--fontsize, 0.875rem); + font-weight: 600; + outline-color: var(--btn-color, var(--color-base-content)); + transition-property: color, background-color, border-color, box-shadow; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-duration: 0.2s; + border-start-start-radius: var(--join-ss, var(--radius-field)); + border-start-end-radius: var(--join-se, var(--radius-field)); + border-end-start-radius: var(--join-es, var(--radius-field)); + border-end-end-radius: var(--join-ee, var(--radius-field)); + background-color: var(--btn-bg); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--btn-noise); + border-width: var(--border); + border-style: solid; + border-color: var(--btn-border); + text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15)); + touch-action: manipulation; + box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow); + --size: calc(var(--size-field, 0.25rem) * 10); + --btn-bg: var(--btn-color, var(--color-base-200)); + --btn-fg: var(--color-base-content); + --btn-p: 1rem; + --btn-border: var(--btn-bg); + @supports (color: color-mix(in lab, red, red)) { + --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); + } + --btn-shadow: 0 3px 2px -2px var(--btn-bg), + 0 4px 3px -2px var(--btn-bg); + @supports (color: color-mix(in lab, red, red)) { + --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), + 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); + } + --btn-noise: var(--fx-noise); + .prose & { + text-decoration-line: none; + } + @media (hover: hover) { + &:hover { + --btn-bg: var(--btn-color, var(--color-base-200)); + @supports (color: color-mix(in lab, red, red)) { + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); + } + } + } + &:focus-visible { + outline-width: 2px; + outline-style: solid; + isolation: isolate; + } + &:active:not(.btn-active) { + translate: 0 0.5px; + --btn-bg: var(--btn-color, var(--color-base-200)); + @supports (color: color-mix(in lab, red, red)) { + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); + } + --btn-border: var(--btn-color, var(--color-base-200)); + @supports (color: color-mix(in lab, red, red)) { + --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); + } + --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); + } + &:is(:disabled, [disabled], .btn-disabled) { + &:not(.btn-link, .btn-ghost) { + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + box-shadow: none; + } + pointer-events: none; + --btn-border: #0000; + --btn-noise: none; + --btn-fg: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); + } + @media (hover: hover) { + &:hover { + pointer-events: none; + background-color: var(--color-neutral); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); + } + --btn-border: #0000; + --btn-fg: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); + } + } + } + } + &:is(input[type="checkbox"], input[type="radio"]) { + appearance: none; + &::after { + content: attr(aria-label); + } + } + &:where(input:checked:not(.filter .btn)) { + --btn-color: var(--color-primary); + --btn-fg: var(--color-primary-content); + isolation: isolate; + } + } + .loading { + pointer-events: none; + display: inline-block; + aspect-ratio: 1 / 1; + background-color: currentColor; + vertical-align: middle; + width: calc(var(--size-selector, 0.25rem) * 6); + mask-size: 100%; + mask-repeat: no-repeat; + mask-position: center; + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); + } .invisible { visibility: hidden; } + .tabs-lift { + --tabs-height: auto; + --tabs-direction: row; + > .tab { + --tab-border: 0 0 var(--border) 0; + --tab-radius-ss: min(var(--radius-field), var(--tab-radius-min)); + --tab-radius-se: min(var(--radius-field), var(--tab-radius-min)); + --tab-radius-es: 0; + --tab-radius-ee: 0; + --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); + --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; + --tab-corner-width: calc(100% + min(var(--radius-field), var(--tab-radius-min)) * 2); + --tab-corner-height: min(var(--radius-field), var(--tab-radius-min)); + --tab-corner-position: top left, top right; + border-width: var(--tab-border); + border-start-start-radius: var(--tab-radius-ss); + border-start-end-radius: var(--tab-radius-se); + border-end-start-radius: var(--tab-radius-es); + border-end-end-radius: var(--tab-radius-ee); + padding: var(--tab-paddings); + border-color: var(--tab-border-colors); + &:is(.tab-active, [aria-selected="true"]):not(.tab-disabled, [disabled]), &:is(input:checked, label:has(:checked)) { + --tab-border: var(--border) var(--border) 0 var(--border); + --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 + var(--tab-border-color); + --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) + calc(var(--tab-p) - var(--border)); + --tab-inset: auto auto 0 auto; + --tab-grad: calc(69% - var(--border)); + --radius-start: radial-gradient( + circle at top left, + #0000 var(--tab-grad), + var(--tab-border-color) calc(var(--tab-grad) + 0.25px), + var(--tab-border-color) calc(var(--tab-grad) + var(--border)), + var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px) + ); + --radius-end: radial-gradient( + circle at top right, + #0000 var(--tab-grad), + var(--tab-border-color) calc(var(--tab-grad) + 0.25px), + var(--tab-border-color) calc(var(--tab-grad) + var(--border)), + var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px) + ); + background-color: var(--tab-bg); + &:before { + z-index: 1; + content: ""; + display: block; + position: absolute; + width: var(--tab-corner-width); + height: var(--tab-corner-height); + background-position: var(--tab-corner-position); + background-image: var(--radius-start), var(--radius-end); + background-size: min(var(--radius-field), var(--tab-radius-min)) min(var(--radius-field), var(--tab-radius-min)); + background-repeat: no-repeat; + inset: var(--tab-inset); + } + &:first-child:before { + --radius-start: none; + } + [dir="rtl"] &:first-child:before { + transform: rotateY(180deg); + } + &:last-child:before { + --radius-end: none; + } + [dir="rtl"] &:last-child:before { + transform: rotateY(180deg); + } + } + } + &:has(.tab-content) { + > .tab:first-child { + &:not(.tab-active, [aria-selected="true"]) { + --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 + var(--tab-border-color); + } + } + } + .tab-content { + --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; + --tabcontent-radius-ss: 0; + --tabcontent-radius-se: var(--radius-box); + --tabcontent-radius-es: var(--radius-box); + --tabcontent-radius-ee: var(--radius-box); + } + :checked, label:has(:checked), :is(.tab-active, [aria-selected="true"]) { + & + .tab-content { + &:nth-child(1), &:nth-child(n + 3) { + --tabcontent-radius-ss: var(--radius-box); + } + } + } + } + .list { + display: flex; + flex-direction: column; + font-size: 0.875rem; + :where(.list-row) { + --list-grid-cols: minmax(0, auto) 1fr; + position: relative; + display: grid; + grid-auto-flow: column; + gap: calc(0.25rem * 4); + border-radius: var(--radius-box); + padding: calc(0.25rem * 4); + word-break: break-word; + grid-template-columns: var(--list-grid-cols); + &:has(.list-col-grow:nth-child(1)) { + --list-grid-cols: 1fr; + } + &:has(.list-col-grow:nth-child(2)) { + --list-grid-cols: minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(3)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(4)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(5)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(6)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) + minmax(0, auto) 1fr; + } + :not(.list-col-wrap) { + grid-row-start: 1; + } + } + & > :not(:last-child) { + &.list-row, .list-row { + &:after { + content: ""; + border-bottom: var(--border) solid; + inset-inline: var(--radius-box); + position: absolute; + bottom: calc(0.25rem * 0); + border-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); + } + } + } + } + } + .input { + cursor: text; + border: var(--border) solid #0000; + position: relative; + display: inline-flex; + flex-shrink: 1; + appearance: none; + align-items: center; + gap: calc(0.25rem * 2); + background-color: var(--color-base-100); + padding-inline: calc(0.25rem * 3); + vertical-align: middle; + white-space: nowrap; + width: clamp(3rem, 20rem, 100%); + height: var(--size); + font-size: 0.875rem; + touch-action: manipulation; + border-start-start-radius: var(--join-ss, var(--radius-field)); + border-start-end-radius: var(--join-se, var(--radius-field)); + border-end-start-radius: var(--join-es, var(--radius-field)); + border-end-end-radius: var(--join-ee, var(--radius-field)); + border-color: var(--input-color); + box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + } + --size: calc(var(--size-field, 0.25rem) * 10); + --input-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); + } + &:where(input) { + display: inline-flex; + } + :where(input) { + display: inline-flex; + height: 100%; + width: 100%; + appearance: none; + background-color: transparent; + border: none; + &:focus, &:focus-within { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + } + :where(input[type="url"]), :where(input[type="email"]) { + direction: ltr; + } + :where(input[type="date"]) { + display: inline-block; + } + &:focus, &:focus-within { + --input-color: var(--color-base-content); + box-shadow: 0 1px var(--input-color); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); + } + outline: 2px solid var(--input-color); + outline-offset: 2px; + isolation: isolate; + z-index: 1; + } + &:has(> input[disabled]), &:is(:disabled, [disabled]) { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + } + &::placeholder { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + box-shadow: none; + } + &:has(> input[disabled]) > input[disabled] { + cursor: not-allowed; + } + &::-webkit-date-and-time-value { + text-align: inherit; + } + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * -3); + } + } + &::-webkit-calendar-picker-indicator { + position: absolute; + inset-inline-end: 0.75em; + } + } + .table { + font-size: 0.875rem; + position: relative; + width: 100%; + border-radius: var(--radius-box); + text-align: left; + &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + text-align: right; + } + tr.row-hover { + &, &:nth-child(even) { + &:hover { + @media (hover: hover) { + background-color: var(--color-base-200); + } + } + } + } + :where(th, td) { + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 3); + vertical-align: middle; + } + :where(thead, tfoot) { + white-space: nowrap; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + font-size: 0.875rem; + font-weight: 600; + } + :where(tfoot) { + border-top: var(--border) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); + } + } + :where(.table-pin-rows thead tr) { + position: sticky; + top: calc(0.25rem * 0); + z-index: 1; + background-color: var(--color-base-100); + } + :where(.table-pin-rows tfoot tr) { + position: sticky; + bottom: calc(0.25rem * 0); + z-index: 1; + background-color: var(--color-base-100); + } + :where(.table-pin-cols tr th) { + position: sticky; + right: calc(0.25rem * 0); + left: calc(0.25rem * 0); + background-color: var(--color-base-100); + } + :where(thead tr, tbody tr:not(:last-child)) { + border-bottom: var(--border) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); + } + } + } + .steps { + display: inline-grid; + grid-auto-flow: column; + overflow: hidden; + overflow-x: auto; + counter-reset: step; + grid-auto-columns: 1fr; + .step { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: auto; + grid-template-rows: repeat(2, minmax(0, 1fr)); + grid-template-rows: 40px 1fr; + place-items: center; + text-align: center; + min-width: 4rem; + --step-bg: var(--color-base-300); + --step-fg: var(--color-base-content); + &:before { + top: calc(0.25rem * 0); + grid-column-start: 1; + grid-row-start: 1; + height: calc(0.25rem * 2); + width: 100%; + border: 1px solid; + color: var(--step-bg); + background-color: var(--step-bg); + --tw-content: ""; + content: var(--tw-content); + margin-inline-start: -100%; + } + > .step-icon, &:not(:has(.step-icon)):after { + content: counter(step); + counter-increment: step; + z-index: 1; + color: var(--step-fg); + background-color: var(--step-bg); + border: 1px solid var(--step-bg); + position: relative; + grid-column-start: 1; + grid-row-start: 1; + display: grid; + height: calc(0.25rem * 8); + width: calc(0.25rem * 8); + place-items: center; + place-self: center; + border-radius: calc(infinity * 1px); + } + &:first-child:before { + content: none; + } + &[data-content]:after { + content: attr(data-content); + } + } + .step-neutral { + + .step-neutral:before, &:after, > .step-icon { + --step-bg: var(--color-neutral); + --step-fg: var(--color-neutral-content); + } + } + .step-primary { + + .step-primary:before, &:after, > .step-icon { + --step-bg: var(--color-primary); + --step-fg: var(--color-primary-content); + } + } + .step-secondary { + + .step-secondary:before, &:after, > .step-icon { + --step-bg: var(--color-secondary); + --step-fg: var(--color-secondary-content); + } + } + .step-accent { + + .step-accent:before, &:after, > .step-icon { + --step-bg: var(--color-accent); + --step-fg: var(--color-accent-content); + } + } + .step-info { + + .step-info:before, &:after, > .step-icon { + --step-bg: var(--color-info); + --step-fg: var(--color-info-content); + } + } + .step-success { + + .step-success:before, &:after, > .step-icon { + --step-bg: var(--color-success); + --step-fg: var(--color-success-content); + } + } + .step-warning { + + .step-warning:before, &:after, > .step-icon { + --step-bg: var(--color-warning); + --step-fg: var(--color-warning-content); + } + } + .step-error { + + .step-error:before, &:after, > .step-icon { + --step-bg: var(--color-error); + --step-fg: var(--color-error-content); + } + } + } + .select { + border: var(--border) solid #0000; + position: relative; + display: inline-flex; + flex-shrink: 1; + appearance: none; + align-items: center; + gap: calc(0.25rem * 1.5); + background-color: var(--color-base-100); + padding-inline-start: calc(0.25rem * 4); + padding-inline-end: calc(0.25rem * 7); + vertical-align: middle; + width: clamp(3rem, 20rem, 100%); + height: var(--size); + font-size: 0.875rem; + touch-action: manipulation; + border-start-start-radius: var(--join-ss, var(--radius-field)); + border-start-end-radius: var(--join-se, var(--radius-field)); + border-end-start-radius: var(--join-es, var(--radius-field)); + border-end-end-radius: var(--join-ee, var(--radius-field)); + background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); + background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); + background-size: 4px 4px, 4px 4px; + background-repeat: no-repeat; + text-overflow: ellipsis; + box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + } + border-color: var(--input-color); + --input-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); + } + --size: calc(var(--size-field, 0.25rem) * 10); + [dir="rtl"] & { + background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%); + } + select { + margin-inline-start: calc(0.25rem * -4); + margin-inline-end: calc(0.25rem * -7); + width: calc(100% + 2.75rem); + appearance: none; + padding-inline-start: calc(0.25rem * 4); + padding-inline-end: calc(0.25rem * 7); + height: calc(100% - 2px); + background: inherit; + border-radius: inherit; + border-style: none; + &:focus, &:focus-within { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:not(:last-child) { + margin-inline-end: calc(0.25rem * -5.5); + background-image: none; + } + } + &:focus, &:focus-within { + --input-color: var(--color-base-content); + box-shadow: 0 1px var(--input-color); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); + } + outline: 2px solid var(--input-color); + outline-offset: 2px; + isolation: isolate; + z-index: 1; + } + &:has(> select[disabled]), &:is(:disabled, [disabled]) { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + } + &::placeholder { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + } + &:has(> select[disabled]) > select[disabled] { + cursor: not-allowed; + } + } + .card { + position: relative; + display: flex; + flex-direction: column; + border-radius: var(--radius-box); + outline-width: 2px; + transition: outline 0.2s ease-in-out; + outline: 0 solid #0000; + outline-offset: 2px; + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus-visible { + outline-color: currentColor; + } + :where(figure:first-child) { + overflow: hidden; + border-start-start-radius: inherit; + border-start-end-radius: inherit; + border-end-start-radius: unset; + border-end-end-radius: unset; + } + :where(figure:last-child) { + overflow: hidden; + border-start-start-radius: unset; + border-start-end-radius: unset; + border-end-start-radius: inherit; + border-end-end-radius: inherit; + } + &:where(.card-border) { + border: var(--border) solid var(--color-base-200); + } + &:where(.card-dash) { + border: var(--border) dashed var(--color-base-200); + } + &.image-full { + display: grid; + > * { + grid-column-start: 1; + grid-row-start: 1; + } + > .card-body { + position: relative; + color: var(--color-neutral-content); + } + :where(figure) { + overflow: hidden; + border-radius: inherit; + } + > figure img { + height: 100%; + object-fit: cover; + filter: brightness(28%); + } + } + figure { + display: flex; + align-items: center; + justify-content: center; + } + &:has(> input:is(input[type="checkbox"], input[type="radio"])) { + cursor: pointer; + user-select: none; + } + &:has(> :checked) { + outline: 2px solid currentColor; + } + } + .menu-horizontal { + display: inline-flex; + flex-direction: row; + & > li:not(.menu-title) > details > ul { + position: absolute; + margin-inline-start: calc(0.25rem * 0); + margin-top: calc(0.25rem * 4); + padding-block: calc(0.25rem * 2); + padding-inline-end: calc(0.25rem * 2); + } + & > li > details > ul { + &:before { + content: none; + } + } + :where(& > li:not(.menu-title) > details > ul) { + border-radius: var(--radius-box); + background-color: var(--color-base-100); + box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1); + } + } + .avatar { + position: relative; + display: inline-flex; + vertical-align: middle; + & > div { + display: block; + aspect-ratio: 1 / 1; + overflow: hidden; + } + img { + height: 100%; + width: 100%; + object-fit: cover; + } + } + .radio { + position: relative; + display: inline-block; + flex-shrink: 0; + cursor: pointer; + appearance: none; + border-radius: calc(infinity * 1px); + padding: calc(0.25rem * 1); + vertical-align: middle; + border: var(--border) solid var(--input-color, currentColor); + @supports (color: color-mix(in lab, red, red)) { + border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000)); + } + box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset; + --size: calc(var(--size-selector, 0.25rem) * 6); + width: var(--size); + height: var(--size); + color: var(--input-color, currentColor); + &:before { + display: block; + width: 100%; + height: 100%; + border-radius: calc(infinity * 1px); + --tw-content: ""; + content: var(--tw-content); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + } + &:focus-visible { + outline: 2px solid currentColor; + } + &:checked, &[aria-checked="true"] { + animation: radio 0.2s ease-out; + border-color: currentColor; + background-color: var(--color-base-100); + &:before { + background-color: currentColor; + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); + } + @media (forced-colors: active) { + &:before { + outline-style: var(--tw-outline-style); + outline-width: 1px; + outline-offset: calc(1px * -1); + } + } + @media print { + &:before { + outline: 0.25rem solid; + outline-offset: -1rem; + } + } + } + &:disabled { + cursor: not-allowed; + opacity: 20%; + } + } + .stats { + position: relative; + display: inline-grid; + grid-auto-flow: column; + overflow-x: auto; + border-radius: var(--radius-box); + } + .progress { + position: relative; + height: calc(0.25rem * 2); + width: 100%; + appearance: none; + overflow: hidden; + border-radius: var(--radius-box); + background-color: currentColor; + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, currentColor 20%, transparent); + } + color: var(--color-base-content); + &:indeterminate { + background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); + background-size: 200%; + background-position-x: 15%; + animation: progress 5s ease-in-out infinite; + @supports (-moz-appearance: none) { + &::-moz-progress-bar { + background-color: transparent; + background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); + background-size: 200%; + background-position-x: 15%; + animation: progress 5s ease-in-out infinite; + } + } + } + @supports (-moz-appearance: none) { + &::-moz-progress-bar { + border-radius: var(--radius-box); + background-color: currentColor; + } + } + @supports (-webkit-appearance: none) { + &::-webkit-progress-bar { + border-radius: var(--radius-box); + background-color: transparent; + } + &::-webkit-progress-value { + border-radius: var(--radius-box); + background-color: currentColor; + } + } + } .absolute { position: absolute; } .fixed { position: fixed; } - .relative { - position: relative; - } .static { position: static; } .sticky { position: sticky; } - .inset-0 { - inset: calc(var(--spacing) * 0); - } .top-0 { top: calc(var(--spacing) * 0); } @@ -252,15 +1365,64 @@ .right-0 { right: calc(var(--spacing) * 0); } - .bottom-0 { - bottom: calc(var(--spacing) * 0); - } .left-0 { left: calc(var(--spacing) * 0); } + .hero-content { + isolation: isolate; + display: flex; + max-width: 80rem; + align-items: center; + justify-content: center; + gap: calc(0.25rem * 4); + padding: calc(0.25rem * 4); + } .z-50 { z-index: 50; } + .tab-content { + order: var(--tabcontent-order); + display: none; + border-color: transparent; + --tabcontent-radius-ss: 0; + --tabcontent-radius-se: 0; + --tabcontent-radius-es: 0; + --tabcontent-radius-ee: 0; + --tabcontent-order: 1; + width: 100%; + margin: var(--tabcontent-margin); + border-width: var(--border); + border-start-start-radius: var(--tabcontent-radius-ss); + border-start-end-radius: var(--tabcontent-radius-se); + border-end-start-radius: var(--tabcontent-radius-es); + border-end-end-radius: var(--tabcontent-radius-ee); + } + .hero { + display: grid; + width: 100%; + place-items: center; + background-size: cover; + background-position: center; + & > * { + grid-column-start: 1; + grid-row-start: 1; + } + } + .stat-value { + grid-column-start: 1; + white-space: nowrap; + font-size: 2rem; + font-weight: 800; + } + .stat-title { + grid-column-start: 1; + white-space: nowrap; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + font-size: 0.75rem; + } .container { width: 100%; @media (width >= 40rem) { @@ -279,9 +1441,110 @@ max-width: 96rem; } } + .filter { + display: flex; + flex-wrap: wrap; + input[type="radio"] { + width: auto; + } + input { + overflow: hidden; + opacity: 100%; + scale: 1; + transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s; + &:not(:last-child) { + margin-inline-end: calc(0.25rem * 1); + } + &.filter-reset { + aspect-ratio: 1 / 1; + &::after { + content: "×"; + } + } + } + &:not(:has(input:checked:not(.filter-reset))) { + .filter-reset, input[type="reset"] { + scale: 0; + border-width: 0; + margin-inline: calc(0.25rem * 0); + width: calc(0.25rem * 0); + padding-inline: calc(0.25rem * 0); + opacity: 0%; + } + } + &:has(input:checked:not(.filter-reset)) { + input:not(:checked, .filter-reset, input[type="reset"]) { + scale: 0; + border-width: 0; + margin-inline: calc(0.25rem * 0); + width: calc(0.25rem * 0); + padding-inline: calc(0.25rem * 0); + opacity: 0%; + } + } + } .mx-auto { margin-inline: auto; } + .input-sm { + --size: calc(var(--size-field, 0.25rem) * 8); + font-size: 0.75rem; + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -2); + margin-inline-end: calc(0.25rem * -3); + } + } + } + .my-8 { + margin-block: calc(var(--spacing) * 8); + } + .label { + display: inline-flex; + align-items: center; + gap: calc(0.25rem * 1.5); + white-space: nowrap; + color: currentColor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentColor 60%, transparent); + } + &:has(input) { + cursor: pointer; + } + &:is(.input > *, .select > *) { + display: flex; + height: calc(100% - 0.5rem); + align-items: center; + padding-inline: calc(0.25rem * 3); + white-space: nowrap; + font-size: inherit; + &:first-child { + margin-inline-start: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * 3); + border-inline-end: var(--border) solid currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); + } + } + &:last-child { + margin-inline-start: calc(0.25rem * 3); + margin-inline-end: calc(0.25rem * -3); + border-inline-start: var(--border) solid currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); + } + } + } + } + .join-item { + &:where(*:not(:first-child, :disabled, [disabled], .btn-disabled)) { + margin-inline-start: calc(var(--border, 1px) * -1); + margin-block-start: 0; + } + &:where(*:is(:disabled, [disabled], .btn-disabled)) { + border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px); + } + } .mt-1 { margin-top: calc(var(--spacing) * 1); } @@ -291,27 +1554,15 @@ .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-8 { margin-top: calc(var(--spacing) * 8); } - .mt-10 { - margin-top: calc(var(--spacing) * 10); - } - .mt-\[64px\] { - margin-top: 64px; - } .mr-1 { margin-right: calc(var(--spacing) * 1); } - .-mb-px { - margin-bottom: -1px; - } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } @@ -330,14 +1581,267 @@ .mb-8 { margin-bottom: calc(var(--spacing) * 8); } - .ml-3 { - margin-left: calc(var(--spacing) * 3); - } .ml-4 { margin-left: calc(var(--spacing) * 4); } - .ml-auto { - margin-left: auto; + .status { + display: inline-block; + aspect-ratio: 1 / 1; + width: calc(0.25rem * 2); + height: calc(0.25rem * 2); + border-radius: var(--radius-selector); + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + background-position: center; + background-repeat: no-repeat; + vertical-align: middle; + color: color-mix(in srgb, #000 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in srgb, #000 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-black) 30%, transparent); + } + } + background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000 ); + box-shadow: 0 2px 3px -1px currentColor; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); + } + } + .badge { + display: inline-flex; + align-items: center; + justify-content: center; + gap: calc(0.25rem * 2); + border-radius: var(--radius-selector); + vertical-align: middle; + color: var(--badge-fg); + border: var(--border) solid var(--badge-color, var(--color-base-200)); + font-size: 0.875rem; + width: fit-content; + padding-inline: calc(0.25rem * 3 - var(--border)); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + background-color: var(--badge-bg); + --badge-bg: var(--badge-color, var(--color-base-100)); + --badge-fg: var(--color-base-content); + --size: calc(var(--size-selector, 0.25rem) * 6); + height: var(--size); + } + .tabs { + display: flex; + flex-wrap: wrap; + --tabs-height: auto; + --tabs-direction: row; + --tab-height: calc(var(--size-field, 0.25rem) * 10); + height: var(--tabs-height); + flex-direction: var(--tabs-direction); + } + .navbar { + display: flex; + width: 100%; + align-items: center; + padding: 0.5rem; + min-height: 4rem; + } + .footer { + display: grid; + width: 100%; + grid-auto-flow: row; + place-items: start; + column-gap: calc(0.25rem * 4); + row-gap: calc(0.25rem * 10); + font-size: 0.875rem; + line-height: 1.25rem; + & > * { + display: grid; + place-items: start; + gap: calc(0.25rem * 2); + } + &.footer-center { + grid-auto-flow: column dense; + place-items: center; + text-align: center; + & > * { + place-items: center; + } + } + } + .stat { + display: inline-grid; + width: 100%; + column-gap: calc(0.25rem * 4); + padding-inline: calc(0.25rem * 6); + padding-block: calc(0.25rem * 4); + grid-template-columns: repeat(1, 1fr); + &:not(:last-child) { + border-inline-end: var(--border) dashed currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); + } + border-block-end: none; + } + } + .card-body { + display: flex; + flex: auto; + flex-direction: column; + gap: calc(0.25rem * 2); + padding: var(--card-p, 1.5rem); + font-size: var(--card-fs, 0.875rem); + :where(p) { + flex-grow: 1; + } + } + .alert { + display: grid; + align-items: center; + gap: calc(0.25rem * 4); + border-radius: var(--radius-box); + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 3); + color: var(--color-base-content); + background-color: var(--alert-color, var(--color-base-200)); + justify-content: start; + justify-items: start; + grid-auto-flow: column; + grid-template-columns: auto; + text-align: start; + border: var(--border) solid var(--color-base-200); + font-size: 0.875rem; + line-height: 1.25rem; + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); + } + &:has(:nth-child(2)) { + grid-template-columns: auto minmax(auto, 1fr); + } + &.alert-outline { + background-color: transparent; + color: var(--alert-color); + box-shadow: none; + background-image: none; + } + &.alert-dash { + background-color: transparent; + color: var(--alert-color); + border-style: dashed; + box-shadow: none; + background-image: none; + } + &.alert-soft { + color: var(--alert-color, var(--color-base-content)); + background: var(--alert-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) ); + } + border-color: var(--alert-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) ); + } + box-shadow: none; + background-image: none; + } + } + .card-actions { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: calc(0.25rem * 2); + } + .avatar-placeholder { + & > div { + display: flex; + align-items: center; + justify-content: center; + } + } + .card-title { + display: flex; + align-items: center; + gap: calc(0.25rem * 2); + font-size: var(--cardtitle-fs, 1.125rem); + font-weight: 600; + } + .join { + display: inline-flex; + align-items: stretch; + --join-ss: 0; + --join-se: 0; + --join-es: 0; + --join-ee: 0; + :where(.join-item) { + border-start-start-radius: var(--join-ss, 0); + border-start-end-radius: var(--join-se, 0); + border-end-start-radius: var(--join-es, 0); + border-end-end-radius: var(--join-ee, 0); + * { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + } + > .join-item:where(:first-child) { + --join-ss: var(--radius-field); + --join-se: 0; + --join-es: var(--radius-field); + --join-ee: 0; + } + :first-child:not(:last-child) { + :where(.join-item) { + --join-ss: var(--radius-field); + --join-se: 0; + --join-es: var(--radius-field); + --join-ee: 0; + } + } + > .join-item:where(:last-child) { + --join-ss: 0; + --join-se: var(--radius-field); + --join-es: 0; + --join-ee: var(--radius-field); + } + :last-child:not(:first-child) { + :where(.join-item) { + --join-ss: 0; + --join-se: var(--radius-field); + --join-es: 0; + --join-ee: var(--radius-field); + } + } + > .join-item:where(:only-child) { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + :only-child { + :where(.join-item) { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + } + } + .chat { + display: grid; + column-gap: calc(0.25rem * 3); + padding-block: calc(0.25rem * 1); + --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); + } + .mask { + display: inline-block; + vertical-align: middle; + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; } .block { display: block; @@ -354,12 +1858,6 @@ .hidden { display: none; } - .inline { - display: inline; - } - .inline-flex { - display: inline-flex; - } .table { display: table; } @@ -369,38 +1867,29 @@ .h-6 { height: calc(var(--spacing) * 6); } - .h-8 { - height: calc(var(--spacing) * 8); - } - .h-10 { - height: calc(var(--spacing) * 10); - } - .h-16 { - height: calc(var(--spacing) * 16); - } - .h-32 { - height: calc(var(--spacing) * 32); - } - .h-\[calc\(100dvh-118px\)\] { - height: calc(100dvh - 118px); + .h-12 { + height: calc(var(--spacing) * 12); } .h-full { height: 100%; } + .min-h-full { + min-height: 100%; + } .min-h-screen { min-height: 100vh; } + .loading-lg { + width: calc(var(--size-selector, 0.25rem) * 7); + } .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); @@ -411,25 +1900,22 @@ .w-full { width: 100%; } - .max-w-2xl { - max-width: var(--container-2xl); - } .max-w-6xl { max-width: var(--container-6xl); } - .max-w-lg { - max-width: var(--container-lg); - } .max-w-md { max-width: var(--container-md); } + .max-w-xs { + max-width: var(--container-xs); + } .flex-1 { flex: 1; } - .flex-shrink { - flex-shrink: 1; + .flex-none { + flex: none; } - .flex-shrink-0 { + .shrink-0 { flex-shrink: 0; } .flex-grow { @@ -441,14 +1927,32 @@ .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .resize { - resize: both; + .link { + cursor: pointer; + text-decoration-line: underline; + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; + } } - .list-inside { - list-style-position: inside; - } - .list-disc { - list-style-type: disc; + .stats-vertical { + grid-auto-flow: row; + overflow-y: auto; + .stat:not(:last-child) { + border-inline-end: none; + border-block-end: var(--border) dashed currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); + } + } } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); @@ -459,41 +1963,21 @@ .items-center { align-items: center; } - .items-start { - align-items: flex-start; - } - .justify-around { - justify-content: space-around; - } - .justify-between { - justify-content: space-between; - } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } + .gap-3 { + gap: calc(var(--spacing) * 3); + } .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-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; @@ -508,44 +1992,29 @@ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } - .space-y-8 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))); - } - } .gap-x-6 { column-gap: calc(var(--spacing) * 6); } - .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-hidden { - overflow: hidden; + .overflow-x-auto { + overflow-x: auto; + } + .rounded { + border-radius: 0.25rem; + } + .rounded-box { + border-radius: var(--radius-box); + } + .rounded-box { + border-radius: var(--radius-box); } .rounded-full { border-radius: calc(infinity * 1px); } - .rounded-lg { - border-radius: var(--radius-lg); - } .rounded-md { border-radius: var(--radius-md); } @@ -553,66 +2022,60 @@ border-style: var(--tw-border-style); border-width: 1px; } - .border-2 { - border-style: var(--tw-border-style); - border-width: 2px; - } .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; + .badge-ghost { + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: var(--color-base-content); + background-image: none; } - .border-b-2 { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 2px; + .alert-error { + border-color: var(--color-error); + color: var(--color-error-content); + --alert-color: var(--color-error); } - .border-blue-500 { - border-color: var(--color-blue-500); + .alert-success { + border-color: var(--color-success); + color: var(--color-success-content); + --alert-color: var(--color-success); } - .border-gray-200 { - border-color: var(--color-gray-200); + .alert-warning { + border-color: var(--color-warning); + color: var(--color-warning-content); + --alert-color: var(--color-warning); } - .border-gray-300 { - border-color: var(--color-gray-300); + .border-base-300 { + border-color: var(--color-base-300); } - .border-transparent { - border-color: transparent; + .bg-base-100 { + background-color: var(--color-base-100); } - .bg-blue-100 { - background-color: var(--color-blue-100); + .bg-base-100\/35 { + background-color: var(--color-base-100); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-100) 35%, transparent); + } } - .bg-blue-500 { - background-color: var(--color-blue-500); + .bg-base-200 { + background-color: var(--color-base-200); } - .bg-blue-600 { - background-color: var(--color-blue-600); + .bg-base-300 { + background-color: var(--color-base-300); } - .bg-gray-50 { - background-color: var(--color-gray-50); + .bg-neutral { + background-color: var(--color-neutral); } - .bg-gray-100 { - background-color: var(--color-gray-100); + .loading-spinner { + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } - .bg-gray-200 { - background-color: var(--color-gray-200); + .mask-squircle { + mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e"); } - .bg-green-100 { - background-color: var(--color-green-100); - } - .bg-red-600 { - background-color: var(--color-red-600); - } - .bg-white { - background-color: var(--color-white); - } - .bg-yellow-100 { - background-color: var(--color-yellow-100); - } - .object-cover { - object-fit: cover; + .stroke-current { + stroke: currentcolor; } .p-4 { padding: calc(var(--spacing) * 4); @@ -620,68 +2083,40 @@ .p-6 { padding: calc(var(--spacing) * 6); } - .p-8 { - padding: calc(var(--spacing) * 8); + .badge-sm { + --size: calc(var(--size-selector, 0.25rem) * 5); + font-size: 0.75rem; + padding-inline: calc(0.25rem * 2.5 - var(--border)); } - .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-1 { + padding-inline: calc(var(--spacing) * 1); } .px-4 { padding-inline: calc(var(--spacing) * 4); } - .px-6 { - padding-inline: calc(var(--spacing) * 6); + .px-5 { + padding-inline: calc(var(--spacing) * 5); } .px-8 { padding-inline: calc(var(--spacing) * 8); } - .py-0 { - padding-block: calc(var(--spacing) * 0); - } - .py-0\.5 { - padding-block: calc(var(--spacing) * 0.5); - } - .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-7 { + padding-block: calc(var(--spacing) * 7); } .py-12 { padding-block: calc(var(--spacing) * 12); } - .pt-0\.5 { - padding-top: calc(var(--spacing) * 0.5); - } .pt-4 { padding-top: calc(var(--spacing) * 4); } - .pt-6 { - padding-top: calc(var(--spacing) * 6); - } - .pt-8 { - padding-top: calc(var(--spacing) * 8); - } - .pb-4 { - padding-bottom: calc(var(--spacing) * 4); + .pt-16 { + padding-top: calc(var(--spacing) * 16); } .text-center { text-align: center; @@ -689,8 +2124,8 @@ .text-left { text-align: left; } - .text-right { - text-align: right; + .font-mono { + font-family: var(--font-mono); } .text-2xl { font-size: var(--text-2xl); @@ -724,22 +2159,10 @@ font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } - .leading-6 { - --tw-leading: calc(var(--spacing) * 6); - line-height: calc(var(--spacing) * 6); - } - .leading-8 { - --tw-leading: calc(var(--spacing) * 8); - line-height: calc(var(--spacing) * 8); - } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } - .font-extrabold { - --tw-font-weight: var(--font-weight-extrabold); - font-weight: var(--font-weight-extrabold); - } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); @@ -748,52 +2171,52 @@ --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); + .link-primary { + color: var(--color-primary); + @media (hover: hover) { + &:hover { + color: var(--color-primary); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-primary) 80%, #000); + } + } + } + } + .text-base-content\/70 { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 70%, transparent); + } } .text-blue-600 { color: var(--color-blue-600); } - .text-gray-500 { - color: var(--color-gray-500); + .text-error { + color: var(--color-error); } - .text-gray-600 { - color: var(--color-gray-600); + .text-neutral-content { + color: var(--color-neutral-content); } - .text-gray-700 { - color: var(--color-gray-700); - } - .text-gray-800 { - color: var(--color-gray-800); - } - .text-gray-900 { - color: var(--color-gray-900); - } - .text-green-500 { - color: var(--color-green-500); - } - .text-green-600 { - color: var(--color-green-600); - } - .text-green-800 { - color: var(--color-green-800); - } - .text-red-500 { - color: var(--color-red-500); - } - .text-white { - color: var(--color-white); - } - .text-yellow-800 { - color: var(--color-yellow-800); + .text-success { + color: var(--color-success); } .lowercase { text-transform: lowercase; } + .link-hover { + text-decoration-line: none; + &:hover { + @media (hover: hover) { + text-decoration-line: underline; + } + } + } .underline { text-decoration-line: underline; } + .opacity-50 { + opacity: 50%; + } .opacity-80 { opacity: 80%; } @@ -801,25 +2224,34 @@ --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-\[0_-1px_3px_0_rgba\(0\,0\,0\,0\.1\)\] { - --tw-shadow: 0 -1px 3px 0 var(--tw-shadow-color, rgba(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); } - .outline { - outline-style: var(--tw-outline-style); - outline-width: 1px; + .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); + } + .btn-ghost { + &:not(.btn-active, :hover, :active:focus, :focus-visible) { + --btn-shadow: ""; + --btn-bg: #0000; + --btn-border: #0000; + --btn-noise: none; + &:not(:disabled, [disabled], .btn-disabled) { + outline-color: currentColor; + --btn-fg: currentColor; + } + } + @media (hover: none) { + &:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled) { + --btn-shadow: ""; + --btn-bg: #0000; + --btn-border: #0000; + --btn-noise: none; + --btn-fg: currentColor; + } + } } .blur { --tw-blur: blur(8px); @@ -828,154 +2260,36 @@ .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } - .transition-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)); + .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,); } - .duration-150 { - --tw-duration: 150ms; - transition-duration: 150ms; + .btn-sm { + --fontsize: 0.75rem; + --btn-p: 0.75rem; + --size: calc(var(--size-field, 0.25rem) * 8); } - .duration-200 { - --tw-duration: 200ms; - transition-duration: 200ms; - } - .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); - } + .card-sm { + .card-body { + --card-p: 1rem; + --card-fs: 0.75rem; + } + .card-title { + --cardtitle-fs: 1rem; } } - .hover\:border-gray-300 { - &:hover { - @media (hover: hover) { - border-color: var(--color-gray-300); - } - } + .btn-error { + --btn-color: var(--color-error); + --btn-fg: var(--color-error-content); } - .hover\:bg-blue-600 { - &:hover { - @media (hover: hover) { - background-color: var(--color-blue-600); - } - } + .btn-primary { + --btn-color: var(--color-primary); + --btn-fg: var(--color-primary-content); } - .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-red-700 { - &:hover { - @media (hover: hover) { - background-color: var(--color-red-700); - } - } - } - .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-gray-700 { - &:hover { - @media (hover: hover) { - color: var(--color-gray-700); - } - } - } - .focus\:border-blue-500 { - &:focus { - border-color: var(--color-blue-500); - } - } - .focus\:ring { - &: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-blue-400 { - &:focus { - --tw-ring-color: var(--color-blue-400); - } - } - .focus\:ring-blue-500 { - &:focus { - --tw-ring-color: var(--color-blue-500); - } - } - .focus\:ring-red-500 { - &:focus { - --tw-ring-color: var(--color-red-500); - } - } - .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-none { - &:focus { - --tw-outline-style: none; - outline-style: none; - } - } - .sm\:mx-auto { + .sm\:p-8 { @media (width >= 40rem) { - margin-inline: auto; - } - } - .sm\:w-full { - @media (width >= 40rem) { - width: 100%; - } - } - .sm\:max-w-md { - @media (width >= 40rem) { - max-width: var(--container-md); - } - } - .sm\:rounded-lg { - @media (width >= 40rem) { - border-radius: var(--radius-lg); + padding: calc(var(--spacing) * 8); } } .sm\:px-6 { @@ -983,17 +2297,6 @@ padding-inline: calc(var(--spacing) * 6); } } - .sm\:px-10 { - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 10); - } - } - .sm\:text-6xl { - @media (width >= 40rem) { - font-size: var(--text-6xl); - line-height: var(--tw-leading, var(--text-6xl--line-height)); - } - } .md\:w-1\/3 { @media (width >= 48rem) { width: calc(1/3 * 100%); @@ -1019,154 +2322,11 @@ padding-inline: calc(var(--spacing) * 8); } } - .dark\:divide-gray-700 { - @media (prefers-color-scheme: dark) { - :where(& > :not(:last-child)) { - border-color: var(--color-gray-700); - } - } - } - .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\:bg-blue-900 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-blue-900); - } - } - .dark\:bg-gray-700 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-gray-700); - } - } - .dark\:bg-gray-800 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-gray-800); - } - } - .dark\:bg-gray-900 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-gray-900); - } - } - .dark\:bg-green-900 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-green-900); - } - } - .dark\:bg-yellow-900 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-yellow-900); - } - } .dark\:text-blue-400 { @media (prefers-color-scheme: dark) { color: var(--color-blue-400); } } - .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-green-200 { - @media (prefers-color-scheme: dark) { - color: var(--color-green-200); - } - } - .dark\:text-green-400 { - @media (prefers-color-scheme: dark) { - color: var(--color-green-400); - } - } - .dark\:text-white { - @media (prefers-color-scheme: dark) { - color: var(--color-white); - } - } - .dark\:text-yellow-200 { - @media (prefers-color-scheme: dark) { - color: var(--color-yellow-200); - } - } - .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\: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\:focus\:ring-offset-gray-800 { - @media (prefers-color-scheme: dark) { - &:focus { - --tw-ring-offset-color: var(--color-gray-800); - } - } - } } @layer theme, base, components, utilities; @layer theme; @@ -1322,6 +2482,9 @@ margin: 0; box-sizing: border-box; } + .material-symbols-outlined { + font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; + } * { scrollbar-width: none; } @@ -1329,55 +2492,6 @@ display: none; } } -.btn-primary { - border-radius: var(--radius-lg); - background-color: var(--color-blue-500); - padding-inline: calc(var(--spacing) * 4); - padding-block: calc(var(--spacing) * 2); - color: var(--color-white); - 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)); - &:hover { - @media (hover: hover) { - background-color: var(--color-blue-600); - } - } - @media (prefers-color-scheme: dark) { - background-color: var(--color-blue-600); - } - @media (prefers-color-scheme: dark) { - &:hover { - @media (hover: hover) { - background-color: var(--color-blue-700); - } - } - } -} -.btn-text { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - --tw-leading: calc(var(--spacing) * 6); - line-height: calc(var(--spacing) * 6); - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: var(--color-gray-900); - &:hover { - @media (hover: hover) { - color: var(--color-gray-700); - } - } - @media (prefers-color-scheme: dark) { - color: var(--color-gray-100); - } - @media (prefers-color-scheme: dark) { - &:hover { - @media (hover: hover) { - color: var(--color-gray-300); - } - } - } -} .container-default { margin-inline: auto; max-width: var(--container-7xl); @@ -1389,6 +2503,327 @@ padding-inline: calc(var(--spacing) * 8); } } +@layer base { + :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] { + color-scheme: light; + --color-base-100: oklch(100% 0 0); + --color-base-200: oklch(98% 0 0); + --color-base-300: oklch(95% 0 0); + --color-base-content: oklch(21% 0.006 285.885); + --color-primary: oklch(45% 0.24 277.023); + --color-primary-content: oklch(93% 0.034 272.788); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } +} +@layer base { + @media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --color-base-100: oklch(25.33% 0.016 252.42); + --color-base-200: oklch(23.26% 0.014 253.1); + --color-base-300: oklch(21.15% 0.012 254.09); + --color-base-content: oklch(97.807% 0.029 256.847); + --color-primary: oklch(58% 0.233 277.117); + --color-primary-content: oklch(96% 0.018 272.314); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } + } +} +@layer base { + :root:has(input.theme-controller[value=light]:checked),[data-theme=light] { + color-scheme: light; + --color-base-100: oklch(100% 0 0); + --color-base-200: oklch(98% 0 0); + --color-base-300: oklch(95% 0 0); + --color-base-content: oklch(21% 0.006 285.885); + --color-primary: oklch(45% 0.24 277.023); + --color-primary-content: oklch(93% 0.034 272.788); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } +} +@layer base { + :root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] { + color-scheme: dark; + --color-base-100: oklch(25.33% 0.016 252.42); + --color-base-200: oklch(23.26% 0.014 253.1); + --color-base-300: oklch(21.15% 0.012 254.09); + --color-base-content: oklch(97.807% 0.029 256.847); + --color-primary: oklch(58% 0.233 277.117); + --color-primary-content: oklch(96% 0.018 272.314); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } +} +@layer base { + :root { + --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); + } +} +@layer base { + :root, [data-theme] { + background-color: var(--root-bg, var(--color-base-100)); + color: var(--color-base-content); + } +} +@layer base { + :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) { + overflow: hidden; + } +} +@layer base { + @property --radialprogress { + syntax: ""; + inherits: true; + initial-value: 0%; + } +} +@layer base { + :where( :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked ) ) { + scrollbar-gutter: stable; + background-image: linear-gradient(var(--color-base-100), var(--color-base-100)); + --root-bg: var(--color-base-100); + @supports (color: color-mix(in lab, red, red)) { + --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%); + } + } + :where(.modal[open], .modal-open, .modal-toggle:checked + .modal):not(.modal-start, .modal-end) { + scrollbar-gutter: stable; + } +} +@layer base { + :root { + scrollbar-color: currentColor #0000; + @supports (color: color-mix(in lab, red, red)) { + scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000; + } + } +} +@keyframes progress { + 50% { + background-position-x: -115%; + } +} +@keyframes rating { + 0%, 40% { + scale: 1.1; + filter: brightness(1.05) contrast(1.05); + } +} +@keyframes skeleton { + 0% { + background-position: 150%; + } + 100% { + background-position: -50%; + } +} +@keyframes dropdown { + 0% { + opacity: 0; + } +} +@keyframes radio { + 0% { + padding: 5px; + } + 50% { + padding: 3px; + } +} +@keyframes toast { + 0% { + scale: 0.9; + opacity: 0; + } + 100% { + scale: 1; + opacity: 1; + } +} +@layer base { + :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme="light"] { + color-scheme: light; + --color-base-100: oklch(100% 0 0); + --color-base-200: oklch(98% 0 0); + --color-base-300: oklch(95% 0 0); + --color-base-content: oklch(21% 0.006 285.885); + --color-primary: oklch(62% 0.0873 281deg); + --color-primary-content: oklch(93% 0.034 272.788); + --color-secondary: oklch(62% 0.214 259.815); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(82% 0.111 230.318); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(79% 0.209 151.711); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.5rem; + --radius-box: 1rem; + --size-selector: 0.28125rem; + --size-field: 0.28125rem; + --border: 1px; + --depth: 1; + --noise: 1; + } +} +@layer base { + @media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --color-base-100: oklch(0% 0 0); + --color-base-200: oklch(20% 0.016 285.938); + --color-base-300: oklch(25% 0.013 285.805); + --color-base-content: oklch(97.807% 0.029 256.847); + --color-primary: oklch(50% 0.0873 281deg); + --color-primary-content: oklch(96% 0.018 272.314); + --color-secondary: oklch(62% 0.214 259.815); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(21% 0.006 285.885); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(82% 0.111 230.318); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(79% 0.209 151.711); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(64% 0.246 16.439); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.5rem; + --radius-box: 1rem; + --size-selector: 0.28125rem; + --size-field: 0.28125rem; + --border: 1px; + --depth: 1; + --noise: 1; + } + } +} +@layer base { + :root:has(input.theme-controller[value=dark]:checked),[data-theme="dark"] { + color-scheme: dark; + --color-base-100: oklch(0% 0 0); + --color-base-200: oklch(20% 0.016 285.938); + --color-base-300: oklch(25% 0.013 285.805); + --color-base-content: oklch(97.807% 0.029 256.847); + --color-primary: oklch(50% 0.0873 281deg); + --color-primary-content: oklch(96% 0.018 272.314); + --color-secondary: oklch(62% 0.214 259.815); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(21% 0.006 285.885); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(82% 0.111 230.318); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(79% 0.209 151.711); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(64% 0.246 16.439); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.5rem; + --radius-box: 1rem; + --size-selector: 0.28125rem; + --size-field: 0.28125rem; + --border: 1px; + --depth: 1; + --noise: 1; + } +} @property --tw-rotate-x { syntax: "*"; inherits: false; @@ -1414,28 +2849,15 @@ 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-leading { - syntax: "*"; - inherits: false; -} @property --tw-font-weight { syntax: "*"; inherits: false; } -@property --tw-tracking { - syntax: "*"; - inherits: false; -} @property --tw-shadow { syntax: "*"; inherits: false; @@ -1501,11 +2923,6 @@ inherits: false; initial-value: 0 0 #0000; } -@property --tw-outline-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} @property --tw-blur { syntax: "*"; inherits: false; @@ -1559,24 +2976,41 @@ syntax: "*"; inherits: false; } -@property --tw-duration { +@property --tw-backdrop-blur { syntax: "*"; inherits: false; } -@property --tw-scale-x { +@property --tw-backdrop-brightness { syntax: "*"; inherits: false; - initial-value: 1; } -@property --tw-scale-y { +@property --tw-backdrop-contrast { syntax: "*"; inherits: false; - initial-value: 1; } -@property --tw-scale-z { +@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; - initial-value: 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)))) { @@ -1587,11 +3021,8 @@ --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; - --tw-divide-y-reverse: 0; --tw-border-style: solid; - --tw-leading: initial; --tw-font-weight: initial; - --tw-tracking: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; @@ -1606,7 +3037,6 @@ --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; @@ -1620,10 +3050,15 @@ --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; - --tw-duration: initial; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; + --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; } } } diff --git a/DysonNetwork.sln.DotSettings.user b/DysonNetwork.sln.DotSettings.user index 3e4ba5d..609d66f 100644 --- a/DysonNetwork.sln.DotSettings.user +++ b/DysonNetwork.sln.DotSettings.user @@ -70,6 +70,7 @@ ForceIncluded ForceIncluded ForceIncluded + ForceIncluded ForceIncluded ForceIncluded ForceIncluded