Skip to content

Piped large screen optimizations by shrugal

Screenshot of Piped large screen optimizations

Details

Authorshrugal

LicenseNo License

Categorypiped

Created

Updated

Size1.9 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Make full-width elements narrower on large screens.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         Piped Player
@version      20231118.12.48
@namespace    userstyles.world/user/shrugal
@description  Make the elements below the video narrower on large screens.
@author       shrugal
@license      No License
==/UserStyle== */

@-moz-document regexp("https?://piped\\..+") {
.suggestions-container {
    padding: 0;
}

.suggestions-container ul li {
    padding: 5px 10px;
}
}

@-moz-document regexp("https?://piped\\..+\\/(watch|shorts|live\\/).+") {
#app > div > div > div.w-full > div:first-child > :first-child {
    margin-block: 10px 20px;
}

@media (min-width: 1760px) {
    #app > div > div > div.w-full > div:first-child > :not(:first-child):not(button),
    #app > div > div > div.w-full > div:last-child,
    #app > div > div > div.w-full > hr {
        max-width: 1720px;
        margin-inline: auto;
    }

    #app > div > div > div.w-full > label,
    #app > div > div > div.w-full > div:first-child > button {
        margin-left: calc((100vw - 1720px - 40px) / 2);
    }
}
}

@-moz-document regexp("https?://piped\\..+\\/(@|c\\/|channel\\/|user\\/).+") {
@media (min-width: 1760px) {
    #app > div > div > div:last-child {
            max-width: 1720px;
            margin-inline: auto;
    }
}
}

@-moz-document regexp("https?://piped\\..+\\/(feed|trending|history|playlists|playlist\\?.+|results\\?.+)") {
@media (min-width: 1760px) {
    #app > div > div > h1,
    #app > div > div > h2,
    #app > div > div > hr,
    #app > div > div > div:not(.mobile-search, .suggestions-container) {
            max-width: 1720px;
            margin-inline: auto;
    }
    
    #app > div > div > button,
    #app > div > div > span:not(button + span),
    #app > div > div > h1 + label {
        margin-left: calc((100vw - 1720px - 40px) / 2);
    }
    
    #app > div > div > span:last-of-type {
        margin-right: calc((100vw - 1720px - 40px) / 2);
    }
}
}

Reviews

No reviews yet.