Djeex/lumeex
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 8 Wiki Activity

Styled loader and modal

Browse Source
This commit is contained in:
Djeex
2025-08-22 15:29:18 +02:00
parent 1591886505
commit b5f8ceeb31
6 changed files with 84 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/webui/style/style.css
View File

@ -230,6 +230,24 @@ h2 {
margin-top: 8px;
}
.photo button.validate-tag-btn {
border-radius: 30px;
border: none;
background: #049b3d;
color: #fff;
font-size: 10px;
cursor: pointer;
margin-left: 4px;
transition: all ease 0.2s;
width: 35px;
border: 1px solid #585858;
}
.photo button.validate-tag-btn:hover {
background: #02cb4e;
}
.suggestions li.selected {
background-color: #007782;
color: white;
@ -432,15 +450,16 @@ h2 {
}
.modal-content {
background: #131313;
background: #000000a3;
color: #fff;
padding: 2rem 2.5rem;
border-radius: 10px;
box-shadow: 0 4px 24px rgba(0,0,0,0.25);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
min-width: 300px;
max-width: 90vw;
position: relative;
text-align: center;
backdrop-filter: blur(20px);
}
.modal-close {
@ -497,6 +516,7 @@ h2 {
background: #2d2d2d;
color: white;
display: none;
margin-bottom: 6px;
}
#remove-all-gallery:hover,
@ -888,19 +908,51 @@ justify-content: center;
display: flex;
}
.photo button.validate-tag-btn {
border-radius: 30px;
border: none;
background: #049b3d;
color: #fff;
font-size: 10px;
cursor: pointer;
margin-left: 4px;
transition: all ease 0.2s;
width: 35px;
border: 1px solid #585858;
/* --- Global Loader & Spinner --- */
#global-loader {
display: none;
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
z-index: 99999;
background: rgba(0,0,0,0.4);
align-items: center;
justify-content: center;
}
.photo button.validate-tag-btn:hover {
background: #02cb4e;
}
#global-loader.active {
display: flex;
}
.loader-inner {
opacity: 0;
transition: opacity 0.9s cubic-bezier(.4,0,.2,1);
background: #0c0d0c29;
padding: 32px 48px;
border-radius: 16px;
box-shadow: 0 2px 24px #000;
display: flex;
flex-direction: column;
align-items: center;
backdrop-filter: blur(20px);
}
#global-loader.active .loader-inner {
opacity: 1;
}
.loader-spinner {
width: 48px;
height: 48px;
border: 6px solid #55c3ec;
border-top: 6px solid #222;
border-radius: 50%;
animation: spin 1s linear infinite;
}
#loader-text {
margin-top: 18px;
color: #fff;
font-size: 18px;
}
@keyframes spin { 100% { transform: rotate(360deg); } }