308 lines
8.6 KiB
CSS
308 lines
8.6 KiB
CSS
/* src/features/legislativas/nacionales/HomeCarouselWidget.module.css */
|
|
|
|
.homeCarouselWidget {
|
|
--primary-text: #212529;
|
|
--secondary-text: #6c757d;
|
|
--border-color: #dee2e6;
|
|
--background-light: #f8f9fa;
|
|
--background-white: #ffffff;
|
|
--shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
|
|
--font-family-sans: "Roboto", system-ui, sans-serif;
|
|
}
|
|
|
|
.homeCarouselWidget,
|
|
.homeCarouselWidget * {
|
|
font-family: var(--font-family-sans) !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.homeCarouselWidget {
|
|
background-color: var(--background-white);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 0.75rem;
|
|
max-width: 1200px;
|
|
margin: 2rem auto;
|
|
position: relative;
|
|
}
|
|
|
|
.carouselContainer {
|
|
position: relative;
|
|
}
|
|
|
|
.widgetTitle {
|
|
font-size: 1.2rem;
|
|
font-weight: 900;
|
|
color: var(--primary-text);
|
|
margin: 0 0 0.5rem 0;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
text-align: left;
|
|
}
|
|
|
|
.topStatsBar {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background-color: transparent;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 0.3rem 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.topStatsBar > div {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
border-right: 1px solid var(--border-color);
|
|
padding: 0 0.5rem;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
}
|
|
.topStatsBar > div:last-child { border-right: none; }
|
|
.topStatsBar span { font-size: 0.9rem; color: var(--secondary-text); }
|
|
.topStatsBar strong { font-size: 0.9rem; font-weight: 600; color: var(--primary-text); }
|
|
|
|
.candidateCard {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
background: var(--background-white);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 0.75rem;
|
|
box-shadow: var(--shadow);
|
|
border-left: 5px solid;
|
|
border-left-color: var(--candidate-color, #ccc);
|
|
position: relative;
|
|
}
|
|
|
|
.candidatePhotoWrapper {
|
|
flex-shrink: 0;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background-color: var(--candidate-color, #e9ecef);
|
|
}
|
|
|
|
.candidatePhoto {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
object-fit: cover;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.candidateDetails {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.candidateInfo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items:flex-start;
|
|
gap: 0.1rem;
|
|
min-width: 0;
|
|
margin-right: 0.75rem;
|
|
}
|
|
|
|
.candidateName, .partyName {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0;
|
|
color: var(--primary-text);
|
|
text-align: left;
|
|
}
|
|
.candidateName {
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
}
|
|
.partyName {
|
|
font-size: 0.8rem;
|
|
color: var(--secondary-text);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.candidateResults { text-align: right; flex-shrink: 0; }
|
|
.percentage {
|
|
display: block;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
color: var(--primary-text);
|
|
line-height: 1.1;
|
|
}
|
|
.votes {
|
|
font-size: 0.75rem;
|
|
color: var(--secondary-text);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Estilo base para ambos botones */
|
|
.navButton {
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
transition: opacity 0.2s;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
margin-top: 0;
|
|
z-index: 10;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Usamos el pseudo-elemento ::after para mostrar el icono SVG como fondo */
|
|
.navButton::after {
|
|
content: ''; /* Es necesario para que el pseudo-elemento se muestre */
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
/* Ajustamos el tamaño del icono dentro del botón */
|
|
background-size: 75%;
|
|
}
|
|
|
|
/* Posición y contenido específico para cada botón */
|
|
.navButtonPrev {
|
|
left: 10px;
|
|
}
|
|
.navButtonPrev::after {
|
|
/* SVG de flecha izquierda (chevron) codificado en Base64 */
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMTI1MjkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxNSA2IDkgMTIgMTUgMTgiPjwvcG9seWxpbmU+PC9zdmc+");
|
|
}
|
|
|
|
.navButtonNext {
|
|
right: 10px;
|
|
}
|
|
.navButtonNext::after {
|
|
/* SVG de flecha derecha (chevron) codificado en Base64 */
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMTI1MjkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI5IDYgMTUgMTIgOSAxOCI+PC9wb2x5bGluZT48L3N2Zz4=");
|
|
}
|
|
|
|
/* Swiper añade esta clase al botón cuando está deshabilitado */
|
|
.navButton.swiper-button-disabled {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.homeCarouselWidget :global(.swiper-slide) {
|
|
background: transparent !important;
|
|
color: initial !important;
|
|
text-align: left !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.homeCarouselWidget :global(.swiper-slide:not(:last-child)) .candidateCard::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -8px;
|
|
top: 20%;
|
|
bottom: 20%;
|
|
width: 1px;
|
|
background-color: var(--border-color);
|
|
}
|
|
|
|
/* --- INICIO DE LA MODIFICACIÓN DE FLECHAS --- */
|
|
|
|
.homeCarouselWidget :global(.swiper-button-prev),
|
|
.homeCarouselWidget :global(.swiper-button-next) {
|
|
width: 30px !important;
|
|
height: 30px !important;
|
|
background-color: rgba(255, 255, 255, 0.9) !important;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
transition: opacity 0.2s;
|
|
position: absolute !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
margin-top: 0 !important;
|
|
z-index: 10;
|
|
}
|
|
|
|
.homeCarouselWidget :global(.swiper-button-prev:after),
|
|
.homeCarouselWidget :global(.swiper-button-next:after) {
|
|
display: block !important;
|
|
font-family: 'swiper-icons';
|
|
font-size: 14px !important;
|
|
font-weight: bold !important;
|
|
color: var(--primary-text) !important;
|
|
}
|
|
|
|
.homeCarouselWidget :global(.swiper-button-prev) { left: 10px !important; }
|
|
.homeCarouselWidget :global(.swiper-button-next) { right: 10px !important; }
|
|
|
|
.homeCarouselWidget :global(.swiper-button-disabled) {
|
|
opacity: 0 !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.widgetFooter {
|
|
text-align: right;
|
|
font-size: 0.75rem;
|
|
color: var(--secondary-text);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.shortText {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.homeCarouselWidget .widgetTitle { text-align: center; font-size: 1.1rem; }
|
|
.homeCarouselWidget .topStatsBar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.2rem; padding: 0.3rem; }
|
|
.homeCarouselWidget .topStatsBar > div { padding: 0.25rem 0.5rem; border-right: none; }
|
|
.homeCarouselWidget .topStatsBar > div:nth-child(odd) { border-right: 1px solid var(--border-color); }
|
|
.homeCarouselWidget .longText { display: none; }
|
|
.homeCarouselWidget .shortText { display:inline; }
|
|
.homeCarouselWidget .topStatsBar span { font-size: 0.8rem; text-align: left; }
|
|
.homeCarouselWidget .topStatsBar strong { font-size: 0.85rem; text-align: right; }
|
|
|
|
/* Ajustamos los botones custom en mobile */
|
|
.navButton {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.navButton::after {
|
|
line-height: 32px;
|
|
}
|
|
.navButtonPrev { left: 5px; }
|
|
.navButtonNext { right: 5px; }
|
|
|
|
.homeCarouselWidget .candidateCard { gap: 0.5rem; padding: 0.5rem; }
|
|
.homeCarouselWidget .candidatePhotoWrapper { width: 50px; height: 50px; }
|
|
.homeCarouselWidget .candidateName { font-size: 0.9rem; }
|
|
.homeCarouselWidget .percentage { font-size: 1.1rem; }
|
|
.homeCarouselWidget .votes { font-size: 0.7rem; }
|
|
.homeCarouselWidget .widgetFooter { text-align: center; }
|
|
}
|
|
|
|
/* Mantenemos estos estilos globales por si acaso */
|
|
.homeCarouselWidget :global(.swiper-slide) {
|
|
background: transparent !important;
|
|
color: initial !important;
|
|
text-align: left !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.homeCarouselWidget :global(.swiper-slide:not(:last-child)) .candidateCard::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -8px;
|
|
top: 20%;
|
|
bottom: 20%;
|
|
width: 1px;
|
|
background-color: var(--border-color);
|
|
} |