vue3-picture-input
Version:
This is a simple input for pictures
2 lines (1 loc) • 4.51 kB
CSS
button[data-v-517cfa18]{border:none;background:#dadada;font-weight:600;font-size:14px;width:calc(13rem + 20px)}.container[data-v-517cfa18]{display:flex;flex-direction:column;justify-content:space-between;align-items:center;border:2px dashed #000;padding:5px;gap:35px;border-radius:10px;width:calc(13rem + 20px);min-height:1rem;max-height:30rem}.input[data-v-517cfa18]{display:none}.btn[data-v-517cfa18]{cursor:pointer}image[data-v-517cfa18]{max-width:100%;max-height:80%}.close[data-v-517cfa18]{cursor:pointer;position:relative;padding-right:5px;padding-bottom:35px;margin-right:auto;margin-left:auto;width:20px}.close-before[data-v-517cfa18],.close-after[data-v-517cfa18]{content:"";position:absolute;top:0;right:0;width:24px;height:4px;background:red}.close-before[data-v-517cfa18]{transform:rotate(45deg)}.close-after[data-v-517cfa18]{transform:rotate(-45deg)}.close[data-v-517cfa18]:hover{opacity:75%}.hover-opacity-10[data-v-517cfa18]:hover{opacity:10%}.hover-opacity-20[data-v-517cfa18]:hover{opacity:20%}.hover-opacity-30[data-v-517cfa18]:hover{opacity:30%}.hover-opacity-40[data-v-517cfa18]:hover{opacity:40%}.hover-opacity-50[data-v-517cfa18]:hover{opacity:50%}.hover-opacity-60[data-v-517cfa18]:hover{opacity:60%}.hover-opacity-70[data-v-517cfa18]:hover{opacity:70%}.hover-opacity-80[data-v-517cfa18]:hover{opacity:80%}.hover-opacity-90[data-v-517cfa18]:hover{opacity:90%}.hover-opacity-100[data-v-517cfa18]:hover{opacity:100%}.size-4[data-v-517cfa18]{width:calc(1rem + 20px);height:1rem}.size-8[data-v-517cfa18]{width:calc(2rem + 20px);height:2rem}.size-12[data-v-517cfa18]{width:calc(3rem + 20px);height:3rem}.size-16[data-v-517cfa18]{width:calc(4rem + 20px);height:4rem}.size-20[data-v-517cfa18]{width:calc(5rem + 20px);height:5rem}.size-24[data-v-517cfa18]{width:calc(6rem + 20px);height:6rem}.size-28[data-v-517cfa18]{width:calc(7rem + 20px);height:7rem}.size-32[data-v-517cfa18]{width:calc(8rem + 20px);height:8rem}.size-36[data-v-517cfa18]{width:calc(9rem + 20px);height:9rem}.size-40[data-v-517cfa18]{width:calc(10rem + 20px);height:10rem}.size-44[data-v-517cfa18]{width:calc(11rem + 20px);height:11rem}.size-48[data-v-517cfa18]{width:calc(12rem + 20px);height:12rem}.size-52[data-v-517cfa18]{width:calc(13rem + 20px) + 20px;height:13rem}.size-56[data-v-517cfa18]{width:calc(14rem + 20px);height:14rem}.size-60[data-v-517cfa18]{width:calc(15rem + 20px);height:15rem}.size-64[data-v-517cfa18]{width:calc(16rem + 20px);height:16rem}.size-68[data-v-517cfa18]{width:calc(17rem + 20px);height:17rem}.size-72[data-v-517cfa18]{width:calc(18rem + 20px);height:18rem}.size-76[data-v-517cfa18]{width:calc(19rem + 20px);height:19rem}.w-4[data-v-517cfa18]{width:calc(1rem + 20px)}.w-8[data-v-517cfa18]{width:calc(2rem + 20px)}.w-12[data-v-517cfa18]{width:calc(3rem + 20px)}.w-16[data-v-517cfa18]{width:calc(4rem + 20px)}.w-20[data-v-517cfa18]{width:calc(5rem + 20px)}.w-24[data-v-517cfa18]{width:calc(6rem + 20px)}.w-28[data-v-517cfa18]{width:calc(7rem + 20px)}.w-32[data-v-517cfa18]{width:calc(8rem + 20px)}.w-36[data-v-517cfa18]{width:calc(9rem + 20px)}.w-40[data-v-517cfa18]{width:calc(10rem + 20px)}.w-44[data-v-517cfa18]{width:calc(11rem + 20px)}.w-48[data-v-517cfa18]{width:calc(12rem + 20px)}.w-52[data-v-517cfa18]{width:calc(13rem + 20px) + 20px}.w-56[data-v-517cfa18]{width:calc(14rem + 20px)}.w-60[data-v-517cfa18]{width:calc(15rem + 20px)}.w-64[data-v-517cfa18]{width:calc(16rem + 20px)}.w-68[data-v-517cfa18]{width:calc(17rem + 20px)}.w-72[data-v-517cfa18]{width:calc(18rem + 20px)}.w-76[data-v-517cfa18]{width:calc(19rem + 20px)}.w-80[data-v-517cfa18]{width:calc(20rem + 20px)}.w-84[data-v-517cfa18]{width:calc(21rem + 20px)}.w-88[data-v-517cfa18]{width:calc(22rem + 20px)}.w-92[data-v-517cfa18]{width:calc(23rem + 20px)}.w-96[data-v-517cfa18]{width:calc(24rem + 20px)}.w-full[data-v-517cfa18]{width:100%}.border-none[data-v-517cfa18]{border:none}.border[data-v-517cfa18]{border-width:1px}.border-2[data-v-517cfa18]{border-width:2px}.border-3[data-v-517cfa18]{border-width:3px}.border-4[data-v-517cfa18]{border-width:4px}.border-5[data-v-517cfa18]{border-width:5px}.border-6[data-v-517cfa18]{border-width:6px}.border-7[data-v-517cfa18]{border-width:7px}.border-8[data-v-517cfa18]{border-width:8px}.border-9[data-v-517cfa18]{border-width:9px}.border-10[data-v-517cfa18]{border-width:10px}.border-solid[data-v-517cfa18]{border-style:solid}.border-dashed[data-v-517cfa18]{border-style:dashed}.border-dotted[data-v-517cfa18]{border-style:dotted}.border-double[data-v-517cfa18]{border-style:double}