Skip to content

Pretty Twitch by lmb

Screenshot of Pretty Twitch
Write a review Install Get Stylus

Details

Authorlmb

LicenseMIT

Categorytwitch

Created

Updated

Size13 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Pretty Twitch without excess stuff.

Features:

  • Translucent header & chat when watching
  • Removed monetization ads, chat support badges
    And more!

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==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;
    }
    .channel-status-info--live, .channel-status-info--watch-party {
        background: var(--color-twitch-purple);
    }
    .channel-root--home .channel-info-content {
        border-radius: 0 11px 11px 0;
    }
    .channel-info-content .tw-halo {
        border-color:...

Reviews

No reviews yet.