Actualizar Interfaz/estilos/ventaboletos.css
This commit is contained in:
parent
01401707fc
commit
bfb4c4c0b5
Interfaz/estilos
|
|
@ -1,6 +1,6 @@
|
|||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #d9d9d9 !important;
|
||||
background-color: #f3f1ec !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -8,38 +8,96 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.contenedor {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 40px;
|
||||
max-width: 1100px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.seleccion-asientos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#titulo {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.flecha-regresar {
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: -100px;
|
||||
top: 10%;
|
||||
transform: translateY(-50%);
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
transition: 0.3s ease-in-out;
|
||||
padding: 10px;
|
||||
border-radius: 40%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.flecha-regresar:hover {
|
||||
background-color: rgba(239, 226, 226, 0.1);
|
||||
background-color: rgba(239, 226, 226, 0.2);
|
||||
}
|
||||
|
||||
.contenido {
|
||||
display: flex;
|
||||
|
||||
.panel-boletos {
|
||||
flex: 1;
|
||||
width: 320px;
|
||||
padding: 20px;
|
||||
background: #7B8FA1;
|
||||
color: white;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.lista-boletos {
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
.boleto-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.boleto-item span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.total {
|
||||
font-size: 20px;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
color: #FFD700;
|
||||
}
|
||||
|
||||
|
||||
.contenido {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
#titulo{
|
||||
|
|
@ -55,17 +113,25 @@ body {
|
|||
}
|
||||
|
||||
.dias button {
|
||||
padding: 12px;
|
||||
padding: 12px 20px;
|
||||
border: 1px solid #ccc;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
color: rgb(61, 61, 61);
|
||||
font-size: 18px;
|
||||
border-radius: 8px;
|
||||
transition: background 0.3s, transform 0.2s;
|
||||
}
|
||||
|
||||
.dias button:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
|
||||
.dias button.selected {
|
||||
background: rgb(51, 108, 212);
|
||||
color: white;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.grid {
|
||||
|
|
@ -74,6 +140,9 @@ body {
|
|||
gap: 5px;
|
||||
margin-bottom: 30px;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.asiento {
|
||||
|
|
@ -98,10 +167,91 @@ body {
|
|||
}
|
||||
|
||||
.boton-vender {
|
||||
padding: 10px 20px;
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background: rgb(68, 102, 68);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 18%;
|
||||
border-radius: 10px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.boton-vender:hover {
|
||||
background: rgb(50, 80, 50);
|
||||
}
|
||||
|
||||
|
||||
#asientos {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Fondo borroso */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-visible {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
#comprobanteModal {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
z-index: 1001;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.modal-buttons button {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-buttons .confirm {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-buttons .cancel {
|
||||
background-color: #d9534f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.escenario {
|
||||
width: 80%;
|
||||
height: 20px;
|
||||
background-color: gray;
|
||||
border-radius: 5px;
|
||||
margin: 10px auto;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
line-height: 20px; /* Centrar el texto verticalmente */
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue