Place darkmode_whatsapp.css inside %APPDATA%/Franz/recipes/whatsapp/ and rename the file name to darkmode.css
When done go to Franz Settings > Your services > WhatsApp
Under General switch on the Enable Dark Mode
Place messenger_whatsapp.css inside %APPDATA%/Franz/recipes/messenger/ and rename the file name to darkmode.css
When done go to Franz Settings > Your services > Messenger
Under General switch on the Enable Dark Mode
| /** Transitions **/ | |
| ._4sp8, | |
| ._4eby, | |
| ._59s7, | |
| ._3s-4, | |
| ._2y8_, | |
| ._1sk6, | |
| ._4gd0, | |
| ._5pw9, | |
| ._58ahm, | |
| ._4x7m, | |
| ._80cm, | |
| ._80co, | |
| ._8i1, | |
| ._3egs, | |
| ._5r8a._5r8b { | |
| transition: background 0.5s !important; | |
| } | |
| body { | |
| -webkit-transition: background 0.5s, color 0.5s !important; | |
| } | |
| ._2y8_, | |
| ._5i_d, | |
| ._3wb1, | |
| ._3way { | |
| transition: border 0.5s !important; | |
| } | |
| ._53ij { | |
| transition: background 0.5s, border 0.5s !important; | |
| } | |
| ._673w, | |
| ._36ic, | |
| ._374b, | |
| ._2y8y, | |
| ._llj, | |
| ._2c9i ._4ebz, | |
| ._4dx4, | |
| ._koh { | |
| transition: border-bottom 0.5s !important; | |
| } | |
| ._1t2u, | |
| ._4_j5 { | |
| transition: border-left 0.5s !important; | |
| } | |
| ._4rv3, | |
| ._1li-, | |
| ._3war, | |
| ._3wax { | |
| transition: border-top 0.5s !important; | |
| } | |
| ._3m31:nth-of-type(3n+1) { | |
| transition: border-right 0.5s !important; | |
| } | |
| ._3m31:nth-of-type(3n+2) { | |
| transition: border-left 0.5s, border-right 0.5s !important; | |
| } | |
| ._3m31:nth-of-type(3n+3) { | |
| transition: border-left 0.5s !important; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| textarea, | |
| keygen, | |
| select, | |
| ._2v6o, | |
| ._5eu7, | |
| ._3eus, | |
| ._5uh, | |
| ._3x6v, | |
| ._5rh4, | |
| ._5qsj, | |
| ._497p, | |
| ._5i_d .__6m, | |
| ._1r3o, | |
| ._374c, | |
| ._3q35, | |
| ._2y8z, | |
| ._2mjl, | |
| ._1n-e, | |
| ._4dx5, | |
| ._38wl, | |
| ._4x7m, | |
| ._4x79, | |
| ._4x7b, | |
| body, | |
| ._3szq, | |
| ._4rph ._4rpj, | |
| ._364g, | |
| ._2jnv, | |
| ._2jnx, | |
| ._2jnz, | |
| ._2jnx ._30e7 ._5j5f, | |
| ._5i_d .__6k, | |
| ._5i_d .__6l, | |
| ._3wa-, | |
| ._3wb0, | |
| ._2c9i ._19jt, | |
| ._4ng2, | |
| ._3q34, | |
| ._36zg, | |
| ._hh7 a:not(_ih-), | |
| ._3eur._6ybk a, | |
| label, | |
| ._618l, | |
| ._618n, | |
| ._6cs7, | |
| ._koh li:not(.selected), | |
| ._517h, | |
| ._1suj, | |
| ._1suk, | |
| .uiInputLabel .__rm+.uiInputLabelLabel, | |
| ._7492, | |
| ._5iwm ._58al::placeholder, | |
| ._5pwa, | |
| ._5pw6, | |
| ._58al, | |
| ._74ku, | |
| ._7q1q, | |
| ._7ht_, | |
| ._6ct8._6y58, | |
| ._6zkf, | |
| .__6k, | |
| .__6l, | |
| .__6m, | |
| ._3b4u, | |
| ._1mr_, | |
| ._1mq-, | |
| ._2f5n ._29ey, | |
| ._67tw, | |
| ._4lh7, | |
| ._3z53, | |
| ._50f9, | |
| ._1jx6, | |
| ._1jw-, | |
| ._50cx:not(._50cy), | |
| ._51l0 ._1-sv, | |
| ._217a ._t5c ._5jdu, | |
| ._217a ._t5c ._5jdu._42fr { | |
| transition: color 0.5s !important; | |
| } | |
| ._1ht1:active ._6zkf { | |
| transition: color 0.0s !important; | |
| } | |
| ._225b, | |
| ._jf4 ._jf3, | |
| ._o46:not(._nd_) ._454y ._1mj0 { | |
| transition: background-color 0.5s, color 0.5s !important; | |
| } | |
| hr { | |
| transition: background 0.5s, color 0.5s !important; | |
| } | |
| ._33p7 { | |
| transition: background-color 0.5s, border-bottom 0.5s !important; | |
| } | |
| ._2615, | |
| ._1ht1._1ht2, | |
| ._1hbw ._5pd7, | |
| ._4-hy ._3ixn, | |
| ._7jxv, | |
| ._5iwm ._58al, | |
| ._6ymu, | |
| ._6-xp, | |
| ._6ybv, | |
| ._6y56, | |
| ._6ybz:not(._7ipg), | |
| ._7hu0, | |
| ._7hty, | |
| ._7-_v, | |
| ._1ht1._1ht2 ._6zkc, | |
| ._7hu1, | |
| ._5irm._7mkm, | |
| ._7kpk, | |
| ._3b4h, | |
| ._3rh0, | |
| ._3z54, | |
| ._49no { | |
| transition: background-color 0.5s !important; | |
| } | |
| ._5pw9, | |
| ._58ah, | |
| ._7q0v, | |
| ._7q1i, | |
| ._7q1l, | |
| ._7q1m, | |
| ._7q1n, | |
| ._71bm._71bn, | |
| ._71bo._71bm:hover, | |
| ._3b4t, | |
| ._2m5p { | |
| transition: border-color 0.5s !important; | |
| } | |
| ._1ht1:active ._7q1i, | |
| ._1ht1:active ._7q0v { | |
| transition: border-color 0.0s !important; | |
| } | |
| ._7q1p, | |
| ._2f5n, | |
| .__6j._43kk, | |
| ._ric, | |
| ._4mnq { | |
| transition: background-color 0.5s, border-color 0.5s !important; | |
| } | |
| ._3nta { | |
| transition: background 0.5s, border-bottom 0.5s !important; | |
| } | |
| ._3nta:hover { | |
| transition: background-color 0.0s !important; | |
| } | |
| ._4rv6, | |
| a._4ce_ { | |
| transition: filter 0.5s, opacity 0.5s !important; | |
| } | |
| mask+rect, | |
| path#Fill-1, | |
| path#Fill-2, | |
| path#Fill-8, | |
| path#Fill-19, | |
| path#Fill-23, | |
| path#Fill-24, | |
| ._80cm ._7oal path { | |
| transition: fill 0.5s !important; | |
| } | |
| ._7i2l path#Fill-1 { | |
| transition: fill 0.0s !important; | |
| } | |
| ._7i2n path#Fill-19 { | |
| transition: fill 0.0s !important; | |
| } | |
| ._7301._hh7, | |
| ._7301._hh7._hh7._6ybn { | |
| transition: background-color 0.5s, border-color 0.5s, color 0.5s !important; | |
| } | |
| ._18p0, | |
| ._1jx4 { | |
| transition: border-top-color 0.5s !important; | |
| } | |
| ._41ud ._o46:not(._nd_) ._hh7:not(._2f5r):not(._7301), | |
| ._29_7 ._3czg ._2e-7 ._2e-1, | |
| ._29_7 ._3czg ._2e-7 ._2e-2, | |
| input:not(._5eay):not(._1frb):not(._58al) { | |
| transition: background-color 0.5s, color 0.5s !important; | |
| } | |
| ._aou, | |
| ._4kf5, | |
| ._4kf6:not(._fy2) { | |
| transition: background 0.5s, color 0.5s !important; | |
| } | |
| ._4k7a { | |
| transition: color 0.5s !important; | |
| } | |
| ._4dfu { | |
| transition: background-image 0.5s !important; | |
| } | |
| ._44ju ._44jz { | |
| transition: color 0.5s !important; | |
| } | |
| ._44ju { | |
| transition: text-decoration-color 0.5s !important; | |
| } | |
| ._kmc ._1p1t { | |
| transition: color 0.5s !important; | |
| } | |
| ._7mki { | |
| transition: background-color 0.5s, transform .22s cubic-bezier(.5, 0, .4, 1) !important; | |
| } | |
| ._7t1o { | |
| transition: background-color 0.5s, transform .25s !important; | |
| } | |
| ._kmc._7kpg ._1p1t { | |
| transition: color 0.5s !important; | |
| } | |
| ._71bm { | |
| transition: none !important; | |
| } | |
| ._4_j4 .chatAttachmentShelf { | |
| transition: background-color 0.5s, border-top-color 0.5s !important; | |
| } | |
| ._56jc, | |
| ._4coo, | |
| ._o46:not(._nd_) ._454y ._1mj1, | |
| ._1pka ._49no, | |
| ._1pka ._2abm, | |
| ._1pka ._5exl { | |
| transition: border-bottom-color 0.5s !important; | |
| } | |
| /* --------------------------------------------------------------------------- */ | |
| body, | |
| body ._4sp8, | |
| body ._4eby, | |
| body ._59s7, | |
| body ._3s-4, | |
| body ._2y8_, | |
| body ._53ij, | |
| body ._1sk6, | |
| body ._4gd0, | |
| body ._5pw9, | |
| body ._58ahm, | |
| body ._80cm, | |
| body ._3egs { | |
| background: #111e27 !important; | |
| } | |
| /*body ._4sp8 { | |
| background-image: url("image.jpg") !important; | |
| background-size: cover !important; | |
| }*/ | |
| body ._2y8_, | |
| body ._53ij { | |
| border: 1px solid rgba(255, 255, 255, .60) !important; | |
| } | |
| /* Borders */ | |
| body ._673w, | |
| body ._36ic, | |
| body ._374b, | |
| body ._2y8y { | |
| border-bottom: 1px solid rgba(255, 255, 255, .10) !important; | |
| } | |
| body ._llj { | |
| border-bottom: 1px solid rgba(255, 255, 255, .05) !important; | |
| } | |
| body ._1t2u { | |
| border-left: 1px solid rgba(255, 255, 255, .20) !important; | |
| } | |
| body ._4_j5 { | |
| border-left: 1px solid rgba(255, 255, 255, .10) !important; | |
| } | |
| body ._4rv3, | |
| body ._1li-, | |
| body ._3war, | |
| body ._3wax { | |
| border-top: 1px solid rgba(255, 255, 255, .10) !important; | |
| } | |
| /* Text */ | |
| body h1, | |
| body h2, | |
| body h3, | |
| body h4, | |
| body h5, | |
| body h6, | |
| body ._5pwa, | |
| body ._5pw6, | |
| body .__6k, | |
| body .__6l, | |
| body ._50f9, | |
| body ._8slc, | |
| body ._3cn0, | |
| body ._3cnl, | |
| body ._3cnn a, | |
| ._3cnj { | |
| color: #e2ded6 !important; | |
| } | |
| body textarea, | |
| body keygen, | |
| body select { | |
| color: #bfc3c8 !important; | |
| } | |
| body ._2v6o, | |
| body ._5eu7, | |
| body ._3eus, | |
| body ._5uh, | |
| body ._3x6v, | |
| body ._5rh4, | |
| body ._5qsj, | |
| body ._497p, | |
| body ._5i_d .__6m, | |
| body ._1r3o, | |
| body ._374c, | |
| body ._3q35, | |
| body ._2y8z, | |
| body ._2mjl, | |
| body ._1n-e, | |
| body ._4dx5, | |
| body ._38wl, | |
| body ._4x7m, | |
| body ._4x79, | |
| body ._4x7b, | |
| body ._7ht_, | |
| body ._6zkf, | |
| body ._1mr_, | |
| body ._1mq-, | |
| body ._1jw-, | |
| body ._51l0 ._1-sv { | |
| color: rgba(255, 255, 255, .40) !important; | |
| } | |
| body, | |
| body ._3szq, | |
| body ._4rph ._4rpj, | |
| body ._364g, | |
| body ._2jnv, | |
| body ._2jnx, | |
| body ._2jnz, | |
| body ._2jnx ._30e7 ._5j5f, | |
| body ._5i_d .__6k, | |
| body ._5i_d .__6l, | |
| body ._3wa-, | |
| body ._3wb0, | |
| body ._2c9i ._19jt, | |
| body ._4ng2, | |
| body ._3q34, | |
| body ._36zg, | |
| body ._hh7 a:not(._ih-), | |
| body ._3eur._6ybk a, | |
| body ._7q1q, | |
| body ._6ct8._6y58, | |
| body ._1jx6, | |
| body ._217a ._t5c ._5jdu, | |
| body ._217a ._t5c ._5jdu._42fr { | |
| color: white !important; | |
| } | |
| body input:not(._5eay):not(._1frb):not(._58al) { | |
| background-color: #111e27 !important; | |
| color: #e3e1de !important; | |
| } | |
| /* --------------------------------------------------------------------------- */ | |
| /* Transition from unread to read */ | |
| /* ._1ht6 = name, ._1ht7 = time, ._1htf = message, ._1ht3 = unread */ | |
| ._1ht6, | |
| ._1ht7, | |
| ._1htf { | |
| transition: color 0.5s, font-weight 0.5s !important; | |
| } | |
| ._1ht1:active ._1ht6, | |
| ._1ht1:active ._1ht7, | |
| ._1ht1:active ._1htf { | |
| transition: color 0.0s !important; | |
| } | |
| body ._1ht6, | |
| body ._1ht1:active ._1ht6 { | |
| color: white !important; | |
| } | |
| body ._1ht7, | |
| body ._1ht1:active ._1ht7 { | |
| color: rgba(255, 255, 255, .40) !important; | |
| } | |
| body ._1ht3 ._1ht7, | |
| body ._1ht3:active ._1ht7 { | |
| color: #0084ff !important; | |
| } | |
| body ._1htf, | |
| body ._1ht1:active ._1htf { | |
| color: rgba(102, 102, 102, 1) !important; | |
| } | |
| body ._1ht3 ._1htf, | |
| body ._1ht3:active ._1htf { | |
| color: white !important; | |
| } | |
| /* --------------------------------------------------------------------------- */ | |
| body ._225b { | |
| background-color: rgba(255, 255, 255, .03) !important; | |
| color: rgba(255, 255, 255, .40) !important; | |
| } | |
| body label { | |
| color: #999999 !important; | |
| } | |
| body ._5i_d { | |
| border: 1px solid rgba(255, 255, 255, .1) !important; | |
| } | |
| body ._618l, | |
| body ._3b4u { | |
| color: rgba(255, 255, 255, .75) !important; | |
| } | |
| body ._618n, | |
| body ._6cs7, | |
| body ._2f5n ._29ey { | |
| color: rgba(255, 255, 255, .60) !important; | |
| } | |
| body hr { | |
| background: #262626 !important; | |
| color: #262626 !important; | |
| } | |
| body ._2c9i ._4ebz, | |
| body ._4dx4 { | |
| border-bottom: 1px solid rgba(255, 255, 255, .10) !important; | |
| } | |
| body ._koh { | |
| border-bottom: 1px solid #171717 !important; | |
| } | |
| body ._koh li:not(.selected), | |
| body ._7492, | |
| body ._74ku, | |
| body ._4k7a, | |
| body ._67tw, | |
| body ._4lh7 { | |
| color: rgba(255, 255, 255, .5) !important; | |
| } | |
| body ._3m31:nth-of-type(3n+1) { | |
| border-right: 2px solid #111e27 !important; | |
| } | |
| body ._3m31:nth-of-type(3n+2) { | |
| border-left: 1px solid #111e27 !important; | |
| border-right: 1px solid #111e27 !important; | |
| } | |
| body ._3m31:nth-of-type(3n+3) { | |
| border-left: 2px solid #111e27 !important; | |
| } | |
| body ._33p7 { | |
| background-color: rgba(17, 30, 39, .95) !important; | |
| border-bottom: 1px solid rgba(255, 255, 255, .10) !important; | |
| } | |
| body ._2615 { | |
| background-color: rgba(255, 255, 255, .10) !important; | |
| } | |
| body ._517h { | |
| color: #b4b0a9 !important; | |
| } | |
| body ._jf4 ._jf3 { | |
| background-color: rgba(255, 255, 255, .10) !important; | |
| color: rgba(255, 255, 255, .40) !important; | |
| } | |
| body ._1ht1._1ht2, | |
| body ._1ht1._1ht2 ._6zkc { | |
| background-color: rgba(255, 255, 255, .07) !important; | |
| } | |
| body ._1ht1:hover { | |
| background-color: rgba(255, 255, 255, .07) !important; | |
| } | |
| body ._1ht1:active { | |
| background-color: rgba(255, 255, 255, .10) !important; | |
| } | |
| body ._1suj { | |
| color: rgb(0, 132, 255) !important; | |
| } | |
| body ._1suk { | |
| color: rgba(255, 255, 255, .20) !important; | |
| } | |
| body .uiInputLabel .__rm+.uiInputLabelLabel { | |
| color: rgba(255, 255, 255, .88) !important; | |
| } | |
| body ._4-hy ._3ixn { | |
| background-color: rgba(255, 255, 255, .4) !important; | |
| } | |
| body ._7jxv { | |
| background: rgba(17, 30, 39, .4) !important; | |
| } | |
| body ._5iwm ._58al, | |
| body ._3rh0 { | |
| background-color: #2e3941 !important; | |
| } | |
| body ._5iwm ._58al::placeholder { | |
| color: rgba(255, 255, 255, .4) !important; | |
| } | |
| body ._5pw9 { | |
| border-color: #22201d !important; | |
| } | |
| body ._58ah { | |
| border-color: rgb(34, 32, 29) !important; | |
| } | |
| body ._58al { | |
| color: rgb(226, 222, 214) !important; | |
| } | |
| body ._4x7m { | |
| background: rgba(255, 255, 255, .05) !important; | |
| } | |
| body ._3wb1, | |
| body ._3way { | |
| border: 1px solid #191919 !important; | |
| } | |
| body ._3nta { | |
| background: #111e27 !important; | |
| border-bottom: 1px solid rgba(255, 255, 255, .10) !important; | |
| } | |
| body ._3nta:hover { | |
| background-color: #2e3941 !important; | |
| } | |
| body ._1liy ._1lj0:hover, | |
| body ._5l37:hover, | |
| body ._5l37:active, | |
| body ._1k1p { | |
| background-color: rgba(255, 255, 255, .05) !important; | |
| } | |
| body ._2jnv:hover { | |
| border: 1px solid rgba(255, 255, 255, .10) !important; | |
| } | |
| body ._4rv6 { | |
| filter: invert(100%) !important; | |
| opacity: .6 !important; | |
| } | |
| body a._4ce_ { | |
| filter: invert(100%) !important; | |
| opacity: .7 !important; | |
| } | |
| body mask+rect { | |
| fill: #111e27 !important; | |
| } | |
| body ._6ymu, | |
| body ._6-xp, | |
| body ._6ybv, | |
| body ._6y56, | |
| body ._6ybz:not(._7ipg), | |
| body ._7hu0, | |
| body ._7hty, | |
| body ._7-_v, | |
| body ._7hu1, | |
| body ._5zvq._7i2o:hover, | |
| body ._3-wv._7i2n:hover, | |
| body ._2rvp._7i2l:hover, | |
| body ._7kpk { | |
| background-color: rgba(255, 255, 255, .12) !important; | |
| } | |
| body path#Fill-1, | |
| body path#Fill-2, | |
| body path#Fill-8, | |
| body path#Fill-19, | |
| body path#Fill-23, | |
| body path#Fill-24, | |
| body ._7i2o:hover path, | |
| body ._7i2n:hover path#Fill-19, | |
| body ._7i2l:hover path#Fill-1, | |
| body ._80cm ._7oal path { | |
| fill: white !important; | |
| } | |
| body a[aria-label="Create a poll"] path#Fill-1 { | |
| fill: inherit !important; | |
| } | |
| body a[aria-label="Create new room"] { | |
| background-color: #2e3941; | |
| } | |
| body a[aria-label="Create new room"] svg { | |
| fill: white !important; | |
| } | |
| body ._7i2o path, | |
| body ._7i2n path#Fill-19, | |
| body ._7i2l path#Fill-1 { | |
| fill: rgba(255, 255, 255, 0.34) !important; | |
| } | |
| body ._1hbw ._5pd7 { | |
| background-color: rgba(255, 255, 255, 0.6) !important; | |
| } | |
| body ._7301._hh7, | |
| body ._7301._hh7._hh7._6ybn { | |
| background-color: #111e27 !important; | |
| border-color: rgba(255, 255, 255, .1) !important; | |
| color: rgba(255, 255, 255, .4) !important; | |
| } | |
| body ._18p0, | |
| body ._1jx4 { | |
| border-top-color: rgba(255, 255, 255, .1) !important; | |
| } | |
| body ._7q0v, | |
| body ._7q1i, | |
| body ._7q1l, | |
| body ._7q1p._7q1l, | |
| body ._7q1m, | |
| body ._7q1n, | |
| body .__6j._43kk { | |
| border-color: #111e27 !important; | |
| } | |
| body ._41ud ._o46:not(._nd_) ._hh7:not(._2f5r):not(._7301) { | |
| background-color: rgb(50, 51, 52) !important; | |
| color: white !important; | |
| } | |
| body ._aou, | |
| body ._4kf5 { | |
| background: rgb(86, 87, 88) !important; | |
| } | |
| body ._4kf6:not(._fy2) { | |
| color: rgb(181, 181, 181) !important; | |
| } | |
| body ._7q1p { | |
| background-color: rgb(50, 51, 52) !important; | |
| } | |
| body ._80co { | |
| background: rgba(17, 30, 39, .5) !important; | |
| } | |
| body ._4dfu { | |
| background-image: linear-gradient(to right, #111e27, rgba(44, 44, 44, .45), #111e27) !important; | |
| } | |
| body ._44ju ._44jz { | |
| color: white !important; | |
| } | |
| body ._44ju { | |
| text-decoration-color: white !important; | |
| } | |
| body ._1ht1._6zk9._1ht2, | |
| body ._1ht1._6zk9:hover { | |
| background: transparent !important; | |
| } | |
| body ._2f5n { | |
| background-color: #111e27 !important; | |
| border-color: rgba(255, 255, 255, .1) !important; | |
| } | |
| body .__6m, | |
| body ._50f8, | |
| body ._50cx:not(._50cy) { | |
| color: #6f6b63 !important; | |
| } | |
| body ._5irm._7mkm, | |
| body ._7mki, | |
| body ._49no { | |
| background-color: #111e27 !important; | |
| } | |
| body ._kmc ._1p1t { | |
| color: #333 !important; | |
| -webkit-text-fill-color: initial !important; | |
| } | |
| body ._7t1o { | |
| background-color: #050505 !important; | |
| } | |
| body ._71bm._71bn, | |
| body ._71bo._71bm:hover, | |
| body ._3b4t, | |
| body ._2m5p { | |
| border-color: rgba(255, 255, 255, .1) !important; | |
| } | |
| body ._3b4h { | |
| background-color: #090909 !important; | |
| } | |
| body ._ric, | |
| body ._4mnq { | |
| background-color: #14120f !important; | |
| border-color: #111e27 !important; | |
| } | |
| body ._kmc._7kpg ._1p1t { | |
| color: rgba(255, 255, 255, .5) !important; | |
| -webkit-text-fill-color: initial !important; | |
| } | |
| body ._4_j4 .chatAttachmentShelf { | |
| background-color: #111e27 !important; | |
| border-top-color: #332f2a !important; | |
| } | |
| body ._8i1 { | |
| background: rgba(17, 30, 39, .95) !important; | |
| } | |
| body ._13iv ._5l37:active, | |
| body ._13iv ._1k1p, | |
| body ._13iv ._5l37:hover { | |
| background-color: #242424 !important; | |
| } | |
| body ._4lh2 { | |
| background-color: #111e27 !important; | |
| border-bottom-color: rgba(255, 255, 255, .20) !important; | |
| border-top-color: rgba(255, 255, 255, .20) !important; | |
| } | |
| body ._3z54 { | |
| background-color: #ccc !important; | |
| } | |
| body ._3z53 { | |
| color: rgba(255, 255, 255, .20) !important; | |
| } | |
| body ._56jc { | |
| border-bottom-color: #14120f !important; | |
| } | |
| body ._4coo { | |
| border-bottom-color: #282421 !important; | |
| } | |
| body ._1jw_:first-child ._1jx4 { | |
| border-top-color: rgba(255, 255, 255, 0) !important; | |
| } | |
| body ._o46:not(._nd_) ._454y ._1mj0 { | |
| background-color: rgba(153, 153, 153) !important; | |
| color: #111e27 !important; | |
| } | |
| body ._o46:not(._nd_) ._454y ._1mj1 { | |
| border-bottom-color: rgba(153, 153, 153) !important; | |
| } | |
| body ._29_7 ._3czg ._2e-7 ._2e-1, | |
| body ._29_7 ._3czg ._2e-7 ._2e-2 { | |
| background-color: rgba(72, 72, 72) !important; | |
| color: #111e27 !important; | |
| } | |
| body ._1pka ._49no, | |
| body ._1pka ._2abm, | |
| body ._1pka ._5exl { | |
| border-bottom-color: #111111 !important; | |
| } | |
| body ._2pgc { | |
| background-color: #14120f !important; | |
| color: #e3e1de !important; | |
| } | |
| body ._5r8a._5r8b { | |
| background: #14120f !important; | |
| } |
| :root:not(#z) { | |
| --teal: var(--ac-0); | |
| --teal-rgb: var(--ac-0-rgb); | |
| --teal-light: var(--ac-1); | |
| --teal-light-rgb: var(--ac-1-rgb); | |
| --teal-lighter: var(--ac-2); | |
| --teal-lighter-rgb: var(--ac-2); | |
| --green-deep: var(--ac-3); | |
| --green-deep-rgb: var(--ac-3-rgb); | |
| --active-tab-marker: var(--ac-0); | |
| --active-tab-marker-rgb: var(--ac-0-rgb); | |
| --app-background-stripe: var(--bg-1); | |
| --app-background-stripe-rgb: var(--bg-1-rgb); | |
| --app-background: var(--bg-0); | |
| --app-background-rgb: var(--bg-0-rgb); | |
| --app-background-deeper: var(--bg-0); | |
| --app-background-deeper-rgb: var(--bg-0-rgb); | |
| --audio-progress-incoming: var(--green); | |
| --audio-progress-incoming-rgb: var(--green-rgb); | |
| --audio-progress-outgoing: var(--ac-2); | |
| --audio-progress-outgoing-rgb: var(--ac-2-rgb); | |
| --audio-progress-played-incoming: var(--blue); | |
| --audio-progress-played-incoming-rgb: var(--blue-rgb); | |
| --audio-progress-played-outgoing: var(--blue); | |
| --audio-progress-played-outgoing-rgb: var(--blue-rgb); | |
| --audio-track-incoming: var(--fg-4); | |
| --audio-track-incoming-rgb: var(--fg-4-rgb); | |
| --audio-track-outgoing: var(--fg-4); | |
| --audio-track-outgoing-rgb: var(--fg-4-rgb); | |
| --avatar-background: var(--bg-1); | |
| --avatar-background-rgb: var(--bg-1-rgb); | |
| --avatar-border: var(--fg-3); | |
| --avatar-border-rgb: var(--fg-3-rgb); | |
| --avatar-placeholder-background: var(--bg-5); | |
| --avatar-placeholder-background-rgb: var(--bg-5-rgb); | |
| --avatar-placeholder-primary: var(--fg-3); | |
| --avatar-placeholder-primary-rgb: var(--fg-3-rgb); | |
| --background-default: var(--bg-1); | |
| --background-default-rgb: var(--bg-1-rgb); | |
| --background-default-active: var(--bg-3); | |
| --background-default-active-rgb: var(--bg-3-rgb); | |
| --background-default-hover: var(--bg-2); | |
| --background-default-hover-rgb: var(--bg-2-rgb); | |
| --border-bubble: var(--shadow); | |
| --border-bubble-rgb: var(--shadow-rgb); | |
| --border-default: var(--bg-3); | |
| --border-default-rgb: var(--bg-3-rgb); | |
| --border-list: var(--bg-3); | |
| --border-list-rgb: var(--bg-3-rgb); | |
| --border-panel: var(--bg-5); | |
| --border-panel-rgb: var(--bg-5-rgb); | |
| --border-strong: var(--bg-5); | |
| --border-strong-rgb: var(--bg-5-rgb); | |
| --border-stronger: var(--bg-5); | |
| --border-stronger-rgb: var(--fg-5-rgb); | |
| --bubble-meta: var(--fg-3); | |
| --bubble-meta-rgb: var(--fg-3-rgb); | |
| --bubble-meta-icon: var(--fg-3); | |
| --bubble-meta-icon-rgb: var(--fg-3-rgb); | |
| --butterbar-battery-background: #57272b; | |
| --butterbar-battery-background-rgb: 87, 39, 43; | |
| --butterbar-battery-primary: var(--fg-0); | |
| --butterbar-battery-primary-rgb: var(--fg-0-rgb); | |
| --butterbar-battery-secondary: var(--fg-4); | |
| --butterbar-battery-secondary-rgb: var(--fg-4-rgb); | |
| --butterbar-connection-background: #504b24; | |
| --butterbar-connection-background-rgb: 80, 75, 36; | |
| --butterbar-connection-primary: var(--bg-3); | |
| --butterbar-connection-primary-rgb: var(--bg-3-rgb); | |
| --butterbar-connection-secondary: var(--bg-3); | |
| --butterbar-connection-secondary-rgb: var(--bg-3-rgb); | |
| --butterbar-default-background: #21425c; | |
| --butterbar-default-background-rgb: 33, 66, 92; | |
| --butterbar-icon: var(--fg-1); | |
| --butterbar-icon-rgb: var(--fg-1-rgb); | |
| --butterbar-primary: var(--fg-0); | |
| --butterbar-primary-rgb: var(--fg-0-rgb); | |
| --butterbar-secondary: var(--fg-4); | |
| --butterbar-secondary-rgb: var(--fg-4-rgb); | |
| --butterbar-update-background: var(--ac-0); | |
| --butterbar-update-background-rgb: var(--ac-0-rgb); | |
| --button-alternative: var(--ac-1); | |
| --button-alternative-rgb: var(--ac-1-rgb); | |
| --button-alternative-background: var(--bg-3); | |
| --button-alternative-background-rgb: var(--bg-3-rgb); | |
| --button-background-disabled: var(--bg-2); | |
| --button-background-disabled-rgb: var(--bg-2-rgb); | |
| --button-bubble: var(--ac-0); | |
| --button-bubble-rgb: var(--ac-0-rgb); | |
| --button-primary: var(--white); | |
| --button-primary-rgb: var(--white-rgb); | |
| --button-primary-background: var(--ac-0); | |
| --button-primary-background-rgb: var(--ac-0-rgb); | |
| --button-primary-background-hover: var(--ac-3); | |
| --button-primary-background-hover-rgb: var(--ac-3-rgb); | |
| --button-round-background: var(--ac-0); | |
| --button-round-background-rgb: var(--ac-0-rgb); | |
| --button-secondary: var(--ac-0); | |
| --button-secondary-rgb: var(--ac-0-rgb); | |
| --button-secondary-background: transparent; | |
| --button-secondary-background-rgb: 0, 0, 0; | |
| --button-secondary-background-hover: rgba(241, 241, 242, 0.051); | |
| --button-secondary-background-hover-rgb: var(--fg-3-rgb); | |
| --button-secondary-hover: var(--ac-0); | |
| --button-secondary-hover-rgb: var(--ac-0-rgb); | |
| --chat-marker: var(--fg-3); | |
| --chat-marker-rgb: var(--fg-3-rgb); | |
| --chat-marker-admin: var(--ac-0); | |
| --chat-marker-admin-rgb: var(--ac-0-rgb); | |
| --chat-marker-admin-border: var(--ac-0); | |
| --chat-marker-admin-border-rgb: var(--ac-0-rgb); | |
| --chat-marker-border: var(--fg-3); | |
| --chat-marker-border-rgb: var(--fg-3-rgb); | |
| --chatlist-icon: var(--fg-5); | |
| --chatlist-icon-rgb: var(--fg-5-rgb); | |
| --checkbox-background: var(--ac-0); | |
| --checkbox-background-rgb: var(--ac-0-rgb); | |
| --checkbox-mark: var(--white); | |
| --checkbox-mark-rgb: var(--white-rgb); | |
| --compose-input-background: var(--bg-1); | |
| --compose-input-background-rgb: var(--bg-1-rgb); | |
| --compose-input-border: var(--bg-1); | |
| --compose-input-border-rgb: var(--bg-1); | |
| --compose-background: var(--bg-1); | |
| --compose-background-rgb: var(--bg-1-rgb); | |
| --compose-background-focused: #203946; | |
| --compose-background-focused-rgb: 32, 57, 70; | |
| --compose-border-focused: #274656; | |
| --compose-border-focused-rgb: 39, 70, 86; | |
| --compose-panel-background: var(--bg-3); | |
| --compose-panel-background-rgb: var(--bg-3-rgb); | |
| --compose-primary: var(--white); | |
| --conversation-panel-background: var(--bg-2); | |
| --conversation-panel-background-rgb: var(--bg-2-rgb); | |
| --conversation-panel-border: var(--bg-5); | |
| --conversation-panel-border-rgb: var(--fg-3-rgb); | |
| --danger: var(--red); | |
| --danger-rgb: var(--red-rgb); | |
| --drawer-background: var(--bg-3); | |
| --drawer-background-rgb: var(--bg-3-rgb); | |
| --drawer-background-deep: var(--bg-0); | |
| --drawer-background-deep-rgb: var(--bg-0-rgb); | |
| --drawer-gallery-background: var(--bg-1); | |
| --drawer-gallery-background-rgb: var(--bg-1-rgb); | |
| --drawer-header-title: var(--fg-1); | |
| --drawer-header-title-rgb: var(--fg-1-rgb); | |
| --drawer-section-background: var(--bg-1); | |
| --drawer-section-background-rgb: var(--bg-1-rgb); | |
| --dropdown-background: var(--bg-2); | |
| --dropdown-background-rgb: var(--bg-2-rgb); | |
| --dropdown-background-hover: var(--bg-3); | |
| --dropdown-background-hover-rgb: var(--bg-3-rgb); | |
| --empty-state-background: var(--bg-3); | |
| --empty-state-background-rgb: var(--bg-3-rgb); | |
| --empty-state-icon: #757c81; | |
| --empty-state-icon-rgb: 117, 124, 129; | |
| --focus: var(--ac-3); | |
| --focus-rgb: var(--ac-3-rgb); | |
| --focus-animation: var(--ac-3); | |
| --focus-animation-rgb: var(--ac-3-rgb); | |
| --focus-animation-deeper: var(--ac-3); | |
| --focus-animation-deeper-rgb: var(--ac-3-rgb); | |
| --focus-lighter: var(--ac-3); | |
| --focus-lighter-rgb: var(--ac-3-rgb); | |
| --highlight: var(--ac-0); | |
| --highlight-rgb: var(--ac-0-rgb); | |
| --icon: var(--fg-3); | |
| --icon-rgb: var(--fg-3-rgb); | |
| --icon-ack: #32b1da; | |
| --icon-ack-rgb: 2, 175, 156; | |
| --icon-disabled: var(--fg-5); | |
| --icon-disabled-rgb: var(--fg-5-rgb); | |
| --icon-fixed: var(--fg-3); | |
| --icon-fixed-rgb: var(--fg-3-rgb); | |
| --icon-lighter: var(--fg-5); | |
| --icon-lighter-rgb: var(--fg-0-rgb); | |
| --icon-search-back: var(--ac-2); | |
| --icon-search-back-rgb: var(--ac-2-rgb); | |
| --icon-strong: var(--fg-1); | |
| --icon-strong-rgb: var(--fg-1-rgb); | |
| --incoming-background: var(--bg-4); | |
| --incoming-background-rgb: var(--bg-4-rgb); | |
| --incoming-background-deeper: var(--bg-3); | |
| --incoming-background-deeper-rgb: var(--bg-3-rgb); | |
| --incoming-background-highlight: #ccc; | |
| --incoming-background-highlight-rgb: 204, 204, 204; | |
| --incoming-primary: var(--fg-3); | |
| --incoming-primary-rgb: var(--fg-3-rgb); | |
| --input-border-active: var(--ac-0); | |
| --input-border-active-rgb: var(--ac-0-rgb); | |
| --input-placeholder: var(--fg-4); | |
| --input-placeholder-rgb: var(--fg-4); | |
| --intro-background: var(--bg-2); | |
| --intro-background-rgb: var(--bg-2-rgb); | |
| --intro-border: var(--ac-0); | |
| --intro-border-rgb: var(--ac-0-rgb); | |
| --intro-secondary: (--white); | |
| --inverse: #f1f1f2; | |
| --inverse-rgb: var(--fg-3-rgb); | |
| --labels-icon: rgba(241, 241, 242, 0.4); | |
| --labels-icon-rgb: var(--fg-3-rgb); | |
| --link: #32b1da; | |
| --link-rgb: 2, 175, 156; | |
| --live-location-footer-background: var(--bg-1); | |
| --live-location-footer-background-rgb: var(--bg-1-rgb); | |
| --live-location-glow: rgba(37, 211, 102, 0.302); | |
| --live-location-glow-rgb: 37, 211, 102; | |
| --live-location-glow-stale: rgba(255, 0, 31, 0.302); | |
| --live-location-glow-stale-rgb: 255, 0, 31; | |
| --location-cluster-background: var(--bg-1); | |
| --location-cluster-background-rgb: var(--bg-1-rgb); | |
| --media-editor-control: #1c313f; | |
| --media-editor-control-rgb: 28, 49, 63; | |
| --media-viewer-background: rgba(var(--bg-1-rgb), 0.95); | |
| --media-viewer-background-rgb: var(--bg-1-rgb); | |
| --media-viewer-button-background: var(--bg-3); | |
| --media-viewer-button-background-rgb: var(--bg-3-rgb); | |
| --media-viewer-button-icon: #f1f1f2; | |
| --media-viewer-button-icon-rgb: var(--fg-3-rgb); | |
| --menu-tabs-list-active: var(--ac-0); | |
| --menu-tabs-list-active-rgb: var(--ac-0-rgb); | |
| --message-background-deep: var(--bg-0); | |
| --message-background-deep-rgb: var(--bg-0-rgb); | |
| --message-placeholder-icon: rgba(204, 204, 204, 0.302); | |
| --message-placeholder-icon-rgb: 204, 204, 204; | |
| --message-selection-highlight: rgba(var(--ac-0-rgb), 0.1); | |
| --message-selection-highlight-rgb: var(--ac-0-rgb); | |
| --message-primary: var(--white); | |
| --modal-backdrop: rgba(var(--bg-0-rgb), 0.95); | |
| --modal-backdrop-rgb: var(--bg-0-rgb); | |
| --modal-backdrop-solid: var(--bg-0); | |
| --modal-backdrop-solid-rgb: var(--bg-0-rgb); | |
| --modal-background: var(--bg-2); | |
| --modal-background-rgb: var(--bg-2-rgb); | |
| --notification-biz-background: var(--bg-3); | |
| --notification-biz-background-rgb: var(--bg-3-rgb); | |
| --notification-biz-text: #55fad9; | |
| --notification-biz-text-rgb: 85, 250, 217; | |
| --notification-e2e-background: var(--bg-0); | |
| --notification-e2e-background-rgb: var(--bg-3-rgb); | |
| --notification-e2e-icon: #fad964; | |
| --notification-e2e-icon-rgb: 250, 217, 100; | |
| --notification-e2e-text: #fad964; | |
| --notification-e2e-text-rgb: 250, 217, 100; | |
| --notification-text: rgba(241, 241, 242, 0.4); | |
| --notification-text-rgb: var(--fg-3-rgb); | |
| --outgoing-background: var(--ac-4); | |
| --outgoing-background-rgb: var(--ac-4-rgb); | |
| --outgoing-background-deeper: var(--ac-5); | |
| --outgoing-background-deeper-rgb: var(--ac-5-rbg); | |
| --outgoing-background-highlight: #ccc; | |
| --outgoing-background-highlight-rgb: 204, 204, 204; | |
| --overlay: var(--bg-0); | |
| --overlay-rgb: var(--bg-0-rgb); | |
| --panel-background: var(--bg-3); | |
| --panel-background-rgb: var(--bg-3-rgb); | |
| --panel-background-active: #1a262d; | |
| --panel-background-active-rgb: 26, 38, 45; | |
| --panel-background-colored: var(--bg-4); | |
| --panel-background-colored-rgb: var(--bg-4-rgb); | |
| --panel-background-colored-deeper: var(--bg-3); | |
| --panel-background-colored-deeper-rgb: var(--bg-3-rgb); | |
| --panel-background-deep: var(--bg-2); | |
| --panel-background-deep-rgb: var(--bg-2-rgb); | |
| --panel-background-deeper: var(--bg-2); | |
| --panel-background-deeper-rgb: var(--bg-3-rgb); | |
| --panel-background-hover: #1b272e; | |
| --panel-background-hover-rgb: 27, 39, 46; | |
| --panel-background-lighter: var(--bg-2); | |
| --panel-background-lighter-rgb: var(--bg-3-rgb); | |
| --panel-header-background: var(--bg-3); | |
| --panel-header-background-rgb: var(--bg-3-rgb); | |
| --panel-header-icon: var(--fg-3); | |
| --panel-header-icon-rgb: var(--fg-3-rgb); | |
| --panel-primary: rgba(241, 241, 242, 0.349); | |
| --panel-primary-rgb: var(--fg-3-rgb); | |
| --panel-input-background: var(--bg-1); | |
| --panel-input-background-rgb: var(--bg-1-rgb); | |
| --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); | |
| --payment-status-processing-rgb: var(--fg-3-rgb); | |
| --payment-status-success: #40cf6c; | |
| --payment-status-success-rgb: 64, 207, 108; | |
| --payment-status-waiting: var(--fg-1); | |
| --payment-status-waiting-rgb: var(--fg-3-rgb); | |
| --photopicker-overlay-background: rgba(33, 44, 49, 0.8); | |
| --photopicker-overlay-background-rgb: 33, 44, 49; | |
| --popup-panel-background: var(--bg-2); | |
| --popup-panel-background-rgb: var(--bg-2-rgb); | |
| --primary: var(--fg-2); | |
| --primary-rgb: var(--fg-2-rgb); | |
| --primary-strong: var(--fg-1); | |
| --primary-strong-rgb: var(--fg-1-rgb); | |
| --primary-stronger: var(--fg-0); | |
| --primary-stronger-rgb: var(--fg-0-rgb); | |
| --primary-title: var(--fg-2); | |
| --primary-title-rgb: var(--fg-2-rgb); | |
| --product-thumb-background: var(--bg-3); | |
| --product-thumb-background-rgb: var(--bg-3-rgb); | |
| --product-thumb-background-deeper: #2b3e49; | |
| --product-thumb-background-deeper-rgb: 43.232, 61.76, 72.568; | |
| --ptt-blue: var(--blue); | |
| --ptt-blue-rgb: var(--blue-rgb); | |
| --ptt-button-cancel: var(--red); | |
| --ptt-button-cancel-rgb: var(--red-rgb); | |
| --ptt-button-send: var(--green); | |
| --ptt-button-send-rgb: var(--green); | |
| --ptt-gray: var(--fg-4); | |
| --ptt-gray-rgb: var(--fg-4-rgb); | |
| --ptt-green: var(--green); | |
| --ptt-green-rgb: var(--green); | |
| --ptt-message-blue: var(--blue); | |
| --ptt-message-blue-rgb: var(--blue-rgb); | |
| --quick-action-button: var(--fg-3); | |
| --quick-action-button-rgb: var(--fg-3-rgb); | |
| --quick-action-button-background: var(--bg-4); | |
| --quick-action-button-background-rgb: var(--bg-4-rgb); | |
| --rich-text-panel-background: var(--bg-3); | |
| --rich-text-panel-background-rgb: var(--bg-3-rgb); | |
| --secondary: var(--fg-3); | |
| --secondary-rgb: var(--fg-3-rgb); | |
| --secondary-light: var(--fg-2); | |
| --secondary-light-rgb: var(--fg-2-rgb); | |
| --secondary-lighter: var(--fg-1); | |
| --secondary-lighter-rgb: var(--fg-1-rgb); | |
| --secondary-stronger: var(--fg-0); | |
| --secondary-stronger-rgb: var(--fg-0-rgb); | |
| --search-input-background: var(--bg-1); | |
| --search-input-background-rgb: var(--bg-1-rgb); | |
| --shadow: var(--bg-0); | |
| --shadow-rgb: var(--bg-0-rgb); | |
| --shadow-light: var(--bg-0); | |
| --shadow-light-rgb: var(--bg-0-rgb); | |
| --spinner-default: var(--fg-3); | |
| --spinner-default-rgb: var(--fg-3-rgb); | |
| --spinner-highlight: var(--ac-0); | |
| --spinner-highlight-rgb: var(--ac-0-rgb); | |
| --spinner-incoming: var(--fg-5); | |
| --spinner-incoming-rgb: var(--fg-5-rgb); | |
| --spinner-outgoing: var(--ac-5); | |
| --spinner-outgoing-rgb: var(--ac-5-rgb); | |
| --status-background: var(--bg-1); | |
| --status-background-rgb: var(--bg-1-rgb); | |
| --status-background-hover: var(--bg-2); | |
| --status-background-hover-rgb: var(--bg-2-rgb); | |
| --status-primary: #fff; | |
| --status-primary-rgb: 255, 255, 255; | |
| --status-secondary: rgba(255, 255, 255, 0.549); | |
| --status-secondary-rgb: 255, 255, 255; | |
| --status-secondary-stronger: #b3b3b3; | |
| --status-secondary-stronger-rgb: 179, 179, 179; | |
| --success: var(--ac-0); | |
| --success-rgb: var(--ac-0-rgb); | |
| --suspicious-background: rgba(239, 105, 122, 0.8); | |
| --suspicious-background-rgb: 239, 105, 122; | |
| --system-message-background: var(--ac-4); | |
| --system-message-background-rgb: var(--ac-4-rgb); | |
| --system-message-text: var(--fg-1); | |
| --system-message-text-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); | |
| --thumb-border-active-rgb: var(--bg-2-rgb); | |
| --thumb-border-viewer-active: var(--fg-3); | |
| --thumb-border-viewer-active-rgb: var(--fg-3-rgb); | |
| --toast-background: var(--bg-3); | |
| --toast-background-rgb: var(--bg-3-rgb); | |
| --tooltip-background: rgba(89, 89, 89, 0.851); | |
| --tooltip-background-rgb: 89.25, 89.25, 89.25; | |
| --typing: var(--ac-0); | |
| --typing-rgb: var(--ac-0-rgb); | |
| --unread-background: var(--bg-3); | |
| --unread-background-rgb: var(--bg-3-rgb); | |
| --unread-bar-background: var(--bg-0); | |
| --unread-bar-background-rgb: var(--bg-0-rgb); | |
| --unread-marker-background: var(--ac-0); | |
| --unread-marker-background-rgb: var(--ac-0-rgb); | |
| --unread-marker-text: var(--white); | |
| --unread-marker-text-rgb: var(--white-rgb); | |
| --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; | |
| --win32-title-primary: #fff; | |
| --win32-title-primary-rgb: 255, 255, 255; | |
| --bg-0: #1c2026 !important; | |
| --bg-0-rgb: 28, 32, 38; | |
| --bg-1: #1f232a !important; | |
| --bg-1-rgb: 31, 35, 42; | |
| --bg-2: #282d37 !important; | |
| --bg-2-rgb: 40, 45, 55; | |
| --bg-3: #323843 !important; | |
| --bg-3-rgb: 50, 56, 67; | |
| --bg-4: #3b4250 !important; | |
| --bg-4-rgb: 59, 66, 80; | |
| --bg-5: #444d5c !important; | |
| --bg-5-rgb: 68, 77, 92; | |
| --fg-0: #f0f0f0 !important; | |
| --fg-0-rgb: 240, 240, 240; | |
| --fg-1: #eee !important; | |
| --fg-1-rgb: 238, 238, 238; | |
| --fg-2: #e0e0e0 !important; | |
| --fg-2-rgb: 224, 224, 224; | |
| --fg-3: #d1d1d1 !important; | |
| --fg-3-rgb: 209, 209, 209; | |
| --fg-4: #b5b5b5 !important; | |
| --fg-4-rgb: 181, 181, 181; | |
| --fg-5: #8f8f8f !important; | |
| --fg-5-rgb: 143, 143, 143; | |
| --ac-0: #02af9c !important; | |
| --ac-0-rgb: 2, 175, 156; | |
| --ac-1: #6a7fc9 !important; | |
| --ac-1-rgb: 106, 127, 201; | |
| --ac-2: #6376b9 !important; | |
| --ac-2-rgb: 99, 118, 185; | |
| --ac-3: #0eaf82 !important; | |
| --ac-3-rgb: 14, 175, 130; | |
| --ac-4: #0e5247 !important; | |
| --ac-4-rgb: 14, 82, 71; | |
| --ac-5: #303849 !important; | |
| --ac-5-rgb: 48, 56, 73; | |
| --white: #fff; | |
| --white-rgb: 255, 255, 255; | |
| --red: #dc322f; | |
| --red-rgb: 220, 50, 47; | |
| --green: #18ca00; | |
| --green-rgb: 24, 202, 0; | |
| --blue: #268bd2; | |
| --blue-rgb: 38, 139, 210; | |
| --yellow: #e5c512; | |
| --yellow-rgb: 229, 197, 18; | |
| --msg-l: #353b46; | |
| --msg-r: #2c323d; | |
| --t: transparent; | |
| --shadow: rgba(0, 0, 0, 0.145); | |
| --sh-h: rgba(0, 0, 0, 0.208); | |
| --bshadow: 0 2px 4px var(--shadow); | |
| --ui-font: 'font_name', 'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans', sans-serif; | |
| --r-menus: 4px; | |
| --r-inputs: 24px; | |
| --r-avatars: 50%; | |
| --c-m-hover: 0.6s; | |
| --c-m-delay: 1.2s; | |
| --bg-image: url("https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/images/bg-blur-high.jpg"); | |
| --bg-opacity: 0.4; | |
| --bg-blur: 0px; | |
| --bg-blur-s: calc(-2 * var(--bg-blur)); | |
| --bg-hue: 320deg; | |
| --bg-invert: 0; | |
| --bg-size: cover; | |
| --bg-pos: center; | |
| --bg-rep: no-repeat; | |
| --version: '2.10.0 — June 6th, 2020'; | |
| --message: 'Dark mode for Franz and Ferdi by Duc Filan, for more services: https://github.com/ducfilan/Dark-mode-Franz-Ferdi'; | |
| --changes: '\A\A All credits for @vednoc/dark-whatsapp'; | |
| } | |
| @supports (scrollbar-width: thin) { | |
| * { | |
| scrollbar-width: thin !important; | |
| scrollbar-color: var(--ac-3) rgba(136, 136, 136, 0.082); | |
| } | |
| } | |
| *::-webkit-scrollbar-thumb { | |
| background: var(--ac-3) !important; | |
| } | |
| *::-webkit-scrollbar-track { | |
| background: var(--shadow) !important; | |
| } | |
| :root { | |
| --intro-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='256' width='256'><g stroke='\%23ffffff'><path d='M128.4901 30.8659a95.4375 95.4375 0 00-95.4375 95.4375 95.4375 95.4375 0 0014.168 50.0332L35.6698 221.276l44.7989-12.498a95.4375 95.4375 0 0048.0214 12.9629 95.4375 95.4375 0 0095.4375-95.4375 95.4375 95.4375 0 00-95.4375-95.4375z' fill='\%231f232a' fill-rule='evenodd' stroke-width='18' stroke-linecap='square'/><path d='M97.8104 79.8463c-4.9671.0406-13.5028 2.0796-17.7812 14.8946-6.8318 20.4631 12.5737 43.3028 27.2438 57.4735 14.7975 14.2938 43.1559 26.507 58.0098 21.08 20.5566-8.9065 15.2475-22.9479 15.2475-22.9479l-22.9727-11.0878s-2.062-1.206-3.4146.5737c-1.0042 1.3213-9.4409 11.3755-9.4409 11.3755s-1.449 1.668-3.827.7402c-5.7574-2.2462-14.2018-7.4856-18.5314-10.7795-6.8875-5.2399-12.957-13.0846-16.9473-19.668-1.2556-2.5597.6953-4.709.6953-4.709s6.0303-8.2629 7.0176-9.5566c1.0068-1.3194.2539-3.3633.2539-3.3633l-10.539-23.2285s-2.0334-.8212-5.0138-.7969z' fill='\%23ffffff' stroke-linejoin='round'/></g></svg>"); | |
| } | |
| html>body { | |
| background-image: none !important; | |
| color: var(--fg-0) !important; | |
| background-color: var(--bg-0) !important; | |
| } | |
| html>body, | |
| html>body button, | |
| html>body input { | |
| font-family: var(--ui-font); | |
| } | |
| html>body ._11dpe { | |
| color: #eee !important; | |
| border: 1px solid #444d5c; | |
| } | |
| html>body ._11dpe button:nth-child(2) { | |
| color: #6a7fc9 !important; | |
| } | |
| html>body ._11dpe button:nth-child(3) { | |
| color: #b5b5b5 !important; | |
| } | |
| html>body [data-asset-intro-image-light] { | |
| max-width: 200px; | |
| max-height: 200px; | |
| background-image: var(--intro-image); | |
| transition: opacity 0.6s ease; | |
| border-radius: 0 !important; | |
| } | |
| html>body [data-asset-intro-image-light]+div h1+div[class] { | |
| font-size: 0; | |
| color: #f0f0f0 !important; | |
| } | |
| html>body [data-asset-intro-image-light]+div h1+div[class]::before { | |
| display: block; | |
| font-size: 16px; | |
| margin-bottom: -16px; | |
| white-space: pre-wrap; | |
| content: var(--message) var(--changes); | |
| } | |
| html>body [data-asset-intro-image-light]+div h1+div[class]::after { | |
| display: block; | |
| font-size: 16px; | |
| margin-top: 16px; | |
| padding-top: 24px; | |
| margin-bottom: -16px; | |
| content: var(--version); | |
| border-top: 1px solid #3b4250; | |
| } | |
| html>body [data-asset-chat-background-light] { | |
| filter: invert(1) !important; | |
| } | |
| ._1BjNO[style] { | |
| background-color: #444d5c !important; | |
| } | |
| ._1BjNO[style], | |
| ._1BjNO[style]>img, | |
| ._18cLH { | |
| border-radius: var(--r-avatars) !important; | |
| } | |
| .overlay ._2ouPw, | |
| .overlay ._21ltg, | |
| .overlay>.KeLEe { | |
| background-color: var(--bg-3) !important; | |
| border-bottom: 1px solid var(--bg-5) !important; | |
| } | |
| .overlay ._1kEVs { | |
| background-color: transparent !important; | |
| } | |
| .overlay [data-animate-modal-popup] { | |
| border: 1px solid #444d5c; | |
| border-radius: var(--r-menus) !important; | |
| } | |
| .overlay [data-animate-modal-popup] .copyable-area>header { | |
| border-bottom: 1px solid #444d5c; | |
| } | |
| ._1KWct { | |
| border-color: var(--bg-5) !important; | |
| background-color: var(--bg-3) !important; | |
| } | |
| [data-animate-status-v3-modal-background='true'] { | |
| background-color: var(--modal-backdrop) !important; | |
| } | |
| [data-animate-status-v3-modal-background='true']>div { | |
| background-color: #282d37 !important; | |
| } | |
| [data-animate-status-v3-modal-background='true']>div>div:nth-child(1) { | |
| background-color: #1c2026 !important; | |
| border-right: 1px solid #444d5c; | |
| } | |
| @media (min-width: 1441px) { | |
| [data-animate-status-v3-modal-background='true']>div { | |
| border: 1px solid #444d5c !important; | |
| border-radius: var(--r-menus) !important; | |
| } | |
| } | |
| .color-1 { | |
| color: var(--ac-0) !important; | |
| } | |
| .bg-color-1 { | |
| background-color: var(--ac-0) !important; | |
| } | |
| [data-icon='status-v3-unread'] [fill='#009588'] { | |
| fill: #32b1da !important; | |
| } | |
| [id *='startup'] { | |
| background-color: #1c2026 !important; | |
| } | |
| progress { | |
| background-color: #282d37 !important; | |
| } | |
| progress[value]::-moz-progress-bar { | |
| background-color: #ffffff !important; | |
| } | |
| ::-moz-progress-bar { | |
| background-color: #ffffff !important; | |
| } | |
| ::-webkit-progress-bar { | |
| background-color: #ffffff !important; | |
| } | |
| ::-webkit-progress-value { | |
| background-color: #ffffff !important; | |
| } | |
| .landing-wrapper::before { | |
| background-color: #282d37 !important; | |
| } | |
| .landing-header { | |
| position: relative; | |
| } | |
| .landing-header path[fill ^='#FFF'] { | |
| fill: #32b1da; | |
| } | |
| .landing-header path[fill ^='#00E'] { | |
| fill: #1f232a; | |
| } | |
| .landing-header div { | |
| text-transform: unset; | |
| color: #eee !important; | |
| } | |
| .landing-header::after { | |
| font-size: 14px; | |
| font-weight: 500; | |
| position: absolute; | |
| content: var(--version); | |
| } | |
| html[dir='RTL'] .landing-header::after { | |
| left: 0; | |
| } | |
| html[dir='LTR'] .landing-header::after { | |
| right: 0; | |
| } | |
| .landing-window:not(#z) { | |
| border-radius: 4px; | |
| background-color: #1f232a !important; | |
| box-shadow: 0 0 1px #444d5c; | |
| } | |
| .landing-main a[href] { | |
| color: #32b1da !important; | |
| } | |
| .landing-main label, | |
| .landing-main ._2yUXW { | |
| color: #d1d1d1 !important; | |
| } | |
| .landing-main .landing-title { | |
| color: #eee !important; | |
| } | |
| .landing-main rect[fill ^='#f2f'], | |
| .landing-main rect[fill ^='#F2F'] { | |
| fill: #444d5c; | |
| } | |
| .landing-main path[fill ^='#818'] { | |
| fill: #32b1da; | |
| } | |
| .landing-main div[data-ref] { | |
| border-radius: 0 !important; | |
| filter: contrast(150%); | |
| outline: 4px solid #fff; | |
| box-shadow: 0 0 0 4px #fff; | |
| } | |
| .landing-main div[data-ref] [role='button'] { | |
| color: #fff !important; | |
| background-color: #32b1da !important; | |
| } | |
| .landing-main div[data-ref]._2BIlf { | |
| outline: 4px solid #32b1da; | |
| box-shadow: 0 0 0 4px #32b1da; | |
| } | |
| .landing-main+._3pdvT { | |
| background-color: transparent !important; | |
| } | |
| .landing-main+._3pdvT img { | |
| opacity: 0.3; | |
| } | |
| .landing-main+._3pdvT [style *='opacity: 1'] { | |
| background-color: transparent !important; | |
| } | |
| .landing-main ._3ybl8 { | |
| color: #fff !important; | |
| background-color: #32b1da !important; | |
| box-shadow: bsh; | |
| } | |
| .landing-main ._3ybl8::before { | |
| border-bottom-color: #32b1da !important; | |
| } | |
| #app>div::after { | |
| top: var(--bg-blur-s); | |
| right: var(--bg-blur-s); | |
| bottom: var(--bg-blur-s); | |
| left: var(--bg-blur-s); | |
| height: unset; | |
| width: unset; | |
| filter: blur(var(--bg-blur)) opacity(var(--bg-opacity)) invert(var(--bg-invert)) hue-rotate(var(--bg-hue)); | |
| background-color: transparent !important; | |
| background-image: var(--bg-image) !important; | |
| background-position: var(--bg-pos) !important; | |
| background-repeat: var(--bg-rep) !important; | |
| background-size: var(--bg-size) !important; | |
| } | |
| #app>div>span>div[style ^='transform-origin:'][tabindex], | |
| #app>div ._2s_eZ[style ^='transform-origin:'][tabindex] { | |
| border: 1px solid var(--bg-4); | |
| border-radius: var(--r-menus) !important; | |
| } | |
| #app>div>[tabindex] { | |
| background: none !important; | |
| } | |
| @media (min-width: 1441px) { | |
| #app>div>[tabindex] { | |
| border-radius: var(--r-menus) !important; | |
| border: 1px solid #444d5c !important; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.145); | |
| } | |
| } | |
| #app>div>[tabindex]::after { | |
| content: unset !important; | |
| } | |
| #app>div>[tabindex] .gQzdc, | |
| #app>div>[tabindex] ._3qx7_ { | |
| border-bottom: 1px solid #444d5c !important; | |
| background-color: #323843 !important; | |
| } | |
| #app>div>[tabindex] .gQzdc::after, | |
| #app>div>[tabindex] ._3qx7_::after { | |
| display: none !important; | |
| } | |
| ._1yO24 { | |
| animation: none !important; | |
| } | |
| #app>div>[tabindex] .gQzdc label, | |
| #app>div>[tabindex] ._3qx7_ label { | |
| border-radius: var(--r-inputs) !important; | |
| } | |
| #app>div>[tabindex] #side>header { | |
| border-bottom: 1px solid #444d5c !important; | |
| } | |
| #app>div>[tabindex] #side>header+span>div { | |
| border-bottom: 1px solid #444d5c !important; | |
| } | |
| #app>div>[tabindex] #side>header+span>div [data-icon='x'] svg path { | |
| fill: #8f8f8f; | |
| } | |
| #app>div>[tabindex] ._14VS3>._1V8rX { | |
| border-left: 1px solid #444d5c !important; | |
| } | |
| #app>div>[tabindex] ._14VS3>._1V8rX .copyable-area>header { | |
| border-bottom: none !important; | |
| } | |
| #main>header { | |
| border-right: none !important; | |
| border-bottom: 1px solid !important; | |
| border-color: var(--bg-5) !important; | |
| } | |
| #main>header::after { | |
| content: unset !important; | |
| } | |
| #main ._1E1g0 { | |
| text-shadow: 0 1px 0 rgba(var(--fg-3-rgb), 0.2); | |
| } | |
| #main ._9WQEN { | |
| border: none !important; | |
| } | |
| #main [class *='message-'][data-id]>span+div:not(.urabC)>div { | |
| box-shadow: 0 1px 0 rgba(var(--shadow-rgb), 0.33) !important; | |
| } | |
| #main .-AOZp ._2oA--+div[style] { | |
| background-color: var(--bg-4) !important; | |
| } | |
| #main>footer>.copyable-area { | |
| border-top: 1px solid var(--bg-5) !important; | |
| } | |
| #main>footer+span>._2pAWd { | |
| border-top: 1px solid var(--bg-5) !important; | |
| border-left: 1px solid var(--bg-5) !important; | |
| } | |
| #main>footer ._3eShu { | |
| border-top: 1px solid var(--bg-5) !important; | |
| border-bottom: 1px solid var(--bg-5) !important; | |
| } | |
| #main>footer ._3uMse { | |
| border-radius: var(--r-inputs) !important; | |
| } | |
| @media screen and (max-height: 500px) { | |
| #app>div>[tabindex] { | |
| min-height: auto; | |
| } | |
| } | |
| @media screen and (max-width: 648px) { | |
| #app>div>[tabindex] { | |
| min-width: auto; | |
| } | |
| } | |
| @media screen and (max-width: 720px) { | |
| .two>div:nth-child(3), | |
| .three>div:nth-child(3) { | |
| flex: 0 0 80px !important; | |
| transition: 0.2s ease; | |
| } | |
| .two>div:nth-child(3):hover, | |
| .three>div:nth-child(3):hover, | |
| .two>div:nth-child(3):focus-within, | |
| .three>div:nth-child(3):focus-within { | |
| flex: 0 0 30% !important; | |
| } | |
| .two>div:nth-child(2)>div:nth-child(2) { | |
| flex: 0 0 calc(100% - 80px) !important; | |
| margin-left: calc(-30% + 80px); | |
| } | |
| .two>div:nth-child(3) { | |
| min-width: 1px !important; | |
| transition: 0.3s ease !important; | |
| transition-delay: var(--c-m-delay) !important; | |
| } | |
| .two>div:nth-child(3):hover { | |
| min-width: 349px !important; | |
| transition-delay: var(--c-m-hover) !important; | |
| flex: 0 0 30% !important; | |
| } | |
| .two> :nth-child(2)> :nth-child(1) { | |
| z-index: 201 !important; | |
| flex: 0 0 30% !important; | |
| } | |
| .two> :nth-child(2)> :nth-child(1) [style][tabindex] { | |
| border-right: 1px solid #444d5c !important; | |
| } | |
| .two ._1xXdX:hover { | |
| min-width: 349px !important; | |
| } | |
| .three>div:nth-child(2)>div:nth-child(2) { | |
| flex: 0 0 calc(100% - 30% - 80px) !important; | |
| margin-left: calc(-30% + 80px); | |
| } | |
| .three>div:nth-child(4) { | |
| flex: 0 0 calc(100% - 30% - 80px) !important; | |
| } | |
| .three>div:nth-child(3):hover { | |
| flex: 0 0 80px !important; | |
| } | |
| .three ._14VS3, | |
| .three ._1xXdX { | |
| flex: 0 0 30% !important; | |
| border-color: transparent !important; | |
| } | |
| ._3qx7_:not(._3fVV4) label { | |
| padding: 0px; | |
| } | |
| #side>header { | |
| min-width: 240px; | |
| } | |
| #side>header+span { | |
| display: none; | |
| } | |
| #side .eJ0yJ>div:last-child { | |
| padding-left: 5px !important; | |
| } | |
| #side .eJ0yJ ._1582E { | |
| position: relative; | |
| flex-direction: row-reverse !important; | |
| } | |
| #side .eJ0yJ ._1582E .m61XR { | |
| z-index: 999 !important; | |
| margin-left: 0 !important; | |
| position: absolute; | |
| left: -41px; | |
| bottom: -6px; | |
| border-radius: 50%; | |
| } | |
| #side .eJ0yJ ._1582E .m61XR ._15G96 { | |
| margin: 0; | |
| } | |
| #side .eJ0yJ ._1582E .m61XR ._31gEB { | |
| border: 4px solid #1c2026; | |
| } | |
| #side .eJ0yJ ._1582E .m61XR>span { | |
| display: flex !important; | |
| flex-direction: row-reverse !important; | |
| } | |
| #side .eJ0yJ ._1582E ._38QnI, | |
| #side .eJ0yJ ._1582E .ZKn2B>*:not(._31gEB) { | |
| display: none; | |
| } | |
| ._616fG { | |
| overflow: unset !important; | |
| margin-top: -8px !important; | |
| margin-left: 0px !important; | |
| position: absolute !important; | |
| } | |
| ._616fG::before { | |
| content: '' !important; | |
| z-index: 1 !important; | |
| position: absolute !important; | |
| top: -31px !important; | |
| left: -71px !important; | |
| height: 53px !important; | |
| width: 53px !important; | |
| border-radius: var(--r-avatars) !important; | |
| box-shadow: inset 0 0 0 3px #859900 !important; | |
| animation: 2s pulse infinite !important; | |
| } | |
| #side .eJ0yJ .zFnXi { | |
| padding: 1.5px; | |
| z-index: 101; | |
| position: absolute; | |
| margin: -2px 0 0 -75px; | |
| border: 3px solid #1f232a; | |
| background-color: #323843 !important; | |
| border-radius: 50%; | |
| } | |
| #side .eJ0yJ .zFnXi>span>svg { | |
| padding: 2px; | |
| height: 14px !important; | |
| width: 14px !important; | |
| } | |
| #side .eJ0yJ._13opk ._31gEB, | |
| #side .eJ0yJ._13opk .zFnXi { | |
| border-color: #323843 !important; | |
| background-color: #444d5c !important; | |
| } | |
| #side .eJ0yJ:hover:not(._13opk) ._31gEB, | |
| #side .eJ0yJ:hover:not(._13opk) .zFnXi { | |
| border-color: #282d37 !important; | |
| } | |
| #side ._2kHpK { | |
| min-width: 80px !important; | |
| } | |
| } | |
| @keyframes pulse { | |
| 40% { | |
| opacity: 0; | |
| } | |
| 80% { | |
| opacity: 1; | |
| } | |
| } |