Commit graph

14 commits

Author SHA1 Message Date
0ko
da12320a0c Replace imgage diff png background pattern with gradient (#3870)
Made the checkerboard background be more flexible in terms of scale and coloring. Provides dark theme for image diff.

I suppose these colors should not be re-used for a color-picker for a example, because it's usually more convenient to always have it in the light mode.

## Test

* go to e6d3623c7e
* or migrate https://next.forgejo.org/image-test/image-diff to your local instance

## Before/after

![image](/attachments/3835a455-69e0-4aec-bc67-5b226d8016c1)

(Old any - New Forgejo dark - New Gitea dark - New Forgejo/Gitea light)

---

Gradient property is taken from [here](https://www.reddit.com/r/css/comments/u08pf3/how_to_make_a_checkerboard_using_background/).

[CSS compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient#browser_compatibility): about four years of browser versions.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3870
Reviewed-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>
2024-05-24 17:33:13 +00:00
0ko
b1a239cdc4 Improve how icon colors are defined
- define specific colors for icons for themes
- fix related contrast issues on Forgejo dark theme
2024-05-10 23:19:35 +05:00
silverwind
50e0587546
Action view mobile improvements and fixes (#30309)
Fix the action issue in https://github.com/go-gitea/gitea/issues/30303,
specifically:

- Use opaque step header hover background to avoid transparency issue
- Un-sticky the `action-view-left` on mobile, it would otherwise overlap
into right view
- Improve commit summary, let it wrap
- Fix and comment z-indexes
- Tweak width for run-list-item-right so it wastes less space on desktop
- Synced latest changes to console colors from dark to light theme

<img width="467" alt="Screenshot 2024-04-06 at 18 58 15"
src="https://github.com/go-gitea/gitea/assets/115237/8ad26b72-6cd9-4522-8ad1-6fd86b2d0d53">

(cherry picked from commit 0178eaec256a349371c75e582edd7fefca2085d0)
2024-04-15 20:01:35 +02:00
silverwind
f6c0c39f1a
[PORT] gitea##30237: Fix and rewrite contrast color calculation, fix project-related bugs
1. The previous color contrast calculation function was incorrect at
least for the `#84b6eb` where it output low-contrast white instead of
black. I've rewritten these functions now to accept hex colors and to
match GitHub's calculation and to output pure white/black for maximum
contrast. Before and after:
<img width="94" alt="Screenshot 2024-04-02 at 01 53 46"
src="https://github.com/go-gitea/gitea/assets/115237/00b39e15-a377-4458-95cf-ceec74b78228"><img
width="90" alt="Screenshot 2024-04-02 at 01 51 30"
src="https://github.com/go-gitea/gitea/assets/115237/1677067a-8d8f-47eb-82c0-76330deeb775">

2. Fix project-related issues:

- Expose the new `ContrastColor` function as template helper and use it
for project cards, replacing the previous JS solution which eliminates a
flash of wrong color on page load.
- Fix a bug where if editing a project title, the counter would get
lost.
- Move `rgbToHex` function to color utils.

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>

---
Conflict resolution: Trivial.
(cherry picked from commit 36887ed3921d03f1864360c95bd2ecf853bfbe72)
2024-04-15 16:11:34 +02:00
silverwind
ff1744cbbc
[PORT] gitea#30282: Markup color and font size fixes
1. Distinguish inline an block code with new CSS variable
`--color-markup-code-inline`
2. Various color tweaks, better contrast from background

(cherry picked from commit 662eb4b0852f9ce2c161e7fea5ac66bf912fc9f6)

---

- Revert the changes of #2874.
- Add more contrast to the inline block for light and dark theme.

(cherry picked from commit 662eb4b0852f9ce2c161e7fea5ac66bf912fc9f6)
2024-04-07 15:16:22 +02:00
silverwind
a579a0f318
[Port] gitea#30014: Various code view improvements
1. Restore missing styles for message close icon
2. Move `code-line-button` so that it does not go off-screen on small
viewports
3. Make `code-line-button` look and behave like other buttons
4. Make `code-line-button` work in blame
5. Make the active selection span the whole line, not just the code part
6. Tweak colors, make dark theme code bg darker, make line numbers same
color in diff and file view.
7. Move code background to parent, fixing border radius and other
problems
8. Enable code wrap in blame
9. Improve blame responsiveness
10. Remove `--color-code-sidebar-bg` in blame, now it uses same
background as code
11. Rename `--color-active-line` to `--color-highlight-bg`
12. Add `--color-highlight-bg`
13. Fix button group borders on hover and border-right on last button.

<img width="1343" alt="Screenshot 2024-03-23 at 22 34 13"
src="https://github.com/go-gitea/gitea/assets/115237/fcbb919f-5dc3-43f0-97f6-870d6f412554">
<img width="1334" alt="Screenshot 2024-03-23 at 22 34 26"
src="https://github.com/go-gitea/gitea/assets/115237/ca44c3b7-4328-4645-ba49-b0dc6a5ac06d">

<img width="1338" alt="Screenshot 2024-03-23 at 22 34 57"
src="https://github.com/go-gitea/gitea/assets/115237/00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac">
<img width="1337" alt="Screenshot 2024-03-23 at 22 34 42"
src="https://github.com/go-gitea/gitea/assets/115237/752edc4a-064f-413c-9dff-c086187fcd85">

Fixes: https://github.com/go-gitea/gitea/issues/18074

---

Conflict resolution: Trivial.
Ref: https://codeberg.org/forgejo/forgejo/issues/2776
(cherry picked from commit db01bf6cc88a8a7b5132b9306b3af1649566b10f)
2024-03-28 16:43:14 +01:00
silverwind
1ee494a045
[Port] gitea#29982 Introduce .secondary-nav and handle .page-content spacing universally
Fixes: https://github.com/go-gitea/gitea/issues/29981. Introduce
`.secondary-nav` as a universal way for styling and margin adjustments
inside `.page-content`.

If the first child of `.page-content` is `.secondary-nav`, we add margin
below it, otherwise we add padding to the first child. Notable changes:

- `--color-header-wrapper` is replaced with `--color-secondary-nav-bg`.
- `navbar` class is removed.

Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

---

Conflict resolution: Trivial conflict & changed selector to reflect new
classes.
Ref: https://codeberg.org/forgejo/forgejo/issues/2776
(cherry picked from commit 3ccda41a539b8ba7841919ee12dc2877ddc03818)
2024-03-28 16:43:09 +01:00
silverwind
01f729f764
Misc color tweaks (#29943)
Minor color tweaks:

- Better text contrasts
- Better distinguish nav and header wrapper in light theme
- Input boxes are now white on light theme
- Slightly darker dark theme background

<img width="503" alt="Screenshot 2024-03-20 at 19 31 54"
src="https://github.com/go-gitea/gitea/assets/115237/c7802a84-2386-4332-bd91-f419473ff644">
<img width="510" alt="Screenshot 2024-03-20 at 19 32 24"
src="https://github.com/go-gitea/gitea/assets/115237/21d3529e-6e0a-413a-9e9e-a03bea2405eb">

(cherry picked from commit 444460ea807c6a669d1a1467510868335abee5fb)
2024-03-26 19:04:26 +01:00
silverwind
23e2ace77d
Light theme color enhancements (#29830)
Same as https://github.com/go-gitea/gitea/pull/29822 but for light
theme. Slight shift towards blue and made the themes match more, like on
header and footer background.

Before
<img width="1342" alt="Screenshot 2024-03-16 at 00 43 03"
src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf">

After
<img width="1343" alt="Screenshot 2024-03-16 at 00 45 21"
src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99">

Before
<img width="1018" alt="Screenshot 2024-03-16 at 00 43 13"
src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475">

After
<img width="1022" alt="Screenshot 2024-03-16 at 00 43 50"
src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">

(cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
2024-03-20 08:46:30 +01:00
silverwind
704a59e595
Dark theme color enhancements (#29822)
- Few very minor colors tweaks to dark theme. Slightly darker
background, slightly bluer secondary colors.
- Alias `--color-nav-hover-bg` in both themes.

Before:
<img width="1013" alt="Screenshot 2024-03-15 at 18 43 59"
src="https://github.com/go-gitea/gitea/assets/115237/ce4bdb0d-6e25-4fd6-88f5-dc8f9e3093cd">

After:
<img width="1016" alt="Screenshot 2024-03-15 at 19 02 04"
src="https://github.com/go-gitea/gitea/assets/115237/4a6dd5a1-a5b4-4fc2-9835-05a0c2c58c42">

Before:
<img width="1340" alt="Screenshot 2024-03-15 at 18 40 19"
src="https://github.com/go-gitea/gitea/assets/115237/4465fa9c-d529-4a05-94d7-e21080e0a153">

After:
<img width="1341" alt="Screenshot 2024-03-15 at 19 00 51"
src="https://github.com/go-gitea/gitea/assets/115237/6595afef-592b-42c4-a6cd-196968ba5881">

(cherry picked from commit aa3012849ea59cdfb8464b0b71f28bffad19d54c)
2024-03-20 08:46:30 +01:00
silverwind
faac0a7c32
Style fomantic grey labels (#29458)
Fomantic grey labels in the dashboard repo lists were showing original
fomantic colors, fixed that. Also slightly tweaked the light theme
colors so it uses same opacity values as dark theme.

<img width="165" alt="Screenshot 2024-03-07 at 21 06 23"
src="https://github.com/go-gitea/gitea/assets/115237/72744d6f-2ee1-4e5d-8ba0-b482a446f535">
<img width="167" alt="Screenshot 2024-03-07 at 21 06 00"
src="https://github.com/go-gitea/gitea/assets/115237/1ba93775-e5a9-4b28-b90f-59c1e9199687">

(cherry picked from commit 114bb505a3b0819db683d4b586e950df6a17bff8)
2024-03-11 23:36:59 +07:00
silverwind
87e7a83edf
Tweak actions color and borders (#29640)
- Increase contrast overall
- Unalias the ansi color in dark theme and copy them to light
- Add outer border
- Add border radius

<img width="1337" alt="Screenshot 2024-03-06 at 22 30 03"
src="https://github.com/go-gitea/gitea/assets/115237/11407c0f-0bb2-435e-a034-22b1f106d9b0">
<img width="1335" alt="Screenshot 2024-03-06 at 22 36 59"
src="https://github.com/go-gitea/gitea/assets/115237/267db442-0979-4acc-a79e-8579b4cb0262">

(cherry picked from commit 16f13265143ff08cb6c33e976998b262e94fe569)
2024-03-11 23:36:58 +07:00
silverwind
4127fcd608
Lighten text colors on dark theme for increased contrast (#29481)
Improve contrast by lightening the text colors in dark theme by around
35%. Additionally, share some variables that had the same or similar
color, which will ease future theme creation.

(cherry picked from commit e94e2fb6c5484070d56977644213d735df9e0c10)
2024-03-06 12:10:44 +08:00
silverwind
023e937141
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419)
Part of https://github.com/go-gitea/gitea/issues/27097:

- `gitea` theme is renamed to `gitea-light`
- `arc-green` theme is renamed to `gitea-dark`
- `auto` theme is renamed to `gitea-auto`

I put both themes in separate CSS files, removing all colors from the
base CSS. Existing users will be migrated to the new theme names. The
dark theme recolor will follow in a separate PR.

## ⚠️ BREAKING ⚠️

1. If there are existing custom themes with the names `gitea-light` or
`gitea-dark`, rename them before this upgrade and update the `theme`
column in the `user` table for each affected user.
2. The theme in `<html>` has moved from `class="theme-name"` to
`data-theme="name"`, existing customizations that depend on should be
updated.

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 09:46:36 +02:00