From d3b32a29a86cfac7cf0bba01526a5651aa2fb045 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Fri, 13 Aug 2021 12:16:27 +0200
Subject: [PATCH] further improve UX of gallery skeleton loaders

---
 app/css/misc.css | 16 +++++++---------
 app/index.html   |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/css/misc.css b/app/css/misc.css
index d12f4ff..2f94fea 100644
--- a/app/css/misc.css
+++ b/app/css/misc.css
@@ -151,21 +151,19 @@ input:invalid {
     grid-auto-rows: auto;
     justify-content: center;
     grid-gap: 2rem;
-    padding: 2rem 4rem
+    padding: 2rem 4rem;
+    position: relative;
 }
 
-#home.loading .gallery {
-    overflow-y: initial !important;
+#home.loading .gallery.browse {
+    height: 30rem !important;
+    overflow-y: hidden !important;
 }
 
-#home.loading {
-    height: 50rem !important
-}
-
-#home.loading:after {
+#home.loading .gallery.browse:after {
     content: "";
     position: absolute;
-    top: 40rem;
+    bottom: 0;
     height: 10rem;
     width: 100%;
     background: linear-gradient(0deg, rgba(37, 40, 44, 1) 0%, rgba(37, 40, 44, 1) 15%, rgba(37, 40, 44, .45) 70%, rgba(37, 40, 44, 0) 100%);
diff --git a/app/index.html b/app/index.html
index 33a2167..b9df865 100644
--- a/app/index.html
+++ b/app/index.html
@@ -530,7 +530,7 @@
               <div class="input-group shadow-lg">
                 <div class="input-group-prepend">
                   <span
-                    class="input-group-text d-flex material-icons bg-dark text-muted pr-0 font-size-18">search</span>
+                    class="input-group-text d-flex material-icons bg-dark pr-0 font-size-18">search</span>
                 </div>
                 <input type="text" class="form-control bg-dark border-left-0 shadow-none" autocomplete="off"
                   id="searchText" data-option="search" placeholder="Any">