YouTube Material Design 1

Apply Material Design 1 styles to YouTube

当前为 2024-08-27 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name YouTube Material Design 1
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @description Apply Material Design 1 styles to YouTube
  6. // @author Your Name
  7. // @match https://www.youtube.com/*
  8. // @grant GM_addStyle
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13.  
  14. // Function to load Material Design CSS
  15. function loadMaterialDesignCSS() {
  16. GM_addStyle(`
  17. /* Basic Material Design styling for YouTube */
  18.  
  19. /* Add Material Design 1 colors and typography */
  20. :root {
  21. --md1-primary: #6200ea; /* Purple */
  22. --md1-secondary: #03dac6; /* Teal */
  23. --md1-background: #ffffff; /* White background */
  24. --md1-surface: #f2f2f2; /* Light gray surface */
  25. --md1-on-primary: #ffffff; /* White text on primary color */
  26. --md1-on-secondary: #000000; /* Black text on secondary color */
  27. --md1-text-primary: #000000; /* Black text */
  28. --md1-text-secondary: #000000; /* Black text */
  29. }
  30.  
  31. /* Basic Material Design 1 styles */
  32. body {
  33. background-color: var(--md1-background) !important;
  34. color: var(--md1-text-primary) !important;
  35. }
  36.  
  37. .style-scope.ytd-app {
  38. background-color: var(--md1-surface) !important;
  39. }
  40.  
  41. /* Style the top bar */
  42. #masthead-container {
  43. background-color: var(--md1-primary) !important;
  44. color: var(--md1-on-primary) !important;
  45. }
  46.  
  47. #search-input {
  48. background-color: var(--md1-surface) !important;
  49. border-radius: 4px;
  50. border: 1px solid #ccc;
  51. color: var(--md1-text-primary) !important;
  52. }
  53.  
  54. /* Style buttons */
  55. .style-scope ytd-button-renderer {
  56. background-color: var(--md1-secondary) !important;
  57. color: var(--md1-on-secondary) !important;
  58. border-radius: 4px;
  59. padding: 6px 12px;
  60. font-family: 'Roboto', sans-serif;
  61. }
  62.  
  63. .style-scope ytd-button-renderer:hover {
  64. background-color: var(--md1-primary) !important;
  65. color: var(--md1-on-primary) !important;
  66. }
  67. `);
  68. }
  69.  
  70. // Load the Material Design CSS
  71. loadMaterialDesignCSS();
  72. })();