Fixes for WindowsHEADmane

2 files changed, 49 insertions, 31 deletions

diff --git a/dom/app.css b/dom/app.css
index c4893d2..10054af 100755..100644
--- a/dom/app.css
+++ b/dom/app.css
@@ -14,11 +14,11 @@ code {
 }
 
 #search {
-    font-family: 'JetBrains Mono', monospace;
+    font-family: 'Iosevka', 'JetBrains Mono', monospace;
 }
 
 #search::placeholder {
-    font-family: var(--bs-body-font-family) !important;
+    font-family: var(--bs-body-font-family), sans-serif !important;
     color: rgba(255, 255, 255, .5);
 }
 
@@ -412,3 +412,19 @@ select:active, select:focus {
 #preview-parts-list:has(.preview-tag-zone:hover) .preview-tag-zone:not(:hover):not(.hover), #preview-parts-list:has(.preview-tag-zone.hover) .preview-tag-zone:not(:hover):not(.hover) {
     opacity: .75 !important;
 }
+
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, .05);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, .1);
+}
diff --git a/dom/index.html b/dom/index.html
index 4239a1d..a7b95b5 100755..100644
--- a/dom/index.html
+++ b/dom/index.html
@@ -90,8 +90,8 @@
         </div>
     </div>
 
-    <div id="app" class="container disabled" style="padding-top: 50px;">
-        <div style="-webkit-app-region: drag; position: fixed; top: 0; left: 0; right: 0; backdrop-filter: blur(50px); background-color: rgba(33,33,33,0.75); border-bottom: 1px solid #111;" id="filter-bar">
+    <div id="app" class="disabled" style="padding-top: 50px;">
+        <div style="z-index: 99; -webkit-app-region: drag; position: fixed; top: 0; left: 0; right: 0; backdrop-filter: blur(50px); background-color: rgba(33,33,33,0.75); border-bottom: 1px solid #111;" id="filter-bar">
             <div style="display: grid; grid-template-columns: minmax(130px, 1fr) 2fr minmax(260px, 1fr); grid-gap: 10px;">
                 <div style="text-align: center;">
                     <a class="fancy-btn" id="logo" onclick="instance.actions.goHome();" href="#" style="padding: 5px 10px; display: inline-block; color: white; text-decoration: none; -webkit-app-region: no-drag;">
@@ -136,33 +136,35 @@
             </div>
         </div>
 
-        <div style="margin-top: 42px;">
-            <div id="search-error" style="margin-bottom: 20px; margin-top: 20px; display: none;" class="alert alert-danger"></div>
-            <div id="search-warning" style="margin-bottom: 20px; margin-top: 20px; display: none;" class="alert alert-warning"></div>
-            <div id="images" style="margin-bottom: 20px; margin-top: 20px; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 10px;"></div>
-            <div style="margin-bottom: 50px; display: grid; grid-template-columns: 1fr max-content;" id="footer">
-                <div id="pages"></div>
-                <div id="sort">
-                    <select tabindex="-1" id="sorting" onchange="instance.display.updateDisplay();" class="form-select" style="width: max-content; display: inline-block;">
-                        <option selected value="new">Sort by date</option>
-                        <optgroup label="Popularity">
-                            <option value="popular">Sort by score</option>
-                            <option value="relevance">Sort by relevance</option>
-                        </optgroup>
-                        <optgroup label="Sizes">
-                            <option value="resolution">Sort by resolution</option>
-                            <option value="size">Sort by size</option>
-                            <option value="duration">Sort by duration</option>
-                        </optgroup>
-                        <optgroup label="Technical">
-                            <option value="id">Sort by image ID</option>
-                            <option value="tag">Sort by tags</option>
-                        </optgroup>
-                    </select>
-                    <select tabindex="-1" id="order" onchange="instance.display.updateDisplay();" class="form-select" style="width: max-content; display: inline-block;">
-                        <option value="up">↑ Ascending</option>
-                        <option selected value="down">↓ Descending</option>
-                    </select>
+        <div id="app-area" style="z-index: 1; position: fixed; top: 0; left: 0; right: 0; overflow: auto; bottom: 0;">
+            <div style="padding-top: 42px;" class="container">
+                <div id="search-error" style="margin-bottom: 20px; margin-top: 20px; display: none;" class="alert alert-danger"></div>
+                <div id="search-warning" style="margin-bottom: 20px; margin-top: 20px; display: none;" class="alert alert-warning"></div>
+                <div id="images" style="margin-bottom: 20px; margin-top: 20px; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 10px;"></div>
+                <div style="margin-bottom: 50px; display: grid; grid-template-columns: 1fr max-content;" id="footer">
+                    <div id="pages"></div>
+                    <div id="sort">
+                        <select tabindex="-1" id="sorting" onchange="instance.display.updateDisplay();" class="form-select" style="width: max-content; display: inline-block;">
+                            <option selected value="new">Sort by date</option>
+                            <optgroup label="Popularity">
+                                <option value="popular">Sort by score</option>
+                                <option value="relevance">Sort by relevance</option>
+                            </optgroup>
+                            <optgroup label="Sizes">
+                                <option value="resolution">Sort by resolution</option>
+                                <option value="size">Sort by size</option>
+                                <option value="duration">Sort by duration</option>
+                            </optgroup>
+                            <optgroup label="Technical">
+                                <option value="id">Sort by image ID</option>
+                                <option value="tag">Sort by tags</option>
+                            </optgroup>
+                        </select>
+                        <select tabindex="-1" id="order" onchange="instance.display.updateDisplay();" class="form-select" style="width: max-content; display: inline-block;">
+                            <option value="up">↑ Ascending</option>
+                            <option selected value="down">↓ Descending</option>
+                        </select>
+                    </div>
                 </div>
             </div>
         </div>