Something went wrong. Try again.
opencode v2 mirror
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751.root { display: flex; flex-direction: column; gap: 2.5rem; line-height: 1; padding: 1.5rem;
@media (max-width: 30rem) { padding: 1rem; gap: 2rem; }
--sm-tool-width: 28rem; --md-tool-width: 40rem; --lg-tool-width: 56rem;
--term-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2016'%20preserveAspectRatio%3D'xMidYMid%20meet'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'30'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'52'%20cy%3D'8'%20r%3D'8'%2F%3E%3C%2Fsvg%3E");
[data-component="header"] { display: flex; flex-direction: column; gap: 1rem;
@media (max-width: 30rem) { gap: 1rem; } }
[data-component="header-title"] { font-size: 2.75rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.05em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
@media (max-width: 30rem) { font-size: 1.75rem; line-height: 1.25; -webkit-line-clamp: 3; } }
[data-component="header-details"] { display: flex; flex-direction: column; gap: 0.5rem; }
[data-component="header-stats"] { list-style-type: none; padding: 0; margin: 0; display: flex; gap: 0.5rem 0.875rem; flex-wrap: wrap; max-width: var(--lg-tool-width);
[data-slot="item"] { display: flex; align-items: center; gap: 0.3125rem; font-size: 0.875rem;
span[data-placeholder] { color: var(--sl-color-text-dimmed); } }
[data-slot="icon"] { flex: 0 0 auto; color: var(--sl-color-text-dimmed); opacity: 0.85;
svg { display: block; } }
[data-slot="model"] { color: var(--sl-color-text); } }
[data-component="header-time"] { color: var(--sl-color-text-dimmed); font-size: 0.875rem; }
[data-component="text-button"] { cursor: pointer; appearance: none; background-color: transparent; border: none; padding: 0; color: var(--sl-color-text-secondary);
&:hover { color: var(--sl-color-text); }
&[data-element-button-more] { display: flex; align-items: center; gap: 0.125rem;
span[data-button-icon] { line-height: 1; opacity: 0.85;
svg { display: block; } } } }}
.parts { display: flex; flex-direction: column; gap: 0.625rem;
[data-section="part"] { display: flex; gap: 0.625rem;
& > [data-section="decoration"] { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.625rem; align-items: center; justify-content: flex-start;
[data-element-anchor] { position: relative;
a:first-child { display: block; flex: 0 0 auto; width: 18px; opacity: 0.65;
svg { color: var(--sl-color-text-secondary); display: block;
&:nth-child(3) { color: var(--sl-color-green-high); } }
svg:nth-child(2), svg:nth-child(3) { display: none; }
&:hover { svg:nth-child(1) { display: none; }
svg:nth-child(2) { display: block; } } }
[data-element-tooltip] { position: absolute; top: 50%; left: calc(100% + 12px); transform: translate(0, -50%); line-height: 1.1; padding: 0.375em 0.5em calc(0.375em + 2px); background: var(--sl-color-white); color: var(--sl-color-text-invert); font-size: 0.6875rem; border-radius: 7px; white-space: nowrap;
z-index: 1; opacity: 0; visibility: hidden;
&::after { content: ""; position: absolute; top: 50%; left: -15px; transform: translateY(-50%); border: 8px solid transparent; border-right-color: var(--sl-color-white); } }
&[data-status="copied"] { [data-element-tooltip] { opacity: 1; visibility: visible; }
a, a:hover { svg:nth-child(1), svg:nth-child(2) { display: none; }
svg:nth-child(3) { display: block; } } } }
div:last-child { width: 3px; height: 100%; border-radius: 1px; background-color: var(--sl-color-hairline); } }
& > [data-section="content"] { flex: 1 1 auto; min-width: 0; padding: 0 0 0.375rem; display: flex; flex-direction: column; gap: 1rem;
[data-part-tool-body] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; }
[data-part-title] { line-height: 18px; font-size: 0.875rem; color: var(--sl-color-text-secondary); max-width: var(--md-tool-width);
display: flex; align-items: flex-start; gap: 0.375rem;
span[data-element-label] { color: var(--sl-color-text-secondary); }
b { color: var(--sl-color-text); word-break: break-all; font-weight: 500; } }
span[data-part-footer] { align-self: flex-start; font-size: 0.75rem; color: var(--sl-color-text-dimmed); }
span[data-part-model] { line-height: 1.5; }
[data-part-tool-args] { display: inline-grid; align-items: center; grid-template-columns: max-content max-content minmax(0, 1fr); max-width: var(--md-tool-width); gap: 0.25rem 0.375rem;
& > div:nth-child(3n + 1) { width: 8px; height: 2px; border-radius: 1px; background: var(--sl-color-divider); }
& > div:nth-child(3n + 2), & > div:nth-child(3n + 3) { font-size: 0.75rem; line-height: 1.5; }
& > div:nth-child(3n + 3) { padding-left: 0.125rem; word-break: break-word; color: var(--sl-color-text-secondary); } }
[data-part-tool-result] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
button { font-size: 0.75rem; } }
[data-part-tool-edit] { width: 100%; max-width: var(--lg-tool-width); } } }
/* Part types */ [data-part-type="user-text"], [data-part-type="ai-text"], [data-part-type="ai-model"], [data-part-type="system-text"], [data-part-type="fallback"] { & > [data-section="content"] { padding-bottom: 1rem; } }
[data-part-type="tool-list"], [data-part-type="tool-glob"], [data-part-type="tool-read"], [data-part-type="tool-edit"], [data-part-type="tool-write"], [data-part-type="tool-fetch"] { & > [data-section="content"] > [data-part-tool-body] { gap: 0.5rem; } }
[data-part-type="tool-grep"] { &:not(:has([data-part-tool-args])) > [data-section="content"] > [data-part-tool-body] { gap: 0.5rem; } }
[data-part-type="tool-write"], [data-part-type="tool-read"], [data-part-type="tool-fetch"] { [data-part-tool-result] { [data-part-tool-code] { max-width: var(--md-tool-width); border: 1px solid var(--sl-color-divider); background-color: var(--sl-color-bg-surface); border-radius: 0.25rem; padding: 0.5rem calc(0.5rem + 3px);
pre { line-height: 1.6; font-size: 0.75rem; white-space: pre-wrap; word-break: break-word; } } } }
[data-part-type="summary"] { & > [data-section="decoration"] { span:first-child { flex: 0 0 auto; display: block; margin: 2px; width: 14px; height: 14px; border-radius: 50%; background-color: var(--sl-color-divider);
&[data-status="connected"] { background-color: var(--sl-color-green); }
&[data-status="connecting"] { background-color: var(--sl-color-orange); }
&[data-status="disconnected"] { background-color: var(--sl-color-divider); }
&[data-status="reconnecting"] { background-color: var(--sl-color-orange); }
&[data-status="error"] { background-color: var(--sl-color-red); } } }
& > [data-section="content"] { display: flex; flex-direction: column; gap: 0.5rem;
p[data-section="copy"] { display: block; line-height: 18px; font-size: 0.875rem; color: var(--sl-color-text-dimmed); }
[data-section="stats"] { list-style-type: none; padding: 0; margin: 0; display: flex; gap: 0.5rem 0.875rem; flex-wrap: wrap;
li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--sl-color-text-secondary);
span[data-placeholder] { color: var(--sl-color-text-dimmed); } } } } }}
.message-text { background-color: var(--sl-color-bg-surface); padding: 0.5rem calc(0.5rem + 3px); border-radius: 0.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; align-self: flex-start; max-width: var(--md-tool-width);
&[data-size="sm"] { pre { font-size: 0.75rem; } }
&[data-color="dimmed"] { pre { color: var(--sl-color-text-dimmed); } }
pre { line-height: 1.5; font-size: 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--sl-color-text); }
button { flex: 0 0 auto; padding: 2px 0; font-size: 0.75rem; }
&[data-invert="true"] { background-color: var(--sl-color-blue-high);
pre { color: var(--sl-color-text-invert); }
button { opacity: 0.85; color: var(--sl-color-text-invert);
&:hover { opacity: 1; } } }
&[data-background="none"] { background-color: transparent; }
&[data-background="blue"] { background-color: var(--sl-color-blue-low); }
&[data-expanded="true"] { pre { display: block; } }
&[data-expanded="false"] { pre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } }}
.message-error { background-color: var(--sl-color-bg-surface); padding: 0.5rem calc(0.5rem + 3px); border-radius: 0.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; align-self: flex-start; max-width: var(--md-tool-width);
[data-section="content"] { pre { margin-bottom: 0.5rem; line-height: 1.5; font-size: 0.75rem; white-space: pre-wrap; word-break: break-word;
&:last-child { margin-bottom: 0; }
span { margin-right: 0.25rem;
&:last-child { margin-right: 0; } }
span[data-color="red"] { color: var(--sl-color-red); }
span[data-color="dimmed"] { color: var(--sl-color-text-dimmed); }
span[data-marker="label"] { text-transform: uppercase; letter-spacing: -0.5px; }
span[data-separator] { margin-right: 0.375rem; } } }
&[data-expanded="true"] { [data-section="content"] { display: block; } }
&[data-expanded="false"] { [data-section="content"] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; } }
button { flex: 0 0 auto; padding: 2px 0; font-size: 0.75rem; }}
.message-terminal { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; width: 100%; max-width: var(--sm-tool-width);
& > [data-section="body"] { width: 100%; border: 1px solid var(--sl-color-divider); border-radius: 0.25rem;
[data-section="header"] { position: relative; border-bottom: 1px solid var(--sl-color-divider); width: 100%; height: 1.625rem; text-align: center; padding: 0 3.25rem;
& > span { max-width: min(100%, 140ch); display: inline-block; white-space: nowrap; overflow: hidden; line-height: 1.625rem; font-size: 0.75rem; text-overflow: ellipsis; color: var(--sl-color-text-dimmed); }
&::before { content: ""; position: absolute; pointer-events: none; top: 8px; left: 10px; width: 2rem; height: 0.5rem; line-height: 0; background-color: var(--sl-color-hairline); mask-image: var(--term-icon); mask-repeat: no-repeat; } } }
[data-section="content"] { padding: 0.5rem calc(0.5rem + 3px);
pre { --shiki-dark-bg: var(--sl-color-bg) !important; background-color: var(--sl-color-bg) !important; line-height: 1.6; font-size: 0.75rem; white-space: pre-wrap; word-break: break-word; } }
[data-section="error"] { pre { color: var(--sl-color-red) !important; --shiki-dark: var(--sl-color-red) !important; } }
&[data-expanded="true"] { pre { display: block; } }
&[data-expanded="false"] { pre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; } }
button { flex: 0 0 auto; padding-left: 1px; font-size: 0.75rem; }}
.message-markdown { border: 1px solid var(--sl-color-blue-high); padding: 0.5rem calc(0.5rem + 3px); border-radius: 0.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; align-self: flex-start; max-width: var(--md-tool-width);
button { flex: 0 0 auto; padding: 2px 0; font-size: 0.75rem; }
&[data-highlight="true"] { background-color: var(--sl-color-blue-low); }
&[data-expanded="true"] { [data-element-markdown] { display: block; } }
&[data-expanded="false"] { [data-element-markdown] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } }}
.diff-code-block { pre { line-height: 1.25; font-size: 0.75rem; }}
.scroll-button { position: fixed; bottom: 2rem; right: 2rem; width: 2.5rem; height: 2.5rem; border-radius: 0.25rem; border: 1px solid var(--sl-color-divider); background-color: var(--sl-color-bg-surface); color: var(--sl-color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease, opacity 0.5s ease; z-index: 100; appearance: none; opacity: 1;
&:active { transform: translateY(1px); }
svg { display: block; }}