mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-26 12:27:06 +00:00 
			
		
		
		
	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
					Brecht Van Lommel
				
			
				
					committed by
					
						 GitHub
						GitHub
					
				
			
			
				
	
			
			
			 GitHub
						GitHub
					
				
			
						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; | ||||||
| } | } | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user