the lounge custom css

lounge.css

/* put this in the Settings->Appearance box of The Loung webirc */
/* font can be installed on win via choco install nerd-fonts-IBMPlexMono */

#input, span.from {
   font-family: Sofia Sans !important;
   background-color: light-grey;
}

span.content {
   font-family: Sofia Sans Light, Sofia Sans, Noto, Roboto, "IBM Plex Mono", Noto Sans;
}

#chat.colored-nicks {
  /* Original 12 colors */
  --c1: #fee327;   /* Bright yellow */
  --c2: #fdca54;   /* Golden yellow */
  --c3: #f6a570;   /* Peach */
  --c4: #f1969b;   /* Pink */
  --c5: #f08ab1;   /* Hot pink */
  --c6: #c78dbd;   /* Light purple */
  --c7: #927db6;   /* Purple */
  --c8: #5da0d7;   /* Blue */
  --c9: #00b3e1;   /* Cyan */
  --c10: #50bcbf;  /* Turquoise */
  --c11: #65bda5;  /* Sea green */
  --c12: #87bf54;  /* Lime green */

  --c13: #fed84d;  /* Lighter yellow */
  --c14: #fcc168;  /* Lighter golden */
  --c15: #f4b485;  /* Lighter peach */
  --c16: #f3a8ac;  /* Lighter pink */
  --c17: #f29ec0;  /* Lighter hot pink */
  --c18: #d1a1c7;  /* Lighter purple */
  --c19: #a391c0;  /* Lighter purple blue */
  --c20: #71aedd;  /* Lighter blue */
  --c21: #1abfe6;  /* Lighter cyan */
  --c22: #65c6c9;  /* Lighter turquoise */
  --c23: #79c7b2;  /* Lighter sea green */
  --c24: #98c96a;  /* Lighter lime */
  
  /* Slightly darker variants */
  --c25: #e5cc23;  /* Darker yellow */
  --c26: #e4b54c;  /* Darker golden */
  --c27: #dd9465;  /* Darker peach */
  --c28: #d8868b;  /* Darker pink */
  --c29: #d77ba0;  /* Darker hot pink */
  --c30: #b37eaa;  /* Darker purple */
  --c31: #8270a3;  /* Darker purple blue */
  --c32: #548fc1;  /* Darker blue */
}


#chat.colored-nicks .user.color-1  { color: var(--c1); }
#chat.colored-nicks .user.color-2  { color: var(--c2); }
#chat.colored-nicks .user.color-3  { color: var(--c3); }
#chat.colored-nicks .user.color-4  { color: var(--c4); }
#chat.colored-nicks .user.color-5  { color: var(--c5); }
#chat.colored-nicks .user.color-6  { color: var(--c6); }
#chat.colored-nicks .user.color-7  { color: var(--c7); }
#chat.colored-nicks .user.color-8  { color: var(--c8); }
#chat.colored-nicks .user.color-9  { color: var(--c9); }
#chat.colored-nicks .user.color-10 { color: var(--c10); }
#chat.colored-nicks .user.color-11 { color: var(--c11); }
#chat.colored-nicks .user.color-12 { color: var(--c12); }
#chat.colored-nicks .user.color-13 { color: var(--c13); }
#chat.colored-nicks .user.color-14 { color: var(--c14); }
#chat.colored-nicks .user.color-15 { color: var(--c15); }
#chat.colored-nicks .user.color-16 { color: var(--c16); }
#chat.colored-nicks .user.color-17 { color: var(--c17); }
#chat.colored-nicks .user.color-18 { color: var(--c18); }
#chat.colored-nicks .user.color-19 { color: var(--c19); }
#chat.colored-nicks .user.color-20 { color: var(--c20); }
#chat.colored-nicks .user.color-21 { color: var(--c21); }
#chat.colored-nicks .user.color-22 { color: var(--c22); }
#chat.colored-nicks .user.color-23 { color: var(--c23); }
#chat.colored-nicks .user.color-24 { color: var(--c24); }
#chat.colored-nicks .user.color-25 { color: var(--c25); }
#chat.colored-nicks .user.color-26 { color: var(--c26); }
#chat.colored-nicks .user.color-27 { color: var(--c27); }
#chat.colored-nicks .user.color-28 { color: var(--c28); }
#chat.colored-nicks .user.color-29 { color: var(--c29); }
#chat.colored-nicks .user.color-30 { color: var(--c30); }
#chat.colored-nicks .user.color-31 { color: var(--c31); }
#chat.colored-nicks .user.color-32 { color: var(--c32); }