/* * MonkeyMusic: фірмові кольори іконок соцмереж. * * Тема малює всі іконки одним темним #28293d на білому кружку, а на hover * заливає кружок фіолетовим #4f43e3 — своїм для теми, чужим для кожної мережі. * Тут кожна іконка отримує колір свого бренду, а hover — заливку тим самим * кольором з білою іконкою. * * Мережа береться з класу посилання, не з : у футері й хедері це * .sc-footer-socials-item-fa-, у мобільному меню — * .sidebar-socials-item-fa-. Тому :has() не потрібен. * * Підключається через system/mm_social_brand_colors.ocmod.xml (лінк у ), * останнім у черзі стилів — саме тому правила з такою ж специфічністю, як у * style.min.css, перебивають її. * * Три місця, де ці класи живуть: * catalog/view/theme/oct_showcase/template/common/mm_footer.twig (футер) * system/mm_header_social_buttons.ocmod.xml (хедер) * catalog/view/theme/oct_showcase/template/octemplates/menu/oct_menu_mobile.twig */ /* --- палітра брендів ------------------------------------------------- */ .sc-footer-socials-item-fa-facebook-f, .sidebar-socials-item-fa-facebook-f, .sc-footer-socials-item-fa-facebook, .sidebar-socials-item-fa-facebook { --mm-social: #1877f2; } .sc-footer-socials-item-fa-instagram, .sidebar-socials-item-fa-instagram { --mm-social: #dd2a7b; } .sc-footer-socials-item-fa-youtube, .sidebar-socials-item-fa-youtube { --mm-social: #ff0000; } .sc-footer-socials-item-fa-tiktok, .sidebar-socials-item-fa-tiktok { --mm-social: #010101; } .sc-footer-socials-item-fa-telegram, .sidebar-socials-item-fa-telegram, .sc-footer-socials-item-fa-telegram-plane, .sidebar-socials-item-fa-telegram-plane { --mm-social: #2aabee; } .sc-footer-socials-item-fa-viber, .sidebar-socials-item-fa-viber { --mm-social: #7360f2; } .sc-footer-socials-item-fa-whatsapp, .sidebar-socials-item-fa-whatsapp { --mm-social: #25d366; } .sc-footer-socials-item-fa-twitter, .sidebar-socials-item-fa-twitter { --mm-social: #1da1f2; } .sc-footer-socials-item-fa-linkedin, .sidebar-socials-item-fa-linkedin, .sc-footer-socials-item-fa-linkedin-in, .sidebar-socials-item-fa-linkedin-in { --mm-social: #0a66c2; } .sc-footer-socials-item-fa-pinterest, .sidebar-socials-item-fa-pinterest, .sc-footer-socials-item-fa-pinterest-p, .sidebar-socials-item-fa-pinterest-p { --mm-social: #e60023; } .sc-footer-socials-item-fa-facebook-messenger, .sidebar-socials-item-fa-facebook-messenger { --mm-social: #a334fa; } /* --- сама іконка ----------------------------------------------------- */ .sc-footer-socials-item i, .sidebar-socials-item i { /* fallback — темний, як було, якщо мережі немає в палітрі вище */ color: var(--mm-social, #28293d); } /* Заливка кружка на hover: у футері/хедері це ::after поверх білого фону, у сайдбарі — власне тло елемента. */ .sc-footer-socials-item::after { background-color: var(--mm-social, #28293d); } .sidebar-socials-item { transition: background-color .3s ease-out, border-color .3s ease-out; } .sidebar-socials-item:hover { background: var(--mm-social, #28293d); border-color: var(--mm-social, #28293d); } .sidebar-socials-item:hover i { color: #fff; } /* --- дві мережі, чий знак не зводиться до одного кольору -------------- */ /* Instagram: фірмовий градієнт замість плаского рожевого. */ .sc-footer-socials-item-fa-instagram i, .sidebar-socials-item-fa-instagram i { background: linear-gradient(45deg, #f58529 0%, #dd2a7b 45%, #8134af 70%, #515bd4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .sc-footer-socials-item-fa-instagram::after, .sidebar-socials-item-fa-instagram:hover { background-image: linear-gradient(45deg, #f58529 0%, #dd2a7b 45%, #8134af 70%, #515bd4 100%); } .sc-footer-socials-item-fa-instagram:hover i, .sidebar-socials-item-fa-instagram:hover i { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; } /* TikTok: чорний знак із бірюзовим і малиновим зсувом. */ .sc-footer-socials-item-fa-tiktok i, .sidebar-socials-item-fa-tiktok i { text-shadow: -1px -1px 0 #25f4ee, 1px 1px 0 #fe2c55; } .sc-footer-socials-item-fa-tiktok:hover i, .sidebar-socials-item-fa-tiktok:hover i { text-shadow: none; }