TDTP
/
cms_static
mirror of https://gitlab.com/m3f_usm/cms-sveltekit
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

se mejora css de paradero

master
francisco 2024-03-23 18:32:18 -03:00
parent f1469e82a1
commit dc1caf47f7
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/routes/paradero/+page.svelte
View File

@ -96,7 +96,7 @@
<div class="contenedor"> <div class="contenedor">
<div class="rectangulo-naranja"> <div class="rectangulo-naranja">
<img src={ImagenBus} alt="Bus" width="200" /> <img src={ImagenBus} alt="Bus" style="max-width: 200px; width: 30%;" />
<div class="nombre-paradero">{nombreParadero}</div> <div class="nombre-paradero">{nombreParadero}</div>
</div> </div>
@ -105,8 +105,8 @@
<div class="cuadricula"> <div class="cuadricula">
{#if paraderoData?.DetalleLineas} {#if paraderoData?.DetalleLineas}
{#each paraderoData.DetalleLineas as linea} {#each paraderoData.DetalleLineas as linea}
<div class="rectangulo-pequeno"> <div class="rectangulo-pequeno" style="background-color: #{linea.colorFondo || '#5fbabe'}">
<div style="position: relative;"> <div style="position: relative; background-color: #fff;">
<div class="numero-micro"> <div class="numero-micro">
{LetraoNumeroMicro(linea.Descripcion, 0)} {LetraoNumeroMicro(linea.Descripcion, 0)}
</div> </div>
@ -118,11 +118,7 @@
{LetraoNumeroMicro(linea.Descripcion, 1)} {LetraoNumeroMicro(linea.Descripcion, 1)}
</div> </div>
</div> </div>
<div <div class="hora">
class="hora"
style="background-color: #{linea.colorFondo ||
'#5fbabe'}"
>
<div>{linea.Linea}</div> <div>{linea.Linea}</div>
{#if linea.Llegadas[0]?.EstimadaGPS} {#if linea.Llegadas[0]?.EstimadaGPS}
<!-- {formatTimeMinutes(linea.Llegadas[0])} --> <!-- {formatTimeMinutes(linea.Llegadas[0])} -->
@ -144,6 +140,7 @@
/* Estilos generales */ /* Estilos generales */
.contenedor { .contenedor {
width: 800px; width: 800px;
max-width: 90%;
margin: 5rem auto; /* Centra el contenedor en la pantalla */ margin: 5rem auto; /* Centra el contenedor en la pantalla */
} }
@ -160,7 +157,7 @@
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
margin-right: 10px; margin-right: 10px;
margin-left: 120px; text-align: center;
} }
.rectangulo-gris { .rectangulo-gris {
@ -177,10 +174,6 @@
margin-top: 10px; margin-top: 10px;
} }
@media (max-width: 600px) {
.contenedor { zoom: .45 }
}
.rectangulo-pequeno { .rectangulo-pequeno {
position: relative; position: relative;
flex-direction: column; flex-direction: column;
@ -197,6 +190,7 @@
font-weight: bold; font-weight: bold;
margin-right: 100px; margin-right: 100px;
color: #8c8b8d; color: #8c8b8d;
padding-left: 10px;
} }
.circulo-letra { .circulo-letra {
@ -211,13 +205,19 @@
color: #fff; color: #fff;
position: absolute; position: absolute;
top: 25px; top: 25px;
right: 10px; right: 20px;
} }
.hora { .hora {
margin-top: 5px; margin-top: 5px;
background-color: #2196f3;
color: #fff; color: #fff;
width: 266px; width: 100%;
}
@media (max-width: 600px) {
.nombre-paradero { font-size: 20px; }
.numero-micro { font-size: 35px }
.circulo-letra { width: 35px; height: 35px; top: 10px; right: 10px; }
.hora { font-size: 12px; }
} }
</style> </style>