@use "../../scss/vars" as v; // --------------------------------------------------------------------------- // Global bottom console drawer // // Mounts at app-shell level (LayoutComponent), sibling of . // No wrapper chrome — the ConsoleComponent's own toolbar acts as the header. // When closed, height is 0 so the open/close transition animates smoothly. // When open, 30vh just above the footer toolbar. // --------------------------------------------------------------------------- :root { --p3xr-console-drawer-height: 30vh; } #p3xr-console-drawer { position: fixed; left: 5px; right: calc(5px + var(--p3xr-scroll-gutter, 0px)); bottom: var(--p3xr-layout-footer-height, 48px); height: 0; overflow: hidden; background: var(--p3xr-content-bg, var(--mat-app-background-color)); color: var(--mat-app-text-color, inherit); border: 0 solid var(--p3xr-accordion-bg); border-radius: 4px 4px 0 0; z-index: 8; transition: height 150ms ease-out; display: flex; flex-direction: column; &.p3xr-drawer-open { height: var(--p3xr-console-drawer-height); border-width: 1px; } } #p3xr-console-drawer-sizer { position: absolute; top: 0; left: 0; right: 0; height: 5px; cursor: ns-resize; z-index: 3; background-color: transparent; transition: background-color 0.15s ease, filter 0.15s ease; &:hover, &.p3xr-resizer-active { background-color: var(--p3xr-accordion-bg); } body.p3xr-theme-dark &:hover { filter: brightness(1.5); } body.p3xr-theme-dark &.p3xr-resizer-active { filter: brightness(2); } body.p3xr-theme-light &:hover { filter: brightness(0.75); } body.p3xr-theme-light &.p3xr-resizer-active { filter: brightness(0.5); } } // Suppress the height transition while the user is actively dragging so the // drawer follows the cursor 1:1 instead of easing toward each intermediate value. html.p3xr-console-drawer-resizing #p3xr-console-drawer.p3xr-drawer-open { transition: none; } #p3xr-console-drawer-body { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; // The embedded console component must fill the body p3xr-console { display: block; height: 100%; width: 100%; } } .p3xr-console-drawer-empty { padding: 16px 20px; font-size: 13px; line-height: 1.6; display: flex; flex-direction: column; gap: 6px; .p3xr-console-drawer-empty-row { white-space: pre-wrap; } .p3xr-console-drawer-empty-title { font-size: 15px; font-weight: 500; margin-bottom: 4px; } .p3xr-console-drawer-empty-hint { opacity: 0.7; font-size: 12px; } } // --------------------------------------------------------------------------- // Footer Console button reuses the header's .p3xr-nav-active style when the // drawer is open — no custom styling needed here. // --------------------------------------------------------------------------- // Page content padding when drawer is open // // When the drawer is open, page content must not disappear behind it. // LayoutComponent toggles a class on the root; pages read the value. // --------------------------------------------------------------------------- html.p3xr-console-drawer-open { --p3xr-console-drawer-height-active: var(--p3xr-console-drawer-height); } html:not(.p3xr-console-drawer-open) { --p3xr-console-drawer-height-active: 0px; }