1 files changed, 159 insertions, 17 deletions

diff --git a/web/source/css/_media-wrapper.css b/web/source/css/_media-wrapper.css
index 1c2ae1503..a567cb0fd 100644
--- a/web/source/css/_media-wrapper.css
+++ b/web/source/css/_media-wrapper.css
@@ -42,13 +42,26 @@
 		height: 100%;
 		width: 100%;
 
+		div.blurhash-container {
+			z-index: -1;
+			position: absolute;
+			height: 100%;
+			width: 100%;
+		}
+
+		canvas {
+			height: 100%;
+			width: 100%;
+			object-fit: cover;
+		}
+
 		&[open] summary {
 			height: auto;
 			width: auto;
 			margin: 1rem;
 			padding: 0;
 
-			.show, video, img {
+			.show {
 				display: none;
 			}
 
@@ -57,6 +70,10 @@
 				grid-column: 1 / span 3;
 				grid-row: 1 / span 2;
 			}
+
+			div.blurhash-container > canvas {
+				display: none;
+			}
 		}
 
 		summary {
@@ -65,7 +82,7 @@
 			width: 100%;
 			z-index: 3;
 			overflow: hidden;
-				
+
 			display: grid;
 			padding: 1rem;
 			grid-template-columns: 1fr auto 1fr;
@@ -107,24 +124,15 @@
 					align-self: center;
 				}
 			}
-
-			video, img {
-				z-index: -1;
-				position: absolute;
-				height: calc(100% + 1.2rem);
-				width: calc(100% + 1.2rem);
-				top: -0.6rem;
-				left: -0.6rem;
-				filter: blur(1.2rem);
-			}
 		}
 
 		video.plyr-video, .plyr {
 			position: absolute;
 			height: 100%;
 			width: 100%;
-			object-fit: contain;
+			object-fit: cover;
 			background: $gray1;
+			min-width: 100%;
 		}
 
 		.unknown-attachment {
@@ -161,6 +169,86 @@
 			}
 		}
 	}
+
+	@media screen and (max-width: 55rem) {
+		/*
+			Tablet-ish width, make "show sensitive"
+			and "eye" buttons smaller + more compact.
+		*/
+		& > details {
+			& > summary {
+				padding: 0.5rem;
+	
+				> div.show.sensitive.button {
+					font-size: smaller;
+					padding: 0.2rem;
+					line-height: 1.4rem;
+				}
+				
+				> span.eye.button {
+					font-size: smaller;
+					padding: 0 0.2rem 0 0.2rem;
+	
+					> .fa-fw {
+						line-height: 1.4rem;
+					}
+				}
+			}
+
+			&[open] > summary {
+				margin: 0.5rem;
+			}
+		}
+	}
+
+	@media screen and (max-width: 36rem) {
+		/*
+			Mobile-ish width, even more compact.
+		*/
+		& > details {
+			& > summary {
+				> div.show.sensitive.button {
+					font-size: small;
+					padding: 0.1rem;
+					line-height: 1.2rem;
+				}
+				
+				> span.eye.button {
+					font-size: small;
+					padding: 0 0.1rem 0 0.1rem;
+	
+					> .fa-fw {
+						line-height: 1.2rem;
+					}
+				}
+			}
+		}
+	}
+
+	@media screen and (max-width: 27rem) {
+		/*
+			Really really tiny, make the text
+			on show/hide sensitive even smaller.
+		*/
+		& > details > summary > div.show.sensitive.button {
+			font-size: x-small;
+		}
+	}
+}
+
+@media (scripting: none) {
+	.media-wrapper {
+		canvas.blurhash {
+			display: none
+		}
+
+		& > details:not([open]) {
+			background: linear-gradient(
+				var(--bg-accent),
+				var(--bg) 
+			);
+		}
+	}
 }
 
 .pswp__button--open-post-link {
@@ -187,21 +275,75 @@
 		position: initial;
 		padding: 0.1rem;
 		padding-top: 0.2rem;
+		gap: 0.15rem;
+
+		.plyr__controls__item {
+			/*
+				Override margins from plyr as
+				we're displaying in flex with a gap.
+			*/
+			margin-left: 0;
+			margin-right: 0;
+			&:first-child {
+				margin-right: 0;
+			}
+
+			/*
+				Try to split controls in at
+				least a somewhat sensible way.
+			*/
+			&.plyr__volume {
+				margin-left: auto;
+			}
+			&[data-plyr="restart"] {
+				margin-right: auto;
+			}
+		}
+
+		/*
+			Override the rule from plyr that
+			hides the total duration on thinner
+			screens, we have enough room.
+		*/
+		.plyr__time + .plyr__time {
+			display: initial;
+		}
 	}
 
 	.plyr__control {
 		box-shadow: none;
 	}
 
-	.plyr__control--overlaid {
-		top: calc(50% - 18px);
+	.plyr__poster {
+		background-size: cover;
+	}
+
+	/*
+		Hide plry controls when it's not inside
+		a lightbox, but use cursor pointer to
+		show the whole thing can be clicked.
+	*/
+	&.plyr--stopped, &.plyr--paused {
+		.plyr__controls {
+			display: none;
+		}
+
+		cursor: pointer;
 	}
 }
 
 .pswp__content {
 	padding: 2rem;
 
-	.plyr {
-		max-height: 100%;
+	/*
+		Render plyr controls as normal
+		when it's inside a lightbox.
+	*/
+	.plyr__control--overlaid {
+		top: calc(50% - 18px);
+	}
+	> .plyr--stopped .plyr__controls,
+	> .plyr--paused .plyr__controls {
+		display: flex;
 	}
 }