Greasy Fork is available in English.

Modern YouTube 2024

Apply modern rounded styles and animations to YouTube and remove the sidebar button

  1. // ==UserScript==
  2. // @name Modern YouTube 2024
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0
  5. // @description Apply modern rounded styles and animations to YouTube and remove the sidebar button
  6. // @author Mason
  7. // @match https://www.youtube.com/*
  8. // @grant GM_addStyle
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13.  
  14. // Add custom CSS styles
  15. GM_addStyle(`
  16. /* General Styles */
  17. body {
  18. background-color: #121212;
  19. color: #e0e0e0;
  20. font-family: 'Arial', sans-serif;
  21. }
  22.  
  23. /* Header Styles */
  24. #container {
  25. border-radius: 10px;
  26. overflow: hidden;
  27. }
  28. #masthead-container {
  29. border-radius: 10px;
  30. background-color: #181818;
  31. box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  32. }
  33. #logo-icon {
  34. border-radius: 50%;
  35. transition: transform 0.3s ease;
  36. }
  37. #logo-icon:hover {
  38. transform: scale(1.1);
  39. }
  40.  
  41. /* Sidebar Styles */
  42. #guide-button {
  43. display: none !important;
  44. }
  45.  
  46. #primary {
  47. margin-left: 0 !important;
  48. padding-left: 16px;
  49. }
  50.  
  51. /* Video Cards */
  52. .style-scope.ytd-rich-grid-media {
  53. border-radius: 10px;
  54. overflow: hidden;
  55. background-color: #292929;
  56. transition: transform 0.3s ease;
  57. }
  58.  
  59. .style-scope.ytd-rich-grid-media:hover {
  60. transform: scale(1.03);
  61. box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  62. }
  63.  
  64. /* Video Title */
  65. #video-title {
  66. color: #e0e0e0;
  67. font-size: 16px;
  68. line-height: 1.2;
  69. transition: color 0.3s ease;
  70. }
  71.  
  72. #video-title:hover {
  73. color: #ff0000;
  74. }
  75.  
  76. /* Buttons */
  77. .style-scope.ytd-button-renderer {
  78. border-radius: 20px;
  79. padding: 8px 16px;
  80. transition: background-color 0.3s ease, color 0.3s ease;
  81. }
  82.  
  83. .style-scope.ytd-button-renderer:hover {
  84. background-color: #ff0000;
  85. color: #ffffff;
  86. }
  87.  
  88. /* Animation for Load Transition */
  89. .ytd-app {
  90. opacity: 0;
  91. transition: opacity 0.5s ease-in-out;
  92. }
  93. .ytd-app.loaded {
  94. opacity: 1;
  95. }
  96. `);
  97.  
  98. // Add animation class to body when page is fully loaded
  99. window.addEventListener('load', () => {
  100. document.querySelector('ytd-app').classList.add('loaded');
  101. });
  102. })();