com.xaymar.www/_sass/_block-media.scss

// --------------------------------------------------------------------------------
// Block: Media
// --------------------------------------------------------------------------------
.block-media {
	position: relative;
	overflow: hidden;
}

.block-media > a > .content,
.block-media > .content {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

.block-media > figcaption {
	display: block;
	margin: 0;
	padding: .25em .5em;
	text-align: center;
	font-size: 0.9em;
	background: rgba(0, 0, 0, 0.5);
}

// --------------------------------------------------------------------------------
// Block: Media Player
// --------------------------------------------------------------------------------
$media-player-button-size: 1.5rem;

.block-media.hide {
	cursor: none;
}

.block-media > .top,
.block-media > .bottom {
	display: block;
	margin: 0;
	padding: 0.2rem 0.5rem;
	z-index: 1;
}

.block-media > .top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	display: flex;
	padding-bottom: 1rem;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
	gap: 0.5rem;

	background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 80%);
	transition: top ease-in-out 100ms, opacity ease-in-out 100s;
	opacity: 1.0;

	overflow: hidden;
	user-select: none;
}

.block-media.hide > .top {
	top: -100%;
	opacity: 0.0;
	transition: top ease-in-out 500ms, opacity ease-in-out 500s;
}

.block-media > .top > .variant {
	flex-grow: 1;
}

.block-media > .bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;

	display: flex;
	padding-top: 1rem;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
	gap: 0.5rem;

	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 80%);
	transition: top ease-in-out 100ms, opacity ease-in-out 100s;
	opacity: 1.0;

	overflow: hidden;
	user-select: none;
}

.block-media.hide > .bottom {
	bottom: -100%;
	opacity: 0.0;
	transition: top ease-in-out 500ms, opacity ease-in-out 500s;
}

.block-media > .bottom > .play {
	display: block;
	flex-grow: 0;
	margin: 0;
	padding: 0;
	width: $media-player-button-size;
	height: $media-player-button-size;

	font-size: $media-player-button-size;
	line-height: $media-player-button-size;
	text-align: center;
	user-select: none;
}
.block-media > .bottom > .play.playing {
}

.block-media > .bottom > .time {
	display: block;
	margin: 0;
	padding: 0;
	width: auto;
	height: $media-player-button-size;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;

	text-align: right;
	line-height: $media-player-button-size;
	user-select: auto;
}

.block-media > .bottom > .progress {
	margin: 0;
	padding: 0;
	width: auto;
	min-width: 5rem;
	height: 100%;
	flex-grow: 5;
	flex-shrink: 1;

	display: block;
	user-select: none;
}
.block-media > .bottom > .mute {
	display: block;
	margin: 0;
	padding: 0;
	width: $media-player-button-size;
	height: $media-player-button-size;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;

	font-size: $media-player-button-size;
	line-height: $media-player-button-size;
	text-align: center;
	user-select: none;
}
.block-media > .bottom > .mute.muted {
}

.block-media > .bottom > .volume {
	display: block;
	margin: 0;
	padding: 0;
	width: auto;
	min-width: 3rem;
	max-width: 6rem;
	height: 100%;
	flex-grow: 1;
	flex-shrink: 5;
	flex-basis: auto;

	user-select: none;
}

.block-media > .bottom > .fullscreen {
	display: block;
	margin: 0;
	padding: 0;
	width: $media-player-button-size;
	height: $media-player-button-size;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;

	font-size: $media-player-button-size;
	line-height: $media-player-button-size;
	text-align: center;
	user-select: none;
}

@media (max-width: 500px) {
	.block-media > .bottom > .time {
		display: none;
	}
}
@media (max-width: 350px) {
	.block-media > .bottom > .volume {
		display: none;
	}
}
@media (max-width: 250px) {
	.block-media > .bottom > .play,
	.block-media > .bottom > .mute,
	.block-media > .bottom > .fullscreen {
		display: none;
	}
}

// --------------------------------------------------------------------------------
// Block: Media > Audio
// --------------------------------------------------------------------------------

// --------------------------------------------------------------------------------
// Block: Media > Video
// --------------------------------------------------------------------------------
.block-media > a > video,
.block-media > video {
	display: block;
	width: 100%;
	object-fit: contain;
	object-position: center;
}

// --------------------------------------------------------------------------------
// Block: Media > Picture
// --------------------------------------------------------------------------------
.block-media > a > .content > img,
.block-media > .content > img {
	display: block;
	width: 100%;
}