test1234
/
gitea
forked from gitea/gitea
1
0
Fork 0
Code Pull Requests Activity

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>
This commit is contained in:
silverwind 2024-03-09 13:14:42 +01:00 committed by GitHub
parent 1695a5ac74
commit 9b69f76e5a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web_src/css/base.css
View File

@ -872,10 +872,18 @@ img.ui.avatar,
border-color: var(--color-error-border) !important; border-color: var(--color-error-border) !important;
} }
/* A fix for text visibility issue in Chrome autofill in dark mode. */ input:-webkit-autofill,
/* It's a problem from Formatic UI, and this rule overrides it. */ input:-webkit-autofill:focus,
.ui.form .field.field input:-webkit-autofill { input:-webkit-autofill:hover,
-webkit-text-fill-color: var(--color-black) !important; 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 { .ui.form .field.muted {