/* 1) Ensure the page container is full‐height */ html, body { height: 100%; margin: 0; padding: 0; } /* 2) Make the background cover the entire viewport */ body { background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; } /* 3) Keep your login form container above the background */ .container { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.85); /* optional white overlay for readability */ padding: 2rem; } /* logo styling */ .app-logo { display: block; /* center it */ margin: 0 auto 1rem; /* spacing below */ max-width: 60px; /* adjust to taste */ width: auto; /* preserves aspect ratio */ height: auto; /* you can also set a fixed height: height: 60px; object-fit: contain; */ } /* overlay via pseudo-element */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; /* ligger under .container som har z-index:1 */ } /* ingen dimming */ body.dim-none::before { display: none; } /* hvit dimming (50% hvit) */ body.dim-white::before { background-color: rgba(255,255,255,0.5); } /* mørk dimming (50% svart) */ body.dim-dark::before { background-color: rgba(0,0,0,0.5); } /* style the footer inside the box */ .container-inner .login-footer { margin-top: 2rem; font-size: 0.875rem; color: #555; text-align: center; } /* ------------ defaults ------------ */ body.login-layout-centered { padding-top:10%; } /* keep the “centered” look if no special class is present */ .login-layout-centered .container { /* Bootstrap .mt-5 already gives vertical spacing */ margin: 5% auto; max-width: 400px; border-radius: 0.5rem; } /* ------------ sidebar left ------------ */ .login-layout-sidebar_left { display: flex; /* make its children (the .container) a flex item */ } .login-layout-sidebar_left .container, .login-layout-sidebar_right .container { width: 400px; /* fixed sidebar width */ height: 100%; /* full viewport height */ margin: 0; /* flush against top/left */ padding-top: 2rem; /* or whatever vertical padding you want */ } /* ------------ sidebar right ------------ */ .login-layout-sidebar_right { display: flex; flex-direction: row-reverse; /* mirror the layout */ } /* .login-layout-sidebar_right .container { width: 300px; height: 100%; margin: 0; padding-top: 2rem; } */ .login-layout-sidebar_left .container-inner, .login-layout-sidebar_right .container-inner { margin-top:30%; } /* Collapse sidebar into full-width on small devices */ @media (max-width: 576px) { /* Make drop out of flex so container behaves normally */ .login-layout-sidebar_left, .login-layout-sidebar_right { display: block; } /* Give the container full width and re-center it */ .login-layout-centered .container, .login-layout-sidebar_left .container, .login-layout-sidebar_right .container { width: 100% !important; margin: 0% auto; /* same as centered layout */ max-width: 600px !important; /* optional cap */ height: 100vh; /* let it size to content */ padding-top: 2rem; } body.login-layout-centered { padding-top:0%; } }