2026-10-04 08:59:15 +08:00
|
|
|
/* 赵府智家 · 庭院书卷。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; }
|
2026-10-04 10:43:17 +08:00
|
|
|
.household-context { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: -5px 0 24px; padding: 12px 16px; border-left: 3px solid var(--gold); background: #eae8dc; }
|
|
|
|
|
.household-context span { font-size: 11px; color: var(--muted); }
|
|
|
|
|
.household-context select { min-width: 140px; max-width: 240px; }
|
2026-10-04 08:59:15 +08:00
|
|
|
.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; } }
|
2026-10-04 10:43:17 +08:00
|
|
|
|
|
|
|
|
.household-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.household-context select{max-width:100%}.household-context label{min-width:0}
|
2026-10-04 11:19:14 +08:00
|
|
|
|
|
|
|
|
.device-actions,.device-search-row,.device-group-order,.group-step{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
|
|
|
|
|
.device-search-row{align-items:end}.device-search-row label{flex:1;min-width:160px}.device-group-order{margin:12px 0}.group-step{padding:7px;background:var(--paper);border:1px solid var(--line);border-radius:5px}.group-step select{width:auto;max-width:145px}.group-step button{padding:7px 11px}.group-step>span{color:var(--muted)}
|
|
|
|
|
.device-group{margin:26px 0}.device-group>h3{font-family:var(--serif);font-size:20px;overflow-wrap:anywhere}.device-group>h3>span{color:var(--gold);padding:0 8px}.device-group>h3 small{font:12px var(--sans);color:var(--muted);white-space:nowrap}.device-tags{display:flex;flex-wrap:wrap;gap:6px}.device-tags span{font-size:11px;padding:3px 8px;background:var(--paper);border:1px solid var(--line)}.site-card dd,.site-card .description{overflow-wrap:anywhere;min-width:0}
|
|
|
|
|
@media(max-width:600px){.device-actions{width:100%}.device-actions button{flex:1;white-space:normal}.group-step{width:100%}.group-step select{flex:1;max-width:none;min-width:0}.device-group>h3{font-size:18px}}
|
2026-10-04 16:21:40 +08:00
|
|
|
|
|
|
|
|
/* Contextual steward navigation and one-device workspaces. */
|
|
|
|
|
#scope-navigation{border-left:1px solid #6d8270;margin:12px 0 12px 10px;padding-left:9px}#scope-navigation .nav-label{padding:10px 12px;overflow-wrap:anywhere}
|
|
|
|
|
.device-context{padding:18px 22px;margin:20px 0;border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--panel)}.device-context p{color:var(--muted);overflow-wrap:anywhere;margin:0 0 14px}.device-context [role=group]{display:flex;flex-wrap:wrap;gap:8px}.device-context button.active{color:var(--paper);background:var(--accent)}
|
|
|
|
|
.device-title{border:0;padding:0;background:transparent;color:var(--ink);font:inherit;text-align:left;box-shadow:none;white-space:normal;overflow-wrap:anywhere}.device-title:hover{color:var(--accent);background:transparent}.device-title span{color:var(--accent)}
|
|
|
|
|
.scope-intro{padding:28px 0}.scope-intro h2{font:500 32px var(--serif);margin:12px 0}.scope-intro p{color:var(--muted);line-height:1.8}.steward-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.steward-tile{display:flex;flex-direction:column;text-align:left;gap:12px;min-height:190px;padding:28px;border:1px solid var(--line);border-top:3px solid var(--accent);background:var(--panel);color:var(--ink);white-space:normal;box-shadow:0 3px 12px #22332208}.steward-tile strong{font-size:23px;font-family:var(--serif);font-weight:500}.steward-tile span,.steward-tile small{color:var(--muted);line-height:1.7}.steward-tile:hover{background:var(--paper);border-color:var(--accent)}
|
|
|
|
|
#device-detail dl,#heritage-detail dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}#device-detail dl>div,#heritage-detail dl>div{border-bottom:1px solid var(--line);padding-bottom:12px}#device-detail dt,#heritage-detail dt{font-size:12px;color:var(--muted);margin-bottom:6px}#device-detail dd,#heritage-detail dd{margin:0;overflow-wrap:anywhere}.heritage-prose{white-space:pre-wrap;line-height:1.9;overflow-wrap:anywhere;margin:24px 0}#heritage-detail{margin-top:24px}.heritage-controls{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:22px}.heritage-controls label{min-width:0}.household-context{flex-wrap:wrap}
|
|
|
|
|
@media(max-width:720px){.steward-grid{grid-template-columns:1fr}.steward-tile{min-height:150px;padding:22px}.device-context{padding:16px}.device-context button{flex:1 1 40%;min-width:0}#device-detail dl,#heritage-detail dl{grid-template-columns:1fr}#scope-navigation{display:flex;flex-wrap:wrap;border:0;margin:0;padding:0;width:100%}#scope-navigation .nav-label{width:100%;padding:8px 4px}.scope-intro h2{font-size:26px}}
|
2026-10-04 17:22:42 +08:00
|
|
|
|
|
|
|
|
/* Installation branding, private presentation choices, and place photo cards. */
|
|
|
|
|
#household-list{display:block}.home-city-group{margin:24px 0 36px}.home-city-group>h3{font-size:21px}.home-city-group>h3 small{font:12px sans-serif;color:var(--muted);margin-left:12px}.home-card{padding:0;overflow:hidden}.home-cover{position:relative;min-height:210px;background:linear-gradient(145deg,#4b6957,#253d34);isolation:isolate;color:#fffdf6}.home-cover>img{position:absolute;width:100%;height:100%;object-fit:cover;inset:0;z-index:-2}.home-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#102019db,transparent);z-index:-1}.home-cover-content{padding:24px;min-height:210px;display:flex;flex-direction:column;justify-content:end}.home-cover .site-heading{margin-bottom:auto}.home-cover h3{margin:26px 0 4px;color:#fffdf6;text-shadow:0 1px 3px #000a;font-size:25px}.home-cover .quiet{background:#172a25ba;color:#fff;border-color:#bccabd80}.home-cover .badge{background:#f9f5e5e8;color:#244638;border-color:transparent}.home-location{font-size:12px;margin:8px 0 0;color:#fffdf6}.home-cover-placeholder{position:absolute;top:88px;right:22px;opacity:.3;font:18px var(--serif);letter-spacing:5px}.home-card-body{padding:24px}.home-card-body .household-actions{margin-bottom:0}.cover-editor img{width:100%;max-height:230px;object-fit:contain;border:1px solid var(--line);margin-bottom:12px;background:var(--paper)}
|
|
|
|
|
#page-settings h3{font-size:21px;margin-top:8px}#page-settings .form-grid{margin:22px 0}#page-settings input:not([type=checkbox]),#page-settings select{width:100%;min-width:0}.brand-image-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0}.brand-image-grid>div{border:1px solid var(--line);padding:18px;border-radius:6px;min-width:0}.brand-image-grid img{width:80px;height:80px;object-fit:contain;background:var(--paper);border-radius:6px;display:block;margin-bottom:18px}.brand-image-grid label{display:grid;gap:12px;margin-bottom:14px}.config-import{font-size:12px;max-width:300px}.backup-row{display:grid;gap:8px;padding:18px 0;border-bottom:1px solid var(--line);font-size:12px}.backup-row small,.backup-row code{overflow-wrap:anywhere}.backup-row span{color:var(--muted)}#settings-error,#brand-status,#preferences-status,#backup-save-status,#backup-result{line-height:1.8;font-size:13px;overflow-wrap:anywhere}.brand #brand-name{overflow-wrap:anywhere;letter-spacing:1px}.brand #brand-subtitle{overflow-wrap:anywhere;line-height:1.8;letter-spacing:1px}
|
|
|
|
|
html[data-backdrop=plain] body{background-image:none}html[data-backdrop=plain] .courtyard-landscape{display:none}html[data-font=sans]{--serif:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
|
|
|
|
|
html[data-density=compact] main{padding:20px 26px}html[data-density=compact] main>header{min-height:100px;padding:6px 0 15px;margin-bottom:20px}html[data-density=compact] .panel,html[data-density=compact] .site-card:not(.home-card),html[data-density=compact] .home-card-body{padding:17px}html[data-density=compact] .sidebar nav button{padding:9px 12px}html[data-density=compact] .steward-tile{min-height:150px;padding:20px}html[data-density=compact] .metrics>div{padding:13px 18px}html[data-density=compact] .home-cover,html[data-density=compact] .home-cover-content{min-height:180px}
|
|
|
|
|
html[data-theme=clean]{--paper:#f3f6fa;--ink:#203349;--muted:#53667d;--panel:#ffffff;--line:#d2dce7;--accent:#285ca0;--gold:#52657f;--cinnabar:#386ea8;--timeline-paper:#edf2f8;--timeline-grid:#cbd6e4;--timeline-range:#4c72a5;--surface-alt:#e8eff8;--side:#1e3551;--on-accent:#ffffff;color-scheme:light}
|
|
|
|
|
html[data-theme=ink]{--paper:#151d22;--ink:#e3e9e5;--muted:#afbdb5;--panel:#202c32;--line:#46565a;--accent:#a2cab4;--gold:#d6bd83;--cinnabar:#e0a390;--timeline-paper:#26343b;--timeline-grid:#516369;--timeline-range:#91bda6;--surface-alt:#2a3940;--side:#132020;--on-accent:#13231c;color-scheme:dark}
|
|
|
|
|
html[data-theme=clean] body,html[data-theme=ink] body{background-color:var(--paper);color:var(--ink)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) .sidebar{background:var(--side);border-color:var(--line)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) main>header{border-color:var(--line)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) :is(.metrics,.panel,.site-card,.camera-card,.empty,.family-canvas-panel,.scan-chip,dialog){background-color:var(--panel);border-color:var(--line);color:var(--ink)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) :is(.household-context,.wall-toolbar,.device-table th,.family-view-tabs,.family-map-viewport,#preset-confirmation){background-color:var(--surface-alt);color:var(--ink);border-color:var(--line)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) :is(input,select,textarea){background:var(--panel);border-color:var(--line);color:var(--ink)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) :is(input,textarea)::placeholder{color:var(--muted)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) :is(label,header p,.header-status,.metrics span,.filter-row,.section-head small,.camera-meta p,.empty,.time-labels,.recording-item small,.device-table td small,.site-card dt,.audit-item,.audit-item small,footer,#auth-form p,.family-date legend){color:var(--muted)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) :is(.metrics strong,.empty h3,.site-card dd){color:var(--ink)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) button:not(.quiet):not(.secondary):not(.device-title):not(.steward-tile),html:is([data-theme=clean],[data-theme=ink]) .button{background:var(--accent);color:var(--on-accent)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) :is(.quiet,.secondary,.recording-item,.camera-actions .quiet){background:var(--surface-alt);color:var(--ink);border-color:var(--line)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) .sidebar nav button{background:transparent;color:#dbe5e4}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) .sidebar nav button.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) .sidebar>.quiet{background:transparent;color:#dbe5e4}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) #auth-dialog{background-image:none;background-color:var(--panel)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) .device-table tbody tr:hover{background:var(--surface-alt)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) .family-node{background:var(--panel);border-color:var(--line);color:var(--ink)}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) .family-node.self{background:#ebd6aa;color:#2b3b30;border-color:#b79a59}
|
|
|
|
|
html:is([data-theme=clean],[data-theme=ink]) .family-node.self :is(small,span,strong){color:#2b3b30}
|
|
|
|
|
html[data-theme=ink] :is(.form-error,.family-warning){color:#ffc8b6}
|
|
|
|
|
html[data-theme=ink] .ptz-panel{background:var(--panel);color:var(--ink);border-color:var(--line)}
|
|
|
|
|
html[data-theme=ink] .home-cover .quiet{background:#172a25df;color:#fff}
|
|
|
|
|
html[data-theme=ink] body{background-image:radial-gradient(ellipse at 90% 0,#263c3340,transparent 65%)}
|
|
|
|
|
@media(min-width:761px){html[data-layout=top] .sidebar{position:relative;width:100%;padding:16px 30px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;min-height:0;height:auto;border-right:0;border-bottom:1px solid var(--line)}html[data-layout=top] .sidebar .brand{padding:0;max-width:250px}html[data-layout=top] .sidebar>.nav-label,html[data-layout=top] .side-note{display:none}html[data-layout=top] .sidebar nav{display:flex;flex:1;flex-wrap:wrap;min-width:250px;gap:6px}html[data-layout=top] #scope-navigation{display:flex;flex-wrap:wrap;width:100%;order:1;margin:0;padding:0;border:0}html[data-layout=top] #scope-navigation .nav-label{display:none}html[data-layout=top] .sidebar #current-user{margin:0;padding:0;border:0}html[data-layout=top] .sidebar>.quiet{margin:0}html[data-layout=top] main{margin-left:0;margin-right:auto;margin-left:auto}html[data-layout=top] .sidebar nav button{width:auto;white-space:nowrap}}
|
|
|
|
|
@media(max-width:760px){.brand-image-grid{grid-template-columns:1fr}.home-cover-content{padding:20px}.home-card-body{padding:20px}.home-cover-placeholder{font-size:15px}.sidebar #logout{display:block}#page-settings .form-grid{grid-template-columns:1fr}html[data-density=compact] main{padding:18px 14px}#household-form .form-grid{grid-template-columns:1fr}.home-city-group>h3 small{display:block;margin:8px 0}}
|
2026-10-04 19:22:31 +08:00
|
|
|
/* Personal journals: a quiet paper timeline with bounded media panels. */
|
|
|
|
|
.journal-feed{max-width:1080px;margin:0 auto}.journal-compose textarea{resize:vertical;min-height:130px}.journal-compose>label{display:grid;gap:12px}.journal-add-media,.journal-reactions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.journal-add-media>label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.journal-add-media input{max-width:260px}.journal-filters{display:flex;align-items:end;flex-wrap:wrap;gap:16px}.journal-filters label{flex:1;min-width:145px;display:grid;gap:7px}.journal-entry{border-left:3px solid #a98964;margin-bottom:26px}.journal-entry .section-head small{display:block;color:var(--muted);margin-top:6px}.journal-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.95;font-size:17px}.journal-author{font-size:20px!important;font-family:serif}.journal-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}.journal-media figure{margin:0;min-width:0}.journal-media img,.journal-media video{width:100%;max-height:450px;object-fit:contain;border-radius:8px;background:#1a2925}.journal-media audio{width:100%;max-width:100%}.journal-media figcaption{font-size:13px;overflow-wrap:anywhere;margin-top:6px}.journal-image-load{width:100%;min-height:150px;background:#e9eee2!important}.journal-upload{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid #d9d7c8;padding:12px 0}.journal-upload label{flex:1;overflow-wrap:anywhere}.journal-upload small{display:block}.journal-upload input[type=checkbox]{width:auto}.journal-resume input{max-width:220px}.journal-comments{border-top:1px solid #d9d7c8;padding-top:15px}.journal-comments form{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.journal-comments form label{flex:1;min-width:170px}.journal-comment{padding:10px 0;border-bottom:1px dashed #d9d7c8;overflow-wrap:anywhere}.journal-comment small{font-size:11px;color:var(--muted)}.journal-reactions [aria-pressed=true]{color:#ad5842!important}.journal-comments .quiet{padding:4px 8px;font-size:12px}.journal-feed .panel{overflow:hidden}html[data-theme=ink] .journal-image-load{background:#293f37!important}
|
2026-10-04 20:03:44 +08:00
|
|
|
.journal-upload-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:18px;margin:20px 0}
|
|
|
|
|
.journal-upload-card{border:1px solid var(--line,#d9d7c8);border-radius:12px;padding:16px;background:var(--surface,#fffdf8);min-width:0;display:flex;flex-direction:column;gap:14px}
|
|
|
|
|
.journal-upload-card:has(input:checked){border-color:#456f5f;box-shadow:0 0 0 1px #456f5f}
|
|
|
|
|
.journal-upload-select{display:flex!important;align-items:flex-start;gap:10px;overflow-wrap:anywhere;line-height:1.5}
|
|
|
|
|
.journal-upload-select input[type=checkbox]{width:18px;min-width:18px;height:18px;margin-top:3px;accent-color:#315a4e}
|
|
|
|
|
.journal-upload-select small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
|
|
|
|
|
.journal-card-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:auto}
|
|
|
|
|
.journal-card-actions button{padding:8px 13px;font-size:13px}.journal-card-actions [data-remove-upload]{margin-left:auto;color:#954f40}
|
|
|
|
|
.journal-card-actions a,.journal-media-caption a{font-size:13px;color:var(--accent,#315a4e)}
|
|
|
|
|
.journal-attachment{margin:0;min-width:0}.journal-photo{display:block;position:relative;width:100%;padding:0!important;border:0!important;background:#e6e9df!important;border-radius:9px;overflow:hidden;color:#fff!important}
|
|
|
|
|
.journal-photo img{display:block;width:100%;min-height:120px;max-height:450px;object-fit:contain;aspect-ratio:16/10;background:#e6e9df;border-radius:9px}
|
|
|
|
|
.journal-photo-hint{position:absolute;right:10px;bottom:10px;padding:4px 9px;background:#213a30c9;border-radius:5px;font-size:12px}
|
|
|
|
|
.journal-upload-card .journal-photo img{height:180px;min-height:0;object-fit:cover}
|
|
|
|
|
.journal-attachment video{width:100%;max-height:450px;border-radius:8px;background:#1a2925}.journal-upload-card video{height:180px}
|
|
|
|
|
.journal-attachment audio{width:100%;max-width:100%}.journal-audio{background:#e9eee5;border:1px solid #d5decd;border-radius:10px;padding:14px}
|
|
|
|
|
.journal-audio-label{display:flex;align-items:center;gap:10px;color:#42614f;font-size:13px;letter-spacing:1px;margin:0 0 14px}.journal-audio-label span{font-size:28px}
|
|
|
|
|
.journal-media-state{display:block;font-size:12px;color:var(--muted);padding-top:6px;min-height:0}.journal-media-state:empty{display:none}
|
|
|
|
|
.journal-media-caption{font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin:8px 0 16px}
|
|
|
|
|
.journal-trash{padding:12px 0;border-top:1px solid #d9d7c8}.journal-trash-row{display:flex;align-items:center;gap:15px;justify-content:space-between;padding:10px 0;border-bottom:1px solid #d9d7c8;overflow-wrap:anywhere}
|
|
|
|
|
.journal-preview{width:min(960px,94vw);max-width:94vw;padding:24px;max-height:94vh}.journal-preview header,.journal-preview footer{display:flex;align-items:center;justify-content:space-between;gap:18px;position:static}.journal-preview header{margin-bottom:20px}.journal-preview h2{font-size:22px;overflow-wrap:anywhere;margin:0}.journal-preview footer{font-size:13px;margin-top:18px}
|
|
|
|
|
.journal-preview .journal-photo img{max-height:65vh;min-height:0;aspect-ratio:auto}.journal-preview .journal-photo{pointer-events:none}.journal-preview .journal-photo-hint{display:none}.journal-preview video{max-height:65vh}
|
|
|
|
|
html[data-theme=ink] .journal-upload-card{background:#20352d}html[data-theme=ink] .journal-audio{background:#293f37;border-color:#436152}html[data-theme=ink] .journal-audio-label{color:#d5e2ce}
|
|
|
|
|
@media(max-width:600px){.journal-upload-grid{grid-template-columns:1fr}.journal-preview{padding:16px}.journal-preview h2{font-size:17px}.journal-preview header button{flex-shrink:0}.journal-media{grid-template-columns:1fr}}
|
2026-10-04 20:37:14 +08:00
|
|
|
/* Compact mobile navigation and touch-friendly forms. */
|
|
|
|
|
.mobile-nav-toggle{display:none}
|
|
|
|
|
@media(max-width:760px){
|
|
|
|
|
.sidebar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;height:auto;min-height:0}
|
|
|
|
|
.sidebar .brand{min-width:0;padding:0;gap:10px}.sidebar .brand>span{min-width:0}.sidebar #brand-name{font-size:23px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar .brand-icon{width:38px;height:44px}.sidebar #brand-subtitle{font-size:11px;letter-spacing:1px}
|
|
|
|
|
.sidebar .mobile-nav-toggle{display:block;margin:0;min-height:44px;color:#f7f3e5;border-color:#8faaa0;padding:9px 14px}
|
|
|
|
|
.sidebar:not(.mobile-open)>nav,.sidebar:not(.mobile-open)>#current-user,.sidebar:not(.mobile-open)>#account-password,.sidebar:not(.mobile-open)>#logout{display:none}
|
|
|
|
|
.sidebar>nav,.sidebar>#current-user{grid-column:1/-1}.sidebar.mobile-open>nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0;padding:8px 0 0}.sidebar #scope-navigation{display:contents}.sidebar #scope-navigation[hidden]{display:none}.sidebar nav button{width:100%;text-align:left;min-height:44px;white-space:normal;margin:0;font-size:14px}
|
|
|
|
|
.sidebar.mobile-open>#current-user{margin:0;padding:12px 0 0}.sidebar.mobile-open>#account-password,.sidebar.mobile-open>#logout{display:block;min-height:44px;margin:0}
|
|
|
|
|
main{padding:22px 16px}main>header{margin-bottom:22px}.header-status #clock{display:none}
|
|
|
|
|
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important;min-height:44px}button,.button{min-height:44px;touch-action:manipulation}
|
|
|
|
|
.form-grid{grid-template-columns:1fr}.form-grid>*{min-width:0}.form-grid .wide{grid-column:1/-1}
|
|
|
|
|
.section-head{flex-wrap:wrap;gap:12px}.section-head>div{max-width:100%}.section-head button{white-space:normal}
|
|
|
|
|
.household-context{gap:10px;padding:12px}.household-context label{width:100%;display:flex;flex-wrap:wrap}.household-context select{flex:1;min-width:0}.household-context #household-context-note{display:none}
|
|
|
|
|
.filter-row{gap:10px;flex-wrap:wrap}.filter-row label{width:100%;display:grid;grid-template-columns:1fr}.filter-row select{width:100%}
|
|
|
|
|
.settings-sections,.view-presets{gap:8px}.settings-sections button,.view-presets button{flex:1 1 100px;white-space:normal}
|
|
|
|
|
.device-actions,.device-search-row{gap:10px}.device-search-row{display:grid;grid-template-columns:1fr}
|
|
|
|
|
dialog{width:calc(100% - 24px);max-width:calc(100% - 24px);max-height:90vh;max-height:90dvh;padding:18px;overscroll-behavior:contain}dialog header,dialog .dialog-heading{gap:12px;align-items:flex-start}dialog h2{font-size:22px}dialog footer{flex-wrap:wrap}
|
|
|
|
|
.journal-compose,.journal-entry{padding:18px}.journal-filters{gap:12px}.journal-filters label{flex-basis:100%;min-width:0}.journal-add-media input{max-width:100%;width:100%}.journal-add-media>label{width:100%}.journal-preview{padding:16px}.journal-preview .journal-photo img,.journal-preview video{max-height:60vh;max-height:60dvh}.journal-upload-card{padding:12px}.journal-media audio{min-width:0}.journal-comments form label{min-width:0;flex-basis:100%}
|
|
|
|
|
.device-context [role=group]{display:flex;flex-wrap:wrap;gap:8px}.device-context button{flex:1 1 42%;white-space:normal}.metrics{margin-bottom:20px}
|
|
|
|
|
}
|
|
|
|
|
@media(max-width:760px){.sidebar .brand{grid-column:1;max-width:100%;width:auto}.sidebar>.mobile-nav-toggle{grid-column:2;grid-row:1;width:auto;max-width:110px}.sidebar .brand-icon{flex-shrink:0}.sidebar .brand>span{overflow:hidden}.sidebar #brand-name{font-size:21px}}
|
2026-10-04 21:30:30 +08:00
|
|
|
|
|
|
|
|
/* Shared geography controls and cover feedback, including phone dialogs. */
|
|
|
|
|
.geo-picker{min-width:0;border:1px solid var(--line,#d8d2c3);border-radius:10px;padding:14px;margin:0}.geo-picker legend{padding:0 8px}.geo-picker .geo-path{display:block;overflow-wrap:anywhere;margin-top:10px;font-size:.9rem}.geo-picker .form-grid{min-width:0}.geo-picker input,.geo-picker select{width:100%;min-width:0}#household-cover-status[data-error="true"]{color:#ad3c28;font-weight:600}#household-cover-preview{max-width:100%;max-height:240px;object-fit:contain}
|
2026-10-05 19:07:19 +08:00
|
|
|
|
|
|
|
|
/* Personal household card wall */
|
|
|
|
|
.home-layout-controls{padding:16px 20px}.home-layout-controls .device-actions{align-items:end;flex-wrap:wrap}.home-layout-controls label{margin:0;min-width:90px}.home-layout-controls label.check{min-width:0;align-self:center}.home-card-grid{display:grid;grid-template-columns:repeat(var(--home-columns,2),minmax(0,1fr));gap:20px;align-items:start}.home-card-grid .home-card{min-width:0}.home-card-grid .home-card-body{padding:18px}.home-card-grid .home-cover-content{min-height:190px;padding:18px}.home-card-grid .home-cover{min-height:190px}.home-card-grid .home-card-body dl{margin:12px 0}.home-card-grid .home-card-body .description{font-size:13px}.home-card-grid .household-actions{display:flex;flex-wrap:wrap;gap:8px}.home-card-grid .household-actions button{font-size:13px;padding:10px 12px}.home-order-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.home-order-actions span{font-size:12px;color:var(--muted)}.home-order-actions button{font-size:12px;padding:8px}.home-card[draggable=true]{cursor:grab;outline:1px dashed var(--accent);outline-offset:3px}.home-pagination{display:flex;gap:18px;justify-content:center;align-items:center;margin:24px 0;flex-wrap:wrap}.home-pagination span{font-size:13px;color:var(--muted)}
|
|
|
|
|
@media(max-width:1100px){.home-card-grid{grid-template-columns:repeat(min(var(--home-columns,2),2),minmax(0,1fr))}}
|
|
|
|
|
@media(max-width:650px){.home-card-grid{grid-template-columns:minmax(0,1fr)}.home-layout-controls{padding:12px}.home-layout-controls .device-actions{gap:10px}.home-layout-controls button{padding:10px 12px}.home-pagination{gap:10px}.home-card-grid .home-cover-content{padding:16px}}
|
|
|
|
|
|
|
|
|
|
.device-network{min-width:0;border:1px solid var(--line);padding:16px}.device-network legend{padding:0 8px}.topology-tree,.topology-tree ul{list-style:none;padding:0;margin:20px 0}.topology-tree ul{margin-left:24px;padding-left:24px;border-left:2px solid var(--accent,#31584a)}.topology-tree li{position:relative;margin:18px 0;min-width:0}.topology-tree ul>li:before{content:"";position:absolute;left:-24px;top:28px;width:24px;border-top:2px solid var(--accent,#31584a)}.topology-node{border:1px solid var(--line);border-radius:10px;padding:20px;background:var(--paper);max-width:800px;overflow-wrap:anywhere}.topology-node h3{margin:12px 0}.topology-node dl{display:grid;gap:8px}.topology-node dl>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px}.topology-node dd{margin:0}.topology-node dt,.topology-node p{font-size:13px;color:var(--muted)}.topology-node .device-title{text-align:left}
|
|
|
|
|
@media(max-width:650px){.topology-tree ul{margin-left:8px;padding-left:12px}.topology-tree ul>li:before{left:-12px;width:12px}.topology-node{padding:14px}.topology-node dl>div{grid-template-columns:72px minmax(0,1fr)}.device-network .form-grid{grid-template-columns:1fr}}
|
|
|
|
|
|
|
|
|
|
.platform-topology-root{border:1px solid var(--line);border-top:4px solid var(--accent,#31584a);background:var(--paper);padding:22px;text-align:center;margin:24px auto;max-width:420px;border-radius:10px}.platform-place-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px;border-top:2px solid var(--line);padding-top:24px}.platform-place-node{position:relative;text-align:left;white-space:normal;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--text);padding:22px}.platform-place-node:before{position:absolute;content:"";height:25px;top:-25px;left:50%;border-left:2px solid var(--line)}.platform-place-node h3{margin:16px 0}.platform-place-node p,.platform-place-node small{color:var(--muted)}.platform-place-node>span:last-child{display:block;margin-top:18px}.platform-place-node:hover{border-color:var(--accent,#31584a);background:var(--surface,#f1f2e9)}
|
|
|
|
|
|
|
|
|
|
.topology-tree{display:flex;gap:24px;align-items:start;flex-wrap:wrap}.topology-tree>li{flex:1 1 400px}.topology-tree ul{display:flex;gap:16px;flex-wrap:wrap}.topology-tree ul>li{flex:1 1 260px;max-width:560px}.topology-node{max-width:560px;padding:16px}.device-actions #devices-card-view[aria-pressed=true],.device-actions #devices-topology-view[aria-pressed=true],.device-actions #home-card-view[aria-pressed=true],.device-actions #home-topology-view[aria-pressed=true]{background:var(--accent,#31584a);color:#fff}.home-card-grid[hidden],.home-layout-controls[hidden],.home-pagination[hidden]{display:none!important}
|
