/* 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; } /* WBS summary (parent) bars (Story 5629). The rolled-up section bars ran on Bryntum's own parent-task color (`--b-gantt-parent-task-primary`, gantt.css) or — once Story 5371 landed — on whichever b-sylo-crit-* class their subtree rolled up to, so the chart's most structural element was either the vendor's palette or a red that made a section read as a critical activity. Fixed here at Sylo blue. #2F6AC1 is written literally rather than as a token on purpose: the story records it as a styling choice scoped to these two Gantt reports, NOT a new palette entry ("if more Gantt surfaces appear later, revisit whether a named color is warranted"). Inventing a --gantt-summary-bar token now would assert a product-wide decision nobody has made. The class is added by the taskRenderer (BryntumGantt.js) to parent rows only, and it is added INSTEAD of any criticality class rather than on top of one — so this rule never has to out-specify those, and a summary bar over critical work stays blue in both reports. Declared after them regardless, so the later-wins tiebreak also favours blue if a future change ever puts both classes on one bar. `!important` matches the crit rules above and is load-bearing for the same reason: the theme sets the bar fill from `--b-primary`, which it re-points per state (.b-critical, hover, selected) at a specificity this two-class selector would otherwise lose to. */ .b-gantt-task.b-sylo-wbs-summary { background-color: #2F6AC1 !important; border-color: #2F6AC1 !important; /* Any label painted inside the bar. White on #2F6AC1 measures 5.31:1 — above the 4.5:1 the story asks for (relative luminance 0.1478 by WCAG 2.x; (1.05)/(0.1478+0.05)). No label is rendered inside these bars today — this Gantt runs no `labels` feature and its taskRenderer returns no content — so this is the guarantee for whenever one is, not a change you can see now. */ color: #ffffff; /* Browsers drop background fills when printing unless told otherwise, which would print the summary bars as empty outlines. Scoped to this rule: leaf bars keep whatever print behaviour they have today, which is what "leaf activity bars unchanged" asks for. */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* A summary bar is a single solid fill — no percent-complete segment. Bryntum rolls a parent's percentDone up from its children (the mappers push none of their own), so without this the blue bar carries the same darkened overlay the crit rule above gives activity bars, and the "solid" half of the requirement fails on any partly-complete section. `percentBar` stays enabled as a feature — Story 5573 keeps it for the leaf bars and disabling it would take theirs away too — so the segment is suppressed here, on summary bars only. */ .b-gantt-task.b-sylo-wbs-summary .b-task-percent-bar { display: none !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; }