Files
metabuilder/scss/components/layout/auth-layout.module.scss
2026-03-09 22:30:41 +00:00

78 lines
1.5 KiB
SCSS

/**
* Auth Layout Styles
* Shared styling for login/register pages - Material Design 3
*/
.authPage {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: var(--spacing-3);
background: var(--mat-sys-surface);
}
.authCard {
max-width: 420px;
width: 100%;
padding: var(--spacing-5) var(--spacing-4);
background: var(--mat-sys-surface-container-low);
border-radius: var(--mat-sys-corner-extra-large);
box-shadow: var(--mat-sys-level2);
@media (max-width: 480px) {
padding: var(--spacing-4) var(--spacing-2-5);
box-shadow: none;
background: transparent;
}
}
.authHeader {
text-align: center;
margin-bottom: var(--spacing-4);
}
.authTitle {
font-size: 1.75rem;
font-weight: 500;
color: var(--mat-sys-on-surface);
margin: 0 0 var(--spacing-1);
letter-spacing: -0.5px;
}
.authSubtitle {
font-size: 0.95rem;
color: var(--mat-sys-on-surface-variant);
margin: 0;
}
.authFooter {
text-align: center;
margin-top: var(--spacing-3);
padding-top: var(--spacing-2-5);
border-top: 1px solid var(--mat-sys-outline-variant);
font-size: 0.875rem;
color: var(--mat-sys-on-surface-variant);
p {
margin: 0;
}
}
.authLink {
color: var(--mat-sys-primary);
text-decoration: none;
font-weight: 500;
transition: color var(--mat-sys-motion-duration-short4) var(--mat-sys-motion-easing-standard);
&:hover {
text-decoration: underline;
}
&:focus-visible {
outline: 2px solid var(--mat-sys-primary);
outline-offset: 2px;
border-radius: 2px;
}
}