Skip to content

CSS color tweaks #23828

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.

Sign up for GitHub

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

Jump to bottom
Merged
lunny merged 4 commits into from
Mar 31, 2023
Merged

CSS color tweaks #23828

lunny merged 4 commits into from
Mar 31, 2023

Conversation

@silverwind
Copy link
Member

@silverwind silverwind commented Mar 30, 2023 •
edited
Loading

Change grey shades in arc-green to match the theme more:

Screenshot 2023-03-30 at 21 42 34

Adjusted grey shade in light theme:

image

Increase contrast in arc-green, change background to slightly darker shade, change forgeground to slightly brighter colors:

Screenshot 2023-03-30 at 22 33 20

Increase contrast of grey text in light theme as well by making them darker:

Screenshot 2023-03-30 at 22 33 35

Add color rule for border multiple select items:

Screenshot 2023-03-30 at 22 29 31

Screenshot 2023-03-30 at 22 29 46

Added color rule for red * on required form fields:

image

@silverwind silverwind added the type/enhancement An improvement of existing functionality label Mar 30, 2023
@silverwind silverwind added this to the 1.20.0 milestone Mar 30, 2023
@silverwind silverwind added the topic/ui Change the appearance of the Gitea UI label Mar 30, 2023
@silverwind silverwind added the outdated/backport/v1.19 This PR should be backported to Gitea 1.19 label Mar 30, 2023
silverwind
silverwind commented Mar 30, 2023
View reviewed changes
@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Mar 30, 2023
@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Mar 30, 2023
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Mar 30, 2023
@silverwind
Copy link
Member Author

silverwind commented Mar 30, 2023

Slight issue, the grey change in light theme makes these number labels too dark:

image

I'll adjust them. Ultimately, I think we need a separate color for them as these grey shades are not used consistently in the UI, sometimes for text, sometimes for background.

@silverwind
Copy link
Member Author

silverwind commented Mar 30, 2023

Thought, I do wonder: do people find these too dark or okay. I kind of like the high contrast they provide.

@silverwind
Copy link
Member Author

silverwind commented Mar 30, 2023

Lightened a bit, wouldn't go much further as they become low-contrast otherwise:

image

@delvh
Copy link
Member

delvh commented Mar 30, 2023

