Something went wrong. Try again.
opencode v2 mirror
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642@import "@opencode/ui/styles/tailwind";@import "@opencode/session-ui/styles";@import "@opencode/ui/styles/tokens";@import "tw-animate-css";
@font-face { font-family: "JetBrainsMono Nerd Font Mono"; src: url("/assets/JetBrainsMonoNerdFontMono-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal;}
@font-face { font-family: "Inter"; src: url("/assets/Inter.ttf") format("truetype"); font-weight: 100 900; font-style: normal;}
@font-face { font-family: "IBM Plex Mono"; src: url("@ibm/plex/IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Text.woff2") format("woff2"); font-weight: 440; font-style: normal; font-display: swap;}
@media (display-mode: standalone) { /* WebKit excludes safe-area insets from dvh in installed apps. */ #root { height: 100vh; }}
/* iOS can report navigator.standalone without matching display-mode. */#root[data-standalone="true"] { height: 100vh;}
@layer components { [data-slot="session-chat-panel"] { container-name: session-chat; }
[data-component="new-session"] { container-type: inline-size; container-name: new-session; }
[data-slot="session-chat-panel"] :is([data-timeline-virtual-content], [data-component="session-composer-dock"] > div), [data-slot="new-session-content"] { translate: var(--session-summary-resize-translate, var(--session-summary-translate, none)); transition: translate 240ms cubic-bezier(0.4, 0, 0.2, 1);
@media (prefers-reduced-motion: reduce) { transition: none; } }
[data-slot="session-chat-panel"][data-summary-resizing="true"] :is([data-timeline-virtual-content], [data-component="session-composer-dock"] > div), [data-component="new-session"][data-summary-resizing="true"] [data-slot="new-session-content"] { transition: none; }
/* Keep the 1000px conversation intact, with 320px for the summary and its gutters. When they overlap, center the conversation in the space that remains beside the summary. */ @container session-chat (min-width: 1320px) and (width < 1640px) { [data-slot="session-chat-panel"][data-summary-open="true"] :is([data-timeline-virtual-content], [data-component="session-composer-dock"] > div) { --session-summary-translate: -160px;
&:dir(rtl) { --session-summary-translate: 160px; } } }
/* Shift only while centered content overlaps the 280px summary cards and their 16px edge inset: 880px + 2 * (280px + 16px) = 1472px. Center it in the remaining space, reserving 320px. */ @container new-session (min-width: 1200px) and (width < 1472px) { [data-component="new-session"][data-summary-open="true"] [data-slot="new-session-content"] { --session-summary-translate: -160px;
&:dir(rtl) { --session-summary-translate: 160px; } } }
[data-slot="session-chat-panel"][data-scrollbar-hidden="true"] [data-slot="session-timeline-scroll"] > .scroll-view__thumb { visibility: hidden; }
[data-slot="session-side-panel-presence"][data-opened="true"] { animation: side-region-presence-in 240ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-slot="session-side-panel-presence"][data-opened="false"] { animation: side-region-presence-out 240ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
#review-panel { container-type: inline-size; }
/* Like the composer toolbar, fade only clipped content without reserving layout space. The fade contracts as overflow clears; the second mask preserves the header divider. */ #review-panel .session-review-v2-tabs-bar { --session-review-header-fade: clamp(0px, calc(100% - 100cqi), 24px); mask-image: linear-gradient( to right, #000 calc(100cqi - 40px - var(--session-review-header-fade)), transparent calc(100cqi - 40px) ), linear-gradient(to top, #000 1px, transparent 1px);
&:dir(rtl) { mask-image: linear-gradient( to left, #000 calc(100cqi - 40px - var(--session-review-header-fade)), transparent calc(100cqi - 40px) ), linear-gradient(to top, #000 1px, transparent 1px); } }
/* The panel's width animation supplies the slide; only fade its fixed-width contents. */ [data-slot="session-side-region-presence"][data-opened] [data-slot="session-review-content"] { transition: opacity 200ms ease-out 40ms; }
/* Cached contents must stay transparent even after the presence animation finishes. */ #review-panel[aria-hidden="true"] > [data-slot="session-review-content"] { opacity: 0; }
[data-slot="session-side-region-presence"][data-opened="false"] [data-slot="session-review-content"] { transition: opacity 160ms ease-out; }
@starting-style { [data-slot="session-side-region-presence"][data-opened="true"] [data-slot="session-review-content"] { opacity: 0; } }
[data-slot="session-side-region-presence"][data-opened="true"] { animation: side-region-presence-in 240ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-slot="session-side-region-presence"][data-opened="false"] { animation: side-region-presence-out 240ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
[data-slot="terminal-panel-presence"][data-opened="true"] { animation: terminal-panel-presence-in 200ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-slot="terminal-panel-presence"][data-opened="false"] { animation: terminal-panel-presence-out 200ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
[data-slot="side-terminal-panel-presence"][data-opened="true"] { animation: side-terminal-panel-presence-in 240ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-slot="side-terminal-panel-presence"][data-opened="false"] { animation: side-terminal-panel-presence-out 240ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
[data-component="terminal-panel"][data-size-animated="true"][data-opened="true"] { animation: terminal-panel-size-in 200ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-component="terminal-panel"][data-size-animated="true"][data-opened="false"] { animation: terminal-panel-size-out 200ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { [data-slot="terminal-panel-presence"], [data-slot="side-terminal-panel-presence"], [data-slot="session-side-panel-presence"], [data-slot="session-review-content"], [data-slot="session-side-region-presence"], [data-component="terminal-panel"] { animation: none !important; }
[data-slot="session-review-content"] { transition: none !important; } }
@keyframes terminal-panel-presence-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes terminal-panel-presence-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes side-terminal-panel-presence-in { from { opacity: 0.999999; } to { opacity: 1; } }
@keyframes side-terminal-panel-presence-out { from { opacity: 1; } to { opacity: 0.999999; visibility: hidden; } }
/* Presence needs an animation lifetime, but the panel frame must never fade. */ @keyframes side-region-presence-in { from, to { opacity: 1; } }
@keyframes side-region-presence-out { from { opacity: 1; } to { opacity: 1; visibility: hidden; } }
@keyframes terminal-panel-size-in { from { height: 0; } to { height: var(--terminal-panel-height); } }
@keyframes terminal-panel-size-out { from { height: var(--terminal-panel-height); } to { height: 0; } }
::highlight(timeline-search-hit) { background-color: color-mix(in srgb, var(--v2-icon-icon-accent) 28%, transparent); }
::highlight(timeline-search-hit-active) { background-color: var(--v2-icon-icon-accent); color: var(--v2-background-bg-deep); }
[data-component="getting-started"] { container-type: inline-size; container-name: getting-started; }
[data-component="menu-v2-content"].desktop-app-menu { min-width: 160px; padding: 2px; }
[data-component="menu-v2-content"].desktop-app-menu:not(.desktop-app-menu-sub) { width: 160px; }
[data-component="menu-v2-content"].desktop-app-menu-sub { width: max-content; min-width: 240px; max-width: min(320px, calc(100vw - 24px)); }
[data-component="menu-v2-content"].desktop-app-menu [data-slot="menu-v2-group-label"] { display: flex; align-items: center; height: 28px; padding: 0 12px; font-size: var(--font-size-x-small); font-weight: var(--font-weight-medium); line-height: 1; color: var(--text-weak); }
[data-component="menu-v2-content"].desktop-app-menu [data-component="menu-v2-item"] { min-height: 28px; padding: 0 12px; gap: 8px; font-weight: var(--font-weight-regular); line-height: 1; }
[data-component="menu-v2-content"].desktop-app-menu [data-slot="menu-v2-item-content"] { white-space: nowrap; }
[data-component="menu-v2-content"].desktop-app-menu [data-slot="menu-v2-item-shortcut"] { margin-left: auto; color: var(--text-weak); font-size: var(--font-size-x-small); font-weight: var(--font-weight-regular); white-space: nowrap; }
[data-component="getting-started-actions"] { display: flex; flex-direction: column; gap: 0.75rem; /* gap-3 */ }
[data-component="getting-started-actions"] > [data-component="button-v2"] { width: 100%; }
@container getting-started (min-width: 17rem) { [data-component="getting-started-actions"] { flex-direction: row; align-items: center; }
[data-component="getting-started-actions"] > [data-component="button-v2"] { width: auto; } }
.home-session-group-header::before { content: ""; position: absolute; top: -12px; left: 0; width: 100%; height: 12px; background: var(--v2-background-bg-base); }
.home-session-group-header::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 16px; pointer-events: none; background: linear-gradient( 180deg, var(--v2-background-bg-base) 0%, color-mix(in srgb, var(--v2-background-bg-base) 92.0456%, transparent) 7.93%, color-mix(in srgb, var(--v2-background-bg-base) 84.9947%, transparent) 14.14%, color-mix(in srgb, var(--v2-background-bg-base) 78.6813%, transparent) 19%, color-mix(in srgb, var(--v2-background-bg-base) 72.9394%, transparent) 22.85%, color-mix(in srgb, var(--v2-background-bg-base) 67.6028%, transparent) 26.05%, color-mix(in srgb, var(--v2-background-bg-base) 62.5055%, transparent) 28.95%, color-mix(in srgb, var(--v2-background-bg-base) 57.4815%, transparent) 31.91%, color-mix(in srgb, var(--v2-background-bg-base) 52.3647%, transparent) 35.27%, color-mix(in srgb, var(--v2-background-bg-base) 46.989%, transparent) 39.4%, color-mix(in srgb, var(--v2-background-bg-base) 41.1884%, transparent) 44.65%, color-mix(in srgb, var(--v2-background-bg-base) 34.7969%, transparent) 51.36%, color-mix(in srgb, var(--v2-background-bg-base) 27.6484%, transparent) 59.9%, color-mix(in srgb, var(--v2-background-bg-base) 19.5767%, transparent) 70.62%, color-mix(in srgb, var(--v2-background-bg-base) 10.416%, transparent) 83.87%, transparent 100% ); }
[data-slot="titlebar-update-loader"] { display: block; flex-shrink: 0; margin: 1px; width: 12px; height: 12px; border-radius: 9999px; border: 2px solid color-mix(in srgb, var(--v2-icon-icon-accent) 30%, transparent); border-top-color: var(--v2-icon-icon-accent); animation: titlebar-update-loader-spin 0.67s linear infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { [data-slot="titlebar-update-loader"] { animation: none; } }
@keyframes titlebar-update-loader-spin { to { transform: rotate(360deg); } }
@keyframes home-projects-fade-top { from { visibility: hidden; } to { visibility: visible; } }
@keyframes home-projects-fade-bottom { from { visibility: visible; } to { visibility: hidden; } }
@keyframes session-dropzone-enter { from { opacity: 0; } }
@keyframes session-dropzone-content-enter { from { opacity: 0; transform: translateY(4px) scale(0.96); } }
@keyframes session-dropzone-upload-enter { from { opacity: 0; transform: translateY(4px) scale(0.92); } }
@keyframes session-dropzone-stripes-drift { to { background-position: 33.941px 0; } }
[data-component="session-dropzone"][data-visible="true"] { animation: session-dropzone-enter 200ms cubic-bezier(0.215, 0.61, 0.355, 1); }
[data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-content"] { animation: session-dropzone-content-enter 200ms cubic-bezier(0.215, 0.61, 0.355, 1); }
[data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-upload"] { animation: session-dropzone-upload-enter 240ms cubic-bezier(0.215, 0.61, 0.355, 1); }
[data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-stripes"] { animation: session-dropzone-stripes-drift 3s linear infinite; }
[data-component="session-dropzone"] { --session-dropzone-wash: 4%; --session-dropzone-stripe: 7%; --session-dropzone-card: var(--v2-background-bg-base); }
[data-color-scheme="dark"] [data-component="session-dropzone"] { --session-dropzone-wash: 6%; --session-dropzone-stripe: 14%; --session-dropzone-card: var(--v2-background-bg-layer-01); }
@media (prefers-reduced-motion: reduce) { [data-component="session-dropzone"][data-visible="true"], [data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-content"], [data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-upload"], [data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-stripes"] { animation: none; } }
[data-slot="home-projects-scroll"] { timeline-scope: --home-projects-scroll; }
[data-slot="model-selector-scroll"] { timeline-scope: --model-selector-scroll; }
[data-slot="manage-models-scroll"] { timeline-scope: --manage-models-scroll; }
[data-slot="home-projects-scroll"]::before, [data-slot="home-projects-scroll"]::after, [data-slot="model-selector-scroll"]::before, [data-slot="model-selector-scroll"]::after, [data-slot="manage-models-scroll"]::before { content: ""; position: absolute; left: 0; right: 0; z-index: 10; height: 16px; pointer-events: none; visibility: hidden; }
[data-slot="home-projects-scroll"]::before { top: 0; background: linear-gradient(to bottom, var(--v2-background-bg-base), transparent); }
[data-slot="model-selector-scroll"]::before { top: 0; height: 12px; background: linear-gradient( 180deg, color-mix(in srgb, var(--v2-background-bg-layer-01) 80%, transparent) 0%, color-mix(in srgb, var(--v2-background-bg-layer-01) 78.3336%, transparent) 4.7%, color-mix(in srgb, var(--v2-background-bg-layer-01) 76.4824%, transparent) 8.9%, color-mix(in srgb, var(--v2-background-bg-layer-01) 74.368%, transparent) 12.8%, color-mix(in srgb, var(--v2-background-bg-layer-01) 71.9123%, transparent) 16.56%, color-mix(in srgb, var(--v2-background-bg-layer-01) 69.037%, transparent) 20.37%, color-mix(in srgb, var(--v2-background-bg-layer-01) 65.664%, transparent) 24.4%, color-mix(in srgb, var(--v2-background-bg-layer-01) 61.715%, transparent) 28.83%, color-mix(in srgb, var(--v2-background-bg-layer-01) 57.1117%, transparent) 33.84%, color-mix(in srgb, var(--v2-background-bg-layer-01) 51.776%, transparent) 39.6%, color-mix(in srgb, var(--v2-background-bg-layer-01) 45.6296%, transparent) 46.3%, color-mix(in srgb, var(--v2-background-bg-layer-01) 38.5944%, transparent) 54.1%, color-mix(in srgb, var(--v2-background-bg-layer-01) 30.592%, transparent) 63.2%, color-mix(in srgb, var(--v2-background-bg-layer-01) 21.5443%, transparent) 73.76%, color-mix(in srgb, var(--v2-background-bg-layer-01) 11.373%, transparent) 85.97%, color-mix(in srgb, var(--v2-background-bg-layer-01) 0%, transparent) 100% ); }
[data-slot="manage-models-scroll"]::before { top: 0; background: linear-gradient(to bottom, var(--v2-background-bg-base), transparent); }
[data-slot="home-projects-scroll"]::after { bottom: 0; background: linear-gradient(to top, var(--v2-background-bg-base), transparent); }
[data-slot="model-selector-scroll"]::after { bottom: 0; height: 12px; background: linear-gradient( 0deg, color-mix(in srgb, var(--v2-background-bg-layer-01) 80%, transparent) 0%, color-mix(in srgb, var(--v2-background-bg-layer-01) 78.3336%, transparent) 4.7%, color-mix(in srgb, var(--v2-background-bg-layer-01) 76.4824%, transparent) 8.9%, color-mix(in srgb, var(--v2-background-bg-layer-01) 74.368%, transparent) 12.8%, color-mix(in srgb, var(--v2-background-bg-layer-01) 71.9123%, transparent) 16.56%, color-mix(in srgb, var(--v2-background-bg-layer-01) 69.037%, transparent) 20.37%, color-mix(in srgb, var(--v2-background-bg-layer-01) 65.664%, transparent) 24.4%, color-mix(in srgb, var(--v2-background-bg-layer-01) 61.715%, transparent) 28.83%, color-mix(in srgb, var(--v2-background-bg-layer-01) 57.1117%, transparent) 33.84%, color-mix(in srgb, var(--v2-background-bg-layer-01) 51.776%, transparent) 39.6%, color-mix(in srgb, var(--v2-background-bg-layer-01) 45.6296%, transparent) 46.3%, color-mix(in srgb, var(--v2-background-bg-layer-01) 38.5944%, transparent) 54.1%, color-mix(in srgb, var(--v2-background-bg-layer-01) 30.592%, transparent) 63.2%, color-mix(in srgb, var(--v2-background-bg-layer-01) 21.5443%, transparent) 73.76%, color-mix(in srgb, var(--v2-background-bg-layer-01) 11.373%, transparent) 85.97%, color-mix(in srgb, var(--v2-background-bg-layer-01) 0%, transparent) 100% ); }
@supports (animation-timeline: --home-projects-scroll) and (timeline-scope: --home-projects-scroll) { [data-slot="home-projects-scroll"] .scroll-view__viewport { scroll-timeline: --home-projects-scroll y; }
[data-slot="home-projects-scroll"]::before { animation: home-projects-fade-top linear both; animation-timeline: --home-projects-scroll; animation-range: 0 0.1px; }
[data-slot="home-projects-scroll"]::after { animation: home-projects-fade-bottom linear both; animation-timeline: --home-projects-scroll; animation-range: calc(100% - 1.1px) calc(100% - 1px); } }
@supports (animation-timeline: --model-selector-scroll) and (timeline-scope: --model-selector-scroll) { [data-slot="model-selector-scroll"] .scroll-view__viewport { scroll-timeline: --model-selector-scroll y; }
[data-slot="model-selector-scroll"]::before { animation: home-projects-fade-top linear both; animation-timeline: --model-selector-scroll; animation-range: 0 0.1px; }
[data-slot="model-selector-scroll"]::after { animation: home-projects-fade-bottom linear both; animation-timeline: --model-selector-scroll; animation-range: calc(100% - 1.1px) calc(100% - 1px); } }
@supports (animation-timeline: --manage-models-scroll) and (timeline-scope: --manage-models-scroll) { [data-slot="manage-models-scroll"] .settings-panel { scroll-timeline: --manage-models-scroll y; }
[data-slot="manage-models-scroll"]::before { animation: home-projects-fade-top linear both; animation-timeline: --manage-models-scroll; animation-range: 0 0.1px; } }
:root body [data-slot="session-turn-diffs-header"] { height: 24px; padding-block: 0; }}