magic_rb/forgejo
Template
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo synced 2024-11-25 11:16:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Replace imgage diff png background pattern with gradient (#3870)

Browse source 
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>
This commit is contained in:
0ko 2024-05-24 17:33:13 +00:00
parent 509a077ec0
commit da12320a0c
6 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
release-notes/8.0.0/feat/3870.md Normal file
View file

@ -0,0 +1 @@
Use CSS-native pattern for image diff background, add dark theme support

4
web_src/css/features/imagediff.css
View file

@ -13,7 +13,9 @@
.image-diff-container img {
border: 1px solid var(--color-primary-light-7);
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7);
--gradient: conic-gradient(var(--checkerboard-color-1) 90deg, var(--checkerboard-color-2) 90deg 180deg, var(--checkerboard-color-1) 180deg 270deg, var(--checkerboard-color-2) 270deg);
background: var(--gradient);
background-size: 20px 20px;
}
.image-diff-container .before-container {

3
web_src/css/themes/theme-forgejo-dark.css
View file

@ -242,6 +242,9 @@
--color-highlight-fg: var(--color-primary-light-4);
--color-highlight-bg: var(--color-primary-alpha-20);
--color-overlay-backdrop: #080808c0;
/* pattern colors for image diff */
--checkerboard-color-1: #474747;
--checkerboard-color-2: #313131;
accent-color: var(--color-accent);
color-scheme: dark;
}

3
web_src/css/themes/theme-forgejo-light.css
View file

@ -259,6 +259,9 @@
--color-highlight-fg: var(--color-primary-light-4);
--color-highlight-bg: var(--color-primary-light-6);
--color-overlay-backdrop: #080808c0;
/* pattern colors for gradient */
--checkerboard-color-1: #ffffff;
--checkerboard-color-2: #e5e5e5;
accent-color: var(--color-accent);
color-scheme: light;
}

3
web_src/css/themes/theme-gitea-dark.css
View file

@ -238,6 +238,9 @@
--color-highlight-fg: #87651e;
--color-highlight-bg: #352c1c;
--color-overlay-backdrop: #080808c0;
/* pattern colors for image diff */
--checkerboard-color-1: #313131;
--checkerboard-color-2: #212121;
accent-color: var(--color-accent);
color-scheme: dark;
}

3
web_src/css/themes/theme-gitea-light.css
View file

@ -238,6 +238,9 @@
--color-highlight-fg: #eed200;
--color-highlight-bg: #fffbdd;
--color-overlay-backdrop: #080808c0;
/* pattern colors for gradient */
--checkerboard-color-1: #ffffff;
--checkerboard-color-2: #e5e5e5;
accent-color: var(--color-accent);
color-scheme: light;
}