Merge remote-tracking branch 'origin/main' into recorder-2
This commit is contained in:
+71
-23
@@ -3064,31 +3064,24 @@ input.leaf-rename:focus {
|
||||
}
|
||||
|
||||
/* The composer is a sibling of the scrolling transcript, not part of it: it
|
||||
stays reachable at the pane edge without changing transcript scroll math. */
|
||||
stays reachable at the pane edge without changing transcript scroll math.
|
||||
It is a flush band at the foot of the pane rather than a floating card: its
|
||||
own `--surface` fill is what separates it from the transcript, over a
|
||||
hairline that doubles as the focus indicator. Inner metrics line the draft
|
||||
up with the transcript's own 12px gutter. */
|
||||
.structured-composer {
|
||||
flex: 0 0 auto;
|
||||
margin: var(--sp-2) var(--sp-3) max(var(--sp-2), env(safe-area-inset-bottom));
|
||||
padding: var(--sp-1);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--r-3);
|
||||
padding: var(--sp-1) var(--sp-1) max(var(--sp-1), env(safe-area-inset-bottom));
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: var(--sp-1);
|
||||
box-shadow:
|
||||
inset 0 1px 0 color-mix(in oklab, var(--ink) 6%, transparent),
|
||||
var(--shadow-1);
|
||||
transition:
|
||||
border-color var(--dur-fast) var(--ease-out),
|
||||
box-shadow var(--dur-fast) var(--ease-out);
|
||||
transition: border-color var(--dur-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.structured-composer:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow:
|
||||
inset 0 1px 0 color-mix(in oklab, var(--ink) 8%, transparent),
|
||||
0 0 0 3px var(--accent-tint),
|
||||
var(--shadow-1);
|
||||
border-top-color: var(--accent);
|
||||
}
|
||||
|
||||
.structured-input-wrap {
|
||||
@@ -3097,6 +3090,45 @@ input.leaf-rename:focus {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.structured-attachments {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-1);
|
||||
padding: var(--sp-1);
|
||||
}
|
||||
|
||||
.structured-attachments[hidden] { display: none; }
|
||||
|
||||
.structured-attachment {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
padding-left: var(--sp-2);
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-1);
|
||||
font-size: var(--fs-11);
|
||||
}
|
||||
|
||||
.structured-attachment > span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.structured-attachment button {
|
||||
flex-shrink: 0;
|
||||
min-width: var(--tap);
|
||||
min-height: var(--tap);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.structured-attachment button:hover { color: var(--ink); }
|
||||
.structured-attachment button:disabled { opacity: 0.5; }
|
||||
|
||||
.structured-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -3114,6 +3146,10 @@ input.leaf-rename:focus {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.structured-input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.structured-composer .structured-send,
|
||||
.structured-composer .structured-cancel {
|
||||
height: 40px;
|
||||
@@ -3171,17 +3207,29 @@ input.leaf-rename:focus {
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
/* One row cannot hold a draft plus three controls at phone width — the
|
||||
draft gets a line of its own and the controls drop below it. */
|
||||
.structured-composer {
|
||||
margin: var(--sp-1) 0 0;
|
||||
padding-bottom: calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-radius: var(--r-2) var(--r-2) 0 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
padding-left: var(--sp-2);
|
||||
padding-right: var(--sp-2);
|
||||
}
|
||||
|
||||
/* `order` keeps the draft on the first line: without it the attach button,
|
||||
which precedes it in the DOM, wraps onto a line of its own. */
|
||||
.structured-input-wrap {
|
||||
flex: 1 1 100%;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.structured-composer .structured-config {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.structured-config-menu {
|
||||
right: calc(-1 * (var(--control-h) + var(--sp-2)));
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user