Fix #1738: Zoom preview description and styling enhancements

CHANGE.md

@@ -5,6 +5,13 @@ Change Log: `bootstrap-fileinput`
 
 **Date**: _under development_
 
+- (enh #1738): Enhancements to zoomed preview to include additional description and better title styling.
+  - The `initialPreviewConfig` will include an additional property `description`
+  - The modal layout template will include a `kv-zoom-description` container which will render the description from `initialPreviewConfig`. This container will be hidden if no description found.
+  - The modal layout template will include `kv-zoom-caption` container which will render the `caption` or `filename` from `initialPreviewConfig`. If that is not found it will default to `msgZoomModalHeading`.
+  - The modal layout template will include `kv-zoom-size` container which will render the `size` as set in `initialPreviewConfig`.
+  - The description will be shown as a bubble text over the image/content.
+  - Additional new property `showDescriptionClose` (boolean). Will show a close icon to close the description bubble text when set to `true`. Defaults to `true`.
 - (enh #1737): Configurable file size units and bitrate units. New plugin properties configurable and translateable via locale language files.
   - `sizeUnits` defaults to `['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']`
   - `bitRateUnits` defaults to `['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s', 'EB/s', 'ZB/s', 'YB/s']`

css/fileinput-rtl.css

@@ -29,6 +29,10 @@
     text-align: right;
 }
 
+.kv-rtl .file-zoom-dialog .kv-desc-hide {
+    float: left;
+}
+
 .kv-rtl {
     direction: rtl;
 }
@@ -54,12 +58,12 @@
 }
 
 .kv-rtl .btn-kv-prev {
-    right: 1px;
+    right: 0;
     left: auto;
 }
 
 .kv-rtl .btn-kv-next {
-    left: 1px;
+    left: 0;
     right: auto;
 }
 

css/fileinput.css

@@ -399,63 +399,78 @@ input[type=file].file-loading {
 }
 
 .file-zoom-dialog .btn-navigate {
+    margin: 0 0.1rem;
     padding: 0;
-    margin: -1.2rem 0.1rem 0;
     font-size: 1.2rem;
     width: 2.4rem;
     height: 2.4rem;
-    outline: none;
     top: 50%;
     border-radius: 50%;
-    opacity: 0.8;
-    background-color: #6c757d;
-    border-color: #6c757d;
-    color: #000;
+    text-align:center;
 }
 
 .btn-navigate * {
     width: auto;
 }
 
-.file-zoom-dialog .btn-navigate:hover,
-.file-zoom-dialog .btn-navigate:focus {
-    color: #fff;
-    background-color: #5c636a;
-    border-color: #565e64;
-}
-
-.file-zoom-dialog .btn-navigate:focus {
-    box-shadow: 0 0 0 0.25rem rgb(130 138 145 / 50%);
-}
-
-.file-zoom-dialog .btn-navigate[disabled] {
-    background-color: #999;
-    border-color: #999;
-    opacity: 0.4;
-}
-
 .file-zoom-dialog .floating-buttons {
     top: 5px;
     right: 10px;
 }
 
 .file-zoom-dialog .btn-kv-prev {
-    left: 1px;
+    left: 0;
 }
 
 .file-zoom-dialog .btn-kv-next {
-    right: 1px;
+    right: 0;
 }
 
