☰

Modern YouTube 2024

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

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

  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.         
  29.         #masthead-container {
  30.             border-radius: 10px;
  31.             background-color: #181818;
  32.             box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  33.         }
  34.         
  35.         #logo-icon {
  36.             border-radius: 50%;
  37.             transition: transform 0.3s ease;
  38.         }
  39.         
  40.         #logo-icon:hover {
  41.             transform: scale(1.1);
  42.         }
  43.  
  44.         /* Sidebar Styles */
  45.         #guide-button {
  46.             display: none !important;
  47.         }
  48.  
  49.         #primary {
  50.             margin-left: 0 !important;
  51.             padding-left: 16px;
  52.         }
  53.  
  54.         /* Video Cards */
  55.         .style-scope.ytd-rich-grid-media {
  56.             border-radius: 10px;
  57.             overflow: hidden;
  58.             background-color: #292929;
  59.             transition: transform 0.3s ease;
  60.         }
  61.  
  62.         .style-scope.ytd-rich-grid-media:hover {
  63.             transform: scale(1.03);
  64.             box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  65.         }
  66.  
  67.         /* Video Title */
  68.         #video-title {
  69.             color: #e0e0e0;
  70.             font-size: 16px;
  71.             line-height: 1.2;
  72.             transition: color 0.3s ease;
  73.         }
  74.  
  75.         #video-title:hover {
  76.             color: #ff0000;
  77.         }
  78.  
  79.         /* Buttons */
  80.         .style-scope.ytd-button-renderer {
  81.             border-radius: 20px;
  82.             padding: 8px 16px;
  83.             transition: background-color 0.3s ease, color 0.3s ease;
  84.         }
  85.  
  86.         .style-scope.ytd-button-renderer:hover {
  87.             background-color: #ff0000;
  88.             color: #ffffff;
  89.         }
  90.  
  91.         /* Animation for Load Transition */
  92.         .ytd-app {
  93.             opacity: 0;
  94.             transition: opacity 0.5s ease-in-out;
  95.         }
  96.         
  97.         .ytd-app.loaded {
  98.             opacity: 1;
  99.         }
  100.     `);
  101.  
  102.     // Add animation class to body when page is fully loaded
  103.     window.addEventListener('load', () => {
  104.         document.querySelector('ytd-app').classList.add('loaded');
  105.     });
  106. })();