Youtube plus

Small CSS tweaks to youtube with color theme settings

当前为 2017-09-21 提交的版本,查看 最新版本

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