CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

d

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-04 20:52:58 +08:00
parent f67123a41f
commit 35a8b5cb2d
1 changed files with 152 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
public/css/style.css
View File

@@ -107,7 +107,9 @@
} }
/* ---- Reset & Base ---- */ /* ---- Reset & Base ---- */
*, *::before, *::after { *,
*::before,
*::after {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
@@ -179,10 +181,23 @@ body {
} }
@keyframes glowFloat { @keyframes glowFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(30px, -30px) scale(1.05); } 0%,
50% { transform: translate(-20px, 20px) scale(0.95); } 100% {
75% { transform: translate(25px, 15px) scale(1.02); } transform: translate(0, 0) scale(1);
}
25% {
transform: translate(30px, -30px) scale(1.05);
}
50% {
transform: translate(-20px, 20px) scale(0.95);
}
75% {
transform: translate(25px, 15px) scale(1.02);
}
} }
/* ---- App Container ---- */ /* ---- App Container ---- */
@@ -243,7 +258,8 @@ body {
color: var(--text-secondary); color: var(--text-secondary);
} }
.server-count, .source-count { .server-count,
.source-count {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
@@ -261,8 +277,17 @@ body {
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 0%,
100% {
opacity: 1;
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
}
50% {
opacity: 0.7;
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
}
} }
.header-right { .header-right {
@@ -348,7 +373,7 @@ body {
transition: .4s; transition: .4s;
width: 20px; width: 20px;
z-index: 2; z-index: 2;
box-shadow: 0 2px 4px rgba(0,0,0,0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
} }
.slider.round { .slider.round {
@@ -359,12 +384,12 @@ body {
border-radius: 50%; border-radius: 50%;
} }
input:checked + .slider { input:checked+.slider {
background-color: var(--accent-indigo); background-color: var(--accent-indigo);
border-color: var(--accent-indigo); border-color: var(--accent-indigo);
} }
input:checked + .slider:before { input:checked+.slider:before {
transform: translateX(24px); transform: translateX(24px);
} }
@@ -385,6 +410,8 @@ input:checked + .slider:before {
/* ---- Gauge Time ---- */ /* ---- Gauge Time ---- */
.title-time { .title-time {
display: flex;
align-items: center;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
color: var(--accent-indigo); color: var(--accent-indigo);
@@ -436,11 +463,25 @@ input:checked + .slider:before {
opacity: 0.8; opacity: 0.8;
} }
.stat-card-servers::before { background: var(--gradient-servers); } .stat-card-servers::before {
.stat-card-cpu::before { background: var(--gradient-cpu); } background: var(--gradient-servers);
.stat-card-mem::before { background: var(--gradient-mem); } }
.stat-card-disk::before { background: var(--gradient-disk); }
.stat-card-bandwidth::before { background: var(--gradient-bandwidth); } .stat-card-cpu::before {
background: var(--gradient-cpu);
}
.stat-card-mem::before {
background: var(--gradient-mem);
}
.stat-card-disk::before {
background: var(--gradient-disk);
}
.stat-card-bandwidth::before {
background: var(--gradient-bandwidth);
}
.stat-card:hover { .stat-card:hover {
border-color: var(--border-hover); border-color: var(--border-hover);
@@ -463,18 +504,22 @@ input:checked + .slider:before {
background: rgba(168, 85, 247, 0.1); background: rgba(168, 85, 247, 0.1);
color: var(--accent-purple); color: var(--accent-purple);
} }
.stat-card-cpu .stat-card-icon { .stat-card-cpu .stat-card-icon {
background: rgba(99, 102, 241, 0.1); background: rgba(99, 102, 241, 0.1);
color: var(--accent-indigo); color: var(--accent-indigo);
} }
.stat-card-mem .stat-card-icon { .stat-card-mem .stat-card-icon {
background: rgba(6, 182, 212, 0.1); background: rgba(6, 182, 212, 0.1);
color: var(--accent-cyan); color: var(--accent-cyan);
} }
.stat-card-disk .stat-card-icon { .stat-card-disk .stat-card-icon {
background: rgba(245, 158, 11, 0.1); background: rgba(245, 158, 11, 0.1);
color: var(--accent-amber); color: var(--accent-amber);
} }
.stat-card-bandwidth .stat-card-icon { .stat-card-bandwidth .stat-card-icon {
background: rgba(16, 185, 129, 0.1); background: rgba(16, 185, 129, 0.1);
color: var(--accent-emerald); color: var(--accent-emerald);
@@ -508,11 +553,25 @@ input:checked + .slider:before {
line-height: 1.2; line-height: 1.2;
} }
.stat-card-servers .stat-card-value { color: var(--accent-purple); } .stat-card-servers .stat-card-value {
.stat-card-cpu .stat-card-value { color: var(--accent-indigo); } color: var(--accent-purple);
.stat-card-mem .stat-card-value { color: var(--accent-cyan); } }
.stat-card-disk .stat-card-value { color: var(--accent-amber); }
.stat-card-bandwidth .stat-card-value { color: var(--accent-emerald); } .stat-card-cpu .stat-card-value {
color: var(--accent-indigo);
}
.stat-card-mem .stat-card-value {
color: var(--accent-cyan);
}
.stat-card-disk .stat-card-value {
color: var(--accent-amber);
}
.stat-card-bandwidth .stat-card-value {
color: var(--accent-emerald);
}
.stat-card-sub { .stat-card-sub {
font-size: 0.72rem; font-size: 0.72rem;
@@ -589,8 +648,13 @@ input:checked + .slider:before {
border-radius: 2px; border-radius: 2px;
} }
.legend-rx { background: var(--accent-cyan); } .legend-rx {
.legend-tx { background: var(--accent-indigo); } background: var(--accent-cyan);
}
.legend-tx {
background: var(--accent-indigo);
}
.chart-body { .chart-body {
padding: 12px 22px; padding: 12px 22px;
@@ -677,9 +741,17 @@ input:checked + .slider:before {
transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1); transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
} }
.gauge-fill-cpu { stroke: url(#gaugeCpuGrad); } .gauge-fill-cpu {
.gauge-fill-ram { stroke: url(#gaugeRamGrad); } stroke: url(#gaugeCpuGrad);
.gauge-fill-disk { stroke: url(#gaugeDiskGrad); } }
.gauge-fill-ram {
stroke: url(#gaugeRamGrad);
}
.gauge-fill-disk {
stroke: url(#gaugeDiskGrad);
}
.gauge-center { .gauge-center {
position: absolute; position: absolute;
@@ -797,9 +869,17 @@ input:checked + .slider:before {
transition: width 0.6s ease; transition: width 0.6s ease;
} }
.usage-bar-fill-cpu { background: var(--accent-indigo); } .usage-bar-fill-cpu {
.usage-bar-fill-mem { background: var(--accent-cyan); } background: var(--accent-indigo);
.usage-bar-fill-disk { background: var(--accent-amber); } }
.usage-bar-fill-mem {
background: var(--accent-cyan);
}
.usage-bar-fill-disk {
background: var(--accent-amber);
}
/* ---- Modal ---- */ /* ---- Modal ---- */
.modal-overlay { .modal-overlay {
@@ -884,7 +964,8 @@ input:checked + .slider:before {
.modal-tab.active::after { .modal-tab.active::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -21px; /* Align with header border */ bottom: -21px;
/* Align with header border */
left: 0; left: 0;
right: 0; right: 0;
height: 2px; height: 2px;
@@ -1158,6 +1239,7 @@ input:checked + .slider:before {
opacity: 0; opacity: 0;
transform: translateY(16px); transform: translateY(16px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
@@ -1168,11 +1250,25 @@ input:checked + .slider:before {
animation: fadeInUp 0.5s ease forwards; animation: fadeInUp 0.5s ease forwards;
} }
.stat-card:nth-child(1) { animation-delay: 0.05s; } .stat-card:nth-child(1) {
.stat-card:nth-child(2) { animation-delay: 0.1s; } animation-delay: 0.05s;
.stat-card:nth-child(3) { animation-delay: 0.15s; } }
.stat-card:nth-child(4) { animation-delay: 0.2s; }
.stat-card:nth-child(5) { animation-delay: 0.25s; } .stat-card:nth-child(2) {
animation-delay: 0.1s;
}
.stat-card:nth-child(3) {
animation-delay: 0.15s;
}
.stat-card:nth-child(4) {
animation-delay: 0.2s;
}
.stat-card:nth-child(5) {
animation-delay: 0.25s;
}
.chart-card { .chart-card {
animation: fadeInUp 0.5s ease 0.3s forwards; animation: fadeInUp 0.5s ease 0.3s forwards;
@@ -1185,9 +1281,17 @@ input:checked + .slider:before {
/* Value update animation */ /* Value update animation */
@keyframes valueFlash { @keyframes valueFlash {
0% { opacity: 1; } 0% {
50% { opacity: 0.6; } opacity: 1;
100% { opacity: 1; } }
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
} }
.value-update { .value-update {
@@ -1218,6 +1322,7 @@ input:checked + .slider:before {
.stat-cards { .stat-cards {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
.charts-section { .charts-section {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -1227,28 +1332,36 @@ input:checked + .slider:before {
.header { .header {
padding: 0 16px; padding: 0 16px;
} }
.header-meta { .header-meta {
display: none; display: none;
} }
.dashboard { .dashboard {
padding: 16px; padding: 16px;
} }
.stat-cards { .stat-cards {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.stat-card { .stat-card {
padding: 14px 16px; padding: 14px 16px;
} }
.stat-card-value { .stat-card-value {
font-size: 1.2rem; font-size: 1.2rem;
} }
.chart-footer { .chart-footer {
flex-wrap: wrap; flex-wrap: wrap;
gap: 16px; gap: 16px;
} }
.form-row { .form-row {
flex-direction: column; flex-direction: column;
} }
.form-actions { .form-actions {
flex-direction: row; flex-direction: row;
} }