☰

Youtube New UI Fix

Moves the controls under the video and makes the UI look like it was before august 2015

As of 2016-10-24. See the latest version.

  1. // ==UserScript==
  2. // @name        Youtube New UI Fix
  3. // @namespace   YtNewUIFix
  4. // @description Moves the controls under the video and makes the UI look like it was before august 2015
  5. // @author      Roy Scheerens
  6. // @homepageURL https://greatest.deepsurf.us/en/scripts/11485-youtube-new-ui-fix
  7. // @include     https://www.youtube.com/*
  8. // @include     https://youtube.googleapis.com/embed/*
  9. // @include     https://www.youtube-nocookie.com/embed/*
  10. // @version     2.3.1
  11. // @grant       none
  12. // ==/UserScript==
  13. /* Original typescript code: https://mega.nz/#!cJwCQDoI!elZQnuvqqQXKh8P6pzrV8oo5uAxU56RRGkFSGkzoqFM */
  14. var YtNewUIFix = (function () {
  15.     function YtNewUIFix() {
  16.         this.isEmbedded = window.top !== window.self;
  17.         this.mouseMoveEvent = document.createEvent("Events");
  18.         this.mouseMoveEvent.initEvent("mousemove", false, false);
  19.         document.body.classList.add("yt-ui-fix");
  20.         this.readOptions();
  21.     }
  22.     YtNewUIFix.prototype.readOptions = function () {
  23.         this.addWatchLater = this.getStorage("addWatchLater", true);
  24.         this.showControlsFullscreen = this.getStorage("showControlsFullscreen", true);
  25.         this.showControlsNonFullscreen = this.getStorage("showControlsNonFullscreen", true);
  26.         this.changeColorsFullscreen = this.getStorage("changeColorsFullscreen", true);
  27.         this.changeColorsNonFullscreen = this.getStorage("changeColorsNonFullscreen", true);
  28.         this.removeAnimations = this.getStorage("removeAnimations", false);
  29.         this.optionsReversed = this.getStorage("optionsReversed", false);
  30.         this.progressBigger = this.getStorage("progressBigger", false);
  31.         this.showTitleOnHover = this.getStorage("showTitleOnHover", false);
  32.         this.alwaysVolume = this.getStorage("alwaysVolume", false);
  33.     };
  34.     YtNewUIFix.prototype.applyFix = function () {
  35.         var _this = this;
  36.         if (document.body.innerHTML.length === 0) {
  37.             // empty page can be ignored (in share tab before it's active)
  38.             return;
  39.         }
  40.         this.addCSS();
  41.         if (localStorage) {
  42.             this.addOptions();
  43.         }
  44.         this.checkMoviePlayer();
  45.         window.setInterval(function () {
  46.             _this.checkMoviePlayer();
  47.         }, 1000);
  48.     };
  49.     YtNewUIFix.prototype.getStorage = function (key, defaultVal) {
  50.         if (!localStorage) {
  51.             return defaultVal;
  52.         }
  53.         var result = localStorage.getItem(key);
  54.         if (result) {
  55.             return result === "true";
  56.         }
  57.         else {
  58.             return defaultVal;
  59.         }
  60.     };
  61.     YtNewUIFix.prototype.checkMoviePlayer = function () {
  62.         if (!this.moviePlayer || !this.moviePlayer.parentNode) {
  63.             this.moviePlayer = document.querySelector("div.html5-video-player");
  64.         }
  65.         else if (!this.moviePlayer.classList.contains("seeking-mode") &&
  66.             !this.moviePlayer.classList.contains("dragging-mode") &&
  67.             (this.showControlsNonFullscreen && !this.moviePlayer.classList.contains("ytp-fullscreen") || this.showControlsFullscreen && this.moviePlayer.classList.contains("ytp-fullscreen"))) {
  68.             this.moviePlayer.dispatchEvent(this.mouseMoveEvent);
  69.         }
  70.         if (this.moviePlayer) {
  71.             if (this.addWatchLater) {
  72.                 var watchLater = document.querySelector(".ytp-chrome-top .ytp-watch-later-button");
  73.                 var settingsButton = document.querySelector(".ytp-settings-button");
  74.                 if (watchLater && settingsButton) {
  75.                     settingsButton.parentNode.insertBefore(watchLater, settingsButton);
  76.                 }
  77.             }
  78.             if (this.showTitleOnHover) {
  79.                 this.moviePlayer.classList.remove("ytp-hide-info-bar");
  80.             }
  81.         }
  82.         if (localStorage) {
  83.             if (this.checkOptions("removeAnimations", "optionsReversed", "alwaysVolume", "progressBigger", "showTitleOnHover", "showControlsFullscreen", "showControlsNonFullscreen", "changeColorsFullscreen", "changeColorsNonFullscreen")) {
  84.                 this.readOptions();
  85.                 this.showOptions();
  86.                 this.addCSS();
  87.             }
  88.         }
  89.     };
  90.     YtNewUIFix.prototype.checkOptions = function () {
  91.         var names = [];
  92.         for (var _i = 0; _i < arguments.length; _i++) {
  93.             names[_i - 0] = arguments[_i];
  94.         }
  95.         for (var i = 0; i < names.length; i++) {
  96.             if (this[names[i]] !== (localStorage.getItem(names[i]) === "true")) {
  97.                 return true;
  98.             }
  99.         }
  100.         return false;
  101.     };
  102.     YtNewUIFix.prototype.addCSS = function () {
  103.         var css = "";
  104.         css = this.fixColors(css);
  105.         css = this.fixControls(css);
  106.         css = this.fixBigMode(css);
  107.         css = this.addExtras(css);
  108.         var style = document.getElementById("YoutubeNewUIFix-Style");
  109.         if (style) {
  110.             style.parentNode.removeChild(style);
  111.         }
  112.         style = document.createElement("style");
  113.         style.id = "YoutubeNewUIFix-Style";
  114.         delete style.textContent;
  115.         style.textContent = css;
  116.         document.head.appendChild(style);
  117.     };
  118.     YtNewUIFix.prototype.fixControls = function (css) {
  119.         // options
  120.         css += "h3.optionChanged::after { content: 'Refresh page to save changes'; color: red; position: relative; left: 15px; }\n\n";
  121.         css += ".html5-video-player.ytp-fullscreen .html5-video-container { height: 100vh; }";
  122.         css += ".html5-video-player:not(.ytp-fullscreen) .html5-video-container { height: 100%; }";
  123.         css += ".ytp-chrome-bottom { left: 0 !important; }\n";
  124.         css += ".ytp-chrome-controls { margin: 0 -12px; }\n";
  125.         css += "body:not(.ytwp-window-player) #page:not(.watch-stage-mode) #watch7-sidebar { transform: translateY(-35px); }\n";
  126.         //css += "body.ytwp-window-player #page.watch-stage-mode #watch7-sidebar { transform: translateY(35px); }\n";
  127.         css += "body:not(.ytwp-window-player) #page.watch-stage-mode #watch-appbar-playlist { margin-top: 35px; }\n";
  128.         css += ".html5-main-video { top: 0!important; }\n";
  129.         // progressbar
  130.         css += ".ytp-progress-bar-container:not(.ytp-pulling) { height: 5px!important; bottom: 30px!important;  }\n";
  131.         css += ".ytp-progress-list { transform-origin: center top; }\n\n";
  132.         css += ".ytp-big-mode .ytp-progress-list { transform: scaleY(0.6); }\n\n";
  133.         // scale down 
  134.         css += ".ytp-chrome-bottom { height: 35px!important; padding: 0!important; }\n";
  135.         css += ".ytp-chrome-controls .ytp-button:not(.ytp-watch-later-button) { width: 33px!important; }\n";
  136.         css += ".ytp-chrome-controls .ytp-watch-later-button { width: 24px!important; }\n";
  137.         css += ".ytp-left-controls { margin-left: 5px }\n";
  138.         css += ".ytp-time-display { height: 31px; line-height: 32px!important; font-size: 12px!important; }\n";
  139.         css += ".ytp-left-controls, .ytp-right-controls { height: 32px!important; margin-top: 3px; line-height: 36px; }\n\n";
  140.         // badges 
  141.         css += ".ytp-settings-button.ytp-hd-quality-badge::after,.ytp-settings-button.ytp-4k-quality-badge::after,.ytp-settings-button.ytp-5k-quality-badge::after,.ytp-settings-button.ytp-8k-quality-badge::after { content:''!important; top:6px!important; right:4px!important; height:9px!important; width:13px!important; padding: 0!important; }\n";
  142.         css += ".ytp-settings-button.ytp-hd-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik01LDcgTDYsNyBMNiw4IEw1LDggTDUsNyBaIE0xMCwzIEwxMCw0IEw4LDQgTDgsMyBMMTAsMyBaIE0zLDYgTDMsNSBMNSw1IEw1LDYgTDMsNiBaIE0yLDcgTDMsNyBMMyw4IEwyLDggTDIsNyBaIE03LDcgTDEwLDcgTDEwLDggTDcsOCBMNyw3IFogTTEwLDYgTDExLDYgTDExLDcgTDEwLDcgTDEwLDYgWiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIwLjY0NzEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48cGF0aCBkPSJNNSw3IEw1LDYgTDUsNSBMMyw1IEwzLDYgTDMsNyBMMiw3IEwyLDIgTDMsMiBMMyw0IEw1LDQgTDUsMiBMNiwyIEw2LDcgTDUsNyBaIE0xMSw2IEwxMCw2IEwxMCw3IEw3LDcgTDcsMiBMMTAsMiBMMTAsMyBMMTEsMyBMMTEsNiBaIE0xMCw0IEwxMCwzIEw4LDMgTDgsNCBMOCw2IEwxMCw2IEwxMCw0IFoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  143.         css += ".ytp-settings-button.ytp-4k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE00LDcgTDUsNyBMNSw4IEw0LDggTDQsNyBaIE0yLDYgTDQsNiBMNCw3IEwyLDcgTDIsNiBaIE0zLDQgTDQsNCBMNCw1IEwzLDUgTDMsNCBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IFogTTEwLDUgTDgsNSBMOCw2IEw4LDcgTDcsNyBMNywyIEw4LDIgTDgsNCBMMTAsNCBMMTAsNSBaIE00LDQgTDMsNCBMMyw1IEw0LDUgTDQsNCBaIE00LDcgTDQsNiBMMiw2IEwyLDQgTDMsNCBMMywzIEw0LDMgTDQsMiBMNSwyIEw1LDUgTDYsNSBMNiw2IEw1LDYgTDUsNyBMNCw3IFogTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgWiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  144.         css += ".ytp-settings-button.ytp-5k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE0yLDcgTDUsNyBMNSw4IEwyLDggTDIsNyBaIE0yLDUgTDUsNSBMNSw2IEwyLDYgTDIsNSBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTIsNiBMNSw2IEw1LDcgTDIsNyBNNSw1IEw2LDUgTDYsNiBMNSw2IE01LDQgTDMsNCBMMywzIEw2LDMgTDYsMiBMMiwyIEwyLDUgTDUsNSBMNSw0IFoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  145.         css += ".ytp-settings-button.ytp-8k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE0zLDUgTDUsNSBMNSw2IEwzLDYgTDMsNSBaIE0zLDMgTDUsMyBMNSw0IEwzLDQgTDMsMyBaIE01LDQgTDYsNCBMNiw1IEw1LDUgTDUsNCBaIE0yLDQgTDMsNCBMMyw1IEwyLDUgTDIsNCBaIE0yLDYgTDMsNiBMMyw3IEwyLDcgTDIsNiBaIE0zLDcgTDUsNyBMNSw4IEwzLDggTDMsNyBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTMsNiBMNSw2IEw1LDcgTDMsNyBNMywyIEw1LDIgTDUsMyBMMywzIEwzLDIgWiBNNSw1IEw2LDUgTDYsNiBMNSw2IEw1LDUgWiBNMyw0IEw1LDQgTDUsNSBMMyw1IEwzLDQgWiBNNSwzIEw2LDMgTDYsNCBMNSw0IEw1LDMgWiBNMiw1IEwzLDUgTDMsNiBMMiw2IEwyLDUgWiBNMiwzIEwzLDMgTDMsNCBMMiw0IEwyLDMgWiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  146.         css += ".ytp-settings-button.ytp-3d-badge-grey:after,.ytp-settings-button.ytp-3d-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0yIDJoNHY1aC00di0xaDN2LTFoLTN2LTFoM3YtMWgtM3pNNyAyaDN2MWgtMnYzaDJ2MWgtM3pNMTAgM2gxdjNoLTF6IiBmaWxsPSIjZmZmIiAvPjxwYXRoIGQ9Ik0yIDNoM3YxaC0zek04IDNoMnYxaC0yek0yIDVoM3YxaC0zek0xMCA2aDF2MWgtMXpNMiA3aDR2MWgtNHpNNyA3aDN2MWgtM3oiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC42NDcxIiAvPjwvc3ZnPg==)!important; }";
  147.         css += ".ytp-color-white .ytp-settings-button.ytp-hd-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik01LDcgTDUsNiBMNSw1IEwzLDUgTDMsNiBMMyw3IEwyLDcgTDIsMiBMMywyIEwzLDQgTDUsNCBMNSwyIEw2LDIgTDYsNyBMNSw3IFogTTExLDYgTDEwLDYgTDEwLDcgTDcsNyBMNywyIEwxMCwyIEwxMCwzIEwxMSwzIEwxMSw2IFogTTEwLDQgTDEwLDMgTDgsMyBMOCw0IEw4LDYgTDEwLDYgTDEwLDQgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  148.         css += ".ytp-color-white .ytp-settings-button.ytp-4k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IFogTTEwLDUgTDgsNSBMOCw2IEw4LDcgTDcsNyBMNywyIEw4LDIgTDgsNCBMMTAsNCBMMTAsNSBaIE00LDQgTDMsNCBMMyw1IEw0LDUgTDQsNCBaIE00LDcgTDQsNiBMMiw2IEwyLDQgTDMsNCBMMywzIEw0LDMgTDQsMiBMNSwyIEw1LDUgTDYsNSBMNiw2IEw1LDYgTDUsNyBMNCw3IFogTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  149.         css += ".ytp-color-white .ytp-settings-button.ytp-5k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTIsNiBMNSw2IEw1LDcgTDIsNyBNNSw1IEw2LDUgTDYsNiBMNSw2IE01LDQgTDMsNCBMMywzIEw2LDMgTDYsMiBMMiwyIEwyLDUgTDUsNSBMNSw0IFoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  150.         css += ".ytp-color-white .ytp-settings-button.ytp-8k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTMsNiBMNSw2IEw1LDcgTDMsNyBNMywyIEw1LDIgTDUsMyBMMywzIEwzLDIgWiBNNSw1IEw2LDUgTDYsNiBMNSw2IEw1LDUgWiBNMyw0IEw1LDQgTDUsNSBMMyw1IEwzLDQgWiBNNSwzIEw2LDMgTDYsNCBMNSw0IEw1LDMgWiBNMiw1IEwzLDUgTDMsNiBMMiw2IEwyLDUgWiBNMiwzIEwzLDMgTDMsNCBMMiw0IEwyLDMgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  151.         css += ".ytp-color-white .ytp-settings-button.ytp-3d-badge-grey:after,.ytp-color-white .ytp-settings-button.ytp-3d-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0yIDJoNHY1aC00di0xaDN2LTFoLTN2LTFoM3YtMWgtM3pNNyAyaDN2MWgtMnYzaDJ2MWgtM3pNMTAgM2gxdjNoLTF6IiBmaWxsPSIjMDAwIiAvPjwvc3ZnPg==)!important; }";
  152.         // closed captions (line under the button, and position of captions) 
  153.         css += ".ytp-chrome-controls .ytp-button[aria-pressed='true']::after { width: 18px; left: 8px; }\n";
  154.         css += ".caption-window.ytp-caption-window-bottom {	margin-bottom:40px!important }\n";
  155.         return css;
  156.     };
  157.     YtNewUIFix.prototype.fixBigMode = function (css) {
  158.         /* big mode: smaller scrubber */
  159.         css += ".ytp-big-mode .ytp-scrubber-button { height: 13px!important; width: 13px!important; border-radius: 6.5px!important; }\n";
  160.         css += ".ytp-big-mode .ytp-scrubber-container { top: -4px; left: -6.5px; }\n\n";
  161.         /* big mode: 24px edges instead of 12px */
  162.         css += ".ytp-big-mode .ytp-left-controls { margin-left: -7px }\n";
  163.         css += ".ytp-big-mode .ytp-fullscreen-button { margin-right: -7px }\n\n";
  164.         /* big mode: smaller volume slider */
  165.         css += ".ytp-big-mode .ytp-volume-slider-handle { width: 12px; height: 12px; border-radius: 6px; margin-top: -6px; }\n";
  166.         css += ".ytp-big-mode .ytp-volume-slider-active .ytp-volume-panel { width: 72px; }\n\n";
  167.         return css;
  168.     };
  169.     YtNewUIFix.prototype.fixColors = function (css) {
  170.         if (this.changeColorsNonFullscreen) {
  171.             css += ".html5-video-player:not(.ytp-big-mode) .ytp-chrome-bottom { background-color: #1B1B1B; border-left: 12px solid #1B1B1B; border-right: 12px solid #1B1B1B; }\n";
  172.             css += ".html5-video-player:not(.ytp-big-mode) .ytp-gradient-bottom { display: none!important; }\n";
  173.             css += ".html5-video-player:not(.ytp-big-mode) .ytp-chrome-controls svg path { fill: #8E8E8E }\n";
  174.         }
  175.         else {
  176.             css += ".html5-video-player:not(.ytp-big-mode) .ytp-chrome-bottom { border-left: 12px solid transparent; border-right: 12px solid transparent; }\n";
  177.             if (this.showControlsNonFullscreen) {
  178.                 css += ".html5-video-player:not(.ytp-fullscreen) .ytp-gradient-bottom { display: none!important; }\n";
  179.             }
  180.         }
  181.         if (this.changeColorsFullscreen) {
  182.             css += ".ytp-big-mode .ytp-chrome-bottom { background-color: #1B1B1B; border-left: 24px solid #1B1B1B; border-right: 24px solid #1B1B1B; }\n";
  183.             css += ".ytp-big-mode .ytp-gradient-bottom { display: none!important; }\n";
  184.             css += ".ytp-big-mode .ytp-chrome-controls svg path { fill: #8E8E8E }\n";
  185.         }
  186.         else {
  187.             css += ".ytp-big-mode .ytp-chrome-bottom { border-left: 24px solid transparent; border-right: 24px solid transparent; }\n";
  188.             if (this.showControlsFullscreen) {
  189.                 css += ".html5-video-player.ytp-fullscreen .ytp-gradient-bottom { display: none!important; }\n";
  190.             }
  191.         }
  192.         css += ".ytp-gradient-top { display: none!important; }\n";
  193.         css += "\n";
  194.         return css;
  195.     };
  196.     YtNewUIFix.prototype.addExtras = function (css) {
  197.         if (this.showControlsFullscreen) {
  198.             css += "html:not(.floater) .html5-video-player.ytp-fullscreen:not(.ytp-hide-controls) .html5-main-video  { height: calc(100% - 35px)!important; min-height: calc(100% - 35px) !important; max-height: calc(100% - 35px) !important; }\n";
  199.             css += ".html5-video-player.ytp-fullscreen:not(.ytp-hide-controls) .ytp-chrome-bottom { opacity: 1!important;                }\n";
  200.         }
  201.         if (this.showControlsNonFullscreen) {
  202.             css += "html:not(.floater) .html5-video-player:not(.ytp-fullscreen):not(.ytp-hide-controls) .html5-main-video  { height: calc(100% - 35px)!important; min-height: calc(100% - 35px) !important; max-height: calc(100% - 35px) !important; }\n";
  203.             css += ".html5-video-player:not(.ytp-fullscreen):not(.ytp-hide-controls) .ytp-chrome-bottom { opacity: 1!important;                }\n";
  204.             css += "html:not(.floater):not(.part_fullbrowser) #movie_player:not(.ytp-fullscreen):not(.ytp-hide-controls)       { height: calc(100% + 35px)!important; }\n";
  205.             css += "html.floater .html5-video-player { padding-bottom: 35px; }\n";
  206.             css += "#theater-background { padding-bottom: 35px; }\n\n";
  207.             css += "#placeholder-player { padding-bottom: 35px; }\n";
  208.         }
  209.         if (!this.showControlsFullscreen && !this.showControlsNonFullscreen) {
  210.             css += ".html5-video-player .html5-main-video  { height: 100%!important; }\n";
  211.         }
  212.         if (!this.showTitleOnHover) {
  213.             // hide always
  214.             css += ".ytp-chrome-top { display: none!important; }\n";
  215.         }
  216.         if (this.removeAnimations) {
  217.             css += ".ytp-bezel { display: none!important; }\n";
  218.             css += ".html5-endscreen *, .html5-video-player div { transition-property: none !important; animation: none !important; }\n";
  219.         }
  220.         if (this.optionsReversed) {
  221.             css += ".ytp-panel { display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; }\n";
  222.             css += ".ytp-panel-header { order: 2; border-top: 1px solid #444; border-bottom: none; }\n";
  223.             css += ".ytp-panel-content { order: 1; }\n";
  224.         }
  225.         if (this.alwaysVolume) {
  226.             /* Have the volume slider always be visible */
  227.             css += ".ytp-volume-panel { width: 52px; margin-right: 3px; } .ytp-big-mode .ytp-volume-panel { width: 78px; }";
  228.         }
  229.         if (this.progressBigger) {
  230.             /* Make the progressbar fill up the entire space when not hovering over (thanks to Takato) */
  231.             css += ".ytp-progress-bar-container:not(:hover):not(.ytp-pulling) .ytp-progress-list { width: calc(100% + 24px); left: -12px; }";
  232.             css += ".ytp-big-mode .ytp-progress-bar-container:not(:hover):not(.ytp-pulling) .ytp-progress-list { width: calc(100% + 48px); left: -24px; }";
  233.         }
  234.         return css;
  235.     };
  236.     YtNewUIFix.prototype.showOptions = function () {
  237.         var options = document.querySelectorAll("#YoutubeNewUIFix-Options input");
  238.         if (options.length > 0) {
  239.             for (var i = 0; i < options.length; i++) {
  240.                 options[i].checked = (localStorage.getItem(options[i].name) === "true");
  241.             }
  242.         }
  243.     };
  244.     YtNewUIFix.prototype.addOptions = function () {
  245.         if (window.location.href.indexOf("account_playback") < 0) {
  246.             return;
  247.         }
  248.         var content = document.querySelector("div.account-content");
  249.         var footer = document.querySelector("div.account-footer");
  250.         if (content && footer) {
  251.             var accSection = document.createElement("div");
  252.             accSection.id = "YoutubeNewUIFix-Options";
  253.             accSection.classList.add("account-section");
  254.             var header = document.createElement("h3");
  255.             header.classList.add("account-section-header");
  256.             header.textContent = "Youtube New UI Fix Options";
  257.             accSection.appendChild(header);
  258.             {
  259.                 accSection.appendChild(this.createOption("addWatchLater", "Add the watch later button to the controls"));
  260.                 accSection.appendChild(this.createOption("changeColorsNonFullscreen", "Change the colors back to their original gray (in non-full-screen mode)"));
  261.                 accSection.appendChild(this.createOption("changeColorsFullscreen", "Change the colors back to their original gray in full-screen mode"));
  262.                 accSection.appendChild(this.createOption("showControlsNonFullscreen", "Always show the controls (in non-full-screen mode)"));
  263.                 accSection.appendChild(this.createOption("showControlsFullscreen", "Always show the controls in full-screen mode"));
  264.                 accSection.appendChild(this.createOption("removeAnimations", "Remove all animations"));
  265.                 accSection.appendChild(this.createOption("optionsReversed", "Move the 'go back' button in the settings menus to the bottom"));
  266.                 accSection.appendChild(this.createOption("progressBigger", "Make the progressbar take up the whole width (but not when hovering over)"));
  267.                 accSection.appendChild(this.createOption("showTitleOnHover", "Have the title show when hovering over the video"));
  268.                 accSection.appendChild(this.createOption("alwaysVolume", "Have the volume slider be always visible"));
  269.             }
  270.             content.insertBefore(accSection, footer);
  271.         }
  272.     };
  273.     YtNewUIFix.prototype.createOption = function (name, description) {
  274.         var accDiv = document.createElement("div");
  275.         accDiv.classList.add("account-section-setting");
  276.         accDiv.innerHTML = "\n\t\t    <label>\n\t\t\t    <span class='yt-uix-form-input-checkbox-container " + (this[name] ? "checked" : "") + "'>\n                    <input class='yt-uix-form-input-checkbox' name='" + name + "' " + (this[name] ? "checked='checked'" : "") + " type='checkbox'>\n                    <span class='yt-uix-form-input-checkbox-element'></span>\n                </span>\n\t\t\t    " + description + "\n\t\t    </label>";
  277.         var accInput = accDiv.querySelector("input[name='" + name + "']");
  278.         accInput.onclick = function () {
  279.             localStorage.setItem(name, String(accInput.checked));
  280.         };
  281.         return accDiv;
  282.     };
  283.     return YtNewUIFix;
  284. }());
  285. new YtNewUIFix().applyFix();
  286. //# sourceMappingURL=Youtube_New_UI_Fix.user.js.map