Skip to content

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

YouTube Material Design Ui

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;
  }
}

Reviews

No reviews yet.