antd-mobile
Version:
<div align="center">
99 lines (98 loc) • 2.24 kB
CSS
.adm-image-uploader {
--cell-size: 80px;
--gap: 12px;
---gap: var(--gap);
---gap-horizontal: var(--gap-horizontal, var(--gap));
---gap-vertical: var(--gap-vertical, var(--gap));
}
.adm-image-uploader-grid,
.adm-image-uploader-space {
--gap: var(---gap);
--gap-horizontal: var(---gap-horizontal);
--gap-vertical: var(---gap-vertical);
}
.adm-image-uploader-cell {
position: relative;
width: var(--cell-size);
height: var(--cell-size);
border-radius: 4px;
overflow: hidden;
}
.adm-image-uploader-cell-fail {
border: red solid 1px;
box-sizing: border-box;
}
.adm-image-uploader-cell-delete {
position: absolute;
top: 0;
right: 0;
width: 14px;
height: 14px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 0 0 0 12px;
font-size: 8px;
color: var(--adm-color-white);
cursor: pointer;
}
.adm-image-uploader-cell-delete-icon {
position: absolute;
left: 4px;
top: 3px;
}
.adm-image-uploader-cell-mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: var(--adm-color-white);
background-color: rgba(50, 50, 51, 0.88);
}
.adm-image-uploader-cell-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
box-sizing: border-box;
padding-top: 8px;
}
.adm-image-uploader-cell-mask-message {
display: inline-block;
padding: 6px 4px;
font-size: var(--adm-font-size-4);
}
.adm-image-uploader-cell-image {
width: var(--cell-size);
height: var(--cell-size);
}
.adm-image-uploader-upload-button-wrap {
position: relative;
}
.adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
background-color: var(--adm-color-box);
text-align: center;
line-height: var(--cell-size);
display: block;
}
.adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button-icon {
color: var(--adm-color-weak);
font-size: 32px;
}
.adm-image-uploader-upload-button-wrap .adm-image-uploader-input {
cursor: pointer;
position: absolute;
opacity: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 4px;
}
.adm-image-uploader .adm-image-uploader-gap-measure {
position: absolute;
left: 0;
top: 0;
height: var(--gap-horizontal);
width: 0;
}