/* =====================================================================
Operate EMBEDDED (chromeless) mode — angular-in-react iframe spike
---------------------------------------------------------------------
Active ONLY when is set by the embed bridge
(which runs when the page is loaded with ?embedded=1). Inert otherwise,
so this file is safe to ship loaded unconditionally.
Purpose: hide the AngularJS master-page chrome (top nav, portal nav,
footer, scroll-to-top) so the React shell can supply menu + header,
and reclaim the space the fixed top bar used to occupy.
Reversible: remove the to this file + the bridge block in
OperateMasterPage.Master to fully revert.
===================================================================== */
/* --- hide the chrome ------------------------------------------------- */
html.embedded #top-nav, /* Menu.ascx – white fixed header bar */
html.embedded #topmainMenu, /* TopMenu.ascx (literal id, if present)*/
html.embedded .topmain-menu, /* TopMenu.ascx nav — id is runat=server */
html.embedded .modern-ui--top-menu,/* the menu
inside it */
html.embedded > body > footer, /* Footer.ascx */
html.embedded #scroll-to-top { /* back-to-top affordance */
display: none !important;
}
/* --- reclaim the space the fixed top bar reserved -------------------- */
html.embedded #wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Operate offsets content for the ~50px fixed top-nav in several places;
neutralise the common ones in embedded mode. Add more here if a screen
still shows a gap at the top. */
html.embedded body {
padding-top: 0 !important;
}
html.embedded #cassiePortal,
html.embedded .is_aspx,
html.embedded [ng-view] {
margin-top: 0 !important;
}
/* --- record/view screens: don't fix the header + tabs ---------------- */
/* On record views the page-header and tab bar are position:fixed and
dynamically sized; in the chromeless frame the first content tile clips
underneath them. They live inside the scroll container, so letting them
flow inline (static) puts header → tabs → content in normal order with no
overlap — robust, no runtime measurement. They scroll with the content. */
html.embedded .page-header__top,
html.embedded .link-bar-overflow {
position: static !important;
top: auto !important;
}
/* --- calendar screen: un-fix the page-title banner (keep it visible) -- */
/* The Calendar's page-title banner (.title-sections-angular — the "Calendar"
heading + Show/Hide-Filters toggle) is position:fixed; left:0; width:100%;
z-index:999999 (titlesections.less). In the chromeless frame that pins it to
the viewport top under the React shell header (clips it) and the fixed
full-bleed width reads as "too wide". Same fix as the record-view header
above: let it flow inline (static) and drop the fixed left/width so it sizes
to the content column like the original. The banner stays visible, then
filters → scheduler follow in normal order. Scoped to #calendar-screen. */
html.embedded #calendar-screen .title-sections-angular {
position: static !important;
top: auto !important;
left: auto !important;
width: auto !important;
z-index: auto !important;
padding-top: 18px !important; /* top breathing room — the un-fixed band sat flush under the shell header; matches the home/list headers */
}
/* With the banner now flowing inline (above the panel) it no longer overlaps the
panel, so Operate's compensating negative/positive top offsets — added to tuck
content under the *fixed* banner — now misplace it:
• `.calendar-framework` carries a JS-injected inline `margin-top:-30px` that
pulls the white `.panel.panel-body` up 30px INTO the 46px title band, so the
panel's white bg paints over the "Calendar" heading + Hide-Filters button.
(Inline but NOT `!important`, so a stylesheet `!important` overrides it.)
• `#filter-content` (`.dhtmlxcalendar #filter-content`, operateui) + `.menu-actions`
(calendar.less) carry `margin-top:46px`, which became a dead white gap.
Zero all three in the frame so title → filters → scheduler stack flush, no overlap. */
html.embedded #calendar-screen .calendar-framework,
html.embedded #calendar-screen #filter-content,
html.embedded #calendar-screen .menu-actions {
margin-top: 0 !important;
}
/* --- calendar edit/preview pages: drop the fixed-banner clearances ------ */
/* Booking edit + Booking Confirmation/Provisional/Cancellation/Function
Sheet previews render INSIDE #calendar-screen, so the calendar banner
un-fix above puts THEIR .title-sections-angular in normal flow too
(console-probed: banner static, 0-76, then the card starts at 148).
The clearances tuned for a FIXED banner then become dead white space:
• the skin's `.edit-section:first-child` / `.edit-navbar`
margin-top:72px (operate-v2-skin.css "clear the taller fixed title
banner") — 72px of nothing under the in-flow banner;
• `.ip--content-wrapper` margin-top:75px on the booking-preview
variants (modern-ui.css ~24827) — same compensation, doubled.
Neutralise both, keeping a 16px breathing gap under the banner. Same
move as the .calendar-framework/#filter-content zeroing above. */
html.embedded #calendar-screen .edit-wrapper .edit-wrapper-content .edit-section:first-child,
html.embedded #calendar-screen .edit-wrapper .edit-navbar {
margin-top: 16px !important;
}
html.embedded #calendar-screen .invoice-preview-wrapper .ip--content-wrapper {
margin-top: 0 !important;
}
/* --- preview pages WITH an edit toolbar: let the Froala toolbar flow ---- */
/* Booking Confirmation / Provisional / Cancellation, Function Sheet and
Licence previews are the only invoice-preview flows with a Froala toolbar,
and renderIP() (render-modernui.js ~1471) pins it absolutely at a
hard-coded `top:193` — full-chrome maths (~50 top-nav + menu + banner).
Chromeless, that parks the toolbar ~100px below the banner and everything
under it inherits the dead white band. (Credit note/invoice previews skip
that branch entirely — no toolbar — which is why they look right.) The
value is inline but NOT !important, so override here: let the toolbar flow
in normal order above the document, same approach as the record-view
header + calendar banner above. It scrolls with the content. */
html.embedded .ip--content .fr-toolbar.fr-desktop.fr-top.fr-basic {
position: static !important;
top: auto !important;
}