loading up the forgejo repo on tangled to test page performance
Various CSS tweaks (#21244)
- Remove arc-green specific rules and instead fix the colors in the base
rules.
- Make file table row border visible on arc-green.
- Remove remnants of fomantic accordeon module that was removed.
authored by
silverwind
and committed by
GitHub
3f9e323e
301d84e8
+61
-99
-1
web_src/fomantic/theme.config.less
-1
web_src/fomantic/theme.config.less
+52
-3
web_src/less/_base.less
+52
-3
web_src/less/_base.less
···
135
135
--color-light: #00000006;
136
136
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
137
137
--color-light-border: #0000001d;
138
-
--color-hover: #0000000f;
138
+
--color-hover: #0000000c;
139
139
--color-active: #00000014;
140
140
--color-menu: #ffffff;
141
141
--color-card: #ffffff;
···
157
157
--color-reaction-active-bg: var(--color-primary-alpha-20);
158
158
--color-tooltip-bg: #000000f0;
159
159
--color-tooltip-text: #ffffff;
160
+
--color-header-bar: #ffffff;
160
161
/* backgrounds */
161
162
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
162
163
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
···
294
295
text-decoration: none !important;
295
296
}
296
297
298
+
.ui.search > .results {
299
+
background: var(--color-body);
300
+
border-color: var(--color-secondary);
301
+
}
302
+
303
+
.ui.search > .results .result {
304
+
background: var(--color-body);
305
+
}
306
+
307
+
.ui.search > .results .result .title {
308
+
color: var(--color-text-dark);
309
+
}
310
+
311
+
.ui.search > .results .result .image {
312
+
width: auto;
313
+
height: auto;
314
+
}
315
+
316
+
.ui.search > .results .result:hover,
317
+
.ui.category.search > .results .category .result:hover {
318
+
background: var(--color-hover);
319
+
}
320
+
297
321
.unselectable {
298
322
-webkit-touch-callout: none;
299
323
-webkit-user-select: none;
···
318
342
color: var(--color-text-light-2);
319
343
}
320
344
345
+
.ui.divider:not(.vertical,.horizontal) {
346
+
border-top-color: var(--color-secondary) !important;
347
+
border-bottom: none !important;
348
+
}
349
+
321
350
.page-content {
322
351
margin-top: 15px;
323
352
}
···
447
476
448
477
.ui.dropdown .menu > .message:not(.ui) {
449
478
color: var(--color-text-light-2);
479
+
}
480
+
481
+
.ui.list .list > .item > .content,
482
+
.ui.list > .item > .content {
483
+
color: var(--color-text);
450
484
}
451
485
452
486
.ui.secondary.menu .dropdown.item:hover,
···
656
690
657
691
.ui.table {
658
692
color: var(--color-text);
659
-
background: var(--color-body);
693
+
background: var(--color-box-body);
660
694
border-color: var(--color-secondary);
661
695
}
662
696
697
+
.ui.table th,
698
+
.ui.table td {
699
+
transition: none;
700
+
}
701
+
702
+
.ui.table > tr > td,
703
+
.ui.table > tbody > tr > td {
704
+
border-top-color: var(--color-secondary-alpha-50);
705
+
}
706
+
663
707
.ui.ui.selectable.table > tbody > tr:hover,
664
708
.ui.table tbody tr td.selectable:hover {
665
709
color: var(--color-text);
···
669
713
.ui.ui.ui.ui.table tr.grey:not(.marked),
670
714
.ui.ui.table td.grey:not(.marked) {
671
715
background: var(--color-body);
716
+
color: var(--color-text);
717
+
}
718
+
719
+
.ui.table > thead > tr > th {
720
+
background: var(--color-box-header);
672
721
color: var(--color-text);
673
722
}
674
723
···
750
799
margin: 0 !important;
751
800
752
801
&.light {
753
-
background: var(--color-body);
802
+
background: var(--color-header-bar);
754
803
border-bottom: 1px solid var(--color-secondary);
755
804
}
756
805
+1
-1
web_src/less/_form.less
+1
-1
web_src/less/_form.less
+5
-5
web_src/less/_repository.less
+5
-5
web_src/less/_repository.less
···
384
384
}
385
385
386
386
tr:hover {
387
-
background-color: #ffffee;
387
+
background-color: var(--color-hover);
388
388
}
389
389
390
390
tr.has-parent a {
···
3013
3013
}
3014
3014
3015
3015
.tag-code,
3016
-
.tag-code td {
3017
-
background-color: #f0f9ff;
3018
-
border-color: #f1f8ff !important;
3016
+
.tag-code td,
3017
+
.tag-code .blob-excerpt {
3018
+
background-color: var(--color-box-body-highlight);
3019
3019
vertical-align: middle;
3020
3020
}
3021
3021
···
3031
3031
}
3032
3032
3033
3033
td.blob-excerpt {
3034
-
background-color: #fafafa;
3034
+
background-color: var(--color-secondary-alpha-30);
3035
3035
}
3036
3036
3037
3037
.issue-keyword {
+3
-89
web_src/less/themes/theme-arc-green.less
+3
-89
web_src/less/themes/theme-arc-green.less
···
94
94
/* target-based colors */
95
95
--color-body: #383c4a;
96
96
--color-box-header: #404652;
97
-
--color-box-body: #303440;
97
+
--color-box-body: #2a2e3a;
98
98
--color-box-body-highlight: #353945;
99
99
--color-text-dark: #dbe0ea;
100
100
--color-text: #bbc0ca;
···
105
105
--color-footer: #2e323e;
106
106
--color-timeline: #4c525e;
107
107
--color-input-text: #d5dbe6;
108
-
--color-input-background: #292d39;
108
+
--color-input-background: #232933;
109
109
--color-input-border: #454a57;
110
110
--color-input-border-hover: #505667;
111
111
--color-navbar: #2a2e3a;
···
132
132
--color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
133
133
--color-reaction-bg: #ffffff12;
134
134
--color-reaction-active-bg: var(--color-primary-alpha-40);
135
+
--color-header-bar: #2e323e;
135
136
}
136
137
137
138
::-webkit-calendar-picker-indicator {
138
139
filter: invert(.8);
139
140
}
140
141
141
-
.ui.horizontal.segments > .segment {
142
-
background-color: #383c4a;
143
-
}
144
-
145
-
.following.bar.light {
146
-
background: #2e323e;
147
-
border-color: var(--color-secondary-alpha-40);
148
-
}
149
-
150
-
.following.bar .top.menu a.item:hover {
151
-
color: #fff;
152
-
}
153
-
154
142
.ui.red.label,
155
143
.ui.red.labels .label {
156
144
background-color: #7d3434 !important;
···
163
151
background-color: #936e00 !important;
164
152
}
165
153
166
-
.ui.accordion .title:not(.ui) {
167
-
color: #dbdbdb;
168
-
}
169
-
170
154
.ui.green.label,
171
155
.ui.green.labels .label,
172
156
.ui.basic.green.label {
···
183
167
color: #fff !important;
184
168
}
185
169
186
-
.ui.divider:not(.vertical,.horizontal) {
187
-
border-bottom-color: var(--color-secondary);
188
-
border-top-color: transparent;
189
-
}
190
-
191
-
.form .help {
192
-
color: #7f8699;
193
-
}
194
-
195
-
.ui .text.light.grey {
196
-
color: #7f8699 !important;
197
-
}
198
-
199
170
.ui.form .fields.error .field textarea,
200
171
.ui.form .fields.error .field select,
201
172
.ui.form .fields.error .field input:not([type]),
···
257
228
background-color: #a0cc75;
258
229
}
259
230
260
-
.ui.search > .results {
261
-
background: #383c4a;
262
-
border-color: var(--color-secondary);
263
-
}
264
-
265
-
.ui.search > .results .result:hover,
266
-
.ui.category.search > .results .category .result:hover {
267
-
background: var(--color-secondary);
268
-
}
269
-
270
-
.ui.search > .results .result .title {
271
-
color: #dbdbdb;
272
-
}
273
-
274
-
.ui.table > thead > tr > th {
275
-
background: var(--color-secondary);
276
-
color: #dbdbdb !important;
277
-
}
278
-
279
-
.repository.file.list #repo-files-table tr {
280
-
background: #2a2e3a;
281
-
}
282
-
283
-
.repository.file.list #repo-files-table tr:hover {
284
-
background-color: #393d4a !important;
285
-
}
286
-
287
-
.overflow.menu .items .item {
288
-
color: #9d9d9d;
289
-
}
290
-
291
-
.overflow.menu .items .item:hover {
292
-
color: #dbdbdb;
293
-
}
294
-
295
-
.ui.list > .item > .content {
296
-
color: var(--color-secondary-dark-6) !important;
297
-
}
298
-
299
231
.repository .navbar .active.item,
300
232
.repository .navbar .active.item:hover {
301
233
border-color: transparent !important;
···
305
237
border-color: var(--color-secondary);
306
238
}
307
239
308
-
.tag-code,
309
-
.tag-code td {
310
-
background: #353945 !important;
311
-
312
-
}
313
-
.tag-code td.lines-num {
314
-
background-color: #3a3e4c !important;
315
-
}
316
-
317
-
.tag-code td.lines-type-marker,
318
-
td.blob-hunk {
319
-
color: #dbdbdb !important;
320
-
}
321
-
322
240
.ui.red.button,
323
241
.ui.red.buttons .button {
324
242
background-color: #7d3434;
···
342
260
.lines-num {
343
261
color: var(--color-secondary-dark-6) !important;
344
262
border-color: var(--color-secondary) !important;
345
-
}
346
-
347
-
td.blob-excerpt {
348
-
background-color: rgba(0, 0, 0, .15);
349
263
}
350
264
351
265
.lines-code.active,