Dark-WhatsApp by vednoc
Imported and mirrored from https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/wa.user.styl
Details
Authorvednoc
LicenseMIT
Created
Updated
Categoryweb.whatsapp.com
Description
Dark and light, very customizable theme for WhatsApp.
Notes
Userstyle doesn't have notes.History
Daily snapshots of style statistics.
No style history. Come back in a couple of days.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://userstyles.world/api/style/4.user.css
@author vednoc <vednoc@pm.me> (https://github.com/vednoc)
@version 3.7.0
@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 = "Still looking for someone to help maintain DWA. Also, I have been "
$top += "working on a new website to browse and share userstyles. "
$top += "Consider giving it a try:\A\A"
$top += "🌟 https://userstyles.world 🌟"
$top += "\A\AMore info, as always, is in the project 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.7.0 — July 9th, 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;
--chevron-button-background: var(--bg-3) //#f1f1f259;
--chevron-button-background-rgb: var(--bg-3-rgb) //241,241,242;
--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: var(--ac-0) //#00b7a1;
--teal-hover-rgb: var(--ac-0-rgb) //0,183,161;
--teal-pale: var(--ac-3) //#5fc8bc;
--teal-pale-rgb: var(--ac-3-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-text: var(--fg-1) //hsl(0, 0%, 0%);
--tooltip-text-rgb: var(--fg-1-rgb) //0,0,0;
--tooltip-background: to_rgba('bg-4', 0.85) //#fff;
--tooltip-background-rgb: var(--bg-4) //255,255,255;
--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.
._1Ftww {
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
/.Iwkc0 {
position: relative
/// Override selected wallpaper.
--blue-light: ac3
--inverse: ac3
/// Expand default chat wallpaper.
&:first-child {
&, &::after { width: calc(100% + 8px) }
/// Add chat image.
&::before {
content: ''
filter: invert(var(--chat-bg-i)) opacity(var(--chat-bg-o))
background: var(--chat-image) i
position: absolute
height: 100%
width: 100%
}
/// Add pseudo text.
span {
font-size: 0 i
&::before {
content: 'Use this with Dark-WhatsApp'
font-size: 16px i
}
}
}
}
/// 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
.graphic::after {
opacity: 0.6 i
background: linear-gradient(to right, bg0 0%, bg0 33%, t 44%, t 55%, bg0 66%, bg0 100%) i
}
}
/// 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.
._3GlyB[style] {
/// Global/shared contacts.
&, /._3PdFH { c: 0 0 bg5 }
/// Avatars/images/new group/contact avatar/your avatar.
&, > img, /._3GlyB, /._8hzr9, /._1TGpC, /.gDU26 {
rad: var(--r-avatars) i
}
/// 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 {
/// Fix header in media viewer modal. @upstream
/[data-animate-media-viewer] > div:first-child{
border-bottom: 1px solid bg5 i
c: 0 0 bg2
}
/// Remove header in avatar viewer modal.
[data-testid='cell-frame-container'] { 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 footer.
/._1XWMx { 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.
&._2B4d4._1hMip.tm2tP {
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.
&._2UwZ_.n4LVt {
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
a[href*='faq.whatsapp.com'] + div > span > div {
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 > ._36BuW::before { content: none }
}
/// Feat -> Input border radius.
.p3_M1 { rad: var(--r-inputs) i }
/// Dropdowns -> Chat/Header.
> span > div, .o--vV {
&[style ^= 'transform-origin:'][tabindex] {
box-shadow: var(--bshadow) i
border: 1px solid bg4
rad: var(--r-menus) i
}
}
/// Floating emoji picker.
> span > ._3IU7z {
border: 1px solid bg5 i
box-shadow: var(--bshadow) i
/// Remove borders.
div[tabindex='-1'] > div:only-child { 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.
/._3yWey {
c: 0 0 bg2
border-bottom: 1px solid bg5 i
label {
rad: var(--r-inputs) i
box-shadow: inset 0 0 0 1px bg4
}
&::after { display: none i }
&:focus-within { 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._2C_7j { 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.
section > div { box-shadow: 0 0 0 1px bg4 i }
/// Remove native dark mode dividers.
/.dark .three #main {
> *, .copyable-area > div[tabindex='0'] { 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.
.EtBAv {
$c = (ow_sys_msg) ? darken(sys_msg_bg, -10%) : b63
border: 1px solid $c
text-shadow: none i
/// End-to-end encryption message.
&._1p8Qv { border: 1px solid b34 }
}
/// 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.
._5ML0C { border: none i }
/// Tweak box-shadow for message bubbles.
[class *= 'message-'][data-id] {
/// Exclude stickers.
> span + div:not(._1S-gg) > div {
box-shadow: 0 1px 0 to_rgba('shadow', 0.2) i
}
}
/// Fix context menu background for stickers.
[data-js-context-icon] + div[style] { c: 0 0 bg4 }
/// Add background to media message timestamps.
/[style *= 'width'][style *= 'height'] + div {
/// Images/gifs.
&._2AKAp, &.zE8pI {
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.
._3ImlL {
border-top: none
border-bottom: 1px solid bg5
}
/// Groups -> Only admins can send messages.
._31enr {
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 > .OVz7E {
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 ._3C4Vf ._3vPI2 ._1i_wG { 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% - 110px) i
margin-left: calc(-30% + 150px)
}
/// Reset chat when info is open.
> div:nth-child(4) {
flex: 0 0 calc(100% - 30% - 110px) i
}
/// Do not expand left drawer when right drawer is open.
> div:nth-child(3):hover { flex: 0 0 80px i }
}
/// Contacts.
#side {
status = '._23LrM'
unread = '._2qo4q'
typing = 'span[title*="…"]'
/// 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 }
}
/// 'Typing...' status indicator.
{ typing } {
overflow: unset i
margin-top: -8px i
margin-left: 0px i
position: absolute i
&::before {
content: '' 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 }
}
}
/// Move icons to start.
n = 'nth-child(2)'
[data-testid='cell-frame-container'] > div:{ n } > div:{ n } {
position: relative
flex-direction: row-reverse
/// Remove margins.
[role='gridcell'] { margin: 0 i }
/// Status indicator.
{ status } {
left: 44px
z-index: 9999
position: fixed
margin-top: 4px
border: 2px solid bg2 i
}
/// Unread indicator.
{ unread } {
left: 44px
z-index: 9999
position: fixed
margin-top: 4px
padding: 3px i
border: 2px solid bg2 i
c: 0 0 bg4
rad: 50%
/// Make the icon smaller.
svg {
width: 14px
height: 14px
}
}
/// Remove elements.
._2XH9R, // icon wrapper
.status-vcard, // more icons
button[aria-hidden] // context menu
[data-icon]:not([data-icon*='status-']):not([data-icon*='disappearing']) {
display: none
}
}
/// Hover/Active states.
&:not(#z) [aria-selected='false'] > div:hover {
{ unread }, { status } { c: 0 bg3 }
{ unread } { c: 0 0 bg5 }
}
&:not(#z) [aria-selected='true'] > div {
{ unread }, { status } { c: 0 bg4 bg1 }
}
}
}
}
// 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 }
}
}