mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-11-07 06:19:43 -10:00
Shaojin Wen
ad83860092
* feat(web-shell): move session search beside the activity toggle The sidebar search lived in the Workspaces header, where it appeared only on hover and moved its input into a separate row. Put the toggle in the top brand row next to View activity, expand the field inline when the column is wide enough, and fall back to a full-width row under the brand row for narrow drawers and columns. Hide the control while the activity view replaces the session list, and keep the collapsed strip's search in its session popover. * test(web-shell): scope the drawer brand assertion to the logo The always-visible search toggle adds a second SVG to the sidebar brand row, so the drawer smoke test parent-level svg locator matched both the logo and the search icon and failed in strict mode. Target the logo own aria-hidden container instead.
2444 lines
46 KiB
CSS
2444 lines
46 KiB
CSS
.sidebar {
|
|
position: relative;
|
|
width: min(
|
|
var(--web-shell-sidebar-width, 300px),
|
|
calc(var(--web-shell-sidebar-container-width, 100vw) / 2)
|
|
);
|
|
min-width: min(
|
|
var(--web-shell-sidebar-width, 300px),
|
|
calc(var(--web-shell-sidebar-container-width, 100vw) / 2)
|
|
);
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: calc(12px + var(--web-shell-desktop-titlebar-height, 0px)) 12px 12px;
|
|
overflow: hidden;
|
|
background: var(--sidebar-background);
|
|
border-right: 1px solid var(--sidebar-border);
|
|
color: var(--sidebar-foreground);
|
|
font-family: var(--font-sans);
|
|
transition:
|
|
width 180ms ease,
|
|
min-width 180ms ease;
|
|
}
|
|
|
|
.resizing {
|
|
transition: none;
|
|
}
|
|
|
|
.collapsed {
|
|
width: 56px;
|
|
min-width: 56px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sidebar.mobileOpen {
|
|
/* The floor is container-capped: a rail layout's 276px minimum would
|
|
otherwise overflow a host narrower than that (e.g. a 250px embed). */
|
|
width: clamp(
|
|
min(var(--web-shell-sidebar-min-width, 220px), 100%),
|
|
calc(var(--web-shell-sidebar-container-width, 100vw) * 0.7),
|
|
var(--web-shell-sidebar-max-width, 420px)
|
|
);
|
|
min-width: clamp(
|
|
min(var(--web-shell-sidebar-min-width, 220px), 100%),
|
|
calc(var(--web-shell-sidebar-container-width, 100vw) * 0.7),
|
|
var(--web-shell-sidebar-max-width, 420px)
|
|
);
|
|
}
|
|
|
|
.sidebar.mobileOpen .resizeHandle {
|
|
display: none;
|
|
}
|
|
|
|
.newChatButton,
|
|
.pluginButton,
|
|
.footerButton,
|
|
.collapseButton,
|
|
.projectRow,
|
|
.sessionRow,
|
|
.sessionGroupHeader,
|
|
.sessionGroupActionButton,
|
|
.retry,
|
|
.iconButton,
|
|
.projectIconButton,
|
|
.sessionActionButton,
|
|
.groupMenuItem,
|
|
.secondaryButton,
|
|
.dangerButton {
|
|
appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.newChatButton,
|
|
.pluginButton,
|
|
.footerButton,
|
|
.projectRow {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 0 4px;
|
|
border-radius: 8px;
|
|
color: var(--sidebar-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.newChatButton,
|
|
.pluginButton {
|
|
height: 32px;
|
|
}
|
|
|
|
.newChatButton {
|
|
background: transparent;
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.pluginButton {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.primaryNav {
|
|
display: flex;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.newTaskNav {
|
|
display: flex;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
padding: 12px 0 2px;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.newTaskNavScrolled {
|
|
border-bottom-color: color-mix(
|
|
in srgb,
|
|
var(--sidebar-border) 55%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.newChatButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.48;
|
|
}
|
|
|
|
.newChatButton:hover,
|
|
.pluginButton:hover,
|
|
.footerButton:hover,
|
|
.projectRow:hover,
|
|
.sessionRow:hover,
|
|
.sessionRow:focus-visible,
|
|
.sessionGroupHeader:hover,
|
|
.sessionGroupHeader:focus-visible,
|
|
.sessionGroupActionButton:hover,
|
|
.sessionGroupActionButton:focus-visible,
|
|
.collapseButton:hover,
|
|
.collapseButton:focus-visible,
|
|
.iconButton:hover,
|
|
.iconButton:focus-visible,
|
|
.projectIconButton:hover,
|
|
.projectIconButton:focus-visible {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.newChatButton:focus-visible,
|
|
.pluginButton:focus-visible,
|
|
.footerButton:focus-visible,
|
|
.projectRow:focus-visible,
|
|
.sessionRow:focus-visible,
|
|
.sessionGroupHeader:focus-visible,
|
|
.sessionGroupActionButton:focus-visible,
|
|
.collapseButton:focus-visible,
|
|
.iconButton:focus-visible,
|
|
.projectIconButton:focus-visible,
|
|
.retry:focus-visible {
|
|
outline: 2px solid var(--sidebar-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.activityToggle {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.activityToggle[aria-pressed='true'] {
|
|
background: color-mix(in srgb, var(--agent-blue-500) 14%, transparent);
|
|
color: var(--agent-blue-500);
|
|
}
|
|
|
|
.activityToggle[aria-pressed='true']:hover {
|
|
background: color-mix(in srgb, var(--agent-blue-500) 20%, transparent);
|
|
}
|
|
|
|
.activityToggle[aria-pressed='true'] [data-activity-attention] {
|
|
background: currentColor;
|
|
}
|
|
|
|
.navIcon {
|
|
position: relative;
|
|
width: 24px;
|
|
height: 24px;
|
|
flex: 0 0 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: currentColor;
|
|
}
|
|
|
|
.navIcon svg,
|
|
.iconButton svg,
|
|
.collapseButton svg {
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.iconButton svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke-width: 1.8;
|
|
}
|
|
|
|
.topRow {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 4px 12px;
|
|
border-bottom: 1px solid var(--sidebar-border);
|
|
}
|
|
|
|
.topRow .newChatButton {
|
|
flex: 1 1 auto;
|
|
width: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.topRowActions {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-left: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.topRowActionsSearching {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.topRowSearchRow {
|
|
flex: 0 0 auto;
|
|
padding: 0 4px 12px;
|
|
}
|
|
|
|
.searchToggle {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.searchToggle:hover,
|
|
.searchToggle:focus-visible {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.brandLogo {
|
|
flex: 0 0 28px;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.brandLogo svg,
|
|
.brandLogo img {
|
|
width: 26px;
|
|
height: 26px;
|
|
display: block;
|
|
}
|
|
|
|
/* A custom logo arrives as an <img>, which stretches to the box; the built-in
|
|
inline <svg> keeps its ratio through its viewBox instead. */
|
|
.brandLogo img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.brandName,
|
|
.sectionHeader {
|
|
color: var(--sidebar-foreground);
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.brandName {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.collapsed .topRow {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.collapsed .topRow .newChatButton {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.workspacePicker {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.workspacePickerLabel {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.workspacePickerHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.workspaceAddIconButton {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.workspaceAddIconButton:hover {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-foreground);
|
|
}
|
|
|
|
.workspaceList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.workspaceSessionBody {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.liveWorkspaceHeader {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.livePendingHeader,
|
|
.livePendingSession {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 30px;
|
|
padding: 4px 8px;
|
|
color: var(--sidebar-foreground);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.livePendingHeader {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.livePendingSession {
|
|
padding-left: 32px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
button.livePendingSession {
|
|
width: 100%;
|
|
border: 0;
|
|
background: transparent;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button.livePendingSession:hover {
|
|
color: var(--sidebar-foreground);
|
|
}
|
|
|
|
.livePendingSession svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--primary);
|
|
animation: livePendingSpin 1s linear infinite;
|
|
}
|
|
|
|
.liveSessionSpinner {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--primary);
|
|
animation: livePendingSpin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes livePendingSpin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.livePendingSession svg {
|
|
animation: none;
|
|
}
|
|
.liveSessionSpinner {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.projectsHeader {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
height: 32px;
|
|
gap: 4px;
|
|
padding-left: 8px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.pinnedSessionList {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.projectsHeaderToggle,
|
|
.projectsHeaderAction {
|
|
appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.projectsHeaderActions {
|
|
display: flex;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.projectsHeaderActions,
|
|
.projectsHeader:has(.projectsHeaderActions) .projectsHeaderToggle svg {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.projectsHeader:hover .projectsHeaderActions,
|
|
.projectsHeader:has(:focus-visible) .projectsHeaderActions,
|
|
.projectsHeader:has(.projectsHeaderActions):is(:hover, :has(:focus-visible))
|
|
.projectsHeaderToggle
|
|
svg {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.projectsHeaderActions .projectsHeaderAction {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.projectsHeaderToggle {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.projectsHeaderToggle svg,
|
|
.liveWorkspaceHeader > svg:last-child,
|
|
.projectsHeaderAction svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.projectsHeaderAction {
|
|
display: inline-flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.projectsHeaderAction:hover,
|
|
.projectsHeaderAction:focus-visible {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.projectSearch {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.projectSearch > svg {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 50%;
|
|
left: 10px;
|
|
width: 15px;
|
|
height: 15px;
|
|
color: var(--muted-foreground);
|
|
pointer-events: none;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.projectSearch input {
|
|
width: 100%;
|
|
padding-left: 32px;
|
|
}
|
|
|
|
/* After `.projectSearch`: the top row width is the search field's budget, so
|
|
it must be able to shrink instead of pushing the icon buttons out. */
|
|
.topRowSearchField {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.addWorkspaceButton {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
width: 100%;
|
|
padding: 6px 8px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
}
|
|
|
|
.addWorkspaceButton:hover {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-foreground);
|
|
}
|
|
|
|
.body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-right: -12px;
|
|
padding-right: 12px;
|
|
/* End the scroll port above the footer overlay so rows can never sit
|
|
under it (padding inside the scroll port would not: the port itself
|
|
still reaches the footer and rows parked at its bottom edge stay
|
|
unhoverable). */
|
|
margin-bottom: 40px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
scrollbar-gutter: stable;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.sectionTitle {
|
|
padding: 8px 8px 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.projectRow {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.projectRowExpanded {
|
|
}
|
|
|
|
.projectIconButton {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.projectIconButton svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.workspaceHeaderActions {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1px;
|
|
border-radius: 6px;
|
|
background: var(--sidebar-accent);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.workspaceHeaderAction {
|
|
appearance: none;
|
|
width: 22px;
|
|
height: 22px;
|
|
flex: 0 0 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.workspaceHeaderAction:hover,
|
|
.workspaceHeaderAction:focus-visible {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.workspaceHeaderAction:focus-visible {
|
|
outline: 2px solid var(--sidebar-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.workspaceHeaderAction svg {
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.projectName,
|
|
.sessionText {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.projectName {
|
|
flex: 0 1 auto;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.projectIconButton:last-child {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.projectHoverAction {
|
|
opacity: 0;
|
|
}
|
|
|
|
.projectRow:hover .projectHoverAction,
|
|
.projectRow:focus-within .projectHoverAction {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sessionList {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.sessionGroupSection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.sessionGroupHeaderRow {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.sessionGroupHeaderRow:hover,
|
|
.sessionGroupHeaderRow:focus-within {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.sessionGroupHeaderRow .sessionGroupHeader:hover,
|
|
.sessionGroupHeaderRow .sessionGroupHeader:focus-visible {
|
|
background: transparent;
|
|
}
|
|
|
|
.sessionGroupHeader {
|
|
min-width: 0;
|
|
height: 32px;
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 8px 0 20px;
|
|
border-radius: 8px;
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionGroupDot {
|
|
width: 8px;
|
|
height: 8px;
|
|
flex: 0 0 8px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.sessionGroupDotMuted {
|
|
background: var(--muted-foreground);
|
|
}
|
|
|
|
.sessionGroupIcon {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sessionGroupIcon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.6;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.sessionGroupTitle {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionGroupCount {
|
|
flex: 0 0 auto;
|
|
color: color-mix(in srgb, var(--muted-foreground) 86%, transparent);
|
|
}
|
|
|
|
.sessionGroupChevron {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sessionGroupChevron svg,
|
|
.sessionGroupActionButton svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
display: block;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.sessionGroupHeaderActions {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
opacity: 0;
|
|
transition: opacity 120ms ease;
|
|
}
|
|
|
|
.sessionGroupHeaderRow:hover .sessionGroupHeaderActions,
|
|
.sessionGroupHeaderRow:focus-within .sessionGroupHeaderActions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sessionGroupActionButton {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 7px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionGroupActionButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.38;
|
|
}
|
|
|
|
.sessionGroupList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.showAllSessions {
|
|
align-self: flex-start;
|
|
margin-left: 26px;
|
|
padding: 1px 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.showAllSessions:hover {
|
|
color: var(--sidebar-foreground);
|
|
}
|
|
|
|
.showAllSessions:focus-visible {
|
|
color: var(--sidebar-foreground);
|
|
outline: 2px solid var(--sidebar-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.sessionRow {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 2px 0 2px 26px;
|
|
border-radius: 8px;
|
|
color: color-mix(in srgb, var(--sidebar-foreground) 78%, transparent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* A parent row keeps its chevron left of the title; a child row aligns its
|
|
title under the parent's, so the lineage reads as one block. */
|
|
.sessionRow.sessionTreeRow {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.sessionTreeToggle {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 25px;
|
|
width: 14px;
|
|
height: 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
background: transparent;
|
|
color: color-mix(in srgb, currentColor 70%, transparent);
|
|
cursor: pointer;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.sessionTreeToggle:hover {
|
|
background: color-mix(in srgb, currentColor 12%, transparent);
|
|
color: currentColor;
|
|
}
|
|
|
|
.sessionTreeToggle:focus-visible {
|
|
outline: 2px solid var(--sidebar-ring, currentColor);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.collapsedSessionPopover {
|
|
overscroll-behavior: contain;
|
|
width: min(
|
|
var(--collapsed-session-popover-width, 260px),
|
|
var(--radix-popover-content-available-width, 420px)
|
|
);
|
|
max-width: var(--radix-popover-content-available-width, 420px);
|
|
max-height: min(70vh, var(--radix-popover-content-available-height, 70vh));
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 8px;
|
|
overflow-y: auto;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.currentSession {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
/* Active-row marker on the left edge, mirroring editor list conventions. */
|
|
.currentSession::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 3px;
|
|
width: 2px;
|
|
height: 14px;
|
|
border-radius: 1px;
|
|
background: var(--primary);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.busySession {
|
|
opacity: 0.72;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sessionDetailsTooltip {
|
|
width: min(360px, var(--radix-popover-content-available-width, 360px));
|
|
min-width: min(280px, var(--radix-popover-content-available-width, 280px));
|
|
max-width: var(--radix-popover-content-available-width, 360px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.sessionDetailsHeader,
|
|
.sessionDetailsRow {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sessionDetailsHeader {
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.sessionDetailsTitle {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--popover-foreground);
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionDetailsTime {
|
|
flex: 0 0 auto;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.sessionDetailsRow {
|
|
color: var(--popover-foreground);
|
|
}
|
|
|
|
.sessionDetailsRowValue {
|
|
margin-left: auto;
|
|
padding-left: 16px;
|
|
color: var(--muted-foreground);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* The branch row itself becomes a button when the workspace's Git picker is
|
|
wired, so the whole row is the target rather than a trailing control. */
|
|
.sessionDetailsRowButton {
|
|
width: 100%;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-align: inherit;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.sessionDetailsRowButton:focus-visible {
|
|
outline: 2px solid var(--sidebar-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Branch name and its severity dot stay tight together; the summary keeps its
|
|
own right-aligned column via margin-left: auto. */
|
|
.sessionDetailsBranch {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* The compact chip's badge dot, lifted beside the branch name: accent when the
|
|
tree is dirty, warning for an in-progress operation or detached HEAD, error
|
|
when conflicted. Absent on a clean tree. */
|
|
.sessionDetailsGitDot {
|
|
flex: 0 0 auto;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--chat-editor-accent-color, #4a9eff);
|
|
}
|
|
|
|
.sessionDetailsGitDot[data-tone='warning'] {
|
|
background: var(--warning-color, #d29922);
|
|
}
|
|
|
|
.sessionDetailsGitDot[data-tone='error'] {
|
|
background: var(--error-color, #e5534b);
|
|
}
|
|
|
|
/* The row's only hover cue: the branch icon and the chevron carry the muted
|
|
tone from `.sessionDetailsRow svg`, so a hover has to move them together. */
|
|
.sessionDetailsRowButton:hover svg {
|
|
color: var(--popover-foreground);
|
|
}
|
|
|
|
.sessionDetailsRowIssue,
|
|
.sessionDetailsRowIssue .sessionDetailsRowValue {
|
|
color: var(--warning-color, #d29922);
|
|
}
|
|
|
|
/* Session counts inside the workspace details popover — the same dot-count
|
|
language the folder header used before the counts moved here. */
|
|
.sessionDetailsSessionCounts {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-left: auto;
|
|
padding-left: 16px;
|
|
color: var(--muted-foreground);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.sessionDetailsSessionCount {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.sessionDetailsSessionCount::before {
|
|
content: '';
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
.sessionDetailsSessionCountRunning {
|
|
color: var(--success-color, #3fb950);
|
|
}
|
|
|
|
.sessionDetailsSessionCountAttention {
|
|
color: var(--warning-color, #d29922);
|
|
}
|
|
|
|
.sessionDetailsSessionCountTotal::before {
|
|
display: none;
|
|
}
|
|
|
|
.sessionDetailsRow svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
color: var(--muted-foreground);
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.sessionDetailsRow span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Match the session-row badge text: neutral muted tone, not the global link
|
|
blue — a blue/purple link would clash with the merged state icon's purple. */
|
|
.sessionDetailsRow a {
|
|
color: color-mix(
|
|
in srgb,
|
|
var(--muted-foreground, #6b7280) 75%,
|
|
var(--foreground)
|
|
);
|
|
}
|
|
|
|
.sessionDetailsRow a:hover {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.sessionDetailsIdRow {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.sessionDetailsIdRow > span:first-child {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--muted-foreground);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionDetailsCopyButton {
|
|
width: 22px;
|
|
height: 22px;
|
|
flex: 0 0 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionDetailsCopyButton:hover,
|
|
.sessionDetailsCopyButton:focus-visible {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
outline: none;
|
|
}
|
|
|
|
.sessionDetailsCopyButton svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.sessionDetailsCopied {
|
|
flex: 0 0 auto;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Path row in the workspace details popover: the path truncates, the
|
|
local-open action buttons pin to the row's right edge. */
|
|
.sessionDetailsPath {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionDetailsRowActions {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 2px;
|
|
margin-left: auto;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.sessionText {
|
|
position: relative;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
margin-right: 4px;
|
|
overflow: hidden;
|
|
color: currentColor;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
/* The fade hints at a clipped tail; only overflowing titles clip, and the
|
|
hover measurement marks them via the overflow attribute. */
|
|
.sessionText[data-web-shell-title-overflow] {
|
|
mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent);
|
|
-webkit-mask-image: linear-gradient(
|
|
to right,
|
|
#000 calc(100% - 10px),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.sessionTextInner {
|
|
display: inline-block;
|
|
min-width: max-content;
|
|
}
|
|
|
|
.sessionSearchSnippet {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: color-mix(in srgb, currentColor 55%, transparent);
|
|
}
|
|
|
|
.sessionRow:hover .sessionTextInner {
|
|
animation: sessionTitleScroll var(--session-title-scroll-duration, 0s) 1s
|
|
linear forwards;
|
|
}
|
|
|
|
.sessionRow:focus-within .sessionTextInner {
|
|
animation: sessionTitleScroll var(--session-title-scroll-duration, 0s) 0.3s
|
|
linear forwards;
|
|
}
|
|
|
|
.sessionStatusSlot {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 7px;
|
|
width: 18px;
|
|
height: 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.sessionStatusDot {
|
|
color: var(--agent-blue-500);
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
|
|
animation: sidebarPulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
/* A running turn gets the same pulsing dot in green, so busy sessions are
|
|
scannable without waiting for the right-edge spinner. */
|
|
.sessionStatusDotRunning {
|
|
color: var(--success-color, #3fb950);
|
|
}
|
|
|
|
.sessionSourceIcon {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.sessionSourceIcon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.collapsedSessionStatusDot {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 1px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
color: var(--agent-blue-500);
|
|
animation: sidebarPulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
.collapsedSessionStatusApproval {
|
|
color: color-mix(in srgb, var(--success-color) 95%, var(--foreground));
|
|
}
|
|
|
|
.collapsedSessionStatusQuestion {
|
|
color: color-mix(in srgb, var(--agent-blue-500) 95%, var(--foreground));
|
|
}
|
|
|
|
.sessionTitlePin {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: 0 0 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionTitlePin:hover {
|
|
background: var(--accent);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.sessionTitlePin:disabled {
|
|
cursor: default;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.sessionTitlePin svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.sessionMetaSlot {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
height: 30px;
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@supports (selector(:has(*))) {
|
|
.sessionMetaSlot:not(
|
|
:has(
|
|
.sessionLoading,
|
|
.sessionAttention,
|
|
.sessionGitIcon,
|
|
.sessionSourceIcon
|
|
)
|
|
) {
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
|
|
.sessionAttention {
|
|
height: 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0 9px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--success-color) 10%, transparent);
|
|
color: color-mix(in srgb, var(--success-color) 95%, var(--foreground));
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sessionAttentionUserInput {
|
|
background: color-mix(in srgb, var(--agent-blue-500) 10%, transparent);
|
|
color: color-mix(in srgb, var(--agent-blue-500) 95%, var(--foreground));
|
|
}
|
|
|
|
.sessionGitIcon {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-accent-fg, #8b5cf6);
|
|
}
|
|
|
|
.sessionGitIcon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.sessionLoading {
|
|
margin: 0 10px;
|
|
width: 12px;
|
|
height: 12px;
|
|
display: inline-flex;
|
|
border: 1.5px solid
|
|
color-mix(in srgb, var(--muted-foreground) 28%, transparent);
|
|
border-top-color: var(--muted-foreground);
|
|
border-radius: 999px;
|
|
animation: sidebarSpin 0.8s linear infinite;
|
|
}
|
|
|
|
.sessionActions {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@supports (selector(:has(*))) {
|
|
.sessionActions:focus-within,
|
|
.sessionActions:has([data-state='open']) {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.sessionMetaSlot:has(.sessionActions:focus-within),
|
|
.sessionMetaSlot:has([data-state='open']) {
|
|
min-width: var(--session-actions-width, 78px);
|
|
}
|
|
|
|
.sessionMetaSlot:has(.sessionActions:focus-within) .sessionGitIcon,
|
|
.sessionMetaSlot:has([data-state='open']) .sessionGitIcon,
|
|
.sessionMetaSlot:has(.sessionActions:focus-within) .sessionLoading,
|
|
.sessionMetaSlot:has([data-state='open']) .sessionLoading,
|
|
.sessionMetaSlot:has(.sessionActions:focus-within) .sessionAttention,
|
|
.sessionMetaSlot:has([data-state='open']) .sessionAttention,
|
|
.sessionMetaSlot:has(.sessionActions:focus-within) .sessionSourceIcon,
|
|
.sessionMetaSlot:has([data-state='open']) .sessionSourceIcon {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sessionRow:hover:not(.runningSession)
|
|
.sessionMetaSlot:has(.sessionActions)
|
|
.sessionSourceIcon,
|
|
.sessionMetaSlot:has(.sessionActions):hover .sessionSourceIcon {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.sessionRow:hover .sessionMetaSlot {
|
|
min-width: var(--session-actions-width, 78px);
|
|
}
|
|
|
|
/* Rows with a PR badge hold the overlay's width at rest, so revealing the
|
|
actions never moves the badge out from under the pointer. */
|
|
.sessionMetaSlotReserved {
|
|
min-width: var(--session-actions-width, 78px);
|
|
}
|
|
|
|
.sessionRow:hover:not(.runningSession) .sessionGitIcon,
|
|
.sessionRow:hover:not(.runningSession) .sessionAttention,
|
|
.sessionMetaSlot:hover .sessionGitIcon,
|
|
.sessionMetaSlot:hover .sessionLoading,
|
|
.sessionMetaSlot:hover .sessionAttention {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sessionRow:hover:not(.runningSession) .sessionActions,
|
|
.sessionMetaSlot:hover .sessionActions {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
/* Touch devices get no hover reveal, so the actions stay in the flow and
|
|
share the slot with the markers instead of overlaying and hiding them. */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.sessionActions {
|
|
position: static;
|
|
opacity: 1;
|
|
}
|
|
|
|
.sessionActionButton {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
@keyframes sidebarSpin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes sessionTitleScroll {
|
|
to {
|
|
transform: translateX(calc(var(--session-title-scroll-distance, 0px) * -1));
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.sessionRow:hover .sessionTextInner,
|
|
.sessionRow:focus-within .sessionTextInner {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
@keyframes sidebarPulse {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent);
|
|
opacity: 0.72;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent);
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.iconButton,
|
|
.sessionActionButton,
|
|
.collapseButton {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sessionActionButton {
|
|
width: 26px;
|
|
height: 26px;
|
|
flex: 0 0 26px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.sessionActionButton:hover,
|
|
.sessionActionButton:focus-visible {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
.activeSessionActionButton {
|
|
color: var(--agent-blue-500);
|
|
}
|
|
|
|
.sessionActionButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.sessionActionButton svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.searchInput {
|
|
width: calc(100% - 16px);
|
|
height: 44px;
|
|
margin: -2px 8px 2px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.searchInput:focus-visible,
|
|
.renameInput:focus-visible {
|
|
border-color: var(--sidebar-ring);
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-ring) 18%, transparent);
|
|
}
|
|
|
|
.dialogSelect {
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.dialogInput:focus-visible,
|
|
.dialogSelect:focus-visible {
|
|
border-color: var(--sidebar-ring);
|
|
outline: 0;
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-ring) 18%, transparent);
|
|
}
|
|
|
|
.groupMenu {
|
|
position: fixed;
|
|
z-index: 1100;
|
|
width: 240px;
|
|
max-height: min(320px, calc(100vh - 16px));
|
|
max-height: min(320px, calc(100dvh - 16px));
|
|
padding: 6px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 8px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
overflow-y: auto;
|
|
box-shadow:
|
|
0 10px 24px rgb(0 0 0 / 22%),
|
|
0 2px 6px rgb(0 0 0 / 16%);
|
|
}
|
|
|
|
.groupMenuItem {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 10px;
|
|
border-radius: 6px;
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans, system-ui, sans-serif);
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.groupMenuItem:hover,
|
|
.groupMenuItem:focus-visible,
|
|
.groupMenuItemActive {
|
|
background: var(--sidebar-accent);
|
|
color: var(--sidebar-accent-foreground);
|
|
outline: 0;
|
|
}
|
|
|
|
.groupMenuName {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.groupMenuDot,
|
|
.groupMenuEmptyDot,
|
|
.groupMenuIcon {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.groupMenuDot {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.groupMenuEmptyDot {
|
|
border: 1px solid var(--muted-foreground);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.groupMenuIcon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.groupMenuCheck {
|
|
flex: 0 0 auto;
|
|
color: var(--agent-blue-500);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.groupMenuSeparator {
|
|
height: 1px;
|
|
margin: 6px 4px;
|
|
background: var(--sidebar-border);
|
|
}
|
|
|
|
.groupColorRed {
|
|
background: var(--accent-red);
|
|
}
|
|
|
|
.groupColorOrange {
|
|
background: var(--accent-orange);
|
|
}
|
|
|
|
.groupColorYellow {
|
|
background: var(--accent-yellow);
|
|
}
|
|
|
|
.groupColorGreen {
|
|
background: var(--accent-green);
|
|
}
|
|
|
|
.groupColorBlue {
|
|
background: var(--agent-blue-500);
|
|
}
|
|
|
|
.groupColorPurple {
|
|
background: var(--agent-purple-600);
|
|
}
|
|
|
|
.groupColorCustom {
|
|
box-shadow: inset 0 0 0 1px
|
|
color-mix(in srgb, var(--foreground) 28%, transparent);
|
|
}
|
|
|
|
.iconButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.38;
|
|
}
|
|
|
|
.renameForm {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.renameInput {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font: inherit;
|
|
}
|
|
|
|
.notice,
|
|
.retry {
|
|
padding: 8px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
text-align: left;
|
|
}
|
|
|
|
.notice {
|
|
padding: 4px 8px 4px 26px;
|
|
}
|
|
|
|
.retry {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.confirmContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.confirmDescription {
|
|
margin: 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.confirmActions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.groupForm {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
font-family: var(--font-sans, system-ui, sans-serif);
|
|
}
|
|
|
|
.fieldStack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.dialogSelect {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.dialogInput {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 6px;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.groupCustomColorRow {
|
|
display: grid;
|
|
grid-template-columns: 44px minmax(0, 1fr);
|
|
gap: 8px 10px;
|
|
align-items: end;
|
|
}
|
|
|
|
.groupColorPicker {
|
|
width: 44px;
|
|
height: 44px;
|
|
padding: 3px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 8px;
|
|
background: var(--background);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.groupHexField {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.groupColorError {
|
|
grid-column: 2;
|
|
color: var(--destructive, #dc2626);
|
|
font-size: 11px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.secondaryButton,
|
|
.dangerButton {
|
|
height: 28px;
|
|
padding: 0 12px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.secondaryButton {
|
|
border: 1px solid var(--border);
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.secondaryButton:disabled,
|
|
.dangerButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.dangerButton {
|
|
border: 1px solid var(--error-color);
|
|
background: transparent;
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.dangerButton:hover:not(:disabled),
|
|
.dangerButton:focus-visible:not(:disabled) {
|
|
background: var(--error-bg);
|
|
}
|
|
|
|
.footer {
|
|
position: absolute;
|
|
z-index: 5;
|
|
right: 12px;
|
|
bottom: 4px;
|
|
left: 12px;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding-top: 4px;
|
|
border-top: 1px solid var(--sidebar-border);
|
|
background: var(--sidebar-background);
|
|
}
|
|
|
|
.footerButton {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.footerVersion {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: calc(100% + 8px);
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.withVersion:not(.collapsed) .body {
|
|
margin-bottom: 76px;
|
|
}
|
|
|
|
.collapsed:has([data-web-shell-update]) .body {
|
|
margin-bottom: 264px;
|
|
}
|
|
|
|
.footerPrimary,
|
|
.footerActions {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.footerPrimary {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.footerActions {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.footerButtonLabel {
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.footerCompact {
|
|
gap: 4px;
|
|
}
|
|
|
|
.footerCompact .footerPrimary,
|
|
.footerCompact .footerActions {
|
|
gap: 4px;
|
|
}
|
|
|
|
.footerCompact .footerButton {
|
|
width: 26px;
|
|
height: 28px;
|
|
flex: 0 0 26px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.footerCompact .footerButtonLabel {
|
|
display: none;
|
|
}
|
|
|
|
.footerCompact .collapseButton {
|
|
width: 26px;
|
|
height: 28px;
|
|
}
|
|
|
|
.collapseButton {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.version {
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
user-select: text;
|
|
}
|
|
|
|
.collapsed .newChatButton,
|
|
.collapsed .pluginButton,
|
|
.collapsed .footerButton,
|
|
.collapsed .projectRow {
|
|
width: 32px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.collapsed .body {
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 2px;
|
|
margin-right: 0;
|
|
padding-right: 0;
|
|
margin-bottom: 220px;
|
|
scrollbar-gutter: auto;
|
|
/* A visible scrollbar inside the 32px rail has no value and would
|
|
re-take layout width (re-creating the icon offset) the moment the
|
|
session list overflows — hide it so the content box stays stable. */
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.collapsed .body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.collapsed .newTaskNav {
|
|
justify-content: center;
|
|
}
|
|
|
|
.collapsed .primaryNav {
|
|
align-items: center;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.collapsed .sessionList {
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-right: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.collapsed .footer {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.collapsed .footerPrimary,
|
|
.collapsed .footerActions {
|
|
flex-direction: column;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.resizeHandle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -3px;
|
|
bottom: 0;
|
|
width: 6px;
|
|
cursor: col-resize;
|
|
touch-action: none;
|
|
}
|
|
|
|
.resizeHandle::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 2px;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: transparent;
|
|
content: '';
|
|
}
|
|
|
|
.resizeHandle:hover::after {
|
|
background: var(--sidebar-ring);
|
|
}
|
|
|
|
.collapsed .resizeHandle {
|
|
display: none;
|
|
}
|
|
|
|
.sessionActionButtonActive,
|
|
.sessionActionButtonActive:hover {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
.menuActive .sessionActions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.actionMenu {
|
|
position: fixed;
|
|
z-index: 1100;
|
|
min-width: 168px;
|
|
padding: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--popover);
|
|
color: var(--popover-foreground);
|
|
box-shadow:
|
|
0 2px 4px -2px rgb(0 0 0 / 10%),
|
|
0 8px 16px -4px rgb(0 0 0 / 18%);
|
|
}
|
|
|
|
.actionMenuItem {
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 8px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--popover-foreground);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.actionMenuItem:hover:not(:disabled),
|
|
.actionMenuItem:focus-visible:not(:disabled) {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
outline: none;
|
|
}
|
|
|
|
.actionMenuItem:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.actionMenuItemDanger:not(:disabled) {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.actionMenuItemDanger:hover:not(:disabled),
|
|
.actionMenuItemDanger:focus-visible:not(:disabled) {
|
|
background: var(--error-bg);
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.actionMenuIcon {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.actionMenuIcon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.actionMenuLabel {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.archivedList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.archivedRow {
|
|
cursor: default;
|
|
}
|
|
|
|
.sidebar[data-compact] {
|
|
display: none;
|
|
}
|
|
.sidebar[data-compact].mobileOpen {
|
|
display: flex;
|
|
z-index: 50;
|
|
}
|
|
.sidebar[data-compact] .resizeHandle {
|
|
display: none;
|
|
}
|
|
|
|
.projectsHeaderCount {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 16px;
|
|
padding: 0 6px;
|
|
border-radius: 8px;
|
|
background: var(--sidebar-accent);
|
|
color: var(--muted-foreground);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
}
|
|
|
|
.sessionBackgroundRunning {
|
|
color: var(--warning-color, #d29922);
|
|
}
|
|
|
|
/* Hover-gated: touch devices get no hover reveal, and a sticky tap-hover on
|
|
the background dot must not hide the always-visible row actions. */
|
|
@media (hover: hover) {
|
|
.sessionRow:has(.sessionBackgroundRunning:hover) .sessionActions {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.homeColumn {
|
|
display: contents;
|
|
}
|
|
|
|
.railLayout {
|
|
border-right: 0;
|
|
flex-direction: row;
|
|
padding: 0;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.railLayout .body {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.railLayout .rail {
|
|
display: flex;
|
|
flex: 0 0 56px;
|
|
width: 56px;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: calc(12px + var(--web-shell-desktop-titlebar-height, 0px)) 6px 8px;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
scrollbar-width: none;
|
|
border-right: 1px solid var(--sidebar-border);
|
|
}
|
|
|
|
.railLayout .railPrimary,
|
|
.railLayout .primaryNav,
|
|
.railLayout .footer {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: 100%;
|
|
}
|
|
|
|
.railLayout .rail .pluginButton,
|
|
.railLayout .rail .footerButton,
|
|
.railLayout .rail .collapseButton {
|
|
flex: 0 0 auto;
|
|
width: 40px;
|
|
height: 40px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border-radius: 10px;
|
|
color: color-mix(
|
|
in srgb,
|
|
var(--sidebar-foreground) 50%,
|
|
var(--sidebar-background)
|
|
);
|
|
}
|
|
|
|
.railLayout
|
|
.rail
|
|
:is(.pluginButton, .footerButton, .collapseButton):is(
|
|
:hover,
|
|
:focus-visible,
|
|
[aria-current='page']
|
|
) {
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--sidebar-foreground) 7%,
|
|
var(--sidebar-background)
|
|
);
|
|
color: var(--sidebar-accent-foreground);
|
|
}
|
|
|
|
.rail .navIcon svg,
|
|
.rail .collapseButton svg {
|
|
width: 17px;
|
|
height: 17px;
|
|
stroke-width: 1.8;
|
|
}
|
|
|
|
.rail .navIcon {
|
|
position: relative;
|
|
}
|
|
|
|
.railLayout .footer {
|
|
position: static;
|
|
padding: 0;
|
|
border: 0;
|
|
margin-top: auto;
|
|
}
|
|
.railLayout .homeColumn {
|
|
border-right: 1px solid var(--sidebar-border);
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
padding: calc(12px + var(--web-shell-desktop-titlebar-height, 0px)) 12px 12px;
|
|
}
|
|
|
|
.railLayout .homeColumn[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.railLayout .homeFooter {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.moreMenu {
|
|
width: 240px;
|
|
max-height: var(--radix-popover-content-available-height);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.moreMenu .footer,
|
|
.moreMenu .footerVersion,
|
|
.moreMenu .footerPrimary,
|
|
.moreMenu .footerActions {
|
|
position: static;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 4px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
min-height: 0;
|
|
width: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
.moreMenu .footerVersion:empty,
|
|
.moreMenu .footerPrimary:empty {
|
|
display: none;
|
|
}
|
|
|
|
.moreMenu .footerButton,
|
|
.moreMenu .collapseButton,
|
|
.moreLocalFiles,
|
|
.moreMenu [data-web-shell-update] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 8px;
|
|
width: 100%;
|
|
height: 36px;
|
|
padding: 0 8px;
|
|
border-radius: 6px;
|
|
font: inherit;
|
|
color: inherit;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.moreMenu .footerButtonLabel {
|
|
display: inline;
|
|
}
|
|
|
|
.moreMenu .navIcon {
|
|
width: 16px;
|
|
flex-basis: 16px;
|
|
}
|
|
|
|
.moreMenu button:hover,
|
|
.moreMenu button:focus-visible {
|
|
background: var(--accent);
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
.moreLocalFiles::after {
|
|
content: attr(aria-label);
|
|
}
|
|
|
|
.moreMenu .version {
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.sectionHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
min-height: 46px;
|
|
margin: -12px 0 12px;
|
|
padding: 10px 4px;
|
|
border-bottom: 1px solid var(--sidebar-border);
|
|
}
|
|
|
|
.homePopoverAnchor {
|
|
display: contents;
|
|
}
|
|
|
|
.homePopover {
|
|
width: min(
|
|
var(--collapsed-session-popover-width, 300px),
|
|
var(--radix-popover-content-available-width)
|
|
);
|
|
min-width: 0;
|
|
height: var(--radix-popover-content-available-height);
|
|
gap: 0;
|
|
border: 0;
|
|
transition: none;
|
|
}
|
|
|
|
.homePopover .homeColumn {
|
|
padding: 12px;
|
|
border-right: 0;
|
|
}
|