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:
@@ -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 ===== */
|
||||||
|
|||||||
Reference in New Issue
Block a user