156 lines
3.5 KiB
CSS
156 lines
3.5 KiB
CSS
/* src/features/legislativas/provinciales/TickerWidget.css */
|
|
|
|
/* --- Contenedor Principal del Widget --- */
|
|
.ticker-card {
|
|
background-color: #ffffff;
|
|
border: 1px solid #e0e0e0;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
|
padding: 1rem; /* Usamos rem para un padding relativo */
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
/* --- CAMBIO CLAVE: Establecemos un tamaño de fuente base --- */
|
|
/* 1rem = al tamaño de fuente del contenedor padre. Si la página usa 16px,
|
|
el widget usará 16px como base. Si usa 14px, se adaptará a 14px. */
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* --- Cabecera del Ticker --- */
|
|
.ticker-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
padding-bottom: 0.8rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.ticker-header h3 {
|
|
margin: 0;
|
|
color: #212529;
|
|
/* El tamaño del título es 1.1 veces el tamaño base del widget */
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.ticker-stats {
|
|
display: flex;
|
|
gap: 1.25rem; /* 20px / 16px */
|
|
font-size: 0.875rem; /* 14px / 16px */
|
|
color: #555;
|
|
}
|
|
|
|
.ticker-stats strong {
|
|
color: #0073e6;
|
|
font-size: 1.1em; /* 1.1 veces el tamaño de su padre (0.875rem) */
|
|
}
|
|
|
|
|
|
/* --- Resultados (Grid de Partidos) --- */
|
|
.ticker-results {
|
|
display: grid;
|
|
/* Mantenemos minmax para la responsividad de las columnas */
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 1.25rem; /* 20px */
|
|
}
|
|
|
|
.ticker-party {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem; /* 10px */
|
|
}
|
|
|
|
/* Logo del partido */
|
|
.party-logo {
|
|
flex-shrink: 0;
|
|
width: 65px; /* Ligeramente más pequeño para no ser tan dominante */
|
|
height: 65px;
|
|
}
|
|
.party-logo img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain; /* Usar 'contain' es más seguro para logos */
|
|
border-radius: 4px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
/* Detalles (Nombre, Barra, Candidato) */
|
|
.party-details {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ticker-party .party-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline; /* Alinea la base del texto */
|
|
margin-bottom: 0.3rem; /* 5px */
|
|
}
|
|
|
|
.ticker-party .party-name {
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding-right: 0.6rem;
|
|
font-size: 0.9rem;
|
|
color: #343a40;
|
|
}
|
|
|
|
.ticker-party .party-percent {
|
|
font-weight: 700;
|
|
font-size: 0.95rem; /* Un poco más grande para destacar */
|
|
flex-shrink: 0; /* Evita que el porcentaje se comprima */
|
|
}
|
|
|
|
.party-bar-background {
|
|
background-color: #e9ecef;
|
|
border-radius: 4px;
|
|
height: 8px; /* Un poco más delgada */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.party-bar-foreground {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 0.5s ease-in-out;
|
|
}
|
|
|
|
.party-candidate-name {
|
|
font-size: 0.8rem; /* 12.8px / 16px */
|
|
color: #555;
|
|
margin-top: 0.3rem; /* 4px */
|
|
font-weight: 400; /* Ligeramente menos pesado */
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
|
|
/* --- Media Query para Móviles --- */
|
|
@media (max-width: 600px) {
|
|
.ticker-header {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.ticker-header h3 {
|
|
font-size: 1.1rem;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.ticker-results {
|
|
/* En móvil, forzamos una sola columna */
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ticker-party .party-name,
|
|
.party-candidate-name {
|
|
white-space: normal; /* Permitimos que el texto se divida en varias líneas */
|
|
}
|
|
} |