loading up the forgejo repo on tangled to test page performance
1.image-diff-tabs {
2 min-height: 60px;
3
4}
5.image-diff-tabs.is-loading .tab {
6 display: none;
7}
8
9.image-diff-container {
10 text-align: center;
11 padding: 0.5em 0 1em;
12}
13
14.image-diff-container img {
15 border: 1px solid 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;
19}
20
21.image-diff-container .before-container {
22 border: 1px solid var(--color-red);
23 display: block;
24}
25
26.image-diff-container .after-container {
27 border: 1px solid var(--color-green);
28 display: block;
29}
30
31.image-diff-container .diff-side-by-side .side {
32 display: inline-block;
33 line-height: 0;
34 vertical-align: top;
35 margin: 0 1em;
36}
37
38.image-diff-container .diff-side-by-side .side .side-header {
39 font-weight: var(--font-weight-semibold);
40}
41
42.image-diff-container .diff-swipe {
43 margin: auto;
44 padding: 1em 0;
45}
46
47.image-diff-container .diff-swipe .swipe-frame {
48 position: absolute;
49}
50
51.image-diff-container .diff-swipe .swipe-frame .before-container {
52 position: absolute;
53}
54
55.image-diff-container .diff-swipe .swipe-frame .swipe-container {
56 position: absolute;
57 right: 0;
58 display: block;
59 border-left: 2px solid var(--color-secondary-dark-8);
60 height: 100%;
61 overflow: hidden;
62}
63
64.image-diff-container .diff-swipe .swipe-frame .swipe-container .after-container {
65 position: absolute;
66 right: 0;
67}
68
69.image-diff-container .diff-swipe .swipe-frame .swipe-bar {
70 position: absolute;
71 height: 100%;
72 top: 0;
73 left: 0;
74}
75
76.image-diff-container .diff-swipe .swipe-frame .swipe-bar .handle {
77 background: var(--color-secondary-dark-8);
78 left: -5px;
79 height: 12px;
80 width: 12px;
81 position: absolute;
82 transform: rotate(45deg);
83 box-sizing: border-box;
84 display: flex;
85 justify-content: center;
86 align-items: center;
87 cursor: pointer;
88}
89
90.image-diff-container .diff-swipe .swipe-frame .swipe-bar .top-handle {
91 top: -12px;
92}
93
94.image-diff-container .diff-swipe .swipe-frame .swipe-bar .bottom-handle {
95 bottom: -14px;
96}
97
98.image-diff-container .diff-overlay {
99 margin: 0 auto;
100}
101
102.image-diff-container .diff-overlay .overlay-frame {
103 margin: 1em auto 0;
104 position: relative;
105}
106
107.image-diff-container .diff-overlay .before-container,
108.image-diff-container .diff-overlay .after-container {
109 position: absolute;
110}
111
112.image-diff-container .diff-overlay input {
113 max-width: 300px;
114}