merge styles for register and login in main

This commit is contained in:
ZeKap 2024-02-22 14:03:13 +01:00
parent fad786ffb7
commit b57b3d0afc
No known key found for this signature in database
GPG Key ID: 8D70E0631DD5792A
3 changed files with 40 additions and 80 deletions

View File

@ -96,3 +96,41 @@ footer {
font-size: large;
}
}
main:is(#login, #register) > form {
display: flex;
flex-direction: column;
gap: var(--size-max);
justify-content: center;
align-items: center;
min-width: 300px;
max-width: 10rem;
justify-content: center;
align-items: center;
& > label:not(label[for="registration_form_agreeTerms"]) {
display: none;
}
& > :is(input[type="text"], input[type="password"]) {
height: var(--size-max);
border-radius: var(--radius);
padding: calc(var(--size-max) / 2) var(--size-max);
border: none;
background: var(--grey);
width: 80%;
}
& > input[type="submit"] {
cursor: pointer;
background: var(--light);
border: none;
border-radius: var(--radius);
box-shadow: var(--shadow);
color: var(--dark);
padding: calc(var(--size-max) - 8px) 0;
width: 70%;
height: 20%;
transition: all ease-out 0.2s;
&:hover {
box-shadow: var(--shadow-hover);
}
}
}

View File

@ -1,44 +1,5 @@
{% extends 'base.html.twig' %} {% block title %}Register{% endblock %} {% block
body %}
<style>
main#register > form {
display: flex;
flex-direction: column;
gap: var(--size-max);
justify-content: center;
align-items: center;
min-width: 300px;
max-width: 10rem;
justify-content: center;
align-items: center;
& > label:not(label[for="registration_form_agreeTerms"]) {
display: none;
}
& > :is(input[type="text"], input[type="password"]) {
height: var(--size-max);
border-radius: var(--radius);
padding: calc(var(--size-max) / 2) var(--size-max);
border: none;
background: var(--grey);
width: 80%;
}
& > input[type="submit"] {
cursor: pointer;
background: var(--light);
border: none;
border-radius: var(--radius);
box-shadow: var(--shadow);
color: var(--dark);
padding: calc(var(--size-max) - 8px) 0;
width: 70%;
height: 20%;
transition: all ease-out 0.2s;
&:hover {
box-shadow: var(--shadow-hover);
}
}
}
</style>
<main id="register">
{{ form_start(registrationForm) }} {% if app.user %}
<div class="mb-3">
@ -77,8 +38,8 @@ body %}
<input type="submit" value="Register" />
<p>
If you don't have an account:
<a href="{{url('app_register')}}">register</a>.
If you already have an account:
<a href="{{url('app_login')}}">login</a>.
</p>
{{ form_end(registrationForm) }}

View File

@ -1,44 +1,5 @@
{% extends 'base.html.twig' %} {% block title %}Log in!{% endblock %} {% block
body %}
<style>
main#login > form {
display: flex;
flex-direction: column;
gap: var(--size-max);
justify-content: center;
align-items: center;
min-width: 300px;
max-width: 10rem;
justify-content: center;
align-items: center;
& > label {
display: none;
}
& > :is(input[type="text"], input[type="password"]) {
height: var(--size-max);
border-radius: var(--radius);
padding: calc(var(--size-max) / 2) var(--size-max);
border: none;
background: var(--grey);
width: 80%;
}
& > input[type="submit"] {
cursor: pointer;
background: var(--light);
border: none;
border-radius: var(--radius);
box-shadow: var(--shadow);
color: var(--dark);
padding: calc(var(--size-max) - 8px) 0;
width: 70%;
height: 20%;
transition: all ease-out 0.2s;
&:hover {
box-shadow: var(--shadow-hover);
}
}
}
</style>
<main id="login">
<form method="post">
{% if error %}