Comments (19)
gokberkakdeniz
commented on May 27, 2024
1
Hi, I made a black themed unofficial whatsapp client with electron by using your usercss. It converts usercss format to pure css (not added in program, just library). Now, it only uses default settings but i will try to implement usercss config screen.
On linux, the notifications works (idk how it works natively), but it does not flash frame (the extension that i used does not work on linux. You may look dev tools, if you want to debug it). Secondly, when you double click tray icon, it should show the window, if it is hidden, but it does not work in linux.
On windows, it flashes frame but does not send notification.
Also, on my and my friend's win10 pc, the app does not start with "electron ." script, so i cannot build app with electron packager.
Tested on Windows 10 1709 & 1803 x64 and Arch Linux + KDE. NodeJS 10.10.0 and Electron 3.0-beta5
repository: https://github.com/tncga/whats-up-darkness
from dark-whatsapp.
vednoc
commented on May 27, 2024
1
I tested it on Void Linux and I gotta admit, it looks pretty cool! My knowledge is fairly limited when it comes to Electron apps so I might not be of great help.
It would be quite cool if there was a menu from which you could enable/disable settings found in UserCSS version. Could every option be a separate CSS file that gets injected depending on whether it's enabled or disabled?
Hopefully these issues will get resolved since the prototype is looking good! It might be worth going through documentation and/or switching to a different cross-platform extension.
All in all, thank you for starting this project. I'll lurk around and see if and how I can contribute to it. 😄
from dark-whatsapp.
vednoc
commented on May 27, 2024
1
Hey @tinyCoder32, thanks!
I never had an account on AMO but I guess I could make one to support awesome extensions. 👍
I'd love to collaborate though I'm not using WhatsApp on my phone due to it being broken; close to two months without a phone. 😱 My only gripe with WhatsApp was the lack of a dark UI. Over time the dark theme evolved into having multiple features -- some of them are mine, others are suggestions from the users.
Perhaps if you put the extension on GitHub you'll get suggestions by the people that use your extension which will give you the chance to refine it even further. There is also the discoverability factor which comes in handy. Currently I'm not sure what would be handy to add, let me know if you already have something in mind. 😃
from dark-whatsapp.
tinyCoder32
commented on May 27, 2024
1
Hey, it's not about adding it or not of course 😀, your point is completely true! the loading time wasn't in my calculations.
I'll see what I can do about that, thanks.
from dark-whatsapp.
vurtomatic
commented on May 27, 2024
1
Hi there. I use this theme with an app called Hamsket which takes custom JS that I used to grab from userstyles.org. But the latest CSS is now here and there hasn't been an easy way to convert @vednoc 's CSS to JS for use in Hamsket.
I want to share a "hack" my dev friend just helped me out with. This has worked for me.
// ==UserScript==
// @name Dark-WhatsApp by Vednoc
// @namespace http://userstyles.org
// @description Complete, dark and light, very customizable userstyle for WhatsApp. In very active development on GitHub, 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.20200511225006
// ==/UserScript==
(function() {
var css = `
/*Paste all CSS...*/
/*BUT REMOVE @-moz-document domain("web.whatsapp.com")\ { */
/*So the CSS should start with :root */
`;
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);
}
}
})();
This is the code (Dark-WhatsApp v2.6.3) working on my Hamsket:
Show the code
// ==UserScript==
// @name Dark-WhatsApp by Vednoc
// @namespace http://userstyles.org
// @description Complete, dark and light, very customizable userstyle for WhatsApp. In very active development on GitHub, 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.20200511225006
// ==/UserScript==
(function() {
var css = `
:root {
--dark: #1f232a;
--darken: #252a33;
--darker: #333943;
--light: #e9e9e9;
--lighter: #a1a1a1;
--accent: #7289da;
--msg-l: #353b46;
--msg-r: #2c323d;
--yellow: #e5c512;
--orange: #df4b16;
--red: #dc322f;
--magenta: #f33682;
--violet: #6c71c4;
--blue: #268bd2;
--cyan: #2aa198;
--green: #859900;
--white: #fff;
--radius: 4px;
--t: transparent;
--shadow: rgba(0,0,0,0.145);
--sh-h: rgba(0,0,0,0.208);
--bshadow: 0 2px 4px var(--shadow);
--app-width: 1396px;
--emoji-o: 0.8;
--avatar-r: 50%;
--bg-image: url("https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/images/bg-blur-high.jpg");
--bg-opacity: 0.4;
--bg-blur: 0px;
--bg-hue: 320deg;
--bg-invert: 0;
--chat-image: url("https://web.whatsapp.com/img/bg-chat-tile_9e8a2898faedb7db9bf5638405cf81ae.png");
--chat-bg-o: 0.15;
--chat-bg-i: 0.6;
--c-m-hover: 0.6s;
--c-m-delay: 1.2s;
--blur-in: 0.4s;
--blur-out: 0.2s;
--ui-font: "custom font", "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
--version: "Dark-WhatsApp Lite v2.6.3 — May 14th, 2020";
--message: "Improved RTL message hacks, more info in the changelog. 🎉 🥳 I rewrote my Dark-Instagram theme, check it out at link below.";
--changes: "https://github.com/vednoc/dark-instagram";
}
@supports (-moz-user-select: none) {
:root * {
scrollbar-width: thin;
}
}
body {
color: var(--light) !important;
background-color: var(--dark) !important;
background-image: none;
}
body ::placeholder,
body ._1mpL5 {
color: var(--lighter) !important;
}
body strong,
body [contenteditable] {
color: var(--light) !important;
}
body a {
color: var(--accent);
}
body select {
color: var(--light) !important;
border-color: var(--darker) !important;
}
.uyEaY {
margin-right: 24px;
}
.uyEaY::before {
color: var(--lighter) !important;
}
body option {
color: var(--light) !important;
background-color: var(--darker) !important;
}
body ::-moz-range-progress {
background-color: var(--accent) !important;
}
body ::-moz-range-thumb {
background-color: var(--accent) !important;
}
body ::-moz-range-track {
background-color: var(--dark) !important;
}
body ._1N8Pv {
background-color: var(--accent) !important;
}
.bB3vH ._4_92b::-moz-range-thumb {
background-color: var(--green) !important;
}
body ::-webkit-progress-bar {
background-color: var(--darker) !important;
}
body ::-webkit-progress-value {
background-color: var(--accent) !important;
}
body ::-webkit-slider-runnable-track {
background-color: #808080 !important;
}
body ::-webkit-slider-thumb {
background-color: var(--accent) !important;
}
.bB3vH ._4_92b::-moz-range-thumb {
background-color: var(--green) !important;
}
body ::-webkit-scrollbar-track {
background-color: rgba(85,85,85,0.133);
}
body ::-webkit-scrollbar-thumb {
background-color: var(--accent);
}
body * {
scrollbar-color: var(--accent) rgba(85,85,85,0.133) !important;
}
body,
body button,
body input {
font-family: var(--ui-font);
}
body .landing-wrapper::before {
background-color: var(--darken) !important;
}
body .landing-header {
position: relative;
}
body .landing-header path[fill ^= "#FFF"] {
fill: var(--accent);
}
body .landing-header path[fill ^= "#00E"] {
fill: var(--dark);
}
body .landing-header div {
text-transform: unset;
color: var(--light) !important;
}
body .landing-header::after {
right: 0;
font-size: 14px;
font-weight: 500;
position: absolute;
content: var(--version);
}
body .landing-window:not(#z) {
border-radius: var(--radius);
background-color: var(--dark) !important;
box-shadow: inset 0 0 0 1px var(--darker), var(--bshadow);
}
body .landing-main a[href] {
color: var(--accent) !important;
}
body .landing-main label,
body .landing-main ._2yUXW {
color: var(--lighter) !important;
}
body .landing-main .landing-title {
color: var(--light) !important;
}
body .landing-main rect[fill ^= "#f2f"],
body .landing-main rect[fill ^= "#F2F"] {
fill: var(--darker);
}
body .landing-main path[fill ^= "#818"] {
fill: var(--accent);
}
body .landing-main div[data-ref] {
border-radius: 0;
filter: contrast(150%);
outline: 4px solid var(--white);
box-shadow: 0 0 0 4px var(--white);
}
body .landing-main div[data-ref] [role="button"] {
color: var(--white) !important;
background-color: var(--accent) !important;
}
body .landing-main div[data-ref]._1-KGg {
outline: 4px solid var(--accent);
box-shadow: 0 0 0 4px var(--accent);
}
body .landing-main + ._3B9bf {
background-color: var(--t) !important;
}
body .landing-main + ._3B9bf img {
opacity: 0.3;
}
body .landing-main + ._3B9bf [style *= "opacity: 1"] {
background-color: var(--t) !important;
}
body .landing-main .KACnm {
color: var(--white) !important;
background-color: var(--accent) !important;
box-shadow: var(--bshadow);
}
body .landing-main .KACnm::before {
border-bottom-color: var(--accent);
}
body [id *= "startup"] {
background-color: var(--dark) !important;
}
body [id *= "startup"] progress {
color: var(--accent) !important;
background-color: var(--darker) !important;
}
body [id *= "startup"] ::-moz-progress-bar {
background-color: var(--accent) !important;
}
body [id *= "startup"] circle {
stroke: var(--light);
}
body .hYvJ8 {
color: var(--light) !important;
background-color: var(--darken) !important;
box-shadow: inset 0 0 0 1px var(--darker), var(--bshadow);
}
body .hYvJ8 button {
color: var(--accent) !important;
}
body ._3JEcM {
color: var(--lighter) !important;
border-color: var(--lighter) !important;
background-color: var(--darken) !important;
}
body ._2e8Mu {
color: var(--accent) !important;
border-color: var(--accent) !important;
background-color: var(--darken) !important;
}
body ._2zynu {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
body ._2zynu a {
color: var(--accent);
}
body ._2zynu::after {
border-color: var(--accent) !important;
}
body ._2zynu [style] h1 {
color: var(--light) !important;
}
body ._2zynu [style] div {
color: var(--lighter) !important;
}
body ._2zynu [data-asset-intro-image] {
border-radius: 50%;
max-width: 200px;
max-height: 200px;
filter: opacity(0.75);
transition: opacity 0.6s ease;
}
body ._2zynu h1 + div[class] {
font-size: 0;
}
body ._2zynu h1 + div[class]::before {
display: block;
font-size: 16px;
margin-bottom: -16px;
white-space: pre-wrap;
content: var(--message) " \A\A " var(--changes);
}
body ._2zynu h1 + div[class]::after {
display: block;
font-size: 16px;
margin-top: 16px;
padding-top: 16px;
content: var(--version);
border-top: 1px solid var(--darker);
}
body ._2zynu ._3McX8 {
margin-top: 17px !important;
}
body ._2zynu ._1TgXb {
background-color: var(--darker) !important;
}
body .IMBOA {
margin-top: 16px !important;
}
body ._2a2hS {
background-color: var(--darker) !important;
}
body span[title *= "typing..."],
body .vdXUe {
color: var(--accent) !important;
}
.matched-text:not(#z) {
color: var(--accent) !important;
}
.matched-mention span,
[data-mention-jid] span {
color: var(--accent) !important;
}
.matched-mention .at-symbol,
[data-mention-jid] .at-symbol {
color: var(--lighter) !important;
}
.matched-mention:hover span,
[data-mention-jid]:hover span {
text-decoration: underline !important;
}
.matched-mention:hover .at-symbol,
[data-mention-jid]:hover .at-symbol {
text-decoration: none !important;
}
.me9CP {
border-color: var(--lighter) !important;
background-color: var(--darken) !important;
}
._1VD7W {
border-color: var(--accent) !important;
background-color: var(--accent) !important;
}
body .rAUz7 path:not([fill = "#009588"]) {
fill-opacity: 0.55;
}
body .rAUz7:active {
background-color: var(--dark) !important;
}
body .rAUz7._3TbsN {
background-color: var(--darker) !important;
}
body .rAUz7._3TbsN:not(#z):not(#y) [data-icon] path {
fill-opacity: 1 !important;
}
body ._10YBz,
body ._3UAb1 {
color: var(--light) !important;
background-color: var(--dark) !important;
opacity: 0.75;
box-shadow: var(--bshadow);
}
body ._10YBz svg path,
body ._3UAb1 svg path {
fill: var(--light) !important;
}
body svg[width = "18"][height = "18"] circle,
body svg[width = "20"][height = "20"] circle {
stroke: var(--green);
}
body svg[width = "34"][height = "34"] circle {
stroke: var(--lighter);
}
body .WX_XW {
color: var(--light) !important;
background-color: rgba(25,25,25,0.502) !important;
border-radius: 0 !important;
}
body #group-invite-link-anchor {
color: var(--accent) !important;
}
._2jPGD {
background-color: var(--darker) !important;
}
._2jPGD ._3y8EC::-webkit-slider-runnable-track {
background-color: var(--t) !important;
}
._2jPGD ._3y8EC::-moz-range-progress,
._2jPGD ._3y8EC::-moz-range-track {
background-color: var(--t) !important;
}
._2jPGD ._1y1Zk {
background-color: var(--accent) !important;
}
._9sTVb:not(#z) ::-webkit-slider-runnable-track {
background-color: rgba(136,136,136,0.502) !important;
}
._9sTVb:not(#z) ::-moz-range-track {
background-color: rgba(136,136,136,0.251) !important;
}
._3y8EC::-webkit-slider-runnable-track {
background-color: var(--t) !important;
}
._3L8ub .Q8uSF,
.bB3vH .Q8uSF {
background-color: var(--accent) !important;
}
.Q8uSF {
background-color: var(--t) !important;
}
.Q8uSF + ::-moz-range-progress,
.Q8uSF + ::-moz-range-thumb {
background-color: var(--blue) !important;
}
.Q8uSF + ::-moz-range-track {
background-color: #808080 !important;
}
._4_92b::-moz-range-track {
background-color: #808080 !important;
}
._3L8ub ._4_92b::-moz-range-thumb {
background-color: var(--light);
}
._3L8ub .Q8uSF,
._1SDZT:not(#z) ._4_92b::-moz-range-thumb {
background-color: var(--blue) !important;
}
.bB3vH .Q8uSF {
background-color: var(--blue) !important;
}
.bB3vH ._4_92b::-webkit-slider-thumb {
background-color: var(--blue) !important;
}
.llRZq {
box-shadow: 0 4px 12px 2px var(--sh-h) !important;
}
#app > div::after {
top: calc(-2 * var(--bg-blur));
right: calc(-2 * var(--bg-blur));
bottom: calc(-2 * var(--bg-blur));
left: calc(-2 * var(--bg-blur));
height: unset;
width: unset;
filter: blur(var(--bg-blur)) opacity(var(--bg-opacity)) invert(var(--bg-invert)) hue-rotate(var(--bg-hue));
background-image: var(--bg-image);
background-size: cover;
background-color: var(--t) !important;
}
#app > div .app {
background-color: var(--dark) !important;
background-image: none;
}
@media (min-width: 1441px) {
#app > div .app {
border: 1px solid var(--darker);
border-radius: var(--radius);
box-shadow: var(--bshadow);
}
#app > div .app,
._11ARv {
width: calc(100% - 38px);
max-width: var(--app-width);
}
}
#app > div .app.three > ._37f_5 {
width: calc(100% + 1px);
}
#app > div .app ._2rI9W {
margin-right: -1px;
}
._2UkYn,
._1WliW,
._1jJLh,
._2Lev2 {
border-radius: var(--avatar-r) !important;
background-color: var(--dark) !important;
}
._2UkYn > img,
._1WliW > img,
._1jJLh > img,
._2Lev2 > img {
border-radius: var(--avatar-r) !important;
}
.emojik {
transition: transform 0.15s ease;
}
.emojik:not(:hover):not(:focus):not(.selected) {
filter: opacity(var(--emoji-o));
}
.emojik:hover:not(.selected),
.emojik:focus {
opacity: 1;
transform: scale(1.2);
box-shadow: none !important;
}
.emojik.selected {
box-shadow: 0 0 0 1px var(--darken), 0 0 0 3px var(--accent) !important;
}
._3ZkhL._3NVMy {
border-radius: var(--radius) !important;
box-shadow: var(--bshadow);
}
._3ZkhL._3NVMy ._1qUma {
background-color: var(--darken) !important;
box-shadow: inset 0 -1px var(--darker);
}
._3ZkhL._3NVMy ._1qUma [style] {
background-color: var(--accent) !important;
}
._3ZkhL._3NVMy ._3tlsa {
background-color: var(--dark) !important;
}
._3ZkhL._3NVMy ._3tlsa [data-tab] {
background-color: var(--dark) !important;
}
._3ZkhL._3NVMy ._3tlsa [data-tab] label {
color: var(--light) !important;
background-color: var(--darken) !important;
box-shadow: inset 0 0 0 1px var(--darker);
}
._3ZkhL._3NVMy ._3tlsa [data-tab] input {
color: var(--light) !important;
}
._3ZkhL._3NVMy ._3tlsa ._3xMAk {
color: var(--lighter) !important;
}
._3ZkhL._3NVMy + [data-animate-dropdown-nib] {
border-bottom: 1px solid var(--darker);
border-right: 1px solid var(--darker);
background-color: var(--dark) !important;
box-shadow: none;
}
.overlay {
background-color: var(--t) !important;
}
.overlay::before {
content: "";
z-index: -1;
opacity: 0.81;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--dark) !important;
}
.overlay ._2YdsD,
.overlay ._3pRd1 {
background-color: var(--darken) !important;
box-shadow: 0 1px var(--darker);
}
.overlay ._2YdsD ._1AwDx,
.overlay ._3pRd1 ._1AwDx {
color: var(--lighter) !important;
}
.overlay ._2YdsD ._25Ooe,
.overlay ._3pRd1 ._25Ooe {
color: var(--light) !important;
}
.overlay ._2YdsD ._2EXPL:not(#z):hover,
.overlay ._3pRd1 ._2EXPL:not(#z):hover {
background-color: var(--t) !important;
}
.overlay ._3fOoY {
background-color: var(--darken) !important;
overflow: hidden;
box-shadow: 0 1px var(--darker);
}
.overlay ._3fOoY > div:not(#z) {
background-color: var(--t) !important;
border: none !important;
}
.overlay ._3fOoY > div:not(#z) > div {
background-color: var(--darker) !important;
}
.overlay ._21bWq {
background-color: var(--darken) !important;
}
.overlay .KNt1E:not(#z) {
background-color: var(--darken) !important;
box-shadow: inset 0 0 0 1px var(--darker), var(--bshadow);
}
.overlay .KNt1E:not(#z):hover {
background-color: var(--darker) !important;
}
.overlay .X5OiD {
background-color: var(--darker) !important;
}
.overlay ._26BZr,
.overlay .JmH7x,
.overlay ._2HiNF {
color: var(--lighter) !important;
}
.overlay ._26BZr {
font-weight: normal !important;
}
.overlay ._2yVvV {
color: var(--light) !important;
}
.overlay [role = "button"]._1WZqU {
color: var(--lighter) !important;
}
.overlay [role = "button"]._1WZqU:hover {
color: var(--light) !important;
background-color: var(--darken) !important;
box-shadow: none;
}
.overlay [role = "button"]._1WZqU.PNlAR {
color: var(--white) !important;
background-color: var(--accent) !important;
box-shadow: var(--bshadow);
transition: 0.15s ease;
}
.overlay [role = "button"]._1WZqU.PNlAR:hover {
opacity: 0.8;
}
.overlay [data-animate-modal-popup]:not(._2ILbv) {
border: 1px solid var(--darker);
border-radius: var(--radius);
background-color: var(--dark) !important;
box-shadow: 0 4px 8px 2px var(--shadow);
}
.overlay [data-animate-modal-popup]:not(._2ILbv) ._13HPh {
color: var(--light) !important;
}
.overlay [data-animate-modal-popup]:not(._2ILbv) ._2VDPW {
background-color: var(--darken) !important;
}
.overlay [data-animate-modal-popup]:not(._2ILbv) .copyable-area {
background-color: var(--t) !important;
}
.overlay [data-animate-modal-popup]:not(._2ILbv) .copyable-area > header {
border-bottom: 1px solid var(--darker);
color: var(--light) !important;
background-color: var(--darken) !important;
}
.overlay [data-animate-modal-popup]:not(._2ILbv) .copyable-area ._1AKfk {
color: var(--accent) !important;
background-color: var(--t) !important;
}
.overlay [data-animate-modal-popup]:not(._2ILbv) .copyable-area ._2UaNq {
color: var(--light) !important;
background-color: var(--t) !important;
}
.overlay [data-animate-modal-popup]:not(._2ILbv) .copyable-area > span > div[style] {
border-top: 1px solid var(--darker);
color: var(--light) !important;
background-color: var(--darken) !important;
}
.overlay [data-animate-modal-popup]:not(._2ILbv) .copyable-area > span > div[style] [role = "button"] {
background-color: var(--accent) !important;
box-shadow: var(--bshadow);
}
.overlay [data-animate-modal-popup]:not(._2ILbv) .copyable-area.r3Nu1,
.overlay [data-animate-modal-popup]:not(._2ILbv) .copyable-area._1dGTK {
border-left: none !important;
}
._3UUn3 {
background-color: var(--darken) !important;
}
.overlay [data-animate-modal-popup]:not(._2ILbv) span[role = "button"] {
color: var(--accent) !important;
}
.overlay [data-animate-modal-popup]:not(._2ILbv) hr {
border-color: var(--darker) !important;
}
.overlay [data-animate-modal-popup]:not(._2ILbv) hr + div {
color: var(--light) !important;
}
._1CnF3 {
padding: 0 !important;
}
._1CnF3 > div {
padding: 22px 24px 20px !important;
}
.overlay [data-animate-modal-body] ._1BdTk {
border-left: none;
}
.overlay [data-animate-modal-body] ._7RNZ3 {
background-color: var(--darken) !important;
}
.overlay [data-animate-modal-body] ._2LALH {
background-color: var(--darken) !important;
box-shadow: var(--bshadow);
}
.overlay [data-animate-modal-body] ._2LALH span:hover {
opacity: 0.6;
}
.overlay [data-animate-modal-body] ._2hytu,
.overlay [data-animate-modal-body] ._22aOT {
min-height: 91px;
background-color: var(--darken) !important;
box-shadow: inset 0 1px var(--darker);
}
._36ApL,
._3afBu,
.overlay ._1VX5S {
background-color: var(--t) !important;
box-shadow: none !important;
}
._36ApL div._19i9v,
._3afBu div._19i9v,
.overlay ._1VX5S div._19i9v {
color: var(--accent) !important;
}
._36ApL [class *= "text"],
._3afBu [class *= "text"],
.overlay ._1VX5S [class *= "text"] {
color: var(--light) !important;
}
._2mZ8F {
background-color: var(--darken) !important;
}
.overlay ._8icek {
fill-opacity: 0.55;
}
.overlay ._2S_XV {
color: var(--light) !important;
background-color: var(--darken) !important;
}
.overlay ._2S_XV * {
color: var(--lighter) !important;
}
.overlay ._2S_XV + div span:first-child {
color: var(--light) !important;
}
.overlay ._2S_XV + div span:last-child {
color: var(--lighter) !important;
}
.overlay .WOXAS,
.overlay ._1v8mQ {
background-color: var(--t) !important;
box-shadow: 0 1px var(--darker) !important;
}
.fwByR {
color: var(--accent) !important;
}
.overlay ._1wt6r,
._3Yulp,
.bHCVK {
color: var(--lighter) !important;
}
.overlay ._3hnO5 {
border-color: var(--accent) !important;
}
.overlay ._1T8rb {
color: var(--accent) !important;
background-color: var(--t) !important;
}
.overlay .NWyjc.AZ3xD {
margin: 16px;
}
.cFkAx._2ojWN ._3FR9x {
color: var(--light) !important;
}
.vLVax {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
[style *= "d-color: rgb(237, 233, 228)"] {
position: relative;
}
[style *= "d-color: rgb(237, 233, 228)"]::before {
content: "Use this for Dark-WhatsApp";
position: absolute;
font-size: 15px;
width: 100%;
color: #000 !important;
}
[style *= "rgb(222, 227, 233)"],
[style *= "rgb(217, 218, 222)"],
[style *= "rgb(192, 193, 196)"] {
background-color: var(--dark) !important;
}
._2qhsi {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
box-shadow: var(--bshadow) !important;
}
[data-animate-status-v3-modal-background = "true"] {
background-color: var(--t) !important;
}
[data-animate-status-v3-modal-background = "true"]::before {
content: "";
z-index: -1;
opacity: 0.81;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--dark) !important;
}
[data-animate-status-v3-modal-background = "true"] > div {
background-color: var(--dark) !important;
}
@media (min-width: 1441px) {
[data-animate-status-v3-modal-background = "true"] > div {
border-radius: var(--radius) !important;
border: 1px solid var(--darker) !important;
}
}
[data-animate-status-v3-modal-background = "true"] > div ._35Ai0 {
color: var(--light) !important;
}
[data-animate-status-v3-modal-background = "true"] > div ._3_-c_,
[data-animate-status-v3-modal-background = "true"] > div ._1Ou9Y {
color: var(--lighter) !important;
}
[data-animate-status-v3-modal-background = "true"] > div hr {
opacity: 1 !important;
border: none !important;
border-top: 1px solid var(--darker) !important;
}
[data-animate-status-v3-modal-background = "true"] > div > div[class]:nth-child(1) {
background-color: var(--darken) !important;
box-shadow: 1px 0 var(--darker);
}
@media (min-width: 1441px) {
[data-animate-status-v3-modal-background = "true"] > div > div[class]:nth-child(1) {
border-radius: var(--radius) 0 0 var(--radius);
}
}
[data-animate-status-v3-modal-background = "true"] > div > div[class]:nth-child(2) ._2LuDL {
color: var(--lighter) !important;
}
[data-animate-status-v3-modal-background = "true"] > div > div[class]:nth-child(2) svg[width][height] path {
fill: var(--lighter) !important;
}
[data-animate-status-v3-modal-background = "true"] > div ._2EXPL {
border-top: none;
}
._3OHGh {
background-color: var(--dark) !important;
}
._1k6Uw._129il {
border-color: var(--darken) !important;
}
circle {
stroke: var(--lighter) !important;
}
circle._1tACm {
stroke: var(--accent) !important;
}
.C73Q6 {
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
.C73Q6 .UPNDG._1xQmx {
border: none !important;
outline: 4px solid var(--accent);
}
.C73Q6 .UPNDG:hover:not(._1xQmx):not(#z) {
outline: 4px solid var(--accent) !important;
}
span[class][data-icon] > svg > path {
fill: var(--light);
transition: 0.15s ease;
}
span[class][data-icon]:hover > svg > path {
opacity: 1;
fill-opacity: 1 !important;
}
span[class][data-icon][data-icon *= "chevron-"] > svg > path,
span[class][data-icon][data-icon = "down-context"] > svg > path {
fill-opacity: 0.55;
}
span[class][data-icon][data-icon*="logo-"] > svg > path {
fill-opacity: 0.6 !important;
}
span[class][data-icon][data-icon*="logo-"] > svg > path:first-child {
fill: var(--dark);
}
span[class][data-icon][data-icon*="logo-"] > svg > path:last-child {
fill: var(--light);
}
span[class][data-icon][data-icon="muted"] > svg > path,
span[class][data-icon][data-icon="pinned"] > svg > path,
span[class][data-icon][data-icon="status-time"] > svg > path,
span[class][data-icon][data-icon="status-image"] > svg > path,
span[class][data-icon][data-icon="status-video"] > svg > path,
span[class][data-icon][data-icon="status-gif"] > svg > path,
span[class][data-icon][data-icon="status-vcard"] > svg > path,
span[class][data-icon][data-icon="status-sticker"] > svg > path,
span[class][data-icon][data-icon="status-document"] > svg > path,
span[class][data-icon][data-icon="status-ptt-gray"] > svg > path,
span[class][data-icon][data-icon="recalled-in"] > svg > path,
span[class][data-icon][data-icon="recalled-out"] > svg > path {
fill-opacity: 0.3 !important;
}
span[class][data-icon][data-icon="msg-time"] > svg > path,
span[class][data-icon][data-icon="forwarded"] > svg > path {
fill-opacity: 0.55 !important;
}
span[class][data-icon = "status-v3"] path {
fill-opacity: 0.55 !important;
}
span[class][data-icon = "status-v3-unread"] path:not(:last-child) {
fill-opacity: 0.55 !important;
}
span[class][data-icon = "status-v3-unread"] path:last-child {
fill: var(--accent) !important;
}
span[class][data-icon = "chat"] path {
fill-opacity: 0.55 !important;
}
span[class][data-icon = "menu"] path {
fill-opacity: 0.55 !important;
}
span[class][data-icon = "back-blue"] path {
fill: var(--blue) !important;
}
span[class][data-icon ^= "default-"] path:first-child {
fill: var(--dark);
}
span[class][data-icon ^= "default-"] path:last-child {
fill: var(--lighter);
}
span[class][data-icon $= "-square"] path:first-child {
fill: var(--t);
}
span[class][data-icon ^= "business-"] path {
fill: var(--lighter);
}
span[class][data-icon = "audio-file"] path:first-child {
fill: var(--orange);
}
span[class][data-icon = "audio-file"] path:last-child {
fill: var(--darken);
}
span[class][data-icon ^= "ptt-"] path:first-child {
fill: var(--darker);
}
span[class][data-icon ^= "ptt-"] path:last-child {
fill: var(--blue);
}
span[class][data-icon *= "ptt-blue"] path {
fill: var(--blue) !important;
}
._3tiW9 .ptt-status-icon {
fill: var(--green) !important;
}
.Zj18s .ptt-status-icon {
fill: var(--lighter) !important;
}
span[class][data-icon *= "-check"] path {
fill: var(--lighter) !important;
}
span[class][data-icon *= "-dblcheck"] path {
fill: var(--lighter) !important;
}
span[class][data-icon *= "-dblcheck-ack"] path,
.a5DO0 span[data-icon *= "-dblcheck"] path {
fill: var(--accent) !important;
}
._2lSfP[data-icon *= "-dblcheck"]:not(#z) path,
._1xtH9[data-icon *= "-dblcheck"]:not(#z) path,
.wrS81[data-icon *= "-dblcheck"]:not(#z) path {
fill: var(--accent) !important;
}
span[class][data-icon *= "check"] path {
fill-opacity: 1 !important;
}
span[class][data-icon = "exit"] path,
span[class][data-icon = "thumbs-down"] path,
span[class][data-icon = "delete-danger"] path,
span[class][data-icon = "status-miss_video"] path,
span[class][data-icon ^= "miss"] path {
fill: var(--red) !important;
}
svg[width = "50"][height = "50"] > circle[fill] {
stroke: var(--lighter);
}
span[class][data-icon = "sticker-placeholder"] > svg > path {
fill: var(--darker);
fill-opacity: 0.6;
}
span[class][data-icon = "search"] path[fill-opacity = ".3"] {
fill-opacity: 0.55;
}
span[class][data-icon = "checkbox-round-checked"] [fill = "#00BFA5"] {
fill: var(--accent) !important;
}
span[class][data-icon = "checkbox-round-checked"] [fill = "#FFF"] {
fill: var(--white) !important;
}
span[class][data-icon *= "status-ptt-green"] > svg > path {
fill: var(--accent);
}
span[class][data-icon = "star"] > svg > path,
span[class][data-icon = "star-in"] > svg > path,
span[class][data-icon = "star-light"] > svg > path {
opacity: 1;
fill: var(--accent);
}
span[class][data-icon = "down"] {
fill-opacity: 0.55;
}
div:not(#z)[style ^= "transform-origin:"] {
border: 1px solid var(--darker);
border-radius: var(--radius);
background-color: var(--darken) !important;
box-shadow: 0 4px 12px var(--sh-h);
}
div:not(#z)[style ^= "transform-origin:"] ul > div {
color: var(--light) !important;
}
div:not(#z)[style ^= "transform-origin:"] li {
transition: background 0.2s ease;
}
div:not(#z)[style ^= "transform-origin:"] li._1exov {
background-color: var(--darker) !important;
}
div:not(#z)[style ^= "transform-origin:"] li div,
div:not(#z)[style ^= "transform-origin:"] li span {
color: var(--lighter) !important;
transition: 0.2s ease;
}
div:not(#z)[style ^= "transform-origin:"] li div:hover svg path,
div:not(#z)[style ^= "transform-origin:"] li span:hover svg path {
fill-opacity: 1 !important;
}
div:not(#z)[style ^= "transform-origin:"] li:hover {
background-color: var(--darker) !important;
}
div:not(#z)[style ^= "transform-origin:"] li:hover div,
div:not(#z)[style ^= "transform-origin:"] li:hover span {
color: var(--light) !important;
}
div:not(#z)[style ^= "transform-origin:"] li:not(:hover) [data-icon] path {
fill-opacity: 0.55 !important;
}
div:not(#z)[style ^= "transform-origin:"].XhRTI {
background-color: var(--t) !important;
border: none !important;
box-shadow: none !important;
}
div:not(#z)[style ^= "transform-origin:"].XhRTI li {
background-color: var(--t) !important;
}
div:not(#z)[style ^= "transform-origin:"].XhRTI ._1azEi::after {
box-shadow: var(--bshadow) !important;
}
div:not(#z)[style ^= "transform-origin:"].XhRTI ._2Par4 {
color: var(--light) !important;
background-color: var(--darker) !important;
box-shadow: var(--bshadow);
}
.P_A-m:not(#z) ul li:hover,
.P_A-m:not(#z) ul li._1exov {
background-color: var(--t) !important;
}
.P_A-m:not(#z) ul li:first-child {
border-color: var(--darker) !important;
}
.P_A-m:not(#z) ul + [data-animate-dropdown-nib] {
border-bottom: 1px solid var(--darker);
border-right: 1px solid var(--darker);
bottom: -8px;
background-color: var(--darken) !important;
}
#side {
background-color: var(--dark) !important;
}
#side > header {
border-bottom: 1px solid var(--darker);
background-color: var(--darken) !important;
}
#side > header + span[class] > div > div {
border-bottom: 1px solid var(--darker);
background-color: var(--darken) !important;
}
#side > header + span[class] ._1UvQg *,
#side > header + span[class] .MwhOx * {
color: var(--yellow) !important;
}
#side > header + span[class] ._1UvQg [data-icon ^= "chevron-"] path,
#side > header + span[class] .MwhOx [data-icon ^= "chevron-"] path {
fill: var(--yellow);
}
#side > header + span[class] ._1UvQg [data-icon ^= "alert-"] path[fill ^= "curr"],
#side > header + span[class] .MwhOx [data-icon ^= "alert-"] path[fill ^= "curr"] {
fill: var(--yellow);
}
#side > header + span[class] ._1UvQg [data-icon ^= "alert-"] path[fill ^= "#FFB"],
#side > header + span[class] .MwhOx [data-icon ^= "alert-"] path[fill ^= "#FFB"] {
fill: var(--darken);
}
#side > header + span[class] ._35DHA * {
color: var(--blue) !important;
}
#side > header + span[class] ._35DHA [data-icon ^= "chevron-"] path {
fill: var(--blue) !important;
}
#side > header + span[class] ._35DHA [data-icon ^= "alert-"] path {
fill: var(--blue);
}
#side > header + span[class] ._2BhJP * {
color: var(--red) !important;
}
#side > header + span[class] ._2BhJP [data-icon ^= "chevron-"] path {
fill: var(--red) !important;
}
#side > header + span[class] ._2BhJP [data-icon ^= "alert-"] path {
fill: var(--red);
}
#side > header + span[class] [data-icon = "x-light"] path {
fill-opacity: 0.55;
}
div[class *= "gQzdc"] {
transition: 0.2s ease;
border-bottom: 1px solid var(--darker);
background-color: var(--darken) !important;
}
div[class *= "gQzdc"]._3sdhb {
background-color: var(--dark) !important;
}
div[class *= "gQzdc"]::after {
content: none;
}
div[class *= "gQzdc"] > div + label {
border-radius: 4px !important;
background-color: var(--dark) !important;
}
div[class *= "gQzdc"] > div + label:not(:focus-within) {
box-shadow: inset 0 0 0 1px var(--darker);
}
div[class *= "gQzdc"] > div + label input {
color: var(--light) !important;
background-color: var(--t) !important;
}
div[class *= "gQzdc"] > div + label:focus-within {
background-color: var(--t) !important;
}
div[class *= "gQzdc"] > span > button {
right: 20px !important;
}
div[class *= "gQzdc"] > span > div {
right: 22px !important;
}
._2HS9r {
background-color: var(--t) !important;
}
div[class *= "gQzdc"] ._183ES,
div[class *= "gQzdc"] ._201Bk,
div[class *= "gQzdc"] ._2cLHw {
color: var(--lighter) !important;
}
#side #pane-side {
background-color: var(--darken) !important;
}
#side #pane-side [style *= "z-index"] > div > div[class] {
background-color: var(--t) !important;
}
#side #pane-side [style *= "z-index"] > div > div[class]:hover {
background-color: rgba(85,85,85,0.082) !important;
}
#side #pane-side [style *= "z-index"] > div > div[class]._1f1zm {
background-color: var(--darker) !important;
}
#side #pane-side [style *= "z-index"] > div > div[class]::after,
#side #pane-side [style *= "z-index"] > div > div[class] > div:last-child {
border: none;
}
#side #pane-side [style *= "z-index"] > div > div[class] > div:last-child > div:first-child > div:first-child {
color: var(--light) !important;
}
#side #pane-side [style *= "z-index"] > div > div[class] > div:last-child > div:first-child > div:last-child {
color: var(--lighter) !important;
}
#side #pane-side [style *= "z-index"] > div > div[class] > div:last-child > div:last-child {
color: var(--lighter) !important;
}
#side #pane-side [style *= "z-index"] > div > div[class] > div:last-child strong {
color: var(--lighter) !important;
}
.OUeyt {
color: var(--white) !important;
background-color: var(--accent) !important;
}
#side #pane-side ._2xINO {
height: 0;
}
._1HeQs.AYtad {
background-color: var(--dark) !important;
}
#side ._1AKfk {
color: var(--accent) !important;
background-color: var(--t) !important;
box-shadow: 0 1px var(--darker);
}
._1-iDe .copyable-area:not(.overlay) {
background-color: var(--darken) !important;
}
._1-iDe .copyable-area header {
height: unset;
min-height: unset !important;
border-bottom: 1px solid var(--darker);
background-color: var(--darken) !important;
}
._1xGbt:not(#z) {
margin: 0;
padding-top: 4px;
font-size: 18px;
font-weight: 500;
}
._1xGbt:not(#z) > div {
color: var(--red) !important;
}
._1-iDe .copyable-area header > div {
height: 58px;
color: var(--light) !important;
}
._1-iDe .copyable-area header > div ._6xQdq {
color: var(--light) !important;
}
._1-iDe .copyable-area ._1CRb5 {
background-color: var(--t) !important;
box-shadow: none;
}
._1-iDe .copyable-area ._1CRb5 ._1sYdX {
color: var(--accent) !important;
}
.Cpiae,
._2EuwQ {
color: var(--lighter) !important;
}
._1-iDe .copyable-area ._1CRb5 ._3K9Sw {
border-color: var(--t) !important;
}
._31WRs ._1DTd4 {
border-color: var(--accent) !important;
}
._2EXPL {
border-top: 1px solid var(--darker);
background-color: var(--t) !important;
}
._2EXPL > div {
border: none !important;
}
._2EXPL::after {
content: none !important;
}
._2EXPL:hover:not(#z):not(._27Ppf) {
background-color: rgba(85,85,85,0.063) !important;
}
._2EXPL [style *= "height: 82px"] {
background-color: var(--t) !important;
}
._2EXPL ._2WP9Q {
border-top: none !important;
}
._2EXPL ._25Ooe {
color: var(--light) !important;
}
._2EXPL ._3Bxar,
._2EXPL ._1AwDx,
._1jd1m {
color: var(--lighter) !important;
}
._2EXPL._2EXPL:not(#z) ._25Ooe {
color: var(--light) !important;
}
._2EXPL._2EXPL:not(#z) ._1AwDx div {
color: var(--lighter) !important;
}
._2EXPL._3ntaf {
border-top: none !important;
}
._2EXPL._13iu_ {
height: 25px !important;
}
._2EXPL._13iu_,
._2EXPL._13iu_:not(#z):hover {
background-color: var(--darker) !important;
}
._2EXPL._13iu_ [role = "button"]:hover {
background-color: var(--dark) !important;
}
._1-iDe .copyable-area ._1CkkN {
border-bottom: 1px solid var(--darker);
background-color: var(--t) !important;
box-shadow: 0 -1px var(--darker);
}
._1-iDe .copyable-area ._1CkkN:hover {
background-color: rgba(85,85,85,0.063) !important;
}
._1-iDe .copyable-area ._1CkkN::before {
content: none;
}
._1-iDe .copyable-area ._1CkkN > div:last-child {
border-color: var(--t) !important;
}
._1-iDe .copyable-area ._1CkkN ._3LL06 {
color: var(--light) !important;
}
.wjdTm,
._1-iDe .copyable-area ._1qWhd {
color: var(--lighter) !important;
}
._1-iDe .copyable-area ._66JgU {
background-color: var(--t) !important;
}
._1-iDe .copyable-area ._66JgU input {
color: var(--light) !important;
}
._1-iDe .copyable-area ._66JgU ._3_3Rs {
border-color: var(--darker) !important;
}
._1-iDe .copyable-area ._66JgU + div {
background-color: var(--t) !important;
}
._1-iDe .copyable-area ._66JgU + div ._8-yzK {
background-color: var(--t) !important;
}
._1wt6r {
color: var(--lighter) !important;
}
._1-iDe .copyable-area ._1ecJY ._2zkF3 {
background-color: var(--t) !important;
}
._1-iDe .copyable-area ._1ecJY ._1AKfk {
color: var(--accent) !important;
background-color: var(--t) !important;
}
._1jJLh {
background-color: var(--accent) !important;
}
._1jJLh.w4k6i {
background-color: var(--t) !important;
}
._1jJLh.w4k6i path {
fill-opacity: 0.55;
}
._3YwRO {
border: none !important;
}
._1-iDe .copyable-area .MS-DH::before {
margin-top: -1px;
left: 0;
background-color: var(--darker) !important;
}
._1-iDe .copyable-area .MS-DH::after {
content: none;
}
._1-iDe .copyable-area .MS-DH._1baOM:not(#z) {
background-color: var(--darker) !important;
}
._1-iDe .copyable-area .MS-DH._2-mCk,
._1-iDe .copyable-area .MS-DH.ZuHmv {
background-color: rgba(85,85,85,0.063) !important;
}
._3WZoe,
._1-iDe .copyable-area .MS-DH ._1bcjS,
._1-iDe .copyable-area .MS-DH ._2-rkJ::before {
color: var(--lighter) !important;
}
._1-iDe .copyable-area .MS-DH .tail-override-left [data-icon = "tail-out"] {
transform: rotateY(180deg) !important;
}
._1-iDe .copyable-area #pane-side {
background-color: var(--t) !important;
}
._1-iDe .copyable-area ._3hhmj {
border-color: var(--t) !important;
}
._1-iDe .copyable-area ._27YTC,
._3dwyT {
color: var(--lighter) !important;
}
._1-iDe .copyable-area ._1i7uJ {
background-color: var(--darker) !important;
}
._2rXhY {
color: var(--lighter) !important;
}
._1BLxK {
color: var(--accent) !important;
background-color: var(--t) !important;
}
._2WSfN {
color: var(--accent) !important;
background-color: var(--darken) !important;
}
._1-iDe .copyable-area .ZIgPi {
color: var(--light) !important;
}
._14VS3 .copyable-area [style *= "height: 200px"] > div {
background-color: var(--dark) !important;
}
._14VS3 .copyable-area .iYPsH {
color: var(--light) !important;
}
._14VS3 .copyable-area ._2IwIk,
._14VS3 .copyable-area ._1goQ0,
._14VS3 .copyable-area ._2IkcY {
color: var(--lighter) !important;
}
._14VS3 .copyable-area ._14oqx {
padding: 0;
}
._14VS3 .copyable-area ._14oqx > div {
padding: 0 30px;
border-color: var(--darker) !important;
}
._14VS3 .copyable-area ._14oqx span {
color: var(--light) !important;
}
._14VS3 .copyable-area ._1ur1f {
padding: 28px 15px 19px;
}
._14VS3 .copyable-area ._2ZVEo {
padding: 14px 15px 10px;
}
._14VS3 .copyable-area ._2k1Z5 {
padding: 14px 15px 4px;
}
._14VS3 .copyable-area ._3EN0l {
padding: 14px 15px;
}
._14VS3 .copyable-area .ujWpH {
padding: 14px 15px;
}
._14VS3 .copyable-area ._2nQ7u,
._14VS3 .copyable-area ._1goQ0 {
padding: 0;
}
._14VS3 .copyable-area ._2nQ7u + div[class] > div {
padding-top: 1px;
}
._14VS3 .copyable-area ._2LSbZ._2j5ir {
margin-bottom: unset;
}
._14VS3 .copyable-area ._1tyVr {
padding: 0 15px;
width: auto;
}
._14VS3 .copyable-area ._GaHgu path {
opacity: 0.55 !important;
}
._14VS3 .copyable-area ._GaHgu:hover > span > svg > path {
opacity: 1 !important;
fill-opacity: 0.9 !important;
}
._14VS3 .copyable-area ._3FAwT {
border-bottom: 1px solid var(--darker);
background-color: var(--t) !important;
}
._14VS3 .copyable-area ._2flas {
background-color: var(--t) !important;
}
._14VS3 .copyable-area ._2flas span {
color: var(--accent) !important;
}
._14VS3 .copyable-area .Um7sh {
background-color: var(--t) !important;
box-shadow: 0 1px var(--darker);
}
._14VS3 .copyable-area ._3E0ID {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--t) !important;
}
._14VS3 .copyable-area ._3E0ID span {
color: inherit;
}
._14VS3 .copyable-area ._2feU1:not(._1c8mz):not(#z):not(#x) ._2EXPL:hover {
background-color: var(--t) !important;
box-shadow: none !important;
}
._14VS3 .copyable-area ._2feU1:not(._1c8mz):not(#z):not(#x) ._2EXPL._27Ppf:hover {
background-color: var(--darker) !important;
}
._14VS3 .copyable-area ._2WP9Q {
border: none;
}
._14VS3 .copyable-area ._3dwyT {
color: var(--lighter) !important;
}
._14VS3 .copyable-area [style]:not(#z):not(#x) > div > ._2UaNq._3sA1g:hover,
._14VS3 .copyable-area [style]:not(#z):not(#x) > div > ._2UaNq._3mMX1,
._14VS3 .copyable-area [style]:not(#z):not(#x) > div > ._2UaNq.hover {
background-color: rgba(85,85,85,0.063) !important;
}
._14VS3 .copyable-area span[title] > span[dir] {
color: var(--light) !important;
}
._0LqQ {
color: var(--lighter) !important;
}
._14VS3 .copyable-area .BfrqJ > header._3jHKU {
height: 59px;
background-color: var(--darken) !important;
box-shadow: inset 0 -1px var(--darker);
}
._14VS3 .copyable-area .BfrqJ > header._3jHKU div {
color: var(--light) !important;
}
._3jHKU {
z-index: 999 !important;
}
._14VS3 .copyable-area .GaHgu {
background-color: var(--darken) !important;
box-shadow: inset 0 -1px var(--darker);
}
._14VS3 .copyable-area .GaHgu span {
color: var(--light) !important;
}
._14VS3 .copyable-area [data-active-tab] {
border-bottom: 1px solid var(--darker);
background-color: var(--dark) !important;
}
._14VS3 .copyable-area [data-active-tab] button {
color: var(--lighter) !important;
}
._14VS3 .copyable-area [data-active-tab] button:hover {
background-color: var(--darken) !important;
}
._14VS3 .copyable-area [data-active-tab] button._3caqI {
color: var(--light) !important;
}
._14VS3 .copyable-area [data-active-tab]::before {
margin-bottom: -1px;
height: 1px;
background-color: var(--blue) !important;
}
._2mlDB {
border-color: var(--darken) !important;
}
._14VS3 .copyable-area [data-list-scroll-container] ._1o1sm::before {
background-color: var(--t) !important;
}
@media screen and (max-width: 720px) {
._1-iDe._1xXdX ._2vPAk {
border-right: 1px solid var(--darker) !important;
}
}
._1-iDe._14VS3 > span {
border-left: 1px solid var(--darker);
}
#main {
background-color: var(--dark) !important;
}
[data-asset-chat-background] {
opacity: 1 !important;
filter: invert(var(--chat-bg-i)) opacity(var(--chat-bg-o));
background: var(--chat-image);
}
#main > header {
border-right: none;
border-bottom: 1px solid var(--darker);
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
#main > header::after {
content: none;
}
#main > header [title] {
color: var(--light) !important;
}
#main > header > div:nth-child(2) > div:nth-child(2) span[title] {
color: var(--lighter) !important;
}
#main ._3SYkD > div {
border-bottom: 1px solid var(--darker);
border-left: 1px solid var(--darker);
background-color: var(--darken);
}
#main ._3SYkD ._6xQdq,
#main ._3SYkD ._3GIEC {
color: var(--light) !important;
}
#main ._3SYkD ._3D8gv {
color: var(--lighter) !important;
}
#main ._3dGYA {
background-color: var(--darken) !important;
box-shadow: inset 0 0 0 1px var(--darker), var(--bshadow);
}
#main ._3dGYA svg circle {
stroke: var(--green);
}
#main .Zq3Mc {
opacity: 0.95;
letter-spacing: 0;
font-weight: 600;
text-shadow: none;
color: var(--light) !important;
background-color: var(--darken) !important;
box-shadow: var(--bshadow), inset 0 0 0 1px var(--darker), inset 0 -3px var(--darker);
}
#main .Zq3Mc._14b5J {
color: var(--orange) !important;
}
#main .Zq3Mc:not(.tail) {
color: var(--light) !important;
}
#main ._298R6 {
background-color: var(--darken) !important;
transition: background 0.15s ease;
box-shadow: inset 0 0 0 1px var(--darker), 0 4px 8px var(--shadow);
}
#main ._298R6:hover {
background-color: var(--darker) !important;
}
#main ._298R6:hover svg path {
fill-opacity: 1 !important;
}
#main ._298R6 .P6z4j {
color: var(--white) !important;
background-color: var(--accent) !important;
}
#main .copyable-area > div[tabindex] {
border-color: var(--darker) !important;
}
#main .copyable-area > div[tabindex] > [tabindex = "-1"] {
display: flex !important;
flex-direction: column !important;
}
#main .copyable-area > div[tabindex]._3D9Wd {
background-color: var(--t) !important;
}
#main .copyable-area > div[tabindex]._3D9Wd [class *= "message-"] {
position: relative;
}
._1o1sm {
z-index: 999 !important;
}
._1o1sm::before {
content: "";
opacity: 0.08;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
._1o1sm:hover,
._1o1sm._2nOMz {
background-color: var(--t) !important;
}
._1o1sm:hover::before,
._1o1sm._2nOMz::before {
background-color: var(--accent) !important;
}
#main .copyable-area > div[tabindex]._3D9Wd ._1VD7W {
border-color: var(--accent) !important;
background-color: var(--accent) !important;
}
#main .copyable-area > div[tabindex]._3D9Wd ._1VD7W div {
border-color: var(--white) !important;
}
._1l9lt path {
opacity: 0.55 !important;
}
._1l9lt:disabled path {
fill: var(--lighter) !important;
opacity: 0.25 !important;
}
._1l9lt:hover > span > svg > path {
opacity: 1 !important;
fill-opacity: 0.9 !important;
}
._15aTv {
color: var(--lighter) !important;
}
#main .copyable-area > div[tabindex] ._1mq8g {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
#main .copyable-area > div[tabindex] ._1mq8g > span {
background-color: var(--darker) !important;
}
#main .copyable-area > div[tabindex] a[title] > ._1mrMQ {
color: var(--light) !important;
background-color: var(--dark) !important;
}
#main .copyable-area > div[tabindex] a[title] + div,
#main .copyable-area > div[tabindex] a[title] + div > span::before {
color: var(--lighter) !important;
}
._2nFG1,
._2pvbg,
._3mRez,
._1sGGp {
background-color: var(--dark) !important;
}
._2nFG1 div > div:nth-child(1),
._2pvbg div > div:nth-child(1),
._3mRez div > div:nth-child(1),
._1sGGp div > div:nth-child(1),
._2nFG1 div > div:nth-child(1) span,
._2pvbg div > div:nth-child(1) span,
._3mRez div > div:nth-child(1) span,
._1sGGp div > div:nth-child(1) span {
color: var(--light) !important;
}
._2nFG1 div > div:nth-child(2),
._2pvbg div > div:nth-child(2),
._3mRez div > div:nth-child(2),
._1sGGp div > div:nth-child(2),
._2nFG1 div > div:nth-child(2) span,
._2pvbg div > div:nth-child(2) span,
._3mRez div > div:nth-child(2) span,
._1sGGp div > div:nth-child(2) span {
color: var(--lighter) !important;
}
._2nFG1 div > div:nth-child(3),
._2pvbg div > div:nth-child(3),
._3mRez div > div:nth-child(3),
._1sGGp div > div:nth-child(3),
._2nFG1 div > div:nth-child(3) span,
._2pvbg div > div:nth-child(3) span,
._3mRez div > div:nth-child(3) span,
._1sGGp div > div:nth-child(3) span {
color: var(--light) !important;
}
@supports not (-moz-user-select: none) {
.XO_8o.selectable-text a {
display: unset !important;
}
}
#main .copyable-area > div[tabindex] ._18dOq,
#main .copyable-area > div[tabindex] ._1upWv {
color: var(--lighter) !important;
}
#main .copyable-area > div[tabindex] ._18dOq [data-icon] path,
#main .copyable-area > div[tabindex] ._1upWv [data-icon] path {
fill: var(--lighter);
}
._484uz,
._3BIvq {
color: var(--accent) !important;
}
._3DBC1 {
border-color: rgba(136,136,136,0.188) !important;
}
._3DBC1 [role = "button"] {
color: var(--light) !important;
}
._2RBFb {
background-color: var(--dark) !important;
}
._2DwXW,
._2DwXW span::before {
color: var(--lighter) !important;
}
._3_nIn,
._3Kp0Q {
background-color: rgba(85,85,85,0.063) !important;
}
a[href][target = "_blank"] > *,
._2Lp2x > * {
color: var(--lighter) !important;
}
a[href][target = "_blank"] > :first-child,
._2Lp2x > :first-child,
a[href][target = "_blank"] > :last-child,
._2Lp2x > :last-child {
color: var(--light) !important;
}
._1YNgi div[style *= "base64"] {
filter: none !important;
}
._1YNgi div[style *= "height"] {
background-color: var(--dark) !important;
}
._1YNgi ._3gkvk {
color: var(--light) !important;
}
._3BtGF,
.mc_ET {
border-color: var(--dark) !important;
background-color: var(--t) !important;
}
.AVd_p {
color: var(--light) !important;
}
.message-in > div:not(._1rK-b) > div,
.message-out > div:not(._1rK-b) > div {
box-shadow: 0 1px var(--shadow) !important;
}
.message-in [data-icon *= "tail"] svg path:first-child,
.message-out [data-icon *= "tail"] svg path:first-child {
fill: var(--shadow) !important;
}
.message-in [data-icon = "tail-in"] svg path:last-child,
.message-out [data-icon = "tail-in"] svg path:last-child {
fill: var(--msg-l) !important;
}
.message-in [data-icon = "tail-out"] svg path:last-child,
.message-out [data-icon = "tail-out"] svg path:last-child {
fill: var(--msg-r) !important;
}
.message-in [data-pre-plain-text] + div *,
.message-out [data-pre-plain-text] + div *,
._1DZAH {
color: var(--lighter) !important;
}
.message-in._26GKj ._2Nkc4:not(#z),
.message-out._26GKj ._2Nkc4:not(#z) {
background: none !important;
}
.message-in ._1rK-b ._2R8MP,
.message-out ._1rK-b ._2R8MP {
background-color: var(--msg-l) !important;
box-shadow: 0 1px var(--shadow) !important;
}
.message-in ._1rK-b ._2Ll5c,
.message-out ._1rK-b ._2Ll5c {
color: var(--lighter) !important;
box-shadow: 0 1px var(--shadow) !important;
}
.message-in ._1rK-b ._2Ll5c div,
.message-out ._1rK-b ._2Ll5c div {
color: inherit;
}
.message-in ._1lxsr,
.message-out ._1lxsr,
.message-in ._3MYI2,
.message-out ._3MYI2 {
color: var(--lighter) !important;
}
.message-in [style *= "height: 55px"],
.message-out [style *= "height: 55px"] {
background-color: var(--dark) !important;
box-shadow: var(--bshadow);
}
.message-in [style *= "height: 55px"] svg path[fill = "#DFE5E7"],
.message-out [style *= "height: 55px"] svg path[fill = "#DFE5E7"] {
fill: var(--t) !important;
}
.message-in div[style *= "width"][style *= "height"] + ._1uFFm,
.message-out div[style *= "width"][style *= "height"] + ._1uFFm,
.message-in div[style *= "width"][style *= "height"] + .GbMip,
.message-out div[style *= "width"][style *= "height"] + .GbMip {
padding: 2px 5px;
border-radius: 7.5px;
background-color: var(--dark) !important;
}
.message-in .video-thumb ._1Ppwx,
.message-out .video-thumb ._1Ppwx,
._2G09- > ._2Pjvv {
padding: 2px 5px;
border-radius: 7.5px;
color: var(--light) !important;
background-color: var(--dark) !important;
}
.message-in .video-thumb + div > [role = "button"],
.message-out .video-thumb + div > [role = "button"] {
padding: 2px 5px;
border-radius: 7.5px;
color: var(--light) !important;
background-color: var(--dark) !important;
}
.Y9G3K {
color: var(--lighter) !important;
}
.message-in ._2rg5w._3EQsG,
.message-out ._2rg5w._3EQsG {
height: 50px;
}
.message-in > div:not(._1rK-b) > div {
color: var(--light) !important;
background-color: var(--msg-l) !important;
}
.message-in > div._1rK-b ._2Ll5c {
background-color: var(--msg-l) !important;
}
._3_9XW {
background-color: var(--msg-l) !important;
box-shadow: 0 1px 0.5px var(--shadow) !important;
}
.message-in [role] > span[role = "button"] + span {
color: var(--light) !important;
}
.message-in > div > span:last-child > div[style]:not(._1qhoQ) {
height: 22px !important;
background: linear-gradient(90deg, var(--t), var(--msg-l) 80%) !important;
}
.message-in > div > span:last-child > div[style].se9J6 {
background: linear-gradient(90deg, var(--msg-l) 50%, var(--t)) !important;
}
._1i1U7._1UyGF div[style *= "opacity"] {
background-color: var(--msg-l) !important;
}
.message-in > div > span:last-child > div[style]._15hve.jZ4tp,
.message-in > div > span:last-child > div[style]._15hve._2DNgV {
background: none !important;
}
.message-in > div > span:last-child > div[style]._20WGU,
.message-in > div > span:last-child > div[style].LSBf- {
background: linear-gradient(30deg, var(--t) 60%, var(--shadow)) !important;
}
.message-in > div > span:last-child > div[style]._38wik._2Nkc4 {
background: linear-gradient(270deg, var(--t), var(--msg-l) 80%) !important;
}
.message-in > div > span:nth-last-child(2) > div[style].jZ4tp._1i1U7 {
background: linear-gradient(90deg, var(--t), var(--msg-l) 80%) !important;
}
.message-in > div > span:nth-last-child(2) > div[style].jZ4tp._1i1U7._2Cju4 {
background: none !important;
}
.message-in ._1iJeo {
background-color: var(--dark) !important;
}
.message-in ._1iJeo:hover {
opacity: 0.8;
}
.message-out > div:not(._1rK-b) > div:not(.YsGwW) {
color: var(--light) !important;
background-color: var(--msg-r) !important;
}
.message-out .YsGwW:not(#z) > :first-child:not(:last-child) {
color: var(--light) !important;
background-color: var(--darken) !important;
box-shadow: inset 0 0 0 1px var(--darker), var(--bshadow);
}
.message-out .YsGwW:not(#z) > :first-child:not(:last-child)::after {
border-left-color: var(--darker) !important;
}
.message-out .YsGwW:not(#z) > [role = "button"] {
border-color: var(--shadow) !important;
background-color: var(--red) !important;
}
.message-out .YsGwW:not(#z) > [role = "button"] path[fill = "#FFF"] {
fill: var(--white) !important;
}
.message-out > div._1rK-b ._2Ll5c {
background-color: var(--msg-r) !important;
}
.message-out > div > span:last-child > div[style]:not(._1qhoQ) {
background: linear-gradient(90deg, var(--t), var(--msg-r) 80%) !important;
}
.message-out > div > span:last-child > div[style].se9J6 {
background: linear-gradient(90deg, var(--msg-r) 50%, var(--t)) !important;
}
._1i1U7._1qhoQ div[style *= "opacity"] {
background-color: var(--msg-r) !important;
}
.message-out > div > span:last-child > div[style]._2DNgV.o4dWJ {
background: linear-gradient(30deg, var(--t), var(--msg-r)) !important;
}
.message-out > div > span:last-child > div[style]._20WGU,
.message-out > div > span:last-child > div[style].LSBf- {
background: linear-gradient(30deg, var(--t) 60%, var(--shadow)) !important;
}
.message-out > div > span:last-child > div[style]._38wik._3EQsG {
background: linear-gradient(270deg, var(--t), var(--msg-r) 80%) !important;
}
.message-out > div > span:nth-last-child(2) > div[style]._1i1U7 {
background: linear-gradient(90deg, var(--t), var(--msg-r) 60%) !important;
}
.message-out > div > span:nth-last-child(2) > div[style]._2Cju4 {
background: none !important;
}
.message-out ._1iJeo {
background-color: var(--dark) !important;
}
.message-out ._1iJeo:hover {
opacity: 0.8;
}
.message-in .selectable-text.invisible-space[dir = "rtl"]::before,
.message-out .selectable-text.invisible-space[dir = "rtl"]::before,
.message-in a.selectable-text[href]::before,
.message-out a.selectable-text[href]::before,
.message-in ._3zb-j[dir = "ltr"] > [dir = "ltr"]::before,
.message-out ._3zb-j[dir = "ltr"] > [dir = "ltr"]::before {
content: unset !important;
}
.message-in [data-pre-plain-text] > [dir = "rtl"],
.message-out [data-pre-plain-text] > [dir = "rtl"] {
padding-bottom: 1.25em !important;
}
.message-in .selectable-text.invisible-space[dir = "rtl"] > span[class],
.message-out .selectable-text.invisible-space[dir = "rtl"] > span[class] {
display: unset !important;
}
@supports (-moz-user-select: none) {
.message-in .selectable-text.invisible-space[dir = "rtl"]::before,
.message-out .selectable-text.invisible-space[dir = "rtl"]::before {
content: unset !important;
}
}
.message-in [style *= "width"] + div > ._3zb-j[dir = "rtl"],
.message-out [style *= "width"] + div > ._3zb-j[dir = "rtl"],
.message-in .video-thumb + div > ._3zb-j[dir = "rtl"],
.message-out .video-thumb + div > ._3zb-j[dir = "rtl"] {
padding-bottom: 1.25em !important;
}
.message-in .message-text-link::after,
.message-out .message-text-link::after {
content: unset !important;
}
._1drQ-,
._1dGTK,
.r3Nu1 {
border-left: 1px solid var(--darker) !important;
background-color: var(--dark) !important;
}
._1drQ- header,
._1dGTK header,
.r3Nu1 header {
border-bottom: 1px solid var(--darker);
color: var(--light) !important;
background-color: var(--darken) !important;
}
._1drQ- ._7HWvs,
._1dGTK ._7HWvs,
.r3Nu1 ._7HWvs,
._1drQ- ._2n7FA,
._1dGTK ._2n7FA,
.r3Nu1 ._2n7FA {
color: var(--lighter) !important;
}
._1drQ- .CzI8E,
._1dGTK .CzI8E,
.r3Nu1 .CzI8E {
border-color: var(--accent) !important;
}
._1drQ- ._1qE6k,
._1dGTK ._1qE6k,
.r3Nu1 ._1qE6k {
color: var(--light) !important;
background-color: var(--darker) !important;
box-shadow: var(--bshadow) !important;
}
._1drQ- > div[tabindex] > div:nth-child(2),
._1dGTK > div[tabindex] > div:nth-child(2),
.r3Nu1 > div[tabindex] > div:nth-child(2) {
border-top: 1px solid var(--darker);
background-color: var(--darken) !important;
}
[role = "button"] + ._2sn3C {
background-color: var(--darken) !important;
}
[role = "button"]._1Dfrr:hover {
background-color: var(--accent) !important;
box-shadow: var(--bshadow);
}
.GpvML {
background-color: var(--dark) !important;
}
[role = "button"]._1ypOz {
color: var(--accent) !important;
background-color: var(--dark) !important;
box-shadow: inset 0 0 0 1px var(--darker) !important;
}
[role = "button"]._1ypOz::after {
background-color: var(--accent) !important;
}
[role = "button"]._2gZno::after {
background-color: var(--accent) !important;
}
[role = "button"]._3hV1n {
background-color: var(--accent) !important;
box-shadow: var(--bshadow);
transition: 0.15s ease;
}
[role = "button"]._3hV1n:hover {
opacity: 0.75;
}
._2n-96 {
background-color: var(--dark) !important;
}
._2n-96 > div {
color: var(--light) !important;
border-color: var(--darker) !important;
}
#main > footer {
background-color: var(--t) !important;
}
#main > footer > div > div {
border-color: var(--darker) !important;
}
#main > footer ._1x_c3 path {
fill-opacity: 0.55;
}
#main > footer ._1x_c3.bRYFY path {
fill-opacity: 1;
fill: var(--accent);
}
._23EHf {
border-color: var(--darker) !important;
background-color: var(--darken) !important;
box-shadow: inset 0 1px var(--darker) !important;
}
._23EHf::before {
content: none;
}
._1k6Uw._2CjPi {
margin-bottom: 8px;
border: 1px solid var(--darker) !important;
background-color: var(--t) !important;
border-radius: var(--radius) !important;
box-shadow: var(--bshadow) !important;
}
._1k6Uw._2CjPi::before {
box-shadow: none !important;
}
._1k6Uw._2CjPi > div {
border-radius: var(--radius) !important;
box-shadow: none !important;
}
#main > footer > div:first-child {
border-top: 1px solid var(--darker);
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
#main > footer > div:first-child div[style] + div[tabindex] {
border-radius: 4px;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
#main > footer > div:first-child div[style] + div[tabindex] [style *= "visibility"] {
color: var(--lighter) !important;
}
#main > footer > div:first-child div[style] + div[tabindex] .focused > div[style] {
color: var(--t) !important;
}
#main > footer [data-icon = "ptt"] path {
fill-opacity: 0.55;
}
#main > footer [fill = "#09D261"] {
fill: var(--green) !important;
}
#main > footer [fill = "#E53935"] {
fill: var(--red) !important;
}
#main > footer ._1vDUw {
border-color: var(--darker) !important;
}
#main > footer ._1vDUw ._1qUma,
._3ZkhL._3NVMy ._1qUma {
background-color: var(--darken) !important;
}
#main > footer ._1vDUw ._1qUma div[style *= "background"],
._3ZkhL._3NVMy ._1qUma div[style *= "background"] {
background-color: var(--accent) !important;
}
#main > footer ._1vDUw ._1qUma > :not(._2DzXb),
._3ZkhL._3NVMy ._1qUma > :not(._2DzXb) {
color: var(--lighter) !important;
}
#main > footer ._1vDUw ._1qUma > :not(._2DzXb):not(:hover) path,
._3ZkhL._3NVMy ._1qUma > :not(._2DzXb):not(:hover) path {
fill: var(--lighter);
}
#main > footer ._1vDUw ._1qUma > :not(._2DzXb):hover,
._3ZkhL._3NVMy ._1qUma > :not(._2DzXb):hover,
#main > footer ._1vDUw ._1qUma ._2DzXb,
._3ZkhL._3NVMy ._1qUma ._2DzXb {
color: var(--light) !important;
}
._35chb {
overflow: unset !important;
}
#main > footer ._1vDUw ._1qUma ._1Wbpa,
._3ZkhL._3NVMy ._1qUma ._1Wbpa {
height: 1px;
background-color: var(--accent) !important;
}
#main > footer ._1vDUw ._1qUma {
box-shadow: inset 0 1px var(--darker), inset 0 -1px var(--darker) !important;
}
#main > footer ._1vDUw ._3tlsa,
#main > footer ._1vDUw ._2HBs4,
#main > footer ._1vDUw ._2z7kg {
background-color: var(--dark) !important;
}
#main > footer ._1vDUw ._3tlsa [data-tab],
#main > footer ._1vDUw ._2HBs4 [data-tab],
#main > footer ._1vDUw ._2z7kg [data-tab] {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
#main > footer ._1vDUw ._3tlsa [data-tab] label,
#main > footer ._1vDUw ._2HBs4 [data-tab] label,
#main > footer ._1vDUw ._2z7kg [data-tab] label {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
box-shadow: inset 0 0 0 1px var(--darker);
}
#main > footer ._1vDUw ._3tlsa [data-tab] label input,
#main > footer ._1vDUw ._2HBs4 [data-tab] label input,
#main > footer ._1vDUw ._2z7kg [data-tab] label input {
color: var(--light) !important;
}
#main > footer ._1vDUw ._3tlsa ._3xMAk,
#main > footer ._1vDUw ._2HBs4 ._3xMAk,
#main > footer ._1vDUw ._2z7kg ._3xMAk {
color: var(--lighter) !important;
}
#main > footer ._1vDUw ._3tlsa .zl5TR,
#main > footer ._1vDUw ._2HBs4 .zl5TR,
#main > footer ._1vDUw ._2z7kg .zl5TR {
border-radius: 4px;
background-color: var(--darken) !important;
}
#main > footer ._1vDUw ._3tlsa [data-id = "retry"],
#main > footer ._1vDUw ._2HBs4 [data-id = "retry"],
#main > footer ._1vDUw ._2z7kg [data-id = "retry"] {
color: var(--accent) !important;
}
._2Hze1 {
color: var(--lighter) !important;
}
._3LFRS {
background-color: var(--t) !important;
}
#main > footer + span:not([class]) > div {
border-left: 1px solid var(--darker);
border-top: 1px solid var(--darker);
background-color: var(--darken) !important;
}
#main > footer .TYhk9 {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darken) !important;
}
#main > footer .TYhk9 [role = "button"] {
color: var(--lighter) !important;
background-color: var(--darker) !important;
}
#main > footer .TYhk9 [role = "button"]:hover {
color: var(--light) !important;
box-shadow: var(--bshadow);
}
#main > footer ._2XiC1 {
color: var(--lighter) !important;
border-left: 1px solid var(--darker);
}
#main > footer .rstyJ {
background-color: var(--dark) !important;
box-shadow: var(--bshadow), inset 0 1px var(--darker) !important;
}
._3Ye_R:not(#z) {
color: var(--lighter) !important;
}
#main > footer .rstyJ > div:first-child:not(#z) {
margin: 4px 0 8px 66px;
box-shadow: inset 0 0 0 1px var(--darker);
background-color: var(--darken) !important;
}
.quoted-mention {
color: var(--lighter) !important;
}
#main > footer .rstyJ div:last-child {
position: relative;
background-color: var(--t) !important;
}
#main > footer .rstyJ div:last-child [role = "button"] > span > svg {
padding: 16px;
border-radius: 6px;
fill-opacity: 0.55;
}
.Uukb4 {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
box-shadow: 0 -1px var(--darker) !important;
}
.Uukb4::before {
content: none;
}
.Uukb4 .J6TrU {
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.Uukb4 .J6TrU._1g_fA,
.Uukb4 .J6TrU:hover {
color: var(--light) !important;
background-color: var(--darken) !important;
}
.Uukb4 .J6TrU ._2u5ts {
color: var(--lighter) !important;
}
.Uukb4 ._3SW-z {
color: var(--lighter) !important;
}
.Uukb4.BDk0G {
border-left: none !important;
background-color: var(--dark) !important;
}
.Uukb4.BDk0G .J6TrU._1g_fA,
.Uukb4.BDk0G .J6TrU:hover {
color: var(--light) !important;
background-color: var(--darker) !important;
}
._30ie-,
._1M0Ew {
color: var(--lighter) !important;
}
@media screen and (max-height: 500px) {
#app > div > .app {
min-height: auto;
}
}
@media screen and (max-width: 648px) {
#app > div > .app {
min-width: auto;
}
}
@media screen and (max-width: 720px) {
.two > div:nth-child(3),
.three > div:nth-child(3) {
flex: 0 0 80px !important;
transition: 0.2s ease;
}
.two > div:nth-child(3):hover,
.three > div:nth-child(3):hover,
.two > div:nth-child(3):focus-within,
.three > div:nth-child(3):focus-within {
flex: 0 0 30% !important;
}
.two > div:nth-child(2) > div:nth-child(2) {
flex: 0 0 calc(100% - 80px) !important;
margin-left: calc(-30% + 80px);
}
.two > div:nth-child(3) {
min-width: 1px !important;
transition: 0.3s ease !important;
transition-delay: var(--c-m-delay) !important;
}
.two > div:nth-child(3):hover {
min-width: 349px !important;
margin-left: -1px !important;
transition-delay: var(--c-m-hover) !important;
flex: 0 0 30% !important;
}
.two > :nth-child(2) > :nth-child(1) {
z-index: 201 !important;
flex: 0 0 30% !important;
}
.two > :nth-child(2) > :nth-child(1) [style][tabindex] {
border-right: 1px solid var(--darker) !important;
}
.two ._1xXdX:hover {
min-width: 349px !important;
}
.three > div:nth-child(2) > div:nth-child(2) {
flex: 0 0 calc(100% - 30% - 80px) !important;
margin-left: calc(-30% + 80px);
}
.three > div:nth-child(4) {
flex: 0 0 calc(100% - 30% - 80px) !important;
}
.three > div:nth-child(3):hover {
flex: 0 0 80px !important;
}
.three ._14VS3,
.three ._1xXdX {
flex: 0 0 30% !important;
border-color: var(--t) !important;
}
.gQzdc:not(._3sdhb) label {
padding: 0px;
}
#side > header {
min-width: 240px;
}
#side > header + span {
display: none;
}
#side ._2EXPL > div:last-child {
padding-left: 5px !important;
}
#side ._2EXPL ._1AwDx {
position: relative;
flex-direction: row-reverse !important;
}
#side ._2EXPL ._1AwDx ._3Bxar {
z-index: 999 !important;
margin-left: 0 !important;
position: absolute;
left: -41px;
bottom: -6px;
border-radius: 50%;
}
#side ._2EXPL ._1AwDx ._3Bxar ._15G96 {
margin: 0;
}
#side ._2EXPL ._1AwDx ._3Bxar .OUeyt {
border: 4px solid var(--darken);
}
#side ._2EXPL ._1AwDx ._3Bxar > span {
display: flex !important;
flex-direction: row-reverse !important;
}
#side ._2EXPL ._1AwDx .ZR5SB,
#side ._2EXPL ._1AwDx ._15G96 > *:not(.OUeyt) {
display: none;
}
.vdXUe {
overflow: unset !important;
margin-top: -8px !important;
margin-left: 0px !important;
position: absolute;
}
.vdXUe::before {
content: "";
z-index: 1;
position: absolute;
top: -31px;
left: -71px;
height: 53px;
width: 53px;
box-shadow: inset 0 0 0 3px var(--green);
border-radius: var(--avatar-r);
animation: 2s pulse infinite;
}
#side ._2EXPL .a5DO0 {
padding: 1.5px;
z-index: 101;
position: absolute;
margin: -2px 0 0 -75px;
border: 3px solid var(--darken);
background-color: var(--dark) !important;
border-radius: 50%;
}
#side ._2EXPL .a5DO0 > span > svg {
padding: 2px;
height: 14px !important;
width: 14px !important;
}
#side ._2EXPL._1f1zm .OUeyt,
#side ._2EXPL._1f1zm .a5DO0 {
border-color: var(--darker) !important;
}
#side ._2EXPL:hover:not(._1f1zm) .OUeyt,
#side ._2EXPL:hover:not(._1f1zm) .a5DO0 {
border-color: var(--darken) !important;
filter: brightness(110%);
}
#side ._3j7s9 {
min-width: 80px !important;
}
}
._1QjgA {
color: var(--accent) !important;
}
:not(#z) .color-0 {
color: var(--blue) !important;
}
:not(#z) .color-1 {
color: var(--cyan) !important;
}
:not(#z) .color-2 {
color: var(--green) !important;
}
:not(#z) .color-3 {
color: var(--violet) !important;
}
:not(#z) .color-4 {
color: var(--magenta) !important;
}
:not(#z) .color-5 {
color: var(--red) !important;
}
:not(#z) .color-6 {
color: var(--orange) !important;
}
:not(#z) .color-7 {
color: var(--yellow) !important;
}
:not(#z) .color-8 {
color: var(--blue) !important;
filter: hue-rotate(20deg);
}
:not(#z) .color-9 {
color: var(--cyan) !important;
filter: hue-rotate(20deg);
}
:not(#z) .color-10 {
color: var(--green) !important;
filter: hue-rotate(20deg);
}
:not(#z) .color-11 {
color: var(--violet) !important;
filter: hue-rotate(20deg);
}
:not(#z) .color-12 {
color: var(--magenta) !important;
filter: hue-rotate(20deg);
}
:not(#z) .color-13 {
color: var(--red) !important;
filter: hue-rotate(20deg);
}
:not(#z) .color-14 {
color: var(--orange) !important;
filter: hue-rotate(20deg);
}
:not(#z) .color-15 {
color: var(--yellow) !important;
filter: hue-rotate(20deg);
}
:not(#z) .color-15 {
color: var(--blue) !important;
filter: hue-rotate(40deg);
}
:not(#z) .color-16 {
color: var(--cyan) !important;
filter: hue-rotate(40deg);
}
:not(#z) .color-17 {
color: var(--green) !important;
filter: hue-rotate(40deg);
}
:not(#z) .color-18 {
color: var(--violet) !important;
filter: hue-rotate(40deg);
}
:not(#z) .color-19 {
color: var(--magenta) !important;
filter: hue-rotate(40deg);
}
:not(#z) .color-20 {
color: var(--red) !important;
filter: hue-rotate(40deg);
}
:not(#z) .bg-color-0 {
background-color: var(--blue) !important;
}
:not(#z) .bg-color-1 {
background-color: var(--cyan) !important;
}
:not(#z) .bg-color-2 {
background-color: var(--green) !important;
}
:not(#z) .bg-color-3 {
background-color: var(--violet) !important;
}
:not(#z) .bg-color-4 {
background-color: var(--magenta) !important;
}
:not(#z) .bg-color-5 {
background-color: var(--red) !important;
}
:not(#z) .bg-color-6 {
background-color: var(--orange) !important;
}
:not(#z) .bg-color-7 {
background-color: var(--yellow) !important;
}
:not(#z) .bg-color-8 {
background-color: var(--blue) !important;
filter: hue-rotate(20deg);
}
:not(#z) .bg-color-9 {
background-color: var(--cyan) !important;
filter: hue-rotate(20deg);
}
:not(#z) .bg-color-10 {
background-color: var(--green) !important;
filter: hue-rotate(20deg);
}
:not(#z) .bg-color-11 {
background-color: var(--violet) !important;
filter: hue-rotate(20deg);
}
:not(#z) .bg-color-12 {
background-color: var(--magenta) !important;
filter: hue-rotate(20deg);
}
:not(#z) .bg-color-13 {
background-color: var(--red) !important;
filter: hue-rotate(20deg);
}
:not(#z) .bg-color-14 {
background-color: var(--orange) !important;
filter: hue-rotate(20deg);
}
:not(#z) .bg-color-15 {
background-color: var(--yellow) !important;
filter: hue-rotate(20deg);
}
:not(#z) .bg-color-15 {
background-color: var(--blue) !important;
filter: hue-rotate(40deg);
}
:not(#z) .bg-color-16 {
background-color: var(--cyan) !important;
filter: hue-rotate(40deg);
}
:not(#z) .bg-color-17 {
background-color: var(--green) !important;
filter: hue-rotate(40deg);
}
:not(#z) .bg-color-18 {
background-color: var(--violet) !important;
filter: hue-rotate(40deg);
}
:not(#z) .bg-color-19 {
background-color: var(--magenta) !important;
filter: hue-rotate(40deg);
}
:not(#z) .bg-color-20 {
background-color: var(--red) !important;
filter: hue-rotate(40deg);
}
@keyframes pulse {
40% {
opacity: 0;
}
80% {
opacity: 1;
}
}
`;
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);
}
}
})();
Edit: Wrapped code block in <details>.
from dark-whatsapp.
vednoc
commented on May 27, 2024
I'm curious as well. It should be possible to inject a separate CSS file, which will have to be stripped of custom UserCSS header and made with the custom settings to your personal preference. Another issue that might rise, but it really shouldn't, is if they used a different markup and stylesheets -- if that's the case, the current settings will not work.
from dark-whatsapp.
ransagy
commented on May 27, 2024
I'll try to play with it and report back if i find anything interesting :)
from dark-whatsapp.
vednoc
commented on May 27, 2024
Unfortunately they don't have a official version for Linux so I'll have to put Windows in a VM in order to try it for myself. In the meantime, let me know how it goes. 😃
from dark-whatsapp.
tinyCoder32
commented on May 27, 2024
Hello dear @vednoc
I have added your great peace of work to our Firefox add-on, I just didn't find a better place to mention this.
https://addons.mozilla.org/en-US/firefox/addon/whatsapp-web-plus/
from dark-whatsapp.
vednoc
commented on May 27, 2024
Hi @tinyCoder32!
Sorry for a bit late reply, life kinda got in the way. This is a good place to mention it, don't worry. 😄
I've taken a look at your extension and it looks pretty cool. It would be awesome if you could add a link inside the sidebar in case some of the users want to use a more customizable UserCSS theme. I really like it, good job! 😃
from dark-whatsapp.
tinyCoder32
commented on May 27, 2024
Sure @vednoc , I promise to do this in the next version god willing.
I'm so happy you liked the extension! I appreciate rating it also if it was really useful to you.
Any idea you have for this I will be so proud to collaborate, thanks!
from dark-whatsapp.
tinyCoder32
commented on May 27, 2024
@vednoc, thank you for the great suggestion, I would really love to do that.
I have 2 suggestions that I would think of in this case:
1- If I build a simple panel in my extension just for your great dark-ui, to allow the user change the values of the colors, or maybe supply the extension with some "color patterns" that he can switch between, that would be awesome.
2- We MUST change the scroll bars for Firefox users like me, they look bad (at least for me on my Mac), they look very basic white scroll bars, I can simply inject the famous SlimScroll jQuery script that will convert them to a very nice transparent black bars, like you see in this link, because as far as I know, it's impossible to control their design with CSS only??
And then, Is it possible after adding those both suggestions, that you link my extension to your project as a second "how-to-install" method, just beside Stylus?
Please consider the above and let me know what you think, i'm really excited about it.
from dark-whatsapp.
vednoc
commented on May 27, 2024
@tinyCoder32, I'm happy to hear that. 😃
1- If I build a simple panel in my extension just for your great dark-ui, to allow the user change the values of the colors, or maybe supply the extension with some "color patterns" that he can switch between, that would be awesome.
Indeed! It's easy to change CSS variables but you'll have to implement a menu and a color picker for that. The whats-up-darkness might come in handy. Also I have a theme switcher that's made for Stylus but it has a few color-schemes that I like using, so feel free to take a look.
2- We MUST change the scroll bars for Firefox users like me, they look bad...
I agree. They look really out of place on Firefox and I'm not sure why WhatsApp developers aren't doing anything about them. The idea of loading an entire library for this functionality is kind of something I wouldn't personally do. Perhaps a few CSS hacks might get rid of them, I'll have to do some testing. 🤔
...as far as I know, it's impossible to control their design with CSS only??
That's the case on Firefox v57+ and WebExtensions. Perhaps in the future they will implement that functionality with -moz- prefix to be kind of similar to what we have in Chromium based browsers. It's still possible to change the scrollbar via userChrome.css method (check the link for more info) or with various global GTK themes (which are available only on Linux/BSD systems I believe).
And then, Is it possible after adding those both suggestions, that you link my extension to your project as a second "how-to-install" method, just beside Stylus?
I thought about that a while ago since there are two projects that are using my theme at this moment. Stylus is still going to be the quickest one to get new updates and it's hassle-free for maintenance, apart from all the obfuscated CSS which is a nightmare to work with.
from dark-whatsapp.
tinyCoder32
commented on May 27, 2024
@vednoc thanks for the infos!
For the scrollbars, good luck with that if it's possible somehow? I don't know have a look, but anyway look at jQuery slimScroll,, it's 1.7KB less than the extension's icon size 😅 so don't worry about that when things get complicated on your side, anyway, please let me know.
I thought about that a while ago since there are two projects that are using my theme at this moment. Stylus is still going to be the quickest one to get new updates and it's hassle-free for maintenance, apart from all the obfuscated CSS which is a nightmare to work with.
For that, it will be possible to load the style directly from the github repo raw file, instead of supplying the css file with the extension, the user will be using the internet anyway, so loading the patterns files from a remote folder will be a great trick to keep the file updated.
Anyway,.. we'll see, thanks!
from dark-whatsapp.
vednoc
commented on May 27, 2024
@tinyCoder32 I can hide them completely but that's not what we're after. Maybe I'll add an option to disable them since I almost never use scrollbars anyways. Also that jQuery script is really small, wow! 😄
For that, it will be possible to load the style directly from the github repo raw file, instead of supplying the css file with the extension, the user will be using the internet anyway, so loading the patterns files from a remote folder will be a great trick to keep the file updated.
The problem with that is the added delay and that might cause default theme to flash. If you could get the raw file, cache it locally for some time (let's say a day) then it'd be the way to go.
I guess I didn't exactly respond properly in the last message -- I'll add it in "how to install" section as soon as it's ready, so let me know when that happens. 😃
from dark-whatsapp.
tinyCoder32
commented on May 27, 2024
Hi! I hope that you had time to fix the white bars somehow, because i found another bad white bars in the status page just beside the reply sending arrow.
another thing is that one of my extension users have posted this feature requirement yesterday, and i think it is something related to your great CSS, if you are interested, here is the feature:
https://addons.mozilla.org/en-US/firefox/addon/whatsapp-web-plus/reviews/1203397/
Thanks!
from dark-whatsapp.
vednoc
commented on May 27, 2024
Hello!
So far the userChrome.css method is the best way to go about changing the look of scrollbars since the most I can do with WebExtensions is hide them with a few hacks, which unfortunately breaks some of the elements and it doesn't look any better in the end. Have you tried jQuery slimScroll yet?
I'm even amazed that status page looks kind of alright considering I rarely use that feature. You can see more at Trello.
another thing is that one of my extension users have posted this feature requirement yesterday, and i think it is something related to your great CSS, if you are interested, here is the feature:
Compact mode already exists and it works wonderfully considering how painful it was to get it right. Narrower contact frame might be a possibility though I can't promise since IIRC if you change that, you also have to change the chat frame and the info frame, including the different combinations of them depending on what you open. Small font size is not going to happen simply because browsers have the ability to zoom in/out and adjust the font that way, and it's better than hard-coding the font size.
Review: I think it's easy for you to change CSS file
Saw the review and I can confirm it's easy* to change CSS file since you don't need a lot of skill to change colors, remove stuff, etc. But to implement a whole feature (just like I did with the compact mode a while back, as well as other custom settings) that doesn't have a support for it in the first place, is a completely different thing. It doesn't make much sense to implement such complex features since with a single update they can break the functionality for which I've spent hours of my free time to get working properly.
from dark-whatsapp.
sheeepdev
commented on May 27, 2024
hi all! after searching for custom themes for whatsapp, i stumbeled across atlus and ended up here. I cant find a way to open developer tools to check css code in atlus, it does allow themeing and it bases of your theme, but if i want to create one for myself, it provides only bg, fg and accent. Would love to somehow edit the application to load an edited version of this theme for whatsapp.
from dark-whatsapp.
vednoc
commented on May 27, 2024
Hey @sheeepdev!
I'm not sure how to do that for Altus, but I saw you opened an issue over there. Alternatively, you could use Ferdi or Franz to achieve something similar. For more information, check the two ports in credits section in readme to see how it's done.
To get a compiled version of DWA, you can either compile it manually (short guide on the wiki), or configure it using Stylus' configuration menu, then open DevTools, and copy the code from <style id="stylus...> then paste it in the file that's used by Ferdi or Franz. Side note about DevTools:
- In Chromium-based browsers you'll have to right click on
stylustag then "Edit as HTML" to get everything, otherwise you'll get a truncated string (this is done to improve performance of DevTools) - In Firefox-based browsers you can do the same (except they don't truncate long strings... yet), or go to "Style Editor" tab and find the injected style.
- When you copy from "Edit as HTML" it will also copy the HTML tags, so just remove them and you're good to go.
from dark-whatsapp.
Related Issues (20)
- Blog link broken HOT 2
- Please add an option to change the read check colour HOT 1
- Broken things in November's update HOT 1
- Option to hide avatars HOT 2
- How to customise the day tags in chat? HOT 10
- starting message is unselectable HOT 3
- notification number in profile pic? HOT 4
- Nord Theme HOT 3
- Incorrect text colour for attachment tooltips HOT 6
- Blurried profile pic in audio messages (Whatsapp Web Beta) HOT 11
- There isn't any option to change the color of this bubble. HOT 3
- Scrolling is laggy on Firefox HOT 3
- Add option to remove 'Update Available' popup? HOT 5
- dark-messenger HOT 3
- hide avatar feature HOT 2
- Update available - get CSS or TagName of DIV HOT 4
- Compact mode broken HOT 1
- Compact mode is broken HOT 5
- Unable to apply background image HOT 1
- [BUG] Search input container is partially unstyled HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dark-whatsapp.