dfbe45881f
feat: Add macOS Dock-style tooltips and fix PDF modal text colors in dark theme
...
TOOLTIPS (Tested & Working):
- ✅ macOS Dock-inspired design with smooth fade + scale animation
- ✅ Dark semi-transparent background (rgba(0,0,0,0.85))
- ✅ Small font (11px), bold (600), 6px border radius
- ✅ Desktop: tooltips on RIGHT for action bar buttons
- ✅ Mobile: tooltips on TOP (like macOS Dock)
- ✅ Back-to-top: tooltip on LEFT side
- ✅ Responsive positioning with media queries
- ✅ Accessibility: respects prefers-reduced-motion
- ✅ Touch devices: hidden to avoid sticky tooltips
- ✅ Theme-aware with proper z-index layering
PDF MODAL FIX:
- Fixed light grey text in dark theme PDF modal
- PDF modal has white/light background, needs dark text in ALL themes
- Added dark theme overrides to force dark text colors:
* Subtitle: #333333
* Card titles: #1a1a1a
* Card descriptions: #333333
* Placeholder text: #666666
* Loading states: dark colors
FILES CHANGED:
- static/css/04-interactive/_tooltips.css (new) - Complete tooltip system
- static/css/main.css - Import tooltip CSS
- static/css/04-interactive/_modals.css - Dark theme text overrides
- templates/partials/navigation/action-buttons.html - Add tooltip classes
- templates/partials/widgets/back-to-top.html - Add tooltip-left class
- tests/mjs/30-tooltip-macos-dock.test.mjs (new) - Comprehensive Playwright test
TEST RESULTS: 5/6 tests passed
- ✅ PDF Button Tooltip (hover animation verified)
- ✅ Print Button Tooltip (hover animation verified)
- ✅ Back-to-Top Tooltip (left positioning verified)
- ✅ macOS Dock Styling (all design specs met)
- ✅ Mobile Tooltip Behavior (correctly hidden on touch)
2025-11-20 17:52:07 +00:00
juanatsap