/** * Fluxo720 - Estilos da aplicação * Tema light/dark controlado por classe .dark no */ /* ========== Tema light (padrão) ========== */ :root { --color-bg: #f4f4f5; --color-surface: #ffffff; --color-border: #e4e4e7; --color-text: #18181b; --color-muted: #71717a; --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-danger: #ef4444; /* Campos: fundo mais escuro que o card para ficarem legíveis */ --color-input-bg: #e4e4e7; --color-input-border: #a1a1aa; --color-input-text: #18181b; --color-input-placeholder: #71717a; --color-label: #52525b; --color-secondary-btn-bg: #e4e4e7; --color-secondary-btn-hover: #d4d4d8; --color-secondary-btn-text: #18181b; } /* ========== Tema dark (classe .dark no html) ========== */ html.dark { --color-bg: #0f0f12; --color-surface: #18181c; --color-border: #2a2a2e; --color-text: #e4e4e7; --color-muted: #71717a; --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-danger: #ef4444; --color-input-bg: #27272a; --color-input-border: #52525b; --color-input-text: #e4e4e7; --color-input-placeholder: #a1a1aa; --color-label: #a1a1aa; --color-secondary-btn-bg: #3f3f46; --color-secondary-btn-hover: #52525b; --color-secondary-btn-text: #e4e4e7; } /* ========== Componentes ========== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.875rem; transition: background-color 0.15s, color 0.15s; cursor: pointer; border: none; } .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover { background: var(--color-primary-hover); } .btn-secondary { background: var(--color-secondary-btn-bg); color: var(--color-secondary-btn-text); } .btn-secondary:hover { background: var(--color-secondary-btn-hover); } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1.5rem; } /* ========== Formulários (classes utilitárias) ========== */ .form-input { width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--color-input-border); background: var(--color-input-bg); color: var(--color-input-text); font-size: 1rem; } .form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); } .form-input::placeholder { color: var(--color-input-placeholder); } .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-label); margin-bottom: 0.25rem; } /* ========== Form theme: Symfony form_row ========== */ .form-row label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-label); margin-bottom: 0.25rem; } .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="password"], .form-row select, .form-row textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-input-border); border-radius: 0.5rem; background: var(--color-input-bg); color: var(--color-input-text); font-size: 1rem; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); } .form-row .form-error { color: var(--color-danger); font-size: 0.875rem; margin-top: 0.25rem; } .form-row + .form-row { margin-top: 1rem; } /* Checkbox e radio: labels clicáveis e alinhamento no form de usuário */ .form-row input[type="checkbox"], .form-row input[type="radio"] { width: auto; margin-right: 0.5rem; } .form-row .choice-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; } .form-row .choice-option label { margin-bottom: 0; cursor: pointer; } input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); } /* ========== Botão de alternar tema ========== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-surface); color: var(--color-text); cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .theme-toggle:hover { background: var(--color-input-bg); border-color: var(--color-input-border); } .theme-toggle svg { width: 1.25rem; height: 1.25rem; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } html:not(.dark) .theme-toggle .icon-sun { display: block; } html.dark .theme-toggle .icon-moon { display: block; }