/* ============================================================================= i18n-seletor-publico.css — seletor de idioma das páginas ABERTAS ----------------------------------------------------------------------------- Companheiro do i18n-seletor-publico.js. Não confundir com i18n-lang-fab.css, que estiliza o 🌐 de QA (aquele é um FAB fixo; este mora no fluxo da página). TEMA — o componente roda em rodapé escuro (landing) e em página clara (login, cadastro), então nada de cor cravada: tudo sai de variáveis com padrão ESCURO. Para usar em fundo claro, a página redefine no contêiner: [data-i18n-seletor] { --i18n-sel-texto: #1a1a2e; --i18n-sel-borda: rgba(0,0,0,.15); --i18n-sel-fundo: #ffffff; --i18n-sel-hover: rgba(0,0,0,.05); --i18n-sel-sombra: 0 12px 32px rgba(0,0,0,.16); } DIREÇÃO — a lista abre para CIMA, que é o certo no rodapé (o lugar natural dele). Onde houver espaço abaixo, a página pede `data-i18n-seletor="baixo"`. ========================================================================== */ [data-i18n-seletor] { --i18n-sel-texto: rgba(255, 255, 255, .72); --i18n-sel-ativo: #ffffff; --i18n-sel-borda: rgba(255, 255, 255, .16); --i18n-sel-fundo: #12121c; --i18n-sel-hover: rgba(255, 255, 255, .08); --i18n-sel-marca: var(--gold, #d4af6a); --i18n-sel-sombra: 0 14px 40px rgba(0, 0, 0, .45); display: inline-block; } /* Páginas de tema claro (login, cadastro, redefinir-senha) marcam `` — a convenção da plataforma. Redefinir aqui poupa cada uma delas de repetir a paleta, e mantém as duas variantes lado a lado, que é o que impede uma de envelhecer sem a outra. A página ainda pode sobrescrever no seu próprio contêiner. */ html[data-theme="light"] [data-i18n-seletor] { --i18n-sel-texto: #55506b; --i18n-sel-ativo: #1a1a2e; --i18n-sel-borda: rgba(0, 0, 0, .15); --i18n-sel-fundo: #ffffff; --i18n-sel-hover: rgba(0, 0, 0, .05); --i18n-sel-sombra: 0 12px 32px rgba(0, 0, 0, .16); } .i18n-sel { position: relative; display: inline-block; /* Antecipa a pilha do rodapé: sem isto a lista aberta some atrás do bloco seguinte em qualquer layout que crie contexto de empilhamento. */ z-index: 60; } /* ── Botão ───────────────────────────────────────────────────────────────── */ .i18n-sel-botao { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font: inherit; font-size: 13px; line-height: 1.2; color: var(--i18n-sel-texto); background: transparent; border: 1px solid var(--i18n-sel-borda); border-radius: 999px; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease; } .i18n-sel-botao:hover, .i18n-sel-botao:focus-visible { color: var(--i18n-sel-ativo); border-color: var(--i18n-sel-ativo); background: var(--i18n-sel-hover); } .i18n-sel-botao > i { font-size: 15px; } .i18n-sel-seta { font-size: 14px; opacity: .7; transition: transform .18s ease; } .i18n-sel.aberto .i18n-sel-seta { transform: rotate(180deg); } /* Nome do idioma ativo. `white-space: nowrap` porque "Português (Brasil)" e "中文 (简体)" têm larguras muito diferentes e a quebra dentro da pílula fica pior do que o botão largo. */ .i18n-sel-nome { white-space: nowrap; } /* ── Lista ───────────────────────────────────────────────────────────────── */ .i18n-sel-lista { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 100%; width: max-content; max-width: 260px; /* 10 idiomas cabem em telas normais; no celular deitado, rola. */ max-height: min(340px, 60vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--i18n-sel-fundo); border: 1px solid var(--i18n-sel-borda); border-radius: 12px; box-shadow: var(--i18n-sel-sombra); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } [data-i18n-seletor="baixo"] .i18n-sel-lista { bottom: auto; top: calc(100% + 8px); transform: translateY(-6px); } .i18n-sel.aberto .i18n-sel-lista { opacity: 1; visibility: visible; transform: translateY(0); } /* Perto da borda direita da janela, a lista sai pela direita do botão. */ [data-i18n-seletor="direita"] .i18n-sel-lista { left: auto; right: 0; } .i18n-sel-item { display: block; width: 100%; padding: 9px 12px; font: inherit; font-size: 13.5px; text-align: left; color: var(--i18n-sel-texto); background: transparent; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: color .14s ease, background .14s ease; } .i18n-sel-item:hover, .i18n-sel-item:focus-visible { color: var(--i18n-sel-ativo); background: var(--i18n-sel-hover); } .i18n-sel-item.ativo { color: var(--i18n-sel-ativo); font-weight: 600; } /* A marca do idioma ativo é um traço à esquerda, não um "✓": o tique some no meio de escritas densas (日本語, 한국어) e desalinha a lista inteira. */ .i18n-sel-item.ativo { box-shadow: inset 3px 0 0 var(--i18n-sel-marca); } @media (prefers-reduced-motion: reduce) { .i18n-sel-lista, .i18n-sel-seta, .i18n-sel-botao { transition: none; } }