From 9024fc44395679ae46543d2062a835fb8212f0c7 Mon Sep 17 00:00:00 2001 From: lukibeg Date: Sat, 1 Nov 2025 23:10:50 -0300 Subject: [PATCH] feat: Adiciona e altera determinados estilos. --- resources/css/app.css | 67 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 59 insertions(+), 8 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index 6c76cc4..2a2769d 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -25,29 +25,81 @@ @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 w-screen; + @apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10; + @apply relative; /* Colors */ @apply bg-white text-black; /* Border */ @apply border-b border-white shadow-md shadow-blue-400; } - .nav-bar a:hover, - .nav-bar a { + .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 { - @apply absolute left-0; - /* Garantir que o container da logo seja posicionado corretamente */ - max-width: 8%; /* 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; + } + + .profile-list-items { + /* 1. Posicionamento (Correto) */ + @apply absolute top-full right-0 ml-4; + + @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 */ @@ -55,8 +107,7 @@ @layer components { /* Mantém a proporção original da imagem */ } - .nav-bar>form>button { - @apply mr-7; + .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; }