/** * EZ Media Uploader * Company: SovWare * Developer: Syed Galib Ahmed * Version: 1.0 * Initial Release: 24 December, 2019 * */ .ez-media-uploader { position: relative; padding: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 250px; border: 2px dashed #ccc; background-color: #f1f1f1; border-radius: 5px; } .ezmu__old-files, .ezmu-dictionary { display: none; } .ezmu__media-picker-section, .ezmu__preview-section, .ezmu__status-section { display: none; width: 100%; } .ezmu__drop-zone-section { display: none; height: 100%; position: absolute; right: 0; left: 0; top: 0; bottom: 0; z-index: 999; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; overflow: hidden; background: #f2f2f2; } .ezmu__media-picker-section.show, .ezmu__preview-section.show, .ezmu__status-section.show { display: block; /* position: relative; */ } .ezmu__media-picker-section.ezmu--show, .ezmu__preview-section.ezmu--show, .ezmu__status-section.ezmu--show { display: block; /* position: relative; */ } .ez-media-uploader.highlight { border-color: #2b2b2b; } .ez-media-uploader.highlight *, .ez-media-uploader.drag-enter * { pointer-events: none; } .ez-media-uploader.highlight .ezmu__drop-zone-section { display: -webkit-box; display: -ms-flexbox; display: flex; } .ezmu__media-picker-controls { text-align: center; } .ezmu__media-picker-icon-wrap-upload { margin-bottom: 20px; display: inline-block; margin-bottom: 20px; width: 60px; height: 60px; vertical-align: bottom; } .ezmu__media-picker-icon-wrap-avater { display: inline-block; width: 100px; height: 100px; vertical-align: bottom; } .ezmu__icon { display: inline-block; background-repeat: no-repeat !important; background-position: center; background-size: contain; width: 100%; height: 100%; -webkit-filter: invert(48%) sepia(0%) saturate(2537%) hue-rotate(86deg) brightness(118%) contrast(119%); filter: invert(48%) sepia(0%) saturate(2537%) hue-rotate(86deg) brightness(118%) contrast(119%); } .ezmu-icon-upload { background-image: url('../images/cloud-upload-alt-solid.svg'); } .ezmu-icon-avater { background-image: url('../images/user-alt-solid.svg'); } .ezmu__media-picker-buttons { margin-top: 20px; text-align: center; } .ezmu__upload-button-wrap { display: inline-block; } input[type="file"].ezmu__file-input { display: none; } input[type="file"].ezmu__file-input + .ezmu__input-label { cursor: pointer; } .ezmu__btn { display: inline-block; margin-bottom: 0.5rem; padding: 8px 15px; color: #fff; cursor: pointer; border: none; border-radius: 4px; -webkit-transition: all ease-in-out 300ms; -o-transition: all ease-in-out 300ms; transition: all ease-in-out 300ms; background-color: #2b2b2b; background-color:#fff; color:#2b2b2b; -webkit-box-shadow: 0 12px 8px -10px#ccc; box-shadow: 0 12px 8px -10px#ccc; } .ezmu__btn:hover { color: #fff; background-color: #007bff; } .ezmu__loading-section { display: none; position: absolute; right: 0; left: 0; top: 0; bottom: 0; background-color: #f2f2f2; z-index: -99; } .ezmu__loading-section.ezmu--show { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 9999; } .ezmu__loading-icon { font-size: 4rem; } .ezmu__loading-icon-img { width: 64px; height: auto; -webkit-animation: ezmuSpin linear infinite 2s; animation: ezmuSpin linear infinite 2s; } .ezmu__loading-icon-img-bg { width: 64px; height: 64px; display: inline-block; background-image: url('../images/spinner-solid.svg'); background-repeat: no-repeat !important; background-position: center; background-size: contain; -webkit-animation: ezmuSpin linear infinite 2s; animation: ezmuSpin linear infinite 2s; } @-webkit-keyframes ezmuSpin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes ezmuSpin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .ezmu__thumbnail-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 15px; } .ezmu__thumbnail-list-item { position: relative; border-radius: 5px; overflow: hidden; max-width: calc(50% - 7.5px); -ms-flex-preferred-size: calc(50% - 7.5px); flex-basis: calc(50% - 7.5px); } .ezmu__featured_tag { position: absolute; top: 5px; left: 5px; padding: 5px 10px; color: #000; border-radius: 3px; display: inline-block; font-size: 12px; background-color: rgba(255, 255, 255, 0.8); } .ezmu__thumbnail-list-item_front { position: absolute; z-index: 99; left: 0; right: 0; top: 0; bottom: 0; } .ezmu__thumbnail-front-item { position: absolute; } .ezmu__front-item__close { right: 5px; top: 5px; } .ezmu__front-item__close-icon { position: relative; width: 25px; height: 25px; border-radius: 50%; color: #222; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; -webkit-transition: background-color ease-in .2s; -o-transition: background-color ease-in .2s; transition: background-color ease-in .2s; background-color: rgba(255, 255, 255, 0.8); background-image: url('../images/times-solid-dark.svg'); background-repeat: no-repeat !important; background-size: 8px; background-position: center; } .ezmu__front-item__close-icon:hover { color: #fff; background-color: rgba(255, 0, 0, 0.7); background-image: url('../images/times-solid-light.svg'); } .ezmu__front-item__close-icon-img { width: 12px; } .ezmu__front-item__close-btn { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 99; } .ezmu__front-item__featured { display: none; top: 5px; left: 5px; } .ezmu__front-item__featured.ezmu--show { display: block; } .ezmu__front-item__featured-text { position: static; background-color: rgba(255, 255, 255, 0.8); padding: 5px 10px; color: #000; border-radius: 3px; display: inline-block; font-size: 12px; } .ezmu__front-item__thumbnail-size { bottom: 5px; right: 5px; } .ezmu__front-item__thumbnail-size-text { position: static; display: inline-block; background-color: rgba(255, 255, 255, 0.8); padding: 5px; border-radius: 3px; font-size: 12px; } .ezmu__front-item__thumbnail-size-text.has-error { color: #fff; background-color: rgba(255, 32, 32, 0.8); } .ezmu__front-item__sort-buttons { position: absolute; bottom: 5px; left: 5px; } .ezmu__front-item__sort-button { position: relative; width: 30px; height: 30px; display: inline-block; cursor: pointer; text-align: center; border: none; -webkit-transition: background-color ease-in .1s; -o-transition: background-color ease-in .1s; transition: background-color ease-in .1s; background-color: rgba(255, 255, 255, 0.8); background-position: center; background-repeat: no-repeat !important; background-size: 12px; font-size: 10px; } .ezmu__front-item__sort-button.ezmu--sort-up { background-image: url('../images/chevron-right-solid.svg'); border-radius: 0 3px 3px 0; } .ezmu__front-item__sort-button.ezmu--sort-down { background-image: url('../images/chevron-left-solid.svg'); border-radius: 3px 0 0 3px; } .ezmu__front-item__sort-button:hover { background-color: rgba(255, 255, 255, 1); } .ezmu__front-item__sort-button-skin { position: absolute; right: 0; left: 0; top: 0; bottom: 0; z-index: 99; } .ezmu__thumbnail-list-item_back { width: 140px; height: 140px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #d4d4d4; } @media screen and (max-width: 1399px) and (min-width: 1199px) { .ezmu__thumbnail-list-item_back{ width: 100px; height: 100px; } } .ezmu__thumbnail-img { display: block; width: 100%; height: 100% !important; -o-object-fit: cover; object-fit: cover; } .ezmu__thumbnail-img-bg { display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat !important; background-size: 100px 100px; background-image: url('../images/file-solid.svg'); } .ezmu__thumbnail-icon { display: block; margin: 0 auto; width: 100px; height: 100px; -o-object-fit: contain; object-fit: contain; } .ezmu__thumbnail-list-item.ezmu__thumbnail_avater { width: 140px; height: 140px; border-radius: 50%; } @media screen and (max-width: 1399px) and (min-width: 1199px) { .ezmu__thumbnail-list-item.ezmu__thumbnail_avater{ width: 100px; height: 100px; } } .ezmu__thumbnail-list-item.ezmu__thumbnail_avater .ezmu__thumbnail-img { -o-object-fit: cover; object-fit: cover; } .ezmu__thumbnail-list-item.ezmu__thumbnail_avater .ezmu__front-item__close { top: unset; right: unset; bottom: 10px; left: 50%; -webkit-transform: scale(0.9) translateX(-50%); -ms-transform: scale(0.9) translateX(-50%); transform: scale(0.9) translateX(-50%); } .ezmu__info-list { padding: 0; margin: 0; text-align: center; max-width: 800px; width: 100%; } .ezmu__info-list-item { list-style: none; display: inline-block; margin-bottom: 5px; margin-right: 20px; color:#777; font-size: 14px; -webkit-transition: all ease-in-out 300ms; -o-transition: all ease-in-out 300ms; transition: all ease-in-out 300ms; } .ezmu__info-list-item::before { content: ' '; display: inline-block; margin-right: 5px; margin-top: 4px; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: 8px 8px; background-image: url('../images/info-solid.svg'); background-color:#c4c4c4; vertical-align: top; border-radius: 50%; -webkit-transition: all ease-in-out 300ms; -o-transition: all ease-in-out 300ms; transition: all ease-in-out 300ms; } .ezmu__info-list-item.is-featured { color: #1aa663; } .ezmu__info-list-item.is-featured::before { background-image: url('../images/info-solid-light.svg'); background-color: #1aa663; } .ezmu__info-list-item.has-error { color: #f25454; } .ezmu__info-list-item.has-error::before { background-image: url('../images/info-solid-light.svg'); background-color: #f25454; } .ezmu_alert { margin: 10px auto; max-width: 300px; width: 100%; text-align: center; padding: 5px; border-radius: 3px; color: gray; background-color:#fff; } .ezmu_alert_error { color:#600000; background-color:#fbb; } .ezmu__titles-area { display: block; } .ezmu__title-1, .ezmu__title-2, .ezmu__title-3 { display: block; margin-bottom: 1rem; text-align: center; } .ezmu__title-1 { font-size: 2rem; } .ezmu__title-2 { font-size: 1.5rem; } .ezmu__title-3 { font-size: 1.2rem; }