thejayduck / sazuku.chat.css

@import url("https://db.onlinewebfonts.com/c/429d7be4109ed5e4f17b52951d6f2215?family=Nirmala+UI+Bold"); @import url("https://db.onlinewebfonts.com/c/9cb830e3472ffe12fb4943f3ed80832f?family=Segoe+Print+Bold"); @import url("https://db.onlinewebfonts.com/c/0f7d210c713012706b12080e8d2856c4?family=Tahoma+W01+Regular"); /* Official Tier Colors tier 1: rgba(30,136,229,1) tier 2: rgba(0,229,255,1) tier 3: rgb(29, 233, 182) tier 4: rgb(255, 202, 40) tier 5: rgb(245, 124, 0) tier 6: rgb(233, 30, 99) tier 7: rgb(230, 33, 23) */ * { /* Name Plate Colors */ --owner: #de8618; --moderator: #39addd; --member: #ba1c1d; --normal: #84a4a4; /* Donation Tiers */ --tier1: #2578c2; --tier2: #00e6ff; --tier3: #38f1c3; --tier4: #fecb2f; --tier5: #f89631; --tier6: #ef3c79; --tier7: #b41a23; /* 7+ Same */ --gift: #b247ba; --membership-header: #73c5af; --membership-content: #447266; --font-color: #ded4d4; --font-color-dark: #121212; /* Fonts */ --segoe: "Segoe Print Bold"; --nirmala: "Nirmala UI Bold"; --tahoma: "Tahoma W01 Regular"; --font-normal: 18px; /* --font-message: 20px; */ --font-subtext: 14px; /* Others */ --border: 18px; /* Badges */ --badge-scale: scale(2); --badge-rotate: rotate(10deg); --badge-shadow: drop-shadow(2px 2px 2px hsla(0, 0%, 0%, 0.6)); /* Padding */ --padding-mini: 8px; --padding-small: 10px; --padding-normal: 12px; --padding-large: 14px; --padding-huge: 16px; --padding-megaS: 20px; --padding-mega: 25px; --padding-megaL: 35px; /* The badges are resized to 64x64, converted to webp and then base64 string is generated */ /* TODO move to own CSS file */ --owner-badge: url("data:image/octet-stream;base64,UklGRpQEAABXRUJQVlA4WAoAAAAQAAAAPwAAPwAAQUxQSOkBAAABkHRtk2k7dX1j27bnN5nb5tDOD7gexbZt27Zt28buL9hV1ak9u6OImADK6Z67SpnYKMX0ufr9/fpaEWr+HQDO549M/lv412X+v+JpszMb+xjkQvCylIe4vhOn9oph8p4A8LmFrsAdsNm6hIUAguFM3R8A8LGVKgP82/qapPkOAPYzlT79gw+tFFXfC7AmRpY8z+HfdUzS/RC8H5ogmgzpzyaiimsdQtMZ2hKGYFy8oMYHEdbHCKpcAduGS2cQjI9lYrdDHnTmKl8B+60q18YxcOPjw5oFClyMD6t8Dfzd3Fy1rxzc0eL/xO2HNugd0vYDhFuIj38kAE6XJKJ+0L8sTkTtv0GaLqBtIpwqRbnueEAaUccvELeTjJbhZI3+zsezij0/QfyjrqSPk+HjO3h98gvy5wUkjX4qjB4hafL7KEwU0dEo9JVNisCPxrI+EXidV1Y/AkdJnvjD3kwFXbY3RLPIXNBUM8zc1yKaFHNXSVvwu7VFqrgL1oaqaKG1FN0oY66grrmxR6Qv/8vWJg+57thK9UCbbLXykWrKlfXRytT9BB8Vv1vaSD4TT1ga4IUGGXpXzE+hzEVLlq1YtWbdhk1btu3YvXf/wcNHj588cezIoQP79uzasXXzxvVrV69cvnTxvC6UgxwAVlA4IIQCAACwEQCdASpAAEAAPiEOhkIhhr9FmQYAgS2AGb548kPzz8dv1u6HzVzt1+NeYG8G/437d+AA/Q//UboD9RP1y98z0Afo1+M3yAfzL+k+kB7AHoAfsZ6nX96/YT4CP2H/cr4Dv1l//j8JUTSif4w2i8tuyy9JRFwKkeFxqIQS3hBY/kJXylykglcvIAZrfKU5Xo/HEKh9Q2AA/vgof///mNdpBEkPGEiYHQdUEfts6MjF7XjkBIJBYe27YDZJD///RF14vbNdFzJ+LS3jaTCBUQaT2+xP6sTGL+Gdpg9omV1py+GljeySFXbWcTKrxQG44h4DCryP23y2cJv//mFL6NhP4+k53/h0PHHNYLnG2aTvPlEQf/b31OvkDS6TZZ+Ip4Shoj9EHle9fMBnZHYbvILptJjyfpzubcFfT81Vl5fjHMVeePp3BNZ+j6alHmevc4omVwS/4fsL3kSv/r1uOxf/9L/zBxGr78F3/ymk/+LOS0oRRUNuGc2iW3R+rAyYBQoPxevwk6qmQVAzGkcutJIwLxi+PQ951JH71R7EW9c5SHte/+6Adf3xBVTMDsigAiGGhEnZGHhtbXwF0AHwp1EHakijSnUJYwrYSUizGRRQEoIIYRafZb5/xeP/Md5OppfE0lAswJWBpvpSLniMX/khfZwb//6kvK1Mt+//9yJNWVYqTL1LG/pCqZ/7W/ZH8quBWvcR6kJnUnO5P1Dt2R4ACgbgS2HD5EtqasS3yNChWdz5Hjj8A7aNmPjot7UrXHpYHdBccTIfiF8TyuJuTZGbiCA6j6v19KkjZrvIRKGjLY///KXaotWFxRaZaJblj+Sc0kyGGiK5qGFGs8lfe8BS3AAAAA=="); --superchat-1: url("data:image/octet-stream;base64,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"); --superchat-2: url("data:image/octet-stream;base64,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"); } body, html { background: transparent !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color-scheme: light dark; } yt-live-chat-server-error-message, yt-live-chat-renderer #panel-pages, yt-live-chat-action-panel-renderer, yt-live-chat-header-renderer, yt-live-chat-banner-manager, yt-live-chat-viewer-engagement-message-renderer, yt-live-chat-item-list-renderer::-webkit-scrollbar, yt-live-chat-author-badge-renderer:is([type="moderator"], [type="verified"]), yt-live-chat-text-message-renderer #author-photo, yt-live-chat-text-message-renderer #before-content-buttons, yt-live-chat-paid-message-renderer #creator-heart-button, yt-live-chat-paid-message-renderer #action-buttons, yt-live-chat-paid-message-renderer #gradient-container, yt-live-chat-item-list-renderer #gift-message-content, yt-live-chat-renderer #ticker, yt-live-chat-mode-change-message-renderer, yt-live-chat-paid-sticker-renderer #lower-bumper, /* Message that shows milestone for a type of donation from a viewer. * / #menu, /* Triple dot menu, when a message is hovered */ #leaderboard-badge.yt-live-chat-paid-message-renderer, ytd-sponsorships-live-chat-header-renderer .rhs-image, ytd-sponsorships-live-chat-gift-redemption-announcement-renderer, yt-live-chat-paid-message-renderer #content:has(#message.sf-hidden) /* Hides message content div if the content is marked as hidden */ { display: none !important; padding: 0 !important; margin: 0 !important; } yt-live-chat-renderer { background: transparent !important; color: #000 !important; font-family: var(--tahoma) !important; font-size: var(--font-normal) !important; } yt-live-chat-item-list-renderer { scrollbar-width: none !important; overflow: hidden !important; } /* Base bubble style */ yt-live-chat-text-message-renderer { display: flex !important; flex-direction: row !important; align-items: flex-start !important; background: transparent !important; margin: 0px var(--padding-huge) !important; padding: 2px var(--padding-large) !important; max-width: 90% !important; position: relative; animation: bounceInView 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; transform-origin: bottom left; } /* Shards / Jewels etc */ yt-gift-message-view-model #gift-message-v2 { display: flex !important; flex-direction: row !important; align-items: center !important; gap: var(--padding-mini) !important; max-width: 90%; background-color: var(--gift) !important; border-radius: var(--border) !important; padding: var(--padding-small) var(--padding-huge) !important; overflow: visible !important; contain: none !important; clip-path: none !important; } yt-gift-message-view-model #content { display: flex !important; flex-direction: row !important; align-items: center !important; gap: var(--padding-mini) !important; flex: 1 !important; background-color: transparent !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important; contain: none !important; clip-path: none !important; } t-gift-message-view-model #author-photo { display: block !important; flex-shrink: 0 !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; } /* Name + subtext grouped left */ yt-gift-message-view-model #author-name-v2, yt-gift-message-view-model #message-v2 { display: inline !important; vertical-align: baseline !important; white-space: nowrap !important; } yt-gift-message-view-model #author-name-v2 { font-family: var(--segoe) !important; font-size: var(--font-normal) !important; font-weight: 700 !important; color: #ffffff !important; } yt-gift-message-view-model #message-v2 { font-family: var(--tahoma) !important; font-size: var(--font-normal) !important; color: rgba(255, 255, 255, 0.8) !important; } /* Gift image pushed right */ yt-gift-message-view-model #gift-image { display: inline-flex !important; width: 28px !important; height: 28px !important; margin-left: auto !important; flex-shrink: 0 !important; transform: scale(1.4) !important; filter: none !important; } /* * Badges (e.g. moderator, member icons) */ /* Default badge setup */ yt-live-chat-author-chip #chat-badges, yt-live-chat-paid-message-renderer::after { position: absolute; right: 0; /* filter: var(--badge-shadow); */ /* filter: drop-shadow(0 0 0 #ded4d4) drop-shadow(1px 0 0 #ded4d4) drop-shadow(-1px 0 0 #ded4d4) drop-shadow(0 1px 0 #ded4d4) drop-shadow(0 -1px 0 #ded4d4); */ filter: drop-shadow(0 0 0 #200002) drop-shadow(1px 0 0 #200002) drop-shadow(-1px 0 0 #200002) drop-shadow(0 1px 0 #200002) drop-shadow(0 -1px 0 #200002); transform: var(--badge-rotate) var(--badge-scale); transform-origin: center; } /* ? Disabled, mostly experimental */ /* yt-live-chat-author-chip #chat-badges img, yt-live-chat-paid-message-renderer::after, yt-live-chat-text-message-renderer:has(.owner) #chat-badges::after { transform-origin: 70% 70%; animation: badgeWave 0.6s ease-out 0.2s 1 both; } */ yt-live-chat-paid-message-renderer::after, yt-live-chat-text-message-renderer:has(.owner) #chat-badges::after { content: ""; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; width: 18px; height: 18px; } /* Paid Message Specific Properties */ yt-live-chat-paid-message-renderer::after { top: 0; right: 10px; z-index: 999999 !important; } yt-live-chat-text-message-renderer #chat-badges { top: -5px; } /* Owner Badge */ yt-live-chat-text-message-renderer:has(.owner) #chat-badges::after { background-image: var(--owner-badge); vertical-align: middle; } /* Disables background color behind member badge caused by nameplate */ yt-live-chat-author-chip #chat-badges yt-live-chat-author-badge-renderer[type="member"] { background-color: transparent !important; } yt-live-chat-author-badge-renderer img { border-radius: 4px; } /* Author Name Plate */ yt-live-chat-text-message-renderer #author-name { /* Default Author Nameplate */ background-color: var(--normal) !important; color: var(--font-color) !important; margin-bottom: 2px; padding: 0 var(--padding-large) !important; border-radius: var(--border) !important; transform-origin: 0% 45%; transform: rotate(-7deg); position: absolute; top: -8px; left: -10px; z-index: 100 !important; } #author-name { font-family: var(--segoe) !important; font-size: var(--font-normal) !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; max-width: 160px !important; } /* Long name case */ /* yt-live-chat-text-message-renderer #author-name::after { content: "hellofoobarbazthyp"; } */ /* * Author Type Name Plates */ yt-live-chat-text-message-renderer #author-name.owner { background-color: var(--owner) !important; } yt-live-chat-text-message-renderer #author-name.moderator { background-color: var(--moderator) !important; } yt-live-chat-text-message-renderer #author-name.member { background-color: var(--member) !important; } /* Normal Message Wrapper */ yt-live-chat-text-message-renderer #content { position: relative !important; overflow: visible !important; display: flex !important; flex-direction: column !important; gap: 2px; margin-top: var(--padding-mega) !important; padding: var(--padding-megaS) var(--padding-megaL); padding-top: 0 !important; border-radius: var(--border) !important; min-width: 120px !important; background: #ded4d4 !important; padding-bottom: var(--padding-normal); } /* Message Text */ #message { font: var(--tahoma); font-size: var(--font-normal) !important; font-weight: bold !important; color: #5a4c4d !important; word-break: break-word; line-height: normal !important; } /* Links in messages */ #message a { color: #5a4c4d !important; } /* * Membership Notification */ yt-live-chat-membership-item-renderer { font-family: var(--segoe); margin-bottom: var(--padding-normal) !important; } ytd-sponsorships-live-chat-gift-purchase-announcement-renderer { font-family: var(--segoe); margin-bottom: 0 !important; padding-top: var(--padding-small); padding-top: var(--padding-small); } yt-live-chat-paid-sticker-renderer #chat-badges, yt-live-chat-membership-item-renderer #chat-badges, yt-live-chat-paid-message-renderer #chat-badges, ytd-sponsorships-live-chat-gift-purchase-announcement-renderer #chat-badges { display: inline-flex !important; vertical-align: middle !important; position: static !important; margin: 0 !important; transform: scale(1.4); /* The backdrop shadow has to be explicity disabled due to default chat-badge setup */ filter: none !important; } yt-live-chat-membership-item-renderer #author-name, ytd-sponsorships-live-chat-gift-purchase-announcement-renderer #author-name { display: inline-block !important; vertical-align: middle !important; margin-right: var(--padding-mini) !important; color: #ffffff !important; font-size: var(--font-normal) !important; font-weight: 700 !important; } yt-live-chat-membership-item-renderer #card { border-radius: var(--border) !important; overflow: hidden !important; background-color: transparent !important; box-shadow: none !important; border: none !important; } /* Header */ yt-live-chat-membership-item-renderer #header, ytd-sponsorships-live-chat-header-renderer #header { /* background-color: var(--membership-header) !important; */ margin: 0 !important; padding: var(--padding-small) var(--padding-huge) !important; font-family: var(--nirmala) !important; border-radius: 0 !important; } yt-live-chat-author-chip:has(.owner), #author-name.owner { background-color: transparent !important; } /* Message in gifted subs header, ignores the font-family above. */ ytd-sponsorships-live-chat-header-renderer #primary-text { font-family: var(--nirmala) !important; font-size: var(--font-subtext); } /* Membership image */ ytd-sponsorships-live-chat-header-renderer #header > yt-img-shadow { display: block !important; transform: scale(1.2); /* position: absolute !important; */ /* right: 0; */ /* width: 128px; height: 128px; */ /* transform: translateY(40%); */ } ytd-sponsorships-live-chat-header-renderer #header > yt-img-shadow #img { object-fit: contain; } /* Content */ yt-live-chat-membership-item-renderer #content { /* background-color: var(--membership-content) !important; */ color: #ffffff !important; padding: var(--padding-mini) var(--padding-mega) !important; border-radius: 0 !important; } yt-live-chat-membership-item-renderer #header-subtext, ytd-sponsorships-live-chat-gift-purchase-announcement-renderer #primary-text { /* color: #e0f2f1 !important; */ color: #fff !important; font-size: var(--font-subtext) !important; } yt-live-chat-membership-item-renderer #message { font-family: var(--tahoma); color: #ffffff !important; font-size: var(--font-normal) !important; } /* Badges */ yt-live-chat-text-message-renderer #chat-badges { display: inline-flex !important; gap: 4px; margin-left: var(--padding-mini); } /* * Superchat Notification */ yt-live-chat-paid-message-renderer #purchase-amount-column { margin-left: auto !important; } yt-live-chat-paid-message-renderer #header-content-primary-column { padding-right: 0 !important; } yt-live-chat-paid-sticker-renderer #author-name, yt-live-chat-paid-message-renderer #author-name { margin: 0 var(--padding-mini) 0 0 !important; } yt-live-chat-paid-message-renderer, yt-live-chat-membership-item-renderer { overflow: visible !important; contain: none !important; margin: 0px var(--padding-huge) !important; padding: var(--padding-small) var(--padding-large) !important; position: relative; /* max-width: 75%; */ } yt-live-chat-paid-message-renderer #author-photo, yt-live-chat-membership-item-renderer #author-photo { margin-right: var(--padding-mini) !important; } yt-live-chat-membership-item-renderer #author-name, yt-live-chat-paid-message-renderer #author-name, yt-live-chat-paid-message-renderer #message { color: white !important; font-size: var(--font-normal) !important; min-width: 20px !important; max-width: max-content !important; white-space: normal !important; } yt-live-chat-paid-message-renderer #author-name { font-family: var(--segoe) !important; } yt-live-chat-paid-message-renderer #card { position: relative !important; overflow: visible !important; contain: none !important; border-radius: var(--border) !important; } yt-live-chat-paid-message-renderer { width: max-content; max-width: fit-content; min-width: 300px; } yt-live-chat-paid-message-renderer, yt-live-chat-paid-message-renderer #card, yt-live-chat-paid-message-renderer #header, yt-live-chat-paid-message-renderer #header-content, yt-live-chat-paid-message-renderer #header-content-primary-column, yt-live-chat-paid-message-renderer #purchase-amount-column { overflow: visible !important; contain: none !important; clip-path: none !important; } yt-live-chat-paid-message-renderer #purchase-amount { /* Temp */ position: absolute !important; border: 2px solid #200002; transform: rotate(7deg); top: -20px; right: -40px; background-color: var(--tier1); filter: brightness(140%); padding: 0px var(--padding-megaS); border-radius: var(--border) !important; color: #fff !important; /* padding: 4px 5px !important; */ font-family: var(--tahoma) !important; font-size: var(--font-normal) !important; font-weight: bold !important; /* Layering & Shadow */ z-index: 100 !important; } yt-live-chat-paid-message-renderer #card, ytd-sponsorships-live-chat-header-renderer #header { border-radius: var(--border) !important; width: auto; } yt-live-chat-paid-message-renderer #content { font-family: var(--tahoma) !important; width: auto; padding: var(--padding-mini) var(--padding-mega) !important; } /* --- TIER 1: Blue ($1 - $5) --- */ /* rgba(30,136,229,1) */ yt-live-chat-paid-message-renderer[style*="30, 136, 229"], yt-live-chat-paid-message-renderer[style*="30,136,229"] { /* Header */ --yt-live-chat-paid-message-header-background-color: var(--tier1) !important; /* Body */ --yt-live-chat-paid-message-primary-color: var(--tier1) !important; --yt-live-chat-paid-message-secondary-color: var(--tier1) !important; } yt-live-chat-paid-message-renderer[style*="30,136,229"] #header, yt-live-chat-paid-message-renderer[style*="30, 136, 229"] #header, yt-live-chat-paid-message-renderer[style*="30,136,229"] #content, yt-live-chat-paid-message-renderer[style*="30, 136, 229"] #content, yt-live-chat-paid-message-renderer[style*="30,136,229"] #purchase-amount, yt-live-chat-paid-message-renderer[style*="30, 136, 229"] #purchase-amount { background-color: var(--tier1) !important; color: #ffffff !important; } /* Badge */ /* TODO enable when Sazu finishes working on sprites */ /* yt-live-chat-paid-message-renderer[style*="30,136,229"]::after, yt-live-chat-paid-message-renderer[style*="30, 136, 229"]::after { background-image: var(--superchat-1); } */ /* --- TIER 2: Cyan ($5 - $10) --- */ /* rgba(0,229,255,1) */ yt-live-chat-paid-message-renderer[style*="0, 229, 255"], yt-live-chat-paid-message-renderer[style*="0,229,255"] { --yt-live-chat-paid-message-header-background-color: var(--tier2) !important; --yt-live-chat-paid-message-primary-color: var(--tier2) !important; --yt-live-chat-paid-message-secondary-color: var(--tier2) !important; } yt-live-chat-paid-message-renderer[style*="0,229,255"] #header, yt-live-chat-paid-message-renderer[style*="0, 229, 255"] #header, yt-live-chat-paid-message-renderer[style*="0,229,255"] #content, yt-live-chat-paid-message-renderer[style*="0, 229, 255"] #content, yt-live-chat-paid-message-renderer[style*="0,229,255"] #purchase-amount, yt-live-chat-paid-message-renderer[style*="0, 229, 255"] #purchase-amount { background-color: var(--tier2) !important; color: #000000 !important; } /* Badge */ /* yt-live-chat-paid-message-renderer[style*="0,229,255"]::after, yt-live-chat-paid-message-renderer[style*="0, 229, 255"]::after { background-image: var(--superchat-2); } */ /* --- TIER 3: Green ($10 - $20) --- */ /* rgb(29, 233, 182) */ yt-live-chat-paid-message-renderer[style*="29, 233, 182"], yt-live-chat-paid-message-renderer[style*="29,233,182"] { --yt-live-chat-paid-message-header-background-color: var(--tier3) !important; --yt-live-chat-paid-message-primary-color: var(--tier3) !important; } yt-live-chat-paid-message-renderer[style*="29, 233, 182"] #header, yt-live-chat-paid-message-renderer[style*="29,233,182"] #header, yt-live-chat-paid-message-renderer[style*="29, 233, 182"] #content, yt-live-chat-paid-message-renderer[style*="29,233,182"] #content, yt-live-chat-paid-message-renderer[style*="29, 233, 182"] #purchase-amount, yt-live-chat-paid-message-renderer[style*="29,233,182"] #purchase-amount { background-color: var(--tier3) !important; color: #000000 !important; } /* --- TIER 4: Yellow ($20 - $50) --- */ /* rgb(255, 202, 40) */ yt-live-chat-paid-message-renderer[style*="255, 202, 40"], yt-live-chat-paid-message-renderer[style*="255,202,40"] { --yt-live-chat-paid-message-header-background-color: var(--tier4) !important; --yt-live-chat-paid-message-primary-color: var(--tier4) !important; } yt-live-chat-paid-message-renderer[style*="255, 202, 40"] #header, yt-live-chat-paid-message-renderer[style*="255,202,40"] #header, yt-live-chat-paid-message-renderer[style*="255, 202, 40"] #content, yt-live-chat-paid-message-renderer[style*="255,202,40"] #content, yt-live-chat-paid-message-renderer[style*="255, 202, 40"] #purchase-amount, yt-live-chat-paid-message-renderer[style*="255,202,40"] #purchase-amount { background-color: var(--tier4) !important; color: #000000 !important; } /* --- TIER 5: Orange ($50 - $100) --- */ /* rgb(245, 124, 0) */ yt-live-chat-paid-message-renderer[style*="245, 124, 0"], yt-live-chat-paid-message-renderer[style*="245,124,0"] { --yt-live-chat-paid-message-header-background-color: var(--tier5) !important; --yt-live-chat-paid-message-primary-color: var(--tier5) !important; } yt-live-chat-paid-message-renderer[style*="245, 124, 0"] #header, yt-live-chat-paid-message-renderer[style*="245,124,0"] #header, yt-live-chat-paid-message-renderer[style*="245, 124, 0"] #content, yt-live-chat-paid-message-renderer[style*="245,124,0"] #content, yt-live-chat-paid-message-renderer[style*="245, 124, 0"] #purchase-amount, yt-live-chat-paid-message-renderer[style*="245,124,0"] #purchase-amount { background-color: var(--tier5) !important; color: #ffffff !important; } /* --- TIER 6: Magenta ($100 - $200) --- */ /* rgb(233, 30, 99) */ yt-live-chat-paid-message-renderer[style*="233, 30, 99"], yt-live-chat-paid-message-renderer[style*="233,30,99"] { --yt-live-chat-paid-message-header-background-color: var(--tier6) !important; --yt-live-chat-paid-message-primary-color: var(--tier6) !important; } yt-live-chat-paid-message-renderer[style*="233, 30, 99"] #header, yt-live-chat-paid-message-renderer[style*="233,30,99"] #header, yt-live-chat-paid-message-renderer[style*="233, 30, 99"] #content, yt-live-chat-paid-message-renderer[style*="233,30,99"] #content, yt-live-chat-paid-message-renderer[style*="233, 30, 99"] #purchase-amount, yt-live-chat-paid-message-renderer[style*="233,30,99"] #purchase-amount { background-color: var(--tier6) !important; color: #ffffff !important; } /* --- TIER 7: Red ($200+) --- */ /* rgb(230, 33, 23) */ yt-live-chat-paid-message-renderer[style*="230, 33, 23"], yt-live-chat-paid-message-renderer[style*="230,33,23"] { --yt-live-chat-paid-message-header-background-color: var(--tier7) !important; --yt-live-chat-paid-message-primary-color: var(--tier7) !important; } yt-live-chat-paid-message-renderer[style*="230, 33, 23"] #header, yt-live-chat-paid-message-renderer[style*="230,33,23"] #header, yt-live-chat-paid-message-renderer[style*="230, 33, 23"] #content, yt-live-chat-paid-message-renderer[style*="230,33,23"] #content, yt-live-chat-paid-message-renderer[style*="230, 33, 23"] #purchase-amount, yt-live-chat-paid-message-renderer[style*="230,33,23"] #purchase-amount { background-color: var(--tier7) !important; color: #ffffff !important; } /* Animations */ @keyframes bounceInView { 0% { opacity: 0; transform: translate(-40px, 40px) scale(0.8); } 100% { opacity: 1; transform: translate(0, 0), scale(1); } } @keyframes badgeWave { 0% { transform: rotate(0deg); } 20% { transform: rotate(18deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } 80% { transform: rotate(-6deg); } 100% { transform: rotate(0deg); } }