open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Prevent traditional button active state from applying to usercss install button

Browse Source 
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.
This commit is contained in:
narcolepticinsomniac 2018-02-13 19:37:40 -05:00 committed by GitHub
parent c1b47e4b23
commit 6e1ee3f6df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 64 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
install-usercss/install-usercss.css
View File

@ -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);
}