mirror of
https://github.com/IliesAllali/parenthese.git
synced 2026-11-12 00:12:14 +00:00
317 lines
20 KiB
CSS
317 lines
20 KiB
CSS
/* ============================================================
|
||
Fiche d'une personne (DA terracotta)
|
||
Panneau flottant à gauche sur ordinateur, panneau qui monte par le bas sur téléphone.
|
||
Les variables --pz-* viennent de src/styles/pz.css.
|
||
============================================================ */
|
||
|
||
.person-card {
|
||
position: fixed;
|
||
left: 24px;
|
||
bottom: 24px;
|
||
z-index: 1000;
|
||
width: 384px;
|
||
max-height: calc(100dvh - 48px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
padding: 22px 20px 20px;
|
||
background: var(--pz-surface);
|
||
border: 1px solid var(--pz-line);
|
||
border-radius: var(--pz-r-l);
|
||
box-shadow: var(--pz-shadow-lg);
|
||
font-family: var(--pz-sans);
|
||
color: var(--pz-ink);
|
||
/* Pas d'entrée animée sur ordinateur : on ouvre une fiche des dizaines de fois par visite, elle apparaît d'un coup (Patch, 27/10) */
|
||
}
|
||
.person-card--edit-mode { border-color: var(--pz-a300); }
|
||
|
||
.pc-grab { display: none; }
|
||
.pc-close { position: absolute; top: 12px; right: 12px; }
|
||
.pc-hidden-input { display: none; }
|
||
|
||
/* ── En-tête ── */
|
||
.pc-head { --pc-name-h: 42px; --pc-name-gap: 6px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: start; padding-right: 36px; }
|
||
.pc-photo-wrap { position: relative; display: grid; gap: 8px; justify-items: center; flex: none; }
|
||
.pc-photo {
|
||
position: relative; width: 84px; height: 84px; border-radius: 24%; overflow: hidden;
|
||
background: var(--pz-a100); box-shadow: 0 0 0 1px rgba(42, 38, 34, .06), var(--pz-shadow);
|
||
display: grid; place-items: center;
|
||
}
|
||
.pc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.pc-photo-initials { font: 400 30px/1 var(--pz-serif); color: var(--pz-a700); }
|
||
/* Menu du choix de source du portrait : au-dessus de la fiche (z-index 1000), sous la modale Immich (2200) */
|
||
.pc-source-backdrop { position: fixed; inset: 0; z-index: 1100; }
|
||
.pc-source-menu { position: fixed; z-index: 1150; min-width: 220px; }
|
||
/* Mode modification : le portrait prend la hauteur des deux champs Prénom et Nom (écart compris) et reste carré */
|
||
.person-card--edit-mode .pc-id { padding-top: 0; }
|
||
.person-card--edit-mode .pc-photo-wrap { display: block; }
|
||
/* Taille fixée par les champs, pas par le contenu : une vraie photo a une taille propre qui faisait grandir le portrait */
|
||
.person-card--edit-mode .pc-photo-wrap > .pc-photo { --pc-photo-edit: calc(var(--pc-name-h) * 2 + var(--pc-name-gap)); width: var(--pc-photo-edit); height: var(--pc-photo-edit); }
|
||
|
||
.pc-photo-badge {
|
||
position: absolute; right: -6px; bottom: -6px; z-index: 1;
|
||
width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
|
||
border: 0; border-radius: 50%; background: #fff; color: var(--pz-ink-2); cursor: pointer;
|
||
box-shadow: 0 0 0 1px rgba(42, 38, 34, .06), var(--pz-shadow);
|
||
transition: transform 140ms var(--pz-ease), background-color 160ms ease;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
@media (hover: hover) and (pointer: fine) { .pc-photo-badge:hover:not(:disabled) { background: var(--pz-a50); color: var(--pz-a700); } }
|
||
.pc-photo-badge:active:not(:disabled) { transform: scale(.94); }
|
||
.pc-photo-badge:focus-visible { outline: 2px solid var(--pz-a500); outline-offset: 2px; }
|
||
.pc-photo-badge:disabled { opacity: .5; cursor: default; }
|
||
|
||
.pc-id { display: grid; gap: 6px; min-width: 0; padding-top: 4px; }
|
||
.pc-name { margin: 0; font: 400 28px/1.08 var(--pz-serif); letter-spacing: -.01em; color: var(--pz-ink); text-wrap: balance; }
|
||
.pc-name em { font-style: italic; font-weight: 300; }
|
||
.pc-meta { margin: 0; font: 400 13.5px/1.5 var(--pz-sans); color: var(--pz-muted); text-wrap: pretty; }
|
||
.pc-meta-item { display: inline; }
|
||
.pc-meta-item--nowrap { white-space: nowrap; }
|
||
.pc-nick { font: italic 300 15.5px/1 var(--pz-serif); color: var(--pz-ink-2); }
|
||
.pc-meta-sep { margin: 0 .45em; color: var(--pz-faint); }
|
||
.pc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
|
||
.pc-chips:empty { display: none; }
|
||
/* Place dans la fratrie (mode édition) : ‹ 2 sur 3 › dans une pastille */
|
||
.pz-tag.pc-order { gap: 0; padding: 1px; }
|
||
.pc-order-label { padding: 0 1px; font-variant-numeric: tabular-nums; }
|
||
.pc-order-btn {
|
||
display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0;
|
||
border: 0; border-radius: 999px; background: transparent; color: var(--pz-ink-2); cursor: pointer;
|
||
transition: transform 140ms var(--pz-ease), background-color 160ms ease, color 160ms ease;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.pc-order-btn:active:not(:disabled) { transform: scale(.92); }
|
||
.pc-order-btn:disabled { opacity: .35; cursor: default; }
|
||
.pc-order-btn:focus-visible { outline: 2px solid var(--pz-a500); outline-offset: 1px; }
|
||
@media (hover: hover) and (pointer: fine) {
|
||
.pc-order-btn:hover:not(:disabled) { background: var(--pz-line-soft); color: var(--pz-ink); }
|
||
}
|
||
@media (pointer: coarse) { .pc-order-btn { width: 32px; height: 32px; } }
|
||
.pc-name-edit { display: grid; gap: var(--pc-name-gap); }
|
||
|
||
/* ── Champs d'édition ── */
|
||
.pc-input {
|
||
width: 100%; min-height: 38px; padding: 8px 10px; box-sizing: border-box;
|
||
font: 400 14px/1.4 var(--pz-sans); color: var(--pz-ink);
|
||
background: var(--pz-surface); border: 1px solid var(--pz-line); border-radius: var(--pz-r-s);
|
||
transition: border-color 160ms ease, box-shadow 160ms ease;
|
||
}
|
||
.pc-input:focus { outline: none; border-color: var(--pz-a500); box-shadow: 0 0 0 3px var(--pz-a100); }
|
||
.pc-input::placeholder { color: var(--pz-faint); }
|
||
.pc-input--name { font: 400 20px/1.2 var(--pz-serif); min-height: var(--pc-name-h); }
|
||
.pc-input--last { font-style: italic; }
|
||
.pc-note-input { min-height: 88px; resize: vertical; }
|
||
|
||
/* ── Onglets et corps ── */
|
||
.pc-tabs { flex: none; }
|
||
/* Quatre onglets en modification (Liens en plus) : « Souvenirs · 3 » ne passe jamais à la ligne, il prend la place
|
||
que les onglets courts lui laissent */
|
||
.pc-tabs .pz-tab { flex: 1 1 auto; padding: 0 10px; white-space: nowrap; }
|
||
.pc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px 2px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--pz-line) transparent; }
|
||
.pc-inline-msg { font: 500 13px/1.45 var(--pz-sans); }
|
||
.pc-inline-msg--loading { padding: 10px 12px; border-radius: var(--pz-r-s); background: var(--pz-bg); color: var(--pz-muted); }
|
||
|
||
/* Souvenirs */
|
||
.pc-souvenirs { display: grid; gap: 12px; }
|
||
.pc-empty { display: grid; gap: 4px; padding: 22px 16px; text-align: center; border: 1px dashed var(--pz-a300); border-radius: var(--pz-r-m); background: var(--pz-a50); }
|
||
|
||
.pc-quote {
|
||
display: block; width: 100%; text-align: left; cursor: pointer;
|
||
margin: 0; padding: 4px 0 4px 16px; border: 0; border-left: 2px solid var(--pz-a300); background: none;
|
||
font: 300 italic 19px/1.4 var(--pz-serif); color: var(--pz-ink);
|
||
}
|
||
.pc-quote small { display: block; margin-top: 6px; font: 400 12px var(--pz-sans); font-style: normal; color: var(--pz-muted); }
|
||
|
||
.pc-voice {
|
||
display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px 8px 8px; cursor: pointer;
|
||
border: 0; border-radius: 999px; background: var(--pz-a100); text-align: left;
|
||
transition: background-color 160ms ease, transform 140ms var(--pz-ease);
|
||
}
|
||
.pc-voice:active { transform: scale(.985); }
|
||
@media (hover: hover) and (pointer: fine) { .pc-voice:hover { background: var(--pz-a200); } }
|
||
.pc-voice-play { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--pz-ink); color: var(--pz-bg); }
|
||
.pc-voice-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 24px; min-width: 60px; }
|
||
.pc-voice-wave i { flex: 1; border-radius: 2px; background: var(--pz-a500); opacity: .8; }
|
||
.pc-voice-label { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px var(--pz-sans); color: var(--pz-ink-2); }
|
||
|
||
.pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
|
||
.pc-tile {
|
||
position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; cursor: pointer;
|
||
border: 0; border-radius: var(--pz-r-s); background: var(--pz-a50);
|
||
transition: transform 160ms var(--pz-ease), box-shadow 160ms ease;
|
||
}
|
||
.pc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.pc-tile:active { transform: scale(.97); }
|
||
@media (hover: hover) and (pointer: fine) { .pc-tile:hover { box-shadow: 0 0 0 2px var(--pz-a300); } }
|
||
.pc-tile-video { width: 100%; height: 100%; display: grid; place-items: center; background: var(--pz-ink); color: var(--pz-bg); }
|
||
.pc-tile-label {
|
||
position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px;
|
||
font: 500 10.5px/1.25 var(--pz-sans); color: #fff; text-align: left;
|
||
background: linear-gradient(to top, rgba(42, 38, 34, .72), rgba(42, 38, 34, 0));
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
.pc-tile--add { display: grid; place-items: center; color: var(--pz-a700); background: transparent; border: 1.5px dashed var(--pz-a300); }
|
||
|
||
.pc-list { display: grid; gap: 6px; }
|
||
/* Souvenirs des autres où la personne est identifiée */
|
||
.pc-tagged { display: grid; gap: 8px; }
|
||
.pc-tagged-title { margin: 4px 0 0; font: 500 13px/1.3 var(--pz-sans); color: var(--pz-muted); }
|
||
.pc-list-item {
|
||
display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; cursor: pointer; text-align: left;
|
||
border: 1px solid var(--pz-line); border-radius: var(--pz-r-m); background: var(--pz-surface);
|
||
transition: border-color 160ms ease;
|
||
}
|
||
@media (hover: hover) and (pointer: fine) { .pc-list-item:hover { border-color: var(--pz-a300); } }
|
||
.pc-list-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--pz-a50); color: var(--pz-a700); font-size: 16px; }
|
||
.pc-list-icon img { width: 100%; height: 100%; object-fit: cover; }
|
||
.pc-list-text { display: grid; gap: 2px; min-width: 0; }
|
||
.pc-list-label { font: 500 14px/1.3 var(--pz-sans); color: var(--pz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.pc-list-type { font: 400 12px var(--pz-sans); color: var(--pz-muted); }
|
||
.person-card-media-thumb { width: 100%; height: 100%; border-radius: 6px; }
|
||
|
||
/* Infos */
|
||
.pc-infos { display: grid; gap: 18px; }
|
||
.pc-section { display: grid; gap: 8px; }
|
||
.pc-rows { display: grid; }
|
||
.pc-row {
|
||
display: flex; justify-content: space-between; align-items: center; gap: 16px;
|
||
min-height: 38px; padding: 6px 0; border-bottom: 1px solid var(--pz-line-soft);
|
||
}
|
||
.pc-row:last-child { border-bottom: 0; }
|
||
.pc-label { flex: none; font: 400 13.5px var(--pz-sans); color: var(--pz-muted); }
|
||
.pc-row .value { font: 400 14px/1.4 var(--pz-sans); color: var(--pz-ink); text-align: right; font-variant-numeric: tabular-nums; }
|
||
.pc-row .pc-input { max-width: 62%; text-align: right; }
|
||
/* Date : une année seule ou une date complète (issue #77), avec une aide si le texte n'en est pas une */
|
||
.pc-row .pz-date { justify-items: end; max-width: 62%; }
|
||
.pc-row .pz-date .pc-input { max-width: 100%; }
|
||
.pc-row .pz-date-hint { text-align: right; }
|
||
.pc-note { margin: 0; font: 400 italic 16px/1.5 var(--pz-serif); color: var(--pz-ink-2); white-space: pre-wrap; }
|
||
|
||
.pc-alive {
|
||
display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; cursor: pointer;
|
||
border: 1px solid var(--pz-line); border-radius: 999px; background: var(--pz-surface);
|
||
font: 500 13px var(--pz-sans); color: var(--pz-ink-2);
|
||
}
|
||
.pc-alive-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pz-faint); }
|
||
.pc-alive.is-alive .pc-alive-dot { background: var(--pz-success); }
|
||
.pc-verify.is-on { background: var(--pz-a100); color: var(--pz-a700); border-color: transparent; }
|
||
.pc-verify.is-on .pc-alive-dot { background: var(--pz-a500); }
|
||
|
||
/* Liens (relations) */
|
||
.pc-rel-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; }
|
||
.pc-rel-avatar {
|
||
width: 34px; height: 34px; flex: none; overflow: hidden; border-radius: 50%;
|
||
display: grid; place-items: center; background: var(--pz-a100); color: var(--pz-a700); font: 400 15px/1 var(--pz-serif);
|
||
}
|
||
.pc-rel-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||
.pc-rel-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; }
|
||
.pc-rel-name em { font-style: italic; font-weight: 300; }
|
||
.pc-rel-meta { flex: none; font: 400 12px var(--pz-sans); color: var(--pz-muted); }
|
||
.pc-rel-remove { width: 32px; min-height: 32px; color: var(--pz-muted); }
|
||
.pc-rel-empty { margin: 0; font: 400 13px var(--pz-sans); color: var(--pz-faint); }
|
||
.pc-rel-add {
|
||
display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 34px; padding: 0 12px; cursor: pointer;
|
||
border: 1px dashed var(--pz-a300); border-radius: 999px; background: transparent;
|
||
font: 500 13px var(--pz-sans); color: var(--pz-a700);
|
||
transition: background-color 160ms ease;
|
||
}
|
||
@media (hover: hover) and (pointer: fine) { .pc-rel-add:hover { background: var(--pz-a50); } }
|
||
.pc-rel-add:disabled { opacity: .5; cursor: default; }
|
||
|
||
.pc-search { display: grid; gap: 6px; }
|
||
.pc-search-field { position: relative; display: flex; align-items: center; }
|
||
.pc-search-icon { position: absolute; left: 12px; color: var(--pz-muted); pointer-events: none; }
|
||
.pc-search-input {
|
||
width: 100%; min-height: 40px; padding: 8px 40px 8px 36px; box-sizing: border-box;
|
||
font: 400 14px var(--pz-sans); color: var(--pz-ink); background: var(--pz-surface);
|
||
border: 1px solid var(--pz-a500); border-radius: 999px; box-shadow: 0 0 0 3px var(--pz-a100);
|
||
}
|
||
.pc-search-input:focus { outline: none; }
|
||
.pc-search-close { position: absolute; right: 2px; width: 34px; min-height: 34px; }
|
||
.pc-search-list { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; border: 1px solid var(--pz-line); border-radius: var(--pz-r-m); background: var(--pz-surface); box-shadow: var(--pz-shadow); }
|
||
.pc-search-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; }
|
||
@media (hover: hover) and (pointer: fine) { .pc-search-item:hover { background: var(--pz-a50); } }
|
||
|
||
/* ── Pied d'édition ── */
|
||
.pc-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--pz-line); }
|
||
.pc-foot .pc-save { margin-left: auto; }
|
||
.pc-save.is-saved { background: var(--pz-success); }
|
||
|
||
/* ── Téléphone : panneau qui monte par le bas ── */
|
||
@media (max-width: 768px) {
|
||
.person-card {
|
||
left: 0; right: 0; bottom: 0; width: auto;
|
||
max-height: 78dvh; padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
|
||
border-radius: 26px 26px 0 0; border-bottom: 0;
|
||
/* Ombre pleine sous la feuille, en premier pour passer au-dessus de l'ombre floue : tirée vers le haut (40 px au plus, sheetOffset), elle ne laisse pas voir l'arbre dessous */
|
||
box-shadow: 0 40px 0 var(--pz-surface), var(--pz-shadow-lg);
|
||
/* Pas de fill-mode « both » : une fois l'entrée finie, le glisser (style inline) reprend la main sur transform */
|
||
animation: pc-sheet 240ms var(--pz-ease-drawer) backwards;
|
||
transition: transform 240ms var(--pz-ease-drawer);
|
||
}
|
||
/* Pendant le glisser, la feuille suit le doigt sans transition */
|
||
.person-card[data-dragging] { transition: none; }
|
||
/* La poignée et l'en-tête portent le geste : le navigateur ne doit pas le prendre pour un défilement (les champs gardent le leur) */
|
||
.person-card .pc-grab, .person-card .pc-close, .person-card .pc-head { touch-action: none; }
|
||
.person-card .pc-head :is(input, textarea, select, label, [contenteditable]) { touch-action: auto; }
|
||
.pc-grab { display: block; width: 38px; height: 4px; margin: 0 auto 2px; border-radius: 4px; background: var(--pz-line); flex: none; }
|
||
.pc-close { top: 10px; right: 10px; }
|
||
.pc-photo { width: 68px; height: 68px; }
|
||
.pc-name { font-size: 24px; }
|
||
@keyframes pc-sheet { from { transform: translateY(100%); } to { transform: none; } }
|
||
}
|
||
/* Coins continus là où le navigateur sait les dessiner (Chromium) ; ailleurs, les arcs de cercle d'avant. Le rayon grandit
|
||
parce qu'un squircle de même rayon paraît plus anguleux. */
|
||
@supports (corner-shape: squircle) {
|
||
.person-card { corner-shape: squircle; border-radius: 34px; }
|
||
.pc-photo { corner-shape: squircle; border-radius: 38%; }
|
||
.pc-tile, .pc-list-item { corner-shape: squircle; border-radius: 18px; }
|
||
@media (max-width: 768px) { .person-card { border-radius: 40px 40px 0 0; } }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.person-card { transition-duration: 1ms; }
|
||
}
|
||
/* Mouvements réduits : la feuille du téléphone ne monte plus, elle s'affiche en fondu court */
|
||
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
|
||
.person-card { animation: pz-fade 200ms ease both; }
|
||
}
|
||
|
||
/* Prénom inconnu (issue Anaïs, 18/10) : libellé en italique, case à cocher sous les champs de nom */
|
||
.pc-name-unknown { font-style: italic; font-weight: 300; }
|
||
.pc-unknown-first { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: -4px 0 0; font: 400 12.5px var(--pz-sans); color: var(--pz-ink-2); cursor: pointer; white-space: nowrap; }
|
||
.pc-unknown-first input { width: 15px; height: 15px; accent-color: var(--pz-a500); }
|
||
.pc-name-error { margin: 6px 0 0; font: 500 12.5px var(--pz-sans); color: var(--pz-danger); }
|
||
.pc-save-error { margin: 0; font: 500 12.5px/1.4 var(--pz-sans); color: var(--pz-danger); }
|
||
|
||
/* Modification de l'onglet Infos : pastilles des champs vides (DA terracotta, sans nouvelle couleur) */
|
||
.pc-fill-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
|
||
.pc-fill-chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--pz-a300); background: var(--pz-a50); color: var(--pz-a700); font: 500 13px var(--pz-sans); cursor: pointer; }
|
||
@media (hover: hover) and (pointer: fine) { .pc-fill-chip:hover { background: var(--pz-a100); border-color: var(--pz-a500); } }
|
||
.pc-fill-chip:focus-visible { outline: 2px solid var(--pz-a500); outline-offset: 2px; }
|
||
|
||
/* Liens : parents adoptifs, réglage de la filiation */
|
||
.pc-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
|
||
.pc-adopt-tag { font: 500 12px var(--pz-sans); color: var(--pz-a700); background: var(--pz-a50); border: 1px solid var(--pz-a300); border-radius: 999px; padding: 1px 9px; }
|
||
.pc-parentage { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pz-line-soft); }
|
||
.pc-seg { width: 100%; }
|
||
.pc-seg .pz-tab { flex: 1; }
|
||
/* Sexe (issue #114) : étiquette au-dessus, trois choix sur toute la largeur, chacun sur une ligne */
|
||
.pc-row--seg { flex-direction: column; align-items: stretch; gap: 6px; }
|
||
.pc-row--seg .pz-tab { white-space: nowrap; padding: 0 8px; }
|
||
|
||
/* Titres de section de l'onglet Infos et Liens : casse normale, Newsreader 15 px, comme la maquette (.sec) */
|
||
.pc-infos .pz-eyebrow { text-transform: none; letter-spacing: 0; font: 400 15px/1.3 var(--pz-serif); color: var(--pz-ink); }
|
||
|
||
/* « Modifier » de l'administrateur : une pastille de la ligne des repères, qui fait passer la fiche en modification */
|
||
.pc-quick-edit {
|
||
display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
|
||
background: var(--pz-surface); color: var(--pz-ink); box-shadow: inset 0 0 0 1px var(--pz-line); font: 500 12.5px var(--pz-sans);
|
||
}
|
||
.pc-quick-edit:focus-visible { outline: 2px solid var(--pz-a500); outline-offset: 2px; }
|
||
@media (hover: hover) and (pointer: fine) { .pc-quick-edit:hover { background: var(--pz-line-soft); } }
|
||
|
||
/* « Créer « Jeanne » comme parent » sous la recherche d'un proche */
|
||
.pc-search-create .pc-rel-avatar { color: var(--pz-a700); background: var(--pz-a50); }
|
||
.pc-search-create em { color: var(--pz-muted); font-style: normal; }
|