1 files changed, 69 insertions, 41 deletions

diff --git a/search/search.css b/search/search.css
index 648a792f..19f76f9d 100644
--- a/search/search.css
+++ b/search/search.css
@@ -1,10 +1,33 @@
-/*---------------- Search Box */
+/*---------------- Search Box positioning */
+
+#main-menu > li:last-child {
+    /* This <li> object is the parent of the search bar */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 36px;
+    margin-right: 1em;
+}
+
+/*---------------- Search box styling */
+
+.SRPage * {
+    font-weight: normal;
+    line-height: normal;
+}
+
+dark-mode-toggle {
+    margin-left: 5px;
+    display: flex;
+    float: right;
+}
 
 #MSearchBox {
+    display: inline-block;
     white-space : nowrap;
-    background: white;
+    background: var(--search-background-color);
     border-radius: 0.65em;
-    box-shadow: inset 0.5px 0.5px 3px 0px #555;
+    box-shadow: var(--search-box-shadow);
     z-index: 102;
 }
 
@@ -17,11 +40,24 @@
 #MSearchSelect {
     display: inline-block;
     vertical-align: middle;
+    width: 20px;
     height: 19px;
-    padding: 0 0 0 0.3em;
-    margin: 0;
+    background-image: var(--search-magnification-select-image);
+    margin: 0 0 0 0.3em;
+    padding: 0;
 }
 
+#MSearchSelectExt {
+    display: inline-block;
+    vertical-align: middle;
+    width: 10px;
+    height: 19px;
+    background-image: var(--search-magnification-image);
+    margin: 0 0 0 0.5em;
+    padding: 0;
+}
+
+
 #MSearchField {
     display: inline-block;
     vertical-align: middle;
@@ -31,9 +67,9 @@
     padding: 0;
     line-height: 1em;
     border:none;
-    color: #909090;
+    color: var(--search-foreground-color);
     outline: none;
-    font-family: Arial, Verdana, sans-serif;
+    font-family: var(--font-family-search);
     -webkit-border-radius: 0px;
     border-radius: 0px;
     background: none;
@@ -65,23 +101,15 @@
 }
 
 #MSearchCloseImg {
-    height: 1.4em;
     padding: 0.3em;
     margin: 0;
 }
 
 .MSearchBoxActive #MSearchField {
-    color: #000000;
+    color: var(--search-active-color);
 }
 
-#main-menu > li:last-child {
-    /* This <li> object is the parent of the search bar */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 36px;
-    margin-right: 1em;
-}
+
 
 /*---------------- Search filter selection */
 
@@ -89,8 +117,8 @@
     display: none;
     position: absolute;
     left: 0; top: 0;
-    border: 1px solid #90A5CE;
-    background-color: #F9FAFC;
+    border: 1px solid var(--search-filter-border-color);
+    background-color: var(--search-filter-background-color);
     z-index: 10001;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -103,7 +131,7 @@
 }
 
 .SelectItem {
-    font: 8pt Arial, Verdana, sans-serif;
+    font: 8pt var(--font-family-search);
     padding-left:  2px;
     padding-right: 12px;
     border: 0px;
@@ -111,7 +139,7 @@
 
 span.SelectionMark {
     margin-right: 4px;
-    font-family: monospace;
+    font-family: var(--font-family-monospace);
     outline-style: none;
     text-decoration: none;
 }
@@ -119,7 +147,7 @@ span.SelectionMark {
 a.SelectItem {
     display: block;
     outline-style: none;
-    color: #000000; 
+    color: var(--search-filter-foreground-color);
     text-decoration: none;
     padding-left:   6px;
     padding-right: 12px;
@@ -127,14 +155,14 @@ a.SelectItem {
 
 a.SelectItem:focus,
 a.SelectItem:active {
-    color: #000000; 
+    color: var(--search-filter-foreground-color);
     outline-style: none;
     text-decoration: none;
 }
 
 a.SelectItem:hover {
-    color: #FFFFFF;
-    background-color: #3D578C;
+    color: var(--search-filter-highlight-text-color);
+    background-color: var(--search-filter-highlight-bg-color);
     outline-style: none;
     text-decoration: none;
     cursor: pointer;
@@ -152,9 +180,12 @@ iframe#MSearchResults {
     display: none;
     position: absolute;
     left: 0; top: 0;
-    border: 1px solid #000;
-    background-color: #EEF1F7;
+    border: 1px solid var(--search-results-border-color);
+    background-color: var(--search-results-background-color);
     z-index:10000;
+    width: 300px;
+    height: 400px;
+    overflow: auto;
 }
 
 /* ----------------------------------- */
@@ -162,7 +193,6 @@ iframe#MSearchResults {
 
 #SRIndex {
     clear:both; 
-    padding-bottom: 15px;
 }
 
 .SREntry {
@@ -175,8 +205,9 @@ iframe#MSearchResults {
     padding: 1px 5px;
 }
 
-body.SRPage {
+div.SRPage {
     margin: 5px 2px;
+    background-color: var(--search-results-background-color);
 }
 
 .SRChildren {
@@ -188,17 +219,18 @@ body.SRPage {
 }
 
 .SRSymbol {
-    font-weight: bold; 
-    color: #425E97;
-    font-family: Arial, Verdana, sans-serif;
+    font-weight: bold;
+    color: var(--search-results-foreground-color);
+    font-family: var(--font-family-search);
     text-decoration: none;
     outline: none;
 }
 
 a.SRScope {
     display: block;
-    color: #425E97; 
-    font-family: Arial, Verdana, sans-serif;
+    color: var(--search-results-foreground-color);
+    font-family: var(--font-family-search);
+    font-size: 8pt;
     text-decoration: none;
     outline: none;
 }
@@ -210,14 +242,14 @@ a.SRScope:focus, a.SRScope:active {
 
 span.SRScope {
     padding-left: 4px;
-    font-family: Arial, Verdana, sans-serif;
+    font-family: var(--font-family-search);
 }
 
 .SRPage .SRStatus {
     padding: 2px 5px;
     font-size: 8pt;
     font-style: italic;
-    font-family: Arial, Verdana, sans-serif;
+    font-family: var(--font-family-search);
 }
 
 .SRResult {
@@ -231,14 +263,10 @@ div.searchresults {
 
 /*---------------- External search page results */
 
-.searchresult {
-    background-color: #F0F3F8;
-}
-
 .pages b {
    color: white;
    padding: 5px 5px 3px 5px;
-   background-image: url("../tab_a.png");
+   background-image: var(--nav-gradient-active-image-parent);
    background-repeat: repeat-x;
    text-shadow: 0 1px 1px #000000;
 }