Add nsfw mask for status media

static/main.css

@@ -97,6 +97,7 @@
 	max-height: 180px;
 	max-width: 220px;
 	width: auto;
+	vertical-align: bottom;
 }
 
 .page-title {
@@ -280,4 +281,27 @@
 
 .img-link {
 	display: inline-block;
+	position: relative;
+}
+
+.status-nsfw-overlay {
+	height: 100%;
+	width: 100%;
+	background: black;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.img-link:hover .status-nsfw-overlay {
+	display: none;
+}
+
+.status-video-container {
+	display: inline-block;
+	position: relative;
+}
+
+.status-video-container:hover .status-nsfw-overlay {
+	display: none;
 }

templates/status.tmpl

@@ -61,6 +61,9 @@
 			{{if eq .Type "image"}}
 			<a class="img-link" href="{{.URL}}" target="_blank">
 				<img class="status-image" src="{{.URL}}" alt="status-image" />
+				{{if $.Sensitive}}
+				<div class="status-nsfw-overlay"></div>
+				{{end}}
 			</a>
 			{{else if eq .Type "audio"}}
 			<audio class="status-audio" controls preload="none">
@@ -68,10 +71,15 @@
 				<p> Your browser doesn't support HTML5 audio </p>
 			</audio>
 			{{else if eq .Type "video"}}
+			<div class="status-video-container">
 				<video class="status-video" controls preload="none">
 					<source src="{{.URL}}">
 					<p> Your browser doesn't support HTML5 video </p>
 				</video>
+				{{if $.Sensitive}}
+				<div class="status-nsfw-overlay"></div>
+				{{end}}
+			</div>
 			{{else}}
 			<a href="{{.URL}}" target="_blank"> attachment </a>
 			{{end}}