Custom CSS

The Identity, Colors, and Hero Panel sections cover most login page customization. If you need to go further than those allow — fine-tuning spacing, adding shadows or borders, changing fonts, or restyling a specific element the color pickers don’t reach — Custom CSS lets you write raw CSS that overrides the page’s existing .qa-* classes. It’s injected after the base stylesheet on every login and signup page for the project, so any rule you write here wins over the default styling.

A reference table lists the available .qa-* classes you can target (e.g. .qa-login-container, .qa-hero-panel, .qa-input, .qa-submit-button).
Four Mobile Layout Presets — Frosted Glass, Solid Card, Light Glass, Full Background — append ready-made CSS to get you started.
The editor is Monaco-based, with an Insert starter template button (shown when empty) and a View base stylesheet button that opens the existing rules your CSS is injected after, read-only.
CSS is validated live as you type; a syntax error blocks Save until fixed.
Maximum size is 64 KB, with a warning as you approach the limit.

Custom CSS section showing the class reference, mobile presets, and the CSS editor

Common issues

Save button is disabled — There’s a live syntax error in your CSS; check the inline error message before saving.
CSS not taking effect — Confirm the selector you’re targeting matches one of the .qa-* classes in the reference table; check View base stylesheet to see what you’re overriding.