forkjo/web_src/css/features/imagediff.css
0ko da12320a0c Replace imgage diff png background pattern with gradient ()
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

114 lines
2.4 KiB
CSS

.image-diff-tabs {
min-height: 60px;
}
.image-diff-tabs.is-loading .tab {
display: none;
}
.image-diff-container {
text-align: center;
padding: 0.5em 0 1em;
}
.image-diff-container img {
border: 1px solid 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 {
border: 1px solid var(--color-red);
display: block;
}
.image-diff-container .after-container {
border: 1px solid var(--color-green);
display: block;
}
.image-diff-container .diff-side-by-side .side {
display: inline-block;
line-height: 0;
vertical-align: top;
margin: 0 1em;
}
.image-diff-container .diff-side-by-side .side .side-header {
font-weight: var(--font-weight-semibold);
}
.image-diff-container .diff-swipe {
margin: auto;
padding: 1em 0;
}
.image-diff-container .diff-swipe .swipe-frame {
position: absolute;
}
.image-diff-container .diff-swipe .swipe-frame .before-container {
position: absolute;
}
.image-diff-container .diff-swipe .swipe-frame .swipe-container {
position: absolute;
right: 0;
display: block;
border-left: 2px solid var(--color-secondary-dark-8);
height: 100%;
overflow: hidden;
}
.image-diff-container .diff-swipe .swipe-frame .swipe-container .after-container {
position: absolute;
right: 0;
}
.image-diff-container .diff-swipe .swipe-frame .swipe-bar {
position: absolute;
height: 100%;
top: 0;
left: 0;
}
.image-diff-container .diff-swipe .swipe-frame .swipe-bar .handle {
background: var(--color-secondary-dark-8);
left: -5px;
height: 12px;
width: 12px;
position: absolute;
transform: rotate(45deg);
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.image-diff-container .diff-swipe .swipe-frame .swipe-bar .top-handle {
top: -12px;
}
.image-diff-container .diff-swipe .swipe-frame .swipe-bar .bottom-handle {
bottom: -14px;
}
.image-diff-container .diff-overlay {
margin: 0 auto;
}
.image-diff-container .diff-overlay .overlay-frame {
margin: 1em auto 0;
position: relative;
}
.image-diff-container .diff-overlay .before-container,
.image-diff-container .diff-overlay .after-container {
position: absolute;
}
.image-diff-container .diff-overlay input {
max-width: 300px;
}