@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 aphront-table-view-css
3 */
4
5.aphront-table-wrap {
6 overflow-x: auto;
7 -webkit-overflow-scrolling: touch;
8}
9
10.aphront-table-view {
11 width: 100%;
12 border-collapse: collapse;
13 background: {$page.content};
14 border: 1px solid {$lightblueborder};
15 border-bottom: 1px solid {$blueborder};
16}
17
18.aphront-table-view-fixed {
19 table-layout: fixed;
20}
21
22.aphront-table-view-fixed th {
23 box-sizing: border-box;
24}
25
26.aphront-table-notice {
27 padding: 12px 16px;
28 color: {$darkbluetext};
29 border-bottom: 1px solid {$thinblueborder};
30}
31
32.phui-two-column-view .aphront-table-notice .phui-info-view {
33 margin: 0;
34}
35
36.aphront-table-view tr.alt {
37 background: {$lightgreybackground};
38}
39
40.device-desktop .aphront-table-view tr:hover {
41 background: {$bluebackground};
42}
43
44.device-desktop .aphront-table-view tr.no-data:hover {
45 background: inherit;
46}
47
48.aphront-table-view th,
49.aphront-table-view td.header {
50 font-weight: bold;
51 white-space: nowrap;
52 color: {$bluetext};
53 background-color: {$lightbluebackground};
54}
55
56.aphront-table-view td.row-divider {
57 background-color: {$bluebackground};
58 font-weight: bold;
59 padding: 8px 12px;
60}
61
62.aphront-table-view td.indent {
63 padding-left: 24px;
64}
65
66.aphront-table-view th {
67 border-bottom: 1px solid {$thinblueborder};
68}
69
70th.aphront-table-view-sortable-selected {
71 background-color: {$greybackground};
72}
73
74.aphront-table-view th a,
75.aphront-table-view th a:hover,
76.aphront-table-view th a:link {
77 color: {$bluetext};
78 text-shadow: 0 1px 0 white;
79 display: block;
80 text-decoration: none;
81}
82
83.aphront-table-view th a:hover {
84 text-decoration: underline;
85 color: {$darkbluetext};
86}
87
88.aphront-table-view td.header {
89 text-align: right;
90 border-right: 1px solid {$thinblueborder};
91}
92
93.aphront-table-view td {
94 white-space: nowrap;
95 vertical-align: middle;
96 color: {$darkbluetext};
97}
98
99.aphront-table-down-sort {
100 display: inline-block;
101 margin-top: 5px;
102 width: 0;
103 height: 0;
104 vertical-align: top;
105 border-top: 4px solid {$bluetext};
106 border-right: 4px solid transparent;
107 border-left: 4px solid transparent;
108 content: "";
109}
110
111.aphront-table-up-sort {
112 display: inline-block;
113 margin-top: 5px;
114 width: 0;
115 height: 0;
116 vertical-align: top;
117 border-bottom: 4px solid {$bluetext};
118 border-right: 4px solid transparent;
119 border-left: 4px solid transparent;
120 content: "";
121}
122
123/* - Padding -------------------------------------------------------------------
124
125 On desktops, we have more horizontal space and use it to space columns out.
126
127 On devices, we make each row slightly taller to create a larger hit target
128 for links.
129
130*/
131
132.aphront-table-view th {
133 padding: 8px 10px;
134}
135
136.aphront-table-view td {
137 padding: 8px 10px;
138}
139
140.device-tablet .aphront-table-view th,
141.device-phone .aphront-table-view th {
142 overflow: hidden;
143}
144
145.aphront-table-view td.sorted-column {
146 background: {$lightbluebackground};
147}
148
149.aphront-table-view tr.alt td.sorted-column {
150 background: {$greybackground};
151}
152
153.aphront-table-view td.action {
154 padding-top: 1px;
155 padding-bottom: 1px;
156}
157
158.aphront-table-view td.larger {
159 font-size: {$biggerfontsize};
160}
161
162.aphront-table-view td.pri {
163 font-weight: bold;
164 color: {$darkbluetext};
165}
166
167.aphront-table-view td.top {
168 vertical-align: top;
169}
170
171/* Apply this rule to both "<th />" and "<td />" so that the header widths
172 are correct if the table has no rows. */
173.aphront-table-view th.wide,
174.aphront-table-view td.wide {
175 white-space: normal;
176 width: 100%;
177}
178
179.aphront-table-view th.right,
180.aphront-table-view td.right {
181 text-align: right;
182}
183
184.aphront-table-view td.mono {
185 font-family: "Monaco", monospace;
186 font-size: {$smallestfontsize};
187}
188
189.aphront-table-view td.n {
190 font-family: "Monaco", monospace;
191 font-size: {$smallestfontsize};
192 text-align: right;
193}
194
195.aphront-table-view td.nudgeright, .aphront-table-view th.nudgeright {
196 padding-right: 0;
197}
198
199.aphront-table-view td.wrap {
200 white-space: normal;
201}
202
203.aphront-table-view td.prewrap {
204 font-family: "Monaco", monospace;
205 font-size: {$smallestfontsize};
206 white-space: pre-wrap;
207}
208
209.aphront-table-view td.narrow {
210 width: 1px;
211}
212
213.aphront-table-view td.icon, .aphront-table-view th.icon {
214 width: 1px;
215 padding: 0px;
216}
217
218.aphront-table-view td.icon + td.icon {
219 padding-left: 8px;
220}
221
222div.single-display-line-bounds {
223 width: 100%;
224 position: relative;
225 overflow: hidden;
226}
227
228span.single-display-line-content {
229 white-space: pre;
230 position: absolute;
231}
232
233.device-phone span.single-display-line-content {
234 white-space: nowrap;
235 position: static;
236}
237
238.aphront-table-view td.object-link {
239 white-space: nowrap;
240 word-wrap: break-word;
241 overflow: hidden;
242 text-overflow: ellipsis;
243 min-width: 320px;
244 max-width: 320px;
245}
246
247.aphront-table-view tr.closed td.object-link .object-name,
248.aphront-table-view tr.alt-closed td.object-link .object-name {
249 text-decoration: line-through;
250 color: {$greytext};
251}
252
253.aphront-table-view tr.closed td.object-link a,
254.aphront-table-view tr.alt-closed td.object-link a {
255 color: {$greytext};
256}
257
258.aphront-table-view tr.closed td.graph-status,
259.aphront-table-view tr.alt-closed td.graph-status,
260.object-graph-table em {
261 color: {$lightgreytext};
262}
263
264.aphront-table-view tr.highlighted {
265 background: {$sh-yellowbackground};
266}
267
268.aphront-table-view tr.alt-highlighted {
269 background: {$sh-yellowbackground};
270}
271
272.aphront-table-view tr.diff-removed,
273.aphront-table-view tr.alt-diff-removed {
274 background: {$lightred}
275}
276
277.aphront-table-view tr.diff-added,
278.aphront-table-view tr.alt-diff-added {
279 background: {$lightgreen}
280}
281
282.aphront-table-view tr.no-data td {
283 padding: 16px;
284 text-align: center;
285 color: {$lightgreytext};
286 font-style: italic;
287}
288
289.aphront-table-view td.thumb img {
290 max-width: 64px;
291 max-height: 64px;
292}
293
294.aphront-table-view td.threads {
295 font-family: monospace;
296 white-space: pre;
297 padding: 0 0 0 8px;
298}
299
300.aphront-table-view td.threads canvas {
301 display: block;
302}
303
304.aphront-table-view td.radio {
305 text-align: center;
306 padding: 2px 4px 0px;
307}
308
309.aphront-table-view th.center,
310.aphront-table-view td.center {
311 text-align: center;
312}
313
314.device .aphront-table-view td + td.center,
315.device .aphront-table-view th + th.center {
316 padding-left: 3px;
317 padding-right: 3px;
318}
319
320.device-desktop .aphront-table-view-device {
321 display: none;
322}
323
324.device-tablet .aphront-table-view-nodevice,
325.device-phone .aphront-table-view-nodevice {
326 display: none;
327}
328
329.aphront-table-view td.link {
330 padding: 0;
331}
332
333.aphront-table-view td.link a {
334 display: block;
335 padding: 6px 8px;
336 font-weight: bold;
337}
338
339.phui-object-box .aphront-table-view {
340 border: none;
341}
342
343.object-graph-header {
344 padding: 8px 12px;
345 overflow: hidden;
346 background: {$gentle.highlight};
347 border-bottom: 1px solid {$lightblueborder};
348 vertical-align: middle;
349}
350
351.object-graph-header .object-graph-header-icon {
352 float: left;
353 margin-top: 10px;
354}
355
356.object-graph-header a.button {
357 float: right;
358}
359
360.object-graph-header-message {
361 margin: 8px 200px 8px 20px;
362}
363
364.device .object-graph-header .object-graph-header-icon {
365 display: none;
366}
367
368.device .object-graph-header-message {
369 clear: both;
370 margin: 0;
371}
372
373.device .object-graph-header a.button {
374 margin: 0 auto 12px;
375 display: block;
376 width: 180px;
377 float: none;
378}