diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index d017b09e7..b09e08e58 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/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,7 +2096,7 @@ 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, */ @@ -2084,12 +2104,12 @@ 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*/