Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blinking cursor (almost) not viewable in edit boxes since 1.14 #15644

Closed
42wim opened this issue Apr 27, 2021 · 6 comments · Fixed by #15651
Closed

Blinking cursor (almost) not viewable in edit boxes since 1.14 #15644

42wim opened this issue Apr 27, 2021 · 6 comments · Fixed by #15651
Labels
topic/ui Change the appearance of the Gitea UI

Comments

@42wim
Copy link
Member

42wim commented Apr 27, 2021

  • Gitea version (or commit ref): 1.14

Description

I'm using Chrome or Edge with forced dark mode (chrome://flags/#enable-force-dark) with the arc-green theme.

Blinking cursor is almost invisible in 1.14 it's a very faint cursor (1pixel?) it's fine in 1.13.
This only happens in the edit boxes with the editor, the cursor in the title of the issues etc is ok.

Devtools show it's in the CodeMirror-scroll element.

Screenshots

1.14

If you squint you can see it ;-)

image

1.13

image

@lafriks lafriks added the topic/ui Change the appearance of the Gitea UI label Apr 28, 2021
@silverwind
Copy link
Member

silverwind commented Apr 28, 2021

Must be something in your setup but try this CSS:

.CodeMirror-cursor {
  border-color: var(--color-text) !important;
}

@42wim
Copy link
Member Author

42wim commented Apr 28, 2021

How can I add/try this?

I tried to add it in Styles in chrome dev-tools doesn't work, after I add it, press enter and focus again on the page it disappears in the dev-tools. (modifying other stuff works though).

Also the setup above is from running a fresh install of the gitea/gitea:1.13 and gitea/gitea:1.14 from dockerhub just setting the theme to arc-green. Both running in the same browser just in two different tabs.

This happens only when the chrome://flags/#enable-force-dark is enabled, otherwise it works fine.
image

@silverwind
Copy link
Member

silverwind commented Apr 28, 2021

In Chrome, you can probably go to the Sources tab, select any css file and paste the code there.

That force dark mode setting can not detect Codemirror's fake cursors (which actually are borders), so that's why it's misbehaving. I'm not sure if our CSS is enough to overrule that mechanism. I'd generally recommend against it as we already implement a dark theme.

BTW this is another issue we would not face with a regular text area, e.g. #10729 / #15394 :)

@42wim
Copy link
Member Author

42wim commented Apr 28, 2021

ok, thanks, it worked by pasting it into the theme-arc-green.css in the sources tab, it now shows the same behaviour as in 1.13 :)

Is this something that can be fixed in 1.14 ? or if not do you know which commits changed it so that I can revert it for myself :)

It's not possible with chrome to disable the "forced dark mode" only for one site, it's an all or nothing option :(

@silverwind
Copy link
Member

Will file a PR later.

silverwind added a commit to silverwind/gitea that referenced this issue Apr 28, 2021
@silverwind
Copy link
Member

#15651

techknowlogick added a commit that referenced this issue May 5, 2021
* Add caret styling CSS

Fixes: #15644

* add rule in arc-green as well

* grammar

* Update web_src/less/themes/theme-arc-green.less

Co-authored-by: Wim <wim@42.be>

* remove extra rule

* add comment

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: Wim <wim@42.be>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
AbdulrhmnGhanem pushed a commit to kitspace/gitea that referenced this issue Aug 10, 2021
* Add caret styling CSS

Fixes: go-gitea#15644

* add rule in arc-green as well

* grammar

* Update web_src/less/themes/theme-arc-green.less

Co-authored-by: Wim <wim@42.be>

* remove extra rule

* add comment

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: Wim <wim@42.be>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
@go-gitea go-gitea locked and limited conversation to collaborators Oct 19, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
topic/ui Change the appearance of the Gitea UI
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants