loading up the forgejo repo on tangled to test page performance
1.list-header {
2 display: flex;
3 align-items: center;
4 flex-wrap: wrap;
5 gap: .5rem;
6}
7
8.list-header-sort {
9 display: flex;
10 align-items: center;
11 padding-left: 1rem;
12 padding-right: 1rem;
13}
14
15.list-header-search {
16 display: flex;
17 flex: 1;
18 align-items: center;
19 flex-wrap: wrap;
20 justify-content: center;
21 min-width: 200px; /* to enable flexbox wrapping on mobile */
22}
23
24.list-header-search .input {
25 flex: 1;
26}
27
28.small-menu-items {
29 min-height: 35.4px !important; /* match .small.button in height */
30 background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
31}
32
33.small-menu-items .item {
34 background: var(--color-menu) !important;
35 padding-top: 6px !important;
36 padding-bottom: 6px !important;
37}
38
39.small-menu-items .item:hover {
40 background: var(--color-hover) !important;
41}
42
43.small-menu-items .item.active {
44 background: var(--color-active) !important;
45}
46
47@media (max-width: 767.98px) {
48 .list-header-search {
49 order: 0;
50 }
51 .list-header-toggle {
52 order: 1;
53 }
54 .list-header-sort {
55 order: 2;
56 margin-left: auto;
57 }
58}