mirror of
https://github.com/IliesAllali/parenthese.git
synced 2026-11-13 00:16:09 +00:00
IliesAllaliandClaude Opus 5.5
5b5636e1be
- 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>
107 lines
4.9 KiB
CSS
107 lines
4.9 KiB
CSS
/* ============================================================
|
|
Ajouter une personne (DA terracotta)
|
|
Panneau flottant à gauche, de la même famille que la fiche.
|
|
Sur téléphone, panneau qui monte par le bas.
|
|
============================================================ */
|
|
|
|
.add-person-panel {
|
|
position: fixed;
|
|
top: 24px;
|
|
left: 24px;
|
|
bottom: 24px;
|
|
z-index: 1050;
|
|
width: 400px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
padding: 22px 20px 18px;
|
|
background: var(--pz-surface);
|
|
border: 1px solid var(--pz-line);
|
|
border-radius: var(--pz-r-l);
|
|
box-shadow: var(--pz-shadow-lg);
|
|
transform: translateX(calc(-100% - 40px));
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: transform 320ms var(--pz-ease), opacity 220ms ease, visibility 0s linear 320ms;
|
|
}
|
|
.add-person-panel--open {
|
|
transform: none;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: transform 320ms var(--pz-ease), opacity 220ms ease, visibility 0s;
|
|
}
|
|
|
|
.apn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
.apn-close { flex: none; margin: -6px -6px 0 0; }
|
|
|
|
.apn-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
|
|
.apn-scroll { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 16px; align-content: start; margin: 0 -6px; padding: 2px 6px 4px; scrollbar-width: thin; scrollbar-color: var(--pz-line) transparent; }
|
|
|
|
.apn-optional { font-weight: 400; color: var(--pz-faint); margin-left: 4px; }
|
|
.apn-input--error { border-color: var(--pz-danger) !important; box-shadow: 0 0 0 3px var(--pz-danger-bg) !important; }
|
|
.apn-error-text { margin: -8px 0 0; font: 500 12.5px var(--pz-sans); color: var(--pz-danger); }
|
|
|
|
.apn-section { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--pz-line-soft); }
|
|
.apn-types .pz-tab { font-size: 13px; padding: 0 6px; }
|
|
|
|
.apn-relation { position: relative; }
|
|
.apn-search { position: relative; display: flex; align-items: center; }
|
|
.apn-search input { padding-left: 38px !important; padding-right: 36px !important; }
|
|
.apn-search-icon { position: absolute; left: 13px; color: var(--pz-muted); pointer-events: none; }
|
|
.apn-search-chevron { position: absolute; right: 13px; color: var(--pz-faint); pointer-events: none; }
|
|
|
|
.apn-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 5;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 5px;
|
|
max-height: 260px;
|
|
overflow-y: auto;
|
|
background: var(--pz-surface);
|
|
border: 1px solid var(--pz-line);
|
|
border-radius: var(--pz-r-m);
|
|
box-shadow: var(--pz-shadow-lg);
|
|
animation: pz-rise 160ms var(--pz-ease) both;
|
|
}
|
|
.apn-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 5px 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; }
|
|
@media (hover: hover) and (pointer: fine) { .apn-dropdown-item:hover { background: var(--pz-a50); } }
|
|
.apn-avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--pz-a100); color: var(--pz-a700); font: 400 14px/1 var(--pz-serif); }
|
|
.apn-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
.apn-dropdown-name { flex: 1; min-width: 0; font: 400 16px/1.2 var(--pz-serif); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.apn-dropdown-name em { font-style: italic; font-weight: 300; }
|
|
.apn-dropdown-date { flex: none; font: 400 12px var(--pz-sans); color: var(--pz-muted); font-variant-numeric: tabular-nums; }
|
|
|
|
.apn-links { display: grid; gap: 6px; }
|
|
.apn-link { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--pz-a50); border: 1px solid var(--pz-a100); }
|
|
.apn-link-type { flex: none; font: 500 12px var(--pz-sans); color: var(--pz-a700); }
|
|
.apn-link-name { flex: 1; min-width: 0; font: 400 15px/1.2 var(--pz-serif); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.apn-link-remove { width: 30px; min-height: 30px; color: var(--pz-muted); }
|
|
|
|
.apn-actions { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--pz-line); }
|
|
|
|
@media (max-width: 768px) {
|
|
.add-person-panel {
|
|
top: auto;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: auto;
|
|
max-height: 90dvh;
|
|
border-radius: 26px 26px 0 0;
|
|
border-bottom: 0;
|
|
padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
|
|
transform: translateY(100%);
|
|
transition: transform 400ms var(--pz-ease-drawer), opacity 220ms ease, visibility 0s linear 400ms;
|
|
}
|
|
.add-person-panel--open { transform: none; transition: transform 400ms var(--pz-ease-drawer), opacity 220ms ease, visibility 0s; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.add-person-panel, .add-person-panel--open { transform: none; transition: opacity 180ms ease, visibility 0s linear 180ms; }
|
|
.add-person-panel--open { transition: opacity 180ms ease, visibility 0s; }
|
|
}
|