/* ============================================================================= xbrazilians — edge_override.css (carregar DEPOIS de black_orange.css?v=2.32) KVS 6.4.0 · tema black_orange · nginx O QUE FAZ 1. Mídia de FORA A FORA só no MOBILE/TABLET (≤1024px): a grade de thumbs (home, categoria, modelos, canais, "assistindo agora", relacionados) e o PLAYER da single encostam nas laterais da tela. Texto (títulos, metadados, headings, menus) mantém um respiro de 10px — o mesmo 10px que o tema já usa em .container, para que todo texto da página compartilhe UMA borda esquerda. 2. No DESKTOP (≥1025px) nada aqui força full-bleed: a grade e a single voltam ao layout CONTIDO nativo do tema black_orange (.video-cols vira grid [1fr 360px] limitado a 1560px — player contido + lateral à direita, relacionados em grade), igual ao PimpBunny/YouTube. COMO FAZ (sem quebrar scroll horizontal) O tema usa .container{padding:0 10px} e .thumbs{margin:0 -5px} + .thumb{padding:5px}. Em vez do truque de 100vw (que, no Windows, inclui a barra de rolagem e abre scroll horizontal de ~8px), tudo aqui é calculado a partir do padding CONHECIDO do container (--xb-frame = 10px). Nada aqui depende de vw na horizontal. Esquema da grade: .thumbs margin-left = -(frame + gap) → a caixa começa 1 gap ANTES da tela .thumbs margin-right = -frame → e termina exatamente na borda direita .thumb padding-left = gap → cada tile "paga" 1 gap à esquerda Resultado: a 1ª imagem de cada fila começa em x=0, a última termina em x=vw, e entre tiles sobra exatamente 1 gap. Vale para QUALQUER número de colunas (20%, 25%, 33%, 50%, 100% e para o CSS grid .grid-temp), então as contagens de colunas por breakpoint do tema ficam intocadas. Overflow à esquerda (x negativo) não gera barra de rolagem; à direita a caixa termina em vw. Logo: zero scroll horizontal. KNOBS (uma variável, um porquê): --xb-frame 10px = padding do .container do tema. Se o tema mudar, mude aqui. --xb-gap 6px calha entre tiles. Pequena = tiles maiores = sensação de "site largo" (PimpBunny/YouTube). Não é 0 para a grade não virar um mosaico sem leitura de "onde um vídeo termina". --xb-row-gap 20px separação vertical entre filas (24px no mobile 1 coluna). Maior que os 8px internos (img→título→meta) para cada card ler como UMA unidade (Gestalt: proximidade). --xb-text-inset 10px respiro lateral do texto do card = --xb-frame → o título do card alinha com o heading "Novos vídeos" acima dele. --xb-media-radius 0 mídia colada na borda não pode ter canto redondo: o canto arredondado precisa de "chão" ao redor para ler como objeto; encostado na borda vira "recorte". Player também é 0. Para voltar ao visual antigo: 10px. ============================================================================= */ :root { --xb-frame: 10px; --xb-gap: 6px; --xb-row-gap: 20px; --xb-text-inset: 10px; --xb-media-radius: 0px; } /* Cinto e suspensório: nada abaixo deve vazar para a direita, mas se algum bloco de terceiros (banner, swiper) vazar, `clip` corta SEM criar contêiner de rolagem (diferente de overflow:hidden, que quebraria o lazy-load que escuta o scroll da janela e o position:sticky). Navegador antigo ignora e nada muda. */ .wrapper { overflow-x: clip; } /* ----------------------------------------------------------------------------- 1. GRADE DE THUMBS DE FORA A FORA — home, categoria, modelos, canais, álbuns, "assistindo agora" (ul.grid-temp) e relacionados no mobile/tablet. Escopo: qualquer .thumbs dentro de
cujo pai NÃO seja a lateral (.asside-thumb), que é uma lista de 1 coluna dentro de um trilho de 360px e não tem por que encostar na borda. SÓ MOBILE/TABLET (≤1024px): no desktop a grade volta ao layout CONTIDO nativo do tema. Por isso todo este bloco está dentro do @media abaixo. ----------------------------------------------------------------------------- */ @media (max-width: 1024px) { .main :not(.asside-thumb) > .thumbs { margin-left: calc(-1 * (var(--xb-frame) + var(--xb-gap))); margin-right: calc(-1 * var(--xb-frame)); } /* Tiles: o padding 5px uniforme do tema vira "1 gap à esquerda + 1 row-gap embaixo". Largura (20% / 25% / 33% / 50% / 100%) continua a do tema — só padding muda. */ .main :not(.asside-thumb) > .thumbs > .thumb, .main :not(.asside-thumb) > .thumbs > .grid-temp > li > .thumb { box-sizing: border-box; padding: 0 0 var(--xb-row-gap) var(--xb-gap); } /* "Assistindo agora" é CSS grid (6→5→4→3→2 colunas no tema). A caixa .thumbs já foi deslocada acima; o grid só precisa ocupar 100% dela e não somar gap próprio (o tema põe row-gap 5px; a fila já ganha --xb-row-gap pelo padding do tile). */ .main :not(.asside-thumb) > .thumbs > .grid-temp { width: 100%; margin: 0; grid-row-gap: 0; row-gap: 0; } .main :not(.asside-thumb) > .thumbs > .grid-temp > .spot { padding-left: var(--xb-gap); /* o tema usava 5px = o padding antigo do tile */ } /* Canto da mídia (ver --xb-media-radius). Inclui a lateral da single, para a linguagem de borda ser UMA só em todas as telas (header ↔ grade ↔ single). */ .main .thumb .img-holder { border-radius: var(--xb-media-radius); } /* Texto do card com respiro lateral. Só o título e a linha de metadados que são filhos diretos do link ( > .title / .thumb-bottom). O .cat-title das categorias é um overlay dentro da imagem com padding próprio: fica fora. */ .main :not(.asside-thumb) > .thumbs .thumb > a > .title, .main :not(.asside-thumb) > .thumbs .thumb > a > .thumb-bottom, .main :not(.asside-thumb) > .thumbs .thumb > a > .thumb-info { padding-left: var(--xb-text-inset); padding-right: var(--xb-text-inset); } } /* fim @media (max-width:1024px) — grade full-bleed só no mobile/tablet */ /* Mobile 1 coluna (o tema põe .thumb{width:100%} em ≤480px): a imagem ocupa a tela inteira, como YouTube/PimpBunny. Com 100% de largura, o padding-left = gap já é compensado pelo margin-left da caixa (imagem vai de 0 a vw). Só abrimos mais a fila: 24px para cada vídeo respirar — no polegar, um card por tela de rolagem. */ @media (max-width: 480px) { :root { --xb-row-gap: 24px; } } /* ----------------------------------------------------------------------------- 2. SINGLE — PLAYER DE FORA A FORA (mobile e tablet, ≤1024px) .video-cols é flex em coluna (tema). O player cancela o padding do container e passa a ser o PRIMEIRO item (YouTube/PimpBunny: o vídeo é o herói; o h1 continua primeiro no DOM — SEO intocado — só a ordem visual muda). Altura continua pelo padding-bottom inline do tema (proporção exata do arquivo; vídeo vertical continua vertical). ----------------------------------------------------------------------------- */ @media (max-width: 1024px) { /* Em EXATAMENTE 1024px (iPad em paisagem) o tema esconde a lateral (max-width:1024px) mas o bloco custom do tema liga o grid (min-width:1024px): sobrava uma coluna de 360px vazia à direita. Aqui o flex em coluna do tema volta a valer em 1024 e o grid só começa em 1025. */ .wrapper .video-cols { display: flex; max-width: none; } /* .col-video vira flex em coluna: é o que permite `order:-1` no player (order só vale para itens flex; o flex do tema é o .video-cols, cujos itens são as duas colunas, não o player). Filhos continuam em largura total (align-items:stretch é o padrão). */ .wrapper .video-cols .col-video { display: flex; flex-direction: column; } .main .video-cols .col-video > .player { order: -1; margin-left: calc(-1 * var(--xb-frame)); margin-right: calc(-1 * var(--xb-frame)); } .main .video-cols .col-video > .player .player-wrap { border-radius: var(--xb-media-radius); background: #000; } } /* ----------------------------------------------------------------------------- DESKTOP (≥1025px): SEM override aqui — de propósito. O tema black_orange já tem um desktop CONTIDO nativo: .video-cols vira grid [1fr 360px] limitado a 1560px (player contido + lateral à direita + relacionados em grade), e .main > .container trava a largura. Qualquer regra full-bleed "modo cinema" nesta faixa sobreporia esse layout e deixava o player colado nas laterais e os relacionados em 1 coluna esparsa — foi removida. ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- OPCIONAL (desligado): header e rodapé também sem o teto de 1860px. Em monitores ≥1861px (1920 a 100%), o logo/menu ficam 30px mais para dentro que os headings da home, porque .main já é sem teto e header/rodapé não. Ligar isto alinha tudo numa borda só. Fica desligado porque o header está em obra em paralelo — ligar quando o orquestrador validar. @media (min-width: 1025px) { .header .container, .footer .container { max-width: none; } } ----------------------------------------------------------------------------- */