isaacclad/ladill-queue
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle Queue kiosk to match Frontdesk kiosk design.
Deploy Ladill Queue / deploy (push) Successful in 35s
Details

Browse Source 
Welcome screen, choice cards, form progress, and success state now follow the same lobby-tablet visual language with idle reset.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-29 23:31:29 +00:00
co-authored by Cursor
parent 492eec9cda
commit 4a608fedf2
7 changed files with 280 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+4 -94
View File
@@ -428,104 +428,14 @@ html:has(.qms-display) body {
rgb(255 255 255 / 0.97);
}
/* Self-service kiosk */
html:has(.qms-kiosk),
html:has(.qms-kiosk) body,
html:has(.qms-kiosk) .qms-kiosk {
/* Self-service kiosk — ticket number sizing (Frontdesk-style shell uses Tailwind) */
html:has(.qms-kiosk__ticket-number),
html:has(.qms-kiosk__ticket-number) body {
font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
}
html:has(.qms-kiosk),
html:has(.qms-kiosk) body {
height: 100%;
overflow: hidden;
}
.qms-kiosk {
display: flex;
flex-direction: column;
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
background:
radial-gradient(ellipse 90% 60% at 50% -20%, rgb(238 242 255 / 0.9), transparent),
linear-gradient(180deg, rgb(248 250 252) 0%, rgb(255 255 255) 100%);
color: rgb(15 23 42);
}
.qms-kiosk__shell {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
}
.qms-kiosk__main {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
}
.qms-kiosk__queue-grid {
display: grid;
width: 100%;
gap: 0.75rem;
}
.qms-kiosk__queue-btn {
display: flex;
width: 100%;
align-items: center;
gap: 1rem;
border-radius: 1rem;
border: 1px solid rgb(226 232 240);
background: #fff;
padding: 1rem 1.25rem;
text-align: left;
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qms-kiosk__queue-btn:hover {
border-color: rgb(165 180 252);
box-shadow: 0 8px 24px -12px rgb(79 70 229 / 0.25);
}
.qms-kiosk__queue-btn:disabled {
opacity: 0.6;
pointer-events: none;
}
.qms-kiosk__queue-mark {
display: flex;
height: 2.75rem;
width: 2.75rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 0.75rem;
font-size: 0.875rem;
font-weight: 700;
color: #fff;
}
.qms-kiosk__ticket-card {
width: 100%;
border-radius: 1.5rem;
border: 1px solid rgb(226 232 240);
background: #fff;
padding: clamp(1.5rem, 5vh, 3rem);
text-align: center;
box-shadow:
0 1px 2px rgb(15 23 42 / 0.04),
0 24px 48px -20px rgb(79 70 229 / 0.18);
}
.qms-kiosk__ticket-number {
font-size: clamp(3.5rem, 16vh, 7rem);
font-size: clamp(3.5rem, 16vh, 5.5rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;