diff --git a/Sources/App/Middleware/ViewRoute+middleware.swift b/Sources/App/Middleware/ViewRoute+middleware.swift index 44ae75c..4d5de5b 100644 --- a/Sources/App/Middleware/ViewRoute+middleware.swift +++ b/Sources/App/Middleware/ViewRoute+middleware.swift @@ -6,7 +6,9 @@ import Vapor private let viewRouteMiddleware: [any Middleware] = [ UserPasswordAuthenticator(), UserSessionAuthenticator(), - User.redirectMiddleware(path: "/login"), + User.redirectMiddleware { req in + "/login?next=\(req.url.string)" + }, ] extension SiteRoute.View { @@ -14,8 +16,7 @@ extension SiteRoute.View { switch self { case .project, .frictionRate, - .effectiveLength, - .room: + .effectiveLength: return viewRouteMiddleware case .login, .signup: return nil diff --git a/Sources/ManualDCore/Routes/ViewRoute.swift b/Sources/ManualDCore/Routes/ViewRoute.swift index 51e0914..a2832da 100644 --- a/Sources/ManualDCore/Routes/ViewRoute.swift +++ b/Sources/ManualDCore/Routes/ViewRoute.swift @@ -10,7 +10,6 @@ extension SiteRoute { case login(LoginRoute) case signup(SignupRoute) case project(ProjectRoute) - case room(RoomRoute) case frictionRate(FrictionRateRoute) case effectiveLength(EffectiveLengthRoute) // case user(UserRoute) @@ -25,9 +24,6 @@ extension SiteRoute { Route(.case(Self.project)) { SiteRoute.View.ProjectRoute.router } - Route(.case(Self.room)) { - SiteRoute.View.RoomRoute.router - } Route(.case(Self.frictionRate)) { SiteRoute.View.FrictionRateRoute.router } @@ -44,7 +40,7 @@ extension SiteRoute { extension SiteRoute.View { public enum ProjectRoute: Equatable, Sendable { case create(Project.Create) - case detail(Project.ID) + case detail(Project.ID, DetailRoute) case form(dismiss: Bool = false) case index case page(page: Int = 1, limit: Int = 25) @@ -71,7 +67,7 @@ extension SiteRoute.View { rootPath Project.ID.parser() } - Method.get + DetailRoute.router } Route(.case(Self.form)) { Path { @@ -102,24 +98,33 @@ extension SiteRoute.View { } } -extension SiteRoute.View { - public enum RoomRoute: Equatable, Sendable { - case form(Project.ID, dismiss: Bool = false) - case index(Project.ID) - case submit(Project.ID, Room.Form) +extension SiteRoute.View.ProjectRoute { - static let rootPath = Path { - ProjectRoute.rootPath - Project.ID.parser() - "rooms" + public enum DetailRoute: Equatable, Sendable { + case index + case rooms(RoomRoute) + + static let router = OneOf { + Route(.case(Self.index)) { + Method.get + } + Route(.case(Self.rooms)) { + RoomRoute.router + } } + } + + public enum RoomRoute: Equatable, Sendable { + case form(dismiss: Bool = false) + case index + case submit(Room.Form) + + static let rootPath = "rooms" public static let router = OneOf { Route(.case(Self.form)) { Path { - ProjectRoute.rootPath - Project.ID.parser() - "rooms" + rootPath "create" } Method.get @@ -128,11 +133,13 @@ extension SiteRoute.View { } } Route(.case(Self.index)) { - rootPath + Path { + rootPath + } Method.get } Route(.case(Self.submit)) { - rootPath + Path { rootPath } Method.post Body { FormData { @@ -241,7 +248,7 @@ extension SiteRoute.View.EffectiveLengthRoute { extension SiteRoute.View { public enum LoginRoute: Equatable, Sendable { - case index + case index(next: String? = nil) case submit(User.Login) static let rootPath = "login" @@ -250,6 +257,13 @@ extension SiteRoute.View { Route(.case(Self.index)) { Path { rootPath } Method.get + Query { + Optionally { + Field("next", default: nil) { + CharacterSet.urlPathAllowed.map(.string) + } + } + } } Route(.case(Self.submit)) { Path { rootPath } @@ -258,6 +272,11 @@ extension SiteRoute.View { FormData { Field("email", .string) Field("password", .string) + Optionally { + Field("next", default: nil) { + CharacterSet.urlPathAllowed.map(.string) + } + } } .map(.memberwise(User.Login.init)) } diff --git a/Sources/ManualDCore/User.swift b/Sources/ManualDCore/User.swift index bf73f23..20ca8fa 100644 --- a/Sources/ManualDCore/User.swift +++ b/Sources/ManualDCore/User.swift @@ -48,10 +48,12 @@ extension User { public struct Login: Codable, Equatable, Sendable { public let email: String public let password: String + public let next: String? - public init(email: String, password: String) { + public init(email: String, password: String, next: String? = nil) { self.email = email self.password = password + self.next = next } } diff --git a/Sources/ViewController/Live.swift b/Sources/ViewController/Live.swift index 4bea322..98b0705 100644 --- a/Sources/ViewController/Live.swift +++ b/Sources/ViewController/Live.swift @@ -13,15 +13,14 @@ extension ViewController.Request { switch route { case .login(let route): switch route { - case .index: + case .index(let next): return view { - LoginForm() + LoginForm(next: next) } case .submit(let login): - let user = try await authenticate(login) - let projects = try await database.projects.fetch(user.id, .init(page: 1, per: 25)) + let _ = try await authenticate(login) return view { - ProjectsTable(userID: user.id, projects: projects) + LoggedIn(next: login.next) } } case .signup(let route): @@ -40,8 +39,8 @@ extension ViewController.Request { } case .project(let route): return try await route.renderView(on: self) - case .room(let route): - return try await route.renderView(on: self) + // case .room(let route): + // return try await route.renderView(on: self) case .frictionRate(let route): return try await route.renderView(isHtmxRequest: isHtmxRequest) case .effectiveLength(let route): @@ -102,29 +101,40 @@ extension SiteRoute.View.ProjectRoute { } } - case .detail(let projectID): - let project = try await database.projects.get(projectID)! - return request.view { - ProjectView(projectID: projectID, activeTab: .projects) { - ProjectDetail(project: project) + case .detail(let projectID, let route): + switch route { + case .index: + let project = try await database.projects.get(projectID)! + return request.view { + ProjectView(projectID: projectID, activeTab: .projects) { + ProjectDetail(project: project) + } } + case .rooms(let route): + return try await route.renderView(on: request, projectID: projectID) } + // case .rooms(let projectID, let route): + // return try await route.renderView(on: request, projectID: projectID) + } } } -extension SiteRoute.View.RoomRoute { - func renderView(on request: ViewController.Request) async throws -> AnySendableHTML { +extension SiteRoute.View.ProjectRoute.RoomRoute { + func renderView( + on request: ViewController.Request, + projectID: Project.ID + ) async throws -> AnySendableHTML { @Dependency(\.database) var database switch self { - case .form(let projectID, let dismiss): + case .form(let dismiss): return RoomForm(dismiss: dismiss, projectID: projectID) - case .index(let projectID): + case .index: let rooms = try await database.rooms.fetch(projectID) return request.view { ProjectView(projectID: projectID, activeTab: .rooms) { @@ -132,7 +142,7 @@ extension SiteRoute.View.RoomRoute { } } - case .submit(let projectID, let form): + case .submit(let form): request.logger.debug("New room form submitted.") let _ = try await database.rooms.create(.init(form: form, projectID: projectID)) let rooms = try await database.rooms.fetch(projectID) diff --git a/Sources/ViewController/Views/MainPage.swift b/Sources/ViewController/Views/MainPage.swift index 5b14b48..a95b5d6 100644 --- a/Sources/ViewController/Views/MainPage.swift +++ b/Sources/ViewController/Views/MainPage.swift @@ -1,4 +1,7 @@ import Elementary +import ElementaryHTMX +import ManualDCore +import Styleguide public struct MainPage: SendableHTMLDocument where Inner: Sendable { @@ -6,16 +9,10 @@ public struct MainPage: SendableHTMLDocument where Inner: Sendable public var lang: String { "en" } let inner: Inner - // let activeTab: Sidebar.ActiveTab - // let showSidebar: Bool init( - // active activeTab: Sidebar.ActiveTab, - // showSidebar: Bool = true, _ inner: () -> Inner ) { - // self.activeTab = activeTab - // self.showSidebar = showSidebar self.inner = inner() } @@ -39,4 +36,21 @@ public struct MainPage: SendableHTMLDocument where Inner: Sendable } } +struct LoggedIn: HTML, Sendable { + let next: String? + + var body: some HTML { + div( + .hx.get(next ?? SiteRoute.View.router.path(for: .project(.index))), + .hx.pushURL(true), + .hx.target("body"), + .hx.trigger(.event(.revealed)), + .hx.indicator(".hx-indicator") + ) { + Indicator() + } + } + +} + public protocol SendableHTMLDocument: HTMLDocument, Sendable {} diff --git a/Sources/ViewController/Views/Project/ProjectView.swift b/Sources/ViewController/Views/Project/ProjectView.swift index 810c38e..e51abf6 100644 --- a/Sources/ViewController/Views/Project/ProjectView.swift +++ b/Sources/ViewController/Views/Project/ProjectView.swift @@ -56,10 +56,10 @@ struct Sidebar: HTML { } .attributes(.class("p-4")) - row(title: "Project", icon: .mapPin, route: .project(.detail(projectID))) + row(title: "Project", icon: .mapPin, route: .project(.detail(projectID, .index))) .attributes(.data("active", value: active == .projects ? "true" : "false")) - row(title: "Rooms", icon: .doorClosed, route: .room(.index(projectID))) + row(title: "Rooms", icon: .doorClosed, route: .project(.detail(projectID, .rooms(.index)))) .attributes(.data("active", value: active == .rooms ? "true" : "false")) row(title: "Equivalent Lengths", icon: .rulerDimensionLine, route: .effectiveLength(.index)) diff --git a/Sources/ViewController/Views/Project/ProjectsTable.swift b/Sources/ViewController/Views/Project/ProjectsTable.swift index ceb4467..cb233b1 100644 --- a/Sources/ViewController/Views/Project/ProjectsTable.swift +++ b/Sources/ViewController/Views/Project/ProjectsTable.swift @@ -69,7 +69,7 @@ extension ProjectsTable { td { a( .class("btn btn-success"), - .href(route: .project(.detail(project.id))) + .href(route: .project(.detail(project.id, .index))) ) { ">" } } } diff --git a/Sources/ViewController/Views/Rooms/RoomForm.swift b/Sources/ViewController/Views/Rooms/RoomForm.swift index 45e745c..d52d836 100644 --- a/Sources/ViewController/Views/Rooms/RoomForm.swift +++ b/Sources/ViewController/Views/Rooms/RoomForm.swift @@ -17,7 +17,7 @@ struct RoomForm: HTML, Sendable { // TODO: Use htmx here. form( .method(.post), - .action(route: .room(.index(projectID))) + .action(route: .project(.detail(projectID, .rooms(.index)))) ) { div { label(.for("name")) { "Name:" } @@ -45,7 +45,7 @@ struct RoomForm: HTML, Sendable { div(.class("space-x-4")) { CancelButton() .attributes( - .hx.get(route: .room(.form(projectID, dismiss: true))), + .hx.get(route: .project(.detail(projectID, .rooms(.form(dismiss: true))))), .hx.target("#roomForm"), .hx.swap(.outerHTML) ) diff --git a/Sources/ViewController/Views/Rooms/RoomsView.swift b/Sources/ViewController/Views/Rooms/RoomsView.swift index abf4992..26f2279 100644 --- a/Sources/ViewController/Views/Rooms/RoomsView.swift +++ b/Sources/ViewController/Views/Rooms/RoomsView.swift @@ -20,7 +20,7 @@ struct RoomsView: HTML, Sendable { .data("tip", value: "Add room") ) { button( - .hx.get(route: .room(.form(projectID, dismiss: false))), + .hx.get(route: .project(.detail(projectID, .rooms(.form(dismiss: false))))), .hx.target("#roomForm"), .hx.swap(.outerHTML), .class("btn btn-primary w-[40px] text-2xl") diff --git a/Sources/ViewController/Views/User/LoginForm.swift b/Sources/ViewController/Views/User/LoginForm.swift index 51054fb..24a92ce 100644 --- a/Sources/ViewController/Views/User/LoginForm.swift +++ b/Sources/ViewController/Views/User/LoginForm.swift @@ -5,9 +5,11 @@ import Styleguide struct LoginForm: HTML, Sendable { let style: Style + let next: String? - init(style: Style = .login) { + init(style: Style = .login, next: String? = nil) { self.style = style + self.next = next } var body: some HTML { @@ -18,6 +20,11 @@ struct LoginForm: HTML, Sendable { form( .method(.post) ) { + + if let next { + input(.class("hidden"), .name("next"), .value(next)) + } + fieldset(.class("fieldset bg-base-200 border-base-300 rounded-box w-xl border p-4")) { legend(.class("fieldset-legend")) { style.title } @@ -81,7 +88,7 @@ struct LoginForm: HTML, Sendable { button(.class("btn btn-secondary mt-4")) { style.title } a( .class("btn btn-link mt-4"), - .href(route: style == .signup ? .login(.index) : .signup(.index)) + .href(route: style == .signup ? .login(.index(next: next)) : .signup(.index)) ) { style == .login ? "Sign Up" : "Login" } diff --git a/output.css b/output.css index 3e360f0..db9b247 100644 --- a/output.css +++ b/output.css @@ -210,6 +210,151 @@ } } @layer utilities { + .diff { + @layer daisyui.l1.l2.l3 { + position: relative; + display: grid; + width: 100%; + overflow: hidden; + webkit-user-select: none; + user-select: none; + grid-template-rows: 1fr 1.8rem 1fr; + direction: ltr; + container-type: inline-size; + grid-template-columns: auto 1fr; + &:focus-visible, &:has(.diff-item-1:focus-visible) { + outline-style: var(--tw-outline-style); + outline-width: 2px; + outline-offset: 1px; + outline-color: var(--color-base-content); + } + &:focus-visible { + outline-style: var(--tw-outline-style); + outline-width: 2px; + outline-offset: 1px; + outline-color: var(--color-base-content); + .diff-resizer { + min-width: 95cqi; + max-width: 95cqi; + } + } + &:has(.diff-item-1:focus-visible) { + outline-style: var(--tw-outline-style); + outline-width: 2px; + outline-offset: 1px; + .diff-resizer { + min-width: 5cqi; + max-width: 5cqi; + } + } + @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) { + &:focus { + .diff-resizer { + min-width: 5cqi; + max-width: 5cqi; + } + } + &:has(.diff-item-1:focus) { + .diff-resizer { + min-width: 95cqi; + max-width: 95cqi; + } + } + } + } + } + .fab { + @layer daisyui.l1.l2.l3 { + pointer-events: none; + position: fixed; + inset-inline-end: calc(0.25rem * 4); + bottom: calc(0.25rem * 4); + z-index: 999; + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + gap: calc(0.25rem * 2); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + white-space: nowrap; + > * { + pointer-events: auto; + display: flex; + align-items: center; + gap: calc(0.25rem * 2); + &:hover, &:has(:focus-visible) { + z-index: 1; + } + } + > [tabindex] { + &:first-child { + position: relative; + display: grid; + transition-property: opacity, visibility, rotate; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + } + .fab-close { + position: absolute; + inset-inline-end: calc(0.25rem * 0); + bottom: calc(0.25rem * 0); + } + .fab-main-action { + position: absolute; + inset-inline-end: calc(0.25rem * 0); + bottom: calc(0.25rem * 0); + } + &:focus-within { + &:has(.fab-close), &:has(.fab-main-action) { + > [tabindex] { + rotate: 90deg; + opacity: 0%; + } + } + > [tabindex]:first-child { + pointer-events: none; + } + > :nth-child(n + 2) { + visibility: visible; + --tw-scale-x: 100%; + --tw-scale-y: 100%; + --tw-scale-z: 100%; + scale: var(--tw-scale-x) var(--tw-scale-y); + opacity: 100%; + } + } + > :nth-child(n + 2) { + visibility: hidden; + --tw-scale-x: 80%; + --tw-scale-y: 80%; + --tw-scale-z: 80%; + scale: var(--tw-scale-x) var(--tw-scale-y); + opacity: 0%; + transition-property: opacity, scale, visibility; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + &.fab-main-action, &.fab-close { + --tw-scale-x: 100%; + --tw-scale-y: 100%; + --tw-scale-z: 100%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + > :nth-child(3) { + transition-delay: 30ms; + } + > :nth-child(4) { + transition-delay: 60ms; + } + > :nth-child(5) { + transition-delay: 90ms; + } + > :nth-child(6) { + transition-delay: 120ms; + } + } + } .tooltip { @layer daisyui.l1.l2.l3 { position: relative; @@ -278,6 +423,400 @@ } } } + .tab { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-flex; + cursor: pointer; + appearance: none; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; + webkit-user-select: none; + user-select: none; + &:hover { + @media (hover: hover) { + color: var(--color-base-content); + } + } + --tab-p: 0.75rem; + --tab-bg: var(--color-base-100); + --tab-border-color: var(--color-base-300); + --tab-radius-ss: 0; + --tab-radius-se: 0; + --tab-radius-es: 0; + --tab-radius-ee: 0; + --tab-order: 0; + --tab-radius-min: calc(0.75rem - var(--border)); + --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min)); + --tab-radius-grad: #0000 calc(69% - var(--border)), + var(--tab-border-color) calc(69% - var(--border) + 0.25px), + var(--tab-border-color) 69%, + var(--tab-bg) calc(69% + 0.25px); + border-color: #0000; + order: var(--tab-order); + height: var(--tab-height); + font-size: 0.875rem; + padding-inline: var(--tab-p); + &:is(input[type="radio"]) { + min-width: fit-content; + &:after { + --tw-content: attr(aria-label); + content: var(--tw-content); + } + } + &:is(label) { + position: relative; + input { + position: absolute; + inset: calc(0.25rem * 0); + cursor: pointer; + appearance: none; + opacity: 0%; + } + } + &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { + & + .tab-content { + display: block; + } + } + &:not( :checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"] ) { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); + } + } + &:not(input):empty { + flex-grow: 1; + cursor: default; + } + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus-visible, &:is(label:has(:checked:focus-visible)) { + outline: 2px solid currentColor; + outline-offset: -5px; + } + &[disabled] { + pointer-events: none; + opacity: 40%; + } + } + } + .menu { + @layer daisyui.l1.l2.l3 { + display: flex; + width: fit-content; + flex-direction: column; + flex-wrap: wrap; + padding: calc(0.25rem * 2); + --menu-active-fg: var(--color-neutral-content); + --menu-active-bg: var(--color-neutral); + font-size: 0.875rem; + :where(li ul) { + position: relative; + margin-inline-start: calc(0.25rem * 4); + padding-inline-start: calc(0.25rem * 2); + white-space: nowrap; + &:before { + position: absolute; + inset-inline-start: calc(0.25rem * 0); + top: calc(0.25rem * 3); + bottom: calc(0.25rem * 3); + background-color: var(--color-base-content); + opacity: 10%; + width: var(--border); + content: ""; + } + } + :where(li > .menu-dropdown:not(.menu-dropdown-show)) { + display: none; + } + :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { + display: grid; + grid-auto-flow: column; + align-content: flex-start; + align-items: center; + gap: calc(0.25rem * 2); + border-radius: var(--radius-field); + padding-inline: calc(0.25rem * 3); + padding-block: calc(0.25rem * 1.5); + text-align: start; + transition-property: color, background-color, box-shadow; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + grid-auto-columns: minmax(auto, max-content) auto max-content; + text-wrap: balance; + user-select: none; + } + :where(li > details > summary) { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + &::-webkit-details-marker { + display: none; + } + } + :where(li > details > summary), :where(li > .menu-dropdown-toggle) { + &:after { + justify-self: flex-end; + display: block; + height: 0.375rem; + width: 0.375rem; + rotate: -135deg; + translate: 0 -1px; + transition-property: rotate, translate; + transition-duration: 0.2s; + content: ""; + transform-origin: 50% 50%; + box-shadow: 2px 2px inset; + pointer-events: none; + } + } + details { + overflow: hidden; + interpolate-size: allow-keywords; + } + details::details-content { + block-size: 0; + @media (prefers-reduced-motion: no-preference) { + transition-behavior: allow-discrete; + transition-property: block-size, content-visibility; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + } + details[open]::details-content { + block-size: auto; + } + :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { + rotate: 45deg; + translate: 0 1px; + } + :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) { + &.menu-focus, &:focus-visible { + cursor: pointer; + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + color: var(--color-base-content); + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + } + :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) { + cursor: pointer; + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset; + } + :where(li:empty) { + background-color: var(--color-base-content); + opacity: 10%; + margin: 0.5rem 1rem; + height: 1px; + } + :where(li) { + position: relative; + display: flex; + flex-shrink: 0; + flex-direction: column; + flex-wrap: wrap; + align-items: stretch; + .badge { + justify-self: flex-end; + } + & > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + color: var(--menu-active-fg); + background-color: var(--menu-active-bg); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + &:not(&:active) { + box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg); + } + } + &.menu-disabled { + pointer-events: none; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + } + .dropdown:focus-within { + .menu-dropdown-toggle:after { + rotate: 45deg; + translate: 0 1px; + } + } + .dropdown-content { + margin-top: calc(0.25rem * 2); + padding: calc(0.25rem * 2); + &:before { + display: none; + } + } + } + } + .collapse-arrow { + @layer daisyui.l1.l2 { + > .collapse-title:after { + position: absolute; + display: block; + height: 0.5rem; + width: 0.5rem; + transform: translateY(-100%) rotate(45deg); + @media (prefers-reduced-motion: no-preference) { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.2s; + } + top: 50%; + inset-inline-end: 1.4rem; + content: ""; + transform-origin: 75% 75%; + box-shadow: 2px 2px; + pointer-events: none; + } + } + } + .collapse-plus { + @layer daisyui.l1.l2 { + > .collapse-title:after { + position: absolute; + display: block; + height: 0.5rem; + width: 0.5rem; + @media (prefers-reduced-motion: no-preference) { + 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; + --tw-content: "+"; + content: var(--tw-content); + pointer-events: none; + } + } + } + .dropdown { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-block; + position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); + & > *:not(:has(~ [class*="dropdown-content"])):focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + .dropdown-content { + position: absolute; + } + &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content { + display: none; + transform-origin: top; + opacity: 0%; + scale: 95%; + } + &[popover], .dropdown-content { + z-index: 999; + @media (prefers-reduced-motion: no-preference) { + animation: dropdown 0.2s; + transition-property: opacity, scale, display; + transition-behavior: allow-discrete; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + } + @starting-style { + &[popover], .dropdown-content { + scale: 95%; + opacity: 0; + } + } + &:not(.dropdown-close) { + &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { + > [tabindex]:first-child { + pointer-events: none; + } + .dropdown-content { + opacity: 100%; + scale: 100%; + } + } + &.dropdown-hover:hover { + .dropdown-content { + opacity: 100%; + scale: 100%; + } + } + } + &:is(details) { + summary { + &::-webkit-details-marker { + display: none; + } + } + } + &:where([popover]) { + background: #0000; + } + &[popover] { + position: fixed; + color: inherit; + @supports not (position-area: bottom) { + margin: auto; + &.dropdown-close, &.dropdown-open:not(:popover-open) { + display: none; + transform-origin: top; + opacity: 0%; + scale: 95%; + } + &::backdrop { + background-color: color-mix(in oklab, #000 30%, #0000); + } + } + &.dropdown-close, &:not(.dropdown-open, :popover-open) { + display: none; + transform-origin: top; + opacity: 0%; + scale: 95%; + } + } + } + } .btn { :where(&) { @layer daisyui.l1.l2.l3 { @@ -424,6 +963,224 @@ 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"); } } + .countdown { + &.countdown { + line-height: 1em; + } + @layer daisyui.l1.l2.l3 { + display: inline-flex; + & > * { + visibility: hidden; + position: relative; + display: inline-block; + overflow-y: clip; + transition: width 0.4s ease-out 0.2s; + height: 1em; + --value-v: calc(mod(max(0, var(--value)), 1000)); + --value-hundreds: calc(round(to-zero, var(--value-v) / 100, 1)); + --value-tens: calc(round(to-zero, mod(var(--value-v), 100) / 10, 1)); + --value-ones: calc(mod(var(--value-v), 100)); + --show-hundreds: clamp(clamp(0, var(--digits, 1) - 2, 1), var(--value-hundreds), 1); + --show-tens: clamp( + clamp(0, var(--digits, 1) - 1, 1), + var(--value-tens) + var(--show-hundreds), + 1 + ); + --first-digits: calc(round(to-zero, var(--value-v) / 10, 1)); + width: calc(1ch + var(--show-tens) * 1ch + var(--show-hundreds) * 1ch); + direction: ltr; + &:before, &:after { + visibility: visible; + position: absolute; + overflow-x: clip; + --tw-content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A"; + content: var(--tw-content); + font-variant-numeric: tabular-nums; + white-space: pre; + text-align: end; + direction: rtl; + transition: all 1s cubic-bezier(1, 0, 0, 1), width 0.2s ease-out 0.2s, opacity 0.2s ease-out 0.2s; + } + &:before { + width: calc(1ch + var(--show-hundreds) * 1ch); + top: calc(var(--first-digits) * -1em); + inset-inline-end: 0; + opacity: var(--show-tens); + } + &:after { + width: 1ch; + top: calc(var(--value-ones) * -1em); + inset-inline-start: 0; + } + } + } + } + .collapse { + &:not(td, tr, colgroup) { + visibility: revert-layer; + } + @layer daisyui.l1.l2.l3 { + display: grid; + position: relative; + overflow: hidden; + border-radius: var(--radius-box, 1rem); + width: 100%; + grid-template-rows: max-content 0fr; + grid-template-columns: minmax(0, 1fr); + isolation: isolate; + @media (prefers-reduced-motion: no-preference) { + 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: 1lh; + transition: background-color 0.2s ease-out; + } + &:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ), &:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) { + grid-template-rows: max-content 1fr; + } + &:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content, &:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { + content-visibility: visible; + min-height: fit-content; + @supports not (content-visibility: visible) { + visibility: visible; + } + } + &:focus-visible, &:has(> input:is([type="checkbox"], [type="radio"]):focus-visible), &:has(summary:focus-visible) { + outline-color: var(--color-base-content); + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + } + &:not(.collapse-close) { + > input[type="checkbox"], > input[type="radio"]:not(:checked), > .collapse-title { + cursor: pointer; + } + } + &[tabindex]:focus:not(.collapse-close, .collapse[open]), &[tabindex]:focus-within:not(.collapse-close, .collapse[open]) { + > .collapse-title { + cursor: unset; + } + } + &:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > :where(.collapse-content), &:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { + padding-bottom: 1rem; + } + } + @layer daisyui.l1.l2 { + &:is([open]) { + &.collapse-arrow { + > .collapse-title:after { + @media (prefers-reduced-motion: no-preference) { + transform: translateY(-50%) rotate(225deg); + } + } + } + } + &.collapse-open { + &.collapse-arrow { + > .collapse-title:after { + @media (prefers-reduced-motion: no-preference) { + transform: translateY(-50%) rotate(225deg); + } + } + } + &.collapse-plus { + > .collapse-title:after { + --tw-content: "−"; + content: var(--tw-content); + } + } + } + &[tabindex].collapse-arrow:focus:not(.collapse-close), &.collapse-arrow[tabindex]:focus-within: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 { + --tw-content: "−"; + content: var(--tw-content); + } + } + } + &[tabindex].collapse-plus:focus:not(.collapse-close) { + > .collapse-title:after { + --tw-content: "−"; + content: var(--tw-content); + } + } + &.collapse-plus:not(.collapse-close) { + > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after { + --tw-content: "−"; + content: var(--tw-content); + } + } + } + &:is(details) { + @layer daisyui.l1.l2.l3 { + width: 100%; + @media (prefers-reduced-motion: no-preference) { + &::details-content { + transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out, height 0.2s; + height: 0; + interpolate-size: allow-keywords; + } + &:where([open])::details-content { + height: auto; + } + } + & summary { + position: relative; + display: block; + &::-webkit-details-marker { + display: none; + } + } + & > .collapse-content { + content-visibility: visible; + } + } + } + &:is(details) summary { + @layer daisyui.l1.l2.l3 { + outline: none; + } + } + } + .collapse-content { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + grid-row-start: 1; + } + @layer daisyui.l1.l2.l3 { + content-visibility: hidden; + grid-column-start: 1; + grid-row-start: 2; + min-height: 0; + padding-left: 1rem; + padding-right: 1rem; + cursor: unset; + @supports not (content-visibility: hidden) { + visibility: hidden; + } + @media (prefers-reduced-motion: no-preference) { + transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out; + } + } + } .validator-hint { @layer daisyui.l1.l2.l3 { visibility: hidden; @@ -454,6 +1211,105 @@ } } } + .collapse-open { + @layer daisyui.l1.l2 { + grid-template-rows: max-content 1fr; + > .collapse-content { + content-visibility: visible; + min-height: fit-content; + padding-bottom: 1rem; + @supports not (content-visibility: visible) { + visibility: visible; + } + } + } + } + .collapse { + visibility: collapse; + } + .visible { + visibility: visible; + } + .list { + @layer daisyui.l1.l2.l3 { + display: flex; + flex-direction: column; + font-size: 0.875rem; + .list-row { + --list-grid-cols: minmax(0, auto) 1fr; + position: relative; + display: grid; + grid-auto-flow: column; + gap: calc(0.25rem * 4); + border-radius: var(--radius-box); + padding: calc(0.25rem * 4); + word-break: break-word; + grid-template-columns: var(--list-grid-cols); + } + & > :not(:last-child) { + &.list-row, .list-row { + &:after { + content: ""; + border-bottom: var(--border) solid; + inset-inline: var(--radius-box); + position: absolute; + bottom: calc(0.25rem * 0); + border-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); + } + } + } + } + } + @layer daisyui.l1.l2 { + .list-row { + &:has(.list-col-grow:nth-child(1)) { + --list-grid-cols: 1fr; + } + &:has(.list-col-grow:nth-child(2)) { + --list-grid-cols: minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(3)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(4)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(5)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(6)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) + minmax(0, auto) 1fr; + } + > * { + grid-row-start: 1; + } + } + } + } + .toast { + @layer daisyui.l1.l2.l3 { + position: fixed; + inset-inline-start: auto; + inset-inline-end: calc(0.25rem * 4); + top: auto; + bottom: calc(0.25rem * 4); + display: flex; + flex-direction: column; + gap: calc(0.25rem * 2); + background-color: transparent; + translate: var(--toast-x, 0) var(--toast-y, 0); + width: max-content; + max-width: calc(100vw - 2rem); + & > * { + @media (prefers-reduced-motion: no-preference) { + animation: toast 0.25s ease-out; + } + } + } + } .toggle { @layer daisyui.l1.l2.l3 { border: var(--border) solid currentColor; @@ -711,6 +1567,23 @@ } } } + .indicator { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-flex; + width: max-content; + :where(.indicator-item) { + z-index: 1; + position: absolute; + white-space: nowrap; + top: var(--indicator-t, 0); + bottom: var(--indicator-b, auto); + left: var(--indicator-s, auto); + right: var(--indicator-e, 0); + translate: var(--indicator-x, 50%) var(--indicator-y, -50%); + } + } + } .table { @layer daisyui.l1.l2.l3 { font-size: 0.875rem; @@ -780,9 +1653,737 @@ } } } + .steps { + @layer daisyui.l1.l2.l3 { + display: inline-grid; + grid-auto-flow: column; + overflow: hidden; + overflow-x: auto; + counter-reset: step; + grid-auto-columns: 1fr; + .step { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: auto; + grid-template-rows: repeat(2, minmax(0, 1fr)); + grid-template-rows: 40px 1fr; + place-items: center; + text-align: center; + min-width: 4rem; + --step-bg: var(--color-base-300); + --step-fg: var(--color-base-content); + &:before { + top: calc(0.25rem * 0); + grid-column-start: 1; + grid-row-start: 1; + height: calc(0.25rem * 2); + width: 100%; + border: 1px solid; + color: var(--step-bg); + background-color: var(--step-bg); + content: ""; + margin-inline-start: -100%; + } + > .step-icon, &:not(:has(.step-icon)):after { + --tw-content: counter(step); + content: var(--tw-content); + counter-increment: step; + z-index: 1; + color: var(--step-fg); + background-color: var(--step-bg); + border: 1px solid var(--step-bg); + position: relative; + grid-column-start: 1; + grid-row-start: 1; + display: grid; + height: calc(0.25rem * 8); + width: calc(0.25rem * 8); + place-items: center; + place-self: center; + border-radius: calc(infinity * 1px); + } + &:first-child:before { + --tw-content: none; + content: var(--tw-content); + } + &[data-content]:after { + --tw-content: attr(data-content); + content: var(--tw-content); + } + } + } + @layer daisyui.l1.l2 { + .step-neutral { + + .step-neutral:before, &:after, > .step-icon { + --step-bg: var(--color-neutral); + --step-fg: var(--color-neutral-content); + } + } + .step-primary { + + .step-primary:before, &:after, > .step-icon { + --step-bg: var(--color-primary); + --step-fg: var(--color-primary-content); + } + } + .step-secondary { + + .step-secondary:before, &:after, > .step-icon { + --step-bg: var(--color-secondary); + --step-fg: var(--color-secondary-content); + } + } + .step-accent { + + .step-accent:before, &:after, > .step-icon { + --step-bg: var(--color-accent); + --step-fg: var(--color-accent-content); + } + } + .step-info { + + .step-info:before, &:after, > .step-icon { + --step-bg: var(--color-info); + --step-fg: var(--color-info-content); + } + } + .step-success { + + .step-success:before, &:after, > .step-icon { + --step-bg: var(--color-success); + --step-fg: var(--color-success-content); + } + } + .step-warning { + + .step-warning:before, &:after, > .step-icon { + --step-bg: var(--color-warning); + --step-fg: var(--color-warning-content); + } + } + .step-error { + + .step-error:before, &:after, > .step-icon { + --step-bg: var(--color-error); + --step-fg: var(--color-error-content); + } + } + } + } + .range { + @layer daisyui.l1.l2.l3 { + 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: currentColor; + @supports (color: color-mix(in lab, red, red)) { + --range-bg: color-mix(in oklab, currentColor 10%, #0000); + } + cursor: pointer; + overflow: hidden; + background-color: transparent; + vertical-align: middle; + width: clamp(3rem, 20rem, 100%); + --radius-selector-max: calc( + var(--radius-selector) + var(--radius-selector) + var(--radius-selector) + ); + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); + 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) { + &::-webkit-slider-runnable-track { + border: 1px solid; + } + } + @media (forced-colors: active) { + &::-moz-range-track { + border: 1px solid; + } + } + &::-webkit-slider-thumb { + position: relative; + box-sizing: border-box; + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); + background-color: var(--range-thumb); + 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 currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill)); + @supports (color: color-mix(in lab, red, red)) { + 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%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * 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); + } + &::-moz-range-thumb { + position: relative; + box-sizing: border-box; + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); + 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 currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill)); + @supports (color: color-mix(in lab, red, red)) { + 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%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill)); + } + } + &:disabled { + cursor: not-allowed; + opacity: 30%; + } + } + } + .diff-resizer { + @layer daisyui.l1.l2.l3 { + position: relative; + isolation: isolate; + z-index: 2; + grid-column-start: 1; + grid-row-start: 2; + height: calc(0.25rem * 3); + width: 50cqi; + max-width: calc(100cqi - 1rem); + min-width: 1rem; + resize: horizontal; + overflow: hidden; + opacity: 0%; + transform: scaleY(5) translate(0.32rem, 50%); + cursor: ew-resize; + transform-origin: 100% 100%; + clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem)); + transition: min-width 0.3s ease-out, max-width 0.3s ease-out; + } + } + .select { + @layer daisyui.l1.l2.l3 { + border: var(--border) solid #0000; + position: relative; + display: inline-flex; + flex-shrink: 1; + appearance: none; + align-items: center; + gap: calc(0.25rem * 1.5); + background-color: var(--color-base-100); + padding-inline-start: calc(0.25rem * 3); + padding-inline-end: calc(0.25rem * 7); + vertical-align: middle; + width: clamp(3rem, 20rem, 100%); + height: var(--size); + font-size: 0.875rem; + touch-action: manipulation; + border-start-start-radius: var(--join-ss, var(--radius-field)); + border-start-end-radius: var(--join-se, var(--radius-field)); + border-end-start-radius: var(--join-es, var(--radius-field)); + border-end-end-radius: var(--join-ee, var(--radius-field)); + background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); + background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); + background-size: 4px 4px, 4px 4px; + background-repeat: no-repeat; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + } + border-color: var(--input-color); + --input-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); + } + --size: calc(var(--size-field, 0.25rem) * 10); + [dir="rtl"] & { + background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%); + &::picker(select), select::picker(select) { + translate: 0.5rem 0; + } + } + &[multiple] { + height: auto; + overflow: auto; + padding-block: calc(0.25rem * 3); + padding-inline-end: calc(0.25rem * 3); + background-image: none; + } + select { + margin-inline-start: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * -7); + width: calc(100% + 2.75rem); + appearance: none; + padding-inline-start: calc(0.25rem * 3); + padding-inline-end: calc(0.25rem * 7); + height: calc(100% - calc(var(--border) * 2)); + align-items: center; + background: inherit; + border-radius: inherit; + border-style: none; + &:focus, &:focus-within { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:not(:last-child) { + margin-inline-end: calc(0.25rem * -5.5); + background-image: none; + } + } + &:focus, &:focus-within { + --input-color: var(--color-base-content); + box-shadow: 0 1px var(--input-color); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); + } + outline: 2px solid var(--input-color); + outline-offset: 2px; + isolation: isolate; + } + &:has(> select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + } + &::placeholder { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + } + &:has(> select[disabled]) > select[disabled] { + cursor: not-allowed; + } + &, & select { + @supports (appearance: base-select) { + appearance: base-select; + } + @supports (appearance: base-select) { + &::picker(select) { + appearance: base-select; + } + } + &::picker(select) { + color: inherit; + max-height: min(24rem, 70dvh); + margin-inline: 0.5rem; + translate: -0.5rem 0; + border: var(--border) solid var(--color-base-200); + margin-block: calc(0.25rem * 2); + border-radius: var(--radius-box); + padding: calc(0.25rem * 2); + background-color: inherit; + box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/0.2); + box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * 0.1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * 0.1)); + } + &::picker-icon { + display: none; + } + optgroup { + padding-top: 0.5em; + option { + &:nth-child(1) { + margin-top: 0.5em; + } + } + } + option { + border-radius: var(--radius-field); + padding-inline: calc(0.25rem * 3); + padding-block: calc(0.25rem * 1.5); + transition-property: color, background-color; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + white-space: normal; + &:not(:disabled) { + &:hover, &:focus-visible { + cursor: pointer; + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:active { + background-color: var(--color-neutral); + color: var(--color-neutral-content); + box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral); + } + } + } + } + } + } + .swap { + @layer daisyui.l1.l2.l3 { + 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; + @media (prefers-reduced-motion: no-preference) { + 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:is(:checked, :indeterminate) { + & ~ .swap-off { + opacity: 0%; + } + } + input:checked ~ .swap-on, input:indeterminate ~ .swap-indeterminate { + opacity: 100%; + backface-visibility: visible; + } + } + } + .collapse-title { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + grid-row-start: 1; + } + @layer daisyui.l1.l2.l3 { + position: relative; + width: 100%; + padding: 1rem; + padding-inline-end: 3rem; + min-height: 1lh; + transition: background-color 0.2s ease-out; + } + } + .checkbox { + @layer daisyui.l1.l2.l3 { + border: var(--border) solid var(--input-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); + } + position: relative; + display: inline-block; + flex-shrink: 0; + cursor: pointer; + appearance: none; + border-radius: var(--radius-selector); + padding: calc(0.25rem * 1); + vertical-align: middle; + color: var(--color-base-content); + box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000; + transition: background-color 0.2s, box-shadow 0.2s; + --size: calc(var(--size-selector, 0.25rem) * 6); + width: var(--size); + height: var(--size); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + &:before { + --tw-content: ""; + content: var(--tw-content); + display: block; + width: 100%; + height: 100%; + rotate: 45deg; + background-color: currentcolor; + opacity: 0%; + transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s; + transition-delay: 0.1s; + clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); + box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + font-size: 1rem; + line-height: 0.75; + } + &:focus-visible { + outline: 2px solid var(--input-color, currentColor); + outline-offset: 2px; + } + &:checked, &[aria-checked="true"] { + background-color: var(--input-color, #0000); + box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); + &:before { + clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); + opacity: 100%; + } + @media (forced-colors: active) { + &:before { + rotate: 0deg; + background-color: transparent; + --tw-content: "✔︎"; + clip-path: none; + } + } + @media print { + &:before { + rotate: 0deg; + background-color: transparent; + --tw-content: "✔︎"; + clip-path: none; + } + } + } + &:indeterminate { + background-color: var( --input-color, var(--color-base-content) ); + @supports (color: color-mix(in lab, red, red)) { + background-color: var( --input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000) ); + } + &:before { + rotate: 0deg; + opacity: 100%; + translate: 0 -35%; + clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); + } + } + } + &:disabled { + @layer daisyui.l1.l2 { + cursor: not-allowed; + opacity: 20%; + } + } + } + .radio { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-block; + flex-shrink: 0; + cursor: pointer; + appearance: none; + border-radius: calc(infinity * 1px); + padding: calc(0.25rem * 1); + vertical-align: middle; + border: var(--border) solid var(--input-color, currentColor); + @supports (color: color-mix(in lab, red, red)) { + border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000)); + } + box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset; + --size: calc(var(--size-selector, 0.25rem) * 6); + width: var(--size); + height: var(--size); + color: var(--input-color, currentColor); + &:before { + display: block; + width: 100%; + height: 100%; + border-radius: calc(infinity * 1px); + --tw-content: ""; + content: var(--tw-content); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + } + &:focus-visible { + outline: 2px solid currentColor; + } + &:checked, &[aria-checked="true"] { + border-color: currentcolor; + background-color: var(--color-base-100); + @media (prefers-reduced-motion: no-preference) { + animation: radio 0.2s ease-out; + } + &:before { + background-color: currentcolor; + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); + } + @media (forced-colors: active) { + &:before { + outline-style: var(--tw-outline-style); + outline-width: 1px; + outline-offset: calc(1px * -1); + } + } + @media print { + &:before { + outline: 0.25rem solid; + outline-offset: -1rem; + } + } + } + } + &:disabled { + @layer daisyui.l1.l2 { + cursor: not-allowed; + opacity: 20%; + } + } + } + .rating { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-flex; + vertical-align: middle; + & input { + border: none; + appearance: none; + } + :where(*) { + height: calc(0.25rem * 6); + width: calc(0.25rem * 6); + border-radius: 0; + background-color: var(--color-base-content); + opacity: 20%; + @media (prefers-reduced-motion: no-preference) { + animation: rating 0.25s ease-out; + } + &: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 { + scale: 1.1; + @media (prefers-reduced-motion: no-preference) { + transition: scale 0.2s ease-out; + } + } + } + & *:active:focus { + animation: none; + scale: 1.1; + } + } + @layer daisyui.l1.l2 { + &.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); + } + } + } + .stats { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-grid; + grid-auto-flow: column; + overflow-x: auto; + border-radius: var(--radius-box); + } + } + .progress { + @layer daisyui.l1.l2.l3 { + position: relative; + height: calc(0.25rem * 2); + width: 100%; + appearance: none; + overflow: hidden; + border-radius: var(--radius-box); + background-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, currentcolor 20%, transparent); + } + color: var(--color-base-content); + &:indeterminate { + background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); + background-size: 200%; + background-position-x: 15%; + @media (prefers-reduced-motion: no-preference) { + animation: progress 5s ease-in-out infinite; + } + @supports (-moz-appearance: none) { + &::-moz-progress-bar { + background-color: transparent; + @media (prefers-reduced-motion: no-preference) { + animation: progress 5s ease-in-out infinite; + background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); + background-size: 200%; + background-position-x: 15%; + } + } + } + } + @supports (-moz-appearance: none) { + &::-moz-progress-bar { + border-radius: var(--radius-box); + background-color: currentcolor; + } + } + @supports (-webkit-appearance: none) { + &::-webkit-progress-bar { + border-radius: var(--radius-box); + background-color: transparent; + } + &::-webkit-progress-value { + border-radius: var(--radius-box); + background-color: currentColor; + } + } + } + } + .absolute { + position: absolute; + } .fixed { position: fixed; } + .relative { + position: relative; + } .static { position: static; } @@ -810,9 +2411,258 @@ .left-\[25vw\] { left: 25vw; } + .join { + display: inline-flex; + align-items: stretch; + --join-ss: 0; + --join-se: 0; + --join-es: 0; + --join-ee: 0; + :where(.join-item) { + border-start-start-radius: var(--join-ss, 0); + border-start-end-radius: var(--join-se, 0); + border-end-start-radius: var(--join-es, 0); + border-end-end-radius: var(--join-ee, 0); + * { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + } + > .join-item:where(:first-child) { + --join-ss: var(--radius-field); + --join-se: 0; + --join-es: var(--radius-field); + --join-ee: 0; + } + :first-child:not(:last-child) { + :where(.join-item) { + --join-ss: var(--radius-field); + --join-se: 0; + --join-es: var(--radius-field); + --join-ee: 0; + } + } + > .join-item:where(:last-child) { + --join-ss: 0; + --join-se: var(--radius-field); + --join-es: 0; + --join-ee: var(--radius-field); + } + :last-child:not(:first-child) { + :where(.join-item) { + --join-ss: 0; + --join-se: var(--radius-field); + --join-es: 0; + --join-ee: var(--radius-field); + } + } + > .join-item:where(:only-child) { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + :only-child { + :where(.join-item) { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + } + > :where(:focus, :has(:focus)) { + z-index: 1; + } + @media (hover: hover) { + > :where(.btn:hover, :has(.btn:hover)) { + isolation: isolate; + } + } + } + .textarea { + @layer daisyui.l1.l2.l3 { + border: var(--border) solid #0000; + 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: max(var(--font-size, 0.875rem), 0.875rem); + touch-action: manipulation; + border-color: var(--input-color); + box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + } + --input-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); + } + textarea { + appearance: none; + background-color: transparent; + border: none; + &:focus, &:focus-within { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + } + &:focus, &:focus-within { + --input-color: var(--color-base-content); + box-shadow: 0 1px var(--input-color); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); + } + outline: 2px solid var(--input-color); + outline-offset: 2px; + isolation: isolate; + } + @media (pointer: coarse) { + @supports (-webkit-touch-callout: none) { + &:focus, &:focus-within { + --font-size: 1rem; + } + } + } + &:has(> textarea[disabled]), &:is(:disabled, [disabled]) { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + } + &::placeholder { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + box-shadow: none; + } + &:has(> textarea[disabled]) > textarea[disabled] { + cursor: not-allowed; + } + } + } + .stack { + @layer daisyui.l1.l2.l3 { + display: inline-grid; + grid-template-columns: 3px 4px 1fr 4px 3px; + grid-template-rows: 3px 4px 1fr 4px 3px; + & > * { + height: 100%; + width: 100%; + &:nth-child(n + 2) { + width: 100%; + opacity: 70%; + } + &:nth-child(2) { + z-index: 2; + opacity: 90%; + } + &:nth-child(1) { + z-index: 3; + width: 100%; + } + } + } + @layer daisyui.l1.l2 { + &, &.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-9 { + z-index: 9; + } .z-50 { z-index: 50; } + .tab-content { + @layer daisyui.l1.l2.l3 { + order: var(--tabcontent-order); + display: none; + border-color: transparent; + --tabcontent-radius-ss: var(--radius-box); + --tabcontent-radius-se: var(--radius-box); + --tabcontent-radius-es: var(--radius-box); + --tabcontent-radius-ee: var(--radius-box); + --tabcontent-order: 1; + width: 100%; + height: calc(100% - var(--tab-height) + var(--border)); + margin: var(--tabcontent-margin); + border-width: var(--border); + border-start-start-radius: var(--tabcontent-radius-ss); + border-start-end-radius: var(--tabcontent-radius-se); + border-end-start-radius: var(--tabcontent-radius-es); + border-end-end-radius: var(--tabcontent-radius-ee); + } + } .container { width: 100%; @media (width >= 40rem) { @@ -831,6 +2681,27 @@ max-width: 96rem; } } + .container\! { + width: 100% !important; + @media (width >= 40rem) { + max-width: 40rem !important; + } + @media (width >= 48rem) { + max-width: 48rem !important; + } + @media (width >= 64rem) { + max-width: 64rem !important; + } + @media (width >= 80rem) { + max-width: 80rem !important; + } + @media (width >= 96rem) { + max-width: 96rem !important; + } + } + .m-0 { + margin: calc(var(--spacing) * 0); + } .m-4 { margin: calc(var(--spacing) * 4); } @@ -983,6 +2854,115 @@ padding-inline: calc(var(--size) / 2 - var(--border)); } } + .kbd { + box-shadow: none; + @layer daisyui.l1.l2.l3 { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-field); + background-color: var(--color-base-200); + vertical-align: middle; + padding-inline: 0.5em; + border: var(--border) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); + } + border-bottom: calc(var(--border) + 1px) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); + } + --size: calc(var(--size-selector, 0.25rem) * 6); + font-size: 0.875rem; + height: var(--size); + min-width: var(--size); + } + } + .tabs { + @layer daisyui.l1.l2.l3 { + display: flex; + flex-wrap: wrap; + --tabs-height: auto; + --tabs-direction: row; + --tab-height: calc(var(--size-field, 0.25rem) * 10); + height: var(--tabs-height); + flex-direction: var(--tabs-direction); + } + } + .footer { + @layer daisyui.l1.l2.l3 { + display: grid; + width: 100%; + grid-auto-flow: row; + place-items: start; + column-gap: calc(0.25rem * 4); + row-gap: calc(0.25rem * 10); + font-size: 0.875rem; + line-height: 1.25rem; + & > * { + display: grid; + place-items: start; + gap: calc(0.25rem * 2); + } + &.footer-center { + grid-auto-flow: column dense; + place-items: center; + text-align: center; + & > * { + place-items: center; + } + } + } + } + .stat { + @layer daisyui.l1.l2.l3 { + display: inline-grid; + width: 100%; + column-gap: calc(0.25rem * 4); + padding-inline: calc(0.25rem * 6); + padding-block: calc(0.25rem * 4); + grid-template-columns: repeat(1, 1fr); + &:not(:last-child) { + border-inline-end: var(--border) dashed currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); + } + border-block-end: none; + } + } + } + .alert { + border-width: var(--border); + border-color: var(--alert-border-color, var(--color-base-200)); + @layer daisyui.l1.l2.l3 { + border-style: solid; + --alert-border-color: var(--color-base-200); + display: grid; + align-items: center; + gap: calc(0.25rem * 4); + border-radius: var(--radius-box); + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 3); + color: var(--color-base-content); + background-color: var(--alert-color, var(--color-base-200)); + justify-content: start; + justify-items: start; + grid-auto-flow: column; + grid-template-columns: auto; + text-align: start; + font-size: 0.875rem; + line-height: 1.25rem; + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); + } + &:has(:nth-child(2)) { + grid-template-columns: auto minmax(auto, 1fr); + } + } + } .fieldset { @layer daisyui.l1.l2.l3 { display: grid; @@ -993,6 +2973,74 @@ grid-auto-rows: max-content; } } + .prose { + :root & { + --tw-prose-body: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000); + } + --tw-prose-headings: var(--color-base-content); + --tw-prose-lead: var(--color-base-content); + --tw-prose-links: var(--color-base-content); + --tw-prose-bold: var(--color-base-content); + --tw-prose-counters: var(--color-base-content); + --tw-prose-bullets: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000); + } + --tw-prose-hr: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000); + } + --tw-prose-quotes: var(--color-base-content); + --tw-prose-quote-borders: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); + } + --tw-prose-captions: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000); + } + --tw-prose-code: var(--color-base-content); + --tw-prose-pre-code: var(--color-neutral-content); + --tw-prose-pre-bg: var(--color-neutral); + --tw-prose-th-borders: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000); + } + --tw-prose-td-borders: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); + } + --tw-prose-kbd: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000); + } + :where(code):not(pre > code) { + background-color: var(--color-base-200); + border-radius: var(--radius-selector); + border: var(--border) solid var(--color-base-300); + padding-inline: 0.5em; + padding-block: 0.2em; + font-weight: inherit; + &:before, &:after { + display: none; + } + } + } + } + .mask { + @layer daisyui.l1.l2.l3 { + display: inline-block; + vertical-align: middle; + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + } + } + .block { + display: block; + } .contents { display: contents; } @@ -1002,6 +3050,9 @@ .hidden { display: none; } + .inline { + display: inline; + } .table { display: table; } @@ -1011,6 +3062,9 @@ .h-screen { height: 100vh; } + .w-1 { + width: calc(var(--spacing) * 1); + } .w-1\/2 { width: calc(1/2 * 100%); } @@ -1029,12 +3083,67 @@ .flex-none { flex: none; } + .flex-shrink { + flex-shrink: 1; + } + .flex-grow { + flex-grow: 1; + } + .grow { + flex-grow: 1; + } + .border-collapse { + border-collapse: collapse; + } + .transform { + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + } + .skeleton { + @layer daisyui.l1.l2.l3 { + border-radius: var(--radius-box); + background-color: var(--color-base-300); + @media (prefers-reduced-motion: reduce) { + transition-duration: 15s; + } + will-change: background-position; + background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100% ); + background-size: 200% auto; + background-position-x: -50%; + @media (prefers-reduced-motion: no-preference) { + animation: skeleton 1.8s ease-in-out infinite; + } + } + } + .link { + @layer daisyui.l1.l2.l3 { + cursor: pointer; + text-decoration-line: underline; + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; + } + } + } + .resize { + resize: both; + } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } + .flex-wrap { + flex-wrap: wrap; + } .items-center { align-items: center; } @@ -1075,6 +3184,11 @@ 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-x-auto { overflow-x: auto; } @@ -1166,9 +3280,18 @@ mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } } + .mask-repeat { + mask-repeat: repeat; + } + .p-1 { + padding: calc(var(--spacing) * 1); + } .p-4 { padding: calc(var(--spacing) * 4); } + .p-7 { + padding: calc(var(--spacing) * 7); + } .px-3 { padding-inline: calc(var(--spacing) * 3); } @@ -1178,6 +3301,9 @@ .px-6 { padding-inline: calc(var(--spacing) * 6); } + .py-1 { + padding-block: calc(var(--spacing) * 1); + } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } @@ -1228,6 +3354,9 @@ --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } + .text-wrap { + text-wrap: wrap; + } .text-error { color: var(--color-error); } @@ -1255,6 +3384,10 @@ .uppercase { text-transform: uppercase; } + .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 { .prose :where(&):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-decoration-line: none; @@ -1275,6 +3408,14 @@ } } } + .prose { + & :where(.btn-link):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + text-decoration-line: none; + } + } + .underline { + text-decoration-line: underline; + } .opacity-50 { opacity: 50%; } @@ -1282,6 +3423,14 @@ --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); } + .ring { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } .outline-1 { outline-style: var(--tw-outline-style); outline-width: 1px; @@ -1295,6 +3444,19 @@ .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } + .transition { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .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); + } .badge-error { @layer daisyui.l1.l2 { --badge-color: var(--color-error); @@ -1652,6 +3814,26 @@ background-position-x: -115%; } } +@property --tw-rotate-x { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-y { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-z { + syntax: "*"; + inherits: false; +} +@property --tw-skew-x { + syntax: "*"; + inherits: false; +} +@property --tw-skew-y { + syntax: "*"; + inherits: false; +} @property --tw-space-y-reverse { syntax: "*"; inherits: false; @@ -1671,6 +3853,26 @@ 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; @@ -1794,13 +3996,27 @@ syntax: "*"; inherits: false; } +@property --tw-ease { + syntax: "*"; + inherits: false; +} @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-border-style: solid; --tw-font-weight: 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-shadow-alpha: 100%; @@ -1829,6 +4045,7 @@ --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; + --tw-ease: initial; } } }