add new ui for tabs

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,22 +403,18 @@ video[counter].classList.add("shake");
     
        </div>
   <div class="channel-page"   style="background-color: var(--channel-contents-background);">   
+                 <div class="tags rec">
                   
-       <div class="tabs  tabs-center">
+                                <a style=" background: #111;" class="tag">
-                         <%  if (tab) { %> 
+Videos
-<a href="/search?query=<%=q%>" class="tab">Videos</a>
+                   </a>
-
-<a class="tab active">Web</a>
-                                                                       <% } %>        
-                                                                                                  <%  if (!tab) { %> 
-<a class="tab active">Videos</a>
-
-<a href="/web?query=<%=q%>" class="tab">Web</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)) { %>