/* * ========================================================================= * COMPONENT: Custom Theme — Dark/Light Mode * FILE: powerpages/branded/css/custom-theme.css * VERSION: 1.2.2 * SOURCE: Power Pages branded portal global stylesheet * PURPOSE: CSS custom properties for dark/light theming across all pages * * DEPLOYMENT: * Upload this file via Power Pages Studio → Styling → Custom CSS * It loads globally on every portal page — no per-page needed. * * USAGE: * Pages use var(--property-name) in their scoped styles. * The active theme is controlled by data-theme="dark"|"light" on . * See theme-toggle.html content snippet for the toggle button. * * NOTES: * - Default theme is "dark" (set by theme-toggle snippet on page load) * - User preference is persisted in localStorage("pp-theme") * - Transitions are applied for smooth switching * - Microsoft Fluent-aligned light palette * * CHANGELOG: * v1.2.2 2026-02-14 Nuclear label fix — html[data-theme] + label selectors * with hardcoded #E6EDF5 / #1B1B1B (not CSS vars) to beat * portalbasictheme.css muted label color * v1.2.1 2026-02-14 High-specificity Entity Form overrides — portal CSS uses * deep selectors (.entity-form .tab .section .cell .info label) * that beat generic rules; added matching chains + nuclear * .columnBlockLayout fallback * v1.2.0 2026-02-14 Add comprehensive OOB Entity Form styling for dark/light * mode — labels, validation, radio/checkbox, lookup controls, * tabs, modals, tables, datepickers, alerts, tooltips * v1.1.0 2026-02-14 Add global body::before/::after ambient glow orbs; * remove orphan hl-glow-top/hl-glow-bottom light overrides * v1.0.0 2026-02-12 Initial dark/light theming with CSS custom properties, * portal chrome overrides, Fluent-aligned palettes * ========================================================================= */ /* ---- Root Tokens ---- */ /* CSS-VERSION: 2026-02-14-v17 — if you see this in DevTools, the file is loaded */ :root { --transition-speed: 0.2s ease-in-out; --font-primary: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --shadow-md: 0 4px 12px rgba(0,0,0,0.15); --shadow-lg: 0 8px 24px rgba(0,0,0,0.2); } /* ======================================================================== DARK THEME (Default) ======================================================================== */ html[data-theme="dark"] { /* Backgrounds */ --bg-primary: #000000; --bg-secondary: #0B0F17; --bg-card: #111826; --bg-input: #0D1320; --bg-hover: #1A2233; --bg-modal-overlay: rgba(0, 0, 0, 0.7); /* Text */ --text-primary: #E6EDF5; --text-secondary: #A9B8CC; --text-muted: #5E6E85; --text-inverse: #1B1B1B; /* Accent */ --accent-primary: #00B7FF; --accent-secondary: #0094D6; --accent-glow: rgba(0, 183, 255, 0.35); --accent-hover: #33C5FF; /* Links */ --link: #1ED6FF; --link-hover: #6FE6FF; /* Borders */ --border: #1A2233; --border-focus: #00B7FF; /* Status Colors */ --success: #2ECC71; --success-bg: rgba(46, 204, 113, 0.15); --warning: #F4A623; --warning-bg: rgba(244, 166, 35, 0.15); --danger: #E74C3C; --danger-bg: rgba(231, 76, 60, 0.15); --info: #00B7FF; --info-bg: rgba(0, 183, 255, 0.15); /* Table */ --table-header-bg: #0B0F17; --table-row-hover: #1A2233; --table-stripe: rgba(255, 255, 255, 0.02); /* Scrollbar */ --scrollbar-track: #0B0F17; --scrollbar-thumb: #1A2233; } /* ======================================================================== LIGHT THEME (Microsoft / Fluent aligned) ======================================================================== */ html[data-theme="light"] { /* Backgrounds */ --bg-primary: #FFFFFF; --bg-secondary: #F3F6FB; --bg-card: #FFFFFF; --bg-input: #F3F6FB; --bg-hover: #E8ECF1; --bg-modal-overlay: rgba(0, 0, 0, 0.4); /* Text */ --text-primary: #1B1B1B; --text-secondary: #3A3A3A; --text-muted: #6B6B6B; --text-inverse: #FFFFFF; /* Accent */ --accent-primary: #0078D4; --accent-secondary: #005A9E; --accent-glow: rgba(0, 120, 212, 0.2); --accent-hover: #106EBE; /* Links */ --link: #0067C0; --link-hover: #004E8C; /* Borders */ --border: #D0D7E2; --border-focus: #0078D4; /* Status Colors */ --success: #107C10; --success-bg: rgba(16, 124, 16, 0.1); --warning: #CA5010; --warning-bg: rgba(202, 80, 16, 0.1); --danger: #D13438; --danger-bg: rgba(209, 52, 56, 0.1); --info: #0078D4; --info-bg: rgba(0, 120, 212, 0.1); /* Table */ --table-header-bg: #F3F6FB; --table-row-hover: #E8ECF1; --table-stripe: rgba(0, 0, 0, 0.02); /* Scrollbar */ --scrollbar-track: #F3F6FB; --scrollbar-thumb: #D0D7E2; } /* ======================================================================== BASE STYLES ======================================================================== */ body { margin: 0; background-color: var(--bg-primary) !important; color: var(--text-primary) !important; font-family: var(--font-primary); transition: background-color var(--transition-speed), color var(--transition-speed); } /* ---- Global Background Glow Effects ---- Ambient glow orbs that appear on every page. Uses pseudo-elements so no per-page HTML markup is needed. The header and footer have their own opaque/glass backgrounds so they naturally sit above these effects. ------------------------------------------------ */ body::before { content: ''; position: fixed; top: -10%; left: 50%; transform: translateX(-50%); width: 1000px; height: 600px; border-radius: 50%; background: var(--accent-primary, #00d1ff); opacity: 0.07; filter: blur(120px); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; bottom: 0; right: 0; width: 500px; height: 500px; border-radius: 50%; background: var(--accent-primary, #00d1ff); opacity: 0.03; filter: blur(100px); pointer-events: none; z-index: 0; } /* Light mode — mute the glow orbs on white backgrounds */ html[data-theme="light"] body::before { opacity: 0.04; } html[data-theme="light"] body::after { opacity: 0.02; } /* ======================================================================== POWER PAGES PORTAL CHROME OVERRIDES These override the default portal header, footer, nav, and content areas so the entire page respects the active theme. ======================================================================== */ /* ---- Header / Navbar ---- */ .navbar, .navbar-inverse, .navbar-static-top, .navbar-default { background-color: rgba(11, 15, 23, 0.85) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: none !important; border-bottom: 1px solid var(--border) !important; box-shadow: 0 1px 30px rgba(0, 0, 0, 0.3); transition: background-color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed); min-height: 56px; } /* Light mode navbar — lighter glass effect */ html[data-theme="light"] .navbar, html[data-theme="light"] .navbar-inverse, html[data-theme="light"] .navbar-static-top, html[data-theme="light"] .navbar-default { background-color: rgba(255, 255, 255, 0.85) !important; box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08); border-bottom-color: var(--border) !important; } /* Navbar container — tighter spacing */ .navbar .container { max-width: 1280px; } .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a, .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a, .navbar a { color: var(--text-primary) !important; transition: color var(--transition-speed), background-color var(--transition-speed); font-family: var(--font-primary); font-weight: 500; font-size: 14px; letter-spacing: 0.01em; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar a:hover { color: var(--accent-primary) !important; background-color: transparent !important; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover { background-color: transparent !important; color: var(--accent-primary) !important; border-bottom: 2px solid var(--accent-primary); } /* Mobile toggle button */ .navbar-inverse .navbar-toggle, .navbar-default .navbar-toggle { border-color: var(--border) !important; border-radius: var(--radius-sm); margin-top: 11px; } .navbar-inverse .navbar-toggle:hover, .navbar-default .navbar-toggle:hover { background-color: var(--bg-hover) !important; } .navbar-inverse .navbar-toggle .icon-bar, .navbar-default .navbar-toggle .icon-bar { background-color: var(--text-primary) !important; } .navbar-inverse .navbar-collapse, .navbar-default .navbar-collapse { border-color: var(--border) !important; } /* Divider lines between nav items */ .navbar-nav > .divider-vertical { border-left-color: var(--border) !important; opacity: 0.5; } /* Search icon — accent glow on hover */ .navbar .navbar-icon .glyphicon-search { color: var(--text-primary) !important; transition: color var(--transition-speed), text-shadow var(--transition-speed); } .navbar .navbar-icon:hover .glyphicon-search { color: var(--accent-primary) !important; text-shadow: 0 0 8px var(--accent-glow); } /* Skip-to-content — keep accessible but hidden */ .skip-to-content a { color: var(--text-primary) !important; background-color: var(--bg-card) !important; } /* ---- Dropdown menus in navbar ---- */ .navbar .dropdown-menu, .dropdown-menu { background-color: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg); padding: 8px 0 !important; margin-top: 4px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .dropdown-menu > li > a { color: var(--text-primary) !important; padding: 8px 20px !important; font-size: 14px; transition: background-color var(--transition-speed), color var(--transition-speed); } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--bg-hover) !important; color: var(--accent-primary) !important; } .dropdown-menu .divider { background-color: var(--border) !important; margin: 4px 12px !important; } /* Search dropdown — wider, themed input */ .dropdown-search { min-width: 320px !important; padding: 16px !important; border-radius: var(--radius-lg) !important; } .dropdown-search .form-control, .dropdown-search input[type="text"] { background-color: var(--bg-input) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; color: var(--text-primary) !important; font-family: var(--font-primary); padding: 10px 14px !important; } .dropdown-search .form-control:focus { border-color: var(--accent-primary) !important; box-shadow: 0 0 0 2px var(--accent-glow) !important; outline: none !important; } .dropdown-search .btn { background-color: var(--accent-primary) !important; border: none !important; border-radius: var(--radius-sm) !important; color: #000 !important; font-weight: 700; } .dropdown-search .btn:hover { background-color: var(--accent-hover) !important; } /* Username display */ .navbar .username { font-weight: 600; font-size: 13px; } /* Caret styling */ .navbar .caret { border-top-color: var(--text-muted) !important; border-bottom-color: var(--text-muted) !important; opacity: 0.7; } /* ---- Footer ---- */ footer, footer[role="contentinfo"], .footer-bottom { background-color: var(--bg-secondary) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; transition: background-color var(--transition-speed), color var(--transition-speed); } footer a { color: var(--link) !important; } footer a:hover { color: var(--link-hover) !important; } footer p, footer span, footer .copyrightname { color: var(--text-secondary) !important; } /* ---- Page content wrappers ---- */ .wrapper, .body-content, .content-wrapper, .page-content, .content_block, .main-inner, #mainContent, #content-container, section, main { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; transition: background-color var(--transition-speed), color var(--transition-speed); } .container, .sectionBlockLayout, .columnBlockLayout, .row.sectionBlockLayout, .col-md-12.columnBlockLayout, .page-heading, [class*="sectionBlockLayout"], [class*="columnBlockLayout"] { background-color: transparent !important; color: var(--text-primary) !important; transition: background-color var(--transition-speed), color var(--transition-speed); } /* Nuclear option: any element with inline style background white/f* */ .container-fluid { background-color: var(--bg-primary) !important; } /* ---- Breadcrumbs ---- */ .breadcrumb { background-color: transparent !important; color: var(--text-muted); } .breadcrumb > li + li:before { color: var(--text-muted); } .breadcrumb > .active { color: var(--text-secondary); } /* ---- Panel / Well overrides ---- */ .panel, .well { background-color: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .panel-heading { background-color: var(--bg-secondary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* ---- Generic text/heading overrides ---- */ h1, h2, h3, h4, h5, h6 { color: var(--text-primary); transition: color var(--transition-speed); } p { color: var(--text-primary); } /* ---- Form controls (portal defaults) ---- */ .form-control { background-color: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border) !important; transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed); } .form-control:focus { border-color: var(--border-focus) !important; box-shadow: 0 0 0 2px var(--accent-glow) !important; } /* ---- Bootstrap button overrides ---- */ /* Scoped to .btn (Bootstrap) only — bare