Add VirtualSample dialogD, create .dialog class

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

@@ -5,7 +5,7 @@
     modal
     :draggable="false"
     header="Titre du PDF"
-    class="w-full | text-grey-800 | rounded-2xl | overflow-hidden"
+    class="dialog"
     :class="{ 'with-comments': isCommentsOpen }"
     :closeOnEscape="true"
   >
@@ -24,7 +24,7 @@
       <button
         id="toggle-comments"
         :aria-pressed="isCommentsOpen"
-        class="btn btn--transparent"
+        class="btn btn--transparent btn--outline"
         data-icon="comment"
         @click="isCommentsOpen = !isCommentsOpen"
       >
@@ -111,44 +111,14 @@ function changeFile(newFile) {
 </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;
-  --comments-w: 22.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: var(--space-16);
-}
-#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));
+  width: var(--dialog-max-w);
+  height: calc(var(--dialog-max-h) - var(--dialog-header-h));
   background: black;
   position: relative;
 }
 .with-comments .vpv-pages-container-wrapper {
-  margin-right: var(--comments-w, 20rem);
+  margin-right: var(--dialog-comments-w, 20rem);
 }
 </style>