KrstlSkll69/Discord-Css-Snippets
1
0
Fork 0
mirror of https://github.com/KrstlSkll69/vc-snippets.git synced 2025-04-19 20:55:22 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions
Discord-Css-Snippets/OtherStuff/better-social-links.css
Krystal 78d67c3c58 fix meta
2025-02-11 18:59:40 -05:00

133 lines
No EOL
6.2 KiB
CSS
Raw Blame History

/**
* @name Better Social Links (fork)
* @author stevencaiOR, krekevyks1337, krystalskullofficial
* @version ??.??.3
* @description Revamps some discord social links, also changes twitter back to bird
* @authorId 929208515883569182
* @website https://krstlskll69.github.io/
* @source https://github.com/KrstlSkll69/vc-snippets?tab=readme-ov-file#12th-swap-mic-and-deafen-icon-
*/
/* This is a fork solely meant to change the twitter logos back to the cute bird */
/* Also i switched the images to being hosted by me */
:root{
--twitter-color: oklch(68.18% 0.1584 243.35); /* Src: https://help.twitter.com/content/dam/help-twitter/brand/logo.png */
--instagram-color: oklch(63.94% 0.2557 9.6); /* Src: https://about.instagram.com/brand/gradient */
--facebook-color: oklch(56.41% 0.2402 261.15); /* Src: https://about.meta.com/brand/resources/facebook/logo */
--youtube-color: oklch(62.8% 0.25768330773615683 29.2338851923426);
--tiktok-color: oklch(88.39% 0.1523 190.61); /* Src: https://developers.tiktok.com/ -> https://sf16-muse-va.ibytedtos.com/obj/tiktok-open-platform/ttop_doc_images/3c4e94e4b12fcbe3b123c67e0c96dbdf.png */
}
[class*="socialLinks_"]{
display: flex;
flex-direction: column;
gap: 5px;
}
[class*="socialLinks_"] svg{
height: 20px;
width: 20px;
}
[class*="anchorUnderlineOnHover_"][aria-label="twitter" i],
[class*="anchorUnderlineOnHover_"][title="twitter" i]{
color: var(--twitter-color);
}
[class*="anchorUnderlineOnHover_"][aria-label="instagram" i],
[class*="anchorUnderlineOnHover_"][title="instagram" i]{
color: var(--instagram-color);
}
[class*="anchorUnderlineOnHover_"][aria-label="instagram" i] svg,
[class*="anchorUnderlineOnHover_"][title="instagram" i] svg{
background-image: url(https://krstlskll69.github.io/vc-snippets/OtherStuff/photos/Instagram-logo.png);
}
[class*="anchorUnderlineOnHover_"][aria-label="facebook" i],
[class*="anchorUnderlineOnHover_"][title="facebook" i]{
color: var(--facebook-color);
}
[class*="anchorUnderlineOnHover_"][aria-label="facebook" i] svg,
[class*="anchorUnderlineOnHover_"][title="facebook" i] svg{
-webkit-mask: url(https://krstlskll69.github.io/vc-snippets/OtherStuff/photos/Facebook-logo.svg) no-repeat center / contain;
background: currentColor;
}
[class*="anchorUnderlineOnHover_"][aria-label="youtube" i],
[class*="anchorUnderlineOnHover_"][title="youtube" i]{
color: var(--youtube-color);
}
[class*="anchorUnderlineOnHover_"][aria-label="tiktok" i],
[class*="anchorUnderlineOnHover_"][title="tiktok" i]{
color: var(--tiktok-color);
}
[class*="anchorUnderlineOnHover_"][aria-label="tiktok" i] svg,
[class*="anchorUnderlineOnHover_"][title="tiktok" i] svg{
background-image: url(https://krstlskll69.github.io/vc-snippets/OtherStuff/photos/TikTok-logo.png);
}
[class*="anchorUnderlineOnHover_"][aria-label="instagram" i] svg,
[class*="anchorUnderlineOnHover_"][title="instagram" i] svg,
[class*="anchorUnderlineOnHover_"][aria-label="tiktok" i] svg,
[class*="anchorUnderlineOnHover_"][title="tiktok" i] svg{
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
[class*="anchorUnderlineOnHover_"][aria-label="instagram" i] path,
[class*="anchorUnderlineOnHover_"][title="instagram" i] path,
[class*="anchorUnderlineOnHover_"][aria-label="facebook" i] path,
[class*="anchorUnderlineOnHover_"][title="facebook" i] path,
[class*="anchorUnderlineOnHover_"][aria-label="tiktok" i] path,
[class*="anchorUnderlineOnHover_"][title="tiktok" i] path{
fill: none;
}
[class*="anchorUnderlineOnHover_"][aria-label="twitter" i]:hover,
[class*="anchorUnderlineOnHover_"][title="twitter" i]:hover,
[class*="anchorUnderlineOnHover_"][aria-label="instagram" i]:hover,
[class*="anchorUnderlineOnHover_"][title="instagram" i]:hover,
[class*="anchorUnderlineOnHover_"][aria-label="facebook" i]:hover,
[class*="anchorUnderlineOnHover_"][title="facebook" i]:hover,
[class*="anchorUnderlineOnHover_"][aria-label="youtube" i]:hover,
[class*="anchorUnderlineOnHover_"][title="youtube" i]:hover,
[class*="anchorUnderlineOnHover_"][aria-label="tiktok" i]:hover,
[class*="anchorUnderlineOnHover_"][title="tiktok" i]:hover{
filter: brightness(1.2);
}
[class*="socialLinks_"] [class*="anchorUnderlineOnHover_"]:after{
font-size: 16px;
line-height: 20px;
margin-left: 1ch;
vertical-align: top;
}
[class*="socialLinks_"] [class*="anchorUnderlineOnHover_"]:after{
color: var(--text-muted);
}
[class*="socialLinks_"] [class*="anchorUnderlineOnHover_"]:hover:after{
color: inherit;
}
[class*="socialLinks_"] [class*="anchorUnderlineOnHover_"]:hover{
text-decoration: none;
}
[class*="socialLinks_"] [class*="anchorUnderlineOnHover_"][title="twitter" i]:after{
content: "- Twitter";
}
[class*="socialLinks_"] [class*="anchorUnderlineOnHover_"][title="instagram" i]:after{
content: "- Instagram";
}
[class*="socialLinks_"] [class*="anchorUnderlineOnHover_"][title="facebook" i]:after{
content: "- Facebook";
}
[class*="socialLinks_"] [class*="anchorUnderlineOnHover_"][title="youtube" i]:after{
content: "- YouTube";
}
[class*="socialLinks_"] [class*="anchorUnderlineOnHover_"][title="tiktok" i]:after{
content: "- TikTok";
}
/*--------Change Svgs/Icons--------*/
[d="M13.86 10.47 21.15 2h-1.73l-6.33 7.35L8.04 2H2.22l7.64 11.12L2.22 22h1.72l6.68-7.77L15.96 22h5.82l-7.92-11.53Zm-2.36 2.75-.78-1.11L4.57 3.3h2.65l4.97 7.11.77 1.1 6.46 9.25h-2.65l-5.27-7.54Z"] {
d: path("m20.75 7.51.01.59c0 5.96-4.54 12.84-12.84 12.84-2.45 0-4.86-.7-6.92-2.03a9.06 9.06 0 0 0 6.68-1.87 4.52 4.52 0 0 1-4.22-3.13c.68.13 1.38.1 2.04-.08A4.51 4.51 0 0 1 1.88 9.4v-.05c.63.35 1.33.54 2.05.56a4.52 4.52 0 0 1-1.4-6.02 12.81 12.81 0 0 0 9.3 4.71 4.52 4.52 0 0 1 7.7-4.12 9.06 9.06 0 0 0 2.86-1.1 4.53 4.53 0 0 1-1.98 2.5c.9-.1 1.77-.34 2.59-.7-.6.9-1.37 1.7-2.25 2.33Z");
}
img[src="/assets/a61999ae9bfb9658.svg"],[src="/assets/f3c7469988f0ce3a02e4.svg"],[src="/assets/5cf814b9693aac47.svg"]{
content: url(https://krstlskll69.github.io/vc-snippets/OtherStuff/photos/Twitter-old-logo.png) !important;
}
button[class*="accountBtnInner_"][aria-label='X'], button[class*='accountButtonInner_'][aria-label='X'] {
background-image: url(https://krstlskll69.github.io/vc-snippets/OtherStuff/photos/Twitter-old-logo.png) !important;
}
Reference in a new issue View git blame Copy permalink