@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-header-view-css
3 */
4
5.phui-header-shell {
6 border-bottom: 1px solid {$thinblueborder};
7 overflow: hidden;
8 padding: 0 4px 12px;
9}
10
11.phui-header-view {
12 display: table;
13 width: 100%
14}
15
16.phui-header-row {
17 display: table-row;
18}
19
20.phui-header-col1 {
21 display: table-cell;
22 vertical-align: middle;
23 width: 62px;
24}
25
26.phui-header-col2 {
27 display: table-cell;
28 vertical-align: middle;
29 word-break: break-word;
30}
31
32.phui-header-col3 {
33 display: table-cell;
34 vertical-align: middle;
35}
36
37body .phui-header-shell.phui-header-no-background {
38 background-color: transparent;
39 border: none;
40}
41
42body .phui-header-shell.phui-bleed-header {
43 background-color: #fff;
44 border-bottom: 1px solid {$thinblueborder};
45 width: auto;
46 margin: 16px;
47}
48
49body .phui-header-shell.phui-bleed-header
50 .phui-header-view {
51 padding: 8px 24px 8px 0;
52 color: {$darkbluetext};
53}
54
55details > summary.phui-header-shell {
56 cursor: pointer;
57 list-style: none;
58}
59
60details > summary.phui-header-shell::marker {
61 content: none;
62}
63
64details > summary.phui-header-shell::-webkit-details-marker {
65 display: none;
66}
67
68.device-phone details > summary.phui-header-shell::after,
69.device-tablet details > summary.phui-header-shell::after {
70 font-family: FontAwesome;
71 content: "\f061";
72}
73
74.device-phone details[open] > summary.phui-header-shell::after,
75.device-tablet details[open] > summary.phui-header-shell::after {
76 font-family: FontAwesome;
77 content: "\f063";
78}
79
80.phui-property-list-view + .diviner-document-section {
81 margin-top: -1px;
82}
83
84.phui-header-view {
85 position: relative;
86 font-size: {$normalfontsize};
87}
88
89.phui-header-header {
90 font-size: 16px;
91 line-height: 24px;
92 color: {$darkbluetext};
93}
94
95.phui-header-header .phui-header-icon {
96 margin-right: 8px;
97 color: {$lightbluetext};
98
99 /* This allows the header text to be triple-clicked to select it in Firefox,
100 see T10905 for discussion. */
101 display: inline;
102}
103
104.phui-object-box .phui-header-tall .phui-header-header,
105.phui-document-view .phui-header-tall .phui-header-header {
106 font-size: 18px;
107}
108
109.phui-header-view .phui-header-header a {
110 color: {$darkbluetext};
111}
112
113.phui-box-blue-property .phui-header-view .phui-header-header a {
114 color: {$bluetext};
115}
116
117.device-desktop .phui-header-view .phui-header-header a:hover {
118 text-decoration: none;
119 color: {$blue};
120}
121
122.phui-header-view .phui-header-action-links {
123 float: right;
124}
125
126.phui-object-box .phui-header-view .phui-header-action-links {
127 margin-right: 4px;
128 font-size: {$normalfontsize};
129}
130
131.phui-header-action-link {
132 margin-bottom: 4px;
133 margin-top: 4px;
134 float: right;
135}
136
137.device-phone .phui-header-action-link .phui-button-text {
138 visibility: hidden;
139 width: 0;
140 margin-left: 8px;
141}
142
143.device-phone .phui-header-action-link.button .phui-icon-view {
144 width: 12px;
145 text-align: center;
146}
147
148.phui-header-divider {
149 margin: 0 4px;
150 font-weight: normal;
151 color: {$lightbluetext};
152}
153
154.phui-header-image {
155 display: inline-block;
156 background-repeat: no-repeat;
157 background-size: 100%;
158 width: 50px;
159 height: 50px;
160 border-radius: 3px;
161}
162
163.phui-header-image-href {
164 position: relative;
165 display: block;
166}
167
168.phui-header-image-edit {
169 display: none;
170}
171
172.device-desktop .phui-header-image-href:hover .phui-header-image-edit {
173 display: block;
174 position: absolute;
175 left: 0;
176 background: rgba({$alphablack},0.4);
177 color: #fff;
178 font-weight: normal;
179 bottom: 4px;
180 padding: 4px 8px;
181 font-size: 12px;
182}
183
184.device-desktop .phui-header-image-edit:hover {
185 text-decoration: underline;
186}
187
188.phui-header-subheader {
189 font-weight: normal;
190 font-size: {$biggerfontsize};
191 margin-top: 8px;
192 display: flex;
193 flex-wrap: wrap;
194 align-items: center;
195}
196
197.phui-header-subheader .phui-icon-view {
198 margin-right: 4px;
199}
200
201.phui-header-subheader .phui-tag-view span.phui-icon-view,
202.phui-header-subheader .policy-header-callout span.phui-icon-view {
203 display: inline-block;
204 margin: -2px 4px -2px 0;
205 font-size: 15px;
206}
207
208.phui-header-subheader,
209.phui-header-subheader .policy-link {
210 color: {$darkbluetext};
211}
212
213.policy-header-callout,
214.phui-header-subheader .phui-tag-core {
215 padding: 3px 9px;
216 border-radius: 3px;
217 background: rgba({$alphablue}, 0.1);
218 margin-right: 8px;
219 margin-bottom: 8px;
220 border-color: transparent;
221}
222
223
224.phui-header-subheader .phui-tag-view,
225.phui-header-subheader .phui-tag-type-shade .phui-tag-core {
226 border: none;
227 font-weight: normal;
228}
229
230.policy-header-callout.policy-adjusted-special {
231 background: {$sh-indigobackground};
232}
233
234.policy-header-callout.policy-adjusted-special .policy-link,
235.policy-header-callout.policy-adjusted-special .phui-icon-view {
236 color: {$sh-indigotext};
237}
238
239.policy-header-callout.policy-adjusted-locked {
240 background: {$sh-pinkbackground};
241}
242
243.policy-header-callout.policy-adjusted-locked .policy-link,
244.policy-header-callout.policy-adjusted-locked .phui-icon-view {
245 color: {$sh-pinktext};
246}
247
248.policy-header-callout .policy-tier-separator {
249 padding: 0 0 0 4px;
250 color: {$lightgreytext};
251}
252
253.phui-header-action-links .phui-mobile-menu {
254 display: none;
255}
256
257.device .phui-header-action-links .phui-mobile-menu {
258 display: inline-block;
259}
260
261.phui-header-action-list {
262 float: right;
263}
264
265.phui-header-action-list li {
266 margin: 0 0 0 8px;
267 float: right;
268}
269
270.phui-header-action-list .phui-header-action-item .phui-icon-view {
271 height: 18px;
272 width: 16px;
273 font-size: 16px;
274 line-height: 20px;
275 display: block;
276}
277
278.spaces-name {
279 color: {$lightbluetext};
280}
281
282.phui-object-box .phui-header-tall .spaces-name {
283 font-size: 18px;
284}
285
286.spaces-name .phui-handle,
287.spaces-name a.phui-handle,
288.phui-profile-header.phui-header-shell .spaces-name .phui-handle {
289 color: {$sh-redtext};
290}
291
292.device-desktop .spaces-name a.phui-handle:hover {
293 color: {$sh-redtext};
294 text-decoration: underline;
295}
296
297
298/*** Profile Header ***********************************************************/
299
300.phui-profile-header {
301 padding: 24px 20px 20px 24px;
302}
303
304.device-phone .phui-profile-header {
305 padding: 12px;
306}
307
308.phui-profile-header.phui-header-shell {
309 margin: 0;
310 border: none;
311}
312
313.phui-profile-header .phui-header-image {
314 height: 80px;
315 width: 80px;
316}
317
318.phui-profile-header .phui-header-col1 {
319 width: 96px;
320}
321
322.phui-profile-header .phui-header-subheader {
323 margin-top: 12px;
324}
325
326.phui-profile-header.phui-header-shell .phui-header-header {
327 font-size: 24px;
328 color: {$blacktext};
329}
330
331.phui-profile-header.phui-header-shell .phui-header-header a {
332 color: {$blacktext};
333}
334
335.phui-header-view .phui-tag-indigo a {
336 color: {$sh-indigotext};
337}