feat(CSS): draggable handle

* Linear gradient for scroll-up contents
* Set higer z-index to overlap elments like leaflets
* Gray-out contents when interacting with handle
* Set content padding only for direct children for block

1 files changed, 9 insertions, 4 deletions

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index bbbd38c..0e24785 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -152,7 +152,7 @@
       padding-bottom: 0;
       resize: both;
 
-      * {
+      > * {
         padding-inline: 0.5rem;
       }
 
@@ -171,17 +171,22 @@
         display: block;
         top: 0;
         position: sticky;
-        background-color: white;
+        background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,1) 60%);
         margin-bottom: -18px;
         transform: translate(0, -16px);
         width: 100%;
         padding-inline: 0;
+        padding-bottom: 2em;
         text-align: center;
-        z-index: 100;
+        z-index: 9999;
         transition: all 0.3s ease-out;
         &:hover {
-          background-color: #f1f1f1;
+          background: #e1e1e1;
           padding-block: 1em 0.5em;
+          & ~ * {
+            opacity: 0.7;
+            color: gray;
+          }
         }
       }
     }