oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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 https://next.forgejo.org/image-test/image-diff/commit/e6d3623c7e0277e09cf9a19278b1259840fb268799d6b65100904ed82d6b05d2
* 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>

0ko da12320a 509a077e

+16 -1
+1
release-notes/8.0.0/feat/3870.md
··· 1 + Use CSS-native pattern for image diff background, add dark theme support
+3 -1
web_src/css/features/imagediff.css
··· 13 13 14 14 .image-diff-container img { 15 15 border: 1px solid var(--color-primary-light-7); 16 - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7); 16 + --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); 17 + background: var(--gradient); 18 + background-size: 20px 20px; 17 19 } 18 20 19 21 .image-diff-container .before-container {
+3
web_src/css/themes/theme-forgejo-dark.css
··· 242 242 --color-highlight-fg: var(--color-primary-light-4); 243 243 --color-highlight-bg: var(--color-primary-alpha-20); 244 244 --color-overlay-backdrop: #080808c0; 245 + /* pattern colors for image diff */ 246 + --checkerboard-color-1: #474747; 247 + --checkerboard-color-2: #313131; 245 248 accent-color: var(--color-accent); 246 249 color-scheme: dark; 247 250 }
+3
web_src/css/themes/theme-forgejo-light.css
··· 259 259 --color-highlight-fg: var(--color-primary-light-4); 260 260 --color-highlight-bg: var(--color-primary-light-6); 261 261 --color-overlay-backdrop: #080808c0; 262 + /* pattern colors for gradient */ 263 + --checkerboard-color-1: #ffffff; 264 + --checkerboard-color-2: #e5e5e5; 262 265 accent-color: var(--color-accent); 263 266 color-scheme: light; 264 267 }
+3
web_src/css/themes/theme-gitea-dark.css
··· 238 238 --color-highlight-fg: #87651e; 239 239 --color-highlight-bg: #352c1c; 240 240 --color-overlay-backdrop: #080808c0; 241 + /* pattern colors for image diff */ 242 + --checkerboard-color-1: #313131; 243 + --checkerboard-color-2: #212121; 241 244 accent-color: var(--color-accent); 242 245 color-scheme: dark; 243 246 }
+3
web_src/css/themes/theme-gitea-light.css
··· 238 238 --color-highlight-fg: #eed200; 239 239 --color-highlight-bg: #fffbdd; 240 240 --color-overlay-backdrop: #080808c0; 241 + /* pattern colors for gradient */ 242 + --checkerboard-color-1: #ffffff; 243 + --checkerboard-color-2: #e5e5e5; 241 244 accent-color: var(--color-accent); 242 245 color-scheme: light; 243 246 }