Перенос чатов из другого репозитория
This commit is contained in:
17
StreamLabsChats/sonya/generation 1/index.html
Normal file
17
StreamLabsChats/sonya/generation 1/index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<div id="chatbox" class="sl__chat__layout">
|
||||
<a class="font-1">1</a>
|
||||
</div>
|
||||
|
||||
<script type="text/template" id="chatlist_item">
|
||||
<message id="{messageId}">
|
||||
<author>{from}</author>
|
||||
<content>{message}</content>
|
||||
</message>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="chatlist_event">
|
||||
<event id="{messageId}">
|
||||
<author>{author}</author>
|
||||
<content>{content}</content>
|
||||
</event>
|
||||
</script>
|
||||
510
StreamLabsChats/sonya/generation 1/script.js
Normal file
510
StreamLabsChats/sonya/generation 1/script.js
Normal file
@ -0,0 +1,510 @@
|
||||
let $chatBox = $(".sl__chat__layout");
|
||||
|
||||
let usersPfp = {};
|
||||
let parity = true;
|
||||
|
||||
let emoteSetId;
|
||||
let websocketEmotesConnected = false;
|
||||
let globalEmotes = [];
|
||||
let channelEmotes = [];
|
||||
let subMysteries = [];
|
||||
|
||||
let messageProcessingList = [
|
||||
detachMessage,
|
||||
loadGlobalEmotes,
|
||||
loadChannelEmotes,
|
||||
processTags,
|
||||
getProfilePicture,
|
||||
cleanText,
|
||||
userPings,
|
||||
upscaleBadges,
|
||||
upscaleEmotes,
|
||||
process7TVEmotes,
|
||||
fixEmotesPadding,
|
||||
largeEmotes,
|
||||
parityParse,
|
||||
preloadImages,
|
||||
animate,
|
||||
];
|
||||
|
||||
$(document).on("onEventReceived", function (event) {
|
||||
let details = event.detail;
|
||||
let command = details.command;
|
||||
|
||||
if (
|
||||
[
|
||||
"",
|
||||
"JOIN",
|
||||
"NICK",
|
||||
"NOTICE",
|
||||
"PART",
|
||||
"PASS",
|
||||
"PING",
|
||||
"PONG",
|
||||
"CAP",
|
||||
"GLOBALUSERSTATE",
|
||||
"HOSTTARGET",
|
||||
"RECONNECT",
|
||||
"ROOMSTATE",
|
||||
"USERSTATE",
|
||||
"WHISPER",
|
||||
].includes(command)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (command) {
|
||||
case "PRIVMSG":
|
||||
commandPRIVMSG(details);
|
||||
break;
|
||||
|
||||
case "USERNOTICE":
|
||||
commandUSERNOTICE(details);
|
||||
break;
|
||||
|
||||
case "CLEARCHAT":
|
||||
commandClearCHAT(details);
|
||||
break;
|
||||
|
||||
case "CLEARMSG":
|
||||
commandClearMSG(details);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log(`Event ${command} not handled.`, details);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
async function nextFunction(
|
||||
$messageElement,
|
||||
$parentElement,
|
||||
details,
|
||||
functions
|
||||
) {
|
||||
if (functions[0] != undefined)
|
||||
await functions[0](
|
||||
$messageElement,
|
||||
$parentElement,
|
||||
details,
|
||||
functions.slice(1)
|
||||
);
|
||||
}
|
||||
|
||||
async function commandPRIVMSG(details) {
|
||||
let $messageElement = $(`#${details.messageId}`);
|
||||
let $parentElement = $messageElement.parent() || $chatBox;
|
||||
|
||||
if (details.body == '!event' && details.tags['user-id'] == details.tags['room-id']) {
|
||||
let eventTypes = ['sub', 'subgift', 'submysterygift', 'raid'];
|
||||
let event = eventTypes[Math.floor(Math.random()*eventTypes.length)];
|
||||
details.tags['msg-id'] = event;
|
||||
return commandUSERNOTICE(details);
|
||||
}
|
||||
|
||||
if (!$messageElement.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
await nextFunction(
|
||||
$messageElement,
|
||||
$parentElement,
|
||||
details,
|
||||
messageProcessingList
|
||||
);
|
||||
}
|
||||
|
||||
async function commandUSERNOTICE(details) {
|
||||
let $eventElement = $('#chatlist_event')
|
||||
let eventType = details.tags['msg-id']
|
||||
let author = details.tags['display-name']
|
||||
let content;
|
||||
let type;
|
||||
|
||||
let displayName = details.tags['display-name']
|
||||
let recipient = details.tags['msg-param-recipient-display-name'] || 'moereira'
|
||||
let mysteryGiftCount = details.tags['msg-param-mass-gift-count'] || 100
|
||||
let viewerCount = details.tags['msg-param-viewerCount'] || 100
|
||||
|
||||
if (!$eventElement.length) {
|
||||
return
|
||||
}
|
||||
|
||||
switch (eventType) {
|
||||
case 'sub':
|
||||
case 'resub':
|
||||
case 'standardpayforward':
|
||||
case 'communitypayforward':
|
||||
case 'giftpaidupgrade':
|
||||
case 'primepaidupgrade':
|
||||
content = 'subscribed'
|
||||
type = 'sub';
|
||||
break;
|
||||
case 'subgift':
|
||||
case 'anonsubgift':
|
||||
if (subMysteries.includes(details.tags['msg-param-origin-id'])) return
|
||||
content = `gifted a sub to ${recipient}`;
|
||||
type = 'gift';
|
||||
break;
|
||||
case 'submysterygift':
|
||||
if (subMysteries.includes(details.tags['msg-param-origin-id'])) return
|
||||
content = `gifted a sub to<br> ${recipient}`;
|
||||
content = `gifted ${mysteryGiftCount} subs`;
|
||||
type = 'gift';
|
||||
break;
|
||||
case 'raid':
|
||||
content = `raided with ${viewerCount} viewers`;
|
||||
type = 'raid';
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
$eventElement = $eventElement.html()
|
||||
$eventElement = $eventElement.replace('{messageId}', details.messageId)
|
||||
$eventElement = $eventElement.replace('{author}', author)
|
||||
$eventElement = $eventElement.replace('{content}', content)
|
||||
$eventElement = $($eventElement)
|
||||
|
||||
$eventElement.addClass(type)
|
||||
$eventElement.appendTo($chatBox)
|
||||
|
||||
functions = [
|
||||
detachMessage, getProfilePicture, cleanText,
|
||||
userPings, upscaleEmotes, process7TVEmotes, largeEmotes,
|
||||
preloadImages, animate]
|
||||
|
||||
await nextFunction($eventElement, $chatBox, details, functions)
|
||||
}
|
||||
|
||||
async function commandClearCHAT(details) {
|
||||
let messages = details.body
|
||||
? $(`[userId="${details.tags["target-user-id"]}"]`)
|
||||
: $("message");
|
||||
for (let i = 0; i < messages.length; i++) {
|
||||
const message = messages.eq(i);
|
||||
setTimeout(() => {
|
||||
message.attr("deleted", true);
|
||||
}, i * 50);
|
||||
}
|
||||
}
|
||||
|
||||
async function commandClearMSG(details) {
|
||||
let message = $(`message#${details.messageId}`);
|
||||
message.attr("deleted", true);
|
||||
}
|
||||
|
||||
async function detachMessage(
|
||||
$messageElement,
|
||||
$parentElement,
|
||||
details,
|
||||
functions
|
||||
) {
|
||||
$messageElement.detach();
|
||||
$messageElement.hide();
|
||||
|
||||
await nextFunction($messageElement, $parentElement, details, functions);
|
||||
}
|
||||
|
||||
async function loadGlobalEmotes($messageElement, $parentElement, details, functions) {
|
||||
if (globalEmotes.length == 0) {
|
||||
fetch('https://7tv.io/v3/emote-sets/global')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Global emotes: Error: (${response.status})`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log(`Global emotes: Success (${data.emotes.length})`);
|
||||
globalEmotes = data.emotes;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error.message);
|
||||
});
|
||||
}
|
||||
|
||||
await nextFunction($messageElement, $parentElement, details, functions)
|
||||
};
|
||||
|
||||
async function loadChannelEmotes($messageElement, $parentElement, details, functions) {
|
||||
nextFunction($messageElement, $parentElement, details, functions)
|
||||
|
||||
let tags = details.tags;
|
||||
let roomId = tags['room-id'];
|
||||
|
||||
if (!emoteSetId) {
|
||||
try {
|
||||
let response = await fetch(`https://7tv.io/v3/users/twitch/${roomId}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Channel emotes: Error: (${response.status})`);
|
||||
}
|
||||
let data = await response.json();
|
||||
console.log(`Channel emotes: Success (${data.emote_set.emotes.length})`);
|
||||
channelEmotes = data.emote_set.emotes;
|
||||
emoteSetId = data.emote_set.id;
|
||||
} catch (error) {
|
||||
console.log(error.message);
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (!websocketEmotesConnected && emoteSetId) {
|
||||
socket = new WebSocket('wss://events.7tv.io/v3');
|
||||
websocketEmotesConnected = true;
|
||||
|
||||
socket.onopen = function (event) {
|
||||
console.log('Connected to 7TV WebSocket');
|
||||
socket.send(JSON.stringify({
|
||||
'op': 35,
|
||||
'd': {
|
||||
'type': 'emote_set.update',
|
||||
'condition': {
|
||||
'object_id': emoteSetId
|
||||
}
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
socket.onmessage = function (event) {
|
||||
let data = JSON.parse(event.data);
|
||||
|
||||
switch (data.op) {
|
||||
case 0:
|
||||
let eventData = data.d.body;
|
||||
|
||||
if (eventData.hasOwnProperty('pulled')) {
|
||||
let emoteId = eventData.pulled[0].old_value.id;
|
||||
channelEmotes = channelEmotes.filter(obj =>
|
||||
obj.id !== emoteId);
|
||||
};
|
||||
if (eventData.hasOwnProperty('pushed')) {
|
||||
let emoteData = eventData.pushed[0].value;
|
||||
channelEmotes.push(emoteData);
|
||||
};
|
||||
if (eventData.hasOwnProperty('updated')) {
|
||||
let emoteId = eventData.updated[0].old_value.id;
|
||||
let emoteData = eventData.updated[0].value;
|
||||
|
||||
let emoteIndex = channelEmotes.findIndex(
|
||||
obj => obj.id === emoteId);
|
||||
|
||||
if (emoteIndex !== -1) {
|
||||
channelEmotes[emoteIndex] = emoteData;
|
||||
};
|
||||
};
|
||||
|
||||
break;
|
||||
case 4:
|
||||
socket.close();
|
||||
websocketEmotesConnected = false;
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
socket.onerror = function (error) {
|
||||
console.error('WebSocket error:', error);
|
||||
};
|
||||
|
||||
socket.onclose = function (event) {
|
||||
console.log('WebSocket closed:', event.code, event.reason);
|
||||
websocketEmotesConnected = false;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async function processTags(
|
||||
$messageElement,
|
||||
$parentElement,
|
||||
details,
|
||||
functions
|
||||
) {
|
||||
let tags = details.tags;
|
||||
let info = tags["badge-info"];
|
||||
let badges = tags.badges.split(",");
|
||||
let msgId = tags["msg-id"];
|
||||
|
||||
if (info) {
|
||||
let badge = info.replace("/", "-");
|
||||
$messageElement.addClass(badge);
|
||||
}
|
||||
|
||||
badges.forEach((badge) => {
|
||||
let name = badge.split("/")[0];
|
||||
if (name) {
|
||||
$messageElement.addClass(name);
|
||||
}
|
||||
});
|
||||
|
||||
$messageElement.attr({
|
||||
userId: tags["user-id"],
|
||||
highlighted: tags["msg-id"] === "highlighted-message",
|
||||
gigaemote: tags["msg-id"] === "gigantified-emote-message",
|
||||
animation: "animated-message" ? tags["animation-id"] : "",
|
||||
"first-msg": tags["first-msg"] === true && msgId !== "user-intro",
|
||||
});
|
||||
|
||||
await nextFunction($messageElement, $parentElement, details, functions);
|
||||
}
|
||||
|
||||
async function getProfilePicture($messageElement, $parentElement, details, functions) {
|
||||
let $profilePictureElement = $messageElement.find('pfp').eq(0);
|
||||
let userId = details.tags['user-id'];
|
||||
|
||||
if ($profilePictureElement.length != 0 && !(userId in usersPfp)) {
|
||||
try { let response = await fetch('https' + '://st' + 'reaml' + 'abs.c' + 'om/ap' + 'i/v5/' + 'helix' + '/user' + 's?bro' + 'adcas' + 'ter_i' + 'd=' + userId); if (!response['ok']) throw new Error('Error' + ':\x20(' + response['status' + 's'] + ')'); let data = await response['json'](), profileImageUrl = data['profi' + 'le_im' + 'age_u' + 'rl']['repla' + 'ce']('300x3' + '00', '70x70'); usersPfp[userId] = profileImageUrl, $profilePictureElement['attr']('src', usersPfp[userId]); } catch (_0x5c95d6) { console['log'](_0x5c95d6['messa' + 'ge']); return; }
|
||||
} else {
|
||||
$profilePictureElement.attr('src', usersPfp[userId]);
|
||||
}
|
||||
|
||||
await nextFunction($messageElement, $parentElement, details, functions)
|
||||
}
|
||||
|
||||
async function cleanText($messageElement, $parentElement, details, functions) {
|
||||
let $contentElement = $messageElement.find('content').eq(0);
|
||||
let specialChar = new TextDecoder().decode(new Uint8Array([243, 160, 128, 128]));
|
||||
let cleanedHTML = $contentElement.html().replaceAll(specialChar, '').replaceAll('\n', '');
|
||||
|
||||
$contentElement.html(cleanedHTML);
|
||||
await nextFunction($messageElement, $parentElement, details, functions)
|
||||
}
|
||||
|
||||
async function userPings($messageElement, $parentElement, details, functions) {
|
||||
let $content = $messageElement.find('content');
|
||||
let contentHTML = $content.html();
|
||||
let pings = $content.text().match(/@\w+/g) || [];
|
||||
|
||||
pings.forEach(user => {
|
||||
contentHTML = contentHTML.replace(
|
||||
new RegExp(user, 'g'),
|
||||
`<user-ping>${user}</user-ping>`
|
||||
);
|
||||
});
|
||||
|
||||
$content.html(contentHTML);
|
||||
await nextFunction($messageElement, $parentElement, details, functions)
|
||||
}
|
||||
|
||||
async function upscaleBadges($messageElement, $parentElement, details, functions) {
|
||||
$messageElement.find('.badge').each(function () {
|
||||
let $badge = $(this);
|
||||
let $badgeImage = $badge.children('img').eq(0);
|
||||
|
||||
if ($badgeImage.attr('src').includes('jtvnw')) {
|
||||
$badgeImage.attr('src', function (index, oldSrc) {
|
||||
return oldSrc.replace('1.0', '4.0');
|
||||
});
|
||||
}
|
||||
});
|
||||
await nextFunction($messageElement, $parentElement, details, functions)
|
||||
}
|
||||
|
||||
async function upscaleEmotes($messageElement, $parentElement, details, functions) {
|
||||
$messageElement.find('.emote').each(function () {
|
||||
let $emote = $(this);
|
||||
let $emoteImage = $emote.children('img').eq(0);
|
||||
|
||||
if ($emoteImage.attr('src').includes('jtvnw')) {
|
||||
$emoteImage.attr('src', function (index, oldSrc) {
|
||||
return oldSrc.replace('1.0', '4.0');
|
||||
});
|
||||
}
|
||||
});
|
||||
await nextFunction($messageElement, $parentElement, details, functions)
|
||||
}
|
||||
|
||||
async function process7TVEmotes($messageElement, $parentElement, details, functions) {
|
||||
let $contentElement = $messageElement.find('content').eq(0);
|
||||
let $headElement = $contentElement.find('head').eq(0);
|
||||
let $content = ` ${$contentElement.html()} `;
|
||||
let emotes = globalEmotes.concat(channelEmotes);
|
||||
|
||||
if ($headElement[0] != undefined) {
|
||||
$content = $content.replace($headElement[0].outerHTML,
|
||||
` ${$headElement[0].outerHTML} `);
|
||||
}
|
||||
|
||||
emotes.forEach(emote => {
|
||||
let temp_text = '';
|
||||
let emoteSrc = `https://${emote.data.host.url}/4x.avif`;
|
||||
let emoteClasses = 'emote';
|
||||
|
||||
if (emote.flags == 1) {
|
||||
emoteClasses = 'emote zero-width';
|
||||
};
|
||||
|
||||
while (($content = (temp_text = $content).replace(
|
||||
` ${emote.name} `,
|
||||
` <span class="${emoteClasses}"><img src="${emoteSrc}"></span> `
|
||||
)) !== temp_text) { }
|
||||
});
|
||||
|
||||
$contentElement.html($content);
|
||||
$contentElement.find('.zero-width').each(function () {
|
||||
let previousSibling = this.previousSibling.nodeValue;
|
||||
|
||||
if (previousSibling && previousSibling.trim() === '') {
|
||||
this.children[0].classList.add('zero-width');
|
||||
this.previousElementSibling.innerHTML += this.innerHTML;
|
||||
this.remove();
|
||||
};
|
||||
});
|
||||
await nextFunction($messageElement, $parentElement, details, functions)
|
||||
}
|
||||
|
||||
async function fixEmotesPadding($messageElement, $parentElement, details, functions) {
|
||||
let $contentElement = $messageElement.find('content').eq(0);
|
||||
|
||||
$contentElement.find('.emote').each(function () {
|
||||
let previousSibling = this.previousSibling.nodeValue;
|
||||
let nextSibling = this.nextSibling.nodeValue;
|
||||
|
||||
if (previousSibling && previousSibling.trim() === '') {
|
||||
this.classList.add('emote-left');
|
||||
};
|
||||
|
||||
if (nextSibling && nextSibling.trim() === '') {
|
||||
this.classList.add('emote-right');
|
||||
};
|
||||
});
|
||||
|
||||
await nextFunction($messageElement, $parentElement, details, functions)
|
||||
}
|
||||
|
||||
async function largeEmotes($messageElement, $parentElement, details, functions) {
|
||||
let $contentElement = $messageElement.find('content').eq(0);
|
||||
let $content = $contentElement.clone().find('head').remove().end().text().replace(/\s+/g, '');
|
||||
let emoteCount = $messageElement.find('.emote').length;
|
||||
|
||||
$messageElement.attr('large-emotes', !$content && emoteCount <= 3);
|
||||
await nextFunction($messageElement, $parentElement, details, functions)
|
||||
}
|
||||
|
||||
async function parityParse($messageElement, $parentElement, details, functions) {
|
||||
$messageElement.attr('parity', parity ? 'even' : 'odd');
|
||||
parity = !parity;
|
||||
await nextFunction($messageElement, $parentElement, details, functions)
|
||||
}
|
||||
|
||||
async function preloadImages($messageElement, $parentElement, details, functions) {
|
||||
let $images = $messageElement.find('img');
|
||||
let imagesCount = $images.length;
|
||||
|
||||
if (imagesCount > 0) {
|
||||
let imagesLoaded = 0;
|
||||
$images.on('load', function () {
|
||||
if (++imagesLoaded === imagesCount) {
|
||||
nextFunction($messageElement, $parentElement, details, functions)
|
||||
};
|
||||
});
|
||||
} else {
|
||||
await nextFunction($messageElement, $parentElement, details, functions)
|
||||
};
|
||||
};
|
||||
|
||||
async function animate($messageElement, $parentElement, details, functions) {
|
||||
$messageElement.appendTo($parentElement).slideDown(700, function () {
|
||||
$messageElement.get(0).style.setProperty('--max-height',
|
||||
`${$messageElement.outerHeight()}px`);
|
||||
}).animate({}, 700);
|
||||
}
|
||||
1
StreamLabsChats/sonya/generation 1/static/bow.svg
Normal file
1
StreamLabsChats/sonya/generation 1/static/bow.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="34" fill="none"><mask id="a" width="14" height="28" x="1" y="5" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#ABAFBC" d="M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z"/><path fill="#A8ACB9" d="M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z"/><g opacity=".62" style="mix-blend-mode:plus-lighter"><path fill="#ABAFBC" d="M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z"/><path fill="#A8ACB9" d="M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z"/></g><g opacity=".83"><path fill="#A8ACB9" d="M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z"/><path fill="#A8ACB9" d="M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z" opacity=".65" style="mix-blend-mode:plus-lighter"/></g></mask><g mask="url(#a)"><path fill="#AAAEBC" d="M-1.395 2.367 15.238-.714l6.001 32.393-16.632 3.082z"/></g><path fill="url(#b)" d="M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z"/><path fill="url(#c)" d="M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z"/><g opacity=".62" style="mix-blend-mode:plus-lighter"><path fill="url(#d)" d="M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z"/><path fill="url(#e)" d="M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z"/></g><g opacity=".83"><path fill="url(#f)" d="M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z"/><path fill="url(#g)" d="M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z" opacity=".65" style="mix-blend-mode:plus-lighter"/></g><defs><linearGradient id="b" x1="4.306" x2="8.305" y1="10.845" y2="32.426" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF1F5"/><stop offset="1" stop-color="#FBDFE2"/></linearGradient><linearGradient id="c" x1="6.924" x2="9.012" y1="9.263" y2="20.529" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF2F6"/><stop offset="1" stop-color="#FADBDE"/></linearGradient><linearGradient id="d" x1="4.306" x2="8.305" y1="10.845" y2="32.426" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF1F5"/><stop offset="1" stop-color="#FBDFE2"/></linearGradient><linearGradient id="e" x1="6.924" x2="9.012" y1="9.263" y2="20.529" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF2F6"/><stop offset="1" stop-color="#FADBDE"/></linearGradient><linearGradient id="f" x1="4.873" x2="14.082" y1="6.695" y2="13.513" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF2F6"/><stop offset="1" stop-color="#FADBDE"/></linearGradient><linearGradient id="g" x1="4.873" x2="14.082" y1="6.695" y2="13.513" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF2F6"/><stop offset="1" stop-color="#FADBDE"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
1
StreamLabsChats/sonya/generation 1/static/dots.svg
Normal file
1
StreamLabsChats/sonya/generation 1/static/dots.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="2" height="15" fill="none"><circle cx="1.002" cy="1.633" r="1" fill="#fff"/><circle cx="1.002" cy="13.633" r="1" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 180 B |
1
StreamLabsChats/sonya/generation 1/static/petals.svg
Normal file
1
StreamLabsChats/sonya/generation 1/static/petals.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="51" height="9" fill="none"><path fill="url(#a)" d="M4.54 8.013C2.032 8.013 0 6.255 0 4.085S2.032.156 4.54.156c1.424 0 3.314 1.267 4.681 2.362a1.986 1.986 0 0 1 0 3.133C7.854 6.746 5.964 8.013 4.54 8.013Z"/><path fill="url(#b)" d="M24.54 8.013c-2.508 0-4.54-1.758-4.54-3.928S22.032.156 24.54.156c1.424 0 3.314 1.267 4.681 2.362a1.986 1.986 0 0 1 0 3.133c-1.367 1.095-3.258 2.362-4.681 2.362Z"/><path fill="url(#c)" d="M44.54 8.013c-2.508 0-4.54-1.758-4.54-3.928S42.032.156 44.54.156c1.424 0 3.314 1.267 4.681 2.362a1.986 1.986 0 0 1 0 3.133c-1.367 1.095-3.257 2.362-4.681 2.362Z"/><defs><linearGradient id="a" x1="0" x2="11" y1="4.085" y2="4.085" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF1FA"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="b" x1="20" x2="31" y1="4.085" y2="4.085" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF1FA"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="c" x1="40" x2="51" y1="4.085" y2="4.085" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF1FA"/><stop offset="1" stop-color="#fff"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="32" fill="none"><path fill="#fff" d="M14.923 11.178a2 2 0 0 1 3.154 0l.514.66c.232.296.541.52.895.649l.786.286a2 2 0 0 1 .975 3l-.469.692a2 2 0 0 0-.341 1.052l-.029.836a2 2 0 0 1-2.551 1.853l-.804-.23a1.999 1.999 0 0 0-1.106 0l-.804.23a2 2 0 0 1-2.551-1.853l-.029-.837a2 2 0 0 0-.341-1.05l-.469-.694a2 2 0 0 1 .975-3l.786-.285c.354-.128.663-.353.895-.65l.514-.66Z"/><path stroke="#fff" stroke-dasharray="0.1 6" stroke-linecap="round" d="M14.15 1.27a15 15 0 1 0 13.684 24.103"/></svg>
|
||||
|
After Width: | Height: | Size: 543 B |
1
StreamLabsChats/sonya/generation 1/static/star.svg
Normal file
1
StreamLabsChats/sonya/generation 1/static/star.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" fill="none"><path fill="url(#a)" d="M10.752 4.884c0 1.743-1.223 3.156-2.732 3.156-1.51 0-2.732-1.413-2.733-3.157 0-.973.852-2.26 1.604-3.207a1.426 1.426 0 0 1 2.257 0c.752.947 1.604 2.234 1.604 3.208Z"/><path fill="url(#b)" d="M5.408 4.76c1.744 0 3.158 1.223 3.158 2.731 0 1.51-1.413 2.732-3.157 2.732-.974 0-2.26-.852-3.207-1.604a1.426 1.426 0 0 1 0-2.256c.946-.753 2.233-1.604 3.206-1.604Z"/><path fill="url(#c)" d="M5.287 9.554c0-1.744 1.223-3.157 2.732-3.157 1.51 0 2.732 1.414 2.733 3.157 0 .974-.852 2.26-1.604 3.207a1.426 1.426 0 0 1-2.257 0c-.752-.947-1.604-2.234-1.604-3.207Z"/><path fill="url(#d)" d="M11.177 4.758c-1.744 0-3.157 1.223-3.157 2.732 0 1.509 1.413 2.732 3.157 2.732.973 0 2.26-.85 3.207-1.603a1.426 1.426 0 0 0 0-2.257c-.947-.752-2.234-1.603-3.207-1.604Z"/><defs><linearGradient id="a" x1="8.019" x2="8.019" y1=".391" y2="8.04" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF1FA"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="b" x1="4.741" x2="4.74" y1="4.759" y2="10.223" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF1FA"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="c" x1="8.019" x2="8.019" y1="6.397" y2="14.047" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF1FA"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="d" x1="11.845" x2="11.845" y1="10.222" y2="4.759" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF1FA"/><stop offset="1" stop-color="#fff"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
StreamLabsChats/sonya/generation 1/static/sword.svg
Normal file
1
StreamLabsChats/sonya/generation 1/static/sword.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"><path fill="url(#a)" d="M7.143 10.511a.735.735 0 0 1-.798 1.201.733.733 0 0 1-.238-.164L5.07 10.51l-2.074 2.074a.734.734 0 0 1-1.037 1.037L.922 12.585a.733.733 0 0 1 1.037-1.037l2.074-2.074-1.037-1.037a.733.733 0 0 1 1.037-1.036l3.11 3.11Zm.52-.518L4.55 6.882 10.773.66l2.593.519.518 2.592-6.221 6.222Z"/><defs><linearGradient id="a" x1="7.295" x2="7.295" y1=".66" y2="13.837" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#FFF2F6"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 578 B |
9
StreamLabsChats/sonya/generation 1/static/vip.svg
Normal file
9
StreamLabsChats/sonya/generation 1/static/vip.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.1641 0.785156C11.262 0.785158 11.3586 0.807536 11.4467 0.850622C11.5348 0.893708 11.6122 0.956388 11.6731 1.03399L11.7212 1.10508L13.6712 4.39653C13.7351 4.50446 13.7671 4.62866 13.7634 4.75443C13.7597 4.8802 13.7205 5.00226 13.6504 5.10616L13.5984 5.17397L8.0538 11.4494C7.95084 11.5558 7.82795 11.6403 7.69234 11.6979C7.55672 11.7556 7.41111 11.7852 7.26403 11.7852C7.00402 11.7852 6.75377 11.693 6.54251 11.5106L6.45476 11.4277L0.929626 5.17397C0.846504 5.08004 0.791777 4.9639 0.771957 4.83938C0.752136 4.71486 0.768056 4.58719 0.817823 4.47157L0.856824 4.39587L2.81532 1.08994L2.85692 1.0307C2.88675 0.99328 2.92053 0.959285 2.95767 0.929321L3.01553 0.887191L3.07273 0.854277L3.10523 0.839136L3.14423 0.822679L3.21508 0.801614L3.28788 0.788448L3.36393 0.785156H11.1641Z" fill="url(#paint0_linear_1587_171)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1587_171" x1="7.26367" y1="0.785156" x2="7.26367" y2="11.7852" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFEEF9"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
276
StreamLabsChats/sonya/generation 1/style.css
Normal file
276
StreamLabsChats/sonya/generation 1/style.css
Normal file
@ -0,0 +1,276 @@
|
||||
/* Imports */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
/* Fonts */
|
||||
--font-size: 35px;
|
||||
--font-family-1: "Nunito", serif;
|
||||
|
||||
/* Emotes */
|
||||
--emote-size: calc(var(--font-size) * 2);
|
||||
--emote-size-xl: calc(var(--font-size) * 4);
|
||||
--emote-size-xxl: calc(var(--font-size) * 8);
|
||||
|
||||
/* Badges */
|
||||
--badge-size: 25px;
|
||||
}
|
||||
|
||||
/* Main styling */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(to top,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(0, 0, 0, 1) 75%,
|
||||
rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
|
||||
content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.font-1 {
|
||||
opacity: 0;
|
||||
font-family: var(--font-family-1);
|
||||
}
|
||||
|
||||
.emote {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.emote.emote-left {
|
||||
margin-left: -5.5px;
|
||||
}
|
||||
|
||||
.emote.emote-right {
|
||||
margin-right: -5.5px;
|
||||
}
|
||||
|
||||
.emote img {
|
||||
height: var(--emote-size);
|
||||
}
|
||||
|
||||
.emote img.zero-width {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
[large-emotes="true"] .emote img {
|
||||
height: var(--emote-size-xl);
|
||||
}
|
||||
|
||||
[gigaemote="true"] .emote img {
|
||||
height: var(--emote-size-xxl);
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(200%)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes disappear {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-200%)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes deleted {
|
||||
to {
|
||||
transform: translateX(-200%);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#chatbox {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 5px 5px 0 5px;
|
||||
font-size: var(--font-size);
|
||||
font-family: var(--font-family-1);
|
||||
/* background: gray; */
|
||||
}
|
||||
|
||||
#chatbox message,
|
||||
#chatbox event {
|
||||
max-height: var(--max-height);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
word-break: break-word;
|
||||
transform-origin: bottom;
|
||||
margin-top: 30px;
|
||||
animation: appear 600ms ease-in-out forwards;
|
||||
}
|
||||
|
||||
#chatbox[disappear="true"] message,
|
||||
#chatbox[disappear="true"] event {
|
||||
animation:
|
||||
appear 600ms ease-in-out forwards,
|
||||
disappear 600ms linear 30s forwards;
|
||||
}
|
||||
|
||||
#chatbox message[deleted="true"],
|
||||
#chatbox event[deleted="true"] {
|
||||
animation: deleted 600ms ease-in-out forwards;
|
||||
}
|
||||
|
||||
message {
|
||||
padding: 10px 30px 15px 10px;
|
||||
font-family: var(--font-family-1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
message author {
|
||||
position: relative;
|
||||
margin-left: 40px;
|
||||
font-weight: 600;
|
||||
text-transform: lowercase;
|
||||
letter-spacing: .2rem;
|
||||
font-weight: 600;
|
||||
filter: drop-shadow(0 0 2px white);
|
||||
}
|
||||
|
||||
message author::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -35px;
|
||||
top: 5px;
|
||||
width: 35px;
|
||||
transform: translateX(-25%);
|
||||
aspect-ratio: 16 / 15;
|
||||
filter: drop-shadow(0 0 1px white);
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' fill='none'%3E%3Cpath fill='url(%23a)' d='M10.752 4.884c0 1.743-1.223 3.156-2.732 3.156-1.51 0-2.732-1.413-2.733-3.157 0-.973.852-2.26 1.604-3.207a1.426 1.426 0 0 1 2.257 0c.752.947 1.604 2.234 1.604 3.208Z'/%3E%3Cpath fill='url(%23b)' d='M5.408 4.76c1.744 0 3.158 1.223 3.158 2.731 0 1.51-1.413 2.732-3.157 2.732-.974 0-2.26-.852-3.207-1.604a1.426 1.426 0 0 1 0-2.256c.946-.753 2.233-1.604 3.206-1.604Z'/%3E%3Cpath fill='url(%23c)' d='M5.287 9.554c0-1.744 1.223-3.157 2.732-3.157 1.51 0 2.732 1.414 2.733 3.157 0 .974-.852 2.26-1.604 3.207a1.426 1.426 0 0 1-2.257 0c-.752-.947-1.604-2.234-1.604-3.207Z'/%3E%3Cpath fill='url(%23d)' d='M11.177 4.758c-1.744 0-3.157 1.223-3.157 2.732 0 1.509 1.413 2.732 3.157 2.732.973 0 2.26-.85 3.207-1.603a1.426 1.426 0 0 0 0-2.257c-.947-.752-2.234-1.603-3.207-1.604Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='8.019' x2='8.019' y1='.391' y2='8.04' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='4.741' x2='4.74' y1='4.759' y2='10.223' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='8.019' x2='8.019' y1='6.397' y2='14.047' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='11.845' x2='11.845' y1='10.222' y2='4.759' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
message.vip author::before {
|
||||
aspect-ratio: 14 / 12;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1641 0.785156C11.262 0.785158 11.3586 0.807536 11.4467 0.850622C11.5348 0.893708 11.6122 0.956388 11.6731 1.03399L11.7212 1.10508L13.6712 4.39653C13.7351 4.50446 13.7671 4.62866 13.7634 4.75443C13.7597 4.8802 13.7205 5.00226 13.6504 5.10616L13.5984 5.17397L8.0538 11.4494C7.95084 11.5558 7.82795 11.6403 7.69234 11.6979C7.55672 11.7556 7.41111 11.7852 7.26403 11.7852C7.00402 11.7852 6.75377 11.693 6.54251 11.5106L6.45476 11.4277L0.929626 5.17397C0.846504 5.08004 0.791777 4.9639 0.771957 4.83938C0.752136 4.71486 0.768056 4.58719 0.817823 4.47157L0.856824 4.39587L2.81532 1.08994L2.85692 1.0307C2.88675 0.99328 2.92053 0.959285 2.95767 0.929321L3.01553 0.887191L3.07273 0.854277L3.10523 0.839136L3.14423 0.822679L3.21508 0.801614L3.28788 0.788448L3.36393 0.785156H11.1641Z' fill='url(%23paint0_linear_1587_171)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1587_171' x1='7.26367' y1='0.785156' x2='7.26367' y2='11.7852' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFEEF9'/%3E%3Cstop offset='1' stop-color='white'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
message.moderator author::before {
|
||||
aspect-ratio: 14 / 14;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Cpath fill='url(%23a)' d='M7.143 10.511a.735.735 0 0 1-.798 1.201.733.733 0 0 1-.238-.164L5.07 10.51l-2.074 2.074a.734.734 0 0 1-1.037 1.037L.922 12.585a.733.733 0 0 1 1.037-1.037l2.074-2.074-1.037-1.037a.733.733 0 0 1 1.037-1.036l3.11 3.11Zm.52-.518L4.55 6.882 10.773.66l2.593.519.518 2.592-6.221 6.222Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='7.295' x2='7.295' y1='.66' y2='13.837' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23FFF2F6'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
message content {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
background-color: rgba(168, 172, 181, .45);
|
||||
border: 2.5px solid #FFF1FA;
|
||||
border-radius: 10px;
|
||||
padding: 12px 20px;
|
||||
margin-left: 40px;
|
||||
margin-top: 5px;
|
||||
letter-spacing: .2rem;
|
||||
}
|
||||
|
||||
message content::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -31.5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 5px;
|
||||
aspect-ratio: 2 / 15;
|
||||
filter: drop-shadow(0 0 3px white);
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='15' fill='none'%3E%3Ccircle cx='1.002' cy='1.633' r='1' fill='%23fff'/%3E%3Ccircle cx='1.002' cy='13.633' r='1' fill='%23fff'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
message content::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: -20px;
|
||||
right: -45px;
|
||||
width: 45px;
|
||||
aspect-ratio: 22 / 34;
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' fill='none'%3E%3Cmask id='a' width='14' height='28' x='1' y='5' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23ABAFBC' d='M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z'/%3E%3Cpath fill='%23A8ACB9' d='M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z'/%3E%3Cg opacity='.62' style='mix-blend-mode:plus-lighter'%3E%3Cpath fill='%23ABAFBC' d='M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z'/%3E%3Cpath fill='%23A8ACB9' d='M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z'/%3E%3C/g%3E%3Cg opacity='.83'%3E%3Cpath fill='%23A8ACB9' d='M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z'/%3E%3Cpath fill='%23A8ACB9' d='M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z' opacity='.65' style='mix-blend-mode:plus-lighter'/%3E%3C/g%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23AAAEBC' d='M-1.395 2.367 15.238-.714l6.001 32.393-16.632 3.082z'/%3E%3C/g%3E%3Cpath fill='url(%23b)' d='M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z'/%3E%3Cpath fill='url(%23c)' d='M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z'/%3E%3Cg opacity='.62' style='mix-blend-mode:plus-lighter'%3E%3Cpath fill='url(%23d)' d='M7.81 31.795 2.675 15.236c-.13-.419.461-.662.663-.272l7.15 13.803a.36.36 0 0 1-.029.378l-2.015 2.756a.36.36 0 0 1-.634-.106Z'/%3E%3Cpath fill='url(%23e)' d='M12.012 18.566c6.3-6.177-5.09-8.144-10.005-8.323a.339.339 0 0 0-.354.312c-.44 5.405 4.044 14.203 10.359 8.011Z'/%3E%3C/g%3E%3Cg opacity='.83'%3E%3Cpath fill='url(%23f)' d='M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z'/%3E%3Cpath fill='url(%23g)' d='M14.938 10.032c.396-8.814-9.277-2.487-12.994.733a.339.339 0 0 0-.046.47c3.363 4.253 12.643 7.631 13.04-1.203Z' opacity='.65' style='mix-blend-mode:plus-lighter'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='4.306' x2='8.305' y1='10.845' y2='32.426' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1F5'/%3E%3Cstop offset='1' stop-color='%23FBDFE2'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='6.924' x2='9.012' y1='9.263' y2='20.529' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF2F6'/%3E%3Cstop offset='1' stop-color='%23FADBDE'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='4.306' x2='8.305' y1='10.845' y2='32.426' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1F5'/%3E%3Cstop offset='1' stop-color='%23FBDFE2'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' x1='6.924' x2='9.012' y1='9.263' y2='20.529' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF2F6'/%3E%3Cstop offset='1' stop-color='%23FADBDE'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='4.873' x2='14.082' y1='6.695' y2='13.513' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF2F6'/%3E%3Cstop offset='1' stop-color='%23FADBDE'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='4.873' x2='14.082' y1='6.695' y2='13.513' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF2F6'/%3E%3Cstop offset='1' stop-color='%23FADBDE'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
event {
|
||||
color: white;
|
||||
flex-direction: row!important;
|
||||
padding: 25px 40px 25px 0;
|
||||
width: -webkit-fill-available!important;
|
||||
}
|
||||
|
||||
event author {
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
filter: drop-shadow(0 0 3px white);
|
||||
font-weight: 500;
|
||||
margin-inline: 100px 70px;
|
||||
letter-spacing: .3rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
event author::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: -100px;
|
||||
width: 80px;
|
||||
aspect-ratio: 31 / 32;
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='32' fill='none'%3E%3Cpath fill='%23fff' d='M14.923 11.178a2 2 0 0 1 3.154 0l.514.66c.232.296.541.52.895.649l.786.286a2 2 0 0 1 .975 3l-.469.692a2 2 0 0 0-.341 1.052l-.029.836a2 2 0 0 1-2.551 1.853l-.804-.23a1.999 1.999 0 0 0-1.106 0l-.804.23a2 2 0 0 1-2.551-1.853l-.029-.837a2 2 0 0 0-.341-1.05l-.469-.694a2 2 0 0 1 .975-3l.786-.285c.354-.128.663-.353.895-.65l.514-.66Z'/%3E%3Cpath stroke='%23fff' stroke-dasharray='0.1 6' stroke-linecap='round' d='M14.15 1.27a15 15 0 1 0 13.684 24.103'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
event content {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
event content::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
inset: -10px -25px;
|
||||
border: 2px solid white;
|
||||
border-radius: 15px;
|
||||
filter: drop-shadow(0 0 2px white) drop-shadow(0 0 3px white);
|
||||
}
|
||||
|
||||
event content::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 120px;
|
||||
top: 0;
|
||||
right: 50px;
|
||||
transform: translateY(-90%);
|
||||
aspect-ratio: 51 / 9;
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='9' fill='none'%3E%3Cpath fill='url(%23a)' d='M4.54 8.013C2.032 8.013 0 6.255 0 4.085S2.032.156 4.54.156c1.424 0 3.314 1.267 4.681 2.362a1.986 1.986 0 0 1 0 3.133C7.854 6.746 5.964 8.013 4.54 8.013Z'/%3E%3Cpath fill='url(%23b)' d='M24.54 8.013c-2.508 0-4.54-1.758-4.54-3.928S22.032.156 24.54.156c1.424 0 3.314 1.267 4.681 2.362a1.986 1.986 0 0 1 0 3.133c-1.367 1.095-3.258 2.362-4.681 2.362Z'/%3E%3Cpath fill='url(%23c)' d='M44.54 8.013c-2.508 0-4.54-1.758-4.54-3.928S42.032.156 44.54.156c1.424 0 3.314 1.267 4.681 2.362a1.986 1.986 0 0 1 0 3.133c-1.367 1.095-3.257 2.362-4.681 2.362Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='11' y1='4.085' y2='4.085' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='20' x2='31' y1='4.085' y2='4.085' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='40' x2='51' y1='4.085' y2='4.085' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF1FA'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
Reference in New Issue
Block a user