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

191
public/css/style.css
View File

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