added a lot of blurring and removed elements, this is my first experience in css do not judge strictly(based on flattube)
BlurTube by VotBotCot
Details
AuthorVotBotCot
LicenseNO-REDISTRIBUTION
Categoryyoutube.com
Created
Updated
Size9.1 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 BlurTube
@namespace USO Archive
@author Ingrim4 and VotBotCot
@description `
@version 20220505.13.54
@license NO-REDISTRIBUTION
@preprocessor uso
==/UserStyle== */
@-moz-document domain("youtube.com")
{
:root {
--white: #fff;
--grey-050: #eee;
--grey-100: #ddd;
--grey-150: #ccc;
--grey-200: #bbb;
--grey-250: #aaa;
--grey-700: #1e1e1e;
--grey-750: #181818;
--grey-800: #151515;
--grey-850: #121212;
--grey-900: #0f0f0f;
--grey-950: #0a0a0a;
--red-500: #cc181e;
--red-700: #a10c0c;
--green-500: #11921a;
--standard-curve: cubic-bezier(0.4, 0.0, 0.2, 1);
--deceleration-curve: cubic-bezier(0.0, 0.0, 0.2, 1);
--acceleration-curve: cubic-bezier(0.4, 0.0, 1, 1);
--sharp-curve: cubic-bezier(0.4, 0.0, 0.6, 1);
}
/* WEBKIT-SCROLLBAR */
[hide-scrollbar] :not(#guide-inner-content)::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar,
::-webkit-scrollbar-corner {
background: #ddd;
width: 14px;
height: 14px;
}
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-thumb {
background: #aaa;
}
::-webkit-scrollbar-thumb:not(:active):hover {
background: #afafaf;
}
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:hover:active {
background: #bbb;
}
[dark] ::-webkit-scrollbar,
[dark] ::-webkit-scrollbar-corner {
background: #040406 !important;
}
[dark] ::-webkit-scrollbar-button {
display: none;
}
[dark] ::-webkit-scrollbar-thumb {
background: #333;
}
[dark] ::-webkit-scrollbar-thumb:not(:active):hover {
background: #383838;
}
[dark] ::-webkit-scrollbar-thumb:active,
[dark] ::-webkit-scrollbar-thumb:hover:active {
background: #5c5c5c;
}
/*FIREFOX-SCROLLBAR*/
[dark] *,
[dark] {
scrollbar-color: #5c5c5c #333;
}
/* VARS */
:not([style-scope]):not(.style-scope) {
--ytd-masthead-height: 64px;
/* default: 56px */
}
/* PAGE-PROGRESS */
yt-page-navigation-progress,
#progress.yt-page-navigation-progress {
height: 4px;
}
yt-page-navigation-progress {
background-color: transparent;
}
/* MASTERHEAD */
#container.ytd-masthead {
height: 64px;
}
ytd-searchbox.ytd-masthead {
padding: 0;
justify-content: center !important;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
ytd-searchbox.ytd-masthead[has-focus] {
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
#container.ytd-searchbox,
ytd-searchbox[has-focus] #container.ytd-searchbox {
border: none;
box-shadow: none;
}
#search-icon-legacy.ytd-searchbox,
#search-icon-legacy.ytd-searchbox:hover,
#search-icon-legacy.ytd-searchbox:focus {
border: none;
background: var(--ytd-searchbox-background);
}
#voice-search-button.ytd-masthead {
margin-left: 16px;
}
ytd-searchbox #container.ytd-searchbox,
ytd-searchbox #container.ytd-searchbox {
margin-left: 0;
padding-left: 1.5em;
}
ytd-searchbox[has-focus] #container.ytd-searchbox,
ytd-searchbox[has-focus] #container.ytd-searchbox {
padding-left: 1.5em;
}
ytd-searchbox[has-focus] #search-icon.ytd-searchbox,
ytd-searchbox[has-focus] #search-icon.ytd-searchbox {
display: none;
}
/* MASTERHEAD - SEARCHRESULTS */
[dark] .gsfs {
color: var(--grey-100);
}
[dark] .sbdd_b,
[dark] .sbsb_a,
[dark] .sbfl_b {
background: var(--grey-750);
}
[dark] .sbsb_d {
background: var(--grey-850);
}
[dark] .sbdd_b {
border: none;
}
[dark] .sbfl_b:hover {
color: var(--white);
}
[dark] .sbqs_c::before {
filter: invert(1);
}
/* GUIDE */
#header.ytd-app {
height: 64px;
}
/* VIDEO-PLAYER */
.ytp-swatch-color {
color: var(--red-500);
}
.ytp-swatch-background-color,
.ytp-swatch-background-color-secondary,
.ytp-settings-button.ytp-hd-quality-badge::after,
.ytp-settings-button.ytp-4k-quality-badge::after,
.ytp-settings-button.ytp-5k-quality-badge::after,
.ytp-settings-button.ytp-8k-quality-badge::after,
.ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox,
.ytp-volume-slider-handle,
.ytp-volume-slider-handle::before,
.ytp-volume-slider-handle::after,
.ytp-chrome-controls .ytp-button[aria-pressed]::after,
.ytp-sb-classic .ytp-sb-unsubscribe .ytp-sb-text,
.ytp-sb-classic .ytp-sb-subscribe:hover .ytp-sb-text {
background-color: var(--red-500);
}
.ytp-sb-classic .ytp-sb-subscribe .ytp-sb-text,
.ytp-sb-classic .ytp-sb-unsubscribe:hover .ytp-sb-text {
background: var(--red-500);
}
.ytp-volume-slider-handle::after {
opacity: .2;
}
/* SUB-BUTTON */
paper-button.ytd-subscribe-button-renderer[subscribed] .deemphasize.yt-formatted-string,
paper-button.ytd-subscribe-button-renderer[subscribed],
ytd-subscribe-button-renderer[new-subscribe-color] paper-button.ytd-subscribe-button-renderer[subscribed] yt-formatted-string.ytd-subscribe-button-renderer {
color: #fff;
}
ytd-subscribe-button-renderer[new-subscribe-color] paper-button.ytd-subscribe-button-renderer[subscribed] {
background-color: var(--red-700);
border-color: var(--red-700);
}
ytd-subscribe-button-renderer[new-subscribe-color] paper-button.ytd-subscribe-button-renderer,
ytd-subscribe-button-renderer[new-subscribe-color][button-style="COMPACT_GRAY"] paper-button.ytd-subscribe-button-renderer {
background-color: var(--red-500);
color: #fff;
border-color: var(--red-500);
}
/* TOGGLE */
.toggle-bar.paper-toggle-button {
opacity: 0.3 !important;
}
paper-toggle-button[checked]:not([disabled]) .toggle-bar.paper-toggle-button {
opacity: 0.7 !important;
}
/* LIKES & DISLIKES */
#info ytd-toggle-button-renderer:nth-of-type(1),
#info ytd-toggle-button-renderer:nth-of-type(2) {
color: var(--yt-spec-icon-inactive);
}
#info ytd-toggle-button-renderer:nth-of-type(1) .style-default-active yt-icon,
#like-button .style-default-active yt-icon {
fill: var(--green-500);
}
#info ytd-toggle-button-renderer:nth-of-type(2) .style-default-active yt-icon,
#dislike-button .style-default-active yt-icon {
fill: var(--red-500);
}
#ryd-bar-container {
background-color: var(--red-500) !important;
}
#ryd-bar-container #ryd-bar {
background-color: var(--green-500) !important;
}
}
#movie_player {
border-radius: 10px;
backdrop-filter: blur(20px);
background-color: rgba(37, 36, 36, 0.5);
}
#avatar-btn{
border-radius: 10px;
}
.ytp-miniplayer-button.ytp-button {
display: none;
}
.ytp-subtitles-button.ytp-button {
display: none;
}
.ytp-next-button.ytp-button{
display: none;
}
.style-scope.ytd-notification-topbar-button-renderer {
display: none;
}
#voice-search-button{
display: none;
}
#gs_st50{
display: none;
}
#logo-icon {
display: none;
}
#country-code, .ytp-autonav-toggle-button-container, .yt-spec-touch-feedback-shape__stroke, .style-scope.ytd-engagement-panel-title-header-renderer, .ytd-engagement-panel-title-header-renderer{
display: none;
}
.style-scope.ytd-masthead {
backdrop-filter: blur(5px);
}
.ytp-progress-bar-container{
backdrop-filter: blur(50px);
}
.ytp-scrubber-button {
backdrop-filter: blur(5px);
}
.style-scope.ytd-popup-container {
background-color: rgba(37, 36, 36, .4);
backdrop-filter: blur(10px);
border-radius: 10px;
}
.gstl_50.sbdd_a {
background-color: rgba(37, 36, 36, .4);
backdrop-filter: blur(10px);
border-radius: 10px;
}
#description, #comments, #yt-button-shape, #watch-while-engagement-panel{
background-color: rgba(37, 36, 36, 0.3);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px; /* Дополнительный отступ внутри элементов */
}
#secondary{
background-color: rgba(37, 36, 36, 0.3);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 10px; /* Дополнительный отступ внутри элементов */
margin-top: 20px; /* Отступ вверх */
}
#title, #top-row {
background-color: rgba(37, 36, 36, 0.3);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 5px; /* Дополнительный отступ внутри элементов */
margin-bottom: 10px; /* Отступ вниз */
margin-top: 10px; /* Отступ вверх */
}
.style-scope.ytd-two-column-browse-results-renderer, #details, .details.style-scope.ytd-compact-video-renderer, .style-scope.ytd-popup-container, #channel-container, #guide-inner-content, #endpoint-link, #dismissible {
background-color: rgba(37, 36, 36, 0.3);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 5px; /* Дополнительный отступ внутри элементов */
}
.style-scope.ytd-rich-metadata-row-rendere {
background-color: rgba(37, 36, 36, 0.2);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 5px; /* Дополнительный отступ внутри элементов */
margin-bottom: 10px; /* Отступ вниз */
margin-top: 10px; /* Отступ вверх */
}
.chunked.masthead-finish {
background-color: rgba(37, 36, 36, 0.1);
backdrop-filter: blur(20px);
border-radius: 40px;
margin-top: 5px; /* Отступ вверх */
}
ytd-app {
background: url("https://i.imgur.com/hhZskUd.png") no-repeat center center fixed !important;
background-size: cover !important;
}