| @@ -1,0 +1,239 @@ | ||
| 1 | +/** | |
| 2 | + * Like Button toolbar button, loading text & container styles | |
| 3 | + */ | |
| 4 | + | |
| 5 | +/* Master container */ | |
| 6 | +#jp-post-flair { | |
| 7 | + padding-top: 0.5em; | |
| 8 | +} | |
| 9 | + | |
| 10 | +/* Overall Sharedaddy block title */ | |
| 11 | +div.sharedaddy, | |
| 12 | +#content div.sharedaddy, | |
| 13 | +#main div.sharedaddy { | |
| 14 | + clear: both; | |
| 15 | +} | |
| 16 | + | |
| 17 | +div.sharedaddy h3.sd-title { | |
| 18 | + margin: 0 0 1em 0; | |
| 19 | + display: inline-block; | |
| 20 | + line-height: 1.2; | |
| 21 | + font-size: 9pt; | |
| 22 | + font-weight: 700; | |
| 23 | +} | |
| 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 #dcdcde; | |
| 31 | + margin-bottom: 1em; | |
| 32 | +} | |
| 33 | + | |
| 34 | + | |
| 35 | +/* Toolbar */ | |
| 36 | +div.jetpack-likes-widget-wrapper { | |
| 37 | + width: 100%; | |
| 38 | + min-height: 50px; /* Previous height, 60px */ | |
| 39 | + position: relative; /* Need to abs position placeholder and iframe so there isn't a jarring jump */ | |
| 40 | +} | |
| 41 | + | |
| 42 | +div.jetpack-likes-widget-wrapper .sd-link-color { | |
| 43 | + font-size: 12px; | |
| 44 | +} | |
| 45 | + | |
| 46 | +div.jetpack-comment-likes-widget-wrapper { | |
| 47 | + width: 100%; | |
| 48 | + position: relative; | |
| 49 | + min-height: 31px; | |
| 50 | +} | |
| 51 | + | |
| 52 | +div.jetpack-comment-likes-widget-wrapper iframe { | |
| 53 | + margin-bottom: 0; | |
| 54 | +} | |
| 55 | + | |
| 56 | +#likes-other-gravatars { | |
| 57 | + display: none; | |
| 58 | + position: absolute; | |
| 59 | + padding: 9px 12px 10px 12px; | |
| 60 | + background-color: #fff; | |
| 61 | + border: solid 1px #dcdcde; | |
| 62 | + border-radius: 4px; | |
| 63 | + box-shadow: none; | |
| 64 | + min-width: 220px; | |
| 65 | + max-height: 240px; | |
| 66 | + height: auto; | |
| 67 | + overflow: auto; | |
| 68 | + z-index: 1000; | |
| 69 | +} | |
| 70 | + | |
| 71 | +#likes-other-gravatars * { | |
| 72 | + line-height: normal; | |
| 73 | +} | |
| 74 | + | |
| 75 | +#likes-other-gravatars .likes-text { | |
| 76 | + color: #101517; | |
| 77 | + font-size: 12px; | |
| 78 | + font-weight: 500; | |
| 79 | + padding-bottom: 8px; | |
| 80 | +} | |
| 81 | + | |
| 82 | +#likes-other-gravatars ul, | |
| 83 | +#likes-other-gravatars li { | |
| 84 | + margin: 0; | |
| 85 | + padding: 0; | |
| 86 | + text-indent: 0; | |
| 87 | + list-style-type: none; | |
| 88 | +} | |
| 89 | + | |
| 90 | +#likes-other-gravatars li::before { | |
| 91 | + content: ""; | |
| 92 | +} | |
| 93 | + | |
| 94 | +#likes-other-gravatars ul.wpl-avatars { | |
| 95 | + overflow: auto; | |
| 96 | + display: block; | |
| 97 | + max-height: 190px; | |
| 98 | +} | |
| 99 | + | |
| 100 | +#likes-other-gravatars ul.wpl-avatars li { | |
| 101 | + width: 196px; | |
| 102 | + height: 28px; | |
| 103 | + float: none; | |
| 104 | + margin: 0 0 4px 0; | |
| 105 | +} | |
| 106 | + | |
| 107 | +#likes-other-gravatars ul.wpl-avatars li a { | |
| 108 | + margin: 0 2px 0 0; | |
| 109 | + border-bottom: none !important; | |
| 110 | + display: flex; | |
| 111 | + align-items: center; | |
| 112 | + gap: 8px; | |
| 113 | + text-decoration: none; | |
| 114 | +} | |
| 115 | + | |
| 116 | +#likes-other-gravatars ul.wpl-avatars li a span { | |
| 117 | + font-size: 12px; | |
| 118 | + color: #2c3338; | |
| 119 | + overflow: hidden; | |
| 120 | + text-overflow: ellipsis; | |
| 121 | + white-space: nowrap; | |
| 122 | +} | |
| 123 | + | |
| 124 | +#likes-other-gravatars ul.wpl-avatars li a img { | |
| 125 | + background: none; | |
| 126 | + border: none; | |
| 127 | + border-radius: 50%; | |
| 128 | + margin: 0 !important; | |
| 129 | + padding: 1px !important; | |
| 130 | + position: static; | |
| 131 | + box-sizing: border-box; | |
| 132 | +} | |
| 133 | + | |
| 134 | +div.sd-box { | |
| 135 | + border-top: 1px solid #dcdcde; | |
| 136 | + border-top: 1px solid rgba(0, 0, 0, 0.13); | |
| 137 | +} | |
| 138 | + | |
| 139 | + | |
| 140 | +.jetpack-likes-widget-unloaded .likes-widget-placeholder, | |
| 141 | +.jetpack-likes-widget-loading .likes-widget-placeholder, | |
| 142 | +.jetpack-likes-widget-loaded iframe { | |
| 143 | + display: block; | |
| 144 | +} | |
| 145 | + | |
| 146 | +.jetpack-likes-widget-loaded .likes-widget-placeholder, | |
| 147 | +.jetpack-likes-widget-unloaded iframe, | |
| 148 | +.jetpack-likes-widget-loading iframe { | |
| 149 | + display: none; | |
| 150 | +} | |
| 151 | + | |
| 152 | +.entry-content .post-likes-widget, | |
| 153 | +.post-likes-widget, | |
| 154 | +.comment-likes-widget { | |
| 155 | + margin: 0; | |
| 156 | + border-width: 0; | |
| 157 | +} | |
| 158 | + | |
| 159 | +/* Loading text */ | |
| 160 | +.post-likes-widget-placeholder, | |
| 161 | +.comment-likes-widget-placeholder { | |
| 162 | + margin: 0; | |
| 163 | + border-width: 0; | |
| 164 | + position: relative; | |
| 165 | +} | |
| 166 | + | |
| 167 | +.comment-likes-widget-placeholder { | |
| 168 | + height: 18px; | |
| 169 | + position: absolute; | |
| 170 | + display: flex; | |
| 171 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 172 | +} | |
| 173 | + | |
| 174 | +.comment-likes-widget-placeholder::before { | |
| 175 | + color: #2ea2cc; | |
| 176 | + width: 16px; | |
| 177 | + height: 16px; | |
| 178 | + content: ""; | |
| 179 | + display: inline-block; | |
| 180 | + position: relative; | |
| 181 | + top: 3px; | |
| 182 | + padding-right: 5px; | |
| 183 | + background-repeat: no-repeat; | |
| 184 | + background-size: 16px 16px; | |
| 185 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0' fill='none' width='24' height='24'/%3E%3Cg%3E%3Cpath fill='%232EA2CC' d='M12 2l2.582 6.953L22 9.257l-5.822 4.602L18.18 21 12 16.89 5.82 21l2.002-7.14L2 9.256l7.418-.304'/%3E%3C/g%3E%3C/svg%3E"); | |
| 186 | +} | |
| 187 | + | |
| 188 | +.post-likes-widget-placeholder .button { | |
| 189 | + display: none; /* Let's not show a dummy like button, let's just make a great button experience once it's loaded */ | |
| 190 | +} | |
| 191 | + | |
| 192 | +.post-likes-widget-placeholder .loading, | |
| 193 | +.comment-likes-widget-placeholder .loading { | |
| 194 | + color: #999; | |
| 195 | + font-size: 12px; | |
| 196 | +} | |
| 197 | + | |
| 198 | +.comment-likes-widget-placeholder .loading { | |
| 199 | + padding-left: 5px; | |
| 200 | + margin-top: 4px; | |
| 201 | + align-self: center; | |
| 202 | + color: #4e4e4e; | |
| 203 | +} | |
| 204 | + | |
| 205 | +/* Like Special cases (display on it's own) */ | |
| 206 | +div.sharedaddy.sd-like-enabled .sd-like h3 { | |
| 207 | + display: none; | |
| 208 | +} | |
| 209 | + | |
| 210 | +div.sharedaddy.sd-like-enabled .sd-like .post-likes-widget { | |
| 211 | + width: 100%; | |
| 212 | + float: none; | |
| 213 | + position: absolute; /* Need to abs position placeholder and iframe so there isn't a jarring jump */ | |
| 214 | + top: 0; | |
| 215 | +} | |
| 216 | + | |
| 217 | +.comment-likes-widget { | |
| 218 | + width: 100%; | |
| 219 | +} | |
| 220 | + | |
| 221 | + | |
| 222 | +/* Make ratings block. @todo: remove inline style so !important is not needed */ | |
| 223 | +.pd-rating, | |
| 224 | +.cs-rating { | |
| 225 | + display: block !important; | |
| 226 | +} | |
| 227 | + | |
| 228 | + | |
| 229 | +/* Hide G+ title */ | |
| 230 | +.sd-gplus .sd-title { | |
| 231 | + display: none; | |
| 232 | +} | |
| 233 | + | |
| 234 | +@media print { | |
| 235 | + | |
| 236 | + .jetpack-likes-widget-wrapper { | |
| 237 | + display: none; | |
| 238 | + } | |
| 239 | +} | |
