YouTube with Google's Material design
Material YouTube(WORKING 2024!) by Colurswitch
Details
AuthorColurswitch
LicenseCC Creative Commons
Categoryyoutube.com
Created
Updated
Size11 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Material YouTube
@version 20240304.03.14
@namespace https://userstyles.world/user/Colur
@description YouTube with Google's Material design
@author Colur
==/UserStyle== */
@-moz-document regexp("https?://(www\\.)?youtube\\.com/.*") {
@import "https://res.cloudinary.com/finnhvman/raw/upload/matter/matter-0.2.2.css";
ytd-app {
background: rgb(255, 72, 101);
background: linear-gradient(90deg, rgba(65, 255, 240, 1) 0%, rgba(0, 194, 255, 1) 100%);
display: block;
left: 0;
min-height: 100%;
position: absolute;
right: 0;
top: 0;
scrollbar-color: var(--yt-spec-text-secondary) transparent;
}
#dismissible {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
background: white;
border-radius: 12px;
box-shadow: 0px 10px 12px 0px rgba(0, 0, 0, 0.15);
}
* {
font-family: "Product Sans" !important;
}
#avatar-link {
height: 36px;
margin-top: 12px;
margin-right: 12px;
margin-left: 12px;
}
.ytd-app ytd-mini-guide-renderer {
position: fixed;
left: 0;
top: auto;
bottom: 0;
width: 100%;
padding: 0px;
box-sizing: border-box;
}
ytd-guide-entry-renderer {
display: block;
position: relative;
border-radius: 10px;
width: calc(100% - 5px);
}
ytd-app[mini-guide-visible] ytd-page-manager.ytd-app {
margin-left: 0px;
}
.ytd-mini-guide-renderer#items {
margin-top: 0px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
ytd-mini-guide-entry-renderer {
position: relative;
background-color: var(--yt-spec-base-background);
border-radius: 0px;
width: 100%;
display: flex;
justify-content: center;
}
ytd-mini-guide-entry-renderer[aria-selected=true] {
position: relative;
background-color: teal;
width: 100%;
color: white;
display: flex;
justify-content: center;
}
ytd-mini-guide-entry-renderer[is-active] .guide-icon.ytd-mini-guide-entry-renderer {
color: white;
}
ytd-mini-guide-entry-renderer[system-icons][aria-selected=true] .title.ytd-mini-guide-entry-renderer {
color: white;
font-weight: bold;
display: none;
}
ytd-mini-guide-entry-renderer[system-icons][aria-selected=false] .title.ytd-mini-guide-entry-renderer {
font-weight: normal;
color: black;
display: none;
}
.ytd-app ytd-app[mini-guide-visible] ytd-page-manager {
margin: 0;
}
ytd-rich-shelf-renderer #dismissible {
width: 100%;
margin-bottom: 0px;
position: relative;
padding: 17px;
border-bottom: 1px solid var(--yt-spec-10-percent-layer);
}
.yt-spec-button-view-modely {
display: flex;
width: 36px;
}
#subscribe-button-shape {
width: auto;
}
#primary-button > ytd-button-renderer > yt-button-shape > button > div {
display: block;
}
#primary-button > ytd-button-renderer > yt-button-shape{
width: auto;
}
#infocard-channel-button > ytd-button-renderer > yt-button-shape,#infocard-videos-button > ytd-button-renderer > yt-button-shape{
width: fit-content;
}
#action-buttons.ytd-video-description-infocards-section-renderer #infocard-videos-button.ytd-video-description-infocards-section-renderer, #action-buttons.ytd-video-description-infocards-section-renderer #infocard-channel-button.ytd-video-description-infocards-section-renderer {
flex: 0;
flex-basis: 0.000000001px;
}
#infocard-channel-button > ytd-button-renderer > yt-button-shape > a > div.yt-spec-button-shape-next__button-text-content,#infocard-videos-button > ytd-button-renderer > yt-button-shape > a > div.yt-spec-button-shape-next__button-text-content{
display: block;
padding-left: 5px;
}
#top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div > div > dislike-button-view-model > toggle-button-view-model > button-view-model , #top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div > div > like-button-view-model > toggle-button-view-model > button-view-model{
width: auto;
}
.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start {
border-radius: 7px 0 0 7px;
position: relative;
}
.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-end {
border-radius: 0 7px 7px 0;
}
yt-button-shape {
display: flex;
flex: 1;
flex-basis: 0.000000001px;
width: 36px;
}
.yt-spec-button-shape-next--segmented-start .yt-spec-button-shape-next--size-m {
border-radius: 7px 0 0 7px;
position: relative;
}
.yt-spec-button-shape-next--segmented-end .yt-spec-button-shape-next--size-m {
border-radius: 0 7px 7px 0;
}
.yt-spec-button-shape-next--size-m {
padding: 0 16px;
height: 36px;
font-size: 14px;
line-height: 36px;
border-radius: 7px;
}
.yt-spec-button-view-model {
display: flex;
width: 36px;
}
.improvedtube-player-button {
position: relative;
width: 40px;
height: 36px;
cursor: pointer;
fill: var(--yt-spec-icon-inactive);
margin: 0px 8px;
padding: 6px;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
outline: none;
background: none;
}
ytd-rich-item-renderer[is-post] {
width: calc(100%/var(--ytd-rich-grid-posts-per-row) - var(--ytd-rich-grid-item-margin) - .01px);
height: auto;
float: left;
}
.immersive-header-container.ytd-playlist-header-renderer {
padding: 0px;
}
.image-wrapper.ytd-hero-playlist-thumbnail-renderer {
display: block;
}
ytd-hero-playlist-thumbnail-renderer:not([is-vertical]):not([is-square]) yt-img-shadow.ytd-hero-playlist-thumbnail-renderer {
width: 100%;
height: 100%;
}
img.yt-img-shadow {
display: block;
margin-left: 0;
margin-right: 0;
max-height: none;
max-width: none;
width: 100%;
border-radius: var(--yt-img-border-radius,none);
}
.spaced-row.ytd-playlist-header-renderer>*.ytd-playlist-header-renderer {
margin: 0;
}
.play-menu.ytd-playlist-header-renderer>*.ytd-playlist-header-renderer {
flex: 0.13;
min-width: 0;
}
.metadata-action-bar.ytd-playlist-header-renderer {
display: block;
flex-direction: column;
margin-top: 16px;
}
.spaced-row.ytd-playlist-header-renderer {
display: flex;
position: absolute;
top: 312px;
left: 113px;
justify-content: space-between;
width: 51px;
}
#more-replies > yt-button-shape {
width: auto;
}
#more-replies > yt-button-shape > button > div.yt-spec-button-shape-next__button-text-content {
display: block;
}
.metadata-wrapper.ytd-playlist-header-renderer {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 25px;
}
#content.ytd-rich-item-renderer ytd-post-renderer.ytd-rich-item-renderer, #content.ytd-rich-item-renderer ytd-shared-post-renderer.ytd-rich-item-renderer, #content.ytd-rich-item-renderer ytd-mini-game-card-view-model.ytd-rich-item-renderer {
max-width: 100%;
width: 100%;
overflow: hidden;
height: auto;
}
.ytd-compact-video-renderer .details {
width: 100%;
min-width: 0;
padding: 0px;
padding-left: 5px;
padding-top: 5px;
}
ytd-rich-grid-slim-media #dismissible {
padding: 0px;
}
ytd-thumbnail[is-original-aspect-ratio] #thumbnail.ytd-thumbnail {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
#details.ytd-rich-grid-slim-media {
margin: 0 12px;
}
.button-container.ytd-rich-shelf-renderer {
background-color: transparent;
}
ytd-post-renderer[uses-compact-lockup] {
padding: 0px;
}
.ytd-compact-video-renderer ytd-compact-video-renderer:not([watch-feed-big-thumbs]) ytd-thumbnail {
height: 226.125px;
width: 100%;
max-height: inherit;
}
.ytd-compact-video-renderer #dismissible {
display: flex;
flex-direction: column;
}
.ytd-menu-rendere .ytd-menu-renderer[button-renderer] + yt-button-view-model {
margin-left: 8px;
width: 37px;
}
.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {
margin-right: 0px;
margin-left: 0px;
}
ytd-guide-entry-renderer[active] {
background-color: #00808059;
border-radius: 0px;
border-right: teal 5px solid;
color: white;
}
ytd-guide-entry-renderer[active] .ytd-guide-entry-renderer .title {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.4rem;
line-height: 2rem;
font-weight: 600;
color: teal;
}
ytd-guide-entry-renderer[active] .ytd-guide-entry-renderer .guide-icon {
color: teal;
}
#sections.ytd-guide-renderer .ytd-guide-renderer:not(:last-child) {
padding: 0px;
}
#sections.ytd-guide-renderer>ytd-guide-section-renderer.ytd-guide-renderer:not(:first-child), #sections.ytd-guide-renderer>ytd-guide-subscriptions-section-renderer.ytd-guide-renderer {
padding: 0px;
}
#sections .ytd-guide-renderer {
padding: 0px;
}
.ytd-app #guide-inner-content {
overflow: hidden;
flex: 1;
flex-basis: 0.000000001px;
overflow-y: auto;
scrollbar-color: transparent transparent;
scrollbar-width: none;
}
.ytd-masthead#background{
z-index: -1;
opacity: 1;
position: absolute;
height: 56px;
width: 100%;
background: transparent;
}
#chips-wrapper.ytd-feed-filter-chip-bar-renderer {
position: fixed;
background-color: transparent;
z-index: 2000;
display: flex;
justify-content: center;
}
ytd-feed-filter-chip-bar-renderer[fluid-width] #chips-content.ytd-feed-filter-chip-bar-renderer {
max-width: calc(var(--ytd-rich-grid-content-max-width) + 48px);
padding: 0 12px;
}
tp-yt-paper-item.ytd-guide-entry-renderer {
padding: 0 12px;
padding-left: 24px;
min-width: 0;
}
.yt-spec-button-shape-next__button-text-content{
text-overflow: ellipsis;
overflow: hidden;
display...