add new ui for tabs

html/search-web.ejs

@@ -98,6 +98,42 @@ summary:hover{
 
 }
     
+
+ .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;
+} 
+   
+
 .hide {
   display: none;
 }
@@ -367,11 +403,21 @@ video[counter].classList.add("shake");
        </div>
   <div class="channel-page"   style="background-color: var(--channel-contents-background);">   
           
-       <div class="tabs  tabs-center">
+             <div class="tags rec">
 
-         <a href="/search?query=<%=q%>" class="tab">Videos</a>
+               <a href="/search?query=<%=q%>" style="color:#fff;text-decoration:none;
+" class="tag c"> 
+                      Videos
+              </a>
+                  
+                                             
+                  
+                                <a style=" background: #111;" class="tag">
+Web
+               </a>
+                  
+                     </div> 
 
-<a class="tab active">Web</a>
                                                                     
 
     </div>