/* ==UserStyle== @name YouTube Live Borderless @version 0.2.4 @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) @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 select mode-for-two-col "Mode for Two Columns" { "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 for Single Column" { "YouTube Mobile (Recommended)": "mobile", "Normal": "normal", "Disabled": "disabled" } @var checkbox no-masthead "Hide Top Masthead Bar" 0 @var number masthead-hoverable-h "MastHead Hoverable (1 = always hide)" [4, 1, 8, 1] @var range primary-content-margin "Primary Content Margin" [24, 6, 48, 6, "px"] @var checkbox no-bottom-row "Hide Primary MetaInfo Bottom Row" 0 @var range video-title-size "Video Title Size" [2.0, 1.0, 3.0, 0.2, "rem"] @var range min-below-area "Minimum area below video (experimental)" [0, 0, 160, 10, 'px'] @var number side-panel-width "Side Panel Width" [440, 320, 640, 20, "px"] @var checkbox no-round-border "No Round Border" 1 @var checkbox disable-cinematics "Disable Cinematics Effect" 0 @downloadURL none ==/UserStyle== */ /* "Fill up Chat Area (experimental)": "chat-fill-up", @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 } */ @-moz-document url-prefix("https://www.youtube.com/watch?v=") { dummy() { // dummy border: 0; } 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=0 // if mode-for-single-col=="mobile" { single-col-mobile=1 // if no-masthead==0 { no-masthead-w=2 // } } // contentNoMasthead() { &, ytd-app, ytd-page-manager[class].style-scope, ytd-watch-flexy[class].style-scope { /* 0px not 0 */ --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 { #masthead-container:hover { --masthead-opacity: 1; } #masthead-container:hover > ytd-masthead { transform: translateY(0%); } #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; #player-theater-container.ytd-watch-flexy { flex: 77; max-height: unset; } #player-theater-container.ytd-watch-flexy ~ #columns.style-scope.ytd-watch-flexy { overflow: visible; } } ytd-watch-flexy.style-scope:not([fullscreen]) { #movie_player .html5-video-container > video[style*="top:"]:not(video[style*="top: -"]):not(video[style*="top:-"]) { top: 0 !important; } } } // contentf() { if single-col-mobile { &:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen])) { &:has(#chat:not([collapsed])) { #primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy, #below.ytd-watch-flexy > #related.ytd-watch-flexy, #below.ytd-watch-flexy > ytd-watch-metadata.ytd-watch-flexy { display:none !important; } #secondary.ytd-watch-flexy { display: none !important; } #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; } .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; } #columns, #primary { padding: 0; } #player, #player-theater-container, #player-container-outer, #player-container-inner, #player-container, #movie_player, #movie_player video { object-fit: contain; max-height: calc(100vh - 400px) !important; } #primary-inner.ytd-watch-flexy > :not(.style-scope) { display: none !important; } #below > *:not(#chat) { display: none !important; } #below:not(:has(#chat)) { display: none; } 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; } #below { flex: 1; } ytd-watch-flexy { height: 100vh !important; max-height: 100vh !important; } ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy, ytd-watch-flexy[fullscreen] #player-theater-container.ytd-watch-flexy { min-height: unset !important; } } } } &:not([tabview-loaded]) { #primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy, #secondary-inner.ytd-watch-flexy > #related.ytd-watch-flexy { display: none !important; } #player-theater-container { max-height: calc(100vh - 100px) !important; } #cinematics { // contain: layout; contain: layout size style; user-select: none; touch-action: none; pointer-events: none; } } if no-masthead-w==2 { &:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen])) { contentNoMasthead() } } else if no-masthead-w==1 { contentNoMasthead() } else { ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) { #secondary.style-scope.ytd-watch-flexy, #secondary-inner.style-scope.ytd-watch-flexy { height: calc(100vh - var(--ytd-toolbar-height)); max-height: 100%; } } } 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: calc(var(--font-size) * 1.4); } & { --ylb-min-below-area: min-below-area; } 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); } #secondary-inner.style-scope.ytd-watch-flexy { display: flex; flex-direction: column; height: 100%; } #movie_player { position: relative; > .html5-video-container:has(video) { top: 0; bottom: 0; left: 0; right: 0; position: absolute; } .ytp-chrome-bottom[style*="width"] { width: unset !important; left: chrome-bottom-bar-margin !important; right: chrome-bottom-bar-margin !important; } .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; } .ytp-iv-video-content { width: 100% !important; height: 100% !important; } .ytp-chapter-hover-container[style*="width"] { width: 100% !important; } } #chat:not([collapsed]) { flex: 77; } #right-tabs { display: flex; margin: 0 !important; flex: 1; flex-direction: column; #material-tabs, .tab-content { outline: 0; } .tab-content { flex: 77; } } &[is-two-columns_] #primary-inner > *:not(#player) { padding: 0 primary-content-margin 0; } &:not([is-two-columns_]) #primary-inner > *:not(#player) { padding: 0; } &:not([is-two-columns_]) #primary-inner #below > *:not(ytd-live-chat-frame#chat) { padding: 0 primary-content-margin 0; } h1.style-scope.ytd-watch-metadata { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; } #player-container-outer.ytd-watch-flexy { max-width: unset; } } ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) { ytd-live-chat-frame#chat:not([collapsed]) { min-height: unset; } } if min-below-area > 0 { ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) { #player #player-container-outer.ytd-watch-flexy, // layout outside #player #player-container-inner.ytd-watch-flexy, // no effect #player #player-container.ytd-watch-flexy { // layout inside max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); } } ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) { #player-theater-container.ytd-watch-flexy { max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); } } } else { ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) { #player #player-container-outer.ytd-watch-flexy, #player #player-container-inner.ytd-watch-flexy, #player #player-container.ytd-watch-flexy { max-height: calc(100vh - var(--ytd-toolbar-height, 0px)); // for very wide screen } } ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) { #player-theater-container.ytd-watch-flexy { max-height: calc(100vh - var(--ytd-toolbar-height, 0px)); // for 4:3 video } } } body.lock-scrollbar[style*="overflow"][style*="hidden"]:has(ytd-watch-flexy[is-two-columns_] #columns.ytd-watch-flexy #primary-inner.ytd-watch-flexy #player #movie_player video[src]) { // note: might not be supported by FireFox due to its bug overflow-y: unset !important; } ytd-watch-flexy.style-scope[is-two-columns_] #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy { width: side-panel-width; } 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 mode-for-single-col=="chat-fill-up" { &:has(#below > #chat:not([collapsed])):not([tabview-loaded]) { // note: might not be supported by FireFox due to its bug #primary-inner.style-scope.ytd-watch-flexy { max-height: 100vh; display: flex; flex-direction: column; } #below.style-scope.ytd-watch-flexy { flex-shrink: 1; overflow: auto; position: relative; padding-top: 100%; } #below.style-scope.ytd-watch-flexy > #chat.style-scope.ytd-watch-flexy:not([collapsed]) { margin: 0; min-height: unset; height: auto; position: absolute; top: 0; bottom: 0; right: 0; left: 0; top: 0; } } } if disable-cinematics { #cinematics.ytd-watch-flexy { display: none; } } } // contentg() { if mode-for-single-col=="disabled" { &:has(ytd-watch-flexy[is-two-columns_]){ contentf() } } else { contentf() } } if mode-for-two-col == "expanded-panel" { html:has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe), /* html:has(ytd-engagement-panel-section-list-renderer[visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden])), html:has(.tab-content-cld:not(.tab-content-hidden)), */ html[tabview-loaded]:has(ytd-watch-flexy[is-two-columns_]:not([fullscreen]):not([theater])) { contentg() // } } else if mode-for-two-col == "expanded-live" { html:has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe) { contentg() // } } else if mode-for-two-col == "expandable-live" { html:has(ytd-live-chat-frame#chat):has(iframe#chatframe) { contentg() // } } else if mode-for-two-col == "always" { html { // contentg() // } } }