diff --git a/resources/css/app.css b/resources/css/app.css index d441f1d..2afe698 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -5,6 +5,12 @@ @source '../**/*.blade.php'; @source '../**/*.js'; +@import './toast.css'; +@import './client-form.css'; +@import './user-form-modal.css'; +@import './header.css'; +@import './client-cards.css'; + @theme { --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; @@ -43,125 +49,6 @@ @layer components { /*End body */ - /* Header - Navbar */ - .nav-bar { - @apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10; - - /* REMOVIDO: @apply relative; */ - - /* 1. ADICIONADO: 'top-0 left-0' para "colar" no topo */ - @apply fixed top-0 left-0 z-50 w-full; - @apply bg-transparent text-black; - @apply border-b border-transparent; - @apply transition-colors duration-700 ease-in-out; - } - - .nav-bar::before { - content: ''; - @apply absolute top-0 left-0 w-full h-full; - - /* 2. ESTADO BASE (Topo): Fundo e Sombra */ - @apply bg-white; - @apply shadow-md shadow-blue-400; - /* 4. REMOVIDO: As classes 'border-b border-white' saíram daqui */ - - /* 3. TRANSIÇÃO (Correto) */ - @apply transition-all duration-700 ease-in-out; - - @apply -z-10; - } - - - .navbar-scrolled { - @apply border-white shadow-md; - } - - .navbar-scrolled::before { - @apply opacity-0; - @apply shadow-none; - } - - .nav-bar>.navbar-items>a:hover, - .nav-bar>.navbar-items>a { - @apply transition-all duration-300 transform hover:scale-105; - @apply mr-7; - @apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105; - } - - .nav-bar-logo { - /* Garante que a largura não ultrapasse 100% */ - @apply rounded-md max-w-25 mr-10; - height: auto; - /* Altura proporcional à largura */ - } - - .navbar-items { - @apply flex flex-nowrap justify-center items-center px-4 sm:px-6 lg:px-8 h-10; - } - - .profile-menu { - @apply absolute right-5; - @apply rounded-xl; - @apply max-w-7 max-h-7; - } - - .profile-list-items { - /* 1. Posicionamento (Correto) */ - @apply absolute top-full right-0 ml-4 mt-2; - - @apply block w-full; - /* Adicionei mt-2 para descolar do ícone */ - - /* 2. Largura Fixa (Mais limpo) */ - @apply w-56; - - /* 3. Estilos do Contêiner (Profissional) */ - @apply bg-white p-2 rounded-md shadow-xl; - /* Sombra mais forte */ - @apply border border-gray-200; - - /* 4. Divisórias Sutis entre os
  • */ - @apply divide-y divide-gray-100; - } - - .profile-link { - /* Você pode aplicar isso direto no */ - /* 1. FAZ O LINK PREENCHER O
  • */ - @apply block w-full; - - } - - .profile-items { - /* 1. Limpeza (Classes antigas removidas) */ - - /* 2. Espaçamento Interno (Respiro) */ - @apply px-4 py-2; - - /* 3. Estilos de Texto */ - @apply text-sm text-gray-700; - - /* 4. Interatividade */ - @apply hover:bg-blue-100 cursor-pointer; - - /* 5. Transição Suave */ - @apply transition-colors duration-150 ease-in-out; - - /* 6. Cantos do Hover */ - @apply rounded-md; - } - - .nav-bar-logo img { - @apply w-full; - /* Largura 100% para se ajustar ao container */ - height: auto; - /* Mantém a proporção original da imagem */ - } - - .nav-bar>.navbar-items>form>button { - @apply hover:border hover:shadow-md hover:scale-105 hover:cursor-pointer shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform; - } - - /*End Header - Navbar */ /* Container */ .container-title { @@ -206,71 +93,4 @@ @layer components { .container h1 { @apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4; - } - - /* Estilos para o card do cliente */ - /* CONTAINER PRINCIPAL DO CARD */ - .client-card { - /* Layout: Flex-col (vertical) */ - @apply flex flex-col justify-between; - @apply hover:transition duration-150 ease-in-out hover:scale-110; - - /* Estilo: Sombra, borda, fundo branco */ - @apply bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out; - @apply border border-gray-100; - - /* Garante que o conteúdo não vaze */ - @apply overflow-hidden; - } - - /* O "RETÂNGULO" SUPERIOR (Avatar + Opções) */ - .client-card-header { - /* 1. POSIÇÃO: 'relative' para ancorar o menu de opções */ - @apply relative; - - /* 2. LAYOUT: Centraliza o avatar */ - @apply flex justify-center items-center; - - /* 3. ESPAÇAMENTO: Padding interno */ - @apply p-6; - - /* 4. (Opcional) Fundo sutil para o retângulo */ - @apply bg-gray-50; - } - - /* AVATAR DO CLIENTE */ - .client-avatar { - /* A imagem interna já tem as classes de tamanho (w-32 h-32) */ - } - - /* MENU DE OPÇÕES (Três Pontinhos) */ - .client-options-menu { - /* 1. POSIÇÃO: Flutua sobre o header */ - @apply absolute top-4 right-4; - } - - .client-options-button { - @apply p-2 rounded-full hover:bg-gray-200 transition-colors; - @apply focus:outline-none focus:ring-2 focus:ring-blue-500; - } - - /* LISTA DE OPÇÕES (Dropdown) */ - .client-options-list { - @apply absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg py-1 z-10; - @apply divide-y divide-gray-100; - } - - .client-option-item { - @apply block px-4 py-2 text-sm text-gray-700 hover:bg-blue-100 hover:text-blue-800 transition-colors; - @apply cursor-pointer; - } - - - /* NOME DO CLIENTE (Área inferior) */ - .client-card-name { - @apply text-lg font-semibold text-gray-800 text-center; - - /* Espaçamento e uma borda sutil no topo */ - @apply p-4 border-t border-gray-100; - } -} \ No newline at end of file + } \ No newline at end of file diff --git a/resources/css/client-cards.css b/resources/css/client-cards.css new file mode 100644 index 0000000..734ddaf --- /dev/null +++ b/resources/css/client-cards.css @@ -0,0 +1,69 @@ +@layer components { + + /* Estilos para o card do cliente */ + /* CONTAINER PRINCIPAL DO CARD */ + .client-card { + /* Layout: Flex-col (vertical) */ + @apply flex flex-col justify-between; + @apply hover:transition duration-150 ease-in-out hover:scale-110; + + /* Estilo: Sombra, borda, fundo branco */ + @apply bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out; + @apply border border-gray-100; + + /* Garante que o conteúdo não vaze */ + @apply overflow-hidden; + } + + /* O "RETÂNGULO" SUPERIOR (Avatar + Opções) */ + .client-card-header { + /* 1. POSIÇÃO: 'relative' para ancorar o menu de opções */ + @apply relative; + + /* 2. LAYOUT: Centraliza o avatar */ + @apply flex justify-center items-center; + + /* 3. ESPAÇAMENTO: Padding interno */ + @apply p-6; + + /* 4. (Opcional) Fundo sutil para o retângulo */ + @apply bg-gray-50; + } + + /* AVATAR DO CLIENTE */ + .client-avatar { + /* A imagem interna já tem as classes de tamanho (w-32 h-32) */ + } + + /* MENU DE OPÇÕES (Três Pontinhos) */ + .client-options-menu { + /* 1. POSIÇÃO: Flutua sobre o header */ + @apply absolute top-4 right-4; + } + + .client-options-button { + @apply p-2 rounded-full hover:bg-gray-200 transition-colors; + @apply focus:outline-none focus:ring-2 focus:ring-blue-500; + } + + /* LISTA DE OPÇÕES (Dropdown) */ + .client-options-list { + @apply absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg py-1 z-10; + @apply divide-y divide-gray-100; + } + + .client-option-item { + @apply block px-4 py-2 text-sm text-gray-700 hover:bg-blue-100 hover:text-blue-800 transition-colors; + @apply cursor-pointer; + } + + + /* NOME DO CLIENTE (Área inferior) */ + .client-card-name { + @apply text-lg font-semibold text-gray-800 text-center; + + /* Espaçamento e uma borda sutil no topo */ + @apply p-4 border-t border-gray-100; + } +} +} \ No newline at end of file diff --git a/resources/css/client-form.css b/resources/css/client-form.css new file mode 100644 index 0000000..ca166b8 --- /dev/null +++ b/resources/css/client-form.css @@ -0,0 +1,375 @@ +@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; + } +} \ No newline at end of file diff --git a/resources/css/header.css b/resources/css/header.css new file mode 100644 index 0000000..b7a6f26 --- /dev/null +++ b/resources/css/header.css @@ -0,0 +1,122 @@ +@layer components { + + /* Header - Navbar */ + .nav-bar { + @apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10; + + /* REMOVIDO: @apply relative; */ + + /* 1. ADICIONADO: 'top-0 left-0' para "colar" no topo */ + @apply fixed top-0 left-0 z-50 w-full; + @apply bg-transparent text-black; + @apply border-b border-transparent; + @apply transition-colors duration-700 ease-in-out; + } + + .nav-bar::before { + content: ''; + @apply absolute top-0 left-0 w-full h-full; + + /* 2. ESTADO BASE (Topo): Fundo e Sombra */ + @apply bg-white; + @apply shadow-md shadow-blue-400; + /* 4. REMOVIDO: As classes 'border-b border-white' saíram daqui */ + + /* 3. TRANSIÇÃO (Correto) */ + @apply transition-all duration-700 ease-in-out; + + @apply -z-10; + } + + + .navbar-scrolled { + @apply border-white shadow-md; + } + + .navbar-scrolled::before { + @apply opacity-0; + @apply shadow-none; + } + + .nav-bar>.navbar-items>a:hover, + .nav-bar>.navbar-items>a { + @apply transition-all duration-300 transform hover:scale-105; + @apply mr-7; + @apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105; + } + + .nav-bar-logo { + /* Garante que a largura não ultrapasse 100% */ + @apply rounded-md max-w-25 mr-10; + height: auto; + /* Altura proporcional à largura */ + } + + .navbar-items { + @apply flex flex-nowrap justify-center items-center px-4 sm:px-6 lg:px-8 h-10; + } + + .profile-menu { + @apply absolute right-5; + @apply rounded-xl; + @apply max-w-7 max-h-7; + } + + .profile-list-items { + /* 1. Posicionamento (Correto) */ + @apply absolute top-full right-0 ml-4 mt-2; + + @apply block w-full; + /* Adicionei mt-2 para descolar do ícone */ + + /* 2. Largura Fixa (Mais limpo) */ + @apply w-56; + + /* 3. Estilos do Contêiner (Profissional) */ + @apply bg-white p-2 rounded-md shadow-xl; + /* Sombra mais forte */ + @apply border border-gray-200; + + /* 4. Divisórias Sutis entre os
  • */ + @apply divide-y divide-gray-100; + } + + .profile-link { + /* Você pode aplicar isso direto no */ + /* 1. FAZ O LINK PREENCHER O
  • */ + @apply block w-full; + + } + + .profile-items { + /* 1. Limpeza (Classes antigas removidas) */ + + /* 2. Espaçamento Interno (Respiro) */ + @apply px-4 py-2; + + /* 3. Estilos de Texto */ + @apply text-sm text-gray-700; + + /* 4. Interatividade */ + @apply hover:bg-blue-100 cursor-pointer; + + /* 5. Transição Suave */ + @apply transition-colors duration-150 ease-in-out; + + /* 6. Cantos do Hover */ + @apply rounded-md; + } + + .nav-bar-logo img { + @apply w-full; + /* Largura 100% para se ajustar ao container */ + height: auto; + /* Mantém a proporção original da imagem */ + } + + .nav-bar>.navbar-items>form>button { + @apply hover:border hover:shadow-md hover:scale-105 hover:cursor-pointer shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform; + } + + /*End Header - Navbar */ +} \ No newline at end of file diff --git a/resources/css/toast.css b/resources/css/toast.css new file mode 100644 index 0000000..17ec3ef --- /dev/null +++ b/resources/css/toast.css @@ -0,0 +1,149 @@ +@layer components { + /* ================================================================== */ + /* Estilos Aprimorados do Componente TOAST */ + /* resources/css/toast.css */ + /* ================================================================== */ + + .toast-card { + @apply pointer-events-auto flex w-full max-w-sm items-start gap-x-3.5 rounded-xl bg-white shadow-xl ring-1 ring-black/5; + animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1); + backdrop-filter: blur(8px); + transition: all 0.2s ease; + } + + .toast-card:hover { + @apply shadow-2xl ring-black/10; + transform: translateY(-2px); + } + + @keyframes toast-slide-in { + from { + opacity: 0; + transform: translateX(100%); + } + to { + opacity: 1; + transform: translateX(0); + } + } + + /* Estilo do Toast de Sucesso (Verde) */ + .toast-success { + @apply p-4 relative overflow-hidden; + } + + .toast-success::before { + content: ""; + @apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-green-400 to-green-600; + } + + .toast-success .toast-icon-success { + @apply flex-shrink-0 text-green-600 transition-transform duration-200; + filter: drop-shadow(0 2px 4px rgb(34 197 94 / 0.2)); + } + + .toast-success:hover .toast-icon-success { + transform: scale(1.1) rotate(5deg); + } + + .toast-success .toast-message { + @apply w-0 flex-1 text-sm font-semibold text-gray-900 leading-relaxed; + } + + .toast-success .toast-close-button { + @apply inline-flex flex-shrink-0 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 hover:text-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all duration-200; + padding: 0.375rem; + } + + .toast-success .toast-close-button:active { + transform: scale(0.95); + } + + /* Estilo do Toast de Erro (Vermelho) */ + .toast-error { + @apply p-4 relative overflow-hidden; + } + + .toast-error::before { + content: ""; + @apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-red-400 to-red-600; + } + + .toast-error .toast-icon-error { + @apply flex-shrink-0 text-red-600 transition-transform duration-200; + filter: drop-shadow(0 2px 4px rgb(239 68 68 / 0.2)); + } + + .toast-error:hover .toast-icon-error { + transform: scale(1.1) rotate(-5deg); + } + + .toast-error .toast-message { + @apply w-0 flex-1 text-sm font-semibold text-gray-900 leading-relaxed; + } + + .toast-error .toast-close-button { + @apply inline-flex flex-shrink-0 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-200; + padding: 0.375rem; + } + + .toast-error .toast-close-button:active { + transform: scale(0.95); + } + + /* Animação de saída */ + .toast-exit { + animation: toast-slide-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards; + } + + @keyframes toast-slide-out { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(100%); + } + } + + /* Variantes Adicionais (Opcional) */ + .toast-info { + @apply p-4 relative overflow-hidden; + } + + .toast-info::before { + content: ""; + @apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-400 to-blue-600; + } + + .toast-warning { + @apply p-4 relative overflow-hidden; + } + + .toast-warning::before { + content: ""; + @apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-amber-400 to-amber-600; + } + + /* Dark Mode Support */ + @media (prefers-color-scheme: dark) { + .toast-card { + @apply bg-white ring-black/2; + } + + .toast-success .toast-message, + .toast-error .toast-message { + @apply text-black; + } + + .toast-success .toast-close-button { + @apply bg-blue-900/30 text-blue-400 hover:bg-blue-900/50; + } + + .toast-error .toast-close-button { + @apply bg-red-900/30 text-red-400 hover:bg-red-900/50; + } + } + } + \ No newline at end of file diff --git a/resources/css/user-form-modal.css b/resources/css/user-form-modal.css new file mode 100644 index 0000000..5ebd290 --- /dev/null +++ b/resources/css/user-form-modal.css @@ -0,0 +1,157 @@ +@layer components { + + /* Modal Overlay */ + .modal-overlay { + position: fixed; + inset: 0; + z-index: 50; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(255, 255, 255, 0.35); + } + + /* Modal Container */ + .modal-container { + background-color: white; + border-radius: 0.5rem; + box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 32rem; + padding: 1.5rem; + } + + /* Titles */ + .modal-title { + font-size: 1.125rem; + font-weight: 500; + color: #111827; + } + + /* Forms */ + .form-wrapper { + margin-top: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; + } + + /* Inputs */ + .form-input { + display: block; + width: 100%; + border: 2px solid #e5e7eb; + border-radius: 0.375rem; + outline: none; + transition: all 0.3s ease-in-out; + } + + .form-input:hover, + .form-input:focus { + border-color: #93c5fd; + } + + /* Labels */ + .form-label { + display: block; + font-size: 0.875rem; + color: #374151; + } + + /* Errors */ + .error-text { + color: #ef4444; + font-size: 0.75rem; + } + + .error-box { + padding: 0.75rem; + background-color: #fee2e2; + color: #b91c1c; + border-radius: 0.375rem; + } + + /* Buttons */ + .btn-cancel { + background-color: #e5e7eb; + padding: 0.5rem 1rem; + border-radius: 0.375rem; + } + + .btn-submit { + background-color: #2563eb; + color: white; + padding: 0.5rem 1rem; + border-radius: 0.375rem; + } + + .loading { + cursor: progress; + } + + /* Select Component */ + .select-wrapper { + position: relative; + margin-top: 0.25rem; + } + + .select-button { + height: 2.5rem; + width: 10rem; + background: white; + border: 1px solid #d1d5db; + border-radius: 0.5rem; + padding: 0.5rem 2.5rem 0.5rem 0.75rem; + text-align: left; + position: relative; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + } + + .select-icon { + position: absolute; + right: 0.5rem; + top: 0; + bottom: 0; + display: flex; + align-items: center; + } + + .select-svg { + width: 1.25rem; + height: 1.25rem; + color: #9ca3af; + } + + .select-options { + position: absolute; + z-index: 10; + margin-top: 0.25rem; + width: 100%; + max-height: 15rem; + overflow-y: auto; + background-color: white; + border-radius: 0.375rem; + box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); + } + + .select-option { + padding: 0.5rem 2.5rem; + cursor: pointer; + } + + .select-option:hover { + background-color: #dbeafe; + } + + .selected-option { + background-color: #eff6ff; + } + + .form-footer { + display: flex; + justify-content: flex-end; + gap: 0.75rem; + padding-top: 1rem; + } + +} \ No newline at end of file