[UI] Fixing login and register styling, refactoring

This commit is contained in:
rainydaysavings 2020-08-21 03:16:20 +01:00 committed by Hugo Sales
parent 99ac4dc2a3
commit fe0af2caed
No known key found for this signature in database
GPG Key ID: 7D0C7EAFC9D835A0
3 changed files with 17 additions and 67 deletions

View File

@ -9,10 +9,10 @@
} }
form { form {
font-size: var(--medium-size); font-size: var(--medium-size);
background-color: #61778C30; background-color: var(--bg2);
padding: calc(2 * var(--unit-size)); padding: calc(2 * var(--unit-size));
border-radius: var(--unit-size); border-radius: var(--small-size);
box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75); border: solid 2px var(--accent-low);
} }
label { label {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
@ -27,8 +27,8 @@ input[type=password],
input[type=email] input[type=email]
{ {
margin-top: calc(var(--unit-size) * 0.5); margin-top: calc(var(--unit-size) * 0.5);
background-color: rgba(0, 0, 0, 0.30); background-color: var(--bg1);
color: #f6f6f6; color: var(--fg);
border-style: none; border-style: none;
padding: calc(var(--unit-size) * 0.5); padding: calc(var(--unit-size) * 0.5);
border-radius: calc(var(--unit-size) * 0.5); border-radius: calc(var(--unit-size) * 0.5);
@ -36,13 +36,17 @@ input[type=email]
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
width: calc(100% - var(--unit-size)); width: calc(100% - var(--unit-size));
} }
.checkbox {
display: flex;
vertical-align: center;
}
.checkbox label { .checkbox label {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-size: var(--medium-size); font-size: var(--unit-size);
font-weight: normal; font-weight: normal;
} }
.active { .active {
color: #F6F6F6 !important; color: var(--fg) !important;
font-weight: 700; font-weight: 700;
} }
input { input {
@ -50,8 +54,10 @@ input {
} }
button { button {
background-color: #f6f6f6; color: var(--fg);
padding: var(--small-size); font-size: var(--unit-size);
border: none; background-color: var(--bg1);
padding: var(--small-size) var(--main-size) var(--small-size) var(--main-size);
border: solid 2px var(--accent-low);
border-radius: var(--small-size); border-radius: var(--small-size);
} }

View File

@ -1,56 +0,0 @@
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-right: var(--small-size);
margin-left: var(--small-size);
margin-bottom: var(--unit-size);
}
form {
font-size: var(--medium-size);
background-color: #61778C30;
padding: calc(2 * var(--unit-size));
border-radius: var(--unit-size);
box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
}
label {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
width: 100%;
}
button {
margin-top: var(--unit-size);
}
input[type=text],
input[type=password],
input[type=email]
{
margin-top: calc(var(--unit-size) * 0.5);
background-color: rgba(0, 0, 0, 0.30);
color: #f6f6f6;
border-style: none;
padding: calc(var(--unit-size) * 0.5);
border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size);
margin-bottom: var(--unit-size);
width: calc(100% - var(--unit-size));
}
.checkbox label {
font-family: "Open Sans", sans-serif;
font-size: var(--medium-size);
font-weight: normal;
}
.active {
color: #F6F6F6 !important;
font-weight: 700;
}
input {
filter: none;
}
button {
background-color: #f6f6f6;
padding: var(--small-size);
border: none;
border-radius: var(--small-size);
}

View File

@ -2,7 +2,7 @@
{% block stylesheets %} {% block stylesheets %}
{{ parent() }} {{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/register/register.css') }}"> <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login.css') }}">
{% endblock %} {% endblock %}
{% block title %}Register{% endblock %} {% block title %}Register{% endblock %}