lowheartrate

streamLabs css of custom chatbox

Oct 16th, 2016
87
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.79 KB | None | 0 0
  1. @import 'https://fonts.googleapis.com/css?family=Montserrat:400,700|Source+Sans+Pro:300,400i,600';
  2. @import 'https://fonts.googleapis.com/css?family=Permanent+Marker';
  3. body {
  4. background: $background_color;
  5. color: $text_color;
  6. text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.6);
  7. }
  8.  
  9. html, body {
  10. height: 100%;
  11. overflow: hidden;
  12. }
  13.  
  14. #log {
  15. font: 600 $font_size "Open Sans";
  16. position: absolute;
  17. bottom: 0;
  18. left: 0;
  19. width: 55%;
  20. box-sizing: border-box;
  21. overflow: hidden;
  22. padding: 10px 15px;
  23. padding-top: 100px;
  24. }
  25.  
  26. #log>div {
  27. margin-bottom: 5px;
  28. background: linear-gradient(rgba(70, 70, 70, 0.6), rgba(50, 50, 50, 0.7));
  29. padding: 5px 10px 10px;
  30. animation: flipInX 500ms ease, fadeOutUp 1s ease $message_hide_delay forwards;
  31. -webkit-animation: flipInX 500ms ease, fadeOutUp 1s ease $message_hide_delay forwards;
  32. border-radius: 0;
  33. border-right: #FC3E3E 5px solid;
  34. box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  35. }
  36.  
  37. #log>div.deleted {
  38. visibility: hidden;
  39. }
  40.  
  41. .meta {
  42. display: block;
  43. line-height: 1em;
  44. }
  45.  
  46. .message {
  47. word-wrap: break-word;
  48. line-height: 1.5em;
  49. font: 400 $font_size "Source Sans Pro";
  50. letter-spacing: .5px;
  51. }
  52.  
  53. .name {
  54. font-size: 0.6em;
  55. text-transform: uppercase;
  56. font-weight: 900;
  57. color: #FC3E3E;
  58. letter-spacing: 5px;
  59. font-family: 'Permanent Marker', cursive;
  60. }
  61.  
  62. .colon {
  63. display: none;
  64. }
  65.  
  66. .badge {
  67. float: right;
  68. padding-left: 5px;
  69. height: 0.8em;
  70. }
  71.  
  72. #log .emote {
  73. background-repeat: no-repeat;
  74. background-position: center;
  75. padding: 0.1em;
  76. background-size: contain;
  77. }
  78.  
  79. #log .emote img {
  80. display: inline-block;
  81. height: 1em;
  82. opacity: 0;
  83. vertical-align: top;
  84. }
Add Comment
Please, Sign In to add comment