/* --------------------------------------------------------------------- RELEASE 2026-09-24 · partner portal (Team Management Portal) · deploy as css/layout.css Load order (unchanged): layout.css → site.css → tgt.css | techno.css --------------------------------------------------------------------- */ /* ===================================================================== portal-layout.css – Team Management Portal · SHELL Drop-in replacement for the portal's wwwroot/css/layout.css CSS only – no Razor / .NET changes. DevExpress Blazor 24.2 Fluent. Load order (unchanged): layout.css → site.css → tgt.css | techno.css A. ORIGINAL layout.css (unchanged, so nothing the app relies on is lost) B. hs_comfort shell (tokens, comfort base, top bar, side menu) Brand colours and logo live in tgt.css / techno.css (portal-tgt.css, portal-techno.css). They set --brand-* on body.tgt-theme / body.techno-theme, the class App.razor already puts on . Dark mode: the portal adds fluent-dark.bs5.min.css (html keeps data-bs-theme="light"), so dark values key off that stylesheet: html:has(link[href*="fluent-dark"]). Colours are read from the DevExpress design system (--dxds-* in 25.x, --DS-* in 24.2) so DevExpress upgrades keep working. [dx-internal] rules style DevExpress-internal class names; cosmetic only. ===================================================================== */ /* ===================================================================== A. ORIGINAL layout.css (as served by partner.tgtglobal.com) ===================================================================== */ :root { --brand-bg: var(--techno-bg-color); --brand-bg-dark: var(--techno-bg-color-dark); --tgt-bg-color: #02145C; --tgt-bg-color-light: #0a1c6f; --techno-bg-color: #0067A3; --techno-bg-color-dark: #004F7D; --footer-text-light: #212529; --footer-bg-dark: #343a40; --footer-text-dark: #f8f9fa; --topbar-bg-light: #f8f9fa; --topbar-text-light: #212529; --topbar-bg-dark: #343a40; --topbar-text-dark: #f8f9fa; --card-bg-light: white; --card-text-light: black; --card-bg-dark: #282828; --card-text-dark: #f8f9fa; } /* Brand switch Themes (controlled by App.razor class) */ /* Add the brand specific CSS variables here */ .tgt-theme { --brand-bg: var(--tgt-bg-color); --brand-bg-dark: var(--tgt-bg-color-light); } .techno-theme { --brand-bg: var(--techno-bg-color); --brand-bg-dark: var(--techno-bg-color-dark); } .brand-bg { background-color: var(--brand-bg) !important; } .brand-bg-gradient { background: linear-gradient( 135deg, var(--brand-bg) 0%, var(--brand-bg-dark) 100% ) !important; } [data-bs-theme="light"] { --footer-bg: var(--footer-bg-light); --footer-text: var(--footer-text-light); --topbar-bg: var(--topbar-bg-light); --topbar-text: var(--topbar-text-light); --card-bg: var(--card-bg-light); --card-text: var(--card-text-light); } [data-bs-theme="dark"] { --footer-bg: var(--footer-bg-dark); --footer-text: var(--footer-text-dark); --topbar-bg: var(--topbar-bg-dark); --topbar-text: var(--topbar-text-dark); --card-bg: var(--card-bg-dark); --card-text: var(--card-text-dark); } html, body, #app { padding: 0; margin: 0; overflow: hidden; overscroll-behavior: none; background-color: var(--bs-tertiary-bg) !important; } .main { background-color: var(--bs-tertiary-bg) !important; width: 100%; height:100%; padding:0.5rem; overflow: auto; } #app, .content-container, .content-container > .layout-content, .layout-content > div:not(.modal-backdrop) { background: inherit; } #app.root { min-width: 375px; } /* Header */ .nav-header, /*navigation header*/ .nav-header .dxbl-menu-nav, /*navigation header menu*/ .nav-header .dxbl-menu ul, /*navigation header menu list*/ .nav-header .dxbl-menu a, /*navigation header menu link*/ /*.nav-header .dxbl-menu .dxbl-menu-bar,*/ /*navigation header menu bar*/ /*.nav-header .dxbl-menu .dxbl-menu-bar .dxbl-menu-title,*/ /*navigation header title*/ .menu-dropdown, /*navigation header menu adaptive dropdown*/ .menu-dropdown ul, /*navigation header menu adaptive list*/ .menu-dropdown a, /*navigation header menu adaptive link*/ /*.nav-menu-dropdown,*/ /*user menu dropdown*/ /*.nav-menu-dropdown ul,*/ /*user menu dropdown list*/ /*.nav-menu-dropdown a,*/ /*user menu dropdown link*/ .nav-menu-dropdown .dxbl-dropdown-body .dxbl-text-edit, /*user menu dropdown edit input*/ .nav-menu-dropdown .dxbl-dropdown-body .dxbl-text-edit button, /*user menu dropdown edit button*/ .theme-switcher-dropdown, /*theme switcher dropdown*/ .theme-switcher-dropdown ul, /*theme switcher dropdown list*/ .theme-switcher-dropdown a /*theme switcher dropdown link*/ { background-color: var(--topbar-bg) !important; color: var(--topbar-text) !important; } .dxmenu-container { background-color: inherit; color: inherit; } .topbar-banner { display: flex; align-items: center; height: 100%; background-color: var(--brand-bg); padding-left: 15px; width: 100%; } .topbar-banner-img { height: 40px; width: 40px; margin-right: 20px; object-fit: contain; } .topbar-banner-text { display: flex; flex-direction: column; justify-content: center; color: white; gap: 2px; } .topbar-banner-text h4 { margin: 0 0 2px 0; color: white; } .topbar-banner-text span { color: white; font-size: 0.95em; } .nav-header.navbar { margin: 0 auto; position: relative; height: 3.5rem; flex-wrap: nowrap; /* justify-content: flex-start;*/ border: none; background-color: var(--topbar-bg); border-radius: 0; box-shadow: none; z-index: 1029; } .nav-header .menu-stretch { flex: 1 1 auto; min-width: 0; } /* User Menu */ .initials-avatar { width: 40px; height: 40px; color: White; border-radius: 50%; background-color: var(--brand-bg); display: flex; justify-content: center; align-items: center; text-align: center; line-height: 50px; } .navbar-initials-profile .dxbl-menu-item { background-color: var(--brand-bg) !important; } .dxbl-menu.dxbl-menu-horizontal > .dxbl-menu-bar > .dxbl-menu-item-list > .dxbl-menu-separator { border:none; } .user-menu-container { padding: 0.815rem; } .notoggle svg { display: none; } /* Body */ .content-container { display: flex; overflow-y: auto; height: 100vh; width: 100%; } .layout-content { width: 1140px; margin: 0 auto; padding-top: 10px; } .layout-content > :last-child { padding-bottom: 10px; } .sidebar-container { flex: 1 1 auto; width: 100%; } .sidebar-container .dxbl-splitter-pane-content { display: flex; flex-direction: column; padding: 0px !important; background-color: var(--bs-tertiary-bg) !important; } .sidebar-container .dxbl-splitter { width: 100%; } .sidebar-panel .dxbl-menu-item { background-color: var(--footer-bg); } /* Footer */ .footer-container { /* background-color: var(--footer-bg);*/ /* color: var(--footer-text);*/ /* padding: 10px 0;*/ text-align: center; /*position: relative;*/ /* width: 100%;*/ margin-top: auto; } .footer-container .info-wrapper { /* display: flex; flex-direction: column; align-items: flex-end;*/ justify-content: center; } .splitter-sidebar { padding: 0.5rem !important; } /* Status Legend Div */ .legend-flex-container { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end } .legend-item { display: flex; align-items: center; } /* Card View */ .card-view-wrapper { background-color: var(--DS-color-surface-neutral-default-rest); /*color: var(--card-text); border-radius: 25px; padding: 60px;*/ border-radius: 8px; padding: 0.5rem; /* margin-bottom: 1rem; */ border: 1px solid var(--DS-color-border-neutral-default-rest); box-shadow: var(--bs-box-shadow-sm); } /* ===================================================================== B. HS_COMFORT SHELL ===================================================================== */ /* --------------------------------------------------------------------- 1. Tokens (product palette; brand colours come from tgt.css / techno.css) --------------------------------------------------------------------- */ :root { /* from the active DevExpress theme (flip automatically light/dark) */ --p-surface: var(--dxds-color-surface-neutral-default-rest, var(--DS-color-surface-neutral-default-rest, #ffffff)); --p-subdued: var(--dxds-color-surface-neutral-subdued-rest, var(--DS-color-surface-neutral-subdued-rest, #f7f7f7)); --p-primary: var(--dxds-color-surface-primary-default-rest, var(--DS-color-surface-primary-default-rest, #0f6cbd)); --p-border-strong: var(--dxds-color-border-neutral-default-rest, var(--DS-color-border-neutral-default-rest, #d6d6d6)); /* light palette (hs_comfort) */ --p-bar: #213343; --p-bar-line: #0b1b2a; --p-bg: #f5f8fa; --p-line: #dfe3eb; --p-line-2: #cbd6e2; --p-row: #edf0f4; --p-hover: #f6f9fb; --p-band: #f5f8fa; --p-title: #213343; --p-ink: #2b3a48; --p-ink-2: #5b6b7b; --p-sel: #e5f5f8; --p-sel-ink: #00566a; --p-teal: #0091ae; --p-link: #0b6e8a; --p-coral: #ff7a59; --p-shadow: 0 1px 3px rgba(45, 62, 80, .06); --p-shadow-hover: 0 2px 8px rgba(45, 62, 80, .10); --p-radius: 6px; --p-selection: rgba(0, 145, 174, .16); --p-hover-tint: rgba(0, 145, 174, .045); /* status tags (attendance, stat tiles) – bg / ink / border */ --t-red-bg: #fde0db; --t-red-fg: #8a2a14; --t-red-bd: #f8a9a0; --t-rose-bg: #fce8e5; --t-rose-fg: #8a2a14; --t-rose-bd: #f5c2ba; --t-amber-bg: #fef4e3; --t-amber-fg: #6b4a00; --t-amber-bd: #f6d9a3; --t-teal-bg: #e5f5f8; --t-teal-fg: #00566a; --t-teal-bd: #b0e4ef; --t-violet-bg: #f0ebfa; --t-violet-fg: #4a2b8c; --t-violet-bd: #d3c4f0; --t-slate-bg: #eaf0f6; --t-slate-fg: #516f90; --t-slate-bd: #cbd6e2; --t-mint-bg: #e5f8f6; --t-mint-fg: #00675b; --t-mint-bd: #a9e5d6; --t-blue-bg: #e6effc; --t-blue-fg: #1d4f91; --t-blue-bd: #b9cff0; --t-green-bg: #e8f6e0; --t-green-fg: #2f6b12; --t-green-bd: #bfe3a8; } /* dark palette – active when the portal has loaded the Fluent dark theme */ html:has(link[href*="fluent-dark"]), [data-bs-theme="dark"] { --p-bar: #17222d; --p-bar-line: #0c141b; --p-bg: color-mix(in srgb, var(--p-surface) 72%, #000); --p-line: color-mix(in srgb, var(--p-border-strong) 45%, var(--p-surface)); --p-line-2: color-mix(in srgb, var(--p-border-strong) 65%, var(--p-surface)); --p-row: color-mix(in srgb, var(--p-border-strong) 30%, var(--p-surface)); --p-hover: color-mix(in srgb, var(--p-surface) 93%, #fff); --p-band: color-mix(in srgb, var(--p-surface) 94%, #fff); --p-title: #eef2f6; --p-ink: #e3e8ee; --p-ink-2: #a7b2bd; --p-sel: rgba(79, 195, 220, .16); --p-sel-ink: #9fe3f2; --p-teal: #4fc3dc; --p-link: #6fcde3; --p-coral: #ff8f73; --p-shadow: 0 1px 2px rgba(0, 0, 0, .35); --p-shadow-hover: 0 2px 8px rgba(0, 0, 0, .45); --p-selection: rgba(111, 205, 227, .22); --p-hover-tint: rgba(255, 255, 255, .045); --t-red-bg: rgba(220, 53, 69, .20); --t-red-fg: #ff9aa3; --t-red-bd: rgba(255, 154, 163, .35); --t-rose-bg: rgba(255, 130, 137, .14); --t-rose-fg: #ffb3b8; --t-rose-bd: rgba(255, 179, 184, .30); --t-amber-bg: rgba(255, 152, 0, .16); --t-amber-fg: #f5c46a; --t-amber-bd: rgba(245, 196, 106, .32); --t-teal-bg: rgba(79, 195, 220, .16); --t-teal-fg: #8fdcec; --t-teal-bd: rgba(143, 220, 236, .30); --t-violet-bg: rgba(140, 100, 220, .20); --t-violet-fg: #c9b3f5; --t-violet-bd: rgba(201, 179, 245, .30); --t-slate-bg: rgba(160, 180, 200, .14); --t-slate-fg: #b8c7d6; --t-slate-bd: rgba(184, 199, 214, .28); --t-mint-bg: rgba(0, 189, 165, .16); --t-mint-fg: #7fe0cf; --t-mint-bd: rgba(127, 224, 207, .30); --t-blue-bg: rgba(80, 140, 230, .18); --t-blue-fg: #9cc2f5; --t-blue-bd: rgba(156, 194, 245, .30); --t-green-bg: rgba(107, 203, 0, .16); --t-green-fg: #a9e37a; --t-green-bd: rgba(169, 227, 122, .30); } /* --------------------------------------------------------------------- 2. Comfort base – soft ink, calm rhythm, selection, focus, motion --------------------------------------------------------------------- */ body { color: var(--p-ink) !important; background: var(--p-bg) !important; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--p-selection); } :focus-visible { outline: 2px solid color-mix(in srgb, var(--p-link) 70%, transparent) !important; outline-offset: 2px !important; border-radius: 3px; } article.content a, article.content .dxbl-btn, .sidebar-panel .dxbl-accordion-item-content, article.content .card, article.content .dxbl-grid-table td { transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } article.content .dxbl-grid-table td, .dashboard-stat-value { font-variant-numeric: tabular-nums; } * { scrollbar-width: thin; scrollbar-color: var(--p-line-2) transparent; } /* --------------------------------------------------------------------- 3. Shell – slim Obsidian top bar, coral avatar --------------------------------------------------------------------- */ .header-container .nav-header, .header-container .nav-header .brand-bg, .header-container .navbar-initials-profile, .header-container .navbar-initials-profile .dxbl-menu, .header-container .navbar-initials-profile .dxbl-menu-bar, .header-container .navbar-initials-profile .dxbl-menu-item-list, .header-container .navbar-initials-profile dxbl-menu-item.dxbl-menu-item, .header-container .navbar-initials-profile .dxbl-btn { background: var(--brand-bar, var(--p-bar)) !important; box-shadow: none !important; } .header-container .nav-header { border-bottom: 1px solid var(--p-bar-line) !important; } .topbar-banner-text h4, .topbar-banner-text h4 b { color: #fff !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: .01em; } .header-container .navbar-initials-profile .initials-avatar { background: var(--p-coral) !important; color: #fff !important; border: 0 !important; font-weight: 600 !important; width: 34px !important; height: 34px !important; font-size: 13px !important; } /* --------------------------------------------------------------------- 4. Shell – light side menu, rounded rows, teal selection + coral marker --------------------------------------------------------------------- */ .content-container, .main, article.content, .sidebar-container dxbl-splitter-pane:last-child .dxbl-splitter-pane-content { background: var(--p-bg) !important; } /* [dx-internal] splitter / accordion */ .sidebar-container dxbl-splitter.dxbl-splitter { border: 0 !important; background: var(--p-bg) !important; } .sidebar-container dxbl-splitter-pane:first-child, .sidebar-container dxbl-splitter-pane:first-child .dxbl-splitter-pane-content, .sidebar-panel, .sidebar-panel .dxbl-accordion, .sidebar-panel .dxbl-accordion-container, .sidebar-panel .dxbl-accordion-items-container, .sidebar-panel .dxbl-accordion-group, .sidebar-panel .dxbl-accordion-group-header, .sidebar-panel .dxbl-accordion-group-body, .footer-container { background: var(--p-surface) !important; } .sidebar-container dxbl-splitter-pane:first-child .dxbl-splitter-pane-content { border-right: 1px solid var(--p-line) !important; } .sidebar-container dxbl-splitter-separator.dxbl-splitter-separator { background: var(--p-bg) !important; border: 0 !important; } .sidebar-panel { padding-top: 6px; } .sidebar-panel .dxbl-accordion-group-header { background: transparent !important; padding: 1px 8px !important; position: relative; } /* expand chevron moves to the right; empty chevron slots are removed so every top-level item lines up at the left */ .sidebar-panel .dxbl-group-expand-btn.dxbl-invisible { display: none !important; } .sidebar-panel .dxbl-accordion-group-header > .dxbl-group-expand-btn { position: absolute; right: 12px; opacity: .6; } .sidebar-panel .dxbl-accordion-group-header > .dxbl-accordion-item-content { flex: 1 1 auto; margin: 1px 0 !important; } .sidebar-panel .dxbl-accordion-item-content { padding: 6px 10px !important; border-radius: 6px !important; color: var(--p-ink) !important; font-size: 12.5px !important; } .sidebar-panel .dxbl-accordion-item-content .dxbl-image, .sidebar-panel .dxbl-accordion-item-content i { color: var(--p-ink-2) !important; } .sidebar-panel .dxbl-accordion-item-content:hover { background: var(--p-hover) !important; } .sidebar-panel .dxbl-accordion-group-body .dxbl-accordion-item-content { color: var(--p-ink-2) !important; font-size: 12px !important; padding: 4px 8px 4px 30px !important; margin: 1px 8px !important; } .sidebar-panel a.dxbl-accordion-item-content.dxbl-active, .sidebar-panel .dxbl-accordion-item.dxbl-active > .dxbl-group-header .dxbl-accordion-item-content, .sidebar-panel .dxbl-accordion-group-body a.dxbl-accordion-item-content.dxbl-active { background: var(--p-sel) !important; color: var(--p-sel-ink) !important; font-weight: 600 !important; box-shadow: inset 3px 0 0 var(--p-coral) !important; } .sidebar-panel a.dxbl-accordion-item-content.dxbl-active .dxbl-image, .sidebar-panel a.dxbl-accordion-item-content.dxbl-active i { color: var(--p-sel-ink) !important; } .footer-container, .footer-container * { color: var(--p-ink-2) !important; font-size: 11px !important; } .footer-container { border-top: 1px solid var(--p-line) !important; }