.seolik-share2[data-share2-loading="1"] { visibility: hidden !important; } /* ========================================================= Reserve space before Share2 init Убирает небольшой сдвиг блока ниже при загрузке страницы ========================================================= */ .seolik-share2[data-placement="static"]:not([data-share2-ready="1"]) { display: block !important; min-height: var(--share2-reserve-height, 46px) !important; } .seolik-share2[data-placement="static"][data-size="sm"]:not([data-share2-ready="1"]) { --share2-reserve-height: 38px; } .seolik-share2[data-placement="static"][data-size="md"]:not([data-share2-ready="1"]) { --share2-reserve-height: 46px; } .seolik-share2[data-placement="static"][data-size="lg"]:not([data-share2-ready="1"]) { --share2-reserve-height: 54px; } .seolik-share2[data-placement="static"][data-size="xl"]:not([data-share2-ready="1"]) { --share2-reserve-height: 64px; } /* Если включён заголовок "Поделиться" */ .seolik-share2[data-placement="static"][data-show-title="true"]:not([data-share2-ready="1"]) { min-height: calc(var(--share2-reserve-height, 46px) + 28px) !important; } .seolik-share2[data-placement="static"][data-orientation="vertical"]:not([data-share2-ready="1"]) { min-height: calc((var(--share2-reserve-height, 46px) * 5) + (var(--share2-gap, 10px) * 4)) !important; } .seolik-share2{--share2-gap:10px;--share2-size:46px;--share2-radius:999px;--share2-text:#1f2937;--share2-line:rgba(15,23,42,.14);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}.seolik-share2 *{box-sizing:border-box}.seolik-share2__title{margin:0 0 12px;font-weight:900;color:var(--share2-text);font-size:16px}.seolik-share2__list{display:flex;align-items:center;flex-wrap:wrap;gap:var(--share2-gap)}.seolik-share2[data-align=left] .seolik-share2__list{justify-content:flex-start}.seolik-share2[data-align=center] .seolik-share2__list{justify-content:center}.seolik-share2[data-align=right] .seolik-share2__list{justify-content:flex-end}.seolik-share2[data-orientation=vertical] .seolik-share2__list{flex-direction:column;align-items:stretch}.seolik-share2__item{position:relative}.seolik-share2__link{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:var(--share2-size);height:var(--share2-size);padding:0 14px;border:0;text-decoration:none;cursor:pointer;font:900 14px/1 Inter,Segoe UI,Roboto,Arial,sans-serif;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,opacity .18s ease,color .18s ease,background .18s ease}.seolik-share2__icon{width:24px;height:24px;display:block;flex:0 0 auto;object-fit:contain}.seolik-share2__text{white-space:nowrap}.seolik-share2[data-labels=none] .seolik-share2__text,.seolik-share2[data-labels=tooltip] .seolik-share2__text{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.seolik-share2[data-labels=tooltip] .seolik-share2__link:after{content:attr(aria-label);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);opacity:0;pointer-events:none;background:#111827;color:#fff;padding:8px 10px;border-radius:10px;font-size:12px;line-height:1;box-shadow:0 12px 26px rgba(0,0,0,.2);transition:.16s;white-space:nowrap}.seolik-share2[data-labels=tooltip] .seolik-share2__link:hover:after{opacity:1;transform:translateX(-50%) translateY(0)}.seolik-share2[data-size=sm]{--share2-size:38px}.seolik-share2[data-size=sm] .seolik-share2__icon{width:20px;height:20px}.seolik-share2[data-size=md]{--share2-size:46px}.seolik-share2[data-size=lg]{--share2-size:56px}.seolik-share2[data-size=lg] .seolik-share2__icon{width:29px;height:29px}.seolik-share2[data-size=xl]{--share2-size:66px}.seolik-share2[data-size=xl] .seolik-share2__icon{width:34px;height:34px}.seolik-share2[data-shape=round]{--share2-radius:999px}.seolik-share2[data-shape=round] .seolik-share2__link{width:var(--share2-size);padding:0}.seolik-share2[data-shape=rounded]{--share2-radius:15px}.seolik-share2[data-shape=square]{--share2-radius:8px}.seolik-share2[data-shape=pill]{--share2-radius:999px}.seolik-share2__link{border-radius:var(--share2-radius)}.seolik-share2[data-theme=brand] .seolik-share2__link{color:#fff;box-shadow:0 12px 24px rgba(15,23,42,.16)}.seolik-share2[data-theme=brand] .seolik-share2__link_service_vkontakte{background:linear-gradient(135deg,#4c83c7,#2f67ad)}.seolik-share2[data-theme=brand] .seolik-share2__link_service_odnoklassniki{background:linear-gradient(135deg,#ffae42,#ef7f18)}.seolik-share2[data-theme=brand] .seolik-share2__link_service_moimir{background:linear-gradient(135deg,#2099ef,#126fc1)}.seolik-share2[data-theme=brand] .seolik-share2__link_service_telegram{background:linear-gradient(135deg,#37b6ea,#1c8ec8)}.seolik-share2[data-theme=brand] .seolik-share2__link_service_max{background:linear-gradient(135deg,#141b34,#5868ff)}.seolik-share2[data-theme=glass] .seolik-share2__link{color:#172033;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.75);box-shadow:0 16px 34px rgba(40,62,100,.16),inset 0 1px 0 rgba(255,255,255,.82);backdrop-filter:blur(12px)}.seolik-share2[data-theme=soft] .seolik-share2__link{color:#182236;background:#f3f7ff;box-shadow:inset 0 0 0 1px rgba(33,47,78,.08)}.seolik-share2[data-theme=outline] .seolik-share2__link{color:#182236;background:#fff;border:1px solid var(--share2-line)}.seolik-share2[data-theme=dark] .seolik-share2__link{color:#fff;background:linear-gradient(135deg,#111827,#25334d);box-shadow:0 12px 26px rgba(17,24,39,.22)}.seolik-share2[data-theme=mono] .seolik-share2__link{color:#fff;background:#2b3446}.seolik-share2[data-theme=card] .seolik-share2__link{color:#182236;background:#fff;box-shadow:0 16px 34px rgba(38,52,80,.16)} .seolik-share2[data-theme=neon] .seolik-share2__link{color:#fff;background:#101827;box-shadow:0 0 0 1px rgba(111,134,255,.35),0 0 24px rgba(88,104,255,.3)}.seolik-share2[data-hover=lift] .seolik-share2__link:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(15,23,42,.22)}.seolik-share2[data-hover=scale] .seolik-share2__link:hover{transform:scale(1.08)}.seolik-share2[data-hover=glow] .seolik-share2__link:hover{filter:brightness(1.08);box-shadow:0 0 0 4px rgba(88,104,255,.12),0 0 26px rgba(88,104,255,.38)}.seolik-share2[data-hover=rotate] .seolik-share2__link:hover{transform:rotate(-4deg) scale(1.04)}.seolik-share2[data-hover=shine] .seolik-share2__link:before{content:"";position:absolute;inset:-45% auto -45% -70%;width:42%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transition:left .42s ease}.seolik-share2[data-hover=shine] .seolik-share2__link:hover:before{left:125%}.seolik-share2[data-orientation=vertical] .seolik-share2__link{width:100%;justify-content:flex-start}.seolik-share2[data-orientation=vertical][data-labels=none] .seolik-share2__link,.seolik-share2[data-orientation=vertical][data-labels=tooltip] .seolik-share2__link{width:var(--share2-size);justify-content:center}.seolik-share2[data-labels=inside][data-shape=round] .seolik-share2__link{width:auto;padding:0 16px}.seolik-share2__fallback{margin-top:8px;font-size:12px;color:#64748b}@media(max-width:560px){.seolik-share2{--share2-gap:8px}.seolik-share2[data-size=xl]{--share2-size:58px}.seolik-share2[data-size=lg]{--share2-size:52px}.seolik-share2[data-labels=inside] .seolik-share2__link{font-size:13px;padding:0 12px}.seolik-share2[data-orientation=horizontal] .seolik-share2__list{justify-content:center}.seolik-share2[data-orientation=vertical] .seolik-share2__list{align-items:center}.seolik-share2[data-orientation=vertical][data-labels=inside] .seolik-share2__link{min-width:190px}} /* Режим: только PNG-иконки без кнопочной подложки. Форма применяется к самим картинкам. */ .seolik-share2[data-theme=icons] .seolik-share2__link{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;min-width:var(--share2-size)!important;width:var(--share2-size)!important;height:var(--share2-size)!important;color:transparent!important;overflow:visible;filter:none;} .seolik-share2[data-theme=icons] .seolik-share2__text{position:absolute!important;inline-size:1px!important;block-size:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;} .seolik-share2[data-theme=icons] .seolik-share2__icon{width:var(--share2-size)!important;height:var(--share2-size)!important;object-fit:cover;display:block;filter:drop-shadow(0 12px 18px rgba(15,23,42,.18));transition:transform .18s ease,filter .18s ease,opacity .18s ease,border-radius .18s ease;} .seolik-share2[data-theme=icons][data-shape=round] .seolik-share2__icon{border-radius:50%;} .seolik-share2[data-theme=icons][data-shape=rounded] .seolik-share2__icon{border-radius:18px;} .seolik-share2[data-theme=icons][data-shape=square] .seolik-share2__icon{border-radius:7px;} .seolik-share2[data-theme=icons][data-shape=pill] .seolik-share2__icon{border-radius:999px;} .seolik-share2[data-theme=icons][data-hover=lift] .seolik-share2__link:hover{transform:none;box-shadow:none;} .seolik-share2[data-theme=icons][data-hover=lift] .seolik-share2__link:hover .seolik-share2__icon{transform:translateY(-4px);filter:drop-shadow(0 18px 24px rgba(15,23,42,.25));} .seolik-share2[data-theme=icons][data-hover=scale] .seolik-share2__link:hover{transform:none;} .seolik-share2[data-theme=icons][data-hover=scale] .seolik-share2__link:hover .seolik-share2__icon{transform:scale(1.08);} .seolik-share2[data-theme=icons][data-hover=glow] .seolik-share2__link:hover{box-shadow:none;filter:none;} .seolik-share2[data-theme=icons][data-hover=glow] .seolik-share2__link:hover .seolik-share2__icon{filter:drop-shadow(0 0 18px rgba(88,104,255,.55)) brightness(1.06);} .seolik-share2[data-theme=icons][data-hover=rotate] .seolik-share2__link:hover{transform:none;} .seolik-share2[data-theme=icons][data-hover=rotate] .seolik-share2__link:hover .seolik-share2__icon{transform:rotate(-4deg) scale(1.04);} .seolik-share2[data-theme=icons][data-hover=shine] .seolik-share2__link{overflow:hidden;border-radius:var(--share2-radius);} .seolik-share2[data-theme=icons][data-hover=shine] .seolik-share2__link:before{z-index:2;} .seolik-share2[data-theme=icons][data-orientation=vertical] .seolik-share2__link{width:var(--share2-size)!important;justify-content:center!important;} /* Alignment fixes */ .seolik-share2[data-align=left] .seolik-share2__title{text-align:left} .seolik-share2[data-align=center] .seolik-share2__title{text-align:center} .seolik-share2[data-align=right] .seolik-share2__title{text-align:right} .seolik-share2[data-orientation=vertical][data-align=left] .seolik-share2__list{align-items:flex-start;justify-content:flex-start} .seolik-share2[data-orientation=vertical][data-align=center] .seolik-share2__list{align-items:center;justify-content:flex-start} .seolik-share2[data-orientation=vertical][data-align=right] .seolik-share2__list{align-items:flex-end;justify-content:flex-start} .seolik-share2[data-orientation=vertical][data-align=left][data-labels=inside] .seolik-share2__link{justify-content:flex-start} .seolik-share2[data-orientation=vertical][data-align=center][data-labels=inside] .seolik-share2__link{justify-content:center} .seolik-share2[data-orientation=vertical][data-align=right][data-labels=inside] .seolik-share2__link{justify-content:flex-end} @media(max-width:560px){ .seolik-share2[data-orientation=horizontal][data-align=left] .seolik-share2__list{justify-content:flex-start} .seolik-share2[data-orientation=horizontal][data-align=center] .seolik-share2__list{justify-content:center} .seolik-share2[data-orientation=horizontal][data-align=right] .seolik-share2__list{justify-content:flex-end} .seolik-share2[data-orientation=vertical][data-align=left] .seolik-share2__list{align-items:flex-start} .seolik-share2[data-orientation=vertical][data-align=center] .seolik-share2__list{align-items:center} .seolik-share2[data-orientation=vertical][data-align=right] .seolik-share2__list{align-items:flex-end} } /* Extra hover effects */ .seolik-share2[data-hover=none] .seolik-share2__link:hover{transform:none!important;box-shadow:inherit;filter:none!important} .seolik-share2[data-hover=pulse] .seolik-share2__link:hover{animation:seolikShare2Pulse .72s ease both} .seolik-share2[data-hover=bounce] .seolik-share2__link:hover{animation:seolikShare2Bounce .54s ease both} .seolik-share2[data-hover=slide] .seolik-share2__link:hover{transform:translateX(5px)} .seolik-share2[data-hover=blur] .seolik-share2__link:hover{filter:contrast(1.08) saturate(1.12);box-shadow:0 16px 32px rgba(15,23,42,.20)} .seolik-share2[data-hover=tilt] .seolik-share2__link:hover{transform:perspective(360px) rotateX(7deg) rotateY(-7deg) translateY(-2px)} .seolik-share2[data-hover=border] .seolik-share2__link:hover{box-shadow:0 0 0 3px rgba(69,119,255,.22),0 14px 28px rgba(15,23,42,.18)} @keyframes seolikShare2Pulse{0%{transform:scale(1)}45%{transform:scale(1.1)}100%{transform:scale(1.03)}} @keyframes seolikShare2Bounce{0%{transform:translateY(0)}35%{transform:translateY(-7px)}60%{transform:translateY(2px)}100%{transform:translateY(-3px)}} /* Extra hover effects for icons-only theme: animation applies to PNG itself */ .seolik-share2[data-theme=icons][data-hover=none] .seolik-share2__link:hover{transform:none!important;box-shadow:none!important;filter:none!important} .seolik-share2[data-theme=icons][data-hover=none] .seolik-share2__link:hover .seolik-share2__icon{transform:none!important;filter:drop-shadow(0 12px 18px rgba(15,23,42,.18))!important;opacity:1!important} .seolik-share2[data-theme=icons][data-hover=pulse] .seolik-share2__link:hover{animation:none;transform:none;box-shadow:none} .seolik-share2[data-theme=icons][data-hover=pulse] .seolik-share2__link:hover .seolik-share2__icon{animation:seolikShare2Pulse .72s ease both} .seolik-share2[data-theme=icons][data-hover=bounce] .seolik-share2__link:hover{animation:none;transform:none;box-shadow:none} .seolik-share2[data-theme=icons][data-hover=bounce] .seolik-share2__link:hover .seolik-share2__icon{animation:seolikShare2Bounce .54s ease both} .seolik-share2[data-theme=icons][data-hover=slide] .seolik-share2__link:hover{transform:none;box-shadow:none} .seolik-share2[data-theme=icons][data-hover=slide] .seolik-share2__link:hover .seolik-share2__icon{transform:translateX(5px)} .seolik-share2[data-theme=icons][data-hover=blur] .seolik-share2__link:hover{filter:none;box-shadow:none} .seolik-share2[data-theme=icons][data-hover=blur] .seolik-share2__link:hover .seolik-share2__icon{filter:drop-shadow(0 16px 24px rgba(15,23,42,.22)) contrast(1.08) saturate(1.12)} .seolik-share2[data-theme=icons][data-hover=tilt] .seolik-share2__link:hover{transform:none;box-shadow:none} .seolik-share2[data-theme=icons][data-hover=tilt] .seolik-share2__link:hover .seolik-share2__icon{transform:perspective(360px) rotateX(7deg) rotateY(-7deg) translateY(-2px)} .seolik-share2[data-theme=icons][data-hover=border] .seolik-share2__link:hover{transform:none;box-shadow:none} .seolik-share2[data-theme=icons][data-hover=border] .seolik-share2__link:hover .seolik-share2__icon{box-shadow:0 0 0 3px rgba(69,119,255,.24)} /* Tooltip fix: показываем текст при наведении через контейнер элемента, а не через саму кнопку. Так подсказка не обрезается overflow:hidden у обычных стилей кнопок и работает во всех темах. */ .seolik-share2[data-labels=tooltip] .seolik-share2__link:after{content:none!important;display:none!important;} .seolik-share2[data-labels=tooltip] .seolik-share2__item{position:relative;overflow:visible;} .seolik-share2[data-labels=tooltip] .seolik-share2__item:after{content:attr(data-share2-title);position:absolute;z-index:50;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);opacity:0;pointer-events:none;background:#111827;color:#fff;padding:8px 10px;border-radius:10px;font:800 12px/1 Inter,Segoe UI,Roboto,Arial,sans-serif;box-shadow:0 12px 26px rgba(0,0,0,.2);transition:opacity .16s ease,transform .16s ease;white-space:nowrap;} .seolik-share2[data-labels=tooltip] .seolik-share2__item:hover:after,.seolik-share2[data-labels=tooltip] .seolik-share2__item:focus-within:after{opacity:1;transform:translateX(-50%) translateY(0);} .seolik-share2[data-labels=tooltip][data-orientation=vertical][data-align=left] .seolik-share2__item:after{left:0;transform:translateY(4px);} .seolik-share2[data-labels=tooltip][data-orientation=vertical][data-align=left] .seolik-share2__item:hover:after,.seolik-share2[data-labels=tooltip][data-orientation=vertical][data-align=left] .seolik-share2__item:focus-within:after{transform:translateY(0);} .seolik-share2[data-labels=tooltip][data-orientation=vertical][data-align=right] .seolik-share2__item:after{left:auto;right:0;transform:translateY(4px);} .seolik-share2[data-labels=tooltip][data-orientation=vertical][data-align=right] .seolik-share2__item:hover:after,.seolik-share2[data-labels=tooltip][data-orientation=vertical][data-align=right] .seolik-share2__item:focus-within:after{transform:translateY(0);} @media(max-width:560px){.seolik-share2[data-labels=tooltip] .seolik-share2__item:after{font-size:11px;padding:7px 9px;}} /* Icon shadow option */ .seolik-share2[data-icon-shadow=false] .seolik-share2__icon, .seolik-share2[data-icon-shadow=false] .seolik-share2__link:hover .seolik-share2__icon, .seolik-share2[data-icon-shadow=false] .seolik-share2__link:focus-visible .seolik-share2__icon{ filter:none!important; box-shadow:none!important; } /* Vector icons for CSS-button themes. They inherit button text color: dark/brand/neon styles => light icons, light styles => dark icons. */ .seolik-share2:not([data-theme=icons]) .seolik-share2__icon_svg{ color:currentColor; width:24px; height:24px; display:block; flex:0 0 auto; line-height:0; filter:none!important; box-shadow:none!important; } .seolik-share2:not([data-theme=icons]) .seolik-share2__icon_svg svg{ width:100%; height:100%; display:block; overflow:visible; } .seolik-share2[data-size=sm]:not([data-theme=icons]) .seolik-share2__icon_svg{width:20px;height:20px} .seolik-share2[data-size=lg]:not([data-theme=icons]) .seolik-share2__icon_svg{width:29px;height:29px} .seolik-share2[data-size=xl]:not([data-theme=icons]) .seolik-share2__icon_svg{width:34px;height:34px} /* CSS-button shadow switch. It affects only normal CSS buttons, not the PNG-only mode. */ .seolik-share2[data-button-shadow=false]:not([data-theme=icons]) .seolik-share2__link, .seolik-share2[data-button-shadow=false]:not([data-theme=icons]) .seolik-share2__link:hover, .seolik-share2[data-button-shadow=false]:not([data-theme=icons]) .seolik-share2__link:focus-visible{ box-shadow:none!important; } .seolik-share2[data-button-shadow=false]:not([data-theme=icons])[data-hover=border] .seolik-share2__link:hover{ box-shadow:0 0 0 3px rgba(69,119,255,.22)!important; } /* Квадратная форма для CSS-кнопок. Если подписи выключены или включён режим tooltip, кнопка остаётся строго 1:1. Если выбран режим «Иконка + текст», текст показывается внутри кнопки, поэтому кнопка может расширяться по ширине, сохраняя квадратные углы. */ .seolik-share2:not([data-theme=icons])[data-shape=square] .seolik-share2__link{ height:var(--share2-size)!important; min-height:var(--share2-size)!important; border-radius:8px!important; } .seolik-share2:not([data-theme=icons])[data-shape=square]:not([data-labels=inside]) .seolik-share2__link{ width:var(--share2-size)!important; min-width:var(--share2-size)!important; max-width:var(--share2-size)!important; aspect-ratio:1/1; padding:0!important; justify-content:center!important; align-items:center!important; gap:0!important; } .seolik-share2:not([data-theme=icons])[data-shape=square][data-labels=inside] .seolik-share2__link{ width:auto!important; min-width:var(--share2-size)!important; max-width:none!important; padding:0 14px!important; justify-content:center!important; align-items:center!important; gap:9px!important; } .seolik-share2:not([data-theme=icons])[data-shape=square][data-labels=inside] .seolik-share2__text{ position:static!important; inline-size:auto!important; block-size:auto!important; overflow:visible!important; clip:auto!important; white-space:nowrap!important; } .seolik-share2:not([data-theme=icons])[data-shape=square][data-orientation=vertical]:not([data-labels=inside]) .seolik-share2__link{ width:var(--share2-size)!important; min-width:var(--share2-size)!important; max-width:var(--share2-size)!important; } .seolik-share2:not([data-theme=icons])[data-shape=square][data-orientation=vertical][data-labels=inside] .seolik-share2__link{ width:100%!important; max-width:none!important; } @media(max-width:560px){ .seolik-share2:not([data-theme=icons])[data-shape=square][data-labels=inside] .seolik-share2__link{ padding:0 12px!important; } } .seolik-share2__title { color: var(--seolik-share2-title-color, #1f2937); } [data-bs-theme="dark"] .seolik-share2__title { color: var(--seolik-share2-title-color-dark, #f8fafc); } .seolik-share2 { display: inline-flex; flex-direction: column; max-width: calc(100vw - 24px); vertical-align: middle; } .seolik-share2[data-placement="top"], .seolik-share2[data-placement="bottom"], .seolik-share2[data-placement="left"], .seolik-share2[data-placement="right"] { position: fixed; z-index: 2147483000; margin: 0 !important; } .seolik-share2[data-placement="top"] { top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); } .seolik-share2[data-placement="bottom"] { bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); } .seolik-share2[data-placement="left"] { left: max(14px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); } .seolik-share2[data-placement="right"] { right: max(14px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); } /* Слева и справа лучше показывать вертикально */ .seolik-share2[data-placement="left"] .seolik-share2__list, .seolik-share2[data-placement="right"] .seolik-share2__list { flex-direction: column; align-items: center; justify-content: flex-start; } /* Чтобы предпросмотр в генераторе не улетал fixed-блоком на всю страницу */ .seolik-share2[data-preview="true"] { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; z-index: auto !important; margin: 0 !important; max-width: 100% !important; } /* Мобильная адаптация */ @media (max-width: 560px) { .seolik-share2[data-placement="top"], .seolik-share2[data-placement="bottom"] { width: calc(100vw - 20px); align-items: center; } .seolik-share2[data-placement="top"] .seolik-share2__list, .seolik-share2[data-placement="bottom"] .seolik-share2__list { justify-content: center; } .seolik-share2[data-placement="left"], .seolik-share2[data-placement="right"] { max-height: calc(100vh - 24px); } } /* === Smart hover labels / tooltip side === */ /* === Smart tooltip side for data-labels="tooltip" === */ .seolik-share2[data-labels="tooltip"] .seolik-share2__link::after { content: none !important; display: none !important; } .seolik-share2[data-labels="tooltip"] .seolik-share2__item { position: relative !important; overflow: visible !important; } .seolik-share2[data-labels="tooltip"] .seolik-share2__item::after { content: attr(data-share2-title) !important; position: absolute !important; z-index: 2147483001 !important; display: block !important; width: max-content !important; max-width: calc(100vw - 28px) !important; padding: 8px 11px !important; border-radius: 999px !important; border: 1px solid rgba(15, 23, 42, .10) !important; background: rgba(15, 23, 42, .94) !important; color: #fff !important; box-shadow: 0 14px 34px rgba(15, 23, 42, .24) !important; font: 800 13px/1 Inter, Segoe UI, Roboto, Arial, sans-serif !important; white-space: nowrap !important; pointer-events: none !important; opacity: 0 !important; visibility: hidden !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important; } .seolik-share2[data-labels="tooltip"] .seolik-share2__item:hover::after, .seolik-share2[data-labels="tooltip"] .seolik-share2__item:focus-within::after { opacity: 1 !important; visibility: visible !important; } /* Подсказка сверху */ .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="top"]::after { left: 50% !important; bottom: calc(100% + 10px) !important; transform: translateX(-50%) translateY(4px) !important; } .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="top"]:hover::after, .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="top"]:focus-within::after { transform: translateX(-50%) translateY(0) !important; } /* Подсказка снизу */ .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="bottom"]::after { left: 50% !important; top: calc(100% + 10px) !important; transform: translateX(-50%) translateY(-4px) !important; } .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="bottom"]:hover::after, .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="bottom"]:focus-within::after { transform: translateX(-50%) translateY(0) !important; } /* Подсказка слева от кнопки */ .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="left"]::after { right: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) translateX(4px) !important; } .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="left"]:hover::after, .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="left"]:focus-within::after { transform: translateY(-50%) translateX(0) !important; } /* Подсказка справа от кнопки */ .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="right"]::after { left: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) translateX(-4px) !important; } .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="right"]:hover::after, .seolik-share2[data-labels="tooltip"] .seolik-share2__item[data-tooltip-side="right"]:focus-within::after { transform: translateY(-50%) translateX(0) !important; } /* Внутри preview-блока генератора не даём подсказке вылезать слишком широко */ .seolik-share2[data-preview="true"][data-labels="tooltip"] .seolik-share2__item::after { max-width: min(260px, calc(100vw - 28px)) !important; } /* Тёмная тема */ [data-bs-theme="dark"] .seolik-share2[data-labels="tooltip"] .seolik-share2__item::after { border-color: rgba(255, 255, 255, .12) !important; background: rgba(2, 6, 23, .95) !important; box-shadow: 0 16px 38px rgba(0, 0, 0, .34) !important; } /* === Mobile fixed placement stability === */ /* На мобильных браузерах address bar меняет высоту viewport при первом скролле. Поэтому боковые fixed-кнопки нельзя держать через top:50%, иначе они один раз прыгают. */ @media (max-width: 560px) { .seolik-share2:not([data-preview="true"])[data-placement="left"], .seolik-share2:not([data-preview="true"])[data-placement="right"] { top: calc(env(safe-area-inset-top) + 210px) !important; bottom: auto !important; transform: none !important; } .seolik-share2:not([data-preview="true"])[data-placement="left"] { left: max(10px, env(safe-area-inset-left)) !important; right: auto !important; } .seolik-share2:not([data-preview="true"])[data-placement="right"] { right: max(10px, env(safe-area-inset-right)) !important; left: auto !important; } } @media (max-width: 560px) { .seolik-share2:not([data-preview="true"])[data-placement="top"] { top: calc(env(safe-area-inset-top) + 10px) !important; bottom: auto !important; transform: translateX(-50%) !important; } .seolik-share2:not([data-preview="true"])[data-placement="bottom"] { bottom: calc(env(safe-area-inset-bottom) + 10px) !important; top: auto !important; transform: translateX(-50%) !important; } } /* ========================================================= Premium override: mono / card / neon Меняем только CSS-стили вариантов из select#theme ========================================================= */ /* === 1. Монохромный — дорогой графитовый стиль === */ .seolik-share2[data-theme="mono"] .seolik-share2__link { color: #ffffff; background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.18), transparent 34%), linear-gradient(135deg, #111827 0%, #2b3446 52%, #0f172a 100%); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 14px 30px rgba(15, 23, 42, .24), inset 0 1px 0 rgba(255,255,255,.12); } .seolik-share2[data-theme="mono"] .seolik-share2__link:hover { background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.24), transparent 36%), linear-gradient(135deg, #0f172a 0%, #374151 54%, #111827 100%); box-shadow: 0 18px 38px rgba(15, 23, 42, .30), inset 0 1px 0 rgba(255,255,255,.16); } /* === 2. Карточки с тенью — светлые премиальные карточки === */ .seolik-share2[data-theme="card"] .seolik-share2__link { color: #1f2937; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.95), transparent 34%), linear-gradient(135deg, #ffffff 0%, #f8fbff 52%, #eef4ff 100%); border: 1px solid rgba(148, 163, 184, .24); box-shadow: 0 16px 36px rgba(38, 52, 80, .16), 0 4px 12px rgba(38, 52, 80, .08), inset 0 1px 0 rgba(255,255,255,.88); } .seolik-share2[data-theme="card"] .seolik-share2__link:hover { background: radial-gradient(circle at 22% 18%, rgba(255,255,255,1), transparent 36%), linear-gradient(135deg, #ffffff 0%, #f5f9ff 48%, #eaf2ff 100%); border-color: rgba(96, 165, 250, .34); box-shadow: 0 20px 44px rgba(38, 52, 80, .20), 0 6px 16px rgba(38, 52, 80, .10), inset 0 1px 0 rgba(255,255,255,.95); } /* Цвета иконок в режиме карточек */ .seolik-share2[data-theme="card"] .seolik-share2__link_service_vkontakte { color: #2f67ad; } .seolik-share2[data-theme="card"] .seolik-share2__link_service_odnoklassniki { color: #ef7f18; } .seolik-share2[data-theme="card"] .seolik-share2__link_service_moimir { color: #126fc1; } .seolik-share2[data-theme="card"] .seolik-share2__link_service_telegram { color: #1c8ec8; } .seolik-share2[data-theme="card"] .seolik-share2__link_service_max { color: #5868ff; } /* === 3. Неоновый — тёмный глянец + цветное свечение === */ /* === 3. Неоновый — яркий премиальный cyber-glow без color-mix === */ .seolik-share2[data-theme="neon"] .seolik-share2__link { color: #ffffff !important; border: 1px solid rgba(125, 180, 255, .55) !important; background: radial-gradient(circle at 24% 18%, rgba(255,255,255,.28), transparent 28%), radial-gradient(circle at 78% 82%, rgba(0, 212, 255, .26), transparent 34%), linear-gradient(135deg, #061126 0%, #101a3d 48%, #050816 100%) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(0, 212, 255, .34), 0 0 34px rgba(88, 104, 255, .26), 0 16px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.18) !important; } /* VK */ .seolik-share2[data-theme="neon"] .seolik-share2__link_service_vkontakte { border-color: rgba(80, 160, 255, .70) !important; background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.28), transparent 28%), radial-gradient(circle at 78% 82%, rgba(0, 212, 255, .26), transparent 34%), linear-gradient(135deg, #071a38 0%, #123f86 52%, #050816 100%) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 22px rgba(80, 160, 255, .48), 0 16px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.18) !important; } /* Одноклассники */ .seolik-share2[data-theme="neon"] .seolik-share2__link_service_odnoklassniki { border-color: rgba(255, 170, 54, .78) !important; background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.30), transparent 28%), radial-gradient(circle at 78% 82%, rgba(255, 92, 0, .34), transparent 34%), linear-gradient(135deg, #2b1200 0%, #b85000 52%, #140800 100%) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 24px rgba(255, 140, 28, .54), 0 16px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.18) !important; } /* Мой Мир */ .seolik-share2[data-theme="neon"] .seolik-share2__link_service_moimir { border-color: rgba(36, 190, 255, .78) !important; background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.28), transparent 28%), radial-gradient(circle at 78% 82%, rgba(0, 230, 255, .30), transparent 34%), linear-gradient(135deg, #06182f 0%, #0072c9 52%, #050816 100%) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 24px rgba(36, 190, 255, .54), 0 16px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.18) !important; } /* Telegram */ .seolik-share2[data-theme="neon"] .seolik-share2__link_service_telegram { border-color: rgba(56, 189, 248, .78) !important; background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.28), transparent 28%), radial-gradient(circle at 78% 82%, rgba(34, 211, 238, .32), transparent 34%), linear-gradient(135deg, #041827 0%, #0e7fb8 52%, #050816 100%) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 24px rgba(56, 189, 248, .56), 0 16px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.18) !important; } /* Max */ .seolik-share2[data-theme="neon"] .seolik-share2__link_service_max { border-color: rgba(132, 110, 255, .78) !important; background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.28), transparent 28%), radial-gradient(circle at 78% 82%, rgba(168, 85, 247, .34), transparent 34%), linear-gradient(135deg, #100b2f 0%, #4555ff 52%, #060817 100%) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 26px rgba(132, 110, 255, .58), 0 16px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.18) !important; } .seolik-share2[data-theme="neon"]:not([data-hover="scale"]):not([data-hover="slide"]):not([data-hover="blur"]):not([data-hover="tilt"]) .seolik-share2__link:hover { filter: brightness(1.15) saturate(1.18) !important; transform: translateY(-4px) scale(1.04); } /* Чтобы иконки в неоне были ярче */ .seolik-share2[data-theme="neon"] .seolik-share2__icon_svg { filter: drop-shadow(0 0 5px rgba(255,255,255,.55)) drop-shadow(0 0 12px rgba(0,212,255,.28)) !important; } /* === Тёмная тема сайта: карточки делаем не белыми, а тёмными === */ [data-bs-theme="dark"] .seolik-share2[data-theme="card"] .seolik-share2__link { background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.10), transparent 34%), linear-gradient(135deg, #111827 0%, #172033 54%, #0f172a 100%); border-color: rgba(255,255,255,.10); box-shadow: 0 16px 38px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.08); } [data-bs-theme="dark"] .seolik-share2[data-theme="card"] .seolik-share2__link:hover { background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.14), transparent 36%), linear-gradient(135deg, #172033 0%, #1e293b 54%, #0f172a 100%); border-color: rgba(96, 165, 250, .24); } /* === Чтобы переключатель "Тень у CSS-кнопок" не ломался === */ .seolik-share2[data-button-shadow="false"]:not([data-theme="icons"]) .seolik-share2__link, .seolik-share2[data-button-shadow="false"]:not([data-theme="icons"]) .seolik-share2__link:hover, .seolik-share2[data-button-shadow="false"]:not([data-theme="icons"]) .seolik-share2__link:focus-visible { box-shadow: none !important; } /* === Copy notice for MAX fallback === */ .seolik-share2__item { position: relative; } .seolik-share2__notice { position: absolute !important; z-index: 2147483002 !important; width: max-content !important; max-width: min(230px, calc(100vw - 28px)) !important; padding: 9px 12px !important; border-radius: 999px !important; background: rgba(15, 23, 42, .94) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 16px 36px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255,255,255,.10) !important; font: 900 13px/1.15 Inter, Segoe UI, Roboto, Arial, sans-serif !important; text-align: center !important; white-space: nowrap !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important; } .seolik-share2__notice.is-visible { opacity: 1 !important; visibility: visible !important; } /* Подсказка сверху */ .seolik-share2__notice[data-notice-side="top"] { left: 50% !important; bottom: calc(100% + 10px) !important; transform: translateX(-50%) translateY(4px) !important; } .seolik-share2__notice[data-notice-side="top"].is-visible { transform: translateX(-50%) translateY(0) !important; } /* Подсказка снизу */ .seolik-share2__notice[data-notice-side="bottom"] { left: 50% !important; top: calc(100% + 10px) !important; transform: translateX(-50%) translateY(-4px) !important; } .seolik-share2__notice[data-notice-side="bottom"].is-visible { transform: translateX(-50%) translateY(0) !important; } /* Подсказка слева от кнопки */ .seolik-share2__notice[data-notice-side="left"] { right: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) translateX(4px) !important; } .seolik-share2__notice[data-notice-side="left"].is-visible { transform: translateY(-50%) translateX(0) !important; } /* Подсказка справа от кнопки */ .seolik-share2__notice[data-notice-side="right"] { left: calc(100% + 10px) !important; top: 50% !important; transform: translateY(-50%) translateX(-4px) !important; } .seolik-share2__notice[data-notice-side="right"].is-visible { transform: translateY(-50%) translateX(0) !important; } [data-bs-theme="dark"] .seolik-share2__notice { background: rgba(2, 6, 23, .96) !important; border-color: rgba(255,255,255,.14) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.08) !important; }