Overriding Style
CSS variables are provided to enable developers to overwrite them.
Listed below are some of the most commonly used variables. All other variables can be found in our GitHub
css
--vpv-container-border-color: rgba(0, 0, 0, 0.3);
--vpv-toolbar-background-color: rgba(226, 230, 233, 1);
--vpv-toolbar-color: rgba(28, 32, 36, 1);
--vpv-toolbar-border-color: rgba(198, 204, 210, 1);
--vpv-loader-backdrop-color: rgba(255, 255, 255, 0.8);
--vpv-loader-animation-name: spin;
--vpv-icon-active-background: rgba(0, 0, 0, 0.1);
--vpv-sidebar-content-background: rgba(250, 250, 250, 1);
--vpv-sidebar-thumbnail_page-number-font-size: 12px;
--vpv-sidebar-thumbnail_focused-border-color: rgba(0, 0, 0, 0.2);
--vpv-pages-container-background: rgba(250, 250, 250, 1);
For example: How to change the font style
css
/* in component file that uses VPV */
<style>
:deep(.vpv-variable) {
--vpv-font-family: Arial, Helvetica, sans-serif;
}
</style>