@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
1/**
2 * @provides phui-list-view-css
3 */
4
5.phui-list-item-view {
6 position: relative;
7}
8
9.phui-list-item-header,
10.phui-list-item-header a {
11 color: {$bluetext};
12 font-weight: bold;
13}
14
15/* - Sidenav and Actions -------------------------------------------------------
16
17 Sidebar and Action Menus
18
19*/
20
21.phui-list-sidenav {
22 padding: 4px 0;
23}
24
25.phui-list-sidenav .phui-list-item-type-label .phui-list-item-name {
26 font-weight: bold;
27 color: {$bluetext};
28 padding: 4px 8px 6px 8px;
29 display: block;
30}
31
32.phui-list-sidenav .phui-list-item-type-divider {
33 margin: 8px 8px 12px 8px;
34 border-bottom: 1px solid {$thinblueborder};
35}
36
37.phui-list-sidenav .phui-list-item-icon {
38 height: 14px;
39 width: 14px;
40 display: inline-block;
41 position: absolute;
42 top: 6px;
43 text-align: center;
44}
45
46.phui-list-sidenav .phui-list-item-icon + .phui-list-item-name {
47 padding-left: 20px;
48}
49
50.phui-list-sidenav .phui-list-item-has-icon {
51 margin: 0;
52 position: relative;
53}
54
55.phui-list-sidenav .phui-list-item-view {
56 overflow: hidden;
57}
58
59.phui-list-sidenav .phui-list-item-href {
60 display: block;
61 padding: 4px 16px;
62 clear: both;
63 color: {$darkgreytext};
64 line-height: 18px;
65}
66
67.phabricator-side-menu .phui-list-item-disabled .phui-list-item-href,
68.phui-list-sidenav .phui-list-item-disabled .phui-list-item-href {
69 color: {$lightgreytext};
70}
71
72.phui-list-sidenav .phui-list-item-has-icon .phui-list-item-href {
73 padding: 4px 10px;
74}
75
76.phabricator-side-menu .phui-list-item-has-icon .phui-list-item-indented {
77 padding-left: 24px;
78}
79
80.device-desktop .phui-list-sidenav .phui-list-item-href:hover {
81 background: {$sky};
82 color: white;
83 cursor: pointer;
84 text-decoration: none;
85}
86
87.device-desktop .phui-list-sidenav .phui-list-item-href:hover .phui-icon-view {
88 color: {$page.content};
89}
90
91/* - Top, Full Width Navigations -----------------------------------------------
92
93 Sets a page or box with a top navbar
94
95*/
96
97.phui-list-view.phui-list-navbar {
98 list-style: none;
99 overflow: hidden;
100}
101
102.phui-list-view.phui-list-navbar-horizontal {
103 border-bottom: 1px solid {$thinblueborder};
104}
105
106.phui-list-view.phui-list-navbar > li {
107 list-style: none;
108 display: block;
109}
110
111.phui-list-view.phui-list-navbar-horizontal > li {
112 float: left;
113 border-right: 1px solid {$thinblueborder};
114}
115
116.phui-list-navbar .phui-list-item-href {
117 color: {$bluetext};
118 line-height: 16px;
119}
120
121.phui-list-navbar-horizontal .phui-list-item-href {
122 padding: 8px 16px;
123}
124
125.phui-list-navbar-vertical .phui-list-item-href {
126 padding: 8px 12px;
127}
128
129.phui-list-navbar-vertical {
130 box-shadow: 0 1px 0 rgba({$alphablue}, 0.05);
131}
132
133.phui-list-navbar-vertical .phui-list-item-href {
134 display: block;
135 background: {$page.content};
136}
137
138.phui-list-navbar .phui-list-item-selected .phui-list-item-href {
139 background: {$lightbluebackground};
140 color: {$darkbluetext};
141 font-weight: bold;
142}
143
144.phui-tab-group-view-tab-column {
145 width: 220px;
146 border-right: 1px solid {$thinblueborder};
147 background: {$lightgreybackground};
148}
149
150.phui-list-navbar .phui-list-item-href:hover {
151 background: rgba(100,100,100,.1);
152 color: {$darkgreytext};
153 text-decoration: none;
154}
155
156.phui-list-navbar .phui-list-item-icon {
157 height: 14px;
158 width: 14px;
159 font-size: 14px;
160 text-align: center;
161}
162
163.phui-list-navbar-vertical .phui-list-item-icon {
164 margin-right: 8px;
165}
166
167.phui-list-navbar-horizontal .phui-list-item-icon {
168 display: block;
169}
170
171.device-phone .phui-list-view.phui-list-navbar-horizontal > li {
172 float: none;
173 border: none;
174}
175
176/* - Two Column View, Responsive Navigations -----------------------------------
177
178 Sets a two column page with a responsive, top navbar
179
180*/
181
182.phui-list-view.phui-list-tabbar {
183 list-style: none;
184 overflow: hidden;
185}
186
187.phui-list-view.phui-list-tabbar > li {
188 list-style: none;
189 float: left;
190 display: block;
191}
192
193.phui-list-view.phui-list-tabbar > li > * {
194 display: block;
195}
196
197.phui-list-tabbar .phui-list-item-href {
198 color: {$bluetext};
199 padding: 8px 24px;
200 line-height: 24px;
201 font-weight: bold;
202 font-size: {$biggerfontsize};
203 border-top: 4px solid transparent;
204}
205
206.phui-list-tabbar .phui-list-item-selected .phui-list-item-href {
207 color: {$sky};
208 border-bottom: 4px solid {$sky};
209}
210
211.phui-list-tabbar .phui-list-item-selected .phui-list-item-href
212 .phui-icon-view {
213 color: {$sky};
214}
215
216.device-desktop .phui-list-tabbar .phui-list-item-href:hover {
217 color: {$sky};
218 text-decoration: none;
219}
220
221.phui-list-tabbar .phui-list-item-icon {
222 height: 20px;
223 width: 20px;
224 display: none;
225 font-size: 20px;
226 text-align: center;
227}
228
229.device-phone .phui-list-tabbar .phui-list-item-icon {
230 display: inline-block;
231}
232
233.device-phone .phui-list-tabbar .phui-list-item-name {
234 display: none;
235}
236
237.device-phone .phui-list-tabbar .phui-list-item-href {
238 padding: 8px 16px;
239}
240
241.device-phone .phui-list-view.phui-list-navbar > li {
242 float: none;
243 border: none;
244}
245
246/* - Status Colors -------------------------------------------------------------
247
248 Colors for navbars
249
250*/
251
252.phui-list-item-warn .phui-list-item-href {
253 color: {$orange};
254}
255
256.phui-list-item-fail .phui-list-item-href {
257 color: {$red};
258}
259
260.phui-list-item-warn.phui-list-item-selected .phui-list-item-href,
261.phui-list-item-warn .phui-list-item-href:hover {
262 background: {$lightyellow};
263 color: rgba({$alphagrey},.9);
264}
265
266.phui-list-item-fail.phui-list-item-selected .phui-list-item-href,
267.phui-list-item-fail .phui-list-item-href:hover {
268 background: {$lightred};
269 color: rgba({$alphagrey},.9);
270}
271
272.phui-list-item-warn.phui-list-item-selected .phui-list-item-href:hover {
273 background: #fcf0bd;
274}
275
276.phui-list-item-fail.phui-list-item-selected .phui-list-item-href:hover {
277 background: #f5d3d0;
278}
279
280/* - Dashboards ------------------------------------------------------------ */
281
282.dashboard-panel .phui-list-view.phui-list-navbar {
283 border-left: 1px solid {$lightblueborder};
284 border-right: 1px solid {$lightblueborder};
285 border-bottom: 1px solid {$thinblueborder};
286}
287
288.dashboard-panel-disabled {
289 color: {$lightgreytext};
290}
291
292/* - Info Stack ------------------------------------------------------------ */
293
294.phui-info-view + .phui-list-view {
295 margin-top: 16px;
296 border-top: 1px solid {$thinblueborder};
297}
298
299/* - Action Icon ----------------------------------------------------------- */
300
301.phabricator-nav-local .phui-list-item-has-action-icon
302 .phui-list-item-action-href {
303 position: absolute;
304 width: 28px;
305 top: 0;
306 right: 0;
307 bottom: 0;
308 text-align: center;
309 line-height: 28px;
310 background-color: transparent;
311 display: none;
312}
313
314.phabricator-nav-local .phui-list-item-has-action-icon.phui-list-item-selected
315 .phui-list-item-href {
316 padding-right: 32px;
317}
318
319.phabricator-nav-local .phui-list-item-has-action-icon.phui-list-item-selected
320 .phui-list-item-action-href {
321 display: block;
322}
323
324.phabricator-nav-local .phui-list-item-has-action-icon
325 .phui-list-item-action-href:hover {
326 background-color: rgba({$alphablack},.05);
327}
328
329.phabricator-nav-local .phui-list-item-has-action-icon
330 .phui-list-item-action-icon {
331 opacity: 0.5;
332}
333
334.phabricator-nav-local .phui-list-item-has-action-icon
335 .phui-list-item-action-href:hover
336 .phui-list-item-action-icon {
337 opacity: 1;
338}
339
340/* - Item Counts ----------------------------------------------------------- */
341
342.phui-list-item-count {
343 position: absolute;
344 right: 7px;
345 top: 7px;
346 background: {$blue};
347 border-radius: 2px;
348 color: #fff;
349 font-weight: bold;
350 padding: 0 5px 1px;
351 font-size: {$smallestfontsize};
352}