@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-form-view-css
3 */
4
5.phui-form-view {
6 padding: 16px;
7}
8
9.device-phone .phui-object-box .phui-form-view {
10 padding: 0;
11}
12
13.phui-form-view.phui-form-full-width {
14 padding: 0;
15}
16
17.phui-form-view label.aphront-form-label {
18 width: 19%;
19 height: 28px;
20 line-height: 28px;
21 float: left;
22 text-align: right;
23 font-weight: bold;
24 font-size: {$normalfontsize};
25 color: {$bluetext};
26}
27
28.device-phone .phui-form-view label.aphront-form-label,
29.phui-form-full-width.phui-form-view label.aphront-form-label {
30 display: block;
31 float: none;
32 text-align: left;
33 width: 100%;
34 margin-bottom: 3px;
35}
36
37.aphront-form-input {
38 margin-left: 20%;
39 margin-right: 20%;
40 width: 60%;
41}
42
43.device-phone .aphront-form-input,
44.device .aphront-form-input select,
45.device .aphront-form-input pre,
46.phui-form-full-width .aphront-form-input {
47 margin-left: 0%;
48 margin-right: 0%;
49 width: 100%;
50}
51
52.aphront-form-input *::-webkit-input-placeholder {
53 color:{$greytext} !important;
54}
55
56.aphront-form-input *::-moz-placeholder {
57 color:{$greytext} !important;
58 opacity: 1; /* Firefox nudges the opacity to 0.4 */
59}
60
61.aphront-form-input > input[type="file"] {
62 max-width: stretch;
63 max-width: -moz-available;
64 max-width: -webkit-fill-available;
65}
66
67.aphront-form-error {
68 width: 18%;
69 float: right;
70 color: {$red};
71 font-weight: bold;
72 padding-top: 5px;
73}
74
75.aphront-form-label .aphront-form-error {
76 display: none;
77}
78
79.aphront-dialog-body .phui-form-view {
80 padding: 0;
81}
82
83.device-phone .aphront-form-error,
84.phui-form-full-width .aphront-form-error {
85 display: none;
86}
87
88.device-phone .aphront-form-label .aphront-form-error,
89.phui-form-full-width .aphront-form-label .aphront-form-error {
90 display: block;
91 float: right;
92 padding: 0;
93 width: auto;
94}
95
96.aphront-form-required {
97 font-weight: normal;
98 color: {$lightgreytext};
99 font-size: {$smallestfontsize};
100}
101
102.aphront-form-input input[type="text"],
103.aphront-form-input input[type="password"] {
104 width: 100%;
105}
106
107/* Reduce from 100% to 85% to avoid linebreak when displaying a Copy button */
108.aphront-form-input.has-copy-button input[type="text"],
109.aphront-form-input.has-copy-button textarea {
110 width: 85%;
111}
112
113.aphront-form-input.has-copy-button .button {
114 vertical-align: middle;
115 margin-left: 4px;
116}
117
118.aphront-form-cvc-input input {
119 width: 64px;
120}
121
122.aphront-form-input textarea {
123 display: block;
124 width: 100%;
125 box-sizing: border-box;
126 height: 12em;
127}
128
129.aphront-form-control {
130 padding: 4px;
131}
132
133.device-phone .aphront-form-control {
134 padding: 4px 8px 8px;
135}
136
137.phui-form-full-width .aphront-form-control {
138 padding: 4px 0;
139}
140
141.aphront-form-control-submit button,
142.aphront-form-control-submit a.button,
143.aphront-form-control-submit input[type="submit"] {
144 float: right;
145 margin: 4px 0 0 8px;
146}
147
148.aphront-form-control-textarea textarea.aphront-textarea-very-short {
149 height: 44px;
150}
151
152.aphront-form-control-textarea textarea.aphront-textarea-very-tall {
153 height: 24em;
154}
155
156.phui-form-view .aphront-form-caption {
157 font-size: {$smallerfontsize};
158 color: {$bluetext};
159 padding: 8px 0;
160 margin-right: 20%;
161 margin-left: 20%;
162 line-height: 16px;
163}
164
165.device-phone .phui-form-view .aphront-form-caption,
166.phui-form-full-width .phui-form-view .aphront-form-caption {
167 margin: 0;
168}
169
170.aphront-form-instructions {
171 width: 60%;
172 margin-left: 20%;
173 padding: 12px 4px;
174 color: {$darkbluetext};
175}
176
177.device .aphront-form-instructions,
178.phui-form-full-width .aphront-form-instructions {
179 width: auto;
180 margin: 0;
181 padding: 12px 8px 8px;
182}
183
184.aphront-form-control-markup .aphront-form-input {
185 font-size: {$normalfontsize};
186 padding: 3px 0;
187}
188
189.aphront-form-control-static .aphront-form-input {
190 line-height: 28px;
191}
192
193table.aphront-form-control-radio-layout,
194table.aphront-form-control-checkbox-layout {
195 margin-top: 4px !important;
196 font-size: {$normalfontsize};
197}
198
199table.aphront-form-control-radio-layout th {
200 padding-left: 8px;
201 padding-bottom: 8px;
202 font-weight: bold;
203 color: {$darkgreytext};
204}
205
206
207table.aphront-form-control-checkbox-layout th {
208 padding-top: 2px;
209 padding-left: 8px;
210 padding-bottom: 4px;
211 color: {$darkgreytext};
212}
213
214.aphront-form-control-radio-layout td input,
215.aphront-form-control-checkbox-layout td input {
216 margin-top: 4px;
217 width: auto;
218}
219
220.aphront-form-control-radio-layout label.disabled,
221.aphront-form-control-checkbox-layout label.disabled {
222 color: {$greytext};
223}
224
225.aphront-form-radio-caption {
226 margin-top: 4px;
227 font-size: {$smallerfontsize};
228 font-weight: normal;
229 color: {$bluetext};
230}
231
232.aphront-form-input hr {
233 border: none;
234 background: #bbbbbb;
235 height: 1px;
236 position: relative;
237}
238
239.phui-form-inset {
240 margin: 12px 0;
241 padding: 8px;
242 background: {$form-inset-background};
243 border: 1px solid {$lightblueborder};
244 border-radius: 3px;
245}
246
247.phui-form-inset h1 {
248 color: {$bluetext};
249 padding-bottom: 8px;
250 margin-bottom: 8px;
251 font-size: {$biggerfontsize};
252 border-bottom: 1px solid {$thinblueborder};
253}
254
255body .phui-form-view .remarkup-assist-textarea.aphront-textarea-drag-and-drop {
256 background: {$sh-greenbackground};
257 border: 1px solid {$sh-greenborder};
258}
259
260.calendar-button {
261 display: inline;
262 padding: 8px 4px;
263 margin: 2px 8px 2px 2px;
264 position: relative;
265}
266
267.aphront-form-date-container {
268 position: relative;
269 display: inline;
270}
271
272.aphront-form-date-container select {
273 margin: 2px;
274 display: inline;
275}
276.aphront-form-date-container input.aphront-form-date-enabled-input {
277 width: auto;
278 display: inline;
279 margin-right: 8px;
280 font-size: 16px;
281}
282
283.aphront-form-date-container .aphront-form-time-input-container,
284.aphront-form-date-container .aphront-form-date-input-container {
285 position: relative;
286 display: inline-block;
287 width: 7em;
288}
289
290.aphront-form-date-container input.aphront-form-time-input,
291.aphront-form-date-container input.aphront-form-date-input {
292 width: 7em;
293}
294
295.aphront-form-time-input-container div.jx-typeahead-results a.jx-result {
296 border: none;
297}
298
299.phui-time-typeahead-value {
300 padding: 4px;
301}
302
303.fancy-datepicker {
304 position: absolute;
305 width: 240px;
306}
307
308.device .fancy-datepicker {
309 width: 100%;
310}
311
312.fancy-datepicker-core {
313 width: 240px;
314 margin: 0 auto;
315 padding: 1px;
316 font-size: {$smallerfontsize};
317 text-align: center;
318}
319
320.fancy-datepicker-core .month-table,
321.fancy-datepicker-core .day-table {
322 margin: 0 auto;
323 border-collapse: separate;
324 border-spacing: 1px;
325 width: 100%;
326}
327
328.fancy-datepicker-core .month-table {
329 margin-bottom: 6px;
330 font-size: {$normalfontsize};
331 background-color: {$hoverblue};
332 border-radius: 2px;
333}
334
335.fancy-datepicker-core .month-table td.lrbutton {
336 width: 18%;
337 color: {$lightbluetext};
338}
339
340.fancy-datepicker-core .month-table td {
341 padding: 4px;
342 font-weight: bold;
343 color: {$bluetext};
344}
345
346.fancy-datepicker-core .month-table td.lrbutton:hover {
347 border-radius: 2px;
348 background: {$hoverselectedblue};
349 color: {$darkbluetext};
350}
351
352.fancy-datepicker-core .day-table td {
353 overflow: hidden;
354 vertical-align: middle;
355 text-align: center;
356 border: 1px solid {$thinblueborder};
357 padding: 4px 0;
358}
359
360.fancy-datepicker .fancy-datepicker-core .day-table td.day:hover {
361 background-color: {$hoverblue};
362 border-color: {$lightblueborder};
363}
364
365.fancy-datepicker-core .day-table td.day-placeholder {
366 border-color: transparent;
367 background: transparent;
368}
369
370.fancy-datepicker-core .day-table td.weekend {
371 color: {$lightgreytext};
372 border-color: {$lightgreyborder};
373 background: {$lightgreybackground};
374}
375
376.fancy-datepicker-core .day-table td.day-name {
377 background: transparent;
378 border: 1px transparent;
379 vertical-align: bottom;
380 color: {$lightgreytext};
381}
382
383.fancy-datepicker-core .day-table td.today {
384 background: {$greybackground};
385 border-color: {$greyborder};
386 color: {$darkgreytext};
387 font-weight: bold;
388}
389
390.fancy-datepicker-core .day-table td.datepicker-selected {
391 background: {$lightgreen};
392 border-color: {$green};
393 color: {$green};
394}
395
396.fancy-datepicker-core td {
397 cursor: pointer;
398}
399
400.fancy-datepicker-core td.novalue {
401 cursor: inherit;
402}
403
404.picker-open .calendar-button .phui-icon-view {
405 color: {$sky};
406}
407
408.fancy-datepicker-core {
409 background-color: {$page.content};
410 border: 1px solid {$lightgreyborder};
411 box-shadow: {$dropshadow};
412 border-radius: 3px;
413}
414
415/* When the activation checkbox for the control is toggled off, visually
416disable the individual controls. We don't actually use the "disabled" property
417because we still want the values to submit. This is just a visual hint that
418the controls won't be used. The controls themselves are still live, work
419properly, and submit values. */
420.datepicker-disabled select,
421.datepicker-disabled .calendar-button,
422.datepicker-disabled input[type="text"] {
423 opacity: 0.5;
424}
425
426.aphront-form-date-container.no-time .aphront-form-time-input{
427 display: none;
428}
429
430.login-to-comment {
431 margin: 12px;
432}
433
434.phui-form-divider hr {
435 height: 1px;
436 border: 0;
437 background: {$thinblueborder};
438 width: 85%;
439 margin: 15px auto;
440}
441
442.phabricator-standard-custom-field-header {
443 font-size: 16px;
444 color: {$bluetext};
445 border-bottom: 1px solid {$lightbluetext};
446 padding: 16px 0 4px;
447 margin-bottom: 4px;
448}
449
450.device-desktop .text-with-submit-control-outer-bounds {
451 position: relative;
452}
453
454.device-desktop .text-with-submit-control-text-bounds {
455 position: absolute;
456 left: 0;
457 right: 184px;
458}
459
460.device-desktop .text-with-submit-control-submit-bounds {
461 text-align: right;
462}
463
464.device-desktop .text-with-submit-control-submit {
465 width: 180px;
466}
467
468.phui-form-iconset-table td {
469 vertical-align: middle;
470 padding: 4px 0;
471}
472
473.phui-form-iconset-table .phui-form-iconset-button-cell {
474 padding: 4px 8px;
475}
476
477.aphront-form-preview-hidden {
478 display: none;
479}
480
481.aphront-form-error .phui-icon-view {
482 float: right;
483 color: {$lightgreyborder};
484 font-size: 20px;
485}
486
487.device-desktop .aphront-form-error .phui-icon-view:hover {
488 color: {$red};
489}
490
491.phui-form-static-action {
492 height: 28px;
493 line-height: 28px;
494 color: {$bluetext};
495}
496
497.phuix-form-checkbox-action {
498 padding: 4px;
499 color: {$bluetext};
500}
501
502.phuix-form-checkbox-action input[type=checkbox] {
503 margin: 4px 0;
504}
505
506.phuix-form-checkbox-label {
507 margin-left: 4px;
508}
509
510.phui-form-timer-icon {
511 width: 28px;
512 height: 28px;
513 padding: 4px;
514 font-size: 18px;
515 background: {$greybackground};
516 border-radius: 4px;
517 text-align: center;
518 vertical-align: middle;
519}
520
521.phui-form-timer-content {
522 padding: 4px 8px;
523 color: {$darkgreytext};
524 vertical-align: middle;
525}
526
527.mfa-form-enroll-button {
528 text-align: center;
529}
530
531.phui-form-timer-updated {
532 animation: phui-form-timer-fade-in 2s linear;
533}
534
535
536@keyframes phui-form-timer-fade-in {
537 0% {
538 background-color: {$lightyellow};
539 }
540 100% {
541 background-color: transparent;
542 }
543}