/* ========================================================================== screens.css — screen-specific layout: login, and the scanner with its full-bleed camera, floating glass bars, and manual entry sheet. ========================================================================== */ /* -------------------------------------------------------------------------- LOGIN -------------------------------------------------------------------------- */ .login { /* login form layout */ position: absolute; /* positioned against the screen */ inset: 0; /* fill it */ display: flex; /* vertical stack */ flex-direction: column; /* one control per row */ justify-content: center; /* centre vertically */ gap: 0.9rem; /* consistent spacing between controls */ width: 100%; /* full width... */ max-width: 400px; /* ...but stay readable on tablets */ margin: 0 auto; /* centre horizontally */ padding: 0 1.5rem; /* inner gutter so fields never touch the edges */ } /* end login */ .login__head { /* branding block above the password field */ position: static; /* overrides .stack--centred's absolute positioning inside the form */ inset: auto; /* clear the inset */ margin-bottom: 2rem; /* generous gap before the field */ } /* end login head */ .fineprint { /* notice under the login button */ margin: 0.25rem 0 0; /* small top gap, no bottom margin */ text-align: center; /* centred under the button */ font-size: 0.75rem; /* small */ color: var(--ink-3); /* muted */ } /* end fineprint */ /* -------------------------------------------------------------------------- CAMERA VIEWPORT — full-bleed behind the floating bars -------------------------------------------------------------------------- */ .viewport { /* area that hosts the video feed */ position: absolute; /* fills the whole scanner screen */ inset: 0; /* all four edges */ overflow: hidden; /* crop the video rather than letting it stretch the layout */ background: #000; /* black behind the feed while the camera warms up */ } /* end viewport */ #reader { width: 100%; height: 100%; } /* html5-qrcode's container fills the viewport */ #reader video { /* the video element the library injects */ width: 100% !important; /* override the library's inline sizing */ height: 100% !important; /* fill vertically too */ object-fit: cover !important; /* crop-to-fill so there are no black bars in portrait */ } /* end video */ #reader__dashboard_section, #reader__header_message { display: none !important; } /* hide the library's built-in UI; we ship our own */ .reticle { /* aiming frame overlay */ position: absolute; /* layered over the video */ top: 50%; /* centre vertically... */ left: 50%; /* ...and horizontally */ width: min(66vw, 290px); /* scales with the phone but caps on tablets */ aspect-ratio: 1; /* perfect square target */ transform: translate(-50%, -50%); /* pull back by half its own size to truly centre it */ pointer-events: none; /* never intercepts taps meant for the video */ } /* end reticle */ .reticle::before { /* soft dark vignette outside the target area */ content: ""; /* required for a pseudo-element to render */ position: absolute; /* fills the reticle box */ inset: -50vmax; /* extends far past the screen edges */ background: rgb(0 0 0 / 0.34); /* dims everything... */ -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 32%, #000 33%); /* ...except a clear hole over the target (WebKit prefix for iOS) */ mask: radial-gradient(circle at 50% 50%, transparent 0 32%, #000 33%); /* standard property, draws focus to the centre */ } /* end vignette */ .reticle__c { /* each of the four corner brackets */ position: absolute; /* placed individually at the corners */ width: 30px; /* bracket arm length */ height: 30px; /* bracket arm length */ border: 2.5px solid #fff; /* bright white so it is visible against any ticket */ } /* end brackets */ .reticle__c:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; } /* top-left corner */ .reticle__c:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; } /* top-right corner */ .reticle__c:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; } /* bottom-left corner */ .reticle__c:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; } /* bottom-right corner */ .reticle__scan { /* the sweeping decode line */ position: absolute; /* moves within the reticle */ left: 6%; /* inset from the brackets */ right: 6%; /* inset from the brackets */ height: 2px; /* thin line */ border-radius: 2px; /* rounded ends */ background: linear-gradient(90deg, transparent, var(--accent), transparent); /* fades out at both ends so it reads as a beam */ box-shadow: 0 0 12px 1px rgb(139 92 246 / 0.7); /* violet glow */ animation: sweep 2.6s ease-in-out infinite; /* travels down and back, signalling that decoding is live */ } /* end scan line */ @keyframes sweep { /* top to bottom and back */ 0%, 100% { top: 8%; opacity: 0.15; } /* parked at the top, faint */ 50% { top: 90%; opacity: 0.9; } /* at the bottom, bright */ } /* end sweep */ /* -------------------------------------------------------------------------- FLOATING BARS — translucent glass over the live camera -------------------------------------------------------------------------- */ .topbar { /* status bar floating over the camera */ position: absolute; /* overlays the viewport */ top: 0; left: 0; right: 0; /* pinned across the top */ z-index: 10; /* above the video */ display: flex; /* horizontal row */ align-items: center; /* vertically centred */ justify-content: space-between; /* identity left, stats right */ gap: 0.75rem; /* space between clusters */ padding: calc(0.7rem + var(--safe-top)) calc(1rem + var(--safe-right)) 0.7rem calc(1rem + var(--safe-left)); /* safe-area-aware gutters */ background: var(--glass); /* translucent dark */ backdrop-filter: blur(20px) saturate(1.5); /* frosted glass over the moving video */ -webkit-backdrop-filter: blur(20px) saturate(1.5); /* Safari needs the prefix */ border-bottom: 1px solid var(--line); /* hairline edge */ font-size: 0.75rem; /* compact */ } /* end topbar */ .topbar__id { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } /* left cluster; min-width:0 lets the label truncate */ .topbar__user { /* signed-in account */ color: var(--ink-2); /* muted */ overflow: hidden; /* clip long addresses */ text-overflow: ellipsis; /* show … instead of overflowing */ white-space: nowrap; /* keep on one line */ max-width: 46vw; /* never crowd out the stats */ } /* end user label */ .dot { /* connectivity indicator */ width: 7px; /* small */ height: 7px; /* square → circle */ border-radius: 50%; /* circle */ background: var(--ok); /* green when online (default) */ box-shadow: 0 0 8px currentColor; /* faint halo so it reads at a glance */ color: var(--ok); /* drives the halo colour */ flex: none; /* never shrink */ transition: background 0.2s ease, color 0.2s ease; /* smooth change when connectivity flips */ } /* end dot */ .dot.is-offline { background: var(--bad); color: var(--bad); } /* red when the device loses connectivity */ .topbar__stats { display: flex; gap: 0.4rem; flex: none; } /* right cluster holds the two counters */ .camhint { /* instruction text above the toolbar */ position: absolute; /* floats over the video */ left: 1rem; /* inset from the left edge */ right: 1rem; /* inset from the right edge */ bottom: calc(6.2rem + var(--safe-bottom)); /* sits just above the toolbar */ z-index: 10; /* above the video */ margin: 0; /* no default paragraph margin */ text-align: center; /* centred under the reticle */ font-size: 0.82rem; /* small */ color: rgb(255 255 255 / 0.72); /* semi-transparent white */ text-shadow: 0 1px 8px #000; /* keeps it legible over a bright ticket in frame */ } /* end hint */ .camhint.is-error { /* camera failures */ color: #ffd0d4; /* pale red text */ background: rgb(245 22 46 / 0.2); /* red wash so it reads as a problem, not an instruction */ border: 1px solid rgb(245 22 46 / 0.4); /* red edge */ border-radius: var(--r-md); /* rounded panel */ padding: 0.7rem 0.9rem; /* room to breathe */ backdrop-filter: blur(12px); /* keeps it readable over the frozen frame */ -webkit-backdrop-filter: blur(12px); /* Safari prefix */ } /* end camera error */ .toolbar { /* control bar floating over the camera */ position: absolute; /* overlays the viewport */ bottom: 0; left: 0; right: 0; /* pinned across the bottom */ z-index: 10; /* above the video */ display: flex; /* horizontal */ background: var(--glass); /* translucent dark */ backdrop-filter: blur(20px) saturate(1.5); /* frosted glass */ -webkit-backdrop-filter: blur(20px) saturate(1.5); /* Safari prefix */ border-top: 1px solid var(--line); /* hairline edge */ padding-bottom: var(--safe-bottom); /* clears the iOS home indicator */ } /* end toolbar */ .tool { /* each toolbar control */ flex: 1; /* equal widths so every target is large */ display: flex; /* stack icon over label */ flex-direction: column; /* vertical */ align-items: center; /* centred */ gap: 0.3rem; /* small gap between icon and label */ padding: 0.75rem 0.25rem; /* tall tap target */ background: none; /* no fill */ border: 0; /* no chrome */ color: var(--ink-2); /* muted until active */ font-family: inherit; /* inherit app font */ cursor: pointer; /* desktop affordance */ transition: color 0.15s ease; /* smooth state change */ } /* end tool */ .tool:active { color: var(--ink); } /* brightens on press */ .tool__icon { /* the inline SVG glyph — sharp at any density, unlike emoji, and consistent across OSes */ width: 22px; /* icon box */ height: 22px; /* icon box */ fill: none; /* stroke-only icons */ stroke: currentColor; /* follows the button's text colour, so state changes are free */ stroke-width: 1.8; /* even weight at this size */ stroke-linecap: round; /* rounded ends read as modern */ stroke-linejoin: round; /* rounded joins */ } /* end icon */ .tool__label { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.02em; } /* small caption under the icon */ .tool.is-on { color: var(--warn); } /* torch-on state glows amber */ .tool--toggle input { display: none; } /* hide the raw checkbox; the whole label is the control */ .tool--toggle:has(input:checked) { color: var(--ok); } /* AUTO turns green when enabled */ /* -------------------------------------------------------------------------- MANUAL ENTRY SHEET -------------------------------------------------------------------------- */ .manual { /* slide-up sheet for typing a token by hand */ position: absolute; /* overlays the scanner screen */ left: 0; right: 0; bottom: 0; /* anchored to the bottom edge */ z-index: 20; /* above the toolbar */ padding: 0.75rem 1.25rem calc(1.25rem + var(--safe-bottom)); /* inner gutter plus home-indicator clearance */ background: var(--surface); /* solid surface: the keyboard is up, so glass would just be noise */ border-top: 1px solid var(--line); /* top edge */ border-radius: var(--r-lg) var(--r-lg) 0 0; /* rounded top corners like a native sheet */ box-shadow: 0 -24px 70px rgb(0 0 0 / 0.85); /* dramatic lift off the page */ animation: sheet-up 0.24s cubic-bezier(0.32, 0.72, 0, 1); /* springy iOS-style slide in */ } /* end manual sheet */ @keyframes sheet-up { from { transform: translateY(100%); } } /* start fully off-screen, settle at rest */ .manual__grip { /* the small handle bar at the top of the sheet */ width: 36px; /* short */ height: 4px; /* thin */ margin: 0 auto 1rem; /* centred, with a gap below */ border-radius: 2px; /* pill shape */ background: var(--line-2); /* faint */ } /* end grip */ .manual__form { display: flex; flex-direction: column; gap: 1rem; } /* stacked field and buttons */ .manual__row { display: flex; gap: 0.75rem; } /* side-by-side cancel/confirm buttons */