Skip to content

Instantly share code, notes, and snippets.

@hyphenc
Last active Aug 26, 2021
Embed
What would you like to do?
monochrome and minimalistic youtube ui
/* firefox's "copy > css selector" feature is seriously awesome */
/* sidebar elements (more from yt, footer, etc) */
ytd-guide-section-renderer.style-scope:nth-child(3) {
display: none;
}
ytd-guide-section-renderer.style-scope:nth-child(4) {
display: none;
}
#footer {
display: none;
}
/* subscription view: hide manage and layout buttons (top right) */
ytd-item-section-renderer.style-scope:nth-child(1) > div:nth-child(3) > ytd-shelf-renderer:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) {
display: none;
}
ytd-item-section-renderer.style-scope:nth-child(1) > div:nth-child(3) > ytd-shelf-renderer:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(4) {
display: none;
}
ytd-topbar-menu-button-renderer.style-scope:nth-child(1) {
display: none;
}
ytd-topbar-menu-button-renderer.style-scope:nth-child(2) {
display: none;
}
ytd-topbar-menu-button-renderer.style-scope:nth-child(3) {
display: none;
}
div.masthead-skeleton-icon {
display: none;
}
/* hide header buttons (upload, etc) */
ytd-topbar-menu-button-renderer.style-scope:nth-child(1) > div:nth-child(2) {
display: none;
}
ytd-topbar-menu-button-renderer.style-scope:nth-child(2) > div:nth-child(2) {
display: none;
}
div.ytd-notification-topbar-button-renderer:nth-child(1) {
display: none;
}
/* hide the infamous 'bell button' */
#notification-preference-button {
display: none;
}
/* hide the search button */
#search-icon-legacy {
display: none;
}
/* hide #hashtags below videos */
.super-title {
display: none;
}
/* >leaving comments */
#simple-box {
display: none;
}
/* set comment opacity lower, set to 1 on hover */
ytd-comment-thread-renderer {
opacity: 0.6;
}
ytd-comment-thread-renderer:hover {
opacity: 1;
}
/* hide 3 dots button next to each comment */
#action-menu {
display: none;
}
/* limit recommended videos on sidebar */
#secondary-inner {
height: 1150px;
overflow: hidden;
}
/* topleft logo */
#logo,
#country-code,
ytd-topbar-logo-renderer {
visibility: hidden !important;
}
/* 'SUBSCRIBE' button color */
paper-button.ytd-subscribe-button-renderer {
background: #242424;
}
/* 'SUBSCRIBE' button text color */
#subscribe-button > ytd-subscribe-button-renderer > paper-button > yt-formatted-string {
color: #e3e3e3;
}
/* make toggle buttons #eee instead of blue */
#toggleButton {
background: #ccc;
}
/* progress bar: red->darkgrey */
.ytp-play-progress {
background: #3d3d3d;
}
*:focus,
* {
outline: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* one color for the video page */
ytd-watch-flexy.style-scope {
background: #282828;
}
#movie_player {
background: #282828;
}
.ytp-scrubber-button {
background: #1d1d1d;
}
ytd-playlist-panel-renderer.style-scope:nth-child(5) > div:nth-child(1) {
border: none !important;
}
#playlist-items {
background: #282828;
}
/* filter on all the images */
img {
filter: contrast(0.9) grayscale(0.1) opacity(0.6) blur(1px);
}
/* hide three dot menu on video page */
ytd-menu-renderer.ytd-video-primary-info-renderer > yt-icon-button:nth-child(2) {
display: none;
}
/* videopage: playlist view (right): lower opacity of expand arrow */
ytd-playlist-panel-renderer.style-scope:nth-child(5) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > yt-icon-button:nth-child(3) > button:nth-child(1) > yt-icon:nth-child(1) {
opacity: 0.7;
}
/* videopage: description: hide hlines, optimize spacing */
ytd-video-primary-info-renderer.style-scope {
border-bottom: none;
}
#primary-inner > div:nth-child(5) {
margin-bottom: 1em;
}
/* hide comment header */
ytd-item-section-renderer.style-scope:nth-child(2) > div:nth-child(1) {
display: none;
}
/* hide stupid 'JOIN' button */
#sponsor-button {
display: none !important;
}
/* player: quality settings: make button monochrome */
.ytp-settings-button {
filter: grayscale(1);
}
/* red -> monochrome in play settings */
.ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
background: #5d5d5d;
}
.ytp-swatch-color {
color: #9d9d9d;
}
/* cleanup search bar */
#search-input,
#search-form,
div.ytd-searchbox {
background: #282828 !important;
outline: none !important;
border: none !important;
box-shadow: none !important;
}
#search {
font-size: 18px !important;
line-height: 28px !important;
color: #eee;
opacity: 0.9;
}
input {
border-radius: 10px;
border: none;
}
/* hide 'report search suggestions' div */
.sbfl_a {
display: none;
}
/* search result text color */
.sbsb_b > li {
color: #eee !important;
background: #282828;
}
/* search: previous searches text color */
.sbpqs_a {
color: #eee;
}
/* hover in search results */
.sbsb_b > li:hover {
color: #282828;
background: #ccc;
}
.sbdd_b {
margin-top: -4px;
border-top: 1px solid rgba(204, 204, 204, 0.7) !important;
}
.sbsb_b {
margin-top: -10px;
}
.sbsb_a {
background: #282828;
border: 1px solid #fff;
}
/* fixes for stupid polyfilling */
#columns {
background: #282828;
}
/*fix search results (when query sent) */
page-manager {
background: #282828;
}
/*fix 'home' page bg */
#primary {
background: #282828;
}
/*fix playlist view (left column) bg */
ytd-playlist-sidebar-renderer.style-scope {
background: #282828;
}
/* red progessbar -> monochrome */
#progress.ytd-thumbnail-overlay-resume-playback-renderer {
background: #ffe;
}
/* 'Subscriptions', 'Trending' view: make sidebars a lighter grey; also channel header and others */
ytd-browse.style-scope,
#channel-header,
#tabs-inner-container,
ytd-search {
background: #282828 !important;
}
/* hide that blue dot next ta a channel name in your subscriptions (indicates new content) */
#newness-dot {
display: none !important;
}
/* set color, etc. of text and icons */
yt-formatted-string,
#upnext,
#video-title,
#title {
opacity: 0.85;
color: #ffe;
}
yt-icon {
opacity: 0.7;
color: #999;
}
/* hide 'clarify' / infobox between video and video title (is only displayed on certain videos) */
#clarify-box {
display: none;
}
/* theater mode: playlist view on the right: shift first item in playlist up to hide horizontal black line */
ytd-playlist-panel-video-renderer.style-scope:nth-child(1) {
margin-top: -0.32em;
}
/* playlist view: right: if not enough videos, set color of that 'empty' space */
ytd-two-column-browse-results-renderer.style-scope {
background: #282828;
}
/* like bar: blue -> grey */
#like-bar {
background: #aaa !important;
}
/* recolor external links */
a.yt-simple-endpoint.style-scope.yt-formatted-string {
color: #7ec4ea;
}
/* recolor background of first element of suggestion row on home */
ytd-feed-filter-chip-bar-renderer.style-scope {
display: none;
}
/* hide voice input icon right of search bar */
#voice-search-button, #voice-search-button > ytd-button-renderer {
display: none !important;
}
/* hide bubbles over recommended videos (right) */
#items > yt-related-chip-cloud-renderer {
display: none;
}
/* heart icon on 'comment liked by creator' color: red -> grey */
#hearted > svg {
color: #ccc;
}
/* 26-08-2021 style the save, clip, etc buttons */
#text {
color: #bbb !important;
}
/* 26-08-2021 hide clip button below video */
#top-level-buttons-computed > ytd-button-renderer:nth-child(4) {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment