Index: gc_lang/fr/webext/content_scripts/init.js ================================================================== --- gc_lang/fr/webext/content_scripts/init.js +++ gc_lang/fr/webext/content_scripts/init.js @@ -141,11 +141,11 @@ this.createMenus(); }, createTFPanel: function () { if (this.oTFPanel === null) { - this.oTFPanel = new GrammalecteTextFormatter("grammalecte_tf_panel", "Formateur de texte", 760, 615, false); + this.oTFPanel = new GrammalecteTextFormatter("grammalecte_tf_panel", "Formateur de texte", 760, 600, false); //this.oTFPanel.logInnerHTML(); this.oTFPanel.insertIntoPage(); window.setTimeout(function(self){ self.oTFPanel.adjustHeight(); }, 50, this); Index: gc_lang/fr/webext/content_scripts/message_box.css ================================================================== --- gc_lang/fr/webext/content_scripts/message_box.css +++ gc_lang/fr/webext/content_scripts/message_box.css @@ -10,11 +10,10 @@ margin: 0; top: 50%; left: 50%; width: 400px; margin-left: -200px; - margin-left: -100px; min-height: 100px; box-sizing: content-box; z-index: 2147483647; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */ border: 2px solid hsl(210, 50%, 50%); border-radius: 10px 10px 10px 10px; Index: gc_lang/fr/webext/content_scripts/message_box.js ================================================================== --- gc_lang/fr/webext/content_scripts/message_box.js +++ gc_lang/fr/webext/content_scripts/message_box.js @@ -56,11 +56,11 @@ xButtonLine.appendChild(this._createCloseButton()); return xButtonLine; } _createCloseButton () { - let xButton = oGrammalecte.createNode("div", {className: "grammalecte_close_button", textContent: "×", title: "Fermer la fenêtre"}); + let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_close_button", textContent: "×", title: "Fermer la fenêtre"}); xButton.onclick = function () { this.hide(); }.bind(this); // better than writing “let that = this;” before the function? return xButton; } insertIntoPage () { Index: gc_lang/fr/webext/content_scripts/panel.css ================================================================== --- gc_lang/fr/webext/content_scripts/panel.css +++ gc_lang/fr/webext/content_scripts/panel.css @@ -53,51 +53,42 @@ color: hsla(210, 0%, 90%, 0); } div.grammalecte_panel_commands { float: right; + display: flex; + align-items: stretch; } -div.grammalecte_copy_button { - display: inline-block; +div.grammalecte_panel_button { padding: 1px 10px; - border-radius: 0 0 0 3px; font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif; font-size: 14px; font-weight: bold; - color: hsla(150, 0%, 100%, .5); text-align: center; cursor: pointer; } +div.grammalecte_copy_button { + border-radius: 2px; + color: hsla(150, 0%, 100%, .5); +} div.grammalecte_copy_button:hover { background-color: hsl(150, 90%, 35%); color: hsla(150, 0%, 100%, 1); } div.grammalecte_move_button { - display: inline-block; padding: 1px 5px; - font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif; - font-size: 14px; - font-weight: bold; + border-radius: 16px; color: hsla(180, 0%, 100%, .5); - text-align: center; - cursor: pointer; } div.grammalecte_move_button:hover { - background-color: hsl(180, 80%, 65%); + background-color: hsla(180, 80%, 50%, .1); color: hsla(180, 0%, 100%, 1); } div.grammalecte_close_button { - display: inline-block; - padding: 1px 10px; - border-radius: 0 8px 0 0; + border-radius: 0 8px 0 4px; background-color: hsla(0, 80%, 50%, .5); - font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif; - font-size: 14px; - font-weight: bold; color: hsla(210, 0%, 100%, .5); - text-align: center; - cursor: pointer; } div.grammalecte_close_button:hover { background-color: hsl(0, 100%, 60%); color: hsla(210, 0%, 100%, 1); } Index: gc_lang/fr/webext/content_scripts/panel.js ================================================================== --- gc_lang/fr/webext/content_scripts/panel.js +++ gc_lang/fr/webext/content_scripts/panel.js @@ -60,15 +60,15 @@ let xButtonLine = oGrammalecte.createNode("div", {className: "grammalecte_panel_commands"}); xButtonLine.appendChild(this.xWaitIcon); if (this.sId === "grammalecte_gc_panel") { xButtonLine.appendChild(this._createCopyButton()); } - xButtonLine.appendChild(this._createMoveButton("stickToTop", "¯", "Coller en haut")); - xButtonLine.appendChild(this._createMoveButton("stickToLeft", "«", "Coller à gauche")); + xButtonLine.appendChild(this._createMoveButton("stickToTop", "⏶", "Coller en haut")); + xButtonLine.appendChild(this._createMoveButton("stickToLeft", "⏴", "Coller à gauche")); xButtonLine.appendChild(this._createMoveButton("center", "•", "Centrer")); - xButtonLine.appendChild(this._createMoveButton("stickToRight", "»", "Coller à droite")); - xButtonLine.appendChild(this._createMoveButton("stickToBottom", "_", "Coller en bas")); + xButtonLine.appendChild(this._createMoveButton("stickToRight", "⏵", "Coller à droite")); + xButtonLine.appendChild(this._createMoveButton("stickToBottom", "⏷", "Coller en bas")); xButtonLine.appendChild(this._createCloseButton()); return xButtonLine; } _createWaitIcon () { @@ -77,23 +77,23 @@ //xWaitIcon.appendChild(oGrammalecte.createNode("div", {className: "bounce2"})); return xWaitIcon; } _createCopyButton () { - let xButton = oGrammalecte.createNode("div", {id: "grammalecte_clipboard_button", className: "grammalecte_copy_button", textContent: "∑", title: "Copier dans le presse-papiers"}); + let xButton = oGrammalecte.createNode("div", {id: "grammalecte_clipboard_button", className: "grammalecte_panel_button grammalecte_copy_button", textContent: "∑", title: "Copier dans le presse-papiers"}); xButton.onclick = function () { this.copyTextToClipboard(); }.bind(this); return xButton; } _createMoveButton (sAction, sLabel, sTitle) { - let xButton = oGrammalecte.createNode("div", {className: "grammalecte_move_button", textContent: sLabel, title: sTitle}); + let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_move_button", textContent: sLabel, title: sTitle}); xButton.onclick = function () { this[sAction](); }.bind(this); return xButton; } _createCloseButton () { - let xButton = oGrammalecte.createNode("div", {className: "grammalecte_close_button", textContent: "×", title: "Fermer la fenêtre"}); + let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_close_button", textContent: "×", title: "Fermer la fenêtre"}); xButton.onclick = function () { this.hide(); }.bind(this); // better than writing “let that = this;” before the function? return xButton; } insertIntoPage () {