// ==UserScript== // @name Dark WhatsApp Theme by Mew // @namespace http://userstyles.org // @description Complete, feature-rich, very customizable userstyle for WhatsApp. In active development, check the page to get involved. // @author Vednoc // @homepage https://userstyles.org/styles/142096 // @include http://web.whatsapp.com/* // @include https://web.whatsapp.com/* // @include http://*.web.whatsapp.com/* // @include https://*.web.whatsapp.com/* // @run-at document-start // @version 0.20190111153008 // ==/UserScript== (function() {var css = [ "/**", " ** name : Dark WhatsApp Theme by Mew", " ** info : A customizable theme for WhatsApp.", " ** project: https://github.com/vednoc/onyx", " ** discord: https://discord.gg/NpT8PzA", " ** version: 1.2.4", " ** author : vednoc", " ** license: MIT", " **/", " :root {", " --dark: #272C35;", " --darker: #1F232A;", " --light: #D1D1D1;", " --lighter: #E9E9E9;", " --accent: #7289DA;", " --icon: #E1E1E1;", " --shadow: rgba(0,0,0,0.10);", " --mred: #A3525B;", " --mgreen: #70A352;", " --mblue: #527AA3;", " --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 {", " line-height: 25px;", " content: \"Happy New Year! See the changelog at: https://github.com/vednoc/onyx/releases\";", " 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; }", " /* 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; }", "", "", " /* 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; }", " /* View contact. */", " ._36ApL {", " background-color: transparent !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; }", "", " /* 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. */", " /* Tails are 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 {", " display: none !important;", " }", " }", "", " @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); }", "", " /* App wrapper. */", " #app .app {", " border-radius: 5px;", " box-shadow: 0 4px 24px -2px var(--shadow); }", "", " /* Fullscreen. */", " /* Fullscreen is disabled. */", "", " /* App background. */", " html[dir] ._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.\" */", " /* Blurred contacts are disabled. */", " /* Blurred images are 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;", " 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. */", " /* Userstyles.org doesn\'t allow this; you\'ll have to use UserCSS version available at: https://github.com/vednoc/onyx */" ].join("\n"); if (typeof GM_addStyle != "undefined") { GM_addStyle(css); } else if (typeof PRO_addStyle != "undefined") { PRO_addStyle(css); } else if (typeof addStyle != "undefined") { addStyle(css); } else { var node = document.createElement("style"); node.type = "text/css"; node.appendChild(document.createTextNode(css)); var heads = document.getElementsByTagName("head"); if (heads.length > 0) { heads[0].appendChild(node); } else { // no head yet, stick it whereever document.documentElement.appendChild(node); } } })(); if (document.body.innerText.replace(/\n/g, ' ').search(/whatsapp works with.*to use whatsapp.*update/i) === 0) navigator.serviceWorker.getRegistration().then(function (r) { r.unregister(); document.location.reload() });