Skip to content

ThemeSong Helpers by OsirisX3R0

Write a review Install Get Stylus

Details

AuthorOsirisX3R0

LicenseNo License

Categorymusic.youtube.com

Created

Updated

Size2.8 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Adds a couple of things to the styling from the Youtube Music extension ThemeSong, specifically to the full screen view

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         Youtube Music (osirisx3r0)
@version      20230807.14.35
@namespace    ?
==/UserStyle== */

@-moz-document domain("music.youtube.com") {
/* Because Open Sans just looks so good */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap");
* {
    font-family: "Open Sans" !important;
}

/* List styling */
#contents.ytmusic-shelf-renderer>*.ytmusic-shelf-renderer:not(:last-child),
#contents.ytmusic-playlist-shelf-renderer>*.ytmusic-playlist-shelf-renderer:not(:last-child) {
    border-bottom-width: 0;
    border-radius: 8px;
}

ytmusic-responsive-list-item-renderer:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Fixed width for full screen song info, so it doesn't resize and stays consistent */
#songDivContainer {
    width: 725px;
}

/* Fullscreen controls positioning */
ytmusic-app-layout[player-fullscreened]:not(:has(> ytmusic-player-page[video-mode_])) > [slot=player-bar] {
    background: transparent !important;
    opacity: 1;
    width: 725px;
    position: absolute;
    bottom: calc((100% - 700px) / 2);
    left: auto;
    right: calc((100% - 1450px) / 2);
}

/* Removing some controls */
ytmusic-app-layout[player-fullscreened]:not(:has(> ytmusic-player-page[video-mode_])) > [slot=player-bar] .thumbnail-image-wrapper.ytmusic-player-bar,
ytmusic-app-layout[player-fullscreened]:not(:has(> ytmusic-player-page[video-mode_])) > [slot=player-bar] .content-info-wrapper.ytmusic-player-bar,
ytmusic-app-layout[player-fullscreened]:not(:has(> ytmusic-player-page[video-mode_])) > [slot=player-bar] .menu.ytmusic-player-bar,
ytmusic-app-layout[player-fullscreened]:not(:has(> ytmusic-player-page[video-mode_])) > [slot=player-bar] #ts-panel-container {
    display: none;
}

/* Icon sizing */
ytmusic-app-layout[player-fullscreened]:not(:has(> ytmusic-player-page[video-mode_])) ytmusic-player-bar[player-fullscreened_] .left-controls.ytmusic-player-bar tp-yt-paper-icon-button.ytmusic-player-bar {
    width: 40px;
    height: 40px;
}

ytmusic-app-layout[player-fullscreened]:not(:has(> ytmusic-player-page[video-mode_])) ytmusic-player-bar[player-fullscreened_] .left-controls.ytmusic-player-bar .play-pause-button.ytmusic-player-bar{
    width: 58px;
    height: 58px;
}

ytmusic-app-layout[player-fullscreened]:not(:has(> ytmusic-player-page[video-mode_])) ytmusic-player-bar[player-fullscreened_] .volume-slider.ytmusic-player-bar {
    width: 75px;
}

ytmusic-app-layout[player-fullscreened]:not(:has(> ytmusic-player-page[video-mode_])) .time-info.ytmusic-player-bar {
    font-size: 11px;
}

ytmusic-app-layout[player-fullscreened]:not(:has(> ytmusic-player-page[video-mode_])) ytmusic-player-bar[player-fullscreened_] .right-controls.ytmusic-player-bar tp-yt-paper-icon-button.ytmusic-player-bar  {
    width: 40px;
    height: 40px;
}
}

Reviews

No reviews yet.