375 lines
10 KiB
CSS
375 lines
10 KiB
CSS
@layer components {
|
|
|
|
|
|
/* ================================================================== */
|
|
/* Estilos do Formulário do Modal (Slide-Over) - Versão Aprimorada */
|
|
/* ================================================================== */
|
|
|
|
/* Define o layout de duas colunas com gap responsivo */
|
|
.form-grid-container {
|
|
@apply lg:grid lg:grid-cols-3 lg:gap-8;
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
/* Coluna principal que ocupa 2/3 do espaço */
|
|
.form-main-panel-modal {
|
|
@apply lg:col-span-2;
|
|
}
|
|
|
|
/* Coluna da sidebar que ocupa 1/3 do espaço */
|
|
.form-sidebar-column {
|
|
@apply lg:col-span-1;
|
|
}
|
|
|
|
/* Faz a sidebar "grudar" no topo ao rolar a página com transição suave */
|
|
.form-sticky-sidebar-modal {
|
|
@apply lg:sticky lg:top-6;
|
|
transition: top 0.2s ease-out;
|
|
}
|
|
|
|
/* Wrapper principal dentro do modal com padding otimizado */
|
|
.form-wrapper-modal {
|
|
@apply flex-1 px-4 py-6 sm:px-6;
|
|
}
|
|
|
|
/* Bloco de um grupo de campos com espaçamento melhorado */
|
|
.form-group {
|
|
@apply py-5;
|
|
animation: slideInUp 0.4s ease-out;
|
|
}
|
|
|
|
/* Título de uma seção com melhor hierarquia visual */
|
|
.form-section-title {
|
|
@apply text-base font-semibold leading-6 text-gray-900 text-gray-100;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Divisor com gradiente azul-roxo inspirado na imagem */
|
|
.form-divider {
|
|
@apply my-4;
|
|
background: linear-gradient(to right, transparent, #5bb5f0, #a8a3e8, transparent);
|
|
height: 1px;
|
|
border: none;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Card com borda azul suave */
|
|
.form-section-card {
|
|
@apply rounded-lg p-4;
|
|
border: 1px solid #e3f2fd;
|
|
background: linear-gradient(135deg, #f8fbff 0%, #f5f8ff 100%);
|
|
backdrop-filter: blur(8px);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-section-card:hover {
|
|
border-color: #bbdefb;
|
|
box-shadow: 0 2px 8px rgba(91, 181, 240, 0.1);
|
|
}
|
|
|
|
/* Dark mode para card */
|
|
@media (prefers-color-scheme: dark) {
|
|
.form-section-card {
|
|
background: linear-gradient(135deg, rgba(91, 181, 240, 0.05) 0%, rgba(168, 163, 232, 0.05) 100%);
|
|
border-color: rgba(91, 181, 240, 0.2);
|
|
}
|
|
|
|
.form-section-card:hover {
|
|
border-color: rgba(91, 181, 240, 0.3);
|
|
}
|
|
}
|
|
|
|
/* ================================================================== */
|
|
/* Estilos dos Campos de Formulário */
|
|
/* ================================================================== */
|
|
|
|
/* Rótulo (Label) padrão dos campos com melhor contraste */
|
|
.form-label {
|
|
/* Ajustado para texto mais escuro e melhor contraste */
|
|
@apply block text-sm font-medium leading-6 text-gray-700 text-gray-300 mb-2;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
/* Input com cores do tema azul-roxo */
|
|
.form-input {
|
|
/* Campos agora são brancos/claros com texto escuro para melhor contraste */
|
|
@apply block w-full rounded-md border-0 py-2 px-3 text-gray-900 text-gray-400 shadow-sm placeholder:text-gray-400 placeholder:text-gray-500 sm:text-sm sm:leading-6;
|
|
background-color: #ffffff;
|
|
ring-color: #bbdefb;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
input[type="date"] {
|
|
outline: none;
|
|
border: none;
|
|
color: black;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
ring-width: 2px;
|
|
ring-color: #5bb5f0;
|
|
box-shadow: 0 0 0 3px rgba(91, 181, 240, 0.15);
|
|
}
|
|
|
|
.form-input:hover:not(:focus) {
|
|
ring-color: #90caf9;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.form-input {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
ring-color: rgba(91, 181, 240, 0.3);
|
|
}
|
|
|
|
.form-input:focus {
|
|
ring-color: #5bb5f0;
|
|
}
|
|
|
|
.form-input:hover:not(:focus) {
|
|
ring-color: rgba(91, 181, 240, 0.4);
|
|
}
|
|
}
|
|
|
|
/* Input de arquivo com tema azul-roxo */
|
|
.form-file-input {
|
|
@apply block w-full text-sm text-gray-900 rounded-lg cursor-pointer bg-gray-50;
|
|
border: 1px solid #bbdefb;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-file-input::file-selector-button {
|
|
margin-right: 1rem;
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 0.5rem 0 0 0.5rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
|
|
color: #1976d2;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-file-input:hover::file-selector-button {
|
|
background: linear-gradient(135deg, #bbdefb 0%, #e1bee7 100%);
|
|
}
|
|
|
|
.form-file-input:focus {
|
|
outline: none;
|
|
border-color: #5bb5f0;
|
|
box-shadow: 0 0 0 2px rgba(91, 181, 240, 0.2);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.form-file-input {
|
|
border-color: rgba(91, 181, 240, 0.3);
|
|
}
|
|
|
|
.form-file-input::file-selector-button {
|
|
background: linear-gradient(135deg, rgba(91, 181, 240, 0.15) 0%, rgba(168, 163, 232, 0.15) 100%);
|
|
color: #90caf9;
|
|
}
|
|
|
|
.form-file-input:hover::file-selector-button {
|
|
background: linear-gradient(135deg, rgba(91, 181, 240, 0.25) 0%, rgba(168, 163, 232, 0.25) 100%);
|
|
}
|
|
}
|
|
|
|
/* Grupo de checkboxes com melhor espaçamento */
|
|
.form-checkbox-group {
|
|
@apply space-y-3 mt-2;
|
|
}
|
|
|
|
/* Item individual do checkbox com hover suave */
|
|
.form-checkbox-item {
|
|
@apply flex items-center gap-x-3 p-2 rounded-md;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.form-checkbox-item:hover {
|
|
background-color: rgba(91, 181, 240, 0.05);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.form-checkbox-item:hover {
|
|
background-color: rgba(91, 181, 240, 0.1);
|
|
}
|
|
}
|
|
|
|
/* Checkbox com cores azul-roxo */
|
|
.form-checkbox {
|
|
@apply h-4 w-4 rounded cursor-pointer;
|
|
border: 2px solid #90caf9;
|
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
accent-color: #5bb5f0;
|
|
}
|
|
|
|
.form-checkbox:checked {
|
|
background-color: #5bb5f0;
|
|
border-color: #5bb5f0;
|
|
animation: checkboxPop 0.2s ease;
|
|
}
|
|
|
|
.form-checkbox:hover {
|
|
border-color: #5bb5f0;
|
|
}
|
|
|
|
.form-checkbox:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(91, 181, 240, 0.2);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.form-checkbox {
|
|
border-color: rgba(91, 181, 240, 0.4);
|
|
}
|
|
}
|
|
|
|
/* ================================================================== */
|
|
/* Estilos dos Botões do Modal */
|
|
/* ================================================================== */
|
|
|
|
/* Botão Primário com gradiente azul-roxo */
|
|
.form-button-primary {
|
|
@apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-semibold text-white shadow-sm;
|
|
background: linear-gradient(135deg, #5bb5f0 0%, #2e9ae5 50%, #a8a3e8 100%);
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.form-button-primary::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.form-button-primary:hover {
|
|
box-shadow: 0 4px 12px rgba(91, 181, 240, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.form-button-primary:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.form-button-primary:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 8px rgba(91, 181, 240, 0.3);
|
|
}
|
|
|
|
.form-button-primary:focus-visible {
|
|
outline: 2px solid #5bb5f0;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.form-button-primary:disabled {
|
|
background: linear-gradient(135deg, #bbdefb 0%, #e1bee7 100%);
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Botão Secundário com borda azul */
|
|
.form-button-secondary {
|
|
@apply rounded-md bg-white bg-gray-800 px-4 py-2 text-sm font-semibold text-gray-900 text-gray-100 shadow-sm;
|
|
border: 1px solid #bbdefb;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.form-button-secondary:hover {
|
|
background: linear-gradient(135deg, #f8fbff 0%, #f5f8ff 100%);
|
|
border-color: #5bb5f0;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(91, 181, 240, 0.15);
|
|
}
|
|
|
|
.form-button-secondary:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 4px rgba(91, 181, 240, 0.1);
|
|
}
|
|
|
|
.form-button-secondary:focus-visible {
|
|
outline: 2px solid #5bb5f0;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.form-button-secondary {
|
|
border-color: rgba(91, 181, 240, 0.3);
|
|
}
|
|
|
|
.form-button-secondary:hover {
|
|
background: linear-gradient(135deg, rgba(91, 181, 240, 0.05) 0%, rgba(168, 163, 232, 0.05) 100%);
|
|
border-color: #5bb5f0;
|
|
}
|
|
}
|
|
|
|
/* ================================================================== */
|
|
/* Animações */
|
|
/* ================================================================== */
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes checkboxPop {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* ================================================================== */
|
|
/* Estados de Validação */
|
|
/* ================================================================== */
|
|
|
|
.form-input.is-invalid {
|
|
ring-color: #ef5350;
|
|
}
|
|
|
|
.form-input.is-valid {
|
|
ring-color: #66bb6a;
|
|
}
|
|
|
|
.form-error-message {
|
|
@apply mt-2 text-sm;
|
|
color: #ef5350;
|
|
animation: slideInUp 0.2s ease-out;
|
|
}
|
|
|
|
.form-helper-text {
|
|
@apply mt-2 text-sm text-gray-500 text-gray-400;
|
|
}
|
|
} |