An event companion and onboarding experience for the ATmosphere (alpha)
atmo.quest
feat(qr): scanner overlay and mobile button styles
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
authored by
Brittany Ellich
Claude Opus 4.8
and committed by
Tangled
(Jun 1, 2026, 2:54 PM UTC)
f9b4374b
164705f8
+65
-7
+65
-7
web/resources/static/css/terminal.css
+65
-7
web/resources/static/css/terminal.css
···
216
216
border-color: var(--lavender);
217
217
color: var(--lavender);
218
218
}
219
-
/* Mobile-only camera-launch button (profile + event screens).
220
-
Hidden by default; shown only on mobile, matching the .bottom-nav
221
-
breakpoint (max-width: 768px). */
219
+
/* Mobile-only "scan to connect" button (profile + event + home screens).
220
+
The wrapper is hidden by default and shown only on mobile, matching the
221
+
.bottom-nav breakpoint (max-width: 768px). */
222
222
.camera-scan {
223
223
display: none;
224
224
}
225
225
@media (max-width: 768px) {
226
226
.camera-scan {
227
-
display: inline-flex;
228
-
margin: 12px auto 0;
227
+
display: flex;
228
+
justify-content: center;
229
+
margin: 12px 0 0;
229
230
}
231
+
}
232
+
233
+
/* Fullscreen live QR scanner overlay (built by js/qr-scan.js). */
234
+
.qr-scan-overlay {
235
+
position: fixed;
236
+
inset: 0;
237
+
z-index: 1000;
238
+
display: flex;
239
+
flex-direction: column;
240
+
align-items: center;
241
+
justify-content: center;
242
+
background: rgba(0, 0, 0, 0.92);
243
+
}
244
+
.qr-scan-backdrop {
245
+
position: absolute;
246
+
inset: 0;
247
+
}
248
+
.qr-scan-stage {
249
+
position: relative;
250
+
z-index: 1;
251
+
width: min(90vw, 90vh);
252
+
max-width: 480px;
253
+
aspect-ratio: 1 / 1;
254
+
}
255
+
.qr-scan-video {
256
+
width: 100%;
257
+
height: 100%;
258
+
object-fit: cover;
259
+
border-radius: 8px;
260
+
background: #000;
261
+
}
262
+
.qr-scan-frame {
263
+
position: absolute;
264
+
inset: 12%;
265
+
border: 2px solid rgba(255, 255, 255, 0.9);
266
+
border-radius: 8px;
267
+
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25);
268
+
pointer-events: none;
269
+
}
270
+
.qr-scan-hint {
271
+
position: absolute;
272
+
left: 0;
273
+
right: 0;
274
+
bottom: -2.4rem;
275
+
text-align: center;
276
+
color: #fff;
277
+
font-size: 0.85rem;
278
+
opacity: 0;
279
+
transition: opacity 0.2s;
280
+
}
281
+
.qr-scan-hint.show {
282
+
opacity: 1;
283
+
}
284
+
.qr-scan-cancel {
285
+
position: relative;
286
+
z-index: 1;
287
+
margin-top: 2.6rem;
230
288
}
231
289
.btn .shortcut {
232
290
font-size: 10px;
···
649
707
margin-top: 2px;
650
708
}
651
709
.profile-flip-hint {
652
-
font-size: 10px;
710
+
font-size: 12px;
653
711
letter-spacing: 0.08em;
654
-
color: var(--muted);
712
+
color: var(--text);
655
713
text-transform: lowercase;
656
714
}
657
715
@media (prefers-reduced-motion: reduce) {