diff --git a/resources/css/whatsapp-important.css b/resources/css/whatsapp-important.css index 4ed0e0561c40d575183139cd0c4931d3942d792e..3b9cc319a8b61ff21cc8eafbec734e9e1db5f475 100644 --- a/resources/css/whatsapp-important.css +++ b/resources/css/whatsapp-important.css @@ -1,1126 +1,1508 @@ :root { - --dark: rgb(39, 44, 53) !important; - --darker: rgb(31, 35, 42) !important; - --light: rgb(209, 209, 209) !important; - --lighter: rgb(233, 233, 233) !important; - --accent: rgb(114, 137, 218) !important; - --icon: rgb(225, 225, 225) !important; - --shadow: rgba(0, 0, 0, .12) !important; - --mred: rgb(163, 82, 91) !important; - --mgreen: rgb(112, 163, 82) !important; - --mblue: rgb(82, 122, 163) !important; - --image: url(https://media.discordapp.net/attachments/310799529161129984/417408747812552715/zilesanamin.jpg) !important; - --emojiOpacity: 0.75 !important; - } - - /* Body reset. */ - body { - background: none !important; - background-color: var(--dark) !important; } - - /* Scrollbar track. */ - *::-webkit-scrollbar-track { - background-color: var(--shadow) !important; } - /* Scrollbar thumb. */ - *::-webkit-scrollbar-thumb { - background-color: rgba(0,0,0,0.2) !important; } - /* Highlight selection. */ - ::selection { - color: var(--light) !important; - background-color: var(--accent) !important; } - ::-moz-selection { - color: var(--light) !important; - background-color: var(--accent) !important; } - /* Input placeholders. */ - ::-webkit-input-placeholder { - color: var(--lighter) !important; } - - /* Progress. */ - progress[value]::-webkit-progress-bar { - background: var(--darker) !important; } - /* Value. */ - progress[value]::-webkit-progress-value { - background: var(--accent) !important; } - - /* App wrapper. */ - #app .app { - background: none !important; - background-color: var(--dark) !important; } - - /* Accent background. */ - .app-wrapper::after { - background: none !important; } - - - /* Log-in page. */ - ._2NbD3 { - border: 1px solid var(--shadow) !important; - box-shadow: 0 8px 32px 0 var(--shadow) !important; - background-color: var(--darker) !important; } - /* Text color. */ - ._2NbD3 * { - color: var(--light) !important; } - /* Reload QR code. */ - .HnNfm { - background-color: var(--darker) !important; } - /* Fix QR code. */ - ._2NbD3 .XSdna { - border: 3px solid white !important; } - /* Tutorial. */ - ._2NbD3 > div:last-child { - background-color: var(--darker) !important; } - - /* Disable background. */ - ._2U_Zc:before { - display: none !important; } - - /* Icon color. */ - span[class="_3CSsZ"] > svg > rect { - fill: var(--dark) !important; } - - - /* Landing page. */ - .app ._1Iexl ._3qlW9 { - /* box-shadow: 1px -3px 2px 0 var(--shadow) inset !important; */ - border: none !important; - background-color: var(--dark) !important; } - /* Status update. */ - /* .app ._3q4NP ._3qlW9::before { - content: 'Rewrite is done! A few old and a few new features coming up. Let me know if something is still broken. ^-^' !important; - left: 0 !important; - top: 0 !important; - bottom: 6px !important; - right: 0 !important; - position: absolute !important; - z-index: 98 !important; - width: 90% !important; - margin: 0 5% !important; - padding-top: 40vh !important; - text-align: center !important; - font-size: 20px !important; - color: var(--light) !important; - background: var(--dark) !important; } /**/ - /* Image. */ - .app ._1Iexl ._3qlW9 ._3BqNZ ._2Uo0Z { - max-width: 200px !important; - max-height: 200px !important; - border-radius: 50% !important; - filter: opacity(0.75) !important; - transition: opacity 1s ease !important; } - /* Text color. */ - .app ._1Iexl ._3qlW9 ._2MnNk * { - color: var(--light) !important; } - /* Accent bar. */ - .app ._1Iexl ._3qlW9:after { - border-top-color: var(--accent) !important; } - - - - /* Left drawer. */ - #app .app #side { - background-color: var(--darker) !important; } - - /* Chat list. */ - #side > header { - background-color: var(--darker) !important; } - - /* Notifications && more!! */ - #side ._3YewW { - box-shadow: inset 0 0 4px 0 var(--shadow) !important; - background-color: var(--accent) !important; } - /* Text color. */ - #side ._3YewW .l2BEH * { - color: var(--lighter) !important; } - - /* Search or start new chat. */ - #side ._3CPl4 { - border-bottom: 0px solid var(--dark) !important; - background-color: var(--darker) !important; - background-color: transparent !important; } - /* Label background. */ - #side ._3CPl4 .gQzdc label, - .gQzdc._3sdhb, - ._2dA13 ._15JHr .gQzdc { - border: 0px solid var(--dark) !important; - background-color: var(--dark) !important; } - /* Input element. */ - #side ._3CPl4 .gQzdc label input { - color: var(--light) !important; - background-color: transparent !important; } - /* Active. */ - #side ._3CPl4 .gQzdc._3sdhb { - background-color: var(--dark) !important; } - - /* New group and group info buttons. */ - ._2EXPL .dIyEr ._1jJLh, - ._2EXPL .dIyEr ._1WliW { - box-shadow: 0 0 8px -1px var(--shadow) !important; - background-color: var(--dark) !important; } - - /* Search results. */ - #side ._1AKfk { - color: var(--accent) !important; - background-color: var(--dark) !important; } - /* Matching results. */ - #side .matched-text { - color: var(--accent) !important; } - - /* Contacts wrapper. */ - #side ._1NrpZ, ._2fq0t ._1lIXT { - background-color: transparent !important; } - /* Contacts. */ - #side ._1NrpZ ._2EXPL, ._2fq0t ._66JgU { - transition: 200ms ease-in-out !important; - background-color: transparent !important; } - /* On event. */ - #side ._1NrpZ ._2EXPL._1f1zm, - #side ._1NrpZ ._2EXPL:hover { - background-color: var(--dark) !important; } - /* Text color. */ - #side ._1NrpZ [class*="_3j7s9"] * { - color: var(--light) !important; } - /* Avatar wrapper background. */ - ._1WliW { - box-shadow: 0 0 8px -1px var(--shadow) !important; - background-color: transparent !important; } - - /* New message indicator. */ - #side .OUeyt { - color: var(--lighter) !important; - background-color: var(--darker) !important; - box-shadow: inset 0 0 0 2px var(--accent) !important; } - - - /* Settings. */ - ._2fq0t { - background-color: var(--darker) !important; } - /* Header color. */ - ._2fq0t header { - min-height: 50px !important; - height: auto !important; - background-color: var(--darker) !important; } - /* Reset header height. */ - ._2fq0t header > div:first-child { - padding: 12px 0 !important; - height: auto !important; } - /* Transparent sections. */ - ._2fq0t ._1CRb5 { - box-shadow: none !important; - background-color: transparent !important; } - /* Highlighted sections. */ - ._2fq0t ._3hhmj ._1CkkN, - ._3UUn3 { - background-color: var(--dark) !important; } - /* Change profile picture. */ - ._2fq0t .WX_XW, - ._2fq0t ._2Lbqu { - background-color: rgba(0,0,0,0.5) !important; } - /* Text color. */ - ._2fq0t * { - color: var(--light) !important; } - /* Zoom in/out. */ - ._2LALH { - background-color: var(--dark) !important; } - - /* Option/select elements. */ - .uyEaY select { - border-color: var(--accent) !important; } - .uyEaY select option { - background-color: var(--dark) !important; } - - /* Archived chat image. */ - ._2fq0t ._2Lev2 { - background-color: var(--dark) !important; } - - /* Body. */ - ._2fq0t ._2sNbV ._1CkkN, - ._2fq0t ._2sNbV ._2EXPL { - background-color: transparent !important; } - /* On event. TODO: Fixed, but it might still overlap somewhere. */ - .k1feT ._2sNbV > ._1CkkN:hover, - ._2fq0t ._2sNbV ._1CkkN:hover { - background-color: var(--dark) !important; } - - /* New chat section. */ - ._2fq0t .gQzdc label { - border: none !important; - background-color: var(--dark) !important; } - /* Input element. */ - ._2fq0t .gQzdc label input { - background-color: transparent !important; } - - /* New group. */ - ._2fq0t ._39pS- { - background-color: transparent !important; } - /* Header. */ - ._2fq0t ._1AKfk { - background-color: var(--darker) !important; } - /* On event. */ - .k1feT ._2fq0t ._2EXPL._1f1zm, - .k1feT ._2fq0t ._2EXPL:hover { - background-color: var(--dark) !important; } - /* Search element */ - ._66JgU ._3_3Rs { - border-bottom: none !important; } - ._66JgU ._3_3Rs input, ._66JgU ._3_3Rs ::placeholder { - color: var(--lighter) !important; } - - - /* Dropdown menu. */ - ._2uLFU, ._1ArIP { - box-shadow: 0 2px 8px 0 var(--shadow), 0 2px 16px 0 var(--shadow) !important; - background-color: var(--darker) !important; } - /* On event. */ - ._2uLFU li:hover, ._2ULFU li._28zBA { - background-color: var(--dark) !important; } - /* Text color. */ - ._2uLFU div, _1ArIP div { - color: var(--light) !important; } - - - - /* Middle drawer. */ - .app ._1Iexl ._1GX8_ { - background-color: var(--dark) !important; } - /* Doodle background. TODO: Plans for the future. */ - .app .YUoyu { - filter: invert(100%) opacity(0.45) !important; } - - /* Jump to present button. */ - ._298R6 { - box-shadow: 0 4px 8px 2px var(--shadow) !important; - background-color: var(--darker) !important; } - /* Number of messages. */ - ._298R6 .OUeyt { - background-color: var(--accent) !important; } - - /* Header. */ - ._1Iexl #main header { - border: none !important; - background-color: var(--dark) !important; } - /* Text color. */ - ._1Iexl #main header ._1WBXd * { - color: var(--light) !important; } - - /* Footer. */ - ._1Iexl #main footer { - background-color: var(--darker) !important; } - /* Input wrapper. */ - #main footer > div { - color: var(--light) !important; - border: none !important; - /* border-bottom: 2px solid var(--dark) !important; */ - background-color: var(--dark) !important; } - /* Input element. */ - #main footer > div:nth-child(1) > div:nth-child(2) { - border: none !important; - color: var(--light) !important; - background-color: var(--darker) !important; } - /* Voice message duration. */ - ._30ie- { - color: var(--light) !important; } - - /* Unknown contact. */ - .TYhk9 { - border-color: var(--darker) !important; - background-color: var(--dark) !important; - box-shadow: 0 0px 8px 2px var(--shadow) !important; } - /* Buttons. */ - .TYhk9 ._1sB6s { - color: var(--light) !important; - background-color: var(--darker) !important; } - - /* Shared contact button colors. */ - .b332w { - color: var(--accent) !important; } - /* Shared contact text. */ - .AVd_p { - color: var(--lighter) !important; } - /* View contact. */ - ._36ApL { - background-color: transparent !important; } - - /* Hide 'Type a message' once focused. */ - ._3F6QL._2WovP.focused ._39LWd { - color: transparent !important; } - /* On event smoothness. */ - .pluggable-input.pluggable-input-compose > div:first-child { - transition: 150ms ease-in-out !important; } - - - /* Right drawer. */ - .app ._2yeJ5 ._2fq0t { - background-color: var(--darker) !important; } - /* Border-color. */ - .app ._2yeJ5 { - border-left-color: transparent !important; } - /* Header. */ - .app ._2yeJ5 ._2fq0t header { - background-color: var(--darker) !important; } - /* Text color. */ - .app ._2yeJ5 ._2fq0t header div { - color: var(--light) !important; } - - /* Group info sections. */ - .app ._2yeJ5 ._2fq0t ._1CRb5 { - /*box-shadow: 0 1px 3px shadow /**/ - box-shadow: none !important; - background-color: transparent !important; } - /* Group name. */ - .app ._2yeJ5 ._1CRb5 ._1DTd4, .media-body .CzI8E { - margin-bottom: 10px !important; - color: var(--light) !important; - border-bottom: 2px solid var(--accent) !important; } - /* User's name. */ - .app ._2yeJ5 .copyable-text { - color: var(--light) !important; } - /* Accent color text. */ - .app ._2yeJ5 ._1CRb5 ._1sYdX { - font-weight: 400 !important; - color: var(--accent) !important; } - /* Mute/Starred Messages. */ - .app ._2yeJ5 ._1CRb5 ._3LL06 { - color: var(--light) !important; } - - /* Group options. */ - .app ._2yeJ5 ._1CRb5 ._2EXPL, - .app ._2yeJ5 ._1CRb5 ._1CkkN { - transition: 200ms ease-in-out !important; - background-color: transparent !important; } - /* On event. */ - .app ._2yeJ5 ._1CRb5 ._2EXPL._3xj48:hover, - .app ._2yeJ5 ._1CRb5 ._1CkkN:hover { - background-color: var(--dark) !important; } - /* Text color. */ - .app ._2yeJ5 ._1CRb5 ._2EXPL * { - color: var(--light) !important; } - /* Admin color. */ - .app ._2yeJ5 ._1CRb5 ._2e8Mu { - border: 2px solid var(--accent) !important; } - - - /* Search messages. TODO: Apply this to all search elements. */ - ._2yeJ5 ._1iMEz, ._1iopp /*, ._2yeJ5 ._1iMEz._3sdhb*/ { - background-color: var(--darker) !important; } - /* Input wrapper. */ - ._1iMEz label { - border: 0px solid var(--dark) !important; - background-color: var(--dark) !important; } - ._1iMEz ._3sdhb label { - background-color: transparent !important; } - /* Input element. */ - ._1iMEz label input { - background-color: transparent !important; } - - /* Search messages body. */ - .YAPQk { - background-color: var(--darker) !important; } - /* Matching results. */ - ._2yeJ5 .matched-text { - color: var(--accent) !important; } - /* On event. */ - .YAPQk ._1f1zm > ._3j7s9, - .YAPQk ._3j7s9:hover { - background-color: var(--dark) !important; } - - - /* Starred messages. */ - ._2yeJ5 .ZwkQK, .ZwkQK { - background-color: var(--dark) !important; } - /* On event. */ - .starred-msg-wrapper, .MS-DH { - transition: 200ms ease-in-out !important; } - /* On event. */ - .MS-DH._2-mCk, .MS-DH._1baOM, .MS-DH.ZuHmv { - background-color: var(--dark) !important; } - - - /* Message info. */ - ._3FAwT { - background-color: var(--dark) !important; } - /* Doodle image. */ - ._3FAwT .pane-chat-tile { - filter: invert(100%) opacity(0.8) !important; } - /* Read by. */ - ._2yeJ5 ._2sNbV ._2HDl5 ._2wP_Y > div { - background-color: var(--dark) !important; } - - - /* Media/docs/links section. */ - ._2yeJ5 ._3b2Cf { - background-color: var(--darker) !important; } - /* Active indicator. */ - ._2yeJ5 ._3b2Cf:before { - background-color: var(--accent) !important; } - /* Selected image. */ - ._2Ry6_ ._2mlDB { - border-color: var(--accent) !important; } - /* Selected links. */ - .D6ZWG { - background-color: var(--darker) !important; } - /* Text color. */ - .D6ZWG ._1S4i5, - ._2Mvo8.fyJXn { - color: var(--lighter) !important; } - - /* Media viewer. */ - #app ._1zcz2, ._3_R6X { - background-color: rgba(0,0,0,0.85) !important; } - /* Chevron background. */ - ._2-IeP { - background-color: var(--darker) !important; } - /* Preloader. */ - ._3dGYA { - background-color: var(--darker) !important; } - - /* Header. */ - #app ._1zcz2 ._2YdsD, ._3_R6X ._1XwnX { - background-color: var(--dark) !important; } - /* Inner element. */ - #app ._1zcz2 ._2EXPL { - background-color: transparent !important; } - /* Text color. */ - #app ._1zcz2 ._2EXPL ._3j7s9 *, - ._3_R6X ._12oAB, - ._1XwnX * { - color: var(--light) !important; } - - /* Footer. */ - ._3Qh77 { - border: none !important; - background-color: var(--darker) !important; } - /* Selected image. */ - ._3Qh77 ._1xQmx { - transform: scale(1) !important; - border: 3px solid var(--accent) } - html[dir=ltr] .UPNDG:hover:not(._1xQmx) { - border: 0px solid var(--accent) !important; - outline: 3px solid var(--accent) !important; } - - - - /* Message bubbles. */ - .message-in, .message-out, .message { - background-color: var(--darker) !important; } - - /* Message text color. */ - .message-in .selectable-text, - .message-out .selectable-text, - .quoted-mention, - ._1upWv { - color: var(--light) !important; } - - /* Forwarded message. */ - ._15aTv { - color: var(--lighter) !important; } - - /* Mentions. */ - .message-in .matched-mention, - .message-out .matched-mention, - .message-out .matched-mention .at-symbol { - color: var(--accent) !important; } - - /* Message meta text color. */ - [class*="message-"] ._2f-RV *, [class*="message-"] ._2f-RV *, - [class*="message-"] ._1_Gu6 *, [class*="message-"] ._27K_5 *, - [class*="message-"] ._1DZAH *, [class*="message-"] ._3cMIj * { - color: var(--light) !important; } - - /* Image/gif/video meta wrapper. */ - .KYpDv ._1DZAH { - bottom: 8px !important; - padding: 2px 5px !important; - border-radius: 4px !important; - background-color: var(--shadow) !important; } - /* Text color. */ - .KYpDv ._1DZAH ._3EFt_ { - margin-top: 0px !important; - color: var(--lighter) !important; } - - /* Message options. */ - ._1i1U7 { - /*transition: 200ms ease-in-out !important;/**/ - background: linear-gradient(to right, transparent 0%, var(--darker) 40%) !important; } - /* Smooth transition. */ - .message span:last-child div { - transition: 50ms ease-in-out !important; } - - /* Typing... */ - .vdXUe { - color: var(--accent) !important; } - - /* System messages. */ - .Zq3Mc { - box-shadow: 0 2px 8px 0px var(--shadow) !important; - border-bottom: 3px solid var(--shadow) !important; - background-color: var(--darker) !important; } - /* Text color and shadows. */ - .Zq3Mc * { - text-shadow: none !important; - color: var(--lighter) !important; } - /* New message. */ - #main ._1mq8g { - border: none !important; - background-color: transparent !important; } - /* X unread messages. */ - #main ._1mq8g .L89LI { - box-shadow: 0 0 8px 0 var(--shadow) !important; - color: var(--light) !important; - background-color: var(--darker) !important; } - - - /* Document embeds. */ - ._1vKRe { - border-color: var(--darker) !important; } - /* Embed background. */ - ._12xX7 { - background-color: var(--dark) !important; } - /* Embed text color. */ - ._12xX7 * { - color: var(--light) !important; } - - /* Link embeds. */ - ._1sGGp._2nFG1, ._2lwig._2nFG1 { - background-color: var(--dark) !important; } - /* Text color. */ - ._1sGGp._2nFG1 *, ._2lwig._2nFG1 * { - color: var(--light) !important; } - /* Link options. */ - ._2DNgV._2Cju4, .jZ4tp._2Cju4 { - background: none !important; } - - - /* Reply section. (= */ - footer .rstyJ { - box-shadow: 0 0px 8px 0 var(--darker) !important; - background-color: var(--darker) !important; } - /* Fix margins. */ - footer .rstyJ > div:first-child { - margin: 0 0 5px 10px !important; - background-color: transparent !important; } - /* Reply content. */ - footer .rstyJ > div:first-child > div { - background-color: var(--dark) !important; } - /* Close button. */ - footer .rstyJ > div:last-child { - position: relative !important; - margin: 0 8px 5px 8px !important; - background-color: transparent !important; } - /* Make the button larger. */ - footer .rstyJ > div:last-child > div svg { - padding: 18px !important; - border-radius: 6px !important; - background-color: var(--dark) !important; } - - /* Mention group members. */ - .Uukb4 { - color: var(--light) !important; - border-left: none !important; - background-color: var(--dark) !important; } - /* Wrapper. */ - .Uukb4 ._3v_lq { - transition: 300ms ease-in-out !important; - background-color: transparent !important; } - /* Active. */ - .Uukb4 .j5Hcb._3v_lq, - .Uukb4 ._3v_lq:hover { - background-color: var(--darker) !important; } - - - /* Select messages. */ - #main ._3D9Wd { - background-color: var(--shadow) !important; } - /* Hover over messages. */ - #main ._1o1sm { - transition: 100ms ease-in-out !important; } - /* Selected message. */ - #main ._1o1sm:hover, #main ._1o1sm._2nOMz { - background-color: var(--shadow) !important; } - - /* Selected icon. */ - #main ._1VD7W { - border-color: var(--accent) !important; - background-color: var(--accente) !important; } - /* Checkmark. */ - #main ._1VD7W ._1KfC8 { - border-bottom-color: var(--accent) !important; - border-right-color: var(--accent) !important; } - - /* Footer/control/options. */ - #main ._2FsQ8, #main ._3PWNn, #main ._3XpR2 { - background-color: var(--darker) !important; } - /* Text color. */ - #main ._2FsQ8 span, #main ._3XpR2 { - color: var(--light) !important; } - - - - /* Bubble tails -- experimental. */ - .tail .tail-container { - width: 0px !important; - height: 10px !important; - z-index: 0 !important; - border-top: 12px solid var(--darker) !important; - background: none !important; } - .tail.message-in .tail-container { - left: -10px !important; top: 0px; - border-left: 10px solid transparent !important; - border-radius: 5px 0 0 0 !important; } - .tail.message-out .tail-container { - right: -10px !important; top: 0px; - border-right: 10px solid transparent !important; - border-radius: 0 5px 0 0 !important; } - - /* Disable tails everywhere. */ - /* Enabled. */ - - /* Disable tails everywhere except in chat. */ - .starred-msg-wrapper .tail-container, - .message-gallery .tail-container, - .MS-DH .tail-container { - display: none !important; } - /* Rounded corners. */ - .message-gallery.tail-override-left, - .MS-DH .tail-override-left { - border-radius: 7.5px !important; } - - /** Stickers. */ - ._1rK-b { - background: none !important; } - /* Sender. */ - ._3JaNE ._2R8MP { - background-color: var(--darker) !important; } - /* Time/status. */ - ._3JaNE ._2Ll5c { - background-color: var(--darker) !important; } - /* Reset message menu. */ - ._1qhoQ { - top: 0 !important; - right: 0 !important; - background: none !important; } - /* Icon background. */ - .YiYMT { background-color: transparent !important; } - - /* Temporary fix for emoji container. */ - #main footer > div:nth-child(2) > div { - border: 0 !important; } - /* Emoji/gif/stickers background. */ - ._1UbeR, ._2HBs4, ._3Jgri, ._3Jgri > ._2z7kg { - background-color: var(--dark) !important; } - - /* Emoji menu. */ - ._3ZkhL .Sbkt2, - ._3ZkhL .Sbkt2 > span > div, - ._3ETD3, .R0lQ6 { - background-color: var(--dark) !important; } - /* Emoji tabs. */ - ._3ZkhL ._2ByZq, - ._3ZkhL ._1qUma, - ._1qUma { - background: var(--darker) !important; } - /* Tab indicator. */ - ._2NQtS, - .YbzIC .YGHyX, - ._1Wbpa { - background-color: var(--accent) !important; } - /* Active button. */ - ._1x_c3.bRYFY path { - fill: var(--accent) !important; } - - /* Search emojis. */ - ._3ZkhL label, - ._2rR_l, - ._2vjPO { - background-color: var(--dark) !important; } - /* Text color. */ - ._3ZkhL label input, - ._2vjPO input, - .GclUX, - ._3Ztfl { - color: var(--light) !important; } - - /* Gif preloader background. */ - .zl5TR { - /* border: 2px dashed !important; */ - background-color: var(--darker) !important; } - - /* Preview. */ - ._1drQ- { - background-color: var(--dark) !important; } - /* Header. */ - ._1drQ- header { - background-color: var(--accent) !important; } - /* Text color. */ - ._1drQ- header *, ._1drQ- .media-body * { - color: var(--lighter) !important; } - /* Footer. */ - ._1drQ- .media-collection { - background-color: var(--darker) !important; } - /* Button. */ - ._1drQ- .media-collection .btn-fill, ._1drQ- ._3hV1n { - color: var(--lighter) !important; - background-color: var(--accent) !important; } - - - /* Emoji-wanna-be-round. */ - .emojik { - opacity: var(--emojiOpacity) !important; - transition: transform 200ms cubic-bezier(0.59, 0.57, 0.39, 1.04) !important; - clip-path: circle(47%) !important; } - /* Selected emoji. */ - .emojik:focus, .emojik:hover, .emojik.selected { - box-shadow: none !important; - opacity: 1 !important; - transform: scale(1.15) !important; } - - /* Emoji quick selection. */ - ._1k6Uw { - border: 0 !important; - border-bottom: 1px solid var(--darker) !important; - background-color: var(--darker) !important; } - /* Emoji race color popup. */ - ._1ArIP, ._1ArIP ._1v2rQ { - background-color: var(--dark) !important; } - /* Separator. */ - ._1ArIP ._2WvMb:first-child { - border-right: 2px solid var(--accent) !important; } - /* Emoji menu triangle. */ - ._1v2rQ { - background-color: var(--dark) !important; } - - - - /* Backdrop. */ - ._3gUiM, #startup, #initial_startup { - background-color: var(--dark) !important; } - /* Modal. */ - ._3gUiM ._2dA13 ._1CnF3, - ._2dA13 ._18wuJ, ._2dA13 .IuYNx { - box-shadow: 0 0 0 1px var(--darker), 0 8px 16px 0px var(--shadow) !important; - background-color: var(--darker) !important; } - /* Selected contact. */ - ._3gUiM ._2EXPL._1f1zm, - ._3gUiM ._2EXPL:hover, - ._2EXPL._3ntaf:hover { - background-color: var(--dark) !important; } - /* Text color. */ - ._3gUiM ._1CnF3 * { - color: var(--light) !important; } - /* Header/footer. */ - ._2dA13 header, - ._2dA13 .iHLo1 { - background-color: var(--darker) !important; } - /* Empty element below search bar. */ - ._2fq0t span._3fOoY { - display: none !important; } - - - /* Buttons. */ - .PNlAR, ._3hV1n, ._2Gki6, ._13iu_ { - color: var(--lighter) !important; - background-color: var(--accent) !important; } - /* Muted checkbox color. */ - ._1VD7W { - border-color: var(--accent) !important; - background-color: var(--accent) !important; } - /* Buttons. */ - .PNlAR:hover, ._1WZqU:hover { - background-color: var(--dark) !important; } - - /* Drop items. (-: */ - .drag-drop, ._2n-96 { - background-color: var(--dark) !important; } - /* Footer. */ - ._3nuGo { - background-color: var(--darker) !important; } - /* Border. */ - ._2n-96 ._3L-be { - border: 5px dashed var(--accent) !important; - color: var(--light) !important; } - - /* Add file icon. */ - .GpvML, ._1ypOz { - background-color: var(--dark) !important; } - /* Border. */ - ._2gZno::after { - background-color: var(--accent) !important; } - - /* Accent border. */ - .CzI8E, ._31WRs ._1DTd4 { - border-bottom-color: var(--accent) !important; } - /* Text color. */ - ._7HWvs { - color: var(--light) !important; } - - - - /* Status area! */ - .app-wrapper-web ._3sacU { - background-color: rgba(0,0,0,0.6) !important; } - - /* Normal icon. */ - span[data-icon="status-v3"] > svg > path:first-child { - opacity: 0.55 !important; } - /* Unread status. */ - span[data-icon="status-v3-unread"] > svg > path:first-child { - opacity: 1 !important; } - - /* Status modal! */ - /*.app-wrapper-web ._1abwg { - max-width: 1396px !important; - height: calc(100% - 36px) !important; - margin-left: auto !important; - margin-right: auto !important; - top: 20px !important; }/**/ - - /* Left hand side. */ - ._3sacU .bZ3B9 { - background-color: var(--darker) !important; } - /* Text color. */ - ._3sacU .bZ3B9 ._35Ai0, - ._3sacU .bZ3B9 ._1wjpf { - color: var(--lighter) !important; } - /* Dimmed text. */ - ._3sacU .bZ3B9 ._3_-c_, - ._3sacU .bZ3B9 ._1Ou9Y, - ._3sacU .bZ3B9 ._itDl { - color: var(--light) !important; } - - /* Right hand side. */ - ._3sacU ._1abwg { - background-color: var(--dark) !important; } - /* Text color. */ - ._3sacU ._1abwg ._2LuDL { - color: var(--light) !important; } - - /* Reply to status. */ - .C534L ._3PmkG { - border-radius: 5px !important; - background-color: var(--dark) !important; } - - - - /* REMOVE STUFF. */ - /* Remove pseudo elements. */ - [class*="chat"]:before, [class*="chat"]:after, - .gQzdc:after, ._1CkkN:before, ._3AwwN:after, - .MS-DH:before, .MS-DH:after, ._3YwRO { - display: none !important; } - /* Remove ONLY borders. */ - ._1CkkN ._10xEB, ._14oqx .DcItJ, - html[dir] ._2EXPL:after, ._3j7s9, - ._1fkhx, .chat-body, ._3hhmj, ._2nmDZ { - border: none !important; } - /* Some random iframe? */ - object { display: none !important; } - - - - /* Global icon color. */ - span:not([data-icon="image"]) > svg > path { - transition: 200ms ease !important; - fill: var(--icon) !important; } - /* On event. */ - span:not([data-icon="image"]):hover > svg > path { - /* fill: var(--accent) !important; */ - opacity: 0.3 !important; } - - /* Upload files. */ - .GK4Lv::after { - box-shadow: 0 1px 2px var(--shadow), 0 4px 8px var(--shadow) !important; } - - /* Default profile picture background. */ - span[data-icon="default-user"] svg > path:first-child, - span[data-icon="default-group"] svg > path:first-child, - span[data-icon="default-broadcast"] svg > path:first-child { - fill: var(--dark) !important; } - - span[data-icon="default-user"] svg > g > path:last-child, - span[data-icon="default-group"] svg > path:last-child, - span[data-icon="default-broadcast"] svg > path:last-child { - opacity: 0.7 !important; - fill: var(--icon) !important; } - - /* Sent message. */ - span[data-icon="msg-dblcheck"] svg path, - span[data-icon="status-dblcheck"] svg path, - span[data-icon="msg-check"] svg path, - span[data-icon="status-check"] svg path { - fill: var(--light) !important; - opacity: 0.5 !important; } - - /* Sent AND seen message. */ - span[data-icon="msg-dblcheck-ack"] svg path, - span[data-icon="status-dblcheck-ack"] svg path, - span[data-icon="msg-dblcheck-ack-light"] svg path, - span[data-icon="status-v3-unread"] > svg > path:last-child { - fill: var(--accent) !important; - opacity: 1 !important; } - - /* Misc icons fix. */ - span[data-icon="chevron-left"] svg path, - span[data-icon="chevron-right"] svg path, - span[data-icon="x-viewer"] svg path, - span[data-icon="download"] svg path, - span[data-icon="forward"] svg path, - span[data-icon="star-btn"] svg path, - span[data-icon="audio-file"] svg path:last-child, - span[data-icon="new-group"] svg path, - span[data-icon="add-user-light"] svg path, - span[data-icon="link"] svg path, - span[data-icon="ptt-in-blue"] svg path:first-child, - span[data-icon="ptt-out-blue"] svg path:first-child { - fill: var(--icon) !important; } - - /* Audio message icons. */ - span[data-icon="ptt-in-blue"] svg path:first-child, - span[data-icon="ptt-out-blue"] svg path:first-child { - fill: transparent !important; } - - /* Logo. */ - ._3CSsZ > svg > path:first-child { - fill: var(--accent) !important; } - span[data-icon="logo"] svg path:nth-child(1) { - fill: white !important; } - span[data-icon="alert-phone"] svg path:first-child, - span[data-icon="logo"] svg path:nth-child(1n+2), - span[data-icon="whatsapp-logo"] svg path:first-child { - fill: var(--darker) !important; } - - /* GIF icon opacity. */ - span[data-icon="emoji-gifs"] svg path { - fill: var(--icon) !important; - fill-opacity: 1 !important; } - - /* Be cautious icons. */ - span[data-icon="exit"] svg path, - span[data-icon="thumbs-down"] svg path, - span[data-icon="delete-danger"] svg path { - fill: var(--mred) !important; } - - /* Audio message. */ - span[data-icon="audio-file"] svg path { - fill: rgba(255, 173, 31, 0.8) !important; } - /* Audio length bar. */ - ._22cMG.fS1bA .nDKsM { - background-color: var(--accent) !important; } - /* Slider thumb. */ - input[type=range]::-webkit-slider-thumb { - cursor: pointer !important; - background: var(--accent) !important; } - - /* Rounded buttons. */ - span svg > path[fill="#00BFA5"] { - fill: var(--accent) !important; } - - /* Disable background image on small resolutions. */ - @media screen and (max-width: 1441px) { - ._1FKgS::after { + --dark: rgb(39, 44, 53) !important; + --darker: rgb(31, 35, 42) !important; + --light: rgb(209, 209, 209) !important; + --lighter: rgb(233, 233, 233) !important; + --accent: rgb(114, 137, 218) !important; + --icon: rgb(225, 225, 225) !important; + --shadow: rgba(0, 0, 0, .12) !important; + --mred: rgb(163, 82, 91) !important; + --mgreen: rgb(112, 163, 82) !important; + --mblue: rgb(82, 122, 163) !important; + --image: url(https://media.discordapp.net/attachments/310799529161129984/417408747812552715/zilesanamin.jpg) !important; + --emojiOpacity: 0.75 !important; + --version: "WhatsApp by Mew v1.3.0" !important; + --message: "Updated on 20th of February. " !important; + --changes: "See the changelog at: https://github.com/vednoc/onyx/releases" !important; +} + +/* Body reset. */ +body { + background: none !important; + background-color: var(--dark) !important; +} + +/* Scrollbar track. */ +*::-webkit-scrollbar-track { + background-color: var(--shadow) !important; +} +/* Scrollbar thumb. */ +*::-webkit-scrollbar-thumb { + background-color: var(--accent) !important; +} +* { + scrollbar-width: thin !important; + scrollbar-color: var(--accent) var(--shadow) !important; +} + +/* Highlight selection. */ +::selection { + color: var(--light) !important; + background-color: var(--accent) !important; +} +::-moz-selection { + color: var(--light) !important; + background-color: var(--accent) !important; +} +/* Input placeholders. */ +::-webkit-input-placeholder { + color: var(--lighter) !important; +} + +/* Progress. */ +progress[value]::-webkit-progress-bar { + background: var(--darker) !important; +} +/* Value. */ +progress[value]::-webkit-progress-value { + background: var(--accent) !important; +} +progress { + background: var(--darker) !important; +} +::-moz-progress-bar { + background: var(--accent) !important; +} + +/* App wrapper. */ +#app .app { + background: none !important; + background-color: var(--dark) !important; +} + +/* Accent background. */ +.app-wrapper::after { + background: none !important; +} + + +/* Log-in page. */ +._2NbD3 { + border: 1px solid var(--shadow) !important; + box-shadow: 0 8px 32px 0 var(--shadow) !important; + background-color: var(--darker) !important; +} +/* Text color. */ +._2NbD3 * { + color: var(--light) !important; +} +/* Reload QR code. */ +.HnNfm { + background-color: var(--darker) !important; +} +/* Fix QR code. */ +._2NbD3 .XSdna { + border: 3px solid white !important; +} +/* Tutorial. */ +._2NbD3 > div:last-child { + background-color: var(--darker) !important; +} +/* Loader. */ +#startup svg > circle { + stroke: var(--lighter) !important; +} + +/* Disable background. */ +._2U_Zc:before { + display: none !important; +} + +/* Icon color. */ +span[class="_3CSsZ"] > svg > rect { + fill: var(--dark) !important; +} + + +/* Landing page. */ +.app ._1Iexl ._3qlW9 { + border: none !important; + background-color: var(--dark) !important; +} +/* Image. */ +.app ._1Iexl ._3qlW9 ._3BqNZ ._2Uo0Z { + max-width: 200px !important; + max-height: 200px !important; + border-radius: 50% !important; + filter: opacity(0.75 + ) !important; + transition: opacity 1s ease !important; +} +/* Text color. */ +.app ._1Iexl ._3qlW9 ._2MnNk * { + color: var(--light) !important; +} +/* Accent bar. */ +.app ._1Iexl ._3qlW9:after { + border-top-color: var(--accent) !important; +} +/* Hide the text. */ +._1ClcF { + font-size: 0px !important; +} +/** Theme note. */ +.app ._1Iexl ._1ClcF::before { + display: block !important; + margin-bottom: -20px !important; + font-size: 16px !important; + content: var(--message) var(--changes) !important; +} +/** Theme info. */ +.app ._1Iexl ._1ClcF::after { + display: block !important; + margin-top: 10px !important; + padding-top: 10px !important; + font-size: 16px !important; + content: var(--version) !important; + border-top: 1px solid var(--darker) !important; +} + +/* Left drawer. */ +#app .app #side { + background-color: var(--darker) !important; +} + +/* Chat list. */ +#side > header { + background-color: var(--darker) !important; +} + +/* Notifications && more!! */ +#side ._3YewW { + box-shadow: inset 0 0 0 2px var(--accent) !important; + background-color: var(--darker) !important; +} +/* Text color. */ +#side ._3YewW .l2BEH * { + color: var(--lighter) !important; +} + +/* Search or start new chat. */ +#side ._3CPl4 { + border-bottom: 0px solid var(--dark) !important; + background-color: var(--darker) !important; + background-color: transparent !important; +} +/* Label background. */ +#side ._3CPl4 .gQzdc label, +.gQzdc._3sdhb, +._2dA13 ._15JHr .gQzdc { + border: 0px solid var(--dark) !important; + background-color: var(--dark) !important; +} +/* Input element. */ +#side ._3CPl4 .gQzdc label input { + color: var(--light) !important; + background-color: transparent !important; +} +/* Active. */ +#side ._3CPl4 .gQzdc._3sdhb { + background-color: var(--dark) !important; +} + +/* New group and group info buttons. */ +._2EXPL .dIyEr ._1jJLh, +._2EXPL .dIyEr ._1WliW { + box-shadow: 0 0 8px -1px var(--shadow) !important; + background-color: var(--dark) !important; +} + +/* Search results. */ +#side ._1AKfk { + color: var(--accent) !important; + background-color: var(--dark) !important; +} +/* Matching results. */ +#side .matched-text { + color: var(--accent) !important; +} + +/* Contacts wrapper. */ +#side ._1NrpZ, +._2fq0t ._1lIXT { + background-color: transparent !important; +} +/* Contacts. */ +#side ._1NrpZ ._2EXPL, +._2fq0t ._66JgU { + transition: 200ms ease-in-out !important; + background-color: transparent !important; +} +/* On event. */ +#side ._1NrpZ ._2EXPL._1f1zm, +#side ._1NrpZ ._2EXPL:hover { + background-color: var(--dark) !important; +} +/* Text color. */ +#side ._1NrpZ [class*="_3j7s9"] * { + color: var(--light) !important; +} +/* Avatar wrapper background. */ +._1WliW { + box-shadow: 0 0 8px -1px var(--shadow) !important; + background-color: transparent !important; +} + +/* New message indicator. */ +#side .OUeyt { + color: var(--lighter) !important; + background-color: var(--darker) !important; + box-shadow: inset 0 0 0 2px var(--accent) !important; +} + + +/* Settings. */ +._2fq0t { + background-color: var(--darker) !important; +} +/* Header color. */ +._2fq0t header { + min-height: 50px !important; + height: auto !important; + background-color: var(--darker) !important; +} +/* Reset header height. */ +._2fq0t header > div:first-child { + padding: 12px 0 !important; + height: auto !important; +} +/* Reset header title in left/right drawers. */ +._2fq0t ._1xGbt { + margin-top: 2px !important; + font-size: 16px !important; +} +/* Transparent sections. */ +._2fq0t ._1CRb5 { + box-shadow: none !important; + background-color: transparent !important; +} +/* Highlighted sections. */ +._2fq0t ._3hhmj ._1CkkN, +._3UUn3 { + background-color: var(--dark) !important; +} +/* Change profile picture. */ +._2fq0t .WX_XW, +._2fq0t ._2Lbqu { + background-color: rgba(0, 0, 0, 0.5) !important; +} +/* Text color. */ +._2fq0t * { + color: var(--light) !important; +} +/* Zoom in/out. */ +._2LALH { + background-color: var(--dark) !important; +} + +/* Option/select elements. */ +.uyEaY select { + border-color: var(--accent) !important; +} +.uyEaY select option { + background-color: var(--dark) !important; +} + +/* Archived chat image. */ +._2fq0t ._2Lev2 { + background-color: var(--dark) !important; +} + +/* Body. */ +._2fq0t ._2sNbV ._1CkkN, +._2fq0t ._2sNbV ._2EXPL { + background-color: transparent !important; +} +/* On event. TODO: Fixed, but it might still overlap somewhere. */ +.k1feT ._2sNbV > ._1CkkN:hover, +._2fq0t ._2sNbV ._1CkkN:hover { + background-color: var(--dark) !important; +} + +/* New chat section. */ +._2fq0t .gQzdc label { + border: none !important; + background-color: var(--dark) !important; +} +/* Input element. */ +._2fq0t .gQzdc label input { + background-color: transparent !important; +} + +/* New group. */ +._2fq0t ._39pS- { + background-color: transparent !important; +} +/* Header. */ +._2fq0t ._1AKfk { + background-color: var(--darker) !important; +} +/* On event. */ +.k1feT ._2fq0t ._2EXPL._1f1zm, +.k1feT ._2fq0t ._2EXPL:hover { + background-color: var(--dark) !important; +} +/* Search element */ +._66JgU ._3_3Rs { + border-bottom: none !important; +} +._66JgU ._3_3Rs input, +._66JgU ._3_3Rs ::placeholder { + color: var(--lighter) !important; +} + +/** Context/dropdown menu. */ +._1RQfk { + background-color: var(--darker) !important; + box-shadow: 0 4px 16px 0 var(--shadow) !important; +} +._1RQfk li:hover, +._1RQfk li:hover div { + color: var(--accent) !important; + background-color: var(--dark) !important; +} +._1RQfk div, +._1ArIP div { + color: var(--light) !important; +} + +/* Middle drawer. */ +.app ._1Iexl ._1GX8_ { + background-color: var(--dark) !important; +} +/* Doodle background. TODO: Plans for the future. */ +.app .YUoyu { +filter: invert(100%) opacity(0.45) !important; } +/* Jump to present button. */ +._298R6 { + box-shadow: 0 4px 8px 2px var(--shadow) !important; + background-color: var(--darker) !important; +} +/* Number of messages. */ +._298R6 .OUeyt { + background-color: var(--accent) !important; +} + +/* Header. */ +._1Iexl #main header { + border: none !important; + background-color: var(--dark) !important; +} +/* Text color. */ +._1Iexl #main header ._1WBXd * { + color: var(--light) !important; +} + +/* Header text color. #22 */ +#main > header > div span[title] { + color: var(--light) !important; +} +/* Header separator. */ +#main > header::after { + border-bottom-color: var(--darker) !important; + background-color: transparent !important; +} + +/* Footer. */ +._1Iexl #main footer { + border-top: 1px solid var(--darker) !important; + background-color: var(--darker) !important; +} +/* Input wrapper. */ +#main footer > div { + color: var(--light) !important; + border: none !important; + /* border-bottom: 2px solid var(--dark) !important; */ + background-color: var(--dark) !important; +} +/* Input element. */ +#main footer > div:nth-child(1) > div:nth-child(2) { + border: none !important; + color: var(--light) !important; + background-color: var(--darker) !important; +} +/* Voice message duration. */ +._30ie- { + color: var(--light) !important; +} + +/* Unknown contact. */ +.TYhk9 { + border-color: var(--darker) !important; + background-color: var(--dark) !important; + box-shadow: 0 0px 8px 2px var(--shadow) !important; +} +/* Buttons. */ +.TYhk9 ._1sB6s { + color: var(--light) !important; + background-color: var(--darker) !important; +} + +/* Shared contact button colors. */ +.b332w { + color: var(--accent) !important; +} +/* Shared contact text. */ +.AVd_p { + color: var(--lighter) !important; +} +/* View contact. */ +._36ApL { + background-color: transparent !important; +} + +/* Hide 'Type a message' once focused. */ +._3F6QL._2WovP.focused ._39LWd { + color: transparent !important; +} +/* Placeholder text color. */ +._39LWd { + color: var(--lighter) !important; +} +/* On event smoothness. */ +.pluggable-input.pluggable-input-compose > div:first-child { + transition: 150ms ease-in-out !important; +} + + +/* Right drawer. */ +.app ._2yeJ5 ._2fq0t { + background-color: var(--darker) !important; +} +/* Border-color. */ +.app ._2yeJ5 { + border-left-color: transparent !important; +} +/* Header. */ +.app ._2yeJ5 ._2fq0t header { + background-color: var(--darker) !important; +} +/* Text color. */ +.app ._2yeJ5 ._2fq0t header div { + color: var(--light) !important; +} + +/* Group info sections. */ +.app ._2yeJ5 ._2fq0t ._1CRb5 { + /*box-shadow: 0 1px 3px shadow /**/ + box-shadow: none !important; + background-color: transparent !important; +} +/* Group name. */ +.app ._2yeJ5 ._1CRb5 ._1DTd4, +.media-body .CzI8E { + margin-bottom: 10px !important; + color: var(--light) !important; + border-bottom: 2px solid var(--accent) !important; +} +/* User's name. */ +.app ._2yeJ5 .copyable-text { + color: var(--light) !important; +} +/* Accent color text. */ +.app ._2yeJ5 ._1CRb5 ._1sYdX { + font-weight: 400 !important; + color: var(--accent) !important; +} +/* Mute/Starred Messages. */ +.app ._2yeJ5 ._1CRb5 ._3LL06 { + color: var(--light) !important; +} + +/* Group options. */ +.app ._2yeJ5 ._1CRb5 ._2EXPL, +.app ._2yeJ5 ._1CRb5 ._1CkkN { + transition: 200ms ease-in-out !important; + background-color: transparent !important; +} +/* On event. */ +.app ._2yeJ5 ._1CRb5 ._2EXPL._3xj48:hover, +.app ._2yeJ5 ._1CRb5 ._1CkkN:hover { + background-color: var(--dark) !important; +} +/* Text color. */ +.app ._2yeJ5 ._1CRb5 ._2EXPL * { + color: var(--light) !important; +} +/* Admin color. */ +.app ._2yeJ5 ._1CRb5 ._2e8Mu { + border: 2px solid var(--accent) !important; +} + + +/* Search messages. TODO: Apply this to all search elements. */ +._2yeJ5 ._1iMEz, +._1iopp/*, ._2yeJ5 ._1iMEz._3sdhb*/ +{ + background-color: var(--darker) !important; +} +/* Input wrapper. */ +._1iMEz label { + border: 0px solid var(--dark) !important; + background-color: var(--dark) !important; +} +._1iMEz ._3sdhb label { + background-color: transparent !important; +} +/* Input element. */ +._1iMEz label input { + background-color: transparent !important; +} + +/* Search messages body. */ +.YAPQk { + background-color: var(--darker) !important; +} +/* Matching results. */ +._2yeJ5 .matched-text { + color: var(--accent) !important; +} +/* On event. */ +.YAPQk ._1f1zm > ._3j7s9, +.YAPQk ._3j7s9:hover { + background-color: var(--dark) !important; +} + +/* Search messages. */ +#pane-side ._2EXPL { + background-color: transparent !important; +} + +/* Starred messages. */ +._2yeJ5 .ZwkQK, +.ZwkQK { + background-color: var(--dark) !important; +} +/* On event. */ +.starred-msg-wrapper, +.MS-DH { + transition: 200ms ease-in-out !important; +} +/* On event. */ +.MS-DH._2-mCk, +.MS-DH._1baOM, +.MS-DH.ZuHmv { + background-color: var(--dark) !important; +} + + +/* Message info. */ +._3FAwT { + background-color: var(--dark) !important; +} +/* Doodle image. */ +._3FAwT .pane-chat-tile { + filter: invert(100%) opacity(0.8) !important; +} +/* Read by. */ +._2yeJ5 ._2sNbV ._2HDl5 ._2wP_Y > div { + background-color: var(--dark) !important; +} + + +/* Media/docs/links section. */ +._2yeJ5 ._3b2Cf { + background-color: var(--darker) !important; +} +/* Active indicator. */ +._2yeJ5 ._3b2Cf:before { + background-color: var(--accent) !important; +} +/* Selected image. */ +._2Ry6_ ._2mlDB { + border-color: var(--accent) !important; +} +/* Selected links. */ +.D6ZWG { + background-color: var(--darker) !important; +} +/* Text color. */ +.D6ZWG ._1S4i5, +._2Mvo8.fyJXn { + color: var(--lighter) !important; +} + +/** Media viewer. */ +#app ._1zcz2, +._3_R6X { + background-color: transparent !important; +} +/* Pseudo-element background. */ +#app ._1zcz2::before, +._3_R6X::before { + content: "" !important; + position: absolute !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + background-color: var(--dark) !important; + opacity: 0.8 !important; + z-index: -1 !important; +} +/* Chevron/preloader background. */ +._2-IeP, +._3dGYA { + background-color: var(--darker) !important; +} + +/* Header. */ +#app ._1zcz2 ._2YdsD, +._3_R6X ._1XwnX { + background-color: var(--dark) !important; +} +/* Inner element. */ +#app ._1zcz2 ._2EXPL { + background-color: transparent !important; +} +/* Text color. */ +#app ._1zcz2 ._2EXPL ._3j7s9 *, +._3_R6X ._12oAB, +._1XwnX * { + color: var(--light) !important; +} + +/* Footer. */ +._3Qh77 { + border: none !important; + background-color: var(--darker) !important; +} +/* Selected image. */ +._3Qh77 ._1xQmx { + transform: scale(1) !important; + border: 3px solid var(--accent) +} +html[dir=ltr] .UPNDG:hover:not(._1xQmx) { + border: 0px solid var(--accent) !important; + outline: 3px solid var(--accent) !important; +} + + + +/* Message bubbles. */ +.message-in, +.message-out, +.message { + background-color: var(--darker) !important; +} + +/* Message text color. */ +.message-in .selectable-text, +.message-out .selectable-text, +.quoted-mention, +._1upWv { + color: var(--light) !important; +} + +/* Use accent color for links. #20 */ +a[href].selectable-text { + color: var(--accent) !important; +} + +/* Forwarded message. */ +._15aTv { + color: var(--lighter) !important; +} + +/* Phone numbers of users that aren't your contacts. */ +._3Ye_R._1wjpf._1OmDL { + color: var(--lighter) !important; +} + +/* Mentions. */ +.message-in .matched-mention, +.message-out .matched-mention, +.message-out .matched-mention .at-symbol { + color: var(--accent) !important; +} + +/* Message meta text color. */ +[class*="message-"] ._2f-RV *, +[class*="message-"] ._2f-RV *, +[class*="message-"] ._1_Gu6 *, +[class*="message-"] ._27K_5 *, +[class*="message-"] ._1DZAH *, +[class*="message-"] ._3cMIj * { + color: var(--light) !important; +} + +/* Image/gif/video meta wrapper. */ +.KYpDv ._1DZAH { + bottom: 8px !important; + padding: 2px 5px !important; + border-radius: 4px !important; + background-color: var(--shadow) !important; +} +/* Text color. */ +.KYpDv ._1DZAH ._3EFt_ { + margin-top: 0px !important; + color: var(--lighter) !important; +} + +/* Message options. */ +._1i1U7 { + /*transition: 200ms ease-in-out !important;/**/ + background: linear-gradient(to right, transparent 0%, var(--darker) 40%) !important; +} +/* Smooth transition. */ +.message span:last-child div { + transition: 50ms ease-in-out !important; +} + +/* Typing... */ +.vdXUe { + color: var(--accent) !important; +} + +/* System messages. */ +.Zq3Mc { + box-shadow: 0 2px 8px 0px var(--shadow) !important; + border-bottom: 3px solid var(--shadow) !important; + background-color: var(--darker) !important; +} +/* Text color and shadows. */ +.Zq3Mc * { + text-shadow: none !important; + color: var(--lighter) !important; +} +/* New message. */ +#main ._1mq8g { + border: none !important; + background-color: transparent !important; +} +/* X unread messages. */ +#main ._1mq8g .L89LI { + box-shadow: 0 0 8px 0 var(--shadow) !important; + color: var(--light) !important; + background-color: var(--darker) !important; +} + + +/* Document embeds. */ +._1vKRe { + border-color: var(--darker) !important; +} +/* Embed background. */ +._12xX7 { + background-color: var(--dark) !important; +} +/* Embed text color. */ +._12xX7 * { + color: var(--light) !important; +} + +/* Link embeds. */ +._1sGGp._2nFG1, +._2lwig._2nFG1 { + background-color: var(--dark) !important; +} +/* Text color. */ +._1sGGp._2nFG1 *, +._2lwig._2nFG1 * { + color: var(--light) !important; +} +/* Link options. */ +._2DNgV._2Cju4, +.jZ4tp._2Cju4 { + background: none !important; +} + + +/* Reply section. (= */ +footer .rstyJ { + box-shadow: 0 0px 8px 0 var(--darker) !important; + background-color: var(--darker) !important; +} +/* Fix margins. */ +footer .rstyJ > div:first-child { + margin: 0 0 5px 10px !important; + background-color: transparent !important; +} +/* Reply content. */ +footer .rstyJ > div:first-child > div { + background-color: var(--dark) !important; +} +/* Close button. */ +footer .rstyJ > div:last-child { + position: relative !important; + margin: 0 8px 5px 8px !important; + background-color: transparent !important; +} +/* Make the button larger. */ +footer .rstyJ > div:last-child > div svg { + padding: 18px !important; + border-radius: 6px !important; + background-color: var(--dark) !important; +} + +/* Mention group members. */ +.Uukb4 { + color: var(--light) !important; + border-left: none !important; + background-color: var(--dark) !important; +} +/* Wrapper. */ +.Uukb4 ._3v_lq { + transition: 300ms ease-in-out !important; + background-color: transparent !important; +} +/* Active. */ +.Uukb4 .j5Hcb._3v_lq, +.Uukb4 ._3v_lq:hover { + background-color: var(--darker) !important; +} + + +/* Select messages. */ +#main ._3D9Wd { + background-color: var(--shadow) !important; +} +/* Hover over messages. */ +#main ._1o1sm { + transition: 100ms ease-in-out !important; +} +/* Selected message. */ +#main ._1o1sm:hover, +#main ._1o1sm._2nOMz { + background-color: var(--shadow) !important; +} + +/* Selected icon. */ +#main ._1VD7W { + border-color: var(--accent) !important; + background-color: var(--accente) !important; +} +/* Checkmark. */ +#main ._1VD7W ._1KfC8 { + border-bottom-color: var(--accent) !important; + border-right-color: var(--accent) !important; +} + +/* Footer/control/options. */ +#main ._2FsQ8, +#main ._3PWNn, +#main ._3XpR2 { + background-color: var(--darker) !important; +} +/* Text color. */ +#main ._2FsQ8 span, +#main ._3XpR2 { + color: var(--light) !important; +} + + + +/* Bubble tails -- experimental. */ +.tail .tail-container { + width: 0px !important; + height: 10px !important; + z-index: 0 !important; + border-top: 12px solid var(--darker) !important; + background: none !important; +} +.tail.message-in .tail-container { + left: -10px !important; + top: 0px !important; + border-left: 10px solid transparent !important; + border-radius: 5px 0 0 0 !important; +} +.tail.message-out .tail-container { + right: -10px !important; + top: 0px !important; + border-right: 10px solid transparent !important; + border-radius: 0 5px 0 0 !important; +} + +/* Disable tails everywhere. */ +/* Enabled. */ +/* Disable tails everywhere except in chat. */ +.starred-msg-wrapper .tail-container, +.message-gallery .tail-container, +.MS-DH .tail-container { + display: none !important; +} +/* Rounded corners. */ +.message-gallery.tail-override-left, +.MS-DH .tail-override-left { + border-radius: 7.5px !important; +} + +/** Stickers. */ +._1rK-b { + background: none !important; +} +/* Sender. */ +._3JaNE ._2R8MP { + background-color: var(--darker) !important; +} +/* Time/status. */ +._3JaNE ._2Ll5c { + background-color: var(--darker) !important; +} +/* Reset message menu. */ +._1qhoQ { + top: 0 !important; + right: 0 !important; + background: none !important; +} +/* Icon background. */ +.YiYMT { + background-color: transparent !important; +} + +/* Temporary fix for emoji container. */ +#main footer > div:nth-child(2) > div { + border: 0 !important; +} +/* Emoji/gif/stickers background. */ +._1UbeR, +._2HBs4, +._3Jgri, +._3Jgri > ._2z7kg { + background-color: var(--dark) !important; +} + +/* Emoji menu. */ +._3ZkhL .Sbkt2, +._3ZkhL .Sbkt2 > span > div, +._3ETD3, +.R0lQ6 { + background-color: var(--dark) !important; +} +/* Emoji tabs. */ +._3ZkhL ._2ByZq, +._3ZkhL ._1qUma, +._1qUma { + background: var(--darker) !important; +} +/* Tab indicator. */ +._2NQtS, +.YbzIC .YGHyX, +._1Wbpa { + background-color: var(--accent) !important; +} +/* Active button. */ +._1x_c3.bRYFY path { + fill: var(--accent) !important; +} + +/* Search emojis. */ +._3ZkhL label, +._2rR_l, +._2vjPO { + background-color: var(--dark) !important; +} +/* Text color. */ +._3ZkhL label input, +._2vjPO input, +.GclUX, +._3Ztfl { + color: var(--light) !important; +} + +/* Gif preloader background. */ +.zl5TR { + /* border: 2px dashed !important; */ + background-color: var(--darker) !important; +} + +/* Preview. */ +._1drQ- { + background-color: var(--dark) !important; +} +/* Header. */ +._1drQ- header { + background-color: var(--accent) !important; +} +/* Text color. */ +._1drQ- header *, +._1drQ- .media-body * { + color: var(--lighter) !important; +} +/* Footer. */ +._1drQ- .media-collection { + background-color: var(--darker) !important; +} +/* Button. */ +._1drQ- .media-collection .btn-fill, +._1drQ- ._3hV1n { + color: var(--lighter) !important; + background-color: var(--accent) !important; +} + + +/* Emoji-wanna-be-round. */ +.emojik { + opacity: var(--emojiOpacity) !important; + transition: transform 200ms cubic-bezier(0.59, 0.57, 0.39, 1.04) !important; + clip-path: circle(47%) !important; +} +/* Selected emoji. */ +.emojik:focus, +.emojik:hover, +.emojik.selected { + box-shadow: none !important; + opacity: 1 !important; + transform: scale(1.15) !important; +} + +/* Emoji quick selection. */ +._1k6Uw { + border: 0 !important; + border-bottom: 1px solid var(--darker) !important; + background-color: var(--darker) !important; +} +/* Emoji race color popup. */ +._1ArIP, +._1ArIP ._1v2rQ { + background-color: var(--dark) !important; +} +/* Separator. */ +._1ArIP ._2WvMb:first-child { + border-right: 2px solid var(--accent) !important; +} +/* Emoji menu triangle. */ +._1v2rQ { + background-color: var(--dark) !important; +} + + + +/* Backdrop. */ +._3gUiM, +#startup, +#initial_startup { + background-color: var(--dark) !important; +} +/* Modal. */ +._3gUiM ._2dA13 ._1CnF3, +._2dA13 ._18wuJ, +._2dA13 .IuYNx { + box-shadow: 0 0 0 1px var(--darker), 0 8px 16px 0px var(--shadow) !important; + background-color: var(--darker) !important; +} +/* Selected contact. */ +._3gUiM ._2EXPL._1f1zm, +._3gUiM ._2EXPL:hover, +._2EXPL._3ntaf:hover { + background-color: var(--dark) !important; +} +/* Text color. */ +._3gUiM ._1CnF3 * { + color: var(--light) !important; +} +/* Header/footer. */ +._2dA13 header, +._2dA13 .iHLo1 { + background-color: var(--darker) !important; +} +/* Empty element below search bar. */ +._2fq0t span._3fOoY { + display: none !important; +} + + +/* Buttons. */ +.PNlAR, +._3hV1n, +._2Gki6, +._13iu_ { + color: var(--lighter) !important; + background-color: var(--accent) !important; +} +/* Muted checkbox color. */ +._1VD7W { + border-color: var(--accent) !important; + background-color: var(--accent) !important; +} +/* Buttons. */ +.PNlAR:hover, +._1WZqU:hover { + background-color: var(--dark) !important; +} + +/* Drop items. (-: */ +.drag-drop, +._2n-96 { + background-color: var(--dark) !important; +} +/* Footer. */ +._3nuGo { + background-color: var(--darker) !important; +} +/* Border. */ +._2n-96 ._3L-be { + border: 5px dashed var(--accent) !important; + color: var(--light) !important; +} + +/* Add file icon. */ +.GpvML, +._1ypOz { + background-color: var(--dark) !important; +} +/* Border. */ +._2gZno::after { + background-color: var(--accent) !important; +} + +/* Accent border. */ +.CzI8E, +._31WRs ._1DTd4 { + border-bottom-color: var(--accent) !important; +} +/* Text color. */ +._7HWvs { + color: var(--light) !important; +} + +/** Status area! */ +.app-wrapper-web ._3sacU { + background-color: transparent !important; +} +/* Pseudo-element background. */ +.app-wrapper-web ._3sacU::before { + content: "" !important; + position: absolute !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + background-color: var(--dark) !important; + opacity: 0.8 !important; + z-index: -1 !important; +} + +/* Normal icon. */ +span[data-icon="status-v3"] > svg > path:first-child { + opacity: 0.55 !important; +} +/* Unread status. */ +span[data-icon="status-v3-unread"] > svg > path:first-child { + opacity: 1 !important; +} + +/* Status modal! */ +/*.app-wrapper-web ._1abwg { +max-width: 1396px !important; +height: calc(100% - 36px) !important; +margin-left: auto !important; +margin-right: auto !important; +top: 20px !important; }/**/ +/* Left hand side. */ +._3sacU .bZ3B9 { + background-color: var(--darker) !important; +} +/* Text color. */ +._3sacU .bZ3B9 ._35Ai0, +._3sacU .bZ3B9 ._1wjpf { + color: var(--lighter) !important; +} +/* Dimmed text. */ +._3sacU .bZ3B9 ._3_-c_, +._3sacU .bZ3B9 ._1Ou9Y, +._3sacU .bZ3B9 ._itDl { + color: var(--light) !important; +} + +/* Right hand side. */ +._3sacU ._1abwg { + background-color: var(--dark) !important; +} +/* Text color. */ +._3sacU ._1abwg ._2LuDL { + color: var(--light) !important; +} + +/* Reply to status. */ +.C534L ._3PmkG { + border-radius: 5px !important; + background-color: var(--dark) !important; +} + + + +/* REMOVE STUFF. */ +/* Remove pseudo elements. */ +[class*="chat"]:before, +[class*="chat"]:after, +.gQzdc:after, +._1CkkN:before, +._3AwwN:after, +.MS-DH:before, +.MS-DH:after, +._3YwRO { + display: none !important; +} +/* Remove ONLY borders. */ +._1CkkN ._10xEB, +._14oqx .DcItJ, +html[dir] ._2EXPL:after, +._3j7s9, +._1fkhx, +.chat-body, +._3hhmj, +._2nmDZ { + border: none !important; +} +/* Some random iframe? */ +object { + display: none !important; +} + + + +/* Global icon color. */ +span:not([data-icon="image"]) > svg > path { + transition: 200ms ease !important; + fill: var(--icon) !important; +} +/* On event. */ +span:not([data-icon="image"]):hover > svg > path { + /* fill: var(--accent) !important; */ + opacity: 0.3 !important; +} + +/* Upload files. */ +.GK4Lv::after { + box-shadow: 0 1px 2px var(--shadow), 0 4px 8px var(--shadow) !important; +} + +/* Default profile picture background. */ +span[data-icon="default-user"] svg > path:first-child, +span[data-icon="default-group"] svg > path:first-child, +span[data-icon="default-broadcast"] svg > path:first-child { + fill: var(--dark) !important; +} + +span[data-icon="default-user"] svg > g > path:last-child, +span[data-icon="default-group"] svg > path:last-child, +span[data-icon="default-broadcast"] svg > path:last-child { + opacity: 0.7 !important; + fill: var(--icon) !important; +} + +/* Sent message. */ +span[data-icon="msg-dblcheck"] svg path, +span[data-icon="status-dblcheck"] svg path, +span[data-icon="msg-check"] svg path, +span[data-icon="status-check"] svg path { + fill: var(--light) !important; + opacity: 0.5 !important; +} + +/* Sent AND seen message. */ +span[data-icon="msg-dblcheck-ack"] svg path, +span[data-icon="status-dblcheck-ack"] svg path, +span[data-icon="msg-dblcheck-ack-light"] svg path, +span[data-icon="status-v3-unread"] > svg > path:last-child { + fill: var(--accent) !important; + opacity: 1 !important; +} + +/* Misc icons fix. */ +span[data-icon="chevron-left"] svg path, +span[data-icon="chevron-right"] svg path, +span[data-icon="x-viewer"] svg path, +span[data-icon="download"] svg path, +span[data-icon="forward"] svg path, +span[data-icon="star-btn"] svg path, +span[data-icon="audio-file"] svg path:last-child, +span[data-icon="new-group"] svg path, +span[data-icon="add-user-light"] svg path, +span[data-icon="link"] svg path, +span[data-icon="ptt-in-blue"] svg path:first-child, +span[data-icon="ptt-out-blue"] svg path:first-child { + fill: var(--icon) !important; +} + +/* Audio message icons. */ +span[data-icon="ptt-in-blue"] svg path:first-child, +span[data-icon="ptt-out-blue"] svg path:first-child { + fill: transparent !important; +} + +/* Logo. */ +._3CSsZ > svg > path:first-child { + fill: var(--accent) !important; +} +span[data-icon="logo"] svg path:nth-child(1) { + fill: white !important; +} +span[data-icon="alert-phone"] svg path:first-child, +span[data-icon="logo"] svg path:nth-child(1n+2), +span[data-icon="whatsapp-logo"] svg path:first-child { + fill: var(--darker) !important; +} + +/* GIF icon opacity. */ +span[data-icon="emoji-gifs"] svg path { + fill: var(--icon) !important; + fill-opacity: 1 !important; +} + +/* Be cautious icons. */ +span[data-icon="exit"] svg path, +span[data-icon="thumbs-down"] svg path, +span[data-icon="delete-danger"] svg path { + fill: var(--mred) !important; +} + +/* Audio message. */ +span[data-icon="audio-file"] svg path { + fill: rgba(255, 173, 31, 0.8) !important; +} +/* Audio length bar. */ +._22cMG.fS1bA .nDKsM { + background-color: var(--accent) !important; +} +/* Slider thumb. */ +input[type=range]::-webkit-slider-thumb { + cursor: pointer !important; + background: var(--accent) !important; +} + +/* Rounded buttons. */ +span svg > path[fill="#00BFA5"] { + fill: var(--accent) !important; +} + +/* Disable background image on small resolutions. */ +@media screen and (max-width: 1441px) { + ._1FKgS::after { display: none !important; - } } +} - @media screen and (min-width: 1441px) { - /* Animation. */ - html[dir=ltr] ._3dqpi { +@media screen and (min-width: 1441px) { + /* Animation. */ + html[dir=ltr] ._3dqpi { /* display: none !important; */ - animation: _104Un 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.38) !important; } + animation: _104Un 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.38) !important; + } - /* App wrapper. */ - #app .app { + /* App wrapper. */ + #app .app { border-radius: 5px !important; - box-shadow: 0 4px 24px -2px var(--shadow) !important; } - - /* Fullscreen. */ - /* Disabled. */ - - /* App background. */ - ._1FKgS::after { - top: 0px !important; right: 0px; - bottom: 0px !important; left: 0px; - height: auto !important; width: auto; - background-color: var(--dark) !important; - background-image: var(--image) !important; - background-repeat: no-repeat !important; - background-size: cover !important; - background-position: center !important; } + box-shadow: 0 4px 24px -2px var(--shadow) !important; } - /* "Privacy mode." */ - /* Disabled. */ + /* Fullscreen. */ /* Disabled. */ - - /* Compact mode. */ - @media screen and (max-height: 500px) { - ._3dqpi { - min-height: auto !important; } - } - @media screen and (max-width:720px) { - /* .app > div { box-shadow: inset 0 0 0 4px var(--accent) !important; } */ - - /* Header fix. */ - ._3auIg { - min-width: 220px !important; } - - /* Contacts flexbox. */ - .app.two > .k1feT, - .three .k1feT { - transition: 250ms ease-in-out !important; - flex: 0 0 075px !important; } - - /* Chat section. */ - ._1Iexl { - flex: 0 0 65% !important; } - - /* On hover or active sub-menus. */ - .app.two > .k1feT:hover, - .MZIyP .k1feT { - transition-delay: 1s !important; - /* TODO: Adjust panel width. */ - flex: 0 0 30% !important; } - - /* Info flexbox. */ - .three ._2yeJ5 { - width: calc(100% - 75px) !important; - left: 75px !important; } - - /* Chat flexbox. */ - .two > ._1Iexl { - margin: 0 !important; - flex: 0 0 calc(100% - 75px) !important; } - - /* Search contacts. */ - .two .k1feT:not(:hover) ._2MSJr { - padding: 0 !important; - margin-left: 14px !important; } - - /* On hover. */ - .two .k1feT:hover ._2MSJr { - transition-delay: 1s !important; } - - /* Attach icons to avatars. */ - .two .k1feT ._3j7s9:not(:hover) ._1AwDx ._3Bxar { - z-index: 999 !important; - position: absolute !important; - top: 45px !important; - right: 5px !important; } - - /* Hide all icons except new messages. */ - .two .k1feT ._15G96 span:not(.OUeyt), - .two .k1feT .ZR5SB { - display: none !important; } - } - @media screen and (max-width: 720px) { - /* Width overflow fix. */ - ._3dqpi { - min-width: 100% !important; } - - /* On hover or active sub-menus. */ - .app.two > .k1feT:hover, - .MZIyP .k1feT { - transition-delay: 1s !important; - flex: 0 0 40% !important; } - } - - /* Custom CSS rules. */ - #test::after { content: "paste all your custom css here!" !important; } + /* App background. */ + ._1FKgS::after { +top: 0px !important; right: 0px; +bottom: 0px !important; left: 0px; +height: auto !important; width: auto; +background-color: var(--dark) !important; +background-image: var(--image) !important; +background-repeat: no-repeat !important; +background-size: cover !important; +background-position: center !important; } +} + +/* "Privacy mode." */ +/* Disabled. */ +/* Disabled. */ +/* Compact mode. */ +@media screen and (max-height: 500px) { +._3dqpi { +min-height: auto !important; } +} +@media screen and (max-width:720px) { +/* .app > div { box-shadow: inset 0 0 0 4px var(--accent) !important; } */ + +/* Header fix. */ +._3auIg { +min-width: 220px !important; } + +/* Contacts flexbox. */ +.app.two > .k1feT, +.three .k1feT { +transition: 250ms ease-in-out !important; +flex: 0 0 075px !important; } + +/* Chat section. */ +._1Iexl { +flex: 0 0 65% !important; } + +/* On hover or active sub-menus. */ +.app.two > .k1feT:hover, +.MZIyP .k1feT { +transition-delay: 1s !important; +/* TODO: Adjust panel width. */ +flex: 0 0 30% !important; } + +/* Info flexbox. */ +.three ._2yeJ5 { +width: calc(100% - 75px) !important; +left: 75px !important; } + +/* Chat flexbox. */ +.two > ._1Iexl { +margin: 0 !important; +flex: 0 0 calc(100% - 75px) !important; } + +/* Search contacts. */ +.two .k1feT:not(:hover) ._2MSJr { +padding: 0 !important; } + +/* On hover. */ +.two .k1feT:hover ._2MSJr { +transition-delay: 1s !important; } + +/** Hack for positioning unread counter. */ +#side:not(:hover) ._3j7s9 ._1AwDx ._3Bxar span > div { +z-index: 101 !important; +position: absolute !important; } +/* ? Unread counter. */ +#side:not(:hover) div > .OUeyt { +height: 18px !important; +padding: 0 5px 0 5px !important; +margin: -5px 0 0 -35px !important; +background-color: var(--dark) !important; +box-shadow: 0 0 0 3px var(--darker) !important; } +/* On event. */ +/*#side:hover div > .OUeyt { +background-color: var(--dark) !important; +box-shadow: 0 0 0 3px var(--darker) !important; }*/ + +/* ? Message status. */ +.two .k1feT ._3j7s9 ._1VfKB { +z-index: 101 !important; +position: absolute !important; +margin-left: -68px !important; +margin-top: 5px !important; +border-radius: 50% !important; +background-color: var(--dark) !important; +box-shadow: 0 0 0 3px var(--darker) !important; } +/* Background on event. */ +.two .k1feT ._2EXPL:hover ._1VfKB, +.two .k1feT ._2EXPL._1f1zm ._1VfKB { +background-color: var(--darker) !important; +box-shadow: 0 0 0 3px var(--dark) !important; } + +/** Icon size. */ +.two .k1feT ._3j7s9 ._1VfKB span > svg { +padding: 2px !important; +height: 14px !important; +width: 14px !important; } + +/* Hide all icons except new messages. */ +.two .k1feT ._15G96 span:not(.OUeyt), +.two .k1feT .ZR5SB { +display: none !important; } +} +@media screen and (max-width: 720px) { +/* Width overflow fix. */ +._3dqpi { +min-width: 100% !important; } + +/* On hover or active sub-menus. */ +.app.two > .k1feT:hover, +.MZIyP .k1feT { +transition-delay: 1s !important; +flex: 0 0 40% !important; } +} +/* Custom CSS rules. */ +#test::after { content: "paste all your custom css here!" !important; } diff --git a/resources/css/whatsapp.css b/resources/css/whatsapp.css index 0c616046215f0970338a9a9c96b34889ca04e6a6..89f439c79b95445fba812c22a9ff765092c9e8c8 100644 --- a/resources/css/whatsapp.css +++ b/resources/css/whatsapp.css @@ -1,1126 +1,1508 @@ :root { - --dark: rgb(39, 44, 53); - --darker: rgb(31, 35, 42); - --light: rgb(209, 209, 209); - --lighter: rgb(233, 233, 233); - --accent: rgb(114, 137, 218); - --icon: rgb(225, 225, 225); - --shadow: rgba(0, 0, 0, .12); - --mred: rgb(163, 82, 91); - --mgreen: rgb(112, 163, 82); - --mblue: rgb(82, 122, 163); - --image: url(https://media.discordapp.net/attachments/310799529161129984/417408747812552715/zilesanamin.jpg); - --emojiOpacity: 0.75; - } - - /* Body reset. */ - body { - background: none; - background-color: var(--dark); } - - /* Scrollbar track. */ - *::-webkit-scrollbar-track { - background-color: var(--shadow); } - /* Scrollbar thumb. */ - *::-webkit-scrollbar-thumb { - background-color: rgba(0,0,0,0.2); } - /* Highlight selection. */ - ::selection { - color: var(--light) !important; - background-color: var(--accent) !important; } - ::-moz-selection { - color: var(--light) !important; - background-color: var(--accent) !important; } - /* Input placeholders. */ - ::-webkit-input-placeholder { - color: var(--lighter) !important; } - - /* Progress. */ - progress[value]::-webkit-progress-bar { - background: var(--darker); } - /* Value. */ - progress[value]::-webkit-progress-value { - background: var(--accent); } - - /* App wrapper. */ - #app .app { - background: none; - background-color: var(--dark); } - - /* Accent background. */ - .app-wrapper::after { - background: none !important; } - - - /* Log-in page. */ - ._2NbD3 { - border: 1px solid var(--shadow); - box-shadow: 0 8px 32px 0 var(--shadow) !important; - background-color: var(--darker) !important; } - /* Text color. */ - ._2NbD3 * { - color: var(--light); } - /* Reload QR code. */ - .HnNfm { - background-color: var(--darker) !important; } - /* Fix QR code. */ - ._2NbD3 .XSdna { - border: 3px solid white !important; } - /* Tutorial. */ - ._2NbD3 > div:last-child { - background-color: var(--darker); } - - /* Disable background. */ - ._2U_Zc:before { - display: none !important; } - - /* Icon color. */ - span[class="_3CSsZ"] > svg > rect { - fill: var(--dark) !important; } - - - /* Landing page. */ - .app ._1Iexl ._3qlW9 { - /* box-shadow: 1px -3px 2px 0 var(--shadow) inset; */ - border: none; - background-color: var(--dark); } - /* Status update. */ - /* .app ._3q4NP ._3qlW9::before { - content: 'Rewrite is done! A few old and a few new features coming up. Let me know if something is still broken. ^-^'; - left: 0; - top: 0; - bottom: 6px; - right: 0; - position: absolute; - z-index: 98; - width: 90%; - margin: 0 5%; - padding-top: 40vh; - text-align: center; - font-size: 20px; - color: var(--light); - background: var(--dark); } /**/ - /* Image. */ - .app ._1Iexl ._3qlW9 ._3BqNZ ._2Uo0Z { - max-width: 200px; - max-height: 200px; - border-radius: 50%; - filter: opacity(0.75); - transition: opacity 1s ease !important; } - /* Text color. */ - .app ._1Iexl ._3qlW9 ._2MnNk * { - color: var(--light); } - /* Accent bar. */ - .app ._1Iexl ._3qlW9:after { - border-top-color: var(--accent); } - - - - /* Left drawer. */ - #app .app #side { - background-color: var(--darker); } - - /* Chat list. */ - #side > header { - background-color: var(--darker) !important; } - - /* Notifications && more!! */ - #side ._3YewW { - box-shadow: inset 0 0 4px 0 var(--shadow); - background-color: var(--accent) !important; } - /* Text color. */ - #side ._3YewW .l2BEH * { - color: var(--lighter); } - - /* Search or start new chat. */ - #side ._3CPl4 { - border-bottom: 0px solid var(--dark); - background-color: var(--darker) !important; - background-color: transparent !important; } - /* Label background. */ - #side ._3CPl4 .gQzdc label, - .gQzdc._3sdhb, - ._2dA13 ._15JHr .gQzdc { - border: 0px solid var(--dark); - background-color: var(--dark) !important; } - /* Input element. */ - #side ._3CPl4 .gQzdc label input { - color: var(--light); - background-color: transparent; } - /* Active. */ - #side ._3CPl4 .gQzdc._3sdhb { - background-color: var(--dark) !important; } - - /* New group and group info buttons. */ - ._2EXPL .dIyEr ._1jJLh, - ._2EXPL .dIyEr ._1WliW { - box-shadow: 0 0 8px -1px var(--shadow) !important; - background-color: var(--dark) !important; } - - /* Search results. */ - #side ._1AKfk { - color: var(--accent); - background-color: var(--dark); } - /* Matching results. */ - #side .matched-text { - color: var(--accent) !important; } - - /* Contacts wrapper. */ - #side ._1NrpZ, ._2fq0t ._1lIXT { - background-color: transparent !important; } - /* Contacts. */ - #side ._1NrpZ ._2EXPL, ._2fq0t ._66JgU { - transition: 200ms ease-in-out; - background-color: transparent !important; } - /* On event. */ - #side ._1NrpZ ._2EXPL._1f1zm, - #side ._1NrpZ ._2EXPL:hover { - background-color: var(--dark) !important; } - /* Text color. */ - #side ._1NrpZ [class*="_3j7s9"] * { - color: var(--light); } - /* Avatar wrapper background. */ - ._1WliW { - box-shadow: 0 0 8px -1px var(--shadow) !important; - background-color: transparent !important; } - - /* New message indicator. */ - #side .OUeyt { - color: var(--lighter) !important; - background-color: var(--darker) !important; - box-shadow: inset 0 0 0 2px var(--accent); } - - - /* Settings. */ - ._2fq0t { - background-color: var(--darker) !important; } - /* Header color. */ - ._2fq0t header { - min-height: 50px; - height: auto; - background-color: var(--darker) !important; } - /* Reset header height. */ - ._2fq0t header > div:first-child { - padding: 12px 0 !important; - height: auto; } - /* Transparent sections. */ - ._2fq0t ._1CRb5 { - box-shadow: none !important; - background-color: transparent !important; } - /* Highlighted sections. */ - ._2fq0t ._3hhmj ._1CkkN, - ._3UUn3 { - background-color: var(--dark) !important; } - /* Change profile picture. */ - ._2fq0t .WX_XW, - ._2fq0t ._2Lbqu { - background-color: rgba(0,0,0,0.5) !important; } - /* Text color. */ - ._2fq0t * { - color: var(--light); } - /* Zoom in/out. */ - ._2LALH { - background-color: var(--dark) !important; } - - /* Option/select elements. */ - .uyEaY select { - border-color: var(--accent); } - .uyEaY select option { - background-color: var(--dark); } - - /* Archived chat image. */ - ._2fq0t ._2Lev2 { - background-color: var(--dark) !important; } - - /* Body. */ - ._2fq0t ._2sNbV ._1CkkN, - ._2fq0t ._2sNbV ._2EXPL { - background-color: transparent; } - /* On event. TODO: Fixed, but it might still overlap somewhere. */ - .k1feT ._2sNbV > ._1CkkN:hover, - ._2fq0t ._2sNbV ._1CkkN:hover { - background-color: var(--dark); } - - /* New chat section. */ - ._2fq0t .gQzdc label { - border: none; - background-color: var(--dark); } - /* Input element. */ - ._2fq0t .gQzdc label input { - background-color: transparent; } - - /* New group. */ - ._2fq0t ._39pS- { - background-color: transparent !important; } - /* Header. */ - ._2fq0t ._1AKfk { - background-color: var(--darker) !important; } - /* On event. */ - .k1feT ._2fq0t ._2EXPL._1f1zm, - .k1feT ._2fq0t ._2EXPL:hover { - background-color: var(--dark) !important; } - /* Search element */ - ._66JgU ._3_3Rs { - border-bottom: none !important; } - ._66JgU ._3_3Rs input, ._66JgU ._3_3Rs ::placeholder { - color: var(--lighter) !important; } - - - /* Dropdown menu. */ - ._2uLFU, ._1ArIP { - box-shadow: 0 2px 8px 0 var(--shadow), 0 2px 16px 0 var(--shadow) !important; - background-color: var(--darker) !important; } - /* On event. */ - ._2uLFU li:hover, ._2ULFU li._28zBA { - background-color: var(--dark) !important; } - /* Text color. */ - ._2uLFU div, _1ArIP div { - color: var(--light); } - - - - /* Middle drawer. */ - .app ._1Iexl ._1GX8_ { - background-color: var(--dark); } - /* Doodle background. TODO: Plans for the future. */ - .app .YUoyu { - filter: invert(100%) opacity(0.45) !important; } - - /* Jump to present button. */ - ._298R6 { - box-shadow: 0 4px 8px 2px var(--shadow) !important; - background-color: var(--darker) !important; } - /* Number of messages. */ - ._298R6 .OUeyt { - background-color: var(--accent) !important; } - - /* Header. */ - ._1Iexl #main header { - border: none; - background-color: var(--dark); } - /* Text color. */ - ._1Iexl #main header ._1WBXd * { - color: var(--light); } - - /* Footer. */ - ._1Iexl #main footer { - background-color: var(--darker); } - /* Input wrapper. */ - #main footer > div { - color: var(--light); - border: none; - /* border-bottom: 2px solid var(--dark); */ - background-color: var(--dark); } - /* Input element. */ - #main footer > div:nth-child(1) > div:nth-child(2) { - border: none !important; - color: var(--light); - background-color: var(--darker) !important; } - /* Voice message duration. */ - ._30ie- { - color: var(--light) !important; } - - /* Unknown contact. */ - .TYhk9 { - border-color: var(--darker) !important; - background-color: var(--dark) !important; - box-shadow: 0 0px 8px 2px var(--shadow) !important; } - /* Buttons. */ - .TYhk9 ._1sB6s { - color: var(--light) !important; - background-color: var(--darker) !important; } - - /* Shared contact button colors. */ - .b332w { - color: var(--accent) !important; } - /* Shared contact text. */ - .AVd_p { - color: var(--lighter) !important; } - /* View contact. */ - ._36ApL { - background-color: transparent !important; } - - /* Hide 'Type a message' once focused. */ - ._3F6QL._2WovP.focused ._39LWd { - color: transparent; } - /* On event smoothness. */ - .pluggable-input.pluggable-input-compose > div:first-child { - transition: 150ms ease-in-out !important; } - - - /* Right drawer. */ - .app ._2yeJ5 ._2fq0t { - background-color: var(--darker); } - /* Border-color. */ - .app ._2yeJ5 { - border-left-color: transparent !important; } - /* Header. */ - .app ._2yeJ5 ._2fq0t header { - background-color: var(--darker); } - /* Text color. */ - .app ._2yeJ5 ._2fq0t header div { - color: var(--light); } - - /* Group info sections. */ - .app ._2yeJ5 ._2fq0t ._1CRb5 { - /*box-shadow: 0 1px 3px shadow /**/ - box-shadow: none; - background-color: transparent; } - /* Group name. */ - .app ._2yeJ5 ._1CRb5 ._1DTd4, .media-body .CzI8E { - margin-bottom: 10px; - color: var(--light); - border-bottom: 2px solid var(--accent) !important; } - /* User's name. */ - .app ._2yeJ5 .copyable-text { - color: var(--light); } - /* Accent color text. */ - .app ._2yeJ5 ._1CRb5 ._1sYdX { - font-weight: 400; - color: var(--accent) !important; } - /* Mute/Starred Messages. */ - .app ._2yeJ5 ._1CRb5 ._3LL06 { - color: var(--light); } - - /* Group options. */ - .app ._2yeJ5 ._1CRb5 ._2EXPL, - .app ._2yeJ5 ._1CRb5 ._1CkkN { - transition: 200ms ease-in-out; - background-color: transparent; } - /* On event. */ - .app ._2yeJ5 ._1CRb5 ._2EXPL._3xj48:hover, - .app ._2yeJ5 ._1CRb5 ._1CkkN:hover { - background-color: var(--dark); } - /* Text color. */ - .app ._2yeJ5 ._1CRb5 ._2EXPL * { - color: var(--light); } - /* Admin color. */ - .app ._2yeJ5 ._1CRb5 ._2e8Mu { - border: 2px solid var(--accent); } - - - /* Search messages. TODO: Apply this to all search elements. */ - ._2yeJ5 ._1iMEz, ._1iopp /*, ._2yeJ5 ._1iMEz._3sdhb*/ { - background-color: var(--darker) !important; } - /* Input wrapper. */ - ._1iMEz label { - border: 0px solid var(--dark) !important; - background-color: var(--dark) !important; } - ._1iMEz ._3sdhb label { - background-color: transparent !important; } - /* Input element. */ - ._1iMEz label input { - background-color: transparent !important; } - - /* Search messages body. */ - .YAPQk { - background-color: var(--darker) !important; } - /* Matching results. */ - ._2yeJ5 .matched-text { - color: var(--accent) !important; } - /* On event. */ - .YAPQk ._1f1zm > ._3j7s9, - .YAPQk ._3j7s9:hover { - background-color: var(--dark) !important; } - - - /* Starred messages. */ - ._2yeJ5 .ZwkQK, .ZwkQK { - background-color: var(--dark) !important; } - /* On event. */ - .starred-msg-wrapper, .MS-DH { - transition: 200ms ease-in-out !important; } - /* On event. */ - .MS-DH._2-mCk, .MS-DH._1baOM, .MS-DH.ZuHmv { - background-color: var(--dark) !important; } - - - /* Message info. */ - ._3FAwT { - background-color: var(--dark) !important; } - /* Doodle image. */ - ._3FAwT .pane-chat-tile { - filter: invert(100%) opacity(0.8); } - /* Read by. */ - ._2yeJ5 ._2sNbV ._2HDl5 ._2wP_Y > div { - background-color: var(--dark) !important; } - - - /* Media/docs/links section. */ - ._2yeJ5 ._3b2Cf { - background-color: var(--darker) !important; } - /* Active indicator. */ - ._2yeJ5 ._3b2Cf:before { - background-color: var(--accent) !important; } - /* Selected image. */ - ._2Ry6_ ._2mlDB { - border-color: var(--accent) !important; } - /* Selected links. */ - .D6ZWG { - background-color: var(--darker) !important; } - /* Text color. */ - .D6ZWG ._1S4i5, - ._2Mvo8.fyJXn { - color: var(--lighter); } - - /* Media viewer. */ - #app ._1zcz2, ._3_R6X { - background-color: rgba(0,0,0,0.85) !important; } - /* Chevron background. */ - ._2-IeP { - background-color: var(--darker) !important; } - /* Preloader. */ - ._3dGYA { - background-color: var(--darker) !important; } - - /* Header. */ - #app ._1zcz2 ._2YdsD, ._3_R6X ._1XwnX { - background-color: var(--dark) !important; } - /* Inner element. */ - #app ._1zcz2 ._2EXPL { - background-color: transparent !important; } - /* Text color. */ - #app ._1zcz2 ._2EXPL ._3j7s9 *, - ._3_R6X ._12oAB, - ._1XwnX * { - color: var(--light); } - - /* Footer. */ - ._3Qh77 { - border: none !important; - background-color: var(--darker) !important; } - /* Selected image. */ - ._3Qh77 ._1xQmx { - transform: scale(1) !important; - border: 3px solid var(--accent) !important } - html[dir=ltr] .UPNDG:hover:not(._1xQmx) { - border: 0px solid var(--accent); - outline: 3px solid var(--accent) !important; } - - - - /* Message bubbles. */ - .message-in, .message-out, .message { - background-color: var(--darker) !important; } - - /* Message text color. */ - .message-in .selectable-text, - .message-out .selectable-text, - .quoted-mention, - ._1upWv { - color: var(--light) !important; } - - /* Forwarded message. */ - ._15aTv { - color: var(--lighter) !important; } - - /* Mentions. */ - .message-in .matched-mention, - .message-out .matched-mention, - .message-out .matched-mention .at-symbol { - color: var(--accent) !important; } - - /* Message meta text color. */ - [class*="message-"] ._2f-RV *, [class*="message-"] ._2f-RV *, - [class*="message-"] ._1_Gu6 *, [class*="message-"] ._27K_5 *, - [class*="message-"] ._1DZAH *, [class*="message-"] ._3cMIj * { - color: var(--light); } - - /* Image/gif/video meta wrapper. */ - .KYpDv ._1DZAH { - bottom: 8px; - padding: 2px 5px; - border-radius: 4px; - background-color: var(--shadow); } - /* Text color. */ - .KYpDv ._1DZAH ._3EFt_ { - margin-top: 0px; - color: var(--lighter); } - - /* Message options. */ - ._1i1U7 { - /*transition: 200ms ease-in-out;/**/ - background: linear-gradient(to right, transparent 0%, var(--darker) 40%) !important; } - /* Smooth transition. */ - .message span:last-child div { - transition: 50ms ease-in-out !important; } - - /* Typing... */ - .vdXUe { - color: var(--accent) !important; } - - /* System messages. */ - .Zq3Mc { - box-shadow: 0 2px 8px 0px var(--shadow) !important; - border-bottom: 3px solid var(--shadow) !important; - background-color: var(--darker) !important; } - /* Text color and shadows. */ - .Zq3Mc * { - text-shadow: none !important; - color: var(--lighter) !important; } - /* New message. */ - #main ._1mq8g { - border: none !important; - background-color: transparent !important; } - /* X unread messages. */ - #main ._1mq8g .L89LI { - box-shadow: 0 0 8px 0 var(--shadow) !important; - color: var(--light) !important; - background-color: var(--darker) !important; } - - - /* Document embeds. */ - ._1vKRe { - border-color: var(--darker) !important; } - /* Embed background. */ - ._12xX7 { - background-color: var(--dark) !important; } - /* Embed text color. */ - ._12xX7 * { - color: var(--light); } - - /* Link embeds. */ - ._1sGGp._2nFG1, ._2lwig._2nFG1 { - background-color: var(--dark) !important; } - /* Text color. */ - ._1sGGp._2nFG1 *, ._2lwig._2nFG1 * { - color: var(--light); } - /* Link options. */ - ._2DNgV._2Cju4, .jZ4tp._2Cju4 { - background: none !important; } - - - /* Reply section. (= */ - footer .rstyJ { - box-shadow: 0 0px 8px 0 var(--darker) !important; - background-color: var(--darker) !important; } - /* Fix margins. */ - footer .rstyJ > div:first-child { - margin: 0 0 5px 10px !important; - background-color: transparent !important; } - /* Reply content. */ - footer .rstyJ > div:first-child > div { - background-color: var(--dark) !important; } - /* Close button. */ - footer .rstyJ > div:last-child { - position: relative; - margin: 0 8px 5px 8px !important; - background-color: transparent !important; } - /* Make the button larger. */ - footer .rstyJ > div:last-child > div svg { - padding: 18px; - border-radius: 6px; - background-color: var(--dark); } - - /* Mention group members. */ - .Uukb4 { - color: var(--light); - border-left: none !important; - background-color: var(--dark) !important; } - /* Wrapper. */ - .Uukb4 ._3v_lq { - transition: 300ms ease-in-out !important; - background-color: transparent !important; } - /* Active. */ - .Uukb4 .j5Hcb._3v_lq, - .Uukb4 ._3v_lq:hover { - background-color: var(--darker) !important; } - - - /* Select messages. */ - #main ._3D9Wd { - background-color: var(--shadow); } - /* Hover over messages. */ - #main ._1o1sm { - transition: 100ms ease-in-out !important; } - /* Selected message. */ - #main ._1o1sm:hover, #main ._1o1sm._2nOMz { - background-color: var(--shadow) !important; } - - /* Selected icon. */ - #main ._1VD7W { - border-color: var(--accent) !important; - background-color: var(--accente) !important; } - /* Checkmark. */ - #main ._1VD7W ._1KfC8 { - border-bottom-color: var(--accent); - border-right-color: var(--accent); } - - /* Footer/control/options. */ - #main ._2FsQ8, #main ._3PWNn, #main ._3XpR2 { - background-color: var(--darker); } - /* Text color. */ - #main ._2FsQ8 span, #main ._3XpR2 { - color: var(--light); } - - - - /* Bubble tails -- experimental. */ - .tail .tail-container { - width: 0px !important; - height: 10px !important; - z-index: 0 !important; - border-top: 12px solid var(--darker); - background: none !important; } - .tail.message-in .tail-container { - left: -10px !important; top: 0px; - border-left: 10px solid transparent; - border-radius: 5px 0 0 0; } - .tail.message-out .tail-container { - right: -10px !important; top: 0px; - border-right: 10px solid transparent; - border-radius: 0 5px 0 0; } - - /* Disable tails everywhere. */ - /* Enabled. */ - - /* Disable tails everywhere except in chat. */ - .starred-msg-wrapper .tail-container, - .message-gallery .tail-container, - .MS-DH .tail-container { - display: none !important; } - /* Rounded corners. */ - .message-gallery.tail-override-left, - .MS-DH .tail-override-left { - border-radius: 7.5px !important; } - - /** Stickers. */ - ._1rK-b { - background: none !important; } - /* Sender. */ - ._3JaNE ._2R8MP { - background-color: var(--darker) !important; } - /* Time/status. */ - ._3JaNE ._2Ll5c { - background-color: var(--darker) !important; } - /* Reset message menu. */ - ._1qhoQ { - top: 0 !important; - right: 0 !important; - background: none !important; } - /* Icon background. */ - .YiYMT { background-color: transparent !important; } - - /* Temporary fix for emoji container. */ - #main footer > div:nth-child(2) > div { - border: 0; } - /* Emoji/gif/stickers background. */ - ._1UbeR, ._2HBs4, ._3Jgri, ._3Jgri > ._2z7kg { - background-color: var(--dark) !important; } - - /* Emoji menu. */ - ._3ZkhL .Sbkt2, - ._3ZkhL .Sbkt2 > span > div, - ._3ETD3, .R0lQ6 { - background-color: var(--dark) !important; } - /* Emoji tabs. */ - ._3ZkhL ._2ByZq, - ._3ZkhL ._1qUma, - ._1qUma { - background: var(--darker) !important; } - /* Tab indicator. */ - ._2NQtS, - .YbzIC .YGHyX, - ._1Wbpa { - background-color: var(--accent) !important; } - /* Active button. */ - ._1x_c3.bRYFY path { - fill: var(--accent) !important; } - - /* Search emojis. */ - ._3ZkhL label, - ._2rR_l, - ._2vjPO { - background-color: var(--dark) !important; } - /* Text color. */ - ._3ZkhL label input, - ._2vjPO input, - .GclUX, - ._3Ztfl { - color: var(--light) !important; } - - /* Gif preloader background. */ - .zl5TR { - /* border: 2px dashed ; */ - background-color: var(--darker) !important; } - - /* Preview. */ - ._1drQ- { - background-color: var(--dark) !important; } - /* Header. */ - ._1drQ- header { - background-color: var(--accent) !important; } - /* Text color. */ - ._1drQ- header *, ._1drQ- .media-body * { - color: var(--lighter) !important; } - /* Footer. */ - ._1drQ- .media-collection { - background-color: var(--darker); } - /* Button. */ - ._1drQ- .media-collection .btn-fill, ._1drQ- ._3hV1n { - color: var(--lighter); - background-color: var(--accent) !important; } - - - /* Emoji-wanna-be-round. */ - .emojik { - opacity: var(--emojiOpacity); - transition: transform 200ms cubic-bezier(0.59, 0.57, 0.39, 1.04); - clip-path: circle(47%) !important; } - /* Selected emoji. */ - .emojik:focus, .emojik:hover, .emojik.selected { - box-shadow: none !important; - opacity: 1; - transform: scale(1.15); } - - /* Emoji quick selection. */ - ._1k6Uw { - border: 0 !important; - border-bottom: 1px solid var(--darker) !important; - background-color: var(--darker) !important; } - /* Emoji race color popup. */ - ._1ArIP, ._1ArIP ._1v2rQ { - background-color: var(--dark); } - /* Separator. */ - ._1ArIP ._2WvMb:first-child { - border-right: 2px solid var(--accent) !important; } - /* Emoji menu triangle. */ - ._1v2rQ { - background-color: var(--dark) !important; } - - - - /* Backdrop. */ - ._3gUiM, #startup, #initial_startup { - background-color: var(--dark) !important; } - /* Modal. */ - ._3gUiM ._2dA13 ._1CnF3, - ._2dA13 ._18wuJ, ._2dA13 .IuYNx { - box-shadow: 0 0 0 1px var(--darker), 0 8px 16px 0px var(--shadow) !important; - background-color: var(--darker) !important; } - /* Selected contact. */ - ._3gUiM ._2EXPL._1f1zm, - ._3gUiM ._2EXPL:hover, - ._2EXPL._3ntaf:hover { - background-color: var(--dark) !important; } - /* Text color. */ - ._3gUiM ._1CnF3 * { - color: var(--light); } - /* Header/footer. */ - ._2dA13 header, - ._2dA13 .iHLo1 { - background-color: var(--darker) !important; } - /* Empty element below search bar. */ - ._2fq0t span._3fOoY { - display: none !important; } - - - /* Buttons. */ - .PNlAR, ._3hV1n, ._2Gki6, ._13iu_ { - color: var(--lighter) !important; - background-color: var(--accent) !important; } - /* Muted checkbox color. */ - ._1VD7W { - border-color: var(--accent); - background-color: var(--accent); } - /* Buttons. */ - .PNlAR:hover, ._1WZqU:hover { - background-color: var(--dark) !important; } - - /* Drop items. (-: */ - .drag-drop, ._2n-96 { - background-color: var(--dark) !important; } - /* Footer. */ - ._3nuGo { - background-color: var(--darker) !important; } - /* Border. */ - ._2n-96 ._3L-be { - border: 5px dashed var(--accent) !important; - color: var(--light) !important; } - - /* Add file icon. */ - .GpvML, ._1ypOz { - background-color: var(--dark) !important; } - /* Border. */ - ._2gZno::after { - background-color: var(--accent) !important; } - - /* Accent border. */ - .CzI8E, ._31WRs ._1DTd4 { - border-bottom-color: var(--accent) !important; } - /* Text color. */ - ._7HWvs { - color: var(--light) !important; } - - - - /* Status area! */ - .app-wrapper-web ._3sacU { - background-color: rgba(0,0,0,0.6) !important; } - - /* Normal icon. */ - span[data-icon="status-v3"] > svg > path:first-child { - opacity: 0.55 !important; } - /* Unread status. */ - span[data-icon="status-v3-unread"] > svg > path:first-child { - opacity: 1 !important; } - - /* Status modal! */ - /*.app-wrapper-web ._1abwg { - max-width: 1396px; - height: calc(100% - 36px); - margin-left: auto; - margin-right: auto; - top: 20px; }/**/ - - /* Left hand side. */ - ._3sacU .bZ3B9 { - background-color: var(--darker) !important; } - /* Text color. */ - ._3sacU .bZ3B9 ._35Ai0, - ._3sacU .bZ3B9 ._1wjpf { - color: var(--lighter) !important; } - /* Dimmed text. */ - ._3sacU .bZ3B9 ._3_-c_, - ._3sacU .bZ3B9 ._1Ou9Y, - ._3sacU .bZ3B9 ._itDl { - color: var(--light) !important; } - - /* Right hand side. */ - ._3sacU ._1abwg { - background-color: var(--dark) !important; } - /* Text color. */ - ._3sacU ._1abwg ._2LuDL { - color: var(--light); } - - /* Reply to status. */ - .C534L ._3PmkG { - border-radius: 5px !important; - background-color: var(--dark) !important; } - - - - /* REMOVE STUFF. */ - /* Remove pseudo elements. */ - [class*="chat"]:before, [class*="chat"]:after, - .gQzdc:after, ._1CkkN:before, ._3AwwN:after, - .MS-DH:before, .MS-DH:after, ._3YwRO { - display: none !important; } - /* Remove ONLY borders. */ - ._1CkkN ._10xEB, ._14oqx .DcItJ, - html[dir] ._2EXPL:after, ._3j7s9, - ._1fkhx, .chat-body, ._3hhmj, ._2nmDZ { - border: none !important; } - /* Some random iframe? */ - object { display: none !important; } - - - - /* Global icon color. */ - span:not([data-icon="image"]) > svg > path { - transition: 200ms ease; - fill: var(--icon) !important; } - /* On event. */ - span:not([data-icon="image"]):hover > svg > path { - /* fill: var(--accent) !important; */ - opacity: 0.3 !important; } - - /* Upload files. */ - .GK4Lv::after { - box-shadow: 0 1px 2px var(--shadow), 0 4px 8px var(--shadow) !important; } - - /* Default profile picture background. */ - span[data-icon="default-user"] svg > path:first-child, - span[data-icon="default-group"] svg > path:first-child, - span[data-icon="default-broadcast"] svg > path:first-child { - fill: var(--dark) !important; } - - span[data-icon="default-user"] svg > g > path:last-child, - span[data-icon="default-group"] svg > path:last-child, - span[data-icon="default-broadcast"] svg > path:last-child { - opacity: 0.7; - fill: var(--icon) !important; } - - /* Sent message. */ - span[data-icon="msg-dblcheck"] svg path, - span[data-icon="status-dblcheck"] svg path, - span[data-icon="msg-check"] svg path, - span[data-icon="status-check"] svg path { - fill: var(--light) !important; - opacity: 0.5 !important; } - - /* Sent AND seen message. */ - span[data-icon="msg-dblcheck-ack"] svg path, - span[data-icon="status-dblcheck-ack"] svg path, - span[data-icon="msg-dblcheck-ack-light"] svg path, - span[data-icon="status-v3-unread"] > svg > path:last-child { - fill: var(--accent) !important; - opacity: 1 !important; } - - /* Misc icons fix. */ - span[data-icon="chevron-left"] svg path, - span[data-icon="chevron-right"] svg path, - span[data-icon="x-viewer"] svg path, - span[data-icon="download"] svg path, - span[data-icon="forward"] svg path, - span[data-icon="star-btn"] svg path, - span[data-icon="audio-file"] svg path:last-child, - span[data-icon="new-group"] svg path, - span[data-icon="add-user-light"] svg path, - span[data-icon="link"] svg path, - span[data-icon="ptt-in-blue"] svg path:first-child, - span[data-icon="ptt-out-blue"] svg path:first-child { - fill: var(--icon) !important; } - - /* Audio message icons. */ - span[data-icon="ptt-in-blue"] svg path:first-child, - span[data-icon="ptt-out-blue"] svg path:first-child { - fill: transparent !important; } - - /* Logo. */ - ._3CSsZ > svg > path:first-child { - fill: var(--accent) !important; } - span[data-icon="logo"] svg path:nth-child(1) { - fill: white !important; } - span[data-icon="alert-phone"] svg path:first-child, - span[data-icon="logo"] svg path:nth-child(1n+2), - span[data-icon="whatsapp-logo"] svg path:first-child { - fill: var(--darker) !important; } - - /* GIF icon opacity. */ - span[data-icon="emoji-gifs"] svg path { - fill: var(--icon) !important; - fill-opacity: 1 !important; } - - /* Be cautious icons. */ - span[data-icon="exit"] svg path, - span[data-icon="thumbs-down"] svg path, - span[data-icon="delete-danger"] svg path { - fill: var(--mred) !important; } - - /* Audio message. */ - span[data-icon="audio-file"] svg path { - fill: rgba(255, 173, 31, 0.8) !important; } - /* Audio length bar. */ - ._22cMG.fS1bA .nDKsM { - background-color: var(--accent) !important; } - /* Slider thumb. */ - input[type=range]::-webkit-slider-thumb { - cursor: pointer; - background: var(--accent) !important; } - - /* Rounded buttons. */ - span svg > path[fill="#00BFA5"] { - fill: var(--accent) !important; } - - /* Disable background image on small resolutions. */ - @media screen and (max-width: 1441px) { - ._1FKgS::after { + --dark: rgb(39, 44, 53); + --darker: rgb(31, 35, 42); + --light: rgb(209, 209, 209); + --lighter: rgb(233, 233, 233); + --accent: rgb(114, 137, 218); + --icon: rgb(225, 225, 225); + --shadow: rgba(0, 0, 0, .12); + --mred: rgb(163, 82, 91); + --mgreen: rgb(112, 163, 82); + --mblue: rgb(82, 122, 163); + --image: url(https://media.discordapp.net/attachments/310799529161129984/417408747812552715/zilesanamin.jpg); + --emojiOpacity: 0.75; + --version: "WhatsApp by Mew v1.3.0"; + --message: "Updated on 20th of February. "; + --changes: "See the changelog at: https://github.com/vednoc/onyx/releases"; +} + +/* Body reset. */ +body { + background: none; + background-color: var(--dark); +} + +/* Scrollbar track. */ +*::-webkit-scrollbar-track { + background-color: var(--shadow); +} +/* Scrollbar thumb. */ +*::-webkit-scrollbar-thumb { + background-color: var(--accent); +} +* { + scrollbar-width: thin; + scrollbar-color: var(--accent) var(--shadow); +} + +/* Highlight selection. */ +::selection { + color: var(--light) !important; + background-color: var(--accent) !important; +} +::-moz-selection { + color: var(--light) !important; + background-color: var(--accent) !important; +} +/* Input placeholders. */ +::-webkit-input-placeholder { + color: var(--lighter) !important; +} + +/* Progress. */ +progress[value]::-webkit-progress-bar { + background: var(--darker); +} +/* Value. */ +progress[value]::-webkit-progress-value { + background: var(--accent); +} +progress { + background: var(--darker); +} +::-moz-progress-bar { + background: var(--accent) !important; +} + +/* App wrapper. */ +#app .app { + background: none; + background-color: var(--dark); +} + +/* Accent background. */ +.app-wrapper::after { + background: none !important; +} + + +/* Log-in page. */ +._2NbD3 { + border: 1px solid var(--shadow); + box-shadow: 0 8px 32px 0 var(--shadow) !important; + background-color: var(--darker) !important; +} +/* Text color. */ +._2NbD3 * { + color: var(--light); +} +/* Reload QR code. */ +.HnNfm { + background-color: var(--darker) !important; +} +/* Fix QR code. */ +._2NbD3 .XSdna { + border: 3px solid white !important; +} +/* Tutorial. */ +._2NbD3 > div:last-child { + background-color: var(--darker); +} +/* Loader. */ +#startup svg > circle { + stroke: var(--lighter) !important; +} + +/* Disable background. */ +._2U_Zc:before { + display: none !important; +} + +/* Icon color. */ +span[class="_3CSsZ"] > svg > rect { + fill: var(--dark) !important; +} + + +/* Landing page. */ +.app ._1Iexl ._3qlW9 { + border: none; + background-color: var(--dark); +} +/* Image. */ +.app ._1Iexl ._3qlW9 ._3BqNZ ._2Uo0Z { + max-width: 200px; + max-height: 200px; + border-radius: 50%; + filter: opacity(0.75 + ); + transition: opacity 1s ease !important; +} +/* Text color. */ +.app ._1Iexl ._3qlW9 ._2MnNk * { + color: var(--light); +} +/* Accent bar. */ +.app ._1Iexl ._3qlW9:after { + border-top-color: var(--accent); +} +/* Hide the text. */ +._1ClcF { + font-size: 0px; +} +/** Theme note. */ +.app ._1Iexl ._1ClcF::before { + display: block; + margin-bottom: -20px; + font-size: 16px; + content: var(--message) var(--changes) !important; +} +/** Theme info. */ +.app ._1Iexl ._1ClcF::after { + display: block; + margin-top: 10px; + padding-top: 10px; + font-size: 16px; + content: var(--version) !important; + border-top: 1px solid var(--darker); +} + +/* Left drawer. */ +#app .app #side { + background-color: var(--darker); +} + +/* Chat list. */ +#side > header { + background-color: var(--darker) !important; +} + +/* Notifications && more!! */ +#side ._3YewW { + box-shadow: inset 0 0 0 2px var(--accent); + background-color: var(--darker) !important; +} +/* Text color. */ +#side ._3YewW .l2BEH * { + color: var(--lighter); +} + +/* Search or start new chat. */ +#side ._3CPl4 { + border-bottom: 0px solid var(--dark); + background-color: var(--darker) !important; + background-color: transparent !important; +} +/* Label background. */ +#side ._3CPl4 .gQzdc label, +.gQzdc._3sdhb, +._2dA13 ._15JHr .gQzdc { + border: 0px solid var(--dark); + background-color: var(--dark) !important; +} +/* Input element. */ +#side ._3CPl4 .gQzdc label input { + color: var(--light); + background-color: transparent; +} +/* Active. */ +#side ._3CPl4 .gQzdc._3sdhb { + background-color: var(--dark) !important; +} + +/* New group and group info buttons. */ +._2EXPL .dIyEr ._1jJLh, +._2EXPL .dIyEr ._1WliW { + box-shadow: 0 0 8px -1px var(--shadow) !important; + background-color: var(--dark) !important; +} + +/* Search results. */ +#side ._1AKfk { + color: var(--accent); + background-color: var(--dark); +} +/* Matching results. */ +#side .matched-text { + color: var(--accent) !important; +} + +/* Contacts wrapper. */ +#side ._1NrpZ, +._2fq0t ._1lIXT { + background-color: transparent !important; +} +/* Contacts. */ +#side ._1NrpZ ._2EXPL, +._2fq0t ._66JgU { + transition: 200ms ease-in-out; + background-color: transparent !important; +} +/* On event. */ +#side ._1NrpZ ._2EXPL._1f1zm, +#side ._1NrpZ ._2EXPL:hover { + background-color: var(--dark) !important; +} +/* Text color. */ +#side ._1NrpZ [class*="_3j7s9"] * { + color: var(--light); +} +/* Avatar wrapper background. */ +._1WliW { + box-shadow: 0 0 8px -1px var(--shadow) !important; + background-color: transparent !important; +} + +/* New message indicator. */ +#side .OUeyt { + color: var(--lighter) !important; + background-color: var(--darker) !important; + box-shadow: inset 0 0 0 2px var(--accent); +} + + +/* Settings. */ +._2fq0t { + background-color: var(--darker) !important; +} +/* Header color. */ +._2fq0t header { + min-height: 50px; + height: auto; + background-color: var(--darker) !important; +} +/* Reset header height. */ +._2fq0t header > div:first-child { + padding: 12px 0 !important; + height: auto; +} +/* Reset header title in left/right drawers. */ +._2fq0t ._1xGbt { + margin-top: 2px !important; + font-size: 16px; +} +/* Transparent sections. */ +._2fq0t ._1CRb5 { + box-shadow: none !important; + background-color: transparent !important; +} +/* Highlighted sections. */ +._2fq0t ._3hhmj ._1CkkN, +._3UUn3 { + background-color: var(--dark) !important; +} +/* Change profile picture. */ +._2fq0t .WX_XW, +._2fq0t ._2Lbqu { + background-color: rgba(0, 0, 0, 0.5) !important; +} +/* Text color. */ +._2fq0t * { + color: var(--light); +} +/* Zoom in/out. */ +._2LALH { + background-color: var(--dark) !important; +} + +/* Option/select elements. */ +.uyEaY select { + border-color: var(--accent); +} +.uyEaY select option { + background-color: var(--dark); +} + +/* Archived chat image. */ +._2fq0t ._2Lev2 { + background-color: var(--dark) !important; +} + +/* Body. */ +._2fq0t ._2sNbV ._1CkkN, +._2fq0t ._2sNbV ._2EXPL { + background-color: transparent; +} +/* On event. TODO: Fixed, but it might still overlap somewhere. */ +.k1feT ._2sNbV > ._1CkkN:hover, +._2fq0t ._2sNbV ._1CkkN:hover { + background-color: var(--dark); +} + +/* New chat section. */ +._2fq0t .gQzdc label { + border: none; + background-color: var(--dark); +} +/* Input element. */ +._2fq0t .gQzdc label input { + background-color: transparent; +} + +/* New group. */ +._2fq0t ._39pS- { + background-color: transparent !important; +} +/* Header. */ +._2fq0t ._1AKfk { + background-color: var(--darker) !important; +} +/* On event. */ +.k1feT ._2fq0t ._2EXPL._1f1zm, +.k1feT ._2fq0t ._2EXPL:hover { + background-color: var(--dark) !important; +} +/* Search element */ +._66JgU ._3_3Rs { + border-bottom: none !important; +} +._66JgU ._3_3Rs input, +._66JgU ._3_3Rs ::placeholder { + color: var(--lighter) !important; +} + +/** Context/dropdown menu. */ +._1RQfk { + background-color: var(--darker) !important; + box-shadow: 0 4px 16px 0 var(--shadow) !important; +} +._1RQfk li:hover, +._1RQfk li:hover div { + color: var(--accent) !important; + background-color: var(--dark) !important; +} +._1RQfk div, +._1ArIP div { + color: var(--light); +} + +/* Middle drawer. */ +.app ._1Iexl ._1GX8_ { + background-color: var(--dark); +} +/* Doodle background. TODO: Plans for the future. */ +.app .YUoyu { +filter: invert(100%) opacity(0.45) !important; } +/* Jump to present button. */ +._298R6 { + box-shadow: 0 4px 8px 2px var(--shadow) !important; + background-color: var(--darker) !important; +} +/* Number of messages. */ +._298R6 .OUeyt { + background-color: var(--accent) !important; +} + +/* Header. */ +._1Iexl #main header { + border: none; + background-color: var(--dark); +} +/* Text color. */ +._1Iexl #main header ._1WBXd * { + color: var(--light); +} + +/* Header text color. #22 */ +#main > header > div span[title] { + color: var(--light); +} +/* Header separator. */ +#main > header::after { + border-bottom-color: var(--darker); + background-color: transparent; +} + +/* Footer. */ +._1Iexl #main footer { + border-top: 1px solid var(--darker); + background-color: var(--darker); +} +/* Input wrapper. */ +#main footer > div { + color: var(--light); + border: none; + /* border-bottom: 2px solid var(--dark); */ + background-color: var(--dark); +} +/* Input element. */ +#main footer > div:nth-child(1) > div:nth-child(2) { + border: none !important; + color: var(--light); + background-color: var(--darker) !important; +} +/* Voice message duration. */ +._30ie- { + color: var(--light) !important; +} + +/* Unknown contact. */ +.TYhk9 { + border-color: var(--darker) !important; + background-color: var(--dark) !important; + box-shadow: 0 0px 8px 2px var(--shadow) !important; +} +/* Buttons. */ +.TYhk9 ._1sB6s { + color: var(--light) !important; + background-color: var(--darker) !important; +} + +/* Shared contact button colors. */ +.b332w { + color: var(--accent) !important; +} +/* Shared contact text. */ +.AVd_p { + color: var(--lighter) !important; +} +/* View contact. */ +._36ApL { + background-color: transparent !important; +} + +/* Hide 'Type a message' once focused. */ +._3F6QL._2WovP.focused ._39LWd { + color: transparent; +} +/* Placeholder text color. */ +._39LWd { + color: var(--lighter) !important; +} +/* On event smoothness. */ +.pluggable-input.pluggable-input-compose > div:first-child { + transition: 150ms ease-in-out !important; +} + + +/* Right drawer. */ +.app ._2yeJ5 ._2fq0t { + background-color: var(--darker); +} +/* Border-color. */ +.app ._2yeJ5 { + border-left-color: transparent !important; +} +/* Header. */ +.app ._2yeJ5 ._2fq0t header { + background-color: var(--darker); +} +/* Text color. */ +.app ._2yeJ5 ._2fq0t header div { + color: var(--light); +} + +/* Group info sections. */ +.app ._2yeJ5 ._2fq0t ._1CRb5 { + /*box-shadow: 0 1px 3px shadow /**/ + box-shadow: none; + background-color: transparent; +} +/* Group name. */ +.app ._2yeJ5 ._1CRb5 ._1DTd4, +.media-body .CzI8E { + margin-bottom: 10px; + color: var(--light); + border-bottom: 2px solid var(--accent) !important; +} +/* User's name. */ +.app ._2yeJ5 .copyable-text { + color: var(--light); +} +/* Accent color text. */ +.app ._2yeJ5 ._1CRb5 ._1sYdX { + font-weight: 400; + color: var(--accent) !important; +} +/* Mute/Starred Messages. */ +.app ._2yeJ5 ._1CRb5 ._3LL06 { + color: var(--light); +} + +/* Group options. */ +.app ._2yeJ5 ._1CRb5 ._2EXPL, +.app ._2yeJ5 ._1CRb5 ._1CkkN { + transition: 200ms ease-in-out; + background-color: transparent; +} +/* On event. */ +.app ._2yeJ5 ._1CRb5 ._2EXPL._3xj48:hover, +.app ._2yeJ5 ._1CRb5 ._1CkkN:hover { + background-color: var(--dark); +} +/* Text color. */ +.app ._2yeJ5 ._1CRb5 ._2EXPL * { + color: var(--light); +} +/* Admin color. */ +.app ._2yeJ5 ._1CRb5 ._2e8Mu { + border: 2px solid var(--accent); +} + + +/* Search messages. TODO: Apply this to all search elements. */ +._2yeJ5 ._1iMEz, +._1iopp/*, ._2yeJ5 ._1iMEz._3sdhb*/ +{ + background-color: var(--darker) !important; +} +/* Input wrapper. */ +._1iMEz label { + border: 0px solid var(--dark) !important; + background-color: var(--dark) !important; +} +._1iMEz ._3sdhb label { + background-color: transparent !important; +} +/* Input element. */ +._1iMEz label input { + background-color: transparent !important; +} + +/* Search messages body. */ +.YAPQk { + background-color: var(--darker) !important; +} +/* Matching results. */ +._2yeJ5 .matched-text { + color: var(--accent) !important; +} +/* On event. */ +.YAPQk ._1f1zm > ._3j7s9, +.YAPQk ._3j7s9:hover { + background-color: var(--dark) !important; +} + +/* Search messages. */ +#pane-side ._2EXPL { + background-color: transparent !important; +} + +/* Starred messages. */ +._2yeJ5 .ZwkQK, +.ZwkQK { + background-color: var(--dark) !important; +} +/* On event. */ +.starred-msg-wrapper, +.MS-DH { + transition: 200ms ease-in-out !important; +} +/* On event. */ +.MS-DH._2-mCk, +.MS-DH._1baOM, +.MS-DH.ZuHmv { + background-color: var(--dark) !important; +} + + +/* Message info. */ +._3FAwT { + background-color: var(--dark) !important; +} +/* Doodle image. */ +._3FAwT .pane-chat-tile { + filter: invert(100%) opacity(0.8); +} +/* Read by. */ +._2yeJ5 ._2sNbV ._2HDl5 ._2wP_Y > div { + background-color: var(--dark) !important; +} + + +/* Media/docs/links section. */ +._2yeJ5 ._3b2Cf { + background-color: var(--darker) !important; +} +/* Active indicator. */ +._2yeJ5 ._3b2Cf:before { + background-color: var(--accent) !important; +} +/* Selected image. */ +._2Ry6_ ._2mlDB { + border-color: var(--accent) !important; +} +/* Selected links. */ +.D6ZWG { + background-color: var(--darker) !important; +} +/* Text color. */ +.D6ZWG ._1S4i5, +._2Mvo8.fyJXn { + color: var(--lighter); +} + +/** Media viewer. */ +#app ._1zcz2, +._3_R6X { + background-color: transparent !important; +} +/* Pseudo-element background. */ +#app ._1zcz2::before, +._3_R6X::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: var(--dark); + opacity: 0.8; + z-index: -1; +} +/* Chevron/preloader background. */ +._2-IeP, +._3dGYA { + background-color: var(--darker) !important; +} + +/* Header. */ +#app ._1zcz2 ._2YdsD, +._3_R6X ._1XwnX { + background-color: var(--dark) !important; +} +/* Inner element. */ +#app ._1zcz2 ._2EXPL { + background-color: transparent !important; +} +/* Text color. */ +#app ._1zcz2 ._2EXPL ._3j7s9 *, +._3_R6X ._12oAB, +._1XwnX * { + color: var(--light); +} + +/* Footer. */ +._3Qh77 { + border: none !important; + background-color: var(--darker) !important; +} +/* Selected image. */ +._3Qh77 ._1xQmx { + transform: scale(1) !important; + border: 3px solid var(--accent) !important +} +html[dir=ltr] .UPNDG:hover:not(._1xQmx) { + border: 0px solid var(--accent); + outline: 3px solid var(--accent) !important; +} + + + +/* Message bubbles. */ +.message-in, +.message-out, +.message { + background-color: var(--darker) !important; +} + +/* Message text color. */ +.message-in .selectable-text, +.message-out .selectable-text, +.quoted-mention, +._1upWv { + color: var(--light) !important; +} + +/* Use accent color for links. #20 */ +a[href].selectable-text { + color: var(--accent) !important; +} + +/* Forwarded message. */ +._15aTv { + color: var(--lighter) !important; +} + +/* Phone numbers of users that aren't your contacts. */ +._3Ye_R._1wjpf._1OmDL { + color: var(--lighter) !important; +} + +/* Mentions. */ +.message-in .matched-mention, +.message-out .matched-mention, +.message-out .matched-mention .at-symbol { + color: var(--accent) !important; +} + +/* Message meta text color. */ +[class*="message-"] ._2f-RV *, +[class*="message-"] ._2f-RV *, +[class*="message-"] ._1_Gu6 *, +[class*="message-"] ._27K_5 *, +[class*="message-"] ._1DZAH *, +[class*="message-"] ._3cMIj * { + color: var(--light); +} + +/* Image/gif/video meta wrapper. */ +.KYpDv ._1DZAH { + bottom: 8px; + padding: 2px 5px; + border-radius: 4px; + background-color: var(--shadow); +} +/* Text color. */ +.KYpDv ._1DZAH ._3EFt_ { + margin-top: 0px; + color: var(--lighter); +} + +/* Message options. */ +._1i1U7 { + /*transition: 200ms ease-in-out;/**/ + background: linear-gradient(to right, transparent 0%, var(--darker) 40%) !important; +} +/* Smooth transition. */ +.message span:last-child div { + transition: 50ms ease-in-out !important; +} + +/* Typing... */ +.vdXUe { + color: var(--accent) !important; +} + +/* System messages. */ +.Zq3Mc { + box-shadow: 0 2px 8px 0px var(--shadow) !important; + border-bottom: 3px solid var(--shadow) !important; + background-color: var(--darker) !important; +} +/* Text color and shadows. */ +.Zq3Mc * { + text-shadow: none !important; + color: var(--lighter) !important; +} +/* New message. */ +#main ._1mq8g { + border: none !important; + background-color: transparent !important; +} +/* X unread messages. */ +#main ._1mq8g .L89LI { + box-shadow: 0 0 8px 0 var(--shadow) !important; + color: var(--light) !important; + background-color: var(--darker) !important; +} + + +/* Document embeds. */ +._1vKRe { + border-color: var(--darker) !important; +} +/* Embed background. */ +._12xX7 { + background-color: var(--dark) !important; +} +/* Embed text color. */ +._12xX7 * { + color: var(--light); +} + +/* Link embeds. */ +._1sGGp._2nFG1, +._2lwig._2nFG1 { + background-color: var(--dark) !important; +} +/* Text color. */ +._1sGGp._2nFG1 *, +._2lwig._2nFG1 * { + color: var(--light); +} +/* Link options. */ +._2DNgV._2Cju4, +.jZ4tp._2Cju4 { + background: none !important; +} + + +/* Reply section. (= */ +footer .rstyJ { + box-shadow: 0 0px 8px 0 var(--darker) !important; + background-color: var(--darker) !important; +} +/* Fix margins. */ +footer .rstyJ > div:first-child { + margin: 0 0 5px 10px !important; + background-color: transparent !important; +} +/* Reply content. */ +footer .rstyJ > div:first-child > div { + background-color: var(--dark) !important; +} +/* Close button. */ +footer .rstyJ > div:last-child { + position: relative; + margin: 0 8px 5px 8px !important; + background-color: transparent !important; +} +/* Make the button larger. */ +footer .rstyJ > div:last-child > div svg { + padding: 18px; + border-radius: 6px; + background-color: var(--dark); +} + +/* Mention group members. */ +.Uukb4 { + color: var(--light); + border-left: none !important; + background-color: var(--dark) !important; +} +/* Wrapper. */ +.Uukb4 ._3v_lq { + transition: 300ms ease-in-out !important; + background-color: transparent !important; +} +/* Active. */ +.Uukb4 .j5Hcb._3v_lq, +.Uukb4 ._3v_lq:hover { + background-color: var(--darker) !important; +} + + +/* Select messages. */ +#main ._3D9Wd { + background-color: var(--shadow); +} +/* Hover over messages. */ +#main ._1o1sm { + transition: 100ms ease-in-out !important; +} +/* Selected message. */ +#main ._1o1sm:hover, +#main ._1o1sm._2nOMz { + background-color: var(--shadow) !important; +} + +/* Selected icon. */ +#main ._1VD7W { + border-color: var(--accent) !important; + background-color: var(--accente) !important; +} +/* Checkmark. */ +#main ._1VD7W ._1KfC8 { + border-bottom-color: var(--accent); + border-right-color: var(--accent); +} + +/* Footer/control/options. */ +#main ._2FsQ8, +#main ._3PWNn, +#main ._3XpR2 { + background-color: var(--darker); +} +/* Text color. */ +#main ._2FsQ8 span, +#main ._3XpR2 { + color: var(--light); +} + + + +/* Bubble tails -- experimental. */ +.tail .tail-container { + width: 0px !important; + height: 10px !important; + z-index: 0 !important; + border-top: 12px solid var(--darker); + background: none !important; +} +.tail.message-in .tail-container { + left: -10px !important; + top: 0px; + border-left: 10px solid transparent; + border-radius: 5px 0 0 0; +} +.tail.message-out .tail-container { + right: -10px !important; + top: 0px; + border-right: 10px solid transparent; + border-radius: 0 5px 0 0; +} + +/* Disable tails everywhere. */ +/* Enabled. */ +/* Disable tails everywhere except in chat. */ +.starred-msg-wrapper .tail-container, +.message-gallery .tail-container, +.MS-DH .tail-container { + display: none !important; +} +/* Rounded corners. */ +.message-gallery.tail-override-left, +.MS-DH .tail-override-left { + border-radius: 7.5px !important; +} + +/** Stickers. */ +._1rK-b { + background: none !important; +} +/* Sender. */ +._3JaNE ._2R8MP { + background-color: var(--darker) !important; +} +/* Time/status. */ +._3JaNE ._2Ll5c { + background-color: var(--darker) !important; +} +/* Reset message menu. */ +._1qhoQ { + top: 0 !important; + right: 0 !important; + background: none !important; +} +/* Icon background. */ +.YiYMT { + background-color: transparent !important; +} + +/* Temporary fix for emoji container. */ +#main footer > div:nth-child(2) > div { + border: 0; +} +/* Emoji/gif/stickers background. */ +._1UbeR, +._2HBs4, +._3Jgri, +._3Jgri > ._2z7kg { + background-color: var(--dark) !important; +} + +/* Emoji menu. */ +._3ZkhL .Sbkt2, +._3ZkhL .Sbkt2 > span > div, +._3ETD3, +.R0lQ6 { + background-color: var(--dark) !important; +} +/* Emoji tabs. */ +._3ZkhL ._2ByZq, +._3ZkhL ._1qUma, +._1qUma { + background: var(--darker) !important; +} +/* Tab indicator. */ +._2NQtS, +.YbzIC .YGHyX, +._1Wbpa { + background-color: var(--accent) !important; +} +/* Active button. */ +._1x_c3.bRYFY path { + fill: var(--accent) !important; +} + +/* Search emojis. */ +._3ZkhL label, +._2rR_l, +._2vjPO { + background-color: var(--dark) !important; +} +/* Text color. */ +._3ZkhL label input, +._2vjPO input, +.GclUX, +._3Ztfl { + color: var(--light) !important; +} + +/* Gif preloader background. */ +.zl5TR { + /* border: 2px dashed ; */ + background-color: var(--darker) !important; +} + +/* Preview. */ +._1drQ- { + background-color: var(--dark) !important; +} +/* Header. */ +._1drQ- header { + background-color: var(--accent) !important; +} +/* Text color. */ +._1drQ- header *, +._1drQ- .media-body * { + color: var(--lighter) !important; +} +/* Footer. */ +._1drQ- .media-collection { + background-color: var(--darker); +} +/* Button. */ +._1drQ- .media-collection .btn-fill, +._1drQ- ._3hV1n { + color: var(--lighter); + background-color: var(--accent) !important; +} + + +/* Emoji-wanna-be-round. */ +.emojik { + opacity: var(--emojiOpacity); + transition: transform 200ms cubic-bezier(0.59, 0.57, 0.39, 1.04); + clip-path: circle(47%) !important; +} +/* Selected emoji. */ +.emojik:focus, +.emojik:hover, +.emojik.selected { + box-shadow: none !important; + opacity: 1; + transform: scale(1.15); +} + +/* Emoji quick selection. */ +._1k6Uw { + border: 0 !important; + border-bottom: 1px solid var(--darker) !important; + background-color: var(--darker) !important; +} +/* Emoji race color popup. */ +._1ArIP, +._1ArIP ._1v2rQ { + background-color: var(--dark); +} +/* Separator. */ +._1ArIP ._2WvMb:first-child { + border-right: 2px solid var(--accent) !important; +} +/* Emoji menu triangle. */ +._1v2rQ { + background-color: var(--dark) !important; +} + + + +/* Backdrop. */ +._3gUiM, +#startup, +#initial_startup { + background-color: var(--dark) !important; +} +/* Modal. */ +._3gUiM ._2dA13 ._1CnF3, +._2dA13 ._18wuJ, +._2dA13 .IuYNx { + box-shadow: 0 0 0 1px var(--darker), 0 8px 16px 0px var(--shadow) !important; + background-color: var(--darker) !important; +} +/* Selected contact. */ +._3gUiM ._2EXPL._1f1zm, +._3gUiM ._2EXPL:hover, +._2EXPL._3ntaf:hover { + background-color: var(--dark) !important; +} +/* Text color. */ +._3gUiM ._1CnF3 * { + color: var(--light); +} +/* Header/footer. */ +._2dA13 header, +._2dA13 .iHLo1 { + background-color: var(--darker) !important; +} +/* Empty element below search bar. */ +._2fq0t span._3fOoY { + display: none !important; +} + + +/* Buttons. */ +.PNlAR, +._3hV1n, +._2Gki6, +._13iu_ { + color: var(--lighter) !important; + background-color: var(--accent) !important; +} +/* Muted checkbox color. */ +._1VD7W { + border-color: var(--accent); + background-color: var(--accent); +} +/* Buttons. */ +.PNlAR:hover, +._1WZqU:hover { + background-color: var(--dark) !important; +} + +/* Drop items. (-: */ +.drag-drop, +._2n-96 { + background-color: var(--dark) !important; +} +/* Footer. */ +._3nuGo { + background-color: var(--darker) !important; +} +/* Border. */ +._2n-96 ._3L-be { + border: 5px dashed var(--accent) !important; + color: var(--light) !important; +} + +/* Add file icon. */ +.GpvML, +._1ypOz { + background-color: var(--dark) !important; +} +/* Border. */ +._2gZno::after { + background-color: var(--accent) !important; +} + +/* Accent border. */ +.CzI8E, +._31WRs ._1DTd4 { + border-bottom-color: var(--accent) !important; +} +/* Text color. */ +._7HWvs { + color: var(--light) !important; +} + +/** Status area! */ +.app-wrapper-web ._3sacU { + background-color: transparent !important; +} +/* Pseudo-element background. */ +.app-wrapper-web ._3sacU::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: var(--dark); + opacity: 0.8; + z-index: -1; +} + +/* Normal icon. */ +span[data-icon="status-v3"] > svg > path:first-child { + opacity: 0.55 !important; +} +/* Unread status. */ +span[data-icon="status-v3-unread"] > svg > path:first-child { + opacity: 1 !important; +} + +/* Status modal! */ +/*.app-wrapper-web ._1abwg { +max-width: 1396px; +height: calc(100% - 36px); +margin-left: auto; +margin-right: auto; +top: 20px; }/**/ +/* Left hand side. */ +._3sacU .bZ3B9 { + background-color: var(--darker) !important; +} +/* Text color. */ +._3sacU .bZ3B9 ._35Ai0, +._3sacU .bZ3B9 ._1wjpf { + color: var(--lighter) !important; +} +/* Dimmed text. */ +._3sacU .bZ3B9 ._3_-c_, +._3sacU .bZ3B9 ._1Ou9Y, +._3sacU .bZ3B9 ._itDl { + color: var(--light) !important; +} + +/* Right hand side. */ +._3sacU ._1abwg { + background-color: var(--dark) !important; +} +/* Text color. */ +._3sacU ._1abwg ._2LuDL { + color: var(--light); +} + +/* Reply to status. */ +.C534L ._3PmkG { + border-radius: 5px !important; + background-color: var(--dark) !important; +} + + + +/* REMOVE STUFF. */ +/* Remove pseudo elements. */ +[class*="chat"]:before, +[class*="chat"]:after, +.gQzdc:after, +._1CkkN:before, +._3AwwN:after, +.MS-DH:before, +.MS-DH:after, +._3YwRO { + display: none !important; +} +/* Remove ONLY borders. */ +._1CkkN ._10xEB, +._14oqx .DcItJ, +html[dir] ._2EXPL:after, +._3j7s9, +._1fkhx, +.chat-body, +._3hhmj, +._2nmDZ { + border: none !important; +} +/* Some random iframe? */ +object { + display: none !important; +} + + + +/* Global icon color. */ +span:not([data-icon="image"]) > svg > path { + transition: 200ms ease; + fill: var(--icon) !important; +} +/* On event. */ +span:not([data-icon="image"]):hover > svg > path { + /* fill: var(--accent) !important; */ + opacity: 0.3 !important; +} + +/* Upload files. */ +.GK4Lv::after { + box-shadow: 0 1px 2px var(--shadow), 0 4px 8px var(--shadow) !important; +} + +/* Default profile picture background. */ +span[data-icon="default-user"] svg > path:first-child, +span[data-icon="default-group"] svg > path:first-child, +span[data-icon="default-broadcast"] svg > path:first-child { + fill: var(--dark) !important; +} + +span[data-icon="default-user"] svg > g > path:last-child, +span[data-icon="default-group"] svg > path:last-child, +span[data-icon="default-broadcast"] svg > path:last-child { + opacity: 0.7; + fill: var(--icon) !important; +} + +/* Sent message. */ +span[data-icon="msg-dblcheck"] svg path, +span[data-icon="status-dblcheck"] svg path, +span[data-icon="msg-check"] svg path, +span[data-icon="status-check"] svg path { + fill: var(--light) !important; + opacity: 0.5 !important; +} + +/* Sent AND seen message. */ +span[data-icon="msg-dblcheck-ack"] svg path, +span[data-icon="status-dblcheck-ack"] svg path, +span[data-icon="msg-dblcheck-ack-light"] svg path, +span[data-icon="status-v3-unread"] > svg > path:last-child { + fill: var(--accent) !important; + opacity: 1 !important; +} + +/* Misc icons fix. */ +span[data-icon="chevron-left"] svg path, +span[data-icon="chevron-right"] svg path, +span[data-icon="x-viewer"] svg path, +span[data-icon="download"] svg path, +span[data-icon="forward"] svg path, +span[data-icon="star-btn"] svg path, +span[data-icon="audio-file"] svg path:last-child, +span[data-icon="new-group"] svg path, +span[data-icon="add-user-light"] svg path, +span[data-icon="link"] svg path, +span[data-icon="ptt-in-blue"] svg path:first-child, +span[data-icon="ptt-out-blue"] svg path:first-child { + fill: var(--icon) !important; +} + +/* Audio message icons. */ +span[data-icon="ptt-in-blue"] svg path:first-child, +span[data-icon="ptt-out-blue"] svg path:first-child { + fill: transparent !important; +} + +/* Logo. */ +._3CSsZ > svg > path:first-child { + fill: var(--accent) !important; +} +span[data-icon="logo"] svg path:nth-child(1) { + fill: white !important; +} +span[data-icon="alert-phone"] svg path:first-child, +span[data-icon="logo"] svg path:nth-child(1n+2), +span[data-icon="whatsapp-logo"] svg path:first-child { + fill: var(--darker) !important; +} + +/* GIF icon opacity. */ +span[data-icon="emoji-gifs"] svg path { + fill: var(--icon) !important; + fill-opacity: 1 !important; +} + +/* Be cautious icons. */ +span[data-icon="exit"] svg path, +span[data-icon="thumbs-down"] svg path, +span[data-icon="delete-danger"] svg path { + fill: var(--mred) !important; +} + +/* Audio message. */ +span[data-icon="audio-file"] svg path { + fill: rgba(255, 173, 31, 0.8) !important; +} +/* Audio length bar. */ +._22cMG.fS1bA .nDKsM { + background-color: var(--accent) !important; +} +/* Slider thumb. */ +input[type=range]::-webkit-slider-thumb { + cursor: pointer; + background: var(--accent) !important; +} + +/* Rounded buttons. */ +span svg > path[fill="#00BFA5"] { + fill: var(--accent) !important; +} + +/* Disable background image on small resolutions. */ +@media screen and (max-width: 1441px) { + ._1FKgS::after { display: none !important; - } } +} - @media screen and (min-width: 1441px) { - /* Animation. */ - html[dir=ltr] ._3dqpi { +@media screen and (min-width: 1441px) { + /* Animation. */ + html[dir=ltr] ._3dqpi { /* display: none !important; */ - animation: _104Un 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.38); } + animation: _104Un 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.38); + } - /* App wrapper. */ - #app .app { + /* App wrapper. */ + #app .app { border-radius: 5px; - box-shadow: 0 4px 24px -2px var(--shadow); } - - /* Fullscreen. */ - /* Disabled. */ - - /* App background. */ - ._1FKgS::after { - top: 0px; right: 0px; - bottom: 0px; left: 0px; - height: auto; width: auto; - background-color: var(--dark) !important; - background-image: var(--image) !important; - background-repeat: no-repeat; - background-size: cover; - background-position: center; } + box-shadow: 0 4px 24px -2px var(--shadow); } - /* "Privacy mode." */ - /* Disabled. */ + /* Fullscreen. */ /* Disabled. */ - - /* Compact mode. */ - @media screen and (max-height: 500px) { - ._3dqpi { - min-height: auto; } - } - @media screen and (max-width:720px) { - /* .app > div { box-shadow: inset 0 0 0 4px var(--accent); } */ - - /* Header fix. */ - ._3auIg { - min-width: 220px; } - - /* Contacts flexbox. */ - .app.two > .k1feT, - .three .k1feT { - transition: 250ms ease-in-out; - flex: 0 0 075px !important; } - - /* Chat section. */ - ._1Iexl { - flex: 0 0 65% !important; } - - /* On hover or active sub-menus. */ - .app.two > .k1feT:hover, - .MZIyP .k1feT { - transition-delay: 1s !important; - /* TODO: Adjust panel width. */ - flex: 0 0 30% !important; } - - /* Info flexbox. */ - .three ._2yeJ5 { - width: calc(100% - 75px) !important; - left: 75px !important; } - - /* Chat flexbox. */ - .two > ._1Iexl { - margin: 0 !important; - flex: 0 0 calc(100% - 75px) !important; } - - /* Search contacts. */ - .two .k1feT:not(:hover) ._2MSJr { - padding: 0; - margin-left: 14px; } - - /* On hover. */ - .two .k1feT:hover ._2MSJr { - transition-delay: 1s !important; } - - /* Attach icons to avatars. */ - .two .k1feT ._3j7s9:not(:hover) ._1AwDx ._3Bxar { - z-index: 999 !important; - position: absolute !important; - top: 45px !important; - right: 5px !important; } - - /* Hide all icons except new messages. */ - .two .k1feT ._15G96 span:not(.OUeyt), - .two .k1feT .ZR5SB { - display: none !important; } - } - @media screen and (max-width: 720px) { - /* Width overflow fix. */ - ._3dqpi { - min-width: 100%; } - - /* On hover or active sub-menus. */ - .app.two > .k1feT:hover, - .MZIyP .k1feT { - transition-delay: 1s !important; - flex: 0 0 40% !important; } - } - - /* Custom CSS rules. */ - #test::after { content: "paste all your custom css here!" !important; } + /* App background. */ + ._1FKgS::after { +top: 0px; right: 0px; +bottom: 0px; left: 0px; +height: auto; width: auto; +background-color: var(--dark) !important; +background-image: var(--image) !important; +background-repeat: no-repeat; +background-size: cover; +background-position: center; } +} + +/* "Privacy mode." */ +/* Disabled. */ +/* Disabled. */ +/* Compact mode. */ +@media screen and (max-height: 500px) { +._3dqpi { +min-height: auto; } +} +@media screen and (max-width:720px) { +/* .app > div { box-shadow: inset 0 0 0 4px var(--accent); } */ + +/* Header fix. */ +._3auIg { +min-width: 220px; } + +/* Contacts flexbox. */ +.app.two > .k1feT, +.three .k1feT { +transition: 250ms ease-in-out; +flex: 0 0 075px !important; } + +/* Chat section. */ +._1Iexl { +flex: 0 0 65% !important; } + +/* On hover or active sub-menus. */ +.app.two > .k1feT:hover, +.MZIyP .k1feT { +transition-delay: 1s !important; +/* TODO: Adjust panel width. */ +flex: 0 0 30% !important; } + +/* Info flexbox. */ +.three ._2yeJ5 { +width: calc(100% - 75px) !important; +left: 75px !important; } + +/* Chat flexbox. */ +.two > ._1Iexl { +margin: 0 !important; +flex: 0 0 calc(100% - 75px) !important; } + +/* Search contacts. */ +.two .k1feT:not(:hover) ._2MSJr { +padding: 0; } + +/* On hover. */ +.two .k1feT:hover ._2MSJr { +transition-delay: 1s !important; } + +/** Hack for positioning unread counter. */ +#side:not(:hover) ._3j7s9 ._1AwDx ._3Bxar span > div { +z-index: 101; +position: absolute; } +/* ? Unread counter. */ +#side:not(:hover) div > .OUeyt { +height: 18px; +padding: 0 5px 0 5px; +margin: -5px 0 0 -35px; +background-color: var(--dark) !important; +box-shadow: 0 0 0 3px var(--darker) !important; } +/* On event. */ +/*#side:hover div > .OUeyt { +background-color: var(--dark) !important; +box-shadow: 0 0 0 3px var(--darker) !important; }*/ + +/* ? Message status. */ +.two .k1feT ._3j7s9 ._1VfKB { +z-index: 101; +position: absolute; +margin-left: -68px; +margin-top: 5px; +border-radius: 50%; +background-color: var(--dark); +box-shadow: 0 0 0 3px var(--darker); } +/* Background on event. */ +.two .k1feT ._2EXPL:hover ._1VfKB, +.two .k1feT ._2EXPL._1f1zm ._1VfKB { +background-color: var(--darker); +box-shadow: 0 0 0 3px var(--dark) !important; } + +/** Icon size. */ +.two .k1feT ._3j7s9 ._1VfKB span > svg { +padding: 2px; +height: 14px !important; +width: 14px !important; } + +/* Hide all icons except new messages. */ +.two .k1feT ._15G96 span:not(.OUeyt), +.two .k1feT .ZR5SB { +display: none !important; } +} +@media screen and (max-width: 720px) { +/* Width overflow fix. */ +._3dqpi { +min-width: 100%; } + +/* On hover or active sub-menus. */ +.app.two > .k1feT:hover, +.MZIyP .k1feT { +transition-delay: 1s !important; +flex: 0 0 40% !important; } +} +/* Custom CSS rules. */ +#test::after { content: "paste all your custom css here!" !important; }