159 lines
3.8 KiB
CSS
159 lines
3.8 KiB
CSS
.tabeladiaria {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 2rem 0;
|
|
border-radius: 10px;
|
|
overflow: hidden; /* mantém o arredondado */
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
border: 4px solid #4a90e2; /* borda azul, altere para a cor desejada */
|
|
|
|
|
|
}
|
|
/* 1. Estilização do TD (Container) */
|
|
.coluna-horario {
|
|
/* Garante que o TD tenha um preenchimento generoso para parecer maior */
|
|
padding: 20px 10px; /* Ajuste estes valores conforme a necessidade */
|
|
|
|
/* Centraliza o conteúdo (o <p>) vertical e horizontalmente */
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
|
|
/* Cor de fundo clara para contrastar levemente, se desejar */
|
|
/* background-color: #f9f9f9; */
|
|
|
|
/* Garante que a coluna não fique muito estreita */
|
|
width: 15%; /* Exemplo, ajuste se necessário */
|
|
}
|
|
|
|
/* 2. Estilização do P (O texto do horário) */
|
|
.horario-texto {
|
|
/* Remove a margem padrão do <p> para alinhamento preciso */
|
|
margin: 0;
|
|
|
|
/* Aplica a cor azul condizente com o "10:30" da imagem */
|
|
color: #007bff; /* Tonalidade de azul Bootstrap/padrão */
|
|
|
|
/* Aumenta a fonte para dar mais destaque */
|
|
font-size: 1.3em; /* 1.3 vezes o tamanho normal */
|
|
|
|
/* Deixa a fonte mais pesada para ser mais visível */
|
|
font-weight: bold;
|
|
|
|
/* Se você quiser garantir que a fonte seja a mesma do resto do site */
|
|
/* font-family: 'Arial', sans-serif; */
|
|
}
|
|
|
|
/* 3. Estilização do cabeçalho (opcional, para consistência) */
|
|
.cabecalho-horario {
|
|
background-color: #007bff; /* Cor de fundo azul como na imagem */
|
|
color: white;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Células da tabela */
|
|
.tabeladiaria th, .tabeladiaria td {
|
|
padding: 9px;
|
|
text-align: left;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
/* Cabeçalho */
|
|
.tabeladiaria thead th {
|
|
background-color: #0078d7;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
border-bottom: 2px solid #005a9e; /* borda inferior mais forte no cabeçalho */
|
|
}
|
|
|
|
/* Remover bordas laterais do cabeçalho (se quiser) */
|
|
.tabeladiaria thead th:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
.tabeladiaria thead th:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Linhas pares do corpo */
|
|
.tabeladiaria tbody tr:nth-child(even) {
|
|
background-color: #e7e7e7a6;
|
|
}
|
|
|
|
/* Hover nas linhas */
|
|
.tabeladiaria tbody tr:hover {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
/* Card dentro da tabela */
|
|
.tabeladiaria .cardconsulta {
|
|
border-radius: 10px;
|
|
color: black;
|
|
height: 80px;
|
|
width: 100%;
|
|
padding: 8px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.mostrar-horario td, .mostrar-horario th {
|
|
padding: 4px 6px;
|
|
height: 30px;
|
|
border: 1px solid #e0e0e0;
|
|
text-align: center;
|
|
}
|
|
|
|
.container-cardconsulta-dia {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
height: 70px;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .tabeladiaria {
|
|
border: 4px solid #333;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
|
background-color: #232323;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .tabeladiaria th,
|
|
html[data-bs-theme="dark"] .tabeladiaria td {
|
|
border: 1px solid #333;
|
|
color: #e0e0e0;
|
|
background-color: #232323;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .tabeladiaria thead th {
|
|
background-color: #222e3c;
|
|
color: #aee2ff;
|
|
border-bottom: 2px solid #333;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .tabeladiaria tbody tr:nth-child(even) {
|
|
background-color: #232a34;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .tabeladiaria tbody tr:hover,
|
|
html[data-bs-theme="dark"] .tabeladiaria tbody tr:hover td {
|
|
background-color: #2c3642 !important;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .tabeladiaria .cardconsulta {
|
|
background-color: #232323;
|
|
color: #e0e0e0;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
border-left: 5px solid #333;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .container-cardconsulta-dia {
|
|
background-color: transparent;
|
|
}
|
|
|
|
html[data-bs-theme="dark"] .mostrar-horario td,
|
|
html[data-bs-theme="dark"] .mostrar-horario th {
|
|
border: 1px solid #333;
|
|
color: #e0e0e0;
|
|
background-color: #232323;
|
|
} |