WhatsApp Web by snowfire

/* ==UserStyle==
@name         WhatsApp Web
@version      20231211.05.23
@namespace    userstyles.world/user/snowfire
@description  Here's a new skeuomorph style for web version of WhatsApp
@author       snowfire
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://web.whatsapp.com/") {
/* Главная страница (main page) */

html[dir=ltr] ._1jJ70
{
	box-shadow: 0 0 0 2px #95CD6A, 
				0 0 0 4px #E1FBD6, 
				0 0 0 5px #267989, 
				0 5px 8px 5px #040e03 !important;
	border-radius: 10px 10px 2px 2px !important;
	width: 75%;
	height: 90%;
	margin-left: 141px;
	margin-top: 10px
}


html[dir=ltr] .zaKsw
{
	background: url(https://i.postimg.cc/8PWjx87b/egg-shell.png) center/5%, 
				#effaf6;
	box-shadow: inset 1px 0 2px #C3DFC8, 
				inset 2px 0 3px #E1FBD6, 
				inset 3px 0 2px #D4EEBE, 
				inset 4px 0 2px #AEDF83, 
				inset 5px 0 2px #95CD6A, 
				inset 6px 0 2px #97D379, 
				inset 7px 0 2px #9BD77F, 
				inset 8px 0 1px #93c07e, 
				inset 9px 0 1px #b3b3b3,
				inset 10px 0 8px #00000045,
				inset -1px 0 2px #C3DFC8, 
				inset -2px 0 3px #E1FBD6, 
				inset -3px 0 2px #D4EEBE, 
				inset -4px 0 2px #AEDF83, 
				inset -5px 0 2px #95CD6A, 
				inset -6px 0 2px #97D379, 
				inset -7px 0 2px #9BD77F, 
				inset -8px 0 1px #93c07e, 
				inset -9px 0 1px #b3b3b3,
				inset -10px 0 8px #00000045
}



html[dir] ._33LGR
{
	box-shadow: inset 0 0 2px 1px #C3DFC8, 
				inset 0 0 3px 2px #E1FBD6, 
				inset 0 0 2px 3px #D4EEBE, 
				inset 0 0 2px 4px #AEDF83, 
				inset 0 0 2px 5px #95CD6A, 
				inset 0 0 2px 6px #97D379, 
				inset 0 0 2px 7px #9BD77F, 
				inset 0px 0 1px 8px #93c07e, 
				inset 0px 0 1px 9px #b3b3b3,
				inset 0px 0 8px 6px #00000045,
				inset 0px 0 2px 10px #C3DFC8;
	border-radius: 7px;
	margin-top: -10px;
	height: 104%;
	padding-bottom: 20px
}


/* Фон сайта {backgrounds web page} */

html[dir] ._1Fm4m:after
{
	background: linear-gradient(to bottom, #386d8c 0%,#4785c2 4%,#4688de 7%,#3679e1 11%,#286adb 14%,#245fd5 18%,#245bd2 21%,#2659cf 25%,#285bd1 29%,#1e59d7 39%,#215cdc 43%,#265bdf 61%,#235ee0 71%,#2464e2 79%,#2a60dc 93%,#1d4dc9 100%);
	transform: scale(.9);
	width: 14000px !important;
	height: 50px;
	top: 97.8%;
	left: -50%
}

body
{
	background: url(https://i.postimg.cc/J796w2Bp/icon.png) no-repeat 5% 30%/3.5%, 	
				url(https://images.hdqwalls.com/download/windows-xp-bliss-4k-lu-1920x1080.jpg) no-repeat center;
	cursor: url('https://i.postimg.cc/505Rn5sx/Cursors-XP.png'), default !important;
}

html[dir] ._1ADa8:after
{
	background: transparent
}

html[dir] .zaKsw:after
{
	border: 0
}

html[dir] .IVxyB
{
	filter: drop-shadow(0 -2px 1px #437073) 
			drop-shadow(0 1px 1px #86d6d0);
}

._1vjYt,
html[dir] ._1y6Yk
{
	text-shadow: 0 1px 1px white;
}


/* Поиск чата */

html[dir=ltr] ._3wQ5i._1s7Pa
{
	background: #d0f2c9;
	box-shadow: inset 0 -3px 3px #a8d386, 
				inset 0 2px 3px #79be36
}


.s4k44ver
{
	background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%) !important;
    border-radius: 5px !important;
	box-shadow: 0 1px 1px 1px white, 
				0 -1px 1px #194516;
	transition: .3s;
	color: #475340;
	filter: drop-shadow(0 1px 1px black);
	backface-visibility: hidden;
}

.s4k44ver:hover
{
	box-shadow: 0 1px 1px 1px white, 
				0 -1px 1px #194516, 
				0 0 8px 7px white;
	filter: drop-shadow(0 1px 1px #b9eecd);
	transition: .3s
}

.s4k44ver:active
{
	box-shadow: 0 1px 1px 1px white, 
				0 -1px 1px #194516, 
				inset 0 5px 5px #8c8c8c;
	transition: .3s
}

.p7idzaix
{
	color: black;
	background: linear-gradient(to bottom, #dad89e 0%,#ebed81 50%,#c3bf5d 51%,#f4ff9f 100%) !important;
    border-radius: 5px !important;
	box-shadow: 0 1px 1px 1px white, 
				0 -1px 1px #194516, 
				0 0 8px 7px #eef6ad;
	filter: drop-shadow(0 1px 5px #b9eecd);
}

html[dir] ._2vDPL
{
	box-shadow: inset 0 3px 3px;
	border-bottom: 1px solid #84b752
}

html[dir] ._8nE1Y
{
	border-bottom: 1px solid #88ab73
}


/* Окно чатов (chat window) */

html[dir] .app-wrapper-web ._1XkO3
{
	box-shadow:	0 0 0 4px #84b752,
				0 3px 3px 2px #d0f2c9, 
				0 4px 3px 2px #a8d386,
				0 5px 3px 2px #b0d990, 
				0 6px 3px 2px #abdb8d, 
				0 7px 3px 2px #a6d888, 
				0 8px 3px 2px #7dc23a, 
				0 9px 3px 2px #7dd056, 
				0 10px 3px 2px #79be36, 
				0 11px 3px 2px #b3b3b3,
				0 12px 3px 2px #00000045,
				0 14px 14px 5px black;
	border-radius: 15px 15px 5px 5px;
	transform: scale(.9)
}

.ttegvvei
{
	background: linear-gradient(to bottom, #f2f3f0 0%,#fdfdfd 16%,#f8f9f4 32%,#eceee6 62%,#e3e6d6 100%,#fbfcf5 100%);
	border-bottom: 2px solid #b3b3b3;
	border-top: 1px solid #7dc23a
}

html[dir] ._2a-B5
{
	background: transparent;
	color: #647456;
	text-shadow: 0 1px 1px white
}


/* Значки (icons) */

._1sPvB,._2DW2d,._1bAtO
{
	filter: drop-shadow(2px 1px 1px #d0f2c9);
	color: #415a28;
	transition: .3s
}

/* Scrollbar */

::-webkit-scrollbar 
{
	background: linear-gradient(to right, #f5f2ed 0%,#f5f0ec 7%,#f9f4f0 21%,#f7f6f1 36%,#fafdf4 57%,#fafdf4 71%,#fffff8 86%,#fffffa 100%);
	width: 23px !important;
	box-shadow: inset 1px 0 0 #ECE9D8, 
				1px 0 3px #d1bc44 !important;
	border-right: 3px solid #EEE9E5

}

::-webkit-scrollbar-thumb 
{
	background: linear-gradient(0deg, #98abd3 12.50%, #fff0 12.50%, #fff0 50%, #98abd3 50%, #98abd3 62.50%, #DCF2FF 62.50%, #DCF2FF 100%),#C9D7FA;
	background-size: 4.00px 8.00px;
  	border-radius: 4px;       
  	border: 2px solid #F4FFFF;  
	box-shadow: 1px 1px 0 #9DB3D4, 
				0 -1px 0 #C8D5E6,
				inset 2px 0 0 #FCFFFF,
				inset 3px 0 0 #BEC9E7,
				inset -4px 0 4px #BDCCE9,
				inset 1px 2px 3px #DBE7FF;
	width: 10px !important
}

::-webkit-scrollbar-thumb:hover
{
 	background: linear-gradient(0deg, #86AAFF 12.50%, #EEF4FE 12.50%, #fff0 50%, #98abd3 50%, #98abd3 62.50%, #DCF2FF 62.50%, #DCF2FF 100%),#e1e9fe;
	background-size: 4.00px 8.00px;
}

::-webkit-scrollbar-thumb:active
{
	background: linear-gradient(0deg, #98abd3 12.50%, #fff0 12.50%, #fff0 50%, #98abd3 50%, #98abd3 62.50%, #DCF2FF 62.50%, #DCF2FF 100%),#b7cafb;
	background-size: 4.00px 8.00px;
}


/* Заголовок слева (left header) */

html[dir] ._1G3Wr,html:not([dir='rtl']) .lyvj5e2u
{
	background: linear-gradient(to bottom, #a8d386 0%,#b0d98f 2%,#b0d990 5%,#abdb8d 10%,#a6d888 12%,#93cd6b 19%,#84c147 21%,#79bc35 24%,#79be36 31%,#7dc23a 38%,#82c640 43%,#8fce54 50%,#a4da7a 60%,#acdc8a 64%,#bee7a7 74%,#c5edb5 76%,#d0f2c9 81%,#e3fae7 93%,#ecfef2 100%);
	border-top: 2px solid #79bc35;
	border-radius: 15px 0 0 0;
}


/*------------------------------------------------------------*/

/* Выделение активного чата (active chat selected) */

html[dir] ._199zF._2IMPQ
{
	background: linear-gradient(to bottom, #ffd65e 0%,#febf04 100%);
	box-shadow: 0px 4px 3px #b89b46, 
				inset 5px 0 5px #f1f3a9, 
				inset -4px 0 3px #efefa5;
	border-radius: 3px;
	border-right: 1px solid #bdb795;
}

html[dir] ._199zF._2IMPQ .y_sn4
{
	text-shadow: 0 1px 3px #d5c087, 
				 0 2px 2px white;
}


/* Предпросмотр текста сообщения... (message preview) */

html[dir] ._199zF._2IMPQ .Hy9nV
{
	text-shadow: 0 1px 3px #d5c087, 
				 0 2px 2px #fcf3e2;
}


/* Статус сообщения (message status) */

html[dir] ._199zF ._2qo4q
{
	filter: drop-shadow(0 1px 1px #151311f5) 
			drop-shadow(0 -1px 0 #fff)
}


/* Наведение на список чатов */

html[dir] ._199zF:hover
{
	background: linear-gradient(to bottom, #fefcea 0%,#f1da36 100%);
	border: 1px solid #c0bfbc !important;
	box-shadow: inset 0 2px 5px white, 
				inset 5px -3px 10px #7eb97759,
				0 2px 12px #766e36;
	transition: .1s;
	border-radius: 3px;
}

/*------------------------------------------------------------*/


/*------------------------------------------------------------*/

/* Добавление цвета и тени при наведении на список чата (слева) (add color and shadow when hover) */


/* Название чата (chat name) */

html[dir] ._199zF:hover .y_sn4
{
	text-shadow: 0 1px 3px #d2dfed, 
				 0 2px 2px white;
}


/* Предпросмотр текста сообщения... (message preview) */

html[dir] ._199zF:hover .Hy9nV
{	color: black;
	text-shadow: 0 1px 3px #d2dfed, 
				 0 2px 2px white;
}

._3wFFT:hover
{
	box-shadow: 0 3px 3px #e9f5ff, 
				0 -3px 3px #617f1b,
				0 0 4px 4px #d5ff89
}

._3wFFT:active
{
	box-shadow: 0 3px 3px #e9f5ff, 
				0 -3px 3px #617f1b,
				inset 0 14px 14px #35460d;
}

/*------------------------------------------------------------*/


/* Аватары без картинки (avatars without images) */

html[dir] ._3g4Pn
{
	box-shadow: 0 -1px 4px #305a30, 
				0 1px 3px 3px #fbfffa;
	border-radius: 50%
}




/* Участники чата, время посещения (chat members, visit time) */

._2YPr_
{
	color: #287BA1 !important;
	text-shadow: 1px 0 1px #71d4f285 !important
}


/* Полосы прокрутки (scrollbars) */

body::-webkit-scrollbar 
{
	width: 17px;
}

body::-webkit-scrollbar-track 
{
	background: #FCFCFC;
	box-shadow: inset 5px 0 10px #999797,
				-1px 0 0 3px #999797,
				3px 0 0 15px #e1dfdf;
	border: 1px solid #B4B4B4 !important;
	border-radius: 20px;
}


/* Левая часть (left side) */


/* Оповещения сверху */

html[dir] ._2C_7j
{
	background:  linear-gradient(to bottom, #cddcf9 0%,#bccce7 3%,#b8c9da 8%,#b3c5d1 17%,#adbed6 22%,#aab9d6 28%,#9eafc7 36%,#8ca4bc 47%,#8ba3bb 50%,#839ab2 56%,#8097b1 61%,#6c84a8 75%,#657fa6 83%,#5e7aa0 89%,#5d7694 94%,#61748d 97%,#526077 100%);
	border-top: 2px solid #5E6F8E;
	border-bottom: 2px solid #5E6F8E;
}


/* Включить оповещения на рабочем столе */

html[dir] .TgwV9
{
	background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
	box-shadow: inset 0 3px 3px 1px, 
				inset 0 -3px 3px white
}

html[dir=ltr] ._1JKq0
{
	box-shadow: inset 0 3px 3px #8a8a8a, 
				0 3px 3px white;
	border-radius: 50%;
	color: #4f4f4f
}

html:not([dir='rtl']) .f9ovudaz
{
	color: black;
	filter: drop-shadow(0 -1px 1px white)
}


html[dir] ._39vwq ._3yrCj,
html[dir] ._39vwq ._1zVJV
{
	color: black
}

/* Значок (icon) */

._2C_7j ._384go
{

	border-radius: 50%;
	box-shadow: 0 -1px 1px #91A2B8, 
				inset 0 1px 1px 1px #516374, 
				0 1px 2px #6681A1, 
				0 2px 2px #cedfea
}


/* Список ча...