test1234
/
gitea
forked from gitea/gitea
1
0
Fork 0
Code Pull Requests Activity

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.
This commit is contained in:
Brecht Van Lommel 2023-05-21 23:19:37 +02:00 committed by GitHub
parent e95b42e187
commit 268d121f4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/markup/sanitizer.go
View File

@ -132,7 +132,7 @@ func createDefaultPolicy() *bluemonday.Policy {
"div", "ins", "del", "sup", "sub", "p", "ol", "ul", "table", "thead", "tbody", "tfoot", "blockquote", "div", "ins", "del", "sup", "sub", "p", "ol", "ul", "table", "thead", "tbody", "tfoot", "blockquote",
"dl", "dt", "dd", "kbd", "q", "samp", "var", "hr", "ruby", "rt", "rp", "li", "tr", "td", "th", "s", "strike", "summary", "dl", "dt", "dd", "kbd", "q", "samp", "var", "hr", "ruby", "rt", "rp", "li", "tr", "td", "th", "s", "strike", "summary",
"details", "caption", "figure", "figcaption", "details", "caption", "figure", "figcaption",
"abbr", "bdo", "cite", "dfn", "mark", "small", "span", "time", "wbr", "abbr", "bdo", "cite", "dfn", "mark", "small", "span", "time", "video", "wbr",
} }
policy.AllowAttrs(generalSafeAttrs...).OnElements(generalSafeElements...) policy.AllowAttrs(generalSafeAttrs...).OnElements(generalSafeElements...)

24
web_src/css/markup/content.css
View File

@ -301,7 +301,8 @@
background-color: var(--color-markup-table-row); background-color: var(--color-markup-table-row);
} }
.markup img { .markup img,
.markup video {
max-width: 100%; max-width: 100%;
box-sizing: initial; box-sizing: initial;
} }
@ -309,17 +310,23 @@
/* this background ensures images can break <hr>. We can only do this on /* this background ensures images can break <hr>. We can only do this on
cases where the background is known and not transparent. */ cases where the background is known and not transparent. */
.markup.file-view img, .markup.file-view img,
.markup.file-view video,
.comment-body .markup img, /* regular comment */ .comment-body .markup img, /* regular comment */
.comment-body .markup video,
.comment-content .markup img, /* code comment */ .comment-content .markup img, /* code comment */
.wiki .markup img { .comment-content .markup video,
.wiki .markup img,
.wiki .markup video {
background: var(--color-box-body); background: var(--color-box-body);
} }
.markup img[align="right"] { .markup img[align="right"],
.markup video[align="right"] {
padding-left: 20px; padding-left: 20px;
} }
.markup img[align="left"] { .markup img[align="left"],
.markup video[align="left"] {
padding-right: 20px; padding-right: 20px;
} }
@ -343,7 +350,8 @@
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
} }
.markup span.frame span img { .markup span.frame span img,
.markup span.frame span video {
display: block; display: block;
float: left; float: left;
} }
@ -368,7 +376,8 @@
text-align: center; text-align: center;
} }
.markup span.align-center span img { .markup span.align-center span img
.markup span.align-center span video {
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
@ -386,7 +395,8 @@
text-align: right; text-align: right;
} }
.markup span.align-right span img { .markup span.align-right span img,
.markup span.align-right span video {
margin: 0; margin: 0;
text-align: right; text-align: right;
} }