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
Code size16 kB
Code checksumf5d4d879
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.5
@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_player_animation 'Change player animation' 1
@var checkbox change_cover_animation 'Change cover animation [BETA]' 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 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 {
background: none;
}
/* Миниатюры */
.thumbnail-image-wrapper > img {
border-radius: tracks_cover_border_radius !important;
}
ytmusic-player-expanding-menu {
backdrop-filter: blur(blur_size) brightness(blur_brightness);
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: toast_border_radius !important;
background: none !important;
}
/* Плеер */
ytmusic-player {
background: none;
border-radius: player_border_radius !important;
}
.song-media-controls.ytmusic-player {
border-radius: player_border_radius !important;
}
.html5-video-container > video {
border-radius: player_border_radius !important;
}
/* Исправление заднего фона для видео плеера */
.html5...