Youtube WideScreen (New Design Polymer)

For a Wide Screen and the YouTube New Design

当前为 2020-08-24 提交的版本,查看 最新版本

/* ==UserStyle==
@name        Youtube WideScreen (New Design Polymer)
@namespace   youtube.com
@version      1.0.2
@author      decembre
@description For a Wide Screen and the YouTube New Design
@license     unlicense
==/UserStyle== */

@-moz-document domain("youtube.com") {


/* ==== Youtube WideScreen (New Design Polymer) v.1 === */
/* SUPP ADS */
#offer-module {
    display: none !important;
}

/* FIXED POSITION - ALL */
html{
    overflow: auto !important;
}
ytd-app[is-watch-page=""] ,
ytd-app[is-watch-page=""] app-drawer  {
    height: 1049px !important;
    overflow: hidden !important;
}
ytd-app[is-watch-page=""] app-drawer.ytd-app#guide ~ #page-manager.ytd-app[class="style-scope ytd-app"] {
  position: fixed ;
  display: flex;
    width: 59.5% ;
    height: 100% ;
    height: 874px !important;
  --ytd-toolbar-offset:  var(--ytd-masthead-height, var(--ytd-toolbar-height));
  margin-top:  var(--ytd-masthead-height, var(--ytd-toolbar-height));
  overflow-x: hidden;
  overflow-y: hidden;
/* border: 1px solid yellow !important; */
}
/* FULL SCREEN */
.no-scroll>ytd-app[style*="--ytd-app-fullerscreen-scrollbar-width:12px;"] #page-manager.ytd-app  {
  position: fixed ;
  display: flex;
    width: 100% !important;
    height: 100% !important;
z-index: 500000000 !important;
}





/* LEFT COLUMN - === */
#items.ytd-watch-next-secondary-results-renderer {
    position: fixed;
    display: inline-block;
    width: 39.5% ;
    height: 69vh ;
    top: 85px ;
    left: 60% !important;
    padding-top: 195px;
    overflow: hidden;
    overflow-y: auto;
border-bottom: 1px solid blue;
border-right: 5px solid red;
border-left: 5px solid red;
background-color: #333 ;
}
/* TO RIGHT PANEL */
 #related #items ytd-compact-autoplay-renderer ,
ytd-compact-autoplay-renderer.style-scope {
position: fixed;
/*     display: inline-block; */
/*     float: left; */
clear: none ;
width: 39%;
    height: 175px;
top: 85px !important;
    margin-bottom: 0 ;
padding: 5px !important;
    overflow: hidden !important;
    overflow-y: auto !important;
z-index: 5000000 ;
background-color: #333;
border-bottom: 5px solid gray ;
}
ytd-compact-autoplay-renderer.style-scope:hover {
position: fixed;
/*     display: inline-block; */
/*     float: left; */
clear: none ;
width: 39%;
    height: auto !important;
    max-height: 700px !important;
border-bottom: 5px solid red ;
background-color: black ;
}
/* POSITION LIST UNDER */
/* 
.style-scope.ytd-watch-next-secondary-results-renderer.suggestion-tag:first-of-type ,
#related #items ytd-compact-autoplay-renderer + ytd-compact-video-renderer {
    margin-top: 150px !important;
} */

#head + #contents ytd-compact-video-renderer {
display: inline-block !important;
    float: left;
clear: none ;
    width: 100% !important;
    max-width: 363px !important;
    min-width: 363px !important;
    height: 108px !important;
margin-right: 5px ;
background-color: black !important;
/* border: 1px solid red; */
}
/* QUEUE */
#suggestions-search {
    position: absolute;
    top: 22px ;
    left: 0 ;
}
#head.ytd-compact-autoplay-renderer {
    margin-bottom: 35px ;
}
#head + #contents ytd-compact-video-renderer {
display: inline-block !important;
    float: left;
clear: none ;
    width: 100% !important;
    max-width: 358px !important;
    min-width: 358px !important;
    height: 108px !important;
margin-right: 5px ;
background-color: black !important;
border: 1px solid yellow;
}