No, I'm also rather a fan of having a fairly high contrast there as it was previously.
I preferred the primary color previously the most (probably to some part because I'm accustomed to them), but your proposal is the second best option.

@silverwind
Copy link
Member Author

silverwind commented Mar 30, 2023

I now like these new grey tones more than previous primary. There is one inconsistency in PR tabs that still use primary, we need to eliminate that later 😉

@lunny lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 31, 2023
@lunny lunny merged commit ca03ca9 into go-gitea:main Mar 31, 2023
@lunny lunny removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 31, 2023
@GiteaBot GiteaBot mentioned this pull request Mar 31, 2023
Merged
GiteaBot pushed a commit to GiteaBot/gitea that referenced this pull request Mar 31, 2023
@silverwind @GiteaBot
CSS color tweaks (go-gitea#23828)
d23d237 
Change grey shades in arc-green to match the theme more:

<img width="661" alt="Screenshot 2023-03-30 at 21 42 34"
src="https://user-images.githubusercontent.com/115237/228957952-8e099e56-6923-4aa6-8ce9-3c1cd898b73e.png">

Adjusted grey shade in light theme:

<img width="652" alt="image"
src="https://user-images.githubusercontent.com/115237/228963876-3bde6181-8397-4dc2-be72-33982e6c7acb.png">

Increase contrast in arc-green, change background to slightly darker
shade, change forgeground to slightly brighter colors:

<img width="283" alt="Screenshot 2023-03-30 at 22 33 20"
src="https://user-images.githubusercontent.com/115237/228957957-272c24a5-dd0b-427a-b6b7-e62836bdd73c.png">

Increase contrast of grey text in light theme as well by making them
darker:

<img width="273" alt="Screenshot 2023-03-30 at 22 33 35"
src="https://user-images.githubusercontent.com/115237/228957959-283139c7-6fa7-4b68-9fdd-16c668ad1301.png">

Add color rule for border multiple select items:

<img width="183" alt="Screenshot 2023-03-30 at 22 29 31"
src="https://user-images.githubusercontent.com/115237/228957954-6b5a752d-bbb0-4519-ab35-d02c0804d955.png">
<img width="181" alt="Screenshot 2023-03-30 at 22 29 46"
src="https://user-images.githubusercontent.com/115237/228957956-fca9790a-d6c9-4f31-8d1b-d183ab3ac669.png">

Added color rule for red `*` on required form fields:

<img width="97" alt="image"
src="https://user-images.githubusercontent.com/115237/228958760-517ad9ef-565d-4349-b734-9b559ab42429.png">
@GiteaBot GiteaBot added the backport/done All backports for this PR have been created label Mar 31, 2023
@silverwind silverwind deleted the darkcolors branch March 31, 2023 08:51
lunny pushed a commit that referenced this pull request Mar 31, 2023
@GiteaBot @silverwind
CSS color tweaks (#23828) (#23842)
503af4b 
Backport #23828 by @silverwind

Change grey shades in arc-green to match the theme more:

<img width="661" alt="Screenshot 2023-03-30 at 21 42 34"
src="https://user-images.githubusercontent.com/115237/228957952-8e099e56-6923-4aa6-8ce9-3c1cd898b73e.png">

Adjusted grey shade in light theme:

<img width="652" alt="image"
src="https://user-images.githubusercontent.com/115237/228963876-3bde6181-8397-4dc2-be72-33982e6c7acb.png">

Increase contrast in arc-green, change background to slightly darker
shade, change forgeground to slightly brighter colors:

<img width="283" alt="Screenshot 2023-03-30 at 22 33 20"
src="https://user-images.githubusercontent.com/115237/228957957-272c24a5-dd0b-427a-b6b7-e62836bdd73c.png">

Increase contrast of grey text in light theme as well by making them
darker:

<img width="273" alt="Screenshot 2023-03-30 at 22 33 35"
src="https://user-images.githubusercontent.com/115237/228957959-283139c7-6fa7-4b68-9fdd-16c668ad1301.png">

Add color rule for border multiple select items:

<img width="183" alt="Screenshot 2023-03-30 at 22 29 31"
src="https://user-images.githubusercontent.com/115237/228957954-6b5a752d-bbb0-4519-ab35-d02c0804d955.png">
<img width="181" alt="Screenshot 2023-03-30 at 22 29 46"
src="https://user-images.githubusercontent.com/115237/228957956-fca9790a-d6c9-4f31-8d1b-d183ab3ac669.png">

Added color rule for red `*` on required form fields:

<img width="97" alt="image"
src="https://user-images.githubusercontent.com/115237/228958760-517ad9ef-565d-4349-b734-9b559ab42429.png">

Co-authored-by: silverwind <[email protected]>
zjjhot added a commit to zjjhot/gitea that referenced this pull request Mar 31, 2023
@zjjhot
Merge remote-tracking branch 'giteaoffical/main'
9ada9c1 
* giteaoffical/main:
  Fix 500 error if there is a name conflict when edit authentication source (go-gitea#23832)
  Use different SVG for pending and running actions (go-gitea#23836)
  CSS color tweaks (go-gitea#23828)
  Clarify Gitea/Crowdin locale behaviors, add tests for LocaleStore, fix some strings with semicolons (go-gitea#23819)
wxiaoguang
wxiaoguang reviewed Apr 3, 2023
View reviewed changes
web_src/css/themes/theme-arc-green.css
--color-input-text: #dfe3ec;
--color-input-background: #232933;
--color-input-toggle-background: #454a57;
--color-input-border: #454a57;
Copy link
Contributor

@wxiaoguang wxiaoguang Apr 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the input-border color is too dark, I can not find the radioboxes. 🤣

image

Copy link
Member Author

@silverwind silverwind Apr 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that needs improvement or convertion to native :)

@go-gitea go-gitea locked and limited conversation to collaborators May 3, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@wxiaoguang wxiaoguang wxiaoguang left review comments

@jolheiser jolheiser jolheiser approved these changes

@delvh delvh delvh approved these changes

Assignees

No one assigned

Labels

backport/done All backports for this PR have been created lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. outdated/backport/v1.19 This PR should be backported to Gitea 1.19 topic/ui Change the appearance of the Gitea UI type/enhancement An improvement of existing functionality

Projects

None yet

Milestone

1.20.0

Development

Successfully merging this pull request may close these issues.

6 participants

@silverwind @delvh @wxiaoguang @jolheiser @lunny @GiteaBot