/* ========================================================================== modal.css — Modal de detalhes do programa (bottom sheet no mobile) Pensado para , mas funciona com div[role=dialog] + [hidden]. Depende de tokens.css + base.css + components.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. RAIZ -------------------------------------------------------------------------- */ .epg-modal { position: fixed; inset: 0; z-index: var(--epg-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--epg-space-lg); /* Neutraliza o padrao do (que e block e nao ocupa a viewport) */ width: 100%; max-width: none; height: 100%; max-height: none; background: none; border: none; color: var(--epg-txt); } .epg-modal[hidden] { display: none; } /* fechado nao aparece */ .epg-modal:not([open]):is(dialog) { display: none; } /* Backdrop nativo, quando o template usar dialog.showModal() */ .epg-modal::backdrop { background-color: var(--epg-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* Overlay explicito, para o caso de div[role=dialog] (clique fecha) */ .epg-modal__overlay { position: absolute; inset: 0; background-color: var(--epg-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: epg-fade-in var(--epg-dur-base) var(--epg-ease-standard) both; } @keyframes epg-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Trava a rolagem do fundo (aplicada no pelo JS) */ .epg-modal-aberto { overflow: hidden; } /* -------------------------------------------------------------------------- 2. PAINEL -------------------------------------------------------------------------- */ .epg-modal__painel { position: relative; display: flex; flex-direction: column; width: min(46rem, 100%); max-height: min(86vh, 52rem); overflow: hidden; background-color: var(--epg-surf-2); border: 1px solid var(--epg-line-forte); border-radius: var(--epg-radius-xl); box-shadow: var(--epg-elev-4); animation: epg-modal-entra var(--epg-dur-slow) var(--epg-ease-decel) both; } @keyframes epg-modal-entra { from { opacity: 0; transform: translateY(1rem) scale(0.985); } to { opacity: 1; transform: none; } } /* Saida (o JS adiciona a classe e espera o animationend) */ .epg-modal--fechando .epg-modal__painel { animation: epg-modal-sai var(--epg-dur-fast) var(--epg-ease-accel) both; } .epg-modal--fechando .epg-modal__overlay { animation: epg-fade-out var(--epg-dur-fast) var(--epg-ease-accel) both; } @keyframes epg-modal-sai { to { opacity: 0; transform: translateY(0.5rem) scale(0.99); } } @keyframes epg-fade-out { to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .epg-modal__painel, .epg-modal__overlay, .epg-modal--fechando .epg-modal__painel, .epg-modal--fechando .epg-modal__overlay { animation: none; opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 3. HERO — faixa superior com capa e identidade do canal -------------------------------------------------------------------------- */ .epg-modal__hero { position: relative; display: flex; align-items: flex-end; gap: var(--epg-space-lg); flex: none; padding: var(--epg-space-xl) var(--epg-space-xl) var(--epg-space-lg); /* Brilho frio de sala de controle atras do titulo */ background-image: radial-gradient(28rem 14rem at 8% -30%, rgba(60, 116, 168, 0.28), transparent 68%), linear-gradient(180deg, var(--epg-surf-4), var(--epg-surf-2)); border-bottom: 1px solid var(--epg-line); } /* Capa do programa (icon do XMLTV). Sem imagem, o bloco nao e renderizado. */ .epg-modal__capa { flex: none; width: 7rem; aspect-ratio: 2 / 3; overflow: hidden; object-fit: cover; background-color: var(--epg-surf-1); border: 1px solid var(--epg-line); border-radius: var(--epg-radius-md); box-shadow: var(--epg-elev-3); } .epg-modal__hero-texto { display: flex; flex-direction: column; gap: var(--epg-space-xs); min-width: 0; } /* --- 3.1 Cabecalho ------------------------------------------------------ */ .epg-modal__cabecalho { display: flex; align-items: center; gap: var(--epg-space-sm); min-width: 0; } .epg-modal__titulo { font-family: var(--epg-font-display); font-size: var(--epg-fs-2xl); font-weight: var(--epg-fw-display); line-height: var(--epg-lh-tight); letter-spacing: var(--epg-ls-tight); color: var(--epg-txt); text-wrap: balance; } .epg-modal__sub { font-size: var(--epg-fs-base); line-height: var(--epg-lh-snug); color: var(--epg-txt-2); } /* Faixa de horario + canal, em mono */ .epg-modal__quando { display: flex; flex-wrap: wrap; align-items: center; gap: var(--epg-space-2xs) var(--epg-space-md); font-family: var(--epg-font-mono); font-size: var(--epg-fs-xs); font-weight: var(--epg-fw-medium); letter-spacing: var(--epg-ls-wide); font-variant-numeric: tabular-nums; color: var(--epg-txt-2); } .epg-modal__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--epg-space-2xs); } /* Botao fechar — sempre no canto, acima do hero */ .epg-modal__fechar { position: absolute; top: var(--epg-space-md); right: var(--epg-space-md); z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--epg-txt-2); background-color: var(--epg-surf-glass); border: 1px solid var(--epg-line); border-radius: var(--epg-radius-pill); transition: color var(--epg-dur-fast) var(--epg-ease-standard), background-color var(--epg-dur-fast) var(--epg-ease-standard), border-color var(--epg-dur-fast) var(--epg-ease-standard); } .epg-modal__fechar:hover { color: var(--epg-txt); background-color: var(--epg-surf-5); border-color: var(--epg-line-forte); } /* -------------------------------------------------------------------------- 4. CORPO -------------------------------------------------------------------------- */ .epg-modal__corpo { display: flex; flex-direction: column; gap: var(--epg-space-lg); flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--epg-space-xl); } .epg-modal__desc { font-size: var(--epg-fs-base); line-height: var(--epg-lh-base); color: var(--epg-txt-2); max-width: 68ch; } /* Progresso do programa no ar, dentro do modal */ .epg-modal__progresso { display: flex; flex-direction: column; gap: var(--epg-space-2xs); } .epg-modal__progresso-info { display: flex; align-items: center; justify-content: space-between; font-family: var(--epg-font-mono); font-size: var(--epg-fs-2xs); letter-spacing: var(--epg-ls-wide); font-variant-numeric: tabular-nums; color: var(--epg-noar); } /* --- 4.1 Ficha tecnica (definition list) -------------------------------- */ .epg-modal__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--epg-space-md) var(--epg-space-xl); padding-block-start: var(--epg-space-md); border-top: 1px solid var(--epg-line); } .epg-modal__campo { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .epg-modal__rotulo { font-family: var(--epg-font-mono); font-size: var(--epg-fs-3xs); font-weight: var(--epg-fw-medium); letter-spacing: var(--epg-ls-caps); text-transform: uppercase; color: var(--epg-txt-3); } .epg-modal__valor { font-size: var(--epg-fs-md); line-height: var(--epg-lh-snug); color: var(--epg-txt); overflow-wrap: break-word; } /* -------------------------------------------------------------------------- 5. RODAPE -------------------------------------------------------------------------- */ .epg-modal__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--epg-space-sm); flex: none; padding: var(--epg-space-md) var(--epg-space-xl); background-color: var(--epg-surf-1); border-top: 1px solid var(--epg-line); } .epg-modal__rodape .epg-btn--primario { margin-inline-start: auto; } /* -------------------------------------------------------------------------- 6. BOTTOM SHEET Variante aplicada por classe (.epg-modal--sheet) e tambem automaticamente abaixo de 768px em responsive.css. Sobe da base, ocupa a largura toda. -------------------------------------------------------------------------- */ .epg-modal--sheet { align-items: flex-end; padding: 0; } .epg-modal--sheet .epg-modal__painel { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: var(--epg-radius-xl) var(--epg-radius-xl) 0 0; border-bottom: none; animation-name: epg-sheet-entra; } @keyframes epg-sheet-entra { from { transform: translateY(100%); } to { transform: none; } } .epg-modal--sheet.epg-modal--fechando .epg-modal__painel { animation-name: epg-sheet-sai; } @keyframes epg-sheet-sai { to { transform: translateY(100%); } } /* Alca de arraste */ .epg-modal__alca { display: block; flex: none; width: 2.5rem; height: 4px; margin: var(--epg-space-sm) auto 0; background-color: var(--epg-surf-5); border-radius: var(--epg-radius-pill); } /* No desktop a alca nao faz sentido; so aparece no sheet */ .epg-modal:not(.epg-modal--sheet) .epg-modal__alca { display: none; } @media (prefers-reduced-motion: reduce) { .epg-modal--sheet .epg-modal__painel, .epg-modal--sheet.epg-modal--fechando .epg-modal__painel { animation: none; transform: none; } } /* ========================================================================== FILME no modal: pôster grande, nota (IMDb/TMDb) e ficha técnica ========================================================================== */ .epg-modal__filme { display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--epg-line-suave, var(--epg-line)); } .epg-modal__poster { flex: 0 0 auto; width: 8.5rem; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--epg-radius-md); border: 1px solid var(--epg-line); background: var(--epg-surf-3); box-shadow: var(--epg-elev-3); } .epg-modal__filme-dados { min-width: 0; flex: 1 1 auto; } .epg-modal__nota { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; } .epg-nota--grande { padding: 0.1875rem 0.5rem; font-size: var(--epg-fs-sm); } .epg-modal__nota-fonte { font-size: var(--epg-fs-2xs); color: var(--epg-txt-3); } /* Ficha: rótulo/valor em duas colunas, alinhados */ .epg-modal__ficha { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin: 0; font-size: var(--epg-fs-xs); } .epg-modal__ficha dt { color: var(--epg-txt-3); font-weight: var(--epg-fw-medium); } .epg-modal__ficha dd { margin: 0; color: var(--epg-txt-2); overflow-wrap: anywhere; } .epg-modal__imdb { margin: 0.75rem 0 0; font-size: var(--epg-fs-xs); } /* Sinopse do EPG quando difere da oficial: secundária */ .epg-modal__sinopse-epg { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--epg-line-suave, var(--epg-line)); color: var(--epg-txt-3); font-size: var(--epg-fs-xs); } @media (max-width: 480px) { .epg-modal__filme { gap: 0.75rem; } .epg-modal__poster { width: 6rem; } } /* ========================================================================== JANELA DE CORREÇÃO DE CARTAZ (só com sessão de administração) Abre SOBRE o modal do programa, por isso o z-index é maior: quem clicou em "Atualizar cartaz" precisa continuar vendo de qual programa se trata. ========================================================================== */ .epg-cartaz { position: fixed; inset: 0; z-index: calc(var(--epg-z-modal, 100) + 10); display: grid; place-items: center; padding: var(--epg-space-md); background-color: rgb(0 0 0 / 0.6); } .epg-cartaz__caixa { display: flex; flex-direction: column; gap: var(--epg-space-sm); width: 100%; max-width: 34rem; max-height: 82vh; padding: var(--epg-space-lg); border: 1px solid var(--epg-line-forte, var(--epg-line)); border-radius: var(--epg-radius-lg); background-color: var(--epg-surf-1); box-shadow: var(--epg-elev-3, var(--epg-elev-2)); } .epg-cartaz__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--epg-space-sm); } .epg-cartaz__titulo { margin: 0; font-size: var(--epg-fs-base); font-weight: var(--epg-fw-semibold); } .epg-cartaz__aviso { margin: 0; min-height: 1.25rem; font-size: var(--epg-fs-xs); color: var(--epg-txt-3); } .epg-cartaz__aviso[data-erro="1"] { color: var(--epg-erro, #FF6B6B); } .epg-cartaz__lista { display: flex; flex-direction: column; gap: var(--epg-space-2xs); overflow-y: auto; min-height: 0; } /* Cada opção é um botão inteiro: alvo grande, um clique aplica. */ .epg-cartaz__opcao { display: flex; align-items: center; gap: var(--epg-space-sm); width: 100%; padding: var(--epg-space-2xs); text-align: start; color: inherit; border: 1px solid var(--epg-line); border-radius: var(--epg-radius-sm); background-color: var(--epg-surf-2); cursor: pointer; } .epg-cartaz__opcao:hover, .epg-cartaz__opcao:focus-visible { border-color: var(--epg-line-forte, var(--epg-line)); background-color: var(--epg-surf-3, var(--epg-surf-2)); } .epg-cartaz__mini { flex: none; width: 2.875rem; height: 4.25rem; object-fit: cover; border-radius: var(--epg-radius-xs); background-color: var(--epg-surf-0); } .epg-cartaz__mini--vazio { display: grid; place-items: center; color: var(--epg-txt-3); font-family: var(--epg-font-mono); } .epg-cartaz__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--epg-fs-sm); overflow-wrap: anywhere; } .epg-cartaz__meta { font-size: var(--epg-fs-2xs); color: var(--epg-txt-3); } .epg-cartaz__vazio { margin: 0; font-size: var(--epg-fs-xs); color: var(--epg-txt-3); } .epg-cartaz__manual { display: flex; gap: var(--epg-space-sm); } .epg-cartaz__campo { flex: 1 1 auto; min-width: 0; height: 2.25rem; padding-inline: var(--epg-space-sm); border: 1px solid var(--epg-line); border-radius: var(--epg-radius-sm); background-color: var(--epg-surf-2); color: var(--epg-txt); font-size: var(--epg-fs-sm); } .epg-cartaz__acoes { display: flex; align-items: center; gap: var(--epg-space-2xs); flex: none; } /* Remover é destrutivo: cor de alerta, mas sem virar botão primário. */ .epg-cartaz__remover { color: var(--epg-erro, #FF6B6B); } /* ------------------------------------------------------------------------- * * Sinopse na janela de cartaz * * O bloco "Na grade" fica fixo no topo e as candidatas trazem a sinopse * embaixo do nome: e a comparacao que decide. Sem ela a escolha se apoia so no * titulo -- justamente o dado que ja falhou, senao o cartaz teria sido achado * sozinho. Cartaz errado e pior que cartaz nenhum. * ------------------------------------------------------------------------- */ .epg-cartaz__grade { margin-bottom: var(--epg-space-sm); padding: var(--epg-space-xs); border: 1px solid var(--epg-line); border-radius: var(--epg-radius-sm); background-color: var(--epg-surf-1); } .epg-cartaz__grade-rot { display: block; margin-bottom: 2px; font-size: var(--epg-fs-3xs); font-weight: var(--epg-fw-semibold); text-transform: uppercase; letter-spacing: var(--epg-ls-caps); color: var(--epg-txt-4); } .epg-cartaz__grade-txt { margin: 0; font-size: var(--epg-fs-xs); line-height: var(--epg-lh-base); color: var(--epg-txt-2); } /* A opcao deixa de ser uma linha so: o texto agora tem tres partes empilhadas. */ .epg-cartaz__opcao { align-items: flex-start; } .epg-cartaz__texto { display: block; min-width: 0; } .epg-cartaz__sinopse { display: -webkit-box; overflow: hidden; margin-top: 3px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* tres linhas bastam para reconhecer o enredo */ line-clamp: 3; font-size: var(--epg-fs-2xs); line-height: 1.45; color: var(--epg-txt-3); } .epg-cartaz__sinopse--vazia { font-style: italic; color: var(--epg-txt-4); }