Refonte design system — Phase B : chrome global et pages d'authentification
- styles/forge-custom.scss : .content-wide (déjà utilisée par game_dashboard.html/index.html) passe de 1080px à 1600px, pleine largeur pour les écrans de gestion (§5) — la largeur du bloc <main> par défaut (760px, hérité par les pages d'auth/profil qui ne posent pas cette classe) reste inchangée, ces pages veulent justement rester étroites et centrées. - Pages d'authentification (login/register/2FA×2/mot de passe oublié/ réinitialisation) : le style="max-width:NNNpx" répété sur chacune est remplacé par les classes partagées .authScreen/.authCard(-wide), titre H1 en dégradé signature .forge-gradient-title — seul endroit du site, avec le logo, autorisé à l'utiliser (§3/§5). Grille de fond fine sur body.authBody, elle aussi réservée aux zones hero et absente des écrans de travail. - Logique JS inchangée (jauge de mot de passe dans register.html/ reset_password.html) — uniquement des classes/structure autour. 197 tests toujours verts, JS des pages modifiées revérifié (node --check). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
f2a73f2c73
commit
62d25dbdce
+27
-1
@@ -11965,6 +11965,32 @@ label.label {
|
|||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.authBody {
|
||||||
|
background: radial-gradient(circle at 1px 1px, rgba(232, 236, 244, 0.06) 1px, transparent 0) 0 0/26px 26px, var(--forge-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.authScreen {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: calc(100vh - 3.5rem);
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.authCard {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 440px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.authCard.authCard-wide {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.authTitle {
|
||||||
|
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Tokens (--bg, --panel, --accent...) définis une seule fois dans
|
/* Tokens (--bg, --panel, --accent...) définis une seule fois dans
|
||||||
forge-theme.scss, qui @importe ce fichier APRÈS Bulma — ce fichier
|
forge-theme.scss, qui @importe ce fichier APRÈS Bulma — ce fichier
|
||||||
continue de référencer les mêmes noms de variable qu'avant la charte
|
continue de référencer les mêmes noms de variable qu'avant la charte
|
||||||
@@ -12305,7 +12331,7 @@ button.danger {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.content-wide {
|
.content-wide {
|
||||||
max-width: 1080px;
|
max-width: 1600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.twoCol {
|
.twoCol {
|
||||||
|
|||||||
@@ -102,7 +102,7 @@ button.danger{ color:var(--danger); border-color:rgba(240,68,56,.4); }
|
|||||||
.rowDetailLabel{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
|
.rowDetailLabel{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
|
||||||
.rowDetailValue{ font-size:13.5px; white-space:pre-wrap; word-break:break-word; }
|
.rowDetailValue{ font-size:13.5px; white-space:pre-wrap; word-break:break-word; }
|
||||||
|
|
||||||
.content-wide{ max-width:1080px; }
|
.content-wide{ max-width:1600px; }
|
||||||
.twoCol{ display:flex; gap:24px; align-items:flex-start; margin-top:10px; }
|
.twoCol{ display:flex; gap:24px; align-items:flex-start; margin-top:10px; }
|
||||||
.twoCol .colLeft{ flex:0 0 340px; }
|
.twoCol .colLeft{ flex:0 0 340px; }
|
||||||
.twoCol .colRight{ flex:1; min-width:0; }
|
.twoCol .colRight{ flex:1; min-width:0; }
|
||||||
|
|||||||
+15
-2
@@ -167,8 +167,7 @@ label.label { color: var(--forge-text-muted); font-size: 0.85rem; font-weight: 6
|
|||||||
.notification.is-info { background: rgba(59, 130, 246, 0.12); color: var(--status-info); }
|
.notification.is-info { background: rgba(59, 130, 246, 0.12); color: var(--status-info); }
|
||||||
|
|
||||||
// Titre H1 en dégradé signature — réservé aux pages d'accueil/marketing et
|
// Titre H1 en dégradé signature — réservé aux pages d'accueil/marketing et
|
||||||
// à l'écran de connexion (§5), voir .authHero (templates/auth/*.html,
|
// à l'écran de connexion (§5).
|
||||||
// Phase B).
|
|
||||||
.forge-gradient-title {
|
.forge-gradient-title {
|
||||||
background: var(--gradient);
|
background: var(--gradient);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
@@ -176,6 +175,20 @@ label.label { color: var(--forge-text-muted); font-size: 0.85rem; font-weight: 6
|
|||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------- Pages d'authentification (login/register/2FA/mot de passe
|
||||||
|
// oublié/profil) : seul endroit du site, avec l'accueil marketing, où le
|
||||||
|
// H1 en dégradé et la grille de fond fine sont autorisés (§3/§5) — absents
|
||||||
|
// de tous les écrans de travail (tableau de bord, éditeur...). ----------
|
||||||
|
body.authBody {
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 1px 1px, rgba(232, 236, 244, 0.06) 1px, transparent 0) 0 0/26px 26px,
|
||||||
|
var(--forge-bg);
|
||||||
|
}
|
||||||
|
.authScreen { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 3.5rem); padding: 2rem 1rem; }
|
||||||
|
.authCard { width: 100%; max-width: 440px; }
|
||||||
|
.authCard.authCard-wide { max-width: 500px; }
|
||||||
|
.authTitle { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 0.5rem; }
|
||||||
|
|
||||||
// ---------- CSS custom de l'app (floatPanel, canvas, arbre d'éléments,
|
// ---------- CSS custom de l'app (floatPanel, canvas, arbre d'éléments,
|
||||||
// graphe de logique, timeline, éditeurs de jeu...) — structurellement
|
// graphe de logique, timeline, éditeurs de jeu...) — structurellement
|
||||||
// inchangé, consomme les tokens ci-dessus via les alias historiques.
|
// inchangé, consomme les tokens ci-dessus via les alias historiques.
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% block title %}Mot de passe oublié — Forge Engine{% endblock %}
|
{% block title %}Mot de passe oublié — Forge Engine{% endblock %}
|
||||||
|
{% block body_class %}authBody{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section class="section">
|
<section class="section authScreen">
|
||||||
<div class="container" style="max-width:420px;">
|
<div class="container authCard">
|
||||||
<h1 class="title">Mot de passe oublié</h1>
|
<h1 class="title authTitle forge-gradient-title">Mot de passe oublié</h1>
|
||||||
|
|
||||||
{% if sent %}
|
{% if sent %}
|
||||||
<div class="notification is-success">Si un compte existe avec cette adresse, un email vient de t'être envoyé avec un lien pour choisir un nouveau mot de passe.</div>
|
<div class="notification is-success">Si un compte existe avec cette adresse, un email vient de t'être envoyé avec un lien pour choisir un nouveau mot de passe.</div>
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% block title %}Connexion — Forge Engine{% endblock %}
|
{% block title %}Connexion — Forge Engine{% endblock %}
|
||||||
|
{% block body_class %}authBody{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section class="section">
|
<section class="section authScreen">
|
||||||
<div class="container" style="max-width:420px;">
|
<div class="container authCard">
|
||||||
<h1 class="title">Connexion</h1>
|
<h1 class="title authTitle forge-gradient-title">Connexion</h1>
|
||||||
|
|
||||||
{% if error %}
|
{% if error %}
|
||||||
<div class="notification is-danger">{{ error }}</div>
|
<div class="notification is-danger">{{ error }}</div>
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% block title %}Code de vérification — Forge Engine{% endblock %}
|
{% block title %}Code de vérification — Forge Engine{% endblock %}
|
||||||
|
{% block body_class %}authBody{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section class="section">
|
<section class="section authScreen">
|
||||||
<div class="container" style="max-width:420px;">
|
<div class="container authCard">
|
||||||
<h1 class="title">Code de vérification</h1>
|
<h1 class="title authTitle forge-gradient-title">Code de vérification</h1>
|
||||||
<p class="hint mb-4">Ouvre ton application d'authentification et saisis le code à 6 chiffres affiché, ou un de tes codes de récupération si tu n'y as plus accès.</p>
|
<p class="hint mb-4">Ouvre ton application d'authentification et saisis le code à 6 chiffres affiché, ou un de tes codes de récupération si tu n'y as plus accès.</p>
|
||||||
|
|
||||||
{% if error %}
|
{% if error %}
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% block title %}Inscription — Forge Engine{% endblock %}
|
{% block title %}Inscription — Forge Engine{% endblock %}
|
||||||
|
{% block body_class %}authBody{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section class="section">
|
<section class="section authScreen">
|
||||||
<div class="container" style="max-width:480px;">
|
<div class="container authCard authCard-wide">
|
||||||
<h1 class="title">Créer un compte</h1>
|
<h1 class="title authTitle forge-gradient-title">Créer un compte</h1>
|
||||||
<p class="hint mb-4">Un compte = un seul projet de jeu (illimité pour un compte administrateur). La double authentification (2FA) est obligatoire — l'étape suivante te fera scanner un QR code avec une application comme Google Authenticator.</p>
|
<p class="hint mb-4">Un compte = un seul projet de jeu (illimité pour un compte administrateur). La double authentification (2FA) est obligatoire — l'étape suivante te fera scanner un QR code avec une application comme Google Authenticator.</p>
|
||||||
|
|
||||||
{% if error %}
|
{% if error %}
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% block title %}Activer la double authentification — Forge Engine{% endblock %}
|
{% block title %}Activer la double authentification — Forge Engine{% endblock %}
|
||||||
|
{% block body_class %}authBody{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section class="section">
|
<section class="section authScreen">
|
||||||
<div class="container" style="max-width:480px;">
|
<div class="container authCard authCard-wide">
|
||||||
<h1 class="title">Active la double authentification</h1>
|
<h1 class="title authTitle forge-gradient-title">Active la double authentification</h1>
|
||||||
<p class="hint mb-4">Scanne ce QR code avec une application d'authentification (Google Authenticator, Authy...), puis tape le code à 6 chiffres qu'elle affiche pour confirmer.</p>
|
<p class="hint mb-4">Scanne ce QR code avec une application d'authentification (Google Authenticator, Authy...), puis tape le code à 6 chiffres qu'elle affiche pour confirmer.</p>
|
||||||
|
|
||||||
{% if error %}
|
{% if error %}
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% block title %}Nouveau mot de passe — Forge Engine{% endblock %}
|
{% block title %}Nouveau mot de passe — Forge Engine{% endblock %}
|
||||||
|
{% block body_class %}authBody{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section class="section">
|
<section class="section authScreen">
|
||||||
<div class="container" style="max-width:480px;">
|
<div class="container authCard authCard-wide">
|
||||||
<h1 class="title">Choisir un nouveau mot de passe</h1>
|
<h1 class="title authTitle forge-gradient-title">Choisir un nouveau mot de passe</h1>
|
||||||
|
|
||||||
{% if invalid %}
|
{% if invalid %}
|
||||||
<div class="notification is-danger">Ce lien de réinitialisation est invalide ou a expiré.</div>
|
<div class="notification is-danger">Ce lien de réinitialisation est invalide ou a expiré.</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user