/* ========================================================================== * [ESMAKA BLOQUE 96 · FASE 9] STACK-NAVIGATION — INFRAESTRUCTURA DE LA PILA MOVIL * -------------------------------------------------------------------------- * POC de navegacion por PILA DE VISTAS (tarjetas apiladas) para la vista movil. * Contrato completo: `ESMAKA-DOC/SPEC-STACK-SPA-V1.md`. * * EXCEPCION DOCUMENTADA A [CSS-1]: este fichero NO forma parte del fichero unico * (`media/templates/site/esmaka_social/css/template.css`) porque la directiva del * bloque 96 lo pide como artefacto de PRUEBA, cargado SOLO en movil y SOLO en esta * fase. Antes de produccion se consolida en el fichero unico (ver SPEC §9). * * [ISO-1] ESCRITORIO INTOCABLE: * - el bootstrap de `index.php` NO inyecta este fichero fuera de * `(max-width: 1023.98px)`, asi que en escritorio ni se descarga; * - y ademas todo va dentro de `@media (max-width: 1023.98px)` con una barrera * final que lo desactiva por completo en `>= 1024px`. * * CLAVES DE DISENO (medidas, no supuestas; ver SPEC §4.1): * 1. El viewport es `position: fixed`. Con `position: relative` en el flujo, una * tarjeta absoluta se coloca en el DOCUMENTO y=0: con el documento scrolleado * (el scroller es `html`) el usuario no veria la tarjeta y habria que hacer * `scrollTo(0)`, que es justo lo que destruye la posicion de la Portada. * 2. Cada tarjeta tiene SU PROPIO scroll (`overflow-y: auto`) y * `overscroll-behavior: contain` para que el scroll no se encadene al * documento de abajo. Con esto, el scroll de la Portada no se toca NUNCA: * su conservacion es estructural, no una restauracion. * 3. La tarjeta arranca por DEBAJO del header sticky (`--es-header-h`, que publica * el controlador del BLOQUE 96) para que la barra «Volver» quede siempre visible * y el shell (logo, lupa, hamburguesa) siga siendo el de la app. * 4. NO se usa `transform` en el root (`#swup`): un `transform` en un ancestro crea * containing block para los `position:fixed` de EasySocial. Es la trampa medida * en [H472] con el header. El root solo se SUSPENDE (render + interaccion). * ========================================================================== */ @media (max-width: 1023.98px) { /* ---------------------------------------------------------------------- * 1. VIEWPORT DE LA PILA * [B108 · TAREA 1] ELEVACION A 99998. Antes 900: las tarjetas quedaban por * DEBAJO del header sticky (99998, appshell L930) y de su popbox (100006), asi * que el cromo del shell se dibujaba sobre una tarjeta que ya ocupa el 100 % del * viewport ([B107] `top: 0`). Con 99998 el viewport EMPATA con el header y gana * por ORDEN DE DOCUMENTO (el viewport se anade a `body` al apilar, despues del * header). Se queda por debajo del cajon lateral (999998) y de su velo (999999), * que deben seguir tapando la baraja. * Sin tarjetas no intercepta nada: `pointer-events: none`. * -------------------------------------------------------------------- */ #esmaka-stack-viewport { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99998; overflow: hidden; pointer-events: none; } /* ---------------------------------------------------------------------- * 2. TARJETA (VISTA APILADA) * -------------------------------------------------------------------- */ .esmaka-view-card { position: absolute; /* [B107 · TAREA 2] GEOMETRIA A PANTALLA COMPLETA. Antes la tarjeta arrancaba debajo del header sticky + el bisel de 12 px (`top: calc(var(--es-header-h) + var(--esmaka-bisel))`) y descontaba esa altura, para dejar asomar la capa de abajo ([B98]). El OPERATOR pide que ocupe el 100 % del viewport movil sin desplazamientos hacia abajo: el cromo nativo de la tarjeta (`.esmaka-card-header`, 50 px, sticky) es ahora quien gobierna la cabecera. `--es-header-h` y `--esmaka-bisel` SIGUEN definidos (los usa el velo), pero ya no recortan la tarjeta. */ top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg-canvas, var(--esmaka-canvas, #18191a)); box-sizing: border-box; pointer-events: auto; /* Las esquinas redondeadas las recorta el propio contenedor de scroll: NO hace falta `overflow: hidden` (aqui seria contraproducente: la tarjeta ES el contenedor de scroll de la vista, y `hidden` mataria su scroll interno). */ border-radius: 16px 16px 0 0; backface-visibility: hidden; will-change: transform, filter; transition: transform .32s cubic-bezier(.32, .72, 0, 1), filter .32s ease; } /* Estado de arriba: en su sitio, por encima de las demas y proyectando su volumen sobre la capa de abajo (sombra a la izquierda, como pide la directiva, mas una hacia arriba que es la que dibuja el bisel). */ .esmaka-view-card.is-top { transform: translate3d(0, 0, 0); z-index: 10; /* [B106 · TAREA 2] Sombra volumetrica proyectada a la IZQUIERDA con los valores de la directiva (-10px 0 35px). Se CONSERVA la segunda sombra hacia arriba: es la que dibuja el bisel de 12 px por el que asoma la capa de abajo ([B98]); quitarla borraria la lectura de "carta sobre carta". */ box-shadow: -10px 0 35px rgba(0, 0, 0, .4), 0 -10px 26px rgba(0, 0, 0, .45); /* [B106 · TAREA 2] La carta de arriba entra desde la derecha: solo se redondea la esquina SUPERIOR IZQUIERDA (la de abajo lleva las dos, que es la baraja visible). */ border-radius: 16px 0 0 0; } /* Entrando (y saliendo): fuera de pantalla por la derecha. */ .esmaka-view-card.is-entering, .esmaka-view-card.is-exiting { transform: translate3d(100%, 0, 0); z-index: 10; } /* [B98 · TAREA 1] SUSPENDIDA = la carta que queda DEBAJO. Retrocede en el espacio en vez de ocultarse: escala, esquinas y penumbra (`brightness`). `--esmaka-arrastre` (0..1) la escribe el gesto en el viewport, de modo que la capa de abajo "vuelve a la vida" EN TIEMPO REAL mientras se arrastra la de arriba: una sola variable mueve escala y brillo = una escritura por frame (60 fps). */ .esmaka-view-card.is-suspended { transform: scale(calc(.94 + (.06 * var(--esmaka-arrastre, 0)))) translate3d(0, 0, 0); /* [B106 · TAREA 2] Base 0.80 y no 0.75: es la formula que fija la directiva (brillo = 0.80 + 0.20 * progreso), la misma que el gesto publica en `--esmaka-arrastre`. */ filter: brightness(calc(.8 + (.2 * var(--esmaka-arrastre, 0)))); transform-origin: center top; border-radius: 16px 16px 0 0; z-index: 5; pointer-events: none; /* [B106 · TAREA 2] Recorta el contenido a las esquinas redondeadas. Aqui SI es seguro: la carta suspendida tiene `pointer-events: none`, no se scrollea. */ overflow: hidden; } /* Dos o mas niveles por debajo de la cima: la tapa la de arriba, asi que se salta su render. Aqui SI es seguro `content-visibility` (altura explicita + viewport `fixed`), pero NUNCA en la capa que tiene que verse como baraja. */ .esmaka-view-card.is-suspended-profundo { content-visibility: hidden; } /* Terminada la animacion no hace falta capa de composicion... pero SOLO en la de arriba: una suspendida tiene que CONSERVAR su escala de baraja (si se aplanara, la baraja desapareceria al acabar la transicion). */ .esmaka-view-card.is-settled.is-top { transform: none; will-change: auto; } /* Mientras el dedo arrastra no hay transicion (la tarjeta va 1:1) y SI hay capa de composicion: es el momento en el que `will-change` importa de verdad. Cuando la tarjeta se asienta se retira (`.is-settled.is-top`), para no dejar una capa de GPU viva durante toda la vida de la vista. [B106 · TAREA 2.3] ⚠ HACIA FALTA EL SELECTOR DE TRES CLASES. MEDIDO (375x667): con `.esmaka-view-card.is-arrastrando` (2 clases) el `will-change` en vuelo seguia siendo `auto`, porque la regla `.esmaka-view-card.is-settled.is-top` (3 clases, mas arriba) declara `will-change: auto` y GANA por especificidad: la tarjeta se quedaba sin capa de GPU justo mientras el dedo la mueve. El `.is-top` de la cima CONSERVA `is-settled` (solo se retira a las que dejan de ser cima), asi que el choque era sistematico, no ocasional. */ .esmaka-view-card.is-arrastrando, .esmaka-view-card.is-top.is-arrastrando { transition: none; will-change: transform, filter; } /* Mientras se arrastra, la capa de abajo TAMPOCO transiciona: su escala y su brillo van exactamente con el dedo (el CSS los calcula con `--esmaka-arrastre`). Al soltar se retira la clase y vuelve la transicion, que es lo que anima el retorno. */ #esmaka-stack-viewport.is-arrastrando .esmaka-view-card.is-suspended { transition: none; } /* ---------------------------------------------------------------------- * 3. ROOT (PORTADA) SUSPENDIDA * `#swup` NO puede llevar la clase de tarjeta (le aplicaria `position` y * destruiria el layout) y NO puede llevar `transform` (§ claves, punto 4). * * ⚠⚠ PROHIBIDO `content-visibility: hidden` AQUI. MEDIDO (19-SEP-2026, 375x667): * base, scroll 900 ................ scrollY=900 htmlScrollH=3314 #swup=3208 * + content-visibility: hidden .... scrollY=0 htmlScrollH=667 #swup=0 * + inert ......................... scrollY=900 htmlScrollH=3314 #swup=3208 * + pointer-events: none .......... scrollY=900 htmlScrollH=3314 #swup=3208 * El contenedor de altura AUTOMATICA se colapsa a 0 px, el alto del documento * cae al del viewport y **el navegador fija el scroll a 0**: se pierde justo el * pixel que este bloque existe para conservar. Es la misma familia de trampa que * `body{overflow:hidden}` con el cajon ([H472]), por otra via. * (En las TARJETAS si es seguro: tienen altura explicita y viven en un viewport * `fixed`, asi que su caja no colapsa ni afecta al scroll del documento.) * -------------------------------------------------------------------- */ #swup.is-esmaka-suspended { pointer-events: none; } /* [B98 · TAREA 1] LA PORTADA CUANDO HAY BARAJA ENCIMA. ⚠ NO lleva `transform` NI `filter`: los dos crean *containing block* para los `position:fixed` que viven DENTRO de la portada. MEDIDO (375x667, `/es/`): - `a#back-top.back-to-top-link` (27x37, z-index 10000) es hijo DIRECTO de `#swup`; - `div.es-stream-login-box` (375x181, z-index 1) esta DENTRO de `.site-grid`. Con la portada transformada, esos dos pasarian a colocarse respecto a su caja (el documento entero, 3887 px) en vez de respecto al viewport: el boton de "volver arriba" se iria al FONDO de la pagina. Es la trampa de [H472], aqui con nombres. Por eso la portada retrocede con dos cosas que NO tocan layout ni scroll: `border-radius` en sus esquinas + velo de penumbra en el bisel. */ #swup .site-grid.is-stacked-root { border-radius: 16px 16px 0 0; } /* Velo del bisel: TODO lo que queda a la vista por encima de la tarjeta (el header mas los 12 px de bisel). Se extiende hasta `top: 0` a proposito: con el header auto-oculto ([B96]) esa zona queda al aire y sin velo se veria la portada sin penumbra. Si el header esta visible, es opaco y tapa el velo: no se nota. Se apaga solo mientras se arrastra (`--esmaka-arrastre`), que es lo que hace que la baraja "respire" al destapar la carta de abajo. */ #esmaka-stack-viewport::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--es-header-h, 56px) + var(--esmaka-bisel, 12px)); background: rgba(0, 0, 0, .28); pointer-events: none; opacity: 0; transition: opacity .32s ease; } #esmaka-stack-viewport.is-baraqueado::before { opacity: calc(1 - var(--esmaka-arrastre, 0)); } /* ---------------------------------------------------------------------- * 4. CROMO NATIVO DE LA TARJETA [B98 · TAREA 3] * Barra estilo iOS/Android: 48 px, translucida con desenfoque, pegada arriba del * scroll interno de la tarjeta (la tarjeta arranca debajo del header, asi que * `top: 0` aqui siempre esta a la vista), chevron con area tactil de 44x44 y titulo * centrado recortado. * * ⚠ `--canvas-rgb` y `--border-color` NO EXISTEN en esmaka (medido: ambas vacias). * Se mantienen como PRIMER candidato, con respaldo real: el POC publica * `--esmaka-canvas-rgb` (triplete medido del fondo real del body: 24, 25, 26) y el * borde cae a un gris translucido que se lee bien en los DOS temas. * -------------------------------------------------------------------- */ .esmaka-card-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 2px; /* [B106 · TAREA 4] 50 px de alto (barra nativa) y cristal de 16 px de desenfoque. */ height: 50px; padding: 0 6px; box-sizing: border-box; /* `--bg-glass` SI existe en esmaka: la define `template.css` en los DOS temas (L44828 oscuro = rgba(25,25,25,.7); L45424 claro = rgba(230,235,240,.7)), asi que el cristal es consciente del tema. El respaldo medido se conserva por si el fichero se carga suelto. */ background: var(--bg-glass, rgba(var(--esmaka-canvas-rgb, 24, 25, 26), .85)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); /* Linea de luz de la directiva. En tema claro queda practicamente invisible (no molesta); si el OPERATOR prefiere una linea neutra en los dos temas, el valor anterior era `var(--border-color, rgba(128, 128, 128, .28))`. */ border-bottom: 1px solid rgba(255, 255, 255, .12); } .esmaka-btn-chevron { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; color: inherit; border: 0; border-radius: 50%; cursor: pointer; touch-action: manipulation; appearance: none; -webkit-appearance: none; } .esmaka-btn-chevron:active { background: rgba(128, 128, 128, .22); } .esmaka-btn-chevron svg { display: block; width: 26px; height: 26px; pointer-events: none; } /* [B97-F9 · TAREA 2] «Inicio» (Suelo Sagrado): secundario, a la derecha, y solo cuando la pila tiene mas de un nivel. Un toque al feed. */ .esmaka-btn-home { flex: 0 0 auto; height: 44px; min-width: 44px; padding: 0 8px; background: transparent; color: inherit; border: 0; border-radius: 10px; font-size: 12px; font-weight: 600; opacity: .75; cursor: pointer; touch-action: manipulation; appearance: none; -webkit-appearance: none; } .esmaka-btn-home:active { opacity: 1; background: rgba(128, 128, 128, .22); } .esmaka-card-titulo { flex: 1 1 auto; min-width: 0; /* [B106 · TAREA 4] 70 % (directiva) para el titulo recortado con elipsis. */ max-width: 70%; margin: 0 auto; text-align: center; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Cuerpo de la tarjeta: el HTML inyectado. [B107 · TAREA 3 · H508] INSERCION LATERAL REPUESTA. MEDIDO en la carga directa (375x667): el `#es` mide 359 px porque su ancestro `div.grid-child.container-component` lleva `padding: 0 8px` (cadena real: html > body.site > #swup > .site-grid > .grid-child.container-component > main > #es). Dentro de la tarjeta el `#es` cuelga directo de este cuerpo, que mide el 100 %, asi que medIa 375 px: TODA la rejilla salia 16 px mas ancha y, en consecuencia, mas corta. Se repone aqui el mismo valor medido, con `border-box` para que el relleno no sume ancho. */ .esmaka-card-cuerpo { display: block; width: 100%; padding: 0 8px; box-sizing: border-box; } /* Mientras se trae el HTML: el propio loader de EasySocial, ya estilado. */ .esmaka-card-cargando { display: grid; place-items: center; min-height: 40vh; } /* ---------------------------------------------------------------------- * 4ter. [B114] FICHA DE VIDEO ESTILO YOUTUBE MOVIL * Todo acotado a `.esmaka-view-card .esmaka-card-cuerpo`, asi que escritorio y el * resto de vistas quedan intactos ([ISO-1]). * * REGLA SAGRADA DEL BOTON DE REACCIONES: el boton de EasySocial * (`[data-reaction-item]` + `data-popbox="module://easysocial/likes/popbox"`) NO se * toca: mismo marcado, mismos eventos, mismos atributos. Solo se le da aspecto de * pildora desde FUERA. Y sus ancestros NO pueden recortar, o el popover de emociones * no podria salir: por eso la fila de pildoras NO lleva `overflow` (se envuelve en * varias lineas) en vez de ser una barra deslizable que recortaria el popover. * -------------------------------------------------------------------- */ /* `!important` en la tipografia del titulo: EasySocial la fija con reglas ancladas en `#es` (un id pesa mas que estas tres clases) y sin el la medida se quedaba en 18,2 px. */ .esmaka-view-card .esmaka-card-cuerpo .es-video-title { font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #fff; margin: 0 0 8px 0 !important; } /* Fila de metadatos (autor, categoria, vistas, fecha) + el interruptor del resplandor */ .esmaka-view-card .esmaka-card-cuerpo .es-video-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; line-height: 1.35; margin-bottom: 6px; } .esmaka-view-card .esmaka-card-cuerpo .es-video-meta .o-avatar-v2, .esmaka-view-card .esmaka-card-cuerpo .es-video-meta .es-avatar { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; } .esmaka-view-card .esmaka-card-cuerpo .es-video-meta img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .esmaka-view-card .esmaka-card-cuerpo .es-video-meta a { font-weight: 600; font-size: 14px; } /* el interruptor del resplandor, integrado en la fila */ .esmaka-view-card .esmaka-card-cuerpo #ambilight-toggle-container { margin-left: auto; padding-left: 0; color: #9aa0a6; font-size: 12px; } .esmaka-view-card .esmaka-card-cuerpo #ambilight-toggle-container .ambilight-switch { transform: scale(0.9); } /* Pildoras de accion (la primera es el boton de reacciones de EasySocial) */ .esmaka-view-card .esmaka-card-cuerpo .es-actions__item-action .es-actions-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px 0; margin: 0; list-style: none; } .esmaka-view-card .esmaka-card-cuerpo .es-actions__item-action .es-actions-list > li { display: inline-flex; margin: 0; } .esmaka-view-card .esmaka-card-cuerpo .es-actions__item-action .es-actions-list > li > a, .esmaka-view-card .esmaka-card-cuerpo .es-actions__item-action .es-actions-list > li > button, .esmaka-view-card .esmaka-card-cuerpo .es-actions__item-action .es-actions-list > li > span, .esmaka-view-card .esmaka-card-cuerpo .es-reaction-icon-stat__item, .esmaka-view-card .esmaka-card-cuerpo .es-action-feedback { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 18px; padding: 6px 14px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #f1f1f1; text-decoration: none; cursor: pointer; min-height: 32px; box-sizing: border-box; } .esmaka-view-card .esmaka-card-cuerpo .es-reaction-stats, .esmaka-view-card .esmaka-card-cuerpo .es-reaction-stats__icons, .esmaka-view-card .esmaka-card-cuerpo .es-reaction-icon-stat { display: inline-flex; align-items: center; gap: 6px; overflow: visible; } .esmaka-view-card .esmaka-card-cuerpo .es-reaction-stats { padding: 4px 0 12px 0; } /* Resumen compacto con "...mas" */ .esmaka-view-card .esmaka-card-cuerpo .esmaka-resumen { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 10px 14px; margin: 10px 0; cursor: pointer; } .esmaka-view-card .esmaka-card-cuerpo .esmaka-resumen__meta { display: flex; gap: 10px; font-size: 12px; color: #9aa0a6; margin-bottom: 4px; } .esmaka-view-card .esmaka-card-cuerpo .esmaka-resumen__texto { font-size: 13px; line-height: 1.4; color: #e8e8e8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .esmaka-view-card .esmaka-card-cuerpo .esmaka-resumen__mas { font-weight: 700; color: #fff; } /* [TAREA 2.1] la descripcion en crudo del cuerpo se oculta en movil. [B119] El MISMO anclaje sirve a la CARGA DIRECTA: alli la descripcion cruda mide 1.453,1 px (medido) y la marca `esmaka-desc-oculta` la pone el JS de la pila, que en carga directa tambien se ejecuta. */ :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-desc-oculta { display: none !important; } /* La hoja inferior (el `dropdown-menu` de EasySocial, reutilizado como Bottom Sheet). [B119] El anclaje se abre a `#es.is-mobile.view-videos` para que la hoja funcione IGUAL en la carga directa: el JS monta en ella el tirador, la cabecera y las estadisticas en las dos vistas, asi que su aspecto no puede depender de la vista. */ :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .es-video-desc.dropdown-menu { display: none; } :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .es-video-desc.dropdown-menu.is-esmaka-abierta { display: block !important; position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; max-height: 72vh; overflow-y: auto !important; background: #212121; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .55); padding: 0 16px 18px 16px; z-index: 100010 !important; margin: 0 !important; } :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-hoja__tirador { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); margin: 8px auto; } :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-hoja__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-hoja__titulo { font-size: 16px; font-weight: 700; color: #fff; } :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-hoja__cerrar { background: rgba(255, 255, 255, 0.08); border: 0; border-radius: 50%; width: 32px; height: 32px; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; } :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-hoja__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-hoja__stat { background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 10px 8px; text-align: center; } :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-hoja__stat b { display: block; font-size: 15px; color: #fff; } :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-hoja__stat span { font-size: 11px; color: #9aa0a6; } :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-hoja__cuerpo { font-size: 14px; line-height: 1.55; color: #e8e8e8; white-space: pre-wrap; word-break: break-word; } :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-hoja__cuerpo a { color: #3ea6ff; } /* [B115 · TAREA 2] FUERA LA CAJA GRIS INVENTADA Y EL CHEVRON NATIVO. YouTube no tiene ninguna caja de resumen: la linea de metadatos lleva el "...mas" inline y el resto lo hace la hoja inferior. `.es-video-description-toggle` es el chevron `v` de EasySocial (template.css L39964): se oculta. */ .esmaka-view-card .esmaka-card-cuerpo .es-video-description-toggle, .esmaka-view-card .esmaka-card-cuerpo .es-video-description-toggle + *, .esmaka-view-card .esmaka-card-cuerpo [class*="angle-down"], .esmaka-view-card .esmaka-card-cuerpo [class*="chevron"], .esmaka-view-card .esmaka-card-cuerpo [data-es-video-desc-toggle] { display: none !important; } /* [B116 · TAREA 4] EL CHEVRON "v", LOCALIZADO Y DESTRUIDO. No era `.es-video-description-toggle` (por eso la sonda del bloque 115 no lo encontro): es `a.cboxT` -- `role="button" aria-label="Mostrar más" data-es-toggle="dropdown"` -- con un `` de 24x24 justo entre el titulo y el avatar (medido: y=325, pegado al titulo en y=252 y por encima del avatar en y=382). */ .esmaka-view-card .esmaka-card-cuerpo .cboxT, .esmaka-view-card .esmaka-card-cuerpo .cboxT c3-icon, .esmaka-view-card .esmaka-card-cuerpo a.cboxT svg { display: none !important; visibility: hidden !important; } /* [B116 · TAREA 5] PUNTOS HUERFANOS "·". Los puntos NO son texto: son `::before { content: "·" }` de EasySocial en cada span de la linea (medido con getComputedStyle(el,'::before')). Se quedan los de vistas y fecha (que son los que el diseno quiere) y se quitan los de la duracion y el interruptor, que eran los que producian la cadena "· · ·" antes del "...mas". La duracion se oculta porque no figura en la linea objetivo. */ .esmaka-view-card .esmaka-card-cuerpo .es-video-meta > .es-video-duration, .esmaka-view-card .esmaka-card-cuerpo .es-video-meta > #ambilight-toggle-container::before, .esmaka-view-card .esmaka-card-cuerpo .es-video-meta > .es-video-duration::before { content: none !important; } .esmaka-view-card .esmaka-card-cuerpo .es-video-meta > .es-video-duration { display: none !important; } /* [B119] El `...mas` lo monta el JS en las DOS vistas (tarjeta y carga directa), asi que su estilo tampoco puede estar acotado a la tarjeta. */ :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .esmaka-btn-ver-mas::before { content: ' · ' !important; color: #aaa; } .esmaka-btn-ver-mas { color: #fff; font-weight: 700; cursor: pointer; } /* [B115 · TAREA 3] EL POPOVER DE EMOCIONES TIENE QUE PODER FLOTAR. El boton de reacciones de EasySocial no se toca: mismo marcado, mismos eventos. Solo se garantiza que nada lo recorte y que su popover quede por encima de todo. Esta regla NO se acota a la tarjeta porque EasySocial puede colgar el popbox del `body`. */ .esmaka-view-card .esmaka-card-cuerpo .es-reaction-stats, .esmaka-view-card .esmaka-card-cuerpo .es-reaction-stats__icons, .esmaka-view-card .esmaka-card-cuerpo .es-reaction-icon-stat, .esmaka-view-card .esmaka-card-cuerpo .es-reaction-button, .esmaka-view-card .esmaka-card-cuerpo .es-actions-list, .esmaka-view-card .esmaka-card-cuerpo .es-actions-wrapper, .esmaka-view-card .esmaka-card-cuerpo .es-actions__item-action { overflow: visible !important; } .es-reaction-popover, .es-reaction-popover__wrapper, .popbox, .es-popbox, [data-popbox-content], .popbox-reaction-stats, .es-popbox-reaction-stats { z-index: 100050 !important; overflow: visible !important; position: absolute !important; } /* ---------------------------------------------------------------------- * 4bis. [B112] REPRODUCTOR PEGADO A LA CABECERA DE LA TARJETA * Objetivo: que el video siga visible y sonando mientras se baja a leer los * comentarios. * * TROPIEZOS MEDIDOS HASTA LLEGAR AQUI (los tres, con evidencia): * 1. `position: fixed` a secas NO se veia: el rect decia y=50 y 16:9 correctos, pero * tras desplazar la captura solo mostraba la ficha y el impacto lo recibia * `div.es-video-desc`. El experimento (ocultar la ficha y volver a medir) descarto * el orden de pintado y senalo a los RECORTES: `.video-container` y * `.es-video-content-body` tenian `overflow: hidden`, y un fijo recortado por su * propia rama no se pinta ni recibe el toque. * 2. `position: sticky` tampoco vale: un sticky esta LIMITADO a la caja de su padre * (aqui el cuerpo del video, ~202 px), asi que solo acompanaria al scroll esos * 202 px. (El header de la tarjeta si funciona con sticky porque su padre es la * tarjeta entera.) * 3. El contenedor se quedaba a 0 de alto: el plugin usa `height: 0` + * `padding-bottom` para el 16:9, asi que al anular el relleno hay que devolver * `height: auto` para que `aspect-ratio` haga el trabajo. * * DISENO FINAL: contenedor en el flujo como ESPACIADOR 16:9 (deja sitio para que el * titulo y los comentarios no se monten detras) + iframes FIJOS bajo la app bar * (50 px, medidos) y alineados con el mismo margen lateral de 8 px del texto, asi que * el hueco y el video coinciden al pixel. Los recortes interiores quedan anulados. * * EL Z-INDEX DEL HEADER NO SE REDECLARA: ya es 100 (medido) y supera al 25 de la rama * del video, asi que el chevron y el boton de inicio siguen siempre accesibles. * `#ambilight` CONSERVA su `z-index: -1`: es el RESPLANDOR (blur 80 px, escala 1.1, * medido) y su sitio es DETRAS del video; ponerlo a 20 lo traeria al frente. * -------------------------------------------------------------------- */ /* La cadena del video no puede RECORTAR ni ATRAPAR. Medido: con el fijo colocado en su sitio (y=50, 16:9 exactos) la captura seguia sin mostrarlo, y el impacto lo recibia `div.es-video-desc`: no era el orden de documento sino un CONTEXTO DE APILAMIENTO creado por un ancestro (`contain`/`isolation`/`opacity`/`filter`/`transform`...), que deja al reproductor por debajo del fondo del contenido. Se neutralizan todos los creadores posibles en la rama que lleva el video. */ /* [B113 · TAREA 2] CONTENCION TOTAL DEL SCROLL. El scroll de la tarjeta no puede encadenarse al documento de fondo (`#swup`): si se cuela, el Home se mueve a espaldas del usuario y su muro activa videos. Se marca en los TRES niveles (el viewport, la tarjeta y el cuerpo) y con `!important`, porque el scroll puede quedarse en cualquiera de ellos segun donde empiece el gesto. */ #esmaka-stack-viewport, .esmaka-view-card, .esmaka-card-cuerpo { overscroll-behavior: contain !important; overscroll-behavior-y: contain !important; } .esmaka-view-card .esmaka-card-cuerpo .es-video-content-body, .esmaka-view-card .esmaka-card-cuerpo .ambilightWrapper, .esmaka-view-card .esmaka-card-cuerpo .es-apps-entry-section, .esmaka-view-card .esmaka-card-cuerpo .es-apps-entry-section__content { overflow: visible !important; contain: none !important; isolation: auto !important; opacity: 1 !important; transform: none !important; filter: none !important; mix-blend-mode: normal !important; will-change: auto !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; } .esmaka-view-card .esmaka-card-cuerpo #videoContainer, .esmaka-view-card .esmaka-card-cuerpo [id^="videoContainer"], .esmaka-view-card .esmaka-card-cuerpo .video-container { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; padding: 0; box-sizing: border-box; overflow: visible; } /* Solo los iframes HIJOS DIRECTOS del reproductor: asi ningun otro iframe del sitio (anuncios, mapas, incrustados de terceros) se ve afectado. */ .esmaka-view-card .esmaka-card-cuerpo #videoContainer > iframe, .esmaka-view-card .esmaka-card-cuerpo [id^="videoContainer"] > iframe, .esmaka-view-card .esmaka-card-cuerpo .video-container > iframe { position: fixed !important; top: 50px; left: 8px; width: calc(100% - 16px) !important; max-width: none !important; height: calc((100vw - 16px) * 9 / 16) !important; max-height: none; z-index: 20; } /* [B112] La rama del video por delante de la ficha y de los comentarios: viven en contenedores hermanos con `z-index: 1`, y con el mismo z-index decide el orden de documento (la ficha va despues). `:has()` acota el efecto a las ramas con video. */ .esmaka-view-card .esmaka-card-cuerpo .es-container:has(#videoContainer), .esmaka-view-card .esmaka-card-cuerpo .es-content:has(#videoContainer), .esmaka-view-card .esmaka-card-cuerpo .es-apps-entry-section:has(#videoContainer), .esmaka-view-card .esmaka-card-cuerpo .es-apps-entry-section__content:has(#videoContainer) { position: relative; z-index: 25 !important; } .esmaka-view-card .esmaka-card-cuerpo #videoContainer > iframe#ambilight, .esmaka-view-card .esmaka-card-cuerpo [id^="videoContainer"] > iframe#ambilight, .esmaka-view-card .esmaka-card-cuerpo .video-container > iframe#ambilight { z-index: -1; } /* Movimiento reducido: la tarjeta aparece y desaparece sin animacion. */ @media (prefers-reduced-motion: reduce) { .esmaka-view-card { transition: none; } } } /* -------------------------------------------------------------------------- * 5. BARRERA DE ESCRITORIO [ISO-1] * Doble seguro: aunque el fichero llegara a cargarse en escritorio (no lo hace), * aqui queda inerte. No se toca nada mas de la vista de escritorio. * ------------------------------------------------------------------------ */ @media (min-width: 1024px) { #esmaka-stack-viewport { display: none !important; } #swup.is-esmaka-suspended { pointer-events: auto; } } /* ====================================================================== * [B119 · CORRECCION ESTRUCTURAL] EL BLOQUE `4quater` HABIA ESCAPADO DEL * MEDIA QUERY MOVIL. * Medido con `_b119/anida.js` (tokenizador de llaves que respeta comentarios * y cadenas): el `@media (max-width: 1023.98px)` de la linea 35 CIERRA en la * 768, asi que TODO lo que venia despues -- el `4quater` entero, lineas 788 * a 906 -- vivia a NIVEL RAIZ. En la practica no se notaba porque * `stack-navigation.css` solo se carga en movil (lo inyecta `index.php` bajo * el mismo media query), pero [ISO-1] exige que el trabajo movil viva DENTRO * del media query, y no que dependa de quien carga el fichero: si algun dia * se consolida en `template.css` ([CSS-1]), esas reglas se aplicarian en * escritorio. Se envuelve aqui. Es ADITIVO: solo se anade la condicion, el * orden de cascada dentro del bloque queda intacto. * ==================================================================== */ @media (max-width: 1023.98px) { /* ====================================================================== * 4quater. [B118] PARIDAD DE LA FICHA DE VIDEO: CARGA DIRECTA Y TARJETA * ---------------------------------------------------------------------- * La carga directa de `/es/videos/...` NO pasa por la tarjeta: el documento es la propia * pagina y el contenedor es `#es.is-mobile.view-videos` con la cabecera del sitio * (`#site-header`) en lugar de la App Bar de la pila. * CLAVE: el `#es` que se inyecta DENTRO de la tarjeta tambien lleva `is-mobile view-videos` * ([H508]), asi que un bloque anclado en `#es.is-mobile.view-videos` alcanza LAS DOS vistas * sin duplicar reglas. Lo que cambia entre ambas es solo la cabecera bajo la que se fija el * reproductor, y eso se resuelve con una excepcion para la tarjeta. * ==================================================================== */ /* 1. El chevron intrusivo `a.cboxT` (localizado en el bloque 116), fuera en las dos vistas */ #es.is-mobile.view-videos a.cboxT, #es.is-mobile.view-videos a.cboxT c3-icon, #es.is-mobile.view-videos a.cboxT svg, #es.is-mobile.view-videos [class*="angle-down"], #es.is-mobile.view-videos [class*="chevron"] { display: none !important; visibility: hidden !important; } /* 2. Titulo y linea de metadatos, iguales en las dos vistas */ #es.is-mobile.view-videos .es-video-title { font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #fff; margin: 0 0 8px 0 !important; } #es.is-mobile.view-videos .es-video-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; line-height: 1.35; } #es.is-mobile.view-videos .es-video-meta .o-avatar-v2, #es.is-mobile.view-videos .es-video-meta img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } #es.is-mobile.view-videos .es-video-meta a { font-weight: 600; font-size: 14px; } #es.is-mobile.view-videos #ambilight-toggle-container { margin-left: auto; color: #9aa0a6; font-size: 12px; } /* los puntos huerfanos de EasySocial (`::before`) y la duracion, como en la tarjeta */ #es.is-mobile.view-videos .es-video-meta > .es-video-duration::before, #es.is-mobile.view-videos .es-video-meta > #ambilight-toggle-container::before { content: none !important; } #es.is-mobile.view-videos .es-video-meta > .es-video-duration { display: none !important; } /* 3. DESCRIPCION: en la tarjeta la copia cruda se oculta (la sustituye el "...mas", que * monta el JS de la pila). En CARGA DIRECTA NO se oculta: alli el JS de la pila no * interviene, no habria "...mas" y el usuario se quedaria SIN acceso a la descripcion. * Se limpia la tipografia y se deja el texto completo, que es lo correcto en una pagina * de video. (Desviacion consciente y declarada respecto al literal de la directiva.) */ #es.is-mobile.view-videos .es-video-desc:not(.dropdown-menu) { font-size: 14px; line-height: 1.55; color: #e8e8e8; } .esmaka-view-card #es.is-mobile.view-videos .es-video-desc:not(.dropdown-menu) { display: none !important; } /* 4. GEOMETRIA DEL REPRODUCTOR FIJO, identica en las dos vistas y sin tapar la cabecera. * En la tarjeta cuelga de la App Bar (50 px); en carga directa, de `#site-header`, cuya * altura real publica el tema en `--es-header-h` (56 px por defecto). */ #es.is-mobile.view-videos .es-video-content-body, #es.is-mobile.view-videos .ambilightWrapper, #es.is-mobile.view-videos .es-apps-entry-section, #es.is-mobile.view-videos .es-apps-entry-section__content { overflow: visible !important; contain: none !important; isolation: auto !important; opacity: 1 !important; transform: none !important; filter: none !important; mix-blend-mode: normal !important; will-change: auto !important; clip-path: none !important; mask: none !important; } #es.is-mobile.view-videos .video-container { position: relative !important; height: auto !important; aspect-ratio: 16 / 9; padding: 0 !important; overflow: visible !important; } #es.is-mobile.view-videos .video-container > iframe { position: fixed !important; top: var(--es-header-h, 56px) !important; left: 8px !important; width: calc(100% - 16px) !important; height: calc((100vw - 16px) * 9 / 16) !important; max-width: none !important; z-index: 20; } /* excepcion: dentro de la tarjeta manda la App Bar de la pila (50 px) */ .esmaka-view-card #es.is-mobile.view-videos .video-container > iframe { top: 50px !important; } #es.is-mobile.view-videos #ambilight { z-index: -1 !important; } /* ====================================================================== * 4quinquies. [B119] PILDORAS, ANCLAJE REAL Y DESCRIPCION EN CARGA DIRECTA * ---------------------------------------------------------------------- * Todo lo de aqui esta MEDIDO antes de escribirse (`_b119/sonda-previa.js`, * `sonda-fijo.js`, `sonda-desborde.js`, `sonda-experimentos.js`, * `sonda-precision.js`, `sonda-causa-raiz.js`). * * HALLAZGO 1 -- DE DONDE SALIAN LOS 638 px DEL REPRODUCTOR (Tarea 2). * NO era un ancestro con `transform` ni con `contain`: se midio la cadena * COMPLETA de 14 ancestros del iframe y NINGUNO crea bloque contenedor * para `position: fixed` (`crea = []` en los 14). La causa real es un * DESBORDE HORIZONTAL del documento: * - la descripcion trae palabras que no rompen. Medidas una a una: * una tirada de guiones bajos de 83 caracteres = **646,3 px**, una URL * de **414 px** y otra de **300,8 px**; * - con `overflow-wrap: normal` eso desborda: medido `scrollWidth = 646` * en un contenedor de 359; * - Chrome movil ENSANCHA con ello el bloque contenedor inicial: medido * `window.innerWidth = 654` frente a `clientWidth = 375`; * - como el bloque contenedor de un `position: fixed` es ese ICB, * `width: calc(100% - 16px)` daba **638 px** (654 - 16) y no 359, y el * `#ambilight`, escalado a 1.1, llegaba a **701,8 px** con x = -23,9. * Arreglo en dos capas: (a) la CAUSA RAIZ -- dejar romper esas palabras; * (b) el SEGURO -- el ancho del fijo se mide con `100vw`, que SI es el * viewport (medido: `100vw` = 375 mientras que el `100%` del ICB = 654). * Verificado en vivo: (a) sola deja el iframe en 359, `innerWidth` en 375 * y el ambilight en 394,9; (b) sola deja el iframe en 359 pero la pagina * sigue panenable 279 px. Las dos juntas: 359 / 375 / 375 / 394,9. * * HALLAZGO 2 -- EL ANCLAJE (Tarea 2). * El reproductor SI estaba anclado: medido `y = 56` en scrollY 0, 100, 300, * 600, 1200 y 2500. Lo que se ve como "no anclado" es que la CABECERA DEL * SITIO SE OCULTA al bajar (`#site-header` recibe la clase * `is-header-hidden` y pasa a `top: -56px`, medido) mientras el * reproductor se quedaba en 56 px: quedaba una banda vacia de 56 px encima * del video. Se ata su `top` al estado REAL de la cabecera con `:has()`, * sin una sola linea de JS. El `:not(:has(#esmaka-stack-viewport))` lo * limita a la CARGA DIRECTA: con una tarjeta abierta manda su App Bar de * 50 px, y el estado de la cabecera de fondo es irrelevante. * * HALLAZGO 3 -- LOS SELECTORES DE LA DIRECTIVA, COMPROBADOS UNO A UNO. * `body.view-videos` EXISTE en la carga directa (medido: * "site com_easysocial wrapper-fluid view-videos layout-item no-task * itemid-1099 ..."). En la TARJETA no existe (alli el body lleva * `view-dashboard`): por eso el `:is()` de la directiva lleva las dos * ramas y es correcto tal cual. Recuento real de casamientos: los * selectores de pildora casan 3 y 6 elementos; los otros tres * (`.es-reaction-option__link`, `.es-reaction-option`, `.es-action-feedback`) * casan 0 en LAS DOS vistas -- se dejan escritos porque son inofensivos y * documentan el marcado esperado, pero NO son los que pintan las pildoras. * * NO SE ANADE (por [MIN-1]: ya existe y esta medido): la neutralizacion de * ancestros que pedia la Tarea 2 ya la hace el bloque `4quater` de arriba * -- `.es-video-content-body` mide `overflow: visible; contain: none; * isolation: auto` y `.wrapper-for-full-height` ya es `overflow: visible` * de fabrica --, y el espaciador 16:9 ya funciona (`aspect-ratio: 16 / 9` * medido con alto 201,938 px = (375 - 16) * 9 / 16). Anadirlos otra vez * solo engordaria la hoja. * ==================================================================== */ /* ---------- TAREA 1: PILDORAS UNIFICADAS (reglas de la directiva) -------- */ /* Píldoras unificadas estilo YouTube móvil para carga directa y tarjeta */ :is(.esmaka-view-card .esmaka-card-cuerpo, body.view-videos) .es-actions-list > li > a, :is(.esmaka-view-card .esmaka-card-cuerpo, body.view-videos) .es-actions-list > li a.es-reaction-option__link, :is(.esmaka-view-card .esmaka-card-cuerpo, body.view-videos) .es-actions-list > li > .es-reaction-option, :is(.esmaka-view-card .esmaka-card-cuerpo, body.view-videos) .es-actions-list > li > button, :is(.esmaka-view-card .esmaka-card-cuerpo, body.view-videos) .es-reaction-icon-stat__item, :is(.esmaka-view-card .esmaka-card-cuerpo, body.view-videos) .es-action-feedback { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 18px !important; padding: 6px 14px !important; font-size: 13px !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; color: #f1f1f1 !important; text-decoration: none !important; cursor: pointer !important; min-height: 32px !important; box-sizing: border-box !important; } /* ---------- TAREA 2 (a): LA CAUSA RAIZ DEL DESBORDE ---------------------- */ /* Las palabras que no rompen (la tirada de guiones bajos de 646,3 px y las URLs de 414 y 300,8 px) dejaban el documento en `scrollWidth` 654 y eso ensanchaba el bloque contenedor inicial. Al romperlas, el ICB vuelve a 375 y el ancho del reproductor se corrige SOLO (medido: 638 -> 359). */ #es.is-mobile.view-videos .es-video-desc:not(.dropdown-menu), #es.is-mobile.view-videos .es-video-desc.dropdown-menu { overflow-wrap: anywhere !important; word-break: break-word !important; } /* ---------- TAREA 2 (b): EL ANCHO DEL FIJO NO DEPENDE DEL ICB ----------- */ /* Seguro independiente de la causa raiz: sobre un `position: fixed`, `100%` se resuelve contra el bloque contenedor inicial (que puede estar ensanchado por un desborde), mientras que `100vw` es el viewport de verdad. Medido en esta pagina: `100vw` = 375, `100%` = 654. */ #es.is-mobile.view-videos .video-container > iframe { width: calc(100vw - 16px) !important; } /* ---------- TAREA 2 (c): ANCLAJE REAL BAJO LA CABECERA ------------------ */ /* La cabecera del sitio se oculta al bajar (`is-header-hidden`), y entonces su borde inferior esta en 0: el reproductor sube con ella. Con una tarjeta abierta NO se aplica (manda la App Bar de 50 px de la pila). */ body:has(#site-header.is-header-hidden):not(:has(#esmaka-stack-viewport)) #es.is-mobile.view-videos .video-container > iframe { top: 0 !important; } /* ---------- TAREA 2 (d): LA SEGUNDA BARRA DE LA HOJA (anadido declarado) --- */ /* NO lo pedia la directiva: lo ha destapado la captura de evidencia de este bloque y esta MEDIDO. En la hoja se veian DOS tiradores apilados: - `div.esmaka-hoja__tirador` .... 40 x 4 px, `rgba(255,255,255,0.3)` (el nuestro) - `div.es-video-desc.dropdown-menu::before` ... 44 x 5 px, `rgba(255,255,255,0.3)` con `content: ""` -- un pseudo-elemento del PROPIO EasySocial (la regla `#es .dropdown-menu::before { display: block !important }` de `appshell.css` movil lo hace visible), que hasta ahora quedaba oculto detras del nuestro porque el panel solo se abria como menu flotante. Se oculta SOLO en la hoja abierta y SOLO en movil: el `::before` de un `.dropdown-menu` en escritorio es la flecha del menu y NO se toca. */ :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .es-video-desc.dropdown-menu.is-esmaka-abierta::before, :is(.esmaka-view-card .esmaka-card-cuerpo, #es.is-mobile.view-videos) .es-video-desc.dropdown-menu.is-esmaka-abierta::after { content: none !important; display: none !important; } /* ====================================================================== * 4sexies. [B122 · TAREA 1] NEUTRALIZACION UNIVERSAL DE CABECERAS STICKY * ---------------------------------------------------------------------- * POR QUE HACE FALTA (medido): `template.css` L25150-25156 tiene * `#es .si-profile-header { position: sticky; top: -20px; left: 0; * right: 0; z-index: 2 }` * y esa regla NO esta dentro de ningun media query: es GLOBAL. Hasta ahora * en movil no se notaba porque la clase `.si-profile-header` solo existia en * escritorio (el envoltorio estaba bajo `!$this->isMobile()`, ver [H528]); * al unificar los envoltorios (Tareas 2 y 3 de este bloque) la cabecera * EMPIEZA a existir en movil y, sin esta regla, se quedaria pegada arriba * al hacer scroll. * `!important` es a la vez necesario y suficiente: la regla que hay que * vencer selecciona con un ID (`#es .si-profile-header`, especificidad * 1-1-0 frente al 0-3-0 de aqui) pero NO lleva `!important`, y una * declaracion `!important` gana a cualquier declaracion normal. * [ISO-1]: vive DENTRO del media query movil; en escritorio no se aplica. * NO existia ninguna regla equivalente: `stack-navigation.css` no mencionaba * `si-profile-header` en ninguna linea ([MIN-1], comprobado antes de anadir). * ==================================================================== */ :is(.esmaka-view-card .esmaka-card-cuerpo, body) :is(.si-profile-header, .es-profile-header) { position: static !important; top: auto !important; max-height: none !important; } /* ====================================================================== * CIERRE del media query abierto en la correccion estructural de arriba * (envuelve el `4quater` [B118] y el `4quinquies` [B119]). * ==================================================================== */ } /* ========================================================================== * [ESMAKA BLOQUE 126 - TAREA 2] FILTROS MOVILES: STICKY DINAMICO Y FONDO OPACO BI-TEMA * -------------------------------------------------------------------------- * QUE ARREGLA (todo MEDIDO en la Fase 1 de este mismo bloque): * 1. `#es .es-mobile-filter` salia con `position: sticky; top: 0; z-index: 2` y * SIN NINGUNA declaracion de fondo -- la cadena de ancestros es transparente * hasta -- asi que el contenido se veia a traves al hacer scroll. * 2. `top: 0` es correcto SOLO mientras `#site-header` esta oculto. Al subir, la * cabecera reaparece con `z-index: 99998` y el filtro (z-index 2) quedaba * DEBAJO: medido a scrollY=300. Con `top: var(--es-header-h)` el filtro baja * los 56 px de la cabecera cuando esta visible. * 3. El fondo usa `--content-bg`, que el bi-tema YA redefine (#181818 en `:root` * L44691 y #f0f0f0 en `:root body.lightmode` L45295 de `template.css`): no hay * que inventar variables ni duplicar la conmutacion de tema. * `--es-header-h` lo publica `es-header-controller.js` L274 con la altura REAL. * `:has()` se usa ya 92 veces en `template.css` (documentado en su L52702). * Se anade AL FINAL ([CSS-1]) en su propio @media: no altera nada anterior. * ========================================================================== */ @media (max-width: 1023.98px) { #es .es-mobile-filter { position: sticky !important; top: 0; z-index: 900 !important; background-color: var(--content-bg, #181818); border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: top 0.2s ease; } /* Cabecera VISIBLE (no oculta) -> el filtro baja la altura real de la cabecera */ body:not(:has(#site-header.is-header-hidden)) #es .es-mobile-filter { top: var(--es-header-h, 56px) !important; } /* Bi-tema CLARO */ body.lightmode #es .es-mobile-filter { background-color: var(--content-bg, #f0f0f0); border-top-color: rgba(0, 0, 0, 0.1); border-bottom-color: rgba(0, 0, 0, 0.1); } /* Bi-tema OSCURO */ body.darkmode #es .es-mobile-filter { background-color: var(--content-bg, #181818); border-top-color: rgba(255, 255, 255, 0.1); border-bottom-color: rgba(255, 255, 255, 0.1); } } /* ========================================================================== * [ESMAKA BLOQUE 127 - TAREAS 2 y 3] FICHA DE VIDEO EN TABLET: PARIDAD YOUTUBE * -------------------------------------------------------------------------- * AMBITO ESTRICTO: solo la ficha individual de video (`#es.view-videos` con * `[data-video-item]`) y solo en TABLET (600 - 1023.98 px). El escritorio * (>= 1024 px) NO entra en este @media: [ISO-1] queda intacto por construccion, * no por promesa. * * TAREA 2 - REJILLA "DE DOS EN DOS". Medido antes de tocar nada: * `#js-others-list .es-cards` salia con `display: grid` y * `grid-template-columns: 784px` -> UNA sola columna de 784 px y tarjetas de * 784 x 524 px (habia 91 tarjetas). Aqui pasa a DOS columnas. * Se usa `minmax(0, 1fr)` y NO `1fr` a secas: con `1fr` el minimo implicito es * `auto`, y una portada o un titulo largo ensanchan la pista hasta desbordar * el viewport. Con `minmax(0, ...)` la pista puede encogerse. * * NO SE TOCA EL DROPDOWN DE ORDENACION de "Otros videos" (`.dropdown_`, * `.dropdown-menu`, `[data-order]`, `[data-popdown]`): es funcionalidad del * usuario (category_recent / author / latest / popular / likes / commented / * random) y se conserva tal cual. Este bloque solo cambia la rejilla que lo * CONTIENE; ninguna regla de aqui apunta al dropdown. * * TAREA 3 - COMENTARIOS COMO TARJETA COMPACTA. Al suprimir la portada (Tarea 1, * en `videos/item/default.php` L381) la caja queda de forma natural justo debajo * de las pildoras de accion (verificado en el DOM: `.es-actions__item-comment` * pasa a seguir a las pildoras). Aqui se le da el aspecto de YouTube. * CUIDADO MEDIDO: el textarea se pinta con `position: absolute` y lleva * encima un `[data-mentions-overlay]` con ALTURA EN LINEA (34 px) que dibuja * el marcador de posicion. Por eso NO se toca la altura ni el padding * vertical: desincronizaria el overlay. La forma de pildora se consigue con * radio de borde + fondo, y el texto se separa del borde aplicando EL MISMO * padding horizontal a los DOS (textarea y overlay), que hoy comparten * geometria exacta (medido: ambos en x=82, y=836, 691x34). * Se anade AL FINAL ([CSS-1]) y en su propio @media: no altera nada anterior. * ========================================================================== */ @media (min-width: 600px) and (max-width: 1023.98px) { /* ---------- TAREA 2: "otros videos" de dos en dos ---------- */ #es.view-videos [data-video-item] #js-others-list .es-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; align-items: start; } #es.view-videos [data-video-item] #js-others-list .es-cards > * { width: auto !important; max-width: 100% !important; min-width: 0 !important; } /* nada dentro de la rejilla puede desbordar a lo ancho */ #es.view-videos [data-video-item] #js-others-list img, #es.view-videos [data-video-item] #js-others-list .embed-responsive, #es.view-videos [data-video-item] #js-others-list .es-card__cover, #es.view-videos [data-video-item] #js-others-list .es-card__bd, #es.view-videos [data-video-item] #js-others-list .es-card__title { max-width: 100% !important; overflow-wrap: anywhere; } /* ---------- TAREA 3: comentarios, tarjeta compacta ---------- */ #es.view-videos [data-video-item] > .es-content .es-comments-wrapper { background-color: var(--content-bg, #181818) !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 12px !important; padding: 12px 14px 10px !important; margin-top: 12px !important; } /* el envoltorio interno no duplica tarjeta */ #es.view-videos [data-video-item] > .es-content .es-comments-wrapper .es-comments-wrapper { background-color: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } /* "Comentarios: N" -> a la izquierda y con peso, como en YouTube */ #es.view-videos [data-video-item] .es-comments-control__load { display: flex !important; justify-content: flex-start !important; } #es.view-videos [data-video-item] .es-comments-control__stats { font-size: 15px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: .2px; margin: 0 0 8px 0 !important; } #es.view-videos [data-video-item] .es-comments-wrap { margin-top: 0 !important; } /* la caja de entrada, en forma de pildora (mismo radio y MISMO padding horizontal en el textarea y en su overlay, para no desalinearlos) */ #es.view-videos [data-video-item] .es-comments-form .o-form-control, #es.view-videos [data-video-item] .es-comments-form [data-mentions-overlay] { border-radius: 999px !important; padding-left: 16px !important; padding-right: 16px !important; } #es.view-videos [data-video-item] .es-comments-form .o-form-control { background-color: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .10) !important; } /* ---------- bi-tema CLARO ---------- */ body.lightmode #es.view-videos [data-video-item] > .es-content .es-comments-wrapper { border-color: rgba(0, 0, 0, .10) !important; } body.lightmode #es.view-videos [data-video-item] .es-comments-form .o-form-control { background-color: rgba(0, 0, 0, .05) !important; border-color: rgba(0, 0, 0, .10) !important; } } /* ========================================================================== * [ESMAKA BLOQUE 127 FASE 2] JERARQUIA SUPERIOR + COMENTARIOS TIPO YOUTUBE * -------------------------------------------------------------------------- * AMBITO ESTRICTO: `#es.view-videos` con `[data-video-item]` y SOLO tablet * (600 - 1023.98 px). El escritorio NO entra en este @media: [ISO-1] intacto. * * TODO lo de aqui sale de MEDIR la pantalla antes de escribir, porque la fase 1 * valido invariantes estructurales y NO midio lo que el usuario ve. Medido a * 800x1280 (los mismos valores en los dos temas, salvo donde se dice): * h1.es-video-title ....... 21 px de alto, FUENTE 16px/600, color #ffffff * => invisible en claro (body rgb(240,242,245)) * .es-video-meta .......... 40 px, flex; claro rgb(29,33,41) / oscuro rgb(133,133,133) * .es-actions__item-action 40 px: fila de pildoras * .es-video-desc (inline) .. display:none por el override propio * `esmaka-desc-oculta`; el tema ya ofrece * `.esmaka-btn-ver-mas` en la fila meta * .es-actions__item-comment 225 px (la caja de comentarios) * .es-comments-wrapper ..... 189 px <-- lo que hay que bajar a ~74 * .es-comments-control .... 44 px (stats 20) * .es-comments-form ....... 121 px = `display:grid`, hijos: * .es-form ............ 52 px (textarea 34 dentro) * .es-comments-form__footer 38 px <-- "Enviar"; SE OCULTA EN REPOSO * .es-form-attach ......... 32 px <-- GIF/camara/smiley; SE OCULTA EN REPOSO * * AVISO MEDIDO: el textarea va `position:absolute` con un [data-mentions-overlay] * ENCIMA cuya altura viene EN LINEA (34 px). Todo cambio de altura o de padding * HORIZONTAL se aplica IDENTICO a los dos o se desalinean (ya paso en la fase 1: * un `padding-left` solo en el padre produjo un desajuste de 4 px). * * NO SE TOCA: el dropdown de ordenacion de "Otros videos" ([data-order], * [data-popdown]) ni la rejilla de 2 columnas ya validada. * ========================================================================== */ @media (min-width: 600px) and (max-width: 1023.98px) { /* =================== 1. TITULO: visible y con rango de titular =================== */ #es.view-videos [data-video-item] .es-video-context h1.es-video-title, #es.view-videos [data-video-item] h1.es-video-title { color: #f1f1f1 !important; font-size: 20px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: -.2px; margin: 0 0 6px !important; } body.lightmode #es.view-videos [data-video-item] h1.es-video-title { color: #111111 !important; } /* =================== 2. META: contraste + [Seguir] a la derecha =================== */ #es.view-videos [data-video-item] .es-video-meta { color: #aaaaaa !important; align-items: center; gap: 6px; /* la fila envuelve: al empujar [Seguir] a la derecha, el enlace "Ver mas" del tema se quedaba aplastado a una raya de 2 px */ flex-wrap: wrap !important; row-gap: 4px !important; } /* el "Ver mas" del tema tiene que conservar su sitio y ser legible */ #es.view-videos [data-video-item] .es-video-meta .esmaka-btn-ver-mas { flex: 0 0 auto !important; white-space: nowrap !important; order: 98; } body.lightmode #es.view-videos [data-video-item] .es-video-meta { color: #606060 !important; } /* el nombre del autor, con contraste de texto principal */ #es.view-videos [data-video-item] .es-video-meta a { color: #f1f1f1 !important; font-weight: 600; } body.lightmode #es.view-videos [data-video-item] .es-video-meta a { color: #111111 !important; } /* el boton [Seguir] empuja a la derecha de la fila (helper real del tema) */ #es.view-videos [data-video-item] .es-video-meta .esmaka-follow-cell { margin-left: auto !important; order: 99; } #es.view-videos [data-video-item] .es-video-meta .esmaka-follow-cell .btn { border-radius: 999px !important; padding: 5px 16px !important; font-weight: 600 !important; } /* =================== 3. DESCRIPCION: PURGADA EN LA FASE 4 =================== * Aqui vivian el recorte a 2 lineas de la descripcion inline y su color. En la * fase 4 esa descripcion YA NO SE EMITE en movil/tablet (la unica descripcion es * la hoja oficial `data-esmaka-hoja="1"`), asi que estas reglas eran residuo * muerto: se han quitado en lugar de dejarlas apuntando a algo que no existe. */ /* =================== 4. PILDORAS: contraste bi-tema + scroll compacto =================== * Medido: texto rgb(241,241,241) + fondo rgba(255,255,255,.08) EN LOS DOS TEMAS * => en claro quedaban invisibles sobre rgb(240,242,245). */ #es.view-videos [data-video-item] .es-actions__item-action { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-bottom: 2px !important; scrollbar-width: none; } #es.view-videos [data-video-item] .es-actions__item-action::-webkit-scrollbar { display: none; } #es.view-videos [data-video-item] .es-actions__item-action .btn, #es.view-videos [data-video-item] .es-actions__item-action a { flex: 0 0 auto !important; color: #f1f1f1 !important; background-color: rgba(255, 255, 255, .10) !important; border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 999px !important; } body.lightmode #es.view-videos [data-video-item] .es-actions__item-action .btn, body.lightmode #es.view-videos [data-video-item] .es-actions__item-action a { color: #111111 !important; background-color: rgba(0, 0, 0, .05) !important; border-color: rgba(0, 0, 0, .18) !important; } /* =================== 5. COMENTARIOS: tarjeta teaser ~79 px =================== * Medido el 21-SEP: 110 px -> 79 px quitando los dos rellenos que traia el tema * (`.es-comments-control__load` 8+8 y `.es-form` margin-bottom 10) mas el ajuste * del relleno de la tarjeta y del margen del titulo. */ #es.view-videos [data-video-item] > .es-content .es-comments-wrapper { background-color: var(--content-bg, #181818) !important; border: 1px solid rgba(255, 255, 255, .10) !important; border-radius: 12px !important; padding: 8px 14px !important; margin-top: 12px !important; } body.lightmode #es.view-videos [data-video-item] > .es-content .es-comments-wrapper { border-color: rgba(0, 0, 0, .12) !important; } /* el envoltorio interno no duplica la tarjeta */ #es.view-videos [data-video-item] > .es-content .es-comments-wrapper .es-comments-wrapper { background-color: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } /* cabecera sutil: "Comentarios N" */ #es.view-videos [data-video-item] .es-comments-control { height: auto !important; padding: 0 !important; } #es.view-videos [data-video-item] .es-comments-control__load { display: flex !important; justify-content: flex-start !important; /* MEDIDO: este bloque trae `padding: 8px/8px` = 16 px de alto regalado */ padding: 0 !important; margin: 0 !important; } #es.view-videos [data-video-item] .es-comments-control__stats { font-size: 14px !important; line-height: 1.25 !important; font-weight: 700 !important; color: #f1f1f1 !important; margin: 0 0 5px 0 !important; } body.lightmode #es.view-videos [data-video-item] .es-comments-control__stats { color: #111111 !important; } #es.view-videos [data-video-item] .es-comments-wrap { margin-top: 0 !important; } /* la fila del input: el formulario es `display:grid`; se quita su relleno y su borde superior para que mande la tarjeta. OJO: NO se toca su `grid-template-columns` — forzarlo a `1fr` dejo el textarea en 34 px de ancho (medido: el "circulo" que se veia era el propio input aplastado). */ #es.view-videos [data-video-item] .es-comments-form { border-top: 0 !important; padding: 0 !important; gap: 0 !important; } #es.view-videos [data-video-item] .es-comments-form .es-form { padding: 0 !important; /* MEDIDO: `.es-form` trae `margin-bottom: 10px` = 10 px mas de tarjeta */ margin-bottom: 0 !important; min-height: 36px; } /* la pildora: MISMO radio, MISMO padding horizontal y MISMA anchura en el textarea y en el overlay (el textarea va `position:absolute` y su anchura se resolvia por ajuste al contenido: hay que darsela EXPLICITA), y MISMA altura en los dos (el overlay lleva la altura en linea: 34 px) */ #es.view-videos [data-video-item] .es-comments-form .o-form-control, #es.view-videos [data-video-item] .es-comments-form [data-mentions-overlay] { width: 100% !important; height: 36px !important; border-radius: 999px !important; padding-left: 16px !important; padding-right: 16px !important; } #es.view-videos [data-video-item] .es-comments-form .mentions { height: 36px !important; } #es.view-videos [data-video-item] .es-comments-form .o-form-control { background-color: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .14) !important; color: #f1f1f1 !important; } body.lightmode #es.view-videos [data-video-item] .es-comments-form .o-form-control { background-color: rgba(0, 0, 0, .04) !important; border-color: rgba(0, 0, 0, .14) !important; color: #111111 !important; } /* EN REPOSO no se ven los botones del formulario: ni "Enviar" (footer) ni GIF/camara/smiley (attach). Aparecen al ENFOCAR el campo (:focus-within). */ #es.view-videos [data-video-item] .es-comments-form__footer, #es.view-videos [data-video-item] .es-comments-form .es-form-attach { display: none !important; } #es.view-videos [data-video-item] .es-comments-form:focus-within .es-comments-form__footer { display: flex !important; justify-content: flex-end !important; margin-top: 8px !important; } #es.view-videos [data-video-item] .es-comments-form:focus-within .es-form-attach { display: inline-flex !important; } } /* ========================================================================== * [ESMAKA BLOQUE 127 FASE 3] PULIDO FINO: AMBILIGHT, JERARQUIA Y DESPLIEGUE * -------------------------------------------------------------------------- * AMBITO: `#es.view-videos` con `[data-video-item]`, SOLO tablet * (600 - 1023.98 px). Escritorio >= 1024 px NO entra: [ISO-1] intacto. * * TODO medido antes de escribir (800x1280, 21-SEP-2026): * .es-video-meta 40 px FLEX con 6 hijos; el separador "·" que el tema dibuja en * CADA span es un PSEUDO-ELEMENTO: medido en `span.esmaka-follow-cell` * -> `::before content="·" display=block 4x12`. ESA era la "raya fantasma" * (mi enumeracion de elementos del DOM no podia verla: no es un elemento). * #ambilight-toggle-container: 139x18; `label.ambilight-switch` 30x18; * `span.slider.round` 25x18 fondo rgb(204,204,204) radio 34px. * pildoras: texto "Me gusta" con `text-transform: uppercase`, 13px, radio 999px. * `.es-entry-actionbar .btn`: el tema fuerza fondo rgb(0,150,245) (azul vivo). * `.es-comments-wrapper` NO tiene ningun avatar (medido: NINGUNO) y el grid de * `.es-comments-form` es `45px 709px`: la columna del avatar YA existe vacia. * ========================================================================== */ @media (min-width: 600px) and (max-width: 1023.98px) { /* ============ 1a. ERRADICAR LA RAYA FANTASMA ============ * No era ni un borde ni un margen: era el separador `::before` ("·", 4x12 px) * que el tema pone a TODOS los spans de la fila meta. Al anadir la celda * [Seguir] heredo ese separador y quedaba como una raya suelta junto al boton. */ #es.view-videos [data-video-item] .es-video-meta > .esmaka-follow-cell::before, #es.view-videos [data-video-item] .es-video-meta > .esmaka-follow-cell::after { content: none !important; display: none !important; } /* ============ 1b. INTERRUPTOR AMBILIGHT ESTILO iOS/MATERIAL ============ */ #es.view-videos [data-video-item] .es-video-meta > #ambilight-toggle-container { margin-left: 0 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; color: #aaaaaa !important; } #es.view-videos [data-video-item] #ambilight-toggle-container .ambilight-switch { width: 36px !important; height: 20px !important; flex: 0 0 36px !important; } #es.view-videos [data-video-item] #ambilight-toggle-container .slider, #es.view-videos [data-video-item] #ambilight-toggle-container .slider.round { width: 36px !important; height: 20px !important; border-radius: 999px !important; background-color: rgba(255, 255, 255, .22) !important; transition: background-color .2s ease !important; } body.lightmode #es.view-videos [data-video-item] #ambilight-toggle-container .slider.round { background-color: rgba(0, 0, 0, .20) !important; } /* la perilla: 16 px, blanca, centrada con 2 px de margen */ #es.view-videos [data-video-item] #ambilight-toggle-container .slider.round::before { width: 16px !important; height: 16px !important; left: 2px !important; top: 2px !important; background-color: #ffffff !important; border-radius: 50% !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .45) !important; transition: transform .2s ease !important; } #es.view-videos [data-video-item] #ambilight-toggle-container input:checked+.slider.round { background-color: #0096f5 !important; } #es.view-videos [data-video-item] #ambilight-toggle-container input:checked+.slider.round::before { transform: translateX(16px) !important; } #es.view-videos [data-video-item] #ambilight-toggle-container .ambilight-label { font-size: 12px !important; font-weight: 500 !important; letter-spacing: .2px; } /* ============ 2. JERARQUIA YOUTUBE EN DOS FILAS ============ * Se hace con GRID sobre la MISMA fila del DOM (sin mover ni duplicar marcado, * que afectaria al escritorio): * fila 1 -> [Vistas] · [Fecha] .................. [ ...mas ] * fila 2 -> [Avatar + Nombre] ...... [Ambilight] [ [Seguir] ] */ #es.view-videos [data-video-item] .es-video-meta { display: grid !important; grid-template-columns: auto auto 1fr auto !important; align-items: center !important; column-gap: 8px !important; row-gap: 8px !important; } /* fila 1: los spans sin clase son "N vistas" y la fecha */ #es.view-videos [data-video-item] .es-video-meta > span:not([class]):not(:first-child) { grid-row: 1 !important; margin-left: 12px !important; } #es.view-videos [data-video-item] .es-video-meta > .esmaka-btn-ver-mas { grid-row: 1 !important; grid-column: 4 !important; justify-self: end !important; flex: 0 0 auto !important; white-space: nowrap !important; } /* fila 2: creador | Ambilight | [Seguir] */ #es.view-videos [data-video-item] .es-video-meta > span:first-child { grid-row: 2 !important; grid-column: 1 / span 2 !important; } #es.view-videos [data-video-item] .es-video-meta > #ambilight-toggle-container { grid-row: 2 !important; grid-column: 3 !important; justify-self: end !important; } #es.view-videos [data-video-item] .es-video-meta > .esmaka-follow-cell { grid-row: 2 !important; grid-column: 4 !important; justify-self: end !important; margin-left: 0 !important; } #es.view-videos [data-video-item] .es-video-meta > .es-video-duration { display: none !important; } /* ============ 3. PILDORAS DE ACCION ESTILO YOUTUBE ============ * El texto ya es "Me gusta" en la cadena de idioma: lo que lo gritaba era * `text-transform: uppercase` del tema. Fondo translucido y radio 9999px, * sin borde tosco. */ #es.view-videos [data-video-item] .es-actions__item-action .btn, #es.view-videos [data-video-item] .es-actions__item-action a { text-transform: none !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: .1px; padding: 8px 16px !important; border: 0 !important; border-radius: 9999px !important; color: #f1f1f1 !important; background-color: rgba(255, 255, 255, .10) !important; } #es.view-videos [data-video-item] .es-actions__item-action .btn:hover, #es.view-videos [data-video-item] .es-actions__item-action a:hover { background-color: rgba(255, 255, 255, .18) !important; } body.lightmode #es.view-videos [data-video-item] .es-actions__item-action .btn, body.lightmode #es.view-videos [data-video-item] .es-actions__item-action a { color: #111111 !important; background-color: rgba(0, 0, 0, .06) !important; } body.lightmode #es.view-videos [data-video-item] .es-actions__item-action .btn:hover, body.lightmode #es.view-videos [data-video-item] .es-actions__item-action a:hover { background-color: rgba(0, 0, 0, .11) !important; } /* ============ 4. BOTONES DE NAVEGACION DISCRETOS ============ * El tema fuerza fondo rgb(0,150,245) en TODO `.btn` de la barra, incluido el * "..." : dejaban de ser secundarios y competian con el video. */ #es.view-videos [data-video-item] .es-entry-actionbar .btn { background-color: transparent !important; border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 9999px !important; color: #f1f1f1 !important; font-weight: 500 !important; box-shadow: none !important; } body.lightmode #es.view-videos [data-video-item] .es-entry-actionbar .btn { border-color: rgba(0, 0, 0, .18) !important; color: #111111 !important; } #es.view-videos [data-video-item] .es-entry-actionbar .btn:hover { background-color: rgba(255, 255, 255, .10) !important; } body.lightmode #es.view-videos [data-video-item] .es-entry-actionbar .btn:hover { background-color: rgba(0, 0, 0, .06) !important; } /* ============ 5. AVATAR DEL USUARIO EN LA TARJETA DE COMENTARIOS ============ * El hueco YA existe: el grid de `.es-comments-form` es `45px 709px` y la * columna de 45 px esta vacia. El avatar se coloca de forma absoluta sobre esa * columna, en la MISMA fila que el campo (que mide 36 px y esta a 8 px del * borde inferior de la tarjeta). */ #es.view-videos [data-video-item] > .es-content .es-comments-wrapper { position: relative !important; } #es.view-videos [data-video-item] .esmaka-comment-avatar { position: absolute !important; left: 14px !important; /* Anclado a la FILA DEL CAMPO, no al fondo: con `bottom` el avatar se caia al pie en cuanto la tarjeta crecia (visible en la captura desplegada). La fila del campo esta a 8 (padding) + 18 (titulo) + 5 (margen) = 31 px del borde superior de la tarjeta, y el campo mide 36: (36-32)/2 = 2. */ top: 33px !important; bottom: auto !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; overflow: hidden !important; z-index: 2; } #es.view-videos [data-video-item] .esmaka-comment-avatar .o-avatar-v2, #es.view-videos [data-video-item] .esmaka-comment-avatar .o-avatar-v2__content, #es.view-videos [data-video-item] .esmaka-comment-avatar img { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 50% !important; display: block !important; } /* ============ 6. DESPLIEGUE DE COMENTARIOS (.is-expanded) ============ * El estado lo alterna el JS de la plantilla (TAREA 4). Plegado la tarjeta es * el teaser; desplegado aparece la lista y el formulario completo. */ #es.view-videos [data-video-item] .es-comments-wrapper .es-comments { display: none !important; } #es.view-videos [data-video-item] .es-comments-wrapper.is-expanded .es-comments { display: block !important; margin: 0 0 10px !important; } #es.view-videos [data-video-item] .es-comments-wrapper.is-expanded .es-comments-form__footer { display: flex !important; justify-content: flex-end !important; margin-top: 8px !important; } #es.view-videos [data-video-item] .es-comments-wrapper.is-expanded .es-form-attach { display: inline-flex !important; } /* el chevron del encabezado gira al abrir */ #es.view-videos [data-video-item] .cbox c3-icon svg { transition: transform .2s ease; } #es.view-videos [data-video-item] .cbox.is-open c3-icon svg { transform: rotate(180deg); } } @media (min-width: 600px) and (max-width: 1023.98px) { /* ============ 8. TAREA 4: AVISO DE ACCESO PARA EL INVITADO ============ * EasySocial no emite el campo de comentario sin sesion, asi que la tarjeta se * quedaba con el avatar flotando en un hueco vacio (medido: `input=false` y visto * en la captura del invitado). El aviso ocupa la MISMA fila de 36 px que el campo, * de modo que el avatar (anclado a `top: 33px`) sigue alineado con el. */ #es.view-videos [data-video-item] .esmaka-comentar-invitado { display: flex !important; align-items: center !important; height: 36px !important; margin-left: 47px !important; padding: 0 16px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; color: #f1f1f1 !important; background-color: rgba(255, 255, 255, .10) !important; } body.lightmode #es.view-videos [data-video-item] .esmaka-comentar-invitado { color: #111111 !important; background-color: rgba(0, 0, 0, .05) !important; } /* el avatar de invitado es un icono claro: se le da un fondo suave para que se vea como un avatar y no como un punto suelto */ #es.view-videos [data-video-item] .esmaka-comment-avatar .o-avatar-v2, #es.view-videos [data-video-item] .esmaka-comment-avatar img { background-color: rgba(255, 255, 255, .12) !important; } body.lightmode #es.view-videos [data-video-item] .esmaka-comment-avatar .o-avatar-v2, body.lightmode #es.view-videos [data-video-item] .esmaka-comment-avatar img { background-color: rgba(0, 0, 0, .06) !important; } } @media screen and (orientation: landscape) and (min-height: 320px) { /* ============ 9. SCROLL INDEPENDIENTE EN HORIZONTAL (FASE 5 - T4) ============ * OJO AL RANGO: la directiva pedia `max-width: 1023.98px` PERO su propia * verificacion es a 1280x800 -> 1280 > 1023.98 y el bloque NUNCA casaba (medido: * display block / overflow visible en las dos columnas). Se cambia el tope de * ANCHO por un minimo de ALTO (480 px), que es el discriminante correcto: quien * manda es la clase de dispositivo de EasySocial (`#es.is-mobile`), y el * escritorio lleva `#es.is-desktop`, asi que queda fuera POR SELECTOR y no por * ancho ([ISO-1] intacto). El `min-height` deja fuera el movil en horizontal * (360-430 px de alto), que no es el objetivo. * ARBOL REAL MEDIDO (1280x800): los hijos de `.es-container.es-videos` son DOS: * [0] `div.es-content` = columna IZQUIERDA (reproductor, titulo, meta, * acciones y comentarios; medido 1200x1188). * [1] `div.es-apps-entry-section` = columna DERECHA: ENVUELVE * `#esmaka-other-videos` (1200x21822), que a su * vez contiene `#js-others-list` (1200x21718). * DESVIACION DECLARADA respecto al CSS de la directiva: se usan los contenedores * REALES. `.es-apps-entry-section` NO es el reproductor (lo envuelve) y * `#js-others-list` va DENTRO del bloque de otros videos: usarlos como columnas * habria ANIDADO dos scrolls. `.es-sidebar` no existe en esta vista. * Guardado por `#es.is-mobile` + ancho + `orientation`: el escritorio (>=1024 px) * no lo ve ([ISO-1]). */ #es.is-mobile .es-container.es-videos { display: flex !important; flex-direction: row !important; height: calc(100dvh - var(--es-header-h, 56px)) !important; max-height: calc(100dvh - var(--es-header-h, 56px)) !important; overflow: hidden !important; position: relative !important; gap: 16px !important; } /* columna izquierda: reproductor + titulo + descripcion + comentarios */ #es.is-mobile .es-container.es-videos > .es-content { flex: 1 1 58% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; max-height: 100% !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } /* columna derecha: otros videos / recomendaciones */ /* OJO: el `>` es IMPRESCINDIBLE. En esta vista hay DOS elementos con esa clase: * el REPRODUCTOR (`.es-content > .es-apps-entry-section`, medido 470 px en vertical) y el * ENVOLTORIO de otros videos (hijo directo del contenedor). Sin `>`, el reproductor se * convertiria en columna derecha con scroll propio. */ #es.is-mobile .es-container.es-videos > .es-apps-entry-section { flex: 1 1 42% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; max-height: 100% !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } /* el bloque de otros videos y su rejilla NO vuelven a scrollear: el scroll es el de la columna. Sin esto se anidarian dos barras y el gesto se perderia. */ #es.is-mobile .es-container.es-videos #esmaka-other-videos, #es.is-mobile .es-container.es-videos #js-others-list { overflow: visible !important; height: auto !important; max-height: none !important; } } @media (orientation: landscape) { /* ============ 10. REPRODUCTOR EN EL FLUJO EN HORIZONTAL (B129 - TAREA 2) ============ * Requerimiento del OPERATOR: en horizontal el reproductor NO debe ser `position: fixed`; * va en el flujo de la columna izquierda y se desplaza con ella. Se incluye la lista de la * directiva MAS el contenedor REAL medido (`.es-content > .es-apps-entry-section`, que es * el que envuelve al reproductor dentro de la columna izquierda). NO se toca el `iframe`: * forzarle `width: 100%` romperia la proporcion del video. */ #es.is-mobile.view-videos :is(#video, .video-player, [data-video-player], .es-video-player), #es.is-mobile.view-videos .es-content > .es-apps-entry-section { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; z-index: auto !important; } }