Skip to content

Instantly share code, notes, and snippets.

@basilesimon
Last active October 18, 2022 07:44
Show Gist options
  • Save basilesimon/484917ed341a611c2165781516cd44ce to your computer and use it in GitHub Desktop.
Save basilesimon/484917ed341a611c2165781516cd44ce to your computer and use it in GitHub Desktop.
discreet-whatsapp-web

A more discreet Whatsapp

This stylesheet intends to render the Whatsapp Web interface more discreet.

It will hide contact names and blur their pictures just enough so you recognise them.
The messages themselves will be blurred as well and reveal on hovering them with your mouse.
Incoming and outgoing pictures and media will be blurred and greyed out to remove obvious colour dominances, such as blood or skin.

Installation

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("web.whatsapp.com") {
/* Hide names */
.chat-title {
visibility: hidden;
}
/* Blur and gray out incoming/outgoing pictures in chat feed */
.image-thumb-body {
filter: blur(20px) grayscale(80%);
}
/* Blur just a bit the contact pictures */
.avatar-image, .icon-user-default-square {
filter: blur(3px);
}
/* Blur messages - but not on hover */
.message {
filter: blur(2px);
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
transition: all .1s ease;
}
.message:hover {
filter: blur(0px);
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
transition: all .1s ease;
}
}
@Bandicooted
Copy link

how can i do this in chrome?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment