121 lines
2.5 KiB
CSS
121 lines
2.5 KiB
CSS
html {
|
|
font-size: 14px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
|
|
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
|
|
}
|
|
|
|
html {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* Capa para la imagen borrosa */
|
|
body::before {
|
|
content: "";
|
|
background-image: url('/images/background.jpg'); /* Ruta de tu imagen */
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-color: #f5f5f5;
|
|
background-attachment: fixed; /* Imagen fija */
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: blur(3px); /* Ajusta el desenfoque */
|
|
z-index: -1; /* Envía la capa al fondo */
|
|
opacity: 0.7; /* Transparencia opcional */
|
|
}
|
|
|
|
/* Asegura que el contenido esté por encima del fondo */
|
|
.container, nav, footer {
|
|
position: relative;
|
|
z-index: 1; /* Solo los elementos necesarios por encima del fondo */
|
|
}
|
|
|
|
/* El jumbotron debe tener un índice más bajo para no interferir */
|
|
.jumbotron {
|
|
position: relative;
|
|
z-index: 0; /* Jumbotron no debe tapar los desplegables */
|
|
}
|
|
|
|
/* Asegura que los desplegables del navbar estén por encima */
|
|
.dropdown-menu {
|
|
z-index: 1000 !important; /* Bootstrap ya lo configura, pero forzamos si es necesario */
|
|
}
|
|
|
|
.card-transparent {
|
|
background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco con 80% de transparencia */
|
|
border: none; /* Elimina los bordes */
|
|
border-radius: 10px; /* Bordes redondeados */
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Opcional: sombra suave */
|
|
}
|
|
|
|
.card-transparent .card-body {
|
|
color: #333; /* Color del texto para asegurar legibilidad */
|
|
}
|
|
|
|
|
|
#productsTable tbody {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill,minmax(45%,1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
#productsTable tr {
|
|
display: contents;
|
|
}
|
|
|
|
#productsTable td {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
#tooltip {
|
|
position: absolute;
|
|
padding: 6px 10px;
|
|
background: rgba(0,0,0,0.7);
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
z-index: 10000;
|
|
}
|
|
|
|
#legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
#legend div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#legend div > div {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
|
|
|
|
|