From 9b69f76e5a33788150f3abc3dee64010539c6b86 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 9 Mar 2024 13:14:42 +0100
Subject: [PATCH] Completely style the webkit autofill (#29683)

Previously it was only partially styled, e.g. there was black text on
white background even in dark theme caused by fomantic styles.

<img width="195" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/bc5cf516-2aef-45c3-854a-c9f5497aacca">

<img width="195" alt="Screenshot 2024-03-09 at 02 09 29"
src="https://github.com/go-gitea/gitea/assets/115237/ef0af17d-6e0b-402e-b24d-bfa34dc2f4e0">

Co-authored-by: Giteabot <teabot@gitea.io>
---
 web_src/css/base.css | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 3db9cd894c..e53e0619c8 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -872,10 +872,18 @@ img.ui.avatar,
   border-color: var(--color-error-border) !important;
 }
 
-/* A fix for text visibility issue in Chrome autofill in dark mode. */
-/* It's a problem from Formatic UI, and this rule overrides it. */
-.ui.form .field.field input:-webkit-autofill {
-  -webkit-text-fill-color: var(--color-black) !important;
+input:-webkit-autofill,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:active,
+.ui.form .field.field input:-webkit-autofill,
+.ui.form .field.field input:-webkit-autofill:focus,
+.ui.form .field.field input:-webkit-autofill:hover,
+.ui.form .field.field input:-webkit-autofill:active {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: var(--color-text);
+  box-shadow: 0 0 0 100px var(--color-primary-light-6) inset !important;
+  border-color: var(--color-primary-light-4) !important;
 }
 
 .ui.form .field.muted {