Gives YouTube Music more attractive look, adds animations, rounded edges and blur. Customizable.
YouTube Music - Frosted Glass by zgoly
Details
Authorzgoly
LicenseMIT
Categorymusic.youtube.com
Created
Updated
Size17 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
YouTube Music - Frosted Glass is a UserStyle designed to enhance the visual appeal of YouTube Music. It introduces a range of aesthetic improvements, including animations, rounded edges, and a blur effect. This style is fully customizable, allowing you to tailor the look and feel to your preferences.
Key Features
- Customizable Background: Change the background with a gradient and adjust the animation duration.
- Animations: Add animations to various elements, including the player, cover, and progress bars.
- Rounded Edges: Apply rounded corners to the music player, search box, toast notifications, tracks, and more.
- Blur Effect: Add a frosted glass effect with adjustable blur size and brightness.
- Icon Customization: Modify the size and thickness of icons.
- Hover Time Info: Customize the hover time info with animations and rounded corners.
- Search Box: Enhance the search box with animations and rounded corners.
- Toast Notifications: Round the corners of toast notifications.
- Tracks and Covers: Adjust the size and border radius of track covers and lists.
This UserStyle is designed to be flexible and easy to customize, ensuring that you can create a YouTube Music experience that suits your taste.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name YouTube Music - Frosted Glass
@namespace userstyles.world/user/zgoly
@homepageURL https://userstyles.world/style/6219/youtube-music-frosted-glass
@description Gives YouTube Music more attractive look, adds animations, rounded edges and blur. Customizable.
@author zgoly
@version 1.9.4
@license MIT
@preprocessor stylus
@var checkbox fix_page_navigation_progress 'Fix page navigation progress bar' 1
@var checkbox fix_player_offset 'Fix player offset' 1
@var checkbox fix_scrollbar_style 'Fix scrollbar style' 1
@var checkbox always_show_volume_slider 'Always show volume slider' 0
@var checkbox always_show_scroll_bar 'Always show scroll bar for body' 0
@var checkbox change_background 'Change background' 0
@var text background '⠀⠀↳ Background' linear-gradient(135deg, rgba(255,0,0,0.5) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 35%, rgba(255,0,0,0.5) 50%)
@var range background_animation_duration '⠀⠀↳ Background animation duration' [10, 0, 20, 1, 's']
@var checkbox change_player_animation 'Change player animation' 1
@var checkbox change_cover_animation 'Change cover animation' 0
@var range player_animation '⠀⠀↳ Player animation' [1, 0, 5, 0.1, 's']
@var checkbox page_navigation_progress_animation 'Animation for page navigation progress bar' 1
@var checkbox progress_animation 'Animation for progress bar' 1
@var checkbox progress_border_radius 'Round corners for progress bar' 1
@var checkbox custom_toggles 'Custom toggles' 1
@var checkbox change_hover_time_info 'Change hover time info' 1
@var range hover_time_info_animation 'Animation for hover time info' [0.1, 0, 1, 0.1, 's']
@var range hover_time_info_border_radius 'Round corners for hover time info' [12, 1, 32, 1, 'px']
@var range player_border_radius 'Round corners for music player' [25, 1, 100, 1, 'px']
@var range tracks_cover_size 'Tracks cover size' [1.2, 1, 2, 0.1]
@var range search_box_animation 'Animation for search box' [0.5, 0, 1, 0.1, 's']
@var range search_box_border_radius 'Round corners for search box' [16, 1, 32, 1, 'px']
@var range toast_border_radius 'Round corners for toast' [16, 1, 32, 1, 'px']
@var range tracks_border_radius 'Round corners for tracks' [16, 1, 32, 1, 'px']
@var range tracks_cover_border_radius 'Round corners for tracks cover' [10, 1, 20, 1, 'px']
@var range list_border_radius 'Round corners for listbox' [16, 1, 32, 1, 'px']
@var range blur_size 'Blur size' [10, 1, 32, 1, 'px']
@var range blur_brightness 'Blur brightness' [0.5, 0.1, 1, 0.1]
@var range icon_size 'Icon size' [1, 0, 2, 0.1]
@var range icon_thickness 'Icon thickness' [0, 0, 2, 0.1]
==/UserStyle== */
@-moz-document domain("music.youtube.com") {
/* Исправление положения по оси Z для индикатора выполнения навигации по страницам */
if fix_page_navigation_progress {
yt-page-navigation-progress.ytmusic-app {
z-index: 6;
}
}
/* Исправление смещения обложки плеера */
if fix_player_offset {
#main-panel {
height: calc(100% - var(--ytmusic-player-page-vertical-padding)) !important;
}
}
/* Исправление стиля полосы прокрутки */
if fix_scrollbar_style {
html {
scrollbar-color: unset !important;
}
#items.ytmusic-carousel {
overflow: hidden;
}
}
/* Фон */
if change_background {
ytmusic-app {
background: background;
if background_animation_duration != 0 {
background-size: 300%;
animation: gradient background_animation_duration ease-in-out infinite alternate;
}
}
@keyframes gradient {
from {
background-position: 0% 50%;
}
to {
background-position: 25% 50%;
}
}
}
/* Всегда показывать ползунок громкости */
if always_show_volume_slider {
#volume-slider {
opacity: 1;
pointer-events: auto;
}
}
/* Анимция для индикатора выполнения навигации по страницам */
if page_navigation_progress_animation {
transition: 1s;
}
/* Закругление для фото (обложки, превью, и другое) */
:root {
--yt-img-border-radius: player_border_radius;
--ymfg-toggle-color: rgba(255, 255, 255, .2);
}
.ytmusic-thumbnail-renderer > img {
border-radius: player_border_radius;
}
/* Закругление для миниатюр превью */
yt-img-shadow[object-fit = CONTAIN] img.yt-img-shadow {
border-radius: tracks_cover_border_radius;
object-fit: cover;
}
/* Полоса прокрутки */
*::-webkit-scrollbar {
border-radius: 10px !important;
background: rgba(255, 255, 255, .1) !important;
}
body::-webkit-scrollbar {
border-radius: 0 !important;
}
if always_show_scroll_bar {
body {
overflow: visible !important;
}
}
*::-webkit-scrollbar-thumb {
visibility: visible !important;
border-radius: 10px !important;
background: rgba(255, 255, 255, .2) !important;
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, .4) !important;
}
/* Толщина иконок */
if icon_thickness > 0 {
path {
stroke: white;
stroke-width: icon_thickness;
stroke-linejoin: round;
}
}
/* Размер иконок */
if icon_size != 1 {
path {
transform-origin: center;
transform: scale(icon_size);
}
}
/* Анимация открытия / закрытия проигрывателя */
if change_player_animation {
/* Анимация для проигрывателя */
ytmusic-player-page {
transition: transform player_animation cubic-bezier(0.3, 0, 0.3, 1) !important;
}
/* Анимация для панели навигации */
ytmusic-app-layout > #nav-bar-background {
transition: player_animation cubic-bezier(0.3, 0, 0.3, 1) !important;
}
/* Анимация для бокового меню */
ytmusic-app-layout > #mini-guide-background {
transition: player_animation cubic-bezier(0.3, 0, 0.3, 1) !important;
}
}
/* Анимация для обложки */
if change_cover_animation {
ytmusic-player-page[mini-player-enabled]:not([player-page-open]) #player.ytmusic-player-page {
animation: fg-shrink player_animation;
}
ytmusic-player-page[mini-player-enabled][player-page-open] #player.ytmusic-player-page {
position: fixed;
animation: fg-grow player_animation forwards;
}
@keyframes fg-shrink {
0% {
position: relative;
bottom: initial;
right: initial;
width: initial;
height: initial;
opacity: 1;
}
30% {
position: relative;
opacity: 0;
}
31% {
position: fixed;
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fg-grow {
0% {
position: fixed;
bottom: calc(100vh + var(--ytmusic-mini-player-spacing));
right: calc(var(--ytmusic-mini-player-spacing)*2);
width: var(--ytmusic-mini-player-height);
height: var(--ytmusic-mini-player-height);
opacity: 1;
}
30% {
opacity: 0;
}
100% {
position: relative;
opacity: 1;
}
}
/* Скопировано с сайта т.к. без этого не работает. Может измениться в будущем */
@media(max-width: 615px) {
ytmusic-player {
--ytmusic-mini-player-height: 160px;
}
}
@media(min-width: 616px) and (max-width:1149px) {
ytmusic-player {
--ytmusic-mini-player-height: 180px;
}
}
@media(min-width: 1150px) and (max-width:1577px) {
ytmusic-player {
--ytmusic-mini-player-height: 191px;
}
}
@media(min-width: 1578px) {
ytmusic-player {
--ytmusic-mini-player-height: 226px;
}
}
}
/* Видимость страницы */
#content {
visibility: visible !important;
}
/* Обложки на главном экране */
ytmusic-background-overlay-renderer {
transition: .1s;
}
ytmusic-two-row-item-renderer a {
border-radius: tracks_border_radius !important;
}
/* Задний фон */
#player-page {
backdrop-filter: blur(blur_size) brightness(blur_brightness);
background: none !important;
}
/* Всплывающее уведомление (toast) */
tp-yt-paper-toast {
backdrop-filter: blur(blur_size) brightness(blur_brightness) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: toast_border_radius !important;
background: none !important;
}
/* Боковое меню */
tp-yt-paper-item.ytmusic-guide-entry-renderer {
transition: .1s;
border-radius: 12px;
}
ytmusic-guide-entry-renderer {
margin-bottom: 8px;
}
/* Меню сверху */
#nav-bar-background {
backdrop-filter: blur(blur_size) brightness(blur_brightness);
background: none !important;
}
#nav-bar-divider {
display: none;
}
/* Поиск и меню поиска */
ytmusic-search-box .search-box {
transition: search_box_animation;
border: none !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, .1) !important;
}
ytmusic-search-box[opened] .search-box {
background: rgba(255, 255, 255, .2) !important;
}
ytmusic-search-box #suggestion-list {
top: 0;
opacity: 0;
visibility: hidden;
display: initial !important;
backdrop-filter: blur(blur_size) brightness(blur_brightness);
border-radius: search_box_border_radius !important;
background: none !important;
transition: search_box_animation;
}
/* Исправление заднего фона для поиска */
ytmusic-search-box #suggestion-list ytmusic-search-suggestions-section {
background: none !important;
}
ytmusic-search-box #suggestion-list ytmusic-search-suggestion {
transition: 0.1s;
background: none !important;
}
ytmusic-search-box #suggestion-list ytmusic-search-suggestion:hover {
background: rgba(255, 255, 255, .1) !important;
}
ytmusic-search-box[opened] #suggestion-list {
top: calc(var(--ytmusic-search-box-height) + 16px) !important;
opacity: 1;
visibility: visible;
}
/* Панель плеера */
#player-bar-background {
backdrop-filter: blur(blur_size) brightness(blur_brightness);
background: none !important;
}
ytmusic-player-bar...