Dark-WhatsApp by vednoc

Imported from https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/wa.user.styl
Authorvednoc
LicenseMIT
Created at2021-02-04 17:22:31
Updated at2021-02-04 17:22:31
Applies toweb.whatsapp.com
Description

Dark and light, very customizable theme for WhatsApp.
Notes

Userstyle doesn't have notes.
Source code

/* ==UserStyle==
@name         Dark-WhatsApp
@description  Dark and light, very customizable theme for WhatsApp.
@namespace    github.com/vednoc/dark-whatsapp
@homepageURL  https://github.com/vednoc/dark-whatsapp
@supportURL   https://github.com/vednoc/dark-whatsapp/issues
@updateURL    https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/wa.user.styl
@author       vednoc <vednoc@pm.me> (https://github.com/vednoc)
@version      3.6.1
@license      MIT
@preprocessor stylus

@var select   theme      'Base color-scheme toggle' {
    'Custom colors   *': 'custom',
    'Dark blue (old)  ': 'old',
    'Dark gray (new)  ': 'new',
}

@var color    _bg        'Base background color        ' #1f232a
@var color    _fg        'Base foreground color        ' #eeeeee
@var color    _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 text     ui_font    'UI font' ''font_name''
@var text     app_width  'App width' 1396px
@var checkbox fullscreen 'Fullscreen mode' 0

@var checkbox compact    'Compact mode' 1
@var text     compact_mw 'Compact mode breakpoint' 720px
@var text     compact_hi 'Compact mode hover-on delay' 0.6s
@var text     compact_ho 'Compact mode hover-off delay' 1.2s

@var select   app_alerts 'Alerts' {
    'Show all                   *': 'show          ',
    'Hide "Allow notifications"  ': 'notifications ',
    'Hide all                    ': 'hide          ',
}
@var checkbox app_header 'Consistent drawer headers' 1

@var text     radius_m   'Rounded corners for menus' 4px
@var text     radius_i   'Rounded corners for input area' 24px
@var range    radius_a   'Rounded corners for avatars' [50, 0, 50, 1, '%']

@var select   app_image  'App background' {
    'Theme image with 12px blur   *': 'bg-high ',
    'Theme image with 6px blur     ': 'bg-low  ',
    'Theme image without blur      ': 'bg-none ',
    'Custom background image       ': 'custom  ',
    'Default background            ': 'default ',
    'None                          ': 'none    ',
}
@var text     image_url  'App background image link' url('https://images.unsplash.com/photo-1434569117012-ce134ee1a088?fit=crop&w=1280&h=720&q=80')
@var range    bg_opacity 'App background image opacity' [0.4, 0.0, 1, 0.01]
@var range    bg_blur    'App background image blur size' [0, 0, 50, 1, 'px']
@var range    bg_hue     'App background image hue' [320, 0, 360, 1, 'deg']
@var range    bg_invert  'App background image invert colors' [0, 0.0, 1, 0.01]
@var text     bg_size    'App background image size' cover
@var text     bg_pos     'App background image position' center
@var text     bg_rep     'App background image repeat' no-repeat

@var select   tail_style 'Style for message bubble tails' {
    'Default  *': 'default ',
    'Minimal   ': 'minimal ',
    'Rounded   ': 'rounded ',
    'Facebook  ': 'fb-like ',
}
@var checkbox fb_compact 'Collapse messages for `fb-like` tail style' 1

@var range    emoji_o    'Emoji opacity' [0.8, 0.0, 1, 0.01]
@var select   emoji_b    'Reduce big emoji size' {
    'Default *': 'default ',
    'Medium   ': 'medium  ',
    'Normal   ': 'normal  ',
    'Small    ': 'small   ',
}
@var checkbox emoji_a    'Animate emojis' 1
@var text     emoji_k    'Emojis with kiss animation' "'💋'"
@var text     emoji_p    'Emojis with pulse animation' "'🤩' '😍' '☺️' '❣️' '♥️' '❤️'"

@var checkbox ow_ack     'Override seen message icon color' 0
@var color    _ack       'Seen message icon color' #ff6666

@var checkbox ow_sys_msg 'Override system message background color' 0
@var color    sys_msg_bg 'System message background color' #364462

@var checkbox ow_imsg    'Override incoming message bubble color' 0
@var color    _imsg  'Incoming message bubble color' #16191e
@var checkbox bubble_in  'Swap sides for incoming message bubbles' 0

@var checkbox ow_omsg    'Override outgoing message bubble color' 0
@var color    _omsg  'Outgoing message bubble color' #3b4250
@var checkbox bubble_out 'Swap sides for outgoing message bubbles' 0

@var checkbox rtl_header 'RTL: Remove empty message header' 1
@var checkbox rtl_format 'RTL: Fix formatting for message content' 1

@var checkbox chat_h_p_p 'Hide profile pictures' 0
@var checkbox chat_b_c   'Blurred contacts' 0
@var checkbox chat_b_img 'Blurred media' 0
@var text     chat_b_in  'Blurred media hover-on delay' 0.4s
@var text     chat_b_out 'Blurred media hover-off delay' 0.2s

@var checkbox chat_bg    'Chat background image' 1
@var text     chat_image 'Chat background image link' url('https://web.whatsapp.com/img/bg-chat-tile_9e8a2898faedb7db9bf5638405cf81ae.png')
@var range    chat_bg_o  'Chat background image opacity' [0.15, 0.0, 1, 0.01]
@var range    chat_bg_iv 'Chat background image inverted colors' [0.6, 0.0, 1, 0.01]
@var text     chat_bg_s  'Chat background image size' initial
@var text     chat_bg_p  'Chat background image position' top left
@var text     chat_bg_r  'Chat background image repeat' repeat

@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            ' #c3e88d
@var color    _cyan      'Base cyan color             ' #89ddff
@var color    _blue      'Base blue color             ' #82aaff
@var color    _magenta   'Base magenta color          ' #c792ea
@var color    _violet    'Base violet color           ' #9a91ea
@var color    _white     'White color                 ' #ffffff
@var color    _sh        'Shadow color                ' #00000025
==/UserStyle== */

// Color mixin.
/// All colors: `c: fg1 bg5 bg1`
/// Only border-color: `c: 0 bg5`
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 }
}

// 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))
}

// SVG-friendly colors mixin.
to_svg(input) {
    s('\%23%s', unquote(substr(s('%s', input), 1, 6)))
}

// Rounded corners mixin.
rad() { border-radius: arguments }

/// Remove old browser prefixes.
vendors = official

/// Feat -> Base color-scheme toggle. #32
if (theme == 'custom') {
    BG       = _bg
    FG       = _fg
    AC       = _ac
} else if (theme == 'old') {
    BG       = #1f232a
    FG       = #eeeeee
    AC       = #7289da
    _red     = #f07178
    _orange  = #f78c6c
    _yellow  = #ffcb6b
    _green   = #c3e88d
    _cyan    = #89ddff
    _blue    = #82aaff
    _magenta = #c792ea
    _violet  = #9a91ea
} else if (theme == 'new') {
    BG       = #292929
    FG       = #e6e6e6
    AC       = #d47d3f
    _red     = #f2777a
    _orange  = #f99157
    _yellow  = #ffcc66
    _green   = #99cc99
    _cyan    = #66cccc
    _blue    = #6699cc
    _magenta = #cc99cc
    _violet  = #aa99cc
}

/// Helpers.
t  = transparent
i  = !important
BA = _bg_a
FA = _fg_a
AA = _ac_a
SA = _sc_a
IM = _imsg
OM = _omsg

