108d9f6dca
- Planning mode embedded view drops the modal header/close and uses a plain common title like Command Center. - Remove the divider before the secondary section (Goals/Evals) in the left sidebar. - Flatten the Dev Server view header to match embedded-view styling (no card chrome). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
231 lines
6.8 KiB
CSS
231 lines
6.8 KiB
CSS
/*
|
|
FNXC:Navigation 2026-06-19-00:00:
|
|
The experimental sidebar is a persistent desktop/tablet navigation replacement for the Header view-toggle row. It uses the same tokenized visual rhythm as Header navigation so the flag can be toggled without changing dashboard information architecture.
|
|
*/
|
|
.left-sidebar-nav {
|
|
--left-sidebar-nav-width: calc(var(--space-2xl) * 7);
|
|
--left-sidebar-nav-rail-width: calc(var(--space-2xl) * 2);
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
width: var(--left-sidebar-nav-width);
|
|
min-width: var(--left-sidebar-nav-width);
|
|
min-height: 0;
|
|
background: var(--surface);
|
|
border-right: 1px solid var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
/*
|
|
FNXC:Navigation 2026-06-20-00:00:
|
|
The left sidebar is a sibling of project-content, so it does not inherit project-content footer padding. When the fixed executor status bar is rendered, reserve the shared --executor-footer-height on the aside so the bottom Settings button remains visible and clickable above the footer.
|
|
*/
|
|
.left-sidebar-nav--with-footer {
|
|
padding-bottom: var(--executor-footer-height);
|
|
}
|
|
|
|
/*
|
|
FNXC:Navigation 2026-06-21-00:00:
|
|
The collapse toggle lives in the footer above Settings instead of floating on the resize border. It reuses the tokenized row-item styling so expanded mode can show the Collapse label and rail mode can hide that label consistently with other sidebar items.
|
|
*/
|
|
.left-sidebar-nav__collapse-toggle {
|
|
flex-shrink: 0;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
/*
|
|
FNXC:Navigation 2026-06-21-20:45:
|
|
The persistent desktop/tablet sidebar needs a centered New Task CTA at the top so task creation is reachable from any project screen. It uses the shared row label and rail hiding behavior so expanded mode shows icon plus text while collapsed mode remains an icon-only button with the same global dialog trigger.
|
|
|
|
FNXC:Navigation 2026-06-22-00:00:
|
|
The New Task CTA must occupy exactly the same box as a sidebar item highlight: same min-height/padding/radius (inherited from .left-sidebar-nav__item) and the same horizontal inset as list rows. The list insets its rows by --space-sm padding, so the CTA matches with --space-sm side margins. The drop shadow is removed because it bled past the box edge and made the CTA read as larger than the item highlights; spacing below the CTA equals the inter-row gap (list padding-top --space-sm).
|
|
*/
|
|
.left-sidebar-nav__new-task {
|
|
flex-shrink: 0;
|
|
justify-content: center;
|
|
align-self: stretch;
|
|
width: auto;
|
|
margin: var(--space-sm) var(--space-sm) 0;
|
|
border-radius: var(--radius-md);
|
|
background: var(--accent);
|
|
color: var(--accent-text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.left-sidebar-nav__new-task:hover,
|
|
.left-sidebar-nav__new-task:focus-visible {
|
|
background: color-mix(in srgb, var(--accent) 88%, var(--surface));
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
.left-sidebar-nav__list {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: var(--space-sm);
|
|
}
|
|
|
|
.left-sidebar-nav__section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
/*
|
|
FNXC:Navigation 2026-06-22-00:00:
|
|
The secondary section keeps its top spacing but drops the divider line before the first secondary entry (Goals/Evals); the rule reads as one continuous nav list instead of two bordered groups.
|
|
*/
|
|
.left-sidebar-nav__section--secondary {
|
|
padding-top: var(--space-sm);
|
|
}
|
|
|
|
.left-sidebar-nav__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
width: 100%;
|
|
min-height: calc(var(--space-xl) + var(--space-sm));
|
|
padding: 0 var(--space-sm);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-muted);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--transition-fast),
|
|
color var(--transition-fast),
|
|
box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.left-sidebar-nav__item:hover,
|
|
.left-sidebar-nav__item:focus-visible {
|
|
background: var(--card);
|
|
color: var(--text);
|
|
outline: none;
|
|
}
|
|
|
|
.left-sidebar-nav__item:focus-visible {
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
/*
|
|
FNXC:DashboardStyling 2026-06-21-11:16:
|
|
The left sidebar active highlight and resize accent must use the per-theme --accent token so the selected state reflects the active color theme instead of the workflow todo-status blue. FN-6830 keeps this requirement in the base sidebar rules so every theme inherits it without per-theme overrides.
|
|
*/
|
|
.left-sidebar-nav__item--active {
|
|
background: color-mix(in srgb, var(--accent) 15%, transparent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.left-sidebar-nav__icon-wrap {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
color: currentColor;
|
|
}
|
|
|
|
.left-sidebar-nav__dot {
|
|
position: absolute;
|
|
top: calc(var(--space-xs) * -1);
|
|
right: calc(var(--space-xs) * -1);
|
|
}
|
|
|
|
/*
|
|
FNXC:Navigation 2026-06-21-00:00:
|
|
The narrower resizable sidebar must preserve row rhythm by truncating labels instead of wrapping or pushing badges/toggles out of place. Rail mode still hides labels entirely through the collapsed sidebar rule.
|
|
*/
|
|
.left-sidebar-nav__label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.left-sidebar-nav__badge {
|
|
position: static;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/*
|
|
FNXC:Navigation 2026-06-22-00:00:
|
|
The footer stacks the Collapse toggle above Settings. Use a flex column with a small gap so the two controls are visually separated instead of butting directly against each other.
|
|
*/
|
|
.left-sidebar-nav__footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
margin-top: auto;
|
|
padding: var(--space-sm);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.left-sidebar-nav__settings {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.left-sidebar-nav__resize-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: calc(var(--space-xs) * -1 / 2);
|
|
bottom: 0;
|
|
width: var(--space-xs);
|
|
cursor: col-resize;
|
|
touch-action: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.left-sidebar-nav__resize-handle::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: calc(var(--space-xs) / 2);
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: transparent;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
.left-sidebar-nav__resize-handle:hover::after,
|
|
.left-sidebar-nav__resize-handle:focus-visible::after {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.left-sidebar-nav__resize-handle:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.left-sidebar-nav--collapsed {
|
|
width: var(--left-sidebar-nav-rail-width);
|
|
min-width: var(--left-sidebar-nav-rail-width);
|
|
}
|
|
|
|
.left-sidebar-nav--collapsed .left-sidebar-nav__label,
|
|
.left-sidebar-nav--collapsed .left-sidebar-nav__badge {
|
|
display: none;
|
|
}
|
|
|
|
.left-sidebar-nav--collapsed .left-sidebar-nav__item {
|
|
justify-content: center;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.left-sidebar-nav--collapsed .left-sidebar-nav__new-task {
|
|
justify-content: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.left-sidebar-nav {
|
|
display: none;
|
|
}
|
|
}
|