/* ============================================================================= VIDEO 1 (Básico) — Recuerdos a pantalla completa ----------------------------------------------------------------------------- Sustituye la franja inferior semitransparente (#banner_top) por la condolencia colocada segun la orientacion de la foto: - sin texto -> la foto ocupa toda la pantalla disponible - vertical + texto -> foto a la izquierda, texto a la derecha - cuadrada + texto -> foto a la izquierda, texto a la derecha - horizontal+ texto -> foto arriba, texto debajo Todo va scopeado a #wrapper.mw1-fit (clase que pone video-fit.js): quitando esa clase se vuelve al comportamiento anterior sin tocar nada mas. ============================================================================= */ /* La franja de condolencias desaparece. Se mantiene en el DOM (oculta) porque de ella se leen las fuentes/tamaños configurados por TV (video-fit.js las copia). */ #wrapper.mw1-fit div#banner_top { display: none !important; } /* EL ESCENARIO EMPIEZA DONDE ACABA LA BARRA. El tema empuja el area de las fotos con un `padding-left: 310px` FIJO. Al estrechar la barra (900p/720p) quedaba una FRANJA BLANCA (el fondo del body) entre la barra y el escenario. video-fit.js publica el ancho real en `--mw1-barw` y aqui se ata el escenario a ese borde. Y el fondo, negro, por si asomara algo. */ /* Fondo del ESCENARIO segun el MODO (interruptor claro/oscuro del panel): - CLARO (.white) -> BLANCO (enmarca la foto, presentacion clara). - OSCURO (:not(.white)) -> NEGRO (cinematografico). Igual en HORIZONTAL y VERTICAL, y en ventana o pantalla completa. (Antes se ataba a ventana/pantalla completa: por eso en oscuro-ventana el fondo se quedaba blanco -horizontal y vertical- en vez de negro.) El escenario real es #kenburns-slideshow (y las .ss-slide llevan fondo negro propio). */ #wrapper.mw1-fit.white, #wrapper.mw1-fit.white #page-content-wrapper, #wrapper.mw1-fit.white #kenburns-slideshow, #wrapper.mw1-fit.white #kenburns-slideshow .ss-slide { background: #fff !important; } #wrapper.mw1-fit:not(.white), #wrapper.mw1-fit:not(.white) #page-content-wrapper, #wrapper.mw1-fit:not(.white) #kenburns-slideshow, #wrapper.mw1-fit:not(.white) #kenburns-slideshow .ss-slide { background: #000 !important; } #wrapper.mw1-fit.toggled:not(.mw1-portrait) { padding-left: var(--mw1-barw, 315px) !important; } /* PLEGAR LA BARRA LATERAL (icono ‹): en HORIZONTAL, al pulsar ‹ el tema pone `.toggled` en el wrapper. Entonces la barra se GUARDA deslizandose hacia la izquierda (fuera de pantalla) y el escenario -que ya ocupa todo el ancho- queda limpio. El icono › la vuelve a sacar. video-fit.js pone `--mw1-barw:0` al plegar, asi los botones de control y el padding se van al borde. En VERTICAL no aplica. */ #wrapper.mw1-fit:not(.mw1-portrait) #sidebar-wrapper { transition: transform .35s ease !important; } #wrapper.mw1-fit.toggled:not(.mw1-portrait) #sidebar-wrapper { transform: translateX(-105%) !important; } /* Al plegar, el icono cambia YA a "hacia afuera" (›, sacar) y se esconde el de "recoger" (‹). El tema ataba ese cambio al estado `no-move` (raton quieto), asi que el icono solo se giraba tras unos segundos de inactividad. Aqui se ata a `.toggled` con !important para que sea INMEDIATO. */ #wrapper.mw1-fit.toggled:not(.mw1-portrait) #toggle-sidebar { display: none !important; } #wrapper.mw1-fit.toggled:not(.mw1-portrait) #toggle-sidebar-out { display: block !important; } /* LOS BOTONES DE CONTROL (engranaje de opciones + flecha de esconder barra) van PEGADOS al borde derecho de la barra. El tema los clava en `left: 310px` FIJO, asi que al cambiar el ancho de la barra quedaban flotando en el negro (720p) o enterrados dentro de la barra (2K/4K). `position: fixed` para medir desde el borde del VIEWPORT (si no, su contenedor ya arranca en 310 y el `left` se sumaba dos veces). */ #wrapper.mw1-fit:not(.mw1-portrait) #video-options, #wrapper.mw1-fit:not(.mw1-portrait) #toggle-options, #wrapper.mw1-fit:not(.mw1-portrait) #toggle-sidebar, #wrapper.mw1-fit:not(.mw1-portrait) #toggle-sidebar-out { position: fixed !important; left: var(--mw1-barw, 315px) !important; } /* ---------- Lienzo del pase ---------- */ #wrapper.mw1-fit .ss-slides-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100% !important; max-height: 100% !important; overflow: hidden; line-height: normal; } #wrapper.mw1-fit #kenburns-slideshow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; overflow: hidden; } /* Cada diapositiva ocupa exactamente la pantalla. El zoom del plugin (transform sobre la diapositiva entera) se anula: el ken-burns lo hace la foto por su cuenta. */ #wrapper.mw1-fit .ss-slide { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; box-sizing: border-box; line-height: normal; transform: none !important; display: grid; grid-template-columns: minmax(0, 1fr); /* La fila se fija a 1fr: si se deja en `auto`, la celda crece con la foto y la foto se mide sobre la celda -> se realimentan y el marco se dispara. */ grid-template-rows: minmax(0, 1fr); padding: 3vh 3vw; gap: 2.5vw; } /* ---------- Reparto de la pantalla ---------- */ #wrapper.mw1-fit .ss-slide.mw1-notxt { grid-template-columns: minmax(0, 1fr); padding: 1.5vh 1.5vw; } /* Las columnas las calcula video-fit.js (sizeColumns) al ancho justo de la foto y del texto; con esto el conjunto queda CENTRADO en la pantalla en vez de pegado a la izquierda. */ #wrapper.mw1-fit .ss-slide.mw1-txt.mw1-v { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); justify-content: center; } #wrapper.mw1-fit .ss-slide.mw1-txt.mw1-sq { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); } #wrapper.mw1-fit .ss-slide.mw1-txt.mw1-h { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 2.5vh; } /* El pseudo-elemento de limpieza del plugin se colaria como celda del grid. */ #wrapper.mw1-fit .ss-slide:after { display: none !important; } /* video.css tiene una regla suelta `.ss-slide div { padding:100px 20%; width:100%; height:180vh; background:#303030 }` pensada para los recuerdos SIN foto, que alcanza a cualquier div de la diapositiva. Aqui se neutraliza para los nuestros. */ #wrapper.mw1-fit .ss-slide .mw1-media, #wrapper.mw1-fit .ss-slide .mw1-cap, #wrapper.mw1-fit .ss-slide .mw1-cap > div { width: auto !important; height: auto !important; padding: 0 !important; background: none !important; transition: none; } /* Marco polaroid: lo dimensiona video-fit.js (sizeFrame) al tamaño exacto de la foto. El width/height en `auto` (SIN !important, que pisaria el tamaño inline del JS) anula el `.ss-slide div { width:100%; height:180vh }` heredado. */ #wrapper.mw1-fit .ss-slide .mw1-frame { /* `relative` para que la firma de quien sube la foto se coloque respecto al MARCO (si no, el absoluto se anclaba a la diapositiva y se iba de la foto). */ position: relative; width: auto; height: auto; box-sizing: content-box; background: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); flex: 0 0 auto; transition: none; transform-origin: center; } /* Quien sube la foto, DENTRO de la foto (solo en ordenador: en movil/tablet y en el TV vertical se esconde, ahi la foto es pequeña y estorbaria). Va dentro del marco, que es quien lleva el ken-burns: asi rota y se mueve CON la foto. OJO: el marco es `content-box` con padding (el borde blanco de la polaroid), y un hijo absoluto se coloca respecto al PADDING BOX, o sea, desde el filo exterior del blanco. Por eso el desplazamiento es "el ancho del blanco + 10px", que es lo que deja la firma dentro de la imagen. */ /* OJO: video.css trae `.ss-slide div { background:#303030; height:180vh; padding:100px 20% }`, que le caia encima a este div y pintaba un CUADRO GRIS sobre la foto. Hay que anularlo entero. */ #wrapper.mw1-fit.mw1-fit.mw1-fit .ss-slide .mw1-frame > .mw1-autor { position: absolute; left: calc(var(--mw1-pad, 0px) + 10px); bottom: calc(var(--mw1-pad, 0px) + 10px); width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; display: flex; flex-direction: column; gap: 1px; max-width: 60%; color: #fff; font-family: 'Droid Serif', serif; font-size: 13px; line-height: 1.25; letter-spacing: .01em; text-align: left; text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .55); pointer-events: none; } #wrapper.mw1-fit.mw1-fit.mw1-fit .ss-slide .mw1-frame > .mw1-autor .mw1-autor-nom { font-weight: 600; } #wrapper.mw1-fit.mw1-fit.mw1-fit .ss-slide .mw1-frame > .mw1-autor .mw1-autor-ape { opacity: .92; } /* En MOVIL y TABLET no se pinta (la foto es pequeña y el nombre estorba). En el TV VERTICAL si: la foto es grande y ahi tambien se quiere ver quien la sube. */ @media (max-width: 1199px) { #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait:not(.vertical) .ss-slide .mw1-frame > .mw1-autor { display: none !important; } } /* ---------- La foto ---------- */ #wrapper.mw1-fit .ss-slide .mw1-media { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; /* marco arriba, firma debajo */ align-items: center; justify-content: center; /* visible (no hidden): con el giro y el desplazamiento del ken-burns, las esquinas del marco se salen un poco de su celda y se recortarian. */ overflow: visible; } /* ---------- Un solo evento: quieto, sin fundidos y sin duplicarse ---------- `EventsSlider` (video.js) borra y vuelve a crear el evento CADA 10s con fadeOut/fadeIn, aunque solo haya uno; y en vertical ademas clona un SEGUNDO bloque (de ahi el evento repetido). Aqui se fuerza que se vea siempre (el `!important` gana al opacity inline de jQuery) y se oculta el clon sobrante. */ #wrapper.mw1-fit.mw1-one-event #event-info .event:not(.hidden) { opacity: 1 !important; display: flex !important; } #wrapper.mw1-fit.mw1-one-event #event-info .event:not(.hidden) ~ .event:not(.hidden) { display: none !important; } /* ---------- Una sola foto: sin pase, quieta y centrada ---------- */ #wrapper.mw1-fit.mw1-single .ss-slide { opacity: 1 !important; display: grid !important; } #wrapper.mw1-fit.mw1-single .mw1-frame.mw1-kb { animation: none !important; transform: none !important; } /* width/height al 100% + object-fit:contain = la foto crece hasta llenar su hueco (tambien las pequeñas, que antes se quedaban a su tamaño original) sin recortarse ni deformarse. */ #wrapper.mw1-fit .mw1-media img { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; object-fit: contain; object-position: center; filter: none !important; -webkit-filter: none !important; transform: none; /* El CSS de cada funeraria (user.css) mete `.ss-slide img { border: 12px solid }`. Ese borde de color, mas la franja que dejaba el object-fit dentro de el, hacia que la foto pareciera tener VARIOS marcos. Solo queremos el blanco (.mw1-frame). */ border: 0 !important; outline: none !important; box-shadow: none !important; } /* Ken-burns propio: la foto sube muy despacio, gira un pelin y termina mostrandose entera (asi se recupera el ligero movimiento de subida + rotacion que tenia el pase original). La clase la pone/reinicia video-fit.js cuando la diapositiva pasa a ser la visible (no se ata a .current: el plugin se la devuelve a la que SALE y el zoom daria un salto). */ @keyframes mw1-kenburns { from { transform: translateY(40px) rotate(-3deg) scale(1.06); } to { transform: translateY(-40px) rotate(3deg) scale(1); } } /* El giro va SIEMPRE en el mismo sentido: nada de `alternate` (con el, a mitad del pase la foto deshacia el giro y se veia raro). Un unico recorrido de 20s, mas largo que la vida de la diapositiva (~12s), asi que la foto nunca llega al final ni se para ni rebota. La clase la llevan todas desde que se crean; video-fit.js solo la REINICIA en la que entra, para que arranque su recorrido desde el principio. */ #wrapper.mw1-fit .mw1-frame.mw1-kb { animation: mw1-kenburns 20s linear forwards; } /* ============================================================================= CORAZONES DE FONDO (antes eran puntos) ----------------------------------------------------------------------------- Los 50 `.circle-container` del tema conservan su duracion y su retardo, pero el RECORRIDO se lo genera video-fit.js (`heartPaths`): nacen fuera de pantalla por abajo y suben casi rectos (los `move-frames-N` originales cruzaban media pantalla de lado a lado). Aqui solo se define COMO se ven. ============================================================================= */ /* Cada corazon tiene su retardo (hasta ~30s). Sin esto, mientras esperan su turno se quedan QUIETOS en su posicion de origen: se apilan todos en la esquina del escenario y la suma de sus halos pinta un borron rojo. Con `backwards` adoptan ya el primer fotograma (fuera de pantalla, por abajo) y no se ven hasta que les toca salir. */ #wrapper.mw1-fit .stars .circle-container { animation-fill-mode: backwards !important; } #wrapper.mw1-fit .stars .circle-container .circle { width: 100% !important; height: 100% !important; border-radius: 0 !important; background: none !important; background-image: none !important; mix-blend-mode: normal !important; display: flex; align-items: center; justify-content: center; animation: mw1-heart-beat 4s ease-in-out infinite !important; } #wrapper.mw1-fit .stars .circle-container .circle:before { content: '\2665'; display: block; line-height: 1; color: rgba(255, 250, 250, .9); /* Glow: tres halos, del mas ceñido al mas abierto. */ text-shadow: 0 0 4px rgba(255, 255, 255, .9), 0 0 10px rgba(255, 130, 150, .8), 0 0 22px rgba(255, 90, 120, .5); } /* MODO CLARO (.white, escenario BLANCO): los corazones van del COLOR CORPORATIVO (color1) para que se vean sobre el blanco. En OSCURO (fondo negro) siguen blancos con halo rosa. */ #wrapper.mw1-fit.white .stars .circle-container .circle:before { color: var(--mw1-color1, #c43e5c); opacity: .95; text-shadow: 0 0 3px rgba(255, 255, 255, .55), 0 0 10px color-mix(in srgb, var(--mw1-color1, #c43e5c) 55%, transparent), 0 0 22px color-mix(in srgb, var(--mw1-color1, #c43e5c) 30%, transparent); } /* Tres tamaños de corazon para que no salgan todos iguales. */ #wrapper.mw1-fit .stars .circle-container:nth-child(3n) .circle:before { font-size: 22px; } #wrapper.mw1-fit .stars .circle-container:nth-child(3n+1) .circle:before { font-size: 14px; } #wrapper.mw1-fit .stars .circle-container:nth-child(3n+2) .circle:before { font-size: 18px; } /* Latido suave + BAMBOLEO lateral (el original pulsaba de 0.4 a 2.2: demasiado para un corazon). El vaiven de aqui se suma a la deriva del recorrido (HEART_DRIFT). */ @keyframes mw1-heart-beat { 0% { transform: translateX(-8px) scale(.9); opacity: .5; } 50% { transform: translateX(8px) scale(1.12); opacity: .9; } 100% { transform: translateX(-8px) scale(.9); opacity: .5; } } /* ---------- La condolencia ---------- */ #wrapper.mw1-fit .ss-slide .mw1-cap { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.4vh; padding: 0 1vw !important; overflow: hidden; text-align: left; opacity: 0; transition: opacity 1.6s ease; } /* Entra cuando la diapositiva pasa a ser la visible (con un respiro para que la foto llegue antes) y se va en cuanto empieza el cruce con la siguiente, para que la condolencia vieja no se lea sobre la foto nueva. La clase la lleva video-fit.js. */ #wrapper.mw1-fit .ss-slide.mw1-live .mw1-cap { opacity: 1; transition: opacity 2.4s ease .9s; } /* El nombre firma la condolencia: va DESPUES del texto (solo si hay condolencia). */ #wrapper.mw1-fit .mw1-cap .pesame-name { color: #fff; font-family: 'Droid Serif', serif; font-style: italic; line-height: 1.3; opacity: .85; margin-top: .6em; } /* El alto lo manda la BANDA (.mw1-cap), no el texto. El tema le daba al `.pesame-text` una altura propia con overflow oculto y recortaba la condolencia por dentro (en movil se veian 4 de 11 lineas) sin que la banda desbordara, asi que el ajuste de fuente ni se enteraba. */ #wrapper.mw1-fit .mw1-cap .pesame-text { color: #fff; font-family: 'Droid Serif', serif; line-height: 1.42; height: auto !important; max-height: none !important; overflow: hidden; } /* Horizontal: el texto va debajo, centrado y sin comerse la foto. */ #wrapper.mw1-fit .ss-slide.mw1-txt.mw1-h .mw1-cap { justify-content: flex-start; text-align: center; max-height: 26vh; padding: 0 6vw !important; } /* ============================================================================= PANTALLA ALTA: TV EN VERTICAL, MOVIL Y TABLET (#wrapper.mw1-portrait) ----------------------------------------------------------------------------- La clase `mw1-portrait` la pone video-fit.js cuando el TV va en vertical (clase `.vertical`, el wrapper ROTADO -90deg) O cuando el viewport es mas alto que ancho (movil/tablet). El tema usa el MISMO maquetado en los dos casos (barra abajo, con los bloques en `position:absolute`), pero solo en uno pone la clase `.vertical`: por eso aqui se unifican. OJO: en el TV rotado, `vw` y `vh` estan INTERCAMBIADAS. Por eso en este bloque se usan PORCENTAJES (que no dependen del eje) siempre que se puede. OJO 2: video.css tiene reglas propias MUY especificas para estos casos (`.ss-slide:not(.supervertical) { height:auto!important; padding-bottom:2000px }`, `.ss-slide img { width:90%!important; scale(.8) }`...) que ganaban a las mias y descuadraban todo. De ahi la clase repetida. ============================================================================= */ /* El escenario TERMINA donde empieza la barra inferior (si no, la barra se le monta encima y tapa la condolencia). La altura de la barra la mide video-fit.js. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait .ss-slides-wrap { bottom: var(--mw1-barh, 0px) !important; height: auto !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait .ss-slide, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait .ss-slide.supervertical, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait .ss-slide:not(.supervertical) { height: 100% !important; padding: 26px 32px !important; gap: 26px; } /* El texto siempre DEBAJO (a los lados no cabria en una pantalla estrecha). */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait .ss-slide.mw1-txt { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; } /* La condolencia vive en una banda de alto fijo (la pone fitCaption) y va CENTRADA en ella: asi queda a media altura entre la foto y la zona de eventos, no pegada al borde. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait .ss-slide.mw1-txt .mw1-cap { justify-content: center; text-align: center; /* El tope de altura lo pone video-fit.js en px (fitCaption). En % NO vale: se resolvia contra su propia fila del grid (24px de 71) y recortaba el texto; y en vh/vw tampoco, porque el TV rotado intercambia los ejes. */ padding: 0 4% !important; } /* La foto: se anulan el width:90%, el margin-top, el scale(.8) y el brightness del tema. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait .mw1-media img { width: 100% !important; height: 100% !important; margin: 0 !important; background: none !important; transform: none; filter: none !important; -webkit-filter: none !important; } /* ---------- Recuerdos sin foto (solo texto) ---------- */ #wrapper.mw1-fit .ss-slide.nofx { padding: 0; grid-template-columns: minmax(0, 1fr); } #wrapper.mw1-fit .ss-slide.nofx > div { width: 100% !important; height: 100% !important; box-sizing: border-box; padding: 6vh 10vw !important; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } /* ============================================================================= BARRA LATERAL ----------------------------------------------------------------------------- Antes: cuatro bloques con alturas fijas en px repartidos por ~15 media queries; #brand-info iba en absolute abajo y TAPABA el texto del QR (salia cortado), y la caja del movil no respetaba la proporcion del png del telefono. Ahora: columna flexible. El QR se queda con el hueco libre y video-fit.js decide, MIDIENDO, si cabe el telefono o hay que enseñar solo el QR. OJO a la especificidad: video.css fija el tamaño del QR por tipo de TV con reglas `!important` (`--size_qr_width_*` / `--size_qr_height_*`), y son justo las que descuadraban la caja. Por eso aqui la clase `.mw1-fit` se repite: sube la especificidad lo justo para ganarles. La altura del movil se pasa por la variable `--mw1-qr-h` (un estilo inline NO puede con un `!important` ajeno; una variable si). ============================================================================= */ #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper { display: flex; flex-direction: column; overflow: hidden; } #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #user-info { flex: 0 0 auto; height: auto !important; min-height: 0 !important; /* El bloque del obituario (retrato + nombre + fechas) sube ~30px: se le quita ese espacio al padding de arriba. Como los eventos van en `flex:1`, esos 30px se los queda su caja, que es justo lo que se pedia (mas alta, para que quepa mejor el texto). */ padding: 1.7vh 10px 2vh !important; margin: 0 !important; } /* El nombre y las fechas se quedan con el alto que necesiten. El tema les da un alto FIJO y, al crecer la letra en 2K/4K, el nombre se montaba encima de las fechas. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #user-info .user-name, #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #user-info .user-date { height: auto !important; min-height: 0 !important; /* El tema fija el interlineado en PIXELES (30px). Al crecer la letra en 2K/4K (60px), las lineas del nombre se montaban unas sobre otras. Relativo a la fuente y se acabo. */ line-height: 1.18 !important; } /* El nombre usa las lineas que necesite, pero como MUCHO 3: si no cabe, "...". */ #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #user-info .user-name { white-space: normal !important; text-overflow: ellipsis !important; overflow: hidden !important; overflow-wrap: break-word; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #user-info .user-date { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: 100%; } /* Los EVENTOS se quedan con el hueco libre (flex:1). Aunque el obituario todavia no tenga eventos, ese espacio queda RESERVADO para ellos: no se lo puede comer el QR. El contenido va CENTRADO en altura dentro de ese hueco. */ #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #event-info { flex: 1 1 auto; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 22px 18px !important; overflow: hidden; z-index: auto; display: flex; align-items: center; justify-content: center; } /* ============================================================================= MODO LIMPIO (movil/tablet, doble toque): fuera TODAS las barras. Solo quedan las fotos, los corazones y los textos. El escenario pasa a ocupar la pantalla entera (--mw1-barh a 0). ============================================================================= */ /* OJO: la clase va REPETIDA. Las reglas que enseñan la barra (`.mw1-portrait #sidebar-wrapper`, `.mw1-portrait #event-info`...) llevan `display !important` y le ganaban a una sola clase. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-limpio.mw1-limpio.mw1-limpio #sidebar-wrapper, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-limpio.mw1-limpio.mw1-limpio #event-info, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-limpio.mw1-limpio.mw1-limpio #brand-info, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-limpio.mw1-limpio.mw1-limpio #qr-info, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-limpio.mw1-limpio.mw1-limpio #user-info, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-limpio.mw1-limpio.mw1-limpio #toggle-sidebar, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-limpio.mw1-limpio.mw1-limpio #toggle-options, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-limpio.mw1-limpio.mw1-limpio #options-menu, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-limpio.mw1-limpio.mw1-limpio #banner_top, /* TELEFONO (vertical y horizontal): igual que el modo limpio, PERMANENTE. En un movil no cabe la barra ni los eventos: solo el pase de fotos, recuerdos y condolencias. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-phone.mw1-phone.mw1-phone #sidebar-wrapper, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-phone.mw1-phone.mw1-phone #event-info, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-phone.mw1-phone.mw1-phone #brand-info, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-phone.mw1-phone.mw1-phone #qr-info, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-phone.mw1-phone.mw1-phone #user-info, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-phone.mw1-phone.mw1-phone #banner_top { display: none !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-limpio.mw1-limpio.mw1-limpio .ss-slides-wrap, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-phone.mw1-phone.mw1-phone .ss-slides-wrap { bottom: 0 !important; } /* TABLET: fuera la zona de eventos, para que la foto sea aun mas grande (la barra del obituario con el QR y el logo si se queda). */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-tablet.mw1-tablet #event-info { display: none !important; } /* SIN EVENTOS: - En HORIZONTAL, la franja de eventos es flex:1 (crece para llenar el hueco). Si se pone display:none, ese hueco se reparte y TODO se sube. Por eso se mantiene en el flujo (reservando el espacio con su flex:1) pero INVISIBLE (sin banda translucida a la vista). - En VERTICAL si se quita (display:none). La clase va repetida para ganarle a la regla de vertical (`.mw1-portrait #event-info`). */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-no-events.mw1-no-events:not(.mw1-portrait) #event-info { display: flex !important; visibility: hidden !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-no-events.mw1-no-events.mw1-portrait #event-info { display: none !important; } /* La PLANTILLA del evento (.event.hidden, de la que el tema clona) no se pinta nunca. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #event-info .event.hidden { display: none !important; } /* FOTO UNICA: cuando en el pase hay UNA sola foto (clase .mw1-una-foto la pone video.js), se muestra ESTATICA y RECTA -> se desactiva el efecto ken-burns (transform de la diapositiva/marco), la transicion y cualquier animacion/inclinacion. */ #wrapper.mw1-fit.mw1-una-foto #kenburns-slideshow .ss-slide, #wrapper.mw1-fit.mw1-una-foto #kenburns-slideshow .ss-slide img, #wrapper.mw1-fit.mw1-una-foto #kenburns-slideshow .ss-slide .mw1-media, #wrapper.mw1-fit.mw1-una-foto #kenburns-slideshow .ss-slide .mw1-frame, #wrapper.mw1-fit.mw1-una-foto #kenburns-slideshow .ss-slide .mw1-kb { transform: none !important; transition: none !important; animation: none !important; } /* DOS EVENTOS en el TV VERTICAL: van FIJOS, uno a cada lado de la caja, sin ir cambiando. video-fit.js pinta dos bloques `.mw1-ev-fijo` con los datos de los dos eventos. El carrusel del tema NO se toca (lo necesita el modo horizontal): sus bloques simplemente se esconden aqui. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait.mw1-ev-doble #event-info { justify-content: space-evenly !important; gap: 24px; } /* OJO: estas reglas llevan `#sidebar-wrapper` porque la regla base del .event tambien lo lleva y, sin el, ganaba ella (mismo !important, mas ids) y no se escondia nada. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-ev-doble #sidebar-wrapper #event-info .event:not(.mw1-ev-fijo) { display: none !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-ev-doble #sidebar-wrapper #event-info .event.mw1-ev-fijo { display: flex !important; opacity: 1 !important; margin: 0 !important; } /* El evento de la IZQUIERDA del TV (solo vertical), 20px mas hacia ese lado. OJO: el wrapper esta girado -90deg, asi que la izquierda del TV es la -X de la caja (por eso `left`, no `right`). */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait.mw1-ev-doble #sidebar-wrapper #event-info .event.mw1-ev-a { position: relative; left: -20px; } /* HORIZONTAL con barra ancha (2K/4K): los dos eventos van UNO DEBAJO DEL OTRO en la barra. El primero (o la velacion, si hay mas de dos) se queda fijo arriba; abajo se van turnando el resto. */ #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait).mw1-ev-doble #sidebar-wrapper > #event-info { flex-direction: column; justify-content: center; align-items: center; gap: 46px; /* los dos eventos respiran */ } /* Linea fina del color de la funeraria separando un evento del otro: NO de punta a punta, solo un trazo CENTRADO de la mitad del ancho. Se pinta como un hijo mas del flex (`::after` a fila completa) con un degradado que solo tiñe el 50% central. */ #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait).mw1-ev-doble #sidebar-wrapper #event-info .event.mw1-ev-a::after { content: ''; flex: 0 0 100%; height: 1.5px; margin-top: 22px; background: linear-gradient(to right, transparent 0, transparent 25%, var(--mw1-color1, rgba(255, 255, 255, .45)) 25%, var(--mw1-color1, rgba(255, 255, 255, .45)) 75%, transparent 75%, transparent 100%); } /* Las dos lineas de fechas, con mas aire entre ellas (se pidio para 2K/4K). */ #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait).mw1-ev-doble #sidebar-wrapper #event-info .event .fecha_fin { margin-top: 8px !important; } /* A la derecha solo se ve el evento que tiene el turno (los demas esperan). La velacion, a la izquierda, no se mueve nunca. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-ev-doble #sidebar-wrapper #event-info .event.mw1-ev-b:not(.mw1-ev-on) { display: none !important; } /* SIN SALTO: los bloques no se enseñan hasta que el ajuste ha terminado (fuentes cargadas y caja medida). Antes se pintaban con la primera medida y, al reajustarse, se veian dar el brinco. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-ev-doble #sidebar-wrapper #event-info .event.mw1-ev-fijo { opacity: 0 !important; transition: opacity .45s ease; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-ev-doble.mw1-ev-ok #sidebar-wrapper #event-info .event.mw1-ev-fijo { opacity: 1 !important; } /* El relevo de la derecha, con fundido tranquilo (1.4s): el que se va se apaga, y el que entra nace apagado y se enciende. `mw1-ev-out` tiene que ganarle a la regla de arriba: por eso lleva una clase mas (mas especifica) ademas del !important. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-ev-doble #sidebar-wrapper #event-info .event.mw1-ev-b { transition: opacity 1.4s ease !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-ev-doble.mw1-ev-ok #sidebar-wrapper #event-info .event.mw1-ev-fijo.mw1-ev-out { opacity: 0 !important; } /* Donde NO se enseñan dos eventos (1080p y por debajo, en horizontal), los fijos no pintan nada: manda el carrusel del tema. */ #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-ev-doble) #sidebar-wrapper #event-info .event.mw1-ev-fijo { display: none !important; } /* El evento: icono + titulo en la MISMA linea; luego direccion; luego fechas. (El HTML es una lista plana de ,

