22

✏️ Editing: socials.css

/* 
 * Social Links
 */

.w-socials-list {
	margin: calc( var(--gap, 0) * -1 );
	}
.w-socials-item {
	display: inline-block;
	vertical-align: top;
	position: relative;
	padding: var(--gap, 0);
	}
	.w-socials-item-link {
		display: block;
		text-align: center;
		position: relative;
		overflow: hidden;
		line-height: 2.5em;
		width: 2.5em;
		border: none !important;
		border-radius: inherit;
		z-index: 0;
		}
	.w-socials.color_text .w-socials-item-link {
		color: inherit;
		}
		.w-socials-item-link-hover {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--color-content-primary-grad);
			}
		.w-socials-item-link i {
			display: block;
			line-height: inherit;
			position: relative;
			}
	.w-socials-item-popup {
		display: none;
		position: absolute;
		left: 50%;
		bottom: 100%;
		text-align: center;
		white-space: nowrap;
		z-index: 90;
		font-size: 0.9rem;
		line-height: 2.4rem;
		padding: 0 1rem;
		margin-bottom: 7px;
		border-radius: 0.25rem;
		background: #222;
		color: #fff;
		opacity: 0;
		visibility: hidden;
		transform: translate3d(-50%,-1em,0);
		transition: opacity 0.2s cubic-bezier(.78,.13,.15,.86) 0.3s, transform 0.2s cubic-bezier(.78,.13,.15,.86) 0.3s;
		}
	.w-socials-item-link:focus + .w-socials-item-popup,
	.w-socials-item-link:hover + .w-socials-item-popup {
		visibility: visible;
		opacity: 1;
		transform: translate3d(-50%,0,0);
		}
	.no-touch .w-socials-item-popup {
		display: block;
		}
		.w-socials-item-popup:after {
			content: '';
			display: block;
			position: absolute;
			left: 50%;
			bottom: -7px;
			margin-left: -8px;
			width: 0;
			height: 0;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-top: 8px solid #333;
			}

/* Header element */
.l-header .w-socials {
	line-height: 2;
	}
	.header_hor .l-header .w-socials-list {
		white-space: nowrap;
		}
		.l-header .w-socials-item-link {
			line-height: 2em;
			width: 2em;
			}

/* Shape */
.w-socials.shape_none .w-socials-item-link {
	line-height: 1;
	width: auto;
	}
.w-socials.shape_rounded .w-socials-item-link {
	border-radius: 0.25em;
	}
.w-socials.shape_circle .w-socials-item-link {
	border-radius: 50%;
	}

/* Hover Style */
.no-touch .w-socials.hover_slide .w-socials-item-link-hover {
	display: block;
	bottom: auto;
	height: 0;
	transition: height 0.3s;
	}
.no-touch .w-socials.hover_slide .w-socials-item-link:hover .w-socials-item-link-hover {
	height: 100%;
	}
.no-touch .w-socials.hover_fade .w-socials-item-link-hover {
	display: block;
	opacity: 0;
	transition: opacity 0.3s;
	}
.no-touch .w-socials.hover_fade .w-socials-item-link:hover .w-socials-item-link-hover {
	opacity: 1;
	}
.no-touch .w-socials.hover_fade .w-socials-item-link:hover,
.no-touch .w-socials.hover_slide .w-socials-item-link:hover {
	color: #fff !important;
	}

/* Styles */
.w-socials.style_solid .w-socials-item-link {
	background: var(--color-content-bg-alt-grad);
	}
.w-socials.style_colored .w-socials-item-link-hover {
	display: block;
	height: 100% !important;
	opacity: 1 !important;
	}
.w-socials.style_colored .w-socials-item-link {
	color: #fff !important;
	}
.w-socials.style_outlined .w-socials-item-link {
	box-shadow: inset 0 0 0 2px var(--color-content-border);
	}

/* Brands colors
   ========================================================================== */

/* 500px */
.w-socials.color_brand .w-socials-item.s500px .w-socials-item-link {
	color: inherit;
	}
	.w-socials-item.s500px .w-socials-item-link-hover {
		background: #222;
		}

/* Behance */
.w-socials.color_brand .w-socials-item.behance .w-socials-item-link {
	color: #1769ff;
	}
	.w-socials-item.behance .w-socials-item-link-hover {
		background: #1769ff;
		}

/* DeviantArt */
.w-socials.color_brand .w-socials-item.deviantart .w-socials-item-link {
	color: #00e59b !important;
	}
	.w-socials-item.deviantart .w-socials-item-link-hover {
		background: #0e0d20;
		}

