loading up the forgejo repo on tangled to test page performance
1.show-outdated,
2.hide-outdated {
3 -webkit-touch-callout: none;
4 -webkit-user-select: none;
5 user-select: none;
6}
7
8.ui.button.add-code-comment {
9 padding: 2px;
10 position: absolute;
11 margin-left: -22px;
12 z-index: 5;
13 opacity: 0;
14 transition: transform 0.1s ease-in-out;
15 transform: scale(1);
16 box-shadow: none !important;
17 border: none !important;
18}
19
20.ui.button.add-code-comment:hover {
21 transform: scale(1.1);
22}
23
24.lines-escape .toggle-escape-button::before {
25 visibility: visible;
26 content: "⚠️";
27 font-family: var(--fonts-emoji);
28 color: var(--color-red);
29}
30
31.repository .diff-file-box .code-diff td.lines-escape {
32 padding-left: 0 !important;
33}
34
35.diff-file-box .lines-code:hover .ui.button.add-code-comment {
36 opacity: 1;
37}
38
39.ui.button.add-code-comment:focus {
40 opacity: 1;
41}
42
43.repository .diff-file-box .code-diff .add-comment-left,
44.repository .diff-file-box .code-diff .add-comment-right,
45.repository .diff-file-box .code-diff .add-code-comment .add-comment-left,
46.repository .diff-file-box .code-diff .add-code-comment .add-comment-right,
47.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker {
48 padding-left: 0 !important;
49 padding-right: 0 !important;
50}
51
52.add-comment-left.add-comment-right .ui.attached.header {
53 border: 1px solid var(--color-secondary);
54}
55
56.add-comment-left.add-comment-right .ui.attached.header:not(.top) {
57 margin-bottom: 0.5em;
58}
59
60.show-outdated:hover,
61.hide-outdated:hover {
62 text-decoration: underline;
63}
64
65.comment-code-cloud {
66 padding: 0.5rem 1rem !important;
67 position: relative;
68}
69
70.code-diff .conversation-holder .comment-code-cloud {
71 max-width: 820px;
72}
73
74@media (max-width: 767.98px) {
75 .comment-code-cloud {
76 max-width: none;
77 padding: 0.75rem !important;
78 }
79}
80
81.comment-code-cloud .comments .comment {
82 padding: 0;
83}
84
85@media (max-width: 767.98px) {
86 .comment-code-cloud .comments .comment .comment-header-right.actions .ui.basic.label {
87 display: none;
88 }
89 .comment-code-cloud .comments .comment .avatar {
90 width: auto;
91 float: none;
92 margin: 0 0.5rem 0 0;
93 flex-shrink: 0;
94 }
95 .comment-code-cloud .comments .comment .avatar ~ .content {
96 margin-left: 1em;
97 }
98 .comment-code-cloud .comments .comment img.avatar {
99 margin: 0 !important;
100 }
101 .comment-code-cloud .comments .comment .comment-content {
102 margin-left: 0 !important;
103 }
104 .comment-code-cloud .comments .comment .comment-container {
105 width: 100%;
106 }
107 .comment-code-cloud .comments .comment.code-comment {
108 padding: 0 0 0.5rem !important;
109 }
110}
111
112.comment-code-cloud .attached.tab {
113 border: 0;
114 padding: 0;
115 margin: 0;
116}
117
118.comment-code-cloud .attached.header {
119 padding: 1px 8px 1px 12px;
120}
121
122.comment-code-cloud .attached.header .text {
123 margin: 0;
124}
125
126.comment-code-cloud .right.menu.options .item {
127 padding: 0.85714286em 0.442857em;
128 cursor: pointer;
129}
130
131.comment-code-cloud .ui.active.tab {
132 padding: 0.5em;
133}
134
135.comment-code-cloud .ui.active.tab.markup {
136 padding: 1em;
137 min-height: 168px;
138}
139
140.comment-code-cloud .ui.tab.markup {
141 font-size: 14px;
142}
143
144.comment-code-cloud .ui.tabular.menu {
145 margin: 0.5em;
146}
147
148.comment-code-cloud .editor-statusbar {
149 display: none;
150}
151
152.comment-code-cloud .footer {
153 padding: 10px 0;
154}
155
156.comment-code-cloud .footer .markup-info {
157 display: inline-block;
158 margin: 5px 0;
159 font-size: 12px;
160 color: var(--color-text-light);
161}
162
163.comment-code-cloud .footer .ui.right.floated {
164 padding-top: 6px;
165}
166
167.comment-code-cloud .footer::after {
168 clear: both;
169 content: "";
170 display: block;
171}
172
173.diff-file-body .comment-form {
174 margin: 0 0 0 3em;
175}
176
177.diff-file-body.binary {
178 padding: 5px 10px;
179}
180
181.file-comment {
182 color: var(--color-text);
183}
184
185.code-expander-button {
186 border: none;
187 color: var(--color-text-light);
188 height: 28px;
189 display: flex;
190 justify-content: center;
191 align-items: center;
192 width: 100%;
193 background: var(--color-expand-button);
194 flex: 1;
195}
196
197.code-expander-button:hover {
198 background: var(--color-primary);
199 color: var(--color-primary-contrast);
200}
201
202.review-box-panel .ui.segment {
203 border: none;
204}
205
206/* See the comment of createCommentEasyMDE() for the review editor */
207/* EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code */
208.review-box-panel .CodeMirror-scroll {
209 min-height: 80px;
210 max-height: calc(100vh - 360px);
211}
212
213.review-box-panel .combo-markdown-editor {
214 width: 730px; /* this width matches current EasyMDE's toolbar's width */
215 max-width: calc(100vw - 70px); /* leave enough space on left, and align the page content */
216}
217
218#review-box {
219 position: relative;
220}
221
222#review-box .review-comments-counter {
223 background-color: var(--color-primary-light-4);
224 color: var(--color-primary-contrast);
225}
226
227#review-box:hover .review-comments-counter {
228 background-color: var(--color-primary-light-5);
229}
230
231#review-box .review-comments-counter[data-pending-comment-number="0"] {
232 display: none;
233}
234
235.pull.files.diff .comment {
236 scroll-margin-top: 99px;
237}
238
239@media (max-width: 991.98px) {
240 .pull.files.diff .comment {
241 scroll-margin-top: 130px;
242 }
243}
244
245.changed-since-last-review {
246 border: 1px var(--color-accent) solid;
247 background-color: var(--color-small-accent);
248 border-radius: var(--border-radius);
249 padding: 4px 8px;
250 margin: -8px 0; /* just like other buttons in the diff box header */
251 font-size: 0.857rem; /* just like .ui.tiny.button */
252}
253
254.viewed-file-form {
255 display: flex;
256 align-items: center;
257 border: 1px solid transparent;
258 padding: 4px 8px;
259 margin: -8px 0; /* just like other buttons in the diff box header */
260 border-radius: var(--border-radius);
261 font-size: 0.857rem; /* just like .ui.tiny.button */
262}
263
264.viewed-file-form input {
265 margin-right: 4px;
266}
267
268.viewed-file-checked-form {
269 background-color: var(--color-small-accent);
270 border-color: var(--color-accent);
271}
272
273#viewed-files-summary {
274 width: 100%;
275 height: 8px;
276}