/* Sylo brand alignment for the Bryntum Gantt (Story 5369). We run Bryntum's Fluent 2 Light theme (fluent2-light.css) to match Sylo's Fluent 2 design language, then override the typography to Sylo's brand fonts so the Gantt matches the rest of the app: Roboto for body text, Roboto Condensed for column headers (mirroring Sylo's label/header convention; Fluent 2's own default font is Segoe UI). Loaded AFTER the Bryntum theme CSS in App.razor so these win. Font icons (Font Awesome) are untouched. */ .b-gantt, .b-grid-base, .b-widget { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } /* Story 5574 items 4 + 7 — the typefaces were the wrong way round. The left-hand grid HEADER (Name / Start / Finish) was condensed; it is now bold and in the normal Roboto face so it matches the year row in the timeline. The DATA rows take the condensed face instead, because that is where the long activity names are and the column is short on horizontal space. */ .b-grid-header-container, .b-grid-header { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-weight: 700; } /* Data cells in the locked (left) grid — condensed, so long names fit. `b-grid-body-container` wraps BOTH subgrids (locked + time axis), so the narrowing has to be `.b-grid-sub-grid-locked`, which is the class Bryntum puts on the left region. */ .b-grid-sub-grid-locked .b-grid-cell { font-family: 'Roboto Condensed', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Story 5574 item 3 — the timeline's date header rows (year / quarter / month, whichever the current zoom level shows) are bold, matching the left-hand grid header. */ .b-sch-header-row .b-sch-header-text, .b-sch-header-time-axis-cell { font-weight: 700; } /* Story 5574 item 6 — the empty rectangle beside WBS parent rows. Root cause is a font FAMILY NAME mismatch, not a missing font. Bryntum's theme declares `--b-widget-icon-font-family: "Font Awesome 6 Free"` on :root (gantt.css) and every `.b-icon:before` resolves its glyph from it. That name is registered nowhere in wwwroot — Sylo licenses Font Awesome *Pro* (App.razor loads css/fa.min.css, which @font-face-registers "Font Awesome 6 Pro" / "Sharp" / "Duotone" / "Brands", Pro at weight 900 = fa-solid-900.woff2, matching Bryntum's --b-widget-icon-font-weight: 900). So EVERY Bryntum glyph fell back to an unstyled family and painted as tofu — including the tree column's expand/collapse chevron (.b-icon-tree-expand/-collapse, "\f105"/"\f107"), which is the small box reported on parent rows in the first column. Pointing the variable at the family Sylo actually ships restores the chevron, the sort and header-menu icons, and any Bryntum field trigger, in one line. Set on :root rather than .b-gantt so Bryntum's floating widgets (menus, tooltips) — which render into a float root appended to , outside .b-gantt — get the same family. Nothing but Bryntum's own CSS reads this variable, so the wider scope costs nothing. Loaded after gantt.css (App.razor), so it wins. */ :root { --b-widget-icon-font-family: 'Font Awesome 6 Pro'; } /* Story 5601 items 1 + 2 — WBS nesting depth and the Name column's indent. The depth was never missing. Bryntum's TreeColumn already stamps the nesting level onto every tree cell as an inline custom property (`style="--b-tree-level: N"`, emitted from gantt.umd.js) and gantt.css already consumes it: .b-tree:not(.b-show-tree-lines) .b-tree-cell-inner { padding-inline-start: calc(var(--b-tree-indent-size) * var(--b-tree-level)); } So indentation-by-depth is a theme variable, not a feature to build — which is the answer the story asked for ("check and see if Bryntum supports these things"). What was wrong was the MAGNITUDE. The theme ships 1.7em per level, and on a deep WBS that eats the Name column alive; the column is the scarcest space in this report and item 7 exists only to claw ~70px back into it. 1em per level is what was asked for: "indenting each one by just like a single — it's called an M, right? The width of an M — just like 1 character indented, so we don't lose too much space. And then whatever the depth is." An em IS the width the request names, and the multiplication by depth is already the theme's own formula, so this single variable delivers the whole item. Depth 1 is unindented for free: the vendor's level is 0-based at the root. Set on .b-gantt (not :root) because, unlike the icon font above, no floating widget renders tree cells. */ .b-gantt { --b-tree-indent-size: 1em; } /* Story 5601 items 3 + 4 — tell WBS section rows apart from activity rows. John: "You really need to distinguish the WBS from the actual task list itself." Agreed treatment for this release is bold plus a light shade — Kelly: "I think bold and slightly shaded is what we should go with." `b-tree-parent-row` is Bryntum's own class for a row with children, so this needs no Sylo-side row renderer. In this data model a parent row is exactly a WBS section: sections are pushed with a "wbs-{id}" id and activities are always leaves beneath them, so there is no row that is both an activity and a parent. FONT SIZE IS DELIBERATELY NOT TOUCHED. John proposed "making the WBS bold and one size larger font" and Kelly declined the larger half specifically to keep row heights uniform: "I just don't want the row height to be different, if possible." A larger font in a 30px row (Story 5601 item 5) would also risk clipping. The shade is a translucent black wash rather than a fixed grey so it composes over whatever row background the theme supplies and survives a dark theme — a literal #f5f5f5 would blow out in dark mode. It is applied to the cells rather than the row because Bryntum paints cell backgrounds over the row's own. KNOWN CONSEQUENCE, deliberately left as-is: this wash SUPPRESSES hover and selection feedback on section rows. Bryntum's hover/selected rules match at the same specificity (three classes) and this sheet loads after gantt.css, so this rule wins and a section row's cells keep the same background in all three states. Measured in a browser against 7.3.3, reading computed background-color with a leaf row as the positive control: a LEAF date cell goes white -> light blue on hover and a slightly deeper blue when selected, while a SECTION row reads rgba(0, 0, 0, 0.043) at rest, hovered, and selected alike — zero visual feedback, even though Bryntum does apply b-hover / b-selected to the row. Whether section rows should give hover and selection feedback, and what that should look like layered over the wash, is an appearance decision for John and Kelly's visual QC — so it is recorded here as measured rather than guessed at in this story. */ .b-grid-row.b-tree-parent-row .b-grid-cell { background-color: rgba(0, 0, 0, 0.045); font-weight: 700; } /* Bar-color modes (Story 5371). The taskRenderer adds one of these classes to each task bar based on the active color mode + the row's criticality. Uses Sylo's --indicator-level-* design tokens (defined on the [data-theme] root, inherited into the Bryntum DOM) with clear red/amber/green fallbacks. Section (parent) summary bars carry the most-severe criticality of their children, so the same classes color them too. Colors are the user's visual checklist for this first draft. */ /* Criticality mode */ .b-gantt-task.b-sylo-crit-critical { background-color: var(--indicator-level-alert, #b01e0e) !important; border-color: var(--indicator-level-alert, #b01e0e) !important; } .b-gantt-task.b-sylo-crit-near { background-color: var(--indicator-level-warning, #d9961a) !important; border-color: var(--indicator-level-warning, #d9961a) !important; } .b-gantt-task.b-sylo-crit-normal { background-color: var(--indicator-level-normal, #0e7315) !important; border-color: var(--indicator-level-normal, #0e7315) !important; } /* Classification mode — single neutral "unclassified" color until real classification data lands (F7). */ .b-gantt-task.b-sylo-classification-unclassified { background-color: var(--indicator-level-unset, #8a8886) !important; border-color: var(--indicator-level-unset, #6b6b6b) !important; } /* Keep the completed-portion (percent) bar readable as a slightly darkened overlay on any of the above. */ .b-gantt-task.b-sylo-crit-critical .b-task-percent-bar, .b-gantt-task.b-sylo-crit-near .b-task-percent-bar, .b-gantt-task.b-sylo-crit-normal .b-task-percent-bar, .b-gantt-task.b-sylo-classification-unclassified .b-task-percent-bar { background-color: rgba(0, 0, 0, 0.28) !important; } /* Column sort indicator (Story 5560). Bryntum's Fluent 2 theme draws the sorted-column indicator with its own icon-font glyph, which reads as a different vocabulary from the rest of Sylo's grids. Replace it with the standard triangles the app uses elsewhere. How the theme actually builds this (gantt.css), because it dictates the override: - the sorted header carries .b-asc or .b-desc (NOT .b-sort-asc/.b-sort-desc); - the glyph sits on .b-sort-icon:before as `content: var(--b-sort-header-icon)` in the widget icon font; - descending is the SAME glyph rotated 180deg (.b-desc sets --bi-grid-sort-icon-rotate: 180deg). So one character is all that's needed: ▲ ascending, which the theme's own rotation turns into ▼ for descending. Overriding a single :before keeps the theme's opacity/transition behaviour (the icon is transparent until the column is sorted) and the multi-column sort-order badge untouched. font-family is reset because the icon font has no U+25B2 and would render tofu. */ .b-grid-header .b-sort-icon:before { content: '\25B2'; font-family: inherit; font-weight: normal; font-size: 0.7em; }