-.file-zoom-dialog .kv-zoom-title {
-    font-weight: 300;
-    color: #999;
+.file-zoom-dialog .kv-zoom-caption {
     max-width: 50%;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
+.file-zoom-dialog .kv-zoom-header {
+    padding: 0.5rem;
+}
+
+.file-zoom-dialog .kv-zoom-body {
+    padding: 0.25rem 0.5rem 0.25rem 0;
+}
+
+.file-zoom-dialog .kv-zoom-description {
+    position: absolute;
+    opacity: 0.8;
+    font-size: 0.8rem;
+    background-color: #1a1a1a;
+    padding: 1rem;
+    text-align: center;
+    border-radius: 0.5rem;
+    color: #fff;
+    left: 15%;
+    right: 15%;
+    bottom: 15%;
+}
+
+.file-zoom-dialog .kv-desc-hide {
+    float: right;
+    color: #fff;
+    padding: 0 0.1rem;
+    background: none;
+    border: none;
+}
+
+.file-zoom-dialog .kv-desc-hide:hover {
+    opacity: 0.7;
+}
+
+.file-zoom-dialog .kv-desc-hide:focus {
+    opacity: 0.9;
+}
+
 .file-input-new .no-browse .form-control {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
@@ -526,7 +541,7 @@ input[type=file].file-loading {
     min-height: 100vh;
 }
 
-.file-zoom-fullscreen .modal-body {
+.file-zoom-fullscreen .kv-zoom-body {
     overflow-y: auto;
 }
 

js/fileinput.js

@@ -1673,7 +1673,7 @@
                 tModalMain, tModal, tProgress, tSize, tFooter, tActions, tActionDelete, tActionUpload, tActionDownload,
                 tActionZoom, tActionDrag, tIndicator, tTagBef, tTagBef1, tTagBef2, tTagAft, tGeneric, tHtml, tImage,
                 tText, tOffice, tGdocs, tVideo, tAudio, tFlash, tObject, tPdf, tOther, tStyle, tZoomCache, vDefaultDim,
-                tStats, tModalLabel, renderObject = function (type, mime) {
+                tStats, tModalLabel, tDescClose, renderObject = function (type, mime) {
                     return '<object class="kv-preview-data file-preview-' + type + '" title="{caption}" ' +
                         'data="{data}" type="' + mime + '"' + tStyle + '>\n' + $h.DEFAULT_PREVIEW + '\n</object>\n';
                 }, defBtnCss1 = 'btn btn-sm btn-kv ' + $h.defaultButtonCss();
@@ -1718,17 +1718,16 @@
                 'aria-labelledby="' + tModalLabel + '" {tabIndexConfig}></div>';
             tModal = '<div class="modal-dialog modal-lg{rtl}" role="document">\n' +
                 '  <div class="modal-content">\n' +
-                '    <div class="modal-header">\n' +
-                '      <h5 class="modal-title" id="' + tModalLabel + '">{heading}</h5>\n' +
-                '      <span class="kv-zoom-title"></span>\n' +
+                '    <div class="modal-header kv-zoom-header">\n' +
+                '      <h6 class="modal-title kv-zoom-title" id="' + tModalLabel + '"><span class="kv-zoom-caption"></span> <span class="kv-zoom-size"></span></h6>\n' +
                 '      <div class="kv-zoom-actions">{toggleheader}{fullscreen}{borderless}{close}</div>\n' +
                 '    </div>\n' +
-                '    <div class="modal-body">\n' +
-                '      <div class="floating-buttons"></div>\n' +
-                '      <div class="kv-zoom-body file-zoom-content {zoomFrameClass}"></div>\n' + '{prev} {next}\n' +
-                '    </div>\n' +
+                '    <div class="floating-buttons"></div>\n' +
+                '    <div class="kv-zoom-body file-zoom-content {zoomFrameClass}"></div>\n' + '{prev} {next}\n' +
+                '    <div class="kv-zoom-description"></div>\n' +
                 '  </div>\n' +
                 '</div>\n';
+            tDescClose = '<button type="button" class="kv-desc-hide" aria-label="Close">{closeIcon}</button>';
             tProgress = '<div class="progress">\n' +
                 '    <div class="{class}" role="progressbar"' +
                 ' aria-valuenow="{percent}" aria-valuemin="0" aria-valuemax="100" style="width:{percent}%;">\n' +
@@ -1805,6 +1804,7 @@
                     caption: tCaption,
                     modalMain: tModalMain,
                     modal: tModal,
+                    descriptionClose: tDescClose,
                     progress: tProgress,
                     stats: tStats,
                     size: tSize,
@@ -2830,7 +2830,6 @@
             return self._getLayoutTemplate('modal').setTokens({
                 'rtl': self.rtl ? ' kv-rtl' : '',
                 'zoomFrameClass': self.frameClass,
-                'heading': self.msgZoomModalHeading,
                 'prev': self._getZoomButton('prev'),
                 'next': self._getZoomButton('next'),
                 'toggleheader': self._getZoomButton('toggleheader'),
@@ -2920,7 +2919,7 @@
         },
         _maximizeZoomDialog: function () {
             var self = this, $modal = self.$modal, $head = $modal.find('.modal-header:visible'),
-                $foot = $modal.find('.modal-footer:visible'), $body = $modal.find('.modal-body'),
+                $foot = $modal.find('.modal-footer:visible'), $body = $modal.find('.kv-zoom-body'),
                 h = $(window).height(), diff = 0;
             $modal.addClass('file-zoom-fullscreen');
             if ($head && $head.length) {
@@ -2967,7 +2966,7 @@
         },
         _setZoomContent: function ($frame, navigate) {
             var self = this, $content, tmplt, body, title, $body, $dataEl, config, previewId = $frame.attr('id'),
-                $zoomPreview = self._getZoom(previewId), $modal = self.$modal, $tmp,
+                $zoomPreview = self._getZoom(previewId), $modal = self.$modal, $tmp, desc, $desc,
                 $btnFull = $modal.find('.btn-kv-fullscreen'), $btnBord = $modal.find('.btn-kv-borderless'), cap, size,
                 $btnTogh = $modal.find('.btn-kv-toggleheader'), dir = navigate === 'prev' ? 'Left' : 'Right',
                 slideIn = 'slideIn' + dir, slideOut = 'slideOut' + dir, parsed, zoomData = $frame.data('zoom');
@@ -2981,10 +2980,27 @@
             tmplt = $zoomPreview.attr('data-template') || 'generic';
             $content = $zoomPreview.find('.kv-file-content');
             body = $content.length ? '<span class="kv-spacer"></span>\n' + $content.html() : '';
-            cap = $frame.data('caption') || '';
+            cap = $frame.data('caption') || self.msgZoomModalHeading;
             size = $frame.data('size') || '';
-            title = cap + ' ' + size;
-            $modal.find('.kv-zoom-title').attr('title', $('<div/>').html(title).text()).html(title);
+            desc = $frame.data('description') || '';
+            $modal.find('.kv-zoom-caption').attr('title', cap).html(cap);
+            $modal.find('.kv-zoom-size').html(size);
+            $desc = $modal.find('.kv-zoom-description').hide();
+            if (desc) {
+                if (self.showDescriptionClose) {
+                    desc = self._getLayoutTemplate('descriptionClose').setTokens({
+                        closeIcon: self.previewZoomButtonIcons.close
+                    }) + '</button>' + desc;
+                }
+                $desc.show().html(desc);
+                if (self.showDescriptionClose) {
+                    self._handler($modal.find('.kv-desc-hide'), 'click', function () {
+                        $(this).parent().fadeOut('fast', function () {
+                            $modal.focus();
+                        });
+                    });
+                }
+            }
             $body = $modal.find('.kv-zoom-body');
             $modal.removeClass('kv-single-content');
             if (navigate) {
@@ -3024,7 +3040,7 @@
                 self._resizeZoomDialog(false);
             });
             self._handler($btnTogh, 'click', function () {
-                var $header = $modal.find('.modal-header'), $floatBar = $modal.find('.modal-body .floating-buttons'),
+                var $header = $modal.find('.modal-header'), $floatBar = $modal.find('.floating-buttons'),
                     ht, $actions = $header.find('.kv-zoom-actions'), resize = function (height) {
                         var $body = self.$modal.find('.kv-zoom-body'), h = self.zoomModalHeight;
                         if ($modal.hasClass('file-zoom-fullscreen')) {
@@ -4278,16 +4294,16 @@
             self._setThumbAttr(previewId, caption, fsize);
             self._initSortable();
         },
-        _setThumbAttr: function (id, caption, size) {
+        _setThumbAttr: function (id, caption, size, description) {
             var self = this, $frame = self._getFrame(id);
             if ($frame.length) {
                 size = size && size > 0 ? self._getSize(size) : '';
-                $frame.data({'caption': caption, 'size': size});
+                $frame.data({'caption': caption, 'size': size, 'description': description || ''});
             }
         },
         _setInitThumbAttr: function () {
             var self = this, data = self.previewCache.data, len = self.previewCache.count(true), config,
-                caption, size, previewId;
+                caption, size, description, previewId;
             if (len === 0) {
                 return;
             }
@@ -4296,7 +4312,8 @@
                 previewId = self.previewInitId + '-' + $h.INIT_FLAG + i;
                 caption = $h.ifSet('caption', config, $h.ifSet('filename', config));
                 size = $h.ifSet('size', config);
-                self._setThumbAttr(previewId, caption, size);
+                description = $h.ifSet('description', config);
+                self._setThumbAttr(previewId, caption, size, description);
             }
         },
         _slugDefault: function (text) {
@@ -5986,6 +6003,7 @@
         showConsoleLogs: false,
         browseOnZoneClick: false,
         autoReplace: false,
+        showDescriptionClose: true,
         autoOrientImage: function () { // applicable for JPEG images only and non ios safari
             var ua = window.navigator.userAgent, webkit = !!ua.match(/WebKit/i),
                 iOS = !!ua.match(/iP(od|ad|hone)/i), iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
@@ -6034,8 +6052,8 @@
             close: '<i class="bi-x-lg"></i>'
         },
         previewZoomButtonClasses: {
-            prev: 'btn btn-navigate',
-            next: 'btn btn-navigate',
+            prev: 'btn btn-default btn-outline-secondary btn-navigate',
+            next: 'btn btn-default btn-outline-secondary btn-navigate',
             toggleheader: defBtnCss1,
             fullscreen: defBtnCss1,
             borderless: defBtnCss1,

scss/fileinput-rtl.scss

@@ -64,6 +64,10 @@ $border: 1px !default;
         @extend %set_text_right;
     }
 
+    .kv-desc-hide {
+        float: left;
+    }
+
     .file-error-message {
         pre {
             @extend %set_text_right;
@@ -79,12 +83,12 @@ $border: 1px !default;
     }
 
     .btn-kv-prev {
-        right: multiply($pad, 0.2);
+        right: 0;
         left: auto;
     }
 
     .btn-kv-next {
-        left: multiply($pad, 0.2);
+        left: 0;
         right: auto;
     }
 

scss/fileinput.scss

@@ -34,16 +34,7 @@ $silver-chalice: #aaa !default;
 $viking: #5acde2 !default;
 $curious-blue: #1c94c4 !default;
 $link-water: #d9edf7 !default;
-$gray-1=
-#5c636a
-
-!default
-;
-$gray-2=
-#6c757d
-
-!default
-;
+$gray-1: #6c757d !default;
 
 //fonts
 $font-0: Impact !default;
@@ -66,782 +57,800 @@ $border: 1px !default;
 
 //operations
 @function multiply($pixels, $multiplier) {
-    @return $pixels * $multiplier;
+  @return $pixels * $multiplier;
 }
 
 //@extend-elements
 %set-invisible {
-    width: 0;
-    height: 0;
+  width: 0;
+  height: 0;
 }
 
 %set-hidden {
-    display: none;
+  display: none;
 }
 
 %set-absolute {
-    position: absolute;
+  position: absolute;
 }
 
 %set-relative {
-    position: relative;
+  position: relative;
 }
 
 %set-text-left {
-    text-align: left;
+  text-align: left;
 }
 
 %set-error {
-    @extend %set-text-left;
-    margin: 0;
+  @extend %set-text-left;
+  margin: 0;
 }
 
 %set-indicator {
-    float: left;
-    margin-top: multiply($pad, 2);
-    width: multiply($pad, 3.2);
-    height: multiply($pad, 3.2);
+  float: left;
+  margin-top: multiply($pad, 2);
+  width: multiply($pad, 3.2);
+  height: multiply($pad, 3.2);
 }
 
 %set-progress {
-    height: multiply($pad, 2.2);
-    font-size: multiply($pad, 1.8);
+  height: multiply($pad, 2.2);
+  font-size: multiply($pad, 1.8);
 }
 
 %set-caption {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: multiply($pad, 32);
-    height: multiply($pad, 3);
-    margin: auto;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: multiply($pad, 32);
+  height: multiply($pad, 3);
+  margin: auto;
 }
 
 %set-object {
-    max-width: 100%;
-    max-height: 100%;
-    width: auto;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
 }
 
 %set-object-video {
-    @extend %set-object;
-    height: 100%;
+  @extend %set-object;
+  height: 100%;
 }
 
 %set-object-default {
-    width: 100%;
+  width: 100%;
 }
 
 .kv-hidden {
-    @extend %set-hidden;
+  @extend %set-hidden;
 }
 
 .hide-content .kv-file-content {
-    @extend %set-hidden;
+  @extend %set-hidden;
 }
 
 .file-input {
-    @extend %set-relative;
+  @extend %set-relative;
 }
 
 .file-no-browse {
-    @extend %set-absolute;
-    left: 50%;
-    bottom: 20%;
-    width: 1px;
-    height: 1px;
-    font-size: 0;
-    opacity: 0;
-    border: none;
-    background: none;
-    outline: none;
-    box-shadow: none;
+  @extend %set-absolute;
+  left: 50%;
+  bottom: 20%;
+  width: 1px;
+  height: 1px;
+  font-size: 0;
+  opacity: 0;
+  border: none;
+  background: none;
+  outline: none;
+  box-shadow: none;
 }
 
 .file-loading {
-    input[type=file] {
-        @extend %set-invisible;
-    }
+  input[type=file] {
+    @extend %set-invisible;
+  }
 
-    &:before {
-        @extend %set-relative;
-        content: " Loading...";
-        display: inline-block;
-        padding-left: multiply($pad, 4);
-        line-height: multiply($pad, 3.2);
-        font-size: multiply($pad, 2.6);
-        font-variant: small-caps;
-        color: $mountain-mist;
-        background: transparent $url-0 top left no-repeat;
-    }
+  &:before {
+    @extend %set-relative;
+    content: " Loading...";
+    display: inline-block;
+    padding-left: multiply($pad, 4);
+    line-height: multiply($pad, 3.2);
+    font-size: multiply($pad, 2.6);
+    font-variant: small-caps;
+    color: $mountain-mist;
+    background: transparent $url-0 top left no-repeat;
+  }
 }
 
 input[type=file].file-loading {
-    @extend %set-invisible;
+  @extend %set-invisible;
 }
 
 .file-object {
-    margin: 0 0 (-$pad) 0;
-    padding: 0;
+  margin: 0 0 (-$pad) 0;
+  padding: 0;
 }
 
 .btn-file {
-    @extend %set-relative;
-    overflow: hidden;
+  @extend %set-relative;
+  overflow: hidden;
 
-    input[type=file] {
-        @extend %set-absolute;
-        top: 0;
-        left: 0;
-        min-width: 100%;
-        min-height: 100%;
-        text-align: right;
-        opacity: 0;
-        background: none repeat scroll 0 0 transparent;
-        cursor: inherit;
-        display: block;
-    }
+  input[type=file] {
+    @extend %set-absolute;
+    top: 0;
+    left: 0;
+    min-width: 100%;
+    min-height: 100%;
+    text-align: right;
+    opacity: 0;
+    background: none repeat scroll 0 0 transparent;
+    cursor: inherit;
+    display: block;
+  }
 
-    ::-ms-browse {
-        font-size: multiply($pad, 2000);
-        width: 100%;
-        height: 100%;
-    }
+  ::-ms-browse {
+    font-size: multiply($pad, 2000);
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .file-caption {
-    @extend %set-relative;
+  @extend %set-relative;
 
-    .file-caption-name {
-        width: 100%;
-        margin: 0;
-        padding: 0;
-        box-shadow: none;
-        border: none;
-        background: none;
-        outline: none;
-    }
+  .file-caption-name {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border: none;
+    background: none;
+    outline: none;
+  }
 
-    &.icon-visible {
-        .file-caption-icon {
-            display: inline-block;
-        }
+  &.icon-visible {
+    .file-caption-icon {
+      display: inline-block;
+    }
 
-        .file-caption-name {
-            padding-left: 1.875rem;
-        }
+    .file-caption-name {
+      padding-left: 1.875rem;
+    }
 
-        > .input-group-lg .file-caption-name {
-            padding-left: 2.1rem;
-        }
+    > .input-group-lg .file-caption-name {
+      padding-left: 2.1rem;
+    }
 
-        > .input-group-sm .file-caption-name {
-            padding-left: 1.5rem;
-        }
+    > .input-group-sm .file-caption-name {
+      padding-left: 1.5rem;
     }
+  }
 }
 
 .file-caption-icon {
-    @extend %set-hidden;
-    @extend %set-absolute;
-    left: multiply($pad, 1.6);
-    padding: 0.5rem;
+  @extend %set-hidden;
+  @extend %set-absolute;
+  left: multiply($pad, 1.6);
+  padding: 0.5rem;
 }
 
 .input-group-lg .file-caption-icon {
-    font-size: 1.25rem;
+  font-size: 1.25rem;
 }
 
 .input-group-sm .file-caption-icon {
-    font-size: 0.875rem;
-    padding: 0.25rem;
+  font-size: 0.875rem;
+  padding: 0.25rem;
 }
 
 .file-error-message {
-    color: $apple-blossom;
-    background-color: $vanilla-ice;
-    margin: $pad;
-    border: $border solid $oyster-pink;
-    border-radius: $radius;
-    padding: multiply($pad, 3);
-
-    pre {
-        @extend %set-error;
-        margin: $pad 0;
-    }
+  color: $apple-blossom;
+  background-color: $vanilla-ice;
+  margin: $pad;
+  border: $border solid $oyster-pink;
+  border-radius: $radius;
+  padding: multiply($pad, 3);
 
-    ul {
-        @extend %set-error;
-    }
+  pre {
+    @extend %set-error;
+    margin: $pad 0;
+  }
+
+  ul {
+    @extend %set-error;
+  }
 }
 
 .file-caption-disabled {
-    background-color: $gallery;
-    cursor: not-allowed;
-    opacity: 1;
+  background-color: $gallery;
+  cursor: not-allowed;
+  opacity: 1;
 }
 
 .file-preview {
-    @extend %set-relative;
-    border-radius: multiply($radius, 1.25);
-    border: $border solid $alto;
-    padding: multiply($pad, 1.6);
-    width: 100%;
-    margin-bottom: $pad;
-
-    .btn-xs {
-        padding: multiply($pad, 0.2) $pad;
-        font-size: multiply($pad, 2.4);
-        line-height: 1.5;
-        border-radius: multiply($radius, 0.75);
-    }
-
-    .fileinput-remove {
-        @extend %set-absolute;
-        top: multiply($pad, 0.2);
-        right: multiply($pad, 0.2);
-        line-height: multiply($pad, 2);
-    }
+  @extend %set-relative;
+  border-radius: multiply($radius, 1.25);
+  border: $border solid $alto;
+  padding: multiply($pad, 1.6);
+  width: 100%;
+  margin-bottom: $pad;
+
+  .btn-xs {
+    padding: multiply($pad, 0.2) $pad;
+    font-size: multiply($pad, 2.4);
+    line-height: 1.5;
+    border-radius: multiply($radius, 0.75);
+  }
+
+  .fileinput-remove {
+    @extend %set-absolute;
+    top: multiply($pad, 0.2);
+    right: multiply($pad, 0.2);
+    line-height: multiply($pad, 2);
+  }
 
-    .clickable {
-        cursor: pointer;
-    }
+  .clickable {
+    cursor: pointer;
+  }
 
-    .kv-zoom-cache {
-        display: none;
-    }
+  .kv-zoom-cache {
+    display: none;
+  }
 }
 
 .file-preview-image {
-    font: multiply($pad, 8) $font-0, $font-1, $font-2;
-    color: $green;
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%;
+  font: multiply($pad, 8) $font-0, $font-1, $font-2;
+  color: $green;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .krajee-default {
-    &.file-preview-frame {
-        @extend %set-relative;
-        margin: multiply($pad, 1.6);
-        border: $border solid $black-20;
-        box-shadow: 0 0 multiply($pad, 2) 0 $black-20;
-        padding: multiply($pad, 1.2);
-        float: left;
-        text-align: center;
-
-        .kv-file-content {
-            width: multiply($pad, 42.6);
-            height: multiply($pad, 32);
-
-            &.kv-pdf-rendered {
-                width: 400px;
-            }
-        }
-
-        .file-thumbnail-footer {
-            height: multiply($pad, 14);
-        }
-
-        &:not(.file-preview-error):hover {
-            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-frame {
+    @extend %set-relative;
+    margin: multiply($pad, 1.6);
+    border: $border solid $black-20;
+    box-shadow: 0 0 multiply($pad, 2) 0 $black-20;
+    padding: multiply($pad, 1.2);
+    float: left;
+    text-align: center;
 
-    .file-preview-other-frame {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
+    .kv-file-content {
+      width: multiply($pad, 42.6);
+      height: multiply($pad, 32);
 
-    .file-preview-text {
-        display: block;
-        color: $boston-blue;
-        border: $border solid $alto;
-        font-family: $font-3, $font-4, $font-5, $font-6, $font-7;
-        outline: none;
-        padding: multiply($pad, 1.6);
-        resize: none;
+      &.kv-pdf-rendered {
+        width: 400px;
+      }
     }
 
-    .file-preview-html {
-        border: $border solid $alto;
-        padding: multiply($pad, 1.6);
-        overflow: auto;
+    .file-thumbnail-footer {
+      height: multiply($pad, 14);
     }
 
-    .file-actions {
-        @extend %set-text-left;
+    &:not(.file-preview-error):hover {
+      border: $border solid $black-30;
+      box-shadow: 0 0 multiply($pad, 2) 0 $black-40;
     }
 
-    .file-other-error {
-        @extend %set-text-left;
+    &[data-template="audio"] .kv-file-content {
+      width: 240px;
+      height: 55px;
     }
+  }
 
-    .file-other-icon {
-        font-size: 6em;
-        line-height: 1;
-    }
+  .file-preview-other-frame {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-    .file-footer-buttons {
-        float: right;
-    }
+  .file-preview-text {
+    display: block;
+    color: $boston-blue;
+    border: $border solid $alto;
+    font-family: $font-3, $font-4, $font-5, $font-6, $font-7;
+    outline: none;
+    padding: multiply($pad, 1.6);
+    resize: none;
+  }
 
-    .file-footer-caption {
-        display: block;
-        text-align: center;
-        padding-top: multiply($pad, 0.8);
-        font-size: multiply($pad, 2.2);
-        color: $tapa;
-        margin-bottom: multiply($pad, 3);
-    }
+  .file-preview-html {
+    border: $border solid $alto;
+    padding: multiply($pad, 1.6);
+    overflow: auto;
+  }
 
-    .file-preview-error {
-        opacity: 0.65;
-        box-shadow: none;
-    }
+  .file-actions {
+    @extend %set-text-left;
+  }
 
-    .file-drag-handle {
-        @extend %set-indicator;
-    }
+  .file-other-error {
+    @extend %set-text-left;
+  }
 
-    .file-upload-indicator {
-        @extend %set-indicator;
-    }
+  .file-other-icon {
+    font-size: 6em;
+    line-height: 1;
+  }
 
-    .file-thumb-progress {
-        @extend %set-absolute;
-        height: multiply($pad, 2.2);
-        top: multiply($pad, 7.4);
-        left: 0;
-        right: 0;
-
-        .progress {
-            @extend %set-progress;
-            color: $celeste;
-        }
-
-        .progress-bar {
-            @extend %set-progress;
-            font-family: Verdana, Helvetica, sans-serif;
-        }
-    }
+  .file-footer-buttons {
+    float: right;
+  }
 
-    .file-thumbnail-footer {
-        @extend %set-relative;
-    }
+  .file-footer-caption {
+    display: block;
+    text-align: center;
+    padding-top: multiply($pad, 0.8);
+    font-size: multiply($pad, 2.2);
+    color: $tapa;
+    margin-bottom: multiply($pad, 3);
+  }
 
-    .file-caption-info {
-        @extend %set-caption;
-    }
+  .file-preview-error {
+    opacity: 0.65;
+    box-shadow: none;
+  }
 
-    .file-size-info {
-        @extend %set-caption;
-    }
+  .file-drag-handle {
+    @extend %set-indicator;
+  }
 
-    &.kvsortable-ghost {
-        background: $mystic;
-        border: multiply($border, 2) solid $perano;
-    }
+  .file-upload-indicator {
+    @extend %set-indicator;
+  }
+
+  .file-thumb-progress {
+    @extend %set-absolute;
+    height: multiply($pad, 2.2);
+    top: multiply($pad, 7.4);
+    left: 0;
+    right: 0;
 
-    .file-preview-other:hover {
-        opacity: 0.8;
+    .progress {
+      @extend %set-progress;
+      color: $celeste;
     }
 
-    .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
-        color: $black;
+    .progress-bar {
+      @extend %set-progress;
+      font-family: Verdana, Helvetica, sans-serif;
     }
+  }
+
+  .file-thumbnail-footer {
+    @extend %set-relative;
+  }
+
+  .file-caption-info {
+    @extend %set-caption;
+  }
+
+  .file-size-info {
+    @extend %set-caption;
+  }
+
+  &.kvsortable-ghost {
+    background: $mystic;
+    border: multiply($border, 2) solid $perano;
+  }
+
+  .file-preview-other:hover {
+    opacity: 0.8;
+  }
+
+  .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
+    color: $black;
+  }
 }
 
 .file-upload-stats {
-    font-size: 9px;
-    text-align: center;
-    width: 100%;
+  font-size: 9px;
+  text-align: center;
+  width: 100%;
 }
 
 .kv-upload-progress {
-    .progress {
-        height: multiply($pad, 4);
-        line-height: multiply($pad, 4);
-        margin: multiply($pad, 2) 0;
-        overflow: hidden;
-        color: $celeste;
-    }
+  .progress {
+    height: multiply($pad, 4);
+    line-height: multiply($pad, 4);
+    margin: multiply($pad, 2) 0;
+    overflow: hidden;
+    color: $celeste;
+  }
 
-    .progress-bar {
-        height: multiply($pad, 4);
-        font-family: Verdana, Helvetica, sans-serif;
-    }
+  .progress-bar {
+    height: multiply($pad, 4);
+    font-family: Verdana, Helvetica, sans-serif;
+  }
 
-    .file-upload-stats {
-        font-size: 11px;
-        margin: -10px 0 5px;
-    }
+  .file-upload-stats {
+    font-size: 11px;
+    margin: -10px 0 5px;
+  }
 }
 
 .file-thumb-progress {
-    .progress {
-        background-color: #ccc;
-    }
+  .progress {
+    background-color: #ccc;
+  }
 
-    .progress-bar {
-        font-size: 0.7rem;
-        font-family: Verdana, Helvetica, sans-serif;
-    }
+  .progress-bar {
+    font-size: 0.7rem;
+    font-family: Verdana, Helvetica, sans-serif;
+  }
 }
 
 .file-zoom-dialog {
-    .file-other-icon {
-        //noinspection CssOverwrittenProperties
-        font-size: 22em;
-        //noinspection CssOverwrittenProperties
-        font-size: 50vmin;
-    }
+  .file-other-icon {
+    //noinspection CssOverwrittenProperties
+    font-size: 22em;
+    //noinspection CssOverwrittenProperties
+    font-size: 50vmin;
+  }
+
+  .modal-dialog {
+    @extend %set-relative;
+    width: auto;
+  }
 
-    .modal-dialog {
-        @extend %set-relative;
-        width: auto;
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &:before {
+      @extend %set-hidden;
     }
 
-    .modal-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+    &:after {
+      @extend %set-hidden;
+    }
+  }
 
-        &:before {
-            @extend %set-hidden;
-        }
+  .btn-navigate {
+    @extend %set-absolute;
+    margin: -1.2rem 0.1rem 0;
+    padding: 0;
+    font-size: 1.2rem;
+    width: 2.4rem;
+    height: 2.4rem;
+    top: 50%;
+    border-radius: 50%;
+    text-align: center;
 
-        &:after {
-            @extend %set-hidden;
-        }
+    * {
+      width: auto;
     }
+  }
 
-    .btn-navigate {
-        @extend %set-absolute;
-        padding: 0;
-        margin: -1.2rem 0.1rem 0;
-        font-size: 1.2rem;
-        width: 2.4rem;
-        height: 2.4rem;
-        top: 50%;
-        border-radius: 50%;
-        opacity: 0.8;
-        background-color: $gray-1;
-        border-color: $gray-1;
-        color: $black;
-
-        &:hover, &:focus {
-            color: $white;
-            background-color: $gray-2;
-            border-color: $gray-2;
-        }
-
-        &:focus {
-            box-shadow: 0 0 0 0.25rem rgb(130 138 145 / 50%);
-        }
-
-        &[disabled] {
-            background-color: $mountain-mist;
-            border-color: $mountain-mist;
-            opacity: 0.4;
-        }
-    }
+  .floating-buttons {
+    @extend %set-absolute;
+    top: $pad;
+    right: multiply($pad, 2);
+  }
 
-    .floating-buttons {
-        @extend %set-absolute;
-        top: $pad;
-        right: multiply($pad, 2);
-    }
+  .btn-kv-prev {
+    left: 0;
+  }
 
-    .btn-kv-prev {
-        left: multiply($pad, 0.2);
-    }
+  .btn-kv-next {
+    right: 0;
+  }
 
-    .btn-kv-next {
-        right: multiply($pad, 0.2);
-    }
+  .kv-zoom-caption {
+    max-width: 50%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
-    .kv-zoom-title {
-        font-weight: 300;
-        color: $mountain-mist;
-        max-width: 50%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
+  .kv-zoom-header {
+    padding: 0.5rem;
+  }
+
+  .kv-zoom-body {
+    padding: 0.25rem 0.5rem 0.25rem 0;
+  }
+
+  .kv-zoom-description {
+    position: absolute;
+    opacity: 0.8;
+    font-size: 0.8rem;
+    background-color: #1a1a1a;
+    padding: 1rem;
+    text-align: center;
+    border-radius: 0.5rem;
+    color: #fff;
+    left: 15%;
+    right: 15%;
+    bottom: 15%;
+  }
+
+  .kv-desc-hide {
+    float: right;
+    color: #fff;
+    padding: 0 0.1rem;
+    background: none;
+    border: none;
+  }
+
+  .kv-desc-hide:hover,
+  .kv-desc-hide:focus {
+    opacity: 0.7;
+  }
 }
 
 .file-input-new {
-    .file-preview {
-        @extend %set-hidden;
-    }
+  .file-preview {
+    @extend %set-hidden;
+  }
 
-    .close {
-        @extend %set-hidden;
-    }
+  .close {
+    @extend %set-hidden;
+  }
 
-    .glyphicon-file {
-        @extend %set-hidden;
-    }
+  .glyphicon-file {
+    @extend %set-hidden;
+  }
 
-    .fileinput-remove-button {
-        @extend %set-hidden;
-    }
+  .fileinput-remove-button {
+    @extend %set-hidden;
+  }
 
-    .fileinput-upload-button {
-        @extend %set-hidden;
-    }
+  .fileinput-upload-button {
+    @extend %set-hidden;
+  }
 
-    .no-browse {
-        .input-group-btn {
-            @extend %set-hidden;
-        }
+  .no-browse {
+    .input-group-btn {
+      @extend %set-hidden;
+    }
 
-        .form-control {
-            border-top-right-radius: $radius;
-            border-bottom-right-radius: $radius;
-        }
+    .form-control {
+      border-top-right-radius: $radius;
+      border-bottom-right-radius: $radius;
     }
+  }
 }
 
 .file-input-ajax-new {
-    .fileinput-remove-button {
-        @extend %set-hidden;
-    }
+  .fileinput-remove-button {
+    @extend %set-hidden;
+  }
 
-    .fileinput-upload-button {
-        @extend %set-hidden;
-    }
+  .fileinput-upload-button {
+    @extend %set-hidden;
+  }
 
-    .no-browse {
-        .input-group-btn {
-            @extend %set-hidden;
-        }
+  .no-browse {
+    .input-group-btn {
+      @extend %set-hidden;
+    }
 
-        .form-control {
-            border-top-right-radius: $radius;
-            border-bottom-right-radius: $radius;
-        }
+    .form-control {
+      border-top-right-radius: $radius;
+      border-bottom-right-radius: $radius;
     }
+  }
 }
 
 .file-caption-main {
-    width: 100%;
+  width: 100%;
 }
 
 .file-thumb-loading {
-    background: transparent $url-0 no-repeat scroll center center content-box !important;
+  background: transparent $url-0 no-repeat scroll center center content-box !important;
 }
 
 .file-drop-zone {
-    border: $border dashed $silver-chalice;
-    border-radius: $radius;
-    min-height: multiply($pad, 52);
-    text-align: center;
-    vertical-align: middle;
-    margin: multiply($pad, 2.4) multiply($pad, 3) multiply($pad, 2.4) multiply($pad, 2.4);
-    padding: $pad;
-
-    &.clickable {
-        &:hover {
-            border: multiply($border, 2) dashed $mountain-mist;
-        }
-
-        &:focus {
-            border: multiply($border, 2) solid $viking;
-        }
+  border: $border dashed $silver-chalice;
+  border-radius: $radius;
+  min-height: multiply($pad, 52);
+  text-align: center;
+  vertical-align: middle;
+  margin: multiply($pad, 2.4) multiply($pad, 3) multiply($pad, 2.4) multiply($pad, 2.4);
+  padding: $pad;
+
+  &.clickable {
+    &:hover {
+      border: multiply($border, 2) dashed $mountain-mist;
     }
 
-    .file-preview-thumbnails {
-        cursor: default;
+    &:focus {
+      border: multiply($border, 2) solid $viking;
     }
+  }
+
+  .file-preview-thumbnails {
+    cursor: default;
+  }
 }
 
 .file-drop-zone-title {
-    color: $silver-chalice;
-    font-size: 1.6em;
-    padding: multiply($pad, 17) multiply($pad, 2);
-    cursor: default;
+  color: $silver-chalice;
+  font-size: 1.6em;
+  padding: multiply($pad, 17) multiply($pad, 2);
+  cursor: default;
 }
 
 .file-highlighted {
-    border: multiply($border, 2) dashed $mountain-mist !important;
-    background-color: $gallery;
+  border: multiply($border, 2) dashed $mountain-mist !important;
+  background-color: $gallery;
 }
 
 .file-uploading {
-    background: $url-1 no-repeat center bottom multiply($pad, 2);
-    opacity: 0.65;
+  background: $url-1 no-repeat center bottom multiply($pad, 2);
+  opacity: 0.65;
 }
 
 .file-zoom-fullscreen {
-    .modal-dialog {
-        min-width: 100%;
-        margin: 0;
-    }
+  .modal-dialog {
+    min-width: 100%;
+    margin: 0;
+  }
 
-    .modal-content {
-        border-radius: 0;
-        box-shadow: none;
-        min-height: 100vh;
-    }
+  .modal-content {
+    border-radius: 0;
+    box-shadow: none;
+    min-height: 100vh;
+  }
 
-    .modal-body {
-        overflow-y: auto;
-    }
+  .kv-zoom-body {
+    overflow-y: auto;
+  }
 }
 
 .floating-buttons {
-    z-index: 3000;
+  z-index: 3000;
 
-    .btn-kv {
-        margin-left: multiply($pad, 0.6);
-        z-index: 3000;
-    }
+  .btn-kv {
+    margin-left: multiply($pad, 0.6);
+    z-index: 3000;
+  }
 }
 
 .kv-zoom-actions .btn-kv {
-    margin-left: multiply($pad, 0.6);
+  margin-left: multiply($pad, 0.6);
 }
 
 .file-zoom-content {
-    min-height: 300px;
-    text-align: center;
-    white-space: nowrap;
+  min-height: 300px;
+  text-align: center;
+  white-space: nowrap;
+
+  > * {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .kv-spacer {
+    height: 100%;
+  }
+
+  .file-preview-image {
+    max-height: 100%;
+  }
+
+  .file-preview-video {
+    max-height: 100%;
+  }
 
-    > * {
-        display: inline-block;
-        vertical-align: middle;
+  > .file-object {
+    &.type-image {
+      @extend %set-object;
+      height: auto;
+      min-height: inherit;
     }
 
-    .kv-spacer {
-        height: 100%;
+    &.type-video {
+      @extend %set-object-video;
     }
 
-    .file-preview-image {
-        max-height: 100%;
+    &.type-flash {
+      @extend %set-object-video;
     }
 
-    .file-preview-video {
-        max-height: 100%;
+    &.type-audio {
+      width: auto;
+      height: multiply($pad, 6);
     }
 
-    > .file-object {
-        &.type-image {
-            @extend %set-object;
-            height: auto;
-            min-height: inherit;
-        }
-
-        &.type-video {
-            @extend %set-object-video;
-        }
-
-        &.type-flash {
-            @extend %set-object-video;
-        }
-
-        &.type-audio {
-            width: auto;
-            height: multiply($pad, 6);
-        }
-
-        &.type-pdf {
-            @extend %set-object-default;
-        }
-
-        &.type-html {
-            @extend %set-object-default;
-        }
-
-        &.type-text {
-            @extend %set-object-default;
-        }
-
-        &.type-default {
-            @extend %set-object-default;
-        }
+    &.type-pdf {
+      @extend %set-object-default;
     }
 
-    &:hover {
-        background: transparent;
+    &.type-html {
+      @extend %set-object-default;
     }
+
+    &.type-text {
+      @extend %set-object-default;
+    }
+
+    &.type-default {
+      @extend %set-object-default;
+    }
+  }
+
+  &:hover {
+    background: transparent;
+  }
 }
 
 @media(min-width: 576px) {
-    .file-zoom-dialog .modal-dialog {
-        max-width: 500px;
-    }
+  .file-zoom-dialog .modal-dialog {
+    max-width: 500px;
+  }
 }
 
 @media(min-width: 992px) {
-    .file-zoom-dialog .modal-lg {
-        max-width: 800px;
-    }
+  .file-zoom-dialog .modal-lg {
+    max-width: 800px;
+  }
 }
 
 @media(max-width: 767px) {
-    .file-preview-thumbnails {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-    }
-    .file-zoom-dialog .modal-header {
-        flex-direction: column;
-    }
+  .file-preview-thumbnails {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  .file-zoom-dialog .modal-header {
+    flex-direction: column;
+  }
 }
 
 @media(max-width: 350px) {
-    .krajee-default.file-preview-frame:not([data-template="audio"]) .kv-file-content {
-        width: 160px;
-    }
+  .krajee-default.file-preview-frame:not([data-template="audio"]) .kv-file-content {
+    width: 160px;
+  }
 }
 
 @media(max-width: 420px) {
-    .krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
-        width: 100%;
-    }
+  .krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
+    width: 100%;
+  }
 }
 
 .file-loading[dir=rtl]:before {
-    background: transparent $url-0 top right no-repeat;
-    padding-left: 0;
-    padding-right: multiply($pad, 4);
+  background: transparent $url-0 top right no-repeat;
+  padding-left: 0;
+  padding-right: multiply($pad, 4);
 }
 
 .clickable .file-drop-zone-title {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .file-sortable .file-drag-handle {
-    cursor: grab;
-    opacity: 1;
+  cursor: grab;
+  opacity: 1;
 
-    &:hover {
-        opacity: 0.7;
-    }
+  &:hover {
+    opacity: 0.7;
+  }
 }
 
 .file-grabbing, .file-grabbing * {
-    cursor: not-allowed !important;
+  cursor: not-allowed !important;
 }
 
 .file-grabbing .file-preview-thumbnails * {
-    cursor: grabbing !important;
+  cursor: grabbing !important;
 }
 
 .file-preview-initial.sortable-chosen {
-    background-color: $link-water;
-    border-color: $pelorous;
-    box-shadow: none;
+  background-color: $link-water;
+  border-color: $pelorous;
+  box-shadow: none;
 }