/* ===================================================================== EngageSAE Console theme — SHELL --------------------------------------------------------------------- Owns the page chrome that lives OUTSIDE the content placeholder: the fixed header, the "you are visiting" bar, the off-canvas sidebar and the content canvas. Requires the `engage-console` class on (added to the masters). Removing that one class disables everything here — the kill switch. Replaces three conflicting hardcoded sidebar offsets that existed in the prototype (padding-top: 150px / 30px, and menu.css's top: 61px) with a single measured value, --v3-header-h, published by shell.js. ===================================================================== */ /* ---------- Canvas ---------- Paint the canvas on .container_full (the element that actually spans the viewport) rather than only .content_wrapper. The prototype coloured just .content_wrapper, which left style.css's lavender #f1f3fd showing through in the gutters. */ .engage-console .container_full, .engage-console .container_fluid { background: var(--v3-canvas); } .engage-console .content_wrapper, .engage-console .content_wrapper.bg_homebefore { background: transparent; } /* ---------- Fixed header ---------- */ .engage-console .header-bg { background: #fff; border-bottom: 1px solid var(--v3-line); box-shadow: 0 2px 16px rgba(16, 40, 70, .05); } /* The header's inner row carries Bootstrap's .bg-primary, whose blue is declared !important by Bootstrap 4 — so neutralising it needs !important too. This is a deliberate, documented exception. */ .engage-console .header-bg .row.bg-primary { background: transparent !important; padding: 0 0 12px; } /* "You are visiting " becomes a pill. height:auto is required to undo `height: 22px` from Engage3Overrides.css / Engage4Overrides.css, which clips descenders. */ .engage-console .header-bg .you-are-visiting { display: inline-flex; align-items: center; justify-content: center; height: auto; background: #eef4fc; color: var(--v3-blue); font-weight: 600; font-size: 12px; letter-spacing: .5px; padding: 5px 15px; border-radius: 999px; } /* ---------- Header-height–aware offsets ---------- menu.css hardcodes `.side_bar { top: 61px }` and style.css hardcodes `.container_full { margin-top: 70px }`, while the real logged-in header is ~140px. Consume the measured value instead, falling back to the token default if shell.js has not run (no JS / old browser). */ .engage-console .container_full, .engage-console .container_fluid { margin-top: var(--v3-header-h, 70px); min-height: calc(100vh - var(--v3-header-h, 70px)); } .engage-console .side_bar { top: var(--v3-header-h, 70px); height: calc(100vh - var(--v3-header-h, 70px)); padding-top: 0; } /* ---------- Sidebar chrome ---------- Moved here from Engage3Overrides.css so Engage4 pages get the same treatment — they render identical sidebar markup against the same menu.css but were missing these fixes. */ .engage-console .sidebar-menu, .engage-console .sidebar-menu > li, .engage-console .down_menu, .engage-console .down_menu > li, .engage-console .menu_sub { list-style: outside none none; } .engage-console .sidebar-menu li { list-style: none; position: relative; } .engage-console .dcjq-parent a:hover { background: #f5f5f5; border-left: 3px solid var(--v3-blue); } .engage-console .dcjq-parent-li a { margin: 0; text-decoration: none; color: rgba(0, 0, 0, .87); display: block; padding: 10px 20px; font-size: 15px; position: relative; border-left: 6px solid transparent; transition: all .5s; } .engage-console .sidebar-menu .down_menu li a { padding: 4px 14px 5px 22px; margin-left: 10px; font-size: 14px; border-left: 6px solid transparent; } .engage-console .dcjq-parent-li > .down_menu > .menu_sub > a:hover { background: #f5f5f5; border-left: 3px solid var(--v3-blue); } .engage-console .styleicon { position: absolute; top: 17px; right: 22px; font-size: 16px; transition: all .3s; } .engage-console .substyleicon { position: absolute; top: 17px; right: 22px; font-size: 10px; transition: all .3s; } /* Content breathing room. Previously supplied by each page's .eng-v3 wrapper (padding-bottom: 26px); now global so the last card is never flush against the viewport bottom. */ .engage-console .content_wrapper > .container-fluid { padding-bottom: 26px; } /* ---------- Print ---------- The application had no @media print rules at all. Theme shadows, gradients and the canvas tint print as grey mush, so flatten them. */ @media print { .engage-console .header-bg, .engage-console .side_bar { display: none !important; } .engage-console .container_full, .engage-console .container_fluid { margin-top: 0 !important; min-height: 0 !important; background: #fff !important; } .engage-console .card, .engage-console .panel, .engage-console .v3-panel { background: #fff !important; box-shadow: none !important; border: 1px solid #ccc !important; } }