From 31d0a12a44b4e397cc6c7aaf275904e1ace2b3be Mon Sep 17 00:00:00 2001
From: Ashley <iamashley@duck.com>
Date: Tue, 31 Oct 2023 15:50:11 +0000
Subject: [PATCH] add new ui for tabs

---
 html/search.ejs | 66 ++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 49 insertions(+), 17 deletions(-)

diff --git a/html/search.ejs b/html/search.ejs
index e792e60a..ed4b1d98 100644
--- a/html/search.ejs
+++ b/html/search.ejs
@@ -66,6 +66,42 @@ summary:hover{
 
   <style>
     
+    
+ .tags.rec {
+  font-weight: 600;
+  font-stretch: expanded;
+  overflow:hidden;
+  width: auto;
+  max-width: fit-content;
+  margin-right: auto;
+  padding-left: 1.5em;
+  margin-top: 7px;
+  display: flex;
+  gap: 3px;
+  margin-inline: auto;
+  margin-left: 8em;
+ }
+
+    
+.tags.rec:hover{
+  overflow-x:auto;
+}
+
+.tags.rec > .tag {
+  border-radius: 8px;
+  background:var(--chip-background-hover);
+
+}
+
+.tag {
+  padding: 5px;
+  border-radius: 4px;
+  word-break: break-all;
+  white-space: nowrap;
+  font-family: ubuntu, sans-serif;
+} 
+   
+    
     .info > div {
       font-family:Ubuntu, sans-serif;
     }
@@ -367,23 +403,19 @@ video[counter].classList.add("shake");
     
        </div>
   <div class="channel-page"   style="background-color: var(--channel-contents-background);">   
-          
-       <div class="tabs  tabs-center">
-                         <%  if (tab) { %> 
-<a href="/search?query=<%=q%>" class="tab">Videos</a>
-
-<a class="tab active">Web</a>
-                                                                       <% } %>        
-                                                                                                  <%  if (!tab) { %> 
-<a class="tab active">Videos</a>
-
-<a href="/web?query=<%=q%>" class="tab">Web</a>
-                                                                       <% } %>        
-                                                                         
-                                                                         
-
-    </div>
-                <%  if (!tab) { %> 
+                 <div class="tags rec">
+                  
+                                <a style=" background: #111;" class="tag">
+Videos
+                   </a>
+                  
+                      <a href="/web?query=<%=q%>" style="color:#fff;text-decoration:none;
+" class="tag c"> 
+Web              </a>
+                  
+                     </div>   
+      
+                 <%  if (!tab) { %> 
 
             <%  if (Array.isArray( j.Search.Results.Video)) { %> 
                    <center>