#items .ytd-watch-next-secondary-results-renderer:not(ytd-compact-autoplay-renderer) , 
.style-scope.ytd-watch-next-secondary-results-renderer.suggestion-tag {
display: inline-block !important;
    float: left;
clear: none ;
    width: 100% !important;
    max-width: 48.3% !important;
    min-width: 48.3% !important;
    height: 108px !important;
margin-right: 5px ;
margin-left: 5px ;
background-color: black !important;
/* border: 1px solid red; */
}




/* COMMENTS - FIXED - MOVE RIGHT */
ytd-comments {
    position: fixed;
    display: inline-block;
min-width: 38.8% !important;
max-width: 38.8% !important;
    height: 840px;
    left: 60% !important;
    top: 85px ;
padding: 0 10px ;
    overflow: hidden;
/*     overflow-y: auto; */
    z-index: 50000;
    visibility: hidden ;
/* visibility: visible ; */
/* border: 1px solid aqua ; */
background: black ;
}
ytd-comments:hover {
    visibility: visible ;
}

ytd-comments  ytd-item-section-renderer {
    margin-top: -21px ;
}
ytd-comments  ytd-item-section-renderer ytd-comments-header-renderer {
    margin-bottom: 5px ;
    margin-top: 25px ;
}
#title.ytd-comments-header-renderer {
    margin-bottom: 5px;
}
ytd-comments  #contents {
    display: inline-block;
    height: 745px;
/*     left: 60% !important; */
top: -35px ;
padding: 5px 10px ;
    overflow: hidden;
    overflow-y: auto;
/*     z-index: 50000; */
/*     visibility: hidden ; */
/* visibility: visible ; */
/* border: 1px solid green ; */
background: #333 ;
}


ytd-comments:before {
    content: "Comments" ;
    position: fixed;
    display: inline-block;
    width: 100px ;
height: 24px;
line-height: 24px;
margin-top: -27px ;
margin-left: 125px ;
/*     left: 60% !important; */
padding: 1px 5px ;
border-radius: 3px 3px 0 0 ;
border-top: 1px solid #333 ;
border-bottom: 1px solid #333 ;
border-right: 5px solid #333 ;
border-left: 5px solid #333 ;
text-align: center !important;
color: gray !important;
z-index: 5000000 !important;
visibility: visible ;
background-color: #222 ;
}
ytd-comments:hover:before {
border-bottom: 1px solid green;
border-top: 5px solid #333 ;
border-left: 5px solid #333 ;
border-right: 5px solid #333 ;
font-size: 20px !important;
text-align: center !important;
color: gold !important;
background-color: black ;
}

ytd-comments  #contents ytd-comment-thread-renderer {
    display: block;
    margin-bottom: 5px !important;
    padding: 5px ;
    border-radius: 5px ;
background-color: #222 ;
}

/* PLAYER - CONTAINER */
/* #primary.style-scope.ytd-watch-flexy ,

ytd-watch-flexy[flexy_][is-two-columns_][is-extra-wide-video_] #primary.ytd-watch-flexy, 
ytd-watch-flexy[flexy_][is-two-columns_][is-four-three-to-sixteen-nine-video_] #primary.ytd-watch-flexy , */
#columns.style-scope.ytd-watch-flexy {
  min-width: 100% !important;
  max-width: 100% !important;
    height: 874px !important;
margin-left: 0 !important;
/* border: 1px solid red !important; */
}
/* FULL SCREEN */
.no-scroll>ytd-app[style*="--ytd-app-fullerscreen-scrollbar-width:12px;"] #columns.style-scope.ytd-watch-flexy {
  display: none !important;
}



.ytp-endscreen-content {
display: inline-block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
    margin-left: -50% !important;
    margin-top: -24% !important;
}
.ytp-show-tiles .ytp-videowall-still {
/* display: inline-block !important; */
/* float: left !important; */
/*     width: 20% !important; */
/*     margin: auto !important; */
/* right: -15% !important; */
/* margin-left: 1% !important; */
transform: scale(0.6) !important;
    transform-origin: top left !important;
/* border: 1px solid red !important; */
}

#primary.style-scope.ytd-watch-flexy {
  min-width: 97% !important;
  max-width: 97% !important;
