/* Theme CSS variables - Intelis brand. Tokens live on :root (light defaults) and are overridden by the .dark-mode class on (set by themeManager.setDarkModeClass). A future global style adds a parallel .theme-{style} class on via themeManager.setStyleClass and overrides the same tokens. */ :root { /* Brand */ --intelis-primary: #022a3a; --intelis-secondary: #f47b30; --intelis-tertiary: #277493; /* AppBar */ --intelis-appbar-start: #022a3a; --intelis-appbar-end: #277493; /* Links */ --intelis-link: #277493; /* Buttons (bootstrap fallback used outside MudBlazor) */ --intelis-btn-primary-text: #ffffff; --intelis-btn-primary-bg: #022a3a; --intelis-btn-primary-border: #03121a; /* Drawer */ --intelis-drawer-bg: #edf2f5; --intelis-drawer-border: #d5dee3; --intelis-drawer-text: #414e56; --intelis-drawer-hover-bg: #dce5ea; --intelis-drawer-hover-text: #022a3a; --intelis-drawer-active-text: #f47b30; --intelis-drawer-active-icon: #f47b30; --intelis-drawer-active-border: #f47b30; --intelis-drawer-active-bg: rgba(244, 123, 48, 0.12); --intelis-drawer-icon: #277493; --intelis-drawer-icon-hover: #022a3a; /* Version badge in drawer */ --intelis-badge-text: #277493; --intelis-badge-border: #cfd1d2; --intelis-badge-hover-text: #022a3a; } .dark-mode { color-scheme: dark; --intelis-appbar-start: #03121a; --intelis-appbar-end: #214453; --intelis-drawer-bg: #1a1a1a; --intelis-drawer-border: #333333; --intelis-drawer-text: #b0bec5; --intelis-drawer-hover-bg: rgba(255, 255, 255, 0.08); --intelis-drawer-hover-text: #e0e0e0; --intelis-drawer-icon: #5b8a9a; /* Faithful to the pre-token cascade: in dark mode the later `.dark-mode .mud-nav-link` / `... .mud-nav-link-icon` rules used to win over the light `.active` / `:hover .mud-nav-link-icon` rules, so an active item kept the plain text/icon colours (only its tinted background and mini-drawer border stayed orange), and the hover icon kept the plain icon colour. Verified by a computed-style before/after probe (TP-1403). */ --intelis-drawer-active-text: #b0bec5; --intelis-drawer-active-icon: #5b8a9a; --intelis-drawer-icon-hover: #5b8a9a; /* --intelis-drawer-active-border, --intelis-drawer-active-bg and --intelis-badge-hover-text keep their light values in dark mode (also behaviour preserved from the pre-token CSS). */ --intelis-badge-text: #7fa8b8; --intelis-badge-border: #444444; } /* ── Intelis style (ES-299) ───────────────────────────────────────────── Token overrides for the theme-intelis class on (set by themeManager.setStyleClass). MudBlazor palette colours come from IntelisTheme.BuildIntelisTheme(); the tokens below drive the app-level CSS (appbar gradient, drawer accents, badges). NOTE: this block must come after .dark-mode, and every token that differs in dark mode must be re-set in .theme-intelis.dark-mode below — the two-class selector wins over both single-class blocks. */ .theme-intelis { --intelis-primary: #f27a1a; --intelis-secondary: #0e2a38; /* AppBar: navy → deep orange. NOT the pure brand #f27a1a — white appbar icons on it would be ~2.8:1 (below the 3:1 non-text minimum); #c8601a gives ~4.1:1. */ --intelis-appbar-start: #0e2a38; --intelis-appbar-end: #c8601a; /* Drawer active accents follow the brand orange. */ --intelis-drawer-active-text: #f27a1a; --intelis-drawer-active-icon: #f27a1a; --intelis-drawer-active-border: #f27a1a; --intelis-drawer-active-bg: rgba(242, 122, 26, 0.12); /* Tile accent palette (intelis.cz landing tiles). Applied only through the .tile-accent-* classes below — opt-in per component. */ --intelis-tile-1: #f27a1a; --intelis-tile-2: #f7b88a; --intelis-tile-3: #c9cdd0; --intelis-tile-4: #8aa9b5; --intelis-tile-5: #5a8193; --intelis-tile-6: #0e2a38; } .theme-intelis.dark-mode { --intelis-appbar-start: #051821; --intelis-appbar-end: #8a4512; /* Navy-tinted drawer instead of neutral gray (mirrors the Intelis PaletteDark in IntelisTheme). */ --intelis-drawer-bg: #0b222e; --intelis-drawer-border: #1d3d4c; --intelis-drawer-text: #cfe0e8; --intelis-drawer-hover-bg: rgba(255, 255, 255, 0.08); --intelis-drawer-hover-text: #ffffff; --intelis-drawer-icon: #6ba5bd; /* Same dark-mode semantics as the default style: active/hover items keep the plain text/icon colours, only the tinted background and the mini-drawer border stay orange. */ --intelis-drawer-active-text: #cfe0e8; --intelis-drawer-active-icon: #6ba5bd; --intelis-drawer-icon-hover: #6ba5bd; --intelis-badge-text: #6ba5bd; --intelis-badge-border: #2a4a5a; /* Muted tile accents for dark surfaces. */ --intelis-tile-1: #c8601a; --intelis-tile-2: #b57f52; --intelis-tile-3: #6d7275; --intelis-tile-4: #5a7482; --intelis-tile-5: #3d5a6b; --intelis-tile-6: #163847; } /* ── Avocado style ("Avocado Toast", ES-299) ──────────────────────────── */ .theme-avocado { --intelis-primary: #4f772d; --intelis-secondary: #bc4749; --intelis-appbar-start: #31572c; --intelis-appbar-end: #6a994e; --intelis-link: #4f772d; --intelis-drawer-bg: #eef2e6; --intelis-drawer-border: #dbe3cd; --intelis-drawer-text: #445c3c; --intelis-drawer-hover-bg: #e0e8d2; --intelis-drawer-hover-text: #1a2417; --intelis-drawer-active-text: #4f772d; --intelis-drawer-active-icon: #4f772d; --intelis-drawer-active-border: #4f772d; --intelis-drawer-active-bg: rgba(79, 119, 45, 0.12); --intelis-drawer-icon: #6a994e; --intelis-drawer-icon-hover: #1a2417; --intelis-badge-text: #6a994e; --intelis-badge-border: #cfd8c2; } .theme-avocado.dark-mode { --intelis-appbar-start: #10180e; --intelis-appbar-end: #31572c; --intelis-link: #90c975; --intelis-drawer-bg: #151d12; --intelis-drawer-border: #2c3a27; --intelis-drawer-text: #c0cfb8; --intelis-drawer-hover-bg: rgba(255, 255, 255, 0.08); --intelis-drawer-hover-text: #f2f7ee; --intelis-drawer-active-text: #c0cfb8; --intelis-drawer-active-icon: #90c975; --intelis-drawer-icon: #90c975; --intelis-drawer-icon-hover: #90c975; --intelis-badge-text: #90c975; --intelis-badge-border: #3a4c33; } /* ── Blueberry style ("Blueberry Dumplings", ES-299) ──────────────────── */ .theme-blueberry { --intelis-primary: #5f4b8b; --intelis-secondary: #a4508b; --intelis-appbar-start: #3b2f5c; --intelis-appbar-end: #8272ab; --intelis-link: #5f4b8b; --intelis-drawer-bg: #efecf6; --intelis-drawer-border: #ded8ec; --intelis-drawer-text: #524a6b; --intelis-drawer-hover-bg: #e3ddf0; --intelis-drawer-hover-text: #2a2140; --intelis-drawer-active-text: #5f4b8b; --intelis-drawer-active-icon: #5f4b8b; --intelis-drawer-active-border: #5f4b8b; --intelis-drawer-active-bg: rgba(95, 75, 139, 0.12); --intelis-drawer-icon: #8272ab; --intelis-drawer-icon-hover: #2a2140; --intelis-badge-text: #8272ab; --intelis-badge-border: #d5cfe5; } .theme-blueberry.dark-mode { --intelis-appbar-start: #171028; --intelis-appbar-end: #3b2f5c; --intelis-link: #b39ddb; --intelis-drawer-bg: #1b1430; --intelis-drawer-border: #332a52; --intelis-drawer-text: #c3bad8; --intelis-drawer-hover-bg: rgba(255, 255, 255, 0.08); --intelis-drawer-hover-text: #f2eefc; --intelis-drawer-active-text: #c3bad8; --intelis-drawer-active-icon: #b39ddb; --intelis-drawer-icon: #b39ddb; --intelis-drawer-icon-hover: #b39ddb; --intelis-badge-text: #b39ddb; --intelis-badge-border: #3f3563; } /* ── Graphite style ("Corporate Grey", ES-299) ────────────────────────── */ .theme-graphite { --intelis-primary: #37474f; --intelis-secondary: #546e7a; --intelis-appbar-start: #263238; --intelis-appbar-end: #546e7a; --intelis-link: #546e7a; --intelis-drawer-bg: #eceff1; --intelis-drawer-border: #d8dee2; --intelis-drawer-text: #424242; --intelis-drawer-hover-bg: #dde3e6; --intelis-drawer-hover-text: #212121; --intelis-drawer-active-text: #37474f; --intelis-drawer-active-icon: #37474f; --intelis-drawer-active-border: #37474f; --intelis-drawer-active-bg: rgba(55, 71, 79, 0.12); --intelis-drawer-icon: #546e7a; --intelis-drawer-icon-hover: #212121; --intelis-badge-text: #546e7a; --intelis-badge-border: #cfd8dc; } .theme-graphite.dark-mode { --intelis-appbar-start: #101417; --intelis-appbar-end: #37474f; --intelis-link: #90a4ae; --intelis-drawer-bg: #1a1a1a; --intelis-drawer-border: #333333; --intelis-drawer-text: #b0bec5; --intelis-drawer-hover-bg: rgba(255, 255, 255, 0.08); --intelis-drawer-hover-text: #e0e0e0; --intelis-drawer-active-text: #b0bec5; --intelis-drawer-active-icon: #90a4ae; --intelis-drawer-icon: #90a4ae; --intelis-drawer-icon-hover: #90a4ae; --intelis-badge-text: #90a4ae; --intelis-badge-border: #444444; } /* Tile accents (ES-299, opt-in): give a card/tile one of the six intelis.cz gradient hues, e.g. . Active only under the Intelis style — in the Default style the classes are inert (no token). Usage example: ... */ .tile-accent-1 { background-color: var(--intelis-tile-1); } .tile-accent-2 { background-color: var(--intelis-tile-2); } .tile-accent-3 { background-color: var(--intelis-tile-3); } .tile-accent-4 { background-color: var(--intelis-tile-4); } .tile-accent-5 { background-color: var(--intelis-tile-5); } .tile-accent-6 { background-color: var(--intelis-tile-6); } /* AppBar gradient */ .mud-appbar { background: linear-gradient(90deg, var(--intelis-appbar-start) 0%, var(--intelis-appbar-end) 100%) !important; } .brand-gradient { background: linear-gradient(135deg, var(--intelis-appbar-start) 0%, var(--intelis-appbar-end) 100%); } html, body { font-family: 'Red Hat Display', 'Helvetica Neue', Helvetica, Arial, sans-serif; } a, .btn-link { color: var(--intelis-link); } .btn-primary { color: var(--intelis-btn-primary-text); background-color: var(--intelis-btn-primary-bg); border-color: var(--intelis-btn-primary-border); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Drawer - Intelis style */ .mud-drawer { background: var(--intelis-drawer-bg) !important; border-right: 1px solid var(--intelis-drawer-border) !important; overflow-x: hidden; } .mud-drawer-content { overflow-x: hidden; } .mud-drawer .mud-navmenu .mud-nav-link { color: var(--intelis-drawer-text) !important; transition: all 0.2s; } /* Expanded drawer - links flush to edges */ .mud-drawer--open .mud-navmenu .mud-nav-link { border-radius: 0; margin: 0; } .mud-drawer .mud-navmenu .mud-nav-link:hover { background-color: var(--intelis-drawer-hover-bg) !important; color: var(--intelis-drawer-hover-text) !important; } .mud-drawer .mud-navmenu .mud-nav-link.active { background-color: var(--intelis-drawer-active-bg) !important; color: var(--intelis-drawer-active-text) !important; } /* Mini drawer - clean icon-only view */ .mud-drawer:not(.mud-drawer--open) .mud-navmenu .mud-nav-link { border-radius: 0; margin: 0; justify-content: center; padding-left: 0; padding-right: 0; overflow: hidden; } .mud-drawer:not(.mud-drawer--open) .mud-navmenu .mud-nav-link .mud-nav-link-text { display: none !important; } .mud-drawer:not(.mud-drawer--open) .mud-navmenu .mud-nav-link .mud-nav-link-icon { margin: 0 auto !important; } .mud-drawer:not(.mud-drawer--open) .mud-navmenu .mud-nav-link.active { border-left: 3px solid var(--intelis-drawer-active-border); } .mud-drawer:not(.mud-drawer--open) .mud-navmenu .mud-nav-group .mud-nav-link-text { display: none !important; } .mud-drawer:not(.mud-drawer--open) .mud-navmenu .mud-nav-group .mud-nav-group-expand-icon { display: none !important; } .mud-drawer .mud-navmenu .mud-nav-link.active .mud-nav-link-icon { color: var(--intelis-drawer-active-icon) !important; } .mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-icon { color: var(--intelis-drawer-icon) !important; } .mud-drawer .mud-navmenu .mud-nav-link:hover .mud-nav-link-icon { color: var(--intelis-drawer-icon-hover) !important; } /* Nav group text (WI-00068): the colour must sit directly on the .mud-nav-link-text span — it would otherwise lose to the colour inherited from `... .mud-nav-link` above. Dark mode is handled by the token override. */ .mud-drawer .mud-navmenu .mud-nav-group .mud-nav-link-text, .mud-drawer .mud-navmenu .mud-nav-group .mud-collapse-wrapper { color: var(--intelis-drawer-text); } .mud-drawer .mud-navmenu .mud-nav-group .mud-nav-group-expand-icon { color: var(--intelis-drawer-icon) !important; } /* Version badge in drawer */ .version-badge { cursor: pointer; opacity: 0.5; transition: opacity 0.2s; font-size: 0.75rem; color: var(--intelis-badge-text) !important; border-color: var(--intelis-badge-border) !important; } .version-badge:hover { opacity: 0.9; color: var(--intelis-badge-hover-text) !important; } /* Dark mode drawer/badge colours come from the token overrides in the .dark-mode block at the top of this file — no per-rule duplication. */ /* Dark mode - headings (WI-00068). Radzen's default.css sets `h4, .h4 { color: var(--rz-text-title-color) }` on bare heading tags; MudText renders bare

..

, so that fixed dark title color bleeds onto MudBlazor headings and is not dark-mode aware — headings rendered dark-on-dark. Keep MudBlazor typography on the MudBlazor palette in dark mode (light mode unchanged). */ .dark-mode .mud-typography-h1, .dark-mode .mud-typography-h2, .dark-mode .mud-typography-h3, .dark-mode .mud-typography-h4, .dark-mode .mud-typography-h5, .dark-mode .mud-typography-h6 { color: var(--mud-palette-text-primary); } /* Dark mode - Expansion Panel contrast improvements */ .dark-mode .mud-expand-panel { background-color: #252525; border: 1px solid #404040; } .dark-mode .mud-expand-panel .mud-expand-panel-header { background-color: #2d2d2d; } .dark-mode .mud-expand-panel .mud-expand-panel-header:hover { background-color: #353535; } .dark-mode .mud-expand-panel.mud-panel-expanded .mud-expand-panel-header { background-color: #303030; } .dark-mode .mud-expand-panel .mud-expand-panel-content { background-color: #252525; } /* Rich text content (Markdig-rendered markdown) */ .rich-content { overflow-wrap: break-word; word-break: break-word; font-size: 1rem; line-height: 1.5; font-family: inherit; } .rich-content > :first-child { margin-top: 0; } .rich-content > :last-child { margin-bottom: 0; } .rich-content img { max-width: 100%; height: auto; border-radius: 4px; } /* Links leaving the app (MarkdownRenderer adds .external-link + target=_blank): a small Tabler "external-link" glyph after the text. Drawn via mask + currentColor so it follows the link color in both themes without inline SVG in the sanitized HTML. */ .rich-content a.external-link::after { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.15em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6'/%3E%3Cpath d='M11 13l9 -9'/%3E%3Cpath d='M15 4h5v5'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6'/%3E%3Cpath d='M11 13l9 -9'/%3E%3Cpath d='M15 4h5v5'/%3E%3C/svg%3E") no-repeat center / contain; } .rich-content p { margin-top: 0; margin-bottom: 0.5em; } .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6 { margin-top: 1em; margin-bottom: 0.4em; font-weight: 600; line-height: 1.3; } .rich-content h1 { font-size: 1.5rem; } .rich-content h2 { font-size: 1.25rem; } .rich-content h3 { font-size: 1.125rem; } .rich-content h4 { font-size: 1rem; } .rich-content h5 { font-size: 0.95rem; } .rich-content h6 { font-size: 0.9rem; } .rich-content ul, .rich-content ol { padding-left: 1.75em; margin-top: 0; margin-bottom: 0.5em; } .rich-content ul { list-style-type: disc; } .rich-content ol { list-style-type: decimal; } .rich-content ul ul { list-style-type: circle; } .rich-content ul ul ul { list-style-type: square; } .rich-content li { margin-bottom: 0.2em; } .rich-content li > p { margin-bottom: 0.2em; } /* Task-list items (Markdig UseTaskLists generates inside
  • ) */ .rich-content li:has(> input[type="checkbox"]) { list-style-type: none; margin-left: -1.25em; } .rich-content li > input[type="checkbox"] { margin-right: 0.4em; } .rich-content blockquote { margin: 0.5em 0; padding: 0.25em 0.75em; border-left: 3px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); } .rich-content code { background: rgba(0, 0, 0, 0.06); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.9em; font-family: 'Cascadia Mono', Menlo, Consolas, 'Courier New', monospace; } .dark-mode .rich-content code { background: rgba(255, 255, 255, 0.1); } .rich-content pre { background: rgba(0, 0, 0, 0.06); padding: 0.6em 0.8em; border-radius: 4px; overflow-x: auto; margin: 0.5em 0; } .dark-mode .rich-content pre { background: rgba(255, 255, 255, 0.08); } .rich-content pre code { background: transparent; padding: 0; font-size: 0.9em; } .rich-content table { border-collapse: collapse !important; margin: 0.5em 0; border: 1px solid rgba(0, 0, 0, 0.12); } .rich-content th, .rich-content td { border: 1px solid rgba(0, 0, 0, 0.12) !important; padding: 0.3em 0.6em; text-align: left; } .rich-content th { background: rgba(0, 0, 0, 0.04); font-weight: 600; } .dark-mode .rich-content table, .dark-mode .rich-content th, .dark-mode .rich-content td { border-color: rgba(255, 255, 255, 0.18) !important; } .dark-mode .rich-content th { background: rgba(255, 255, 255, 0.06); } .rich-content hr { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 1em 0; } /* ─── EasyMDE / PSC MarkdownEditor overrides ─────────────────── */ /* CodeMirror editor (Mac Safari default is 10pt — force readable size + project font) */ .EasyMDEContainer .CodeMirror, .EasyMDEContainer .CodeMirror pre { font-family: 'Cascadia Mono', Menlo, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Editor heading scale — override CodeMirror defaults (cm-header-1 = 200%) */ .EasyMDEContainer .CodeMirror .cm-header-1 { font-size: 1.4em; line-height: 1.3; } .EasyMDEContainer .CodeMirror .cm-header-2 { font-size: 1.2em; line-height: 1.3; } .EasyMDEContainer .CodeMirror .cm-header-3 { font-size: 1.1em; line-height: 1.3; } .EasyMDEContainer .CodeMirror .cm-header-4, .EasyMDEContainer .CodeMirror .cm-header-5, .EasyMDEContainer .CodeMirror .cm-header-6 { font-size: 1em; line-height: 1.3; } /* Min height — outer resize is handled by EasyMDE Resize parameter on the container */ .EasyMDEContainer .CodeMirror { min-height: 120px; } /* Focus ring using MudBlazor primary colour */ .EasyMDEContainer .CodeMirror-focused { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px rgba(2, 42, 58, 0.25); } /* ─── Preview pane: mirror .rich-content (saved Markdig render) ── */ .EasyMDEContainer .editor-preview, .EasyMDEContainer .editor-preview-side { font-family: 'Red Hat Display', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.5; overflow-wrap: break-word; word-break: break-word; } .EasyMDEContainer .editor-preview > :first-child, .EasyMDEContainer .editor-preview-side > :first-child { margin-top: 0; } .EasyMDEContainer .editor-preview img, .EasyMDEContainer .editor-preview-side img { max-width: 100%; height: auto; border-radius: 4px; } .EasyMDEContainer .editor-preview p, .EasyMDEContainer .editor-preview-side p { margin: 0 0 0.5em 0; } .EasyMDEContainer .editor-preview h1, .EasyMDEContainer .editor-preview h2, .EasyMDEContainer .editor-preview h3, .EasyMDEContainer .editor-preview h4, .EasyMDEContainer .editor-preview h5, .EasyMDEContainer .editor-preview h6, .EasyMDEContainer .editor-preview-side h1, .EasyMDEContainer .editor-preview-side h2, .EasyMDEContainer .editor-preview-side h3, .EasyMDEContainer .editor-preview-side h4, .EasyMDEContainer .editor-preview-side h5, .EasyMDEContainer .editor-preview-side h6 { margin: 1em 0 0.4em 0; font-weight: 600; line-height: 1.3; font-family: 'Red Hat Display', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .EasyMDEContainer .editor-preview h1, .EasyMDEContainer .editor-preview-side h1 { font-size: 1.5rem; } .EasyMDEContainer .editor-preview h2, .EasyMDEContainer .editor-preview-side h2 { font-size: 1.25rem; } .EasyMDEContainer .editor-preview h3, .EasyMDEContainer .editor-preview-side h3 { font-size: 1.125rem; } .EasyMDEContainer .editor-preview h4, .EasyMDEContainer .editor-preview-side h4 { font-size: 1rem; } .EasyMDEContainer .editor-preview h5, .EasyMDEContainer .editor-preview-side h5 { font-size: 0.95rem; } .EasyMDEContainer .editor-preview h6, .EasyMDEContainer .editor-preview-side h6 { font-size: 0.9rem; } .EasyMDEContainer .editor-preview ul, .EasyMDEContainer .editor-preview ol, .EasyMDEContainer .editor-preview-side ul, .EasyMDEContainer .editor-preview-side ol { padding-left: 1.75em; margin: 0 0 0.5em 0; } .EasyMDEContainer .editor-preview ul, .EasyMDEContainer .editor-preview-side ul { list-style-type: disc; } .EasyMDEContainer .editor-preview ol, .EasyMDEContainer .editor-preview-side ol { list-style-type: decimal; } .EasyMDEContainer .editor-preview ul ul, .EasyMDEContainer .editor-preview-side ul ul { list-style-type: circle; } .EasyMDEContainer .editor-preview ul ul ul, .EasyMDEContainer .editor-preview-side ul ul ul { list-style-type: square; } .EasyMDEContainer .editor-preview li, .EasyMDEContainer .editor-preview-side li { margin-bottom: 0.2em; } .EasyMDEContainer .editor-preview blockquote, .EasyMDEContainer .editor-preview-side blockquote { margin: 0.5em 0; padding: 0.25em 0.75em; border-left: 3px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); } .EasyMDEContainer .editor-preview code, .EasyMDEContainer .editor-preview-side code { background: rgba(0, 0, 0, 0.06); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.9em; font-family: 'Cascadia Mono', Menlo, Consolas, 'Courier New', monospace; } .EasyMDEContainer .editor-preview pre, .EasyMDEContainer .editor-preview-side pre { background: rgba(0, 0, 0, 0.06); padding: 0.6em 0.8em; border-radius: 4px; overflow-x: auto; margin: 0.5em 0; font-family: 'Cascadia Mono', Menlo, Consolas, 'Courier New', monospace; } /* Work item detail header (WI-06509, reworked by WI-06550). Density norm: every control is 32 px, groups sit 8 px apart. Row 1 = back arrow + a wrapping group of title and tags; the h5 title is 32 px tall, so arrow, title and chips share one centre line. Row 2 = copy icons with the codes; each "icon + text" group stays together and the groups wrap at phone width. */ .wi-header-row { gap: 8px; } .wi-header-back.mud-icon-button { padding: 4px; /* 24 px icon in a 32 px control */ } .wi-header-tags { flex: 1 1 auto; min-width: 0; min-height: 32px; gap: 8px; } .wi-header-title { min-width: 0; overflow-wrap: anywhere; } .wi-header-caption { column-gap: 8px; row-gap: 0; margin-top: 4px; } .wi-header-caption .mud-icon-button { padding: 6px; /* 20 px icon in a 32 px control, same box as the back arrow above */ } .wi-header-group { display: inline-flex; align-items: center; gap: 2px; min-width: 0; } .wi-header-code { padding-left: 2px; } /* On a phone the two groups wrap onto their own lines, where a "·" would dangle at a line end. */ @media (max-width: 599.98px) { .wi-header-sep { display: none; } } .wi-header-project { min-width: 0; overflow-wrap: anywhere; padding-left: 2px; } /* The project link must read as a link next to the grey caption text. The light theme's primary is a near-black navy (#022a3a), so colour alone barely separates it from the grey — a medium weight and a faint resting underline carry the "clickable" cue; hover/focus make the underline solid. The plain-text variant (.wi-header-project without -link) stays caption grey. */ .wi-header-caption .wi-header-project-link { color: var(--mud-palette-primary); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; border-radius: var(--mud-default-borderradius); } .wi-header-caption .wi-header-project-link:hover, .wi-header-caption .wi-header-project-link:focus-visible { text-decoration-color: currentColor; } .wi-header-caption .wi-header-project-link:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; } /* Milestones tab header (WI-06531): status filter + "New milestone", both 32 px tall and 8 px apart — the same density as the Tasks toolbar (WorkItems/Index.razor.css). */ .milestones-header-actions { gap: 8px; } .milestones-header-actions .mud-button-root:not(.mud-icon-button) { height: 32px; min-height: 32px; } .milestones-status-filter { width: 240px; max-width: 100%; } .milestones-status-filter .mud-input-control { margin: 0; } .milestones-status-filter .mud-input-control .mud-input-root { box-sizing: border-box; height: 32px; min-height: 32px; } /* Sticky add-comment editor (WorkItem + Opportunity detail): pinned to the viewport bottom while the comment list scrolls past, settles into its natural position at the end of the list. Negative margins span the tab's pa-4 padding so comments don't peek through beside/below the editor. */ .comment-editor-sticky { position: sticky; bottom: 0; z-index: 10; background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-lines-default); border-bottom-left-radius: var(--mud-default-borderradius); border-bottom-right-radius: var(--mud-default-borderradius); margin: 16px -16px -16px; padding: 12px 16px 16px; } /* Jira-like collapse of the sticky editor: CodeMirror renders its placeholder element only while the document is empty, so "empty AND not focused" can be expressed in pure CSS — no component state, no focus-race JS. Collapsed, the editor is a one-line field; clicking it focuses CodeMirror and expands the toolbar, status bar and submit button back. A non-empty draft never collapses (no placeholder element), so unsent text stays visible. */ .comment-editor-sticky:has(.CodeMirror-placeholder):not(:focus-within) .editor-toolbar, .comment-editor-sticky:has(.CodeMirror-placeholder):not(:focus-within) .editor-statusbar, .comment-editor-sticky:has(.CodeMirror-placeholder):not(:focus-within) .comment-editor-actions { /* !important: the actions row carries MudBlazor's d-flex utility, which is itself display: flex !important. */ display: none !important; } .comment-editor-sticky:has(.CodeMirror-placeholder):not(:focus-within) .CodeMirror { height: 42px !important; /* min-height beats height regardless of !important — cancel both the global 120px rule above and EasyMDE's inline value on the scroller. */ min-height: 0 !important; } /* EasyMDE writes the MinHeight parameter as an inline min-height on the scroller — it would hold the collapsed field at full height. */ .comment-editor-sticky:has(.CodeMirror-placeholder):not(:focus-within) .CodeMirror-scroll { min-height: 0 !important; } .comment-editor-sticky .CodeMirror { transition: height 0.15s ease; } /* Rounded MudTabs clip their box (overflow: hidden), which would make the tabs div the sticky containing block — and it doesn't scroll, so the editor would never pin. The tab hosts that contain the sticky editor opt out of the clip and get the rounding re-applied to the toolbar/panels directly. */ .mud-tabs.comment-sticky-host { overflow: visible; } .mud-tabs.comment-sticky-host > .mud-tabs-toolbar { border-top-left-radius: var(--mud-default-borderradius); border-top-right-radius: var(--mud-default-borderradius); } .mud-tabs.comment-sticky-host .mud-tabs-panels { border-bottom-left-radius: var(--mud-default-borderradius); border-bottom-right-radius: var(--mud-default-borderradius); } /* Tab-header count badges as normal inline boxes (WI-00061 #8). MudBlazor renders them as a zero-size .mud-badge-root anchor whose bubble is absolutely positioned — auto-sized tabs reserve no width for it, so the bubble crosses the tab edge and .mud-tab (overflow: hidden) clips it. Opt-in per MudTabs via the tab-badge-inline class (opportunity detail). */ .mud-tabs.tab-badge-inline .mud-tab .mud-tab-badge { display: inline-flex; align-items: center; } .mud-tabs.tab-badge-inline .mud-tab .mud-tab-badge .mud-badge-wrapper { position: static; width: auto; height: auto; } .mud-tabs.tab-badge-inline .mud-tab .mud-tab-badge .mud-badge { position: static; } /* New work item dialog: Description / Attachments panes (WI-06575). Both panes share one grid cell and stay laid out; the inactive one is only hidden. The cell's height therefore always follows the Description pane, and switching tabs moves neither the tab strip nor the attributes below. contain: size keeps the Attachments pane from adding height of its own — it stretches to the Description pane's height and its file list scrolls inside. */ .wi-content-stack { display: grid; grid-template-columns: minmax(0, 1fr); } .wi-content-stack > .wi-content-pane { grid-area: 1 / 1; min-width: 0; } .wi-content-stack > .wi-content-pane-hidden { visibility: hidden; } .wi-attachments-pane { contain: size; display: flex; flex-direction: column; gap: 8px; overflow: hidden; } .wi-attachments-picker { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; } /* Drop zone: fills the pane while no file is chosen, one ~32px row once there is one. The current file input lies transparently over it, so a click opens the file dialog and a drop lands in the input. */ .wi-dropzone { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; /* 4px above and below: the Add files button never touches the dashed border (row ~40px). */ padding: 4px 8px; border: 1px dashed var(--mud-palette-lines-inputs); border-radius: var(--mud-default-borderradius); transition: border-color .15s, background-color .15s; } .wi-dropzone.wi-dropzone-empty { flex: 1 1 auto; flex-direction: column; padding: 16px; } .wi-dropzone.drag-over { border-color: var(--mud-palette-primary); background-color: var(--mud-palette-primary-hover); } .wi-dropzone:has(input:focus-visible) { /* Inset ring: the pane clips overflow (overflow: hidden), an outside outline would be cut off. */ outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; } .wi-dropzone .wi-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; /* Above the Add files button (.mud-button-root is position: relative and later in the DOM, so without this it would paint on top and take the drop — the browser then opens the file in place of the page). The whole zone, button and caption included, hits the input. */ z-index: 1; } .wi-dropzone .wi-dropzone-input:disabled { cursor: default; } /* The button sits under the input, so it gets no hover of its own — mirror it from the zone. */ .wi-dropzone:hover:not(:has(input:disabled)) .mud-button-root, .wi-dropzone:has(.wi-dropzone-input:focus-visible) .mud-button-root { background-color: var(--mud-palette-action-default-hover); } .wi-attachments-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .EasyMDEContainer .editor-preview pre code, .EasyMDEContainer .editor-preview-side pre code { background: transparent; padding: 0; font-size: 0.9em; } .EasyMDEContainer .editor-preview table, .EasyMDEContainer .editor-preview-side table { border-collapse: collapse !important; margin: 0.5em 0; border: 1px solid rgba(0, 0, 0, 0.12); } .EasyMDEContainer .editor-preview th, .EasyMDEContainer .editor-preview td, .EasyMDEContainer .editor-preview-side th, .EasyMDEContainer .editor-preview-side td { border: 1px solid rgba(0, 0, 0, 0.12) !important; padding: 0.3em 0.6em; text-align: left; } .EasyMDEContainer .editor-preview th, .EasyMDEContainer .editor-preview-side th { background: rgba(0, 0, 0, 0.04); font-weight: 600; } .EasyMDEContainer .editor-preview hr, .EasyMDEContainer .editor-preview-side hr { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 1em 0; } /* Dark mode colours for editor + preview */ .dark-mode .EasyMDEContainer .CodeMirror { background: #1e1e1e; color: #e0e0e0; border-color: #3a3a3a; } .dark-mode .EasyMDEContainer .CodeMirror-cursor { border-left-color: #e0e0e0; } .dark-mode .EasyMDEContainer .editor-toolbar { background: #252525; border-color: #3a3a3a; } .dark-mode .EasyMDEContainer .editor-toolbar a { color: #cfcfcf !important; } .dark-mode .EasyMDEContainer .editor-toolbar a:hover, .dark-mode .EasyMDEContainer .editor-toolbar a.active { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); } .dark-mode .EasyMDEContainer .editor-preview, .dark-mode .EasyMDEContainer .editor-preview-side { background: #1e1e1e; color: #e0e0e0; } .dark-mode .EasyMDEContainer .editor-preview h1, .dark-mode .EasyMDEContainer .editor-preview h2, .dark-mode .EasyMDEContainer .editor-preview h3, .dark-mode .EasyMDEContainer .editor-preview h4, .dark-mode .EasyMDEContainer .editor-preview-side h1, .dark-mode .EasyMDEContainer .editor-preview-side h2, .dark-mode .EasyMDEContainer .editor-preview-side h3, .dark-mode .EasyMDEContainer .editor-preview-side h4 { color: #fff; } .dark-mode .EasyMDEContainer .editor-preview code, .dark-mode .EasyMDEContainer .editor-preview-side code, .dark-mode .EasyMDEContainer .editor-preview pre, .dark-mode .EasyMDEContainer .editor-preview-side pre { background: rgba(255, 255, 255, 0.08); } .dark-mode .EasyMDEContainer .editor-preview table, .dark-mode .EasyMDEContainer .editor-preview th, .dark-mode .EasyMDEContainer .editor-preview td, .dark-mode .EasyMDEContainer .editor-preview-side table, .dark-mode .EasyMDEContainer .editor-preview-side th, .dark-mode .EasyMDEContainer .editor-preview-side td { border-color: rgba(255, 255, 255, 0.18) !important; } .dark-mode .EasyMDEContainer .editor-preview th, .dark-mode .EasyMDEContainer .editor-preview-side th { background: rgba(255, 255, 255, 0.06); } .dark-mode .EasyMDEContainer .editor-statusbar { color: #9e9e9e; } /* Prevent EasyMDE fullscreen being hidden by MudDialog overlay (z-index 1300) */ .EasyMDEContainer .CodeMirror-fullscreen, .EasyMDEContainer .editor-toolbar.fullscreen, .EasyMDEContainer .editor-preview-side { z-index: 1400; } /* Help screenshots: clickable inline, full size in the overlay (see helpLightbox in uiState.js). */ .help-drawer__content img, .user-guide__section img { cursor: zoom-in; } #help-lightbox { position: fixed; inset: 0; /* Above MudBlazor's drawer and dialog layers so the overlay is never half-covered. */ z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 0, 0, 0.75); cursor: zoom-out; } #help-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--mud-default-borderradius); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); } /* Projects list, grouped by type (WI-00101 follow-up): the group header itself is the toggle and the expanded set is persisted per user, so MudDataGrid's own expander (no change event) is hidden and every click runs through the page. */ .projects-type-group-row .mud-table-row-expander { display: none; } .projects-type-group-toggle { display: inline-flex; align-items: center; cursor: pointer; user-select: none; /* native