[MRG+1] Added v2 Custom Search API and fixed css placement for search box (scikit-learn#8542)

* Added v2 Custom Search API and fixed css placement for search box

* Tweaked CSS and hid the branding section

* Button made cute and override some css to make it look good for old api and new api alike

* Better button placement

* Colored the search results and pagination section

Author: Trion129

doc/themes/scikit-learn/layout.html

@@ -102,7 +102,7 @@
                 </div>
             </a>
             <div class="search_form">
-                <div id="cse" style="width: 100%;"></div>
+                <div class="gcse-search" id="cse" style="width: 100%;"></div>
             </div>
         </div> <!-- end navbar -->
 
@@ -346,15 +346,12 @@ <h2>Machine Learning in Python</h2>
       })();
     </script>
     {% endif %}
-
-    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
-    <script type="text/javascript"> google.load('search', '1',
-        {language : 'en'}); google.setOnLoadCallback(function() {
-            var customSearchControl = new
-            google.search.CustomSearchControl('016639176250731907682:tjtqbvtvij0');
-            customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
-            var options = new google.search.DrawOptions();
-            options.setAutoComplete(true);
-            customSearchControl.draw('cse', options); }, true);
+    <script>
+      (function() {
+        var cx = '016639176250731907682:tjtqbvtvij0';
+        var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
+        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
+      })();
     </script>
 {%- endblock %}

doc/themes/scikit-learn/static/nature.css_t

@@ -207,20 +207,40 @@ div.navbar div.nav-icon {
 }
 
 .search_form {
-    margin-top: -23px;
-    /*The min-height is added here, to prevent the element from shrinking
-    too much, while the scripts are still loading the search-bar.
-    Without it, layout glitches occur, as the element keeps dynamically
-    changing its size while its loading-contents adjusts into position.*/
+    margin-top: -40px;
     min-height: 42px;
 }
 
 #cse .gsc-clear-button {
     width: 50px;
+    position: relative;
+    top: -2px;
 }
 
 .gsc-branding {
-    display: none;
+    display: none !important;
+}
+
+form.gsc-search-box {
+    padding: 0 !important;
+}
+
+input.gsc-search-button {
+    position: relative;
+    top: -4px;
+    border-radius: 5px !important;
+    border-color: #FFFFFF !important;
+    background-color: #ff9c34 !important;
+}
+
+a.gs-title, a.gs-title > b{
+    color: blue !important;
+}
+
+.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
+    border-color: white !important;
+    background-color: #ff9c34 !important;
+    color: white !important;
 }
 
 /*---------------------------------------------------------------*/