refactor: Migra todos los widgets nacionales a CSS Modules para encapsular estilos
Esta refactorización modifica la forma en que los widgets manejan sus estilos para prevenir conflictos con los CSS de los sitios anfitriones donde se incrustan. Se ha migrado el sistema de estilos de CSS global a CSS Modules para todos los componentes principales y sus hijos, asegurando que todas las clases sean únicas y estén aisladas. Cambios principales: - Se actualizan los componentes .tsx para importar y usar los módulos de estilos (`import styles from ...`). - Se renombran los archivos `.css` a `.module.css`. - Se añade una regla en cada módulo para proteger la `font-family` y el `box-sizing` del widget, evitando que sean sobreescritos por estilos externos. - Se ajustan los selectores para librerías de terceros (react-select, react-simple-maps) usando `:global()` para mantener la compatibilidad. - Se mueven las variables CSS de `:root` a las clases principales de cada widget para evitar colisiones en el scope global. Como resultado, los widgets (`HomeCarouselWidget`, `PanelNacionalWidget`, `ResultadosNacionalesCardsWidget`, `CongresoNacionalWidget`) son ahora más robustos, portátiles y visualmente consistentes en cualquier entorno.
This commit is contained in:
@@ -0,0 +1,539 @@
|
||||
/* src/features/legislativas/nacionales/PanelNacional.module.css */
|
||||
|
||||
/* --- SOLUCIÓN PARA FUENTES Y ESTILOS GLOBALES --- */
|
||||
.panelNacionalContainer,
|
||||
.panelNacionalContainer * {
|
||||
font-family: 'Roboto', sans-serif !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.panelNacionalContainer {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.panelHeader {
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.headerTopRow {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* --- ESTILOS PARA REACT-SELECT USANDO MÓDULOS --- */
|
||||
.categoriaSelectorContainer {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.categoriaSelectorContainer :global(.categoriaSelector__control) {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #e0e0e0 !important;
|
||||
box-shadow: none !important;
|
||||
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.categoriaSelectorContainer :global(.categoriaSelector__control--is-focused) {
|
||||
border-color: #007bff !important;
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
|
||||
}
|
||||
|
||||
.categoriaSelectorContainer :global(.categoriaSelector__single-value) {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.categoriaSelectorContainer :global(.categoriaSelector__menu) {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
|
||||
border: 1px solid #e0e0e0 !important;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
.categoriaSelectorContainer :global(.categoriaSelector__option) {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.categoriaSelectorContainer :global(.categoriaSelector__option--is-focused) {
|
||||
background-color: #f0f8ff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.categoriaSelectorContainer :global(.categoriaSelector__option--is-selected) {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.categoriaSelectorContainer :global(.categoriaSelector__indicator-separator) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.categoriaSelectorContainer :global(.categoriaSelector__indicator) {
|
||||
color: #a0a0a0;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.categoriaSelectorContainer :global(.categoriaSelector__indicator:hover) {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
/* --- ESTILOS MODERNOS PARA BREADCRUMBS --- */
|
||||
.breadcrumbsContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.breadcrumbItem,
|
||||
.breadcrumbItemActual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.breadcrumbItem {
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #e0e0e0;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.breadcrumbItem:hover {
|
||||
background-color: #e0e0e0;
|
||||
border-color: #d1d1d1;
|
||||
}
|
||||
|
||||
.breadcrumbItemActual {
|
||||
background-color: transparent;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.breadcrumbIcon {
|
||||
margin-right: 0.4rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.breadcrumbSeparator {
|
||||
color: #a0a0a0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.panelMainContent {
|
||||
display: flex;
|
||||
height: 75vh;
|
||||
min-height: 500px;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.mapaColumn {
|
||||
flex: 2;
|
||||
position: relative;
|
||||
transition: flex 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.resultadosColumn {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1.25rem;
|
||||
transition: all 0.5s ease-in-out;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.partidoFila {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-left: 5px solid;
|
||||
border-radius: 12px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.partidoLogo {
|
||||
flex-shrink: 0;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.partidoLogo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.partidoMainContent {
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
align-items: center;
|
||||
gap: 0.25rem 0.75rem;
|
||||
}
|
||||
|
||||
.partidoTopRow { display: contents; }
|
||||
.partidoInfoWrapper { min-width: 0; text-align: left; }
|
||||
|
||||
.partidoNombre {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
color: #212529;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.partidoNombreNormal {
|
||||
font-size: 1rem;
|
||||
color: #212529;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.candidatoNombre {
|
||||
font-size: 0.75rem;
|
||||
color: #6c757d;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.partidoStats { flex-shrink: 0; text-align: right; padding-left: 1rem; }
|
||||
.partidoPorcentaje { font-size: 1.35rem; font-weight: 700; display: block; }
|
||||
.partidoVotos { font-size: 0.9rem; color: #666; display: block; }
|
||||
|
||||
.partidoBarraBackground {
|
||||
height: 12px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.partidoBarraForeground {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.panelEstadoRecuento {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.estadoItem {
|
||||
width: 95px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.estadoItem span {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* --- ESTILOS PARA MAPA --- */
|
||||
/* --- INICIO DE LA CORRECCIÓN --- */
|
||||
.mapaComponenteContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative; /* Esta línea es la que faltaba */
|
||||
overflow: hidden;
|
||||
}
|
||||
/* --- FIN DE LA CORRECCIÓN --- */
|
||||
|
||||
.mapaRenderArea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
|
||||
|
||||
.mapaVolverBtn,
|
||||
.zoomBtn {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e0e0e0; /* Borde más sutil */
|
||||
border-radius: 8px; /* Bordes más suaves */
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada y moderna */
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease-in-out; /* Transición suave para todos los efectos */
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mapaVolverBtn:hover,
|
||||
.zoomBtn:hover:not(:disabled) {
|
||||
border-color: #007bff; /* Borde de acento */
|
||||
color: #007bff; /* Icono/texto de acento */
|
||||
transform: translateY(-2px); /* Efecto de "levantar" */
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.mapaVolverBtn:active,
|
||||
.zoomBtn:active:not(:disabled) {
|
||||
transform: translateY(0px); /* Botón "presionado" */
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra interior */
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.mapaVolverBtn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 10;
|
||||
padding: 8px 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:global(.rsm-zoomable-group) { transition: transform 0.75s ease-in-out; }
|
||||
:global(.rsm-zoomable-group.panning) { transition: none; }
|
||||
|
||||
.panelMainContent.panelCollapsed .mapaColumn { flex: 1 1 100%; }
|
||||
|
||||
.panelMainContent.panelCollapsed .resultadosColumn {
|
||||
flex-basis: 0;
|
||||
min-width: 0;
|
||||
max-width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panelToggleBtn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: white;
|
||||
border-radius: 4px 0 0 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.panelToggleBtn:hover { background-color: #f0f0f0; }
|
||||
|
||||
:global(.rsm-geography) {
|
||||
stroke: #000000;
|
||||
stroke-width: 0.25px;
|
||||
outline: none;
|
||||
transition: filter 0.2s ease-in-out;
|
||||
}
|
||||
:global(.rsm-geography:not(.selected):hover) {
|
||||
filter: brightness(1.25);
|
||||
stroke: #ffffff;
|
||||
stroke-width: 0.25px;
|
||||
paint-order: stroke;
|
||||
}
|
||||
:global(.rsm-geography.selected) {
|
||||
stroke: #000000;
|
||||
stroke-width: 0.25px;
|
||||
filter: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
:global(.rsm-geography-faded), :global(.rsm-geography-faded-municipality) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
:global(.caba-comuna-geography) {
|
||||
stroke: #000000;
|
||||
stroke-width: 0.05px;
|
||||
}
|
||||
:global(.caba-comuna-geography:not(.selected):hover) {
|
||||
stroke: #000000;
|
||||
stroke-width: 0.055px;
|
||||
filter: brightness(1.25);
|
||||
}
|
||||
|
||||
.transitionSpinner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.transitionSpinner::after {
|
||||
content: '';
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 5px solid rgba(0, 0, 0, 0.2);
|
||||
border-top-color: #007bff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.cabaMagnifierContainer { position: absolute; height: auto; transform: translate(-50%, -50%); pointer-events: none; }
|
||||
.cabaLupaSvg { width: 100%; height: auto; pointer-events: none; }
|
||||
.cabaLupaInteractiveArea { pointer-events: all; cursor: pointer; filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25)); transition: transform 0.2s ease-in-out; }
|
||||
.cabaLupaInteractiveArea:hover { filter: brightness(1.15); stroke: #ffffff; stroke-width: 0.25px; }
|
||||
|
||||
.skeletonFila div {
|
||||
background: #f6f7f8;
|
||||
background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 800px 104px;
|
||||
animation: shimmer 1s linear infinite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.skeletonLogo { width: 65px; height: 65px; }
|
||||
.skeletonText { height: 1em; }
|
||||
.skeletonBar { height: 20px; margin-top: 4px; }
|
||||
|
||||
.zoomControlsContainer {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px; /* Un poco más de espacio */
|
||||
}
|
||||
|
||||
/* Estilos específicos para los botones de zoom */
|
||||
.zoomBtn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.zoomIconWrapper svg {
|
||||
width: 22px; /* Iconos ligeramente más grandes */
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
/* Estilo para el botón deshabilitado */
|
||||
.zoomBtn:disabled,
|
||||
.zoomBtn.disabled { /* Cubrimos ambos casos */
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
:global(.map-locked .rsm-geography) { cursor: pointer; }
|
||||
:global(.map-pannable .rsm-geography) { cursor: grab; }
|
||||
|
||||
.headerBottomRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.municipioSearchContainer { min-width: 280px; }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.panelNacionalContainer { display: flex; flex-direction: column; height: 100vh; padding: 0; border: none; border-radius: 0; }
|
||||
.panelHeader { flex-shrink: 0; padding: 1rem; border-radius: 0; }
|
||||
.panelMainContent { flex-grow: 1; position: relative; height: auto; min-height: 0; }
|
||||
.panelToggleBtn { display: none; }
|
||||
.headerTopRow { flex-direction: column; align-items: flex-start; gap: 1rem; }
|
||||
.categoriaSelectorContainer { width: 100%; }
|
||||
.mapaColumn,
|
||||
.resultadosColumn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; }
|
||||
.mapaColumn { z-index: 10; }
|
||||
.resultadosColumn { padding: 1rem; overflow-y: auto; z-index: 15; }
|
||||
.panelMainContent.mobile-view-mapa .resultadosColumn { opacity: 0; visibility: hidden; pointer-events: none; }
|
||||
.panelMainContent.mobile-view-resultados .mapaColumn { opacity: 0; visibility: hidden; pointer-events: none; }
|
||||
.resultadosColumn { padding: 0.5rem; padding-bottom: 50px; }
|
||||
.mapaColumn .mapaComponenteContainer, .mapaColumn .mapaRenderArea { height: 100%; }
|
||||
.panelPartidosContainer { padding-bottom: 0; }
|
||||
.zoomControlsContainer, .mapaVolverBtn { top: 15px; }
|
||||
.headerBottomRow { flex-direction: column; align-items: stretch; gap: 1rem; }
|
||||
.municipioSearchContainer { min-width: 100%; }
|
||||
|
||||
@media (max-width: 900px) and (orientation: landscape) {
|
||||
.panelMainContent { display: flex; flex-direction: row; position: static; height: 85vh; min-height: 400px; }
|
||||
.mapaColumn,
|
||||
.resultadosColumn { position: static; height: auto; width: auto; opacity: 1; visibility: visible; pointer-events: auto; flex: 3; overflow-y: auto; }
|
||||
.resultadosColumn { flex: 2; min-width: 300px; }
|
||||
.mobileResultsCardContainer { display: none; }
|
||||
.panelToggleBtn { display: flex; }
|
||||
}
|
||||
}
|
||||
|
||||
.mobileResultsCardContainer {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 40;
|
||||
width: 95%;
|
||||
max-width: 450px;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease-in-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.mobileResultsCardContainer.view-resultados .collapsibleSection { display: none; }
|
||||
.mobileResultsCardContainer.view-resultados .mobileCardViewToggle { border-top: none; }
|
||||
.collapsibleSection { display: flex; flex-direction: column; }
|
||||
.mobileResultsHeader { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; cursor: pointer; }
|
||||
.mobileResultsHeader .headerInfo { display: flex; align-items: baseline; gap: 12px; }
|
||||
.mobileResultsHeader .headerInfo h4 { margin: 0; font-size: 1.2rem; font-weight: 700; }
|
||||
.mobileResultsHeader .headerInfo .headerActionText { font-size: 0.8rem; color: #6c757d; font-weight: 500; text-transform: uppercase; }
|
||||
.mobileResultsHeader .headerToggleIcon { font-size: 1.5rem; color: #007bff; transition: transform 0.3s; }
|
||||
.mobileResultsContent { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out; padding: 0 15px; border-top: 1px solid transparent; }
|
||||
.mobileResultsCardContainer.expanded .mobileResultsContent { max-height: 500px; opacity: 1; padding: 5px 15px 15px 15px; border-top-color: #e0e0e0; }
|
||||
.mobileResultRow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; border-left: 4px solid; padding-left: 8px; }
|
||||
.mobileResultRow:last-child { border-bottom: none; }
|
||||
.mobileResultLogo { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; }
|
||||
.mobileResultLogo img { width: 100%; height: 100%; border-radius: 8px; }
|
||||
.mobileResultInfo { flex-grow: 1; min-width: 0; }
|
||||
.mobileResultPartyName { display: block; font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.mobileResultCandidateName { display: block; font-size: 0.75rem; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.mobileResultStats { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
|
||||
.mobileResultStats strong { font-size: 0.95rem; font-weight: 700; }
|
||||
.mobileResultStats span { font-size: 0.7rem; color: #6c757d; }
|
||||
.noResultsText { padding: 1rem; text-align: center; color: #6c757d; font-size: 0.9rem; }
|
||||
.mobileCardViewToggle { display: flex; padding: 5px; background-color: rgba(230, 230, 230, 0.6); border-top: 1px solid rgba(0, 0, 0, 0.08); }
|
||||
.mobileCardViewToggle .toggleBtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: none; background-color: transparent; border-radius: 25px; cursor: pointer; font-size: 1rem; font-weight: 500; color: #555; transition: all 0.2s ease-in-out; }
|
||||
.mobileCardViewToggle .toggleBtn.active { background-color: #007bff; color: white; box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2); }
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.mobileResultsHeader { padding: 4px 10px; }
|
||||
.mobileResultsHeader .headerInfo h4 { font-size: 0.75rem; text-transform: uppercase; }
|
||||
.mobileResultsHeader .headerInfo .headerActionText { font-size: 0.7rem; }
|
||||
.mobileCardViewToggle .toggleBtn { padding: 6px 10px; font-size: 0.8rem; }
|
||||
}
|
||||
Reference in New Issue
Block a user