246 lines
15 KiB
CSS
246 lines
15 KiB
CSS
|
/* 赵府智家 · 庭院书卷。Keep visual tokens separate from layout and playback. */
|
||
|
|
:root {
|
||
|
|
color-scheme: light;
|
||
|
|
--paper: #f4f0e7;
|
||
|
|
--ink: #2d3932;
|
||
|
|
--muted: #6e6b5f;
|
||
|
|
--line: #dcd5c6;
|
||
|
|
--panel: #fffdf8;
|
||
|
|
--accent: #315b4d;
|
||
|
|
--cinnabar: #9e4b3d;
|
||
|
|
--gold: #86682f;
|
||
|
|
--serif: "Songti SC", "STSong", "SimSun", serif;
|
||
|
|
--timeline-paper: #ede8dd;
|
||
|
|
--timeline-grid: #d3ccbc;
|
||
|
|
--timeline-range: #4c7761;
|
||
|
|
color: var(--ink);
|
||
|
|
background: var(--paper);
|
||
|
|
font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
background-image: radial-gradient(ellipse at 85% 0, #e4e9df80, transparent 50%);
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
::selection { background: #e8d7ad; color: #2d3932; }
|
||
|
|
button, .button, input, select, textarea, fieldset { border-radius: 5px; }
|
||
|
|
button, .button { background: var(--accent); color: #fffdf6; font-weight: 500; transition: background .15s, border-color .15s, box-shadow .15s; }
|
||
|
|
button:hover, .button:hover { filter: brightness(.95); }
|
||
|
|
.secondary { background: #e8ede5; color: #315b4d; border-color: #c7d3c4; }
|
||
|
|
.quiet { background: transparent; color: #586653; border-color: #cfcfbf; }
|
||
|
|
input, select, textarea { color: var(--ink); background: #fffefa; border-color: #cbc5b6; }
|
||
|
|
input::placeholder, textarea::placeholder { color: #847f72; }
|
||
|
|
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #315b4d12; }
|
||
|
|
input[type=range], input[type=checkbox] { accent-color: var(--accent); }
|
||
|
|
label, .family-date legend { color: #625f53; }
|
||
|
|
h1, h2, h3 { font-family: var(--serif); font-weight: 600; }
|
||
|
|
h1 { font-size: 34px; letter-spacing: 4px; margin-top: 17px; }
|
||
|
|
h2 { letter-spacing: 1px; }
|
||
|
|
.sidebar {
|
||
|
|
width: 222px;
|
||
|
|
background: #213d34;
|
||
|
|
background-image: linear-gradient(145deg, #2d4b3d, transparent 60%);
|
||
|
|
border-right: 1px solid #425344;
|
||
|
|
padding: 30px 18px 20px;
|
||
|
|
color: #ebe7d8;
|
||
|
|
scrollbar-width: thin;
|
||
|
|
scrollbar-color: #6f8271 #213d34;
|
||
|
|
}
|
||
|
|
.sidebar .brand { gap: 11px; padding: 4px 5px 30px; color: #f3eddf; font-family: var(--serif); font-size: 22px; letter-spacing: 2px; }
|
||
|
|
.brand-icon { width: 44px; height: 44px; border-radius: 5px; outline: 1px solid #c6b98c66; outline-offset: 3px; }
|
||
|
|
.brand small { font-family: "Microsoft YaHei", sans-serif; color: #c0c7b5; font-size: 9px; letter-spacing: 2px; margin-top: 10px; }
|
||
|
|
.nav-label { color: #b2bba6; font-size: 10px; padding: 12px 13px 17px; letter-spacing: 3px; border-top: 1px solid #b9c2aa24; }
|
||
|
|
.sidebar nav { gap: 5px; }
|
||
|
|
.sidebar nav button { color: #c9d1be; border-radius: 4px; padding: 12px 13px; gap: 13px; position: relative; border: 1px solid transparent; background: transparent; }
|
||
|
|
.sidebar nav button span { font-size: 13px; letter-spacing: .6px; }
|
||
|
|
.sidebar nav button:hover { background: #ffffff09; filter: none; }
|
||
|
|
.sidebar nav button.active { background: #efebdc; border-color: #e0d6b8; color: #244638; }
|
||
|
|
.sidebar nav button.active::after { content: ""; width: 5px; height: 5px; background: var(--cinnabar); position: absolute; right: 13px; transform: rotate(45deg); }
|
||
|
|
.sidebar .side-note { padding: 22px 5px 8px; color: #c4ccb9; font-size: 11px; }
|
||
|
|
.sidebar .dot { background: #afc39c; width: 5px; height: 5px; }
|
||
|
|
.sidebar #current-user { color: #d3d7c8; padding: 10px 5px 0; border-top: 1px solid #b9c2aa24; }
|
||
|
|
.sidebar .quiet { color: #d1d6c6; border-color: #8b9a813f; padding: 9px; font-size: 11px; }
|
||
|
|
.sidebar #account-password { margin-bottom: 8px; }
|
||
|
|
.sidebar :focus-visible { outline-color: #e7c887; }
|
||
|
|
main { margin-left: 222px; padding: 30px 38px 22px; max-width: 1900px; }
|
||
|
|
main > header { min-height: 142px; padding: 13px 0 23px; margin-bottom: 25px; border-bottom: 1px solid #b4b5a2; position: relative; gap: 24px; isolation: isolate; }
|
||
|
|
main > header::after { content: ""; position: absolute; bottom: -2px; left: 0; height: 3px; width: 48px; background: var(--cinnabar); }
|
||
|
|
main > header > div { position: relative; z-index: 1; }
|
||
|
|
.eyebrow { color: var(--gold); font-size: 10px; letter-spacing: 3px; }
|
||
|
|
header p { color: #686f60; font-size: 12px; letter-spacing: .5px; }
|
||
|
|
.header-status { color: #666e5e; gap: 12px; font-size: 11px; flex-shrink: 0; }
|
||
|
|
.courtyard-landscape { position: absolute; width: 330px; height: 125px; right: 5px; bottom: 0; z-index: 0; pointer-events: none; opacity: .55; }
|
||
|
|
.badge { background: #e4eddf; color: #355b3d; border: 1px solid #c8d6be; border-radius: 3px; font-size: 10px; }
|
||
|
|
.badge.off { background: #f2e8d9; color: #835428; border-color: #dfc6a3; }
|
||
|
|
.metrics { background: #fcfaf4; border-radius: 6px; box-shadow: 0 3px 12px #3a402905; }
|
||
|
|
.metrics > div { padding: 20px 22px; align-items: baseline; }
|
||
|
|
.metrics span { color: #6f7260; }
|
||
|
|
.metrics strong { font-family: Georgia, var(--serif); color: #365846; font-size: 29px; }
|
||
|
|
.filter-row { color: #6e6b5f; margin: 24px 0; }
|
||
|
|
.section-head { margin-top: 25px; }
|
||
|
|
.section-head small { color: #8a7859; font-size: 9px; letter-spacing: 2px; }
|
||
|
|
.wall-toolbar { padding: 12px 15px; background: #eae8dc; border: 1px solid var(--line); border-radius: 5px; gap: 14px; }
|
||
|
|
.wall-toolbar select { background: #f9f6ed; }
|
||
|
|
.live-grid { gap: 22px; }
|
||
|
|
.camera-card, .site-card, .panel, .empty, .family-canvas-panel { border-radius: 6px; box-shadow: 0 4px 18px #39422a05; }
|
||
|
|
.camera-card { border-color: #d2cebe; }
|
||
|
|
.camera-meta { padding: 17px 18px 13px; }
|
||
|
|
.camera-meta strong { font-family: var(--serif); font-size: 16px; letter-spacing: .5px; }
|
||
|
|
.camera-meta p { color: #737464; margin-top: 7px; }
|
||
|
|
.camera-actions { flex-wrap: wrap; gap: 7px; padding-bottom: 16px; }
|
||
|
|
.camera-actions .quiet { border-color: #dbd9cb; color: #52604d; background: #faf9f2; }
|
||
|
|
.video-panel { border-radius: 5px; border-color: #c1c6b8; }
|
||
|
|
.video-empty { color: #b0bdae; background: radial-gradient(ellipse at center, #243d34 0, transparent 70%); }
|
||
|
|
.video-empty .lens { color: #a5bca4; }
|
||
|
|
.video-error { color: #f6d7c1; background: #472c26ed; }
|
||
|
|
.empty { color: #6c7462; border-color: #c3c6b6; }
|
||
|
|
.empty h3 { color: #384e3b; font-size: 21px; }
|
||
|
|
.panel { padding: 24px; }
|
||
|
|
.time-labels { color: #6e705e; }
|
||
|
|
.recording-item { color: #35533f; background: #f9f7ee; border-color: #d5d1c0; }
|
||
|
|
.recording-item small { color: #737261; }
|
||
|
|
.scan-chip { background: #fffdf7; border-radius: 5px; }
|
||
|
|
.device-table { border-radius: 5px; }
|
||
|
|
.device-table th { color: #6a6d5c; background: #ecebde; }
|
||
|
|
.device-table td small { color: #737261; }
|
||
|
|
.device-table tbody tr:hover { background: #f2f1e7; }
|
||
|
|
.site-card h3 { font-size: 20px; }
|
||
|
|
.site-card dt { color: #737261; }
|
||
|
|
.site-card dd { color: #384e3b; }
|
||
|
|
.audit-item { color: #56654f; }
|
||
|
|
.audit-item small { color: #767461; }
|
||
|
|
.banner { color: #784c26; background: #f6e9cf; border-color: #dfc797; }
|
||
|
|
dialog { background: #fbf8ef; color: var(--ink); border: 1px solid #d5c8ac; border-radius: 8px; box-shadow: 0 28px 100px #172c3455; padding: 30px; }
|
||
|
|
dialog::backdrop { background: #20382cb8; backdrop-filter: blur(5px); }
|
||
|
|
.dialog-heading { border-bottom: 1px solid var(--line); padding-bottom: 20px; gap: 16px; }
|
||
|
|
.dialog-heading h2 { font-size: 23px; }
|
||
|
|
.dialog-footer { gap: 10px; flex-wrap: wrap; }
|
||
|
|
#auth-dialog { border-top: 4px solid var(--cinnabar); padding: 38px; background-image: radial-gradient(ellipse at 100% 0, #e4e9dd, transparent 65%); }
|
||
|
|
#auth-dialog .brand-icon { width: 52px; height: 52px; }
|
||
|
|
#auth-form h2 { font-size: 32px; letter-spacing: 3px; margin-top: 26px; }
|
||
|
|
#auth-form p { color: #6b725d; }
|
||
|
|
.form-error { color: #994437; }
|
||
|
|
footer { color: #716b5b; font-size: 10px; letter-spacing: .5px; }
|
||
|
|
#toast { background: #2a4c3c; color: #f3efdc; border-color: #819672; border-radius: 5px; box-shadow: 0 8px 25px #30433726; max-width: calc(100vw - 30px); }
|
||
|
|
.ptz-panel { background: #f8f5eb; border-color: #b9c5ad; border-radius: 7px; box-shadow: 0 12px 50px #26392d44; color: var(--ink); }
|
||
|
|
.ptz-pad [data-ptz-action=stop] { color: #8b4236; background: #efdbd0; border-color: #d5b2a4; }
|
||
|
|
#preset-confirmation { background: #f4e2d5; }
|
||
|
|
#snapshot-image { border-radius: 4px; }
|
||
|
|
/* Family register: paper, ink lines and a restrained gold highlight for oneself. */
|
||
|
|
.family-canvas-panel { background: #fcfaf3; border-color: #c7cbb7; }
|
||
|
|
.family-map-heading { padding-top: 24px; }
|
||
|
|
.family-map-heading h2 { letter-spacing: 3px; font-size: 25px; }
|
||
|
|
.family-view-tabs { background: #f1eee2; border-color: #d7d0bf; border-radius: 4px; }
|
||
|
|
.family-view-tabs button { color: #606650; border-radius: 2px; }
|
||
|
|
.family-view-tabs [aria-pressed=true] { background: #365945; color: #fffbed; }
|
||
|
|
.family-map-viewport { background-color: #efece0; background-image: radial-gradient(#c9cbbb 1px, transparent 1px); scrollbar-color: #8b9a7b #e8e6d8; }
|
||
|
|
.family-map-lines marker path { fill: #678b71; }
|
||
|
|
.family-edge { stroke: #94a58a; }
|
||
|
|
.family-edge.focused { stroke: #446b50; }
|
||
|
|
.family-edge.spouse { stroke: #a9854f; }
|
||
|
|
.family-edge.nonbiological { stroke: #93829e; }
|
||
|
|
.family-node { background: #fffdf6; border-color: #c9cdb9; border-radius: 5px; color: #304632; box-shadow: 0 3px 12px #3943250d; }
|
||
|
|
.family-node > strong { font-family: var(--serif); font-size: 17px; }
|
||
|
|
.family-node-avatar { background: #e8ecdf; color: #536e45; border-radius: 4px; }
|
||
|
|
.family-node .family-node-relation { color: #53664a; }
|
||
|
|
.family-node > small, .family-node-flags > small { color: #6f775f; }
|
||
|
|
.family-node.self { background: #f1ddb0; border-color: #af873f; box-shadow: 0 5px 18px #b4872425; }
|
||
|
|
.family-node.self .family-node-avatar { background: #f8eac9; }
|
||
|
|
.family-node.selected { outline-color: #426c50; }
|
||
|
|
.family-node.search-hit::after { background: #596b78; }
|
||
|
|
.self-badge { background: #94682f; color: #fff8e9; border-radius: 2px; }
|
||
|
|
.family-map-footer { border-color: #d0d3c0; }
|
||
|
|
.family-map-legend { color: #69705b; }
|
||
|
|
.family-map-footer #family-map-note:not(:empty) { color: #87652f; }
|
||
|
|
.family-inspector.is-self { background: linear-gradient(135deg, #f3e3bd, #fcfaf1 65%); border-color: #c3a66b; }
|
||
|
|
.family-self-heading { color: #88652d; letter-spacing: 1px; }
|
||
|
|
.family-register { background: #eeecdf; }
|
||
|
|
.person-card { color: #344732; border-color: #c9cbb9; }
|
||
|
|
.person-card.selected { background: #e6ecdc; outline-color: #66845b; }
|
||
|
|
.person-card.self { background: #f1ddb0; border-color: #b89553; color: #5f461f; }
|
||
|
|
.person-card.self span:not(.self-badge), .person-card.self small { color: #765b2e; }
|
||
|
|
.family-tree ul { border-color: #a2b197; }
|
||
|
|
.family-workspace:is(:fullscreen, .family-expanded) { background: var(--paper); }
|
||
|
|
.family-event-filters { background: #f0eee2; }
|
||
|
|
.timeline-year { color: #456344; font-family: var(--serif); }
|
||
|
|
.timeline-event::before { border-color: #b7c2a5; }
|
||
|
|
.timeline-event::after { background: #768d5f; box-shadow: 0 0 0 4px #e7ebdc; }
|
||
|
|
.timeline-event > time { color: #6c745d; }
|
||
|
|
.timeline-event-body { background: #fffdf6; border-color: #d3d6c2; border-radius: 5px; }
|
||
|
|
.timeline-event:hover .timeline-event-body { background: #f7f7ec; border-color: #8caa78; }
|
||
|
|
.timeline-event-body > strong { color: #344d32; font-family: var(--serif); font-size: 18px; }
|
||
|
|
.timeline-event-status, .timeline-summary, .timeline-event-body > small { color: #6b725b; }
|
||
|
|
.timeline-read { color: #41623b; }
|
||
|
|
.timeline-event.draft .timeline-event-body { background: #efede3; }
|
||
|
|
.timeline-event.draft::after { background: #a28a62; }
|
||
|
|
.event-detail-meta, .person-event-link time { color: #71745e; }
|
||
|
|
.event-lead { background: #eaecdd; border-color: #8e9f77; color: #46553b; }
|
||
|
|
.event-article { color: #424c3a; }
|
||
|
|
.person-event-link { color: #455a3c; }
|
||
|
|
.history-columns dl > div { border-color: #d9d6c4; }
|
||
|
|
.history-changed { background: #e8ecda; border-radius: 4px; }
|
||
|
|
#history-confirm { border-color: #b3be98; border-radius: 5px; background: #efefdf; }
|
||
|
|
/* The monitoring wall stays dark to keep attention on live video. */
|
||
|
|
#page-live:fullscreen { --muted: #c0c9b4; --line: #52614d; --panel: #25352c; color: #efecdd; background: #111c16; color-scheme: dark; }
|
||
|
|
#page-live:fullscreen .wall-toolbar { background: #24372b; border-color: #40543e; }
|
||
|
|
#page-live:fullscreen label { color: #d9deca; }
|
||
|
|
#page-live:fullscreen select { background: #1a2a20; color: #ebeede; border-color: #65765a; }
|
||
|
|
#page-live:fullscreen .quiet { color: #d9dfca; border-color: #66765a; background: transparent; }
|
||
|
|
#page-live:fullscreen .camera-card { border-color: #394f38; }
|
||
|
|
#page-live:fullscreen .camera-actions { background: #17251ee8; }
|
||
|
|
#page-live:fullscreen .ptz-panel { --muted: #6e6b5f; --line: #dcd5c6; color-scheme: light; }
|
||
|
|
#page-live:fullscreen .ptz-panel label, #page-live:fullscreen .ptz-panel .quiet { color: #586653; border-color: #cfcfbf; }
|
||
|
|
@media (min-width: 1600px) { main { padding-left: 46px; padding-right: 46px; } }
|
||
|
|
@media (max-width: 1100px) {
|
||
|
|
.sidebar { width: 200px; padding: 27px 14px 18px; }
|
||
|
|
.sidebar .brand { font-size: 20px; gap: 9px; }
|
||
|
|
.brand-icon { width: 38px; height: 38px; }
|
||
|
|
main { margin-left: 200px; padding: 24px; }
|
||
|
|
.metrics > div { padding: 18px 14px; }
|
||
|
|
.metrics strong { font-size: 25px; }
|
||
|
|
.courtyard-landscape { width: 260px; opacity: .4; }
|
||
|
|
}
|
||
|
|
@media (max-width: 760px) {
|
||
|
|
.sidebar { position: static; width: auto; padding: 22px 17px 14px; display: grid; grid-template-columns: 1fr auto; gap: 0 10px; overflow: visible; }
|
||
|
|
.sidebar .brand { padding: 2px 4px 20px; font-size: 22px; grid-column: 1/-1; }
|
||
|
|
.brand-icon { width: 38px; height: 38px; }
|
||
|
|
.brand small { font-size: 9px; }
|
||
|
|
.sidebar nav { grid-column: 1/-1; display: flex; overflow-x: auto; gap: 5px; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: #819573 #213d34; }
|
||
|
|
.sidebar nav button { padding: 10px 12px; gap: 7px; flex-shrink: 0; }
|
||
|
|
.sidebar nav button span { font-size: 12px; }
|
||
|
|
.sidebar nav button.active::after { display: none; }
|
||
|
|
.sidebar #current-user { position: static; grid-column: 1/-1; margin: 4px 0 10px; padding-top: 12px; font-size: 11px; }
|
||
|
|
.sidebar #account-password, .sidebar #logout { margin: 0; font-size: 11px; padding: 8px 12px; align-self: center; width: fit-content; }
|
||
|
|
.sidebar #logout { justify-self: end; }
|
||
|
|
main { margin: 0; padding: 20px 17px; }
|
||
|
|
main > header { min-height: 132px; padding-top: 9px; gap: 10px; margin-bottom: 20px; }
|
||
|
|
h1 { font-size: 28px; letter-spacing: 3px; }
|
||
|
|
.eyebrow { font-size: 9px; letter-spacing: 2px; }
|
||
|
|
.header-status { font-size: 9px; gap: 9px; max-width: 123px; padding-top: 2px; }
|
||
|
|
.header-status .badge { font-size: 9px; }
|
||
|
|
header p { max-width: 205px; font-size: 11px; line-height: 1.8; }
|
||
|
|
.courtyard-landscape { width: 170px; height: 90px; right: 0; opacity: .38; }
|
||
|
|
.metrics > div { padding: 16px; }
|
||
|
|
.metrics strong { font-size: 25px; }
|
||
|
|
.metrics > div:nth-last-child(-n+2) { border-bottom: 0; }
|
||
|
|
.filter-row { margin: 20px 0; }
|
||
|
|
.filter-row select { max-width: 155px; }
|
||
|
|
.filter-row > button { padding: 9px; }
|
||
|
|
.section-head { flex-wrap: wrap; }
|
||
|
|
.section-head > div { gap: 10px; }
|
||
|
|
.wall-toolbar { padding: 11px; gap: 10px; }
|
||
|
|
.wall-toolbar label { font-size: 12px; }
|
||
|
|
#wall-fullscreen { padding: 10px 12px; }
|
||
|
|
.camera-meta { padding: 14px; }
|
||
|
|
.camera-meta strong { font-size: 15px; }
|
||
|
|
.camera-actions { padding: 0 14px 14px; gap: 8px; }
|
||
|
|
.camera-actions button { padding: 9px 11px; }
|
||
|
|
.panel, .site-card { padding: 18px; }
|
||
|
|
.family-map-heading h2 { font-size: 23px; }
|
||
|
|
dialog { padding: 22px; }
|
||
|
|
#auth-dialog { padding: 30px 26px; }
|
||
|
|
.dialog-heading h2 { font-size: 21px; }
|
||
|
|
.dialog-footer { gap: 8px; }
|
||
|
|
footer { gap: 16px; flex-wrap: wrap; font-size: 9px; }
|
||
|
|
}
|
||
|
|
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
|