Last active
May 9, 2020 19:07
-
-
Save HapLifeMan/96e8ad710fd34db5b61eae797195e869 to your computer and use it in GitHub Desktop.
StandaloneEmbeddedTweet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div class="twitter-widget"> | |
| <div @click="openTweet" class="EmbeddedTweet tweet-InformationCircle-widgetParent"> | |
| <div class="EmbeddedTweet-tweetContainer"> | |
| <div class="EmbeddedTweet-tweet"> | |
| <blockquote class="Tweet"> | |
| <div class="Tweet-header"> | |
| <a class="TweetAuthor-avatar Identity-avatar u-linkBlend" :href="userURI" target="_blank" :aria-label="formattedName + ' (screen name: ' + formattedScreenName + ')'"> | |
| <img class="Avatar" :data-src-2x="bigProfilePicture" :data-src-1x="bigProfilePicture" :src="bigProfilePicture"> | |
| </a> | |
| <div class="TweetAuthor"> | |
| <a class="TweetAuthor-link Identity u-linkBlend" :href="userURI" target="_blank" :aria-label="formattedName + ' (screen name: ' + formattedScreenName + ')'"> | |
| <div class="TweetAuthor-nameScreenNameContainer"> | |
| <span class="TweetAuthor-decoratedName"> | |
| <span class="TweetAuthor-name Identity-name" title="NASA">{{ formattedName }}</span> | |
| <span v-if="isVerified" class="TweetAuthor-verifiedBadge"> | |
| <div class="Icon Icon--verified " aria-label="Verified Account" title="Verified Account" role="img"></div> | |
| <b class="u-hiddenVisually">✔</b> | |
| </span> | |
| </span> | |
| <span class="TweetAuthor-screenName Identity-screenName" :title="formattedScreenName" dir="ltr">{{ formattedScreenName }}</span> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="Tweet-brand"> | |
| <a :href="tweetURI"> | |
| <span class="FollowButton-bird"> | |
| <div class="Icon Icon--twitter" aria-label="View on Twitter" title="View on Twitter" role="presentation"></div> | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="Tweet-body"> | |
| <div v-if="isReply" class="Tweet-inReplyTo"> | |
| <a class="u-linkBlend" :href="'https://twitter.com/_/status/' + in_reply_to_status_id_str" target="_blank"> | |
| Replying to @{{ in_reply_to_screen_name }} | |
| </a> | |
| </div> | |
| <div class="u-hiddenVisually"></div> | |
| <p class="Tweet-text" lang="en" dir="ltr" v-html="formattedText"></p> | |
| <div v-if="hasMedia" class="AdaptiveMediaOuterContainer"> | |
| <div class="AdaptiveMedia" :class="{ 'is-square': countMedia === 1 }"> | |
| <div ref="container" class="AdaptiveMedia-container"> | |
| <div v-if="adaptiveMedia === 'single'" :class="'AdaptiveMedia-' + adaptiveMedia + 'Photo'"> | |
| <div ref="media1" class="AdaptiveMedia-photoContainer"> | |
| <img ref="img1" :src="extended_entities.media[0].media_url_https"> | |
| </div> | |
| </div> | |
| <div v-else-if="adaptiveMedia === 'double'" :class="'AdaptiveMedia-' + adaptiveMedia + 'Photo'"> | |
| <div class="AdaptiveMedia-halfWidthPhoto"> | |
| <div ref="media1" class="AdaptiveMedia-photoContainer"> | |
| <img ref="img1" :src="extended_entities.media[0].media_url_https"> | |
| </div> | |
| </div> | |
| <div class="AdaptiveMedia-halfWidthPhoto"> | |
| <div ref="media2" class="AdaptiveMedia-photoContainer"> | |
| <img ref="img2" :src="extended_entities.media[1].media_url_https"> | |
| </div> | |
| </div> | |
| </div> | |
| <div v-else-if="adaptiveMedia === 'triple'" :class="'AdaptiveMedia-' + adaptiveMedia + 'Photo'"> | |
| <div class="AdaptiveMedia-twoThirdsWidthPhoto"> | |
| <div ref="media1" class="AdaptiveMedia-photoContainer"> | |
| <img ref="img1" :src="extended_entities.media[0].media_url_https"> | |
| </div> | |
| </div> | |
| <div class="AdaptiveMedia-halfHeightPhotoContainer"> | |
| <div class="AdaptiveMedia-halfHeightPhoto"> | |
| <div ref="media2" class="AdaptiveMedia-photoContainer"> | |
| <img ref="img2" :src="extended_entities.media[1].media_url_https"> | |
| </div> | |
| </div> | |
| <div class="AdaptiveMedia-halfHeightPhoto"> | |
| <div ref="media3" class="AdaptiveMedia-photoContainer"> | |
| <img ref="img3" :src="extended_entities.media[2].media_url_https"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div v-else-if="adaptiveMedia === 'quad'" :class="'AdaptiveMedia-' + adaptiveMedia + 'Photo'"> | |
| <div class="AdaptiveMedia-threeQuartersWidthPhoto"> | |
| <div ref="media1" class="AdaptiveMedia-photoContainer"> | |
| <img ref="img1" :src="extended_entities.media[0].media_url_https"> | |
| </div> | |
| </div> | |
| <div class="AdaptiveMedia-thirdHeightPhotoContainer"> | |
| <div class="AdaptiveMedia-thirdHeightPhoto"> | |
| <div ref="media2" class="AdaptiveMedia-photoContainer"> | |
| <img ref="img2" :src="extended_entities.media[1].media_url_https"> | |
| </div> | |
| </div> | |
| <div class="AdaptiveMedia-thirdHeightPhoto"> | |
| <div ref="media3" class="AdaptiveMedia-photoContainer"> | |
| <img ref="img3" :src="extended_entities.media[2].media_url_https"> | |
| </div> | |
| </div> | |
| <div class="AdaptiveMedia-thirdHeightPhoto"> | |
| <div ref="media4" class="AdaptiveMedia-photoContainer"> | |
| <img ref="img4" :src="extended_entities.media[3].media_url_https"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="Tweet-metadata dateline"> | |
| <a class="u-linkBlend u-url" :data-datetime="created_at" :href="tweetURI" target="_blank"> | |
| <time :datetime="created_at" :title="'Time posted: '+($moment(created_at, 'ddd MMM DD HH:mm:ss ZZ YYYY').format('llll'))">{{ new Date(created_at) | moment('LT - ll')}}</time> | |
| </a> | |
| </div> | |
| <ul class="Tweet-actions Tweet-action--newsActions" role="menu" aria-label="Tweet actions"> | |
| <li class="Tweet-action Tweet-action--newsAction"> | |
| <a class="Tweet-action--retweet TweetAction TweetAction--retweet" title="Retweet" :href="'https://twitter.com/intent/retweet?tweet_id=' + id_str" target="_blank"> | |
| <div class="Icon Icon--retweet TweetAction-icon" role="img"></div> | |
| <span class="TweetAction-stat TweetAction--retweet">{{ formattedNumber(retweet_count) }}</span> | |
| </a> | |
| </li> | |
| <li class="Tweet-action Tweet-action--newsAction"> | |
| <a class="Tweet-action--heart TweetAction TweetAction--heart" title="Like" :href="'https://twitter.com/intent/like?tweet_id=' + id_str" target="_blank"> | |
| <div class="Icon Icon--heart TweetAction-icon" role="img"></div> | |
| <span class="TweetAction-stat TweetAction--heart">{{ formattedNumber(favorite_count) }}</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </blockquote> | |
| </div> | |
| </div> | |
| <div class="tweet-InformationCircle--bottom tweet-InformationCircle"> | |
| <a href="https://support.twitter.com/articles/20175256" target="_blank" class="Icon Icon--informationCircleWhite" title="Twitter Ads info and privacy"> | |
| <span class="u-hiddenVisually">Twitter Ads info and privacy</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| <script> | |
| export default { | |
| name: 'Twitter', | |
| props: ['content'], | |
| data() { | |
| return { | |
| ...this.content | |
| } | |
| }, | |
| computed: { | |
| formattedText() { | |
| let text = this.full_text.replace(/</g, '<') | |
| for(let type in this.entities) { | |
| if(type === 'hashtags') text = this.entities[type].reduce((ac, cv) => ac.replace(new RegExp(`\\B#${cv.text}\\b`), this.toHashtag(cv.text)), text) | |
| else if(type === 'user_mentions') text = this.entities[type].reduce((ac, cv) => ac.replace(new RegExp(`\\B@${cv.screen_name}\\b`), this.toScreenName(cv.screen_name)), text) | |
| else if(type === 'symbols') text = this.entities[type].reduce((ac, cv) => ac.replace(new RegExp(`\\B\\$${cv.text}\\b`), this.toSymbol(cv.text)), text) | |
| else if(type === 'urls') text = this.entities[type].reduce((ac, cv) => ac.replace(`${cv.url}`, this.toURL(cv.display_url, cv.url)), text) | |
| } | |
| if(this.extended_entities && this.extended_entities.media) { | |
| let media = this.extended_entities.media | |
| for(let index in media) { | |
| if(['animated_gif', 'photo', 'video'].includes(media[index].type)) | |
| text = media.reduce((ac, cv) => ac.replace(`${cv.url}`, ''), text) | |
| } | |
| } | |
| return text | |
| }, | |
| hasMedia() { return this.extended_entities && this.extended_entities.media }, | |
| countMedia() { return this.hasMedia ? this.extended_entities.media.length : 0 }, | |
| adaptiveMedia() { | |
| if(this.countMedia === 1) return 'single' | |
| else if(this.countMedia === 2) return 'double' | |
| else if(this.countMedia === 3) return 'triple' | |
| else if(this.countMedia === 4) return 'quad' | |
| }, | |
| isReply() { return this.in_reply_to_status_id_str }, | |
| isVerified() { return this.user.verified }, | |
| userURI() { return `https://twitter.com/${this.user.screen_name}` }, | |
| tweetURI() { return `${this.userURI}/status/${this.id_str}` }, | |
| formattedName() { return this.user.name }, | |
| formattedScreenName() { return `@${this.user.screen_name}` }, | |
| bigProfilePicture() { return this.user.profile_image_url_https.replace('_normal', '') } | |
| }, | |
| mounted() { | |
| if(this.hasMedia) { | |
| let containerDimensions = this.$refs['container'].getBoundingClientRect() | |
| if(this.countMedia > 1) this.$refs['container'].style.height = (containerDimensions.width / this.countMedia) * (this.countMedia-1) + 'px' | |
| else this.$refs['container'].style.maxHeight = containerDimensions.width + 'px' | |
| for (let i = 1; i <= this.countMedia; i++) { | |
| let media = this.$refs['media' + i] | |
| let img = this.$refs['img' + i] | |
| let finalMediaDimensions = media.getBoundingClientRect() | |
| let imageDimensions = img.getBoundingClientRect() | |
| if (imageDimensions.height > imageDimensions.width) { | |
| img.style.width = '100%' | |
| img.style.top = `-${(img.getBoundingClientRect().height - finalMediaDimensions.height) / 2}px` | |
| } | |
| else if (imageDimensions.height < imageDimensions.width) { | |
| if (this.countMedia > 1) img.style.height = '100%' | |
| else img.style.width = '100%' | |
| img.style.left = `-${(img.getBoundingClientRect().width - finalMediaDimensions.width) / 2}px` | |
| } else { | |
| img.style.width = '100%' | |
| img.style.left = `-${(img.getBoundingClientRect().width - finalMediaDimensions.width) / 2}px` | |
| img.style.top = `-${(img.getBoundingClientRect().height - finalMediaDimensions.height) / 2}px` | |
| } | |
| } | |
| } | |
| }, | |
| methods: { | |
| formattedNumber(number, decimals = 1) { | |
| let si = [{ value: 1, symbol: "" }, { value: 1E3, symbol: "k" }, { value: 1E6, symbol: "M" }] | |
| let i; for (i = si.length-1; i>0; i--) { if (number >= si[i].value) break } | |
| return `${(number / si[i].value).toFixed(decimals).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, "$1").replace('.', ',')} ${si[i].symbol}` | |
| }, | |
| openTweet() { window.open(this.tweetURI) }, | |
| toHashtag(hashtag) { return `<a onclick="event.stopPropagation()" href="https://twitter.com/hashtag/${hashtag}?src=hash" target="_blank" class="PrettyLink hashtag customisable" dir="ltr" rel="tag"><span class="PrettyLink-prefix">#</span><span class="PrettyLink-value">${hashtag}</span></a>` }, | |
| toSymbol(symbol) { return `<a onclick="event.stopPropagation()" href="https://twitter.com/search?q=%24${symbol}&src=ctag" target="_blank" class="PrettyLink hashtag customisable" dir="ltr" rel="tag"><span class="PrettyLink-prefix">$</span><span class="PrettyLink-value">${symbol}</span></a>` }, | |
| toScreenName(screen_name) { return `<a onclick="event.stopPropagation()" href="https://twitter.com/${screen_name}" target="_blank" class="PrettyLink profile customisable h-card" dir="ltr"><span class="PrettyLink-prefix">@</span><span class="PrettyLink-value">${screen_name}</span></a>` }, | |
| toURL(display_url, url) { return `<a onclick="event.stopPropagation()" href="${url}" class="PrettyLink profile customisable h-card" target="_blank" dir="ltr"><span class="PrettyLink-value">${display_url}</span></a>` } | |
| } | |
| } | |
| </script> | |
| <style scoped> | |
| .twitter-widget .u-hiddenVisually { | |
| position: absolute !important; | |
| overflow: hidden !important; | |
| width: 1px !important; | |
| height: 1px !important; | |
| padding: 0 !important; | |
| border: 0 !important; | |
| clip: rect(1px, 1px, 1px, 1px) !important | |
| } | |
| .twitter-widget { | |
| direction: ltr; | |
| text-align: left | |
| } | |
| .twitter-widget { | |
| display: block; | |
| background: 0 0; | |
| font: normal normal 16px/1.4 Helvetica, Roboto, "Segoe UI", Calibri, sans-serif; | |
| color: #1c2022; | |
| white-space: normal; | |
| white-space: initial | |
| } | |
| .twitter-widget >>> a, a { | |
| color: #2b7bb9; | |
| cursor: pointer; | |
| text-decoration: none | |
| } | |
| .twitter-widget >>> a:visited, a:visited { | |
| color: #2b7bb9; | |
| text-decoration: none; | |
| outline: 0 | |
| } | |
| .twitter-widget >>> a:focus, a:focus { | |
| color: #3b94d9; | |
| text-decoration: underline | |
| } | |
| .twitter-widget >>> a:hover:not(.TweetAction), a:hover:not(.TweetAction) { | |
| color: #3b94d9; | |
| text-decoration: none; | |
| outline: 0 | |
| } | |
| .twitter-widget >>> a:active, a:active { | |
| color: #2b7bb9; | |
| text-decoration: none; | |
| outline: 0 | |
| } | |
| .twitter-widget .u-linkBlend:not(:focus):not(:hover):not(:active) { | |
| font-weight: inherit; | |
| color: inherit; | |
| text-decoration: inherit | |
| } | |
| .twitter-widget .Avatar { | |
| max-width: 100%; | |
| max-height: 100%; | |
| border-radius: 50% | |
| } | |
| .twitter-widget .Icon { | |
| display: inline-block; | |
| height: 1.25em; | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| vertical-align: text-bottom | |
| } | |
| .twitter-widget .Icon--retweet { | |
| width: 1.28472em; | |
| background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2074%2072%22%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23697882%22%20d%3D%22M70.676%2036.644C70.166%2035.636%2069.13%2035%2068%2035h-7V19c0-2.21-1.79-4-4-4H34c-2.21%200-4%201.79-4%204s1.79%204%204%204h18c.552%200%20.998.446%201%20.998V35h-7c-1.13%200-2.165.636-2.676%201.644-.51%201.01-.412%202.22.257%203.13l11%2015C55.148%2055.545%2056.046%2056%2057%2056s1.855-.455%202.42-1.226l11-15c.668-.912.767-2.122.256-3.13zM40%2048H22c-.54%200-.97-.427-.992-.96L21%2036h7c1.13%200%202.166-.636%202.677-1.644.51-1.01.412-2.22-.257-3.13l-11-15C18.854%2015.455%2017.956%2015%2017%2015s-1.854.455-2.42%201.226l-11%2015c-.667.912-.767%202.122-.255%203.13C3.835%2035.365%204.87%2036%206%2036h7l.012%2016.003c.002%202.208%201.792%203.997%204%203.997h22.99c2.208%200%204-1.79%204-4s-1.792-4-4-4z%22%2F%3E%3C%2Fsvg%3E); | |
| -webkit-transform: scaleX(1); | |
| -moz-transform: scaleX(1); | |
| -ms-transform: scaleX(1); | |
| -o-transform: scaleX(1); | |
| transform: scaleX(1) | |
| } | |
| .twitter-widget .Icon--twitter { | |
| width: 1.25em; | |
| background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%231da1f2%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E) | |
| } | |
| .twitter-widget .Icon--verified { | |
| width: 1.11111em; | |
| background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h64v72H0z%22%2F%3E%3Cpath%20fill%3D%22%231da1f2%22%20d%3D%22M3%2037.315c0%204.125%202.162%207.726%205.363%209.624-.056.467-.09.937-.09%201.42%200%206.103%204.72%2011.045%2010.546%2011.045%201.295%200%202.542-.234%203.687-.686C24.22%2062.4%2027.827%2064.93%2032%2064.93c4.174%200%207.782-2.53%209.49-6.213%201.148.45%202.39.685%203.69.685%205.826%200%2010.546-4.94%2010.546-11.045%200-.483-.037-.953-.093-1.42C58.83%2045.04%2061%2041.44%2061%2037.314c0-4.37-2.42-8.15-5.933-9.946.427-1.203.658-2.5.658-3.865%200-6.104-4.72-11.045-10.545-11.045-1.302%200-2.543.232-3.69.688-1.707-3.685-5.315-6.216-9.49-6.216-4.173%200-7.778%202.53-9.492%206.216-1.146-.455-2.393-.688-3.688-.688-5.827%200-10.545%204.94-10.545%2011.045%200%201.364.23%202.662.656%203.864C5.42%2029.163%203%2032.944%203%2037.314z%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M17.87%2039.08l7.015%206.978c.585.582%201.35.873%202.116.873.77%200%201.542-.294%202.127-.883.344-.346%2015.98-15.974%2015.98-15.974%201.172-1.172%201.172-3.07%200-4.243-1.17-1.17-3.07-1.172-4.242%200l-13.87%2013.863-4.892-4.868c-1.174-1.168-3.074-1.164-4.242.01-1.168%201.176-1.163%203.075.01%204.244z%22%2F%3E%3C%2Fsvg%3E) | |
| } | |
| .twitter-widget .Icon--heart { | |
| width: 1.25em; | |
| background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23697882%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E) | |
| } | |
| .twitter-widget .Icon--informationCircleWhite { | |
| height: 18px; | |
| width: 18px; | |
| background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cg%20transform%3D%22translate(8%208)%22%3E%3Cpath%20fill%3D%22%23657786%22%20fill-opacity%3D%22.8%22%20d%3D%22M28%203.11C14.278%203.11%203.11%2014.276%203.11%2028c0%2013.723%2011.166%2024.887%2024.89%2024.887S52.89%2041.723%2052.89%2028C52.89%2014.274%2041.724%203.11%2028%203.11z%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M28%2044.593c-1.718%200-3.11-1.393-3.11-3.112V30.076c0-1.718%201.392-3.11%203.11-3.11s3.11%201.392%203.11%203.11V41.48c0%201.72-1.392%203.113-3.11%203.113z%22%2F%3E%3Ccircle%20fill%3D%22%23FFF%22%20cx%3D%2228%22%20cy%3D%2218.148%22%20r%3D%224.667%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M28%2056C12.56%2056%200%2043.44%200%2028S12.56%200%2028%200s28%2012.56%2028%2028-12.56%2028-28%2028zm0-49.778C15.99%206.222%206.222%2015.992%206.222%2028S15.992%2049.778%2028%2049.778c12.01%200%2021.778-9.77%2021.778-21.778S40.008%206.222%2028%206.222z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') | |
| } | |
| .twitter-widget .Identity-name { | |
| font-weight: 700 | |
| } | |
| .twitter-widget .Identity-screenName { | |
| color: #697882 | |
| } | |
| .twitter-widget .Identity:focus { | |
| text-decoration: none | |
| } | |
| .twitter-widget .Identity:focus .Identity-name { | |
| text-decoration: underline | |
| } | |
| .twitter-widget .EmbeddedTweet { | |
| overflow: hidden; | |
| cursor: pointer; | |
| background-color: #fff; | |
| border: 1px solid #e1e8ed; | |
| border-radius: 5px; | |
| max-width: 520px | |
| } | |
| .twitter-widget .EmbeddedTweet:hover { | |
| border-color: #ccd6dd | |
| } | |
| .twitter-widget .EmbeddedTweet-tweet { | |
| padding: 20px 20px 11.6px 20px | |
| } | |
| .twitter-widget .tweet-InformationCircle-widgetParent { | |
| position: relative | |
| } | |
| .twitter-widget .tweet-InformationCircle { | |
| position: absolute; | |
| right: 0 | |
| } | |
| .twitter-widget .tweet-InformationCircle--bottom { | |
| bottom: 3px; | |
| margin: 10px 18px 8px 18px | |
| } | |
| .twitter-widget .Tweet-header { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -moz-box; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .twitter-widget .Tweet-brand { | |
| margin-left: auto | |
| } | |
| .twitter-widget .Tweet-inReplyTo { | |
| margin-bottom: 2px; | |
| font-size: 14px; | |
| color: #697882 | |
| } | |
| .twitter-widget .Tweet-text { | |
| white-space: pre-wrap; | |
| cursor: text; | |
| word-wrap: break-word | |
| } | |
| .twitter-widget .Tweet-body { | |
| margin-top: 14px | |
| } | |
| .twitter-widget .Tweet-text[dir=ltr] { | |
| text-align: left; | |
| direction: ltr | |
| } | |
| .Tweet-metadata { | |
| font-size: 14px; | |
| color: #697882 | |
| } | |
| .twitter-widget .Tweet-actions { | |
| list-style: none; | |
| padding: 0; | |
| margin-top: 8.4px | |
| } | |
| .twitter-widget .Tweet-action { | |
| display: inline-block | |
| } | |
| .twitter-widget .Tweet-action + .Tweet-action { | |
| margin-left: 14px | |
| } | |
| .twitter-widget .Tweet-action--newsActions { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -moz-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| margin-right: 15px | |
| } | |
| .twitter-widget .Tweet-action--newsAction + .Tweet-action--newsAction { | |
| margin-left: 7px; | |
| white-space: nowrap; | |
| overflow: hidden | |
| } | |
| .twitter-widget .Tweet-action--heart { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -moz-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| -moz-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center | |
| } | |
| .twitter-widget .Tweet-action--newsAction .TweetAction-stat { | |
| margin-left: 3px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| min-width: 0 | |
| } | |
| .twitter-widget .Tweet-action--newsAction .TweetAction-icon { | |
| -webkit-flex-shrink: 0; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0 | |
| } | |
| .twitter-widget .TweetAction, .TweetAction:visited { | |
| color: #697882 | |
| } | |
| .twitter-widget .TweetAction-stat { | |
| display: inline-block; | |
| font-size: 14px; | |
| vertical-align: text-bottom | |
| } | |
| .twitter-widget .TweetAction--retweet:active, .TweetAction--retweet:focus, .TweetAction--retweet:hover { | |
| color: #17BF63; | |
| text-decoration: none | |
| } | |
| .twitter-widget .TweetAction--retweet:active .TweetAction-icon, .TweetAction--retweet:focus .TweetAction-icon, .TweetAction--retweet:hover .TweetAction-icon { | |
| background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2074%2072%22%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%2317BF63%22%20d%3D%22M70.676%2036.644C70.166%2035.636%2069.13%2035%2068%2035h-7V19c0-2.21-1.79-4-4-4H34c-2.21%200-4%201.79-4%204s1.79%204%204%204h18c.552%200%20.998.446%201%20.998V35h-7c-1.13%200-2.165.636-2.676%201.644-.51%201.01-.412%202.22.257%203.13l11%2015C55.148%2055.545%2056.046%2056%2057%2056s1.855-.455%202.42-1.226l11-15c.668-.912.767-2.122.256-3.13zM40%2048H22c-.54%200-.97-.427-.992-.96L21%2036h7c1.13%200%202.166-.636%202.677-1.644.51-1.01.412-2.22-.257-3.13l-11-15C18.854%2015.455%2017.956%2015%2017%2015s-1.854.455-2.42%201.226l-11%2015c-.667.912-.767%202.122-.255%203.13C3.835%2035.365%204.87%2036%206%2036h7l.012%2016.003c.002%202.208%201.792%203.997%204%203.997h22.99c2.208%200%204-1.79%204-4s-1.792-4-4-4z%22%2F%3E%3C%2Fsvg%3E) | |
| } | |
| .twitter-widget .TweetAction--heart:active, .TweetAction--heart:focus, .TweetAction--heart:hover { | |
| color: #E0245E; | |
| text-decoration: none | |
| } | |
| .twitter-widget .TweetAction--heart:active .TweetAction-icon, .TweetAction--heart:focus .TweetAction-icon, .TweetAction--heart:hover .TweetAction-icon { | |
| background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23E0245E%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E) | |
| } | |
| .twitter-widget .TweetAuthor { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -moz-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -moz-box-orient: vertical; | |
| -moz-box-direction: normal; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| overflow: hidden | |
| } | |
| .twitter-widget .TweetAuthor-link { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -moz-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-align: start; | |
| -webkit-align-items: flex-start; | |
| -moz-box-align: start; | |
| -ms-flex-align: start; | |
| align-items: flex-start | |
| } | |
| .twitter-widget .TweetAuthor-avatar { | |
| -webkit-flex-basis: 36px; | |
| -ms-flex-preferred-size: 36px; | |
| flex-basis: 36px; | |
| -webkit-box-flex: 0; | |
| -webkit-flex: none; | |
| -moz-box-flex: 0; | |
| -ms-flex: none; | |
| flex: none; | |
| height: 36px; | |
| background-color: transparent; | |
| margin-right: 9px | |
| } | |
| .twitter-widget .TweetAuthor-name { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| padding-right: 4px | |
| } | |
| .twitter-widget .TweetAuthor-screenName { | |
| font-size: 14px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| -webkit-flex-shrink: 1; | |
| -ms-flex-negative: 1; | |
| flex-shrink: 1 | |
| } | |
| .twitter-widget .TweetAuthor-decoratedName { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -moz-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| -moz-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| min-width: 0 | |
| } | |
| .twitter-widget .TweetAuthor-nameScreenNameContainer { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -moz-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -moz-box-orient: vertical; | |
| -moz-box-direction: normal; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| line-height: 1.2; | |
| -webkit-box-align: start; | |
| -webkit-align-items: flex-start; | |
| -moz-box-align: start; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| min-width: 0 | |
| } | |
| .twitter-widget .TweetAuthor-verifiedBadge { | |
| position: static; | |
| -webkit-box-flex: 0; | |
| -webkit-flex: none; | |
| -moz-box-flex: 0; | |
| -ms-flex: none; | |
| flex: none; | |
| padding-right: 4px | |
| } | |
| .twitter-widget .AdaptiveMedia { | |
| border-radius: 12px; | |
| display: inline-block; | |
| overflow: hidden; | |
| position: relative; | |
| vertical-align: top; | |
| font-size: 0; | |
| width: 100% | |
| } | |
| .twitter-widget img { | |
| max-width: 500% !important | |
| } | |
| .twitter-widget .AdaptiveMedia-photoContainer { | |
| height: 100%; | |
| position: relative; | |
| width: 100% | |
| } | |
| .twitter-widget .AdaptiveMedia-photoContainer img { | |
| background-color: #fff; | |
| position: absolute | |
| } | |
| .twitter-widget .AdaptiveMediaOuterContainer { | |
| margin: 10px 0 | |
| } | |
| .twitter-widget .AdaptiveMedia { | |
| max-height: 379.5px; | |
| width: 100% /* original: 506px */ | |
| } | |
| .twitter-widget .AdaptiveMedia-halfWidthPhoto { | |
| display: inline-block; | |
| height: calc(100% - .5px); | |
| overflow: hidden; | |
| position: relative; | |
| width: calc(50% - .5px) | |
| } | |
| .twitter-widget .AdaptiveMedia-halfWidthPhoto:first-child { | |
| margin-right: 1px | |
| } | |
| .twitter-widget .AdaptiveMedia-twoThirdsWidthPhoto { | |
| display: inline-block; | |
| height: 100%; | |
| margin-right: 1px; | |
| overflow: hidden; | |
| position: relative; | |
| width: 66.66666666666666% | |
| } | |
| .twitter-widget .AdaptiveMedia-halfHeightPhoto { | |
| height: calc(100% / 2 - 1px / 2); | |
| overflow: hidden; | |
| position: relative; | |
| width: 100% | |
| } | |
| .twitter-widget .AdaptiveMedia-halfHeightPhoto:first-child { | |
| margin-bottom: 1px | |
| } | |
| .twitter-widget .AdaptiveMedia-halfHeightPhotoContainer { | |
| display: inline-block; | |
| height: 100%; | |
| vertical-align: top; | |
| width: calc(100% / 3 - 1px) | |
| } | |
| .twitter-widget .AdaptiveMedia-threeQuartersWidthPhoto { | |
| display: inline-block; | |
| height: 100%; | |
| margin-right: 1px; | |
| overflow: hidden; | |
| position: relative; | |
| width: 75% | |
| } | |
| .twitter-widget .AdaptiveMedia-thirdHeightPhoto { | |
| height: calc(100% / 3 - 2px / 3); | |
| margin-bottom: 1px; | |
| overflow: hidden; | |
| position: relative; | |
| width: 100% | |
| } | |
| .twitter-widget .AdaptiveMedia-thirdHeightPhoto:last-child { | |
| height: 33.33333333333333% | |
| } | |
| .twitter-widget .AdaptiveMedia-thirdHeightPhotoContainer { | |
| display: inline-block; | |
| height: 100%; | |
| vertical-align: top; | |
| width: calc(100% / 4 - 1px) | |
| } | |
| .twitter-widget .AdaptiveMedia-singlePhoto .AdaptiveMedia-photoContainer img { | |
| position: relative | |
| } | |
| .twitter-widget .AdaptiveMedia-doublePhoto { | |
| font-size: 0; | |
| height: 100%; /* 253px; */ | |
| width: 100% /* original: 506px */ | |
| } | |
| .twitter-widget .AdaptiveMedia-triplePhoto { | |
| font-size: 0; | |
| height: 100%; /* 337.3333333333333px; */ | |
| width: 100% /* original: 506px */ | |
| } | |
| .twitter-widget .AdaptiveMedia-quadPhoto { | |
| font-size: 0; | |
| height: 100%; /* 379.5px; */ | |
| width: 100% /* original: 506px */ | |
| } | |
| .twitter-widget .AdaptiveMedia.is-square { | |
| border: 1px solid rgba(0,0,0,0.1); | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment