/* jQuery Custom Input File Plugin - version 1.0 Copyright 2014, Ángel Espro, www.aesolucionesweb.com.ar, Licence : GNU General Public License Site: www.aesolucionesweb.com.ar/plugins/custom-input-file You must not remove these lines. Read gpl.txt for further legal information. */ /*File Picker*/ .cif-file-picker { position:relative; width: 100%; height:180px; padding:0; border:4px dashed var(--mainColor-50); cursor: pointer; opacity: 0.5; display:flex; flex-direction: column; justify-content: center; align-items: center; box-sizing:border-box; -moz-box-sizing:border-box; } .cif-icon-picker { background:url(cif-icons-20xy.png) 0 0 no-repeat; width:80px; height:60px; display:inline-block; } .cif-file-picker h3 { margin:0; font-size:20px; text-align:center; } .cif-file-picker p { margin:0 0 10px 0; font-size:16px; text-align:center; } .cif-file-picker:hover { opacity: 1; } .cif-file-picker.dragover:not(.inactive) { border-color: #46be5e; opacity: 1; box-shadow:0 0 50px rgba(0,0,0,.5); } .cif-file-picker.inactive { opacity: 0.2; } .cif-file-picker.inactive.dragover { cursor:pointer; } /*Container item File*/ .cif-file-container { height: 165px; max-height: 165px; overflow-y: auto; margin: 0; padding: 0; } .cif-parent { cursor: pointer; position: relative; padding: 5px; margin: 0; transition: 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .foto-file-row .field-wr-int { position: relative; } /*CIF Close*/ .cif-close { background: var(--danger); color: var(--white); width: 22px; height: 22px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .cif-close:hover { border: 1px solid var(--danger); background: var(--white); color: var(--danger); } /*Container All type*/ .cif-file-container.cif-container-all-type { display: none; } .cif-file-container.cif-container-all-type .cif-file-row { margin: 0; } .cif-file-container.cif-container-all-type .cif-file-row:nth-child(odd) { background: #EFEFEF; } .cif-file-container.cif-container-all-type .cif-parent { width:100%; box-sizing:border-box; -moz-box-sizing:border-box; padding:10px 30px 10px 10px; } .cif-file-container.cif-container-all-type .cif-all-type { font-size:0.65rem; line-height:1.25; } .cif-file-container.cif-container-all-type .cif-file-size { opacity: 0.8; } .cif-file-container.cif-container-all-type .cif-close { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); } /*Container Image*/ .cif-file-container.cif-container-image-type{display: none} .cif-file-container.cif-container-image-type .cif-file-row{border-bottom:1px solid #f2f2f2; padding: 20px 0} .cif-file-container.cif-container-image-type .cif-parent{padding-top:30px;} .cif-file-container.cif-container-image-type .cif-close { position: absolute; top: 10px; right: 10px; } .cif-img{max-height:300px; max-width:380px;} /*message*/ #cif-msg-wr { position:fixed; z-index:10000; top: 100px; } #cif-msg-wr .cif-msg-close { opacity: 0.5; position: absolute; right: 0; top: 0; padding: 2px 5px; } #cif-msg-wr .cif-msg-close:hover { opacity: 1; } /*Progressbar*/ .cf-progressbar-wr { position: fixed; top: 0; left: 0; background: rgba(0,0,0,.7); width: 100%; height: 100%; z-index: 50000; } .cf-progressbar { height: 12px; position: absolute; top: 50%; margin-top: -6px; left: 50%; margin-left:-125px; width:250px; background: #dadada; padding: 2px; box-sizing: border-box; border: 1px solid #000; } .cf-progressbar > span { display: block; height: 100%; background: rgb(43,194,83); background-image: url(bg-progress-bar.png); position: relative; transition: width 200ms; overflow: hidden; } /*Jcrop for Custom Inpur File plugin*/ .jcrop-holder .preview-pane { display: block; position: absolute; z-index: 2000; top: 0px; left: 102%; padding: 6px; border: 1px rgba(0,0,0,.4) solid; background-color: white; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); } .preview-pane .preview-container { overflow: hidden;}