WebtreesFullDiagram/resources/css/full-diagram.css

/* Full Diagram Chart Styles */

/* ── Container ── */
.full-diagram-container {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #f8f9fa;
    overflow: hidden;
    /* Break out of webtrees content column to use full viewport width */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* Block variant: stay within card boundaries */
.full-diagram-block {
    width: 100%;
    margin-left: 0;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
}

.full-diagram-chart {
    width: 100%;
    height: 100%;
}

.full-diagram-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Person cards (SVG) ── */
.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 */
.person-card .person-name {
    font-size: 12px;
    font-weight: 600;
    fill: #212529;
    dominant-baseline: auto;
}

.person-card .person-dates {
    font-size: 10px;
    fill: #6c757d;
    dominant-baseline: auto;
}

.person-card .person-subtitle {
    font-size: 9px;
    fill: #868e96;
    font-style: italic;
    dominant-baseline: auto;
}

/* ── More ancestors/descendants indicators ── */
.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;
}

.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;
}

/* ── Connector lines ── */
.link {
    fill: none;
    stroke: #adb5bd;
    stroke-width: 1.5;
}

.couple-link {
    stroke: #868e96;
    stroke-width: 2;
}

.ancestor-link {
    stroke: #adb5bd;
}

.descendant-link {
    stroke: #adb5bd;
}

/* ── Bio card tooltip ── */
.bio-card {
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 12px;
    min-width: 220px;
    max-width: 300px;
    font-size: 12px;
    color: #212529;
    pointer-events: auto;
}

.bio-header {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    align-items: center;
}

.bio-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.bio-header-text {
    flex: 1;
    min-width: 0;
}

.bio-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
}

.bio-age {
    font-size: 11px;
    color: #6c757d;
    margin-top: 2px;
}

.bio-facts {
    border-top: 1px solid #eee;
    padding-top: 6px;
}

.bio-fact {
    display: flex;
    gap: 6px;
    margin-bottom: 3px;
    line-height: 1.4;
}

.bio-fact-label {
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

.bio-fact-label::after {
    content: ":";
}

.bio-fact-value {
    color: #6c757d;
}

.bio-link {
    display: block;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #eee;
    color: #4a90d9;
    text-decoration: none;
    font-size: 11px;
}

.bio-link:hover {
    text-decoration: underline;
}

/* ── Zoom controls ── */
.zoom-controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

.zoom-controls button {
    width: 32px;
    height: 32px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    color: #495057;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.zoom-controls button:hover {
    background: #e9ecef;
}

/* ── Print styles ── */
@media print {
    .full-diagram-container {
        border: none;
        height: auto !important;
        overflow: visible;
    }
    .zoom-controls {
        display: none;
    }
}