Refactor UI
This commit is contained in:
dwrz
@@ -127,104 +127,6 @@ body {
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
/* ==================== */
|
||||
/* Collapsible */
|
||||
/* ==================== */
|
||||
|
||||
.collapsible {
|
||||
border-bottom: 1px dashed var(--color-border-light);
|
||||
}
|
||||
|
||||
.collapsible:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.collapsible__content {
|
||||
padding: var(--s-2) var(--s-1);
|
||||
}
|
||||
|
||||
.collapsible__summary::before {
|
||||
content: "▶";
|
||||
font-size: 0.625em;
|
||||
color: var(--color-text-muted);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.collapsible[open] .collapsible__summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.collapsible__content > pre {
|
||||
margin: 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--s-1);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.collapsible__label {
|
||||
font-size: var(--s-1);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.collapsible__pre {
|
||||
margin: 0;
|
||||
padding: var(--s-2);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--s-1);
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius);
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.collapsible__section {
|
||||
margin-bottom: var(--s-2);
|
||||
}
|
||||
|
||||
.collapsible__section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.collapsible__section-label {
|
||||
font-size: var(--s-2);
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.25rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.collapsible__summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-2);
|
||||
padding: var(--s-2) var(--s-1);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.collapsible__summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsible__summary .icon {
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.collapsible--reasoning .collapsible__summary .icon {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
.collapsible--tool .collapsible__summary .icon {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
|
||||
/* ==================== */
|
||||
/* Compose */
|
||||
/* ==================== */
|
||||
@@ -1104,6 +1006,41 @@ body {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Collapsible sections within the tool-call edit modal only.
|
||||
The textarea inside keeps its own border and focus styles so it looks
|
||||
identical to the bare textarea in single-section modals. */
|
||||
.modal__collapsible + .modal__collapsible {
|
||||
margin-top: var(--s-1);
|
||||
}
|
||||
|
||||
.modal__collapsible-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-2);
|
||||
padding: 0 0 var(--s-1) 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
font-size: var(--s-1);
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.modal__collapsible-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal__collapsible-summary::before {
|
||||
content: "▶";
|
||||
font-size: 0.625em;
|
||||
color: var(--color-text-muted);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.modal__collapsible[open] > .modal__collapsible-summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.modal__textarea:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
@@ -1182,3 +1119,89 @@ body {
|
||||
font-size: var(--s0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== */
|
||||
/* Reasoning & Tool Bubbles */
|
||||
/* ==================== */
|
||||
|
||||
.message--reasoning .message__icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.message--reasoning .message__icon--reasoning {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
.message--tool .message__icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.message--tool .message__icon--tool {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
|
||||
.message__collapsible {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.message__collapsible-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-2);
|
||||
padding: var(--s-2) var(--s-1);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.message__collapsible-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message__collapsible-summary::before {
|
||||
content: "▶";
|
||||
font-size: 0.625em;
|
||||
color: var(--color-text-muted);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.message__collapsible[open] > .message__collapsible-summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.message__collapsible-label {
|
||||
font-size: var(--s-1);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* .message__content inherits white-space: pre-wrap for plain text messages
|
||||
(to preserve newlines from LLM output). For tool messages, the content is
|
||||
structured HTML with newlines between child elements; pre-wrap renders those
|
||||
as visible blank lines, causing large vertical gaps. Reset to normal. */
|
||||
.message--tool .message__content {
|
||||
white-space: normal;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-2);
|
||||
}
|
||||
|
||||
.message__tool-section-label {
|
||||
font-size: var(--s-2);
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
margin: 0 0 var(--s-2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.message__tool-pre {
|
||||
margin: 0;
|
||||
padding: var(--s-2);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--s-1);
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius);
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user