oppi.li
1/* this contains override styles for buttons and related elements */
2
3/* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */
4.ui.button {
5 background: var(--color-button);
6 border: 1px solid var(--color-light-border);
7 color: var(--color-text);
8}
9
10.ui.button:hover,
11.ui.button:focus {
12 background: var(--color-hover);
13 color: var(--color-text);
14}
15
16.page-content .ui.button {
17 box-shadow: none !important;
18}
19
20.ui.active.button,
21.ui.button:active,
22.ui.active.button:active,
23.ui.active.button:hover,
24.ui.active.button:focus {
25 background: var(--color-active);
26 color: var(--color-text);
27}
28
29.delete-button,
30.delete-button:hover,
31.delete-button:focus {
32 color: var(--color-red);
33}
34
35/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
36
37.btn {
38 background: transparent;
39 border-radius: var(--border-radius);
40 border: none;
41 color: inherit;
42 margin: 0;
43 padding: 0;
44}
45
46.btn:hover,
47.btn:active,
48.btn:focus {
49 background: none;
50 border: none;
51}
52
53a.btn,
54a.btn:hover {
55 color: inherit;
56}
57
58/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
59And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
60It needs some tricks to tweak the left/right borders with active state */
61
62.ui.buttons .button {
63 border-right: none;
64}
65
66.ui.buttons .button:hover {
67 border-color: var(--color-secondary-dark-2);
68}
69
70.ui.buttons .button:hover + .button {
71 border-left: 1px solid var(--color-secondary-dark-2);
72}
73
74/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */
75.ui.buttons .button:first-child,
76.ui.buttons .button.tw-hidden:first-child + .button {
77 border-left: 1px solid var(--color-light-border);
78}
79
80.ui.buttons .button:last-child,
81.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) {
82 border-right: 1px solid var(--color-light-border);
83}
84
85.ui.buttons .button.active {
86 border-left: 1px solid var(--color-light-border);
87 border-right: 1px solid var(--color-light-border);
88}
89
90.ui.buttons .button.active + .button {
91 border-left: none;
92}
93
94.ui.basic.buttons .button,
95.ui.basic.button,
96.ui.basic.buttons .button:hover,
97.ui.basic.button:hover {
98 box-shadow: none;
99}
100
101/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
102 would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
103.ui.small.button:not(.compact):has(.svg) {
104 padding-top: 0.58928571em;
105 padding-bottom: 0.58928571em;
106}
107
108.ui.labeled.button.disabled > .button,
109.ui.basic.buttons .button,
110.ui.basic.button {
111 color: var(--color-text-light);
112 background: var(--color-button);
113}
114
115.ui.basic.buttons .button:hover,
116.ui.basic.button:hover,
117.ui.basic.buttons .button:focus,
118.ui.basic.button:focus {
119 color: var(--color-text);
120 background: var(--color-hover);
121 border-color: var(--color-secondary-dark-2);
122}
123
124.ui.basic.buttons .button:active,
125.ui.basic.button:active,
126.ui.basic.buttons .active.button,
127.ui.basic.active.button,
128.ui.basic.buttons .active.button:hover,
129.ui.basic.active.button:hover,
130.ui.basic.buttons .active.button:focus,
131.ui.basic.active.button:focus {
132 color: var(--color-text);
133 background: var(--color-active);
134}
135
136.ui.labeled.button > .label {
137 border-color: var(--color-light-border);
138}
139
140.ui.labeled.icon.buttons > .button > .icon,
141.ui.labeled.icon.button > .icon {
142 background: var(--color-hover);
143}
144
145/* primary */
146
147.ui.primary.labels .label,
148.ui.ui.ui.primary.label,
149.ui.primary.button,
150.ui.primary.buttons .button {
151 background: var(--color-primary);
152 color: var(--color-primary-contrast);
153}
154
155.ui.primary.button:hover,
156.ui.primary.buttons .button:hover,
157.ui.primary.button:focus,
158.ui.primary.buttons .button:focus {
159 background: var(--color-primary-hover);
160 color: var(--color-primary-contrast);
161}
162
163.ui.primary.button:active,
164.ui.primary.buttons .button:active {
165 background: var(--color-primary-active);
166}
167
168.ui.basic.primary.buttons .button,
169.ui.basic.primary.button {
170 color: var(--color-primary);
171 border-color: var(--color-primary);
172}
173
174.ui.basic.primary.buttons .button:hover,
175.ui.basic.primary.button:hover,
176.ui.basic.primary.buttons .button:focus,
177.ui.basic.primary.button:focus {
178 color: var(--color-primary-hover);
179 border-color: var(--color-primary-hover);
180}
181
182.ui.basic.primary.buttons .button:active,
183.ui.basic.primary.button:active {
184 color: var(--color-primary-active);
185 border-color: var(--color-primary-active);
186}
187
188/* secondary */
189
190.ui.secondary.labels .label,
191.ui.ui.ui.secondary.label,
192.ui.secondary.button,
193.ui.secondary.buttons .button,
194.ui.secondary.button:focus,
195.ui.secondary.buttons .button:focus {
196 background: var(--color-secondary-button);
197}
198
199.ui.secondary.button:hover,
200.ui.secondary.buttons .button:hover {
201 background: var(--color-secondary-hover);
202}
203
204.ui.secondary.button:active,
205.ui.secondary.buttons .button:active {
206 background: var(--color-secondary-active);
207}
208
209.ui.basic.secondary.buttons .button,
210.ui.basic.secondary.button {
211 color: var(--color-secondary-button);
212 border-color: var(--color-secondary-button);
213}
214
215.ui.basic.secondary.buttons .button:hover,
216.ui.basic.secondary.button:hover,
217.ui.basic.secondary.button:focus,
218.ui.basic.secondary.buttons .button:focus {
219 color: var(--color-secondary-hover);
220 border-color: var(--color-secondary-hover);
221}
222
223.ui.basic.secondary.buttons .button:active,
224.ui.basic.secondary.button:active {
225 color: var(--color-secondary-active);
226 border-color: var(--color-secondary-active);
227}
228
229/* red */
230
231.ui.red.labels .label,
232.ui.ui.ui.red.label,
233.ui.red.button,
234.ui.red.buttons .button {
235 background: var(--color-red);
236}
237
238.ui.red.button:hover,
239.ui.red.buttons .button:hover,
240.ui.red.button:focus,
241.ui.red.buttons .button:focus {
242 background: var(--color-red-dark-1);
243}
244
245.ui.red.button:active,
246.ui.red.buttons .button:active {
247 background: var(--color-red-dark-2);
248}
249
250.ui.basic.red.buttons .button,
251.ui.basic.red.button {
252 color: var(--color-red);
253 border-color: var(--color-red);
254}
255
256.ui.basic.red.buttons .button:hover,
257.ui.basic.red.button:hover,
258.ui.basic.red.buttons .button:focus,
259.ui.basic.red.button:focus {
260 color: var(--color-red-dark-1);
261 border-color: var(--color-red-dark-1);
262}
263
264.ui.basic.red.buttons .button:active,
265.ui.basic.red.button:active {
266 color: var(--color-red-dark-2);
267 border-color: var(--color-red-dark-2);
268}
269
270/* orange */
271
272.ui.orange.labels .label,
273.ui.ui.ui.orange.label,
274.ui.orange.button,
275.ui.orange.buttons .button,
276.ui.orange.button:focus,
277.ui.orange.buttons .button:focus {
278 background: var(--color-orange);
279}
280
281.ui.orange.button:hover,
282.ui.orange.buttons .button:hover {
283 background: var(--color-orange-dark-1);
284}
285
286.ui.orange.button:active,
287.ui.orange.buttons .button:active {
288 background: var(--color-orange-dark-2);
289}
290
291.ui.basic.orange.buttons .button,
292.ui.basic.orange.button,
293.ui.basic.orange.buttons .button:focus,
294.ui.basic.orange.button:focus {
295 color: var(--color-orange);
296 border-color: var(--color-orange);
297}
298
299.ui.basic.orange.buttons .button:hover,
300.ui.basic.orange.button:hover {
301 color: var(--color-orange-dark-1);
302 border-color: var(--color-orange-dark-1);
303}
304
305.ui.basic.orange.buttons .button:active,
306.ui.basic.orange.button:active {
307 color: var(--color-orange-dark-2);
308 border-color: var(--color-orange-dark-2);
309}
310
311/* yellow */
312
313.ui.yellow.labels .label,
314.ui.ui.ui.yellow.label,
315.ui.yellow.button,
316.ui.yellow.buttons .button,
317.ui.yellow.button:focus,
318.ui.yellow.buttons .button:focus {
319 background: var(--color-yellow);
320}
321
322.ui.yellow.button:hover,
323.ui.yellow.buttons .button:hover {
324 background: var(--color-yellow-dark-1);
325}
326
327.ui.yellow.button:active,
328.ui.yellow.buttons .button:active {
329 background: var(--color-yellow-dark-2);
330}
331
332.ui.basic.yellow.buttons .button,
333.ui.basic.yellow.button,
334.ui.basic.yellow.buttons .button:focus,
335.ui.basic.yellow.button:focus {
336 color: var(--color-yellow);
337 border-color: var(--color-yellow);
338}
339
340.ui.basic.yellow.buttons .button:hover,
341.ui.basic.yellow.button:hover {
342 color: var(--color-yellow-dark-1);
343 border-color: var(--color-yellow-dark-1);
344}
345
346.ui.basic.yellow.buttons .button:active,
347.ui.basic.yellow.button:active {
348 color: var(--color-yellow-dark-2);
349 border-color: var(--color-yellow-dark-2);
350}
351
352/* olive */
353
354.ui.olive.labels .label,
355.ui.ui.ui.olive.label,
356.ui.olive.button,
357.ui.olive.buttons .button,
358.ui.olive.button:focus,
359.ui.olive.buttons .button:focus {
360 background: var(--color-olive);
361}
362
363.ui.olive.button:hover,
364.ui.olive.buttons .button:hover {
365 background: var(--color-olive-dark-1);
366}
367
368.ui.olive.button:active,
369.ui.olive.buttons .button:active {
370 background: var(--color-olive-dark-2);
371}
372
373.ui.basic.olive.buttons .button,
374.ui.basic.olive.button,
375.ui.basic.olive.buttons .button:focus,
376.ui.basic.olive.button:focus {
377 color: var(--color-olive);
378 border-color: var(--color-olive);
379}
380
381.ui.basic.olive.buttons .button:hover,
382.ui.basic.olive.button:hover {
383 color: var(--color-olive-dark-1);
384 border-color: var(--color-olive-dark-1);
385}
386
387.ui.basic.olive.buttons .button:active,
388.ui.basic.olive.button:active {
389 color: var(--color-olive-dark-2);
390 border-color: var(--color-olive-dark-2);
391}
392
393/* green */
394
395.ui.green.labels .label,
396.ui.ui.ui.green.label,
397.ui.green.button,
398.ui.green.buttons .button,
399.ui.green.button:focus,
400.ui.green.buttons .button:focus {
401 background: var(--color-green);
402}
403
404.ui.green.button:hover,
405.ui.green.buttons .button:hover {
406 background: var(--color-green-dark-1);
407}
408
409.ui.green.button:active,
410.ui.green.buttons .button:active {
411 background: var(--color-green-dark-2);
412}
413
414.ui.basic.green.buttons .button,
415.ui.basic.green.button,
416.ui.basic.green.buttons .button:focus,
417.ui.basic.green.button:focus {
418 color: var(--color-green);
419 border-color: var(--color-green);
420}
421
422.ui.basic.green.buttons .button:hover,
423.ui.basic.green.button:hover {
424 color: var(--color-green-dark-1);
425 border-color: var(--color-green-dark-1);
426}
427
428.ui.basic.green.buttons .button:active,
429.ui.basic.green.button:active {
430 color: var(--color-green-dark-2);
431 border-color: var(--color-green-dark-2);
432}
433
434/* teal */
435
436.ui.teal.labels .label,
437.ui.ui.ui.teal.label,
438.ui.teal.button,
439.ui.teal.buttons .button,
440.ui.teal.button:focus,
441.ui.teal.buttons .button:focus {
442 background: var(--color-teal);
443}
444
445.ui.teal.button:hover,
446.ui.teal.buttons .button:hover {
447 background: var(--color-teal-dark-1);
448}
449
450.ui.teal.button:active,
451.ui.teal.buttons .button:active {
452 background: var(--color-teal-dark-2);
453}
454
455.ui.basic.teal.buttons .button,
456.ui.basic.teal.button,
457.ui.basic.teal.buttons .button:focus,
458.ui.basic.teal.button:focus {
459 color: var(--color-teal);
460 border-color: var(--color-teal);
461}
462
463.ui.basic.teal.buttons .button:hover,
464.ui.basic.teal.button:hover {
465 color: var(--color-teal-dark-1);
466 border-color: var(--color-teal-dark-1);
467}
468
469.ui.basic.teal.buttons .button:active,
470.ui.basic.teal.button:active {
471 color: var(--color-teal-dark-2);
472 border-color: var(--color-teal-dark-2);
473}
474
475/* blue */
476
477.ui.blue.labels .label,
478.ui.ui.ui.blue.label,
479.ui.blue.button,
480.ui.blue.buttons .button,
481.ui.blue.button:focus,
482.ui.blue.buttons .button:focus {
483 background: var(--color-blue);
484}
485
486.ui.blue.button:hover,
487.ui.blue.buttons .button:hover {
488 background: var(--color-blue-dark-1);
489}
490
491.ui.blue.button:active,
492.ui.blue.buttons .button:active {
493 background: var(--color-blue-dark-2);
494}
495
496.ui.basic.blue.buttons .button,
497.ui.basic.blue.button,
498.ui.basic.blue.buttons .button:focus,
499.ui.basic.blue.button:focus {
500 color: var(--color-blue);
501 border-color: var(--color-blue);
502}
503
504.ui.basic.blue.buttons .button:hover,
505.ui.basic.blue.button:hover {
506 color: var(--color-blue-dark-1);
507 border-color: var(--color-blue-dark-1);
508}
509
510.ui.basic.blue.buttons .button:active,
511.ui.basic.blue.button:active {
512 color: var(--color-blue-dark-2);
513 border-color: var(--color-blue-dark-2);
514}
515
516/* violet */
517
518.ui.violet.labels .label,
519.ui.ui.ui.violet.label,
520.ui.violet.button,
521.ui.violet.buttons .button,
522.ui.violet.button:focus,
523.ui.violet.buttons .button:focus {
524 background: var(--color-violet);
525}
526
527.ui.violet.button:hover,
528.ui.violet.buttons .button:hover {
529 background: var(--color-violet-dark-1);
530}
531
532.ui.violet.button:active,
533.ui.violet.buttons .button:active {
534 background: var(--color-violet-dark-2);
535}
536
537.ui.basic.violet.buttons .button,
538.ui.basic.violet.button,
539.ui.basic.violet.buttons .button:focus,
540.ui.basic.violet.button:focus {
541 color: var(--color-violet);
542 border-color: var(--color-violet);
543}
544
545.ui.basic.violet.buttons .button:hover,
546.ui.basic.violet.button:hover {
547 color: var(--color-violet-dark-1);
548 border-color: var(--color-violet-dark-1);
549}
550
551.ui.basic.violet.buttons .button:active,
552.ui.basic.violet.button:active {
553 color: var(--color-violet-dark-2);
554 border-color: var(--color-violet-dark-2);
555}
556
557/* purple */
558
559.ui.purple.labels .label,
560.ui.ui.ui.purple.label,
561.ui.purple.button,
562.ui.purple.buttons .button,
563.ui.purple.button:focus,
564.ui.purple.buttons .button:focus {
565 background: var(--color-purple);
566}
567
568.ui.purple.button:hover,
569.ui.purple.buttons .button:hover {
570 background: var(--color-purple-dark-1);
571}
572
573.ui.purple.button:active,
574.ui.purple.buttons .button:active {
575 background: var(--color-purple-dark-2);
576}
577
578.ui.basic.purple.buttons .button,
579.ui.basic.purple.button,
580.ui.basic.purple.buttons .button:focus,
581.ui.basic.purple.button:focus {
582 color: var(--color-purple);
583 border-color: var(--color-purple);
584}
585
586.ui.basic.purple.buttons .button:hover,
587.ui.basic.purple.button:hover {
588 color: var(--color-purple-dark-1);
589 border-color: var(--color-purple-dark-1);
590}
591
592.ui.basic.purple.buttons .button:active,
593.ui.basic.purple.button:active {
594 color: var(--color-purple-dark-2);
595 border-color: var(--color-purple-dark-2);
596}
597
598/* pink */
599
600.ui.pink.labels .label,
601.ui.ui.ui.pink.label,
602.ui.pink.button,
603.ui.pink.buttons .button,
604.ui.pink.button:focus,
605.ui.pink.buttons .button:focus {
606 background: var(--color-pink);
607}
608
609.ui.pink.button:hover,
610.ui.pink.buttons .button:hover {
611 background: var(--color-pink-dark-1);
612}
613
614.ui.pink.button:active,
615.ui.pink.buttons .button:active {
616 background: var(--color-pink-dark-2);
617}
618
619.ui.basic.pink.buttons .button,
620.ui.basic.pink.button,
621.ui.basic.pink.buttons .button:focus,
622.ui.basic.pink.button:focus {
623 color: var(--color-pink);
624 border-color: var(--color-pink);
625}
626
627.ui.basic.pink.buttons .button:hover,
628.ui.basic.pink.button:hover {
629 color: var(--color-pink-dark-1);
630 border-color: var(--color-pink-dark-1);
631}
632
633.ui.basic.pink.buttons .button:active,
634.ui.basic.pink.button:active {
635 color: var(--color-pink-dark-2);
636 border-color: var(--color-pink-dark-2);
637}
638
639/* brown */
640
641.ui.brown.labels .label,
642.ui.ui.ui.brown.label,
643.ui.brown.button,
644.ui.brown.buttons .button,
645.ui.brown.button:focus,
646.ui.brown.buttons .button:focus {
647 background: var(--color-brown);
648}
649
650.ui.brown.button:hover,
651.ui.brown.buttons .button:hover {
652 background: var(--color-brown-dark-1);
653}
654
655.ui.brown.button:active,
656.ui.brown.buttons .button:active {
657 background: var(--color-brown-dark-2);
658}
659
660.ui.basic.brown.buttons .button,
661.ui.basic.brown.button,
662.ui.basic.brown.buttons .button:focus,
663.ui.basic.brown.button:focus {
664 color: var(--color-brown);
665 border-color: var(--color-brown);
666}
667
668.ui.basic.brown.buttons .button:hover,
669.ui.basic.brown.button:hover {
670 color: var(--color-brown-dark-1);
671 border-color: var(--color-brown-dark-1);
672}
673
674.ui.basic.brown.buttons .button:active,
675.ui.basic.brown.button:active {
676 color: var(--color-brown-dark-2);
677 border-color: var(--color-brown-dark-2);
678}
679
680/* negative */
681
682.ui.negative.buttons .button,
683.ui.negative.button,
684.ui.negative.buttons .button:focus,
685.ui.negative.button:focus {
686 background: var(--color-red);
687}
688
689.ui.negative.buttons .button:hover,
690.ui.negative.button:hover {
691 background: var(--color-red-dark-1);
692}
693
694.ui.negative.buttons .button:active,
695.ui.negative.button:active {
696 background: var(--color-red-dark-2);
697}
698
699.ui.basic.negative.buttons .button,
700.ui.basic.negative.button,
701.ui.basic.negative.buttons .button:focus,
702.ui.basic.negative.button:focus {
703 color: var(--color-red);
704 border-color: var(--color-red);
705}
706
707.ui.basic.negative.buttons .button:hover,
708.ui.basic.negative.button:hover {
709 color: var(--color-red-dark-1);
710 border-color: var(--color-red-dark-1);
711}
712
713.ui.basic.negative.buttons .button:active,
714.ui.basic.negative.button:active {
715 color: var(--color-red-dark-2);
716 border-color: var(--color-red-dark-2);
717}
718
719/* positive */
720
721.ui.positive.buttons .button,
722.ui.positive.button,
723.ui.positive.buttons .button:focus,
724.ui.positive.button:focus {
725 background: var(--color-green);
726}
727
728.ui.positive.buttons .button:hover,
729.ui.positive.button:hover {
730 background: var(--color-green-dark-1);
731}
732
733.ui.positive.buttons .button:active,
734.ui.positive.button:active {
735 background: var(--color-green-dark-2);
736}
737
738.ui.basic.positive.buttons .button,
739.ui.basic.positive.button,
740.ui.basic.positive.buttons .button:focus,
741.ui.basic.positive.button:focus {
742 color: var(--color-green);
743 border-color: var(--color-green);
744}
745
746.ui.basic.positive.buttons .button:hover,
747.ui.basic.positive.button:hover {
748 color: var(--color-green-dark-1);
749 border-color: var(--color-green-dark-1);
750}
751
752.ui.basic.positive.buttons .button:active,
753.ui.basic.positive.button:active {
754 color: var(--color-green-dark-2);
755 border-color: var(--color-green-dark-2);
756}