diff --git a/extension/popup.html b/extension/popup.html index ac2b986..311aab7 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -9,44 +9,53 @@
- - - - - - +
+ + + + +
+
+ + + + +
+
+ + +
+
- - + +
-
- - - - - \ No newline at end of file diff --git a/extension/popup.js b/extension/popup.js index 17a01a0..e9bf17d 100644 --- a/extension/popup.js +++ b/extension/popup.js @@ -24226,12 +24226,6 @@ const searchInput = document.getElementById('search'); const searchButton = document.getElementById('searchButton'); const prevChapterBtn = document.getElementById('prevChapter'); const nextChapterBtn = document.getElementById('nextChapter'); -const helpModal = document.getElementById('helpModal'); -const helpBtn = document.getElementById('helpBtn'); -const closeHelpModal = document.getElementById('closeHelpModal'); -const aboutModal = document.getElementById('aboutModal'); -const aboutBtn = document.getElementById('aboutBtn'); -const closeAboutModal = document.getElementById('closeAboutModal'); const toggleNumberingBtn = document.getElementById('toggleNumbering'); function initializeApp() { @@ -24367,22 +24361,6 @@ toggleNumberingBtn.addEventListener('click', () => { loadChapterContent(bookSelect.value, chapterSelect.value); }); -helpBtn.addEventListener('click', () => { - helpModal.style.display = 'flex'; -}); - -closeHelpModal.addEventListener('click', () => { - helpModal.style.display = 'none'; -}); - -aboutBtn.addEventListener('click', () => { - aboutModal.style.display = 'flex'; -}); - -closeAboutModal.addEventListener('click', () => { - aboutModal.style.display = 'none'; -}); - function performSearch() { const query = searchInput.value.trim(); if (!query) return; diff --git a/extension/styles.css b/extension/styles.css index 96768db..58519a5 100644 --- a/extension/styles.css +++ b/extension/styles.css @@ -7,8 +7,6 @@ --background-color: #ecf0f1; --text-color: #2c3e50; --verse-hover-color: #f39c12; - --modal-bg: rgba(0, 0, 0, 0.5); - --modal-content-bg: #fff; } body { @@ -37,19 +35,37 @@ body { .controls { display: flex; flex-wrap: wrap; - gap: 5px; + gap: 10px; + align-items: center; +} + +.select-wrapper, .search-wrapper { + position: relative; + flex-grow: 1; +} + +.icon { + width: 20px; + height: 20px; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 10px; + fill: var(--primary-color); } select, input, button { - padding: 5px; + padding: 8px 10px; border: none; - border-radius: 3px; + border-radius: 5px; font-size: 14px; + width: 100%; } select, input { background-color: white; color: var(--text-color); + padding-left: 35px; } button { @@ -57,12 +73,46 @@ button { color: white; cursor: pointer; transition: background-color 0.3s ease; + display: flex; + align-items: center; + justify-content: center; } button:hover { background-color: darkorange; } +button .icon { + position: static; + transform: none; + fill: white; + margin-right: 5px; +} + +.search-wrapper { + display: flex; +} + +.search-wrapper input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.search-wrapper button { + width: auto; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +#prevNext { + display: flex; + gap: 5px; +} + +#prevNext button, #toggleNumbering { + padding: 8px 12px; +} + .container { flex-grow: 1; overflow-y: auto; @@ -97,58 +147,12 @@ button:hover { font-size: 0.9em; } -.modal { - display: none; - position: fixed; - z-index: 2000; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: var(--modal-bg); - justify-content: center; - align-items: center; -} - -.modal-content { - background-color: var(--modal-content-bg); - padding: 20px; - border-radius: 5px; - max-width: 80%; - width: 300px; - position: relative; -} - -.close-modal { - position: absolute; - top: 5px; - right: 10px; - font-size: 20px; - cursor: pointer; -} - -.highlight { - background-color: yellow; - color: black; -} - -#prevNext { - display: flex; - justify-content: space-between; - width: 100%; -} - @media (max-width: 400px) { - body { - height: 100vh; - } - .controls { flex-direction: column; } - select, input, button { + .select-wrapper, .search-wrapper { width: 100%; } } \ No newline at end of file