Scalable search bar for high resolution displays (#7888)

* Use SVG images for search bar icons

* Update search bar CSS for high resolution displays
Uses CSS shadows instead of PNG images of shadows

* Limit the main-menu CSS rule to first level list
#main-menu li:last-child applies to last childs of sub-lists as well
#main-menu > li:last-child only applies to the top-level list

9 files changed, 196 insertions, 70 deletions

diff --git a/templates/html/close.svg b/templates/html/close.svg
new file mode 100644
index 0000000..a933eea
--- /dev/null
+++ b/templates/html/close.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 11 11"
+   height="11"
+   width="11"
+   id="svg2"
+   version="1.1">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <path
+     id="path12"
+     d="M 5.5 0.5 A 5 5 0 0 0 0.5 5.5 A 5 5 0 0 0 5.5 10.5 A 5 5 0 0 0 10.5 5.5 A 5 5 0 0 0 5.5 0.5 z M 3.5820312 3 A 0.58291923 0.58291923 0 0 1 4 3.1757812 L 5.5 4.6757812 L 7 3.1757812 A 0.58291923 0.58291923 0 0 1 7.4003906 3 A 0.58291923 0.58291923 0 0 1 7.8242188 4 L 6.3242188 5.5 L 7.8242188 7 A 0.58291923 0.58291923 0 1 1 7 7.8242188 L 5.5 6.3242188 L 4 7.8242188 A 0.58291923 0.58291923 0 1 1 3.1757812 7 L 4.6757812 5.5 L 3.1757812 4 A 0.58291923 0.58291923 0 0 1 3.5820312 3 z "
+     style="stroke-width:1.09870648;fill:#bababa;fill-opacity:1" />
+</svg>
diff --git a/templates/html/htmlbase.tpl b/templates/html/htmlbase.tpl
index 47939fd..02741d2 100644
--- a/templates/html/htmlbase.tpl
+++ b/templates/html/htmlbase.tpl
@@ -100,7 +100,7 @@ $(function() {
    <div id="MSearchBox" class="MSearchBoxInactive">
     <div class="left">
      <form id="FSearchBox" action="{{ page.relPath }}{% if config.EXTERNAL_SEARCH %}search{{ doxygen.htmlFileExtension }}{% else %}search.php{% endif %}" method="get">
-      <img id="MSearchSelect" src="{{ page.relPath }}search/mag.png" alt=""/>
+      <img id="MSearchSelect" src="{{ page.relPath }}search/mag.svg" alt=""/>
       <input type="text" id="MSearchField" name="query" value="{{ tr.search }}" size="20" accesskey="S"
                 onfocus="searchBox.OnSearchFieldFocus(true)"
                 onblur="searchBox.OnSearchFieldFocus(false)"/>
@@ -111,7 +111,7 @@ $(function() {
   {% else %}{# !SERVER_BASED_SEARCH #}
    <div id="MSearchBox" class="MSearchBoxInactive">
     <span class="left">
-      <img id="MSearchSelect" src="{{ page.relPath }}search/mag_sel.png"
+      <img id="MSearchSelect" src="{{ page.relPath }}search/mag_sel.svg"
            onmouseover="return searchBox.OnSearchSelectShow()"
            onmouseout="return searchBox.OnSearchSelectHide()"
            alt=""/>
@@ -121,7 +121,7 @@ $(function() {
            onkeyup="searchBox.OnSearchFieldChange(event)"/>
     </span><span class="right">
         <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img
-           id="MSearchCloseImg" border="0" src="{{ page.relPath }}search/close.png"
+           id="MSearchCloseImg" border="0" src="{{ page.relPath }}search/close.svg"
            alt=""/></a>
     </span>
    </div>
diff --git a/templates/html/htmllayout.tpl b/templates/html/htmllayout.tpl
index b434d0c..74d83c6 100644
--- a/templates/html/htmllayout.tpl
+++ b/templates/html/htmllayout.tpl
@@ -44,14 +44,14 @@
 
 {% if config.SERVER_BASED_SEARCH %}
   {# server side search resources #}
-  {% resource 'mag.png'     as 'search/mag.png'     %}
+  {% resource 'mag.svg'     as 'search/mag.svg'     %}
   {% resource 'extsearch.js as 'search/search.js'   %}
   {% resource 'search_functions.php'  as 'search/search_functions.php'  %}
   {% resource 'search_opensearch.php' as 'search/search_opensearch.php' %}
 {% else %}
   {# client side search resources #}
-  {% resource 'mag_sel.png' as 'search/mag_sel.png' %}
-  {% resource 'close.png'   as 'search/close.png'   %}
+  {% resource 'mag_sel.svg' as 'search/mag_sel.svg' %}
+  {% resource 'close.svg'   as 'search/close.svg'   %}
   {% resource 'search.js'   as 'search/search.js'   %}
 {% endif %}
 
diff --git a/templates/html/htmltabs.tpl b/templates/html/htmltabs.tpl
index e7539d9..b8632cb 100644
--- a/templates/html/htmltabs.tpl
+++ b/templates/html/htmltabs.tpl
@@ -35,7 +35,7 @@
      <div id="MSearchBox" class="MSearchBoxInactive">
        <div class="left">
          <form id="FSearchBox" action="{{ page.relPath }}search{% if config.EXTERNAL_SEARCH %}{{ config.HTML_FILE_EXTENSION }}{% else %}.php{% endif %}" method="get">
-           <img id="MSearchSelect" src="{{ page.relPath }}search/mag.png" alt=""/>
+           <img id="MSearchSelect" src="{{ page.relPath }}search/mag.svg" alt=""/>
       {% if page.highlight!='search' %}
            <input type="text" id="MSearchField" name="query" value="{{ tr.search }}" size="20" accesskey="S" 
                   onfocus="searchBox.OnSearchFieldFocus(true)" 
@@ -50,7 +50,7 @@
    <li>
      <div id="MSearchBox" class="MSearchBoxInactive">
      <span class="left">
-       <img id="MSearchSelect" src="{{ page.relPath }}search/mag_sel.png"
+       <img id="MSearchSelect" src="{{ page.relPath }}search/mag_sel.svg"
             onmouseover="return searchBox.OnSearchSelectShow()"
             onmouseout="return searchBox.OnSearchSelectHide()"
             alt=""/>
@@ -60,7 +60,7 @@
             onkeyup="searchBox.OnSearchFieldChange(event)"/>
        </span><span class="right">
          <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img
-            id="MSearchCloseImg" border="0" src="{{ page.relPath }}search/close.png" alt=""/></a>
+            id="MSearchCloseImg" border="0" src="{{ page.relPath }}search/close.svg" alt=""/></a>
        </span>
      </div>
    </li>
diff --git a/templates/html/mag.svg b/templates/html/mag.svg
new file mode 100644
index 0000000..9f46b30
--- /dev/null
+++ b/templates/html/mag.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 20 19"
+   height="19"
+   width="20"
+   id="svg2"
+   version="1.1">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <circle
+     r="3.5"
+     cy="8.5"
+     cx="5.5"
+     id="path4611"
+     style="fill:#000000;fill-opacity:0;stroke:#656565;stroke-width:1.4;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
+  <path
+     id="path4630"
+     d="m 8.1085854,11.109059 2.7823556,2.782356"
+     style="fill:none;stroke:#656565;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+</svg>
diff --git a/templates/html/mag_sel.svg b/templates/html/mag_sel.svg
new file mode 100644
index 0000000..03626f6
--- /dev/null
+++ b/templates/html/mag_sel.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg2"
+   width="20"
+   height="19"
+   viewBox="0 0 20 19"
+   sodipodi:docname="mag_sel.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="2096"
+     id="namedview4"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="32"
+     inkscape:cx="5.9792688"
+     inkscape:cy="1.1436277"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <circle
+     style="fill:#000000;fill-opacity:0;stroke:#656565;stroke-width:1.4;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+     id="path4611"
+     cx="5.5"
+     cy="8.5"
+     r="3.5" />
+  <path
+     style="fill:#656565;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 11,7 13.5,10 16,7 Z"
+     id="path4609"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <path
+     style="fill:none;stroke:#656565;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 8.1085854,11.109059 2.7823556,2.782356"
+     id="path4630"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/templates/html/menu.js b/templates/html/menu.js
index d18a2fe..2fe2214 100644
--- a/templates/html/menu.js
+++ b/templates/html/menu.js
@@ -41,9 +41,9 @@ function initMenu(relPath,searchEnabled,serverSide,searchPage,search) {
   $('#main-nav').children(':first').addClass('sm sm-dox').attr('id','main-menu');
   if (searchEnabled) {
     if (serverSide) {
-      $('#main-menu').append('<li style="float:right"><div id="MSearchBox" class="MSearchBoxInactive"><div class="left"><form id="FSearchBox" action="'+relPath+searchPage+'" method="get"><img id="MSearchSelect" src="'+relPath+'search/mag.png" alt=""/><input type="text" id="MSearchField" name="query" value="'+search+'" size="20" accesskey="S" onfocus="searchBox.OnSearchFieldFocus(true)" onblur="searchBox.OnSearchFieldFocus(false)"></form></div><div class="right"></div></div></li>');
+      $('#main-menu').append('<li style="float:right"><div id="MSearchBox" class="MSearchBoxInactive"><div class="left"><form id="FSearchBox" action="'+relPath+searchPage+'" method="get"><img id="MSearchSelect" src="'+relPath+'search/mag.svg" alt=""/><input type="text" id="MSearchField" name="query" value="'+search+'" size="20" accesskey="S" onfocus="searchBox.OnSearchFieldFocus(true)" onblur="searchBox.OnSearchFieldFocus(false)"></form></div><div class="right"></div></div></li>');
     } else {
-      $('#main-menu').append('<li style="float:right"><div id="MSearchBox" class="MSearchBoxInactive"><span class="left"><img id="MSearchSelect" src="'+relPath+'search/mag_sel.png" onmouseover="return searchBox.OnSearchSelectShow()" onmouseout="return searchBox.OnSearchSelectHide()" alt=""/><input type="text" id="MSearchField" value="'+search+'" accesskey="S" onfocus="searchBox.OnSearchFieldFocus(true)" onblur="searchBox.OnSearchFieldFocus(false)" onkeyup="searchBox.OnSearchFieldChange(event)"/></span><span class="right"><a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="'+relPath+'search/close.png" alt=""/></a></span></div></li>');
+      $('#main-menu').append('<li style="float:right"><div id="MSearchBox" class="MSearchBoxInactive"><span class="left"><img id="MSearchSelect" src="'+relPath+'search/mag_sel.svg" onmouseover="return searchBox.OnSearchSelectShow()" onmouseout="return searchBox.OnSearchSelectHide()" alt=""/><input type="text" id="MSearchField" value="'+search+'" accesskey="S" onfocus="searchBox.OnSearchFieldFocus(true)" onblur="searchBox.OnSearchFieldFocus(false)" onkeyup="searchBox.OnSearchFieldChange(event)"/></span><span class="right"><a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="'+relPath+'search/close.svg" alt=""/></a></span></div></li>');
     }
   }
   $('#main-menu').smartmenus();
diff --git a/templates/html/search.css b/templates/html/search.css
index 859cf6a..8af75a7 100644
--- a/templates/html/search.css
+++ b/templates/html/search.css
@@ -1,98 +1,82 @@
 /*---------------- Search Box */
 
-#FSearchBox {
-    float: left;
-}
-
 #MSearchBox {
     white-space : nowrap;
-    float: none;
-    margin-top: 8px;
-    right: 0px;
-    width: 170px;
-    height: 24px;
+    background: white;
+    border-radius: 0.65em;
+    box-shadow: inset 0.5px 0.5px 3px 0px #555;
     z-index: 102;
 }
 
-#MSearchBox .left
-{
-    display:block;
-    position:absolute;
-    left:10px;
-    width:20px;
-    height:19px;
-    background:url('search_l.png') no-repeat;
-    background-position:right;
+#MSearchBox .left {
+    display: inline-block;
+    vertical-align: middle;
+    height: 1.4em;
 }
 
 #MSearchSelect {
-    display:block;
-    position:absolute;
-    width:20px;
-    height:19px;
-}
-
-.left #MSearchSelect {
-    left:4px;
-}
-
-.right #MSearchSelect {
-    right:5px;
+    display: inline-block;
+    vertical-align: middle;
+    height: 1.4em;
+    padding: 0 0 0 0.3em;
+    margin: 0;
 }
 
 #MSearchField {
-    display:block;
-    position:absolute;
-    height:19px;
-    background:url('search_m.png') repeat-x;
+    display: inline-block;
+    vertical-align: middle;
+    width: 7.5em;
+    height: 1.1em;
+    margin: 0 0.15em;
+    padding: 0;
+    line-height: 1em;
     border:none;
-    width:115px;
-    margin-left:20px;
-    padding-left:4px;
     color: #909090;
     outline: none;
-    font: 9pt Arial, Verdana, sans-serif;
+    font-family: Arial, Verdana, sans-serif;
     -webkit-border-radius: 0px;
+    border-radius: 0px;
+    background: none;
 }
 
-#FSearchBox #MSearchField {
-    margin-left:15px;
-}
 
 #MSearchBox .right {
-    display:block;
-    position:absolute;
-    right:10px;
-    top:8px;
-    width:20px;
-    height:19px;
-    background:url('search_r.png') no-repeat;
-    background-position:left;
+    display: inline-block;
+    vertical-align: middle;
+    width: 1.4em;
+    height: 1.4em;
 }
 
 #MSearchClose {
     display: none;
-    position: absolute;
-    top: 4px;
+    font-size: inherit;
     background : none;
     border: none;
-    margin: 0px 4px 0px 0px;
-    padding: 0px 0px;
+    margin: 0;
+    padding: 0;
     outline: none;
-}
 
-.left #MSearchClose {
-    left: 6px;
 }
 
-.right #MSearchClose {
-    right: 2px;
+#MSearchCloseImg {
+    height: 1.4em;
+    padding: 0.3em;
+    margin: 0;
 }
 
 .MSearchBoxActive #MSearchField {
     color: #000000;
 }
 
+#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 */
 
 #MSearchSelectWindow {
diff --git a/templates/html/search.js b/templates/html/search.js
index ff2b8c8..92b6094 100644
--- a/templates/html/search.js
+++ b/templates/html/search.js
@@ -364,7 +364,7 @@ function SearchBox(name, resultsPath, inFrame, label)
     if (domPopupSearchResultsWindow.style.display!='block')
     {
        var domSearchBox = this.DOMSearchBox();
-       this.DOMSearchClose().style.display = 'inline';
+       this.DOMSearchClose().style.display = 'inline-block';
        if (this.insideFrame)
        {
          var domPopupSearchResults = this.DOMPopupSearchResults();