Full width youtube by sergio9929

/* ==UserStyle==
@name           Full width youtube
@namespace      sergio9929
@version        20240412.0.1
@description    Take advantage of your large screen
@author         sergio9929 (https://sergio-rodriguez.web.app/)

@preprocessor   stylus
@var            checkbox    timeline     "Custom timeline"        1
@var            checkbox    comments     "More readable comments" 1
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/watch") {
    :root {
        --sergio-margin: var(--ytd-margin-3x);
    }

    #content {
        overflow: hidden;
    }

    #columns {
        width: 100% !important;
        max-width: 100% !important;
    }

    #primary {
        width: 100%!important;
        max-width: 100% !important;
    }

    #player-container-outer {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 100px) !important;
    }

    #player-container-inner #player-container {
        max-height: calc(100vh - 100px) !important;
    }

    #player-container-inner .html5-video-container video {
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        max-height: calc(100vh - 100px) !important;
    }

    #player-container-inner .ytp-tooltip.ytp-bottom {
        top: auto !important;
        bottom: 50px !important;
    }

    #player-container-inner .ytp-tooltip.ytp-bottom.ytp-preview:not(.ytp-text-detail) {
        bottom: 100px !important;
    }

    #player-container-inner .ytp-tooltip.ytp-bottom.ytp-preview.ytp-text-detail {
        bottom: 50px !important;
    }

    .ytp-fit-cover-video .html5-main-video {
        object-fit: contain;
    }

    if comments {
        #sections,
        #description-inline-expander,
        #info-container,
        ytd-merch-shelf-renderer,
        ytd-metadata-row-container-renderer {
            font-size: 15px;
            line-height: 1.5;
            max-width: 80ch;
            display: block;
            margin-inline: auto;
        }

        #info-container {
            margin-bottom: 1em;
        }

        #info-container .animated-rolling-number-wiz {
            font-size: 15px;
        }

        #content-text.ytd-comment-renderer {
            font-size: inherit;
        }

        #paid-comment-background.ytd-comment-renderer,
        #comment.ytd-comment-thread-renderer {
            border-radius: var(--sergio-margin);
        }
    }

    if timeline {
        @media (min-width: 1800px) {
            #player-container-inner .ytp-tooltip.ytp-bottom {
                bottom: 80px !important;
            }

            #player-container-inner .ytp-tooltip.ytp-bottom.ytp-preview:not(.ytp-text-detail) {
                bottom: 120px !important;
                margin-left: var(--sergio-margin) !important;
            }

            #player-container-inner .ytp-tooltip.ytp-bottom.ytp-preview.ytp-text-detail {
                bottom: 80px !important;
            }

            #player-container-inner .ytp-chrome-bottom {
                padding: var(--sergio-margin) !important;
                padding-bottom: 0 !important;
                background-color: hsla(0, 0%, 5.88%, .5) !important;
                border-radius: var(--sergio-margin) !important;
                bottom: var(--sergio-margin) !important;
                backdrop-filter: blur(100px) !important;

                /* left: var(--sergio-margin) !important;
                right: var(--sergio-margin) !important;
                margin: auto !important; */
            }

            #player-container-inner .ytp-progress-bar-container {
                width: calc(100% - var(--sergio-margin) * 2);
                left: var(--sergio-margin);
            }

            #player-container-inner .ytp-left-controls {
                margin-left: calc(-1 * var(--sergio-margin));
            }

            #player-container-inner .ytp-right-controls {
                margin-right: calc(-1 * var(--sergio-margin));
            }
        }
    }
}