fix: more ux

Author: schollz

core/src/server/static/index.html

@@ -777,38 +777,29 @@ <h2>Changes to the Cookie Policy</h2>
                     <button @click="mergeSelectedFiles" v-if="selectedFiles.length > 1" style="margin-left: 0;">Merge
                         selected files</button>
                     <ul>
-                        <li v-for="(file, fileIndex) in banks[selectedBank].files" :key="fileIndex"
-                            draggable="true"
-                            @dragstart="handleDragStart($event, fileIndex)"
-                            @dragend="handleDragEnd"
-                            @dragover.prevent="handleDragOver($event, fileIndex)"
-                            @dragleave="handleDragLeave"
-                            @drop="handleDrop($event, fileIndex)"
-                            @mousedown="handleMouseDown(fileIndex)"
-                            @mouseup="handleMouseUp(fileIndex)"
-                            :class="{
+                        <li v-for="(file, fileIndex) in banks[selectedBank].files" :key="fileIndex" draggable="true"
+                            @dragstart="handleDragStart($event, fileIndex)" @dragend="handleDragEnd"
+                            @dragover.prevent="handleDragOver($event, fileIndex)" @dragleave="handleDragLeave"
+                            @drop="handleDrop($event, fileIndex)" @mousedown="handleMouseDown(fileIndex)"
+                            @mouseup="handleMouseUp(fileIndex)" :class="{
                                 'selected': isSelected(fileIndex),
                                 'selected_on':isSelectedAndOpen(fileIndex),
                                 'dragging': draggedIndex === fileIndex,
                                 'drag-over': dragOverIndex === fileIndex && draggedIndex !== fileIndex
-                            }"
-                            :data-file-number="fileIndex + 1">
+                            }" :data-file-number="fileIndex + 1">
                             <!-- checkbox on left -->
-                            <input type="checkbox"
-                                @click.stop="toggleFileSelection(fileIndex)"
-                                @mousedown.stop
-                                @mouseup.stop
-                                :checked="isSelected(fileIndex)"
-                                class="file-checkbox">
+                            <input type="checkbox" @click.stop="toggleFileSelection(fileIndex)" @mousedown.stop
+                                @mouseup.stop :checked="isSelected(fileIndex)" class="file-checkbox">
                             <span class="file-name">{{ file.Filename }}</span>
                             <i v-if="isSelectedAndOpen(fileIndex)" class="fas fa-eye"></i>
                         </li>
                     </ul>
                 </div>
 
-                <div class="file-details-backdrop" v-if="selectedFile!=null && !disconnected" @click="selectedFile=null"></div>
+                <div class="file-details-backdrop" v-if="selectedFile!=null && !disconnected"
+                    @click="selectedFile=null"></div>
                 <div class="file-details" v-if="selectedFile!=null && !disconnected" @click.stop>
-                    <p style="margin-top:0; padding-top: 0.5rem; padding-bottom: 0; margin-bottom: 0;
+                    <p style="margin-top:0; margin-bottom: 0;
                     text-align: left;"><strong>{{ banks[selectedBank].files[selectedFile].Filename }}</strong> ({{
                         banks[selectedBank].files[selectedFile].SliceStart.length }} slices,
                         {{humanizeDuration((banks[selectedBank].files[selectedFile].Duration).toFixed(5)*1000)}})

core/src/server/static/style.css

@@ -36,9 +36,15 @@ body {
     border-radius: 2em;
     border-color: var(--header-footer-background);
     border-style: solid;
-    box-shadow: var(--highlight-color) 12px 12px 2px 1px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
     background: var(--background-color);
-    padding: 1em;
+    padding: 2em;
+    max-width: 90vw;
+    max-height: 90vh;
+}
+
+#dialog-settings::backdrop {
+    background: rgba(0, 0, 0, 0.7);
 }
 
 #app {
@@ -166,15 +172,22 @@ a:hover {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    border: 3px solid var(--highlight-color-border);
+    border: 4px solid var(--highlight-color-border);
     border-radius: 10px;
     padding: 2em;
     background: var(--background-color);
     z-index: 1000;
     max-width: 90vw;
     max-height: 90vh;
     overflow-y: auto;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 4px 20px var(--shadow-color)
+}
+
+.file-details>p:nth-child(1)>strong {
+    background: var(--highlight-color-border);
+    border-radius: 1em;
+    padding: 1em;
+    display: inline-block;
 }
 
 .file-details-backdrop {
@@ -320,6 +333,17 @@ button:hover {
     color: white;
 }
 
+#downloadZipButton {
+    background-color: var(--highlight-color-border);
+    color: black;
+    font-weight: bold;
+}
+
+#downloadZipButton:hover {
+    background-color: var(--highlight-color-border);
+    opacity: 0.8;
+}
+
 .footer-item {
     margin-bottom: 0.25rem;
     margin-top: 0.25rem;