@-webkit-keyframes share-this-intro { 0% { -webkit-transform: translateY(-3em); opacity: 0; } 80% { -webkit-transform: translateY(0.5em); opacity: 1; } to { -webkit-transform: translateY(0); } } @keyframes share-this-intro { 0% { transform: translateY(-3em); opacity: 0; } 80% { transform: translateY(0.5em); opacity: 1; } to { transform: translateY(0); } } .share-this-popover { max-width: 8em; pointer-events: none; -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); -webkit-animation: share-this-intro 0.3s; animation: share-this-intro 0.3s; } .share-this-popover::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 0; height: 0; margin: 0.25em -0.5em; border-width: 0.5em 0.5em 0; border-style: solid; border-color: #333 transparent; } .share-this-popover > ul { pointer-events: auto; list-style: none; padding: 0; margin: -0.75em 0 0; white-space: nowrap; background: #333; color: #fff; border-radius: 0.25em; position: absolute; left: 50%; -webkit-transform: translate(-50%, -100%); -ms-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } .share-this-popover > ul > li { display: inline-block; width: 2em; height: 2em; line-height: 2em; text-align: center; } .share-this-popover > ul > li > a { display: inline-block; width: 100%; height: 100%; color: inherit; box-sizing: border-box; padding: 0.35em; } .share-this-popover > ul > li > a:focus, .share-this-popover > ul > li > a:hover { background: rgba(255, 255, 255, 0.25); } @media (pointer: coarse) { .share-this-popover { font-size: 150%; } .share-this-popover::before { bottom: auto; top: 100%; border-width: 0 0.5em 0.5em; margin-top: 0; } .share-this-popover > ul { top: 100%; transform: translateX(-50%); margin: 0.5em 0 0; } } @media (max-width: 575px) { .share-this-popover { left: 0 !important; right: 0 !important; width: auto !important; max-width: none; } .share-this-popover::before { bottom: auto; top: 100%; border-width: 0 0.5em 0.5em; margin-top: 0; } .share-this-popover > ul { top: 100%; transform: translateX(-50%); margin: 0.5em 0 0; left: 0; width: 100%; transform: none; border-radius: 0; text-align: center; } } .share-this-popover { z-index: 100000000; } .share-this-popover li { line-height: 1 !important; margin: 0; padding: 0; background: #333; } .share-this-popover li:first-child { border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em; } .share-this-popover li:last-child { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em; } .share-this-popover path { fill: rgb(255 255 255) !important; }