Pretty Twitch without excess stuff.
Features:
- Expandable chat replies
- Translucent header
- Removed monetization ads, chat support badges
And more!
Authorlmb
LicenseMIT
Categorytwitch
Created
Updated
Size13 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Pretty Twitch without excess stuff.
Features:
/* ==UserStyle==
@name Pretty Twitch
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Pretty Twitch without excess stuff.
@author benhatsor
==/UserStyle== */
@-moz-document domain("twitch.tv") {
div:has(> div > .navigation-link[data-a-target="browse-link"]) {
display: none !important;
}
div:has(> div > div > div > div > button[data-a-target="top-nav-get-bits-button"]),
div:has(> div > div > div > div > button[data-a-target="top-nav-get-bits-button"]) + div:not(:has(> div button[data-a-target="user-menu-toggle"])) {
display: none !important;
}
.channel-info-content .user-avatar-card__live {
display: none !important;
}
.channel-info-content div[data-target="channel-header-right"] {
display: none !important;
}
.channel-info-content .tw-tag {
display: none !important;
}
.channel-info-content div div div div div:has(> div > div > div > a[data-a-target="watch-mode-to-home"]) {
display: none !important;
}
.channel-info-content div:has(> div > p[data-a-target="animated-channel-viewers-count"]) {
display: none;
}
.channel-info-content div:has(> div > p[data-a-target="animated-channel-viewers-count"]) * {
color: var(--color-opac-gl-1) !important;
fill: currentColor;
font-weight: 400 !important;
cursor: default;
transition: .3s ease-in-out color;
}
.channel-info-content div:has(> div > p[data-a-target="animated-channel-viewers-count"]) .bpvUUQ {
transform: scale(0.7) translateX(2px);
opacity: .5;
}
.channel-info-content div:has(> div > p[data-a-target="animated-channel-viewers-count"]):hover * {
color: var(--color-opac-gl-4) !important;
transition: none;
}
.channel-info-content .live-time {
opacity: .5;
}
.channel-info-content a[data-a-target="stream-game-link"] span {
color: var(--color-text-base);
}
.home-carousel-info {
border-radius: 11px;
}
.home-carousel-info .gzBpxy {
margin-right: 1rem !important;
}
.home-carousel-info .iTbLQv {
margin-top: 1rem !important;
}
.home-header-sticky {
width: 100%;
padding: 0 4rem;
}
.home-header-sticky .NcuJr {
margin-bottom: 1rem !important;
}
.toggle-visibility__right-column--expanded {
transition: none;
}
/*
div[data-a-target="right-column-chat-bar"]:not(:has(> .toggle-visibility__right-column--expanded:hover)) #live-page-chat:not(:hover) > .channel-root__right-column > div {
opacity: .5 !important;
background: var(--color-background-base) !important;
transition: .3s ease-in-out opacity;
}
div[data-a-target="right-column-chat-bar"]:has(> div #live-page-chat:not(:hover)) .toggle-visibility__right-column--expanded:not(:hover) {
opacity: .5 !important;
transition: .3s ease-in-out opacity;
}
*/
#live-page-chat .chat-room__content .GAUVP {
display: none;
}
#live-page-chat .chat-input-container__input-wrapper button:not([data-a-target="emote-picker-button"]) {
display: none;
}
#live-page-chat .channel-root__right-column {
transition: none !important;
}
#live-page-chat .community-highlight:has(.hype-train-fail__container) {
display: none !important;
}
.stream-chat-header button[data-test-selector="chat-viewer-list"],
.stream-chat-header button[aria-label="Show pinned message"] {
display: none !important;
}
.chat-input .chat-input-tray__clickable:has(> div .chat-restriction-tray-icon) {
display: none !important;
}
.chat-input__badge-carousel {
display: none !important;
}
.chat-wysiwyg-input__placeholder,
.chat-wysiwyg-input__editor {
padding-left: 1rem !important;
}
.stream-chat, .stream-chat, .chat-input-container__input-wrapper, .chat-input__textarea {
font-size: 16px;
}
.chat-line__message, .chat-line__status, .vod-message {
font-size: 16px;
padding: 1rem !important;
}
.chat-settings__popover, .chat-settings__popover * {
font-size: 14px;
}
.chat-input__textarea div div:has(> div > div > button[data-a-target="emote-picker-button"]) {
padding-right: 8px !important;
padding-bottom: calc(22px - 30px / 2) !important;
}
.chat-line__message .chat-line__message-highlight {
bottom: -1rem;
left: -1rem;
right: -1rem;
top: -1rem;
border-radius: 0 !important;
}
.chat-line__message:has(> .live-message-separator-line__hr) {
display: none !important;
}
.chat-line__status[data-a-target="chat-welcome-message"] {
display: none;
}
.chat-line__message--emote-button {
cursor: default;
}
.viewer-card-layer .emote-card .emote-card__content/*,
.viewer-card-layer .emote-card .emote-card__display-name *[data-test-selector="emote-type-copy"]*/ {
display: none !important;
}
.emote-card .iKmZPA {
margin-bottom: 0.5rem !important;
margin-top: 0 !important;
}
.cKQySD {
background: var(--color-background-alt-2) !important;
color: var(--color-data-series-d-alt-3) !important;
}
.cKQySD:hover {
filter: brightness(1.35);
}
.claimable-bonus__icon {
animation: none !important;
}
.chat-line__timestamp, .vod-message__header {
display: none !important;
}
.chat-line__username-container .chat-badge:not([alt="Moderator"]):not([alt="Broadcaster"]):not([alt="Verified"]),
.vod-message .chat-badge:not([alt="Moderator"]):not([alt="Broadcaster"]):not([alt="Verified"]) {
display: none;
}
.chat-badge {
margin-right: 0.5rem;
}
.chat-line__username-container:focus, .chat-line__username-container:hover {
background: transparent;
}
.chat-line__message-container > .kAQTjE {
padding-bottom: .5rem;
}
.user-notice-line .jReEny {
display: none;
}
.user-notice-line .czEOvg {
margin-top: 0 !important;
}
.user-notice-line .chat-line__message-body--highlighted {
background: transparent;
border: 0;
color: inherit;
}
.chat-line__message-container > div:not(:has([data-a-target="chat-line-message-body"])) {
margin-bottom: 10px;
}
.chat-line__message-container > div p {
font-size: inherit !important;
max-height: 38px;
white-space: unset;
overflow: unset;
}
.chat-line__message-container > div p:hover {
max-height: unset;
}
.chat-line__message-container > div p:hover::after {
opacity: 0;
}
.chat-line__message-container > div p::after {
content: '';
top: 18px;
left: 0;
right: 0;
position: absolute;
height: 20px;
background: linear-gradient(0deg, var(--color-background-base), transparent);
pointer-events: none;
}
.chat-line__message:focus > div p::after, .chat-line__message:focus-within > div p::after, .chat-line__message:hover > div p::after {
background: linear-gradient(0deg, var(--color-background-interactable-alpha-hover), transparent);
background: linear-gradient(0deg, hsl(240deg 2.4% 24.51%), transparent);
}
.chat-line__message-container .chat-image-wrapper:has(.chat-line__message--cheer-amount) {
display: none !important;
}
.chat-line__message:has(.chat-line__message--deleted-notice) {
opacity: .2;
}
.user-notice-line:has(.kWKUZf) {
display: none !important;
}
.user-notice-line {
border-left-color: var(--color-opac-w-2) !important;
background-color: transparent !important;
}
.chat-paused-footer, .video-chat__sync-button {
opacity: 1 !important;
border-radius: var(--border-radius-extra-large) var(--border-radius-extra-large) 0 0;
padding-top: 0.25rem;
background: var(--color-background-alt-2) !important;
color: inherit !important;
}
.chat-paused-footer {
padding-top: 0;
overflow: hidden;
border-radius: var(--border-radius-extra-large) var(--border-radius-extra-large);
}
.chat-paused-footer button {
border-radius: 0;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
box-sizing: content-box;
}
.video-chat__sync-button {
font-weight: 600;
}
.chat-paused-footer:not(:hover), .video-chat__sync-button:not(:hover) {
opacity: .8 !important;
}
.cfiiLd {
text-decoration: none;
}
.video-player .top-bar--pointer-enabled {
opacity: .5;
}
.video-player .player-overlay-background * {
cursor: default;
}
.video-player .top-bar .tw-channel-status-text-indicator {
display: none;
}
.video-player .player-controls__right-control-group .tw-transition:has(+ div button[data-a-target="player-settings-button"]) .tw-pill {
display: none;
}
.video-player .extensions-video-overlay-size-container,
.video-player .extensions-dock__layout {
display: none !important;
}
.home-carousel-info--live a[data-a-target="home-live-overlay-button"] span[class*="ScAnimatedNumber"] {
margin-right: -4px;
width: 0;
color: transparent;
display: inline-block;
}
.channel-status-info--offline, .channel-status-info--private {
background: rgba(255,255,255,0.1);
color: inherit;
...