loading up the forgejo repo on tangled to test page performance
1.repository .data-table .line-num,
2.repository .diff-file-box .file-body.file-code .lines-num,
3.repository .diff-file-box .code-diff tbody tr .lines-type-marker {
4 user-select: none;
5}
6
7.repository .unicode-escaped .escaped-code-point[data-escaped]::before {
8 visibility: visible;
9 content: attr(data-escaped);
10 font-family: var(--fonts-monospace);
11 color: var(--color-red);
12}
13
14.repository .unicode-escaped .escaped-code-point .char {
15 display: none;
16}
17
18.repository .broken-code-point {
19 font-family: var(--fonts-monospace);
20 color: var(--color-blue);
21}
22
23.repository .unicode-escaped .ambiguous-code-point {
24 border: 1px var(--color-yellow) solid;
25}
26
27.issue-content {
28 display: flex;
29 align-items: flex-start;
30 gap: 16px;
31}
32
33@media (max-width: 767.98px) {
34 .issue-content {
35 flex-direction: column;
36 }
37}
38
39.issue-content-left {
40 margin: 0 !important;
41 width: calc(100% - 316px);
42}
43
44.issue-content-right {
45 margin: 0 !important;
46 width: 300px;
47}
48
49.issue-content-right .dropdown > .menu {
50 max-width: 270px;
51 min-width: 0;
52}
53
54@media (max-width: 767.98px) {
55 .issue-content-left,
56 .issue-content-right {
57 width: 100%;
58 }
59}
60
61.repository .issue-content-right .ui.list .dependency {
62 padding: 0;
63 white-space: nowrap;
64}
65
66.repository .issue-content-right .ui.list .title {
67 overflow: hidden;
68 text-overflow: ellipsis;
69}
70
71.repository .issue-content-right #deadlineForm input {
72 width: 12.8rem;
73 border-radius: var(--border-radius) 0 0 var(--border-radius);
74 border-right: 0;
75 white-space: nowrap;
76}
77
78.repository .issue-content-right .filter.menu {
79 max-height: 500px;
80 overflow-x: auto;
81}
82
83.repository .filter.menu.labels .label-filter .menu .info {
84 display: inline-block;
85 padding: 0.5rem 0;
86 font-size: 12px;
87 width: 100%;
88 white-space: nowrap;
89 margin-left: 10px;
90 margin-right: 8px;
91 text-align: left;
92}
93
94.repository .filter.menu.labels .label-filter .menu .info code {
95 border: 1px solid var(--color-secondary);
96 border-radius: var(--border-radius);
97 padding: 1px 2px;
98 font-size: 11px;
99}
100
101/* make all issue filter dropdown menus popup leftward, to avoid go out the viewport (right side) */
102.repository .filter.menu .ui.dropdown .menu {
103 max-height: 500px;
104 max-width: 300px;
105 overflow-x: hidden;
106 right: 0;
107 left: auto;
108}
109
110/* the label-filter is the first dropdown, it shouldn't be shown leftward, otherwise it may go out the viewport (left side) */
111.repository .filter.menu .ui.dropdown.label-filter .menu {
112 min-width: max-content;
113 right: unset;
114 left: 0;
115}
116
117.repository .select-label .desc {
118 padding-left: 23px;
119}
120
121/* For the secondary pointing menu, respect its own border-bottom */
122/* style reference: https://semantic-ui.com/collections/menu.html#pointing */
123.repository .ui.tabs.container .ui.menu:not(.secondary.pointing) {
124 border-bottom: 0;
125}
126
127.repository .ui.tabs.divider {
128 margin-top: -1px;
129 margin-bottom: 12px;
130}
131
132.repository .clone-panel #repo-clone-url {
133 width: 320px;
134 border-radius: 0;
135}
136
137@media (max-width: 991.98px) {
138 .repository .clone-panel #repo-clone-url {
139 width: 200px;
140 }
141}
142
143.repository .ui.action.input.clone-panel > button + button,
144.repository .ui.action.input.clone-panel > button + input {
145 margin-left: -1px; /* make the borders overlap to avoid double borders */
146}
147
148.repository .clone-panel > button:first-of-type {
149 border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
150}
151
152.repository .clone-panel > button:last-of-type {
153 border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
154}
155
156/* Dropdown alignment */
157.repository .clone-panel .dropdown .menu,
158.repository .folder-actions .dropdown .menu {
159 right: 0 !important;
160 left: auto !important;
161}
162
163.repository.file.list .repo-description {
164 display: flex;
165 justify-content: space-between;
166 align-items: center;
167 gap: 5px;
168 margin-bottom: 5px;
169}
170
171@media (max-width: 767.98px) {
172 .repository.file.list .repo-description {
173 flex-direction: column;
174 align-items: stretch;
175 }
176}
177
178.commit-summary {
179 flex: 1;
180 overflow-wrap: anywhere;
181 overflow: hidden;
182 white-space: nowrap;
183 text-overflow: ellipsis;
184}
185
186.commit-header .commit-summary,
187td .commit-summary {
188 white-space: normal;
189}
190
191.commit-list .js-toggle-commit-body {
192 margin: 0 0 0 0.25em;
193}
194
195.commit-list .commit-status {
196 margin: 0 0 0 0.25em;
197}
198
199.latest-commit {
200 display: flex;
201 flex: 1;
202 align-items: center;
203 overflow: hidden;
204 text-overflow: ellipsis;
205}
206
207.latest-commit .commit-status {
208 margin-right: 0.25em;
209}
210
211@media (max-width: 767.98px) {
212 .latest-commit .sha {
213 display: none;
214 }
215 .latest-commit .commit-summary {
216 margin-left: 8px;
217 }
218}
219
220.repo-path {
221 display: flex;
222 overflow-wrap: anywhere;
223}
224
225/* this is what limits the commit table width to a value that works on all viewport sizes */
226#repo-files-table th:first-of-type {
227 max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x)));
228}
229
230.repository.file.list #repo-files-table thead th {
231 font-weight: var(--font-weight-normal);
232}
233
234.repository.file.list #repo-files-table tbody .svg {
235 margin-left: 3px;
236 margin-right: 5px;
237}
238
239.repository.file.list #repo-files-table tbody .svg.octicon-reply {
240 margin-right: 10px;
241}
242
243.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill,
244.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
245 color: var(--color-primary);
246}
247
248.repository.file.list #repo-files-table tbody .svg.octicon-file,
249.repository.file.list #repo-files-table tbody .svg.octicon-file-symlink-file,
250.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-symlink {
251 color: var(--color-secondary-dark-7);
252}
253
254.repository.file.list #repo-files-table td {
255 padding-top: 0;
256 padding-bottom: 0;
257 overflow: initial;
258}
259
260.repository.file.list #repo-files-table td.name {
261 width: 33%;
262 max-width: calc(100vw - 140px);
263}
264
265@media (min-width: 1201px) {
266 .repository.file.list #repo-files-table td.name {
267 max-width: 150px;
268 }
269}
270
271@media (min-width: 992px) and (max-width: 1200px) {
272 .repository.file.list #repo-files-table td.name {
273 max-width: 200px;
274 }
275}
276
277@media (min-width: 768px) and (max-width: 991.98px) {
278 .repository.file.list #repo-files-table td.name {
279 max-width: 300px;
280 }
281}
282
283.repository.file.list #repo-files-table td.message {
284 color: var(--color-text-light-1);
285 width: 66%;
286}
287
288@media (min-width: 1201px) {
289 .repository.file.list #repo-files-table td.message {
290 max-width: 400px;
291 }
292}
293
294@media (min-width: 992px) and (max-width: 1200px) {
295 .repository.file.list #repo-files-table td.message {
296 max-width: 350px;
297 }
298}
299
300@media (min-width: 768px) and (max-width: 991.98px) {
301 .repository.file.list #repo-files-table td.message {
302 max-width: 250px;
303 }
304}
305
306.repository.file.list #repo-files-table td.age {
307 color: var(--color-text-light-1);
308}
309
310.repository.file.list #repo-files-table td .truncate {
311 display: inline-block;
312 overflow: hidden;
313 text-overflow: ellipsis;
314 white-space: nowrap;
315 width: 100%;
316 padding-top: 8px;
317 padding-bottom: 8px;
318}
319
320.repository.file.list #repo-files-table td a {
321 padding-top: 8px;
322 padding-bottom: 8px;
323}
324
325.repository.file.list #repo-files-table td .at {
326 margin-left: 3px;
327 margin-right: 3px;
328}
329
330.repository.file.list #repo-files-table td > * {
331 vertical-align: middle;
332}
333
334.repository.file.list #repo-files-table td.message .isSigned {
335 cursor: default;
336}
337
338.repository.file.list #repo-files-table tr:last-of-type td:first-child {
339 border-bottom-left-radius: var(--border-radius);
340}
341
342.repository.file.list #repo-files-table tr:last-of-type td:last-child {
343 border-bottom-right-radius: var(--border-radius);
344}
345
346.repository.file.list #repo-files-table tr:hover {
347 background-color: var(--color-hover);
348}
349
350.repository.file.list #repo-files-table tr.has-parent a {
351 display: inline-block;
352 padding-top: 8px;
353 padding-bottom: 8px;
354 width: calc(100% - 1.25rem);
355}
356
357.repository.file.list .non-diff-file-content .header .icon {
358 font-size: 1em;
359}
360
361.repository.file.list .non-diff-file-content .header .small.icon {
362 font-size: 0.75em;
363}
364
365.repository.file.list .non-diff-file-content .header .tiny.icon {
366 font-size: 0.5em;
367}
368
369.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon {
370 line-height: var(--line-height-default);
371 padding: 8px;
372 vertical-align: middle;
373 color: var(--color-text);
374}
375
376.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon:hover {
377 color: var(--color-primary);
378}
379
380.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon-danger:hover {
381 color: var(--color-red);
382}
383
384.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon.disabled {
385 color: inherit;
386 opacity: var(--opacity-disabled);
387 cursor: default;
388}
389
390.code-search + #repo-files-table {
391 border-top-left-radius: 0;
392 border-top-right-radius: 0;
393}
394
395.view-raw {
396 display: flex;
397 justify-content: center;
398 align-items: center;
399}
400
401.view-raw > * {
402 max-width: 100%;
403}
404
405.view-raw audio,
406.view-raw video,
407.view-raw img {
408 margin: 1rem 0;
409 border-radius: 0;
410 object-fit: contain;
411}
412
413.view-raw img[src$=".svg" i] {
414 max-height: 600px !important;
415 max-width: 600px !important;
416}
417
418.pdf-content {
419 width: 100%;
420 height: 100vh;
421 border: none !important;
422 display: flex;
423 align-items: center;
424 justify-content: center;
425}
426
427.pdf-content .pdf-fallback-button {
428 margin: 50px auto;
429}
430
431.repository.file.list .non-diff-file-content .plain-text {
432 padding: 1em 2em;
433}
434
435.repository.file.list .non-diff-file-content .plain-text pre {
436 overflow-wrap: anywhere;
437 white-space: pre-wrap;
438}
439
440.repository.file.list .non-diff-file-content .csv {
441 overflow-x: auto;
442 padding: 0 !important;
443}
444
445.repository.file.list .non-diff-file-content pre {
446 overflow: auto;
447}
448
449.repository.file.list .non-diff-file-content .asciicast {
450 padding: 0 !important;
451}
452
453.non-diff-file-content .pdfobject {
454 border-radius: 0 0 var(--border-radius) var(--border-radius);
455}
456
457.repository.file.list .sidebar {
458 padding-left: 0;
459}
460
461.repository.file.list .sidebar .svg {
462 width: 16px;
463}
464
465.repo-editor-header {
466 width: 100%;
467}
468
469.repo-editor-header input {
470 vertical-align: middle !important;
471 width: auto !important;
472 padding: 7px 8px !important;
473 margin-right: 5px !important;
474}
475
476.repository.file.editor .tabular.menu .svg {
477 margin-right: 5px;
478}
479
480.repository.file.editor .commit-form-wrapper {
481 padding-left: 64px;
482}
483
484.repository.file.editor .commit-form-wrapper .commit-avatar {
485 float: left;
486 margin-left: -64px;
487 width: 3em;
488 height: auto;
489}
490
491.repository.file.editor .commit-form-wrapper .commit-form {
492 position: relative;
493 padding: 15px;
494 margin-bottom: 10px;
495 border: 1px solid var(--color-secondary);
496 background: var(--color-box-body);
497 border-radius: var(--border-radius);
498}
499
500.repository.file.editor .commit-form-wrapper .commit-form::before,
501.repository.file.editor .commit-form-wrapper .commit-form::after {
502 right: 100%;
503 top: 20px;
504 border: solid transparent;
505 content: " ";
506 height: 0;
507 width: 0;
508 position: absolute;
509 pointer-events: none;
510}
511
512.repository.file.editor .commit-form-wrapper .commit-form::before {
513 border-right-color: var(--color-secondary);
514 border-width: 9px;
515 margin-top: -9px;
516}
517
518.repository.file.editor .commit-form-wrapper .commit-form::after {
519 border-right-color: var(--color-box-body);
520 border-width: 8px;
521 margin-top: -8px;
522}
523
524.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .branch-name {
525 display: inline-block;
526 padding: 2px 4px;
527 font: 12px var(--fonts-monospace);
528 color: var(--color-text);
529 background: var(--color-secondary);
530 border-radius: var(--border-radius);
531 margin: 0 2px;
532}
533
534.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input {
535 position: relative;
536 margin-left: 25px;
537}
538
539.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input {
540 width: 240px !important;
541 padding-left: 26px !important;
542}
543
544.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch {
545 position: absolute;
546 top: 9px;
547 left: 10px;
548 color: var(--color-grey);
549}
550
551.repository.options #interval {
552 width: 100px !important;
553 min-width: 100px;
554}
555
556.repository.new.issue .comment.form .comment .avatar {
557 width: 3em;
558}
559
560.repository.new.issue .comment.form .content {
561 margin-left: 4em;
562}
563
564.repository.new.issue .comment.form .content::before,
565.repository.new.issue .comment.form .content::after {
566 right: 100%;
567 top: 20px;
568 border: solid transparent;
569 content: " ";
570 height: 0;
571 width: 0;
572 position: absolute;
573 pointer-events: none;
574}
575
576.repository.new.issue .comment.form .content::before {
577 border-right-color: var(--color-secondary);
578 border-width: 9px;
579 margin-top: -9px;
580}
581
582.repository.new.issue .comment.form .content::after {
583 border-right-color: var(--color-box-body);
584 border-width: 8px;
585 margin-top: -8px;
586}
587
588.repository.new.issue .comment.form .content .markup {
589 font-size: 14px;
590}
591
592.repository.view.issue .instruct-toggle {
593 display: inline-block;
594}
595
596.issue-title-header {
597 width: 100%;
598 padding-bottom: 4px;
599 margin-bottom: 1rem;
600}
601
602.issue-title-meta {
603 display: flex;
604 align-items: center;
605}
606
607.issue-title .button-row,
608.repository.releases .button-row {
609 display: flex;
610}
611
612@media (max-width: 767.98px) {
613 .repository.view.issue .issue-title {
614 flex-direction: column;
615 }
616 .issue-title .button-row {
617 width: 100%;
618 margin-top: .5rem;
619 justify-content: space-between;
620 }
621 .comment.form .issue-content-left .avatar {
622 display: none;
623 }
624 .comment.form .issue-content-left .content {
625 margin-left: 0 !important;
626 }
627 .comment.form .issue-content-left .content::before,
628 .comment.form .issue-content-left .content::after,
629 .comment.form .content .form::before,
630 .comment.form .content .form::after {
631 display: none;
632 }
633
634 .repository.view.issue .issue-title.edit-active h1 {
635 padding-right: 0;
636 }
637}
638
639.repository.view.issue .issue-title {
640 display: flex;
641 align-items: center;
642 gap: 0.5em;
643 margin-bottom: 8px;
644 min-height: var(--repo-header-issue-min-height);
645}
646
647.repository.view.issue .issue-title h1 {
648 flex: 1;
649 width: 100%;
650 font-weight: var(--font-weight-normal);
651 font-size: 32px;
652 line-height: 40px;
653 margin: 0;
654 padding-right: 0.5rem;
655}
656
657.repository.view.issue .issue-title .ui.input {
658 font-size: 16px;
659}
660
661.repository.view.issue .issue-title .ui.input input {
662 font-size: 1.5em;
663 padding: 2px .5rem;
664}
665
666.repository.view.issue .issue-title .index {
667 color: var(--color-text-light-2);
668}
669
670.repository.view.issue .issue-title .label {
671 margin-right: 10px;
672}
673
674.issue-state-label {
675 display: flex !important;
676 align-items: center !important;
677 font-size: 14px !important;
678 padding: 7px 10px !important;
679 border-radius: var(--border-radius-medium) !important;
680 flex-shrink: 0;
681}
682
683.issue-state-label .svg {
684 margin-right: 4px;
685}
686
687.repository.view.issue .pull-desc code {
688 color: var(--color-primary);
689}
690
691.repository.view.issue .pull-desc a[data-clipboard-text] {
692 cursor: pointer;
693}
694
695.repository.view.issue .pull-desc a[data-clipboard-text] svg {
696 vertical-align: middle;
697 position: relative;
698 top: -2px;
699 right: 1px;
700}
701
702.repository.view.issue .pull.tabs.container {
703 width: 100%;
704 max-width: 100%;
705}
706
707.repository.view.issue .pull.tabular.menu {
708 margin-bottom: 0;
709 overflow-x: auto;
710 overflow-y: hidden;
711}
712
713.repository.view.issue .pull.tabular.menu .svg {
714 margin-right: 5px;
715}
716
717.repository.view.issue .merge.box .branch-update.grid .row {
718 padding-bottom: 1rem;
719}
720
721.repository.view.issue .merge.box .branch-update.grid .row .icon {
722 margin-top: 1.1rem;
723}
724
725.repository.view.issue .comment-list:not(.prevent-before-timeline)::before {
726 display: block;
727 content: "";
728 position: absolute;
729 margin-top: 12px;
730 margin-bottom: 14px;
731 top: 0;
732 bottom: 0;
733 left: 96px;
734 width: 2px;
735 background-color: var(--color-timeline);
736 z-index: -1;
737}
738
739.repository.view.issue .comment-list .timeline {
740 position: relative;
741 display: block;
742 margin-left: 40px;
743 padding-left: 16px;
744}
745
746.repository.view.issue .comment-list .timeline::before { /* ciara */
747 display: block;
748 content: "";
749 position: absolute;
750 margin-top: 12px;
751 margin-bottom: 14px;
752 top: 0;
753 bottom: 0;
754 left: 30px;
755 width: 2px;
756 background-color: var(--color-timeline);
757 z-index: -1;
758}
759
760.repository.view.issue .comment-list .timeline-item,
761.repository.view.issue .comment-list .timeline-item-group {
762 padding: 0.65rem 0;
763}
764
765.repository.view.issue .comment-list .timeline-item-group .timeline-item {
766 padding-top: 8px;
767 padding-bottom: 8px;
768}
769
770.repository.view.issue .comment-list .timeline-avatar-offset {
771 margin-top: 48px;
772}
773
774.repository.view.issue .comment-list .timeline-item {
775 margin-left: 16px;
776 position: relative;
777}
778
779.repository.view.issue .comment-list .timeline-item .timeline-avatar {
780 position: absolute;
781 left: -68px;
782}
783
784/* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */
785.repository.view.issue .comment-list .timeline-item .inline-timeline-avatar {
786 display: none;
787}
788
789.repository.view.issue .comment-list .timeline-item:first-child:not(.commit) {
790 padding-top: 0 !important;
791}
792
793.repository.view.issue .comment-list .timeline-item:last-child:not(.commit) {
794 padding-bottom: 0 !important;
795}
796
797.repository.view.issue .comment-list .timeline-item .badge.badge-commit {
798 border-color: transparent;
799 background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
800}
801
802.repository.view.issue .comment-list .timeline-item .badge {
803 width: 34px;
804 height: 34px;
805 background-color: var(--color-timeline);
806 border-radius: var(--border-radius-full);
807 display: flex;
808 float: left;
809 margin-left: -33px;
810 margin-right: 8px;
811 color: var(--color-text);
812 align-items: center;
813 justify-content: center;
814}
815
816.repository.view.issue .comment-list .timeline-item .badge .svg {
817 width: 22px;
818 height: 22px;
819 padding: 3px;
820}
821
822.repository.view.issue .comment-list .timeline-item .badge .svg.octicon-comment {
823 margin-top: 2px;
824}
825
826.repository.view.issue .comment-list .timeline-item.comment > .content {
827 margin-left: -16px;
828}
829
830.repository.view.issue .comment-list .timeline-item.event > .text {
831 line-height: 32px;
832 vertical-align: middle;
833}
834
835.repository.view.issue .comment-list .timeline-item.commits-list {
836 padding-left: 15px;
837 padding-top: 0;
838}
839
840.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar,
841.repository.view.issue .comment-list .timeline-item.event .ui.avatar {
842 margin-right: 0.25em;
843}
844
845.repository.view.issue .comment-list .timeline-item .aggregated-actions .badge {
846 width: 20px;
847 height: 20px;
848 margin-top: 5px;
849 padding: 12px;
850}
851
852.repository.view.issue .comment-list .timeline-item .aggregated-actions .badge .svg {
853 width: 20px;
854 height: 20px;
855}
856
857.singular-commit {
858 display: flex;
859 align-items: center;
860}
861
862.singular-commit .badge {
863 height: 30px !important;
864}
865
866.singular-commit .shabox .sha.label {
867 margin: 0;
868 border: 1px solid var(--color-light-border);
869}
870
871.singular-commit .shabox .sha.label.isSigned.isWarning {
872 border: 1px solid var(--color-red-badge);
873 background: var(--color-red-badge-bg);
874}
875
876.singular-commit .shabox .sha.label.isSigned.isWarning:hover {
877 background: var(--color-red-badge-hover-bg) !important;
878}
879
880.singular-commit .shabox .sha.label.isSigned.isVerified {
881 border: 1px solid var(--color-green-badge);
882 background: var(--color-green-badge-bg);
883}
884
885.singular-commit .shabox .sha.label.isSigned.isVerified:hover {
886 background: var(--color-green-badge-hover-bg) !important;
887}
888
889.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted {
890 border: 1px solid var(--color-yellow-badge);
891 background: var(--color-yellow-badge-bg);
892}
893
894.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover {
895 background: var(--color-yellow-badge-hover-bg) !important;
896}
897
898.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched {
899 border: 1px solid var(--color-orange-badge);
900 background: var(--color-orange-badge-bg);
901}
902
903.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover {
904 background: var(--color-orange-badge-hover-bg) !important;
905}
906
907.repository.view.issue .comment-list .timeline-item .comparebox {
908 line-height: 32px;
909 vertical-align: middle;
910}
911
912.repository.view.issue .comment-list .timeline-item .comparebox .compare.label {
913 font-size: 1rem;
914 margin: 0;
915 border: 1px solid var(--color-light-border);
916}
917
918@media (max-width: 767.98px) {
919 .repository.view.issue .comment-list .timeline-item .ui.segments {
920 margin-left: -2rem;
921 }
922}
923
924.repository.view.issue .comment-list .ui.comments {
925 max-width: 100%;
926}
927
928.repository.view.issue .comment-list .comment > .content > div:first-child {
929 border-top-left-radius: 4px;
930 border-top-right-radius: 4px;
931}
932
933.repository.view.issue .comment-list .comment > .content > div:last-child {
934 border-bottom-left-radius: 4px;
935 border-bottom-right-radius: 4px;
936}
937
938.repository.view.issue .comment-list .comment .comment-container {
939 border: 1px solid var(--color-secondary);
940 border-radius: var(--border-radius);
941}
942
943.repository.view.issue .comment-list .comment .merge-section {
944 background-color: var(--color-box-body);
945}
946
947.repository.view.issue .comment-list .comment .merge-section .item-section {
948 display: flex;
949 flex-wrap: wrap;
950 align-items: center;
951 justify-content: space-between;
952 padding: 0;
953 gap: 0.5em;
954}
955
956.repository.view.issue .comment-list .comment .merge-section .divider {
957 margin-left: -1rem;
958 width: calc(100% + 2rem);
959}
960
961.repository.view.issue .comment-list .comment .merge-section.no-header::before,
962.repository.view.issue .comment-list .comment .merge-section.no-header::after {
963 right: 100%;
964 top: 20px;
965 border: solid transparent;
966 content: " ";
967 height: 0;
968 width: 0;
969 position: absolute;
970 pointer-events: none;
971}
972
973.repository.view.issue .comment-list .comment .merge-section.no-header::before {
974 border-right-color: var(--color-secondary);
975 border-width: 9px;
976 margin-top: -9px;
977}
978
979.repository.view.issue .comment-list .comment .merge-section.no-header::after {
980 border-right-color: var(--color-box-body);
981 border-width: 8px;
982 margin-top: -8px;
983}
984
985.merge-section-info code {
986 border: 1px solid var(--color-light-border);
987 border-radius: var(--border-radius);
988 padding: 2px 4px;
989 background: var(--color-light);
990}
991
992.repository.view.issue .comment-list .comment .markup {
993 font-size: 14px;
994}
995
996.repository.view.issue .comment-list .comment .no-content {
997 color: var(--color-text-light-2);
998 font-style: italic;
999}
1000
1001.repository.view.issue .comment-list .comment .ui.form .field:first-child {
1002 clear: none;
1003}
1004
1005.repository.view.issue .comment-list .comment .ui.form .field.footer {
1006 overflow: hidden;
1007}
1008
1009.repository.view.issue .comment-list .comment .ui.form .field .tab.markup {
1010 min-height: 5rem;
1011}
1012
1013.repository.view.issue .comment-list .comment .edit.buttons {
1014 margin-top: 10px;
1015}
1016
1017.repository.view.issue .comment-list .code-comment {
1018 border: 1px solid transparent;
1019 margin: 0;
1020}
1021
1022.repository.view.issue .comment-list .code-comment .comment-header {
1023 background: transparent;
1024 border-bottom: 0 !important;
1025 padding: 0 !important;
1026}
1027
1028.repository.view.issue .comment-list .code-comment .comment-header::after,
1029.repository.view.issue .comment-list .code-comment .comment-header::before {
1030 display: none;
1031}
1032
1033.repository.view.issue .comment-list .code-comment .comment-content {
1034 margin-left: 36px;
1035}
1036
1037.repository.view.issue .comment-list .comment > .avatar {
1038 margin-top: 6px;
1039}
1040
1041.repository.view.issue .comment-list .comment > .avatar ~ .content {
1042 margin-left: 42px;
1043}
1044
1045.repository.view.issue .comment-list .comment-code-cloud .segment.reactions {
1046 margin-top: 16px !important;
1047 margin-bottom: -8px !important;
1048 border-top: none !important;
1049}
1050
1051.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label {
1052 border: 1px solid;
1053 padding: 5px 8px !important;
1054 margin: 0 2px;
1055 border-radius: var(--border-radius);
1056 border-color: var(--color-secondary-dark-1) !important;
1057}
1058
1059.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary {
1060 background-color: var(--color-reaction-active-bg) !important;
1061 border-color: var(--color-primary-alpha-80) !important;
1062}
1063
1064.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary:hover {
1065 background-color: var(--color-reaction-hover-bg) !important;
1066 border-color: var(--color-primary-alpha-80) !important;
1067}
1068
1069.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
1070 margin: 0;
1071}
1072
1073.repository.view.issue .comment-list .event {
1074 padding-left: 15px;
1075}
1076
1077.repository.view.issue .comment-list .event .detail {
1078 margin-top: 4px;
1079 margin-left: 15px;
1080}
1081
1082.repository.view.issue .comment-list .event .detail .text {
1083 overflow: hidden;
1084 white-space: nowrap;
1085 text-overflow: ellipsis;
1086}
1087
1088.repository.view.issue .comment-list .event .segments {
1089 box-shadow: none;
1090}
1091
1092@media (max-width: 767.98px) {
1093 .repository.view.issue .comment-list {
1094 padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */
1095 }
1096}
1097
1098.repository.view.issue .ui.depending .item.is-closed .title {
1099 text-decoration: line-through;
1100}
1101
1102.repository .comment.form .content .field:first-child {
1103 clear: none;
1104}
1105
1106.repository .comment.form .content .form::before,
1107.repository .comment.form .content .form::after {
1108 right: 100%;
1109 top: 20px;
1110 border: solid transparent;
1111 content: " ";
1112 height: 0;
1113 width: 0;
1114 position: absolute;
1115 pointer-events: none;
1116}
1117
1118.repository .comment.form .content .form::before {
1119 border-right-color: var(--color-secondary);
1120 border-width: 9px;
1121 margin-top: -9px;
1122}
1123
1124.repository .comment.form .content .form::after {
1125 border-right-color: var(--color-box-body);
1126 border-width: 8px;
1127 margin-top: -8px;
1128}
1129
1130.repository.new.milestone textarea {
1131 height: 200px;
1132}
1133
1134.milestone-progress-big {
1135 width: min(420px, 96vw);
1136 height: 10px;
1137}
1138
1139.repository.compare.pull .show-form-container {
1140 text-align: left;
1141}
1142
1143.repository .choose.branch {
1144 display: flex;
1145 align-items: center;
1146 gap: 8px;
1147 flex-wrap: wrap;
1148}
1149
1150.repository .choose .compare-separator {
1151 width: 100%;
1152 margin-top: -1rem;
1153 text-align: center;
1154}
1155
1156.branch-tag-tab {
1157 padding: 0 10px 10px;
1158}
1159
1160.branch-tag-item {
1161 display: inline-flex;
1162 align-items: center;
1163 gap: 0.5rem;
1164 padding: 0 10px;
1165 border: 1px solid transparent;
1166 border-bottom: none;
1167}
1168
1169.repository.compare.pull .comment.form .content::before,
1170.repository.compare.pull .comment.form .content::after {
1171 right: 100%;
1172 top: 20px;
1173 border: solid transparent;
1174 content: " ";
1175 height: 0;
1176 width: 0;
1177 position: absolute;
1178 pointer-events: none;
1179}
1180
1181.repository.compare.pull .comment.form .content::before {
1182 border-right-color: var(--color-secondary);
1183 border-width: 9px;
1184 margin-top: -9px;
1185}
1186
1187.repository.compare.pull .comment.form .content::after {
1188 border-right-color: var(--color-box-body);
1189 border-width: 8px;
1190 margin-top: -8px;
1191}
1192
1193.repository.compare.pull .pullrequest-form {
1194 margin-top: 16px;
1195 margin-bottom: 16px;
1196}
1197
1198.repository.compare.pull .markup {
1199 font-size: 14px;
1200}
1201
1202.repository.compare.pull .title .issue-title {
1203 margin-bottom: 0.5rem;
1204}
1205
1206.repository.compare.pull .title .issue-title .index {
1207 color: var(--color-text-light-2);
1208}
1209
1210.repository.branches .commit-divergence .bar-group {
1211 position: relative;
1212 float: left;
1213 padding-bottom: 6px;
1214 width: 50%;
1215 max-width: 90px;
1216}
1217
1218.repository.branches .commit-divergence .bar-group:last-child {
1219 border-left: 1px solid var(--color-secondary-dark-2);
1220}
1221
1222.repository.branches .commit-divergence .count {
1223 margin: 0 3px;
1224}
1225
1226.repository.branches .commit-divergence .count.count-ahead {
1227 text-align: left;
1228}
1229
1230.repository.branches .commit-divergence .count.count-behind {
1231 text-align: right;
1232}
1233
1234.repository.branches .commit-divergence .bar {
1235 height: 4px;
1236 position: absolute;
1237 background-color: var(--color-secondary-dark-2);
1238}
1239
1240.repository.branches .commit-divergence .bar.bar-behind {
1241 right: 0;
1242}
1243
1244.repository.branches .commit-divergence .bar.bar-ahead {
1245 left: 0;
1246}
1247
1248.repository.commits .header .search input {
1249 font-weight: var(--font-weight-normal);
1250 padding: 5px 10px;
1251}
1252
1253.repository #commits-table td:not(.message) {
1254 white-space: nowrap;
1255}
1256.repository #commits-table thead .sha {
1257 width: 200px;
1258}
1259
1260.repository #commits-table thead .shatd {
1261 text-align: center;
1262}
1263
1264.repository #commits-table td.sha .sha.label {
1265 margin: 0;
1266}
1267
1268.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
1269 background-color: var(--color-light) !important;
1270}
1271
1272.repository #commits-table td.sha .sha.label,
1273.repository #repo-files-table .sha.label,
1274.repository #repo-file-commit-box .sha.label,
1275.repository #rev-list .sha.label,
1276.repository .timeline-item.commits-list .singular-commit .sha.label {
1277 border: 1px solid var(--color-light-border);
1278}
1279
1280.repository #commits-table td.sha .sha.label .ui.signature.avatar,
1281.repository #repo-files-table .sha.label .ui.signature.avatar,
1282.repository #repo-file-commit-box .sha.label .ui.signature.avatar,
1283.repository #rev-list .sha.label .ui.signature.avatar,
1284.repository .timeline-item.commits-list .singular-commit .sha.label .ui.signature.avatar {
1285 height: 16px;
1286 margin-bottom: 0;
1287 width: 16px;
1288}
1289
1290.repository #commits-table td.sha .sha.label .detail.icon,
1291.repository #repo-files-table .sha.label .detail.icon,
1292.repository #repo-file-commit-box .sha.label .detail.icon,
1293.repository #rev-list .sha.label .detail.icon,
1294.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon {
1295 background: var(--color-light);
1296 margin: -6px -10px -4px 0;
1297 padding: 5px 4px 5px 6px;
1298 border-left: 1px solid var(--color-light-border);
1299 border-top: 0;
1300 border-right: 0;
1301 border-bottom: 0;
1302 border-top-left-radius: 0;
1303 border-bottom-left-radius: 0;
1304}
1305
1306.repository #commits-table td.sha .sha.label .detail.icon img,
1307.repository #repo-files-table .sha.label .detail.icon img,
1308.repository #repo-file-commit-box .sha.label .detail.icon img,
1309.repository #rev-list .sha.label .detail.icon img,
1310.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon img {
1311 margin-right: 0;
1312}
1313
1314.repository #commits-table td.sha .sha.label .detail.icon .svg,
1315.repository #repo-files-table .sha.label .detail.icon .svg,
1316.repository #repo-file-commit-box .sha.label .detail.icon .svg,
1317.repository #rev-list .sha.label .detail.icon .svg,
1318.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon .svg {
1319 margin: 0 0.25em 0 0;
1320}
1321
1322.repository #commits-table td.sha .sha.label .detail.icon > div,
1323.repository #repo-files-table .sha.label .detail.icon > div,
1324.repository #repo-file-commit-box .sha.label .detail.icon > div,
1325.repository #rev-list .sha.label .detail.icon > div,
1326.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon > div {
1327 display: flex;
1328 align-items: center;
1329}
1330
1331.repository #commits-table td.sha .sha.label.isSigned.isWarning,
1332.repository #repo-files-table .sha.label.isSigned.isWarning,
1333.repository #repo-file-commit-box .sha.label.isSigned.isWarning,
1334.repository #rev-list .sha.label.isSigned.isWarning,
1335.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning {
1336 border: 1px solid var(--color-red-badge);
1337 background: var(--color-red-badge-bg);
1338}
1339
1340.repository #commits-table td.sha .sha.label.isSigned.isWarning .detail.icon,
1341.repository #repo-files-table .sha.label.isSigned.isWarning .detail.icon,
1342.repository #repo-file-commit-box .sha.label.isSigned.isWarning .detail.icon,
1343.repository #rev-list .sha.label.isSigned.isWarning .detail.icon,
1344.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .detail.icon {
1345 border-left: 1px solid var(--color-red-badge);
1346 color: var(--color-red-badge);
1347}
1348
1349.repository #commits-table td.sha .sha.label.isSigned.isWarning:hover,
1350.repository #repo-files-table .sha.label.isSigned.isWarning:hover,
1351.repository #repo-file-commit-box .sha.label.isSigned.isWarning:hover,
1352.repository #rev-list .sha.label.isSigned.isWarning:hover,
1353.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning:hover {
1354 background: var(--color-red-badge-hover-bg) !important;
1355}
1356
1357.repository #commits-table td.sha .sha.label.isSigned.isVerified,
1358.repository #repo-files-table .sha.label.isSigned.isVerified,
1359.repository #repo-file-commit-box .sha.label.isSigned.isVerified,
1360.repository #rev-list .sha.label.isSigned.isVerified,
1361.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified {
1362 border: 1px solid var(--color-green-badge);
1363 background: var(--color-green-badge-bg);
1364}
1365
1366.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon,
1367.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon,
1368.repository #repo-file-commit-box .sha.label.isSigned.isVerified .detail.icon,
1369.repository #rev-list .sha.label.isSigned.isVerified .detail.icon,
1370.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon {
1371 border-left: 1px solid var(--color-green-badge);
1372 color: var(--color-green-badge);
1373}
1374
1375.repository #commits-table td.sha .sha.label.isSigned.isVerified:hover,
1376.repository #repo-files-table .sha.label.isSigned.isVerified:hover,
1377.repository #repo-file-commit-box .sha.label.isSigned.isVerified:hover,
1378.repository #rev-list .sha.label.isSigned.isVerified:hover,
1379.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified:hover {
1380 background: var(--color-green-badge-hover-bg) !important;
1381}
1382
1383.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted,
1384.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted,
1385.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted,
1386.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted,
1387.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted {
1388 border: 1px solid var(--color-yellow-badge);
1389 background: var(--color-yellow-badge-bg);
1390}
1391
1392.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
1393.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
1394.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
1395.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .detail.icon,
1396.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .detail.icon {
1397 border-left: 1px solid var(--color-yellow-badge);
1398 color: var(--color-yellow-badge);
1399}
1400
1401.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted:hover,
1402.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted:hover,
1403.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted:hover,
1404.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted:hover,
1405.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted:hover {
1406 background: var(--color-yellow-badge-hover-bg) !important;
1407}
1408
1409.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched,
1410.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched,
1411.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched,
1412.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched,
1413.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched {
1414 border: 1px solid var(--color-orange-badge);
1415 background: var(--color-orange-badge-bg);
1416}
1417
1418.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
1419.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
1420.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
1421.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .detail.icon,
1422.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .detail.icon {
1423 border-left: 1px solid var(--color-orange-badge);
1424 color: var(--color-orange-badge);
1425}
1426
1427.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched:hover,
1428.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched:hover,
1429.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched:hover,
1430.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched:hover,
1431.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched:hover {
1432 background: var(--color-orange-badge-hover-bg) !important;
1433}
1434
1435.repository .data-table {
1436 width: 100%;
1437}
1438
1439.repository .data-table tr {
1440 border-top: 0;
1441}
1442
1443.repository .data-table td,
1444.repository .data-table th {
1445 padding: 5px !important;
1446 overflow: hidden;
1447 font-size: 12px;
1448 text-align: left;
1449 white-space: nowrap;
1450 border: 1px solid var(--color-secondary);
1451}
1452
1453/* the border css competes with .markup where all tables have outer border which would add a double
1454 border here, remove only the outer borders from this table */
1455.repository .data-table tr:first-child :is(td,th) {
1456 border-top: none !important;
1457}
1458.repository .data-table tr:last-child :is(td,th) {
1459 border-bottom: none !important;
1460}
1461.repository .data-table tr :is(td,th):first-child {
1462 border-left: none !important;
1463}
1464.repository .data-table tr :is(td,th):last-child {
1465 border-right: none !important;
1466}
1467
1468.repository .data-table td {
1469 white-space: pre-line;
1470}
1471
1472.repository .data-table th {
1473 font-weight: var(--font-weight-semibold);
1474 background: var(--color-box-header);
1475 border-top: 0;
1476}
1477
1478.repository .data-table td.added,
1479.repository .data-table th.added,
1480.repository .data-table tr.added {
1481 background-color: var(--color-diff-added-row-bg) !important;
1482}
1483
1484.repository .data-table td.removed,
1485.repository .data-table th.removed,
1486.repository .data-table tr.removed {
1487 background-color: var(--color-diff-removed-row-bg) !important;
1488}
1489
1490.repository .data-table td.moved,
1491.repository .data-table th.moved,
1492.repository .data-table tr.moved {
1493 background-color: var(--color-diff-moved-row-bg) !important;
1494}
1495
1496.repository .data-table tbody.section {
1497 border-top: 2px solid var(--color-secondary);
1498}
1499
1500.repository .data-table .line-num {
1501 width: 1%;
1502 min-width: 50px;
1503 font-family: monospace;
1504 line-height: 20px;
1505 color: var(--color-text-light-1);
1506 white-space: nowrap;
1507 vertical-align: top;
1508 cursor: pointer;
1509 text-align: right;
1510 background: var(--color-body);
1511 border: 0;
1512}
1513
1514.repository .diff-detail-box {
1515 display: flex;
1516 justify-content: space-between;
1517 align-items: center;
1518 position: sticky;
1519 top: 0;
1520 z-index: 8;
1521 padding: 7px 5px;
1522 margin: 0 -5px; /* negative margin so it covers active file shadow */
1523 height: 44px; /* this height should match sticky-2nd-row */
1524 background: var(--color-body);
1525}
1526
1527@media (max-width: 480px) {
1528 .repository .diff-detail-box {
1529 flex-wrap: wrap;
1530 }
1531}
1532.repository .diff-detail-box .diff-detail-stats strong {
1533 margin-left: 0.25rem;
1534 margin-right: 0.25rem;
1535}
1536
1537/* Because the translations contain the <strong> we need to style with nth-of-type */
1538
1539.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(1) {
1540 color: var(--color-yellow);
1541}
1542
1543.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(2) {
1544 color: var(--color-green);
1545}
1546
1547.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(3) {
1548 color: var(--color-red);
1549}
1550
1551@media (max-width: 800px) {
1552 .repository .diff-detail-box .diff-detail-stats {
1553 display: none !important;
1554 }
1555}
1556
1557.diff-detail-actions {
1558 display: flex;
1559 align-items: center;
1560 justify-content: end;
1561}
1562
1563.diff-detail-actions > *,
1564.diff-detail-actions .button {
1565 margin-left: 0 !important;
1566 margin-right: 0 !important;
1567}
1568
1569.repository .diff-detail-box span.status {
1570 display: inline-block;
1571 width: 12px;
1572 height: 12px;
1573 margin-right: 8px;
1574 vertical-align: middle;
1575}
1576
1577.repository .diff-detail-box span.status.modify {
1578 background-color: var(--color-yellow);
1579}
1580
1581.repository .diff-detail-box span.status.add {
1582 background-color: var(--color-green);
1583}
1584
1585.repository .diff-detail-box span.status.del {
1586 background-color: var(--color-red);
1587}
1588
1589.repository .diff-detail-box span.status.rename {
1590 background-color: var(--color-teal);
1591}
1592
1593.repository .diff-detail-box .ui.button {
1594 padding: 0 1.125em;
1595 height: 30px;
1596}
1597
1598.repository .diff-box .header:not(.resolved-placeholder) .file {
1599 min-width: 0;
1600}
1601
1602.repository .diff-box .header:not(.resolved-placeholder) .file .file-link {
1603 max-width: fit-content;
1604 display: -webkit-box;
1605 -webkit-box-orient: vertical;
1606 -webkit-line-clamp: 2;
1607 overflow: hidden;
1608}
1609
1610.repository .diff-box .header:not(.resolved-placeholder) .button {
1611 padding: 0 1.125em;
1612 flex: 0 0 auto;
1613 margin-right: 0;
1614 height: 30px;
1615}
1616
1617.repository .diff-box .resolved-placeholder {
1618 display: flex;
1619 align-items: center;
1620 font-size: 14px !important;
1621 height: 36px;
1622 padding-top: 0;
1623 padding-bottom: 0;
1624}
1625
1626.repository .diff-box .resolved-placeholder .button {
1627 padding: 8px 12px;
1628}
1629
1630.repository .diff-file-box .header {
1631 background-color: var(--color-box-header);
1632}
1633
1634.repository .diff-file-box .file-body.file-code {
1635 background: var(--color-code-bg);
1636}
1637
1638.repository .diff-file-box .file-body.file-code .lines-num {
1639 text-align: right;
1640 width: 1%;
1641 min-width: 50px;
1642}
1643
1644.repository .diff-file-box .file-body.file-code .lines-num span.fold {
1645 display: block;
1646 text-align: center;
1647}
1648
1649.repository .diff-file-box .code-diff td {
1650 padding: 0 0 0 10px !important;
1651 border-top: 0;
1652}
1653
1654.repository .diff-file-box .code-diff .lines-num {
1655 padding: 0 5px !important;
1656}
1657
1658.repository .diff-file-box .code-diff .tag-code .lines-num,
1659.repository .diff-file-box .code-diff .tag-code td {
1660 padding: 0 !important;
1661}
1662
1663.repository .diff-file-box .code-diff table {
1664 table-layout: fixed;
1665}
1666
1667.repository .diff-file-box .code-diff tbody tr td.lines-num,
1668.repository .diff-file-box .code-diff tbody tr td.lines-escape,
1669.repository .diff-file-box .code-diff tbody tr td.lines-type-marker {
1670 white-space: nowrap;
1671}
1672
1673.repository .diff-file-box .code-diff tbody tr td.center {
1674 text-align: center;
1675}
1676
1677.repository .diff-file-box .code-diff tbody tr [data-line-num]::before {
1678 content: attr(data-line-num);
1679 text-align: right;
1680}
1681
1682.repository .diff-file-box .code-diff tbody tr .lines-type-marker {
1683 width: 10px;
1684 min-width: 10px;
1685}
1686
1687.repository .diff-file-box .code-diff tbody tr [data-type-marker]::before {
1688 content: attr(data-type-marker);
1689 text-align: right;
1690 display: inline-block;
1691}
1692
1693.repository .diff-file-box .code-diff-split .tag-code .lines-code code.code-inner {
1694 padding-left: 10px !important;
1695}
1696
1697.repository .diff-file-box .code-diff-split table,
1698.repository .diff-file-box .code-diff-split tbody {
1699 width: 100%;
1700}
1701
1702.repository .diff-file-box.file-content {
1703 clear: right;
1704}
1705
1706.repository .diff-file-box.file-content .image-diff img {
1707 max-width: 100%;
1708 padding: 0;
1709 border-radius: 0;
1710}
1711
1712.repository .diff-file-box .ui.bottom.attached.table.segment {
1713 padding-top: 5px;
1714 padding-bottom: 5px;
1715}
1716
1717.diff-file-box {
1718 border: 1px solid transparent;
1719 border-radius: var(--border-radius);
1720 scroll-margin-top: 47px; /* match .repository .diff-detail-box */
1721}
1722
1723.file.editor .diff-file-box {
1724 border: none;
1725}
1726
1727.file.editor .diff-file-box .ui.attached.table {
1728 border: none;
1729}
1730
1731/* TODO: this can potentially be made "global" by removing the class prefix */
1732.diff-file-box .ui.attached.header,
1733.diff-file-box .ui.attached.table {
1734 margin: 0; /* remove fomantic negative margins */
1735 width: initial; /* remove fomantic over 100% width */
1736 max-width: initial; /* remove fomantic over 100% width */
1737}
1738
1739.repository .repo-search-result {
1740 padding-top: 10px;
1741 padding-bottom: 10px;
1742}
1743
1744.repository .repo-search-result .lines-num a {
1745 color: inherit;
1746}
1747
1748/* workaround for safari as it does not support 'display: list-item' for summary tags yet
1749** see https://codeberg.org/forgejo/forgejo/issues/5259 */
1750details.repo-search-result summary::-webkit-details-marker,
1751details.repo-search-result summary::marker {
1752 display: none;
1753}
1754
1755.search-highlight {
1756 background: var(--color-primary-alpha-40);
1757}
1758
1759.repository.quickstart .guide .item {
1760 padding: 1em;
1761}
1762
1763.repository.quickstart .guide .item small {
1764 font-weight: var(--font-weight-normal);
1765}
1766
1767.repository.quickstart .guide #repo-clone-url {
1768 border-radius: 0;
1769 padding: 5px 10px;
1770 font-size: 1.2em;
1771 line-height: 1.4;
1772 flex: 1
1773}
1774
1775.empty-placeholder {
1776 display: flex;
1777 flex-direction: column;
1778 align-items: center;
1779 padding-top: 40px;
1780 padding-bottom: 40px;
1781}
1782
1783.repository.packages .file-size {
1784 white-space: nowrap;
1785}
1786
1787.file-view.markup {
1788 padding: 2em;
1789}
1790.repository .activity-header {
1791 display: flex;
1792 justify-content: space-between;
1793 gap: 8px;
1794 flex-wrap: wrap;
1795}
1796
1797/* if the element is for a checkbox, then it should have a padding-left to align to the checkbox's text */
1798.repository.settings.branches .branch-protection .ui.checkbox .help,
1799.repository.settings.branches .branch-protection .checkbox-sub-item {
1800 padding-left: 26px;
1801}
1802
1803.repository.settings.branches .branch-protection .status-check-matched-mark {
1804 font-weight: var(--font-weight-semibold);
1805 font-style: italic;
1806}
1807
1808.repository .ui.attached.isSigned.isWarning {
1809 border-left: 1px solid var(--color-error-border);
1810 border-right: 1px solid var(--color-error-border);
1811}
1812
1813.repository .ui.attached.isSigned.isWarning.top,
1814.repository .ui.attached.isSigned.isWarning.message {
1815 border-top: 1px solid var(--color-error-border);
1816}
1817
1818.repository .ui.attached.isSigned.isWarning.message {
1819 box-shadow: none;
1820 background-color: var(--color-error-bg);
1821 color: var(--color-error-text);
1822}
1823
1824.repository .ui.attached.isSigned.isWarning.message .ui.text {
1825 color: var(--color-error-text);
1826}
1827
1828.repository .ui.attached.isSigned.isWarning:last-child,
1829.repository .ui.attached.isSigned.isWarning.bottom {
1830 border-bottom: 1px solid var(--color-error-border);
1831}
1832
1833.repository .ui.attached.isSigned.isVerified {
1834 border-left: 1px solid var(--color-success-border);
1835 border-right: 1px solid var(--color-success-border);
1836}
1837
1838.repository .ui.attached.isSigned.isVerified.top,
1839.repository .ui.attached.isSigned.isVerified.message {
1840 border-top: 1px solid var(--color-success-border);
1841}
1842
1843.repository .ui.attached.isSigned.isVerified.message {
1844 box-shadow: none;
1845 background-color: var(--color-success-bg);
1846 color: var(--color-success-text);
1847}
1848
1849.repository .ui.attached.isSigned.isVerified.message .ui.text {
1850 color: var(--color-success-text);
1851}
1852
1853.repository .ui.attached.isSigned.isVerified:last-child,
1854.repository .ui.attached.isSigned.isVerified.bottom {
1855 border-bottom: 1px solid var(--color-success-border);
1856}
1857
1858.repository .ui.attached.isSigned.isVerifiedUntrusted,
1859.repository .ui.attached.isSigned.isVerifiedUnmatched {
1860 border-left: 1px solid var(--color-warning-border);
1861 border-right: 1px solid var(--color-warning-border);
1862}
1863
1864.repository .ui.attached.isSigned.isVerifiedUntrusted.top,
1865.repository .ui.attached.isSigned.isVerifiedUnmatched.top,
1866.repository .ui.attached.isSigned.isVerifiedUntrusted.message,
1867.repository .ui.attached.isSigned.isVerifiedUnmatched.message {
1868 border-top: 1px solid var(--color-warning-border);
1869}
1870
1871.repository .ui.attached.isSigned.isVerifiedUntrusted.message,
1872.repository .ui.attached.isSigned.isVerifiedUnmatched.message {
1873 box-shadow: none;
1874 background-color: var(--color-warning-bg);
1875 color: var(--color-warning-text);
1876}
1877
1878.repository .ui.attached.isSigned.isVerifiedUntrusted.message .ui.text,
1879.repository .ui.attached.isSigned.isVerifiedUnmatched.message .ui.text {
1880 color: var(--color-warning-text);
1881}
1882
1883.repository .ui.attached.isSigned.isVerifiedUntrusted:last-child,
1884.repository .ui.attached.isSigned.isVerifiedUnmatched:last-child,
1885.repository .ui.attached.isSigned.isVerifiedUntrusted.bottom,
1886.repository .ui.attached.isSigned.isVerifiedUnmatched.bottom {
1887 border-bottom: 1px solid var(--color-warning-border);
1888}
1889
1890.repository .release-tag-name .ui.label.isSigned,
1891.repository .release-list-title .ui.label.isSigned {
1892 padding: 0 0.5em;
1893 box-shadow: none;
1894}
1895
1896.repository .release-tag-name .ui.label.isSigned .avatar,
1897.repository .release-list-title .ui.label.isSigned .avatar {
1898 margin-left: .5rem;
1899}
1900
1901.repository .release-tag-name .ui.label.isSigned.isVerified,
1902.repository .release-list-title .ui.label.isSigned.isVerified {
1903 border: 1px solid var(--color-success-border);
1904 background-color: var(--color-success-bg);
1905 color: var(--color-success-text);
1906}
1907
1908.repository .release-tag-name .ui.label.isSigned.isWarning,
1909.repository .release-list-title .ui.label.isSigned.isWarning {
1910 border: 1px solid var(--color-warning-border);
1911 background-color: var(--color-warning-bg);
1912 color: var(--color-warning-text);
1913}
1914
1915.repository .segment.reactions.dropdown .menu,
1916.repository .select-reaction.dropdown .menu {
1917 right: 0 !important;
1918 left: auto !important;
1919 min-width: 170px;
1920}
1921
1922.repository .segment.reactions.dropdown .menu > .header,
1923.repository .select-reaction.dropdown .menu > .header {
1924 margin: 0.75rem 0 0.5rem;
1925}
1926
1927.repository .segment.reactions.dropdown .menu > .item,
1928.repository .select-reaction.dropdown .menu > .item {
1929 float: left;
1930 margin: 4px;
1931 font-size: 20px;
1932 width: 34px;
1933 height: 34px;
1934 min-height: 0 !important;
1935 border-radius: var(--border-radius);
1936 display: flex !important;
1937 align-items: center;
1938 justify-content: center;
1939}
1940
1941.repository .segment.reactions {
1942 padding: 0;
1943 display: flex;
1944 border: none !important;
1945 border-top: 1px solid var(--color-secondary) !important;
1946 width: 100% !important;
1947 max-width: 100% !important;
1948 margin: 0 !important;
1949 border-radius: 0 0 var(--border-radius) var(--border-radius);
1950}
1951
1952.repository .segment.reactions .ui.label {
1953 max-height: 40px;
1954 padding: 8px 16px !important;
1955 display: flex !important;
1956 align-items: center;
1957 border: 0;
1958 border-right: 1px solid;
1959 border-radius: 0;
1960 margin: 0;
1961 font-size: 12px;
1962 font-weight: var(--font-weight-normal);
1963 border-color: var(--color-secondary) !important;
1964 background: var(--color-reaction-bg);
1965}
1966
1967.repository .segment.reactions .ui.label:first-of-type {
1968 border-bottom-left-radius: 3px;
1969}
1970
1971.repository .segment.reactions .ui.label.disabled {
1972 cursor: default;
1973 opacity: 1;
1974}
1975
1976.repository .segment.reactions .ui.label.basic.primary {
1977 color: var(--color-primary) !important;
1978 background-color: var(--color-reaction-active-bg) !important;
1979 border-color: var(--color-secondary-dark-1) !important;
1980}
1981
1982.repository .segment.reactions .ui.label.basic:hover {
1983 background-color: var(--color-reaction-hover-bg) !important;
1984}
1985
1986.repository .segment.reactions .reaction-count {
1987 margin-left: 0.5rem;
1988}
1989
1990.repository .segment.reactions .select-reaction {
1991 display: flex;
1992 align-items: center;
1993}
1994
1995.repository .segment.reactions .select-reaction a {
1996 padding: 0 14px;
1997}
1998
1999.repository .segment.reactions .select-reaction:not(.active) a {
2000 display: none;
2001}
2002
2003.repository .segment.reactions:hover .select-reaction a {
2004 display: block;
2005}
2006
2007.repository .ui.fluid.action.input .ui.search.action.input {
2008 flex: auto;
2009}
2010
2011.repository .repository-summary {
2012 box-shadow: none;
2013}
2014
2015.repository .repository-summary .repository-menu {
2016 display: grid;
2017 grid-template-columns: repeat(4, 1fr);
2018 padding: 0;
2019}
2020
2021@media (max-width: 767.98px) {
2022 .repository .repository-summary .repository-menu {
2023 grid-template-rows: repeat(2, 1fr);
2024 grid-template-columns: repeat(2, 1fr);
2025 }
2026}
2027
2028.repository .repository-summary .segment.sub-menu {
2029 border: none;
2030 display: flex;
2031 align-items: center;
2032 padding: 0;
2033}
2034
2035.repository .repository-summary .item {
2036 flex: 1;
2037 height: 30px;
2038 line-height: var(--line-height-default);
2039 display: flex;
2040 align-items: center;
2041 justify-content: center;
2042 gap: 0.25em;
2043 text-decoration: none;
2044 border-radius: var(--border-radius);
2045}
2046
2047.repository .repository-summary .item.active {
2048 background: var(--color-secondary);
2049 font-weight: var(--font-weight-medium);
2050}
2051
2052.repository .repository-summary #language-stats-bar {
2053 display: flex;
2054 gap: 2px;
2055 padding: 0;
2056 height: 10px;
2057 white-space: nowrap;
2058 border-top-left-radius: 0 !important;
2059 border-top-right-radius: 0 !important;
2060 overflow: hidden;
2061}
2062
2063.size-overview .segment:has(> .bar) {
2064 display: flex;
2065 height: 10px;
2066 padding: 0;
2067 border-radius: 3px;
2068 overflow: hidden;
2069}
2070
2071#cite-repo-modal #citation-panel {
2072 display: flex;
2073 width: 100%;
2074}
2075
2076#cite-repo-modal #citation-panel input {
2077 border-radius: 0;
2078 padding: 5px 10px;
2079 width: 50%;
2080 line-height: 1.4;
2081}
2082
2083#cite-repo-modal #citation-panel #citation-copy-content {
2084 border-radius: 0;
2085 padding: 5px 10px;
2086 font-size: 1.2em;
2087 line-height: 1.4;
2088 flex: 1;
2089}
2090
2091#cite-repo-modal #citation-panel #citation-copy-bibtex {
2092 font-size: 13px;
2093 padding: 7.5px 5px;
2094 border-right: none;
2095}
2096
2097#cite-repo-modal #citation-panel #goto-citation-btn {
2098 border-left: none;
2099}
2100
2101#cite-repo-modal #citation-panel > :first-child {
2102 border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
2103}
2104
2105#cite-repo-modal #citation-panel > :last-child {
2106 border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
2107}
2108
2109#cite-repo-modal #citation-panel .icon.button {
2110 padding: 0 10px;
2111}
2112
2113.user-cards .list {
2114 display: grid;
2115 grid-template-columns: repeat(3, 1fr);
2116 gap: 15px;
2117 margin: 0 0 10px;
2118 padding: 0;
2119}
2120
2121@media (max-width: 767.98px) {
2122 .user-cards .list {
2123 grid-template-columns: repeat(1, 1fr);
2124 }
2125}
2126
2127@media (max-width: 900px) {
2128 .user.profile .user-cards .list {
2129 grid-template-columns: repeat(1, 1fr);
2130 }
2131}
2132
2133.user-cards .list .card {
2134 display: flex;
2135 flex-direction: row;
2136 width: 100%;
2137 margin: 0;
2138 padding: 14px;
2139 border-radius: 0.28571429rem;
2140 border: 1px solid var(--color-secondary);
2141 background: var(--color-box-body);
2142}
2143
2144.user-cards .list .card .avatar {
2145 width: 48px;
2146 height: 48px;
2147 margin-right: 14px;
2148}
2149
2150.user-cards .list .card .name {
2151 margin-top: 0;
2152 margin-bottom: 0;
2153 font-weight: var(--font-weight-normal);
2154}
2155
2156.user-cards .list .card .meta {
2157 margin-top: 5px;
2158}
2159
2160#search-user-box .results .result .image {
2161 order: 0;
2162 margin-right: 12px;
2163 width: 2em;
2164 height: 2em;
2165 min-width: 2em;
2166 min-height: 2em;
2167}
2168
2169#search-user-box .results .result .content {
2170 margin: 0; /* remove margin reserved for avatar because we move it to left via `order: 0` */
2171}
2172
2173.ui.menu .item > img:not(.ui) {
2174 width: auto;
2175}
2176
2177.page.buttons {
2178 padding-top: 15px;
2179}
2180
2181.commit-header-row,
2182.tag-signature-row {
2183 min-height: 50px !important;
2184 padding-top: 0 !important;
2185 padding-bottom: 0 !important;
2186}
2187
2188.ui.attached.message.tag-signature-row {
2189 border-radius: var(--border-radius);
2190}
2191
2192.tag-signature-row div {
2193 margin-top: auto !important;
2194 margin-bottom: auto !important;
2195 display: inline-block !important;
2196}
2197
2198.commit-header-buttons {
2199 display: flex;
2200 gap: 4px;
2201 align-items: flex-start;
2202 white-space: nowrap;
2203}
2204
2205@media (max-width: 767.98px) {
2206 .commit-header-buttons {
2207 flex-direction: column;
2208 align-items: stretch;
2209 }
2210}
2211
2212.settings.webhooks .list > .item:not(:first-child),
2213.settings.githooks .list > .item:not(:first-child),
2214.settings.actions .list > .item:not(:first-child) {
2215 padding: 0.25rem 1rem;
2216 margin: 12px -1rem -1rem;
2217}
2218
2219.settings .list > .item:not(:first-child) {
2220 border-top: 1px solid var(--color-secondary);
2221 padding: 1rem;
2222 margin: 16px -1rem -1rem;
2223}
2224
2225.settings .list > .item > .svg {
2226 display: table-cell;
2227}
2228
2229.settings .list > .item > .svg + .content {
2230 display: table-cell;
2231 padding: 0 0 0 0.5em;
2232 vertical-align: top;
2233}
2234
2235.settings .list > .item .info {
2236 margin-top: 10px;
2237}
2238
2239.settings .list > .item .info .tab.segment {
2240 border: 0;
2241 padding: 10px 0 0;
2242}
2243
2244.ui.vertical.menu .header.item {
2245 font-size: 1.1em;
2246 background: var(--color-box-header);
2247}
2248
2249.comment:target .comment-container {
2250 border-color: var(--color-primary) !important;
2251 box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
2252}
2253
2254.comment:target .header::before {
2255 border-right-color: var(--color-primary) !important;
2256 filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
2257}
2258
2259.code-comment:target,
2260.diff-file-box:target {
2261 border-color: var(--color-primary) !important;
2262 border-radius: var(--border-radius) !important;
2263 box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
2264}
2265
2266.code-comment:target .content {
2267 box-shadow: none !important;
2268}
2269
2270.comment-header {
2271 border: none !important;
2272 background: var(--color-box-header);
2273 border-bottom: 1px solid var(--color-secondary) !important;
2274 font-weight: var(--font-weight-normal) !important;
2275 margin: 0 !important;
2276 position: relative;
2277 color: var(--color-text);
2278 min-height: var(--repo-header-issue-min-height);
2279 background-color: var(--color-box-header);
2280 display: flex;
2281 justify-content: space-between;
2282 align-items: center;
2283}
2284
2285.timeline .ui.comment-header {
2286 padding: 0.25rem 0.75rem;
2287}
2288
2289.comment-header::before,
2290.comment-header::after {
2291 right: 100%;
2292 top: 20px;
2293 border: solid transparent;
2294 content: " ";
2295 height: 0;
2296 width: 0;
2297 position: absolute;
2298 pointer-events: none;
2299}
2300
2301.comment-header::before {
2302 border-right-color: var(--color-secondary);
2303 border-width: 9px;
2304 margin-top: -9px;
2305}
2306
2307.comment-header::after {
2308 border-right-color: var(--color-box-header);
2309 border-width: 8px;
2310 margin-top: -8px;
2311}
2312
2313.comment-header.arrow-top::before,
2314.comment-header.arrow-top::after {
2315 transform: rotate(90deg);
2316}
2317
2318.comment-header.arrow-top::before {
2319 top: -9px;
2320 left: 6px;
2321}
2322
2323.comment-header.arrow-top::after {
2324 top: -8px;
2325 left: 7px;
2326}
2327
2328.comment-header .actions a:not(.label) {
2329 padding: 0.5rem !important;
2330}
2331
2332.comment-header .actions .label {
2333 margin: 0 !important;
2334}
2335
2336.comment-header-left,
2337.comment-header-right {
2338 gap: 4px;
2339}
2340
2341.comment-body {
2342 background: var(--color-box-body);
2343 border: none !important;
2344 width: 100% !important;
2345 max-width: 100% !important;
2346 margin: 0 !important;
2347 padding: 1em;
2348}
2349
2350.edit-label.modal .form .column,
2351.new-label.modal .form .column {
2352 padding-right: 0;
2353}
2354
2355.edit-label.modal .form .buttons,
2356.new-label.modal .form .buttons {
2357 margin-left: auto;
2358 padding-top: 15px;
2359}
2360
2361.stats-table {
2362 display: table;
2363 width: 100%;
2364 margin: 6px 0;
2365 border-spacing: 2px;
2366}
2367
2368.stats-table .table-cell {
2369 display: table-cell;
2370}
2371
2372.stats-table .table-cell.tiny {
2373 height: 8px;
2374}
2375
2376.stats-table .table-cell:first-child {
2377 border-top-left-radius: 4px;
2378 border-bottom-left-radius: 4px;
2379}
2380
2381.stats-table .table-cell:last-child {
2382 border-top-right-radius: 4px;
2383 border-bottom-right-radius: 4px;
2384}
2385
2386.labels-list {
2387 display: inline-flex;
2388 flex-wrap: wrap;
2389 gap: 2.5px;
2390 align-items: center;
2391}
2392
2393.labels-list .label {
2394 padding: 0 6px;
2395 min-height: 20px;
2396 line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */
2397}
2398
2399/* Scoped labels with different colors on left and right */
2400.ui.label.scope-parent {
2401 background: none !important;
2402 padding: 0 !important;
2403 gap: 0 !important;
2404}
2405
2406.ui.label.scope-left {
2407 border-bottom-right-radius: 0;
2408 border-top-right-radius: 0;
2409 margin-right: 0;
2410}
2411
2412.ui.label.scope-right {
2413 border-bottom-left-radius: 0;
2414 border-top-left-radius: 0;
2415 margin-left: 0;
2416}
2417
2418.archived-label {
2419 filter: grayscale(0.25) saturate(0.75);
2420}
2421
2422.repo-button-row {
2423 margin: 10px 0;
2424 display: flex;
2425 align-items: center;
2426 gap: 0.5em;
2427 flex-wrap: wrap;
2428 justify-content: space-between;
2429}
2430
2431.repo-button-row .button {
2432 padding: 6px 10px !important;
2433 height: 30px;
2434}
2435
2436.repo-button-row .button.dropdown:not(.icon) {
2437 padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */
2438}
2439
2440.repo-button-row .button strong {
2441 /* Workaround where 'overflow: hidden' is clipping the y-axis, force a small amount of extra padding in the y-axis. */
2442 padding: .1em 0;
2443}
2444
2445.repo-button-row input {
2446 height: 30px;
2447}
2448
2449tbody.commit-list {
2450 vertical-align: baseline;
2451}
2452
2453.message-wrapper,
2454.author-wrapper {
2455 overflow: hidden;
2456 text-overflow: ellipsis;
2457 max-width: 100%;
2458 display: inline-block;
2459 vertical-align: middle;
2460}
2461
2462.author-wrapper {
2463 max-width: 180px;
2464 align-self: center;
2465 white-space: nowrap;
2466}
2467
2468/* in the commit list, messages can wrap so we can use inline */
2469.commit-list .message-wrapper {
2470 display: inline;
2471 overflow-wrap: anywhere;
2472}
2473
2474/* but in the repo-files-table we cannot */
2475#repo-files-table .commit-list .message-wrapper {
2476 display: inline-block;
2477}
2478
2479@media (max-width: 767.98px) {
2480 tr.commit-list {
2481 width: 100%;
2482 }
2483 .author-wrapper {
2484 max-width: 80px;
2485 }
2486}
2487
2488@media (min-width: 768px) and (max-width: 991.98px) {
2489 tr.commit-list {
2490 width: 723px;
2491 }
2492}
2493
2494@media (min-width: 992px) and (max-width: 1200px) {
2495 tr.commit-list {
2496 width: 933px;
2497 }
2498}
2499
2500@media (min-width: 1201px) {
2501 tr.commit-list {
2502 width: 1127px;
2503 }
2504}
2505
2506.commit-body {
2507 margin: 0.25em 0;
2508 white-space: pre-wrap;
2509 overflow-wrap: anywhere;
2510 line-height: initial;
2511}
2512
2513.git-notes.top {
2514 text-align: left;
2515}
2516
2517.comment-diff-data {
2518 background: var(--color-code-bg);
2519 min-height: 12em;
2520 max-height: calc(100vh - 10.5rem);
2521 overflow-y: auto;
2522 tab-size: 4;
2523}
2524
2525.comment-diff-data pre {
2526 line-height: 18px;
2527 margin: 1em;
2528 white-space: pre-wrap;
2529 word-break: break-all;
2530 overflow-wrap: break-word;
2531}
2532
2533.content-history-detail-dialog .header .avatar {
2534 position: relative;
2535 top: -2px;
2536}
2537
2538#repo-topics .repo-topic {
2539 font-weight: var(--font-weight-normal);
2540 cursor: pointer;
2541 margin: 0;
2542}
2543
2544#new-dependency-drop-list.ui.selection.dropdown {
2545 min-width: 0;
2546 width: 100%;
2547 border-radius: var(--border-radius) 0 0 var(--border-radius);
2548 border-right: 0;
2549 white-space: nowrap;
2550}
2551
2552#new-dependency-drop-list .text {
2553 width: 100%;
2554 overflow: hidden;
2555}
2556
2557.tag-code {
2558 height: 28px;
2559}
2560
2561.tag-code,
2562.tag-code td,
2563.tag-code .blob-excerpt {
2564 background-color: var(--color-box-body-highlight);
2565 vertical-align: middle;
2566}
2567
2568.resolved-placeholder {
2569 font-weight: var(--font-weight-normal) !important;
2570 border: 1px solid var(--color-secondary) !important;
2571 border-radius: var(--border-radius) !important;
2572 margin: 4px !important;
2573}
2574
2575.resolved-placeholder + .comment-code-cloud {
2576 padding-top: 0 !important;
2577}
2578
2579.blob-excerpt {
2580 background-color: var(--color-secondary-alpha-30);
2581}
2582
2583.issue-keyword {
2584 border-bottom: 1px dotted var(--color-text-light-3) !important;
2585}
2586
2587.issue-keyword:hover {
2588 border-bottom: none !important;
2589}
2590
2591.file-header {
2592 align-items: center;
2593 display: flex;
2594 justify-content: space-between;
2595 overflow-x: auto;
2596 padding: 6px 12px !important;
2597 font-size: 13px !important;
2598}
2599
2600.file-info {
2601 display: flex;
2602 align-items: center;
2603}
2604
2605.file-info-entry {
2606 display: flex;
2607 align-items: center;
2608 width: max-content;
2609}
2610
2611.file-info-entry + .file-info-entry {
2612 border-left: 1px solid currentcolor;
2613 margin-left: 8px;
2614 padding-left: 8px;
2615}
2616
2617#diff-container {
2618 display: flex;
2619}
2620
2621#diff-file-boxes {
2622 flex: 1;
2623 max-width: 100%;
2624 display: flex;
2625 flex-direction: column;
2626 gap: 8px;
2627}
2628
2629#diff-file-tree {
2630 flex: 0 0 20%;
2631 max-width: 380px;
2632 line-height: inherit;
2633 position: sticky;
2634 padding-top: 0;
2635 top: 47px;
2636 max-height: calc(100vh - 47px);
2637 height: 100%;
2638 overflow-y: auto;
2639}
2640
2641.ui.message.unicode-escape-prompt {
2642 margin-bottom: 0;
2643 border-radius: 0;
2644 display: flex;
2645 flex-direction: column;
2646}
2647
2648/* fomantic's last-child selector does not work with hidden last child */
2649.ui.buttons .unescape-button {
2650 border-top-right-radius: 0.28571429rem;
2651 border-bottom-right-radius: 0.28571429rem;
2652}
2653
2654.webhook-info {
2655 padding: 7px 12px;
2656 margin: 10px 0;
2657 background-color: var(--color-markup-code-block);
2658 border: 1px solid var(--color-secondary);
2659 border-radius: var(--border-radius);
2660 font-size: 13px;
2661 line-height: 1.5;
2662 overflow: auto;
2663}
2664
2665.title_wip_desc {
2666 margin-top: 1em;
2667}
2668
2669.sidebar-item-link {
2670 display: inline-flex;
2671 align-items: center;
2672 overflow-wrap: anywhere;
2673}
2674
2675.diff-file-header {
2676 padding: 5px 8px !important;
2677}
2678
2679.diff-file-box[data-folded="true"] .diff-file-body {
2680 display: none;
2681}
2682
2683.diff-file-box[data-folded="true"] .diff-file-header {
2684 border-radius: var(--border-radius) !important;
2685}
2686
2687.ui.attached.header.diff-file-header.sticky-2nd-row {
2688 position: sticky;
2689 top: 44px; /* match .repository .diff-detail-box */
2690 z-index: 7;
2691}
2692
2693.diff-file-name {
2694 flex: auto;
2695 min-width: 100px;
2696}
2697
2698.diff-file-name .ui.label {
2699 margin-left: 0 !important;
2700}
2701
2702.diff-stats-bar {
2703 display: inline-block;
2704 background-color: var(--color-red);
2705 height: 12px;
2706 width: 44px;
2707}
2708
2709.diff-stats-bar .diff-stats-add-bar {
2710 background-color: var(--color-green);
2711 height: 100%;
2712}
2713
2714.ui.form .right .ui.button {
2715 margin-left: 0.25em;
2716 margin-right: 0;
2717}
2718
2719.removed-code {
2720 background: var(--color-diff-removed-word-bg);
2721}
2722
2723.added-code {
2724 background: var(--color-diff-added-word-bg);
2725}
2726
2727.code-diff-unified .del-code,
2728.code-diff-unified .del-code td,
2729.code-diff-split .del-code .lines-num-old,
2730.code-diff-split .del-code .lines-escape-old,
2731.code-diff-split .del-code .lines-type-marker-old,
2732.code-diff-split .del-code .lines-code-old {
2733 background: var(--color-diff-removed-row-bg);
2734 border-color: var(--color-diff-removed-row-border);
2735}
2736
2737.code-diff-unified .add-code,
2738.code-diff-unified .add-code td,
2739.code-diff-split .add-code .lines-num-new,
2740.code-diff-split .add-code .lines-type-marker-new,
2741.code-diff-split .add-code .lines-escape-new,
2742.code-diff-split .add-code .lines-code-new,
2743.code-diff-split .del-code .add-code.lines-num-new,
2744.code-diff-split .del-code .add-code.lines-type-marker-new,
2745.code-diff-split .del-code .add-code.lines-escape-new,
2746.code-diff-split .del-code .add-code.lines-code-new {
2747 background: var(--color-diff-added-row-bg);
2748 border-color: var(--color-diff-added-row-border);
2749}
2750
2751.code-diff-split .del-code .lines-num-new,
2752.code-diff-split .del-code .lines-type-marker-new,
2753.code-diff-split .del-code .lines-code-new,
2754.code-diff-split .del-code .lines-escape-new,
2755.code-diff-split .add-code .lines-num-old,
2756.code-diff-split .add-code .lines-escape-old,
2757.code-diff-split .add-code .lines-type-marker-old,
2758.code-diff-split .add-code .lines-code-old {
2759 background: var(--color-diff-inactive);
2760}
2761
2762.code-diff-split tbody tr td:nth-child(5),
2763.code-diff-split tbody tr td.add-comment-right {
2764 border-left: 1px solid var(--color-secondary);
2765}
2766
2767.migrate-entries {
2768 display: grid !important;
2769 grid-template-columns: repeat(3, 1fr);
2770 gap: 25px;
2771 margin: 0 !important;
2772}
2773
2774@media (max-width: 767.98px) {
2775 .migrate-entries {
2776 grid-template-columns: repeat(1, 1fr);
2777 }
2778}
2779
2780.migrate-entry {
2781 transition: all 0.1s ease-in-out;
2782 box-shadow: none !important;
2783 border: 1px solid var(--color-secondary);
2784 color: var(--color-text) !important;
2785 width: auto !important;
2786 margin: 0 !important;
2787}
2788
2789.migrate-entry:hover {
2790 transform: scale(105%);
2791 box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
2792}
2793
2794.migrate-entry .description {
2795 text-wrap: balance;
2796}
2797
2798.commits-table .commits-table-right form {
2799 display: flex;
2800 align-items: center;
2801 gap: 0.75em;
2802 justify-content: center;
2803 flex-wrap: wrap;
2804}
2805
2806@media (max-width: 767.98px) {
2807 .repository.file.list #repo-files-table .entry,
2808 .repository.file.list #repo-files-table .commit-list {
2809 align-items: center;
2810 display: flex !important;
2811 padding-top: 4px;
2812 padding-bottom: 4px;
2813 }
2814 .repository.file.list #repo-files-table .entry td.age,
2815 .repository.file.list #repo-files-table .commit-list td.age,
2816 .repository.file.list #repo-files-table .entry th.age,
2817 .repository.file.list #repo-files-table .commit-list th.age {
2818 margin-left: auto;
2819 }
2820 .repository.file.list #repo-files-table .entry td.message,
2821 .repository.file.list #repo-files-table .commit-list td.message,
2822 .repository.file.list #repo-files-table .entry span.commit-summary,
2823 .repository.file.list #repo-files-table .commit-list tr span.commit-summary {
2824 display: none !important;
2825 }
2826 .repository.view.issue .comment-list .timeline,
2827 .repository.view.issue .comment-list .timeline-item {
2828 margin-left: 0;
2829 }
2830 .repository.view.issue .comment-list .timeline::before {
2831 left: 14px;
2832 }
2833 .repository.view.issue .comment-list .timeline .inline-timeline-avatar {
2834 display: flex;
2835 margin-bottom: auto;
2836 margin-left: 6px;
2837 margin-right: 2px;
2838 }
2839 .repository.view.issue .comment-list .timeline .comment-header {
2840 padding-left: 4px;
2841 }
2842 .repository.view.issue .comment-list .timeline .comment-header::before,
2843 .repository.view.issue .comment-list .timeline .comment-header::after {
2844 content: unset;
2845 }
2846 /* Don't show the general avatar, we show the inline avatar on mobile.
2847 * And don't show the role labels, there's no place for that. */
2848 .repository.view.issue .comment-list .timeline .timeline-avatar,
2849 .repository.view.issue .comment-list .timeline .comment-header-right .role-label {
2850 display: none;
2851 }
2852 .commit-header-row .ui.horizontal.list {
2853 width: 100%;
2854 overflow-x: auto;
2855 margin-top: 2px;
2856 }
2857 .commit-header-row .ui.horizontal.list .item {
2858 align-items: center;
2859 display: flex;
2860 }
2861 .commit-header-row .author {
2862 padding: 3px 0;
2863 }
2864 .commit-header h3 {
2865 flex-basis: auto !important;
2866 margin-bottom: 0.5rem !important;
2867 }
2868 .commits-table {
2869 flex-direction: column;
2870 }
2871 .commits-table .commits-table-left {
2872 align-items: initial !important;
2873 }
2874 .commits-table .commits-table-right form > div:nth-child(1) {
2875 order: 1; /* the "commit search" input */
2876 }
2877 .commits-table .commits-table-right form > div:nth-child(2) {
2878 order: 3; /* the "search all" checkbox */
2879 }
2880 .commits-table .commits-table-right form > button:nth-child(3) {
2881 order: 2; /* the "search" button */
2882 }
2883 .commit-table {
2884 overflow-x: auto;
2885 }
2886 .commit-table td.sha,
2887 .commit-table th.sha {
2888 display: none !important;
2889 }
2890 .comment-header {
2891 flex-wrap: wrap;
2892 }
2893 .comment-header .comment-header-left {
2894 flex-wrap: wrap;
2895 }
2896 .comment-header .comment-header-right {
2897 margin-left: auto;
2898 }
2899}
2900
2901.branch-dropdown-button {
2902 max-width: 340px;
2903 vertical-align: bottom !important;
2904}
2905
2906@media (min-width: 768px) and (max-width: 991.98px) {
2907 .branch-dropdown-button {
2908 max-width: 185px;
2909 }
2910}
2911
2912@media (max-width: 767.98px) {
2913 .branch-dropdown-button {
2914 max-width: 165px;
2915 }
2916}
2917
2918.commit-status-header {
2919 /* reset the default ".ui.attached.header" styles, to use the outer border */
2920 border: none !important;
2921 /* add a bottom border to make sure there is always a divider between the header and list when the list is scrolling */
2922 border-bottom: 1px solid var(--color-secondary) !important;
2923 /* use negative margin to avoid the newly added border conflict with the list's top border */
2924 margin: 0 0 -1px !important;
2925}
2926
2927.commit-status-list {
2928 max-height: 240px; /* fit exactly 6 items, commit-status-item.height * 6 */
2929 overflow-x: hidden;
2930 transition: max-height .2s;
2931}
2932
2933.commit-status-item {
2934 height: 40px;
2935 padding: 0 10px;
2936 display: flex;
2937 gap: 8px;
2938 align-items: center;
2939}
2940
2941.commit-status-item + .commit-status-item {
2942 border-top: 1px solid var(--color-secondary);
2943}
2944
2945.commit-status-item .commit-status {
2946 flex-shrink: 0;
2947}
2948
2949.commit-status-item .status-context {
2950 color: var(--color-text);
2951 flex: 1;
2952}
2953
2954.commit-status-item .status-details {
2955 display: flex;
2956 align-items: center;
2957 justify-content: flex-end;
2958 gap: 8px;
2959}
2960
2961@media (max-width: 767.98px) {
2962 .commit-status-item .status-details {
2963 flex-direction: column;
2964 align-items: flex-end;
2965 justify-content: center;
2966 }
2967}
2968
2969.commit-status-item .status-details > span {
2970 padding-right: 0.5em; /* To match the alignment with the "required" label */
2971}
2972
2973.search-fullname {
2974 color: var(--color-text-light-2);
2975}
2976
2977#issue-pins {
2978 display: grid;
2979 grid-template-columns: repeat(3, 1fr);
2980 gap: 8px;
2981 margin-bottom: 8px;
2982}
2983
2984@media (max-width: 767.98px) {
2985 #issue-pins {
2986 grid-template-columns: repeat(1, 1fr);
2987 }
2988}
2989
2990#cherry-pick-modal .scrolling.menu {
2991 max-height: 200px;
2992}
2993
2994/* Branch tag selector - TODO: Merge this into the same selector on repo page */
2995.repository .issue-content .issue-content-right .ui.grid .column.row {
2996 padding: 10px;
2997 padding-bottom: 0;
2998}
2999.repository .issue-content .issue-content-right .ui.grid .column.muted {
3000 padding: 0;
3001}
3002.repository .issue-content .issue-content-right .ui.grid .column.muted .text {
3003 display: inline-block;
3004 padding: 10px;
3005 width: 100%;
3006 text-align: center;
3007 border: 1px solid transparent;
3008 border-bottom: none;
3009}
3010.repository .issue-content .issue-content-right .ui.grid .column.muted .text.black {
3011 border-color: var(--color-secondary);
3012 background: var(--color-menu);
3013 border-top-left-radius: var(--border-radius);
3014 border-top-right-radius: var(--border-radius);
3015}
3016.repository .issue-content .issue-content-right .ui.dropdown .scrolling.menu {
3017 border-top: none;
3018}
3019.repository .issue-content .issue-content-right .branch-tag-divider {
3020 margin-top: -1px;
3021 border-top: 1px solid var(--color-secondary);
3022}
3023#issue-info-popup .emoji {
3024 font-size: inherit;
3025 line-height: inherit;
3026}
3027
3028#repo-activity-top-authors-chart {
3029 height: 150px; /* Pre-allocate the height that will be taken up by the chart, to avoid the container 'jumping'. */
3030}