juanatsap
dfbe45881f
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)
46 lines
1.5 KiB
CSS
46 lines
1.5 KiB
CSS
/* ============================================================================
|
|
MAIN.CSS - Entry Point (New Modular Structure)
|
|
============================================================================ */
|
|
|
|
/* 01 - Foundation */
|
|
@import './01-foundation/_reset.css';
|
|
@import './01-foundation/_variables.css';
|
|
@import './01-foundation/_typography.css';
|
|
@import './01-foundation/_themes.css';
|
|
|
|
/* 02 - Layout */
|
|
@import './02-layout/_container.css';
|
|
@import './02-layout/_page.css';
|
|
@import './02-layout/_grid.css';
|
|
@import './02-layout/_paper.css';
|
|
|
|
/* 03 - Components */
|
|
@import './03-components/_action-bar.css';
|
|
@import './03-components/_sidebar.css';
|
|
@import './03-components/_cv-header.css';
|
|
@import './03-components/_cv-section.css';
|
|
@import './03-components/_experience.css';
|
|
@import './03-components/_projects.css';
|
|
@import './03-components/_courses.css';
|
|
@import './03-components/_education.css';
|
|
@import './03-components/_languages.css';
|
|
|
|
/* 04 - Interactive */
|
|
@import './04-interactive/_toggles.css';
|
|
@import './04-interactive/_tooltips.css';
|
|
@import './04-interactive/_navigation.css';
|
|
@import './04-interactive/_scroll-behavior.css';
|
|
@import './04-interactive/_buttons.css';
|
|
@import './04-interactive/_modals.css';
|
|
@import './04-interactive/_toasts.css';
|
|
@import './04-interactive/_zoom-control.css';
|
|
|
|
/* 05 - Responsive */
|
|
@import './05-responsive/_breakpoints.css';
|
|
|
|
/* 06 - Effects */
|
|
@import './06-effects/_skeleton.css';
|
|
|
|
/* 08 - Contexts */
|
|
@import './08-contexts/_print.css';
|