/* * Paleta emprestada do Viuh ERP (C:\viuh\dev\app), pra esta ferramenta parecer * parte da mesma família mesmo rodando em outra stack (FastAPI/Jinja em vez de * Laravel/Bootstrap). --petroleo é cor de SUPERFÍCIE (botão, item ativo); * --marca é a mesma cor em cima de TEXTO — no escuro elas se separam porque * petróleo saturado como texto sobre fundo escuro cansa a vista. */ :root { --petroleo: #006D79; --petroleo-prof: #0A2F3C; --turquesa: #00B8C4; --amarelo: #FFB800; --marca: #006D79; --realce: #00838f; --fundo: #f4f6f8; --texto: #111827; --cartao: #ffffff; --borda: #e4e8ee; /* Levemente mais escuro que o tom original (#667085) para folga confortável acima do mínimo de contraste AA (4.5:1) sobre --fundo. */ --mudo: #5a6474; --alerta: #c0392f; --hover: rgba(16, 24, 40, .035); --sombra: 0 1px 2px rgba(16, 24, 40, .05); --sucesso-bg: #dcfce7; --sucesso-texto: #166534; --erro-bg: #fee2e2; --erro-texto: #991b1b; } /* * Tema escuro aplicado em dois casos: (a) o sistema pede modo escuro E o usuário * não escolheu "claro" manualmente (:not([data-theme="light"])), ou (b) o usuário * escolheu "escuro" manualmente através do botão da topbar (theme.js), que grava * a preferência em localStorage e define o atributo data-theme na tag — * isso precisa ganhar da preferência do sistema, então vem depois no arquivo e * fora do @media. Os dois blocos têm os mesmos valores de propósito (não dá pra * combinar num único seletor porque um está dentro de @media e o outro não). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --marca: #63A9B4; --realce: #7BBAC4; --turquesa: #63A9B4; --fundo: #0f171b; --texto: #e3e9ec; --cartao: #18232a; --borda: #2b3840; --mudo: #93a4ac; --alerta: #b4585c; --hover: rgba(255, 255, 255, .035); --sombra: none; --sucesso-bg: rgba(34, 197, 94, .15); --sucesso-texto: #5fa87a; --erro-bg: rgba(239, 68, 68, .15); --erro-texto: #d98f8f; } } :root[data-theme="dark"] { --marca: #63A9B4; --realce: #7BBAC4; --turquesa: #63A9B4; --fundo: #0f171b; --texto: #e3e9ec; --cartao: #18232a; --borda: #2b3840; --mudo: #93a4ac; --alerta: #b4585c; --hover: rgba(255, 255, 255, .035); --sombra: none; --sucesso-bg: rgba(34, 197, 94, .15); --sucesso-texto: #5fa87a; --erro-bg: rgba(239, 68, 68, .15); --erro-texto: #d98f8f; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Instrument Sans', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; background: var(--fundo); color: var(--texto); line-height: 1.5; } a { color: var(--marca); text-decoration: none; } a:hover { text-decoration: underline; } .topbar { background: var(--cartao); border-bottom: 1px solid var(--borda); } .topbar-inner { max-width: 960px; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; row-gap: 8px; justify-content: space-between; align-items: center; } .brand { font-weight: 700; font-size: 17px; color: var(--texto); display: flex; align-items: center; gap: 8px; } .brand i { color: var(--petroleo); } .brand-icon { width: 22px; height: 22px; display: block; border-radius: 5px; } .topbar nav a, .topbar nav span { margin-left: 16px; font-size: 13.5px; } .admin-name { color: var(--mudo); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 16px; padding: 0; border: 1px solid var(--borda); border-radius: .4rem; background: var(--cartao); color: var(--mudo); font-size: 14px; cursor: pointer; vertical-align: middle; } .theme-toggle:hover { border-color: var(--petroleo); color: var(--petroleo); } .container { max-width: 960px; margin: 0 auto; padding: 28px 20px 60px; } h1 { font-size: 24px; margin-bottom: 4px; font-weight: 700; } h2 { font-size: 18px; margin: 0 0 6px; } .description { color: var(--mudo); margin: 4px 0 16px; } .muted { color: var(--mudo); font-size: 13.5px; } .empty { color: var(--mudo); font-style: italic; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 20px; } .card { display: block; background: var(--cartao); border: 1px solid var(--borda); border-radius: .75rem; box-shadow: var(--sombra); padding: 18px; color: var(--texto); transition: box-shadow 0.15s ease, border-color 0.15s ease; } .card:hover { text-decoration: none; border-color: var(--petroleo); } .latest-version { font-size: 13.5px; margin: 0; } .latest-version.muted { font-style: italic; } .latest-version strong { color: var(--marca); } .back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; font-size: 13.5px; } .error-icon { font-size: 40px; color: var(--mudo); margin-bottom: 4px; } .table-scroll { overflow-x: auto; margin-top: 16px; } .table-scroll .releases-table { margin-top: 0; } .releases-table { width: 100%; min-width: 560px; border-collapse: collapse; margin-top: 16px; background: var(--cartao); border: 1px solid var(--borda); border-radius: .75rem; box-shadow: var(--sombra); overflow: hidden; } /* Para tabelas simples de poucas colunas (ex.: admin/users.html) que cabem numa tela de celular sem precisar de scroll horizontal — o min-width de 560px acima é pensado pra tabela de releases, bem mais larga (SHA-256, canal, downloads...). */ .releases-table.compact-table { min-width: 0; } .releases-table th, .releases-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--borda); font-size: 13.5px; } .releases-table th { background: transparent; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mudo); } .releases-table tr:last-child td { border-bottom: none; } .releases-table .changelog { color: var(--mudo); max-width: 320px; } .releases-table .sha256 code { font-size: 11px; color: var(--mudo); word-break: break-all; } /* * Abaixo de 640px, a tabela de arquivos/releases (com SHA-256, várias colunas) * força scroll horizontal ou, pior, faz a linha crescer verticalmente sem limite * (o hash quebra em várias linhas dentro de uma coluna estreita). Nessa largura, * troca a tabela por uma lista de cartões: resumo sempre visível (versão/arquivo + * tamanho ou canal), detalhes completos (hash, autor, downloads, ações) só * aparecem ao tocar/expandir —
/ nativo, sem JS. */ .mobile-cards { display: none; } @media (max-width: 640px) { .table-scroll { display: none; } /* .compact-table (ex.: admin/users.html) já cabe sozinha em telas de celular — não tem versão em .mobile-cards, então não pode ser escondida junto. */ .table-scroll.always-visible { display: block; } .mobile-cards { display: block; margin-top: 16px; } } .mobile-card { background: var(--cartao); border: 1px solid var(--borda); border-radius: .5rem; margin-top: 8px; overflow: hidden; } .mobile-card:first-child { margin-top: 0; } .mobile-card summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; font-size: 13.5px; cursor: pointer; list-style: none; } .mobile-card summary::-webkit-details-marker { display: none; } .mobile-card-chevron { color: var(--mudo); flex-shrink: 0; transition: transform .15s ease; } .mobile-card[open] .mobile-card-chevron { transform: rotate(180deg); } .mobile-card-title { min-width: 0; } .mobile-card-details { padding: 0 14px 14px; border-top: 1px solid var(--borda); font-size: 13.5px; } .mobile-card-details p { margin: 10px 0 0; } .mobile-card-details p:first-child { margin-top: 10px; } .mobile-card-details code { display: block; margin-top: 4px; font-size: 11px; color: var(--mudo); word-break: break-all; } .mobile-card-details .button { margin-top: 12px; width: 100%; justify-content: center; } .mobile-card-details .row-actions { margin-top: 12px; } .release-block { background: var(--cartao); border: 1px solid var(--borda); border-radius: .75rem; box-shadow: var(--sombra); padding: 18px 20px; margin-top: 16px; } .release-block.latest-block { border-color: var(--petroleo); } .release-block-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; } .release-block-header h2 { margin: 0; } /* white-space: pre-line preserva as quebras de linha digitadas no