Just like Chatterino, kinda
Twitch Chat Alternate by flumiie
![Screenshot of Twitch Chat Alternate](https://userstyles.world/preview/13852/0.jpeg)
Details
Authorflumiie
LicenseNo License
Categorytwitch.tv
Created
Updated
Size10 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Don't forget to install 7TV & BTTV extension for a better twitch chat experience
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Twitch Chat Alternate
@namespace twitch.tv
@version 1.2.0.2
@description Alternating chat style for Twitch.TV. Don't forget to install 7TV & BTTV extension for a better twitch chat experience. Get "Twitch Pinky" for a whole site theming
@author flumiie
@preprocessor uso
@license CC0 - Public Domain
@homepageURL https://github.com/flumiie/Twitch-Chat-Alternate
@advanced dropdown font-face "Site Font" {
font-face-bahnscrift "Bahnschrift Light" <<<EOT Bahnschrift Light EOT;
font-face-productsans "Product Sans" <<<EOT Product Sans EOT;
font-face-meslolgs "MesloLGS NF" <<<EOT MesloLGS NF EOT;
font-face-default "Default" <<<EOT Inter EOT;
}
@advanced color odd-color "Odd Color" #38032c
@advanced color even-color "Even Color" #26031b
@advanced color first-time-chatter-color "First Time Message Color" #c832c815
@advanced color audio-only-chatter-color "Audio Only Message Color" #000
@advanced color subbed-part-color "Subbed Color" #ff1fc440
==/UserStyle== */
@-moz-document domain("twitch.tv") {
@font-face {
font-family: "Product Sans";
font-style: normal;
font-weight: 400;
src: local('Product Sans'), url(https://fonts.cdnfonts.com/s/13998/ProductSans-Regular.woff) format('woff')
}
*:not(.text-token) {
font-family: /*[[font-face]]*/, "Inter" !important;
}
/* Keeping the chat to use Twitch's font
* as some ascii text can sometimes be broken with custom fonts */
.text-token {
font-size: 12px;
font-family: "Inter" !important;
color: #ffb0f0;
}
/* Chat scrollable area */
section[data-test-selector="chat-room-component-layout"] .chat-scrollable-area__message-container,
.whispers .thread-message__message,
.video-chat__message {
margin-bottom: 1em;
}
/* Emote Menu Button - for Future Funk Theme */
.bttv-EmoteMenu-module__button-luW4x {
filter: hue-rotate(140deg);
}
#twilight-sticky-footer-root div {
margin: -1px 0;
}
.seventv-emote-set[data-v-f9258bfc] {
width: 275px;
}
.kNyuUv {
margin-right: 4rem;
}
/* Hype Train Timer */
.hype-train-progress-bar-info-view__timer {
color: #ffcaff !important;
}
.scrollbar-thumb {
background-color: #ffc0cb70 !important
}
/*7tv chat username*/
.seventv-chat-user .seventv-chat-user-username span span {
background: color-mix(in srgb, currentColor 17%, #ffffff15);
padding: 2px;
border-radius: 4px;
}
/*7tv emote token*/
.seventv-user-message:has(.emote-token) {
position: relative;
padding: 3px 0;
z-index: 1;
}
/*Chat alternate background*/
.chat-scrollable-area__message-container > div:nth-child(odd),
.seventv-chat-list > div:nth-child(odd),
.seventv-chat-list > li:nth-child(odd),
.fZajyj > div:nth-child(odd),
.fZajyj > li:nth-child(odd) {
background: /*[[odd-color]]*/
}
.chat-scrollable-area__message-container > div:nth-child(even),
.seventv-chat-list > div:nth-child(even),
.seventv-chat-list > li:nth-child(even),
.fZajyj > div:nth-child(even),
.fZajyj > li:nth-child(even) {
background: /*[[even-color]]*/
}
.seventv-chat-list span div:has([data-highlight-label="First Message"]) {
background: /*[[first-time-chatter-color]]*/;
}
.bQEtql:has(img[alt="Subscriber"]),
.bQEtql:has(img[alt="2-Month Subscriber"]),
.bQEtql:has(img[alt="3-Month Subscriber"]),
.bQEtql:has(img[alt="4-Month Subscriber"]),
.bQEtql:has(img[alt="5-Month Subscriber"]),
.bQEtql:has(img[alt="6-Month Subscriber"]),
.bQEtql:has(img[alt="7-Month Subscriber"]),
.bQEtql:has(img[alt="8-Month Subscriber"]),
.bQEtql:has(img[alt="9-Month Subscriber"]),
.bQEtql:has(img[alt="10-Month Subscriber"]),
.bQEtql:has(img[alt="11-Month Subscriber"]),
.bQEtql:has(img[alt="1-Year Subscriber"]),
.bQEtql:has(img[alt="1.5-Year Subscriber"]),
.bQEtql:has(img[alt="2-Year Subscriber"]),
.bQEtql:has(img[alt="2.5-Year Subscriber"]),
.bQEtql:has(img[alt="3-Year Subscriber"]),
.bQEtql:has(img[alt="3.5-Year Subscriber"]),
.bQEtql:has(img[alt="4-Year Subscriber"]),
.bQEtql:has(img[alt="4.5-Year Subscriber"]),
.bQEtql:has(img[alt="5-Year Subscriber"]),
.bQEtql:has(img[alt="5.5-Year Subscriber"]),
.bQEtql:has(img[alt="6-Year Subscriber"]),
.bQEtql:has(img[alt="6.5-Year Subscriber"]),
.bQEtql:has(img[alt="7-Year Subscriber"]),
.bQEtql:has(img[alt="7.5-Year Subscriber"]),
.bQEtql:has(img[alt="8-Year Subscriber"]),
.bQEtql:has(img[alt="8.5-Year Subscriber"]),
.bQEtql:has(img[alt="9-Year Subscriber"]),
.bQEtql:has(img[alt="9.5-Year Subscriber"]),
.bQEtql:has(img[alt="10-Year Subscriber"]),
.bQEtql:has(img[alt="10.5-Year Subscriber"]),
.seventv-message:has(img[alt="Subscriber"]),
.seventv-message:has(img[alt="2-Month Subscriber"]),
.seventv-message:has(img[alt="3-Month Subscriber"]),
.seventv-message:has(img[alt="4-Month Subscriber"]),
.seventv-message:has(img[alt="5-Month Subscriber"]),
.seventv-message:has(img[alt="6-Month Subscriber"]),
.seventv-message:has(img[alt="7-Month Subscriber"]),
.seventv-message:has(img[alt="8-Month Subscriber"]),
.seventv-message:has(img[alt="9-Month Subscriber"]),
.seventv-message:has(img[alt="10-Month Subscriber"]),
.seventv-message:has(img[alt="11-Month Subscriber"]),
.seventv-message:has(img[alt="1-Year Subscriber"]),
.seventv-message:has(img[alt="1.5-Year Subscriber"]),
.seventv-message:has(img[alt="2-Year Subscriber"]),
.seventv-message:has(img[alt="2.5-Year Subscriber"]),
.seventv-message:has(img[alt="3-Year Subscriber"]),
.seventv-message:has(img[alt="3.5-Year Subscriber"]),
.seventv-message:has(img[alt="4-Year Subscriber"]),
.seventv-message:has(img[alt="4.5-Year Subscriber"]),
.seventv-message:has(img[alt="5-Year Subscriber"]),
.seventv-message:has(img[alt="5.5-Year Subscriber"]),
.seventv-message:has(img[alt="6-Year Subscriber"]),
.seventv-message:has(img[alt="6.5-Year Subscriber"]),
.seventv-message:has(img[alt="7-Year Subscriber"]),
.seventv-message:has(img[alt="7.5-Year Subscriber"]),
.seventv-message:has(img[alt="8-Year Subscriber"]),
.seventv-message:has(img[alt="8.5-Year Subscriber"]),
.seventv-message:has(img[alt="9-Year Subscriber"]),
.seventv-message:has(img[alt="9.5-Year Subscriber"]),
.seventv-message:has(img[alt="10-Year Subscriber"]),
.seventv-message:has(img[alt="10.5-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="2-Month Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="3-Month Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="4-Month Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="5-Month Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="6-Month Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="7-Month Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="8-Month Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="9-Month Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="10-Month Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="11-Month Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="1-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="1.5-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="2-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="2.5-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="3-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="3.5-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="4-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="4.5-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="5-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="5.5-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="6-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="6.5-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="7-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="7.5-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="8-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="8.5-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="9-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="9.5-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="10-Year Subscriber"]),
.seventv-chat-vod-message-patched:has(img[alt="10.5-Year Subscriber"]) {
background: linear-gradient(90deg, rgb(64, 0, 0) 0%, rgb(70, 68, 0) 25%, rgb(0, 30, 4) 50%, rgb(0, 58, 81) 75%, rgb(64, 0, 62) 97%, #ff70e49e 98.5%, #ff70e4a6 100%);
}
.seventv-message:has(img[alt="Verified"]),
.seventv-chat-vod-message-patched:has(img[alt="Verified"]) {
background: linear-gradient(90deg, rgb(59, 0, 100) 0%, rgb(59, 0, 100) 97%, rgb(150, 0, 255) 100%);
}
.seventv-message:has(img[alt="Moderator"]),
.seventv-chat-vod-message-patched:has(img[alt="Moderator"]) {
background: linear-gradient(90deg, rgb(0, 50, 0) 0%, rgb(0, 50, 0) 97%, rgb(0, 255, 0) 100%);
}
.seventv-message:has(img[alt="Broadcaster"]),
.seventv-chat-vod-message-patched:has(img[alt="Broadcaster"]) {
background: linear-gradient(90deg, rgb(100, 0, 0) 0%, rgb(100, 0, 0) 97%, rgb(255, 100, 100) 100%);
}
.seventv-message:has(img[alt="Listening only"]),
.seventv-message:has(img[alt="Watching without audio"]),
.seventv-chat-vod-message-patched:has(img[alt="Listening only"]),
.seventv-chat-vod-message-patched:has(img[alt="Watching without audio"]) {
background: /*[[audio-only-chatter-color]]*/ !important;
}
span:has(> div.sub-part) {
background: /*[[subbed-part-color]]*/ !important;
margin: 2px 0 !important;
}
/* VOD Timestamp */
.seventv-chat-vod-message-wrapper .seventv-chat-vod-message-timestamp {
position: relative;
left: -8px;
align-self: center;
height: 45%;
font-size: 8px !important;
transform: rotate(30deg);
}
.seventv-chat-vod-message-wrapper .seventv-user-message {
position: relative;
left: -10p...