/** * FileUploader * Copyright (c) 2017 Innostudio.de * Website: http://innostudio.de/fileuploader/ * Version: 1.3 (21-Sep-2017) * Requires: jQuery v1.7.1 or later * License: https://innostudio.de/fileuploader/documentation/#license */ /* Configuration */ .fileuploader, .fileuploader *, .fileuploader :before, .fileuploader :after { box-sizing: border-box; } /* Parent */ .fileuploader { display: block; line-height: normal; text-align: left; } /* Input */ .fileuploader-input { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; border: 1px solid transparent; cursor: pointer; overflow: hidden; } /* input caption */ .fileuploader-input-caption { position: relative; display: inline-block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-item-align: start; align-self: flex-start; padding: 11px 15px; margin-right: 15px; background: #fff; border: 1px solid #dde4f6; border-radius: 4px; color: #789BEC; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; } /* input button */ .fileuploader-input-button { display: inline-block; background: #6381E6; padding: 12px 20px; border-radius: 4px; color: #fff; text-align: center; font-weight: bold; vertical-align: top; cursor: pointer; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; } .fileuploader-input-button:hover { background: #758fe9; } .fileuploader-input-button:active { background: #6381E6; box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.1); } /* input focused state */ .fileuploader-focused .fileuploader-input-caption { border-color: #b8c2ef; } .fileuploader-focused .fileuploader-input-button { background: #758fe9; border-color: #758fe9; } /* input disabled state */ .fileuploader-disabled .fileuploader-input { opacity: 0.7; cursor: default; pointer-events: none !important; } /* input dragging state */ .fileuploader-theme-default .fileuploader-dragging { background: #fff; border: 1px dashed #dde4f6; } .fileuploader-theme-default .fileuploader-dragging .fileuploader-input-caption { border-color: transparent; } .fileuploader-theme-default .fileuploader-dragging .fileuploader-input-button { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } /* input uploading state */ .fileuploader.fileuploader-is-uploading .fileuploader-input-caption:after { width: 14px; height: 14px; right: 10px; top: 50%; margin-top: -10px; opacity: 0.8; } /* global loader */ .fileuploader.fileuploader-is-uploading .fileuploader-input-caption:after, .fileuploader-item .fileuploader-item-image.fileuploader-loading:after, .fileuploader-item.upload-pending .fileuploader-action-remove:after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border-top: 3px solid #dde4f6; border-right: 3px solid #dde4f6; border-bottom: 3px solid #dde4f6; border-left: 3px solid #979fb8; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: Spin 1s infinite linear; animation: Spin 1s infinite linear; } /* Thumbnails default theme */ /* list */ .fileuploader-items-list { display: block; padding: 0; list-style: none; margin: 0 -1%; } /* item */ .fileuploader-item { position: relative; margin: 0; -webkit-animation: SlideIn 0.4s ease; animation: SlideIn 0.4s ease; } .fileuploader-item:last-child { border-bottom: 0; margin-bottom: -15px; } /* item uploading state */ .fileuploader-item.upload-failed { background: rgba(219, 104, 104, 0.08); } .fileuploader-item.upload-pending .fileuploader-action-remove:after { width: 26px; height: 26px; right: -5px; top: 50%; margin-top: -13px; opacity: 0.2; } /* item columns */ .fileuploader-item .columns { position: relative; z-index: 2; } /* item column-thumbnail */ .fileuploader-item .column-thumbnail { position: absolute; width: 36px; height: 36px; line-height: 36px; left: 0; top: 0; } .fileuploader-item .column-thumbnail .fileuploader-item-image { position: relative; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; } .fileuploader-item .fileuploader-item-image img { max-width: none; max-height: 100%; min-height: 100%; } .fileuploader-item .fileuploader-item-image img, .fileuploader-item .fileuploader-item-image canvas { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-animation: FadeIn .2s ease; animation: FadeIn .2s ease; } /* thumbnail loading state */ .fileuploader-item .column-thumbnail .fileuploader-item-image.fileuploader-loading:after { width: 24px; height: 24px; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px; border-radius: 50%; opacity: 0.12; } /* thumbnail popup button */ .fileuploader-item .column-thumbnail .fileuploader-action-popup { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); border-radius: 4px; cursor: pointer; opacity: 0; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .fileuploader-item.file-has-popup .column-thumbnail .fileuploader-action-popup { display: block; } .fileuploader-item .column-thumbnail .fileuploader-action-popup:hover { opacity: 1; } .fileuploader-item .column-thumbnail .fileuploader-action-popup:active { background: rgba(0,0,0,0.4); } /* item icon */ .fileuploader-item .fileuploader-item-icon { position: relative; width: 100%; height: 100%; text-align: center; color: #fff; font-size: 11px; background: #ddd; border-radius: 4px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-animation: FadeIn .2s ease; animation: FadeIn .2s ease; } .fileuploader-item .fileuploader-item-icon.is-bright-color { color: #888; } .fileuploader-item .fileuploader-item-icon i { display: block; width: 90%; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; font-style: normal; font-weight: bold; } /* item icon like file */ /* .fileuploader-item .fileuploader-item-icon { width: 30px; margin: 0 auto; border-radius: 3px; } .fileuploader-item .fileuploader-item-icon i { padding-top: 3px; } .fileuploader-item .fileuploader-item-icon:after { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-bottom-left-radius: 2px; border-width: 4px; border-style: solid; border-color: #f5f6fa #f5f6fa rgba(255, 255, 255, .35) rgba(255, 255, 255, .35); } .fileuploader-item .fileuploader-item-icon { -webkit-animation: fileuploaderFadeIn 0.4s ease; animation: fileuploaderFadeIn 0.4s ease; } */ /* item column-title */ .fileuploader-item .column-title { display: block; padding-left: 51px; padding-right: 81px; color: #74809D; } .fileuploader-item .column-title div { width: 100%; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .fileuploader-item .column-title span { font-size: 12px; color: #979fb8; } /* item actions */ .fileuploader-item .column-actions { position: absolute; right: 15px; top: 50%; margin-top: -9px; } .fileuploader-action { display: block; position: relative; cursor: pointer; vertical-align: top; -webkit-transform: translateZ(0px); transform: translateZ(0px); -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; border: 0; } .fileuploader-item .column-actions .fileuploader-action + .fileuploader-action { margin-left: 10px; } .fileuploader-item .column-actions .fileuploader-action-success { position: absolute; right: 0; top: 0; } .fileuploader-item .column-actions .fileuploader-action-success:hover, .fileuploader-item .column-actions .fileuploader-action-success:active { opacity: 0; } .fileuploader-action i { font-size: 21px; } /* icon-start */ .fileuploader-action-start { background: #6381E6; border-radius: 50%; } .fileuploader-action-start i { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -5px; border-radius: 2px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #fff; } .fileuploader-action-start:hover { background: #758fe9; } .fileuploader-action-start:active { background: #6381E6; box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.1); } /* icon.success */ .fileuploader-action-success { background: #6381E6; border: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .fileuploader-action-success i:before, .fileuploader-action-success i:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: rotate(0); transform: rotate(0); } .fileuploader-action-success i:before { width: 4px; height: 2px; left: 6px; top: 11px; background: #fff; } .fileuploader-action-success i:after { top: 4px; left: 9px; width: 2px; height: 9px; background: #fff; } /* icon-download */ .fileuploader-action-download { background: #6381E6; border-radius: 50%; } .fileuploader-action-download i { position: absolute; left: 50%; top: 50%; margin-left: -1px; margin-top: -4px; width: 2px; height: 5px; border-radius: 0; background: #fff; } .fileuploader-action-download i:after { content: ''; position: absolute; width: 0; height: 0; bottom: -4px; left: -3px; border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 5px solid #fff; border-radius: 2px; } .fileuploader-action-download:hover { background: #758fe9; } .fileuploader-action-download:active { background: #6381E6; box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.1); } /* icon-retry */ .fileuploader-action-retry { background: #6381E6; border-radius: 50%; } .fileuploader-action-retry i:before { content: ''; position: absolute; width: 10px; height: 10px; left: 4px; top: 4px; border-radius: 50%; border: 2px solid #fff; } .fileuploader-action-retry i:after { content: ''; position: absolute; width: 6px; height: 3px; left: 3px; top: 9px; background: #6381E6; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } .fileuploader-action-retry:hover, .fileuploader-action-retry:hover i:after { background: #758fe9; } .fileuploader-action-retry:active { box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.1); } .fileuploader-action-retry:active, .fileuploader-action-retry:active i:after { background: #6381E6; } /* icon-sort */ .fileuploader-action-sort { cursor: move; } .fileuploader-action-sort:hover, .fileuploader-action-sort:active { } /* item progress bar */ .fileuploader-item .fileuploader-progressbar { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; border-radius: 4px; overflow: hidden; } .fileuploader-item .fileuploader-progressbar .bar { position: absolute; left: 0; top: 0; width: 0%; height: 100%; border-radius: 4px; background: #6381E6; -webkit-transition: width 0.3s ease; transition: width 0.3s ease; } .fileuploader-item .progress-bar2 .fileuploader-progressbar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fileuploader-item .progress-bar2 .fileuploader-progressbar .bar { position: absolute; left: 0; top: 0; width: 0%; height: 100%; border-radius: 0; background: rgba(104, 125, 219, 0.08); -webkit-transition: width 0.3s ease; transition: width 0.3s ease; } .fileuploader-item .progress-bar2 span { position: absolute; top: 50%; margin-top: -29px; right: 15px; color: rgba(151, 159, 184, 0.16); font-size: 48px; } /* clipboard paste loading */ .fileuploader-input-caption .fileuploader-pending-loader { margin-right: 5px; } .fileuploader-pending-loader { position: relative; display: inline-block; width: 14px; height: 14px; overflow: hidden; vertical-align: middle; } .fileuploader-pending-loader:after, .fileuploader-pending-loader .left-half { background: #fff; } .fileuploader-pending-loader .right-half, .fileuploader-pending-loader .spinner { background: #789BEC; } .fileuploader-pending-loader:after { content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; z-index: 4; } .fileuploader-pending-loader .left-half, .fileuploader-pending-loader .right-half, .fileuploader-pending-loader .spinner { position: absolute; top: 0; width: 50%; height: 100%; } .fileuploader-pending-loader .left-half { left: 0; opacity: 1; border-radius: 100% 0 0 100%/ 50% 0 0 50%; -webkit-animation: Opacity 3s steps(1, end) infinite; animation: Opacity 3s steps(1, end) infinite; z-index: 3; } .fileuploader-pending-loader .right-half { right: 0; opacity: 0; border-radius: 0 100% 100% 0/ 0 50% 50% 0; -webkit-animation: Opacity 3s steps(1, end) reverse infinite; animation: Opacity 3s steps(1, end) reverse infinite; z-index: 1; } .fileuploader-pending-loader .spinner { left: 0; border-radius: 100% 0 0 100%/ 50% 0 0 50%; -webkit-animation: Spin 3s linear infinite; animation: Spin 3s linear infinite; -webkit-transform-origin: center right; transform-origin: center right; z-index: 2; } /* fileuploader popup */ .fileuploader-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 1); z-index: 999; -webkit-animation: FadeIn 0.4s ease; animation: FadeIn 0.4s ease; } .fileuploader-popup-preview { width: 90%; height: 100%; margin: 40px auto 0; z-index: 2; } .fileuploader-popup-preview .node { position: absolute; top: 50%; left: 0; width: 60%; height: 100%; min-height: 10px; text-align: center; -webkit-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); -webkit-animation: SlideInTools 0.9s; animation: SlideInTools 0.9s; } .fileuploader-popup-preview .node.image > img, .fileuploader-popup-preview .node.video > video, .fileuploader-popup-preview .node.audio > audio, .fileuploader-popup-preview .node.astext > div { max-width: 100%; max-height: 500px; margin: 0; padding: 0; background: #fff; box-shadow: 0 25px 40px -10px rgba(8, 26, 40, 0.3); border-radius: 4px; } .fileuploader-popup-preview .node.audio audio { width: 450px; } .fileuploader-popup-preview .node.astext div { max-width: 992px; padding: 20px; margin: 0 auto; font-size: 14px; line-height: 16px; text-align: left; overflow-y: auto; white-space: pre-wrap; } .fileuploader-popup-preview .tools { width: 40%; position: absolute; top: 50%; right: 0; -webkit-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); vertical-align: top; } @keyframes SlideInTools { from { -webkit-transform: translateY(40%); transform: translateY(40%); opacity: 0; } to { -webkit-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); opacity: 1; } } .fileuploader-popup-preview .tools ul { display: table; list-style: none; padding: 0; -webkit-animation: SlideIn 0.4s; animation: SlideIn 0.4s; } .fileuploader-popup-preview .tools li { display: inline-block; padding: 0 20px; max-width: 50%; vertical-align: middle; opacity: .8; } .fileuploader-popup-preview .tools li span { display: block; color: #757575; margin-top: 3px; font-size: 15px; } .fileuploader-popup-preview .tools li h5 { margin: 8px 0; color: #757575; font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fileuploader-popup-preview .tools li a { display: inline-block; cursor: pointer; text-align: center; text-decoration: none; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; border: 0; } .fileuploader-popup-preview .tools li:hover { opacity: 1; } .fileuploader-popup-preview .tools li a i { display: inline-block; margin-bottom: 2px; color: #757575; font-size: 36px; } .fileuploader-popup-preview .tools li a i.jw-action-icon-delete { font-size: 32px; height: 44px; position: relative; top: 2px; } .fileuploader-popup-preview .tools .buttons { margin: 25px 0 0 20px; -webkit-animation: SlideIn 0.4s; animation: SlideIn 0.4s; } .actionJW.fileuploader-popup-button { display: inline-block; padding: 7px 22px 11px; color: #757575; font-size: 16px; border-radius: 4px; cursor: pointer; height: auto; line-height: normal; } .actionJW.fileuploader-popup-button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .actionJW.fileuploader-popup-button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .actionJW.fileuploader-popup-button.button-success { background-image: -moz-linear-gradient(top, rgba(67,160,71,1) 0%, rgba(56,142,60,1) 100%); background-image: -webkit-linear-gradient(top, rgba(67,160,71,1) 0%,rgba(56,142,60,1) 100%); background-image: linear-gradient(to bottom, rgba(67,160,71,1) 0%,rgba(56,142,60,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43a047', endColorstr='#388e3c',GradientType=0 ); color: #fff; border: 1px solid #328436; outline: none; } .actionJW.fileuploader-popup-button.button-success:hover { background: #388E3C; border: 1px solid #328436; color: #fff; } .fileuploader-popup-preview .closer { display: block; position: fixed; top: 0px; right: 15px; color: #9e9e9e; border: none; font-size: 24px; line-height: 1; cursor: pointer; z-index: 99999; padding: 20px; -webkit-animation: SlideIn 0.4s; animation: SlideIn 0.4s; } .fileuploader-popup-preview .closer:hover { color: #757575; } .fileuploader-cropper, .fileuploader-cropper * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fileuploader-cropper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(17,20,27,.65); z-index: 9; } .fileuploader-cropper-area { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; } .fileuploader-cropper-area.has-grid:before, .fileuploader-cropper-area.has-grid:after { content: ''; position: absolute; border: 1px solid rgba(250, 250, 250, 0.8); opacity: 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 1; } .fileuploader-cropper-area.has-grid:before { top: 0; left: 50%; height: 100%; width: 34%; border-top: 0; border-bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .fileuploader-cropper-area.has-grid:after { top: 50%; left: 0; height: 34%; width: 100%; border-left: 0; border-right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .fileuploader-cropper-area.has-grid.moving:before, .fileuploader-cropper-area.has-grid.moving:after { opacity: 1; } .fileuploader-cropper-area .point { position: absolute; width: 12px; height: 12px; background: #fafafa; box-shadow: 0 0 6px rgba(0,0,0,0.4); border-radius: 50%; z-index: 3; } .fileuploader-cropper-area .point-a { top: -6px; left: -6px; cursor: nw-resize; } .fileuploader-cropper-area .point-b { top: -6px; left: 50%; margin-left: -6px; cursor: n-resize; } .fileuploader-cropper-area .point-c { top: -6px; right: -6px; cursor: ne-resize; } .fileuploader-cropper-area .point-d { top: 50%; right: -6px; margin-top: -6px; cursor: w-resize; } .fileuploader-cropper-area .point-e { bottom: -6px; right: -6px; cursor: nw-resize; } .fileuploader-cropper-area .point-f { bottom: -6px; left: 50%; margin-left: -6px; cursor: s-resize; } .fileuploader-cropper-area .point-g { bottom: -6px; left: -6px; cursor: sw-resize; } .fileuploader-cropper-area .point-h { left: -6px; top: 50%; margin-top: -6px; cursor: w-resize; } .fileuploader-cropper-area .area-move { position: absolute; width: 95%; height: 95%; left: 50%; top: 50%; z-index: 2; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); cursor: move; } .fileuploader-cropper-area .area-image { position: relative; overflow: hidden; width: 100%; height: 100%; } .fileuploader-cropper-area .area-image img { width: auto; height: auto; max-width: none; max-height: none; position: absolute; left: 0; top: 0; background: #fff; -webkit-transform-origin: top left; transform-origin: top left; } /* fileuploader-sorter */ .fileuploader-item.sorting { background: #fff; border-radius: 4px; border: 0; opacity: 0.9; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.13); z-index: 9999; } .fileuploader-item.sorting, .fileuploader-item.sorting .fileuploader-item-image img, .fileuploader-item.sorting .fileuploader-item-image canvas, .fileuploader-item.sorting .fileuploader-item-icon, .fileuploader-sorter-placeholder { -webkit-animation: none; animation: none; } .fileuploader-sorter-placeholder { background: rgba(0, 0, 0, 0.03); margin: 0; padding: 0; } /* input & thumbnails size */ .fileuploader-theme-thumbnails .fileuploader-thumbnails-input, .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item { display: inline-block; width: 23%; height: 190px; vertical-align: top; margin: 0 1% 18px; } .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child { height: 190px; } /* input-inner */ .fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner { position: relative; width: 100%; height: 100%; background: -moz-linear-gradient(top, #fff, #f5f5f5); background: -webkit-linear-gradient(top, #fff, #f5f5f5); background: -o-linear-gradient(top, #fff, #f5f5f5); background: -ms-linear-gradient(top, #fff, #f5f5f5); background: linear-gradient(top, #fff, #f5f5f5); border: 1px dashed rgba(208, 208, 208, .7); border-radius: 4px; text-align: center; font-size: 30px; vertical-align: top; cursor: pointer; } .fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner i { color: #757575; opacity: .7; } .fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner:hover { border-color: rgba(208, 208, 208, 1); } .fileuploader-theme-thumbnails .fileuploader-thumbnails-input-inner:hover i { opacity: 1; } /* thumbnails */ .fileuploader-theme-thumbnails .fileuploader-items-list { } .fileuploader-theme-thumbnails .fileuploader-item { -webkit-animation: ScaleIn 0.2s ease; animation: ScaleIn 0.2s ease; border-radius: 5px; } .fileuploader-theme-thumbnails .fileuploader-item-inner { position: relative; border-radius: 3px; overflow: hidden; z-index: 1; border: 1px solid #dedede; } .main-photo .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child, .main-photo .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child .fileuploader-item-inner { border: 1px solid #43a047; } .main-photo .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child .fileuploader-item-inner:after { content: "Обложка"; position: absolute; bottom: 0; background: #43a047; color: #fff; padding: 4px 13px 3px 11px; border-top-right-radius: 4px; font-size: 13px; } .fileuploader-theme-thumbnails .fileuploader-item-inner, .fileuploader-theme-thumbnails .fileuploader-item-inner .thumbnail-holder, .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item-image { width: 100%; height: 100%; } .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item-image { position: relative; text-align: center; overflow: hidden; } .fileuploader-theme-thumbnails .fileuploader-item .fileuploader-item-image img, .fileuploader-theme-thumbnails .fileuploader-item .fileuploader-item-image canvas { border-radius: 0; } .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item-image img { max-height: 100%; min-height: 100%; max-width: none; } .fileuploader-theme-thumbnails .fileuploader-item .fileuploader-item-image.fileuploader-loading:after { top: 50%; left: 50%; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; opacity: 0.2; } .fileuploader-theme-thumbnails .fileuploader-items-list .actions-holder { position: absolute; top: 0; right: 0; width: 40px; height: 100%; background: #fff; text-align: center; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; z-index: 3; opacity: 0; } .fileuploader-item:hover .actions-holder { opacity: 1; } /* uploading */ .fileuploader-theme-thumbnails .fileuploader-item.upload-failed { background: none; } .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item.upload-failed .fileuploader-item-icon { display: block !important; background: #db6868 !important; color: #fff; } .fileuploader-theme-thumbnails .fileuploader-item.upload-pending .fileuploader-action-remove:after { right: 0; margin-top: -14px; } .fileuploader-theme-thumbnails .fileuploader-item .progress-holder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fileuploader-theme-thumbnails .fileuploader-item .progress-holder .fileuploader-progressbar { position: relative; top: 50%; width: 80%; height: 6px; margin: 0 auto; background: #dde4f6; } /* sorter */ .fileuploader-theme-thumbnails .fileuploader-item.sorting { -webkit-animation: none; animation: none; } .fileuploader-theme-thumbnails .fileuploader-sorter-placeholder { background: none; } .fileuploader-theme-thumbnails .fileuploader-sorter-placeholder div { background: #fff; } .fileuploader-theme-thumbnails .fileuploader-item-inner.fileuploader-sorter-placeholder:first-child { border: 1px solid #dedede; } .main-photo .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child, .main-photo .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child .fileuploader-item-inner { border: 1px solid #43a047; } /* icon fix */ .fileuploader-action.fileuploader-action-sort { padding: 8px 0 2px; color: #757575; } .fileuploader-action.fileuploader-action-sort i { font-size: 25px; } .fileuploader-action.fileuploader-action-remove { padding: 5px 0 9px; position: absolute; bottom: 0; width: 100%; color: #e57373; } .fileuploader-action.fileuploader-action-remove:hover { color: #e53935; } .fileuploader-action.fileuploader-action-remove i { font-size: 23px; } .fileuploader-action.fileuploader-action-popup { padding: 2px 0 10px; color: #757575; } .fileuploader-action.fileuploader-action-popup i { font-size: 23px; } .fileuploader-action.fileuploader-action-sort:hover, .fileuploader-action.fileuploader-action-popup:hover { color: #43a047 } .fileuploader-theme-thumbnails .fileuploader-thumbnails-input { line-height: 190px; } .jw-settings .fileuploader-action-popup { padding: 8px 0 10px; }