Rim-Modules/gamepad-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add drop shadow on A button animation

Browse Source
This commit is contained in:
e7d 2022-07-28 18:09:05 +02:00
parent b8de2cdd50
commit 000036e4f2
No known key found for this signature in database
GPG Key ID: F320BE007C0B8881
1 changed files with 11 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
css/main.css
View File

@ -35,42 +35,52 @@ body.unsupported #gamepad {
@keyframes press-button { @keyframes press-button {
0% { 0% {
fill: #898989; fill: #898989;
filter: drop-shadow(0 0 0 rgb(0 229 48 / 0.4));
} }
7% { 7% {
fill: #898989; fill: #898989;
filter: drop-shadow(0 0 0 rgb(0 229 48 / 0.4));
} }
10% { 10% {
fill: #00e530; fill: #00e530;
filter: drop-shadow(0 0 5px rgb(0 229 48 / 0.4));
} }
17% { 17% {
fill: #00e530; fill: #00e530;
filter: drop-shadow(0 0 5px rgb(0 229 48 / 0.4));
} }
20% { 20% {
fill: #898989; fill: #898989;
filter: drop-shadow(0 0 0 rgb(0 229 48 / 0.4));
} }
27% { 27% {
fill: #898989; fill: #898989;
filter: drop-shadow(0 0 0 rgb(0 229 48 / 0.4));
} }
30% { 30% {
fill: #00e530; fill: #00e530;
filter: drop-shadow(0 0 5px rgb(0 229 48 / 0.4));
} }
37% { 37% {
fill: #00e530; fill: #00e530;
filter: drop-shadow(0 0 5px rgb(0 229 48 / 0.4));
} }
40% { 40% {
fill: #898989; fill: #898989;
filter: drop-shadow(0 0 0 rgb(0 229 48 / 0.4));
} }
100% { 100% {
fill: #898989; fill: #898989;
filter: drop-shadow(0 0 0 rgb(0 229 48 / 0.4));
} }
} }
@ -213,8 +223,7 @@ kbd[title],
cursor: help; cursor: help;
} }
kbd, kbd {
kbd.dark {
-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), -moz-box-shadow: inset 0 0 1px rgb(150, 150, 150),
inset 0 -0.05em 0.4em rgb(80, 80, 80), 0 0.1em 0 rgb(30, 30, 30), inset 0 -0.05em 0.4em rgb(80, 80, 80), 0 0.1em 0 rgb(30, 30, 30),
0 0.1em 0.1em rgba(0, 0, 0, 0.3); 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
@ -236,30 +245,3 @@ kbd.dark {
color: rgb(250, 250, 250); color: rgb(250, 250, 250);
text-shadow: -1px -1px 0 rgb(70, 70, 70); text-shadow: -1px -1px 0 rgb(70, 70, 70);
} }
kbd.light {
-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255),
inset 0 0 0.4em rgb(200, 200, 200), 0 0.1em 0 rgb(130, 130, 130),
0 0.11em 0 rgba(0, 0, 0, 0.4), 0 0.1em 0.11em rgba(0, 0, 0, 0.9);
-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255),
inset 0 0 0.4em rgb(200, 200, 200), 0 0.1em 0 rgb(130, 130, 130),
0 0.11em 0 rgba(0, 0, 0, 0.4), 0 0.1em 0.11em rgba(0, 0, 0, 0.9);
background: -moz-linear-gradient(
top,
rgb(210, 210, 210),
rgb(255, 255, 255)
);
background: -webkit-gradient(
linear,
left top,
left bottom,
from(rgb(210, 210, 210)),
to(rgb(255, 255, 255))
);
background: rgb(250, 250, 250);
box-shadow: inset 0 0 1px rgb(255, 255, 255),
inset 0 0 0.4em rgb(200, 200, 200), 0 0.1em 0 rgb(130, 130, 130),
0 0.11em 0 rgba(0, 0, 0, 0.4), 0 0.1em 0.11em rgba(0, 0, 0, 0.9);
color: rgb(50, 50, 50);
text-shadow: 0 0 2px rgb(255, 255, 255);
}