HumbleDeer

My Twitch Styling

Apr 18th, 2021
875
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*Variables*/
  2. :root{
  3.   /*Colours can be a standard HEX code eg. #FFFFFF (white)*/
  4.   --pronoun-tag-bg: purple;
  5.   --pronoun-tag-txt: white;
  6.   --chat-alert-bg: rgba(50,50,255,0.75);
  7.   --chat-badge-bg: white;
  8.   --chat-emoji-size: 2.2rem;
  9.   --chat-paragraph-spacing: 5px;
  10. }
  11.  
  12. /*Chat paragraph separator appearance*/
  13. div.chat-line__message{
  14.   /*0px is to disable*/
  15.   border-bottom: 0px dotted purple;
  16. }
  17.  
  18. /*Probably not something you need to touch*/
  19. /*Add the font files from external sources*/
  20. @font-face {
  21.     font-family: 'OpenDyslexic';
  22.     src: url('https://discordstyles.github.io/discord-dyslexia/src/font/OpenDyslexic-Regular.woff');
  23.     font-style: normal;
  24.     font-weight: normal;
  25. }
  26. @font-face {
  27.     font-family: 'OpenDyslexic';
  28.     src: url('https://discordstyles.github.io/discord-dyslexia/src/font/OpenDyslexic-Italic.woff');
  29.     font-style: italic;
  30.     font-weight: normal;
  31. }
  32. @font-face {
  33.     font-family: 'OpenDyslexic';
  34.     src: url('https://discordstyles.github.io/discord-dyslexia/src/font/OpenDyslexic-Bold.woff');
  35.     font-weight: bold;
  36.     font-style: normal;
  37. }
  38. @font-face {
  39.     font-family: 'OpenDyslexic';
  40.     src: url('https://discordstyles.github.io/discord-dyslexia/src/font/OpenDyslexic-BoldItalic.woff');
  41.     font-weight: bold;
  42.     font-style: italic;
  43. }
  44.  
  45. /*Text in the righthand chat box*/
  46. div.chat-line__message,
  47. div.chat-line__status,
  48. textarea,h3,h2,h1,p,input,li
  49. {
  50.   font-family: 'OpenDyslexic', 'Whitney', sans-serif !important;
  51. letter-spacing: 1px;
  52. font-weight: 500;
  53. }
  54.  
  55. /*Pronoun Tag modifications*/
  56. span.chat-badge.user-pronoun {
  57.   border:0;
  58.   background-color: var(--pronoun-tag-bg);
  59.   color: var(--pronoun-tag-txt);
  60.   padding:0;
  61. padding-left:4px;
  62. padding-right:4px;
  63. text-transform:lowercase;
  64. }
  65.  
  66.  div.chat-line__status{
  67.   background-color: var(--chat-alert-bg);
  68.   color:white;
  69. }
  70.  
  71. img.chat-badge {
  72.   background-color:var(--chat-badge-bg);
  73. }
  74.  
  75. img.chat-image {
  76.   height: var(--chat-emoji-size);
  77.   width: var(--chat-emoji-size);
  78. }
  79.  
  80. div.chat-line__message {
  81.   padding-top: var(--chat-paragraph-spacing);
  82.   padding-bottom: var(--chat-paragraph-spacing);
  83. }
  84. span.chat-author__display-name {
  85.   background-color:rgba(255,255,255,0.04);
  86.   padding:0;
  87.   padding-left:4px;
  88.   padding-right:4px;
  89.   border-radius:5px;
  90.   border: 1px dashed;
  91.   word-break: normal
  92. }
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×