144 lines
4.0 KiB
CSS
144 lines
4.0 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../storage/framework/views/*.php';
|
|
@source '../**/*.blade.php';
|
|
@source '../**/*.js';
|
|
|
|
@theme {
|
|
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
}
|
|
|
|
|
|
@layer components {
|
|
|
|
/* body */
|
|
body {
|
|
@apply bg-white h-screen w-screen;
|
|
background-image: url('../images/bg-primary.png');
|
|
@apply bg-cover bg-center;
|
|
@apply overflow-y-hidden;
|
|
}
|
|
|
|
/*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;
|
|
@apply relative;
|
|
/* Colors */
|
|
@apply bg-white text-black;
|
|
/* Border */
|
|
@apply border-b border-white shadow-md shadow-blue-400;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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 <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 */
|
|
|
|
/* Container */
|
|
.container-title {
|
|
@apply text-2xl absolute top-20;
|
|
@apply text-black font-semibold;
|
|
@apply border-b border-blue-500 rounded-md shadow-md shadow-blue-400;
|
|
@apply p-4 transition-all duration-300 transform hover:scale-105;
|
|
}
|
|
|
|
.container {
|
|
@apply flex flex-col justify-center items-center w-full h-full mx-auto px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.form-class {
|
|
@apply flex flex-col gap-4 p-3;
|
|
@apply mb-10 w-1/5;
|
|
}
|
|
|
|
.form-input-class {
|
|
@apply border border-gray-300 rounded-md p-2 outline-none;
|
|
}
|
|
|
|
.form-button-class {
|
|
@apply bg-blue-500 text-white rounded-md p-2 cursor-pointer hover:bg-blue-800 w-1/2;
|
|
}
|
|
|
|
.container h1 {
|
|
@apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4;
|
|
}
|
|
} |