SYSTEM UTILITY
LIVECHAT MODDER

Advanced CSS Injection Framework for Virtual Overlays
Target Platform
YouTube Live Chat
Build Version
v1.0-ALPHA
CONFIG TERMINAL

// PRESETS
Always Max Width
Use Bars Style
Chatbox BG Enabled
Bubble Max Width %86
Shape Preset
Message Spacing12
Chatbox Padding24
Chatbox Scale %100
Chatbox Radius28
Border Radius10
Border Width1
Border Color
Chatbox BG
BG Opacity0
LIVE RENDER UPLINK
COMPILED CSS BUFFER
/* ══════════════════════════════════════════
   AXEL ZEED CUSTOM LIVE CHAT GENERATOR v1.1
   ══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");


@keyframes chatIn { from { opacity:0;  } to { opacity:1; transform:none; } }
@keyframes chatOut { from { opacity:1; } to { opacity:0; } }

:root {
  --chat-bg: #102b36;
  --chat-text: #d9f7ff;
  --owner-bg: #2c3944;
  --owner-text: #f2f7ff;
  --owner-name: #ffd54a;
  --mod-bg: #202f5f;
  --mod-text: #eff4ff;
  --mod-name: #72a8ff;
  --member-bg: #123942;
  --member-text: #ecffff;
  --member-name: #44f2d1;
  --superchat-bg: #1a3d56;
  --superchat-text: #f6fbff;
  --superchat-header-bg: #25b8dc;
  --superchat-header-text: #03131a;
  --superchat-border: #7cecff;
  --supersticker-bg: #4d1d6c;
  --supersticker-text: #ffe8ff;
  --font-name: 'Orbitron', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-msg: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Transparent Background ── */
body {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
}

yt-live-chat-app,
yt-live-chat-renderer,
yt-live-chat-item-list-renderer {
  background: transparent !important;
}

yt-live-chat-renderer,
yt-live-chat-item-list-renderer,
yt-live-chat-item-list-renderer #item-scroller,
yt-live-chat-item-list-renderer #items {
  position: relative !important;
}

/* ── Overflow & Containment Fix ── */
yt-live-chat-text-message-renderer,
yt-live-chat-paid-message-renderer,
yt-live-chat-paid-sticker-renderer,
yt-live-chat-membership-item-renderer {
  overflow: visible !important;
  contain: none !important;
}

/* ── Hide Scrollbar & Chatbox Container ── */
yt-live-chat-item-list-renderer {
  overflow: hidden !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  border-radius: 28px !important;
  background: transparent !important;
  position: relative !important;
  isolation: isolate !important;
}
yt-live-chat-item-list-renderer #item-scroller {
  overflow: hidden !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: inherit !important;
  background: transparent !important;
  position: relative !important;
  z-index: 2 !important;
}
yt-live-chat-item-list-renderer #items {
  overflow: visible !important;
  transform: scale(1) !important;
  transform-origin: top left !important;
  width: 100.0000% !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Ensure every message bubble is above any chatbox background layer */
yt-live-chat-text-message-renderer,
yt-live-chat-paid-message-renderer,
yt-live-chat-paid-sticker-renderer,
yt-live-chat-membership-item-renderer {
  position: relative !important;
  z-index: 3 !important;
}



/* ── Hide UI Chrome ── */
yt-live-chat-header-renderer,
#panel-pages,
yt-live-chat-message-input-renderer,
yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-server-error-message,
yt-live-chat-banner-manager,
yt-live-chat-restricted-participation-renderer,
yt-live-chat-ticker-renderer,
yt-live-chat-moderation-message-renderer,
yt-live-chat-auto-mod-message-renderer,
div#reaction-control-panel-overlay.yt-live-chat-renderer,
div#separator.yt-live-chat-renderer,
#menu {
  display: none !important;
}

/* ── Timestamps ── */
yt-live-chat-text-message-renderer #timestamp,
yt-live-chat-paid-sticker-renderer #timestamp,
yt-live-chat-paid-message-renderer #timestamp {
  display: none !important;
  
}

