unbork install button style + dedupe svg-icon

regressed in b8f6f5db

edit/edit.css

@@ -166,9 +166,6 @@ label {
 }
 
 .svg-icon {
-  cursor: pointer;
-  vertical-align: middle;
-  transition: fill .5s;
   width: 16px;
   height: 16px;
 }

global.css

@@ -89,6 +89,30 @@ input[type=search] {
   border: 1px solid hsl(0, 0%, 66%);
 }
 
+.svg-icon {
+  cursor: pointer;
+  vertical-align: middle;
+  transition: fill .5s;
+  width: 20px;
+  height: 20px;
+  fill: #666;
+}
+
+.svg-icon:hover {
+  fill: #000;
+}
+
+.svg-icon.info {
+  width: 14px;
+  height: 16px;
+  margin-left: .5ex;
+}
+
+.svg-icon.config {
+  width: 16px;
+  height: 16px;
+}
+
 .svg-icon.checked {
   position: absolute;
   height: 8px;

install-usercss/install-usercss.css

@@ -1,7 +1,6 @@
 body {
   overflow: hidden;
   margin: 0;
-  font: 12px arial, sans-serif;
   background: white;
 }
 
@@ -14,22 +13,11 @@ a:hover {
   color: #666;
 }
 
-img.icon,
-.svg-icon {
+img.icon {
   height: 1.4em;
   vertical-align: middle;
 }
 
-.svg-icon {
-  margin-left: 2px;
-  fill: #000;
-  transition: fill .5s;
-}
-
-a:hover .svg-icon {
-  fill: #666;
-}
-
 input:disabled + span {
   color: rgb(128, 128, 128);
 }
@@ -107,7 +95,7 @@ h1 small {
   margin: 0.5em 0;
 }
 
-.install {
+button.install { /* raising specificity to override button:not(.fake) in global.css */
   font-family: Arial, "DejaVu Sans", Verdana, Geneva, sans-serif;
   font-size: 14px;
   background-color: hsl(0, 0%, 33%);
@@ -126,21 +114,21 @@ h1 small {
   transition: color .25s, background-color .25s;
 }
 
-.install,
-.install:before {
+button.install,
+button.install:before {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAeCAYAAAAGos/EAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gINFiccyZ2qfAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAb0lEQVQY012OwQ3CUAzFnNeMAfsv1hk4VDTm0H6ByMmyLL2U+lRowKobwAVFEEWbwqKIIGDXBTQqBU3VbWYk0CTLIAxNEHI1s5oAYXAYm2AIfZ64Ab1ta4s/yHv908twHB5gqf0Tvyg1l9l3efC9Dw0XRC2vHIXXAAAAAElFTkSuQmCC);
   background-size: 100% 100%;
   background-repeat: repeat-x;
 }
 
-.install:hover:not(:disabled) {
+button.install:hover:not(:disabled) {
   background-color: hsl(0, 0%, 38%);
   color: #fff;
   text-shadow: none;
 }
 
-.install:before,
-.install:after {
+button.install:before,
+button.install:after {
   content: "";
   vertical-align: middle;
   box-sizing: border-box;
@@ -152,80 +140,80 @@ h1 small {
   width: 30px;
 }
 
-.install:before {
+button.install:before {
   border-left: 1px solid rgba(0, 0, 0, .3);
   box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset -1px 0 0 0 hsl(0, 0%, 38%);
   padding: 5px 8px;
   transition: background-color .25s;
 }
 
-.install:before,
-.install:active:before,
-.install:active:hover:before {
+button.install:before,
+button.install:active:before,
+button.install:active:hover:before {
   background-color: hsl(176, 50%, 35%);
 }
 
-.install:hover:before {
+button.install:hover:before {
   background-color: hsl(176, 50%, 40%);
 }
 
-.install:active,
-.install:active:before {
+button.install:active,
+button.install:active:before {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAeCAYAAAAGos/EAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gINFioX6+ENuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAc0lEQVQY003OwQ0CQQxD0edsRBX03xg9cFjBhMPuSOT0ZdmxuS/zesWTzExBI7xlZhrKeeYkmZkH1Icg3Rfs1D98v3Kgj+NSypJlpZWU0tbKKlpVCm0JSyuxPbbnqpiJ0JLr8+w9sbtGxqRFInvYbLiVGX46ECZMv8VvjwAAAABJRU5ErkJggg==);
   background-size: 100% 100%;
   background-repeat: repeat-x;
 }
 
-.install:active,
-.install:active:hover {
+button.install:active,
+button.install:active:hover {
   background-color: hsl(0, 0%, 33%);
 }
 
-.install:after {
+button.install:after {
   background-image: url(../images/icon/16.png);
   background-repeat: no-repeat;
   background-position: center center;
 }
 
-.install:disabled {
+button.install:disabled {
   opacity: .25;
   color: white;
   cursor: auto;
 }
 
-.install.reinstall:after {
+button.install.reinstall:after {
   filter: grayscale(100%);
 }
 
-.install.reinstall:before,
-.install.reinstall:active:before,
-.install.reinstall:active:hover:before {
+button.install.reinstall:before,
+button.install.reinstall:active:before,
+button.install.reinstall:active:hover:before {
   background-color: hsl(0, 0%, 20%);
 }
 
-.install.reinstall:hover:before {
+button.install.reinstall:hover:before {
   background-color: hsl(0, 0%, 25%);
 }
 
-.install.reinstall:hover:before {
+button.install.reinstall:hover:before {
   background-color: #444;
 }
 
-.install.update:before,
-.install.update:active:before,
-.install.update:active:hover:before {
+button.install.update:before,
+button.install.update:active:before,
+button.install.update:active:hover:before {
   background-color: hsl(140, 100%, 13%);
 }
 
-.install.update:hover:before {
+button.install.update:hover:before {
   background-color: hsl(140, 100%, 18%);
 }
 
-.install.update:after {
+button.install.update:after {
   filter: hue-rotate(-18deg) brightness(.7) contrast(2);
 }
 
-.install.installed,
+button.install.installed,
 h2.installed {
   display: none;
 }

manage/manage.css

@@ -131,30 +131,6 @@ a:hover {
   border-top: none;
 }
 
-.svg-icon {
-  cursor: pointer;
-  vertical-align: middle;
-  transition: fill .5s;
-  width: 20px;
-  height: 20px;
-  fill: #666;
-}
-
-.svg-icon:hover {
-  fill: #000;
-}
-
-.svg-icon.info {
-  width: 14px;
-  height: 16px;
-  margin-left: .5ex;
-}
-
-.svg-icon.config {
-  width: 16px;
-  height: 16px;
-}
-
 .homepage {
   margin-left: 0.25em;
   margin-right: 0.1em;

options/options.css

@@ -45,11 +45,6 @@ a:hover {
   color: #666;
 }
 
-.svg-icon {
-  fill: #666;
-  transition: fill .5s;
-}
-
 a:hover .svg-icon,
 .svg-icon:hover {
   fill: #000;

popup/popup.css

@@ -476,10 +476,8 @@ a.configure[target="_blank"] .svg-icon.config {
 
 .svg-icon {
   pointer-events: none;
-  transition: fill .5s;
   width: 14px;
   height: 16px;
-  fill: #666;
 }
 
 a:hover .svg-icon {