☰

Youtube++

Very small CSS tweaks to youtube

目前為 2017-09-21 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Youtube++
  3. // @description  Very small CSS tweaks to youtube
  4. // @include 	 *://*.youtube.com*
  5. // @grant        GM_addStyle
  6. // @grant       GM_getValue
  7. // @grant       GM_setValue
  8. // @grant none
  9. // @run-at document-load
  10. // @version 1
  11. // @namespace 
  12. // ==/UserScript==
  13.  
  14. var defaultcolor = "hsla(3, 60%, 47%, 1)";
  15.  
  16. var customcolor = GM_getValue("yt-custom-color", defaultcolor);
  17. GM_setValue('yt-custom-color', customcolor);
  18.  
  19. GM_addStyle ( "body {\
  20.     /* --yt-custom-color: " + customcolor + "; */\
  21. }");
  22.  
  23. GM_addStyle ( "#player-ads { display: none; }\
  24. body, ytd-app {\
  25.     --yt-brand-paper-button-color: var(--yt-custom-color) !important;\
  26.     --yt-brand-color: var(--yt-custom-color) !important;\
  27. }\
  28. paper-button.ytd-subscribe-button-renderer {\
  29.     background: var(--yt-custom-color);\
  30. }\
  31. a.yt-simple-endpoint.yt-formatted-string {\
  32.     color: var(--yt-custom-color);\
  33. }\
  34. #progress.ytd-thumbnail-overlay-resume-playback-renderer, .ytp-red2 .ytp-swatch-background-color, .ytp-red2 .ytp-swatch-background-color-secondary, .ytp-play-progress.ytp-swatch-background-color, .ytp-swatch-background-color-secondary {\
  35.     background-color: var(--yt-custom-color);\
  36. }\
  37. path#lozenge-path, #logo path.style-scope.yt-icon {\
  38.     fill: var(--yt-custom-color);\
  39. }\
  40. div#top div#player {\
  41.     max-height: calc(100vh - var(--ytd-masthead-height, 56px));\
  42. }");
  43.  
  44.  
  45. unsafeWindow.setcustomcolor = function (colorinput) {
  46.   customcolor = colorinput;
  47.   document.body.style = "--yt-custom-color: " + customcolor + ";";
  48.   GM_setValue('yt-custom-color', customcolor);
  49.  
  50.   console.log("Changed color theme to : " + customcolor);
  51. }
  52.  
  53. var customcolorpicker = document.createElement('input');
  54. customcolorpicker.type = "color";
  55. customcolorpicker.onchange = "setcustomcolor(this.value);";
  56. customcolorpicker.style = "display: none;";
  57. customcolorpicker.addEventListener("change", function() {
  58.     unsafeWindow.setcustomcolor(this.value);
  59. });
  60.  
  61. unsafeWindow.pickcustomcolor = function () {
  62.     customcolorpicker.click();
  63. }
  64.  
  65. unsafeWindow.resetcustomcolor = function () {
  66.     unsafeWindow.setcustomcolor(defaultcolor);
  67. }
  68.  
  69. unsafeWindow.setcustomcolor(customcolor);
  70.  
  71. console.log("Youtube++ loaded!");