Gives YouTube Music more attractive look, adds animations, rounded edges and blur. Customizable.
YouTube Music - Frosted Glass by zgoly
Details
Authorzgoly
LicenseCC-BY-SA-4.0
Categorymusic.youtube.com
Created
Updated
Size14 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.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.8.1
@license CC-BY-SA-4.0
@preprocessor stylus
@var checkbox fix_player_offset 'Fix player offset' 1
@var checkbox fix_scrollbar 'Fix scrollbar' 1
@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 progress_animation 'Animation 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") {
/* Фон */
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 fix_player_offset {
#main-panel {
height: calc(100% - var(--ytmusic-player-page-vertical-padding)) !important;
}
}
/* Исправление полосы прокрутки (зачем это было сломано?) */
if fix_scrollbar {
html {
scrollbar-color: unset !important;
}
#items.ytmusic-carousel {
overflow: hidden;
}
}
/* Полоса прокрутки */
*::-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 {
/* Fix */
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;
}
#song-image img {
border-radius: player_border_radius !important;
}
/* Fix */
.html5-video-player {
background: none !important;
}
/* Вкладки */
tp-yt-paper-tab {
border-radius: list_border_radius !important;
}
/* Список треков */
ytmusic-player-queue-item {
position: relative;
transition: .1s;
margin-bottom: 8px;
border-radius: tracks_border_radius;
border: none;
}
ytmusic-player-queue-item:hover {
background: rgba(255, 255, 255, 0.05);
}
ytmusic-player-queue-item > ytmusic-menu-renderer {
flex-basis: auto !important;
overflow: initial !important;
}
.left-items.ytmusic-player-queue-item {
transform: scale(tracks_cover_size);
border-radius: tracks_cover_border_r...