mirror of
https://github.com/IliesAllali/parenthese.git
synced 2026-11-10 07:52:13 +00:00
IliesAllaliandClaude Opus 5.5
f65273e95a
Sur une photo ou une vidéo, on ajoute les personnes de l'arbre qui y figurent et, sur une photo, on touche leur visage pour poser un point. Le souvenir apparaît aussi sur la fiche de chaque personne identifiée (« Avec Odette »), un prénom ouvre sa fiche et recentre l'arbre. L'administrateur enregistre directement. La famille propose, l'administrateur relit dans « Propositions à relire ». Suppression d'une personne ou d'un souvenir : identifications retirées. Table media_person_tags (migration additive), route PUT /trees/:id/media/:mediaId/people. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
511 lines
11 KiB
CSS
511 lines
11 KiB
CSS
/* ============================================================
|
|
Visionneuse d'un souvenir (DA terracotta)
|
|
L'image d'abord, la légende dessous. Fond sombre discret.
|
|
============================================================ */
|
|
.media-viewer-overlay {
|
|
z-index: 2000;
|
|
background: rgba(42, 38, 34, .62);
|
|
backdrop-filter: blur(4px);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.media-viewer-card {
|
|
position: relative;
|
|
width: min(100%, 720px);
|
|
max-height: calc(100dvh - 32px);
|
|
overflow-y: auto;
|
|
display: grid;
|
|
gap: 0;
|
|
background: var(--pz-surface);
|
|
border-radius: var(--pz-r-l);
|
|
box-shadow: var(--pz-shadow-lg);
|
|
animation: pz-rise 240ms var(--pz-ease) both;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--pz-line) transparent;
|
|
}
|
|
.media-viewer-card--citation,
|
|
.media-viewer-card--audio,
|
|
.media-viewer-card--document { width: min(100%, 560px); }
|
|
|
|
.media-viewer-close {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
z-index: 2;
|
|
background: rgba(255, 255, 255, .92);
|
|
box-shadow: var(--pz-shadow);
|
|
}
|
|
|
|
.mv-stage { padding: 12px 12px 0; }
|
|
.mv-caption { display: grid; gap: 10px; padding: 18px 22px 22px; }
|
|
.mv-title { margin: 0; font: 400 26px/1.15 var(--pz-serif); color: var(--pz-ink); text-wrap: balance; padding-right: 8px; }
|
|
.mv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
|
|
.mv-person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.mv-person-avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; }
|
|
.mv-person-initial { display: grid; place-items: center; background: var(--pz-a100); color: var(--pz-a700); font: 400 13px/1 var(--pz-serif); }
|
|
.mv-person-name { font: 400 16px/1.2 var(--pz-serif); color: var(--pz-ink); }
|
|
.mv-person-name em { font-style: italic; font-weight: 300; }
|
|
.mv-person-years { font: 400 12.5px var(--pz-sans); color: var(--pz-muted); font-variant-numeric: tabular-nums; }
|
|
.mv-people { display: grid; justify-items: start; gap: 8px; }
|
|
.mv-people-btn { gap: 6px; }
|
|
.mv-people-edit { display: grid; gap: 10px; }
|
|
.mv-people-hint { margin: 0; font: 400 14px/1.45 var(--pz-sans); color: var(--pz-ink-2); }
|
|
.mv-people-notice { margin: 0; font: 400 13.5px/1.45 var(--pz-sans); color: var(--pz-success); }
|
|
.mv-source { margin: 0; font: 400 13px/1.5 var(--pz-sans); color: var(--pz-muted); overflow-wrap: anywhere; }
|
|
.mv-source a { color: var(--pz-a700); text-underline-offset: 3px; }
|
|
|
|
/* --- Skins par type --- */
|
|
|
|
/* Photo */
|
|
.media-photo-frame {
|
|
overflow: hidden;
|
|
border-radius: 14px;
|
|
background: var(--pz-bg);
|
|
}
|
|
|
|
/* La boîte suit la taille rendue de l'image : les points des visages s'y posent en pourcentage */
|
|
.media-photo-frame { display: grid; place-items: center; }
|
|
.mv-photo-box { position: relative; max-width: 100%; }
|
|
|
|
.media-photo-frame img {
|
|
max-width: 100%;
|
|
max-height: 68dvh;
|
|
object-fit: contain;
|
|
display: block;
|
|
background: var(--pz-bg);
|
|
}
|
|
|
|
/* Video */
|
|
.media-video-container {
|
|
background: #2A2622;
|
|
border-radius: 8px;
|
|
padding: 2.5rem 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
min-height: 220px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.media-video-perfs {
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
gap: 6px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.media-video-perfs.right {
|
|
left: auto;
|
|
right: 8px;
|
|
}
|
|
|
|
.media-video-perf {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 1px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.media-video-play {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.media-video-play:hover {
|
|
background: rgba(255, 255, 255, 0.18);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.media-video-play-triangle {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 20px solid rgba(255, 255, 255, 0.7);
|
|
border-top: 12px solid transparent;
|
|
border-bottom: 12px solid transparent;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.media-video-text {
|
|
color: rgba(255, 255, 255, 0.35);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.media-video-player {
|
|
width: 100%;
|
|
border-radius: 10px;
|
|
background: #191817;
|
|
box-shadow: 0 3px 18px rgba(42, 38, 34, 0.24);
|
|
}
|
|
|
|
.media-video-container--youtube {
|
|
padding: 0;
|
|
min-height: 280px;
|
|
}
|
|
|
|
.media-video-player--youtube {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
border: none;
|
|
border-radius: 10px;
|
|
box-shadow: 0 3px 18px rgba(42, 38, 34, 0.24);
|
|
}
|
|
|
|
/* Audio */
|
|
.media-audio-container {
|
|
background: #2A2622;
|
|
border-radius: 50%;
|
|
width: 180px;
|
|
height: 180px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
box-shadow:
|
|
0 4px 30px rgba(42, 38, 34, 0.3),
|
|
inset 0 0 40px rgba(42, 38, 34, 0.2);
|
|
}
|
|
|
|
.media-audio-grooves {
|
|
position: absolute;
|
|
inset: 10px;
|
|
border-radius: 50%;
|
|
background: repeating-radial-gradient(
|
|
circle at center,
|
|
transparent 0px,
|
|
transparent 4px,
|
|
rgba(255, 255, 255, 0.04) 4px,
|
|
rgba(255, 255, 255, 0.04) 5px
|
|
);
|
|
}
|
|
|
|
.media-audio-label-circle {
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 50%;
|
|
background: #2a2622;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.media-audio-hole {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #2A2622;
|
|
}
|
|
|
|
.media-audio-text {
|
|
text-align: center;
|
|
color: #6B645D;
|
|
font-size: 14px;
|
|
margin-top: 1rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.media-audio-player-wrap {
|
|
margin-top: 36px;
|
|
padding: 10px;
|
|
border-radius: 999px;
|
|
background: var(--pz-a100);
|
|
}
|
|
|
|
.media-audio-player {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Document */
|
|
.media-document-container {
|
|
background: #FCF3EF;
|
|
border-radius: 2px;
|
|
padding: 2rem 1.5rem;
|
|
min-height: 160px;
|
|
position: relative;
|
|
box-shadow:
|
|
0 2px 12px rgba(42, 38, 34, 0.08),
|
|
0 0 0 1px rgba(42, 38, 34, 0.06);
|
|
}
|
|
|
|
.media-document-corner {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: linear-gradient(135deg, transparent 50%, #E6E1DA 50%);
|
|
}
|
|
|
|
.media-document-corner::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: linear-gradient(135deg, #F2EFEA 50%, transparent 50%);
|
|
}
|
|
|
|
.media-document-lines {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.media-document-line {
|
|
height: 3px;
|
|
background: rgba(42, 38, 34, 0.08);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.media-document-line:nth-child(3) { width: 85%; }
|
|
.media-document-line:nth-child(5) { width: 70%; }
|
|
.media-document-line:last-child { width: 45%; }
|
|
|
|
.media-document-text {
|
|
text-align: center;
|
|
color: #6B645D;
|
|
font-size: 14px;
|
|
margin-top: 1.25rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.media-document-viewer {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.media-document-pdf {
|
|
width: 100%;
|
|
min-height: 430px;
|
|
border: 1px solid rgba(42, 38, 34, 0.18);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.media-document-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.media-document-download {
|
|
color: #2a2622;
|
|
font-size: 14px;
|
|
font-weight: 450;
|
|
text-decoration: none;
|
|
border-bottom: 1px dashed rgba(42, 38, 34, 0.45);
|
|
}
|
|
|
|
.media-document-download:hover {
|
|
color: #2a2622;
|
|
border-bottom-color: rgba(42, 38, 34, 0.6);
|
|
}
|
|
|
|
/* Geo map */
|
|
.media-map-viewer {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.media-map-context {
|
|
position: relative;
|
|
height: 280px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(42, 38, 34, 0.14);
|
|
background: #f8e4db;
|
|
}
|
|
|
|
.media-map-embed {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
display: block;
|
|
}
|
|
|
|
.media-map-svg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.media-map-svg--standalone {
|
|
background: linear-gradient(160deg, #edf5fc 0%, #eef7ef 100%);
|
|
}
|
|
|
|
.media-map-grid {
|
|
fill: none;
|
|
stroke: rgba(42, 38, 34, 0.12);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.media-map-bg-center {
|
|
stop-color: rgba(255, 255, 255, 0.74);
|
|
}
|
|
|
|
.media-map-bg-edge {
|
|
stop-color: rgba(248, 228, 219, 0.84);
|
|
}
|
|
|
|
.media-map-trace {
|
|
fill: none;
|
|
stroke: #4076aa;
|
|
stroke-width: 2.4;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.media-map-point {
|
|
fill: #4f7660;
|
|
stroke: rgba(255, 255, 255, 0.85);
|
|
stroke-width: 1.4;
|
|
}
|
|
|
|
.media-map-point-ring {
|
|
fill: rgba(79, 118, 96, 0.2);
|
|
}
|
|
|
|
.media-map-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.media-map-meta span {
|
|
background: rgba(255, 255, 255, 0.68);
|
|
border: 1px solid rgba(42, 38, 34, 0.14);
|
|
border-radius: 999px;
|
|
padding: 4px 10px;
|
|
color: #2a2622;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.media-map-status {
|
|
color: #6b645d;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
padding: 16px;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
border: 1px dashed rgba(42, 38, 34, 0.22);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.media-map-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.media-map-open {
|
|
color: #37668f;
|
|
font-size: 14px;
|
|
font-weight: 450;
|
|
text-decoration: none;
|
|
border-bottom: 1px dashed rgba(55, 102, 143, 0.45);
|
|
}
|
|
|
|
.media-map-open:hover {
|
|
color: #2f5a7e;
|
|
border-bottom-color: rgba(47, 90, 126, 0.65);
|
|
}
|
|
|
|
/* Citation */
|
|
.media-citation-container {
|
|
margin: 44px 0 0;
|
|
padding: 8px 12px 8px 22px;
|
|
border-left: 2px solid var(--pz-a300);
|
|
}
|
|
|
|
.media-citation-text {
|
|
margin: 0;
|
|
font: 300 italic 26px/1.4 var(--pz-serif);
|
|
color: var(--pz-ink);
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.media-audio-container {
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
.mv-title { font-size: 22px; }
|
|
.media-citation-text { font-size: 22px; }
|
|
}
|
|
|
|
/* Modifier un souvenir : crayon discret, visible au survol sur ordinateur et au focus clavier,
|
|
toujours visible sur écran tactile (pointeur grossier) */
|
|
.mv-title-row { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
|
|
.mv-title-row .mv-title { min-width: 0; }
|
|
.mv-edit-btn {
|
|
flex: none;
|
|
width: 26px;
|
|
height: 26px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
margin-top: 2px;
|
|
padding: 0;
|
|
border: 1px solid var(--pz-a100);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--pz-a700);
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease, background-color 0.15s ease;
|
|
}
|
|
.mv-caption:hover .mv-edit-btn,
|
|
.mv-caption:focus-within .mv-edit-btn,
|
|
.mv-edit-btn:focus-visible { opacity: 1; }
|
|
.mv-edit-btn:hover { background: var(--pz-a100); }
|
|
.mv-edit-btn:focus-visible { outline: 2px solid var(--pz-a700); outline-offset: 2px; }
|
|
@media (hover: none) {
|
|
.mv-edit-btn { opacity: 1; }
|
|
}
|
|
|
|
.mv-edit-form { display: grid; gap: 12px; }
|
|
.mv-edit-field { display: grid; gap: 4px; }
|
|
.mv-edit-label { font: 400 12.5px var(--pz-sans); color: var(--pz-muted); }
|
|
.mv-edit-title,
|
|
.mv-edit-quote,
|
|
.mv-edit-select {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--pz-a100);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
color: var(--pz-ink);
|
|
font: 400 16px/1.3 var(--pz-sans);
|
|
}
|
|
.mv-edit-title { font-family: var(--pz-serif); font-size: 22px; }
|
|
.mv-edit-quote { font-family: var(--pz-serif); font-size: 18px; resize: vertical; }
|
|
.mv-edit-error { margin: 0; font: 400 13px var(--pz-sans); color: var(--pz-a700); }
|
|
.mv-edit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
|