Style ModeSelection upload PDF button and VPdfViewer

src/components/project/client-brief/PdfViewer.vue

@@ -1,18 +1,36 @@
 <template>
-  <div>
-    <div :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
+  <Dialog
+    id="add-pdf"
+    v-model:visible="isOpen"
+    modal
+    :draggable="false"
+    header="Titre du PDF"
+    class="w-full | text-grey-800 | rounded-2xl | overflow-hidden"
+  >
+    <template #header>
+      <a class="btn">Valider et envoyer le brief</a>
+      <h2 class="font-serif text-lg">Titre du PDF</h2>
+    </template>
+    <div id="vpv-container">
       <VPdfViewer
         :darkMode="true"
+        :initialThumbnailsVisible="true"
         src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
         local="fr_FR"
         @loaded="onPdfLoaded"
       />
     </div>
-  </div>
+  </Dialog>
 </template>
 
 <script setup>
-import { VPdfViewer } from "@vue-pdf-viewer/viewer";
+import Dialog from "primevue/dialog";
+import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
+
+const licenseKey = import.meta.env.VITE_VPV_LICENSE;
+useLicense({ licenseKey });
+
+const isOpen = true;
 
 const onPdfLoaded = () => {
   const wrapper = document.querySelector(".vpv-pages-inner-container");
@@ -52,3 +70,154 @@ const onPdfLoaded = () => {
   observePages();
 };
 </script>
+
+<style>
+#add-pdf {
+  --max-w: min(100vw - var(--gutter) * 2, 77rem); 
+  --max-h: calc(100vh - var(--gutter) * 2 - 5.5rem);
+  --header-h: 4.5rem;
+  max-width: var(--max-w);
+  height: var(--max-h);
+  background: black;
+  margin: auto !important;
+}
+#add-pdf [data-pc-section="header"] {
+  height: var(--header-h);
+  padding: 1rem;
+  color: var(--color-white);
+  background: var(--color-white-20);
+  display: flex;
+  gap: 1rem;
+}
+#add-pdf [data-pc-section="header"] h2 {
+  font-family: var(--font-serif);
+  position: absolute;
+  left: 0;
+  right: 0;
+  text-align: center;
+  padding: 0 15rem;
+  line-height: 2.5rem;
+}
+#add-pdf [data-pc-name="pcclosebutton"] {
+  color: var(--color-white);
+}
+
+#vpv-container {
+  width: var(--max-w);
+  height: calc(var(--max-h) - var(--header-h));
+  background: black;
+}
+</style>
+
+<style scoped>
+: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-white-10);
+  --vpv-toolbar-color: white;
+  --vpv-toolbar-border-color: var(--vpv-base-border-color);
+  /* Sidebar */
+  --vpv-sidebar-content-background-color: var(--color-white-10);
+  --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);
+}
+
+:deep(.vpv-container) {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+:deep(.vpv-body-wrapper),
+:deep(.vpv-container .vpv-sidebar-wrapper) {
+  margin-top: 0 !important;
+  margin-bottom: var(--vpv-toolbar-size) !important;
+}
+:deep(.vpv-splitter) {
+  max-width: 0;
+}
+
+/* Sidebar */
+:deep(.vpv-container .vpv-sidebar-wrapper__opened) {
+  max-width: 9rem;
+}
+:deep(.vpv-sidebar-features) {
+  display: none;
+}
+:deep(.pdf-thumbnail-wrapper .pdf-thumbnail img),
+:deep(.pdf-thumbnail-wrapper .pdf-thumbnail .placeholder) {
+  border-radius: var(--rounded-md);
+}
+
+/* Toolbar */
+:deep(.vpv-container .vpv-toolbar-wrapper) {
+  border-bottom-width: 0;
+  border-top-width: 1px;
+  padding-left: 1rem !important;
+}
+:deep(.vpv-toolbar-wrapper) {
+  top: unset !important;
+  bottom: 0 !important;
+}
+:deep(.vpv-toolbar-start .vpv-toolbar-btn) {
+  display: none;
+}
+:deep(.vpv-toolbar-start::before) {
+  content: "Page";
+}
+:deep(.vpv-input) {
+  border-radius: var(--rounded-sm) !important;
+  max-width: 1.5rem !important;
+}
+:deep(.vpv-input ~ span) {
+  color: var(--color-grey-400);
+}
+:deep(.vpv-toolbar-end > button:nth-child(1)),
+:deep(.vpv-toolbar-end > button:nth-child(3)),
+:deep(.vpv-toolbar-end > button:nth-child(4)) {
+  display: none;
+}
+</style>