basilesimon/README.md

## README.md

      
    Raw
  

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