gomuks/web/src/ui/login/LoginScreen.css
2024-12-27 20:04:38 +02:00

71 lines
1 KiB
CSS

main.matrix-login {
max-width: 42rem;
width: 100%;
padding: 3rem 6rem;
box-sizing: border-box;
box-shadow: 0 0 1rem var(--modal-box-shadow-color);
margin: 2rem auto;
@media (width < 800px) {
max-width: 38rem;
padding: 2rem 4rem;
width: calc(100% - 4rem);
}
@media (width < 500px) {
padding: 1rem;
box-shadow: none;
margin: 0 !important;
width: 100%;
}
h1 {
margin: 0 0 2rem;
}
h1, h2, h3 {
text-align: center;
}
div.buttons {
display: flex;
gap: .5rem;
}
button, input {
margin-top: .5rem;
padding: 1rem;
font-size: 1rem;
width: 100%;
display: block;
border-radius: .25rem;
box-sizing: border-box;
}
input {
border: 1px solid var(--primary-color);
&:hover {
outline: 1px solid var(--primary-color);
}
&:focus {
outline: 3px solid var(--primary-color);
}
}
form {
margin: 2rem 0;
}
button {
font-weight: bold;
}
div.error {
border: 2px solid var(--error-color);
border-radius: .25rem;
padding: 1rem;
margin-top: .5rem;
}
}