From Bitty Matamata, 5 Days ago, written in Text.
Embed
  1. @import url("https://fonts.googleapis.com/css?family=Changa One");
  2. @import url("https://fonts.googleapis.com/css?family=Imprima");
  3.  
  4. /* Background colors*/
  5. body {
  6.   background-color: rgba(0,0,0,0);
  7. }
  8.  
  9.  
  10.  
  11.  
  12. /* Transparent background. */
  13. yt-live-chat-renderer {
  14.   background-color: transparent !important;
  15. }
  16.  
  17. /* Outlines */
  18. yt-live-chat-renderer * {
  19.   text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
  20.   font-family: "Imprima";
  21.   font-size: 18px !important;
  22.   line-height: 18px !important;
  23. }
  24.  
  25. yt-live-chat-text-message-renderer #content,
  26. yt-live-chat-legacy-paid-message-renderer #content {
  27.   overflow: initial; !important
  28. }
  29.  
  30. /* Hide scrollbar. */
  31. yt-live-chat-item-list-renderer #items{
  32.   overflow: hidden !important;
  33. }
  34.  
  35. yt-live-chat-item-list-renderer #item-scroller{
  36.   overflow: hidden !important;
  37. }
  38.  
  39. /* Hide header and input. */
  40. yt-live-chat-header-renderer,
  41. yt-live-chat-message-input-renderer {
  42.   display: none !important;
  43. }
  44.  
  45. /* Reduce side padding. */
  46. yt-live-chat-text-message-renderer,
  47. yt-live-chat-legacy-paid-message-renderer {
  48.     padding-left: 4px !important;
  49.   padding-right: 4px !important;
  50. }
  51.  
  52. yt-live-chat-paid-message-renderer #header {
  53.     padding-left: 4px !important;
  54.   padding-right: 4px !important;
  55. }
  56.  
  57. /* Avatars. */
  58. yt-live-chat-text-message-renderer #author-photo,
  59. yt-live-chat-paid-message-renderer #author-photo,
  60. yt-live-chat-legacy-paid-message-renderer #author-photo {
  61.  
  62.   width: 24px !important;
  63.   height: 24px !important;
  64.   border-radius: 24px !important;
  65.   margin-right: 6px !important;
  66. }
  67.  
  68. /* Hide badges. */
  69. yt-live-chat-text-message-renderer #author-badges {
  70.   display: none !important;
  71.   vertical-align: text-top !important;
  72. }
  73.  
  74. /* Timestamps. */
  75. yt-live-chat-text-message-renderer #timestamp {
  76.  
  77.   color: #999999 !important;
  78.   font-family: "Imprima";
  79.   font-size: 16px !important;
  80.   line-height: 16px !important;
  81. }
  82.  
  83. /* Badges. */
  84. yt-live-chat-text-message-renderer #author-name[type="owner"],
  85. yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
  86.   color: #ffd600 !important;
  87. }
  88.  
  89. yt-live-chat-text-message-renderer #author-name[type="moderator"],
  90. yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  91.   color: #5e84f1 !important;
  92. }
  93.  
  94. yt-live-chat-text-message-renderer #author-name[type="member"],
  95. yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  96.   color: #0f9d58 !important;
  97. }
  98.  
  99. /* Channel names. */
  100. yt-live-chat-text-message-renderer #author-name {
  101.   color: #cccccc !important;
  102.   font-family: "Changa One";
  103.   font-size: 20px !important;
  104.   line-height: 20px !important;
  105. }
  106.  
  107. yt-live-chat-text-message-renderer #author-name::after {
  108.   content: ":";
  109.   margin-left: 2px;
  110. }
  111.  
  112. /* Messages. */
  113. yt-live-chat-text-message-renderer #message,
  114. yt-live-chat-text-message-renderer #message * {
  115.   color: #ffffff !important;
  116.   font-family: "Imprima";
  117.   font-size: 18px !important;
  118.   line-height: 18px !important;
  119. }
  120.  
  121.  
  122. /* SuperChat/Fan Funding Messages. */
  123. yt-live-chat-paid-message-renderer #author-name,
  124. yt-live-chat-paid-message-renderer #author-name *,
  125. yt-live-chat-legacy-paid-message-renderer #event-text,
  126. yt-live-chat-legacy-paid-message-renderer #event-text * {
  127.   color: #ffffff !important;
  128.   font-family: "Changa One";
  129.   font-size: 20px !important;
  130.   line-height: 20px !important;
  131. }
  132.  
  133. yt-live-chat-paid-message-renderer #purchase-amount,
  134. yt-live-chat-paid-message-renderer #purchase-amount *,
  135. yt-live-chat-legacy-paid-message-renderer #detail-text,
  136. yt-live-chat-legacy-paid-message-renderer #detail-text * {
  137.   color: #ffffff !important;
  138.   font-family: "Imprima";
  139.   font-size: 18px !important;
  140.   line-height: 18px !important;
  141. }
  142.  
  143. yt-live-chat-paid-message-renderer #content,
  144. yt-live-chat-paid-message-renderer #content * {
  145.   color: #ffffff !important;
  146.   font-family: "Imprima";
  147.   font-size: 18px !important;
  148.   line-height: 18px !important;
  149. }
  150.  
  151. yt-live-chat-paid-message-renderer {
  152.   margin: 4px 0 !important;
  153. }
  154.  
  155. yt-live-chat-legacy-paid-message-renderer {
  156.   background-color: #0f9d58 !important;
  157.   margin: 4px 0 !important;
  158. }
  159.  
  160. yt-live-chat-text-message-renderer a,
  161. yt-live-chat-legacy-paid-message-renderer a {
  162.   text-decoration: none !important;
  163. }
  164.  
  165. yt-live-chat-text-message-renderer[is-deleted],
  166. yt-live-chat-legacy-paid-message-renderer[is-deleted] {
  167.   display: none !important;
  168. }
  169.  
  170. yt-live-chat-ticker-renderer {
  171.   background-color: transparent !important;
  172.   box-shadow: none !important;
  173. }
  174. yt-live-chat-ticker-renderer {
  175.   display: none !important;
  176. }
  177.  
  178.  
  179. yt-live-chat-ticker-paid-message-item-renderer,
  180. yt-live-chat-ticker-paid-message-item-renderer *,
  181. yt-live-chat-ticker-sponsor-item-renderer,
  182. yt-live-chat-ticker-sponsor-item-renderer * {
  183.   color: #ffffff !important;
  184.   font-family: "Imprima";
  185. }
  186.  
  187.