YouTube Material Design Ui
YouTube Material Design Ui by mason20121981
Details
Authormason20121981
LicenseNo License
Categoryyoutube
Created
Updated
Size5.4 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name YouTube Modern Design 2024 with Dark Mode and Rounded UI
@version 20241122.1.0
@namespace userstyles.world/user/modern_design
@description A clean, modern YouTube design with rounded UI, dark mode, and updated font styles. Focus on a smooth user experience with improved aesthetics.
@author YourName
@license CC Zero
@preprocessor stylus
@var checkbox useNewDarkMode "Enable custom dark mode for YouTube" 1
==/UserStyle== */
@-moz-document domain("youtube.com") {
/* General Styles */
:root {
--primary-bg-color: #121212;
--secondary-bg-color: #181818;
--text-color: #e5e5e5;
--link-color: #1a73e8;
--border-radius: 8px;
--font-family: "Roboto", sans-serif;
--font-size: 16px;
--header-bg-color: #181818;
--nav-bg-color: #222222;
}
/* Body */
body {
background-color: var(--primary-bg-color);
font-family: var(--font-family);
color: var(--text-color);
line-height: 1.6;
font-size: var(--font-size);
}
/* YouTube Header */
#masthead {
background-color: var(--header-bg-color);
border-bottom: 1px solid #333;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
#masthead-container {
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
#logo {
height: 32px;
width: auto;
}
/* Navigation Bar */
#sections {
background-color: var(--nav-bg-color);
border-radius: var(--border-radius);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
#sections a {
color: var(--text-color);
padding: 10px 15px;
text-decoration: none;
border-radius: var(--border-radius);
font-size: var(--font-size);
}
#sections a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--link-color);
}
/* Video Thumbnails */
ytd-thumbnail {
border-radius: var(--border-radius);
overflow: hidden;
}
ytd-thumbnail img {
border-radius: var(--border-radius);
transition: transform 0.3s ease;
}
ytd-thumbnail img:hover {
transform: scale(1.05);
}
/* Video Titles */
#video-title {
font-size: 18px;
font-weight: 500;
line-height: 1.4;
transition: color 0.3s ease;
}
#video-title:hover {
color: var(--link-color);
}
/* Sidebar */
ytd-guide-section-renderer {
border-radius: var(--border-radius);
margin: 15px 0;
background-color: var(--secondary-bg-color);
padding: 10px;
}
/* Comments Section */
ytd-comment-thread-renderer {
background-color: var(--secondary-bg-color);
padding: 10px;
border-radius: var(--border-radius);
margin: 10px 0;
}
.style-scope.ytd-comment-renderer {
border-radius: var(--border-radius);
background-color: #1c1c1c;
}
/* Video Player */
ytd-video-primary-info-renderer {
background-color: var(--primary-bg-color);
border-radius: var(--border-radius);
padding: 15px;
}
/* Modal Popup (Subscriptions, etc.) */
#dialog {
border-radius: var(--border-radius);
background-color: #222222;
}
/* Footer */
#footer {
background-color: var(--nav-bg-color);
padding: 20px;
border-top: 1px solid #333;
}
#footer a {
color: var(--text-color);
text-decoration: none;
}
#footer a:hover {
color: var(--link-color);
}
/* Buttons */
paper-button {
background-color: var(--link-color);
color: #fff;
border-radius: var(--border-radius);
padding: 8px 15px;
transition: background-color 0.3s ease;
}
paper-button:hover {
background-color: rgba(26, 115, 232, 0.8);
}
/* Transition Effects */
* {
transition: all 0.3s ease;
}
/* Rounded UI Elements */
ytd-video-renderer, ytd-playlist-video-renderer, ytd-channel-renderer {
border-radius: var(--border-radius);
overflow: hidden;
}
ytd-rich-grid-renderer {
border-radius: var(--border-radius);
}
/* Search Bar */
#search {
border-radius: var(--border-radius);
background-color: #333;
}
#search input {
background-color: #333;
border: none;
color: #fff;
border-radius: var(--border-radius);
padding: 8px 15px;
width: 100%;
}
#search input:focus {
outline: none;
background-color: #444;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: var(--border-radius);
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* Custom Dark Mode */
.dark-mode {
background-color: #181818 !important;
color: #e0e0e0 !important;
}
.dark-mode #masthead, .dark-mode #sections, .dark-mode ytd-guide-section-renderer, .dark-mode .style-scope.ytd-comment-renderer {
background-color: #212121 !important;
}
.dark-mode ytd-comment-thread-renderer {
background-color: #2c2c2c !important;
}
.dark-mode ytd-video-primary-info-renderer {
background-color: #181818 !important;
}
.dark-mode #dialog {
background-color: #2c2c2c !important;
}
}