/* ══════ Message Container ══════ */
yt-live-chat-text-message-renderer {
  background-color: var(--chat-bg) !important;
  
  border-radius: 10px !important;
  border: 1px solid #1e5d73 !important;
  filter: drop-shadow(0 0 12px #00f2ff) !important;
  width: min(86%, calc(100% - 24px)) !important; max-width: min(86%, calc(100% - 24px)) !important;
  box-sizing: border-box !important;
  margin: 22px 12px 12px 12px !important;
  margin-right: auto !important;
  padding: 12px 20px !important;
  position: relative !important;
  animation: chatIn 200ms ease-out !important; animation-fill-mode: both !important;
}



/* ── Counter-skew for content ── */


/* ── Content Container ── */
yt-live-chat-text-message-renderer #content,
yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-sticker-renderer #content {
  overflow: initial !important;
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

/* ── Avatar ── */
yt-img-shadow#author-photo.yt-live-chat-text-message-renderer,
yt-img-shadow#author-photo.yt-live-chat-text-message-renderer img,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo img,
yt-live-chat-paid-sticker-renderer #author-photo,
yt-live-chat-paid-sticker-renderer #author-photo img {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  margin-right: 14px !important;
  background: linear-gradient(135deg, rgba(0, 242, 255, 0.45), rgba(255, 255, 255, 0.15)) !important;
  overflow: hidden !important;
  object-fit: cover !important;
}

yt-live-chat-text-message-renderer #author-photo img,
yt-live-chat-paid-message-renderer #author-photo img,
yt-live-chat-paid-sticker-renderer #author-photo img {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
}

/* ── Author Name ── */
yt-live-chat-text-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-sticker-renderer #author-name {
  color: var(--chat-text) !important;
  font-family: var(--font-name) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  
  letter-spacing: 0.2px !important;
  
  text-shadow: 0px 1px 6px rgba(0,0,0,0.35) !important;
  
}



/* ── Badges ── */
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer,
yt-live-chat-paid-message-renderer yt-live-chat-author-badge-renderer,
yt-live-chat-paid-sticker-renderer yt-live-chat-author-badge-renderer {
  display: inline-block !important;
}

/* ── Message Text ── */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: var(--chat-text) !important;
  font-family: var(--font-msg) !important;
  font-size: 16px !important;
  line-height: 1.25em !important;
  text-align: left !important;
  letter-spacing: 0.2px !important;
  
  text-shadow: 0px 1px 6px rgba(0,0,0,0.35) !important;
}

yt-live-chat-text-message-renderer #message {
  display: block !important;
  width: 100% !important;
}

/* ── Deleted messages ── */
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-membership-item-renderer[is-deleted] {
  display: none !important;
}

/* ══════ Role Styles ══════ */

/* Owner */
yt-live-chat-text-message-renderer[author-type="owner"] {
  background-color: var(--owner-bg) !important;
  
}
yt-live-chat-text-message-renderer[author-type="owner"] #author-name,
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner {
  color: var(--owner-name) !important;
}
yt-live-chat-text-message-renderer[author-type="owner"] #message,
yt-live-chat-text-message-renderer[author-type="owner"] #message * {
  color: var(--owner-text) !important;
}

/* Moderator */
yt-live-chat-text-message-renderer[author-type="moderator"] {
  background-color: var(--mod-bg) !important;
  
}
yt-live-chat-text-message-renderer[author-type="moderator"] #author-name,
yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator {
  color: var(--mod-name) !important;
}
yt-live-chat-text-message-renderer[author-type="moderator"] #message,
yt-live-chat-text-message-renderer[author-type="moderator"] #message * {
  color: var(--mod-text) !important;
}

/* Member */
yt-live-chat-text-message-renderer[author-type="member"] {
  background-color: var(--member-bg) !important;
  
}
yt-live-chat-text-message-renderer[author-type="member"] #author-name,
yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member {
  color: var(--member-name) !important;
}
yt-live-chat-text-message-renderer[author-type="member"] #message,
yt-live-chat-text-message-renderer[author-type="member"] #message * {
  color: var(--member-text) !important;
}

/* ══════ SuperChat ══════ */
yt-live-chat-paid-message-renderer {
  background-color: var(--superchat-bg) !important;
  border-radius: 10px !important;
  border: 2px solid var(--superchat-border) !important;
  margin: 22px 12px 12px 12px !important;
  margin-right: auto !important;
  padding: 12px 20px !important;
  position: relative !important;
  filter: drop-shadow(0 0 12px #00f2ff) !important;
  width: min(86%, calc(100% - 24px)) !important; max-width: min(86%, calc(100% - 24px)) !important;
  box-sizing: border-box !important;
}
yt-live-chat-paid-message-renderer #header {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
yt-live-chat-paid-message-renderer #header #author-name,
yt-live-chat-paid-message-renderer #header #author-name * {
  color: var(--superchat-header-text) !important;
  font-family: var(--font-name) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}
