Fix #1722: Better zoom carousel indicators button styling

css/fileinput.css

@@ -116,23 +116,23 @@ input[type=file].file-loading {
     margin: auto;
 }
 
-.file-zoom-content>.file-object.type-video,
-.file-zoom-content>.file-object.type-flash,
-.file-zoom-content>.file-object.type-image {
+.file-zoom-content > .file-object.type-video,
+.file-zoom-content > .file-object.type-flash,
+.file-zoom-content > .file-object.type-image {
     max-width: 100%;
     max-height: 100%;
     width: auto;
 }
 
-.file-zoom-content>.file-object.type-video,
-.file-zoom-content>.file-object.type-flash {
+.file-zoom-content > .file-object.type-video,
+.file-zoom-content > .file-object.type-flash {
     height: 100%;
 }
 
-.file-zoom-content>.file-object.type-pdf,
-.file-zoom-content>.file-object.type-html,
-.file-zoom-content>.file-object.type-text,
-.file-zoom-content>.file-object.type-default {
+.file-zoom-content > .file-object.type-pdf,
+.file-zoom-content > .file-object.type-html,
+.file-zoom-content > .file-object.type-text,
+.file-zoom-content > .file-object.type-default {
     width: 100%;
 }
 
@@ -383,26 +383,37 @@ input[type=file].file-loading {
 
 .file-zoom-dialog .btn-navigate {
     padding: 0;
-    margin: -40px 0 0;
-    font-size: 40px;
-    background: transparent;
-    text-decoration: none;
+    margin: -1.2rem 0.1rem 0;
+    font-size: 1.2rem;
+    width: 2.4rem;
+    height: 2.4rem;
     outline: none;
     top: 50%;
-    filter: invert(1) grayscale(100);
+    border-radius: 50%;
+    opacity: 0.8;
+    background-color: #6c757d;
+    border-color: #6c757d;
+    color: #000;
 }
 
-.file-zoom-dialog .btn-navigate:not([disabled]):hover,
-.file-zoom-dialog .btn-navigate:not([disabled]):focus {
-    outline: none;
-    box-shadow: none;
-    text-decoration: none;
+.btn-navigate * {
+    width: auto;
+}
+
+.file-zoom-dialog .btn-navigate:hover,
+.file-zoom-dialog .btn-navigate:focus {
     color: #fff;
-    opacity: 0.9;
-    outline: 0;
+    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]  {
+.file-zoom-dialog .btn-navigate[disabled] {
+    background-color: #999;
+    border-color: #999;
     opacity: 0.4;
 }
 
@@ -521,7 +532,11 @@ input[type=file].file-loading {
     min-height: 300px;
 }
 
-.file-zoom-content>* {
+.file-zoom-content:hover {
+    background: transparent;
+}
+
+.file-zoom-content > * {
     display: inline-block;
     vertical-align: middle;
 }
@@ -538,12 +553,12 @@ input[type=file].file-loading {
     max-height: 100%;
 }
 
-.file-zoom-content>.file-object.type-image {
+.file-zoom-content > .file-object.type-image {
     height: auto;
     min-height: inherit;
 }
 
-.file-zoom-content>.file-object.type-audio {
+.file-zoom-content > .file-object.type-audio {
     width: auto;
     height: 30px;
 }
@@ -567,6 +582,7 @@ input[type=file].file-loading {
         align-items: center;
         flex-direction: column;
     }
+
     .file-zoom-dialog .modal-header {
         flex-direction: column;
     }

scss/fileinput.scss

@@ -24,6 +24,7 @@ $boston-blue: #428bca !default;
 $pelorous: #17a2b8 !default;
 $tapa: #777 !default;
 $black: #000 !default;
+$white: #fff !default;
 $black-20: rgba(0, 0, 0, 0.2) !default;
 $black-30: rgba(0, 0, 0, 0.3) !default;
 $black-40: rgba(0, 0, 0, 0.4) !default;
@@ -33,6 +34,16 @@ $silver-chalice: #aaa !default;
 $viking: #5acde2 !default;
 $curious-blue: #1c94c4 !default;
 $link-water: #d9edf7 !default;
+$gray-1=
+#5c636a
+
+!default
+;
+$gray-2=
+#6c757d
+
+!default
+;
 
 //fonts
 $font-0: Impact !default;
@@ -57,37 +68,46 @@ $border: 1px !default;
 @function multiply($pixels, $multiplier) {
     @return $pixels * $multiplier;
 }
+
 //@extend-elements
 %set-invisible {
     width: 0;
     height: 0;
 }
+
 %set-hidden {
     display: none;
 }
+
 %set-absolute {
     position: absolute;
 }
+
 %set-relative {
     position: relative;
 }
+
 %set-text-left {
     text-align: left;
 }
+
 %set-error {
     @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);
 }
+
 %set-progress {
     height: multiply($pad, 2.2);
     font-size: multiply($pad, 1.8);
 }
+
 %set-caption {
     display: block;
     white-space: nowrap;
@@ -97,27 +117,34 @@ $border: 1px !default;
     height: multiply($pad, 3);
     margin: auto;
 }
+
 %set-object {
     max-width: 100%;
     max-height: 100%;
     width: auto;
 }
+
 %set-object-video {
     @extend %set-object;
     height: 100%;
 }
+
 %set-object-default {
     width: 100%;
 }
+
 .kv-hidden {
     @extend %set-hidden;
 }
+
 .hide-content .kv-file-content {
     @extend %set-hidden;
 }
+
 .file-input {
     @extend %set-relative;
 }
+
 .file-no-browse {
     @extend %set-absolute;
     left: 50%;
@@ -131,10 +158,12 @@ $border: 1px !default;
     outline: none;
     box-shadow: none;
 }
+
 .file-loading {
     input[type=file] {
         @extend %set-invisible;
     }
+
     &:before {
         @extend %set-relative;
         content: " Loading...";
@@ -147,16 +176,20 @@ $border: 1px !default;
         background: transparent $url-0 top left no-repeat;
     }
 }
+
 input[type=file].file-loading {
     @extend %set-invisible;
 }
+
 .file-object {
     margin: 0 0 (-$pad) 0;
     padding: 0;
 }
+
 .btn-file {
     @extend %set-relative;
     overflow: hidden;
+
     input[type=file] {
         @extend %set-absolute;
         top: 0;
@@ -169,14 +202,17 @@ input[type=file].file-loading {
         cursor: inherit;
         display: block;
     }
+
     ::-ms-browse {
         font-size: multiply($pad, 2000);
         width: 100%;
         height: 100%;
     }
 }
+
 .file-caption {
     @extend %set-relative;
+
     .file-caption-name {
         width: 100%;
         margin: 0;
@@ -186,20 +222,24 @@ input[type=file].file-loading {
         background: none;
         outline: none;
     }
+
     &.icon-visible {
         .file-caption-icon {
             display: inline-block;
         }
+
         .file-caption-name {
             padding-left: multiply($pad, 3);
         }
     }
 }
+
 .file-caption-icon {
     @extend %set-hidden;
     @extend %set-absolute;
     left: multiply($pad, 1.6);
 }
+
 .file-error-message {
     color: $apple-blossom;
     background-color: $vanilla-ice;
@@ -207,19 +247,23 @@ input[type=file].file-loading {
     border: $border solid $oyster-pink;
     border-radius: $radius;
     padding: multiply($pad, 3);
+
     pre {
         @extend %set-error;
         margin: $pad 0;
     }
+
     ul {
         @extend %set-error;
     }
 }
+
 .file-caption-disabled {
     background-color: $gallery;
     cursor: not-allowed;
     opacity: 1;
 }
+
 .file-preview {
     @extend %set-relative;
     border-radius: multiply($radius, 1.25);
@@ -227,33 +271,39 @@ input[type=file].file-loading {
     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;
-    }    
+    }
+
     .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%;    
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
 }
+
 .krajee-default {
     &.file-preview-frame {
         @extend %set-relative;
@@ -263,30 +313,37 @@ input[type=file].file-loading {
         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-other-frame {
         display: flex;
         align-items: center;
         justify-content: center;
     }
+
     .file-preview-text {
         display: block;
         color: $boston-blue;
@@ -296,24 +353,30 @@ input[type=file].file-loading {
         padding: multiply($pad, 1.6);
         resize: none;
     }
+
     .file-preview-html {
         border: $border solid $alto;
         padding: multiply($pad, 1.6);
         overflow: auto;
     }
+
     .file-actions {
         @extend %set-text-left;
     }
+
     .file-other-error {
         @extend %set-text-left;
     }
+
     .file-other-icon {
         font-size: 6em;
         line-height: 1;
     }
+
     .file-footer-buttons {
         float: right;
     }
+
     .file-footer-caption {
         display: block;
         text-align: center;
@@ -322,56 +385,70 @@ input[type=file].file-loading {
         color: $tapa;
         margin-bottom: multiply($pad, 3);
     }
+
     .file-preview-error {
         opacity: 0.65;
         box-shadow: none;
     }
+
     .file-drag-handle {
         @extend %set-indicator;
     }
+
     .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;
+
         .progress {
             @extend %set-progress;
             color: $celeste;
         }
+
         .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%;
 }
+
 .kv-upload-progress {
     .progress {
         height: multiply($pad, 4);
@@ -380,24 +457,29 @@ input[type=file].file-loading {
         overflow: hidden;
         color: $celeste;
     }
+
     .progress-bar {
         height: multiply($pad, 4);
         font-family: Verdana, Helvetica, sans-serif;
     }
+
     .file-upload-stats {
         font-size: 11px;
         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
@@ -405,54 +487,71 @@ input[type=file].file-loading {
         //noinspection CssOverwrittenProperties
         font-size: 50vmin;
     }
+
     .modal-dialog {
         @extend %set-relative;
         width: auto;
     }
+
     .modal-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
+
         &:before {
             @extend %set-hidden;
         }
+
         &:after {
             @extend %set-hidden;
         }
     }
+
     .btn-navigate {
         @extend %set-absolute;
         padding: 0;
-        margin: -40px 0 0;
-        font-size: 40px;
-        background: transparent;
-        text-decoration: none;
-        outline: none;
+        margin: -1.2rem 0.1rem 0;
+        font-size: 1.2rem;
+        width: 2.4rem;
+        height: 2.4rem;
         top: 50%;
-        filter: invert(1) grayscale(100);
-        &:not([disabled]):hover, &:not([disabled]):focus {
-            outline: none;
-            box-shadow: none;
-            text-decoration: none;
-            color: #fff;
-            opacity: 0.9;
-            outline: 0;
+        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);
     }
-    .btn-navigate[disabled] {
-        opacity: 0.3;
-    }
+
     .btn-kv-prev {
         left: multiply($pad, 0.2);
     }
+
     .btn-kv-next {
         right: multiply($pad, 0.2);
     }
+
     .kv-zoom-title {
         font-weight: 300;
         color: $mountain-mist;
@@ -462,55 +561,69 @@ input[type=file].file-loading {
         text-overflow: ellipsis;
     }
 }
+
 .file-input-new {
     .file-preview {
         @extend %set-hidden;
     }
+
     .close {
         @extend %set-hidden;
     }
+
     .glyphicon-file {
         @extend %set-hidden;
     }
+
     .fileinput-remove-button {
         @extend %set-hidden;
     }
+
     .fileinput-upload-button {
         @extend %set-hidden;
     }
+
     .no-browse {
         .input-group-btn {
             @extend %set-hidden;
         }
+
         .form-control {
             border-top-right-radius: $radius;
             border-bottom-right-radius: $radius;
         }
     }
 }
+
 .file-input-ajax-new {
     .fileinput-remove-button {
         @extend %set-hidden;
     }
+
     .fileinput-upload-button {
         @extend %set-hidden;
     }
+
     .no-browse {
         .input-group-btn {
             @extend %set-hidden;
         }
+
         .form-control {
             border-top-right-radius: $radius;
             border-bottom-right-radius: $radius;
         }
     }
 }
+
 .file-caption-main {
     width: 100%;
 }
+
 .file-thumb-loading {
     background: transparent $url-0 no-repeat scroll center center content-box !important;
 }
+
 .file-drop-zone {
     border: $border dashed $silver-chalice;
     border-radius: $radius;
@@ -519,113 +632,145 @@ input[type=file].file-loading {
     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;
         }
     }
+
     .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;
 }
+
 .file-highlighted {
     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;
 }
+
 .file-zoom-fullscreen {
     .modal-dialog {
         min-width: 100%;
         margin: 0;
     }
+
     .modal-content {
         border-radius: 0;
         box-shadow: none;
         min-height: 100vh;
     }
+
     .modal-body {
         overflow-y: auto;
     }
 }
+
 .floating-buttons {
     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);
 }
+
 .file-zoom-content {
     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%;
     }
+
     > .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;
         }
     }
+
+    &:hover {
+        background: transparent;
+    }
 }
+
 @media(min-width: 576px) {
     .file-zoom-dialog .modal-dialog {
         max-width: 500px;
     }
 }
+
 @media(min-width: 992px) {
     .file-zoom-dialog .modal-lg {
         max-width: 800px;
     }
 }
+
 @media(max-width: 767px) {
     .file-preview-thumbnails {
         display: flex;
@@ -637,37 +782,46 @@ input[type=file].file-loading {
         flex-direction: column;
     }
 }
+
 @media(max-width: 350px) {
     .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%;
     }
 }
+
 .file-loading[dir=rtl]:before {
     background: transparent $url-0 top right no-repeat;
     padding-left: 0;
     padding-right: multiply($pad, 4);
 }
+
 .clickable .file-drop-zone-title {
     cursor: pointer;
 }
+
 .file-sortable .file-drag-handle {
     cursor: grab;
     opacity: 1;
+
     &:hover {
         opacity: 0.7;
     }
 }
+
 .file-grabbing, .file-grabbing * {
     cursor: not-allowed !important;
 }
+
 .file-grabbing .file-preview-thumbnails * {
     cursor: grabbing !important;
 }
+
 .file-preview-initial.sortable-chosen {
     background-color: $link-water;
     border-color: $pelorous;