/** * PageSlider Standalone — CSS * ============================ * All styles required for the standalone pageslider library. * Extracted and consolidated from the original Inspinia/repsite CSS. * * Include this file in your BEFORE any page-specific styles. * No other CSS dependencies are required. * * CUSTOMISATION: * Override the CSS custom properties (variables) below to theme the * pageslider without editing this file: * * --pageslide-bg: Panel background colour (default: #ffffff) * --pageslide-header-bg: Header background colour (default: #ffffff) * --pageslide-footer-bg: Footer background colour (default: #ffffff) * --pageslide-body-bg: Body/content background colour (default: #e9ecef) * --pageslide-shadow: Header box-shadow (default: 0px 3px 9px …) * --pageslide-z-index: Container z-index when open (default: 1030) * --pageslide-spinner-color: Loading spinner border colour (default: #767676) */ /* =================================================================== CSS CUSTOM PROPERTIES (theming) =================================================================== */ :root { --pageslide-bg: #ffffff; --pageslide-header-bg: #ffffff; --pageslide-footer-bg: #ffffff; --pageslide-body-bg: #e9ecef; --pageslide-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.15); --pageslide-z-index: 1030; --pageslide-spinner-color: #767676; } /* =================================================================== PAGESLIDE CONTAINER The fixed-position wrapper that holds all panels off-screen. =================================================================== */ .pageslide-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; background-color: transparent; overflow: hidden; pointer-events: none; /* allow clicks to pass through when no panel is open */ } /* =================================================================== PAGESLIDE PANEL Each individual slide-in panel. =================================================================== */ .pageslide { position: absolute; top: 0; left: 100vw; /* starts off-screen to the right */ width: 100vw; height: 100vh; z-index: 0; background-color: var(--pageslide-bg); pointer-events: auto; /* panels themselves receive clicks */ } /* Hidden by default — only shown when .open is applied */ body .pageslide-container > .pageslide:not(.open) { display: none; } /* Visible when open */ body.pageslide-open .pageslide-container > .pageslide.open { display: block; z-index: 1; } /* =================================================================== PAGE-WRAPPER (scrollable inner container) =================================================================== */ .pageslide > .page-wrapper { display: block; width: 100%; height: 100%; overflow: auto; /* Reserve scrollbar space consistently so the content width never changes when a vertical scrollbar appears/disappears between steps. Falls back gracefully in older browsers (property is simply ignored). */ scrollbar-gutter: stable; } /* =================================================================== PAGE-HEADER / PAGE-BODY / PAGE-FOOTER Standard three-section layout inside each panel. =================================================================== */ .pageslide .page-header, .pageslide .page-body, .pageslide .page-footer { width: 100%; margin-left: auto; margin-right: auto; } /* =================================================================== CONTAINER — let Bootstrap's responsive max-widths apply naturally. Only reset padding/margin so host-page overrides don't break layout. =================================================================== */ .pageslide .container { width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } .pageslide .page-header { padding-top: 0.5rem; padding-bottom: 0.5rem; min-height: 60px; background-color: var(--pageslide-header-bg); box-shadow: var(--pageslide-shadow); } .pageslide .page-header.header-fixed { position: fixed; z-index: 1; top: 0; left: inherit; } .pageslide .page-header.header-sticky { position: sticky; z-index: 9999999; top: 0px; left: inherit; } .pageslide .page-footer { background-color: var(--pageslide-footer-bg); } .pageslide .page-footer.footer-fixed { position: fixed; bottom: 0; left: inherit; } .pageslide .page-body, .pageslide .page-footer { padding-top: 2.5rem; padding-bottom: 2.5rem; } .pageslide .page-body { background-color: var(--pageslide-body-bg); } /* =================================================================== NAVBAR-BRAND (optional logo area inside header) =================================================================== */ .pageslide .page-header .navbar-brand { height: 45px; } @media (min-width: 1400px) { .pageslide .page-header .navbar-brand { height: 60px; } } .pageslide .page-header .navbar-brand > img { width: auto; height: 100%; } /* =================================================================== BODY STATE CLASSES Applied to by the JS library to control scroll-lock and container visibility. =================================================================== */ body.pageslide-activating { overflow: hidden; } body.pageslide-open { overflow: hidden; /* Prevent layout shift when scrollbar disappears */ padding-right: 15px; } body.pageslide-open .pageslide-container { z-index: var(--pageslide-z-index); pointer-events: auto; } /* =================================================================== LOADING OVERLAY Full-screen spinner shown while panel content loads. =================================================================== */ .pageslide-loading-overlay { position: fixed; z-index: 1200; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #ffffff; } .pageslide-spinner { width: 32px; height: 32px; border-width: 3px; border-style: solid; border-color: var(--pageslide-spinner-color) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); border-radius: 50%; animation: pageslide-spin 0.6s linear infinite; } @keyframes pageslide-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* =================================================================== UTILITY: Close button default styling (optional) Apply the class "pageslide-close-btn" for a pre-styled close button. =================================================================== */ .pageslide-close-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem 1rem; font-size: 0.9rem; font-family: inherit; color: #333; background-color: transparent; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; transition: background-color 150ms ease; } .pageslide-close-btn:hover { background-color: #f0f0f0; }