/* ==UserStyle== @name YouTube Live Borderless @version 0.1.20 @namespace github.com/cyfung1031 @license MIT @description Make YouTube Live Borderless @author CY Fung @supportURL https://github.com/cyfung1031/YouTube-Live-Borderless/ @preprocessor stylus @var checkbox apply-to-live-chat-only "Apply to Live Chat Only" 1 @var checkbox no-masthead "Hide Top Masthead Bar" 0 @var range masthead-hoverable-height "Invisible MastHead Bar Height" [0, 0, 12, 2, "px"] @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" [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 @var checkbox chat-fill-single-col-exp "Fill up the chat area in single column view (experimental)" 0 @downloadURL none ==/UserStyle== */ /* @var range chrome-bottom-bar-margin "Chrome Bottom Bar Margin" [12, 6, 48, 6, "px"] */ chrome-bottom-bar-margin = 12px @-moz-document url-prefix("https://www.youtube.com/watch?v=") contentf(){ &: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 { &, 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; } } } 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; } .html5-video-container > video[style*="top:"]:not(video[style*="top: -"]):not(video[style*="top:-"]) { top: 0 !important; } .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; max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 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]){ 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 chat-fill-single-col-exp { &:has(#below > #chat:not([collapsed])):not([tabview-loaded]) { #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; } } } if apply-to-live-chat-only html:has(iframe#chatframe) contentf() else html contentf()