static/css/style-search.css

@@ -0,0 +1,61 @@
+
+
+.search-page-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.search-page-content h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+#search-input {
+    width: 100%;
+    padding: 12px;
+    font-size: 16px;
+}
+
+.search-type-icons {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 30px;
+    margin-top: 30px;
+}
+
+.icon-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+}
+
+.icon-button .material-icons-round {
+    font-size: 48px;
+    color: var(--sub-search-wrapper-ico);
+}
+
+.icon-button p {
+    margin-top: 8px;
+    font-size: 14px;
+    color: var(--sub-search-wrapper-ico);
+}
+
+.icon-button:hover .material-icons-round {
+    transition: all .3s ease;
+    color: var(--blue);
+}
+
+.icon-button:hover p {
+    transition: all .3s ease;
+    color: var(--blue);
+}
+
+.icon-button button:focus {
+    outline: none;
+}

static/css/style.css

@@ -1538,6 +1538,20 @@ body, h1, p, a, input, button {
     }
 }
 
+/* 
+.material-icons-round {
+    font-family: 'Material Icons Round';
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+} */
+
 @media only screen and (max-width: 1220px) {
 
     .snip {
@@ -1910,98 +1924,6 @@ body, h1, p, a, input, button {
     }
 }
 
-/* Center the entire search page content */
-.search-page-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-/* Center the logo */
-.search-page-content h1 {
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-/* Style for the search input */
-#search-input {
-    width: 100%;
-    padding: 12px;
-    font-size: 16px;
-}
-
-/* Style for the search button inside the search bar */
-#search-wrapper-ico {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 24px;
-    background: none;
-    border: none;
-    cursor: pointer;
-}
-
-/* Styles for the search type icons */
-.search-type-icons {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 30px;
-    margin-top: 30px;
-}
-
-/* Style for each icon button */
-.icon-button {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    text-align: center;
-}
-
-/* Style for the icons */
-.icon-button .material-icons-round {
-    font-size: 48px; /* Adjust the size of the icons */
-    color: var(--sub-search-wrapper-ico);
-}
-
-/* Style for the labels under icons */
-.icon-button p {
-    margin-top: 8px;
-    font-size: 14px;
-    color: var(--sub-search-wrapper-ico);
-}
-
-/* Hover effects */
-.icon-button:hover .material-icons-round {
-    color: var(--blue);
-}
-
-.icon-button:hover p {
-    color: var(--blue);
-}
-
-/* Remove button default focus outline */
-.icon-button button:focus {
-    outline: none;
-}
-
-.material-icons-round {
-    font-family: 'Material Icons Round';
-    font-weight: normal;
-    font-style: normal;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-}
-
 /* 
 :root {
     --background-color: #ffffff;

templates/search.html

@@ -8,6 +8,7 @@
     {{ end }}
     <title>Search with Ocásek</title>
     <link rel="stylesheet" href="/static/css/style.css">
+    <link rel="stylesheet" href="/static/css/style-search.css">
     <link rel="stylesheet" href="/static/css/{{.Theme}}.css">
     <link rel="search" type="application/opensearchdescription+xml" title="Ocásek" href="/opensearch.xml">
 </head>
@@ -122,7 +123,7 @@
 
                 <div class="icon-button">
                     <button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="file">share</button>
-                    <p>Files</p>
+                    <p>Torrents</p>
                 </div>
             </div>
         </div>