From b2759bfa73b5e531cbab6b56f7bd4efd63906257 Mon Sep 17 00:00:00 2001 From: Per Stark Date: Fri, 28 Mar 2025 22:24:09 +0100 Subject: [PATCH] feat: release build bundles assets --- Cargo.lock | 66 + crates/common/src/storage/db.rs | 5 +- crates/common/src/utils/template_engine.rs | 4 + crates/html-router/Cargo.toml | 2 + .../assets}/fonts/Satoshi-Regular.ttf | Bin .../assets}/fonts/Satoshi-Regular.woff | Bin .../assets}/fonts/Satoshi-Regular.woff2 | Bin .../assets}/fonts/Satoshi-Variable.eot | Bin .../assets}/fonts/Satoshi-Variable.ttf | Bin .../assets}/fonts/Satoshi-Variable.woff | Bin .../assets}/fonts/Satoshi-Variable.woff2 | Bin .../assets}/fonts/Satoshi-VariableItalic.eot | Bin .../assets}/fonts/Satoshi-VariableItalic.ttf | Bin .../assets}/fonts/Satoshi-VariableItalic.woff | Bin .../fonts/Satoshi-VariableItalic.woff2 | Bin .../html-router/assets}/htmx-ext-sse.js | 0 .../html-router/assets}/htmx-sse.min.js | 0 .../html-router/assets}/htmx.min.js | 0 .../assets}/icon/android-chrome-192x192.png | Bin .../assets}/icon/android-chrome-512x512.png | Bin .../assets}/icon/apple-touch-icon.png | Bin .../assets}/icon/favicon-16x16.png | Bin .../assets}/icon/favicon-32x32.png | Bin .../html-router/assets}/icon/favicon.ico | Bin .../html-router/assets}/icon/site.webmanifest | 0 .../html-router/assets}/input.css | 0 .../html-router/assets}/manifest.json | 0 crates/html-router/assets/style.css | 5974 +++++++++++++++++ .../html-router/assets}/theme-toggle.js | 0 crates/html-router/src/html_state.rs | 61 +- crates/html-router/src/lib.rs | 4 +- .../src/middlewares/analytics_middleware.rs | 29 +- .../src/middlewares/response_middleware.rs | 48 +- crates/html-router/src/router_factory.rs | 50 +- .../templates/documentation/base.html | 20 - .../templates/documentation/get_started.html | 58 - .../templates/documentation/index.html | 26 - .../templates/documentation/menu.html | 28 - .../documentation/mobile_friendly.html | 20 - .../templates/documentation/privacy.html | 27 - crates/main/src/main.rs | 22 +- crates/main/src/server.rs | 24 +- todo.md | 2 +- 43 files changed, 6193 insertions(+), 277 deletions(-) rename {assets => crates/html-router/assets}/fonts/Satoshi-Regular.ttf (100%) rename {assets => crates/html-router/assets}/fonts/Satoshi-Regular.woff (100%) rename {assets => crates/html-router/assets}/fonts/Satoshi-Regular.woff2 (100%) rename {assets => crates/html-router/assets}/fonts/Satoshi-Variable.eot (100%) rename {assets => crates/html-router/assets}/fonts/Satoshi-Variable.ttf (100%) rename {assets => crates/html-router/assets}/fonts/Satoshi-Variable.woff (100%) rename {assets => crates/html-router/assets}/fonts/Satoshi-Variable.woff2 (100%) rename {assets => crates/html-router/assets}/fonts/Satoshi-VariableItalic.eot (100%) rename {assets => crates/html-router/assets}/fonts/Satoshi-VariableItalic.ttf (100%) rename {assets => crates/html-router/assets}/fonts/Satoshi-VariableItalic.woff (100%) rename {assets => crates/html-router/assets}/fonts/Satoshi-VariableItalic.woff2 (100%) rename {assets => crates/html-router/assets}/htmx-ext-sse.js (100%) rename {assets => crates/html-router/assets}/htmx-sse.min.js (100%) rename {assets => crates/html-router/assets}/htmx.min.js (100%) rename {assets => crates/html-router/assets}/icon/android-chrome-192x192.png (100%) rename {assets => crates/html-router/assets}/icon/android-chrome-512x512.png (100%) rename {assets => crates/html-router/assets}/icon/apple-touch-icon.png (100%) rename {assets => crates/html-router/assets}/icon/favicon-16x16.png (100%) rename {assets => crates/html-router/assets}/icon/favicon-32x32.png (100%) rename {assets => crates/html-router/assets}/icon/favicon.ico (100%) rename {assets => crates/html-router/assets}/icon/site.webmanifest (100%) rename {assets => crates/html-router/assets}/input.css (100%) rename {assets => crates/html-router/assets}/manifest.json (100%) create mode 100644 crates/html-router/assets/style.css rename {assets => crates/html-router/assets}/theme-toggle.js (100%) delete mode 100644 crates/html-router/templates/documentation/base.html delete mode 100644 crates/html-router/templates/documentation/get_started.html delete mode 100644 crates/html-router/templates/documentation/index.html delete mode 100644 crates/html-router/templates/documentation/menu.html delete mode 100644 crates/html-router/templates/documentation/mobile_friendly.html delete mode 100644 crates/html-router/templates/documentation/privacy.html diff --git a/Cargo.lock b/Cargo.lock index 5a95204..745e182 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1046,6 +1046,10 @@ dependencies = [ "futures", "mime", "mime_guess", + "minijinja", + "minijinja-autoreload", + "minijinja-contrib", + "minijinja-embed", "reqwest", "serde", "serde_json", @@ -2014,6 +2018,7 @@ dependencies = [ "common", "composite-retrieval", "futures", + "include_dir", "json-stream-parser", "minijinja", "minijinja-autoreload", @@ -2027,6 +2032,7 @@ dependencies = [ "thiserror", "tokio", "tower-http", + "tower-serve-static", "tracing", ] @@ -2368,6 +2374,25 @@ dependencies = [ "icu_properties", ] +[[package]] +name = "include_dir" +version = "0.7.4" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "923d117408f1e49d914f1a379a309cffe4f18c05cf4e3d12e613a15fc81bd0dd" +dependencies = [ + "include_dir_macros", +] + +[[package]] +name = "include_dir_macros" +version = "0.7.4" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "7cab85a7ed0bd5f0e76d93846e0147172bed2e2d3f859bcc33a8d9699cad1a75" +dependencies = [ + "proc-macro2", + "quote", +] + [[package]] name = "indexmap" version = "1.9.3" @@ -3421,6 +3446,26 @@ version = "0.5.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "5be167a7af36ee22fe3115051bc51f6e6c7054c9348e28deb4f49bd6f705a315" +[[package]] +name = "pin-project" +version = "1.1.10" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "677f1add503faace112b9f1373e43e9e054bfdd22ff1a63c1bc485eaec6a6a8a" +dependencies = [ + "pin-project-internal", +] + +[[package]] +name = "pin-project-internal" +version = "1.1.10" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "6e918e4ff8c4549eb882f14b3a4bc8c8bc93de829416eacf579f1207a8fbf861" +dependencies = [ + "proc-macro2", + "quote", + "syn 2.0.87", +] + [[package]] name = "pin-project-lite" version = "0.2.14" @@ -5284,6 +5329,27 @@ version = "0.3.3" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "121c2a6cda46980bb0fcd1647ffaf6cd3fc79a013de288782836f6df9c48780e" +[[package]] +name = "tower-serve-static" +version = "0.1.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "148022c3d604d85a3b558ef7154aa90aaec5f9506beae64f6ad4e856306d287f" +dependencies = [ + "bytes", + "futures-util", + "http", + "http-body", + "http-body-util", + "include_dir", + "mime", + "mime_guess", + "percent-encoding", + "pin-project", + "tokio", + "tokio-util", + "tower-service", +] + [[package]] name = "tower-service" version = "0.3.3" diff --git a/crates/common/src/storage/db.rs b/crates/common/src/storage/db.rs index c7be825..e43c4b2 100644 --- a/crates/common/src/storage/db.rs +++ b/crates/common/src/storage/db.rs @@ -4,7 +4,7 @@ use super::types::{analytics::Analytics, system_settings::SystemSettings, Stored use axum_session::{SessionConfig, SessionError, SessionStore}; use axum_session_surreal::SessionSurrealPool; use futures::Stream; -use std::ops::Deref; +use std::{ops::Deref, sync::Arc}; use surrealdb::{ engine::any::{connect, Any}, opt::auth::Root, @@ -15,6 +15,9 @@ use surrealdb::{ pub struct SurrealDbClient { pub client: Surreal, } +pub trait ProvidesDb { + fn db(&self) -> &Arc; +} impl SurrealDbClient { /// # Initialize a new datbase client diff --git a/crates/common/src/utils/template_engine.rs b/crates/common/src/utils/template_engine.rs index 715a8f1..1906064 100644 --- a/crates/common/src/utils/template_engine.rs +++ b/crates/common/src/utils/template_engine.rs @@ -4,6 +4,10 @@ pub use minijinja_contrib; pub use minijinja_embed; use std::sync::Arc; +pub trait ProvidesTemplateEngine { + fn template_engine(&self) -> &Arc; +} + #[derive(Clone)] pub enum TemplateEngine { // Use AutoReload for debug builds (debug_assertions is true) diff --git a/crates/html-router/Cargo.toml b/crates/html-router/Cargo.toml index c337bdb..cd1aaa9 100644 --- a/crates/html-router/Cargo.toml +++ b/crates/html-router/Cargo.toml @@ -30,6 +30,8 @@ plotly = "0.12.1" surrealdb = "2.0.4" tower-http = { version = "0.6.2", features = ["fs"] } chrono-tz = "0.10.1" +tower-serve-static = "0.1.1" +include_dir = "0.7.4" common = { path = "../common" } composite-retrieval = { path = "../composite-retrieval" } diff --git a/assets/fonts/Satoshi-Regular.ttf b/crates/html-router/assets/fonts/Satoshi-Regular.ttf similarity index 100% rename from assets/fonts/Satoshi-Regular.ttf rename to crates/html-router/assets/fonts/Satoshi-Regular.ttf diff --git a/assets/fonts/Satoshi-Regular.woff b/crates/html-router/assets/fonts/Satoshi-Regular.woff similarity index 100% rename from assets/fonts/Satoshi-Regular.woff rename to crates/html-router/assets/fonts/Satoshi-Regular.woff diff --git a/assets/fonts/Satoshi-Regular.woff2 b/crates/html-router/assets/fonts/Satoshi-Regular.woff2 similarity index 100% rename from assets/fonts/Satoshi-Regular.woff2 rename to crates/html-router/assets/fonts/Satoshi-Regular.woff2 diff --git a/assets/fonts/Satoshi-Variable.eot b/crates/html-router/assets/fonts/Satoshi-Variable.eot similarity index 100% rename from assets/fonts/Satoshi-Variable.eot rename to crates/html-router/assets/fonts/Satoshi-Variable.eot diff --git a/assets/fonts/Satoshi-Variable.ttf b/crates/html-router/assets/fonts/Satoshi-Variable.ttf similarity index 100% rename from assets/fonts/Satoshi-Variable.ttf rename to crates/html-router/assets/fonts/Satoshi-Variable.ttf diff --git a/assets/fonts/Satoshi-Variable.woff b/crates/html-router/assets/fonts/Satoshi-Variable.woff similarity index 100% rename from assets/fonts/Satoshi-Variable.woff rename to crates/html-router/assets/fonts/Satoshi-Variable.woff diff --git a/assets/fonts/Satoshi-Variable.woff2 b/crates/html-router/assets/fonts/Satoshi-Variable.woff2 similarity index 100% rename from assets/fonts/Satoshi-Variable.woff2 rename to crates/html-router/assets/fonts/Satoshi-Variable.woff2 diff --git a/assets/fonts/Satoshi-VariableItalic.eot b/crates/html-router/assets/fonts/Satoshi-VariableItalic.eot similarity index 100% rename from assets/fonts/Satoshi-VariableItalic.eot rename to crates/html-router/assets/fonts/Satoshi-VariableItalic.eot diff --git a/assets/fonts/Satoshi-VariableItalic.ttf b/crates/html-router/assets/fonts/Satoshi-VariableItalic.ttf similarity index 100% rename from assets/fonts/Satoshi-VariableItalic.ttf rename to crates/html-router/assets/fonts/Satoshi-VariableItalic.ttf diff --git a/assets/fonts/Satoshi-VariableItalic.woff b/crates/html-router/assets/fonts/Satoshi-VariableItalic.woff similarity index 100% rename from assets/fonts/Satoshi-VariableItalic.woff rename to crates/html-router/assets/fonts/Satoshi-VariableItalic.woff diff --git a/assets/fonts/Satoshi-VariableItalic.woff2 b/crates/html-router/assets/fonts/Satoshi-VariableItalic.woff2 similarity index 100% rename from assets/fonts/Satoshi-VariableItalic.woff2 rename to crates/html-router/assets/fonts/Satoshi-VariableItalic.woff2 diff --git a/assets/htmx-ext-sse.js b/crates/html-router/assets/htmx-ext-sse.js similarity index 100% rename from assets/htmx-ext-sse.js rename to crates/html-router/assets/htmx-ext-sse.js diff --git a/assets/htmx-sse.min.js b/crates/html-router/assets/htmx-sse.min.js similarity index 100% rename from assets/htmx-sse.min.js rename to crates/html-router/assets/htmx-sse.min.js diff --git a/assets/htmx.min.js b/crates/html-router/assets/htmx.min.js similarity index 100% rename from assets/htmx.min.js rename to crates/html-router/assets/htmx.min.js diff --git a/assets/icon/android-chrome-192x192.png b/crates/html-router/assets/icon/android-chrome-192x192.png similarity index 100% rename from assets/icon/android-chrome-192x192.png rename to crates/html-router/assets/icon/android-chrome-192x192.png diff --git a/assets/icon/android-chrome-512x512.png b/crates/html-router/assets/icon/android-chrome-512x512.png similarity index 100% rename from assets/icon/android-chrome-512x512.png rename to crates/html-router/assets/icon/android-chrome-512x512.png diff --git a/assets/icon/apple-touch-icon.png b/crates/html-router/assets/icon/apple-touch-icon.png similarity index 100% rename from assets/icon/apple-touch-icon.png rename to crates/html-router/assets/icon/apple-touch-icon.png diff --git a/assets/icon/favicon-16x16.png b/crates/html-router/assets/icon/favicon-16x16.png similarity index 100% rename from assets/icon/favicon-16x16.png rename to crates/html-router/assets/icon/favicon-16x16.png diff --git a/assets/icon/favicon-32x32.png b/crates/html-router/assets/icon/favicon-32x32.png similarity index 100% rename from assets/icon/favicon-32x32.png rename to crates/html-router/assets/icon/favicon-32x32.png diff --git a/assets/icon/favicon.ico b/crates/html-router/assets/icon/favicon.ico similarity index 100% rename from assets/icon/favicon.ico rename to crates/html-router/assets/icon/favicon.ico diff --git a/assets/icon/site.webmanifest b/crates/html-router/assets/icon/site.webmanifest similarity index 100% rename from assets/icon/site.webmanifest rename to crates/html-router/assets/icon/site.webmanifest diff --git a/assets/input.css b/crates/html-router/assets/input.css similarity index 100% rename from assets/input.css rename to crates/html-router/assets/input.css diff --git a/assets/manifest.json b/crates/html-router/assets/manifest.json similarity index 100% rename from assets/manifest.json rename to crates/html-router/assets/manifest.json diff --git a/crates/html-router/assets/style.css b/crates/html-router/assets/style.css new file mode 100644 index 0000000..07850c4 --- /dev/null +++ b/crates/html-router/assets/style.css @@ -0,0 +1,5974 @@ +/*! tailwindcss v4.0.0-beta.9 | MIT License | https://tailwindcss.com */ +@layer theme, base, components, utilities; +@layer theme { + :root { + --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; + --color-red-50: oklch(0.971 0.013 17.38); + --color-red-100: oklch(0.936 0.032 17.717); + --color-red-200: oklch(0.885 0.062 18.334); + --color-red-300: oklch(0.808 0.114 19.571); + --color-red-400: oklch(0.704 0.191 22.216); + --color-red-500: oklch(0.637 0.237 25.331); + --color-red-600: oklch(0.577 0.245 27.325); + --color-red-700: oklch(0.505 0.213 27.518); + --color-red-800: oklch(0.444 0.177 26.899); + --color-red-900: oklch(0.396 0.141 25.723); + --color-red-950: oklch(0.258 0.092 26.042); + --color-orange-50: oklch(0.98 0.016 73.684); + --color-orange-100: oklch(0.954 0.038 75.164); + --color-orange-200: oklch(0.901 0.076 70.697); + --color-orange-300: oklch(0.837 0.128 66.29); + --color-orange-400: oklch(0.75 0.183 55.934); + --color-orange-500: oklch(0.705 0.213 47.604); + --color-orange-600: oklch(0.646 0.222 41.116); + --color-orange-700: oklch(0.553 0.195 38.402); + --color-orange-800: oklch(0.47 0.157 37.304); + --color-orange-900: oklch(0.408 0.123 38.172); + --color-orange-950: oklch(0.266 0.079 36.259); + --color-amber-50: oklch(0.987 0.022 95.277); + --color-amber-100: oklch(0.962 0.059 95.617); + --color-amber-200: oklch(0.924 0.12 95.746); + --color-amber-300: oklch(0.879 0.169 91.605); + --color-amber-400: oklch(0.828 0.189 84.429); + --color-amber-500: oklch(0.769 0.188 70.08); + --color-amber-600: oklch(0.666 0.179 58.318); + --color-amber-700: oklch(0.555 0.163 48.998); + --color-amber-800: oklch(0.473 0.137 46.201); + --color-amber-900: oklch(0.414 0.112 45.904); + --color-amber-950: oklch(0.279 0.077 45.635); + --color-yellow-50: oklch(0.987 0.026 102.212); + --color-yellow-100: oklch(0.973 0.071 103.193); + --color-yellow-200: oklch(0.945 0.129 101.54); + --color-yellow-300: oklch(0.905 0.182 98.111); + --color-yellow-400: oklch(0.852 0.199 91.936); + --color-yellow-500: oklch(0.795 0.184 86.047); + --color-yellow-600: oklch(0.681 0.162 75.834); + --color-yellow-700: oklch(0.554 0.135 66.442); + --color-yellow-800: oklch(0.476 0.114 61.907); + --color-yellow-900: oklch(0.421 0.095 57.708); + --color-yellow-950: oklch(0.286 0.066 53.813); + --color-lime-50: oklch(0.986 0.031 120.757); + --color-lime-100: oklch(0.967 0.067 122.328); + --color-lime-200: oklch(0.938 0.127 124.321); + --color-lime-300: oklch(0.897 0.196 126.665); + --color-lime-400: oklch(0.841 0.238 128.85); + --color-lime-500: oklch(0.768 0.233 130.85); + --color-lime-600: oklch(0.648 0.2 131.684); + --color-lime-700: oklch(0.532 0.157 131.589); + --color-lime-800: oklch(0.453 0.124 130.933); + --color-lime-900: oklch(0.405 0.101 131.063); + --color-lime-950: oklch(0.274 0.072 132.109); + --color-green-50: oklch(0.982 0.018 155.826); + --color-green-100: oklch(0.962 0.044 156.743); + --color-green-200: oklch(0.925 0.084 155.995); + --color-green-300: oklch(0.871 0.15 154.449); + --color-green-400: oklch(0.792 0.209 151.711); + --color-green-500: oklch(0.723 0.219 149.579); + --color-green-600: oklch(0.627 0.194 149.214); + --color-green-700: oklch(0.527 0.154 150.069); + --color-green-800: oklch(0.448 0.119 151.328); + --color-green-900: oklch(0.393 0.095 152.535); + --color-green-950: oklch(0.266 0.065 152.934); + --color-emerald-50: oklch(0.979 0.021 166.113); + --color-emerald-100: oklch(0.95 0.052 163.051); + --color-emerald-200: oklch(0.905 0.093 164.15); + --color-emerald-300: oklch(0.845 0.143 164.978); + --color-emerald-400: oklch(0.765 0.177 163.223); + --color-emerald-500: oklch(0.696 0.17 162.48); + --color-emerald-600: oklch(0.596 0.145 163.225); + --color-emerald-700: oklch(0.508 0.118 165.612); + --color-emerald-800: oklch(0.432 0.095 166.913); + --color-emerald-900: oklch(0.378 0.077 168.94); + --color-emerald-950: oklch(0.262 0.051 172.552); + --color-teal-50: oklch(0.984 0.014 180.72); + --color-teal-100: oklch(0.953 0.051 180.801); + --color-teal-200: oklch(0.91 0.096 180.426); + --color-teal-300: oklch(0.855 0.138 181.071); + --color-teal-400: oklch(0.777 0.152 181.912); + --color-teal-500: oklch(0.704 0.14 182.503); + --color-teal-600: oklch(0.6 0.118 184.704); + --color-teal-700: oklch(0.511 0.096 186.391); + --color-teal-800: oklch(0.437 0.078 188.216); + --color-teal-900: oklch(0.386 0.063 188.416); + --color-teal-950: oklch(0.277 0.046 192.524); + --color-cyan-50: oklch(0.984 0.019 200.873); + --color-cyan-100: oklch(0.956 0.045 203.388); + --color-cyan-200: oklch(0.917 0.08 205.041); + --color-cyan-300: oklch(0.865 0.127 207.078); + --color-cyan-400: oklch(0.789 0.154 211.53); + --color-cyan-500: oklch(0.715 0.143 215.221); + --color-cyan-600: oklch(0.609 0.126 221.723); + --color-cyan-700: oklch(0.52 0.105 223.128); + --color-cyan-800: oklch(0.45 0.085 224.283); + --color-cyan-900: oklch(0.398 0.07 227.392); + --color-cyan-950: oklch(0.302 0.056 229.695); + --color-sky-50: oklch(0.977 0.013 236.62); + --color-sky-100: oklch(0.951 0.026 236.824); + --color-sky-200: oklch(0.901 0.058 230.902); + --color-sky-300: oklch(0.828 0.111 230.318); + --color-sky-400: oklch(0.746 0.16 232.661); + --color-sky-500: oklch(0.685 0.169 237.323); + --color-sky-600: oklch(0.588 0.158 241.966); + --color-sky-700: oklch(0.5 0.134 242.749); + --color-sky-800: oklch(0.443 0.11 240.79); + --color-sky-900: oklch(0.391 0.09 240.876); + --color-sky-950: oklch(0.293 0.066 243.157); + --color-blue-50: oklch(0.97 0.014 254.604); + --color-blue-100: oklch(0.932 0.032 255.585); + --color-blue-200: oklch(0.882 0.059 254.128); + --color-blue-300: oklch(0.809 0.105 251.813); + --color-blue-400: oklch(0.707 0.165 254.624); + --color-blue-500: oklch(0.623 0.214 259.815); + --color-blue-600: oklch(0.546 0.245 262.881); + --color-blue-700: oklch(0.488 0.243 264.376); + --color-blue-800: oklch(0.424 0.199 265.638); + --color-blue-900: oklch(0.379 0.146 265.522); + --color-blue-950: oklch(0.282 0.091 267.935); + --color-indigo-50: oklch(0.962 0.018 272.314); + --color-indigo-100: oklch(0.93 0.034 272.788); + --color-indigo-200: oklch(0.87 0.065 274.039); + --color-indigo-300: oklch(0.785 0.115 274.713); + --color-indigo-400: oklch(0.673 0.182 276.935); + --color-indigo-500: oklch(0.585 0.233 277.117); + --color-indigo-600: oklch(0.511 0.262 276.966); + --color-indigo-700: oklch(0.457 0.24 277.023); + --color-indigo-800: oklch(0.398 0.195 277.366); + --color-indigo-900: oklch(0.359 0.144 278.697); + --color-indigo-950: oklch(0.257 0.09 281.288); + --color-violet-50: oklch(0.969 0.016 293.756); + --color-violet-100: oklch(0.943 0.029 294.588); + --color-violet-200: oklch(0.894 0.057 293.283); + --color-violet-300: oklch(0.811 0.111 293.571); + --color-violet-400: oklch(0.702 0.183 293.541); + --color-violet-500: oklch(0.606 0.25 292.717); + --color-violet-600: oklch(0.541 0.281 293.009); + --color-violet-700: oklch(0.491 0.27 292.581); + --color-violet-800: oklch(0.432 0.232 292.759); + --color-violet-900: oklch(0.38 0.189 293.745); + --color-violet-950: oklch(0.283 0.141 291.089); + --color-purple-50: oklch(0.977 0.014 308.299); + --color-purple-100: oklch(0.946 0.033 307.174); + --color-purple-200: oklch(0.902 0.063 306.703); + --color-purple-300: oklch(0.827 0.119 306.383); + --color-purple-400: oklch(0.714 0.203 305.504); + --color-purple-500: oklch(0.627 0.265 303.9); + --color-purple-600: oklch(0.558 0.288 302.321); + --color-purple-700: oklch(0.496 0.265 301.924); + --color-purple-800: oklch(0.438 0.218 303.724); + --color-purple-900: oklch(0.381 0.176 304.987); + --color-purple-950: oklch(0.291 0.149 302.717); + --color-fuchsia-50: oklch(0.977 0.017 320.058); + --color-fuchsia-100: oklch(0.952 0.037 318.852); + --color-fuchsia-200: oklch(0.903 0.076 319.62); + --color-fuchsia-300: oklch(0.833 0.145 321.434); + --color-fuchsia-400: oklch(0.74 0.238 322.16); + --color-fuchsia-500: oklch(0.667 0.295 322.15); + --color-fuchsia-600: oklch(0.591 0.293 322.896); + --color-fuchsia-700: oklch(0.518 0.253 323.949); + --color-fuchsia-800: oklch(0.452 0.211 324.591); + --color-fuchsia-900: oklch(0.401 0.17 325.612); + --color-fuchsia-950: oklch(0.293 0.136 325.661); + --color-pink-50: oklch(0.971 0.014 343.198); + --color-pink-100: oklch(0.948 0.028 342.258); + --color-pink-200: oklch(0.899 0.061 343.231); + --color-pink-300: oklch(0.823 0.12 346.018); + --color-pink-400: oklch(0.718 0.202 349.761); + --color-pink-500: oklch(0.656 0.241 354.308); + --color-pink-600: oklch(0.592 0.249 0.584); + --color-pink-700: oklch(0.525 0.223 3.958); + --color-pink-800: oklch(0.459 0.187 3.815); + --color-pink-900: oklch(0.408 0.153 2.432); + --color-pink-950: oklch(0.284 0.109 3.907); + --color-rose-50: oklch(0.969 0.015 12.422); + --color-rose-100: oklch(0.941 0.03 12.58); + --color-rose-200: oklch(0.892 0.058 10.001); + --color-rose-300: oklch(0.81 0.117 11.638); + --color-rose-400: oklch(0.712 0.194 13.428); + --color-rose-500: oklch(0.645 0.246 16.439); + --color-rose-600: oklch(0.586 0.253 17.585); + --color-rose-700: oklch(0.514 0.222 16.935); + --color-rose-800: oklch(0.455 0.188 13.697); + --color-rose-900: oklch(0.41 0.159 10.272); + --color-rose-950: oklch(0.271 0.105 12.094); + --color-slate-50: oklch(0.984 0.003 247.858); + --color-slate-100: oklch(0.968 0.007 247.896); + --color-slate-200: oklch(0.929 0.013 255.508); + --color-slate-300: oklch(0.869 0.022 252.894); + --color-slate-400: oklch(0.704 0.04 256.788); + --color-slate-500: oklch(0.554 0.046 257.417); + --color-slate-600: oklch(0.446 0.043 257.281); + --color-slate-700: oklch(0.372 0.044 257.287); + --color-slate-800: oklch(0.279 0.041 260.031); + --color-slate-900: oklch(0.208 0.042 265.755); + --color-slate-950: oklch(0.129 0.042 264.695); + --color-gray-50: oklch(0.985 0.002 247.839); + --color-gray-100: oklch(0.967 0.003 264.542); + --color-gray-200: oklch(0.928 0.006 264.531); + --color-gray-300: oklch(0.872 0.01 258.338); + --color-gray-400: oklch(0.707 0.022 261.325); + --color-gray-500: oklch(0.551 0.027 264.364); + --color-gray-600: oklch(0.446 0.03 256.802); + --color-gray-700: oklch(0.373 0.034 259.733); + --color-gray-800: oklch(0.278 0.033 256.848); + --color-gray-900: oklch(0.21 0.034 264.665); + --color-gray-950: oklch(0.13 0.028 261.692); + --color-zinc-50: oklch(0.985 0 0); + --color-zinc-100: oklch(0.967 0.001 286.375); + --color-zinc-200: oklch(0.92 0.004 286.32); + --color-zinc-300: oklch(0.871 0.006 286.286); + --color-zinc-400: oklch(0.705 0.015 286.067); + --color-zinc-500: oklch(0.552 0.016 285.938); + --color-zinc-600: oklch(0.442 0.017 285.786); + --color-zinc-700: oklch(0.37 0.013 285.805); + --color-zinc-800: oklch(0.274 0.006 286.033); + --color-zinc-900: oklch(0.21 0.006 285.885); + --color-zinc-950: oklch(0.141 0.005 285.823); + --color-neutral-50: oklch(0.985 0 0); + --color-neutral-100: oklch(0.97 0 0); + --color-neutral-200: oklch(0.922 0 0); + --color-neutral-300: oklch(0.87 0 0); + --color-neutral-400: oklch(0.708 0 0); + --color-neutral-500: oklch(0.556 0 0); + --color-neutral-600: oklch(0.439 0 0); + --color-neutral-700: oklch(0.371 0 0); + --color-neutral-800: oklch(0.269 0 0); + --color-neutral-900: oklch(0.205 0 0); + --color-neutral-950: oklch(0.145 0 0); + --color-stone-50: oklch(0.985 0.001 106.423); + --color-stone-100: oklch(0.97 0.001 106.424); + --color-stone-200: oklch(0.923 0.003 48.717); + --color-stone-300: oklch(0.869 0.005 56.366); + --color-stone-400: oklch(0.709 0.01 56.259); + --color-stone-500: oklch(0.553 0.013 58.071); + --color-stone-600: oklch(0.444 0.011 73.639); + --color-stone-700: oklch(0.374 0.01 67.558); + --color-stone-800: oklch(0.268 0.007 34.298); + --color-stone-900: oklch(0.216 0.006 56.043); + --color-stone-950: oklch(0.147 0.004 49.25); + --color-black: #000; + --color-white: #fff; + --spacing: 0.25rem; + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + --container-3xs: 16rem; + --container-2xs: 18rem; + --container-xs: 20rem; + --container-sm: 24rem; + --container-md: 28rem; + --container-lg: 32rem; + --container-xl: 36rem; + --container-2xl: 42rem; + --container-3xl: 48rem; + --container-4xl: 56rem; + --container-5xl: 64rem; + --container-6xl: 72rem; + --container-7xl: 80rem; + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2.25 / 1.875); + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2.5 / 2.25); + --text-5xl: 3rem; + --text-5xl--line-height: 1; + --text-6xl: 3.75rem; + --text-6xl--line-height: 1; + --text-7xl: 4.5rem; + --text-7xl--line-height: 1; + --text-8xl: 6rem; + --text-8xl--line-height: 1; + --text-9xl: 8rem; + --text-9xl--line-height: 1; + --font-weight-thin: 100; + --font-weight-extralight: 200; + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --font-weight-extrabold: 800; + --font-weight-black: 900; + --tracking-tighter: -0.05em; + --tracking-tight: -0.025em; + --tracking-normal: 0em; + --tracking-wide: 0.025em; + --tracking-wider: 0.05em; + --tracking-widest: 0.1em; + --leading-tight: 1.25; + --leading-snug: 1.375; + --leading-normal: 1.5; + --leading-relaxed: 1.625; + --leading-loose: 2; + --radius-xs: 0.125rem; + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --radius-4xl: 2rem; + --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); + --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), + 0 2px 4px -2px rgb(0 0 0 / 0.1); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); + --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), + 0 8px 10px -6px rgb(0 0 0 / 0.1); + --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); + --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); + --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); + --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); + --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); + --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); + --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); + --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); + --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); + --ease-in: cubic-bezier(0.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, 0.2, 1); + --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); + --animate-spin: spin 1s linear infinite; + --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --animate-bounce: bounce 1s infinite; + --blur-xs: 4px; + --blur-sm: 8px; + --blur-md: 12px; + --blur-lg: 16px; + --blur-xl: 24px; + --blur-2xl: 40px; + --blur-3xl: 64px; + --perspective-dramatic: 100px; + --perspective-near: 300px; + --perspective-normal: 500px; + --perspective-midrange: 800px; + --perspective-distant: 1200px; + --aspect-video: 16 / 9; + --default-transition-duration: 150ms; + --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + --default-font-family: var(--font-sans); + --default-font-feature-settings: var(--font-sans--font-feature-settings); + --default-font-variation-settings: var( + --font-sans--font-variation-settings + ); + --default-mono-font-family: var(--font-mono); + --default-mono-font-feature-settings: var( + --font-mono--font-feature-settings + ); + --default-mono-font-variation-settings: var( + --font-mono--font-variation-settings + ); + } +} +@layer base { + *, ::after, ::before, ::backdrop, ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var( --default-font-variation-settings, normal ); + -webkit-tap-highlight-color: transparent; + } + body { + line-height: inherit; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, h2, h3, h4, h5, h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, strong { + font-weight: bolder; + } + code, kbd, samp, pre { + font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ); + font-feature-settings: var( --default-mono-font-feature-settings, normal ); + font-variation-settings: var( --default-mono-font-variation-settings, normal ); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring { + outline: auto; + } + progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, ul, menu { + list-style-type: none; + } + img, svg, video, canvas, audio, iframe, embed, object { + display: block; + vertical-align: middle; + } + img, video { + max-width: 100%; + height: auto; + } + button, input, select, optgroup, textarea, ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::placeholder { + opacity: 1; + color: color-mix(in oklab, currentColor 50%, transparent); + } + textarea { + resize: vertical; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + :-moz-ui-invalid { + box-shadow: none; + } + button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { + appearance: button; + } + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden="until-found"])) { + display: none !important; + } +} +@layer utilities { + .menu { + display: flex; + width: fit-content; + flex-direction: column; + flex-wrap: wrap; + padding: calc(0.25rem * 2); + 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) { + outline: 2px solid transparent; + outline-offset: 2px; + &::-webkit-details-marker { + display: none; + } + } + :where(li > details > summary), :where(li > .menu-dropdown-toggle) { + &:after { + justify-self: flex-end; + display: block; + height: 0.375rem; + width: 0.375rem; + rotate: -135deg; + translate: 0 -1px; + transition-property: rotate, translate; + transition-duration: 0.2s; + content: ""; + transform-origin: 50% 50%; + box-shadow: 2px 2px inset; + pointer-events: none; + } + } + :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { + rotate: 45deg; + translate: 0 1px; + } + :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) { + &.menu-focus, &:focus-visible { + cursor: pointer; + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + color: var(--color-base-content); + 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: color-mix(in oklab, var(--color-base-content) 10%, transparent); + 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 { + background-color: var(--color-neutral); + color: var(--color-neutral-content); + outline: 2px solid transparent; + outline-offset: 2px; + background-size: calc(var(--noise) * 1000px); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); + &:not(&:active) { + box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral); + } + } + &.menu-disabled { + pointer-events: none; + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + } + .btn { + 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; + text-decoration-line: none; + outline-offset: 2px; + webkit-user-select: none; + user-select: none; + padding-inline: var(--btn-p); + color: var(--btn-fg); + height: var(--size); + font-size: 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: calc(var(--noise) * 100%); + background-image: var(--btn-noise); + border-width: var(--border); + border-style: solid; + border-color: var(--btn-border); + text-shadow: 0 0.5px oklch(1 0 0 / calc(var(--depth) * 0.15)); + box-shadow: 0 0.5px 0 0.5px color-mix( in oklab, color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%), transparent ) 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: color-mix(in oklab, var(--btn-bg), black calc(var(--depth) * 5%)); + --btn-shadow: 0 3px 2px -2px + color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), transparent), + 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), transparent); + --btn-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); + &:hover { + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), black 7%); + } + &.btn-active { + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), black 7%); + --btn-shadow: 0 0 0 0 oklch(0% 0 0/0.07); + isolation: isolate; + } + &:focus-visible { + outline-width: 2px; + outline-style: solid; + } + &:active:not(.btn-active) { + translate: 0 0.5px; + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), black 5%); + --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), black 7%); + --btn-shadow: 0 0 0 0 oklch(0% 0 0/0.07); + } + &:is(:disabled, [disabled], .btn-disabled) { + &:not(.btn-link, .btn-ghost) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + box-shadow: none; + } + pointer-events: none; + --btn-border: transparent; + --btn-noise: none; + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, transparent); + &:hover { + pointer-events: none; + background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); + --btn-border: transparent; + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, transparent); + } + } + &:is(input[type="checkbox"], input[type="radio"]) { + appearance: none; + &::after { + content: attr(aria-label); + } + &:checked { + --btn-color: var(--color-primary); + --btn-bg: var(--color-primary); + --btn-fg: var(--color-primary-content); + --btn-border: var(--color-primary); + &:focus-visible { + outline-color: var(--color-primary); + } + &:hover { + --btn-bg: color-mix(in oklab, var(--color-primary) 90%, black); + --btn-border: color-mix(in oklab, var(--color-primary) 90%, black); + } + } + } + } + .drawer-side { + pointer-events: none; + visibility: hidden; + position: fixed; + inset-inline-start: calc(0.25rem * 0); + top: calc(0.25rem * 0); + 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; + overflow-x: hidden; + overflow-y: hidden; + overscroll-behavior: contain; + 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; + translate: -100%; + [dir="rtl"] & { + translate: 100%; + } + } + } + .modal { + 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; + overflow-x: hidden; + transition: transform 0.3s ease-out allow-discrete, visibility 0.3s ease-out allow-discrete, opacity 0.1s ease-out allow-discrete; + overflow-y: hidden; + overscroll-behavior: contain; + z-index: 999; + &:not(dialog:not(.modal-open)), &::backdrop { + opacity: 100%; + @starting-style { + visibility: hidden; + } + @starting-style { + opacity: 0%; + } + background-color: oklch(0% 0 0/ 0.4); + transition: display 0.3s ease-out allow-discrete, opacity 0.3s ease-out allow-discrete, visibility 0.3s ease-out allow-discrete; + } + &.modal-open, &[open], &:target { + pointer-events: auto; + visibility: visible; + opacity: 100%; + @starting-style { + visibility: hidden; + } + @starting-style { + opacity: 0%; + } + .modal-box { + translate: 0 0; + scale: 1; + opacity: 1; + } + } + } + .\!tooltip { + position: relative !important; + display: inline-block !important; + --tt-bg: var(--color-neutral) !important; + --tt-off: calc(100% + 0.5rem) !important; + --tt-tail: calc(100% + 1px + 0.25rem) !important; + > :where(.tooltip-content), &[data-tip]:before { + position: absolute !important; + max-width: 20rem !important; + border-radius: var(--radius-field) !important; + padding-inline: calc(0.25rem * 2) !important; + padding-block: calc(0.25rem * 1) !important; + text-align: center !important; + white-space: normal !important; + color: var(--color-neutral-content) !important; + opacity: 0% !important; + font-size: 0.875rem !important; + line-height: 1.25em !important; + transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important; + background-color: var(--tt-bg) !important; + width: max-content !important; + pointer-events: none !important; + z-index: 1 !important; + --tw-content: attr(data-tip) !important; + content: var(--tw-content) !important; + } + &:after { + position: absolute !important; + position: absolute !important; + opacity: 0% !important; + background-color: var(--tt-bg) !important; + transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important; + content: "" !important; + pointer-events: none !important; + width: 0.625rem !important; + height: 0.25rem !important; + display: block !important; + mask-repeat: no-repeat !important; + mask-position: -1px 0 !important; + mask-image: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A") !important; + } + &.tooltip-open, &[data-tip]:hover, &:hover, &:has(:focus-visible) { + > .tooltip-content, &[data-tip]:before, &:after { + opacity: 100% !important; + --tt-pos: 0rem !important; + transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms !important; + } + } + > .tooltip-content, &[data-tip]:before { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important; + inset: auto auto var(--tt-off) 50% !important; + } + &:after { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important; + inset: auto auto var(--tt-tail) 50% !important; + } + } + .tooltip { + position: relative; + display: inline-block; + --tt-bg: var(--color-neutral); + --tt-off: calc(100% + 0.5rem); + --tt-tail: calc(100% + 1px + 0.25rem); + > :where(.tooltip-content), &[data-tip]:before { + position: absolute; + max-width: 20rem; + border-radius: var(--radius-field); + padding-inline: calc(0.25rem * 2); + padding-block: calc(0.25rem * 1); + text-align: center; + white-space: normal; + color: var(--color-neutral-content); + opacity: 0%; + font-size: 0.875rem; + line-height: 1.25em; + transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms; + background-color: var(--tt-bg); + width: max-content; + pointer-events: none; + z-index: 1; + --tw-content: attr(data-tip); + content: var(--tw-content); + } + &:after { + position: absolute; + position: absolute; + opacity: 0%; + background-color: var(--tt-bg); + transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms; + content: ""; + pointer-events: none; + width: 0.625rem; + height: 0.25rem; + display: block; + mask-repeat: no-repeat; + mask-position: -1px 0; + mask-image: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); + } + &.tooltip-open, &[data-tip]:hover, &:hover, &:has(:focus-visible) { + > .tooltip-content, &[data-tip]:before, &:after { + opacity: 100%; + --tt-pos: 0rem; + transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; + } + } + > .tooltip-content, &[data-tip]:before { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); + inset: auto auto var(--tt-off) 50%; + } + &:after { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); + inset: auto auto var(--tt-tail) 50%; + } + } + .dropdown { + position: relative; + display: inline-block; + position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); + & > *:not(summary):focus { + outline: 2px solid transparent; + outline-offset: 2px; + } + .dropdown-content { + position: absolute; + } + &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) { + .dropdown-content { + display: none; + transform-origin: top; + opacity: 0%; + scale: 95%; + } + } + &[popover], .dropdown-content { + @starting-style { + scale: 95%; + } + @starting-style { + opacity: 0; + } + z-index: 999; + 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); + } + &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { + [tabindex]:first-child { + pointer-events: none; + } + .dropdown-content { + opacity: 100%; + } + } + &.dropdown-hover:hover { + .dropdown-content { + opacity: 100%; + scale: 100%; + } + } + &:is(details) { + summary { + &::-webkit-details-marker { + display: none; + } + } + } + &.dropdown-open, &:focus, &:focus-within { + .dropdown-content { + scale: 100%; + } + } + &:where([popover]) { + background: transparent; + } + &[popover] { + position: fixed; + color: inherit; + @supports not (position-area: bottom) { + margin: auto; + &.dropdown-open:not(:popover-open) { + display: none; + transform-origin: top; + opacity: 0%; + scale: 95%; + } + &::backdrop { + background-color: color-mix(in oklab, black 30%, transparent); + } + } + &:not(.dropdown-open, :popover-open) { + display: none; + transform-origin: top; + opacity: 0%; + scale: 95%; + } + } + } + .floating-label { + position: relative; + display: block; + input { + display: block; + &::placeholder { + color: transparent; + } + } + > span { + position: absolute; + inset-inline-start: calc(0.25rem * 3); + top: calc(1/2 * 100%); + z-index: 1; + background-color: var(--color-base-100); + padding-inline: calc(0.25rem * 1); + opacity: 50%; + line-height: 1; + border-radius: 2px; + pointer-events: none; + translate: 0 -50%; + transition: top 0.1s ease-out, translate 0.1s ease-out, scale 0.1s ease-out, opacity 0.1s ease-out; + } + &:focus-within, &:not(:has(input:placeholder-shown)) { + > span { + opacity: 100%; + top: 0; + translate: -12.5% calc(-50% - 0.125em); + scale: 0.75; + } + } + &:has(.input-xs) span { + font-size: 0.6875rem; + } + &:has(.input-sm) span { + font-size: 0.75rem; + } + &:has(.input-md) span { + font-size: 0.875rem; + } + &:has(.input-lg) span { + font-size: 1.125rem; + } + &:has(.input-xl) span { + font-size: 1.375rem; + } + } + .collapse-arrow { + > .collapse-title:after { + position: absolute; + display: block; + height: 0.5rem; + width: 0.5rem; + transform: translateY(-100%) rotate(45deg); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.2s; + top: 1.9rem; + inset-inline-end: 1.4rem; + content: ""; + transform-origin: 75% 75%; + box-shadow: 2px 2px; + pointer-events: none; + } + } + .collapse-plus { + > .collapse-title:after { + position: absolute; + display: block; + height: 0.5rem; + width: 0.5rem; + transition-property: all; + transition-duration: 300ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + top: 0.9rem; + inset-inline-end: 1.4rem; + content: "+"; + pointer-events: none; + } + } + .drawer-open { + > .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; + } + } + } + .drawer-toggle { + position: fixed; + height: calc(0.25rem * 0); + width: calc(0.25rem * 0); + appearance: none; + opacity: 0%; + &: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; + } + } + .loading { + pointer-events: none; + display: inline-block; + aspect-ratio: 1 / 1; + width: calc(0.25rem * 6); + background-color: currentColor; + vertical-align: middle; + 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"); + } + .collapse { + &:not(td, tr, colgroup) { + visibility: visible; + } + position: relative; + display: grid; + overflow: hidden; + border-radius: var(--rounded-box, 1rem); + width: 100%; + grid-template-rows: max-content 0fr; + transition: grid-template-rows 0.2s; + > input:is([type="checkbox"], [type="radio"]) { + grid-column-start: 1; + grid-row-start: 1; + appearance: none; + opacity: 0; + z-index: 1; + width: 100%; + padding: 1rem; + padding-inline-end: 3rem; + min-height: 3.75rem; + transition: background-color 0.2s ease-out; + } + &:is([open], .collapse-open, :focus:not(.collapse-close)), + &:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) { + grid-template-rows: max-content 1fr; + } + &:is([open], .collapse-open, :focus:not(.collapse-close)) > .collapse-content, + &:not(.collapse-close) + > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { + visibility: visible; + min-height: fit-content; + } + &, + &:has(.collapse-title, > input:is([type="checkbox"], [type="radio"])) { + &:focus-visible { + outline-color: var(--color-base-content); + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + } + } + &:not(.collapse-open, .collapse-close) { + > input[type="checkbox"], + > input[type="radio"]:not(:checked), + > .collapse-title { + cursor: pointer; + } + } + &:focus:not(.collapse-open, .collapse-close, .collapse[open]) > .collapse-title { + cursor: unset; + } + &:is([open], .collapse-open, :focus:not(.collapse-close)) > :where(.collapse-content), + &:not(.collapse-close) + > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { + padding-bottom: 1rem; + transition: padding 0.2s ease-out, + background-color 0.2s ease-out; + } + &:is([open], .collapse-open) { + &.collapse-arrow { + > .collapse-title:after { + transform: translateY(-50%) rotate(225deg); + } + } + } + &.collapse-arrow:focus:not(.collapse-close) { + > .collapse-title:after { + transform: translateY(-50%) rotate(225deg); + } + } + &.collapse-arrow:not(.collapse-close) { + > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after { + transform: translateY(-50%) rotate(225deg); + } + } + &[open] { + &.collapse-plus { + > .collapse-title:after { + content: "−"; + } + } + } + &.collapse-open { + &.collapse-plus { + > .collapse-title:after { + content: "−"; + } + } + } + &.collapse-plus:focus:not(.collapse-close) { + > .collapse-title:after { + content: "−"; + } + } + &.collapse-plus:not(.collapse-close) { + > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after { + content: "−"; + } + } + &:is(details) { + width: 100%; + & summary { + position: relative; + display: block; + &::-webkit-details-marker { + display: none; + } + } + } + &:is(details) summary { + outline: none; + } + } + .collapse-content { + grid-column-start: 1; + grid-row-start: 1; + visibility: hidden; + grid-column-start: 1; + grid-row-start: 2; + min-height: 0; + transition: visibility 0.2s; + transition: padding 0.2s ease-out, + background-color 0.2s ease-out; + padding-left: 1rem; + padding-right: 1rem; + cursor: unset; + } + .validator { + &:user-valid, &:has(:user-valid) { + &, &:focus, &:checked, &[aria-checked="true"], &:focus-within { + --input-color: var(--color-success); + } + } + &:user-invalid, &:has(:user-invalid) { + &, &:focus, &:checked, &[aria-checked="true"], &:focus-within { + --input-color: var(--color-error); + } + & ~ .validator-hint { + visibility: visible; + display: block; + color: var(--color-error); + } + } + & ~ .validator-hint { + visibility: hidden; + } + } + .collapse { + visibility: collapse; + } + .visible { + visibility: visible; + } + .select { + border: var(--border) solid transparent; + position: relative; + display: inline-flex; + flex-shrink: 1; + appearance: none; + align-items: center; + gap: calc(0.25rem * 1.5); + background-color: var(--color-base-100); + padding-inline-start: calc(0.25rem * 4); + padding-inline-end: calc(0.25rem * 7); + vertical-align: middle; + width: clamp(3rem, 20rem, 100%); + height: var(--size); + font-size: 0.875rem; + border-start-start-radius: var(--join-ss, var(--radius-field)); + border-start-end-radius: var(--join-se, var(--radius-field)); + border-end-start-radius: var(--join-es, var(--radius-field)); + border-end-end-radius: var(--join-ee, var(--radius-field)); + background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); + background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); + background-size: 4px 4px, 4px 4px; + background-repeat: no-repeat; + text-overflow: ellipsis; + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + border-color: var(--input-color); + --input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + --size: calc(var(--size-field, 0.25rem) * 10); + [dir="rtl"] & { + background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%); + } + select { + margin-inline-start: calc(0.25rem * -4); + margin-inline-end: calc(0.25rem * -7); + height: 100%; + width: calc(100% + 2.75rem); + appearance: none; + background-color: transparent; + padding-inline-start: calc(0.25rem * 4); + padding-inline-end: calc(0.25rem * 7); + border-style: none; + &:focus, &:focus-within { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus, &:focus-within { + --input-color: var(--color-base-content); + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent); + outline: 2px solid var(--input-color); + outline-offset: 2px; + } + &:has(> select[disabled]), &:is(:disabled, [disabled]) { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + &::placeholder { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + &:has(> select[disabled]) > select[disabled] { + cursor: not-allowed; + } + } + .toggle { + border: var(--border) solid currentColor; + color: var(--input-color); + position: relative; + display: inline-grid; + flex-shrink: 0; + cursor: pointer; + appearance: none; + place-content: center; + vertical-align: middle; + webkit-user-select: none; + user-select: none; + grid-template-columns: 0fr 1fr 1fr; + border-radius: calc(var(--radius-selector) + var(--toggle-p)); + padding: var(--toggle-p); + box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), transparent) inset; + transition: color 0.3s, grid-template-columns 0.2s; + --input-color: color-mix(in oklab, var(--color-base-content) 50%, transparent); + --toggle-p: 0.1875rem; + --size: calc(var(--size-selector, 0.25rem) * 6); + width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2); + height: var(--size); + > * { + z-index: 1; + grid-column: span 1 / span 1; + grid-column-start: 2; + grid-row-start: 1; + height: 100%; + cursor: pointer; + appearance: none; + background-color: transparent; + padding: calc(0.25rem * 0.5); + transition: opacity 0.2s, rotate 0.4s; + border: none; + &:focus { + outline: 2px solid transparent; + outline-offset: 2px; + } + &:nth-child(2) { + color: var(--color-base-100); + rotate: 0deg; + } + &:nth-child(3) { + color: var(--color-base-100); + opacity: 0%; + rotate: -15deg; + } + } + &:has(:checked) { + > :nth-child(2) { + opacity: 0%; + rotate: 15deg; + } + > :nth-child(3) { + opacity: 100%; + rotate: 0deg; + } + } + &:before { + position: relative; + inset-inline-start: calc(0.25rem * 0); + grid-column-start: 2; + grid-row-start: 1; + aspect-ratio: 1 / 1; + height: 100%; + border-radius: var(--radius-selector); + background-color: currentColor; + @media print { + outline: .25rem solid; + } + @media print { + outline-offset: -1rem; + } + translate: 0; + --tw-content: ""; + content: var(--tw-content); + transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s; + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), transparent); + background-size: calc(var(--noise) * 1000px); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); + @media (forced-colors: active) { + outline-style: var(--tw-outline-style); + outline-width: 1px; + outline-offset: calc(1px * -1); + } + } + &:focus-visible, &:has(:focus-visible) { + outline: 2px solid currentColor; + outline-offset: 2px; + } + &:checked, &[aria-checked="true"], &:has(> input:checked) { + grid-template-columns: 1fr 1fr 0fr; + background-color: var(--color-base-100); + --input-color: var(--color-base-content); + &:before { + background-color: currentColor; + @starting-style { + opacity: 0; + } + } + } + &:indeterminate { + grid-template-columns: 0.5fr 1fr 0.5fr; + } + &:disabled { + cursor: not-allowed; + opacity: 30%; + &:before { + background-color: transparent; + border: var(--border) solid currentColor; + } + } + } + .card { + position: relative; + display: flex; + flex-direction: column; + border-radius: var(--radius-box); + outline-width: 2px; + transition: outline 0.2s ease-in-out; + outline: 0 solid transparent; + outline-offset: 2px; + &:focus { + outline: 2px solid transparent; + outline-offset: 2px; + } + &:focus-visible { + outline-color: currentColor; + } + :where(figure:first-child) { + overflow: hidden; + border-start-start-radius: inherit; + border-start-end-radius: inherit; + border-end-start-radius: unset; + border-end-end-radius: unset; + } + :where(figure:last-child) { + overflow: hidden; + border-start-start-radius: unset; + border-start-end-radius: unset; + border-end-start-radius: inherit; + border-end-end-radius: inherit; + } + &:where(.card-border) { + border: var(--border) solid var(--color-base-200); + } + &:where(.card-dash) { + border: var(--border) dashed var(--color-base-200); + } + &.image-full { + display: grid; + &:before { + position: relative; + grid-column-start: 1; + grid-row-start: 1; + border-radius: var(--radius-box); + background-color: var(--color-neutral); + opacity: 75%; + content: ""; + } + > * { + grid-column-start: 1; + grid-row-start: 1; + } + > .card-body { + position: relative; + color: var(--color-neutral-content); + } + :where(figure) { + overflow: hidden; + border-radius: inherit; + } + > figure img { + height: 100%; + object-fit: cover; + } + } + 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; + } + } + .checkbox { + border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, transparent)); + position: relative; + 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 transparent inset, 0 0 transparent; + 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: calc(var(--noise) * 1000px); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); + &: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, transparent); + box-shadow: 0 0 transparent 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 print { + rotate: 0deg; + } + @media print { + background-color: transparent; + } + @media print { + --tw-content: "✔︎"; + } + @media print { + clip-path: none; + } + @media (forced-colors: active) { + rotate: 0deg; + background-color: transparent; + --tw-content: "✔︎"; + clip-path: none; + } + } + } + &:indeterminate { + &:before { + rotate: 0deg; + opacity: 100%; + translate: 0 -35%; + clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); + } + } + &:disabled { + cursor: not-allowed; + opacity: 20%; + } + } + .radio { + position: relative; + flex-shrink: 0; + cursor: pointer; + appearance: none; + border-radius: calc(infinity * 1px); + padding: calc(0.25rem * 1); + vertical-align: middle; + border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, transparent)); + box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset; + --size: calc(var(--size-selector, 0.25rem) * 6); + width: var(--size); + height: var(--size); + color: var(--input-color, currentColor); + &:before { + display: block; + width: 100%; + height: 100%; + border-radius: calc(infinity * 1px); + --tw-content: ""; + content: var(--tw-content); + background-size: calc(var(--noise) * 1000px); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); + } + &:focus-visible { + outline: 2px solid currentColor; + } + &:checked, &[aria-checked="true"] { + animation: radio 0.2s ease-out; + border-color: currentColor; + background-color: var(--color-base-100); + &:before { + background-color: currentColor; + @media print { + outline: .25rem solid; + } + @media print { + outline-offset: -1rem; + } + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); + @media (forced-colors: active) { + outline-style: var(--tw-outline-style); + outline-width: 1px; + outline-offset: calc(1px * -1); + } + } + } + &:disabled { + cursor: not-allowed; + opacity: 20%; + } + } + .range { + appearance: none; + webkit-appearance: none; + --range-thumb: var(--color-base-100); + --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6); + --range-progress: currentColor; + --range-fill: 1; + --range-p: 0.25rem; + --range-bg: color-mix(in oklab, currentColor 10%, transparent); + cursor: pointer; + overflow: hidden; + background-color: transparent; + vertical-align: middle; + width: clamp(3rem, 20rem, 100%); + border-radius: calc(var(--radius-selector) + var(--range-p) + 1px); + border: none; + height: var(--range-thumb-size); + [dir="rtl"] & { + --range-dir: -1; + } + &:focus { + outline: none; + } + &:focus-visible { + outline: 2px solid; + outline-offset: 2px; + } + &::-webkit-slider-runnable-track { + width: 100%; + background-color: var(--range-bg); + border-radius: var(--radius-selector); + height: calc(var(--range-thumb-size) * 0.5); + @media (forced-colors: active) { + border: 1px solid; + } + } + &::-webkit-slider-thumb { + position: relative; + box-sizing: border-box; + border-radius: calc(var(--radius-selector) + var(--range-p) + 1px); + background-color: currentColor; + height: var(--range-thumb-size); + width: var(--range-thumb-size); + border: var(--range-p) solid; + appearance: none; + webkit-appearance: none; + top: 50%; + color: var(--range-progress); + transform: translateY(-50%); + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), transparent), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)); + } + &::-moz-range-track { + width: 100%; + background-color: var(--range-bg); + border-radius: var(--radius-selector); + height: calc(var(--range-thumb-size) * 0.5); + @media (forced-colors: active) { + border: 1px solid; + } + } + &::-moz-range-thumb { + position: relative; + box-sizing: border-box; + border-radius: calc(var(--radius-selector) + var(--range-p) + 1px); + background-color: currentColor; + height: var(--range-thumb-size); + width: var(--range-thumb-size); + border: var(--range-p) solid; + top: 50%; + color: var(--range-progress); + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), transparent), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)); + } + &:disabled { + cursor: not-allowed; + opacity: 30%; + } + } + .table { + font-size: 0.875rem; + position: relative; + width: 100%; + border-radius: var(--radius-box); + text-align: left; + &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + text-align: right; + } + tr.row-hover { + &, &:nth-child(even) { + &:hover { + @media (hover: hover) { + background-color: var(--color-base-200); + } + } + } + } + :where(th, td) { + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 3); + vertical-align: middle; + } + :where(thead, tfoot) { + white-space: nowrap; + color: 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-200); + } + :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), tbody tr:first-child:last-child) { + border-bottom: var(--border) solid var(--color-base-200); + } + } + .list { + 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); + &: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; + } + &:has(:not(:last-child)), &:not(:last-child) { + &:after { + content: ""; + border-bottom: var(--border) solid; + inset-inline: var(--radius-box); + position: absolute; + bottom: calc(0.25rem * 0); + border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); + } + } + :not(.list-col-wrap) { + grid-row-start: 1; + } + } + } + .chat-bubble { + position: relative; + display: block; + width: fit-content; + border-radius: var(--radius-field); + background-color: var(--color-base-300); + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 2); + color: var(--color-base-content); + min-height: 2rem; + min-width: 2.5rem; + max-width: 90%; + &:before { + position: absolute; + bottom: calc(0.25rem * 0); + height: calc(0.25rem * 3); + width: calc(0.25rem * 3); + background-color: inherit; + content: ""; + mask-repeat: no-repeat; + mask-image: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); + mask-position: 0px -1px; + mask-size: 13px; + } + } + .toast { + position: fixed; + inset-inline-start: auto; + inset-inline-end: calc(0.25rem * 0); + top: auto; + bottom: calc(0.25rem * 0); + margin: calc(0.25rem * 4); + display: flex; + min-width: fit-content; + flex-direction: column; + gap: calc(0.25rem * 2); + background-color: transparent; + white-space: nowrap; + translate: var(--toast-x, 0) var(--toast-y, 0); + & > * { + animation: toast 0.25s ease-out; + } + &:where(.toast-start) { + inset-inline-start: calc(0.25rem * 0); + inset-inline-end: auto; + --toast-x: 0; + } + &:where(.toast-center) { + inset-inline-start: calc(1/2 * 100%); + inset-inline-end: calc(1/2 * 100%); + --toast-x: -50%; + } + &:where(.toast-end) { + inset-inline-start: auto; + inset-inline-end: calc(0.25rem * 0); + --toast-x: 0; + } + &:where(.toast-bottom) { + top: auto; + bottom: calc(0.25rem * 0); + --toast-y: 0; + } + &:where(.toast-middle) { + top: calc(1/2 * 100%); + bottom: auto; + --toast-y: -50%; + } + &:where(.toast-top) { + top: calc(0.25rem * 0); + bottom: auto; + --toast-y: 0; + } + } + .rating { + position: relative; + display: inline-flex; + vertical-align: middle; + & input { + border: none; + appearance: none; + } + :where(*) { + animation: rating 0.25s ease-out; + height: calc(0.25rem * 6); + width: calc(0.25rem * 6); + border-radius: 0; + background-color: var(--color-base-content); + opacity: 20%; + &:is(input) { + cursor: pointer; + } + } + & .rating-hidden { + width: calc(0.25rem * 2); + background-color: transparent; + } + input[type="radio"]:checked { + background-image: none; + } + * { + &:checked, &[aria-checked="true"], &[aria-current="true"], &:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) { + opacity: 100%; + } + &:focus-visible { + transition: scale 0.2s ease-out; + scale: 1.1; + } + } + & *:active:focus { + animation: none; + scale: 1.1; + } + &.rating-xs :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 4); + height: calc(0.25rem * 4); + } + &.rating-sm :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 5); + height: calc(0.25rem * 5); + } + &.rating-md :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 6); + height: calc(0.25rem * 6); + } + &.rating-lg :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 7); + height: calc(0.25rem * 7); + } + &.rating-xl :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 8); + height: calc(0.25rem * 8); + } + } + .swap { + position: relative; + display: inline-grid; + cursor: pointer; + place-content: center; + vertical-align: middle; + webkit-user-select: none; + user-select: none; + input { + appearance: none; + border: none; + } + > * { + grid-column-start: 1; + grid-row-start: 1; + transition-property: transform, rotate, opacity; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + .swap-on, .swap-indeterminate, input:indeterminate ~ .swap-on { + opacity: 0%; + } + input:checked, input:indeterminate { + & ~ .swap-off { + opacity: 0%; + } + } + input:checked ~ .swap-on, input:indeterminate ~ .swap-indeterminate { + opacity: 100%; + } + } + .menu-horizontal { + display: inline-flex; + flex-direction: row; + & > li:not(.menu-title) > details > ul { + position: absolute; + margin-inline-start: calc(0.25rem * 0); + margin-top: calc(0.25rem * 4); + padding-block: calc(0.25rem * 2); + padding-inline-end: calc(0.25rem * 2); + } + & > li > details > ul { + &:before { + content: none; + } + } + :where(& > li:not(.menu-title) > details > ul) { + border-radius: var(--radius-box); + background-color: var(--color-base-100); + box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1); + } + } + .progress { + position: relative; + height: calc(0.25rem * 2); + width: 100%; + appearance: none; + overflow: hidden; + border-radius: var(--radius-box); + 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%, transparent 10%, transparent 90% ); + background-size: 200%; + background-position-x: 15%; + animation: progress 5s ease-in-out infinite; + @supports (-moz-appearance: none) { + &::-moz-progress-bar { + background-color: transparent; + background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, transparent 10%, transparent 90% ); + background-size: 200%; + background-position-x: 15%; + animation: progress 5s ease-in-out infinite; + } + } + } + @supports (-moz-appearance: none) { + &::-moz-progress-bar { + border-radius: var(--radius-box); + background-color: currentColor; + } + } + @supports (-webkit-appearance: none) { + &::-webkit-progress-bar { + border-radius: var(--radius-box); + background-color: transparent; + } + &::-webkit-progress-value { + border-radius: var(--radius-box); + background-color: currentColor; + } + } + } + .collapse-title { + grid-column-start: 1; + grid-row-start: 1; + position: relative; + width: 100%; + padding: 1rem; + padding-inline-end: 3rem; + min-height: 3.75rem; + transition: background-color 0.2s ease-out; + } + .stats { + position: relative; + display: inline-grid; + grid-auto-flow: column; + overflow-x: auto; + border-radius: var(--radius-box); + } + .drawer { + position: relative; + display: grid; + width: 100%; + grid-auto-columns: max-content auto; + } + .absolute { + position: absolute; + } + .fixed { + position: fixed; + } + .relative { + position: relative; + } + .static { + position: static; + } + .sticky { + position: sticky; + } + .inset-x-0 { + inset-inline: calc(var(--spacing) * 0); + } + .inset-y-0 { + inset-block: calc(var(--spacing) * 0); + } + .chat-end { + place-items: end; + grid-template-columns: 1fr auto; + .chat-header { + grid-column-start: 1; + } + .chat-footer { + grid-column-start: 1; + } + .chat-image { + grid-column-start: 2; + } + .chat-bubble { + grid-column-start: 1; + border-end-end-radius: 0; + &:before { + transform: rotateY(180deg); + inset-inline-start: 100%; + } + [dir="rtl"] &:before { + transform: rotateY(0deg); + } + } + } + .chat-start { + place-items: start; + grid-template-columns: auto 1fr; + .chat-header { + grid-column-start: 2; + } + .chat-footer { + grid-column-start: 2; + } + .chat-image { + grid-column-start: 1; + } + .chat-bubble { + grid-column-start: 2; + border-end-start-radius: 0; + &:before { + transform: rotateY(0deg); + inset-inline-start: -0.75rem; + } + [dir="rtl"] &:before { + transform: rotateY(180deg); + } + } + } + .\!top-2 { + top: calc(var(--spacing) * 2) !important; + } + .\!top-2\.5 { + top: calc(var(--spacing) * 2.5) !important; + } + .top-1 { + top: calc(var(--spacing) * 1); + } + .top-9 { + top: calc(var(--spacing) * 9); + } + .right-0 { + right: calc(var(--spacing) * 0); + } + .right-0\.5 { + right: calc(var(--spacing) * 0.5); + } + .bottom-0 { + bottom: calc(var(--spacing) * 0); + } + .\!left-3 { + left: calc(var(--spacing) * 3) !important; + } + .left-0 { + left: calc(var(--spacing) * 0); + } + .file-input { + cursor: pointer; + cursor: pointer; + border: var(--border) solid transparent; + display: inline-flex; + appearance: none; + align-items: center; + vertical-align: middle; + webkit-user-select: none; + user-select: none; + width: clamp(3rem, 20rem, 100%); + height: var(--size); + padding-inline-end: 0.75rem; + font-size: 0.875rem; + line-height: 2; + 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 color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + --size: calc(var(--size-field, 0.25rem) * 10); + --input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + &:where(::file-selector-button) { + color: var(--color-base-content); + } + &::file-selector-button { + margin-inline-end: calc(0.25rem * 4); + cursor: pointer; + padding-inline: calc(0.25rem * 4); + webkit-user-select: none; + user-select: none; + height: calc(100% + var(--border) * 2); + margin-block: calc(var(--border) * -1); + margin-inline-start: calc(var(--border) * -1); + font-size: 0.875rem; + color: var(--btn-fg); + border-width: var(--border); + border-style: solid; + border-color: var(--btn-border); + border-start-start-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); + border-end-start-radius: calc(var(--join-es, var(--radius-field) - var(--border))); + font-weight: 600; + background-color: var(--btn-bg); + background-size: calc(var(--noise) * 100%); + background-image: var(--btn-noise); + text-shadow: 0 0.5px oklch(1 0 0 / calc(var(--depth) * 0.15)); + box-shadow: 0 0.5px 0 0.5px color-mix( in oklab, color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%), transparent ) 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-border: color-mix(in oklab, var(--btn-bg), black 5%); + --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, transparent), + 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) 30%, transparent); + --btn-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); + } + &:focus { + --input-color: var(--color-base-content); + box-shadow: 0 1px color-mix(in oklab, var(--input-color) 10%, transparent); + outline: 2px solid var(--input-color); + outline-offset: 2px; + isolation: isolate; + } + &:has(> input[disabled]), &:is(:disabled, [disabled]) { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + &::placeholder { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + box-shadow: none; + color: color-mix(in oklch, var(--color-base-content) 20%, transparent); + &::file-selector-button { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + --btn-border: transparent; + --btn-noise: none; + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, transparent); + } + } + } + .\!input { + cursor: text !important; + border: var(--border) solid transparent !important; + display: inline-flex !important; + flex-shrink: 1 !important; + appearance: none !important; + align-items: center !important; + gap: calc(0.25rem * 2) !important; + background-color: var(--color-base-100) !important; + padding-inline: calc(0.25rem * 3) !important; + vertical-align: middle !important; + white-space: nowrap !important; + width: clamp(3rem, 20rem, 100%) !important; + height: var(--size) !important; + font-size: 0.875rem !important; + border-start-start-radius: var(--join-ss, var(--radius-field)) !important; + border-start-end-radius: var(--join-se, var(--radius-field)) !important; + border-end-start-radius: var(--join-es, var(--radius-field)) !important; + border-end-end-radius: var(--join-ee, var(--radius-field)) !important; + border-color: var(--input-color) !important; + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset !important; + --size: calc(var(--size-field, 0.25rem) * 10) !important; + --input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important; + &:where(input) { + display: inline-block !important; + } + :where(input) { + display: inline-block !important; + height: 100% !important; + width: 100% !important; + appearance: none !important; + background-color: transparent !important; + border: none !important; + &:focus, &:focus-within { + outline: 2px solid transparent !important; + outline-offset: 2px !important; + } + } + &:focus, &:focus-within { + --input-color: var(--color-base-content) !important; + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) !important; + outline: 2px solid var(--input-color) !important; + outline-offset: 2px !important; + isolation: isolate !important; + } + &:has(> input[disabled]), &:is(:disabled, [disabled]) { + cursor: not-allowed !important; + border-color: var(--color-base-200) !important; + background-color: var(--color-base-200) !important; + color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important; + &::placeholder { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important; + } + box-shadow: none !important; + } + &:has(> input[disabled]) > input[disabled] { + cursor: not-allowed !important; + } + &::-webkit-date-and-time-value { + text-align: inherit !important; + } + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -3) !important; + margin-inline-end: calc(0.25rem * -3) !important; + } + } + &[list] { + &::-webkit-calendar-picker-indicator { + } + } + } + .input { + cursor: text; + border: var(--border) solid transparent; + display: inline-flex; + flex-shrink: 1; + appearance: none; + align-items: center; + gap: calc(0.25rem * 2); + background-color: var(--color-base-100); + padding-inline: calc(0.25rem * 3); + vertical-align: middle; + white-space: nowrap; + width: clamp(3rem, 20rem, 100%); + height: var(--size); + font-size: 0.875rem; + 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 color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + --size: calc(var(--size-field, 0.25rem) * 10); + --input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + &:where(input) { + display: inline-block; + } + :where(input) { + display: inline-block; + height: 100%; + width: 100%; + appearance: none; + background-color: transparent; + border: none; + &:focus, &:focus-within { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus, &:focus-within { + --input-color: var(--color-base-content); + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent); + outline: 2px solid var(--input-color); + outline-offset: 2px; + isolation: isolate; + } + &:has(> input[disabled]), &:is(:disabled, [disabled]) { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + &::placeholder { + 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); + } + } + &[list] { + &::-webkit-calendar-picker-indicator { + } + } + } + .textarea { + border: var(--border) solid transparent; + min-height: calc(0.25rem * 20); + flex-shrink: 1; + appearance: none; + border-radius: var(--radius-field); + background-color: var(--color-base-100); + padding-block: calc(0.25rem * 2); + vertical-align: middle; + width: clamp(3rem, 20rem, 100%); + padding-inline-start: 0.75rem; + padding-inline-end: 0.75rem; + font-size: 0.875rem; + border-color: var(--input-color); + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + --size: calc(var(--size-field, 0.25rem) * 10); + --input-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + textarea { + appearance: none; + background-color: transparent; + border: none; + &:focus, &:focus-within { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus, &:focus-within { + --input-color: var(--color-base-content); + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), transparent); + outline: 2px solid var(--input-color); + outline-offset: 2px; + isolation: isolate; + } + &:has(> textarea[disabled]), &:is(:disabled, [disabled]) { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + &::placeholder { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + box-shadow: none; + } + &:has(> textarea[disabled]) > textarea[disabled] { + cursor: not-allowed; + } + } + .isolate { + isolation: isolate; + } + .stack { + display: inline-grid; + grid-template-columns: 3px 4px 1fr 4px 3px; + grid-template-rows: 3px 4px 1fr 4px 3px; + & > * { + height: 100%; + width: 100%; + &:not(:nth-child(1)) { + width: 100%; + opacity: 70%; + } + &:nth-child(2) { + z-index: 2; + opacity: 90%; + } + &:nth-child(1) { + z-index: 3; + width: 100%; + } + } + &, &.stack-bottom { + > * { + grid-column: 3 / 4; + grid-row: 3 / 6; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 6; + grid-row: 1 / 4; + } + } + } + &.stack-top { + > * { + grid-column: 3 / 4; + grid-row: 1 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 6; + grid-row: 3 / 6; + } + } + } + &.stack-start { + > * { + grid-column: 1 / 4; + grid-row: 3 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 3 / 6; + grid-row: 1 / 6; + } + } + } + &.stack-end { + > * { + grid-column: 3 / 6; + grid-row: 3 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 4; + grid-row: 1 / 6; + } + } + } + } + .z-2 { + z-index: 2; + } + .z-4 { + z-index: 4; + } + .z-5 { + z-index: 5; + } + .z-7 { + z-index: 7; + } + .z-8 { + z-index: 8; + } + .z-9 { + z-index: 9; + } + .z-10 { + z-index: 10; + } + .z-20 { + z-index: 20; + } + .z-50 { + z-index: 50; + } + .z-\[9999\] { + z-index: 9999; + } + .col-span-1 { + grid-column: span 1 / span 1; + } + .modal-box { + grid-column-start: 1; + grid-row-start: 1; + 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; + } + .hero { + display: grid; + width: 100%; + place-items: center; + background-size: cover; + background-position: center; + & > * { + grid-column-start: 1; + grid-row-start: 1; + } + } + .stat-desc { + grid-column-start: 1; + white-space: nowrap; + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + font-size: 0.75rem; + } + .stat-title { + grid-column-start: 1; + white-space: nowrap; + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + font-size: 0.75rem; + } + .stat-value { + grid-column-start: 1; + white-space: nowrap; + font-size: 2rem; + font-weight: 800; + } + .drawer-content { + grid-column-start: 2; + grid-row-start: 1; + min-width: calc(0.25rem * 0); + } + .chat-image { + grid-row: span 2 / span 2; + align-self: flex-end; + } + .chat-footer { + grid-row-start: 3; + display: flex; + gap: calc(0.25rem * 1); + font-size: 0.6875rem; + } + .chat-header { + grid-row-start: 1; + display: flex; + gap: calc(0.25rem * 1); + font-size: 0.6875rem; + } + .list-col-wrap { + grid-row-start: 2; + } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; + } + } + .filter { + display: flex; + flex-wrap: wrap; + input[type="radio"] { + width: auto; + } + input { + overflow: hidden; + opacity: 100%; + scale: 1; + transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s, width 0.1s allow-discrete; + &:not(:last-child) { + margin-inline-end: calc(0.25rem * 1); + } + &.filter-reset { + aspect-ratio: 1 / 1; + &::after { + content: "×"; + } + } + } + &:not(:has(input:checked:not(.filter-reset))) { + .filter-reset, input[type="reset"] { + scale: 0; + border-width: 0; + margin-inline: calc(0.25rem * 0); + width: calc(0.25rem * 0); + padding-inline: calc(0.25rem * 0); + opacity: 0%; + } + } + &:has(input:checked:not(.filter-reset)) { + input:not(:checked, .filter-reset, input[type="reset"]) { + scale: 0; + border-width: 0; + margin-inline: calc(0.25rem * 0); + width: calc(0.25rem * 0); + padding-inline: calc(0.25rem * 0); + opacity: 0%; + } + } + } + .mx-auto { + margin-inline: auto; + } + .divider { + margin-block: calc(0.25rem * 4); + display: flex; + height: calc(0.25rem * 4); + flex-direction: row; + align-items: center; + align-self: stretch; + white-space: nowrap; + &:before, &:after { + content: ""; + height: calc(0.25rem * 0.5); + width: 100%; + flex-grow: 1; + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + @media print { + border: 0.5px solid; + } + } + &:not(:empty) { + gap: calc(0.25rem * 4); + } + } + .input-lg { + --size: calc(var(--size-field, 0.25rem) * 12); + font-size: 1.125rem; + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * -3); + } + } + } + .input-md { + --size: calc(var(--size-field, 0.25rem) * 10); + font-size: 0.875rem; + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * -3); + } + } + } + .input-sm { + --size: calc(var(--size-field, 0.25rem) * 8); + font-size: 0.75rem; + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -2); + margin-inline-end: calc(0.25rem * -3); + } + } + } + .input-xl { + --size: calc(var(--size-field, 0.25rem) * 14); + font-size: 1.375rem; + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -4); + margin-inline-end: calc(0.25rem * -3); + } + } + } + .input-xs { + --size: calc(var(--size-field, 0.25rem) * 6); + font-size: 0.6875rem; + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -1); + margin-inline-end: calc(0.25rem * -3); + } + } + } + .my-2 { + margin-block: calc(var(--spacing) * 2); + } + .my-4 { + margin-block: calc(var(--spacing) * 4); + } + .my-10 { + margin-block: calc(var(--spacing) * 10); + } + .my-12 { + margin-block: calc(var(--spacing) * 12); + } + .\!input { + .label { + display: flex !important; + height: calc(100% - 0.5rem) !important; + align-items: center !important; + padding-inline: calc(0.25rem * 3) !important; + font-size: inherit !important; + &:first-child { + margin-inline-start: calc(0.25rem * -3) !important; + margin-inline-end: calc(0.25rem * 3) !important; + border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, transparent) !important; + } + &:last-child { + margin-inline-start: calc(0.25rem * 3) !important; + margin-inline-end: calc(0.25rem * -3) !important; + border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, transparent) !important; + } + } + } + .input { + .label { + display: flex; + height: calc(100% - 0.5rem); + align-items: center; + padding-inline: calc(0.25rem * 3); + 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 color-mix(in oklab, currentColor 10%, transparent); + } + &:last-child { + margin-inline-start: calc(0.25rem * 3); + margin-inline-end: calc(0.25rem * -3); + border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, transparent); + } + } + } + .select { + .label { + display: flex; + height: calc(100% - 0.5rem); + align-items: center; + padding-inline: calc(0.25rem * 3); + 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 color-mix(in oklab, currentColor 10%, transparent); + } + &:last-child { + margin-inline-start: calc(0.25rem * 3); + margin-inline-end: calc(0.25rem * -3); + border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, transparent); + } + } + } + .join-item { + &:where(*:not(:first-child)) { + margin-inline-start: calc(var(--border, 1px) * -1); + margin-block-start: 0; + } + } + .prose { + color: var(--tw-prose-body); + max-width: 90ch; + :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-lead); + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-links); + text-decoration: underline; + font-weight: 500; + } + :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-bold); + font-weight: 600; + } + :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: inherit; + } + :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: inherit; + } + :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: inherit; + } + :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + list-style-type: decimal; + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-inline-start: 1.625em; + } + :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + list-style-type: upper-alpha; + } + :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + list-style-type: lower-alpha; + } + :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + list-style-type: upper-alpha; + } + :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + list-style-type: lower-alpha; + } + :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + list-style-type: upper-roman; + } + :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + list-style-type: lower-roman; + } + :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + list-style-type: upper-roman; + } + :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + list-style-type: lower-roman; + } + :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + list-style-type: decimal; + } + :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + list-style-type: disc; + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-inline-start: 1.625em; + } + :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { + font-weight: 400; + color: var(--tw-prose-counters); + } + :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { + color: var(--tw-prose-bullets); + } + :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 600; + margin-top: 1.25em; + } + :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + border-color: var(--tw-prose-hr); + border-top-width: 1; + margin-top: 3em; + margin-bottom: 3em; + } + :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-weight: 500; + font-style: italic; + color: var(--tw-prose-quotes); + border-inline-start-width: 0.25rem; + border-inline-start-color: var(--tw-prose-quote-borders); + quotes: "\201C""\201D""\2018""\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-inline-start: 1em; + } + :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { + content: open-quote; + } + :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { + content: close-quote; + } + :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-weight: 900; + color: inherit; + } + :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-weight: 800; + color: inherit; + } + :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-weight: 700; + color: inherit; + } + :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-weight: 700; + color: inherit; + } + :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + display: block; + margin-top: 2em; + margin-bottom: 2em; + } + :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-weight: 500; + font-family: inherit; + color: var(--tw-prose-kbd); + box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); + font-size: 0.875em; + border-radius: 0.3125rem; + padding-top: 0.1875em; + padding-inline-end: 0.375em; + padding-bottom: 0.1875em; + padding-inline-start: 0.375em; + } + :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-code); + font-weight: 600; + font-size: 0.875em; + } + :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { + content: "`"; + } + :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { + content: "`"; + } + :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: inherit; + } + :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: inherit; + } + :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: inherit; + font-size: 0.875em; + } + :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: inherit; + font-size: 0.9em; + } + :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: inherit; + } + :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: inherit; + } + :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: inherit; + } + :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-pre-code); + background-color: var(--tw-prose-pre-bg); + overflow-x: auto; + font-weight: 400; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-inline-end: 1.1428571em; + padding-bottom: 0.8571429em; + padding-inline-start: 1.1428571em; + } + :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + background-color: transparent; + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: inherit; + color: inherit; + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { + content: none; + } + :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { + content: none; + } + :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + width: 100%; + table-layout: auto; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + border-bottom-width: 1px; + border-bottom-color: var(--tw-prose-th-borders); + } + :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 600; + vertical-align: bottom; + padding-inline-end: 0.5714286em; + padding-bottom: 0.5714286em; + padding-inline-start: 0.5714286em; + } + :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + border-bottom-width: 1px; + border-bottom-color: var(--tw-prose-td-borders); + } + :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + border-bottom-width: 0; + } + :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + vertical-align: baseline; + } + :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + border-top-width: 1px; + border-top-color: var(--tw-prose-th-borders); + } + :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + vertical-align: top; + } + :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + text-align: start; + } + :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; + } + :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + color: var(--tw-prose-captions); + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + --tw-prose-body: oklch(0.373 0.034 259.733); + --tw-prose-headings: oklch(0.21 0.034 264.665); + --tw-prose-lead: oklch(0.446 0.03 256.802); + --tw-prose-links: oklch(0.21 0.034 264.665); + --tw-prose-bold: oklch(0.21 0.034 264.665); + --tw-prose-counters: oklch(0.551 0.027 264.364); + --tw-prose-bullets: oklch(0.872 0.01 258.338); + --tw-prose-hr: oklch(0.928 0.006 264.531); + --tw-prose-quotes: oklch(0.21 0.034 264.665); + --tw-prose-quote-borders: oklch(0.928 0.006 264.531); + --tw-prose-captions: oklch(0.551 0.027 264.364); + --tw-prose-kbd: oklch(0.21 0.034 264.665); + --tw-prose-kbd-shadows: NaN NaN NaN; + --tw-prose-code: oklch(0.21 0.034 264.665); + --tw-prose-pre-code: oklch(0.928 0.006 264.531); + --tw-prose-pre-bg: oklch(0.278 0.033 256.848); + --tw-prose-th-borders: oklch(0.872 0.01 258.338); + --tw-prose-td-borders: oklch(0.928 0.006 264.531); + --tw-prose-invert-body: oklch(0.872 0.01 258.338); + --tw-prose-invert-headings: #fff; + --tw-prose-invert-lead: oklch(0.707 0.022 261.325); + --tw-prose-invert-links: #fff; + --tw-prose-invert-bold: #fff; + --tw-prose-invert-counters: oklch(0.707 0.022 261.325); + --tw-prose-invert-bullets: oklch(0.446 0.03 256.802); + --tw-prose-invert-hr: oklch(0.373 0.034 259.733); + --tw-prose-invert-quotes: oklch(0.967 0.003 264.542); + --tw-prose-invert-quote-borders: oklch(0.373 0.034 259.733); + --tw-prose-invert-captions: oklch(0.707 0.022 261.325); + --tw-prose-invert-kbd: #fff; + --tw-prose-invert-kbd-shadows: 255 255 255; + --tw-prose-invert-code: #fff; + --tw-prose-invert-pre-code: oklch(0.872 0.01 258.338); + --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); + --tw-prose-invert-th-borders: oklch(0.446 0.03 256.802); + --tw-prose-invert-td-borders: oklch(0.373 0.034 259.733); + font-size: 1rem; + line-height: 1.75; + :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; + } + :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0.375em; + } + :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0.375em; + } + :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + } + :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 1.25em; + } + :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + } + :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 1.25em; + } + :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.5em; + padding-inline-start: 1.625em; + } + :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0; + } + :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-end: 0; + } + :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-top: 0.5714286em; + padding-inline-end: 0.5714286em; + padding-bottom: 0.5714286em; + padding-inline-start: 0.5714286em; + } + :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0; + } + :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-end: 0; + } + :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 0; + } + } + .prose-base { + font-size: 1rem; + line-height: 1.75; + :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-inline-start: 1em; + } + :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; + } + :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + border-radius: 0.3125rem; + padding-top: 0.1875em; + padding-inline-end: 0.375em; + padding-bottom: 0.1875em; + padding-inline-start: 0.375em; + } + :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + } + :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + } + :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.9em; + } + :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-inline-end: 1.1428571em; + padding-bottom: 0.8571429em; + padding-inline-start: 1.1428571em; + } + :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-inline-start: 1.625em; + } + :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-inline-start: 1.625em; + } + :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0.375em; + } + :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0.375em; + } + :where(.prose-base > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + :where(.prose-base > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + } + :where(.prose-base > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 1.25em; + } + :where(.prose-base > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + } + :where(.prose-base > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 1.25em; + } + :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + } + :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.5em; + padding-inline-start: 1.625em; + } + :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 3em; + margin-bottom: 3em; + } + :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + line-height: 1.7142857; + } + :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-end: 0.5714286em; + padding-bottom: 0.5714286em; + padding-inline-start: 0.5714286em; + } + :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0; + } + :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-end: 0; + } + :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-top: 0.5714286em; + padding-inline-end: 0.5714286em; + padding-bottom: 0.5714286em; + padding-inline-start: 0.5714286em; + } + :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0; + } + :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-end: 0; + } + :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; + } + :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + :where(.prose-base > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(.prose-base > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 0; + } + } + .prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; + :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-inline-start: 1.1111111em; + } + :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; + } + :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.8571429em; + border-radius: 0.3125rem; + padding-top: 0.1428571em; + padding-inline-end: 0.3571429em; + padding-bottom: 0.1428571em; + padding-inline-start: 0.3571429em; + } + :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.8571429em; + } + :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.9em; + } + :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.8888889em; + } + :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-inline-end: 1em; + padding-bottom: 0.6666667em; + padding-inline-start: 1em; + } + :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + padding-inline-start: 1.5714286em; + } + :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + padding-inline-start: 1.5714286em; + } + :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0.4285714em; + } + :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0.4285714em; + } + :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.1428571em; + } + :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 1.1428571em; + } + :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.1428571em; + } + :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 1.1428571em; + } + :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.1428571em; + } + :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.2857143em; + padding-inline-start: 1.5714286em; + } + :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.8571429em; + line-height: 1.5; + } + :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-end: 1em; + padding-bottom: 0.6666667em; + padding-inline-start: 1em; + } + :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0; + } + :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-end: 0; + } + :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-top: 0.6666667em; + padding-inline-end: 1em; + padding-bottom: 0.6666667em; + padding-inline-start: 1em; + } + :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0; + } + :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-end: 0; + } + :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; + } + :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 0; + } + } + .modal-action { + margin-top: calc(0.25rem * 6); + display: flex; + justify-content: flex-end; + gap: calc(0.25rem * 2); + } + .validator-hint { + margin-top: calc(0.25rem * 2); + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } + .mt-1 { + margin-top: calc(var(--spacing) * 1); + } + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } + .mt-4 { + margin-top: calc(var(--spacing) * 4); + } + .mt-6 { + margin-top: calc(var(--spacing) * 6); + } + .mt-8 { + margin-top: calc(var(--spacing) * 8); + } + .mt-10 { + margin-top: calc(var(--spacing) * 10); + } + .mr-1 { + margin-right: calc(var(--spacing) * 1); + } + .mr-2 { + margin-right: calc(var(--spacing) * 2); + } + .fieldset-legend { + margin-bottom: calc(0.25rem * -1); + display: flex; + align-items: center; + justify-content: space-between; + gap: calc(0.25rem * 2); + padding-block: calc(0.25rem * 2); + color: var(--color-base-content); + font-weight: 600; + } + .mb-2 { + margin-bottom: calc(var(--spacing) * 2); + } + .mb-4 { + margin-bottom: calc(var(--spacing) * 4); + } + .mb-6 { + margin-bottom: calc(var(--spacing) * 6); + } + .mb-8 { + margin-bottom: calc(var(--spacing) * 8); + } + .mb-10 { + margin-bottom: calc(var(--spacing) * 10); + } + .ml-1 { + margin-left: calc(var(--spacing) * 1); + } + .alert { + display: grid; + width: 100%; + 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 minmax(auto, 1fr); + text-align: start; + border: var(--border) solid var(--color-base-200); + font-size: 0.875rem; + line-height: 1.25rem; + background-size: calc(var(--noise) * 1000px); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); + 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, black 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), transparent ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); + &.alert-outline { + background-color: transparent; + color: var(--alert-color); + box-shadow: none; + background-image: none; + } + &.alert-dash { + background-color: transparent; + color: var(--alert-color); + border-style: dashed; + box-shadow: none; + background-image: none; + } + &.alert-soft { + color: var(--alert-color, var(--color-base-content)); + background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) ); + border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) ); + box-shadow: none; + background-image: none; + } + } + .badge { + display: inline-flex; + align-items: center; + justify-content: center; + gap: calc(0.25rem * 2); + border-radius: var(--radius-selector); + vertical-align: middle; + color: var(--color-base-content); + 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: calc(var(--noise) * 1000px); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); + background-color: var(--badge-color, var(--color-base-100)); + --size: calc(var(--size-selector, 0.25rem) * 6); + height: var(--size); + &.badge-outline { + color: var(--badge-color, var(--color-base-content)); + border-color: currentColor; + background-color: transparent; + background-image: none; + box-shadow: none; + } + &.badge-dash { + color: var(--badge-color, var(--color-base-content)); + background-color: transparent; + border-style: dashed; + background-image: none; + box-shadow: none; + } + &.badge-soft { + color: var(--badge-color, var(--color-base-content)); + background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) ); + border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) ); + background-image: none; + box-shadow: none; + } + } + .status { + display: inline-block; + aspect-ratio: 1 / 1; + width: calc(0.25rem * 2); + height: calc(0.25rem * 2); + border-radius: var(--radius-selector); + background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + background-position: center; + background-repeat: no-repeat; + vertical-align: middle; + 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)), transparent ); + box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), transparent); + } + .kbd { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-field); + background-color: var(--color-base-200); + vertical-align: middle; + padding-left: 0.5em; + padding-right: 0.5em; + border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, transparent); + border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, transparent); + --size: calc(var(--size-selector, 0.25rem) * 6); + font-size: 0.875rem; + height: var(--size); + min-width: var(--size); + } + .footer { + display: grid; + width: 100%; + grid-auto-flow: row; + place-items: start; + column-gap: calc(0.25rem * 4); + row-gap: calc(0.25rem * 10); + font-size: 0.875rem; + line-height: 1.25rem; + & > * { + display: grid; + place-items: start; + gap: calc(0.25rem * 2); + } + &.footer-center { + grid-auto-flow: column dense; + place-items: center; + text-align: center; + & > * { + place-items: center; + } + } + } + .card-body { + display: flex; + flex: auto; + flex-direction: column; + gap: calc(0.25rem * 2); + padding: var(--card-p, 2rem); + font-size: var(--card-fs, 0.875rem); + :where(p) { + flex-grow: 1; + } + } + .hero-content { + display: flex; + max-width: 80rem; + align-items: center; + justify-content: center; + gap: calc(0.25rem * 4); + padding: calc(0.25rem * 4); + } + .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-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\! { + display: inline-flex !important; + align-items: stretch !important; + --join-ss: 0 !important; + --join-se: 0 !important; + --join-es: 0 !important; + --join-ee: 0 !important; + :where(.join-item) { + border-start-start-radius: var(--join-ss, 0) !important; + border-start-end-radius: var(--join-se, 0) !important; + border-end-start-radius: var(--join-es, 0) !important; + border-end-end-radius: var(--join-ee, 0) !important; + } + > .join-item:where(:first-child) { + --join-ss: var(--radius-field) !important; + --join-se: 0 !important; + --join-es: var(--radius-field) !important; + --join-ee: 0 !important; + } + :first-child:not(:last-child) { + :where(.join-item) { + --join-ss: var(--radius-field) !important; + --join-se: 0 !important; + --join-es: var(--radius-field) !important; + --join-ee: 0 !important; + } + } + > .join-item:where(:last-child) { + --join-ss: 0 !important; + --join-se: var(--radius-field) !important; + --join-es: 0 !important; + --join-ee: var(--radius-field) !important; + } + :last-child:not(:first-child) { + :where(.join-item) { + --join-ss: 0 !important; + --join-se: var(--radius-field) !important; + --join-es: 0 !important; + --join-ee: var(--radius-field) !important; + } + } + } + .stat { + display: inline-grid; + width: 100%; + column-gap: calc(0.25rem * 4); + padding-inline: calc(0.25rem * 6); + padding-block: calc(0.25rem * 4); + grid-template-columns: repeat(1, 1fr); + &:not(:last-child) { + border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, transparent); + border-block-end: none; + } + } + .card-title { + display: flex; + align-items: center; + gap: calc(0.25rem * 2); + font-size: var(--cardtitle-fs, 1.125rem); + font-weight: 600; + } + .fieldset { + display: grid; + gap: calc(0.25rem * 1.5); + padding-block: calc(0.25rem * 1); + font-size: 0.75rem; + grid-template-columns: 1fr; + } + .fieldset-label { + display: flex; + align-items: center; + gap: calc(0.25rem * 1.5); + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + &:is(label, a), &:has(input) { + cursor: pointer; + } + } + .label { + display: inline-flex; + align-items: center; + gap: calc(0.25rem * 1.5); + color: color-mix(in oklab, currentColor 60%, transparent); + &:has(input) { + cursor: pointer; + } + } + .navbar { + display: flex; + width: 100%; + align-items: center; + padding: 0.5rem; + min-height: 4rem; + } + .card-actions { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: calc(0.25rem * 2); + } + .chat { + display: grid; + column-gap: calc(0.25rem * 3); + padding-block: calc(0.25rem * 1); + } + .mask { + display: inline-block; + vertical-align: middle; + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + } + .block { + display: block; + } + .contents { + display: contents; + } + .flex { + display: flex; + } + .grid { + display: grid; + } + .hidden { + display: none; + } + .inline { + display: inline; + } + .inline-block { + display: inline-block; + } + .inline-flex { + display: inline-flex; + } + .inline-grid { + display: inline-grid; + } + .list-item { + display: list-item; + } + .table { + display: table; + } + .btn-square { + padding-inline: calc(0.25rem * 0); + width: var(--size); + height: var(--size); + } + .size-5 { + width: calc(var(--spacing) * 5); + height: calc(var(--spacing) * 5); + } + .size-6 { + width: calc(var(--spacing) * 6); + height: calc(var(--spacing) * 6); + } + .size-10 { + width: calc(var(--spacing) * 10); + height: calc(var(--spacing) * 10); + } + .h-1 { + height: calc(var(--spacing) * 1); + } + .h-3 { + height: calc(var(--spacing) * 3); + } + .h-5 { + height: calc(var(--spacing) * 5); + } + .h-24 { + height: calc(var(--spacing) * 24); + } + .h-32 { + height: calc(var(--spacing) * 32); + } + .h-64 { + height: calc(var(--spacing) * 64); + } + .h-96 { + height: calc(var(--spacing) * 96); + } + .h-\[calc\(100vh-65px\)\] { + height: calc(100vh - 65px); + } + .h-\[calc\(100vh-175px\)\] { + height: calc(100vh - 175px); + } + .max-h-\[calc\(100vh-65px\)\] { + max-height: calc(100vh - 65px); + } + .min-h-\[100dvh\] { + min-height: 100dvh; + } + .min-h-screen { + min-height: 100vh; + } + .loading-sm { + width: calc(var(--size-selector, 0.25rem) * 5); + } + .loading-xs { + width: calc(var(--size-selector, 0.25rem) * 4); + } + .w-3 { + width: calc(var(--spacing) * 3); + } + .w-5 { + width: calc(var(--spacing) * 5); + } + .w-32 { + width: calc(var(--spacing) * 32); + } + .w-72 { + width: calc(var(--spacing) * 72); + } + .w-full { + width: 100%; + } + .\!max-w-none { + max-width: none !important; + } + .max-w-\(--breakpoint-sm\) { + max-width: var(--breakpoint-sm); + } + .max-w-3xl { + max-width: var(--container-3xl); + } + .max-w-\[20ch\] { + max-width: 20ch; + } + .max-w-\[90\%\] { + max-width: 90%; + } + .max-w-\[160px\] { + max-width: 160px; + } + .max-w-full { + max-width: 100%; + } + .max-w-xs { + max-width: var(--container-xs); + } + .min-w-72 { + min-width: calc(var(--spacing) * 72); + } + .flex-1 { + flex: 1; + } + .flex-shrink { + flex-shrink: 1; + } + .flex-shrink-0 { + flex-shrink: 0; + } + .shrink { + flex-shrink: 1; + } + .flex-grow { + flex-grow: 1; + } + .grow { + flex-grow: 1; + } + .border-collapse { + border-collapse: collapse; + } + .scale-75 { + --tw-scale-x: 75%; + --tw-scale-y: 75%; + --tw-scale-z: 75%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + .rotate-180 { + rotate: 180deg; + } + .swap-rotate { + .swap-on, .swap-indeterminate, input:indeterminate ~ .swap-on { + rotate: 45deg; + } + input:checked, input:indeterminate { + & ~ .swap-on { + rotate: 0deg; + } + & ~ .swap-off { + rotate: calc(45deg * -1); + } + } + &:where(.swap-active) { + & ~ .swap-on { + rotate: 0deg; + } + .swap-off { + rotate: calc(45deg * -1); + } + } + } + .transform { + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } + .skeleton { + border-radius: var(--radius-box); + background-color: var(--color-base-300); + @media (prefers-reduced-motion: reduce) { + transition-duration: 15s; + } + will-change: background-position; + animation: skeleton 1.8s ease-in-out infinite; + background-image: linear-gradient( 105deg, transparent 0% 40%, var(--color-base-100) 50%, transparent 60% 100% ); + background-size: 200% auto; + background-repeat: no-repeat; + background-position-x: -50%; + } + .animate-pulse { + animation: var(--animate-pulse); + } + .link { + cursor: pointer; + text-decoration-line: underline; + &:focus { + outline: 2px solid transparent; + outline-offset: 2px; + } + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; + } + } + .cursor-pointer { + cursor: pointer; + } + .resize { + resize: both; + } + .resize-none { + resize: none; + } + .stats-vertical { + grid-auto-flow: row; + overflow-y: auto; + .stat:not(:last-child) { + border-inline-end: none; + border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, transparent); + } + } + .grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .flex-col { + flex-direction: column; + } + .flex-wrap { + flex-wrap: wrap; + } + .items-center { + align-items: center; + } + .justify-between { + justify-content: space-between; + } + .justify-center { + justify-content: center; + } + .justify-end { + justify-content: flex-end; + } + .justify-start { + justify-content: flex-start; + } + .gap-1 { + gap: calc(var(--spacing) * 1); + } + .gap-2 { + gap: calc(var(--spacing) * 2); + } + .gap-4 { + gap: calc(var(--spacing) * 4); + } + .gap-6 { + gap: calc(var(--spacing) * 6); + } + .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-4 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-6 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-8 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-x-2 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-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; + white-space: nowrap; + } + .overflow-auto { + overflow: auto; + } + .overflow-clip { + overflow: clip; + } + .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-t-none { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .rounded-b-none { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + .border { + border-style: var(--tw-border-style); + border-width: 1px; + } + .textarea-ghost { + background-color: transparent; + box-shadow: none; + border-color: transparent; + &:focus, &:focus-within { + background-color: var(--color-base-100); + color: var(--color-base-content); + border-color: transparent; + box-shadow: none; + } + } + .alert-success { + border-color: var(--color-success); + color: var(--color-success-content); + --alert-color: var(--color-success); + } + .border-base-content { + border-color: var(--color-base-content); + } + .border-base-content\/5 { + border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); + } + .border-neutral-700 { + border-color: var(--color-neutral-700); + } + .bg-accent { + background-color: var(--color-accent); + } + .bg-base-100 { + background-color: var(--color-base-100); + } + .bg-base-200 { + background-color: var(--color-base-200); + } + .bg-neutral-800 { + background-color: var(--color-neutral-800); + } + .bg-secondary { + background-color: var(--color-secondary); + } + .bg-white { + background-color: var(--color-white); + } + .bg-linear-to-r { + --tw-gradient-position: to right in oklab,; + background-image: linear-gradient(var(--tw-gradient-stops)); + } + .from-primary { + --tw-gradient-from: var(--color-primary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .to-secondary { + --tw-gradient-to: var(--color-secondary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .bg-clip-text { + background-clip: text; + } + .fill-current { + fill: currentColor; + } + .\!p-0 { + padding: calc(var(--spacing) * 0) !important; + } + .p-0 { + padding: calc(var(--spacing) * 0); + } + .p-0\.5 { + padding: calc(var(--spacing) * 0.5); + } + .p-2 { + padding: calc(var(--spacing) * 2); + } + .p-3 { + padding: calc(var(--spacing) * 3); + } + .p-4 { + padding: calc(var(--spacing) * 4); + } + .menu-title { + padding-inline: calc(0.25rem * 3); + padding-block: calc(0.25rem * 2); + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + font-size: 0.875rem; + font-weight: 600; + } + .badge-xs { + --size: calc(var(--size-selector, 0.25rem) * 4); + font-size: 0.625rem; + padding-inline: calc(0.25rem * 2 - var(--border)); + } + .container { + padding-inline: 10px; + @media (width >= 40rem) { + padding-inline: 2rem; + } + @media (width >= 64rem) { + padding-inline: 4rem; + } + @media (width >= 80rem) { + padding-inline: 5rem; + } + @media (width >= 96rem) { + padding-inline: 6rem; + } + } + .px-1 { + padding-inline: calc(var(--spacing) * 1); + } + .px-4 { + padding-inline: calc(var(--spacing) * 4); + } + .py-4 { + padding-block: calc(var(--spacing) * 4); + } + .pt-10 { + padding-top: calc(var(--spacing) * 10); + } + .pr-3 { + padding-right: calc(var(--spacing) * 3); + } + .pr-8 { + padding-right: calc(var(--spacing) * 8); + } + .pr-12 { + padding-right: calc(var(--spacing) * 12); + } + .pb-0 { + padding-bottom: calc(var(--spacing) * 0); + } + .pb-10 { + padding-bottom: calc(var(--spacing) * 10); + } + .pl-3 { + padding-left: calc(var(--spacing) * 3); + } + .text-center { + text-align: center; + } + .text-left { + text-align: left; + } + .font-mono { + font-family: var(--font-mono); + } + .font-satoshi { + font-family: Satoshi, sans-serif; + } + .text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + .text-3xl { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + } + .text-4xl { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + } + .text-5xl { + font-size: var(--text-5xl); + line-height: var(--tw-leading, var(--text-5xl--line-height)); + } + .text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + .text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } + .btn-lg { + font-size: 1.125rem; + --btn-p: 1.25rem; + --size: calc(var(--size-field, 0.25rem) * 12); + } + .btn-sm { + font-size: 0.75rem; + --btn-p: 0.75rem; + --size: calc(var(--size-field, 0.25rem) * 8); + } + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } + .font-extrabold { + --tw-font-weight: var(--font-weight-extrabold); + font-weight: var(--font-weight-extrabold); + } + .font-light { + --tw-font-weight: var(--font-weight-light); + font-weight: var(--font-weight-light); + } + .font-semibold { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } + .tracking-wide { + --tw-tracking: var(--tracking-wide); + letter-spacing: var(--tracking-wide); + } + .text-wrap { + text-wrap: wrap; + } + .break-words { + overflow-wrap: break-word; + } + .whitespace-pre-wrap { + white-space: pre-wrap; + } + .badge-neutral { + --badge-color: var(--color-neutral); + color: var(--color-neutral-content); + } + .badge-primary { + --badge-color: var(--color-primary); + color: var(--color-primary-content); + } + .link-primary { + color: var(--color-primary); + &:hover { + color: color-mix(in oklab, var(--color-primary) 80%, black); + } + } + .text-accent { + color: var(--color-accent); + } + .text-accent-content { + color: var(--color-accent-content); + } + .text-base-content { + color: var(--color-base-content); + } + .text-base-content\/60 { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + .text-blue-500 { + color: var(--color-blue-500); + } + .text-error { + color: var(--color-error); + } + .text-gray-500 { + color: var(--color-gray-500); + } + .text-primary { + color: var(--color-primary); + } + .text-primary-content { + color: var(--color-primary-content); + } + .text-secondary { + color: var(--color-secondary); + } + .text-secondary-content { + color: var(--color-secondary-content); + } + .text-transparent { + color: transparent; + } + .text-white { + color: var(--color-white); + } + .lowercase { + text-transform: lowercase; + } + .uppercase { + text-transform: uppercase; + } + .italic { + font-style: italic; + } + .ordinal { + --tw-ordinal: ordinal; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .btn-link { + text-decoration-line: underline; + outline-color: currentColor; + --btn-border: transparent; + --btn-bg: transparent; + --btn-fg: var(--color-primary); + --btn-noise: none; + --btn-shadow: ""; + &:is(.btn-active, :hover, :active:focus, :focus-visible) { + text-decoration-line: underline; + --btn-border: transparent; + --btn-bg: transparent; + } + } + .underline { + text-decoration-line: underline; + } + .opacity-50 { + opacity: 50%; + } + .opacity-60 { + opacity: 60%; + } + .opacity-70 { + opacity: 70%; + } + .swap-active { + .swap-off { + opacity: 0%; + } + .swap-on { + opacity: 100%; + } + } + .shadow { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-lg { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-md { + --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } + .btn-ghost { + &:not(.btn-active, :hover, :active:focus, :focus-visible) { + --btn-shadow: ""; + --btn-bg: transparent; + --btn-border: transparent; + --btn-noise: none; + &:not(:disabled, [disabled], .btn-disabled) { + outline-color: currentColor; + --btn-fg: currentColor; + } + } + } + .filter { + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .backdrop-filter { + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + } + .transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-transform { + transition-property: transform, translate, scale, rotate; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .ease-in { + --tw-ease: var(--ease-in); + transition-timing-function: var(--ease-in); + } + .ease-in-out { + --tw-ease: var(--ease-in-out); + transition-timing-function: var(--ease-in-out); + } + .ease-out { + --tw-ease: var(--ease-out); + transition-timing-function: var(--ease-out); + } + .btn-accent { + --btn-color: var(--color-accent); + --btn-fg: var(--color-accent-content); + } + .btn-error { + --btn-color: var(--color-error); + --btn-fg: var(--color-error-content); + } + .btn-outline { + &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) { + --btn-shadow: ""; + --btn-bg: transparent; + --btn-fg: var(--btn-color); + --btn-border: var(--btn-color); + --btn-noise: none; + } + } + .btn-primary { + --btn-color: var(--color-primary); + --btn-fg: var(--color-primary-content); + } + .btn-secondary { + --btn-color: var(--color-secondary); + --btn-fg: var(--color-secondary-content); + } + .loading-dots { + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E"); + } + .loading-spinner { + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); + } + .prose { + :root & { + --tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, transparent); + --tw-prose-headings: var(--color-base-content); + --tw-prose-lead: var(--color-base-content); + --tw-prose-links: var(--color-base-content); + --tw-prose-bold: var(--color-base-content); + --tw-prose-counters: var(--color-base-content); + --tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, transparent); + --tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, transparent); + --tw-prose-quotes: var(--color-base-content); + --tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, transparent); + --tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, transparent); + --tw-prose-code: var(--color-base-content); + --tw-prose-pre-code: var(--color-neutral-content); + --tw-prose-pre-bg: var(--color-neutral); + --tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, transparent); + --tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + .hover\:text-blue-700 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-700); + } + } + } + .hover\:text-gray-700 { + &:hover { + @media (hover: hover) { + color: var(--color-gray-700); + } + } + } + .hover\:underline { + &:hover { + @media (hover: hover) { + text-decoration-line: underline; + } + } + } + .focus\:outline-none { + &:focus { + --tw-outline-style: none; + outline-style: none; + } + } + .sm\:col-span-2 { + @media (width >= 40rem) { + grid-column: span 2 / span 2; + } + } + .sm\:mt-4 { + @media (width >= 40rem) { + margin-top: calc(var(--spacing) * 4); + } + } + .sm\:max-w-md { + @media (width >= 40rem) { + max-width: var(--container-md); + } + } + .sm\:grid-cols-2 { + @media (width >= 40rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + .sm\:flex-row { + @media (width >= 40rem) { + flex-direction: row; + } + } + .sm\:rounded-b-2xl { + @media (width >= 40rem) { + border-bottom-right-radius: var(--radius-2xl); + border-bottom-left-radius: var(--radius-2xl); + } + } + .sm\:px-0 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 0); + } + } + .sm\:pb-4 { + @media (width >= 40rem) { + padding-bottom: calc(var(--spacing) * 4); + } + } + .sm\:text-6xl { + @media (width >= 40rem) { + font-size: var(--text-6xl); + line-height: var(--tw-leading, var(--text-6xl--line-height)); + } + } + .md\:prose-base { + @media (width >= 48rem) { + font-size: 1rem; + line-height: 1.75; + :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-inline-start: 1em; + } + :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; + } + :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + border-radius: 0.3125rem; + padding-top: 0.1875em; + padding-inline-end: 0.375em; + padding-bottom: 0.1875em; + padding-inline-start: 0.375em; + } + :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + } + :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + } + :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.9em; + } + :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-inline-end: 1.1428571em; + padding-bottom: 0.8571429em; + padding-inline-start: 1.1428571em; + } + :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-inline-start: 1.625em; + } + :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-inline-start: 1.625em; + } + :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0.375em; + } + :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0.375em; + } + :where(.prose-base > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + :where(.prose-base > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + } + :where(.prose-base > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 1.25em; + } + :where(.prose-base > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + } + :where(.prose-base > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 1.25em; + } + :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 1.25em; + } + :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0.5em; + padding-inline-start: 1.625em; + } + :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 3em; + margin-bottom: 3em; + } + :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + line-height: 1.7142857; + } + :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-end: 0.5714286em; + padding-bottom: 0.5714286em; + padding-inline-start: 0.5714286em; + } + :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0; + } + :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-end: 0; + } + :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-top: 0.5714286em; + padding-inline-end: 0.5714286em; + padding-bottom: 0.5714286em; + padding-inline-start: 0.5714286em; + } + :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-start: 0; + } + :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + padding-inline-end: 0; + } + :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; + } + :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + :where(.prose-base > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-top: 0; + } + :where(.prose-base > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { + margin-bottom: 0; + } + } + } + .md\:grid-cols-2 { + @media (width >= 48rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + .md\:grid-cols-3 { + @media (width >= 48rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + .lg\:stats-horizontal { + @media (width >= 64rem) { + grid-auto-flow: column; + overflow-x: auto; + .stat:not(:last-child) { + border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, transparent); + border-block-end: none; + } + } + } + .lg\:grid-cols-3 { + @media (width >= 64rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + .lg\:grid-cols-\[auto_1fr\] { + @media (width >= 64rem) { + grid-template-columns: auto 1fr; + } + } + .xl\:drawer-open { + @media (width >= 80rem) { + > .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; + } + } + } + } + .xl\:hidden { + @media (width >= 80rem) { + display: none; + } + } + .prose-h1\:mb-2 { + & :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) { + margin-bottom: calc(var(--spacing) * 2); + } + } + .prose-h2\:my-2 { + & :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) { + margin-block: calc(var(--spacing) * 2); + } + } + .prose-p\:my-2 { + & :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) { + margin-block: calc(var(--spacing) * 2); + } + } + .prose-pre\:my-2 { + & :is(:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *))) { + margin-block: calc(var(--spacing) * 2); + } + } + .prose-ul\:my-2 { + & :is(:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *))) { + margin-block: calc(var(--spacing) * 2); + } + } + .\[\&\:before\]\:opacity-60 { + &:before { + opacity: 60%; + } + } + .\[\&\:before\]\:content-\[\'Content\:_\'\] { + &:before { + --tw-content: 'Content: '; + content: var(--tw-content); + } + } + .\[\&\:before\]\:content-\[\'Instructions\:_\'\] { + &:before { + --tw-content: 'Instructions: '; + content: var(--tw-content); + } + } + .\[\&\:before\]\:content-\[\'Status\:_\'\] { + &:before { + --tw-content: 'Status: '; + content: var(--tw-content); + } + } +} +@view-transition { + navigation: auto; +} +@layer base { + body { + font-family: Satoshi, sans-serif; + } + html { + scrollbar-gutter: stable; + } + *, ::after, ::before, ::backdrop, ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } +} +@font-face { + font-family: 'Satoshi'; + src: url('fonts/Satoshi-Variable.woff2') format('woff2'), url('fonts/Satoshi-Variable.woff') format('woff'), url('fonts/Satoshi-Variable.ttf') format('truetype'); + font-weight: 300 900; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Satoshi'; + src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2'), url('fonts/Satoshi-VariableItalic.woff') format('woff'), url('fonts/Satoshi-VariableItalic.ttf') format('truetype'); + font-weight: 300 900; + font-style: italic; + font-display: swap; +} +@layer base { + :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] { + color-scheme: light; + --color-base-100: oklch(100% 0 0); + --color-base-200: oklch(98% 0 0); + --color-base-300: oklch(95% 0 0); + --color-base-content: oklch(21% 0.006 285.885); + --color-primary: oklch(45% 0.24 277.023); + --color-primary-content: oklch(93% 0.034 272.788); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } +} +@layer base { + @media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --color-base-100: oklch(25.33% 0.016 252.42); + --color-base-200: oklch(23.26% 0.014 253.1); + --color-base-300: oklch(21.15% 0.012 254.09); + --color-base-content: oklch(97.807% 0.029 256.847); + --color-primary: oklch(58% 0.233 277.117); + --color-primary-content: oklch(96% 0.018 272.314); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } + } +} +@layer base { + :root:has(input.theme-controller[value=light]:checked),[data-theme=light] { + color-scheme: light; + --color-base-100: oklch(100% 0 0); + --color-base-200: oklch(98% 0 0); + --color-base-300: oklch(95% 0 0); + --color-base-content: oklch(21% 0.006 285.885); + --color-primary: oklch(45% 0.24 277.023); + --color-primary-content: oklch(93% 0.034 272.788); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } +} +@layer base { + :root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] { + color-scheme: dark; + --color-base-100: oklch(25.33% 0.016 252.42); + --color-base-200: oklch(23.26% 0.014 253.1); + --color-base-300: oklch(21.15% 0.012 254.09); + --color-base-content: oklch(97.807% 0.029 256.847); + --color-primary: oklch(58% 0.233 277.117); + --color-primary-content: oklch(96% 0.018 272.314); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } +} +@layer base { + :root, +[data-theme] { + background-color: var(--root-bg, var(--color-base-100)); + color: var(--color-base-content); + } +} +@layer base { + *, +::after, +::backdrop, +::before, +::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + :host, +html { + line-height: 1.5; + font-family: var( + --default-font-family, + ui-sans-serif, + system-ui, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji" + ); + webkit-tap-highlight-color: transparent; + } + body { + line-height: inherit; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + webkit-text-decoration: inherit; + text-decoration: inherit; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + ::file-selector-button, +button, +input, +optgroup, +select, +textarea { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + background: 0 0; + } + input:where(:not([type="button"], [type="reset"], [type="submit"])), +select, +textarea { + border-width: 1px; + } + ::file-selector-button, +button, +input:where([type="button"], [type="reset"], [type="submit"]) { + appearance: button; + } + :-moz-focusring { + outline: auto; + } + :-moz-ui-invalid { + box-shadow: none; + } + ::-webkit-search-decoration { + webkit-appearance: none; + } + menu, +ol, +ul { + list-style: none; + } + textarea { + resize: vertical; + } + ::placeholder { + opacity: 1; + color: color-mix(in oklch, currentColor 50%, transparent); + } + audio, +canvas, +embed, +iframe, +img, +object, +svg, +video { + display: block; + vertical-align: middle; + } + img, +video { + max-width: 100%; + height: auto; + } +} +@layer base { + :where( + :root:has( + .modal-open, + .modal[open], + .modal:target, + .modal-toggle:checked, + .drawer:not(.drawer-open) > .drawer-toggle:checked + ) +) { + scrollbar-gutter: stable; + background-image: linear-gradient(var(--color-base-100), var(--color-base-100)); + --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%); + } +} +@layer base { + @property --radialprogress { + syntax: ""; + inherits: true; + initial-value: 0%; + } +} +@layer base { + :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) { + overflow: hidden; + } +} +@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; + } +} +@supports (-moz-orient: inline) { + @layer base { + *, ::before, ::after, ::backdrop { + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + --tw-rotate-x: rotateX(0); + --tw-rotate-y: rotateY(0); + --tw-rotate-z: rotateZ(0); + --tw-skew-x: skewX(0); + --tw-skew-y: skewY(0); + --tw-space-y-reverse: 0; + --tw-space-x-reverse: 0; + --tw-border-style: solid; + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-font-weight: initial; + --tw-tracking: initial; + --tw-ordinal: initial; + --tw-slashed-zero: initial; + --tw-numeric-figure: initial; + --tw-numeric-spacing: initial; + --tw-numeric-fraction: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-outline-style: solid; + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-backdrop-blur: initial; + --tw-backdrop-brightness: initial; + --tw-backdrop-contrast: initial; + --tw-backdrop-grayscale: initial; + --tw-backdrop-hue-rotate: initial; + --tw-backdrop-invert: initial; + --tw-backdrop-opacity: initial; + --tw-backdrop-saturate: initial; + --tw-backdrop-sepia: initial; + --tw-ease: initial; + --tw-content: ""; + } + } +} +@keyframes spin { + to { + transform: rotate(360deg); + } +} +@keyframes ping { + 75%, 100% { + transform: scale(2); + opacity: 0; + } +} +@keyframes pulse { + 50% { + opacity: 0.5; + } +} +@keyframes bounce { + 0%, 100% { + transform: translateY(-25%); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 50% { + transform: none; + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } +} +@property --tw-scale-x { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-scale-y { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-scale-z { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-rotate-x { + syntax: "*"; + inherits: false; + initial-value: rotateX(0); +} +@property --tw-rotate-y { + syntax: "*"; + inherits: false; + initial-value: rotateY(0); +} +@property --tw-rotate-z { + syntax: "*"; + inherits: false; + initial-value: rotateZ(0); +} +@property --tw-skew-x { + syntax: "*"; + inherits: false; + initial-value: skewX(0); +} +@property --tw-skew-y { + syntax: "*"; + inherits: false; + initial-value: skewY(0); +} +@property --tw-space-y-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-space-x-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-gradient-position { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-from { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-via { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-to { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-stops { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-via-stops { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-from-position { + syntax: ""; + inherits: false; + initial-value: 0%; +} +@property --tw-gradient-via-position { + syntax: ""; + inherits: false; + initial-value: 50%; +} +@property --tw-gradient-to-position { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-font-weight { + syntax: "*"; + inherits: false; +} +@property --tw-tracking { + syntax: "*"; + inherits: false; +} +@property --tw-ordinal { + syntax: "*"; + inherits: false; +} +@property --tw-slashed-zero { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-figure { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-spacing { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-fraction { + syntax: "*"; + inherits: false; +} +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-blur { + syntax: "*"; + inherits: false; +} +@property --tw-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-invert { + syntax: "*"; + inherits: false; +} +@property --tw-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-blur { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-invert { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-ease { + syntax: "*"; + inherits: false; +} +@property --tw-content { + syntax: "*"; + inherits: false; + initial-value: ""; +} diff --git a/assets/theme-toggle.js b/crates/html-router/assets/theme-toggle.js similarity index 100% rename from assets/theme-toggle.js rename to crates/html-router/assets/theme-toggle.js diff --git a/crates/html-router/src/html_state.rs b/crates/html-router/src/html_state.rs index 6cd5904..a57f580 100644 --- a/crates/html-router/src/html_state.rs +++ b/crates/html-router/src/html_state.rs @@ -1,48 +1,43 @@ -use axum_session::SessionStore; -use axum_session_surreal::SessionSurrealPool; -use common::create_template_engine; use common::storage::db::SurrealDbClient; -use common::utils::config::AppConfig; -use common::utils::template_engine::TemplateEngine; +use common::utils::template_engine::{ProvidesTemplateEngine, TemplateEngine}; +use common::{create_template_engine, storage::db::ProvidesDb}; use std::sync::Arc; -use surrealdb::engine::any::Any; +use tracing::debug; + +use crate::{OpenAIClientType, SessionStoreType}; #[derive(Clone)] pub struct HtmlState { pub db: Arc, - pub openai_client: Arc>, + pub openai_client: Arc, pub templates: Arc, - pub session_store: Arc>>, + pub session_store: Arc, } impl HtmlState { - pub async fn new(config: &AppConfig) -> Result> { + pub fn new_with_resources( + db: Arc, + openai_client: Arc, + session_store: Arc, + ) -> Result> { let template_engine = create_template_engine!("templates"); + debug!("Template engine created for html_router."); - let surreal_db_client = Arc::new( - SurrealDbClient::new( - &config.surrealdb_address, - &config.surrealdb_username, - &config.surrealdb_password, - &config.surrealdb_namespace, - &config.surrealdb_database, - ) - .await?, - ); - - surreal_db_client.ensure_initialized().await?; - - let openai_client = Arc::new(async_openai::Client::new()); - - let session_store = Arc::new(surreal_db_client.create_session_store().await?); - - let app_state = HtmlState { - db: surreal_db_client.clone(), - templates: Arc::new(template_engine), - openai_client: openai_client.clone(), + Ok(Self { + db, + openai_client, session_store, - }; - - Ok(app_state) + templates: Arc::new(template_engine), + }) + } +} +impl ProvidesDb for HtmlState { + fn db(&self) -> &Arc { + &self.db + } +} +impl ProvidesTemplateEngine for HtmlState { + fn template_engine(&self) -> &Arc { + &self.templates } } diff --git a/crates/html-router/src/lib.rs b/crates/html-router/src/lib.rs index 7a30aa8..623d692 100644 --- a/crates/html-router/src/lib.rs +++ b/crates/html-router/src/lib.rs @@ -4,7 +4,7 @@ pub mod router_factory; pub mod routes; use axum::{extract::FromRef, Router}; -use axum_session::Session; +use axum_session::{Session, SessionStore}; use axum_session_auth::AuthSession; use axum_session_surreal::SessionSurrealPool; use common::storage::types::user::User; @@ -14,6 +14,8 @@ use surrealdb::{engine::any::Any, Surreal}; pub type AuthSessionType = AuthSession, Surreal>; pub type SessionType = Session>; +pub type SessionStoreType = SessionStore>; +pub type OpenAIClientType = async_openai::Client; /// Html routes pub fn html_routes(app_state: &HtmlState) -> Router diff --git a/crates/html-router/src/middlewares/analytics_middleware.rs b/crates/html-router/src/middlewares/analytics_middleware.rs index 4337404..084ff51 100644 --- a/crates/html-router/src/middlewares/analytics_middleware.rs +++ b/crates/html-router/src/middlewares/analytics_middleware.rs @@ -3,31 +3,28 @@ use axum::{ middleware::Next, response::Response, }; -use axum_session_surreal::SessionSurrealPool; -use surrealdb::engine::any::Any; -use common::storage::types::analytics::Analytics; +use common::storage::{db::ProvidesDb, types::analytics::Analytics}; -use crate::html_state::HtmlState; +use crate::SessionType; -pub async fn analytics_middleware( - State(state): State, - session: axum_session::Session>, +/// Middleware to count unique visitors and page loads +pub async fn analytics_middleware( + State(state): State, + session: SessionType, request: Request, next: Next, -) -> Response { - // Get the path from the request +) -> Response +where + S: ProvidesDb + Clone + Send + Sync + 'static, +{ let path = request.uri().path(); - - // Only count if it's a main page request (not assets or other resources) - if !path.starts_with("/assets") && !path.starts_with("/_next") && !path.contains('.') { + if !path.starts_with("/assets") && !path.contains('.') { if !session.get::("counted_visitor").unwrap_or(false) { - let _ = Analytics::increment_visitors(&state.db).await; + let _ = Analytics::increment_visitors(state.db()).await; session.set("counted_visitor", true); } - - let _ = Analytics::increment_page_loads(&state.db).await; + let _ = Analytics::increment_page_loads(state.db()).await; } - next.run(request).await } diff --git a/crates/html-router/src/middlewares/response_middleware.rs b/crates/html-router/src/middlewares/response_middleware.rs index 8651394..630b3d4 100644 --- a/crates/html-router/src/middlewares/response_middleware.rs +++ b/crates/html-router/src/middlewares/response_middleware.rs @@ -1,11 +1,10 @@ -use crate::html_state::HtmlState; use axum::{ extract::State, http::StatusCode, response::{Html, IntoResponse, Response}, Extension, }; -use common::error::AppError; +use common::{error::AppError, utils::template_engine::ProvidesTemplateEngine}; use minijinja::{context, Value}; use serde::Serialize; use tracing::error; @@ -106,58 +105,45 @@ impl IntoResponse for TemplateResponse { } } -struct TemplateStateWrapper { - state: HtmlState, - template_response: TemplateResponse, -} +pub async fn with_template_response(State(state): State, response: Response) -> Response +where + S: ProvidesTemplateEngine + Clone + Send + Sync + 'static, +{ + if let Some(template_response) = response.extensions().get::().cloned() { + let template_engine = state.template_engine(); -impl IntoResponse for TemplateStateWrapper { - fn into_response(self) -> Response { - let template_engine = &self.state.templates; - - match &self.template_response.template_kind { + match &template_response.template_kind { TemplateKind::Full(name) => { - match template_engine.render(name, &self.template_response.context) { + match template_engine.render(name, &template_response.context) { Ok(html) => Html(html).into_response(), Err(e) => { - error!("Failed to render template: {:?}", e); + error!("Failed to render template '{}': {:?}", name, e); (StatusCode::INTERNAL_SERVER_ERROR, fallback_error()).into_response() } } } TemplateKind::Partial(template, block) => { - match template_engine.render_block(template, block, &self.template_response.context) - { + match template_engine.render_block(template, block, &template_response.context) { Ok(html) => Html(html).into_response(), Err(e) => { - error!("Failed to render block: {:?}", e); + error!("Failed to render block '{}/{}': {:?}", template, block, e); (StatusCode::INTERNAL_SERVER_ERROR, fallback_error()).into_response() } } } TemplateKind::Error(status) => { - match template_engine.render("errors/error.html", &self.template_response.context) { + match template_engine.render("errors/error.html", &template_response.context) { Ok(html) => (*status, Html(html)).into_response(), - Err(_) => (*status, fallback_error()).into_response(), + Err(e) => { + error!("Failed to render error template: {:?}", e); + (*status, fallback_error()).into_response() + } } } TemplateKind::Redirect(path) => { (StatusCode::OK, [(axum_htmx::HX_REDIRECT, path.clone())], "").into_response() } } - } -} - -pub async fn with_template_response( - State(state): State, - response: Response, -) -> Response { - if let Some(template_response) = response.extensions().get::().cloned() { - TemplateStateWrapper { - state, - template_response, - } - .into_response() } else { response } diff --git a/crates/html-router/src/router_factory.rs b/crates/html-router/src/router_factory.rs index 9a8b258..6becb3d 100644 --- a/crates/html-router/src/router_factory.rs +++ b/crates/html-router/src/router_factory.rs @@ -8,7 +8,6 @@ use axum_session_auth::{AuthConfig, AuthSessionLayer}; use axum_session_surreal::SessionSurrealPool; use common::storage::types::user::User; use surrealdb::{engine::any::Any, Surreal}; -use tower_http::services::ServeDir; use crate::{ html_state::HtmlState, @@ -18,6 +17,27 @@ use crate::{ }, }; +#[macro_export] +macro_rules! create_asset_service { + // Takes the relative path to the asset directory + ($relative_path:expr) => {{ + #[cfg(debug_assertions)] + { + let crate_dir = std::path::PathBuf::from(env!("CARGO_MANIFEST_DIR")); + let assets_path = crate_dir.join($relative_path); + tracing::debug!("Assets: Serving from filesystem: {:?}", assets_path); + tower_http::services::ServeDir::new(assets_path) + } + #[cfg(not(debug_assertions))] + { + tracing::debug!("Assets: Serving embedded directory"); + static ASSETS_DIR: include_dir::Dir<'static> = + include_dir::include_dir!("$CARGO_MANIFEST_DIR/assets"); + tower_serve_static::ServeDir::new(&ASSETS_DIR) + } + }}; +} + pub struct RouterFactory { app_state: HtmlState, public_routers: Vec>, @@ -108,27 +128,35 @@ where } // Add public assets to public router - if let Some(assets) = self.public_assets_config { - public_router = - public_router.nest_service(&assets.path, ServeDir::new(assets.directory)); + if let Some(assets_config) = self.public_assets_config { + // Call the macro using the stored relative directory path + let asset_service = create_asset_service!(&assets_config.directory); + // Nest the resulting service under the stored URL path + public_router = public_router.nest_service(&assets_config.path, asset_service); } // Start with an empty protected router let mut protected_router = Router::new(); - // Merge all protected routers + // Check if there are any protected routers + let has_protected_routes = + !self.protected_routers.is_empty() || !self.nested_protected_routes.is_empty(); + + // Merge root-level protected routers for router in self.protected_routers { protected_router = protected_router.merge(router); } - // Add nested protected routes + // Nest protected routers for (path, router) in self.nested_protected_routes { protected_router = protected_router.nest(&path, router); } - // Apply auth middleware to all protected routes - let protected_router = - protected_router.route_layer(from_fn_with_state(self.app_state.clone(), require_auth)); + // Apply auth middleware + if has_protected_routes { + protected_router = protected_router + .route_layer(from_fn_with_state(self.app_state.clone(), require_auth)); + } // Combine public and protected routes let mut router = Router::new().merge(public_router).merge(protected_router); @@ -142,11 +170,11 @@ where router .layer(from_fn_with_state( self.app_state.clone(), - analytics_middleware, + analytics_middleware::, )) .layer(map_response_with_state( self.app_state.clone(), - with_template_response, + with_template_response::, )) .layer( AuthSessionLayer::, Surreal>::new(Some( diff --git a/crates/html-router/templates/documentation/base.html b/crates/html-router/templates/documentation/base.html deleted file mode 100644 index 8359f7f..0000000 --- a/crates/html-router/templates/documentation/base.html +++ /dev/null @@ -1,20 +0,0 @@ -{% extends "body_base.html" %} -{% block main %} -
-
-
- - - - -
- {% block article %} - {% endblock %} -
-
-
-
-{% endblock %} \ No newline at end of file diff --git a/crates/html-router/templates/documentation/get_started.html b/crates/html-router/templates/documentation/get_started.html deleted file mode 100644 index 1effca0..0000000 --- a/crates/html-router/templates/documentation/get_started.html +++ /dev/null @@ -1,58 +0,0 @@ -{% extends 'documentation/base.html' %} -{% block article %} -

Get Started with Minne

-

Minne offers two installation options to suit your needs:

-
    -
  1. - Hosted Version: Enjoy a hassle‐free experience by signing up for the ready‐to‐use service. - Simply navigate to /signup to create an account. -
    2. -
  2. - Self-Hosted: Gain full control by running Minne on your own infrastructure. Visit - GitHub to download the latest release. After extracting the - release, open the config.yaml file and set the following configurations: -
    3. -
-
-  
-    OPENAI_API_KEY: your_api_key
-    DB_ADDRESS: your_db_address
-    DB_USER: your_db_user
-    DB_PASSWORD: your_db_password
-  
-
-

The database settings relate to a running instance of SurrealDB. You can opt for their cloud solution or run your - own instance.

- -

Once your configuration is complete, start both the server and the worker. They can be hosted on separate - machines, with different resource requirements:

-
    -
  • - Server: Lightweight. A minimum of 1 core and 256MB of RAM is recommended. -
    • -
  • - Worker: Handles content parsing and creation of database entities. It's recommended to allocate at - least two cores and 1024 MB RAM. It will run on less but might run into constraints depending on the content being - parsed. -
    • -
- -

After launching the services, navigate to <your_url>:3000/signup to register. The first - account created will automatically receive admin permissions, allowing you to later disable further registrations - via the /admin page if desired.

- -

From the homepage (/), you can:

- -
    -
  • Submit content, including files, videos, and URLs for ingestion.
    • -
  • Monitor job statuses and manage your existing content.
    • -
  • Search your content or start a chat conversation for assistance.
    • -
- -

Visit the /knowledge page to view your content organized by different sections. This page also - provides a visual demonstration of the graph database structure, enhancing your understanding of content - relationships.

- -

This streamlined setup ensures intuitive onboarding while offering robust customization options. Whether you are - a novice or an advanced user, Minne is designed to deliver a smooth experience and reliable performance.

-{% endblock %} \ No newline at end of file diff --git a/crates/html-router/templates/documentation/index.html b/crates/html-router/templates/documentation/index.html deleted file mode 100644 index 9ab27af..0000000 --- a/crates/html-router/templates/documentation/index.html +++ /dev/null @@ -1,26 +0,0 @@ -{% extends "documentation/base.html" %} -{% block article %} -

Documentation

-

- Personalised Knowledge Management (PKM) is a system designed to help individuals organise, store, and retrieve - information effectively. It empowers users to create a personalised workflow for managing knowledge, enabling - better decision-making and productivity. -

-

- This documentation will guide you through the core concepts, tools, and best practices for building and - maintaining your own PKM system. -

-
-
-

Getting Started

-

- To begin, explore the sections in the navigation menu. Each section provides detailed insights into - different - aspects of PKM, from foundational principles to advanced techniques. -

-
- Learn More -
-
-
-{% endblock %} \ No newline at end of file diff --git a/crates/html-router/templates/documentation/menu.html b/crates/html-router/templates/documentation/menu.html deleted file mode 100644 index b08dadc..0000000 --- a/crates/html-router/templates/documentation/menu.html +++ /dev/null @@ -1,28 +0,0 @@ - \ No newline at end of file diff --git a/crates/html-router/templates/documentation/mobile_friendly.html b/crates/html-router/templates/documentation/mobile_friendly.html deleted file mode 100644 index 7740e22..0000000 --- a/crates/html-router/templates/documentation/mobile_friendly.html +++ /dev/null @@ -1,20 +0,0 @@ -{% extends 'documentation/base.html' %} -{% block article %} -

Mobile Friendly Ingression: How to Submit Content from iOS to Minne

-

Minne is built with simplicity in mind. Whether you wish to save a file, capture a thought, or share a page, - submitting content is effortless. Our server provides API access that enables users to perform actions using a - personalized API key.

- -

An iOS shortcut has been developed to streamline the process of sending content. To begin, navigate to - /account and generate an API key. Once created, you will see an option to download the iOS shortcut. -

- -

After downloading the shortcut, update the "Get response from URL" authentication headers with your API key. If - you are self-hosting, ensure the URL is adjusted accordingly.

- -

The shortcut integrates seamlessly with iOS. When you "share with Minne," you will be prompted to provide - instructions to the AI and to either choose an existing category or create a new one for your submission.

- -

While an Android solution is in the works, for now you can add the web app to your home screen as a Progressive - Web App (PWA) for a similar mobile-friendly experience.

-{% endblock %} \ No newline at end of file diff --git a/crates/html-router/templates/documentation/privacy.html b/crates/html-router/templates/documentation/privacy.html deleted file mode 100644 index b2df045..0000000 --- a/crates/html-router/templates/documentation/privacy.html +++ /dev/null @@ -1,27 +0,0 @@ -{% extends 'documentation/base.html' %} -{% block article %} -

Privacy Policy

-

We value your privacy and are committed to protecting your personal information. This policy - outlines how we handle your data and ensures transparency in our practices.

- -

Data Collection

-

We only collect data that is necessary for the functionality of our services. Any data you upload to - our site remains your property and will not be shared with third parties unless required by law.

- -

Cookies

-

We do not use cookies for tracking or analytics. The cookies we employ are strictly for session - management, ensuring a smooth and secure user experience.

- -

No Unnecessary Data Extraction

-

We believe that unnecessary data extraction is unethical and a poor practice. We only collect the - minimum amount of data required to provide our services effectively, ensuring your privacy is respected at all - times.

- -

Your Rights

-

You have the right to access, modify, or delete your data at any time. If you have any concerns - about how your data is handled, please contact us.

- -

Changes to This Policy

-

We may update this privacy policy from time to time. Any changes will be posted on this page, and we - encourage you to review it periodically.

-{% endblock %} \ No newline at end of file diff --git a/crates/main/src/main.rs b/crates/main/src/main.rs index 9175cd2..a67e71a 100644 --- a/crates/main/src/main.rs +++ b/crates/main/src/main.rs @@ -21,8 +21,26 @@ async fn main() -> Result<(), Box> { // Get config let config = get_config()?; - // Set up server components - let html_state = HtmlState::new(&config).await?; + // Set up router states + let db = Arc::new( + SurrealDbClient::new( + &config.surrealdb_address, + &config.surrealdb_username, + &config.surrealdb_password, + &config.surrealdb_namespace, + &config.surrealdb_database, + ) + .await?, + ); + + // Ensure db is initialized + db.ensure_initialized().await?; + + let session_store = Arc::new(db.create_session_store().await?); + let openai_client = Arc::new(async_openai::Client::new()); + + let html_state = HtmlState::new_with_resources(db, openai_client, session_store)?; + let api_state = ApiState { db: html_state.db.clone(), }; diff --git a/crates/main/src/server.rs b/crates/main/src/server.rs index 2ebadbc..60116cd 100644 --- a/crates/main/src/server.rs +++ b/crates/main/src/server.rs @@ -1,6 +1,8 @@ +use std::sync::Arc; + use api_router::{api_routes_v1, api_state::ApiState}; use axum::{extract::FromRef, Router}; -use common::utils::config::get_config; +use common::{storage::db::SurrealDbClient, utils::config::get_config}; use html_router::{html_routes, html_state::HtmlState}; use tracing::info; use tracing_subscriber::{fmt, prelude::*, EnvFilter}; @@ -18,7 +20,25 @@ async fn main() -> Result<(), Box> { let config = get_config()?; // Set up router states - let html_state = HtmlState::new(&config).await?; + let db = Arc::new( + SurrealDbClient::new( + &config.surrealdb_address, + &config.surrealdb_username, + &config.surrealdb_password, + &config.surrealdb_namespace, + &config.surrealdb_database, + ) + .await?, + ); + + // Ensure db is initialized + db.ensure_initialized().await?; + + let session_store = Arc::new(db.create_session_store().await?); + let openai_client = Arc::new(async_openai::Client::new()); + + let html_state = HtmlState::new_with_resources(db, openai_client, session_store)?; + let api_state = ApiState { db: html_state.db.clone(), }; diff --git a/todo.md b/todo.md index 8c9b88b..b326416 100644 --- a/todo.md +++ b/todo.md @@ -2,7 +2,7 @@ \[\] configs primarily get envs \[\] filtering on categories \[\] integrate assets folder in release build -\[\] integrate templates in release build +\[x] integrate templates in release build \[\] markdown rendering in client \[\] openai api key in config \[\] three js graph explorer