YouTube Audio-only Stylus style

youtube-audio.css

/*
 * YouTube Audio-only CSS
 * Add this to Stylus or any browser style extension for audio-only "work mode"
 * Hides all images, avatars, and the video
 */

/* Video player */

div#player-container,
div#player,
div#theater-background,
div#player-mole-container,
div#player-api,
video.video-stream.html5-main-video
{
    height: 50px !important;
    min-height: 0 !important;
    max-height: 50px !important;
}

div.player-api 
{
	height: 0px !important;
}

/* Thumbnails */

ytd-thumbnail.ytd-grid-video-renderer,
ytd-thumbnail.ytd-newspaper-mini-video-renderer,
.yt-uix-simple-thumb-wrap,
.yt-thumb-clip {
    background: #eee;
    width: 100%;
}

ytd-thumbnail.ytd-compact-video-renderer,
ytd-thumbnail.ytd-newspaper-hero-video-renderer,
ytd-playlist-thumbnail.ytd-playlist-renderer {
    background: #eee;
}
    
ytd-thumbnail img,
ytd-playlist-thumbnail.ytd-playlist-renderer img,
.yt-uix-simple-thumb-wrap img,
.yt-thumb-clip img {
    display: none !important;
}

.yt-thumb-simple {
    background: #eee !important;
    display: block;
    height: 110px;
}
.yt-thumb-simple:hover {
    background: #eaeaea !important;
}
.yt-thumb-simple img {
    visibility: hidden !important;
}

/* Avatars */

yt-img-shadow#avatar,
yt-img-shadow#author-thumbnail,
yt-img-shadow.ytd-comment-renderer {
    opacity: 0.3 !important;
    filter: grayscale(100%) blur(.5px);
}

/* Channel pages */

#header.ytd-c4-tabbed-header-renderer { /* HTML5 version */
    --app-header-background-front-layer_-_background-image: none !important;
    background: #ddd !important;
}

.hd-banner-image {
    background-image: none !important;
    background: #ddd !important;
}

.channel-header-profile-image-container:after {
	display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background: rgba(255,255,255,.75);
    height: 100px;
}

/* Show thumbs on hover */

ytd-thumbnail:hover img,
ytd-playlist-thumbnail.ytd-playlist-renderer:hover img {
    display: block !important;
    opacity: 0.3 !important;
}

.yt-thumb-simple:hover img {
	visibility: visible !important;
    opacity: 0.3 !important;
}