Improve style
This commit is contained in:
julien committed
1 parent
189ad45eea
commit
e4d688171d
2 files changed
+131
-102
No files matched your search
+69
-59
@@ -427,25 +427,21 @@ summary:focus-visible {
|
||||
flex: 0 0 20px;
|
||||
}
|
||||
|
||||
/* Authentification
|
||||
/* Formulaires
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
.auth-panel {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.auth-panel h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.rodauth {
|
||||
.rodauth,
|
||||
.contact-form {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
gap: 12px;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.rodauth > p {
|
||||
.rodauth > p,
|
||||
.contact-form > p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.rodauth .form-group {
|
||||
@@ -454,36 +450,90 @@ summary:focus-visible {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rodauth .form-label {
|
||||
.rodauth .form-label,
|
||||
.contact-form label,
|
||||
.contact-form legend {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rodauth .form-control {
|
||||
.rodauth .form-control,
|
||||
.contact-form input:not([type="submit"]),
|
||||
.contact-form textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--color-text);
|
||||
border-radius: 0;
|
||||
background: var(--color-text);
|
||||
color: var(--color-background);
|
||||
font: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.rodauth .btn-primary {
|
||||
.contact-form textarea {
|
||||
min-height: 150px;
|
||||
resize: vertical;
|
||||
box-shadow: 0 0 10px var(--color-surface-dark);
|
||||
}
|
||||
|
||||
.rodauth .btn-primary,
|
||||
.contact-form .submit {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 10px 16px;
|
||||
border: 2px solid var(--color-accent);
|
||||
border-radius: 0;
|
||||
background: var(--color-accent);
|
||||
color: var(--color-background);
|
||||
font: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rodauth .btn-primary:hover {
|
||||
.rodauth .btn-primary:hover,
|
||||
.contact-form .submit:hover {
|
||||
filter: brightness(1.12);
|
||||
}
|
||||
|
||||
.contact-form fieldset {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--color-shadow-light);
|
||||
}
|
||||
|
||||
.contact-form legend {
|
||||
padding-inline: 8px;
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
|
||||
.contact-form .form-description {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.contact-form .form-choice-separator {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-panel {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.auth-panel h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.auth-links {
|
||||
margin-top: 28px;
|
||||
padding-top: 20px;
|
||||
@@ -506,46 +556,6 @@ summary:focus-visible {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Formulaires
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
.contact-form {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
border: 0;
|
||||
font-family: inherit;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.contact-form input:not([type="submit"]),
|
||||
.contact-form textarea {
|
||||
background: var(--color-text);
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
||||
.contact-form textarea {
|
||||
min-height: 150px;
|
||||
resize: vertical;
|
||||
box-shadow: 0 0 10px var(--color-surface-dark);
|
||||
}
|
||||
|
||||
.submit {
|
||||
width: 100%;
|
||||
background: var(--color-accent);
|
||||
color: var(--color-background);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.honeypot {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
|
||||
+62
-43
@@ -27,56 +27,75 @@
|
||||
>
|
||||
<%== rodauth.csrf_tag %>
|
||||
|
||||
<p>
|
||||
Renseignez soit le prénom et le nom d'une personne physique,
|
||||
soit la dénomination d'une personne morale.
|
||||
<p class="form-description">
|
||||
Choisissez l'une des deux possibilités suivantes.
|
||||
</p>
|
||||
|
||||
<label for="first_name">Prénom</label>
|
||||
<input
|
||||
id="first_name"
|
||||
name="first_name"
|
||||
type="text"
|
||||
maxlength="128"
|
||||
autocomplete="given-name"
|
||||
value="<%= request.params["first_name"] %>"
|
||||
>
|
||||
<fieldset>
|
||||
<legend>Compte personnel</legend>
|
||||
|
||||
<% if error = rodauth.field_error("first_name") %>
|
||||
<p class="flash flash--error"><%= error %></p>
|
||||
<% end %>
|
||||
<p class="form-description">
|
||||
Pour créer un compte en votre nom (personne physique).
|
||||
</p>
|
||||
|
||||
<label for="last_name">Nom</label>
|
||||
<input
|
||||
id="last_name"
|
||||
name="last_name"
|
||||
type="text"
|
||||
maxlength="128"
|
||||
autocomplete="family-name"
|
||||
value="<%= request.params["last_name"] %>"
|
||||
>
|
||||
<label for="first_name">Prénom</label>
|
||||
<input
|
||||
id="first_name"
|
||||
name="first_name"
|
||||
type="text"
|
||||
maxlength="128"
|
||||
autocomplete="given-name"
|
||||
value="<%= request.params["first_name"] %>"
|
||||
>
|
||||
|
||||
<% if error = rodauth.field_error("last_name") %>
|
||||
<p class="flash flash--error"><%= error %></p>
|
||||
<% end %>
|
||||
<% if error = rodauth.field_error("first_name") %>
|
||||
<p class="flash flash--error"><%= error %></p>
|
||||
<% end %>
|
||||
|
||||
<label for="organization_name">Dénomination</label>
|
||||
<input
|
||||
id="organization_name"
|
||||
name="organization_name"
|
||||
type="text"
|
||||
maxlength="255"
|
||||
autocomplete="organization"
|
||||
value="<%= request.params["organization_name"] %>"
|
||||
>
|
||||
<label for="last_name">Nom</label>
|
||||
<input
|
||||
id="last_name"
|
||||
name="last_name"
|
||||
type="text"
|
||||
maxlength="128"
|
||||
autocomplete="family-name"
|
||||
value="<%= request.params["last_name"] %>"
|
||||
>
|
||||
|
||||
<% if error = rodauth.field_error("organization_name") %>
|
||||
<p class="flash flash--error"><%= error %></p>
|
||||
<% end %>
|
||||
<% if error = rodauth.field_error("last_name") %>
|
||||
<p class="flash flash--error"><%= error %></p>
|
||||
<% end %>
|
||||
</fieldset>
|
||||
|
||||
<p class="form-choice-separator">ou</p>
|
||||
|
||||
<fieldset>
|
||||
<legend>Compte au nom d'une organisation</legend>
|
||||
|
||||
<p class="form-description">
|
||||
Pour créer un compte au nom d'une association,
|
||||
d'une entreprise ou d'une autre personne morale.
|
||||
</p>
|
||||
|
||||
<label for="organization_name">Dénomination</label>
|
||||
<input
|
||||
id="organization_name"
|
||||
name="organization_name"
|
||||
type="text"
|
||||
maxlength="255"
|
||||
autocomplete="organization"
|
||||
value="<%= request.params["organization_name"] %>"
|
||||
>
|
||||
|
||||
<% if error = rodauth.field_error("organization_name") %>
|
||||
<p class="flash flash--error"><%= error %></p>
|
||||
<% end %>
|
||||
</fieldset>
|
||||
|
||||
<p>
|
||||
<strong>Adresse électronique</strong>
|
||||
</p>
|
||||
|
||||
<label for="<%= rodauth.login_param %>">
|
||||
Adresse électronique
|
||||
</label>
|
||||
<input
|
||||
id="<%= rodauth.login_param %>"
|
||||
name="<%= rodauth.login_param %>"
|
||||
@@ -91,7 +110,7 @@
|
||||
<p class="flash flash--error"><%= error %></p>
|
||||
<% end %>
|
||||
|
||||
<p>
|
||||
<p class="form-description">
|
||||
Nous vous enverrons un courriel pour vérifier votre adresse
|
||||
électronique. Vous choisirez votre mot de passe à cette étape.
|
||||
</p>
|
||||
|
||||
Reference in new issue
Block a user