sonix-player/src/sonix-player.css

A modern, customizable audio player web component with support for thumbnails, speed control, and volume management

@import "tailwindcss";

/* sonix player default theme */
@theme {
	--color-sonix-black: #121212;
	--color-sonix-accent: #fff;
	--color-sonix-primary: #303030;
	--color-sonix-secondary: #ff4600;
}

/* sonix player container */
.sonix-player {
	@apply overflow-hidden text-sonix-accent bg-sonix-primary select-none rounded-lg shadow-2xl;

	button:focus-visible {
		@apply outline-2 outline-solid outline-sonix-secondary;
	}
}

/* sonix player thumbnail styles */
.sonix-thumbnail-container {
	@apply relative py-8 rounded-t-lg overflow-hidden z-1;
}

.sonix-thumbnail-filter {
	@apply absolute inset-0 rounded-t-lg bg-cover bg-no-repeat scale-150 blur-xs z-[-1];
}

.sonix-thumbnail-img {
	@apply w-28 h-28 lg:w-40 lg:h-40 object-cover mx-auto rounded-lg drop-shadow-2xl drop-shadow-sonix-black;
}

/* sonix player container inner */
.sonix-inner {
	@apply px-2 overflow-x-auto xl:overflow-x-hidden flex flex-col justify-between items-center lg:flex-row;

	& > * {
		@apply w-full lg:w-auto;
	}
}

/* button holders play & repeat & volume ... */
.sonix-btn-holder {
	@apply relative p-2;

	button:not(.sonix-play-btn) {
		@apply flex justify-center items-center relative cursor-pointer;

		&:hover:not(.sonix-active) {
			@apply text-sonix-accent/70;

			.sonix-icon svg {
				@apply fill-sonix-accent/70;
			}
		}

		.sonix-icon {
			svg {
				@apply size-6 fill-sonix-accent;
			}
		}
	}
}

/* play & pause button */
.sonix-play-btn {
	@apply p-2 bg-sonix-accent text-sonix-primary rounded-full overflow-hidden flex justify-center items-center relative cursor-pointer size-12 duration-100;

	&:hover:not(.sonix-is-playing) {
		@apply bg-sonix-secondary;

		svg {
			@apply fill-sonix-accent;
		}
	}

	.sonix-icon {
		@apply duration-300 absolute flex justify-center items-center;

		svg {
			@apply size-8 fill-sonix-primary;
		}

		&:nth-child(2) {
			@apply opacity-0 translate-y-full;
		}
	}

	&.sonix-is-playing {
		@apply bg-sonix-secondary;

		.sonix-icon {
			@apply opacity-0 -translate-y-full;

			svg {
				@apply fill-sonix-accent;
			}

			&:nth-child(2) {
				@apply opacity-100 translate-y-0;
			}
		}
	}
}

/* sonix player timeline container - inner - outer */
.sonix-timeline-container {
	@apply mx-0 lg:mx-4 p-4 flex justify-center items-center gap-4 font-semibold;
}

.sonix-timeline-outer {
	@apply relative w-full sm:min-w-1/2 h-1.5 rounded-lg bg-sonix-accent/30 cursor-pointer;

	&:hover,
	&:target {
		.sonix-timeline-inner::after {
			scale: 1;
			opacity: 1;
		}
	}
}

.sonix-timeline-inner {
	@apply absolute left-0 w-0 h-[inherit] rounded-[inherit] bg-sonix-secondary;

	&::after {
		@apply content-[""] absolute right-[-8px] top-[-3px] w-3 h-3 rounded-full;
		@apply bg-sonix-primary border border-solid border-sonix-secondary;
		@apply duration-200 scale-0 opacity-0;
	}
}

/* style custom range input */
.sonix-btn-holder:focus-visible .sonix-custom-range,
.sonix-btn-holder:hover .sonix-custom-range,
.sonix-btn-holder:target .sonix-custom-range {
	@apply py-4 px-3 ml-2;
	width: 128px;
	opacity: 1;
	scale: 1;
}

/* volume and speed container */
.sonix-vol-speed {
	@apply max-lg:hidden;
}

.sonix-custom-range {
	@apply bg-sonix-black w-0 h-10 rounded-lg shadow-2xl cursor-pointer border border-solid border-sonix-accent/30 flex justify-center items-center duration-100 scale-0 opacity-0 overflow-hidden;
}

.sonix-custom-range-outer {
	@apply relative bg-sonix-primary w-full h-full rounded-full;
}

.sonix-custom-range-inner {
	@apply absolute bg-sonix-accent w-full h-full rounded-full;

	&::after {
		@apply content-[""] absolute top-[-5px] right-[-5px] w-4 h-4 duration-200 bg-sonix-black border border-solid border-sonix-accent rounded-full;
	}
}

/* sonix speed button */
.sonix-speed-btn {
	.sonix-icon {
		@apply flex items-center gap-0.5;
	}
}

/* sonix info styles => artist name - song name - figure image */
.sonix-info {
	@apply py-4 px-3 lg:pl-4 flex gap-4 items-center;
}

.sonix-figure-container {
	@apply relative w-12 h-12 overflow-hidden;
}

.sonix-figure-img {
	@apply object-cover aspect-square w-full h-full rounded-md;
}

.sonix-text-info {
	@apply flex flex-col text-sm;
}

.sonix-artist,
.sonix-name {
	@apply max-w-20 truncate text-ellipsis;
}

.sonix-artist {
	@apply text-sonix-accent/70;
}

.sonix-name {
	@apply font-semibold;
}

/* for active class on controls */
.sonix-btn-holder button.sonix-active {
	.sonix-icon {
		svg {
			@apply fill-sonix-secondary;
		}
	}
}

/* add loading animation on thumbnail container section */
.sonix-loader {
	@apply absolute inset-0 flex flex-col justify-center items-center h-full bg-sonix-black/70;
}

.sonix-loader-inner {
	@apply flex justify-center items-center gap-4;
}

.sonix-line {
	@apply rounded-full w-2 bg-sonix-secondary;
	animation: sonix-loading 0.2s cubic-bezier(0, 0.55, 0.45, 1) infinite alternate;

	&.h-7 {
		animation-delay: 50ms;
	}

	&.h-4 {
		animation-delay: 200ms;
	}

	&.h-8 {
		animation-delay: 100ms;
	}

	&.h-10 {
		animation-delay: 250ms;
	}
}

@keyframes sonix-loading {
	from {
		transform: scaleY(0.1);
	}
}