/* ═════════════════════════════════════════════════════════════════════════════ */ /* DARK MODE — BUTTONS & COMPONENTS */ /* Toggle: data-theme="dark" em */ /* ═════════════════════════════════════════════════════════════════════════════ */ /** * USO: * ← Ativa dark mode * ou * document.documentElement.setAttribute('data-theme', 'dark'); */ [data-theme="dark"] { /* BACKGROUNDS */ --bg-dark-primary: #0a0e27; --bg-dark-secondary: #111b3c; --bg-dark-tertiary: #1a2548; /* TEXT */ --text-dark-primary: #e8ecf1; --text-dark-secondary: #a0aec0; --text-dark-muted: #64748b; /* BORDERS */ --border-dark: rgba(148, 163, 184, 0.1); --border-dark-light: rgba(148, 163, 184, 0.2); /* PRIMÁRIOS */ --color-dark-primary: #10b981; --color-dark-primary-hover: #059669; --color-dark-secondary: #3b82f6; --color-dark-secondary-hover: #2563eb; /* ESTADOS */ --success-dark: #34d399; --warning-dark: #fbbf24; --danger-dark: #f87171; --info-dark: #60a5fa; } /* ═════════════════════════════════════════════════════════════════════════════ */ /* BOTÕES — DARK MODE */ /* ═════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] button, [data-theme="dark"] a.btn, [data-theme="dark"] .btn, [data-theme="dark"] [role="button"], [data-theme="dark"] input[type="submit"], [data-theme="dark"] input[type="button"], [data-theme="dark"] input[type="reset"] { font-family: Verdana, 'Segoe UI', sans-serif; letter-spacing: 1pt; } /* PRIMARY */ [data-theme="dark"] .btn-primary, [data-theme="dark"] button.btn-primary { background: linear-gradient(135deg, var(--color-dark-primary) 0%, #059669 100%); color: #ffffff; border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25); } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] button.btn-primary:hover { background: linear-gradient(135deg, var(--color-dark-primary-hover) 0%, #047857 100%); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); transform: translateY(-4px); } /* SECONDARY */ [data-theme="dark"] .btn-secondary, [data-theme="dark"] button.btn-secondary { background: linear-gradient(135deg, #475569 0%, #334155 100%); color: var(--text-dark-primary); border: 1px solid var(--border-dark-light); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] button.btn-secondary:hover { background: linear-gradient(135deg, #64748b 0%, #475569 100%); border-color: var(--color-dark-secondary); box-shadow: 0 8px 24px rgba(51, 65, 85, 0.4); } /* GHOST */ [data-theme="dark"] .btn-ghost, [data-theme="dark"] button.btn-ghost { background: transparent; color: var(--color-dark-primary); border: 1px solid var(--color-dark-primary); box-shadow: none; } [data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] button.btn-ghost:hover { background: rgba(16, 185, 129, 0.1); border-color: var(--color-dark-primary-hover); box-shadow: inset 0 0 8px rgba(16, 185, 129, 0.15); } /* DANGER */ [data-theme="dark"] .btn-danger, [data-theme="dark"] button.btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #ffffff; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25); } [data-theme="dark"] .btn-danger:hover, [data-theme="dark"] button.btn-danger:hover { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4); transform: translateY(-4px); } /* SUCCESS */ [data-theme="dark"] .btn-success, [data-theme="dark"] button.btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #ffffff; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25); } [data-theme="dark"] .btn-success:hover, [data-theme="dark"] button.btn-success:hover { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); } /* WARNING */ [data-theme="dark"] .btn-warning, [data-theme="dark"] button.btn-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #ffffff; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25); } [data-theme="dark"] .btn-warning:hover, [data-theme="dark"] button.btn-warning:hover { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4); } /* ═════════════════════════════════════════════════════════════════════════════ */ /* COMPONENTES — DARK MODE */ /* ═════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] body { background: var(--bg-dark-primary); color: var(--text-dark-primary); } [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--bg-dark-secondary); color: var(--text-dark-primary); border-color: var(--border-dark-light); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { background: var(--bg-dark-tertiary); border-color: var(--color-dark-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-dark-muted); } /* CARDS */ [data-theme="dark"] .card { background: var(--bg-dark-secondary); border-color: var(--border-dark-light); color: var(--text-dark-primary); } [data-theme="dark"] .card:hover { border-color: var(--color-dark-primary); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15); } [data-theme="dark"] .card-header { border-color: var(--border-dark); } /* BADGES */ [data-theme="dark"] .badge-success { background: rgba(16, 185, 129, 0.15); color: var(--success-dark); } [data-theme="dark"] .badge-info { background: rgba(96, 165, 250, 0.15); color: var(--info-dark); } [data-theme="dark"] .badge-warning { background: rgba(251, 191, 36, 0.15); color: var(--warning-dark); } [data-theme="dark"] .badge-danger { background: rgba(239, 68, 68, 0.15); color: var(--danger-dark); } [data-theme="dark"] .badge-muted { background: rgba(148, 163, 184, 0.1); color: var(--text-dark-secondary); } /* ALERTS */ [data-theme="dark"] .alert { background: transparent; color: var(--text-dark-primary); } [data-theme="dark"] .alert-success { background: rgba(16, 185, 129, 0.08); border-left-color: var(--success-dark); color: #a7f3d0; } [data-theme="dark"] .alert-info { background: rgba(96, 165, 250, 0.08); border-left-color: var(--info-dark); color: #bfdbfe; } [data-theme="dark"] .alert-warning { background: rgba(251, 191, 36, 0.08); border-left-color: var(--warning-dark); color: #fcd34d; } [data-theme="dark"] .alert-danger { background: rgba(239, 68, 68, 0.08); border-left-color: var(--danger-dark); color: #fecaca; } /* SCROLLBAR */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-dark-secondary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-dark-light); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--color-dark-primary); } /* ═════════════════════════════════════════════════════════════════════════════ */ /* TRANSIÇÃO SUAVE — DARK MODE */ /* ═════════════════════════════════════════════════════════════════════════════ */ html { transition: background-color 0.3s ease, color 0.3s ease; } button, a.btn, .btn, [role="button"], input[type="submit"], input[type="button"], input[type="reset"], input, textarea, select, .card, .badge { transition: all 0.3s ease; } /* ═════════════════════════════════════════════════════════════════════════════ */ /* TEMA AUTOMÁTICO — SYSTEM PREFERENCE */ /* ═════════════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; } html:not([data-theme]) body { background: var(--bg-dark-primary); color: var(--text-dark-primary); } } @media (prefers-color-scheme: light) { html:not([data-theme]) { color-scheme: light; } } /* ═════════════════════════════════════════════════════════════════════════════ */ /* UTILITY — TOGGLE DARK MODE */ /* ═════════════════════════════════════════════════════════════════════════════ */ .theme-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 1000; width: 50px; height: 50px; border-radius: 50%; background: var(--color-dark-primary); color: white; border: none; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.3s ease; } .theme-toggle:hover { transform: scale(1.1); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); } [data-theme="dark"] .theme-toggle { background: var(--color-dark-secondary); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } [data-theme="dark"] .theme-toggle:hover { box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4); }