docs: move inline style options to the scss stylesheet

NotAShelf · Dec 9, 2024 · 5dbf564 · 5dbf564
1 parent 52d8811
commit 5dbf564
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 66 deletions.
diff --git a/docs/static/script/search.js b/docs/static/script/search.js
@@ -24,71 +24,6 @@ document.addEventListener("DOMContentLoaded", () => {
 		searchPopup.classList.add("hidden");
 		document.body.appendChild(searchPopup);
 
-		// TODO: move this to the compiled stylesheet after development
-		const style = document.createElement("style");
-		style.textContent = `
-      #search-bar {
-        position: sticky;
-        top: 0;
-        background: #f9f9f9;
-        padding: 10px;
-        border-bottom: 1px solid #ccc;
-        z-index: 1000;
-        cursor: pointer;
-     }
-
-      #search-popup {
-        position: fixed;
-        top: 25%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background: #fff;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-        padding: 20px;
-        width: 450px;
-        max-height: 400px; /* Limit the height of the popup */
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        z-index: 1001;
-        display: none; /* Initially hidden */
-        overflow: hidden;
-      }
-
-      #search-popup-content {
-        display: flex;
-        flex-direction: column;
-      }
-
-      #search-input-popup {
-        padding: 8px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        margin-bottom: 10px;
-      }
-
-      #search-results-list {
-        list-style-type: none;
-        padding: 0;
-        max-height: 300px; /* Limit the number of visible entries */
-        overflow-y: auto; /* Make it scrollable */
-      }
-
-      #search-results-list li {
-        margin: 5px 0;
-        cursor: pointer;
-        padding: 5px;
-      }
-
-      #search-results-list li:hover {
-        background-color: #f0f0f0;
-      }
-
-      .hidden {
-        display: none;
-      }
-    `;
-		document.head.appendChild(style);
-
 		// Focus the input on pop-up widget
 		searchBar.addEventListener("click", (event) => {
 			event.stopPropagation(); // also cancel clicks to get rid of that annoying cursor flicker
@@ -181,7 +116,7 @@ document.addEventListener("DOMContentLoaded", () => {
 			// If there are items > maxVisibleResults, show a "See More" option
 			if (matchingOptions.length > maxVisibleResults) {
 				const li = document.createElement("li");
-				li.textContent = `See more (${matchingOptions.length - maxVisibleResults} more)`;
+				li.textContent = `${matchingOptions.length - maxVisibleResults} more results...\nNarrow down your query to see them.`;
 				li.style.fontStyle = "italic";
 				searchResultsList.appendChild(li);
 			}

diff --git a/docs/static/style.scss b/docs/static/style.scss
@@ -61,6 +61,71 @@ $color-blue-900: #1e3a8a;
 	}
 }
 
+#search-bar {
+	position: sticky;
+	top: 0;
+	background: white;
+	padding: 10px;
+	border-bottom: 1px solid $color-gray-700;
+	z-index: 1000;
+	cursor: pointer;
+
+	@media (prefers-color-scheme: dark) {
+		background: $color-gray-900;
+		color: $color-gray-50;
+	}
+}
+
+#search-popup {
+	position: fixed;
+	top: 25%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background: #fff;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	padding: 20px;
+	width: 450px;
+	max-height: 400px; /* Limit the height of the popup */
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	z-index: 1001;
+	display: none; /* Initially hidden */
+	overflow: hidden;
+}
+
+#search-popup-content {
+	display: flex;
+	flex-direction: column;
+}
+
+#search-input-popup {
+	padding: 8px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	margin-bottom: 10px;
+}
+
+#search-results-list {
+	list-style-type: none;
+	padding: 0;
+	max-height: 300px; /* Limit the number of visible entries */
+	overflow-y: auto; /* Make it scrollable */
+}
+
+#search-results-list li {
+	margin: 5px 0;
+	cursor: pointer;
+	padding: 5px;
+}
+
+#search-results-list li:hover {
+	background-color: #f0f0f0;
+}
+
+.hidden {
+	display: none;
+}
+
 body {
 	background: white;
 	color: $color-gray-900;