@font-face { font-family: "socialshare"; src: url('../fonts/share/jquery.share.eot'); /* IE9*/ src: url('../fonts/share/jquery.share.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/share/jquery.share.woff') format('woff'), /* chrome, firefox */ url('../fonts/share/jquery.share.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../fonts/share/jquery.share.svg#iconfont') format('svg'); /* iOS 4.1- */ } .social-share { font-family:"socialshare" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; color: #474b54 !important; text-align: center; } .social-share>a { display: inline-block!important; } .social-share * { font-family: "socialshare" !important; } .social-share .social-share-icon-big { color: #474b54 !important; } .social-share .social-share-dialog-close { color: #474b54 !important; } .social-share .icon-qq:before { content: "\f11a"; } .social-share .icon-qq-big {background: url('../images/share-icon-qq.png');} .social-share .icon-weibo:before { content: "\f12a"; } .social-share .icon-weibo-big {background: url('../images/share-icon-weibo.png');} .social-share .icon-wechat:before { content: "\f09a"; } .social-share .icon-wechat-big {background: url('../images/share-icon-wechat.png');} .social-share .icon-douban:before { content: "\f10a"; } .social-share .icon-douban-big {background: url('../images/share-icon-douban.png');} .social-share .icon-heart:before { content: "\f20a"; } .social-share .icon-like:before { content: "\f00a"; } .social-share .icon-qzone:before { content: "\f08a"; } .social-share .icon-qzone-big {background: url('../images/share-icon-qzone.png');} .social-share .icon-linkedin:before { content: "\f01a"; } .social-share .icon-linkedin-big {background: url('../images/share-icon-linkedin.png');} .social-share .icon-facebook:before { content: "\f03a"; } .social-share .icon-facebook-big {background: url('../images/share-icon-facebook.png');} .social-share .icon-google:before { content: "\f04a"; } .social-share .icon-google-big {background: url('../images/share-icon-google.png');} .social-share .icon-twitter:before { content: "\f06a"; } .social-share .icon-twitter-big {background: url('../images/share-icon-twitter.png');} .social-share .icon-more:before {content: "\f999"; } .social-share .icon-close:before {content: "\f998"; } .social-share .icon-share:before {content: "\f997"; } .social-share .icon-share-mobile:before {content: "\f997"; } .social-share a { position:relative; text-decoration:none; margin: 4px; display:inline-block; outline: none; } .social-share .social-share-icon-small { position:relative; display:inline-block; width: 26px; height: 26px; font-size: 17px; /**border-radius: 50%;**/ line-height: 24px; border:1px solid #666; color: #666; text-align: center; vertical-align: middle; transition: background 0.6s ease-out 0s; } .social-share .social-share-icon-mid { position:relative; display:inline-block; width: 44px; height: 44px; font-size: 28px; /**border-radius: 50%;**/ line-height: 42px; border:1px solid #666; color: #666; text-align: center; vertical-align: middle; transition: background 0.6s ease-out 0s; } .social-share .social-share-icon-mid-label { font-size: 12px; color: #474b54; line-height: 22px; word-break: break-all; width: 106%; margin-left: -3%; padding-top: 5px; } .social-share .social-share-icon-big { width: 95px; height: 95px; background-size: 60%; line-height: 142px; background-repeat: no-repeat; background-position-x: center; } .social-share .social-share-icon-small:hover { background: #666; color: #fff; } .social-share .social-share-icon-mid:hover { background: #666; color: #fff; } .social-share .icon-weibo { color: #ff763b; border-color: #ff763b; } .social-share .icon-weibo:hover { background: #ff763b; } .social-share .icon-qq { color: #56b6e7; border-color: #56b6e7; } .social-share .icon-qq:hover { background: #56b6e7; } .social-share .icon-qzone { color: #FDBE3D; border-color: #FDBE3D; } .social-share .icon-qzone:hover { background: #FDBE3D; } .social-share .icon-douban { color: #33b045; border-color: #33b045; } .social-share .icon-douban:hover { background: #33b045; } .social-share .icon-linkedin { color: #0077B5; border-color: #0077B5; } .social-share .icon-linkedin:hover { background: #0077B5; } .social-share .icon-facebook { color: #44619D; border-color: #44619D; } .social-share .icon-facebook:hover { background: #44619D; } .social-share .icon-google { color: #db4437; border-color: #db4437; } .social-share .icon-google:hover { background: #db4437; } .social-share .icon-twitter { color: #55acee; border-color: #55acee; } .social-share .icon-twitter:hover { background: #55acee; } .social-share .icon-wechat { position: relative; color: #7bc549; border-color: #7bc549; } .social-share .icon-wechat:hover { background: #7bc549; } .social-share .icon-more { color: #3399FF; border-color: #3399FF; } .social-share .icon-more:hover { background: #3399FF; } .social-share .icon-share { color: #3399FF; border-color: #3399FF; } .social-share .icon-share:hover { color: #3399FF; background: #fff; } .social-share .icon-wechat .wechat-qrcode { display: none; border: 1px solid #eee; position: absolute; z-index: 9; top: -205px; left: -84px; width: 200px; height: 192px; color: #666; font-size: 12px; text-align: center; background-color: #fff; box-shadow: 0 2px 10px #aaa; transition: all 200ms; -webkit-tansition: all 350ms; -moz-transition: all 350ms; } .social-share .icon-wechat .wechat-qrcode.bottom-small { top: 40px; left: -84px; } .social-share .icon-wechat .wechat-qrcode.bottom-mid { top: 60px; left: -84px; } .social-share .icon-wechat .wechat-qrcode.bottom:after { display: none; } .social-share .icon-wechat .wechat-qrcode h4 { font-weight: normal; height: 26px; line-height: 26px; font-size: 12px; background-color: #f3f3f3; margin: 0; padding: 0; color: #777; } .social-share .icon-wechat .wechat-qrcode .qrcode { width: 105px; margin: 10px auto; } .social-share .icon-wechat .wechat-qrcode .qrcode table { margin: 0 !important; } .social-share .icon-wechat .wechat-qrcode .help p { font-weight: normal; line-height: 16px; padding: 0; margin: 0; } .social-share .icon-wechat .wechat-qrcode:after { content: ""; position: absolute; left: 50%; margin-left: -6px; bottom: -13px; width: 0; height: 0; border-width: 8px 6px 6px 6px; border-style: solid; border-color: #fff transparent transparent transparent; } .social-share .icon-wechat:hover .wechat-qrcode { display: block; } .social-share .icon-wechat-big .wechat-qrcode { display: none; border: 1px solid #eee; position: absolute; z-index: 9; top: -205px; left: -84px; width: 200px; height: 192px; color: #666; font-size: 12px; text-align: center; background-color: #fff; box-shadow: 0 2px 10px #aaa; transition: all 200ms; -webkit-tansition: all 350ms; -moz-transition: all 350ms; line-height: 0px; } .social-share .icon-wechat-big .wechat-qrcode.bottom-small { top: 80px; left: -54px; } .social-share .icon-wechat-big .wechat-qrcode.bottom-mid { top: 80px; left: -54px; } .social-share .icon-wechat-big .wechat-qrcode.bottom:after { display: none; } .social-share .icon-wechat-big .wechat-qrcode h4 { font-weight: normal; height: 26px; line-height: 26px; font-size: 12px; background-color: #f3f3f3; margin: 0; padding: 0; color: #777; } .social-share .icon-wechat-big .wechat-qrcode .qrcode { width: 105px; margin: 10px auto; } .social-share .icon-wechat-big .wechat-qrcode .qrcode table { margin: 0 !important; } .social-share .icon-wechat-big .wechat-qrcode .help p { font-weight: normal; line-height: 16px; padding: 0; margin: 0; } .social-share .icon-wechat-big .wechat-qrcode:after { content: ""; position: absolute; left: 50%; margin-left: -6px; bottom: -13px; width: 0; height: 0; border-width: 8px 6px 6px 6px; border-style: solid; border-color: #fff transparent transparent transparent; } .social-share .icon-wechat-big:hover .wechat-qrcode { display: block; } .social-share .social-share-dialog { width: 430px; height: 350px; border: 5px solid #8F8F8F; border-radius: 5px; background: white; position: fixed; top: calc(50% - 175px); left: calc(50% - 215px); z-index: 9999; } .social-share .social-share-dialog-top { width: 100%; height: 30px; line-height: 30px; text-align: left; padding-left: 10px; background: #EEEEEE; display: inline-block; } .social-share .social-share-dialog-close { float:right; margin-top: 0px; } .social-share .social-share-dialog-mid { height: 310px; overflow-y: scroll; display: inline-block; } .social-share .social-share-dialog-container { list-style-type: none; } .social-share .social-share-dialog-block { width: 100px; height: 100px; float: left; } .social-share .social-share-separator-mid { display: inline-block; width: 1px; height: 42px; background: #474b54; position: relative; top: -4px; margin-left: 10px; margin-right: 10px; margin-top: -20px; margin-bottom: -20px; } .social-share .share-icon-container { float: left; }