browser-icons.css

/* video, alternative 1:
   top-left icon, just like the other formats
=======================================================================

#ggrid>a:is(
[href$=".mkv"i],
[href$=".mp4"i],
[href$=".webm"i],
):before {
    content: '📺';
}
*/



/* video, alternative 2:
   play-icon in the middle of the thumbnail
=======================================================================
*/
#ggrid>a:is(
[href$=".mkv"i],
[href$=".mp4"i],
[href$=".webm"i],
) {
	position: relative;
	overflow: hidden;
}
#ggrid>a:is(
[href$=".mkv"i],
[href$=".mp4"i],
[href$=".webm"i],
):before {
    content: '▶';
	opacity: .8;
	margin: 0;
	padding: 1em .5em 1em .7em;
	border-radius: 9em;
	line-height: 0;
	color: #fff;
	text-shadow: none;
	background: rgba(0, 0, 0, 0.7);
	left: calc(50% - 1em);
	top: calc(50% - 1.4em);
}



/* audio */
#ggrid>a:is(
[href$=".mp3"i],
[href$=".ogg"i],
[href$=".opus"i],
[href$=".flac"i],
[href$=".m4a"i],
[href$=".aac"i],
):before {
    content: '🎵';
}



/* image */
#ggrid>a:is(
[href$=".jpg"i],
[href$=".jpeg"i],
[href$=".png"i],
[href$=".gif"i],
[href$=".webp"i],
):before {
    content: '🎨';
}