improve ai alert copilot ux

This commit is contained in:
dirtydishes 2026-05-20 19:38:17 -04:00
parent ebdc4ab8e6
commit 32e965d782
15 changed files with 931 additions and 15 deletions

View file

@ -1182,6 +1182,7 @@ h3 {
.copilot-empty,
.copilot-device-code,
.copilot-task-text,
.copilot-markdown,
.copilot-json-block {
margin: 0;
}
@ -1317,6 +1318,45 @@ h3 {
background: oklch(0.12 0.01 250 / 0.72);
}
.copilot-task-output-empty {
color: var(--text-dim);
}
.copilot-task-running-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid oklch(0.78 0.12 74 / 0.24);
border-radius: 10px;
background: oklch(0.78 0.12 74 / 0.06);
}
.copilot-task-running-row .terminal-button {
margin-left: auto;
}
.copilot-spinner {
width: 16px;
height: 16px;
flex: 0 0 auto;
border-radius: 999px;
border: 2px solid oklch(0.88 0.06 76 / 0.3);
border-top-color: oklch(0.88 0.06 76);
animation: copilot-spin 0.8s linear infinite;
}
@keyframes copilot-spin {
to {
transform: rotate(360deg);
}
}
.terminal-button.is-active {
border-color: var(--border-strong);
box-shadow: 0 0 0 1px oklch(0.78 0.12 74 / 0.22);
}
.copilot-task-text,
.copilot-json-block,
.copilot-device-code {
@ -1329,6 +1369,78 @@ h3 {
line-height: 1.55;
}
.copilot-markdown {
padding: 14px;
border-radius: 10px;
border: 1px solid var(--border);
background: oklch(0.1 0.009 250 / 0.92);
color: var(--text);
font-family: var(--font-sans), sans-serif;
line-height: 1.6;
}
.copilot-markdown > :first-child {
margin-top: 0;
}
.copilot-markdown > :last-child {
margin-bottom: 0;
}
.copilot-markdown h1,
.copilot-markdown h2,
.copilot-markdown h3,
.copilot-markdown h4 {
margin: 1.1em 0 0.45em;
color: var(--text);
font-family: var(--font-display), sans-serif;
line-height: 1.18;
}
.copilot-markdown p,
.copilot-markdown ul,
.copilot-markdown ol,
.copilot-markdown blockquote,
.copilot-markdown pre {
margin: 0.75em 0;
}
.copilot-markdown ul,
.copilot-markdown ol {
padding-left: 1.25rem;
}
.copilot-markdown li + li {
margin-top: 0.35em;
}
.copilot-markdown code {
font-family: var(--font-mono), monospace;
font-size: 0.92em;
color: oklch(0.88 0.06 76);
}
.copilot-markdown :not(pre) > code {
padding: 0.1rem 0.32rem;
border-radius: 6px;
background: oklch(0.97 0.008 250 / 0.08);
border: 1px solid oklch(0.72 0.012 250 / 0.14);
}
.copilot-markdown pre {
overflow-x: auto;
padding: 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: oklch(0.07 0.008 250 / 0.9);
}
.copilot-markdown blockquote {
padding-left: 12px;
border-left: 3px solid var(--accent);
color: var(--text-dim);
}
.copilot-device-code {
font-size: clamp(1.3rem, 2vw, 1.7rem);
letter-spacing: 0.18em;