feat: theme changes, composer tweaks, in app update ux, finesse
This commit is contained in:
Brooklyn Nicholson
+130
-6
@@ -3,6 +3,14 @@
|
||||
@import 'tw-shimmer';
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@font-face {
|
||||
font-family: 'Collapse';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../../../node_modules/@nous-research/ui/dist/fonts/Collapse-Bold.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--dt-background);
|
||||
--color-foreground: var(--dt-foreground);
|
||||
@@ -59,8 +67,8 @@
|
||||
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);
|
||||
--shadow-composer-focus:
|
||||
0 0 0 0.125rem color-mix(in srgb, var(--dt-ring) 14%, transparent),
|
||||
0 0 0 0.0625rem color-mix(in srgb, var(--dt-ring) 26%, transparent),
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -102,11 +110,10 @@
|
||||
--radius: 0.75rem;
|
||||
--radius-scalar: 0.2;
|
||||
|
||||
--thread-composer-clearance: 10dvh;
|
||||
/* 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);
|
||||
|
||||
--composer-shell-pad-block-end: 2.5rem;
|
||||
--thread-bottom-pad: clamp(2rem, 4dvh, 3.5rem);
|
||||
|
||||
--message-text-indent: 1.5rem;
|
||||
|
||||
--composer-width: 88%;
|
||||
@@ -114,12 +121,19 @@
|
||||
--composer-control-primary-size: 2.125rem;
|
||||
--composer-control-gap: 0.375rem;
|
||||
--composer-row-gap: 0.375rem;
|
||||
--composer-ring-strength: 1;
|
||||
--composer-surface-pad-x: 0.625rem;
|
||||
--composer-surface-pad-y: 0.5rem;
|
||||
--composer-input-min-height: 2rem;
|
||||
--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,
|
||||
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);
|
||||
@@ -128,6 +142,7 @@
|
||||
--chat-min-width: 24rem;
|
||||
--titlebar-control-size: 1.25rem;
|
||||
--titlebar-control-height: 1.375rem;
|
||||
--sidebar-content-inline-padding: 1rem;
|
||||
|
||||
--sidebar: var(--dt-sidebar-bg);
|
||||
--sidebar-foreground: var(--dt-foreground);
|
||||
@@ -138,17 +153,22 @@
|
||||
--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);
|
||||
|
||||
--midground: var(--dt-midground);
|
||||
--background: var(--dt-background);
|
||||
--foreground: var(--dt-foreground);
|
||||
|
||||
--warm-glow: color-mix(in srgb, var(--dt-midground) 35%, 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;
|
||||
--backdrop-invert-mul: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -240,6 +260,10 @@
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
:root.dark .arc-border {
|
||||
--arc-c1: var(--dt-foreground);
|
||||
}
|
||||
|
||||
.arc-border::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -307,6 +331,47 @@ canvas {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
/* Shared input chrome — mirrors composer hover/focus FX. Unlayered to beat Tailwind utilities. */
|
||||
.desktop-input-chrome {
|
||||
--ring-pct: 18%;
|
||||
--ring-fall: var(--dt-input);
|
||||
background: color-mix(in srgb, var(--dt-card) 68%, transparent);
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--dt-composer-ring) calc(var(--ring-pct) * var(--composer-ring-strength)),
|
||||
var(--ring-fall)
|
||||
);
|
||||
box-shadow: var(--shadow-composer);
|
||||
transition:
|
||||
background-color 200ms ease-out,
|
||||
border-color 200ms ease-out,
|
||||
box-shadow 200ms ease-out;
|
||||
}
|
||||
|
||||
.desktop-input-chrome:hover {
|
||||
--ring-pct: 30%;
|
||||
background: color-mix(in srgb, var(--dt-card) 86%, transparent);
|
||||
}
|
||||
|
||||
.desktop-input-chrome:focus {
|
||||
--ring-pct: 45%;
|
||||
--ring-fall: transparent;
|
||||
background: var(--dt-card);
|
||||
box-shadow: var(--shadow-composer-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.desktop-input-chrome[aria-invalid='true'] {
|
||||
border-color: var(--dt-destructive);
|
||||
}
|
||||
|
||||
.desktop-input-chrome[aria-invalid='true']:focus {
|
||||
box-shadow:
|
||||
0 0 0 0.125rem color-mix(in srgb, var(--dt-destructive) 18%, transparent),
|
||||
0 0 0 0.0625rem color-mix(in srgb, var(--dt-destructive) 34%, transparent),
|
||||
0 0.1875rem 0.625rem color-mix(in srgb, var(--dt-destructive) 12%, transparent);
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.scrollbar-dt,
|
||||
.scrollbar-dt * {
|
||||
@@ -347,11 +412,28 @@ canvas {
|
||||
}
|
||||
}
|
||||
|
||||
/* Last thread row with a message root — avoids composer overlap (Chromium/Electron). */
|
||||
[data-slot='aui_thread-content']
|
||||
> :nth-last-child(
|
||||
1
|
||||
of
|
||||
:is(
|
||||
[data-slot='aui_assistant-message-root'],
|
||||
[data-slot='aui_user-message-root'],
|
||||
[data-slot='aui_system-message-root'],
|
||||
[data-slot='aui_edit-composer-root'],
|
||||
[data-slot='aui_response-loading']
|
||||
)
|
||||
) {
|
||||
margin-bottom: var(--thread-last-message-clearance);
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-content'] {
|
||||
padding-left: var(--message-text-indent);
|
||||
}
|
||||
|
||||
[data-slot='aui_assistant-message-content'] > [data-slot='tool-block'] {
|
||||
[data-slot='aui_assistant-message-content'] > [data-slot='tool-block'],
|
||||
[data-slot='aui_assistant-message-content'] > [data-slot='aui_thinking-disclosure'] {
|
||||
margin-inline-start: calc(-1 * var(--message-text-indent));
|
||||
width: calc(100% + var(--message-text-indent));
|
||||
max-width: calc(100% + var(--message-text-indent));
|
||||
@@ -398,6 +480,48 @@ canvas {
|
||||
margin-top: 0.875rem;
|
||||
}
|
||||
|
||||
/* 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='tool-block']:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Message action bars — flat icon hits with default dim; only the hovered/focused control is full-strength. */
|
||||
[data-slot='aui_msg-actions'] button {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
color: var(--color-muted-foreground);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
[data-slot='aui_msg-actions'] button:hover {
|
||||
background: transparent;
|
||||
color: var(--color-foreground);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-slot='aui_msg-actions'] button:active {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
[data-slot='aui_msg-actions'] button:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-slot='aui_msg-actions'] button svg {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user