/* ==UserStyle==
@name           youtube-local theme
@namespace      Sergeant λcoustic
@version        1.1.3
@description    Fixes missing elements on youtube-local in chromium browsers, and recolours it
@author         Sergeant λcoustic
@license        MIT
@preprocessor   stylus

@var checkbox   overflow-fix              "Overflow Fix"                             0
@var checkbox   theatre-fix               "Theatre Fix"                              0
@var checkbox   wider-content             "Wider Content"                            0
@var checkbox   colourise-player          "Colourise Player"                         0
@var checkbox   no-animation              "Disable Animations"                       0
@var checkbox   no-playlist               "Disable Add to local playlist buttons"    0

@var number     preview-scale             "Preview Scale"                            [1, 0, 10, 0.1]
@var number     playlist-height           "Playlist Preview Height"                  [3, 1]

@var select     theme                     "Theme"                                    ["Default", "Black-Red", "Custom"]

@var color      interface-color           "Interface Color"                          #333333
@var color      text-color                "Text Color"                               #cccccc
@var color      background-color          "Background Color"                         #000000
@var color      video-background-color    "Video Background Color"                   #080808
@var color      link-color                "Link Color"                               rgb(34, 170, 255)
@var color      visited-link-color        "Visited Link Color"                       rgb(119, 85, 255)

==/UserStyle== */

@-moz-document url-prefix("http://localhost:8080") {  
    /* Fixes a problem on chromium based browsers where a lot of text would not be displayed, seems to be fixed now but keeping it just in case */
    if overflow-fix {
        .video-item, .playlist-item {
            * {
                overflow: initial !important;
            }
        }
    }
    
    /* More of a different way of displaying videos than a fix, use with theatre mode on unless you like the sidebar overlapping the video */
    if theatre-fix {
        #video-container, #video-container-inner, #video-container-inner > video, #video-container-inner > .plyr {
            max-width: 80vw;
        
            width: fit-content;
            min-width: 74vw;
            height: 79.4vh !important;
            padding-top: 0 !important;
        }
        
        .plyr {
            position: relative !important;
            margin: auto;
        }
    }
    
    /* Makes the video page take up more screen space */
    if wider-content {
        main {
            grid-template-columns: 10vw 52vw 0 1.5vw 36.5vw;
        }
        
        .side-videos {
            grid-column: 5;
            margin-right: 10vw;
        }
        
        .video-info, .comment, .side-videos, details.replies .comment {
            max-width: none;
        }
        
        .comment .bottom-row {
            width: 100%;
        }
        
        .video-item {
            margin-right: -30px;
        }
    }
    
    /* Applies the custom colour theme to the video player, separate and off by default as it slightly differs from the default theme */
    /* Requires Plyr */
    if colourise-player {
        .plyr {
            --plyr-video-control-color: var(--text-color);
        }
        
        .plyr__control.plyr__tab-focus, .plyr__control:hover, .plyr__control[aria-expanded=true],
        .plyr__control--overlaid {
            background-color: var(--link-color) !important;
            color: var(--text-color) !important;
        }
        
        .plyr--full-ui input[type=range] {
            color: var(--link-color);
        }
        
        .plyr__preview-thumb {
            //--plyr-tooltip-background: var(--background-color);
            --plyr-tooltip-background: var(--video-background-color);
        }
        
        .plyr__menu__container {
            --plyr-menu-background: var(--background-color);
            --plyr-menu-color: var(--text-color);
            --plyr-color-main: var(--link-color);
        }
        
        .plyr__menu__container:after {
            border-top-color: var(--plyr-menu-background);
        }
    }
    
    /* Removes animations from Plyr */
    if no-animation {
        .plyr__preview-thumb {
           transition: none; 
        }
        
        .plyr__controls {
            padding: 0 !important;
            transform: none !important;
            transition: none !important;
        }
    }
    
    /* Removes all of the checkboxes and buttons for adding a video to a playlist */
    if no-playlist {
        #playlist-edit, .video-info > .checkbox, .item-checkbox[name="video_info_list"] {
            display: none;
        }
        
        .video-item {
            margin-right: 0 !important;
        }
    }
    
    /* Scale of the preview thumbnail */
    /* Requires Plyr */
    if preview-scale != 1 {
        .plyr__preview-thumb {
            --preview-scale-var: preview-scale;
            transform: translateY(10px) scale(calc(0.8*var(--preview-scale-var)));
        }
        
        .plyr__preview-thumb--is-shown {
            transform: translate(0) scale(preview-scale) !important;
        }
    }
    
    /* The number of videos from the current playlist to display at a time on the sidebar */
    if playlist-height != 3 {
        .playlist-videos {
            --playlist-height: playlist-height;
            height: calc(100px*var(--playlist-height));
        }
    }
    
    /* Custom colour stuff */
    /* The source of my inconsistent use of color and colour */
    header {
        background-color: var(--interface-color)
    }
    
    body {
        --link-color: rgb(34, 170, 255);
        --visited-link-color: rgb(119, 85, 255);
        
        if theme == "Black-Red" {
            --interface-color: #181818;
            --text-color: #ccc;
            --background-color: #1d1d1d;
            --video-background-color: #000;
            
            --link-color: rgb(166, 47, 51);
            --visited-link-color: rgb(113, 30, 33);
            --link-color-rgb: 166, 47, 51;
            --visited-link-color-rgb: 113, 30, 33;
        }
        else if theme == "Custom" {
            --interface-color: interface-color;
            --text-color: text-color;
            --background-color: background-color;
            --video-background-color: video-background-color;
            
            --link-color: link-color;
            --visited-link-color: visited-link-color;
            --link-color-rgb: red(link-color), green(link-color), blue(link-color);
            --visited-link-color: red(visited-link-color), green(visited-link-color), blue(visited-link-color);
        }
    }
    
    
}