/* ========================================================== FAMILY GRAPH PAGE ONLY (NO LEAK) File: public/stylesheets/family-graph.css ========================================================== */ /* Put this class on body only for the graph page: */ body.fam-graph-body { margin: 0; padding: 0; } body.fam-graph-body main { margin-top: 0 !important; padding-top: 0 !important; } #fam-graph-page { position: relative; overflow: hidden; height: 100vh; background: #000; } /* Cytoscape container ONLY (scoped!) */ #fam-graph-page #cy { position: fixed; top: var(--nav-h, 56px); left: 0; right: 0; bottom: 0; background: #000; z-index: 1; } /* ================= OVERLAY LAYOUT ================= */ #fam-graph-page .graph-overlay { position: fixed; top: calc(var(--nav-h, 56px) + 10px); left: 0; right: 0; z-index: 20; padding: 0 12px; /* Default (mobile + iPad/tablet): stacked */ display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; } #fam-graph-page #family-graph { margin: 0; font-size: 2rem; color: rgba(255, 255, 255, 0.5); pointer-events: none; text-align: center; white-space: nowrap; } #fam-graph-page #reference-text { margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); line-height: 1.5; text-align: center; pointer-events: none; } /* ================= SEARCH UI (BASE) ================= */ #fam-graph-page .graph-search, #fam-graph-page .graph-search * { box-sizing: border-box; } #fam-graph-page .graph-search { pointer-events: auto; background: rgba(0,0,0,0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 10px; border-radius: 16px; } #fam-graph-page .graph-search .search-row { display: flex; align-items: center; gap: 10px; } /* input baseline */ #fam-graph-page #graphSearchInput { width: 320px; /* ✅ controlled width on desktop */ max-width: 320px; min-width: 200px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(15, 15, 15, 0.65); color: #fff; outline: none; margin: 0; } #fam-graph-page #graphSearchInput::placeholder { color: rgba(255, 255, 255, 0.5); } /* buttons row NEVER WRAPS */ #fam-graph-page .graph-search .btn-row { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; /* 🔑 never stack */ white-space: nowrap; /* 🔑 keep text on one line */ } #fam-graph-page .graph-search .btn-row > * { white-space: nowrap; flex: 0 0 auto; } #fam-graph-page .graph-btn-clear { padding: 0.45rem 0.85rem; line-height: 1; } #fam-graph-page .graph-search .hint, #fam-graph-page #graphSearchHint { color: rgba(255, 255, 255, 0.6); font-size: 12px; max-width: 100%; display: block; margin-top: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ================= MOBILE + iPAD/TABLET: STACKED ================= */ @media (max-width: 1199.98px) { #fam-graph-page .graph-search { width: min(620px, calc(100vw - 24px)); /* 12px + 12px */ margin: 0 auto; } /* stack input and buttons */ #fam-graph-page .graph-search .search-row { flex-direction: column; align-items: center; } #fam-graph-page #graphSearchInput { width: 100%; max-width: 100%; min-width: 0; } #fam-graph-page .graph-search .btn-row { justify-content: center; } #fam-graph-page #graphSearchHint { white-space: normal; overflow: visible; text-overflow: initial; } } /* ================= DESKTOP: CORNERS + CENTERED SEARCH ================= */ @media (min-width: 1200px) { /* Title left | Search centered | Reference right */ #fam-graph-page .graph-overlay { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); grid-template-areas: "title search ref"; align-items: start; gap: 12px; } #fam-graph-page #family-graph { grid-area: title; justify-self: start; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; } #fam-graph-page #reference-text { grid-area: ref; justify-self: end; text-align: right; min-width: 0; } /* center search card */ #fam-graph-page .graph-search { grid-area: search; justify-self: center; } /* if translations become insanely long, allow scroll INSIDE button row (still one line) */ #fam-graph-page .graph-search .btn-row { overflow-x: auto; -webkit-overflow-scrolling: touch; } #fam-graph-page .graph-search .btn-row::-webkit-scrollbar { height: 0; /* optional: hide scroll bar */ } } /* ================================ Family Graph Add Person Modal (dropdown-menu / glass vibe) ================================ */ #fam-graph-page .graph-modal-glass { background: rgba(10, 12, 18, 0.52); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03); } #fam-graph-page .graph-modal-header { border-bottom: 1px solid rgba(255,255,255,0.08); } #fam-graph-page .graph-modal-close { opacity: 0.85; } #fam-graph-page .graph-modal-close:hover { opacity: 1; } #fam-graph-page .graph-modal-subtitle { color: rgba(255,255,255,0.55); font-size: 0.8rem; letter-spacing: 0.4px; margin-bottom: 0.5rem; } #fam-graph-page .graph-modal-menu { background: rgba(18, 20, 26, 0.35); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; overflow: hidden; } #fam-graph-page .graph-modal-item { width: 100%; text-align: left; background: transparent; border: 0; color: rgba(255,255,255,0.88); padding: 0.55rem 0.9rem; transition: background 0.15s ease, color 0.15s ease; } #fam-graph-page .graph-modal-item:hover, #fam-graph-page .graph-modal-item:focus { background: rgba(124,92,255,0.12); color: #fff; outline: none; } #fam-graph-page .graph-modal-item + .graph-modal-item { border-top: 1px solid rgba(255,255,255,0.06); } #fam-graph-page .graph-modal-hint { color: rgba(255,255,255,0.5); font-size: 0.75rem; line-height: 1.3; }