diff --git a/Plugins/GoogleTranslateOption/GoogleTranslateOption.plugin.js b/Plugins/GoogleTranslateOption/GoogleTranslateOption.plugin.js index 90cb0491ce..e2a21a6f49 100644 --- a/Plugins/GoogleTranslateOption/GoogleTranslateOption.plugin.js +++ b/Plugins/GoogleTranslateOption/GoogleTranslateOption.plugin.js @@ -40,7 +40,7 @@ class GoogleTranslateOption { `; - this.optionButtonMarkup = + this.optionButtonMarkup = `
`; this.optionsPopoutMarkup = @@ -54,9 +54,13 @@ class GoogleTranslateOption { `; this.translateButtonMarkup = - ` - - `; + `
+
+ + + +
+
`; this.reverseButtonMarkup = ` @@ -303,35 +307,18 @@ class GoogleTranslateOption { }.call(this); this.css = ` - .chat form textarea { - padding-right: 0 !important; - } - - .translate-button { - position: absolute; - right: 46px; - top: 11px; - opacity: 0.2; - transition: all 200ms ease; - } - - ${BDFDB.dotCN.themedark} .translate-button { - fill: #fff; - } - - ${BDFDB.dotCN.themelight} .translate-button { - fill: #4f545c; - } - - .translate-button.active { - fill: #F04747; + ${BDFDB.dotCN.textareabutton}.translate-button.active { + color: #F04747; opacity: 1; } - - .translate-button:hover { - cursor: pointer; - opacity: 1; - transform: scale(1.1); + + ${BDFDB.dotCN.textareabutton}.translate-button ${BDFDB.dotCN.textareaicon} { + height: 28px; + width: 28px; + } + + ${BDFDB.dotCN.textareabutton}.translate-button.active ${BDFDB.dotCN.textareaicon} { + transform: scale(1); } .reverse-button { @@ -369,7 +356,7 @@ class GoogleTranslateOption { getDescription () {return "Adds a Google Translate option to your context menu, which shows a preview of the translated text and on click will open the selected text in Google Translate. Also adds a translation button to your textareas, which will automatically translate the text for you before it is being send. DeepLApi written by square. Thanks ;)";} - getVersion () {return "1.5.1";} + getVersion () {return "1.5.2";} getAuthor () {return "DevilBro, square";} @@ -503,8 +490,7 @@ class GoogleTranslateOption { this.resetMessage(message); }); - document.querySelectorAll(".translate-button").forEach(button => {button.remove();}); - document.querySelectorAll(BDFDB.dotCNS.chat + "form textarea").forEach(textarea => {textarea.parentElement.style.paddingRight = "0px";}); + document.querySelectorAll(".translate-button-wrapper").forEach(button => {button.remove();}); BDFDB.unloadMessage(this); } @@ -685,11 +671,12 @@ class GoogleTranslateOption { addTranslationButton (textarea) { if (!textarea) return; var textareaWrap = textarea.parentElement; - if (textareaWrap && !textareaWrap.classList.contains(BDFDB.disCN.textareainnerdisabled) && !textareaWrap.querySelector(".translate-button")) { + if (textareaWrap && !textareaWrap.classList.contains(BDFDB.disCN.textareainnerdisabled) && !textareaWrap.querySelector(".translate-button-wrapper")) { var textareaInstance = BDFDB.getOwnerInstance({"node":textarea, "props":["handlePaste","saveCurrentText"], "up":true}); if (textareaInstance && textareaInstance.props && textareaInstance.props.type) { + var buttoncontainer = textareaWrap.querySelector(BDFDB.dotCN.textareapickerbuttons); var button = $(this.translateButtonMarkup)[0]; - $(button).appendTo(textareaWrap) + $(button) .on("click." + this.getName(), () => { this.openTranslatePopout(button); }) @@ -697,11 +684,10 @@ class GoogleTranslateOption { this.translating = !this.translating; document.querySelectorAll(BDFDB.dotCNS.textareawrapchat + ".translate-button").forEach(btn => {btn.classList.toggle("active", this.translating);}); }); + if (buttoncontainer) buttoncontainer.insertBefore(button, buttoncontainer.firstElementChild); + else textareaWrap.appendChild(button); button.classList.add(textareaInstance.props.type); button.classList.toggle("active", this.translating); - var sendButtonEnabled = BDFDB.isPluginEnabled("SendButton"); - if (sendButtonEnabled) button.style.marginRight = "40px"; - textareaWrap.style.paddingRight = sendButtonEnabled ? "110px" : "70px"; $(textarea) .off("input." + this.getName()) .on("input." + this.getName(), () => { diff --git a/Themes/BasicBackground/BasicBackground.css b/Themes/BasicBackground/BasicBackground.css index 37b32393be..3e3ae5ad87 100644 --- a/Themes/BasicBackground/BasicBackground.css +++ b/Themes/BasicBackground/BasicBackground.css @@ -958,6 +958,10 @@ img[src="/assets/bfffd518c76d3f6bc5e96eb52e4ae2cf.svg"], stroke: rgb(var(--vaccentcolor)) !important; } +.result-3w1ZcL:hover:after { + box-shadow: inset 0 0 0 3px rgb(var(--vaccentcolor)), inset 0 0 0 4px #2f3136 !important; +} + .callAvatarBorder-1D_KaE.video-3GgX2M.selected-2esnyn:not(.speaking-oCqYMI) { box-shadow: inset 0 0 0 2px rgb(var(--vaccentcolor)) !important; }