Update styles.css blocklist fixing/adding search/subscriptions with t…

…humbnails Previews

js&css/extension/www.youtube.com/styles.css

@@ -365,9 +365,9 @@ html[it-channel-hide-featured-content=true] #secondary ytd-browse-secondary-cont
 	content: '';
 	border-radius: 50%;
 	background: #f00;
-	/*  background-image: url('/stuff/icons/48.png'); 
-    background-size: cover;
-    background-position: center; */
+	/*	background-image: url('/stuff/icons/48.png');
+	background-size: cover;
+	background-position: center; */
 }
 
 .it-button::after {
@@ -463,7 +463,7 @@ ytd-guide-section-renderer .it-button::after {
 	position: absolute;
 	top: 4px;
 	left: 4px;
-	z-index: 999;
+	z-index: 2400;
 	visibility: hidden;
 	width: 28px;
 	height: 28px;
@@ -530,6 +530,8 @@ ytd-guide-section-renderer .it-button::after {
 	cursor: pointer;
 }
 
+ytd-video-preview.it-blocklisted-video:hover .it-add-to-blocklist,
+ytd-video-preview.it-blocklisted-channel:hover .it-add-to-blocklist,
 *:hover>.it-add-to-blocklist {
 	visibility: visible;
 }
@@ -545,11 +547,11 @@ ytd-guide-section-renderer .it-button::after {
 }
 
 .it-blocklisted-video .it-add-to-blocklist::after {
-    content: "Unblock Video";
+	content: "Unblock Video";
 }
 
 .it-blocklisted-channel .it-add-to-blocklist::after {
-    content: "Unblock Channel"!important;
+	content: "Unblock Channel"!important;
 }
 
 .it-blocklisted-video,
@@ -560,11 +562,27 @@ ytd-guide-section-renderer .it-button::after {
 	transition: max-height 0.4s ease 0.1s;
 }
 
+.it-blocklisted-video.ytd-vertical-list-renderer,
+.it-blocklisted-video.ytd-item-section-renderer,
+.it-blocklisted-channel.ytd-vertical-list-renderer,
+.it-blocklisted-channel.ytd-item-section-renderer {
+	max-height: 120px;
+}
+
 ytd-grid-video-renderer .it-blocklisted-video,
 ytd-grid-video-renderer .it-blocklisted-channel,
 ytd-rich-grid-media .it-blocklisted-video,
 ytd-rich-grid-media .it-blocklisted-channel {
 	overflow: visible;
+	max-height: 120px;
+}
+
+ytd-video-preview.it-blocklisted-video:hover .it-add-to-blocklist,
+ytd-video-preview.it-blocklisted-channel:hover .it-add-to-blocklist,
+body:has(.it-blocklisted-video:hover) ytd-video-preview.it-blocklisted-video,
+body:has(.it-blocklisted-channel:hover) ytd-video-preview.it-blocklisted-channel {
+	max-height: var(--ytd-video-preview-height);
+	opacity: 1;
 }
 
 .it-blocklisted-video ytd-thumbnail,
@@ -578,7 +596,8 @@ ytd-rich-grid-media .it-blocklisted-channel {
 .it-blocklisted-channel:hover {
 	opacity: 1;
 	overflow: visible;
-	max-height: 120px;
+	height: fit-content;
+	max-height: fit-content;
 	transition: max-height 0.4s ease 1.1s;
 }
 
@@ -587,6 +606,7 @@ ytd-rich-grid-media .it-blocklisted-channel {
 	visibility: visible;
 	max-width: 220px;
 	transition: max-width 0.4s ease 1.1s;
+	height: fit-content;
 }
 /*------------NEW---------------*/
 
@@ -1975,7 +1995,7 @@ html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peferen
 	--ytd-simple-badge-color: hsla(0, 0%, 100%, .6);
 	--ytd-ad-badge-text-color: hsl(0, 0%, 7%);
 	--ytd-shopping-product-info: hsla(0, 100%, 100%, .74);
-	--ytd-toggle-color: hsl(0, 0%, 93.3%); 
+	--ytd-toggle-color: hsl(0, 0%, 93.3%);
 	--ytd-survey-button-color: var(--yt-primary-text-color);
 	--ytd-transcript-cue-hover-background-color: hsla(0, 0%, 53.3%, .4);
 	--ytd-transcript-toolbar-background-color: hsla(0, 0%, 53.3%, .4);
@@ -2076,20 +2096,20 @@ Need HTML in front to make CSS rule more specific than one they are overiding
 
 /*possible fix:
 #hover-overlays .yt-spec-icon-shape,
-ytd-thumbnail-overlay-toggle-button-renderer .yt-spec-icon-shape  {color:white;}  
+ytd-thumbnail-overlay-toggle-button-renderer .yt-spec-icon-shape  {color:white;}
 */
 
 /* html .yt-spec-icon-shape, */
 html .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon,
 html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text,
 html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
 html .yt-video-attribute-view-model__title {
-    color: var(--yt-spec-text-primary);
+	color: var(--yt-spec-text-primary);
 }
 
 /*Dark colors get highlight*/
 html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
-    background-color: rgba(255, 255, 255, 0.1);
+	background-color: rgba(255, 255, 255, 0.1);
 }
 /*Light colors get shadow, overrides above highlight*/
 html[it-theme=desert] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
@@ -2100,8 +2120,8 @@ html:not([dark]):not([it-theme=black]):not([it-theme=sunset]):not([it-theme=nigh
 
 /*subscribe button when not subscribed*/
 html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
-    color: var(--yt-spec-base-background);
-    background-color: var(--yt-spec-text-primary);
+	color: var(--yt-spec-base-background);
+	background-color: var(--yt-spec-text-primary);
 }
 
 /*override bell and thumbs up icons hardcoded colors inside SVG data*/