Visitor sign in kiosk: multi-site, badge printing, WWCC expiry warnings, admin accounts with 2FA

public/css/admin.css

@@ -11,6 +11,10 @@
 
 * { box-sizing: border-box; }
 
+/* Author display rules beat the browser's [hidden] { display: none }, and several
+   elements here are toggled with that attribute. */
+[hidden] { display: none !important; }
+
 body {
   margin: 0;
   background: var(--paper);
@@ -301,8 +305,9 @@ tr.row-bad td { background: #fdf0f2; }
 
 .photo-frame {
   position: relative;
-  width: 148px;
-  aspect-ratio: 4 / 3;
+  width: 152px;
+  /* Square, to match the kiosk camera and the frame printed on the badge. */
+  aspect-ratio: 1 / 1;
   margin-bottom: 12px;
   background: #eef1f4;
   border: 1px solid var(--rule);
@@ -317,8 +322,8 @@ tr.row-bad td { background: #fdf0f2; }
   height: 100%;
   object-fit: cover;
   display: block;
-  transform: scaleX(-1);
 }
+.photo-frame video { transform: scaleX(-1); }
 .photo-empty { margin: 0; padding: 0 10px; color: var(--muted); font-size: 13px; text-align: center; }
 
 .photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

public/css/kiosk.css

@@ -14,6 +14,11 @@
 
 * { box-sizing: border-box; }
 
+/* The rules below set display on elements that are toggled with the hidden
+   attribute, and an author rule beats the browser's [hidden] { display: none }.
+   Without this the captured still renders underneath the live camera feed. */
+[hidden] { display: none !important; }
+
 html, body {
   margin: 0;
   min-height: 100%;
@@ -48,8 +53,9 @@ body {
 
 .foot {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   gap: 16px;
+  min-height: 20px;
   padding: 14px 22px 20px;
   font-size: 12.5px;
   color: var(--muted);
@@ -215,19 +221,25 @@ a:focus-visible {
 
 .camera {
   position: relative;
-  aspect-ratio: 4 / 3;
+  /* Square, matching the crop that is saved and the frame printed on the badge,
+     so the visitor sees exactly what ends up on their pass. */
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  max-width: 380px;
+  margin: 0 auto 18px;
   background: #0f1720;
   border-radius: 3px;
   overflow: hidden;
-  margin-bottom: 18px;
 }
 .camera video, .camera img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
-  transform: scaleX(-1);
 }
+/* The live feed is mirrored because that is how people expect to see themselves.
+   The captured still is not: it shows what will actually print. */
+.camera video { transform: scaleX(-1); }
 .camera-error {
   margin: -8px 0 18px;
   padding: 14px;
@@ -250,7 +262,7 @@ a:focus-visible {
 }
 .review dt { color: var(--muted); }
 .review dd { margin: 0; }
-.review img { width: 78px; border-radius: 3px; display: block; }
+.review img { width: 78px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; display: block; }
 
 /* ------------------------------------------------------------- done */
 
@@ -325,7 +337,7 @@ a:focus-visible {
 .foot-link {
   border: none;
   background: none;
-  padding: 0 12px 0 0;
+  padding: 0;
   color: var(--muted);
   font: inherit;
   font-size: 12.5px;

public/css/login.css

@@ -10,6 +10,10 @@
 
 * { box-sizing: border-box; }
 
+/* Author display rules beat the browser's [hidden] { display: none }, and the
+   sign in screens are toggled with that attribute. */
+[hidden] { display: none !important; }
+
 body {
   margin: 0;
   min-height: 100vh;