Use :deep() selectors PdfViewer variables inside <style>

This commit is contained in:
Timothée Goguely 2024-12-19 17:25:37 +01:00
parent d6afa8050c
commit ad8a7822f8

View file

@ -82,4 +82,62 @@ const onPdfLoaded = () => {
<style>
@import "../../assets/css/src/2.blocks.pdf-viewer.css";
:deep(.vpv-variables) {
/* Base styles */
--vpv-base-radius: var(--rounded-xl);
/* Viewer container */
--vpv-container-width-sm: 48rem;
/* Toolbar */
--vpv-toolbar-size: 4.5rem;
}
:deep(.vpv-variables.vpv-variables__dark) {
/* Base styles */
--vpv-base-border-color: var(--color-grey-700);
/* Viewer container */
--vpv-container-border-color: var(--vpv-base-border-color);
/* Loader */
--vpv-loader-backdrop-color: rgba(0, 0, 0, 0.8);
/* Toolbar */
--vpv-toolbar-background-color: var(--color-black);
--vpv-toolbar-color: white;
--vpv-toolbar-border-color: var(--vpv-base-border-color);
/* Sidebar */
--vpv-sidebar-content-background-color: var(--color-black);
--vpv-sidebar-content_thumbnail-focused-border-color: var(--color-white-20);
/* Drop file mask */
--vpv-drop-zone-background: #1c2024;
--vpv-drop-zone-border: #434c56;
/* PDF Pages Content*/
--vpv-pages-container-background: black;
/* Popover */
--vpv-popover-background-color: black;
--vpv-popover-color: var(--color-white);
--vpv-popover-border-color: transparent;
/* Menu Dropdown */
--vpv-dropdown-menu-content-background: #181818;
--vpv-dropdown-menu-content-menu-hover-background: var(--color-white-10);
--vpv-dropdown-menu-content-separator-background: var(--color-white-10);
--vpv-dropdown-menu-content-border-color: var(--color-white-10);
--vpv-dropdown-separator: var(--color-white-10);
/* Search Input */
--vpv-input-background-color: transparent;
--vpv-input-border-color: var(--color-white);
--vpv-input-placeholder-color: #596673;
/* Modal of PDF Properties */
--vpv-properties-content-background: var(
--vpv-dropdown-menu-content-background
);
--vpv-properties-content-secondary-color: #c6ccd2;
--vpv-properties-content-color: var(--vpv-toolbar-color);
--vpv-properties-separator: var(--vpv-dropdown-separator);
--vpv-properties-header: white;
/* Modal of Print Progress */
--vpv-print-progress-background: var(--vpv-dropdown-menu-content-background);
/* Tooltip */
--vpv-tooltip-background: #181818;
--vpv-tooltip-color: white;
--vpv-tooltip-border-color: var(--color-black);
/* Outline */
--vpv-outline-color: var(--color-white-10);
}
</style>