Skip to content

Instantly share code, notes, and snippets.

@ear
Last active October 8, 2017 12:38
Show Gist options
  • Save ear/60df4070dda08646f897d66d981c4355 to your computer and use it in GitHub Desktop.
Save ear/60df4070dda08646f897d66d981c4355 to your computer and use it in GitHub Desktop.
twitch user styles for https://go.twitch.tv/*
/* more readable chat */
.chat-list,
.chat-input textarea,
.video-chat,
.video-chat__input textarea {
font-size: 18px !important;
font-family: -apple-system !important;
font-weight: 500 !important;
color: hsl(0,0%,90%) !important;
line-height: 1.2 !important;
}
.chat-line__message {
padding: .1rem 1rem !important;
}
.chat-line__timestamp {
color: #999 !important;
font-family: Input Mono Compressed !important;
font-weight: 400 !important;
letter-spacing: -2px !important;
}
/* more readable chat header */
.chat__header,
.video-chat__header {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: 4rem !important;
color: hsla(0,0%,99%,0.9) !important;
}
.chat__header.pd-y-1,
.video-chat__header {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.chat__header p,
.video-chat__header span {
font-size: 24px !important;
font-variant: small-caps !important;
font-weight: 600 !important;
}
/* remove pinned cheer */
.right-column .pinned-cheer {
display: none !important;
visibility: hidden !important;
}
/* remove chat badges */
img[alt*="cheer"],
img[alt="Turbo"],
img[alt*="Subscriber"],
img[alt="Twitch Prime"] {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
}
img[alt="Moderator"] {
opacity: 0.5 !important;
}
/* remove unneeded buttons / pills */
.chat-input button[aria-label="Bits"],
.prime-offers__pill {
display: none !important;
visibility: none !important;
}
/* better input zone */
.chat__pane > div:last-of-type {
padding: 0 .4rem .1rem !important;
}
.chat__pane .chat-input .chat-buttons-container {
margin-top: .4rem !important;
}
/* better nickname colors */
span.chat-line__message--username[style="color: rgb(0, 0, 0);"] {
color: #aaa !important;
}
span.chat-line__message--username[style="color: rgb(0, 0, 255);"] {
color: #15F !important;
}
/* remove annoying message from VOD chat */
[data-test-selector="video-chat-cta"] {
display: none !important;
visibility: hidden !important;
}
/* change unreadable nickname colors in dark mode */
.video-watch-page__right-column.theme--dark a[style="color: rgb(0, 0, 0);"] {
color: #ccc !important;
}
.video-watch-page__right-column.theme--dark a[style="color: rgb(0, 0, 255);"] {
color: hsl(230,90%,60%) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment