fix spinner, ffmpegdownscale/convert not using correct file name
This commit is contained in:
parent
3ed7b0b5c7
commit
02734f1d9d
5 changed files with 157 additions and 173 deletions
|
|
@ -1,147 +1,141 @@
|
|||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: 0;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
padding-inline-start: 0px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
padding-inline-start: 0px;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
/* Positioning and Sizing */
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
margin: 50px auto;
|
||||
/* Centering the spinner */
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
margin: 50px auto;
|
||||
|
||||
/* Text Styling */
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
padding-top: 80px;
|
||||
/* Adjust as needed for text position */
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
padding-top: 80px;
|
||||
|
||||
/* Adding a background to the spinner for better visibility */
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Keyframes for the spinner animation */
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Spinner Animation */
|
||||
.spinner::before {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
/* Spinner Size */
|
||||
height: 40px;
|
||||
margin-top: -20px;
|
||||
/* Half of height */
|
||||
margin-left: -20px;
|
||||
/* Half of width */
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
border-top-color: #007bff;
|
||||
/* Spinner Color */
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
#search {
|
||||
padding: 6px 12px;
|
||||
background: rgb(31, 32, 35);
|
||||
border: 1px solid rgb(60, 63, 68);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: rgb(247, 248, 248);
|
||||
appearance: none;
|
||||
transition: border 0.15s ease 0s;
|
||||
:focus{
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border-color: rgb(100, 153, 255);
|
||||
}
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Keyframes for the spinner animation */
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Spinner Animation */
|
||||
.spinner::before {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
/* Spinner Size */
|
||||
height: 40px;
|
||||
margin-top: -20px;
|
||||
/* Half of height */
|
||||
margin-left: -20px;
|
||||
/* Half of width */
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
border-top-color: #007bff;
|
||||
/* Spinner Color */
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
#search {
|
||||
padding: 6px 12px;
|
||||
background: rgb(31, 32, 35);
|
||||
border: 1px solid rgb(60, 63, 68);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: rgb(247, 248, 248);
|
||||
appearance: none;
|
||||
transition: border 0.15s ease 0s;
|
||||
:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border-color: rgb(100, 153, 255);
|
||||
}
|
||||
}
|
||||
|
||||
.nav a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
border-bottom: 1px solid #DB7676;
|
||||
border-bottom: 1px solid #db7676;
|
||||
}
|
||||
|
||||
.nav button {
|
||||
height: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.nav button:hover {
|
||||
border-bottom: 1px solid #DB7676;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #db7676;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.user {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.username {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
color: #73AD21;
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
color: #73ad21;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.logout {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-log-out'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-log-out'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.adduser {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user-plus'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='8.5' cy='7' r='4'%3E%3C/circle%3E%3Cline x1='20' y1='8' x2='20' y2='14'%3E%3C/line%3E%3Cline x1='23' y1='11' x2='17' y2='11'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user-plus'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='8.5' cy='7' r='4'%3E%3C/circle%3E%3Cline x1='20' y1='8' x2='20' y2='14'%3E%3C/line%3E%3Cline x1='23' y1='11' x2='17' y2='11'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
#dropArea {
|
||||
|
|
@ -157,24 +151,24 @@
|
|||
}
|
||||
|
||||
.dragregion {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.nonmedia {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.nonmedia p {
|
||||
color: #444;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
color: #444;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
@ -192,13 +186,13 @@ label {
|
|||
transform: translateY(0%) translateX(70%);
|
||||
z-index: 1;
|
||||
border-radius: 25px;
|
||||
border: 2px solid #73AD21;
|
||||
border: 2px solid #73ad21;
|
||||
padding: 5px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.video .overlay a {
|
||||
color: #73AD21;
|
||||
color: #73ad21;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
|
|
@ -206,33 +200,33 @@ label {
|
|||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.modal img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.modal video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue