123 lines
3.3 KiB
CSS
123 lines
3.3 KiB
CSS
@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;
|
|
@apply shadow-md shadow-blue-400;
|
|
}
|
|
|
|
.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 <li> */
|
|
@apply divide-y divide-gray-100;
|
|
}
|
|
|
|
.profile-link {
|
|
/* Você pode aplicar isso direto no <a> */
|
|
/* 1. FAZ O LINK PREENCHER O <li> */
|
|
@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 */
|
|
} |