@import "http://fonts.fontstorage.com/import/lato.css"; @font-face { font-family: "jw-action-icon"; src: url("fonts/jw-action-icon.eot"); src: url("fonts/jw-action-icon.eot?#iefix") format("embedded-opentype"), url("fonts/jw-action-icon.woff") format("woff"), url("fonts/jw-action-icon.ttf") format("truetype"), url("fonts/jw-action-icon.svg#jw-action-icon") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "jw-action-icon"; src: url("fonts/jw-action-icon.svg#jw-action-icon") format("svg"); } } @font-face { font-family: 'themify'; src: url('fonts/themify.eot?-fvbane'); src: url('fonts/themify.eot?#iefix-fvbane') format('embedded-opentype'), url('fonts/themify.woff?-fvbane') format('woff'), url('fonts/themify.ttf?-fvbane') format('truetype'), url('fonts/themify.svg?-fvbane#themify') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'Lato'; } .fileuploader, .fileuploader *, .fileuploader :before, .fileuploader :after { box-sizing: border-box; } .fileuploader { display: block; line-height: normal; text-align: left; margin: 40px; } .fileuploader-items-list { display: block; padding: 0; list-style: none; } .fileuploader-item { position: relative; margin: 0; -webkit-animation: fileuploaderSlideIn 0.4s ease; animation: fileuploaderSlideIn 0.4s ease; } .fileuploader-item .fileuploader-item-image img { max-width: none; max-height: 100%; min-height: 100%; } .fileuploader-item .fileuploader-item-image img { 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: fileuploaderFadeIn .2s ease; animation: fileuploaderFadeIn .2s ease; } .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; } .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; } .fileuploader-action i { font-size: 21px; } .fileuploader-action-sort { cursor: move; } .fileuploader-action-sort:hover, .fileuploader-action-sort:active {} @-webkit-keyframes fileuploaderFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fileuploaderFadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fileuploaderScaleIn { from { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes fileuploaderScaleIn { from { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes fileuploaderSlideIn { from { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } to { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes fileuploaderSlideIn { from { -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; } to { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } .fileuploader-theme-thumbnails .fileuploader-thumbnails-input, .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item { display: inline-block; width: 275px; height: 190px; vertical-align: top; margin-right: 25px; margin-bottom: 19px; } .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child { height: 190px; } .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; } .fileuploader-theme-thumbnails .fileuploader-items-list {} .fileuploader-theme-thumbnails .fileuploader-item { -webkit-animation: fileuploaderScaleIn 0.2s ease; animation: fileuploaderScaleIn 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; } .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child, .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child .fileuploader-item-inner { border: 1px solid #43a047; } .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 { 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-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; } .fileuploader-theme-thumbnails .fileuploader-item .progress-holder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child, .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child .fileuploader-item-inner { border: 1px solid #43a047; } .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 } [class^="jw-action-icon-"]:before, [class^="jw-action-icon-"]:after { font-family: jw-action-icon; font-style: normal; } .jw-action-icon-plus:before { content: "\f100"; } .jw-action-icon-plus-two:before { content: "\f101"; } .jw-action-icon-edit-text:before { content: "\f102"; } .jw-action-icon-delete:before { content: "\f103"; } .jw-action-icon-attention:before { content: "\f104"; } .jw-action-icon-archive-add:before { content: "\f105"; } .jw-action-icon-archive-update:before { content: "\f106"; } .jw-action-icon-edit:before { content: "\f107"; } .jw-action-icon-update-two:before { content: "\f108"; } .jw-action-icon-update:before { content: "\f109"; } .jw-action-icon-chat:before { content: "\f10a"; } .jw-action-icon-building:before { content: "\f10b"; } .jw-action-icon-city:before { content: "\f10c"; } .jw-action-icon-view:before { content: "\f10d"; } .jw-action-icon-download:before { content: "\f10e"; } .jw-action-icon-settings:before { content: "\f10f"; } .jw-action-icon-crop:before { content: "\f110"; } .jw-action-icon-interfacecheck:before { content: "\f111"; } .jw-action-icon-heart:before { content: "\f112"; } .jw-action-icon-more-two:before { content: "\f113"; } .jw-action-icon-team:before { content: "\f114"; } .jw-action-icon-move:before { content: "\f115"; } .jw-action-icon-transform:before { content: "\f116"; } .jw-action-icon-rotate:before { content: "\f117"; } .jw-action-icon-more:before { content: "\f118"; } .jw-action-icon-stat:before { content: "\f119"; } .fileuploader-theme-thumbnails .fileuploader-thumbnails-input { line-height: 190px; } .fileuploader-theme-thumbnails .fileuploader-thumbnails-input { line-height: 190px; } .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; } .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child, .fileuploader-theme-thumbnails .fileuploader-items-list .fileuploader-item:first-child .fileuploader-item-inner { border: 1px solid #43a047; } /* 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; } /* 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; } /* fileuploader popup */ .fileuploader-popup { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); z-index: 90; -webkit-animation: fileuploaderFadeIn 0.4s ease; animation: fileuploaderFadeIn 0.4s ease; } .fileuploader-popup-preview { width: 60%; height: 100%; margin: 40px auto 0; z-index: 2; } .fileuploader-popup-preview .node { position: relative; display: block; width: 100%; height: 100%; min-height: 10px; text-align: center; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: fileuploaderSlideInDown 0.4s; animation: fileuploaderSlideInDown 0.4s; } .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: 100%; margin-top: 30px; } .fileuploader-popup-preview .tools ul { display: table; list-style: none; margin: 0 auto; padding: 0; -webkit-animation: fileuploaderSlideIn 0.4s; animation: fileuploaderSlideIn 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; } .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 { text-align: center; margin-top: 65px; -webkit-animation: fileuploaderSlideIn 0.4s; animation: fileuploaderSlideIn 0.4s; } .fileuploader-popup-button { background: #f3f3f3; cursor: pointer; font-family: "Lato"; padding: 7px 22px 11px; color: #757575; font-size: 16px; font-weight: bold; border-radius: 4px; border: 1px solid #dedede; -webkit-transition-property: background; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease; } .fileuploader-popup-button.button-success { margin-left: 22px; 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; } .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; }