loading up the forgejo repo on tangled to test page performance
Fix video width overflow in markdown, and other changes to match img (#24834)
This change makes the CSS for `<video>` in markup match that of `<img>`,
and also allows additional attributes to be used. This way the width,
padding, alignment should work equally well for both.
authored by
Brecht Van Lommel
and committed by
GitHub
268d121f
e95b42e1
+18
-8
+1
-1
modules/markup/sanitizer.go
+1
-1
modules/markup/sanitizer.go
···
132
132
"div", "ins", "del", "sup", "sub", "p", "ol", "ul", "table", "thead", "tbody", "tfoot", "blockquote",
133
133
"dl", "dt", "dd", "kbd", "q", "samp", "var", "hr", "ruby", "rt", "rp", "li", "tr", "td", "th", "s", "strike", "summary",
134
134
"details", "caption", "figure", "figcaption",
135
-
"abbr", "bdo", "cite", "dfn", "mark", "small", "span", "time", "wbr",
135
+
"abbr", "bdo", "cite", "dfn", "mark", "small", "span", "time", "video", "wbr",
136
136
}
137
137
138
138
policy.AllowAttrs(generalSafeAttrs...).OnElements(generalSafeElements...)
+17
-7
web_src/css/markup/content.css
+17
-7
web_src/css/markup/content.css
···
301
301
background-color: var(--color-markup-table-row);
302
302
}
303
303
304
-
.markup img {
304
+
.markup img,
305
+
.markup video {
305
306
max-width: 100%;
306
307
box-sizing: initial;
307
308
}
···
309
310
/* this background ensures images can break <hr>. We can only do this on
310
311
cases where the background is known and not transparent. */
311
312
.markup.file-view img,
313
+
.markup.file-view video,
312
314
.comment-body .markup img, /* regular comment */
315
+
.comment-body .markup video,
313
316
.comment-content .markup img, /* code comment */
314
-
.wiki .markup img {
317
+
.comment-content .markup video,
318
+
.wiki .markup img,
319
+
.wiki .markup video {
315
320
background: var(--color-box-body);
316
321
}
317
322
318
-
.markup img[align="right"] {
323
+
.markup img[align="right"],
324
+
.markup video[align="right"] {
319
325
padding-left: 20px;
320
326
}
321
327
322
-
.markup img[align="left"] {
328
+
.markup img[align="left"],
329
+
.markup video[align="left"] {
323
330
padding-right: 20px;
324
331
}
325
332
···
343
350
border: 1px solid var(--color-secondary);
344
351
}
345
352
346
-
.markup span.frame span img {
353
+
.markup span.frame span img,
354
+
.markup span.frame span video {
347
355
display: block;
348
356
float: left;
349
357
}
···
368
376
text-align: center;
369
377
}
370
378
371
-
.markup span.align-center span img {
379
+
.markup span.align-center span img
380
+
.markup span.align-center span video {
372
381
margin: 0 auto;
373
382
text-align: center;
374
383
}
···
386
395
text-align: right;
387
396
}
388
397
389
-
.markup span.align-right span img {
398
+
.markup span.align-right span img,
399
+
.markup span.align-right span video {
390
400
margin: 0;
391
401
text-align: right;
392
402
}