/* ==UserStyle==
@name           Perchance - Dark Mode
@namespace      github.com/5qc
@version        1.0.0
@description    Converts Perchance into a dark-mode themed website (and also some extra tweaks)
@author         5qc
@preprocessor   stylus
==/UserStyle== */
@-moz-document url-prefix("https://perchance.org"), url-prefix("http://perchance.org") {
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
    :root {
        --light: #f8f9fa;
        --light2: #c1c3c5;
        --dark: #222;
        --dark2: #3f4448;
        --dark3: #484e52;
        --dark4: #52585c;
        --dark5: #62686c;
        --black: #000;
        --black2: #333;
        
        --font: "Roboto Mono", monospace;
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    html > body {
        background-color: var(--dark);
        color: var(--light);
        font-family: var(--font);
    }
    
    code {
        background-color: var(--light) !important;
        color: var(--dark);
    }
    input[type="email"],
    input[type="password"],
    input[type="text"] {
        background: var(--dark2);
        border: none !important;
    }
    
    a:link,
    account-modal span.link,
    login-modal span.link,
    settings-modal span.link,
    revisions-modal span.link,
    comments-modal span.linkk {
        color: var(--light);
    }
    a:hover,
    account-modal span.link:hover,
    login-modal span.link:hover,
    settings-modal span.link:hover,
    revisions-modal span.link:hover,
    comments-modal span.link:hover {
        text-decoration: none;
    }
    a:visited {
        color: var(--light2);
    }
    
    .menu-item {
        &:hover {
            background: var(--dark2) !important;
        }
        &[style*="color:green"] {
            color: #b5cea8 !important;
        }
        &.discord {
            color: black;
        }
    }
    
    .folder-header:hover {
        background: var(--dark2) !important;
    }
    .modal-header input {
        background: var(--dark2);
        border: 2px solid var(--dark3);
        border-radius: 5px;
        outline: none !important;
    }
    .modal-footer button {
        border-radius: 0px !important;
        background: var(--black) !important;
        transition: 0.25s background;
    }
    .modal-footer button:hover {
        background: var(--black2) !important;
        transition: 0.25s background;
    }
    button:not([style="width:100%;"]) {
        background: var(--dark2);
        border-radius: 5px;
        transition: 0.25s background;
    }
    button:hover {
        background: var(--dark3);
        transition: 0.25s background;
    }
    button[ref="warningsModalOpenButton"] {
        border: none;
        color: var(--dark);
    }
    
    account-modal .content-wrapper,
    login-modal .content-wrapper,
    settings-modal .content-wrapper,
    revisions-modal .content-wrapper,
    comments-modal .content-wrapper,
    .warningsModal .content-wrapper {
        background-color: var(--dark) !important;
        color: var(--light);
    }
    .warningsModal .content-wrapper div[style*="background: #eaeaea;"] {
        background-color: var(--dark2) !important;
    }
    account-modal .content-wrapper p,
    login-modal .content-wrapper p,
    settings-modal .content-wrapper p,
    revisions-modal .content-wrapper p,
    comments-modal .content-wrapper p {
        color: var(--light);
    }
    account-modal button,
    login-modal button,
    settings-modal button,
    revisions-modal button,
    comments-modal button {
        background-color: var(--black);
        color: var(--light);
        transition: 0.25s background-color;
    }
    account-modal button:hover,
    login-modal button:hover,
    settings-modal button:hover,
    revisions-modal button:hover,
    comments-modal button:hover {
        background-color: var(--black2);
        transition: 0.25s background-color;
    }
    
    b[style="color:#ff6800; "] {
        color: salmon !important;
    }
    
    ::-webkit-scrollbar {
        width: 10px;   
    }
    ::-webkit-scrollbar-track {
        background-color: var(--dark2); 
    }
    ::-webkit-scrollbar-thumb {
        background-color: var(--dark4); 
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--dark5);
    }
    ::-webkit-scrollbar-corner {
        background-color: var(--dark2);
    }
    
    ::-moz-selection {
        background: var(--dark3) !important;
    }
    ::selection {
        background: var(--dark3) !important;
    }
    
    /** Code Mirror **/
    #c,
    #f {
        border: none;
    }
    .CodeMirror-sizer,
    .CodeMirror-scroll {
        background-color: var(--dark);
    }
    .CodeMirror-gutters {
        background-color: var(--dark2);
        border: none;
    }
    .CodeMirror-scrollbar-filler {
        background: var(--dark2);
    }
    
    .CodeMirror-cursor {
        border-color: var(--light);
    }
    
    .CodeMirror-line {
        color: var(--light) !important;
    }
    .CodeMirror-activeline-background {
        background: transparent !important;
    }
    
    .cm-s-default .cm-keyword {color: #C3B1E1;}
    .cm-s-default .cm-atom {color: #569CD6;}
    .cm-s-default .cm-number {color: #B5CEA8;}
    .cm-s-default .cm-def {color: #C586C0;}
    .cm-s-default .cm-variable,
    .cm-s-default .cm-punctuation,
    .cm-s-default .cm-property,
    .cm-s-default .cm-operator {color: #9CDCFE;}
    .cm-s-default .cm-variable-2 {color: #2795EE;}
    .cm-s-default .cm-variable-3 {}
    .cm-s-default .cm-comment {color: #6A9955;}
    .cm-s-default .cm-string {color: #CE9178;}
    .cm-s-default .cm-string-2 {}
    .cm-s-default .cm-meta {color: #9CDCFE;}
    .cm-s-default .cm-qualifier {color: #D7BA6E;}
    .cm-s-default .cm-builtin {color: #D7BA6E;}
    .cm-s-default .cm-bracket {color: #808080;}
    .cm-s-default .cm-tag {color: #569CD6;}
    .cm-s-default .cm-attribute {color: #9CDCFE;}
    .cm-s-default .cm-hr {}
    .cm-s-default .cm-link {}
    
    /* Perchance Syntax Highlighting */
    .cm-syntax-style1 {
        color: #f18c16;
    }
    .cm-syntax-style2 {
        color: #2795EE;
    }
    .cm-syntax-style3-comment {
        font-style: italic;
    }
    
    /** Console **/
    perchance-console {
        border: none !important;
        box-shadow: none !important;
        border-radius: 10px;
    }
    perchance-console #console-input {
        background: var(--dark3);
        color: var(--light);
    }
    perchance-console #console-output {
        background: var(--dark2);
        color: var(--light);
    }
    perchance-console #interpreterOption {
        color: var(--dark);
    }
}