cclohmar/NextNVR
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: responsive mobile UI — 2-col grid, full-width cards, stacked controls

Browse source
This commit is contained in:
Claus Lohmar 2026-08-05 14:13:58 +01:00
parent 3ded3cc1e8
commit c509ba7eb1
1 changed files with 50 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
public/style.css
View file

@ -182,12 +182,55 @@ body {
.scan-results { margin-top: 12px; padding: 12px; background: var(--surface); border-radius: var(--radius); } .scan-results { margin-top: 12px; padding: 12px; background: var(--surface); border-radius: var(--radius); }
/* ── Mobile ── */ /* ── Mobile ── */
@media (max-width: 900px) { @media (max-width: 768px) {
.grid-4x2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } /* Top bar: compact */
#camera-cards { grid-template-columns: 1fr; } .topbar { padding: 8px 10px; gap: 8px; }
}
@media (max-width: 500px) {
.grid-4x2 { grid-template-columns: 1fr; }
.topbar h1 { font-size: 14px; } .topbar h1 { font-size: 14px; }
.tab { padding: 4px 8px; font-size: 12px; } .tab { padding: 5px 10px; font-size: 12px; }
/* Grid: 2 columns, auto-height rows */
.grid-4x2 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 4px;
height: auto;
}
.grid-tile { aspect-ratio: 4/3; }
.tile-label { font-size: 10px; bottom: 3px; left: 4px; padding: 1px 5px; }
/* Settings: full-width cards */
#camera-cards { grid-template-columns: 1fr; }
.settings-toolbar { flex-direction: column; gap: 8px; }
.settings-toolbar button { width: 100%; }
/* Playback: stacked controls */
.playback-controls { flex-direction: column; gap: 8px; }
.preset-group { flex-wrap: wrap; }
.preset { padding: 6px 10px; font-size: 12px; }
.playback-controls select, .playback-controls input { width: 100%; }
.clip-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
/* Clip player fullscreen on mobile */
.clip-player video { max-width: 100%; max-height: 60%; }
/* Tab panels: less padding */
.tab-panel { padding: 8px; }
}
@media (max-width: 400px) {
/* Single column grid on very small screens */
.grid-4x2 { grid-template-columns: 1fr; }
.grid-tile { aspect-ratio: 16/9; }
/* Minimal top bar */
.topbar { padding: 6px 8px; }
.topbar h1 { display: none; }
.tab { padding: 4px 8px; font-size: 11px; }
/* Clip thumbnails smaller */
.clip-thumb { height: 70px; }
.clip-card { padding: 6px; }
/* Wizard: stack inputs vertically */
#wiz-from, #wiz-to, #wiz-user, #wiz-pass { width: 100% !important; margin: 4px 0 !important; }
} }