Created standardized Popup-Window

Moved Update-functions for Queue-Status and Monitoring-list to their respective modules
This commit is contained in:
2024-10-20 17:27:02 +02:00
parent 1304bc750a
commit fcc1ff392c
10 changed files with 166 additions and 135 deletions

View File

@ -11,6 +11,7 @@ footer {
position: fixed;
bottom: 0;
color: white;
z-index: 10;
}
#madeWith {
@ -20,19 +21,20 @@ footer {
cursor: url("Website/media/blahaj.png"), grab;
}
footer div {
footer .statusBadge {
margin: 0 10px;
display: flex;
align-items: center;
justify-items: center;
background-color: rgba(255,255,255, 0.3);
border-radius: 10px;
padding: 0 5px;
padding: 2px 5px;
}
footer div > * {
margin: 0 2px;
padding: 3px 0;
footer > div {
display: flex;
align-items: center;
justify-items: center;
}
footer .hoverHand {

43
Website/styles/popup.css Normal file
View File

@ -0,0 +1,43 @@
.popup {
position: fixed;
left: 10%;
top: 7.5%;
width: 80%;
height: 80%;
margin: auto;
z-index: 100;
background-color: var(--second-background-color);
border-radius: 10px;
overflow: hidden;
}
.popup .popupHeader {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 100%;
background-color: var(--primary-color);
color: var(--accent-color);
}
.popup .popupHeader h1 {
margin: 4px 10px;
font-size: 20pt;
}
.popup .close {
position: absolute;
top: 0;
right: 0;
height: 100%;
cursor: pointer;
}
.popup .popupBody {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: calc(100% - 40px);
}

View File

@ -1,44 +1,4 @@
#QueuePopUp {
position: absolute;
left: 10%;
top: 7.5%;
width: 80%;
height: 80%;
margin: auto;
z-index: 100;
background-color: var(--second-background-color);
border-radius: 10px;
overflow: hidden;
}
#QueuePopUp #QueuePopUpHeader {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 100%;
background-color: var(--primary-color);
color: var(--accent-color);
}
#QueuePopUp #QueuePopUpHeader h1 {
margin: 4px 10px;
font-size: 20pt;
}
#QueuePopUp #closeSearch {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
#QueuePopUp #QueuePopUpBody {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: calc(100% - 40px);
display: flex;
}