Something went wrong. Try again.
opencode v2 mirror
Something went wrong. Try again.
11 kB · 462 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463[data-component="tool-trigger"] { content-visibility: auto; width: 100%; display: flex; align-items: center; align-self: stretch; gap: 0px; justify-content: flex-start;
&[data-clickable="true"] { cursor: pointer; }
[data-slot="basic-tool-tool-trigger-content"] { flex: 0 1 auto; width: auto; max-width: calc(100% - 24px); min-width: 0; display: flex; align-items: center; align-self: stretch; gap: 8px; }
[data-slot="basic-tool-tool-indicator"] { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
[data-component="spinner"] { width: 16px; height: 16px; } }
[data-slot="basic-tool-tool-spinner"] { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--v2-text-text-faint);
[data-component="spinner"] { width: 16px; height: 16px; } }
[data-slot="icon-svg"] { flex-shrink: 0; }
[data-slot="basic-tool-tool-info"] { flex: 0 1 auto; min-width: 0; max-width: 100%; font-size: 13px; }
[data-slot="basic-tool-tool-info-structured"] { flex: 0 1 auto; width: auto; max-width: 100%; min-width: 0; display: inline-flex; align-items: center; gap: 8px; justify-content: flex-start; }
[data-slot="basic-tool-tool-info-main"] { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
[data-slot="basic-tool-tool-title"] { flex-shrink: 0; font-family: var(--font-family-sans); font-size: 13px; font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-compact); letter-spacing: var(--letter-spacing-normal); color: var(--v2-text-text-base);
&.capitalize { text-transform: capitalize; }
&.agent-title { color: var(--v2-text-text-base); font-weight: var(--font-weight-medium); } }
[data-slot="basic-tool-tool-subtitle"] { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-family-sans); font-variant-numeric: tabular-nums; font-size: 13px; font-style: normal; font-weight: var(--font-weight-regular); line-height: var(--line-height-compact); letter-spacing: var(--letter-spacing-normal); color: var(--v2-text-text-muted);
&.clickable:not(.webfetch-link) { cursor: pointer; text-decoration: underline; transition: color 0.15s ease;
&:hover { color: var(--v2-text-text-muted); } }
&.subagent-link { color: var(--text-interactive-base); text-decoration: none; text-underline-offset: 2px; font-weight: var(--font-weight-regular);
&:hover { color: var(--text-interactive-base); text-decoration: underline; }
&:active { color: var(--text-interactive-base); }
&:visited { color: var(--text-interactive-base); } } }
[data-slot="basic-tool-tool-arg"] { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-family-sans); font-variant-numeric: tabular-nums; font-size: 13px; font-style: normal; font-weight: var(--font-weight-regular); line-height: var(--line-height-compact); letter-spacing: var(--letter-spacing-normal); color: var(--v2-text-text-muted); }
[data-slot="basic-tool-tool-action"] { display: inline-flex; align-items: center; flex-shrink: 0; }}
[data-component="collapsible"].tool-collapsible[data-compact="true"] > [data-slot="collapsible-trigger"] { height: 28px;
[data-slot="collapsible-arrow"] { width: 16px; }
[data-component="tool-trigger"], [data-slot="basic-tool-tool-info-main"] { gap: 6px; }
[data-slot="basic-tool-tool-title"] { font-family: var(--v2-font-family-sans); font-size: 13px; font-weight: 530; /* Keep compact text on the shared metric; solid 13px line boxes clip Inter descenders. */ line-height: var(--line-height-compact); letter-spacing: -0.04px; }
[data-slot="basic-tool-tool-subtitle"] { font-family: var(--v2-font-family-sans); font-size: 13px; font-weight: 440; line-height: var(--line-height-compact); letter-spacing: -0.04px; }}
[data-component="task-tool-card"] { width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; border: 0.5px solid var(--border-weak-base, rgba(255, 255, 255, 0.08)); background: color-mix(in srgb, var(--background-base) 92%, transparent); transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
[data-component="task-tool-surface"] { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
[data-slot="basic-tool-tool-info-structured"] { flex: 1 1 auto; min-width: 0; }
[data-slot="basic-tool-tool-info-main"] { flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; }
[data-component="task-tool-spinner"] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
[data-component="spinner"] { width: 16px; height: 16px; } }
[data-component="task-tool-action"] { display: inline-flex; align-items: center; justify-content: center; width: 0; overflow: hidden; flex-shrink: 0; color: var(--v2-text-text-faint); margin-inline-start: 0; opacity: 0; transform: translateX(-4px); transition: width 0.15s ease, margin-inline-start 0.15s ease, opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
:dir(rtl) & { transform: translateX(4px); }
@media (hover: none) { width: 16px; margin-inline-start: 2px; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { transition: none; } }
[data-component="task-tool-title"] { flex-shrink: 0; font-family: var(--font-family-sans); font-size: 13px; font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-compact); letter-spacing: var(--letter-spacing-normal); text-transform: capitalize; color: var(--task-agent-color-fallback, var(--text-strong)); }
[data-slot="basic-tool-tool-subtitle"] { color: var(--v2-text-text-base); }
&:hover, &:focus-visible { border-color: var(--border-weak-base, rgba(255, 255, 255, 0.08)); background: color-mix(in srgb, var(--background-stronger) 88%, transparent);
[data-component="task-tool-action"] { width: 16px; margin-inline-start: 2px; opacity: 1; transform: none; } }}
[data-component="collapsible"].tool-collapsible:not([data-rail="false"]) { > [data-slot="collapsible-content"] { padding-inline-start: 12px; }}
:root body { [data-component="task-tool-card"] { gap: 8px; padding: 0; border-radius: 0; border: 0; border-color: transparent; background: transparent; box-shadow: none;
[data-component="task-tool-surface"] { padding: 8px 12px; gap: 0; border-radius: 8px; background: var(--v2-background-bg-layer-02); }
[data-component="task-tool-spinner"], [data-component="task-tool-icon"] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
[data-slot="icon-svg"] { color: var(--task-agent-color, var(--v2-icon-icon-base)); } }
[data-component="task-tool-title"] { height: 20px; font-family: var(--v2-font-family-sans, "Inter", sans-serif); font-style: normal; font-weight: 530; font-size: 13px; line-height: 20px; letter-spacing: -0.04px; color: var(--v2-text-text-base); flex: none; flex-grow: 0; }
[data-slot="basic-tool-tool-subtitle"] { font-family: var(--v2-font-family-sans, "Inter", sans-serif); font-style: normal; font-weight: 440; font-size: 13px; line-height: 20px; letter-spacing: -0.04px; color: var(--v2-text-text-base); font-variation-settings: "slnt" 0; flex: none; flex-grow: 0; }
[data-component="session-progress-indicator-v2"] { color: var(--task-agent-color, light-dark(var(--v2-text-text-base), #ffffff)); }
&:hover, &:focus-visible { border-color: transparent; background: transparent;
[data-component="task-tool-surface"] { background: var(--v2-background-bg-layer-02); } } }}
.webfetch-link,[data-slot="basic-tool-tool-subtitle"].webfetch-link,[data-slot="exa-tool-link"].webfetch-link,[data-component="tool-trigger"] [data-slot="basic-tool-tool-subtitle"].webfetch-link { display: inline-flex; align-items: center; gap: 8px; color: var(--v2-text-text-accent); text-decoration: none; overflow: visible; max-width: 100%; font-family: var(--font-family-sans); font-variant-numeric: tabular-nums; font-size: inherit; font-style: normal; font-weight: var(--font-weight-regular, 440); line-height: inherit; letter-spacing: var(--letter-spacing-normal);
&:visited, &:active { color: var(--v2-text-text-accent); }
[data-slot="webfetch-link-text"] { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: inherit; }
.webfetch-link-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; color: var(--v2-icon-icon-accent, var(--v2-text-text-accent));
@media (hover: hover) { display: none; } }
&:hover { color: var(--v2-text-text-accent); text-decoration: none;
[data-slot="webfetch-link-text"] { text-decoration: underline; text-underline-offset: 2px; }
.webfetch-link-icon { display: inline-flex; } }
&:focus-visible { outline: 1px solid var(--v2-text-text-accent); outline-offset: 2px;
[data-slot="webfetch-link-text"] { text-decoration: underline; text-underline-offset: 2px; }
.webfetch-link-icon { display: inline-flex; } }}