Dark-Telegram by roybarina

/* ==UserStyle==
@name           Dark-Telegram
@namespace      github.com/Barina/Dark-Telegram
@homepageURL    https://github.com/Barina/Dark-Telegram
@supportURL     https://github.com/Barina/Dark-Telegram/issues
@version        1.14.48
@description    Customizable theme for telegram web.
@author         Roy Barina
@license        MIT
@preprocessor   stylus

@var select browser                 'Browser'{
    'Chromium (Chrome, Edge etc) *': 'chromium',
    'FireFox                      ': 'firefox',
    'Other                        ': 'other',
}

@var text windowwidth               'Window width' 75%
@var range contactlistwidth         'Contact list width' [31, 5, 80, 1, "%"]

@var color textc2                   'Headers text color' #fff
@var color textc1                   'Primary text color' #ccccca
@var color textc3                   'Secondary text color' #6e6e6e

@var checkbox customFont            'Use custom font' 0
@var text ui_font                   'Font family' 'sans-serif'

@var range msgb                     'Messages bubble corner size' [10, 1, 100, 1, "px"]
@var color msg-in-bg                'Incoming message background color'  #3c434f
@var color msg-out-bg               'Outgoing message background color' #333a47

@var select inpos                   'Incoming bubble position'{
    'Left                       *': 'left',
    'Right                       ': 'right',
    'Stretch                     ': 'stretch'
}
@var select outpos                  'Outgoing bubble position'{
    'Left                        ': 'left',
    'Right                       *': 'right',
    'Stretch                     ': 'stretch'
}
@var select tail                    'Messages tail' {
    'None                         ': 'notail',
    'Round Corner                *': 'roundtail',
    'Triangle                     ': 'tritail',
    'Sharp Corner                 ': 'recttail',
}

@var text msgwmax-in                'Incoming message maximum width' 750px
@var text msgwmax-out               'Outgoing message maximum width' 550px

@var text prevw                     'Media preview width' 350px
@var text prevh                     'Media preview height' 220px
@var checkbox prevs                 'Keep media previews squared (height will use width value so it will not work when using percentage)' 0

@var checkbox centerauthor          'Center author name within chat bubbles' 0

@var select texta                   'Messages text align' {
    'Auto                         ': 'textaauto',
    'Unset                        ': 'unset',
    'Start                       *': 'Start',
    'End                          ': 'end',
    'Center                       ': 'center',
    'Left                         ': 'left',
    'Right                        ': 'right',
}

@var checkbox hideothericon         'Hide other contact user photo from chat window' 1
@var checkbox hideownicon           'Hide own user photo from chat window' 1

@var checkbox hideownname           'Hide own name from private chat bubbles' 1
@var checkbox hideothername         'Hide other name from private chat bubbles' 1
@var checkbox hideownnamegr         'Hide own name from group chat bubbles' 1
@var checkbox hideothernamegr       'Hide other name from group chat bubbles' 0
@var checkbox shownamehover         'Show name when hover on chat bubbles' 0
@var checkbox showothernamehover    'Show other names when hover on chat bubbles' 1

@var checkbox autohidedata          'Auto hide extra message data' 1

@var color bgcolor                  'Background color' #1f232a

@var color border                   'Border color' #333943
@var range border-size              'Border size' [3, 0, 50, 1, "px"]

@var color control                  'Base control color' #252A33
@var color control-hover            'Control hover color' #292f38
@var color control-active           'Control active color' #343b46

@var color inputbg                  'Input background color' #1c2026

@var color shadow                   'Shadow color' #00000040

@var color btn-bg                   'Buttons color' #2b313b
@var color btn-bg-h                 'Hover buttons color' #363d4a

@var color accent                   'Accent color' #7289da

@var range round                    'User photo round' [25, 0, 50, 1, "%"]

@var checkbox enableCompact         'Enable compact mode' 1
@var text compactBreak              'Compact mode breakpoint' 1080px
@var text compactDelayOn            'Compact mode hover-on delay' 0.25s
@var text compactDelayOff           'Compact mode hover-off delay' 1s
@var range comTranDurOn             'Compact mode transition on duration' [0.7, 0, 5, .1, "s"]
@var range comTranDurOff            'Compact mode transition off duration' [1.2, 0, 5, .1, "s"]

@var checkbox useChatSize           'Use custom chat width' 0
@var number chatSize                'Chat width in px' [780, 0]
@var color bgccolor                 'Chat background color' #1f232a
@var checkbox showchatbg            'Enable chat background image' 1
@var text chatbg                    'Custom image for chat' url('https://web.whatsapp.com/img/bg-chat-tile_9e8a2898faedb7db9bf5638405cf81ae.png')
@var range chatbg-o                 'Chat background image opacity' [0.15, 0.0, 1, 0.01]
@var range chatbg-i                 'Chat background image inverted colors' [0.6, 0.0, 1, 0.1]

@var select app_image               'Custom app background' {
    'Default background          *': 'default',
    'None                         ': 'none',
}
@var text bgimage                   'Custom background image' url('https://images.unsplash.com/photo-1434569117012-ce134ee1a088?fit=crop&w=1280&h=720&q=80')
@var range bgopacity                'Background image opacity' [0.4, 0.0, 1, 0.01]
@var range bgblur                   'Background image blur size' [12, 0, 50, 1, 'px']
@var range bghue                    'Background image hue' [320, 0, 360, 1, 'deg']
@var range bginvert                 'Background image invert colors' [0, 0.0, 1, 0.1]

@var checkbox noise                 'Enable noise' 0
@var text noiseimg                  'Noise image' url('https://raw.githubusercontent.com/Barina/Dark-Telegram/master/Resources/noise.png')

@var checkbox vign                  'Vignette effect on media previews' 1

@var range emoj-scale               'Emoji panel scale' [1, .5, 3, .01]
@var range emojo                    'Emoji and sticker icons opacity' [.6, 0, 1, .01]
@var select emoj-pos                'Emoji and sticker popup position' {
    'Center                      *': 'center',
    'Right                        ': 'right',
    'Left                         ': 'left',
}
@var checkbox private               'Enable private mode' 0
@var checkbox shift-anim            'Enable contacts shift animation on mouse hover' 1

@var checkbox hideinitials          'Hide contact initials' 1
@var checkbox useicons              'Enable custom contact icons' 1

@var text contacticon               'Contact icon url' url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxz%0D%0AdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxu%0D%0AczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6%0D%0ALy93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0%0D%0AcDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQv%0D%0ARFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2Fw%0D%0AZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmlld0JveD0iMCAwIDIxMiAyMTIiCiAgIHdp%0D%0AZHRoPSIyMTIiCiAgIGhlaWdodD0iMjEyIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmczNzI5%0D%0AIgogICBzb2RpcG9kaTpkb2NuYW1lPSJjb250YWN0LWljb24uc3ZnIgogICBpbmtzY2FwZTp2ZXJz%0D%0AaW9uPSIwLjkyLjQgKDVkYTY4OWMzMTMsIDIwMTktMDEtMTQpIj4KICA8bWV0YWRhdGEKICAgICBp%0D%0AZD0ibWV0YWRhdGEzNzM1Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICBy%0D%0AZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+%0D%0ACiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9y%0D%0AZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpS%0D%0AREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzczMyIgLz4KICA8c29kaXBv%0D%0AZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIj%0D%0ANjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIK%0D%0AICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5r%0D%0Ac2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBp%0D%0AbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjI1NjAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0i%0D%0AMTM2MSIKICAgICBpZD0ibmFtZWR2aWV3MzczMSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAg%0D%0AaW5rc2NhcGU6c25hcC1nbG9iYWw9InRydWUiCiAgICAgaW5rc2NhcGU6c25hcC1iYm94PSJ0cnVl%0D%0AIgogICAgIGlua3NjYXBlOmJib3gtcGF0aHM9InRydWUiCiAgICAgaW5rc2NhcGU6YmJveC1ub2Rl%0D%0Acz0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFwLWJib3gtZWRnZS1taWRwb2ludHM9InRydWUiCiAg%0D%0AICAgaW5rc2NhcGU6c25hcC1iYm94LW1pZHBvaW50cz0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFw%0D%0ALWludGVyc2VjdGlvbi1wYXRocz0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFwLXNtb290aC1ub2Rl%0D%0Acz0idHJ1ZSIKICAgICBpbmtzY2FwZTp6b29tPSI0IgogICAgIGlua3NjYXBlOmN4PSIxMTAuMTgx%0D%0AMzYiCiAgICAgaW5rc2NhcGU6Y3k9Ijk5LjU3MDIyOSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0i%0D%0ALTkiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9Ii05IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhp%0D%0AbWl6ZWQ9IjEiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMzcyOSIgLz4KICA8cmVj%0D%0AdAogICAgIGZpbGw9IiMxZjIzMmEiCiAgICAgd2lkdGg9IjIxMiIKICAgICBoZWlnaHQ9IjIxMiIK%0D%0AICAgICBpZD0icmVjdDM3MjUiIC8+CiAgPHBhdGgKICAgICBjbGFzcz0icHJpbWFyeSIKICAgICBk%0D%0APSJtIDE3My41NjEsMTcxLjYxNSBjIC0wLjY1OTksLTEuMDA0NTcgLTEuMzQ4NTIsLTEuOTg5OTcg%0D%0ALTIuMDY1LC0yLjk1NSAtMC44MzQ5NiwtMS4xMjY0MSAtMS43MDQ3MSwt...