141 lines
2.4 KiB
CSS
141 lines
2.4 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; }
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|