Fix #1584: Revamp Krajee Explorer Themes

CHANGE.md

@@ -5,6 +5,7 @@ Change Log: `bootstrap-fileinput`
 
 **Date:** _under development_
 
+- (enh #1584): Revamp Krajee Explorer Themes.
 - (bug #1583): Correct cspBuffer stash html content store.
 - (enh #1582): Set `showConsoleLogs` to `false` as default.
 - (enh #1581): Enhance Sortable Behavior & Styles.

css/fileinput.css

@@ -60,7 +60,7 @@
     height: 16px;
 }
 
-.krajee-default .file-thumb-progress .progress, .krajee-default .file-thumb-progress .progress-bar {
+.file-thumb-progress .progress, .file-thumb-progress .progress-bar {
     font-family: Verdana, Helvetica, sans-serif;
     font-size: 0.7rem;
 }

js/fileinput.js

@@ -3910,7 +3910,7 @@
                 index = parseInt(index.replace($h.INIT_FLAG, ''));
                 config = $h.isEmpty(cache.config) && $h.isEmpty(cache.config[index]) ? null : cache.config[index];
                 extraData = $h.isEmpty(config) || $h.isEmpty(config.extra) ? deleteExtraData : config.extra;
-                fileName = config.filename || config.caption || '';
+                fileName = config && (config.filename || config.caption) || '';
                 if (typeof extraData === 'function') {
                     extraData = extraData();
                 }
@@ -4275,7 +4275,7 @@
             }
             $zone.find('.' + self.dropZoneTitleClass).remove();
             if (!self.showPreview || $zone.length === 0 || self.fileManager.count() > 0 || !self.dropZoneEnabled ||
-                (!self.isAjaxUpload && self._hasFiles())) {
+                self.previewCache.count() > 0 || (!self.isAjaxUpload && self._hasFiles())) {
                 return;
             }
             if ($zone.find($h.FRAMES).length === 0 && $h.isEmpty(self.defaultPreviewContent)) {

scss/fileinput.scss

@@ -381,6 +381,15 @@ input[type=file].file-loading {
         margin: -10px 0 5px;
     }
 }
+.file-thumb-progress {
+    .progress {
+        background-color: #ccc;
+    }
+    .progress-bar {
+        font-size: 0.7rem;
+        font-family: Verdana, Helvetica, sans-serif;
+    }
+}
 .file-zoom-dialog {
     .file-other-icon {
         //noinspection CssOverwrittenProperties

scss/themes/explorer-fa/theme.scss

@@ -2,7 +2,8 @@
  * bootstrap-fileinput v5.1.0
  * http://plugins.krajee.com/file-input
  *
- * Krajee Explorer Font Awesome theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.
+ * Krajee Explorer Font Awesome 4.x theme style for bootstrap-fileinput. Load this theme file after loading
+ * `fileinput.css`.
  *
  * Author: Kartik Visweswaran
  * Copyright: 2014 - 2020, Kartik Visweswaran, Krajee.com
@@ -16,186 +17,210 @@ $alto: #ddd !default;
 $tapa: #777 !default;
 $mystic: #e1edf7 !default;
 $perano: #a1abff !default;
+$white-smoke: #f5f5f5 !default;
 
 //fonts
-$font-0: Menlo !default;
-$font-1: Monaco !default;
-$font-2: Consolas !default;
-$font-3: "Courier New" !default;
-$font-4: monospace !default;
+$font: Menlo, Monaco, Consolas, "Courier New", monospace !default;
 
 //standard measures
 $pad: 5px !default;
-$border: 1px !default;
-$tablet: 767px !default;
 
 //operations
 @function multiply($pixels, $multiplier) {
     @return $pixels * $multiplier;
 }
 
-//@extend-elements
-%set_text_center {
-    text-align: center;
-}
+.theme-explorer-fa {
+    .file-preview-frame {
+        border: multiply($pad, 0.2) solid $alto;
+        margin: multiply($pad, 0.4) 0;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-%set_progress {
-    height: multiply($pad, 2.6);
-    font-size: multiply($pad, 2.2);
-    line-height: multiply($pad, 2.6);
-}
+        samp {
+            font-size: 0.9rem;
+        }
+    }
 
-%set_indicator {
-    position: absolute;
-    display: inline-block;
-    top: 0;
-    right: multiply($pad, 0.6);
-    width: multiply($pad, 3.2);
-    height: multiply($pad, 3.2);
-    font-size: multiply($pad, 3.2);
-    @extend %set_text_center;
-}
+    .file-actions {
+        text-align: center;
+    }
 
-%set_block {
-    display: block;
-}
+    .file-upload-indicator,
+    .file-drag-handle {
+        text-align: center;
+        position: absolute;
+        display: inline-block;
+        bottom: multiply($pad, 1.6);
+        right: multiply($pad, 0.8);
+        width: multiply($pad, 3.2);
+        height: multiply($pad, 3.2);
+        font-size: multiply($pad, 3.2);
+    }
 
-.theme-explorer-fa {
     .explorer-frame {
-        td {
-            vertical-align: middle;
-            text-align: left;
-        }
         .kv-file-content {
-            width: multiply($pad, 16);
+            width: multiply($pad, 32);
             height: multiply($pad, 16);
             padding: $pad;
-            @extend %set_text_center;
+            text-align: left;
         }
     }
-    .file-actions-cell {
-        position: relative;
-        width: multiply($pad, 24);
-        padding: 0;
-    }
+
     .file-thumb-progress {
         .progress {
-            @extend %set_block;
-            @extend %set_progress;
-            margin-top: $pad;
-        }
-        .progress-bar {
-            @extend %set_progress;
+            display: block;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            margin-top: 5px;
         }
     }
-    .file-upload-indicator {
-        @extend %set_indicator;
-    }
-    .file-drag-handle {
-        @extend %set_indicator;
-    }
+
     .explorer-caption {
-        @extend %set_block;
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding: 5px;
         color: $tapa;
     }
-    .file-actions {
-        @extend %set_text_center;
+
+    .file-footer-buttons {
+        padding: 5px;
+        text-align: right;
     }
+
     .kvsortable-ghost {
         opacity: 0.6;
         background: $mystic;
-        border: multiply($border, 2) solid $perano;
+        border: multiply($pad, 0.4) solid $perano;
     }
-    .file-preview .table {
-        margin: 0;
+
+    .file-preview {
+        .table {
+            margin: 0;
+        }
+    }
+
+    .file-error-message {
+        ul {
+            padding: 5px 0 0 20px;
+        }
+    }
+
+    .file-details-cell {
+        width: 60%;
+        font-size: 0.95rem;
+        text-align: left;
+        margin-right: auto;
     }
-    .file-error-message ul {
-        padding: $pad 0 0 multiply($pad, 4);
+
+    .file-actions-cell {
+        position: relative;
+        height: multiply($pad, 16);
+        width: multiply($pad, 40);
     }
 }
 
 .explorer-frame {
+    .file-preview-other {
+        text-align: center;
+    }
+
     .file-preview-text {
         display: inline-block;
         color: $boston-blue;
-        border: $border solid $alto;
-        font-family: $font-0, $font-1, $font-2, $font-3, $font-4;
+        border: 1px solid $alto;
+        font-family: $font;
         outline: none;
         padding: multiply($pad, 1.6);
         resize: none;
     }
+
     .file-preview-html {
         display: inline-block;
-        border: $border solid $alto;
+        border: 1px solid $alto;
         padding: multiply($pad, 1.6);
         overflow: auto;
     }
-    .file-preview-other {
-        @extend %set_text_center;
-    }
+
     .file-other-icon {
         font-size: 2.6em;
     }
+
+    &:hover {
+        background-color: $white-smoke;
+    }
 }
 
-@media only screen and(max-width: $tablet) {
-    //@extend-elements
-    %set_block_full {
-        display: block;
-        width: 100% !important;
+.file-zoom-dialog {
+    .explorer-frame {
+        .file-other-icon {
+            //noinspection CssOverwrittenProperties
+            font-size: 22em;
+            //noinspection CssOverwrittenProperties
+            font-size: 50vmin;
+        }
     }
+}
+
+@media only screen and (max-width: 1249px) {
     .theme-explorer-fa {
-        .table {
-            @extend %set_block_full;
-            border: none;
-            tbody {
-                @extend %set_block_full;
+        .file-preview-frame {
+            .file-details-cell {
+                width: 40%;
             }
-            tr {
-                @extend %set_block_full;
-                margin-top: $pad;
-                &:first-child {
-                    margin-top: 0;
-                }
+        }
+    }
+}
+
+@media only screen and (max-width: 1023px) {
+    .theme-explorer-fa {
+        .file-preview-frame {
+            .file-details-cell {
+                width: 30%;
             }
-            td {
-                @extend %set_block_full;
-                text-align: center;
+        }
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .theme-explorer-fa {
+        .file-preview-frame {
+            .file-details-cell {
+                width: multiply($pad, 40);
             }
+        }
+    }
+}
+
+@media only screen and (max-width: 575px) {
+    .theme-explorer-fa {
+        .file-preview-frame {
+            flex-direction: column;
+
             .kv-file-content {
-                border-bottom: none;
-                padding: multiply($pad, 0.8);
-                margin: 0;
-                .file-preview-image {
-                    max-width: 100%;
-                    font-size: multiply($pad, 4);
-                }
+                width: auto;
+                text-align: center;
             }
         }
+
         .file-details-cell {
-            border-top: none;
-            border-bottom: none;
-            padding-top: 0;
-            margin: 0;
+            width: multiply($pad, 20);
+            text-align: center;
+            margin-right: 0;
         }
+
         .file-actions-cell {
-            border-top: none;
-            padding-bottom: multiply($pad, 0.8);
+            width: 100%;
+            height: auto;
         }
-        .explorer-frame .explorer-caption {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            left: 0;
-            right: 0;
-            margin: auto;
+
+        .file-footer-buttons {
+            text-align: left;
         }
     }
 }
-
-.file-zoom-dialog .explorer-frame .file-other-icon {
-    //noinspection CssOverwrittenProperties
-    font-size: 22em;
-    //noinspection CssOverwrittenProperties
-    font-size: 50vmin;
-}

scss/themes/explorer-fas/theme.scss

@@ -2,7 +2,8 @@
  * bootstrap-fileinput v5.1.0
  * http://plugins.krajee.com/file-input
  *
- * Krajee Explorer Font Awesome theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.
+ * Krajee Explorer Font Awesome 5.x theme style for bootstrap-fileinput. Load this theme file after loading
+ * `fileinput.css`.
  *
  * Author: Kartik Visweswaran
  * Copyright: 2014 - 2020, Kartik Visweswaran, Krajee.com
@@ -16,186 +17,210 @@ $alto: #ddd !default;
 $tapa: #777 !default;
 $mystic: #e1edf7 !default;
 $perano: #a1abff !default;
+$white-smoke: #f5f5f5 !default;
 
 //fonts
-$font-0: Menlo !default;
-$font-1: Monaco !default;
-$font-2: Consolas !default;
-$font-3: "Courier New" !default;
-$font-4: monospace !default;
+$font: Menlo, Monaco, Consolas, "Courier New", monospace !default;
 
 //standard measures
 $pad: 5px !default;
-$border: 1px !default;
-$tablet: 767px !default;
 
 //operations
 @function multiply($pixels, $multiplier) {
     @return $pixels * $multiplier;
 }
 
-//@extend-elements
-%set_text_center {
-    text-align: center;
-}
+.theme-explorer-fas {
+    .file-preview-frame {
+        border: multiply($pad, 0.2) solid $alto;
+        margin: multiply($pad, 0.4) 0;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-%set_progress {
-    height: multiply($pad, 2.6);
-    font-size: multiply($pad, 2.2);
-    line-height: multiply($pad, 2.6);
-}
+        samp {
+            font-size: 0.9rem;
+        }
+    }
 
-%set_indicator {
-    position: absolute;
-    display: inline-block;
-    top: 0;
-    right: multiply($pad, 0.6);
-    width: multiply($pad, 3.2);
-    height: multiply($pad, 3.2);
-    font-size: multiply($pad, 3.2);
-    @extend %set_text_center;
-}
+    .file-actions {
+        text-align: center;
+    }
 
-%set_block {
-    display: block;
-}
+    .file-upload-indicator,
+    .file-drag-handle {
+        text-align: center;
+        position: absolute;
+        display: inline-block;
+        bottom: multiply($pad, 1.6);
+        right: multiply($pad, 0.8);
+        width: multiply($pad, 3.2);
+        height: multiply($pad, 3.2);
+        font-size: multiply($pad, 3.2);
+    }
 
-.theme-explorer-fa {
     .explorer-frame {
-        td {
-            vertical-align: middle;
-            text-align: left;
-        }
         .kv-file-content {
-            width: multiply($pad, 16);
+            width: multiply($pad, 32);
             height: multiply($pad, 16);
             padding: $pad;
-            @extend %set_text_center;
+            text-align: left;
         }
     }
-    .file-actions-cell {
-        position: relative;
-        width: multiply($pad, 24);
-        padding: 0;
-    }
+
     .file-thumb-progress {
         .progress {
-            @extend %set_block;
-            @extend %set_progress;
-            margin-top: $pad;
-        }
-        .progress-bar {
-            @extend %set_progress;
+            display: block;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            margin-top: 5px;
         }
     }
-    .file-upload-indicator {
-        @extend %set_indicator;
-    }
-    .file-drag-handle {
-        @extend %set_indicator;
-    }
+
     .explorer-caption {
-        @extend %set_block;
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding: 5px;
         color: $tapa;
     }
-    .file-actions {
-        @extend %set_text_center;
+
+    .file-footer-buttons {
+        padding: 5px;
+        text-align: right;
     }
+
     .kvsortable-ghost {
         opacity: 0.6;
         background: $mystic;
-        border: multiply($border, 2) solid $perano;
+        border: multiply($pad, 0.4) solid $perano;
+    }
+
+    .file-preview {
+        .table {
+            margin: 0;
+        }
     }
-    .file-preview .table {
-        margin: 0;
+
+    .file-error-message {
+        ul {
+            padding: 5px 0 0 20px;
+        }
     }
-    .file-error-message ul {
-        padding: $pad 0 0 multiply($pad, 4);
+
+    .file-details-cell {
+        width: 60%;
+        font-size: 0.95rem;
+        text-align: left;
+        margin-right: auto;
+    }
+
+    .file-actions-cell {
+        position: relative;
+        height: multiply($pad, 16);
+        width: multiply($pad, 40);
     }
 }
 
 .explorer-frame {
+    .file-preview-other {
+        text-align: center;
+    }
+
     .file-preview-text {
         display: inline-block;
         color: $boston-blue;
-        border: $border solid $alto;
-        font-family: $font-0, $font-1, $font-2, $font-3, $font-4;
+        border: 1px solid $alto;
+        font-family: $font;
         outline: none;
         padding: multiply($pad, 1.6);
         resize: none;
     }
+
     .file-preview-html {
         display: inline-block;
-        border: $border solid $alto;
+        border: 1px solid $alto;
         padding: multiply($pad, 1.6);
         overflow: auto;
     }
-    .file-preview-other {
-        @extend %set_text_center;
-    }
+
     .file-other-icon {
         font-size: 2.6em;
     }
+
+    &:hover {
+        background-color: $white-smoke;
+    }
 }
 
-@media only screen and(max-width: $tablet) {
-    //@extend-elements
-    %set_block_full {
-        display: block;
-        width: 100% !important;
+.file-zoom-dialog {
+    .explorer-frame {
+        .file-other-icon {
+            //noinspection CssOverwrittenProperties
+            font-size: 22em;
+            //noinspection CssOverwrittenProperties
+            font-size: 50vmin;
+        }
     }
-    .theme-explorer-fa {
-        .table {
-            @extend %set_block_full;
-            border: none;
-            tbody {
-                @extend %set_block_full;
+}
+
+@media only screen and (max-width: 1249px) {
+    .theme-explorer-fas {
+        .file-preview-frame {
+            .file-details-cell {
+                width: 40%;
             }
-            tr {
-                @extend %set_block_full;
-                margin-top: $pad;
-                &:first-child {
-                    margin-top: 0;
-                }
+        }
+    }
+}
+
+@media only screen and (max-width: 1023px) {
+    .theme-explorer-fas {
+        .file-preview-frame {
+            .file-details-cell {
+                width: 30%;
             }
-            td {
-                @extend %set_block_full;
-                text-align: center;
+        }
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .theme-explorer-fas {
+        .file-preview-frame {
+            .file-details-cell {
+                width: multiply($pad, 40);
             }
+        }
+    }
+}
+
+@media only screen and (max-width: 575px) {
+    .theme-explorer-fas {
+        .file-preview-frame {
+            flex-direction: column;
+
             .kv-file-content {
-                border-bottom: none;
-                padding: multiply($pad, 0.8);
-                margin: 0;
-                .file-preview-image {
-                    max-width: 100%;
-                    font-size: multiply($pad, 4);
-                }
+                width: auto;
+                text-align: center;
             }
         }
+
         .file-details-cell {
-            border-top: none;
-            border-bottom: none;
-            padding-top: 0;
-            margin: 0;
+            width: multiply($pad, 20);
+            text-align: center;
+            margin-right: 0;
         }
+
         .file-actions-cell {
-            border-top: none;
-            padding-bottom: multiply($pad, 0.8);
+            width: 100%;
+            height: auto;
         }
-        .explorer-frame .explorer-caption {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            left: 0;
-            right: 0;
-            margin: auto;
+
+        .file-footer-buttons {
+            text-align: left;
         }
     }
 }
-
-.file-zoom-dialog .explorer-frame .file-other-icon {
-    //noinspection CssOverwrittenProperties
-    font-size: 22em;
-    //noinspection CssOverwrittenProperties
-    font-size: 50vmin;
-}

scss/themes/explorer/theme.scss

@@ -16,186 +16,210 @@ $alto: #ddd !default;
 $tapa: #777 !default;
 $mystic: #e1edf7 !default;
 $perano: #a1abff !default;
+$white-smoke: #f5f5f5 !default;
 
 //fonts
-$font-0: Menlo !default;
-$font-1: Monaco !default;
-$font-2: Consolas !default;
-$font-3: "Courier New" !default;
-$font-4: monospace !default;
+$font: Menlo, Monaco, Consolas, "Courier New", monospace !default;
 
 //standard measures
 $pad: 5px !default;
-$border: 1px !default;
-$tablet: 767px !default;
 
 //operations
 @function multiply($pixels, $multiplier) {
     @return $pixels * $multiplier;
 }
 
-//@extend-elements
-%set_text_center {
-    text-align: center;
-}
+.theme-explorer {
+    .file-preview-frame {
+        border: multiply($pad, 0.2) solid $alto;
+        margin: multiply($pad, 0.4) 0;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-%set_progress {
-    height: multiply($pad, 2.6);
-    font-size: multiply($pad, 2.2);
-    line-height: multiply($pad, 2.6);
-}
+        samp {
+            font-size: 0.9rem;
+        }
+    }
 
-%set_indicator {
-    position: absolute;
-    display: inline-block;
-    top: 0;
-    right: multiply($pad, 0.6);
-    width: multiply($pad, 3.2);
-    height: multiply($pad, 3.2);
-    font-size: multiply($pad, 3.2);
-    @extend %set_text_center;
-}
+    .file-actions {
+        text-align: center;
+    }
 
-%set_block {
-    display: block;
-}
+    .file-upload-indicator,
+    .file-drag-handle {
+        text-align: center;
+        position: absolute;
+        display: inline-block;
+        bottom: multiply($pad, 1.6);
+        right: multiply($pad, 0.8);
+        width: multiply($pad, 3.2);
+        height: multiply($pad, 3.2);
+        font-size: multiply($pad, 3.2);
+    }
 
-.theme-explorer {
     .explorer-frame {
-        td {
-            vertical-align: middle;
-            text-align: left;
-        }
         .kv-file-content {
-            width: multiply($pad, 16);
+            width: multiply($pad, 32);
             height: multiply($pad, 16);
             padding: $pad;
-            @extend %set_text_center;
+            text-align: left;
         }
     }
-    .file-actions-cell {
-        position: relative;
-        width: multiply($pad, 24);
-        padding: 0;
-    }
+
     .file-thumb-progress {
         .progress {
-            @extend %set_block;
-            @extend %set_progress;
-            margin-top: $pad;
-        }
-        .progress-bar {
-            @extend %set_progress;
+            display: block;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            margin-top: 5px;
         }
     }
-    .file-upload-indicator {
-        @extend %set_indicator;
-    }
-    .file-drag-handle {
-        @extend %set_indicator;
-    }
+
     .explorer-caption {
-        @extend %set_block;
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding: 5px;
         color: $tapa;
     }
-    .file-actions {
-        @extend %set_text_center;
+
+    .file-footer-buttons {
+        padding: 5px;
+        text-align: right;
     }
+
     .kvsortable-ghost {
         opacity: 0.6;
         background: $mystic;
-        border: multiply($border, 2) solid $perano;
+        border: multiply($pad, 0.4) solid $perano;
     }
-    .file-preview .table {
-        margin: 0;
+
+    .file-preview {
+        .table {
+            margin: 0;
+        }
+    }
+
+    .file-error-message {
+        ul {
+            padding: 5px 0 0 20px;
+        }
+    }
+
+    .file-details-cell {
+        width: 60%;
+        font-size: 0.95rem;
+        text-align: left;
+        margin-right: auto;
     }
-    .file-error-message ul {
-        padding: $pad 0 0 multiply($pad, 4);
+
+    .file-actions-cell {
+        position: relative;
+        height: multiply($pad, 16);
+        width: multiply($pad, 40);
     }
 }
 
 .explorer-frame {
+    .file-preview-other {
+        text-align: center;
+    }
+
     .file-preview-text {
         display: inline-block;
         color: $boston-blue;
-        border: $border solid $alto;
-        font-family: $font-0, $font-1, $font-2, $font-3, $font-4;
+        border: 1px solid $alto;
+        font-family: $font;
         outline: none;
         padding: multiply($pad, 1.6);
         resize: none;
     }
+
     .file-preview-html {
         display: inline-block;
-        border: $border solid $alto;
+        border: 1px solid $alto;
         padding: multiply($pad, 1.6);
         overflow: auto;
     }
-    .file-preview-other {
-        @extend %set_text_center;
-    }
+
     .file-other-icon {
         font-size: 2.6em;
     }
+
+    &:hover {
+        background-color: $white-smoke;
+    }
 }
 
-@media only screen and(max-width: $tablet) {
-    //@extend-elements
-    %set_block_full {
-        display: block;
-        width: 100% !important;
+.file-zoom-dialog {
+    .explorer-frame {
+        .file-other-icon {
+            //noinspection CssOverwrittenProperties
+            font-size: 22em;
+            //noinspection CssOverwrittenProperties
+            font-size: 50vmin;
+        }
     }
+}
+
+@media only screen and (max-width: 1249px) {
     .theme-explorer {
-        .table {
-            @extend %set_block_full;
-            border: none;
-            tbody {
-                @extend %set_block_full;
+        .file-preview-frame {
+            .file-details-cell {
+                width: 40%;
             }
-            tr {
-                @extend %set_block_full;
-                margin-top: $pad;
-                &:first-child {
-                    margin-top: 0;
-                }
+        }
+    }
+}
+
+@media only screen and (max-width: 1023px) {
+    .theme-explorer {
+        .file-preview-frame {
+            .file-details-cell {
+                width: 30%;
             }
-            td {
-                @extend %set_block_full;
-                text-align: center;
+        }
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .theme-explorer {
+        .file-preview-frame {
+            .file-details-cell {
+                width: multiply($pad, 40);
             }
+        }
+    }
+}
+
+@media only screen and (max-width: 575px) {
+    .theme-explorer {
+        .file-preview-frame {
+            flex-direction: column;
+
             .kv-file-content {
-                border-bottom: none;
-                padding: multiply($pad, 0.8);
-                margin: 0;
-                .file-preview-image {
-                    max-width: 100%;
-                    font-size: multiply($pad, 4);
-                }
+                width: auto;
+                text-align: center;
             }
         }
+
         .file-details-cell {
-            border-top: none;
-            border-bottom: none;
-            padding-top: 0;
-            margin: 0;
+            width: multiply($pad, 20);
+            text-align: center;
+            margin-right: 0;
         }
+
         .file-actions-cell {
-            border-top: none;
-            padding-bottom: multiply($pad, 0.8);
+            width: 100%;
+            height: auto;
         }
-        .explorer-frame .explorer-caption {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            left: 0;
-            right: 0;
-            margin: auto;
+
+        .file-footer-buttons {
+            text-align: left;
         }
     }
 }
-
-.file-zoom-dialog .explorer-frame .file-other-icon {
-    //noinspection CssOverwrittenProperties
-    font-size: 22em;
-    //noinspection CssOverwrittenProperties
-    font-size: 50vmin;
-}

themes/explorer-fa/theme.css

@@ -2,7 +2,7 @@
  * bootstrap-fileinput v5.1.0
  * http://plugins.krajee.com/file-input
  *
- * Krajee Explorer Font Awesome 4.x theme style for bootstrap-fileinput. Load this theme file after loading
+ * Krajee Explorer Font Awesome 5.x theme style for bootstrap-fileinput. Load this theme file after loading
  * font awesome 4.x CSS and `fileinput.css`.
  *
  * Author: Kartik Visweswaran
@@ -11,69 +11,58 @@
  * Licensed under the BSD-3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
+.theme-explorer-fa .file-preview-frame {
+    border: 1px solid #ddd;
+    margin: 2px 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.theme-explorer-fa .file-actions,
 .theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle, .theme-explorer-fa .explorer-frame .kv-file-content, .theme-explorer-fa .file-actions, .explorer-frame .file-preview-other {
     text-align: center;
 }
-
-.theme-explorer-fa .file-thumb-progress .progress, .theme-explorer-fa .file-thumb-progress .progress-bar {
-    height: 13px;
-    font-size: 11px;
-    line-height: 13px;
-}
-
 .theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle {
     position: absolute;
     display: inline-block;
-    top: 0;
-    right: 3px;
+    bottom: 8px;
+    right: 4px;
     width: 16px;
     height: 16px;
     font-size: 16px;
 }
-
 .theme-explorer-fa .file-thumb-progress .progress, .theme-explorer-fa .explorer-caption {
     display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
-
-.theme-explorer-fa .explorer-frame td {
-    vertical-align: middle;
-    text-align: left;
+.theme-explorer-fa .file-thumb-progress .progress {
+    margin-top: 5px;
 }
-
-.theme-explorer-fa .explorer-frame .kv-file-content {
-    width: 80px;
-    height: 80px;
+.theme-explorer-fa .explorer-caption,
+.theme-explorer-fa .file-footer-buttons {
     padding: 5px;
 }
-
-.theme-explorer-fa .file-actions-cell {
-    position: relative;
-    width: 120px;
-    padding: 0;
+.theme-explorer-fa .file-footer-buttons {
+    text-align: right;
 }
-
-.theme-explorer-fa .file-thumb-progress .progress {
-    margin-top: 5px;
-}
-
 .theme-explorer-fa .explorer-caption {
     color: #777;
+    padding-top: 5px;
 }
-
 .theme-explorer-fa .kvsortable-ghost {
     opacity: 0.6;
     background: #e1edf7;
     border: 2px solid #a1abff;
 }
-
 .theme-explorer-fa .file-preview .table {
     margin: 0;
 }
-
 .theme-explorer-fa .file-error-message ul {
     padding: 5px 0 0 20px;
 }
-
 .explorer-frame .file-preview-text {
     display: inline-block;
     color: #428bca;
@@ -83,75 +72,85 @@
     padding: 8px;
     resize: none;
 }
-
 .explorer-frame .file-preview-html {
     display: inline-block;
     border: 1px solid #ddd;
     padding: 8px;
     overflow: auto;
 }
-
 .explorer-frame .file-other-icon {
     font-size: 2.6em;
 }
-
-@media only screen and (max-width: 767px) {
-    .theme-explorer-fa .table, .theme-explorer-fa .table tbody, .theme-explorer-fa .table tr, .theme-explorer-fa .table td {
-        display: block;
-        width: 100% !important;
+.explorer-frame:hover {
+    background-color: #f5f5f5;
+}
+.theme-explorer-fa .file-preview-frame samp {
+    font-size: 0.9rem;
+}
+.theme-explorer-fa .explorer-frame .kv-file-content {
+    width: 160px;
+    height: 80px;
+    padding: 5px;
+    text-align: left;
+}
+.theme-explorer-fa .file-details-cell {
+    width: 60%;
+    font-size: 0.95rem;
+    text-align: left;
+    margin-right: auto;
+}
+.theme-explorer-fa .file-actions-cell {
+    position: relative;
+    height: 80px;
+    width: 200px;
+}
+/*noinspection CssOverwrittenProperties*/
+.file-zoom-dialog .explorer-frame .file-other-icon {
+    font-size: 22em;
+    font-size: 50vmin;
+}
+@media only screen and (max-width: 1249px) {
+    .theme-explorer-fa .file-preview-frame .file-details-cell {
+        width: 40%;
     }
-
-    .theme-explorer-fa .table {
-        border: none;
+}
+@media only screen and (max-width: 1023px) {
+    .theme-explorer-fa .file-preview-frame .file-details-cell {
+        width: 30%;
     }
-
-    .theme-explorer-fa .table tr {
-        margin-top: 5px;
+}
+@media only screen and (max-width: 767px) {
+    .theme-explorer-fa .file-preview-frame .file-details-cell {
+        width: 200px;
     }
-
-    .theme-explorer-fa .table tr:first-child {
-        margin-top: 0;
+}
+@media only screen and (max-width: 575px) {
+    .theme-explorer-fa .file-preview-frame {
+        flex-direction: column;
     }
 
-    .theme-explorer-fa .table td {
+    .theme-explorer-fa .file-preview-frame .kv-file-content {
+        width: auto;
         text-align: center;
     }
 
-    .theme-explorer-fa .table .kv-file-content {
-        border-bottom: none;
-        padding: 4px;
-        margin: 0;
-    }
-
-    .theme-explorer-fa .table .kv-file-content .file-preview-image {
-        max-width: 100%;
-        font-size: 20px;
-    }
-
     .theme-explorer-fa .file-details-cell {
-        border-top: none;
-        border-bottom: none;
-        padding-top: 0;
-        margin: 0;
+        width: 100px;
+        text-align: center;
+        margin-right: 0;
     }
 
+    .theme-explorer-fa .file-preview-frame .kv-file-content,
+    .theme-explorer-fa .file-details-cell,
     .theme-explorer-fa .file-actions-cell {
-        border-top: none;
-        padding-bottom: 4px;
+        width: 100%;
     }
 
-    .theme-explorer-fa .explorer-frame .explorer-caption {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        left: 0;
-        right: 0;
-        margin: auto;
+    .theme-explorer-fa .file-actions-cell {
+        height: auto;
     }
-}
 
-/*noinspection CssOverwrittenProperties*/
-.file-zoom-dialog .explorer-frame .file-other-icon {
-    font-size: 22em;
-    font-size: 50vmin;
+    .theme-explorer-fa .file-footer-buttons {
+        text-align: left;
+    }
 }

themes/explorer-fa/theme.js

@@ -14,37 +14,20 @@
  */
 (function ($) {
     'use strict';
-    var teTagBef = '<tr class="file-preview-frame {frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
-        ' data-fileid="{fileid}" data-template="{template}"', teContent = '<td class="kv-file-content">\n';
     $.fn.fileinputThemes['explorer-fa'] = {
         layoutTemplates: {
-            preview: '<div class="file-preview {class}">\n' +
-            '    {close}' +
-            '    <div class="{dropClass}">\n' +
-            '    <table class="table table-bordered table-hover"><tbody class="file-preview-thumbnails">\n' +
-            '    </tbody></table>\n' +
-            '    <div class="clearfix"></div>' +
-            '    <div class="file-preview-status text-center text-success"></div>\n' +
-            '    <div class="kv-fileinput-error"></div>\n' +
-            '    </div>\n' +
-            '</div>',
-            footer: '<td class="file-details-cell"><div class="explorer-caption" title="{caption}">{caption}</div> ' +
-            '{size}{progress}</td><td class="file-actions-cell">{indicator} {actions}</td>',
+            footer: '<div class="file-details-cell">' +
+                '<div class="explorer-caption" title="{caption}">{caption}</div> ' + '{size}{progress}' +
+                '</div>' +
+                '<div class="file-actions-cell">{indicator} {actions}</div>',
             actions: '{drag}\n' +
-            '<div class="file-actions">\n' +
-            '    <div class="file-footer-buttons">\n' +
-            '        {upload} {download} {delete} {zoom} {other} ' +
-            '    </div>\n' +
-            '</div>',
-            zoomCache: '<tr style="display:none" class="kv-zoom-cache-theme"><td>' +
-            '<table class="kv-zoom-cache">{zoomContent}</table></td></tr>',
+                '<div class="file-actions">\n' +
+                '    <div class="file-footer-buttons">\n' +
+                '        {upload} {download} {delete} {zoom} {other} ' +
+                '    </div>\n' +
+                '</div>',
             fileIcon: '<i class="fa fa-file kv-caption-icon"></i> '
         },
-        previewMarkupTags: {
-            tagBefore1: teTagBef + '>' + teContent,
-            tagBefore2: teTagBef + ' title="{caption}">' + teContent,
-            tagAfter: '</td>\n{footer}</tr>\n'
-        },
         previewSettings: {
             html: {width: '100px', height: '60px'},
             text: {width: '100px', height: '60px'},

themes/explorer-fas/theme.css

@@ -11,69 +11,58 @@
  * Licensed under the BSD-3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
+.theme-explorer-fas .file-preview-frame {
+    border: 1px solid #ddd;
+    margin: 2px 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.theme-explorer-fas .file-actions,
 .theme-explorer-fas .file-upload-indicator, .theme-explorer-fas .file-drag-handle, .theme-explorer-fas .explorer-frame .kv-file-content, .theme-explorer-fas .file-actions, .explorer-frame .file-preview-other {
     text-align: center;
 }
-
-.theme-explorer-fas .file-thumb-progress .progress, .theme-explorer-fas .file-thumb-progress .progress-bar {
-    height: 13px;
-    font-size: 11px;
-    line-height: 13px;
-}
-
 .theme-explorer-fas .file-upload-indicator, .theme-explorer-fas .file-drag-handle {
     position: absolute;
     display: inline-block;
-    top: 0;
-    right: 3px;
+    bottom: 8px;
+    right: 4px;
     width: 16px;
     height: 16px;
     font-size: 16px;
 }
-
 .theme-explorer-fas .file-thumb-progress .progress, .theme-explorer-fas .explorer-caption {
     display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
-
-.theme-explorer-fas .explorer-frame td {
-    vertical-align: middle;
-    text-align: left;
+.theme-explorer-fas .file-thumb-progress .progress {
+    margin-top: 5px;
 }
-
-.theme-explorer-fas .explorer-frame .kv-file-content {
-    width: 80px;
-    height: 80px;
+.theme-explorer-fas .explorer-caption,
+.theme-explorer-fas .file-footer-buttons {
     padding: 5px;
 }
-
-.theme-explorer-fas .file-actions-cell {
-    position: relative;
-    width: 120px;
-    padding: 0;
+.theme-explorer-fas .file-footer-buttons {
+    text-align: right;
 }
-
-.theme-explorer-fas .file-thumb-progress .progress {
-    margin-top: 5px;
-}
-
 .theme-explorer-fas .explorer-caption {
     color: #777;
+    padding-top: 5px;
 }
-
 .theme-explorer-fas .kvsortable-ghost {
     opacity: 0.6;
     background: #e1edf7;
     border: 2px solid #a1abff;
 }
-
 .theme-explorer-fas .file-preview .table {
     margin: 0;
 }
-
 .theme-explorer-fas .file-error-message ul {
     padding: 5px 0 0 20px;
 }
-
 .explorer-frame .file-preview-text {
     display: inline-block;
     color: #428bca;
@@ -83,75 +72,85 @@
     padding: 8px;
     resize: none;
 }
-
 .explorer-frame .file-preview-html {
     display: inline-block;
     border: 1px solid #ddd;
     padding: 8px;
     overflow: auto;
 }
-
 .explorer-frame .file-other-icon {
     font-size: 2.6em;
 }
-
-@media only screen and (max-width: 767px) {
-    .theme-explorer-fas .table, .theme-explorer-fas .table tbody, .theme-explorer-fas .table tr, .theme-explorer-fas .table td {
-        display: block;
-        width: 100% !important;
+.explorer-frame:hover {
+    background-color: #f5f5f5;
+}
+.theme-explorer-fas .file-preview-frame samp {
+    font-size: 0.9rem;
+}
+.theme-explorer-fas .explorer-frame .kv-file-content {
+    width: 160px;
+    height: 80px;
+    padding: 5px;
+    text-align: left;
+}
+.theme-explorer-fas .file-details-cell {
+    width: 60%;
+    font-size: 0.95rem;
+    text-align: left;
+    margin-right: auto;
+}
+.theme-explorer-fas .file-actions-cell {
+    position: relative;
+    height: 80px;
+    width: 200px;
+}
+/*noinspection CssOverwrittenProperties*/
+.file-zoom-dialog .explorer-frame .file-other-icon {
+    font-size: 22em;
+    font-size: 50vmin;
+}
+@media only screen and (max-width: 1249px) {
+    .theme-explorer-fas .file-preview-frame .file-details-cell {
+        width: 40%;
     }
-
-    .theme-explorer-fas .table {
-        border: none;
+}
+@media only screen and (max-width: 1023px) {
+    .theme-explorer-fas .file-preview-frame .file-details-cell {
+        width: 30%;
     }
-
-    .theme-explorer-fas .table tr {
-        margin-top: 5px;
+}
+@media only screen and (max-width: 767px) {
+    .theme-explorer-fas .file-preview-frame .file-details-cell {
+        width: 200px;
     }
-
-    .theme-explorer-fas .table tr:first-child {
-        margin-top: 0;
+}
+@media only screen and (max-width: 575px) {
+    .theme-explorer-fas .file-preview-frame {
+        flex-direction: column;
     }
 
-    .theme-explorer-fas .table td {
+    .theme-explorer-fas .file-preview-frame .kv-file-content {
+        width: auto;
         text-align: center;
     }
 
-    .theme-explorer-fas .table .kv-file-content {
-        border-bottom: none;
-        padding: 4px;
-        margin: 0;
-    }
-
-    .theme-explorer-fas .table .kv-file-content .file-preview-image {
-        max-width: 100%;
-        font-size: 20px;
-    }
-
     .theme-explorer-fas .file-details-cell {
-        border-top: none;
-        border-bottom: none;
-        padding-top: 0;
-        margin: 0;
+        width: 100px;
+        text-align: center;
+        margin-right: 0;
     }
 
+    .theme-explorer-fas .file-preview-frame .kv-file-content,
+    .theme-explorer-fas .file-details-cell,
     .theme-explorer-fas .file-actions-cell {
-        border-top: none;
-        padding-bottom: 4px;
+        width: 100%;
     }
 
-    .theme-explorer-fas .explorer-frame .explorer-caption {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        left: 0;
-        right: 0;
-        margin: auto;
+    .theme-explorer-fas .file-actions-cell {
+        height: auto;
     }
-}
 
-/*noinspection CssOverwrittenProperties*/
-.file-zoom-dialog .explorer-frame .file-other-icon {
-    font-size: 22em;
-    font-size: 50vmin;
+    .theme-explorer-fas .file-footer-buttons {
+        text-align: left;
+    }
 }

themes/explorer-fas/theme.js

@@ -2,7 +2,7 @@
  * bootstrap-fileinput v5.1.0
  * http://plugins.krajee.com/file-input
  *
- * Krajee Explorer Font Awesome theme configuration for bootstrap-fileinput. 
+ * Krajee Explorer Font Awesome theme configuration for bootstrap-fileinput.
  * Load this theme file after loading `fileinput.js`. Ensure that
  * font awesome assets and CSS are loaded on the page as well.
  *
@@ -14,37 +14,20 @@
  */
 (function ($) {
     'use strict';
-    var teTagBef = '<tr class="file-preview-frame {frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
-        ' data-fileid="{fileid}" data-template="{template}"', teContent = '<td class="kv-file-content">\n';
     $.fn.fileinputThemes['explorer-fas'] = {
         layoutTemplates: {
-            preview: '<div class="file-preview {class}">\n' +
-            '    {close}' +
-            '    <div class="{dropClass}">\n' +
-            '    <table class="table table-bordered table-hover"><tbody class="file-preview-thumbnails">\n' +
-            '    </tbody></table>\n' +
-            '    <div class="clearfix"></div>' +
-            '    <div class="file-preview-status text-center text-success"></div>\n' +
-            '    <div class="kv-fileinput-error"></div>\n' +
-            '    </div>\n' +
-            '</div>',
-            footer: '<td class="file-details-cell"><div class="explorer-caption" title="{caption}">{caption}</div> ' +
-            '{size}{progress}</td><td class="file-actions-cell">{indicator} {actions}</td>',
+            footer: '<div class="file-details-cell">' +
+                '<div class="explorer-caption" title="{caption}">{caption}</div> ' + '{size}{progress}' +
+                '</div>' +
+                '<div class="file-actions-cell">{indicator} {actions}</div>',
             actions: '{drag}\n' +
-            '<div class="file-actions">\n' +
-            '    <div class="file-footer-buttons">\n' +
-            '        {upload} {download} {delete} {zoom} {other} ' +
-            '    </div>\n' +
-            '</div>',
-            zoomCache: '<tr style="display:none" class="kv-zoom-cache-theme"><td>' +
-            '<table class="kv-zoom-cache">{zoomContent}</table></td></tr>',
+                '<div class="file-actions">\n' +
+                '    <div class="file-footer-buttons">\n' +
+                '        {upload} {download} {delete} {zoom} {other} ' +
+                '    </div>\n' +
+                '</div>',
             fileIcon: '<i class="fas fa-file kv-caption-icon"></i> '
         },
-        previewMarkupTags: {
-            tagBefore1: teTagBef + '>' + teContent,
-            tagBefore2: teTagBef + ' title="{caption}">' + teContent,
-            tagAfter: '</td>\n{footer}</tr>\n'
-        },
         previewSettings: {
             html: {width: '100px', height: '60px'},
             text: {width: '100px', height: '60px'},

themes/explorer/theme.css

@@ -10,69 +10,58 @@
  * Licensed under the BSD-3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
+.theme-explorer .file-preview-frame {
+    border: 1px solid #ddd;
+    margin: 2px 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.theme-explorer .file-actions,
 .theme-explorer .file-upload-indicator, .theme-explorer .file-drag-handle, .theme-explorer .explorer-frame .kv-file-content, .theme-explorer .file-actions, .explorer-frame .file-preview-other {
     text-align: center;
 }
-
-.theme-explorer .file-thumb-progress .progress, .theme-explorer .file-thumb-progress .progress-bar {
-    height: 13px;
-    font-size: 11px;
-    line-height: 13px;
-}
-
 .theme-explorer .file-upload-indicator, .theme-explorer .file-drag-handle {
     position: absolute;
     display: inline-block;
-    top: 0;
-    right: 3px;
+    bottom: 8px;
+    right: 4px;
     width: 16px;
     height: 16px;
     font-size: 16px;
 }
-
 .theme-explorer .file-thumb-progress .progress, .theme-explorer .explorer-caption {
     display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
-
-.theme-explorer .explorer-frame td {
-    vertical-align: middle;
-    text-align: left;
+.theme-explorer .file-thumb-progress .progress {
+    margin-top: 5px;
 }
-
-.theme-explorer .explorer-frame .kv-file-content {
-    width: 80px;
-    height: 80px;
+.theme-explorer .explorer-caption,
+.theme-explorer .file-footer-buttons {
     padding: 5px;
 }
-
-.theme-explorer .file-actions-cell {
-    position: relative;
-    width: 120px;
-    padding: 0;
-}
-
-.theme-explorer .file-thumb-progress .progress {
-    margin-top: 5px;
+.theme-explorer .file-footer-buttons {
+    text-align: right;
 }
-
 .theme-explorer .explorer-caption {
     color: #777;
+    padding-top: 5px;
 }
-
 .theme-explorer .kvsortable-ghost {
     opacity: 0.6;
     background: #e1edf7;
     border: 2px solid #a1abff;
 }
-
 .theme-explorer .file-preview .table {
     margin: 0;
 }
-
 .theme-explorer .file-error-message ul {
     padding: 5px 0 0 20px;
 }
-
 .explorer-frame .file-preview-text {
     display: inline-block;
     color: #428bca;
@@ -82,75 +71,85 @@
     padding: 8px;
     resize: none;
 }
-
 .explorer-frame .file-preview-html {
     display: inline-block;
     border: 1px solid #ddd;
     padding: 8px;
     overflow: auto;
 }
-
 .explorer-frame .file-other-icon {
     font-size: 2.6em;
 }
-
-@media only screen and (max-width: 767px) {
-    .theme-explorer .table, .theme-explorer .table tbody, .theme-explorer .table tr, .theme-explorer .table td {
-        display: block;
-        width: 100% !important;
+.explorer-frame:hover {
+    background-color: #f5f5f5;
+}
+.theme-explorer .file-preview-frame samp {
+    font-size: 0.9rem;
+}
+.theme-explorer .explorer-frame .kv-file-content {
+    width: 160px;
+    height: 80px;
+    padding: 5px;
+    text-align: left;
+}
+.theme-explorer .file-details-cell {
+    width: 60%;
+    font-size: 0.95rem;
+    text-align: left;
+    margin-right: auto;
+}
+.theme-explorer .file-actions-cell {
+    position: relative;
+    height: 80px;
+    width: 200px;
+}
+/*noinspection CssOverwrittenProperties*/
+.file-zoom-dialog .explorer-frame .file-other-icon {
+    font-size: 22em;
+    font-size: 50vmin;
+}
+@media only screen and (max-width: 1249px) {
+    .theme-explorer .file-preview-frame .file-details-cell {
+        width: 40%;
     }
-
-    .theme-explorer .table {
-        border: none;
+}
+@media only screen and (max-width: 1023px) {
+    .theme-explorer .file-preview-frame .file-details-cell {
+        width: 30%;
     }
-
-    .theme-explorer .table tr {
-        margin-top: 5px;
+}
+@media only screen and (max-width: 767px) {
+    .theme-explorer .file-preview-frame .file-details-cell {
+        width: 200px;
     }
-
-    .theme-explorer .table tr:first-child {
-        margin-top: 0;
+}
+@media only screen and (max-width: 575px) {
+    .theme-explorer .file-preview-frame {
+        flex-direction: column;
     }
 
-    .theme-explorer .table td {
+    .theme-explorer .file-preview-frame .kv-file-content {
+        width: auto;
         text-align: center;
     }
 
-    .theme-explorer .table .kv-file-content {
-        border-bottom: none;
-        padding: 4px;
-        margin: 0;
-    }
-
-    .theme-explorer .table .kv-file-content .file-preview-image {
-        max-width: 100%;
-        font-size: 20px;
-    }
-
     .theme-explorer .file-details-cell {
-        border-top: none;
-        border-bottom: none;
-        padding-top: 0;
-        margin: 0;
+        width: 100px;
+        text-align: center;
+        margin-right: 0;
     }
 
+    .theme-explorer .file-preview-frame .kv-file-content,
+    .theme-explorer .file-details-cell,
     .theme-explorer .file-actions-cell {
-        border-top: none;
-        padding-bottom: 4px;
+        width: 100%;
     }
 
-    .theme-explorer .explorer-frame .explorer-caption {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        left: 0;
-        right: 0;
-        margin: auto;
+    .theme-explorer .file-actions-cell {
+        height: auto;
     }
-}
 
-/*noinspection CssOverwrittenProperties*/
-.file-zoom-dialog .explorer-frame .file-other-icon {
-    font-size: 22em;
-    font-size: 50vmin;
-}
+    .theme-explorer .file-footer-buttons {
+        text-align: left;
+    }
+}

themes/explorer/theme.js

@@ -12,35 +12,18 @@
  */
 (function ($) {
     "use strict";
-    var teTagBef = '<tr class="file-preview-frame {frameClass}" id="{previewId}" data-fileindex="{fileindex}" data-fileid="{fileid}"' +
-        ' data-template="{template}"', teContent = '<td class="kv-file-content">\n';
     $.fn.fileinputThemes.explorer = {
         layoutTemplates: {
-            preview: '<div class="file-preview {class}">\n' +
-            '    {close}' +
-            '    <div class="{dropClass}">\n' +
-            '    <table class="table table-bordered table-hover"><tbody class="file-preview-thumbnails">\n' +
-            '    </tbody></table>\n' +
-            '    <div class="clearfix"></div>' +
-            '    <div class="file-preview-status text-center text-success"></div>\n' +
-            '    <div class="kv-fileinput-error"></div>\n' +
-            '    </div>\n' +
-            '</div>',
-            footer: '<td class="file-details-cell"><div class="explorer-caption" title="{caption}">{caption}</div> ' +
-            '{size}{progress}</td><td class="file-actions-cell">{indicator} {actions}</td>',
+            footer: '<div class="file-details-cell">' +
+                '<div class="explorer-caption" title="{caption}">{caption}</div> ' + '{size}{progress}' +
+                '</div>' +
+                '<div class="file-actions-cell">{indicator} {actions}</div>',
             actions: '{drag}\n' +
-            '<div class="file-actions">\n' +
-            '    <div class="file-footer-buttons">\n' +
-            '        {upload} {download} {delete} {zoom} {other} ' +
-            '    </div>\n' +
-            '</div>',
-            zoomCache: '<tr style="display:none" class="kv-zoom-cache-theme"><td>' +
-            '<table class="kv-zoom-cache">{zoomContent}</table></td></tr>'
-        },
-        previewMarkupTags: {
-            tagBefore1: teTagBef + '>' + teContent,
-            tagBefore2: teTagBef + ' title="{caption}">' + teContent,
-            tagAfter: '</td>\n{footer}</tr>\n'
+                '<div class="file-actions">\n' +
+                '    <div class="file-footer-buttons">\n' +
+                '        {upload} {download} {delete} {zoom} {other} ' +
+                '    </div>\n' +
+                '</div>',
         },
         previewSettings: {
             html: {width: "100px", height: "60px"},

themes/explorer/theme.min.js

@@ -9,4 +9,4 @@
  *
  * Licensed under the BSD-3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
- */!function(e){"use strict";var t='<tr class="file-preview-frame {frameClass}" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}" data-fileid="{fileid}"',i='<td class="kv-file-content">\n';e.fn.fileinputThemes.explorer={layoutTemplates:{preview:'<div class="file-preview {class}">\n    {close}    <div class="{dropClass}">\n    <table class="table table-bordered table-hover"><tbody class="file-preview-thumbnails">\n    </tbody></table>\n    <div class="clearfix"></div>    <div class="file-preview-status text-center text-success"></div>\n    <div class="kv-fileinput-error"></div>\n    </div>\n</div>',footer:'<td class="file-details-cell"><div class="explorer-caption" title="{caption}">{caption}</div> {size}{progress}</td><td class="file-actions-cell">{indicator} {actions}</td>',actions:'{drag}\n<div class="file-actions">\n    <div class="file-footer-buttons">\n        {upload} {download} {delete} {zoom} {other}     </div>\n</div>',zoomCache:'<tr style="display:none" class="kv-zoom-cache-theme"><td><table class="kv-zoom-cache">{zoomContent}</table></td></tr>'},previewMarkupTags:{tagBefore1:t+">"+i,tagBefore2:t+' title="{caption}">'+i,tagAfter:"</td>\n{footer}</tr>\n"},previewSettings:{html:{width:"100px",height:"60px"},text:{width:"100px",height:"60px"},video:{width:"auto",height:"60px"},audio:{width:"auto",height:"60px"},flash:{width:"100%",height:"60px"},object:{width:"100%",height:"60px"},pdf:{width:"100px",height:"60px"},other:{width:"100%",height:"60px"}},frameClass:"explorer-frame"}}(window.jQuery);
+ */!function(i){"use strict";i.fn.fileinputThemes.explorer={layoutTemplates:{footer:'<div class="file-details-cell"><div class="explorer-caption" title="{caption}">{caption}</div> {size}{progress}</div><div class="file-actions-cell">{indicator} {actions}</div>',actions:'{drag}\n<div class="file-actions">\n    <div class="file-footer-buttons">\n        {upload} {download} {delete} {zoom} {other}     </div>\n</div>'},previewSettings:{html:{width:"100px",height:"60px"},text:{width:"100px",height:"60px"},video:{width:"auto",height:"60px"},audio:{width:"auto",height:"60px"},flash:{width:"100%",height:"60px"},object:{width:"100%",height:"60px"},pdf:{width:"100px",height:"60px"},other:{width:"100%",height:"60px"}},frameClass:"explorer-frame"}}(window.jQuery);