Skip to content

YouTube with just Logo by KABA

Screenshot of YouTube with just Logo
Write a review Install Get Stylus

Details

AuthorKABA

LicenseNo License

Categoryyoutube

Created

Updated

Code size1.2 kB

Code checksum48df490

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Hide content until hover and display logo.
YouTube Music is also included.

Notes

Separated from the following user style.

YouTube with hidden sidebar

Added support for turning on/off in Bookmarklet. (2025/03/24)

// Fixed at 2025/04/13
javascript:{let u=new URL(window.location.href);u.hash=u.hash?"":"show";history.replaceState("","",u.toString())}

Source code

/* ==UserStyle==
@name         YouTube with just Logo
@version      20250131.09.07
@namespace    https://userstyles.world/user/KABA
@description  Hide content until hover and display logo. YouTube Music is also included.
@author       KABA
@license      No License
==/UserStyle== */

@-moz-document regexp("https://\\w+.youtube.com/watch?[^#]*(?!#show($|[^a-zA-Z0-9]))") {
/* Domain */

/* - Base */
:root {
	--show-duration: .64s;
	--show-delay: .2s;
	--hide-duration: .4s;
	--hide-delay: 0;

	--transition:
		var(--show-duration)
		var(--show-delay)
ease-in-out;

	/* Logo */
	/* YouTube */ --logo: url(//www.gstatic.com/youtube/img/branding/youtubelogo/svg/youtubelogo.svg);
	/* YouTube Music */ &:has(.ytmusic-app) { --logo: url(/img/ringo2/on_platform_logo_dark.svg) }
	&::before {
		position: fixed;
		inset: 0;
		margin: auto;
		background: var(--logo) 50% / 24vw no-repeat;
		content: "";
	}
}

/* - Hide elements */
body {
	transition: var(--transition);

	&:not(:hover, :focus-within) {
		transition-duration: var(--hide-duration);
		transition-delay:    var(--hide-delay);
		opacity: 0;
	}
}
}

Reviews

No reviews yet.