yt-live-chat-paid-message-renderer #header yt-live-chat-author-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: var(--superchat-header-bg) !important;
}
yt-live-chat-paid-message-renderer #header #timestamp {
  color: var(--superchat-header-text) !important;
  opacity: 0.72 !important;
}
yt-live-chat-paid-message-renderer #content {
  display: block !important;
  width: 100% !important;
}
yt-live-chat-paid-message-renderer #content #message,
yt-live-chat-paid-message-renderer #content #message * {
  color: var(--superchat-text) !important;
  font-family: var(--font-msg) !important;
  font-size: 16px !important;
  line-height: 1.25em !important;
  text-align: left !important;
  letter-spacing: 0.2px !important;
  
  text-shadow: 0px 1px 6px rgba(0,0,0,0.35) !important;
}
div#menu.yt-live-chat-paid-message-renderer,
div#gradient-container.yt-live-chat-paid-message-renderer,
div#creator-heart-button.yt-live-chat-paid-message-renderer,
div#footer.yt-live-chat-paid-message-renderer,
div#action-buttons.yt-live-chat-paid-message-renderer {
  display: none !important;
}
yt-live-chat-paid-message-renderer #card,
yt-live-chat-paid-sticker-renderer #card {
  box-shadow: none !important;
}

/* ══════ Super Sticker ══════ */
yt-live-chat-paid-sticker-renderer {
  background-color: var(--supersticker-bg) !important;
  border-radius: 10px !important;
  margin: 22px 12px 12px 12px !important;
  margin-right: auto !important;
  padding: 12px 20px !important;
  position: relative !important;
  filter: drop-shadow(0 0 12px #00f2ff) !important;
  width: min(86%, calc(100% - 24px)) !important; max-width: min(86%, calc(100% - 24px)) !important;
  box-sizing: border-box !important;
}
yt-live-chat-paid-sticker-renderer #author-name {
  color: var(--supersticker-text) !important;
  font-family: var(--font-name) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}
yt-live-chat-paid-sticker-renderer #timestamp {
  color: var(--supersticker-text) !important;
  opacity: 0.72 !important;
}
yt-live-chat-paid-sticker-renderer #content {
  display: block !important;
  width: 100% !important;
}
yt-live-chat-paid-sticker-renderer #content #message,
yt-live-chat-paid-sticker-renderer #content #message * {
  color: var(--supersticker-text) !important;
  font-family: var(--font-msg) !important;
  font-size: 16px !important;
  line-height: 1.25em !important;
  text-align: left !important;
  letter-spacing: 0.2px !important;
  
  text-shadow: 0px 1px 6px rgba(0,0,0,0.35) !important;
}

/* ══════ Membership ══════ */
yt-live-chat-membership-item-renderer {
  background: linear-gradient(135deg, #0d7d7d, #4cf0d2) !important;
  border: 1px solid #9afcff !important;
  margin: 22px 12px 12px 12px !important;
  margin-right: auto !important;
  width: min(86%, calc(100% - 24px)) !important; max-width: min(86%, calc(100% - 24px)) !important;
  box-sizing: border-box !important;
}
yt-live-chat-membership-item-renderer #card {
  box-shadow: none !important;
}

/* ══════ Background Texture ══════ */


/* ══════ Brand Icon ══════ */


/* ══════ Extra Assets ══════ */


/* ══════ Emoji Size ══════ */
#message > img,
img.yt-live-chat-text-message-renderer {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0px 3px !important;
}

/* ══════ Misc Cleanup ══════ */
yt-live-chat-app {
  min-height: 0px;
  min-width: 0px;
  word-break: break-all;
}

.mention.style-scope {
  background-color: unset;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-membership-item-renderer a {
  text-decoration: none !important;
}

yt-live-chat-upsell-dialog-renderer {
  display: none;
}
Read Only Stream
Usage Instruction: Copy the Compiled Buffer > Open OBS Browser Source > Properties > Paste into "Custom CSS" box. Restart cache if needed. See DOCUMENTATION tab for full guide.