/** * fileuploader * Copyright (c) 2020 Innostudio.de * Website: https://innostudio.de/fileuploader/ * Version: 2.2 (12-Mar-2020) * Requires: jQuery v1.7.1 or later * License: https://innostudio.de/fileuploader/documentation/#license */ @charset "UTF-8"; .fileuploader-input .fileuploader-input-button, .fileuploader-input .fileuploader-input-caption, .fileuploader-items .fileuploader-item .fileuploader-action, .fileuploader-items .fileuploader-item .fileuploader-progressbar .bar, .fileuploader-items .fileuploader-item .progress-bar2 .fileuploader-progressbar .bar, .fileuploader-items .fileuploader-item span.fileuploader-action-popup, .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-tools li [data-action], .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer button[data-action], .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success { -webkit-transition: .7s cubic-bezier(.17, .67, 0, 1.01); -o-transition: .7s cubic-bezier(.17, .67, 0, 1.01); transition: .7s cubic-bezier(.17, .67, 0, 1.01) } .fileuploader-items .fileuploader-item, .fileuploader-items .fileuploader-item .fileuploader-action, .fileuploader-items .fileuploader-item .fileuploader-item-icon, .fileuploader-items .fileuploader-item .fileuploader-item-image canvas, .fileuploader-items .fileuploader-item .fileuploader-item-image img, .fileuploader-popup, .fileuploader-popup .fileuploader-popup-node { -webkit-animation: fileuploaderFadeIn .2s ease; animation: fileuploaderFadeIn .2s ease } .fileuploader-input .fileuploader-input-button, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success { display: inline-block; margin: 0; padding: 14px 22px; border: none; border-radius: 30px; outline: 0; font-weight: 700; cursor: pointer; vertical-align: middle; text-decoration: none } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button { background: #e6ebf4; color: #90a0bc } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button:hover { background: #edf1f7; transform: translateY(-1px) } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button:active { background: #dfe5f1; transform: translateY(1px) } .fileuploader-input .fileuploader-input-button, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success { background: #fff200; color: #000; border-radius: 0; } .fileuploader-input .fileuploader-input-button:hover, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success:hover { background-position: left; box-shadow: 0 8px 25px rgba(0, 0, 0, .15); transform: translateY(-2px) } .fileuploader-input .fileuploader-input-button:active, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success:active { background-position: right; box-shadow: 0 4px 25px rgba(0, 0, 0, .15); transform: translateY(2px) } .fileuploader-input .fileuploader-input-caption .fileuploader-pending-loader, .fileuploader-items .fileuploader-item .fileuploader-item-image.fileuploader-loading:after, .fileuploader-items .fileuploader-item.upload-pending .fileuploader-action-remove:after, .fileuploader-popup.loading:after { content: ""; position: absolute; min-width: 24px; min-height: 24px; max-width: 48px; max-height: 48px; background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTAgNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjZGRlNGY2IiBkPSJNNDMuOTM1LDI1LjE0NWMwLTEwLjMxOC04LjM2NC0xOC42ODMtMTguNjgzLTE4LjY4M2MtMTAuMzE4LDAtMTguNjgzLDguMzY1LTE4LjY4MywxOC42ODNoNC4wNjhjMC04LjA3MSw2LjU0My0xNC42MTUsMTQuNjE1LTE0LjYxNWM4LjA3MiwwLDE0LjYxNSw2LjU0MywxNC42MTUsMTQuNjE1SDQzLjkzNXoiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMjUgMjUiIHRvPSIzNjAgMjUgMjUiIGR1cj0iMC42cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4gPC9wYXRoPiA8L3N2Zz4=) no-repeat center; background-size: contain } .fileuploader-items .fileuploader-item .fileuploader-item-icon i, .fileuploader-items .fileuploader-item .fileuploader-item-image canvas, .fileuploader-items .fileuploader-item .fileuploader-item-image img, .fileuploader-items .fileuploader-item .fileuploader-item-image.fileuploader-loading:after, .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .point:after, .fileuploader-popup .fileuploader-popup-move:after, .fileuploader-popup.loading:after { left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%) } .fileuploader-items .fileuploader-item .fileuploader-action, .fileuploader-items .fileuploader-item .progress-bar2 span { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .fileuploader-input .fileuploader-input-button, .fileuploader-items .fileuploader-item .fileuploader-item-icon, .fileuploader-items .fileuploader-item .progress-bar2 .fileuploader-progressbar, .fileuploader-popup .fileuploader-cropper, .fileuploader-popup .fileuploader-cropper *, .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-tools li [data-action], .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success, .fileuploader-popup .fileuploader-popup-move, .fileuploader-popup .fileuploader-popup-node .fileuploader-popup-file-icon { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .fileuploader, .fileuploader *, .fileuploader :after, .fileuploader :before, .fileuploader-popup, .fileuploader-popup *, .fileuploader-popup :after, .fileuploader-popup :before { box-sizing: border-box } .fileuploader, .fileuploader-popup { font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: 14px; line-height: normal; text-align: left } .fileuploader button, .fileuploader-popup button { display: inline-block; padding: 0; margin: 0; border: 0; font: inherit; background: 0 0; box-shadow: none } .fileuploader button:focus, .fileuploader-popup button:focus { outline: 0 } .fileuploader { display: block; width: 100%; margin: 16px 0; background: #FFF; border: 2px dashed #c5c5c5; border-radius: 5px; padding: 10px 15px; } .fileuploader-icon-main { display: inline-block; font-size: 18px; color: #789bec } .fileuploader-input { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; border: 1px solid transparent; border-radius: 30px; cursor: pointer } .fileuploader-input .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: 13px 16px; margin-right: 16px; border-radius: 30px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: right; background: url('/upload/filemanager/icon/cloud.png') no-repeat center left; background-size: contain; } .fileuploader-focused .fileuploader-input .fileuploader-input-caption { border-color: #789bec } .fileuploader-input .fileuploader-input-caption .fileuploader-pending-loader { position: relative; display: inline-block; vertical-align: middle; min-height: 22px; margin-right: 6px } .fileuploader-input.fileuploader-dragging { background: #fff; border: 1px solid #ebeef1; border-style: dashed } .fileuploader-input.fileuploader-dragging .fileuploader-input-caption { border-color: transparent } .fileuploader-input.fileuploader-dragging .fileuploader-input-button { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0 } .fileuploader-disabled .fileuploader-input { opacity: .7; cursor: default; pointer-events: none !important } .fileuploader-items .fileuploader-items-list { display: block; margin: 0 -16px; padding: 0; list-style: none } .fileuploader-items .fileuploader-item { position: relative; margin: 0; padding: 20px 16px 20px 22px; border-bottom: 1px solid #ebeef1; animation-duration: .6s } .fileuploader-items .fileuploader-item:last-child { border-bottom: 0; margin-bottom: -16px } .fileuploader-items .fileuploader-item.upload-failed { background: rgba(254, 84, 111, .06) } .fileuploader-items .fileuploader-item.upload-pending .fileuploader-action-remove:after { position: absolute; left: -8px; top: -8px; width: 36px; height: 36px } .fileuploader-items .fileuploader-item .columns { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 2 } .fileuploader-items .fileuploader-item .column-thumbnail { position: relative; width: 36px; height: 36px } .fileuploader-items .fileuploader-item .column-title { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: 16px; padding-right: 16px; color: #74809d; overflow: hidden } .fileuploader-items .fileuploader-item .column-title a { display: inline-block; width: 100%; height: 100%; color: #74809d; text-decoration: none } .fileuploader-items .fileuploader-item .column-title div { width: 100%; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .fileuploader-items .fileuploader-item .column-title span { font-size: 12px; color: #979fb8 } .fileuploader-items .fileuploader-item .column-actions { margin: 0 16px } .fileuploader-items .fileuploader-item .fileuploader-item-image { position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden } .fileuploader-items .fileuploader-item .fileuploader-item-image.fileuploader-loading:after { content: ""; width: 50%; height: 50% } .fileuploader-items .fileuploader-item .fileuploader-item-image canvas, .fileuploader-items .fileuploader-item .fileuploader-item-image img { position: absolute; max-width: none; max-height: 100%; background: #fff } .fileuploader-items .fileuploader-item .fileuploader-item-icon { position: relative; width: 100%; height: 100%; text-align: center; color: #fff; font-size: 11px; border-radius: 4px; cursor: default; background-color: #ddd; background-position: center; background-repeat: no-repeat; background-size: 28px } .fileuploader-items .fileuploader-item .fileuploader-item-icon.is-bright-color { color: #888 } .fileuploader-items .fileuploader-item .fileuploader-item-icon i { position: absolute; display: block; width: 90%; font-style: normal; font-weight: 700; overflow: hidden; white-space: nowrap } .fileuploader-items .fileuploader-item span.fileuploader-action-popup { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(43, 56, 71, .2); border-radius: 6px; cursor: pointer; opacity: 0 } .fileuploader-items .fileuploader-item span.fileuploader-action-popup:hover { opacity: 1 } .fileuploader-items .fileuploader-item span.fileuploader-action-popup:active { background: rgba(43, 56, 71, .4) } .fileuploader-items .fileuploader-item .fileuploader-action { position: relative; display: inline-block; width: 20px; height: 20px; color: #c0c6d2; cursor: pointer; vertical-align: top; text-align: center } .fileuploader-items .fileuploader-item .fileuploader-action+.fileuploader-action { margin-left: 16px } .fileuploader-items .fileuploader-item .fileuploader-action:hover { color: #789bec } .fileuploader-items .fileuploader-item .fileuploader-action:active { color: #668ee9 } .fileuploader-items .fileuploader-item .fileuploader-action i { width: 100%; height: 100%; font-size: 20px; line-height: 20px } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove { color: #fff; background: #fe7676; border-radius: 50%; box-shadow: -1px 1px 6px rgba(254, 118, 118, .8) } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove i { font-size: 14px; text-shadow: none } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove:hover { background-color: #fe8a8a } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove:active { background-color: #fe6262 } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-success { color: #fff; background: #43d084; border-radius: 50%; box-shadow: -1px 1px 6px rgba(67, 208, 132, .8) } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-success i { font-size: 14px; text-shadow: none } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-success:hover { background-color: #53d48f } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-success:active { background-color: #33cc79 } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success i:before { content: "" } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success:active, .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success:hover { background: #fe7676; box-shadow: -1px 1px 6px rgba(254, 118, 118, .8) } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success:active i:before, .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success:hover i:before { content: "" } .fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-action-remove.fileuploader-action-success:active { background-color: #fe6262 } .fileuploader-items .fileuploader-item.file-has-popup span.fileuploader-action-popup { display: block } .fileuploader-items .fileuploader-item .fileuploader-progressbar { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; border-radius: 6px } .fileuploader-items .fileuploader-item .fileuploader-progressbar .bar { position: absolute; left: 0; top: 0; width: 0%; height: 100%; border-radius: 6px; background: #789bec; box-shadow: 0 4px 8px -1px rgba(120, 155, 236, .6) } .fileuploader-items .fileuploader-item .progress-bar2 .fileuploader-progressbar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1 } .fileuploader-items .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, .08); box-shadow: none } .fileuploader-items .fileuploader-item .progress-bar2 span { position: absolute; right: 16px; color: rgba(151, 159, 184, .16); font-size: 48px } .fileuploader-items .fileuploader-item.sorting { background: #fafbfd; border-radius: 6px; opacity: .8; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); z-index: 799 } .fileuploader-items .fileuploader-item.sorting, .fileuploader-items .fileuploader-item.sorting .fileuploader-action, .fileuploader-items .fileuploader-item.sorting .fileuploader-item-icon, .fileuploader-items .fileuploader-item.sorting .fileuploader-item-image canvas, .fileuploader-items .fileuploader-item.sorting .fileuploader-item-image img { -webkit-animation: none; animation: none } .fileuploader-items .fileuploader-sorter-placeholder { background: rgba(0, 0, 0, .03); margin: 0; padding: 0; -webkit-animation: none; animation: none } .file-type-image .fileuploader-item-icon { background-color: #3982fe !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7,8.5C7,7.119,8.119,6,9.5,6S12,7.119,12,8.5S10.881,11,9.5,11S7,9.881,7,8.5z M14.5,11l-4,6l-2-3L5,19h15L14.5,11z'/%3E%3C/svg%3E") } .file-type-image .fileuploader-item-icon i { visibility: hidden; color: #fff } .file-type-audio .fileuploader-item-icon { background-color: #66d043 !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13.21,5h-1.07v9.613c-0.685-0.381-1.62-0.504-2.58-0.271c-1.687,0.405-2.812,1.753-2.511,3.007c0.3,1.254,1.913,1.939,3.6,1.533c1.544-0.369,2.615-1.527,2.558-2.682h0.003V8.34c1.752,1.296,3.29,1.123,3.575,4.21C20.188,7.362,13.354,7.498,13.21,5z'/%3E%3C/svg%3E") } .file-type-audio .fileuploader-item-icon i { visibility: hidden; color: #fff } .file-type-video .fileuploader-item-icon { background-color: #9868ff !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M16.81 11.28L8.487 6.107a.622.642 0 0 0-.326-.1c-.326 0-.592.28-.592.623h-.003l.003 10.738c0 .344.266.623.592.623.123 0 .225-.044.335-.106l8.315-5.166a.91.94 0 0 0 .323-.72.96.96 0 0 0-.323-.721z'/%3E%3C/svg%3E") } .file-type-video .fileuploader-item-icon i { visibility: hidden; color: #fff } .file-ext-rar .fileuploader-item-icon, .file-ext-zip .fileuploader-item-icon { background-color: #ffd236 !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M6,11h12v2H6V11z M6,15h8v2H6V15z M6,7h12v2H6V7z'/%3E%3C/svg%3E") } .file-ext-rar .fileuploader-item-icon i, .file-ext-zip .fileuploader-item-icon i { visibility: hidden; color: #fff } .file-ext-pdf .fileuploader-item-icon { background-color: #ef5350 !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M17.61 13.224c-.336-.115-.752-.16-1.242-.15l-.84.06-.952.158-.906-.958c-.662-.808-1.23-1.684-1.732-2.6l.257-.608.283-.825c.153-.528.227-.985.192-1.37-.117-1.353-.86-2.218-1.9-2.127S9.164 5.88 9.28 7.23c.03.354.16.752.37 1.196a8.11 8.11 0 0 0 .396.743l.56.846-.132.35-1.12 2.846-.705 1.628-.068.012-.797.17-.838.24c-.52.178-.937.38-1.232.63-1.04.87-1.324 1.978-.658 2.77s1.807.707 2.848-.164c.272-.23.523-.563.77-.988a8.87 8.87 0 0 0 .381-.75c.078-.17.137-.35.207-.522l.173-.364 3.614-1 1.18-.256.47.502.64.595c.42.354.808.606 1.174.733 1.283.442 2.376.115 2.712-.862s-.326-1.917-1.6-2.36zM10.88 5.94c.314-.028.595.3.663 1.09.02.215-.034.546-.15.95l-.263.79-.454-.83c-.156-.333-.248-.613-.265-.807-.068-.79.154-1.162.47-1.2zM7.683 16.947c-.183.32-.36.555-.5.68-.606.508-1.04.54-1.242.298s-.096-.66.51-1.168c.166-.14.467-.286.864-.42l.8-.24-.423.85zm5.104-3.19l-2.74.735.353-.847.193-.475.807-2.082c.417.673.878 1.344 1.4 1.976l.5.58-.524.114zm5.35 1.452c-.103.298-.517.422-1.265.163-.203-.07-.484-.254-.805-.524l-.617-.562.947-.075c.367-.01.66.022.844.086.748.258.998.612.896.912z'/%3E%3C/svg%3E") } .file-ext-pdf .fileuploader-item-icon i { visibility: hidden; color: #fff } .file-ext-doc .fileuploader-item-icon, .file-ext-docx .fileuploader-item-icon, .file-ext-rtf .fileuploader-item-icon { background-color: #2372ba !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 17.33V6.67L15 4v16L5 17.33zM7.974 8.5h-1.33l.922 7h1.708l.73-5.22.702 5.22h1.714l.938-7h-1.26l-.645 5.613L10.72 8.5h-1.4l-.77 5.613L7.974 8.5zM19 6h-3v12h3V6z'/%3E%3C/svg%3E") } .file-ext-doc .fileuploader-item-icon i, .file-ext-docx .fileuploader-item-icon i, .file-ext-rtf .fileuploader-item-icon i { visibility: hidden; color: #fff } .file-ext-xls .fileuploader-item-icon, .file-ext-xlsx .fileuploader-item-icon { background-color: #14a73c !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 17.33V6.67L15 4v16L5 17.33zM19 6h-3v12h3V6zm-6.148 9.5l-2.08-3.5 2.043-3.5H11.57l-1.244 2.246c-.047.196-.125.382-.232.554-.088-.173-.158-.354-.21-.54l-1.2-2.26H7.338L9.33 12l-2.182 3.5h1.338l1.396-2.416c.066-.14.117-.385.14-.385a1.58 1.58 0 0 1 .131.385l1.38 2.416h1.32z'/%3E%3C/svg%3E") } .file-ext-xls .fileuploader-item-icon i, .file-ext-xlsx .fileuploader-item-icon i { visibility: hidden; color: #fff } .file-ext-pps .fileuploader-item-icon, .file-ext-ppsx .fileuploader-item-icon, .file-ext-ppt .fileuploader-item-icon, .file-ext-pptx .fileuploader-item-icon { background-color: #f26522 !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M11,13h6.975c-0.256,3.355-3.054,6-6.475,6C7.91,19,5,16.09,5,12.5c0-3.421,2.645-6.219,6-6.475V13zM13,5.025V11h5.975C18.731,7.811,16.189,5.269,13,5.025z'/%3E%3C/svg%3E") } .file-ext-pps .fileuploader-item-icon i, .file-ext-ppsx .fileuploader-item-icon i, .file-ext-ppt .fileuploader-item-icon i, .file-ext-pptx .fileuploader-item-icon i { visibility: hidden; color: #fff } .file-ext-psd .fileuploader-item-icon { background-color: #3172eb !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.853 11.374h.61c.57 0 .997-.112 1.28-.338s.424-.553.424-.983c0-.435-.12-.755-.356-.962S9.2 8.78 8.695 8.78h-.842v2.595zm4.183-1.387c0 .94-.293 1.66-.88 2.157s-1.424.747-2.507.747h-.796V16H6V7.262h2.79c1.06 0 1.867.228 2.417.683s.83 1.137.828 2.042zM18 14.016c0 .686-.238 1.207-.714 1.565s-1.188.538-2.137.538a6.63 6.63 0 0 1-1.243-.098c-.33-.063-.652-.16-.96-.29v-1.506c.367.17.75.303 1.144.4a4.66 4.66 0 0 0 1.122.161c.66 0 .99-.2.99-.573.005-.13-.042-.256-.13-.35a1.93 1.93 0 0 0-.454-.305c-.214-.112-.5-.244-.86-.397-.514-.215-.892-.414-1.133-.597-.225-.164-.405-.38-.526-.63-.11-.24-.163-.53-.163-.877 0-.594.23-1.053.69-1.377s1.112-.487 1.958-.487c.804 0 1.588.175 2.35.525l-.552 1.315c-.307-.134-.62-.25-.938-.353-.287-.092-.588-.138-.89-.138-.54 0-.807.146-.807.437 0 .163.085.305.26.424s.552.297 1.14.532c.52.21.904.408 1.147.592s.422.395.537.633.173.527.173.858z'/%3E%3C/svg%3E") } .file-ext-psd .fileuploader-item-icon i { visibility: hidden; color: #fff } .file-ext-ai .fileuploader-item-icon { background-color: #ff9e00 !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12.58 16l-.6-2.072H8.964L8.364 16h-1.89l2.922-8.738h2.145L14.473 16H12.58zm-1.02-3.618l-.937-3.185-.15-.582-1.07 3.767h2.155zm3.452-4.756c0-.59.328-.886.986-.886s.986.294.986.886c0 .282-.078.502-.244.656-.164.16-.412.238-.742.238-.658 0-.986-.298-.986-.894zM16.908 16h-1.816V9.347h1.816V16z'/%3E%3C/svg%3E") } .file-ext-ai .fileuploader-item-icon i { visibility: hidden; color: #fff } .file-ext-txt .fileuploader-item-icon { background-color: #454545 !important } .file-ext-txt .fileuploader-item-icon i { color: #fff !important } .file-ext-css .fileuploader-item-icon { background-color: #26a69a !important } .file-ext-css .fileuploader-item-icon i { color: #fff !important } .file-ext-html .fileuploader-item-icon { background-color: #cf33a8 !important } .file-ext-html .fileuploader-item-icon i { color: #fff !important } .fileuploader-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #191d1e; z-index: 1090; animation-duration: .4s } .fileuploader-popup.loading:after { width: 48px; height: 48px; z-index: 8 } .fileuploader-popup .fileuploader-popup-preview { position: relative; width: 100%; height: 100%; overflow: auto; z-index: 2 } .fileuploader-popup .fileuploader-popup-node { position: relative; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; max-width: 100%; height: 100%; min-width: 20px; min-height: 20px; padding: 80px 56px 64px; overflow: hidden } .fileuploader-popup .fileuploader-popup-node.is-zoomed { display: block } .fileuploader-popup .fileuploader-popup-node .reader-node { position: relative; max-width: 100%; max-height: 100%; text-align: center; -webkit-transform: translateZ(0); transform: translateZ(0) } .fileuploader-popup .fileuploader-popup-node .reader-node.is-movable { cursor: grab } .fileuploader-popup .fileuploader-popup-node .reader-node.is-amoving:hover, .fileuploader-popup .fileuploader-popup-node .reader-node.is-moving { cursor: grabbing } .fileuploader-popup .fileuploader-popup-node .reader-node.is-amoving:hover .area-move, .fileuploader-popup .fileuploader-popup-node .reader-node.is-amoving:hover .point, .fileuploader-popup .fileuploader-popup-node .reader-node.is-moving .area-move, .fileuploader-popup .fileuploader-popup-node .reader-node.is-moving .point { cursor: grabbing !important } .fileuploader-popup .fileuploader-popup-node.node-astext .reader-node>div, .fileuploader-popup .fileuploader-popup-node.node-audio .reader-node>audio, .fileuploader-popup .fileuploader-popup-node.node-image .reader-node>img, .fileuploader-popup .fileuploader-popup-node.node-video .reader-node>video { width: auto; max-width: 100%; max-height: 100%; min-width: 0; margin: 0; padding: 0; color: #47525d; background: #fafafa; box-shadow: 0 0 18px rgba(0, 0, 0, .4); -webkit-transform: translateZ(0); transform: translateZ(0); border-radius: 0; outline: 0 } .fileuploader-popup .fileuploader-popup-node.node-audio .reader-node audio { width: 450px; border-radius: 34px } .fileuploader-popup .fileuploader-popup-node.node-application .reader-node iframe { width: 100%; height: 100%; border: 0; border-radius: 3px } .fileuploader-popup .fileuploader-popup-node.node-astext .reader-node 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 .fileuploader-popup-node.has-node-centered { display: block } .fileuploader-popup .fileuploader-popup-node.has-node-centered .reader-node { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100% } .fileuploader-popup .fileuploader-popup-node .fileuploader-popup-file-icon { position: relative; display: inline-block; width: 80px; height: 80px; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiA8Zz4gIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4gIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPiA8L2c+IDxnPiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjYmJjYWNmIiBpZD0ic3ZnXzIiIGQ9Im00OSwxNi44NDJsMCw0Mi4xMDVjMCwyLjc5MSAtMi4yNyw1LjA1MyAtNS4wNjksNS4wNTNsLTM4Ljg2MiwwYy0yLjgsMCAtNS4wNjksLTIuMjYyIC01LjA2OSwtNS4wNTNsMCwtNTMuODk0YzAsLTIuNzkxIDIuMjY5LC01LjA1MyA1LjA2OSwtNS4wNTNsMjcuMDM0LDBsMTYuODk3LDE2Ljg0MnoiIGNsYXNzPSJjbHMtMSIvPiAgPHBhdGggZmlsbD0iI2RmZWFlZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0ic3ZnXzQiIGQ9Im00OSwxNS44OTlsMCwyLjA5NmwtMTMuODEzLDBjLTIuODYsMCAtNC4xNzksLTIuMzIgLTQuMTc5LC01LjE4MWwwLC0xMi44MTRsMi4wOTIsMGwxNS45LDE1Ljg5OXoiIGNsYXNzPSJjbHMtMyIvPiA8L2c+PC9zdmc+) no-repeat center; background-size: contain } .fileuploader-popup .fileuploader-popup-node .fileuploader-popup-file-icon div { position: absolute; bottom: 14px; left: 0; padding: 4px 6px; border-radius: 4px; color: #fff; max-width: 100%; background-image: none; word-wrap: break-word } .fileuploader-popup .fileuploader-popup-node .fileuploader-popup-file-icon div.is-bright-color { color: #888 } .fileuploader-popup .fileuploader-popup-node .fileuploader-popup-file-icon div i { text-transform: uppercase; font-style: normal; font-weight: 700; white-space: nowrap; visibility: visible } .fileuploader-popup .fileuploader-popup-content { color: #fdfdfd; text-shadow: 1px 1px 1px rgba(0, 0, 0, .4) } .fileuploader-popup .fileuploader-popup-content ul { list-style: none; margin: 0; padding: 0 } .fileuploader-popup .fileuploader-popup-content ul li { display: inline-block; padding: 0; margin: 0 } .fileuploader-popup .fileuploader-popup-content ul li+li { margin-left: 16px } .fileuploader-popup .fileuploader-popup-header { position: absolute; top: 0; left: 0; display: flex; flex-direction: row; align-items: center; width: 100%; padding: 16px; background: rgba(0, 0, 0, .8); background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 100%); background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 100%); background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 100%); z-index: 2 } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-meta { display: flex; flex: 1; white-space: nowrap; overflow: hidden } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-meta li:first-child { overflow: hidden } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-meta span { display: block; color: #80868b; font-size: 14px } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-meta h5 { max-width: 100%; margin: 4px 0 0; font-size: 14px; font-weight: 700; text-overflow: ellipsis; overflow: hidden } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-info:not(:empty) { flex: 1; margin-left: 16px } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-buttons { margin-left: 16px } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button { padding: 14px 24px; text-shadow: none } .fileuploader-popup .fileuploader-popup-footer { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; background: rgba(0, 0, 0, .8); background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 100%); background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 100%); z-index: 2 } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-tools li [data-action] { display: inline-block; padding: 16px; padding-bottom: 13px; cursor: pointer; text-decoration: none; color: #fdfdfd; border-bottom: 3px solid transparent } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-tools li [data-action] i { display: inline-block; font-size: 18px; margin-top: -4px; margin-right: 6px; vertical-align: middle } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-tools li [data-action]:hover { border-bottom-color: #789bec; color: #fff } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer { font-size: 14px } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer button[data-action] { width: 24px; height: 24px; line-height: 24px; font-size: 16px; border: none; border-radius: 50%; padding: 0; vertical-align: middle; color: #fdfdfd; background: rgba(255, 255, 255, .1); text-shadow: none } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer button[data-action]:hover { background: rgba(255, 255, 255, .3) } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer input { display: inline-block; -webkit-appearance: none; width: 130px; padding: 0; margin: 0 16px; vertical-align: middle; background: 0 0 } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer input:focus { outline: 0 } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer input::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; animate: .2s; box-shadow: none; background: #789bec; border-radius: 6px } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer input::-webkit-slider-thumb { height: 14px; width: 14px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; -webkit-appearance: none; margin-top: -5px; box-shadow: 2px 2px 8px rgba(0, 0, 0, .8) } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer input::-moz-range-track { width: 100%; height: 4px; cursor: pointer; animate: .2s; box-shadow: none; background: #789bec; border-radius: 6px } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer input::-moz-range-thumb { height: 14px; width: 14px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; -webkit-appearance: none; margin-top: -5px; box-shadow: 2px 2px 8px rgba(0, 0, 0, .8) } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer span { display: inline-block; min-width: 40px; text-align: center; margin-left: 6px; color: #fff; vertical-align: middle } .fileuploader-popup .fileuploader-popup-move { position: absolute; display: none; width: 56px; height: 100%; font-size: 24px; bottom: 0; left: 0; color: #fff; opacity: .4; cursor: pointer; z-index: 1 } .fileuploader-popup .fileuploader-popup-move:hover { opacity: 1 } .fileuploader-popup .fileuploader-popup-move:after { position: absolute } .fileuploader-popup .fileuploader-popup-move[data-action=next] { left: auto; right: 0 } .fileuploader-popup .fileuploader-popup-has-arrows .fileuploader-popup-move { display: inline-block } .fileuploader-popup .fileuploader-cropper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(17, 20, 27, .65); z-index: 9 } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0) } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area.has-grid:after, .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area.has-grid:before { content: ""; position: absolute; border: 1px solid rgba(250, 250, 250, .8); opacity: 0; -webkit-transition: all .4s ease; transition: all .4s ease; z-index: 1 } .fileuploader-popup .fileuploader-cropper .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-popup .fileuploader-cropper .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-popup .fileuploader-cropper .fileuploader-cropper-area.has-grid.moving:after, .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area.has-grid.moving:before { opacity: 1 } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .point { position: absolute; width: 24px; height: 24px; z-index: 3 } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .point:after { content: ""; width: 12px; height: 12px; position: absolute; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .4); border-radius: 50% } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .point.point-a { top: -12px; left: -12px; cursor: nw-resize } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .point.point-b { top: -12px; left: 50%; margin-left: -12px; cursor: n-resize } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .point.point-c { top: -12px; right: -12px; cursor: ne-resize } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .point.point-d { top: 50%; right: -12px; margin-top: -12px; cursor: w-resize } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .point.point-e { bottom: -12px; right: -12px; cursor: nw-resize } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .point.point-f { bottom: -12px; left: 50%; margin-left: -12px; cursor: s-resize } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .point.point-g { bottom: -12px; left: -12px; cursor: sw-resize } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .point.point-h { left: -12px; top: 50%; margin-top: -12px; cursor: w-resize } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .area-move { position: absolute; width: 100%; height: 100%; z-index: 2; cursor: move } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .area-move:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, .8) } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .area-image { position: relative; overflow: hidden; width: 100%; height: 100% } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .area-image img { width: auto; height: auto; max-width: none; max-height: none; position: absolute; left: 0; top: 0; -webkit-transform-origin: top left; transform-origin: top left } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area .area-info { position: absolute; bottom: -12px; left: 50%; color: #fff; font-family: sans-serif; line-height: 1; font-size: 12px; text-align: center; padding: 4px 8px; background: rgba(0, 0, 0, .6); border-radius: 14px; white-space: nowrap; opacity: 0; -webkit-transform: translateX(-50%) translateY(100%); transform: translateX(-50%) translateY(100%); -webkit-transition: all .4s ease; transition: all .4s ease; z-index: 2 } .fileuploader-popup .fileuploader-cropper .fileuploader-cropper-area.show-info .area-info { opacity: 0 } @media all and (max-width:768px) { .fileuploader-popup .fileuploader-popup-header { display: block; padding: 0 } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-meta { padding: 16px } .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-buttons { position: fixed; left: 0; bottom: 16px; width: 100%; margin: 0; text-align: center } .fileuploader-popup .fileuploader-popup-node { padding-left: 16px; padding-right: 16px; padding-bottom: 117px } .fileuploader-popup .fileuploader-popup-footer { bottom: 61px; background: 0 0 } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-zoomer { display: none } .fileuploader-popup .fileuploader-popup-footer .fileuploader-popup-tools li a:hover { border-color: transparent } .fileuploader-popup .fileuploader-popup-move { width: 30px } .fileuploader-popup .fileuploader-popup-has-arrows .fileuploader-popup-node { padding-left: 30px; padding-right: 30px } } @-webkit-keyframes fileuploaderFadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fileuploaderFadeIn { from { opacity: 0 } to { opacity: 1 } }