| /* Sidebar — session panel, nav, session list, list-row layout, view-mode toggle. List-row status family merged back from onboarding.css (was split across files) — issue #546 PR3, zero visual change. */ |
| .maka-session-panel { |
| min-width: 0; |
| min-height: 0; |
| height: 100%; |
| display: grid; |
| /* 5 rows: header / hub nav / session-list heading / list / footer. */ |
| grid-template-rows: auto auto auto minmax(0, 1fr) auto; |
| overflow: hidden; |
| background: transparent; |
| contain: layout paint style; |
| } |
| |
| .maka-session-panel-header { |
| display: grid; |
| gap: var(--space-1); |
| padding: var(--space-1-5) var(--space-1-5) var(--space-1-5); |
| border-bottom: 0; |
| } |
| |
| .maka-sidebar-drag-strip { |
| min-height: 34px; |
| margin-left: calc( |
| var(--maka-sidebar-topbar-offset-x) + var(--maka-sidebar-topbar-button-size) + |
| var(--maka-sidebar-topbar-button-size) + var(--maka-sidebar-topbar-gap) + |
| var(--maka-sidebar-topbar-gap) |
| ); |
| box-sizing: border-box; |
| -webkit-app-region: drag; |
| } |
| |
| .maka-session-list { |
| /* PR-SIDEBAR-IA-0 Phase 1 (xuan msg `dc790a54`, kenji msg `0f7bb872`): |
| * scroll fix. The previous block layout let the inner `.maka-list-stack` |
| * grow to its natural content height, so the scroll viewport was |
| * unconstrained — once a workspace had enough sessions, the |
| * list overflowed the parent and the footer (Settings / Update) got |
| * pushed out of view. Defining a grid row template here pins the |
| * title at the top (`auto`) and gives the scroll body the remaining |
| * space (`minmax(0, 1fr)`), at which point the stack's own |
| * overlay viewport activates correctly. |
| * |
| * Hard gate: 50+ sessions in a narrow window must still let the |
| * footer stay visible. See the e2e-fixture `sidebar-long-sessions` |
| * scenario. |
| */ |
| min-height: 0; |
| position: relative; |
| overflow: hidden; |
| border-top: 0; |
| display: grid; |
| grid-template-rows: auto minmax(0, 1fr); |
| padding-top: var(--space-1); |
| } |
| |
| .maka-session-panel-footer { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto; |
| gap: var(--space-1-5); |
| align-items: center; |
| padding: var(--space-2) var(--space-2) var(--space-2); |
| border-top: 0; |
| } |
| |
| /* Sidebar footer — Settings affordance only. The earlier "Free Plan" account |
| widget was removed (WAWQAQ msg cad3dec4: "现在左下角怎么还有 账户部分, |
| 我们没有账户"). About / version still reachable via Settings → 关于. */ |
| .maka-sidebar-settings-button { |
| display: inline-grid; |
| /* Same glyph column as .maka-nav-row so the gear shares the nav rows' |
| icon axis and 16px chrome size (icon-system contract). */ |
| grid-template-columns: var(--icon-size) minmax(0, 1fr); |
| align-items: center; |
| } |
| |
| .maka-sidebar-update-button { |
| position: relative; |
| min-width: 0; |
| height: 34px; |
| display: inline-grid; |
| grid-template-columns: auto; |
| align-items: center; |
| gap: var(--space-1); |
| border: 0; |
| border-radius: var(--radius-pill); |
| padding: 0 var(--space-3); |
| background: var(--control); |
| color: var(--control-foreground); |
| font-size: var(--font-size-ui); |
| font-weight: var(--font-weight-semibold); |
| line-height: var(--leading-none); |
| box-shadow: none; |
| overflow: hidden; |
| -webkit-app-region: no-drag; |
| transition: |
| background-color var(--duration-base) var(--ease-out-strong), |
| transform var(--duration-quick) var(--ease-out-strong); |
| } |
| |
| .maka-sidebar-update-button > span:not(.maka-sidebar-update-progress) { |
| position: relative; |
| } |
| |
| .maka-sidebar-update-button[data-update-state="downloading"] { |
| cursor: default; |
| background: oklch(from var(--control) calc(l + 0.04) calc(c * 0.68) h); |
| opacity: 1; |
| } |
| |
| .maka-sidebar-update-button[data-update-state="downloaded"] { |
| background: var(--control); |
| } |
| |
| .maka-sidebar-update-progress { |
| position: absolute; |
| inset: 0; |
| transform: scaleX(var(--maka-update-progress, 0)); |
| transform-origin: left center; |
| background: oklch(from var(--control) calc(l - 0.08) c h); |
| transition: transform var(--duration-base) var(--ease-out-strong); |
| } |
| |
| .maka-sidebar-update-button:hover { |
| background: oklch(from var(--control) calc(l - 0.04) c h); |
| } |
| |
| .maka-sidebar-update-button:disabled:hover { |
| background: oklch(from var(--control) calc(l + 0.04) calc(c * 0.68) h); |
| } |
| |
| .maka-sidebar-update-button:focus-visible { |
| outline: var(--focus-ring-width) solid var(--focus-ring); |
| outline-offset: var(--focus-ring-offset); |
| } |
| |
| /* Color intentionally not declared: nav glyphs are tinted by the |
| navRowVariants utilities (80%-ink base, foreground when active) and the |
| settings gear inherits its button's text color — an unlayered color |
| here would silently beat those utilities. */ |
| .maka-nav-icon { |
| width: var(--icon-size); |
| height: var(--icon-size); |
| justify-self: center; |
| } |
| |
| /* PR-PARCHMENT-HOME-9 (WAWQAQ msg `781852eb` 2026-06-20): module nav |
| styles restored, then tightened after task #98 so active rows read |
| as slim target-layout like nav rows instead of full-width pills. */ |
| .maka-sidebar-modules { |
| align-self: start; |
| align-content: start; |
| display: grid; |
| gap: 1px; |
| /* #546 PR7: left/right padding aligned with .maka-list-stackContent |
| (var(--space-2)) so nav rows and session rows share the same inset. */ |
| padding: var(--space-1) var(--space-2); |
| } |
| |
| .maka-nav-row { |
| width: 100%; |
| display: grid; |
| grid-template-columns: var(--icon-size) minmax(0, 1fr) auto; |
| align-items: center; |
| -webkit-app-region: no-drag; |
| text-align: left; |
| } |
| |
| .maka-nav-row span:nth-child(2) { |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .maka-nav-row small { |
| font-variant-numeric: tabular-nums; |
| } |
| |
| .maka-nav-count { |
| min-width: 16px; |
| height: 16px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: var(--radius-pill); |
| padding: 0 var(--space-1); |
| font-size: var(--font-size-caption); |
| font-variant-numeric: tabular-nums; |
| } |
| |
| .maka-list-stack { |
| min-height: 0; |
| overflow: hidden; |
| } |
| |
| .maka-list-stackViewport { |
| height: 100%; |
| overscroll-behavior: contain; |
| } |
| |
| .maka-list-stackContent { |
| align-content: start; |
| display: grid; |
| gap: 1px; |
| padding: var(--space-0-5) var(--space-2) var(--space-1-5); |
| } |
| |
| .maka-list-group { |
| display: grid; |
| gap: 0; |
| } |
| |
| /* Sidebar group separator. Each group beyond |
| the first is preceded by a 1px hairline divider that reads as a |
| "data section break" rather than a card-like edge. */ |
| .maka-list-group + .maka-list-group { |
| margin-top: var(--space-2-5); |
| padding-top: var(--space-2); |
| border-top: var(--border-width-hairline) solid oklch(from var(--foreground) l c h / 0.05); |
| } |
| |
| .maka-list-group[data-variant="project"] + .maka-list-group[data-variant="project"] { |
| margin-top: 0; |
| padding-top: 0; |
| border-top: 0; |
| } |
| |
| .maka-list-group[data-variant="project"][data-expanded="true"] + .maka-list-group[data-variant="project"] { |
| margin-top: var(--space-3); |
| } |
| |
| /* Group label — a quiet, non-interactive divider for flat conversations. |
| Project disclosures use their own heading control below. */ |
| .maka-list-group-label { |
| display: flex; |
| align-items: baseline; |
| gap: var(--space-0-5); |
| padding: 0 var(--space-1-5) var(--space-0-5); |
| color: var(--muted-foreground); |
| font-size: var(--font-size-ui); |
| font-weight: var(--font-weight-medium); |
| font-variant-numeric: tabular-nums; |
| } |
| |
| .maka-list-project-heading { |
| display: flex; |
| align-items: center; |
| justify-content: flex-start; |
| gap: var(--space-1-5); |
| width: 100%; |
| min-height: var(--h-control-lg); |
| padding: 0 var(--space-1-5); |
| border: 0; |
| border-radius: var(--radius-control); |
| background: transparent; |
| color: var(--muted-foreground); |
| font-size: var(--font-size-ui); |
| font-weight: var(--font-weight-medium); |
| text-align: left; |
| } |
| |
| .maka-list-project-header { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) var(--h-control-lg); |
| align-items: center; |
| min-width: 0; |
| } |
| |
| .maka-list-project-heading:disabled { |
| cursor: default; |
| opacity: 1; |
| } |
| |
| .maka-list-project-name { |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .maka-list-project-count { |
| flex: 0 0 auto; |
| color: var(--muted-foreground); |
| font-size: var(--font-size-caption); |
| font-variant-numeric: tabular-nums; |
| } |
| |
| .maka-list-project-menu-trigger { |
| justify-self: end; |
| } |
| |
| .maka-list-group[data-unavailable="true"] .maka-list-project-heading { |
| color: var(--muted-foreground); |
| } |
| |
| .maka-list-group[data-unavailable="true"] .maka-list-project-heading [aria-label] { |
| color: var(--warning-foreground, var(--muted-foreground)); |
| } |
| |
| .maka-list-project-rename input { |
| min-width: 0; |
| width: 100%; |
| height: var(--h-control-sm); |
| border: var(--border-width-hairline) solid var(--border-strong); |
| border-radius: var(--radius-control); |
| outline: none; |
| background: var(--background); |
| color: var(--foreground); |
| font: inherit; |
| padding: 0 var(--space-1); |
| } |
| |
| .maka-list-project-rename input:focus-visible { |
| border-color: var(--focus-ring); |
| box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring) 24%, transparent); |
| } |
| |
| .maka-list-archived-projects { |
| margin-top: var(--space-3); |
| padding-top: var(--space-2); |
| border-top: var(--border-width-hairline) solid var(--border); |
| } |
| |
| .maka-list-archived-projects-heading { |
| display: flex; |
| align-items: center; |
| gap: var(--space-1-5); |
| width: 100%; |
| min-height: var(--h-control-lg); |
| padding: 0 var(--space-1-5); |
| border: 0; |
| border-radius: var(--radius-control); |
| background: transparent; |
| color: var(--muted-foreground); |
| font-size: var(--font-size-ui); |
| text-align: left; |
| } |
| |
| .maka-list-archived-projects-heading .maka-list-project-count { |
| margin-left: auto; |
| } |
| |
| .maka-list-archived-projects-heading[aria-expanded="true"] > svg { |
| transform: rotate(90deg); |
| } |
| |
| .maka-list-row-worktree-icon { |
| flex: 0 0 auto; |
| color: var(--muted-foreground); |
| } |
| |
| /* The semantic project heading owns its composite row states. Only the |
| folder-glyph tint + flex-shrink guard remain heading-specific here. */ |
| .maka-list-project-heading svg { |
| color: var(--muted-foreground); |
| flex: 0 0 auto; |
| } |
| |
| |
| .maka-list-project-more { |
| min-height: var(--h-control-lg); |
| display: inline-flex; |
| align-items: center; |
| justify-content: flex-start; |
| border: 0; |
| background: transparent; |
| color: var(--muted-foreground); |
| font-size: var(--font-size-ui); |
| padding: 0 var(--space-1-5) 0 var(--space-8); |
| text-align: left; |
| } |
| |
| |
| /* PR-SIDEBAR-IA-0 Phase 3 (WAWQAQ msgs `14ed98b5`, `761141c5` — |
| * "list 很丑、很肥很臃肿"; xuan `6b28984e` sign-off + "32-40px 薄行"; |
| * kenji `2b20c73c`): slim row. |
| * |
| * Before Phase 3: each row was a 56-72px card (border + radius + |
| * shadow) showing title + snippet + meta stacked over three lines. |
| * That made 9-10 rows visible in a 990px viewport — far too few for |
| * a sidebar of 60 sessions. |
| * |
| * After Phase 3: |
| * - 32px min-height, single line: status indicator + name + time. |
| * - Flat list (no border, no radius, no shadow); the surrounding |
| * `.maka-list-stackContent` provides the row stack, so rows just need |
| * to read as a list, not a stack of cards. |
| * - Snippet drops out of the default DOM (lives only in a native |
| * `title=` tooltip on hover) — see SessionRow render path. |
| * - A single overflow trigger replaces the time/unread slot on hover or focus. |
| * - Active row uses a neutral flat fill instead of the old accent rail. |
| */ |
| .maka-list-row { |
| position: relative; |
| width: 100%; |
| min-height: var(--h-control-lg); |
| display: flex; |
| align-items: stretch; |
| border: 0; |
| border-radius: var(--radius-control); |
| background: transparent; |
| color: var(--foreground); |
| overflow: hidden; |
| transition: background-color var(--duration-base) var(--ease-out-strong); |
| } |
| |
| .maka-list-session-children { |
| margin-inline-start: var(--space-2); |
| padding-inline-start: var(--space-1); |
| border-inline-start: var(--border-width-hairline) solid var(--border); |
| } |
| |
| .maka-list-row[data-subagent="true"] { |
| background: var(--selection); |
| } |
| |
| .maka-list-row-subagent-icon { |
| flex: 0 0 auto; |
| color: var(--muted-foreground); |
| } |
| |
| .maka-list-row:hover { |
| background: var(--state-hover-bg); |
| } |
| |
| .maka-list-row:active { |
| background: var(--state-selected-bg); |
| } |
| |
| /* Active session row: slightly stronger than hover so the current |
| session is distinguishable from hover, but lighter than nav-row |
| active (0.09) so the main navigation reads as the primary surface. */ |
| .maka-list-row[data-active="true"] { |
| background: var(--state-selected-bg); |
| } |
| |
| .maka-list-row[data-active="true"] .maka-list-row-name { |
| color: var(--foreground); |
| font-weight: var(--font-weight-semibold); |
| } |
| |
| .maka-list-row-main { |
| flex: 1; |
| min-width: 0; |
| display: grid; |
| /* Phase 3: single-row layout — name takes the flex column, time |
| * sits in the auto column at the inline-end. Snippet drops out of |
| * the default DOM entirely (replaced by native title= tooltip on |
| * the button). */ |
| grid-template-columns: minmax(0, 1fr) auto; |
| align-items: center; |
| gap: var(--space-1-5); |
| border: 0; |
| border-radius: var(--radius-control); |
| background: transparent; |
| color: inherit; |
| padding: var(--space-0-5) var(--space-2) var(--space-0-5) var(--space-2-5); |
| text-align: left; |
| } |
| |
| .maka-list-row-menu-trigger { |
| position: absolute; |
| top: 0; |
| right: var(--space-1); |
| width: var(--h-control-lg); |
| height: var(--h-control-lg); |
| display: grid; |
| place-items: center; |
| padding: 0; |
| border: 0; |
| border-radius: var(--radius-control); |
| background: transparent; |
| color: var(--foreground-secondary); |
| opacity: 0; |
| transform: translateX(var(--space-1)); |
| transition: |
| opacity var(--duration-base) var(--ease-out-strong), |
| transform var(--duration-base) var(--ease-out-strong), |
| background-color var(--duration-base) var(--ease-out-strong), |
| color var(--duration-base) var(--ease-out-strong); |
| pointer-events: none; |
| } |
| |
| .maka-list-row-menu-trigger:hover, |
| .maka-list-row-menu-trigger:focus-visible, |
| .maka-list-row-menu-trigger[data-popup-open] { |
| background: var(--state-hover-bg); |
| color: var(--foreground); |
| } |
| |
| .maka-list-row-menu-trigger:focus-visible { |
| outline: var(--focus-ring-width) solid var(--focus-ring); |
| outline-offset: var(--focus-ring-offset); |
| } |
| |
| .maka-list-row:hover .maka-list-row-menu-trigger, |
| .maka-list-row:focus-within .maka-list-row-menu-trigger, |
| .maka-list-row-menu-trigger[data-visible="true"] { |
| opacity: 1; |
| transform: translateX(0); |
| pointer-events: auto; |
| } |
| |
| .maka-list-row:hover .maka-list-row-meta, |
| .maka-list-row:hover .maka-list-row-unread, |
| .maka-list-row:focus-within .maka-list-row-meta, |
| .maka-list-row:focus-within .maka-list-row-unread, |
| .maka-list-row[data-menu-open="true"] .maka-list-row-meta, |
| .maka-list-row[data-menu-open="true"] .maka-list-row-unread { |
| visibility: hidden; |
| } |
| |
| .maka-list-row-rename-input { |
| width: 100%; |
| border: 0; |
| background: transparent; |
| color: var(--foreground); |
| font: inherit; |
| font-size: var(--font-size-ui); |
| font-weight: var(--font-weight-semibold); |
| outline: 0; |
| padding: 1px 0; |
| border-bottom: var(--border-width-hairline) solid oklch(from var(--focus-ring) l c h / 0.4); |
| } |
| |
| .maka-list-row-rename-input:focus { |
| border-bottom-color: var(--focus-ring); |
| } |
| |
| .maka-list-row[data-editing="true"] { |
| border-color: oklch(from var(--focus-ring) l c h / 0.45); |
| background: var(--background); |
| } |
| |
| .maka-list-row[data-editing="true"] .maka-list-row-main { |
| cursor: text; |
| } |
| |
| .maka-list-row-main:focus-visible { |
| outline: 0; |
| } |
| |
| .maka-list-row:has(.maka-list-row-main:focus-visible) { |
| border-color: oklch(from var(--focus-ring) l c h / 0.4); |
| box-shadow: 0 0 0 var(--focus-ring-width) oklch(from var(--focus-ring) l c h / 0.18); |
| } |
| |
| |
| /* The session-list heading carries grouping as a quiet menu action. The |
| selected mode is already visible in the groups below, so the previous |
| full-width segmented control added permanent chrome without information. */ |
| .maka-session-list-toolbar { |
| display: flex; |
| min-height: var(--h-control-lg); |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 var(--space-2) var(--space-0-5); |
| } |
| |
| .maka-session-list-heading { |
| padding-left: var(--space-1-5); |
| color: var(--muted-foreground); |
| font-size: var(--font-size-ui); |
| font-weight: var(--font-weight-semibold); |
| } |
| |
| /* List-row status family — merged back from onboarding.css — issue #546 PR3. */ |
| .maka-list-row-name { |
| display: flex; |
| align-items: center; |
| gap: var(--space-1-5); |
| overflow: hidden; |
| font-size: var(--font-size-ui); |
| font-weight: var(--font-weight-medium); |
| min-width: 0; |
| } |
| |
| .maka-list-row-name > span { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| min-width: 0; |
| } |
| |
| /* Small pulsing accent dot rendered when a session has live streaming |
| * delta in flight. Replaces the unread halo for streaming sessions so the |
| * indicator hierarchy is: streaming > unread > inactive. Respects |
| * prefers-reduced-motion. */ |
| .maka-list-row-streaming-dot { |
| flex-shrink: 0; |
| width: var(--space-2); |
| height: var(--space-2); |
| border-radius: 50%; |
| background: var(--status-running); |
| box-shadow: 0 0 0 3px oklch(from var(--status-running) l c h / 0.15); |
| animation: maka-list-row-streaming-pulse 1.2s var(--ease-in-out-strong) infinite; |
| } |
| |
| @keyframes maka-list-row-streaming-pulse { |
| 0%, 100% { |
| box-shadow: 0 0 0 3px oklch(from var(--status-running) l c h / 0.18); |
| transform: scale(1); |
| } |
| 50% { |
| box-shadow: 0 0 0 5px oklch(from var(--status-running) l c h / 0.05); |
| transform: scale(1.1); |
| } |
| } |
| |
| @media (prefers-reduced-motion: reduce) { |
| .maka-list-row-streaming-dot { |
| animation: none; |
| } |
| } |
| |
| .maka-list-row[data-streaming="true"] .maka-list-row-name > span { |
| color: var(--foreground); |
| } |
| |
| /* PR-SIDEBAR-IA-0 Phase 3: meta (relative time) now sits inline at |
| * the row's inline-end instead of stacked below the name. Color + |
| * size kept muted so it reads as secondary info, not a competing |
| * label. `margin-top` from the old stacked layout is removed. */ |
| .maka-list-row-meta { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| color: var(--muted-foreground); |
| font-size: var(--font-size-caption); |
| font-weight: var(--font-weight-medium); |
| font-variant-numeric: tabular-nums; |
| flex-shrink: 0; |
| } |
| |
| /* PR-SIDEBAR-IA-0 Phase 3: `.maka-list-row-text` collapses to a single |
| * row (name on the inline-start). The previous stack-of-three |
| * layout (name / preview / meta) is gone — preview drops out of the |
| * default DOM, meta moves inline to the row's right column. */ |
| .maka-list-row-text { |
| min-width: 0; |
| display: flex; |
| align-items: center; |
| } |
| |
| /* PR-SIDEBAR-IA-0 Phase 3: `.maka-list-row-preview` is no longer |
| * rendered in the default DOM — preview text is exposed via the row |
| * button's native `title=` tooltip on hover so users can still peek |
| * at the last message without paying the layout cost of a second |
| * stacked line. This rule intentionally remains DELETED (no fallback |
| * style). The `sidebar-row-density-contract.test.ts` gate asserts |
| * the rule is gone so a future "let's bring snippet back" patch |
| * lands as an explicit design discussion, not a silent regression. |
| */ |
| |
| /* PR-SIDEBAR-IA-0 Phase 3: `.maka-list-row-preview` is no longer |
| * rendered in the default DOM (see comment above). The |
| * `[data-active]` variant of that rule is therefore dead and |
| * removed. */ |
| |
| .maka-list-row-unread { |
| width: var(--space-2); |
| height: var(--space-2); |
| border-radius: var(--radius-pill); |
| background: var(--status-running); |
| box-shadow: 0 0 0 3px oklch(from var(--status-running) l c h / 0.15); |
| } |
| |
| /* Stale session — `backend='fake'` or `llmConnectionSlug` no longer |
| * resolves. Pairs with the chat-header banner (PR108e) so users can spot |
| * dead sessions in the sidebar list before clicking in. Visual treatment: |
| * |
| * - Row body dimmed via opacity reduction (preserves all underlying tones |
| * but reads as "secondary"); active state remains fully opaque so the |
| * currently-selected row never disappears just because it's stale. |
| * - A small amber pill labelled "已过期" sits next to the session name — |
| * muted-warning tone, not destructive, because @xuan's send-path silent |
| * rebind makes these sessions still functional. |
| */ |
| .maka-list-row[data-stale="true"] { |
| opacity: var(--opacity-muted); |
| } |
| |
| .maka-list-row[data-stale="true"][data-active="true"] { |
| opacity: 1; |
| } |
| |
| /* PR109b: SessionStatusIcon — small inline icon next to session name |
| * representing lifecycle status. Tone-based color from the |
| * design-system token vocabulary; running spins via `animation` |
| * (capped under reduced-motion + e2e-fixture per PR-IR-04). */ |
| .maka-list-row-status-icon { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| margin-right: var(--space-1); |
| /* #743: 14px layout slot for the dense-meta status icon |
| (dense-meta icons are intentionally call-site 12–14px). Kept |
| as a documented exception — the wrapper reserves the row's status footprint |
| so the title does not shift when the SVG is overridden to 12px below. */ |
| width: 14px; |
| height: 14px; |
| color: var(--foreground-secondary); |
| } |
| .maka-list-row-status-icon svg { |
| /* #743: restore <Icon size={12}> — buttonVariants' [&_svg]:size-[var(--icon-size,1rem)] |
| would force 16px (chrome tier, a cascade leak from borrowing UiButton), so |
| scope a local 12px dense-meta override. Only |
| the chrome tier is tokenized; dense-meta stays call-site 12–14px and is NOT |
| bound to a spacing token, so this stays a bare 12px (a spacing-scale change |
| cannot drift the icon size). The 14px wrapper centers it. */ |
| width: 12px; |
| height: 12px; |
| } |
| .maka-list-row-status-icon[data-tone="accent"] { |
| color: var(--nav-active); |
| } |
| .maka-list-row-status-icon[data-tone="warning"] { |
| color: var(--info-text); |
| } |
| .maka-list-row-status-icon[data-tone="destructive"] { |
| color: var(--destructive); |
| } |
| .maka-list-row-status-icon[data-tone="info"] { |
| color: var(--info-text); |
| } |
| .maka-list-row-status-icon[data-tone="success"] { |
| /* Success uses the brand-deep tone introduced for Settings hero */ |
| color: var(--brand-deep); |
| } |
| .maka-list-row-status-icon[data-tone="muted"] { |
| color: var(--muted-foreground); |
| } |
| .maka-list-row-status-icon[data-status="running"] svg { |
| animation: maka-status-spin 1.2s var(--ease-linear) infinite; |
| } |
| @keyframes maka-status-spin { |
| to { transform: rotate(360deg); } |
| } |
| @media (prefers-reduced-motion: reduce) { |
| .maka-list-row-status-icon[data-status="running"] svg { |
| animation: none; |
| } |
| } |
| [data-maka-e2e-fixture="true"] .maka-list-row-status-icon[data-status="running"] svg { |
| animation: none; |
| } |
| |
| :is(.maka-list-project-heading, .maka-list-project-more) { |
| transition: |
| background-color var(--duration-base) var(--ease-out-strong), |
| color var(--duration-base) var(--ease-out-strong), |
| opacity var(--duration-base) var(--ease-out-strong); |
| } |
| :is(.maka-list-project-heading, .maka-list-project-more):hover { |
| background: var(--state-hover-bg); |
| color: var(--foreground); |
| } |
| :is(.maka-list-project-heading, .maka-list-project-more):active { |
| background: var(--state-selected-bg); |
| } |
| :is(.maka-list-project-heading, .maka-list-project-more):focus-visible { |
| outline: var(--focus-ring-width) solid var(--focus-ring); |
| outline-offset: var(--focus-ring-offset); |
| border-radius: var(--radius-control); |
| } |
| :is(.maka-list-project-heading, .maka-list-project-more):disabled { |
| cursor: not-allowed; |
| opacity: var(--opacity-disabled); |
| } |
| :is(.maka-list-project-heading, .maka-list-project-more):disabled:hover { |
| background: transparent; |
| color: var(--muted-foreground); |
| } |
| .maka-list-row-stale-pill { |
| flex-shrink: 0; |
| /* PR-UI-3: drop margin-left, let parent's gap (6px) handle spacing |
| * so all badges in .maka-list-row-name share the same rhythm. */ |
| padding: 1px var(--space-1-5); |
| border-radius: var(--radius-pill); |
| /* Reuses the session health notice warning tone tokens (--warning + --warning-text) |
| * for visual consistency with the banner that explains the same state. |
| * Switched from --info (blue) to --warning (amber) per UI audit §2.9 — |
| * "已过期" is a degraded-state signal, not informational. */ |
| background: oklch(from var(--warning, var(--info)) l c h / 0.18); |
| color: var(--warning-text, var(--info-text)); |
| font-size: var(--font-size-caption); |
| font-weight: var(--font-weight-semibold); |
| line-height: var(--leading-snug); |
| } |
| |
| .maka-list-row:hover .maka-list-row-name { |
| color: var(--foreground); |
| } |
| |
| /* ⌘N hint on the 新任务 row — quiet kbd chip pushed to the right rail, |
| visible at rest like the reference app (it advertises a real global |
| shortcut registered in app-shell-effects). */ |
| /* Plain muted text, no chip chrome — the reference treatment. A boxed |
| chip made the hint compete with the row label. Explicit resets beat |
| the global tactile `kbd` element rule in maka-tokens.css. */ |
| .maka-nav-kbd { |
| margin-left: auto; |
| padding: 0; |
| border: 0; |
| border-radius: 0; |
| background: transparent; |
| box-shadow: none; |
| color: var(--muted-foreground); |
| font-family: inherit; |
| font-size: var(--font-size-caption); |
| font-weight: var(--font-weight-normal); |
| letter-spacing: var(--tracking-wide); |
| line-height: var(--leading-normal); |
| white-space: nowrap; |
| } |
