adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
2 lines (1 loc) • 4.67 kB
CSS
.adui-upload-img{position:relative;display:inline-block;width:72px;height:72px;background-color:#fdfdfd;border:2px dashed #ebebeb;border-radius:6px;cursor:pointer;overflow:hidden;transition:var(--motion-duration-base) var(--ease-in-out) all}.adui-upload-img.adui-upload-img-disabled{cursor:not-allowed}.adui-upload-img:hover:not(.adui-upload-img-noIcon):not(.adui-upload-img-disabled){background-color:#fafafa}.adui-upload-img:hover:not(.adui-upload-img-noIcon):not(.adui-upload-img-disabled) .adui-upload-img-cover,.adui-upload-img:hover:not(.adui-upload-img-noIcon):not(.adui-upload-img-disabled) .adui-upload-img-operations,.adui-upload-img:hover:not(.adui-upload-img-noIcon):not(.adui-upload-img-disabled) .adui-upload-img-remove{opacity:1;visibility:visible}.adui-upload-img-icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.adui-upload-img-file,.adui-upload-img-cover,.adui-upload-img-operations,.adui-upload-img-upload-element{position:absolute;top:0;left:0;width:100%;height:100%}.adui-upload-img-file{-o-object-fit:cover;object-fit:cover}.adui-upload-img-cover{z-index:1;background-color:rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:var(--motion-duration-base) var(--ease-in-out) all}.adui-upload-img-hasOperation .adui-upload-img-cover{background-color:rgba(0,0,0,.8)}.adui-upload-img-operations{z-index:2;display:flex;align-items:center;opacity:0;visibility:hidden;transition:var(--motion-duration-base) var(--ease-in-out) all}.adui-upload-img-operations-divider{flex:none;width:1px;height:12px;background-color:rgba(255,255,255,.25)}.adui-upload-img-operations-item{flex:1;display:flex;align-items:center;justify-content:center;height:100%;color:rgba(255,255,255,.6);text-shadow:0 0 1px rgba(0,0,0,.25);transition:inherit;transform:scale(0.8333333333)}.adui-upload-img-operations-item:hover{color:#fff}.adui-upload-img-remove{position:absolute;z-index:2;top:4px;right:4px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;background-color:rgba(0,0,0,.7);border-radius:100%;opacity:0;visibility:hidden;cursor:pointer;transition:var(--motion-duration-base) var(--ease-in-out) all}.adui-upload-img-remove svg{fill:#c4c4c4;transition:inherit}.adui-upload-img-remove .adui-icon-interactive-cover{display:none}.adui-upload-img-remove:hover svg{fill:#fff}.adui-upload-img-progress{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:calc(100% - 16px);height:3px;background-color:#f0f0f0;opacity:0;visibility:hidden}.adui-upload-img-progress i{display:block;height:100%;background-color:var(--primary-color);transition:all .35s cubic-bezier(0.08, 0.82, 0.17, 1)}.adui-upload-img-preview{position:fixed;z-index:var(--z-index-tooltip);top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.7);cursor:default;opacity:0;visibility:hidden;transition:var(--motion-duration-base) var(--ease-in-out) all}.adui-upload-img-preview-inner{position:absolute;top:50%;left:50%;transform:translate(-50%, -55%);display:flex;max-width:90vw}.adui-upload-img-preview-inner img{max-width:calc(100% - 52px);height:auto}.adui-upload-img-preview-inner svg{margin-left:10px}.adui-upload-img-preview-file{box-shadow:var(--box-shadow-elevation-4)}.adui-upload-img-preview-show{opacity:1;visibility:visible}.adui-upload-img-uploaded-inner{opacity:0;visibility:hidden}.adui-upload-img-unuploaded-inner{opacity:1;visibility:visible}.adui-upload-img-uploaded{border-color:rgba(0,0,0,0);box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}.adui-upload-img-uploaded .adui-upload-img-uploaded-inner{opacity:1;visibility:visible}.adui-upload-img-uploaded .adui-upload-img-unuploaded-inner{opacity:0;visibility:hidden}.adui-upload-img-progressing .adui-upload-img-upload-element{opacity:0;visibility:hidden}.adui-upload-img-progressing .adui-upload-img-progress{opacity:1;visibility:visible}.adui-upload-file{position:relative;display:flex;align-items:center;justify-content:space-between;padding-right:8px;padding-left:8px;width:240px;height:36px;overflow:hidden;background-color:#fff;border-radius:4px;box-shadow:0 0 0 1px rgba(223,223,223,.45)}.adui-upload-file-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#f0f0f0;opacity:0;visibility:hidden}.adui-upload-file-progress i{display:block;height:100%;background-color:var(--primary-color);transition:all .35s cubic-bezier(0.08, 0.82, 0.17, 1)}.adui-upload-file-link,.adui-upload-file-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adui-upload-file-link{color:var(--ad-blue)}.adui-upload-file-icon{margin-left:4px}.adui-upload-file-progressing .adui-upload-file-progress{opacity:1;visibility:visible}