/* ========================================================================= HT-OPS UI refresh — typography + colour calm-down. Loaded AFTER MudBlazor.min.css (see App.razor) so these win. Display-layer only: font, softer text colours, lighter heading weights. ========================================================================= */ :root { --ht-font: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* ── Semantic tokens (LIGHT, default) ───────────────────────────────── */ --ht-bg: #F6F7F9; /* app canvas */ --ht-surface: #ffffff; /* cards / papers */ --ht-surface-2: #f3f5f8; /* inset (tiles) */ --ht-line: #E7EBF0; /* hairline border */ --ht-card-border: var(--ht-line); --ht-ink: #1f2733; /* primary text — dark grey, not black */ --ht-muted: #6b7785; /* secondary text / labels */ --ht-faint: #97a2b0; /* hints, placeholders */ --ht-accent: #3b6ef5; /* actions / links / active */ --ht-chip-bg: #EEF1F5; /* neutral chip background */ --ht-btn-ink: #41506a; /* neutral outlined-button text */ --ht-appbar: #ffffff; /* top bar */ --ht-drawer: #ffffff; /* sidebar */ /* ── Map MudBlazor's own variables onto our tokens ──────────────────── */ --mud-typography-default-family: var(--ht-font); --mud-default-borderradius: 10px; --mud-palette-background: var(--ht-bg); --mud-palette-surface: var(--ht-surface); --mud-palette-text-primary: var(--ht-ink); --mud-palette-text-secondary: var(--ht-muted); --mud-palette-text-disabled: var(--ht-faint); --mud-palette-lines-inputs: var(--ht-line); --mud-palette-lines-default: var(--ht-line); --mud-palette-divider: var(--ht-line); } /* ── DARK THEME — cool dark-grey (driven by ) ──── */ :root[data-theme="dark"] { color-scheme: dark; /* native scrollbars / date pickers go dark */ --ht-bg: #1a1d21; --ht-surface: #23272d; --ht-surface-2: #2b3037; --ht-line: #373c44; --ht-ink: #e7e9ed; --ht-muted: #a2a8b2; --ht-faint: #757b86; --ht-accent: #7aa2ff; --ht-chip-bg: #2f343c; --ht-btn-ink: #cfcfd2; --ht-appbar: #1f2329; --ht-drawer: #1f2329; --mud-palette-primary: #7aa2ff; --mud-palette-drawer-background: var(--ht-drawer); --mud-palette-drawer-text: #cfcfd2; --mud-palette-drawer-icon: var(--ht-muted); --mud-palette-appbar-background: var(--ht-appbar); --mud-palette-appbar-text: var(--ht-ink); --mud-palette-action-default: var(--ht-muted); --mud-palette-action-disabled: #5a606b; --mud-palette-surface: var(--ht-surface); } /* App canvas + main scroll regions follow the theme token. */ html, body { background-color: var(--ht-bg); } .mud-layout, .mud-main-content { background-color: var(--ht-bg); } /* Top bar + drawer follow the theme (AppBar inline style is overridden). */ .mud-appbar.ht-appbar { background: var(--ht-appbar) !important; border-bottom: 1px solid var(--ht-line) !important; } .mud-drawer { background: var(--ht-drawer) !important; } /* Outlined text fields / selects — rounder corners + card-hairline border. */ .mud-input.mud-input-outlined, .mud-input-outlined-border { border-radius: 10px !important; } .mud-input-outlined-border { border-color: var(--ht-card-border) !important; } /* Keep the accent on hover/focus so the field still signals interaction. */ .mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border, .mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--mud-palette-primary) !important; } /* Neutral outlined buttons (Edit / Set) — border = card hairline, calm grey text. */ .mud-button-outlined-default { border-color: var(--ht-card-border) !important; color: var(--ht-btn-ink); } /* Rounder corners + a light hairline border so cards read as crisp surfaces on the grey canvas (matches the reference). Soften the default shadow. */ .mud-paper { border-radius: 12px; border: 1px solid var(--ht-card-border); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } /* Task detail title card — clean white with a per-type colour accent. */ .ht-title-card { position: relative; border-radius: 14px; padding: 18px 22px 18px 24px; background: var(--ht-surface); border: 1px solid var(--ht-card-border); overflow: hidden; } /* Left accent bar in the task-type colour (set via --ht-accent inline). */ .ht-title-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ht-accent, #3b6ef5); } .ht-title-row { display: flex; align-items: flex-start; gap: 16px; } .ht-title-badge { width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ht-title-crumb { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ht-faint); margin-bottom: 3px; } .ht-title-text { font-weight: 650; line-height: 1.2; color: var(--ht-ink); } .ht-title-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .ht-title-actions .mud-icon-button:hover { background: rgba(16,24,40,0.05); } .ht-crumb { display: inline-flex; align-items: center; gap: 5px; background: var(--ht-chip-bg); color: var(--ht-btn-ink); border-radius: 7px; padding: 3px 9px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; font-family: "SFMono-Regular", ui-monospace, Consolas, monospace; } .ht-crumb.ht-crumb--type { font-family: var(--ht-font); } .ht-crumb.ht-crumb--soft { background: var(--ht-chip-bg); color: var(--ht-muted); } /* Task detail: narrow the right (Fields) pane ~15% on desktop; mobile still stacks. The right pane also becomes its own sticky scroll area so it scrolls independently of the left column. */ @media (min-width: 960px) { .ht-task-main { flex: 0 0 72% !important; max-width: 72% !important; } .ht-task-side { flex: 0 0 28% !important; max-width: 28% !important; position: sticky; top: 84px; align-self: flex-start; max-height: calc(100vh - 100px); overflow-y: auto; } } /* Auto-hiding scrollbar on the right pane: invisible at rest; visible while scrolling (JS adds .scrolling) or on hover. */ .ht-task-side { scrollbar-width: thin; scrollbar-color: transparent transparent; } .ht-task-side:hover, .ht-task-side.scrolling { scrollbar-color: rgba(100,110,130,0.40) transparent; } .ht-task-side::-webkit-scrollbar { width: 10px; } .ht-task-side::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } .ht-task-side:hover::-webkit-scrollbar-thumb, .ht-task-side.scrolling::-webkit-scrollbar-thumb { background: rgba(100,110,130,0.40); background-clip: padding-box; } /* Sidebar: keep icons on level-1 items, drop them on sub-menu (group child) links — children are an indented text list with a vertical guide-line; the active child paints an accent segment onto that line. */ .ht-nav .mud-nav-group .mud-collapse-container .mud-nav-link .mud-nav-link-icon { display: none; } .ht-nav .mud-nav-group .mud-collapse-container { margin-left: 28px; /* line indented (sits under the parent label) */ border-left: 1px solid #CBD3DD; /* darker guide line */ } .ht-nav .mud-nav-group .mud-collapse-container .mud-nav-link { margin-left: 0; /* meet the guide line */ padding-left: 6px; /* text hugs the line (small gap) */ border-radius: 0 8px 8px 0; } .ht-nav .mud-nav-group .mud-collapse-container .mud-nav-link.active { box-shadow: inset 2px 0 0 0 var(--ht-accent); /* active segment turns the line accent */ } .ht-nav .mud-nav-group .mud-collapse-container .mud-nav-link.active::before { display: none; } /* Base font everywhere (fixes the body=Helvetica vs Mud=Roboto mismatch). */ html, body, .mud-typography, .mud-input, .mud-input-control, button, input, select, textarea, .mud-button-root { font-family: var(--ht-font); } body { color: var(--ht-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings: semibold (600), not 700 bold; a touch more air. */ .mud-typography-h1 { font-weight: 600; letter-spacing: -0.02em; } .mud-typography-h2 { font-weight: 600; letter-spacing: -0.02em; } .mud-typography-h3 { font-weight: 600; letter-spacing: -0.01em; } .mud-typography-h4 { font-weight: 600; letter-spacing: -0.01em; } .mud-typography-h5 { font-weight: 600; } .mud-typography-h6 { font-weight: 600; } /* Body copy: comfortable line-height, soft colour. */ .mud-typography-body1, .mud-typography-body2 { color: var(--ht-ink); line-height: 1.55; } .mud-typography-subtitle1, .mud-typography-subtitle2 { color: var(--ht-ink); } .mud-typography-caption { color: var(--ht-muted); } /* MudText Color="Secondary" maps to the brand cyan, but it's almost always used for muted *labels/hints* (field labels, "No comments yet", etc.). Grey it so blue is reserved for actions/links. Chips/buttons use other classes, untouched. */ .mud-secondary-text, .mud-text-secondary { color: var(--ht-muted) !important; } /* Tables: lighter header weight, softer text — less "database" feel. */ .mud-table-root { color: var(--ht-ink); } .mud-table-head .mud-table-cell { font-weight: 600; color: var(--ht-muted); } /* Buttons: medium weight reads calmer than bold. */ .mud-button-root { font-weight: 500; letter-spacing: 0; text-transform: none; } /* SectionCard "Subtle" header — force surface bg + hairline so it themes in dark too (overrides the inline #fff some pages, incl. custom-header pages, hard-coded). */ .ht-section-head-subtle { background: var(--ht-surface) !important; border-bottom-color: var(--ht-line) !important; } /* Neutralise action buttons callers styled white (they sat on a coloured bar before). */ .ht-section-head-subtle .mud-icon-button .mud-icon-root { color: var(--ht-muted) !important; } .ht-section-head-subtle .mud-button-root, .ht-section-head-subtle .mud-button-root .mud-button-label { color: var(--ht-muted) !important; } /* Safety net: callers across modules styled header text/badges WHITE (on a colour bar). Now the header is light/dark surface, so neutralise white inline text and retint the translucent-white count badges. !important overrides inline styles — no per-page edits. */ .ht-section-head-subtle [style*="color:white"], .ht-section-head-subtle [style*="color: white"], .ht-section-head-subtle [style*="rgba(255,255,255"] { color: var(--ht-btn-ink) !important; } .ht-section-head-subtle [style*="background:rgba(255,255,255"], .ht-section-head-subtle [style*="background: rgba(255,255,255"] { background: var(--ht-chip-bg) !important; color: var(--ht-muted) !important; } /* In dark, force ALL subtle-header text (incl. the SectionCard title span, which is inline-coloured ink) to the light ink token; the module-colour icon stays. */ :root[data-theme="dark"] .ht-section-head-subtle span, :root[data-theme="dark"] .ht-section-head-subtle .mud-typography { color: var(--ht-ink) !important; } /* ── Theme toggle button (top bar) ─────────────────────────────────────── */ .ht-theme-toggle { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--ht-line); background: transparent; color: var(--ht-muted); font-size: 1rem; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; transition: background .12s, color .12s; } .ht-theme-toggle:hover { background: rgba(127,140,160,0.12); color: var(--ht-ink); } /* ── Dark-mode polish for surfaces MudBlazor paints from its palette ────── */ :root[data-theme="dark"] .mud-paper { box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30); } :root[data-theme="dark"] .ht-appbar .ht-user-email { color: var(--ht-muted); } /* Inset surfaces (date/number fields, tiles) read slightly lighter than cards. */ :root[data-theme="dark"] .mud-input-outlined .mud-input-slot { background: transparent; } /* Menus / dialogs / popovers on dark surface. */ :root[data-theme="dark"] .mud-popover, :root[data-theme="dark"] .mud-list { background: var(--ht-surface); } /* ── DARK inline safety net ───────────────────────────────────────────── Many pages hard-code light inline backgrounds (#FAFAFA, #fff, #F5F7FA…) for inset boxes/tiles. Under dark, remap those to dark surfaces so the whole app themes without editing every page. Attribute selectors + !important beat the inline style. Semantic tint boxes (amber/info) map to dark tints. */ :root[data-theme="dark"] [style*="background:#FAFAFA"], :root[data-theme="dark"] [style*="background: #FAFAFA"], :root[data-theme="dark"] [style*="background:#fff"], :root[data-theme="dark"] [style*="background: #fff"], :root[data-theme="dark"] [style*="background:#FFF"], :root[data-theme="dark"] [style*="background:#F5F7FA"], :root[data-theme="dark"] [style*="background: #F5F7FA"], :root[data-theme="dark"] [style*="background:#F5F5F5"], :root[data-theme="dark"] [style*="background:#F0F0F0"], :root[data-theme="dark"] [style*="background:#FAFBFC"], :root[data-theme="dark"] [style*="background:#EEEEEE"] { background-color: var(--ht-surface-2) !important; } /* Semantic tint boxes → dark tints (keep the hue, drop the glare). */ :root[data-theme="dark"] [style*="background:#FFF8E1"], :root[data-theme="dark"] [style*="background:#FFFDE7"] { background-color: #2c281d !important; } :root[data-theme="dark"] [style*="background:#E3F2FD"] { background-color: #1b2a3a !important; } /* Light inline borders → hairline token. */ :root[data-theme="dark"] [style*="border:1px solid #E0E0E0"], :root[data-theme="dark"] [style*="border:1px solid #EEE"], :root[data-theme="dark"] [style*="border:1px solid #F0F0F0"], :root[data-theme="dark"] [style*="border-top:1px solid #F0F0F0"], :root[data-theme="dark"] [style*="border:1px solid #E0E5EA"] { border-color: var(--ht-line) !important; } /* ── DARK fixes for components with hardcoded light/dark values ─────────── */ /* Sidebar: NavMenu's own