02407e0f7a
Use tokenized border contrast so dark mode borders stay subtle, keep instance tab status dots vivid in dark themes, and adjust tool-call code block header background via a dedicated token.
187 lines
4.8 KiB
CSS
187 lines
4.8 KiB
CSS
/* Primary tab strip */
|
|
.tab-bar {
|
|
@apply border-b;
|
|
border-color: var(--border-base);
|
|
}
|
|
|
|
.tab-bar-instance {
|
|
background-color: var(--surface-secondary);
|
|
}
|
|
|
|
.tab-bar-session {
|
|
background-color: var(--surface-base);
|
|
}
|
|
|
|
.tab-container {
|
|
@apply flex items-center justify-between gap-1 px-2 py-1;
|
|
}
|
|
|
|
.tab-scroll {
|
|
@apply w-full;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tab-strip {
|
|
@apply flex items-center gap-2 px-1;
|
|
min-width: 100%;
|
|
}
|
|
|
|
.tab-strip-tabs {
|
|
@apply flex items-center gap-1 flex-shrink-0;
|
|
}
|
|
|
|
.tab-strip-spacer {
|
|
@apply flex-1;
|
|
min-width: 1px;
|
|
}
|
|
|
|
.tab-shortcuts {
|
|
@apply flex items-center gap-2 flex-shrink-0;
|
|
}
|
|
|
|
.tab-remote-button {
|
|
@apply flex-shrink-0;
|
|
}
|
|
|
|
.tab-base {
|
|
@apply inline-flex items-center gap-2 px-3 py-2 rounded-t-md max-w-[200px] transition-colors text-sm font-medium;
|
|
font-family: var(--font-family-sans);
|
|
outline: none;
|
|
}
|
|
|
|
.tab-base:focus-visible {
|
|
@apply ring-2 ring-offset-1;
|
|
ring-color: var(--accent-primary);
|
|
ring-offset-color: var(--surface-base);
|
|
}
|
|
|
|
.tab-active {
|
|
background-color: var(--tab-active-bg);
|
|
color: var(--tab-active-text);
|
|
}
|
|
|
|
.tab-inactive {
|
|
background-color: var(--tab-inactive-bg);
|
|
color: var(--tab-inactive-text);
|
|
}
|
|
|
|
.tab-inactive:hover {
|
|
background-color: var(--tab-inactive-hover-bg);
|
|
}
|
|
|
|
.tab-active:hover {
|
|
background-color: var(--tab-active-hover-bg);
|
|
}
|
|
|
|
.tab-label {
|
|
@apply truncate;
|
|
}
|
|
|
|
.tab-close {
|
|
@apply opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer;
|
|
}
|
|
|
|
.tab-close:focus-visible {
|
|
@apply ring-2 ring-offset-1;
|
|
ring-color: var(--accent-primary);
|
|
ring-offset-color: inherit;
|
|
}
|
|
|
|
/* Instance tabs: session-status dots should be lighter/softer than list/status pills. */
|
|
.tab-base .status-indicator.session-status.session-working {
|
|
--session-status-dot: color-mix(in oklab, var(--session-status-working-fg) 55%, var(--surface-base));
|
|
}
|
|
|
|
.tab-base .status-indicator.session-status.session-compacting {
|
|
--session-status-dot: color-mix(in oklab, var(--session-status-compacting-fg) 55%, var(--surface-base));
|
|
}
|
|
|
|
.tab-base .status-indicator.session-status.session-idle {
|
|
--session-status-dot: color-mix(in oklab, var(--session-status-idle-fg) 55%, var(--surface-base));
|
|
}
|
|
|
|
.tab-base .status-indicator.session-status.session-permission {
|
|
--session-status-dot: color-mix(in oklab, var(--session-status-permission-fg) 55%, var(--surface-base));
|
|
}
|
|
|
|
/* Dark mode: keep dots vivid (avoid muddy mixes). */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme]) .tab-base .status-indicator.session-status.session-working {
|
|
--session-status-dot: var(--session-status-working-fg);
|
|
}
|
|
:root:not([data-theme]) .tab-base .status-indicator.session-status.session-compacting {
|
|
--session-status-dot: var(--session-status-compacting-fg);
|
|
}
|
|
:root:not([data-theme]) .tab-base .status-indicator.session-status.session-idle {
|
|
--session-status-dot: var(--session-status-idle-fg);
|
|
}
|
|
:root:not([data-theme]) .tab-base .status-indicator.session-status.session-permission {
|
|
--session-status-dot: var(--session-status-permission-fg);
|
|
}
|
|
}
|
|
|
|
[data-theme="dark"] .tab-base .status-indicator.session-status.session-working {
|
|
--session-status-dot: var(--session-status-working-fg);
|
|
}
|
|
|
|
[data-theme="dark"] .tab-base .status-indicator.session-status.session-compacting {
|
|
--session-status-dot: var(--session-status-compacting-fg);
|
|
}
|
|
|
|
[data-theme="dark"] .tab-base .status-indicator.session-status.session-idle {
|
|
--session-status-dot: var(--session-status-idle-fg);
|
|
}
|
|
|
|
[data-theme="dark"] .tab-base .status-indicator.session-status.session-permission {
|
|
--session-status-dot: var(--session-status-permission-fg);
|
|
}
|
|
|
|
.new-tab-button {
|
|
@apply inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors;
|
|
background-color: var(--new-tab-bg);
|
|
color: var(--new-tab-text);
|
|
}
|
|
|
|
.new-tab-button:hover {
|
|
background-color: var(--new-tab-hover-bg);
|
|
}
|
|
|
|
.new-tab-button:focus-visible {
|
|
@apply ring-2 ring-offset-1;
|
|
ring-color: var(--accent-primary);
|
|
ring-offset-color: var(--surface-base);
|
|
}
|
|
|
|
/* Session tabs */
|
|
.session-tab-base {
|
|
@apply inline-flex items-center gap-2 px-3 py-1.5 rounded-t-md max-w-[150px] transition-colors text-sm;
|
|
font-family: var(--font-family-sans);
|
|
outline: none;
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
|
|
.session-tab-base:focus-visible {
|
|
@apply ring-2 ring-offset-1;
|
|
ring-color: var(--accent-primary);
|
|
ring-offset-color: var(--surface-base);
|
|
}
|
|
|
|
.session-tab-active {
|
|
background-color: var(--session-tab-active-bg);
|
|
border-bottom-color: var(--accent-primary);
|
|
color: var(--session-tab-active-text);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.session-tab-inactive {
|
|
color: var(--session-tab-inactive-text);
|
|
}
|
|
|
|
.session-tab-inactive:hover {
|
|
background-color: var(--session-tab-hover-bg);
|
|
}
|
|
|
|
.session-tab-special {
|
|
color: var(--session-tab-inactive-text);
|
|
}
|