gsuiSoundbox.css

.gsuiSoundbox {
	position: relative;
	display: grid;
	height: 100%;
	overflow: hidden auto;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	flex-wrap: wrap;
	align-content: start;
	border-radius: 4px;
	background-color: #414141;
	background-image: url( "data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E" );
}
.gsuiSoundbox:empty::before {
	position: absolute;
	align-self: center;
	justify-self: center;
	content: "drop your samples here";
	padding: 8px 16px;
	border-radius: 4px;
	color: #999;
	font-size: 12px;
	font-weight: bold;
	background-color: inherit;
}

.gsuiSoundbox-cell {
	position: relative;
	box-sizing: border-box;
	border: 0;
	padding: 0;
	outline: 0;
	color: inherit;
	cursor: pointer;
	background-color: #5c5c5c;
	transition: .2s background-color;
}
.gsuiSoundbox-cell:hover {
	background-color: hsl( 0deg 0% 56% );
}
.gsuiSoundbox-cell-info {
	position: absolute;
	display: flex;
	gap: 1ch;
	align-items: baseline;
	left: 2px;
	right: 2px;
	bottom: 2px;
	text-align: start;
	font-size: 10px;
	font-weight: bold;
	text-shadow: 1px 1px black;
	pointer-events: none;
	opacity: .5;
}
.gsuiSoundbox-cell:hover .gsuiSoundbox-cell-info {
	opacity: 1;
}
.gsuiSoundbox-cell-title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 12px;
}
.gsuiSoundbox-cell-duration {
	opacity: .5;
}
.gsuiSoundbox-cell-wave {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 60px;
	border-radius: 2px;
	background-color: #0002;
	pointer-events: none;
}
.gsuiSoundbox-cell svg {
	position: absolute;
	fill: #22222a;
	width: 100%;
	height: 100%;
	left: 0;
	opacity: .5;
}
.gsuiSoundbox-cell-cursor {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: currentColor;
	transition: 0s linear left;
}
.gsuiSoundbox-cell-cursor::before {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	right: 100%;
	width: 300px;
	background-image: linear-gradient( 90deg, transparent, currentColor );
	opacity: .2;
}