Fixes the new UI to one that resembles old one
// ==UserScript==
// @name Youtube New UI Fix
// @namespace YtNewUIFix
// @description Fixes the new UI to one that resembles old one
// @author Roy S
// @include https://www.youtube.com/*
// @version 1
// @grant none
// ==/UserScript==
(function() {
//mouse over the controls to update them (this seems to also work with 2000ms instead of 1000ms)
var evObj = document.createEvent('Events');
evObj.initEvent("mousemove", true, false);
var moviePlayer = document.getElementById("movie_player");
setInterval(function() { moviePlayer.dispatchEvent(evObj); }, 1000);
//the css:
var css = document.createElement('style');
css.type = "text/css";
css.textContent = [
" .ytp-chrome-bottom { opacity: 1!important; background: #1B1B1B none repeat scroll 0% 0%!important; width: 100%!important; left: 0!important; }", //have controls always visible, with old color, and take up the entire width
" .ytp-svg-fill { fill: #8E8E8E!important; }", //revert button colors; will do nothing if @namespace url(http://www.w3.org/1999/xhtml); is included for some reason
" .ytp-gradient-bottom { display: none !important; }", //some gradient just above the old controls that didn't seem necessary
" :not(.watch-stage-mode) #movie_player { height: calc(100% + 33px); }", //no idea why, but the videos were one pixel smaller in theater or non-theater mode
" .watch-stage-mode #movie_player { height: calc(100% + 34px); }", //this fixes that, in both modes the video was 720px high
" body:not(.ytwp-window-player) .watch-stage-mode #watch7-sidebar-contents, body:not(.ytwp-window-player) #watch7-content { transform: translateY(33px); }", //this is to push the sidebar down if in theater mode (in theater mode the sidebar is under the player and not to the right of it)
" .ytp-big-mode video { height: calc(100% - 60px)!important; }", //make the full-screen (=.ytp-big-mode) video 60px smaller to show the controls
" .ytp-player-content, .ytp-subtitles-player-content { bottom: 49px!important; }", //fix to make the subtitles (and the channel's icon on the video) not go up and down when hovering over the video
" .watch-stage-mode #theater-background::after { content: \'\'; bottom: -34px; left: 0px; position: absolute; background-color: black; height: 34px; width: 100%; }", //when moving the controls down, they won't have any black background to the left and right. This creates an black bar under the controls to fill that gap
" #movie_player:not(.ytp-fullscreen) .ytp-chrome-bottom { height: 28px!important; }", //make the controls smaller (not in full-screen; which makes the buttons look wierd)
" #movie_player:not(.ytp-fullscreen) .ytp-progress-bar-container { bottom: 29px!important; }", //move the progressbar down a bit (or else it will float above the now smaller controls}
" #movie_player:not(.ytp-fullscreen) .ytp-chrome-controls { transform: translateY(-5px)!important; }", //move all the buttons and time display down a bit to make them centered again with the new height
" .ytp-panelpopup { background: rgb(28, 28, 28) none repeat scroll 0% 0%!important; }" //and lastly, this will make the pop-up settings non-transparent.
].join("\n");
document.head.appendChild(css);
})();