276 lines
7.6 KiB
CSS
276 lines
7.6 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 utilities {
|
|
.forget-password>a {
|
|
color: black !important;
|
|
}
|
|
|
|
.navbar-items>a {
|
|
color: black !important;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
|
|
/* Estilos globais */
|
|
h1 {
|
|
@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;
|
|
}
|
|
|
|
* {}
|
|
|
|
/* Fim estilos globais */
|
|
|
|
/* body */
|
|
body {
|
|
@apply bg-white h-screen w-screen;
|
|
background-image: url('../images/bg-primary.png');
|
|
@apply bg-cover bg-center bg-fixed;
|
|
@apply overflow-y-auto overflow-x-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;
|
|
|
|
/* 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 <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 {
|
|
/* Deixe APENAS as classes de largura, margem e padding */
|
|
@apply w-full mx-auto px-4 sm:px-6 lg:px-8 mt-15 mb-10;
|
|
}
|
|
|
|
.container-form {
|
|
@apply w-full h-full mx-auto;
|
|
@apply flex justify-center items-center;
|
|
}
|
|
|
|
.messages {
|
|
@apply flex justify-center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.forget-password {
|
|
@apply flex justify-center w-1/2;
|
|
@apply shadow-lg rounded-md;
|
|
@apply transition scale-80 hover:scale-95;
|
|
}
|
|
|
|
.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 <img> 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;
|
|
}
|
|
} |