style.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. /**
  2. * Like Button toolbar button, loading text & container styles
  3. */
  4. @font-face {
  5. font-family: Noticons;
  6. src: url(https://wordpress.com/i/noticons/Noticons.woff);
  7. }
  8. /* Master container */
  9. #jp-post-flair {
  10. padding-top: .5em;
  11. }
  12. /* Overall Sharedaddy block title */
  13. div.sharedaddy,
  14. #content div.sharedaddy,
  15. #main div.sharedaddy {
  16. clear: both;
  17. }
  18. div.sharedaddy h3.sd-title {
  19. margin: 0 0 1em 0;
  20. display: inline-block;
  21. line-height: 1.2;
  22. font-size: 9pt;
  23. font-weight: bold;
  24. }
  25. div.sharedaddy h3.sd-title:before {
  26. content: "";
  27. display: block;
  28. width: 100%;
  29. min-width: 30px;
  30. border-top: 1px solid #ddd;
  31. margin-bottom: 1em;
  32. }
  33. /* Toolbar */
  34. #wpadminbar li#wp-admin-bar-admin-bar-likes-widget {
  35. width: 61px;
  36. overflow: hidden;
  37. }
  38. #wpadminbar iframe.admin-bar-likes-widget {
  39. width: 61px;
  40. height: 28px;
  41. min-height: 28px;
  42. border-width: 0px;
  43. position: absolute;
  44. top: 0;
  45. }
  46. div.jetpack-likes-widget-wrapper {
  47. width: 100%;
  48. min-height: 50px; /* Previous height, 60px */
  49. position: relative; /* Need to abs position placeholder and iframe so there isn't a jarring jump */
  50. }
  51. div.jetpack-likes-widget-wrapper .sd-link-color {
  52. font-size: 12px;
  53. }
  54. div.jetpack-likes-widget-wrapper.slim-likes-widget {
  55. width: 1px; /* initial default */
  56. min-height: 0;
  57. }
  58. div.jetpack-comment-likes-widget-wrapper {
  59. width: 100%;
  60. position: relative;
  61. min-height: 31px;
  62. }
  63. div.jetpack-comment-likes-widget-wrapper iframe {
  64. margin-bottom: 0;
  65. }
  66. #likes-other-gravatars {
  67. display: none;
  68. position: absolute;
  69. padding: 10px 10px 12px 10px;
  70. background-color: #2e4453;
  71. border-width: 0;
  72. box-shadow: 0 0 10px #2e4453;
  73. box-shadow: 0 0 10px rgba(46,68,83,.6);
  74. min-width: 130px;
  75. z-index: 1000;
  76. }
  77. #likes-other-gravatars * {
  78. line-height: normal;
  79. }
  80. #likes-other-gravatars .likes-text {
  81. color: white;
  82. font-size: 12px;
  83. padding-bottom: 8px;
  84. }
  85. #likes-other-gravatars ul,
  86. #likes-other-gravatars li {
  87. margin: 0;
  88. padding: 0;
  89. text-indent: 0;
  90. list-style-type: none;
  91. }
  92. #likes-other-gravatars li::before {
  93. content: "";
  94. }
  95. #likes-other-gravatars ul.wpl-avatars {
  96. overflow: auto;
  97. display: block;
  98. max-height: 190px;
  99. }
  100. #likes-other-gravatars ul.wpl-avatars li {
  101. width: 32px;
  102. height: 32px;
  103. float: left;
  104. margin: 0 5px 5px 0;
  105. }
  106. #likes-other-gravatars ul.wpl-avatars li a {
  107. margin: 0 2px 0 0;
  108. border-bottom: none !important;
  109. display: block;
  110. }
  111. #likes-other-gravatars ul.wpl-avatars li a img {
  112. background: none;
  113. border: none;
  114. margin: 0 !important;
  115. padding: 0 !important;
  116. position: static;
  117. }
  118. div.sd-box {
  119. border-top: 1px solid #ddd;
  120. border-top: 1px solid rgba(0,0,0,.13);
  121. }
  122. .entry-content .post-likes-widget, .post-likes-widget,
  123. .comment-likes-widget {
  124. margin: 0;
  125. border-width: 0;
  126. display: block;
  127. }
  128. /* Loading text */
  129. .post-likes-widget-placeholder,
  130. .comment-likes-widget-placeholder {
  131. margin: 0;
  132. border-width: 0;
  133. position: relative;
  134. }
  135. .comment-likes-widget-placeholder {
  136. height: 18px;
  137. position: absolute;
  138. display: flex;
  139. font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  140. margin-top: 4px;
  141. }
  142. .comment-likes-widget-placeholder::before {
  143. -webkit-font-smoothing: antialiased;
  144. font-family: "Noticons";
  145. font-size: 20px;
  146. line-height: .9;
  147. color: #5CB5D4;
  148. content: '\f408';
  149. width: 16px;
  150. display: inline-block;
  151. vertical-align: middle;
  152. }
  153. .post-likes-widget-placeholder .button {
  154. display: none; /* Let's not show a dummy like button, let's just make a great button experience once it's loaded */
  155. }
  156. .post-likes-widget-placeholder .button span {
  157. }
  158. .post-likes-widget-placeholder .loading,
  159. .comment-likes-widget-placeholder .loading {
  160. color: #999;
  161. font-size: 12px;
  162. }
  163. .comment-likes-widget-placeholder .loading {
  164. padding-left: 5px;
  165. margin-top: 2px;
  166. align-self: center;
  167. color: #4E4E4E;
  168. }
  169. .slim-likes-widget .post-likes-widget {
  170. width: auto;
  171. float: none;
  172. }
  173. /* Like Special cases (display on it's own) */
  174. div.sharedaddy.sd-like-enabled .sd-like h3 {
  175. display: none;
  176. }
  177. div.sharedaddy.sd-like-enabled .sd-like .post-likes-widget {
  178. width: 100%;
  179. float: none;
  180. position: absolute; /* Need to abs position placeholder and iframe so there isn't a jarring jump */
  181. top: 0;
  182. }
  183. .comment-likes-widget {
  184. width: 100%;
  185. }
  186. /* Make ratings block. @todo: make !important unnecessary by removing inline style */
  187. .pd-rating {
  188. display: block !important;
  189. }
  190. /* Hide G+ title */
  191. .sd-gplus .sd-title {
  192. display: none;
  193. }