☰

YouTube Material Design Lite Style

Apply Material Design Lite styling to YouTube

  1. // ==UserScript==
  2. // @name         YouTube Material Design Lite Style
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Apply Material Design Lite styling to YouTube
  6. // @author       Your Name
  7. // @match        https://www.youtube.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Inject Material Design Lite CSS
  15.     const mdlLink = document.createElement('link');
  16.     mdlLink.rel = 'stylesheet';
  17.     mdlLink.href = 'https://code.getmdl.io/1.3.0/material.indigo-pink.min.css';
  18.     document.head.appendChild(mdlLink);
  19.  
  20.     // Inject Material Icons
  21.     const iconsLink = document.createElement('link');
  22.     iconsLink.rel = 'stylesheet';
  23.     iconsLink.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
  24.     document.head.appendChild(iconsLink);
  25.  
  26.     // Custom CSS Styles
  27.     const style = document.createElement('style');
  28.     style.textContent = `
  29.         /* Header */
  30.         #masthead-container {
  31.             background-color: #d32f2f !important;
  32.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  33.         }
  34.         #logo-icon-container {
  35.             padding-left: 16px !important;
  36.         }
  37.         ytd-masthead .title {
  38.             font-size: 24px !important;
  39.             font-weight: bold !important;
  40.         }
  41.         ytd-searchbox {
  42.             flex-grow: 1;
  43.             margin-left: 20px;
  44.             margin-right: 20px;
  45.         }
  46.         #buttons ytd-button-renderer {
  47.             margin-right: 10px;
  48.         }
  49.  
  50.         /* Sidebar */
  51.         ytd-app {
  52.             display: flex;
  53.         }
  54.         ytd-guide-renderer {
  55.             background-color: #fff;
  56.             width: 240px;
  57.         }
  58.         ytd-guide-entry-renderer {
  59.             display: flex;
  60.             align-items: center;
  61.             padding: 10px 16px;
  62.         }
  63.         ytd-guide-entry-renderer a {
  64.             font-size: 14px !important;
  65.             color: rgba(0, 0, 0, 0.87);
  66.         }
  67.         ytd-guide-entry-renderer a:hover {
  68.             background-color: rgba(0, 0, 0, 0.1);
  69.         }
  70.         ytd-guide-entry-renderer .icon {
  71.             margin-right: 16px;
  72.         }
  73.  
  74.         /* Main Content */
  75.         ytd-browse, ytd-page-manager {
  76.             margin-left: 240px;
  77.         }
  78.         ytd-video-renderer, ytd-grid-video-renderer {
  79.             margin: 16px;
  80.             padding: 16px;
  81.             border-radius: 4px;
  82.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  83.         }
  84.         ytd-video-renderer:hover, ytd-grid-video-renderer:hover {
  85.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  86.         }
  87.  
  88.         /* Video Thumbnails */
  89.         ytd-thumbnail img {
  90.             border-radius: 4px;
  91.         }
  92.  
  93.         /* Video Titles */
  94.         ytd-video-renderer #video-title,
  95.         ytd-grid-video-renderer #video-title {
  96.             font-size: 16px !important;
  97.             font-weight: bold !important;
  98.             color: rgba(0, 0, 0, 0.87) !important;
  99.         }
  100.     `;
  101.     document.head.appendChild(style);
  102. })();