Make Twitch's chat transparent in theater mode! (Transparency, Blur, Opacity, Height, Etc.)
/* ==UserStyle==
-- THEME STUFF --
@name Twitch | Theater transparent chat ( Customizable! )
@version 1.0.0
@description Make Twitch's chat transparent in theater mode! (Transparency, Blur, Opacity, Height, Etc.)
-- AUTHOR STUFF --
@namespace Freeplay
@author Freeplay (https://pages.codeberg.org/freeplay/)
@homepageURL https://codeberg.org/Freeplay/UserStyles
@supportURL https://codeberg.org/Freeplay/UserStyles/issues
@preprocessor stylus
@var text Width "Chat Width" 34rem
@var range Opacity "Opacity" [.7, 0, 1, 0.1, ""]
@var range OpacityHover "Opacity on Hover" [1, 0, 1, 0.1, ""]
@var range Blur "Blur" [20, 0, 20, 2, "px"]
@var range Height "Chat Height" [100, 20, 100, 5, "vh"]
@var checkbox hide "Hide extra when not Hovering" 1
@var checkbox videoAlign "Align stream to left" 0
==/UserStyle== */
@-moz-document domain("twitch.tv") {
.right-column--theatre.right-column--beside {
filter: opacity( Opacity );
background: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0.7), rgba(0,0,0,0.6), transparent);
transition: filter 1s, backdrop-filter .2s;
max-height: Height;
bottom: 0;
top: unset !important;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
width: Width;
}
.right-column--theatre.right-column--beside:hover {
filter: opacity( OpacityHover );
if Blur == '0px' {
backdrop-filter: none;
} else {
backdrop-filter: blur( Blur );
}
}
.right-column--theatre.right-column--beside > div {
overflow: hidden;
}
.right-column--theatre.right-column--beside .channel-root__right-column {
width: Width;
}
.right-column--theatre.right-column--beside .channel-root__right-column,
.right-column--theatre.right-column--beside .tw-c-background-base,
.right-column--theatre.right-column--beside .video-chat__header,
.right-column--theatre.right-column--beside .chat-room,
.right-column--theatre.right-column--beside .tw-c-background-alt-2 {
background: none !important;
background-color: transparent !important;
border: none !important;
scrollbar-color: #731ef378 transparent;
text-align: right;
transition: background .7s;
}
if hide {
.right-column--theatre.right-column--beside:hover {
max-height: calc(Height + 200px) !important;
}
.right-column--theatre.right-column--beside .stream-chat-header {
margin-top: -50px;
transition: margin-top .2s;
}
.right-column--theatre.right-column--beside:hover .stream-chat-header {
margin-top: 0px;
}
.right-column--theatre.right-column--beside .tw-z-default {
margin-top: -70px;
filter: opacity(0);
transition: margin-top .2s, filter .2s;
}
.right-column--theatre.right-column--beside:hover .tw-z-default {
margin-top: 0;
filter: opacity(1);
}
.right-column--theatre.right-column--beside .chat-input {
margin-bottom: -50px;
filter: opacity(0);
transition: margin-bottom .2s, filter .2s;
}
.right-column--theatre.right-column--beside:hover .chat-input {
margin-bottom: 0;
filter: opacity(1);
}
}
.right-column--theatre.right-column--beside .chat-rules-container,
.right-column--theatre.right-column--beside .tw-c-background-base.tw-relative:not(.channel-leaderboard-header-rotating),
.right-column--theatre.right-column--beside .tw-balloon,
.right-column--theatre.right-column--beside .tw-c-background-alt,
.right-column--theatre.right-column--beside .chat-viewers__pane {
backdrop-filter: blur( Blur );
background: none !important;
background-color: rgba(0,0,0,0.7) !important;
transition: background-color .2s;
}
.vod-message__header {
order: 2;
margin: 0;
}
.vod-message__header * {
margin: 0;
padding-left: 0 !important;
padding-right: 0 !important;
}
.persistent-player.persistent-player--theatre.tw-elevation-0 {
width: 100% !important;
}
.persistent-player.persistent-player--theatre.tw-elevation-0 .top-bar {
padding-right: 0 !important;
}
.persistent-player.persistent-player--theatre.tw-elevation-0 .top-bar > div:first-of-type {
margin-right: 0 !important;
}
.persistent-player.persistent-player--theatre.tw-elevation-0 .video-player__overlay > div > div > div {
margin-right: Width !important;
}
.persistent-player.persistent-player--theatre.tw-elevation-0 .player-controls > div:first-of-type {
padding-right: 0 !important;
}
.persistent-player.persistent-player--theatre.tw-elevation-0 .tw-transition {
transition: filter .1s, transform .5s;
}
.persistent-player.persistent-player--theatre.tw-elevation-0 .tw-transition__translate-right--exit-active,
.persistent-player.persistent-player--theatre.tw-elevation-0 .tw-transition__translate-right--exit-done {
filter: opacity(0);
}
.persistent-player.persistent-player--theatre.tw-elevation-0 .video-player__container--theatre-whispers {
bottom: 0 !important;
}
if videoAlign {
.persistent-player.persistent-player--theatre.tw-elevation-0 .video-player video {
width: auto !important;
min-width: calc(100vw - 34rem) !important;
max-width: 100vw;
}
}
}