Template:TweetEmbed/style.css

.tweetCanvas {
	border-radius: 12px; 
	max-width:550px; 
	min-width: 250px; 
	align-items: stretch; 
	position: relative; 
	display: flex; 
	flex-basis: auto; 
	flex-direction: column; 
	flex-shrink: 0; 
	margin: 10px 0;
	padding: 12px 16px;
}

body.wgl-lightmode .tweetCanvas, html.skin-citizen-light .tweetCanvas {
	background: #FFFFFF; 
	color: #0f1419;
	border: 1px solid #cfd9de; 
}

body.wgl-darkmode .tweetCanvas, html.skin-citizen-dark .tweetCanvas {
	background: #15202b;
	color: #f7f9f9;
	border: 1px solid #425364;
}

.tweetProfileContainer {
	display: flex;
	flex-direction: row;
	padding-bottom: 12px;
}

.tweetProfilePic {
	width: 50px;
	height: 50px;
}

.tweetProfilePic img {
	border-radius: 50%;
}

.tweetProfileText {
	margin: 0 4px;
}

.tweetProfileUsername {
	font-weight: 700; 
	font-size: 15px; 
}

body.wgl-lightmode .tweetProfileUsername, html.skin-citizen-light .tweetProfileUsername {
	color: #0f1419;
}

body.wgl-darkmode .tweetProfileUsername, html.skin-citizen-dark .tweetProfileUsername {
	color: #f7f9f9;
}

.tweetProfileHandle {
	font-weight: 400;
	font-size: 15px;
}

body.wgl-lightmode .tweetProfileHandle, html.skin-citizen-light .tweetProfileHandle {
	color: #536471;
}

body.wgl-darkmode .tweetProfileHandle, html.skin-citizen-dark .tweetProfileHandle {
	color: #8b98a5;
}

.tweetProfileReply {
	margin-bottom: 2px;
	font-weight: 400;
	font-size: 15px;
}

.tweetProfileReplyHandle {
	color: #1d9bf0;
}

.tweetText {
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
}

.tweetMedia {
	margin-top: 11px;
	border-radius: 12px;
}

.tweetMedia img {
	border-radius: 12px;
	width: 100%;
	height: 100%;
}

body.wgl-lightmode .tweetMedia img, html.skin-citizen-light .tweetMedia img {
	border: 1px solid #cfd9de;
}

body.wgl-darkmode .tweetMedia img, html.skin-citizen-dark .tweetMedia img {
	border: 1px solid #425364;
}

.tweetTimestamp {
	margin-top: 2px;
	font-size: 15px;
	height: 32px;
}

body.wgl-lightmode .tweetTimestamp, html.skin-citizen-light .tweetTimestamp {
	color: #536471;
}

body.wgl-darkmode .tweetTimestamp, html.skin-citizen-dark .tweetTimestamp {
	color: #8b98a5;
}

.tweetStats {
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
}


body.wgl-lightmode .tweetStats, html.skin-citizen-light .tweetStats {
	color: #536471; 
	border-top: 1px solid #cfd9de; 
	border-bottom: 1px solid #cfd9de; 
}

body.wgl-darkmode .tweetStats, html.skin-citizen-dark .tweetStats {
	color: #8b98a5;
	border-top: 1px solid #425364; 
	border-bottom: 1px solid #425364; 
}

.tweetStats .tweetStatsItem {
	margin-right: 20px;
	padding: 16px 0;
}

.tweetStatsItemText {
	font-weight: 700;
}

body.wgl-lightmode .tweetStatsItemCount, html.skin-citizen-light .tweetStatsItemCount {
	color: #0f1419;
}

body.wgl-darkmode .tweetStatsItemCount, html.skin-citizen-dark .tweetStatsItemCount {
	color: #f7f9f9;
}

.tweetExternalLinks {
	display: flex;
	flex-direction: row;
	padding: 12px 0;
	gap: 12px;
}

.tweetExternalLinks a {
	border-radius: 9999px;
	padding: 0 16px;
	flex: 1;
	flex-direction: row;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	min-height: 32px;
	font-size: 15px;
}

body.wgl-darkmode .tweetExternalLinks a, html.skin-citizen-dark .tweetExternalLinks a {
	border: solid 1px #425364;
}

body.wgl-lightmode .tweetExternalLinks a, html.skin-citizen-light .tweetExternalLinks a {
	border: solid 1px #cfd9de;
}