From 6e1ee3f6df8074c695f95d4c31263b6379c4d18f Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Tue, 13 Feb 2018 19:37:40 -0500
Subject: [PATCH] Prevent traditional button active state from applying to
 usercss install button

I don't install usercss styles much, but I just noticed that the regular button active state was being applied on click. Figured I'd give it its own active state, so I restyled them to use the same transparent background-image method for a gradient. This way, they can have regular transitioned hover states with color/background-color instead of a filter on the whole button, which was kinda odd. Also used the same vertically inverted background-image for active state, similar to what we use for regular buttons.

The goal was to fix active state and use different CSS in general, while making them look pretty much the same as they did. I think they're good, but I'm open to any suggestions. Also not sure about disabled state. I see some code for it, but the three states seem like they cover all possible states to me. Not sure why it'd ever really be disabled.
---
 install-usercss/install-usercss.css | 75 ++++++++++++++++++++++++-----
 1 file changed, 64 insertions(+), 11 deletions(-)

diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css
index ce799b10..1e0cdfef 100644
--- a/install-usercss/install-usercss.css
+++ b/install-usercss/install-usercss.css
@@ -116,8 +116,8 @@ h1 small {
 .install {
   font-family: Arial, "DejaVu Sans", Verdana, Geneva, sans-serif;
   font-size: 14px;
-  background: linear-gradient(#666, #555);
-  color: white;
+  background-color: hsl(0, 0%, 33%);
+  color: #eee;
   border-radius: 4px;
   padding: 4px 38px 4px 10px;
   position: relative;
@@ -129,6 +129,20 @@ h1 small {
   margin-bottom: 1ex;
   cursor: pointer;
   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%, 24%);
+  transition: color .25s, background-color .25s;
+}
+
+.install,
+.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) {
+  background-color: hsl(0, 0%, 38%);
+  color: #fff;
+  text-shadow: none;
 }
 
 .install:before,
@@ -145,9 +159,32 @@ h1 small {
 }
 
 .install:before {
-  background-image: linear-gradient(hsl(176, 44%, 40%), hsl(176, 50%, 35%));
-  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 rgba(0, 0, 0, .3), inset -1px 0 0 0 hsl(0, 0%, 38%);
+  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 {
+  background-color: hsl(176, 50%, 35%);
+}
+
+.install:hover:before {
+  background-color: hsl(176, 50%, 40%);
+}
+
+.install:active,
+.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 {
+  background-color: hsl(0, 0%, 33%);
 }
 
 .install:after {
@@ -156,12 +193,6 @@ h1 small {
   background-position: center center;
 }
 
-.install:hover:not(:disabled) {
-  filter: brightness(1.1);
-  color: #eee;
-  text-shadow: none;
-}
-
 .install:disabled {
   opacity: .25;
   color: white;
@@ -169,11 +200,33 @@ h1 small {
 }
 
 .install.reinstall:after {
-  background-color: #333;
   filter: grayscale(100%);
 }
 
+.install.reinstall:before,
+.install.reinstall:active:before,
+.install.reinstall:active:hover:before {
+  background-color: hsl(0, 0%, 20%);
+}
+
+.install.reinstall:hover:before {
+  background-color: hsl(0, 0%, 25%);
+}
+
+.install.reinstall:hover:before {
+  background-color: #444;
+}
+
 .install.update:before,
+.install.update:active:before,
+.install.update:active:hover:before {
+  background-color: hsl(140, 100%, 13%);
+}
+
+.install.update:hover:before {
+  background-color: hsl(140, 100%, 18%);
+}
+
 .install.update:after {
   filter: hue-rotate(-18deg) brightness(.7) contrast(2);
 }