Update display_global.php
This commit is contained in:
Lizandro Guarnizo
@@ -57,13 +57,13 @@ $_hasVideo = (bool)$_tvVideo;
|
||||
background: #f1f5f9; border-radius: 8px; padding: 4px 7px;
|
||||
}
|
||||
.lab-nombre {
|
||||
font-size: clamp(1.1rem, 2vw, 1.4rem);
|
||||
font-size: clamp(1.35rem, 2.3vw, 1.65rem);
|
||||
font-weight: 700; color: #1e293b;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.hd-right { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
|
||||
.reloj {
|
||||
font-size: clamp(1.3rem, 2.5vw, 1.7rem);
|
||||
font-size: clamp(1.55rem, 2.8vw, 1.95rem);
|
||||
font-weight: 700; color: #64748b;
|
||||
font-variant-numeric: tabular-nums; letter-spacing: .5px;
|
||||
}
|
||||
@@ -76,15 +76,34 @@ $_hasVideo = (bool)$_tvVideo;
|
||||
.btn-fs {
|
||||
background: transparent; border: 1px solid #e2e8f0;
|
||||
color: #64748b; border-radius: 8px; padding: 6px 10px;
|
||||
font-size: .85rem; cursor: pointer; font-family: inherit;
|
||||
font-size: 1.1rem; cursor: pointer; font-family: inherit;
|
||||
transition: background .15s;
|
||||
}
|
||||
.btn-fs:hover { background: #f1f5f9; }
|
||||
|
||||
/* ── Background decoration ── */
|
||||
.bg-deco {
|
||||
position: fixed; inset: 0;
|
||||
pointer-events: none; z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bg-deco .dot {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: var(--brand);
|
||||
opacity: .04;
|
||||
}
|
||||
.bg-deco .dot:nth-child(1) { width: 300px; height: 300px; top: -80px; left: -60px; }
|
||||
.bg-deco .dot:nth-child(2) { width: 180px; height: 180px; bottom: 10%; left: 15%; }
|
||||
.bg-deco .dot:nth-child(3) { width: 120px; height: 120px; top: 30%; left: 60%; }
|
||||
.bg-deco .dot:nth-child(4) { width: 240px; height: 240px; bottom: -60px; right: 30%; }
|
||||
.bg-deco .dot:nth-child(5) { width: 80px; height: 80px; top: 15%; right: 25%; }
|
||||
|
||||
/* ── Main body ── */
|
||||
.pg-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
@@ -100,7 +119,7 @@ $_hasVideo = (bool)$_tvVideo;
|
||||
overflow: hidden;
|
||||
}
|
||||
.turno-activo .label {
|
||||
font-size: clamp(.85rem, 1.4vw, 1.05rem);
|
||||
font-size: clamp(1.1rem, 1.7vw, 1.3rem);
|
||||
font-weight: 700; text-transform: uppercase; letter-spacing: 4px;
|
||||
color: #94a3b8;
|
||||
margin-bottom: .2rem;
|
||||
@@ -114,38 +133,43 @@ $_hasVideo = (bool)$_tvVideo;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.turno-activo .lugar-label {
|
||||
font-size: clamp(1.1rem, 2.7vw, 1.9rem);
|
||||
font-size: clamp(1.35rem, 3vw, 2.15rem);
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
margin-top: .3rem;
|
||||
}
|
||||
.turno-activo .lugar-nombre {
|
||||
font-size: clamp(1.5rem, 3.7vw, 2.8rem);
|
||||
font-size: clamp(1.75rem, 4vw, 3.05rem);
|
||||
font-weight: 800;
|
||||
color: #1e293b;
|
||||
margin-top: .1rem;
|
||||
}
|
||||
.turno-activo .pac-nombre {
|
||||
font-size: clamp(.9rem, 1.8vw, 1.2rem);
|
||||
font-size: clamp(1.15rem, 2.1vw, 1.45rem);
|
||||
color: #64748b;
|
||||
margin-top: .3rem;
|
||||
}
|
||||
.turno-activo .sin-turno {
|
||||
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
|
||||
font-size: clamp(1.45rem, 2.8vw, 2.05rem);
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* ── Video reel (columna derecha, alto completo) ── */
|
||||
.pg-body.has-video {
|
||||
grid-template-columns: 1fr 220px;
|
||||
}
|
||||
/* ── Video reel flotante (9:16, alto completo) ── */
|
||||
.reel-wrap {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: calc(100% - 60px);
|
||||
aspect-ratio: 9 / 16;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
border-left: 1px solid rgba(255,255,255,.06);
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.08);
|
||||
z-index: 10;
|
||||
}
|
||||
.reel-wrap.has-video { display: block; height: 100%; }
|
||||
.reel-wrap.has-video { display: block; }
|
||||
.reel-wrap video {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
@@ -167,7 +191,7 @@ $_hasVideo = (bool)$_tvVideo;
|
||||
}
|
||||
.pg-cola::-webkit-scrollbar { display: none; }
|
||||
.cola-lbl {
|
||||
font-size: .6rem; font-weight: 700;
|
||||
font-size: .85rem; font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: 1.5px;
|
||||
color: #94a3b8; white-space: nowrap; flex-shrink: 0;
|
||||
}
|
||||
@@ -175,14 +199,14 @@ $_hasVideo = (bool)$_tvVideo;
|
||||
.cola-chip {
|
||||
display: inline-flex; align-items: center; gap: .25rem;
|
||||
padding: .2rem .6rem; border-radius: 99px;
|
||||
font-size: .72rem; font-weight: 700;
|
||||
font-size: .97rem; font-weight: 700;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
white-space: nowrap; flex-shrink: 0;
|
||||
}
|
||||
.cola-chip .cdot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
|
||||
.cola-empty { font-size: .65rem; color: #cbd5e1; }
|
||||
.cola-empty { font-size: .9rem; color: #cbd5e1; }
|
||||
|
||||
/* ── Announcement overlay ── */
|
||||
#ann-overlay {
|
||||
@@ -204,7 +228,7 @@ $_hasVideo = (bool)$_tvVideo;
|
||||
}
|
||||
#ann-overlay.visible .ann-card { transform: scale(1) translateY(0); }
|
||||
.ann-label {
|
||||
font-size: clamp(.8rem, 1.5vw, 1rem); font-weight: 700;
|
||||
font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: 4px;
|
||||
color: rgba(255,255,255,.3); margin-bottom: .2rem;
|
||||
}
|
||||
@@ -216,11 +240,11 @@ $_hasVideo = (bool)$_tvVideo;
|
||||
text-shadow: 0 0 80px var(--ac, var(--brand))66;
|
||||
}
|
||||
.ann-destino {
|
||||
font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 700;
|
||||
font-size: clamp(1.75rem, 4.3vw, 3.25rem); font-weight: 700;
|
||||
color: #fff; margin-top: .2rem;
|
||||
}
|
||||
.ann-pac {
|
||||
font-size: clamp(.8rem, 1.5vw, 1.1rem);
|
||||
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
|
||||
color: rgba(255,255,255,.45); margin-top: .3rem;
|
||||
}
|
||||
.ann-progress {
|
||||
@@ -248,12 +272,12 @@ $_hasVideo = (bool)$_tvVideo;
|
||||
}
|
||||
.stat-item { text-align: center; }
|
||||
.stat-item .val {
|
||||
font-size: clamp(.7rem, 1.2vw, .85rem);
|
||||
font-size: clamp(.95rem, 1.5vw, 1.1rem);
|
||||
font-weight: 700; color: #475569;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.stat-item .lbl {
|
||||
font-size: .5rem; color: #94a3b8;
|
||||
font-size: .75rem; color: #94a3b8;
|
||||
text-transform: uppercase; letter-spacing: 1px;
|
||||
}
|
||||
.stat-sep { width: 1px; height: 18px; background: #e2e8f0; }
|
||||
@@ -265,6 +289,14 @@ $_hasVideo = (bool)$_tvVideo;
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="bg-deco">
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
|
||||
<div id="ann-overlay">
|
||||
<div class="ann-bg"></div>
|
||||
<div class="ann-card">
|
||||
|
||||
Reference in New Issue
Block a user