1 files changed, 123 insertions, 38 deletions

diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index c88a94c28..1c1d6ec95 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -1,77 +1,98 @@
 .pdfBox-cont,
 .pdfBox-cont-interactive {
-    display: flex;
+    display: inline-block;
     flex-direction: row;
     height: 100%;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    .pdfBox-scrollHack {
-        pointer-events: none;
+    width:100%;
+    overflow: hidden;
+    position:absolute;
+    z-index: -1;
+}
+
+.pdfBox-title-outer {
+    z-index: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: lightslategray;
+    .pdfBox-title-cont, .pdfBox-cont-interactive{
+        width: 150%;
+        height: 100%;
+        position: relative;
+        display: grid;
+        
+        .pdfBox-title {
+            color:lightgray;
+            margin-top: auto;
+            margin-bottom: auto;
+            transform-origin: 42% -18%;
+            width: 100%;
+            transform: rotate(55deg);
+            font-size: 144;
+            padding: 5%;
+            overflow: hidden;
+            display: inline-block;
+            white-space: pre;
+            text-overflow: ellipsis;
+            text-align: center;
+        }
     }
 }
 
+
 .pdfBox-cont {
     pointer-events: none;
-    .pdfPage-textlayer {
-        span {
-            pointer-events: none !important;
-            user-select: none; 
+    .collectionFreeFormView-none {
+        pointer-events: none;
+    }
+    .pdfViewer-text {
+        .textLayer {
+            span {
+                user-select: none;
+            }
         }
     }
 }
 
 .pdfBox-cont-interactive {
     pointer-events: all;
-    .pdfPage-textlayer {
-        span {
-            pointer-events: all !important;
-            user-select: text;
+    .pdfViewer-text {
+        .textLayer {
+            span {
+                user-select: text;
+            }
         }
     }
 }
 
-.react-pdf__Page {
-    transform-origin: left top;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.react-pdf__Page__textContent span {
-    user-select: text;
-}
-
-.react-pdf__Document {
-    position: absolute;
-}
-
 
 .pdfBox-settingsCont {
     position: absolute;
     right: 0;
-    top: 0;
+    top: 3;
+    pointer-events: all;
 
     .pdfBox-settingsButton {
         border-bottom-left-radius: 50%;
         display: flex;
         justify-content: space-evenly;
         align-items: center;
-        height: 70px;
+        height: 30px;
         background: none;
         padding: 0;
 
         .pdfBox-settingsButton-arrow {
             width: 0;
             height: 0;
-            border-top: 25px solid transparent;
-            border-bottom: 25px solid transparent;
-            border-right: 25px solid #121721;
+            border-top: 15px solid transparent;
+            border-bottom: 15px solid transparent;
+            border-right: 15px solid #121721;
             transition: all 0.5s;
         }
 
         .pdfBox-settingsButton-iconCont {
             background: #121721;
-            height: 50px;
+            height: 30px;
             width: 70px;
             display: flex;
             justify-content: center;
@@ -86,16 +107,15 @@
     }
 
     .pdfBox-settingsFlyout {
-        width: 600px;
         position: absolute;
         background: #323232;
         box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
-        left: -400px;
+        right: 20px;
         border-radius: 7px;
         padding: 20px;
         display: flex;
         flex-direction: column;
-        font-size: 30px;
+        font-size: 14px;
         transition: all 0.5s;
 
         .pdfBox-settingsFlyout-title {
@@ -108,4 +128,69 @@
             grid-template-columns: 47.5% 5% 47.5%;
         }
     }
-}
\ No newline at end of file
+}
+
+.pdfBox-overlayCont {
+    position: absolute;
+    width: 100%;
+    height: 40px;
+    background: #121721;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    overflow: hidden;
+    transition: left .5s;
+    pointer-events: all;
+
+    .pdfBox-searchBar {
+        width: 70%;
+        font-size: 14px;
+    }
+}
+
+.pdfBox-overlayButton {
+    border-bottom-left-radius: 50%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 30px;
+    background: none;
+    padding: 0;
+    position: absolute;
+    pointer-events: all;
+
+    .pdfBox-overlayButton-arrow {
+        width: 0;
+        height: 0;
+        border-top: 15px solid transparent;
+        border-bottom: 15px solid transparent;
+        border-right: 15px solid #121721;
+        transition: all 0.5s;
+    }
+
+    .pdfBox-overlayButton-iconCont,
+    .pdfBox-nextIcon, 
+    .pdfBox-prevIcon {
+        background: #121721;
+        height: 30px;
+        width: 70px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: -2px;
+        border-radius: 3px;
+    }
+}
+
+.pdfBox-overlayButton:hover {
+    background: none;
+}
+
+.pdfBox-nextIcon {
+    left: 20; top: 5; height: 30px; position: absolute;
+}
+.pdfBox-prevIcon {
+    left: 50; top: 5; height: 30px; position: absolute;
+}