Apply Material Design 1 styles to YouTube
// ==UserScript==
// @name YouTube Material Design 1
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Apply Material Design 1 styles to YouTube
// @author Your Name
// @match https://www.youtube.com/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// Function to load Material Design CSS
function loadMaterialDesignCSS() {
GM_addStyle(`
/* Basic Material Design styling for YouTube */
/* Add Material Design 1 colors and typography */
:root {
--md1-primary: #6200ea; /* Purple */
--md1-secondary: #03dac6; /* Teal */
--md1-background: #ffffff; /* White background */
--md1-surface: #f2f2f2; /* Light gray surface */
--md1-on-primary: #ffffff; /* White text on primary color */
--md1-on-secondary: #000000; /* Black text on secondary color */
--md1-text-primary: #000000; /* Black text */
--md1-text-secondary: #000000; /* Black text */
}
/* Basic Material Design 1 styles */
body {
background-color: var(--md1-background) !important;
color: var(--md1-text-primary) !important;
}
.style-scope.ytd-app {
background-color: var(--md1-surface) !important;
}
/* Style the top bar */
#masthead-container {
background-color: var(--md1-primary) !important;
color: var(--md1-on-primary) !important;
}
#search-input {
background-color: var(--md1-surface) !important;
border-radius: 4px;
border: 1px solid #ccc;
color: var(--md1-text-primary) !important;
}
/* Style buttons */
.style-scope ytd-button-renderer {
background-color: var(--md1-secondary) !important;
color: var(--md1-on-secondary) !important;
border-radius: 4px;
padding: 6px 12px;
font-family: 'Roboto', sans-serif;
}
.style-scope ytd-button-renderer:hover {
background-color: var(--md1-primary) !important;
color: var(--md1-on-primary) !important;
}
`);
}
// Load the Material Design CSS
loadMaterialDesignCSS();
})();