gotosocial/web/source/css/_media-wrapper.css

/*
	GoToSocial
	Copyright (C) GoToSocial Authors admin@gotosocial.org
	SPDX-License-Identifier: AGPL-3.0-or-later

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.

	You should have received a copy of the GNU Affero General Public License
	along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import "photoswipe/dist/photoswipe.css";
@import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
@import "plyr/dist/plyr.css";

.media-wrapper {
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	border: 0.15rem solid $gray1;
	border-radius: $br;
	position: relative;
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	details {
		position: relative;
		height: 100%;
		width: 100%;

		div.blurhash-container {
			z-index: -1;
			position: absolute;
			height: 100%;
			width: 100%;
		}

		canvas {
			height: 100%;
			width: 100%;
			object-fit: cover;
		}

		summary {
			position: absolute;
			height: 100%;
			width: 100%;
			overflow: hidden;
			z-index: 1;

			display: grid;
			padding: 1rem;
			grid-template-columns: 1fr auto 1fr;
			grid-template-rows: 1fr 1fr;
			grid-template-areas: 
				"eye sensitive ."
				".   sensitive  .";

			&::-webkit-details-marker {
				display: none; /* Safari */
			}

			.eye.button {
				grid-area: eye;
				align-self: start;
				justify-self: start;
				margin: 0;
				padding: 0.4rem;

				/*
					Make button outline really thick as we can't
					know whether media has good contrast with it.
				*/
				&:focus-visible {
					outline: 0.5rem dashed $button-focus-border;
				}

				.fa-fw {
					line-height: $fa-fw;
				}

				.hide {
					display: none;
				}
			}

			.show.sensitive {
				grid-area: sensitive;
				align-self: center;

				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;

				.button {
					cursor: pointer;
					align-self: center;
				}
			}
		}

		&[open] summary {
			height: auto;
			width: auto;
			cursor: pointer;

			grid-template-columns: 1fr;
			grid-template-rows: 1fr;

			.show {
				display: none;
			}

			.eye.button .hide {
				display: inline-block;
			}

			div.blurhash-container,
			div.blurhash-container > canvas {
				display: none;
			}
		}

		a.photoswipe-slide,
		a.unknown-attachment {
			position: absolute;
			width: 100%;
			height: 100%;

			/*
				Make link outline really thick as we can't
				know whether media has good contrast with it.
				Indent outline to avoid being hidden by overflow: hidden.
			*/
			&:focus-visible {
				outline: 0.5rem dotted $link-fg;
				outline-offset: -0.5rem;
			}
		}

		video.plyr-video, .plyr {
			position: absolute;
			height: 100%;
			width: 100%;
			object-fit: cover;
			background: $gray1;
			min-width: 100%;
		}

		.unknown-attachment {
			.placeholder {
				width: 100%;
				height: 100%;
				padding: 0.8rem;

				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 0.25rem;

				color: $white2;

				.placeholder-external-link {
					align-self: end;
					font-size: 2.5rem;
				}

				.placeholder-icon {
					width: 100%;
					font-size: 3.5rem;
					text-align: center;
					margin-top: auto;
				}

				.placeholder-link-to {
					width: 100%;
					text-align: center;
					margin-bottom: auto;
				}
			}
		}
	}

	@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.2rem;
	
					> .fa-fw {
						line-height: 1.4rem;
					}
				}
			}
		}
	}

	@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.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 {
	display: flex;
	align-items: center;
	justify-content: center;

	span > i {
		background: $status-bg;
		color: $fg;
		border-radius: 25%;
	}
}

.plyr--video {
	flex-direction: column-reverse;

	.plyr__video-wrapper {
		position: relative;
	}

	.plyr__controls {
		align-self: stretch;
		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__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;

	/*
		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;
	}
}