Fix slashes minor style fixes

src/lib/components/common/ColorInput.svelte

@@ -55,7 +55,7 @@
 		class="text-left border-[1.99px] rounded-sm
 		{dropdownVisible
 			? 'border-blue-500 bg-gray-950'
-			: 'border-transparent hover:border-white/5 hover:bg-white/5'}
+			: 'border-transparent hover:border-gray-300/5 hover:bg-gray-300/5 nohover:bg-gray-300/5'}
 		focus-visible:outline-none focus-visible:border-blue-500 focus-visible:hover:border-blue-500
 		transition px-1 leading-6 h-6 box-content flex items-center
 		{cls}"

src/lib/components/common/InlineEdit.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import IconEx from "./IconEx.svelte";
     import MultilineField from "./MultilineField.svelte";
-    import { mdiAlertCircleOutline } from "@mdi/js";
+    import { mdiAlertCircleOutline, mdiPencil } from "@mdi/js";
     import { createEventDispatcher, tick } from "svelte";
     import { useActions } from "svelte-useactions";
     import type { ActionList } from "svelte-useactions";
@@ -118,11 +118,12 @@
     role="button"
     use:useActions={use}
     class="flex items-stretch w-full transition-all rounded-sm border-[1.99px] cursor-text
-    text-gray-200 focus-within:border-blue-500 hover:focus-within:border-blue-500 selection:bg-blue-600/60 selection:text-gray-200
+    text-gray-200 selection:text-gray-200 selection:bg-blue-600/60
     {edit
-        ? 'bg-gray-950 hover:bg-gray-900 focus-within:bg-black hover:focus-within:bg-black ' +
-          (invalid ? 'border-red-500' : 'border-white/5')
-        : 'bg-transparent border-transparent hover:border-white/5 hover:bg-white/5'}
+        ? 'bg-gray-950 focus-within:bg-black hover:focus-within:bg-black ' +
+          (invalid ? 'border-red-500' : 'border-gray-300/5')
+        : 'bg-transparent hover:bg-gray-300/5 border-transparent hover:border-gray-300/5 nohover:bg-gray-400/5'}
+    focus-within:border-blue-500 hover:focus-within:border-blue-500
     {cls}"
     on:click={enterEditMode}
     on:keydown={enterEditMode}
@@ -167,7 +168,6 @@
                 <slot>{value + "\n"}</slot>
             {/if}
         </div>
-
         <button tabindex="-1" class="block min-w-[1rem] grow cursor-text">
             &nbsp;
         </button>

src/lib/components/common/NumberInput.svelte

@@ -166,9 +166,11 @@
             tabindex="-1"
             class="w-6 flex-none flex justify-center items-center
             {canDecrement
-                ? 'cursor-pointer hover:bg-white/5'
+                ? 'cursor-pointer hover:bg-gray-300/5'
                 : 'cursor-default'}
-            {edit ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}
+            {edit
+                ? 'opacity-100'
+                : 'opacity-0 nohover:opacity-100 group-hover:opacity-100'}
             transition-opacity"
         >
             <IconEx
@@ -186,9 +188,11 @@
             tabindex="-1"
             class="w-6 flex-none flex justify-center items-center 
             {canIncrement
-                ? 'cursor-pointer hover:bg-white/5'
+                ? 'cursor-pointer hover:bg-gray-300/5'
                 : 'cursor-default'}
-            {edit ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}
+            {edit
+                ? 'opacity-100'
+                : 'opacity-0 nohover:opacity-100 group-hover:opacity-100'}
             transition-opacity"
         >
             <IconEx

src/lib/components/common/Select.svelte

@@ -136,7 +136,7 @@
         focus-visible:outline-none focus-visible:border-blue-500
         {dropdownVisible
             ? 'border-blue-500 bg-black/10'
-            : 'bg-transparent hover:bg-white/5 border-transparent hover:border-white/5'}
+            : 'bg-transparent hover:bg-gray-300/5 nohover:bg-gray-300/5 border-transparent hover:border-gray-300/5'}
             {cls}"
         on:click={onClick}
         on:keydown={onButtonKeyDown}
@@ -153,7 +153,7 @@
             class="fill-gray-400 h-4 w-4 absolute top-1 right-0 transition-opacity
             {dropdownVisible
                 ? 'opacity-100'
-                : 'opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100'}"
+                : 'opacity-0 nohover:opacity-100 group-hover:opacity-100 group-focus-visible:opacity-100'}"
             role="presentation"
         />
     </button>

src/routes/+layout.ts

@@ -2,3 +2,4 @@ import '../app.css';
 
 export const prerender = true;
 export const ssr = false;
+export const trailingSlash = 'always';

src/routes/+page.svelte

@@ -36,6 +36,7 @@
     const rootPage = $page.url.origin + $page.url.pathname;
 
     const onQueryFormSubmit = async (event: CustomEvent<QueryParameters>) => {
+        drawerVisible = false;
         await updateUrl(event.detail, appParameters.visParameters, false);
     };
 

src/routes/ViewForm.svelte

@@ -58,7 +58,7 @@
 		on:click={() => {
 			expanded = !expanded;
 		}}
-		class="w-full leading-6 py-0.5 text-gray-300 bg-transparent hover:bg-white/5 active:bg-black/5 transition-colors"
+		class="w-full leading-6 py-0.5 text-gray-300 bg-transparent hover:bg-gray-300/5 active:bg-black/5 transition-colors"
 	>
 		{expanded ? "Collapse" : "Show visualization settings"}
 	</button>

tailwind.config.cjs

@@ -31,6 +31,7 @@ module.exports = {
 			},
 			screens: {
 				coarse: {raw: '(pointer: coarse)'},
+				nohover: {raw: '(hover: none)'},
 			},
 			keyframes: {
 				'spin-appear': {
@@ -53,4 +54,7 @@ module.exports = {
 	experimental: {
 		optimizeUniversalDefaults: true,
 	},
+	future: {
+		hoverOnlyWhenSupported: true,
+	},
 };