Skip to content

Instantly share code, notes, and snippets.

@HapLifeMan
Last active May 9, 2020 19:07
Show Gist options
  • Save HapLifeMan/96e8ad710fd34db5b61eae797195e869 to your computer and use it in GitHub Desktop.
Save HapLifeMan/96e8ad710fd34db5b61eae797195e869 to your computer and use it in GitHub Desktop.
StandaloneEmbeddedTweet
<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, '&lt;')
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