mirror of
https://github.com/IliesAllali/parenthese.git
synced 2026-11-13 16:22:03 +00:00
Refonte de la direction artistique : accent terracotta, landing, app et démo
- Landing refaite : nouvelle palette claire, Newsreader et DM Sans, logo validé, sections (garanties, trois gestes, démo, pour qui, engagements, guides, bloc final). Illustration du hero conservée et recolorée, portraits alignés sur les âges. - App : couleurs et typographie passées à la nouvelle DA, structure et fonctionnalités inchangées. Composants communs dans src/styles/pz.css. - Refaits de zéro : fiche d'une personne (souvenirs, infos, liens, panneau mobile), connexion, création de compte, liste des arbres, accès par mot de passe, recherche, barre d'actions, menu du compte, zoom, et toutes les fenêtres (compte, création d'arbre, contributions, envoi, sortie d'édition, brouillon, ajout de personne, souvenirs, visionneuse, paramètres de l'arbre). - Arbre : chaque personne garde sa forme de cadre tirée au hasard, cadre vertical pour une photo carrée. - Démo : photos d'époque libres de droits hébergées dans public/demo (sources et licences dans sources.json et CREDITS.md), famille Dupont crédible, Isabelle née à Fort-de-France. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
IliesAllaliandClaude Opus 5.5 committed
1 parent
cf74644309
commit
5b5636e1be
104 files changed
+3659
-7947
No files matched your search
@@ -1,337 +1,17 @@
|
||||
/* ============================================================
|
||||
Contribution Session Modal - Finalisation contribution
|
||||
============================================================ */
|
||||
/* Envoi d'une contribution (DA terracotta) : la fenêtre vient de pz.css */
|
||||
.cs-recap { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.cs-tag--added { background: var(--pz-success-bg); color: var(--pz-success); border-color: transparent; }
|
||||
.cs-tag--modified { background: var(--pz-a100); color: var(--pz-a700); border-color: transparent; }
|
||||
.cs-tag--deleted { background: var(--pz-danger-bg); color: var(--pz-danger); border-color: transparent; }
|
||||
|
||||
.contrib-session-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
background: rgba(30, 25, 20, 0.55);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: contribFadeIn 0.2s ease;
|
||||
}
|
||||
.cs-changes { list-style: none; margin: 0; padding: 4px 0; display: grid; max-height: 200px; overflow-y: auto; border-block: 1px solid var(--pz-line-soft); scrollbar-width: thin; scrollbar-color: var(--pz-line) transparent; }
|
||||
.cs-change { display: flex; align-items: center; gap: 10px; min-height: 36px; font: 400 14px/1.35 var(--pz-sans); color: var(--pz-ink); }
|
||||
.cs-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--pz-a500); }
|
||||
.cs-dot--create { background: var(--pz-success); }
|
||||
.cs-dot--delete { background: var(--pz-danger); }
|
||||
.cs-change-action { flex: none; width: 96px; font: 500 12.5px var(--pz-sans); color: var(--pz-muted); }
|
||||
.cs-change-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
@keyframes contribFadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.contrib-session-modal {
|
||||
position: relative;
|
||||
width: 440px;
|
||||
max-width: calc(100vw - 32px);
|
||||
max-height: calc(100vh - 64px);
|
||||
overflow-y: auto;
|
||||
padding: 32px 28px 24px;
|
||||
background: rgba(254, 249, 237, 0.97);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(166, 124, 82, 0.2);
|
||||
box-shadow:
|
||||
0 20px 60px rgba(93, 82, 75, 0.25),
|
||||
0 4px 16px rgba(93, 82, 75, 0.1);
|
||||
animation: contribSlideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
@keyframes contribSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.97);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.contrib-session-close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #8B7355;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.contrib-session-close:hover {
|
||||
background: rgba(93, 82, 75, 0.1);
|
||||
color: #5D524B;
|
||||
}
|
||||
|
||||
.contrib-session-header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.contrib-session-icon {
|
||||
color: #FF9500;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.contrib-session-title {
|
||||
font-family: 'Red Hat Mono', ui-monospace, monospace;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #5D524B;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.contrib-session-subtitle {
|
||||
font-family: 'Red Hat Mono', ui-monospace, monospace;
|
||||
font-size: 14px;
|
||||
color: #8B7355;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Récap modifications */
|
||||
.contrib-session-recap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.contrib-recap-tag {
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-family: 'Red Hat Mono', ui-monospace, monospace;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.contrib-recap-tag--added {
|
||||
background: rgba(82, 178, 120, 0.12);
|
||||
color: #3D9A5E;
|
||||
}
|
||||
|
||||
.contrib-recap-tag--modified {
|
||||
background: rgba(255, 149, 0, 0.12);
|
||||
color: #E08600;
|
||||
}
|
||||
|
||||
.contrib-recap-tag--deleted {
|
||||
background: rgba(192, 57, 43, 0.1);
|
||||
color: #C0392B;
|
||||
}
|
||||
|
||||
/* Liste des changements */
|
||||
.contrib-session-changes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(166, 124, 82, 0.15);
|
||||
}
|
||||
|
||||
.contrib-session-change-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: 'Red Hat Mono', ui-monospace, monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.contrib-session-change-badge {
|
||||
padding: 2px 7px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contrib-session-change-badge--create {
|
||||
background: rgba(82, 178, 120, 0.15);
|
||||
color: #3D9A5E;
|
||||
}
|
||||
|
||||
.contrib-session-change-badge--update {
|
||||
background: rgba(255, 149, 0, 0.12);
|
||||
color: #E08600;
|
||||
}
|
||||
|
||||
.contrib-session-change-badge--delete {
|
||||
background: rgba(192, 57, 43, 0.1);
|
||||
color: #C0392B;
|
||||
}
|
||||
|
||||
.contrib-session-change-label {
|
||||
color: #5D524B;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.contrib-session-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.contrib-session-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contrib-session-label {
|
||||
font-family: 'Red Hat Mono', ui-monospace, monospace;
|
||||
font-size: 14px;
|
||||
font-weight: 450;
|
||||
color: #8B7355;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.contrib-session-optional {
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
color: #B8A898;
|
||||
}
|
||||
|
||||
.contrib-session-input {
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
border: 1.5px solid rgba(166, 124, 82, 0.2);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
font-family: 'Red Hat Mono', ui-monospace, monospace;
|
||||
font-size: 14px;
|
||||
color: #5D524B;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.contrib-session-input:focus {
|
||||
border-color: #A67C52;
|
||||
box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.12);
|
||||
}
|
||||
|
||||
.contrib-session-input::placeholder {
|
||||
color: #B8A898;
|
||||
}
|
||||
|
||||
.contrib-session-textarea {
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
border: 1.5px solid rgba(166, 124, 82, 0.2);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
font-family: 'Red Hat Mono', ui-monospace, monospace;
|
||||
font-size: 14px;
|
||||
color: #5D524B;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.contrib-session-textarea:focus {
|
||||
border-color: #A67C52;
|
||||
box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.12);
|
||||
}
|
||||
|
||||
.contrib-session-textarea::placeholder {
|
||||
color: #B8A898;
|
||||
}
|
||||
|
||||
.contrib-session-count {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 12px;
|
||||
font-family: 'Red Hat Mono', ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
color: #B8A898;
|
||||
}
|
||||
|
||||
.contrib-session-error {
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
background: rgba(192, 57, 43, 0.08);
|
||||
border: 1px solid rgba(192, 57, 43, 0.2);
|
||||
color: #C0392B;
|
||||
font-family: 'Red Hat Mono', ui-monospace, monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.contrib-session-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.contrib-session-submit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background: #FF9500;
|
||||
color: white;
|
||||
font-family: 'Red Hat Mono', ui-monospace, monospace;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.contrib-session-submit:hover:not(:disabled) {
|
||||
background: #E08600;
|
||||
box-shadow: 0 4px 16px rgba(255, 149, 0, 0.3);
|
||||
}
|
||||
|
||||
.contrib-session-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.contrib-session-cancel {
|
||||
padding: 10px 20px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #8B7355;
|
||||
font-family: 'Red Hat Mono', ui-monospace, monospace;
|
||||
font-size: 14px;
|
||||
font-weight: 450;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.contrib-session-cancel:hover {
|
||||
background: rgba(93, 82, 75, 0.08);
|
||||
color: #5D524B;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contrib-session-modal {
|
||||
margin: 16px;
|
||||
padding: 24px 20px 20px;
|
||||
}
|
||||
}
|
||||
.cs-form { display: grid; gap: 16px; }
|
||||
.cs-optional { font-weight: 400; color: var(--pz-faint); margin-left: 4px; }
|
||||
.cs-count { justify-self: end; font-variant-numeric: tabular-nums; }
|
||||
Reference in new issue
Block a user