share.min.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. @font-face {
  2. font-family:"socialshare";src:url("../fonts/iconfont.eot");src:url("../fonts/iconfont.eot?#iefix") format("embedded-opentype"),url("../fonts/iconfont.woff") format("woff"),url("../fonts/iconfont.ttf") format("truetype"),url("../fonts/iconfont.svg#iconfont") format("svg")
  3. }
  4. .social-share {
  5. font-family: "socialshare" !important;
  6. font-size: 16px;
  7. font-style: normal;
  8. -webkit-font-smoothing: antialiased;
  9. -webkit-text-stroke-width: 0.2px;
  10. -moz-osx-font-smoothing: grayscale
  11. }
  12. .social-share * {
  13. font-family: "socialshare" !important
  14. }
  15. .social-share .icon-tencent:before {
  16. content: "\f07a"
  17. }
  18. .social-share .icon-qq:before {
  19. content: "\f11a"
  20. }
  21. .social-share .icon-weibo:before {
  22. content: "\f12a"
  23. }
  24. .social-share .icon-wechat:before {
  25. content: "\f09a"
  26. }
  27. .social-share .icon-douban:before {
  28. content: "\f10a"
  29. }
  30. .social-share .icon-heart:before {
  31. content: "\f20a"
  32. }
  33. .social-share .icon-like:before {
  34. content: "\f00a"
  35. }
  36. .social-share .icon-qzone:before {
  37. content: "\f08a"
  38. }
  39. .social-share .icon-linkedin:before {
  40. content: "\f01a"
  41. }
  42. .social-share .icon-diandian:before {
  43. content: "\f05a"
  44. }
  45. .social-share .icon-facebook:before {
  46. content: "\f03a"
  47. }
  48. .social-share .icon-google:before {
  49. content: "\f04a"
  50. }
  51. .social-share .icon-twitter:before {
  52. content: "\f06a"
  53. }
  54. .social-share a {
  55. position: relative;
  56. text-decoration: none;
  57. margin: 4px;
  58. display: inline-block;
  59. outline: none
  60. }
  61. .social-share .social-share-icon {
  62. position: relative;
  63. display: inline-block;
  64. width: 32px;
  65. height: 32px;
  66. font-size: 20px;
  67. border-radius: 50%;
  68. line-height: 32px;
  69. border: 1px solid #666;
  70. color: #666;
  71. text-align: center;
  72. vertical-align: middle;
  73. transition: background 0.6s ease-out 0s
  74. }
  75. .social-share .social-share-icon:hover {
  76. background: #666;
  77. color: #fff
  78. }
  79. .social-share .icon-weibo {
  80. color: #ff763b;
  81. border-color: #ff763b
  82. }
  83. .social-share .icon-weibo:hover {
  84. background: #ff763b
  85. }
  86. .social-share .icon-tencent {
  87. color: #56b6e7;
  88. border-color: #56b6e7
  89. }
  90. .social-share .icon-tencent:hover {
  91. background: #56b6e7
  92. }
  93. .social-share .icon-qq {
  94. color: #56b6e7;
  95. border-color: #56b6e7
  96. }
  97. .social-share .icon-qq:hover {
  98. background: #56b6e7
  99. }
  100. .social-share .icon-qzone {
  101. color: #FDBE3D;
  102. border-color: #FDBE3D
  103. }
  104. .social-share .icon-qzone:hover {
  105. background: #FDBE3D
  106. }
  107. .social-share .icon-douban {
  108. color: #33b045;
  109. border-color: #33b045
  110. }
  111. .social-share .icon-douban:hover {
  112. background: #33b045
  113. }
  114. .social-share .icon-linkedin {
  115. color: #0077B5;
  116. border-color: #0077B5
  117. }
  118. .social-share .icon-linkedin:hover {
  119. background: #0077B5
  120. }
  121. .social-share .icon-facebook {
  122. color: #44619D;
  123. border-color: #44619D
  124. }
  125. .social-share .icon-facebook:hover {
  126. background: #44619D
  127. }
  128. .social-share .icon-google {
  129. color: #db4437;
  130. border-color: #db4437
  131. }
  132. .social-share .icon-google:hover {
  133. background: #db4437
  134. }
  135. .social-share .icon-twitter {
  136. color: #55acee;
  137. border-color: #55acee
  138. }
  139. .social-share .icon-twitter:hover {
  140. background: #55acee
  141. }
  142. .social-share .icon-diandian {
  143. color: #307DCA;
  144. border-color: #307DCA
  145. }
  146. .social-share .icon-diandian:hover {
  147. background: #307DCA
  148. }
  149. .social-share .icon-wechat {
  150. position: relative;
  151. color: #7bc549;
  152. border-color: #7bc549
  153. }
  154. .social-share .icon-wechat:hover {
  155. background: #7bc549
  156. }
  157. .social-share .icon-wechat .wechat-qrcode {
  158. display: none;
  159. border: 1px solid #eee;
  160. position: absolute;
  161. z-index: 9;
  162. top: -205px;
  163. left: -84px;
  164. width: 200px;
  165. height: 192px;
  166. color: #666;
  167. font-size: 12px;
  168. text-align: center;
  169. background-color: #fff;
  170. box-shadow: 0 2px 10px #aaa;
  171. transition: all 200ms;
  172. -webkit-tansition: all 350ms;
  173. -moz-transition: all 350ms
  174. }
  175. .social-share .icon-wechat .wechat-qrcode.bottom {
  176. top: 40px;
  177. left: -84px
  178. }
  179. .social-share .icon-wechat .wechat-qrcode.bottom:after {
  180. display: none
  181. }
  182. .social-share .icon-wechat .wechat-qrcode h4 {
  183. font-weight: normal;
  184. height: 26px;
  185. line-height: 26px;
  186. font-size: 12px;
  187. background-color: #f3f3f3;
  188. margin: 0;
  189. padding: 0;
  190. color: #777
  191. }
  192. .social-share .icon-wechat .wechat-qrcode .qrcode {
  193. width: 105px;
  194. margin: 10px auto
  195. }
  196. .social-share .icon-wechat .wechat-qrcode .qrcode table {
  197. margin: 0 !important
  198. }
  199. .social-share .icon-wechat .wechat-qrcode .help p {
  200. font-weight: normal;
  201. line-height: 16px;
  202. padding: 0;
  203. margin: 0
  204. }
  205. .social-share .icon-wechat .wechat-qrcode:after {
  206. content: '';
  207. position: absolute;
  208. left: 50%;
  209. margin-left: -6px;
  210. bottom: -13px;
  211. width: 0;
  212. height: 0;
  213. border-width: 8px 6px 6px 6px;
  214. border-style: solid;
  215. border-color: #fff transparent transparent transparent
  216. }
  217. .social-share .icon-wechat:hover .wechat-qrcode {
  218. display: block
  219. }