Index: gc_lang/fr/webext/content_scripts/wrapper.css ================================================================== --- gc_lang/fr/webext/content_scripts/wrapper.css +++ gc_lang/fr/webext/content_scripts/wrapper.css @@ -3,25 +3,30 @@ Wrappen for Grammalecte */ .grammalecte_wrapper { - margin: 3px; - padding: 5px; - border-radius: 3px; + margin: 0 0 5px 0; + padding: 2px 5px 5px 5px; + box-sizing: border-box; + border-radius: 0 0 3px 3px; background-color: hsla(210, 100%, 96%, .2); - border: 1px solid hsla(210, 100%, 92%, .2); - box-shadow: 0 0 2px hsla(210, 100%, 0%, .2); + border-left: 1px solid hsla(210, 100%, 92%, .2); + border-right: 1px solid hsla(210, 100%, 92%, .2); + border-bottom: 1px solid hsla(210, 100%, 92%, .2); + /*box-shadow: 0 0 2px hsla(210, 100%, 0%, .2);*/ font-family: "Trebuchet MS", "Liberation Sans", sans-serif; } .grammalecte_wrapper_title { - padding: 5px 0; - font-size: 12px; + display: inline-block; + padding: 2px 5px; + font-size: 14px; font-weight: bold; font-variant: small-caps; - color: hsla(210, 100%, 50%, .5); + text-shadow: 0px 1px 0px hsla(210, 10%, 10%, .8); + color: hsla(210, 100%, 90%, .5); } .grammalecte_wrapper_toolbar { display: flex; justify-content: flex-end; Index: gc_lang/fr/webext/content_scripts/wrapper.js ================================================================== --- gc_lang/fr/webext/content_scripts/wrapper.js +++ gc_lang/fr/webext/content_scripts/wrapper.js @@ -5,20 +5,20 @@ class GrammalecteWrapper { constructor (nWrapper, xTextArea) { this.nWrapper = nWrapper; - let xParentElement = xTextArea.parentElement; let xWrapper = createNode("div", {id: "grammalecte_wrapper" + nWrapper, className: "grammalecte_wrapper"}); - xParentElement.insertBefore(xWrapper, xTextArea); - xWrapper.appendChild(this._createTitle()); - xWrapper.appendChild(xTextArea); // move textarea in wrapper xWrapper.appendChild(this._createWrapperToolbar(xTextArea)); + this._insertAfter(xWrapper, xTextArea); + xWrapper.style.marginBottom = xTextArea.style.marginBottom; + xTextArea.style.marginBottom = "0px"; + xWrapper.style.width = xTextArea.style.width; } - _createTitle () { - return createNode("div", {className: "grammalecte_wrapper_title", textContent: "Grammalecte"}); + _insertAfter (xNewNode, xReferenceNode) { + xReferenceNode.parentNode.insertBefore(xNewNode, xReferenceNode.nextSibling); } _createWrapperToolbar (xTextArea) { try { let xToolbar = createNode("div", {className: "grammalecte_wrapper_toolbar"}); @@ -66,11 +66,11 @@ }); }; // Create //xToolbar.appendChild(createNode("img", {scr: browser.extension.getURL("img/logo-16.png")})); // can’t work, due to content-script policy: https://bugzilla.mozilla.org/show_bug.cgi?id=1267027 - //xToolbar.appendChild(createLogo()); + xToolbar.appendChild(createNode("div", {className: "grammalecte_wrapper_title", textContent: "Grammalecte"})) xToolbar.appendChild(xConjButton); xConjSection.appendChild(xConjButtonTab); xConjSection.appendChild(xConjButtonWin); xToolbar.appendChild(xConjSection); xToolbar.appendChild(xTFButton);