Lame attempt at creating dark mode for roll20.net

roll20.user.css

/* ==UserStyle==
@name           roll20.net dark mode
@namespace      github.com/openstyles/stylus
@version        1.0.3
@description    Lame attempt at creating dark mode
@author         [email protected]
==/UserStyle== */

@-moz-document domain("app.roll20.net") {
    :root
    {
        --primary: hsl(0, 0%, 2%);
        --secondary: hsl(0, 0%, 13%);
        --special: hsl(35, 62%, 36%);
        
        --text-primary: hsl(0, 0%, 98%);
        --text-secondary: hsl(0, 0%, 82%);
        --text-special: hsl(40, 43%, 97%);
        
        --input-bg: hsl(0, 0%, 13%);
        --input-fg: hsl(0, 0%, 98%);
        
        --button-bg: linear-gradient(
            0deg,
            hsl(0, 0%, 10%)
            0%,
            hsl(203, 6%, 26%)
            100%
        );
        --button-fg: hsl(0, 0%, 100%);
        --button-border: hsl(203, 6%, 26%);
        
        --scrollbarBG: hsl(200, 4%, 16%);
        --thumbBG: hsl(200, 3%, 45%);
    }

    /** general stuff **/
    #editor-wrapper
    {
        background: var(--primary);   
    }
    .ui-widget-content
    {
        background: var(--primary) !important;
        color: var(--text-secondary) !important;
        border-color: var(--secondary) !important;
    }
    .ui-dialog .ui-dialog-titlebar
    {
        border-color: var(--secondary) !important;
        color: var(--text-primary) !important;
    }
    .ui-dialog .ui-dialog-title
    {
        color: var(--text-primary) !important;
    }
    h1, h2, h3, h4, h5, h6
    {
        color: var(--text-primary);   
    }
    .dd-content,
    label
    {
        color: var(--text-secondary);   
    }
    .folderroot .dd-content
    {
        border-color: var(--secondary) !important;
    }
    
    /** "navigation" **/
    #rightsidebar ul.tabmenu
    {
        position: static;
        background: var(--secondary) !important;
        color: var(--text-secondary) !important;
        border-color: var(--secondary) !important;
    }
    .ui-widget-header .ui-state-default
    {
        text-shadow: 0px 1px var(--secondary);
    }
    #rightsidebar .ui-tabs-panel
    {
        top: 0;
    }
    
    /** chat messages **/
    .textchatcontainer .message
    {
        background: inherit;
    }
    .textchatcontainer .message .spacer
    {
        background: inherit;
    }
    
    .textchatcontainer .message.you
    {
        background: inherit;
        box-shadow:
            inset 0px 0px 0px 1px var(--special),
            0px 0px 15px var(--special);
    }
    .textchatcontainer .message.you .spacer
    {
        background: inherit;
    }
    
    /** chat input **/
    #textchat-input
    {
        background: var(--primary) !important;
        color: var(--text-secondary) !important;
        border-color: var(--secondary) !important;
    }
    #textchat-input textarea
    {
        background: var(--input-bg);
        border-color: var(--secondary);
        color: var(--input-fg);
    }
    
    /** button elements **/
    .btn,
    .btn.btn-default,
    #sidebarcontrol
    {
        background: var(--button-bg);
        color: var(--button-fg);
        border: var(--button-border);
    }
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default
    {
        background: var(--button-bg);
        color: var(--button-fg);
        border: var(--button-border);    
    }
    .ui-icon.ui-icon-closethick
    {
        background-color: #e44d4d;
        background-origin: content-box;
        padding: 2px;
    }
    
    /** roll results **/
    .textchatcontainer .formula,
    .textchatcontainer .rolled
    {
        background: var(--secondary);
        color: var(--text-secondary);
        border: var(--primary);
    }
    .diceroll .didroll
    {
        text-shadow:
            -1px -1px 1px #000,
            1px -1px 1px #000,
            -1px 1px 1px #000,
            1px 1px 1px #000
        ;
        color: var(--text-special);
    }
    /** sheet rolls **/
    .sheet-rolltemplate-mancerroll div.sheet-charname,
    .sheet-rolltemplate-pc div.sheet-charname,
    .sheet-rolltemplate-npc div.sheet-notes,
    .sheet-rolltemplate-pc div.sheet-notes
    {
        background: var(--secondary);
        color: var(--text-secondary);
        border: var(--primary);
    }
    .sheet-rolltemplate-pc .sheet-lbl
    {
        color: var(--text-primary);
    }
    .sheet-rolltemplate-npc span.sheet-notes,
    .sheet-rolltemplate-pc span.sheet-notes
    {
        color: var(--text-secondary);
    }
    img.sheet-brdright,
    img.sheet-brdleft
    {
        display: none !important;
    }
    .sheet-rolltemplate-mancerroll .sheet-bordered,
    .sheet-rolltemplate-pc .sheet-bordered
    {
        background: var(--secondary);
        color: var(--secondary);
    }
    .sheet-rolltemplate-mancerroll .inlinerollresult,
    .sheet-rolltemplate-pc .inlinerollresult,
    .sheet-rolltemplate-pc a[href^="~"],
    .sheet-rolltemplate-mancerroll .sheet-flexatk,
    .sheet-rolltemplate-pc .sheet-flexatk,
    .sheet-symbol
    {
        color: var(--text-secondary);
    }
    .sheet-rolltemplate-mancerroll .sheet-bordered .sheet-myrow:nth-child(2n+1),
    .sheet-rolltemplate-pc .sheet-bordered .sheet-myrow:nth-child(2n+1),
    .sheet-rolltemplate-pc div.sheet-desc
    {
        background: var(--primary);
    }
    
    /** turn order **/
    #initiativewindow ul li
    {
        background: var(--secondary);
        color: var(--text-secondary);
        border: var(--primary);
    }
    #initiativewindow ul li:first-child
    {
        color: hsl(0, 0%, 30%);
    }
    
    /** scroll bars **/
    *
    {
      scrollbar-color: var(--thumbBG) var(--scrollbarBG);
    }
    *::-webkit-scrollbar-track
    {
      background: var(--scrollbarBG);
    }
    *::-webkit-scrollbar-thumb
    {
      background-color: var(--thumbBG) ;
      border-radius: 6px;
      border: 3px solid var(--scrollbarBG);
    }
    
    /** varous inputs **/
    input[type="text"]
    {
        background: var(--input-bg);
        border-color: var(--secondary);
        color: var(--input-fg);
    }
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='800px' height='800px' viewBox='0 0 800 800' enable-background='new 0 0 800 800' xml:space='preserve'%3E%3Cg%3E%3Cpolygon fill='%23FFFFFF' points='720,82 400,721.6 80,82 '/%3E%3C/g%3E%3C/svg%3E%0A"), #43434e;
            background-position-x: 0%, 0%;
            background-position-y: 0%, 0%;
            background-repeat: repeat, repeat;
            background-size: auto, auto;
        background-repeat: no-repeat, repeat;
        background-position: right .7em top 50%, 0 0;
        background-size: .65em auto, 100%;
        border: 1px solid #50505c;
        color: #fff;
        padding: 5px;
        line-height: normal;
    }
}