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;
	z-index: 2;

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

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

		&[open] summary {
			height: auto;
			width: auto;
			margin: 1rem;
			padding: 0;

			.show, video, img {
				display: none;
			}

			.eye.button .hide {
				display: inline-block;
				grid-column: 1 / span 3;
				grid-row: 1 / span 2;
			}
		}

		summary {
			position: absolute;
			height: 100%;
			width: 100%;
			z-index: 3;
			overflow: hidden;
				
			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;

				.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;
				}
			}

			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;
			background: $gray1;
		}

		.unknown-attachment {
			.placeholder {
				width: 100%;
				height: 100%;
				padding: 0.8rem;
				border: 0.2rem dashed $white2;
						
				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;
				}
			}
		}
	}
}

.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;
	}

	.plyr__control {
		box-shadow: none;
	}

	.plyr__control--overlaid {
		top: calc(50% - 18px);
	}
}

.pswp__content {
	padding: 2rem;

	.plyr {
		max-height: 100%;
	}
}