etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-29 18:13:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: eliminate hover flickering across all pages

Browse Source 
- Extract CountdownTimer into React.memo component to isolate 1s
  interval re-renders from the full Subscription page
- Add box-shadow transition to .hover-border-gradient (was instant)
- Remove conflicting p-[1.5px] from PurchaseCTAButton (CSS border
  already handles 1.5px)
- Replace transition-all with specific properties on bento-card-hover,
  bento-card-glow, device dots, toggle switches, progress bars
- Reduce translateY hover from -4px to -2px to prevent cursor
  losing hover target during fast vertical mouse movement
This commit is contained in:
Fringg
2026-02-27 07:02:59 +03:00
parent 0bc817fa7f
commit bdc201b5ea
3 changed files with 174 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/styles/globals.css
View File

@@ -26,6 +26,10 @@
animation: border-rotate var(--border-duration, 3s) linear infinite;
}
.hover-border-gradient {
transition: box-shadow 0.3s ease;
}
.hover-border-gradient:hover,
.hover-border-gradient:active {
box-shadow: 0 0 20px var(--accent-glow, rgba(var(--color-accent-400), 0.25));
@@ -370,12 +374,16 @@ img.twemoji {
.bento-card-hover {
@apply bento-card cursor-pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition:
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-card-hover:hover {
@apply border-dark-600/50 bg-dark-800/60 shadow-lg;
transform: translateY(-4px);
transform: translateY(-2px);
/* Intensify Glass Border & Add Top Spotlight */
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
@@ -405,12 +413,15 @@ img.twemoji {
.bento-card-glow {
@apply bento-card cursor-pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition:
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-card-glow:hover {
@apply border-accent-500/30 shadow-glow;
transform: translateY(-4px);
transform: translateY(-2px);
}
.bento-card-glow:active {
@@ -451,7 +462,7 @@ img.twemoji {
.light .bento-card-hover:hover {
@apply border-champagne-400/50 bg-champagne-50 shadow-md;
transform: translateY(-4px);
transform: translateY(-2px);
/* Intensify Light Theme Glass Border */
box-shadow:
inset 0 1px 0 0 rgba(0, 0, 0, 0.06),
@@ -465,14 +476,14 @@ img.twemoji {
.light .bento-card-glow:hover {
@apply border-accent-400/40 shadow-lg;
transform: translateY(-4px);
transform: translateY(-2px);
}
/* ========== DARK THEME COMPONENTS (default) ========== */
/* Cards - Dark (unified style) */
.card {
@apply border border-dark-700/40 bg-dark-900/70 p-5 transition-all duration-200 sm:p-6;
@apply border border-dark-700/40 bg-dark-900/70 p-5 transition-colors duration-200 sm:p-6;
border-radius: var(--bento-radius);
transform: translateZ(0);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);