diff --git a/src/app/globals.css b/src/app/globals.css index 571f725..02ac6a3 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -569,48 +569,7 @@ h3 { } } -/* Slide IN animations (new content enters) */ -@keyframes slideInFromLeft { - 0% { - transform: translateX(-100px); - opacity: 0; - } - 100% { - transform: translateX(0); - opacity: 1; - } -} - -@keyframes slideInFromRight { - 0% { - transform: translateX(100px); - opacity: 0; - } - - 100% { - transform: translateX(0); - opacity: 1; - } -} - -/* Going to next (content exits left, enters from right) */ -.slide-out-left { - animation: slideOutLeft 0.25s ease-in forwards; -} - -.slide-in-left { - animation: slideInFromRight 0.25s ease-out forwards; -} - -/* Going to previous (content exits right, enters from left) */ -.slide-out-right { - animation: slideOutRight 0.25s ease-in forwards; -} - -.slide-in-right { - animation: slideInFromLeft 0.25s ease-out forwards; -} /* Weekly Day Columns Grid */ .weekly-days-grid { @@ -2642,38 +2601,7 @@ h3 { /* --- FIXES & NEW FEATURES --- */ -/* Fix 1: Animation Overrides (Single-phase slide-in to prevent blank flash) */ -@keyframes slideInFromLeft { - 0% { - transform: translateX(-50px); - opacity: 0.5; - } - 100% { - transform: translateX(0); - opacity: 1; - } -} - -@keyframes slideInFromRight { - 0% { - transform: translateX(50px); - opacity: 0.5; - } - - 100% { - transform: translateX(0); - opacity: 1; - } -} - -.slide-in-left { - animation: slideInFromRight 0.5s ease-out forwards; -} - -.slide-in-right { - animation: slideInFromLeft 0.5s ease-out forwards; -} /* Consolidate Task Hover Actions - Removed redundant entries */ @@ -2808,31 +2736,30 @@ h3 { background: #333; } -/* --- VIEW TRANSITION ANIMATION (Weekly-like) --- */ +/* --- VIEW TRANSITION ANIMATION (Day/Week Navigation Slide) --- */ -/* Base Slide Animations */ @keyframes slideOutToLeft { - to { transform: translateX(-20%); opacity: 0; } + to { transform: translateX(-30%); opacity: 0; } } @keyframes slideInFromRight { - from { transform: translateX(20%); opacity: 0; } + from { transform: translateX(30%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutToRight { - to { transform: translateX(20%); opacity: 0; } + to { transform: translateX(30%); opacity: 0; } } @keyframes slideInFromLeft { - from { transform: translateX(-20%); opacity: 0; } + from { transform: translateX(-30%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Week Grid Transition Group */ ::view-transition-group(week-grid) { - animation-duration: 0.4s; + animation-duration: 0.35s; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); } -/* Slide Next (Left) */ +/* Slide Next (Left) — content exits left, new enters from right */ [data-slide-direction="next"]::view-transition-old(week-grid) { animation-name: slideOutToLeft; } @@ -2840,7 +2767,7 @@ h3 { animation-name: slideInFromRight; } -/* Slide Prev (Right) */ +/* Slide Prev (Right) — content exits right, new enters from left */ [data-slide-direction="prev"]::view-transition-old(week-grid) { animation-name: slideOutToRight; } @@ -2848,49 +2775,7 @@ h3 { animation-name: slideInFromLeft; } -@keyframes slideOutToRight { - to { - transform: translateX(100%); - opacity: 0.8; - } -} - -@keyframes slideInFromLeft { - from { - transform: translateX(-100%); - } - - to { - transform: translateX(0); - } -} - -::view-transition-group(week-grid) { - animation-duration: 0.6s; - animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); -} - -/* Next (forward): Old slides Left, New enters from Right */ -[data-transition-direction="next"]::view-transition-old(week-grid) { - animation: slideOutToLeft 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both; - mix-blend-mode: normal; -} - -[data-transition-direction="next"]::view-transition-new(week-grid) { - animation: slideInFromRight 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both; - mix-blend-mode: normal; -} - -/* Prev (backward): Old slides Right, New enters from Left */ -[data-transition-direction="prev"]::view-transition-old(week-grid) { - animation: slideOutToRight 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both; - mix-blend-mode: normal; -} - -[data-transition-direction="prev"]::view-transition-new(week-grid) { - animation: slideInFromLeft 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both; - mix-blend-mode: normal; -}/* Smooth View Transitions */ +/* Smooth View Transitions */ ::view-transition-group(root) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -2898,8 +2783,7 @@ h3 { ::view-transition-old(root), ::view-transition-new(root) { - /* Ensure they mix/cross-fade or slide as expected */ - /* Default is usually fine, but duration control is key */ + /* Default cross-fade is fine for non-navigation transitions */ } /* ============================================