made-in-akira/webdev/userstyles/spriters_resource_plus.css

105 lines
2.3 KiB
CSS

/* ==UserStyle==
@name spriters_resource_plus
@namespace spriters_resource.com
@author lavender software, akira division
@version i forgor
==/UserStyle== */
/*
warning: contains flashing lights! (*someone* found out about the animation property in css)*/
.recent-uploads{
transition: 0s
}
/*icons*/
.iconheader{
color: white!important;
border: 0px!important;
border-radius: 4px;
outline: 0px!important;
background-color: #a34d4d22;
}
.iconheadertext{
text-shadow: 0px 2px 5px #fff!important;
color: black;
font-size: 13px!important;
}
.iconheadertext:active{
text-shadow: 0px 2px 5px #000!important;
color: white;
font-size: 13px!important;
}
.iconbody{
border: none!important;
border-radius: 4px!important;
margin-left: 4px!important;
}
.iconbody:hover{
transition: 0.1s;
box-shadow: inset 0px 0px 50px #fff;
}
.iconcontainer{
box-shadow: 0px 3px 4px #5f1c1caa;
border-radius: 4px!important;
border:none!important;
background-image: linear-gradient(#fff, #ebbebe, #fff);
transition: all ease-out 0.6s;
}
.iconcontainer:hover{
box-shadow: 0px 3px 1px #5f1c1caa, 0px 3px 5px #ff8484, inset 0px 7px 50px #fff, inset 0px 7px 17px #fff;
background-image: linear-gradient(#fff, #fff);
transition: all ease-in-out 0s;
transform: translate(0px, -4px);
}
.iconcontainer:active{
animation: flash 0.3s;
transform: translate(0px, 4px);
box-shadow: inset 0px -2px 5px #000;
transition: all ease-out 0s;
background-image: linear-gradient(#ff8e8e, #ebbebe, #fff);
}
@keyframes flash{
0% {
background-image: linear-gradient(#fff, #fff);
}
10% {
background-image: linear-gradient(#4a2828, #4a2828);
}
20% {
background-image: linear-gradient(#fff, #fff);
}
30% {
background-image: linear-gradient(#4a2828, #4a2828);
}
40% {
background-image: linear-gradient(#fff, #fff);
}
50% {
background-image: linear-gradient(#4a2828, #4a2828);
}
60% {
background-image: linear-gradient(#fff, #fff);
}
70% {
background-image: linear-gradient(#4a2828, #4a2828);
}
80% {
background-image: linear-gradient(#fff, #fff);
}
90% {
background-image: linear-gradient(#4a2828, #4a2828);
}
100% {
background-image: linear-gradient(#fff, #fff);
}
}