129 lines
2.5 KiB
CSS
129 lines
2.5 KiB
CSS
/* Family Navigator Graph — Sidebar Styles
|
|
*
|
|
* Uses the same class names as the full-diagram plugin so that
|
|
* a single theme override applies to both visualizations.
|
|
* The graph renders inline — no viewport, no zoom, no borders.
|
|
*/
|
|
|
|
/* ── Sidebar container — seamless, no viewport ── */
|
|
.wt-sidebar-family-nav-graph {
|
|
padding: 0;
|
|
}
|
|
|
|
.fng-container {
|
|
position: relative;
|
|
}
|
|
|
|
.fng-container .full-diagram-chart svg {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* ── Person cards (SVG) — shared with full-diagram ── */
|
|
.person-card rect {
|
|
fill: #e8e8e8;
|
|
stroke: #b0b0b0;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.person-card.sex-m rect {
|
|
fill: #d4e6f9;
|
|
stroke: #7bafd4;
|
|
}
|
|
|
|
.person-card.sex-f rect {
|
|
fill: #f9d4e6;
|
|
stroke: #d47ba8;
|
|
}
|
|
|
|
.person-card.is-root rect {
|
|
stroke: #495057;
|
|
stroke-width: 2.5;
|
|
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
|
|
}
|
|
|
|
.person-card:hover rect {
|
|
filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
|
|
}
|
|
|
|
/* Photo placeholder */
|
|
.person-card .photo-placeholder {
|
|
fill: #ddd;
|
|
stroke: none;
|
|
}
|
|
|
|
.person-card.sex-m .photo-placeholder {
|
|
fill: #b8d4ed;
|
|
}
|
|
|
|
.person-card.sex-f .photo-placeholder {
|
|
fill: #edb8d4;
|
|
}
|
|
|
|
.person-card .silhouette {
|
|
fill: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* Card text — scoped to fng-container to avoid overriding full-diagram */
|
|
.fng-container .person-card .person-name {
|
|
font-size: 8px;
|
|
font-weight: 600;
|
|
fill: #212529;
|
|
dominant-baseline: auto;
|
|
}
|
|
|
|
.fng-container .person-card .person-dates {
|
|
font-size: 8px;
|
|
fill: #6c757d;
|
|
dominant-baseline: auto;
|
|
}
|
|
|
|
/* ── Connector lines — shared with full-diagram ── */
|
|
.link {
|
|
fill: none;
|
|
stroke: #adb5bd;
|
|
stroke-width: 1.5;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.couple-link {
|
|
stroke: #868e96;
|
|
}
|
|
|
|
.ancestor-link {
|
|
stroke: #adb5bd;
|
|
}
|
|
|
|
.descendant-link {
|
|
stroke: #adb5bd;
|
|
}
|
|
|
|
/* ── More ancestors / descendants indicators — shared with full-diagram ── */
|
|
.more-ancestors-indicator rect,
|
|
.more-descendants-indicator rect {
|
|
fill: #dee2e6;
|
|
stroke: #adb5bd;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.more-ancestors-indicator line,
|
|
.more-descendants-indicator line {
|
|
stroke: #adb5bd;
|
|
stroke-width: 1.5;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.person-card.sex-m .more-ancestors-indicator rect,
|
|
.person-card.sex-m .more-descendants-indicator rect {
|
|
fill: #c4d9f0;
|
|
stroke: #7bafd4;
|
|
}
|
|
|
|
.person-card.sex-f .more-ancestors-indicator rect,
|
|
.person-card.sex-f .more-descendants-indicator rect {
|
|
fill: #f0c4d9;
|
|
stroke: #d47ba8;
|
|
}
|