Piped large screen optimizations by shrugal

/* ==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);
    }
}
}