Files
JavaScript.ajax-file-upload/test/other.css
Clemens Schwaighofer c53eea0b42 All CSS used are prefixed with afus-, uuid v4 for each upload group
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
2024-09-17 15:50:39 +09:00

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;
}