@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 phabricator-remarkup-css
3 */
4
5.phabricator-remarkup {
6 line-height: 1.7em;
7 word-break: break-word;
8}
9
10.phabricator-remarkup p {
11 margin: 0 0 12px;
12}
13
14.PhabricatorMonospaced,
15.phabricator-remarkup .remarkup-code-block .remarkup-code {
16 font: 11px/15px "Menlo", "Consolas", "Monaco", monospace;
17}
18
19.platform-windows .PhabricatorMonospaced,
20.platform-windows .phabricator-remarkup .remarkup-code-block .remarkup-code {
21 font: 12px/15px "Menlo", "Consolas", "Monaco", monospace;
22}
23
24.phabricator-remarkup .remarkup-code-block {
25 margin: 12px 0;
26 white-space: pre;
27}
28
29.phabricator-remarkup .remarkup-code-header {
30 padding: 6px 12px;
31 font-size: 13px;
32 font-weight: bold;
33 background: rgba({$alphablue},0.08);
34 display: table-cell;
35 border-top-left-radius: 3px;
36 border-top-right-radius: 3px;
37 overflow: hidden;
38}
39
40.phabricator-remarkup .code-block-counterexample .remarkup-code-header {
41 background-color: {$sh-redbackground};
42}
43
44.phabricator-remarkup .remarkup-code-block .remarkup-code-header + pre {
45 border-top-left-radius: 0;
46}
47
48.phabricator-remarkup .remarkup-code-block pre {
49 background: rgba({$alphablue},0.08);
50 display: block;
51 color: {$blacktext};
52 overflow: auto;
53 padding: 12px;
54 border-radius: 3px;
55 white-space: pre-wrap;
56}
57
58.phabricator-remarkup kbd {
59 display: inline-block;
60 min-width: 1em;
61 padding: 4px 5px 5px;
62 font-weight: normal;
63 font-size: 0.8rem;
64 text-align: center;
65 text-decoration: none;
66 line-height: 0.6rem;
67 border-radius: 3px;
68 box-shadow: inset 0 -1px 0 rgba({$alphablue},0.08);
69 -webkit-user-select: none;
70 user-select: none;
71 background: {$lightgreybackground};
72 border: 1px solid {$lightgreyborder};
73}
74
75.phabricator-remarkup .kbd-join {
76 padding: 0 4px;
77 color: {$lightgreytext};
78}
79
80.phabricator-remarkup pre.remarkup-counterexample {
81 background-color: {$sh-redbackground};
82}
83
84.phabricator-remarkup tt.remarkup-monospaced {
85 color: {$blacktext};
86 background: rgba({$alphablue},0.1);
87 padding: 1px 4px;
88 border-radius: 3px;
89 white-space: pre-wrap;
90}
91
92/* NOTE: You can currently produce this with [[link | `name`]]. Restore the
93 link color. */
94.phabricator-remarkup a tt.remarkup-monospaced {
95 color: {$anchor};
96}
97
98.phabricator-remarkup .remarkup-header tt.remarkup-monospaced {
99 font-weight: normal;
100}
101
102.phabricator-remarkup ul.remarkup-list {
103 list-style: disc;
104 margin: 12px 0 12px 30px;
105}
106
107.phabricator-remarkup ol.remarkup-list {
108 list-style: decimal;
109 margin: 12px 0 12px 30px;
110}
111
112.phabricator-remarkup ol ol.remarkup-list {
113 list-style: upper-alpha;
114}
115
116.phabricator-remarkup ol ol ol.remarkup-list {
117 list-style: lower-alpha;
118}
119
120.phabricator-remarkup ol ol ol ol.remarkup-list {
121 list-style: lower-roman;
122}
123
124.phabricator-remarkup .remarkup-list-with-checkmarks .remarkup-checked-item,
125.phabricator-remarkup .remarkup-list-with-checkmarks .remarkup-unchecked-item {
126 list-style: none;
127 margin-left: -20px;
128 position: relative;
129 padding-left: 22px;
130}
131
132.phabricator-remarkup .remarkup-list-with-checkmarks input {
133 visibility: hidden;
134 width: 0;
135}
136
137.phabricator-remarkup .remarkup-list-with-checkmarks
138 .remarkup-list-item::before {
139 height: 16px;
140 width: 16px;
141 background-size: 16px;
142 display: inline-block;
143 content: '';
144 position: absolute;
145 top: 3px;
146 left: 0;
147}
148
149.remarkup-list-with-checkmarks .remarkup-checked-item::before {
150 background-image: url(rsrc/image/controls/checkbox-checked.png);
151}
152
153.remarkup-list-with-checkmarks .remarkup-unchecked-item::before {
154 background-image: url(rsrc/image/controls/checkbox-unchecked.png);
155}
156
157.phabricator-remarkup .remarkup-list-with-checkmarks .remarkup-checked-item {
158 color: {$lightgreytext};
159}
160
161.phabricator-remarkup ul.remarkup-list ol.remarkup-list,
162.phabricator-remarkup ul.remarkup-list ul.remarkup-list,
163.phabricator-remarkup ol.remarkup-list ol.remarkup-list,
164.phabricator-remarkup ol.remarkup-list ul.remarkup-list {
165 margin: 4px 0 4px 24px;
166}
167
168.phabricator-remarkup .remarkup-list-item {
169 line-height: 1.7em;
170}
171
172.phabricator-remarkup li.phantom-item,
173.phabricator-remarkup li.phantom-item {
174 list-style-type: none;
175}
176
177.phabricator-remarkup .remarkup-header {
178 line-height: 1.4;
179 margin: 1em 0 0.75em;
180}
181
182.phabricator-remarkup h2.remarkup-header {
183 font-size: 28px;
184}
185
186.phabricator-remarkup h3.remarkup-header {
187 font-size: 24px;
188}
189
190.phabricator-remarkup h4.remarkup-header {
191 font-size: 22px;
192}
193
194.phabricator-remarkup h5.remarkup-header {
195 font-size: 18px;
196}
197
198.phabricator-remarkup h6.remarkup-header {
199 font-size: 16px;
200}
201
202.phabricator-remarkup blockquote {
203 border-left: 3px solid {$sh-blueborder};
204 color: {$darkbluetext};
205 font-style: italic;
206 margin: 4px 0 12px 0;
207 padding: 8px 12px;
208 background-color: {$lightbluebackground};
209}
210
211.phabricator-remarkup blockquote *:last-child {
212 margin-bottom: 0;
213}
214
215.phabricator-remarkup blockquote blockquote {
216 background-color: rgba(175,175,175, .1);
217}
218
219.phabricator-remarkup blockquote em {
220 /* In blockquote bodies, default text is italic so emphasized text should
221 be normal. */
222 font-style: normal;
223}
224
225.phabricator-remarkup blockquote div.remarkup-reply-head {
226 font-style: normal;
227 padding-bottom: 4px;
228}
229
230.phabricator-remarkup blockquote div.remarkup-reply-head em {
231 /* In blockquote headers, default text is normal so emphasized text should
232 be italic. See T10686. */
233 font-style: italic;
234}
235
236.phabricator-remarkup blockquote div.remarkup-reply-head
237 .phui-tag-core {
238 background-color: transparent;
239 border: none;
240 padding: 0;
241 color: {$darkbluetext};
242}
243
244.phabricator-remarkup audio {
245 display: block;
246 margin: 16px auto;
247 min-width: 240px;
248 width: 50%;
249}
250
251video.phabricator-media {
252 background: {$greybackground};
253}
254
255.phabricator-remarkup video {
256 display: block;
257 margin: 0 auto;
258 max-width: 95%;
259}
260
261.phabricator-remarkup video.video-thumb {
262 display: inline-block;
263 margin: 0 auto;
264 max-width: 400px;
265}
266
267.phui-remarkup-preview .phabricator-remarkup-mention-unknown {
268 font-weight: bold;
269 background: #ffaaaa;
270}
271
272.phabricator-remarkup .phriction-link {
273 font-weight: bold;
274}
275
276.phabricator-remarkup .phriction-link-missing {
277 color: {$red};
278 text-decoration: underline;
279}
280
281.phabricator-remarkup .phriction-link-lock {
282 color: {$greytext};
283}
284
285.phabricator-remarkup .remarkup-note {
286 margin: 16px 0;
287 padding: 12px;
288 border-left: 3px solid {$blue};
289 background: {$lightblue};
290}
291
292.phabricator-remarkup .remarkup-warning {
293 margin: 16px 0;
294 padding: 12px;
295 border-left: 3px solid {$yellow};
296 background: {$lightyellow};
297}
298
299.phabricator-remarkup .remarkup-important {
300 margin: 16px 0;
301 padding: 12px;
302 border-left: 3px solid {$red};
303 background: {$lightred};
304}
305
306.phabricator-remarkup .remarkup-note .remarkup-monospaced,
307.phabricator-remarkup .remarkup-important .remarkup-monospaced,
308.phabricator-remarkup .remarkup-warning .remarkup-monospaced {
309 background-color: rgba(150,150,150,.2);
310}
311
312.phabricator-remarkup .remarkup-note-word {
313 font-weight: bold;
314 color: {$darkbluetext};
315}
316
317.phabricator-remarkup-embed-layout-right {
318 text-align: right;
319}
320
321.phabricator-remarkup-embed-layout-center {
322 text-align: center;
323}
324
325.phabricator-remarkup-embed-layout-inline {
326 display: inline;
327}
328
329.phabricator-remarkup-embed-float-right {
330 float: right;
331 margin: .5em 1em 0;
332}
333
334.phabricator-remarkup-embed-layout-link {
335 padding: 6px 6px 6px 42px;
336 margin: 0 0 4px;
337 display: inline-block;
338 font-weight: bold;
339 border: 1px solid {$lightblueborder};
340 border-radius: 3px;
341 color: {$blacktext};
342 min-width: 256px;
343 position: relative;
344 line-height: 20px;
345 overflow: hidden;
346 min-height: 38px;
347}
348
349.phabricator-remarkup-embed-layout-icon {
350 font-size: 28px;
351 position: absolute;
352 top: 10px;
353 left: 10px;
354}
355
356.phabricator-remarkup-embed-layout-info {
357 color: {$lightgreytext};
358 font-size: {$smallerfontsize};
359 font-weight: normal;
360 margin-left: 8px;
361}
362
363.phabricator-remarkup-embed-layout-link:hover {
364 border-color: {$violet};
365 cursor: pointer;
366}
367
368.device-desktop .phabricator-remarkup-embed-layout-link:hover {
369 text-decoration: none;
370}
371
372.phabricator-remarkup-embed-layout-link:hover
373 .phabricator-remarkup-embed-layout-icon {
374 color: {$violet};
375}
376
377.phabricator-remarkup-embed-layout-info-block {
378 display: block;
379}
380
381.embed-download-form {
382 display: inline-block;
383 padding: 0;
384 margin: 0;
385}
386
387.phabricator-remarkup-embed-layout-link
388 .phabricator-remarkup-embed-layout-download {
389 color: {$lightgreytext};
390 border: none;
391 background: rgba(0, 0, 0, 0);
392 box-shadow: none;
393 outline: 0;
394 padding: 0;
395 margin: 0;
396 text-align: left;
397 text-shadow: none;
398 border-radius: 0;
399 font: inherit;
400 display: inline;
401 min-width: 0;
402 font-weight: normal !important;
403}
404
405.phabricator-remarkup-embed-layout-download:hover {
406 color: {$anchor};
407 text-decoration: underline;
408}
409
410.phabricator-remarkup-embed-float-left {
411 float: left;
412 margin: .5em 1em 0;
413}
414
415.phabricator-remarkup-image-error {
416 border: 1px solid {$redborder};
417 background: {$sh-redbackground};
418 padding: 8px 12px;
419 color: {$darkgreytext};
420}
421
422.phabricator-remarkup-embed-image {
423 display: inline-block;
424 border: 3px solid {$page.content};
425 box-shadow: 1px 1px 2px rgba({$alphablack}, 0.20);
426}
427
428 .phui-property-list-text-content .phabricator-remarkup-embed-image > img {
429 /* TODO: Remove static image for old browsers some day; see D26155 */
430 background: url('/rsrc/image/checker_light.png');
431 background: repeating-conic-gradient(
432 {$checker.light-one} 0% 25%,
433 {$checker.light-two} 0% 50%) 0 0/20px 20px;
434 }
435
436 .device-desktop .phui-property-list-text-content .phabricator-remarkup-embed-image > img:hover {
437 /* TODO: Remove static image for old browsers some day; see D26155 */
438 background: url('/rsrc/image/checker_dark.png');
439 background: repeating-conic-gradient(
440 {$checker.dark-one} 0% 25%,
441 {$checker.dark-two} 0% 50%) 0 0/20px 20px;
442 }
443
444.phabricator-remarkup-embed-image-full,
445.phabricator-remarkup-embed-image-wide {
446 display: inline-block;
447 max-width: 100%;
448}
449
450.phabricator-remarkup-embed-image-full img,
451.phabricator-remarkup-embed-image-wide img {
452 height: auto;
453 max-width: 100%;
454}
455
456.phabricator-remarkup .remarkup-table-wrap {
457 overflow-x: auto;
458}
459
460!print .phabricator-remarkup .remarkup-table-wrap {
461 overflow-x: hidden;
462}
463
464.phabricator-remarkup table.remarkup-table {
465 border-collapse: separate;
466 border-spacing: 1px;
467 background: {$lightblueborder};
468 margin: 12px 0;
469 word-break: normal;
470}
471
472.phabricator-remarkup table.remarkup-table th {
473 font-weight: bold;
474 padding: 4px 6px;
475 background: {$lightbluebackground};
476}
477
478.phabricator-remarkup table.remarkup-table td {
479 background: {$page.content};
480 padding: 3px 6px;
481}
482
483!print .phabricator-remarkup table.remarkup-table td {
484 /* See T13564. This is a narrow control for PDF printing behavior in
485 Chrome. */
486
487 line-break: anywhere;
488 overflow-wrap: anywhere;
489}
490
491body .phabricator-standard-page div.phabricator-remarkup *:first-child,
492body .phabricator-standard-page div.phabricator-remarkup .remarkup-header + * {
493 margin-top: 0;
494}
495
496body div.phabricator-remarkup > *:last-child {
497 margin-bottom: 0;
498}
499
500.remarkup-assist-textarea {
501 border-left-color: {$greyborder};
502 border-right-color: {$greyborder};
503 border-bottom-color: {$greyborder};
504 border-top-color: {$thinblueborder};
505 border-radius: 0;
506 border-bottom-left-radius: 3px;
507 border-bottom-right-radius: 3px;
508
509 box-shadow: none;
510
511 /* Set line height explicitly so the metrics <var /> and the real textarea
512 are forced to the same value. */
513 line-height: 1.25em;
514
515 /* Prevent Safari and Chrome users from dragging the textarea any wider,
516 because the top bar won't resize along with it. */
517 resize: vertical;
518}
519
520var.remarkup-assist-textarea {
521 /* This is an invisible element used to measure the size of text in the
522 textarea so we can float typeaheads over the cursor position. */
523 display: block;
524 border-color: orange;
525 box-sizing: border-box;
526 padding: 4px 6px;
527 white-space: pre-wrap;
528 visibility: hidden;
529}
530
531.remarkup-assist-textarea:focus {
532 border: 1px solid rgba(82, 168, 236, 0.8);
533}
534
535.remarkup-assist-bar {
536 height: 32px;
537 border-width: 1px 1px 0;
538 border-style: solid;
539 border-top-color: {$greyborder};
540 border-left-color: {$greyborder};
541 border-right-color: {$greyborder};
542 border-top-left-radius: 3px;
543 border-top-right-radius: 3px;
544 padding: 0 4px;
545
546 background: {$lightbluebackground};
547 overflow: hidden;
548}
549
550.remarkup-assist-button {
551 display: block;
552 margin-top: 4px;
553 height: 20px;
554 padding: 2px 5px 3px;
555 line-height: 18px;
556 width: 16px;
557 float: left;
558 border-radius: 3px;
559}
560
561.remarkup-assist-button:hover .phui-icon-view.phui-font-fa {
562 color: {$sky};
563}
564
565.remarkup-assist-button:active {
566 outline: none;
567}
568
569.remarkup-assist-button:focus {
570 outline: none;
571}
572
573.remarkup-assist-separator {
574 display: block;
575 float: left;
576
577 height: 18px;
578 margin: 7px 6px;
579
580 width: 0px;
581 border-right: 1px solid {$lightgreyborder};
582}
583
584.remarkup-interpreter-error {
585 padding: 8px;
586 border: 1px solid {$sh-redborder};
587 background-color: {$sh-redbackground};
588}
589
590.remarkup-cowsay {
591 white-space: pre-wrap;
592}
593
594.remarkup-figlet {
595 white-space: pre-wrap;
596}
597
598.remarkup-assist {
599 width: 14px;
600 height: 14px;
601 overflow: hidden;
602 text-align: center;
603 vertical-align: middle;
604}
605
606.remarkup-assist-right {
607 float: right;
608}
609
610.jx-order-mask {
611 background: white;
612 opacity: 1.0;
613}
614
615.phabricator-image-macro-hero {
616 margin: auto;
617 max-width: 95%;
618}
619
620.phabricator-remarkup-macro {
621 height: auto;
622 max-width: 100%;
623}
624
625.remarkup-nav-sequence-arrow {
626 color: {$lightgreytext};
627}
628
629.phabricator-remarkup hr {
630 background: {$thinblueborder};
631 margin: 24px 0;
632 clear: both;
633}
634
635.phabricator-remarkup .remarkup-highlight {
636 background-color: {$lightviolet};
637 padding: 0 4px;
638}
639
640.device .remarkup-assist-nodevice {
641 display: none;
642}
643
644/* - Autocomplete ----------------------------------------------------------- */
645
646.phuix-autocomplete {
647 position: absolute;
648 width: 300px;
649 box-shadow: {$dropshadow};
650 background: {$page.content};
651 border: 1px solid {$lightgreyborder};
652 border-radius: 3px;
653}
654
655.phuix-autocomplete-head {
656 white-space: nowrap;
657 overflow: hidden;
658 text-overflow: ellipsis;
659 padding: 6px 8px;
660 background: {$lightgreybackground};
661 color: {$darkgreytext};
662 border-radius: 3px;
663}
664
665.phuix-autocomplete-head .phui-icon-view {
666 margin-right: 4px;
667 color: {$lightgreytext};
668}
669
670.phuix-autocomplete-echo {
671 margin-left: 4px;
672 color: {$lightgreytext};
673}
674
675.phuix-autocomplete-list a.jx-result {
676 display: block;
677 padding: 5px 8px;
678 font-size: {$normalfontsize};
679 border-top: 1px solid {$thinblueborder};
680 font-weight: bold;
681 color: {$darkgreytext};
682}
683
684.phuix-autocomplete-list a.jx-result .tokenizer-result-closed {
685 color: {$lightgreytext};
686 text-decoration: line-through;
687}
688
689.phuix-autocomplete-list a.jx-result .phui-icon-view {
690 margin-right: 4px;
691 color: {$lightbluetext};
692}
693
694.phuix-autocomplete-list a.jx-result:hover {
695 text-decoration: none;
696 background: {$sh-bluebackground};
697 color: {$blacktext};
698}
699
700.phuix-autocomplete-list a.jx-result.focused,
701.phuix-autocomplete-list a.jx-result.focused:hover {
702 background: {$sh-bluebackground};
703 color: {$blacktext};
704}
705
706
707/* - Pinned ----------------------------------------------------------------- */
708
709.phui-box.phui-object-box.phui-comment-form-view.remarkup-assist-pinned {
710 position: fixed;
711 background-color: {$page.content};
712 border-top: 1px solid {$lightblueborder};
713 box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
714
715 width: 100%;
716 bottom: 0;
717 left: 0;
718 right: 0;
719 margin: 0;
720
721 overflow: auto;
722 max-height: 60vh;
723}
724
725.remarkup-assist-pinned-spacer {
726 position: relative;
727}
728
729
730/* - Preview ---------------------------------------------------------------- */
731
732.remarkup-inline-preview {
733 display: block;
734 position: relative;
735 background: {$page.content};
736 overflow-y: auto;
737 box-sizing: border-box;
738 width: 100%;
739 resize: vertical;
740 padding: 8px;
741 border: 1px solid {$lightblueborder};
742 border-top: none;
743}
744
745.remarkup-control-fullscreen-mode .remarkup-inline-preview {
746 resize: none;
747}
748
749.remarkup-inline-preview * {
750 resize: none;
751}
752
753.remarkup-assist-button.preview-active {
754 background: {$sky};
755}
756
757.remarkup-assist-button.preview-active .phui-icon-view {
758 color: {$page.content};
759}
760
761.remarkup-assist-button.preview-active:hover {
762 text-decoration: none;
763}
764
765.remarkup-assist-button.preview-active:hover .phui-icon-view {
766 color: {$page.content};
767}
768
769.remarkup-preview-active .remarkup-assist,
770.remarkup-preview-active .remarkup-assist-separator {
771 opacity: .2;
772 transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
773 transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
774}
775
776.remarkup-preview-active .remarkup-assist-button {
777 pointer-events: none;
778 cursor: default;
779}
780
781.remarkup-preview-active .remarkup-assist-button.preview-active {
782 pointer-events: inherit;
783 cursor: pointer;
784}
785
786.remarkup-preview-active .remarkup-assist.fa-eye {
787 opacity: 1;
788 transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
789 transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
790}
791
792
793/* - Fullscreen ------------------------------------------------------------- */
794
795.remarkup-fullscreen-mode {
796 overflow: hidden;
797}
798
799.remarkup-control-fullscreen-mode {
800 position: fixed;
801 border: none;
802 top: 32px;
803 bottom: 32px;
804 left: 64px;
805 right: 64px;
806 border-radius: 3px;
807 box-shadow: 0px 4px 32px #555;
808}
809
810.remarkup-control-fullscreen-mode .remarkup-assist-button {
811 padding: 1px 6px 4px;
812 font-size: 15px;
813}
814
815.remarkup-control-fullscreen-mode .remarkup-assist-button .remarkup-assist {
816 height: 16px;
817 width: 16px;
818}
819
820.aphront-form-input .remarkup-control-fullscreen-mode .remarkup-assist-bar {
821 border: none;
822 border-top-left-radius: 3px;
823 border-top-right-radius: 3px;
824 height: 32px;
825 padding: 4px 8px;
826 background: {$bluebackground};
827}
828
829.aphront-form-control .remarkup-control-fullscreen-mode
830 textarea.remarkup-assist-textarea {
831 position: absolute;
832 top: 39px;
833 left: 0;
834 right: 0;
835 height: calc(100% - 36px) !important;
836 padding: 16px;
837 font-size: {$biggerfontsize};
838 line-height: 1.51em;
839 border-width: 1px 0 0 0;
840 outline: none;
841 resize: none;
842 background: {$page.content} !important;
843}
844
845.remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea:focus {
846 border-color: {$thinblueborder};
847 box-shadow: none;
848}
849
850.remarkup-control-fullscreen-mode .remarkup-inline-preview {
851 font-size: {$biggerfontsize};
852 border: none;
853 padding: 16px;
854 border-bottom-left-radius: 3px;
855 border-bottom-right-radius: 3px;
856}
857
858.remarkup-control-fullscreen-mode .remarkup-assist-button .fa-arrows-alt {
859 color: {$sky};
860}
861
862.device-phone .remarkup-control-fullscreen-mode {
863 top: 0;
864 bottom: 0;
865 left: 0;
866 right: 0;
867}