Меняем положение плеера в Яндекс.Музыке

Пример приведу на популярном браузере Google Chrome с использованием расширения User CSS.


Две главные претензии из этой статьи к интерфейсу music.yandex.ru — длинный путь курсора от вкладки до плеера и высокая вероятность ошибки при работе с прогресс-баром:

Изменяем высоту индикатора воспроизведения трека

Код, который достаточно добавить в расширение User CSS, чтобы увеличить область перемотки песни.

/* ранее высота была 5 пикселей */
.progress__bar,
.progress__bg {
  height: 16px;
}

/* отключаем анимацию «увеличения» высоты */
.bar__content:hover .progress .progress__bg,.bar__content:hover .progress .progress__bar {
animation: none !important;
-webkit-animation: none !important;
-moz-animation: none !important;
}



Изменяем местоположение панели

Чтобы разместить панель наверх страницы дополните выше код этим:

/* создаём небольшое пространство сверху для плеера */
.page-root {
  padding-top: 80px;
}

/* помещаем панель управления треком наверх */
.bar {
  top: 0;
  bottom: unset;
}

/* прогресс-бар перемещаем под панель */
.progress {
  top: 60px;
}

/* исправляем положение рекламного места справа */
.sidebar_fixed {
  top: 75px;
}

/* исправленим положение очереди прослушивания */
.body_bar-tall .popup_page,
.popup_page {
  bottom: 0;
}

/* убираем рекламу о подписке «Плюс» */
.bar-below_plus {
  display: none;
}


Получившийся результат:

August 9, 2018
by Roman
0
165
CSS
frontend
UX/UI
Show more