@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 conpherence-message-pane-css
3 */
4
5.conpherence-message-pane,
6.loading .messages-loading-mask,
7.loading .messages-loading-icon,
8.conpherence-layout .conpherence-no-threads {
9 position: fixed;
10 left: 240px;
11 right: 240px;
12 top: 115px;
13 bottom: 0px;
14 min-width: 300px;
15 width: auto;
16}
17
18.device .conpherence-message-pane,
19.device .loading .messages-loading-mask,
20.device .loading .messages-loading-icon,
21.device .conpherence-layout .conpherence-no-threads {
22 left: 0;
23}
24
25.conpherence-layout .conpherence-content-pane .conpherence-no-threads {
26 top: 44px;
27 right: 0;
28 background: {$page.content};
29 z-index: 26;
30}
31
32.conpherence-layout .phui-big-info-view {
33 margin: 16px;
34}
35
36.conpherence-layout .conpherence-no-threads .phui-box-border {
37 border: none;
38 margin: 0;
39}
40
41.conpherence-show-more-messages {
42 display: block;
43 background: {$gentle.highlight};
44 margin: 10px;
45 text-align: center;
46 padding: 10px;
47 color: {$bluetext};
48}
49
50.conpherence-show-more-messages-loading {
51 font-style: italic;
52}
53
54.conpherence-message-pane .conpherence-messages {
55 position: fixed;
56 left: 240px;
57 right: 240px;
58 top: 115px;
59 bottom: 88px;
60 overflow-x: hidden;
61 overflow-y: auto;
62 -webkit-overflow-scrolling: touch;
63}
64
65.conpherence-messages.jx-scrollbar-frame {
66 overflow-y: hidden;
67}
68
69.conpherence-messages .jx-scrollbar-content > .conpherence-edited:first-child,
70.conpherence-messages > .conpherence-edited:first-child {
71 padding-top: 20px;
72}
73
74.conpherence-messages .conpherence-edited:last-child {
75 padding-bottom: 20px;
76}
77
78.conpherence-message-pane .conpherence-edited + .date-marker {
79 margin-top: 24px;
80}
81
82.device .conpherence-message-pane .conpherence-messages {
83 left: 0;
84 bottom: 44px;
85 box-shadow: none;
86}
87
88.device-phone .conpherence-message-pane .conpherence-messages {
89 left: 0;
90 right: 0;
91 bottom: 44px;
92 width: 100%;
93 box-shadow: none;
94}
95
96.conpherence-message-pane .phui-form-view {
97 border-width: 0;
98 height: 76px;
99 padding: 0 20px 12px;
100 position: fixed;
101 bottom: 0;
102 left: 240px;
103 right: 241px;
104}
105
106.conpherence-room-status {
107 font-size: {$smallerfontsize};
108 color: {$lightgreytext};
109 font-style: italic;
110 position: absolute;
111 bottom: 2px;
112 left: 24px;
113}
114
115.device .conpherence-room-status {
116 display: none;
117}
118
119.conpherence-no-pontificate .conpherence-message-pane .phui-form-view {
120 border-top: 1px solid {$thinblueborder};
121 text-align: center;
122}
123
124.conpherence-no-pontificate .conpherence-message-pane
125 .aphront-form-control-submit button,
126.conpherence-no-pontificate .conpherence-message-pane
127 .aphront-form-control-submit a.button {
128 margin: 4px 0 0 0;
129 float: none;
130}
131
132.conpherence-no-pontificate .phui-form-view .aphront-form-instructions {
133 margin: 24px 0 16px;
134 width: 100%;
135 padding: 0;
136 color: {$bluetext};
137 font-size: {$biggestfontsize};
138}
139
140.device .conpherence-message-pane .phui-form-view {
141 padding: 8px 8px;
142}
143
144.conpherence-message-pane .aphront-form-control-submit button,
145.conpherence-message-pane .aphront-form-control-submit a.button {
146 margin-top: 6px;
147}
148
149.device .conpherence-message-pane .aphront-form-control-submit button,
150.device .conpherence-message-pane .aphront-form-control-submit a.button {
151 margin-top: 13px;
152}
153
154/**
155 * When entering "Fullscreen Mode" in the remarkup control, we need to drop
156 * all of the "position: fixed" on parent elements or Chrome doesn't put the
157 * textarea on top.
158 */
159.remarkup-fullscreen-mode .conpherence-message-pane,
160.remarkup-fullscreen-mode .conpherence-message-pane .conpherence-messages,
161.remarkup-fullscreen-mode .conpherence-message-pane .phui-form-view,
162.remarkup-fullscreen-mode .conpherence-layout {
163 position: static;
164}
165
166.conpherence-message-pane .remarkup-assist-bar {
167 border-bottom: none;
168 border-top-left-radius: 3px;
169 border-top-right-radius: 3px;
170}
171
172.device .conpherence-message-pane .remarkup-assist-bar {
173 position: absolute;
174 top: 9px;
175 left: 9px;
176 width: 24px;
177 background: {$bluebackground};
178 border-radius: 3px;
179 border: none;
180}
181
182.device .conpherence-message-pane .remarkup-assist-button,
183.device .conpherence-message-pane .remarkup-assist-separator {
184 display: none;
185}
186
187.device .conpherence-message-pane
188 .remarkup-assist-button.remarkup-assist-upload {
189 display: block;
190}
191
192.device .conpherence-message-pane .phui-form-view {
193 left: 0;
194 height: 34px;
195 width: auto;
196}
197
198.device-phone .conpherence-message-pane .phui-form-view {
199 left: 0;
200 right: 0;
201 height: 34px;
202 width: auto;
203}
204
205.conpherence-layout .conpherence-message-pane .phui-form-view
206 div.aphront-form-input {
207 margin: 0;
208 width: 100%;
209}
210
211.conpherence-transaction-view {
212 padding: 2px 0px;
213 margin: 4px 20px;
214 background-size: 100%;
215 min-height: auto;
216}
217
218.device-phone .conpherence-transaction-view {
219 margin: 0 8px;
220}
221
222.conpherence-transaction-image {
223 float: left;
224 border-radius: 3px;
225 height: 35px;
226 width: 35px;
227 background-size: 35px;
228 position: absolute;
229 top: 5px;
230}
231
232.device-phone .conpherence-transaction-image {
233 height: 25px;
234 width: 25px;
235 background-size: 25px;
236}
237
238.conpherence-transaction-view .conpherence-transaction-detail {
239 border-width: 0;
240 margin-left: 45px;
241}
242
243.device-phone .conpherence-transaction-view .conpherence-transaction-detail {
244 margin-left: 32px;
245}
246
247.conpherence-transaction-view.date-marker {
248 padding: 0;
249 margin: 20px 20px 4px;
250 min-height: auto;
251}
252
253.device-phone .conpherence-transaction-view.date-marker {
254 margin: 12px 0 4px;
255}
256
257.device-tablet .conpherence-transaction-view.date-marker {
258 padding-left: 37px;
259}
260
261.conpherence-transaction-view.date-marker .date {
262 left: 40px;
263 font-size: {$normalfontsize};
264 padding: 0px 4px;
265}
266
267.device .conpherence-transaction-view.date-marker .date {
268 left: 4px;
269}
270
271.device-phone .conpherence-transaction-view.conpherence-edited {
272 min-height: 0;
273 color: {$lightgreytext};
274 margin: 0 8px;
275}
276
277.conpherence-transaction-view.conpherence-edited
278 .conpherence-transaction-content {
279 color: {$lightgreytext};
280 font-size: {$biggerfontsize};
281 font-style: italic;
282 margin: 0;
283 padding: 0;
284 float: left;
285 line-height: 20px;
286}
287
288.conpherence-transaction-view.conpherence-edited {
289 padding: 0;
290 margin-top: 0;
291 margin-bottom: 0;
292 min-height: inherit;
293}
294
295.conpherence-transaction-view.conpherence-edited + .conpherence-comment {
296 margin-top: 16px;
297}
298
299.conpherence-transaction-view.conpherence-edited +
300 .conpherence-transaction-view.date-marker {
301 margin-top: 24px;
302}
303
304.conpherence-transaction-view.conpherence-edited
305 .conpherence-transaction-header {
306 float: right;
307}
308
309.conpherence-transaction-view.conpherence-edited
310 .conpherence-transaction-content a {
311 color: {$darkbluetext};
312}
313
314.conpherence-transaction-view .conpherence-transaction-info {
315 margin: 0 8px;
316}
317
318.conpherence-transaction-view .conpherence-transaction-info,
319.conpherence-transaction-view .transaction-date,
320.conpherence-transaction-view .phabricator-content-source-view {
321 color: {$lightgreytext};
322 line-height: 16px;
323 font-size: {$smallerfontsize};
324}
325
326.conpherence-transaction-view .conpherence-transaction-content {
327 padding: 2px 0 8px 0;
328}
329
330body .conpherence-message-pane .aphront-form-control {
331 padding: 0;
332}
333
334.conpherence-message-pane .remarkup-assist-textarea {
335 height: 34px;
336 padding: 8px;
337 box-sizing: border-box;
338 border-bottom-left-radius: 3px;
339 border-bottom-right-radius: 3px;
340}
341
342.device .conpherence-message-pane .remarkup-assist-textarea {
343 margin: 0;
344 padding: 7px 8px 6px 38px;
345 width: 100%;
346 resize: none;
347 border-color: {$greyborder};
348 border-top-left-radius: 3px;
349 border-top-right-radius: 3px;
350}
351
352.device .conpherence-message-pane .aphront-form-control-submit {
353 padding: 0;
354 position: absolute;
355 top: -2px;
356 right: 12px;
357}
358
359.device .conpherence-message-pane .aphront-form-control-textarea {
360 float: left;
361 height: 24px;
362 width: 100%;
363}
364
365.conpherence-message .phabricator-remarkup .remarkup-code-block pre {
366 max-height: 200px;
367}
368
369.conpherence-transaction-collapsed .conpherence-transaction-image,
370.conpherence-transaction-collapsed .conpherence-transaction-header {
371 display: none;
372}
373
374.conpherence-message-pane
375 .conpherence-transaction-collapsed.conpherence-transaction-view {
376 margin-top: 0;
377 margin-bottom: 0;
378}
379
380/* this causes scrolling issues on iDevices */
381.device .conpherence-layout + .phabricator-standard-page-footer {
382 display: none;
383}
384
385/***** Thread Loading *********************************************************/
386
387.conpherence-layout .conpherence-loading-mask {
388 height: 0;
389 opacity: 0;
390 top: 0;
391 right: 0;
392 left: 240px;
393 bottom: 0;
394 transition: all 0.3s;
395 position: fixed;
396 background-color: {$page.content};
397}
398
399.conpherence-layout.loading .conpherence-loading-mask {
400 opacity: 1;
401 height: auto;
402}
403
404
405/***** Thread Search **********************************************************/
406
407.conpherence-search-main {
408 opacity: 0;
409 transition: all 0.2s;
410 position: absolute;
411 top: 0;
412 left: 0;
413 right: 0;
414 bottom: 0;
415 height: 0;
416}
417
418.show-searchbar .conpherence-search-main {
419 opacity: 1;
420 height: auto;
421}
422
423.conpherence-search-form-view {
424 display: none;
425}
426
427.show-searchbar .conpherence-search-form-view {
428 display: block;
429 height: 54px;
430 background: {$page.content};
431 position: absolute;
432 top: 0;
433 left: 0;
434 right: 0;
435}
436
437.conpherence-search-form-view input.conpherence-search-input {
438 padding-left: 8px;
439 width: calc(100% - 24px);
440 border-radius: 20px;
441 margin: 12px;
442}
443
444.conpherence-search-results {
445 position: absolute;
446 background: {$page.content};
447 top: 54px;
448 left: 0;
449 right: 0;
450 bottom: 0;
451 overflow-y: auto;
452}