vchuser
0c96743211
Beanstandung 1: .overlay bekommt overflow-y:auto, overscroll-behavior: contain und justify-content:safe center, damit bei vielen Kandidaten- Stapeln (Rot-Fall bietet alle Stapel der Sitzung an) keine Schaltfläche mehr unerreichbar aus dem Bildschirm waechst, ohne dass die Seite dahinter mitrollt oder sich die Optik bei wenigen Stapeln aendert. Beanstandung 2: askForStack setzt inert auf die Geschwisterelemente von root, solange der Dialog offen ist, und hebt es beim Schliessen (ueber jeden der drei Wege) nur fuer selbst gesetzte Elemente wieder auf. Fokus kehrt nach dem Schliessen zum vorherigen Element zurueck statt auf dem entfernten Dialog haengen zu bleiben.
113 lines
2.3 KiB
CSS
113 lines
2.3 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
--bg: #14161a;
|
|
--fg: #f2f4f7;
|
|
--muted: #9aa3af;
|
|
--green: #1f8a4c;
|
|
--yellow: #b8860b;
|
|
--red: #a02c2c;
|
|
--line: #2a2e36;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
#app { display: flex; flex-direction: column; height: 100dvh; }
|
|
|
|
.camera { position: relative; flex: 1; overflow: hidden; background: #000; }
|
|
.camera video { width: 100%; height: 100%; object-fit: cover; }
|
|
|
|
.frame {
|
|
position: absolute;
|
|
inset: 20% 8%;
|
|
border: 3px solid rgba(255, 255, 255, 0.7);
|
|
border-radius: 8px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.stacks {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
overflow-x: auto;
|
|
border-top: 1px solid var(--line);
|
|
min-height: 76px;
|
|
align-items: center;
|
|
}
|
|
|
|
.stacks button {
|
|
flex: none;
|
|
min-height: 56px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: #1c2027;
|
|
color: var(--fg);
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.last {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border-top: 1px solid var(--line);
|
|
min-height: 56px;
|
|
font-size: 15px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.last span { flex: 1; }
|
|
|
|
.action {
|
|
min-height: 56px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: #2b6cb0;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
padding: 0 18px;
|
|
}
|
|
|
|
.action.secondary { background: #2a2e36; }
|
|
|
|
.capture { margin: 12px; }
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: safe center;
|
|
gap: 18px;
|
|
padding: 24px;
|
|
text-align: center;
|
|
z-index: 10;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.overlay.green { background: var(--green); }
|
|
.overlay.yellow { background: var(--yellow); }
|
|
.overlay.red { background: var(--red); }
|
|
|
|
.overlay .stack-id { font-size: 68px; font-weight: 800; letter-spacing: 2px; }
|
|
.overlay .detail { font-size: 20px; line-height: 1.5; }
|
|
.overlay .pn { font-size: 15px; opacity: 0.85; word-break: break-all; }
|
|
|
|
.choices { display: grid; gap: 12px; width: 100%; max-width: 420px; }
|
|
.choices button { min-height: 64px; font-size: 20px; }
|
|
|
|
.status { padding: 8px 12px; font-size: 14px; color: var(--muted); }
|
|
.status.warn { color: #f0b429; }
|