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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-Regular.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-Bold.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-Italic.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-BoldItalic.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto Condensed";
|
||||
src: url("assets/font/Roboto_Condensed-ExtraLight.ttf") format("truetype");
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto Condensed";
|
||||
src: url("assets/font/Roboto_Condensed-ExtraLightItalic.ttf")
|
||||
format("truetype");
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-Medium.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-MediumItalic.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-SemiBold.ttf") format("truetype");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-SemiBoldItalic.ttf") format("truetype");
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-ExtraBold.ttf") format("truetype");
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-ExtraBoldItalic.ttf") format("truetype");
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Roboto", "Roboto Condensed", sans-serif;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.line-chart-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
:root {
|
||||
/* States */
|
||||
--online: rgb(22 101 52);
|
||||
--offline: rgb(153, 27, 27);
|
||||
--warning: rgb(154, 52, 18);
|
||||
--maintenance: rgb(30, 64, 175);
|
||||
|
||||
/* States bg */
|
||||
--online-bg: rgb(220, 252, 231);
|
||||
--offline-bg: rgb(254, 226, 226);
|
||||
--warning-bg: rgb(255, 237, 213);
|
||||
--maintenance-bg: rgb(219, 234, 254);
|
||||
|
||||
/* Overview data */
|
||||
--online-ov: #16a34a;
|
||||
--issue: rgb(234, 71, 12);
|
||||
--cpu: rgb(37, 99, 235);
|
||||
--memory: rgb(147, 51, 234);
|
||||
--storage: rgb(234, 88, 12);
|
||||
--network: rgb(22 163 74);
|
||||
|
||||
/* Usage levels */
|
||||
--low: rgb(34, 197, 94);
|
||||
--medium: rgb(234, 179, 8);
|
||||
--high: rgb(239, 68, 68);
|
||||
|
||||
/* Misc */
|
||||
--bg: #f1f5f9;
|
||||
--fg: #0f172a;
|
||||
--card-bg: #fff;
|
||||
--progress-bg: rgb(226, 232, 240);
|
||||
--server-icon-bg: rgb(219 234 254);
|
||||
}
|
||||
|
||||
:root .dark {
|
||||
/* States */
|
||||
--online: rgb(34, 197, 94); /* bright green */
|
||||
--offline: rgb(248, 113, 113); /* soft red */
|
||||
--warning: rgb(251, 191, 36); /* yellow-orange */
|
||||
--maintenance: rgb(147, 197, 253); /* light blue */
|
||||
|
||||
/* States bg */
|
||||
--online-bg: rgba(22, 101, 52, 0.417); /* dark green */
|
||||
--offline-bg: rgb(153, 27, 27, 0.417); /* dark red */
|
||||
--warning-bg: rgb(154, 52, 18, 0.417); /* dark orange */
|
||||
--maintenance-bg: rgb(30, 64, 175, 0.417); /* dark blue */
|
||||
|
||||
/* Overview data */
|
||||
--online-ov: #16a34a;
|
||||
--issue: rgb(234, 71, 12);
|
||||
--cpu: rgb(37, 99, 235);
|
||||
--memory: rgb(147, 51, 234);
|
||||
--storage: rgb(234, 88, 12);
|
||||
--network: rgb(22 163 74);
|
||||
|
||||
/* Usage levels */
|
||||
--low: rgb(74, 222, 128); /* light green */
|
||||
--medium: rgb(253, 224, 71); /* light yellow */
|
||||
--high: rgb(239, 68, 68); /* red */
|
||||
|
||||
/* Misc */
|
||||
--bg: #0f172a; /* dark navy */
|
||||
--fg: #f8fafc; /* light text */
|
||||
--card-bg: #141e2f; /* dark card background 141e2f */
|
||||
--progress-bg: #27364d;
|
||||
--server-icon-bg: #243756;
|
||||
}
|
||||
@@ -0,0 +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;
|
||||
}
|
||||
|
||||
#background_img {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
border: none;
|
||||
outline: 1px solid white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
.server-container .server {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.server-heading-inner {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.server-icon {
|
||||
padding: 0.5rem;
|
||||
border-radius: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: var(--server-icon-bg);
|
||||
color: rgb(37 99 235);
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.server-heading-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.server-heading-info div div {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
width: max-content;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.server-heading-info div div svg {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.server-heading-info div div p {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
font-size: 14px;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.server-heading-info div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.server-heading-info div p {
|
||||
margin: 0;
|
||||
font-size: 14.5px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
color: rgb(100 116 139);
|
||||
}
|
||||
|
||||
.server-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.server-heading button {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
height: max-content;
|
||||
width: max-content;
|
||||
padding: 8px;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border-radius: 7px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.server-heading button:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.server-monitor h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.server-monitor h2 svg {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.server-monitor div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.server-monitor div p {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.Online {
|
||||
color: var(--online);
|
||||
background-color: var(--online-bg);
|
||||
}
|
||||
|
||||
.Offline {
|
||||
color: var(--offline);
|
||||
background-color: var(--offline-bg);
|
||||
}
|
||||
|
||||
.Warning {
|
||||
color: var(--warning);
|
||||
background-color: var(--warning-bg);
|
||||
}
|
||||
|
||||
.Maintenance {
|
||||
color: var(--maintenance);
|
||||
background-color: var(--maintenance-bg);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
#sidebar {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--card-bg);
|
||||
width: 300px;
|
||||
height: calc(100vh - 40px);
|
||||
border-radius: 20px;
|
||||
margin-left: 25px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
#sidebar {
|
||||
display: none;
|
||||
height: 150px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.sidebar-item p {
|
||||
text-decoration: none;
|
||||
color: var(--fg);
|
||||
font: inherit;
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.sidebar-item svg {
|
||||
color: var(--fg);
|
||||
}
|
||||
Reference in New Issue
Block a user