/* Modeshift V4 UI overrides — injected by host nginx (sub_filter in /etc/nginx/sites-enabled/excelpoint-modeshift). Survives ui image redeploys. Keep in sync with any proper fix landing in packages/ui/src/components/Item/item.scss. */ /* Selected Related Items tab: navy left-edge bar + bold + light primary tint (Tom, 2026-09-10). Inset bar = no layout shift. No !important so tabs with a configured colour keep it. */ .open-item-tab-panel .dropdown-item.selected { box-shadow: inset 5px 0 0 var(--bs-primary); font-weight: 600; background-color: var(--primary-highlight); background-color: color-mix(in srgb, var(--bs-primary) 12%, var(--card-color)); } /* Tabs with a configured colour carry it as an inline background-color; keep the navy bar and darken the tab a little so the selected one still reads against its neighbours. */ .open-item-tab-panel .dropdown-item.selected[style*="background-color"] { box-shadow: inset 5px 0 0 var(--bs-primary); filter: brightness(0.86); } /* Navy (#004670) tabs would hide a navy bar — use the STARS light blue there instead. React serialises the inline colour as rgb(), hence the match string. */ .open-item-tab-panel .dropdown-item.selected[style*="rgb(0, 70, 112)"] { box-shadow: inset 5px 0 0 #009ee3; } /* Hide the toolbar "Add Item" button (Tom, 2026-09-11). The button is always rendered — the item-type Add permission only disables/greys it, and the designer's hideToolbar config hides whole toolbars, not individual buttons — so this is CSS-only. Applies to EVERY item type: nothing in the toolbar DOM identifies the type. */ [data-testid="add-item-toolbar"], a:has([data-testid="add-item-toolbar"]) { display: none !important; } /* Where a type has Generate mappings, Add is folded into the "Add/Generate Item" dropdown. Hide only its first entry (the /item/add/ link) and the divider below it, so Generate survives. */ a[href*="/item/add/"]:has(> .toolbar-dropdown-item), a[href*="/item/add/"]:has(> .toolbar-dropdown-item) + hr.dropdown-divider { display: none !important; } /* ------------------------------------------------------------------------ Default everyone to the "Large" spacing mode (Tom, 2026-09-10). Appearance settings offer Compact / Normal / Large; the shipped default is Normal. Large differs from Normal ONLY in these seven variables — every layout value (--spacer, --input-height, --nav-height, --left-nav-width) is byte-identical between the two modes — so redefining them here reproduces Large without a rebuild. Why this works, and why it does not trample a user's own choice: applyTheme() writes the spacing variables as INLINE styles on , but only when setSpacing runs, and loadLocalUserSettingsSaga skips setSpacing when the stored mode already equals the redux default ("normalSpacing"). So users sitting on Normal have no inline variables and pick these up, while anyone who has explicitly chosen Compact or Large has inline values that beat this stylesheet. No !important, deliberately, for that reason. Not covered (JS-side, needs the code change): the left-nav glyph size prop in LeftNavigation.tsx and usePanelSize() (300px vs Large's 350px, written as React inline styles in VerticalTabBar and friends). Permanent fix: DefaultSpacingType in packages/common/src/contract/theme.ts, branch worktree-default-large-spacing. REMOVE THIS BLOCK once that ships, or explicit Normal choices will keep being overridden. ------------------------------------------------------------------------ */ :root { --x-small-font-size: 14px; --small-font-size: 16px; --medium-font-size: 18px; --large-font-size: 20px; --heading-size: 28px; --subheading-size: 20px; --nav-icon-size: 25px; } /* Hide the combined "Add/Generate Item" toolbar dropdown (Tom, 2026-09-11). NOTE: this removes the Generate options too — they are entries in this same dropdown. The .dropdown rule kills the react-bootstrap wrapper so no empty gap is left in the toolbar. */ [data-testid="toolbar-generate-dropdown"], .dropdown:has([data-testid="toolbar-generate-dropdown"]) { display: none !important; } /* --------------------------------------------------------------------------- * Logged-in username row in the left nav (personalised-menu users). * APPEND to /etc/nginx/excelpoint-modeshift-overrides.css — never rewrite that * file, it has several independent owners (tab highlight, Large spacing, * hidden Add/Generate button). * Pairs with /modeshift-nav-username.js, which injects the markup. * Remove both when the real UI change (worktree-nav-username, 1fff20fe) ships. * ------------------------------------------------------------------------- */ /* Read-only "who am I" row: looks like a nav item, is not interactive. */ body .nav-btn.dropdown-item.logged-in-user { cursor: default; opacity: 0.85; } body .nav-btn.dropdown-item.logged-in-user:hover, body .nav-btn.dropdown-item.logged-in-user:focus, body .nav-btn.dropdown-item.logged-in-user:active { background-color: transparent; color: var(--nav-tint); } body .nav-btn.dropdown-item.logged-in-user .label-wrap { font-size: var(--x-small-font-size); } /* The injected avatar is sized here rather than by a JS prop, so it tracks --nav-icon-size (20px Normal / 25px Large) without the script knowing the spacing mode. */ body .logged-in-user .avatar-wrapper, body .logged-in-user .user-avatar-empty { width: var(--nav-icon-size); height: var(--nav-icon-size); min-width: var(--nav-icon-size); border-radius: 50%; font-size: calc(var(--nav-icon-size) * 0.5); } body .left-navigation-wrapper:not(.collapsed) .logged-in-user .avatar-wrapper { margin-right: var(--spacer, 0.5rem); } /* Collapsed rail: avatar only, centred — the label is already display:none. */ body .left-navigation-wrapper.collapsed .logged-in-user { justify-content: center; } body .left-navigation-wrapper.collapsed .logged-in-user .avatar-wrapper { margin-right: 0; }