3.2 KB143 lines
Blame
1/**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 */
7
8.light-theme .rendered-markup {
9 --pre-bg: #fdf5d4;
10 --pre-border: 1px solid #f1c40f;
11 --tt-bg: rgb(235, 233, 231);
12 --th-bg: #ebecee;
13 --td-bg: white;
14 --table-border: #bdc7d8;
15 --quote-fg: #8c98b8;
16}
17.dark-theme .rendered-markup {
18 --pre-bg: #120b00;
19 --pre-border: 1px solid #673b00;
20 --tt-bg: #18191a;
21 --th-bg: #18191a;
22 --td-bg: black;
23 --table-border: #323436;
24 --quote-fg: #8c98b8;
25}
26
27.rendered-markup > p {
28 margin: 0;
29}
30.rendered-markup > h1 {
31 margin: 0;
32}
33
34.rendered-markup table {
35 border: 1px solid var(--table-border);
36 background: var(--table-border);
37 border-collapse: separate;
38 border-spacing: 1px;
39}
40
41.rendered-markup th {
42 background: var(--th-bg);
43 font-weight: bold;
44 padding: 3px 6px;
45}
46
47.rendered-markup td {
48 background: var(--td-bg);
49 padding: 3px 6px;
50 text-align: left;
51}
52
53.rendered-markup tt {
54 background-color: var(--tt-bg);
55 padding-inline: 4px;
56 overflow-wrap: break-word;
57 font-size: 110%;
58}
59
60.rendered-markup pre {
61 background: var(--pre-bg);
62 border: var(--pre-border);
63 padding: var(--halfpad);
64 font-size: 110%;
65 white-space: pre-wrap;
66}
67
68.rendered-markup a {
69 color: var(--link-foreground);
70 text-decoration: none;
71}
72.rendered-markup a:hover {
73 text-decoration: underline;
74}
75
76.rendered-markup blockquote {
77 color: var(--quote-fg);
78 border-left: 3px solid var(--quote-fg);
79 padding-left: 10px;
80 padding-block: 5px;
81 font-style: italic;
82 margin: 0;
83 display: flex;
84}
85.rendered-markup blockquote > p {
86 margin: 0;
87}
88
89.rendered-markup ul,
90.rendered-markup ol {
91 padding-left: 30px;
92}
93
94.rendered-markup video,
95.rendered-markup img {
96 max-width: 100%;
97}
98
99/*
100 * GitHub Comment Suggested Changes come as a hardcoded <table> in the HTML,
101 * which we need to aggressively re-style to look OK.
102 * They intend for this to be used with tailwind classes,
103 * but let's not bring in all of tailwind just for this.
104 */
105
106.rendered-markup .js-suggested-changes-blob.diff-view,
107.rendered-markup .js-suggested-changes-blob.diff-view div {
108 white-space-collapse: collapse;
109}
110
111.rendered-markup .js-suggested-changes-blob.diff-view table {
112 margin-block: 5px;
113 border-radius: 2px;
114 width: 100%;
115 background-color: var(--background);
116 border-width: 0;
117 border-collapse: collapse;
118}
119
120.rendered-markup .js-suggested-changes-blob.diff-view td.blob-num::after {
121 content: attr(data-line-number);
122}
123
124.rendered-markup .js-suggested-changes-blob.diff-view td {
125 color: var(--diffEditor-foreground);
126 font-family: var(--monospace-fontFamily);
127}
128
129.rendered-markup .js-suggested-changes-blob.diff-view td.blob-num-deletion {
130 background-color: var(--diffEditor-removedLineHighlightBackground);
131 width: 2em;
132}
133.rendered-markup .js-suggested-changes-blob.diff-view td.blob-code-deletion {
134 background-color: var(--diffEditor-removedLineBackground);
135}
136.rendered-markup .js-suggested-changes-blob.diff-view td.blob-num-addition {
137 background-color: var(--diffEditor-insertedLineHighlightBackground);
138 width: 2em;
139}
140.rendered-markup .js-suggested-changes-blob.diff-view td.blob-code-addition {
141 background-color: var(--diffEditor-insertedLineBackground);
142}
143