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