styling of drop box

src/rmbg_as_a_service/static/index.html

@@ -25,6 +25,7 @@
         <input id="file" type="file" accept="image/*" />
         <div class="upload-text">&#9650; DROP IMAGE</div>
         <div class="upload-hint" id="fname">NO FILE SELECTED</div>
+        <div class="upload-stats" id="fstats"></div>
         <img class="preview-thumb" id="thumb" alt="" hidden />
       </div>
     </section>
@@ -175,6 +176,7 @@ const sidebarToggle = $('sidebarToggle');
 const drop          = $('drop');
 const fileInput     = $('file');
 const fname         = $('fname');
+const fstats        = $('fstats');
 const thumb         = $('thumb');
 const go            = $('go');
 const dl            = $('dl');
@@ -281,12 +283,13 @@ function pickFile(file) {
   selectedFile = file;
   const url = URL.createObjectURL(file);
   const kb = Math.round(file.size / 1024);
-  fname.textContent = file.name + '  ·  ' + kb + ' KB';
+  fname.textContent = file.name;
+  fstats.textContent = kb + ' KB';
   thumb.src = url;
   thumb.hidden = false;
   drop.classList.add('has-file');
   srcImg.onload = () => {
-    fname.textContent = file.name + '  ·  ' +
+    fstats.textContent =
       srcImg.naturalWidth + '×' + srcImg.naturalHeight + ' PX  ·  ' + kb + ' KB';
   };
   srcImg.src = url;
@@ -309,6 +312,7 @@ reset.addEventListener('click', () => {
   selectedFile = null;
   fileInput.value = '';
   fname.textContent = 'NO FILE SELECTED';
+  fstats.textContent = '';
   thumb.removeAttribute('src');
   thumb.hidden = true;
   drop.classList.remove('has-file');

src/rmbg_as_a_service/static/styles.css

@@ -928,6 +928,13 @@ select option {
     background-color: #000000;
 }
 
+/* px / KB stats, on their own line below the filename */
+.upload-stats {
+    color: #5a7a5a;
+    font-size: 11px;
+    margin-top: 4px;
+}
+
 /* upload box thumbnail state */
 .upload-box.has-file {
     border-color: #7aa87a;