mirror of
https://github.com/IliesAllali/parenthese.git
synced 2026-11-13 16:22:03 +00:00
IliesAllaliandClaude Fable 5.1
3df9abe63f
- La barre d'onglets signale par un fondu le côté qui défile encore. - Un fil de famille reliée deux fois qui passerait sous d'autres couples de la rangée des parents devient une pastille, comme celui qui passerait devant la rangée de l'enfant (archétype cousins mis à jour). - Une belle-famille en construction ne s'approprie pas une chaîne du sang de la référence dont les parents sont ailleurs : elle ira sous eux. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
104 lines
3.3 KiB
CSS
104 lines
3.3 KiB
CSS
.galaxy-canvas {
|
|
cursor: default;
|
|
display: block;
|
|
touch-action: none;
|
|
-ms-touch-action: none;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
/* ============================================================
|
|
Overlay label lien de parenté — taille fixe, bas-centre
|
|
============================================================ */
|
|
|
|
.path-label-overlay {
|
|
position: fixed;
|
|
bottom: 88px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 500;
|
|
|
|
background: rgba(42, 38, 34, 0.88);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
font-family: "DM Sans", system-ui, sans-serif;
|
|
padding: 8px 20px;
|
|
border-radius: 20px;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
|
|
animation: pathLabelIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
@keyframes pathLabelIn {
|
|
from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.95); }
|
|
to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.path-label-overlay {
|
|
bottom: 76px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
Onglets de familles : un onglet par famille, en haut à gauche
|
|
============================================================ */
|
|
|
|
.family-tabs {
|
|
position: fixed;
|
|
top: 16px;
|
|
left: 16px;
|
|
z-index: 500;
|
|
display: flex;
|
|
gap: 6px;
|
|
max-width: calc(100vw - 120px);
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
padding: 4px;
|
|
}
|
|
.family-tabs::-webkit-scrollbar { display: none; }
|
|
/* Bords coupés : un fondu de chaque côté qui défile encore */
|
|
.family-tabs.has-left { mask-image: linear-gradient(to right, transparent, #000 36px); -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); }
|
|
.family-tabs.has-right { mask-image: linear-gradient(to left, transparent, #000 36px); -webkit-mask-image: linear-gradient(to left, transparent, #000 36px); }
|
|
.family-tabs.has-left.has-right { mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
|
|
|
|
.family-tab {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 7px;
|
|
padding: 7px 14px 8px;
|
|
border-radius: 999px;
|
|
border: 1px solid #EBE6DF;
|
|
background: #FFFFFF;
|
|
color: #2A2622;
|
|
font-family: "Newsreader", Georgia, serif;
|
|
font-size: 15px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.family-tab:hover { border-color: #D9CFC6; }
|
|
.family-tab:focus-visible { outline: 2px solid #C9553D; outline-offset: 2px; }
|
|
.family-tab.is-active { background: #2A2622; border-color: #2A2622; color: #FFFFFF; }
|
|
.family-tab-count {
|
|
font-family: "DM Sans", system-ui, sans-serif;
|
|
font-size: 11px;
|
|
color: #93402A;
|
|
}
|
|
.family-tab.is-active .family-tab-count { color: #EDB6A4; }
|
|
|
|
/* En mode modification, le message « Vous proposez des changements » occupe le haut au centre : la barre
|
|
se limite à la moitié gauche sur grand écran et descend sous le message sur téléphone */
|
|
.family-tabs--lowered { max-width: calc(50vw - 200px); }
|
|
|
|
@media (max-width: 768px) {
|
|
.family-tabs { top: 10px; left: 10px; max-width: calc(100vw - 84px); }
|
|
.family-tabs--lowered { top: 64px; max-width: calc(100vw - 20px); }
|
|
.family-tab { font-size: 14px; padding: 6px 12px 7px; }
|
|
}
|