/* * Alto Contraste — GovBR-DS * Ativado via: * Segue o padrão do portal gov.br: fundo preto, texto branco, links/interativos amarelos. */ /* ─── Transição suave ao alternar ──────────────────────────────────────────── */ *, *::before, *::after { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, outline-color 0.2s ease !important; } /* ─── Tokens globais sobrepostos ────────────────────────────────────────────── */ [data-contrast="high"] { /* Fundos */ --background: #000000 !important; --background-light: #000000 !important; --background-alternative: #1a1a1a !important; --background-dark: #000000 !important; --surface-opacity-xs: rgba(255, 255, 255, 0.05) !important; --surface-opacity-sm: rgba(255, 255, 255, 0.1) !important; --surface-opacity-md: rgba(255, 255, 255, 0.15) !important; --surface-opacity-lg: rgba(255, 255, 255, 0.2) !important; /* Cores de texto */ --color: #ffffff !important; --color-light: #ffffff !important; --color-dark: #ffffff !important; --text-color: #ffffff !important; /* Interativos → amarelo acessível */ --interactive: #ffff00 !important; --interactive-light: #ffff00 !important; --interactive-dark: #ffff00 !important; --interactive-alternative: #ffff00 !important; --interactive-rgb: 255, 255, 0 !important; --visited: #ffd700 !important; --visited-dark: #ffd700 !important; /* Hover / pressed */ --hover: 0.3 !important; --pressed: 0.5 !important; /* Foco */ --focus-color: #ffff00 !important; --focus-color-dark: #ffff00 !important; --focus: #ffff00 !important; /* Bordas */ --border-color: #ffffff !important; --border-width: 1px !important; /* Selecionado */ --selected: rgba(255, 255, 0, 0.25) !important; } /* ─── Body e HTML ───────────────────────────────────────────────────────────── */ [data-contrast="high"] body, [data-contrast="high"] .template-base { background-color: #000000 !important; color: #ffffff !important; } /* ─── Links ─────────────────────────────────────────────────────────────────── */ [data-contrast="high"] a, [data-contrast="high"] a:link, [data-contrast="high"] a:hover, [data-contrast="high"] a:focus { color: #ffff00 !important; text-decoration: underline !important; } [data-contrast="high"] a:visited { color: #ffd700 !important; } /* ─── Header ────────────────────────────────────────────────────────────────── */ [data-contrast="high"] .br-header { background-color: #000000 !important; border-bottom: 2px solid #ffff00 !important; } [data-contrast="high"] .br-header .header-title, [data-contrast="high"] .br-header .header-subtitle, [data-contrast="high"] .br-header .header-sign { color: #ffffff !important; } [data-contrast="high"] .br-header .header-search .br-input, [data-contrast="high"] .br-header .header-search input { background-color: #1a1a1a !important; color: #ffffff !important; border-color: #ffff00 !important; } [data-contrast="high"] .br-header img { filter: brightness(0) invert(1) !important; } /* ─── Botões ─────────────────────────────────────────────────────────────────── */ [data-contrast="high"] .br-button { background-color: #000000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; } [data-contrast="high"] .br-button:hover, [data-contrast="high"] .br-button:focus { background-color: #ffff00 !important; color: #000000 !important; outline: 3px solid #ffffff !important; outline-offset: 2px !important; } [data-contrast="high"] .br-button.primary { background-color: #ffff00 !important; color: #000000 !important; border-color: #ffff00 !important; } [data-contrast="high"] .br-button.primary:hover, [data-contrast="high"] .br-button.primary:focus { background-color: #ffffff !important; color: #000000 !important; } [data-contrast="high"] .br-button.secondary { background-color: #000000 !important; color: #ffff00 !important; border-color: #ffff00 !important; } [data-contrast="high"] .br-button i, [data-contrast="high"] .br-button svg { color: inherit !important; } /* Botão de contraste ativo */ [data-contrast="high"] #btn-contrast { background-color: #ffff00 !important; color: #000000 !important; border: 2px solid #ffffff !important; } /* ─── Menu lateral ───────────────────────────────────────────────────────────── */ [data-contrast="high"] .br-menu .menu-container .menu-panel { background-color: #000000 !important; border-right: 2px solid #ffff00 !important; } [data-contrast="high"] .br-menu .menu-header { background-color: #1a1a1a !important; border-bottom: 1px solid #ffff00 !important; color: #ffffff !important; } [data-contrast="high"] .br-menu .menu-item { color: #ffff00 !important; border-bottom: 1px solid #333333 !important; } [data-contrast="high"] .br-menu .menu-item:hover, [data-contrast="high"] .br-menu .menu-item:focus, [data-contrast="high"] .br-menu .menu-item.active { background-color: #1a1a00 !important; color: #ffffff !important; outline: 2px solid #ffff00 !important; } [data-contrast="high"] .br-menu .menu-item i { color: #ffff00 !important; } [data-contrast="high"] .br-menu .menu-footer { background-color: #0d0d0d !important; border-top: 1px solid #ffff00 !important; } [data-contrast="high"] .br-menu .menu-scrim { background-color: rgba(0, 0, 0, 0.9) !important; } /* ─── Breadcrumb ─────────────────────────────────────────────────────────────── */ [data-contrast="high"] .br-breadcrumb .crumb a, [data-contrast="high"] .br-breadcrumb .crumb span { color: #ffff00 !important; } [data-contrast="high"] .br-breadcrumb .crumb i { color: #ffffff !important; } /* ─── Cards ──────────────────────────────────────────────────────────────────── */ [data-contrast="high"] .br-card { background-color: #0d0d0d !important; border: 2px solid #ffffff !important; color: #ffffff !important; } [data-contrast="high"] .br-card .card-header { background-color: #1a1a1a !important; color: #ffff00 !important; border-bottom: 1px solid #ffffff !important; } [data-contrast="high"] .br-card .card-content { color: #ffffff !important; } [data-contrast="high"] .br-card .card-footer { background-color: #0d0d0d !important; border-top: 1px solid #333333 !important; } /* ─── Tags ───────────────────────────────────────────────────────────────────── */ [data-contrast="high"] .br-tag { background-color: #1a1a1a !important; color: #ffff00 !important; border: 1px solid #ffff00 !important; } /* ─── Inputs / Formulários ───────────────────────────────────────────────────── */ [data-contrast="high"] .br-input input, [data-contrast="high"] .br-textarea textarea, [data-contrast="high"] .br-select select, [data-contrast="high"] input, [data-contrast="high"] textarea, [data-contrast="high"] select { background-color: #000000 !important; color: #ffffff !important; border: 2px solid #ffff00 !important; } [data-contrast="high"] .br-input input:focus, [data-contrast="high"] .br-textarea textarea:focus, [data-contrast="high"] .br-select select:focus, [data-contrast="high"] input:focus, [data-contrast="high"] textarea:focus, [data-contrast="high"] select:focus { outline: 3px solid #ffff00 !important; outline-offset: 2px !important; border-color: #ffffff !important; } [data-contrast="high"] .br-input label, [data-contrast="high"] .br-textarea label, [data-contrast="high"] .br-select label, [data-contrast="high"] label { color: #ffffff !important; } [data-contrast="high"] .br-checkbox input[type="checkbox"], [data-contrast="high"] .br-radio input[type="radio"] { accent-color: #ffff00 !important; } [data-contrast="high"] .br-checkbox label, [data-contrast="high"] .br-radio label { color: #ffffff !important; } [data-contrast="high"] fieldset { border: 1px solid #555555 !important; } [data-contrast="high"] legend { color: #ffff00 !important; } /* ─── Tabela ─────────────────────────────────────────────────────────────────── */ [data-contrast="high"] .br-table table, [data-contrast="high"] table { background-color: #000000 !important; color: #ffffff !important; border-collapse: collapse !important; } [data-contrast="high"] .br-table th, [data-contrast="high"] th { background-color: #1a1a1a !important; color: #ffff00 !important; border: 1px solid #ffffff !important; } [data-contrast="high"] .br-table td, [data-contrast="high"] td { border: 1px solid #555555 !important; color: #ffffff !important; } [data-contrast="high"] .br-table tr:hover, [data-contrast="high"] tr:hover { background-color: #1a1a00 !important; } /* ─── Divisores ──────────────────────────────────────────────────────────────── */ [data-contrast="high"] .br-divider, [data-contrast="high"] hr { border-color: #555555 !important; } /* ─── Paginação ──────────────────────────────────────────────────────────────── */ [data-contrast="high"] .br-pagination .br-button.active, [data-contrast="high"] .br-pagination .br-button[aria-current="page"] { background-color: #ffff00 !important; color: #000000 !important; } /* ─── Dropdowns / Listas ─────────────────────────────────────────────────────── */ [data-contrast="high"] .br-list { background-color: #0d0d0d !important; } [data-contrast="high"] .br-list .br-item { color: #ffff00 !important; border-bottom: 1px solid #333333 !important; } [data-contrast="high"] .br-list .br-item:hover { background-color: #1a1a00 !important; color: #ffffff !important; } [data-contrast="high"] .br-list .header .title { color: #ffff00 !important; } /* ─── Footer ─────────────────────────────────────────────────────────────────── */ [data-contrast="high"] .br-footer { background-color: #000000 !important; border-top: 2px solid #ffff00 !important; color: #ffffff !important; } [data-contrast="high"] .br-footer a { color: #ffff00 !important; } [data-contrast="high"] .br-footer .br-divider { border-color: #555555 !important; } /* ─── Imagens: aumenta visibilidade ──────────────────────────────────────────── */ [data-contrast="high"] img:not([class="logos"]):not(.no-hc-filter) { filter: brightness(1.1) contrast(1.2) !important; } /* ─── Logos e imagens em /static/img/: inverte para visibilidade no fundo preto ─ */ [data-contrast="high"] img[src*="/static/img/"] { filter: brightness(0) invert(1) !important; } /* ─── Skip links ─────────────────────────────────────────────────────────────── */ [data-contrast="high"] .br-skiplink .br-item { background-color: #000000 !important; color: #ffff00 !important; border: 1px solid #ffff00 !important; } [data-contrast="high"] .br-skiplink .br-item:focus { background-color: #ffff00 !important; color: #000000 !important; } /* ─── Ícones Font Awesome ────────────────────────────────────────────────────── */ [data-contrast="high"] .fas, [data-contrast="high"] .far, [data-contrast="high"] .fab, [data-contrast="high"] .fal { color: inherit !important; } /* ─── Foco global ────────────────────────────────────────────────────────────── */ [data-contrast="high"] *:focus-visible { outline: 3px solid #ffff00 !important; outline-offset: 3px !important; } [data-contrast="high"] svg { fill: #ffffff; /* cor que você quiser */ stroke: #ffffff; /* se o ícone usar stroke */ } [data-contrast="high"] .br-menu .menu-body .menu-folder > .menu-item + ul { background: #222222; }