Awesumness

NightDev OBS Chat CSS

Dec 2nd, 2021
886
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Dynamically scaling chat
  2.  * For use with https://nightdev.com/kapchat/
  3.  *
  4.  * Main file – full replace.
  5.  * This should override all CSS in the default clear theme.
  6.  */
  7. html {
  8.   font-size: 20px;
  9.   /* Everything scales with this font-size.
  10.      * Default if not manually set is 16px.    
  11.      * Common values are 20px, 24px, 36px 48px.
  12.      * Usage of `em` in font-size refers to the parent's font-size as 1em.
  13.      * Usage of `rem` refers to the root em value ( this ) instead.
  14.      * Use `rem` when scaling child objects where possible.
  15.      *
  16.      * You could potentially just use em values here
  17.      * if you only cared about "scale" and not about exact font values.
  18.      * For example, 2.0em would be 200% scale on everything,
  19.      * but is the same as setting it to 32px ( 16px base. )
  20.      */
  21.   width: 100%;
  22.   height: 100%;
  23. }
  24. body {
  25.   overflow: hidden;
  26.   margin: 0.313rem;
  27. }
  28. #chat_box {
  29.   background-color: transparent;
  30.   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  31.   /* This font-size changes all child element em bases
  32.      * to 0.813 of the root, and is the reason why
  33.      * we use `rem` everywhere.
  34.      * Otherwise everything in the lines themselves
  35.      * would scale at only 81% of native.
  36.      */
  37.   font-size: 0.813rem;
  38.   font-style: normal;
  39.   font-variant: normal;
  40.   font-weight: normal;
  41.   position: absolute;
  42.   overflow: hidden;
  43.   color: #FFF;
  44.   border-radius: 0.250rem;
  45.   width: calc(100% - 0.625rem);
  46. }
  47. #chat_box.dark {
  48.   background: rgba(0, 0, 0, 0.3);
  49.   color: #fff;
  50. }
  51. #chat_box.light {
  52.   background: rgba(255, 255, 255, 0.3);
  53.   color: #000;
  54. }
  55. .nick {
  56.   font-weight: bold;
  57. }
  58.  
  59. .tag {
  60.   display: inline-block;
  61.   background-position: 0 center;
  62.   background-repeat: no-repeat;
  63.   background-size: contain;
  64.   height: 1.125rem;
  65.   min-width: 1.125rem;
  66.   padding: 0;
  67.   margin-right: 0.188rem;
  68.   margin-bottom: -0.063rem;
  69.   text-indent: -624.938rem;
  70.   border-radius: 0.125rem;
  71.   overflow: hidden;
  72.   /* Aligns with the vertical center of the line */
  73.   vertical-align: sub;
  74. }
  75. .chat_line {
  76.   margin-left: 0.188rem;
  77.   margin-right: 0.188rem;
  78.   padding-top: 0.125rem;
  79.   padding-bottom: 0.188rem;
  80.   /* Avoids clipping by increasing line height */
  81.   line-height: 1.250rem;
  82. }
  83.  
  84. .chat_line > span {
  85.   /* Aligns all children with the vertical center of the line */
  86.   vertical-align: middle;
  87. }
  88. .chat_line .message {
  89.   word-wrap: break-word;
  90. }
  91. .chat_line .time_stamp {
  92.   display: none;
  93.   padding-right: 0.188rem;
  94. }
  95. .emoticon {
  96.   /*margin-bottom: -0.438rem;*/
  97.   /* Min-width/height are enforced to some scale of 18x18.
  98.      * Max-height is set to compensate for srcset scaling,
  99.      * else larger scales produce giant emoticons with 3x img scale
  100.      */
  101.   min-width: 28px;
  102.   min-height: 28px;
  103.   max-height: 28px;
  104.   /* Aligns with the vertical center of the line */
  105.   vertical-align: auto;
  106. }
  107. .cheermote {
  108.   width: auto;
  109.   max-height: 1.750rem;
  110. }
  111. /* Outside text stroke.  
  112.  * For use with https://nightdev.com/kapchat/
  113.  *
  114.  * For better readability through increased contrast.
  115.  */
  116. .chat_line {
  117.   /* You can't really increase the stroke size beyond 1px,
  118.      * so we're not using scaling em values.
  119.      * If you want a different stroke color,
  120.      * remember to replace all 4 instances of #000.
  121.      */
  122.   text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0 #000, 1px 1px 0 #000;
  123.   /* Add letter spacing in an attempt to
  124.      * combat the crowding created by text-shadow    
  125.      */
  126.   letter-spacing: 0.060rem;
  127. }
  128. #chat_box .chat_line {
  129.   background-color: rgba(60, 60, 60, .8);
  130.   border-top: 1px solid rgba(255, 255, 255, .1);
  131.   border-bottom: 1px solid rgba(0, 0, 0, .5);
  132.   /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;*/
  133.   padding: 2px 5px
  134. }
  135. /*#chat_box .chat_line:nth-child(2n) {
  136.   background-color: rgba(30, 30, 30, .8)!important
  137. }*/
  138. #chat_box .chat_line:first-child {
  139.   border-top-right-radius: 4px;
  140.   border-top-left-radius: 4px
  141. }
  142. #chat_box .chat_line:last-child {
  143.   border-bottom-right-radius: 4px;
  144.   border-bottom-left-radius: 4px
  145. }
RAW Paste Data