Fix #1308: Enhance audio file preview thumbnail styling

CHANGE.md

@@ -1,6 +1,12 @@
 Change Log: `bootstrap-fileinput`
 =================================
 
+## version 4.5.2
+
+**Date:** _under development_
+
+- (enh #1308): Enhance audio file preview thumbnail styling.
+
 ## version 4.5.1
 
 **Date:** 25-Sep-2018

css/fileinput.css

@@ -213,6 +213,11 @@
     width: 400px;
 }
 
+.krajee-default.file-preview-frame[data-template="audio"] .kv-file-content {
+    width: 240px;
+    height: 55px;
+}
+
 .krajee-default.file-preview-frame .file-thumbnail-footer {
     height: 70px;
 }
@@ -481,7 +486,7 @@
 }
 
 @media (max-width: 350px) {
-    .krajee-default.file-preview-frame .kv-file-content {
+    .krajee-default.file-preview-frame:not([data-template="audio"]) .kv-file-content {
         width: 160px;
     }
 }

scss/fileinput.scss

@@ -294,6 +294,10 @@ input[type=file].file-loading {
             border: $border solid $black-30;
             box-shadow: 0 0 multiply($pad, 2) 0 $black-40;
         }
+        &[data-template="audio"] .kv-file-content {
+            width: 240px;
+            height: 55px;
+        }
     }
     .file-preview-text {
         display: block;
@@ -629,8 +633,8 @@ input[type=file].file-loading {
 }
 
 @media(max-width: 350px) {
-    .krajee-default.file-preview-frame .kv-file-content {
-        width: multiply($pad, 32);
+    .krajee-default.file-preview-frame:not([data-template="audio"]) .kv-file-content {
+        width: 160px;
     }
 }