:root { --bg: #07080a; --surface: #15171b; --surface-2: #1b1e23; --surface-3: #0f1114; --line: #262a30; --text: #f2f3f4; --text-dim: #9aa0a8; --text-soft: #c7cbd1; /* Azul extraído da logo (#0050FF). O tom claro é usado sobre o fundo escuro, onde o azul puro não atinge contraste legível. */ --accent: #0050ff; --accent-soft: #5b8cff; --accent-dim: rgba(0, 80, 255, 0.18); --accent-dim-2: rgba(0, 80, 255, 0.35); --danger: #f2545b; --danger-dim: rgba(242, 84, 91, 0.12); /* Painéis flutuantes: translúcidos para o vídeo respirar por baixo. */ --glass: rgba(16, 18, 22, 0.72); --glass-line: rgba(255, 255, 255, 0.09); } * { box-sizing: border-box; } /* O atributo hidden equivale a display:none, mas qualquer regra de display posterior o sobrepõe. Esta declaração garante que hidden sempre esconda. */ [hidden] { display: none !important; } /* 100dvh, não 100vh: em tela cheia o viewport cresce, e o vh fixo deixava a página no tamanho antigo — o fullscreen "ligava" (o botão até acendia) mas a imagem não ocupava a tela. O dvh acompanha, e também resolve a barra de endereços móvel, que encolhe o viewport ao rolar. */ html, body { margin: 0; height: 100dvh; overflow: hidden; background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans', system-ui, sans-serif; } button { font-family: inherit; border: none; background: none; padding: 0; cursor: pointer; color: inherit; } svg { width: 100%; height: 100%; } /* O app é a moldura das camadas. As faixas ocupadas pela interface viram variáveis: o palco se encolhe dentro delas em vez de correr por baixo dos painéis, que era a origem dos choques entre vídeo, código da sala e participantes. É o modelo do Meet — a UI reserva espaço, não se sobrepõe. */ #app { position: relative; height: 100dvh; overflow: hidden; --topbar-h: 56px; --dock-h: 88px; --people-w: 0px; /* vira a largura real quando o painel está aberto */ } /* Com o painel de participantes aberto, o palco cede a faixa da direita. */ #app:has(.people:not(.collapsed)) { --people-w: 168px; } /* Em tela cheia o recebe o tamanho do monitor, mas o Chrome lhe aplica um fundo preto e não estica os filhos: sem isto o body ficava na altura antiga e sobrava moldura preta em volta do conteúdo. */ :fullscreen, :fullscreen body, :fullscreen #app { width: 100%; height: 100%; max-width: none; max-height: none; } /* O ::backdrop é pintado atrás do elemento em tela cheia; deixá-lo com a cor do app evita a borda preta aparecer em qualquer sobra de arredondamento. */ ::backdrop { background: var(--bg); } /* ---------- Palco ---------- */ .grid { position: absolute; top: var(--topbar-h); left: 0; right: var(--people-w); bottom: var(--dock-h); display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 8px; padding: 8px; transition: right 0.22s ease; } .grid:empty { display: none; } /* Colunas conforme a quantidade de tiles. Fora do destaque a faixa de miniaturas é removida do DOM (ver applyFeatured), senão ela contaria como filha e deslocaria o :nth-child destas regras. */ .grid:not(.spotlight):has(.tile:nth-child(1):last-child) { grid-template-columns: 1fr; } .grid:not(.spotlight):has(.tile:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } .grid:not(.spotlight):has(.tile:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } /* Modo destaque: um tile toma o palco, os demais viram miniaturas a direita. O :not(.spotlight) nas regras por contagem impede que elas, de igual especificidade mas declaradas antes, vencam este bloco. Grid de duas colunas com UMA linha: o destaque ocupa a coluna 1 inteira e as miniaturas empilham dentro da coluna 2, que rola se nao couberem. Como itens diretos do grid elas criavam linhas implicitas que dividiam a altura do destaque entre si, abrindo vaos enormes; com um contêiner proprio isso deixa de acontecer. */ .grid.spotlight { grid-template-columns: minmax(0, 1fr) 230px; grid-template-rows: minmax(0, 1fr); } .grid.spotlight .tile.featured { grid-column: 1; grid-row: 1; height: 100%; } /* Faixa das miniaturas: uma unica celula do grid, com rolagem propria. */ .grid.spotlight .strip { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: none; } .grid.spotlight .strip::-webkit-scrollbar { display: none; } .grid.spotlight .strip .tile { height: 130px; flex: 0 0 auto; } /* Sem destaque a faixa nao existe como caixa: os tiles voltam a ser itens diretos da grade e as regras por contagem voltam a valer. */ .strip { display: contents; } .empty-state { position: absolute; top: var(--topbar-h); left: 0; right: var(--people-w); bottom: var(--dock-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-dim); } .empty-state svg { width: 38px; height: 38px; color: #3a3f47; margin-bottom: 8px; } .empty-state p { margin: 0; font-size: 15px; color: var(--text-soft); } .empty-state span { font-size: 13px; } /* ---------- Tiles de vídeo ---------- */ .tile { position: relative; min-height: 0; background: #000; border-radius: 10px; overflow: hidden; } .tile video { width: 100%; height: 100%; object-fit: contain; display: block; } /* O cabeçalho flutua sobre o vídeo e só aparece no hover, para não cobrir o conteúdo compartilhado. */ .tile-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent); opacity: 0; transition: opacity 0.18s; pointer-events: none; } .tile:hover .tile-head, .tile:focus-within .tile-head { opacity: 1; pointer-events: auto; } .tile-who { display: flex; align-items: center; gap: 8px; min-width: 0; } .tile-avatar { width: 22px; height: 22px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tile-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } .badge { font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; color: #fff; background: rgba(255, 255, 255, 0.16); border-radius: 4px; padding: 2px 6px; flex-shrink: 0; } .tile-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .tile-timer { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } .expand-btn { width: 28px; height: 28px; padding: 7px; border-radius: 7px; background: rgba(0, 0, 0, 0.45); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .expand-btn:hover { background: rgba(0, 0, 0, 0.75); } /* Só o ícone correspondente ao estado atual aparece. */ .expand-btn .ico-shrink { display: none; } .tile.featured .expand-btn .ico-grow { display: none; } .tile.featured .expand-btn .ico-shrink { display: block; } /* ---------- Topbar flutuante ---------- */ /* Faixa de altura fixa no topo, como no Meet: identidade e código à esquerda, estado e ações à direita. Antes eram dois painéis flutuando sobre o vídeo, que se aproximavam e colidiam conforme o texto crescia. */ .topbar { position: absolute; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; } .brand, .topbar-right { display: flex; align-items: center; gap: 12px; min-width: 0; /* deixa o texto encolher em vez de empurrar o outro lado */ } /* A logo é 3:1 e já contém o nome, então dispensa texto ao lado. O PNG original é azul #0050FF sobre transparente, que rende contraste 1.25 contra o fundo quase preto — ilegível. Clarear com brightness() exigiria 4x e lavaria a cor. Em vez disso usamos o próprio PNG como máscara e pintamos com o azul claro da marca, mantendo a identidade e subindo o contraste. */ .mark { height: 26px; width: auto; flex-shrink: 0; background: var(--accent-soft); -webkit-mask: url('/logo.png') center / contain no-repeat; mask: url('/logo.png') center / contain no-repeat; aspect-ratio: 2172 / 724; } .divider { width: 1px; height: 16px; background: var(--glass-line); } .room-code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-soft); } .status-pill { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); } .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-soft); flex-shrink: 0; } .dot.idle { background: #3a3f47; } .people-count { font-size: 12.5px; color: var(--text-dim); } .icon-btn { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 8px; color: var(--text-soft); transition: background 0.15s, color 0.15s; } .icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); } .icon-btn.copied { color: var(--accent-soft); } /* ---------- Cards de participantes (flutuantes) ---------- */ /* Coluna lateral própria, na faixa que o palco cede (--people-w). Antes flutuava centralizada sobre o vídeo e cobria o conteúdo compartilhado. */ .people { position: absolute; top: var(--topbar-h); right: 0; bottom: var(--dock-h); width: 168px; z-index: 20; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 8px 0; overflow-y: auto; scrollbar-width: none; transition: opacity 0.2s, transform 0.2s; } .people::-webkit-scrollbar { display: none; } /* Escondido pelo botão: sai da tela e devolve a faixa ao palco. */ .people.collapsed { opacity: 0; pointer-events: none; transform: translateX(12px); } .person { width: 100%; padding: 12px 10px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-line); border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; flex-shrink: 0; } .person-avatar { width: 42px; height: 42px; border-radius: 999px; background: var(--accent); color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; } .person.offline .person-avatar { background: var(--surface-2); color: #5a6069; } .person-name { font-size: 12px; color: var(--text-soft); max-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person.offline .person-name { color: var(--text-dim); } .host-tag { position: absolute; top: 7px; left: 7px; font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent-soft); background: var(--accent-dim); border-radius: 4px; padding: 2px 5px; } .kick-btn { position: absolute; top: 6px; right: 6px; width: 21px; height: 21px; padding: 5px; border-radius: 999px; background: var(--danger-dim); color: var(--danger); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; } .person:hover .kick-btn { opacity: 1; } .kick-btn:focus-visible { opacity: 1; } /* ---------- Dock de controles ---------- */ /* Faixa inferior de altura fixa (--dock-h), fora da área do vídeo. */ .dock { position: absolute; bottom: 0; left: 0; right: 0; height: var(--dock-h); z-index: 20; display: flex; align-items: center; justify-content: center; } /* A dica vive na topbar, ao lado do estado. Flutuando acima da dock ela ficava sobre o vídeo e competia com o conteúdo compartilhado. */ .sharing-hint { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .controls { display: flex; align-items: center; gap: 5px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-line); border-radius: 999px; padding: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } .ctrl { width: 42px; height: 42px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 11px; color: var(--text-soft); transition: background 0.15s, color 0.15s; } .ctrl:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); } .ctrl.active { color: #fff; background: var(--accent); } .ctrl.danger { color: var(--danger); background: var(--danger-dim); } .ctrl.danger:hover { background: rgba(242, 84, 91, 0.22); } .ctrl-divider { width: 1px; height: 22px; background: var(--glass-line); margin: 0 3px; } /* ---------- Grupo fonte + opções ---------- */ /* O par vira um bloco só: o botão principal arredondado à esquerda e os três pontos colados à direita, para o menu ficar visivelmente preso à mídia. */ .ctrl-group { display: flex; align-items: center; } .ctrl-group .ctrl:first-child { border-radius: 999px 0 0 999px; padding-right: 8px; } .ctrl.dots { width: 22px; height: 42px; padding: 13px 3px; border-radius: 0 999px 999px 0; color: var(--text-dim); } .ctrl.dots:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); } .ctrl.dots[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.16); } /* ---------- Menus das fontes ---------- */ .menu { position: absolute; bottom: calc(var(--dock-h) - 4px); z-index: 40; width: 232px; max-height: calc(100vh - var(--dock-h) - var(--topbar-h) - 16px); overflow-y: auto; padding: 12px; /* Opaco, ao contrário dos painéis flutuantes: aqui o que importa é ler a lista, e o vídeo por baixo atrapalharia o contraste do texto. */ background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); } .menu-title { margin: 0 0 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); } .menu-options + .menu-title { margin-top: 14px; } .menu-options { display: flex; flex-direction: column; gap: 2px; } .menu-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border-radius: 9px; font-size: 13px; color: var(--text-soft); text-align: left; transition: background 0.14s, color 0.14s; } .menu-opt:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); } .menu-opt[aria-checked="true"] { color: var(--text); } /* A marca de seleção ocupa espaço sempre, para o texto não deslocar. */ .menu-opt .check { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent-soft); opacity: 0; } .menu-opt[aria-checked="true"] .check { opacity: 1; } .menu-opt .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-opt .hint { font-size: 11px; color: var(--text-dim); flex-shrink: 0; } .menu-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--glass-line); font-size: 11px; line-height: 1.45; color: var(--text-dim); } .menu-empty { padding: 8px 9px; font-size: 12.5px; color: var(--text-dim); } /* Botão de áudio: alterna o ícone conforme o estado. */ #audioBtn .ico-off { display: none; } #audioBtn.muted .ico-on { display: none; } #audioBtn.muted .ico-off { display: block; } #audioBtn.muted { color: var(--text-dim); } /* Autoplay bloqueado: o clique é necessário, então o botão pulsa. */ #audioBtn.attention { color: #fff; background: var(--accent); animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-dim-2); } 50% { box-shadow: 0 0 0 7px transparent; } } /* Indica no tile que aquela tela traz som. */ .tile.has-audio .badge::after { content: ' ♪'; opacity: 0.85; } /* ---------- Modo imersivo ---------- */ /* Esconde toda a interface para o vídeo ocupar a página inteira sem nada por cima. Usa opacity em vez de display para preservar a transição. */ #app.immersive .chrome { opacity: 0; pointer-events: none; } .chrome { transition: opacity 0.22s; } /* Com a interface oculta o palco usa cada pixel: as faixas reservadas para topbar, dock e participantes deixam de existir. Sem zerar as variáveis, o vídeo ficava com tarjas pretas em cima e embaixo mesmo sem interface — inclusive em tela cheia. */ /* O :has() abaixo precisa vencer a regra de --people-w declarada lá em cima, que tem a mesma forma e seria aplicada depois na ordem de origem. */ #app.immersive, #app.immersive:has(.people:not(.collapsed)) { --topbar-h: 0px; --dock-h: 0px; --people-w: 0px; } #app.immersive .grid { gap: 0; padding: 0; } #app.immersive .tile { border-radius: 0; } .reveal { position: absolute; top: 14px; right: 14px; z-index: 30; width: 38px; height: 38px; padding: 10px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-line); color: var(--text-soft); display: none; align-items: center; justify-content: center; opacity: 0.25; transition: opacity 0.18s; } #app.immersive .reveal { display: flex; } .reveal:hover { opacity: 1; } /* ---------- Overlay ---------- */ .overlay { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 100; } .overlay-card { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 0 24px; } .overlay-card h1 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; margin: 0; } .overlay-card p { margin: 0; font-size: 14px; color: var(--text-dim); max-width: 380px; line-height: 1.5; } /* ---------- Pedir entrada (sem convite do Discord) ---------- */ .ask-form { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 300px; margin-top: 4px; } .ask-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); text-align: left; } .ask-input { width: 100%; padding: 11px 13px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--surface-3); border: 1px solid var(--line); border-radius: 10px; outline: none; transition: border-color 0.15s; } .ask-input::placeholder { color: #5d646d; } .ask-input:focus { border-color: var(--accent-soft); } .ask-submit { padding: 11px 16px; font-size: 14px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 10px; transition: filter 0.15s; } .ask-submit:hover { filter: brightness(1.12); } .ask-submit:disabled { opacity: 0.55; cursor: default; filter: none; } /* ---------- Fila de aprovação (só o host) ---------- */ .knocks { position: absolute; top: calc(var(--topbar-h) + 8px); left: 12px; z-index: 30; display: flex; flex-direction: column; gap: 8px; width: 268px; max-height: calc(100vh - var(--topbar-h) - var(--dock-h) - 16px); overflow-y: auto; scrollbar-width: none; } .knocks::-webkit-scrollbar { display: none; } /* Opaco: é uma decisão a tomar, não um enfeite sobre o vídeo. */ .knock { padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5); } .knock-who { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .knock-avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .knock-text { min-width: 0; } .knock-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .knock-sub { font-size: 11.5px; color: var(--text-dim); } .knock-actions { display: flex; gap: 7px; } .knock-btn { flex: 1; padding: 8px; font-size: 12.5px; font-weight: 600; border-radius: 8px; transition: filter 0.15s, background 0.15s; } .knock-btn.admit { color: #fff; background: var(--accent); } .knock-btn.admit:hover { filter: brightness(1.12); } .knock-btn.deny { color: var(--text-soft); background: var(--surface-2); } .knock-btn.deny:hover { background: #262a30; color: var(--text); } /* Selo de convidado: quem entrou pelo link, sem verificação do Discord. */ .guest-tag { font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); background: rgba(255, 255, 255, 0.09); border-radius: 4px; padding: 2px 5px; position: absolute; top: 6px; left: 6px; } .spinner { width: 28px; height: 28px; border: 2px solid var(--line); border-top-color: var(--accent-soft); border-radius: 999px; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 760px) { .topbar { top: 10px; left: 10px; right: 10px; } .people-count, .status-pill { display: none; } .people { top: auto; bottom: 104px; left: 10px; right: 10px; transform: none; flex-direction: row; max-height: none; overflow-x: auto; } .people.collapsed { transform: translateY(8px); } .person { width: 96px; padding: 9px 7px; } .person-avatar { width: 34px; height: 34px; font-size: 12px; } .grid, .grid:not(.spotlight):has(.tile:nth-child(2):last-child) { grid-template-columns: 1fr; } .grid.spotlight { grid-template-columns: 1fr; } .grid.spotlight .tile { grid-column: 1; height: 86px; } .ctrl { width: 38px; height: 38px; padding: 10px; } }