From 376aefa656450add07f3c23c14d31ea6e01d1256 Mon Sep 17 00:00:00 2001 From: Mirco Wittrien Date: Wed, 30 Jun 2021 23:25:27 +0200 Subject: [PATCH] stuff --- Library/0BDFDB.plugin.js | 9 ++- Library/_res/BDFDB.data.json | 38 ++++++------ Plugins/JoinedAtDate/JoinedAtDate.plugin.js | 55 +++++++++++------ .../LastMessageDate/LastMessageDate.plugin.js | 61 +++++++++++-------- Themes/BasicBackground/BasicBackground.css | 7 ++- Themes/_res/SupporterBadge.css | 2 +- 6 files changed, 104 insertions(+), 68 deletions(-) diff --git a/Library/0BDFDB.plugin.js b/Library/0BDFDB.plugin.js index c74db16f80..d731fb9653 100644 --- a/Library/0BDFDB.plugin.js +++ b/Library/0BDFDB.plugin.js @@ -7821,11 +7821,12 @@ module.exports = (_ => { InternalBDFDB._processAvatarRender = function (user, avatar) { if (BDFDB.ReactUtils.isValidElement(avatar) && BDFDB.ObjectUtils.is(user) && (avatar.props.className || "").indexOf(BDFDB.disCN.bdfdbbadgeavatar) == -1) { avatar.props[InternalData.userIdAttribute] = user.id; - let role = "", note = "", link, className = BDFDB.DOMUtils.formatClassName((avatar.props.className || "").replace(BDFDB.disCN.avatar, "")), addBadge = InternalBDFDB.settings.general.showSupportBadges; + let role = "", note = "", color, link, className = BDFDB.DOMUtils.formatClassName((avatar.props.className || "").replace(BDFDB.disCN.avatar, "")), addBadge = InternalBDFDB.settings.general.showSupportBadges; if (BDFDB_Patrons[user.id] && BDFDB_Patrons[user.id].active) { link = "https://www.patreon.com/MircoWittrien"; role = BDFDB_Patrons[user.id].text || (BDFDB_Patron_Tiers[BDFDB_Patrons[user.id].tier] || {}).text; note = BDFDB_Patrons[user.id].text && (BDFDB_Patron_Tiers[BDFDB_Patrons[user.id].tier] || {}).text; + color = BDFDB_Patrons[user.id].color; className = BDFDB.DOMUtils.formatClassName(className, addBadge && BDFDB.disCN.bdfdbhasbadge, BDFDB.disCN.bdfdbbadgeavatar, BDFDB.disCN.bdfdbsupporter, BDFDB.disCN[`bdfdbsupporter${BDFDB_Patrons[user.id].tier}`]); } if (user.id == InternalData.myId) { @@ -7848,6 +7849,7 @@ module.exports = (_ => { if (addBadge) avatar.props.children.push(BDFDB.ReactUtils.createElement(InternalComponents.LibraryComponents.TooltipContainer, { text: role, note: note, + tooltipConfig: {backgroundColor: color || ""}, onClick: link ? (_ => BDFDB.DiscordUtils.openLink(link)) : (_ => {}), children: BDFDB.ReactUtils.createElement("div", { className: BDFDB.disCN.bdfdbbadge @@ -7862,11 +7864,12 @@ module.exports = (_ => { if (wrapper) wrapper.setAttribute(InternalData.userIdAttribute, user.id); if (Node.prototype.isPrototypeOf(avatar) && (avatar.className || "").indexOf(BDFDB.disCN.bdfdbbadgeavatar) == -1) { avatar.setAttribute(InternalData.userIdAttribute, user.id); - let role = "", note = "", link, addBadge = InternalBDFDB.settings.general.showSupportBadges; + let role = "", note = "", color, link, addBadge = InternalBDFDB.settings.general.showSupportBadges; if (BDFDB_Patrons[user.id] && BDFDB_Patrons[user.id].active) { link = "https://www.patreon.com/MircoWittrien"; role = BDFDB_Patrons[user.id].text || (BDFDB_Patron_Tiers[BDFDB_Patrons[user.id].tier] || {}).text; note = BDFDB_Patrons[user.id].text && (BDFDB_Patron_Tiers[BDFDB_Patrons[user.id].tier] || {}).text; + color = BDFDB_Patrons[user.id].color; avatar.className = BDFDB.DOMUtils.formatClassName(avatar.className, addBadge && BDFDB.disCN.bdfdbhasbadge, BDFDB.disCN.bdfdbbadgeavatar, BDFDB.disCN.bdfdbsupporter, BDFDB.disCN[`bdfdbsupporter${BDFDB_Patrons[user.id].tier}`]); } else if (user.id == InternalData.myId) { @@ -7878,7 +7881,7 @@ module.exports = (_ => { let badge = document.createElement("div"); badge.className = BDFDB.disCN.bdfdbbadge; if (link) badge.addEventListener("click", _ => BDFDB.DiscordUtils.openLink(link)); - badge.addEventListener("mouseenter", _ => BDFDB.TooltipUtils.create(badge, role, {position: "top", note: note})); + badge.addEventListener("mouseenter", _ => BDFDB.TooltipUtils.create(badge, role, {position: "top", note: note, backgroundColor: color || ""})); avatar.appendChild(badge); } } diff --git a/Library/_res/BDFDB.data.json b/Library/_res/BDFDB.data.json index 8f0c16cc3e..984c9d6c95 100644 --- a/Library/_res/BDFDB.data.json +++ b/Library/_res/BDFDB.data.json @@ -4996,25 +4996,25 @@ } }, "BDFDB_Patrons": { - "89482511343702016": {"active": true, "tier": "t3", "text": "", "id": "AzukiPuddles"}, - "222808775722008587": {"active": true, "tier": "t2", "text": "", "id": "Riyshin (AbÖz)"}, - "464865517354614805": {"active": true, "tier": "t2", "text": "", "id": "Zammu (ScQu)"}, - "467514600934604801": {"active": true, "tier": "t3", "text": "", "id": "star (adria)"}, - "446396928092274720": {"active": true, "tier": "t3", "text": "Existing...", "id": "Sayori (SaySa)"}, - "760784464560914452": {"active": true, "tier": "t3", "text": "Keyra", "id": "Keyra (PaCu)"}, - "646354877336911884": {"active": false, "tier": "t3", "text": "", "id": "case (kharri)"}, - "431078101997584395": {"active": false, "tier": "t2", "text": "", "id": "LEMI (f4g8)"}, - "268824390337036298": {"active": false, "tier": "t2", "text": "", "id": "lonelyw0lf (GriWa)"}, - "354191516979429376": {"active": false, "tier": "t2", "text": "", "id": "HypedDomi (DoBu)"}, - "596006086511689748": {"active": true, "tier": "t2", "text": "", "id": "Marshtomp (DsOp)"}, - "341383936984875020": {"active": true, "tier": "t3", "text": "", "id": "dannycoch (DaCo)"}, - "121188168002174976": {"active": false, "tier": "t2", "text": "", "id": "Aven (Syn)"}, - "264486632525135883": {"active": true, "tier": "t3", "text": "", "id": "strix (A1C)"}, - "174868361040232448": {"active": false, "tier": "t2", "text": "", "id": "GIBBU (Ian) Note: Asked to disable"}, - "363785301195358221": {"active": true, "tier": "t2", "text": "", "id": "TRENT (KABEL)"}, - "443943393660239872": {"active": false, "tier": "t3", "text": "", "id": "SARGE (PaSh)"}, - "620397524494057513": {"active": true, "tier": "t3", "text": "", "id": "FUSL"}, - "838434341197316126": {"active": true, "tier": "t4", "text": "Allmächtig", "id": "ZeroAccess"} + "89482511343702016": {"active": true, "tier": "t3", "text": "", "color": "#0080ff", "id": "AzukiPuddles"}, + "222808775722008587": {"active": true, "tier": "t2", "text": "", "color": "", "id": "Riyshin (AbÖz)"}, + "464865517354614805": {"active": true, "tier": "t2", "text": "", "color": "", "id": "Zammu (ScQu)"}, + "467514600934604801": {"active": true, "tier": "t3", "text": "", "color": "", "id": "star (adria)"}, + "446396928092274720": {"active": true, "tier": "t3", "text": "Existing...", "color": "", "id": "Sayori (SaySa)"}, + "760784464560914452": {"active": true, "tier": "t3", "text": "Keyra", "color": "", "id": "Keyra (PaCu)"}, + "646354877336911884": {"active": false, "tier": "t3", "text": "", "color": "", "id": "case (kharri)"}, + "431078101997584395": {"active": false, "tier": "t2", "text": "", "color": "", "id": "LEMI (f4g8)"}, + "268824390337036298": {"active": false, "tier": "t2", "text": "", "color": "", "id": "lonelyw0lf (GriWa)"}, + "354191516979429376": {"active": false, "tier": "t2", "text": "", "color": "", "id": "HypedDomi (DoBu)"}, + "596006086511689748": {"active": true, "tier": "t2", "text": "", "color": "", "id": "Marshtomp (DsOp)"}, + "341383936984875020": {"active": true, "tier": "t3", "text": "", "color": "", "id": "dannycoch (DaCo)"}, + "121188168002174976": {"active": false, "tier": "t2", "text": "", "color": "", "id": "Aven (Syn)"}, + "264486632525135883": {"active": true, "tier": "t3", "text": "", "color": "", "id": "strix (A1C)"}, + "174868361040232448": {"active": false, "tier": "t2", "text": "", "color": "", "id": "GIBBU (Ian) Note: Asked to disable"}, + "363785301195358221": {"active": true, "tier": "t2", "text": "", "color": "", "id": "TRENT (KABEL)"}, + "443943393660239872": {"active": false, "tier": "t3", "text": "", "color": "", "id": "SARGE (PaSh)"}, + "620397524494057513": {"active": true, "tier": "t3", "text": "", "color": "", "id": "FUSL"}, + "838434341197316126": {"active": true, "tier": "t4", "text": "Allmächtig", "color": "", "id": "ZeroAccess"} }, "BDFDB_Patron_Tiers": { "t1": { diff --git a/Plugins/JoinedAtDate/JoinedAtDate.plugin.js b/Plugins/JoinedAtDate/JoinedAtDate.plugin.js index 2ff6336125..6e8f2e8a8f 100644 --- a/Plugins/JoinedAtDate/JoinedAtDate.plugin.js +++ b/Plugins/JoinedAtDate/JoinedAtDate.plugin.js @@ -2,7 +2,7 @@ * @name JoinedAtDate * @author DevilBro * @authorId 278543574059057154 - * @version 1.3.2 + * @version 1.3.3 * @description Displays the Joined At Date of a Member in the UserPopout and UserModal * @invite Jx3TjNS * @donate https://www.paypal.me/MircoWittrien @@ -17,12 +17,12 @@ module.exports = (_ => { "info": { "name": "JoinedAtDate", "author": "DevilBro", - "version": "1.3.2", + "version": "1.3.3", "description": "Displays the Joined At Date of a Member in the UserPopout and UserModal" }, "changeLog": { "fixed": { - "User Popout": "Fixing Stuff for the User Popout Update, thanks Discord" + "User Popout": "No Longer requires you to open the Popout twice" } } }; @@ -73,11 +73,13 @@ module.exports = (_ => { return template.content.firstElementChild; } } : (([Plugin, BDFDB]) => { + var _this; var loadedUsers, requestedUsers; var currentPopout, currentProfile; return class JoinedAtDate extends Plugin { onLoad () { + _this = this; loadedUsers = {}; requestedUsers = {}; @@ -96,8 +98,9 @@ module.exports = (_ => { this.patchedModules = { after: { - AnalyticsContext: "render", + UserPopoutContainer: "type", UserPopoutInfo: "UserPopoutInfo", + UserProfileModal: "default", UserProfileModalHeader: "default" } }; @@ -168,45 +171,57 @@ module.exports = (_ => { } } - processAnalyticsContext (e) { - if (e.instance.props.section == BDFDB.DiscordConstants.AnalyticsSections.PROFILE_MODAL) currentProfile = e.instance; - if (e.instance.props.section == BDFDB.DiscordConstants.AnalyticsSections.PROFILE_POPOUT) currentPopout = e.instance; + processUserPopoutContainer (e) { + currentPopout = e.instance; } - + processUserPopoutInfo (e) { if (currentPopout && e.instance.props.user && this.settings.places.userPopout) { let [children, index] = BDFDB.ReactUtils.findParent(e.returnvalue, {name: ["DiscordTag", "ColoredFluxTag"]}); - if (index > -1) this.injectDate(currentPopout, children, index + 1, e.instance.props.user, e.instance.props.guildId); + if (index > -1) this.injectDate(children, index + 1, e.instance.props.user, currentPopout.props.guildId); } } + + processUserProfileModal (e) { + currentProfile = e.instance; + } processUserProfileModalHeader (e) { if (currentProfile && e.instance.props.user && this.settings.places.userProfile) { let [children, index] = BDFDB.ReactUtils.findParent(e.returnvalue, {name: ["DiscordTag", "ColoredFluxTag"]}); - if (index > -1) this.injectDate(currentProfile, children, index + 1, e.instance.props.user, currentProfile.props.guildId); + if (index > -1) this.injectDate(children, index + 1, e.instance.props.user, currentProfile.props.guildId); } } - injectDate (instance, children, index, user, guildId) { + injectDate (children, index, user, guildId) { if (!guildId) guildId = BDFDB.LibraryModules.LastGuildStore.getGuildId(); if (!BDFDB.ArrayUtils.is(children) || !user || !guildId || user.discriminator == "0000" || !BDFDB.LibraryModules.MemberStore.getMember(guildId, user.id)) return; + if (!loadedUsers[guildId]) loadedUsers[guildId] = {}; if (!requestedUsers[guildId]) requestedUsers[guildId] = {}; + if (!BDFDB.ArrayUtils.is(requestedUsers[guildId][user.id])) { - requestedUsers[guildId][user.id] = [instance]; + requestedUsers[guildId][user.id] = []; BDFDB.LibraryModules.APIUtils.get(BDFDB.DiscordConstants.Endpoints.GUILD_MEMBER(guildId, user.id)).then(result => { loadedUsers[guildId][user.id] = new Date(result.body.joined_at); for (let queuedInstance of requestedUsers[guildId][user.id]) BDFDB.ReactUtils.forceUpdate(queuedInstance); }); } - else if (!loadedUsers[guildId][user.id]) requestedUsers[guildId][user.id].push(instance); - else { - let timestamp = BDFDB.LibraryComponents.DateInput.format(this.settings.dates.joinedAtDate, loadedUsers[guildId][user.id]); - children.splice(index, 0, BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextScroller, { - className: BDFDB.disCNS._joinedatdatedate + BDFDB.disCNS.userinfodate + BDFDB.disCN.textrow, - children: this.settings.general.displayText ? this.labels.joined_at.replace("{{time}}", timestamp) : timestamp - })); - } + children.splice(index, 0, BDFDB.ReactUtils.createElement(class extends BDFDB.ReactUtils.Component { + render() { + if (!loadedUsers[guildId][user.id]) { + if (requestedUsers[guildId][user.id].indexOf(this) == -1) requestedUsers[guildId][user.id].push(this); + return null; + } + else { + let timestamp = BDFDB.LibraryComponents.DateInput.format(_this.settings.dates.joinedAtDate, loadedUsers[guildId][user.id]); + return BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextScroller, { + className: BDFDB.disCNS._joinedatdatedate + BDFDB.disCNS.userinfodate + BDFDB.disCN.textrow, + children: _this.settings.general.displayText ? _this.labels.joined_at.replace("{{time}}", timestamp) : timestamp + }); + } + } + })); } setLabelsByLanguage () { diff --git a/Plugins/LastMessageDate/LastMessageDate.plugin.js b/Plugins/LastMessageDate/LastMessageDate.plugin.js index 65625819ac..c3268bd6c7 100644 --- a/Plugins/LastMessageDate/LastMessageDate.plugin.js +++ b/Plugins/LastMessageDate/LastMessageDate.plugin.js @@ -2,7 +2,7 @@ * @name LastMessageDate * @author DevilBro * @authorId 278543574059057154 - * @version 1.2.7 + * @version 1.2.8 * @description Displays the Last Message Date of a Member for the current Server/DM in the UserPopout and UserModal * @invite Jx3TjNS * @donate https://www.paypal.me/MircoWittrien @@ -17,12 +17,12 @@ module.exports = (_ => { "info": { "name": "LastMessageDate", "author": "DevilBro", - "version": "1.2.7", + "version": "1.2.8", "description": "Displays the Last Message Date of a Member for the current Server/DM in the UserPopout and UserModal" }, "changeLog": { "fixed": { - "User Popout": "Fixing Stuff for the User Popout Update, thanks Discord" + "User Popout": "No Longer requires you to open the Popout twice" } } }; @@ -73,11 +73,13 @@ module.exports = (_ => { return template.content.firstElementChild; } } : (([Plugin, BDFDB]) => { + var _this; var loadedUsers, requestedUsers, languages; var currentPopout, currentProfile; return class LastMessageDate extends Plugin { onLoad () { + _this = this; loadedUsers = {}; requestedUsers = {}; @@ -96,8 +98,9 @@ module.exports = (_ => { this.patchedModules = { after: { - AnalyticsContext: "render", + UserPopoutContainer: "type", UserPopoutInfo: "UserPopoutInfo", + UserProfileModal: "default", UserProfileModalHeader: "default" } }; @@ -178,62 +181,72 @@ module.exports = (_ => { } } - processAnalyticsContext (e) { - if (e.instance.props.section == BDFDB.DiscordConstants.AnalyticsSections.PROFILE_MODAL) currentProfile = e.instance; - if (e.instance.props.section == BDFDB.DiscordConstants.AnalyticsSections.PROFILE_POPOUT) currentPopout = e.instance; + processUserPopoutContainer (e) { + currentPopout = e.instance; } - + processUserPopoutInfo (e) { if (currentPopout && e.instance.props.user && this.settings.places.userPopout) { let [children, index] = BDFDB.ReactUtils.findParent(e.returnvalue, {name: ["DiscordTag", "ColoredFluxTag"]}); - if (index > -1) this.injectDate(currentPopout, children, index + 1, e.instance.props.user, e.instance.props.guildId); + if (index > -1) this.injectDate(children, index + 1, e.instance.props.user, currentPopout.props.guildId); } } + processUserProfileModal (e) { + currentProfile = e.instance; + } + processUserProfileModalHeader (e) { if (currentProfile && e.instance.props.user && this.settings.places.userProfile) { let [children, index] = BDFDB.ReactUtils.findParent(e.returnvalue, {name: ["DiscordTag", "ColoredFluxTag"]}); - if (index > -1) this.injectDate(currentProfile, children, index + 1, e.instance.props.user, currentProfile.props.guildId); + if (index > -1) this.injectDate(children, index + 1, e.instance.props.user, currentProfile.props.guildId); } } - injectDate (instance, children, index, user, guildId) { + injectDate ( children, index, user, guildId) { if (!guildId) guildId = BDFDB.LibraryModules.LastGuildStore.getGuildId(); if (!BDFDB.ArrayUtils.is(children) || !user || user.discriminator == "0000") return; let isGuild = guildId && guildId != BDFDB.DiscordConstants.ME; guildId = isGuild ? guildId : BDFDB.LibraryModules.LastChannelStore.getChannelId(); if (!guildId) return; + if (!loadedUsers[guildId]) loadedUsers[guildId] = {}; if (!requestedUsers[guildId]) requestedUsers[guildId] = {}; + if (!BDFDB.ArrayUtils.is(requestedUsers[guildId][user.id])) { - requestedUsers[guildId][user.id] = [instance]; + requestedUsers[guildId][user.id] = []; BDFDB.LibraryModules.APIUtils.get({ url: isGuild ? BDFDB.DiscordConstants.Endpoints.SEARCH_GUILD(guildId) : BDFDB.DiscordConstants.Endpoints.SEARCH_CHANNEL(guildId), query: BDFDB.LibraryModules.APIEncodeUtils.stringify({author_id: user.id}) }).then(result => { if (typeof result.body.retry_after != "number") { if (result.body.messages && Array.isArray(result.body.messages[0])) { - for (let message of result.body.messages[0]) if (message.hit && message.author.id == user.id) { - loadedUsers[guildId][user.id] = new Date(message.timestamp); - } + for (let message of result.body.messages[0]) if (message.hit && message.author.id == user.id) loadedUsers[guildId][user.id] = new Date(message.timestamp); } else loadedUsers[guildId][user.id] = null; for (let queuedInstance of requestedUsers[guildId][user.id]) BDFDB.ReactUtils.forceUpdate(queuedInstance); } else { delete requestedUsers[guildId][user.id]; - BDFDB.TimeUtils.timeout(_ => this.injectDate(instance, children, index, user), result.body.retry_after + 500); + BDFDB.TimeUtils.timeout(_ => this.injectDate(children, index, user), result.body.retry_after + 500); } }); } - else if (loadedUsers[guildId][user.id] === undefined) requestedUsers[guildId][user.id].push(instance); - else { - let timestamp = loadedUsers[guildId][user.id] ? BDFDB.LibraryComponents.DateInput.format(this.settings.dates.lastMessageDate, loadedUsers[guildId][user.id]) : "---"; - children.splice(index, 0, BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextScroller, { - className: BDFDB.disCNS._lastmessagedatedate + BDFDB.disCNS.userinfodate + BDFDB.disCN.textrow, - children: this.settings.general.displayText ? this.labels.last_message.replace("{{time}}", timestamp) : timestamp - })); - } + children.splice(index, 0, BDFDB.ReactUtils.createElement(class extends BDFDB.ReactUtils.Component { + render() { + if (loadedUsers[guildId][user.id] === undefined) { + if (requestedUsers[guildId][user.id].indexOf(this) == -1) requestedUsers[guildId][user.id].push(this); + return null; + } + else { + let timestamp = loadedUsers[guildId][user.id] ? BDFDB.LibraryComponents.DateInput.format(_this.settings.dates.lastMessageDate, loadedUsers[guildId][user.id]) : "---"; + return BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextScroller, { + className: BDFDB.disCNS._lastmessagedatedate + BDFDB.disCNS.userinfodate + BDFDB.disCN.textrow, + children: _this.settings.general.displayText ? _this.labels.last_message.replace("{{time}}", timestamp) : timestamp + }); + } + } + })); } setLabelsByLanguage () { diff --git a/Themes/BasicBackground/BasicBackground.css b/Themes/BasicBackground/BasicBackground.css index 6fd21b24b8..17dc9c840e 100644 --- a/Themes/BasicBackground/BasicBackground.css +++ b/Themes/BasicBackground/BasicBackground.css @@ -3991,7 +3991,8 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr box-shadow: 0 0 1px rgba(var(--transparencycolor), .2), 0 1px 4px rgba(var(--transparencycolor), .1); } -#app-mount .themedPopout-1TrfdI { /* themed popout (for example mentionpopout) */ +#app-mount .loadingPopout-qYljDW, /* loading popout */ +#app-mount .themedPopout-1TrfdI { /* themed popout */ background-color: transparent; border: none; border-radius: 5px; @@ -3999,7 +4000,9 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr color: var(--header-primary); position: relative; } +.loadingPopout-qYljDW::before, .themedPopout-1TrfdI::before, +.loadingPopout-qYljDW::after, .themedPopout-1TrfdI::after { content: ""; position: absolute; @@ -4013,10 +4016,12 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr pointer-events: none; z-index: -1; } +.loadingPopout-qYljDW::before, .themedPopout-1TrfdI::before { background: var(--popout) var(--popoutposition)/var(--popoutsize); background-attachment: fixed; } +.loadingPopout-qYljDW::after, .themedPopout-1TrfdI::after { background-color: rgba(var(--transparencycolor), calc(var(--transparencyalpha) + 0.25)); backdrop-filter: blur(var(--popoutblur)); diff --git a/Themes/_res/SupporterBadge.css b/Themes/_res/SupporterBadge.css index 84a1f02597..c35ba8768e 100644 --- a/Themes/_res/SupporterBadge.css +++ b/Themes/_res/SupporterBadge.css @@ -81,7 +81,7 @@ /* AzukiPuddles */ .supporter-Z3FfwL.tier3-yTxjsy.hasBadge-4rT8_u[data-user-id="89482511343702016"] .badge-7R_W3s { -webkit-mask: unset !important; - background: url('data:image/svg+xml; utf8, ') center/cover no-repeat !important; + background: url('data:image/svg+xml; utf8, ') center/cover no-repeat !important; top: 71% !important; left: 2% !important; width: 30% !important;