From da12320a0c22c8317ba1c99d52357157f20768a5 Mon Sep 17 00:00:00 2001 From: 0ko <0ko@noreply.codeberg.org> Date: Fri, 24 May 2024 17:33:13 +0000 Subject: [PATCH] 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 --- release-notes/8.0.0/feat/3870.md | 1 + web_src/css/features/imagediff.css | 4 +++- web_src/css/themes/theme-forgejo-dark.css | 3 +++ web_src/css/themes/theme-forgejo-light.css | 3 +++ web_src/css/themes/theme-gitea-dark.css | 3 +++ web_src/css/themes/theme-gitea-light.css | 3 +++ 6 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 release-notes/8.0.0/feat/3870.md diff --git a/release-notes/8.0.0/feat/3870.md b/release-notes/8.0.0/feat/3870.md new file mode 100644 index 000000000..497ba19c5 --- /dev/null +++ b/release-notes/8.0.0/feat/3870.md @@ -0,0 +1 @@ +Use CSS-native pattern for image diff background, add dark theme support diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css index ad3165e8d..c8ead2ba4 100644 --- a/web_src/css/features/imagediff.css +++ b/web_src/css/features/imagediff.css @@ -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 { diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css index 0a5c64e73..b0fb7c22e 100644 --- a/web_src/css/themes/theme-forgejo-dark.css +++ b/web_src/css/themes/theme-forgejo-dark.css @@ -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; } diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css index d5ecf7332..f2bafc148 100644 --- a/web_src/css/themes/theme-forgejo-light.css +++ b/web_src/css/themes/theme-forgejo-light.css @@ -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; } diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 325d31ea1..f226f2264 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -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; } diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index 695645aaa..f266e3583 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -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; }