Authorzadencodes
LicenseNo License
Categoryyoutube.com
Created
Updated
Size4.5 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Adds a blur effect to the YouTube bar so that the ambient mode extends to the top of the page.
An optional tampermonkey script allows the menu bar to become completely transparent when installed and enabled in the style's settings.
tampermonkey Script Link:
https://greasyfork.org/en/scripts/456429-blur-youtube-menu-bar-for-ambient-mode-helper-script
/* ==UserStyle==
@name Better YouTube Ambient Mode
@author Me
@description Makes the menu bar transparent for the player blur (optional tampermonkey script)
@version 1.3.5
@namespace github.com/openstyles/stylus
@preprocessor stylus
@updateURL https://userstyles.world/api/style/8231.user.css
@var checkbox script "use tampermonkey script" 0
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/watch"),
url-prefix("http://www.youtube.com/watch") {
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
if script {
ytd-masthead[darker-dark-theme] #background.ytd-masthead {
background: transparent;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: background 0.3s, backdrop-filter 0.3s;
}
html:not([data-scroll]) {
ytd-masthead[darker-dark-theme] #background.ytd-masthead {
background: transparent;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: background 0.3s, backdrop-filter 0.3s;
}
}
/* light mode */
html:not([data-scroll='0']) {
#background.ytd-masthead {
background: #ffffff91;
backdrop-filter: blur(11px) saturate(120%);
-webkit-backdrop-filter: blur(11px) saturate(120%);
transition: background 0.3s, backdrop-filter 0.3s;
}
}
/* dark mode */
html:not([data-scroll='0']):is([dark]) {
#background.ytd-masthead {
background: #1a1a1a6e;
backdrop-filter: blur(11px) saturate(120%);
-webkit-backdrop-filter: blur(11px) saturate(120%);
transition: background 0.3s, backdrop-filter 0.3s;
}
}
}
/* not using script */
else {
/* dark mode */
html:is([dark]) {
ytd-masthead[darker-dark-theme] #background.ytd-masthead {
background: #1a1a1a6e;
backdrop-filter: blur(11px) saturate(120%);
-webkit-backdrop-filter: blur(11px) saturate(120%);
transition: background 0.3s, backdrop-filter 0.3s;
}
}
/* light mode */
ytd-masthead[darker-dark-theme] #background.ytd-masthead {
background: #ffffff91;
backdrop-filter: blur(11px) saturate(120%);
-webkit-backdrop-filter: blur(11px) saturate(120%);
transition: background 0.3s, backdrop-filter 0.3s;
}
}
}
.yt-spec-icon-badge-shape__badge {
border: 2px solid transparent;
}
ytd-page-manager {
margin-top: 0px !important;
}
ytd-watch-flexy {
margin-top: 56px !important;
}
html[dark],
[dark] {
--ytd-searchbox-background: #2f2f2f3b;
--ytd-searchbox-legacy-border-color: #2f2f2f3b;
}
html {
--ytd-searchbox-background: #e2e2e23b;
--ytd-searchbox-legacy-border-color: #b1b1b13b;
--ytd-searchbox-legacy-border-shadow-color: transparent;
}
#search-icon-legacy.ytd-searchbox {
border: 1px solid var(--ytd-searchbox-legacy-border-color);
background-color: rgba(145, 145, 145, .34);
/* search icon background color */
}
#voice-search-button.ytd-masthead {
background-color: rgba(145, 145, 145, .34);
/* voice icon background color */
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
ytd-watch-flexy[fullscreen] #player-theater-container.ytd-watch-flexy,
{
margin-top: -56px;
}
@media (max-width: 656px) {
#voice-search-button.ytd-masthead {
background-color: transparent
}
}
}
@-moz-document url-prefix("https://www.youtube.com") {
/* Invert search box suggestions */
html:is([dark]) {
.gstl_50,
.sbdd_a {
position: absolute;
filter: invert(.93);
}
}
html:is([dark]) {
.sbdd_b {
-webkit-box-shadow: 0 2px 4px #fff3;
}
}
}