Dark-Discord by vednoc

Imported from https://gitlab.com/vednoc/dark-discord/raw/master/discord.user.styl
Details

Authorvednoc
LicenseMIT
Created atApril 02, 2021 21:30
Updated atMay 12, 2021 22:14
Applies todiscord.com
Statistics

Total views61
Total installs292
Weekly installs41
Weekly updates55
Description

Dark and light, very customizable theme for Discord.
Notes

After you install this userstyle, you can configure it from configuration menu in Stylus’ popout menu by clicking on the icon on your toolbar.

There are over 30 customizable options, including colors, so you can customize Discord in a way that it’s unique to you.
Source code

/* ==UserStyle==
@name         Dark-Discord
@namespace    gitlab.com/vednoc/dark-discord
@description  Dark and light, very customizable theme for Discord.
@author       vednoc <vednoc@pm.me> (https://github.com/vednoc)
@homepageURL  https://gitlab.com/vednoc/dark-discord
@supportURL   https://gitlab.com/vednoc/dark-discord/issues
@updateURL    https://userstyles.world/api/style/15.user.css
@version      0.61.0
@license      MIT
@preprocessor stylus

@var checkbox cg_debug     'Color generator debug' 0
@var select   cg_theme     'Base color-scheme toggle' {
    'Custom colors   *': 'custom',
    'Dark blue (old)  ': 'old',
    'Dark gray (new)  ': 'new',
}
@var color    cg_bg        'Base background color' #1f232a
@var color    cg_fg        'Base foreground color' #eeeeee
@var color    cg_ac        'Base accent color    ' #7289da

@var range    _bg_a        'Adjust background color tones' [0, -25, 25, 0.1, '%']
@var range    _fg_a        'Adjust foreground color tones' [0, -25, 25, 0.1, '%']
@var range    _ac_a        'Adjust accent color tones    ' [0,   0, 25,   1, '%']
@var range    _sc_a        'Adjust syntax color tones    ' [0,   0, 25,   1, '%']

@var range    e_size       'Emotes: Reduce emote size' [32, 24, 64, 8, 'px']
@var checkbox e_reaction   'Emotes: Larger reaction emotes' 1

@var checkbox chat_short   'Shorter chat mode' 0
@var text     chat_short_w 'Shorter chat width' 800px

@var checkbox sb_short     'Smaller sidebar mode' 1
@var text     sb_short_s   'Smaller sidebar mode size' 64px
@var text     sb_short_w   'Smaller sidebar mode breakpoint' 940px
@var text     sb_short_d   'Smaller sidebar mode hover delay' 1000ms

@var checkbox g_minimize   'Minimize guild area width' 1
@var text     g_minimize_w 'Minimize guild area breakpoint' 700px

@var checkbox g_icons      'Small guild icons' 0
@var text     g_icons_s    'Small guild icon size' 32px

@var select   compact      'Compact mode' {
    'Hide guilds   ': 'guilds',
    'Hide sidebar  ': 'sidebar',
    'Hide both    *': 'both',
}
@var text     compact_w    'Compact mode breakpoint' 540px

@var range    avatar_size  'Avatar size in info menus' [80, 80, 128, 16, 'px']
@var checkbox avatar_c_m   'Enable avatar context menu in profiles' 1
@var checkbox code_lines   'Enable code line numbers' 1

@var checkbox hide_dl_btn  'Hide "Download Apps" button' 1

@var text     f_ui         'UI font' ''font_name''
@var text     f_code       'Monospace font' ''font_name''

@var text     b_radius     'Border radius for menus' 4px

@var color    _red         'Base red color              ' #f07178
@var color    _orange      'Base orange color           ' #f78c6c
@var color    _yellow      'Base yellow color           ' #ffcb6b
@var color    _green       'Base green color            ' #aede62
@var color    _cyan        'Base cyan color             ' #89ddff
@var color    _blue        'Base blue color             ' #82aaff
@var color    _magenta     'Base magenta color          ' #9a91ea
@var color    _violet      'Base violet color           ' #c792ea
@var color    _gray        'Gray color                  ' #bbbbbb
@var color    _white       'White color                 ' #ffffff
@var color    _sh          'Shadow color                ' #00000025
==/UserStyle== */

// Class mixin.
// TODO: Add examples.
a(args, prefix = '', attr = 'class', i = '') {
    lst ?= ''
    dbg ?= args
    len ?= length(args)
    u    = unquote

    // Check arguments.
    if args[0] == 0 {
        error('Must provide valid arguments. Length of arguments is: ' + len)
    }

    // Process.
    for v, k in args {
        content: s('%s --- %s', k, v)

        // Iterate over arguments.
        if k {
            // { '--%s' % k }: 'argument: ' + args[k]
            if k == length(args) - 1 {
                lst += s('[%s*=%s]', u(attr), v)
            } else {
                lst += s('[%s*=%s], ', u(attr), v)
            }
        } else {
            // { '--%s' % k }: 'argument: ' + args[k]
            if k == length(args) - 1 {
                lst += s('[%s*=%s]', u(attr), v)
            } else {
                lst += s('[%s*=%s], ', u(attr), v)
            }
        }
    }

    // Combine.
    list = (i != '') ? s('%s%s', u(i), u(lst)) : lst
    dbg = list

    // Generate.
    { list } {
        { block }
    }
}

// Old class mixin.
/// Use it instead of: [class*='foo_bar']
w(prefix, args, attr = class, sel = '*=', i = ' ') {
    r = unquote
    list = ''

    selectors = (prefix == '>' || prefix == '~' || prefix == '+')
    prefix = (selectors) ? s('%s ', r(prefix)) : (prefix == '') ? '' : prefix

    inline_cases = (prefix == '/' || prefix == '../' || prefix == '~/' || prefix == '')
    inline = ((selectors || inline_cases) && length(args) == 1) ? '' : i

    attr = (attr == 0) ? 'class' : (attr == '_') ? '' : attr
    sel = (sel == 0) ? '*=' : (sel == '_') ? '' : sel
    // dbg_{ attr }: s('%s ::: %s ::: %s ::: %s', prefix, attr, inline, args)

    for item, index in args {
        // dbg: '' + item + ' :::::: ' + index
        if index {
            if (inline == '0') {
                list += s(' [%s%s%s]', r(attr), r(sel), item)
            } else if (inline == ' ') {
                list += s('%s%s[%s%s%s],', r(inline), r(prefix), r(attr), r(sel), item)
            } else {
                list += s('[%s%s%s]', r(attr), r(sel), item)
            }
        } else {
            if (inline == '0') {
                list += s('%s[%s%s%s]', r(prefix), r(attr), r(sel), item)
            } else if (inline != '') {
                list += s('%s%s[%s%s%s],', r(inline), r(prefix), r(attr), r(sel), item)
            } else {
                list += s('%s[%s%s%s]', r(prefix), r(attr), r(sel), item)
            }
        }
    }

    list = replace(',$', '', list)
    // dbg_list: '' + list

    { list } {
        { block }
    }
}

// Colors mixin.
/// All colors: `c: fg bd bg`
/// Only border-color: `c: 0 bd`
c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1) {
    if x != 0 && x != '_' {            color: xi is 0 ? x : x i }
    if y != 0 && y != '_' {     border-color: yi is 0 ? y : y i }
    if z != 0 && z != '_' { background-color: zi is 0 ? z : z i }
}

// SVG colors.
v(x, y = 0, xi = 1, yi = 1) {
    if x != 0 && x != '_' {   fill: xi is 0 ? x : x i }
    if y != 0 && y != '_' { stroke: yi is 0 ? y : y i }
}

