diff --git a/DysonNetwork.Sphere/DysonNetwork.Sphere.csproj b/DysonNetwork.Sphere/DysonNetwork.Sphere.csproj index 119a556..641399e 100644 --- a/DysonNetwork.Sphere/DysonNetwork.Sphere.csproj +++ b/DysonNetwork.Sphere/DysonNetwork.Sphere.csproj @@ -10,11 +10,6 @@ en-US;zh-Hans - - - node_modules/.install-stamp - - @@ -75,6 +70,7 @@ + @@ -162,6 +158,17 @@ <_ContentIncludedByDefault Remove="Pages\Checkpoint\CheckpointPage.cshtml"/> <_ContentIncludedByDefault Remove="Pages\Spell\MagicSpellPage.cshtml"/> <_ContentIncludedByDefault Remove="Keys\Solian.json"/> + <_ContentIncludedByDefault Remove="Pages\Index.cshtml" /> + <_ContentIncludedByDefault Remove="Pages\Posts\PostDetail.cshtml" /> + <_ContentIncludedByDefault Remove="Pages\Shared\_Layout.cshtml" /> + <_ContentIncludedByDefault Remove="Pages\_ViewImports.cshtml" /> + <_ContentIncludedByDefault Remove="Pages\_ViewStart.cshtml" /> + <_ContentIncludedByDefault Remove="Pages\Emails\AccountDeletionEmail.razor" /> + <_ContentIncludedByDefault Remove="Pages\Emails\ContactVerificationEmail.razor" /> + <_ContentIncludedByDefault Remove="Pages\Emails\EmailLayout.razor" /> + <_ContentIncludedByDefault Remove="Pages\Emails\LandingEmail.razor" /> + <_ContentIncludedByDefault Remove="Pages\Emails\PasswordResetEmail.razor" /> + <_ContentIncludedByDefault Remove="Pages\Emails\VerificationEmail.razor" /> diff --git a/DysonNetwork.Sphere/DysonNetwork.Sphere.http b/DysonNetwork.Sphere/DysonNetwork.Sphere.http deleted file mode 100644 index 49c77d3..0000000 --- a/DysonNetwork.Sphere/DysonNetwork.Sphere.http +++ /dev/null @@ -1,6 +0,0 @@ -@DysonNetwork.Sphere_HostAddress = http://localhost:5071 - -GET {{DysonNetwork.Sphere_HostAddress}}/weatherforecast/ -Accept: application/json - -### diff --git a/DysonNetwork.Sphere/Pages/Emails/AccountDeletionEmail.razor b/DysonNetwork.Sphere/Pages/Emails/AccountDeletionEmail.razor deleted file mode 100644 index e1a590a..0000000 --- a/DysonNetwork.Sphere/Pages/Emails/AccountDeletionEmail.razor +++ /dev/null @@ -1,42 +0,0 @@ -@using DysonNetwork.Sphere.Localization -@using Microsoft.Extensions.Localization - - - - -

@(Localizer["AccountDeletionHeader"])

-

@(Localizer["AccountDeletionPara1"]) @@@Name,

-

@(Localizer["AccountDeletionPara2"])

-

@(Localizer["AccountDeletionPara3"])

- - - - - - - - - -

@(Localizer["AccountDeletionPara4"])

