@supports (color: var(--reference-dimension)){
/* reference dimension */
/*
--ytd-watch-flexy-panel-max-height: 549px
*/
/*
ytd-watch-flexy {
--ytd-watch-flexy-sidebar-width: 402px;
--ytd-watch-flexy-sidebar-min-width: 300px;
--ytd-watch-flexy-masthead-height: 56px;
min-width: 0;
}
ytd-watch-flexy[flexy] {
--ytd-watch-flexy-width-ratio: 16;
--ytd-watch-flexy-height-ratio: 9;
--ytd-watch-flexy-space-below-player: 136px;
--ytd-watch-flexy-non-player-height: calc( var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player) );
--ytd-watch-flexy-non-player-width: calc( var(--ytd-watch-flexy-sidebar-width) + (3 * var(--ytd-margin-6x)) );
--ytd-watch-flexy-min-player-height: 240px;
--ytd-watch-flexy-min-player-width: calc( var(--ytd-watch-flexy-min-player-height) * (var(--ytd-watch-flexy-width-ratio) / var(--ytd-watch-flexy-height-ratio)) );
--ytd-watch-flexy-max-player-height: calc( 100vh - ( var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player) ) );
--ytd-watch-flexy-max-player-width: calc( ( 100vh - ( var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player) ) ) * (var(--ytd-watch-flexy-width-ratio) / var(--ytd-watch-flexy-height-ratio)) );
}
*/
/*
html:not(.style-scope) {
--ytd-grid-base: 103px;
--ytd-margin-base: 4px;
--ytd-avatar-size: 32px;
--ytd-toolbar-height: 56px;
--ytd-margin-2x: 8px;
--ytd-margin-3x: 12px;
--ytd-margin-4x: 16px;
--ytd-margin-5x: 20px;
--ytd-margin-6x: 24px;
--ytd-margin-7x: 28px;
--ytd-margin-8x: 32px;
--ytd-margin-9x: 36px;
--ytd-margin-10x: 40px;
--ytd-margin-11x: 44px;
--ytd-margin-12x: 48px;
--ytd-margin-14x: 56px;
--ytd-margin-16x: 64px;
--ytd-margin-17x: 68px;
--ytd-margin-24x: 96px;
--ytd-margin-25x: 100px;
--ytd-margin-35x: 140px;
--ytd-neg-margin-base: -4px;
--ytd-neg-margin-2x: -8px;
--ytd-neg-margin-3x: -12px;
--ytd-neg-margin-4x: -16px;
--ytd-neg-margin-5x: -20px;
--ytd-neg-margin-6x: -24px;
--ytd-neg-margin-7x: -28px;
--ytd-neg-margin-8x: -32px;
--ytd-neg-margin-10x: -40px;
--ytd-neg-margin-11x: -44px;
--ytd-neg-margin-12x: -48px;
--ytd-neg-margin-14x: -56px;
--ytd-neg-margin-16x: -64px;
--ytd-neg-margin-24x: -96px;
--ytd-neg-margin-25x: -100px;
--ytd-grid-1x1_-_height: 103px;
--ytd-grid-1x1_-_width: 103px;
}
*/
}
@supports (background: -webkit-named-image(i)) {
/* safari only */
#player #cinematics.ytd-watch-flexy {
display: none
}
}
@supports (color-invalid: var(--performance-hack)){
ytd-watch-flexy[video-id] #columns {
--tyt-lock-display: none;
}
ytd-watch-flexy[video-id] #player {
--tyt-lock-display: block;
}
html[tabview-loaded] ytd-watch-flexy #related.ytd-watch-flexy {
--tyt-lock-display: block;
}
html[tabview-loaded] ytd-watch-flexy #related.ytd-watch-flexy > * {
--tyt-lock-display: none;
}
html[tyt-lock] #secondary-inner > * {
display: var(--tyt-lock-display) !important;
}
}
/*
@supports (color: var(--endpoint-hover-colorize)){
ytd-watch-metadata[has-metamove] #info.ytd-watch-metadata a.yt-simple-endpoint{
--yt-endpoint-color: var(--yt-spec-text-secondary);
--yt-endpoint-hover-color: var(--yt-spec-text-secondary);
--yt-endpoint-visited-color: var(--yt-spec-text-secondary);
}
ytd-watch-metadata[has-metamove] #info.ytd-watch-metadata a.yt-simple-endpoint:hover{
--yt-endpoint-color: var(--yt-spec-call-to-action);
--yt-endpoint-hover-color: var(--yt-spec-call-to-action);
--yt-endpoint-visited-color: var(--yt-spec-call-to-action);
}
}
*/
@supports (color: var(--non-clickable-endpoint)){
/* to be removed since YouTube layout css updated */
ytd-watch-metadata[has-metamove][description-collapsed] #info.ytd-watch-metadata a.yt-simple-endpoint {
pointer-events: none;
}
/* May 2023 @ 2023.05.15 */
ytd-watch-metadata[description-collapsed] #description.ytd-watch-metadata #info.ytd-watch-metadata a[href] {
pointer-events: none;
}
}
@supports (color: var(--donation-shelf-related)) {
/* @keyframes swVq1DOMAppended */
body #donation-shelf.ytd-watch-flexy ytd-donation-shelf-renderer.ytd-watch-flexy,
body #donation-shelf.ytd-watch-flexy ytd-donation-unavailable-renderer.ytd-watch-flexy {
margin-bottom: var(--ytd-margin-3x);
}
/* this works for latest browsers only */
ytd-watch-flexy[is-two-columns_]:has(ytd-donation-unavailable-renderer.ytd-watch-flexy){
--tyt-tabs-upspace-donation-unavailable: 42px;
}
/* @keyframes swVq1DOMAppended */
ytd-watch-flexy[tyt-donation-shelf] #collapse-controls-section.ytd-donation-shelf-renderer {
display: none;
}
ytd-watch-flexy[tyt-donation-shelf] ytd-donation-shelf-renderer.ytd-watch-flexy[swVq2="1"]:not([hidden]):not(:empty){
--tyt-x-chat-max-height: calc(var(--tyt-x-base-height) - 36px - 6px);
max-height: var(--tyt-x-chat-max-height);
overflow: auto;
}
:fullscreen ytd-watch-flexy[tyt-donation-shelf] ytd-donation-shelf-renderer.ytd-watch-flexy[swVq2="1"]:not([hidden]):not(:empty) {
--tyt-x-chat-max-height: calc(100vh - var(--ytd-watch-flexy-masthead-height) - 40px - var(--tyt-x-h-tab-btn) - var(--ytd-margin-6x) - var(--ytd-margin-6x) - 46px);
}
ytd-watch-flexy[theater][tyt-chat^="-"] ytd-donation-unavailable-renderer.ytd-watch-flexy {
display: none;
}
ytd-donation-shelf-renderer.ytd-watch-flexy {
position: relative; /* css fix for cinematic effect */
}
ytd-donation-shelf-renderer.ytd-watch-flexy.tyt-hidden:not([hidden]) {
display: none !important;
/*
display: block !important;
position: fixed !important;
left: 10px;
top: 10px;
z-index: -1;
visibility: collapse;
transform: scale(0.01);
transform-origin: 0 0;
pointer-events: none;
user-select: none;
touch-action: none;
*/
}
}
ytd-watch-flexy {
--tabview-youtube-tabbtn-height: 46px;
/*--tabview-ytd-toggle-button-height: 32px;*/
/* custom size for meta-contents */
--meta-contents-default-height-outer: 30px;
/*--tyt-x-meta-default-outline-thickness: 1px;*/
--meta-contents-padding-vertical: 4px;
--meta-contents-default-height-inner: calc(var(--meta-contents-default-height-outer) - var(--meta-contents-padding-vertical) * 2);
/* recalculation of right-tab height */
/*
--ytd-masthead-height
--ytd-toolbar-height
--ytd-watch-flexy-masthead-height
*/
--ytd-watch-flexy-panel-max-height--def: 549px; /* use this value as default, if not provided */
--ytd-watch-flexy-panel-max-height--rr: var(--ytd-watch-flexy-panel-max-height, var(--ytd-watch-flexy-panel-max-height--def));
/*
2024.04.27 YouTube tries to use dynamic value for the following features. so the value might not be defined when the page is just loaded. */
/*
--ytd-watch-flexy-scrollbar-width: 0px;
--ytd-watch-flexy-max-player-width-wide-screen: 1280px; --ytd-watch-flexy-space-below-player: 136px;
--ytd-watch-flexy-panel-max-height: 560.25px; --ytd-watch-flexy-chat-max-height: 560.25px; --ytd-watch-flexy-structured-description-max-height: 560.25px; --ytd-watch-flexy-comments-panel-max-height: 560.25px; --ytd-comments-engagement-panel-content-height: 560.25px;
*/
--tyt-x-top-bar-height: var(--ytd-masthead-height, var(--ytd-toolbar-height));
--tyt-x-below-height: calc(100vh - var(--tyt-x-top-bar-height) - var(--ytd-watch-flexy-panel-max-height--rr));
--tyt-x-h1: calc(var(--ytd-watch-flexy-panel-max-height--rr) + var(--tyt-x-below-height));
--tyt-x-h-tab-btn: var(--tabview-youtube-tabbtn-height);
--tyt-x-h2: calc(var(--tyt-x-h1) - var(--tyt-x-h-tab-btn) - var(--ytd-margin-6x));
--tyt-x-base-height: calc(var(--tyt-x-h2) - var(--ytd-margin-6x));
--tyt-x-zoom-info: var(--ut2257-info, 1.00);
--tyt-x-zoom-comments: var(--ut2257-comments, 1.00);
--tyt-x-zoom-videos: var(--ut2257-videos, 1.00);
--tyt-x-zoom-list: var(--ut2257-list, 1.00);
--tyt-native-ui-autohide-visibility: collapse;
--tyt-tab-panel-scrollbar-margin: 16px; /* by default, in case */
--tyt-tabs-content-height: '[[only avaible inside #right-tabs]]'; /* right panel space minus the upspace */
--tyt-tabs-upspace: '[[only avaible inside #right-tabs]]'; /* 42px if there is button-like */
--tyt-tabs-available-height: '[[only avaible inside #right-tabs]]'; /* much reduced if all tabs are collapsed */
}
/* << --spacing-css-20240504 >> */
ytd-watch-flexy[theater][is-two-columns_] {
/* --tyt-secondary-mt: var(--ytd-margin-3x); */
--tyt-secondary-mt: var(--ytd-margin-2x);
}
ytd-watch-flexy[fullscreen][is-two-columns_] {
/* --tyt-secondary-mt: var(--ytd-margin-3x); */
--tyt-secondary-mt: var(--ytd-margin-2x);
}
ytd-watch-flexy[flexy][is-two-columns_] {
--tyt-primary-below-mt: 4px;
}
/* << --spacing-css-20240504 >> */
/**
Youtube / Browser CSS issues
ytd-expander[should-use-number-of-lines][collapsed] > #content.ytd-expander {
color: var(--yt-spec-text-primary);
display: -webkit-box;
overflow: hidden;
max-height: none;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--ytd-expander-max-lines, 4);
}
JS issue
document.querySelectorAll('#primary')
NodeList [ div#primary.style-scope.ytd-two-column-browse-results-renderer, div#primary.style-scope.ytd-watch-flexy ]
Same for #secondary
*/
@supports (color: var(--fix-old-pin-icon)){
/* @keyframes oldYtIconPinAppeared */
yt-icon.ytd-pinned-comment-badge-renderer {
/* May 2023 - 2020.05.19 */
/* flex-shrink was wrongly set to make the icon become smaller */
flex-shrink: 0;
}
#reply-button-end.ytd-comment-action-buttons-renderer {
/* May 2023 - 2020.05.19 */
display: inline-flex; /* override the original display which induced a taller element height */
}
}
@supports (not-color: var(--performance-fix-v2)){
#primary-inner > ytd-playlist-panel-renderer#playlist #items > .ytd-playlist-panel-renderer,
#secondary-inner > ytd-playlist-panel-renderer#playlist #items > .ytd-playlist-panel-renderer,
#primary-inner > ytd-playlist-panel-renderer#playlist .watch-skeleton,
#secondary-inner > ytd-playlist-panel-renderer#playlist .watch-skeleton,
#primary-inner > ytd-playlist-panel-renderer#playlist .ytd-playlist-panel-renderer,
#secondary-inner > ytd-playlist-panel-renderer#playlist .ytd-playlist-panel-renderer,
#primary-inner > ytd-playlist-panel-renderer#playlist dom-if,
#secondary-inner > ytd-playlist-panel-renderer#playlist dom-if {
display: none !important;
/*
contain: strict !important;
visibility: collapse !important;
content-visibility: hidden !important; */ /* Chrome/Edge 85+ only */
}
#primary-inner > #related .ytd-item-section-renderer,
#secondary-inner > #related .ytd-item-section-renderer,
#primary-inner > #related .watch-skeleton,
#secondary-inner > #related .watch-skeleton,
#primary-inner > #related #player-ads,
#secondary-inner > #related #player-ads,
#primary-inner > #related ytd-watch-next-secondary-results-renderer,
#secondary-inner > #related ytd-watch-next-secondary-results-renderer,
#primary-inner > #related dom-if,
#secondary-inner > #related dom-if {
display: none !important;
/*
contain: strict !important;
visibility: collapse !important;
content-visibility: hidden !important;*/ /* Chrome/Edge 85+ only */
}
#primary-inner > ytd-comments#comments .ytd-comment-thread-renderer,
#secondary-inner > ytd-comments#comments .ytd-comment-thread-renderer {
display: none !important; /*
contain: strict !important;
visibility: collapse !important;
content-visibility: hidden !important;*/ /* Chrome/Edge 85+ only */
}
#primary-inner > ytd-playlist-panel-renderer#playlist,
#secondary-inner > ytd-playlist-panel-renderer#playlist {
contain: strict !important;
visibility: collapse !important;
}
#primary-inner > #related,
#secondary-inner > #related {
contain: strict !important;
visibility: collapse !important;
}
#primary-inner > ytd-comments#comments,
#secondary-inner > ytd-comments#comments {
contain: strict !important;
visibility: collapse !important;
}
html:not([tabview-loaded]) #secondary-inner #right-tabs {
display: none !important;
/*
contain: strict !important;
visibility: collapse !important;
content-visibility: hidden !important;*/ /* Chrome/Edge 85+ only */
}
}
@supports (not-color: var(--performance-fix-v3)){
#primary-inner > ytd-playlist-panel-renderer#playlist #items > *,
#secondary-inner > ytd-playlist-panel-renderer#playlist #items > * {
display: none !important;
}
#primary-inner > #related > *,
#secondary-inner > #related > * {
display: none !important;
}
#primary-inner > ytd-comments#comments > *,
#secondary-inner > ytd-comments#comments > * {
display: none !important;
}
}
@supports (color: var(--performance-fix-v1)){
#primary-inner > ytd-playlist-panel-renderer#playlist #items > .ytd-playlist-panel-renderer,
#secondary-inner > ytd-playlist-panel-renderer#playlist #items > .ytd-playlist-panel-renderer {
contain: strict !important;
visibility: collapse !important;
content-visibility: hidden !important; /* Chrome/Edge 85+ only */
}
#primary-inner > #related .ytd-item-section-renderer,
#secondary-inner > #related .ytd-item-section-renderer {
contain: strict !important;
visibility: collapse !important;
content-visibility: hidden !important; /* Chrome/Edge 85+ only */
}
#primary-inner > ytd-comments#comments .ytd-comment-thread-renderer,
#secondary-inner > ytd-comments#comments .ytd-comment-thread-renderer {
contain: strict !important;
visibility: collapse !important;
content-visibility: hidden !important; /* Chrome/Edge 85+ only */
}
#primary-inner > ytd-playlist-panel-renderer#playlist,
#secondary-inner > ytd-playlist-panel-renderer#playlist{
contain: strict !important;
}
#primary-inner > #related,
#secondary-inner > #related {
contain: strict !important;
}
#primary-inner > ytd-comments#comments,
#secondary-inner > ytd-comments#comments {
contain: strict !important;
}
html:not([tabview-loaded]) #secondary-inner #right-tabs {
contain: strict !important;
visibility: collapse !important;
content-visibility: hidden !important; /* Chrome/Edge 85+ only */
}
}
@supports (color: var(--playlist-items-contain)){
#items.ytd-playlist-panel-renderer {
contain: content;
}
#items.ytd-playlist-panel-renderer > .ytd-playlist-panel-renderer {
contain: content;
}
.header.ytd-playlist-panel-renderer {
contain: content;
}
#thumbnail-container.ytd-playlist-panel-video-renderer>ytd-thumbnail.ytd-playlist-panel-video-renderer,
#thumbnail-container.ytd-playlist-panel-video-renderer {
contain: strict;
content-visibility: auto;
}
}
@supports (color: var(--videos-items-contain)){
ytd-compact-video-renderer:not([watch-feed-big-thumbs]) ytd-thumbnail.ytd-compact-video-renderer {
contain: strict;
content-visibility: auto;
}
}
@supports (color: var(--tooltip-nowrap)) {
html {
--tyt-thumbnail-contain: style;
/* by default, layout and paint are excluded; element height is zero for browse page */
/* see https://greasyfork.org/en/scripts/428651-tabview-youtube/discussions/164946 */
}
html #right-tabs {
--tyt-thumbnail-contain: content;
/* rendering acceleration for thumbnail inside #right-tabs only */
}
div#overlays.style-scope.ytd-thumbnail,
div#mouseover-overlay.style-scope.ytd-thumbnail,
div#hover-overlays.style-scope.ytd-thumbnail {
contain: var(--tyt-thumbnail-contain);
}
div#hover-overlays.style-scope.ytd-thumbnail #tooltip {
contain: content;
white-space: nowrap;
}
div#hover-overlays.style-scope.ytd-thumbnail div {
contain: content;
}
}
@supports (color: var(--fix-charity-box-fadeout-after-resizing)) {
/*
https://www.youtube.com/watch?v=30PcoavqFq0&list=PLS3XGZxi7cBXnYfJpUas1ud6XATvWATHb&index=342
#charity-box
two-col => single-col => #charity-box disappear due to #cinematics
*/
#clarify-box {
position: relative;
contain: content;
}
}
@supports (color: var(--fix-charity-box-menu-button)) {
#clarify-box ytd-info-panel-content-renderer[has-menu] #menu.ytd-info-panel-content-renderer {
display: flex;
margin-top: 0;
align-items: center;
}
}
@supports (color: var(--wider-playlist-button-for-japanese)){ /* May 2023 */
/*
@media screen and (min-width: 1294px) and (max-width: 1294px) {
flex-grow: 1.25;
}*/
html:lang(ja) .tab-btn[tyt-tab-content="#tab-list"]{
/*「再生リスト」ボタンは「情報」「動画」ボタンよりも幅が広く、狭い画面では見栄えが悪くなる可能性があります。*/
/* min-width: 9em;*/
--tyt-tab-btn-flex-basis: 6%;
}
html:lang(ja) .tab-btn[tyt-tab-content="#tab-comments"]{
/* force comments count button wider */
/* --tyt-tab-btn-flex-grow: 1.15; */
}
}
@supports (color: var(--hide-menu-icon-text-by-default-v1)) { /* May 2023 */
ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {
margin-right: 0;
margin-left: 0;
contain: layout style;
}
ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon+.yt-spec-button-shape-next--button-text-content {
display: none !important;
width: 0 !important;
contain: strict !important;
}
/* https://greasyfork.org/en/scripts/456108 */
ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child+span:last-child {
display: none !important;
width: 0 !important;
contain: strict !important;
}
ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child:nth-last-child(2) {
margin-right: 0 !important;
margin-left: 0 !important;
contain: layout style;
}
}
@supports (color: var(--hide-menu-icon-text-by-default-v2)) { /* Jul 2023 */
ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {
margin-right: 0;
margin-left: 0;
/* contain: layout style; */ /* removed in Dec 2023 */
contain: style; /* added in Dec 2023 */
}
ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon+.yt-spec-button-shape-next__button-text-content {
display: none !important;
width: 0 !important;
contain: strict !important;
}
/* https://greasyfork.org/en/scripts/456108 */
ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child+span:last-child {
display: none !important;
width: 0 !important;
contain: strict !important;
}
ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child:nth-last-child(2) {
margin-right: 0 !important;
margin-left: 0 !important;
/* contain: layout style; */ /* removed in Dec 2023 */
contain: style; /* added in Dec 2023 */
}
}
@supports (color: var(--rolling-number-rendering)){
yt-animated-rolling-number {
flex-wrap: nowrap;
contain: content;
white-space: nowrap;
}
animated-rolling-character {
contain: layout style;
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
white-space: nowrap;
}
animated-rolling-character > div {
contain: content;
white-space: nowrap;
}
yt-animated-rolling-number.animated-rolling-number-wiz {
font-size: inherit;
}
#info-container.ytd-watch-info-text,
#ytd-watch-info-text.ytd-watch-info-text,
#view-count.ytd-watch-info-text,
#date-text.ytd-watch-info-text {
align-items: center;
}
}
@supports (color: var(--fix-tooltips-display)) { /* May 2023 */
#actions-inner.ytd-watch-metadata {
/* position: relative; */
}
#actions-inner tp-yt-paper-tooltip {
/* inset: initial !important; */
/* inset: 2.4em 3em 3em 3em !important; */
/* min-width:initial !important; */
/* max-width: initial !important; */
/* width: auto !important; */
white-space: nowrap; /* no multline for super chat donation button */
/* inline-size: 150px;writing-mode: horizontal-tb; */
/* transform:translateX(-50%); */
/* margin-top:30px; */
}
ytd-watch-flexy[is-two-columns_][theater] #actions-inner tp-yt-paper-tooltip {
/* inset: initial !important; */ /* allow go beyond right edge of container */
/*
inset-block-start top Specifies the offset for the starting edge in the direction which is perpendicular to the writing direction.
inset-block-end bottom Specifies the offset for the ending edge in the direction which is perpendicular to the writing direction.
inset-inline-start left Specifies the offset for the starting edge in the writing direction, which maps to a physical offset depending on the element’s writing mode, direction and text orientation.
inset-inline-end right Specifies the offset for the ending edge in the writing direction.
*/
/*inset-block-start: auto !important;
inset-block-end: 0px !important; */
/* inset-block-start: calc(100vh - 84px) !important;
inset-block-end: auto !important;
scroll-margin-block-end: 40px;*/
/* transform: translateY(-8em); */ /* avoid hidden by bottom edge of page */
/* z-index: 999; */
/* transform: translateY(-100%); */
/* inset: initial !important; */
}
ytd-watch-flexy #actions-inner.ytd-watch-metadata tp-yt-paper-tooltip{
pointer-events: none !important; /* avoid offset due to cursor */
}
}
@supports (color: var(--fix-primary-info-menu-tooltip-layouting)){
/* @keyframes primaryInfoMenuTooltipAppear */
}
@supports (color: var(--fix-primary-info-desc-tooltip-layouting)){
/* @keyframes primaryInfoDescTooltipAppear */
}
@supports (color: var(--tabview-fix-menu-icons-sizing)){ /* May 2023 */
ytd-watch-metadata #actions.item.style-scope.ytd-watch-metadata{
justify-content: end !important;
display:flex;
}
html ytd-watch-metadata[flex-menu-enabled] #actions-inner.ytd-watch-metadata {
/*width: auto !important;*/ /* override 100% */
flex-grow: 1;
}
#sponsor-button.style-scope.ytd-video-owner-renderer {
max-width: calc( ( 100% - 40px ) / 2 );
}
#owner:hover #sponsor-button.style-scope.ytd-video-owner-renderer {
max-width: initial;
}
#sponsor-button.style-scope.ytd-video-owner-renderer [button-next] {
max-width: 100%;
}
#subscribe-button.ytd-watch-metadata {
max-width: calc( ( 100% - 40px ) /3 );
}
#owner:hover #subscribe-button.ytd-watch-metadata {
max-width: initial;
}
#subscribe-button.ytd-watch-metadata > ytd-subscribe-button-renderer {
max-width: 100%;
}
#subscribe-button.ytd-watch-metadata > yt-button-renderer,
#subscribe-button.ytd-watch-metadata > ytd-button-renderer,
#subscribe-button.ytd-watch-metadata > ytd-toggle-button-renderer {
max-width: 100%; /* for Firefox */
}
#sponsor-button.style-scope.ytd-video-owner-renderer > yt-button-renderer,
#sponsor-button.style-scope.ytd-video-owner-renderer > ytd-button-renderer,
#sponsor-button.style-scope.ytd-video-owner-renderer > ytd-toggle-button-renderer {
max-width: 100%; /* for Firefox */
}
}
@supports (color: var(--fix-youtube-bugs-menu-options-hidden-after-page-updated)) and (contain: var(--size)){ /* May 2023 */
/* added in 2023.05.10 due to new css rule added by YouTube due to the change in darker dark theme implementation stage */
/* against YouTube css bug - "max-height: 36px" casue buttons disappear after page changing */
html ytd-menu-renderer[has-flexible-items] {
/* padding-top: 1px; */
max-height: initial; /* limiting the height might prohibit the resizing feature */
/* max-height: 100%; */
/* overflow-y: hidden; */
}
ytd-watch-metadata {
--tyt-action-menu-contain: size;
}
ytd-watch-metadata[actions-on-separate-line] {
/* actions-on-separate-line is a new attribute introduced in May 2023 Darker Dark Theme. */
--tyt-action-menu-contain: none;
}
ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata {
contain: var(--tyt-action-menu-contain); /* follow flex layouting instead of content. content can have larger size */
/* the height will depends on #owner; the width will fill up for flex layout of #top-row */
min-width: var(--menu-min-width, initial) !important;
}
ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner {
max-height: 100%; /* the y-overflowed items will be shifted such that the first line will be always positiioned at the top */
overflow: hidden; /* for visual only */ /* cannot do "contain: paint" due to tooltips */
}
ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner ytd-menu-renderer.style-scope.ytd-watch-metadata,
ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner .top-level-buttons.ytd-menu-renderer {
row-gap: 12px; /* for visual only */ /* second line will be far below the first line such that it is invisible */
}
/* 2023.05.15 */ /* margin-bottom for `.top-level-buttons.ytd-menu-renderer` is not required. */
html ytd-menu-renderer[has-flexible-items][safe-area] .top-level-buttons.ytd-menu-renderer {
margin-bottom: 0; /* override margin-bottom: 4px; */
}
}
@supports(color: var(--compatibile-with-return-youtube-dislike)){
/* 2024.04.23 fix Return YouTube Dislike's visual issue */
/* against --fix-youtube-bugs-menu-options-hidden-after-page-updated */
.return-youtube-dislike ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner {
overflow: initial;
}
.return-youtube-dislike #top-row[style]{
border-bottom-color: transparent !important;
padding-bottom: 6px !important;
}
}
@supports (color: var(--fix-single-column-menu-bar-position)){ /* May 2023 */
html ytd-watch-metadata[actions-on-separate-line] #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata {
justify-content: flex-end; /* override justify-content: flex-start; */
}
ytd-watch-metadata[actions-on-separate-line] .item.ytd-watch-metadata {
/* override margin-bottom: 12px */
margin-top: 6px;
margin-bottom: 6px;
}
html .item.ytd-watch-metadata {
/* override margin-right: 12px */
/* this is a wrong design to make every .item.ytd-watch-metadata with margin-right. this makes description line becomes not fullwidth */
margin-right: 0px; /* fix description line */
}
#top-row.ytd-watch-metadata {
column-gap: 12px; /* this is the correct way to set gap in flex layout */
}
}
@supports (color: var(--tabview-adjust-margin-for-watch-metadata)){ /* May 2023 */
html .item.ytd-watch-metadata {
/* May 2023 theme - no second line in song title */
margin-top: 8px;
}
html #description.ytd-watch-metadata {
font-size: 1.2rem; /* override font-size: 1.4rem; */
line-height: 1.8rem; /* override line-height: 2rem; */
}
}
@supports (color: var(--tabview-tab-panel-scrollbar-spacing)){
@supports (color: var(--scrollbar-gutter-spacing)) and (scrollbar-gutter: stable) and (scrollbar-gutter: var(--p)){
ytd-watch-flexy {
--tyt-scrollbar-gutter: auto;
}
ytd-watch-flexy[is-two-columns_] {
--tyt-scrollbar-gutter: stable;
}
/* Chrome: >=94 ; FireFox: >= 97 */
/* FireFox >= 107 stil have the incorrect spacing, indepedent of scrollbar-gutter setting */
#tab-info,
#tab-comments /*,
#tab-videos */
{
scrollbar-gutter: var(--tyt-scrollbar-gutter); /* align expander btn rendering position */
}
/*
#tab-list #items.playlist-items.style-scope.ytd-playlist-panel-renderer
{
scrollbar-gutter: auto;
}*/
/*
body ytd-watch-flexy{
--tyt-tab-panel-scrollbar-margin: 0px;
}
*/
}
@supports (color: var(--scrollbar-webkit-spacing)) and (-webkit-box-shadow: none){
/* edge/chrome relative layout count scrollbar */
body ytd-watch-flexy{
--tyt-tab-panel-scrollbar-margin: 0px;
}
}
@supports (color: var(--scrollbar-firefox-spacing)) and (-moz-appearance: none){
/* firefox relative layout DON'T count scrollbar */
body ytd-watch-flexy{
--tyt-tab-panel-scrollbar-margin: 16px;
}
}
/*
@supports (color: var(--fix-firefox-scrollbar-style)) and (-moz-appearance: none) {
#tab-info,
#tab-comments,
#tab-videos,
#tab-list {
pointer-events: none;
}
#tab-info > *,
#tab-comments > *,
#tab-videos > *,
#tab-list > * {
pointer-events: all;
}
}
*/
}
@supports (display:var(--hide-duplicate-info)) {
/* 2022/11/06 - hide new layout repeated info */
@media all {
/* repeated info hidden */
/* tabview-info-c1 | :has(>#description-inner:only-child) */
/* tabview-info-c2 | :has(#tab-info ytd-expander #description.ytd-video-secondary-info-renderer) */
ytd-watch-flexy:not([tyt-has*="a"]) ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy {
margin-top: 3px;
}
ytd-watch-flexy:not([tyt-has*="a"]) #description.style-scope.ytd-watch-metadata {
overflow: hidden;
}
ytd-watch-flexy:not([tyt-has*="a"]) #description.style-scope.ytd-watch-metadata {
margin-top: 3px;
}
ytd-watch-flexy:not([tyt-has*="a"]) #description.style-scope.ytd-watch-metadata>#description-inner.style-scope.ytd-watch-metadata {
margin: 5px 12px 3px 12px;
}
ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy[clickable-description] #description.ytd-watch-metadata #info-container.ytd-watch-metadata[tyt-info-toggler] {
cursor: pointer;
}
/* 2024/04/20 */
ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy[clickable-description] #description.ytd-watch-metadata #ytd-watch-info-text.ytd-watch-metadata[tyt-info-toggler] {
cursor: pointer;
}
}
/* non-fullscreen */
@media not all and (display-mode: fullscreen) {
/* repeated info hidden */
ytd-watch-flexy:not([fullscreen]).tabview-info-duplicated #description.style-scope.ytd-watch-metadata>#description-inner.style-scope.ytd-watch-metadata>#info-container.style-scope.ytd-watch-metadata~ytd-text-inline-expander#description-inline-expander.ytd-watch-metadata>yt-attributed-string.ytd-text-inline-expander~yt-formatted-string.ytd-text-inline-expander {
content-visibility: hidden;
display: none
}
ytd-watch-flexy:not([fullscreen]).tabview-info-duplicated #description.style-scope.ytd-watch-metadata>#description-inner.style-scope.ytd-watch-metadata>#info-container.style-scope.ytd-watch-metadata~ytd-text-inline-expander#description-inline-expander.ytd-watch-metadata {
content-visibility: hidden;
display: none
}
/* 2022/11/23 */
ytd-watch-flexy:not([fullscreen]).tabview-info-duplicated #primary.ytd-watch-flexy #below ytd-watch-metadata ytd-rich-metadata-renderer.ytd-rich-metadata-row-renderer {
content-visibility: hidden;
display: none
}
ytd-watch-flexy:not([fullscreen]):not([tyt-has*="c"]) #primary.ytd-watch-flexy #below ytd-watch-metadata #contents.ytd-rich-metadata-row-renderer {
margin-right: 0;
}
/* 2022/11/27 */
ytd-watch-flexy[tyt-chat*="chat$live"]:not([fullscreen]).tabview-info-duplicated ytd-watch-metadata[clickable-description] #description.ytd-watch-metadata {
pointer-events: none;
}
/* May 2023 */ /* 2023.05.18 */
html ytd-watch-flexy.tabview-info-duplicated #description-inner.ytd-watch-metadata {
/* override margin: 12px; */
margin-top: 4px;
margin-bottom: 4px;
}
/* May 2023 */ /* Duplicated Meta Recommendation */
.tyt-hidden-duplicated-meta {
display: none;
}
/* Apr 2024 - #info-container => #ytd-watch-info-text */
ytd-watch-flexy:not([fullscreen]).tabview-info-duplicated #description.style-scope.ytd-watch-metadata>#description-inner.style-scope.ytd-watch-metadata>#ytd-watch-info-text.style-scope.ytd-watch-metadata~ytd-text-inline-expander#description-inline-expander.ytd-watch-metadata>yt-attributed-string.ytd-text-inline-expander~yt-formatted-string.ytd-text-inline-expander {
content-visibility: hidden;
display: none
}
ytd-watch-flexy:not([fullscreen]).tabview-info-duplicated #description.style-scope.ytd-watch-metadata>#description-inner.style-scope.ytd-watch-metadata>#ytd-watch-info-text.style-scope.ytd-watch-metadata~ytd-text-inline-expander#description-inline-expander.ytd-watch-metadata {
content-visibility: hidden;
display: none
}
}
@media all and (display-mode: fullscreen) {
/* repeated info hidden */
:fullscreen ytd-watch-flexy[fullscreen]:not([tyt-has*="a"]):not([tyt-has*="b"]) #description.style-scope.ytd-watch-metadata>#description-inner.style-scope.ytd-watch-metadata>#info-container.style-scope.ytd-watch-metadata~ytd-text-inline-expander#description-inline-expander.ytd-watch-metadata {
max-height: calc(100vh - var(--ytd-watch-flexy-masthead-height) - 12em - var(--ytd-margin-6x));
overflow: auto;
}
:fullscreen ytd-watch-flexy[is-two-columns_][fullscreen] ytd-watch-metadata.ytd-watch-flexy ytd-metadata-row-container-renderer.style-scope.ytd-watch-metadata {
overflow-x: hidden;
}
/* 2024/04/20 */
:fullscreen ytd-watch-flexy[fullscreen]:not([tyt-has*="a"]):not([tyt-has*="b"]) #description.style-scope.ytd-watch-metadata>#description-inner.style-scope.ytd-watch-metadata>#ytd-watch-info-text.style-scope.ytd-watch-metadata~ytd-text-inline-expander#description-inline-expander.ytd-watch-metadata {
max-height: calc(100vh - var(--ytd-watch-flexy-masthead-height) - 12em - var(--ytd-margin-6x));
overflow: auto;
}
}
}
@supports (not-color: var(--backup-code-for-autohide)){
/*
body .ytp-autohide {
cursor: none
}
body .ytp-autohide .ytp-player-content:not(.html5-endscreen),
body .ytp-autohide .ytp-player-content:not(.ytp-upnext),
.ytp-hide-info-bar .ytp-player-content {
top: 0;
-webkit-transition: bottom .1s cubic-bezier(0.4, 0, 1, 1), top .1s cubic-bezier(0.4, 0, 1, 1);
transition: bottom .1s cubic-bezier(0.4, 0, 1, 1), top .1s cubic-bezier(0.4, 0, 1, 1);
-webkit-transition: none;
transition: none;
}
body .ytp-autohide .ytp-ypc-player-content,
.ytp-hide-controls .ytp-player-content {
bottom: 0
}
body .ytp-autohide:not(.ytp-ad-overlay-open) .ytp-iv-player-content,
.ytp-hide-controls .ytp-iv-player-content {
bottom: 12px
}
.ytp-big-mode.ytp-autohide:not(.ytp-ad-overlay-open) .ytp-iv-player-content,
.ytp-big-mode.ytp-hide-controls .ytp-iv-player-content {
bottom: 24px
}
body .ytp-autohide .ytp-playlist-menu-button,
body .ytp-autohide .ytp-back-button,
body .ytp-autohide .ytp-title-channel,
body .ytp-autohide .ytp-title,
body .ytp-autohide .ytp-chrome-top .ytp-watch-later-button,
body .ytp-autohide .ytp-chrome-top .ytp-share-button,
body .ytp-autohide .ytp-chrome-top .ytp-copylink-button,
body .ytp-autohide:not(.ytp-cards-teaser-shown) .ytp-cards-button,
body .ytp-autohide .ytp-overflow-button,
body .ytp-autohide .ytp-chrome-bottom,
.ytp-chrome-top[aria-hidden=true],
.ytp-chrome-bottom[aria-hidden=true] {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(0.4, 0, 1, 1);
transition: opacity .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide:not(.ytp-autohide-active) .ytp-playlist-menu-button,
body .ytp-autohide:not(.ytp-autohide-active) .ytp-back-button,
body .ytp-autohide:not(.ytp-autohide-active) .ytp-title-channel,
body .ytp-autohide:not(.ytp-autohide-active) .ytp-title,
body .ytp-autohide:not(.ytp-autohide-active) .ytp-chrome-top .ytp-watch-later-button,
body .ytp-autohide:not(.ytp-autohide-active) .ytp-chrome-top .ytp-share-button,
body .ytp-autohide:not(.ytp-autohide-active):not(.ytp-cards-teaser-shown) .ytp-cards-button,
body .ytp-autohide:not(.ytp-autohide-active) .ytp-overflow-button {
display: none;
display: flex;
}
.ytp-gradient-top[aria-hidden=true],
.ytp-gradient-bottom[aria-hidden=true],
body .ytp-autohide .ytp-gradient-top,
body .ytp-autohide .ytp-gradient-bottom {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(0.4, 0, 1, 1);
transition: opacity .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide:not(.ytp-autohide-active) .ytp-gradient-top,
body .ytp-autohide:not(.ytp-autohide-active) .ytp-gradient-bottom {
display: none;
display: flex;
}
.ad-showing.ytp-autohide .video-ad-status-bar,
.ad-showing.ytp-hide-controls .video-ad-status-bar {
bottom: 0
}
body .ytp-autohide.ytp-ad-overlay-closed .ad-overlay {
opacity: 0;
-webkit-transition: bottom .1s cubic-bezier(0.4, 0, 1, 1), opacity .1s cubic-bezier(0.4, 0, 1, 1);
transition: bottom .1s cubic-bezier(0.4, 0, 1, 1), opacity .1s cubic-bezier(0.4, 0, 1, 1)
}
.ytp-hide-controls .ytp-ad-player-overlay-instream-info,
.ytp-hide-controls .ytp-ad-survey-player-overlay-instream-info,
body .ytp-autohide .ytp-ad-player-overlay-instream-info,
body .ytp-autohide .ytp-ad-survey-player-overlay-instream-info,
.ytp-iv-drawer-open .ytp-ad-player-overlay-instream-info,
.ytp-iv-drawer-open .ytp-ad-survey-player-overlay-instream-info,
.ytp-embed.ytp-hide-controls .ytp-ad-player-overlay-instream-info,
.ytp-embed.ytp-hide-controls .ytp-ad-survey-player-overlay-instream-info,
.ytp-embed.ytp-autohide .ytp-ad-player-overlay-instream-info,
.ytp-embed.ytp-autohide .ytp-ad-survey-player-overlay-instream-info,
.ytp-embed.ytp-iv-drawer-open .ytp-ad-player-overlay-instream-info,
.ytp-embed.ytp-iv-drawer-open .ytp-ad-survey-player-overlay-instream-info {
bottom: 6px;
-webkit-transition: bottom .1s cubic-bezier(0.4, 0, 1, 1);
transition: bottom .1s cubic-bezier(0.4, 0, 1, 1)
}
body .ytp-autohide.ytp-ad-overlay-closed .ytp-ad-overlay-slot {
opacity: 0;
-webkit-transition: bottom .1s cubic-bezier(0.4, 0, 1, 1), opacity .1s cubic-bezier(0.4, 0, 1, 1);
transition: bottom .1s cubic-bezier(0.4, 0, 1, 1), opacity .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide .ytp-ad-persistent-progress-bar-container {
opacity: 1;
bottom: 0;
-webkit-transition: bottom .25s cubic-bezier(0, 0, 0.2, 1), opacity .25s cubic-bezier(0, 0, 0.2, 1);
transition: bottom .25s cubic-bezier(0, 0, 0.2, 1), opacity .25s cubic-bezier(0, 0, 0.2, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide .iv-promo-website-card-cta-redesign.iv-promo-collapsed .iv-promo-img {
opacity: .8;
-webkit-transition: transform .2s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .2s cubic-bezier(0, 0, 0.2, 1), opacity .2s cubic-bezier(0.4, 0, 1, 1) .8s;
transition: transform .2s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .2s cubic-bezier(0, 0, 0.2, 1), opacity .2s cubic-bezier(0.4, 0, 1, 1) .8s;
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide.ytp-embed-overlays-autohide .iv-drawer {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(0.4, 0, 1, 1);
transition: opacity .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide:not(.ytp-autohide-active).ytp-embed-overlays-autohide .iv-drawer {
display: none;
display:flex;
}
body .ytp-autohide .iv-drawer-content::-webkit-scrollbar-thumb {
background-color: transparent
}
body .ytp-autohide:not(.ytp-cards-teaser-shown) .ytp-cards-teaser,
.ytp-iv-drawer-open .ytp-cards-teaser {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(0.4, 0, 1, 1) .33s;
transition: opacity .1s cubic-bezier(0.4, 0, 1, 1) .33s;
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide.ytp-embed-overlays-autohide.ytp-contextmenu {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(0.4, 0, 1, 1);
transition: opacity .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide:not(.ytp-autohide-active).ytp-embed-overlays-autohide.ytp-contextmenu {
display: none;
display:flex;
}
body .ytp-autohide:not(.ytp-mweb-player) .ytp-watermark {
opacity: 0;
-webkit-transition: bottom .1s cubic-bezier(0.4, 0, 1, 1), opacity .1s cubic-bezier(0.4, 0, 1, 1);
transition: bottom .1s cubic-bezier(0.4, 0, 1, 1), opacity .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
.ytp-big-mode.ytp-autohide .ytp-info-panel-preview,
.ytp-big-mode.ytp-hide-info-bar .ytp-info-panel-preview,
.ytp-embed.ytp-autohide .ytp-info-panel-preview,
.ytp-embed.ytp-hide-info-bar .ytp-info-panel-preview {
top: 12px
}
.ytp-inline-preview-mode.ytp-autohide .ytp-time-display {
display: none;
display:flex;
}
.ytp-inline-preview-mode.ytp-autohide .ytp-inline-preview-scrim {
opacity: 0
}
#inline-preview-player.ytp-autohide .caption-window.ytp-caption-window-bottom {
margin-bottom: 12px
}
body .ytp-autohide .ytp-offline-slate-bar,
.ytp-hide-controls .ytp-offline-slate-bar {
bottom: 12px;
-webkit-transition: bottom .1s cubic-bezier(0.4, 0, 1, 1);
transition: bottom .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide .ytp-big-mode .ytp-offline-slate-bar,
.ytp-hide-controls .ytp-big-mode .ytp-offline-slate-bar {
bottom: 18px
}
body .ytp-autohide.ytp-embed-overlays-autohide .ytp-overflow-panel {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(0.4, 0, 1, 1);
transition: opacity .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide:not(.ytp-autohide-active).ytp-embed-overlays-autohide .ytp-overflow-panel {
display: none
display:flex;
}
.ytp-exp-ppp-update.ytp-big-mode.ytp-autohide .ytp-paid-content-overlay,
.ytp-exp-ppp-update.ytp-big-mode.ytp-hide-info-bar .ytp-paid-content-overlay,
.ytp-exp-ppp-update.ytp-embed.ytp-autohide .ytp-paid-content-overlay,
.ytp-exp-ppp-update.ytp-embed.ytp-hide-info-bar .ytp-paid-content-overlay {
top: 16px
}
body .ytp-autohide .ytp-paid-content-overlay,
.ytp-iv-drawer-open .ytp-paid-content-overlay {
bottom: 6px;
-webkit-transition: bottom .1s cubic-bezier(0.4, 0, 1, 1);
transition: bottom .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
.ytp-big-mode.ytp-autohide .ytp-paid-content-overlay,
.ytp-big-mode.ytp-iv-drawer-open .ytp-paid-content-overlay {
bottom: 12px
}
body .ytp-autohide .ytp-webgl-spherical-control,
.ytp-hide-info-bar .ytp-webgl-spherical-control {
top: 12px;
-webkit-transition: top .1s cubic-bezier(0.4, 0, 1, 1), opacity .1s cubic-bezier(0.4, 0, 1, 1);
transition: top .1s cubic-bezier(0.4, 0, 1, 1), opacity .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide .caption-window.ytp-caption-window-top,
.ytp-hide-info-bar .caption-window.ytp-caption-window-top {
margin-top: 0;
-webkit-transition: margin-bottom .1s cubic-bezier(0.4, 0, 1, 1), margin-top .1s cubic-bezier(0.4, 0, 1, 1);
transition: margin-bottom .1s cubic-bezier(0.4, 0, 1, 1), margin-top .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide .caption-window.ytp-caption-window-bottom,
.ytp-hide-controls .caption-window.ytp-caption-window-bottom {
margin-bottom: 0;
-webkit-transition: margin-bottom .1s cubic-bezier(0.4, 0, 1, 1), margin-top .1s cubic-bezier(0.4, 0, 1, 1);
transition: margin-bottom .1s cubic-bezier(0.4, 0, 1, 1), margin-top .1s cubic-bezier(0.4, 0, 1, 1);
opacity:1;
-webkit-transition: none;
transition: none;
}
body .ytp-autohide .ytp-unmute,
.ytp-hide-info-bar .ytp-unmute {
top: 0
}
*/
}
/*
@supports(color: var(--tooltip-bg-sizing-fix)) and (aspect-ratio: 1600 / 900){
.ytp-tooltip-bg[style*="height"][style*=" / 800px 450px;"] {
aspect-ratio: 1600 / 900 !important;
width: auto !important;
}
.ytp-tooltip-bg[style*="height"][style*=" / 1600px 900px;"] {
aspect-ratio: 1600 / 900 !important;
width: auto !important;
}
.ytp-tooltip-bg[style*="height"][style*=" / 800px 800px;"] {
aspect-ratio: 900 / 900 !important;
width: auto !important;
}
.ytp-tooltip-bg[style*="height"][style*=" / 900px 900px;"] {
aspect-ratio: 900 / 900 !important;
width: auto !important;
}
.ytp-tooltip-bg[style*="height: 89.5px"][style*=" / "] {
height: 90px !important;
}
}
*/
@supports(color: var(--compatibile-with-detailedtime)){
h1.style-scope.ytd-watch-metadata span.d-time,
h1.style-scope.ytd-watch-metadata span.d-button {
color: var(--yt-spec-text-secondary);
cursor: pointer;
width: max-content;
display: inline-block;
margin-left: 12px;
font-weight: 600;
letter-spacing: 0.5px;
background-color: var(--yt-spec-badge-chip-background);
padding: 4px 12px;
border-radius: 6px;
float: right;
font-size: 60%;
line-height: 140%;
margin: 1.6px 0px; /* (28-24.8)/2 = 1.6px */
}
h1.style-scope.ytd-watch-metadata span.d-time:hover,
h1.style-scope.ytd-watch-metadata span.d-button:hover{
background-color: var(--yt-spec-button-chip-background-hover);
}
}
@supports(color: var(--title-livestream-time)){
#below h1.ytd-watch-metadata yt-formatted-string[data-title-details] {
cursor: default;
}
#below h1.ytd-watch-metadata yt-formatted-string[data-title-details]::after {
opacity: 0;
content:attr(data-title-details);
position: fixed;
top:auto;
left:auto;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 4px;
background-color: #ffffcc;
padding: 4px 16px;
color: #000000;
font-size: 1.2rem;
line-height: 1.8rem;
font-weight: 400;
z-index: 4;
white-space: pre-wrap;
/* font-family: monaco, Consolas, "Lucida Console", monospace; */
margin-left: 10px;
font-weight: 600;
letter-spacing: 1.2px;
pointer-events: none;
touch-action: none;
user-select: none;
display: block;
visibility: collapse;
transition: opacity 180ms ease 99s;
transition-delay:10ms;
margin:0;
margin-top:0.6rem;
-webkit-font-smoothing: antialiased;
color: var(--yt-live-chat-toast-text-color);
background-color: var(--yt-live-chat-toast-background-color);
text-transform: none;
bottom:0;
}
#below h1.ytd-watch-metadata yt-formatted-string[data-title-details]:hover::after {
transition-delay:350ms;
opacity: 1;
visibility: visible;
}
@media screen {
#below h1.ytd-watch-metadata yt-formatted-string[data-title-details]::after {
max-width: 80vw;
}
}
@media screen and (min-width: 1000px) {
#below h1.ytd-watch-metadata yt-formatted-string[data-title-details]::after {
max-width: 60vw;
}
}
}
@supports (color: var(--hover-title-to-expand-up-to-three-lines)) and (-webkit-line-clamp:3){
/* @keyframes titleHoverShowUpToThreeLines */
#below h1.ytd-watch-metadata {
line-height: 140%;
margin-bottom: -2px;
}
}
@media all {
/* Global */
/*
.tyt-no-display ytd-browse.style-scope.ytd-page-manager,
.tyt-no-display ytd-search.style-scope.ytd-page-manager,
.tyt-no-display [role="main"].style-scope.ytd-page-manager{
content-visibility: hidden;
}*/
@supports (outline: -webkit-focus-ring-color auto 1px) {
:focus-visible,
body #more.ytd-expander:focus, body #less.ytd-expander:focus,
body #more.ytd-shared-post-renderer:focus,
body ytd-comment-replies-renderer #more-replies.ytd-comment-replies-renderer:focus,
body ytd-comment-replies-renderer #less-replies.ytd-comment-replies-renderer:focus,
body yt-activity-item-renderer:focus>.activity-item-contents.yt-activity-item-renderer,
body .show-more-less-variants-button.ytd-product-details-variant-renderer:focus {
outline: 0; /* override -webkit-focus-ring-color auto 1px; */
}
}
@supports (color: var(--fix-ugly-channel-name-padding)) {
body div#upload-info.style-scope.ytd-video-owner-renderer {
margin-top:0;
}
}
@supports (color: var(--fix-channel-name-textwrap)){
#upload-info a.yt-simple-endpoint {
white-space: nowrap;
}
}
@supports (color: var(--fix-app-drawer-scrollbar-lock)) {
html.tabview-normal-player body.lock-scrollbar[style*="overflow"][style*="hidden"] {
overflow-y: unset !important;
}
}
#columns.ytd-watch-flexy > yt-img-shadow,
#columns.ytd-watch-flexy > img {
position: absolute;
z-index: -1;
visibility: collapse;
contain: strict;
}
@supports (color: var(--fix-engagement-panels-height)) {
#panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]) ytd-transcript-renderer:not(:empty):not([hidden]),
#panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]) #body.ytd-transcript-renderer:not(:empty):not([hidden]),
#panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]) #content.ytd-transcript-renderer:not(:empty):not([hidden]) {
flex-grow: 1;
}
}
/*
@supports (color: var(--try-fix-transcript-clickable)) {
ytd-engagement-panel-section-list-renderer ytd-transcript-renderer ytd-transcript-search-panel-renderer ytd-transcript-segment-list-renderer ytd-transcript-segment-renderer.style-scope.ytd-transcript-segment-list-renderer {
pointer-events: none;
touch-action: none;
}
ytd-engagement-panel-section-list-renderer ytd-transcript-renderer ytd-transcript-search-panel-renderer ytd-transcript-segment-list-renderer ytd-transcript-segment-renderer.style-scope.ytd-transcript-segment-list-renderer .segment.style-scope.ytd-transcript-segment-renderer {
pointer-events: all;
touch-action: none;
}
ytd-engagement-panel-section-list-renderer ytd-transcript-renderer ytd-transcript-search-panel-renderer ytd-transcript-segment-list-renderer ytd-transcript-segment-renderer.style-scope.ytd-transcript-segment-list-renderer .segment.style-scope.ytd-transcript-segment-renderer > * {
pointer-events: none;
touch-action: none;
}
}
*/
@supports (color: var(--videos-appear)){
/* @keyframes videosDOMAppended */
}
@supports (color: var(--ep-appear)){
/* @keyframes epDOMAppended */
}
.tyt-tmp-hide-metainfo #description.item.style-scope.ytd-watch-metadata #info-container.style-scope.ytd-watch-metadata{
visibility: collapse;
/* display: none !important; */
}
/* 2024/04/20 */
.tyt-tmp-hide-metainfo #description.item.style-scope.ytd-watch-metadata #ytd-watch-info-text.style-scope.ytd-watch-metadata{
visibility: collapse;
/* display: none !important; */
}
@supports (color: var(--rendering-fix-cinematic)){
ytd-watch-flexy #cinematics.ytd-watch-flexy[id][class]:empty {
/* Found in FireFox 88, the layout effect still apply when it is empty. unknown bug */
display: none !important;
height: 0px !important;
position: fixed !important;
min-height: 0px !important;
overflow: hidden !important;
float: left !important;
transform: initial !important;
transition: none !important;
z-index: -1 !important;
}
html body ytd-watch-flexy.style-scope[cinematics-enabled] #cinematics.ytd-watch-flexy[class],
html body ytd-watch-flexy.style-scope[cinematics-enabled] #cinematics.ytd-watch-flexy[class] div,
html body ytd-watch-flexy.style-scope[cinematics-enabled] #cinematics.ytd-watch-flexy[class] canvas {
contain: layout size style;
user-select: none;
touch-action: none;
pointer-events: none;
/* transform: translateZ(1px); */
}
@supports not (contain: layout size style) {
/* Waterfox Classic */
/*
html body ytd-watch-flexy.style-scope[cinematics-enabled] #cinematics.ytd-watch-flexy[class] {
display: none;
}
*/
html > body > ytd-app[darker-dark-theme] {
overflow: hidden;
}
}
}
@supports (color: var(--anti-youtube-layout-bug-00)){
/*
ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy ~ div[class^=" "].style-scope.ytd-watch-flexy:not([id]):not([hidden]){
display: none;
}
*/
ytd-watch-flexy[flexy][is-two-columns_] #columns.ytd-watch-flexy.tyt-column-overflow{
justify-content: left;
}
body div#secondary.style-scope.ytd-watch-flexy .tab-content-cld div#related.ytd-watch-flexy{
width:auto;
}
body ytd-live-chat-frame,
div#secondary .tab-content-cld div#related.ytd-watch-flexy,
div#secondary .tab-content-cld div#panels,
div#secondary .tab-content-cld div#donation-shelf,
div#secondary .tab-content-cld #playlist {
width: unset;
}
ytd-watch-flexy[flexy] #secondary.ytd-watch-flexy,
ytd-watch-flexy[flexy] #secondary-inner.ytd-watch-flexy{
max-width: 100%;
}
/*
body ytd-live-chat-frame,
body div#secondary.style-scope.ytd-watch-flexy .tab-content-cld div#related.ytd-watch-flexy,
body div#secondary.style-scope.ytd-watch-flexy .tab-content-cld div#panels,
body div#secondary.style-scope.ytd-watch-flexy .tab-content-cld div#donation-shelf,
body div#secondary.style-scope.ytd-watch-flexy .tab-content-cld #playlist {
width: auto;
}*/
}
@supports (color: var(--tabview-fix-cinematic)){
body ytd-watch-flexy[cinematics-enabled] #below.ytd-watch-flexy{
position: static; /* fix tooltips overlap issue */
z-index: 0; /* fix cinematic rendering issue */
}
ytd-watch-flexy[cinematics-enabled] #above-the-fold.style-scope.ytd-watch-metadata{
z-index: 0; /* fix cinematic rendering issue @ single column mode */
}
}
@supports (color: var(--tabview-view-ploader)) {
/* @keyframes pageLoaderAnimation */
}
@supports (color: var(--dom-appearance-triggering)) {
/* @keyframes liveChatFrameDOMAppended */
/* @keyframes chatFrameToggleBtnAppended1 */
/* @keyframes commentsSectionAppended */
/* @keyframes commentsHeaderAppended1 */
/* @keyframes commentsHeaderAppended2 */
}
@supports (color: var(--tabview-font-size-btn-define)) {
.font-size-right {
display: inline-flex;
flex-direction: column;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 16px;
padding: 4px 0;
justify-content: space-evenly;
align-content: space-evenly;
pointer-events: none;
}
html body ytd-watch-flexy.style-scope .font-size-btn {
user-select: none !important;
}
.font-size-btn {
--tyt-font-size-btn-display: none;
display: var(--tyt-font-size-btn-display, none);
/* hide zoom btn for FireFox */
width: 12px;
height: 12px;
color: var(--yt-spec-text-secondary);
background-color: var(--yt-spec-badge-chip-background);
box-sizing: border-box;
cursor: pointer;
transform-origin: left top;
margin: 0;
padding: 0;
position: relative;
font-family: 'Menlo', 'Lucida Console', 'Monaco', 'Consolas', monospace;
line-height: 100%;
font-weight: 900;
transition: background-color 90ms linear, color 90ms linear;
pointer-events: all;
}
.font-size-btn:hover {
background-color: var(--yt-spec-text-primary);
color: var(--yt-spec-general-background-a);
}
@supports (zoom: 0.5) {
.tab-btn .font-size-btn {
--tyt-font-size-btn-display: none;
}
.tab-btn.active:hover .font-size-btn {
--tyt-font-size-btn-display: inline-block;
}
}
}
@supports (color: var(--prevent-click-events)){
.font-size-btn svg {
pointer-events: none;
user-select: none;
touch-action: none;
}
.tab-btn svg, .tab-btn span, .tab-btn paper-ripple {
pointer-events: none;
user-select: none;
touch-action: none;
}
}
@supports (color: var(--stylish-scrollbar)) {
/* align scrollbar style */
[userscript-scrollbar-render]::-webkit-scrollbar {
width: 16px;
}
[userscript-scrollbar-render]::-webkit-scrollbar-thumb {
height: 56px;
border-radius: 8px;
border: 4px solid transparent;
background-clip: content-box;
background-color: var(--yt-spec-text-secondary);
}
/* Colorize the scroll bar (chrome, safari, edge) */
[userscript-scrollbar-render]::-webkit-scrollbar-thumb {
background-color: var(--paper-checkbox-unchecked-color) !important;
}
[userscript-scrollbar-render]::-webkit-scrollbar-thumb:hover {
background-color: var(--paper-checkbox-checked-color) !important;
}
[userscript-scrollbar-render]::-webkit-scrollbar-corner {
background-color: transparent;
}
/* align scrollbar style */
[userscript-scrollbar-render]>*:only-child::-webkit-scrollbar {
width: 16px;
}
[userscript-scrollbar-render]>*:only-child::-webkit-scrollbar-thumb {
height: 56px;
border-radius: 8px;
border: 4px solid transparent;
background-clip: content-box;
background-color: var(--yt-spec-text-secondary);
}
/* Colorize the scroll bar (chrome, safari, edge) */
[userscript-scrollbar-render]>*:only-child::-webkit-scrollbar-thumb {
background-color: var(--paper-checkbox-unchecked-color) !important;
}
[userscript-scrollbar-render]>*:only-child::-webkit-scrollbar-thumb:hover {
background-color: var(--paper-checkbox-checked-color) !important;
}
[userscript-scrollbar-render]>*:only-child::-webkit-scrollbar-corner {
background-color: transparent;
}
}
@supports (color: var(--page-info-ytd-watch-metadata-stylish)){
ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy {
/* original for teaser ui */
/* although teaser ui is no longer applicable */
/* keep as general rule */
flex-shrink: 0;
}
/* align scrollbar style */
ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy::-webkit-scrollbar {
width: 16px;
}
ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy::-webkit-scrollbar-thumb {
height: 56px;
border-radius: 8px;
border: 4px solid transparent;
background-clip: content-box;
background-color: var(--yt-spec-text-secondary);
}
/* Colorize the scroll bar (chrome, safari, edge) */
ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy::-webkit-scrollbar-thumb {
background-color: var(--paper-checkbox-unchecked-color) !important;
}
ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy::-webkit-scrollbar-thumb:hover {
background-color: var(--paper-checkbox-checked-color) !important;
}
ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy::-webkit-scrollbar-corner {
background-color: transparent;
}
}
@supports (color: var(--tabview-tab-container-layouting)){
ytd-watch-flexy #right-tabs {
position: relative;
display: block;
padding: 0;
margin: 0;
}
ytd-watch-flexy[is-two-columns_] #chat.ytd-watch-flexy,
ytd-watch-flexy:not([is-two-columns_]) #chat.ytd-watch-flexy {
margin-bottom: 0;
}
ytd-watch-flexy[is-two-columns_][tyt-chat] #right-tabs,
ytd-watch-flexy[is-two-columns_]:not([tyt-chat]) ytd-live-chat-frame#chat[collapsed]:not([hidden]):not(:empty) + #right-tabs,
ytd-watch-flexy:not([is-two-columns_]) #right-tabs {
--tyt-right-tabs-margin-size: var(--ytd-margin-2x);
--tyt-right-tabs-margin-top: var(--tyt-right-tabs-margin-size);
--tyt-right-tabs-margin-bottom: 0;
margin-top: var(--tyt-right-tabs-margin-top);
margin-bottom: var(--tyt-right-tabs-margin-bottom);
}
#right-tabs #material-tabs {
position: relative;
display: flex;
padding: 0;
/*outline: 1px solid var(--tyt-x-border-color);*/
/*outline: 1px solid var(--ytd-searchbox-legacy-border-color);*/
/* 2023/05/05 chaged from outline to border */
border: 1px solid var(--ytd-searchbox-legacy-border-color);
/* border-bottom:0; */
}
ytd-watch-flexy[flexy]:not([is-two-columns_]) #right-tabs #material-tabs {
outline: 0;
}
ytd-watch-flexy #right-tabs .tab-content {
padding: 0;
box-sizing: border-box;
display: block;
/*--yt-spec-brand-background-primary:var(--yt-spec-general-background-a);*/
/*outline: 1px solid var(--tyt-x-border-color);*/
/* outline: 1px solid var(--ytd-searchbox-legacy-border-color); */
/* 2023/05/05 chaged from outline to border */
border: 1px solid var(--ytd-searchbox-legacy-border-color);
border-top:0;
position: relative;
top: 0;
display: flex;
flex-direction: row;
overflow: hidden;
}
ytd-watch-flexy[is-two-columns_] #right-tabs .tab-content {
height: var(--tyt-tabs-content-height);
contain: size layout paint;
}
ytd-watch-flexy:not([is-two-columns_]) #right-tabs .tab-content {
height: 100%;
}
ytd-watch-flexy #right-tabs .tab-content-cld {
box-sizing: border-box;
position: relative;
display: block;
width: 100%;
overflow: auto;
--tab-content-padding: var(--ytd-margin-4x);
padding: var(--tab-content-padding);
contain: layout paint;
}
.tab-content-cld,
#right-tabs,
.tab-content {
transition: none;
animation: none;
}
ytd-watch-flexy[is-two-columns_] #right-tabs .tab-content-cld {
height: 100%;
width: 100%;
contain: size layout paint style;
position: absolute;
}
ytd-watch-flexy #right-tabs .tab-content-cld.tab-content-hidden {
display: none;
width: 100%;
/* width fix */
contain: size layout paint style;
}
ytd-watch-flexy[tyt-comments*="K"] #right-tabs .tab-content-cld.tab-content-hidden#tab-comments {
display: block;
position: absolute;
/*
content-visibility: hidden;
*/
opacity: 0;
z-index: -1 !important;
/* 2022.04.25 - Edge 100 */
content-visibility: auto;
/* 2022.04.25 - Edge 100 */
pointer-events: none;
}
/* <-- 2022/11/12 fix for single column mode */
ytd-watch-flexy[tyt-comments*="K"]:not([is-two-columns_]) #right-tabs .tab-content-cld.tab-content-hidden#tab-comments {
position: fixed;
top: 4vh;
left: 0;
height: 80vh;
}
/* 2022/11/12 fix for single column mode --> */
ytd-watch-flexy[is-two-columns_][tyt-tab=""] #right-tabs .tab-content {
display: none;
contain: strict;
width: 100%;
/* to allow comments loading */
}
ytd-watch-flexy[is-two-columns_][tyt-tab=""][tyt-comments*="K"] #right-tabs .tab-content {
display: block;
position: absolute;
opacity: 0;
z-index: -1 !important;
/* 2022.04.25 - Edge 100 */
content-visibility: auto;
/* 2022.04.25 - Edge 100 */
pointer-events: none;
}
ytd-watch-flexy[tyt-tab=""] #right-tabs .tab-content-cld {
display: none;
contain: strict;
width: 100%;
/* to allow comments loading */
/*experimental*/
}
ytd-watch-flexy[tyt-tab=""][tyt-comments*="K"] #right-tabs .tab-content-cld#tab-comments {
display: block;
position: absolute;
/*
content-visibility: hidden;
*/
opacity: 0;
z-index: -1 !important;
/* 2022.04.25 - Edge 100 */
content-visibility: auto;
/* 2022.04.25 - Edge 100 */
pointer-events: none;
}
ytd-watch-flexy:not([playlist]) #right-tabs .tab-content-cld.tab-content-hidden#tab-list,
ytd-watch-flexy:not([playlist]) #right-tabs .tab-content-cld#tab-list {
display: block;
position: absolute;
opacity: 0;
content-visibility: hidden;
pointer-events: none;
}
ytd-watch-flexy #right-tabs .tab-content-cld#tab-list {
--tab-content-padding: 0px;
overflow: hidden;
/* avoid double scroll */
}
ytd-watch-flexy #right-tabs .tab-content-cld#tab-videos [placeholder-videos] {
--tab-content-padding: var(--ytd-margin-2x);
}
}
@supports (color: var(--tabview-tab-btn-define)) {
/* give background color; otherwise it will be transparent in dark mode, single column*/
ytd-watch-flexy #right-tabs .tab-btn {
background: var(--yt-spec-general-background-a);
}
html {
--tyt-tab-btn-flex-grow: 1;
--tyt-tab-btn-flex-basis: 0%;
--tyt-tab-bar-color-1-def: #ff4533;
--tyt-tab-bar-color-2-def: var(--yt-brand-light-red);
--tyt-tab-bar-color-1:var(--main-color, var(--tyt-tab-bar-color-1-def));
--tyt-tab-bar-color-2:var(--main-color, var(--tyt-tab-bar-color-2-def));
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content] {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
flex-grow: var(--tyt-tab-btn-flex-grow);
flex-basis: var(--tyt-tab-btn-flex-basis);
position: relative;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
--tyt-tab-btn-color: var(--yt-spec-text-secondary);
color: var(--tyt-tab-btn-color);
text-align: center;
padding: 14px 8px 10px;
border: 0;
border-bottom: 4px solid transparent;
font-weight: 500;
font-size: 12px;
line-height: 18px;
cursor: pointer;
transition: border 200ms linear 100ms;
background-color: var(--ytd-searchbox-legacy-button-color);
text-transform: var(--yt-button-text-transform, inherit);
user-select: none !important;
overflow: hidden;
white-space: nowrap;
/*text-overflow: ellipsis;*/
text-overflow: clip;
}
/* .tab-btn[tyt-tab-content] */
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content]>svg {
height: 18px;
padding-right: 0px;
vertical-align: bottom;
opacity: .5;
margin-right: 0px;
color: var(--yt-button-color, inherit);
fill: var(--iron-icon-fill-color, currentcolor);
stroke: var(--iron-icon-stroke-color, none);
}
ytd-watch-flexy #right-tabs .tab-btn {
--tabview-btn-txt-ml: 8px;
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content="#tab-comments"][loaded-comment="message"] {
--tabview-btn-txt-ml: 0px;
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content]>svg+span {
margin-left: var(--tabview-btn-txt-ml);
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content] svg {
pointer-events: none;
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content].active {
font-weight: 500;
outline: 0;
--tyt-tab-btn-color: var(--yt-spec-text-primary);
background-color: var(--ytd-searchbox-legacy-button-focus-color);
border-bottom: 4px var(--tyt-tab-bar-color-1) solid;
border-bottom-color: var(--tyt-tab-bar-color-2);
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content].active svg {
opacity: .9
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content]:not(.active):hover {
background-color: var(--ytd-searchbox-legacy-button-hover-color);
--tyt-tab-btn-color: var(--yt-spec-text-primary);
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content]:not(.active):hover svg {
opacity: .9
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content] {
user-select: none !important;
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content].tab-btn-hidden {
display: none;
}
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content="#tab-comments"][loaded-comment="message"],
ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content="#tab-comments"][loaded-comment="message"]:hover {
--tyt-tab-btn-color: var(--yt-spec-icon-disabled);
}
ytd-watch-flexy #right-tabs .tab-btn span#tyt-cm-count:empty::after {
display: inline-block;
width: 4em;
text-align: left;
font-size: inherit;
color: currentColor;
transform: scaleX(0.8);
}
}
@supports (color: var(--tyt-cm-count-define)){
ytd-watch-flexy {
--tyt-x-loading-content-letter-spacing: 2px;
}
html {
--tabview-text-loading: "Loading";
--tabview-text-fetching: "Fetching";
--tabview-panel-loading: var(--tabview-text-loading);
}
html:lang(ja) {
--tabview-text-loading: "読み込み中";
--tabview-text-fetching: "フェッチ..";
}
html:lang(ko) {
--tabview-text-loading: "로딩..";
--tabview-text-fetching: "가져오기..";
}
html:lang(zh-Hant) {
/* 資訊科技名詞 @ https://terms.naer.edu.tw/ */
--tabview-text-loading: "載入中";
--tabview-text-fetching: "擷取中";
}
html:lang(zh-Hans) {
--tabview-text-loading: "加载中";
--tabview-text-fetching: "抓取中";
}
html:lang(ru) {
--tabview-text-loading: "Загрузка";
--tabview-text-fetching: "Получение";
}
ytd-watch-flexy #right-tabs .tab-btn span#tyt-cm-count:empty::after {
content: var(--tabview-text-loading);
letter-spacing: var(--tyt-x-loading-content-letter-spacing);
}
}
@supports (not-color: var(--removed-page-old-design-sentiment-bar-renderer-adjustment)){
/* for page info - old desing */
/* REMOVED */
body ytd-sentiment-bar-renderer {
padding-top: 2px;
padding-bottom: 0;
}
}
/* too many space at the right */
ytd-watch-flexy #tab-comments,
ytd-watch-flexy #tab-videos [placeholder-videos] {
padding-right: 4px;
}
/* fix the rendering block overflow x problem */
ytd-watch-flexy #tab-videos ytd-compact-video-renderer yt-interaction.extended {
max-width: 100%;
}
ytd-watch-flexy #right-tabs{
--tyt-tabs-upspace: calc(var(--tyt-tabs-upspace-chat-unavailable, 0px) + var(--tyt-tabs-upspace-donation-unavailable, 0px));
}
/* example: https://www.youtube.com/watch?v=f8tIZpZ3hG0 */
ytd-watch-flexy[is-two-columns_][tyt-chat] #right-tabs{
/* button size + margin = 42px */
--tyt-tabs-upspace-chat-unavailable: 42px;
}
ytd-watch-flexy[is-two-columns_] #right-tabs{
--tyt-tabs-content-height: calc(var(--tyt-x-base-height) - var(--tyt-tabs-upspace, 0px));
}
ytd-watch-flexy[is-two-columns_][tyt-chat^="+"]{
--tyt-x-chatroom-height: calc(var(--tyt-x-base-height) - 6px);
}
ytd-watch-flexy[is-two-columns_][tyt-chat^="+"] #right-tabs{
--tyt-tabs-available-height: var(--tabview-youtube-tabbtn-height);
}
ytd-watch-flexy[is-two-columns_][tyt-chat^="-"],
ytd-watch-flexy[is-two-columns_]:not([tyt-chat]){
--tyt-x-chatroom-height: '-NULL-';
}
ytd-watch-flexy[is-two-columns_]:not([tyt-chat]) #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]),
ytd-watch-flexy[is-two-columns_][tyt-chat^="-"] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]) {
--tyt-x-chat-max-height: calc(var(--tyt-x-base-height) - 36px - 6px);
/* 36px due to possible chatframe message */
max-height: var(--tyt-x-chat-max-height);
height: var(--tyt-x-chat-max-height);
}
ytd-watch-flexy[is-two-columns_]:not([tyt-chat]) #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]) ytd-transcript-segment-list-renderer,
ytd-watch-flexy[is-two-columns_][tyt-chat^="-"] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]) ytd-transcript-segment-list-renderer {
height: auto; /* override fixed height */
}
ytd-watch-flexy[is-two-columns_][tyt-chat^="-"] #right-tabs,
ytd-watch-flexy[is-two-columns_]:not([tyt-chat]) #right-tabs{
--tyt-tabs-available-height: var(--tyt-tabs-content-height);
}
ytd-watch-flexy[tyt-chat^="+"]:not([is-two-columns_]) #right-tabs {
min-height: 0;
/* avoid page scroll when display of tab-content changed */
}
ytd-watch-flexy:not([is-two-columns_]) #right-tabs[tyt-stickybar] {
min-height: 0px;
}
ytd-watch-flexy:not([is-two-columns_]) {
--tyt-x-chatroom-height: var(--ytd-watch-flexy-chat-max-height);
}
ytd-watch-flexy ytd-live-chat-frame#chat {
margin-top: 0;
}
html ytd-watch-flexy:not([is-two-columns_]) #chat.ytd-watch-flexy {
margin-top: var(--ytd-margin-2x);
}
ytd-watch-flexy[is-two-columns_] #right-tabs ytd-playlist-panel-renderer[js-panel-height_] #container.ytd-playlist-panel-renderer {
min-height: 0;
max-height: var(--tyt-tabs-available-height);
}
.tab-content-cld ytd-playlist-panel-renderer {
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
}
ytd-watch-flexy[is-two-columns_] .tab-content-cld #tabview-playlist-wrapper {
height: 100%;
}
ytd-watch-flexy[is-two-columns_] .tab-content-cld ytd-playlist-panel-renderer[js-panel-height] {
height: 100%;
}
ytd-watch-flexy[is-two-columns_] .tab-content-cld ytd-playlist-panel-renderer[js-panel-height] #container.ytd-playlist-panel-renderer {
max-height: none;
}
ytd-watch-flexy:not([theater]):not([is-two-columns_]) #secondary.ytd-watch-flexy,
ytd-watch-flexy[theater]:not([is-two-columns_]) #secondary.ytd-watch-flexy {
margin-top: 0;
padding-bottom: 0;
}
ytd-watch-flexy[tyt-tab^="#tab-"]:not([theater]):not([is-two-columns_]) #primary-inner.ytd-watch-flexy,
ytd-watch-flexy[tyt-tab^="#tab-"][theater]:not([is-two-columns_]) #primary-inner.ytd-watch-flexy {
padding-bottom: var(--ytd-margin-6x);
}
body ytd-video-primary-info-renderer {
padding: 12px 0 2px 0;
}
@supports (not-color: var(--removed-page-old-info-1)){
/* left side - like menu smaller */
/* REMOVED since #player ~ #info becomes #player ~ #below */
#primary.ytd-watch-flexy #player ~ #info ytd-menu-renderer yt-icon-button.ytd-toggle-button-renderer {
line-height: 1;
padding: calc(1.0 * var(--yt-button-icon-padding, 8px));
width: calc(0.75 * var(--yt-button-icon-size, var(--yt-icon-width, 40px)));
height: calc(0.75 * var(--yt-button-icon-size, var(--yt-icon-height, 40px)));
}
#primary.ytd-watch-flexy #player ~ #info ytd-menu-renderer yt-icon-button.ytd-button-renderer {
line-height: 1;
padding: calc(1.0 * var(--yt-button-icon-padding, 8px));
width: calc(0.75 * var(--yt-button-icon-size, var(--yt-icon-width, 40px)));
height: calc(0.75 * var(--yt-button-icon-size, var(--yt-icon-height, 40px)));
}
#primary.ytd-watch-flexy #player ~ #info ytd-menu-renderer #button.ytd-menu-renderer {
width: calc(0.75 * var(--paper-icon-button_-_width, var(--yt-icon-width)));
height: calc(0.75 * var(--paper-icon-button_-_height, var(--yt-icon-height)));
}
}
@supports (not-color: var(--removed-page-old-info-2-single-column)) {
/* ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents */
/* REMOVED since #player ~ #info becomes #player ~ #below */
/* ytd-watch-flexy:not([is-two-columns_]) #player ~ #info */
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info {
display: flex;
flex-direction: column;
}
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info {
padding-bottom: 6px;
border: 0;
outline: 0;
}
ytd-watch-flexy:not([is-two-columns_]) #primary.ytd-watch-flexy #player ~ #info ytd-menu-renderer a {
white-space: nowrap;
}
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info>#info-contents>ytd-video-primary-info-renderer {
border: 0;
}
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info>#info-contents #menu-container {
padding: 0;
margin: 0;
margin-left: 60px;
}
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info>#info-contents #menu-container>#menu {
padding: 0;
margin: 0;
position: static;
}
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info>#info-contents #menu-container>#menu>ytd-menu-renderer {
padding: 0;
margin: 0;
height: var(--ytd-user-comment_-_line-height);
align-items: center;
}
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info>#info-contents>ytd-video-primary-info-renderer>#container>#info>#info-text {
max-height: none;
}
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info>#info-contents,
#player ~ #info>#info-contents>ytd-video-primary-info-renderer>#container {
flex-grow: 1;
}
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info>#info-contents,
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info>#info-contents>ytd-video-primary-info-renderer,
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info>#info-contents>ytd-video-primary-info-renderer>#container {
display: flex;
height: 100%;
flex-direction: column;
}
ytd-watch-flexy:not([is-two-columns_]) #player ~ #info>#info-contents>ytd-video-primary-info-renderer>#container>.title.ytd-video-primary-info-renderer {
flex-grow: 1;
}
}
@supports (not-color: var(--removed-page-old-info-3-two-columns)) {
/* ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents */
/* REMOVED since #player ~ #info becomes #player ~ #below */
/* ytd-watch-flexy[is-two-columns_] #player ~ #info */
ytd-watch-flexy[is-two-columns_] #player ~ #info {
display: flex;
flex-direction: column;
}
ytd-watch-flexy[is-two-columns_] #player ~ #info {
padding-bottom: 6px;
border: 0;
outline: 0;
}
ytd-watch-flexy[is-two-columns_] #primary.ytd-watch-flexy #player ~ #info ytd-menu-renderer a {
white-space: nowrap;
}
ytd-watch-flexy[is-two-columns_] #player ~ #info>#info-contents>ytd-video-primary-info-renderer {
border: 0;
}
ytd-watch-flexy[is-two-columns_] #player ~ #info>#info-contents #menu-container {
padding: 0;
margin: 0;
margin-left: 60px;
}
ytd-watch-flexy[is-two-columns_] #player ~ #info>#info-contents #menu-container>#menu {
padding: 0;
margin: 0;
position: static;
}
ytd-watch-flexy[is-two-columns_] #player ~ #info>#info-contents #menu-container>#menu>ytd-menu-renderer {
padding: 0;
margin: 0;
height: var(--ytd-user-comment_-_line-height);
align-items: center;
}
ytd-watch-flexy[is-two-columns_] #player ~ #info>#info-contents>ytd-video-primary-info-renderer>#container>#info>#info-text {
max-height: none;
}
ytd-watch-flexy[is-two-columns_] #player ~ #info>#info-contents,
#player ~ #info>#info-contents>ytd-video-primary-info-renderer>#container {
flex-grow: 1;
}
ytd-watch-flexy[is-two-columns_] #player ~ #info>#info-contents,
ytd-watch-flexy[is-two-columns_] #player ~ #info>#info-contents>ytd-video-primary-info-renderer,
ytd-watch-flexy[is-two-columns_] #player ~ #info>#info-contents>ytd-video-primary-info-renderer>#container {
display: flex;
height: 100%;
flex-direction: column;
}
ytd-watch-flexy[is-two-columns_] #player ~ #info>#info-contents>ytd-video-primary-info-renderer>#container>.title.ytd-video-primary-info-renderer {
flex-grow: 1;
}
}
@supports (not-color: var(--removed-page-old-info-4)){
/* two column mainly; theater view make font smaller */
ytd-watch-flexy[theater] #player ~ #info #info-contents .title {
font-size: var(--ytd-user-comment_-_font-size);
}
ytd-watch-flexy[flexy]:not([is-two-columns_]) #player ~ #info ytd-video-primary-info-renderer #info {
flex-wrap: wrap;
justify-content: flex-end;
}
}
@supports (color: var(--videos-row-menu-renderer-icon-size)) {
/* ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer ytd-menu-renderer */
ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer ytd-menu-renderer,
ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer ytd-menu-renderer #button.ytd-menu-renderer {
--yt-icon-button-icon-width: var(--ytd-margin-4x);
--yt-icon-button-icon-height: var(--ytd-margin-4x);
--paper-icon-button_-_width: var(--ytd-margin-4x);
--paper-icon-button_-height: var(--ytd-margin-4x);
}
}
@supports (color-x: var(--videos-row-metadata-UI-adjustment)) {
/* removed in 2023.08.20 */
/* ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata */
ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata {
height: 100%;
}
ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata>a {
height: 100%;
display: flex;
flex-direction: column;
}
ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata .secondary-metadata {
flex-grow: 1;
display: flex;
flex-direction: row;
}
ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata .secondary-metadata .badge {
box-sizing: border-box;
margin: 2px 2px;
width: 100%;
text-align: center;
}
ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata .secondary-metadata>ytd-video-meta-block {
flex-grow: 1;
overflow: hidden;
}
ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata .secondary-metadata ytd-badge-supported-renderer {
flex-direction: column;
white-space: nowrap;
}
}
@supports (color: var(--feature-chrome-only-tab-content-zoom)) and (zoom:1.5) {
/* --- zoom --- */
ytd-watch-flexy[is-two-columns_] #tab-comments ytd-comments #main.style-scope.ytd-comment-renderer yt-formatted-string,
ytd-watch-flexy[is-two-columns_] #tab-comments ytd-comments #main.style-scope.ytd-comment-renderer > #header.ytd-comment-renderer span.ytd-comment-renderer
{
zoom: var(--tyt-x-zoom-comments);
/*
transform: scale(var(--tyt-x-zoom-comments, 1.0));
transform-origin: 0 0;
--width: calc(100% * 1.0 / var(--tyt-x-zoom-comments, 1.0));
width: var(--width);
*/
}
/* Comment View Model */
ytd-watch-flexy[is-two-columns_] #tab-comments ytd-comments #main.style-scope.ytd-comment-view-model yt-attributed-string,
ytd-watch-flexy[is-two-columns_] #tab-comments ytd-comments #main.style-scope.ytd-comment-view-model > #header.ytd-comment-view-model span.ytd-comment-view-model
{
zoom: var(--tyt-x-zoom-comments);
/*
transform: scale(var(--tyt-x-zoom-comments, 1.0));
transform-origin: 0 0;
--width: calc(100% * 1.0 / var(--tyt-x-zoom-comments, 1.0));
width: var(--width);
*/
}
ytd-watch-flexy[is-two-columns_] #tab-videos [placeholder-videos] .metadata.style-scope.ytd-compact-video-renderer,
ytd-watch-flexy[is-two-columns_] #tab-videos [placeholder-videos] .metadata.style-scope.ytd-compact-radio-renderer,
ytd-watch-flexy[is-two-columns_] #tab-videos [placeholder-videos] .metadata.style-scope.ytd-compact-playlist-renderer,
ytd-watch-flexy[is-two-columns_] #tab-videos [placeholder-videos] yt-chip-cloud-chip-renderer.style-scope.yt-chip-cloud-renderer {
zoom: var(--tyt-x-zoom-videos);
}
ytd-watch-flexy[is-two-columns_] #tab-list #tabview-playlist-wrapper {
zoom: var(--tyt-x-zoom-list);
}
/* --- zoom --- */
/* added in 2023.05.31 to fix tooltip bug for positioning */
/*
ytd-watch-flexy[is-two-columns_] #tab-comments ytd-comments #main.style-scope.ytd-comment-renderer ,
ytd-watch-flexy[is-two-columns_] #tab-comments ytd-comments #main.style-scope.ytd-comment-renderer > *,
ytd-watch-flexy[is-two-columns_] #tab-comments ytd-comments #main.style-scope.ytd-comment-renderer > #action-buttons{
// zoom: calc( 1.0 / var(--tyt-x-zoom-comments) );
position: relative !important;
}
*/
}
@supports (color: var(--tab-info-layout-adjustment)) {
/* #tab-info ytd-expander */
ytd-watch-flexy[is-two-columns_] #tab-info ytd-expander {
/* space fix for tab INFO */
padding: 0;
margin: 0;
zoom: var(--tyt-x-zoom-info);
/* smaller text in tab Info */
}
/* single column view - keep margin-left if available */
ytd-watch-flexy:not([is-two-columns_]) #tab-info ytd-expander {
/* space fix for tab INFO */
padding: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
zoom: var(--tyt-x-zoom-info);
/* smaller text in tab Info */
}
ytd-watch-flexy:not([is-two-columns_]) #right-tabs .tab-content-cld#tab-info:not(.tab-content-hidden) {
display: flex;
flex-direction: row;
}
ytd-watch-flexy:not([is-two-columns_]) #right-tabs .tab-content-cld#tab-info::before {
content: " ";
flex-grow: 200;
max-width: 64px;
}
ytd-watch-flexy:not([is-two-columns_]) #right-tabs .tab-content-cld#tab-info>ytd-expander {
margin-left: 0;
flex-grow: 300;
margin-right: 0;
}
ytd-watch-flexy:not([is-two-columns_]) #right-tabs .tab-content-cld#tab-info::after {
content: " ";
flex-grow: 200;
max-width: 64px;
}
}
@supports (color: var(--tab-comments-header-layout-adjustment)) {
#tab-comments ytd-comments-header-renderer {
padding: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
}
@supports (color: var(--tab-playlist-layout-adjustment)) {
#tab-list ytd-playlist-panel-renderer#playlist yt-icon-button#expand-button {
/* hide expand button */
display: none;
}
#tab-list ytd-playlist-panel-renderer#playlist #header-description,
#tab-list ytd-playlist-panel-renderer#playlist #header-description yt-formatted-string[class] {
/* fix playlist title */
/*
font-size: var(--ytd-user-comment_-_font-size);
font-weight: var(--ytd-user-comment_-_font-weight);
line-height: var(--ytd-user-comment_-_line-height);
letter-spacing: var(--ytd-user-comment_-_letter-spacing);
height: calc(1 * var(--ytd-subheadline-one-line-ellipsis_-_max-height));
*/
white-space: nowrap;
}
#tab-list ytd-playlist-panel-renderer#playlist .header.ytd-playlist-panel-renderer:hover #header-description,
#tab-list ytd-playlist-panel-renderer#playlist .header.ytd-playlist-panel-renderer:hover #header-description yt-formatted-string[class] {
height: auto;
max-height: none;
white-space: normal;
}
/* <-- playlist css changed in 2022/11/09 -- */
#tab-list ytd-playlist-panel-renderer#playlist .header.ytd-playlist-panel-renderer {
cursor: default;
position: relative;
z-index: 1;
padding: 12px 6px 8px 16px;
--tabview-playlist-header-zindex: -1;
/*--tabview-playlist-header-display: none;*/
--tabview-playlist-header-position: absolute;
--tabview-playlist-header-transform: translate(-100vw, 0);
}
#tab-list ytd-playlist-panel-renderer#playlist .header.ytd-playlist-panel-renderer:hover {
/*--tabview-playlist-header-display: flex;*/
--tabview-playlist-header-position: relative;
--tabview-playlist-header-transform: initial;
--tabview-playlist-header-height: calc(36px + 4px);
}
/* changed in 2022/11/09 */
/* #tab-list ytd-playlist-panel-renderer#playlist #container */
#tab-list ytd-playlist-panel-renderer#playlist #container {
border: 0;
/* hide playlist default border */
}
#tab-list ytd-playlist-panel-renderer#playlist #container>.header yt-icon-button {
background-color: transparent;
}
#tab-list ytd-playlist-panel-renderer#playlist #container>.header #header-contents {
position: relative;
contain: none;
}
#tab-list ytd-playlist-panel-renderer#playlist .header.ytd-playlist-panel-renderer #header-top-row+#playlist-actions {
/* display: var(--tabview-playlist-header-display);*/
position: var(--tabview-playlist-header-position);
transform: var(--tabview-playlist-header-transform);
height: var(--tabview-playlist-header-height);
align-items: center;
min-height: var(--tabview-playlist-header-height);
}
#tab-list ytd-playlist-panel-renderer#playlist #container>.header.ytd-playlist-panel-renderer:hover {
--tabview-playlist-shift: calc(-80px + var(--tabview-playlist-header-height));
margin-bottom: var(--tabview-playlist-shift);
}
/* -- playlist css changed in 2022/11/09 --> */
/* 2022/11/14 fix playlist display issue */
#tab-list ytd-playlist-panel-renderer[collapsible][collapsed] #playlist-actions.ytd-playlist-panel-renderer {
display: flex;
}
#tab-list ytd-playlist-panel-renderer[collapsible][collapsed] .playlist-items.ytd-playlist-panel-renderer {
display: block;
}
}
@supports (color: var(--rendering-hide-elements)) {
/* hide playlist border & toggle button */
/* hide original right tabs {#related.ytd-watch-flexy} */
#primary-inner.ytd-watch-flexy>#related.ytd-watch-flexy,
#secondary-inner.ytd-watch-flexy>#related.ytd-watch-flexy,
/* during resizing - relocate it between {#primary} and {#secondary} */
*:not(#tab-videos)>#related.ytd-watch-flexy,
#related.ytd-watch-flexy #related,
/* youtube coding bug */
*:not([placeholder-videos])>ytd-watch-next-secondary-results-renderer,
/* hide videos list & play list before script loading */
#related.ytd-watch-flexy>#related-skeleton,
#related.ytd-watch-flexy>#player-ads,
*:not(#tabview-playlist-wrapper)>ytd-playlist-panel-renderer#playlist:not(.ytd-miniplayer)
/* hide videos list & play list before script loading */
/*#primary.ytd-watch-flexy #primary.ytd-watch-flexy #info ~ #meta #meta-contents ytd-expander*/
/* meta-contents relocated */
{
position: absolute;
z-index: -1;
visibility: collapse;
max-height: 40px;
overflow: hidden;
margin-top: -40px;
contain: strict;
}
#primary-inner.ytd-watch-flexy #player~ytd-comments#comments {
position: absolute;
z-index: -1;
visibility: collapse;
contain: layout paint;
}
}
@supports (color: var(--columns-layout-adjustment)) {
/* responsive to non-column flexy */
ytd-watch-flexy:not([is-two-columns_]) #columns.ytd-watch-flexy {
flex-direction: column;
/* from (flex-direction: column;) | overriding {#columns.ytd-watch-flexy} */
}
ytd-watch-flexy:not([is-two-columns_]) #columns.ytd-watch-flexy #secondary.ytd-watch-flexy {
display: block;
/* from (display: inline-block;) | overiding {ytd-watch-flexy:not([is-two-columns_]) #secondary.ytd-watch-flexy} */
}
/* css fix for responsive two columns flex , width */
ytd-watch-flexy[flexy][is-two-columns_] #secondary.ytd-watch-flexy {
width: var(--ytd-watch-flexy-sidebar-width);
min-width: var(--ytd-watch-flexy-sidebar-min-width);
}
}
@supports (color: var(--page-scroll)){
/* << whole page scroll bar (original-type) */
/* the scrollbar of the entire page is wrong due to youtube coding, just hide it */
/* siginificant empty at the right side (vertical bar) in the dark mode */
html.tabview-mini-player body {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
html body {
overflow-y: auto; /* added in 2023.05.22 */
/* override body { overflow-y: scroll; } in global_styles */
}
/*
html.tabview-normal-player body::-webkit-scrollbar {
display: none; /.* Blink and Webkit *./
}*/
html.tabview-normal-player body {
/* overflow-y: auto; */ /* removed in 2023.05.22 */
/* override body { overflow-y: scroll } */
}
/* whole page scroll bar (original-type) >> */
/* overflow fix */
ytd-popup-container #contentWrapper.tp-yt-iron-dropdown ytd-menu-popup-renderer[slot="dropdown-content"] {
overflow: hidden;
}
/* <<< page height setting - two-column-normal --- */
}
/*
necessary; otherwise background issue occurs for transcript panel background (panel button)
body ytd-watch-flexy[cinematics-enabled] #secondary.ytd-watch-flexy{
position: static; /-* not necessary as the cinematics is inside primary not secondary. *-/
} */
body ytd-watch-flexy[flexy][is-two-columns_][theater] #columns.ytd-watch-flexy {
min-width: 0;
/* avoid very wide video make the column sketch > 100vw under theater mode */
}
#tab-info .less-button.style-scope.ytd-video-secondary-info-renderer[role="button"] {
display: none;
}
/* added in 2022/11/24 */
@supports (selector(:has(body))){
html:has(body) {
--tabview-has-selector-enabled: 1;
}
}
@supports (color: var(--tab-info-extra-videos-arrows-stylish)) and (selector(:has(:hover))) {
#tab-info #video-lockups>#left-arrow-container.style-scope.arrow-container {
--tabview-left-arrow-opacity: '-NULL-';
opacity: var(--tabview-left-arrow-opacity);
transition: opacity 130ms;
}
#tab-info #video-lockups:has(#right-arrow-container:hover)>#left-arrow-container.style-scope.arrow-container {
--tabview-left-arrow-opacity: 0.23;
}
#tab-info #video-lockups>#right-arrow-container.style-scope.arrow-container {
--tabview-right-arrow-opacity: '-NULL-';
opacity: var(--tabview-right-arrow-opacity);
transition: opacity 130ms;
}
#tab-info #video-lockups:has(#left-arrow-container:hover)>#right-arrow-container.style-scope.arrow-container {
--tabview-right-arrow-opacity: 0.23;
}
}
@supports (color: var(--tab-info-extra-videos-arrows-stylish-may2023)) {
/* 2023.05.14 */ /* fix stretched height of the arrow button */
/* sample link: https://www.youtube.com/watch?v=UY5bp5CNhak */
#tab-info #video-lockups #left-arrow-button.arrow, #tab-info #video-lockups #right-arrow-button.arrow {
display: flex;
flex-direction: column;
contain: content;
}
}
@supports (color: var(--tab-comments-tooltips-word-break)) {
/* 2023.05.14 */ /* fix tooltip word break (Japanese Layout) */
#tab-comments #sort-menu.ytd-comments-header-renderer tp-yt-paper-tooltip {
white-space: nowrap;
}
}
@supports (color: var(--make-channel-name-full-display)) and (overflow-x: hidden) and (min-width: max-content) {
/* 2022/11/24 */
/* :hover is done by native CSS; .tabview-uploader-hover is done by scripting; this is "two-factor checking" of DOM hover status to avoid false positive */
body #primary.ytd-watch-flexy #below ytd-watch-metadata.tabview-uploader-hover:hover {
overflow-x: hidden;
}
body #primary.ytd-watch-flexy #below ytd-watch-metadata.tabview-uploader-hover #owner.ytd-watch-metadata:hover {
min-width: max-content;
flex-basis: 50%;
}
body #primary.ytd-watch-flexy #below ytd-watch-metadata.tabview-uploader-hover #owner.ytd-watch-metadata:hover + #actions.ytd-watch-metadata {
flex-basis: 50%;
}
}
@supports(color: var(--uploader-info-auto-expand-transition-triggering)){
/* tabview-uploader-hover */
/* parent container */
#primary.ytd-watch-flexy #below ytd-video-owner-renderer.style-scope.ytd-watch-metadata,
#primary.ytd-watch-flexy #below #owner
{
background-position-y: 0px;
/* no background */
transition: background-position-y 50ms;
/* detection of hover - mouseleave */
transition-delay: 1ms;
/* ensure effect is stably executed */
}
#primary.ytd-watch-flexy #below ytd-video-owner-renderer.style-scope.ytd-watch-metadata:hover,
#primary.ytd-watch-flexy #below #owner:hover {
background-position-y: 1px;
/* no background */
transition-duration: 10ms;
/* detection of hover - mouseenter */
/*transition-delay: 1ms;*/
}
/* sub elements */
#primary.ytd-watch-flexy #below #upload-info,
#primary.ytd-watch-flexy #below #owner a.yt-simple-endpoint.style-scope.ytd-video-owner-renderer[href] {
background-position-x: 0px;
/* no background */
transition: background-position-x 40ms;
/* detection of hover - mouseleave */
transition-delay: 1ms;
/* not counted in elapsedTime; just time delay allowing cursor moving between channel icon and channel text */
}
#primary.ytd-watch-flexy #below #upload-info:hover,
#primary.ytd-watch-flexy #below #owner a.yt-simple-endpoint.style-scope.ytd-video-owner-renderer[href]:hover {
background-position-x: 1px;
/* no background */
transition-duration: 20ms;
/* detection of hover - mouseenter */
/*transition-delay: 1ms;*/
}
}
@supports(color: var(--videos-continuation-btn-wrong-tag)){
/* wrong node tag 'yt-button-renderer' instead of 'ytd-button-renderer' */
/* reproduction: single column mode -> load more -> click video to change url -> new videos list become buggy */
/* youtube native bug */
#tab-videos #button.ytd-continuation-item-renderer yt-button-renderer.ytd-continuation-item-renderer {
width: var(--ytd-continuation-item-renderer-width, 100%);
}
#tab-videos yt-button-renderer.ytd-item-section-renderer {
margin-top: var(--ytd-item-section-item-margin, 16px);
}
}
/* flexbox */
ytd-watch-flexy[tyt-tab="#tab-list"]:not([is-two-columns_]) #tab-list:not(.tab-content-hidden) ytd-playlist-panel-renderer>#container {
max-height: none;
}
ytd-watch-flexy[is-two-columns_]:not([theater]) #tab-videos {
padding: 0;
}
ytd-watch-flexy[is-two-columns_]:not([theater]) #tab-videos [placeholder-videos] {
/*overflow: auto;*/
padding: var(--tab-content-padding, 0px);
padding-right: 4px;
}
ytd-watch-flexy[is-two-columns_] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]) {
margin-bottom: var(--ytd-margin-2x);
}
/* ytd-watch-flexy:not([is-two-columns_]) #columns */
ytd-watch-flexy:not([is-two-columns_]) #columns.ytd-watch-flexy {
overflow: auto;
}
ytd-watch-flexy:not([is-two-columns_]) #columns.ytd-watch-flexy {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
ytd-watch-flexy:not([is-two-columns_]) #columns.ytd-watch-flexy::-webkit-scrollbar {
display: none;
}
ytd-watch-flexy[flexy][is-two-columns_][theater] #primary.ytd-watch-flexy {
--ytd-watch-flexy-min-player-width: 0;
}
@supports (color: var(--compatibile-with-enhancer-youtube-theme)) {
/* against (Enhancer YoTube DeepDark Theme)
a:hover {
color: var(--main-color) !important;
fill: var(--main-color) !important;
}
*/
a.tab-btn:hover,
a.tab-btn:active,
a.tab-btn:visited {
color: var(--tyt-tab-btn-color) !important;
}
}
@supports (color: var(--compatibile-with-youtube-search-while-watching-video)){
/* @keyframes SearchWhileWatchAutocomplete */
}
@supports (color: var(--compatibile-with-youtube-play-next-queue-renderer)){
/* plugin - #youtube-play-next-queue-renderer */
#youtube-play-next-queue-renderer .queue-button {
height: auto;
zoom: 0.8;
}
#youtube-play-next-queue-renderer .queue-button.queue-play-now,
#youtube-play-next-queue-renderer .queue-button.queue-play-next,
#youtube-play-next-queue-renderer .queue-button.queue-remove {
margin: 2px !important;
}
#youtube-play-next-queue-renderer ytd-badge-supported-renderer {
align-self: flex-end;
}
/* align scrollbar style */
#youtube-play-next-queue-renderer::-webkit-scrollbar {
width: 16px;
}
#youtube-play-next-queue-renderer::-webkit-scrollbar-thumb {
height: 56px;
border-radius: 8px;
border: 4px solid transparent;
background-clip: content-box;
background-color: var(--yt-spec-text-secondary);
}
/* Colorize the scroll bar (chrome, safari, edge) */
#youtube-play-next-queue-renderer::-webkit-scrollbar-thumb,
#youtube-play-next-queue-renderer::-webkit-scrollbar-thumb {
background-color: var(--paper-checkbox-unchecked-color) !important;
}
#youtube-play-next-queue-renderer::-webkit-scrollbar-thumb:hover,
#youtube-play-next-queue-renderer::-webkit-scrollbar-thumb:hover {
background-color: var(--paper-checkbox-checked-color) !important;
}
#youtube-play-next-queue-renderer::-webkit-scrollbar-corner {
background-color: transparent;
}
}
@supports (color: var(--compatibile-with-youtube-live-filled-up-view)){
/* live fill up view */
.YouTubeLiveFilledUpView #primary-inner.ytd-watch-flexy > #right-tabs:not(#player) {
padding: 0;
}
.YouTubeLiveFilledUpView ytd-watch-flexy[is-two-columns_] #right-tabs {
padding: 0;
margin: 0;
}
.YouTubeLiveFilledUpView ytd-watch-flexy[is-two-columns_] {
--YouTubeLiveFilledUpView-header-height: calc(var(--ytd-watch-flexy-masthead-height) + var(--tabview-youtube-tabbtn-height));
}
.YouTubeLiveFilledUpView ytd-watch-flexy[is-two-columns_] {
--YouTubeLiveFilledUpView-primary-width: calc(100vw - var(--ytd-watch-flexy-sidebar-width));
--YouTubeLiveFilledUpView-secondary-width: var(--ytd-watch-flexy-sidebar-width);
}
.YouTubeLiveFilledUpView ytd-watch-flexy[flexy][js-panel-height_][is-two-columns_] ytd-live-chat-frame#chat.ytd-watch-flexy:not([collapsed]) {
height: calc(100vh - var(--YouTubeLiveFilledUpView-header-height)) !important;
}
}
/* Better CSS Layout for Info Meta since 2022.04.20 */
.watch-active-metadata.style-scope.ytd-watch-flexy {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.watch-active-metadata.style-scope.ytd-watch-flexy>#info {
flex-grow: 1;
}
/* experimental to fix Chinese display bug like
https://www.youtube.com/watch?v=wzjgnrIt4n8
https://www.youtube.com/watch?v=3-nuSx3F6YU
*/
ytd-watch-flexy ytd-video-primary-info-renderer[has-date-text] #info-text.ytd-video-primary-info-renderer {
height: auto;
overflow: visible;
-webkit-line-clamp: initial;
}
/* css for menu bar and hide image button text (Teaser UI ) */
ytd-watch-flexy ytd-menu-renderer yt-formatted-string.style-scope.ytd-toggle-button-renderer.style-text {
white-space: pre;
}
ytd-watch-flexy ytd-menu-renderer ytd-button-renderer.force-icon-button a.ytd-button-renderer {
overflow: hidden;
flex-wrap: wrap;
width: var(--yt-button-icon-size, var(--yt-icon-width, 40px));
height: var(--yt-button-icon-size, var(--yt-icon-width, 40px));
}
ytd-watch-flexy #primary.ytd-watch-flexy #menu ytd-menu-renderer {
--yt-button-icon-size: 32px;
}
ytd-watch-flexy #primary.ytd-watch-flexy #menu ytd-menu-renderer .ytd-menu-renderer[style-target=button] {
--yt-icon-button-icon-width: 24px;
--yt-icon-button-icon-height: 24px;
--yt-icon-width: 32px;
--yt-icon-height: 32px;
}
ytd-watch-flexy ytd-menu-renderer .ytd-menu-renderer[style-target=button] {
width: var(--yt-icon-width);
height: var(--yt-icon-height);
}
ytd-watch-flexy ytd-menu-renderer ytd-download-button-renderer.force-icon-button a.ytd-download-button-renderer {
overflow: hidden;
flex-wrap: wrap;
width: var(--yt-button-icon-size, var(--yt-icon-width, 40px));
height: var(--yt-button-icon-size, var(--yt-icon-width, 40px));
}
@supports (color: var(--transcript-segment-fix)){
/* Some CSS fix for transcript */
ytd-transcript-segment-renderer {
/*content-visibility: auto;*/
contain: layout paint;
}
ytd-engagement-panel-section-list-renderer ytd-transcript-search-panel-renderer>#body {
contain: layout paint style;
}
yt-formatted-string.segment-text.style-scope.ytd-transcript-segment-renderer:focus {
outline: 0;
}
body .segment.ytd-transcript-segment-renderer {
--tabview-segment-renderer-background: '--NULL--';
background-color: var(--tabview-segment-renderer-background);
}
body .segment.ytd-transcript-segment-renderer:focus:not(:hover):not(.active) {
--tabview-segment-renderer-background: transparent;
}
body .segment.ytd-transcript-segment-renderer:active:not(:hover):not(.active) {
--tabview-segment-renderer-background: transparent;
}
ytd-transcript-segment-renderer {
--tabview-transcript-segment-span-display: block;
}
yt-formatted-string.segment-text.ytd-transcript-segment-renderer>span {
display: var(--tabview-transcript-segment-span-display);
}
}
@supports (color: var(--tabview-cmt-height-for-contain-intrinsic)) and (contain-intrinsic-size: 1px 1px) {
/* contain-intrinsic-size - guess the size = 1.2 x SizeMax */
ytd-comment-thread-renderer[style*="--tabview-cmt-height"] {
content-visibility: auto;
contain-intrinsic-size: 1px var(--tabview-cmt-height, 234px);
/* 1.2 x SizeMax */
}
}
/* 2022/07/30 #primary-inner > #player + #below */
ytd-watch-flexy[flexy][is-two-columns_] #primary.ytd-watch-flexy #primary-inner.ytd-watch-flexy > #below {
flex-grow: 1;
display: flex;
flex-direction: column;
}
ytd-watch-flexy div#scroll-container.style-scope.yt-chip-cloud-renderer {
user-select: none !important;
}
/* 2022/10/27 ; ytd-channel-name z-index:0 for scrolling not to overlay video */
#player ~ #below ytd-watch-metadata #upload-info.ytd-video-owner-renderer > ytd-channel-name.ytd-video-owner-renderer {
z-index: 0;
}
/* 9382 */
/* 2022/11/06 - margin bug for new layout */
ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) > #columns.ytd-watch-flexy {
margin: 0;
}
/* 2022/11/07 - playlist no round radius */
body ytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer {
/* including both .ytd-miniplayer & .ytd-watch-flexy ? */
border-radius: 0;
}
/* May 2023 - 2023.05.19 - fix YouTube native wrong css to container inside miniplayer */
ytd-playlist-panel-renderer[within-miniplayer] #container.ytd-playlist-panel-renderer {
/* or ytd-playlist-panel-renderer#ytd-miniplayer.ytd-miniplayer[within-miniplayer] #container.ytd-playlist-panel-renderer */
border-color: transparent; /* keep 1px solid but transparent */
}
@supports (color: var(--compatibile-with-youtube-downloader-buttons)){
/* 2022.08.09 for https://greasyfork.org/scripts/373005-super-fast-youtube-to-mp3-converter-online-video-downloader */
/* 2022.12.02 for https://greasyfork.org/scripts/34613-youtube-multi-downloader-yt1s-com-mp3-fhd-mp4-hd-sd-3gp-no-ads */
#meta-contents #subscribe-button.ytd-video-secondary-info-renderer>#punisher {
z-index: 0;
}
/* apply to all case */
body #subscribe-button.ytd-video-secondary-info-renderer {
flex-direction: row;
align-items: center;
}
#subscribe-button.ytd-video-secondary-info-renderer>span#punisher>a[href*="https://convert2mp3s.com/api/widgetv2?url="] {
font-size: 1px !important;
color: transparent !important;
width: 24px !important;
height: 24px !important;
box-sizing: border-box;
padding: 0 !important;
display: inline-block;
background-color: var(--yt-spec-icon-inactive, #00ff00) !important;
--mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAQMAAADaua+7AAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAADJJREFUCNdjYJBgIBrzSBgw8EkUMLBLPGBgnnmAgfF2AwPDf6BcHRDbgNXAAf//DyAMAEDqC3cE7mZwAAAAAElFTkSuQmCC);
mask-image: var(--mask-image);
-webkit-mask-image: var(--mask-image);
background-size: contain;
transform: scale(0.8);
transform-origin: center center;
user-select: none !important;
opacity: 0.8;
}
#subscribe-button.ytd-video-secondary-info-renderer>span#punisher {
padding: 2px !important;
margin-top: 0 !important;
background-color: transparent !important;
}
}
@supports (color: var(--compatibile-with-chrome-plugin-youtube-live-clock-20221107)) and (selector(:has(style#id))) {
/* 2022/11/07 - specific fix for YouTubeLiveClock - chrome only */
html:has(style#ytlctn-style-for-native-control) #columns.ytd-watch-flexy #player::after {
content: "";
background-color: transparent;
border-color: transparent;
color: transparent;
box-sizing: border-box;
border-style: dotted;
display: flex;
height: 0px;
margin: 0;
border: 0;
margin-top: 51px;
width: calc(100% - 4px);
position: relative;
pointer-events: none;
}
html:has(style#ytlctn-style-for-native-control) #columns.ytd-watch-flexy #below {
transform: initial;
}
html:has(style#ytlctn-style-for-native-control) ytd-watch-flexy[flexy][is-two-columns_][theater] #columns.ytd-watch-flexy {
margin-top: 51px;
}
/*
// useless css? cause effected subtitle lagging
html:has(style#ytlctn-style-for-native-control) ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) #columns.ytd-watch-flexy #secondary.ytd-watch-flexy #secondary-inner>* {
transform: initial;
}
*/
html:has(style#ytlctn-style-for-native-control) ytd-watch-flexy[flexy]{
--tyt-native-ui-autohide-visibility: '--NULL-';
}
html:has(style#ytlctn-style-for-native-control) #columns {
overflow: revert;
}
}
@supports (color: var(--compatibile-with-chrome-plugin-youtube-live-clock-20240123)) and (selector(:has(style#id))) {
/* 2024/01/23 - specific fix for YouTubeLiveClock - chrome only */
html:has(style#ytlc-style-for-native-control) #columns.ytd-watch-flexy #player::after {
content: "";
background-color: transparent;
border-color: transparent;
color: transparent;
box-sizing: border-box;
border-style: dotted;
display: flex;
height: 0px;
margin: 0;
border: 0;
margin-top: 51px;
width: calc(100% - 4px);
position: relative;
pointer-events: none;
}
html:has(style#ytlc-style-for-native-control) #columns.ytd-watch-flexy #below {
transform: initial;
}
html:has(style#ytlc-style-for-native-control) ytd-watch-flexy[flexy][is-two-columns_][theater] #columns.ytd-watch-flexy {
margin-top: 51px;
}
html:has(style#ytlc-style-for-native-control) ytd-watch-flexy[flexy]{
--tyt-native-ui-autohide-visibility: '--NULL-';
}
html:has(style#ytlc-style-for-native-control) #columns {
overflow: revert;
}
}
@supports (color: var(--comment-input-panel-emoji)) {
/* 2022/11/07 - fix comment emoji box size */
ytd-watch-flexy[flexy][is-two-columns_] #right-tabs #emojis.ytd-commentbox {
max-width: calc(var(--ytd-watch-flexy-sidebar-width) - var(--ytd-margin-8x) * 5);
}
ytd-watch-flexy[flexy][is-two-columns_] #right-tabs #emojis.ytd-commentbox yt-emoji-picker-renderer.style-scope.ytd-commentbox#emoji {
min-height: calc(60vh - var(--tyt-x-h-tab-btn) - var(--ytd-margin-6x) * 2 - var(--tyt-x-top-bar-height));
}
}
@supports (color: var(--page-cinematics)) {
/* 2022/11/07 - integrate with cinematics background */
ytd-watch-flexy[flexy][is-two-columns_] #right-tabs > header {
background: transparent;
}
/* 2022/11/09 - cinematic background integration */
body .playlist-items.ytd-playlist-panel-renderer {
background-color: initial;
/* remove YouTube default background background */
}
html[dark] ytd-watch-flexy[cinematics-enabled] #right-tabs {
--tabview-tab-container-background: rgba(255, 255, 255, 0.04);
}
.tab-content-cld {
background-color: var(--tabview-tab-container-background);
}
html[dark] ytd-watch-flexy[cinematics-enabled] .header.ytd-playlist-panel-renderer {
/*background-color: rgba(66, 66, 66, 0.2);*/
background-color: rgba(58, 58, 58, 0.2);
}
html[dark] ytd-watch-flexy[cinematics-enabled] .header.ytd-playlist-panel-renderer:hover {
/*background-color: rgba(38, 38, 38, 0.875);*/
/*background-color: var(--yt-spec-badge-chip-background);*/
/*background-color: rgba(55, 55, 55, 0.875);*/
background-color: rgba(45, 45, 45, 0.875);
}
html[dark] ytd-watch-flexy[cinematics-enabled] yt-chip-cloud-renderer.yt-related-chip-cloud-renderer[darker-dark-theme][is-dark-theme] #container.style-scope.yt-chip-cloud-renderer {
background: var(--yt-spec-raised-background);
border-radius: 12px;
padding: 0px 8px;
--yt-spec-base-background: var(--yt-spec-raised-background);
opacity: 0.8;
}
html[dark] ytd-watch-flexy[cinematics-enabled] yt-chip-cloud-renderer.yt-related-chip-cloud-renderer[darker-dark-theme][is-dark-theme] #container.style-scope.yt-chip-cloud-renderer #left-arrow,
html[dark] ytd-watch-flexy[cinematics-enabled] yt-chip-cloud-renderer.yt-related-chip-cloud-renderer[darker-dark-theme][is-dark-theme] #container.style-scope.yt-chip-cloud-renderer #right-arrow {
opacity: 0.9;
}
}
@supports (color: var(--super-title-better-color)) {
/* 2022/11/09 added coloring css to make the super title looks better */
html[darker-dark-theme][dark] #title.style-scope.ytd-watch-metadata {
--yt-spec-call-to-action-clone: var(--yt-spec-call-to-action);
}
html[darker-dark-theme][dark] #super-title.style-scope.ytd-watch-metadata {
/*
--yt-spec-call-to-action: var(--yt-live-interactivity-component-background-color);
*/
--yt-spec-call-to-action: var(--yt-live-chat-tertiary-text-color);
}
html[darker-dark-theme][dark] #super-title.style-scope.ytd-watch-metadata a:hover {
/*
--yt-spec-call-to-action: var(--yt-spec-call-to-action-clone);*/
--yt-spec-call-to-action: var(--yt-spec-mono-filled-hover);
}
}
body ytd-message-renderer {
padding: 8px 16px;
/* to inline with button size */
}
/* fix button size due to transform:scale*/
/* kept as default setting */
#left-arrow.yt-chip-cloud-renderer .yt-spec-button-shape-next__icon,
#right-arrow.yt-chip-cloud-renderer .yt-spec-button-shape-next__icon {
display: flex;
align-items: center;
justify-content: center;
}
/* 2022/11/11 comments colored background padding fix */
ytd-watch-flexy #right-tabs #tab-comments.tab-content-cld {
--tab-content-padding: var(--ytd-margin-2x);
}
ytd-watch-flexy #right-tabs #tab-comments.tab-content-cld ytd-item-section-renderer#sections.style-scope.ytd-comments {
--tab-content-padding-2: var(--ytd-margin-2x);
padding: var(--tab-content-padding-2);
}
/* 2022/11/06 - one-line tips */
ytd-comment-action-buttons-renderer #toolbar #tooltip.style-scope.tp-yt-paper-tooltip,
[action-buttons-style="desktop-toolbar"] #toolbar #tooltip.style-scope.tp-yt-paper-tooltip {
word-wrap: none;
white-space: nowrap;
word-break: keep-all;
}
/* 2022/11/06 - fix empty clarify box */
#primary.style-scope.ytd-watch-flexy #clarify-box.style-scope.ytd-watch-flexy:empty {
display: none;
}
/* 2022/11/07 - adjust spacing */
/*
#primary.style-scope.ytd-watch-flexy #super-title.style-scope.ytd-watch-metadata[is-empty]:not(.use-shadow)+h1.style-scope.ytd-watch-metadata {
margin-top: 2px;
}
#primary.style-scope.ytd-watch-flexy #super-title.style-scope.ytd-watch-metadata:not([is-empty]):not(.use-shadow) {
transform: translateY(-4px);
display: inline-block;
}
*/
/*
.sste{
contain: strict;
content-visibility: auto;
display:none;
}
tyt-caption-window{
width: 100%;
height: 100%;
position: absolute;
top: 0;
pointer-events: none;
}
*/
ytd-watch-flexy[flexy][is-two-columns_] #primary-inner.ytd-watch-flexy #player ~ #below.style-scope.ytd-watch-flexy {
overflow-y: auto;
/* note: overlapped the tooltips */
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
/* margin-top: 6px; */
margin-top: var(--tyt-primary-below-mt); /* May 2023 */ /* 20250424 */
}
#primary-inner.ytd-watch-flexy #player ~ #below.style-scope.ytd-watch-flexy::-webkit-scrollbar {
display: none;
}
@supports (color: var(--rendering-autohide-visibility)){
.ytp-autohide .ytp-playlist-menu-button,.ytp-autohide .ytp-back-button,.ytp-autohide .ytp-title-channel,.ytp-autohide .ytp-title,.ytp-autohide .ytp-chrome-top .ytp-watch-later-button,.ytp-autohide .ytp-chrome-top .ytp-share-button,.ytp-autohide .ytp-chrome-top .ytp-copylink-button,.ytp-autohide:not(.ytp-cards-teaser-shown) .ytp-cards-button,.ytp-autohide .ytp-overflow-button,.ytp-autohide .ytp-chrome-bottom,.ytp-chrome-top[aria-hidden=true],.ytp-chrome-bottom[aria-hidden=true] {
visibility: var(--tyt-native-ui-autohide-visibility);
}
}
}
/* non-fullscreen */
@media not all and (display-mode: fullscreen) {
/*
@supports (color: var(--compatibile-with-enhancer-youtube-single-col)) and (selector(:has(a#id + b))) {
ytd-watch-flexy:not([is-two-columns_]) #player:has(ytd-player#ytd-player + .efyt-control-bar) {
margin-bottom: 36px;
}
}
*/
/*
@supports (color: var(--fix-decimal-wh-video-white-border)){
div#movie_player::before {
background: transparent;
content: '';
display: block;
width: calc(100% + 1px);
height: calc(100% + 1px);
position: absolute;
z-index: 11;
box-sizing: border-box;
transform: 0;
box-shadow: inset 0px 0px 1px 2px rgb(0 0 0);
pointer-events: none;
touch-action: none;
user-select: none;
}
}
*/
@supports (color: var(--rendering-contain-part-a)){
/* contain 321 */
ytd-watch-flexy #material-tabs,
ytd-watch-flexy #material-tabs .tab-btn {
contain: layout;
/* experimental */
}
#material-tabs .tab-btn paper-ripple,
#material-tabs .tab-btn svg {
contain: size layout paint style;
/* experimental */
}
/* contain 322 */
/* contain 341 */
iframe[src][id] {
contain: size layout paint style;
/* experimental */
}
ytd-live-chat-frame {
contain: layout paint;
}
#masthead-container,
ytd-masthead#masthead {
contain: layout style;
/* experimental */
}
ytd-masthead>#container {
contain: size layout style;
/* experimental */
}
ytd-masthead>#container .style-scope.ytd-masthead {
/* contain: layout style; */ /* removed since 2023.05.09 */
/* experimental */
}
/* contain 342 */
/* contain 351 */
ytd-watch-flexy[is-two-columns_] #right-tabs {
contain: layout;
}
/* contain 352 */
}
@supports (color: var(--rendering-contain-part-b)){
/* contain 791 - be careful */
ytd-watch-flexy #player,
ytd-player#ytd-player {
/*contain: layout paint style;*/
/* removed in 2022/11/07 - conflict with YouTubeLiveClock and modern layout #cinematics */
contain: layout style;
/* added in 2022/11/07 */
}
.ytp-caption-window-container .caption-window,
.ytp-caption-window-container .captions-text,
.ytp-caption-window-container .caption-visual-line,
.ytp-caption-window-container .ytp-caption-segment {
contain: layout paint;
}
/* contain 792 */
/* contain 361 */
yt-img-shadow[height][width] {
contain: layout paint style;
/* experimental */
/* content-visibility: auto; */
}
img[height][width] {
contain: layout paint style;
/* experimental */
content-visibility: auto;
}
/* contain 362 */
/* contain 851 */
.tab-content-cld svg,
.tab-content-cld yt-icon-button,
.tab-content-cld button,
.tab-content-cld yt-icon {
contain: size layout paint;
/* removed in 2022/11/06 */
contain: layout;
/* added in 2022/11/06 */
}
/* contain 852 */
/* contain 871 */
.tab-content-cld ytd-thumbnail-overlay-resume-playback-renderer,
.tab-content-cld ytd-thumbnail-overlay-now-playing-renderer {
contain: strict;
content-visibility: auto;
}
.tab-content-cld ytd-thumbnail-overlay-time-status-renderer {
contain: paint;
content-visibility: auto;
}
.tab-content-cld ytd-thumbnail div.style-scope.ytd-thumbnail#overlays:not([can-reorder]):not([touch-persistent-drag-handle]) {
contain: size;
}
.tab-content-cld ytd-thumbnail div.style-scope.ytd-thumbnail#mouseover-overlay:not([can-reorder]):not([touch-persistent-drag-handle]) {
contain: size;
}
.tab-content-cld ytd-thumbnail div.style-scope.ytd-thumbnail#hover-overlays:not([can-reorder]):not([touch-persistent-drag-handle]) {
contain: size;
}
/* contain 872 */
/* contain 521 */
ytd-watch-flexy .tab-content-cld#tab-videos>[placeholder-videos]>ytd-watch-next-secondary-results-renderer>#items {
contain: layout paint;
}
/*
ytd-watch-flexy .tab-content-cld#tab-comments > ytd-comments#comments > ytd-item-section-renderer#sections > #contents{
contain: layout paint style;
}
*/
ytd-watch-flexy .tab-content-cld#tab-comments>ytd-comments#comments>ytd-item-section-renderer#sections>#contents {
contain: layout style;
/* 2022/11/11 colored comments background padding */
}
/*ytd-pinned-comment-badge-renderer { */
/* May 2023 */ /* fix yt-icon fill color before #label.ytd-pinned-comment-badge-render */
/* https://www.youtube.com/watch?v=oZfX0O6ZjyQ */
/* color: var(--yt-spec-text-secondary);
}*/
yt-icon.ytd-pinned-comment-badge-renderer {
/* --iron-icon-height: 12px;
--iron-icon-width: 12px;
margin-right: 4px;
margin-bottom: 1px;*/
/* May 2023 */ /* fix yt-icon fill color before #label.ytd-pinned-comment-badge-render */
fill: var(--yt-spec-icon-active-other);
color: var(--yt-spec-icon-active-other);
}
ytd-watch-flexy:not([is-two-columns_]) .tab-content-cld#tab-comments>ytd-comments#comments>ytd-item-section-renderer#sections>#contents,
ytd-watch-flexy:not([is-two-columns_]) .tab-content-cld#tab-videos>[placeholder-videos]>ytd-watch-next-secondary-results-renderer>#items {
content-visibility: auto;
}
ytd-watch-flexy #right-tabs .tab-content-cld.tab-content-hidden ytd-comments#comments,
ytd-watch-flexy #right-tabs .tab-content-cld.tab-content-hidden #related.ytd-watch-flexy,
ytd-watch-flexy #right-tabs .tab-content-cld.tab-content-hidden #contents {
visibility: collapse;
}
/* contain 522 */
}
@supports (color: var(--rendering-contain-part-c)){
/* contain 631 */
/* experimental for drag & drop re-order */
.style-scope.playlist-drag-handle,
.style-scope[can-reorder],
.style-scope[touch-persistent-drag-handle],
.style-scope.playlist-drag-handle .style-scope,
.style-scope[can-reorder] .style-scope,
.style-scope[touch-persistent-drag-handle] .style-scope,
.style-scope.playlist-drag-handle ~ .style-scope,
.style-scope[can-reorder] ~ .style-scope,
.style-scope[touch-persistent-drag-handle] ~ .style-scope {
content-visibility: initial !important;
contain: initial !important;
}
/* for https://greasyfork.org/scripts/4870-maximize-video */
#htmlToothbrush #bodyToothbrush ytd-app.parentToothbrush #masthead-container,
#htmlToothbrush #bodyToothbrush ytd-app.parentToothbrush #right-tabs,
#htmlToothbrush #bodyToothbrush ytd-app.parentToothbrush ytd-video-primary-info-renderer,
#htmlToothbrush #bodyToothbrush ytd-app.parentToothbrush ytd-video-secondary-info-renderer,
#htmlToothbrush #bodyToothbrush ytd-app.parentToothbrush #player ~ div[id],
#htmlToothbrush #bodyToothbrush ytd-app.parentToothbrush ytd-live-chat-frame {
visibility: collapse;
}
/* ytd-thumbnail hover fix */
.tab-content-cld ytd-thumbnail #overlays yt-icon,
.tab-content-cld ytd-thumbnail #mouseover-overlay yt-icon,
.tab-content-cld ytd-thumbnail #hover-overlays yt-icon {
z-index: 99999999 !important;
}
.tab-content-cld ytd-thumbnail #overlays [class],
.tab-content-cld ytd-thumbnail #mouseover-overlay [class],
.tab-content-cld ytd-thumbnail #hover-overlays [class] {
contain: none !important;
content-visibility: visible !important;
}
.tab-content-cld ytd-thumbnail tp-yt-paper-tooltip {
contain: none !important;
content-visibility: visible !important;
z-index: 6666 !important;
pointer-events: none !important;
}
/* for chrome extension - Enhancer for YouTube™
https://chrome.google.com/webstore/detail/enhancer-for-youtube/ponfpcnoihfmfllpaingbgckeeldkhle */
/*
html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns.ytd-watch-flexy #primary.ytd-watch-flexy #player,
html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns.ytd-watch-flexy #primary.ytd-watch-flexy ytd-player#ytd-player {
contain: initial !important;
}
*/
/* contain 632 */
}
@supports (color: var(--rendering-contain-part-d-v1)){
/* added in 2023.05.24 */ /* removed in 2023.05.31 */
/* further optimize layouting for comment entries */
/*
ytd-comment-thread-renderer.ytd-item-section-renderer,
ytd-comment-renderer.ytd-comment-thread-renderer,
#body.ytd-comment-renderer,
#author-thumbnail.ytd-comment-renderer,
#main.ytd-comment-renderer,
#header.ytd-comment-renderer,
#comment-content.ytd-comment-renderer,
ytd-comment-action-buttons-renderer#action-buttons.ytd-comment-renderer,
#toolbar.ytd-comment-action-buttons-renderer,
#reply-dialog.ytd-comment-action-buttons-renderer {
contain: layout;
}
*/
/* added in 2023.05.24 */
/* further optimize layouting for comment entries */
ytd-compact-video-renderer.ytd-item-section-renderer,
#dismissible.ytd-compact-video-renderer,
ytd-thumbnail.ytd-compact-video-renderer,
.details.ytd-compact-video-renderer {
contain: layout;
}
#thumbnail-container.ytd-playlist-panel-video-renderer {
content-visibility: auto;
contain: layout size;
}
.ytp-spinner {
contain: layout style;
}
}
ytd-watch-flexy:not([fullscreen]):not([is-two-columns_]) #right-tabs .tab-content>.tab-content-cld:not(.tab-content-hidden) {
min-height: calc(100vh - var(--ytd-watch-flexy-masthead-height) - var(--tabview-youtube-tabbtn-height) - var(--ytd-margin-3x));
}
/* css fix for responsive two columns flex , width */
ytd-watch-flexy[flexy]:not([is-two-columns_]):not([fullscreen]) #secondary.ytd-watch-flexy {
min-width: var(--ytd-watch-flexy-min-player-width);
width: auto;
}
/* css fix for responsive two columns flex , align {#secondary} style like {#primary} */
ytd-watch-flexy:not([fullscreen]):not([is-two-columns_]) #tabview-playlist-wrapper #container {
max-height: calc(100vh - var(--ytd-watch-flexy-masthead-height) - var(--ytd-margin-6x) - var(--tyt-stickybar-h2));
}
ytd-watch-flexy:not([fullscreen]):not([is-two-columns_]) #primary.ytd-watch-flexy {
margin-top: 0;
margin-bottom: 0;
padding-top: var(--ytd-margin-3x);
padding-bottom: 0;
}
@supports (color: var(--page-scroll)){
/* two column height = 100vh */
ytd-watch-flexy[flexy][is-two-columns_]:not([theater]):not([fullscreen]) #columns.ytd-watch-flexy {
margin-bottom: 0;
/* max-height: none; */
height: calc(100vh - var(--ytd-watch-flexy-masthead-height));
padding-bottom: 0;
}
/* it is possible that #info is too height, make it overflow: auto with no scroll-bar */
ytd-watch-flexy[flexy][is-two-columns_]:not([theater]):not([fullscreen]) #primary-inner.ytd-watch-flexy {
max-height: 100%;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
ytd-watch-flexy[flexy][is-two-columns_]:not([theater]):not([fullscreen]) #primary-inner.ytd-watch-flexy::-webkit-scrollbar {
display: none;
/* Blink and Webkit */
}
/* --- page height setting - two-column-normal >>> */
/* <<< page height setting - two-column-theater --- */
/* theater mode: the player is extracted from two column view */
/* only set padding & margin */
ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) #columns.ytd-watch-flexy {
margin-bottom: 0;
padding-bottom: 0;
}
/* theater mode same mechanism */
ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) {
height: calc(100vh - var(--ytd-watch-flexy-masthead-height));
overflow: auto;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen])::-webkit-scrollbar {
display: none;
}
/* video player sticky at the top */
ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen])>#player-theater-container {
/*
top: 0;
position: sticky;
*/
/* as the parent is scrollable, the player can be sticky to the top */
/* REMOVED since #below being scrollable instead */
}
/* --- page height setting - two-column-theater >>> */
}
/* flexbox | ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) | #primary-inner | #info */
ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) #primary-inner.ytd-watch-flexy {
display: flex;
flex-flow: column;
height: 100%;
}
/* non-teaser UI */
ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) #primary-inner.ytd-watch-flexy > #info {
flex: 1;
}
/* teaser UI */
ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) #primary-inner.ytd-watch-flexy > ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy {
margin-top: 0;
margin-bottom: 0;
flex-grow: 1;
justify-content: end;
}
/* flexbox | ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) | #columns | #primary-inner | #info */
ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) {
display: flex;
flex-direction: column;
}
ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) > #columns.ytd-watch-flexy {
flex: 1;
overflow: auto;
}
ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) > #columns.ytd-watch-flexy > #primary.ytd-watch-flexy {
overflow: auto;
}
ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) > #columns.ytd-watch-flexy #primary-inner.ytd-watch-flexy {
display: flex;
flex-flow: column;
height: 100%;
}
ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) > #columns.ytd-watch-flexy #primary-inner.ytd-watch-flexy > #info {
flex: 1;
}
ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) > #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy {
overflow: hidden;
}
/*
ytd-watch-flexy[is-two-columns_][theater][tyt-tab=""]:not([fullscreen]) > #columns > #secondary{
overflow: initial; fix border
}
*/
ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) > #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy #right-tabs #material-tabs {
outline: 0;
border: 1px solid var(--ytd-searchbox-legacy-border-color);
/*border: 1px solid var(--tyt-x-border-color);*/
/* use border instead due to overflow:hidden */
}
ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) > #columns.ytd-watch-flexy > #primary.ytd-watch-flexy {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) > #columns.ytd-watch-flexy > #primary.ytd-watch-flexy::-webkit-scrollbar {
display: none;
}
@supports (not-color: var(--removed-teaser-ui-layout-adjustment)){
/** ==== for Teaser UI === */
ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy {
margin-bottom: 0;
overflow-y: auto;
}
ytd-watch-flexy[flexy] #primary.ytd-watch-flexy ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy ~ * #info ~ #meta {
height: auto;
min-height: 0;
}
#owner-and-teaser.style-scope.ytd-watch-metadata {
margin-right: 0;
gap: 12px;
}
#owner-and-teaser.style-scope.ytd-watch-metadata>#owner.item.style-scope.ytd-watch-metadata,
#owner-and-teaser.style-scope.ytd-watch-metadata>#comment-teaser.item.style-scope.ytd-watch-metadata {
margin-top: 2px;
margin-right: 0;
}
@media only screen and (max-width: 1184px) {
#owner-and-teaser.style-scope.ytd-watch-metadata {
gap: 4px;
}
}
/* tabview-no-duplicate-info */
#description-and-actions.style-scope.ytd-watch-metadata>#description ytd-text-inline-expander:not([tabview-removed-duplicate]) {
visibility: collapse;
}
/** ==== for Teaser UI === */
}
/** fix dimensions */
body ytd-watch-flexy[flexy][is-two-columns_][is-four-three-to-sixteen-nine-video_] #primary.ytd-watch-flexy {
max-width: none;
/* square video : https://www.youtube.com/watch?v=rEU4CjSQzNY */
}
body ytd-watch-flexy[flexy][is-two-columns_][is-extra-wide-video_]:not([full-bleed-player][full-bleed-no-max-width-columns]):not([fixed-panels]) #primary.ytd-watch-flexy,
body ytd-watch-flexy[flexy][is-two-columns_][is-four-three-to-sixteen-nine-video_]:not([full-bleed-player][full-bleed-no-max-width-columns]):not([fixed-panels]) #primary.ytd-watch-flexy {
/* 2024.04.06 */
max-width: none;
/* square video : https://www.youtube.com/watch?v=VccJi8eo-Vg */
}
#tab-info #description.ytd-video-secondary-info-renderer {
max-width: none;
}
ytd-watch-flexy[flexy][is-two-columns_] #tab-info ytd-rich-metadata-renderer:not([fixie]) {
max-width: none;
/* fix game content box width */
}
#tab-list ytd-playlist-panel-renderer:not([hide-header-text]):not([collapsed]):not([has-toolbar]) #header-contents.ytd-playlist-panel-renderer {
margin-bottom: 0;
}
/* fix teaser UI overflow */
ytd-watch-flexy[flexy] #primary.ytd-watch-flexy ytd-watch-metadata #bottom-row.style-scope.ytd-watch-metadata {
max-width: 100%;
}
@supports (not-color: var(--teaser-ui-content-stylish)) and (opacity:0.137) {
/* experimental css - teaser ui */
/* visible if tab-info is with no content */
ytd-watch-flexy[flexy] #primary.ytd-watch-flexy ytd-watch-metadata ytd-text-inline-expander#description-inline-expander #formatted-snippet-text>span.bold[style-target="bold"]+span[style*="color: "]:not([style-target="bold"]):not(.bold) {
visibility: hidden;
max-height: 0;
display: inline-block;
}
ytd-watch-flexy[flexy] #primary.ytd-watch-flexy ytd-watch-metadata ytd-text-inline-expander#description-inline-expander #formatted-snippet-text>span.bold[style-target="bold"]+span[style*="color: "]:not([style-target="bold"]):not(.bold) ~ .yt-simple-endpoint.style-scope.yt-formatted-string {
visibility: hidden;
max-height: 0;
display: inline-block;
}
ytd-watch-flexy[flexy] #primary.ytd-watch-flexy ytd-watch-metadata ytd-text-inline-expander#description-inline-expander #snippet.style-scope.ytd-text-inline-expander+tp-yt-paper-button#expand[style*="left: "] {
visibility: hidden;
max-height: 0;
display: inline-block;
}
ytd-watch-flexy[flexy] #primary.ytd-watch-flexy ytd-watch-metadata ytd-text-inline-expander#description-inline-expander #snippet.style-scope.ytd-text-inline-expander>#snippet-text + #ellipsis ~ * {
visibility: hidden;
max-height: 0;
display: inline-block;
}
ytd-watch-flexy[flexy] #primary.ytd-watch-flexy ytd-watch-metadata ytd-text-inline-expander#description-inline-expander #snippet.style-scope.ytd-text-inline-expander {
white-space: nowrap;
color: var(--yt-spec-text-secondary);
font-weight: 400;
}
}
.ytp-progress-bar[tabindex][role="slider"]>.ytp-scrubber-container[style] {
transition-delay: 10ms;
}
.ytp-tooltip.ytp-bottom.ytp-preview[style*="top"][style*="left"]:not([style*="display"]) {
transition-delay: 12ms;
}
.ytp-tooltip.ytp-bottom.ytp-preview[style*="top"][style*="left"]:not([style*="display"]) .ytp-tooltip-text {
transition-delay: 15ms;
}
.ytp-tooltip.ytp-bottom.ytp-preview[style*="top"][style*="left"]:not([style*="display"]) .ytp-tooltip-bg {
transition-delay: 16ms;
}
@supports (color: var(--super-title-better-spacing)){
ytd-watch-flexy[is-two-columns_] #primary.style-scope.ytd-watch-flexy #super-title.style-scope.ytd-watch-metadata[is-empty]:not(.use-shadow)+h1.style-scope.ytd-watch-metadata {
--tyt-primary-main-title-mt: 2px;
}
ytd-watch-flexy[is-two-columns_] #primary.style-scope.ytd-watch-flexy #super-title.style-scope.ytd-watch-metadata:not([is-empty]):not(.use-shadow) {
--tyt-primary-super-title-mt: -4px;
--tyt-primary-super-title-mb: 4px;
--tyt-primary-super-title-display: inline-block;
/* default inline cannot make margin / translateY */
/*transform: translateY(-4px);*/
}
ytd-watch-flexy[is-two-columns_] #super-title.ytd-watch-metadata {
margin-top: var(--tyt-primary-super-title-mt);
margin-bottom: var(--tyt-primary-super-title-mb);
display: var(--tyt-primary-super-title-display);
}
ytd-watch-flexy[is-two-columns_] #super-title+h1.ytd-watch-metadata {
margin-top: var(--tyt-primary-main-title-mt);
}
}
}
@supports (color: var(--spacing-css-20240504)){
/* just for better spacing */
ytd-watch-flexy[theater][is-two-columns_] #secondary.ytd-watch-flexy {
margin-top: var(--tyt-secondary-mt);
padding-bottom: 0;
}
ytd-watch-flexy[fullscreen][is-two-columns_] #secondary.ytd-watch-flexy {
margin-top: var(--tyt-secondary-mt);
padding-bottom: 0;
}
ytd-watch-flexy[fullscreen][flexy][is-two-columns_] ytd-watch-metadata.ytd-watch-flexy{
margin-top: var(--tyt-primary-metadata-mt)
}
ytd-watch-flexy{
--tyt-588-sortmenu-display: flex;
--tyt-588-sortmenu-flex-direction: row;
--tyt-588-sortfilter-sub-menu-renderer-mt: 0;
--tyt-588-sortfilter-sub-menu-renderer-display: inline-flex;
--tyt-588-sortfilter-sub-menu-renderer-flex-direction: row;
--tyt-588-dropdown-menu-display: inline-flex;
--tyt-588-dropdown-menu-flex-direction: row;
}
ytd-watch-flexy #tab-comments span#sort-menu.style-scope.ytd-comments-header-renderer {
display: var(--tyt-588-sortmenu-display);
flex-direction: var(--tyt-588-sortmenu-flex-direction);
}
ytd-watch-flexy #tab-comments ytd-comments-header-renderer:not([show-comments-panel-button]):not([compact-header]) span#sort-menu.style-scope.ytd-comments-header-renderer yt-sort-filter-sub-menu-renderer.ytd-comments-header-renderer {
margin-top: var(--tyt-588-sortfilter-sub-menu-renderer-mt);
}
ytd-watch-flexy #tab-comments span#sort-menu.style-scope.ytd-comments-header-renderer yt-sort-filter-sub-menu-renderer.ytd-comments-header-renderer {
margin-top: var(--tyt-588-sortfilter-sub-menu-renderer-mt);
display: var(--tyt-588-sortfilter-sub-menu-renderer-display);
flex-direction: var(--tyt-588-sortfilter-sub-menu-renderer-flex-direction);
}
ytd-watch-flexy #tab-comments span#sort-menu.style-scope.ytd-comments-header-renderer yt-dropdown-menu {
display: var(--tyt-588-dropdown-menu-display);
flex-direction: var(--tyt-588-dropdown-menu-flex-direction);
}
ytd-watch-flexy[is-two-columns_][fullscreen]{
--tyt-primary-metadata-mt: 0;
--tyt-primary-metadata-mb: 0;
}
ytd-watch-flexy[is-two-columns_][theater]{
--tyt-primary-metadata-mt: 0;
--tyt-primary-metadata-mb: 0;
}
ytd-watch-flexy[is-two-columns_][fullscreen] ytd-watch-metadata.ytd-watch-flexy{
margin-top:var(--tyt-primary-metadata-mt);
margin-bottom:var(--tyt-primary-metadata-mb);
}
ytd-watch-flexy[is-two-columns_][theater] ytd-watch-metadata.ytd-watch-flexy{
margin-top:var(--tyt-primary-metadata-mt);
margin-bottom:var(--tyt-primary-metadata-mb);
}
:fullscreen ytd-watch-flexy[fullscreen][is-two-columns_] #primary-inner {
padding-top: 0;
}
/* 20240512 */
ytd-watch-flexy[flexy][is-two-columns_]:not([fullscreen]) ytd-watch-metadata.ytd-watch-flexy[class] {
margin-bottom: var(--ytd-margin-3x);
}
}
/* display-mode: fullscreen not working in Opera */
@supports (color: var(--fullscreen-layout-adjustment)) {
/* 2022/11/07 */
:fullscreen ytd-watch-flexy[flexy][fullscreen] #chat.ytd-watch-flexy:not([collapsed]).ytd-watch-flexy {
--tyt-x-chat-max-height: calc(100vh - var(--ytd-watch-flexy-masthead-height) - 40px - var(--tyt-x-h-tab-btn) - var(--ytd-margin-6x) - var(--ytd-margin-6x) - var(--tyt-tabs-upspace-donation-unavailable, 0px) );
}
/* 2022/11/07 */
:fullscreen ytd-watch-flexy[is-two-columns_][fullscreen] #right-tabs {
--tyt-tabs-content-height: calc(var(--tyt-x-base-height) - var(--tyt-tabs-upspace, 0px) - var(--ytd-margin-6x) - var(--ytd-margin-2x) - var(--ytd-margin-6x) );
}
:fullscreen ytd-watch-flexy[is-two-columns_][fullscreen] #right-tabs::after {
/* as a page margin */
content: '';
display: flex;
height: var(--ytd-margin-3x); /* height: var(--ytd-margin-6x); */
opacity: 0;
user-select: none;
pointer-events: none;
touch-action: none;
transition: none;
animation: none;
width: 0px;
}
@supports (color: var(--compatibile-with-iridium-for-youtube)) {
/* fix Iridium CSS */
/* https://greasyfork.org/en/scripts/37902-iridium */
/* https://chrome.google.com/webstore/detail/iridium-for-youtube/gbjmgndncjkjfcnpfhgidhbgokofegbl */
:fullscreen ytd-watch-flexy[flexy][is-two-columns_][fullscreen] #info .iri-quick-controls-tooltip {
margin-top: -7rem;
}
}
@supports (color: var(--fullscreen-render-boost)) {
:fullscreen ytd-watch-flexy[flexy][fullscreen][is-two-columns_] ytd-live-chat-frame,
:fullscreen ytd-watch-flexy[flexy][fullscreen][is-two-columns_] #right-tabs .tab-content,
:fullscreen ytd-watch-flexy[flexy][fullscreen][is-two-columns_] iframe#chatframe.ytd-live-chat-frame {
content-visibility: auto;
}
:fullscreen ytd-watch-flexy[fullscreen] #cinematics.ytd-watch-flexy {
visibility: collapse;
}
}
@supports (color-invalid: var(--fullscreen-scrollable-info)) { /* omitted in 2023.09.18; already invalid */
:fullscreen ytd-watch-flexy[fullscreen][is-two-columns_] #columns.ytd-watch-flexy,
:fullscreen ytd-watch-flexy[fullscreen][is-two-columns_] #primary.ytd-watch-flexy,
:fullscreen ytd-watch-flexy[fullscreen][is-two-columns_] #secondary.ytd-watch-flexy {
max-height: 200vh;
}
:fullscreen ytd-watch-flexy[fullscreen][is-two-columns_] #primary.ytd-watch-flexy #primary-inner:not([style*="--tyt-desc-top-h"]) ytd-watch-metadata:not([description-collapsed]) #description.item.style-scope.ytd-watch-metadata {
/* might be not required */
max-height: 50vh;
overflow: hidden;
visibility: collapse;
}
:fullscreen ytd-watch-flexy[fullscreen][is-two-columns_] #primary.ytd-watch-flexy [style*="--tyt-desc-top-h"] ytd-watch-metadata:not([description-collapsed]) #description.item.style-scope.ytd-watch-metadata {
max-height: calc(100vh - var(--ytd-toolbar-height) - var(--tyt-desc-top-h));
overflow: auto;
}
}
@supports (color: var(--fullscreen-info-section)) {
#bottom-row.ytd-watch-metadata.ytd-watch-metadata {
margin: 0;
}
}
:fullscreen ytd-watch-flexy[fullscreen][is-two-columns_]:not([tyt-chat]) #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]),
:fullscreen ytd-watch-flexy[fullscreen][is-two-columns_][tyt-chat^="-"] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]) {
--tyt-x-chat-max-height: calc(100vh - var(--ytd-watch-flexy-masthead-height) - 40px - var(--tyt-x-h-tab-btn) - var(--ytd-margin-6x) - var(--ytd-margin-6x) - 36px);
/* 36px due to possible chatframe message */
max-height: var(--tyt-x-chat-max-height);
height: var(--tyt-x-chat-max-height);
}
:fullscreen ytd-watch-flexy[fullscreen][is-two-columns_]:not([tyt-chat]) #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]) ytd-transcript-segment-list-renderer,
:fullscreen ytd-watch-flexy[fullscreen][is-two-columns_][tyt-chat^="-"] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden]) ytd-transcript-segment-list-renderer {
height: auto; /* override fixed height */
}
}
@supports (color: var(--fix-native-bug-playlist-wrong-row-highlight-after-reorder)){
/* @keyframes playlistRowDOMSelected */
}
@supports (color: var(--experimental-playlist-flex-render-boost)) and (row-gap: 2px) {
ytd-watch-next-secondary-results-renderer #contents.style-scope.ytd-item-section-renderer {
display: flex;
flex-direction: column;
column-gap: 0px;
row-gap: 2px;
}
ytd-playlist-panel-renderer#playlist #items.playlist-items.style-scope.ytd-playlist-panel-renderer {
display: flex;
flex-direction: column;
column-gap: 0px;
row-gap: 2px;
height: 100%;
width: 100%;
}
ytd-watch-flexy[is-two-columns_] ytd-playlist-panel-renderer#playlist #items.playlist-items.style-scope.ytd-playlist-panel-renderer {
contain: strict;
}
}
@supports (color: var(--smaller-shorts-viewer-in-tab-for-arrow-display)) {
#tab-videos ytd-watch-next-secondary-results-renderer.ytd-watch-flexy ytd-reel-shelf-renderer.ytd-item-section-renderer yt-horizontal-list-renderer.ytd-reel-shelf-renderer {
margin: 0px 20px 0px 20px;
}
#tab-videos ytd-watch-next-secondary-results-renderer.ytd-watch-flexy ytd-reel-shelf-renderer.ytd-item-section-renderer yt-horizontal-list-renderer.ytd-reel-shelf-renderer ytd-button-renderer.arrow {
align-items: stretch;
}
#tab-videos ytd-watch-next-secondary-results-renderer.ytd-watch-flexy ytd-reel-shelf-renderer.ytd-item-section-renderer yt-horizontal-list-renderer.ytd-reel-shelf-renderer ytd-button-renderer.arrow > yt-button-shape {
align-items: stretch;
}
#tab-videos ytd-watch-next-secondary-results-renderer.ytd-watch-flexy ytd-reel-shelf-renderer.ytd-item-section-renderer yt-horizontal-list-renderer.ytd-reel-shelf-renderer ytd-button-renderer.arrow > yt-button-shape > button:only-child[class] {
height: 100%;
width: 100%;
}
}
@supports (color: var(--fix-color-of-badge-inside-ytd-author-comment-badge-renderer)) {
/* Example: https://www.youtube.com/watch?v=IKKar5SS29E; "Rekken and Yu" followed by a tick in black color in Dark Theme (native YouTube bug) */
ytd-author-comment-badge-renderer
{
color: var(--ytd-author-comment-badge-name-color);
}
}
@supports (color: var(--compatibile-with-Youtube-subtitles-under-video-frame)) {
/* partial support */
/* https://greasyfork.org/en/scripts/433440-youtube-subtitles-under-video-frame/ */
.yfms-userjs:not([fullscreen]) #below {
margin-top: var(--subs-gap) !important;
}
.yfms-userjs[theater]:not([fullscreen]) #below {
--subs-gap: var(--subs-gap-theater);
}
}
@supports (color: var(--fix-engagement-panels-light-theme-header-background)) {
body ytd-watch-flexy[flexy] #columns.ytd-watch-flexy #header.ytd-engagement-panel-title-header-renderer {
/*
background-color: var(--ytd-searchbox-legacy-button-color);
*/
--yt-spec-brand-background-primary: var(--ytd-searchbox-legacy-button-color);
}
}
@supports (color: var(--general-fix-video-ended-mode-display)) {
/* this is a general fix, might or might not directly related to this script */
#movie_player .html5-video-container {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
overflow: hidden; /* to against overflow:visible in #movie_player in some userscripts */
contain: layout size paint style; /* if supported */
}
#movie_player .html5-video-container > video[style*="top: -"],
#movie_player .html5-video-container > video[style*="top:-"] {
margin-top: -1px !important; /* (.ended-mode#movie_player) video size 943 x 530.44, but top: -530px only */
}
}
@supports (color: var(--disable-ytd-will-change-optimization)) {
/* remove YouTube constant will-change */
/* constant value will slow down the performance; default auto */
/* www-player.css */
html .ytp-contextmenu,
html .ytp-settings-menu {
will-change: unset;
}
/* frequently matched elements */
html .fill.yt-interaction,
html .stroke.yt-interaction,
html .yt-spec-touch-feedback-shape__fill,
html .yt-spec-touch-feedback-shape__stroke {
will-change: unset;
}
/* live_chat_polymer.js */
/*
html .toggle-button.tp-yt-paper-toggle-button,
html #primaryProgress.tp-yt-paper-progress,
html #secondaryProgress.tp-yt-paper-progress,
html #onRadio.tp-yt-paper-radio-button,
html .fill.yt-interaction,
html .stroke.yt-interaction,
html .yt-spec-touch-feedback-shape__fill,
html .yt-spec-touch-feedback-shape__stroke {
will-change: unset;
}
*/
/* desktop_polymer_enable_wil_icons.js */
/* html .fill.yt-interaction,
html .stroke.yt-interaction, */
html tp-yt-app-header::before,
html tp-yt-iron-list,
html #items.tp-yt-iron-list > *,
html #onRadio.tp-yt-paper-radio-button,
html .toggle-button.tp-yt-paper-toggle-button,
html ytd-thumbnail-overlay-toggle-button-renderer[use-expandable-tooltip] #label.ytd-thumbnail-overlay-toggle-button-renderer,
html #items.ytd-post-multi-image-renderer,
html #items.ytd-horizontal-card-list-renderer,
html #items.yt-horizontal-list-renderer,
html #left-arrow.yt-horizontal-list-renderer,
html #right-arrow.yt-horizontal-list-renderer,
html #items.ytd-video-description-infocards-section-renderer,
html #items.ytd-video-description-music-section-renderer,
html #chips.ytd-feed-filter-chip-bar-renderer,
html #chips.yt-chip-cloud-renderer,
html #items.ytd-merch-shelf-renderer,
html #items.ytd-product-details-image-carousel-renderer,
html ytd-video-preview,
html #player-container.ytd-video-preview,
html #primaryProgress.tp-yt-paper-progress,
html #secondaryProgress.tp-yt-paper-progress,
html ytd-miniplayer[enabled] /* ,
html .yt-spec-touch-feedback-shape__fill,
html .yt-spec-touch-feedback-shape__stroke */ {
will-change: unset;
}
/* other */
.ytp-videowall-still-info-content[class],
.ytp-suggestion-image[class] {
will-change: unset !important;
}
}
@supports (color: var(--no-backdrop-filter-when-menu-shown)) {
html.tabview-normal-player tp-yt-iron-dropdown.ytd-popup-container ytd-menu-popup-renderer {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@supports (color: var(--deferred-duplicated-meta-checker)) {
/* @keyframes deferredDuplicatedMetaChecker */
}
@supports (color: var(--tabview-controller)){
tabview-controller {
display: block;
position: fixed;
width: 1px;
height: 1px;
left: -10px;
top: -10px;
contain: strict;
visibility: collapse;
pointer-events: none !important;
user-select: none !important;
touch-action: none !important;
margin:0;
padding:0;
z-index: -1;
box-sizing: border-box;
}
}
@supports (color: var(--fix-native-bug-no-pre-wrap-for-video-info)){
/* see https://www.youtube.com/watch?v=qHtz9s3UXsM */
.yt-core-attributed-string.yt-core-attributed-string--white-space-pre-wrap span.yt-core-attributed-string--highlight-text-decorator > a.yt-core-attributed-string__link.yt-core-attributed-string__link--display-type.yt-core-attributed-string__link--call-to-action-color[href]{
white-space: initial;
}
}
@supports (color: var(--fix-undefined-tooltip)){
.style-scope tp-yt-paper-tooltip:empty:not([class]) {
visibility: collapse !important;
pointer-events: none !important;
user-select: none !important;
}
}
@supports (color: var(--fix-badge-nowrap)){
ytd-badge-supported-renderer.badges.ytd-compact-video-renderer > [role="status"].badge.ytd-badge-supported-renderer{
white-space: nowrap;
}
}
@supports (color: var(--tab-info-yt-video-hyperlink-box-size)){
/* https://www.youtube.com/watch?v=3sdWD9qRdjA */
#tab-info span.yt-core-attributed-string--link-inherit-color > span.yt-core-attributed-string--highlight-text-decorator{
display: inline-block;
}
}
@supports (color: var(--fix-tooltip-left-for-into)) {
.tyt-force-left-0 {
left: auto !important;
}
}
@supports (color: var(--message-for-tabview-no-old-secondary-data)){
tabview-no-old-secondary-data {
display: none;
position: fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
min-width: 600px;
min-height: 300px;
font-size: 16pt;
background: var(--yt-spec-base-background);
color: var(--yt-spec-text-primary);
padding: 24px;
box-sizing: border-box;
z-index: 99999;
cursor: default;
border: 6px solid var(--yt-spec-text-secondary);
}
tabview-no-old-secondary-data:before,
tabview-no-old-secondary-data:lang(en):before {
content: "Tabview Youtube requires \"kevlar_watch_metadata_refresh_no_old_secondary_data = false\". You can install \"YouTube EXPERIMENT_FLAGS Tamer\" to make sure it is disabled.";
}
tabview-no-old-secondary-data:lang(ja):before {
content: "Tabview YouTube は \"kevlar_watch_metadata_refresh_no_old_secondary_data = false\" が必要です。それを無効にするために \"YouTube EXPERIMENT_FLAGS Tamer\" をインストールしてください。";
}
tabview-no-old-secondary-data:lang(zh-Hant):before, tabview-no-old-secondary-data:lang(zh-Hans):before {
content: "Tabview YouTube 需要 \"kevlar_watch_metadata_refresh_no_old_secondary_data = false\"。您可以安裝 \"YouTube EXPERIMENT_FLAGS Tamer\" 以確保它被禁用。";
}
[tabview-no-old-secondary-data] ytd-watch-flexy[tyt-tab="#tab-info"] tabview-no-old-secondary-data {
display: block;
}
}
@supports (color: var(--channel-page-css)){
tp-yt-paper-dialog > ytd-engagement-panel-section-list-renderer:only-child {
/* override tp-yt-paper-dialog > *:last-child */
/* override tp-yt-paper-dialog > *:first-child */
margin-top: 0;
margin-bottom: 0;
}
}
@supports (color: var(--meta-styling-Dec-2023)){
#tab-info .yt-video-attribute-view-model--image-large .yt-video-attribute-view-model__hero-section {
max-width: 128px;
max-height: 128px;
}
#tab-info .yt-video-attribute-view-model--image-large .yt-video-attribute-view-model__hero-section .yt-spec-button-shape-next--size-s.yt-spec-button-shape-next--icon-button{
transform: scale(0.88);
transform-origin: top right;
}
#tab-info yt-horizontal-list-renderer.style-scope.ytd-reel-shelf-renderer {
/*--ytd-thumbnail-height: 30px;*/
--ytd-reel-item-compact-layout-width: 148px;
--ytd-reel-item-width: var(--ytd-reel-item-compact-layout-width,210px);
}
#tab-info .yt-video-attribute-view-model button.yt-spec-button-shape-next.yt-spec-button-shape-next--text.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--size-s.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--override-small-size-icon {
background-color: var(--yt-spec-static-overlay-background-light);
visibility: collapse;
/* outline: 1px solid var(--yt-spec-static-overlay-background-medium); */
}
#tab-info .yt-video-attribute-view-model:hover button.yt-spec-button-shape-next.yt-spec-button-shape-next--text.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--size-s.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--override-small-size-icon {
background-color: var(--yt-spec-static-overlay-background-medium-light);
visibility: visible;
/* outline: 1px solid var(--yt-spec-static-overlay-background-medium); */
}
}
@supports (color: var(--meta-title-20240218)){
/* example: https://www.youtube.com/watch?v=gt-v_YCkaMY */
body #title.ytd-metadata-row-renderer {
min-width: 110px;
width: auto;
max-width: 40%;
}
}
@supports (color: var(--fix-horizontal-card-scroller-in-tab-info)){
/* example: https://www.youtube.com/watch?v=f8tIZpZ3hG0 */
#tab-info #left-arrow-container.arrow-container.style-scope.ytd-horizontal-card-list-renderer[hidden] + #scroll-container.ytd-horizontal-card-list-renderer {
overflow: auto;
}
#tab-info #left-arrow-container.arrow-container.style-scope.ytd-horizontal-card-list-renderer[hidden] + #scroll-container.ytd-horizontal-card-list-renderer > #items[class]:only-child {
display: flex;
flex-direction: row;
}
#tab-info #left-arrow-container.arrow-container.style-scope.ytd-horizontal-card-list-renderer[hidden] ~ #right-arrow-container {
display: none !important;
}
}
/*# sourceURL=debug://tabview-youtube/tabview.content.css */