You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

102 lines
2.9 KiB

.upload {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border: 2px dashed rgba(21, 141, 247, 0.3);
border-radius: 4px;
height: 120px;
cursor: pointer; }
.upload .upload-placeholder {
color: rgba(21, 141, 247, 0.5);
font-style: italic;
font-size: 0.875em; }
.upload:hover, .upload.is-upload-hover {
border-color: rgba(21, 141, 247, 0.35);
background-color: rgba(21, 141, 247, 0.05); }
.upload.is-upload-error {
border-color: rgba(238, 36, 85, 0.35);
background-color: rgba(238, 36, 85, 0.05); }
.upload-target {
background-color: rgba(21, 141, 247, 0.02);
border: 1px solid rgba(21, 141, 247, 0.1);
padding: 4px 8px; }
.upload-target:empty {
padding: 0;
border: none; }
.upload-target .upload-item {
display: flex;
font-size: 0.875em;
border-bottom: 1px solid rgba(17, 17, 19, 0.05);
padding-top: 4px;
padding-bottom: 4px; }
.upload-target .upload-item .close {
margin-top: 2px;
margin-right: 4px; }
.upload-target .upload-item em {
font-style: normal;
color: rgba(17, 17, 19, 0.5);
font-size: 0.75em;
margin-left: 4px; }
.upload-target .upload-item:last-child {
border-bottom-color: transparent; }
.upload-box {
margin-right: -16px;
margin-bottom: -16px; }
.upload-box:after {
content: '';
display: table;
clear: both; }
.upload-box .upload-item {
float: left;
width: 120px;
height: 120px;
border: 2px dashed rgba(21, 141, 247, 0.3);
background-color: #fff;
cursor: pointer;
border-radius: 6px;
position: relative;
font-size: 0;
line-height: 0;
margin-right: 16px;
margin-bottom: 16px; }
.upload-box .upload-item.is-uploaded {
border-style: solid;
border-color: rgba(21, 141, 247, 0.35); }
.upload-box .upload-item img {
position: relative;
z-index: 2;
object-fit: cover;
height: 100%;
width: 100%;
border-radius: 6px; }
.upload-box .upload-item .close {
position: absolute;
z-index: 3;
top: -4px;
right: -8px;
background-color: #ee2455;
color: #fff;
opacity: 1; }
.upload-box .upload-item .close:hover {
background-color: #111113; }
.upload-box .upload-item:after {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
margin-left: -12px;
margin-top: -20px;
content: '+';
font-size: 40px;
line-height: 1;
font-weight: normal;
color: rgba(21, 141, 247, 0.5); }
.upload-box .upload-item:hover, .upload-box .upload-item.is-upload-hover {
border-color: rgba(21, 141, 247, 0.35);
background-color: rgba(21, 141, 247, 0.05); }
.upload-box .upload-item.is-upload-error {
border-color: rgba(238, 36, 85, 0.35);
background-color: rgba(238, 36, 85, 0.05); }