com.xaymar.www/_sass/_player.scss

// --------------------------------------------------------------------------------
// Media Player
// --------------------------------------------------------------------------------
player {
	display: grid;
	grid-template: auto / auto;
	--button-size: 2.0rem;

	overlay {
		grid-column: 1;
		grid-row: 1;
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		z-index: 1;

		background: transparent;

		.variants {
			position: absolute;
			bottom: calc(var(--button-size) + 1.0rem);
			right: calc(var(--button-size) + 1.0rem);
			z-index: 2;
			line-height: 1.1rem;
			font-size: 1.1rem;
			padding: 0.1em;
			margin: 0;
			max-height: 50%;
			height: calc(10 * 1em);

			appearance: none;
			outline: none;
			background: rgba(0, 0, 0, 0.9);
			color: $theme-menu-color;
			border: none;

			transition: height ease-in-out 100ms, bottom ease-in-out 500ms, opacity ease-in-out 100ms;

			option {
				padding: 0.1em 0.25em;
				margin: 0;
			}

			option:hover,
			option:focus {
				background: hsla($theme-hue, 75%, 30%, 0.5);
				color: $theme-menu-color-active;
			}

			option:active {
				background: hsla($theme-hue, 100%, 50%, 0.5);
				color: $theme-menu-color-active;
			}
		}

		.variants.hide {
			height: 0px;
			opacity: 0.0;
		}

		controls {
			transition: bottom ease-in-out 100ms, opacity ease-in-out 100ms;
			display: flex;
			margin: 0;
			padding: 0.5rem 0.5rem;
			padding-top: 1rem;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-items: stretch;
			align-content: stretch;
			gap: 0.5rem;

			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;

			background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 0.5rem);
			opacity: 1.0;

			overflow: hidden;
			user-select: none;

			div {
				display: block;
				margin: 0;
				padding: 0;

				flex-grow: 0;
				flex-shrink: 0;
				flex-basis: auto;

				text-align: center;
				user-select: none;
			}

			input {
				display: block;
				margin: 0;
				padding: 0;

				flex-grow: 0;
				flex-shrink: 0;
				flex-basis: auto;

				text-align: center;
				user-select: none;
			}

			.play {
				width: var(--button-size);
				height: var(--button-size);

				font-size: var(--button-size);
				line-height: var(--button-size);
			}

			.time {
				width: auto;
				height: var(--button-size);
				flex-grow: 0;
				flex-shrink: 0;
				flex-basis: auto;

				text-align: right;
				line-height: var(--button-size);
				user-select: auto;
			}

			.progress {
				width: auto;
				min-width: 5rem;
				height: var(--button-size);
				flex-grow: 5;
				flex-shrink: 1;
			}

			.mute {
				width: var(--button-size);
				height: var(--button-size);
				font-size: var(--button-size);
				line-height: var(--button-size);
			}

			.volume {
				width: auto;
				min-width: 3rem;
				max-width: 6rem;
				height: var(--button-size);
				flex-grow: 1;
				flex-shrink: 5;
				flex-basis: auto;
			}

			.variant {
				width: var(--button-size);
				height: var(--button-size);
				font-size: var(--button-size);
				line-height: var(--button-size);
			}

			.fullscreen {
				width: var(--button-size);
				height: var(--button-size);
				font-size: var(--button-size);
				line-height: var(--button-size);
			}
		}
	}
}

player.hide {
	cursor: none;

	overlay {
		.variants {
			bottom: -100%;
			opacity: 0.0;
			transition: bottom ease-in-out 500ms, opacity ease-in-out 500ms;
		}

		controls {
			bottom: -100%;
			opacity: 0.0;
			transition: bottom ease-in-out 500ms, opacity ease-in-out 500ms;
		}
	}
}

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

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

player overlay .top>.variant {
	flex-grow: 1;
}

@media (max-width: 500px) {
	player overlay controls .time {
		display: none;
	}
}

@media (max-width: 350px) {
	player overlay controls .volume {
		display: none;
	}
}

@media (max-width: 250px) {

	player overlay controls .play,
	player overlay controls .mute,
	player overlay controls .fullscreen {
		display: none;
	}
}