Advertisement
S0N0S

S0N0S's Custom CSS for OBS Chat - 1440p Version

Jul 6th, 2015
5,709
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.16 KB | None | 0 0
  1. /*
  2.  
  3. S0N0S's Custom CSS for OBS Chat - 1440p Version
  4.  
  5. URL: http://nightdev.com/hosted/obschat/index.html?style=clear&channel=USERNAME
  6. Width: 640
  7. Height: 224
  8.  
  9. NOTE: Looks best with 4-12px of spacing on all sides of chat box, depending on your resolution.
  10.  
  11. */
  12.  
  13. /* Hide scrollbar */
  14. ::-webkit-scrollbar {
  15.   visibility: hidden;
  16. }
  17.  
  18. /* Hide background */
  19. body {
  20.     color: transparent;
  21. }
  22.  
  23. /* Increase size & weight of font to display clearly when downscaled to < 1440p */
  24. /* Add subtle text shadows to make text standout from background */
  25. .chat_line {
  26.     font-size: 24px;
  27.     line-height: 28px;
  28.     margin-right: 0px;
  29.     background-color: rgba(127, 127, 127, 0.00);
  30. }
  31. .chat_line .nick {
  32.     text-transform: capitalize;
  33.     color: #000;
  34.     font-weight: bold;
  35.     line-height: 28px;
  36.     text-shadow: 0px 0px 2px #666, 2px 2px 0px #000;
  37. }
  38. .chat_line .message {
  39.     color: #fff;
  40.     font-weight: bold;
  41.     line-height: 28px;
  42.     text-shadow: 0px 0px 2px #666, 2px 2px 0px #000;
  43. }
  44.  
  45. /* Move chat badges to compensate for adjusted line-height */
  46. .chat_line .tag {
  47.     margin-bottom: 5px!important;
  48. }
  49.  
  50. #chat_box .clear{
  51.     display: block;
  52. }
  53.  
  54. /* Disable BTTV emotes */
  55. img[class^="emoticon bttv-emo-"], img[class*="emoticon bttv-emo-"] {
  56.     display: none !important;
  57. }
  58.  
  59. /* Transparency gradient to hide clipped chat lines */
  60. #chat_box {
  61.   -webkit-mask-image: -webkit-gradient(linear, left 10%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  62.   -webkit-mask-image: -webkit-gradient(linear, left 20%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  63. }
  64.  
  65. /* Optimize username colors for clarity on bright & dark backgrounds */
  66. span[style*='color: rgb(0, 0, 255);'] {color: rgb(64, 107, 227)!important;}
  67. span[style*='color: rgb(255, 0, 0);'] {color: rgb(227, 64, 64)!important;}
  68. span[style*='color: rgb(0, 128, 0);'] {color: rgb(64, 192, 64)!important;}
  69. span[style*='color: rgb(178, 34, 34);'] {color: rgb(192, 64, 64)!important;}
  70. span[style*='color: rgb(0, 0, 0);'] {color: rgb(255, 255, 255)!important;}
  71. span[style*='color: \#555;'] {color: rgb(255, 255, 255)!important;}
  72. span[style*='color: rgb(138, 43, 226);'] {color: rgb(155, 65, 240)!important;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement