mirror of
https://github.com/IliesAllali/parenthese.git
synced 2026-11-12 16:16:09 +00:00
IliesAllaliandClaude Opus 5.5
6b1f4c067e
- Les visages affichent leur miniature ronde au lieu de l'icône. Chargées quand elles entrent dans la liste (IntersectionObserver), trois requêtes au plus en parallèle, une requête par visage, cache le temps du panneau. Les URL blob sont révoquées au démontage. En attente ou sans vignette : un rond neutre. - La personne déjà associée à la fiche est marquée « Associée » (lecture réservée aux administrateurs, via la nouvelle route de lien). - Le cadre pointillé vide disparaît : l'aperçu n'apparaît qu'une fois un visage choisi, avec la photo carrée arrondie des fiches. Le bouton principal reste désactivé tant que rien n'est choisi. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
103 lines
3.4 KiB
CSS
103 lines
3.4 KiB
CSS
/* Association d'un visage Immich : sélecteur de personne avec aperçu du portrait. La fenêtre vient de pz.css */
|
|
.immich-modal-overlay { z-index: 2200; }
|
|
.immich-modal-card { max-width: 520px; }
|
|
|
|
.immich-body { display: grid; gap: 16px; }
|
|
|
|
.immich-current {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--pz-a300);
|
|
border-radius: var(--pz-r-m);
|
|
background: var(--pz-a50);
|
|
font: 500 13px var(--pz-sans);
|
|
color: var(--pz-ink-2);
|
|
}
|
|
|
|
.immich-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--pz-line);
|
|
border-radius: var(--pz-r-m);
|
|
background: var(--pz-surface);
|
|
color: var(--pz-faint);
|
|
}
|
|
.immich-search input {
|
|
flex: 1;
|
|
border: none;
|
|
background: transparent;
|
|
font: 500 13.5px var(--pz-sans);
|
|
color: var(--pz-ink);
|
|
outline: none;
|
|
}
|
|
|
|
.immich-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
max-height: 220px;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--pz-line);
|
|
border-radius: var(--pz-r-m);
|
|
padding: 6px;
|
|
}
|
|
.immich-person {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 7px 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: calc(var(--pz-r-m) - 3px);
|
|
background: var(--pz-surface);
|
|
color: var(--pz-ink-2);
|
|
font: 500 13px var(--pz-sans);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background-color 140ms ease, color 140ms ease;
|
|
}
|
|
.immich-person.is-active { border-color: var(--pz-a500); background: var(--pz-a50); color: var(--pz-a700); }
|
|
.immich-person.is-linked:not(.is-active) { border-color: var(--pz-a300); }
|
|
.immich-person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.immich-person-tag { margin-left: auto; flex: none; }
|
|
@media (hover: hover) and (pointer: fine) { .immich-person:hover:not(.is-active) { background: var(--pz-a50); } }
|
|
|
|
/* Miniature ronde d'un visage ; en attente ou sans vignette, un rond neutre avec l'icône. */
|
|
.immich-face {
|
|
width: 34px; height: 34px; flex: none; display: grid; place-items: center; overflow: hidden;
|
|
border-radius: 50%; border: 1px solid var(--pz-line); background: var(--pz-bg); color: var(--pz-faint);
|
|
}
|
|
.immich-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
|
|
/* Aperçu du visage choisi : même photo que les fiches (carré arrondi), n'apparaît qu'après un choix. */
|
|
.immich-preview {
|
|
display: flex; align-items: center; gap: 14px; padding: 12px 14px;
|
|
border-radius: var(--pz-r-m); background: var(--pz-a50);
|
|
}
|
|
.immich-face--preview {
|
|
width: 64px; height: 64px; border-radius: 24%; border: 0;
|
|
background: var(--pz-a100); color: var(--pz-a700);
|
|
box-shadow: 0 0 0 1px rgba(42, 38, 34, .06), var(--pz-shadow);
|
|
}
|
|
.immich-preview-name { font: 500 14px var(--pz-sans); color: var(--pz-ink-2); }
|
|
|
|
.immich-empty { font: 500 13px var(--pz-sans); color: var(--pz-faint); text-align: center; padding: 12px 0; }
|
|
.immich-error { margin: 0; }
|
|
|
|
/* Demande de confirmation avant de remplacer un portrait déjà en place. */
|
|
.immich-confirm {
|
|
margin: 0;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--pz-danger);
|
|
border-radius: var(--pz-r-m);
|
|
background: var(--pz-danger-bg);
|
|
color: var(--pz-danger);
|
|
font: 500 13px/1.5 var(--pz-sans);
|
|
}
|
|
.immich-spin { animation: immich-rotate 900ms linear infinite; }
|
|
@keyframes immich-rotate { to { transform: rotate(360deg); } }
|