/* ==UserStyle==
@name           Modern NikoMaker
@namespace      gh.princessrtfm.com/niko.html
@version        1.1
@description    A dark and modernized userstyle for NikoMaker.
@author         Logan
@preprocessor   stylus

@var select bg 'Background' [
    'Rainbow',
    'Barrens',
    'Sun'
]

NOTE: New options added in v1.1 over will have a full name instead of a 3-letter version. The ones added before v1.1 will have its name unchanged for legacy purposes.
@var checkbox lightmode "Use light mode" 0
@var checkbox ihp "Make help panels inactive when not hovered on" 1
@var checkbox imb "Make message box inactive when not in focus" 1
@var checkbox rendershadow "Add shadow to generated message box" 1
@var checkbox modernarrows "Use modern arrows on face sections" 1
@var checkbox darkenfaces "Darken faces on selection and hover" 1
@var checkbox mfp "Add more space between faces" 1
==/UserStyle== */
@-moz-document url-prefix("https://gh.princessrtfm.com/niko.html") {
    @font-face { /* if the user is running another os other than windows, we have to load the segoe ui font from another source */
        font-family: "Segoe UI Fallback";
        src: url('https://files.catbox.moe/5urap1.woff2');
    }
            
    @font-face { /* above but bold */
        font-family: "Segoe UI Fallback";
        src: url('https://files.catbox.moe/nsuj2t.woff2');
        font-weight: bold;
    }
            
    @font-face { /* italic */
        font-family: "Segoe UI Fallback";
        src: url('https://files.catbox.moe/01jrmu.woff2');
        font-style: italic;
    }
            
    @font-face { /* Segoe MDL2 Assets Fallback for systems without the font installed */
        font-family: "Segoe MDL2 Assets Fallback";
        src: url('https://files.catbox.moe/1a83ve.woff2');
    }
    
    html { /* this is for the background */
        if lightmode {
            background-color: #ccf;
        } else {
            background-color: #112;
        }
        
        if not lightmode {
            if bg == 'Rainbow' {
                background-image: linear-gradient(#211, #221, #121, #112, #212); /* rainbow looks cool :3 */
            } else if bg == 'Barrens' {
                background-image: linear-gradient(#112, #212);
            } else if bg == 'Sun' {
                background-image: radial-gradient(#330, #140a19);
            }
        } else {
            if bg == 'Rainbow' {
                background-image: linear-gradient(#faa, #ffa, #afa, #aaf, #faf); /* rainbow looks cool :3 */
            } else if bg == 'Barrens' {
                background-image: linear-gradient(#99f, #f7f);
            } else if bg == 'Sun' {
                background-image: radial-gradient(#FFDC64, #38202F);
            }
        }
            
        background-attachment: fixed;
        height: 100%;
    }
    
    body {
        if lightmode {
            color: #0a0a0a;
        } else {
            color: whitesmoke;
        }
        font-family: 'Segoe UI', 'Segoe UI Fallback', system-ui, sans-serif;
    }
    
    /* links. default windows 10 accent colours used */
    a {
        color: #0078d7;
    }
    
    a:visited {
        color: #881798;
    }
    
    if rendershadow {
        #render { /* shadow for the actual dialog box itself */
            box-shadow: 0px 0px 10px #000;
        }
    }
    
    /* "Message too long" warning */
    #errortext {
        background: #635826;
        border: 2px solid #7F6718;
        outline: 0;
        color: #ffe;
        box-shadow: 0 0 5px #7F6718;
        
        if lightmode {
            background: #FFE263;
            border-color: #FFCE30;
            box-shadow: 0 0 5px #FFCE30;
            color: #110;
        }
    }
    
    .ui-icon-alert { /* the warning icon */
        background-image: url(https://files.catbox.moe/x16mrw.svg)!important; /* Windows 10 Warning Icon - Vector Version */
        background-position: 0;
        background-size: contain;
        margin-right: 2px;
    }
    
    .face { /* seletion cursor for faces */
        cursor: pointer;
        if mfp {
            margin: 3px 6px;
        }
        transition: filter 0.1s;
    }
    
    /* detect if the display scaling being used is integer or is a .5 multiple (2x, 2.5x, 3x, etc. not 1.25x, 2.6x, etc.) and is not 1x. if so? use integer scaling on the faces & render to prevent bluriness. causes problems with the text in the render, but i dont find it bad enough to sacrifice consistency */
    @media (resolution: 1.5x), (resolution: 2x), (resolution: 2.5x), (resolution: 3x), (resolution: 3.5x), (resolution: 4x), (resolution: 4.5x), (resolution: 5x), (resolution: 5.5x), (resolution: 6x), (resolution: 6.5x), (resolution: 7x), (resolution: 7.5x), (resolution: 8x), (resolution: 8.5x), (resolution: 9x), (resolution: 9.5x), (resolution: 10x), (resolution: 10.5x), (resolution: 11x), (resolution: 11.5x), (resolution: 12x), (resolution: 12.5x), (resolution: 13x), (resolution: 13.5x), (resolution: 14x), (resolution: 14.5x), (resolution: 15x), (resolution: 15.5x), (resolution: 16x), (resolution: 16.5x), (resolution: 17x), (resolution: 17.5x), (resolution: 18x), (resolution: 18.5x), (resolution: 19x), (resolution: 19.5x), (resolution: 20x), (resolution: 20.5x), (resolution: 21x), (resolution: 21.5x), (resolution: 22x), (resolution: 22.5x), (resolution: 23x), (resolution: 23.5x), (resolution: 24x), (resolution: 24.5x), (resolution: 25x) {
        .face, #render {
            image-rendering: pixelated;
        }
    }
    
    if darkenfaces {
        .face:hover {
            filter: brightness(0.9);
        }
    
        .face#selected {
            filter: brightness(0.7);
        }
    }
    
    #faces>.face-header::before { /* those like face tabs */
        margin-right: 3px;
        font-size: 1em;
    }
    
    if modernarrows {
        #faces>.face-header::before { /* change font, increase font size to get modern icons, and fix alignment */
            font-size: 1.1em;
            font-family: 'Segoe MDL2 Assets', 'Segoe MDL2 Assets Fallback';
            vertical-align: sub;
        }
        
        #faces>.face-header:not(.collapsed)::before { /* not collapsed */
            content: '';
        }

        #faces>.face-header.collapsed::before { /* collapsed */
            content: '';
        }
    }
    
    #message { /* this is the text box */
        background: #111;
        border: 2px solid #222;
        outline: 0;
        color: white;
        box-shadow: 0px 0px 10px #111;
        transition: box-shadow 0.2s, background 0.2s;
        
        if lightmode {
            background: #eee;
            border-color: #ddd;
            box-shadow: 0 0 10px #aaa;
            color: black;
        }
    }
    
    if imb { /* text box focus states */
        #message {
            if lightmode {
                background: #fff9;
            } else {
                background: #111a;
            }
            box-shadow: none;
        }
        
        #message:focus {
            if lightmode {
                background: #eee;
                box-shadow: 0 0 10px #aaa;
            } else {
                background: #111;
                box-shadow: 0px 0px 10px #111;
            }
        }
    }
    
    /* those help boxes at the sides
    @media only screen and (max-width: 1152px) { /* screen too small? optimize the help boxes for this
        #leftbar {
            left: -10%!important;
        }
        
        if ihp {
            #leftbar:hover {
                padding-left: 10px!important;
                left: 0%!important;
            }
        }
    }
    nah whatever */

    #leftbar, #rightbar { /* universal side panel css rules */
        padding-top: 0;
        padding-bottom: 0;
        height: fit-content;
        box-shadow: 0px 0px 10px #111;
        padding-left: 10px;
        if lightmode {
            background: #eeea;
        } else {
            background: #111a;
        }
    }
    
    #leftbar { /* the left help panel */
        left: 0;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        transition: padding-left 0.2s, left 0.2s, opacity 0.2s;
    }
    
    #rightbar { /* the right help panel */
        right: 0;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        transition: padding-right 0.2s, left 0.2s, opacity 0.2s;
    }
    
    /* inactive help panels animation */
    if ihp {
        #leftbar, #rightbar {
            opacity: 0.69;
        }

        #leftbar:hover {
            padding-left: 15px;
            opacity: 1;
        }

        #rightbar:hover {
            padding-right: 10px;
            opacity: 1;
        }
    }
}