feat: glass ui pass
This commit is contained in:
Brooklyn Nicholson
+482
-74
@@ -2,6 +2,7 @@
|
||||
@plugin '@tailwindcss/typography';
|
||||
@import 'tw-shimmer';
|
||||
@import 'katex/dist/katex.min.css';
|
||||
@import '@vscode/codicons/dist/codicon.css';
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@font-face {
|
||||
@@ -60,87 +61,217 @@
|
||||
--color-sidebar: var(--sidebar);
|
||||
|
||||
--shadow-ink: var(--dt-foreground);
|
||||
--shadow-xs: 0 0.0625rem 0.125rem color-mix(in srgb, #000 5%, transparent);
|
||||
--shadow-sm:
|
||||
0 0 0 0.0625rem color-mix(in srgb, var(--dt-foreground) 6%, transparent),
|
||||
0 0.125rem 0.5rem color-mix(in srgb, #000 4%, transparent);
|
||||
--shadow-md:
|
||||
0 0 0 0.0625rem color-mix(in srgb, var(--dt-foreground) 8%, transparent),
|
||||
0 0.25rem 1rem color-mix(in srgb, #000 8%, transparent),
|
||||
0 1rem 2rem -1.5rem color-mix(in srgb, #000 18%, transparent);
|
||||
--shadow-lg:
|
||||
inset 0 0.0625rem 0 color-mix(in srgb, #fff 28%, transparent),
|
||||
0 0 0 0.0625rem color-mix(in srgb, var(--dt-foreground) 8%, transparent),
|
||||
0 0.75rem 2rem color-mix(in srgb, #000 12%, transparent);
|
||||
--shadow-header:
|
||||
0 0.5rem 0.875rem -0.375rem color-mix(in srgb, var(--dt-background) 96%, transparent),
|
||||
0 1.25rem 2rem -0.875rem color-mix(in srgb, var(--dt-background) 82%, transparent),
|
||||
0 2rem 3rem -1.5rem color-mix(in srgb, var(--dt-background) 55%, transparent);
|
||||
0 0.0625rem 0 color-mix(in srgb, var(--dt-foreground) 7%, transparent),
|
||||
0 0.625rem 1.5rem -1.25rem color-mix(in srgb, #000 16%, transparent);
|
||||
--shadow-composer:
|
||||
0 0 0 0.0625rem color-mix(in srgb, var(--shadow-ink) 4%, transparent),
|
||||
0 0.0625rem 0.25rem color-mix(in srgb, var(--shadow-ink) 3%, transparent);
|
||||
0 0.0625rem 0.125rem color-mix(in srgb, #000 5%, transparent);
|
||||
--shadow-composer-focus:
|
||||
0 0 0 0.125rem color-mix(in srgb, var(--dt-composer-ring) calc(14% * var(--composer-ring-strength)), transparent),
|
||||
0 0 0 0.0625rem color-mix(in srgb, var(--dt-composer-ring) calc(26% * var(--composer-ring-strength)), transparent),
|
||||
0 0.1875rem 0.625rem color-mix(in srgb, var(--shadow-ink) 4%, transparent);
|
||||
0 0 0 0.125rem color-mix(in srgb, var(--dt-composer-ring) calc(10% * var(--composer-ring-strength)), transparent),
|
||||
0 0 0 0.0625rem color-mix(in srgb, var(--dt-composer-ring) calc(22% * var(--composer-ring-strength)), transparent),
|
||||
0 0.25rem 0.875rem color-mix(in srgb, #000 8%, transparent),
|
||||
0 0.75rem 2rem -1.25rem color-mix(in srgb, #000 14%, transparent);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
color-scheme: light;
|
||||
|
||||
--dt-background: #f7f7f7;
|
||||
--dt-foreground: #242424;
|
||||
--dt-card: #ffffff;
|
||||
--dt-card-foreground: #242424;
|
||||
--dt-muted: #f0f0ef;
|
||||
--dt-muted-foreground: #737373;
|
||||
--dt-popover: #ffffff;
|
||||
--dt-popover-foreground: #242424;
|
||||
--dt-primary: #cf806d;
|
||||
--dt-primary-foreground: #ffffff;
|
||||
--dt-secondary: #f1f1f0;
|
||||
--dt-secondary-foreground: #2d2d2d;
|
||||
--dt-accent: #eeeeed;
|
||||
--dt-accent-foreground: #242424;
|
||||
--dt-border: #dfdfdc;
|
||||
--dt-input: #ddddda;
|
||||
--dt-ring: #b97969;
|
||||
--dt-destructive: #b94a3a;
|
||||
--theme-foreground: #17171a;
|
||||
--theme-primary: #0053fd;
|
||||
--theme-secondary: color-mix(in srgb, #0053fd 7%, #ffffff);
|
||||
--theme-accent-soft: color-mix(in srgb, #0053fd 10%, #ffffff);
|
||||
--theme-midground: #0053fd;
|
||||
--theme-warm: #cf806d;
|
||||
--theme-background-seed: #f8faff;
|
||||
--theme-sidebar-seed: #f3f7ff;
|
||||
--theme-card-seed: #ffffff;
|
||||
--theme-elevated-seed: #ffffff;
|
||||
--theme-bubble-seed: color-mix(in srgb, #0053fd 6%, #ffffff);
|
||||
--theme-neutral-chrome: #f3f3f3;
|
||||
--theme-neutral-sidebar: #f3f3f3;
|
||||
--theme-neutral-card: #fcfcfc;
|
||||
--theme-mix-chrome: 44%;
|
||||
--theme-mix-sidebar: 36%;
|
||||
--theme-mix-card: 22%;
|
||||
--theme-mix-elevated: 28%;
|
||||
--theme-mix-bubble: 30%;
|
||||
--theme-fill-primary-accent-mix: 16%;
|
||||
--theme-fill-secondary-accent-mix: 11%;
|
||||
--theme-fill-tertiary-accent-mix: 8%;
|
||||
--theme-fill-quaternary-accent-mix: 5%;
|
||||
--theme-fill-quinary-accent-mix: 3%;
|
||||
--theme-stroke-primary-accent-mix: 24%;
|
||||
--theme-stroke-secondary-accent-mix: 16%;
|
||||
--theme-stroke-tertiary-accent-mix: 10%;
|
||||
--theme-stroke-quaternary-accent-mix: 6%;
|
||||
|
||||
--ui-base: var(--theme-foreground);
|
||||
--ui-accent: var(--theme-midground);
|
||||
--ui-accent-secondary: var(--theme-primary);
|
||||
--ui-warm: var(--theme-warm);
|
||||
--ui-red: #cf2d56;
|
||||
--ui-orange: #db704b;
|
||||
--ui-yellow: #c08532;
|
||||
--ui-green: #1f8a65;
|
||||
--ui-cyan: #4c7f8c;
|
||||
--ui-blue: #0053fd;
|
||||
--ui-purple: #9e94d5;
|
||||
--ui-bg-chrome: color-mix(in srgb, var(--theme-background-seed) var(--theme-mix-chrome), var(--theme-neutral-chrome));
|
||||
--ui-bg-sidebar: color-mix(in srgb, var(--theme-sidebar-seed) var(--theme-mix-sidebar), var(--theme-neutral-sidebar));
|
||||
--ui-bg-editor: color-mix(in srgb, var(--theme-card-seed) var(--theme-mix-card), var(--theme-neutral-card));
|
||||
--ui-bg-elevated: color-mix(in srgb, var(--theme-elevated-seed) var(--theme-mix-elevated), var(--theme-neutral-card));
|
||||
--ui-bg-card: color-mix(
|
||||
in srgb,
|
||||
var(--ui-accent) 4%,
|
||||
color-mix(in srgb, var(--ui-base) 4%, transparent)
|
||||
);
|
||||
--ui-bg-input: #fcfcfc;
|
||||
--ui-bg-primary: color-mix(
|
||||
in srgb,
|
||||
var(--ui-accent) var(--theme-fill-primary-accent-mix),
|
||||
color-mix(in srgb, var(--ui-base) 10%, transparent)
|
||||
);
|
||||
--ui-bg-secondary: color-mix(
|
||||
in srgb,
|
||||
var(--ui-accent) var(--theme-fill-secondary-accent-mix),
|
||||
color-mix(in srgb, var(--ui-base) 7%, transparent)
|
||||
);
|
||||
--ui-bg-tertiary: color-mix(
|
||||
in srgb,
|
||||
var(--ui-accent) var(--theme-fill-tertiary-accent-mix),
|
||||
color-mix(in srgb, var(--ui-base) 5%, transparent)
|
||||
);
|
||||
--ui-bg-quaternary: color-mix(
|
||||
in srgb,
|
||||
var(--ui-accent) var(--theme-fill-quaternary-accent-mix),
|
||||
color-mix(in srgb, var(--ui-base) 4%, transparent)
|
||||
);
|
||||
--ui-bg-quinary: color-mix(
|
||||
in srgb,
|
||||
var(--ui-accent) var(--theme-fill-quinary-accent-mix),
|
||||
color-mix(in srgb, var(--ui-base) 3%, transparent)
|
||||
);
|
||||
--ui-text-primary: color-mix(in srgb, var(--ui-base) 94%, transparent);
|
||||
--ui-text-secondary: color-mix(in srgb, var(--ui-base) 74%, transparent);
|
||||
--ui-text-tertiary: color-mix(in srgb, var(--ui-base) 54%, transparent);
|
||||
--ui-text-quaternary: color-mix(in srgb, var(--ui-base) 36%, transparent);
|
||||
--ui-stroke-primary: color-mix(
|
||||
in srgb,
|
||||
var(--ui-accent) var(--theme-stroke-primary-accent-mix),
|
||||
color-mix(in srgb, var(--ui-base) 10%, transparent)
|
||||
);
|
||||
--ui-stroke-secondary: color-mix(
|
||||
in srgb,
|
||||
var(--ui-accent) var(--theme-stroke-secondary-accent-mix),
|
||||
color-mix(in srgb, var(--ui-base) 7%, transparent)
|
||||
);
|
||||
--ui-stroke-tertiary: color-mix(
|
||||
in srgb,
|
||||
var(--ui-accent) var(--theme-stroke-tertiary-accent-mix),
|
||||
color-mix(in srgb, var(--ui-base) 5%, transparent)
|
||||
);
|
||||
--ui-stroke-quaternary: color-mix(
|
||||
in srgb,
|
||||
var(--ui-accent) var(--theme-stroke-quaternary-accent-mix),
|
||||
color-mix(in srgb, var(--ui-base) 3%, transparent)
|
||||
);
|
||||
--glass-sash-hover-border: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-stroke-tertiary));
|
||||
--glass-sash-hover-background: color-mix(in srgb, var(--ui-accent) 6%, transparent);
|
||||
--glass-surface-background: var(--ui-bg-editor);
|
||||
--glass-sidebar-surface-background: var(--ui-bg-sidebar);
|
||||
--glass-chat-surface-background: var(--ui-bg-chrome);
|
||||
--glass-editor-surface-background: var(--ui-bg-chrome);
|
||||
--glass-chat-bubble-background: color-mix(in srgb, var(--theme-bubble-seed) var(--theme-mix-bubble), var(--theme-neutral-card));
|
||||
--glass-chat-bubble-opaque-background: var(--ui-bg-editor);
|
||||
--glass-inline-code-background: color-mix(in srgb, #141414 5%, transparent);
|
||||
--glass-inline-code-border: color-mix(in srgb, #141414 8%, transparent);
|
||||
--glass-inline-code-foreground: color-mix(in srgb, #141414 88%, transparent);
|
||||
|
||||
--dt-background: var(--ui-bg-chrome);
|
||||
--dt-foreground: var(--ui-text-primary);
|
||||
--dt-card: var(--ui-bg-editor);
|
||||
--dt-card-foreground: var(--ui-text-primary);
|
||||
--dt-muted: var(--ui-bg-tertiary);
|
||||
--dt-muted-foreground: var(--ui-text-tertiary);
|
||||
--dt-popover: color-mix(in srgb, var(--ui-bg-elevated) 96%, transparent);
|
||||
--dt-popover-foreground: var(--ui-text-primary);
|
||||
--dt-primary: var(--theme-primary);
|
||||
--dt-primary-foreground: #fcfcfc;
|
||||
--dt-secondary: var(--theme-secondary);
|
||||
--dt-secondary-foreground: var(--ui-text-secondary);
|
||||
--dt-accent: var(--theme-accent-soft);
|
||||
--dt-accent-foreground: var(--ui-text-primary);
|
||||
--dt-border: var(--ui-stroke-secondary);
|
||||
--dt-input: var(--ui-stroke-primary);
|
||||
--dt-ring: var(--ui-stroke-primary);
|
||||
--dt-composer-ring: var(--ui-base);
|
||||
--dt-destructive: #cf2d56;
|
||||
--dt-destructive-foreground: #ffffff;
|
||||
--dt-sidebar-bg: #fafafa;
|
||||
--dt-sidebar-border: #e2e2df;
|
||||
--dt-user-bubble: #f2f2f1;
|
||||
--dt-user-bubble-border: #dededb;
|
||||
--dt-sidebar-bg: var(--ui-bg-sidebar);
|
||||
--dt-sidebar-border: var(--ui-stroke-secondary);
|
||||
--dt-user-bubble: var(--ui-bg-editor);
|
||||
--dt-user-bubble-border: var(--ui-stroke-tertiary);
|
||||
|
||||
--dt-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
|
||||
--dt-font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
|
||||
--dt-base-size: 0.875rem;
|
||||
--dt-line-height: 1.55;
|
||||
--dt-font-sans: 'Segoe WPC', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
|
||||
--dt-font-mono: 'Cascadia Code', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
|
||||
--dt-base-size: 1rem;
|
||||
--dt-line-height: 1.5;
|
||||
--dt-letter-spacing: 0;
|
||||
--dt-spacing-mul: 1;
|
||||
|
||||
--radius: 0.75rem;
|
||||
--radius-scalar: 0.2;
|
||||
--radius-scalar: 0.6;
|
||||
|
||||
/* Space under last message vs overlay composer — driven by the measured composer height (see composer/index.tsx). */
|
||||
--thread-last-message-clearance: calc(var(--composer-measured-height) + 1.25rem);
|
||||
--thread-last-message-clearance: calc(var(--composer-measured-height) + 2rem);
|
||||
|
||||
--composer-shell-pad-block-end: 2.5rem;
|
||||
--message-text-indent: 1.5rem;
|
||||
--composer-shell-pad-block-end: 0.625rem;
|
||||
--message-text-indent: 0.75rem;
|
||||
--conversation-text-font-size: 0.8125rem;
|
||||
--conversation-tool-font-size: var(--conversation-text-font-size);
|
||||
--conversation-caption-font-size: 0.75rem;
|
||||
--conversation-line-height: 1.125rem;
|
||||
--conversation-caption-line-height: 1rem;
|
||||
--conversation-turn-gap: 0.375rem;
|
||||
--file-tree-row-height: 1.375rem;
|
||||
|
||||
--composer-width: 88%;
|
||||
--composer-control-size: 2rem;
|
||||
--composer-control-primary-size: 2.125rem;
|
||||
--composer-control-gap: 0.375rem;
|
||||
--composer-row-gap: 0.375rem;
|
||||
--composer-width: 48.75rem;
|
||||
--composer-control-size: 1.75rem;
|
||||
--composer-control-primary-size: 1.875rem;
|
||||
--composer-control-gap: 0.25rem;
|
||||
--composer-row-gap: 0.25rem;
|
||||
--composer-ring-strength: 1;
|
||||
--composer-surface-pad-x: 0.625rem;
|
||||
--composer-surface-pad-y: 0.5rem;
|
||||
--composer-input-min-height: 2rem;
|
||||
--composer-surface-pad-x: 0.5rem;
|
||||
--composer-surface-pad-y: 0.3125rem;
|
||||
--composer-input-min-height: 1.625rem;
|
||||
--composer-input-max-height: 9.375rem;
|
||||
--composer-input-inline-min-width: 8rem;
|
||||
--composer-fallback-height: 2.75rem;
|
||||
--composer-measured-height: calc(0.5rem + var(--composer-shell-pad-block-end) + var(--composer-fallback-height));
|
||||
--composer-surface-measured-height: var(--composer-fallback-height);
|
||||
--thread-viewport-height: max(
|
||||
0px,
|
||||
0rem,
|
||||
calc(100% - var(--composer-measured-height) + var(--composer-surface-measured-height))
|
||||
);
|
||||
--vsq: min(0.5vh, 0.5vw);
|
||||
--image-preview-max-width: 34rem;
|
||||
--image-preview-height: clamp(16.25rem, calc(var(--vsq) * 100), 26.25rem);
|
||||
|
||||
--sidebar-width: 14rem;
|
||||
--chat-min-width: 24rem;
|
||||
--sidebar-width: 14.8125rem;
|
||||
--chat-min-width: 28rem;
|
||||
--titlebar-control-size: 1.25rem;
|
||||
--titlebar-control-height: 1.375rem;
|
||||
--sidebar-content-inline-padding: 1rem;
|
||||
@@ -153,23 +284,64 @@
|
||||
--sidebar-accent-foreground: var(--dt-accent-foreground);
|
||||
--sidebar-border: var(--dt-sidebar-border);
|
||||
--sidebar-ring: var(--dt-ring);
|
||||
--sidebar-edge-border: color-mix(in srgb, var(--dt-sidebar-border) 42%, transparent);
|
||||
--chrome-action-hover: color-mix(in srgb, var(--dt-accent) 72%, transparent);
|
||||
--sidebar-edge-border: color-mix(in srgb, var(--ui-base) 7.5%, transparent);
|
||||
--chrome-action-hover: var(--ui-bg-tertiary);
|
||||
|
||||
--midground: var(--dt-midground);
|
||||
--background: var(--dt-background);
|
||||
--foreground: var(--dt-foreground);
|
||||
|
||||
--warm-glow: color-mix(in srgb, var(--dt-midground) 35%, transparent);
|
||||
--warm-glow: color-mix(in srgb, var(--ui-warm) 32%, color-mix(in srgb, var(--ui-accent) 6%, transparent));
|
||||
/* `--noise-opacity-mul` is set per-mode by `applyTheme()`. */
|
||||
--noise-opacity-mul: 1;
|
||||
--backdrop-invert-mul: 1;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--sidebar-edge-border: color-mix(in srgb, var(--dt-sidebar-border) 78%, transparent);
|
||||
--composer-ring-strength: 1.65;
|
||||
--ui-base: #ffe6cb;
|
||||
--ui-accent: #0053fd;
|
||||
--ui-accent-secondary: #ffe6cb;
|
||||
--ui-warm: #ffe6cb;
|
||||
--ui-red: #e75e78;
|
||||
--ui-orange: #db704b;
|
||||
--ui-yellow: #c08532;
|
||||
--ui-green: #55a583;
|
||||
--ui-cyan: #6f9ba6;
|
||||
--ui-blue: #0053fd;
|
||||
--ui-purple: #9e94d5;
|
||||
--ui-bg-chrome: #0d1d3a;
|
||||
--ui-bg-sidebar: #0a1833;
|
||||
--ui-bg-editor: #101827;
|
||||
--ui-bg-elevated: #121d32;
|
||||
--ui-bg-input: #131316;
|
||||
--dt-background: var(--ui-bg-chrome);
|
||||
--dt-foreground: var(--ui-text-primary);
|
||||
--dt-card: var(--ui-bg-elevated);
|
||||
--dt-card-foreground: var(--ui-text-primary);
|
||||
--dt-muted: var(--ui-bg-tertiary);
|
||||
--dt-muted-foreground: var(--ui-text-tertiary);
|
||||
--dt-popover: color-mix(in srgb, var(--ui-bg-elevated) 96%, transparent);
|
||||
--dt-popover-foreground: var(--ui-text-primary);
|
||||
--dt-primary: var(--ui-accent);
|
||||
--dt-primary-foreground: #0b0b0c;
|
||||
--dt-secondary: var(--ui-bg-secondary);
|
||||
--dt-secondary-foreground: var(--ui-text-secondary);
|
||||
--dt-accent: var(--ui-bg-tertiary);
|
||||
--dt-accent-foreground: var(--ui-text-primary);
|
||||
--dt-border: var(--ui-stroke-secondary);
|
||||
--dt-input: var(--ui-stroke-primary);
|
||||
--dt-ring: var(--ui-stroke-primary);
|
||||
--dt-composer-ring: var(--ui-base);
|
||||
--dt-sidebar-bg: var(--ui-bg-sidebar);
|
||||
--dt-sidebar-border: var(--ui-stroke-secondary);
|
||||
--dt-user-bubble: var(--ui-bg-elevated);
|
||||
--dt-user-bubble-border: var(--ui-stroke-tertiary);
|
||||
--sidebar-edge-border: color-mix(in srgb, var(--ui-base) 12%, transparent);
|
||||
--composer-ring-strength: 1.3;
|
||||
--backdrop-invert-mul: 0;
|
||||
--glass-inline-code-background: color-mix(in srgb, #ffffff 7%, transparent);
|
||||
--glass-inline-code-border: color-mix(in srgb, #ffffff 10%, transparent);
|
||||
--glass-inline-code-foreground: color-mix(in srgb, #ffffff 88%, transparent);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -189,9 +361,10 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--dt-background);
|
||||
background: var(--glass-chat-surface-background);
|
||||
color: var(--dt-foreground);
|
||||
font-family: var(--dt-font-sans);
|
||||
font-size: 0.8125rem;
|
||||
line-height: var(--dt-line-height, 1.55);
|
||||
letter-spacing: var(--dt-letter-spacing, 0);
|
||||
overflow: hidden;
|
||||
@@ -212,7 +385,7 @@
|
||||
}
|
||||
|
||||
.dither {
|
||||
background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 2px 2px;
|
||||
background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 0.125rem 0.125rem;
|
||||
}
|
||||
|
||||
:root:not([style*='--theme-asset-bg:']) .theme-default-filler {
|
||||
@@ -226,7 +399,7 @@
|
||||
@layer utilities {
|
||||
[class*='rounded-full'],
|
||||
[class*=':rounded-full'] {
|
||||
border-radius: calc(var(--radius-scalar) * 9999px);
|
||||
border-radius: calc(var(--radius-scalar) * 9999rem);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -244,8 +417,8 @@
|
||||
--arc-c1: var(--dt-midground);
|
||||
--arc-c2: var(--dt-background);
|
||||
--arc-angle: 160deg;
|
||||
--arc-width: 1.25px;
|
||||
--arc-inset: -2px;
|
||||
--arc-width: 0.078125rem;
|
||||
--arc-inset: -0.125rem;
|
||||
--arc-duration: 2.23s;
|
||||
|
||||
pointer-events: none;
|
||||
@@ -300,6 +473,46 @@ button {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
[data-slot='button'] {
|
||||
box-shadow: none;
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
[data-slot='button'][data-variant='outline'],
|
||||
[data-slot='button'][data-variant='secondary'] {
|
||||
border-color: var(--ui-stroke-secondary);
|
||||
background: var(--ui-bg-tertiary);
|
||||
color: var(--ui-text-primary);
|
||||
}
|
||||
|
||||
[data-slot='button'][data-variant='ghost'] {
|
||||
color: var(--ui-text-secondary);
|
||||
}
|
||||
|
||||
[data-slot='button'][data-variant='outline']:hover,
|
||||
[data-slot='button'][data-variant='secondary']:hover,
|
||||
[data-slot='button'][data-variant='ghost']:hover {
|
||||
background: var(--chrome-action-hover);
|
||||
color: var(--ui-text-primary);
|
||||
}
|
||||
|
||||
[data-slot='dropdown-menu-content'],
|
||||
[data-slot='select-content'],
|
||||
[data-slot='dialog-content'] {
|
||||
border-color: var(--ui-stroke-secondary);
|
||||
background: color-mix(in srgb, var(--ui-bg-elevated) 96%, transparent);
|
||||
box-shadow: var(--shadow-md);
|
||||
backdrop-filter: blur(0.75rem) saturate(1.08);
|
||||
-webkit-backdrop-filter: blur(0.75rem) saturate(1.08);
|
||||
}
|
||||
|
||||
[data-slot='dropdown-menu-item']:focus,
|
||||
[data-slot='dropdown-menu-checkbox-item']:focus,
|
||||
[data-slot='dropdown-menu-radio-item']:focus {
|
||||
background: var(--ui-bg-tertiary);
|
||||
color: var(--ui-text-primary);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
[contenteditable]:not([contenteditable='false']),
|
||||
@@ -396,7 +609,7 @@ canvas {
|
||||
.scrollbar-dt::-webkit-scrollbar-thumb,
|
||||
.scrollbar-dt *::-webkit-scrollbar-thumb {
|
||||
background: color-mix(in srgb, var(--dt-midground) 18%, transparent);
|
||||
border-radius: 9999px;
|
||||
border-radius: 9999rem;
|
||||
border: 0.125rem solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
@@ -431,6 +644,147 @@ canvas {
|
||||
|
||||
[data-slot='aui_assistant-message-content'] {
|
||||
padding-left: var(--message-text-indent);
|
||||
font-size: var(--conversation-text-font-size);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-root'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-content'] .aui-md,
|
||||
[data-slot='aui_assistant-message-content'] .aui-md :where(p, li, blockquote, table, pre) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Streamed prose hangs slightly indented from the tool/todo column so the
|
||||
reading column reads as a "reply" within the conversation gutter. Tools,
|
||||
todos, and thinking blocks keep the existing --message-text-indent so they
|
||||
remain flush with the user message text above them. */
|
||||
[data-slot='aui_assistant-message-content'] > .aui-md {
|
||||
padding-inline-start: var(--md-text-indent, 0.5rem);
|
||||
}
|
||||
|
||||
[data-slot='aui_user-message-root'],
|
||||
[data-slot='aui_edit-composer-root'] {
|
||||
font-size: var(--conversation-text-font-size);
|
||||
}
|
||||
|
||||
[data-slot='aui_thread-content'] {
|
||||
max-width: var(--composer-width);
|
||||
padding-inline: 1.5rem;
|
||||
}
|
||||
|
||||
[data-slot='aui_intro'] {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: var(--composer-measured-height);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-slot='aui_intro'] > div {
|
||||
max-width: min(var(--composer-width), 82vw);
|
||||
}
|
||||
|
||||
[data-slot='aui_intro'] p:last-child {
|
||||
max-width: 34rem;
|
||||
margin-inline: auto;
|
||||
color: var(--ui-text-tertiary);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.fit-text {
|
||||
display: flex;
|
||||
font-size: var(--fit-text-min, 1rem);
|
||||
container-type: inline-size;
|
||||
--captured-length: initial;
|
||||
--support-sentinel: var(--captured-length, 9999px);
|
||||
}
|
||||
|
||||
.fit-text > [aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.fit-text > :not([aria-hidden='true']) {
|
||||
flex-grow: 1;
|
||||
container-type: inline-size;
|
||||
--captured-length: 100cqi;
|
||||
--available-space: var(--captured-length);
|
||||
}
|
||||
|
||||
.fit-text > :not([aria-hidden='true']) > * {
|
||||
display: block;
|
||||
inline-size: var(--available-space);
|
||||
line-height: var(--fit-text-line-height, 1);
|
||||
--support-sentinel: inherit;
|
||||
--captured-length: 100cqi;
|
||||
--ratio: tan(atan2(var(--available-space), var(--available-space) - var(--captured-length)));
|
||||
--font-size: clamp(
|
||||
var(--fit-text-min, 1em),
|
||||
1em * var(--ratio),
|
||||
var(--fit-text-max, infinity * 1px) - var(--support-sentinel)
|
||||
);
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
@container (inline-size > 0) {
|
||||
.fit-text > :not([aria-hidden='true']) > * {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@property --captured-length {
|
||||
syntax: '<length>';
|
||||
initial-value: 0px;
|
||||
inherits: true;
|
||||
}
|
||||
|
||||
@property --captured-length2 {
|
||||
syntax: '<length>';
|
||||
initial-value: 0px;
|
||||
inherits: true;
|
||||
}
|
||||
|
||||
[data-slot='composer-root'] {
|
||||
width: min(var(--composer-width), calc(100% - 2rem));
|
||||
padding-bottom: var(--composer-shell-pad-block-end);
|
||||
}
|
||||
|
||||
[data-slot='composer-root'] > .pointer-events-none {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
color-mix(in srgb, var(--glass-chat-surface-background) 88%, transparent)
|
||||
) !important;
|
||||
}
|
||||
|
||||
[data-slot='composer-surface'] {
|
||||
border-color: var(--ui-stroke-secondary) !important;
|
||||
box-shadow: var(--shadow-composer) !important;
|
||||
}
|
||||
|
||||
[data-slot='composer-surface'] > [aria-hidden='true'] {
|
||||
background: var(--glass-chat-bubble-background) !important;
|
||||
backdrop-filter: blur(0.75rem) saturate(1.08);
|
||||
-webkit-backdrop-filter: blur(0.75rem) saturate(1.08);
|
||||
}
|
||||
|
||||
[data-slot='composer-fade'] {
|
||||
min-height: 2.375rem;
|
||||
}
|
||||
|
||||
[data-slot='composer-rich-input'] {
|
||||
color: var(--ui-text-primary);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
[data-slot='composer-rich-input']:empty::before {
|
||||
color: var(--ui-text-tertiary) !important;
|
||||
}
|
||||
|
||||
[data-slot='composer-root']:focus-within [data-slot='composer-surface'] > [aria-hidden='true'] {
|
||||
background: var(--glass-chat-bubble-background) !important;
|
||||
}
|
||||
|
||||
/* Tool/thinking blocks now live at message-text alignment (no leading
|
||||
@@ -457,10 +811,33 @@ canvas {
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-content'] .aui-md :where(.aui-code-header, .aui-shiki, .aui-shiki > pre) {
|
||||
/* Streamdown's adapter wraps code fences in a `data-streamdown="code-block"`
|
||||
container with its own card chrome. We render our own <CodeCard>, so this
|
||||
strips the upstream chrome down to a layout-only passthrough. */
|
||||
[data-slot='aui_assistant-message-content'] .aui-md [data-streamdown='code-block'] {
|
||||
contain: none;
|
||||
overflow: visible;
|
||||
margin-block: 0.375rem !important;
|
||||
padding: 0 !important;
|
||||
gap: 0 !important;
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-content'] .aui-md [data-streamdown='code-block']:has(.aui-prose-fence) {
|
||||
margin-block: 0 !important;
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-content'] .aui-md :not(pre) > code {
|
||||
border: 0.0625rem solid var(--glass-inline-code-border);
|
||||
background: var(--glass-inline-code-background);
|
||||
color: var(--glass-inline-code-foreground);
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-content'] .aui-md :where(.aui-shiki, .aui-shiki > pre) {
|
||||
margin: 0 !important;
|
||||
margin-block-start: 0 !important;
|
||||
margin-block-end: 0 !important;
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-content'] .aui-md .aui-md-table {
|
||||
@@ -478,23 +855,54 @@ canvas {
|
||||
margin-block-end: 0 !important;
|
||||
}
|
||||
|
||||
/* Tool / thinking blocks are scaffolding around the model's reply, so we
|
||||
fade them slightly. The reading column (prose) stays at full strength;
|
||||
scaffolding recedes and lifts back to full opacity on hover/focus so it
|
||||
stays legible when the user actually wants to read it. */
|
||||
[data-slot='aui_assistant-message-content']
|
||||
> :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']) {
|
||||
background: transparent !important;
|
||||
opacity: 0.67;
|
||||
transition: opacity 120ms ease-out;
|
||||
}
|
||||
|
||||
[data-slot='tool-block'] {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-content']
|
||||
> :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']):is(:hover, :focus-within) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Conversation block rhythm. Consecutive tool calls stay tight so a step
|
||||
sequence reads as one action group; the gap between any scaffolding
|
||||
block and adjacent prose bumps up so the model's reply visually
|
||||
separates from its scaffolding. */
|
||||
[data-slot='tool-block'] + [data-slot='tool-block'] {
|
||||
margin-top: 0.25rem;
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
[data-slot='tool-block']:has(> :nth-child(2)) + [data-slot='tool-block'] {
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-content'] [data-slot='tool-block'] + .aui-md,
|
||||
[data-slot='aui_assistant-message-content'] .aui-md + [data-slot='tool-block'] {
|
||||
margin-top: 0.875rem;
|
||||
[data-slot='aui_assistant-message-content']
|
||||
:is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure'])
|
||||
+ .aui-md,
|
||||
[data-slot='aui_assistant-message-content']
|
||||
.aui-md
|
||||
+ :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Reasoning “Thinking” row — same column as message body, not full-bleed like tools */
|
||||
[data-slot='aui_assistant-message-content'] .aui-md + [data-slot='aui_thinking-disclosure'],
|
||||
[data-slot='aui_assistant-message-content'] [data-slot='aui_thinking-disclosure'] + .aui-md {
|
||||
margin-top: 0.375rem;
|
||||
[data-slot='aui_assistant-message-content']
|
||||
[data-slot='aui_thinking-disclosure']
|
||||
+ [data-slot='tool-block'],
|
||||
[data-slot='aui_assistant-message-content']
|
||||
[data-slot='tool-block']
|
||||
+ [data-slot='aui_thinking-disclosure'] {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-content'] > [data-slot='tool-block']:first-child {
|
||||
@@ -552,8 +960,8 @@ canvas {
|
||||
height: 1em;
|
||||
margin-left: 0.18em;
|
||||
vertical-align: middle;
|
||||
border-radius: 1.5px;
|
||||
background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 2px 2px;
|
||||
border-radius: 0.09375rem;
|
||||
background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 0.125rem 0.125rem;
|
||||
color: color-mix(in srgb, var(--dt-foreground) 72%, transparent);
|
||||
box-shadow:
|
||||
-0.8ch 0 1.4ch 0.55em color-mix(in srgb, var(--dt-background) 80%, transparent),
|
||||
|
||||
Reference in New Issue
Block a user