/* ==UserStyle==
@name YouTube Live Borderless
@version 0.1.24
@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 (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
@var checkbox chat-fill-single-col-exp "Fill up the chat area in single column view (experimental)" 0
==/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;
}
}
} 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;
}
if no-masthead {
.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;
}
}
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]){
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()
