Graham McIntire
1ef8bd6641
daisyUI 5 defines `.select` with its own border, chevron background-image, padding, width clamp and box-shadow. Those rules were bleeding through onto sutra_ui's wrapper `<div class="select">` in the live_table per-page selector, rendering two chevrons and the wrong width. Explicitly zero out every visible property except `width`, so Tailwind width utilities (w-24) still win and the inner `.select-trigger` button owns the visible styling.
370 lines
9.1 KiB
CSS
370 lines
9.1 KiB
CSS
/* live_table / sutra_ui compat layer.
|
|
|
|
live_table's rendered components (and the SutraUI primitives it wraps)
|
|
use shadcn-style Tailwind utility classes — `bg-muted`, `text-foreground`,
|
|
`border-border`, `bg-background`, `text-muted-foreground`, `text-primary` —
|
|
plus component classes like `.select-trigger`, `.select-popover`,
|
|
`.input-group`, `.empty-outline`, `.dropdown-menu`. This project uses
|
|
daisyUI, which doesn't define any of those tokens or components.
|
|
|
|
Importing deps/sutra_ui/priv/static/sutra_ui.css wholesale would clobber
|
|
daisyUI's `.btn`, `.badge`, `.input`, `.alert`, and the theme `--color-*`
|
|
tokens. Instead, this file provides:
|
|
|
|
1) @theme mappings for the neutral shadcn tokens live_table uses,
|
|
aliased to daisyUI base colors so they don't conflict with
|
|
daisyUI's primary/secondary/accent/error.
|
|
2) Hand-written component CSS for the sutra_ui primitives live_table
|
|
wraps, using daisyUI variables directly (no @apply of shadcn names). */
|
|
|
|
@theme {
|
|
--color-background: var(--color-base-100);
|
|
--color-foreground: var(--color-base-content);
|
|
--color-muted: var(--color-base-200);
|
|
--color-muted-foreground: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
|
--color-border: var(--color-base-300);
|
|
--color-input: var(--color-base-300);
|
|
--color-popover: var(--color-base-100);
|
|
--color-popover-foreground: var(--color-base-content);
|
|
--color-card: var(--color-base-100);
|
|
--color-card-foreground: var(--color-base-content);
|
|
--color-ring: var(--color-primary);
|
|
}
|
|
|
|
/* SutraUI Select — used by live_table for the per-page selector.
|
|
daisyUI 5 also defines a `.select` class with its own border, chevron
|
|
background-image, padding, width clamp, and box-shadow — all of which
|
|
would bleed through onto sutra_ui's wrapper `<div class="select">`
|
|
(two chevrons, wrong width). Reset every visible property except
|
|
`width`, so Tailwind width utilities (e.g. `w-24`) on the component
|
|
still win and the inner `.select-trigger` button owns the visible
|
|
styling. */
|
|
*:not(select).select {
|
|
position: relative;
|
|
display: inline-flex;
|
|
height: auto;
|
|
padding: 0;
|
|
border: 0 solid transparent;
|
|
background: transparent;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
font-size: inherit;
|
|
vertical-align: baseline;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.select-trigger {
|
|
display: flex;
|
|
height: 2.25rem;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
border-radius: 0.375rem;
|
|
border: 1px solid var(--color-base-300);
|
|
background: var(--color-base-100);
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
color: var(--color-base-content);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.select-trigger:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--color-primary);
|
|
}
|
|
|
|
.select-value {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.select-icon {
|
|
flex-shrink: 0;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.select-popover,
|
|
[data-popover] {
|
|
position: absolute;
|
|
z-index: 50;
|
|
margin-top: 0.25rem;
|
|
min-width: 100%;
|
|
border-radius: 0.375rem;
|
|
border: 1px solid var(--color-base-300);
|
|
background: var(--color-base-100);
|
|
color: var(--color-base-content);
|
|
padding: 0.25rem;
|
|
box-shadow: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1);
|
|
}
|
|
|
|
.select-popover[aria-hidden="true"],
|
|
[data-popover][aria-hidden="true"] {
|
|
display: none;
|
|
}
|
|
|
|
.select-listbox,
|
|
[role="listbox"] {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.select-option,
|
|
[role="option"] {
|
|
position: relative;
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
padding: 0.375rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
outline: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.select-option[aria-hidden="true"],
|
|
[role="option"][aria-hidden="true"] {
|
|
display: none;
|
|
}
|
|
|
|
.select-option:hover,
|
|
.select-option.active,
|
|
.select-option:focus-visible,
|
|
.select-option[aria-selected="true"],
|
|
[role="option"]:hover,
|
|
[role="option"].active,
|
|
[role="option"]:focus-visible {
|
|
background: var(--color-base-200);
|
|
}
|
|
|
|
.select-separator,
|
|
[role="separator"] {
|
|
height: 1px;
|
|
margin: 0.25rem -0.25rem;
|
|
background: var(--color-base-300);
|
|
}
|
|
|
|
.select-group-label,
|
|
[role="listbox"] [role="heading"] {
|
|
display: flex;
|
|
padding: 0.375rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
|
}
|
|
|
|
/* SutraUI Input Group — used by live_table for the search box. */
|
|
.input-group {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.input-group-prefix,
|
|
.input-group-suffix {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.input-group-prefix { left: 0.75rem; }
|
|
.input-group-suffix { right: 0.75rem; }
|
|
|
|
.input-group-prefix-icon,
|
|
.input-group-suffix-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.input-group-prefix-icon svg,
|
|
.input-group-suffix-icon svg { width: 1rem; height: 1rem; }
|
|
|
|
.input-group-prefix-icon { left: 0.75rem; }
|
|
.input-group-suffix-icon { right: 0.75rem; }
|
|
|
|
/* SutraUI Dropdown Menu — used by live_table for the Export button. */
|
|
.dropdown-menu {
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.dropdown-menu-trigger {
|
|
display: flex;
|
|
height: 2.25rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
border-radius: 0.375rem;
|
|
border: 1px solid var(--color-base-300);
|
|
background: var(--color-base-100);
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
color: var(--color-base-content);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dropdown-menu-trigger:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--color-primary);
|
|
}
|
|
|
|
.dropdown-menu-chevron {
|
|
flex-shrink: 0;
|
|
opacity: 0.5;
|
|
transition: transform 150ms;
|
|
}
|
|
|
|
.dropdown-menu:has([aria-expanded="true"]) .dropdown-menu-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.dropdown-menu [role="menuitem"],
|
|
.dropdown-menu [role="menuitemcheckbox"],
|
|
.dropdown-menu [role="menuitemradio"] {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
border-radius: 0.25rem;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
outline: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.dropdown-menu [role="menuitem"][aria-hidden="true"],
|
|
.dropdown-menu [role="menuitemcheckbox"][aria-hidden="true"],
|
|
.dropdown-menu [role="menuitemradio"][aria-hidden="true"] {
|
|
display: none;
|
|
}
|
|
|
|
.dropdown-menu [role="menuitem"]:focus-visible,
|
|
.dropdown-menu [role="menuitem"]:hover,
|
|
.dropdown-menu [role="menuitem"].active {
|
|
background: var(--color-base-200);
|
|
}
|
|
|
|
/* SutraUI Empty state — used by live_table when no rows match. */
|
|
.empty,
|
|
.empty-outline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3rem 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty header,
|
|
.empty-outline header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.empty h3,
|
|
.empty-outline h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--color-base-content);
|
|
}
|
|
|
|
.empty p,
|
|
.empty-outline p {
|
|
font-size: 0.875rem;
|
|
max-width: 24rem;
|
|
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
|
}
|
|
|
|
.empty-icon {
|
|
margin-bottom: 1rem;
|
|
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
|
}
|
|
|
|
.empty-icon > svg { width: 3rem; height: 3rem; }
|
|
|
|
.empty-outline {
|
|
border: 2px dashed var(--color-base-300);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
/* live_table outer container should have a visible surface + border. */
|
|
#live-table table { background: var(--color-base-100); }
|
|
|
|
/* Clickable rows: whole-row click delegates to the first <a> in the row
|
|
(typically the Actions column's "View" link). The cursor + hover tint
|
|
make it feel interactive; the actual navigation is wired up in app.ts. */
|
|
#live-table tbody tr[id] {
|
|
cursor: pointer;
|
|
transition: background-color 120ms ease;
|
|
}
|
|
|
|
#live-table tbody tr[id]:hover {
|
|
background: color-mix(in oklch, var(--color-primary) 6%, transparent);
|
|
}
|
|
|
|
#live-table tbody tr#empty-placeholder {
|
|
cursor: default;
|
|
}
|
|
|
|
#live-table tbody tr#empty-placeholder:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Filter bar used when filters are configured. */
|
|
.filter-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.filter-bar-grid {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
grid-template-columns: repeat(var(--filter-cols, 3), minmax(0, 1fr));
|
|
}
|
|
|
|
.filter-bar-cols-1 { --filter-cols: 1; }
|
|
.filter-bar-cols-2 { --filter-cols: 2; }
|
|
.filter-bar-cols-3 { --filter-cols: 3; }
|
|
|
|
.filter-bar-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.filter-bar-clear {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.875rem;
|
|
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.filter-bar-clear:hover { color: var(--color-base-content); }
|