|
139 | 139 | letter-spacing: var(--letter-spacing-tight); |
140 | 140 | } |
141 | 141 |
|
142 | | -.content-modal__prose h2, |
143 | | -.content-modal__prose h3, |
144 | | -.content-modal__prose h4, |
145 | | -.content-modal__prose h5, |
146 | | -.content-modal__prose h6 { |
| 142 | +.content-modal__prose :is(h2, h3, h4, h5, h6) { |
147 | 143 | margin: var(--space-xlarge) 0 var(--space-large); |
148 | 144 | color: var(--color-text-primary); |
149 | 145 | font-size: var(--font-size-large); |
|
152 | 148 | letter-spacing: var(--letter-spacing-display-regular); |
153 | 149 | } |
154 | 150 |
|
155 | | -.content-modal__prose h2 { font-size: var(--font-size-large); } |
156 | | -.content-modal__prose h3 { font-size: var(--font-size-base); } |
157 | | -.content-modal__prose h4, |
158 | | -.content-modal__prose h5, |
159 | | -.content-modal__prose h6 { font-size: var(--font-size-small); } |
160 | | - |
161 | | -/* Sit flush with the top — no leading margin on the first prose element. */ |
162 | | -.content-modal__prose > :first-child { |
163 | | - margin-top: 0; |
164 | | -} |
165 | | - |
166 | | -.content-modal__prose p { |
167 | | - margin: var(--space-default) 0; |
168 | | - padding: 0; |
169 | | -} |
170 | | - |
171 | | -.content-modal__prose b, |
172 | | -.content-modal__prose strong { |
173 | | - color: var(--color-text-primary); |
174 | | - font-weight: var(--font-weight-medium); |
175 | | -} |
176 | | - |
177 | | -.content-modal__prose a { |
178 | | - color: var(--color-text-link-accent); |
179 | | - text-decoration: underline; |
180 | | - text-decoration-skip-ink: none; |
181 | | - text-underline-position: from-font; |
182 | | -} |
183 | | - |
184 | | -.content-modal__prose ul, |
185 | | -.content-modal__prose ol { |
186 | | - margin: var(--space-default) 0; |
187 | | - padding-left: var(--space-large); |
| 151 | +.content-modal__prose h2 { |
| 152 | + font-size: var(--font-size-large); |
188 | 153 | } |
189 | 154 |
|
190 | | -.content-modal__prose ul { list-style: disc; } |
191 | | -.content-modal__prose ol { list-style: decimal; } |
192 | | - |
193 | | -.content-modal__prose li { |
194 | | - margin: var(--space-xs) 0; |
| 155 | +.content-modal__prose h3 { |
| 156 | + font-size: var(--font-size-base); |
195 | 157 | } |
196 | 158 |
|
197 | | -.content-modal__prose table { |
198 | | - width: 100%; |
199 | | - margin: var(--space-default) 0; |
200 | | - border-collapse: collapse; |
| 159 | +.content-modal__prose :is(h4, h5, h6) { |
201 | 160 | font-size: var(--font-size-small); |
202 | 161 | } |
203 | 162 |
|
204 | | -.content-modal__prose th, |
205 | | -.content-modal__prose td { |
206 | | - padding: var(--space-default) var(--space-medium); |
207 | | - border-bottom: 1px solid var(--color-stroke-weak); |
208 | | - text-align: left; |
209 | | - vertical-align: top; |
210 | | -} |
211 | | - |
212 | | -.content-modal__prose th { |
213 | | - color: var(--color-text-primary); |
214 | | - font-weight: var(--font-weight-medium); |
215 | | - border-bottom-color: var(--color-stroke-mid); |
216 | | -} |
217 | | - |
218 | | -.content-modal__prose code { |
219 | | - font-family: var(--font-code); |
220 | | - font-size: 0.9em; |
221 | | - background-color: var(--color-surface-strong); |
222 | | - border-radius: var(--border-radius-s); |
223 | | - padding: 0 var(--space-xs); |
| 163 | +/* Sit flush with the top — no leading margin on the first prose element. */ |
| 164 | +.content-modal__prose > :first-child { |
| 165 | + margin-top: 0; |
224 | 166 | } |
225 | 167 |
|
226 | | -.content-modal__prose pre { |
| 168 | +.content-modal__prose p { |
227 | 169 | margin: var(--space-default) 0; |
228 | | - padding: var(--space-large); |
229 | | - background-color: var(--color-surface-strong); |
230 | | - border-radius: var(--border-radius-l); |
231 | | - overflow-x: auto; |
232 | | - font-size: var(--font-size-small); |
233 | | - line-height: var(--line-height-code); |
234 | | -} |
235 | | - |
236 | | -.content-modal__prose pre code { |
237 | 170 | padding: 0; |
238 | | - background-color: transparent; |
239 | | - border-radius: 0; |
240 | | - font-size: 1em; |
241 | | -} |
242 | | - |
243 | | -.content-modal__prose img { |
244 | | - display: block; |
245 | | - max-width: 100%; |
246 | | - height: auto; |
247 | | - margin: var(--space-default) 0; |
248 | | - border-radius: var(--border-radius-l); |
249 | | -} |
250 | | - |
251 | | -.content-modal__prose figure { |
252 | | - margin: var(--space-default) 0; |
253 | | -} |
254 | | - |
255 | | -.content-modal__prose figcaption { |
256 | | - margin-top: var(--space-default); |
257 | | - font-size: var(--font-size-small); |
258 | | - color: var(--color-text-secondary); |
259 | | -} |
260 | | - |
261 | | -.content-modal__prose blockquote { |
262 | | - margin: var(--space-large) 0; |
263 | | - padding: var(--space-default) var(--space-large); |
264 | | - border-left: 3px solid var(--color-stroke-mid); |
265 | | - color: var(--color-text-secondary); |
266 | | - font-style: italic; |
267 | | -} |
268 | | - |
269 | | -.content-modal__prose blockquote p { |
270 | | - margin: var(--space-default) 0; |
271 | 171 | } |
272 | 172 |
|
273 | 173 | /* ============================================ |
|
0 commit comments