Fix #380, Fix #381: Consistent styling for thumbnails

CHANGE.md

@@ -10,6 +10,7 @@ Change Log: `bootstrap-fileinput`
 3. (enh #377): Various enhancements to text preview.
 4. (enh #378): Ability to configure different icon thumbnails for preview files.
 5. (enh #379): Combine more translatable settings and update locale js files.
+6. (enh #380, #381): Consistent styling for thumbnails.
 
 ## version 4.2.5
 

css/fileinput.css

@@ -70,19 +70,6 @@
     text-align: left;
 }
 
-.file-preview-other-footer .file-actions {
-    margin-top: 10px;
-}
-
-.file-preview-other-footer .file-caption-name {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 160px;
-    text-align: center;
-}
-
 .kv-has-ellipsis .file-caption-ellipsis {
     display: inline;
 }
@@ -163,7 +150,7 @@
     text-align: center;
     vertical-align: middle;
     width: 160px;
-    height: 140px;
+    height: 160px;
     border: 2px dashed #999;
     border-radius: 25px;
     opacity: 0.8;
@@ -208,23 +195,33 @@
     float: right;
 }
 
-.file-thumbnail-footer .file-caption-name {
-    padding-top: 4px;
-    font-size: 11px;
-    color: #777;
-}
-
 .file-upload-indicator {
     padding-top: 2px;
     cursor: default;
 }
 
 .file-upload-indicator:hover {
-    font-size: 1.2em;
     font-weight: bold;
     padding-top: 0;
 }
 
+.file-footer-caption {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 160px;
+    text-align: center;
+    padding-top: 4px;
+    font-size: 11px;
+    color: #777;
+    margin: 5px auto 10px auto;
+}
+
+.file-footer-caption:hover {
+    color: #333;
+}
+
 .file-drop-zone {
     border: 1px dashed #aaa;
     border-radius: 4px;

js/fileinput.js

@@ -273,14 +273,14 @@
             '     </div>\n' +
             '</div>',
         tFooter = '<div class="file-thumbnail-footer">\n' +
-            '    <div class="file-caption-name">{caption}</div>\n' +
+            '    <div class="file-footer-caption">{caption}</div>\n' +
             '    {actions}\n' +
             '</div>',
         tActions = '<div class="file-actions">\n' +
             '    <div class="file-footer-buttons">\n' +
             '        {upload}{delete}{other}' +
             '    </div>\n' +
-            '    <div class="file-upload-indicator" tabindex="-1" title="{indicatorTitle}">{indicator}</div>\n' +
+            '    <div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
             '    <div class="clearfix"></div>\n' +
             '</div>',
         tActionDelete = '<button type="button" class="kv-file-remove {removeClass}" ' +