Codex
33 lines
16 KiB
CSS
33 lines
16 KiB
CSS
.family-workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}.family-canvas-panel{background:#17262b;border:1px solid #39504f;border-radius:14px;overflow:hidden;min-width:0}.family-map-heading{padding:22px 22px 16px;display:flex;justify-content:space-between;align-items:center;gap:14px}.family-map-heading h2{font-size:23px;margin:8px 0 0;letter-spacing:2px}.family-map-heading .eyebrow{font-size:9px}.family-view-tabs{display:flex;border:1px solid var(--line);border-radius:8px;padding:3px;flex-shrink:0}.family-view-tabs button{border:0;padding:8px 12px;border-radius:5px;font-size:12px}.family-view-tabs [aria-pressed=true]{background:#30574c;color:#b8f2df}.family-map-controls{padding:0 20px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.family-map-controls button{font-size:12px;padding:7px 10px}.family-zoom-controls{display:flex;gap:5px;align-items:center;margin-right:auto}.family-zoom-controls output{font-size:11px;min-width:38px;text-align:center;color:var(--muted)}.family-map-viewport{height:clamp(440px,65vh,740px);overflow:auto;background-color:#e8eeea;background-image:radial-gradient(#b5c5bb 1px,transparent 1px);background-size:22px 22px;position:relative;overscroll-behavior:contain;cursor:grab;scrollbar-color:#82988b #dce5de;scrollbar-width:thin;outline-offset:-3px}.family-map-viewport.panning{cursor:grabbing;user-select:none}.family-map-space{position:relative;min-width:100%;min-height:100%}.family-map-surface{position:absolute;left:0;top:0;transform-origin:0 0}.family-map-lines{position:absolute;inset:0;overflow:visible;pointer-events:none}.family-edge{fill:none;stroke:#86a299;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.family-edge.spouse{stroke:#bd9050;stroke-dasharray:5 4;stroke-width:2}.family-edge.nonbiological{stroke:#9987b4;stroke-dasharray:4 3}.family-edge.focused{stroke-width:2.6;stroke:#337b66}.family-edge.spouse.focused{stroke:#ab791e}.family-edge.nonbiological.focused{stroke:#7b55a2}.family-branch-label{position:absolute;color:#536c60;font-size:12px;letter-spacing:1px;pointer-events:none}.family-node{position:absolute;border:1px solid #c4d0c7;border-radius:12px;background:#fffef9;color:#273e33;padding:13px 15px;text-align:left;white-space:normal;box-shadow:0 4px 11px #263c3010;display:flex;flex-direction:column;gap:4px;overflow:visible;cursor:pointer;transition:box-shadow .15s,border-color .15s}.family-node:hover{filter:none;box-shadow:0 6px 20px #30583d30;border-color:#5b9179}.family-node:focus-visible{outline:3px solid #205a48;outline-offset:4px}.family-node>strong{font-size:16px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:30px}.family-node-top{position:absolute;right:12px;top:12px}.family-node-avatar{display:flex;width:28px;height:28px;align-items:center;justify-content:center;background:#e9f0e8;border-radius:9px;font-family:'Noto Serif SC','SimSun',serif;color:#48745c;font-size:17px}.family-node-flags{position:absolute;right:0;top:36px;display:grid;gap:4px;justify-items:end;white-space:nowrap}.family-node-flags>small{font-size:9px;color:#748375}.family-node .family-node-relation{display:block;font-size:11px;color:#577868;max-width:120px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.family-node>small{font-size:10px;color:#7a8a80;margin-top:auto}.family-node.self{background:#f6d795;border:2px solid #c49337;box-shadow:0 5px 18px #b487242e}.family-node.self .family-node-avatar{background:#fbe8bd;color:#82561f}.family-node.self>strong{color:#5d3d15}.family-node.self .family-node-relation,.family-node.self>small{color:#7d622f}.self-badge{display:inline-block;border-radius:4px;background:#996e2b;color:#fff4d7;padding:2px 5px;font-size:9px;font-weight:600;letter-spacing:.5px}.family-node.selected{outline:3px solid #3d9175;outline-offset:4px}.family-node.search-hit:after{content:'匹配';position:absolute;left:12px;top:-12px;padding:2px 6px;border-radius:4px;background:#315f8d;color:white;font-size:9px;box-shadow:0 2px 4px #0002}.family-node.archived{border-style:dashed}.family-map-footer{padding:15px 20px;border-top:1px solid #a4b7a41f}.family-map-legend{display:flex;gap:15px;flex-wrap:wrap;font-size:11px;color:#a5bbb4;margin-bottom:9px}.family-map-legend>span{display:flex;align-items:center;gap:6px}.family-map-legend i{display:inline-block;width:19px;height:2px;background:#86a299}.family-map-legend i.legend-self{width:11px;height:11px;background:#f6d795;border-radius:3px}.family-map-legend i.legend-selected{width:11px;height:11px;background:transparent;border:2px solid #64bc9d;border-radius:3px}.family-map-legend i.legend-spouse{background:none;border-top:2px dashed #bd9050}.family-map-legend i.legend-adoptive{background:none;border-top:2px dashed #aa98c4}.family-map-footer .description{font-size:11px;margin:0;line-height:1.8}.family-map-footer #family-map-note:not(:empty){padding:8px 0;color:#c9bc9a}.family-inspector{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto;margin:0;padding:20px;min-width:0;scrollbar-width:thin}.family-inspector.is-self{border-color:#b08848;background:linear-gradient(145deg,#343323,#18272a 55%)}.family-self-heading{color:#e8c780;font-size:12px;margin-bottom:18px}.family-back-to-map{display:block;margin:0 0 18px auto;font-size:11px}#family-detail .section-head{gap:12px;flex-wrap:wrap}#family-detail .section-head>div{display:block}#family-detail .section-head h2{font-size:23px;overflow-wrap:anywhere}#family-detail dl{grid-template-columns:1fr;gap:12px;margin:18px 0 24px}#family-detail dl>div{grid-template-columns:76px minmax(0,1fr);gap:9px}#family-detail h3{font-size:14px;margin-top:24px}#family-detail .family-link{align-items:flex-start;overflow-wrap:anywhere;font-size:12px}#family-detail .family-link .quiet{padding:5px 8px;font-size:11px}#family-detail .family-prose{font-size:13px}.family-register{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));max-height:clamp(440px,65vh,740px);overflow:auto;padding:20px;align-content:start;background:#132226}.person-card.self{background:#463e27;border-color:#b28f50;color:#f1dca7}.person-card.self span:not(.self-badge){color:#e0c995}.person-card.self small{color:#b8a98b}.person-card.selected{outline:2px solid #63b89c;outline-offset:-2px}.family-map-viewport>.empty{border:0;background:transparent;color:#5c7567;height:100%;display:flex;flex-direction:column;justify-content:center;margin:0}.family-map-viewport>.empty h3{color:#314d3d}.family-toolbar #family-search{width:190px}.family-toolbar #family-reference{max-width:180px}.family-toolbar{gap:12px}.family-workspace:is(:fullscreen,.family-expanded){width:100vw;height:100dvh;background:#10191d;padding:16px;align-items:stretch;overflow:auto}.family-workspace:is(:fullscreen,.family-expanded) .family-canvas-panel{height:100%;display:flex;flex-direction:column}.family-workspace:is(:fullscreen,.family-expanded) .family-map-viewport{flex:1;height:auto;min-height:200px}.family-workspace:is(:fullscreen,.family-expanded) .family-register{max-height:none;flex:1}.family-workspace:is(:fullscreen,.family-expanded) .family-inspector{position:static;max-height:100%;overflow:auto}.family-workspace:is(:fullscreen,.family-expanded) .family-map-heading{padding:14px 20px}.family-workspace:is(:fullscreen,.family-expanded) .family-map-footer{padding:10px 20px}
|
|
@media(max-width:1250px){.family-workspace{grid-template-columns:minmax(0,1fr) 270px}.family-map-heading{align-items:flex-start;flex-wrap:wrap}.family-map-controls{gap:6px}.family-map-controls button{padding:7px 8px}.family-inspector{padding:16px}.family-toolbar>span{margin-left:0}}
|
|
@media(max-width:1000px){.family-workspace{grid-template-columns:1fr}.family-inspector{position:static;max-height:none}.family-map-viewport{height:560px}.family-register{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));max-height:560px}.family-workspace:is(:fullscreen,.family-expanded){display:flex;flex-direction:column;gap:10px}.family-workspace:is(:fullscreen,.family-expanded) .family-canvas-panel{min-height:65vh;flex:1;flex-shrink:0}.family-workspace:is(:fullscreen,.family-expanded) .family-inspector{max-height:35vh;flex-shrink:0}}
|
|
@media(max-width:600px){#page-family>.section-head{align-items:flex-start;flex-wrap:wrap}#page-family>.section-head>div{gap:7px;flex-wrap:wrap}#page-family>.section-head button{font-size:12px;padding:8px 10px}.family-toolbar{padding:15px}.family-toolbar label{width:100%;display:flex;justify-content:space-between;flex-wrap:nowrap}.family-toolbar label.check{justify-content:flex-start}.family-toolbar input,.family-toolbar #family-search,.family-toolbar #family-reference{width:60%;max-width:60%}.family-toolbar input[type=checkbox]{width:16px}.family-map-heading{padding:17px 15px}.family-map-heading h2{font-size:21px}.family-map-controls{padding:0 12px 14px}.family-map-footer{padding:13px 15px}.family-map-legend{gap:10px}.family-map-viewport{height:470px}.family-register{grid-template-columns:1fr 1fr;padding:12px;gap:10px}.family-register .person-card{padding:12px}.family-workspace:is(:fullscreen,.family-expanded){padding:8px}.family-map-footer>.description:last-child{font-size:10px}}
|
|
.family-map-heading{flex-wrap:wrap}.family-view-tabs{max-width:100%;flex-wrap:wrap}.family-view-tabs button{font-size:11px}.family-event-intro{display:flex;justify-content:space-between;gap:15px;padding:8px 22px 12px;align-items:flex-start}.family-event-intro h3{font-size:16px;line-height:1.7;margin:0 0 7px}.family-event-intro p{margin:0}.family-event-intro button{font-size:12px;padding:9px 12px}.family-event-filters{display:flex;gap:12px;flex-wrap:wrap;padding:15px 22px;background:#101e2366;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.family-event-filters label{display:flex;font-size:12px;gap:7px;flex-wrap:wrap}.family-event-filters input:not([type=checkbox]){width:170px}.family-event-filters select{max-width:180px;font-size:12px;padding:8px}.family-event-filters .check{width:100%;font-size:11px}.family-event-filters button{font-size:11px;padding:7px 10px}.family-event-filters #family-event-state-label{margin-right:auto}#family-event-count{padding:16px 22px 0;margin-bottom:0}.family-timeline{padding:0 22px 28px;max-height:680px;overflow:auto;scrollbar-width:thin}.timeline-year{font-family:Georgia,'SimSun',serif;color:#a4d6c3;font-size:27px;margin:30px 0 18px;letter-spacing:1px}.timeline-year span{font-family:inherit;font-size:12px;color:var(--muted);margin-left:8px}.timeline-event{display:flex;align-items:flex-start;gap:18px;position:relative;width:100%;background:transparent;color:inherit;text-align:left;padding:0 0 24px;border-radius:0;border:0;white-space:normal}.timeline-event:hover{filter:none}.timeline-event:before{content:'';position:absolute;left:85px;top:10px;bottom:-10px;border-left:1px solid #466659}.timeline-event:after{content:'';position:absolute;left:81px;top:6px;width:9px;height:9px;border-radius:50%;background:#7eccac;box-shadow:0 0 0 4px #1c342d}.timeline-event>time{font-size:12px;font-weight:400;color:#9bb3ae;flex:0 0 70px;margin-top:1px}.timeline-event-body{margin-left:12px;flex:1;min-width:0;border:1px solid #345248;border-radius:10px;padding:17px 19px;background:#20352f;display:flex;flex-direction:column;gap:11px}.timeline-event:hover .timeline-event-body{border-color:#71ad94;background:#264037}.timeline-event-body>strong{font-size:17px;line-height:1.6;color:#dfebe5;overflow-wrap:anywhere}.timeline-event-status{font-size:9px;color:#9fc8b7;letter-spacing:1px}.timeline-summary{font-size:12px;color:#a4beb2;line-height:1.8;font-weight:400;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line;overflow-wrap:anywhere}.timeline-event-body>small{font-size:11px;color:#acc9b5;font-weight:400}.timeline-read{font-size:11px;color:#83d6b5;font-weight:400}.timeline-event.draft .timeline-event-body{border-style:dashed;background:#282e30}.timeline-event.draft:after{background:#aea087}.event-associated{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:22px 0}.event-associated button{font-size:12px}.event-detail-meta{display:flex;gap:15px;justify-content:space-between;align-items:flex-start;margin:20px 0;color:#97baac;font-size:12px}.event-detail-meta time{line-height:1.8}#event-detail-title{font-size:26px;line-height:1.6;overflow-wrap:anywhere}.event-lead{border-left:3px solid #8cb8a1;background:#233a32;padding:14px 18px;white-space:pre-wrap;font-size:14px;overflow-wrap:anywhere}.event-article{font-size:15px;line-height:2;margin:28px 0;color:#c9d9d1}.event-source{display:inline-block;white-space:normal;overflow-wrap:anywhere;line-height:1.7;margin:8px 0}.event-updated{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}#event-person-choices{display:flex;gap:12px;flex-wrap:wrap;max-height:170px;overflow:auto;padding:14px 0}#event-person-choices label{display:flex;flex-direction:row;align-items:center}.event-editor-actions{gap:12px}.person-events{border-top:1px solid var(--line);margin-top:25px;padding-top:15px}.person-events .section-head{gap:8px}.person-events .section-head h3{margin:0!important;font-size:13px!important}.person-events .section-head small{letter-spacing:0;margin-left:4px}.person-events .section-head button{font-size:10px;padding:6px 7px}.person-event-link{display:flex;flex-direction:column;gap:6px;border:0;background:transparent;color:#c0d6c9;text-align:left;padding:10px 0;margin-bottom:8px;white-space:normal;line-height:1.7;font-size:12px}.person-event-link time{font-size:10px;color:#87a495}.family-workspace:is(:fullscreen,.family-expanded) #family-events{overflow:auto}.family-workspace:is(:fullscreen,.family-expanded) .family-timeline{max-height:none}
|
|
@media(max-width:600px){.family-event-intro{flex-wrap:wrap;padding:8px 15px 15px}.family-event-filters{padding:15px;gap:10px}.family-event-filters label{font-size:11px}.family-event-filters .check{line-height:1.8;flex-wrap:nowrap}.family-timeline{padding:0 15px 22px}.timeline-event{gap:8px}.timeline-event>time{font-size:10px;flex-basis:55px}.timeline-event:before{left:62px}.timeline-event:after{left:58px}.timeline-event-body{padding:13px;margin-left:9px}.timeline-event-body>strong{font-size:15px}.family-view-tabs button{padding:8px 10px}#event-detail-title{font-size:22px}.event-detail-meta{flex-wrap:wrap}.event-editor-actions{flex-wrap:wrap}}
|
|
|
|
.family-workspace.family-expanded{position:fixed;inset:0;z-index:8;}
|
|
|
|
/* Keep scaled descendants and fractional fullscreen sizes out of the
|
|
scrollable overflow calculation. Reserve one gutter instead of alternating. */
|
|
.family-map-viewport{scrollbar-gutter:stable;overflow-anchor:none}
|
|
.family-map-space{min-width:0;min-height:0;overflow:clip}
|
|
.family-workspace:is(:fullscreen,.family-expanded){min-height:0;grid-template-rows:minmax(0,1fr)}
|
|
.family-workspace:is(:fullscreen,.family-expanded) .family-canvas-panel{min-height:0}
|
|
.family-workspace:is(:fullscreen,.family-expanded) .family-map-heading,
|
|
.family-workspace:is(:fullscreen,.family-expanded) .family-map-controls,
|
|
.family-workspace:is(:fullscreen,.family-expanded) .family-map-footer{flex-shrink:0}
|
|
.family-workspace.family-expanded{z-index:1100}
|
|
@media(max-width:1000px){.family-workspace:is(:fullscreen,.family-expanded) .family-canvas-panel{min-height:65vh}}
|
|
|
|
/* Versions remain readable on a small screen, including long family narratives. */
|
|
#history-dialog{width:min(1040px,94vw)}
|
|
#history-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;max-height:260px;overflow:auto;margin:16px 0}
|
|
.history-entry{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:6px;white-space:normal}
|
|
.history-entry small,.history-entry span{color:var(--muted);font-size:12px}
|
|
.history-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}
|
|
.history-columns section{min-width:0}.history-columns dd{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto}
|
|
.history-columns dl>div{padding:10px;border-bottom:1px solid #30434a}.history-changed{background:#27443e66;border-radius:8px}
|
|
#history-confirm{padding:16px;border:1px solid #74d0b7;border-radius:12px;margin-top:18px}
|
|
#history-confirm button{margin:6px}#history-error:empty{display:none}
|
|
@media(max-width:650px){.history-columns{grid-template-columns:1fr}#history-list{max-height:200px}}
|