/* ========================================================================== Tema escuro + seletor de tema Carregado DEPOIS de app.css. Não altera o visual do tema claro. O tema ativo fica em . ========================================================================== */ /* -------------------------------------------------------------------------- 1. Paleta do tema escuro -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --primary: #4d8dfd; --success: #2fa36a; --warning: #f0b429; --danger: #ef5b6b; --topbar-bg: #16273e; --topbar-dark: #0d1a2b; --topbar-hover: #23405f; --topbar-active: #2a6293; --page-bg: #0f172a; --surface: #17202f; --surface-2: #1c2740; --surface-3: #223050; --border: #2c3b55; --text-main: #e2e8f0; --text-soft: #c3cede; --text-muted: #94a3b8; /* Variáveis nativas do Bootstrap 5.3 */ --bs-body-bg: #0f172a; --bs-body-color: #e2e8f0; --bs-border-color: #2c3b55; --bs-secondary-color: rgba(226, 232, 240, .72); --bs-emphasis-color: #f1f5f9; color-scheme: dark; } [data-bs-theme="dark"] body { background: var(--page-bg); color: var(--text-main); } /* -------------------------------------------------------------------------- 2. Menu superior -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .topbar { box-shadow: 0 5px 20px rgba(0, 0, 0, .45); } [data-bs-theme="dark"] .topbar-nav-shell { background: rgba(0, 0, 0, .22); } [data-bs-theme="dark"] .topbar-link.active { box-shadow: 0 5px 14px rgba(0, 0, 0, .35), inset 0 -2px 0 #8fd0ff; } [data-bs-theme="dark"] .mobile-topbar { background: var(--surface); border-bottom-color: var(--border); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } [data-bs-theme="dark"] .mobile-topbar-title { color: var(--text-main); } [data-bs-theme="dark"] .mobile-menu-button { border-color: var(--border); background: var(--surface-2); color: var(--text-main); } /* -------------------------------------------------------------------------- 3. Cartões, formulários e tabelas -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .card { background-color: var(--surface); border-color: var(--border); box-shadow: 0 4px 14px rgba(0, 0, 0, .28); } [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-footer, [data-bs-theme="dark"] .card-header.bg-white, [data-bs-theme="dark"] .card-footer.bg-white { background: var(--surface-2) !important; border-color: var(--border); color: var(--text-main); } [data-bs-theme="dark"] .page-header h1, [data-bs-theme="dark"] .page-header h2, [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 { color: var(--text-main); } [data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .text-secondary { color: var(--text-muted) !important; } [data-bs-theme="dark"] .form-label { color: var(--text-soft); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--surface-2); border-color: var(--border); color: var(--text-main); } [data-bs-theme="dark"] .form-control::placeholder { color: #7c8ba3; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--surface-2); border-color: #4d8dfd; color: var(--text-main); box-shadow: 0 0 0 .18rem rgba(77, 141, 253, .22); } [data-bs-theme="dark"] .input-group-text { background-color: var(--surface-3); border-color: var(--border); color: var(--text-soft); } [data-bs-theme="dark"] .table { --bs-table-color: var(--text-main); --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-striped-color: var(--text-main); --bs-table-striped-bg: rgba(255, 255, 255, .028); --bs-table-hover-color: var(--text-main); --bs-table-hover-bg: rgba(255, 255, 255, .045); } [data-bs-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--border); color: var(--text-main); } [data-bs-theme="dark"] .table thead th { background: var(--surface-3); color: var(--text-soft); } [data-bs-theme="dark"] .table thead th a, [data-bs-theme="dark"] .table thead th a.text-dark { color: var(--text-soft) !important; } [data-bs-theme="dark"] .table tbody td { color: var(--text-main); } [data-bs-theme="dark"] .table-title { color: #f1f5f9; } [data-bs-theme="dark"] .table-meta { color: var(--text-muted); } [data-bs-theme="dark"] .page-link { background-color: var(--surface-2); border-color: var(--border); color: var(--text-soft); } [data-bs-theme="dark"] .page-link:hover { background-color: var(--surface-3); color: #fff; } [data-bs-theme="dark"] .page-item.disabled .page-link { background-color: var(--surface); border-color: var(--border); color: #64748b; } /* Botões de contorno claros perdem contraste no escuro */ [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #cbd5e1; --bs-btn-border-color: #46577a; --bs-btn-hover-bg: #46577a; --bs-btn-hover-border-color: #56688e; --bs-btn-hover-color: #fff; } [data-bs-theme="dark"] .btn-light { --bs-btn-bg: var(--surface-3); --bs-btn-border-color: var(--border); --bs-btn-color: var(--text-main); --bs-btn-hover-bg: #2b3c5f; --bs-btn-hover-border-color: #3a4d73; --bs-btn-hover-color: #fff; } [data-bs-theme="dark"] .badge.text-bg-light { background-color: var(--surface-3) !important; color: var(--text-main) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--surface-2) !important; } [data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; } [data-bs-theme="dark"] .text-dark { color: var(--text-main) !important; } /* Mantém legível o texto escuro em badges de cor forte */ [data-bs-theme="dark"] .badge.bg-warning.text-dark, [data-bs-theme="dark"] .badge.bg-info.text-dark, [data-bs-theme="dark"] .badge-media, [data-bs-theme="dark"] .status-andamento { color: #1f2937 !important; } [data-bs-theme="dark"] .badge.bg-dark { background-color: #475569 !important; color: #fff !important; } [data-bs-theme="dark"] hr { border-color: var(--border); opacity: .5; } [data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .border-end { border-color: var(--border) !important; } [data-bs-theme="dark"] .list-group-item { background-color: var(--surface); border-color: var(--border); color: var(--text-main); } [data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--surface-2); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-color: var(--text-main); --bs-dropdown-link-hover-bg: var(--surface-3); --bs-dropdown-link-hover-color: #fff; } /* -------------------------------------------------------------------------- 4. Checklists -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .checklist-heading-icon { background: rgba(77, 141, 253, .18); color: #7fb0ff; } [data-bs-theme="dark"] .checklist-summary strong { color: var(--text-main); } [data-bs-theme="dark"] .checklist-progress { background: var(--surface-3); } [data-bs-theme="dark"] .checklist-progress-bar { background: linear-gradient(90deg, #3b82f6, #7fb0ff); } [data-bs-theme="dark"] .checklist-add-input > i { color: #7c8ba3; } [data-bs-theme="dark"] .checklist-filters { border-color: var(--border); background: var(--surface-2); } [data-bs-theme="dark"] .checklist-filters button { color: var(--text-muted); } [data-bs-theme="dark"] .checklist-filters button:hover { color: var(--text-main); } [data-bs-theme="dark"] .checklist-filters button.active { background: var(--surface-3); color: #7fb0ff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); } [data-bs-theme="dark"] .checklist-filters button span { background: rgba(255, 255, 255, .08); color: var(--text-soft); } [data-bs-theme="dark"] .checklist-filters button.active span { background: rgba(77, 141, 253, .22); color: #7fb0ff; } [data-bs-theme="dark"] .checklist-grid::-webkit-scrollbar-thumb { background: #3b4a66; } [data-bs-theme="dark"] .checklist-item { border-color: var(--border); background: var(--surface-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } [data-bs-theme="dark"] .checklist-item:hover { border-color: #3f5477; box-shadow: 0 3px 9px rgba(0, 0, 0, .35); } [data-bs-theme="dark"] .checklist-item.is-completed { border-color: #26543f; background: #16281f; } [data-bs-theme="dark"] .checklist-order { background: var(--surface-3); color: var(--text-muted); } [data-bs-theme="dark"] .checklist-item.is-completed .checklist-order { background: rgba(47, 163, 106, .18); color: #4ade80; } [data-bs-theme="dark"] .checklist-description { color: var(--text-main); } [data-bs-theme="dark"] .checklist-item.is-completed .checklist-description { color: var(--text-muted); } [data-bs-theme="dark"] .checklist-item-content small { color: #7c8ba3; } [data-bs-theme="dark"] .checklist-edit-form .form-control-sm:hover, [data-bs-theme="dark"] .checklist-edit-form .form-control-sm:focus { border-color: #46577a; background: var(--surface-3); } [data-bs-theme="dark"] .checklist-item-footer { border-top-color: var(--border); } [data-bs-theme="dark"] .checklist-state { color: var(--text-muted); } [data-bs-theme="dark"] .checklist-state.is-completed { color: #4ade80; } [data-bs-theme="dark"] .checklist-empty { border-color: #3b4a66; background: var(--surface-2); } [data-bs-theme="dark"] .checklist-empty > i { color: #6b7c96; } [data-bs-theme="dark"] .checklist-empty strong { color: var(--text-soft); } /* -------------------------------------------------------------------------- 5. Modal de visualização rápida -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .preview-modal-content { background: var(--surface); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); } [data-bs-theme="dark"] .preview-modal-content .modal-header, [data-bs-theme="dark"] .preview-modal-content .modal-footer { background: var(--surface-2); border-color: var(--border); } [data-bs-theme="dark"] .preview-modal-content .modal-body { background: #131c2c; } [data-bs-theme="dark"] .preview-summary-card, [data-bs-theme="dark"] .preview-section { background: var(--surface); border-color: var(--border); } [data-bs-theme="dark"] .preview-section-title { color: var(--text-main); } [data-bs-theme="dark"] .preview-field { background: var(--surface-2); border-color: var(--border); } [data-bs-theme="dark"] .preview-field-label { color: var(--text-muted); } [data-bs-theme="dark"] .preview-field-value { color: #f1f5f9; } [data-bs-theme="dark"] .preview-description { color: var(--text-soft); } [data-bs-theme="dark"] .preview-checklist-item, [data-bs-theme="dark"] .preview-feed-item { border-bottom-color: var(--border); } [data-bs-theme="dark"] .preview-checklist-item.is-completed .preview-checklist-text { color: var(--text-muted); } [data-bs-theme="dark"] .preview-feed-meta { color: var(--text-muted); } [data-bs-theme="dark"] .modal-content { background-color: var(--surface); color: var(--text-main); } [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: var(--border); } /* -------------------------------------------------------------------------- 6. Tela de login -------------------------------------------------------------------------- */ [data-bs-theme="dark"] body.login-page { background: var(--page-bg) !important; } [data-bs-theme="dark"] .login-card { background: var(--surface); box-shadow: 0 10px 35px rgba(0, 0, 0, .55); } /* A logo tem fundo transparente: troca a assinatura clara/escura conforme o tema. */ .login-logo-escuro { display: none; } [data-bs-theme="dark"] .login-logo-claro { display: none; } [data-bs-theme="dark"] .login-logo-escuro { display: inline-block; } /* -------------------------------------------------------------------------- 7. Botão seletor de tema -------------------------------------------------------------------------- */ .theme-switch { position: relative; display: inline-flex; flex: 0 0 auto; } .theme-switch-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 38px; min-height: 38px; padding: 7px 11px; color: #e7eff8; border: 1px solid rgba(255, 255, 255, .15); border-radius: 9px; background: rgba(255, 255, 255, .055); font-size: .88rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .theme-switch-button:hover { color: #fff; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); transform: translateY(-1px); } .theme-switch-button:focus-visible { outline: 3px solid rgba(143, 208, 255, .9); outline-offset: 2px; } .theme-switch-button > i { font-size: 1.15rem; } .theme-switch-caret { font-size: .7rem; opacity: .75; } .theme-switch-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1080; display: none; min-width: 186px; padding: 6px; border: 1px solid #e3e9f0; border-radius: 11px; background: #fff; box-shadow: 0 14px 38px rgba(15, 23, 42, .22); } .theme-switch.is-open .theme-switch-menu { display: block; } .theme-switch-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: #253047; font-size: .87rem; font-weight: 600; text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .theme-switch-option > i:first-child { font-size: 1.05rem; color: #64748b; } .theme-switch-option:hover { background: #eef3fa; color: #0d6efd; } .theme-switch-option:hover > i:first-child { color: #0d6efd; } .theme-switch-option .theme-switch-check { margin-left: auto; color: #0d6efd; opacity: 0; } .theme-switch-option[aria-checked="true"] { background: #eaf2ff; color: #0d6efd; } .theme-switch-option[aria-checked="true"] > i:first-child, .theme-switch-option[aria-checked="true"] .theme-switch-check { color: #0d6efd; opacity: 1; } [data-bs-theme="dark"] .theme-switch-menu { border-color: var(--border); background: var(--surface-2); box-shadow: 0 14px 38px rgba(0, 0, 0, .55); } [data-bs-theme="dark"] .theme-switch-option { color: var(--text-main); } [data-bs-theme="dark"] .theme-switch-option > i:first-child { color: var(--text-muted); } [data-bs-theme="dark"] .theme-switch-option:hover { background: var(--surface-3); color: #7fb0ff; } [data-bs-theme="dark"] .theme-switch-option:hover > i:first-child { color: #7fb0ff; } [data-bs-theme="dark"] .theme-switch-option[aria-checked="true"] { background: rgba(77, 141, 253, .16); color: #7fb0ff; } [data-bs-theme="dark"] .theme-switch-option[aria-checked="true"] > i:first-child, [data-bs-theme="dark"] .theme-switch-option[aria-checked="true"] .theme-switch-check { color: #7fb0ff; } /* Variante flutuante usada na tela de login */ .theme-switch-floating { position: fixed; top: 16px; right: 16px; z-index: 1080; } .theme-switch-floating .theme-switch-button { color: #334155; border-color: #dbe3ec; background: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, .1); } .theme-switch-floating .theme-switch-button:hover { color: #0d6efd; border-color: #b9cbe4; background: #fff; } [data-bs-theme="dark"] .theme-switch-floating .theme-switch-button { color: var(--text-main); border-color: var(--border); background: var(--surface-2); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); } [data-bs-theme="dark"] .theme-switch-floating .theme-switch-button:hover { color: #7fb0ff; border-color: #46577a; background: var(--surface-3); } @media (max-width: 575.98px) { .theme-switch-button { min-width: 35px; min-height: 35px; padding: 6px 8px; } .theme-switch-label { display: none; } } @media print { .theme-switch { display: none !important; } }