phantop/dotfiles
1
0
Fork 0
mirror of https://github.com/Phantop/dotfiles synced 2024-11-27 09:03:17 +00:00
Code Issues Releases Wiki Activity
dotfiles/.local/share/qutebrowser/greasemonkey/whatsapp.js

1177 lines
39 KiB
JavaScript
Raw Blame History

// ==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() });
Reference in a new issue View git blame Copy permalink