From 248d74b5e9933df071cb7c141897373d71ea21de Mon Sep 17 00:00:00 2001
From: Scott Tomaszewski <scott.tomaszewski@finxact.com>
Date: Sat, 12 Apr 2025 08:12:51 -0400
Subject: [PATCH] Moves away from style outside of css

---
 src/components/BibleNavigation.ts        |  6 +--
 src/components/BibleReferenceRenderer.ts | 20 ++--------
 styles.css                               | 49 ++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/src/components/BibleNavigation.ts b/src/components/BibleNavigation.ts
index 8658ff6..38dfc0a 100644
--- a/src/components/BibleNavigation.ts
+++ b/src/components/BibleNavigation.ts
@@ -147,9 +147,8 @@ export class BibleNavigation {
         });
         
         const selectorContainer = navEl.createDiv({
-            cls: 'nav-book-data'
+            cls: 'nav-book-data dj-hidden'
         });
-        selectorContainer.style.display = 'none';
         
         // Create the book dropdown
         const bookDropdownContainer = selectorContainer.createDiv();
@@ -187,8 +186,7 @@ export class BibleNavigation {
         
         // Toggle selector on click
         selectorEl.addEventListener('click', () => {
-            selectorContainer.style.display = 
-                selectorContainer.style.display === 'none' ? 'block' : 'none';
+            selectorContainer.classList.toggle('dj-hidden');
         });
         
         // Next chapter button
diff --git a/src/components/BibleReferenceRenderer.ts b/src/components/BibleReferenceRenderer.ts
index 2baf2cb..0e8fcaa 100644
--- a/src/components/BibleReferenceRenderer.ts
+++ b/src/components/BibleReferenceRenderer.ts
@@ -198,7 +198,6 @@ export class BibleReferenceRenderer {
             // Add verses
             const passageEl = document.createElement('div');
             passageEl.classList.add('bible-passage-text');
-            passageEl.style.fontSize = this.fontSizeForVerses;
             
             // Check if we have HTML content
             if (passage.htmlContent) {
@@ -332,10 +331,8 @@ export class BibleReferenceRenderer {
         
         // Position the main popup with slight overlap to the reference
         // This creates an easier hover target when moving from reference to popup
-        versePreviewEl.style.position = 'absolute';
         versePreviewEl.style.left = `${rect.left}px`;
-        versePreviewEl.style.top = `${rect.bottom - 3}px`; // Slight overlap with reference
-        versePreviewEl.style.zIndex = '1000';
+        versePreviewEl.style.top = `${rect.bottom - 3}px`;
         
         // Add popup to document
         document.body.appendChild(versePreviewEl);
@@ -457,11 +454,6 @@ export class BibleReferenceRenderer {
             return passage.htmlContent || '';
         }
         
-        // Apply styling based on settings
-        const fontSizeStyle = this.settings.bibleTextFontSize 
-            ? `font-size: ${this.settings.bibleTextFontSize}%;` 
-            : '';
-        
         // Determine which CSS class to use based on the style preset
         let styleClass = 'bible-passage-default';
         if (this.settings.stylePreset === 'minimal') {
@@ -475,7 +467,7 @@ export class BibleReferenceRenderer {
         }
         
         return `
-            <div class="bible-passage ${styleClass}" style="${fontSizeStyle}">
+            <div class="bible-passage ${styleClass}">
                 <div class="bible-passage-reference">${passage.reference}</div>
                 <div class="bible-passage-content">${passage.htmlContent || ''}</div>
                 <div class="bible-passage-footer">ESV</div>
@@ -491,16 +483,10 @@ export class BibleReferenceRenderer {
             return `<span class="inline-bible-reference-error">${passage.reference}</span>`;
         }
         
-        // Extract just the text, removing verse numbers if desired
         let content = passage.htmlContent || '';
         
-        // Apply styling based on settings
-        const fontSizeStyle = this.settings.bibleTextFontSize 
-            ? `font-size: ${this.settings.bibleTextFontSize}%;` 
-            : '';
-        
         return `
-            <span class="inline-bible-reference" style="${fontSizeStyle}">
+            <span class="inline-bible-reference">
                 <span class="inline-bible-reference-text">${content}</span>
                 <span class="inline-bible-reference-label">(${passage.reference}, ESV)</span>
             </span>
diff --git a/styles.css b/styles.css
index f5f5594..2cc7a6f 100644
--- a/styles.css
+++ b/styles.css
@@ -9,6 +9,11 @@ If your plugin does not need CSS, delete this file.
 
 /* Disciples Journal Plugin Styles */
 
+/* Utility Classes */
+.dj-hidden {
+    display: none !important; /* Use !important to ensure override */
+}
+
 /* Bible Navigation Styles */
 .bible-navigation {
     display: flex;
@@ -199,3 +204,47 @@ If your plugin does not need CSS, delete this file.
     margin: 6px 0;
 }
 
+/* Bible Verse Preview Styles */
+.bible-verse-preview {
+    position: absolute; 
+    z-index: 1000; 
+    background-color: var(--background-secondary); /* Example background */
+    border: 1px solid var(--background-modifier-border);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    padding: 10px;
+    border-radius: 4px;
+    max-width: 400px; /* Example max-width */
+    font-size: 0.9em; /* Example font-size */
+}
+
+.bible-verse-preview-heading {
+    font-weight: bold;
+    margin-bottom: 5px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid var(--background-modifier-border);
+    cursor: pointer; /* Make heading clickable */
+}
+
+.bible-verse-preview-heading:hover {
+    color: var(--text-accent);
+}
+
+.bible-verse-preview-content p {
+    margin: 5px 0;
+    line-height: 1.4;
+}
+
+/* Bible Reference Font Size */
+:root {
+    /* Define default font size - can be overridden by themes/settings */
+    --bible-text-font-size: 100%; 
+}
+
+.bible-passage .bible-passage-text,
+.bible-passage .bible-passage-content { /* Apply to both text and content divs */
+    font-size: var(--bible-text-font-size);
+}
+
+.inline-bible-reference .inline-bible-reference-text { /* Target the text part */
+    font-size: var(--bible-text-font-size);
+}