made decorations semi transparent until hover to make ui less noisy

1 files changed, 22 insertions, 9 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index fe1190e27..b41962c73 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -25,6 +25,10 @@ $resizeHandler: 8px;
         align-items: center;
         text-align: center;
         font-size: 30px;
+        opacity: 0.1;
+        &:hover {
+            opacity: 1;
+        }
     }
     .documentDecorations-rotationCenter {
         position: absolute;
@@ -72,10 +76,12 @@ $resizeHandler: 8px;
             height: 20px;
             min-width: 20px;
             border-radius: 100%;
+            opacity: 0.5;
             cursor: pointer;
 
             &:hover {
                 color: #02600d;
+                opacity: 1;
             }
         }
 
@@ -93,10 +99,12 @@ $resizeHandler: 8px;
             height: 20px;
             min-width: 20px;
             border-radius: 100%;
+            opacity: 0.5;
             cursor: pointer;
 
             &:hover {
                 color: #a94442;
+                opacity: 1;
             }
 
             > svg {
@@ -120,10 +128,12 @@ $resizeHandler: 8px;
             height: 20px;
             min-width: 20px;
             border-radius: 100%;
+            opacity: 0.5;
             cursor: pointer;
 
             &:hover {
                 color: #a94442;
+                opacity: 1;
             }
 
             > svg {
@@ -144,6 +154,10 @@ $resizeHandler: 8px;
             border-radius: 8px;
             outline: none;
             border: none;
+            opacity: 0.3;
+            &:hover {
+                opacity: 1;
+            }
 
             .documentDecorations-titleSpan,
             .documentDecorations-titleSpan-Dark {
@@ -206,7 +220,7 @@ $resizeHandler: 8px;
     .documentDecorations-rightResizer {
         pointer-events: auto;
         background: $medium-gray;
-        opacity: 0.1;
+        opacity: 0.2;
         &:hover {
             opacity: 1;
         }
@@ -248,10 +262,8 @@ $resizeHandler: 8px;
     }
 
     .documentDecorations-lock {
-        position: absolute;
+        position: relative;
         background: black;
-        right: 23px;
-        top: 3px;
         color: gray;
         height: 14;
         width: 14;
@@ -261,6 +273,7 @@ $resizeHandler: 8px;
         align-items: center;
         flex-direction: column;
         border-radius: 15%;
+        cursor: default;
     }
 
     .documentDecorations-rotationPath {
@@ -277,7 +290,6 @@ $resizeHandler: 8px;
     .documentDecorations-bottomRightResizer {
         cursor: nwse-resize;
         background: unset;
-        opacity: 1;
         transform: scale(2);
     }
 
@@ -317,7 +329,6 @@ $resizeHandler: 8px;
     .documentDecorations-bottomRightResizer {
         cursor: nwse-resize;
         background: unset;
-        opacity: 1;
     }
 
     .documentDecorations-topLeftResizer {
@@ -333,7 +344,6 @@ $resizeHandler: 8px;
     .documentDecorations-topLeftResizer:hover,
     .documentDecorations-bottomRightResizer:hover {
         opacity: 1;
-        background: black;
     }
 
     .documentDecorations-bottomRightResizer {
@@ -344,7 +354,6 @@ $resizeHandler: 8px;
     .documentDecorations-bottomLeftResizer {
         cursor: nesw-resize;
         background: unset;
-        opacity: 1;
         transform: scale(2);
     }
 
@@ -360,7 +369,6 @@ $resizeHandler: 8px;
 
     .documentDecorations-topRightResizer:hover,
     .documentDecorations-bottomLeftResizer:hover {
-        background: black;
         opacity: 1;
     }
 
@@ -414,6 +422,11 @@ $resizeHandler: 8px;
     gap: 5px;
     top: 4px;
     background: $light-gray;
+    opacity: 0.2;
+    pointer-events: all;
+    &:hover {
+        opacity: 1;
+    }
 }
 
 .linkButtonWrapper {