Improve search widget styling (#359)

Slightly improve search widget in several areas, mostly look and feel. Nothing fancy, just light touches here and there. * СSS: * Increase font size (11px → 13px) * Use pixels for paddings * Always outline search input field on focus * i18n: use capitalized notation for search text * Remove empty label
Vimux · Jan 10, 2024 · de57543 · de57543
1 parent f6792da
commit de57543
Show file tree

Hide file tree

Showing 13 changed files with 18 additions and 25 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1093,27 +1093,21 @@ textarea {
 
 /* Search widget */
 .widget-search__form {
-	display: block;
-	padding: 5%;
-	margin: 0 auto;
+	padding: 16px 24px;
 	background: #f5f5f5;
 }
 
-.widget-search__form .widget-search__submit {
+.widget-search__submit[type=submit] {
 	display: none;
 }
 
 .widget-search__field {
-	position: relative;
-	display: block;
-	width: 90%;
-	padding: 8px;
-	margin: 0 auto;
-	font-size: 11px;
+	width: 100%;
+	padding: 6px 8px;
+	font-size: 13px;
 	cursor: pointer;
 	background: #fff;
 	border: 1px solid #ebebeb;
-	border-radius: 0;
 	outline-offset: -2px;
 	transition: none;
 	-webkit-appearance: none;
@@ -1122,6 +1116,7 @@ textarea {
 .widget-search__field:active,
 .widget-search__field:focus {
 	cursor: text;
+	outline: 2px solid #005fcc;
 }
 
 /* Social widget */

diff --git a/i18n/bg.yaml b/i18n/bg.yaml
@@ -39,7 +39,7 @@
 
 # Search widget
 - id: search_placeholder
-  translation: "ТЪРСЕНЕ…"
+  translation: "Търсене…"
 
 # Languages widget
 - id: languages_title

diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -39,7 +39,7 @@
 
 # Search widget
 - id: search_placeholder
-  translation: "SEARCH…"
+  translation: "Search…"
 
 # Languages widget
 - id: languages_title

diff --git a/i18n/hu.yaml b/i18n/hu.yaml
@@ -39,7 +39,7 @@
 
 # Search widget
 - id: search_placeholder
-  translation: "KERES…"
+  translation: "Keres…"
 
 # Languages widget
 - id: languages_title

diff --git a/i18n/id.yaml b/i18n/id.yaml
@@ -39,7 +39,7 @@
 
 # Search widget
 - id: search_placeholder
-  translation: "CARI…"
+  translation: "Cari…"
 
 # Languages widget
 - id: languages_title

diff --git a/i18n/it.yaml b/i18n/it.yaml
@@ -39,7 +39,7 @@
 
 # Search widget
 - id: search_placeholder
-  translation: "CERCA…"
+  translation: "Cerca…"
 
 # Languages widget
 - id: languages_title

diff --git a/i18n/nl.yaml b/i18n/nl.yaml
@@ -39,7 +39,7 @@
 
 # Search widget
 - id: search_placeholder
-  translation: "ZOEKEN…"
+  translation: "Zoeken…"
 
 # Languages widget
 - id: languages_title

diff --git a/i18n/pt-br.yaml b/i18n/pt-br.yaml
@@ -39,7 +39,7 @@
 
 # Search widget
 - id: search_placeholder
-  translation: "BUSCAR…"
+  translation: "Buscar…"
 
 # Languages widget
 - id: languages_title

diff --git a/i18n/pt.yaml b/i18n/pt.yaml
@@ -39,7 +39,7 @@
 
 # Search widget
 - id: search_placeholder
-  translation: "BUSCAR…"
+  translation: "Buscar…"
 
 # Languages widget
 - id: languages_title

diff --git a/i18n/ru.yaml b/i18n/ru.yaml
@@ -39,7 +39,7 @@
 
 # Search widget
 - id: search_placeholder
-  translation: "ПОИСК…"
+  translation: "Поиск…"
 
 # Languages widget
 - id: languages_title

diff --git a/i18n/sv.yaml b/i18n/sv.yaml
@@ -39,7 +39,7 @@
 
 # Search widget
 - id: search_placeholder
-  translation: "SÖK…"
+  translation: "Sök…"
 
 # Languages widget
 - id: languages_title

diff --git a/i18n/vi.yaml b/i18n/vi.yaml
@@ -39,7 +39,7 @@
 
 # Search widget
 - id: search_placeholder
-  translation: "TÌM KIẾM…"
+  translation: "Tìm kiếm…"
 
 # Languages widget
 - id: languages_title

diff --git a/layouts/partials/widgets/search.html b/layouts/partials/widgets/search.html
@@ -4,9 +4,7 @@
 
 <div class="widget-search widget">
 	<form class="widget-search__form" role="search" method="get" action="{{ $actionURL }}">
-		<label>
-			<input class="widget-search__field" type="search" placeholder="{{ T "search_placeholder" }}" value="" name="q" aria-label="{{ T "search_placeholder" }}">
-		</label>
+		<input class="widget-search__field" type="search" placeholder="{{ T "search_placeholder" }}" value="" name="q" aria-label="{{ T "search_placeholder" }}">
 		<input class="widget-search__submit" type="submit" value="Search">
 		{{ if $inputName -}}<input type="hidden" name="{{ $inputName }}" value="{{ $inputPre }}{{ .Site.BaseURL }}">{{- end }}
 	</form>