☰

Youtube New UI Fix

Fixes the new UI to one that resembles old one

当前为 2015-08-05 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Youtube New UI Fix
  3. // @namespace   YtNewUIFix
  4. // @description Fixes the new UI to one that resembles old one
  5. // @author      Roy S
  6. // @include     https://www.youtube.com/*
  7. // @version     1.1
  8. // @grant       none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 	//mouse over the controls to update them (this seems to also work with 2000ms instead of 1000ms)
  13. 	var evObj = document.createEvent('Events');
  14. 	evObj.initEvent("mousemove", true, false);
  15. 	var moviePlayer = document.getElementById("movie_player");
  16.     setInterval(function() { moviePlayer.dispatchEvent(evObj); }, 1000);
  17. 	
  18. 	//the css: 
  19. 	var css = document.createElement('style');
  20.     css.type = "text/css";
  21.     css.textContent = [
  22. 		"	.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
  23. 		"	.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
  24. 		"	.ytp-gradient-bottom { display: none !important; }", //some gradient just above the old controls that didn't seem necessary
  25. 		"	: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
  26. 		"	.watch-stage-mode #movie_player { height: calc(100% + 34px); }", //this fixes that, in both modes the video was 720px high
  27. 		"	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)
  28. 		"	.ytp-big-mode video { height: calc(100% - 60px)!important; }", //make the full-screen (=.ytp-big-mode) video 60px smaller to show the controls
  29. 		"	.html5-video-container { height: 100%!important; }", //needed for full-screen to not give a black screen.
  30. 		"	.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
  31. 		"	.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
  32. 		"	#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)
  33. 		"	#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)
  34. 		"	#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
  35. 		"	.ytp-panelpopup { background: rgb(28, 28, 28) none repeat scroll 0% 0%!important; }" //and lastly, this will make the pop-up settings non-transparent.
  36. 	].join("\n");
  37.     document.head.appendChild(css);
  38. })();