FAB by dp0sk

/* ==UserStyle==
@name         FAB
@version      20220111.18.10
@namespace    userstyles.world/user/dp0sk
@description  Floating FC Panel
@author       dp0sk
@license      No License
==/UserStyle== */

@-moz-document domain("vk.com") {
.FCPanel {
	--add-height: 69px;
	right: 36px;
}

.FCPanel__list:empty + .FCPanel__add {
	border-radius: 25%!important;
}

.FCPanel--collapsed:not(:hover) .FCPanel__add {
	border-radius: 100%!important;
}

button.FCPanel__widthToggle,
svg.FCPanel__widthToggleIcon {
	display: none!important;
	bottom: 0!important;
}

div.FCPanel__list {
	opacity: 0;
	width: 56px;
	background: 0 0!important;
	box-shadow: none!important;
}

.FCThumb {
	background: 0 0!important;
	box-shadow: none!important;
	width: 56px;
	bottom: 10px;
}

aside.FCPanel:hover div.FCPanel__list {
	height: auto!important;
	opacity: 1;
	transform: translateY(0);
	-moz-transition: all .24s ease-in-out;
	-webkit-transition: all .24s ease-in-out;
	transition: all .24s ease-in-out;
}

div.FCPanel__list {
	transform: translateY(77px);
	opacity: 0;
	transition: all .1s ease-in-out;
}

button.FCPanel__add {
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 50%;
	text-decoration: none;
	padding: 0;
	-moz-transition: all .24s ease-in-out;
	-webkit-transition: all .24s ease-in-out;
	transition: all .24s ease-in-out;
	opacity: 1;
	margin-bottom: 15px;
	background: var(--accent)!important;
	color: #fff!important;
	-webkit-box-shadow: 0 1px 2px 0 rgba(50, 50, 50, .4)!important;
	-moz-box-shadow: 0 1px 2px 0 rgba(50, 50, 50, .4)!important;
	box-shadow: 0 1px 2px 0 rgba(50, 50, 50, .4)!important;
}

.FCPanel__add:hover::before {
	background: var(--accent)!important;
}

div.FCPanel__list:hover button.FCPanel__add {
	background: var(--accent);
	color: #fff!important;
	-webkit-box-shadow: 0 1px 3px 0 rgba(50, 50, 50, .8);
	-moz-box-shadow: 0 1px 3px 0 rgba(50, 50, 50, .8);
	box-shadow: 0 1px 3px 0 rgba(50, 50, 50, .8);
	-moz-transition: all .24s ease-in-out;
	-webkit-transition: all .24s ease-in-out;
	transition: all .24s ease-in-out;
}

.FCPanel__addIcon {
	transform: scale(1.1);
	transition: all .24s ease-in-out;
}

aside.FCPanel:hover .FCPanel__addIcon,
.FCPanel__add:hover .FCPanel__addIcon,
.FCPanel__add:focus .FCPanel__addIcon {
	transform: scale(1.2);
}

.FCPanel__addIcon {
	opacity: .9;
}

aside.FCPanel:hover .MEAvatar.MEAvatar--size-40 {
	transform: scale(1.1);
	transition: all .24s ease-in-out;
}

.MEAvatar.MEAvatar--size-40 {
	box-shadow: 0 1px 2px 0 rgba(50, 50, 50, .2)!important;
	margin-left: 2px !important;
}

aside.FCPanel:hover .MEAvatar.MEAvatar--size-40:hover,
aside.FCPanel .AvatarFavorites:hover {
	box-shadow: 0 1px 2px 0 rgba(50, 50, 50, .4)!important;
	transition: all .15s ease-in-out;
}

aside.FCPanel .AvatarFavorites {
	box-shadow: 0 1px 2px 0 rgba(50, 50, 50, .2)!important;
	transition: all .15s ease-in-out;
	width: 44px !important;
	height: 44px !important;
}
aside.FCPanel:hover .AvatarFavorites {
	width: 44px !important;
	height: 44px !important;
}
}