Overview panel

This commit is contained in:
2025-07-11 13:10:33 +02:00
parent 1ad5c0a698
commit b8f82399e1
4 changed files with 152 additions and 64 deletions
+73 -10
View File
@@ -83,22 +83,40 @@ body {
width: 100%;
}
@media (max-width: 1300px) {
.summary-container {
grid-template-columns: repeat(2, 1fr);
}
.overview-card {
background-color: #fff;
box-sizing: border-box;
padding: 1.5rem;
border-radius: 10px;
width: 650px;
}
.overview-container {
flex-direction: column;
}
.overview-card h2 {
margin: 0;
padding: 0;
margin-bottom: 20px;
display: flex;
gap: 7px;
}
.dashboard-container {
padding-left: 25px;
}
.overview-card h2 svg {
margin-top: auto;
margin-bottom: auto;
}
.overview-card div {
display: flex;
justify-content: space-between;
}
.overview-card div p {
margin-bottom: 8px;
font-size: 14px;
}
.search-container {
display: flex;
flex-wrap: wrap;
background-color: #fff;
box-sizing: border-box;
padding: 1.5rem;
@@ -172,3 +190,48 @@ body {
padding: 0;
margin: 0;
}
@media (max-width: 1300px) {
.summary-container {
grid-template-columns: repeat(2, 1fr);
}
.overview-container {
flex-direction: column;
}
.dashboard-container {
padding-left: 25px;
}
.server-container {
grid-template-columns: repeat(2, 1fr);
}
.overview-card {
width: 100%;
}
}
@media (max-width: 750px) {
.server-container {
grid-template-columns: repeat(1, 1fr);
}
}
.progress-bar {
display: block;
width: 100%;
height: 10px;
background-color: #e0e0e0;
border-radius: 10px;
overflow: hidden;
}
.progress {
display: block;
height: 100%;
background-color: #4f46e5;
transition: width 0.3s ease;
border-radius: 10px;
}
+56 -51
View File
@@ -1,73 +1,78 @@
body {
color: white;
background-color: black;
}
#login_wrapper {
position: relative;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#background_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
user-select: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
user-select: none;
}
#login_container {
background-color: rgba(138, 138, 138, 0.143);
border-radius: 20px;
backdrop-filter: blur(20px);
padding: 38px;
margin: auto;
width: max-content;
height: max-content;
z-index: 1;
background-color: rgba(138, 138, 138, 0.143);
border-radius: 20px;
backdrop-filter: blur(20px);
padding: 38px;
margin: auto;
width: max-content;
height: max-content;
z-index: 1;
}
.field {
background-color: rgba(138, 138, 138, 0.353);
border: none;
border-radius: 10px;
height: 40px;
width: 350px;
color: white;
padding-left: 10px;
padding-right: 10px;
background-color: rgba(138, 138, 138, 0.353);
border: none;
border-radius: 10px;
height: 40px;
width: 350px;
color: white;
padding-left: 10px;
padding-right: 10px;
}
.field:focus {
border: none;
outline: 1px solid white;
border: none;
outline: 1px solid white;
}
body {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
h1 {
width: max-content;
margin-left: auto;
margin-right: auto;
width: max-content;
margin-left: auto;
margin-right: auto;
}
button {
border: none;
outline: none;
background-color: white;
display: block;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: max-content;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
border-radius: 8px;
}
border: none;
outline: none;
background-color: white;
display: block;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: max-content;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
border-radius: 8px;
}