feat: add font-size plus/minus button

* When draggable handle is on hover, they appears
* Hide when drag start, show when drag end

1 files changed, 62 insertions, 18 deletions

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 84da02f..f5695f1 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -85,7 +85,7 @@
   padding: 0;
 
   position: relative;
-  overflow-x: scroll;
+  overflow-x: auto;
   max-width: 60em;
 
   /* height: 100vh; */
@@ -114,7 +114,7 @@
   .SemanticHtml {
     width: 100%;
     padding: 1.5rem;
-    overflow-y: scroll;
+    overflow-y: auto;
     order: 1;
 
     pre {
@@ -167,7 +167,7 @@
 .DumbyMap[data-layout="side"] {
   .SemanticHtml {
     flex: 50%;
-    overflow-y: scroll;
+    overflow-y: auto;
 
     height: 100vh;
   }
@@ -190,7 +190,7 @@
     margin: 0;
     padding: 0;
 
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
   }
@@ -207,22 +207,21 @@
 }
 
 .draggable-block {
-  overflow: clip;
-  box-sizing: content-box;
+  overflow: visible;
   width: fit-content;
 
   position: absolute;
 
-  border: solid gray;
+  border: solid gray 3px;
   border-radius: 0.5rem;
 
   background-color: white;
 
-  font-size: 12px;
+  font-size: 0.8rem;
   pointer-events: auto;
 
   .dumby-block {
-    overflow: scroll;
+    overflow: auto;
     margin: 0;
 
     position: relative;
@@ -264,31 +263,76 @@
 
   .draggable {
     display: block;
+    overflow: clip;
     width: 100%;
 
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
+    outline: red 3px;
+    border-top-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+
+    .handle {
+      font-size: 1.1rem;
+      text-align: center;
+
+      transition: all 0.3s ease-in-out;
+      transform: translate(0, -0.6rem);
+    }
+  }
 
-    font-size: 1.1rem;
-    text-align: center;
+  .utils {
+    display: none;
+  }
 
-    transition: all 0.3s ease-in-out;
-    transform: translate(0, -0.6rem);
+  &:has(.draggable:hover, .utils:hover) {
+    .dumby-block {
+      color: gray;
 
-    &:hover {
+      opacity: 0.7;
+    }
+
+    .handle {
       background: #e1e1e1;
 
-      border-bottom: solid gray;
+      /* border-bottom: solid gray; */
 
       transform: unset;
+    }
 
-      & ~ * {
-        color: gray;
+    .utils {
+      display: flex;
 
-        opacity: 0.7;
+      position: absolute;
+      top: 0;
+      top: -0.5rem;
+      left: 100%;
+
+      font-size: 1.5rem;
+      gap: 6px;
+      animation: fade-in 1.5s;
+      padding-left: 1rem;
+
+      [id$="-font-size"]{
+        padding: 0.2rem 0.4rem;
+
+        border: 3px gray solid;
+        border-radius: 5px;
+
+        background: white;
+
+        transition: all 1s ease-in-out;
       }
+
+       #plus-font-size {
+         cursor: zoom-in;
+       }
+
+       #minus-font-size {
+         cursor: zoom-out;
+       }
     }
   }
 }