| Tang Cheng | 60ba803 | 2016-06-20 15:31:17 +0800 | [diff] [blame] | 1 | /* |
| 2 | * Social media sharing module |
| 3 | */ |
| 4 | .article-share-box { |
| 5 | position: absolute; |
| 6 | display: none; |
| 7 | background: #fff; |
| 8 | -webkit-box-shadow: 1px 2px 10px rgba(0,0,0,0.2); |
| 9 | box-shadow: 1px 2px 10px rgba(0,0,0,0.2); |
| 10 | -webkit-border-radius: 3px; |
| 11 | border-radius: 3px; |
| 12 | margin-left: -145px; |
| 13 | overflow: hidden; |
| 14 | z-index: 1; |
| 15 | } |
| 16 | .article-share-box.on { |
| 17 | display: block; |
| 18 | } |
| 19 | .article-share-input { |
| 20 | width: 100%; |
| 21 | background: none; |
| 22 | -webkit-box-sizing: border-box; |
| 23 | -moz-box-sizing: border-box; |
| 24 | box-sizing: border-box; |
| 25 | font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; |
| 26 | padding: 0 15px; |
| 27 | color: #555; |
| 28 | outline: none; |
| 29 | border: 1px solid #ddd; |
| 30 | -webkit-border-radius: 3px 3px 0 0; |
| 31 | border-radius: 3px 3px 0 0; |
| 32 | height: 36px; |
| 33 | line-height: 36px; |
| 34 | } |
| 35 | .article-share-links { |
| 36 | zoom: 1; |
| 37 | background: #eee; |
| 38 | line-height: normal; |
| 39 | } |
| 40 | .article-share-links:before, |
| 41 | .article-share-links:after { |
| 42 | content: ""; |
| 43 | display: table; |
| 44 | } |
| 45 | .article-share-links:after { |
| 46 | clear: both; |
| 47 | } |
| 48 | .article-share-twitter, |
| 49 | .article-share-facebook, |
| 50 | .article-share-pinterest, |
| 51 | .article-share-google { |
| 52 | width: 50px; |
| 53 | height: 36px; |
| 54 | display: block; |
| 55 | float: left; |
| 56 | position: relative; |
| 57 | color: #999; |
| 58 | text-shadow: 0 1px #fff; |
| 59 | } |
| 60 | .article-share-twitter:before, |
| 61 | .article-share-facebook:before, |
| 62 | .article-share-pinterest:before, |
| 63 | .article-share-google:before { |
| 64 | font-size: 20px; |
| 65 | font-family: FontAwesome; |
| 66 | width: 20px; |
| 67 | height: 20px; |
| 68 | position: absolute; |
| 69 | top: 50%; |
| 70 | left: 50%; |
| 71 | margin-top: -10px; |
| 72 | margin-left: -10px; |
| 73 | text-align: center; |
| 74 | } |
| 75 | .article-share-twitter:hover, |
| 76 | .article-share-facebook:hover, |
| 77 | .article-share-pinterest:hover, |
| 78 | .article-share-google:hover { |
| 79 | color: #fff; |
| 80 | } |
| 81 | .article-share-twitter:before { |
| 82 | content: "\f099"; |
| 83 | } |
| 84 | .article-share-twitter:hover { |
| 85 | background: #00aced; |
| 86 | text-shadow: 0 1px #008abe; |
| 87 | } |
| 88 | .article-share-facebook:before { |
| 89 | content: "\f09a"; |
| 90 | } |
| 91 | .article-share-facebook:hover { |
| 92 | background: #3b5998; |
| 93 | text-shadow: 0 1px #2f477a; |
| 94 | } |
| 95 | .article-share-pinterest:before { |
| 96 | content: "\f0d2"; |
| 97 | } |
| 98 | .article-share-pinterest:hover { |
| 99 | background: #cb2027; |
| 100 | text-shadow: 0 1px #a21a1f; |
| 101 | } |
| 102 | .article-share-google:before { |
| 103 | content: "\f0d5"; |
| 104 | } |
| 105 | .article-share-google:hover { |
| 106 | background: #dd4b39; |
| 107 | text-shadow: 0 1px #be3221; |
| 108 | } |