Options; restyle exclusion rules.

1 files changed, 23 insertions, 4 deletions

diff --git a/pages/options.html b/pages/options.html
index 88e4845b..ab99c226 100644
--- a/pages/options.html
+++ b/pages/options.html
@@ -170,13 +170,23 @@
         overflow: scroll;
         overflow-x: hidden;
         overflow-y: auto;
-        min-height: 135px;
-        height: 135px;
-        border: 1px solid #bfbfbf;
+        max-height: 135px;
         border-radius: 2px;
         color: #444;
         width: 100%
       }
+      #exclusionScrollBox::-webkit-scrollbar {
+        width: 12px;
+      }
+      #exclusionScrollBox::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+        border-radius: 2px;
+      }
+
+      #exclusionScrollBox::-webkit-scrollbar-thumb {
+        border-radius: 2px;
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+      }
       #exclusionRules {
         width: 100%;
       }
@@ -186,6 +196,14 @@
       .exclusionRemoveButton {
         width: 1px; /* 1px; smaller than the button itself. */
       }
+      .exclusionRemoveButtonButton {
+        border: none;
+        background-color: #fff;
+        color: #979ca0;
+      }
+      .exclusionRemoveButtonButton:hover {
+        color: #444;
+      }
       input.pattern, input.passKeys, .exclusionHeaderText {
         width: 100%;
         font-family: Consolas, "Liberation Mono", Courier, monospace;
@@ -259,7 +277,8 @@
                      <tr class="exclusionRuleTemplateInstance">
                         <td><input/ type="text" class="pattern" placeholder="URL pattern"></td>
                         <td class="exclusionRulePassKeys"><input/ type="text" class="passKeys" placeholder="Exclude keys"></td>
-                        <td class="exclusionRemoveButton"><input/ type="button" tabindex = "-1" value="&#x2716;"></td>
+                        <td class="exclusionRemoveButton">
+                          <input/ type="button" tabindex = "-1" class="exclusionRemoveButtonButton" value="&#x2716;"></td>
                      </tr>
                   </template>
                </div>