/* assets/css/tooltips.css - Simplified Version */ /* Style for detected phrasal verbs */ .phrasal-tooltip-trigger { position: relative; cursor: help; color: #2271b1; border-bottom: 1px dotted #2271b1; text-decoration: none; transition: all 0.2s ease; display: inline; background: transparent; } .phrasal-tooltip-trigger:hover { color: #135e96; border-bottom-color: #135e96; background-color: rgba(34, 113, 177, 0.1); } /* Exercise blocking - hide tooltips when needed */ .exercise-blocked .phrasal-tooltip-trigger, .no-phrasal-tooltips .phrasal-tooltip-trigger { color: inherit !important; border-bottom: none !important; cursor: inherit !important; background: transparent !important; } .exercise-blocked .phrasal-tooltip-trigger:hover, .no-phrasal-tooltips .phrasal-tooltip-trigger:hover { color: inherit !important; background: transparent !important; } /* Protected areas styling */ .exercise-protected, .no-phrasal-tooltips { position: relative; } .exercise-protected .phrasal-tooltip-trigger, .no-phrasal-tooltips .phrasal-tooltip-trigger { color: inherit !important; border: none !important; cursor: inherit !important; background: transparent !important; } /* Tooltip container - simplified design */ .phrasal-tooltip { position: absolute; z-index: 9999; background: #333; color: #fff; border-radius: 6px; padding: 10px 14px; font-size: 14px; line-height: 1.4; white-space: nowrap; max-width: 320px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transform: translateY(5px); transition: all 0.2s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; pointer-events: none; } /* Visible tooltip */ .phrasal-tooltip.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Tooltip arrow */ .phrasal-tooltip::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #333; } /* When tooltip is below */ .phrasal-tooltip.bottom::before { top: auto; bottom: -6px; border-top: 6px solid #333; border-bottom: none; } /* When tooltip is on the left */ .phrasal-tooltip.left::before { top: 50%; left: auto; right: -6px; transform: translateY(-50%); border-left: 6px solid #333; border-right: none; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } /* When tooltip is on the right */ .phrasal-tooltip.right::before { top: 50%; left: -6px; right: auto; transform: translateY(-50%); border-right: 6px solid #333; border-left: none; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } /* Simplified tooltip content style */ .tooltip-content { display: flex; flex-direction: column; gap: 4px; } .tooltip-phrasal { font-weight: bold; color: #a7d7ff; margin-bottom: 2px; font-size: 15px; } /* Synonyms without label - simplified styling */ .tooltip-synonyms { color: #fff; font-style: italic; font-size: 13px; line-height: 1.3; } /* Hidden by default - pronunciation (symbols) */ .tooltip-pronunciation { color: #ffeb99; font-size: 12px; margin-top: 2px; display: none; /* Hidden by default */ } /* Hidden by default - definition */ .tooltip-definition { color: #e0e0e0; font-size: 12px; margin-top: 4px; white-space: normal; max-width: 300px; display: none; /* Hidden by default */ } /* Show pronunciation and definition only when explicitly enabled */ .phrasal-tooltip.show-pronunciation .tooltip-pronunciation { display: block; } .phrasal-tooltip.show-definition .tooltip-definition { display: block; } /* Loading state */ .phrasal-tooltip.loading { opacity: 1; visibility: visible; } .phrasal-tooltip.loading .tooltip-content { display: none; } .phrasal-tooltip.loading::after { content: 'Loading...'; color: #ccc; font-size: 12px; } /* Error state */ .phrasal-tooltip.error .tooltip-content { display: none; } .phrasal-tooltip.error::after { content: 'Failed to load'; color: #ff6b6b; font-size: 12px; } /* Exercise blocking indicators (debug mode only) */ body.phrasal-debug .exercise-blocked::after { content: '🚫 Exercises detected - tooltips blocked'; position: fixed; top: 20px; right: 20px; background: #ff4444; color: white; padding: 8px 12px; border-radius: 4px; font-size: 12px; z-index: 10000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Debug indicator for protected areas */ body.phrasal-debug .no-phrasal-tooltips::before { content: '🛡️ Protected'; position: absolute; top: -2px; right: -2px; background: #28a745; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; z-index: 1000; pointer-events: none; } /* Mobile responsiveness */ @media (max-width: 768px) { .phrasal-tooltip { max-width: 280px; white-space: normal; padding: 12px; font-size: 14px; } .tooltip-phrasal { font-size: 14px; } .tooltip-synonyms { font-size: 13px; max-width: 260px; } .tooltip-definition { max-width: 260px; } /* Adjust arrow for mobile */ .phrasal-tooltip::before { border-width: 5px; } .phrasal-tooltip.bottom::before { border-top-width: 5px; } .phrasal-tooltip.left::before, .phrasal-tooltip.right::before { border-width: 5px; } } /* Prevent conflicts with themes */ .phrasal-tooltip * { box-sizing: border-box; margin: 0; padding: 0; } .phrasal-tooltip { all: initial; position: absolute; z-index: 9999; background: #333; color: #fff; border-radius: 6px; padding: 10px 14px; font-size: 14px; line-height: 1.4; white-space: nowrap; max-width: 320px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transform: translateY(5px); transition: all 0.2s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; pointer-events: none; } /* Dark theme customization */ @media (prefers-color-scheme: dark) { .phrasal-tooltip-trigger { color: #4dabf7; border-bottom-color: #4dabf7; } .phrasal-tooltip-trigger:hover { color: #74c0fc; border-bottom-color: #74c0fc; background-color: rgba(77, 171, 247, 0.1); } .phrasal-tooltip { background: #1a1a1a; border: 1px solid #444; } .phrasal-tooltip::before { border-bottom-color: #1a1a1a; } .phrasal-tooltip.bottom::before { border-top-color: #1a1a1a; } .phrasal-tooltip.left::before { border-left-color: #1a1a1a; } .phrasal-tooltip.right::before { border-right-color: #1a1a1a; } } /* High contrast mode */ @media (prefers-contrast: high) { .phrasal-tooltip-trigger { color: #0000ff; border-bottom: 2px solid #0000ff; font-weight: bold; } .phrasal-tooltip-trigger:hover { color: #000080; border-bottom-color: #000080; background-color: #ffff00; } .phrasal-tooltip { background: #000; color: #fff; border: 2px solid #fff; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .phrasal-tooltip-trigger, .phrasal-tooltip { transition: none; } .phrasal-tooltip.show { transform: none; } } /* Specific overrides for exercise areas */ .exercise-content, .quiz-area, .exercise-wrapper, .quiz-wrapper, .exercise-protected, [data-exercise], [data-quiz] { /* Ensure exercise areas don't interfere with their own functionality */ position: relative; } .exercise-content .phrasal-tooltip-trigger, .quiz-area .phrasal-tooltip-trigger, .exercise-wrapper .phrasal-tooltip-trigger, .quiz-wrapper .phrasal-tooltip-trigger, .exercise-protected .phrasal-tooltip-trigger, [data-exercise] .phrasal-tooltip-trigger, [data-quiz] .phrasal-tooltip-trigger { /* Force remove all tooltip styling from exercise areas */ color: inherit !important; border: none !important; cursor: inherit !important; background: transparent !important; text-decoration: none !important; position: static !important; } /* WordPress editor compatibility */ .wp-block-editor .phrasal-tooltip-trigger { /* Don't show tooltips in editor */ color: inherit !important; border: none !important; cursor: inherit !important; } /* Print styles */ @media print { .phrasal-tooltip-trigger { color: inherit !important; border: none !important; background: transparent !important; } .phrasal-tooltip { display: none !important; } }