/* Estilos comuns da moldura (tema/cabeçalho), compartilhados pela área pública e pelo painel. Externalizado para não expor CSS inline no código-fonte. */ /* Troca de tema instantânea: ao trocar o href dos stylesheets, o navegador reavalia os estilos e re-dispara as `transition` do template. No painel isso fazia o menu lateral (.sidebar-wrapper tem `transition: all .3s`) "deslizar"/aparecer no celular a cada troca de tema. Enquanto a classe .theme-switching está no (só durante a troca), toda transição fica suspensa, então o novo tema é aplicado de imediato, sem animação. */ html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; animation: none !important; } /* Alterna o ícone do botão de tema conforme o tema a selecionar (lua=claro, sol=escuro) */ .theme-icon-sun { display: none; } html.home-dark .theme-icon-moon { display: none; } html.home-dark .theme-icon-sun { display: inline-block; } /* Autofill no tema escuro: o destaque de autocompletar do navegador ignora o tema e pinta os campos de branco logo após o carregamento (ex.: ao postar um formulário que recarrega a página), causando um "flash" branco. Fixamos o fundo escuro com box-shadow interno e adiamos a transição de background para que o branco do navegador nunca chegue a ser pintado. */ html.home-dark input:-webkit-autofill, html.home-dark input:-webkit-autofill:hover, html.home-dark input:-webkit-autofill:focus, html.home-dark input:-webkit-autofill:active, html.home-dark textarea:-webkit-autofill, html.home-dark select:-webkit-autofill { -webkit-text-fill-color: #f8f9fa; -webkit-box-shadow: 0 0 0 1000px #1f2d3d inset; box-shadow: 0 0 0 1000px #1f2d3d inset; caret-color: #f8f9fa; transition: background-color 9999s ease-in-out 0s; } /* Avatar sólido dentro do botão (pílula) de usuário no cabeçalho */ .user-avatar-solid { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: #2f55d4; color: #fff; font-weight: 700; font-size: .8rem; line-height: 1; } /* Avatar dentro da pílula primária (cabeçalho fixo): círculo branco */ .user-avatar-on-primary { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: #fff; color: #2f55d4; font-weight: 700; font-size: .8rem; line-height: 1; } /* Área de arrastar-e-soltar para upload de arquivos (componente x-file-dropzone) */ .file-dropzone { cursor: pointer; border: 1px dashed rgba(47, 85, 212, .45); border-radius: .5rem; background-color: rgba(47, 85, 212, .03); transition: border-color .15s ease, background-color .15s ease; } .file-dropzone:hover { border-color: #2f55d4; background-color: rgba(47, 85, 212, .06); } /* Evita que os filhos (ícone/texto) gerem eventos próprios de drag e causem flicker. */ .file-dropzone > * { pointer-events: none; } .file-dropzone--over { border-style: solid; border-color: #2f55d4 !important; background-color: rgba(47, 85, 212, .1) !important; } html.home-dark .file-dropzone { background-color: rgba(47, 85, 212, .08); border-color: rgba(120, 145, 230, .5); } html.home-dark .file-dropzone:hover { background-color: rgba(47, 85, 212, .14); } html.home-dark .file-dropzone--over { background-color: rgba(47, 85, 212, .18) !important; } /* Descrição longa do download renderizada de Markdown: mantém compacto dentro do card */ .download-richtext > :last-child { margin-bottom: 0; } .download-richtext p { margin-bottom: .5rem; } .download-richtext ul, .download-richtext ol { margin-bottom: .5rem; padding-left: 1.25rem; } .download-richtext h1, .download-richtext h2, .download-richtext h3, .download-richtext h4, .download-richtext h5, .download-richtext h6 { font-size: .9375rem; font-weight: 600; margin-bottom: .25rem; } .download-richtext img { max-width: 100%; height: auto; border-radius: .35rem; } .download-richtext table { width: 100%; font-size: .8125rem; }