bench-forgejo/web_src/less/features/imagediff.less
Mario Lubenka 67561e79f1
Fix SVG side by side comparison link (#17375)
* Remove swipe-bar z-index

Fixes position of swipe-bar so it does not overlay other UI components when scrolling.

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

* Unique names for image tabs in pull request

Define unique names for image tabs in pull requests, in order to toggle tabs correctly when multiple are displayed on one page.

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2021-10-21 18:43:26 +08:00

104 lines
1.9 KiB
Text

.image-diff-container {
text-align: center;
padding: 30px 0;
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);
}
.before-container {
border: 1px solid var(--color-red);
display: block;
}
.after-container {
border: 1px solid var(--color-green);
display: block;
}
.diff-side-by-side {
.side {
display: inline-block;
line-height: 0;
vertical-align: top;
.side-header {
font-weight: bold;
}
}
}
.diff-swipe {
margin: auto;
.swipe-frame {
position: absolute;
.before-container {
position: absolute;
}
.swipe-container {
position: absolute;
right: 0;
display: block;
border-left: 2px solid var(--color-secondary-dark-8);
height: 100%;
overflow: hidden;
.after-container {
position: absolute;
right: 0;
}
}
.swipe-bar {
position: absolute;
height: 100%;
top: 0;
left: 0;
.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;
}
.top-handle {
top: -12px;
}
.bottom-handle {
bottom: -14px;
}
}
}
}
.diff-overlay {
margin: 0 auto;
.overlay-frame {
margin: 0 auto;
position: relative;
}
.before-container,
.after-container {
position: absolute;
}
input {
width: 300px;
}
}
}