fix: correct button order and restore smooth transitions

Fixes:
1. ✅ Reversed button order - Info at bottom, Download at top
   - Desktop (bottom→top): Info → Shortcuts → Zoom → Print → Download
   - Mobile (left→right): Download → Print → Shortcuts → Info

2. ✅ Restored smooth morphing transitions
   - Added transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
   - Container smoothly transforms from vertical to horizontal
   - Buttons smoothly reposition during responsive transition

3. ✅ Preserved all special hover behaviors
   - Zoom button: Blue hover + highlights zoom control
   - Print button: White bg + green icon on hover (synchronized)
   - Download button: Red bg on hover (synchronized)
   - All sync functions working: syncPdfHover, syncPrintHover, highlightZoomControl

The flexbox container now has the correct button order AND smooth animations!

This commit is contained in:

juanatsap

2025-11-16 14:26:49 +00:00

parent 8eea5a660a

commit 0edcf8c221

8 changed files with 6 additions and 5 deletions

									
										static/css/main.css
									
		+1
		
												View File
												
				@@ -2835,6 +2835,7 @@ html {

				    gap: 1rem; /* 16px gap between buttons */

				    align-items: center;

				    z-index: 99;

				    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth morphing transition */

				}

				/* All buttons inside container - shared styles */