Make YouTube Live Borderless
/* ==UserStyle==
@name YouTube Live Borderless
@version 0.5.30
@namespace github.com/cyfung1031
@license MIT
@description Make YouTube Live Borderless
@author CY Fung
@supportURL https://github.com/cyfung1031/YouTube-Live-Borderless/
@compatible edge Edge [Blink] >= 105; Stylus (Beta)
@compatible chrome Chrome >= 105; Stylus (Beta); Chrome 101-104 requires "enable-experimental-web-platform-features"
@compatible firefox FireFox >= 103; Stylus; layout.css.has-selector.enabled = true; note: some features might not be very stable!!
@compatible opera Opera >= 91; Stylus (Beta)
@compatible safari Safari >= 15.4; Stylus
@preprocessor stylus
@var checkbox youtube-wpr "YouTube WPR" 0
@var select mode-for-two-col "Mode ##TwoColumns" {
"Expanded Panel Only #Recommended": "expanded-panel",
"Expanded Live Chat Only": "expanded-live",
"Expandable Live Chat Only": "expandable-live",
"Always": "always"
}
@var select mode-for-single-col "Mode ##SingleColumn" {
"YT Mobile #Recommended": "mobile",
"Normal": "normal",
"Disabled": "disabled"
}
@var checkbox no-masthead "Top.MastheadBar ::Hide" 0
@var range masthead-hoverable-height "Top.MastheadBar ::Hoverable" [12, 0, 36, 2, 'px']
@var range masthead-hoverable-delay-in "Top.MastheadBar ::Hoverable.DelayIn" [300, 0, 800, 100, 'ms']
@var checkbox disable-cinematics "CinematicsEffect ::Disable" 0
@var range video-enlarging "Video.Enlarging >>>Video.Border.Fine.Tune" [0, 0, 8, 2]
@var range video-padding-left-right "Video.Padding.LeftRight (Experimental)" [0, 0, 18, 2, 'px']
@var range video-padding-top-bottom "Video.Padding.TopBottom (Experimental)" [0, 0, 18, 2, 'px']
@var range primary-content-margin "PrimaryContent ::Margin" [24, 6, 48, 6, "px"]
@var range video-title-size "VideoTitle ::Size" [2.0, 1.0, 3.0, 0.2, "rem"]
@var checkbox no-bottom-row "Bottom.PrimaryMetaInfoRow ::Hide" 0
@var range min-below-area "BelowArea ::Minimum" [120, 0, 240, 10, 'px']
@var range min-below-area-for-theater "WideTheater.BelowArea ::Minimum" [120, 0, 240, 10, 'px']
@var number side-panel-width "SidePanel ::Width" [440, 320, 640, 20, "px"]
@var checkbox no-round-border "RoundBorder ::Disable" 1
@var number chat-zoom-for-right-col "RightCol.Chat ::Zoom" [1.0, 0.4, 1.2, 0.05]
@var range chat-btn-height "RightCol.Chat ::SpaceAbove@Zoom" [36, 0, 60, 4, 'px']
@var number chat-zoom-for-mobile "YTMobile.Chat ::Zoom" [1.0, 0.4, 1.2, 0.05]
@var range chat-min-height "YTMobile.Chat ::Min.Height" [400, 20, 900, 10, 'px']
@var checkbox unlimit-player-max-width "Unlimit Player Max Width" 1
@var checkbox fix-player-height-overflow "Fix Player Height Overflow" 1
@var checkbox video-no-round-angle "Video No Round Angle" 0
@var checkbox compatible-ytlstm "Compatible with ytlstm-theater-mode" 0
@var checkbox fix-for-ytlc "Fix for YouTubeLiveClock" 0
@var checkbox show-comments-region "Show Comments (without Tabview Youtube)" 0
==/UserStyle== */
/*
@var range chrome-bottom-bar-margin "Chrome Bottom Bar Margin" [12, 6, 48, 6, "px"]
Chrome Bottom Bar Margin is 12px only due to
MU = function(a) {
var b = a.u.ag()
, c = a.G.getVideoData().D
, d = 0;
a.u.ag() && a.u.Me() && (d = (a.G.fb().getPlayerSize().width - a.G.getVideoContentRect().width) / 2);
return 12 * (c ? 0 : b ? 2 : 1) + d
}
*/
// d
@-moz-document url-prefix("https://www.youtube.com/watch?v=") {
dummy() {
// dummy
border: 0;
}
buildL4(type, args...) {
st1 = join('', ':', type, '(', join('\, ', args), ')')
selector(st1)
}
/*
if min-below-area <= 10px {
min-below-area = 0px
}
if min-below-area-for-theater <= 10px {
min-below-area-for-theater = 0px
}
*/
chat-btn-height = chat-btn-height + 1px
if chat-btn-height == 0px + 1px {
chat-btn-height = 0px
}
// masthead-hoverable-height = (masthead-hoverable-h - 1) * 2px
no-masthead-w = no-masthead //
chrome-bottom-bar-margin = 12px // this cannot be changed
single-col-mobile = (mode-for-single-col == "mobile" ? 1 : 0) //
if single-col-mobile == 1 and no-masthead-w == 0 {
no-masthead-w = 2 //
}
chat-zoom-for-mobile-enable = ((chat-zoom-for-mobile < 1) or (chat-zoom-for-mobile > 1))
contentBase() {
html {
--ylb-min-below-area: min-below-area;
}
#microformat.ytd-watch-flexy {
position: fixed;
top:-200vh;
left:-200vw;
}
if fix-player-height-overflow { // 縦配信
html:not([tabview-loaded]) {
--yt-fix-player-contain: layout;
}
.efyt-mini-player {
--yt-fix-player-contain: initial;
}
#player > #player-container-outer.style-scope.ytd-watch-flexy {
contain: var(--yt-fix-player-contain);
}
}
if fix-for-ytlc {
@supports (color: var(--compatibile-with-chrome-plugin-youtube-live-clock-20221107)) {
/* 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;
}
html:has(style#ytlctn-style-for-native-control) #columns {
overflow: revert;
}
}
@supports (color: var(--compatibile-with-chrome-plugin-youtube-live-clock-20240123)) {
/* 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) #columns {
overflow: revert;
}
}
}
ytd-watch-flexy[flexy] #player-container-outer.ytd-watch-flexy,
ytd-watch-flexy[flexy] #player-container-inner.ytd-watch-flexy {
pointer-events: none;
}
ytd-watch-flexy[flexy] #player-container.ytd-watch-flexy,
ytd-watch-flexy[flexy] #ytd-player.ytd-watch-flexy {
pointer-events: initial;
}
// general fix
ytd-watch-flexy[theater] .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
min-height: unset;
}
#movie_player .ytp-cued-thumbnail-overlay-image {
/* background-size: contain !important; */
background-size: auto 100% !important;
}
ytd-watch-flexy:not([is-two-columns_]) ytd-watch-metadata {
padding-top: var(--ytd-margin-3x);
}
ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]) #primary.ytd-watch-flexy {
padding-top: 0;
margin-top: 0;
}
m = youtube-wpr ? ':not([tabview-loaded])[youtube-wpr*="h2"]' : ':not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)'
selector-comments-1 = show-comments-region ? '#primary-inner.ytd-watch-flexy ytd-commentsx#commentsx.ytd-watch-flexy' : '#primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy'
html{selector(m)} {buildL4('is',
selector-comments-1,
'#secondary-inner.ytd-watch-flexy > #related.ytd-watch-flexy')} {
display: none !important;
}
html:not([tabview-loaded]) #cinematics {
// contain: layout;
contain: layout size style;
user-select: none;
touch-action: none;
pointer-events: none;
}
if video-no-round-angle {
ytd-watch-flexy[rounded-player-large][default-layout] #ytd-player.ytd-watch-flexy.ytd-watch-flexy {
border-radius: 0;
}
}
}
//
contentNoMasthead() {
// root = html
& {
/* 0px not 0 */
--ytd-masthead-height: 0px;
--ytd-toolbar-height: 0px;
--ytd-watch-flexy-masthead-height: 0px;
}
ytd-app[style] { /* YouTube set the masthead-height in style */
--ytd-masthead-height: 0px !important;
--ytd-toolbar-height: 0px !important;
--ytd-watch-flexy-masthead-height: 0px !important;
}
& .style-scope{buildL4('is', '#page-manager', 'ytd-watch-flexy', 'ytd-page-manager')} {
--ytd-masthead-height: 0px;
--ytd-toolbar-height: 0px;
--ytd-watch-flexy-masthead-height: 0px;
}
#masthead-container {
height: 0;
--masthead-opacity: 0;
opacity: var(--masthead-opacity) !important;
transition: opacity 300ms;
min-height: masthead-hoverable-height;
contain: layout size style;
}
#masthead-container > ytd-masthead {
transform: translateY(-100%);
transition: transform 300ms;
}
if masthead-hoverable-height > 0 {
ytd-app {
--ut-masthead-background: rgba(15,15,15,0.8);
}
ytd-app[darker-dark-theme] {
--ut-masthead-background: rgba(240,240,240,0.8);
}
ytd-masthead#masthead:hover {
background-color: color(--ut-masthead-background);
z-index: 9999 !important;
}
ytd-masthead#masthead {
background-color: rgba(15,15,15,0.8);
z-index: 9999 !important;
}
#masthead-container:hover {
--masthead-opacity: 1;
}
#masthead-container:hover > ytd-masthead {
transform: translateY(0%);
transition-delay: masthead-hoverable-delay-in;
}
#masthead-container::after {
content: '';
display: flex;
width: 100%;
height: masthead-hoverable-height;
top: 0;
z-index: 77;
cursor: default;
user-select: none !important;
touch-action: none !important;
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]):not([theater]) {
#columns.style-scope.ytd-watch-flexy,
#primary.style-scope.ytd-watch-flexy,
#primary-inner.style-scope.ytd-watch-flexy,
#secondary.style-scope.ytd-watch-flexy,
#secondary-inner.style-scope.ytd-watch-flexy {
height: 100vh;
max-height: 100%;
}
}
ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
height: 100vh;
.ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
flex: 77;
max-height: unset;
}
}
&:not([tabview-loaded]) ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
.ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} ~ #columns.style-scope.ytd-watch-flexy {
overflow: visible;
}
}
} //
contentSingleColMobile() {
// html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))
if no-masthead-w>=1 {
if youtube-wpr {
&[youtube-wpr*="h2"] ytd-watch-flexy:not([theater]):not([fullscreen]):not([no-top-margin]):not([reduced-top-margin]) .ytd-watch-flexy{buildL4('is', '#primary', '#secondary')} {
padding-top: 0px;
}
&[youtube-wpr*="h2"] ytd-watch-flexy[tyt-tab^="#tab-"]:not([is-two-columns_]) #primary-inner.ytd-watch-flexy {
padding-bottom: 0px;
}
} else {
&:has(#chat:not([collapsed])) ytd-watch-flexy:not([theater]):not([fullscreen]):not([no-top-margin]):not([reduced-top-margin]) .ytd-watch-flexy{buildL4('is', '#primary', '#secondary')} {
padding-top: 0px;
}
&:has(#chat:not([collapsed])) ytd-watch-flexy[tyt-tab^="#tab-"]:not([is-two-columns_]) #primary-inner.ytd-watch-flexy {
padding-bottom: 0px;
}
}
}
#chat:not([collapsed]) {
--ytd-margin-2x: 0;
--ytd-margin-4x: 0;
--ytd-margin-6x: 0;
--ytd-margin-8x: 0;
height: 100% !important;
min-height: unset !important;
max-height: 100vh !important;
// position:relative;
// top:auto;
// bottom:0;
iframe#chatframe{
min-height: 0px;
}
if chat-zoom-for-mobile-enable {
iframe-transform = 'scale(%s)' % chat-zoom-for-mobile
iframe-ratio = 100% / chat-zoom-for-mobile
iframe#chatframe {
position:absolute;
transform: iframe-transform;
height: s('calc((100% - %s) / %s) !important', chat-btn-height, chat-zoom-for-mobile);
max-height: unset !important;
min-height: unset !important;
transform-origin: 0 0;
width: iframe-ratio !important;
margin-top: chat-btn-height;
}
}
}
m = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
selector-comments-2 = show-comments-region ? '#primary-inner.ytd-watch-flexy ytd-commentsx#commentsx.ytd-watch-flexy' : '#primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy'
&{selector(m)} {
// html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen])):has(#chat:not([collapsed]))
--ylb-min-below-area: chat-min-height;
#contentContainer.tp-yt-app-drawer[swipe-open].tp-yt-app-drawer::after {
content: unset;
}
{selector-comments-2},
#below.ytd-watch-flexy > .ytd-watch-flexy{buildL4('is', '#related', 'ytd-watch-metadata')} {
/* display:none !important; */
position: fixed !important;
transform: scale(0.01) !important;
transform-origin: 0 0 !important;
left: -100vw !important;
top: -100vh !important;
visibility: collaspe !important;
pointer-events: none !important;
user-select: none !important;
touch-action: none !important;
}
#secondary.ytd-watch-flexy {
display:none !important;
}
.efyt-control-bar {
position: relative;
display: inline-flex;
top: auto;
left: auto;
z-index: 99999;
opacity: 0.8;
transform: translate(calc(-100% + 32px), 0) !important;
}
.efyt-control-bar:hover {
opacity: 1.0;
background: var(--yt-spec-general-background-a);
transform: translate(0px, 0) !important;
}
#player {
margin-bottom: 0;
}
{buildL4('is', '#columns', '#primary')} {
padding: 0;
}
{buildL4('is', '#player', '#player-theater-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} {
object-fit: contain;
max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
}
#primary-inner.ytd-watch-flexy > :not(.style-scope) {
display: none !important;
}
#below {
display: flex;
flex-direction: column;
flex: 1;
}
#below > *:not([id|="chat"]) {
position: fixed !important;
transform: scale(0.01) !important;
transform-origin: 0 0 !important;
left: -100vw !important;
top: -100vh !important;
visibility: collaspe !important;
pointer-events: none !important;
user-select: none !important;
touch-action: none !important;
}
#below ~ [id|="chat"],
#primary-inner.ytd-watch-flexy ~ [id|="chat"],
#primary.ytd-watch-flexy ~ [id|="chat"] {
flex: 1;
}
#below:not(:has(#chat)) {
display: none;
}
{buildL4('is', 'ytd-watch-flexy', '#columns.ytd-watch-flexy', '#primary.ytd-watch-flexy', '#primary-inner.ytd-watch-flexy')} {
display: flex;
flex-direction: column;
margin: 0;
flex: 1;
}
ytd-watch-flexy {
height: 100vh !important;
max-height: 100vh !important;
}
ytd-watch-flexy{buildL4('is', '[theater]', '[fullscreen]')} .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
min-height: unset !important;
}
}
}
content2cHTML() {
// html
body.lock-scrollbar {
overflow-y: auto;
}
}
content2cMAIN() {
// body or html
if chat-zoom-for-right-col > 1 or chat-zoom-for-right-col < 1 {
ytd-watch-flexy[is-two-columns_]:not([fullscreen]) iframe#chatframe {
position:absolute;
margin-top:chat-btn-height;
transform: 'scale(%s)' % chat-zoom-for-right-col;
transform-origin: 0 0;
width: '%s !important' % (100% / chat-zoom-for-right-col);
max-width: unset !important;
height: s('calc( (100% - %s) / %s ) !important', chat-btn-height, chat-zoom-for-right-col);
z-index: 1; /* for normal youtube */
}
}
if no-masthead-w==0 {
ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) {
.style-scope.ytd-watch-flexy{buildL4('is', '#secondary', '#secondary-inner')} {
height: calc(100vh - var(--ytd-toolbar-height));
max-height: 100%;
}
}
}
ytd-watch-flexy[is-two-columns_]:not([fullscreen]) #movie_player {
.ytp-chrome-bottom[style*="width"] {
width: unset !important;
left: chrome-bottom-bar-margin !important;
right: chrome-bottom-bar-margin !important;
}
}
ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) ytd-live-chat-frame#chat:not([collapsed]) {
min-height: unset;
}
ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]) #primary-inner.ytd-watch-flexy > *:not(#player) {
padding: 0 primary-content-margin 0;
}
ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) #player .ytd-watch-flexy{buildL4('is', '#player-container-outer', '#player-container-inner', '#player-container')}{
// layout outside
// no effect
// layout inside
max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for very wide screen
}
ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for 4:3 video
}
ytd-watch-flexy.style-scope[is-two-columns_] #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy {
width: side-panel-width;
}
}
contentfHTML(){
// html
body ytd-watch-flexy[flexy] #player-container-outer.ytd-watch-flexy {
max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
}
&:not([tabview-loaded]) {
body ytd-watch-flexy[flexy][is-two-columns_]{buildL4('is', '[is-extra-wide-video_]', '[is-four-three-to-sixteen-nine-video_]')} #primary.ytd-watch-flexy {
max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
}
}
chat-selector = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
&{selector(chat-selector)} {
ytd-watch-flexy.style-scope:not([fullscreen]) {
.style-scope{buildL4('is', '#chat', '#chat-container')}{
flex: 77;
}
}
}
}
contentfMAIN() {
// body or html
if (video-padding-left-right + video-padding-top-bottom) > 0 {
#player-container-outer.ytd-watch-flexy {
padding-left: video-padding-left-right;
padding-right: video-padding-left-right;
padding-top: video-padding-top-bottom;
padding-bottom: video-padding-top-bottom;
}
}
&:not([tabview-loaded]) {
ytd-watch-flexy:not([fullscreen]) .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
}
ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) {buildL4('is', '#columns', '#primary', '#primary-inner', '#secondary', '#secondary-inner')} {
height: calc(100vh - var(--ytd-toolbar-height));
}
}
if video-enlarging > 0 {
ytd-watch-flexy:not([theater]):not([fullscreen]) #movie_player video[src] {
transform: 'scale(%s)' % (video-enlarging / 1000 + 1) ;
transform-origin: 50% 50%;
}
}
ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) {
--ylb-min-below-area: min-below-area-for-theater;
{buildL4('is', '#player', '#player-theater-container', '#player-wide-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} {
object-fit: contain;
max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
}
}
if no-bottom-row {
#bottom-row.ytd-watch-metadata {
display: none !important;
}
}
h1.ytd-watch-metadata {
font-size: video-title-size;
--font-size: video-title-size;
line-height: 140%;
margin-bottom: -2px;
}
chat-selector = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
#secondary-inner.ytd-watch-flexy {
--tabview-slider-right: 0px !important;
}
ytd-watch-flexy.style-scope:not([fullscreen]) {
& {
--ytd-margin-2y: var(--ytd-margin-2x);
--ytd-margin-4y: var(--ytd-margin-4x);
--ytd-margin-6y: var(--ytd-margin-6x);
--ytd-margin-8y: var(--ytd-margin-8x);
}
#columns.style-scope.ytd-watch-flexy {
--ytd-margin-2x: 0;
--ytd-margin-4x: 0;
--ytd-margin-6x: 0;
--ytd-margin-8x: 0;
}
.style-scope.ytd-watch-flexy > :not(.ytd-watch-flexy),
#below,
#player {
--ytd-margin-2x: var(--ytd-margin-2y);
--ytd-margin-4x: var(--ytd-margin-4y);
--ytd-margin-6x: var(--ytd-margin-6y);
--ytd-margin-8x: var(--ytd-margin-8y);
}
if unlimit-player-max-width {
html body ytd-watch-flexy.style-scope[class][flexy]:not([attr1][attr2]) #columns.ytd-watch-flexy.style-scope[class] {
max-width: initial;
}
#columns {
--ytd-watch-flexy-max-player-width: initial;
}
}
#secondary-inner.style-scope.ytd-watch-flexy {
display: flex;
flex-direction: column;
height: 100%;
}
#secondary-inner.style-scope.ytd-watch-flexy > * {
flex-shrink: 0;
}
#movie_player {
position: relative;
> .html5-video-container:has(video) {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
.html5-video-container > video {
width: unset !important;
height: 100% !important;
left: 0 !important;
right: 0 !important;
max-height: 100%;
max-width: 100%;
margin: 0 auto;
}
.html5-video-container > video[style*="top:"]:not(video[style*="top: -"]):not(video[style*="top:-"]) {
top: 0 !important;
}
}
#chat-container {
display: flex;
flex-direction: column;
}
#right-tabs {
display: flex;
margin: 0 !important;
flex: 1;
flex-direction: column;
{buildL4('is', '#material-tabs', '.tab-content')} {
outline: 0;
}
.tab-content {
flex: 77;
}
}
&:not([is-two-columns_]) #primary-inner > *:not(#player) {
padding: 0;
}
&:not([is-two-columns_]) #primary-inner #below > *:not([id|="chat"]) {
padding: 0 primary-content-margin 0;
}
}
if no-round-border {
ytd-live-chat-frame[rounded-container],
ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame,
ytd-live-chat-frame[rounded-container] iframe.ytd-live-chat-frame,
ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame button.yt-spec-button-shape-next,
ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame button.yt-spec-button-shape-next:hover {
border-radius: unset;
}
}
if disable-cinematics {
#cinematics.ytd-watch-flexy {
display: none;
}
}
} //
contentgHTML() {
// html
content2cHTML() //
selector-g = '' //
if mode-for-single-col=="disabled" { //
selector-g = youtube-wpr ? '[youtube-wpr*="s"]': ":has(ytd-watch-flexy[is-two-columns_])" //
} //
&{s(selector-g)} { //
// html
contentfHTML() //
} //
}
contentgMAIN() {
// body or html
content2cMAIN() //
selector-g = '' //
if mode-for-single-col=="disabled" { //
selector-g = youtube-wpr ? '[youtube-wpr*="s"]': ":has(ytd-watch-flexy[is-two-columns_])" //
} //
&{s(selector-g)} { //
// html
contentfMAIN() //
} //
}
contentBase() //
selectors-2col = { //
"expanded-panel": join(', ',
"html:not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)",
"html[tabview-loaded]:has(ytd-watch-flexy[is-two-columns_]:not([fullscreen]))"
),
"expanded-live": "html:has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)",
"expandable-live": "html:has(ytd-live-chat-frame#chat):has(iframe#chatframe)",
"always": "html"
} //
if youtube-wpr {
selectors-2col = { //
"expanded-panel": join(', ',
'html:not([tabview-loaded])[youtube-wpr*="h2"][youtube-wpr*="f"]',
'html[tabview-loaded][youtube-wpr*="s"][youtube-wpr*="f"]'
),
"expanded-live": 'html[youtube-wpr*="h2"][youtube-wpr*="f"]',
"expandable-live": 'html:not([youtube-wpr*="h0"])[youtube-wpr*="f"]',
"always": 'html[youtube-wpr*="f"]'
} //
}
selector-2col = selectors-2col[mode-for-two-col]
selectors-k = split(', ', selector-2col)
for selector-k in selectors-k {
{s(selector-k)} {
if no-masthead-w==1 {
contentNoMasthead()
}
if compatible-ytlstm {
contentgHTML()
body:not([data-ytlstm-theater-mode]) {
contentgMAIN() //
}
} else {
contentgHTML()
contentgMAIN() //
}
}
}
if single-col-mobile {
m = youtube-wpr ? '[youtube-wpr*="S"][youtube-wpr*="f"]': ":has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))"
html{selector(m)} {
if no-masthead-w==1 {
contentNoMasthead()
}
if no-masthead-w==2 {
if youtube-wpr {
&[youtube-wpr*="h2"] {
contentNoMasthead()
}
} else {
&:has(#chat:not([collapsed])) {
contentNoMasthead()
}
}
}
contentSingleColMobile()
}
}
@css {
@supports not selector(:has(body)) {
html::after {
display: block;
content: 'Your browser does not support "has-selector". Please update to latest version and enable it via configuration.';
width: 60vh;
padding: 12px;
height: auto;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 0 0;
background: #71210f;
color: #d2dadb;
font-size: 14pt;
text-shadow: 1px 1px 2px #605262;
}
}
}
if youtube-wpr {
@css {
@supports selector(:has(body)) {
@keyframes wpr-message-appear {
0% {
top: -300vh;
}
1% {
top: 50%;
}
100% {
top: 50%;
}
}
html:not([youtube-wpr]) ytd-watch-flexy::after {
display: block;
content: 'YouTube Live Borderless: YouTube WPR is not yet installed. Please install the userscript https://greasyfork.org/scripts/457319 in order to use YouTube WPR';
width: 60vh;
padding: 12px;
height: auto;
position: fixed;
left: 50%;
top: -300vh;
transform: translate(-50%, -50%);
transform-origin: 0 0;
background: #71210f;
color: #d2dadb;
font-size: 14pt;
text-shadow: 1px 1px 2px #605262;
animation: wpr-message-appear 1ms 2s forwards;
z-index: 9999;
}
}
}
}
}