oppi.li
1:root {
2 /* fonts */
3 --fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
4 --fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
5 --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
6 /* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */
7 --font-weight-light: 300;
8 --font-weight-normal: 400;
9 --font-weight-medium: 500;
10 --font-weight-semibold: 600;
11 --font-weight-bold: 700;
12 /* line-height: use the default value as "modules/normalize.css" */
13 --line-height-default: normal;
14 /* images */
15 --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>');
16 --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>');
17 --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
18 /* other variables */
19 --border-radius: 4px;
20 --border-radius-medium: 6px;
21 --border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
22 --opacity-disabled: 0.55;
23 --height-loading: 16rem;
24 --repo-header-issue-min-height: 41px;
25 --min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
26 --tab-size: 4;
27 --checkbox-size: 15px; /* height and width of checkbox and radio inputs */
28 --page-spacing: 16px; /* space between page elements */
29 --page-margin-x: 32px; /* minimum space on left and right side of page */
30 --button-spacing: 0.33rem;
31}
32
33@media (min-width: 768px) and (max-width: 1200px) {
34 :root {
35 --page-margin-x: 16px;
36 }
37}
38
39@media (max-width: 767.98px) {
40 :root {
41 --page-margin-x: 8px;
42 }
43}
44
45@media (pointer: coarse) {
46 :root {
47 --button-spacing: 0.5rem;
48 }
49}
50
51:root * {
52 --fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji);
53}
54
55*, ::before, ::after {
56 /* these are needed for tailwind borders to work because we do not load tailwind's base
57 https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css */
58 border-width: 0;
59 border-style: solid;
60 border-color: currentcolor;
61}
62
63html, body {
64 height: 100%;
65 font-size: 14px;
66}
67
68body {
69 line-height: 20px;
70 font-family: var(--fonts-regular);
71 color: var(--color-text);
72 background-color: var(--color-body);
73 tab-size: var(--tab-size);
74 display: flex;
75 flex-direction: column;
76 overflow-x: visible;
77 overflow-wrap: break-word;
78}
79
80textarea {
81 font-family: var(--fonts-regular);
82}
83
84pre,
85code,
86kbd,
87samp {
88 font-family: var(--fonts-monospace);
89}
90
91pre,
92code,
93kbd,
94samp,
95.tw-font-mono {
96 font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */
97}
98
99b,
100strong,
101h1,
102h2,
103h3,
104h4,
105h5,
106h6 {
107 font-weight: var(--font-weight-semibold);
108}
109
110h1,
111h2,
112h3,
113h4,
114h5 {
115 line-height: 1.28571429;
116 margin: calc(2rem - 0.1428571428571429em) 0 1rem;
117 font-weight: var(--font-weight-medium);
118 padding: 0;
119}
120
121h1 {
122 min-height: 1rem;
123 font-size: 2rem;
124}
125
126h2 {
127 font-size: 1.71428571rem;
128}
129
130h3 {
131 font-size: 1.28571429rem;
132}
133
134h4 {
135 font-size: 1.07142857rem;
136}
137
138h5 {
139 font-size: 1rem;
140}
141
142h1:first-child,
143h2:first-child,
144h3:first-child,
145h4:first-child,
146h5:first-child {
147 margin-top: 0;
148}
149
150h1:last-child,
151h2:last-child,
152h3:last-child,
153h4:last-child,
154h5:last-child {
155 margin-bottom: 0;
156}
157
158p {
159 margin: 0 0 1em;
160 line-height: 1.4285;
161}
162
163p:first-child {
164 margin-top: 0;
165}
166
167p:last-child {
168 margin-bottom: 0;
169}
170
171table {
172 border-collapse: collapse;
173}
174
175button {
176 cursor: pointer;
177}
178
179details summary {
180 cursor: pointer;
181}
182
183details summary > * {
184 display: inline;
185}
186
187progress {
188 background: var(--color-secondary-dark-1);
189 border-radius: var(--border-radius);
190 border: none;
191 overflow: hidden;
192}
193
194progress::-webkit-progress-bar {
195 background: var(--color-secondary-dark-1);
196}
197
198progress::-webkit-progress-value {
199 background-color: var(--color-accent);
200}
201
202progress::-moz-progress-bar {
203 background-color: var(--color-accent);
204}
205
206h1.error-code {
207 font-size: 15em;
208 font-weight: var(--font-weight-bold);
209 color: transparent;
210 --error-code-color-1: #a2a2a2;
211 --error-code-color-2: #797979;
212 --gradient: repeating-linear-gradient(45deg, var(--error-code-color-1), var(--error-code-color-1) 10px, var(--error-code-color-2) 10px, var(--error-code-color-2) 20px);
213 background: var(--gradient);
214 background-clip: text;
215}
216
217* {
218 caret-color: var(--color-caret);
219}
220
221::file-selector-button {
222 border: 1px solid var(--color-light-border);
223 color: var(--color-text-light);
224 background: var(--color-light);
225 border-radius: var(--border-radius);
226}
227
228::file-selector-button:hover {
229 color: var(--color-text);
230 background: var(--color-hover);
231}
232
233::selection {
234 background: var(--color-primary-light-1);
235 color: var(--color-white);
236}
237
238::placeholder,
239.ui.dropdown:not(.button) > .default.text,
240.ui.default.dropdown:not(.button) > .text {
241 color: var(--color-placeholder-text) !important;
242 opacity: 1 !important;
243}
244
245.unselectable,
246.button,
247.lines-num,
248.lines-commit,
249.lines-commit .blame-info,
250.ellipsis-button {
251 -webkit-touch-callout: none;
252 -webkit-user-select: none;
253 user-select: none;
254}
255
256.button-row {
257 gap: var(--button-spacing);
258}
259
260.button-sequence {
261 display: flex;
262 flex-flow: wrap;
263 gap: var(--button-spacing);
264}
265
266.button-sequence.right {
267 justify-content: end;
268}
269
270.button-sequence .ui.button {
271 margin: 0 !important;
272}
273
274.button-row .ui.button {
275 margin-right: 0;
276}
277
278.ui.partial.secondary.menu {
279 margin-bottom: 0;
280}
281
282a {
283 color: var(--color-primary);
284 cursor: pointer;
285 text-decoration-line: none;
286 text-decoration-skip-ink: all;
287}
288
289a:hover {
290 text-decoration-line: underline;
291}
292
293/* a = always colored, underlined on hover */
294/* a.muted = colored on hover, underlined on hover */
295/* a.suppressed = never colored, underlined on hover */
296/* a.silenced = never colored, never underlined */
297
298a.muted,
299a.suppressed,
300a.silenced,
301.muted-links a {
302 color: inherit;
303}
304
305a:hover,
306a.suppressed:hover,
307a.muted:hover,
308a.muted:hover [class*="color-text"],
309.muted-links a:hover {
310 color: var(--color-primary);
311}
312
313a.silenced:hover,
314a.suppressed:hover {
315 color: inherit;
316}
317
318a.silenced:hover {
319 text-decoration-line: none;
320}
321
322a.label,
323.ui.search .results a,
324.ui .menu a,
325.ui.cards a.card,
326.issue-keyword a {
327 text-decoration-line: none !important;
328}
329
330.ui.search > .results {
331 background: var(--color-body);
332 border-color: var(--color-secondary);
333 overflow-wrap: anywhere; /* allow text to wrap as fomantic limits this to 18em width */
334}
335
336.ui.search > .results .result {
337 background: var(--color-body);
338 border-color: var(--color-secondary);
339 display: flex;
340 align-items: center;
341}
342
343.ui.search > .results .result .title {
344 color: var(--color-text-dark);
345}
346
347.ui.search > .results .result .description {
348 color: var(--color-text-light-2);
349}
350
351.ui.search > .results .result .image {
352 width: auto;
353 height: auto;
354}
355
356.ui.search > .results .result:hover,
357.ui.category.search > .results .category .result:hover {
358 background: var(--color-hover);
359}
360
361.inline-code-block {
362 padding: 2px 4px;
363 border-radius: .24em;
364 background-color: var(--color-label-bg);
365}
366
367.ui.menu {
368 display: flex;
369}
370
371.ui.menu,
372.ui.vertical.menu {
373 background: var(--color-menu);
374 border-color: var(--color-secondary);
375 box-shadow: none;
376}
377
378.ui.menu .item {
379 color: var(--color-text);
380 user-select: auto;
381 line-height: var(--line-height-default); /* fomantic uses "1" which causes overflow problems because "1" doesn't consider the descent part */
382}
383
384.ui.menu .item > .svg {
385 margin-right: 0.35em;
386}
387
388.ui.menu .dropdown.item:hover,
389.ui.menu a.item:hover,
390.ui.menu details.item summary:hover {
391 color: var(--color-text);
392 background: var(--color-hover);
393}
394
395.ui.menu .active.item,
396.ui.menu .active.item:hover,
397.ui.vertical.menu .active.item,
398.ui.vertical.menu .active.item:hover {
399 color: var(--color-text);
400 background: var(--color-active);
401}
402
403.ui.menu a.item:active {
404 color: var(--color-text);
405 background: none;
406}
407
408.ui.ui.menu .item.disabled {
409 color: var(--color-text-light-3);
410}
411
412.ui.menu .item::before, .ui.vertical.menu .item::before {
413 background: var(--color-secondary);
414}
415
416/* sub menu of vertical menu */
417.ui.vertical.menu .item .menu .item {
418 color: var(--color-text-light-2);
419 text-indent: 16px;
420}
421
422.ui.vertical.menu .item .menu .item:hover,
423.ui.vertical.menu .item .menu a.item:hover {
424 color: var(--color-text-light-1);
425}
426
427.ui.vertical.menu .item .menu .active.item {
428 color: var(--color-text);
429}
430
431/* slightly more contrast for filters on issue list */
432.ui.ui.menu .dropdown.item.disabled {
433 color: var(--color-text-light-2);
434}
435
436.ui.dropdown .menu {
437 background: var(--color-menu);
438 border-color: var(--color-secondary);
439}
440
441.ui.dropdown .menu > .header:not(.ui) {
442 color: var(--color-text);
443}
444
445.ui.dropdown .menu > .item {
446 color: var(--color-text);
447 overflow: hidden;
448 text-overflow: ellipsis;
449}
450
451.ui.dropdown .menu > .item:hover {
452 color: var(--color-text);
453 background: var(--color-hover);
454}
455
456.ui.dropdown .menu > .item:active {
457 color: var(--color-text);
458 background: var(--color-active);
459}
460
461.ui.dropdown .menu .active.item {
462 color: var(--color-text);
463 background: var(--color-active);
464 border-radius: 0;
465 font-weight: var(--font-weight-normal);
466}
467
468/* fix misaligned images in webhook dropdown */
469.ui.dropdown .menu > .item > img {
470 margin-top: -0.25rem;
471 margin-bottom: -0.25rem;
472}
473.ui.dropdown .menu > .item > svg {
474 margin-right: .78rem; /* use the same margin as for <img> */
475}
476
477.ui.selection.dropdown .menu > .item {
478 border-color: var(--color-secondary);
479 white-space: nowrap;
480}
481
482.ui.selection.visible.dropdown > .text:not(.default) {
483 color: var(--color-text);
484}
485
486.ui.dropdown.selected,
487.ui.dropdown .menu .selected.item {
488 color: var(--color-text);
489 background: var(--color-hover);
490}
491
492.ui.menu .ui.dropdown .menu > .selected.item {
493 color: var(--color-text) !important;
494 background: var(--color-hover) !important;
495}
496
497.ui.dropdown .menu > .message:not(.ui) {
498 color: var(--color-text-light-2);
499}
500
501/* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
502.ui.dropdown > .text > .img {
503 margin-left: 0;
504 float: none;
505 margin-right: 0.78571429rem;
506}
507
508.ui.dropdown > .text > .description,
509.ui.dropdown .menu > .item > .description {
510 color: var(--color-text-light-2);
511}
512
513/* replace item margin on secondary menu items with gap and remove both the
514 negative margins on the menu as well as margin on the items */
515.ui.secondary.menu {
516 margin-left: 0;
517 margin-right: 0;
518 gap: .35714286em;
519}
520.ui.secondary.menu .item {
521 margin-left: 0;
522 margin-right: 0;
523}
524
525.ui.secondary.menu .dropdown.item:hover,
526.ui.secondary.menu a.item:hover {
527 color: var(--color-text);
528 background: var(--color-hover);
529}
530
531.ui.secondary.menu .active.item,
532.ui.secondary.menu .active.item:hover {
533 color: var(--color-text);
534 background: var(--color-active);
535}
536
537.ui.secondary.menu.tight .item {
538 padding-left: 0.85714286em;
539 padding-right: 0.85714286em;
540}
541
542/* remove the menu clearfix so that it won't add undesired gaps when using "gap" */
543.ui.menu::after {
544 content: normal;
545}
546
547.ui.menu .dropdown.item .menu {
548 background: var(--color-body);
549}
550
551.ui.menu .ui.dropdown .menu > .item {
552 color: var(--color-text) !important;
553}
554
555.ui.menu .ui.dropdown .menu > .item:hover {
556 color: var(--color-text) !important;
557 background: var(--color-hover) !important;
558}
559
560.ui.menu .ui.dropdown .menu > .active.item {
561 color: var(--color-text) !important;
562 background: var(--color-active) !important;
563}
564
565.ui.form textarea:not([rows]) {
566 height: var(--min-height-textarea); /* override fomantic default 12em */
567 min-height: var(--min-height-textarea); /* override fomantic default 8em */
568}
569
570/* styles from removed fomantic transition module */
571.hidden.transition {
572 visibility: hidden;
573 display: none;
574}
575.visible.transition {
576 display: block !important;
577 visibility: visible !important;
578}
579
580.ui.selection.active.dropdown,
581.ui.selection.active.dropdown:hover,
582.ui.selection.active.dropdown .menu,
583.ui.selection.active.dropdown:hover .menu {
584 border-color: var(--color-primary);
585}
586
587.ui.pointing.dropdown > .menu:not(.hidden)::after {
588 background: var(--color-menu);
589 box-shadow: -1px -1px 0 0 var(--color-secondary);
590}
591
592.ui.pointing.upward.dropdown .menu::after,
593.ui.top.pointing.upward.dropdown .menu::after {
594 box-shadow: 1px 1px 0 0 var(--color-secondary);
595}
596
597.ui.comments .comment .text {
598 margin: 0;
599}
600
601.ui.comments .comment .text,
602.ui.comments .comment .author {
603 color: var(--color-text);
604}
605
606.ui.comments .comment a.author:hover {
607 color: var(--color-primary);
608}
609
610.ui.comments .comment .metadata {
611 color: var(--color-text-light-2);
612}
613
614.ui.comments .comment .actions a {
615 color: var(--color-text-light);
616}
617
618.ui.comments .comment .actions a.active,
619.ui.comments .comment .actions a:hover {
620 color: var(--color-primary);
621}
622
623img.ui.avatar,
624.ui.avatar img,
625.ui.avatar svg {
626 border-radius: var(--border-radius);
627 object-fit: contain;
628 aspect-ratio: 1;
629}
630
631.ui.error.message .header,
632.ui.warning.message .header {
633 color: inherit;
634 filter: saturate(2);
635}
636
637.full.height {
638 flex-grow: 1;
639 padding-bottom: 80px;
640}
641
642/* add margin below .secondary nav when it is the first child */
643.page-content > :first-child.secondary-nav {
644 margin-bottom: 14px;
645}
646
647/* add margin to all pages when there is no .secondary.nav */
648.page-content > :first-child:not(.secondary-nav) {
649 margin-top: var(--page-spacing);
650}
651/* if .ui.grid is the first child the first grid-column has 'padding-top: 1rem' which we need
652 to compensate here */
653.page-content > :first-child.ui.grid {
654 margin-top: calc(var(--page-spacing) - 1rem);
655}
656
657.ui.pagination.menu .active.item {
658 color: var(--color-text);
659 background: var(--color-active);
660}
661
662.text.primary {
663 color: var(--color-primary) !important;
664}
665
666.text.red {
667 color: var(--color-red) !important;
668}
669
670.text.orange {
671 color: var(--color-orange) !important;
672}
673
674.text.yellow {
675 color: var(--color-yellow) !important;
676}
677
678.text.olive {
679 color: var(--color-olive) !important;
680}
681
682.text.green {
683 color: var(--color-green) !important;
684}
685
686.text.teal {
687 color: var(--color-teal) !important;
688}
689
690.text.blue {
691 color: var(--color-blue) !important;
692}
693
694.text.violet {
695 color: var(--color-violet) !important;
696}
697
698.text.purple {
699 color: var(--color-purple) !important;
700}
701
702.text.pink {
703 color: var(--color-pink) !important;
704}
705
706.text.brown {
707 color: var(--color-brown) !important;
708}
709
710.text.black {
711 color: var(--color-text) !important;
712}
713
714.text.grey {
715 color: var(--color-text-light) !important;
716}
717
718.text.light {
719 color: var(--color-text-light) !important;
720}
721
722.text.light-2 {
723 color: var(--color-text-light-2) !important;
724}
725
726.text.light-3 {
727 color: var(--color-text-light-3) !important;
728}
729
730.text.light.grey {
731 color: var(--color-grey-light) !important;
732}
733
734.text.gold {
735 color: var(--color-gold) !important;
736}
737
738.text.small {
739 font-size: 0.75em;
740}
741
742.ui.form .ui.button {
743 font-weight: var(--font-weight-normal);
744}
745
746/* replace fomantic popover box shadows */
747.ui.dropdown .menu,
748.ui.upward.dropdown > .menu,
749.ui.menu .dropdown.item .menu,
750.ui.selection.active.dropdown .menu,
751.ui.upward.selection.dropdown .menu,
752.ui.selection.active.dropdown:hover .menu,
753.ui.upward.active.selection.dropdown:hover .menu {
754 box-shadow: 0 6px 18px var(--color-shadow);
755}
756.ui.floating.dropdown .menu {
757 box-shadow: 0 6px 18px var(--color-shadow) !important;
758}
759
760/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */
761/* This fixes the commit graph button on the commits page */
762/* modal svg icons, copied from fomantic except width and height */
763/* center text in fomantic modal dialogs */
764.ui .menu:not(.vertical) .item > .button.compact {
765 padding: 0.58928571em 1.125em;
766}
767
768.ui .menu:not(.vertical) .item > .button.small {
769 font-size: 0.92857143rem;
770}
771
772.ui.menu .ui.dropdown.item .menu .item {
773 width: 100%;
774}
775
776.ui.dropdown .menu > .header {
777 font-size: 0.8em;
778}
779
780.ui .text.left {
781 text-align: left !important;
782}
783
784.ui .text.right {
785 text-align: right !important;
786}
787
788.ui .text.truncate {
789 overflow-x: hidden;
790 text-overflow: ellipsis;
791 white-space: nowrap;
792 display: inline-block;
793}
794
795.ui .message.flash-message {
796 text-align: center;
797}
798
799.ui .message > ul {
800 margin-left: auto;
801 margin-right: auto;
802 display: table;
803 text-align: left;
804}
805
806.ui .header > i + .content {
807 padding-left: 0.75rem;
808 vertical-align: middle;
809}
810
811.ui .form .autofill-dummy {
812 position: absolute;
813 width: 1px;
814 height: 1px;
815 overflow: hidden;
816 z-index: -10000;
817}
818
819.ui .form .sub.field {
820 margin-left: 25px;
821}
822
823.ui .sha.label {
824 font-family: var(--fonts-monospace);
825 font-size: 13px;
826 font-weight: var(--font-weight-normal);
827 margin: 0 6px;
828 padding: 5px 10px;
829 flex-shrink: 0;
830}
831
832.ui .sha.label .shortsha {
833 display: inline-block; /* not sure whether it is still needed */
834}
835
836.ui .button.truncate {
837 display: inline-block;
838 max-width: 100%;
839 overflow: hidden;
840 text-overflow: ellipsis;
841 vertical-align: top;
842 white-space: nowrap;
843 margin-right: 6px;
844}
845
846.ui.status.buttons .svg {
847 margin-right: 4px;
848}
849
850.ui.inline.delete-button {
851 padding: 8px 15px;
852 font-weight: var(--font-weight-normal);
853}
854
855.ui .background.red {
856 background-color: var(--color-red) !important;
857}
858
859.ui .background.blue {
860 background-color: var(--color-blue) !important;
861}
862
863.ui .background.black {
864 background-color: var(--color-black) !important;
865}
866
867.ui .background.grey {
868 background-color: var(--color-grey) !important;
869}
870
871.ui .background.light.grey {
872 background-color: var(--color-grey) !important;
873}
874
875.ui .background.green {
876 background-color: var(--color-green) !important;
877}
878
879.ui .background.purple {
880 background-color: var(--color-purple) !important;
881}
882
883.ui .background.yellow {
884 background-color: var(--color-yellow) !important;
885}
886
887.ui .background.orange {
888 background-color: var(--color-orange) !important;
889}
890
891.ui .background.gold {
892 background-color: var(--color-gold) !important;
893}
894
895.ui .migrate {
896 color: var(--color-text-light-2) !important;
897}
898
899.ui .migrate a {
900 color: var(--color-text-light) !important;
901}
902
903.ui .migrate a:hover {
904 color: var(--color-text) !important;
905}
906
907.ui .border {
908 border: 1px solid;
909}
910
911.ui .border.red {
912 border-color: var(--color-red) !important;
913}
914
915.ui .border.blue {
916 border-color: var(--color-blue) !important;
917}
918
919.ui .border.black {
920 border-color: var(--color-black) !important;
921}
922
923.ui .border.grey {
924 border-color: var(--color-grey) !important;
925}
926
927.ui .border.light.grey {
928 border-color: var(--color-grey) !important;
929}
930
931.ui .border.green {
932 border-color: var(--color-green) !important;
933}
934
935.ui .border.purple {
936 border-color: var(--color-purple) !important;
937}
938
939.ui .border.yellow {
940 border-color: var(--color-yellow) !important;
941}
942
943.ui .border.orange {
944 border-color: var(--color-orange) !important;
945}
946
947.ui .border.gold {
948 border-color: var(--color-gold) !important;
949}
950
951@media (max-width: 767.98px) {
952 .ui.pagination.menu .item:not(.active,.navigation),
953 .ui.pagination.menu .item.navigation span.navigation_label {
954 display: none;
955 }
956}
957
958.ui.pagination.menu.narrow .item {
959 padding-left: 8px;
960 padding-right: 8px;
961 min-width: 1em;
962 text-align: center;
963}
964
965.ui.pagination.menu.narrow .item .icon {
966 margin-right: 0;
967}
968
969.ui.floating.dropdown .overflow.menu .scrolling.menu.items {
970 border-radius: 0 !important;
971 box-shadow: none !important;
972 border-bottom: 1px solid var(--color-secondary);
973}
974
975.user-menu > .item {
976 width: 100%;
977 border-radius: 0 !important;
978}
979
980.scrolling.menu .item.selected {
981 font-weight: var(--font-weight-semibold) !important;
982}
983
984.ui.dropdown .scrolling.menu {
985 border-color: var(--color-secondary);
986}
987
988.color-preview {
989 display: inline-block;
990 margin-left: 0.4em;
991 height: 0.67em;
992 width: 0.67em;
993 border-radius: var(--border-radius);
994}
995
996.attention-icon {
997 margin: auto 0.5em auto 0;
998}
999
1000.attention-title {
1001 align-items: center;
1002 display: flex;
1003}
1004
1005blockquote.attention-note {
1006 border-left-color: var(--color-blue-dark-1);
1007}
1008strong.attention-note, svg.attention-note {
1009 color: var(--color-blue-dark-1);
1010}
1011
1012blockquote.attention-tip {
1013 border-left-color: var(--color-success-text);
1014}
1015strong.attention-tip, svg.attention-tip {
1016 color: var(--color-success-text);
1017}
1018
1019blockquote.attention-important {
1020 border-left-color: var(--color-violet-dark-1);
1021}
1022strong.attention-important, svg.attention-important {
1023 color: var(--color-violet-dark-1);
1024}
1025
1026blockquote.attention-warning {
1027 border-left-color: var(--color-warning-text);
1028}
1029strong.attention-warning, svg.attention-warning {
1030 color: var(--color-warning-text);
1031}
1032
1033blockquote.attention-caution {
1034 border-left-color: var(--color-red-dark-1);
1035}
1036strong.attention-caution, svg.attention-caution {
1037 color: var(--color-red-dark-1);
1038}
1039
1040.center:not(.popup) {
1041 text-align: center;
1042}
1043
1044overflow-menu {
1045 border-bottom: 1px solid var(--color-secondary) !important;
1046 display: flex;
1047}
1048
1049overflow-menu .overflow-menu-items {
1050 display: flex;
1051 flex: 1;
1052}
1053
1054overflow-menu .overflow-menu-items .item {
1055 margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
1056}
1057
1058overflow-menu .overflow-menu-items .item > .svg {
1059 align-self: baseline;
1060}
1061
1062overflow-menu .ui.label {
1063 margin-left: 7px !important; /* save some space */
1064}
1065
1066.activity-bar-graph {
1067 background-color: var(--color-primary);
1068 color: var(--color-primary-contrast);
1069}
1070
1071.archived-icon {
1072 color: var(--color-secondary-dark-2) !important;
1073}
1074
1075/* colors of colorful icons */
1076svg.text.green,
1077.text.green svg {
1078 color: var(--color-icon-green) !important;
1079}
1080svg.text.red,
1081.text.red svg {
1082 color: var(--color-icon-red) !important;
1083}
1084svg.text.purple,
1085.text.purple svg {
1086 color: var(--color-icon-purple) !important;
1087}
1088
1089.oauth2-authorize-application-box {
1090 margin-top: 3em !important;
1091}
1092
1093/* multiple radio or checkboxes as inline element */
1094.inline-grouped-list {
1095 display: inline-block;
1096 vertical-align: top;
1097}
1098
1099.inline-grouped-list > .ui {
1100 display: block;
1101 margin-top: 5px;
1102 margin-bottom: 10px;
1103}
1104
1105.inline-grouped-list > .ui:first-child {
1106 margin-top: 1px;
1107}
1108
1109.ui.menu .item > .label {
1110 background: var(--color-label-bg);
1111 color: var(--color-label-text);
1112}
1113
1114.ui.menu .active.item > .label,
1115.ui.menu.tabs-with-labels .item:hover > .label {
1116 background: var(--color-label-bg-alt, var(--color-label-bg));
1117}
1118
1119.lines-blame-btn {
1120 padding: 0 0 0 5px;
1121 display: flex;
1122 justify-content: center;
1123}
1124
1125.lines-num {
1126 padding: 0 8px;
1127 text-align: right !important;
1128 color: var(--color-text-light-2);
1129 width: 1%;
1130 font-family: var(--fonts-monospace);
1131}
1132
1133.lines-num span.bottom-line::after {
1134 border-bottom: 1px solid var(--color-secondary);
1135}
1136
1137.lines-num span::after {
1138 content: attr(data-line-number);
1139 line-height: 20px !important;
1140 padding: 0 10px;
1141 cursor: pointer;
1142 display: block;
1143}
1144
1145.lines-type-marker {
1146 vertical-align: top;
1147}
1148
1149.lines-num,
1150.lines-code {
1151 font-size: 12px;
1152 font-family: var(--fonts-monospace);
1153 line-height: 20px;
1154 padding-top: 0;
1155 padding-bottom: 0;
1156 vertical-align: top;
1157}
1158
1159.lines-num pre,
1160.lines-code pre,
1161.lines-num ol,
1162.lines-code ol {
1163 background-color: inherit;
1164 margin: 0;
1165 padding: 0 !important;
1166}
1167
1168.lines-num pre li,
1169.lines-code pre li,
1170.lines-num ol li,
1171.lines-code ol li {
1172 display: block;
1173 width: calc(100% - 1ch);
1174 padding-left: 1ch;
1175}
1176
1177.lines-escape {
1178 width: 0;
1179}
1180
1181.lines-code {
1182 padding-left: 5px;
1183}
1184
1185.file-view tr.active {
1186 color: inherit !important;
1187 background: inherit !important;
1188}
1189
1190.file-view tr.active .lines-num,
1191.file-view tr.active .lines-code {
1192 background: var(--color-highlight-bg) !important;
1193}
1194
1195.file-view tr.active:last-of-type .lines-code {
1196 border-bottom-right-radius: var(--border-radius);
1197}
1198
1199.file-view tr.active .lines-num {
1200 position: relative;
1201}
1202
1203.file-view tr.active .lines-num::before {
1204 content: "";
1205 position: absolute;
1206 left: 0;
1207 width: 2px;
1208 height: 100%;
1209 background: var(--color-highlight-fg);
1210}
1211
1212.code-inner {
1213 font: 12px var(--fonts-monospace);
1214 white-space: pre-wrap;
1215 word-break: break-all;
1216 overflow-wrap: anywhere;
1217 line-height: inherit; /* needed for inline code preview in markup */
1218}
1219
1220.blame .code-inner {
1221 white-space: pre-wrap;
1222 overflow-wrap: anywhere;
1223}
1224
1225.lines-commit {
1226 vertical-align: top;
1227 color: var(--color-text-light-1);
1228 padding: 0 !important;
1229 width: 1%;
1230}
1231
1232.lines-commit .blame-info {
1233 width: min(26vw, 300px);
1234 display: block;
1235 padding: 0 0 0 6px;
1236 line-height: 20px;
1237 box-sizing: content-box;
1238}
1239
1240.lines-commit .blame-info .blame-data {
1241 display: flex;
1242 font-family: var(--fonts-regular);
1243}
1244
1245.lines-commit .blame-info .blame-data .blame-message {
1246 flex-grow: 2;
1247 overflow: hidden;
1248 white-space: nowrap;
1249 text-overflow: ellipsis;
1250}
1251
1252.lines-commit .blame-info .blame-data .blame-time,
1253.lines-commit .blame-info .blame-data .blame-avatar {
1254 flex-shrink: 0;
1255}
1256
1257.blame-avatar {
1258 display: flex;
1259 align-items: center;
1260 margin-right: 4px;
1261}
1262
1263.top-line-blame {
1264 border-top: 1px solid var(--color-secondary);
1265}
1266
1267.code-view tr.top-line-blame:first-of-type {
1268 border-top: none;
1269}
1270
1271.lines-code .bottom-line,
1272.lines-commit .bottom-line {
1273 border-bottom: 1px solid var(--color-secondary);
1274}
1275
1276.code-view {
1277 background: var(--color-code-bg);
1278 border-radius: var(--border-radius);
1279}
1280
1281.code-view table {
1282 width: 100%;
1283}
1284
1285.migrate .svg.gitea-git {
1286 color: var(--color-git);
1287}
1288
1289.color-icon {
1290 display: inline-block;
1291 border-radius: var(--border-radius-full);
1292 height: 14px;
1293 width: 14px;
1294}
1295
1296.rss-icon {
1297 display: inline-flex;
1298 color: var(--color-text-light-1);
1299}
1300
1301table th[data-sortt-asc]:hover,
1302table th[data-sortt-desc]:hover {
1303 background: var(--color-hover) !important;
1304 cursor: pointer !important;
1305}
1306
1307table th[data-sortt-asc] .svg,
1308table th[data-sortt-desc] .svg {
1309 margin-left: 0.25rem;
1310}
1311
1312.ui.dropdown .menu .item {
1313 border-radius: 0;
1314}
1315
1316.ui.dropdown .menu .item:first-of-type {
1317 border-radius: var(--border-radius) var(--border-radius) 0 0;
1318}
1319
1320.ui.dropdown .menu .item:last-of-type {
1321 border-radius: 0 0 var(--border-radius) var(--border-radius);
1322}
1323
1324.ui.multiple.dropdown > .label {
1325 box-shadow: 0 0 0 1px var(--color-secondary) inset;
1326}
1327
1328.emoji,
1329.reaction {
1330 font-size: 1.25em;
1331 line-height: var(--line-height-default);
1332 font-style: normal !important;
1333 font-weight: var(--font-weight-normal) !important;
1334 vertical-align: -0.075em;
1335}
1336
1337.emoji img,
1338.reaction img {
1339 border-width: 0 !important;
1340 margin: 0 !important;
1341 width: 1em !important;
1342 height: 1em !important;
1343 vertical-align: -0.15em;
1344}
1345
1346.ui.tabular.menu {
1347 border-color: var(--color-secondary);
1348}
1349
1350.ui.tabular.menu .active.item,
1351.ui.tabular.menu .active.item:hover {
1352 background: var(--color-body);
1353 border-color: var(--color-secondary);
1354 color: var(--color-text);
1355}
1356
1357.ui.segment .ui.tabular.menu .active.item,
1358.ui.segment .ui.tabular.menu .active.item:hover {
1359 background: var(--color-box-body);
1360}
1361
1362.ui.secondary.pointing.menu {
1363 border-color: var(--color-secondary);
1364}
1365
1366.ui.tabular.menu .item {
1367 height: 100%;
1368}
1369
1370.ui.tabular.menu .item,
1371.ui.secondary.pointing.menu .item {
1372 padding: 11px 12px !important;
1373 color: var(--color-text-light-2);
1374}
1375
1376.ui.tabular.menu .item:hover,
1377.ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus {
1378 color: var(--color-text);
1379}
1380
1381.ui.secondary.pointing.menu .active.item,
1382.ui.secondary.pointing.menu .active.item:hover, .ui.secondary.pointing.menu .active.item:focus,
1383.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:focus {
1384 color: var(--color-text-dark);
1385}
1386
1387.ui.tabular.menu .active.item,
1388.ui.secondary.pointing.menu .active.item,
1389.resize-for-semibold::before {
1390 font-weight: var(--font-weight-semibold);
1391}
1392
1393.resize-for-semibold::before {
1394 content: attr(data-text);
1395 visibility: hidden;
1396 display: block;
1397 height: 0;
1398}
1399
1400.flash-error details code,
1401.flash-warning details code {
1402 display: block;
1403 text-align: left;
1404}
1405
1406.truncated-item-container {
1407 display: flex !important;
1408 align-items: center;
1409}
1410
1411.ellipsis-button {
1412 padding: 0 5px 8px !important;
1413 display: inline-block !important;
1414 font-weight: var(--font-weight-semibold) !important;
1415 line-height: 6px !important;
1416 vertical-align: middle !important;
1417}
1418
1419.truncated-item-name {
1420 line-height: 2;
1421 white-space: nowrap;
1422 overflow: hidden;
1423 text-overflow: ellipsis;
1424 margin-top: -0.5em;
1425 margin-bottom: -0.5em;
1426}
1427
1428.precolors {
1429 display: flex;
1430 flex-direction: column;
1431 justify-content: center;
1432 margin-left: 1em;
1433}
1434
1435.precolors .color {
1436 display: inline-block;
1437 width: 15px;
1438 height: 15px;
1439}
1440
1441.ui.dropdown:not(.button) {
1442 line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
1443}
1444
1445/* dropdown has some kinds of icons:
1446- "> .dropdown.icon": the arrow for opening the dropdown
1447- "> .remove.icon": the "x" icon for clearing the dropdown, only used in selection dropdown
1448- "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown
1449*/
1450
1451.ui.dropdown.mini.button,
1452.ui.dropdown.tiny.button {
1453 padding-right: 20px;
1454}
1455.ui.dropdown.button {
1456 padding-right: 22px;
1457}
1458.ui.dropdown.large.button {
1459 padding-right: 24px;
1460}
1461
1462/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
1463.ui.ui.dropdown > .icon.icon {
1464 position: initial; /* plain dropdown and button dropdown use flex layout for icons */
1465 padding: 0;
1466 margin: 0;
1467 height: auto;
1468}
1469
1470.ui.ui.dropdown > .icon.icon:hover {
1471 opacity: 1;
1472}
1473
1474.ui.ui.button.dropdown > .icon.icon,
1475.ui.ui.selection.dropdown > .icon.icon {
1476 position: absolute; /* selection dropdown uses absolute layout for icons */
1477 top: 50%;
1478 transform: translateY(-50%);
1479}
1480
1481.ui.ui.dropdown > .dropdown.icon {
1482 right: 0.5em;
1483}
1484
1485.ui.ui.dropdown > .remove.icon {
1486 right: 2em;
1487}
1488
1489.btn,
1490.ui.ui.button,
1491.ui.ui.dropdown,
1492.flex-items-inline > .item,
1493.flex-text-inline {
1494 display: inline-flex;
1495 align-items: center;
1496 gap: .25rem;
1497 vertical-align: middle;
1498 min-width: 0;
1499}
1500
1501.ui.ui.button {
1502 justify-content: center;
1503}
1504
1505.ui.dropdown .ui.label .svg {
1506 vertical-align: middle;
1507}
1508
1509.ui.ui.labeled.button {
1510 gap: 0;
1511 align-items: stretch;
1512}
1513
1514.flex-items-block > .item,
1515.flex-text-block {
1516 display: flex;
1517 align-items: center;
1518 gap: .25rem;
1519 min-width: 0;
1520}