Fix ascii-frame-outer blink: eliminate all repaint-causing hover effects

- Change pulse-glow keyframes from text-shadow animation to opacity (GPU composited,
  eliminates 60fps CPU repaint that was the likely root cause of the persistent blink)
- Remove box-shadow from .quick-action-btn:hover; scope transition: all → background/color
- Remove box-shadow + background gradient + transform:translateY from .stat-card:hover;
  scope transition: all → border-color only
- Remove .stat-card::after transition and hover background change
- Remove duplicate .stat-card:hover transform:translateY block
- Remove box-shadow from .clear-search-btn:hover; scope transition: all → background/color
- Remove text-shadow from th transition (th:hover never changes text-shadow)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-19 12:06:39 -04:00
parent 21ef9154e9
commit 328c103460

View File

@@ -1274,12 +1274,8 @@ h1 {
} }
@keyframes pulse-glow { @keyframes pulse-glow {
0%, 100% { 0%, 100% { opacity: 0.7; }
text-shadow: 0 0 5px currentColor, 0 0 10px currentColor; 50% { opacity: 1; }
}
50% {
text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
}
} }
.pulse-glow { .pulse-glow {
@@ -1758,7 +1754,7 @@ th {
cursor: pointer; cursor: pointer;
color: var(--terminal-amber); color: var(--terminal-amber);
text-shadow: var(--glow-amber); text-shadow: var(--glow-amber);
transition: background-color 0.2s ease, text-shadow 0.2s ease; transition: background-color 0.2s ease;
} }
th:hover { th:hover {
@@ -2380,13 +2376,12 @@ input[type="checkbox"]:checked {
font-family: var(--font-mono); font-family: var(--font-mono);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: background 0.2s ease, color 0.2s ease;
} }
.clear-search-btn:hover { .clear-search-btn:hover {
background: var(--priority-1); background: var(--priority-1);
color: var(--bg-primary); color: var(--bg-primary);
box-shadow: var(--glow-red);
} }
.search-results-info { .search-results-info {
@@ -4297,14 +4292,13 @@ tr:hover .quick-actions {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 0.9rem; font-size: 0.9rem;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
border-radius: 0; border-radius: 0;
} }
.quick-action-btn:hover { .quick-action-btn:hover {
background: var(--terminal-green); background: var(--terminal-green);
color: var(--bg-primary); color: var(--bg-primary);
box-shadow: var(--glow-green);
} }
/* ===== DASHBOARD STATS WIDGETS ===== */ /* ===== DASHBOARD STATS WIDGETS ===== */
@@ -4325,7 +4319,7 @@ tr:hover .quick-actions {
padding: 1rem; padding: 1rem;
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(0, 255, 65, 0.03) 100%); background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(0, 255, 65, 0.03) 100%);
border: 2px solid var(--terminal-green); border: 2px solid var(--terminal-green);
transition: all 0.3s ease; transition: border-color 0.2s ease;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@@ -4339,17 +4333,10 @@ tr:hover .quick-actions {
width: 30px; width: 30px;
height: 30px; height: 30px;
background: linear-gradient(135deg, transparent 50%, rgba(0, 255, 65, 0.1) 50%); background: linear-gradient(135deg, transparent 50%, rgba(0, 255, 65, 0.1) 50%);
transition: all 0.3s ease;
} }
.stat-card:hover { .stat-card:hover {
border-color: var(--terminal-amber); border-color: var(--terminal-amber);
box-shadow: var(--glow-amber);
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 176, 0, 0.05) 100%);
}
.stat-card:hover::after {
background: linear-gradient(135deg, transparent 50%, rgba(255, 176, 0, 0.15) 50%);
} }
/* Critical stat card styling */ /* Critical stat card styling */
@@ -4528,12 +4515,8 @@ tr:hover .quick-actions {
} }
/* ===== CLICKABLE STAT CARDS ===== */ /* ===== CLICKABLE STAT CARDS ===== */
.stat-card:hover {
transform: translateY(-2px);
}
.stat-card:active { .stat-card:active {
transform: translateY(0); opacity: 0.85;
} }
/* ===== TABLE OVERFLOW FIX ===== */ /* ===== TABLE OVERFLOW FIX ===== */