YouTube with Material Design Lite

Greasy Fork is available in English.
YouTube with Material Design Lite

Replace YouTube's CSS with Material Design Lite styling
Poser une question, écrire un avis, ou signaler le script.
Enveloppe les lignes
// ==UserScript==
// @name         YouTube with Material Design Lite
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Replace YouTube's CSS with Material Design Lite styling
// @match        *://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Remove all existing stylesheets in the <head> element
    const head = document.head || document.getElementsByTagName('head')[0];
    const links = head.querySelectorAll('link[rel="stylesheet"], style');

    links.forEach(link => link.remove());

    // Import Material Design Lite CSS and Google Fonts
    const mdlLink = document.createElement('link');
    mdlLink.rel = 'stylesheet';
    mdlLink.href = 'https://code.getmdl.io/1.3.0/material.indigo-pink.min.css';
    head.appendChild(mdlLink);

    const fontLink = document.createElement('link');
    fontLink.rel = 'stylesheet';
    fontLink.href = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700';
    head.appendChild(fontLink);

    // Additional custom styles to align with Material Design
    const style = document.createElement('style');
    style.textContent = `
        /* Root variables for custom elements */
        :root {
            --showRtcConnectionStatusIcon: block;
            --jumboEmojiSize: 2rem;
        }

        /* Apply Roboto font */
        body {
            font-family: 'Roboto', sans-serif;
        }

        /* Example styling for YouTube elements */
        .youtube-header {
            background-color: #3f51b5; /* Material Indigo */
            color: white;
            padding: 10px;
        }

        .youtube-content {
            margin: 20px;
            padding: 10px;
            background-color: #ffffff;
            border-radius: 4px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* Material Design for buttons */
        .yt-button {
            font-size: 16px;
            color: #fff;
            background-color: #ff4081;
            padding: 10px 20px;
            text-transform: uppercase;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* Resize jumbo emojis */
        .jumbo-emoji {
            font-size: var(--jumboEmojiSize);
        }

        /* Hide or adjust other elements as necessary */
    `;
    head.appendChild(style);

})();