232 lines
5.3 KiB
CSS
232 lines
5.3 KiB
CSS
/*!
|
|
* Tabler Socials v1.0.0 (https://tabler.io)
|
|
* Copyright 2018-2025 The Tabler Authors
|
|
* Copyright 2018-2025 codecalm.net Paweł Kuna
|
|
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
|
|
*/
|
|
/**
|
|
* Converts a given value to a percentage string.
|
|
*
|
|
* @param {Number} $value - The value to be converted to a percentage.
|
|
* @return {String} - The percentage representation of the value.
|
|
*/
|
|
/**
|
|
* Generates a transparent version of the given color.
|
|
*
|
|
* @param {Color} $color - The base color to be made transparent.
|
|
* @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
|
|
* @return {Color} - The resulting color with the specified transparency.
|
|
*/
|
|
.social {
|
|
position: relative;
|
|
display: inline-block;
|
|
height: 2.5rem;
|
|
aspect-ratio: 1;
|
|
background: no-repeat center/cover;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.social-app-apple {
|
|
background-image: url("../img/social/apple.svg");
|
|
}
|
|
.social-app-apple.social-gray {
|
|
background-image: url("../img/social/apple-gray.svg");
|
|
}
|
|
|
|
.social-app-discord {
|
|
background-image: url("../img/social/discord.svg");
|
|
}
|
|
.social-app-discord.social-gray {
|
|
background-image: url("../img/social/discord-gray.svg");
|
|
}
|
|
|
|
.social-app-dribbble {
|
|
background-image: url("../img/social/dribbble.svg");
|
|
}
|
|
.social-app-dribbble.social-gray {
|
|
background-image: url("../img/social/dribbble-gray.svg");
|
|
}
|
|
|
|
.social-app-facebook {
|
|
background-image: url("../img/social/facebook.svg");
|
|
}
|
|
.social-app-facebook.social-gray {
|
|
background-image: url("../img/social/facebook-gray.svg");
|
|
}
|
|
|
|
.social-app-figma {
|
|
background-image: url("../img/social/figma.svg");
|
|
}
|
|
.social-app-figma.social-gray {
|
|
background-image: url("../img/social/figma-gray.svg");
|
|
}
|
|
|
|
.social-app-github {
|
|
background-image: url("../img/social/github.svg");
|
|
}
|
|
.social-app-github.social-gray {
|
|
background-image: url("../img/social/github-gray.svg");
|
|
}
|
|
|
|
.social-app-google {
|
|
background-image: url("../img/social/google.svg");
|
|
}
|
|
.social-app-google.social-gray {
|
|
background-image: url("../img/social/google-gray.svg");
|
|
}
|
|
|
|
.social-app-instagram {
|
|
background-image: url("../img/social/instagram.svg");
|
|
}
|
|
.social-app-instagram.social-gray {
|
|
background-image: url("../img/social/instagram-gray.svg");
|
|
}
|
|
|
|
.social-app-linkedin {
|
|
background-image: url("../img/social/linkedin.svg");
|
|
}
|
|
.social-app-linkedin.social-gray {
|
|
background-image: url("../img/social/linkedin-gray.svg");
|
|
}
|
|
|
|
.social-app-medium {
|
|
background-image: url("../img/social/medium.svg");
|
|
}
|
|
.social-app-medium.social-gray {
|
|
background-image: url("../img/social/medium-gray.svg");
|
|
}
|
|
|
|
.social-app-meta {
|
|
background-image: url("../img/social/meta.svg");
|
|
}
|
|
.social-app-meta.social-gray {
|
|
background-image: url("../img/social/meta-gray.svg");
|
|
}
|
|
|
|
.social-app-metamask {
|
|
background-image: url("../img/social/metamask.svg");
|
|
}
|
|
.social-app-metamask.social-gray {
|
|
background-image: url("../img/social/metamask-gray.svg");
|
|
}
|
|
|
|
.social-app-pinterest {
|
|
background-image: url("../img/social/pinterest.svg");
|
|
}
|
|
.social-app-pinterest.social-gray {
|
|
background-image: url("../img/social/pinterest-gray.svg");
|
|
}
|
|
|
|
.social-app-reddit {
|
|
background-image: url("../img/social/reddit.svg");
|
|
}
|
|
.social-app-reddit.social-gray {
|
|
background-image: url("../img/social/reddit-gray.svg");
|
|
}
|
|
|
|
.social-app-signal {
|
|
background-image: url("../img/social/signal.svg");
|
|
}
|
|
.social-app-signal.social-gray {
|
|
background-image: url("../img/social/signal-gray.svg");
|
|
}
|
|
|
|
.social-app-skype {
|
|
background-image: url("../img/social/skype.svg");
|
|
}
|
|
.social-app-skype.social-gray {
|
|
background-image: url("../img/social/skype-gray.svg");
|
|
}
|
|
|
|
.social-app-snapchat {
|
|
background-image: url("../img/social/snapchat.svg");
|
|
}
|
|
.social-app-snapchat.social-gray {
|
|
background-image: url("../img/social/snapchat-gray.svg");
|
|
}
|
|
|
|
.social-app-spotify {
|
|
background-image: url("../img/social/spotify.svg");
|
|
}
|
|
.social-app-spotify.social-gray {
|
|
background-image: url("../img/social/spotify-gray.svg");
|
|
}
|
|
|
|
.social-app-telegram {
|
|
background-image: url("../img/social/telegram.svg");
|
|
}
|
|
.social-app-telegram.social-gray {
|
|
background-image: url("../img/social/telegram-gray.svg");
|
|
}
|
|
|
|
.social-app-tiktok {
|
|
background-image: url("../img/social/tiktok.svg");
|
|
}
|
|
.social-app-tiktok.social-gray {
|
|
background-image: url("../img/social/tiktok-gray.svg");
|
|
}
|
|
|
|
.social-app-tumblr {
|
|
background-image: url("../img/social/tumblr.svg");
|
|
}
|
|
.social-app-tumblr.social-gray {
|
|
background-image: url("../img/social/tumblr-gray.svg");
|
|
}
|
|
|
|
.social-app-twitch {
|
|
background-image: url("../img/social/twitch.svg");
|
|
}
|
|
.social-app-twitch.social-gray {
|
|
background-image: url("../img/social/twitch-gray.svg");
|
|
}
|
|
|
|
.social-app-vk {
|
|
background-image: url("../img/social/vk.svg");
|
|
}
|
|
.social-app-vk.social-gray {
|
|
background-image: url("../img/social/vk-gray.svg");
|
|
}
|
|
|
|
.social-app-x {
|
|
background-image: url("../img/social/x.svg");
|
|
}
|
|
.social-app-x.social-gray {
|
|
background-image: url("../img/social/x-gray.svg");
|
|
}
|
|
|
|
.social-app-youtube {
|
|
background-image: url("../img/social/youtube.svg");
|
|
}
|
|
.social-app-youtube.social-gray {
|
|
background-image: url("../img/social/youtube-gray.svg");
|
|
}
|
|
|
|
.social-xxs {
|
|
height: 1rem;
|
|
}
|
|
|
|
.social-xs {
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.social-sm {
|
|
height: 2rem;
|
|
}
|
|
|
|
.social-md {
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.social-lg {
|
|
height: 3rem;
|
|
}
|
|
|
|
.social-xl {
|
|
height: 5rem;
|
|
}
|
|
|
|
.social-2xl {
|
|
height: 7rem;
|
|
}
|
|
|
|
/*# sourceMappingURL=tabler-socials.css.map */ |