/* Discord */
.w-socials.color_brand .w-socials-item.discord .w-socials-item-link {
	color: #5865F2;
	}
	.w-socials-item.discord .w-socials-item-link-hover {
		background: #5865F2;
		}

/* Dribbble */
.w-socials.color_brand .w-socials-item.dribbble .w-socials-item-link {
	color: #ea4c89;
	}
	.w-socials-item.dribbble .w-socials-item-link-hover {
		background: #ea4c89;
		}

/* Email */
.w-socials.color_brand .w-socials-item.email .w-socials-item-link {
	color: #96a2a8;
	}
	.w-socials-item.email .w-socials-item-link-hover {
		background: #96a2a8;
		}

/* Facebook */
.w-socials.color_brand .w-socials-item.facebook .w-socials-item-link {
	color: #1e77f0;
	}
	.w-socials-item.facebook .w-socials-item-link-hover {
		background: #1e77f0;
		}

/* Flickr */
.w-socials.color_brand .w-socials-item.flickr .w-socials-item-link {
	color: #ff0084;
	}
	.w-socials-item.flickr .w-socials-item-link-hover {
		background: #ff0084;
		}

/* Foursquare */
.w-socials.color_brand .w-socials-item.foursquare .w-socials-item-link {
	color: #fa4b7a;
	}
	.w-socials-item.foursquare .w-socials-item-link-hover {
		background: #fa4b7a;
		}

/* Github */
.w-socials.color_brand .w-socials-item.github .w-socials-item-link {
	color: inherit;
	}
	.w-socials-item.github .w-socials-item-link-hover {
		background: #24292e;
		}

/* Google */
.w-socials.color_brand .w-socials-item.google .w-socials-item-link {
	color: #ff3e30;
	}
	.w-socials-item.google .w-socials-item-link-hover {
		background: #ff3e30;
		}

/* Houzz */
.w-socials.color_brand .w-socials-item.houzz .w-socials-item-link {
	color: #4dbc15;
	}
	.w-socials-item.houzz .w-socials-item-link-hover {
		background: #4dbc15;
		}

/* IMDB */
.w-socials.color_brand .w-socials-item.imdb .w-socials-item-link {
	color: #f7c625;
	}
	.w-socials-item.imdb .w-socials-item-link-hover {
		background: #f7c625;
		}

/* Instagram */
.w-socials.color_brand .w-socials-item.instagram .w-socials-item-link {
	color: inherit;
	}
	.w-socials-item.instagram .w-socials-item-link-hover {
		background: #a17357;
		background:
		radial-gradient(circle farthest-corner at 35% 100%, #fec564, transparent 50%),
		radial-gradient(circle farthest-corner at 10% 140%, #feda7e, transparent 50%),
		radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
		radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
		radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
		radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
		radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
		linear-gradient(#6559ca, #bc318f 30%, #e42e66 50%, #fa5332 70%, #ffdc80 100%);
		}
	.w-socials-item.instagram .w-socials-item-link i {
		font-size: 1.1em;
		}

/* LinkedIn */
.w-socials.color_brand .w-socials-item.linkedin .w-socials-item-link {
	color: #0077b5;
	}
	.w-socials-item.linkedin .w-socials-item-link-hover {
		background: #0077b5;
		}

/* Medium */
.w-socials.color_brand .w-socials-item.medium .w-socials-item-link {
	color: inherit;
	}
	.w-socials-item.medium .w-socials-item-link-hover {
		background: #1c1b1a;
		}

/* Odnoklassniki */
.w-socials.color_brand .w-socials-item.odnoklassniki .w-socials-item-link {
	color: #f58220;
	}
	.w-socials-item.odnoklassniki .w-socials-item-link-hover {
		background: #f58220;
		}

/* Pinterest */
.w-socials.color_brand .w-socials-item.pinterest .w-socials-item-link {
	color: #e60023;
	}
	.w-socials-item.pinterest .w-socials-item-link-hover {
		background: #e60023;
		}

/* Reddit */
.w-socials.color_brand .w-socials-item.reddit .w-socials-item-link {
	color: #ff4500;
	}
	.w-socials-item.reddit .w-socials-item-link-hover {
		background: #ff4500;
		}

/* RSS */
.w-socials.color_brand .w-socials-item.rss .w-socials-item-link {
	color: #ff9702;
	}
	.w-socials-item.rss .w-socials-item-link-hover {
		background: #ff9702;
		}

/* Skype */
.w-socials.color_brand .w-socials-item.skype .w-socials-item-link {
	color: #00aff0;
	}
	.w-socials-item.skype .w-socials-item-link-hover {
		background: #00aff0;
		}

/* SoundCloud */
.w-socials.color_brand .w-socials-item.soundcloud .w-socials-item-link {
	color: #ff5600;
	}
	.w-socials-item.soundcloud .w-socials-item-link-hover {
		background: #ff5600;
		}

/* Telegram */
.w-socials.color_brand .w-socials-item.telegram .w-socials-item-link {
	color: #0e8ed4;
	}
	.w-socials-item.telegram .w-socials-item-link-hover {
		background: #0e8ed4;
		}

/* TikTok */
.w-socials.color_brand .tiktok .w-socials-item-link {
	color: inherit;
	text-shadow: .04em .04em 0 #ee1d52, -.04em -.04em 0 #69c9d0;
	}
	.w-socials .tiktok .w-socials-item-link-hover {
		background: #000;
		}

/* Tripadvisor */
.w-socials.color_brand .tripadvisor .w-socials-item-link {
	color: inherit;
	}
.w-socials.style_colored .tripadvisor .w-socials-item-link,
.no-touch .w-socials:not(.shape_none):not(.hover_none) .tripadvisor .w-socials-item-link:hover {
	color: #000a12 !important;
	}
	.w-socials .tripadvisor .w-socials-item-link-hover {
		background: #34e0a1;
		}

/* Tumblr */
.w-socials.color_brand .w-socials-item.tumblr .w-socials-item-link {
	color: #37465d;
	}
	.w-socials-item.tumblr .w-socials-item-link-hover {
		background: #37465d;
		}

/* Twitch */
.w-socials.color_brand .w-socials-item.twitch .w-socials-item-link {
	color: #6441a5;
	}
	.w-socials-item.twitch .w-socials-item-link-hover {
		background: #6441a5;
		}

/* Twitter */
.w-socials.color_brand .w-socials-item.twitter .w-socials-item-link {
	color: #55acee;
	}
	.w-socials-item.twitter .w-socials-item-link-hover {
		background: #55acee;
		}

/* Vimeo */
.w-socials.color_brand .w-socials-item.vimeo .w-socials-item-link {
	color: #1ab7ea;
	}
	.w-socials-item.vimeo .w-socials-item-link-hover {
		background: #1ab7ea;
		}

/* Vkontakte */
.w-socials.color_brand .w-socials-item.vk .w-socials-item-link {
	color: #2787F5;
	}
	.w-socials-item.vk .w-socials-item-link-hover {
		background: #2787F5;
		}

/* WeChat */
.w-socials.color_brand .w-socials-item.wechat .w-socials-item-link {
	color: #60c33a;
	}
	.w-socials-item.wechat .w-socials-item-link-hover {
		background: #60c33a;
		}

/* WhatsApp */
.w-socials.color_brand .w-socials-item.whatsapp .w-socials-item-link {
	color: #25d366;
	}
	.w-socials-item.whatsapp .w-socials-item-link-hover {
		background: #25d366;
		}

/* Xing */
.w-socials.color_brand .w-socials-item.xing .w-socials-item-link {
	color: #006464;
	}
	.w-socials-item.xing .w-socials-item-link-hover {
		background: #006464;
		}

/* Yelp */
.w-socials.color_brand .w-socials-item.yelp .w-socials-item-link {
	color: #d32323;
	}
	.w-socials-item.yelp .w-socials-item-link-hover {
		background: #d32323;
		}

/* YouTube */
.w-socials.color_brand .w-socials-item.youtube .w-socials-item-link {
	color: #f00;
	}
	.w-socials-item.youtube .w-socials-item-link-hover {
		background: #f00;
		}

/* Colors
   ========================================================================== */
.color_alternate .w-socials.style_solid .w-socials-item-link {
	background: var(--color-alt-content-bg-alt-grad);
	}
.color_alternate .w-socials.style_outlined .w-socials-item-link {
	box-shadow: inset 0 0 0 2px var(--color-alt-content-border);
	}
.color_footer-top .w-socials.style_solid .w-socials-item-link {
	background: var(--color-subfooter-bg-alt-grad);
	}
.color_footer-top .w-socials.style_outlined .w-socials-item-link {
	box-shadow: inset 0 0 0 2px var(--color-subfooter-border);
	}
.color_footer-bottom .w-socials.style_solid .w-socials-item-link {
	background: var(--color-footer-bg-alt-grad);
	}
.color_footer-bottom .w-socials.style_outlined .w-socials-item-link {
	box-shadow: inset 0 0 0 2px var(--color-footer-border);
	}

/* Rounded Corners
   ========================================================================== */
.rounded_none .w-socials-item-popup {
	border-radius: 0 !important;
	}

MR SKB