Zalati

Bubble chat-box streamlabs

Feb 1st, 2022 (edited)
1,343
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import url(https://fonts.googleapis.com/css?family=Roboto:700);
  2.  
  3. * {
  4.     box-sizing: border-box;
  5. }
  6.  
  7. html, body {
  8.     height: 100%;
  9.     overflow: hidden;
  10. }
  11.  
  12. body {
  13.     background: {background_color};
  14.     font-family: 'Roboto';
  15.     font-weight: 700;
  16.     font-size: {font_size};
  17.     line-height: 1.5em;
  18. }
  19.  
  20. .name {
  21.     color: {colorname};
  22. }
  23.  
  24. .message {
  25.     color: {colormessage};
  26.     padding-top: 2.5px;
  27. }
  28.  
  29. #log>div {
  30.     animation: fadeInBottom 0.4s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
  31.     -webkit-animation: fadeInBottom 0.4s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
  32. }
  33.  
  34. @keyframes fadeInBottom {
  35.    0% {
  36.       opacity: 0;
  37.       transform: translateY(55px);
  38.    }
  39.    100% {
  40.       opacity: 1;
  41.       transform: translateY(0);
  42.    }
  43. }
  44.  
  45. .colon {
  46.     display: none;
  47. }
  48.  
  49. #log {
  50.     display: table;
  51.     position: absolute;
  52.     bottom: 0;
  53.     left: 0;
  54.     padding: 0 10px 10px;
  55.     table-layout: fixed;
  56.     width: 100%;
  57. }
  58.  
  59. #log>div {
  60.     display: block;
  61.     padding: 3px;
  62.     padding-left: 15px;
  63.     padding-right: 15px;
  64.     margin-top: 5px;
  65.     width: fit-content;
  66. }
  67.  
  68. #log>div.deleted {
  69.     visibility: hidden;
  70. }
  71.  
  72. #log .emote {
  73.     background-repeat: no-repeat;
  74.     background-position: center;
  75.     background-size: contain;
  76.     padding: 0.4em 0.2em;
  77.     position: relative;
  78. }
  79.  
  80. #log .emote img {
  81.     display: inline-block;
  82.     height: 1em;
  83.     opacity: 0;
  84. }
  85.  
  86. #log .message,#log .meta {
  87.     vertical-align: top;
  88.     display: table-cell;
  89.     padding-bottom: 0.1em;
  90. }
  91.  
  92. #log .meta {
  93.     overflow: hidden;
  94.     border-radius: 20px;
  95.     width: fit-content;
  96.     padding-left: inherit;
  97.     padding-right: inherit;
  98.     position: relative;
  99. }
  100.  
  101. [data-from]:nth-child(odd) .meta {
  102.     background-color: {backgroundcolorname1};
  103. }
  104.  
  105. [data-from]:nth-child(even) .meta {
  106.     background-color: {backgroundcolorname2};
  107. }
  108.  
  109.  
  110. #log .message {
  111.     background-color: {backgroundcolormessage};
  112.     border-radius: 20px;
  113.     width: 500px;
  114.     display: flex;
  115.     flex-direction: row;
  116.     justify-content: flex-start;
  117.     margin-left: 20px;
  118.     padding-left: inherit;
  119.     padding-right: inherit;
  120.     margin-top: -5px;
  121.     word-break: break-word;
  122.     hyphens: auto;
  123.     -webkit-hyphenate-character: "-";
  124.     hyphenate-character: "-";
  125. }
  126.  
  127. .badge {
  128.     display: inline-block;
  129.     margin-right: 0.2em;
  130.     position: relative;
  131.     height: 1em;
  132.     vertical-align: middle;
  133.     top: -0.1em;
  134.     opacity: 1;
  135. }
  136.  
  137. .name {
  138.     margin-left: 0.2em;
  139. }
RAW Paste Data Copied