mirror of https://github.com/go-gitea/gitea.git
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.pull/24842/head
parent
e95b42e187
commit
268d121f4b
|
@ -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...)
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue