pull from master

1 files changed, 32 insertions, 56 deletions

diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index 875142169..ea822f553 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -2,15 +2,16 @@
 
 
 .webBox {
-    height:100%;
+    height: 100%;
     position: relative;
     display: flex;
 
     .pdfViewerDash-dragAnnotationBox {
-        position:absolute;
+        position: absolute;
         background-color: transparent;
         opacity: 0.1;
     }
+
     .webBox-annotationLayer {
         position: absolute;
         transform-origin: left top;
@@ -19,10 +20,12 @@
         pointer-events: none;
         mix-blend-mode: multiply; // bcz: makes text fuzzy!
     }
+
     .webBox-annotationBox {
         position: absolute;
         background-color: rgba(245, 230, 95, 0.616);
     }
+
     .webBox-container {
         transform-origin: top left;
         width: 100%;
@@ -33,10 +36,13 @@
             top: 0;
             left: 0;
         }
+
         .webBox-cont {
             pointer-events: none;
         }
-        .webBox-cont, .webBox-cont-interactive {
+
+        .webBox-cont,
+        .webBox-cont-interactive {
             padding: 0vw;
             position: absolute;
             top: 0;
@@ -45,18 +51,21 @@
             height: 100%;
             transform-origin: top left;
             overflow: auto;
+
             .webBox-iframe {
                 width: 100%;
                 height: 100%;
                 position: absolute;
-                top:0;
+                top: 0;
             }
         }
+
         .webBox-cont-interactive {
             span {
                 user-select: text !important;
             }
         }
+
         .webBox-outerContent {
             width: 100%;
             height: 100%;
@@ -65,12 +74,12 @@
             left: 0;
             overflow: auto;
         }
+
         div.webBox-outerContent::-webkit-scrollbar-thumb {
-            display:none;
+            display: none;
         }
     }
 
-
     .webBox-overlay {
         width: 100%;
         height: 100%;
@@ -79,64 +88,31 @@
 
     .webBox-buttons {
         margin-left: 44;
-        background:lightGray;
+        background: lightGray;
         width: 100%;
     }
-    .webBox-freeze {
-        display: flex;
-        align-items: center; 
-        justify-content: center;
-        margin-right: 5px;
-        width: 30px;
-    }
 
-    .webBox-urlEditor {
-        position: relative;
-        opacity: 0.9;
+    .webBox-annotationToggle {
         z-index: 9001;
-        transition: top .5s;
-
-        .urlEditor {
-            display: grid;
-            grid-template-columns: 1fr auto;
-            padding-bottom: 10px;
-            overflow: hidden;
-
-            .editorBase {
-                display: flex;
-
-                .editor-collapse {
-                    transition: all .5s, opacity 0.3s;
-                    position: absolute;
-                    width: 40px;
-                    transform-origin: top left;
-                }
-
-                .switchToText {
-                    color: $main-accent;
-                }
-
-                .switchToText:hover {
-                    color: $dark-color;
-                }
-            }
+        position: absolute;
+        top: 2;
+        left: 2;
+        cursor: pointer;
+        box-shadow: black 0.3em 0.3em 1em;
+        border-radius: 5px;
+        display: flex;
+        opacity: 0.3;
+        width: 25px;
+        height: 25px;
+        align-items: center;
 
-            button:hover {
-                transform: scale(1);
-            }
+        >svg {
+            margin: auto;
         }
     }
 
-    .webpage-urlInput {
-        padding: 12px 10px 11px 10px;
-        border: 0px;
-        color: grey;
-        letter-spacing: 2px;
-        outline-color: black;
-        background: rgb(238, 238, 238);
-        width: 100%;
-        margin-right: 10px;
-        height: 100%;
+    .webBox-annotationToggle:hover {
+        opacity: 1;
     }
 
     .touch-iframe-overlay {