// Pseudo-element builder.
P(a, _z = 0, _c = '', _p = absolute) {
    z-index:  _z
    content:  _c
    position: _p
    if a[0] is a 'call' or a[0] is a 'unit' {    top: a[0] }
    if a[1] is a 'call' or a[1] is a 'unit' {  right: a[1] }
    if a[2] is a 'call' or a[2] is a 'unit' { bottom: a[2] }
    if a[3] is a 'call' or a[3] is a 'unit' {   left: a[3] }
}

// Raw RGB mixin.
/// Convert RGBA (if t = 1) or HEX to raw rrr-ggg-bbb format.
to_rgb(input, t = 0) {
    if (t) {
        unquote(substr(join(',', slice(split(',', s('%s', input)), 0, -1)), 5))
    } else {
        unquote(slice(s('%s', rgba(input, 0)), 5, -3))
    }
}

// Raw RGBA mixin.
/// Combine `*-rgb` vars and alpha value.
to_rgba(input, alpha) {
    unquote(s('rgba(var(--%s-rgb), %s)', unquote(input), alpha))
}

// Border radius mixin.
r() { border-radius: arguments }

// Box-shadow mixin.
b() { box-shadow: arguments }

/// Remove old browser prefixes.
vendors = official

/// Feat -> Base color-scheme toggle. #32
if (cg_theme == 'custom') {
    BG = cg_bg
    FG = cg_fg
    AC = cg_ac
} else if (cg_theme == 'old') {
    BG = #1f232a
    FG = #eeeeee
    AC = #7289da
} else if (cg_theme == 'new') {
    BG = #292929
    FG = #e6e6e6
    AC = #d47d3f
}

/// Helpers.
t  = transparent
i  = !important
BA = _bg_a
FA = _fg_a
AA = _ac_a
SA = _sc_a
//w  = W // TODO: Developer only.

// Color generator.
/// NOTE: Fix the scope to avoid conflicts.
/{
    g = global

    /// Generator rules.
    if (dark(BG)) {
        a1 = (AA + 15); a2 = (AA + 30); a3 = (AA + 45); a4 = (AA + 65); a5 = (AA + 75)
        s1 = (SA + 15); s2 = (SA + 30); s3 = (SA + 45); s4 = (SA + 65); s5 = (SA + 75)
        b1 = (BA + 10); b2 = (BA - 05); b3 = (BA - 10); b4 = (BA - 15); b5 = (BA - 20)
        f1 = (FA - 10); f2 = (FA + 10); f3 = (FA + 20); f4 = (FA + 30); f5 = (FA + 40)
    } else {
        a1 = (AA + 15); a2 = (AA + 30); a3 = (AA + 45); a4 = (AA + 65); a5 = (AA + 75)
        s1 = (SA + 15); s2 = (SA + 30); s3 = (SA + 45); s4 = (SA + 65); s5 = (SA + 75)
        b1 = (BA - 10); b2 = (BA + 08); b3 = (BA + 16); b4 = (BA + 24); b5 = (BA + 32)
        f1 = (FA - 05); f2 = (FA - 10); f3 = (FA - 15); f4 = (FA - 20); f5 = (FA - 30)
    }

    /// Generate tones for base colors.
    C = {
        bg: {
            '0': darken(BG, b1)
            '1': darken(BG, 0%)
            '2': darken(BG, b2)
            '3': darken(BG, b3)
            '4': darken(BG, b4)
            '5': darken(BG, b5)
        },
        fg: {
            '0': darken(FG, f1)
            '1': darken(FG, 0%)
            '2': darken(FG, f2)
            '3': darken(FG, f3)
            '4': darken(FG, f4)
            '5': darken(FG, f5)
        },
        ac: {
            '0': mix(darken(BG,  0%), AC, 0%)
            '1': mix(darken(BG, 40%), AC, a1)
            '2': mix(darken(BG, 40%), AC, a2)
            '3': mix(darken(BG, 40%), AC, a3)
            '4': mix(darken(BG, 65%), AC, a4)
            '5': mix(darken(BG, 50%), AC, a5)
        },
        b1: {
            '0': spin(_red,  0deg - 0%)
            '1': spin(_red, 15deg - s1)
            '2': spin(_red, 30deg - s2)
            '3': mix(darken(BG, 20%), _red, s3)
            '4': mix(darken(BG, 40%), _red, s4)
            '5': mix(darken(BG, 40%), _red, s5)
        },
        b2: {
            '0': spin(_orange,  0deg - 0%)
            '1': spin(_orange, 15deg - s1)
            '2': spin(_orange, 30deg - s2)
            '3': mix(darken(BG, 20%), _orange, s3)
            '4': mix(darken(BG, 40%), _orange, s4)
            '5': mix(darken(BG, 40%), _orange, s5)
        },
        b3: {
            '0': spin(_yellow,  0deg - 0%)
            '1': spin(_yellow, 15deg - s1)
            '2': spin(_yellow, 30deg - s2)
            '3': mix(darken(BG, 20%), _yellow, s3)
            '4': mix(darken(BG, 40%), _yellow, s4)
            '5': mix(darken(BG, 40%), _yellow, s5)
        },
        b4: {
            '0': spin(_green,  0deg - 0%)
            '1': spin(_green, 15deg - s1)
            '2': spin(_green, 30deg - s2)
            '3': mix(darken(BG, 20%), _green, s3)
            '4': mix(darken(BG, 40%), _green, s4)
            '5': mix(darken(BG, 40%), _green, s5)
        },
        b5: {
            '0': spin(_cyan,  0deg - 0%)
            '1': spin(_cyan, 15deg - s1)
            '2': spin(_cyan, 30deg - s2)
            '3': mix(darken(BG, 20%), _cyan, s3)
            '4': mix(darken(BG, 40%), _cyan, s4)
            '5': mix(darken(BG, 40%), _cyan, s5)
        },
        b6: {
            '0': spin(_blue,  0deg - 0%)
            '1': spin(_blue, 15deg - s1)
            '2': spin(_blue, 30deg - s2)
            '3': mix(darken(BG, 20%), _blue, s3)
            '4': mix(darken(BG, 40%), _blue, s4)
            '5': mix(darken(BG, 40%), _blue, s5)
        },
        b7: {
            '0': spin(_magenta,  0deg - 0%)
            '1': spin(_magenta, 15deg - s1)
            '2': spin(_magenta, 30deg - s2)
            '3': mix(darken(BG, 20%), _magenta, s3)
            '4': mix(darken(BG, 40%), _magenta, s4)
            '5': mix(darken(BG, 40%), _magenta, s5)
        },
        b8: {
            '0': spin(_violet,  0deg - 0%)
            '1': spin(_violet, 15deg - s1)
            '2': spin(_violet, 30deg - s2)
            '3': mix(darken(BG, 20%), _violet, s3)
            '4': mix(darken(BG, 40%), _violet, s4)
            '5': mix(darken(BG, 40%), _violet, s5)
        }
    }

    /// Generate Stylus-lang variables.
    define('bg-' + key, val, g) for key, val in C.bg
    define('fg-' + key, val, g) for key, val in C.fg
    define('ac-' + key, val, g) for key, val in C.ac
    define('b1-' + key, val, g) for key, val in C.b1
    define('b2-' + key, val, g) for key, val in C.b2
    define('b3-' + key, val, g) for key, val in C.b3
    define('b4-' + key, val, g) for key, val in C.b4
    define('b5-' + key, val, g) for key, val in C.b5
    define('b6-' + key, val, g) for key, val in C.b6
    define('b7-' + key, val, g) for key, val in C.b7
    define('b8-' + key, val, g) for key, val in C.b8

    /// Generate Stylus-lang helpers for CSS variables.
    define('bg' + key, s('var(--bg-%s)', unquote(key)), g) for key, val in C.bg
    define('fg' + key, s('var(--fg-%s)', unquote(key)), g) for key, val in C.fg
    define('ac' + key, s('var(--ac-%s)', unquote(key)), g) for key, val in C.ac
    define('b1' + key, s('var(--b1-%s)', unquote(key)), g) for key, val in C.b1
    define('b2' + key, s('var(--b2-%s)', unquote(key)), g) for key, val in C.b2
    define('b3' + key, s('var(--b3-%s)', unquote(key)), g) for key, val in C.b3
    define('b4' + key, s('var(--b4-%s)', unquote(key)), g) for key, val in C.b4
    define('b5' + key, s('var(--b5-%s)', unquote(key)), g) for key, val in C.b5
    define('b6' + key, s('var(--b6-%s)', unquote(key)), g) for key, val in C.b6
    define('b7' + key, s('var(--b7-%s)', unquote(key)), g) for key, val in C.b7
    define('b8' + key, s('var(--b8-%s)', unquote(key)), g) for key, val in C.b8
}

