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 @@ -81,14 +81,32 @@ } div.grammalecte_move_button { padding: 1px 5px; border-radius: 16px; color: hsla(180, 0%, 100%, .5); + opacity: .5; +} +div.grammalecte_move_button_up { + padding: 1px 10px; + background: center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAABcSURBVChTlY67DcAgDEQZhg3oGJMuA9CzoTlbcoQT8zvpFX7cSQQiusKVK1wJCkgfJ/wE4LImA/NuDjCWNWY0lh8wyzvScgW7yIjLTc6zZB7EG/RLx7hyhSvnUOgfudLrksye1QAAAABJRU5ErkJggg=='); +} +div.grammalecte_move_button_right { + padding: 1px 10px; + background: center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAABlSURBVChTdYs5DoBADAP3hzT0/IyWlpaSlwUHbaIc3pGmSGwPEake5Oeyp7JDli0HygZb3h4w0kbpmFbSKBZNho9qWWWc8M9rWa1c0PNYNCM3THk6psYDW94eUHkhy+hgWRaR8QHurtJh4OI9JwAAAABJRU5ErkJggg=='); +} +div.grammalecte_move_button_down { + padding: 1px 10px; + background: center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAABcSURBVChTY/j//z9JGKsgPoxVEB/GKogPg4jrJOBKkAYzICYGbAdiuJMIaVoNxHAnEdK0AIjh6pA1gDC6pjlAjKIGhQPFpkAMAhiKQRhDAIqVsYiBMVZB3Pg/AwAQkdVnCojycwAAAABJRU5ErkJggg=='); +} +div.grammalecte_move_button_left { + padding: 1px 10px; + background: center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAABaSURBVChTY/j//z8+3IguhsJBw/eBeB+aGE4N14AYBIjScBaIYYCghsNAjAzwatgFxOgApwZ9IMYG8NqATRNBP6BrIqgBhJE1EaUBhGGaiNYAwkZAjKbhPwMAP5rVDlUnDt8AAAAASUVORK5CYII='); } div.grammalecte_move_button:hover { background-color: hsla(180, 80%, 50%, .1); color: hsla(180, 0%, 100%, 1); + opacity: 1; } div.grammalecte_close_button { border-radius: 0 8px 0 4px; background-color: hsla(0, 80%, 50%, .5); color: hsla(210, 0%, 100%, .5); 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 @@ -72,15 +72,15 @@ } if (this.bFlexible) { xButtonLine.appendChild(this._createMoveButton("changeWidth", "⭾", "Bascule la largeur")); xButtonLine.appendChild(this._createMoveButton("changeHeight", "⭿", "Bascule la hauteur")); } - xButtonLine.appendChild(this._createMoveButton("up", "⏶", "Monter")); - xButtonLine.appendChild(this._createMoveButton("left", "⏴", "À gauche")); + xButtonLine.appendChild(this._createMoveButton("up", " ", "Monter")); // use char ⏶ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS) + xButtonLine.appendChild(this._createMoveButton("left", " ", "À gauche")); // use char ⏴ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS) xButtonLine.appendChild(this._createMoveButton("center", "•", "Centrer")); - xButtonLine.appendChild(this._createMoveButton("right", "⏵", "À droite")); - xButtonLine.appendChild(this._createMoveButton("down", "⏷", "Descendre")); + xButtonLine.appendChild(this._createMoveButton("right", " ", "À droite")); // use char ⏵ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS) + xButtonLine.appendChild(this._createMoveButton("down", " ", "Descendre")); // use char ⏷ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS) this.xCloseButton = this._createCloseButton(); xButtonLine.appendChild(this.xCloseButton); return xButtonLine; } @@ -94,11 +94,11 @@ xButton.onclick = () => { this.copyTextToClipboard(); }; return xButton; } _createMoveButton (sAction, sLabel, sTitle) { - let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_move_button", textContent: sLabel, title: sTitle}); + let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_move_button grammalecte_move_button_"+sAction, textContent: sLabel, title: sTitle}); xButton.onclick = () => { this[sAction](); }; return xButton; } _createCloseButton () {