Piped large screen optimizations by shrugal

/* ==UserStyle==
@name         Piped large screen optimizations
@version      20250309.19.43
@namespace    https://userstyles.world/user/shrugal
@description  Make video grids and elements below player narrower on large screens. Move elements on the player page around to center the video. Improve preferences readability.
@author       shrugal
@license      No License
==/UserStyle== */

@-moz-document regexp("https?://piped\\..+") {
.suggestions-container {
    padding: 0;
    
    ul li {
        padding: 5px 10px;
        
        &:has(a[href="/results?search_query="]) {
            display: none;
        }
    }
}
}

@-moz-document regexp("https?://piped\\..+\\/(watch|shorts|live\\/).+") {
#app > div > div {
    /* Video */
    .player-container  {
        margin-top: 10px;
        
        & + button {
            margin-top: 10px;
            
            &:not(:hover) {
                opacity: 0.2;
            }

            &:hover {
                background-color: rgba(45,45,45,var(--un-bg-opacity));
            }
        }
    }
    
    /* Main frame */
    & > div.w-full > div:last-child {
        position: relative;
            
        @media (min-width: 1760px) {
            max-width: 1720px;
            margin-inline: auto;
        }

        /* Chapters, Playlist, Recommendations */
        & > .flex-none {
            margin-top: 10px;

            @media (min-width: 2560px) {
                position: absolute;
                top: 0;
                left: 100%;
                margin-inline: 20px;
                min-width: 385px;

                /* Chapters, Playlist */
                .overflow-y-scroll,
                .overflow-y-auto {
                    margin-bottom: 20px;
                }
            }
        }
    }
}
}

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

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

@-moz-document regexp("https?://piped\\..+\\/(preferences).*") {
#app > div > div {
    .pref {
        padding: .5rem;

        select {
            min-width: 200px;
            padding-inline: 5px;
        }
    }
    
    @media (min-width: 1024px) {
        & > #instancesList,
        & > table,
        & > p {
            max-width: 1720px;
            margin-inline: auto;
        }
        
        & > button:first-of-type {
            margin-left: 15vw;
        }
    }

    @media (min-width: 2530px) {
        .pref {
            max-width: 1720px;
            margin-inline: auto;
        }
        
        & > button:first-of-type {
            margin-left: calc((100vw - 1760px) / 2);
        }
    }
}
}