Merge pull request #41270 from nextcloud/fix/41267-Contrast_of_focused_Search_and_Search_contacts_is_not_enough

Fix styles for input fields on focus state

core/src/views/ContactsMenu.vue

@@ -58,10 +58,14 @@
 					</ul>
 				</div>
 				<div v-if="contactsAppEnabled" class="contactsmenu__menu__content__footer">
-					<NcButton type="tertiary" :href="contactsAppURL">{{ t('core', 'Show all contacts') }}</NcButton>
+					<NcButton type="tertiary" :href="contactsAppURL">
+						{{ t('core', 'Show all contacts') }}
+					</NcButton>
 				</div>
 				<div v-else-if="canInstallApp" class="contactsmenu__menu__content__footer">
-					<NcButton type="tertiary" :href="contactsAppMgmtURL">{{ t('core', 'Install the Contacts app') }}</NcButton>
+					<NcButton type="tertiary" :href="contactsAppMgmtURL">
+						{{ t('core', 'Install the Contacts app') }}
+					</NcButton>
 				</div>
 			</div>
 		</div>
@@ -170,6 +174,13 @@ export default {
 			width: 100%;
 			height: 34px;
 			margin: 8px 0;
+
+			&:focus,
+			&:focus-visible,
+			&:active {
+				border-color: 2px solid var(--color-main-text) !important;
+				box-shadow: 0 0 0 2px var(--color-main-background) !important;
+			}
 		}
 
 		&__content {

core/src/views/UnifiedSearch.vue

@@ -762,6 +762,12 @@ $input-padding: 6px;
 
 	&__form-input {
 		margin: 0 !important;
+		&:focus,
+		&:focus-visible,
+		&:active {
+			border-color: 2px solid var(--color-main-text) !important;
+			box-shadow: 0 0 0 2px var(--color-main-background) !important;
+		}
 	}
 
 	&__input-row {