Minor format changes + initial settings page

This commit is contained in:
nuttylmao
2025-04-17 04:48:14 +10:00
parent e14f58d01d
commit bced83db5b
4 changed files with 233 additions and 289 deletions
+9 -2
View File
@@ -21,8 +21,15 @@
<span id="attribute">to nutty</span> <span id="attribute">to nutty</span>
</div> </div>
</div> </div>
<div id="message"> <div id="theContentThatShowsLastInsteadOfFirst">
I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum <div style="display: inline-flex; align-items: center;">
<img id="avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes" src="https://static-cdn.jtvnw.net/jtv_user_pictures/272e643e-4d43-415f-9ee1-18916e825411-profile_image-300x300.png" class="square">
<span id="usernameTheSecond"></span>
</div>
<br>
<span id="message">
I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum
</span>
</div> </div>
</div> </div>
</div> </div>
+60 -14
View File
@@ -11,10 +11,14 @@ const avatarMap = new Map();
const alertBox = document.getElementById('alertBox'); const alertBox = document.getElementById('alertBox');
const avatarElement = document.getElementById('avatar'); const avatarElement = document.getElementById('avatar');
const avatarSmallElement = document.getElementById('avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes');
const usernameLabel = document.getElementById('username'); const usernameLabel = document.getElementById('username');
const usernameTheSecondLabel = document.getElementById('usernameTheSecond');
const descriptionLabel = document.getElementById('description'); const descriptionLabel = document.getElementById('description');
const attributeLabel = document.getElementById('attribute'); const attributeLabel = document.getElementById('attribute');
const theContentThatShowsFirstInsteadOfSecond = document.getElementById('theContentThatShowsFirstInsteadOfSecond'); const theContentThatShowsFirstInsteadOfSecond = document.getElementById('theContentThatShowsFirstInsteadOfSecond');
const theContentThatShowsLastInsteadOfFirst = document.getElementById('theContentThatShowsLastInsteadOfFirst');
const messageLabel = document.getElementById('message'); const messageLabel = document.getElementById('message');
let widgetLocked = false; // Needed to lock animation from overlapping let widgetLocked = false; // Needed to lock animation from overlapping
@@ -63,7 +67,7 @@ const showKofiDonations = GetBooleanParam("showKofiDonations", true);
const showTipeeeStreamDonations = GetBooleanParam("showTipeeeStreamDonations", true); const showTipeeeStreamDonations = GetBooleanParam("showTipeeeStreamDonations", true);
const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true); const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true);
const animationSpeed = GetIntParam("showTwitchSharedChat", 8000); const animationSpeed = GetIntParam("animationSpeed", 8000);
const furryMode = GetBooleanParam("furryMode", false); const furryMode = GetBooleanParam("furryMode", false);
@@ -257,9 +261,25 @@ async function TwitchSub(data) {
const avatarURL = await GetAvatar(username); const avatarURL = await GetAvatar(username);
if (!isPrime) if (!isPrime)
UpdateAlertBox('twitch', avatarURL, `${username}`, `subscribed with Tier ${subTier.charAt(0)}`); UpdateAlertBox(
'twitch',
avatarURL,
`${username}`,
`subscribed with Tier ${subTier.charAt(0)}`,
'',
username,
''
);
else else
UpdateAlertBox('twitch', avatarURL, `${username}`, `used their Prime Sub`); UpdateAlertBox(
'twitch',
avatarURL,
`${username}`,
`used their Prime Sub`,
'',
username,
''
);
} }
async function TwitchResub(data) { async function TwitchResub(data) {
@@ -283,6 +303,7 @@ async function TwitchResub(data) {
`${username}`, `${username}`,
`resubscribed with Tier ${subTier.charAt(0)}`, `resubscribed with Tier ${subTier.charAt(0)}`,
`${cumulativeMonths} months`, `${cumulativeMonths} months`,
username,
message message
); );
else else
@@ -292,6 +313,7 @@ async function TwitchResub(data) {
`${username}`, `${username}`,
`used their Prime Sub`, `used their Prime Sub`,
`${cumulativeMonths} months`, `${cumulativeMonths} months`,
username,
message message
); );
} }
@@ -319,6 +341,7 @@ async function TwitchGiftSub(data) {
`${username}`, `${username}`,
`gifted a Tier ${subTier.charAt(0)} subscription`, `gifted a Tier ${subTier.charAt(0)} subscription`,
`to ${recipient}`, `to ${recipient}`,
username,
messageText messageText
); );
} }
@@ -342,6 +365,7 @@ async function TwitchRewardRedemption(data) {
`${username} redeemed`, `${username} redeemed`,
`${rewardName} ${channelPointIcon} ${cost}`, `${rewardName} ${channelPointIcon} ${cost}`,
'', '',
username,
userInput userInput
); );
} }
@@ -363,6 +387,7 @@ async function TwitchRaid(data) {
`${username}`, `${username}`,
`is raiding with a party of ${viewers}`, `is raiding with a party of ${viewers}`,
'', '',
username,
'' ''
); );
} }
@@ -377,9 +402,10 @@ function YouTubeSuperChat(data) {
UpdateAlertBox( UpdateAlertBox(
'youtube', 'youtube',
avatarURL, avatarURL,
`🪙 ${data.user.name}`, `${data.user.name}`,
`sent a Super Chat (${data.amount})`, `sent a Super Chat (${data.amount})`,
'', '',
data.user.name,
data.message data.message
); );
} }
@@ -397,6 +423,7 @@ function YouTubeSuperSticker(data) {
`${data.user.name}`, `${data.user.name}`,
`sent a Super Sticker (${data.amount})`, `sent a Super Sticker (${data.amount})`,
'', '',
data.user.name,
'' ''
); );
} }
@@ -414,6 +441,7 @@ function YouTubeNewSponsor(data) {
`⭐ New ${data.levelName}`, `⭐ New ${data.levelName}`,
`Welcome ${data.user.name}!`, `Welcome ${data.user.name}!`,
'', '',
data.user.name,
'' ''
); );
} }
@@ -431,6 +459,7 @@ function YouTubeGiftMembershipReceived(data) {
`${data.gifter.name}`, `${data.gifter.name}`,
`gifted a membership`, `gifted a membership`,
`to ${data.user.name} (${data.tier})!`, `to ${data.user.name} (${data.tier})!`,
data.gifter.name,
'' ''
); );
} }
@@ -451,6 +480,7 @@ async function StreamlabsDonation(data) {
`${donater}`, `${donater}`,
`donated ${currency}${formattedAmount}`, `donated ${currency}${formattedAmount}`,
``, ``,
donater,
message message
); );
} }
@@ -471,6 +501,7 @@ async function StreamElementsTip(data) {
`${donater}`, `${donater}`,
`donated ${currency}${formattedAmount}`, `donated ${currency}${formattedAmount}`,
``, ``,
donater,
message message
); );
} }
@@ -492,6 +523,7 @@ function PatreonPledgeCreated(data) {
`${user}`, `${user}`,
`joined Patreon ($${amount})`, `joined Patreon ($${amount})`,
``, ``,
user,
`` ``
); );
} }
@@ -516,6 +548,7 @@ function KofiDonation(data) {
`${user}`, `${user}`,
`donated $${amount}`, `donated $${amount}`,
``, ``,
user,
message message
); );
else else
@@ -524,6 +557,7 @@ function KofiDonation(data) {
`${user}`, `${user}`,
`donated ${currency} ${amount}`, `donated ${currency} ${amount}`,
``, ``,
user,
message message
); );
} }
@@ -548,6 +582,7 @@ function KofiSubscription(data) {
`${user}`, `${user}`,
`subscribed ($${amount})`, `subscribed ($${amount})`,
``, ``,
user,
message message
); );
else else
@@ -556,6 +591,7 @@ function KofiSubscription(data) {
`${user}`, `${user}`,
`subscribed (${currency} ${amount})`, `subscribed (${currency} ${amount})`,
``, ``,
user,
message message
); );
} }
@@ -578,6 +614,7 @@ function KofiResubscription(data) {
`${user}`, `${user}`,
`subscribed (${tier})`, `subscribed (${tier})`,
``, ``,
user,
message message
); );
} }
@@ -610,6 +647,7 @@ function KofiShopOrder(data) {
`${user}`, `${user}`,
`ordered ${itemTotal} item(s) on Ko-fi `, `ordered ${itemTotal} item(s) on Ko-fi `,
`${formattedAmount}`, `${formattedAmount}`,
user,
message message
); );
} }
@@ -634,6 +672,7 @@ function TipeeeStreamDonation(data) {
`${user}`, `${user}`,
`donated $${amount}`, `donated $${amount}`,
``, ``,
user,
message message
); );
else else
@@ -643,6 +682,7 @@ function TipeeeStreamDonation(data) {
`${user}`, `${user}`,
`donated ${currency} ${amount}`, `donated ${currency} ${amount}`,
``, ``,
user,
message message
); );
} }
@@ -684,6 +724,7 @@ function FourthwallOrderPlaced(data) {
`${user}`, `${user}`,
`ordered ${item}`, `ordered ${item}`,
attributeText, attributeText,
user,
message message
); );
} }
@@ -712,6 +753,7 @@ function FourthwallDonation(data) {
`${user}`, `${user}`,
`donated ${formattedAmount}`, `donated ${formattedAmount}`,
'', '',
user,
message message
); );
} }
@@ -739,6 +781,7 @@ function FourthwallSubscriptionPurchased(data) {
`${user}`, `${user}`,
`subscribed ${formattedAmount}`, `subscribed ${formattedAmount}`,
'', '',
user,
'' ''
); );
} }
@@ -779,6 +822,7 @@ function FourthwallGiftPurchase(data) {
`${user}`, `${user}`,
`gifted ${contents}`, `gifted ${contents}`,
attributesText, attributesText,
user,
message message
); );
} }
@@ -797,6 +841,7 @@ function FourthwallGiftDrawStarted(data) {
`<span style="font-size: 1.2em">🎁 ${itemName} Giveaway!</span>`, `<span style="font-size: 1.2em">🎁 ${itemName} Giveaway!</span>`,
`Type !join in the next ${durationSeconds} seconds for your chance to win!`, `Type !join in the next ${durationSeconds} seconds for your chance to win!`,
'', '',
'',
'' ''
); );
} }
@@ -815,6 +860,7 @@ function FourthwallGiftDrawEnded(data) {
`<span style="font-size: 1.2em">🥳 GIVEAWAY ENDED 🥳</span>`, `<span style="font-size: 1.2em">🥳 GIVEAWAY ENDED 🥳</span>`,
`Congratulations ${GetWinnersList(data.gifts)}!`, `Congratulations ${GetWinnersList(data.gifts)}!`,
'', '',
'',
'' ''
); );
} }
@@ -1096,12 +1142,12 @@ function GetWinnersList(gifts) {
// return furryWords.join(''); // return furryWords.join('');
// } // }
function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attributeText, message) { function UpdateAlertBox(platform, avatarURL, headerText, descriptionText, attributeText, username, message) {
// Check if the widget is in the middle of an animation // Check if the widget is in the middle of an animation
// If any alerts are requested while the animation is playing, it should be added to the alert queue // If any alerts are requested while the animation is playing, it should be added to the alert queue
if (widgetLocked) { if (widgetLocked) {
console.debug("Animation is progress, added alert to queue"); console.debug("Animation is progress, added alert to queue");
let data = { platform: platform, avatarURL: avatarURL, usernameText: usernameText, descriptionText: descriptionText, attributeText: attributeText, message: message }; let data = { platform: platform, avatarURL: avatarURL, headerText: headerText, descriptionText: descriptionText, attributeText: attributeText, message: message };
alertQueue.push(data); alertQueue.push(data);
return; return;
} }
@@ -1116,14 +1162,16 @@ function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attr
// Render avatars // Render avatars
if (showAvatar) { if (showAvatar) {
avatarElement.src = avatarURL; avatarElement.src = avatarURL;
avatarSmallElement.src = avatarURL;
} }
// Set labels // Set labels
usernameLabel.innerHTML = usernameText != null ? usernameText : ''; usernameLabel.innerHTML = headerText != null ? headerText : '';
usernameTheSecondLabel.innerHTML = username != null ? username : '';
descriptionLabel.innerHTML = descriptionText != null ? descriptionText : ''; descriptionLabel.innerHTML = descriptionText != null ? descriptionText : '';
attributeLabel.innerHTML = attributeText != null ? attributeText : ''; attributeLabel.innerHTML = attributeText != null ? attributeText : '';
messageLabel.innerHTML = message != null ? `${message}` : ''; messageLabel.innerHTML = message != null ? `${message}` : '';
messageLabel.style.opacity = 0; theContentThatShowsLastInsteadOfFirst.style.opacity = 0;
alertBox.style.height = theContentThatShowsFirstInsteadOfSecond.offsetHeight + 40 + "px"; alertBox.style.height = theContentThatShowsFirstInsteadOfSecond.offsetHeight + 40 + "px";
alertBox.style.animation = 'slideInFromTop 0.5s ease-out forwards'; alertBox.style.animation = 'slideInFromTop 0.5s ease-out forwards';
@@ -1133,13 +1181,11 @@ function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attr
// (3) Calculate the height of message label // (3) Calculate the height of message label
// (4) Set the height of alertBox // (4) Set the height of alertBox
// (a) Add in the CSS animation when this is working // (a) Add in the CSS animation when this is working
setTimeout(() => { setTimeout(() => {
alertBox.style.transition = 'all 0.5s ease-in-out'; alertBox.style.transition = 'all 0.5s ease-in-out';
alertBox.style.height = messageLabel.offsetHeight + 40 + "px"; alertBox.style.height = theContentThatShowsLastInsteadOfFirst.offsetHeight + 40 + "px";
theContentThatShowsFirstInsteadOfSecond.style.opacity = 0; theContentThatShowsFirstInsteadOfSecond.style.opacity = 0;
messageLabel.style.opacity = 1; theContentThatShowsLastInsteadOfFirst.style.opacity = 1;
setTimeout(() => { setTimeout(() => {
alertBox.style.animation = 'slideBackUp 0.5s ease-out forwards'; alertBox.style.animation = 'slideBackUp 0.5s ease-out forwards';
@@ -1147,13 +1193,13 @@ function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attr
setTimeout(() => { setTimeout(() => {
alertBox.style.transition = ''; alertBox.style.transition = '';
theContentThatShowsFirstInsteadOfSecond.style.opacity = 1; theContentThatShowsFirstInsteadOfSecond.style.opacity = 1;
messageLabel.style.opacity = 0; theContentThatShowsLastInsteadOfFirst.style.opacity = 0;
alertBox.style.height = '0px'; alertBox.style.height = '0px';
widgetLocked = false; widgetLocked = false;
if (alertQueue.length > 0) { if (alertQueue.length > 0) {
console.debug("Pulling next alert from the queue"); console.debug("Pulling next alert from the queue");
let data = alertQueue.shift(); let data = alertQueue.shift();
UpdateAlertBox(data.platform, data.avatarURL, data.usernameText, data.descriptionText, data.attributeText, data.message) UpdateAlertBox(data.platform, data.avatarURL, data.headerText, data.descriptionText, data.attributeText, data.message)
} }
}, 1000); }, 1000);
}, messageLabel.innerText.trim() != '' ? animationSpeed : 0); }, messageLabel.innerText.trim() != '' ? animationSpeed : 0);
+66 -272
View File
@@ -1,13 +1,5 @@
{ {
"settings": [ "settings": [
{
"id": "showPlatform",
"label": "Show Platform",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Appearance"
},
{ {
"id": "showAvatar", "id": "showAvatar",
"label": "Show Avatar", "label": "Show Avatar",
@@ -16,46 +8,6 @@
"defaultValue": true, "defaultValue": true,
"group": "Appearance" "group": "Appearance"
}, },
{
"id": "showTimestamps",
"label": "Show Timestamps",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Appearance"
},
{
"id": "showBadges",
"label": "Show Badges",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Appearance"
},
{
"id": "showPronouns",
"label": "Show Pronouns",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Appearance"
},
{
"id": "showUsername",
"label": "Show Username",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Appearance"
},
{
"id": "showMessage",
"label": "Show Message",
"description": "Honestly, if you turn this off, you're stupid lmao",
"type": "checkbox",
"defaultValue": true,
"group": "Appearance"
},
{ {
"id": "font", "id": "font",
"label": "Font", "label": "Font",
@@ -75,13 +27,19 @@
"group": "Appearance" "group": "Appearance"
}, },
{ {
"id": "lineSpacing", "id": "showAvatar",
"label": "Line Spacing", "label": "Show Avatar",
"description": "", "description": "",
"type": "number", "type": "checkbox",
"min": 0, "defaultValue": true,
"defaultValue": 1.7, "group": "Appearance"
"step": ".1", },
{
"id": "useCustomBackground",
"label": "Use Custom Background",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Appearance" "group": "Appearance"
}, },
{ {
@@ -106,254 +64,90 @@
{ {
"id": "hideAfter", "id": "hideAfter",
"label": "Hide After", "label": "Hide After",
"description": "Messages fade after X seconds (0 to disable)", "description": "Alerts will show for X seconds",
"type": "number", "type": "number",
"min": 0, "min": 1,
"max": 120, "max": 120,
"defaultValue": 0, "defaultValue": 0,
"group": "General" "group": "General"
}, },
{ {
"id": "excludeCommands", "id": "showAnimation",
"label": "Exclude Commands", "label": "Show Animation",
"description": "Hide messages starting with \"!\"",
"type": "checkbox",
"defaultValue": true,
"group": "General"
},
{
"id": "ignoreChatters",
"label": "Ignore Chatters",
"description": "Ignored chatters will not be shown",
"type": "text",
"defaultValue": "StreamElements,Streamlabs",
"group": "General"
},
{
"id": "scrollDirection",
"label": "Scroll Direction",
"description": "", "description": "",
"type": "select", "type": "select",
"options": [ "options": [
{ {
"value": 1, "value": "fade-in",
"label": "Normal" "label": "Fade In"
}, },
{ {
"value": 2, "value": "slide-from-top",
"label": "Reversed" "label": "Slide From Top"
},
{
"value": "slide-from-bottom",
"label": "Slide From Bottom"
},
{
"value": "slide-from-left",
"label": "Slide From Left"
},
{
"value": "slide-from-right",
"label": "Slide From Right"
} }
], ],
"defaultValue": 1, "defaultValue": "fade-in",
"group": "General" "group": "General"
}, },
{ {
"id": "inlineChat", "id": "hideAnimation",
"label": "In-line Chat", "label": "Hide Animation",
"description": "Remove the line space after the username",
"type": "checkbox",
"defaultValue": false,
"group": "General"
},
{
"id": "imageEmbedPermissionLevel",
"label": "Embed Images",
"description": "Automatically embed images for these users",
"type": "select",
"options": [
{
"value": 40,
"label": "Broadcaster"
},
{
"value": 30,
"label": "Mods & Broadcaster"
},
{
"value": 20,
"label": "VIPs, Mods & Broadcaster"
},
{
"value": 15,
"label": "Subs, VIPs, Mods & Broadcaster"
},
{
"value": 10,
"label": "Everyone"
},
{
"value": 69420,
"label": "Nobody"
}
],
"defaultValue": 20,
"group": "General"
},
{
"id": "showTwitchMessages",
"label": "Chat Messages",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which Twitch messages do you want to see?"
},
{
"id": "showTwitchAnnouncements",
"label": "Announcements",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which Twitch messages do you want to see?"
},
{
"id": "showTwitchSubs",
"label": "New Subscribers",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which Twitch messages do you want to see?"
},
{
"id": "showTwitchChannelPointRedemptions",
"label": "Channel Point Redemptions",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which Twitch messages do you want to see?"
},
{
"id": "showTwitchRaids",
"label": "Raids",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which Twitch messages do you want to see?"
},
{
"id": "showTwitchSharedChat",
"label": "Shared Chat Messages",
"description": "", "description": "",
"type": "select", "type": "select",
"options": [ "options": [
{ {
"value": 2, "value": "fade-out",
"label": "Show & Highlight" "label": "Fade Out"
}, },
{ {
"value": 1, "value": "slide-top",
"label": "Show but do not highlight" "label": "Slide Top"
}, },
{ {
"value": 0, "value": "slide-bottom",
"label": "Do not show" "label": "Slide Bottom"
},
{
"value": "slide-left",
"label": "Slide Left"
},
{
"value": "slide-right",
"label": "Slide Right"
} }
], ],
"defaultValue": 2, "defaultValue": "fade-in",
"group": "Which Twitch messages do you want to see?" "group": "General"
}, },
{ {
"id": "showYouTubeMessages", "id": "alignment",
"label": "Chat Messages", "label": "Alignment",
"description": "", "description": "",
"type": "checkbox", "type": "select",
"defaultValue": true, "options": [
"group": "Which YouTube messages do you want to see?" {
}, "value": "align-to-bottom",
{ "label": "Align To Bottom"
"id": "showYouTubeSuperChats", },
"label": "Super Chats", {
"description": "", "value": "align-to-top",
"type": "checkbox", "label": "Align To Top"
"defaultValue": true, }
"group": "Which YouTube messages do you want to see?" ],
}, "defaultValue": "align-to-bottom",
{ "group": "General"
"id": "showYouTubeSuperStickers",
"label": "Super Stickers",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which YouTube messages do you want to see?"
},
{
"id": "showYouTubeMemberships",
"label": "Memberships",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which YouTube messages do you want to see?"
},
{
"id": "showStreamlabsDonations",
"label": "Streamlabs Tips",
"description": "<a href=\"https://docs.streamer.bot/guide/integrations/streamlabs\" target=\"_blank\">Click to connect</a>",
"type": "checkbox",
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
{
"id": "showStreamElementsTips",
"label": "StreamElements Tips",
"description": "<a href=\"https://docs.streamer.bot/guide/integrations/streamelements\" target=\"_blank\">Click to connect</a>",
"type": "checkbox",
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
{
"id": "showPatreonMemberships",
"label": "Patreon Memberships",
"description": "<a href=\"https://docs.streamer.bot/guide/integrations/patreon\" target=\"_blank\">Click to connect</a>",
"type": "checkbox",
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
{
"id": "showKofiDonations",
"label": "Ko-fi Donations",
"description": "<a href=\"https://docs.streamer.bot/guide/integrations/ko-fi\" target=\"_blank\">Click to connect</a>",
"type": "checkbox",
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
{
"id": "showTipeeeStreamDonations",
"label": "TipeeeStream Donations",
"description": "<a href=\"https://docs.streamer.bot/guide/integrations/tipeee-stream\" target=\"_blank\">Click to connect</a>",
"type": "checkbox",
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
{
"id": "showFourthwallAlerts",
"label": "Fourthwall Alerts",
"description": "<a href=\"https://docs.streamer.bot/guide/integrations/fourthwall\" target=\"_blank\">Click to connect</a>",
"type": "checkbox",
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
{
"id": "furryMode",
"label": "Furry Mode",
"description": "Meow",
"type": "checkbox",
"defaultValue": false,
"group": "Very Important Stuff"
},
{
"id": "address",
"label": "Address",
"description": "Streamer.bot Websocket Server Address",
"type": "text",
"defaultValue": "127.0.0.1",
"group": "Advanced"
},
{
"id": "port",
"label": "Port",
"description": "Streamer.bot Websocket Server Port",
"type": "text",
"defaultValue": "8080",
"group": "Advanced"
} }
] ]
} }
+98 -1
View File
@@ -40,6 +40,7 @@ html {
display: block; display: block;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%;
padding: calc(2 * var(--margin)); padding: calc(2 * var(--margin));
box-sizing: border-box; box-sizing: border-box;
} }
@@ -84,6 +85,17 @@ html {
transition: inherit; transition: inherit;
} }
#theContentThatShowsLastInsteadOfFirst {
position: absolute;
display: block;
align-items: center;
z-index: 0;
position: absolute;
left: var(--margin);
top: var(--margin);
transition: inherit;
}
#avatar { #avatar {
display: inline; display: inline;
max-width: 100%; max-width: 100%;
@@ -93,6 +105,15 @@ html {
margin-right: 0.75em; margin-right: 0.75em;
} }
#avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes {
display: inline;
max-width: 100%;
height: 2em;
filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.5));
object-fit: cover;
margin-right: 0.75em;
}
#contents { #contents {
flex-grow: 1; flex-grow: 1;
} }
@@ -102,6 +123,11 @@ html {
font-weight: 600; font-weight: 600;
} }
#usernameTheSecond {
font-size: 1em;
font-weight: 600;
}
#description { #description {
font-size: 1em; font-size: 1em;
font-weight: 400; font-weight: 400;
@@ -121,7 +147,6 @@ html {
} }
#message { #message {
position: absolute;
width: calc(100% - 2 * var(--margin)); width: calc(100% - 2 * var(--margin));
z-index: 0; z-index: 0;
left: var(--margin); left: var(--margin);
@@ -154,6 +179,78 @@ html {
} }
} }
@keyframes slideInFromBottom {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideBackDown {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100%);
opacity: 0;
}
}
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideBackLeft {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes slideInFromRight {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideBackRight {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
/*****************/ /*****************/
/** CARD COLORS **/ /** CARD COLORS **/
/*****************/ /*****************/