/* ===================================================================== Bold Reports Viewer — overrides para integrarse con tema MudBlazor --------------------------------------------------------------------- Causa raíz: el menú Export del visor (icono compartir) y los tooltips/popups se renderizan con clases propias de BoldReports (no las genéricas .e-menu-popup), por ejemplo: .e-reportviewer-exporttip (contenedor del menú Export) .e-reportviewer-popupli (cada item PDF / Word / Excel / CSV) .e-reportviewer-fittopagetip (popup zoom) .e-reportviewer-tooltip El CSS empaquetado define background:#fafafa y color por defecto, que en algunos casos hereda de la página y deja items "invisibles". Estrategia: alinear al tema MudBlazor (claro/oscuro) usando variables --mud-palette-* con fallback. Los popups se montan en , por eso muchos selectores son globales. Las clases son exclusivas de BoldReports/Syncfusion → no afectan al resto. ===================================================================== */ /* ---------- Contenedor del visor ---------- */ .bold-rv-host { background-color: var(--mud-palette-surface) !important; color: var(--mud-palette-text-primary) !important; } /* ---------- Toolbar superior (variante "native" y "classic") ---------- */ .bold-rv-host .e-rv-nativeToolbar, .bold-rv-host .e-rv-native-rightToolbar, .bold-rv-host .e-rv-native-rightToolbarOuter, .bold-rv-host .e-native-toolbar, .bold-rv-host .e-classic-toolbar, .bold-rv-host .e-toolbar, .bold-rv-host .e-toolbar-items, .bold-rv-host .e-toolbar-item, .bold-rv-host .e-reportviewer-toolbarcontainer { background-color: var(--mud-palette-surface) !important; color: var(--mud-palette-text-primary) !important; border-color: var(--mud-palette-divider) !important; } .bold-rv-host .e-toolbar .e-btn, .bold-rv-host .e-toolbar .e-tbar-btn, .bold-rv-host .e-toolbar .e-btn-icon, .bold-rv-host .e-toolbar .e-icons, .bold-rv-host .e-toolbar .e-viewer-icons, .bold-rv-host .e-native-toolbar .e-icons, .bold-rv-host .e-native-toolbar .e-viewer-icons, .bold-rv-host .e-rv-nativeToolbar .e-btn, .bold-rv-host .e-rv-nativeToolbar .e-btn-icon, .bold-rv-host .e-rv-native-rightToolbar .e-btn, .bold-rv-host .e-rv-native-rightToolbar .e-btn-icon { color: var(--mud-palette-text-primary) !important; background-color: transparent !important; } .bold-rv-host .e-toolbar .e-btn:hover, .bold-rv-host .e-toolbar .e-tbar-btn:hover, .bold-rv-host .e-rv-nativeToolbar .e-btn:hover, .bold-rv-host .e-rv-native-rightToolbar .e-btn:hover { background-color: var(--mud-palette-action-default-hover) !important; } /* Caja del page number / current page */ .bold-rv-host .e-toolbar-item .e-current-page-box, .bold-rv-host .e-reportviewer-pagenumber { background-color: var(--mud-palette-background) !important; color: var(--mud-palette-text-primary) !important; border-color: var(--mud-palette-divider) !important; } /* Panel lateral de parámetros */ .bold-rv-host .e-rv-parameterblock, .bold-rv-host .e-rv-classicpanel, .bold-rv-host .e-rv-nativepanel, .bold-rv-host .e-rv-native-PropertiesContainer, .bold-rv-host .e-rv-paramfooter, .bold-rv-host .e-rv-scroller { background-color: var(--mud-palette-surface) !important; color: var(--mud-palette-text-primary) !important; border-color: var(--mud-palette-divider) !important; } /* ===================================================================== Popups del visor (Export, Zoom, FitToPage, tooltips, etc.) Se montan en — selectores globales. ===================================================================== */ .e-reportviewer-exporttip, .e-reportviewer-fittopagetip, .e-reportviewer-tooltip, .e-reportviewer-drpdown, .e-rptviewer-drpdown, .e-reportviewer-ejdropdownlist, .e-reportviewer-dialog, .e-reportviewer-dialog-container, .e-reportviewer-documentmappopup, .e-reportviewer-export-toast-dialog, .e-export-dropdown, .e-popup.e-popup-open { background-color: var(--mud-palette-surface, #ffffff) !important; color: var(--mud-palette-text-primary, #212121) !important; border: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.12)) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important; } /* Lista interna (

PDF
dentro de .e-dropdown-popup > ul. Sin esta regla el texto hereda colores que lo dejan invisible. ===================================================================== */ .e-dropdown-popup, .e-dropdown-popup.e-export-dropdown, .e-dropdown-popup.e-fitpage-dropdown { background-color: var(--mud-palette-surface, #ffffff) !important; border: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.12)) !important; } .e-dropdown-popup ul, .e-dropdown-popup.e-export-dropdown ul, .e-dropdown-popup.e-fitpage-dropdown ul { background-color: var(--mud-palette-surface, #ffffff) !important; color: var(--mud-palette-text-primary, #212121) !important; } .e-dropdown-popup ul .e-item, .e-dropdown-popup.e-export-dropdown ul .e-item, .e-dropdown-popup.e-fitpage-dropdown ul .e-item { background-color: transparent !important; color: var(--mud-palette-text-primary, #212121) !important; font-family: var(--report-viewer-font, "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif) !important; } .e-dropdown-popup ul .e-item:hover, .e-dropdown-popup ul .e-item.e-focused, .e-dropdown-popup ul .e-item.e-selected, .e-dropdown-popup ul .e-item:focus, .e-dropdown-popup.e-export-dropdown ul .e-item:hover, .e-dropdown-popup.e-export-dropdown ul .e-item.e-focused, .e-dropdown-popup.e-export-dropdown ul .e-item.e-selected { background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06)) !important; color: var(--mud-palette-text-primary, #212121) !important; } .e-dropdown-popup ul .e-item .e-menu-icon, .e-dropdown-popup ul .e-item .e-icons { color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6)) !important; } .e-menu-popup .e-menu-item:hover, .e-menu-popup .e-menu-item.e-focused, .e-menu-popup .e-menu-item.e-selected, .e-dropdown-popup .e-menu-item:hover, .e-dropdown-popup .e-menu-item.e-focused, .e-dropdown-popup .e-menu-item.e-selected, .e-dropdown-popup .e-list-item:hover, .e-dropdown-popup .e-list-item.e-focused, .e-dropdown-popup .e-list-item.e-selected { background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06)) !important; color: var(--mud-palette-text-primary, #212121) !important; } /* Inputs dentro del visor / popups */ .bold-rv-host .e-input, .bold-rv-host .e-input-group, .e-popup .e-input, .e-popup .e-input-group, .e-reportviewer-exporttip .e-input, .e-reportviewer-drpdown .e-input { background-color: var(--mud-palette-background) !important; color: var(--mud-palette-text-primary) !important; border-color: var(--mud-palette-divider) !important; } /* ===================================================================== TEMA OSCURO — se activa por la clase mud-theme-dark en . Como los popups viven en , la cascada igualmente los alcanza. ===================================================================== */ .mud-theme-dark .bold-rv-host, .mud-theme-dark .bold-rv-host .e-rv-nativeToolbar, .mud-theme-dark .bold-rv-host .e-rv-native-rightToolbar, .mud-theme-dark .bold-rv-host .e-rv-native-rightToolbarOuter, .mud-theme-dark .bold-rv-host .e-native-toolbar, .mud-theme-dark .bold-rv-host .e-classic-toolbar, .mud-theme-dark .bold-rv-host .e-toolbar, .mud-theme-dark .bold-rv-host .e-toolbar-items, .mud-theme-dark .bold-rv-host .e-toolbar-item, .mud-theme-dark .bold-rv-host .e-reportviewer-toolbarcontainer, .mud-theme-dark .bold-rv-host .e-rv-parameterblock, .mud-theme-dark .bold-rv-host .e-rv-classicpanel, .mud-theme-dark .bold-rv-host .e-rv-nativepanel, .mud-theme-dark .bold-rv-host .e-rv-native-PropertiesContainer, .mud-theme-dark .bold-rv-host .e-rv-paramfooter, .mud-theme-dark .bold-rv-host .e-rv-scroller { background-color: var(--mud-palette-surface, #2a2a2a) !important; color: var(--mud-palette-text-primary, #ffffff) !important; border-color: var(--mud-palette-divider, rgba(255, 255, 255, 0.12)) !important; } .mud-theme-dark .bold-rv-host .e-toolbar .e-btn, .mud-theme-dark .bold-rv-host .e-toolbar .e-tbar-btn, .mud-theme-dark .bold-rv-host .e-toolbar .e-btn-icon, .mud-theme-dark .bold-rv-host .e-toolbar .e-icons, .mud-theme-dark .bold-rv-host .e-toolbar .e-viewer-icons, .mud-theme-dark .bold-rv-host .e-native-toolbar .e-icons, .mud-theme-dark .bold-rv-host .e-native-toolbar .e-viewer-icons, .mud-theme-dark .bold-rv-host .e-rv-nativeToolbar .e-btn, .mud-theme-dark .bold-rv-host .e-rv-nativeToolbar .e-btn-icon, .mud-theme-dark .bold-rv-host .e-rv-native-rightToolbar .e-btn, .mud-theme-dark .bold-rv-host .e-rv-native-rightToolbar .e-btn-icon { color: var(--mud-palette-text-primary, #ffffff) !important; } .mud-theme-dark .bold-rv-host .e-toolbar .e-btn:hover, .mud-theme-dark .bold-rv-host .e-toolbar .e-tbar-btn:hover, .mud-theme-dark .bold-rv-host .e-rv-nativeToolbar .e-btn:hover, .mud-theme-dark .bold-rv-host .e-rv-native-rightToolbar .e-btn:hover { background-color: var(--mud-palette-action-default-hover, rgba(255, 255, 255, 0.08)) !important; } .mud-theme-dark .bold-rv-host .e-toolbar-item .e-current-page-box, .mud-theme-dark .bold-rv-host .e-reportviewer-pagenumber { background-color: var(--mud-palette-background-grey, #1a1a1a) !important; color: var(--mud-palette-text-primary, #ffffff) !important; border-color: var(--mud-palette-divider, rgba(255, 255, 255, 0.12)) !important; } .mud-theme-dark .e-reportviewer-exporttip, .mud-theme-dark .e-reportviewer-fittopagetip, .mud-theme-dark .e-reportviewer-tooltip, .mud-theme-dark .e-reportviewer-drpdown, .mud-theme-dark .e-rptviewer-drpdown, .mud-theme-dark .e-reportviewer-ejdropdownlist, .mud-theme-dark .e-reportviewer-dialog, .mud-theme-dark .e-reportviewer-dialog-container, .mud-theme-dark .e-reportviewer-documentmappopup, .mud-theme-dark .e-reportviewer-export-toast-dialog, .mud-theme-dark .e-export-dropdown, .mud-theme-dark .e-popup.e-popup-open, .mud-theme-dark .e-menu-popup, .mud-theme-dark .e-dropdown-popup, .mud-theme-dark .e-menu-container, .mud-theme-dark .e-menu-wrapper, .mud-theme-dark .e-rv-nativeexportsetup, .mud-theme-dark .e-rv-nativeborder, .mud-theme-dark .e-rv-credentialblock, .mud-theme-dark .e-reportviewer-nativeexportsetupchild, .mud-theme-dark .e-reportviewer-nativeexportsetupcontainer, .mud-theme-dark .e-reportviewer-nativepagesetupcontainer, .mud-theme-dark .e-reportviewer-nativepagesetupcontent, .mud-theme-dark .e-reportviewer-nativepropertiesheader, .mud-theme-dark .e-popup.e-dialog, .mud-theme-dark .e-popup.e-dialog .e-dlg-header-content, .mud-theme-dark .e-popup.e-dialog .e-dlg-content, .mud-theme-dark .e-popup.e-dialog .e-footer-content { background-color: var(--mud-palette-surface, #2a2a2a) !important; color: var(--mud-palette-text-primary, #ffffff) !important; border-color: var(--mud-palette-divider, rgba(255, 255, 255, 0.12)) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important; } .mud-theme-dark .e-reportviewer-exporttip .e-reportviewer-popupli, .mud-theme-dark .e-reportviewer-fittopagetip .e-reportviewer-popupli, .mud-theme-dark .e-reportviewer-popupli, .mud-theme-dark .e-export-dropdown .e-list-item, .mud-theme-dark .e-export-dropdown li, .mud-theme-dark .e-reportviewer-drpdown .e-list-item, .mud-theme-dark .e-reportviewer-ejdropdownlist .e-list-item, .mud-theme-dark .e-menu-popup .e-menu-item, .mud-theme-dark .e-dropdown-popup .e-menu-item, .mud-theme-dark .e-menu-container .e-menu-item, .mud-theme-dark .e-menu-popup .e-list-item, .mud-theme-dark .e-dropdown-popup .e-list-item { color: var(--mud-palette-text-primary, #ffffff) !important; } /* Spans internos en tema oscuro (icono + etiqueta del item) */ .mud-theme-dark .e-reportviewer-exporttip .e-reportviewer-popupli span, .mud-theme-dark .e-reportviewer-fittopagetip .e-reportviewer-popupli span, .mud-theme-dark .e-reportviewer-popupli span, .mud-theme-dark .e-reportviewer-popupli .e-reportviewer-popupspan, .mud-theme-dark .e-reportviewer-exporttip span:not(.e-icons):not(.e-viewer-icons), .mud-theme-dark .e-reportviewer-fittopagetip span:not(.e-icons):not(.e-viewer-icons) { color: var(--mud-palette-text-primary, #ffffff) !important; background-color: transparent !important; } .mud-theme-dark .e-reportviewer-exporttip .e-reportviewer-popupli:hover, .mud-theme-dark .e-reportviewer-exporttip .e-reportviewer-popupli.e-hover, .mud-theme-dark .e-reportviewer-exporttip .e-reportviewer-popupli.e-active, .mud-theme-dark .e-reportviewer-exporttip .e-reportviewer-popupli.e-focused, .mud-theme-dark .e-reportviewer-fittopagetip .e-reportviewer-popupli:hover, .mud-theme-dark .e-reportviewer-popupli:hover, .mud-theme-dark .e-export-dropdown .e-list-item:hover, .mud-theme-dark .e-export-dropdown .e-list-item.e-active, .mud-theme-dark .e-reportviewer-drpdown .e-list-item:hover, .mud-theme-dark .e-reportviewer-ejdropdownlist .e-list-item:hover, .mud-theme-dark .e-menu-popup .e-menu-item:hover, .mud-theme-dark .e-menu-popup .e-menu-item.e-focused, .mud-theme-dark .e-menu-popup .e-menu-item.e-selected, .mud-theme-dark .e-dropdown-popup .e-menu-item:hover, .mud-theme-dark .e-dropdown-popup .e-menu-item.e-focused, .mud-theme-dark .e-dropdown-popup .e-menu-item.e-selected, .mud-theme-dark .e-dropdown-popup .e-list-item:hover, .mud-theme-dark .e-dropdown-popup .e-list-item.e-focused, .mud-theme-dark .e-dropdown-popup .e-list-item.e-selected { background-color: var(--mud-palette-action-default-hover, rgba(255, 255, 255, 0.08)) !important; color: var(--mud-palette-text-primary, #ffffff) !important; } .mud-theme-dark .e-reportviewer-exporttip .e-viewer-icons, .mud-theme-dark .e-reportviewer-exporttip .e-icons, .mud-theme-dark .e-reportviewer-fittopagetip .e-icons, .mud-theme-dark .e-reportviewer-popupli .e-viewer-icons, .mud-theme-dark .e-reportviewer-popupli .e-icons, .mud-theme-dark .e-export-dropdown .e-icons { color: var(--mud-palette-text-secondary, rgba(255, 255, 255, 0.7)) !important; } .mud-theme-dark .e-reportviewer-tooltip .e-tip-content { background-color: var(--mud-palette-surface, #2a2a2a) !important; color: var(--mud-palette-text-primary, #ffffff) !important; } /* Menú Export REAL en tema oscuro: .e-dropdown-popup > ul > li.e-item */ .mud-theme-dark .e-dropdown-popup, .mud-theme-dark .e-dropdown-popup.e-export-dropdown, .mud-theme-dark .e-dropdown-popup.e-fitpage-dropdown { background-color: var(--mud-palette-surface, #2a2a2a) !important; border: 1px solid var(--mud-palette-divider, rgba(255, 255, 255, 0.12)) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important; } .mud-theme-dark .e-dropdown-popup ul, .mud-theme-dark .e-dropdown-popup.e-export-dropdown ul, .mud-theme-dark .e-dropdown-popup.e-fitpage-dropdown ul { background-color: var(--mud-palette-surface, #2a2a2a) !important; color: var(--mud-palette-text-primary, #ffffff) !important; } .mud-theme-dark .e-dropdown-popup ul .e-item, .mud-theme-dark .e-dropdown-popup.e-export-dropdown ul .e-item, .mud-theme-dark .e-dropdown-popup.e-fitpage-dropdown ul .e-item { background-color: transparent !important; color: var(--mud-palette-text-primary, #ffffff) !important; } .mud-theme-dark .e-dropdown-popup ul .e-item:hover, .mud-theme-dark .e-dropdown-popup ul .e-item.e-focused, .mud-theme-dark .e-dropdown-popup ul .e-item.e-selected, .mud-theme-dark .e-dropdown-popup ul .e-item:focus, .mud-theme-dark .e-dropdown-popup.e-export-dropdown ul .e-item:hover, .mud-theme-dark .e-dropdown-popup.e-export-dropdown ul .e-item.e-focused { background-color: var(--mud-palette-action-default-hover, rgba(255, 255, 255, 0.08)) !important; color: var(--mud-palette-text-primary, #ffffff) !important; } .mud-theme-dark .e-dropdown-popup ul .e-item .e-menu-icon, .mud-theme-dark .e-dropdown-popup ul .e-item .e-icons { color: var(--mud-palette-text-secondary, rgba(255, 255, 255, 0.7)) !important; }