62 lines
1.2 KiB
CSS
62 lines
1.2 KiB
CSS
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.625rem;
|
|
height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.screen {
|
|
width: 80%;
|
|
height: 1.25rem;
|
|
background: linear-gradient(to bottom, #ccc, #fff);
|
|
margin-bottom: 1.25rem;
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
color: #333;
|
|
border-radius: 0.25rem;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
|
|
}
|
|
.seat-canvas {
|
|
width: 100%;
|
|
height: 15.625rem;
|
|
background-color: #fff;
|
|
margin-bottom: 0.625rem;
|
|
border-radius: 0.25rem;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
|
|
}
|
|
.legend {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 0.625rem;
|
|
}
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 0.625rem;
|
|
}
|
|
.seat-icon {
|
|
width: 0.9375rem;
|
|
height: 0.9375rem;
|
|
margin-right: 0.3125rem;
|
|
border-radius: 0.125rem;
|
|
}
|
|
.available {
|
|
background-color: #4CAF50;
|
|
}
|
|
.selected {
|
|
background-color: #2196F3;
|
|
}
|
|
.sold {
|
|
background-color: #9E9E9E;
|
|
}
|
|
.selected-seats {
|
|
padding: 0.625rem;
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
width: 90%;
|
|
text-align: center;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
|
|
}
|