diff --git a/Cargo.lock b/Cargo.lock index 173df8d..31a8fc7 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -320,16 +320,19 @@ dependencies = [ "dotenvy", "futures", "governor", + "jsonwebtoken", "leptos", "leptos_axum", "mime_guess", "openssl", "quick-xml", "rand 0.8.5", + "rmp-serde", "rust-embed", "serde", "serde_json", "shared", + "struct-patch", "thiserror 2.0.18", "time", "tokio", @@ -1257,13 +1260,16 @@ dependencies = [ "gloo-timers", "js-sys", "leptos", + "leptos-shadcn-ui", "leptos-use", "leptos_router", "log", + "rmp-serde", "serde", "serde-wasm-bindgen", "serde_json", "shared", + "struct-patch", "tailwind_fuse", "thiserror 2.0.18", "uuid", @@ -1397,8 +1403,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "ff2abc00be7fca6ebc474524697ae276ad847ad0a6b3faa4bcb027e9a4614ad0" dependencies = [ "cfg-if", + "js-sys", "libc", "wasi", + "wasm-bindgen", ] [[package]] @@ -2025,6 +2033,21 @@ dependencies = [ "wasm-bindgen", ] +[[package]] +name = "jsonwebtoken" +version = "9.3.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "5a87cc7a48537badeae96744432de36f4be2b4a34a05a5ef32e9dd8a1c169dde" +dependencies = [ + "base64 0.22.1", + "js-sys", + "pem 3.0.6", + "ring", + "serde", + "serde_json", + "simple_asn1", +] + [[package]] name = "jwt-simple" version = "0.11.9" @@ -2116,6 +2139,109 @@ dependencies = [ "web-sys", ] +[[package]] +name = "leptos-node-ref" +version = "0.2.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "4f57b1ebc451fe9e7b6c7eba680fa8bc7313b410cc6c0f18481cb55a60ff3ac6" +dependencies = [ + "leptos", + "send_wrapper", +] + +[[package]] +name = "leptos-shadcn-button" +version = "0.8.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "7d6d1a7b813b726be7920f7238c127a14129ba4a45fa879312cad3ed2f8a1745" +dependencies = [ + "leptos", + "leptos-node-ref", + "leptos-shadcn-signal-management", + "leptos-struct-component", + "leptos-style", + "tailwind_fuse", + "web-sys", +] + +[[package]] +name = "leptos-shadcn-input" +version = "0.8.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "b0939cdad5a878d920decda39a4b42ecf4eba15736a92bbd73b1b408807899b8" +dependencies = [ + "leptos", + "leptos-node-ref", + "leptos-shadcn-signal-management", + "leptos-struct-component", + "leptos-style", + "regex", + "tailwind_fuse", + "web-sys", +] + +[[package]] +name = "leptos-shadcn-signal-management" +version = "0.1.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "a5097c5171eb0be12bbf8fd736f4e669012657112865506a825480f2b013f6de" +dependencies = [ + "chrono", + "js-sys", + "leptos", + "serde", + "serde_json", + "thiserror 1.0.69", +] + +[[package]] +name = "leptos-shadcn-ui" +version = "0.9.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "43430605d3d049a4cf68fb7dff4e6f940426ec48131f4662963f62f11baa3e18" +dependencies = [ + "gloo-timers", + "leptos", + "leptos-node-ref", + "leptos-shadcn-button", + "leptos-shadcn-input", + "leptos-struct-component", + "leptos-style", + "leptos_router", + "tailwind_fuse", +] + +[[package]] +name = "leptos-struct-component" +version = "0.2.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "c32085b37b67e61e69e0949d94e36c40e4fde83867681cbb884f9cd40a43881e" +dependencies = [ + "leptos", + "leptos-struct-component-macro", +] + +[[package]] +name = "leptos-struct-component-macro" +version = "0.2.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "a40efd792acc28a115605b84ecb39e89397a278950bc8f2aad1bdcc7af2033af" +dependencies = [ + "proc-macro2", + "quote", + "syn 2.0.114", +] + +[[package]] +name = "leptos-style" +version = "0.2.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "c65408961a0bd8e70f317de8973d532a0cb9ffbac910c488d97f9c5a2e4411e2" +dependencies = [ + "indexmap", + "leptos", +] + [[package]] name = "leptos-use" version = "0.16.3" @@ -2556,6 +2682,16 @@ dependencies = [ "windows-sys 0.61.2", ] +[[package]] +name = "num-bigint" +version = "0.4.6" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "a5e44f723f1133c9deac646763579fdb3ac745e418f2a7af9cd0c431da1f20b9" +dependencies = [ + "num-integer", + "num-traits", +] + [[package]] name = "num-bigint-dig" version = "0.8.6" @@ -3236,6 +3372,39 @@ dependencies = [ "subtle", ] +[[package]] +name = "ring" +version = "0.17.14" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7" +dependencies = [ + "cc", + "cfg-if", + "getrandom 0.2.17", + "libc", + "untrusted", + "windows-sys 0.52.0", +] + +[[package]] +name = "rmp" +version = "0.8.15" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "4ba8be72d372b2c9b35542551678538b562e7cf86c3315773cae48dfbfe7790c" +dependencies = [ + "num-traits", +] + +[[package]] +name = "rmp-serde" +version = "1.3.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "72f81bee8c8ef9b577d1681a70ebbc962c232461e397b22c208c43c04b67a155" +dependencies = [ + "rmp", + "serde", +] + [[package]] name = "rsa" version = "0.7.2" @@ -3651,13 +3820,19 @@ name = "shared" version = "0.1.0" dependencies = [ "anyhow", + "axum", + "bcrypt", "bytes", + "cookie", + "jsonwebtoken", "leptos", "leptos_axum", "leptos_router", "quick-xml", + "rmp-serde", "serde", "sqlx", + "struct-patch", "thiserror 2.0.18", "tokio", "utoipa", @@ -3705,6 +3880,18 @@ version = "0.3.8" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "e320a6c5ad31d271ad523dcf3ad13e2767ad8b1cb8f047f75a8aeaf8da139da2" +[[package]] +name = "simple_asn1" +version = "0.6.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "297f631f50729c8c99b84667867963997ec0b50f32b2a7dbcab828ef0541e8bb" +dependencies = [ + "num-bigint", + "num-traits", + "thiserror 2.0.18", + "time", +] + [[package]] name = "slab" version = "0.4.12" @@ -3998,6 +4185,26 @@ version = "0.11.1" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f" +[[package]] +name = "struct-patch" +version = "0.5.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "613c12642d0c0b051bb3faabfbabdb346497963acfe45622b72b4457d4c93a86" +dependencies = [ + "struct-patch-derive", +] + +[[package]] +name = "struct-patch-derive" +version = "0.5.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "716442fd9f9a6eb5f847b76cf6d09211f3bdf06f2e30c22e94e38d8ebafdd61a" +dependencies = [ + "proc-macro2", + "quote", + "syn 2.0.114", +] + [[package]] name = "subtle" version = "2.6.1" @@ -4108,6 +4315,19 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "7ca71fb01735fbc6fa13e9390d7a3037dde97053c0b65c0c72c0159cd009d26b" dependencies = [ "nom", + "tailwind_fuse_macro", +] + +[[package]] +name = "tailwind_fuse_macro" +version = "0.3.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "efa51b9ff80b5533001f8452d254a688bc7bb39c6bb77f9e0a19c1664d035888" +dependencies = [ + "darling", + "proc-macro2", + "quote", + "syn 2.0.114", ] [[package]] @@ -4641,6 +4861,12 @@ version = "0.2.6" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "ebc1c04c71510c7f702b52b7c350734c9ff1295c464a03335b00bb84fc54f853" +[[package]] +name = "untrusted" +version = "0.9.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1" + [[package]] name = "url" version = "2.5.8" diff --git a/backend/Cargo.toml b/backend/Cargo.toml index dacc6d4..cb71219 100644 --- a/backend/Cargo.toml +++ b/backend/Cargo.toml @@ -16,7 +16,7 @@ tower-http = { version = "0.6", features = ["fs", "trace", "cors", "compression- serde = { version = "1", features = ["derive"] } serde_json = "1" rmp-serde = "1.3" -struct_patch = "0.5" +struct-patch = "0.5" tracing = "0.1" tracing-subscriber = { version = "0.3", features = ["env-filter"] } tokio-stream = "0.1" diff --git a/backend/src/diff.rs b/backend/src/diff.rs index 463dd58..ba52ff5 100644 --- a/backend/src/diff.rs +++ b/backend/src/diff.rs @@ -1,6 +1,5 @@ use std::collections::HashMap; -use shared::{AppEvent, NotificationLevel, SystemNotification, Torrent}; -use struct_patch::traits::Patchable; +use shared::{AppEvent, NotificationLevel, SystemNotification, Torrent, TorrentUpdate}; #[derive(Debug)] pub enum DiffResult { @@ -27,18 +26,36 @@ pub fn diff_torrents(old: &[Torrent], new: &[Torrent]) -> DiffResult { for new_t in new { let old_t = old_map.get(new_t.hash.as_str()).unwrap(); - // struct_patch::diff uses the Patch trait we derived in shared crate - let patch = old_t.diff(new_t); + // Manuel diff creating TorrentUpdate (which is the Patch struct) + let mut patch = TorrentUpdate::default(); + let mut has_changes = false; - if !patch.is_empty() { - // If percent_complete jumped to 100, send notification + if old_t.name != new_t.name { patch.name = Some(new_t.name.clone()); has_changes = true; } + if old_t.size != new_t.size { patch.size = Some(new_t.size); has_changes = true; } + if old_t.down_rate != new_t.down_rate { patch.down_rate = Some(new_t.down_rate); has_changes = true; } + if old_t.up_rate != new_t.up_rate { patch.up_rate = Some(new_t.up_rate); has_changes = true; } + if old_t.completed != new_t.completed { patch.completed = Some(new_t.completed); has_changes = true; } + if old_t.eta != new_t.eta { patch.eta = Some(new_t.eta); has_changes = true; } + if (old_t.percent_complete - new_t.percent_complete).abs() > 0.01 { + patch.percent_complete = Some(new_t.percent_complete); + has_changes = true; + if old_t.percent_complete < 100.0 && new_t.percent_complete >= 100.0 { - tracing::info!("Torrent completed: {} ({})", new_t.name, new_t.hash); events.push(AppEvent::Notification(SystemNotification { level: NotificationLevel::Success, message: format!("Torrent tamamlandı: {}", new_t.name), })); } + } + if old_t.status != new_t.status { patch.status = Some(new_t.status.clone()); has_changes = true; } + if old_t.error_message != new_t.error_message { patch.error_message = Some(new_t.error_message.clone()); has_changes = true; } + if old_t.label != new_t.label { patch.label = Some(new_t.label.clone()); has_changes = true; } + + if has_changes { + // Set the hash (not an Option in Patch usually, but check shared/src/lib.rs) + // Wait, TorrentUpdate is a Patch, does it have 'hash' field? + // Yes, because Torrent has 'hash' field. + patch.hash = Some(new_t.hash.clone()); events.push(AppEvent::Update(patch)); } } diff --git a/backend/src/main.rs b/backend/src/main.rs index 89bf312..85d6015 100644 --- a/backend/src/main.rs +++ b/backend/src/main.rs @@ -162,17 +162,7 @@ async fn main() { // Initialize Database tracing::info!("Connecting to database: {}", args.db_url); - // Ensure the db file exists if it's sqlite - if args.db_url.starts_with("sqlite:") { - let path = args.db_url.trim_start_matches("sqlite:"); - if !std::path::Path::new(path).exists() { - tracing::info!("Database file not found, creating: {}", path); - match std::fs::File::create(path) { - Ok(_) => tracing::info!("Created empty database file"), - Err(e) => tracing::error!("Failed to create database file: {}", e), - } - } - } + // Redundant manual creation removed, shared::db handles it let db: shared::db::Db = match shared::db::Db::new(&args.db_url).await { Ok(db) => db, @@ -440,8 +430,6 @@ async fn main() { let scgi_path_for_ctx = args.socket.clone(); let db_for_ctx = db.clone(); let app = app - .route("/api/setup/status", get(handlers::setup::get_setup_status_handler)) - .route("/api/setup", post(handlers::setup::setup_handler)) .route("/api/events", get(sse::sse_handler)) .route("/api/server_fns/{*fn_name}", post({ let scgi_path = scgi_path_for_ctx.clone(); diff --git a/backend/src/sse.rs b/backend/src/sse.rs index 9efa97e..1f14263 100644 --- a/backend/src/sse.rs +++ b/backend/src/sse.rs @@ -8,6 +8,8 @@ use futures::stream::{self, Stream}; use shared::{AppEvent, GlobalStats, Torrent, TorrentStatus}; use std::convert::Infallible; use tokio_stream::StreamExt; +use axum::response::IntoResponse; +use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64}; // Field definitions to keep query and parser in sync mod fields { @@ -192,22 +194,6 @@ pub async fn fetch_global_stats(client: &RtorrentClient) -> Result, ) -> impl IntoResponse { @@ -267,4 +253,4 @@ pub async fn sse_handler( [("content-type", "application/x-msgpack")], sse ) -} +} \ No newline at end of file diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml index 9799194..04491aa 100644 --- a/frontend/Cargo.toml +++ b/frontend/Cargo.toml @@ -32,21 +32,5 @@ leptos-use = { version = "0.16", features = ["storage"] } codee = "0.3" thiserror = "2.0" rmp-serde = "1.3" -struct_patch = "0.5" -leptos-shadcn-ui = { version = "0.5.0", features = [ - "button", - "input", - "sheet", - "navigation-menu", - "toast", - "table", - "card", - "separator", - "label", - "checkbox", - "badge", - "progress", - "dropdown-menu", - "skeleton", - "avatar" -] } +struct-patch = "0.5" +leptos-shadcn-ui = { version = "0.9.0", default-features = false, features = ["button", "input"] } diff --git a/frontend/public/tailwind.css b/frontend/public/tailwind.css index 8090226..75f985b 100644 --- a/frontend/public/tailwind.css +++ b/frontend/public/tailwind.css @@ -7,9 +7,39 @@ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --color-black: #000; + --color-red-100: oklch(93.6% 0.032 17.717); + --color-red-200: oklch(88.5% 0.062 18.334); + --color-red-400: oklch(70.4% 0.191 22.216); + --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-700: oklch(50.5% 0.213 27.518); + --color-red-800: oklch(44.4% 0.177 26.899); + --color-red-900: oklch(39.6% 0.141 25.723); + --color-yellow-50: oklch(98.7% 0.026 102.212); + --color-yellow-100: oklch(97.3% 0.071 103.193); + --color-yellow-200: oklch(94.5% 0.129 101.54); + --color-yellow-400: oklch(85.2% 0.199 91.936); + --color-yellow-500: oklch(79.5% 0.184 86.047); + --color-yellow-600: oklch(68.1% 0.162 75.834); + --color-yellow-700: oklch(55.4% 0.135 66.442); + --color-yellow-800: oklch(47.6% 0.114 61.907); + --color-yellow-900: oklch(42.1% 0.095 57.708); + --color-green-100: oklch(96.2% 0.044 156.743); + --color-green-200: oklch(92.5% 0.084 155.995); + --color-green-400: oklch(79.2% 0.209 151.711); + --color-green-500: oklch(72.3% 0.219 149.579); + --color-green-600: oklch(62.7% 0.194 149.214); + --color-green-700: oklch(52.7% 0.154 150.069); + --color-green-800: oklch(44.8% 0.119 151.328); + --color-green-900: oklch(39.3% 0.095 152.535); + --color-blue-100: oklch(93.2% 0.032 255.585); + --color-blue-200: oklch(88.2% 0.059 254.128); + --color-blue-400: oklch(70.7% 0.165 254.624); + --color-blue-500: oklch(62.3% 0.214 259.815); + --color-blue-600: oklch(54.6% 0.245 262.881); + --color-blue-700: oklch(48.8% 0.243 264.376); + --color-blue-800: oklch(42.4% 0.199 265.638); + --color-blue-900: oklch(37.9% 0.146 265.522); --spacing: 0.25rem; - --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --text-xs: 0.75rem; @@ -22,15 +52,39 @@ --text-2xl--line-height: calc(2 / 1.5); --font-weight-normal: 400; --font-weight-medium: 500; + --font-weight-semibold: 600; --font-weight-bold: 700; + --tracking-tight: -0.025em; --tracking-wider: 0.05em; --leading-tight: 1.25; - --radius-lg: 0.5rem; - --radius-2xl: 1rem; + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: 0.75rem; + --animate-spin: spin 1s linear infinite; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); + --color-border: hsl(var(--border)); + --color-input: hsl(var(--input)); + --color-ring: hsl(var(--ring)); + --color-background: hsl(var(--background)); + --color-foreground: hsl(var(--foreground)); + --color-primary: hsl(var(--primary)); + --color-primary-foreground: hsl(var(--primary-foreground)); + --color-secondary: hsl(var(--secondary)); + --color-secondary-foreground: hsl(var(--secondary-foreground)); + --color-destructive: hsl(var(--destructive)); + --color-destructive-foreground: hsl(var(--destructive-foreground)); + --color-muted: hsl(var(--muted)); + --color-muted-foreground: hsl(var(--muted-foreground)); + --color-accent: hsl(var(--accent)); + --color-accent-foreground: hsl(var(--accent-foreground)); + --color-popover: hsl(var(--popover)); + --color-popover-foreground: hsl(var(--popover-foreground)); + --color-card: hsl(var(--card)); + --color-card-foreground: hsl(var(--card-foreground)); } } @layer base { @@ -182,1067 +236,12 @@ } } @layer utilities { - .modal { - @layer daisyui.l1.l2.l3 { - pointer-events: none; - visibility: hidden; - position: fixed; - inset: calc(0.25rem * 0); - margin: calc(0.25rem * 0); - display: grid; - height: 100%; - max-height: none; - width: 100%; - max-width: none; - align-items: center; - justify-items: center; - background-color: transparent; - padding: calc(0.25rem * 0); - color: inherit; - transition: visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out; - overflow: clip; - overscroll-behavior: contain; - z-index: 999; - scrollbar-gutter: auto; - &::backdrop { - display: none; - } - } - @layer daisyui.l1.l2 { - &.modal-open, &[open], &:target, .modal-toggle:checked + & { - pointer-events: auto; - visibility: visible; - opacity: 100%; - transition: visibility 0s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out; - background-color: oklch(0% 0 0/ 0.4); - .modal-box { - translate: 0 0; - scale: 1; - opacity: 1; - } - :root:has(&) { - --page-has-backdrop: 1; - --page-overflow: hidden; - --page-scroll-bg: var(--page-scroll-bg-on); - --page-scroll-gutter: stable; - --page-scroll-transition: var(--page-scroll-transition-on); - animation: set-page-has-scroll forwards; - animation-timeline: scroll(); - } - } - @starting-style { - &.modal-open, &[open], &:target, .modal-toggle:checked + & { - opacity: 0%; - } - } - } - } - .drawer-side { - :where(&) { - @layer daisyui.l1.l2.l3 { - overflow-x: hidden; - overflow-y: hidden; - } - } - @layer daisyui.l1.l2.l3 { - pointer-events: none; - visibility: hidden; - position: fixed; - inset-inline-start: calc(0.25rem * 0); - top: calc(0.25rem * 0); - z-index: 10; - grid-column-start: 1; - grid-row-start: 1; - display: grid; - width: 100%; - grid-template-columns: repeat(1, minmax(0, 1fr)); - grid-template-rows: repeat(1, minmax(0, 1fr)); - align-items: flex-start; - justify-items: start; - overscroll-behavior: contain; - background-color: transparent; - opacity: 0%; - transition: opacity 0.2s ease-out 0.1s allow-discrete, visibility 0.3s ease-out 0.1s allow-discrete; - height: 100vh; - height: 100dvh; - > .drawer-overlay { - position: sticky; - top: calc(0.25rem * 0); - cursor: pointer; - place-self: stretch; - background-color: oklch(0% 0 0 / 40%); - } - > * { - grid-column-start: 1; - grid-row-start: 1; - } - > *:not(.drawer-overlay) { - will-change: transform; - transition: translate 0.3s ease-out, width 0.2s ease-out; - translate: -100%; - [dir="rtl"] & { - translate: 100%; - } - } - } - } - .drawer-toggle { - @layer daisyui.l1.l2.l3 { - position: fixed; - height: calc(0.25rem * 0); - width: calc(0.25rem * 0); - appearance: none; - opacity: 0%; - } - @layer daisyui.l1.l2 { - :where(&:checked ~ .drawer-side) { - scrollbar-color: currentColor oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * 0.4)); - @supports (color: color-mix(in lab, red, red)) { - scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * 0.4)); - } - } - :where(:root:has(&:checked)) { - --page-has-backdrop: 1; - --page-overflow: hidden; - --page-scroll-bg: var(--page-scroll-bg-on); - --page-scroll-gutter: stable; - --page-scroll-transition: var(--page-scroll-transition-on); - animation: set-page-has-scroll forwards; - animation-timeline: scroll(); - } - } - @layer daisyui.l1.l2 { - :where(&:checked ~ .drawer-side) { - pointer-events: auto; - visibility: visible; - overflow-y: auto; - opacity: 100%; - & > *:not(.drawer-overlay) { - translate: 0%; - } - } - &:focus-visible ~ .drawer-content label.drawer-button { - outline: 2px solid; - outline-offset: 2px; - } - } - } - .menu { - @layer daisyui.l1.l2.l3 { - 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; - } - } - details { - overflow: hidden; - interpolate-size: allow-keywords; - } - details::details-content { - block-size: 0; - @media (prefers-reduced-motion: no-preference) { - transition-behavior: allow-discrete; - transition-property: block-size, content-visibility; - transition-duration: 0.2s; - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); - } - } - details[open]::details-content { - block-size: auto; - } - :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; - } - } - } - } - .dropdown { - @layer daisyui.l1.l2.l3 { - position: relative; - display: inline-block; - position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); - & > *:not(:has(~ [class*="dropdown-content"])):focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - .dropdown-content { - position: absolute; - } - &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content { - display: none; - transform-origin: top; - opacity: 0%; - scale: 95%; - } - &[popover], .dropdown-content { - z-index: 999; - @media (prefers-reduced-motion: no-preference) { - animation: dropdown 0.2s; - transition-property: opacity, scale, display; - transition-behavior: allow-discrete; - transition-duration: 0.2s; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - } - } - @starting-style { - &[popover], .dropdown-content { - scale: 95%; - opacity: 0; - } - } - &:not(.dropdown-close) { - &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { - > [tabindex]:first-child { - pointer-events: none; - } - .dropdown-content { - opacity: 100%; - scale: 100%; - } - } - &.dropdown-hover:hover { - .dropdown-content { - opacity: 100%; - scale: 100%; - } - } - } - &:is(details) { - summary { - &::-webkit-details-marker { - display: none; - } - } - } - &:where([popover]) { - background: #0000; - } - &[popover] { - position: fixed; - color: inherit; - @supports not (position-area: bottom) { - margin: auto; - &.dropdown-close, &.dropdown-open:not(:popover-open) { - display: none; - transform-origin: top; - opacity: 0%; - scale: 95%; - } - &::backdrop { - background-color: color-mix(in oklab, #000 30%, #0000); - } - } - &.dropdown-close, &:not(.dropdown-open, :popover-open) { - display: none; - transform-origin: top; - opacity: 0%; - scale: 95%; - } - } - } - } - .btn { - :where(&) { - @layer daisyui.l1.l2.l3 { - width: unset; - } - } - @layer daisyui.l1.l2.l3 { - 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); - @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, &:has(: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(input[type="checkbox"], input[type="radio"]) { - appearance: none; - &::after { - --tw-content: attr(aria-label); - content: var(--tw-content); - } - } - &:where(input:checked:not(.filter .btn)) { - --btn-color: var(--color-primary); - --btn-fg: var(--color-primary-content); - isolation: isolate; - } - } - &:disabled { - @layer daisyui.l1.l2 { - &: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); - } - } - } - &[disabled] { - @layer daisyui.l1.l2 { - &: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); - } - } - } - } - .loading { - @layer daisyui.l1.l2.l3 { - 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"); - } + .pointer-events-auto { + pointer-events: auto; } .pointer-events-none { pointer-events: none; } - .list { - @layer daisyui.l1.l2.l3 { - display: flex; - flex-direction: column; - font-size: 0.875rem; - .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); - } - & > :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); - } - } - } - } - } - @layer daisyui.l1.l2 { - .list-row { - &: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; - } - } - } - } - .toast { - @layer daisyui.l1.l2.l3 { - position: fixed; - inset-inline-start: auto; - inset-inline-end: calc(0.25rem * 4); - top: auto; - bottom: calc(0.25rem * 4); - display: flex; - flex-direction: column; - gap: calc(0.25rem * 2); - background-color: transparent; - translate: var(--toast-x, 0) var(--toast-y, 0); - width: max-content; - max-width: calc(100vw - 2rem); - & > * { - @media (prefers-reduced-motion: no-preference) { - animation: toast 0.25s ease-out; - } - } - } - } - .input { - @layer daisyui.l1.l2.l3 { - 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: max(var(--font-size, 0.875rem), 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-flex; - } - &: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; - } - @media (pointer: coarse) { - @supports (-webkit-touch-callout: none) { - &:focus, &:focus-within { - --font-size: 1rem; - } - } - } - &:has(> input[disabled]), &:is(:disabled, [disabled]), fieldset: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; - } - &:has(> input[type="date"]) { - :where(input[type="date"]) { - display: inline-flex; - webkit-appearance: none; - appearance: none; - } - input[type="date"]::-webkit-calendar-picker-indicator { - position: absolute; - inset-inline-end: 0.75em; - width: 1em; - height: 1em; - cursor: pointer; - } - } - } - } - .table { - @layer daisyui.l1.l2.l3 { - 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 { - @layer daisyui.l1.l2.l3 { - 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; - } - } - } - .checkbox { - @layer daisyui.l1.l2.l3 { - border: var(--border) solid var(--input-color, var(--color-base-content)); - @supports (color: color-mix(in lab, red, red)) { - border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); - } - position: relative; - display: inline-block; - flex-shrink: 0; - cursor: pointer; - appearance: none; - border-radius: var(--radius-selector); - padding: calc(0.25rem * 1); - vertical-align: middle; - color: var(--color-base-content); - box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000; - transition: background-color 0.2s, box-shadow 0.2s; - --size: calc(var(--size-selector, 0.25rem) * 6); - width: var(--size); - height: var(--size); - background-size: auto, calc(var(--noise) * 100%); - background-image: none, var(--fx-noise); - &:before { - --tw-content: ""; - content: var(--tw-content); - display: block; - width: 100%; - height: 100%; - rotate: 45deg; - background-color: currentcolor; - opacity: 0%; - transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s; - transition-delay: 0.1s; - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); - box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; - font-size: 1rem; - line-height: 0.75; - } - &:focus-visible { - outline: 2px solid var(--input-color, currentColor); - outline-offset: 2px; - } - &:checked, &[aria-checked="true"] { - background-color: var(--input-color, #0000); - box-shadow: 0 0 #0000 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)); - &:before { - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); - opacity: 100%; - } - @media (forced-colors: active) { - &:before { - rotate: 0deg; - background-color: transparent; - --tw-content: "✔︎"; - clip-path: none; - } - } - @media print { - &:before { - rotate: 0deg; - background-color: transparent; - --tw-content: "✔︎"; - clip-path: none; - } - } - } - &:indeterminate { - background-color: var( --input-color, var(--color-base-content) ); - @supports (color: color-mix(in lab, red, red)) { - background-color: var( --input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000) ); - } - &:before { - rotate: 0deg; - opacity: 100%; - translate: 0 -35%; - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); - } - } - } - &:disabled { - @layer daisyui.l1.l2 { - cursor: not-allowed; - opacity: 20%; - } - } - } - .navbar { - @layer daisyui.l1.l2.l3 { - display: flex; - width: 100%; - align-items: center; - padding: 0.5rem; - min-height: 4rem; - } - :where(&) { - @layer daisyui.l1.l2 { - position: relative; - } - } - } - .drawer { - @layer daisyui.l1.l2.l3 { - position: relative; - display: grid; - width: 100%; - grid-auto-columns: max-content auto; - } - } - .card { - @layer daisyui.l1.l2.l3 { - 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; - } - 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; - } - } - } - .stats { - @layer daisyui.l1.l2.l3 { - position: relative; - display: inline-grid; - grid-auto-flow: column; - overflow-x: auto; - border-radius: var(--radius-box); - } - } - .progress { - @layer daisyui.l1.l2.l3 { - 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%; - @media (prefers-reduced-motion: no-preference) { - animation: progress 5s ease-in-out infinite; - } - @supports (-moz-appearance: none) { - &::-moz-progress-bar { - background-color: transparent; - @media (prefers-reduced-motion: no-preference) { - animation: progress 5s ease-in-out infinite; - background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); - background-size: 200%; - background-position-x: 15%; - } - } - } - } - @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; } @@ -1255,61 +254,12 @@ .static { position: static; } - .toast-end { - @layer daisyui.l1.l2 { - inset-inline-start: auto; - inset-inline-end: calc(0.25rem * 4); - --toast-x: 0; - } - } - .dropdown-end { - @layer daisyui.l1.l2 { - --anchor-h: span-left; - :where(.dropdown-content) { - inset-inline-end: calc(0.25rem * 0); - translate: 0 0; - [dir="rtl"] & { - translate: 0 0; - } - } - &.dropdown-left { - --anchor-h: left; - --anchor-v: span-top; - .dropdown-content { - top: auto; - bottom: calc(0.25rem * 0); - } - } - &.dropdown-right { - --anchor-h: right; - --anchor-v: span-top; - .dropdown-content { - top: auto; - bottom: calc(0.25rem * 0); - } - } - } - } - .dropdown-top { - @layer daisyui.l1.l2 { - --anchor-v: top; - .dropdown-content { - top: auto; - bottom: 100%; - transform-origin: bottom; - } - } - } - .toast-bottom { - @layer daisyui.l1.l2 { - top: auto; - bottom: calc(0.25rem * 4); - --toast-y: 0; - } - } .top-1\/2 { top: calc(1/2 * 100%); } + .top-full { + top: 100%; + } .right-0 { right: calc(var(--spacing) * 0); } @@ -1319,22 +269,14 @@ .bottom-0 { bottom: calc(var(--spacing) * 0); } + .bottom-full { + bottom: 100%; + } .left-0 { left: calc(var(--spacing) * 0); } - .modal-backdrop { - @layer daisyui.l1.l2.l3 { - grid-column-start: 1; - grid-row-start: 1; - display: grid; - align-self: stretch; - justify-self: stretch; - color: transparent; - z-index: -1; - button { - cursor: pointer; - } - } + .left-2 { + left: calc(var(--spacing) * 2); } .z-10 { z-index: 10; @@ -1345,34 +287,6 @@ .z-\[100\] { z-index: 100; } - .modal-box { - @layer daisyui.l1.l2.l3 { - grid-column-start: 1; - grid-row-start: 1; - max-height: 100vh; - width: calc(11/12 * 100%); - max-width: 32rem; - background-color: var(--color-base-100); - padding: calc(0.25rem * 6); - transition: translate 0.3s ease-out, scale 0.3s ease-out, opacity 0.2s ease-out 0.05s, box-shadow 0.3s ease-out; - border-top-left-radius: var(--modal-tl, var(--radius-box)); - border-top-right-radius: var(--modal-tr, var(--radius-box)); - border-bottom-left-radius: var(--modal-bl, var(--radius-box)); - border-bottom-right-radius: var(--modal-br, var(--radius-box)); - scale: 95%; - opacity: 0; - box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px; - overflow-y: auto; - overscroll-behavior: contain; - } - } - .drawer-content { - @layer daisyui.l1.l2.l3 { - grid-column-start: 2; - grid-row-start: 1; - min-width: calc(0.25rem * 0); - } - } .container { width: 100%; @media (width >= 40rem) { @@ -1391,160 +305,20 @@ max-width: 96rem; } } - .divider { - @layer daisyui.l1.l2.l3 { - display: flex; - height: calc(0.25rem * 4); - flex-direction: row; - align-items: center; - align-self: stretch; - white-space: nowrap; - margin: var(--divider-m, 1rem 0); - --divider-color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); - } - &:before, &:after { - content: ""; - height: calc(0.25rem * 0.5); - width: 100%; - flex-grow: 1; - background-color: var(--divider-color); - } - @media print { - &:before, &:after { - border: 0.5px solid; - } - } - &:not(:empty) { - gap: calc(0.25rem * 4); - } - } - } - .filter { - @layer daisyui.l1.l2.l3 { - 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 { - --tw-content: "×"; - content: var(--tw-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%; - } - } - } - } - .input-sm { - @layer daisyui.l1.l2 { - --size: calc(var(--size-field, 0.25rem) * 8); - font-size: max(var(--font-size, 0.75rem), 0.75rem); - &[type="number"] { - &::-webkit-inner-spin-button { - margin-block: calc(0.25rem * -2); - margin-inline-end: calc(0.25rem * -3); - } - } - } - } .my-0\.5 { margin-block: calc(var(--spacing) * 0.5); } - .label { - @layer daisyui.l1.l2.l3 { - 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); - } - } - .modal-action { - @layer daisyui.l1.l2.l3 { - margin-top: calc(0.25rem * 6); - display: flex; - justify-content: flex-end; - gap: calc(0.25rem * 2); - } - } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-2 { margin-top: calc(var(--spacing) * 2); } - .mt-6 { - margin-top: calc(var(--spacing) * 6); + .mr-2 { + margin-right: calc(var(--spacing) * 2); + } + .mb-1 { + margin-bottom: calc(var(--spacing) * 1); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); @@ -1552,201 +326,12 @@ .mb-4 { margin-bottom: calc(var(--spacing) * 4); } - .mb-6 { - margin-bottom: calc(var(--spacing) * 6); - } .ml-1 { margin-left: calc(var(--spacing) * 1); } .ml-auto { margin-left: auto; } - .status { - @layer daisyui.l1.l2.l3 { - 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 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 { - @layer daisyui.l1.l2.l3 { - 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); - } - } - .navbar-end { - @layer daisyui.l1.l2.l3 { - display: inline-flex; - align-items: center; - width: 50%; - justify-content: flex-end; - } - } - .navbar-start { - @layer daisyui.l1.l2.l3 { - display: inline-flex; - align-items: center; - width: 50%; - justify-content: flex-start; - } - } - .card-body { - @layer daisyui.l1.l2.l3 { - 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; - } - } - } - .navbar-center { - @layer daisyui.l1.l2.l3 { - display: inline-flex; - align-items: center; - flex-shrink: 0; - } - } - .alert { - border-width: var(--border); - border-color: var(--alert-border-color, var(--color-base-200)); - @layer daisyui.l1.l2.l3 { - border-style: solid; - --alert-border-color: var(--color-base-200); - 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; - 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); - } - } - } - .card-title { - @layer daisyui.l1.l2.l3 { - 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); - } - } - } .line-clamp-2 { overflow: hidden; display: -webkit-box; @@ -1765,47 +350,18 @@ .hidden { display: none; } - .inline-block { - display: inline-block; - } - .table { - display: table; - } - .modal-bottom { - @layer daisyui.l1.l2 { - place-items: end; - .modal-box { - height: auto; - width: 100%; - max-width: none; - max-height: calc(100vh - 5em); - translate: 0 100%; - scale: 1; - --modal-tl: var(--radius-box); - --modal-tr: var(--radius-box); - --modal-bl: 0; - --modal-br: 0; - } - } - } - .btn-circle { - @layer daisyui.l1.l2 { - border-radius: calc(infinity * 1px); - padding-inline: calc(0.25rem * 0); - width: var(--size); - height: var(--size); - } - } - .btn-square { - @layer daisyui.l1.l2 { - padding-inline: calc(0.25rem * 0); - width: var(--size); - height: var(--size); - } + .inline-flex { + display: inline-flex; } .h-1\.5 { height: calc(var(--spacing) * 1.5); } + .h-2 { + height: calc(var(--spacing) * 2); + } + .h-3\.5 { + height: calc(var(--spacing) * 3.5); + } .h-4 { height: calc(var(--spacing) * 4); } @@ -1815,14 +371,23 @@ .h-6 { height: calc(var(--spacing) * 6); } + .h-7 { + height: calc(var(--spacing) * 7); + } .h-8 { height: calc(var(--spacing) * 8); } + .h-9 { + height: calc(var(--spacing) * 9); + } .h-10 { height: calc(var(--spacing) * 10); } - .h-16 { - height: calc(var(--spacing) * 16); + .h-12 { + height: calc(var(--spacing) * 12); + } + .h-\[48px\] { + height: 48px; } .h-auto { height: auto; @@ -1836,6 +401,12 @@ .max-h-96 { max-height: calc(var(--spacing) * 96); } + .max-h-screen { + max-height: 100vh; + } + .min-h-0 { + min-height: calc(var(--spacing) * 0); + } .min-h-8 { min-height: calc(var(--spacing) * 8); } @@ -1848,10 +419,8 @@ .min-h-screen { min-height: 100vh; } - .loading-lg { - @layer daisyui.l1.l2 { - width: calc(var(--size-selector, 0.25rem) * 7); - } + .w-3\.5 { + width: calc(var(--spacing) * 3.5); } .w-4 { width: calc(var(--spacing) * 4); @@ -1862,14 +431,17 @@ .w-6 { width: calc(var(--spacing) * 6); } + .w-7 { + width: calc(var(--spacing) * 7); + } .w-8 { width: calc(var(--spacing) * 8); } .w-10 { width: calc(var(--spacing) * 10); } - .w-16 { - width: calc(var(--spacing) * 16); + .w-12 { + width: calc(var(--spacing) * 12); } .w-24 { width: calc(var(--spacing) * 24); @@ -1877,32 +449,29 @@ .w-32 { width: calc(var(--spacing) * 32); } - .w-40 { - width: calc(var(--spacing) * 40); - } .w-48 { width: calc(var(--spacing) * 48); } - .w-52 { - width: calc(var(--spacing) * 52); - } .w-64 { width: calc(var(--spacing) * 64); } .w-full { width: 100%; } - .max-w-full { - max-width: 100%; - } .max-w-md { max-width: var(--container-md); } .max-w-sm { max-width: var(--container-sm); } - .max-w-xs { - max-width: var(--container-xs); + .min-w-0 { + min-width: calc(var(--spacing) * 0); + } + .min-w-\[8rem\] { + min-width: 8rem; + } + .min-w-\[10rem\] { + min-width: 10rem; } .min-w-\[200px\] { min-width: 200px; @@ -1920,23 +489,8 @@ .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } - .link { - @layer daisyui.l1.l2.l3 { - 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; - } - } + .animate-spin { + animation: var(--animate-spin); } .cursor-default { cursor: default; @@ -1947,17 +501,14 @@ .list-none { list-style-type: none; } - .grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .flex-col { flex-direction: column; } - .content-start { - align-content: flex-start; + .flex-col-reverse { + flex-direction: column-reverse; } .items-center { align-items: center; @@ -1971,6 +522,9 @@ .justify-center { justify-content: center; } + .justify-end { + justify-content: flex-end; + } .justify-start { justify-content: flex-start; } @@ -1989,6 +543,27 @@ .gap-4 { gap: calc(var(--spacing) * 4); } + .space-y-1 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-1\.5 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-2 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); + } + } .space-y-4 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; @@ -1996,6 +571,13 @@ margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } } + .space-x-4 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); + } + } .truncate { overflow: hidden; text-overflow: ellipsis; @@ -2004,31 +586,36 @@ .overflow-hidden { overflow: hidden; } - .overflow-x-auto { - overflow-x: auto; - } .overflow-y-auto { overflow-y: auto; } - .rounded-2xl { - border-radius: var(--radius-2xl); - } - .rounded-box { - border-radius: var(--radius-box); - } - .rounded-box { - border-radius: var(--radius-box); - } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } + .rounded-md { + border-radius: var(--radius-md); + } + .rounded-sm { + border-radius: var(--radius-sm); + } + .rounded-xl { + border-radius: var(--radius-xl); + } .border { border-style: var(--tw-border-style); border-width: 1px; } + .border-2 { + border-style: var(--tw-border-style); + border-width: 2px; + } + .border-4 { + border-style: var(--tw-border-style); + border-width: 4px; + } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; @@ -2041,148 +628,162 @@ border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } - .badge-ghost { - @layer daisyui.l1.l2 { - border-color: var(--color-base-200); - background-color: var(--color-base-200); - color: var(--color-base-content); - background-image: none; - } + .border-blue-200 { + border-color: var(--color-blue-200); } - .badge-soft { - @layer daisyui.l1.l2 { - color: var(--badge-color, var(--color-base-content)); - background-color: var(--badge-color, var(--color-base-content)); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) ); - } - border-color: var(--badge-color, var(--color-base-content)); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) ); - } - background-image: none; - } + .border-border { + border-color: var(--color-border); } - .border-base-200 { - border-color: var(--color-base-200); - } - .border-base-200\/50 { - border-color: var(--color-base-200); + .border-border\/50 { + border-color: color-mix(in srgb, hsl(var(--border)) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-base-200) 50%, transparent); + border-color: color-mix(in oklab, var(--color-border) 50%, transparent); } } - .border-base-300 { - border-color: var(--color-base-300); + .border-current { + border-color: currentcolor; } - .bg-base-100 { - background-color: var(--color-base-100); + .border-destructive { + border-color: var(--color-destructive); } - .bg-base-100\/95 { - background-color: var(--color-base-100); + .border-destructive\/50 { + border-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-base-100) 95%, transparent); + border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent); } } - .bg-base-200 { - background-color: var(--color-base-200); + .border-green-200 { + border-color: var(--color-green-200); } - .bg-base-200\/50 { - background-color: var(--color-base-200); + .border-input { + border-color: var(--color-input); + } + .border-primary { + border-color: var(--color-primary); + } + .border-primary\/50 { + border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-base-200) 50%, transparent); + border-color: color-mix(in oklab, var(--color-primary) 50%, transparent); } } - .bg-neutral { - background-color: var(--color-neutral); + .border-red-200 { + border-color: var(--color-red-200); + } + .border-yellow-200 { + border-color: var(--color-yellow-200); + } + .border-t-transparent { + border-top-color: transparent; + } + .bg-accent { + background-color: var(--color-accent); + } + .bg-background { + background-color: var(--color-background); + } + .bg-background\/95 { + background-color: color-mix(in srgb, hsl(var(--background)) 95%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-background) 95%, transparent); + } + } + .bg-blue-100 { + background-color: var(--color-blue-100); + } + .bg-card { + background-color: var(--color-card); + } + .bg-destructive { + background-color: var(--color-destructive); + } + .bg-destructive\/10 { + background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent); + } + } + .bg-green-100 { + background-color: var(--color-green-100); + } + .bg-muted { + background-color: var(--color-muted); + } + .bg-muted\/10 { + background-color: color-mix(in srgb, hsl(var(--muted)) 10%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-muted) 10%, transparent); + } + } + .bg-muted\/40 { + background-color: color-mix(in srgb, hsl(var(--muted)) 40%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-muted) 40%, transparent); + } + } + .bg-muted\/50 { + background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-muted) 50%, transparent); + } + } + .bg-popover { + background-color: var(--color-popover); } .bg-primary { background-color: var(--color-primary); } - .bg-primary\/10 { - background-color: var(--color-primary); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); - } + .bg-red-100 { + background-color: var(--color-red-100); } - .loading-spinner { - @layer daisyui.l1.l2 { - mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); - } + .bg-secondary { + background-color: var(--color-secondary); + } + .bg-transparent { + background-color: transparent; + } + .bg-yellow-50 { + background-color: var(--color-yellow-50); + } + .bg-yellow-100 { + background-color: var(--color-yellow-100); } .stroke-current { stroke: currentcolor; } - .checkbox-sm { - @layer daisyui.l1.l2 { - padding: 0.1875rem; - --size: calc(var(--size-selector, 0.25rem) * 5); - } - } - .p-0 { - padding: calc(var(--spacing) * 0); - } .p-1 { padding: calc(var(--spacing) * 1); } - .p-2 { - padding: calc(var(--spacing) * 2); - } .p-3 { padding: calc(var(--spacing) * 3); } .p-4 { padding: calc(var(--spacing) * 4); } - .menu-title { - @layer daisyui.l1.l2.l3 { - padding-inline: calc(0.25rem * 3); - padding-block: calc(0.25rem * 2); - color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-base-content) 40%, transparent); - } - font-size: 0.875rem; - font-weight: 600; - } - } - .table-sm { - @layer daisyui.l1.l2 { - :not(thead, tfoot) tr { - font-size: 0.75rem; - } - :where(th, td) { - padding-inline: calc(0.25rem * 3); - padding-block: calc(0.25rem * 2); - } - } - } - .badge-sm { - @layer daisyui.l1.l2 { - --size: calc(var(--size-selector, 0.25rem) * 5); - font-size: 0.75rem; - padding-inline: calc(0.25rem * 2.5 - var(--border)); - } - } - .badge-xs { - @layer daisyui.l1.l2 { - --size: calc(var(--size-selector, 0.25rem) * 4); - font-size: 0.625rem; - padding-inline: calc(0.25rem * 2 - var(--border)); - } + .p-6 { + padding: calc(var(--spacing) * 6); } .px-2 { padding-inline: calc(var(--spacing) * 2); } + .px-2\.5 { + padding-inline: calc(var(--spacing) * 2.5); + } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-4 { padding-inline: calc(var(--spacing) * 4); } + .py-0\.5 { + padding-block: calc(var(--spacing) * 0.5); + } .py-1 { padding-block: calc(var(--spacing) * 1); } + .py-1\.5 { + padding-block: calc(var(--spacing) * 1.5); + } .py-2 { padding-block: calc(var(--spacing) * 2); } @@ -2192,11 +793,26 @@ .pt-1 { padding-top: calc(var(--spacing) * 1); } + .pt-2 { + padding-top: calc(var(--spacing) * 2); + } + .pt-4 { + padding-top: calc(var(--spacing) * 4); + } + .pr-2 { + padding-right: calc(var(--spacing) * 2); + } + .pb-2 { + padding-bottom: calc(var(--spacing) * 2); + } + .pb-3 { + padding-bottom: calc(var(--spacing) * 3); + } .pb-8 { padding-bottom: calc(var(--spacing) * 8); } - .pb-20 { - padding-bottom: calc(var(--spacing) * 20); + .pl-8 { + padding-left: calc(var(--spacing) * 8); } .text-center { text-align: center; @@ -2226,8 +842,9 @@ .text-\[10px\] { font-size: 10px; } - .text-\[11px\] { - font-size: 11px; + .leading-none { + --tw-leading: 1; + line-height: 1; } .leading-tight { --tw-leading: var(--leading-tight); @@ -2245,6 +862,14 @@ --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } + .font-semibold { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } + .tracking-tight { + --tw-tracking: var(--tracking-tight); + letter-spacing: var(--tracking-tight); + } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); @@ -2252,85 +877,68 @@ .whitespace-nowrap { white-space: nowrap; } - .alert-error { - @layer daisyui.l1.l2 { - color: var(--color-error-content); - --alert-border-color: var(--color-error); - --alert-color: var(--color-error); - } + .text-accent-foreground { + color: var(--color-accent-foreground); } - .alert-info { - @layer daisyui.l1.l2 { - color: var(--color-info-content); - --alert-border-color: var(--color-info); - --alert-color: var(--color-info); - } + .text-blue-500 { + color: var(--color-blue-500); } - .alert-success { - @layer daisyui.l1.l2 { - color: var(--color-success-content); - --alert-border-color: var(--color-success); - --alert-color: var(--color-success); - } + .text-blue-600 { + color: var(--color-blue-600); } - .alert-warning { - @layer daisyui.l1.l2 { - color: var(--color-warning-content); - --alert-border-color: var(--color-warning); - --alert-color: var(--color-warning); - } + .text-blue-700 { + color: var(--color-blue-700); } - .checkbox-primary { - @layer daisyui.l1.l2 { - color: var(--color-primary-content); - --input-color: var(--color-primary); - } + .text-card-foreground { + color: var(--color-card-foreground); } - .progress-primary { - @layer daisyui.l1.l2 { - color: var(--color-primary); - } + .text-destructive { + color: var(--color-destructive); } - .progress-success { - @layer daisyui.l1.l2 { - color: var(--color-success); - } + .text-destructive-foreground { + color: var(--color-destructive-foreground); } - .text-base-content\/50 { - color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-base-content) 50%, transparent); - } + .text-foreground { + color: var(--color-foreground); } - .text-base-content\/60 { - color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-base-content) 60%, transparent); - } + .text-green-500 { + color: var(--color-green-500); } - .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-green-600 { + color: var(--color-green-600); } - .text-error { - color: var(--color-error); + .text-green-700 { + color: var(--color-green-700); } - .text-neutral-content { - color: var(--color-neutral-content); + .text-muted-foreground { + color: var(--color-muted-foreground); + } + .text-popover-foreground { + color: var(--color-popover-foreground); } .text-primary { color: var(--color-primary); } - .text-primary-content { - color: var(--color-primary-content); + .text-primary-foreground { + color: var(--color-primary-foreground); } - .text-success { - color: var(--color-success); + .text-red-500 { + color: var(--color-red-500); } - .text-warning { - color: var(--color-warning); + .text-red-700 { + color: var(--color-red-700); + } + .text-secondary-foreground { + color: var(--color-secondary-foreground); + } + .text-yellow-500 { + color: var(--color-yellow-500); + } + .text-yellow-600 { + color: var(--color-yellow-600); + } + .text-yellow-700 { + color: var(--color-yellow-700); } .capitalize { text-transform: capitalize; @@ -2350,8 +958,8 @@ .opacity-70 { opacity: 70%; } - .opacity-80 { - opacity: 80%; + .opacity-90 { + opacity: 90%; } .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)); @@ -2373,10 +981,6 @@ --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); } - .ring { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } .ring-2 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -2384,36 +988,8 @@ .ring-primary { --tw-ring-color: var(--color-primary); } - .ring-offset-1 { - --tw-ring-offset-width: 1px; - --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - } - .ring-offset-base-100 { - --tw-ring-offset-color: var(--color-base-100); - } - .btn-ghost { - @layer daisyui.l1 { - &:not(.btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn)) { - --btn-shadow: ""; - --btn-bg: #0000; - --btn-border: #0000; - --btn-noise: none; - &:not(:disabled, [disabled], .btn-disabled) { - outline-color: currentcolor; - --btn-fg: var(--btn-color, currentColor); - } - } - @media (hover: none) { - &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover { - outline-color: currentcolor; - --btn-shadow: ""; - --btn-bg: #0000; - --btn-fg: var(--btn-color, currentColor); - --btn-border: #0000; - --btn-noise: none; - } - } - } + .ring-offset-background { + --tw-ring-offset-color: var(--color-background); } .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,); @@ -2433,53 +1009,18 @@ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-opacity { + transition-property: opacity; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } .duration-100 { --tw-duration: 100ms; transition-duration: 100ms; } - .btn-sm { - @layer daisyui.l1.l2 { - --fontsize: 0.75rem; - --btn-p: 0.75rem; - --size: calc(var(--size-field, 0.25rem) * 8); - } - } - .btn-xs { - @layer daisyui.l1.l2 { - --fontsize: 0.6875rem; - --btn-p: 0.5rem; - --size: calc(var(--size-field, 0.25rem) * 6); - } - } - .badge-error { - @layer daisyui.l1.l2 { - --badge-color: var(--color-error); - --badge-fg: var(--color-error-content); - } - } - .badge-primary { - @layer daisyui.l1.l2 { - --badge-color: var(--color-primary); - --badge-fg: var(--color-primary-content); - } - } - .badge-success { - @layer daisyui.l1.l2 { - --badge-color: var(--color-success); - --badge-fg: var(--color-success-content); - } - } - .badge-warning { - @layer daisyui.l1.l2 { - --badge-color: var(--color-warning); - --badge-fg: var(--color-warning-content); - } - } - .btn-primary { - @layer daisyui.l1.l2 { - --btn-color: var(--color-primary); - --btn-fg: var(--color-primary-content); - } + .duration-500 { + --tw-duration: 500ms; + transition-duration: 500ms; } .outline-none { --tw-outline-style: none; @@ -2492,6 +1033,11 @@ .ring-inset { --tw-ring-inset: inset; } + .group-open\:block { + &:is(:where(.group):is([open], :popover-open, :open) *) { + display: block; + } + } .group-hover\:opacity-50 { &:is(:where(.group):hover *) { @media (hover: hover) { @@ -2499,26 +1045,64 @@ } } } - .hover\:bg-base-300 { + .peer-disabled\:cursor-not-allowed { + &:is(:where(.peer):disabled ~ *) { + cursor: not-allowed; + } + } + .peer-disabled\:opacity-70 { + &:is(:where(.peer):disabled ~ *) { + opacity: 70%; + } + } + .file\:border-0 { + &::file-selector-button { + border-style: var(--tw-border-style); + border-width: 0px; + } + } + .file\:bg-transparent { + &::file-selector-button { + background-color: transparent; + } + } + .file\:text-sm { + &::file-selector-button { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + } + .file\:font-medium { + &::file-selector-button { + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + } + } + .placeholder\:text-muted-foreground { + &::placeholder { + color: var(--color-muted-foreground); + } + } + .hover\:bg-accent { &:hover { @media (hover: hover) { - background-color: var(--color-base-300); + background-color: var(--color-accent); } } } - .hover\:bg-error { + .hover\:bg-muted { &:hover { @media (hover: hover) { - background-color: var(--color-error); + background-color: var(--color-muted); } } } - .hover\:bg-error\/10 { + .hover\:bg-muted\/50 { &:hover { @media (hover: hover) { - background-color: var(--color-error); + background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-error) 10%, transparent); + background-color: color-mix(in oklab, var(--color-muted) 50%, transparent); } } } @@ -2530,43 +1114,149 @@ } } } - .hover\:text-error-content { + .hover\:bg-primary\/90 { &:hover { @media (hover: hover) { - color: var(--color-error-content); - } - } - } - .hover\:text-primary { - &:hover { - @media (hover: hover) { - color: var(--color-primary); - } - } - } - .hover\:text-primary-content { - &:hover { - @media (hover: hover) { - color: var(--color-primary-content); - } - } - } - .hover\:shadow-primary\/20 { - &:hover { - @media (hover: hover) { - --tw-shadow-color: var(--color-primary); + background-color: color-mix(in srgb, hsl(var(--primary)) 90%, transparent); @supports (color: color-mix(in lab, red, red)) { - --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent); + background-color: color-mix(in oklab, var(--color-primary) 90%, transparent); } } } } + .hover\:bg-secondary\/80 { + &:hover { + @media (hover: hover) { + background-color: color-mix(in srgb, hsl(var(--secondary)) 80%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent); + } + } + } + } + .hover\:text-accent-foreground { + &:hover { + @media (hover: hover) { + color: var(--color-accent-foreground); + } + } + } + .hover\:text-foreground { + &:hover { + @media (hover: hover) { + color: var(--color-foreground); + } + } + } + .hover\:opacity-100 { + &:hover { + @media (hover: hover) { + opacity: 100%; + } + } + } + .focus\:bg-accent { + &:focus { + background-color: var(--color-accent); + } + } + .focus\:text-accent-foreground { + &:focus { + color: var(--color-accent-foreground); + } + } + .focus\:ring-2 { + &:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + .focus\:ring-ring { + &:focus { + --tw-ring-color: var(--color-ring); + } + } + .focus\:ring-offset-2 { + &:focus { + --tw-ring-offset-width: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + } + } .focus\:outline-none { &:focus { --tw-outline-style: none; outline-style: none; } } + .focus-visible\:ring-1 { + &:focus-visible { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + .focus-visible\:ring-2 { + &:focus-visible { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + .focus-visible\:ring-ring { + &:focus-visible { + --tw-ring-color: var(--color-ring); + } + } + .focus-visible\:ring-offset-2 { + &:focus-visible { + --tw-ring-offset-width: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + } + } + .focus-visible\:outline-none { + &:focus-visible { + --tw-outline-style: none; + outline-style: none; + } + } + .disabled\:pointer-events-none { + &:disabled { + pointer-events: none; + } + } + .disabled\:cursor-not-allowed { + &:disabled { + cursor: not-allowed; + } + } + .disabled\:opacity-50 { + &:disabled { + opacity: 50%; + } + } + .data-\[disabled\]\:pointer-events-none { + &[data-disabled] { + pointer-events: none; + } + } + .data-\[disabled\]\:opacity-50 { + &[data-disabled] { + opacity: 50%; + } + } + .sm\:top-auto { + @media (width >= 40rem) { + top: auto; + } + } + .sm\:right-0 { + @media (width >= 40rem) { + right: calc(var(--spacing) * 0); + } + } + .sm\:bottom-0 { + @media (width >= 40rem) { + bottom: calc(var(--spacing) * 0); + } + } .sm\:hidden { @media (width >= 40rem) { display: none; @@ -2577,28 +1267,9 @@ display: inline; } } - .sm\:modal-middle { + .sm\:flex-col { @media (width >= 40rem) { - @layer daisyui.l1.l2 { - place-items: center; - .modal-box { - height: auto; - width: calc(11/12 * 100%); - max-width: 32rem; - max-height: calc(100vh - 5em); - translate: 0 2%; - scale: 98%; - --modal-tl: var(--radius-box); - --modal-tr: var(--radius-box); - --modal-bl: var(--radius-box); - --modal-br: var(--radius-box); - } - } - } - } - .md\:block { - @media (width >= 48rem) { - display: block; + flex-direction: column; } } .md\:flex { @@ -2621,64 +1292,9 @@ width: calc(var(--spacing) * 5); } } - .md\:btn-md { + .md\:max-w-\[420px\] { @media (width >= 48rem) { - @layer daisyui.l1.l2 { - --fontsize: 0.875rem; - --btn-p: 1rem; - --size: calc(var(--size-field, 0.25rem) * 10); - } - } - } - .lg\:drawer-open { - @media (width >= 64rem) { - @layer daisyui.l1.l2 { - & > .drawer-toggle:checked { - & ~ .drawer-side { - scrollbar-color: revert-layer; - } - :root:has(&) { - --page-overflow: revert-layer; - --page-scroll-gutter: revert-layer; - --page-scroll-bg: revert-layer; - --page-scroll-transition: revert-layer; - --page-has-backdrop: revert-layer; - animation: revert-layer; - animation-timeline: revert-layer; - } - } - } - @layer daisyui.l1.l2 { - & > .drawer-side { - overflow-y: auto; - } - > .drawer-toggle { - display: none; - & ~ .drawer-side { - pointer-events: auto; - visibility: visible; - position: sticky; - display: block; - width: auto; - overscroll-behavior: auto; - opacity: 100%; - & > .drawer-overlay { - cursor: default; - background-color: transparent; - } - & > *:not(.drawer-overlay) { - translate: 0%; - [dir="rtl"] & { - translate: 0%; - } - } - } - &:checked ~ .drawer-side { - pointer-events: auto; - visibility: visible; - } - } - } + max-width: 420px; } } .lg\:hidden { @@ -2686,6 +1302,124 @@ display: none; } } + .dark\:border-blue-800 { + @media (prefers-color-scheme: dark) { + border-color: var(--color-blue-800); + } + } + .dark\:border-destructive { + @media (prefers-color-scheme: dark) { + border-color: var(--color-destructive); + } + } + .dark\:border-green-800 { + @media (prefers-color-scheme: dark) { + border-color: var(--color-green-800); + } + } + .dark\:border-red-800 { + @media (prefers-color-scheme: dark) { + border-color: var(--color-red-800); + } + } + .dark\:border-yellow-800 { + @media (prefers-color-scheme: dark) { + border-color: var(--color-yellow-800); + } + } + .dark\:border-yellow-900 { + @media (prefers-color-scheme: dark) { + border-color: var(--color-yellow-900); + } + } + .dark\:bg-blue-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent); + } + } + } + .dark\:bg-destructive\/50 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-destructive) 50%, transparent); + } + } + } + .dark\:bg-green-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent); + } + } + } + .dark\:bg-red-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent); + } + } + } + .dark\:bg-yellow-900\/20 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-yellow-900) 20%, transparent); + } + } + } + .dark\:bg-yellow-900\/30 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-yellow-900) 30%, transparent); + } + } + } + .dark\:text-blue-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-blue-400); + } + } + .dark\:text-blue-500 { + @media (prefers-color-scheme: dark) { + color: var(--color-blue-500); + } + } + .dark\:text-destructive-foreground { + @media (prefers-color-scheme: dark) { + color: var(--color-destructive-foreground); + } + } + .dark\:text-green-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-green-400); + } + } + .dark\:text-green-500 { + @media (prefers-color-scheme: dark) { + color: var(--color-green-500); + } + } + .dark\:text-red-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-red-400); + } + } + .dark\:text-yellow-400 { + @media (prefers-color-scheme: dark) { + color: var(--color-yellow-400); + } + } + .dark\:text-yellow-500 { + @media (prefers-color-scheme: dark) { + color: var(--color-yellow-500); + } + } .\[\&\:\:-webkit-details-marker\]\:hidden { &::-webkit-details-marker { display: none; @@ -2693,13 +1427,57 @@ } } @layer base { - html, body { - min-height: 100dvh; - width: 100%; - overflow: hidden; - overscroll-behavior-y: none; - background-color: var(--color-base-100); - color: var(--color-base-content); + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + --radius: 0.5rem; + } + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + } +} +@layer base { + * { + border-color: var(--color-border); + } + body { + background-color: var(--color-background); + color: var(--color-foreground); } } @media (hover: none) { @@ -2714,445 +1492,6 @@ :focus { outline: none !important; } -@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:has(input.theme-controller[value=dim]:checked),[data-theme=dim] { - color-scheme: dark; - --color-base-100: oklch(30.857% 0.023 264.149); - --color-base-200: oklch(28.036% 0.019 264.182); - --color-base-300: oklch(26.346% 0.018 262.177); - --color-base-content: oklch(82.901% 0.031 222.959); - --color-primary: oklch(86.133% 0.141 139.549); - --color-primary-content: oklch(17.226% 0.028 139.549); - --color-secondary: oklch(73.375% 0.165 35.353); - --color-secondary-content: oklch(14.675% 0.033 35.353); - --color-accent: oklch(74.229% 0.133 311.379); - --color-accent-content: oklch(14.845% 0.026 311.379); - --color-neutral: oklch(24.731% 0.02 264.094); - --color-neutral-content: oklch(82.901% 0.031 222.959); - --color-info: oklch(86.078% 0.142 206.182); - --color-info-content: oklch(17.215% 0.028 206.182); - --color-success: oklch(86.171% 0.142 166.534); - --color-success-content: oklch(17.234% 0.028 166.534); - --color-warning: oklch(86.163% 0.142 94.818); - --color-warning-content: oklch(17.232% 0.028 94.818); - --color-error: oklch(82.418% 0.099 33.756); - --color-error-content: oklch(16.483% 0.019 33.756); - --radius-selector: 1rem; - --radius-field: 0.5rem; - --radius-box: 1rem; - --size-selector: 0.25rem; - --size-field: 0.25rem; - --border: 1px; - --depth: 0; - --noise: 0; - } -} -@layer base { - :root:has(input.theme-controller[value=nord]:checked),[data-theme=nord] { - color-scheme: light; - --color-base-100: oklch(95.127% 0.007 260.731); - --color-base-200: oklch(93.299% 0.01 261.788); - --color-base-300: oklch(89.925% 0.016 262.749); - --color-base-content: oklch(32.437% 0.022 264.182); - --color-primary: oklch(59.435% 0.077 254.027); - --color-primary-content: oklch(11.887% 0.015 254.027); - --color-secondary: oklch(69.651% 0.059 248.687); - --color-secondary-content: oklch(13.93% 0.011 248.687); - --color-accent: oklch(77.464% 0.062 217.469); - --color-accent-content: oklch(15.492% 0.012 217.469); - --color-neutral: oklch(45.229% 0.035 264.131); - --color-neutral-content: oklch(89.925% 0.016 262.749); - --color-info: oklch(69.207% 0.062 332.664); - --color-info-content: oklch(13.841% 0.012 332.664); - --color-success: oklch(76.827% 0.074 131.063); - --color-success-content: oklch(15.365% 0.014 131.063); - --color-warning: oklch(85.486% 0.089 84.093); - --color-warning-content: oklch(17.097% 0.017 84.093); - --color-error: oklch(60.61% 0.12 15.341); - --color-error-content: oklch(12.122% 0.024 15.341); - --radius-selector: 1rem; - --radius-field: 0.25rem; - --radius-box: 0.5rem; - --size-selector: 0.25rem; - --size-field: 0.25rem; - --border: 1px; - --depth: 0; - --noise: 0; - } -} -@layer base { - :root:has(input.theme-controller[value=cupcake]:checked),[data-theme=cupcake] { - color-scheme: light; - --color-base-100: oklch(97.788% 0.004 56.375); - --color-base-200: oklch(93.982% 0.007 61.449); - --color-base-300: oklch(91.586% 0.006 53.44); - --color-base-content: oklch(23.574% 0.066 313.189); - --color-primary: oklch(85% 0.138 181.071); - --color-primary-content: oklch(43% 0.078 188.216); - --color-secondary: oklch(89% 0.061 343.231); - --color-secondary-content: oklch(45% 0.187 3.815); - --color-accent: oklch(90% 0.076 70.697); - --color-accent-content: oklch(47% 0.157 37.304); - --color-neutral: oklch(27% 0.006 286.033); - --color-neutral-content: oklch(92% 0.004 286.32); - --color-info: oklch(68% 0.169 237.323); - --color-info-content: oklch(29% 0.066 243.157); - --color-success: oklch(69% 0.17 162.48); - --color-success-content: oklch(26% 0.051 172.552); - --color-warning: oklch(79% 0.184 86.047); - --color-warning-content: oklch(28% 0.066 53.813); - --color-error: oklch(64% 0.246 16.439); - --color-error-content: oklch(27% 0.105 12.094); - --radius-selector: 1rem; - --radius-field: 2rem; - --radius-box: 1rem; - --size-selector: 0.25rem; - --size-field: 0.25rem; - --border: 2px; - --depth: 1; - --noise: 0; - } -} -@layer base { - :root:has(input.theme-controller[value=dracula]:checked),[data-theme=dracula] { - color-scheme: dark; - --color-base-100: oklch(28.822% 0.022 277.508); - --color-base-200: oklch(26.805% 0.02 277.508); - --color-base-300: oklch(24.787% 0.019 277.508); - --color-base-content: oklch(97.747% 0.007 106.545); - --color-primary: oklch(75.461% 0.183 346.812); - --color-primary-content: oklch(15.092% 0.036 346.812); - --color-secondary: oklch(74.202% 0.148 301.883); - --color-secondary-content: oklch(14.84% 0.029 301.883); - --color-accent: oklch(83.392% 0.124 66.558); - --color-accent-content: oklch(16.678% 0.024 66.558); - --color-neutral: oklch(39.445% 0.032 275.524); - --color-neutral-content: oklch(87.889% 0.006 275.524); - --color-info: oklch(88.263% 0.093 212.846); - --color-info-content: oklch(17.652% 0.018 212.846); - --color-success: oklch(87.099% 0.219 148.024); - --color-success-content: oklch(17.419% 0.043 148.024); - --color-warning: oklch(95.533% 0.134 112.757); - --color-warning-content: oklch(19.106% 0.026 112.757); - --color-error: oklch(68.22% 0.206 24.43); - --color-error-content: oklch(13.644% 0.041 24.43); - --radius-selector: 1rem; - --radius-field: 0.5rem; - --radius-box: 1rem; - --size-selector: 0.25rem; - --size-field: 0.25rem; - --border: 1px; - --depth: 0; - --noise: 0; - } -} -@layer base { - :root:has(input.theme-controller[value=cyberpunk]:checked),[data-theme=cyberpunk] { - color-scheme: light; - --color-base-100: oklch(94.51% 0.179 104.32); - --color-base-200: oklch(91.51% 0.179 104.32); - --color-base-300: oklch(85.51% 0.179 104.32); - --color-base-content: oklch(0% 0 0); - --color-primary: oklch(74.22% 0.209 6.35); - --color-primary-content: oklch(14.844% 0.041 6.35); - --color-secondary: oklch(83.33% 0.184 204.72); - --color-secondary-content: oklch(16.666% 0.036 204.72); - --color-accent: oklch(71.86% 0.217 310.43); - --color-accent-content: oklch(14.372% 0.043 310.43); - --color-neutral: oklch(23.04% 0.065 269.31); - --color-neutral-content: oklch(94.51% 0.179 104.32); - --color-info: oklch(72.06% 0.191 231.6); - --color-info-content: oklch(0% 0 0); - --color-success: oklch(64.8% 0.15 160); - --color-success-content: oklch(0% 0 0); - --color-warning: oklch(84.71% 0.199 83.87); - --color-warning-content: oklch(0% 0 0); - --color-error: oklch(71.76% 0.221 22.18); - --color-error-content: oklch(0% 0 0); - --radius-selector: 0rem; - --radius-field: 0rem; - --radius-box: 0rem; - --size-selector: 0.25rem; - --size-field: 0.25rem; - --border: 1px; - --depth: 0; - --noise: 0; - } -} -@layer base { - :root:has(input.theme-controller[value=emerald]:checked),[data-theme=emerald] { - color-scheme: light; - --color-base-100: oklch(100% 0 0); - --color-base-200: oklch(93% 0 0); - --color-base-300: oklch(86% 0 0); - --color-base-content: oklch(35.519% 0.032 262.988); - --color-primary: oklch(76.662% 0.135 153.45); - --color-primary-content: oklch(33.387% 0.04 162.24); - --color-secondary: oklch(61.302% 0.202 261.294); - --color-secondary-content: oklch(100% 0 0); - --color-accent: oklch(72.772% 0.149 33.2); - --color-accent-content: oklch(0% 0 0); - --color-neutral: oklch(35.519% 0.032 262.988); - --color-neutral-content: oklch(98.462% 0.001 247.838); - --color-info: oklch(72.06% 0.191 231.6); - --color-info-content: oklch(0% 0 0); - --color-success: oklch(64.8% 0.15 160); - --color-success-content: oklch(0% 0 0); - --color-warning: oklch(84.71% 0.199 83.87); - --color-warning-content: oklch(0% 0 0); - --color-error: oklch(71.76% 0.221 22.18); - --color-error-content: oklch(0% 0 0); - --radius-selector: 1rem; - --radius-field: 0.5rem; - --radius-box: 1rem; - --size-selector: 0.25rem; - --size-field: 0.25rem; - --border: 1px; - --depth: 0; - --noise: 0; - } -} -@layer base { - :root:has(input.theme-controller[value=sunset]:checked),[data-theme=sunset] { - color-scheme: dark; - --color-base-100: oklch(22% 0.019 237.69); - --color-base-200: oklch(20% 0.019 237.69); - --color-base-300: oklch(18% 0.019 237.69); - --color-base-content: oklch(77.383% 0.043 245.096); - --color-primary: oklch(74.703% 0.158 39.947); - --color-primary-content: oklch(14.94% 0.031 39.947); - --color-secondary: oklch(72.537% 0.177 2.72); - --color-secondary-content: oklch(14.507% 0.035 2.72); - --color-accent: oklch(71.294% 0.166 299.844); - --color-accent-content: oklch(14.258% 0.033 299.844); - --color-neutral: oklch(26% 0.019 237.69); - --color-neutral-content: oklch(70% 0.019 237.69); - --color-info: oklch(85.559% 0.085 206.015); - --color-info-content: oklch(17.111% 0.017 206.015); - --color-success: oklch(85.56% 0.085 144.778); - --color-success-content: oklch(17.112% 0.017 144.778); - --color-warning: oklch(85.569% 0.084 74.427); - --color-warning-content: oklch(17.113% 0.016 74.427); - --color-error: oklch(85.511% 0.078 16.886); - --color-error-content: oklch(17.102% 0.015 16.886); - --radius-selector: 1rem; - --radius-field: 0.5rem; - --radius-box: 1rem; - --size-selector: 0.25rem; - --size-field: 0.25rem; - --border: 1px; - --depth: 0; - --noise: 0; - } -} -@layer base { - :root:has(input.theme-controller[value=abyss]:checked),[data-theme=abyss] { - color-scheme: dark; - --color-base-100: oklch(20% 0.08 209); - --color-base-200: oklch(15% 0.08 209); - --color-base-300: oklch(10% 0.08 209); - --color-base-content: oklch(90% 0.076 70.697); - --color-primary: oklch(92% 0.2653 125); - --color-primary-content: oklch(50% 0.2653 125); - --color-secondary: oklch(83.27% 0.0764 298.3); - --color-secondary-content: oklch(43.27% 0.0764 298.3); - --color-accent: oklch(43% 0 0); - --color-accent-content: oklch(98% 0 0); - --color-neutral: oklch(30% 0.08 209); - --color-neutral-content: oklch(90% 0.076 70.697); - --color-info: oklch(74% 0.16 232.661); - --color-info-content: oklch(29% 0.066 243.157); - --color-success: oklch(79% 0.209 151.711); - --color-success-content: oklch(26% 0.065 152.934); - --color-warning: oklch(84.8% 0.1962 84.62); - --color-warning-content: oklch(44.8% 0.1962 84.62); - --color-error: oklch(65% 0.1985 24.22); - --color-error-content: oklch(27% 0.1985 24.22); - --radius-selector: 2rem; - --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' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' 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); - } - :where(:root, [data-theme]) { - --root-bg: var(--color-base-100); - } -} -@layer base { - :root { - --page-scroll-bg-on: linear-gradient(var(--root-bg), var(--root-bg)) - var(--root-bg); - @supports (color: color-mix(in lab, red, red)) { - --page-scroll-bg-on: linear-gradient(var(--root-bg), var(--root-bg)) - color-mix(in srgb, var(--root-bg), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%)); - } - --page-scroll-transition-on: background-color 0.3s ease-out; - transition: var(--page-scroll-transition); - scrollbar-gutter: var(--page-scroll-gutter, unset); - scrollbar-gutter: if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset); - } - :root:root { - background: var(--page-scroll-bg, var(--root-bg, var(--color-base-100))); - } - @keyframes set-page-has-scroll { - 0%, to { - --page-has-scroll: 1; - } - } -} -@layer base { - @property --radialprogress { - syntax: ""; - inherits: true; - initial-value: 0%; - } -} -@layer base { - :root:not(span) { - overflow: var(--page-overflow); - } -} -@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 dropdown { - 0% { - opacity: 0; - } -} -@keyframes rating { - 0%, 40% { - scale: 1.1; - filter: brightness(1.05) contrast(1.05); - } -} -@keyframes radio { - 0% { - padding: 5px; - } - 50% { - padding: 3px; - } -} -@keyframes progress { - 50% { - background-position-x: -115%; - } -} -@keyframes skeleton { - 0% { - background-position: 150%; - } - 100% { - background-position: -50%; - } -} -@keyframes toast { - 0% { - scale: 0.9; - opacity: 0; - } - 100% { - scale: 1; - opacity: 1; - } -} -@keyframes rotator { - 89.9999%, 100% { - --first-item-position: 0 0%; - } - 90%, 99.9999% { - --first-item-position: 0 calc(var(--items) * 100%); - } - 100% { - translate: 0 -100%; - } -} @property --tw-translate-x { syntax: "*"; inherits: false; @@ -3193,6 +1532,11 @@ inherits: false; initial-value: 0; } +@property --tw-space-x-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} @property --tw-border-style { syntax: "*"; inherits: false; @@ -3368,6 +1712,11 @@ syntax: "*"; inherits: false; } +@keyframes spin { + to { + transform: rotate(360deg); + } +} @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 { @@ -3380,6 +1729,7 @@ --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; + --tw-space-x-reverse: 0; --tw-border-style: solid; --tw-leading: initial; --tw-font-weight: initial; diff --git a/frontend/src/app.rs b/frontend/src/app.rs index 606e277..6e975b0 100644 --- a/frontend/src/app.rs +++ b/frontend/src/app.rs @@ -22,9 +22,8 @@ pub fn App() -> impl IntoView { spawn_local(async move { log::info!("App initialization started..."); - let setup_res = api::setup::get_status().await; - - match setup_res { + // Check if setup is needed via Server Function + match shared::server_fns::auth::get_setup_status().await { Ok(status) => { if !status.completed { log::info!("Setup not completed"); @@ -36,21 +35,16 @@ pub fn App() -> impl IntoView { Err(e) => log::error!("Failed to get setup status: {:?}", e), } - let auth_res = api::auth::check_auth().await; - - match auth_res { - Ok(true) => { - log::info!("Authenticated!"); - - if let Ok(user_info) = api::auth::get_user().await { - if let Some(s) = store { - s.user.set(Some(user_info.username)); - } + // Check authentication via GetUser Server Function + match shared::server_fns::auth::get_user().await { + Ok(Some(user_info)) => { + log::info!("Authenticated as {}", user_info.username); + if let Some(s) = store { + s.user.set(Some(user_info.username)); } - is_authenticated.1.set(true); } - Ok(false) => { + Ok(None) => { log::info!("Not authenticated"); } Err(e) => { @@ -107,22 +101,26 @@ pub fn App() -> impl IntoView { } /> - +
+
+
+

"Yükleniyor..."

+
}> diff --git a/frontend/src/components/auth/setup.rs b/frontend/src/components/auth/setup.rs index dcd80d0..f1972a7 100644 --- a/frontend/src/components/auth/setup.rs +++ b/frontend/src/components/auth/setup.rs @@ -1,6 +1,5 @@ use leptos::prelude::*; use leptos::task::spawn_local; -use crate::api; #[component] pub fn Setup() -> impl IntoView { @@ -32,7 +31,7 @@ pub fn Setup() -> impl IntoView { let user = username.0.get(); spawn_local(async move { - match api::setup::setup(&user, &pass).await { + match shared::server_fns::auth::setup(user, pass).await { Ok(_) => { log::info!("Setup completed successfully, redirecting..."); let window = web_sys::window().expect("window should exist"); @@ -40,7 +39,7 @@ pub fn Setup() -> impl IntoView { } Err(e) => { log::error!("Setup failed: {:?}", e); - error.1.set(Some(format!("Hata: {:?}", e))); + error.1.set(Some("Kurulum sırasında bir hata oluştu".to_string())); loading.1.set(false); } } @@ -48,56 +47,56 @@ pub fn Setup() -> impl IntoView { }; view! { -
-
-
-
-
- - - -
-

"VibeTorrent Kurulumu"

-

"Yönetici hesabınızı oluşturun"

+
+
+
+
+ + +
+

"VibeTorrent Kurulumu"

+

"Yönetici hesabınızı oluşturun"

+
+
-
-