/* * GBHub-specific overrides layered on top of the vendored DefaultDB/LoanDB * theme (loaded last in base.html). Kept separate so the vendored stylesheets * stay pristine until gbf-common owns them (Phase 6). */ /* * Entrance (auth) pages render with no sidebar, but the theme's footer is a * fixed bar hard-pinned to left:260px (the sidebar width), so on these pages it * is pushed off the left edge. `auth-body` is set on for entrance pages * (see account/base_card.html); pull the footer back to the edge for them. */ .auth-body .page-footer { left: 0; } /* * No phantom vertical scrollbar on the full-height entrance card. The theme's * `.main-wrapper .main-content` adds top padding AND a 62px bottom margin * (reserving room for the fixed footer); on an auth page whose content is * already 100vh tall, both push the page past the viewport. Zero them on * entrance pages — the three-class selector outranks the theme's two-class rules. */ .auth-body .main-wrapper.auth-page .main-content { padding: 0; margin-bottom: 0; } /* * Apps dropdown grid. The columns use custom `app-col` classes (one per * unlocked product, count unknown ahead of time) instead of Bootstrap's * fixed `row-cols-*`/`col`. Bootstrap's `.row > *` defaults every direct * child to `width: 100%`, so without an override each product wraps onto its * own line and the grid renders vertically. Lay them out as equal-width * columns on a single row instead. */ .dropdown-apps .apps-grid { flex-wrap: nowrap; } .dropdown-apps .apps-grid > .app-col { flex: 1 1 0; width: auto; min-width: 96px; } /* * TOTP activation QR code (templates/mfa/totp/activate_form.html). * allauth renders the code as an SVG with only the dark modules and a * transparent background (qrcode's SvgPathImage), so on the dashboard's dark * themes it loses contrast against the page and authenticator apps struggle * to scan it. Force a solid white card behind it regardless of theme. */ .qr-code-frame { display: inline-block; background: #fff; padding: 16px; border-radius: 8px; } .qr-code-frame img { display: block; width: 200px; height: 200px; }