/* ============================================ NUCLEAR FIX FOR VERSE HIGHLIGHTING IN 1024-1366 RANGE ============================================ Purpose: Restore proper verse number highlighting for devices between 1024px and 1366px with MAXIMUM SPECIFICITY to override aggressive resets in responsive-design.css Strategy: Use multiple selector combinations to achieve maximum CSS specificity and ensure our styles win the cascade. Recent Updates: - Removed unwanted background from unhighlighted verse numbers - Increased margins from 2px to 8px for better spacing - Added spark animation support for verse selection */ @media (min-width: 1024px) and (max-width: 1366px) { /* ========================================== BASE STATE FOR VERSE NUMBERS Clean state with no background by default ========================================== */ .chapter-content .v, .bible-book-content .chapter-content .v, .bible-main-content .chapter-content .v, .content-wrapper .chapter-content .v, body.ai-panel-open .chapter-content .v, .main-wrapper.sidebar-collapsed .chapter-content .v { background: transparent !important; /* NO background by default */ border: 2px solid transparent !important; /* Transparent border prevents jitter on hover */ border-radius: 6px !important; color: var(--bible-text-verse-hover) !important; opacity: 1 !important; visibility: visible !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; padding: 4px 7px !important; margin: 0 8px !important; /* Increased margin for better spacing */ display: inline-block !important; min-width: 22px !important; text-align: center !important; line-height: 1 !important; font-size: 0.75em !important; box-sizing: border-box !important; } /* Restore hover state for verse numbers - MAXIMUM SPECIFICITY */ .chapter-content .v:hover, .bible-book-content .chapter-content .v:hover, .bible-main-content .chapter-content .v:hover, .content-wrapper .chapter-content .v:hover, body.ai-panel-open .chapter-content .v:hover, .main-wrapper.sidebar-collapsed .chapter-content .v:hover, body.ai-panel-open .main-wrapper.sidebar-collapsed .chapter-content .v:hover { background: var(--bible-verse-hover-bg) !important; border-color: var(--bible-border-verse-hover) !important; /* Only change color, not width - prevents jitter */ color: var(--bible-text-verse-hover) !important; opacity: 1 !important; visibility: visible !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; } /* Restore selected state for verse numbers - MAXIMUM SPECIFICITY */ .chapter-content .v.selected, .bible-book-content .chapter-content .v.selected, .bible-main-content .chapter-content .v.selected, .content-wrapper .chapter-content .v.selected, body.ai-panel-open .chapter-content .v.selected, .main-wrapper.sidebar-collapsed .chapter-content .v.selected, body.ai-panel-open .main-wrapper.sidebar-collapsed .chapter-content .v.selected { background: var(--bible-verse-selected-bg) !important; border-color: var(--bible-border-verse-selected) !important; /* Only change color, width stays at 2px from base */ color: var(--bible-border-verse-selected) !important; font-weight: inherit !important; opacity: 1 !important; visibility: visible !important; box-shadow: var(--bible-shadow-verse-selected) !important; } /* ========================================== VERSE TEXT UNDERLINE STYLING ========================================== */ .verse-text.underline, .bible-book-content .verse-text.underline, .bible-main-content .verse-text.underline, body.ai-panel-open .verse-text.underline, .main-wrapper.sidebar-collapsed .verse-text.underline { /* No text-decoration - keep clean highlight only */ opacity: 1 !important; visibility: visible !important; } /* ========================================== USER PREFERENCE HIGHLIGHTING Ensure user-customized highlight colors work ========================================== */ /* User preference hover state - MAXIMUM SPECIFICITY */ .chapter-content .v:hover, .bible-book-content .chapter-content .v:hover, .bible-main-content .chapter-content .v:hover, body.ai-panel-open .chapter-content .v:hover, .main-wrapper.sidebar-collapsed .chapter-content .v:hover { background: var(--user-highlight-bg-20, var(--bible-verse-hover-bg)) !important; border-color: var(--user-highlight-border, var(--bible-border-verse-hover)) !important; color: var(--user-highlight-text, var(--bible-text-verse-hover)) !important; opacity: 1 !important; visibility: visible !important; } /* User preference selected state - MAXIMUM SPECIFICITY */ .chapter-content .v.selected, .bible-book-content .chapter-content .v.selected, .bible-main-content .chapter-content .v.selected, body.ai-panel-open .chapter-content .v.selected, .main-wrapper.sidebar-collapsed .chapter-content .v.selected { background: var(--user-highlight-selected, var(--bible-verse-selected-bg)) !important; border-color: var(--user-highlight-border, var(--bible-border-verse-selected)) !important; color: var(--user-highlight-text, var(--bible-border-verse-selected)) !important; box-shadow: 0 2px 4px color-mix(in srgb, var(--user-highlight-border, var(--bible-border-verse-selected)) 20%, transparent) !important; opacity: 1 !important; visibility: visible !important; } /* ========================================== DARK THEME VERSE NUMBER HIGHLIGHTING Enhanced visibility in dark mode ========================================== */ /* Dark theme hover state - MAXIMUM SPECIFICITY */ [data-theme="dark"] .chapter-content .v:hover, [data-theme="dark"] .bible-book-content .chapter-content .v:hover, [data-theme="dark"] .bible-main-content .chapter-content .v:hover, [data-theme="dark"] body.ai-panel-open .chapter-content .v:hover, [data-theme="dark"] .main-wrapper.sidebar-collapsed .chapter-content .v:hover, [data-theme="dark"] body.ai-panel-open .main-wrapper.sidebar-collapsed .chapter-content .v:hover { background: var(--user-highlight-bg-20, var(--bible-verse-hover-bg)) !important; border-color: var(--user-highlight-border, var(--bible-border-verse-hover)) !important; color: var(--user-highlight-text, var(--bible-text-verse-hover)) !important; opacity: 1 !important; visibility: visible !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2) !important; font-weight: inherit !important; } /* Dark theme selected state - MAXIMUM SPECIFICITY */ [data-theme="dark"] .chapter-content .v.selected, [data-theme="dark"] .bible-book-content .chapter-content .v.selected, [data-theme="dark"] .bible-main-content .chapter-content .v.selected, [data-theme="dark"] body.ai-panel-open .chapter-content .v.selected, [data-theme="dark"] .main-wrapper.sidebar-collapsed .chapter-content .v.selected, [data-theme="dark"] body.ai-panel-open .main-wrapper.sidebar-collapsed .chapter-content .v.selected { background: var(--user-highlight-selected, var(--bible-verse-selected-bg)) !important; border-color: var(--user-highlight-border, var(--bible-border-verse-selected)) !important; color: var(--user-highlight-text, var(--bible-border-verse-selected)) !important; opacity: 1 !important; visibility: visible !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important; text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3) !important; font-weight: inherit !important; } /* ========================================== VERSE TEXT HIGHLIGHTING Ensure verse text also has proper highlighting ========================================== */ /* Verse text hover state - MAXIMUM SPECIFICITY */ /* Note: Do NOT change padding/margin/border on hover to prevent jitter */ @media (hover: hover) and (pointer: fine) { .verse-text:hover, .verse-text-wrapper:hover, .bible-book-content .verse-text:hover, .bible-main-content .verse-text:hover, body.ai-panel-open .verse-text:hover, .main-wrapper.sidebar-collapsed .verse-text:hover { background: var(--user-highlight-bg-20, var(--bible-verse-text-hover)) !important; /* Do NOT add border, border-radius, padding, margin - causes jitter/gaps */ } } /* Verse text selected state (underline class) - MAXIMUM SPECIFICITY */ /* Keep same padding/margin as base to prevent jitter */ .verse-text.underline, .verse-text-wrapper.underline, .bible-book-content .verse-text.underline, .bible-main-content .verse-text.underline, body.ai-panel-open .verse-text.underline, .main-wrapper.sidebar-collapsed .verse-text.underline, body.ai-panel-open .main-wrapper.sidebar-collapsed .verse-text.underline { background: var(--user-highlight-selected, var(--bible-verse-text-selected)) !important; border-color: transparent !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; } /* ========================================== DARK THEME VERSE TEXT HIGHLIGHTING ========================================== */ @media (hover: hover) and (pointer: fine) { [data-theme="dark"] .verse-text:hover, [data-theme="dark"] .verse-text-wrapper:hover, [data-theme="dark"] .bible-book-content .verse-text:hover, [data-theme="dark"] .bible-main-content .verse-text:hover, [data-theme="dark"] body.ai-panel-open .verse-text:hover, [data-theme="dark"] .main-wrapper.sidebar-collapsed .verse-text:hover { background: var(--user-highlight-bg-20, var(--bible-verse-text-hover)) !important; /* Do NOT change border on hover - causes jitter/compacting */ color: var(--bible-text-primary) !important; /* Do NOT change opacity, margin, padding, font-weight - causes jitter */ } } [data-theme="dark"] .verse-text.underline, [data-theme="dark"] .verse-text-wrapper.underline, [data-theme="dark"] .bible-book-content .verse-text.underline, [data-theme="dark"] .bible-main-content .verse-text.underline, [data-theme="dark"] body.ai-panel-open .verse-text.underline, [data-theme="dark"] .main-wrapper.sidebar-collapsed .verse-text.underline { background: var(--user-highlight-selected, var(--bible-verse-text-selected)) !important; border-color: transparent !important; box-shadow: none !important; color: var(--bible-text-primary) !important; opacity: 1 !important; visibility: visible !important; } /* ========================================== TEXT READABILITY ENHANCEMENTS ========================================== */ /* Ensure nested elements inherit proper colors */ .chapter-content .v, .verse-text, .verse-text-wrapper { color: inherit !important; } /* Maintain text readability when highlighted */ .chapter-content .v.selected, .verse-text.underline { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ========================================== ACCESSIBILITY & FOCUS STATES ========================================== */ .chapter-content .v:focus, .verse-text:focus, .verse-text-wrapper:focus { outline: 2px solid var(--user-highlight-color) !important; outline-offset: 2px !important; } /* ========================================== ENSURE PROPER CURSOR FOR INTERACTIVITY ========================================== */ .chapter-content .v, .verse-text, .verse-text-wrapper { cursor: pointer !important; } /* ========================================== SPARK ANIMATION FOR VERSE SELECTION Beautiful outward spark effect when highlighting verses ========================================== */ /* Ensure verse numbers can contain absolutely positioned sparks */ .chapter-content .v { position: relative !important; overflow: visible !important; } /* Spark particle base styling */ .verse-spark-desktop { position: absolute !important; border-radius: 50% !important; pointer-events: none !important; z-index: 1000 !important; will-change: transform, opacity !important; } /* Spark animation keyframes - defined in JS but included here as fallback */ @keyframes sparkleOutDesktop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.2); box-shadow: 0 0 8px currentColor; } 50% { opacity: 1; transform: translate(calc(-50% + var(--spark-x, 20px)), calc(-50% + var(--spark-y, 20px))) scale(1.2); box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; } 100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x, 20px)), calc(-50% + var(--spark-y, 20px))) scale(0.1); box-shadow: 0 0 10px currentColor; } } /* Enhance selected state to work smoothly with spark animation */ .chapter-content .v.selected { overflow: visible !important; z-index: 100 !important; } /* Dark theme spark adjustments */ [data-theme="dark"] .verse-spark-desktop { filter: brightness(1.3) !important; } }