/*! SocialCount - v1.0.0 - 2017-06-01 * https://github.com/filamentgroup/SocialCount * Copyright (c) 2017 zachleat; Licensed MIT */ .socialcount { color: #fff; font-size: .875em; line-height: 2.2em; } .socialcount > li { background-color: #999; } .socialcount > li, .socialcount > li > a:focus { border-radius: 5px; } .socialcount > li > a:focus, .socialcount > li.hover.loaded { background-color: #464646; } /* Special class added to count when it's >= the minimum */ .socialcount .count.minimum { } /* Base CSS */ .socialcount { list-style: none; padding-left: 0; margin: 0 0 .6em 0; overflow: hidden; } .socialcount-large { line-height: normal; } .socialcount :link, .socialcount :visited { color: inherit; } .socialcount > li { display: inline-block; *display: inline; zoom: 1; position: relative; vertical-align: top; min-width: 80px; min-height: 30px; text-align: center; white-space: nowrap; *margin-right: 4px; } .socialcount-small > li { min-width: 0; } .socialcount-large > li { float: left; margin: 0 .6em .6em 0; min-width: 105px; } .socialcount > li > a { display: block; padding: 0 5px; text-decoration: none; color: inherit; } .socialcount-small > li > a { padding-left: 8px; padding-right: 8px; } .socialcount-large > li > a { padding: 12px 5px 8px; } .socialcount .count { color: inherit; position: relative; display: inline-block; *display: inline; zoom: 1; text-align: center; margin-left: 6px; } .socialcount-large .count { display: block; width: 100%; margin-left: 0; padding-top: 10px; } .socialcount-small .count { margin-left: 0; } .socialcount .button { display: none; width: 100%; position: absolute; left: 0; top: 5px; text-align: center; pointer-events: none; line-height: 100%; } .socialcount .button iframe { pointer-events: auto; } .socialcount-large .button { top: auto; bottom: 2px; } .socialcount.grade-a.activate-on-hover > li.hover.loaded .count, .socialcount.grade-a.activate-on-click > li.hover.loaded .count { text-indent: -999px; } .socialcount.grade-a.activate-on-hover > li.hover.loaded .button, .socialcount.grade-a.activate-on-click > li.hover.loaded .button { display: block; } .socialcount.grade-a.activate-on-hover > li.hover.loaded > a, .socialcount.grade-a.activate-on-click > li.hover.loaded > a { cursor: default; } .socialcount-small.grade-a.activate-on-hover > li.hover.loaded > a, .socialcount-small.grade-a.activate-on-click > li.hover.loaded > a, .socialcount.grade-a.activate-on-hover > li.hover.loaded .button iframe, .socialcount.grade-a.activate-on-click > li.hover.loaded .button iframe { cursor: pointer; } .socialcount.like.de_DE > .facebook { min-width: 90px; /* like */ } .socialcount.recommend .facebook { min-width: 120px; } .socialcount-small.recommend .facebook { min-width: 0; } .socialcount-large.recommend .facebook { min-width: 105px; } .socialcount .facebook iframe { height: 21px; width: 90px; /* recommend */ } .socialcount.de_DE .facebook iframe { width: 83px; /* recommend */ } .socialcount.fr_FR .facebook iframe { width: 98px; /* recommend */ } .socialcount.like .facebook iframe { width: 48px; /* like */ } .socialcount.like.de_DE .facebook iframe { width: 83px; /* like */ } .socialcount.like.fr_FR .facebook iframe { width: 57px; /* like */ } .socialcount .pinterest { display: none; } .socialcount.js .pinterest { display: inline-block; *display: inline; zoom: 1; } .socialcount .pinterest .button { bottom: 0; pointer-events: auto; } .socialcount-large .pinterest .button { bottom: 10px; } .socialcount > .pinterest:hover { cursor: pointer; } .socialcount-small .pinterest .count { text-indent: -999px; } .socialcount .loading { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; background-color: #aaa; background-color: rgba(170, 170, 170, 0.7); color: #000; text-transform: uppercase; font-size: .75em; text-align: center; border-radius: 5px; } .socialcount-large .loading { padding-top: 30%; } .socialcount .loading .dot { display: inline-block; /* no ie7 compat needed here, just shows the text links */ width: 6px; height: 6px; margin: 0 3px; background: #fff; opacity: 0; border-radius: 50%; -webkit-animation: socialCountLoadingFade .6s infinite; -moz-animation: socialCountLoadingFade .6s infinite; animation: socialCountLoadingFade .6s infinite; } .socialcount .loading .dot:nth-child(1) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; animation-delay: 0s; } .socialcount .loading .dot:nth-child(2) { -webkit-animation-delay: .05s; -moz-animation-delay: .05s; animation-delay: .05s; } .socialcount .loading .dot:nth-child(3) { -webkit-animation-delay: .1s; -moz-animation-delay: .1s; animation-delay: .1s; } @-webkit-keyframes socialCountLoadingFade { 0% { opacity: 0; } 50% { opacity: 0.8; } 100% { opacity: 0; } } @-moz-keyframes socialCountLoadingFade { 0% { opacity: 0; } 50% { opacity: 0.8; } 100% { opacity: 0; } } @keyframes socialCountLoadingFade { 0% { opacity: 0; } 50% { opacity: 0.8; } 100% { opacity: 0; } } .social-icon { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; *margin-right: 5px; } .socialcount.grade-a.activate-on-hover > li.hover.loaded .social-icon, .socialcount.grade-a.activate-on-click > li.hover.loaded .social-icon { display: none; } .socialcount-small.grade-a.activate-on-hover > li.hover.loaded .social-icon, .socialcount-small.grade-a.activate-on-click > li.hover.loaded .social-icon, .socialcount-large.grade-a.activate-on-hover > li.hover.loaded .social-icon, .socialcount-large.grade-a.activate-on-click > li.hover.loaded .social-icon { display: inline-block; *display: inline; zoom: 1; } .icon-sprite, .icon-facebook, .icon-googleplus, .icon-pinterest, .icon-share, .icon-twitter { background-image: url('icon-sd6cd4d0ec7.png'); background-repeat: no-repeat; } .icon-facebook { background-position: 0 0; height: 15px; width: 17px; } .icon-googleplus { background-position: -21px 0; height: 17px; width: 20px; } .icon-pinterest { background-position: -45px 0; height: 15px; width: 11px; } .icon-share { background-position: -60px 0; height: 16px; width: 20px; } .icon-twitter { background-position: -84px 0; height: 15px; width: 17px; } /* HD icons */ @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { .social-icon { -webkit-background-size: auto 17px; -moz-background-size: auto 17px; -o-background-size: auto 17px; background-size: auto 17px; background-image: url('icon-hd-s816aa7a6b3.png'); } } /*# sourceMappingURL=socialcount-icons.css.map */