86db407c0b
Use a dedicated --text-on-accent token for accent chips/checkmarks and tweak task list item surfaces so task/todo renderers keep contrast in dark mode.
160 lines
3.3 KiB
CSS
160 lines
3.3 KiB
CSS
.tool-call-todo-region {
|
||
@apply flex flex-col;
|
||
}
|
||
|
||
.tool-call-todo-empty {
|
||
@apply text-sm text-muted;
|
||
padding: 0.75rem 0;
|
||
}
|
||
|
||
.tool-call-todos {
|
||
@apply flex flex-col gap-0;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.tool-call-todo-item {
|
||
@apply flex items-start gap-3;
|
||
border: 1px solid var(--tool-call-border-color, var(--border-base));
|
||
border-radius: 0;
|
||
padding: 10px 12px;
|
||
background-color: var(--surface-secondary);
|
||
min-height: 42px;
|
||
}
|
||
|
||
.tool-call-todo-item-completed {
|
||
background-color: var(--surface-code);
|
||
}
|
||
|
||
.tool-call-todo-item-active {
|
||
border-color: var(--accent-primary);
|
||
background-color: var(--surface-hover);
|
||
}
|
||
|
||
.tool-call-todo-item-cancelled {
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.tool-call-todo-checkbox {
|
||
width: 1.1rem;
|
||
height: 1.1rem;
|
||
border-radius: 9999px;
|
||
border: 2px solid var(--tool-call-border-color, var(--border-base));
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.75rem;
|
||
font-weight: var(--font-weight-semibold);
|
||
color: var(--text-muted);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.tool-call-todo-checkbox::after {
|
||
content: "";
|
||
line-height: 1;
|
||
}
|
||
|
||
.tool-call-todo-checkbox[data-status="completed"] {
|
||
background-color: var(--accent-primary);
|
||
border-color: var(--accent-primary);
|
||
color: var(--text-on-accent, #ffffff);
|
||
}
|
||
|
||
.tool-call-todo-checkbox[data-status="completed"]::after {
|
||
content: "✓";
|
||
}
|
||
|
||
.tool-call-todo-checkbox[data-status="in_progress"]::after {
|
||
content: "…";
|
||
color: var(--accent-primary);
|
||
}
|
||
|
||
.tool-call-todo-checkbox[data-status="cancelled"]::after {
|
||
content: "×";
|
||
color: var(--status-error);
|
||
}
|
||
|
||
.tool-call-todo-body {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.tool-call-todo-heading {
|
||
@apply flex items-start gap-3;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tool-call-todo-status {
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
border-radius: 9999px;
|
||
padding: 2px 8px;
|
||
background-color: var(--surface-hover);
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tool-call-todo-text {
|
||
font-size: var(--font-size-sm);
|
||
line-height: var(--line-height-tight);
|
||
color: var(--text-primary);
|
||
word-break: break-word;
|
||
}
|
||
|
||
|
||
.tool-call-todo-status {
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
border-radius: 9999px;
|
||
padding: 2px 8px;
|
||
background-color: var(--surface-hover);
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tool-call-todo-status-completed {
|
||
background-color: var(--badge-success-bg);
|
||
color: var(--status-success);
|
||
}
|
||
|
||
.tool-call-todo-status-in_progress {
|
||
background-color: var(--badge-neutral-bg);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.tool-call-todo-status-cancelled {
|
||
background-color: var(--status-error-bg);
|
||
color: var(--status-error);
|
||
}
|
||
|
||
.tool-call-todo-text {
|
||
font-size: var(--font-size-sm);
|
||
line-height: var(--line-height-tight);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.tool-call-todo-item-cancelled .tool-call-todo-text {
|
||
text-decoration: line-through;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.tool-call-todo-tag {
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
border-radius: 9999px;
|
||
padding: 2px 8px;
|
||
background-color: var(--surface-hover);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.tool-call-todo-item-active .tool-call-todo-tag {
|
||
background-color: var(--accent-primary);
|
||
color: var(--text-on-accent, #ffffff);
|
||
}
|