Apply Material Design Lite styling to YouTube
// ==UserScript==
// @name YouTube Material Design Lite Style
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Apply Material Design Lite styling to YouTube
// @author Your Name
// @match https://www.youtube.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Inject Material Design Lite CSS
const mdlLink = document.createElement('link');
mdlLink.rel = 'stylesheet';
mdlLink.href = 'https://code.getmdl.io/1.3.0/material.indigo-pink.min.css';
document.head.appendChild(mdlLink);
// Inject Material Icons
const iconsLink = document.createElement('link');
iconsLink.rel = 'stylesheet';
iconsLink.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
document.head.appendChild(iconsLink);
// Custom CSS Styles
const style = document.createElement('style');
style.textContent = `
/* Header */
#masthead-container {
background-color: #d32f2f !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#logo-icon-container {
padding-left: 16px !important;
}
ytd-masthead .title {
font-size: 24px !important;
font-weight: bold !important;
}
ytd-searchbox {
flex-grow: 1;
margin-left: 20px;
margin-right: 20px;
}
#buttons ytd-button-renderer {
margin-right: 10px;
}
/* Sidebar */
ytd-app {
display: flex;
}
ytd-guide-renderer {
background-color: #fff;
width: 240px;
}
ytd-guide-entry-renderer {
display: flex;
align-items: center;
padding: 10px 16px;
}
ytd-guide-entry-renderer a {
font-size: 14px !important;
color: rgba(0, 0, 0, 0.87);
}
ytd-guide-entry-renderer a:hover {
background-color: rgba(0, 0, 0, 0.1);
}
ytd-guide-entry-renderer .icon {
margin-right: 16px;
}
/* Main Content */
ytd-browse, ytd-page-manager {
margin-left: 240px;
}
ytd-video-renderer, ytd-grid-video-renderer {
margin: 16px;
padding: 16px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
ytd-video-renderer:hover, ytd-grid-video-renderer:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* Video Thumbnails */
ytd-thumbnail img {
border-radius: 4px;
}
/* Video Titles */
ytd-video-renderer #video-title,
ytd-grid-video-renderer #video-title {
font-size: 16px !important;
font-weight: bold !important;
color: rgba(0, 0, 0, 0.87) !important;
}
`;
document.head.appendChild(style);
})();