Die Foki haben jetzt eine Scrollbox und zwei Scrollfades, wodurch die Ränder weiß ausblenden

resources/assets/less/metager/general.less

@@ -83,7 +83,7 @@ h1.mg-logo {
     background-color: #FFF;
     background-image: none;
     border: 1px solid #CCC;
-    margin:0px;
+    margin: 0px;
 }
 
 .metager-searchbutton {
@@ -95,7 +95,7 @@ h1.mg-logo {
     border-bottom-left-radius: 0px;
     border: 1px solid #CCC;
     padding: 6px 12px;
-    margin:0px;
+    margin: 0px;
     font-size: 14px;
     font-weight: normal;
     line-height: 1;

resources/assets/less/metager/searchbar.less

@@ -282,14 +282,12 @@ div:hover>.searchbar-tooltip {
 @resultpage-leftbox-min-dist-left-right: 8px;
 @resultpage-leftbox-min-dist-top-bottom: 8px;
 @resultpage-leftbox-big-screen-margin-left: 50px;
-
 header {
     padding-top: @resultpage-leftbox-min-dist-top-bottom;
     display: flex;
     flex-direction: column;
     position: fixed;
-    z-index: 100;
-    // Makes the header larger, so it correctly covers the non scrolling parts below
+    z-index: 100; // Makes the header larger, so it correctly covers the non scrolling parts below
     width: @resultpage-leftbox-max-width + @resultpage-leftbox-big-screen-margin-left + 10;
     padding-left: @resultpage-leftbox-big-screen-margin-left;
     background-color: inherit;
@@ -343,15 +341,9 @@ header:nth-child(1) {
         max-width: @resultpage-leftbox-max-width;
         background-color: white;
         border: 1px solid #ccc;
-        padding: 10px;
-        overflow-x: auto;
         box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
-        &::-webkit-scrollbar {
-            height: 0px;
-            /* remove scrollbar space */
-            background: transparent;
-            /* optional: just make scrollbar invisible */
-        }
+        overflow-x: auto;
+        padding: 10px;
         &>div {
             padding: 0px 10px;
             &>a {
@@ -365,12 +357,45 @@ header:nth-child(1) {
         .edit-focus {
             margin-left: 7px;
         }
+        /* Scrollbar Style */
+        &::-webkit-scrollbar {
+            height: 0px;
+            /* remove scrollbar space */
+            background: transparent;
+            /* optional: just make scrollbar invisible */
+        }
+    }
+}
+
+
+/* Scrollbar Style */
+
+@scrollfade-color: white;
+.scrollbox {
+    position: relative;
+    width: 100%;
+    .foki-scrollfade {
+        &-left,
+        &-right {
+            position: absolute;
+            width: 20px;
+            height: 42px;
+            top: 1px;
+        }
+        &-left {
+            background: linear-gradient(to right, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
+            left: 0px;
+        }
+        &-right {
+            background: linear-gradient(to left, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
+            right: 0px;
+        }
     }
 }
 
 #research-bar-placeholder {
-    margin: @resultpage-leftbox-min-dist-top-bottom 0px 0px 50px;
+    padding: @resultpage-leftbox-min-dist-top-bottom 0px 0px 50px;
     width: 100%;
     max-width: 700px;
-    height: 53px;
+    height: 61px;
 }
\ No newline at end of file

resources/views/layouts/researchandtabs.blade.php

@@ -21,8 +21,12 @@
 </header>
 <div id="research-bar-placeholder"></div>
 <div id="foki">
-	<div id="foki-box">
-		@include('parts.foki')
+	<div class="scrollbox">
+		<div class="foki-scrollfade-left"></div>
+		<div id="foki-box">
+			@include('parts.foki')
+		</div>
+		<div class="foki-scrollfade-right"></div>
 	</div>
 </div>
 <div id="resultpage-container">