/** * Radio&TV Indoor 3.0 — overlays do display. * * Complementa o rtvi-public.css. Cobre o letreiro de notícias (que deixou * de usar ), o widget de previsão do tempo e a rotação da tela. */ /* ---------------- letreiro ---------------- */ .rtvi-letreiro { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: flex; align-items: center; gap: 14px; padding: 10px 0; overflow: hidden; } .rtvi-letreiro .newsfeed-logo { flex: 0 0 auto; max-height: 46px; width: auto; margin-left: 14px; } .rtvi-letreiro-janela { flex: 1 1 auto; overflow: hidden; position: relative; } .rtvi-letreiro-trilha { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation-name: rtvi-correr; animation-timing-function: linear; animation-iteration-count: infinite; /* a duração vem inline, calculada a partir da "velocidade" do canal */ } .rtvi-letreiro-direita .rtvi-letreiro-trilha { animation-name: rtvi-correr-direita; } .rtvi-letreiro-item { padding-right: 3.5rem; } @keyframes rtvi-correr { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes rtvi-correr-direita { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* Numa TV ninguém pede "reduzir movimento", mas se o sistema pedir, o letreiro para em vez de piscar. */ @media (prefers-reduced-motion: reduce) { .rtvi-letreiro-trilha { animation: none; } } /* ---------------- previsão do tempo ---------------- */ .rtvi-tempo { display: inline-flex; align-items: center; gap: .5rem; line-height: 1.1; } .rtvi-tempo-icone { font-size: 1.9em; line-height: 1; } .rtvi-tempo-temp { font-size: 1.6em; font-weight: 700; } .rtvi-tempo-texto { display: flex; flex-direction: column; font-size: .78em; opacity: .9; } .rtvi-tempo-cidade { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } /* ---------------- tela girada ---------------- */ body.rtvi-girado { transform: rotate(90deg); transform-origin: 50% 50%; } /* ================================================================= * Layouts da tela (3.2) * * Tudo por CSS e variáveis. O motor de slides não é tocado: as faixas * já eram position:fixed, então basta reposicioná-las e reservar o * espaço do palco com inset. * * Variáveis vindas do canal (impressas no ): * --rtvi-topo altura da faixa superior * --rtvi-rodape altura do letreiro * --rtvi-lateral largura da coluna * ================================================================= */ body[data-rtvi-layout] { --rtvi-topo: 12vh; --rtvi-rodape: 12vh; --rtvi-lateral: 22vw; --rtvi-logo: 8vh; --rtvi-escala-relogio: 1; --rtvi-escala-tempo: 1; background: #000; } /* O palco dos slides vira uma caixa posicionável. */ body[data-rtvi-layout]:not([data-rtvi-layout="sobreposto"]) .tvindoor-display { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } /* ---------- barras: topo e letreiro com espaço próprio ---------- */ body[data-rtvi-layout="barras"] .tvindoor-display, body[data-rtvi-layout="vertical-barras"] .tvindoor-display { top: var(--rtvi-topo); bottom: var(--rtvi-rodape); } body[data-rtvi-layout="barras"] .widgets, body[data-rtvi-layout="vertical-barras"] .widgets { height: var(--rtvi-topo); display: flex; align-items: center; padding: 0 2vw; } body[data-rtvi-layout="barras"] .rtvi-letreiro, body[data-rtvi-layout="vertical-barras"] .rtvi-letreiro { height: var(--rtvi-rodape); padding: 0; } /* ---------- coluna lateral ---------- */ body[data-rtvi-layout="lateral-dir"] .tvindoor-display { right: var(--rtvi-lateral); bottom: var(--rtvi-rodape); } body[data-rtvi-layout="lateral-esq"] .tvindoor-display { left: var(--rtvi-lateral); bottom: var(--rtvi-rodape); } body[data-rtvi-layout="lateral-dir"] .widgets, body[data-rtvi-layout="lateral-esq"] .widgets { top: 0; bottom: var(--rtvi-rodape); width: var(--rtvi-lateral); height: auto; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 3vh 1vw; gap: 2vh; } body[data-rtvi-layout="lateral-dir"] .widgets { left: auto; right: 0; } body[data-rtvi-layout="lateral-esq"] .widgets { left: 0; right: auto; } body[data-rtvi-layout="lateral-dir"] .widgets > div, body[data-rtvi-layout="lateral-esq"] .widgets > div { width: 100%; text-align: center; } body[data-rtvi-layout="lateral-dir"] .rtvi-letreiro, body[data-rtvi-layout="lateral-esq"] .rtvi-letreiro { height: var(--rtvi-rodape); padding: 0; } /* ---------- vertical com informações no topo (totem) ---------- */ body[data-rtvi-layout="vertical-topo"] .tvindoor-display { top: var(--rtvi-topo); bottom: var(--rtvi-rodape); } body[data-rtvi-layout="vertical-topo"] .widgets { height: var(--rtvi-topo); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.5vh; padding: 2vh 3vw; } body[data-rtvi-layout="vertical-topo"] .widgets > div { width: 100%; text-align: center; } body[data-rtvi-layout="vertical-topo"] .rtvi-letreiro { height: var(--rtvi-rodape); padding: 0; } /* ---------- tamanhos dos elementos ---------- */ body[data-rtvi-layout] .widget-logo { height: var(--rtvi-logo); width: auto; max-width: 100%; object-fit: contain; } body[data-rtvi-layout] .date-time-container { font-size: calc(1em * var(--rtvi-escala-relogio)); } body[data-rtvi-layout] .rtvi-tempo { font-size: calc(1em * var(--rtvi-escala-tempo)); } /* 3.21: ajuste por canal, incluindo respostas AJAX do motor clássico. */ [data-rtvi-image-fit] .tvindoor-slide-background-image figure img, [data-rtvi-image-fit] .tvindoor-slide-background-default figure img, [data-rtvi-image-fit] .tvindoor-slide-pdf figure img { object-fit:contain!important; object-position:center!important; } [data-rtvi-image-fit="cover"] .tvindoor-slide-background-image figure img, [data-rtvi-image-fit="cover"] .tvindoor-slide-background-default figure img, [data-rtvi-image-fit="cover"] .tvindoor-slide-pdf figure img { object-fit:cover!important; } [data-rtvi-image-fit="scale-down"] .tvindoor-slide-background-image figure img, [data-rtvi-image-fit="scale-down"] .tvindoor-slide-background-default figure img, [data-rtvi-image-fit="scale-down"] .tvindoor-slide-pdf figure img { object-fit:scale-down!important; }