User CSS for twitch.tv, formerly "Comfy twat tv" (userstyles.org/styles/127399)

comfy_twat_tv.user.css

/* ==UserStyle==
@name           Comfy twat tv
@description    User CSS for twitch.tv, formerly "Comfy twat tv" (userstyles.org/styles/127399) 
@namespace      github.com/openstyles/stylus
@version        1.0.1
@author         [email protected]
==/UserStyle== */

@-moz-document domain("www.twitch.tv") {
:root {
    --nicknames: #E0B10E;
    --nicknames-mentoin: #E0B10E;
    --messages: hsl(0, 0%, 90%);
    --shadow-nicknames: 1px 0px 1px #000,
    -1px 0px 1px #000,
    0px 1px 1px #000,
    0px -1px 1px #000,
    1px 1px 3px #000,
    3px 3px 6px #000;
    --shadow-messages: 1px 0px 1px #000,
    -1px 0px 1px #000,
    0px 1px 1px #000,
    0px -1px 1px #000,
    1px 1px 3px #000,
    3px 3px 6px #000;
    --chat-background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0.75) 100%);
    --chat-background-hover: rgba(0, 0, 0, 0.5);

    --messages-animation-wait: 25s;
    --messages-animation-fadeout: 5s;
}

/** remove background, borders, shadows from chat **/
#root .right-column--theatre .channel-page__right-column .room-selector__header,
#root .right-column--theatre .rooms-header,
#root .right-column--theatre [data-test-selector="chat-room-component-layout"] div:first-child,
#root .right-column--theatre .channel-page__right-column,
.tw-root--theme-dark .channel-root__right-column,
.right-column--theatre div.channel-root__right-column div:first-child,
.tw-root--theme-dark .chat-room {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
/** resize player **/
.persistent-player--theatre {
    width: 100% !important;
}
.video-player--theatre .video-player__container,
.highwind-video-player__container--theatre-whispers {
    bottom: 0 !important;
}
/** resize player controls **/
.channel-root__scroll-area--theatre-mode .player-controls {
    width: calc(100% - 34rem) !important;
}
/** remove useless thing from top of the chat **/
#root .right-column--theatre .pinned-cheer-v2,
#root .right-column--theatre .channel-leaderboard
{
    display: none !important;
}
/** remove useless icon from chat input **/
.right-column--theatre [data-a-target="chat-badge-carousel"]
{
	display: none !important;
}


/** fun stuff ahead **/
/** chat: message color **/
#root .right-column--theatre [data-a-target="chat-line-message"],
#root .right-column--theatre [data-a-target="chat-message-text"]
{
    color: var(--messages) !important;
    text-shadow: var(--shadow-messages) !important;
}
/** chat: fade out **/
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#root .right-column--theatre .channel-page__right-column [data-a-target="chat-line-message"],
#root .right-column.right-column--beside.right-column--theatre [data-a-target="chat-line-message"] {
    animation-name: fadeOut;
    animation-delay: var(--messages-animation-wait);
    animation-duration: var(--messages-animation-fadeout);
    animation-fill-mode: both;
    transition: all 0.3s ease-in-out;
}
/** chat: fade in on hover **/
#root .right-column--theatre .channel-page__right-column:hover [data-a-target="chat-line-message"],
#root .right-column.right-column--beside.right-column--theatre:hover [data-a-target="chat-line-message"] {
    opacity: 1 !important;
    transition: all 1s ease-in-out;
}
/** chat: username color **/
#root .right-column--theatre [data-a-target="chat-message-username"] {
    color: var(--nicknames) !important;
    text-shadow: var(--shadow-nicknames) !important;
}
/** chat: mentoins **/
#root .right-column--theatre [data-a-target="chat-message-mention"] {
    color: var(--nicknames-mentoin) !important;
}
/** chat: remove badges **/
#root .right-column--theatre .chat-badge {
    display: none !important;
}
/** chat: background **/
#root .right-column--theatre .channel-page__right-column,
#root .right-column.right-column--beside.right-column--theatre {
    background: var(--chat-background) !important;
    transition: all 0.3s ease-in-out;
}
/** chat: background on hover **/
#root .right-column--theatre .channel-page__right-column:hover,
#root .right-column.right-column--beside.right-column--theatre:hover {
    background-color: var(--chat-background-hover) !important;
}

/** chat: show controls on hover **/
#root .right-column--theatre .channel-page__right-column .chat-input,
#root .right-column.right-column--beside.right-column--theatre .chat-input {
    opacity: 0.1 !important;
    transition: all 0.3s ease-in-out;
}
#root .right-column--theatre .channel-page__right-column:hover .chat-input,
#root .right-column.right-column--beside.right-column--theatre:hover .chat-input {
    opacity: 1 !important;
}
}