f6bfb5

Twitch chatroom custom stylesheet

Jun 18th, 2021 (edited)
636
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.63 KB | None | 0 0
  1. /* URL: https://www.twitch.tv/popout/failverde/chat */
  2.  
  3. /* ----------------------------------------
  4.  * General Settings
  5.  * ---------------------------------------- */
  6. body {
  7.     background-color: rgba(24,24,24,.33) !important;
  8.     overflow: hidden;
  9. }
  10. .tw-root--theme-light,
  11. .tw-root--theme-dark,
  12. .tw-c-background-base,
  13. .tw-c-background-alt,
  14. .tw-c-background-alt-2,
  15. .stream-chat,
  16. .chat-room {
  17.     background-color: transparent !important;
  18. }
  19.  
  20. /* ----------------------------------------
  21.  * Remove the header, scrollbar and footer section
  22.  * ---------------------------------------- */
  23. .stream-chat-header,
  24. .channel-leaderboard,
  25. .chat-input,
  26. .simplebar-track {
  27.     display: none !important;
  28. }
  29.  
  30. /* ----------------------------------------
  31.  * Remove notification border and background
  32.  * ---------------------------------------- */
  33.  
  34. .user-notice-line {
  35.   border-left: none;
  36. }
  37. .chat-line__replay-icon {
  38.   background-color: transparent;
  39. }
  40.  
  41. /* ----------------------------------------
  42.  * Chat Container Spacing
  43.  * ---------------------------------------- */
  44. .chat-list--default {
  45.     padding: 20px;
  46.     padding-bottom: 10px;
  47. }
  48. .chat-line__status,
  49. .chat-line__moderation,
  50. .chat-line__message {
  51.     padding: 6px 4px !important;
  52. }
  53.  
  54. .chat-line__message-highlight {
  55.   padding: 0;
  56. }
  57.  
  58. /* ----------------------------------------
  59.  * Chat Font Size, Color
  60.  * CSS-Based Outside Stroke: https://www.petercarrero.com/examples/stroke/
  61.  * ---------------------------------------- */
  62. .chat-line__status[data-a-target="chat-welcome-message"] {
  63.     display: none;
  64. }
  65. .chat-line__status,
  66. .chat-line__moderation,
  67. .chat-line__message,
  68. .user-notice-line,
  69. .channel-points-reward-line {
  70.     font-family: -apple-system, BlinkMacSystemFont, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo,MS\ Pゴシック, MS PGothic, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, sans-serif;
  71. }
  72. .chat-line__status,
  73. .chat-line__moderation,
  74. .chat-line__message {
  75.     font-size: 28px !important;
  76.     line-height: 32px !important;
  77.     letter-spacing: 1px !important;
  78. }
  79. .user-notice-line p,
  80. .channel-points-reward-line {
  81.     font-size: 20px !important;
  82.     line-height: 24px !important;
  83.     letter-spacing: 1px !important;
  84. }
  85. .chat-line__status,
  86. .chat-line__moderation,
  87. .chat-line__message {
  88.     color: #e7e7e7 !important;
  89. }
  90. a {
  91.     color: #0fa5e5 !important;
  92. }
  93. .chat-author__intl-login {
  94.     opacity: 1;
  95. }
  96.  
  97. /* ----------------------------------------
  98.  * Animation
  99.  * ---------------------------------------- */
  100.  
  101. @keyframes slide-in {
  102.   from {
  103.     transform: translateX(-100%);
  104.     opacity: 0;
  105.   }
  106. }
  107.  
  108. @keyframes slide-up {
  109.   0% {
  110.     transform: translateY(20px);
  111.   }
  112.   100% {
  113.     transform: translateY(0);
  114.   }
  115. }
  116.  
  117. .chat-line__status,
  118. .chat-line__moderation,
  119. .chat-line__message,
  120. .user-notice-line,
  121. .channel-points-reward-line {
  122.   transition: all .3s;
  123. }
  124.  
  125. /* ----------------------------------------
  126.  * Chat Stroke
  127.  * CSS-Based Outside Stroke: https://www.petercarrero.com/examples/stroke/
  128.  * ---------------------------------------- */
  129. .chat-author__display-name,
  130. .chat-author__intl-login,
  131. .user-notice-line,
  132. .channel-points-reward-line {
  133.     text-shadow:
  134.        -2px -2px #e7e7e7,
  135.        -2px -1px #e7e7e7,
  136.        -2px  0px #e7e7e7,
  137.        -2px  1px #e7e7e7,
  138.        -2px  2px #e7e7e7,
  139.        -1px -2px #e7e7e7,
  140.        -1px -1px #e7e7e7,
  141.        -1px  0px #e7e7e7,
  142.        -1px  1px #e7e7e7,
  143.        -1px  2px #e7e7e7,
  144.         0px -2px #e7e7e7,
  145.         0px -1px #e7e7e7,
  146.         0px  0px #e7e7e7,
  147.         0px  1px #e7e7e7,
  148.         0px  2px #e7e7e7,
  149.         1px -2px #e7e7e7,
  150.         1px -1px #e7e7e7,
  151.         1px  0px #e7e7e7,
  152.         1px  1px #e7e7e7,
  153.         1px  2px #e7e7e7,
  154.         2px -2px #e7e7e7,
  155.         2px -1px #e7e7e7,
  156.         2px  0px #e7e7e7,
  157.         2px  1px #e7e7e7,
  158.         2px  2px #e7e7e7;
  159. }
  160. .text-fragment,
  161. a {
  162.     -webkit-text-stroke: .5px #232323;
  163.     text-shadow:
  164.        -2px -2px #232323,
  165.        -2px -1px #232323,
  166.        -2px  0px #232323,
  167.        -2px  1px #232323,
  168.        -2px  2px #232323,
  169.        -1px -2px #232323,
  170.        -1px -1px #232323,
  171.        -1px  0px #232323,
  172.        -1px  1px #232323,
  173.        -1px  2px #232323,
  174.         0px -2px #232323,
  175.         0px -1px #232323,
  176.         0px  0px #232323,
  177.         0px  1px #232323,
  178.         0px  2px #232323,
  179.         1px -2px #232323,
  180.         1px -1px #232323,
  181.         1px  0px #232323,
  182.         1px  1px #232323,
  183.         1px  2px #232323,
  184.         2px -2px #232323,
  185.         2px -1px #232323,
  186.         2px  0px #232323,
  187.         2px  1px #232323,
  188.         2px  2px #232323;
  189. }
Add Comment
Please, Sign In to add comment