delete images, inline svg for search icon

Author: antoinem

lib/rdoc/generator/template/rorvswild/_dialog_search.rhtml

@@ -1,6 +1,7 @@
 <dialog id="search-dialog" role="search" class="search-dialog initially-hidden">
   <form action="#" method="get" accept-charset="utf-8">
     <div id="search-field-wrapper">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
       <input id="search-field" role="combobox" aria-label="Search"
              aria-autocomplete="list" aria-controls="search-results"
              type="text" name="search" placeholder="Search (/) for a class, method, ..." spellcheck="false"

lib/rdoc/generator/template/rorvswild/_topbar.rhtml

@@ -2,7 +2,8 @@
   <%= render '_sidebar_toggle.rhtml' %>
   <a href="<%= rel_prefix %>/index.html" rel="home"><%= @options.title %></a>
   <button type="button" aria-label="Search" class="search-button">
-    search
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+    <span>search</span>
   </button>
 </header>
 

lib/rdoc/generator/template/rorvswild/css/rdoc.css

@@ -455,7 +455,16 @@ nav.contextual {
   border: none;
   border-radius: 4px;
   color:var(--color-text-light);
-  box-shadow: none;
+  box-shadow: 0 0 0 1px var(--color-border);
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.search-button svg {
+  width: 12px;
+  height: 12px;
+  opacity: 0.8;
 }
 
 .search-button:hover,
@@ -513,14 +522,12 @@ nav.contextual {
   opacity: 0.6;
 }
 
-#search-field-wrapper::before {
-  content: "\1F50D";  /* Unicode for magnifying glass */
+#search-field-wrapper svg {
   position: absolute;
-  left: 0.75em;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 14px;
-  color: var(--color-text);
+  stroke: var(--color-text-light);
+  width: 16px;
+  height: 16px;
+  left: 8px;
   opacity: 0.6;
 }