diff options
author | Daniel Baumann <daniel@debian.org> | 2024-10-18 20:33:49 +0200 |
---|---|---|
committer | Daniel Baumann <daniel@debian.org> | 2024-12-12 23:57:56 +0100 |
commit | e68b9d00a6e05b3a941f63ffb696f91e554ac5ec (patch) | |
tree | 97775d6c13b0f416af55314eb6a89ef792474615 /web_src/css/features/imagediff.css | |
parent | Initial commit. (diff) | |
download | forgejo-e68b9d00a6e05b3a941f63ffb696f91e554ac5ec.tar.xz forgejo-e68b9d00a6e05b3a941f63ffb696f91e554ac5ec.zip |
Adding upstream version 9.0.3.
Signed-off-by: Daniel Baumann <daniel@debian.org>
Diffstat (limited to 'web_src/css/features/imagediff.css')
-rw-r--r-- | web_src/css/features/imagediff.css | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css new file mode 100644 index 0000000..c8ead2b --- /dev/null +++ b/web_src/css/features/imagediff.css @@ -0,0 +1,114 @@ +.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; +} |