y

: se agrupa con flex-wrap.) */ /* El bloque va CENTRADO en la caja, pero su texto alineado a la IZQUIERDA (por eso el ancho es `max-content` + `margin:auto`, en vez de ocupar todo y centrar el texto). */ /* `!important` en el display: el slider del tema hace `fadeIn()`, y jQuery escribe `display:block` INLINE en el .event, que se comia este flex. Sin el, el titulo caia debajo del icono en vez de ir a su lado. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #event-info .event:not(.hidden) { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 10px; max-width: none; margin: 0 auto !important; padding: 0 12px !important; text-align: left; } #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #event-info .event > i { flex: 0 0 auto; margin: 0 !important; } /* El titulo va EN LA MISMA LINEA que el icono. Salia debajo porque le llegaba un ancho fijo (235px = el del bloque) y, siendo un item flex, ocupaba la fila entera: hay que devolverle el ancho de su contenido. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #event-info .event .event_title { flex: 0 1 auto; width: auto !important; max-width: none !important; margin: 0 !important; line-height: 1.2; } /* HORIZONTAL: 2 puntos mas en todo el evento (icono, titulo y cuerpo). */ /* El aire de los lados ya lo pone el padding de la CAJA (18px). El padding propio del bloque solo estrechaba el texto y obligaba a `fitEvent` a encogerlo (escala 0.95). */ #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper #event-info .event { padding: 0 !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper #event-info .event > i { font-size: 20px !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper #event-info .event .event_title { font-size: 20px !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper #event-info .event > p { font-size: 18px !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #event-info .event > p { flex: 0 0 100%; margin: 0 !important; line-height: 1.35; } /* DIRECCIONES LARGAS: se cortan con "..." en vez de estirar el bloque y descuadrar la caja (hay tanatorios con direcciones kilometricas). La direccion, hasta 4 lineas; la localidad, 1. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #event-info .event > p.direccion { display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden !important; text-overflow: ellipsis; overflow-wrap: anywhere; } #wrapper.mw1-fit.mw1-fit.mw1-fit #event-info .event > p.municipio { display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden !important; text-overflow: ellipsis; overflow-wrap: anywhere; } /* GROSOR en HORIZONTAL: el texto del tema es MUY fino (200). El titulo del evento va a 600 y el cuerpo del evento (direccion/municipio/fechas) y el TEXTO DEL QR a 400 (a 300 aun se veian finos). En vertical (TV) no se toca. */ #wrapper.mw1-fit:not(.mw1-portrait) #event-info .event .event_title { font-weight: 600 !important; } #wrapper.mw1-fit:not(.mw1-portrait) #event-info .event p { font-weight: 400 !important; } #wrapper.mw1-fit:not(.mw1-portrait) #sidebar-wrapper #qr-info .qr-title { font-weight: 400 !important; } /* Fechas en columnas: "Inicio:" y "Fin:" se quedan donde estan, pero la fecha y la hora quedan alineadas entre las dos lineas (video-fit.js las parte en etiqueta/fecha/hora). */ /* Sin `#sidebar-wrapper` en el selector: en el TV VERTICAL la caja de eventos sale de la barra (va en `fixed`) y con aquel prefijo la regla no llegaba, asi que alli las fechas se quedaban sin alinear. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #event-info .event .fecha, #wrapper.mw1-fit.mw1-fit.mw1-fit #event-info .event .fecha_fin { display: grid; grid-template-columns: 4.4em auto auto; justify-content: start; align-items: center; gap: 0 8px; text-align: left; } /* El reloj y la hora, como una pieza con separacion fija: asi las dos lineas (Inicio/Fin) quedan alineadas entre si y el icono no baila. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #event-info .event .mw1-f-time { display: flex; align-items: center; gap: 6px; white-space: nowrap; } /* La FECHA nunca se parte: si viene en ISO ("2022-07-26") el guion es un punto de corte y en barras estrechas se rompia en dos lineas ("2022-" / "07-26"). Con nowrap queda siempre entera, sea ISO o dd/mm/yyyy (hay ancho de sobra en la columna). */ #wrapper.mw1-fit.mw1-fit.mw1-fit #event-info .event .mw1-f-date { white-space: nowrap; } /* OJO: el tema le mete al reloj de la linea "Fin" un `margin-left: 26px` que el de "Inicio" no tiene (un apaño del layout antiguo). Era lo que descuadraba los dos relojes entre si: mismo inicio de columna (241px) pero el icono caia en 251 y 267. Aqui se anula: el hueco lo pone el `gap` del flex, igual en las dos lineas. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #event-info .event .mw1-f-time i { flex: 0 0 auto; width: 1em; margin: 0 !important; text-align: center; } /* Los espacios: uno antes de la direccion y otro antes de las fechas. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #event-info .event .direccion { margin-top: 18px !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #event-info .event .fecha { margin-top: 18px !important; } /* La zona del QR ocupa TODO el ancho de la barra. El tema le mete un `right: 20px` (y algun margen) en las pantallas pequeñas: con la barra estrecha, el bloque quedaba desplazado y el QR se veia descentrado respecto al resto de la barra. */ #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #qr-info { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; text-align: center; } /* El QR ocupa lo que necesita, no lo que sobra. Su tope lo pone video-fit.js. */ #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #qr-info { flex: 0 0 auto; position: static !important; width: auto !important; height: auto !important; } /* Orden de la barra en HORIZONTAL (pedido): obituario arriba del todo, luego el evento, luego el QR y el logo de la funeraria al final. El `order` manda sobre el orden del HTML. */ #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #user-info { order: 1; } #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #event-info { order: 2; } #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #qr-info { order: 3; } #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #brand-info { order: 4; } /* Logo de la funeraria: +30% (de 104px de alto a 135). */ /* `--mw1-esc` es el factor de resolucion que publica video-fit.js (1 a 1080p, 2 en 4K): el hueco del logo tiene que crecer con el, o el logo (que si crece) sale cortado. */ #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #brand-info { position: static !important; /* `flex-shrink: 0` de verdad: en 720p el flex lo aplastaba (84px para un logo de 97) y el logo salia CORTADO. Quien tiene que ceder es la caja de eventos, que va en `flex: 1`. */ flex: 0 0 auto !important; height: auto !important; min-height: calc(150px * var(--mw1-esc, 1)) !important; padding: calc(6px * var(--mw1-esc, 1)) !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #brand-info #brand_image_container { height: auto !important; max-height: 135px; width: 100%; } #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper > #brand-info img { max-height: 135px !important; height: auto !important; } /* ---------- BARRA INFERIOR del TV vertical: misma idea, pero en FILA ---------- El tema la maquetaba con 4 bloques en `position:absolute` (y el de eventos en `fixed`, flotando SOBRE las fotos). Aqui pasa a ser una fila: logo | finado | eventos (se quedan con el hueco) | QR. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper { display: flex !important; /* El wrapper va girado -90deg, asi que el orden visual en el TV real sale AL REVES del orden en pantalla. Con `row` (y los `order` de abajo) queda: LOGO a la izquierda del TV, finado en medio y QR a la derecha. */ flex-direction: row; align-items: stretch; gap: 0; padding: 0 !important; box-sizing: border-box; overflow: hidden; } /* OJO: en vertical los EVENTOS NO van en la barra: el tema les da su propia zona (`#wrapper.vertical #event-info { position:fixed }`, fuera del flujo). No se toca, o se queda un hueco vacio en medio de la barra. La barra es: logo | finado | QR. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper > #brand-info, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper > #user-info, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper > #qr-info { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: 100% !important; min-height: 0 !important; max-width: 100%; margin: 0 !important; padding: 0 !important; z-index: auto; } /* El orden del HTML no es el que queremos ver: se recoloca con `order`. Los tres bloques van a toda la altura y pegados, como segmentos de una misma barra (antes quedaban cajas sueltas de distinto alto con huecos entre ellas). */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper > #brand-info { order: 1; flex: 0 0 auto; width: 22% !important; display: flex; align-items: center; justify-content: center; padding: 12px 18px !important; /* En vertical, el logo NO lleva linea a ningun lado (esa linea es solo para el horizontal en fondo blanco). Se anula tambien aqui por si el tema o user.css meten alguna. */ border: 0 !important; } /* Finado: ocupa el CENTRO de la barra, con el retrato a la izquierda y nombre/fechas al lado (apilados no caben en 241px de alto). */ /* `space-evenly`: el retrato queda CENTRADO en el hueco que va desde el borde de la caja hasta donde empieza el nombre (antes iba pegado al texto). */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper > #user-info { order: 2; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; gap: 0; padding: 4px 6px !important; text-align: left; overflow: hidden; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #user-info .user-image-container { flex: 0 0 auto; margin: 0 !important; /* sin margenes: la foto, lo mas cerca posible de las paredes */ } /* Nombre, apellidos y fecha: alineados entre si y con AIRE respecto al retrato (antes se le pegaban). Y si el nombre pasa de 3 lineas, se corta con "...". */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #user-info .mw1-user-text { min-width: 0; overflow: hidden; text-align: left; margin-left: 22px !important; padding-right: 10px; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #user-info .user-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; text-overflow: ellipsis !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #user-info .user-name, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #user-info .user-date { text-align: left !important; margin: 0 !important; padding: 0 !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #user-info .user-date { margin-top: 6px !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper > #qr-info { order: 3; flex: 0 0 auto; max-width: 22%; padding: 4px 8px !important; } /* ---------- Eventos en el TV vertical ---------- Ojo: aqui #event-info NO va en la barra (el tema lo saca con `position:fixed` a su propia zona). Dos cosas lo descuadraban: (a) el icono llevaba `position:relative; left:-90px; top:30px` -> se salia de la caja y parecia que FALTABA; (b) `.event.portrait { margin-left: 15% }` lo empujaba a un lado. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #event-info { display: flex !important; align-items: center; justify-content: center; text-align: center !important; /* La caja NO deja que el bloque se le escape: sin esto, el evento sobresalia por el lado y se metia bajo la barra del obituario (se veian las lineas cortadas). */ overflow: hidden !important; /* Menos padding = mas alto util = LETRA MAS GRANDE (el alto es lo que limita aqui). */ padding: 10px 0 !important; } /* El bloque se acota y se centra: con `max-content` ocupaba casi toda la caja y, al ir el texto a la izquierda, parecia desplazado a un lado. */ /* El ANCHO lo pone video-fit.js (fitEvent): maqueta el bloque mas estrecho y luego lo escala, que es como consigue subir el tamaño de letra. Por eso aqui no se fija (ni con !important, que le ganaria al inline del JS). */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #event-info .event, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #event-info .event.portrait { margin: 0 auto !important; max-width: none !important; } /* Separaciones mas justas dentro del bloque: cada px que se ahorra aqui es alto que gana la LETRA (en vertical el tamaño lo limita el alto de la caja, no el ancho). */ /* OJO: lleva `#sidebar-wrapper` aunque en vertical la caja salga de la barra (va en `fixed`, pero SIGUE dentro de ese contenedor en el DOM). Sin ese id, la regla de horizontal (que si lo lleva) tiene mas especificidad y los margenes se quedaban en 18px. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #event-info .event .direccion, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #event-info .event .fecha { margin-top: 8px !important; } /* El bloque lo CENTRA el flex de la caja, no el `text-align`. Con el texto centrado, ademas, el contenido de cada celda del grid de fechas se centraba DENTRO de su celda y los relojes de Inicio y Fin caian en sitios distintos (251px vs 267px). Todo el contenido, a la izquierda. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #event-info .event, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #event-info .event p, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #event-info .event span, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #event-info .event .event_title { text-align: left !important; } /* El reloj, pegado al principio de su columna en las dos lineas. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #event-info .event .mw1-f-time { justify-content: flex-start !important; } /* Interlineado corto: es lo que mas alto libera, y ese alto se lo queda la letra (fitEvent escala hasta llenar la caja, asi que menos interlineado = tipografia mas grande). */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #event-info .event, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #event-info .event p, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #event-info .event .event_title { line-height: 1.12 !important; } /* Icono y titulo, mas contenidos: `fitEvent` escala luego todo el bloque (~x1.4), asi que a 34/25px se veian enormes al lado del texto. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #event-info .event i.logoevent { position: static !important; top: auto !important; left: auto !important; font-size: 22px !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #event-info .event .event_title { font-size: 19px !important; } /* Cuerpo del evento (direccion, municipio y fechas) mas pequeño; el titulo y el icono se quedan como estan. Como fitEvent ya esta topado en EVENT_MAX_SCALE_V, bajar esto NO hace que el bloque crezca de escala: solo encoge el cuerpo. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait #sidebar-wrapper #event-info .event > p { font-size: 18px !important; } /* ---------- Bloque del QR (comun a TV horizontal y vertical) ---------- */ #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #qr-info { display: flex !important; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; padding: 24px 16px !important; /* estaba todo muy pegado */ min-height: 0 !important; overflow: hidden; } /* La ALTURA la pone video-fit.js (--mw1-qr-h); el ancho sale de la proporcion del png. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #qr-info .bg-mobile { flex: 0 0 auto; aspect-ratio: 120 / 230; height: var(--mw1-qr-h, auto) !important; width: auto !important; max-width: 100% !important; /* Sin esto, el `min-width:auto` que flexbox da a sus hijos hace que el tamaño natural del QR (123px) infle la caja y el codigo se salga. */ min-width: 0 !important; min-height: 0 !important; background: url(../img/qrcode_bg.png) center / contain no-repeat !important; display: flex; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; box-sizing: border-box; } #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #qr-info .bg-mobile a { display: block; width: 76%; line-height: 0; } #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #qr-info img#qr-image { width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: #fff; object-fit: contain !important; image-rendering: pixelated; /* el QR nace a 123px: sin suavizado se lee mejor al ampliarlo */ } /* Cuando no hay altura para el telefono: SOLO el QR, en una tarjeta blanca cuadrada. El ancho se fija tambien con la variable: dejandolo en `auto`, el tamaño natural del QR (123px) inflaba la caja y el codigo se salia. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper.mw1-qr-plain #qr-info .bg-mobile { aspect-ratio: 1 / 1; width: var(--mw1-qr-h, auto) !important; background: #fff !important; border-radius: 8px; padding: 5px !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper.mw1-qr-plain #qr-info .bg-mobile a { width: 100%; height: 100%; } #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper.mw1-qr-plain #qr-info img#qr-image { height: 100% !important; } /* Sin recortes: video-fit.js (fitQrTitle) encoge el texto hasta que cabe entero. */ #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #qr-info div.qr-title { flex: 0 0 auto; width: 100%; padding: 18px 6px 0 !important; margin: 0 !important; /* video.css pone line-height:1 en el TV vertical y recorta los acentos (ó, ñ). */ line-height: 1.3 !important; text-align: center !important; overflow: hidden; } /* ============================================================================= PANEL DE OPCIONES (el engranaje) ----------------------------------------------------------------------------- Estaba maquetado con `float`, alturas fijas de 120px y letra de 10px: se salia, se cortaba y no habia quien lo leyera. Aqui pasa a ser una barra flex moderna (fondo oscuro translucido con desenfoque, controles de 38px, texto de 13-14px). NO se toca el mecanismo de abrir/cerrar: sigue siendo la clase `.toggled` que pone video.js al pulsar el engranaje. ============================================================================= */ #wrapper.mw1-fit #video-options.toggled { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 12px 16px; /* max-content, no `auto`: el contenedor (#section-toggle-sidebar) mide 50px de ancho, asi que con `auto` el panel se quedaba estrangulado y se cortaba todo. */ width: max-content !important; max-width: 94vw; height: auto !important; overflow: visible !important; min-height: 84px; padding: 14px 20px !important; box-sizing: border-box; background: rgba(18, 18, 22, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .14); border-left: 0; border-radius: 0 16px 16px 0; box-shadow: 0 14px 44px rgba(0, 0, 0, .5); color: #fff; } /* Fuera los floats, los `position:absolute` sueltos y el doble
que separaba filas. Con `order` se coloca cada bloque donde toca (el orden del HTML esta mezclado). */ #wrapper.mw1-fit #video-options.toggled > * { float: none !important; margin: 0 !important; position: static; flex: 0 0 auto; } #wrapper.mw1-fit #video-options.toggled .music-label { order: 1; } #wrapper.mw1-fit #video-options.toggled #audio-select { order: 2; } #wrapper.mw1-fit #video-options.toggled #toggle-mute { order: 3; } #wrapper.mw1-fit #video-options.toggled #volume-slider { order: 4; } #wrapper.mw1-fit #video-options.toggled #modes { order: 5; } #wrapper.mw1-fit #video-options.toggled #moreoptions { order: 6; } #wrapper.mw1-fit #video-options.toggled #toggle-close-options { order: 7; } /* El icono de YouTube y el boton viven dentro de #moreoptions y venian flotados. */ #wrapper.mw1-fit #video-options.toggled #moreoptions > * { float: none !important; position: static !important; margin: 0 !important; } #wrapper.mw1-fit #video-options.toggled br { display: none; } #wrapper.mw1-fit #video-options.toggled .music-label { font-size: 12px !important; line-height: 1.2 !important; letter-spacing: .06em; text-transform: uppercase; opacity: .7; color: #fff !important; } #wrapper.mw1-fit #video-options.toggled #audio-select { width: 230px !important; height: 40px !important; padding: 0 12px !important; font-size: 14px !important; font-weight: 400 !important; color: #fff !important; background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: border-color .15s ease, background .15s ease; } #wrapper.mw1-fit #video-options.toggled #audio-select:hover { background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .28) !important; } #wrapper.mw1-fit #video-options.toggled #audio-select option { color: #222; } #wrapper.mw1-fit #video-options.toggled #toggle-mute, #wrapper.mw1-fit #video-options.toggled .yt-mw1 { font-size: 20px !important; color: #fff !important; cursor: pointer; } #wrapper.mw1-fit #video-options.toggled #volume-slider { /* OJO: `position:relative` es IMPRESCINDIBLE. El tirador y el relleno van en absolute DENTRO de la barra; al dejarla en `static` (por la limpieza de posicionados del panel) se anclaban al PANEL entero y el tirador aparecia como un punto suelto en su esquina. */ position: relative !important; width: 140px !important; height: 6px !important; border: 0 !important; border-radius: 99px !important; background: rgba(255, 255, 255, .22) !important; } /* Grupos separados por una linea fina, como en una barra de herramientas moderna. */ #wrapper.mw1-fit #video-options.toggled #modes, #wrapper.mw1-fit #video-options.toggled #moreoptions { display: flex; align-items: center; gap: 12px; padding-left: 18px !important; border-left: 1px solid rgba(255, 255, 255, .12); } #wrapper.mw1-fit.mw1-portrait #video-options.toggled #modes, #wrapper.mw1-fit.mw1-portrait #video-options.toggled #moreoptions { padding-left: 0 !important; padding-top: 14px !important; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); } #wrapper.mw1-fit #video-options.toggled #btnCapturar { width: auto !important; height: 40px !important; padding: 0 18px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 40px !important; white-space: nowrap !important; /* el texto NO se sale del boton (antes envolvia "streaming") */ overflow: hidden !important; text-overflow: ellipsis !important; max-width: 320px !important; color: #fff !important; background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: background .2s ease, border-color .2s ease; } #wrapper.mw1-fit #video-options.toggled #btnCapturar:hover { background: rgba(255, 255, 255, .22) !important; } /* ---------- Horizontal/Vertical y claro/oscuro: selector de DOS opciones ---------- bootstrap-switch solo enseña UNA etiqueta a la vez (la del estado actual) y desliza un "puño": no se leia la otra opcion ni quedaba claro cual estaba activa. Aqui se convierte en un selector con las DOS etiquetas a la vista y la ACTIVA resaltada en blanco. El clic sobre la opcion YA activa lo neutraliza video-fit.js (si no, la desactivaria). */ #wrapper.mw1-fit #video-options.toggled #modes > div { display: flex; align-items: center; margin: 0 !important; padding: 0 !important; } /* Los contenedores del tema traen `#rotation { width:200px }`: el interruptor se estiraba a ese ancho (hueco muerto a la derecha en uno, pastilla cortada en el otro). Con `inline-flex` cada uno mide lo que ocupan sus dos etiquetas. */ #wrapper.mw1-fit #video-options.toggled #modes > div { width: auto !important; margin: 0 !important; } /* Los dos selectores, del MISMO ancho (y cada opcion, media pastilla): asi la barra queda ordenada aunque "Modo oscuro" sea mas largo que "Horizontal". */ #wrapper.mw1-fit #video-options.toggled .bootstrap-switch { display: inline-flex !important; width: 224px !important; min-width: 0 !important; align-self: center; vertical-align: middle !important; margin: 0 !important; padding: 4px !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important; background: rgba(0, 0, 0, .35) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); overflow: hidden; cursor: pointer; } #wrapper.mw1-fit #video-options.toggled .bootstrap-switch .bootstrap-switch-container { width: auto !important; margin-left: 0 !important; transform: none !important; display: flex !important; flex: 1 1 auto !important; /* si no crece, deja un hueco muerto a la derecha */ } /* El "puño" que deslizaba ya no pinta nada. */ #wrapper.mw1-fit #video-options.toggled .bootstrap-switch .bootstrap-switch-label { display: none !important; } #wrapper.mw1-fit #video-options.toggled .bootstrap-switch .bootstrap-switch-handle-on, #wrapper.mw1-fit #video-options.toggled .bootstrap-switch .bootstrap-switch-handle-off { flex: 1 1 0 !important; /* las dos opciones, media pastilla cada una */ width: auto !important; display: block !important; height: 32px !important; padding: 0 10px !important; line-height: 32px !important; text-align: center !important; white-space: nowrap !important; /* "Modo claro" se partia en 2 lineas y se veia "Modo" */ font-size: 13px !important; font-weight: 500 !important; text-shadow: none !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: rgba(255, 255, 255, .55) !important; /* la opcion NO activa: apagada pero legible */ transition: background .18s ease, color .18s ease; } #wrapper.mw1-fit #video-options.toggled .bootstrap-switch .bootstrap-switch-handle-on:hover, #wrapper.mw1-fit #video-options.toggled .bootstrap-switch .bootstrap-switch-handle-off:hover { color: #fff !important; background: rgba(255, 255, 255, .08) !important; } /* La opcion ACTIVA: pastilla blanca con texto oscuro. */ #wrapper.mw1-fit #video-options.toggled .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on, #wrapper.mw1-fit #video-options.toggled .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off { background: #fff !important; color: #16161c !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); } /* Volumen: barra fina con el relleno y el tirador claros. */ #wrapper.mw1-fit #video-options.toggled #volume-slider .ui-slider-range { background: rgba(255, 255, 255, .85) !important; border-radius: 99px !important; } /* El tirador: jQuery UI lo saca media anchura fuera de la barra (`margin-left:-.6em`), y con el volumen a cero se veia como un PUNTO suelto flotando a un lado del panel. */ #wrapper.mw1-fit #video-options.toggled #volume-slider .ui-slider-handle { top: -5px !important; margin-left: 0 !important; width: 16px !important; height: 16px !important; border: 0 !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .5) !important; } /* El engranaje: primero de la fila (ya no absoluto, va en el flujo como los demas). */ #wrapper.mw1-fit #video-options.toggled #toggle-options { order: 0; position: static !important; width: 44px !important; height: 44px !important; line-height: 44px !important; display: flex !important; align-items: center; justify-content: center; font-size: 20px !important; background: rgba(255, 255, 255, .08) !important; color: #fff !important; border-radius: 12px !important; } #wrapper.mw1-fit #video-options.toggled #toggle-close-options { width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 18px !important; background: transparent !important; color: rgba(255, 255, 255, .7) !important; margin-left: auto !important; } /* Botones PANTALLA COMPLETA / VOLVER dentro del panel de configuracion. */ #wrapper.mw1-fit #video-options.toggled .cfg-btn { order: 5; flex: 0 0 auto !important; width: 44px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; color: #fff !important; cursor: pointer; float: none !important; margin: 0 !important; position: static !important; background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: background .15s ease, border-color .15s ease; } #wrapper.mw1-fit #video-options.toggled .cfg-btn:hover { background: rgba(255, 255, 255, .18) !important; border-color: rgba(255, 255, 255, .28) !important; } /* El icono de PANTALLA COMPLETA flotante ya no se usa (ahora es boton del panel). */ #wrapper.mw1-fit #toggle-screen { display: none !important; } /* ENGRANAJE CERRADO: misma altura que el panel abierto (84px), no mas grande, y como INICIO del panel. */ #wrapper.mw1-fit #section-toggle-sidebar { height: 84px !important; } #wrapper.mw1-fit #video-options:not(.toggled) #toggle-options { height: 84px !important; line-height: 84px !important; width: 62px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 21px !important; color: #fff !important; background: rgba(18, 18, 22, .78) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, .14) !important; border-left: 0 !important; border-radius: 0 16px 16px 0 !important; box-shadow: 0 14px 44px rgba(0, 0, 0, .5); } /* ---------- El panel en PANTALLA ALTA (TV vertical, movil, tablet) ---------- En fila no cabe y envolvia en dos columnas: los controles quedaban revueltos. Aqui se apila en COLUMNA, sin envolver, y todos los controles al mismo ancho para que quede una lista ordenada. (En el TV rotado esa columna se lee como una fila.) */ #wrapper.mw1-fit.mw1-portrait #video-options.toggled { flex-direction: column !important; flex-wrap: nowrap !important; align-items: center; justify-content: flex-start; gap: 14px !important; width: max-content !important; max-width: none !important; padding: 18px 16px !important; border-radius: 16px; border-left: 1px solid rgba(255, 255, 255, .14); } #wrapper.mw1-fit.mw1-portrait #video-options.toggled #audio-select, #wrapper.mw1-fit.mw1-portrait #video-options.toggled #btnCapturar, #wrapper.mw1-fit.mw1-portrait #video-options.toggled #modes, #wrapper.mw1-fit.mw1-portrait #video-options.toggled #moreoptions { width: 220px !important; justify-content: center; } #wrapper.mw1-fit.mw1-portrait #video-options.toggled #modes, #wrapper.mw1-fit.mw1-portrait #video-options.toggled #moreoptions { flex-direction: column; align-items: center; gap: 12px; } #wrapper.mw1-fit.mw1-portrait #video-options.toggled #volume-slider { width: 180px !important; } #wrapper.mw1-fit.mw1-portrait #video-options.toggled #toggle-close-options { margin: 0 !important; align-self: flex-end; } /* ---------- Barras BAJAS (720p): sitio para los eventos ---------- Con 720px de alto, entre el finado, el QR y el logo no le quedaba hueco al evento y se le comia la linea del icono + titulo. Se aprieta todo lo demas. */ @media (max-height: 800px) { #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #user-info { padding: 1.4vh 10px 1vh !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #qr-info { padding: 12px 12px !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper #qr-info div.qr-title { padding: 10px 6px 0 !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #brand-info { min-height: 84px; padding: 4px !important; } #wrapper.mw1-fit.mw1-fit.mw1-fit:not(.mw1-portrait) #sidebar-wrapper > #brand-info #brand_image_container, #wrapper.mw1-fit.mw1-fit.mw1-fit #sidebar-wrapper > #brand-info img { max-height: 78px !important; } } /* ============================================================================= "Powered by Tellmebye": pastilla de cristal esmerilado ----------------------------------------------------------------------------- El logo flota sobre el pase, asi que por detras le puede pasar una foto blanca, una negra o cualquier cosa. En vez de una mancha borrosa (que ademas se notaba), se le da forma de BADGE: una pastilla con desenfoque del fondo (`backdrop-filter`), un tinte propio, borde fino y sombra. El tinte es lo que garantiza el contraste pase lo que pase por debajo; el desenfoque + la saturacion es lo que hace que no parezca pegada. En MODO OSCURO el logo es claro -> pastilla oscura. En MODO CLARO video.js cambia el logo por su version oscura -> pastilla clara. ============================================================================= */ #wrapper.mw1-fit #tmblogo { display: inline-flex !important; align-items: center; /* Todo el badge escala con la resolucion (`--mw1-brand`: 1 a 1080p, 1.33 en 2K, 2 en 4K). Antes se quedaba clavado en 208x33px y se veia enano en 4K. */ gap: calc(8px * var(--mw1-brand, 1)); padding: calc(8px * var(--mw1-brand, 1)) calc(16px * var(--mw1-brand, 1)) !important; border-radius: 999px; font-size: calc(12px * var(--mw1-brand, 1)) !important; letter-spacing: .02em; line-height: 1; color: rgba(255, 255, 255, .92); background: rgba(10, 10, 14, .26); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); border: 0 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .22); text-shadow: none; transition: background .25s ease, box-shadow .25s ease; } /* Sitio del badge en el TV (no en movil: ahi el tema ya lo coloca aparte). HORIZONTAL: 50px mas arriba y 50px mas a la derecha que el tema (top 100/right 125). */ @media (min-width: 1200px) { /* El borde derecho del badge cae justo bajo la X de la barra de iconos (esa X termina a 30px del borde de la pantalla). */ #wrapper.mw1-fit:not(.mw1-portrait) #tmblogo { top: 50px !important; right: 30px !important; } } /* VERTICAL (TV girado): 50px mas arriba. */ #wrapper.mw1-fit.vertical #tmblogo { top: 50px !important; } /* MOVIL Y TABLET APAISADOS: ahi el tema esconde la barra y el pase ocupa toda la pantalla, con la condolencia a la derecha. El badge (que el tema pone arriba a la izquierda) caia JUSTO ENCIMA de la primera linea del texto. Se baja a la esquina de abajo, que esta libre. */ @media (max-width: 1199px) and (orientation: landscape) { #wrapper.mw1-fit:not(.mw1-portrait) #tmblogo { top: auto !important; bottom: 16px !important; left: 16px !important; right: auto !important; } } /* +3% (dedos del isotipo) y luego +5% en las dos orientaciones: 16 -> 16.5 -> 17.3px. */ #wrapper.mw1-fit #tmblogo img { height: calc(17.3px * var(--mw1-brand, 1)) !important; width: auto !important; max-width: none !important; display: block; filter: none; } /* MODO CLARO: el logo pasa a su version oscura (tellmebye3.png), asi que la pastilla se vuelve clara. Mismo badge, colores invertidos. */ #wrapper.mw1-fit.white #tmblogo { color: rgba(20, 20, 26, .88); background: rgba(255, 255, 255, .40); box-shadow: 0 10px 30px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .10); } /* TV VERTICAL EN MODO CLARO: la caja de eventos se oscurece al 50% (lo hace video-fit.js), asi que su texto tiene que ir en BLANCO; en oscuro sobre oscuro no se leia. */ #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait.white #sidebar-wrapper #event-info .event, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait.white #sidebar-wrapper #event-info .event p, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait.white #sidebar-wrapper #event-info .event span, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait.white #sidebar-wrapper #event-info .event i, #wrapper.mw1-fit.mw1-fit.mw1-fit.mw1-portrait.white #sidebar-wrapper #event-info .event .event_title { color: #fff !important; } /* ---------- Modo claro (.white): escenario blanco -> condolencia en oscuro ---------- */ #wrapper.mw1-fit.white .mw1-cap .pesame-name, #wrapper.mw1-fit.white .mw1-cap .pesame-text { color: #2b2b2b; } /* MODO CLARO (.white, interruptor del panel): la BARRA LATERAL queda sobre fondo claro, asi que su texto (que en oscuro va en blanco) tiene que ir OSCURO para leerse: nombre, fechas, evento y titulo del QR. En OSCURO el escenario y el ambiente son negros y el texto vuelve a blanco (regla del tema). En VERTICAL (TV) no aplica -> :not(.mw1-portrait). El `.qr-title` del tema lleva `color:#colorTexto3 !important`, por eso aqui se sube especificidad + !important. */ #wrapper.mw1-fit.white:not(.mw1-portrait) #sidebar-wrapper #user-info .user-name, #wrapper.mw1-fit.white:not(.mw1-portrait) #sidebar-wrapper #user-info .user-date, #wrapper.mw1-fit.white:not(.mw1-portrait) #sidebar-wrapper #event-info .event, #wrapper.mw1-fit.white:not(.mw1-portrait) #sidebar-wrapper #event-info .event p, #wrapper.mw1-fit.white:not(.mw1-portrait) #sidebar-wrapper #event-info .event span, #wrapper.mw1-fit.white:not(.mw1-portrait) #sidebar-wrapper #event-info .event i, #wrapper.mw1-fit.white:not(.mw1-portrait) #sidebar-wrapper #event-info .event .event_title, #wrapper.mw1-fit.white:not(.mw1-portrait) #sidebar-wrapper #qr-info .qr-title { color: #2b2b2b !important; }