Single post in Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides > Site Skins: How-To, and Helpful CSS >
Doing a bit of digging, but that kind of thing is hard to mess around with since the 'Nice' popup isn't ever up on the screen. From digging around in the JS and main CSS file, it looks like it's called '.nice_toast'.
Basically, I just include that to show what the original configuration is. So if you want to increase the height, image, background color, or whatever, this should give you the basic idea of how to do so.
Maybe. Again, I can't really test it. :p
Edit: So I'd suggest moving up from the bottom of the screen:
You can also increase the width on that, or mess with the animation keyframes that are up above.
Main CSS relevant to Nice
.nice_toast {
position: fixed;
left: 0;
bottom: 0;
margin: 8px;
width: 160px;
background-color: #0a1931;
box-shadow: 0 0 4px #020225;
border-radius: 16px;
padding: 8px 48px;
z-index: 200000;
animation: nice_popin 0.4s linear both;
}
.nice_toast:before {
position: absolute;
content: url('https://pfq-static.com/img/misc/goldstar.png');
left: 12px;
top: 12px;
transform-origin: center center;
animation: nice_mainstar 0.6s 0.4s linear both;
}
.nice_toast>.nice_close {
background-color: #223b64;
border: 1px solid #020225;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 12px;
text-decoration: none;
}
.nice_toast>.nice_close:before,.nice_toast>.nice_close:after {
content: '';
position: absolute;
left: 2px;
right: 2px;
height: 0;
border-top: 1px solid #b1bdd2;
border-bottom: 1px solid #b1bdd2;
}
.nice_toast>.nice_close:before {
top: 5px;
transform: rotate(45deg);
}
.nice_toast>.nice_close:after {
bottom: 5px;
transform: rotate(-45deg);
}
.nice_toast>.nice_star1,.nice_toast>.nice_star2,.nice_toast>.nice_star3 {
position: absolute;
border-bottom: 1px solid #b1bdd2;
transform-origin: right center;
animation: nice_star 3s 0.4s linear both;
}
.nice_toast>.nice_star1:before,.nice_toast>.nice_star2:before,.nice_toast>.nice_star3:before {
position: absolute;
content: url('https://pfq-static.com/img/misc/goldstar.png');
transform: scale(0.5);
left: -20px;
bottom: -12px;
}
.nice_toast>.nice_star1 {
right: 12px;
top: 4px;
}
.nice_toast>.nice_star2 {
right: 16px;
top: 16px;
}
.nice_toast>.nice_star3 {
right: 4px;
top: 24px;
}
.nice_toast.nice_fade {
animation: nice_popout 0.4s linear both;
}
@keyframes nice_mainstar {
from {
transform: scale(0) rotate(270deg);
}
80% {
transform: scale(1.4) rotate(54deg);
}
to {
transform: scale(1) rotate(0deg);
}
}
@keyframes nice_star {
from {
transform: rotate(-40deg);
width: 0;
}
to {
transform: rotate(-40deg) translateX(-12px);
width: 16px;
}
}
@keyframes nice_popin {
from {
transform: translate(-80%,0);
opacity: 0;
}
to {
transform: translate(0,0);
opacity: 1;
}
}
@keyframes nice_popout {
from {
transform: translate(0,0);
opacity: 1;
}
to {
transform: translate(0,80%);
opacity: 0;
}
}
CODE
.nice_toast {
top:50%;
}
official project sekai art; icon is official TCG art
he/him + 22 + cst