loading up the forgejo repo on tangled to test page performance
1#navbar {
2 display: flex;
3 align-items: center;
4 justify-content: space-between;
5 background: var(--color-nav-bg);
6 border-bottom: 1px solid var(--color-secondary);
7 margin: 0 !important;
8 padding: 0 10px;
9}
10
11#navbar,
12#navbar .navbar-left,
13#navbar .navbar-right {
14 min-height: 49px; /* +1px border-bottom */
15}
16
17#navbar .navbar-left,
18#navbar .navbar-right {
19 margin: 0;
20 display: flex;
21 align-items: center;
22}
23
24#navbar-logo {
25 margin: 0;
26}
27
28#navbar .item {
29 min-height: 36px;
30 min-width: 36px;
31 padding-top: 3px;
32 padding-bottom: 3px;
33 display: flex;
34}
35
36#navbar > .menu > .item {
37 color: var(--color-nav-text);
38}
39
40#navbar .dropdown .item {
41 justify-content: stretch;
42}
43
44#navbar a.item:hover, #navbar a.item:focus,
45#navbar button.item:hover, #navbar button.item:focus {
46 background: var(--color-nav-hover-bg);
47}
48
49#navbar .secondary.menu > .item > .svg,
50#navbar .right.menu > .item > .svg {
51 margin-right: 0;
52}
53
54@media (max-width: 767.98px) {
55 #navbar {
56 align-items: stretch;
57 }
58 /* hide all items */
59 #navbar .item {
60 display: none;
61 }
62 #navbar #navbar-logo {
63 display: flex;
64 }
65 /* show the first navbar item (logo and its mobile right items) */
66 #navbar .navbar-left {
67 flex: 1;
68 display: flex;
69 justify-content: space-between;
70 }
71 #navbar .navbar-mobile-right {
72 display: flex;
73 margin-left: auto !important;
74 width: auto !important;
75 }
76 #navbar .navbar-mobile-right > .item {
77 display: flex;
78 width: auto !important;
79 }
80 /* show items if the navbar is open */
81 #navbar.navbar-menu-open {
82 padding-bottom: 8px;
83 }
84 #navbar.navbar-menu-open,
85 #navbar.navbar-menu-open .navbar-right {
86 flex-direction: column;
87 }
88 #navbar.navbar-menu-open .navbar-left {
89 display: flex;
90 flex-wrap: wrap;
91 }
92 #navbar.navbar-menu-open .item {
93 display: flex;
94 width: 100%;
95 margin: 0;
96 }
97 #navbar.navbar-menu-open .navbar-left #navbar-logo {
98 justify-content: flex-start;
99 width: auto;
100 }
101 #navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
102 justify-content: flex-end;
103 width: 50%;
104 min-height: 48px;
105 }
106 #navbar #mobile-notifications-icon {
107 margin-right: 6px !important;
108 }
109}
110
111#navbar a.item .notification_count {
112 color: var(--color-nav-bg);
113 padding: 0 3.75px;
114 font-size: 12px;
115 line-height: 12px;
116 font-weight: var(--font-weight-bold);
117}
118
119#navbar a.item:hover .notification_count,
120#navbar a.item:hover .header-stopwatch-dot {
121 border-color: var(--color-nav-hover-bg);
122}
123
124#navbar a.item .notification_count,
125#navbar a.item .header-stopwatch-dot {
126 background: var(--color-primary);
127 border: 2px solid var(--color-nav-bg);
128 position: absolute;
129 left: 6px;
130 top: -9px;
131 min-width: 17px;
132 height: 17px;
133 border-radius: 11px; /* (height + 2 * borderThickness) / 2 */
134 display: flex;
135 align-items: center;
136 justify-content: center;
137 z-index: 1; /* prevent menu button background from overlaying icon */
138}
139
140.secondary-nav {
141 background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
142}
143
144.issue-navbar {
145 display: flex;
146 justify-content: space-between;
147}