e3a312afc9
With exactly 2 video tiles, the layout branch flex-shrinks tiles to exactly fill the scroll container (fractional heights, bottom tile flush against the scroller's clip edge). In that configuration Chromium's rounded-rect box-shadow fast path misrenders at fractional pixel offsets: the corner shows a straight diagonal wedge instead of a rounded crescent, and the bottom tile's bottom shadow band is clipped entirely by the scroller's overflow. With 3+ tiles the grid branch uses natural (non-fractional) 16:9 heights, so it doesn't hit this. filter: drop-shadow() renders the same offset shadow through a different rasterization path that isn't susceptible to this, and (as a side benefit) isn't clipped by scrollable overflow the way box-shadow's ink overflow is. - VideoCallContent.svelte: shadow-sm -> drop-shadow-sm on video tiles. - base.css: add --drop-shadow/-sm/-lg tokens mirroring the --shadow-* scale, consumed by Tailwind's drop-shadow-* utilities. - clay.css, navy.css: matching --drop-shadow-* overrides in both light and dark. flat.css needs no changes; it inherits base. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
142 lines
4.5 KiB
CSS
142 lines
4.5 KiB
CSS
/* ============================================================================
|
|
clay theme — token values
|
|
----------------------------------------------------------------------------
|
|
Applies under [data-fl-theme="clay"] (stamped on <body> + the app root from
|
|
VITE_THEME). Every theme is selected the same way via its own data-fl-theme
|
|
value — there is no implicit default — so VITE_THEME must be set. These are
|
|
plain CSS variables consumed by:
|
|
- the component classes in base.css (var(--surface), var(--shadow-lg), …)
|
|
- the Tailwind utilities registered in base.css's @theme block
|
|
(bg-surface, text-content-muted, text-primary, rounded-2xl, shadow-lg, …)
|
|
Reskinning = override the same names in another theme file; no markup change.
|
|
|
|
The radius scale (--radius-xl/2xl/3xl) and shadow scale (--shadow/-sm/-lg)
|
|
intentionally reuse Tailwind v4's own variable names so rounded-* / shadow-*
|
|
utilities are themed too. clay's radii match Tailwind's defaults; flat.css
|
|
shrinks them.
|
|
============================================================================ */
|
|
|
|
[data-fl-theme="clay"] {
|
|
--border-thin: 2px;
|
|
--border-thick: 3px;
|
|
|
|
--radius-xl: 0.75rem;
|
|
--radius-2xl: 1rem;
|
|
--radius-3xl: 1.5rem;
|
|
|
|
&[data-theme="light"] {
|
|
--primary: #7161ff;
|
|
--primary-soft: #5a48f0;
|
|
--primary-bold: #8e80ff;
|
|
--primary-content: #ffffff;
|
|
|
|
--secondary: #eb5e28;
|
|
--secondary-soft: #f47845;
|
|
--secondary-bold: #cf4f1d;
|
|
--secondary-content: #ffffff;
|
|
|
|
--success: #06d6a0;
|
|
--success-content: #ffffff;
|
|
--warning: #fd8d0b;
|
|
--warning-content: #ffffff;
|
|
--error: #ef476f;
|
|
--error-content: #ffffff;
|
|
|
|
--backdrop: #f7f5fd;
|
|
--surface: #ffffff;
|
|
--surface-more: #e0dbf1;
|
|
--surface-less: #f3effc;
|
|
|
|
--content: #17122e;
|
|
--content-muted: #554d72;
|
|
--content-subtle: #8d86a6;
|
|
|
|
--line: #d3c7ff;
|
|
--line-more: #b3a4ff;
|
|
--line-less: #e5dcff;
|
|
|
|
/* clay shadow (offset, tinted with the primary) — overrides Tailwind's scale */
|
|
--shadow-color: 113, 97, 255;
|
|
--shadow-sm: 4px 4px 0 rgba(var(--shadow-color), 0.1);
|
|
--shadow: 6px 6px 0 rgba(var(--shadow-color), 0.12);
|
|
--shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.15);
|
|
--shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
--drop-shadow-sm: 4px 4px 0 rgba(var(--shadow-color), 0.1);
|
|
--drop-shadow: 6px 6px 0 rgba(var(--shadow-color), 0.12);
|
|
--drop-shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.15);
|
|
}
|
|
|
|
/* `.primary-nav` opts the primary nav into this dark palette unconditionally */
|
|
&[data-theme="dark"],
|
|
& .primary-nav {
|
|
--primary: #8e80ff;
|
|
--primary-soft: #a394ff;
|
|
--primary-bold: #7161ff;
|
|
--primary-content: #ffffff;
|
|
|
|
--secondary: #f47845;
|
|
--secondary-soft: #f78d61;
|
|
--secondary-bold: #eb5e28;
|
|
--secondary-content: #ffffff;
|
|
|
|
--success: #06d6a0;
|
|
--success-content: #ffffff;
|
|
--warning: #fd8d0b;
|
|
--warning-content: #ffffff;
|
|
--error: #ef476f;
|
|
--error-content: #ffffff;
|
|
|
|
--backdrop: #121019;
|
|
--surface: #232032;
|
|
--surface-more: #100e17;
|
|
--surface-less: #1b1827;
|
|
|
|
--content: #d7d2ea;
|
|
--content-muted: #b4aed0;
|
|
--content-subtle: #918aac;
|
|
|
|
--line: #353050;
|
|
--line-more: #4a4470;
|
|
--line-less: #2a2640;
|
|
|
|
--shadow-color: 0, 0, 0;
|
|
--shadow-sm: 4px 4px 0 rgba(var(--shadow-color), 0.3);
|
|
--shadow: 6px 6px 0 rgba(var(--shadow-color), 0.35);
|
|
--shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.4);
|
|
--shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
|
|
--shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
|
|
|
|
--drop-shadow-sm: 4px 4px 0 rgba(var(--shadow-color), 0.3);
|
|
--drop-shadow: 6px 6px 0 rgba(var(--shadow-color), 0.35);
|
|
--drop-shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.4);
|
|
}
|
|
|
|
.chat-editor .tiptap {
|
|
border-color: var(--line);
|
|
}
|
|
|
|
.role-badge {
|
|
@apply bg-surface border-line rounded-xl;
|
|
border-width: var(--border-thin, 2px);
|
|
border-color: color-mix(in srgb, var(--role-color) 22%, var(--line));
|
|
transition:
|
|
transform 0.15s ease,
|
|
box-shadow 0.15s ease;
|
|
box-shadow:
|
|
4px 4px 0 color-mix(in srgb, var(--role-color) 28%, transparent),
|
|
var(--shadow-inset);
|
|
}
|
|
|
|
.role-badge__dot {
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--role-color) 18%, transparent);
|
|
}
|
|
|
|
.role-badge--md {
|
|
@apply px-2.5 py-1.5;
|
|
box-shadow:
|
|
5px 5px 0 color-mix(in srgb, var(--role-color) 28%, transparent),
|
|
var(--shadow-inset);
|
|
}
|
|
}
|