87 lines
2.5 KiB
CSS
87 lines
2.5 KiB
CSS
.actions-container {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
border-radius: 10px;
|
|
margin-left: 2rem;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease-in-out;
|
|
|
|
/* 🎨 Glassmorphism */
|
|
background: rgba(255, 255, 255, 0.25);
|
|
backdrop-filter: blur(80px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Mostra no hover do card */
|
|
.container-cardconsulta:hover .actions-container {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* 3. Estilos base para o botão de edição (amarelo) */
|
|
.btn-edit-custom-style {
|
|
background-color: #ffc107; /* Amarelo da sua imagem */
|
|
color: #343a40; /* Cor do ícone (cinza escuro para contraste) */
|
|
border: none;
|
|
padding: 8px 12px; /* Ajuste o padding para o tamanho do botão */
|
|
border-radius: 0.25rem; /* Leve arredondamento de borda */
|
|
transition: background-color 0.2s ease-in-out; /* Suaviza a transição de cor */
|
|
}
|
|
|
|
|
|
/* 5. Estilos base para o botão de exclusão (vermelho) */
|
|
.btn-delete-custom-style {
|
|
background-color: #dc3545; /* Vermelho da sua imagem */
|
|
color: #ffffff; /* Cor do ícone (branco para contraste) */
|
|
border: none;
|
|
padding: 8px 12px; /* Ajuste o padding para o tamanho do botão */
|
|
border-radius: 0.25rem; /* Leve arredondamento de borda */
|
|
transition: background-color 0.2s ease-in-out; /* Suaviza a transição de cor */
|
|
|
|
font-weight:bold ;
|
|
|
|
}
|
|
|
|
/* 6. Estilo de hover para o botão de exclusão */
|
|
.btn-delete-custom-style:hover {
|
|
background-color: #c82333; /* Um vermelho um pouco mais escuro para o hover */
|
|
|
|
}
|
|
|
|
/* 7. Estilos para os ícones dentro dos botões (já está no JSX com fs-4) */
|
|
/* .fs-4 do Bootstrap já cuida do tamanho do ícone. Se precisar de mais controle, adicione aqui. */
|
|
|
|
|
|
.btn-confirm-style{
|
|
background-color: #5ce687;
|
|
|
|
}
|
|
|
|
.card-verde{
|
|
background-color: #b7ffbd;
|
|
border: #91d392;
|
|
}
|
|
|
|
/* Aplique isso às classes que contêm os nomes do Médico e do Paciente */
|
|
|
|
.cardconsulta-infosecundaria p,
|
|
.cardconsulta-infoprimaria p {
|
|
/* 1. Força o texto a não quebrar para a próxima linha */
|
|
white-space: nowrap;
|
|
|
|
/* 2. Oculta qualquer texto que ultrapasse a largura do contêiner */
|
|
overflow: hidden;
|
|
|
|
/* 3. Adiciona reticências (...) ao final do texto truncado */
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tabelamensal .container-cardconsulta{
|
|
width: 24rem;
|
|
|
|
} |