@-moz-document regexp('https?://discord(app)?.com/(app|channels|library|store|gui.*|log.*)(/.*)?') {
    /// Show debug.
    if (cg_debug) {
        :root {
            content: 'a mixin'
            +a('x', i: '/') {
                --divider: _;
                --debug: dbg
                --len: len
            }
            +a(x y z) {
                --divider: _;
                --debug: dbg
                --len: len
            }
            +a(1 2 3) {
                --divider: _;
                --debug: dbg
                --len: len
            }
        }

        :root {
            &::before {
                content: \
                '  ⭐ BG: ' + luminosity(BG) + \
                '  ⭐ FG: ' + luminosity(FG) + \
                '  🌟 bg1: ' + bg-1 + \
                '  🌟 fg1: ' + fg-1 + \
                '  🌟 ac1: ' + ac-1 i
                P(0 0 0 0)
                text-align: center
                line-height: 2em
                height: 2em
                c: fg1 0 bg3
            }
            body > div[id] {
                margin-top: calc(2em + 0px)
                max-height: calc(100vh - 2em)
                b: 0 -1px bg5
            }
        }
    }

    // Use stylus-lang variables with CSS variables.
    shadow  = var(--shadow)
    sh      = var(--shadow)
    bsh     = var(--bshadow)
    white   = var(--white)
    outer   = 0 0 0 1px bg5
    inner   = inset outer
    rc      = var(--radius)

    :root, .theme-dark {
        /// Userstyle info.
        --note: 'Dark-Discord v0.61.0'

        /// Native variables.
        --header-primary:               fg1 //#ffffff
        --header-secondary:             fg4 //#b9bbbe
        --text-normal:                  fg1 //#dcddde
        --text-muted:                   fg5 //#72767d
        --text-link:                    ac0 //#00b0f4
        --channels-default:             fg4 //#8e9297
        --interactive-normal:           fg2 //#b9bbbe
        --interactive-hover:            fg1 //#dcddde
        --interactive-active:           fg0 //#ffffff
        --interactive-muted:            fg5 //#4f545c
        --background-primary:           bg1 //#36393f
        --background-secondary:         bg2 //#2f3136
        --background-secondary-alt:     bg3 //#292b2f
        --background-tertiary:          bg4 //#202225
        --background-accent:            bg5 //#4f545c
        --background-mobile-primary:    bg1 //#36393f
        --background-mobile-secondary:  bg2 //#2f3136
        --background-floating:          bg0 //#18191c
        --background-modifier-hover:    bg3 //rgba(79,84,92,0.16)
        --background-modifier-active:   bg4 //rgba(79,84,92,0.24)
        --background-modifier-selected: bg5 //rgba(79,84,92,0.32)
        --background-modifier-accent:   bg3 //hsla(0,0%,100%,0.06)
        --background-mentioned:         ac5 //rgba(250,166,26,0.05)
        --background-mentioned-hover:   ac4 //rgba(250,166,26,0.08)
        --background-message-hover:     bg0 //rgba(4,4,5,0.07)

        /// Scrollbars.
        --scrollbar-thin-thumb:                 bg5 //#202225
        --scrollbar-thin-track:                 transparent
        --scrollbar-auto-thumb:                 bg5 //#202225
        --scrollbar-auto-track:                 bg1 //#2e3338
        --scrollbar-auto-scrollbar-color-thumb: bg5 //#202225
        --scrollbar-auto-scrollbar-color-track: bg1 //#2f3136

        /// Shadows.
        --elevation-stroke:             inner //0 0 0 1px rgba(4,4,5,0.15)
        --elevation-low:                0 1px bg5 // ...0 2px 0 rgba(4,4,5,0.05)
        // --elevation-medium:             0 4px 4px rgba(0,0,0,0.16)
        --elevation-high:               0 8px 16px 2px sh //0 8px 16px rgba(0,0,0,0.24)

        /// Various backgrounds.
        --radio-group-dot-foreground:   ac1 //#8ea1e1
        --channeltextarea-background:   bg3 //#40444b
        --activity-card-background:     bg0 //#202225
        --textbox-markdown-syntax:      fg4 //#8e9297
        --deprecated-card-bg:           bg3 //#20222599
        --deprecated-card-editable-bg:  bg2 //#2022254d
        --deprecated-store-bg:          bg1 //#36393f

        /// Settings -> My account -> Edit settings.
        --deprecated-text-input-bg:              bg3 //#0000001a
        --deprecated-text-input-border:          bg4 //#0000004d
        --deprecated-text-input-border-hover:    bg5 //#040405
        --deprecated-text-input-border-disabled: bg0 //#202225
        --deprecated-text-input-prefix:          ac1 //#dcddde

        /// Modals -> Quickswitcher -> Fix input colors.
        --deprecated-quickswitcher-input-background:  bg4 //#72767d
        --deprecated-quickswitcher-input-placeholder: fg2 //#ffffff4d

        /// Reduce emoji size.
        --e-size: e_size

        /// Generate color variables.
        for _v in (bg fg ac b1 b2 b3 b4 b5 b6 b7 b8) {
            for _i in 0..5 {
                key = s('--%s-%s', _v, _i)
                /// Escape `\` for `*-0` vars.
                val = _v + \- + _i

                /// Generate CSS variables.
                { key }: val i
                { key + '-rgb' }: to_rgb(val)
            }
        }

        /// Various theme variables.
        --shadow  : _sh
        --bshadow : 0 8px 16px var(--shadow)
        --white   : _white
        --t       : transparent i
        --radius  : b_radius
        --f-mono  : f_code, Consolas, Liberation Mono, Menlo, Courier, monospace
        --f-ui    : f_ui, Whitney, Helvetica Neue, Helvetica, Arial, sans-serif
        --avatar-s: avatar_size
    }

    // Base styles.
    body {
        c: 0 0 bg0

        /// Global -> Browser defaults.
        ::selection { c: bg5 0 fg1 }
        ::-moz-selection { c: bg5 0 fg1 }

        /// Global -> Text placeholders.
        +w('', 'emptyPlaceholder') {
            &, ../ ::placeholder { c: fg2 }
        }

        /// Chat -> Placeholders in member list.
        +w('', 'GroupsPlaceholder' 'placeholderAvatar-' 'placeholderUsername-') {
            --background-primary: bg3
        }

        /// Feat -> Custom UI font.
        &, button, input, select, textarea, ::placeholder {
            font-family: var(--f-ui) i
        }

        /// Shortcuts.
        +w('', 'keybindShortcut') {
            span {
                c: fg1 bg4 bg2
                b: inset 0 -4px 0 bg5 i
                svg g { v: fg4 }
            }
        }

        /// App -> Core.
        +w('', 'appMount-') {
            c: 0 0 t

            /// Skeleton/Crashed page.
            +w('>', 'errorPage-') { c: 0 0 bg1 }

            /// 'No channel' page.
            +w('', 'noChannel-') {
                c: 0 0 bg1
                h4 { c: fg1 }
                h4 + div { c: fg4 }
            }

            /// Notice alert.
            +w('', 'notice-') {
                r: 0px
                +w('&', 'Brand-') { c: 0 0 ac3 }
                +w('&', 'Default-') { c: 0 0 b33 }
                +w('&', 'height36-') { c: 0 0 bg3 }
                +w('&', 'Neutral-') {
                    c: fg1 0 bg4
                    +w('', 'button-') {
                        c: fg1 bg5 bg4
                        &:hover { c: 0 0 bg5 }
                    }
                }
            }
        }

        /// User -> Status icon.
        /// TODO: Remove (obsolete?) RGB version in next version.
        [mask *= 'offline'], [fill *= '116\, 127\, 141'], /[fill *= '#747f8d'] { v: fg5 }
        [mask *= 'online'], [fill *= '67\, 181\, 129'], /[fill *= '#43b581'] { v: b40 }
        [mask *= 'idle'], [fill *= '250\, 166\, 26'], /[fill *= '#faa61a'] { v: b20 }
        [mask *= 'dnd'], [fill *= '240\, 71\, 71'], /[fill *= '#f04747'] { v: b10 }

        /// Sidebar -> User status.
        +a(status-, i: '/') {
            &[style *= '116\, 127\, 141'] { c: 0 0 fg5 }
            &[style *= '67\, 181\, 129'] { c: 0 0 b40 }
            &[style *= '250\, 166\, 26'] { c: 0 0 b20 }
            &[style *= '240\, 71\, 71'] { c: 0 0 b10 }
        }

        // New green color.
        svg rect[fill='#3ba55c'] { v: b40 }

        /// Badges.
        +w('', 'numberBadge-') {
            /// Global -> 'NEW' alerts.
            /.badge-_BgAUQ,
            /// Inbox -> Unreads.
            /.wrapper-232cHJ,
            /// Unread messages.
            &[style *= 'nd-color: rgb(240\, 71\, 71)'],
            &[style *= 'nd-color: rgb(237\, 66\, 69)'],
            /// Quickswitcher -> Unread messages.
            /[class *= 'quickswitcher-'] [class *= 'badge'],
            /// Guilds -> New messages.
            /[class *= 'mention-'][class *= 'bar'],
            /// Guilds -> Settings -> New settings.
            /[class *= 'gearWithBadge-'] > div:last-child,
            /// Chat -> Pinned messages.
            /[class *= 'iconBadge-'] {
                c: white 0 ac0
            }
        }

        /// Buttons.
        [role = 'button'] {
            &[style *= 'b(67\, 181\, 129'] { c: white 0 b42 }
        }

        /// Feat -> Line numbers for code blocks.
        if (code_lines) {
            pre code {
                c: fg1
                position: relative
                padding-left: 3em i
                /// -> Generate a range of numbers.
                n = ''
                for num in 1..128 {
                    n += s('%s ', num)
                    if (num == 128) {
                        n += s('%s', num)
                    }
                }
                /// -> Use a psuedo-element as line numbers.
                &::before {
                    width: 2ch
                    overflow-y: hidden
                    P(0.5em 0 0.5em 0px, 0, n)
                    padding: 0 0.5em 0 1.5em
                    white-space: pre-line
                    text-align: right
                    c: fg5
                }
            }
        }

        /// Global -> Tooltips.
        +a(tooltipBlack-, i: '/') {
            border: 1px solid bg5
            c: fg1 0 bg3
            b: 0 4px 8px shadow i

            +w('', 'Pointer-') { border-top-color: bg5 i }
        }

        /// Fix 'Server Boosting' and similar tooltips.
        +a(subscribeTooltipWrapper-, i: '/') {
            c: 0 0 ac3
            &::after { border-bottom-color: ac3 i }
        }

        /// Guilds -> Voice -> Activity popout.
        +w('', 'container-3JTnYm') {
            border: 1px solid bg5 i
            r: rc
        }

        /// Chat -> Inline mentions.
        +w('', 'mention interactive', i: '') {
            transition: 0.2s ease-in-out

            /// Hover/active states.
            &:hover, &.popout-open { c: white 0 ac1 }
            +w('/', 'mentioned-' 'mention', i: 0) { &:not(#z) { c: ac0 0 t }}

            /// Search -> Highlighted matches.
            /.highlight { c: 0 0 ac4 }
        }

        /// Global -> Bot tags.
        +a(botTagInvert-, i: '/') { c: white 0 ac0 }

        /// Global -> Context menus.
        +w('', 'contextMenu-') {
            border: 1px solid bg5 i
        }

        /// Global -> Login page.
        +w('', 'authBox-') {
            border: 1px solid bg5 i
            b: var(--elevation-high) i
            r: rc i
            c: fg5
        }
    }

    // Global -> Switches/Checkboxes.
    +w('', 'switch-') {
        &:not([class*='themeClear-']) {
            c: 0 0 bg4
            &::after { c: 0 0 fg1 }

            /// Enabled.
            +w('&', 'Checked-') {
                c: 0 0 ac1
                &::after { c: 0 0 white }
            }
        }

        +a(checkbox-, i: '/') {
            /// Squared.
            +w('&', 'box-') {
                c: 0 bg5

                /// 'Mark as spoiler' checkbox.
                &[style*='r-color: rgb(114\, 137\, 218)'] {
                    c: 0 ac1
                    svg path { v: ac1 }
                }

                /// In bars or standalone.
                &[style*='d-color: rgb(114\, 137\, 218)'] {
                    c: white ac1 ac1
                    svg path { v: white }
                }
            }

            /// Rounded.
            +w('&', 'round-') {
                &[style *= '67\, 181\, 129'] { c: 0 b41 b41 }
            }
        }
    }

    // Global -> Sliders.
    +w('', 'control-') {
        [style*="d-color: rgb(67\, 181\, 129"] { c: 0 0 b43 }
        [style*="d-color: rgb(114\, 118\, 125"] { c: 0 0 bg5 }
        rect[fill='white'] { v: bg0 }
        +w('', 'slider-') {}
    }

    // Global -> Dropdown menus.
    +w('', 'select-') {
        +w('', '-control') {
            c: red bg4 bg2
            &:hover, &:focus-within { c: 0 bg5 }
        }
        +w('', '-menu') {
            c: red bg5 bg2
            +w('', '-option') { &:hover { c: 0 0 bg3 }}
            .css-1ba14n5-option { c: 0 0 bg4 }
        }
    }

    // Guilds.
    +w('', 'wrapper-' 'guilds-', i: '') {
        /// Use theme colors.
        +w('', 'scroller-') {
            c: 0 0 bg3
            b: inset -1px 0 bg5 i

            /// Feat -> Hide 'Download Apps' button.
            if hide_dl_btn {
                +w('>', 'listItem-') {
                    &:nth-last-child(-1n+3) { display: none i }
                }
            }
        }

        /// Home item.
        +w('', 'listItem-' 'wrapper') {
            +w('', 'childWrapper-') { c: fg3 }
            +w('&', 'selected-') {
                +w('', 'childWrapper-') { c: white 0 ac2 }
            }
        }

        /// Feat -> Minimize guild area width.
        if (g_minimize) {
            @media screen and (max-width: g_minimize_w) {
                transition: 0.3s cubic-bezier(0, 0, 0.2, 1)
                max-width: 10px

                /// Expand hover region.
                overflow: unset i
                > * { z-index: 9 i }
                &::after {
                    P(0 -15px 0 0, 8)
                    // opacity: 0.5
                    // c: 0 0 ac1
                }

                /// Expand guilds area on hover.
                &:hover {
                    max-width: (g_icons_s + 20px)
                    transition-delay: 0.6s
                }
            }
        }

        /// Feat -> Smaller guild icons.
        if (g_icons) {
            $size = g_icons_s
            width: ($size + 20px)

            /// Mentions bar.
            +w('', 'nreadMentions' 'bar', i: '') { width: $size }

            /// Dividers.
            +w('', 'Separator-') {
                width: $size
                c: 0 0 bg5
            }

            /// DM icons.
            div[style*='height: 56px'] {
                margin-bottom: 8px
                height: $size i
            }

            /// Icons.
            +w('', 'listItem-') {
                padding-left: 10px
                justify-content: flex-start

                /// Unread indicators.
                +w('>', 'pill-') {
                    height: $size

                    /// Guild placeholder icon.
                    + div > [draggable = 'false'] svg {
                        width: $size i
                        height: $size i
                        div { c: 0 0 bg5 }
                    }
                }

                /// 1: Home icon.
                /// 2: Guild icons.
                +w('', 'listItemWrapper-' 'blobContainer-') {
                    +w('>', 'wrapper-') { width: $size; height: $size }
                    +w('', 'svg-') { width: $size; height: $size }
                    +w('', 'Badge-') {
                        r: 50% i
                        b: 0 0 0 3px bg3
                    }
                }

                /// Folder icons.
                > [draggable] {
                    --background-primary: bg5 // Folder placeholders.
                    +w('>', 'wrapper-') { &, ../ { width: $size; height: $size i }}
                    svg { width: $size; height: $size }
                    +w('', 'Badge-') {
                        r: 50% i
                        b: 0 0 0 3px bg3
                    }
                }

                /// Expanded folders.
                +a(expandedFolderBackground-, i: '/') {
                    width: $size
                    left: 10px i
                    r: 16px i

                    /// Add borders to expanded folders.
                    &:not([class*='collapsed']) { b: 0 0 0 2px bg4 }

                    /// Reset list height.
                    ~ [style*='height'] {
                        height: unset i
                        padding-bottom: 1px
                    }
                }
            }
        }

        /// Feat -> Compact mode.
        if (compact == 'guilds' || compact == 'both') {
            @media screen and (max-width: compact_w) {
                display: none i
                +w('+', 'base-') { left: 0px i }
            }
        }
    }

    // Sidebar.
    /// NOTE: Excludes user settings.
    :not([class*='Region']) {
        +w('>', 'sidebar-') {
            border-right: 1px solid bg5 i

            /// User status menu.
            +w('', 'panels-') {
                border-top: 1px solid bg5 i

                /// Popouts -> Status menu.
                +a(menu-, i: '/') { border: 1px solid bg5 i }
            }

            /// Main/friends area.
            +w('+', 'container-') {
                c: 0 0 bg1

                /// Header.
                +w('>', 'container-') { c: 0 0 bg2 }

                /// 'Now playing' sidebar.
                +w('', 'nowPlaying') { b: inset 1px 0 bg5 i }
            }

            /// Guild notifications.
            +w('', 'bar-') {
                c: fg1 0 bg3
                b: inner, bsh i

                +w('&', 'mention-') {
                    c: white 0 ac1
                    b: bsh i
                }
            }

            /// Feat -> Small sidebar mode.
            if (sb_short) {
                @media screen and (max-width: sb_short_w) {
                    transition: 0.3s cubic-bezier(0, 0, 0.2, 1)
                    max-width: sb_short_s

                    /// Center user icon.
                    +w('', 'panels-' 'container-', i: 0) {
                        padding: 0 16px i
                    }

                    /// Expand on hover.
                    &:hover {
                        max-width: 240px
                        transition-delay: sb_short_d i
                    }

                    /// Remove extra stuff for channels.
                    +w('', 'wrapper-' 'content-') {
                        margin: 0
                        r: 0px
                        +w('', 'icon-' 'iconItem-') { display: none i }
                    }

                    /// Reset whitespace for category name.
                    +w('', 'containerDefault-' 'clickable-', i: 0) {
                        padding-left: 8px i
                        h2 { c: fg2 }
                    }

                    /// More compact bars.
                    +w('', 'unread-' 'bar-', i: '') {
                        margin: -8px -9px 0
                        padding: 8px
                        r: 0px
                        span { font-size: 10px i }
                    }
                }
            }

            /// Feat -> Compact mode.
            if (compact == 'sidebar' || compact == 'both') {
                @media screen and (max-width: compact_w) {
                    display: none i
                }
            }

            /// App -> Server discovery.
            +w('+', 'pageWrapper-') {
                c: 0 0 bg1
            }
        }
    }

    // Settings.
    +w('', 'SidebarView-') {
        +w('', 'sidebarRegion-') {
            /// -> Add userstyle version.
            nav > div:first-child::before {
                padding: 16px 0
                margin-bottom: 16px
                content: '🌚 ' var(--note)
                text-transform: initial
                font-weight: 500
                font-size: 16px
                display: block
                b: 0 1px bg5
                c: fg1
            }
        }

        /// 'ESC' button.
        +w('', 'closeButton-') {
            c: 0 bg5
            &:hover { c: 0 0 bg3 }
            svg path { v: fg2 }
            +w('+', 'keybind-') { c: fg2 }
        }

        /// My account.
        +w('', 'viewBody-') { c: fg1 }

        /// Remove bordes from 'my account' menu.
        +w('', 'menu-') { border: none i }

        /// -> Add border to content area.
        +w('', 'contentRegion-') {
            border-left: 1px solid bg5 i
        }

        /// 'Subscriptions' colors.
        [style^='color: rgb(114\, 137\, 218);'] {
            c: ac1
            &:hover { c: 0 0 ac4 }

            ../ [style*='-color: rgb(114\, 137\, 218)'] {
                c: white ac1 ac1
            }
        }

        /// 'Log Out' colors.
        [style^='color: rgb(240\, 71\, 71);'] {
            c: b10
            &:hover { c: 0 0 b15 }
        }
    }

    // Startup.
    +w('', 'ready-') {
        +w('+', 'text-') {
            /// Tip color.
            +w('', 'tipTitle-') { c: ac1 }

            /// Add theme version to loading screen.
            +w('>', 'contentBase-') {
                padding-top: 2rem i
                font-style: italic i
                c: fg3

                /// Theme version.
                &:before {
                    content: var(--note) i
                    text-transform: initial
                }
            }
        }
    }

    // Friends -> Active now.
    +w('', 'nowPlaying' 'outer-', i: 0) {
        /// Normal state.
        c: 0 0 bg3
        +w('', 'inset-') { c: 0 0 bg2 }

        /// Hover state.
        &:hover {
            c: 0 0 bg4
            +w('', 'inset-') { c: 0 0 bg3 }
        }

        /// Active state.
        +w('&', ' active-') {
            c: 0 0 bg5
            +w('', 'inset-') { c: 0 0 bg4 }
        }

        /// Popouts.
        +a(popout-38lTFE, i: '/') {
            c: 0 0 bg0
            b: inner, bsh i

            +w('', 'separator-') { c: 0 0 bg4 }

            +w('', 'enabled-' 'ListItem', 0) {
                &:hover { c: 0 0 bg2 }
            }
        }
    }

    // Modals.
    +w('', 'modal-') {
        /// Backdrop.
        +a(backdrop, i: '/') {
            c: 0 0 bg1
            opacity: 0.8 i
        }

        /// Global -> User info.
        +w('>', 'inner-' 'root-', i: 0) {
            border: 1px solid bg5
            r: rc
            b: var(--elevation-high) i

            /// Header.
            +w('>', 'topSection') {
                z-index: 1 i
                position: relative
                border-bottom: 1px solid bg5 i
                c: 0 0 bg3

                /// Account info.
                +w('', 'username-') { c: fg1 }
                +w('', 'discriminator-') { c: fg2 }

                /// Status colors.
                +w('>', 'headerFill-') { c: 0 0 bg4 }

                /// Activities.
                +w('', 'activity-') {
                    > * { c: fg0 }
                    +w('', 'Normal-' 'Name-' 'details-', 0) { c: fg0 } /// TODO: Fix this.
                    +w('', 'content-') { c: fg2 }
                }
            }

            /// Buttons.
            +w('', 'button') {
                transition: 0.2s ease
                &:not([class*='ActionsProfile-']) { c: white ac1 ac1 }
                &:hover { opacity: 0.8 i }
                > div { c: white }
            }

            /// Slider bar.
            +w('', 'timeBar') {
                +w('', 'bar-') { c: 0 0 fg5 }
                +w('', 'barInner-', i: 0) { c: 0 0 fg0 }
            }
            +w('', 'bar-') { + div > div[style] { c: fg0 }}

            /// States.
            +w('>', 'Xbox') {
                c: 0 0 b75
                +w('', 'headerFill-') { c: 0 0 b74 }
                +w('', 'colorBrand-') { c: 0 0 b70 }
            }
            +w('>', 'Playing') {
                c: 0 0 b55
                +w('', 'headerFill-') { c: 0 0 b54 }
                +w('', 'colorBrand-') { c: 0 0 b50 }
            }
            +w('>', 'Spotify') {
                c: 0 0 b45
                +w('', 'headerFill-') { c: 0 0 b44 }
                +w('', 'colorGreen-') { c: 0 0 b41 }
            }
            +w('>', 'Streaming') {
                c: 0 0 b65
                +w('', 'headerFill-') { c: 0 0 b64 }
                +w('', 'colorBrand-') { c: 0 0 b60 }
            }

            /// Tabs.
            +w('', 'tabBarContainer-') {
                c: 0 bg5 bg2
                [style*=': rgb(255'] { c: 0 ac1 }
                [style*='255\, 0.1'] { c: 0 bg5 }
                [style*='255\, 0.4'] { c: fg4 }

                /// Items.
                +w('', 'item-') {
                    c: fg4
                    &:hover { c: 0 bg4 }
                    +w('&', 'selected-') { c: fg1 ac1 }
                    &[style*='-color: rgb(255'] { c: fg1 ac1 }
                }
            }
        }

        /// Global -> Upload.
        +a(uploadModal-, i: '/') {
            border: 1px solid bg5 i
            b: var(--elevation-high) i
            c: 0 0 bg1
            r: rc
            /// -> Preview.
            +w('', 'icon-') {
                +w('&', 'image-') {
                    c: 0 0 bg3
                    b: inner, bsh i
                }
                +w('&', 'unknown-' 'code-' 'video-' 'document-') {
                    filter: invert(0.8) hue-rotate(180deg)
                }
            }
            /// -> Textarea.
            +w('', 'textAreaUpload-' 'scrollableContainer-', 0) {
                border: 1px solid bg5 i
                r: rc
            }
            /// -> Footer.
            +w('', 'footer-') {
                border-top: 1px solid bg5 i
                c: 0 0 bg2
                b: none i
                r: 0px 0px rc rc
            }
        }
        /// Global -> Quickswitcher.
        +a(quickswitcher-, i: '/') {
            &:not([class*='channel']) {
                border: 1px solid bg5
                b: var(--elevation-high) i
                r: rc
            }
            /// -> Protip.
            +w('', 'protip-') {
                > h3 { c: b40 }
                > div {
                    transition: opacity 0.2s ease i
                    ../:hover > div { opacity: 1 i }
                }
            }
        }
        /// Global -> Keyboard combos.
        +a(keyboardShortcutsModal, i: '/') {
            border: 1px solid bg5 i
            c: 0 0 bg1
            r: rc
            h1 {
                c: fg1 0 bg3
                margin-bottom: 0
                + div { c: fg3 bg5 bg3 }
            }
            +w('', 'Description') { c: fg3 }
            +w('', 'ddrArrows-') { filter: invert(0.8) hue-rotate(180deg) }
        }

        /// Guilds -> Folder settings / Channel info / Gift a Nitro.
        +a(root-1gCeng, i: '/') {
            border: 1px solid bg5 i
            b: var(--elevation-high) i
            c: 0 0 bg1

            /// 'Delete message'.
            +w('', 'colorStandard-') {
                +w('+', 'message-') {
                    c: 0 0 bg2
                    b: inner
                    r: rc

                    /// Fix mentions.
                    .mention { c: ac0 0 bg3 }
                }
            }

            /// Footer.
            +w('', 'footer-') {
                b: inset 0 1px 0 bg5
                c: 0 0 bg2
            }
        }

        /// Inbox -> Fix borders.
        +a(recentMentionsPopout-, i: '/') {
            border: 1px solid bg5 i
            b: var(--elevation-high) i

            /// Header.
            +w('>', 'header-') {
                c: 0 0 bg3
                b: inset 0 -1px bg5 i
            }
        }

        /// Change avatar -> Zoom in/out slider.
        +a(slider-, i: '/') {
            +w('', 'bar-') { c: 0 0 bg4 }
            +w('', 'Fill-') { c: 0 0 ac1 }
            +w('', 'grabber-') { c: 0 fg1 fg1 }
            +w('', 'markDash-') { c: 0 0 bg4 }
            +w('', 'markValue-') { c: fg3 }
            +w('', 'defaultValue-' 'Value-') { c: ac1 }
        }
    }

    // Buttons.
    +w('', 'button-') {
        +w('&', 'lookLink-') {
            c: fg3
            transition: 0.2s ease
            &:hover {
                c: fg0
                --g: 0deg, t, t 1px, currentColor 0, currentColor 2px, t 0
                +w('>', 'contents-') { background: linear-gradient(var(--g)) i }
            }
            +w('&', 'colorBrand-') { c: ac1 }
        }

        +w('&', 'lookFilled-') {
            transition: 0.2s ease
            &:hover { opacity: 0.8 }
            +w('&', 'colorRed-') { c: white 0 b13 }
            +w('&', 'colorBrand-') { c: white 0 ac2 }
            +w('&', 'colorGreen-') { c: white 0 b43 }
            +w('&', 'colorPrimary-') { c: fg1 0 bg4 }
            +w('&', 'colorGrey-') { c: fg1 0 bg4 }
            +w('', 'contents-') { text-shadow: 1px 1px 0 #0005 }
        }

        +w('&', 'lookOutlined-') {
            +w('&', 'colorRed-') { c: b10 b13 }
            +w('&', 'colorGreen-') { c: b40 b43 }
            +w('&', 'colorBrand-') { c: ac1 ac1 }
            +w('&', 'colorWhite-') { c: fg1 fg1 }
        }

        +w('&', 'lookBlank-') {
            /// Chat -> Emoji picker tab.
            +w('&', 'colorBrand-') { c: fg5 }
            +w('&', 'colorBrand-' 'Active-', i: '') { c: fg1 0 bg1 }
        }

        /// Inlined.
        +a(item-, i: '/') {
            &[style*='d-color: rgb(67\, 181\, 129'] { c: white 0 ac3 }
            &[style*='d-color: rgba(67\, 181\, 129\, 0.2'] { c: ac1 0 ac4 }
        }
    }

    // Popouts -> User popout.
    +w('', 'userPopout-') {
        border: 1px solid bg5 i
        b: var(--elevation-high) i
        c: 0 0 bg1

        /// Header.
        +w('>', 'header') {
            border-bottom: 1px solid bg5 i
            c: 0 0 bg2

            /// Username.
            +w('', 'headerTag-') {
                c: fg2
                +w('', 'username-') { c: fg0 }
            }

            /// Status.
            +w('', 'customStatus-') { c: fg0 }

            /// Activities.
            +w('', 'activity-') {
                > * { c: fg0 }
                +w('', 'Normal-' 'Name-' 'details-') { c: fg0 }
                +w('', 'content-') { c: fg2 }
            }

            /// Slider bar.
            +w('', 'timeBar') {
                +w('', 'bar-') { c: 0 0 fg5 }
                +w('', 'barInner-', i: 0) { c: 0 0 fg0 }
            }
            +w('', 'bar-') { + div > div[style] { c: fg0 }}

            /// Status colors.
            +w('&', 'Xbox') {
                c: 0 0 b75
                +w('>', 'activity-') { c: 0 0 b74 }
            }
            +w('&', 'Playing') {
                c: 0 0 b55
                +w('>', 'activity-') { c: 0 0 b54 }
            }
            +w('&', 'Spotify') {
                c: 0 0 b45
                +w('>', 'activity-') { c: 0 0 b44 }
            }
            +w('&', 'Streaming') {
                c: 0 0 b65
                +w('>', 'activity-') { c: 0 0 b64 }
            }
        }

        /// Body.
        +w('', 'body-') {
            c: fg1 0 t
            +w('', 'bodyTitle-') { c: fg3 }
        }

        /// Footer.
        +w('', 'footer-') {
            c: 0 bg5 t
            input { c: fg1 bg5 bg2 }

            +w('', 'protip-') {
                c: fg
                [style] { c: b40 }
            }
        }
    }

    // Popouts -> Search menu.
    #search-results {
        /// Exclude results.
        &:not([role='list']) {
            c: 0 0 bg0
            b: inner, bsh i
        }

        /// Header.
        +w('>', 'queryContainer-') {
            c: fg1 bg2 t
            strong { c: ac }
        }

        /// Items.
        +w('', 'header-' 'answer-') { c: fg4 }
        +w('', 'anchor-' 'displayUsername-') { c: fg5 }
        +w('', 'filter-' 'nonText-' 'displayedNick-') { c: fg1 }
        +w('', 'anchorUnderline') { c: ac0 }
        +w('', 'option-') { c: fg3 }
        +w('', 'selected-') { c: 0 0 bg3 }
        +w('', 'option-') { &::after { background: none i }}

        /// Search field.
        +a(searchFilter-, i: '/') { c: fg0 0 bg1 }
        +a(searchAnswer-, i: '/') { c: fg0 0 bg1 }

        /// Results.
        +w('', 'channelSeparator-') { c: 0 0 bg2 }
        +w('', 'embedAuthorName-') { c: fg1 }
        +w('', 'embedTitle-') { c: ac1 }
        code.inline { c: fg1 }

        /// Fix width for videos. @upstream
        @supports(scrollbar-width: thin) {
            +w('', 'cozy-') {
                margin-left: 0px
                padding-left: 16px

                /// Reduce size of avatars.
                +w('', 'avatar-') {
                    top: 2px
                    left: 0px
                    width: 16px
                    height: @width
                    position: relative

                    + h2 { margin: -20px 0 4px 24px }
                }

                /// Reset the embed.
                +w('>', 'container-') {
                    +w('', 'embedFull-') {
                        width: 100% i
                        max-width: 100% i
                        > div > div[style] { width: 100% i }
                    }
                }
            }
        }
    }

    // Popouts -> Attach menu.
    +w('', 'attachPopout-') {
        border: 1px solid bg5

        /// Spotify invite.
        +a(modal-yWgWj-, i: '/') {
            border: 1px solid bg5 i
            c: 0 0 bg1
            b: var(--elevation-high) i

            /// Footer.
            +w('', 'footer-') {
                border-top: 1px solid bg5
                c: 0 0 bg2
            }

            /// Invite.
            +w('', 'header-') { c: fg4 }
            +w('', 'subHeader-') { c: fg5 }
            +w('', 'name-' 'textLink-' 'Status-') { c: fg1 }
            +w('', 'preview-') { c: 0 bg5 bg3 }
        }
    }

    // Chat -> Base.
    +w('', 'chat-') {
        /// -> Header.
        +w('>', 'title-') {
            c: 0 0 bg2
            /// -> Gradient.
            +a(children-, i: '/') {
                &::after { background: linear-gradient(90deg, t 0, bg2) i }
            }
        }

        /// -> Chat area.
        +w('', 'content-') {
            c: 0 0 t

            --background-message-hover: to_rgba('bg-3', 0.3)

            /// -> 'New messagges' bar.
            +w('', 'isUnread-' 'divider-', i: '') {
                c: 0 ac1
                svg path { v: ac1 ac1 }
                +w('', 'content-') { c: ac1 }
                +w('', 'unreadPill-') { c: white 0 ac1 }
            }

            /// -> Dividers.
            +w('', 'divider-' 'content-', i: 0) {
                c: 0 0 var(--background-primary)
            }

            /// -> 'Has more' bar.
            +w('', 'hasMore-') {
                c: ac1 bg5 bg2
                transition: 0.2s ease
                &:hover { opacity: 0.6 }
            }
            /// -> Welcome -> Border color.
            +w('', 'base-19D3Qq') { c: 0 bg5 }
            /// -> Guild invites.
            +w('', 'userSelectNone-') {
                +w('&', 'cursorDefault-') {
                    margin-top: 1rem
                    r: rc
                    c: 0 0 bg2
                    b: inner
                }
            }
            /// -> Embedded links/media.
            +w('', 'embedWrapper-') {
                &:not([class*='imageZoom-']) {
                    r: rc

                    /// Exclude embeds with custom border colors.
                    &:not([style*='border-color']) { c: 0 bg5 }

                    /// Remove double borders from some elements.
                    &:not([class*='Audio']) { b: inner }
                }
            }
            /// -> Mentioned.
            +w('', 'mentioned-') {
                r: (chat_short) ? 4px i : 0px i
                --text-muted: var(--fg-3)

                /// Bar color.
                &::before {
                    c: 0 0 ac1

                    /// Tweaks for short chat mode.
                    if (chat_short) {
                        width: 4px
                        r: 4px 0px 0px 4px
                    }
                }

                /// Reaction colors.
                +w('', 'reactionMe-') { c: 0 0 #ffffff20 }
            }
            /// -> Spoilers.
            +w('', 'spoilerText-') {
                r: 8px
                c: 0 0 bg3
                &[data-slate-object] { c: 0 0 bg5 }
                +w('&', 'hidden-') { &:hover { c: 0 0 bg4 }}
            }

            /// -> Attachments.
            +w('', 'attachment-') {
                b: none i

                /// Invert document/text/code/zip icons.
                if (dark(BG)) {
                    /[src *= '/assets/985ea67d2edab4424'],
                    /[src *= '/assets/9f358f46647358641'],
                    /[src *= '/assets/481aa700fab464f23'],
                    /[src *= '/assets/73d212e3701483c36'] {
                        filter: invert(0.8) hue-rotate(180deg)
                    }
                }
            }

            /// -> Reactions.
            +w('', 'reactionMe-') {
                c: 0 t ac4
                +w('', 'Count-') {
                    font-weight: bold
                    c: ac0
                }
            }
        }

        /// -> 'Jump to present' bar.
        +w('', 'jumpToPresentBar-') {
            > button {
                c: fg3
                transition: 0.2s ease
                ../:hover button { c: fg1 }
            }
        }

        /// Textarea.
        +w('', 'channelTextArea-') {
            r: rc i

            /// Input borders.
            > div {
                &:nth-of-type(1) {
                    border: 1px solid bg5
                    r: rc

                    /// Reset reply state.
                    +w('&', 'container-') { r: rc rc 0 0 }
                }
                &:nth-of-type(2) {
                    /// Reset reply state.
                    +w('&', 'hasReply-') {
                        border: 1px solid bg5
                        border-top: none
                        r: 0 0 rc rc
                    }
                }
            }

            /// Fix mention button colors.
            +w('/', 'mentionButton-' 'colorBrand-', i: '') {
                c: ac0
            }

            /// Fix emoji button padding.
            +w('', 'emojiButton-') { padding-right: 10px i }

            /// Edit message footer.
            +w('+', 'operations-') {
                c: fg3
                a { c: ac2 }
            }

            /// Markdown preview -> Mentions.
            /.mention { c: ac0 0 ac5 }

            /// Markdown preview -> Inline code.
            +a(inlineCode-, i: '/') { font-family: var(--f-mono) i }
        }

        +w('', 'cooldownWrapper-') { c: fg3 }
        +w('', 'newMessagesBar-') {
            c: 0 0 bg5
            b: bsh i
            > button { c: fg1 }
        }

        /// Message context menu.
        +w(' ', 'buttonContainer-' 'buttons-' 'wrapper-', i: 0) {
            c: 0 0 bg2
            b: outer, bsh i

            /// Menu items.
            +a(item-, i: '/') {
                +w('&', 'colorDefault-') {
                    +w('&', 'focused-') { c: ac0 0 ac5 }
                }
                /// 'Delete Message' link.
                +w('&', 'colorDanger-') {
                    &, [class *= 'hint'] { c: b10 }
                    +w('&', 'focused-') { c: b10 0 b15 }
                }
                /// 'Invite people' link.
                +w('&', 'colorBrand-') {
                    &, [class *= 'hint'] { c: b60 }
                    +w('&', 'focused-') { c: b60 0 b65 }
                }
            }
        }

        /// -> Guild members.
        +a(members-, i: '/') {
            b: inset 1px 0 bg5 i
            +w('', 'clickable-') {
                &:hover [class *= 'layout-'] { c: 0 0 bg3 }
            }
            +w('', 'selected-') { c: 0 0 bg4 }
        }

        /// -> Search results.
        +w('', 'ResultsWrap-') {
            b: inset 1px 0 bg5 i

            /// Header.
            +w('', 'searchHeader-') {
                border: 1px solid bg5
                border-right: none
                c: 0 0 bg3
            }

            /// Pagination.
            +w('', 'pageControl-') {
                +w('', 'activeButton-') { c: white 0 ac1 }
            }
        }

        /// -> Hovered message.
        +w('', 'message-') {
            r: rc
        }

        /// Chat -> Bot tag colors.
        +a(botTagRegular-, i: '/') { c: white 0 ac1 }
    }

    // Chat -> Markup.
    +w('', 'markup-') {
        /// -> Reset code font and border color.
        code {
            c: 0 bg5
            &.inline {
                padding: 0.125em 0.2em
                b: inner, bsh i
            }
        }

        /// Syntax highlighting.
        /.hljs {
            r: rc i
            &-comment, &-quote { c: fg3 }
            &-built_in, &-deletion { c: b10 }
            &-addition, &-keyword, &-selector-tag { c: b40 }
            &-name, &-section, &-title, &-selector-class, &-selector-id { c: b60 }
            &-doctag, &-literal, &-meta &-meta-string, &-number, &-regexp, &-string { c: b50 }
            &-attr, &-attribute, &-type, &-class &-title, &-template-variable, &-variable { c: b20 }
        }

        /// Feat -> Code font.
        +w('', 'Code-' 'codeBlockText-' 'codeLine-', i: '+') {
            ../ code, /& { font-family: var(--f-mono) i }
        }
    }

    // Chat -> Autocomplete. @obsolete
    +w('', 'autocomplete-' 'autocomplete', i: '') {
        c: 0 0 bg2
        r: rc i
        +w('', 'Title-') {
            c: fg5
            > strong { c: ac1 }
        }
        +w('', 'content-') { c: fg1 }
        +w('', 'description') { c: fg4 }
        +w('', 'divider-') { c: 0 0 bg5 }
        +w('', 'Selected-' 'selected-') { c: 0 0 bg3 }
    }

    // Feat -> Shorter messages.
    if (chat_short) {
        chat_width = chat_short_w
        +w('', 'messagesWrapper-') {
            /// -> Messages.
            +w('', 'scroller-') {
                padding-left: 12px
                > div {
                    width: 100%
                    max-width: chat_width
                    margin-left: auto
                    margin-right: auto
                    box-sizing: border-box
                }
            }
            /// -> Bars.
            +w('>', 'barBase-') {
                margin-left: auto
                margin-right: auto
                max-width: chat_width
            }
            /// -> Textarea.
            + form div {
                +w('&', 'channelTextArea-') {
                    /// Textarea in DMs/Guilds/Annoncements.
                    &, ../[aria-expanded], ../[class *= 'wrapper-'] {
                        max-width: chat_width
                        margin-right: auto
                        margin-left: auto
                    }
                }
                +w('&', 'typing-') {
                    max-width: chat_width
                    margin-right: auto
                    margin-left: auto
                }
            }

            /// Fix 'Messages failed to load' alert.
            +a(messagesErrorBar-, i: '/') {
                c: 0 0 b15
                +w('>', 'Button') { c: b10 }
            }
        }
    }

    // Emojis.
    .emoji {
        /// Feat -> Reduce emote size.
        &.jumboable {
            width: var(--e-size)
            min-height: @width
            height: @width
        }

        /// Feat -> Larger reaction emotes.
        if (e_reaction) {
            /[class*='reactions-'] {
                margin-top: 0.25rem
                .emoji {
                    height: 1.5rem
                    width: @height
                }

                /// Whitespace for emote menu.
                +w('', 'reactionBtn-' 'focusable-', i: '') { margin-left: 0.25rem }
            }
        }

        /// Drawers -> Emoji picker.
        +a(drawerSizingWrapper-, i: '/') {
            /// -> Wrapper.
            +w('>', 'contentWrapper') {
                border: 1px solid bg5
                b: var(--elevation-high) i
                r: rc

                /// Fix background for emoji category text.
                +w('', 'categorySection-' 'header-') { c: 0 0 bg2 }
            }

            /// Chat -> Reacting to messages.
            +a(emojiPicker-, i: '/') {
                box-shadow: 0 0 0 1px bg5

                /// Fix background for emoji category text.
                +w('', 'categorySection-' 'header-') { c: 0 0 bg2 }
            }

            /// -> Rounded corners.
            +w('', 'categoryList-') {
                r: 0px 0px 0px rc
            }
        }

        /// -> Fix hardcoded preload images.
        +a(imageLoading-, i: '/') {
            background-image: none i
            c: t 0 bg3
            r: 38%
        }
    }

    /// Feat -> Avatar size in info popout/modal.
    if (avatar_size > 80) {
        /// Popout.
        +w('', 'userPopout-' 'avatarWrapper-', i: 0) {
            > div[style*='width: 80px'],
            > svg[width='80'] {
                width: var(--avatar-s) i
                height: var(--avatar-s) i
            }
        }

        /// Modal.
        +w('', 'modal-' 'header-', i: 0) {
            div[style*='width: 80px'] {
                width: var(--avatar-s) i
                height: var(--avatar-s) i
            }
            /// Fix width.
            svg[width='92'] {
                width: calc(var(--avatar-s) + 12px) i
            }
        }
    }

    /// Feat -> Enable avatar context menu in profiles.
    if (avatar_c_m) {
        +w('', 'avatar-') {
            img { text-indent: unset }
            * { pointer-events: unset }
        }
    }

    /// @upstream
    @supports(scrollbar-width: thin) {
        /// Fix audio/video volume bar position.
        +w('', 'audioVolumeWrapper-') { transform: translate(26px, -4px) i }
        +w('', 'videoVolumeWrapper') { transform: translate(-2px, -12px) i }

        /// Search -> Fix media width.
        +w('', 'embedMedia-') { [data-fullscreen] { width: 100% i }}
    }
}