// Color generator.
/// NOTE: Scope the variables to avoid potential conflicts.
/{
    g = global

    /// Color 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)
    }

    /// Feat -> Colors for message bubbles.
    ig_quote = dark(IM) ? -10% : 25%
    og_quote = dark(OM) ? -10% : 25%

    /// 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),
        },
        ig: {
            '0':        IM,
            '1': darken(IM, ig_quote),
        },
        og: {
            '0':        OM,
            '1': darken(OM, og_quote),
        },
        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('og-' + key, val, g) for key, val in C.og
    define('ig-' + key, val, g) for key, val in C.ig
    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 domain('web.whatsapp.com') {
    $top  = "Hi there! Since I quit WA a while ago, and also been busy working "
    $top += "on a rewrite for UserStyles.world (as a replacement for USo), I am"
    $top += " looking for someone to help maintainin DWA."
    $top += "\A\ALink to USw: https://userstyles.world 👀 \A\A"
    $top += "More about v3.6.1 update, as always, in the changelog:"
    $btm  = "\A https://github.com/vednoc/dark-whatsapp\A\A\A"
    $btm += "P.S. CSS can not add links, only fake/pseudo text."

    :root:not(#z), .dark:not(#z) {
        /// Userstyle info and announcements.
        --version: '🌚 Dark-WhatsApp v3.6.1 — March 3rd, 2021'
        --message: $top
        --changes: $btm

        /// UI font.
        --ui-font: ui_font, Segoe UI, Helvetica Neue, Helvetica, Lucida Grande,
                   Arial, Ubuntu, Cantarell, Fira Sans, sans-serif

        /// Rounded corners.
        --r-menus:   radius_m
        --r-inputs:  radius_i
        --r-avatars: radius_a

        /// Compact mode.
        --c-m-hover: compact_hi
        --c-m-delay: compact_ho

        /// Blurred media.
        --blur-in:  chat_b_in
        --blur-out: chat_b_out

        /// App width.
        --app-width: app_width

        /// Emoji opacity.
        --emoji-o: emoji_o

        /// App background.
        image_path  = 'https://raw.githubusercontent.com/'
        image_path += 'vednoc/dark-whatsapp/master/images/bg-blur'
        if (app_image == 'bg-high') {
            --bg-image: url(image_path + '-high.jpg')
        } else if (app_image == 'bg-low') {
            --bg-image: url(image_path + '-low.jpg')
        } else if (app_image == 'bg-none') {
            --bg-image: url(image_path + '-none.jpg')
        } else if (app_image == 'custom') {
            --bg-image: image_url
        } else {
            --bg-image: none
        }
        --bg-opacity: bg_opacity
        --bg-blur:    bg_blur
        --bg-blur-s:  calc(-2 * var(--bg-blur))
        --bg-hue:     bg_hue
        --bg-invert:  bg_invert
        --bg-size:    bg_size
        --bg-pos:     bg_pos
        --bg-rep:     bg_rep

        /// Chat background.
        --chat-image: chat_image
        --chat-bg-o:  chat_bg_o
        --chat-bg-i:  chat_bg_iv
        --chat-bg-s:  chat_bg_s
        --chat-bg-p:  chat_bg_p
        --chat-bg-r:  chat_bg_r

        /// Override incoming message bubble colors.
        --msg-in-0:     (ow_imsg) ? ig-0         : var(--bg-4)
        --msg-in-0-rgb: (ow_imsg) ? to_rgb(ig-0) : var(--bg-4-rgb)
        --msg-in-1:     (ow_imsg) ? ig-1         : var(--bg-3)
        --msg-in-1-rgb: (ow_imsg) ? to_rgb(ig-1) : var(--bg-3-rgb)

        /// Override outgoing message bubble colors.
        --msg-out-0:     (ow_omsg) ? og-0         : var(--ac-4)
        --msg-out-0-rgb: (ow_omsg) ? to_rgb(og-0) : var(--ac-4-rgb)
        --msg-out-1:     (ow_omsg) ? og-1         : var(--ac-5)
        --msg-out-1-rgb: (ow_omsg) ? to_rgb(og-1) : var(--ac-5-rgb)

        /// Override seen message icon color.
        --msg-ack:     (ow_ack) ? _ack         : var(--ac-0)
        --msg-ack-rgb: (ow_ack) ? to_rgb(_ack) : var(--ac-0-rgb)

        /// WA variables.
        --gray-30: var(--bg-5) //#f7f7f7;
        --gray-30-rgb: var(--bg-5-rgb) //247,247,247;
        --gray-700: var(--fg-4) // #4a4a4a;
        --gray-700-rgb: var(--fg-4-rgb) // 74,74,74;
        --pale-blue-green: var(--b6-4) //#ecfaf5;
        --pale-blue-green-rgb: var(--b6-4-rgb) //236,250,245;
        --pale-green: var(--b4-4) //#dcf8c6;
        --pale-green-rgb: var(--b4-4-rgb) //220,248,198;
        --pale-yellow: var(--b3-4) //#fff5c4;
        --pale-yellow-rgb: var(--b3-4-rgb) //255,245,196;
        --teal: var(--ac-0) //#009688;
        --teal-rgb: var(--ac-0-rgb) //0,150,136;
        --teal-light: var(--ac-1) //#1de9b6;
        --teal-light-rgb: var(--ac-1-rgb) //29,233,182;
        --teal-lighter: var(--ac-2) //#00bfa5;
        --teal-lighter-rgb: var(--ac-2) //0,191,165;
        --green-deep: var(--ac-2) //#1b9a59;
        --green-deep-rgb: var(--ac-2-rgb) //27,154,89;
        --blue-ocean: var(--bg-2) //#aadaff;
        --blue-ocean-rgb: var(--bg-2-rgb) //#aadaff;
        --active-tab-marker: var(--ac-0) //#00af9c;
        --active-tab-marker-rgb: var(--ac-0-rgb) //0,175,156;
        --app-background-stripe: var(--bg-1) //#091e1f;
        --app-background-stripe-rgb: var(--bg-1-rgb) //9,30,31;
        --app-background: var(--bg-0) //#080e12;
        --app-background-rgb: var(--bg-0-rgb) //8,14,18;
        --app-background-deeper: var(--bg-0) //#080e12;
        --app-background-deeper-rgb: var(--bg-0-rgb) //8,14,18;
        --attach-media-drop-border: var(--fg-3) //#f1f1f233;
        --attach-media-drop-border-rgb: var(--fg-3-rgb) //241,241,242;
        --attach-media-drop-overlay: var(--bg-2) //#383d3f4d;
        --attach-media-drop-overlay-rgb: var(--bg-2-rgb) //55.76,60.6,63.24;
        --audio-progress-incoming: var(--b4-0) //#3bb463;
        --audio-progress-incoming-rgb: var(--b4-0-rgb) //59,180,99;
        --audio-progress-outgoing: var(--ac-2) //#5f8884;
        --audio-progress-outgoing-rgb: var(--ac-2-rgb) //95,136,132;
        --audio-progress-played-incoming: var(--b6-0) //#5ba0c3;
        --audio-progress-played-incoming-rgb: var(--b6-0-rgb) //91,160,195;
        --audio-progress-played-outgoing: var(--b6-0) //#55a5c5;
        --audio-progress-played-outgoing-rgb: var(--b6-0-rgb) //85,165,197;
        --audio-track-incoming: var(--fg-4) //#374248;
        --audio-track-incoming-rgb: var(--fg-4-rgb) //55,66,72;
        --audio-track-outgoing: var(--fg-4) //#1d5852;
        --audio-track-outgoing-rgb: var(--fg-4-rgb) //29,88,82;
        --avatar-background: var(--bg-1) //#101d24;
        --avatar-background-rgb: var(--bg-1-rgb) //16,29,36;
        --avatar-border: var(--bg-3) //#a5aaad;
        --avatar-border-rgb: var(--bg-3-rgb) //165,170,173;
        --avatar-placeholder-background: var(--bg-5) //#6c7478;
        --avatar-placeholder-background-rgb: var(--bg-5-rgb) //108,116,120;
        --avatar-placeholder-primary: var(--fg-3) //#d6d8d9;
        --avatar-placeholder-primary-rgb: var(--fg-3-rgb) //214,216,217;
        --background-default: var(--bg-2) //#101d24;
        --background-default-rgb: var(--bg-2-rgb) //16,29,36;
        --background-default-active: var(--bg-4) //#202c32;
        --background-default-active-rgb: var(--bg-4-rgb) //32,44,50;
        --background-default-hover: var(--bg-3) //#17232a;
        --background-default-hover-rgb: var(--bg-3-rgb) //23,35,42;
        --border-bubble: var(--shadow) //#f1f1f20f;
        --border-bubble-rgb: var(--shadow-rgb) //241,241,242;
        --border-default: var(--bg-3) //#1b282e;
        --border-default-rgb: var(--bg-3-rgb) //27,40,46;
        --border-list: var(--bg-3) //#1b282e;
        --border-list-rgb: var(--bg-3-rgb) //27,40,46;
        --border-panel: var(--bg-5) //#28333a;
        --border-panel-rgb: var(--bg-5-rgb) //40,51,58;
        --border-strong: var(--bg-5) //#343f45;
        --border-strong-rgb: var(--bg-5-rgb) //52,63,69;
        --border-stronger: var(--bg-5) //#f1f1f20f;
        --border-stronger-rgb: var(--fg-5-rgb) //241,241,242;
        --bubble-meta: var(--fg-3) //#f1f1f299;
        --bubble-meta-rgb: var(--fg-3-rgb) //241,241,242;
        --bubble-meta-icon: var(--fg-3) //#f1f1f299;
        --bubble-meta-icon-rgb: var(--fg-3-rgb) //241,241,242;
        --butterbar-battery-background: var(--b1-4) //#e05b52;
        --butterbar-battery-background-rgb: var(--b1-4-rgb) //224,91,82;
        --butterbar-battery-icon: var(--b1-0) //#f5d6d7;
        --butterbar-battery-icon-rgb: var(--b1-0-rgb) //245,214,215;
        --butterbar-battery-primary: var(--fg-0) //#f1f1f2f5;
        --butterbar-battery-primary-rgb: var(--fg-0-rgb) //241,241,242;
        --butterbar-battery-secondary: var(--fg-4) //#f1f1f2cc;
        --butterbar-battery-secondary-rgb: var(--fg-4-rgb) //241,241,242;
        --butterbar-connection-background: var(--b3-4) //#febc2c;
        --butterbar-connection-background-rgb: var(--b3-4-rgb) //254,188,44;
        --butterbar-connection-primary: var(--fg-0) //#1c282ff5;
        --butterbar-connection-primary-rgb: var(--fg-0-rgb) //28,40,47;
        --butterbar-connection-secondary: var(--fg-4) //#1c282fd9;
        --butterbar-connection-secondary-rgb: var(--fg-4-rgb) //28,40,47;
        --butterbar-default-background: var(--b6-4) //#39c;
        --butterbar-default-background-rgb: var(--b6-4) //51,153,204;
        --butterbar-icon: var(--b3-0) //#f1f1f2cc;
        --butterbar-icon-rgb: var(--b3-0-rgb) //241,241,242;
        --butterbar-notification-icon: var(--b6-0) //#8eb2be;
        --butterbar-notification-icon-rgb: var(--b6-0-rgb) //142,178,190;
        --butterbar-primary: var(--fg-0) //#f1f1f2f5;
        --butterbar-primary-rgb: var(--fg-0-rgb) //241,241,242;
        --butterbar-secondary: var(--fg-4) //#f1f1f2d9;
        --butterbar-secondary-rgb: var(--fg-4-rgb) //241,241,242;
        --butterbar-update-background: var(--b4-4) //#00af9c;
        --butterbar-update-background-rgb: var(--b4-4-rgb) //0,175,156;
        --butterbar-update-icon: var(--b4-0) //#8eafaa;
        --butterbar-update-icon-rgb: var(--b4-0-rgb) //142,175,170;
        --button-alternative: var(--ac-1) //#68bbe4;
        --button-alternative-rgb: var(--ac-1-rgb) //104,187,228;
        --button-alternative-background: var(--bg-3) //#222e35;
        --button-alternative-background-rgb: var(--bg-3-rgb) //34,46,53;
        --button-background-disabled: var(--bg-2) //#253137;
        --button-background-disabled-rgb: var(--bg-2-rgb) //37,49,55;
        --button-bubble: var(--ac-0) //#00af9cb3;
        --button-bubble-rgb: var(--ac-0-rgb) //0,175,156;
        --button-plain-background: var(--bg-4) //#2f3437;
        --button-plain-background-rgb: var(--bg-4-rgb) //47.1,51.86667,54.9;
        --button-primary: var(--white) //#101d24;
        --button-primary-rgb: var(--white-rgb) //16,29,36;
        --button-primary-background: var(--ac-0) //#00af9c;
        --button-primary-background-rgb: var(--ac-0-rgb) //0,175,156;
        --button-primary-background-hover: var(--ac-3) //#00c3ae;
        --button-primary-background-hover-rgb: var(--ac-3-rgb) //0,195.4,174.18514;
        --button-round-background: var(--ac-0) //#00af9c;
        --button-round-background-rgb: var(--ac-0-rgb) //0,175,156;
        --button-secondary: var(--ac-0) //#00af9c;
        --button-secondary-rgb: var(--ac-0-rgb) //0,175,156;
        --button-secondary-background: transparent;
        --button-secondary-background-rgb: 0,0,0;
        --button-secondary-background-hover: #f1f1f20d;
        --button-secondary-background-hover-rgb: var(--fg-3-rgb) //241,241,242;
        --button-secondary-hover: var(--ac-0) //#00af9c;
        --button-secondary-hover-rgb: var(--ac-0-rgb) //0,175,156;
        --chat-marker: var(--fg-3) //#999;
        --chat-marker-rgb: var(--fg-3-rgb) //153,153,153;
        --chat-marker-admin: var(--ac-0) //#00af9c;
        --chat-marker-admin-rgb: var(--ac-0-rgb) //0,175,156;
        --chat-marker-admin-border: var(--ac-0) //#00af9cb3;
        --chat-marker-admin-border-rgb: var(--ac-0-rgb) //0,175,156;
        --chat-marker-border: var(--fg-3) //#999999b3;
        --chat-marker-border-rgb: var(--fg-3-rgb) //153,153,153;
        --chatlist-icon: var(--fg-5) //#f1f1f299;
        --chatlist-icon-rgb: var(--fg-5-rgb) //241,241,242;
        --checkbox-background: var(--ac-0) //#00af9c;
        --checkbox-background-rgb: var(--ac-0-rgb) //0,175,156;
        --checkbox-mark: var(--white) //#101d24;
        --checkbox-mark-rgb: var(--white-rgb) //16,29,36;
        --compose-input-background-focused: var(--bg-0) //#3f5560;
        --compose-input-background-focused-rgb: var(--bg-0-rgb) //63,85,96;
        --compose-input-background: var(--bg-1) //#33383b;
        --compose-input-background-rgb: var(--bg-1-rgb) //51.22296,56.04619,58.67704;
        --compose-input-border: var(--bg-5) //#33383b;
        --compose-input-border-rgb: var(--bg-5-rgb) //51.22296,56.04619,58.67704;
        --compose-input-border-focused: var(--bg-5) //#415a67;
        --compose-input-border-focused-rgb: var(--bg-5-rgb) //65,90,103;
        --compose-panel-background: var(--bg-3) //#1e2428;
        --compose-panel-background-rgb: var(--bg-3-rgb) //29.591,36.36026,40.309;
        --compose-panel-background-hover: var(--bg-4) //#151e23;
        --compose-panel-background-hover-rgb: var(--ac-4-rgb) //21,30,35;
        --compose-primary: var(--fg-1) //#f1f1f2;
        --compose-primary-rgb: var(--fg-1-rgb) //241,241,242;
        --conversation-panel-background: var(--bg-1) //#0b1419;
        --conversation-panel-background-rgb: var(--bg-1-rgb) //11.29231,20.46731,25.40769;
        --conversation-panel-border: var(--bg-5) //#f1f1f214;
        --conversation-panel-border-rgb: var(--fg-3-rgb) //241,241,242;
        --danger: var(--b1-0) //#ef697a;
        --danger-rgb: var(--b1-0-rgb) //239,105,122;
        --drawer-background: var(--bg-1) //#101d24;
        --drawer-background-rgb: var(--bg-1-rgb) //16,29,36;
        --drawer-background-deep: var(--bg-0) //#080e12;
        --drawer-background-deep-rgb: var(--bg-0-rgb) //8,14,18;
        --drawer-gallery-background: var(--bg-1) //#101d24;
        --drawer-gallery-background-rgb: var(--bg-1-rgb) //16,29,36;
        --drawer-gallery-background-active: var(--bg-0) //#0d1418;
        --drawer-gallery-background-active-rgb: var(--bg-0-rgb) //13.12731,19.91681,23.57269;
        --drawer-gallery-background-hover: var(--bg-0) //#0d1418;
        --drawer-gallery-background-hover-rgb: var(--bg-0-rgb) //13.12731,19.91681,23.57269;
        --drawer-header-title: var(--fg-1) //#d6d8d9;
        --drawer-header-title-rgb: var(--fg-1-rgb) //214,216,217;
        --drawer-section-background: var(--bg-2) //#101d24;
        --drawer-section-background-rgb: var(--bg-2-rgb) //16,29,36;
        --dropdown-background: var(--bg-2) //#253137;
        --dropdown-background-rgb: var(--bg-2-rgb) //37,49,55;
        --dropdown-background-hover: var(--bg-3) //#202c33;
        --dropdown-background-hover-rgb: var(--bg-3-rgb) //32,44,51;
        --empty-state-background: var(--bg-3) //#1c282f;
        --empty-state-background-rgb: var(--bg-3-rgb) //28,40,47;
        --empty-state-icon: var(--fg-4) //#757c81;
        --empty-state-icon-rgb: var(--fg-4-rgb) //117,124,129;
        --focus: var(--ac-3) //#68bbe4;
        --focus-rgb: var(--ac-3-rgb) //104,187,228;
        --focus-animation: var(--ac-3) //#68bbe442;
        --focus-animation-rgb: var(--ac-3-rgb) //104,187,228;
        --focus-animation-deeper: var(--ac-3) //#68bbe452;
        --focus-animation-deeper-rgb: var(--ac-3-rgb) //104,187,228;
        --focus-lighter: var(--ac-3) //#68bbe41f;
        --focus-lighter-rgb: var(--ac-3-rgb) //104,187,228;
        --highlight: var(--ac-0) //#00af9c;
        --highlight-rgb: var(--ac-0-rgb) //0,175,156;
        --icon: var(--fg-3) //#80868b;
        --icon-rgb: var(--fg-3-rgb) //128,134,139;
        --icon-ack: var(--msg-ack) //#34b7f1;
        --icon-ack-rgb: var(--msg-ack-rgb) //52,183,241;
        --icon-disabled: var(--fg-5) //#3c464c;
        --icon-disabled-rgb: var(--fg-5-rgb) //60,70,76;
        --icon-fixed: var(--fg-3) //#80868b;
        --icon-fixed-rgb: var(--fg-3-rgb) //128,134,139;
        --icon-lighter: var(--fg-5) //#f1f1f245;
        --icon-lighter-rgb: var(--fg-0-rgb) //241,241,242;
        --icon-search-back: var(--ac-2) //#71787d;
        --icon-search-back-rgb: var(--ac-2-rgb) //113,120,125;
        --icon-strong: var(--fg-1) //#c4c7c9;
        --icon-strong-rgb: var(--fg-1-rgb) //196,199,201;
        --incoming-background: var(--msg-in-0) //#222e35;
        --incoming-background-rgb: var(--msg-in-0-rgb) //34,46,53;
        --incoming-background-deeper: var(--msg-in-1) //#1d272e;
        --incoming-background-deeper-rgb: var(--msg-in-1-rgb) //29,39,46;
        --incoming-background-highlight: #ccc;
        --incoming-background-highlight-rgb: 204,204,204;
        --incoming-primary: var(--fg-3) //#777d81;
        --incoming-primary-rgb: var(--fg-3-rgb) //119,125,129;
        --input-border-active: var(--ac-0) //#00af9c;
        --input-border-active-rgb: var(--ac-0-rgb) //0,175,156;
        --input-placeholder: var(--fg-4) //#6a7276;
        --input-placeholder-rgb: var(--fg-4) //106,114,118;
        --intro-background: var(--bg-1) //#222e35;
        --intro-background-rgb: var(--bg-1-rgb) //34,46,53;
        --intro-border: var(--ac-2) //#054740;
        --intro-border-rgb: var(--ac-2-rgb) //5,71,64;
        --intro-logo: var(--fg-3) //rgba(241,241,242,0.26);
        --intro-logo-rgb: var(--fg-3-rgb) //241,241,242;
        --intro-secondary: var(--fg-3) //#a6a8aa;
        --intro-secondary-rgb: var(--fg-3-rgb) //166,168,170;
        --inverse: var(--fg-0) //#f1f1f2;
        --inverse-rgb: var(--fg-0-rgb) //241,241,242;
        --labels-icon: #f1f1f266;
        --labels-icon-rgb: var(--fg-3-rgb) //241,241,242;
        --link: var(--ac-0) //#68bbe4;
        --link-rgb: var(--ac-0-rgb) //104,187,228;
        --live-location-footer-background: var(--bg-2) //#101d24e6;
        --live-location-footer-background-rgb: var(--bg-2-rgb) //16,29,36;
        --live-location-glow: to_rgba('ac-1', 0.5) //#25d3664d;
        --live-location-glow-rgb: var(--ac-1-rgb) //37,211,102;
        --live-location-glow-stale: to_rgba('red', 0.5) //#ff001f4d;
        --live-location-glow-stale-rgb: var(--b1-0-rgb) //255,0,31;
        --location-cluster-background: var(--bg-1) //#101d24;
        --location-cluster-background-rgb: var(--bg-1-rgb) //16,29,36;
        --media-editor-control: #1c313f;
        --media-editor-control-rgb: 28,49,63;
        --media-viewer-background: to_rgba('bg-1', 0.80) //#101d24fa;
        --media-viewer-background-rgb: var(--bg-1-rgb) //16,29,36;
        --media-viewer-button-background: var(--bg-3) //#1c282f;
        --media-viewer-button-background-rgb: var(--bg-3-rgb) //28,40,47;
        --media-viewer-button-icon: #f1f1f2;
        --media-viewer-button-icon-rgb: var(--fg-3-rgb) //241,241,242;
        --menu-tabs-list-active: var(--ac-0) //#00af9c;
        --menu-tabs-list-active-rgb: var(--ac-0-rgb) //0,175,156;
        --message-background-deep: var(--bg-0) //#080e1259;
        --message-background-deep-rgb: var(--bg-0-rgb) //8,14,18;
        --message-placeholder-icon: var(--fg-3) //#cccccc4d;
        --message-placeholder-icon-rgb: var(--fg-3-rgb) //204,204,204;
        --message-primary: var(--fg-1) //#f1f1f2f2;
        --message-primary-rgb: var(--fg-1-rgb) //241,241,242;
        --message-selection-highlight: to_rgba('ac-0', 0.1) //#f1f1f20d;
        --message-selection-highlight-rgb: var(--ac-0-rgb) //241,241,242;
        --modal-backdrop: to_rgba('bg-1', 0.70) //#080e12d9;
        --modal-backdrop-rgb: var(--bg-0-rgb) //8,14,18;
        --modal-backdrop-solid: var(--bg-0) //#1c282f;
        --modal-backdrop-solid-rgb: var(--bg-0-rgb) //28,40,47;
        --modal-background: var(--bg-2) //#364147;
        --modal-background-rgb: var(--bg-2-rgb) //54,65,71;
        --notification-biz-background: var(--b5-5) //#1c282f;
        --notification-biz-background-rgb: var(--b5-5-rgb) //28,40,47;
        --notification-biz-text: var(--b5-0) //#55fad9;
        --notification-biz-text-rgb: var(--b5-0-rgb) //85,250,217;
        --notification-e2e-background: var(--b3-5) //#1c282f;
        --notification-e2e-background-rgb: var(--b3-5-rgb) //28,40,47;
        --notification-e2e-icon: var(--b3-1) //#fad964;
        --notification-e2e-icon-rgb: var(--b3-1-rgb) //250,217,100;
        --notification-e2e-text: var(--b3-0) //#fad964;
        --notification-e2e-text-rgb: var(--b3-0-rgb) //250,217,100;
        --notification-text: var(--fg-3) //#f1f1f266;
        --notification-text-rgb: var(--fg-3-rgb) //241,241,242;
        --outgoing-background: var(--msg-out-0) //#054740;
        --outgoing-background-rgb: var(--msg-out-0-rgb) //5,71,64;
        --outgoing-background-deeper: var(--msg-out-1) //#063b36;
        --outgoing-background-deeper-rgb: var(--msg-out-1-rgb) //6,59,54;
        --outgoing-background-highlight: #ccc;
        --outgoing-background-highlight-rgb: 204,204,204;
        --overlay: var(--bg-0) //#080e12;
        --overlay-rgb: var(--bg-0-rgb) //8,14,18;
        --panel-background: var(--bg-3) //#1c282f;
        --panel-background-rgb: var(--bg-3-rgb) //28,40,47;
        --panel-background-active: #1a262d;
        --panel-background-active-rgb: 26,38,45;
        --panel-background-colored: var(--bg-3) //#222e35;
        --panel-background-colored-rgb: var(--bg-3-rgb) //34,46,53;
        --panel-background-colored-deeper: var(--bg-3) //#222e35;
        --panel-background-colored-deeper-rgb: var(--bg-3-rgb) //34,46,53;
        --panel-background-deep: var(--bg-2) //#162026;
        --panel-background-deep-rgb: var(--bg-2-rgb) //22,32,38;
        --panel-background-deeper: var(--bg-3) //#1a252c;
        --panel-background-deeper-rgb: var(--bg-3-rgb) //26,37,44;
        --panel-background-hover: var(--bg-4) //#1b272e;
        --panel-background-hover-rgb: var(--bg-4-rgb) //27,39,46;
        --panel-background-lighter: var(--bg-3) //#1a252c;
        --panel-background-lighter-rgb: var(--bg-3-rgb) //26,37,44;
        --panel-header-background: var(--bg-3) //#222e35;
        --panel-header-background-rgb: var(--bg-3-rgb) //34,46,53;
        --panel-header-icon: var(--fg-3) //#9ea3a6;
        --panel-header-icon-rgb: var(--fg-3-rgb) //158,163,166;
        --panel-input-background: var(--bg-2) //#262d31;
        --panel-input-background-rgb: var(--bg-2-rgb) //38.35,44.85526,48.65;
        --panel-primary: var(--fg-3) //#f1f1f259;
        --panel-primary-rgb: var(--fg-3-rgb) //241,241,242;
        --payment-amount: #00a593;
        --payment-amount-rgb: 0,164.8,146.90743;
        --payment-status-failed: #ef697a;
        --payment-status-failed-rgb: 239,105,122;
        --payment-status-processing: var(--fg-1) //#f1f1f273;
        --payment-status-processing-rgb: var(--fg-3-rgb) //241,241,242;
        --payment-status-success: #40cf6c;
        --payment-status-success-rgb: 64,207,108;
        --payment-status-waiting: var(--fg-1) //#f1f1f273;
        --payment-status-waiting-rgb: var(--fg-3-rgb) //241,241,242;
        --photopicker-overlay-background: to_rgba('bg-3', 0.8) //#212c31cc;
        --photopicker-overlay-background-rgb: var(--bg-3-rgb) //33,44,49;
        --picker-background: var(--bg-2) //#2a2f32;
        --picker-background-rgb: var(--bg-2-rgb) //41.6,47.46667,50.4;
        --popup-panel-background: var(--bg-2) //#080e1233;
        --popup-panel-background-rgb: var(--bg-2-rgb) //8,14,18;
        --primary: var(--fg-2) //#a5aaad;
        --primary-rgb: var(--fg-2-rgb) //165,170,173;
        --primary-strong: var(--fg-1) //#d4d5d7;
        --primary-strong-rgb: var(--fg-1-rgb) //212,213,215;
        --primary-stronger: var(--fg-0) //#f1f1f2de;
        --primary-stronger-rgb: var(--fg-0-rgb) //241,241,242;
        --primary-strongest: var(--fg-0) //#fff;
        --primary-strongest-rgb: var(--fg-0-rgb) //255,255,255;
        --primary-title: var(--fg-2) //#d4d5d7f7;
        --primary-title-rgb: var(--fg-2-rgb) //212,213,215;
        --product-image-button-background: var(--bg-4) //#f1f1f259;
        --product-image-button-background-rgb: var(--bg-4-rgb) //241,241,242;
        --product-thumb-background: var(--bg-3) //#1c282f;
        --product-thumb-background-rgb: var(--bg-3-rgb) //28,40,47;
        --product-thumb-background-deeper: var(--bg-2) //#2b3e49;
        --product-thumb-background-deeper-rgb: var(--bg-2-rgb) //43.232,61.76,72.568;
        --progress-background: var(--bg-2) //#2a2f32;
        --progress-background-rgb: var(--bg-2-rgb) //41.6,47.46667,50.4;
        --progress-primary: var(--ac-0) //#0c897c;
        --progress-primary-rgb: var(--ac-0) //12,137,124;
        --ptt-blue: var(--b6-0) //#4fc3f7;
        --ptt-blue-rgb: var(--b6-0-rgb) //79,195,247;
        --ptt-button-cancel: var(--b1-0) //#e53935cc;
        --ptt-button-cancel-rgb: var(--b1-0-rgb) //229,57,53;
        --ptt-button-send: var(--b4-0) //#09d261cc;
        --ptt-button-send-rgb: var(--b4-0-rgb) //9,210,97;
        --ptt-gray: var(--fg-4) //#f1f1f266;
        --ptt-gray-rgb: var(--fg-4-rgb) //241,241,242;
        --ptt-green: var(--b4-0) //#09d261;
        --ptt-green-rgb: var(--b4-rgb) //9,210,97;
        --ptt-message-blue: var(--b6-0) //#68bbe4;
        --ptt-message-blue-rgb: var(--b6-0-rgb) //104,187,228;
        --quick-action-button: to_rgba('fg-3', 0.8) //#f1f1f280;
        --quick-action-button-rgb: var(--fg-3-rgb) //241,241,242;
        --quick-action-button-background: var(--bg-4) //#080e1299;
        --quick-action-button-background-rgb: var(--bg-4-rgb) //8,14,18;
        --rich-text-panel-background: var(--bg-3) //#1c282f;
        --rich-text-panel-background-rgb: var(--bg-3-rgb) //28,40,47;
        --search-container-background: var(--bg-2) //#131c21;
        --search-container-background-rgb: var(--bg-2-rgb) //18.6,28.22,33.4;
        --search-input-background: var(--bg-3) //#2a2f32;
        --search-input-background-rgb: var(--bg-3-rgb) //41.6,47.46667,50.4;
        --secondary: var(--fg-3) //#f1f1f299;
        --secondary-rgb: var(--fg-3-rgb) //241,241,242;
        --secondary-light: var(--fg-2) //#f1f1f240;
        --secondary-light-rgb: var(--fg-2-rgb) //241,241,242;
        --secondary-lighter: var(--fg-3) //#f1f1f273;
        --secondary-lighter-rgb: var(--fg-3-rgb) //241,241,242;
        --secondary-stronger: var(--fg-3) //#f1f1f2cc;
        --secondary-stronger-rgb: var(--fg-3-rgb) //241,241,242;
        --shadow: var(--sh) //#000;
        --shadow-rgb: var(--sh-rgb) //0,0,0;
        --shadow-light: var(--sh) //#00000014;
        --shadow-light-rgb: var(--sh-rgb) //0,0,0;
        --spinner-default: var(--fg-3) //#75787a;
        --spinner-default-rgb: var(--fg-3-rgb) //117,120,122;
        --spinner-highlight: var(--ac-0) //#00af9c;
        --spinner-highlight-rgb: var(--ac-0-rgb) //0,175,156;
        --spinner-incoming: var(--fg-5) //#60696e;
        --spinner-incoming-rgb: var(--fg-5-rgb) //96,105,110;
        --spinner-outgoing: var(--ac-5) //#4c7a75;
        --spinner-outgoing-rgb: var(--ac-5-rgb) //76,122,117;
        --startup-background: var(--bg-0) //#131c21;
        --startup-background-rgb: var(--bg-0-rgb) //18.6,28.22,33.4;
        --startup-icon: var(--fg-3) //#6c7175;
        --startup-icon-rgb: var(--fg-3-rgb) //108,113,117;
        --status-background: var(--bg-1) //#000;
        --status-background-rgb: var(--bg-1-rgb) //0,0,0;
        --status-background-hover: var(--bg-2) //#242424;
        --status-background-hover-rgb: var(--bg-2-rgb) //36,36,36;
        --status-primary: var(--fg-1) //#fff;
        --status-primary-rgb: var(--fg-1-rgb) //255,255,255;
        --status-secondary: var(--fg-4) //#ffffff8c;
        --status-secondary-rgb: var(--fg-4-rgb) //255,255,255;
        --status-secondary-stronger: var(--fg-5) //#b3b3b3;
        --status-secondary-stronger-rgb: var(--fg-5-rgb) //179,179,179;
        --success: var(--ac-0) //#00af9c;
        --success-rgb: var(--ac-0-rgb) //0,175,156;
        --suspicious-background: #ef697acc;
        --suspicious-background-rgb: 239,105,122;
        --system-message-background: (ow_sys_msg) ? sys_msg_bg : var(--b6-4) //#1e2a30;
        --system-message-background-rgb: (ow_sys_msg) ? to_rgb(sys_msg_bg) : var(--b6-4-rgb) //30,42,48;
        --system-message-text: to_rgba('fg-1', 0.87) //#f1f1f2de;
        --system-message-text-rgb: var(--fg-1-rgb) //241,241,242;
        --teal-hover: #00b7a1;
        --teal-hover-rgb: 0,183,161;
        --teal-pale: #5fc8bc;
        --teal-pale-rgb: 95,200,188;
        --thumb-border-active: var(--bg-2) //#75787a;
        --thumb-border-active-rgb: var(--bg-2-rgb) //117,120,122;
        --thumb-border-active-new-media-editor: var(--fg-4) //#f1f1f2;
        --thumb-border-active-new-media-editor-rgb: var(--fg-4-rgb) //241,241,242;
        --thumb-border-viewer-active: var(--fg-3) //#75787a;
        --thumb-border-viewer-active-rgb: var(--fg-3-rgb) //117,120,122;
        --toast-background: to_rgba('bg-3', 0.96) //#080e12f5;
        --toast-background-rgb: var(--bg-3-rgb) //8,14,18;
        --tooltip-background: to_rgba('bg-4', 0.85) //#595959d9;
        --tooltip-background-rgb: var(--bg-4) //89.25,89.25,89.25;
        --typing: var(--ac-0) //#00af9c;
        --typing-rgb: var(--ac-0-rgb) //0,175,156;
        --unread-background: var(--bg-3) //#1c282f;
        --unread-background-rgb: var(--bg-3-rgb) //28,40,47;
        --unread-bar-background: to_rgba('bg-0', 0.7) //#080e124d;
        --unread-bar-background-rgb: var(--bg-0-rgb) //8,14,18;
        --unread-marker-background: var(--ac-0) //#00af9c;
        --unread-marker-background-rgb: var(--ac-0-rgb) //0,175,156;
        --unread-marker-text: var(--white) //#101d24;
        --unread-marker-text-rgb: var(--white-rgb) //16,29,36;
        --video-player-background: #000;
        --video-player-background-rgb: 0,0,0;
        --video-primary: #fff;
        --video-primary-rgb: 255,255,255;
        --voip-accept-background: #70db91;
        --voip-accept-background-rgb: 112,219,145;
        --voip-background: #262626;
        --voip-background-rgb: 38,38,38;
        --voip-background-deep: #000;
        --voip-background-deep-rgb: 0,0,0;
        --voip-primary: #fff;
        --voip-primary-rgb: 255,255,255;
        --voip-reject-background: #e54b40;
        --voip-reject-background-rgb: 229,75,64;
        --wallpaper-background: var(--bg-1) //#2b93ce;
        --wallpaper-background-rgb: var(--bg-1-rgb) //13.12731,19.91681,23.57269;
        --wallpaper-thumb-border-active: var(--bg-5) //#75787a;
        --wallpaper-thumb-border-active-rgb: var(--bg-5-rgb) //117,120,122;
        --wallpaper-thumb-border-hover: var(--bg-4) //#3b4042;
        --wallpaper-thumb-border-hover-rgb: var(--bg-4-rgb) //59,63.52941,66;
        --win32-title-primary: var(--fg-1) //#fff;
        --win32-title-primary-rgb: var(--fg-1-rgb) //255,255,255;

        /// Generate DWA 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
                { key + '-rgb' }: to_rgb(val)
            }
        }

        /// Misc colors.
        --white:      _white
        --white-rgb:  to_rgb(_white)
        --sh:         _sh
        --sh-rgb:     to_rgb(_sh, 1)
        --t:          transparent
        --bshadow:    0 4px 8px 2px var(--shadow)

        /// Theme intro colors.
        svg_bg = to_svg(bg-2)
        svg_ac = to_svg(ac-0)

        /// Theme intro image.
        _1  = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' "
        _1 += "height='256' width='256'><g stroke='"
        _2  = "'><path d='M128.4901 30.8659a95.4375 95.4375 0 00-95.4375 95.4375"
        _2 += " 95.4375 95.4375 0 0014.168 50.0332L35.6698 221.276l44.7989-12.49"
        _2 += "8a95.4375 95.4375 0 0048.0214 12.9629 95.4375 95.4375 0 0095.4375"
        _2 += "-95.4375 95.4375 95.4375 0 00-95.4375-95.4375z' fill='"
        _3  = "' fill-rule='evenodd' stroke-width='18' stroke-linecap='square'/>"
        _3 += "<path d='M97.8104 79.8463c-4.9671.0406-13.5028 2.0796-17.7812 14."
        _3 += "8946-6.8318 20.4631 12.5737 43.3028 27.2438 57.4735 14.7975 14.29"
        _3 += "38 43.1559 26.507 58.0098 21.08 20.5566-8.9065 15.2475-22.9479 15"
        _3 += ".2475-22.9479l-22.9727-11.0878s-2.062-1.206-3.4146.5737c-1.0042 1"
        _3 += ".3213-9.4409 11.3755-9.4409 11.3755s-1.449 1.668-3.827.7402c-5.75"
        _3 += "74-2.2462-14.2018-7.4856-18.5314-10.7795-6.8875-5.2399-12.957-13."
        _3 += "0846-16.9473-19.668-1.2556-2.5597.6953-4.709.6953-4.709s6.0303-8."
        _3 += "2629 7.0176-9.5566c1.0068-1.3194.2539-3.3633.2539-3.3633l-10.539-"
        _3 += "23.2285s-2.0334-.8212-5.0138-.7969z' fill='"
        _4  = "' stroke-linejoin='round'/></g></svg>"
        _i = s('url("%s%s%s%s%s%s%s")', unquote(_1), svg_ac, unquote(_2), svg_bg,
                                        unquote(_3), svg_ac, unquote(_4))
        --intro-image: _i
    }

    // Animation for 'Typing...' indicator.
    if (compact_mode) {
        @keyframes aBorder {
            40% { opacity: 0 }
            80% { opacity: 1 }
        }
    }

    // Feat -> Animate emojis.
    if (emoji_a) {
        @keyframes aPulse {
          0%   { transform: scale(.9) }
          50%  { transform: scale(1)  }
          100% { transform: scale(.9) }
        }

        @keyframes aKiss {
          0%   { transform: scale(.7) }
          50%  { transform: scale(.8) }
          80%  { transform: scale(1) rotate(-30deg) }
          100% { transform: scale(.7) }
        }
    }

    // Global styles.
    html > body {
        background-image: none i
        c: fg0 0 bg0

        option { c: fg1 0 bg3 }

        /// Feat -> Custom font.
        &, button, input { font-family: var(--ui-font) }

        /// Toast notifications.
        ._2-NDv {
            c: fg1
            border: 1px solid bg5 i
            button:nth-child(2) { c: ac1 }
            button:nth-child(3) { c: fg4 }
        }

        /// Intro image.
        [data-asset-intro-image-dark],
        [data-asset-intro-image-light] {
            max-width: 240px
            max-height: 240px
            background-image: var(--intro-image)
            transition: opacity 0.6s ease
            rad: 0 i

            /// Title.
            + div h1 { c: fg0 }

            /// Custom text.
            + div h1 + div[class] {
                font-size: 0 i
                c: fg1

                /// Announcements.
                &::before {
                    display: block
                    font-size: 16px
                    margin-bottom: -16px
                    white-space: pre-wrap
                    content: var(--message) var(--changes)
                }

                /// Version.
                &::after {
                    display: block
                    font-size: 16px
                    margin-top: 16px
                    padding-top: 24px
                    margin-bottom: -16px
                    content: var(--version)
                    border-top: 1px solid bg4 i
                }
            }
        }

        /// Settings -> Tweaks for 'Set Chat Wallpaper' area. #149
        /._1wlMU {
            position: relative

            /// Override selected wallpaper.
            --blue-light: ac3
            --inverse: ac3

            /// Add pseudo text.
            &::before {
                content: ''
                filter: invert(var(--chat-bg-i)) opacity(var(--chat-bg-o))
                background: var(--chat-image) i
                position: absolute
                height: 100%
                width: 100%
            }

            /// Expand default chat wallpaper.
            &:first-child {
                &:not(._2ILMM) { border: 4px solid bg2 i }
                &, &::after { width: calc(3 * 82px + 30px) i }
                span {
                    font-size: 0 i
                    &::before {
                        content: 'Use this with Dark-WhatsApp'
                        font-size: 16px i
                    }
                }
            }

            /// Override light gray wallpapers.
            /[style *= 'rgb(222\, 227\, 233)'],
            /[style *= 'rgb(217\, 218\, 222)'],
            /[style *= 'rgb(192\, 193\, 196)'] {
                c: 0 0 bg2
            }
        }

        /// Global -> Scrollbar styles.
        /\* {
            /// Scrollbar colors.
            @supports (scrollbar-width: thin) {
                scrollbar-color: ac2 var(--shadow) i
            }
            &::-webkit-scrollbar {
                &-thumb { c: 0 0 ac2 }
                &-track { c: 0 0 var(--shadow) }
            }
        }

        /// Feat -> Hide profile pictures.
        if (chat_h_p_p) {
            /img[src*='whatsapp.com/pp?'] { display: none i }
        }

        /// Loading page.
        /// NOTE: Keep it because there are two `startup` states; one of them
        /// is *not* styled by default, so it leads to white background flash.
        /[id *= 'startup'] { c: 0 0 bg0 }

        /// Progress bars.
        /// NOTE: There is still flashing of unstyled content. Sigh.
        /progress {
            c: 0 0 bg2
            &[value]::-moz-progress-bar { c: 0 0 ac0 }
            /::-moz-progress-bar { c: 0 0 bg4 }
            /::-webkit-progress {
                &-bar { c: 0 0 bg4 }
                &-value { c: 0 0 ac0 }
            }
        }
    }

    // Feat -> Rounded corners for avatars.
    .-y4n1[style] {
        /// Global/shared contacts.
        &, /._3PdFH { c: 0 0 bg5 }

        /// Avatars/images/new group/contact avatar/your avatar.
        &, > img, /._2qsE7, /._1_JE6, /.JRQje, /._28-ha {
            rad: var(--r-avatars) i
        }

        /// Add rounded corners to the default group SVG avatar.
        /._1Gyz6 { c: 0 0 bg5 }

        /// Fix 'New group' bottom divider to hide drawer background-color.
        /[data-list-scroll-offset] > div:first-child > div:last-child {
            margin-left: 0 i
        }

        /// Tweak default-user icons.
        if (radius_a != '50%') {
            /[style *= 'width:'][style *= 'height:'] {
                [data-icon = 'default-user'] svg {
                    margin-top: -4px i
                    transform: scale(0.7) i
                }
            }
        }
    }

    // Emojis -> Custom enhancements.
    .emojik {
        transition: transform 0.15s ease i

        /// Default opacity.
        &:not(:hover):not(:focus):not(.selected) {
            filter: opacity(var(--emoji-o))
        }

        /// Hovered/focused states.
        &:hover:not(.selected):not(:focus) {
            transform: scale(1.2)
            box-shadow: none i
            opacity: 1 i
        }

        /// Selected state. #148
        &.selected, &:focus { box-shadow: 0 0 0 1px bg3, 0 0 0 3px ac0 i }
    }

    // Modals.
    .overlay {
        /// Media/Avatar viewers have different headers. @upstream
        /[data-animate-media-viewer] {
            > div:first-child, ../ ._3ZxL8 {
                border-bottom: 1px solid bg5 i
                c: 0 0 bg2
            }

            /// Fix header conflicts.
            ../ ._2Z4DV._3nJaS { c: 0 0 t }
        }

        /// Add borders.
        [data-animate-modal-popup] {
            box-shadow: var(--bshadow) i
            border: 1px solid bg5
            rad: var(--r-menus) i

            .copyable-area {
                > header { border-bottom: 1px solid bg5 }
                > span [style *= 'translateY']:not([tabindex]), ._30pU5 {
                    border-top: 1px solid bg5
                }
            }
        }

        /// Groups -> Search participants.
        header + div[tabindex] + div div[style] {
            --background-default: bg1
            --background-default-hover: bg2
        }

        /// Fix media selection.
        /._1O9tq { c: 0 bg5 bg2 }

        /// Status area modal.
        /[data-animate-status-v3-modal-background = 'true'] {
            c: 0 0 var(--modal-backdrop)
            /// Main content.
            > div {
                c: 0 0 bg1

                /// Sidebar.
                > div:nth-child(1) {
                    c: 0 0 bg2
                    border-right: 1px solid bg5
                    rad: var(--r-menus) 0 0 var(--r-menus) i
                }

                /// Large screens.
                if (!fullscreen) {
                    @media (min-width: 1441px) {
                        border: 1px solid bg5 i
                        rad: var(--r-menus) i
                    }
                }
            }

            /// Background color for author & publish date. @upstream
            /._2yhFa {
                margin: auto
                padding: 5px 8px 8px
                min-width: 150px
                rad: var(--r-inputs)
                background-color: to_rgba('bg-1', 0.5)
            }

            /// Fill color for unread icon. @upstream
            /[data-icon = 'status-v3-unread'] {
                [fill = '#009588'] { fill: ac0 i }
            }
        }

        /// 'Allow notifications' modal.
        &._3pCPi._1814Z {
            c: 0 0 var(--modal-backdrop)
            [data-animate-modal-popup] {
                padding: 16px i
                c: 0 0 bg1

                /// Fix icon color.
                [data-icon = 'back'] path { fill: fg1 i }

                /// Uniform look with other modals. @upstream
                --white-rgb: var(--fg-2-rgb)
            }
        }
    }

    // Login page.
    .landing {
        &-wrapper::before { content: unset i }
        &-header {
            position: relative

            /// WhatsApp logo.
            path[fill ^= '#FFF'] { fill: ac0 }
            path[fill ^= '#00E'] { fill: bg1 }
            div {
                text-transform: unset
                c: fg1
            }

            /// Userstyle version.
            &::after {
                font-size: 14px
                font-weight: 500
                position: absolute
                content: var(--version)
                /html[dir = 'RTL'] & { left: 0 }
                /html[dir = 'LTR'] & { right: 0 }
            }
        }

        &-window:not(#z) {
            rad: 4px
            c: 0 0 bg1
            box-shadow: 0 0 1px bg5
        }

        &-main {
            a[href] { c: ac0 }
            label, ._38sqg { c: fg3 }
            .landing-title { c: fg1 }
            rect[fill ^= '#f2f'], rect[fill ^= '#F2F'] { fill: bg5 }
            path[fill ^= '#818'] { fill: ac0 }

            /// QR code.
            div[data-ref] {
                rad: 0 i
                filter: contrast(150%)
                outline: 4px solid #fff
                box-shadow: 0 0 0 4px #fff
                [role='button'] { c: white 0 ac0 }

                /// Change white border when inactive.
                &._267ZZ {
                    outline: 4px solid ac0
                    box-shadow: 0 0 0 4px ac0
                }
            }

            /// Video tutorial.
            + div {
                c: 0 0 t
                img { opacity: 0.3 }
                /// Reset background on button container.
                [style *= 'opacity: 1'] { c: 0 0 t }
            }

            /// 'Keep me signed in' tooltip. #59
            ._2-pPz {
                c: white 0 ac0
                box-shadow: bsh
                &::before { border-bottom-color: ac0 i }
            }
        }
    }

    // Various app styles.
    #app > div {
        &::after {
            /// Remove app background in fullscreen mode or low-res screens.
            @media screen and (min-width: 1441px) {
                content: (fullscreen || app_image == 'none') ? unset i : '' i
            }

            /// Feat -> App background.
            if (app_image != 'none' && app_image != 'default') {
                s = var(--bg-blur-s)
                b = blur(var(--bg-blur))
                o = opacity(var(--bg-opacity))
                t = invert(var(--bg-invert))
                h = hue-rotate(var(--bg-hue))
                top: s; right: s; bottom: s; left: s;
                height: unset; width: unset;
                filter: b o t h
                background-position: var(--bg-pos) i
                background-image: var(--bg-image) i
                background-repeat: var(--bg-rep) i
                background-size: var(--bg-size) i
                background-color: transparent i
            } else if (app_image == 'default') {
                c: 0 0 bg1
            }
        }

        /// Right -> Remove top border from the first Links/Docs message.
        /div, /span {
            div:first-child > .U7SeD::before { content: none }
        }

        /// Feat -> Input border radius.
        .RPX_m { rad: var(--r-inputs) i }

        /// Dropdowns -> Chat/Header.
        > span > div, ._1qAEq {
            &[style ^= 'transform-origin:'][tabindex] {
                box-shadow: var(--bshadow) i
                border: 1px solid bg4
                rad: var(--r-menus) i
            }
        }

        /// Floating emoji picker.
        > span > ._2iHK1 {
            border: 1px solid bg5 i
            box-shadow: var(--bshadow) i

            /// Remove borders.
            ._3ob6-, ._1BMu5 { border-left: none i }

            > [data-animate-dropdown-nib] {
                border-bottom: 1px solid bg5
                border-right: 1px solid bg5
                rad: 0 0 4px 0
                bottom: -8px i
            }
        }
    }

    // Shared app drawer styles.
    #app > div > [tabindex] {
        c: 0 0 bg1

        @media (min-width: 1441px) {
            &, /[data-animate-status-v3-modal-background] > div:first-child {
                /// Feat -> Fullscreen mode.
                if (fullscreen) {
                    width: 100% i
                    max-width: 100% i
                    height: 100% i
                    top: unset i
                } else {
                    /// Feat -> App width.
                    width: calc(100% - 38px) i
                    max-width: var(--app-width) i
                    rad: var(--r-menus) i
                    border: 1px solid bg5 i
                    box-shadow: 0 2px 6px sh i
                }
            }
        }

        /// Odd header-like tall background.
        &::after { content: unset i }

        /// Search.
        /._3LX7r {
            c: 0 0 bg2
            border-bottom: 1px solid bg5 i
            label { box-shadow: inset 0 0 0 1px bg4 }
            &::after { display: none i }
            &._1brJQ { box-shadow: var(--bshadow) }
        }

        /// Left -> Resets.
        #side {
            > header {
                border-bottom: 1px solid bg5 i

                /// Alerts.
                + span > div {
                    /// Close icon for 'low battery' state.
                    [data-icon = 'x'] svg path { fill: fg5 }

                    /// Feat -> Alerts.
                    if (app_alerts == 'hide') {
                        > div { display: none i }
                    } else if (app_alerts == 'notifications') {
                        > div { border-bottom: 1px solid bg5 i }
                        > div._1Lctt { display: none i }
                    } else {
                        border-bottom: 1px solid bg5 i
                    }
                }
            }
        }

        /// Right -> Drawer divider.
        &.three > div:nth-child(2) > div:nth-child(3) {
            border-left: 1px solid bg5 i

            /// Remove shadows from drawer sections.
            /._3ZEdX { box-shadow: 0 0 0 1px bg4 i }

            /// Remove native dark mode dividers.
            /.dark .three {
                #main > *, ._1gL0z { border-right: none i }
            }
        }

        /// Floating drawers.
        > div:nth-child(2) {
            /// Left -> Archived contacts.
            > div:nth-child(1) {
                > span[class] * {
                    // c: 0 0 red
                    [role][aria-selected='false'] > div {
                        c: 0 0 bg1
                        &:hover { c: 0 0 bg2 }
                    }
                }
            }

            /// Left -> Settings -> Help.
            > div:nth-child(1) {
                .copyable-text ~ div[role='button'] {
                    --background-default: var(--bg-1)
                    --background-default-hover: var(--bg-2)
                }
            }

            /// Left/Right -> Starred messages.
            > div:nth-child(1),
            > div:nth-child(3) {
                // c: 0 0 blue
                header + div > span > div > div {
                    --drawer-gallery-background-hover: var(--bg-2)
                    --border-panel: b11
                    /// Always show top border.
                    &::before { c: 0 0 bg3 }
                    /// Do not hide bottom border.
                    &::after { c: 0 0 t }
                }
            }

            /// Right -> Invite to group.
            > div:nth-child(3) {
                header + div {
                    > div:first-child.wJ21F, // Invite link wrapper.
                    > div[role='button'] {
                        --background-default: bg1
                        --background-default-hover: bg2
                    }
                }
            }
        }
    }

    // Global -> Icons.
    span[class] {
        /// Right -> Contact/group selected media drawer.
        &[data-icon = 'checkbox-round-checked'] {
            [fill = '#00BFA5'] { fill: ac0 }
            [fill = '#FFF'] { fill: white }
        }

        /// Left -> Reset 'connecting' icon background. @upstream
        &[data-icon] path[fill = '#FFBC00'] { fill: bg3 i }

        /// Chat -> Context menu arrows.
        &[data-icon = 'down-context'] { c: fg3 }

        /// Hover animation for icons.
        /#side > header,
        /#main > div + header,
        /#main > footer > .copyable-area,
        /#main > footer + span:not([class]) > div,
        /.overlay > div:first-child,
        /.copyable-area > header {
            button:not([data-animate-menu-icons-item]), [role = 'button'] {
                [data-icon] { transition: fill-opacity 0.3s ease i }
                &:not(._3QjfB):hover [data-icon] { fill-opacity: 0.6 i }
            }
        }
    }

    // Feat -> Consistent drawer headers.
    .copyable-area header[class] {
        if (app_header) {
            height: 59px i
            justify-content: center i
            border-bottom: 1px solid bg5 i

            /// Reset left drawer inner item.
            > [data-animate-drawer-title] {
                height: unset i

                /// Reset header text.
                > div:nth-child(2) {
                    margin-top: 1px i
                    font-size: 18px i
                    font-weight: normal i
                }
            }
        } else {
            --panel-background-colored: bg4 i
        }
    }

    // Sidebar.
    #side {
        /// Feat -> Blur contacts.
        if (chat_b_c) {
            [style *= '0s; height'] {
                /// Remove odd shadow.
                > [aria-selected = 'true'] {
                    > div::after { display: none i }
                }

                /// Do the blur.
                > :not([aria-selected = 'true']) {
                    overflow: hidden i
                    > div { transition: background, filter 300ms ease-in-out i }
                    &:not(:hover) > div { filter: blur(6px) }
                    &:hover { filter: blur(0px) }
                }
            }
        }
    }

    // Chat.
    #main {
        /// Reset header.
        > header {
            border-bottom: 1px solid bg5 i
            box-shadow: none i
            c: 0 bg5

            /// Remove border in light mode.
            &::after { content: unset }
        }

        /// System messages.
        ._2kR4B {
            $c = (ow_sys_msg) ? darken(sys_msg_bg, -10%) : b63
            border: 1px solid $c
            text-shadow: none i

            /// End-to-end encryption message.
            &._1KcEQ { border: 1px solid b34 }

            /// Bussiness account message.
            &._3nwTJ { border: 1px solid b54 }
        }

        /// Loading previous messages / Jump to new messages.
        ._3M4BR, ._2wFt8 { border: 1px solid bg5 }

        /// Feat -> Custom chat background.
        /[data-asset-chat-background-dark],
        /[data-asset-chat-background-light] {
            filter: invert(var(--chat-bg-i)) opacity(var(--chat-bg-o))
            background-image: var(--chat-image) i
            background-position: var(--chat-bg-p) i
            background-repeat: var(--chat-bg-r) i
            background-size: var(--chat-bg-s) i
            opacity: 1 i

            /// Feat -> Show chat image.
            if (!chat_bg) { display: none i }
        }

        /// Tweak 'unread messages' alert.
        ._2WwJ0 { border: none i }

        /// Tweak box-shadow for message bubbles.
        [class *= 'message-'][data-id] {
            /// Exclude stickers.
            > span + div:not(._3nuWB) > div {
                box-shadow: 0 1px 0 to_rgba('shadow', 0.2) i
            }
        }

        /// Fix context menu background for stickers.
        .QhSbI + div[style] { c: 0 0 bg4 }

        /// Add background to media message timestamps.
        /[style *= 'width'][style *= 'height'] + div {
            /// Images/gifs.
            &._1yXJw, &._2QpTA {
                padding: 2px 4px i
                background-color: to_rgba('bg-1', 0.7) i
                rad: (tail_style == 'fb-like') ? 16px i : 5px i
            }

            /// Videos.
            /.video-thumb {
                /// Length/Timestamp.
                ._1rd4q, + ._3phU6 {
                    padding: 2px 4px i
                    background-color: to_rgba('bg-1', 0.7) i
                    rad: (tail_style == 'fb-like') ? 16px i : 5px i
                }

                /// Timestamps in grouped media.
                &._3V2jl + ._3phU6 {
                    right: 5px i
                    bottom: 3px i
                }
            }

            /// Google Maps timestamps.
            /[style *= 'height'][data-plain-text *= 'maps.google.com'] {
                + div[class] > [role] {
                    padding: 2px 4px i
                    background-color: to_rgba('bg-1', 0.7) i
                    rad: (tail_style == 'fb-like') ? 16px i : 5px i
                }

                /// Live location overlay.
                /.fMR4l { background-color: to_rgba('bg-4', 0.5) i }
            }
        }

        /// Feat -> Blur media.
        if (chat_b_img) {
            /[class *= 'message-'] [style *= 'height'] {
                img:not([src*='/pp?']) {
                    transition: 0.5s ease
                    transition-delay: var(--blur-out)
                    filter: blur(16px) grayscale(100%)

                    &:hover {
                        transition-delay: var(--blur-in)
                        filter: none i
                    }
                }

                /// Reset blur for avatars in audio messages.
                &[style *= 'width'] > img._2goTk { filter: none i }
            }

            /[class *= 'message-'] .video-thumb {
                [style *= "data:image"] {
                    transition: 0.5s ease
                    transition-delay: var(--blur-out)
                    filter: blur(16px) grayscale(100%)
                }

                &:hover [style *= "data:image"] {
                    transition-delay: var(--blur-in)
                    filter: none i
                }
            }
        }

        /// Footer.
        > footer {
            /// Compose border.
            ../> header ~ div[style *= 'height: 0px'] {
                border-top: 1px solid bg5 i
            }

            /// Popover border.
            .velocity-animating,
            div[style $= 'translateY(0%);'],
            div[style $= 'translateY(0px);'] {
                box-shadow: 0 -1px 0 bg5 i
            }

            /// Fix borders an unknown contact.
            ._1Q5Gk {
                border-top: none
                border-bottom: 1px solid bg5
            }

            /// Groups -> Only admins can send messages.
            ._2K2iM {
                border-top: 1px solid bg5 i
                border-left: @border-top
            }

            /// Emoji quick-picker.
            [data-list-scroll-container] {
                border-bottom: 1px solid bg5 i
                box-shadow: 0 -1px bg5 i
            }

            /// Chat -> Select messages.
            + span > ._2ngbn {
                border-top: 1px solid bg5 i
                border-left: 1px solid bg5 i
            }

            /// Feat -> Input border radius.
            ._2A8P4 { rad: var(--r-inputs) i }
        }

        /// Fix styles for Google Maps.
        img[src *= 'maps.googleapis.com'] {
            filter: invert(0.8) hue-rotate(180deg) i
        }

        /// Fix unread messages in dark mode. @upstream
        /.dark ._1V5O7 ._2pkLM ._15smv { c: var(--secondary-stronger) }

        /// Groups -> Fix opacity for nicknames.
        /[class *= ' color-'] > span:nth-child(2) { c: fg3 }

        /// Theme colors for replies and member nicknames.
        for k, v in 0..20 {
            key = (k < 8) ? k + 1 : (k < 15) ? k + 1 - 8 : k + 1 - 15
            val = (k < 8) ?     0 : (k < 15) ?         1 :          2
            .color-{ k } { c: s('var(--b%s-%s)', key, val) }
            .bg-color-{ k } { c: 0 0 s('var(--b%s-%s)', key, val) }
        }
    }

    // Feat -> Compact mode.
    if (compact) {
        /// Reset height/width if there is an overflow.
        #app > div > [tabindex] {
            @media screen and (max-height: 648px) { min-height: auto }
            @media screen and (max-width: 648px) { min-width: auto }
            // > div *:hover { box-shadow: inset 0 0 0 1px crimson i }
        }

        /// Compact mode.
        @media screen and (max-width: compact_mw) {
            /// Shared drawer styles.
            .two, .three {
                /// Left -> Settings/Contacts.
                > div:nth-child(3) {
                    flex: 0 0 80px i
                    transition: 0.2s ease
                    &:hover, &:focus-within { flex: 0 0 30% i }
                }
            }

            /// Tweaks for two open drawers.
            .two {
                /// Reset upload preview.
                >  div:nth-child(2) > div:nth-child(2) {
                    flex: 0 0 calc(100% - 80px) i
                    margin-left: calc(-30% + 80px)
                }

                /// Expand contacts.
                > div:nth-child(3) {
                    min-width: 1px i
                    transition: 0.3s ease i
                    transition-delay: var(--c-m-delay) i

                    /// All left drawers should be the same width.
                    &:hover {
                        min-width: 349px i
                        transition-delay: var(--c-m-hover) i
                        flex: 0 0 30% i
                    }
                }

                /// Settings/Starred/Archived drawers.
                > :nth-child(2) > :nth-child(1) {
                    z-index: 201 i
                    flex: 0 0 30% i
                    min-width: 350px i
                    [style][tabindex] { border-right: 1px solid bg5 i }
                }
            }

            /// Tweaks for three open drawers.
            .three {
                /// Reset upload preview.
                > div:nth-child(2) > div:nth-child(2) {
                    flex: 0 0 calc(100% - 30% - 80px) i
                    margin-left: calc(-30% + 80px)
                }

                /// Reset chat when info is open.
                > div:nth-child(4) {
                    flex: 0 0 calc(100% - 30% - 80px) i
                }

                /// Do not expand left drawer when right drawer is open.
                > div:nth-child(3):hover { flex: 0 0 80px i }
            }

            /// Contacts.
            #side {
                status = '._1Tnge'
                unread = '._38M1B'
                typing = 'span[title*="…"]'
                ephemeral = '._2jC5S'

                /// Fix header width.
                > header {
                    min-width: 240px

                    /// Remove notifications completely.
                    + span { display: none }

                    /// Fix search bar width.
                    + span + div:not(:focus-within) label { padding: 0px }
                }

                /// Ephemeral icon.
                { ephemeral } {
                    z-index: 101
                    right: 0px i
                    bottom: -1px i
                }

                /// 'Typing...' status indicator.
                { typing } {
                    overflow: unset i
                    margin-top: -8px i
                    margin-left: 0px i
                    position: absolute i

                    &::before {
                        content: '' i
                        z-index: 1 i
                        position: absolute i
                        top: -31px i
                        left: -66px i
                        height: 53px i
                        width: 53px i
                        rad: var(--r-avatars) i
                        box-shadow: inset 0 0 0 3px b40 i
                        animation: 2s aBorder infinite i

                        /// Fix RTL layout.
                        /[dir = 'RTL'] & { left: 63px i }
                    }
                }

                /// Items.
                .TbtXF {
                    /// Remove whitespace from icons.
                    ._2Q3SY { margin: 0 i }

                    /// Reverse message content.
                    ._1SjZ2 {
                        position: relative
                        flex-direction: row-reverse i
                        // border: 1px solid blue

                        /// Remove margin from status wrapper.
                        > ._15smv {
                            z-index: 999 i
                            margin-left: 0 i
                            position: fixed
                            left: 39px
                            bottom: 6px
                            rad: 50%

                            /// Fix RTL layout.
                            /[dir = 'RTL'] & {
                                left: unset i
                                right: 36px i
                            }

                            /// Unread indicator.
                            { unread } {
                                border: 4px solid bg2
                                left: 20px i
                            }
                        }

                        /// Reverse message and icons.
                        ._15smv > span {
                            display: flex i
                            flex-direction: row-reverse i
                        }

                        /// Remove pinned, shared contact, chevron, and all other status icons.
                        ._3EhXO,
                        .status-vcard,
                        span:nth-child(3) > div, // Removes animation.
                        [data-icon]:not([data-icon*='status-']):not([data-icon*='disappearing']) {
                            display: none
                        }
                    }

                    /// Message status.
                    { status } {
                        padding: 1.5px
                        z-index: 102
                        position: fixed
                        left: 38px
                        border: 4px solid bg2
                        c: 0 0 bg1
                        rad: 50%

                        /// Fix RTL layout.
                        /[dir = 'RTL'] & {
                            left: unset i
                            right: 42px i
                        }

                        /// Make SVG smaller.
                        > span > svg {
                            padding: 2px
                            height: 14px i
                            width: 14px i
                        }
                    }
                }

                /// Hover/Active states.
                [aria-selected='false'] > div:hover {
                    { unread }, { status } { c: 0 bg3 }
                }
                [aria-selected='true'] > div {
                    { unread }, { status } { c: 0 bg4 }
                }
            }
        }
    }

    // Main -> Chat message bubbles.
    .message {
        /// 1, 2:    External video/link
        /// 3, 4, 5: Reply, Gif, Document
        /// 6, 7:    (Grouped) images/videos
        /// 8:       Google Maps
        md = '._1d7uX, ._3JHdl, .i8New, .QnPmY, ._20adz, ._1mTER, .-xSc5, ._1VzZY'
        /// 1:   Messages
        /// 2:   Video timestamp/length
        /// 3-5: Images/gifs/stickers
        ts = '._1nOME, .video-thumb + ._3phU6, ._1rd4q, ._1yXJw, ._2QpTA, ._2zab4'
        /// Big emojis.
        big = '._3B8qp'

        /// Feat -> Message tails.
        if (tail_style == 'fb-like') {
            _o = 16px
            _m = (16px - 2px)
            _i = 6px

            /// Feat -> Incoming message bubble position.
            if (!bubble_in) {
                left_top = _o _o _o _i i
                left_mid = _i _o _o _i i
                left_med = _i _m _m _i i
                left_end = _i _o _o _o i
            } else {
                left_top = _o _o _i _o i
                left_mid = _o _i _i _o i
                left_med = _m _i _i _m i
                left_end = _o _i _o _o i
            }

            /// Feat -> Outgoing message bubble position.
            if (!bubble_out) {
                right_top = _o _o _i _o i
                right_mid = _o _i _i _o i
                right_med = _m _i _i _m i
                right_end = _o _i _o _o i
            } else {
                right_top = _o _o _o _i i
                right_mid = _i _o _o _i i
                right_med = _i _m _m _i i
                right_end = _i _o _o _o i
            }

            /// Helpers.
            bubble  = '._2rBI0'
            system  = '._3ASsl, .XFAMv'
            sticker = '._2JswF'
            forward = '._1ubAk'
            context = '._2_CMk'

            /// Shared styles.
            &-in, &-out {
                /// Remove tails.
                [data-icon *= 'tail-'] { display: none i }

                /// Single message | Groups -> Sticker sender.
                &:not({ bubble }) > div > div { rad: _o i }
                &:not({ bubble }) { sticker } { rad: _o i }

                /// Fix rounded corners for single message.
                &:not({ bubble }) { md } { rad: _o i }

                /// Fix rounded corners for forward button.
                &:not(#z) { forward }:not(#z) { rad: _o i }

                /// Fix rounded corners for images/videos in grouped media.
                &:not(#z) ._3dejV._2XJpe._7M8i6 { ._1mTER, .-xSc5 { rad: _o i }}

                /// Fix rounded corners for alerts in Google Maps messages.
                /// NOTE: Hard-coded; adding more logic for this makes no sense.
                .SpdXA { rad: _o _o 0 0 i }
                .fMR4l { rad: 0 0 _o _o i }

                /// Increase padding-right for bubbles.
                &:not(._2FNAC) ._1dB-m {
                    padding-right: 9px i

                    /// Fix margin for replies.
                    ._3fs13 { margin-right: -6px }
                }

                /// Rounded timestamps.
                { ts } { rad: 18px i }
            }

            /// Incoming messages.
            &-in {
                { context } { border-top-right-radius: _m i }
                /// First message -> In/Out/System messages.
                &, ../-out, /{ system } {
                    &:not({ bubble }) + .message-in{ bubble } {
                        // c: 0 0 #ff55550a
                        > div > div, { md }, { sticker } { rad: left_top }
                    }
                }
                /// Messages in between.
                &{ bubble } + { bubble }:not(#z) {
                    // c: 0 0 #55ff550a
                    { md } { rad: left_med }
                    > div > div, { sticker } { rad: left_mid }
                    { context } { border-top-right-radius: _i i }
                }
                /// Last message.
                &{ bubble } + .message-in:not({ bubble }) {
                    // c: 0 0 #5555ff0a
                    > div > div, { md }, { sticker } { rad: left_end }
                }

                /// Feat -> Incoming message bubble position.
                if (bubble_in) { align-items: flex-end i }
            }

            /// Outgoing messages.
            &-out {
                { context } { border-top-right-radius: _o i }
                /// First message -> In/Out/System messages.
                &, ../-in, /{ system } {
                    &:not({ bubble }) + .message-out{ bubble } {
                        // c: 0 0 #ff55551a
                        > div > div, { md } { rad: right_top }
                    }
                }
                /// Messages in between.
                &{ bubble } + { bubble } {
                    // c: 0 0 #55ff551a
                    { md } { rad: right_med }
                    > div > div { rad: right_mid }
                    { context } { border-top-right-radius: _i i }
                }
                /// Last message.
                &{ bubble } + .message-out:not({ bubble }) {
                    // c: 0 0 #5555ff1a
                    > div > div, { md } { rad: right_end }
                    { context } { border-top-right-radius: _i i }
                }

                /// Feat -> Outgoing message bubble position.
                if (bubble_out) { align-items: flex-start i }
            }
        } else if (tail_style == 'rounded' || tail_style == 'minimal') {
            &-in, &-out {
                [data-icon *= 'tail'] {
                    display: none i
                    if (tail_style == 'rounded') {
                        /// 1:    First message
                        /// 2, 3: Sticker senders
                        + div { &, /._3ToB1, /._1nrJA { rad: 7.5px i }}
                    }
                }
            }
        }

        /// Feat -> Fixes for RTL message header. @upstream
        if (rtl_header) {
            &-in, &-out {
                .selectable-text.invisible-space[dir = 'rtl'],
                /// Some links have TWO empty headers.
                a.selectable-text[href],
                /// Embedded links are special snowflakes, too.
                ._1VzZY[dir = 'ltr'] > [dir = 'ltr'] {
                    &::before, &::after { content: unset i }
                }
            }
        }

        /// Feat -> Fixes for RTL message content. @upstream
        if (rtl_format) {
            &-in, &-out {
                [data-pre-plain-text] > [dir = 'rtl'] {
                    if (!rtl_header) { padding-top: 0.8rem i }
                }
                .selectable-text.invisible-space[dir = 'rtl'] {
                    > span[class] { display: unset i }
                    @supports (-moz-user-select: none) {
                        &::before { content: unset i }
                    }
                }
                /// Apparently messages with images/videos are treated like
                /// special snowflakes, so this resets their timestamps.
                [style *= 'width'], .video-thumb {
                    + div > ._1VzZY[dir = 'rtl'] { padding-bottom: 0.8rem i }
                }
                /// Remove whitespace for links.
                .message-text-link::after { content: unset i }
            }
        }

        /// Feat -> Collapse messages for `fb-like` tail style.
        if (fb_compact && tail_style == 'fb-like') {
            rtl = '._1wlJG[dir = "rtl"]'
            ltr = '._3ysB9'

            &-in, &-out {
                /// LTR whitespace.
                { ltr } {
                    display: block i
                    padding-top: 0.8rem
                }

                /// RTL whitespace.
                { rtl }, { big } {
                    position: relative
                    padding-bottom: 0.8rem i
                    > ._3ysB9 { padding-top: 0 i }
                }

                /// Hide timestamps.
                &{ bubble } {
                    // c: 0 0 #ff555508
                    { rtl }, { ltr }, { big } { transition: padding 0.2s ease i }
                    { ts } { transition: opacity 0.2s ease i }

                    /// Collapse messages.
                    > div:not(:hover) {
                        { ts } { opacity: 0 i }
                        { rtl }, { big } { padding-bottom: 0rem i }
                        { ltr } { padding-top: 0rem i }
                    }

                    /// Expand 'hover' area.
                    ../ > div::before {
                        content: '' i
                        position: absolute i
                        top: 0; right: -20px; bottom: 0; left: -20px;
                        // ../../../-in > div::before { c: 0 0 #55ff5520 }
                        // ../../../-out > div::before { c: 0 0 #5555ff20 }
                    }
                }

                /// Remove whitespace for default big emojis.
                if (emoji_b == 'default') {
                    { big } {
                        margin: 0 i
                        padding-top: 2px i
                        z-index: 0 i

                        /// Reset emojis.
                        span { margin: 0 i }
                    }
                }
            }
        }

        &-in, &-out {
            /// Feat -> Reduce size of big emojis.
            if (emoji_b == 'medium') {
                size = 36px
            } else if (emoji_b == 'normal') {
                size = 28px
            } else if (emoji_b == 'small') {
                size = 20px
            }

            /// Apply to all emoji options except the default one.
            if (emoji_b != 'default') {
                { big } {
                    margin: 0 i
                    padding-top: 2px i
                    z-index: 0 i

                    /// Add whitespace to avoid timestamp collision.
                    if (tail_style = 'fb-like') {
                        padding-bottom: 0.8rem i
                    }

                    /// Reset emojis.
                    span {
                        margin: 0 i
                        /// All emojis / Heart emoji.
                        > img, ../ div > img {
                            width: size i
                            height: size i
                        }
                    }
                }
            } else {
                { big } { padding-bottom: 0 }
            }

            /// Increase minimum width for message bubbles.
            > div:nth-child(2) { min-width: 56px }
        }

        /// Feat -> Swap message bubble positions.
        if (bubble_in) { &-in { align-items: flex-end i }}
        if (bubble_out) { &-out { align-items: flex-start i }}

        /// Feat -> Animate emojis.
        if (emoji_a) {
            emoji_k = (emoji_k == '') ? () : emoji_k
            emoji_p = (emoji_p == '') ? () : emoji_p

            /// Generate Kiss/Pulse emoji styles.
            /[class*='message-'] img[src$='-64.png'] {
                for emoji in emoji_k {
                    &[alt={ '%s' % emoji }] {
                        +cache('aKiss') { animation: aKiss 1.5s infinite }
                    }
                }
                for emoji in emoji_p {
                    &[alt={ '%s' % emoji }] {
                        +cache('aPulse') { animation: aPulse 1.5s infinite }
                    }
                }
            }
        }
    }

    // Right -> Maps.
    .gm-style {
        img {
            /// 1: Logo; 2: Full map; 3: Map tiles.
            &[src *= 'images/google']
            &[src *= 'maps.googleapis.com'],
            &[style *= 'width: 256px'][style *= 'height: 256px'] {
                filter: invert(0.8) hue-rotate(180deg) contrast(120%) i
            }

            /// Reset avatars.
            &[src *= 'com/pp?'],
            ../ [style *= 'height: 40px; width: 40px'] {
                rad: 50% i
            }
        }

        /// Map controls.
        [controlwidth = '40'] * {
            filter: invert(0.9) i
            [style *= 'd-color: rgb(255\, 255\, 255)'] { c: 0 0 bg0 }
        }

        /// Map copyright/ToS.
        [style *= 'd-color: rgb(245\, 245\, 245)'] { c: 0 0 bg4 }
        [style *= ' color: rgb(68\, 68\, 68)'] { c: fg3 }

        /// Popout arrow.
        .BPkae { border-top-color: var(--modal-background) i }

        /// Location pin.
        ._3Q8RX { c: 0 0 ac1 }

        /// Footer border.
        /._3nNEI { box-shadow: 0 -1px bg3 i }
    }
}
Dark-WhatsApp by vednoc

Details

Description

Notes

Source code
