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

fix(fusion_clock): NFC kiosk header — center logo at top, stack clock+date below

Browse Source
This commit is contained in:
gsinghpal
2026-05-14 08:42:26 -04:00
parent 42e8fe3d21
commit 1414ef2c1c
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -99,14 +99,15 @@ html:has(#nfc_kiosk_root) {
// ─────────────────────────────────────────────────────────────────────
// Header chrome — logo, time, date, location, settings
// ─────────────────────────────────────────────────────────────────────
// 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.
// Logo centered at the top, on a subtle frosted-glass pill — just enough lift
// to keep dark logos readable on the dark gradient.
.nfc-kiosk__logo {
position: absolute;
top: 1.25rem;
left: 1.5rem;
left: 50%;
transform: translateX(-50%);
max-height: 52px;
max-width: 200px;
max-width: 220px;
object-fit: contain;
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(24px) saturate(180%);
@@ -122,8 +123,8 @@ html:has(#nfc_kiosk_root) {
}
@keyframes nfc-logo-in {
from { opacity: 0; transform: translateY(-12px) scale(0.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.94); }
to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.nfc-kiosk__company {
@@ -139,9 +140,10 @@ html:has(#nfc_kiosk_root) {
// When a logo is present, the company-name text is redundant — hide it.
.nfc-kiosk__logo ~ .nfc-kiosk__company { display: none; }
// Clock + date stack vertically below the logo, all centered.
.nfc-kiosk__time {
position: absolute;
top: 1.75rem;
top: 6.25rem; // sits below the logo (logo bottom ≈ 90px)
left: 50%;
transform: translateX(-50%);
font-size: 2.5rem;
@@ -165,10 +167,10 @@ html:has(#nfc_kiosk_root) {
.nfc-kiosk__date {
position: absolute;
top: 5.25rem;
top: 9.75rem; // sits below the time
left: 50%;
transform: translateX(-50%);
font-size: 0.9rem;
font-size: 0.85rem;
color: var(--nfc-text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;