fixed visibility of icons (see #506)

extension/ui/pages/help.css

@@ -68,6 +68,13 @@ ol>li>ul>li>ul {
     height: 1em;
 }
 
+.button {
+    height: .9em;
+    background-color: #8e8e8e;
+    padding: 3px;
+    border-radius: 4px;
+}
+
 #titleIcon {
     width: 1.2em;
     height: 1.2em;
@@ -197,4 +204,8 @@ kbd.light, .light-keys kbd, .key.light, .light-keys .key {
     .option {
         color: #afafaf;
     }
+    .button {
+        height: .9em;
+        background-color: #484848;
+    }
 }

extension/ui/pages/help.html

@@ -350,12 +350,12 @@
 						<ul>
 							<li><code>normal</code>: default value</li>
 							<li><code>edit the page</code>: enable the button <img
-									src="../resources/button_note_edit.png" class="icon"></li>
+									src="../resources/button_note_edit.png" class="icon button"></li>
 							<li><code>format the page</code>: enable the button <img
-									src="../resources/button_note_format.png" class="icon"> if the page can be
+									src="../resources/button_note_format.png" class="icon button"> if the page can be
 								formatted</li>
 							<li><code>remove elements</code>: enable the button <img
-									src="../resources/button_cut_inner.png" class="icon"></li>
+									src="../resources/button_cut_inner.png" class="icon button"></li>
 						</ul>
 						</p>
 					</li>
@@ -509,30 +509,30 @@
 					by enabling the option "Annotation editor &gt; edit page before saving". It allows you to:
 				<ul>
 					<li>add notes by clicking one of these buttons: <img src="../resources/button_note_yellow.png"
-							class="icon">
-						<img src="../resources/button_note_pink.png" class="icon"> <img
-							src="../resources/button_note_blue.png" class="icon">
-						<img src="../resources/button_note_green.png" class="icon"></li>
+							class="icon button">
+						<img src="../resources/button_note_pink.png" class="icon button"> <img
+							src="../resources/button_note_blue.png" class="icon button">
+						<img src="../resources/button_note_green.png" class="icon button"></li>
 					<li>hide or show notes by clicking the button <img src="../resources/button_note_visible.png"
-							class="icon"></li>
+							class="icon button"></li>
 					<li>highlight text by clicking one of these buttons: <img
-							src="../resources/button_highlighter_yellow.png" class="icon"> <img
-							src="../resources/button_highlighter_pink.png" class="icon"> <img
-							src="../resources/button_highlighter_blue.png" class="icon"> <img
-							src="../resources/button_highlighter_green.png" class="icon"></li>
+							src="../resources/button_highlighter_yellow.png" class="icon button"> <img
+							src="../resources/button_highlighter_pink.png" class="icon button"> <img
+							src="../resources/button_highlighter_blue.png" class="icon button"> <img
+							src="../resources/button_highlighter_green.png" class="icon button"></li>
 					<li>hide or show highlighted text by clicking the button <img
-							src="../resources/button_highlighter_visible.png" class="icon"></li>
+							src="../resources/button_highlighter_visible.png" class="icon button"></li>
 					<li>remove text highlighting by clicking the button <img
-							src="../resources/button_highlighter_delete.png" class="icon"></li>
-					<li>edit the page by clicking the button <img src="../resources/button_note_edit.png" class="icon">
+							src="../resources/button_highlighter_delete.png" class="icon button"></li>
+					<li>edit the page by clicking the button <img src="../resources/button_note_edit.png" class="icon button">
 					</li>
 					<li>format the page to improve readability (when possible) by clicking the button <img
-							src="../resources/button_note_format.png" class="icon">
+							src="../resources/button_note_format.png" class="icon button">
 					</li>
-					<li>remove contents by clicking the button <img src="../resources/button_cut.png" class="icon">,
-						undo removes by clicking the button <img src="../resources/button_undo_cut.png" class="icon"> or
-						the button <img src="../resources/button_undo_all_cut.png" class="icon">, and redo removes by
-						clicking the button <img src="../resources/button_redo_cut.png" class="icon">.
+					<li>remove contents by clicking the button <img src="../resources/button_cut_inner.png" class="icon button">,
+						undo removes by clicking the button <img src="../resources/button_undo_cut.png" class="icon button"> or
+						the button <img src="../resources/button_undo_all_cut.png" class="icon button">, and redo removes by
+						clicking the button <img src="../resources/button_redo_cut.png" class="icon button">.
 						<br>
 						You can also use the following keyboard shortcuts when removing contents:
 						<ul>
@@ -543,7 +543,7 @@
 							<li><code>Ctrl-Shift-Z</code>: redo the last removal</li>
 						</ul>
 					</li>
-					<li>save the page by clicking the button <img src="../resources/button_download.png" class="icon">.
+					<li>save the page by clicking the button <img src="../resources/button_download.png" class="icon button">.
 				</ul>
 				</p>
 			</li>