discreet-whatsapp-web

README.md

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

• Install the Stylish addon
• Go to https://web.whatsapp.com/
• Click on Stylish icon (top right-hand side)
• "Write new style" > "web.whatsapp.com"
• Paste the content of style.css
• Save
• Voila :)

style.css

@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;
  }
}

how can i do this in chrome?