/* Palco fixo 1280x720 em px absoluto, escalado por transform no main.ts. Piso: Chromium 38. */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; } html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* [r92] dono (3/11, celular): o aperto longo marcava texto/imagem "como se fosse uma página"; o app não tem nada para copiar */ body { font-family: Helvetica, Arial, sans-serif; color: #d8e1ec; } #palco { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: hidden; background: #0e1b2e; -webkit-transform-origin: 0 0; transform-origin: 0 0; } .tela { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; } /* Catálogo */ /* [r67] servindo a cópia local (painel fora): rótulo discreto depois do nome da revenda, zero nó */ html.copia .catalogo .logo:after { content: ' \00B7 lista guardada'; color: #8fa3bd; font-weight: normal; font-size: 14px; } .catalogo .logo { position: absolute; left: 96px; top: 18px; height: 40px; line-height: 40px; font-size: 22px; font-weight: bold; color: #ffffff; width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .relogio { position: absolute; right: 40px; top: 18px; height: 40px; line-height: 40px; font-size: 24px; color: #ffffff; } .secao { position: absolute; left: 96px; top: 80px; height: 30px; line-height: 30px; font-size: 18px; color: #c3cfdd; } /* [r25b] sem fundo: o fundo do app já basta (dono); só mais claro */ .catalogo .paginas { position: absolute; left: 1030px; top: 80px; width: 200px; height: 30px; line-height: 30px; text-align: right; font-size: 14px; color: #8fa3bd; } .aviso { position: absolute; left: 85px; top: 340px; width: 1110px; text-align: center; font-size: 22px; color: #8fa3bd; } .linha { position: absolute; left: 85px; width: 1110px; height: 270px; } /* [r90] grade 5 × 214 em passo 224, centrada entre o ▦ (termina em 56; 68 no celular) e o ⇅ (começa em 1224; 1212): a r89 deixou o ⇅ colado no último card */ .catalogo.aba-grade .secao { left: 85px; } /* [r90] rótulo e contador alinhados com a grade */ .catalogo.aba-grade .paginas { left: 995px; } .catalogo.aba-canais .paginas { left: 96px; top: 660px; width: 572px; height: 26px; line-height: 26px; text-align: center; } /* [r121] embaixo da lista de canais, como nas categorias (dono, 5/11: "muito mais visível que lá em cima") */ .card { position: absolute; top: 0; width: 214px; height: 270px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #132640; border: 2px solid transparent; border-radius: 0; } /* [r21] canto quadrado */ .card.focused { background: #2f6fb5; } /* [r19] título em até 2 linhas (nome inteiro, nunca cortado com "…"); a capa desce 10 px, a nota 6 px */ .card .titulo { position: absolute; left: 10px; top: 6px; width: 190px; height: 40px; line-height: 20px; font-size: 15px; text-align: center; overflow: hidden; color: #ffffff; } .card .capa { position: absolute; left: 43px; top: 50px; width: 124px; height: 186px; background: #0e1b2e; } .card .nota { position: absolute; left: 10px; top: 240px; width: 190px; height: 24px; line-height: 24px; font-size: 15px; text-align: center; color: #8fa3bd; } .card.focused .nota { color: #d8e1ec; } .card.fav:after { content: '\2605'; position: absolute; right: 10px; top: 240px; height: 24px; line-height: 24px; font-size: 16px; color: #f2c14e; } .rodape { position: absolute; left: 0; top: 686px; width: 1280px; height: 30px; line-height: 30px; text-align: center; font-size: 15px; color: #8fa3bd; white-space: pre; } /* [r122] setas dos rodapés num SVG só (◀ ▶ ▲ ▼ iguais, só a direção muda; dono, 5/11): .setas = as 4; .lados = ◀ ▶ (os 30 px da esquerda); .vertical = ▲ ▼ (os 32 px da direita) */ .rodape b.setas { display: inline-block; width: 72px; height: 16px; vertical-align: -2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='16' viewBox='0 0 72 16' fill='%23d8e1ec'%3E%3Cpath d='M0 8L13 1v14zM17 1l13 7-13 7zM40 15l7-13 7 13zM58 1h14l-7 13z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 center; background-size: 72px 16px; } .rodape b.setas.lados { width: 30px; } .rodape b.setas.vertical { width: 32px; background-position: -40px center; } /* [A r9] Trilho de ícones x 0–72, ícones 40 px centrados em x 36; desenho = SVG nosso no fundo (zero nó a mais) */ .trilho { position: absolute; left: 0; top: 0; width: 72px; height: 720px; background: #0a1524; } .icone { position: absolute; left: 16px; width: 40px; height: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid transparent; border-radius: 0; background-repeat: no-repeat; background-position: center; } .icone.categorias { top: 370px; } /* [r47] o único do trilho; [r48c] no meio do conteúdo (lista/grade 120→660: centro 390) */ .icone.selecionada { background-color: #132640; } /* [r89] ⇅ Ordenar à direita (espelho do ▦ em x 1224), só em Filmes e Séries; .lado = plano de navegação dele (0 nó visível) */ .lado { position: absolute; left: 0; top: 0; width: 0; height: 0; } .icone.ordenar { left: 1224px; top: 370px; display: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238fa3bd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20V4M4 8l4-4 4 4M16 4v16M12 16l4 4 4-4'/%3E%3C/svg%3E"); } .icone.ordenar.focused { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20V4M4 8l4-4 4 4M16 4v16M12 16l4 4 4-4'/%3E%3C/svg%3E"); } .catalogo.aba-grade .icone.ordenar { display: block; } /* [r42] celular (html.toque): ícones do trilho maiores para o dedo (as abas do topo saíram na r71); as faixas fora do palco 16:9 na cor do app */ html.toque, html.toque body { background: #0a1524; } /* [r42b] uma cor só fora do catálogo (carregando, login): o palco fica na cor das faixas; o catálogo pinta o fundo dele (e solta o fundo quando o vídeo do mini está atrás: o furo precisa ver através) */ html.toque #palco { background: transparent; } /* [r59] a camada da contracapa fica por baixo do palco */ /* z-index 0 = contexto próprio: a contracapa do Início (:before/:after com z-index -1) fica por cima deste fundo */ html.toque .catalogo { background: #0e1b2e; z-index: 0; } html.toque .catalogo.abrindo, html.toque.video .catalogo { background: transparent; } html.toque .icone { left: 4px; width: 64px; height: 64px; background-size: 44px 44px; } /* [r82] 64 px: o dono achou pequeno */ html.toque .icone.categorias { top: 358px; } /* [r48c] centro 390 */ html.toque .icone.ordenar { left: 1212px; top: 358px; } /* [r89] espelho do ▦ (64 px, centro 390) */ html.toque .relogio { top: 12px; height: 52px; line-height: 52px; } .icone.focused { background-color: #2f6fb5; } .icone.categorias { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238fa3bd' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1'/%3E%3C/svg%3E"); } .icone.categorias.focused { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1'/%3E%3C/svg%3E"); } /* [r27c] véus em preto (4,7,12), não no azul do fundo: o dono quer o título e o seletor mais destacados /* [B r9] Início: contracapa atrás de tudo (z-index −1 no contexto do #palco), degradê estático só na metade esquerda (o ::before do catálogo: zero nó), destaque em x 96 / y 110 e 2 faixas (fileiras) de 8 pôsteres 120×180 em passo 136 */ /* [r108, experimento] Como a foto do dono: a contracapa NÃO é o fundo inteiro — um quadro 16:9 de 780×439 inteiro no canto de cima à direita (x 500 → 1280), degradê só na borda esquerda (:before) e na base (:after), fundindo com o fundo #0e1b2e do palco; as fileiras ficam sobre o fundo. Barra de cards em cima (.menu), logo e relógio na mesma linha. O .catalogo NÃO pode ter fundo próprio: a de z-index −1 pinta antes dos fundos dos blocos do mesmo contexto e sumiria atrás dele. */ .catalogo.aba-inicio .logo { left: 64px; top: 26px; width: 224px; } /* [r117] até a faixa do menu (300) */ .catalogo.aba-inicio .relogio { top: 26px; } .contracapa { position: absolute; left: 508px; top: 0; width: 772px; height: 431px; z-index: -1; -webkit-transition: opacity 250ms; transition: opacity 250ms; } /* [r11] troca suave: opacidade 0 → src novo → 1. [r108f] 8 px menor que o quadro (500/780/439) nas bordas internas (508 → 1280, 0 → 431; no toque até 1272, r108g: na TV a direita é a borda da tela e o recorte virava uma faixa escura): o WebView desenha 1 px da imagem ALÉM da caixa ao escalar o palco, fora do degradê (dono: "marquinha" na borda direita no celular); assim a borda da imagem fica sob o trecho sólido */ .catalogo.aba-inicio:before { content: ''; position: absolute; left: 500px; top: 0; width: 780px; height: 439px; /* [r108] borda esquerda do quadro */ background: -webkit-linear-gradient(left, #0e1b2e 0, #0e1b2e 8px, rgba(14, 27, 46, 0.85) 90px, rgba(14, 27, 46, 0) 300px); background: linear-gradient(to right, #0e1b2e 0, #0e1b2e 8px, rgba(14, 27, 46, 0.85) 90px, rgba(14, 27, 46, 0) 300px); } .catalogo.aba-inicio:after { content: ''; position: absolute; left: 500px; top: 0; width: 780px; height: 439px; z-index: -1; /* [r108] base do quadro */ background: -webkit-linear-gradient(top, rgba(14, 27, 46, 0.35) 0, rgba(14, 27, 46, 0) 90px, rgba(14, 27, 46, 0) 250px, rgba(14, 27, 46, 0.9) 390px, #0e1b2e 431px, #0e1b2e 439px); background: linear-gradient(to bottom, rgba(14, 27, 46, 0.35) 0, rgba(14, 27, 46, 0) 90px, rgba(14, 27, 46, 0) 250px, rgba(14, 27, 46, 0.9) 390px, #0e1b2e 431px, #0e1b2e 439px); } .catalogo.aba-inicio .rodape { background: rgba(5, 11, 20, 0.85); } .catalogo.aba-inicio .rodape:empty { background: transparent; } .dtitulo { position: absolute; left: 64px; top: 100px; width: 640px; height: 72px; line-height: 72px; font-size: 40px; /* [r108] x 64, arte de 72 */ font-weight: bold; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dmeta { position: absolute; left: 64px; top: 180px; width: 640px; height: 26px; line-height: 26px; font-size: 18px; color: #c3cfdd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dsinopse { position: absolute; left: 64px; top: 210px; width: 640px; height: 93px; line-height: 31px; font-size: 23px; color: #d8e1ec; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } /* [r118] reticências na 3ª linha quando continua (dono): line-clamp é do Chromium 6, serve no piso. [r108] 3 linhas; o resto fica na ficha. [r117c] 23 px (era 17): "muito pequena para ler" (dono), 3 linhas de 31 */ .faixas { position: absolute; left: 0; top: 376px; width: 1280px; height: 344px; overflow: hidden; } /* [r108c] 376 + 2×146 = 668: 52 px de folga no pé (no celular com película o nome da 2ª fileira sumia na borda, dono 4/11); [r53] as duas fileiras fixas */ .faixa { position: absolute; left: 64px; width: 1056px; height: 140px; } /* [r108c] x 64 → 1120, alinhada com o título; 26 + cartão 108 + 6 */ .faixa:before { content: attr(data-rotulo); position: absolute; left: 0; top: 0; height: 26px; line-height: 26px; font-size: 19px; font-weight: bold; color: #ffffff; white-space: nowrap; } /* [r108c] cartão 16:9 (192×108) como a foto: contracapa recortada na CDN (até chegar, a capa recortada) e o NOME sobre a imagem, embaixo, num degradê (:before, zero nó); sem ano/nota (já estão na meta do destaque, dono 4/11) e sem arte de título. O foco é a moldura azul em volta do cartão. (r108: bloco embaixo com nome e meta; r27: 256×144 com arte por cima.) */ .poster { position: absolute; top: 28px; width: 192px; height: 108px; } .poster .pcapa { position: absolute; left: 0; top: 0; width: 192px; height: 108px; background: #132640; border-radius: 0; } .poster:before { content: ''; position: absolute; left: 0; top: 58px; width: 192px; height: 50px; z-index: 1; background: -webkit-linear-gradient(top, rgba(5, 12, 24, 0) 0, rgba(5, 12, 24, 0.85) 50px); background: linear-gradient(to bottom, rgba(5, 12, 24, 0) 0, rgba(5, 12, 24, 0.85) 50px); } .poster.focused .pcapa { outline: 4px solid #2f6fb5; } /* [r108d] a moldura na IMAGEM, não no .poster: no .rolo do celular o .poster tem 8 px de borda transparente à direita e a moldura saía do card (dono, 4/11) */ .poster .pnome { position: absolute; left: 8px; top: 84px; width: 176px; height: 20px; line-height: 20px; font-size: 14px; font-weight: bold; overflow: hidden; color: #ffffff; white-space: nowrap; text-overflow: ellipsis; z-index: 1; text-shadow: 0 1px 2px #000000; } .poster.focused .pnome { color: #ffffff; background: transparent; } .poster.fav:after { content: '\2605'; position: absolute; right: 6px; top: 4px; font-size: 16px; color: #f2c14e; } /* Aba Canais [D r14]: lista 10 × 44 px (passo 48) em x 96→668, como o Clouddy; linha = div + img (número no :before, nome = texto da linha); logo numa caixa branca 56×32 com a imagem encaixada (object-fit: Chromium ≥ 31); mini 16:9 em (696,120) 544×306; programação de 5 linhas em y 440 */ .catalogo.aba-canais .secao.segunda { top: 80px; left: 368px; width: 300px; height: 30px; line-height: 30px; text-align: right; } .catalogo.aba-canais .aviso { width: 572px; } .canais { position: absolute; left: 96px; top: 120px; width: 572px; height: 540px; } /* [r29] 10 × 54 */ .canal { position: absolute; left: 0; width: 572px; height: 50px; line-height: 46px; padding: 0 48px 0 140px; font-size: 20px; /* [r29] linha 50, nome 20 */ -webkit-box-sizing: border-box; box-sizing: border-box; background: #132640; border: 2px solid transparent; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .canal.focused { background: #2f6fb5; color: #ffffff; } .canal:before { content: attr(data-num); position: absolute; left: 0; top: 0; width: 56px; height: 46px; line-height: 46px; text-align: center; font-size: 16px; color: #8fa3bd; background: #0b1a2f; } /* [r29] coluna própria do número */ .canal.focused:before { color: #d8e1ec; } .canal .logo { position: absolute; left: 64px; top: 5px; width: 64px; height: 36px; background: #9aa6b4; border-radius: 0; /* [r29] 64×36 */ -o-object-fit: contain; object-fit: contain; } /* cinza médio: logo branca e logo escura aparecem (branco apagava as brancas, dono 24/10) */ .canal.fav:after { content: '\2605'; position: absolute; right: 12px; top: 0; height: 46px; line-height: 46px; font-size: 28px; color: #f2c14e; } /* [r29d] maior ainda (dono) */ /* [r29d] ▶ do canal que está no mini: triângulo em CSS (bordas), sempre azul-claro; com ★ fica à esquerda dela */ .canal .play { display: none; position: absolute; right: 16px; top: 13px; width: 0; height: 0; border-left: 16px solid #9cc3f2; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .canal.tocando .play { display: block; } .canal.tocando.fav .play { right: 54px; } .mini { position: absolute; left: 695px; top: 119px; width: 544px; height: 306px; border: 0; background: #050b14; text-align: center; overflow: hidden; } .mini .logo { display: block; margin: 24px auto 0 auto; max-width: 320px; max-height: 210px; } .mini .estado { position: absolute; left: 0; top: 250px; width: 544px; height: 30px; line-height: 30px; font-size: 16px; color: #8fa3bd; } .epg { position: absolute; left: 696px; top: 440px; width: 544px; height: 216px; } /* [r31] 6 × 36: pé em 656, com o último canal */ .prog { height: 34px; line-height: 34px; margin-bottom: 2px; padding: 0 12px; font-size: 17px; color: #8fa3bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 0; } .prog.agora { color: #ffffff; background-color: #132640; background-image: -webkit-linear-gradient(left, #2a4a75, #2a4a75); background-image: linear-gradient(to right, #2a4a75, #2a4a75); background-repeat: no-repeat; background-size: 0 100%; } /* [r29] a faixa mais clara = fração decorrida (style.backgroundSize em %) */ /* [C r10] O vídeo do mini fica ATRÁS do WebView. Enquanto o mini (ou a tela cheia dele) vive, html.video: a página fica transparente e o fundo do palco é pintado EM VOLTA do quadro pela sombra sólida dele (sem desfoque; z-index −1 = abaixo de todo o resto do palco; 0 nó a mais). O miolo do quadro é o furo por onde o vídeo aparece. */ html.video, html.video body, html.video #palco { background: transparent; } html.video .mini { background: transparent; z-index: -1; box-shadow: 0 0 0 1400px #0e1b2e; } /* [A r10] Favoritos em trilhos Canais · Filmes · Séries (8 nós fixos por trilho; cartão = 2 nós, o nome no ::before) */ .favs { position: absolute; left: 0; top: 120px; width: 1280px; height: 566px; overflow: hidden; } .ftrilho { position: absolute; left: 96px; width: 1088px; height: 276px; } /* [r26c/r28f] nome em 2 linhas + 16 de respiro */ .ftrilho:before { content: attr(data-rotulo); position: absolute; left: 0; top: 0; height: 30px; line-height: 24px; font-size: 20px; color: #ffffff; white-space: nowrap; } .fcard { position: absolute; top: 30px; width: 120px; height: 230px; border-radius: 0; } /* [r26c] capa 180 + nome 2 linhas (186–230) */ .fcard:before { content: attr(data-nome); position: absolute; left: 0; top: 186px; width: 120px; height: 44px; line-height: 22px; font-size: 16px; color: #c3cfdd; text-align: left; overflow: hidden; padding: 0 6px; -webkit-box-sizing: border-box; box-sizing: border-box; } /* [r26c] 16 px, até 2 linhas, como o pôster do Início */ .fcard.focused .fimg { outline: 4px solid #2f6fb5; } /* [r27b] só o quadrinho */ .fcard.focused:before { color: #ffffff; font-weight: bold; } .fcard .fimg { position: absolute; left: 0; top: 0; width: 120px; height: 180px; border-radius: 0; background: #132640; } /* [r36] modo grade (a lupa): filme e série no MESMO card da grade de Filmes/Séries (214×270: nome em cima em 2 linhas, capa 124×186 dentro, nota embaixo, ★ de favorito no pé); 5 por trilho. O canal segue no quadrado do logo. */ .favs.grade .ftrilho:not(.logos) { height: 300px; } .favs.grade .ftrilho:not(.logos) .fcard { width: 214px; height: 270px; background-color: #132640; border: 2px solid transparent; -webkit-box-sizing: border-box; box-sizing: border-box; } .favs.grade .ftrilho:not(.logos) .fcard.focused { background-color: #2f6fb5; } .favs.grade .ftrilho:not(.logos) .fcard:before { left: 10px; top: 6px; width: 190px; height: 40px; line-height: 20px; font-size: 15px; text-align: center; color: #ffffff; padding: 0; } .favs.grade .ftrilho:not(.logos) .fcard .fimg { left: 43px; top: 50px; width: 124px; height: 186px; background: #0e1b2e; } .favs.grade .ftrilho:not(.logos) .fcard.focused .fimg { outline: none; } .favs.grade .ftrilho:not(.logos) .fcard:after { content: attr(data-nota); position: absolute; left: 10px; top: 240px; width: 190px; height: 24px; line-height: 24px; font-size: 15px; text-align: center; color: #8fa3bd; } .favs.grade .ftrilho:not(.logos) .fcard.focused:after { color: #d8e1ec; } .favs.grade .ftrilho:not(.logos) .fcard.fav { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2c14e' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 186px 242px; background-size: 18px 18px; } /* [r36] ★ de favorito no quadrado do canal (pesquisa e Favoritos) */ .ftrilho.logos .fcard.fav:after { content: '\2605'; position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; line-height: 26px; font-size: 16px; text-align: center; color: #f2c14e; background: rgba(5, 12, 24, 0.85); } /* canal: cartão escuro 120×120 com o logo centrado (linha de 120 px, fonte 0: o meio da imagem cai no meio do cartão) */ .ftrilho.logos { height: 216px; } .ftrilho.logos .fcard { height: 120px; background: #9aa6b4; text-align: center; line-height: 120px; font-size: 0; } /* [r14] cinza médio, como na lista de Canais */ .ftrilho.logos .fcard:before { top: 126px; } .ftrilho.logos .fcard.focused { outline: 4px solid #2f6fb5; } /* [r27b] canal: a moldura é a caixa cinza */ .ftrilho.logos .fcard.focused .fimg { outline: none; } .ftrilho.logos .fimg { position: static; width: auto; height: auto; max-width: 104px; max-height: 80px; vertical-align: middle; border-radius: 0; } /* [E r14/r27d] Imagem que falhou: a fica sem src e com .sem-imagem; UM ícone no fundo, centrado, sem repetir (zero nó). Uma telinha com play para filme, série e episódio; uma TV para canal; um bonequinho para o elenco (dono, 26/10). */ .sem-imagem { background-color: #0e1b2e; background-repeat: no-repeat; background-position: center; background-size: 40%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7190' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='19' height='13'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 16.5V21'/%3E%3Cpath d='M10 7.2l5 2.8-5 2.8z' fill='%235d7190' stroke='none'/%3E%3C/svg%3E"); } .canal .logo.sem-imagem, .ftrilho.logos .fimg.sem-imagem, .mini .logo.sem-imagem { background-color: #9aa6b4; background-size: 60%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a4468' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='13'/%3E%3Cpath d='M7.5 2.5L12 7l4.5-4.5'/%3E%3C/svg%3E"); } .ftrilho.logos .fimg.sem-imagem { width: 104px; height: 80px; display: inline-block; } .pessoa .pfoto.sem-imagem { background-color: #132640; background-size: 55%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7190' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E"); } /* [F r14] Carregando: 12 barrinhas 8×24 em passo 12 (144 px), centradas no palco; na ficha, dentro da sinopse */ .barrinhas { position: absolute; left: 568px; top: 348px; width: 144px; height: 24px; } .barra { position: absolute; top: 0; width: 8px; height: 24px; background: #4b5a6b; } .barra.acesa { background: #ffffff; } .sinopse .barrinhas { left: 0; top: 8px; } /* [C r14] Modal de pesquisa: caixa larga com o campo em cima e o teclado do login embaixo (regras do login reaproveitadas) */ .pesquisa .caixa { left: 140px; top: 160px; width: 1000px; height: 190px; } /* [r72] só o campo; o teclado é o de tela cheia (y 396) */ .pesquisa .campo { left: 30px; top: 70px; width: 940px; } /* [r37] sem contornos: nenhum card, caixa, diálogo ou botão tem borda colorida (dono: "parece IA"); o foco é só o azul cheio */ /* Modal de categorias */ .modal { background: rgba(0, 0, 0, 0.6); z-index: 2; } /* [r19] acima dos textos da ficha (que têm z-index 1) */ .caixa { position: absolute; left: 350px; top: 50px; width: 580px; height: 620px; background: #0b1626; border: 0; border-radius: 0; } .caixa .titulo { position: absolute; left: 30px; top: 18px; width: 520px; height: 36px; line-height: 36px; font-size: 22px; color: #ffffff; } .lista { position: absolute; left: 30px; top: 66px; width: 520px; height: 504px; } .opcao { position: absolute; left: 0; width: 520px; height: 50px; line-height: 50px; padding: 0 16px; font-size: 18px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0; border-radius: 0; background: #132640; color: #d8e1ec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* [r38] cada linha num quadro escuro com 6 px de respiro (passo 56), como as linhas de Canais (dono, opção A do mock) */ .opcao.focused { background: #2f6fb5; color: #ffffff; } .caixa .paginas { position: absolute; left: 30px; top: 580px; width: 520px; text-align: center; font-size: 14px; color: #8fa3bd; } .caixa.quadro-temporadas .paginas { top: 18px; height: 36px; line-height: 36px; font-size: 16px; } /* [r27b] no topo, centrado na linha do título (a lista cheia cobria o pé) */ /* [r91] dono (3/11): "tá sobrando muito" — categorias 500 de largura (era 580; nome longo ainda cabe em 408 úteis), o Ordenar num quadro de 400 só do tamanho das 3 opções (258 de altura, centrado), e o login em 460 (abaixo). Tudo pelas classes: .caixa de sempre (580) fica para temporadas, bloqueio etc. */ .modal.categorias .caixa { left: 390px; width: 500px; } .modal.categorias .caixa .titulo, .modal.categorias .lista, .modal.categorias .opcao, .modal.categorias .paginas { width: 440px; } .modal.ordem .caixa { left: 440px; top: 231px; width: 400px; height: 258px; } .modal.ordem .caixa .titulo, .modal.ordem .lista, .modal.ordem .opcao { width: 340px; } .modal.ordem .paginas { display: none; } /* [r121] quantidade de itens no fim da linha da categoria (data-qtd), apagada; a linha reserva 70 px para ela */ .modal.categorias .opcao { padding-right: 70px; } .modal.categorias .opcao:after { content: attr(data-qtd); position: absolute; right: 16px; top: 0; font-size: 15px; color: #8fa3bd; } .modal.categorias .opcao.focused:after { color: #dbe7f5; } /* [r123] categoria bloqueada: cadeado antes da quantidade, no lugar do texto "· bloqueada" (dono, 5/11, como no Clouddy) */ .modal.categorias .opcao.bloqueada:before { content: ''; position: absolute; right: 62px; top: 15px; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%23e6c15a'%3E%3Cpath d='M4 9h12v10H4z'/%3E%3Cpath d='M6.5 9V6.5a3.5 3.5 0 0 1 7 0V9' fill='none' stroke='%23e6c15a' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 20px 20px; } /* Ficha [r15]: contracapa ao fundo como PRIMEIRO filho sem z-index (o z-index −1 dentro de uma tela com z-index 0 fazia o WebView compor várias camadas de tela inteira: +116 MB medidos no tv21; assim fica +41 MB), véu da esquerda num único :after por cima da imagem (e, na série, também o degradê inferior: dois fundos no mesmo pseudo-elemento), e os blocos de texto com z-index 1 para ficarem acima do véu. */ .ficha { background: #0e1b2e; } .ficha .contracapa { z-index: auto; } /* [r108d] a contracapa da ficha é o MESMO quadro do Início (780×439 no canto, x 500 → 1280; dono 4/11: "igual na home"): borda esquerda e base num :after só (dois fundos; ele pinta depois da , um :before pintaria antes). Série e filme iguais. (r27c: véu de tela inteira sobre a contracapa 1280×720.) */ .ficha:after { content: ''; position: absolute; left: 500px; top: 0; width: 780px; height: 439px; background: -webkit-linear-gradient(left, #0e1b2e 0, #0e1b2e 8px, rgba(14, 27, 46, 0.85) 90px, rgba(14, 27, 46, 0) 300px), -webkit-linear-gradient(top, rgba(14, 27, 46, 0.35) 0, rgba(14, 27, 46, 0) 90px, rgba(14, 27, 46, 0) 250px, rgba(14, 27, 46, 0.9) 390px, #0e1b2e 431px, #0e1b2e 439px); background: linear-gradient(to right, #0e1b2e 0, #0e1b2e 8px, rgba(14, 27, 46, 0.85) 90px, rgba(14, 27, 46, 0) 300px), linear-gradient(to bottom, rgba(14, 27, 46, 0.35) 0, rgba(14, 27, 46, 0) 90px, rgba(14, 27, 46, 0) 250px, rgba(14, 27, 46, 0.9) 390px, #0e1b2e 431px, #0e1b2e 439px); } .ficha .titulo, .ficha .meta, .ficha .sinopse, .ficha .acoes, .ficha .temporadas, .ficha .episodios, .ficha .vazio, .ficha .paginas { z-index: 1; } .ficha .titulo { position: absolute; left: 96px; top: 96px; width: 640px; height: 48px; line-height: 48px; font-size: 40px; font-weight: bold; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* [r19] título longo não corta: 28 px até 44 letras; acima, 22 px em duas linhas na mesma caixa de 48 px */ .ficha .titulo.longo, .dtitulo.longo { font-size: 28px; } .ficha .titulo.enorme, .dtitulo.enorme { font-size: 22px; line-height: 24px; white-space: normal; } .ficha .meta { position: absolute; left: 96px; top: 150px; width: 640px; height: 26px; line-height: 26px; font-size: 18px; color: #c3cfdd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ficha .sinopse { position: absolute; left: 96px; top: 186px; width: 640px; height: 135px; font-size: 19px; /* [r21] maior; [r27] 5 linhas */ line-height: 27px; color: #d8e1ec; overflow: hidden; } .acoes { position: absolute; left: 96px; top: 340px; height: 56px; white-space: nowrap; } /* [r27] abaixo das 5 linhas */ .acoes .botao { display: inline-block; margin-right: 16px; } .botao { width: 220px; height: 56px; line-height: 52px; text-align: center; font-size: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; background: rgba(19, 38, 64, 0.85); border: 2px solid transparent; border-radius: 0; } .botao.focused { background: #2f6fb5; color: #ffffff; } /* [B r10] ☆ Favoritar / ★ Favoritado (estrela amarela quando ligado). [r27] a ★ antes da meta saiu (dono: confunde com a nota) */ .botao.fav.ligado .estrela { color: #f2c14e; } /* [r18] arte de título do TMDB: dentro do .titulo, encostada embaixo à esquerda; o texto fica transparente quando ela carrega */ .ficha .titulo .logo { display: none; position: absolute; left: 0; bottom: 0; width: 480px; height: 96px; object-fit: contain; object-position: left bottom; } .ficha .titulo.esperando { visibility: hidden; } /* [r18b] até saber se vem arte ou texto */ .ficha .titulo.com-logo { color: transparent; overflow: visible; } /* a arte sobe 48 px acima da caixa do título */ .ficha .titulo.com-logo .logo { display: block; } /* Ficha de série [r15]: tudo numa tela só — sinopse de 3 linhas, Favorito, temporadas e episódios (6 nós fixos) na metade de baixo, sobre o degradê inferior (no :after da ficha) */ /* [r27] série: topo mais apertado (título 72, meta 126, sinopse 2 linhas, botões de 48 px) para caber o elenco embaixo do trilho */ .serie .titulo { top: 72px; } .serie .meta { top: 126px; } .serie .sinopse { top: 158px; height: 54px; } .serie .acoes { top: 226px; height: 48px; } .serie .acoes .botao { height: 48px; line-height: 44px; } .temporadas { position: absolute; left: 96px; top: 288px; width: 800px; height: 40px; white-space: nowrap; overflow: hidden; } /* [r27] um botão só */ .temporada.unica:after { content: ' \25BE'; } /* ▾: OK abre o quadro */ .temporada { display: inline-block; height: 40px; line-height: 36px; padding: 0 18px; margin-right: 8px; font-size: 18px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid transparent; border-radius: 0; background: rgba(19, 38, 64, 0.85); color: #8fa3bd; } .temporada.selecionada { color: #ffffff; background: #1b3d66; } /* [r16/r25/r26] entre o tom dos botões e o do foco: dá para ver qual está selecionada com o foco nos episódios */ .temporada.focused { color: #ffffff; background: #2f6fb5; } .episodios { position: absolute; left: 96px; top: 342px; width: 1088px; height: 176px; } /* [r27] */ /* [r17] trilho: 5 cards de 208 px em passo 220; foto 16:9 pela CDN com borda que acende no foco; medalhão no :before (acima da foto); nome em branco, duração em cinza; a sinopse do episódio focado numa linha própria abaixo */ .episodio { position: absolute; top: 0; width: 208px; height: 176px; } .episodio .foto { position: absolute; left: 0; top: 0; width: 208px; height: 117px; border-radius: 0; background: #132640; object-fit: cover; -webkit-box-sizing: border-box; box-sizing: border-box; border: 3px solid transparent; } .episodio:before { content: attr(data-num); position: absolute; left: 10px; top: 10px; width: 28px; height: 28px; line-height: 28px; border-radius: 0; background: #2f6fb5; color: #ffffff; text-align: center; font-size: 14px; font-weight: bold; z-index: 1; } .episodio.focused:before { background: #ffffff; color: #2f6fb5; } .episodio.focused .foto { outline: 4px solid #2f6fb5; border-color: transparent; } /* [r27b] só o quadrinho da foto */ .episodio .nome { position: absolute; left: 0; top: 124px; width: 208px; font-size: 17px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d8e1ec; } .episodio.focused .nome { color: #ffffff; font-weight: bold; } .episodio.focused .duracao { color: #d8e1ec; } .episodio .duracao { position: absolute; left: 0; top: 150px; width: 208px; font-size: 14px; line-height: 20px; color: #8fa3bd; } .episodio .foto.sem-imagem { background-size: 30%; } .ficha .vazio { position: absolute; left: 96px; top: 342px; font-size: 18px; color: #8fa3bd; } .ficha .paginas { position: absolute; left: auto; right: 96px; top: 288px; width: auto; height: 40px; line-height: 40px; text-align: right; padding: 0 10px; background: rgba(5, 12, 24, 0.6); color: #c3cfdd; /* [r25/r25b] fundo só do tamanho do texto, encostado à direita */ font-size: 15px; color: #8fa3bd; } /* [r17] "N episódios · p / P" à direita da linha das temporadas */ /* Player (stub do navegador) */ .player { background: #000; } .player .titulo { position: absolute; left: 80px; top: 300px; width: 1120px; text-align: center; font-size: 30px; color: #ffffff; } .player .url { position: absolute; left: 80px; top: 360px; width: 1120px; text-align: center; font-size: 13px; color: #8fa3bd; word-wrap: break-word; } .player .dica { position: absolute; left: 80px; top: 640px; width: 1120px; text-align: center; font-size: 15px; color: #8fa3bd; } /* [r72] Login na caixa central (a mesma das categorias): rótulo em cima de cada campo, Entrar cheio, Criar conta e Esqueci a senha lado a lado. Com o teclado aberto (.teclando) a caixa sobe para os 3 campos ficarem acima de y 396: o campo em edição nunca fica atrás do teclado (REGRAS §7). */ /* [r114] marca = logo (fundo, PNG do dono) + "Vi4K Player" num nó só, centrada no palco */ .marca { position: absolute; left: 470px; top: 36px; width: 400px; height: 72px; line-height: 72px; padding-left: 88px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; font-size: 40px; font-weight: bold; letter-spacing: 2px; color: #ffffff; white-space: nowrap; background-repeat: no-repeat; background-position: 0 0; background-size: 72px 72px; } .login .caixa { left: 410px; top: 130px; width: 460px; height: 500px; } /* [r91] 460 (era 580): "muito larga" (dono) */ .login.teclando .caixa { top: 20px; } .login.teclando .marca, .login.teclando .botao, .login.teclando .erro, .login.teclando .rodape { display: none; } /* só os campos ficam acima do teclado */ .login.teclando .caixa { height: 346px; } .login .caixa .titulo { left: 0; width: 460px; text-align: center; font-size: 24px; } .login .rotulo { position: absolute; left: 30px; width: 400px; height: 22px; line-height: 22px; font-size: 16px; color: #8fa3bd; } .login .rotulo .dica { color: #5d7190; } .campo { position: absolute; left: 80px; width: 440px; height: 56px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #132640; border: 2px solid transparent; border-radius: 0; } .campo .rotulo { position: absolute; left: 14px; top: 3px; height: 16px; line-height: 16px; font-size: 12px; color: #8fa3bd; } .campo .valor { position: absolute; left: 14px; top: 19px; width: 408px; height: 30px; line-height: 30px; font-size: 20px; white-space: nowrap; overflow: hidden; color: #ffffff; } .campo .valor.vazio { color: #5d7190; } .campo.focused { background: #2f6fb5; } .campo.focused .rotulo, .campo.focused .valor.vazio { color: #d8e1ec; } .login .campo { left: 30px; width: 400px; height: 50px; border: 0; } .login .linha-senha .campo { width: 300px; } /* [r119] a senha divide a linha com o botão Ver */ .login .olho { position: absolute; left: 340px; width: 90px; height: 50px; line-height: 50px; text-align: center; font-size: 18px; background: #1c355a; color: #c3cfdd; } .login .olho.focused { background: #2f6fb5; color: #ffffff; } .login .olho.disabled { display: none; } .login .campo .valor { left: 16px; top: 0; width: 368px; height: 50px; line-height: 50px; } .login .botao { position: absolute; left: 30px; width: 400px; height: 50px; line-height: 50px; background: #132640; border: 0; } .login .botao.focused, .termos .botao.focused { background: #2f6fb5; color: #ffffff; } /* depois das regras acima (mesma especificidade) */ .login .botao.meio { top: 412px; width: 196px; } .login .botao.meio.dir { left: 234px; } .login .nota { position: absolute; left: 30px; width: 400px; font-size: 16px; line-height: 22px; color: #8fa3bd; } /* [r73] */ .login .nota.disabled, .login .rotulo.disabled, .login .campo.disabled { display: none; } /* [r74] cadastro em 2 passos */ .login .erro { position: absolute; left: 30px; top: 466px; width: 400px; height: 24px; line-height: 24px; text-align: center; font-size: 15px; overflow: hidden; color: #f08a8a; } /* [r72] Teclado em tela cheia embaixo (modelo Clouddy): 4 fileiras de até 11 teclas 100×56 em passo 108×62 e a fileira Aa · 🌐 · espaço · ⌫ · OK. .disabled = fechado (login) ou tecla que sobra no alfabeto atual. */ .teclado { position: absolute; left: 0; top: 396px; width: 1280px; height: 324px; background: #0a1524; } .teclado.disabled { display: none; } .teclado .fileira { position: absolute; left: 0; width: 1280px; height: 56px; } .teclado .tecla { position: absolute; top: 0; width: 100px; height: 56px; line-height: 56px; text-align: center; font-size: 22px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #132640; color: #d8e1ec; border: 0; border-radius: 0; } .teclado .tecla.disabled { display: none; } .teclado .tecla.funcao { color: #9cc3f2; font-size: 20px; } html.toque .teclado .tecla { font-size: 26px; } /* [r76] dedo */ html.toque .teclado .tecla.funcao { font-size: 22px; } .teclado .tecla.ligada { background: #1d4472; color: #ffffff; } .teclado .tecla.focused { background: #2f6fb5; color: #ffffff; } .teclado .tecla.globo { background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%239cc3f2' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9'/%3E%3Cpath d='M3 12h18M5 7.5h14M5 16.5h14'/%3E%3C/svg%3E"); } .teclado .tecla.globo.focused { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9'/%3E%3Cpath d='M3 12h18M5 7.5h14M5 16.5h14'/%3E%3C/svg%3E"); } /* [r70] o teclado numérico da senha dos pais continua com as teclas pequenas */ .tecla { position: absolute; top: 0; width: 56px; height: 52px; line-height: 48px; text-align: center; font-size: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #132640; border: 2px solid transparent; border-radius: 0; } .tecla.focused { background: #2f6fb5; color: #ffffff; } /* [r74] Tons fora do véu do modal (REGRAS §1): fundo #0e1b2e → caixa #132640 → linha/campo/botão #1c355a → focado #2f6fb5 */ .idioma .caixa, .termos .caixa, .login .caixa, .layouts .caixa { background: #132640; } .idioma .opcao, .layouts .opcao, .login .campo, .login .botao, .termos .botao { background: #1c355a; } .idioma .opcao.focused, .layouts .opcao.focused, .login .campo.focused, .login .botao.focused, .termos .botao.focused { background: #2f6fb5; color: #ffffff; } /* 3 classes: ganha das regras de tom acima */ /* [r74] Card "Idioma do teclado" do globinho (modal estreito, como o do Clouddy) */ .layouts .caixa { left: 440px; top: 90px; width: 400px; height: 540px; } .layouts .caixa .titulo { left: 0; width: 400px; text-align: center; } .layouts .lista { position: absolute; left: 30px; top: 66px; width: 340px; } .layouts .opcao { width: 340px; } .layouts .opcao.atual:after { content: '\25CF'; position: absolute; right: 16px; top: 0; color: #9cc3f2; } .layouts .opcao.atual.focused:after { color: #ffffff; } /* [r72] Primeira abertura: idioma (coluna que rola na caixa central) e termos do reprodutor */ .idioma .caixa { left: 440px; top: 120px; width: 400px; height: 536px; } /* [r74] estreita, como o card de layouts */ .idioma .caixa .titulo { left: 0; width: 400px; text-align: center; } .idioma .janela { position: absolute; left: 30px; top: 66px; width: 340px; height: 442px; overflow: hidden; } .idioma .lista { position: absolute; left: 0; top: 0; width: 340px; height: 784px; } .idioma .opcao { width: 340px; font-size: 20px; } .idioma .mais { position: absolute; left: 0; top: 508px; width: 400px; height: 24px; line-height: 24px; text-align: center; font-size: 14px; color: #8fa3bd; } /* [r74] celular: letras maiores (dono: "no mobile ficou muito pequena") e a lista de idiomas rola com o dedo */ html.toque .idioma .janela { overflow-y: auto; -webkit-overflow-scrolling: touch; } html.toque .idioma .mais { display: none; } html.toque .idioma .opcao { font-size: 24px; } html.toque .termos .caixa .titulo { font-size: 32px; } html.toque .termos .sub { font-size: 20px; top: 68px; } html.toque .termos .texto { top: 110px; font-size: 25px; line-height: 34px; } html.toque .termos .texto ul { font-size: 24px; margin-top: 10px; } html.toque .termos .texto li { margin-bottom: 2px; } html.toque .termos .botao { font-size: 24px; } html.toque .login .caixa .titulo { font-size: 28px; } html.toque .login .rotulo { font-size: 19px; } html.toque .login .campo .valor { font-size: 24px; } html.toque .login .botao { font-size: 23px; } html.toque .login .nota { font-size: 19px; line-height: 24px; } html.toque .login .erro { font-size: 18px; } .termos .caixa { left: 190px; top: 90px; width: 900px; height: 540px; } .termos .caixa .titulo { left: 0; width: 900px; text-align: center; font-size: 26px; top: 24px; } .termos .sub { position: absolute; left: 0; top: 64px; width: 900px; text-align: center; font-size: 17px; color: #8fa3bd; } .termos .texto { position: absolute; left: 50px; top: 112px; width: 800px; height: 320px; overflow: hidden; font-size: 20px; line-height: 30px; color: #d8e1ec; } .termos .texto ul { margin: 14px 0 0 0; padding-left: 28px; color: #c3cfdd; font-size: 19px; } .termos .texto li { margin-bottom: 4px; } .termos .opcoes { position: absolute; left: 50px; top: 450px; width: 800px; height: 50px; } .termos .botao { position: absolute; top: 0; width: 400px; height: 50px; line-height: 50px; background: #132640; border: 0; } .termos .botao.nao { left: 0; } .termos .botao.sim { left: 400px; } /* Diálogo "Sair da conta?" */ .dialogo { position: absolute; left: 440px; top: 250px; width: 400px; height: 200px; background: #0b1626; border: 0; border-radius: 0; } .dialogo .titulo { position: absolute; left: 0; top: 40px; width: 400px; height: 36px; line-height: 36px; text-align: center; font-size: 24px; color: #ffffff; } .dialogo .opcoes { position: absolute; left: 30px; top: 110px; width: 340px; height: 56px; white-space: nowrap; } .dialogo .botao { display: inline-block; width: 160px; margin-right: 20px; } /* [r19] ⓘ (sinopse completa) e o quadro de leitura: mesma cor do diálogo, texto rolável por ▲ ▼ */ .botao.info { width: 56px; font-size: 26px; } .dialogo.leitura { left: 240px; top: 90px; width: 800px; height: 540px; border: 0; } /* [r30c] sem contorno (dono) */ .dialogo.leitura .titulo { top: 22px; width: 736px; left: 32px; height: 40px; line-height: 40px; font-size: 26px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dialogo.leitura .texto { position: absolute; left: 32px; top: 84px; width: 736px; height: 416px; overflow: hidden; font-size: 22px; line-height: 32px; /* [r21] */ color: #d8e1ec; } .dialogo.leitura:after { content: '\25B2 \25BC rolar \00B7 Voltar fechar'; position: absolute; left: 0; bottom: 10px; width: 800px; text-align: center; font-size: 14px; color: #8fa3bd; } /* [r20] onde parou: barra no card do episódio (:after, zero nó), data-vista em décimos 1–9 sobre os 202 px internos da foto */ .episodio:after { content: ''; position: absolute; left: 3px; top: 109px; height: 5px; width: 0; background: #2f6fb5; } .episodio[data-vista='1']:after { width: 20px; } .episodio[data-vista='2']:after { width: 40px; } .episodio[data-vista='3']:after { width: 61px; } .episodio[data-vista='4']:after { width: 81px; } .episodio[data-vista='5']:after { width: 101px; } .episodio[data-vista='6']:after { width: 121px; } .episodio[data-vista='7']:after { width: 141px; } .episodio[data-vista='8']:after { width: 162px; } .episodio[data-vista='9']:after { width: 182px; } .acoes .botao.continuar { width: auto; padding: 0 24px; } /* [r20] "▶ Continuar · T1 · EP3 · 12 min" */ /* [r24] "tudo padrãozinho, quadradinho": os border-radius viraram 0 acima. [r26b] o fundo atrás do nome do pôster saiu (dono: "não ficou bom"). */ .poster .pnome { padding: 0 6px; -webkit-box-sizing: border-box; box-sizing: border-box; } /* [r24] ⚙ Configurações no trilho */ .dialogo.config { height: 300px; } .dialogo.config .titulo { top: 24px; } .dialogo.config .linha { position: absolute; left: 30px; width: 340px; height: 28px; line-height: 28px; font-size: 16px; color: #c3cfdd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dialogo.config .opcoes { top: 214px; } /* [r24] olhinho de visto: no medalhão do episódio e no canto da capa do filme (SVG no :before, zero nó) */ .episodio.visto:before { content: ''; background-color: #2f6fb5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; } .episodio.visto.focused:before { background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fb5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .card.visto:before { content: ''; position: absolute; left: 49px; top: 56px; width: 28px; height: 28px; z-index: 1; background-color: rgba(5, 12, 24, 0.8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; } /* [r25] ▶ na linha do canal que está no mini (com ★ quando também é favorito) */ /* [r25] destaque do Início com a arte de título do TMDB, como a ficha: escondido até decidir, arte no lugar do texto */ .dtitulo .arte { display: none; position: absolute; left: 0; top: auto; bottom: 0; width: 420px; height: 72px; object-fit: contain; object-position: left bottom; } /* [r108] 420×72 (era 480×96) */ .dtitulo.esperando { visibility: hidden; } .dtitulo.com-logo { color: transparent; overflow: visible; } .dtitulo.com-logo .arte { display: block; } /* [r27] Direção (uma linha, rótulo pequeno no :before; vazia = escondida) e Elenco (rótulo no :before do bloco; 7 pessoas fixas em passo 156: foto 140×130 recortada na CDN, nome em negrito e personagem em cinza embaixo, nos :before/:after) */ .ficha .direcao { position: absolute; left: 96px; top: 416px; width: 640px; height: 24px; line-height: 24px; font-size: 17px; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; } .ficha .direcao:empty { display: none; } .ficha .direcao:before { content: 'Direção'; display: inline-block; width: 90px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #8fa3bd; } .ficha .elenco { position: absolute; left: 96px; top: 452px; width: 1088px; height: 208px; z-index: 1; } .ficha .elenco:before { content: attr(data-rotulo); position: absolute; left: 0; top: 0; height: 20px; line-height: 20px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #8fa3bd; } .serie .direcao { display: none; } /* série: só o elenco (não há lugar) */ .serie .elenco { top: 526px; } /* [r46] 12 px de respiro após episódios; foto menor mantém nomes dentro da tela */ .serie .pessoa .pfoto { height: 108px; } .serie .pessoa:before { top: 114px; } .serie .pessoa:after { top: 136px; } .pessoa { position: absolute; top: 28px; width: 140px; height: 176px; } .pessoa .pfoto { position: absolute; left: 0; top: 0; width: 140px; height: 130px; background: #132640; } .pessoa.focused .pfoto { outline: 4px solid #2f6fb5; } /* [r27b] focável: só o quadrinho */ .pessoa.focused:before { color: #ffffff; } .pessoa:before { content: attr(data-nome); position: absolute; left: 0; top: 136px; width: 140px; height: 22px; line-height: 22px; font-size: 15px; font-weight: bold; color: #d8e1ec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pessoa:after { content: attr(data-papel); position: absolute; left: 0; top: 158px; width: 140px; height: 18px; line-height: 18px; font-size: 14px; color: #8fa3bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* [r27d] os atalhos `background: #…` dos quadrinhos (.pcapa, .foto, .pfoto…) têm mais peso que .sem-imagem e voltavam o repeat: era o "vários ícones" do dono. Esta regra (mesmo peso, mais abaixo) garante UM ícone centrado. */ .pcapa.sem-imagem, .foto.sem-imagem, .capa.sem-imagem, .fimg.sem-imagem, .pfoto.sem-imagem, .logo.sem-imagem { background-repeat: no-repeat; background-position: center; } /* [r28] Abrindo o app: só as barrinhas no centro até o Início estar pronto (listas + em alta + destaque); o resto fica invisível (visibility, para manter medidas e foco), e o foco segura na raiz */ .catalogo.abrindo .logo, .catalogo.abrindo .relogio, .catalogo.abrindo .trilho, .catalogo.abrindo .rodape, .catalogo.abrindo .contracapa, .catalogo.abrindo .dtitulo, .catalogo.abrindo .dmeta, .catalogo.abrindo .dsinopse, .catalogo.abrindo .menu, .catalogo.abrindo .faixas, .catalogo.abrindo .secao, .catalogo.abrindo .paginas, .catalogo.abrindo .aviso, .catalogo.abrindo .grade { visibility: hidden; } .catalogo.abrindo:before, .catalogo.abrindo:after { display: none; } /* [r28b] cada cartão fecha o próprio contexto de empilhamento: os filhos com z-index 1 (degradê e arte do .poster, olhinho do .card, medalhão do .episodio) ficavam no contexto do palco e vazavam por cima da ficha aberta (dono: "os nomes das séries em alta aparecem atrás da tela") */ .poster, .card, .episodio { z-index: 0; } /* [r28c/r28e] quadro de categorias em Canais com o mini tocando atrás: caixa no centro, como sempre (dono), só o véu mais leve */ .modal.com-mini { background: rgba(0, 0, 0, 0.35); } /* [r28g] bolinhas de posição na linha do rótulo, centradas na fileira: texto no :after (zero nó); ● = item atual, ○ = os outros */ .faixa:after { content: attr(data-bolinhas); position: absolute; left: 0; top: 0; width: 1056px; height: 26px; line-height: 26px; /* [r108] */ text-align: center; font-size: 15px; letter-spacing: 6px; color: #8fa3bd; white-space: nowrap; } /* [r43] Canais, Filmes, Séries e Favoritos numa cor só (a das faixas e do trilho); o quadro do mini ocioso na cor dos quadros do app (preto só com vídeo); o furo do vídeo pinta em volta com a mesma cor */ html.toque .catalogo.aba-canais, html.toque .catalogo.aba-grade, html.toque .catalogo.aba-favoritos { background: #0a1524; } /* [r59] era .aba-filmes/.aba-series, classes que não existem (Filmes e Séries ficavam #0e1b2e: a "leve diferença" do dono); a aba é aba-grade */ html.toque .mini { background: #132640; } /* com vídeo o quadro TEM que ser transparente (é o furo): esta regra vem depois da de cima e ganha dela */ html.toque.video .mini { background: transparent; box-shadow: 0 0 0 1400px #0a1524; } /* [r86] as faixas FORA do palco (body transparente com vídeo): o contorno do palco as pinta até o 'cheio' (visibility hidden leva o contorno junto). A casca cresce o vídeo para a tela inteira antes de a web esconder a interface, e ele aparecia nas bordas do celular — a "piscada lá atrás" do dono. 2000 px escalados pelo palco cobrem a faixa de qualquer celular. [r86b] outline e não box-shadow: a borda direita do palco escalado cai em pixel fracionário e a sombra, que começa na borda, deixava uma emenda de 1 px por onde o fundo nativo aparecia (a "linha" vertical do dono); o contorno entra 2 px. */ html.toque.video #palco { outline: 2000px solid #0a1524; outline-offset: -2px; } /* [r87] quadro aberto sobre o vídeo: as faixas acompanham o véu (como as regras :not(.video) de html.com-modal, que com vídeo não valem) */ html.toque.video.com-modal #palco { outline-color: #04080e; } html.toque.video.com-modal-mini #palco { outline-color: #070e17; } /* com vídeo atrás, TUDO que está sobre o furo tem que ser transparente — por último e mais específico que as regras de cor acima (html.toque .catalogo.aba-canais cobria o furo: o canal tocava sem imagem) */ html.toque.video, html.toque.video body, html.toque.video #palco, html.toque.video .catalogo, html.toque.video .catalogo.aba-canais { background: transparent; } /* [r44] celular: × de fechar nas telas/quadros (nas TVs nem existe; o VOLTAR é do controle). [r45] a seta de voltar fica nos controles nativos do player e da tela cheia (casca), não no catálogo */ .fechar { display: none; } /* [r45b] celular: as fileiras do Início (.faixas) e os trilhos dos Favoritos (.favs) são caixas da largura toda e ficavam por cima do trilho lateral — o toque no ⏻ (e na 🔍) caía nelas. O trilho sobe de camada. */ html.toque .trilho { z-index: 2; } html.toque .fechar { display: block; position: absolute; right: 0; top: 0; width: 56px; height: 56px; z-index: 3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23d8e1ec' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center; } /* [r81] celular: ← de voltar numa bolha translúcida (desenho B, docs/avaliacoes/mockup-voltar-r81). [r82] 64 px com o centro no topo das capas (y 120), e também na ficha e nos quadros de Ajustes (no lugar do ×). No Início não; na TV o nó nem nasce. */ .voltar { display: none; } html.toque .voltar { display: block; position: absolute; left: 4px; top: 88px; width: 64px; height: 64px; border-radius: 32px; z-index: 3; background: rgba(255, 255, 255, 0.09) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5.5M11 5.5L4.5 12l6.5 6.5'/%3E%3C/svg%3E") no-repeat center; } html.toque .catalogo.aba-inicio .voltar { display: none; } html.toque .catalogo.pesquisando .icone.categorias { display: none; } /* [r88] celular: o ▦ (categorias de Filmes) não faz sentido no resultado da lupa; a TV mantém (é o foco quando não há resultado) */ html.toque .quadro-ajustes .voltar, html.toque .bloqueio .voltar { left: 12px; top: 12px; width: 48px; height: 48px; border-radius: 24px; background-size: 26px 26px; } /* [r46] Prévia com reticências; a sinopse completa continua no quadro de leitura. -webkit-line-clamp usa o layout de caixa antigo, disponível no piso Chromium 38. */ .ficha .sinopse { display: -webkit-box; -webkit-box-orient: vertical; } .ficha .sinopse { -webkit-line-clamp: 5; } .ficha.serie .sinopse { -webkit-line-clamp: 2; } /* Personagens legíveis sobre a contracapa; mesma tipografia e posição. */ .pessoa:after { color: #b0bfd0; } /* [r47] Barra do Início: 8 cards de 120×88 em passo 134 (x 147 → 1205), ícone no fundo (SVG nosso, 1 nó por card) e o nome embaixo. Estados como as abas: selecionada = borda azul; focada = fundo azul. No Início, o topo e o trilho somem. */ /* [r48b] .menu, não .barra: .barra é cada barrinha de carga (BUG-008: a regra aqui no fim esticava as 12 para 1058×88) */ /* [r117] menu C (mockup aprovado pelo dono, 5/11): faixa escura meio transparente na linha do menu (x 300 → 1084), Início · Canais · Filmes · Séries só com o nome (120 em passo 126), lupa · engrenagem · sair só com o ícone (76 em passo 82); sem quadro nos cards: aba focada = pastilha azul, aba atual = tracinho claro embaixo. O nome continua no nó das abas de ícone (font-size 0) para leitura, bancada e testes. */ .menu { position: absolute; left: 300px; top: 14px; width: 784px; height: 68px; background-color: rgba(4, 10, 20, 0.78); border-radius: 34px; } .cardmenu { position: absolute; top: 4px; width: 120px; height: 60px; line-height: 60px; text-align: center; font-size: 24px; letter-spacing: 1px; color: #b9c7d8; border-radius: 30px; background-repeat: no-repeat; background-position: center center; background-size: 32px 32px; } /* [r117c] 24 px (era 21): "muito pequenininho" no celular (dono) */ .cardmenu.icone { width: 76px; font-size: 0; } .cardmenu.selecionada { color: #ffffff; } .cardmenu.selecionada:before { content: ''; position: absolute; left: 40px; bottom: 2px; width: 40px; height: 3px; background-color: #9cc3f2; border-radius: 2px; } .cardmenu.focused { background-color: #2f6fb5; color: #ffffff; } .catalogo.aba-inicio .trilho { display: none; } .cardmenu.buscar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c3cfdd' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E"); } .cardmenu.ajustes { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c3cfdd' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath stroke-linejoin='round' d='M19.5 10.8L22.5 10.9L22.5 13.1L19.5 13.2L18.1 16.5L20.2 18.7L18.7 20.2L16.5 18.1L13.2 19.5L13.1 22.5L10.9 22.5L10.8 19.5L7.5 18.1L5.3 20.2L3.8 18.7L5.9 16.5L4.5 13.2L1.5 13.1L1.5 10.9L4.5 10.8L5.9 7.5L3.8 5.3L5.3 3.8L7.5 5.9L10.8 4.5L10.9 1.5L13.1 1.5L13.2 4.5L16.5 5.9L18.7 3.8L20.2 5.3L18.1 7.5Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); } .cardmenu.sair { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c3cfdd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); } /* [r117] quadrinho com a seta (sair), não o ⏻ (dono) */ /* [r49] celular: a fileira do Início e os trilhos de Favoritos/pesquisa rolam sob o dedo com a rolagem nativa (como o wai-player): .rolo só nasce em modoToque(), abaixo do rótulo (:before) e das bolinhas (:after); barra escondida */ .rolo { position: absolute; left: 0; top: 26px; width: 1088px; bottom: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } /* [r53] 26, não 30: o overflow cortava os 4 px de cima da moldura do foco */ .rolo::-webkit-scrollbar { display: none; width: 0; height: 0; } .rolo .poster, .rolo .fcard { top: 4px; } /* [r53] cabe a moldura (4 px) acima do cartão */ /* [r55] fim do rolo: 8 px de borda transparente à direita entram na largura rolável, e a moldura do último card aparece inteira (o começo já tem a FOLGA de 8 px). O fundo das caixas de logo não pode pintar a borda; o card da grade já tem a dele (2 px). */ .rolo .poster, .rolo .fcard { border-right: 8px solid transparent; } .ftrilho.logos .rolo .fcard { background-clip: padding-box; -webkit-background-clip: padding-box; } .ftrilho.logos .rolo .fcard.focused { outline: none; box-shadow: inset 0 0 0 4px #2f6fb5; } /* [r127] celular: a moldura por dentro da caixa cinza — o outline abraçava os 8 px de borda transparente e sobrava à direita (foto do dono, 5/11) */ .favs.grade .ftrilho:not(.logos) .rolo .fcard { border-right-width: 2px; } /* [r56] celular: elenco e episódios da ficha no mesmo .rolo (a TV segue com 7 pessoas / 5 episódios fixos) */ .ficha .elenco .rolo { top: 24px; } .ficha .episodios .rolo { top: -4px; } .rolo .pessoa, .rolo .episodio { top: 4px; border-right: 8px solid transparent; } html.toque .contracapa { width: 764px; } /* [r108g] só no toque a borda direita do quadro é interna: a imagem para em 1272, sob o degradê sólido */ html.toque .catalogo.aba-inicio, html.toque .ficha { background: transparent; } /* [r108b/d] o fundo é o #0a1524 do toque; o quadro da contracapa fica no canto do palco, como na TV (a camada de tela inteira da r59 saiu) */ /* [r108b] celular: o quadro da contracapa no canto do palco, como na TV; os degradês fundem com o #0a1524 do fundo do toque */ /* [r108c] e no celular (19,5:9) a borda direita do quadro não é a borda da tela: degradê também ali (dono: "termina marcada de uma vez"). [r108e] os 8 px finais de cada borda interna são sólidos: com a escala 0,82 a borda da e a do degradê caem em pixel quebrado e sobrava um fio da imagem nas contracapas claras (dono: "uma marquinha", Homem-Aranha e Ali G). */ html.toque .catalogo.aba-inicio:before { background: -webkit-linear-gradient(left, #0a1524 0, #0a1524 8px, rgba(10, 21, 36, 0.85) 90px, rgba(10, 21, 36, 0) 300px), -webkit-linear-gradient(right, #0a1524 0, #0a1524 8px, rgba(10, 21, 36, 0) 170px); background: linear-gradient(to right, #0a1524 0, #0a1524 8px, rgba(10, 21, 36, 0.85) 90px, rgba(10, 21, 36, 0) 300px), linear-gradient(to left, #0a1524 0, #0a1524 8px, rgba(10, 21, 36, 0) 170px); } html.toque .catalogo.aba-inicio:after { background: -webkit-linear-gradient(top, rgba(10, 21, 36, 0.35) 0, rgba(10, 21, 36, 0) 90px, rgba(10, 21, 36, 0) 250px, rgba(10, 21, 36, 0.9) 390px, #0a1524 431px, #0a1524 439px); background: linear-gradient(to bottom, rgba(10, 21, 36, 0.35) 0, rgba(10, 21, 36, 0) 90px, rgba(10, 21, 36, 0) 250px, rgba(10, 21, 36, 0.9) 390px, #0a1524 431px, #0a1524 439px); } html.toque .ficha:after { background: -webkit-linear-gradient(left, #0a1524 0, #0a1524 8px, rgba(10, 21, 36, 0.85) 90px, rgba(10, 21, 36, 0) 300px), -webkit-linear-gradient(right, #0a1524 0, #0a1524 8px, rgba(10, 21, 36, 0) 170px), -webkit-linear-gradient(top, rgba(10, 21, 36, 0.35) 0, rgba(10, 21, 36, 0) 90px, rgba(10, 21, 36, 0) 250px, rgba(10, 21, 36, 0.9) 390px, #0a1524 431px, #0a1524 439px); background: linear-gradient(to right, #0a1524 0, #0a1524 8px, rgba(10, 21, 36, 0.85) 90px, rgba(10, 21, 36, 0) 300px), linear-gradient(to left, #0a1524 0, #0a1524 8px, rgba(10, 21, 36, 0) 170px), linear-gradient(to bottom, rgba(10, 21, 36, 0.35) 0, rgba(10, 21, 36, 0) 90px, rgba(10, 21, 36, 0) 250px, rgba(10, 21, 36, 0.9) 390px, #0a1524 431px, #0a1524 439px); } /* [r108d] a ficha com o mesmo quadro do Início, também no celular */ html.toque .com-ficha .catalogo { visibility: hidden; } /* a grade não aparece através da ficha transparente */ html.toque.com-modal:not(.video), html.toque.com-modal:not(.video) body { background: #04080e; } /* faixas escurecem com o véu do modal (#0a1524 × 0,4); com vídeo a regra html.video manda */ html.toque.com-modal-mini:not(.video), html.toque.com-modal-mini:not(.video) body { background: #070e17; } /* Canais: véu do .modal.com-mini é 0,35 → #0a1524 × 0,65 */ /* [r61] celular: as fileiras do Início alinhadas com a barra de cards (x 147 → 1205): FOLGA de 8 px de cada lado para a moldura do foco; rótulo e bolinhas acompanham. A TV mantém 96 → 1184. */ html.toque .catalogo.aba-inicio .faixa { left: 56px; width: 1072px; } /* [r108] 56 + 8 = 64; 56 + 1072 = 1128: 5 cards (8 + 4×216 + 192 = 1064) + 8 de borda */ html.toque .catalogo.aba-inicio .faixa:before { left: 8px; } html.toque .catalogo.aba-inicio .faixa:after { width: 1072px; } html.toque .catalogo.aba-inicio .rolo { width: 1072px; } /* [r62] celular: sinopse maior na ficha (dono: "muito pequena; não importa se não cabe tudo, o ⓘ abre") e no quadro de leitura, que cresce e rola com o dedo. 4 linhas de 32 px nos mesmos 135 px da ficha; o quadro 1000×600 com 476 px de texto. */ html.toque .ficha .sinopse { width: 720px; height: 128px; font-size: 24px; line-height: 32px; -webkit-line-clamp: 4; } /* 4 linhas inteiras com reticências (5 × 32 não cabiam em 135) */ html.toque .ficha.serie .sinopse { -webkit-line-clamp: 2; height: 64px; } /* [r80c] 2 × 32: sem isso as linhas 3 e 4 apareciam atrás dos botões */ html.toque .dialogo.leitura { left: 140px; top: 60px; width: 1000px; height: 600px; } html.toque .dialogo.leitura .titulo { width: 936px; font-size: 28px; } html.toque .dialogo.leitura .texto { width: 936px; height: 476px; font-size: 27px; line-height: 38px; overflow-y: auto; -webkit-overflow-scrolling: touch; } html.toque .dialogo.leitura:after { width: 1000px; content: 'Voltar fechar'; } /* [r62b] celular: nome do filme/série maior (dono): card da grade 15 → 18 px em 2 linhas de 22 (44 px, de 4 a 48: a capa começa em 50); card do Início 16 → 18 px. Canais ficam (dono: "tá boa"). TV igual. */ html.toque .card .titulo { top: 4px; height: 44px; line-height: 22px; font-size: 18px; } html.toque .poster .pnome { font-size: 16px; } /* [r108] 16 no bloco de 172 px (era 18 em 256) */ /* [r62c] celular (dono): linhas do quadro de categorias 18 → 22 px (Canais, Filmes, Séries, Favoritos) e rótulos da barra do Início 13 → 15 px (INÍCIO · CANAIS · … cabem em 116 px internos). TV igual. */ html.toque .opcao { font-size: 22px; } /* [r117c] sem regra de fonte do menu no toque (a de 15 px era dos cards antigos e encolhia o menu C no celular) */ /* [r70] Ajustes; [r70d] quadro centrado sobre o catálogo escurecido, um nível por vez (modelo do dono, 28/10) */ .ajustes-pagina { background: rgba(0, 0, 0, 0.6); } html.toque.com-ajustes, html.toque.com-ajustes body { background: #04080e; } /* [r70c] faixas fora do palco escurecem com o véu */ /* [r70g] sem contorno, como .opcao/.card (regra do dono, 28/10): fundo #132640, focado #2f6fb5, só tons */ .quadro-ajustes { left: 340px; width: 600px; } .quadro-ajustes .titulo { left: 0; top: 24px; width: 600px; text-align: center; font-size: 24px; } .quadro-ajustes .linhas { position: absolute; left: 30px; top: 90px; width: 540px; } .quadro-ajustes .ajuste { position: absolute; left: 0; width: 540px; height: 50px; line-height: 48px; padding: 0 16px; font-size: 20px; background: #132640; color: #d8e1ec; border: 0; border-radius: 0; white-space: nowrap; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; } .quadro-ajustes .ajuste.focused { background: #2f6fb5; color: #ffffff; } .quadro-ajustes .ajuste .valor { position: absolute; right: 16px; top: 0; color: #9cc3f2; } .quadro-ajustes .ajuste.focused .valor { color: #ffffff; } .quadro-ajustes .ajuste.texto { color: #8a98a8; font-size: 18px; background: #0e1b2e; } html.toque .quadro-ajustes .ajuste { font-size: 22px; } /* [r128] mockup C (dono, 5/11): grupos com ícone e resumo apagado; escolha com ◄ valor ► na própria linha; ação com ›; texto com valor claro */ .quadro-ajustes .ajuste.grupo { padding-left: 58px; background-repeat: no-repeat; background-position: 16px center; background-size: 26px 26px; } .quadro-ajustes .ajuste.grupo .valor { color: #8fa3bd; font-size: 18px; } .quadro-ajustes .ajuste.grupo.focused .valor { color: #ffffff; } .quadro-ajustes .ajuste.reproducao { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cfdd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='14' rx='2'/%3E%3Cpath d='M10 8l5 3-5 3z' fill='%23c3cfdd'/%3E%3Cpath d='M8 22h8'/%3E%3C/svg%3E"); } .quadro-ajustes .ajuste.pais { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cfdd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); } .quadro-ajustes .ajuste.perfis { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cfdd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M15.5 14.5a5 5 0 0 1 6 5'/%3E%3C/svg%3E"); } .quadro-ajustes .ajuste.conta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cfdd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); } .quadro-ajustes .ajuste.sobre { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cfdd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); } .quadro-ajustes .ajuste.reiniciar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cfdd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E"); } /* [r130] */ .quadro-ajustes .ajuste.escolha .valor { padding: 0 30px; } .quadro-ajustes .ajuste.escolha .valor:before, .quadro-ajustes .ajuste.escolha .valor:after { content: ''; position: absolute; top: 19px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .quadro-ajustes .ajuste.escolha .valor:before { left: 6px; border-right: 10px solid #5b84b4; } .quadro-ajustes .ajuste.escolha .valor:after { right: 6px; border-left: 10px solid #5b84b4; } .quadro-ajustes .ajuste.escolha.focused .valor:before { border-right-color: #ffffff; } .quadro-ajustes .ajuste.escolha.focused .valor:after { border-left-color: #ffffff; } .quadro-ajustes .ajuste.acao .valor { color: #8fa3bd; } .quadro-ajustes .ajuste.acao .valor:after { content: '\203A'; margin-left: 12px; font-size: 24px; } .quadro-ajustes .ajuste.acao.focused .valor { color: #ffffff; } .quadro-ajustes .ajuste.perigo .valor { color: #e07070; } .quadro-ajustes .ajuste.grupo.acao .valor:after { content: none; } /* grupo: só o resumo, sem › (mockup C); depois da regra do › para ganhar */ .quadro-ajustes .ajuste.texto .valor { color: #d8e1ec; } /* [r124] senha dos pais no modelo aprovado (mockup-pin-r123): cartão clássico no tom dos cards, campo com asteriscos, Confirmar; faixa de dígitos no pé (filha do cartão, posicionada no palco: 420+(−420)=0, 170+410=580) acima do rodapé de dicas; TV e celular iguais (r126) */ .dialogo.senha { left: 420px; top: 170px; width: 440px; height: 290px; background: #132640; } .dialogo.senha .titulo { top: 28px; width: 440px; } .dialogo.senha .sub { position: absolute; left: 40px; top: 84px; width: 360px; height: 24px; line-height: 24px; font-size: 17px; color: #8fa3bd; } .dialogo.senha .pontos { position: absolute; left: 40px; top: 116px; width: 360px; height: 50px; line-height: 50px; text-align: center; font-size: 28px; letter-spacing: 14px; background: #1c355a; color: #ffffff; } .dialogo.senha .botao.confirmar { position: absolute; left: 40px; top: 186px; width: 360px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; background: #1c355a; color: #d8e1ec; border: 0; } .dialogo.senha .botao.confirmar.focused { background: #2f6fb5; color: #ffffff; } .dialogo.senha .erro { position: absolute; left: 0; top: 248px; width: 440px; height: 24px; line-height: 24px; text-align: center; font-size: 16px; color: #e07070; } .dialogo.senha .numeros { position: absolute; left: -420px; top: 410px; width: 1280px; height: 140px; background: #0a1524; } .dialogo.senha .fileira { position: absolute; left: 0; width: 1280px; height: 56px; } .dialogo.senha .tecla { width: 92px; height: 56px; line-height: 56px; font-size: 22px; background: #132640; color: #d8e1ec; border: 0; } .dialogo.senha .tecla.funcao { color: #9cc3f2; font-size: 20px; } .dialogo.senha .tecla.focused { background: #2f6fb5; color: #ffffff; } html.toque .pin .rodape { display: none; } /* [r126] celular = o mesmo formato da TV (dono), só sem as dicas de tecla */ html.toque .dialogo.senha .tecla { font-size: 26px; } /* dedo, como no teclado */ .caixa.bloqueio .opcao { font-size: 17px; } /* [r76b] Campo em edição com o teclado aberto (login, pesquisa): marcado em azul e com a barrinha depois do texto; .apagado alterna a cada 500 ms pelo JS (o piso não permite animation). Depois das regras de tom: ganha delas. */ .campo.ativo { background: #2f6fb5; } .campo.ativo .rotulo, .campo.ativo .valor.vazio { color: #d8e1ec; } .campo.ativo .valor:after { content: ''; display: inline-block; width: 2px; height: 24px; margin-left: 1px; vertical-align: middle; /* [r88] 1 px: colada ao último caractere (dono: 3 px ficava longe) */ background: #ffffff; } .campo.ativo.apagado .valor:after { visibility: hidden; } /* [r98] Perfis (SPEC-r98): "Quem está assistindo?" na caixa central (largura pelo número de avatares, mínimo a do login) e o editor (nome + foto) acima do teclado (y < 396). Avatar = 1 nó: fundo de linha (#1c355a, focado #2f6fb5), a foto no fundo (r114: PNG do dono, inline pelo urlAvatar) e o nome no texto. Sem contorno (REGRAS §1). */ .catalogo .logo.com-perfil { width: 560px; } .catalogo .logo .perfil { font-size: 15px; font-weight: normal; color: #8fa3bd; white-space: pre; } .tela.perfis { background: #0e1b2e; z-index: 2; } /* [r98d] também sobre o Início (Ajustes → Perfis): cobre o catálogo, abaixo do editor (DOM depois, mesmo z) */ /* [r98e] celular (dono, 3/11): as faixas fora do palco na MESMA cor da tela, na abertura e vindo do Ajustes (a contracapa do Início some) */ html.toque .tela.perfis, html.toque.com-perfis, html.toque.com-perfis body { background: #0a1524; } /* [r120] modelo do dono (5/11): quadro arredondado, cards 150×200 com a foto arredondada, botão em pílula com ⚙, rodapé em pílulas */ .perfis .caixa { top: 158px; height: 448px; background: #132640; border-radius: 28px; } .perfis .caixa .titulo { top: 22px; height: 44px; line-height: 44px; font-size: 36px; font-weight: bold; } /* [r120b] maior e em destaque */ .perfis .subtitulo { position: absolute; left: 0; right: 0; top: 68px; height: 26px; line-height: 26px; text-align: center; font-size: 20px; color: #8fa3bd; } /* [r120b] "Escolha um perfil", apagado */ .perfis .botao.gerenciar { position: absolute; top: 346px; width: 280px; height: 56px; line-height: 56px; font-size: 22px; border-radius: 28px; background: #1c355a; color: #d8e1ec; border: 0; } /* [r98c] */ .perfis .botao.gerenciar { padding-left: 34px; -webkit-box-sizing: border-box; box-sizing: border-box; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c3cfdd' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath stroke-linejoin='round' d='M19.5 10.8L22.5 10.9L22.5 13.1L19.5 13.2L18.1 16.5L20.2 18.7L18.7 20.2L16.5 18.1L13.2 19.5L13.1 22.5L10.9 22.5L10.8 19.5L7.5 18.1L5.3 20.2L3.8 18.7L5.9 16.5L4.5 13.2L1.5 13.1L1.5 10.9L4.5 10.8L5.9 7.5L3.8 5.3L5.3 3.8L7.5 5.9L10.8 4.5L10.9 1.5L13.1 1.5L13.2 4.5L16.5 5.9L18.7 3.8L20.2 5.3L18.1 7.5Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 26px 26px; background-position: 44px center; } /* [r121] a engrenagem do menu (o ⚙ de texto saía "esquisito") */ .perfis.gerenciar .botao.gerenciar { padding-left: 0; background-image: none; } .perfis .rodape { top: 640px; font-size: 20px; white-space: normal; } .perfis .rodape b { font-weight: normal; color: #d8e1ec; background-color: #1c355a; border-radius: 8px; padding: 2px 10px; margin-right: 6px; } /* [r123] background-COLOR: o atalho apagava a imagem das setas (.rodape b.setas, r122) — na TCL a pílula ficou vazia */ .perfis .rodape b + span { margin-right: 44px; } .perfis .rodape b.setas { height: 22px; vertical-align: -5px; background-position: center; } /* [r121] dentro da pílula; [r129] setas no meio dela (encostavam na borda esquerda) */ html.toque .perfis .rodape { display: none; } .perfis .botao.gerenciar.focused { background: #2f6fb5; color: #ffffff; } .perfil-editar .acoes { position: absolute; left: 30px; top: 314px; width: 640px; height: 38px; } /* [r98d] Excluir · Cancelar · Salvar */ .perfil-editar .acao { position: absolute; left: 0; top: 0; width: 200px; height: 38px; line-height: 38px; text-align: center; font-size: 16px; background: #1c355a; color: #d8e1ec; } .perfil-editar .acao.excluir { color: #e07070; } .perfil-editar .acao.focused { background: #2f6fb5; color: #ffffff; } /* [r98d] modo gerenciar: a engrenagem no canto da bola diz "escolha um e clique" */ .perfis.gerenciar .avatar:after { content: '⚙'; position: absolute; left: 100px; top: 100px; width: 34px; height: 34px; line-height: 34px; border-radius: 17px; background: #0e1b2e; color: #ffffff; font-size: 22px; text-align: center; } .perfis.gerenciar .avatar.novo:after { content: none; } /* [r98d] toque: o dedo escolhe, não há cursor — sem destaque de foco na escolha de perfil */ html.toque .perfis .avatar.focused { background-color: #1c355a; color: #d8e1ec; } html.toque .perfis .botao.gerenciar.focused { background: #1c355a; color: #d8e1ec; } .perfis .caixa .titulo, .perfil-editar .caixa .titulo { left: 0; right: 0; width: auto; text-align: center; font-size: 24px; } .avatar { position: absolute; top: 110px; width: 150px; height: 200px; padding: 150px 6px 0 6px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 18px; background-color: #1c355a; color: #d8e1ec; font-size: 20px; line-height: 30px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0; } .avatar .foto { position: absolute; left: 12px; top: 12px; width: 126px; height: 126px; border-radius: 14px; background-repeat: no-repeat; background-size: 126px 126px; } /* [r120] a foto (fundo preto próprio) com canto arredondado */ .avatar.focused { background-color: #2f6fb5; color: #ffffff; } .avatar.novo:before { content: attr(data-letra); position: absolute; left: 35px; top: 35px; width: 80px; height: 80px; line-height: 80px; border-radius: 40px; font-size: 44px; text-align: center; background: #0e1b2e; color: #8fa3bd; } .perfil-editar .caixa { left: 290px; top: 20px; width: 700px; height: 360px; background: #132640; } /* [r114] 360: cabe as 2 fileiras de fotos (pé em 380 < 396) */ .perfil-editar .campo { left: 30px; top: 70px; width: 640px; background: #1c355a; border: 0; } .perfil-editar .campo.focused, .perfil-editar .campo.ativo { background: #2f6fb5; } .perfil-editar .campo .valor { width: 608px; } .perfil-editar .rotulo-cor { position: absolute; left: 30px; top: 138px; height: 22px; line-height: 22px; font-size: 16px; color: #8fa3bd; } /* [r114] 16 fotos em 2 fileiras de 8 (64 em passo 72, centradas na caixa); a escolhida leva o ✓ num selo no canto */ .perfil-editar .cores { position: absolute; left: 66px; top: 166px; width: 568px; height: 64px; } .perfil-editar .cores + .cores { top: 238px; } .cor { position: absolute; top: 0; width: 64px; height: 64px; background-color: #1c355a; background-repeat: no-repeat; background-position: 4px 4px; background-size: 56px 56px; border: 0; border-radius: 0; } .cor.focused { background-color: #2f6fb5; } .cor:before { content: attr(data-letra); position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; line-height: 20px; border-radius: 10px; background: #ffffff; color: #2f6fb5; font-size: 14px; text-align: center; } .cor[data-letra='']:before { display: none; }