Tweaks

markuszeller · markuszeller · commit fac7c1f0f65a · 2022-09-11T21:21:03.000+02:00
diff --git a/app/css/style.css b/app/css/style.css
@@ -1,4 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
diff --git a/app/css/tweaks.css b/app/css/tweaks.css
@@ -0,0 +1,15 @@
+.drag-over {
+    background: hsl(20, 100%, 90%);
+    border-style: dashed;
+    border-color: hsl(20, 100%, 60%);
+}
+
+tr {
+    border-collapse: collapse;
+    border-spacing: 4px;
+    font-size: 1rem;
+    border: none;
+    border-left: 1em solid transparent;
+    cursor: move;
+}
+
diff --git a/app/index.html b/app/index.html
@@ -5,12 +5,10 @@
     <meta name="author" content="Markus Zeller">
     <title>Image Stitcher</title>
     <link href="css/output.css" rel="stylesheet">
+    <link href="css/tweaks.css" rel="stylesheet">
     <script src="js/main.js" defer></script>
 </head>
 <body>
-<div class="flex px-8 mx-auto">
-    <p class="text-2xl py-8 text-center">Image Stitcher</p>
-</div>
 <div class="flex px-8 mx-auto justify-center">
     <div class="form-check btn-group px-4 py-8 align-center">
         <div class="px-4">
@@ -31,21 +29,20 @@
         </div>
     </div>
 </div>
-<div class="files border border-dashed border-gray-500 px-8 py-8" id="files">
+<div class="border border-dashed border-gray-500 px-8 py-8" id="files">
     <div class="text-center p-10 top-0 right-0 left-0 m-auto">
     <h4>Drop images here</h4>
     </div>
 </div>
 <div class="overflow-x-auto center px-4 py-4">
 <table class="table w-full">
-<thead>
-    <tr>
-        <td class="border-b border-gray-200">Filename</td>
-    </tr>
-</thead>
-<tbody>
-<tr id="images-list" class="images-list border-b border-gray-200"></tr>
-</tbody>
+    <thead>
+        <tr>
+            <td class="border-b border-gray-200">Filename</td>
+        </tr>
+    </thead>
+    <tbody id="images-list">
+    </tbody>
 </table>
 </div>
 <div id="result" class="result"></div>
