Implement scroll bar shadow

mmz-srf · Oct 2, 2023 · a45ad09 · a45ad09
1 parent b259c9a
commit a45ad09
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/client/src/lib/SingleDay.svelte b/client/src/lib/SingleDay.svelte
@@ -16,7 +16,7 @@
 <div class="flex flex-col items-center">
   <div class={fontWeight}>{currentTime}</div>
   <WeatherIcons {symbol} {dimensions} />
-  <div>{dailyTemp}°</div>
+  <div class={size === "L" && "mb-4"}>{dailyTemp}°</div>
   {#if size === "L"}
     <RainBar {rainInMM} />
   {/if}

diff --git a/client/src/lib/WeatherOverview.svelte b/client/src/lib/WeatherOverview.svelte
@@ -46,7 +46,7 @@
   </div>
   {#if ["L", "M"].includes(size.toUpperCase())}
     <div
-      class="flex flex-row ml-6 space-x-6 overflow-scroll text-xs font-bold scrollbar-hide mb-2"
+      class="flex flex-row mb-2 ml-6 mr-1 space-x-6 overflow-scroll text-xs font-bold scrollbar-hide scroll-shadow"
     >
       {#each weatherData.hours as hours, index}
         {#if index >= currentIndex}
@@ -55,7 +55,7 @@
               ? "Jetzt"
               : new Date(hours.date_time).toLocaleTimeString([], {
                   hour: "2-digit",
-                  minute: "2-digit"
+                  minute: "2-digit",
                 })}
             symbol={hours.symbol_code}
             dimensions="w-6 h-6"
@@ -80,4 +80,19 @@
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
+
+  .scroll-shadow {
+    background-image: linear-gradient(
+        to right,
+        rgba(8, 81, 139, 1),
+        rgba(8, 81, 139, 1)
+      ),
+      linear-gradient(to right, rgba(8, 81, 139, 1), rgba(8, 81, 139, 1)),
+      linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
+      linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
+    background-position: left center, right center, left center, right center;
+    background-repeat: no-repeat;
+    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
+    background-attachment: local, local, scroll, scroll;
+  }
 </style>