mirrors/Hyperpipe
1
0
Fork 0
mirror of https://codeberg.org/Hyperpipe/Hyperpipe synced 2025-06-28 05:08:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add click animation to .pop

Browse source
This commit is contained in:
Denevola 2022-09-24 03:01:54 +09:00
parent b9d84f2534
commit 437e3ebd2f
3 changed files with 15 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/assets/base.css
View file

@ -238,21 +238,27 @@ img {
border-radius: 50%;
}
.pop {
--shadow: none;
--translate: 0;
}
.pop,
.pop-2 {
transition: box-shadow 0.4s ease, transform 0.4s ease;
transition: background-color 0.4s ease, box-shadow 0.4s ease, color 0.3s ease, transform 0.4s ease;
}
.pop:hover {
--shadow: 0.5rem 0.5rem 1rem var(--color-shadow);
--translate: -1.25rem;
.pop {
--background: none;
--shadow: none;
--translate: 0;
background: var(--background);
box-shadow: var(--shadow);
transform: translateX(calc(var(--translate) / 2))
translateY(calc(var(--translate) / 2));
}
.pop:hover {
--background: var(--color-background-soft);
--shadow: 0.5rem 0.5rem 1rem var(--color-shadow);
--translate: -1.25rem;
}
.pop:active {
--background: var(--color-border);
}
.pop-2 {
transform: translateX(var(--translate)) translateY(var(--translate));
box-shadow: var(--shadow);