chylex
/
Transparent-Twitch-Chat
mirror of https://github.com/chylex/Transparent-Twitch-Chat.git
1
0
Fork 0
Code

Compare commits

base: chylex:f3d88aaf0644e14b9ffbe21ccf05e1ab17a6f92e
Branches Tags
chylex:master
...
compare: chylex:8883c3cc03ff53fb85a292f908681b78597c6b1f
Branches Tags
chylex:master

3 Commits
f3d88aaf06 ... 8883c3cc03

Author SHA1 Message Date
chylex 8883c3cc03
Increase maximum chat width to 800px 
Closes #31
 2023-03-06 02:20:08 +01:00
chylex 75acc5c38a
Fix slider width changing while moving the sliders 2023-03-06 02:04:30 +01:00
chylex 146164c995
Fix hiding VOD timestamps 2023-03-06 01:54:06 +01:00
1 changed files with 8 additions and 13 deletions
Show Stats Expand all files Collapse all files

21
src/main.js
View File

@ -162,14 +162,9 @@ ${rcol} .video-chat__sync-button {
}
${settings.hideTimestamps ? `@#css{{
${rcol} .vod-message--timestamp .tw-tooltip-wrapper,
${rcol} .vod-message div[data-test-selector="message-timestamp"] {
${rcol} .vod-message__header div[class*="ScAttachedTooltipWrapper-"] {
display: none !important;
}
${rcol} .vod-message--timestamp {
padding-left: 0.5rem;
}
@#css}}` : ``}
${settings.hideHeader ? `@#css{{
@ -585,9 +580,9 @@ function generateSettingsCSS(){
#chylex-ttc-settings-modal output {
color: @#hex(fffc);
display: inline-block;
flex: 1 1 42px;
padding-left: 6px;
text-align: left;
flex: 0 0 auto;
padding-left: 5px;
text-align: right;
}
#chylex-ttc-settings-modal .tw-toggle__button {
@ -809,7 +804,7 @@ function createSettingsModal(){
return generateOptionBase(title, `
<input id="ttc-opt-${option}" type="range" min="${cfg.min}" max="${cfg.max}" step="${cfg.step}" value="${settings[option]}">
<output id="ttc-optval-${option}" for="ttc-opt-${option}">${settings[option]}${cfg.text}</option>
<output id="ttc-optval-${option}" for="ttc-opt-${option}" style="min-width:${cfg.width}px;">${settings[option]}${cfg.text}</option>
`, { itemClasses: "ttc-setting-small-margin" });
};
@ -830,7 +825,7 @@ function createSettingsModal(){
<div class="ttc-flex-container">
<div style="flex: 0 0 25%">
<p>General</p>
${generateSlider("Chat Width", "chatWidth", { min: 250, max: 600, step: 25, wait: 500, text: "px" })}
${generateSlider("Chat Width", "chatWidth", { min: 250, max: 800, step: 25, wait: 500, width: 48, text: "px" })}
${generateTxtbox("Chat Filters", "chatFilters", { wait: 500, placeholder: "Example: kappa, *abc*" })}
${generateSelect("Player Position", "playerPosition", {
"#opposite-chat": "Opposite of Chat",
@ -853,7 +848,7 @@ function createSettingsModal(){
${generateToggle("Transparent Chat", "transparentChat")}
${generateToggle("Smooth Text Shadow", "smoothTextShadow")}
${generateToggle("Chat on Left Side", "chatLeftSide")}
${generateSlider("Background Opacity", "backgroundOpacity", { min: 0, max: 100, step: 5, wait: 100, text: "%" })}
${generateSlider("Background Opacity", "backgroundOpacity", { min: 0, max: 100, step: 5, wait: 100, width: 42, text: "%" })}
</div>
<div style="flex: 0 0 16%">
@ -877,7 +872,7 @@ function createSettingsModal(){
${generateToggle("Hide Sub Gift Badge", "hideBadgeSubGift")}
${generateToggle("Hide Bit Cheer Badge", "hideBadgeBitCheer")}
${generateToggle("Hide Gift/Bit Leader Badge", "hideBadgeLeader")}
${generateSlider("Badge Opacity", "badgeOpacity", { min: 0, max: 100, step: 5, wait: 100, text: "%" })}
${generateSlider("Badge Opacity", "badgeOpacity", { min: 0, max: 100, step: 5, wait: 100, width: 42, text: "%" })}
</div>
</div>
`;