Something went wrong. Try again.
opencode v2 mirror
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319.session-summary-popover { transform-origin: var(--kb-popover-content-transform-origin); animation: menu-v2-in 120ms ease-out;}
[data-component="session-summary-panel"] { display: flex; flex-direction: column; gap: 8px; width: 280px; max-width: calc(100vw - 32px);
&[data-mobile] { width: 100%; max-width: none; }}
.session-summary-card { position: relative; z-index: 1; padding: 2px; border-radius: 6px; background: var(--v2-background-bg-base); box-shadow: var(--v2-elevation-raised);}
[data-color-scheme="dark"] .session-summary-card { background: var(--v2-background-bg-layer-01);}
.session-summary-card,.session-summary-rows { display: flex; flex-direction: column; gap: 2px;}
.session-summary-row,.session-service-row,.session-service-config,[data-component="switch"].session-mcp-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 12px; border-radius: 4px; color: var(--v2-text-text-base); font-size: 13px; font-weight: 440; line-height: var(--line-height-base); text-align: start;}
.session-summary-card .session-summary-row { /* Keep copy out of the trailing indicator column, including rows without an indicator. */ padding-inline-end: 36px;}
.session-summary-card .session-summary-row:has(> .session-summary-menu-indicator) { /* Align trailing 16px indicators with the move row's 20px dismiss button. */ padding-inline-end: 8px;}
.session-summary-card .session-summary-menu-indicator { margin-inline-start: 4px;}
.session-summary-row:focus-visible,.session-service-config:focus-visible,.session-mcp-row:focus-within { outline: none; background: var(--v2-overlay-simple-overlay-hover);}
@media (hover: hover) { button.session-summary-row:hover, .session-service-config:not(:disabled):hover, .session-summary-move:has(> .session-summary-dismiss:hover) > .session-summary-row, .session-mcp-row:not([data-disabled]):hover { background: var(--v2-overlay-simple-overlay-hover); }}
.session-summary-row[data-expanded] { background: var(--v2-overlay-simple-overlay-pressed);}
.session-summary-heading { color: var(--v2-text-text-muted); font-weight: 530;}
.session-summary-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start;}.session-summary-heading .session-summary-label { flex: 0 1 auto;}.session-summary-disclosure { flex-shrink: 0; color: var(--v2-icon-icon-muted);}.session-summary-heading[aria-expanded="false"] .session-summary-disclosure { transform: rotate(-90deg);}.session-summary-heading[aria-expanded="false"]:dir(rtl) .session-summary-disclosure { transform: rotate(90deg);}
.session-service-menu { z-index: 60; width: 280px; max-width: calc(100vw - 32px); max-height: min(480px, calc(100dvh - 32px)); overflow-y: auto; overscroll-behavior: contain; padding: 2px; border-radius: 6px; background: var(--v2-background-bg-layer-01); box-shadow: var(--v2-elevation-floating); outline: none; color: var(--v2-text-text-base); font-size: 13px; font-weight: 440; line-height: var(--line-height-compact); transform-origin: var(--kb-popover-content-transform-origin); animation: menu-v2-in 120ms ease-out;
&[data-empty] { width: 232px; }}
.session-service-menu .session-summary-row,.session-service-menu .session-service-row,.session-service-menu .session-service-config,.session-service-menu [data-component="switch"].session-mcp-row { font-size: inherit; line-height: inherit;}
.session-service-menu > :is(.session-service-row, .session-mcp-row) + :is(.session-service-row, .session-mcp-row) { margin-block-start: 2px;}
.session-service-title { display: flex; align-items: center; min-height: 32px; padding: 0 12px; color: var(--v2-text-text-faint); font-size: inherit; font-weight: 530; letter-spacing: 0.05px;}
.session-service-empty { display: flex; flex-direction: column; gap: 0; padding: 0; color: var(--v2-text-text-faint); font-size: inherit; font-weight: 440; line-height: var(--line-height-compact); overflow-wrap: anywhere;
strong { padding: 8px 12px; font-weight: 530; }}
.session-service-message { padding: 6px 12px; color: var(--v2-text-text-faint); overflow-wrap: anywhere;}.session-service-menu > .session-service-footer { padding-block-start: 6px;}.session-service-config-separator { display: block; height: 1px; width: calc(100% + 4px); margin: 2px -2px; background: var(--v2-border-border-muted);}.session-service-config { display: inline-flex; align-items: center; gap: 8px; color: var(--v2-text-text-base); font: inherit; text-align: start; text-decoration: none; cursor: pointer;
.session-service-config-arrow { opacity: 0; transition: opacity 150ms ease-out; }
&:is(:hover, :focus-visible) .session-service-config-arrow { opacity: 1; }
&:focus-visible { outline: 2px solid var(--v2-border-border-focus); outline-offset: 2px; border-radius: 2px; }}.session-service-dot { display: grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; color: var(--v2-icon-icon-faint);
&::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }}.session-service-dot[data-status="connected"],.session-service-dot[data-status="active"] { color: var(--icon-success-base);}.session-service-dot[data-status="failed"] { color: var(--icon-critical-base);}.session-service-dot[data-status="needs_auth"] { color: var(--icon-warning-base);}
[data-component="switch"].session-mcp-row [data-slot="switch-label"] { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: auto; align-self: stretch; color: inherit; font: inherit; letter-spacing: inherit;}.session-service-status { flex-shrink: 0; font-size: inherit; line-height: var(--line-height-compact); color: var(--v2-text-text-faint);}.session-mcp-row[aria-disabled="true"] [data-slot="switch-control"] { opacity: 0.5;}.session-summary-move { position: relative; /* The first 6px sit behind the card, leaving 4px of visible space above the row. */ padding: 10px 2px 2px; margin-top: -6px; border-radius: 0 0 6px 6px; background: var(--v2-background-bg-layer-02);}.session-summary-move > .session-summary-row { padding-inline-end: 36px;}.session-summary-dismiss { position: absolute; inset-inline-end: 8px; bottom: 8px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--v2-icon-icon-muted); border-radius: 4px;}.session-summary-dismiss:hover,.session-summary-dismiss:focus-visible { background: var(--v2-overlay-simple-overlay-hover); outline: none;}
@media (max-width: 767px) { [data-component="session-summary-panel"] .session-summary-row, .session-service-menu .session-service-title, .session-service-menu .session-service-row, .session-service-menu .session-service-config, .session-service-menu .session-mcp-row { min-height: 44px; }}
@media (prefers-reduced-motion: reduce) { .session-summary-popover, .session-service-menu { animation: none; }
.session-service-config .session-service-config-arrow { transition: none; }}