Update display_global.php
This commit is contained in:
@@ -101,12 +101,14 @@ $_hasVideo = (bool)$_tvVideo;
|
|||||||
|
|
||||||
/* ── Main body ── */
|
/* ── Main body ── */
|
||||||
.pg-body {
|
.pg-body {
|
||||||
display: flex;
|
display: grid;
|
||||||
align-items: center;
|
grid-template-columns: 1fr;
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
.pg-body.has-video {
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* ── Turno activo (centro) ── */
|
/* ── Turno activo (centro) ── */
|
||||||
@@ -154,22 +156,22 @@ $_hasVideo = (bool)$_tvVideo;
|
|||||||
color: #cbd5e1;
|
color: #cbd5e1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Video reel flotante (9:16, alto completo) ── */
|
/* ── Video reel (9:16, alto completo, columna derecha) ── */
|
||||||
.reel-wrap {
|
.reel-wrap {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
height: 100%;
|
||||||
right: 40px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
height: calc(100% - 60px);
|
|
||||||
aspect-ratio: 9 / 16;
|
aspect-ratio: 9 / 16;
|
||||||
border-radius: 20px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #000;
|
background: #000;
|
||||||
box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.08);
|
padding: 8px 8px 8px 0;
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
.reel-wrap.has-video { display: block; }
|
.reel-wrap.has-video { display: block; }
|
||||||
|
.reel-wrap .reel-inner {
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: -8px 0 30px rgba(0,0,0,.08);
|
||||||
|
}
|
||||||
.reel-wrap video {
|
.reel-wrap video {
|
||||||
width: 100%; height: 100%;
|
width: 100%; height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
@@ -282,9 +284,6 @@ $_hasVideo = (bool)$_tvVideo;
|
|||||||
}
|
}
|
||||||
.stat-sep { width: 1px; height: 18px; background: #e2e8f0; }
|
.stat-sep { width: 1px; height: 18px; background: #e2e8f0; }
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
.reel-wrap { width: 200px; height: 356px; }
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -334,11 +333,13 @@ $_hasVideo = (bool)$_tvVideo;
|
|||||||
<div class="pac-nombre" id="pac-nombre"></div>
|
<div class="pac-nombre" id="pac-nombre"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="reel-wrap <?= $_hasVideo ? 'has-video' : '' ?>" id="reel-wrap">
|
<div class="reel-wrap <?= $_hasVideo ? 'has-video' : '' ?>" id="reel-wrap">
|
||||||
|
<div class="reel-inner">
|
||||||
<video autoplay muted loop playsinline>
|
<video autoplay muted loop playsinline>
|
||||||
<source src="<?= htmlspecialchars($_tvVideo) ?>">
|
<source src="<?= htmlspecialchars($_tvVideo) ?>">
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="pg-cola" id="pg-cola">
|
<div class="pg-cola" id="pg-cola">
|
||||||
<span class="cola-lbl">EN ESPERA</span>
|
<span class="cola-lbl">EN ESPERA</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user