Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-11 23:02:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: style improvements (mainly animations)

Browse Source
This commit is contained in:
saicaca
2024-06-30 01:30:03 +08:00
parent 02865aa76e
commit f438ea4252
5 changed files with 78 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/GlobalStyles.astro
View File

@@ -177,7 +177,7 @@ color_set({
</style>
<style is:global>
<style is:global lang="scss">
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -192,11 +192,15 @@ color_set({
.card-shadow {
@apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
}
.expand-animation {
@apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
}
.link {
@apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1 -m-1;
@apply transition rounded-md p-1 -m-1 expand-animation;
}
.link-lg {
@apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1.5 -m-1.5;
@apply transition rounded-md p-1.5 -m-1.5 expand-animation;
}
.float-panel {
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
@@ -217,14 +221,12 @@ color_set({
}
.btn-plain {
@apply transition relative flex items-center justify-center bg-none
overflow-hidden text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
&:not(.scale-animation) {
@apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
}
&.scale-animation {
@apply before:ease-out hover:bg-none relative active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
before:absolute before:rounded-[inherit] before:inset-0 before:transition before:scale-[0.85] hover:before:scale-100 before:-z-10;
@apply expand-animation;
&.current-theme-btn {
@apply before:scale-100 before:opacity-100 before:bg-[var(--btn-plain-bg-hover)] text-[var(--primary)]
}