☰

Greasy Fork 支持简体中文。

YouTube 2017 Header Style with MDL

Make YouTube's header bigger, add Material Design Lite, and a 2017 aesthetic.

  1. // ==UserScript==
  2. // @name         YouTube 2017 Header Style with MDL
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Make YouTube's header bigger, add Material Design Lite, and a 2017 aesthetic.
  6. // @author       Your Name
  7. // @match        https://www.youtube.com/*
  8. // @grant        GM_addStyle
  9. // @grant        GM_addElement
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Add Material Design Lite CSS
  16.     GM_addElement('link', {
  17.         href: 'https://code.getmdl.io/1.3.0/material.indigo-pink.min.css',
  18.         rel: 'stylesheet',
  19.         type: 'text/css'
  20.     });
  21.  
  22.     // Add Material Design Lite Icons CSS
  23.     GM_addElement('link', {
  24.         href: 'https://fonts.googleapis.com/icon?family=Material+Icons',
  25.         rel: 'stylesheet',
  26.         type: 'text/css'
  27.     });
  28.  
  29.     // Add Material Design Lite JavaScript
  30.     GM_addElement('script', {
  31.         src: 'https://code.getmdl.io/1.3.0/material.min.js',
  32.         type: 'text/javascript'
  33.     });
  34.  
  35.     // Custom CSS to modify YouTube header
  36.     GM_addStyle(`
  37.         #masthead-container {
  38.             height: 80px !important;
  39.             background-color: #ffffff !important;
  40.             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  41.             border-bottom: 1px solid #e0e0e0 !important;
  42.         }
  43.  
  44.         #logo-icon {
  45.             height: 36px !important;
  46.             width: auto !important;
  47.         }
  48.  
  49.         #search-input, #search-icon-legacy {
  50.             height: 48px !important;
  51.             border-radius: 24px !important;
  52.             border: 1px solid #d3d3d3 !important;
  53.             padding: 0 16px !important;
  54.             box-shadow: none !important;
  55.             background-color: #f9f9f9 !important;
  56.             transition: all 0.2s ease-in-out !important;
  57.         }
  58.  
  59.         #search-icon-legacy {
  60.             height: 48px !important;
  61.             width: 48px !important;
  62.             background-color: #f1f1f1 !important;
  63.             border-radius: 50% !important;
  64.             padding: 12px !important;
  65.         }
  66.  
  67.         #end {
  68.             margin-top: 20px !important;
  69.         }
  70.  
  71.         #buttons {
  72.             margin-right: 16px !important;
  73.         }
  74.  
  75.         /* Material Design Lite button */
  76.         .yt-simple-endpoint.style-scope.ytd-button-renderer {
  77.             color: #6200ea !important;
  78.             background-color: #ffffff !important;
  79.             border: 1px solid #6200ea !important;
  80.             border-radius: 4px !important;
  81.             text-transform: uppercase !important;
  82.             padding: 8px 16px !important;
  83.             font-weight: 500 !important;
  84.             letter-spacing: 0.05em !important;
  85.             transition: all 0.3s ease-in-out !important;
  86.         }
  87.  
  88.         .yt-simple-endpoint.style-scope.ytd-button-renderer:hover {
  89.             background-color: #6200ea !important;
  90.             color: #ffffff !important;
  91.         }
  92.     `);
  93. })();