Stylus MD3 by mixcraftio

/* ==UserStyle==
@name           Stylus MD3
@version        1.0
@namespace      github.com/Mixcraftio
@description    Stylus Material Design 3 style.
@author         Mixcraftio
@license        CC0-1.0
==/UserStyle== */

@-moz-document regexp("\\w+-extension:\\/\\/.*") {
    :root{
        --md-sys-color-surface: #0e1514;
        --md-sys-color-surface-container: #1a2120;
        --md-sys-color-outline: #859492;
        
        --c60: var(--md-sys-color-outline);
        --c70: var(--md-sys-color-surface);
        --c80: var(--md-sys-color-outline);
        --c85: var(--md-sys-color-surface-container);
        --c90: var(--md-sys-color-surface);
        --c95: var(--md-sys-color-surface-container);
        --c97: var(--md-sys-color-surface-container);
        --c100: var(--md-sys-color-surface);
    }
    
    body{
        background: var(--md-sys-color-surface);
    }
    
    /* Stylus manage */
    #stylus-manage > #installed {
        padding: 0;
        margin:  10px 10px 10px calc(var(--header-width) + 10px);
        border: 2px solid var(--md-sys-color-outline);
        border-radius: 10px;
        div{
            min-height: 50px;
        }  
    }
    
    #header-resizer{
        border: none;
    }

    /* Stylus popup */
    #stylus-popup{
        width: 500px;
        max-width: unset !important; min-width: unset !important;
    }
    
    /* Stylus global */
    input[type="checkbox"]:not(.slider){
        padding: 7px;
        background: var(--accent-1);
        color: var(--md-sys-color-surface) !important;
        :hover{
            background: var(--accent-1);
            color: var(--md-sys-color-surface);
        }
    }
}