mirror of
https://github.com/chylex/Transparent-Twitch-Chat.git
synced 2025-04-10 22:15:45 +02:00
Release 1.0.9
This commit is contained in:
parent
f9bc96bf19
commit
feb11c3623
87
dist/TransparentTwitchChat.user.js
vendored
87
dist/TransparentTwitchChat.user.js
vendored
@ -1,7 +1,7 @@
|
||||
// ==UserScript==
|
||||
// @name Transparent Twitch Chat
|
||||
// @description Why decide between missing a PogChamp or sacrificing precious screen space, when you can have the best of both worlds!
|
||||
// @version 1.0.8
|
||||
// @version 1.0.9
|
||||
// @namespace https://chylex.com
|
||||
// @include https://www.twitch.tv/*
|
||||
// @run-at document-end
|
||||
@ -15,6 +15,7 @@ let settings = {
|
||||
|
||||
chatWidth: 350,
|
||||
hideHeader: true,
|
||||
hideConversations: false,
|
||||
grayTheme: false,
|
||||
|
||||
transparentChat: true,
|
||||
@ -146,6 +147,13 @@ function generateStaticCSS(){
|
||||
color: #8072A1 !important;
|
||||
}
|
||||
|
||||
// restyle vod chat input
|
||||
|
||||
.theatre .vod-chat__input {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// BTTV workarounds
|
||||
|
||||
.theatre .ember-chat.roomMode${wa}, .theatre .chat-messages${wa}, .theatre .ember-chat${wa} {
|
||||
@ -166,6 +174,10 @@ function generateDynamicCSS(){
|
||||
return;
|
||||
}
|
||||
|
||||
let multiselect = (str, selectors) => selectors.map(selector => str.replace("$", selector)).join(",");
|
||||
let $chatContainer = [ ".chat-container", ".vod-chat" ];
|
||||
let $chatInterface = [ ".chat-interface", ".vod-chat__input" ];
|
||||
|
||||
let wa = ":not(.ttcwa)"; // selector priority workaround
|
||||
let style = document.getElementById("chylex-ttc-style-dynamic");
|
||||
|
||||
@ -258,7 +270,7 @@ body${wa} .app-main.theatre${wa} #main_col${wa} #player${wa} {
|
||||
|
||||
// chat container
|
||||
|
||||
.theatre #right_col .chat-container {
|
||||
${multiselect(".theatre #right_col $", $chatContainer)} {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
@ -266,7 +278,7 @@ body${wa} .app-main.theatre${wa} #main_col${wa} #player${wa} {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.theatre #right_col:not(:hover) .chat-container {
|
||||
${multiselect(".theatre #right_col:not(:hover) $", $chatContainer)} {
|
||||
background: ${convHex("17141f"+(Math.round(settings.backgroundOpacity * 2.55).toString(16).padStart(2, '0')))} !important;
|
||||
color: #ece8f3 !important;
|
||||
}
|
||||
@ -275,13 +287,13 @@ body${wa} .app-main.theatre${wa} #main_col${wa} #player${wa} {
|
||||
background-color: ${convHex("17141f66")} !important;
|
||||
}
|
||||
|
||||
.theatre #right_col:not(:hover) .chat-interface {
|
||||
${multiselect(".theatre #right_col:not(:hover) $", $chatInterface)} {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
// chat messages
|
||||
|
||||
.theatre #right_col:not(:hover) .chat-container {
|
||||
${multiselect(".theatre #right_col:not(:hover) $", $chatContainer)} {
|
||||
${settings.smoothTextShadow ? `
|
||||
text-shadow: 0 0 2px ${convHex("000D")}, -1px 0 1px ${convHex("0006")}, 0 -1px 1px ${convHex("0006")}, 1px 0 1px ${convHex("0006")}, 0 1px 1px ${convHex("0006")};
|
||||
` : `
|
||||
@ -305,6 +317,12 @@ body${wa} .app-main.theatre${wa} #main_col${wa} #player${wa} {
|
||||
|
||||
.theatre .conversations-list-container:not(.list-displayed):not(:hover) {
|
||||
opacity: ${settings.backgroundOpacity / 100};
|
||||
}
|
||||
|
||||
// fix autoscroll popup
|
||||
|
||||
.theatre #right_col:not(:hover) .vod-chat__sync-button:not(.vod-chat__sync-button--show) {
|
||||
display: none;
|
||||
}` : `
|
||||
|
||||
// fix player controls
|
||||
@ -317,6 +335,17 @@ body${wa} .app-main.theatre${wa} #main_col${wa} #player${wa} {
|
||||
right: ${settings.chatWidth - 10}px !important;
|
||||
}`}
|
||||
|
||||
// hide conversations and remove bottom margin
|
||||
|
||||
${settings.hideConversations ? `
|
||||
.theatre .conversations-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theatre .player-whispers-padding {
|
||||
margin-bottom: 0 !important;
|
||||
}` : ``}
|
||||
|
||||
// chat on left side
|
||||
|
||||
${settings.chatLeftSide && settings.transparentChat ? `
|
||||
@ -371,55 +400,70 @@ ${settings.chatLeftSide && settings.transparentChat ? `
|
||||
width: ${settings.chatWidth - 10}px;
|
||||
}
|
||||
|
||||
.theatre #right_col:hover .chat-room {
|
||||
top: 50px !important;
|
||||
}
|
||||
|
||||
${settings.hideHeader ? `
|
||||
.theatre #right_col:not(:hover) .chat-header {
|
||||
.theatre #right_col .chat-header {
|
||||
display: none;
|
||||
}` : ``}
|
||||
|
||||
.theatre #right_col:not(:hover) .chat-room {
|
||||
.theatre #right_col .chat-room {
|
||||
top: ${settings.hideHeader ? `0` : `50px`} !important;
|
||||
}
|
||||
|
||||
// gray theme
|
||||
|
||||
${settings.grayTheme ? `
|
||||
.theatre #right_col:not(:hover) .chat-container {
|
||||
${multiselect(".theatre #right_col $", $chatContainer)} {
|
||||
border-left-color: #333;
|
||||
}
|
||||
|
||||
${multiselect(".theatre #right_col:not(:hover) $", $chatContainer)} {
|
||||
background: ${convHex("141414"+(Math.round(settings.transparentChat ? (settings.backgroundOpacity * 2.55) : 255).toString(16).padStart(2, '0')))} !important;
|
||||
}
|
||||
|
||||
.theatre #right_col:hover .chat-container {
|
||||
${multiselect(".theatre #right_col:hover $", $chatContainer)} {
|
||||
background: #141414 !important;
|
||||
}
|
||||
|
||||
.theatre #right_col:not(:hover) .chat-header {
|
||||
background-color: ${convHex("09090966")} !important;
|
||||
background-color: ${convHex(settings.transparentChat ? "09090966" : "090909ff")} !important;
|
||||
box-shadow: inset 0 -1px 0 0 ${convHex(settings.transparentChat ? "3336" : "333f")} !important;
|
||||
}
|
||||
|
||||
.theatre #right_col:hover .chat-header {
|
||||
background: #090909 !important;
|
||||
box-shadow: inset 0 -1px 0 0 #333 !important;
|
||||
}
|
||||
|
||||
.theatre .ember-chat .chat-interface .textarea-contain textarea {
|
||||
.theatre #right_col:not(:hover) .vod-chat__header {
|
||||
box-shadow: inset 0 -1px 0 0 ${convHex(settings.transparentChat ? "3336" : "333f")} !important;
|
||||
}
|
||||
|
||||
.theatre #right_col:hover .vod-chat__header {
|
||||
box-shadow: inset 0 -1px 0 0 #333 !important;
|
||||
}
|
||||
|
||||
${multiselect(".theatre $ textarea", $chatInterface)} {
|
||||
background-color: ${convHex(settings.transparentChat ? "2a2a2a90" : "2a2a2aff")} !important;
|
||||
border: 1px solid ${convHex(settings.transparentChat ? "00000090" : "000000ff")} !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.theatre .chat-container .button--icon-only figure svg {
|
||||
${multiselect(".theatre #right_col:hover $ textarea", $chatInterface)} {
|
||||
background-color: #2a2a2a !important;
|
||||
border: 1px solid #000000 !important;
|
||||
}
|
||||
|
||||
${multiselect(".theatre $ .button--icon-only figure svg", $chatContainer)} {
|
||||
fill: #dedede !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.theatre #right_col:hover .chat-container .button--icon-only figure svg {
|
||||
${multiselect(".theatre #right_col:hover $ .button--icon-only figure svg", $chatContainer)} {
|
||||
fill: #dedede !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.theatre .chat-container .button:not(.button--icon-only) {
|
||||
.theatre .chat-container .button:not(.button--icon-only), .theatre .vod-chat-input__submit {
|
||||
background-color: ${convHex(settings.transparentChat ? "2a2a2a90" : "2a2a2aff")} !important;
|
||||
border: 1px solid ${convHex(settings.transparentChat ? "00000090" : "000000ff")} !important;
|
||||
}` : ``}
|
||||
@ -489,6 +533,10 @@ function generateSettingsCSS(){
|
||||
margin-left: 298px;
|
||||
}
|
||||
|
||||
.vod-chat #chylex-ttc-settings-btn {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
#chylex-ttc-settings-btn:hover .player-tip {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
@ -690,6 +738,7 @@ function createSettingsModal(){
|
||||
<p>General</p>
|
||||
${generateSlider("Chat Width", "chatWidth", { min: 250, max: 600, step: 25, wait: 500, text: "px" })}
|
||||
${generateToggle("Hide Chat Header", "hideHeader")}
|
||||
${generateToggle("Hide Conversations", "hideConversations")}
|
||||
${generateToggle("Gray Theme", "grayTheme")}
|
||||
</div>
|
||||
|
||||
@ -725,7 +774,7 @@ function createSettingsModal(){
|
||||
}
|
||||
|
||||
function insertSettingsButton(){
|
||||
let container = document.getElementsByClassName("chat-container")[0];
|
||||
let container = document.querySelector(".js-chat-container,.vod-chat");
|
||||
|
||||
if (!container){
|
||||
return;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user