dark mode support
This commit is contained in:
@@ -0,0 +1,259 @@
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
margin: 0;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
height: calc(100vh - 20px);
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding-right: 25px;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.summary-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 18px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
background-color: var(--card-bg);
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.summary-card h3 {
|
||||
font-size: x-large;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.summary-card p {
|
||||
margin: 0;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.summary-card svg {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.fg {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.online {
|
||||
color: var(--online-ov);
|
||||
}
|
||||
|
||||
.issues {
|
||||
color: var(--issue);
|
||||
}
|
||||
|
||||
.cpu {
|
||||
color: var(--cpu);
|
||||
}
|
||||
|
||||
.ram {
|
||||
color: var(--memory);
|
||||
}
|
||||
|
||||
.storage {
|
||||
color: var(--storage);
|
||||
}
|
||||
|
||||
.network {
|
||||
color: var(--network);
|
||||
}
|
||||
|
||||
.overview-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.performance-card {
|
||||
background-color: var(--card-bg);
|
||||
box-sizing: border-box;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
background-color: var(--card-bg);
|
||||
box-sizing: border-box;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
width: 650px;
|
||||
}
|
||||
|
||||
.overview-card h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.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: var(--card-bg);
|
||||
box-sizing: border-box;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-input input {
|
||||
appearance: auto;
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid rgb(226, 232, 240);
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
color: var(--fg);
|
||||
cursor: auto;
|
||||
display: flex;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding: 8px 12px 8px 40px;
|
||||
margin: 0;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.search-input input:focus {
|
||||
border-color: var(--fg);
|
||||
border-width: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input svg {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.search-container button {
|
||||
background-color: transparent;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dashboard-container h3 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.summary-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.overview-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.dashboard-container {
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: var(--progress-bg);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background-color: #4f46e5;
|
||||
transition: width 0.3s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.low {
|
||||
color: var(--low);
|
||||
}
|
||||
|
||||
.medium {
|
||||
color: var(--medium);
|
||||
}
|
||||
|
||||
.high {
|
||||
color: var(--high);
|
||||
}
|
||||
|
||||
.server-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.server-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.server-container {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user