/* font-family aqui de propósito (não só nos textos que hoje existem) -- herda pra TODOS os descendentes (título, dropdown "Mais", menu do usuário, o que vier a ser adicionado depois), então não depende de lembrar de repetir var(--ff) em cada seletor novo. Existe porque perfil.php seta --font-family (a fonte ESCOLHIDA pelo dono do flog) em body{font-family:var(--font-family, inherit)} -- sem esse reset aqui, a Barra (que aparece em CIMA do flog, fora de .conteudo) herdava a fonte do dono só por estar dentro do mesmo . Mesma ideia nos modais (.auth-modal/.postar-modal/.config-modal) mais abaixo neste arquivo. */ .barra { position: sticky; top: 0; left: 0; width: 100%; height: 55px; background: color-mix(in srgb, var(--panel) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(20, 16, 31, 0.08); font-family: var(--ff); z-index: 40; } .barra__inner { position: relative; width: 100%; max-width: var(--container); height: 55px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .barra__esquerda { display: flex; align-items: center; gap: 1.5rem; min-width: 0; } .barra__logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .barra__logo-svg { height: 30px; width: auto; display: block; } /* Utilitário genérico -- some visualmente mas continua lido por leitor de tela (texto alternativo do logo, já que o SVG em si é aria-hidden). */ .oculto-visual { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Efeito "arco-íris deslizante" no hover (tipo Tumblr). O gradiente vive dentro do próprio SVG (ver Barra::logoSvg()) e desliza sozinho via , sempre rodando -- só troca de aparência quando o fill dos passa a apontar pra ele, no hover. As cores de cada "parada" do gradiente ficam aqui em CSS (não no XML do SVG) só pra ser fácil de ajustar sem mexer no PHP. */ .barra__logo-parada--vermelho { stop-color: #ff3b30; } .barra__logo-parada--laranja { stop-color: #ff9500; } .barra__logo-parada--amarelo { stop-color: #ffcc00; } .barra__logo-parada--verde { stop-color: #34c759; } .barra__logo-parada--azul { stop-color: #007aff; } .barra__logo-parada--roxo { stop-color: #7c3aed; } .barra__logo:hover .barra__logo-svg path { fill: url(#barra-logo-degrade); } .barra__hamburguer { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: none; border: none; color: var(--text); font-size: 1.3rem; cursor: pointer; transition: background-color var(--t); } .barra__hamburguer:hover { background: var(--accent-06); } .barra__nav { display: flex; align-items: stretch; gap: 1.25rem; height: 55px; } .barra__navlink { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; color: color-mix(in srgb, var(--text-2) 65%, var(--text) 35%); font-size: 0.85rem; font-weight: var(--fw-semibold); text-decoration: none; transition: color var(--t); } .barra__navlink i { font-size: 1rem; } .barra__navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; border-radius: var(--radius-pill) var(--radius-pill) 0 0; transform: scaleX(0); transform-origin: center; transition: transform var(--t), background-color var(--t); } .barra__navlink:hover { color: var(--accent); } .barra__navlink:hover::after { background: var(--accent); transform: scaleX(1); } .barra__navlink--ativo { color: var(--accent); } .barra__navlink--ativo::after { background: var(--accent); transform: scaleX(1); } .barra__navlink--mais:hover { color: var(--text); } .barra__navlink--mais:hover::after { background: transparent; transform: scaleX(0); } .barra__nav-mais { position: relative; display: flex; align-items: stretch; height: 100%; } .barra__nav-dropdown { position: absolute; left: -0.5rem; top: calc(100% + 0.2rem); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sombra-lg); min-width: 190px; padding: 0.35rem; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity var(--t), transform var(--t), visibility var(--t); } .barra__nav-mais--aberto .barra__nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .barra__nav-dropdown-item { display: block; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: 0.85rem; font-weight: var(--fw-medium); transition: color var(--t); } .barra__nav-dropdown-item:not(:last-child) { border-bottom: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: 2px; } .barra__nav-dropdown-item:hover { color: var(--accent); } .barra__nav-dropdown-item--ativo { color: var(--accent); font-weight: var(--fw-semibold); } .barra__nav-dropdown-item--com-selo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .barra__direita { display: flex; align-items: center; gap: 0.65rem; flex: 0 0 auto; } /* Botões reutilizáveis */ .botao { min-height: 36px; padding: 0 1rem; border: 1px solid transparent; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--panel); color: var(--text); font-family: var(--ff); font-size: 0.8rem; font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer; transition: filter var(--t), border-color var(--t), color var(--t), transform var(--t), box-shadow var(--t); } .botao-primario { --cor: var(--accent); background: linear-gradient( 180deg, color-mix(in srgb, var(--cor) 82%, white 18%) 0%, var(--cor) 45%, color-mix(in srgb, var(--cor) 92%, black 8%) 100% ); border-color: color-mix(in srgb, var(--cor) 78%, black 22%); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); box-shadow: inset 0 1px 0 var(--botao-brilho-alto), inset 0 -3px 5px var(--botao-sombra-interna), 0 1px 2px var(--botao-sombra-externa); } .botao-primario:hover { filter: brightness(1.06); } .botao-primario:active { box-shadow: inset 0 2px 4px var(--botao-sombra-interna); transform: translateY(1px); } .botao-contorno { background: transparent; color: var(--text); border-color: var(--border-forte); } .botao-contorno:hover { border-color: var(--accent); color: var(--accent); } /* Mesma fórmula do .botao-primario, só trocando --cor pro tom de perigo -- usado nas ações destrutivas (ver conta.php: desativar/excluir conta). */ .botao-perigo { --cor: var(--danger); background: linear-gradient( 180deg, color-mix(in srgb, var(--cor) 82%, white 18%) 0%, var(--cor) 45%, color-mix(in srgb, var(--cor) 92%, black 8%) 100% ); border-color: color-mix(in srgb, var(--cor) 78%, black 22%); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); box-shadow: inset 0 1px 0 var(--botao-brilho-alto), inset 0 -3px 5px var(--botao-sombra-interna), 0 1px 2px var(--botao-sombra-externa); } .botao-perigo:hover { filter: brightness(1.06); } .botao-perigo:active { box-shadow: inset 0 2px 4px var(--botao-sombra-interna); transform: translateY(1px); } .botao--largo { padding-inline: 1.5rem; } .botao--bloco { width: 100%; } /* Botão menor pras linhas de lista do modal "Minhas contas" (ver assets/js/barra-nav.js) -- mesma família visual, só reduzindo altura. */ .botao--pequeno { min-height: 28px; padding: 0 0.7rem; font-size: 0.75rem; } .botao--icone { width: 36px; padding: 0; flex: 0 0 auto; } .botao--icone.botao--pequeno { width: 28px; } .botao:disabled { opacity: 0.6; cursor: not-allowed; filter: none; transform: none; } /* Mensagens + Notificações mais coladas entre si do que do resto da .barra__direita (que já tem seu próprio gap maior) -- pedido explícito. */ .barra__icones-rapidos { display: flex; align-items: center; gap: 0.1rem; } .barra__icone-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-2); text-decoration: none; } .barra__icone-link:hover { background: var(--accent-06); color: var(--text); } .barra__icone-link i { font-size: 1.15rem; } /* Postar + Boost grudados num botão só (pedido explícito -- Boost é uma ação secundária de quem já teria aberto o Postar de qualquer forma). O wrapper carrega .botao.botao-primario (fundo/gradiente/sombra compartilhados) só que sem o padding/gap deles -- quem tem padding próprio são os 2 segmentos internos, com overflow:hidden no wrapper pra o divisor e os cantos arredondados ficarem certos nos dois. */ .barra__postar-grupo { padding: 0; gap: 0; overflow: hidden; } .barra__postar-grupo__postar, .barra__postar-grupo__boost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 36px; background: none; border: none; color: inherit; font: inherit; font-weight: inherit; text-shadow: inherit; cursor: pointer; } .barra__postar-grupo__postar { padding: 0 1rem; } .barra__postar-grupo__boost { padding: 0 0.75rem; } .barra__postar-grupo__divisor { align-self: stretch; width: 1px; margin: 7px 0; background: rgba(255, 255, 255, 0.35); } /* "Bullet" com quanto resta hoje (número ou ∞) -- Pixelog\Postagens\Boost::status(). Fundo escuro fixo (não var(--accent), que É o próprio fundo do botão aqui -- ficaria invisível) igual ao .selo-contagem de notificação, só que inline no fluxo em vez de posicionado em cima de um ícone. */ .barra__postar-grupo__contador { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: rgba(0, 0, 0, 0.28); font-size: 0.68rem; font-weight: var(--fw-semibold); line-height: 1; } .barra__botao-boost:disabled { opacity: 0.45; cursor: not-allowed; } .barra__login-icone { display: none; } .selo-contagem { position: absolute; top: 2px; right: 2px; background: var(--danger); color: #fff; font-size: 0.6rem; font-weight: var(--fw-semibold); line-height: 1; border-radius: var(--radius-pill); padding: 0.15rem 0.3rem; } /* Selo do link "Online" (Barra::totalOnlineAgora()) -- verde (status "ao vivo"), não vermelho como .selo-contagem: não é um "não lido" que some quando zera, é a contagem de verdade de quem tá online agora, sempre visível, sem inflar (ver Loops\Online). Já nasce estático (nunca precisa do position:absolute de .selo-contagem, que é pra flutuar sobre ícone). */ .selo-online { display: inline-block; background: var(--success); color: #fff; font-size: 0.6rem; font-weight: var(--fw-semibold); line-height: 1; border-radius: var(--radius-pill); padding: 0.15rem 0.3rem; } .barra__usuario-menu { position: relative; } .barra__usuario { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem 0.3rem 0.3rem; border-radius: var(--radius-pill); background: none; border: none; cursor: pointer; } .barra__usuario:hover { background: var(--accent-06); } .barra__usuario-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-16); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); font-size: 0.8rem; flex: 0 0 auto; } /* Mesmo lugar/tamanho do círculo com a inicial, só que com a foto de perfil de verdade quando ela existe (ver Barra::direitaLogado()). */ .barra__usuario-avatar-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .barra__usuario-nome { font-size: 0.85rem; font-weight: var(--fw-medium); color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barra__dropdown { position: absolute; right: 0; top: calc(100% + 0.5rem); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sombra); min-width: 190px; padding: 0.4rem; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity var(--t), transform var(--t), visibility var(--t); } .barra__usuario-menu--aberto .barra__dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .barra__dropdown-item { display: block; width: 100%; padding: 0.55rem 0.65rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--text-2); text-decoration: none; font-size: 0.85rem; font-family: var(--ff); font-weight: var(--fw-medium); text-align: left; cursor: pointer; transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t); } .barra__dropdown-separador { height: 1px; margin: 0.35rem 0.2rem; background: var(--border); } .barra__dropdown-item:hover { color: var(--accent); } .barra__dropdown-item--sair { color: var(--danger); } /* Item do dropdown com selo de contagem (ver Barra::direitaLogado()). .selo-contagem por padrão é position:absolute (feito pra flutuar sobre um ícone quadrado); aqui vira inline mesmo, no fim da linha do item. */ .barra__dropdown-item--com-selo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .barra__dropdown-item--com-selo .selo-contagem { position: static; } .barra__form-sair { margin: 0; } .barra__offcanvas-fundo { position: fixed; inset: 0; background: rgba(20, 16, 31, 0.45); opacity: 0; visibility: hidden; transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), visibility 380ms cubic-bezier(0.22, 1, 0.36, 1); z-index: 90; } .barra__offcanvas-fundo--aberto { opacity: 1; visibility: visible; } .barra__offcanvas { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 85vw); background: var(--panel-2); box-shadow: var(--sombra-lg); font-family: var(--ff); z-index: 100; display: flex; flex-direction: column; padding: 1rem; transform: translateX(-100%); transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; } .barra__offcanvas--aberto { transform: translateX(0); } .barra__offcanvas-cabecalho { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.75rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .barra__offcanvas-fechar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: none; border: 1px solid color-mix(in srgb, var(--border-forte) 55%, transparent); color: var(--text-2); cursor: pointer; transition: background-color var(--t), color var(--t), border-color var(--t); } .barra__offcanvas-fechar:hover { background: var(--accent-06); color: var(--text); } .barra__offcanvas-nav { display: flex; flex-direction: column; } .barra__offcanvas-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 0.5rem; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: 0.95rem; font-weight: var(--fw-semibold); transition: background-color var(--t), color var(--t); } .barra__offcanvas-link--com-selo { justify-content: space-between; } .barra__offcanvas-link i { font-size: 1.1rem; } .barra__offcanvas-link:hover { background: var(--accent-06); color: var(--text); } .barra__offcanvas-separador { height: 1px; background: var(--border); margin: 0.5rem 0; } .barra__offcanvas-rodape { margin-top: auto; padding-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; } .rodape { width: 100%; background: var(--rodape-bg); overflow-x: clip; /* Empurra o rodapé pro fim da viewport quando o conteúdo não preenche a tela (ver reset.css: body virou flex column pra isso funcionar). */ margin-top: auto; } .rodape__inner { display: flex; flex-direction: column; gap: var(--esp-5); width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--esp-7) var(--esp-6); } .rodape__novos { display: flex; gap: var(--esp-3); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; user-select: none; padding-top: 44px; margin-top: -44px; padding-bottom: 2px; } .rodape__novos:active { cursor: grabbing; } .rodape__novos::-webkit-scrollbar { display: none; } .rodape__avatar { flex: 0 0 auto; width: 44px; height: 44px; position: relative; display: block; } .rodape__avatar-recorte { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--accent-10); } .rodape__avatar-img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .rodape__avatar-inicial { font-size: 0.85rem; font-weight: var(--fw-semibold); color: var(--accent); pointer-events: none; } [data-dica] { position: relative; } [data-dica]::after { content: attr(data-dica); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); background: #14101f; color: #fff; font-size: 0.72rem; font-weight: var(--fw-medium); padding: 0.32rem 0.6rem; border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t); z-index: 5; } [data-dica]::before { content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #14101f; opacity: 0; pointer-events: none; transition: opacity var(--t); z-index: 5; } [data-dica]:hover::after, [data-dica]:focus-visible::after, [data-dica]:hover::before, [data-dica]:focus-visible::before { opacity: 1; transform: translate(-50%, 0); } .rodape__novos .rodape__avatar:first-child[data-dica]::after { left: 0; transform: translate(0, 4px); } .rodape__novos .rodape__avatar:first-child[data-dica]::before { left: 18px; transform: translateX(0); } .rodape__novos .rodape__avatar:first-child[data-dica]:hover::after, .rodape__novos .rodape__avatar:first-child[data-dica]:focus-visible::after { transform: translate(0, 0); } .rodape__novos .rodape__avatar:last-child[data-dica]::after { left: auto; right: 0; transform: translate(0, 4px); } .rodape__novos .rodape__avatar:last-child[data-dica]::before { left: auto; right: 18px; transform: translateX(0); } .rodape__novos .rodape__avatar:last-child[data-dica]:hover::after, .rodape__novos .rodape__avatar:last-child[data-dica]:focus-visible::after { transform: translate(0, 0); } .rodape__menu { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-6); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rodape__menu::-webkit-scrollbar { display: none; } .rodape__menu-item { flex: 0 0 auto; color: var(--text-2); text-decoration: none; font-size: 0.82rem; transition: color var(--t); } .rodape__menu-item:hover { color: var(--accent); } .rodape__base { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap; } .rodape__copyright { margin: 0; font-size: 0.78rem; color: var(--text-3); } .rodape__idioma { position: relative; margin-left: auto; } .rodape__idioma-gatilho { display: flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.3rem 0.7rem; font-family: var(--ff); font-size: 0.78rem; color: var(--text-2); cursor: pointer; transition: border-color var(--t), color var(--t); } .rodape__idioma-gatilho:hover { border-color: var(--border-forte); color: var(--text); } .rodape__idioma-gatilho i { font-size: 0.9rem; transition: transform var(--t); } .rodape__idioma-gatilho[aria-expanded="true"] i { transform: rotate(180deg); } .rodape__idioma-bandeira { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; } .rodape__idioma-dropdown { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 160px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sombra-lg); padding: 0.35rem; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--t), transform var(--t), visibility var(--t); z-index: 20; } .rodape__idioma--aberto .rodape__idioma-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .rodape__idioma-opcao { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: var(--radius-xs); color: var(--text-2); text-decoration: none; font-size: 0.82rem; transition: background var(--t), color var(--t); } .rodape__idioma-opcao:hover { background: var(--accent-06); color: var(--text); } .rodape__idioma-opcao--ativo { color: var(--accent); font-weight: var(--fw-semibold); } @media (max-width: 640px) { .rodape__inner { padding: var(--esp-6) var(--esp-4); } .rodape__base { justify-content: space-between; } .rodape__idioma { margin-left: 0; } .rodape__idioma-dropdown { right: auto; left: 0; } } @media (min-width: 901px) { .barra__offcanvas, .barra__offcanvas-fundo { display: none; } } @media (max-width: 900px) { .barra__inner { padding-inline: 0.85rem; } .barra__nav { display: none; } .barra__hamburguer { display: inline-flex; } .barra__auth-desktop { display: none; } .barra__login-icone { display: inline-flex; } /* .barra__direita já é flex-shrink:0 (não encolhe) -- em telas estreitas não sobra espaço pro logo/hamburguer do outro lado. Some no mobile (ação secundária, Postar sozinho continua disponível). */ .barra__postar-grupo__boost, .barra__postar-grupo__divisor { display: none; } } @media (max-width: 640px) { .barra__inner { padding-inline: 0.75rem; gap: 0.75rem; } .barra__esquerda { gap: 0.75rem; } .barra__usuario-nome { display: none; } [data-abrir-modal-postar] { padding: 0 0.75rem; } } /* Modal de postar foto -- layout "estilo Insta" (mídia de um lado, campos do outro), mesmo shell animado dos outros modais do site (.auth-modal/ .config-modal: opacity+scale, não display:none/block cru) e sem nenhuma cor fixa -- tudo em var(--...) de tokens.css, então respeita claro/escuro igual o resto do site (o modal antigo era sempre escuro, cores fixas tipo Discord, nem acompanhava o tema). */ body.modal-postar-aberto { overflow: hidden; } .postar-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 12px; opacity: 0; font-family: var(--ff); visibility: hidden; pointer-events: none; transition: opacity var(--t), visibility var(--t); } .postar-modal.esta-aberto { opacity: 1; visibility: visible; pointer-events: auto; } .postar-modal__fundo { position: absolute; inset: 0; background: rgba(20, 16, 31, .6); } .postar-modal__janela { position: relative; z-index: 1; width: min(100%, 920px); max-height: calc(100vh - 24px); background: var(--panel); border-radius: var(--radius-xl); display: flex; flex-direction: column; overflow: hidden; transform: translateY(8px) scale(.985); transition: transform var(--t); } .postar-modal.esta-aberto .postar-modal__janela { transform: translateY(0) scale(1); } .postar-modal__cabecalho { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--border); } .postar-modal__titulo { margin: 0; font-size: 1rem; font-weight: var(--fw-semibold); color: var(--text); } .postar-modal__fechar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: none; border: 0; color: var(--text-3); font-size: 1.1rem; cursor: pointer; transition: background-color var(--t), color var(--t); } .postar-modal__fechar:hover { background: var(--accent-06); color: var(--text); } #postar-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* Corpo em 2 colunas no desktop (mídia | campos); no mobile empilha (ver media query mais abaixo). */ .postar-modal__corpo { display: flex; flex: 1 1 auto; min-height: 0; } .postar-modal__midia { flex: 1 1 55%; min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem; border-right: 1px solid var(--border); } .postar-modal__lado { flex: 1 1 75%; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .postar-modal__campos { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.9rem; } .postar-modal__rodape { flex: 0 0 auto; padding: 0.85rem 1rem; border-top: 1px solid var(--border); } /* Modo edição (ver window.pixelogAbrirEdicaoPost em assets/js/postar.js, usado por fotos.php) -- mesmo modal de publicar, só que sem a foto (não dá pra trocar a foto de um post já publicado) e sem colaborador/ programar (colaborador é convite, editar isso reabriria um fluxo de aceitar/recusar no meio de "corrigir legenda"; programar postagem não faz sentido pra algo que já foi publicado). .postar-modal__lado ocupa a largura toda sozinho -- flex:1 1 45% já cresce pra 100% quando .midia some, não precisa de regra extra pra isso. */ .postar-modal--edicao .postar-modal__midia, .postar-modal--edicao .postar-abas, .postar-modal--edicao label[for="postarColabToggle"], .postar-modal--edicao label[for="postarProgramarToggle"] { display: none; } /* O botão de enviar usa as classes padrão do site (.botao/.botao-primario/ .botao--bloco -- as mesmas do botão "Criar conta" e do "Postar" que abre este modal), então não precisa de nenhum CSS próprio aqui. */ /* Abas Foto única / Carrossel -- ficam no topo da coluna de campos (mesmo lado de título/descrição), junto do resto do formulário. */ .postar-abas { flex: 0 0 auto; display: flex; gap: 0.4rem; } .postar-aba { flex: 1 1 0; background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-sm); padding: 0.5rem; font-size: 0.8rem; font-weight: var(--fw-medium); cursor: pointer; transition: border-color var(--t), color var(--t), background-color var(--t); } .postar-aba--ativa { background: var(--accent-06); border-color: var(--accent); color: var(--accent); } .postar-aba:disabled { opacity: 0.5; cursor: not-allowed; } /* Dropzone -- preenche o resto da coluna de mídia. Já tentei centralizar o estado vazio (#postarConteudoVazio) com flex (align-items/justify-content) e depois com grid (place-items) e nenhum dos dois centralizava de verdade na prática -- o conteúdo sempre ficava puxado pro topo. Trocado por position:absolute + top/left 50% + transform: essa técnica centraliza em relação ao .postar-arquivo (position:relative) sem depender de como o pai distribui o espaço livre, então não tem como dar errado de novo. Quando os arquivos chegam, o grid de preview (flex:1 + align-self:stretch) toma esse mesmo espaço todo, tipo a área de foto do Insta. */ .postar-arquivo { flex: 1 1 auto; min-height: 280px; border: 2px dashed var(--border-forte); border-radius: var(--radius); padding: 1.25rem; cursor: pointer; transition: border-color var(--t), background-color var(--t); position: relative; } .postar-arquivo:hover { border-color: var(--accent); background: var(--accent-06); } .postar-arquivo.is-dragover { border-color: var(--accent); background: var(--accent-06); } .postar-arquivo__entrada { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .postar-arquivo__interno { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; max-width: 340px; width: calc(100% - 2.5rem); } .postar-arquivo__icone { display: block; margin: 0 auto 0.5rem; font-size: 2rem; color: var(--text-3); } .postar-arquivo__titulo { font-size: 0.9rem; font-weight: var(--fw-medium); color: var(--text-2); } .postar-arquivo__dica { margin-top: 0.4rem; font-size: 0.75rem; color: var(--text-3); line-height: 1.5; } .postar-preview-grid { flex: 1 1 auto; align-self: stretch; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-auto-rows: min-content; gap: 0.6rem; align-content: start; overflow-y: auto; } .postar-preview-item { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; cursor: grab; } .postar-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .postar-preview-item__remover { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: var(--radius-pill); border: 0; background: rgba(0, 0, 0, .65); color: #fff; font-size: 0.9rem; line-height: 1; cursor: pointer; } .postar-aviso { flex: 0 0 auto; padding: 0.6rem 0.8rem; border-radius: var(--radius); font-size: 0.85rem; } .postar-aviso--erro { background: var(--danger-10); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); } .postar-aviso--sucesso { background: var(--success-10); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); } .postar-progresso { flex: 0 0 auto; } .postar-progresso__trilho { height: 6px; border-radius: var(--radius-pill); background: var(--panel-2); overflow: hidden; } .postar-progresso__barra { height: 100%; width: 0; background: var(--accent); transition: width .2s; } .postar-progresso__texto { margin-top: 0.35rem; font-size: 0.75rem; color: var(--text-3); } .form-grupo { flex-direction: column; gap: 0.35rem; } .form-grupo:not([hidden]) { display: flex; } .form-label { font-size: 0.8rem; color: var(--text-2); } /* Dentro do postar-modal os labels ganham mais peso -- várias dicas explicativas foram encurtadas/removidas (Música do flog, switches em "Configurações adicionais"), então o rótulo sozinho precisa carregar mais destaque visual pra não perder clareza. */ .postar-modal__campos .form-label { font-size: 0.85rem; font-weight: var(--fw-semibold); color: var(--text); } .form-controle { width: 100%; min-height: 40px; padding: 0.55rem 0.65rem; border-radius: var(--radius); border: 1px solid var(--border-forte); background: var(--panel-2); color: var(--text); font-family: var(--ff); font-size: 0.85rem; box-sizing: border-box; transition: border-color var(--t); } .form-controle:focus-visible { outline: none; border-color: var(--accent); } .form-controle--textarea { min-height: 90px; resize: vertical; } .campo-dica { font-size: 0.75rem; color: var(--text-3); min-height: 1em; } .campo-dica a { color: var(--accent); text-decoration: underline; } .campo-dica a:hover { text-decoration: none; } .campo-dica--ok { color: var(--success); } .campo-dica--erro { color: var(--danger); } .campo-dica--verificando { color: var(--accent); } .form-controle.campo--erro { border-color: var(--danger); } .form-controle.campo--ok { border-color: var(--success); } @media (max-width: 720px) { .postar-modal__janela { max-height: calc(100vh - 24px); } .postar-modal__corpo { flex-direction: column; overflow-y: auto; } .postar-modal__midia { border-right: 0; border-bottom: 1px solid var(--border); } .postar-arquivo { min-height: 220px; } .postar-modal__lado { min-height: 260px; } } /* Colaboradores (dentro do postar-modal) -- busca ao vivo + chips. Ver assets/js/postar.js. Antes vivia (com cores fixas) em base.css; trazido pra cá porque barra.css é a única folha carregada em TODA página (base.css às vezes não é, se a página já migrou pra geral.css como folha principal). */ .postar-colab { flex-direction: column; gap: 0.5rem; } .postar-colab:not([hidden]) { display: flex; } .postar-colab__busca-wrap { position: relative; } .postar-colab__busca-icone { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 0.95rem; pointer-events: none; } .postar-colab__busca-campo { padding-left: 2.3rem; } /* Ícone da fonte da música (YouTube/PowerMusics, ver postar.js) -- some por padrão ([hidden] no ), só aparece quando o link colado em #postarMusica bate com um dos padrões reconhecidos. Mesmo esquema de wrap+position:absolute de .postar-colab__busca-wrap acima, só que o ícone fica à direita (o campo já tem placeholder de URL à esquerda, sobrar espaço nesse lado). */ .postar-musica-wrap { position: relative; } .postar-musica-icone { position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; object-fit: contain; pointer-events: none; } .postar-musica-wrap .form-controle { padding-right: 2.5rem; } /* Ícone genérico (Tabler ti-music) -- fica visível por padrão, enquanto nenhum link reconhecido foi colado ainda (ver atualizarIconeMusica() em postar.js). Sem isso o espaço reservado pro ícone ficava vazio/quebrado sempre que o campo não batia com YouTube/PowerMusics. */ .postar-musica-icone--generico { font-size: 1.05rem; color: var(--text-3); width: auto; height: auto; } /* position:fixed (não absolute) de propósito: .postar-modal__campos tem overflow-y:auto (a coluna de campos rola por dentro do modal), e um dropdown position:absolute seria cortado por esse overflow assim que o card ficasse maior que o espaço visível -- mesmo bug já visto e corrigido no modal "Nova mensagem" (ver .mensagens-busca__resultados em geral.css), mas lá dava pra desligar o overflow do modal inteiro porque o conteúdo nunca precisa rolar. Aqui o campos PRECISA rolar (título+descrição+ música+colab+extras), então em vez disso o JS (postar.js) calcula top/left/width via getBoundingClientRect() do campo de busca e posiciona o dropdown relativo à VIEWPORT, escapando do clipping do ancestral. */ .postar-colab__resultados { position: fixed; z-index: 1001; flex-direction: column; gap: 0.2rem; max-height: 180px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--border-forte); border-radius: var(--radius); padding: 0.3rem; box-shadow: var(--sombra-lg); } .postar-colab__resultados:not([hidden]) { display: flex; } .postar-colab__resultado { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.82rem; color: var(--text-2); background: none; border: none; width: 100%; min-width: 0; text-align: left; } .postar-colab__resultado:hover { background: var(--accent-06); } .postar-colab__resultado-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex: 0 0 auto; } .postar-colab__resultado-avatar--vazio { display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--text-3); } /* .postar-colab__resultado-nome precisa de min-width:0 pro texto poder encolher (senão o flex item nunca cede espaço e o "@usuario" acaba cortado/invisível fora da área visível do dropdown, sem barra de rolagem óbvia pra avisar -- isso era exatamente o "não mostra o nome" reportado). */ .postar-colab__resultado-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: var(--fw-medium); } .postar-colab__selecionados { display: flex; flex-wrap: wrap; gap: 0.4rem; } .postar-colab__chip { display: flex; align-items: center; gap: 0.35rem; background: var(--panel-2); border: 1px solid var(--border-forte); border-radius: var(--radius-pill); padding: 0.2rem 0.3rem 0.2rem 0.2rem; font-size: 0.78rem; color: var(--text-2); } .postar-colab__chip-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--panel-2); } .postar-colab__chip-remover { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0 0.15rem; } .postar-colab__chip-remover:hover { color: var(--text); } /* Seção colapsável "Configurações adicionais" -- agrupa os switches menos usados no dia a dia (privados/fechados/sem-layout/programar) escondidos por padrão atrás de um cabeçalho com seta, abrindo suave ao clicar. O corpo usa o truque de grid-template-rows 0fr -> 1fr (em vez de max-height fixo) porque, com box-sizing:border-box (ver reset.css), a linha da grid força a altura do miolo a 0 de verdade -- e como o conteúdo pode mudar de tamanho em runtime (o campo de data/hora de "Programar postagem" aparece dentro dele), max-height precisaria ser recalculado a cada mudança; o grid se resolve sozinho. Ver assets/js/postar.js (só alterna 1 classe). */ .postar-extra { margin-top: 0.5rem; border-top: 1px solid var(--border); } .postar-extra__cabecalho { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 0; background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 0.72rem; font-weight: var(--fw-medium); letter-spacing: 0.05em; text-transform: uppercase; } .postar-extra__cabecalho:hover { color: var(--text-2); } .postar-extra__seta { font-size: 0.85rem; transition: transform var(--t), color var(--t); } .postar-extra--aberto .postar-extra__seta { transform: rotate(180deg); } /* Duração/curva PRÓPRIAS aqui (não var(--t)) -- o token padrão do site é uma curva "ease-out" com chute final rápido (boa pra elementos que aparecem, tipo modal abrindo), mas nessa MESMA curva aplicada ao fechar (1fr -> 0fr) o efeito inverte: o encolhimento começa devagar e acelera bruscamente no fim, parecendo um "soco" em vez de suavizar. ease-in-out (mesma curva nas duas pontas) + duração um pouco maior resolve nos dois sentidos. */ .postar-extra__corpo { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.32s; } .postar-extra--aberto .postar-extra__corpo { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .postar-extra__interno { overflow: hidden; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0.25rem; } /* Sem borda entre os switches aqui dentro -- o grupo inteiro já fica isolado visualmente pelo cabeçalho "Configurações adicionais" acima, uma linha a mais em cada item só adicionava ruído. Seletor por #id pra garantir precedência sobre a regra geral ".config-switch + .config-switch" (mesma especificidade por classe, então dependeria da ordem no arquivo). */ #postarExtraCorpo .config-switch { padding: 0.6rem 0; } #postarExtraCorpo .config-switch + .config-switch { border-top: none; } /* Editor rico (negrito/itálico/sublinhado/tachado/link + código-fonte) -- mesmo componente de conteudos.php (ver assets/js/editor_rico.js), agora também usado na Descrição do postar-modal. Vive tokenizado em geral.css também, mas trazido pra cá (mesmo tratamento de .postar-abas/.postar-colab acima) porque barra.css é a única folha garantida em toda página. */ /* overflow:hidden removido de propósito -- cortava o painel do seletor de emoji (.emoticon-seletor__painel abaixo) sempre que ele abria, já que o painel precisa se estender pra FORA da barra de ferramentas. O corte visual dos cantos que overflow:hidden fazia (a barra tem fundo sólido próprio, var(--panel), diferente do fundo do editor) agora é feito arredondando os cantos de cima da própria barra, ver abaixo. */ .editor-rico { border: 1px solid var(--border-forte); border-radius: var(--radius); background: var(--panel-2); } .editor-rico__barra { position: relative; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; padding: 0.5rem; border-bottom: 1px solid var(--border); background: var(--panel); border-radius: var(--radius) var(--radius) 0 0; } .editor-rico__botao { position: relative; min-width: 32px; height: 32px; padding: 0 0.6rem; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-2); font-size: 0.85rem; font-family: inherit; cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); } /* Bolinha que reflete a última cor escolhida em "Cor do texto"/"Cor de destaque" (ver data-cor-indicador em editor_rico.js) -- cinza até a primeira escolha, cor real depois. */ .editor-rico__cor-indicador { position: absolute; right: 5px; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--border-forte); pointer-events: none; } .editor-rico__botao:hover { border-color: var(--border-forte); background: var(--panel-2); color: var(--text); } .editor-rico__botao--ativo, .editor-rico__botao--ativo:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-10); } /* Sempre volta pro placeholder ("Parágrafo") depois de aplicar (ver assets/js/editor_rico.js) -- não tenta refletir o bloco atual do cursor (exigiria escutar selectionchange dentro do contenteditable só pra isso), então funciona como um "aplicar e resetar", igual um botão de ação. */ .editor-rico__select { height: 32px; padding: 0 1.6rem 0 0.6rem; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-2); font-size: 0.8rem; font-family: inherit; cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; } .editor-rico__select:hover { border-color: var(--border-forte); background-color: var(--panel-2); color: var(--text); } .editor-rico__separador { width: 1px; height: 20px; background: var(--border-forte); margin: 0 0.15rem; } /* Escopado em .postar-modal de propósito -- geral.css/base.css definem a MESMA classe .editor-rico__area/__fonte pro editor de conteudos.php (e futuros usos), com outro tamanho (aquele é o "grande", esse aqui é compacto pro campo de descrição do post). Sem esse escopo, cascata (barra.css carrega DEPOIS de geral.css em toda página) fazia esse tamanho pequeno vencer em qualquer lugar que carregasse os dois -- ver conversa que motivou isso (modal de conteúdos ficando sempre pequeno). */ .postar-modal .editor-rico__area { min-height: 100px; max-height: 240px; overflow-y: auto; padding: 0.7rem 0.85rem; font-family: var(--ff); font-size: 0.85rem; line-height: 1.6; color: var(--text); } .postar-modal .editor-rico__area:focus-visible { outline: none; } .postar-modal .editor-rico__area p { margin: 0 0 0.85rem; } .postar-modal .editor-rico__area p:last-child { margin-bottom: 0; } .postar-modal .editor-rico__area a { color: var(--accent); } /* "Ver com cores do perfil" (ver editor_rico.js) -- as 3 variáveis são setadas via JS a partir dos data-cor-* do form (Barra::modalPostar()), só durante a edição; nunca entra no HTML salvo. Precisa da mesma especificidade de .postar-modal .editor-rico__area (2 classes) pra vencer o color/a{color} padrão de cima -- por isso repete .editor-rico__area no seletor em vez de confiar só na ordem de declaração. */ .postar-modal .editor-rico__area.editor-rico__area--preview-perfil { background: var(--preview-fundo); color: var(--preview-texto); } .postar-modal .editor-rico__area.editor-rico__area--preview-perfil a { color: var(--preview-link); } /* Tamanhos reduzidos de propósito -- um

no tamanho padrão do navegador (~2em) não cabe direito numa caixa de 100-240px de altura. Mesma escala (maior pro menor) só que compacta; ver .post-description h1..h6 em base.css pra como fica no post publicado (lá pode ser um pouco maior). / .postar-modal .editor-ricoarea h1, .postar-modal .editor-ricoarea h2, .postar-modal .editor-ricoarea h3, .postar-modal .editor-ricoarea h4, .postar-modal .editor-ricoarea h5, .postar-modal .editor-ricoarea h6 { margin: 0 0 0.5rem; font-weight: 700; line-height: 1.3; color: var(--text); } .postar-modal .editor-ricoarea h1 { font-size: 1.3rem; } .postar-modal .editor-ricoarea h2 { font-size: 1.18rem; } .postar-modal .editor-ricoarea h3 { font-size: 1.08rem; } .postar-modal .editor-ricoarea h4 { font-size: 1rem; } .postar-modal .editor-ricoarea h5 { font-size: 0.92rem; } .postar-modal .editor-ricoarea h6 { font-size: 0.85rem; } .postar-modal .editor-ricoarea iframe { display: block; max-width: 100%; aspect-ratio: 560 / 315; height: auto; margin: 0.5rem 0; border-radius: var(--radius); } / Placeholder no modo visual vazio -- contenteditable não tem o atributo placeholder nativo do input/textarea, então simula via CSS + o próprio texto guardado em data-placeholder (ver Barra::modalPostar). Só se aplica aqui (postar-modal); o editor de conteudos.php não precisa de dica. / .postar-modal .editor-ricoarea:empty:before { content: attr(data-placeholder); color: var(--text-3); } .postar-modal .editor-ricofonte[hidden] { display: none; } .postar-modal .editor-ricofonte:not([hidden]) { display: block; width: 100%; min-height: 100px; max-height: 240px; padding: 0.7rem 0.85rem; border: 0; resize: vertical; background: var(--panel-2); color: var(--text); font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 0.78rem; line-height: 1.5; } .postar-modal .editor-rico__fonte:focus-visible { outline: none; } / Dropdown de autocomplete de menção (@usuario) -- assets/js/editor_rico.js monta esse painel via JS (não vem no HTML do PHP) e o posiciona com position:fixed ancorado no retângulo real do cursor (Range.getClientRects() dentro do contenteditable), pelo mesmo motivo do .postar-colabresultados acima: o container de campos do postar-modal rola por dentro (overflow-y:auto), então um dropdown position:absolute seria cortado assim que o modal ficasse mais alto que o espaço visível. / .editor-ricomencoes { position: fixed; z-index: 1001; flex-direction: column; gap: 0.15rem; max-height: 220px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--border-forte); border-radius: var(--radius); padding: 0.3rem; box-shadow: var(--sombra-lg); font-family: var(--ff); } .editor-ricomencoes:not([hidden]) { display: flex; } .editor-ricomencao-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.82rem; color: var(--text-2); background: none; border: none; width: 100%; min-width: 0; text-align: left; } .editor-ricomencao-item:hover, .editor-ricomencao-item--ativo { background: var(--accent-06); } .editor-ricomencao-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex: 0 0 auto; } .editor-ricomencao-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: var(--fw-medium); } .editor-rico__mencao-selo { color: var(--accent); font-size: 0.9rem; flex: 0 0 auto; } / Chip de menção "marcada" (selecionada da lista, ver selecionarMencao() em assets/js/editor_rico.js) -- só existe DENTRO do editor, nunca vai pro servidor (htmlSemChipsDeMencao() desfaz antes de sanitizar/enviar). É UI de sistema (o editor em si nunca é personalizável pelo dono do flog), por isso usa var(--accent) sem medo. / .editor-ricomencao-chip { color: var(--accent); background: var(--accent-10); border-radius: 4px; padding: 0.05rem 0.3rem; font-weight: 600; cursor: default; } / Seletor de emoji (nucleo/Emoticons.php::seletorHtml() + assets/js/ emoticons.js) -- mesmo componente já usado no compose de mensagens, agora também na barra do editor rico (Descrição do post). Ported pra cá (mesmo tratamento de .editor-rico/.postar-colab acima) porque barra.css é a única folha garantida em toda página -- inclusive perfil.php, que precisa da regra .emoticon pra renderizar os emojis de verdade na descrição do post (ver Emoticons::substituir() chamado em perfil.php). Cópia original (com o painel abrindo pra CIMA, pensado pro compose de chat) fica em geral.css; aqui embaixo tem um override abrindo pra BAIXO, porque o gatilho fica na barra de ferramentas no TOPO do editor, não no rodapé de um campo de texto. / .emoticon { display: inline-block; width: 18px; height: 16px; object-fit: contain; vertical-align: -3px; } .emoticon-seletor { position: relative; display: inline-flex; } .emoticon-seletorgatilho { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-2); font-size: 0.95rem; cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); } .emoticon-seletorgatilho:hover { border-color: var(--border-forte); background: var(--panel-2); color: var(--text); } .emoticon-seletorpainel { position: absolute; left: 0; top: calc(100% + 0.5rem); z-index: 6; display: none; width: 224px; padding: 0.6rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sombra-lg); } .emoticon-seletor--aberto .emoticon-seletorpainel { display: block; } .emoticon-seletorgrade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; } .emoticon-seletoritem { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: var(--radius); background: transparent; cursor: pointer; transition: background 0.15s ease; } .emoticon-seletoritem:hover { background: var(--accent-06); } .emoticon-seletoritem img { width: 18px; height: 16px; object-fit: contain; } / Dentro do postar-modal especificamente: o painel (regra acima) é position:absolute relativo a .emoticon-seletor, e .postar-modalcampos (o container da coluna de campos) tem overflow-y:auto -- então o painel, ao abrir, era cortado por esse overflow ("engolido") em vez de flutuar por cima do modal. A solução não é só "position:fixed": .postar-modal__janela tem transform (pra animação de abrir/fechar), e por spec um ancestral com transform vira o "viewport" de qualquer descendente position:fixed -- ela também tem overflow:hidden. Ou seja, um position:fixed comum aqui dentro RENDERIZA deslocado (calculando certo contra a viewport de verdade, mas posicionado contra a janela do modal) e ainda pode ser cortado. Por isso assets/js/editor_rico.js MOVE esse painel pro final do quando o editor está dentro do postar-modal (mesma solução já usada pro .editor-ricomencoes, que nasce direto no body) -- daí sim position:fixed com coordenadas de viewport funciona sem deslocamento. A classe abaixo (adicionada pelo JS só depois do reparent) é quem estiliza e mostra/esconde o painel nessa forma solta -- a regra ".emoticon- seletor--aberto .emoticon-seletorpainel" original não alcança mais o painel depois que ele sai da árvore de .emoticon-seletor. / .emoticon-seletorpainel--flutuante { position: fixed; z-index: 1001; width: 196px; padding: 0.5rem; display: none; } .emoticon-seletorpainel--flutuante.emoticon-seletorpainel--aberto { display: block; } / "mais juntos": os itens tinham 36px com o emoji de 18x16 centralizado -- muito espaço vazio dentro de cada botão fazia a grade parecer espaçada mesmo com gap pequeno. Reduzido o botão (não o emoji) pra grade ficar visualmente mais densa. Vale tanto pra versão flutuante (postar-modal) quanto se algum dia o painel comum ficar mais apertado -- não há conflito, é só mais específico. / .emoticon-seletorpainel--flutuante .emoticon-seletorgrade { gap: 0.15rem; } .emoticon-seletorpainel--flutuante .emoticon-seletor__item { width: 30px; height: 30px; } / "Outros emojis" (emoji-picker-element, ver editor_rico.js) -- mesmo padrão de painel flutuante do seletor de emoticons próprios logo acima (position:fixed, reparented pro , mesmo z-index), só que o elemento em si é um custom element de verdade (Shadow DOM), então o visual interno (busca, grade, categorias) vem inteiramente da própria lib -- só as variáveis --* abaixo, que atravessam a Shadow DOM normalmente por serem custom properties de CSS, dão uma leve harmonização com a paleta do site (indicador/borda usando --accent). / .editor-ricoemoji-sistema-painel { position: fixed; z-index: 1001; width: 260px; height: 320px; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sombra-lg); --background: var(--panel-2); --border-color: var(--border); --border-radius: var(--radius-lg); --indicator-color: var(--accent); --button-hover-background: var(--accent-06); --button-active-background: var(--accent-10); --num-columns: 7; --emoji-size: 1.25rem; } / Modal de login/cadastro em etapas (ilustração + wizard) / body.modal-auth-aberto { overflow: hidden; } .auth-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 12px; font-family: var(--ff); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t), visibility var(--t); } .auth-modal.esta-aberto { opacity: 1; visibility: visible; pointer-events: auto; } .auth-modalfundo { position: absolute; inset: 0; background: rgba(20, 16, 31, .6); } .auth-modaljanela { position: relative; z-index: 1; width: min(100%, 600px); max-height: calc(100vh - 24px); display: flex; flex-direction: column; background: var(--panel); border-radius: var(--radius-xl); overflow: hidden; transform: translateY(8px) scale(.985); transition: transform var(--t); } .auth-modal.esta-aberto .auth-modaljanela { transform: translateY(0) scale(1); } .auth-modalfechar, .auth-modalvoltar { position: absolute; top: 10px; z-index: 4; border: 0; color: #fff; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color var(--t); } .auth-modalfechar { right: 10px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: rgba(20, 16, 31, .32); } .auth-modalfechar:hover { background: rgba(20, 16, 31, .48); } .auth-modalvoltar { left: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--radius-xs); background: rgba(20, 16, 31, .36); font-size: .72rem; font-weight: var(--fw-semibold); } .auth-modalvoltar:hover { background: rgba(20, 16, 31, .52); } .auth-modalvoltar[hidden] { display: none; } .auth-modalmedia { position: relative; flex: 0 0 auto; height: 270px; background: #efd0d3 no-repeat center center / cover; } #entrarModal .auth-modal__media { background-image: url("../img/auth/arte_login.png"); } #cadastroModal .auth-modal__media { background-image: url("../img/auth/arte_cadastro.png"); } .auth-modalvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .auth-modalcorpo { position: relative; flex: 1 1 auto; overflow-y: auto; padding: 40px 28px 28px; background: var(--accent); color: #fff; } .auth-modalstep { display: none; width: 100%; max-width: 360px; margin: 0 auto; animation: authStepIn .22s cubic-bezier(.22, 1, .36, 1); } .auth-modalstep.is-active { display: block; } @keyframes authStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .auth-modaltitulo { margin: 0; color: #fff; font-size: 1.65rem; line-height: 1.15; font-weight: var(--fw-semibold); text-align: center; } .auth-modalsubtitulo { margin: 14px 0 0; color: rgba(255, 255, 255, .92); font-size: .85rem; line-height: 1.5; font-weight: var(--fw-medium); text-align: center; } .auth-modalacoes { margin-top: 20px; display: grid; gap: 12px; } .auth-modalsocial { width: 100%; min-height: 48px; padding: 0 16px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .2); color: var(--text); font-family: var(--ff); font-size: 15px; font-weight: var(--fw-bold); text-decoration: none; cursor: pointer; transition: background-color var(--t), box-shadow var(--t), transform var(--t), opacity var(--t); } .auth-modalsocial i { font-size: 1.1rem; } .auth-modalsocial img { flex: 0 0 auto; display: block; } .auth-modalsocial:hover { background: #fff; box-shadow: 0 10px 24px rgba(20, 16, 31, .12); transform: translateY(-1px); } .auth-modalsocial:active { transform: translateY(0); } .auth-modalrodape-step { margin-top: 20px; color: rgba(255, 255, 255, .95); font-size: .8rem; line-height: 1.45; font-weight: var(--fw-semibold); text-align: center; } .auth-modalrodape-step a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); cursor: pointer; transition: text-decoration-color var(--t); } .auth-modalrodape-step a:hover { text-decoration-color: #fff; } .auth-modalaviso { margin-top: 16px; padding: .6rem .8rem; border-radius: var(--radius-xs); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: .8rem; line-height: 1.4; font-weight: var(--fw-semibold); text-align: center; } .auth-modalaviso--erro { background: rgba(239, 68, 68, .38); border-color: rgba(239, 68, 68, .55); } .auth-modalaviso--sucesso { background: rgba(34, 197, 94, .32); border-color: rgba(34, 197, 94, .5); } .auth-modalcampo { position: relative; margin-top: 18px; } .auth-modalcampo input { width: 100%; height: 50px; padding: 20px 14px 8px; border-radius: var(--radius-xs); background: rgba(255, 255, 255, .92); border: 2px solid rgba(255, 255, 255, .3); box-shadow: 0 1px 3px rgba(20, 16, 31, .18); color: var(--text); font-family: var(--ff); font-size: .85rem; font-weight: var(--fw-semibold); outline: none; box-sizing: border-box; transition: border-color var(--t), background-color var(--t), box-shadow var(--t); } .auth-modalcampo input:hover { background: #fff; } .auth-modalcampo input:focus { background: #fff; border-color: #fff; } .auth-modalcampo input.campo--ok { border-color: var(--success); } .auth-modalcampo input.campo--erro { border-color: var(--danger); } .auth-modalcampo label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: .8rem; font-weight: var(--fw-semibold); pointer-events: none; transition: top var(--t), transform var(--t), font-size var(--t), color var(--t); } .auth-modalcampo input::placeholder { color: transparent; } .auth-modalcampo:has(input:focus) label, .auth-modalcampo:has(input:not(:placeholder-shown)) label { top: 9px; transform: none; font-size: .62rem; color: var(--accent); } .auth-modalforca { margin-top: .55rem; display: flex; align-items: center; gap: .55rem; } .auth-modalforca[hidden] { display: none; } .auth-modalforca-trilho { flex: 1 1 auto; height: 5px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .25); overflow: hidden; } .auth-modalforca-barra { height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--danger); transition: width var(--t), background-color var(--t); } .auth-modalforca-texto { flex: 0 0 auto; min-width: 54px; font-size: .68rem; font-weight: var(--fw-semibold); color: rgba(255, 255, 255, .9); text-align: right; } .auth-modalforca--fraca .auth-modalforca-barra { background: var(--danger); } .auth-modalforca--media .auth-modalforca-barra { background: var(--warning); } .auth-modalforca--forte .auth-modalforca-barra { background: var(--info); } .auth-modalforca--excelente .auth-modalforca-barra { background: var(--success); } .auth-modaldica { margin-top: .4rem; font-size: .72rem; color: rgba(255, 255, 255, .78); min-height: 1em; } .auth-modaldica--ok, .auth-modaldica--erro { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; padding: .3rem .6rem; border-radius: var(--radius-sm); font-size: .72rem; font-weight: var(--fw-semibold); } .auth-modaldica--ok::before, .auth-modaldica--erro::before { font-family: "tabler-icons" !important; font-size: .85rem; line-height: 1; } .auth-modaldica--ok { color: #eafff2; background: rgba(34, 197, 94, .34); } .auth-modaldica--ok::before { content: "\ea5e"; } .auth-modaldica--erro { color: #fff2f2; background: rgba(239, 68, 68, .4); } .auth-modaldica--erro::before { content: "\ea05"; } .auth-modaldica--verificando { color: #e4defe; } .auth-modaldica-fixa { margin-top: .4rem; font-size: .72rem; color: rgba(255, 255, 255, .7); } .auth-modallinha { display: flex; justify-content: flex-end; margin-top: 12px; } .auth-modalesqueci { color: rgba(255, 255, 255, .92); font-size: 13px; font-weight: var(--fw-semibold); transition: opacity var(--t); } .auth-modalesqueci:hover { opacity: .8; } .auth-modalenviar { width: 100%; min-height: 46px; margin-top: 18px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-pill); background: var(--panel); color: var(--accent); border: 1px solid rgba(255, 255, 255, .16); font-family: var(--ff); font-size: .85rem; font-weight: var(--fw-semibold); cursor: pointer; transition: filter var(--t), opacity var(--t), transform var(--t); } .auth-modalenviar:hover:not(:disabled) { filter: brightness(.96); } .auth-modalenviar:active:not(:disabled) { transform: scale(.985); } .auth-modalenviar:disabled { opacity: .55; cursor: not-allowed; } @media (max-width: 640px) { .auth-modaljanela { max-height: calc(100vh - 16px); border-radius: var(--radius-lg); } .auth-modalmedia { background-position: center top; } .auth-modalcorpo { padding: 24px 18px 18px; } .auth-modaltitulo { font-size: 1.3rem; } .auth-modalsocial { min-height: 44px; padding: 0 12px; } } @media (max-width: 380px) { .auth-modal { padding: 6px; } .auth-modalcorpo { padding: 20px 14px 14px; } .auth-modaltitulo { font-size: 1.15rem; } .auth-modalsocial { gap: 8px; padding: 0 10px; } .auth-modalcampo input { height: 46px; padding: 18px 12px 6px; font-size: .8rem; } } / Switch de verdade (trilho + bolinha), não checkbox cru -- mesmo componente .config-switch já usado em Configurações (conta.php/geral.css), portado pra cá porque barra.css é a única folha garantida em toda página. Input real fica invisível (opacity:0) mas continua no fluxo/focável -- :checked/:focus-visible do input controlam o trilho ao lado via seletor de irmão (~), sem precisar de JS pra isso. / .config-switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; cursor: pointer; } .config-switch + .config-switch { border-top: 1px solid var(--border); } .config-switchtexto { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .config-switchtitulo { font-size: 0.85rem; font-weight: var(--fw-medium); color: var(--text); } .config-switchdica { font-size: 0.78rem; color: var(--text-3); line-height: 1.4; } .config-switchtrilho-wrap { position: relative; flex: 0 0 auto; width: 40px; height: 24px; } .config-switchinput { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .config-switchtrilho { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--border-forte); transition: background var(--t); } .config-switchtrilho::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-sm); transition: transform var(--t); } .config-switchinput:checked ~ .config-switchtrilho { background: var(--accent); } .config-switchinput:checked ~ .config-switchtrilho::after { transform: translateX(16px); } .config-switchinput:focus-visible ~ .config-switchtrilho { outline: 2px solid var(--cor-foco); outline-offset: 2px; } .config-switchinput:disabled ~ .config-switchtrilho { opacity: 0.5; cursor: not-allowed; } .config-switch:has(.config-switchinput:disabled) { cursor: not-allowed; } / Shell .config-modal -- normalmente vive em geral.css (usado também em conta.php/conteudos.php etc.), mas o modal "Minhas contas" abaixo é renderizado pela Barra (Barra::modalMinhasContas()), que aparece em TODA página -- inclusive as que usam base.css como folha principal (o flog público), que nunca carrega geral.css. Sem essa cópia aqui, o modal abria sem posição/fundo/transição nenhuma nessas páginas (era isso que "parou de funcionar"). Mesma solução já usada pra .postar-colab/.editor-rico/ .emoticon-seletor logo acima -- portar pra cá, porque barra.css é a única folha garantida em toda página. / .config-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; font-family: var(--ff); transition: opacity 0.2s ease; } .config-modal[hidden] { display: none; } .config-modal--visivel { opacity: 1; } .config-modalfundo { position: absolute; inset: 0; background: rgba(20, 16, 31, 0.55); } .config-modaljanela { position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: calc(100vh - 3rem); overflow-y: auto; background: var(--panel-2); border-radius: var(--radius-lg); box-shadow: var(--sombra-lg); transform: translateY(14px) scale(0.97); transition: transform 0.2s ease; } / Mesma variante de geral.css -- precisa existir aqui também porque barra.css carrega DEPOIS (empata em especificidade com .config-modaljanela sozinha e venceria por ordem de declaração, encolhendo o modal de conteudos.php de volta pros 460px padrão). / .config-modaljanela--largo { max-width: 720px; } .config-modal--visivel .config-modaljanela { transform: translateY(0) scale(1); } .config-modalcabecalho { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); } .config-modaltitulo { margin: 0; font-size: 1.05rem; font-weight: var(--fw-semibold); color: var(--text); } .config-modalfechar { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-sm); color: var(--text-2); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background var(--t), color var(--t); } .config-modalfechar:hover { background: var(--accent-06); color: var(--text); } .config-modalcorpo { padding: 1.25rem; } / Modal "Minhas contas" (dropdown do usuário -- ver Barra::modalMinhasContas() e assets/js/barra-nav.js). Reaproveita o shell .config-modal acima, só acrescenta os componentes específicos da lista de contas. / .contas-modalsecao { margin-bottom: 1.25rem; } .contas-modalsecao:last-child { margin-bottom: 0; } .contas-modalsubtitulo { font-size: 0.75rem; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-3); margin: 0 0 0.5rem; } .contas-modallista { display: flex; flex-direction: column; gap: 0.4rem; } .contas-modallinha { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); } .contas-modalavatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .contas-modalavatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-16); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); font-size: 0.8rem; flex: 0 0 auto; } .contas-modalusername { flex: 1 1 auto; font-size: 0.85rem; font-weight: var(--fw-medium); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contas-modaltag { flex: 0 0 auto; font-size: 0.72rem; font-weight: var(--fw-semibold); color: var(--accent); background: var(--accent-16); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); } .contas-modaltag--pendente { color: var(--text-3); background: var(--panel-2); } / Selo de quem é a principal do núcleo -- só ela pode convidar/aceitar/ desvincular contas (ver VinculoConta::podeGerenciar()), então vale destacar com uma cor própria, separada do "Atual" (que é sobre em qual conta você está agora, não sobre quem manda no núcleo). / .contas-modaltag--principal { color: var(--info); background: var(--info-10); } .contas-modalacoes { display: flex; gap: 0.4rem; flex: 0 0 auto; } .contas-modalremover { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--text-3); border-radius: 50%; cursor: pointer; transition: background-color var(--t), color var(--t); } .contas-modalremover:hover { background: var(--danger-16, rgba(220, 53, 69, 0.12)); color: var(--danger); } .contas-modaldica { font-size: 0.78rem; color: var(--text-3); margin: 0 0 0.6rem; } .contas-modaldica--limite { color: var(--danger); } .contas-modalform { display: flex; gap: 0.5rem; } / .config-campocontrole (base) só existia em geral.css -- funcionava em conta.php (que usa geral.css como folha principal), mas ficava sem estilo nenhum aqui: o modal "Minhas contas" é renderizado por Barra::html() em TODA página, incluindo o flog (base.css), que nunca carrega geral.css. Mesmo tratamento já dado a .config-modal/.postar-colab/.emoticon-seletor acima -- porta só o necessário pro desse form (não a variante textarea, que essa tela não usa). / .contas-modalform .config-campocontrole { flex: 1 1 auto; min-height: 40px; padding: 0 0.75rem; border: 1px solid var(--border-forte); border-radius: var(--radius); background: var(--panel-2); color: var(--text); font-family: var(--ff); font-size: 0.88rem; transition: border-color var(--t); } .contas-modalform .config-campocontrole:focus-visible { outline: none; border-color: var(--accent); } / Toast global (usado por boost.js e, em perfil.php, por flog_protecao.js) -- mora aqui porque barra.css carrega em toda página, ao contrário de base.css (só o flog). Cores fixas de aviso/erro/sucesso -- de propósito FORA da paleta customizável do dono do flog (--accent/--warning variam com o tema escolhido e podiam ficar ilegíveis ou somem contra o próprio site). / .flog-toast { position: fixed; top: 1.1rem; left: 50%; z-index: 500; display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.1rem; border-radius: 6px; box-shadow: var(--sombra-lg); font-size: 0.85rem; font-weight: var(--fw-medium); color: #fff; max-width: min(420px, calc(100vw - 2rem)); opacity: 0; transform: translate(-50%, -10px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; } .flog-toast--visivel { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .flog-toast--aviso { background: #b45309; } .flog-toast--erro { background: #b91c1c; } .flog-toast--sucesso { background: #15803d; } .flog-toast i { font-size: 1.05rem; flex: 0 0 auto; } / Tooltip escuro rico (base) -- mudou de base.css pra cá pelo mesmo motivo do .flog-toast acima (Boost está na Barra, fora do flog). Balão populado e posicionado via JS (mesma técnica de assets/js/tooltip_emblema.js), só o shell (fundo/seta/fade) é genérico; conteúdo é .boost-tooltip* abaixo. */ .tooltip-escuro { position: absolute; z-index: 9999; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 150ms ease, transform 150ms ease; background: #14101f; border-radius: var(--radius-lg); box-shadow: none; } .tooltip-escuro--visivel { opacity: 1; transform: translateY(0); pointer-events: auto; } .tooltip-escuro::after { content: ""; position: absolute; left: var(--seta-esquerda, 50%); width: 0; height: 0; border: 6px solid transparent; transform: translateX(-50%); pointer-events: none; } .tooltip-escuro--seta-baixo::after { top: 100%; border-top-color: #14101f; } .tooltip-escuro--seta-cima::after { bottom: 100%; border-bottom-color: #14101f; } .boost-tooltip { min-width: 190px; max-width: 260px; } .boost-tooltipcorpo { padding: 0.8rem 1rem; text-align: center; } .boost-tooltiptitulo { font-size: 0.72rem; color: rgba(255, 255, 255, 0.62); } .boost-tooltipcontagem { margin-top: 0.2rem; font-size: 1.6rem; font-weight: var(--fw-semibold); color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; } .boost-tooltiplegenda { margin-top: 0.45rem; font-size: 0.72rem; color: rgba(255, 255, 255, 0.72); } .boost-tooltip__legenda:first-child { margin-top: 0; }