Set uuid v4 for each upload group as ".uploadQueueUid" Add max upload files as ".uploadQueueMax" Change to upload files to ".uploadQueueOpen" (from ".uploadQueueMax") Extract retrun message from two types for messages that could come from the server
163 lines
2.8 KiB
CSS
163 lines
2.8 KiB
CSS
/*
|
|
CSS Other
|
|
*/
|
|
|
|
/* the overlay background black cover */
|
|
.overlayBoxElement {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
height: 100%;
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 98;
|
|
}
|
|
|
|
/* the progress guruguru */
|
|
.progress {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border: 20px solid rgba(255, 255, 255, 0.25);
|
|
border-left-color: rgba(3, 155, 229 ,1);
|
|
border-top-color: rgba(3, 155, 229 ,1);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
animation: rotate 600ms infinite linear;
|
|
/* align */
|
|
left: 0;
|
|
top: 0;
|
|
position: absolute;
|
|
z-index: 120;
|
|
}
|
|
/* Animation for above progress */
|
|
@keyframes rotate {
|
|
to {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
|
|
.tac { text-align: center; }
|
|
.mg-30 { margin: 30px; }
|
|
.mg-5 { margin: 5px; }
|
|
.flx-ss { display: flex; }
|
|
.hide { display: none; }
|
|
.uploaded { margin-top: 20px; }
|
|
.title { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; }
|
|
|
|
.afus-status-delete {
|
|
color: orange;
|
|
font-weight: bold;
|
|
}
|
|
.afus-status-progress {
|
|
color: rgb(37, 140, 191);
|
|
}
|
|
.afus-status-progress-bar {
|
|
height: 10px;
|
|
}
|
|
.afus-status-progress-bar::slider-fill {
|
|
background-color: orange;
|
|
}
|
|
.afus-status-abort {
|
|
color: red;
|
|
}
|
|
.afus-status-error {
|
|
color: red;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.file-upload label div {
|
|
text-align: center;
|
|
color: #e60012;
|
|
background: #eee;
|
|
width: 240px;
|
|
height: 60px;
|
|
margin: 10px 5px 5px;
|
|
line-height: 60px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 3px 2px rgba(0,0,0,.2);
|
|
font-size: 137.5%;
|
|
font-weight: 600;
|
|
transition: .7s;
|
|
cursor: pointer;
|
|
}
|
|
.file-upload label div:hover {
|
|
opacity: .7;
|
|
}
|
|
/* .file-upload-input {
|
|
|
|
} */
|
|
.submitBtn {
|
|
text-align: center;
|
|
color: #e60012;
|
|
background: #eee;
|
|
width: 240px;
|
|
height: 60px;
|
|
margin: 10px 5px 5px;
|
|
/* line-height: 60px; */
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 3px 2px rgba(0,0,0,.2);
|
|
font-size: 137.5%;
|
|
font-weight: 600;
|
|
transition: .7s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.SubError {
|
|
color: red;
|
|
}
|
|
|
|
/* all error messages */
|
|
.error-warn {
|
|
text-align: center;
|
|
color: orange;
|
|
font-size: 1.1em;
|
|
line-height: 1.2em;
|
|
}
|
|
.error-error {
|
|
text-align: center;
|
|
color: red;
|
|
font-size: 1.1em;
|
|
line-height: 1.2em;
|
|
}
|
|
.error-abort {
|
|
text-align: center;
|
|
color: #ffffff;
|
|
background-color: #ff0000;
|
|
font-weight: bold;
|
|
font-size: 1.4em;
|
|
line-height: 1.5em;
|
|
padding: 2px;
|
|
margin: 2px 0 2px 0;
|
|
}
|
|
.error-crash {
|
|
text-align: center;
|
|
color: #fbffe0;
|
|
background-color: #a00000;
|
|
font-weight: bold;
|
|
font-size: 1.6em;
|
|
line-height: 1.7em;
|
|
border: 2px solid #000000;
|
|
padding: 2px;
|
|
margin: 2px 0 2px 0;
|
|
}
|
|
.error-info, .error-ok {
|
|
text-align: center;
|
|
color: green;
|
|
font-size: 1.1em;
|
|
line-height: 1.2em;
|
|
}
|
|
/* special debug */
|
|
.error-debug {
|
|
text-align: left;
|
|
color: gray;
|
|
font-size: 0.9em;
|
|
line-height: 1.0em;
|
|
}
|
|
|
|
.afus-uploaded {
|
|
margin-top: 10px;
|
|
border-top: 1px solid black;
|
|
}
|