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;
 }