71 lines
1.8 KiB
CSS
71 lines
1.8 KiB
CSS
@layer components {
|
|
|
|
|
|
/* Adicione estas classes à camada @layer components do seu CSS */
|
|
|
|
/* --- Estrutura da Lista de Usuários --- */
|
|
.user-list-content {
|
|
/* Padding e limite de altura com scroll */
|
|
@apply p-4 max-h-[500px] overflow-y-auto;
|
|
}
|
|
|
|
.user-grid {
|
|
@apply grid gap-4;
|
|
}
|
|
|
|
.user-card-item {
|
|
/* Estilo básico de cada item na lista */
|
|
@apply flex justify-between items-center bg-gray-50 p-3 rounded-lg border border-gray-200 transition-shadow duration-150;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.user-card-item:hover {
|
|
@apply shadow-md border-blue-300;
|
|
}
|
|
|
|
.user-info {
|
|
@apply flex flex-col;
|
|
}
|
|
|
|
.user-name {
|
|
@apply font-semibold text-gray-900;
|
|
}
|
|
|
|
.user-email {
|
|
@apply text-sm text-gray-500;
|
|
}
|
|
|
|
.user-details {
|
|
/* Garante que os itens fiquem alinhados e espaçados */
|
|
@apply flex items-center space-x-3;
|
|
}
|
|
|
|
.user-actions-group {
|
|
/* Define o grupo de botões de ação */
|
|
@apply flex space-x-2 ml-4;
|
|
/* Espaçamento à esquerda para separar dos detalhes */
|
|
}
|
|
|
|
.action-button {
|
|
/* Estilo base para os ícones clicáveis */
|
|
@apply p-1 rounded-full transition-colors duration-150;
|
|
/* Cores já definidas inline: text-blue-600, text-red-600 */
|
|
}
|
|
|
|
.action-button:hover {
|
|
@apply bg-gray-200;
|
|
}
|
|
|
|
.user-permission {
|
|
/* Estilo para a tag de permissão */
|
|
@apply text-xs font-medium px-2 py-0.5 rounded-full bg-blue-100 text-blue-800;
|
|
}
|
|
|
|
.user-status {
|
|
@apply text-xs text-green-600;
|
|
}
|
|
|
|
/* *IMPORTANTE*: Se o modal ficar muito estreito, adicione w-full max-w-2xl à classe .modal-container
|
|
ou crie uma classe específica para este modal.
|
|
*/
|
|
} |