Style Twitter Embed Post

How to Style any Element in Twitter embed post

by scurrilus

HTML

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-lang="de"><p lang="de" dir="ltr"><a href="https://t.co/yS8iEI4zS8">https://t.co/yS8iEI4zS8</a> Wie man einen Box Container floatet und den Content smal hält. <a href="https://twitter.com/hashtag/css?src=hash">#css</a> <a href="https://twitter.com/hashtag/html?src=hash">#html</a> <a href="https://twitter.com/hashtag/csstricks?src=hash">#csstricks</a></p>&mdash; SCURRILUS (@scurrilus) <a href="https://twitter.com/scurrilus/status/730680564819345408">12. Mai 2016</a></blockquote>

CSS

twitterwidget::shadow .SandboxRoot {
    width: 700px;
    max-width: 700px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f9ff+0,cbebff+47,a1dbff+100;Blue+3D+%2313 */
  background: #f0f9ff; /* Old browsers */
background: -webkit-linear-gradient(#f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
background: -moz-linear-gradient(#f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
background: -o-linear-gradient(#f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
background: linear-gradient(#f0f9ff 0%, #cbebff 47%, #a1dbff 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */

}

blockquote.twitter-tweet {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 0 16px 16px 16px;
  max-width: 468px;
}

twitter-widget.twitter-tweet p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

twitter-widget.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

twitter-widget.twitter-tweet a:hover,
twitter-widget.twitter-tweet a:focus {
  text-decoration: underline;
}