Jeremi: VSCode edit

2026-05-19T17:38:46Z

VSCode edit

New page

<div id="ca-social" class="d-none d-md-block px-2 pt-2 pb-3 p-lg-0">
<div class="d-flex justify-content-between justify-content-lg-end">
<div class="px-2 link-no-border">
<a class="px-md-1" href="https://www.facebook.com/TsadraFoundation" target="_blank" title="Facebook">
<i class="fa-fw fa-xl fa-brands fa-facebook" style="color: #0a66ff;"></i>
</a>
<a class="px-md-1" href="https://www.youtube.com/@tsadrafoundationmediachann5226" target="_blank" title="YouTube">
<i class="fa-fw fa-xl fa-brands fa-youtube" style="color: #ff3a01;"></i>
</a>
<a class="px-md-1" href="https://www.instagram.com/tsadra_foundation" target="_blank" title="Instagram">
<i class="fa-fw fa-xl fa-brands fa-instagram" style="color: #cd39a3;"></i>
</a>
<a class="px-md-1" href="https://www.threads.net/@tsadra_foundation" target="_blank" title="Threads">
<i class="fa-fw fa-xl fa-brands fa-threads text-130" style="color: #000; text-shadow: -.5px -.5px 0 #fdf5e4, .5px -.5px 0 #fdf5e4, -.5px .5px 0 #fdf5e4, .5px .5px 0 #fdf5e4;"></i>
</a>
<a class="px-md-1" href="https://bsky.app/profile/tsadrafoundation.bsky.social" target="_blank" title="BlueSky">
<i class="fa-fw fa-xl fa-brands fa-bluesky text-130" style="color: #08f;"></i>
</a>
<a class="px-md-1" href="https://whatsapp.com/channel/0029VaWbbQL0LKZCwm98D731" target="_blank" title="WhatsApp">
<i class="fa-fw fa-xl fa-brands fa-whatsapp" style="color: #3dc650;"></i>
</a>
</div>
</div>
</div>
<ul id="mobile-buttons" class="d-md-none">
<li id="social-toggle-list-item" class="d-flex align-items-center">
<i id="social-toggle" class="fa-sharp-duotone fa-solid fa-hashtag fa-lg cursor-pointer" style="--fa-primary-color: #381d69; --fa-secondary-color: #381d69;" role="button" aria-expanded="false" aria-controls="social-icons"></i>
<ul id="social-icons" aria-hidden="true">
<li class="social-icon">
<a href="https://www.facebook.com/TsadraFoundation" target="_blank" title="Facebook">
<i class="fa-fw fa-xl fa-brands fa-facebook" style="color: #0a66ff;"></i>
</a>
</li>
<li class="social-icon">
<a href="https://www.youtube.com/@tsadrafoundationmediachann5226" target="_blank" title="YouTube">
<i class="fa-fw fa-xl fa-brands fa-youtube" style="color: #ff3a01;"></i>
</a>
</li>
<li class="social-icon">
<a href="https://www.instagram.com/tsadra_foundation" target="_blank" title="Instagram">
<i class="fa-fw fa-xl fa-brands fa-instagram" style="color: #cd39a3;"></i>
</a>
</li>
<li class="social-icon">
<a href="https://www.threads.net/@tsadra_foundation" target="_blank" title="Threads">
<i class="fa-fw fa-xl fa-brands fa-threads text-130" style="color: #000; text-shadow: -.5px -.5px 0 #fdf5e4, .5px -.5px 0 #fdf5e4, -.5px .5px 0 #fdf5e4 , .5px .5px 0 #fdf5e4;"></i>
</a>
</li>
<li class="social-icon">
<a href="https://bsky.app/profile/tsadrafoundation.bsky.social" target="_blank" title="BlueSky">
<i class="fa-fw fa-xl fa-brands fa-bluesky text-130" style="color: #08f;"></i>
</a>
</li>
<li class="social-icon">
<a href="https://whatsapp.com/channel/0029VaWbbQL0LKZCwm98D731" target="_blank" title="WhatsApp">
<i class="fa-fw fa-xl fa-brands fa-whatsapp" style="color: #3dc650;"></i>
</a>
</li>
</ul>
</li>
<li><a href="#top"><i class="fa-sharp-duotone fa-solid fa-angles-up fa-lg" style="--fa-primary-color: #006d57; --fa-secondary-color: #006d57;"></i></a></li>
<li id="sliding-drawer-toggle-list-item" style="display: none;"><a id="sliding-drawer-toggle"><i class="fa-sharp-duotone fa-solid fa-sidebar-flip fa-lg" style="--fa-primary-color: var(--tws-carnelian); --fa-secondary-color: var(--tws-carnelian);"></i></a></li>
<li class="d-md-none"><a href="/index.php/Special:FormEdit/Feedback?Feedback%5BPageReviewed%5D="><i class="fa-sharp-duotone fa-solid fa-comment-exclamation fa-lg" style="background: #d33; --fa-primary-color: #fff; --fa-secondary-color: #fff; padding-bottom: 8px; padding-left: 8px;"></i></a></li>
</ul>
<style>

.page-Main_Page #mobile-buttons { display: none; }

#mobile-buttons {
position: fixed;
bottom: 0px;
right: 7px;
z-index: 4000;
margin: 0;
padding: 0;
}

#mobile-buttons a,
#mobile-buttons a:hover,
#mobile-buttons a:active {
display: block;
text-decoration: none;
color: inherit;
}

#mobile-buttons i {
padding: .3em;
background: #fffcf5;
border-radius: 25%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
padding-top: 7px;
-webkit-box-shadow: 0 2px 5px 0
rgba(0, 0, 0, .16), 0 2px 10px 0
rgba(0, 0, 0, .12);
box-shadow: 0 2px 5px 0
rgba(0, 0, 0, .16), 0 2px 10px 0
rgba(0, 0, 0, .12);
}

#mobile-buttons ul,
#mobile-buttons li {
list-style: none;
}

#mobile-buttons ul {
margin: 0 !important;
}

#mobile-buttons li {
height: 40px !important;
margin: 0 0 8px 0 !important;
}

#social-toggle-list-item {
position: relative;
min-height: 40px;
}

#social-icons {
position: absolute;
bottom: 100%;
right: 0;
margin-bottom: 8px !important;
transform-origin: bottom;
transform: scaleY(0);
opacity: 0;
transition: transform 0.3s ease, opacity 0.2s ease;
pointer-events: none;
}

#social-icons.active {
transform: scaleY(1);
opacity: 1;
pointer-events: all;
}

</style><script>

// Toggle social icons
(function() {
'use strict';

document.addEventListener('DOMContentLoaded', function() {
const socialToggle = document.getElementById('social-toggle');
const socialList = document.getElementById('social-icons');

if (socialToggle && socialList) {
socialToggle.addEventListener('click', function() {
const isExpanded = socialList.classList.contains('active');
socialList.classList.toggle('active');
socialToggle.setAttribute('aria-expanded', !isExpanded);
socialList.setAttribute('aria-hidden', isExpanded);
if (socialToggle.classList.contains('fa-hashtag')) {
socialToggle.classList.remove('fa-hashtag');
socialToggle.classList.add('fa-xmark-large');
} else {
socialToggle.classList.remove('fa-xmark-large');
socialToggle.classList.add('fa-hashtag');
}
});
}
});
})();

</script>

Widget:SocialIconsMobileButtons - Revision history

Jeremi: VSCode edit