margin-left: 30% !important;
    padding: 0;
/* border: 1px solid tan !important; */
}
#player-container-inner {
/*     padding-top: 703px; */
/*     padding-top: 61%; */
padding-top: 72vh !important;
}
.ytp-cards-teaser-shown .ytp-cards-teaser .ytp-cards-teaser-text {
    max-width: 415px;
    opacity: 1;
    transition: opacity 0.165s cubic-bezier(0, 0, 0.2, 1) 0.415s;
}

.video-stream.html5-main-video {
    width: 99% !important;
}

.ytp-endscreen-content {
  position: absolute;
  left: 50%;
  top: 50%;
}
.ytp-iv-video-content {
    width: 100% !important;
}
/* CONTROL */
#player .ytp-chrome-bottom {
    width: 99% !important;
    height: 3px !important;
    left: 0 !important;
opacity: 1 !important;
}
#player:hover .ytp-chrome-bottom {
    width: 99% !important;
    height: 35px !important;
    left: 0 !important;
opacity: 1 !important;
}
.ytp-chapters-container, 
.ytp-chapter-hover-container {
    width: 100% !important;
}
#player  .ytp-progress-bar-container:not([aria-disabled="true"]) {
    height: 5px;
    margin-top: 0;
top: 0px;
opacity: 1 !important;
}

/* PLAYER INFOS */

#meta-contents  #container.ytd-video-secondary-info-renderer {
    position: fixed;
    display: inline-block;
    width: 39% ;
min-height: 190px;
    top: 85px ;
    left: 60% !important;
padding: 0 10px ;
    overflow: hidden;
/*     overflow-y: auto; */
border-bottom: 1px solid red;
border-right: 5px solid red;
border-left: 5px solid red;
border-radius: 0 0 5px 5px !important;
z-index: 5000000 !important;
visibility: hidden ;
background-color: #333 ;
}
#meta-contents  #container.ytd-video-secondary-info-renderer:hover {
visibility: visible ;
}
#top-row.ytd-video-secondary-info-renderer {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
    padding-top: 5px;
}
#meta-contents  #container.ytd-video-secondary-info-renderer:before {
    content: "Infos" ;
    position: fixed;
    display: inline-block;
    width: 100px ;
height: 24px;
line-height: 24px;
margin-top: -27px ;
margin-left: -5px ;
/*     left: 60% !important; */
padding: 1px 5px ;
border-radius: 3px 3px 0 0 ;
border-top: 1px solid #333 ;
border-bottom: 1px solid #333 ;
border-right: 5px solid #333 ;
border-left: 5px solid #333 ;
text-align: center !important;
color: gray !important;
z-index: 5000000 !important;
visibility: visible ;
background-color: #222 ;
}
#meta-contents  #container.ytd-video-secondary-info-renderer:hover:before {
border-bottom: 1px solid green;
border-top: 5px solid #333 ;
border-left: 5px solid #333 ;
border-right: 5px solid #333 ;
font-size: 20px !important;
text-align: center !important;
color: gold !important;
background-color: black ;
}
.style-scope.ytd-video-secondary-info-renderer[style="--ytd-expander-collapsed-height:60px;"] {
    display: inline-block;
    width: 100% ;
    max-width: 98%;
    height: auto !important;
    max-height: 82vh !important;
    margin-left: 0;
    padding: 5px ;
    overflow: hidden !important;
overflow-y: auto !important;
/* border-bottom: 1px solid red; */
/* border-right: 5px solid red; */
/* border-left: 5px solid red; */
border-radius: 5px ;
background-color: #222 ;
}

#vidprogress {
    display: none !important;
}

/* COLOR */
a.yt-simple-endpoint.style-scope.yt-formatted-string ,
a.linkifyplus{
    color: peru;
}
a.yt-simple-endpoint.style-scope.yt-formatted-string:visited ,
a.linkifyplus:visited {
    color: tan !important;
}

/* === END ==== */
}
@-moz-document url-prefix("https://www.youtube.com/watch?") {

/* START - URL PREF - VIDEO WATCH ==== */
html{
    overflow-y: hidden !important;
}

/* END URL PREF - VIDEO WATCH === */

}