feat: configurable branding, private preferences, city photo cards and database backups

This commit is contained in:
Codex
2026-10-04 17:22:42 +08:00
parent 4ac0a0b516
commit 83e8981603
16 changed files with 788 additions and 22 deletions
+33
View File
@@ -261,3 +261,36 @@ footer { color: #716b5b; font-size: 10px; letter-spacing: .5px; }
.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}}
/* 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}}