fix(ui): Remove infinite animations due to high CPU usage
This commit is contained in:
@@ -79,45 +79,13 @@ body {
|
|||||||
position: relative;
|
position: relative;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
background-image:
|
background-image:
|
||||||
radial-gradient(circle at 10% 20%, rgba(0, 255, 149, 0.05) 0%, transparent 20%),
|
radial-gradient(circle at 10% 20%, rgba(0, 255, 149, 0.05) 0%, transparent 100%),
|
||||||
radial-gradient(circle at 90% 80%, rgba(255, 0, 177, 0.05) 0%, transparent 20%),
|
radial-gradient(circle at 90% 80%, rgba(255, 0, 177, 0.05) 0%, transparent 100%),
|
||||||
radial-gradient(circle at 50% 50%, rgba(94, 0, 255, 0.05) 0%, transparent 30%),
|
radial-gradient(circle at 50% 50%, rgba(94, 0, 255, 0.05) 0%, transparent 80%),
|
||||||
linear-gradient(180deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
|
linear-gradient(180deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
body::before {
|
|
||||||
content: "";
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
transparent,
|
|
||||||
transparent 2px,
|
|
||||||
rgba(0, 0, 0, 0.1) 2px,
|
|
||||||
rgba(0, 0, 0, 0.1) 4px
|
|
||||||
);
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 1000;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
body::after {
|
|
||||||
content: "";
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 4px;
|
|
||||||
background: linear-gradient(90deg, var(--primary), var(--secondary));
|
|
||||||
opacity: 0.7;
|
|
||||||
z-index: 1001;
|
|
||||||
animation: scanline 6s linear infinite;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
@@ -128,11 +96,13 @@ h1 {
|
|||||||
text-shadow: var(--neon-glow);
|
text-shadow: var(--neon-glow);
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
animation: neonPulse 2s infinite;
|
transform: translateZ(0);
|
||||||
|
text-shadow: 0 0 1px var(--primary), 0 0 10px var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1:hover {
|
h1:hover {
|
||||||
animation: glitch 0.3s infinite;
|
animation: glitch 0.3s infinite;
|
||||||
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@@ -312,7 +282,7 @@ a:hover {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
animation: pulse 1.5s infinite;
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-paused, .inactive {
|
.status-paused, .inactive {
|
||||||
@@ -337,7 +307,7 @@ a:hover {
|
|||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
box-shadow: 0 0 5px var(--primary);
|
box-shadow: 0 0 5px var(--primary);
|
||||||
animation: pulse 2s infinite;
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-text {
|
.status-text {
|
||||||
@@ -608,6 +578,7 @@ a:hover {
|
|||||||
.card:hover::after {
|
.card:hover::after {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
animation: gradientMove 3s linear infinite;
|
animation: gradientMove 3s linear infinite;
|
||||||
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-link {
|
.card-link {
|
||||||
@@ -661,6 +632,7 @@ a:hover {
|
|||||||
.agent-card:hover::after {
|
.agent-card:hover::after {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
animation: gradientMove 3s linear infinite;
|
animation: gradientMove 3s linear infinite;
|
||||||
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-actions {
|
.agent-actions {
|
||||||
@@ -703,6 +675,7 @@ a:hover {
|
|||||||
.agent-action:hover::after {
|
.agent-action:hover::after {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
animation: gradientMove 3s linear infinite;
|
animation: gradientMove 3s linear infinite;
|
||||||
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes gradientMove {
|
@keyframes gradientMove {
|
||||||
@@ -719,7 +692,7 @@ a:hover {
|
|||||||
.dashboard-header h1 {
|
.dashboard-header h1 {
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
animation: gentlePulse 3s infinite;
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-cards {
|
.stats-cards {
|
||||||
@@ -767,6 +740,7 @@ a:hover {
|
|||||||
.stat-card:hover::after {
|
.stat-card:hover::after {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
animation: gradientMove 3s linear infinite;
|
animation: gradientMove 3s linear infinite;
|
||||||
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
@@ -829,6 +803,7 @@ a:hover {
|
|||||||
.stat-item:hover::after {
|
.stat-item:hover::after {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
animation: gradientMove 3s linear infinite;
|
animation: gradientMove 3s linear infinite;
|
||||||
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-count {
|
.stat-count {
|
||||||
@@ -972,7 +947,6 @@ a:hover {
|
|||||||
height: 2px;
|
height: 2px;
|
||||||
background: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary), var(--primary));
|
background: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary), var(--primary));
|
||||||
background-size: 200% 100%;
|
background-size: 200% 100%;
|
||||||
animation: gradientMove 3s linear infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-form-container {
|
.agent-form-container {
|
||||||
@@ -1543,7 +1517,6 @@ select.form-control {
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
text-shadow: var(--neon-glow);
|
text-shadow: var(--neon-glow);
|
||||||
animation: gentlePulse 3s infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-title:hover {
|
.dashboard-title:hover {
|
||||||
@@ -1699,17 +1672,6 @@ select.form-control {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-placeholder::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 4px;
|
|
||||||
background: var(--primary);
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
animation: loading-progress 2s infinite linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loading-progress {
|
@keyframes loading-progress {
|
||||||
0% { width: 0; }
|
0% { width: 0; }
|
||||||
50% { width: 100%; }
|
50% { width: 100%; }
|
||||||
|
|||||||
Reference in New Issue
Block a user