admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fusion_clock): NFC kiosk — subtle logo glass, centered clock, AM/PM

Browse Source
This commit is contained in:
gsinghpal
2026-05-14 08:38:25 -04:00
parent bad73fcea8
commit 42e8fe3d21
2 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
fusion_clock/static/src/scss/nfc_kiosk.scss
View File

@@ -99,21 +99,24 @@ html:has(#nfc_kiosk_root) {
// ─────────────────────────────────────────────────────────────────────
// Header chrome — logo, time, date, location, settings
// ─────────────────────────────────────────────────────────────────────
// Logo on a near-white glass pill so dark logos read against the dark page.
// Positioned top-left so it doesn't collide with the time in the top-right.
// Logo on a subtle frosted-glass pill — just enough lift to keep dark logos
// readable against the dark gradient, without looking like a glaring sticker.
.nfc-kiosk__logo {
position: absolute;
top: 1.25rem;
left: 1.5rem;
max-height: 56px;
max-width: 220px;
max-height: 52px;
max-width: 200px;
object-fit: contain;
background: rgba(255, 255, 255, 0.94);
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
padding: 0.5rem 0.85rem;
border-radius: 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 1);
0 6px 24px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-sizing: content-box;
animation: nfc-logo-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@@ -139,22 +142,36 @@ html:has(#nfc_kiosk_root) {
.nfc-kiosk__time {
position: absolute;
top: 1.75rem;
right: 2rem;
font-size: 2.25rem;
left: 50%;
transform: translateX(-50%);
font-size: 2.5rem;
font-weight: 300;
color: var(--nfc-text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
display: flex;
align-items: baseline;
gap: 0.45rem;
white-space: nowrap;
.ampm {
font-size: 1rem;
font-weight: 500;
color: var(--nfc-text-muted);
letter-spacing: 0.08em;
}
}
.nfc-kiosk__date {
position: absolute;
top: 5rem;
right: 2rem;
top: 5.25rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.9rem;
color: var(--nfc-text-muted);
letter-spacing: 0.02em;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.nfc-kiosk__location {