- - - - -@code { - [Parameter] public required string Name { get; set; } - [Parameter] public required string Link { get; set; } - - [Inject] IStringLocalizer Localizer { get; set; } = null!; -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Emails/ContactVerificationEmail.razor b/DysonNetwork.Sphere/Pages/Emails/ContactVerificationEmail.razor deleted file mode 100644 index 3319384..0000000 --- a/DysonNetwork.Sphere/Pages/Emails/ContactVerificationEmail.razor +++ /dev/null @@ -1,43 +0,0 @@ -@using DysonNetwork.Sphere.Localization -@using Microsoft.Extensions.Localization -@using EmailResource = DysonNetwork.Sphere.Localization.EmailResource - - - - -

@(Localizer["ContactVerificationHeader"])

-

@(Localizer["ContactVerificationPara1"]) @Name,

-

@(Localizer["ContactVerificationPara2"])

- - - - - - - - - -

@(Localizer["ContactVerificationPara3"])

-

@(Localizer["ContactVerificationPara4"])

- - - - -@code { - [Parameter] public required string Name { get; set; } - [Parameter] public required string Link { get; set; } - - [Inject] IStringLocalizer Localizer { get; set; } = null!; -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Emails/EmailLayout.razor b/DysonNetwork.Sphere/Pages/Emails/EmailLayout.razor deleted file mode 100644 index c3f22ff..0000000 --- a/DysonNetwork.Sphere/Pages/Emails/EmailLayout.razor +++ /dev/null @@ -1,337 +0,0 @@ -@inherits LayoutComponentBase - - - - - - - - - - - - - - - - - - - -@code { - [Parameter] public RenderFragment? ChildContent { get; set; } -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Emails/LandingEmail.razor b/DysonNetwork.Sphere/Pages/Emails/LandingEmail.razor deleted file mode 100644 index f7615cf..0000000 --- a/DysonNetwork.Sphere/Pages/Emails/LandingEmail.razor +++ /dev/null @@ -1,43 +0,0 @@ -@using DysonNetwork.Sphere.Localization -@using Microsoft.Extensions.Localization -@using EmailResource = DysonNetwork.Sphere.Localization.EmailResource - - - - -

@(Localizer["LandingHeader1"])

-

@(Localizer["LandingPara1"]) @@@Name,

-

@(Localizer["LandingPara2"])

-

@(Localizer["LandingPara3"])

- - - - - - - - - -

@(Localizer["LandingPara4"])

- - - - -@code { - [Parameter] public required string Name { get; set; } - [Parameter] public required string Link { get; set; } - - [Inject] IStringLocalizer Localizer { get; set; } = null!; -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Emails/PasswordResetEmail.razor b/DysonNetwork.Sphere/Pages/Emails/PasswordResetEmail.razor deleted file mode 100644 index 8a38b62..0000000 --- a/DysonNetwork.Sphere/Pages/Emails/PasswordResetEmail.razor +++ /dev/null @@ -1,44 +0,0 @@ -@using DysonNetwork.Sphere.Localization -@using Microsoft.Extensions.Localization -@using EmailResource = DysonNetwork.Sphere.Localization.EmailResource - - - - -

@(Localizer["PasswordResetHeader"])

-

@(Localizer["PasswordResetPara1"]) @@@Name,

-

@(Localizer["PasswordResetPara2"])

-

@(Localizer["PasswordResetPara3"])

- - - - - - - - - -

@(Localizer["PasswordResetPara4"])

- - - - -@code { - [Parameter] public required string Name { get; set; } - [Parameter] public required string Link { get; set; } - - [Inject] IStringLocalizer Localizer { get; set; } = null!; - [Inject] IStringLocalizer LocalizerShared { get; set; } = null!; -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Emails/VerificationEmail.razor b/DysonNetwork.Sphere/Pages/Emails/VerificationEmail.razor deleted file mode 100644 index 7c994bd..0000000 --- a/DysonNetwork.Sphere/Pages/Emails/VerificationEmail.razor +++ /dev/null @@ -1,27 +0,0 @@ -@using DysonNetwork.Sphere.Localization -@using Microsoft.Extensions.Localization -@using EmailResource = DysonNetwork.Sphere.Localization.EmailResource - - - - -

@(Localizer["VerificationHeader1"])

-

@(Localizer["VerificationPara1"]) @@@Name,

-

@(Localizer["VerificationPara2"])

-

@(Localizer["VerificationPara3"])

- -

@Code

- -

@(Localizer["VerificationPara4"])

-

@(Localizer["VerificationPara5"])

- - - - -@code { - [Parameter] public required string Name { get; set; } - [Parameter] public required string Code { get; set; } - - [Inject] IStringLocalizer Localizer { get; set; } = null!; - [Inject] IStringLocalizer LocalizerShared { get; set; } = null!; -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Index.cshtml b/DysonNetwork.Sphere/Pages/Index.cshtml deleted file mode 100644 index 9e2c5ed..0000000 --- a/DysonNetwork.Sphere/Pages/Index.cshtml +++ /dev/null @@ -1,23 +0,0 @@ -@page -@model IndexModel -@{ - ViewData["Title"] = "The Solar Network | Solar Network"; -} - -
-
-
-

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 deleted file mode 100644 index 0c6ba9e..0000000 --- a/DysonNetwork.Sphere/Pages/Index.cshtml.cs +++ /dev/null @@ -1,10 +0,0 @@ -using Microsoft.AspNetCore.Mvc.RazorPages; - -namespace DysonNetwork.Sphere.Pages; - -public class IndexModel : PageModel -{ - public void OnGet() - { - } -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Posts/PostDetail.cshtml b/DysonNetwork.Sphere/Pages/Posts/PostDetail.cshtml deleted file mode 100644 index ed50679..0000000 --- a/DysonNetwork.Sphere/Pages/Posts/PostDetail.cshtml +++ /dev/null @@ -1,65 +0,0 @@ -@page "/posts/{PostId:guid}" -@model DysonNetwork.Sphere.Pages.Posts.PostDetailModel -@using Markdig -@{ - ViewData["Title"] = Model.Post?.Title + " | Solar Network"; - var imageUrl = Model.Post?.Attachments?.FirstOrDefault(a => a.MimeType.StartsWith("image/"))?.Id; -} - -@section Head { - - - @if (imageUrl != null) - { - - } - - -} - -
- @if (Model.Post != null) - { -

@Model.Post.Title

-

- Created at: @Model.Post.CreatedAt - by @@@Model.Post.Publisher.Name -

-
- @Html.Raw(Markdown.ToHtml(Model.Post.Content ?? string.Empty)) -
- - @if (Model.Post.Attachments != null && Model.Post.Attachments.Any()) - { -

Attachments

-
- @foreach (var attachment in Model.Post.Attachments) - { -
- @if (attachment.MimeType != null && attachment.MimeType.StartsWith("image/")) - { - @attachment.Name - } - else if (attachment.MimeType != null && attachment.MimeType.StartsWith("video/")) - { - - } - - @attachment.Name - -
- } -
- } - } - else - { -
- Post not found. -
- } -
\ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Posts/PostDetail.cshtml.cs b/DysonNetwork.Sphere/Pages/Posts/PostDetail.cshtml.cs deleted file mode 100644 index b14a396..0000000 --- a/DysonNetwork.Sphere/Pages/Posts/PostDetail.cshtml.cs +++ /dev/null @@ -1,48 +0,0 @@ -using DysonNetwork.Shared.Proto; -using DysonNetwork.Sphere.Post; -using DysonNetwork.Sphere.Publisher; -using Microsoft.AspNetCore.Mvc; -using Microsoft.AspNetCore.Mvc.RazorPages; -using Microsoft.EntityFrameworkCore; - -namespace DysonNetwork.Sphere.Pages.Posts; - -public class PostDetailModel( - AppDatabase db, - PublisherService pub, - AccountService.AccountServiceClient accounts -) : PageModel -{ - [BindProperty(SupportsGet = true)] public Guid PostId { get; set; } - - public Post.Post? Post { get; set; } - - public async Task OnGetAsync() - { - if (PostId == Guid.Empty) - return NotFound(); - - HttpContext.Items.TryGetValue("CurrentUser", out var currentUserValue); - var currentUser = currentUserValue as Account; - var accountId = currentUser is null ? Guid.Empty : Guid.Parse(currentUser.Id); - var userFriends = currentUser is null - ? [] - : (await accounts.ListFriendsAsync( - new ListRelationshipSimpleRequest { AccountId = currentUser.Id } - )).AccountsId.Select(Guid.Parse).ToList(); - var userPublishers = currentUser is null ? [] : await pub.GetUserPublishers(accountId); - - Post = await db.Posts - .Where(e => e.Id == PostId) - .Include(e => e.Publisher) - .Include(e => e.Tags) - .Include(e => e.Categories) - .FilterWithVisibility(currentUser, userFriends, userPublishers) - .FirstOrDefaultAsync(); - - if (Post == null) - return NotFound(); - - return Page(); - } -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/Shared/_Layout.cshtml b/DysonNetwork.Sphere/Pages/Shared/_Layout.cshtml deleted file mode 100644 index 4c20d58..0000000 --- a/DysonNetwork.Sphere/Pages/Shared/_Layout.cshtml +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - @ViewData["Title"] - - - - - - - @await RenderSectionAsync("Head", required: false) - - -
-
- Solar Network -
-
-
-
- -
- @RenderBody() -
- -@await RenderSectionAsync("Scripts", required: false) - - \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/_ViewImports.cshtml b/DysonNetwork.Sphere/Pages/_ViewImports.cshtml deleted file mode 100644 index f861a21..0000000 --- a/DysonNetwork.Sphere/Pages/_ViewImports.cshtml +++ /dev/null @@ -1,4 +0,0 @@ -@using DysonNetwork.Sphere -@namespace DysonNetwork.Sphere.Pages -@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers -@addTagHelper *, Microsoft.AspNetCore.SpaServices \ No newline at end of file diff --git a/DysonNetwork.Sphere/Pages/_ViewStart.cshtml b/DysonNetwork.Sphere/Pages/_ViewStart.cshtml deleted file mode 100644 index 40c70bc..0000000 --- a/DysonNetwork.Sphere/Pages/_ViewStart.cshtml +++ /dev/null @@ -1,3 +0,0 @@ -@{ - Layout = "_Layout"; -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/Startup/ApplicationConfiguration.cs b/DysonNetwork.Sphere/Startup/ApplicationConfiguration.cs index d5dded7..169eb9c 100644 --- a/DysonNetwork.Sphere/Startup/ApplicationConfiguration.cs +++ b/DysonNetwork.Sphere/Startup/ApplicationConfiguration.cs @@ -21,14 +21,11 @@ public static class ApplicationConfiguration ConfigureForwardedHeaders(app, configuration); app.UseWebSockets(); - app.UseRateLimiter(); app.UseAuthentication(); app.UseAuthorization(); app.UseMiddleware(); - app.MapControllers().RequireRateLimiting("fixed"); - app.MapStaticAssets().RequireRateLimiting("fixed"); - app.MapRazorPages().RequireRateLimiting("fixed"); + app.MapControllers(); // Map gRPC services app.MapGrpcService(); diff --git a/DysonNetwork.Sphere/package.json b/DysonNetwork.Sphere/package.json deleted file mode 100644 index 21a1ad7..0000000 --- a/DysonNetwork.Sphere/package.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "name": "@dyson/sphere", - "version": "1.0.0", - "description": "DysonNetwork Sphere Web Application", - "scripts": { - "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", - "daisyui": "^5.0.46" - } -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/postcss.config.js b/DysonNetwork.Sphere/postcss.config.js deleted file mode 100644 index 84455e7..0000000 --- a/DysonNetwork.Sphere/postcss.config.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - plugins: { - "@tailwindcss/postcss": {}, - }, -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/tailwind.config.js b/DysonNetwork.Sphere/tailwind.config.js deleted file mode 100644 index 288ba7b..0000000 --- a/DysonNetwork.Sphere/tailwind.config.js +++ /dev/null @@ -1,11 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: [ - "./Pages/**/*.cshtml", - "./Views/**/*.cshtml" - ], - theme: { - extend: {}, - }, - plugins: [], -} \ No newline at end of file diff --git a/DysonNetwork.Sphere/wwwroot/css/site.css b/DysonNetwork.Sphere/wwwroot/css/site.css deleted file mode 100644 index 6f172a5..0000000 --- a/DysonNetwork.Sphere/wwwroot/css/site.css +++ /dev/null @@ -1,110 +0,0 @@ -@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; - margin: 0; - box-sizing: border-box; - } - - .material-symbols-outlined { - font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; - } - - /* For Firefox. */ - * { - scrollbar-width: none; - } - - /* For WebKit (Chrome & Safari). */ - ::-webkit-scrollbar { - display: none; - } -} - -.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 deleted file mode 100644 index f9a79d1..0000000 --- a/DysonNetwork.Sphere/wwwroot/css/styles.css +++ /dev/null @@ -1,3200 +0,0 @@ -/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */ -@layer properties; -@layer theme, base, components, utilities; -@layer theme { - :root, :host { - --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-gray-600: oklch(44.6% 0.03 256.802); - --color-black: #000; - --spacing: 0.25rem; - --container-xs: 20rem; - --container-md: 28rem; - --container-6xl: 72rem; - --container-7xl: 80rem; - --text-xs: 0.75rem; - --text-xs--line-height: calc(1 / 0.75); - --text-sm: 0.875rem; - --text-sm--line-height: calc(1.25 / 0.875); - --text-lg: 1.125rem; - --text-lg--line-height: calc(1.75 / 1.125); - --text-xl: 1.25rem; - --text-xl--line-height: calc(1.75 / 1.25); - --text-2xl: 1.5rem; - --text-2xl--line-height: calc(2 / 1.5); - --text-3xl: 1.875rem; - --text-3xl--line-height: calc(2.25 / 1.875); - --text-4xl: 2.25rem; - --text-4xl--line-height: calc(2.5 / 2.25); - --text-5xl: 3rem; - --text-5xl--line-height: 1; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; - --radius-md: 0.375rem; - --blur-md: 12px; - --default-font-family: var(--font-sans); - --default-mono-font-family: var(--font-mono); - } -} -@layer base { - *, ::after, ::before, ::backdrop, ::file-selector-button { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0 solid; - } - html, :host { - line-height: 1.5; - -webkit-text-size-adjust: 100%; - tab-size: 4; - font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - font-feature-settings: var(--default-font-feature-settings, normal); - font-variation-settings: var(--default-font-variation-settings, normal); - -webkit-tap-highlight-color: transparent; - } - hr { - height: 0; - color: inherit; - border-top-width: 1px; - } - abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - } - h1, h2, h3, h4, h5, h6 { - font-size: inherit; - font-weight: inherit; - } - a { - color: inherit; - -webkit-text-decoration: inherit; - text-decoration: inherit; - } - b, strong { - font-weight: bolder; - } - code, kbd, samp, pre { - font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); - font-feature-settings: var(--default-mono-font-feature-settings, normal); - font-variation-settings: var(--default-mono-font-variation-settings, normal); - font-size: 1em; - } - small { - font-size: 80%; - } - sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - sub { - bottom: -0.25em; - } - sup { - top: -0.5em; - } - table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; - } - :-moz-focusring { - outline: auto; - } - progress { - vertical-align: baseline; - } - summary { - display: list-item; - } - ol, ul, menu { - list-style: none; - } - img, svg, video, canvas, audio, iframe, embed, object { - display: block; - vertical-align: middle; - } - img, video { - max-width: 100%; - height: auto; - } - button, input, select, optgroup, textarea, ::file-selector-button { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - border-radius: 0; - background-color: transparent; - opacity: 1; - } - :where(select:is([multiple], [size])) optgroup { - font-weight: bolder; - } - :where(select:is([multiple], [size])) optgroup option { - padding-inline-start: 20px; - } - ::file-selector-button { - margin-inline-end: 4px; - } - ::placeholder { - opacity: 1; - } - @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { - ::placeholder { - color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, currentcolor 50%, transparent); - } - } - } - textarea { - resize: vertical; - } - ::-webkit-search-decoration { - -webkit-appearance: none; - } - ::-webkit-date-and-time-value { - min-height: 1lh; - text-align: inherit; - } - ::-webkit-datetime-edit { - display: inline-flex; - } - ::-webkit-datetime-edit-fields-wrapper { - padding: 0; - } - ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { - padding-block: 0; - } - :-moz-ui-invalid { - box-shadow: none; - } - button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { - appearance: button; - } - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { - height: auto; - } - [hidden]:where(:not([hidden="until-found"])) { - display: none !important; - } -} -@layer utilities { - .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); - } - } - } - .avatar-online { - &:before { - content: ""; - position: absolute; - z-index: 1; - display: block; - border-radius: calc(infinity * 1px); - background-color: var(--color-success); - outline: 2px solid var(--color-base-100); - width: 15%; - height: 15%; - top: 7%; - right: 7%; - } - } - .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; - } - .static { - position: static; - } - .sticky { - position: sticky; - } - .tooltip-bottom { - > .tooltip-content, &[data-tip]:before { - transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)); - inset: var(--tt-off) auto auto 50%; - } - &:after { - transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg); - inset: var(--tt-tail) auto auto 50%; - } - } - .top-0 { - top: calc(var(--spacing) * 0); - } - .top-8 { - top: calc(var(--spacing) * 8); - } - .right-0 { - right: 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) { - max-width: 40rem; - } - @media (width >= 48rem) { - max-width: 48rem; - } - @media (width >= 64rem) { - max-width: 64rem; - } - @media (width >= 80rem) { - max-width: 80rem; - } - @media (width >= 96rem) { - max-width: 96rem; - } - } - .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); - } - .mt-2 { - margin-top: calc(var(--spacing) * 2); - } - .mt-4 { - margin-top: calc(var(--spacing) * 4); - } - .mt-6 { - margin-top: calc(var(--spacing) * 6); - } - .mt-8 { - margin-top: calc(var(--spacing) * 8); - } - .mr-1 { - margin-right: calc(var(--spacing) * 1); - } - .mb-1 { - margin-bottom: calc(var(--spacing) * 1); - } - .mb-2 { - margin-bottom: calc(var(--spacing) * 2); - } - .mb-3 { - margin-bottom: calc(var(--spacing) * 3); - } - .mb-4 { - margin-bottom: calc(var(--spacing) * 4); - } - .mb-6 { - margin-bottom: calc(var(--spacing) * 6); - } - .mb-8 { - margin-bottom: calc(var(--spacing) * 8); - } - .ml-4 { - margin-left: calc(var(--spacing) * 4); - } - .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"); - } - .prose { - :root & { - --tw-prose-body: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - --tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000); - } - --tw-prose-headings: var(--color-base-content); - --tw-prose-lead: var(--color-base-content); - --tw-prose-links: var(--color-base-content); - --tw-prose-bold: var(--color-base-content); - --tw-prose-counters: var(--color-base-content); - --tw-prose-bullets: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - --tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000); - } - --tw-prose-hr: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - --tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000); - } - --tw-prose-quotes: var(--color-base-content); - --tw-prose-quote-borders: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - --tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); - } - --tw-prose-captions: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - --tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000); - } - --tw-prose-code: var(--color-base-content); - --tw-prose-pre-code: var(--color-neutral-content); - --tw-prose-pre-bg: var(--color-neutral); - --tw-prose-th-borders: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - --tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000); - } - --tw-prose-td-borders: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - --tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); - } - --tw-prose-kbd: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - --tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000); - } - :where(code):not(pre > code) { - background-color: var(--color-base-200); - border-radius: var(--radius-selector); - border: var(--border) solid var(--color-base-300); - padding-inline: 0.5em; - font-weight: inherit; - &:before, &:after { - display: none; - } - } - } - } - .mask { - display: inline-block; - vertical-align: middle; - mask-size: contain; - mask-repeat: no-repeat; - mask-position: center; - } - .block { - display: block; - } - .contents { - display: contents; - } - .flex { - display: flex; - } - .grid { - display: grid; - } - .hidden { - display: none; - } - .table { - display: table; - } - .btn-circle { - border-radius: calc(infinity * 1px); - padding-inline: calc(0.25rem * 0); - width: var(--size); - height: var(--size); - } - .h-5 { - height: calc(var(--spacing) * 5); - } - .h-6 { - height: calc(var(--spacing) * 6); - } - .h-12 { - height: calc(var(--spacing) * 12); - } - .h-auto { - height: auto; - } - .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-12 { - width: calc(var(--spacing) * 12); - } - .w-16 { - width: calc(var(--spacing) * 16); - } - .w-32 { - width: calc(var(--spacing) * 32); - } - .w-full { - width: 100%; - } - .max-w-6xl { - max-width: var(--container-6xl); - } - .max-w-md { - max-width: var(--container-md); - } - .max-w-xs { - max-width: var(--container-xs); - } - .flex-1 { - flex: 1; - } - .flex-none { - flex: none; - } - .shrink-0 { - flex-shrink: 0; - } - .flex-grow { - flex-grow: 1; - } - .border-collapse { - border-collapse: collapse; - } - .transform { - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - } - .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; - } - } - .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)); - } - .flex-col { - flex-direction: column; - } - .items-center { - align-items: center; - } - .justify-center { - justify-content: center; - } - .justify-end { - justify-content: flex-end; - } - .gap-3 { - gap: calc(var(--spacing) * 3); - } - .gap-4 { - gap: calc(var(--spacing) * 4); - } - .gap-6 { - gap: calc(var(--spacing) * 6); - } - .gap-8 { - gap: calc(var(--spacing) * 8); - } - .space-y-4 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); - } - } - .space-y-6 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); - } - } - .gap-x-6 { - column-gap: calc(var(--spacing) * 6); - } - .truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .overflow-x-auto { - overflow-x: auto; - } - .menu-sm { - :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { - border-radius: var(--radius-field); - padding-inline: calc(0.25rem * 2.5); - padding-block: calc(0.25rem * 1); - font-size: 0.75rem; - } - .menu-title { - padding-inline: calc(0.25rem * 3); - padding-block: calc(0.25rem * 2); - } - } - .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-md { - border-radius: var(--radius-md); - } - .border { - border-style: var(--tw-border-style); - border-width: 1px; - } - .border-t { - border-top-style: var(--tw-border-style); - border-top-width: 1px; - } - .badge-ghost { - border-color: var(--color-base-200); - background-color: var(--color-base-200); - color: var(--color-base-content); - background-image: none; - } - .alert-error { - border-color: var(--color-error); - color: var(--color-error-content); - --alert-color: var(--color-error); - } - .alert-success { - border-color: var(--color-success); - color: var(--color-success-content); - --alert-color: var(--color-success); - } - .alert-warning { - border-color: var(--color-warning); - color: var(--color-warning-content); - --alert-color: var(--color-warning); - } - .border-base-300 { - border-color: var(--color-base-300); - } - .bg-base-100 { - background-color: var(--color-base-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-base-200 { - background-color: var(--color-base-200); - } - .bg-base-300 { - background-color: var(--color-base-300); - } - .bg-neutral { - background-color: var(--color-neutral); - } - .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"); - } - .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"); - } - .stroke-current { - stroke: currentcolor; - } - .object-cover { - object-fit: cover; - } - .p-2 { - padding: calc(var(--spacing) * 2); - } - .p-4 { - padding: calc(var(--spacing) * 4); - } - .p-6 { - padding: calc(var(--spacing) * 6); - } - .badge-sm { - --size: calc(var(--size-selector, 0.25rem) * 5); - font-size: 0.75rem; - padding-inline: calc(0.25rem * 2.5 - var(--border)); - } - .px-1 { - padding-inline: calc(var(--spacing) * 1); - } - .px-4 { - padding-inline: calc(var(--spacing) * 4); - } - .px-5 { - padding-inline: calc(var(--spacing) * 5); - } - .px-8 { - padding-inline: calc(var(--spacing) * 8); - } - .py-4 { - padding-block: calc(var(--spacing) * 4); - } - .py-6 { - padding-block: calc(var(--spacing) * 6); - } - .py-7 { - padding-block: calc(var(--spacing) * 7); - } - .py-12 { - padding-block: calc(var(--spacing) * 12); - } - .pt-4 { - padding-top: calc(var(--spacing) * 4); - } - .pt-16 { - padding-top: calc(var(--spacing) * 16); - } - .text-center { - text-align: center; - } - .text-left { - text-align: left; - } - .font-mono { - font-family: var(--font-mono); - } - .text-2xl { - font-size: var(--text-2xl); - line-height: var(--tw-leading, var(--text-2xl--line-height)); - } - .text-3xl { - font-size: var(--text-3xl); - line-height: var(--tw-leading, var(--text-3xl--line-height)); - } - .text-4xl { - font-size: var(--text-4xl); - line-height: var(--tw-leading, var(--text-4xl--line-height)); - } - .text-5xl { - font-size: var(--text-5xl); - line-height: var(--tw-leading, var(--text-5xl--line-height)); - } - .text-lg { - font-size: var(--text-lg); - line-height: var(--tw-leading, var(--text-lg--line-height)); - } - .text-sm { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - .text-xl { - font-size: var(--text-xl); - line-height: var(--tw-leading, var(--text-xl--line-height)); - } - .text-xs { - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); - } - .font-bold { - --tw-font-weight: var(--font-weight-bold); - font-weight: var(--font-weight-bold); - } - .font-medium { - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - } - .font-semibold { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - .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); - } - } - } - } - .progress-info { - color: var(--color-info); - } - .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-500 { - color: var(--color-blue-500); - } - .text-blue-600 { - color: var(--color-blue-600); - } - .text-error { - color: var(--color-error); - } - .text-gray-600 { - color: var(--color-gray-600); - } - .text-info { - color: var(--color-info); - } - .text-neutral-content { - color: var(--color-neutral-content); - } - .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%; - } - .shadow { - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .shadow-sm { - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .shadow-xl { - --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .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); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } - .filter { - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } - .backdrop-blur-md { - --tw-backdrop-blur: blur(var(--blur-md)); - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - } - .btn-sm { - --fontsize: 0.75rem; - --btn-p: 0.75rem; - --size: calc(var(--size-field, 0.25rem) * 8); - } - .card-sm { - .card-body { - --card-p: 1rem; - --card-fs: 0.75rem; - } - .card-title { - --cardtitle-fs: 1rem; - } - } - .btn-error { - --btn-color: var(--color-error); - --btn-fg: var(--color-error-content); - } - .btn-primary { - --btn-color: var(--color-primary); - --btn-fg: var(--color-primary-content); - } - .hover\:underline { - &:hover { - @media (hover: hover) { - text-decoration-line: underline; - } - } - } - .sm\:p-8 { - @media (width >= 40rem) { - padding: calc(var(--spacing) * 8); - } - } - .sm\:px-6 { - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 6); - } - } - .md\:w-1\/3 { - @media (width >= 48rem) { - width: calc(1/3 * 100%); - } - } - .md\:grid-cols-2 { - @media (width >= 48rem) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - .md\:flex-row { - @media (width >= 48rem) { - flex-direction: row; - } - } - .lg\:w-1\/4 { - @media (width >= 64rem) { - width: calc(1/4 * 100%); - } - } - .lg\:grid-cols-3 { - @media (width >= 64rem) { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - } - .lg\:px-8 { - @media (width >= 64rem) { - padding-inline: calc(var(--spacing) * 8); - } - } - .dark\:text-blue-400 { - @media (prefers-color-scheme: dark) { - color: var(--color-blue-400); - } - } -} -@layer theme, base, components, utilities; -@layer theme; -@layer base { - *, ::after, ::before, ::backdrop, ::file-selector-button { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0 solid; - } - html, :host { - line-height: 1.5; - -webkit-text-size-adjust: 100%; - tab-size: 4; - font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); - font-feature-settings: var(--default-font-feature-settings, normal); - font-variation-settings: var(--default-font-variation-settings, normal); - -webkit-tap-highlight-color: transparent; - } - hr { - height: 0; - color: inherit; - border-top-width: 1px; - } - abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - } - h1, h2, h3, h4, h5, h6 { - font-size: inherit; - font-weight: inherit; - } - a { - color: inherit; - -webkit-text-decoration: inherit; - text-decoration: inherit; - } - b, strong { - font-weight: bolder; - } - code, kbd, samp, pre { - font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); - font-feature-settings: var(--default-mono-font-feature-settings, normal); - font-variation-settings: var(--default-mono-font-variation-settings, normal); - font-size: 1em; - } - small { - font-size: 80%; - } - sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - sub { - bottom: -0.25em; - } - sup { - top: -0.5em; - } - table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; - } - :-moz-focusring { - outline: auto; - } - progress { - vertical-align: baseline; - } - summary { - display: list-item; - } - ol, ul, menu { - list-style: none; - } - img, svg, video, canvas, audio, iframe, embed, object { - display: block; - vertical-align: middle; - } - img, video { - max-width: 100%; - height: auto; - } - button, input, select, optgroup, textarea, ::file-selector-button { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - border-radius: 0; - background-color: transparent; - opacity: 1; - } - :where(select:is([multiple], [size])) optgroup { - font-weight: bolder; - } - :where(select:is([multiple], [size])) optgroup option { - padding-inline-start: 20px; - } - ::file-selector-button { - margin-inline-end: 4px; - } - ::placeholder { - opacity: 1; - } - @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { - ::placeholder { - color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, currentcolor 50%, transparent); - } - } - } - textarea { - resize: vertical; - } - ::-webkit-search-decoration { - -webkit-appearance: none; - } - ::-webkit-date-and-time-value { - min-height: 1lh; - text-align: inherit; - } - ::-webkit-datetime-edit { - display: inline-flex; - } - ::-webkit-datetime-edit-fields-wrapper { - padding: 0; - } - ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { - padding-block: 0; - } - :-moz-ui-invalid { - box-shadow: none; - } - button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { - appearance: button; - } - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { - height: auto; - } - [hidden]:where(:not([hidden='until-found'])) { - display: none !important; - } -} -@layer utilities; -@layer base { - html, body { - padding: 0; - margin: 0; - box-sizing: border-box; - } - .material-symbols-outlined { - font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; - } - * { - scrollbar-width: none; - } - ::-webkit-scrollbar { - display: none; - } -} -.container-default { - margin-inline: auto; - max-width: var(--container-7xl); - padding-inline: calc(var(--spacing) * 4); - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 6); - } - @media (width >= 64rem) { - 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; -} -@property --tw-rotate-y { - syntax: "*"; - inherits: false; -} -@property --tw-rotate-z { - syntax: "*"; - inherits: false; -} -@property --tw-skew-x { - syntax: "*"; - inherits: false; -} -@property --tw-skew-y { - syntax: "*"; - inherits: false; -} -@property --tw-space-y-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-border-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} -@property --tw-font-weight { - syntax: "*"; - inherits: false; -} -@property --tw-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-shadow-color { - syntax: "*"; - inherits: false; -} -@property --tw-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} -@property --tw-inset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-inset-shadow-color { - syntax: "*"; - inherits: false; -} -@property --tw-inset-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} -@property --tw-ring-color { - syntax: "*"; - inherits: false; -} -@property --tw-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-inset-ring-color { - syntax: "*"; - inherits: false; -} -@property --tw-inset-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-ring-inset { - syntax: "*"; - inherits: false; -} -@property --tw-ring-offset-width { - syntax: ""; - inherits: false; - initial-value: 0px; -} -@property --tw-ring-offset-color { - syntax: "*"; - inherits: false; - initial-value: #fff; -} -@property --tw-ring-offset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-blur { - syntax: "*"; - inherits: false; -} -@property --tw-brightness { - syntax: "*"; - inherits: false; -} -@property --tw-contrast { - syntax: "*"; - inherits: false; -} -@property --tw-grayscale { - syntax: "*"; - inherits: false; -} -@property --tw-hue-rotate { - syntax: "*"; - inherits: false; -} -@property --tw-invert { - syntax: "*"; - inherits: false; -} -@property --tw-opacity { - syntax: "*"; - inherits: false; -} -@property --tw-saturate { - syntax: "*"; - inherits: false; -} -@property --tw-sepia { - syntax: "*"; - inherits: false; -} -@property --tw-drop-shadow { - syntax: "*"; - inherits: false; -} -@property --tw-drop-shadow-color { - syntax: "*"; - inherits: false; -} -@property --tw-drop-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} -@property --tw-drop-shadow-size { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-blur { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-brightness { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-contrast { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-grayscale { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-hue-rotate { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-invert { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-opacity { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-saturate { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-sepia { - syntax: "*"; - inherits: false; -} -@layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - --tw-space-y-reverse: 0; - --tw-border-style: solid; - --tw-font-weight: initial; - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-drop-shadow: initial; - --tw-drop-shadow-color: initial; - --tw-drop-shadow-alpha: 100%; - --tw-drop-shadow-size: initial; - --tw-backdrop-blur: initial; - --tw-backdrop-brightness: initial; - --tw-backdrop-contrast: initial; - --tw-backdrop-grayscale: initial; - --tw-backdrop-hue-rotate: initial; - --tw-backdrop-invert: initial; - --tw-backdrop-opacity: initial; - --tw-backdrop-saturate: initial; - --tw-backdrop-sepia: initial; - } - } -}