From ad8a7822f8a9ba30c0b4284645b1a44b0a325de1 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Thu, 19 Dec 2024 17:25:37 +0100
Subject: [PATCH] Use :deep() selectors PdfViewer variables inside <style>

---
 src/components/project/PdfViewer.vue | 58 ++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/src/components/project/PdfViewer.vue b/src/components/project/PdfViewer.vue
index 10b07e9..dbb17c3 100644
--- a/src/components/project/PdfViewer.vue
+++ b/src/components/project/PdfViewer.vue
@@ -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>