Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
- }
- #root {
- background-color: #f5f8fa;
- height: 100%;
- min-height: 100vh;
- padding: 20px 0;
- }
- #TweetStream {
- background-color: white;
- width: 600px;
- margin: 0 auto;
- border-radius: 5px 5px 0 0;
- border: 1px solid #e6ecf0;
- }
- .Tweet {
- border-bottom: 1px solid #e6ecf0;
- position: relative;
- padding: 9px 12px;
- }
- .Tweet img.profile {
- border-radius: 5px;
- width: 48px;
- height: 48px;
- position: absolute;
- top: 9px;
- left: 12px;
- }
- .tweet-body {
- margin-left: 58px;
- }
- .Tweet h1 {
- font-size: 14px;
- display: inline-block;
- margin: 0;
- font-weight: bold;
- }
- .Tweet h2 {
- font-size: 13px;
- display: inline-block;
- color: #657786;
- margin: 0;
- margin-left: 5px;
- }
- .Tweet p {
- font-size: 27px;
- margin: 0;
- }
- .Tweet img.attached {
- width: 100%;
- margin: 10px 0;
- border-radius: 5px;
- }
- button.hide {
- position: absolute;
- top: 9px;
- right: 12px;
- background-color: rgb(29, 161, 242);
- color: white;
- border: 1px solid rgb(59, 136, 195);
- box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px inset;
- font-size: 11px;
- }
- button.hide:hover {
- cursor: pointer;
- opacity: .75;
- }
- @-webkit-keyframes uil-ring-anim {
- 0% {
- -ms-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -ms-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @-webkit-keyframes uil-ring-anim {
- 0% {
- -ms-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -ms-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @-moz-keyframes uil-ring-anim {
- 0% {
- -ms-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -ms-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @-ms-keyframes uil-ring-anim {
- 0% {
- -ms-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -ms-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @-moz-keyframes uil-ring-anim {
- 0% {
- -ms-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -ms-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @-webkit-keyframes uil-ring-anim {
- 0% {
- -ms-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -ms-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @-o-keyframes uil-ring-anim {
- 0% {
- -ms-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -ms-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @keyframes uil-ring-anim {
- 0% {
- -ms-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -ms-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- .loading-indicator {
- background: none;
- margin: 0 auto;
- position: relative;
- width: 150px;
- height: 150px;
- }
- .loading-indicator > div {
- position: absolute;
- display: block;
- width: 100px;
- height: 100px;
- top: 20px;
- left: 20px;
- border-radius: 80px;
- box-shadow: 0 6px 0 0 #59ebff;
- -ms-animation: uil-ring-anim 1s linear infinite;
- -moz-animation: uil-ring-anim 1s linear infinite;
- -webkit-animation: uil-ring-anim 1s linear infinite;
- -o-animation: uil-ring-anim 1s linear infinite;
- animation: uil-ring-anim 1s linear infinite;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement