Commit 5071e209 authored by Gaëlle Morin's avatar Gaëlle Morin Committed by Jean-Baptiste Pasquier

update: fix css

parent cca89292
:root {
font-size: 10px;
--body-background: #3D4057;
--bottom-input: #6157E5;
--button-color: #FFB700;
--text-color: #686B75;
--title-bottom: #E4E8ED;
--title-color: #36383B;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #3d4057;
border: none;
color: white;
background-color: var(--body-background);
color: var(--text-color);
font-family: Open Sans, sans-serif;
margin: 0;
padding: 0;
font-size: 1.6rem;
}
#content {
border: none;
height: 100%;
margin: 0;
.container {
display: flex;
height: 100vh;
}
.flex-column {
display: flex;
flex-direction: column;
}
.text-center {
text-align: center;
width: 100%;
}
input {
align-content: center;
#content {
align-items: center;
background-color: white;
border: 1px solid grey;
display: inline-flex;
height: 2.5em;
background: white;
box-shadow: 0 0 58px 10px rgba(19, 20, 27, 0.35);
justify-content: center;
margin: auto;
max-width: 600px;
padding: 5.9em;
}
#content .input-line {
margin-top: 1em;
}
#content .sib-link {
align-self: flex-end;
color: var(--text-color);
font-size: 1.4rem;
margin-top: 0.6em;
}
#content .sib-link:hover {
text-decoration: none;
transition: color 0.5s;
}
input {
-webkit-tap-highlight-color: var(--bottom-input);
background: #EDF1FA;
border: 2px solid #EDF1FA;
color: var(--text-color);
font-size: 1.6rem;
margin-top: 0.3em;
padding: 0.7em 1.2em;
width: 100%;
}
input:hover, input:active, input:focus {
border-color: #424242;
border-bottom: 2px solid var(--bottom-input);
outline: none;
}
input[type="submit"] {
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
color: black;
height: 3em;
justify-content: center;
align-self: center;
background-color: var(--button-color);
border: 1px solid var(--button-color);
border-radius: 19px;
color: white;
font-weight: bold;
height: 38px;
margin: 1em;
padding: 2px 14px;
margin-top: 1.9em;
padding: 0.1em 0.9em;
text-transform: uppercase;
transition: 0.2s;
width: 235px;
}
input[type="submit"]:hover {
background-color: #424242;
color: white;
background-color: white;
color: var(--button-color);
}
......@@ -3,12 +3,3 @@
width: 10em;
}
.sib-oidc-authorization-page .decline-button:hover {
background-color: darkred;
color: white;
width: 10em;
}
.sib-oidc-authorization-page .accept-button:hover {
background-color: darkslategrey;
color: white;
}
\ No newline at end of file
#content {
display: grid;
align-items: center;
justify-items: center;
}
#content .sib-login-title {
max-width: 800px;
}
#content .sib-login-forms {
max-width: 500px;
padding: 2rem;
border: 1px solid gray;
border-radius: 0.5rem;
}
hr.separator {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), gray, rgba(0, 0, 0, 0));
}
#content .sib-login-forms .error {
color: red;
padding: 0;
margin: 0 0 2rem 0;
padding: 0;
}
#content .sib-btn-link {
color: #80BCFF;
font-weight: bold;
padding: 1rem;
margin: 0;
text-decoration: none;
transition: color 0.5s;
}
#content .sib-btn-link:hover {
color: #99C9FF;
text-decoration: underline;
transition: color 0.5s;
}
#content .sib-login-forms .sib-form-table {
display: flex;
align-self: center;
#content .sib-login-forms>div:last-child {
margin-top: 45px;
}
#content .sib-login-form {
display: flex;
flex-direction: column;
.other-login-title {
border-bottom:1px solid var(--title-bottom);
color: var(--title-color);
display:inline-block;
font-size: 1.7rem;
font-weight: 600;
margin-bottom: 1.3em;
padding-bottom: 0.7em;
}
#content .sib-validate {
margin-left: 0;
margin-right: 0;
}
\ No newline at end of file
......@@ -12,9 +12,11 @@
</head>
<body>
<main id="content">
{% block content %}{% endblock %}
</main>
<div class="container">
<main id="content" class="flex-column">
{% block content %}{% endblock %}
</main>
</div>
</body>
</html>
{% extends "django_registration/registration_base.html" %}
{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% block title %}{% trans "Register for an account" %}{% endblock %}
{% block supplementary_css %}
<link rel="stylesheet" href="{% static 'base.css' %}"/>
{% endblock %}
{% block content %}
<table>
<form method='post' action=''>{% csrf_token %}
......
......@@ -15,15 +15,15 @@
<div class="sib-oidc-authorization-page">
<h1>{% trans "Request for Permission" %}</h1>
<h1 class="text-center">{% trans "Request for Permission" %}</h1>
{% if scopes|length > 0 %}
<p>{% trans "Client" %} <strong>{{ client.name }}</strong> {% trans "would like to access this information of you:" %}</p>
<p class="text-center">{% trans "Client" %} <strong>{{ client.name }}</strong> {% trans "would like to access this information of you:" %}</p>
{% else %}
<p>{% trans "Client" %} <strong>{{ client.name }}</strong> {% trans "would like to access your account." %}</p>
<p class="text-center">{% trans "Client" %} <strong>{{ client.name }}</strong> {% trans "would like to access your account." %}</p>
{% endif %}
<form method="post" action="{% url 'oidc_provider:authorize' %}">
<form class="text-center" method="post" action="{% url 'oidc_provider:authorize' %}">
{% csrf_token %}
{{ hidden_inputs }}
<ul>
......
......@@ -28,38 +28,36 @@
{% endif %}
<div class="sib-login-forms">
{% if form.errors %}
<p class="error">{% trans "Your username and password didn't match. Please try again." %}</p>
{% endif %}
<form class="sib-login-form" method="post" action="{% url 'login' %}">
{% csrf_token %}
<table class="sib-form-table">
<tr>
<td>{% trans "Username or email:" %}</td>
<td>{{ form.username }}</td>
</tr>
<tr>
<td>{{ form.password.label_tag }}</td>
<td>{{ form.password }}</td>
</tr>
</table>
<input class="sib-validate" type="submit" value="{% trans 'login' %}"/>
<input type="hidden" name="next" value="{{ next }}"/>
</form>
<a class="sib-btn-link" href="{% url 'password_reset' %}">{% trans "Lost password?" %}</a>
<hr class="separator"/>
<div class="flex-column">
{% if form.errors %}
<p class="error">{% trans "Your username and password didn't match. Please try again." %}</p>
{% endif %}
<form class="flex-column" method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="input-line">
<label for="id_username">{% trans "Username or e-mail:" %}</label>
{{ form.username }}
</div>
<div class="input-line">
{{ form.password.label_tag }}
{{ form.password }}
</div>
<input type="submit" value="{% trans 'login' %}"/>
<input type="hidden" name="next" value="{{ next }}"/>
</form>
<a class="sib-link" href="{% url 'password_reset' %}">{% trans "Lost password?" %}</a>
</div>
<p>{% trans "or login using another authentification provider" %}</p>
<div class="flex-column">
<p class="other-login-title text-center">{% trans "Login using another authentification provider" %}</p>
<form class="sib-login-form" method="post" action="{% url 'oidc_login' %}">
{% csrf_token %}
<label for="id_subject">{% trans "email, web-id, or provider url:" %}</label>
<input type="text" name="subject" required id="id_subject"/>
<input class="sib-validate" type="submit" value="{% trans 'login' %}"/>
<input type="hidden" name="next" value="{{ next }}"/>
</form>
<form class="flex-column" method="post" action="{% url 'oidc_login' %}">
{% csrf_token %}
<label for="id_subject" title="Your e-mail, web-id or provider url">{% trans "E-mail, web-id or provider url:" %}</label>
<input type="text" name="subject" required id="id_subject"/>
<input type="submit" value="{% trans 'login' %}"/>
<input type="hidden" name="next" value="{{ next }}"/>
</form>
</div>
</div>
{% endblock %}
......@@ -12,6 +12,6 @@
{% block content %}
<h1>{% trans "Check your inbox." %}</h1>
<p>{% trans "We've emailed you instructions for setting your password. You should receive the email shortly!" %}</p>
<h1 class="text-center">{% trans "Check your inbox." %}</h1>
<p class="text-center">{% trans "We've emailed you instructions for setting your password. You should receive the email shortly!" %}</p>
{% endblock %}
......@@ -7,16 +7,25 @@
{% endblock %}
{% block supplementary_css %}
<link rel="stylesheet" href="{% static 'base.css' %}"/>
<link rel="stylesheet" href="{% static 'base.css' %}"/>
{% endblock %}
{% block content %}
<h1>{% trans "Forgot your password?" %}</h1>
<p>{% trans "Enter your email address below, and we'll email instructions for setting a new one." %}</p>
<div class="flex-column">
<h1 class="text-center">{% trans "Forgot your password?" %}</h1>
<p class="text-center">{% trans "Enter your email address below, and we'll email instructions for setting a new one." %}</p>
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Send me instructions!">
</form>
<form class="flex-column" method="POST">
{% csrf_token %}
<div class="input-line flex-column">
{{ form.email.label_tag }}
{{ form.email }}
</div>
<input type="submit" value="Send me instructions!">
</form>
{% if form.errors %}
<p class="text-center error">{% trans "Please, enter a valid email address." %}</p>
{% endif %}
</div>
{% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment