230 lines
4.0 KiB
CSS
230 lines
4.0 KiB
CSS
|
|
/* ------------------------ */
|
|
.dt-length label,
|
|
.dt-search label {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.dt-length::before {
|
|
content: "📄";
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dt-search::before {
|
|
content: "🔍";
|
|
font-size: 0.9rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
#dbContact thead {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
#dbContact th {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
/* Smartphones (hasta 767px) */
|
|
@media (max-width: 767px) {
|
|
|
|
/* [ inicio info datatables ] */
|
|
#dbContact_wrapper> :first-child {
|
|
& div>div {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 20% 80%;
|
|
place-items: center;
|
|
|
|
& select,
|
|
input {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
/* [ final info datatables ] */
|
|
|
|
|
|
/* [ i thead] */
|
|
thead > tr, th {
|
|
background-color: #333 !important;
|
|
}
|
|
|
|
th.status {
|
|
display: none;
|
|
}
|
|
|
|
thead th .filter {
|
|
visibility: visible;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
thead th .filter input {
|
|
width: 100%;
|
|
padding: 0.5em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* [ f thead] */
|
|
|
|
/* [ i select ] */
|
|
|
|
select.form-select {
|
|
width: 100% !important;
|
|
margin-top: 0.5em;
|
|
font-size: 0.9em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
/* [ f select ] */
|
|
|
|
/* [ i general table ] */
|
|
/* Eliminar estilos por defecto */
|
|
table, thead, tbody, th, td, tr {
|
|
all: unset;
|
|
}
|
|
|
|
|
|
/* Estilo para cada fila */
|
|
tr {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
border: 2px solid #ccc;
|
|
border-radius: 10px;
|
|
padding: 0.5em;
|
|
/* gap: 0.8em; */
|
|
|
|
}
|
|
|
|
|
|
td.td-texto {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%; /* Se adapta al contenedor */
|
|
display: inline-block;
|
|
vertical-align: middle; /* Alinea verticalmente */
|
|
}
|
|
|
|
|
|
|
|
/* Estilo para celdas */
|
|
td {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.6em 0;
|
|
/* border-bottom: 1px solid #eee; */
|
|
font-size: 0.9em;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
|
|
/* Etiquetas de las celdas */
|
|
td::before, th::before {
|
|
content: attr(data-label);
|
|
font-weight: bold;
|
|
color: #333;
|
|
text-align: left;
|
|
flex-basis: 45%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
}
|
|
|
|
/* Tablets (768px - 1023px) */
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
/* main{ background-color: pink; } */
|
|
main {
|
|
min-height: 80vh;
|
|
place-items: center;
|
|
/* background-color: blueviolet; */
|
|
}
|
|
|
|
#dbContact thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
}
|
|
|
|
/* Laptops (1024px - 1439px) monitores resulición baja */
|
|
@media (min-width: 1024px) and (max-width: 1439px) {
|
|
/* main{ background-color: purple; } */
|
|
main {
|
|
min-height: 80vh;
|
|
place-items: center;
|
|
/* background-color: aqua; */
|
|
}
|
|
|
|
#dbContact thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/* PCs de escritorio (1440px - 1919px) macbook */
|
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
|
/* main{ background-color: greenyellow; } */
|
|
main {
|
|
min-height: 80vh;
|
|
}
|
|
|
|
|
|
#dbContact thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
}
|
|
|
|
/* Pantallas Ultrawide (1920px en adelante) */
|
|
@media (min-width: 1920px) {
|
|
/* main{ background-color: red; } */
|
|
main {
|
|
min-height: 80vh;
|
|
}
|
|
|
|
|
|
#dbContact thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* #dbContact th:nth-child(2),
|
|
#dbContact td:nth-child(2) {
|
|
display: none;
|
|
} */ |