settings page visual improvements

static/css/style-settings.css

@@ -53,10 +53,48 @@
     gap: 10px;
 }
 
-@media (max-width: 600px) {
-    .theme-link {
-        width: 100%;
-    }
+#searchLanguageSelect,
+#safeSearchSelect, 
+#siteLanguageSelect {
+    border-radius: 4px;
+    padding: 6px;
+    font-size: 15px;
+    border: 1px solid var(--border);
+    color: var(--font-fg);
+    width: 160px;
+    background: var(--button);
+    float: right;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+    box-sizing: border-box; /* Ensures consistent width with padding */
+}
+
+#searchLanguageSelect:hover,
+#safeSearchSelect:hover, 
+#siteLanguageSelect:hover {
+    border: 1px solid #5f6368;
+    /* background-color: var(--button-hover); */
+}
+
+.save.save-settings-page {
+    padding: 6px;
+    width: 160px;
+    height: 40px; 
+}
+
+/* Ensure correct aligment */
+.settings-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.settings-row select, 
+.settings-row button {
+    width: 160px;
+    height: 40px;
+    box-sizing: border-box;
 }
 
 /* --- */

static/css/style.css

@@ -652,7 +652,7 @@ hr {
 
 .settings-nav {
     max-width: 100%;
-    height: 40px;
+    height: 50px;
     background-color: var(--search-bg);
     border-bottom: 1px solid var(--border);
     padding: 10px;
@@ -672,6 +672,7 @@ hr {
 .settings-row {
     display: flex;
     align-items: center;
+    justify-content: flex-end; 
     padding: 2px;
     padding-left: 10px;
     padding-right: 10px;
@@ -680,7 +681,9 @@ hr {
 
 .settings-row select,
 .settings-row button {
-    margin-left: auto;
+    width: 160px;
+    height: 40px;
+    margin: 0;
 }
 
 .kno_wiki {
@@ -771,6 +774,8 @@ form.torrent-sort {
 
 #settingsButton {
     transition: all .3s ease;
+    /* width: 283px+6px;
+    height: 31px; */
 }
 
 .settings-icon-link {
@@ -822,6 +827,12 @@ form.torrent-sort {
     cursor: pointer;
 }
 
+.search-menu select:hover {
+    border: 1px solid #5f6368;
+    cursor: pointer;
+    transition: all .3s ease;
+}
+
 .settings-content {
     display: flex;
     flex-direction: column;
@@ -865,7 +876,7 @@ form.torrent-sort {
 
 .theme-settings {
     margin-top: 10px;
-    width: 90%;
+    width: 100%-4px;
     border: 1px solid var(--snip-border);
     background: var(--snip-background);
     color: var(--fg);
@@ -879,6 +890,10 @@ form.torrent-sort {
     margin-left: 3%;
 }
 
+.theme-mini-settings {
+    width: 90%;
+}
+
 .settings-search-div:hover p {
     color: #8ab4f8;
 }

templates/search.html

@@ -73,7 +73,7 @@
         <h2>Settings</h2>
         <div class="settings-content">
             <button id="settingsButton" onclick="window.location.href='/settings'">All settings</button> <!--  Well its unessesary to use js here but this menu will not work without js anyway -->
-            <div class="theme-settings">
+            <div class="theme-settings theme-mini-settings">
                 <p><span class="highlight">Current theme: </span> <span id="theme_name">{{.Theme}}</span></p>
                 <div class="themes-settings-menu">
                     <div><img class="view-image-search clickable" id="dark_theme" alt="Dark Theme" src="/static/images/dark.webp"></div>

templates/settings.html

@@ -91,7 +91,7 @@
                     </select>
                 </div>
 
-                <div class="settings-row settings-row2">
+                <div class="settings-row">
                     <p class="font-hide">‎ </p>
                     <button class="save save-settings-page" type="submit">Save Settings</button>
                 </div>

user-settings.go

@@ -28,7 +28,7 @@ func loadUserSettings(w http.ResponseWriter, r *http.Request) UserSettings {
 	}
 
 	// Determine if the selected theme is dark
-	settings.IsThemeDark = settings.Theme == "dark" || settings.Theme == "night" || settings.Theme == "black"
+	settings.IsThemeDark = settings.Theme == "dark" || settings.Theme == "night" || settings.Theme == "black" || settings.Theme == "latte"
 
 	// Load site language
 	if cookie, err := r.Cookie("site_language"); err == nil {