-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
-
140
-
141
-
142
-
143
-
144
-
145
-
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
-
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
-
174
-
175
-
176
-
177
-
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
-
190
-
191
-
192
-
193
-
194
-
195
-
196
-
197
-
198
-
199
-
200
-
201
-
202
-
203
-
204
-
205
-
206
-
207
-
208
-
209
-
210
-
211
-
212
-
213
-
214
-
215
-
216
-
217
-
218
-
219
-
220
-
221
-
222
-
223
-
224
-
225
-
226
-
227
-
228
-
229
-
230
-
231
-
232
-
233
-
234
-
235
-
236
-
237
-
238
-
239
-
240
-
241
-
242
-
243
-
244
-
245
-
246
-
247
-
248
-
249
-
250
-
251
-
252
-
253
-
254
-
255
-
256
-
257
-
258
-
259
-
260
-
261
-
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
-
270
-
271
-
272
-
273
-
274
-
275
-
276
-
277
-
278
-
279
-
280
-
281
-
282
-
283
-
284
-
285
-
286
-
287
-
288
-
289
-
290
-
291
-
292
-
293
-
294
-
295
-
296
-
297
-
298
-
299
-
300
-
301
-
302
-
303
-
304
-
305
-
306
-
307
-
308
-
309
-
310
-
311
-
312
-
313
-
314
-
315
-
316
-
317
-
318
-
319
-
320
-
321
-
322
-
323
-
324
-
325
-
326
-
327
-
328
-
329
-
330
-
331
-
332
-
333
-
334
-
335
-
336
-
337
-
338
-
339
-
340
-
341
-
342
-
343
-
344
-
345
-
346
-
347
-
348
-
349
-
350
-
351
-
352
-
353
-
354
-
355
-
356
-
357
-
358
-
359
-
360
-
361
-
362
-
363
-
364
-
365
-
366
-
367
-
368
-
369
-
370
-
371
-
372
-
373
-
374
-
375
-
376
-
377
-
378
-
379
-
380
-
381
-
382
-
383
-
384
-
385
-
386
-
387
-
388
-
389
-
390
-
391
-
392
-
393
-
394
-
395
-
396
-
397
-
398
-
399
-
400
-
401
-
402
-
403
-
404
-
405
-
406
-
407
-
408
-
409
-
410
-
411
-
412
-
413
-
414
-
415
-
416
-
417
-
418
-
419
-
420
-
421
-
422
-
423
-
424
-
425
-
426
-
427
-
428
-
429
-
430
-
431
-
432
-
433
-
434
-
435
-
436
-
437
-
438
-
439
-
440
-
441
-
442
-
443
-
444
-
445
-
446
-
447
-
448
-
449
-
450
-
451
-
452
-
453
-
454
-
455
-
456
-
457
-
458
-
459
-
460
-
461
-
462
-
463
-
464
-
465
-
466
-
467
-
468
-
469
-
470
-
471
-
472
-
473
-
474
-
475
-
476
-
477
-
478
-
479
-
480
-
481
-
482
-
483
-
484
-
485
-
486
-
487
-
488
-
489
-
490
-
491
-
492
-
493
-
494
-
495
-
496
-
497
-
498
-
499
-
500
-
501
-
502
-
503
-
504
-
505
-
506
-
507
-
508
-
509
-
510
-
511
-
512
-
513
-
514
-
515
-
516
-
517
-
518
-
519
-
520
-
521
-
522
-
523
-
524
-
525
-
526
-
527
-
528
-
529
-
530
-
531
-
532
-
533
-
534
-
535
-
536
-
537
-
538
-
539
-
540
-
541
-
542
-
543
-
544
-
545
-
546
-
547
-
548
-
549
-
550
-
551
-
552
-
553
-
554
-
555
-
556
-
557
-
558
-
559
-
560
-
561
-
562
-
563
-
564
-
565
-
566
-
567
-
568
-
569
-
570
-
571
-
572
-
573
-
574
-
575
-
576
-
577
-
578
-
579
-
580
-
581
-
582
-
583
-
584
-
585
-
586
-
587
-
588
-
589
-
590
-
591
-
592
-
593
-
594
-
595
-
596
-
597
-
598
-
599
-
600
-
601
-
602
-
603
-
604
-
605
-
606
-
607
-
608
-
609
-
610
-
611
-
612
-
613
-
614
-
615
-
616
-
617
-
618
-
619
-
620
-
621
-
622
-
623
-
624
-
625
-
626
-
627
-
628
-
629
-
630
-
631
-
632
-
633
-
634
-
635
-
636
-
637
-
638
-
639
-
640
-
641
-
642
-
643
-
644
-
645
-
646
-
647
-
648
-
649
-
650
-
651
-
652
-
653
-
654
-
655
-
656
-
657
-
658
-
659
-
660
-
661
-
662
-
663
-
664
-
665
-
666
-
667
-
668
-
669
-
670
-
671
-
672
-
673
-
674
-
675
-
676
-
677
-
678
-
679
-
680
-
681
-
682
-
683
-
684
-
685
-
686
-
687
-
688
-
689
-
690
-
691
-
692
-
693
-
694
-
695
-
696
-
697
-
698
-
699
-
700
-
701
-
702
-
703
-
704
-
705
-
706
-
707
-
708
-
709
-
710
-
711
-
712
-
713
-
714
-
715
-
716
-
717
-
718
-
719
-
720
-
721
-
722
-
723
-
724
-
725
-
726
-
727
-
728
-
729
-
730
-
731
-
732
-
733
-
734
-
735
-
736
-
737
-
738
-
739
-
740
-
741
-
742
-
743
-
744
-
745
-
746
-
747
-
748
-
749
-
750
-
751
-
752
-
753
-
754
-
755
-
756
-
757
-
758
-
759
-
760
-
761
-
762
-
763
-
764
-
765
-
766
-
767
-
768
-
769
-
770
-
771
-
772
-
773
-
774
-
775
-
776
-
777
-
778
-
779
-
780
-
781
-
782
-
783
-
784
-
785
-
786
-
787
-
788
-
789
-
790
-
791
-
792
-
793
-
794
-
795
-
796
-
797
-
798
-
799
-
800
-
801
-
802
-
803
-
804
-
805
-
806
-
807
-
808
-
809
-
810
-
811
-
812
-
813
-
814
-
815
-
816
-
817
-
818
-
819
-
820
-
821
-
822
-
823
-
824
-
825
-
826
-
827
-
828
-
829
-
830
-
831
-
832
-
833
-
834
-
835
-
836
-
837
-
838
-
839
-
840
-
841
-
842
-
843
-
844
-
845
-
846
-
847
-
848
-
849
-
850
-
851
-
852
-
853
-
854
-
855
-
856
-
857
-
858
-
859
-
860
-
861
-
862
-
863
-
864
-
865
-
866
-
867
-
868
-
869
-
870
-
871
-
872
-
873
-
874
-
875
-
876
-
877
-
878
-
879
-
880
-
881
-
882
-
883
-
884
-
885
-
886
-
887
-
888
-
889
-
890
-
891
-
892
-
893
-
894
-
895
-
896
-
897
-
898
-
899
-
900
-
901
-
902
-
903
-
904
-
905
-
906
-
907
-
908
-
909
-
910
-
911
-
912
-
913
-
914
-
915
-
916
-
917
-
918
-
919
-
920
-
921
-
922
-
923
-
924
-
925
-
926
-
927
-
928
-
929
-
930
-
931
-
932
-
933
-
934
-
935
-
936
-
937
-
938
-
939
-
940
-
941
-
942
-
943
-
944
-
945
-
946
-
947
-
948
-
949
-
950
-
951
-
952
-
953
-
954
-
955
-
956
-
957
-
958
-
959
-
960
-
961
-
962
-
963
-
964
-
965
-
966
-
967
-
968
-
969
-
970
-
971
-
972
-
973
-
974
-
975
-
976
-
977
-
978
-
979
-
980
-
981
-
982
-
983
-
984
-
985
-
986
-
987
-
988
-
989
-
990
-
991
-
992
-
993
-
994
-
995
-
996
-
997
-
998
-
999
-
1000
-
1001
-
1002
-
1003
-
1004
-
1005
-
1006
-
1007
-
1008
-
1009
-
1010
-
1011
-
1012
-
1013
-
1014
-
1015
-
1016
-
1017
-
1018
-
1019
-
1020
-
1021
-
1022
-
1023
-
1024
-
1025
-
1026
-
1027
-
1028
-
1029
-
1030
-
1031
-
1032
-
1033
-
1034
-
1035
-
1036
-
1037
-
1038
-
1039
-
1040
-
1041
-
1042
-
1043
-
1044
-
1045
-
1046
-
1047
-
1048
-
1049
-
1050
-
1051
-
1052
-
1053
-
1054
-
1055
-
1056
-
1057
-
1058
-
1059
-
1060
-
1061
-
1062
-
1063
-
1064
-
1065
-
1066
-
1067
-
1068
-
1069
-
1070
-
1071
-
1072
-
1073
-
1074
-
1075
-
1076
-
1077
-
1078
-
1079
-
1080
-
1081
-
1082
-
1083
-
1084
-
1085
-
1086
-
1087
-
1088
-
1089
-
1090
-
1091
-
1092
-
1093
-
1094
-
1095
-
1096
-
1097
-
1098
-
1099
-
1100
-
1101
-
1102
-
1103
-
1104
-
1105
-
1106
-
1107
-
1108
-
1109
-
1110
-
1111
-
1112
-
1113
-
1114
-
1115
-
1116
-
1117
-
1118
-
1119
-
1120
-
1121
-
1122
-
1123
-
1124
-
1125
-
1126
-
1127
-
1128
-
1129
-
1130
-
1131
-
1132
-
1133
-
1134
-
1135
-
1136
-
1137
-
1138
-
1139
-
1140
-
1141
-
1142
-
1143
-
1144
-
1145
-
1146
-
1147
-
1148
-
1149
-
1150
-
1151
-
1152
-
1153
-
1154
-
1155
-
1156
-
1157
-
1158
-
1159
-
1160
-
1161
-
1162
-
1163
-
1164
-
1165
-
1166
-
1167
-
1168
-
1169
-
1170
-
1171
-
1172
-
1173
-
1174
-
1175
-
1176
-
1177
-
1178
-
1179
-
1180
-
1181
-
1182
-
1183
-
1184
-
1185
-
1186
-
1187
-
1188
-
1189
-
1190
-
1191
-
1192
-
1193
-
1194
-
1195
-
1196
-
1197
-
1198
-
1199
-
1200
-
1201
-
1202
-
1203
-
1204
-
1205
-
1206
-
1207
-
1208
-
1209
-
1210
-
1211
-
1212
-
1213
-
1214
-
1215
-
1216
-
1217
-
1218
-
1219
-
1220
-
1221
-
1222
-
1223
-
1224
-
1225
-
1226
-
1227
-
1228
-
1229
-
1230
-
1231
-
1232
-
1233
-
1234
-
1235
-
1236
-
1237
-
1238
-
1239
-
1240
-
1241
-
1242
-
1243
-
1244
-
1245
-
1246
-
1247
-
1248
-
1249
-
1250
-
1251
-
1252
-
1253
-
1254
-
1255
-
1256
-
1257
-
1258
-
1259
-
1260
-
1261
-
1262
-
1263
-
1264
-
1265
-
1266
-
1267
-
1268
-
1269
-
1270
-
1271
-
1272
-
1273
-
1274
-
1275
-
1276
-
1277
-
1278
-
1279
-
1280
-
1281
-
1282
-
1283
-
1284
-
1285
-
1286
-
1287
-
1288
-
1289
-
1290
-
1291
-
1292
-
1293
-
1294
-
1295
-
1296
-
1297
-
1298
-
1299
-
1300
-
1301
-
1302
-
1303
-
1304
-
1305
-
1306
-
1307
-
1308
-
1309
-
1310
-
1311
-
1312
-
1313
-
1314
-
1315
-
1316
-
1317
-
1318
-
1319
-
1320
-
1321
-
1322
-
1323
-
1324
-
1325
-
1326
-
1327
-
1328
-
1329
-
1330
-
1331
-
1332
-
1333
-
1334
-
1335
-
1336
-
1337
-
1338
-
1339
-
1340
-
1341
-
1342
-
1343
-
1344
-
1345
-
1346
-
1347
-
1348
-
1349
-
1350
-
1351
-
1352
-
1353
-
1354
-
1355
-
1356
-
1357
-
1358
-
1359
-
1360
-
1361
-
1362
-
1363
-
1364
-
1365
-
1366
-
1367
-
1368
-
1369
-
1370
-
1371
-
1372
-
1373
-
1374
-
1375
-
1376
-
1377
-
1378
-
1379
-
1380
-
1381
-
1382
-
1383
-
1384
-
1385
-
1386
-
1387
-
1388
-
1389
-
1390
-
1391
-
1392
-
1393
-
1394
-
1395
-
1396
-
1397
-
1398
-
1399
-
1400
-
1401
-
1402
-
1403
-
1404
-
1405
-
1406
-
1407
-
1408
-
1409
-
1410
-
1411
-
1412
-
1413
-
1414
-
1415
-
1416
-
1417
-
1418
-
1419
-
1420
-
1421
-
1422
-
1423
-
1424
-
1425
-
1426
-
1427
-
1428
-
1429
-
1430
-
1431
-
1432
-
1433
-
1434
-
1435
-
1436
-
1437
-
1438
-
1439
-
1440
-
1441
-
1442
-
1443
-
1444
-
1445
-
1446
-
1447
-
1448
-
1449
-
1450
-
1451
-
1452
-
1453
-
1454
-
1455
-
1456
-
1457
-
1458
-
1459
-
1460
-
1461
-
1462
-
1463
-
1464
-
1465
-
1466
-
1467
-
1468
-
1469
-
1470
-
1471
-
1472
-
1473
-
1474
-
1475
-
1476
-
1477
-
1478
-
1479
-
1480
-
1481
-
1482
-
1483
-
1484
-
1485
-
1486
-
1487
-
1488
-
1489
-
1490
-
1491
-
1492
-
1493
-
1494
-
1495
-
1496
-
1497
-
1498
-
1499
-
1500
-
1501
-
1502
-
1503
-
1504
-
1505
-
1506
-
1507
-
1508
-
1509
-
1510
-
1511
-
1512
-
1513
-
1514
-
1515
-
1516
-
1517
-
1518
-
1519
-
1520
-
1521
-
1522
-
1523
-
1524
-
1525
-
1526
-
1527
-
1528
-
1529
-
1530
-
1531
-
1532
-
1533
-
1534
-
1535
-
1536
-
1537
-
1538
-
1539
-
1540
-
1541
-
1542
-
1543
-
1544
-
1545
-
1546
-
1547
-
1548
-
1549
-
1550
-
1551
-
1552
-
1553
-
1554
-
1555
-
1556
-
1557
-
1558
-
1559
-
1560
-
1561
-
1562
-
1563
-
1564
-
1565
-
1566
-
1567
-
1568
-
1569
-
1570
-
1571
-
1572
-
1573
-
1574
-
1575
-
1576
-
1577
-
1578
-
1579
-
1580
-
1581
-
1582
-
1583
-
1584
-
1585
-
1586
-
1587
-
1588
-
1589
-
1590
-
1591
-
1592
-
1593
-
1594
-
1595
-
1596
-
1597
-
1598
-
1599
-
1600
-
1601
-
1602
-
1603
-
1604
-
1605
-
1606
-
1607
-
1608
-
1609
-
1610
-
1611
-
1612
-
1613
-
1614
-
1615
-
1616
-
1617
-
1618
-
1619
-
1620
-
1621
-
1622
-
1623
-
1624
-
1625
-
1626
-
1627
-
1628
-
1629
-
1630
-
1631
-
1632
-
1633
-
1634
-
1635
-
1636
-
1637
-
1638
-
1639
-
1640
-
1641
-
1642
-
1643
-
1644
-
1645
-
1646
-
1647
-
1648
-
1649
-
1650
-
1651
-
1652
-
1653
-
1654
-
1655
-
1656
-
1657
-
1658
-
1659
-
1660
-
1661
-
1662
-
1663
-
1664
-
1665
-
1666
-
1667
-
1668
-
1669
-
1670
-
1671
-
1672
-
1673
-
1674
-
1675
-
1676
-
1677
-
1678
-
1679
-
1680
-
1681
-
1682
-
1683
-
1684
-
1685
-
1686
-
1687
-
1688
-
1689
-
1690
-
1691
-
1692
-
1693
-
1694
-
1695
-
1696
-
1697
-
1698
-
1699
-
1700
-
1701
-
1702
-
1703
-
1704
-
1705
-
1706
-
1707
-
1708
-
1709
-
1710
-
1711
-
1712
-
1713
-
1714
-
1715
-
1716
-
1717
-
1718
-
1719
-
1720
-
1721
-
1722
-
1723
-
1724
-
1725
-
1726
-
1727
-
1728
-
1729
-
1730
-
1731
-
1732
-
1733
-
1734
-
1735
-
1736
-
1737
-
1738
-
1739
-
1740
-
1741
-
1742
-
1743
-
1744
-
1745
-
1746
-
1747
-
1748
-
1749
-
1750
-
1751
-
1752
-
1753
-
1754
-
1755
-
1756
-
1757
-
1758
-
1759
-
1760
-
1761
-
1762
-
1763
-
1764
-
1765
-
1766
-
1767
-
1768
-
1769
-
1770
-
1771
-
1772
-
1773
-
1774
-
1775
-
1776
-
1777
-
1778
-
1779
-
1780
-
1781
-
1782
-
1783
-
1784
-
1785
-
1786
-
1787
-
1788
-
1789
-
1790
-
1791
-
1792
-
1793
-
1794
-
1795
-
1796
-
1797
-
1798
-
1799
-
1800
-
1801
-
1802
-
1803
-
1804
-
1805
-
1806
-
1807
-
1808
-
1809
-
1810
-
1811
-
1812
-
1813
-
1814
-
1815
-
1816
-
1817
-
1818
-
1819
-
1820
-
1821
-
1822
-
1823
-
1824
-
1825
-
1826
-
1827
-
1828
-
1829
-
1830
-
1831
-
1832
-
1833
-
1834
-
1835
-
1836
-
1837
-
1838
-
1839
-
1840
-
1841
-
1842
-
1843
-
1844
-
1845
-
1846
-
1847
-
1848
-
1849
-
1850
-
1851
-
1852
-
1853
-
1854
-
1855
-
1856
-
1857
-
1858
-
1859
-
1860
-
1861
-
1862
-
1863
-
1864
-
1865
-
1866
-
1867
-
1868
-
1869
-
1870
-
1871
-
1872
-
1873
-
1874
-
1875
-
1876
-
1877
-
1878
-
1879
-
1880
-
1881
-
1882
-
1883
-
1884
-
1885
-
1886
-
1887
-
1888
-
1889
-
1890
-
1891
-
1892
-
1893
-
1894
-
1895
-
1896
-
1897
-
1898
-
1899
-
1900
-
1901
-
1902
-
1903
-
1904
-
1905
-
1906
-
1907
-
1908
-
1909
-
1910
-
1911
-
1912
-
1913
-
1914
-
1915
-
1916
-
1917
-
1918
-
1919
-
1920
-
1921
-
1922
-
1923
-
1924
-
1925
-
1926
-
1927
-
1928
-
1929
-
1930
-
1931
-
1932
-
1933
-
1934
-
1935
-
1936
-
1937
-
1938
-
1939
-
1940
-
1941
-
1942
-
1943
-
1944
-
1945
-
1946
-
1947
-
1948
-
1949
-
1950
-
1951
-
1952
-
1953
-
1954
-
1955
-
1956
-
1957
-
1958
-
1959
-
1960
-
1961
-
1962
-
1963
-
1964
-
1965
-
1966
-
1967
-
1968
-
1969
-
1970
-
1971
-
1972
-
1973
-
1974
-
1975
-
1976
-
1977
-
1978
-
1979
-
1980
-
1981
-
1982
-
1983
-
1984
-
1985
-
1986
-
1987
-
1988
-
1989
-
1990
-
1991
-
1992
-
1993
-
1994
-
1995
-
1996
-
1997
-
1998
-
1999
-
2000
-
2001
-
2002
-
2003
-
2004
-
2005
-
2006
-
2007
-
2008
-
2009
-
2010
-
2011
-
2012
-
2013
-
2014
-
2015
-
2016
-
2017
-
2018
-
2019
-
2020
-
2021
-
2022
-
2023
-
2024
-
2025
-
2026
-
2027
-
2028
-
2029
-
2030
-
2031
-
2032
-
2033
-
2034
-
2035
-
2036
-
2037
-
2038
-
2039
-
2040
-
2041
-
2042
-
2043
-
2044
-
2045
-
2046
-
2047
-
2048
-
2049
-
2050
-
2051
-
2052
-
2053
-
2054
-
2055
-
2056
-
2057
-
2058
-
2059
-
2060
-
2061
-
2062
-
2063
-
2064
-
2065
-
2066
-
2067
-
2068
-
2069
-
2070
-
2071
-
2072
-
2073
-
2074
-
2075
-
2076
-
2077
-
2078
-
2079
-
2080
-
2081
-
2082
-
2083
-
2084
-
2085
-
2086
-
2087
-
2088
-
2089
-
2090
-
2091
-
2092
-
2093
-
2094
-
2095
-
2096
-
2097
-
2098
-
2099
-
2100
-
2101
-
2102
-
2103
-
2104
-
2105
-
2106
-
2107
-
2108
-
2109
-
2110
-
2111
-
2112
-
2113
-
2114
-
2115
-
2116
-
2117
-
2118
-
2119
-
2120
-
2121
-
2122
-
2123
-
2124
-
2125
-
2126
-
2127
-
2128
-
2129
-
2130
-
2131
-
2132
-
2133
-
2134
-
2135
-
2136
-
2137
-
2138
-
2139
-
2140
-
2141
-
2142
-
2143
-
2144
-
2145
-
2146
-
2147
-
2148
-
2149
-
2150
-
2151
-
2152
-
2153
-
2154
-
2155
-
2156
-
2157
-
2158
-
2159
-
2160
-
2161
-
2162
-
2163
-
2164
-
2165
-
2166
-
2167
-
2168
-
2169
-
2170
-
2171
-
2172
-
2173
-
2174
-
2175
-
2176
-
2177
-
2178
-
2179
-
2180
-
2181
-
2182
-
2183
-
2184
-
2185
-
2186
-
2187
-
2188
-
2189
-
2190
-
2191
-
2192
-
2193
-
2194
-
2195
-
2196
-
2197
-
2198
-
2199
-
2200
-
2201
-
2202
-
2203
-
2204
:root {
/* documented customizable variables */
--fonts-proportional: -apple-system, "Segoe UI", system-ui, "Roboto", "Helvetica Neue", "Arial";
--fonts-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
--fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
/* other variables */
--border-radius: .28571429rem;
--opacity-disabled: .55;
--height-loading: 12rem;
--color-primary: #4183c4;
--color-primary-dark-1: #3876b3;
--color-primary-dark-2: #31699f;
--color-primary-dark-3: #2b5c8b;
--color-primary-dark-4: #254f77;
--color-primary-dark-5: #193450;
--color-primary-dark-6: #0c1a28;
--color-primary-dark-7: #04080c;
--color-primary-light-1: #548fca;
--color-primary-light-2: #679cd0;
--color-primary-light-3: #7aa8d6;
--color-primary-light-4: #8db5dc;
--color-primary-light-5: #b3cde7;
--color-primary-light-6: #d9e6f3;
--color-primary-light-7: #f4f8fb;
--color-primary-alpha-10: #4183c419;
--color-primary-alpha-20: #4183c433;
--color-primary-alpha-30: #4183c44b;
--color-primary-alpha-40: #4183c466;
--color-primary-alpha-50: #4183c480;
--color-primary-alpha-60: #4183c499;
--color-primary-alpha-70: #4183c4b3;
--color-primary-alpha-80: #4183c4cc;
--color-primary-alpha-90: #4183c4e1;
--color-secondary: #dedede;
--color-secondary-dark-1: #cecece;
--color-secondary-dark-2: #bfbfbf;
--color-secondary-dark-3: #a0a0a0;
--color-secondary-dark-4: #909090;
--color-secondary-dark-5: #818181;
--color-secondary-dark-6: #717171;
--color-secondary-dark-7: #626262;
--color-secondary-dark-8: #525252;
--color-secondary-dark-9: #434343;
--color-secondary-dark-10: #333333;
--color-secondary-dark-11: #242424;
--color-secondary-dark-12: #141414;
--color-secondary-dark-13: #040404;
--color-secondary-light-1: #e5e5e5;
--color-secondary-light-2: #ebebeb;
--color-secondary-light-3: #f2f2f2;
--color-secondary-light-4: #f8f8f8;
--color-secondary-alpha-10: #dedede19;
--color-secondary-alpha-20: #dedede33;
--color-secondary-alpha-30: #dedede4b;
--color-secondary-alpha-40: #dedede66;
--color-secondary-alpha-50: #dedede80;
--color-secondary-alpha-60: #dedede99;
--color-secondary-alpha-70: #dededeb3;
--color-secondary-alpha-80: #dededecc;
--color-secondary-alpha-90: #dededee1;
/* console colors */
--color-console-fg: #ffffff;
--color-console-bg: #171717;
/* colors */
--color-red: #db2828;
--color-orange: #f2711c;
--color-yellow: #fbbd08;
--color-olive: #b5cc18;
--color-green: #21ba45;
--color-teal: #00b5ad;
--color-blue: #2185d0;
--color-violet: #6435c9;
--color-purple: #a333c8;
--color-pink: #e03997;
--color-brown: #a5673f;
--color-grey: #888888;
--color-gold: #a1882b;
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */
--color-red-light: #e45e5e;
--color-orange-light: #f59555;
--color-yellow-light: #fcce46;
--color-olive-light: #d3e942;
--color-green-light: #46de6a;
--color-teal-light: #08fff4;
--color-blue-light: #51a5e3;
--color-violet-light: #8b67d7;
--color-purple-light: #bb64d8;
--color-pink-light: #e86bb1;
--color-brown-light: #c58b66;
--color-grey-light: #a6a6a6;
--color-gold-light: #cfb34a;
/* other colors */
--color-black: #1b1c1d;
--color-white: #ffffff;
--color-diff-removed-word-bg: #fdb8c0;
--color-diff-added-word-bg: #acf2bd;
--color-diff-removed-row-bg: #ffeef0;
--color-diff-moved-row-bg: #f1f8d1;
--color-diff-added-row-bg: #e6ffed;
--color-diff-removed-row-border: #f1c0c0;
--color-diff-moved-row-border: #d0e27f;
--color-diff-added-row-border: #e6ffed;
--color-diff-inactive: #f2f2f2;
--color-error-border: #e0b4b4;
--color-error-bg: #fff6f6;
--color-error-text: #9f3a38;
--color-success-border: #a3c293;
--color-success-bg: #fcfff5;
--color-success-text: #2c662d;
--color-warning-border: #c9ba9b;
--color-warning-bg: #fffaf3;
--color-warning-text: #573a08;
--color-info-border: #a9d5de;
--color-info-bg: #f8ffff;
--color-info-text: #276f86;
/* target-based colors */
--color-body: #ffffff;
--color-text-dark: #080808;
--color-text: #212121;
--color-text-light: #555555;
--color-text-light-2: #808080;
--color-text-light-3: #a0a0a0;
--color-box-header: #f7f7f7;
--color-box-body: #ffffff;
--color-footer: #ffffff;
--color-timeline: #ececec;
--color-input-text: #212121;
--color-input-background: #ffffff;
--color-input-border: #dedede;
--color-input-border-hover: #cecece;
--color-navbar: #f8f8f8;
--color-navbar-transparent: #f8f8f800;
--color-light: #00000006;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000001d;
--color-hover: #0000000f;
--color-active: #00000014;
--color-menu: #ffffff;
--color-card: #ffffff;
--color-markup-table-row: #00000008;
--color-markup-code-block: #00000010;
--color-button: #ffffff;
--color-code-bg: #ffffff;
--color-code-sidebar-bg: #f5f5f5;
--color-shadow: #00000030;
--color-secondary-bg: #f4f4f4;
--color-expand-button: #d8efff;
--color-placeholder-text: #aaa;
--color-editor-line-highlight: var(--color-primary-light-6);
--color-project-board-bg: var(--color-secondary-light-4);
--color-project-board-dark-label: #555555;
--color-project-board-light-label: #a6aab5;
--color-caret: var(--color-text-dark);
--color-reaction-bg: #0000000a;
--color-reaction-active-bg: var(--color-primary-alpha-20);
/* backgrounds */
--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>');
--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>');
}
:root * {
--fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji);
}
textarea {
font-family: var(--fonts-regular);
}
pre,
code,
kbd,
samp {
font-size: .9em; /* compensate for monospace fonts being usually slightly larger */
font-family: var(--fonts-monospace);
}
b,
strong,
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
}
body {
color: var(--color-text);
background-color: var(--color-body);
overflow-y: auto;
display: flex;
flex-direction: column;
overflow-wrap: break-word;
}
img {
border-radius: 3px;
}
table {
border-collapse: collapse;
}
details summary {
cursor: pointer;
}
details summary > * {
display: inline;
}
progress {
background: var(--color-secondary);
border-radius: 6px;
border: none;
overflow: hidden;
}
progress::-webkit-progress-bar {
background: var(--color-secondary);
}
progress::-webkit-progress-value {
background-color: var(--color-secondary-dark-3);
}
progress::-moz-progress-bar {
background: var(--color-secondary-dark-3);
}
* {
scrollbar-color: var(--color-primary) transparent;
caret-color: var(--color-caret);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 6px var(--color-primary);
border: 2px solid transparent;
border-radius: 5px !important;
}
::-webkit-scrollbar-thumb:window-inactive {
box-shadow: inset 0 0 0 6px var(--color-primary);
}
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 0 6px var(--color-primary-dark-2);
}
::-webkit-scrollbar-corner {
background: transparent;
}
::selection {
background: var(--color-primary-light-1) !important;
color: var(--color-white) !important;
}
::placeholder,
.ui.dropdown:not(.button) > .default.text,
.ui.default.dropdown:not(.button) > .text {
color: var(--color-placeholder-text) !important;
opacity: 1 !important;
}
a,
.ui.breadcrumb a {
color: var(--color-primary);
cursor: pointer;
text-decoration-skip-ink: all;
}
a.muted {
color: inherit;
}
a:hover,
a.muted:hover,
.ui.breadcrumb a:hover {
color: var(--color-primary);
}
a.label,
.repository-menu a,
.ui.search .results a,
.ui .menu a,
.ui.cards a.card,
.issue-keyword a,
a.commit-statuses-trigger {
text-decoration: none !important;
}
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.button {
&:extend(.unselectable);
}
.ui.breadcrumb a:hover {
text-decoration: underline !important;
}
.ui.breadcrumb .divider {
color: var(--color-text-light-2);
}
.page-content {
margin-top: 15px;
}
.page-content .header-wrapper,
.page-content .new-menu {
margin-top: -15px !important;
padding-top: 15px !important;
}
.ui.input.focus > input,
.ui.input > input:focus {
border-color: var(--color-primary);
}
/* currently used for search bar dropdowns in repo search and explore code */
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
min-width: 10em;
&:not(:focus):not(:hover) {
border-right-color: transparent;
}
}
.ui.action.input:not([class*="left action"]) > input:focus {
border-right-color: var(--color-primary);
}
.ui.menu,
.ui.vertical.menu {
background: var(--color-menu);
border-color: var(--color-secondary);
}
.ui.menu .item {
color: var(--color-text);
> .svg {
margin-right: .35em;
}
}
.ui.menu .item > .label {
background: var(--color-grey);
}
.ui.link.menu .item:hover,
.ui.menu .dropdown.item:hover,
.ui.menu .link.item:hover,
.ui.menu a.item:hover {
color: var(--color-text);
background: var(--color-hover);
}
.ui.menu .active.item,
.ui.menu .active.item:hover,
.ui.vertical.menu .active.item,
.ui.vertical.menu .active.item:hover {
color: var(--color-text);
background: var(--color-active);
}
.ui.link.menu .item:active,
.ui.menu .link.item:active,
.ui.menu a.item:active {
color: var(--color-text);
background: none;
}
.ui.ui.menu .item.disabled {
color: var(--color-text-light-3);
}
/* slightly more contrast for filters on issue list */
.ui.ui.menu .dropdown.item.disabled {
color: var(--color-text-light-2);
}
.ui.dropdown .menu {
background: var(--color-menu);
border-color: var(--color-secondary);
}
.ui.dropdown .menu > .header:not(.ui) {
color: var(--color-text);
}
.ui.dropdown .menu > .item {
color: var(--color-text);
}
.ui.dropdown .menu > .item:hover {
color: var(--color-text);
background: var(--color-hover);
}
.ui.dropdown .menu .active.item {
color: var(--color-text);
background: var(--color-active);
font-weight: normal;
}
/* fix misaligned images in webhook dropdown */
.ui.dropdown .menu > .item > img {
margin-top: -.25rem;
margin-bottom: -.25rem;
}
.ui.selection.dropdown .menu > .item {
border-color: var(--color-secondary);
}
.ui.selection.visible.dropdown > .text:not(.default) {
color: var(--color-text);
}
.ui.dropdown.selected,
.ui.dropdown .menu .selected.item {
color: var(--color-text);
background: var(--color-hover);
}
.ui.menu .ui.dropdown .menu > .selected.item {
color: var(--color-text) !important;
background: var(--color-hover) !important;
}
.ui.dropdown .menu > .message:not(.ui) {
color: var(--color-text-light-2);
}
.ui.secondary.menu .dropdown.item:hover,
.ui.secondary.menu .link.item:hover,
.ui.secondary.menu a.item:hover {
color: var(--color-text);
background: var(--color-hover);
}
.ui.secondary.menu .active.item,
.ui.secondary.menu .active.item:hover {
color: var(--color-text);
background: var(--color-active);
}
.ui.secondary.menu.tight .item {
padding-left: .85714286em;
padding-right: .85714286em;
}
.ui.menu .dropdown.item .menu {
background: var(--color-menu);
}
.ui.menu .ui.dropdown .menu > .item {
color: var(--color-text) !important;
}
.ui.menu .ui.dropdown .menu > .item:hover {
color: var(--color-text) !important;
background: var(--color-hover) !important;
}
.ui.menu .ui.dropdown .menu > .active.item {
color: var(--color-text) !important;
background: var(--color-active) !important;
}
.ui.message {
background: var(--color-box-body);
color: var(--color-text);
box-shadow: none !important;
border: 1px solid var(--color-secondary);
}
.ui.info.message,
.ui.attached.info.message,
.ui.blue.message,
.ui.attached.blue.message {
background: var(--color-info-bg);
color: var(--color-info-text);
border-color: var(--color-info-border);
}
.ui.success.message,
.ui.attached.success.message,
.ui.positive.message,
.ui.attached.positive.message {
background: var(--color-success-bg);
color: var(--color-success-text);
border-color: var(--color-success-border);
}
.ui.error.message,
.ui.attached.error.message,
.ui.red.message,
.ui.attached.red.message,
.ui.negative.message,
.ui.attached.negative.message {
background: var(--color-error-bg);
color: var(--color-error-text);
border-color: var(--color-error-border);
}
.ui.warning.message,
.ui.attached.warning.message,
.ui.yellow.message,
.ui.attached.yellow.message {
background: var(--color-warning-bg);
color: var(--color-warning-text);
border-color: var(--color-warning-border);
}
.ui.error.header {
background: var(--color-error-bg) !important;
color: var(--color-error-text) !important;
border-color: var(--color-error-border) !important;
}
.ui.error.segment {
border-color: var(--color-error-border) !important;
}
.ui.warning.header {
background: var(--color-warning-bg) !important;
color: var(--color-warning-text) !important;
border-color: var(--color-warning-border) !important;
}
.ui.warning.segment {
border-color: var(--color-warning-border) !important;
}
.ui.selection.active.dropdown,
.ui.selection.active.dropdown:hover,
.ui.selection.active.dropdown .menu,
.ui.selection.active.dropdown:hover .menu {
border-color: var(--color-primary-light-2);
}
.ui.selection.dropdown .menu {
margin: 0 -1.25px;
}
.ui.pointing.dropdown > .menu:not(.hidden)::after {
background: var(--color-box-body);
box-shadow: -1px -1px 0 0 var(--color-secondary);
}
.ui.cards > .card,
.ui.card {
background: var(--color-card);
border: 1px solid var(--color-secondary);
box-shadow: none;
}
.ui.cards > .card > .content,
.ui.card > .content {
border-color: var(--color-secondary);
}
.ui.cards > .card > .extra,
.ui.card > .extra,
.ui.cards > .card > .extra a:not(.ui),
.ui.card > .extra a:not(.ui) {
color: var(--color-text);
}
.ui.cards > .card > .extra a:not(.ui):hover,
.ui.card > .extra a:not(.ui):hover {
color: var(--color-primary);
}
.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
color: var(--color-text);
}
.ui.cards > .card > .content > .description,
.ui.card > .content > .description {
color: var(--color-text);
}
.ui.cards > .card .meta > a:not(.ui),
.ui.card .meta > a:not(.ui) {
color: var(--color-text-light-2);
}
.ui.cards > .card .meta > a:not(.ui):hover,
.ui.card .meta > a:not(.ui):hover {
color: var(--color-text);
}
.ui.cards a.card:hover,
.ui.link.cards .card:not(.icon):hover,
a.ui.card:hover,
.ui.link.card:hover {
border: 1px solid var(--color-secondary);
background: var(--color-card);
}
.ui.cards > .card > .extra,
.ui.card > .extra {
color: var(--color-text);
border-top-color: var(--color-secondary-light-1) !important;
}
.ui.comments .comment .text {
margin: 0;
}
.ui.comments .comment .text,
.ui.comments .comment .author {
color: var(--color-text);
}
.ui.comments .comment a.author:hover {
color: var(--color-primary);
}
.ui.comments .comment .metadata {
color: var(--color-text-light-2);
}
.ui.comments .comment .actions a {
color: var(--color-text-light);
}
.ui.comments .comment .actions a.active,
.ui.comments .comment .actions a:hover {
color: var(--color-primary);
}
.ui.attached.table {
border-color: var(--color-secondary);
}
.ui.table {
color: var(--color-text);
background: var(--color-body);
border-color: var(--color-secondary);
}
.ui.ui.selectable.table > tbody > tr:hover,
.ui.table tbody tr td.selectable:hover {
color: var(--color-text);
background-color: var(--color-secondary-alpha-40);
}
.ui.ui.ui.ui.table tr.grey:not(.marked),
.ui.ui.table td.grey:not(.marked) {
background: var(--color-body);
color: var(--color-text);
}
.ui.modal {
background: var(--color-body);
}
.ui.modal > .header {
border-color: var(--color-secondary);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.ui.modal > .close.inside,
.ui.fullscreen.modal > .close {
top: 11px; /* align modal close icon, for example admin notices */
color: var(--body-color);
}
.ui.basic.table > tbody > tr {
border-color: var(--color-secondary);
}
.ui.avatar.images .image,
.ui.avatar.images img,
.ui.avatar.images svg,
.ui.avatar.image img,
.ui.avatar.image svg,
.ui.avatar.image,
.ui.cards > .card img.avatar,
.ui.cards > .card .avatar img,
.ui.card img.avatar,
.ui.card .avatar img {
border-radius: var(--border-radius);
}
.ui.divided.list > .item {
border-color: var(--color-secondary);
}
.ui.link.list .item,
.ui.link.list a.item,
.ui.link.list .item a:not(.ui) {
color: var(--color-text);
}
.ui.link.list.list a.item:hover,
.ui.link.list.list .item a:not(.ui):hover,
.ui.link.list.list a.item:active,
.ui.link.list.list .item a:not(.ui):active {
color: var(--color-text-dark);
}
.ui.error.message .header,
.ui.warning.message .header {
color: inherit;
filter: saturate(2);
}
.dont-break-out {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
hyphens: auto;
}
.full.height {
flex-grow: 1;
padding-bottom: 80px;
}
.following.bar {
z-index: 900;
left: 0;
margin: 0 !important;
&.light {
background: var(--color-body);
border-bottom: 1px solid var(--color-secondary);
}
.column .menu {
margin-top: 0;
}
.top.menu a.item.brand {
padding-left: 0;
}
.brand .ui.mini.image {
width: 30px;
}
.top.menu a.item:hover,
.top.menu .dropdown.item:hover,
.top.menu .dropdown.item.active {
background-color: transparent;
}
.top.menu a.item:hover {
color: rgba(0, 0, 0, .45);
}
.top.menu .menu {
z-index: 900;
}
.fitted .svg {
margin-right: 0;
vertical-align: middle;
}
.searchbox {
background-color: #f4f4f4 !important;
&:focus {
background-color: #e9e9e9 !important;
}
}
.text .svg {
width: 16px;
text-align: center;
}
#navbar {
width: 100vw;
min-height: 52px;
padding: 0 .5rem;
}
#navbar .brand {
margin: 0;
}
#navbar .dropdown .avatar {
margin-right: 0 !important;
}
@media @mediaSm {
#navbar:not(.shown) > *:not(:first-child) {
display: none;
}
}
}
.right.stackable.menu {
// responsive fix: this makes sure that the right menu when the page
// is on mobile view will have elements stacked on top of each other.
// no, stackable won't work on right menus.
margin-left: auto;
display: flex;
align-items: inherit;
flex-direction: inherit;
}
.ui.dropdown .menu {
border-color: var(--color-secondary);
}
.ui.pagination.menu .active.item {
color: var(--color-text);
background: var(--color-active);
}
.ui.form .field > .selection.dropdown > .dropdown.icon {
height: auto;
}
.ui.loading.segment::before,
.ui.loading.form::before {
background: none;
}
.ui.loading.form > *,
.ui.loading.segment > * {
opacity: .35;
}
.ui.loading.loading.input > i.icon svg {
visibility: hidden;
}
.ui {
&.left:not(.action) {
float: left;
}
&.right:not(.action) {
float: right;
}
&.menu .item {
user-select: auto;
}
&.container {
&.fluid {
&.padded {
padding: 0 10px;
}
}
}
&.form {
.ui.button {
font-weight: normal;
}
}
&.floating.label {
z-index: 10;
}
&.transparent.label {
background-color: transparent;
}
&.menu,
&.vertical.menu,
&.segment {
box-shadow: none;
}
/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */
/* This fixes the commit graph button on the commits page */
.menu:not(.vertical) .item > .button.compact {
padding: .58928571em 1.125em;
}
.menu:not(.vertical) .item > .button.small {
font-size: .92857143rem;
}
&.menu .ui.dropdown.item .menu .item {
width: 100%;
}
&.dropdown .menu > .item > .floating.label {
z-index: 11;
}
&.dropdown .menu .menu > .item > .floating.label {
z-index: 21;
}
&.dropdown .menu > .header {
font-size: .8em;
}
.text {
&.red {
color: var(--color-red) !important;
a {
color: inherit !important;
&:hover {
color: var(--color-red-light) !important;
}
}
}
&.blue {
color: var(--color-blue) !important;
a {
color: inherit !important;
&:hover {
color: var(--color-blue-light) !important;
}
}
}
&.black {
color: var(--color-text);
&:hover {
color: var(--color-text-dark);
}
}
&.grey {
color: var(--color-text-light) !important;
a {
color: var(--color-text) !important;
&:hover {
color: var(--color-primary) !important;
}
}
}
&.light.grey {
color: var(--color-text-light-2) !important;
}
&.green {
color: var(--color-green) !important;
}
&.purple {
color: var(--color-purple) !important;
}
&.yellow {
color: var(--color-yellow) !important;
}
&.orange {
color: var(--color-orange) !important;
}
&.gold {
color: var(--color-gold) !important;
}
&.left {
text-align: left !important;
}
&.right {
text-align: right !important;
}
&.small {
font-size: .75em;
}
&.normal {
font-weight: normal;
}
&.italic {
font-style: italic;
}
&.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
&.thin {
font-weight: normal;
}
&.middle {
vertical-align: middle;
}
}
.message {
text-align: center;
}
.message > ul {
margin-left: auto;
margin-right: auto;
display: table;
text-align: left;
}
.header > i + .content {
padding-left: .75rem;
vertical-align: middle;
}
.info {
&.segment {
&.top {
h3,
h4 {
margin-top: 0;
}
h3:last-child {
margin-top: 4px;
}
> :last-child {
margin-bottom: 0;
}
}
}
}
.normal.header {
font-weight: normal;
}
.form {
.autofill-dummy {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -10000;
}
.sub.field {
margin-left: 25px;
}
}
.sha.label {
font-family: var(--fonts-monospace);
font-size: 13px;
padding: 6px 10px 4px;
font-weight: normal;
margin: 0 6px;
}
.button.copy-commit-sha {
border: 1px solid var(--color-light-border);
margin-right: 3px;
padding: 6px 6px 4px;
background: var(--color-light);
}
.button.truncate {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
white-space: nowrap;
margin-right: 6px;
}
&.status.buttons {
.svg {
margin-right: 4px;
}
}
&.inline.delete-button {
padding: 8px 15px;
font-weight: normal;
}
.background {
&.red {
background-color: var(--color-red) !important;
}
&.blue {
background-color: var(--color-blue) !important;
}
&.black {
background-color: var(--color-black) !important;
}
&.grey {
background-color: var(--color-grey) !important;
}
&.light.grey {
background-color: var(--color-grey) !important;
}
&.green {
background-color: var(--color-green) !important;
}
&.purple {
background-color: var(--color-purple) !important;
}
&.yellow {
background-color: var(--color-yellow) !important;
}
&.orange {
background-color: var(--color-orange) !important;
}
&.gold {
background-color: var(--color-gold) !important;
}
}
.migrate {
color: var(--color-text-light-2) !important;
a {
color: var(--color-text-light) !important;
&:hover {
color: var(--color-text) !important;
}
}
}
.border {
border: 1px solid;
&.red {
border-color: var(--color-red) !important;
}
&.blue {
border-color: var(--color-blue) !important;
}
&.black {
border-color: var(--color-black) !important;
}
&.grey {
border-color: var(--color-grey) !important;
}
&.light.grey {
border-color: var(--color-grey) !important;
}
&.green {
border-color: var(--color-green) !important;
}
&.purple {
border-color: var(--color-purple) !important;
}
&.yellow {
border-color: var(--color-yellow) !important;
}
&.orange {
border-color: var(--color-orange) !important;
}
&.gold {
border-color: var(--color-gold) !important;
}
}
.branch-tag-choice {
line-height: 20px;
}
&.pagination.menu {
@media @mediaSm {
.item:not(.active):not(.navigation),
.item.navigation span.navigation_label {
display: none;
}
}
&.narrow .item {
padding-left: 8px;
padding-right: 8px;
min-width: 1em;
text-align: center;
.icon {
margin-right: 0;
}
}
}
/* modal svg icons, copied from fomantic except width and height */
&.icon.header svg {
width: 3em;
height: 3em;
float: none;
display: block;
line-height: 1;
padding: 0;
margin: 0 auto .5rem;
opacity: 1;
}
/* center text in fomantic modal dialogs */
&.modal > .content {
text-align: center;
}
}
.ui.floating.dropdown {
.overflow.menu {
.scrolling.menu.items {
border-radius: 0 !important;
box-shadow: none !important;
border-bottom: 1px solid var(--color-secondary);
}
}
}
.user-menu > .item {
width: 100%;
border-radius: 0 !important;
}
.scrolling.menu {
.item.selected {
font-weight: 600 !important;
}
}
.ui.dropdown .scrolling.menu {
border-color: var(--color-secondary);
}
footer {
background-color: var(--color-footer);
border-top: 1px solid var(--color-secondary);
width: 100%;
flex-basis: 40px;
color: var(--color-text-light);
.container {
width: 100vw !important;
padding: 0 .5rem;
max-width: calc(100vw - 1rem) !important;
.links > * {
border-left: 1px solid var(--color-secondary);
padding-left: 8px;
margin-left: 5px;
&:first-child {
border-left: 0;
}
}
}
.ui.language {
.menu {
max-height: 500px;
overflow-y: auto;
margin-bottom: 7px;
}
.svg {
margin-right: .15em;
vertical-align: top;
margin-top: calc(2em - 16px);
}
}
.ui {
&.left,
&.right {
line-height: 40px;
}
}
}
.hide {
display: none;
&.show-outdated {
display: none !important;
}
&.hide-outdated {
display: none !important;
}
}
.center:not(.popup) {
text-align: center;
}
// Conditional display
@media @mediaMdAndUp {
.mobile-only,
.ui.button.mobile-only {
display: none;
}
// has the same behaviour of sr-only, hiding the content for
// non-screenreaders, but is shown on mobile devices.
.sr-mobile-only {
.sr-only();
}
}
@media @mediaSm {
.not-mobile {
display: none;
}
}
// Accessibility
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
@media @mediaMd {
.ui.container {
width: 95%;
}
}
.ui.menu.new-menu {
margin-bottom: 15px;
background: var(--color-navbar);
border-bottom: 1px solid var(--color-secondary) !important;
overflow: auto;
}
.ui.menu.new-menu .new-menu-inner {
display: flex;
margin-left: auto;
margin-right: auto;
overflow-x: auto;
}
.ui.menu.new-menu::after {
position: absolute;
display: block;
background: linear-gradient(to right, var(--color-navbar-transparent), var(--color-navbar) 100%);
content: '';
right: 0;
height: 39px;
width: 60px;
visibility: visible;
pointer-events: none;
}
.ui.menu.new-menu.shadow-body::after {
background: linear-gradient(to right, transparent, var(--color-body) 100%);
}
.ui.menu.new-menu .item {
margin: 0 !important;
}
@media @mediaSm {
.ui.menu.new-menu .item {
width: auto !important;
}
}
.ui.menu.new-menu .item:last-child {
padding-right: 30px !important;
}
.ui.menu.new-menu::-webkit-scrollbar {
height: 6px;
display: none;
}
.ui.menu.new-menu::-webkit-scrollbar-track {
background: none !important;
}
.ui.menu.new-menu::-webkit-scrollbar-thumb {
box-shadow: none !important;
}
.ui.menu.new-menu:hover::-webkit-scrollbar {
display: block;
}
[v-cloak] {
display: none !important;
}
.repos-search {
padding-bottom: 0 !important;
}
.repos-filter {
margin-top: 0 !important;
border-bottom-width: 0 !important;
margin-bottom: 2px !important;
justify-content: space-evenly;
}
.ui.secondary.pointing.menu.repos-filter .item {
padding-left: 4.5px;
padding-right: 4.5px;
}
.repo-title {
font-size: 1.5rem;
display: flex;
align-items: center;
flex: 1;
word-break: break-all;
color: var(--color-text-light);
.avatar {
width: 32px !important;
height: 32px !important;
}
.labels {
margin-left: .5rem;
> * + * {
margin-left: .5rem;
}
}
}
.repo-icon {
display: inline-block;
}
.activity-bar-graph {
background-color: var(--color-primary);
color: #fff;
}
.activity-bar-graph-alt {
color: #fff;
}
.archived-icon {
color: lighten(#000000, 70%) !important;
}
.oauth2-authorize-application-box {
margin-top: 3em !important;
}
/* multiple radio or checkboxes as inline element */
.inline-grouped-list {
display: inline-block;
vertical-align: top;
> .ui {
display: block;
margin-top: 5px;
margin-bottom: 10px;
&:first-child {
margin-top: 1px;
}
}
}
i.icons .icon:first-child {
margin-right: 0;
}
i.icon.centerlock {
top: 1em;
}
.ui.label {
padding: .3em .5em;
background: var(--color-light);
color: var(--color-text-light);
}
.ui.labels a.label:hover,
a.ui.label:hover {
background: var(--color-hover);
color: var(--color-text);
}
.ui.label > .detail .icons {
margin-right: .25em;
}
.ui.label > .detail .icons .icon {
margin-right: 0;
}
.lines-blame-btn {
padding-left: 10px;
padding-right: 10px;
text-align: right !important;
background-color: var(--color-code-sidebar-bg);
width: 2%;
}
.lines-num {
&:extend(.unselectable);
padding-left: 10px;
padding-right: 10px;
text-align: right !important;
color: rgba(27, 31, 35, .3);
width: 1%;
font-family: var(--fonts-monospace);
span {
&.bottom-line {
&::after {
border-bottom: 1px solid var(--color-secondary);
}
}
&::after {
content: attr(data-line-number);
line-height: 20px !important;
padding: 0 10px;
cursor: pointer;
display: block;
}
}
}
.lines-type-marker {
vertical-align: top;
}
.lines-num,
.lines-code {
font-size: 12px;
font-family: var(--fonts-monospace);
line-height: 20px;
padding-top: 0;
padding-bottom: 0;
vertical-align: top;
pre,
ol {
background-color: inherit;
margin: 0;
padding: 0 !important;
li {
display: block;
width: calc(100% - 1ch);
padding-left: 1ch;
}
}
}
.lines-escape {
width: 0;
}
.lines-code {
background-color: var(--color-code-bg);
padding-left: 5px;
}
.lines-code.active,
.lines-code .active {
background: #fffbdd !important;
}
.blame .lines-num {
padding: 0 !important;
background-color: var(--color-code-sidebar-bg);
}
.blame .lines-code {
padding: 0 !important;
}
.code-inner {
font: 12px var(--fonts-monospace);
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: break-word;
word-wrap: break-word;
}
.blame .code-inner {
white-space: pre;
word-break: normal;
word-wrap: normal; /* not using overflow-wrap because safari does not treat is an an alias */
}
.lines-commit {
&:extend(.unselectable);
vertical-align: top;
color: #999999;
padding: 0 !important;
background: var(--color-code-sidebar-bg);
width: 1%;
.blame-info {
&:extend(.unselectable);
width: 350px;
max-width: 350px;
display: block;
padding: 0 0 0 10px;
line-height: 20px;
box-sizing: content-box;
.blame-data {
display: flex;
font-family: var(--fonts-regular);
.blame-message {
flex-grow: 2;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.blame-time,
.blame-avatar {
flex-shrink: 0;
}
}
}
.ui.avatar.image {
height: 18px;
width: 18px;
display: block;
margin-top: 1px;
}
}
.top-line-blame {
border-top: 1px solid var(--color-secondary);
}
.lines-code,
.lines-commit {
.bottom-line {
border-bottom: 1px solid var(--color-secondary);
}
}
.code-view table {
width: 100%;
}
.octicon-tiny {
font-size: .85714286rem;
}
.ui.button {
background: var(--color-button);
border: 1px solid var(--color-light-border);
color: var(--color-text);
}
.page-content .ui.button {
box-shadow: none !important;
}
.ui.button:focus,
.ui.button:hover {
background: var(--color-hover);
color: var(--color-text);
}
.ui.button:active,
.ui.active.button:active,
.ui.active.button:hover {
background: var(--color-active);
color: var(--color-text);
}
.ui.button.no-text .icon {
margin: 0 !important;
}
.ui.buttons .button:first-child {
border-left: 1px solid var(--color-light-border);
}
.ui.buttons .button + .button {
border-left: none;
}
.two-toggle-buttons .button:not(.active):first-of-type {
border-right: none;
}
.two-toggle-buttons .button.active:last-of-type {
border-left: 1px solid var(--color-light-border);
}
.ui.labeled.button.disabled > .button,
.ui.basic.buttons .button,
.ui.basic.button {
color: var(--color-text-light);
background: var(--color-light);
}
.ui.basic.buttons .button:hover,
.ui.basic.button:hover {
color: var(--color-text);
background: var(--color-hover);
}
.ui.basic.buttons .button:focus,
.ui.basic.button:focus,
.ui.basic.buttons .button:active,
.ui.basic.button:active,
.ui.basic.buttons .active.button,
.ui.basic.active.button,
.ui.basic.buttons .active.button:hover,
.ui.basic.active.button:hover {
color: var(--color-text);
background: var(--color-active);
}
.ui.labeled.button > .label {
border-color: var(--color-light-border);
}
.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
background: var(--color-hover);
}
.ui.primary.button,
.ui.primary.buttons .button {
background-color: var(--color-primary) !important;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
background-color: var(--color-primary-dark-2) !important;
}
.ui.primary.button:focus,
.ui.primary.buttons .button:focus {
background-color: var(--color-primary-dark-3) !important;
}
.ui.basic.primary.button,
.ui.basic.primary.buttons .button {
box-shadow: inset 0 0 0 1px var(--color-primary) !important;
color: #fff !important;
}
.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover {
box-shadow: inset 0 0 0 1px var(--color-primary-dark-2) !important;
}
.ui.basic.primary.button:focus,
.ui.basic.primary.buttons .button:focus {
box-shadow: inset 0 0 0 1px var(--color-primary-dark-3) !important;
}
.ui.basic.secondary.buttons .button,
.ui.basic.secondary.button {
color: var(--color-secondary-dark-6) !important;
}
.ui.basic.secondary.buttons .button:hover,
.ui.basic.secondary.button:hover,
.ui.basic.secondary.buttons .button:active,
.ui.basic.secondary.button:active {
color: var(--color-secondary-dark-8) !important;
}
.ui.primary.label,
.ui.primary.labels .label {
background-color: var(--color-primary) !important;
border-color: var(--color-primary-dark-2) !important;
}
.ui.basic.labels .primary.label,
.ui.ui.ui.basic.primary.label {
background: transparent !important;
border-color: var(--color-primary) !important;
color: var(--color-primary) !important;
}
.ui.basic.labels .label,
.ui.basic.label {
background: var(--color-light);
border-color: var(--color-light-border);
color: var(--color-text-light);
}
.ui.basic.labels a.label:hover,
a.ui.basic.label:hover {
color: var(--color-text);
border-color: var(--color-light-border);
background: var(--color-hover);
}
.ui.label > img {
width: auto !important;
vertical-align: middle;
height: 2.1666em !important;
}
.svg {
span.green & {
color: var(--color-green);
}
span.red & {
color: var(--color-red);
}
span.purple & {
color: var(--color-purple);
}
}
.migrate .svg.gitea-git {
color: #f05133; /* from https://upload.wikimedia.org/wikipedia/commons/e/e0/Git-logo.svg */
}
.ui.popup {
background-color: var(--color-body);
color: var(--color-secondary-dark-6);
border-color: var(--color-secondary);
}
.ui.popup::before {
box-shadow: 1px 1px 0 0 var(--color-secondary);
}
.ui.bottom.popup::before,
.ui.top.popup::before,
.ui.right.center.popup::before,
.ui.left.center.popup::before {
background-color: var(--color-body);
}
.ui.bottom.left.popup::before,
.ui.bottom.right.popup::before,
.ui.bottom.center.popup::before {
box-shadow: -1px -1px 0 0 var(--color-secondary);
}
.ui.left.center.popup::before {
box-shadow: 1px -1px 0 0 var(--color-secondary);
}
.ui.right.center.popup::before {
box-shadow: -1px 1px 0 0 var(--color-secondary);
}
.ui.popup .ui.label {
margin-bottom: .4em;
}
.color-icon {
display: inline-block;
border-radius: 100%;
height: 14px;
width: 14px;
}
.ui.label > .color-icon {
margin-left: 0;
}
.invisible {
visibility: hidden;
}
.ui.segment,
.ui.segments,
.ui.attached.segment {
background: var(--color-box-body);
color: var(--color-text);
border-color: var(--color-secondary);
}
.ui.segments > .segment {
border-color: var(--color-secondary);
}
.ui.secondary.segment {
background: var(--color-secondary-bg);
color: var(--color-text-light);
}
.ui.attached.header {
position: relative;
background: var(--color-box-header);
border-color: var(--color-secondary);
.right .button {
padding: 8px 10px;
font-weight: normal;
}
}
/* fix misaligned right buttons on box headers */
.ui.attached.header .right:not(.dropdown) {
position: absolute;
right: .78571429rem;
top: 0;
bottom: 0;
height: 30px;
margin-top: auto;
margin-bottom: auto;
}
/* https://github.com/go-gitea/gitea/issues/10210 */
.ui.attached.segment ~ .ui.top.attached.header {
margin-top: 1rem;
}
table th[data-sortt-asc],
table th[data-sortt-desc] {
&:hover {
background: rgba(0, 0, 0, .1) !important;
cursor: pointer !important;
}
.svg {
margin-left: .25rem;
}
}
/* fix up SVG dropdown triangles because fomantic thinks they are icon fonts */
/* see https://github.com/go-gitea/gitea/issues/14014 */
.ui.dropdown > .dropdown.icon,
.btn-review > .dropdown.icon {
height: auto !important;
margin-left: .5rem !important;
margin-top: -1px !important;
margin-bottom: -1px !important;
margin-right: -.5rem !important;
}
.ui.button.dropdown > .dropdown.icon,
.btn-review > .dropdown.icon {
float: right !important;
@media (max-width: 480px) {
display: none;
}
}
.ui.selection.dropdown > .search.icon,
.ui.selection.dropdown > .delete.icon,
.ui.selection.dropdown > .dropdown.icon {
top: 0 !important;
}
.ui.dropdown.no-text > .dropdown.icon {
margin-left: 0 !important;
margin-right: 0 !important;
}
.ui.dropdown .menu .item {
border-radius: 0;
}
.ui.dropdown .menu .item:first-of-type {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.ui.dropdown .menu .item:last-of-type {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.text-label {
display: inline-flex !important;
align-items: center !important;
}
.emoji,
.reaction {
font-size: 1.25em;
line-height: 1;
font-style: normal !important;
font-weight: normal !important;
vertical-align: -.075em;
@supports (-webkit-hyphens:none) {
body:not(.safari-above125) & {
font-size: inherit;
vertical-align: inherit;
img {
font-size: 1.25em;
vertical-align: -.225em !important;
}
}
}
}
.emoji img,
.reaction img {
border-width: 0 !important;
margin: 0 !important;
width: 1em !important;
height: 1em !important;
vertical-align: -.15em;
}
.labelspage {
list-style: none;
padding-top: 0;
.item {
margin-top: 0;
margin-right: -14px;
margin-left: -14px;
padding: 10px;
border-bottom: 1px solid var(--color-secondary);
border-top: none;
a {
font-size: 15px;
padding-top: 5px;
padding-right: 10px;
color: var(--color-text-light);
&:hover {
color: var(--color-primary-light-2);
}
&.open-issues {
margin-right: 30px;
}
}
.ui.label {
font-size: 1em;
}
}
.item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.orglabel {
opacity: .7;
}
}
/* https://github.com/go-gitea/gitea/pull/11486 */
.ui.sub.header {
text-transform: none;
}
.ui.tabular.menu {
border-color: var(--color-secondary);
}
.ui.tabular.menu .item {
padding: 11px 12px;
color: var(--color-text-light-2);
}
.ui.tabular.menu .item:hover {
color: var(--color-text);
}
.ui.tabular.menu .active.item,
.ui.tabular.menu .active.item:hover {
background: var(--color-body);
border-color: var(--color-secondary);
color: var(--color-text);
margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
}
.ui.segment .ui.tabular.menu .active.item,
.ui.segment .ui.tabular.menu .active.item:hover {
background: var(--color-box-body);
}
.ui.secondary.pointing.menu {
border-color: var(--color-secondary);
}
.ui.secondary.pointing.menu .item {
color: var(--color-text-light-2);
}
.ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .active.item:hover,
.ui.secondary.pointing.menu .dropdown.item:hover,
.ui.secondary.pointing.menu .link.item:hover,
.ui.secondary.pointing.menu a.item:hover {
color: var(--color-text-dark);
}
.ui.header {
color: var(--color-text);
}
.ui.header .ui.label {
margin-left: .25rem;
}
.ui.header > .ui.label.compact {
margin-top: inherit;
}
.flash-error details code {
display: block;
text-align: left;
}
.truncated-item-container {
display: flex !important;
}
.ellipsis-button {
&:extend(.unselectable);
padding: 0 5px 8px !important;
display: inline-block !important;
font-weight: 600 !important;
line-height: 6px !important;
vertical-align: middle !important;
}
.truncated-item-name {
line-height: 2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: -.5em;
margin-bottom: -.5em;
}
.precolors {
padding-left: 0 !important;
padding-right: 0 !important;
margin: 3px 10px auto !important;
width: 120px !important;
.color {
float: left;
width: 15px;
height: 15px;
}
}
@media @mediaSm {
.ui.stackable.menu:not(.no-vertical-tabs) {
overflow-y: hidden;
overflow-x: auto;
flex-direction: row;
flex-wrap: nowrap !important;
.item {
width: initial !important;
}
}
}