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

feat: style and animation improvements

Browse Source 
(cherry picked from commit 69deabde36f96a96bc3c69775fa5a9b4eead0f01)
This commit is contained in:
saicaca
2023-10-16 22:45:30 +08:00
parent eb7c408b6a
commit dd9adb2ed6
11 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/widget/DisplaySetting.astro
View File

@@ -56,22 +56,36 @@ const enableBanner = getConfig().banner.enable;
border-radius: 2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: none;
&:hover
background: rgba(255, 255, 255, 0.8);
&:active
background: rgba(255, 255, 255, 0.6);
::-moz-range-thumb
-webkit-appearance: none;
height: 24px;
width: 10px;
border-radius: 4px;
height: 16px;
width: 8px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: none;
&:hover
background: rgba(255, 255, 255, 0.8);
&:active
background: rgba(255, 255, 255, 0.6);
&::-ms-thumb
-webkit-appearance: none;
height: 24px;
width: 10px;
border-radius: 4px;
height: 16px;
width: 8px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: none;
&:hover
background: rgba(255, 255, 255, 0.8);
&:active
background: rgba(255, 255, 255, 0.6);
.banner-closed
#display-setting

6
src/components/widget/Profile.astro
View File

@@ -10,15 +10,15 @@ const className = Astro.props
const vConf = getConfig();
---
<div class="card-base" transition:persist>
<ImageBox src={vConf.profile.avatar} class="w-[240px] mt-4 mx-auto lg:w-full lg:mt-0 rounded-2xl mb-3"></ImageBox>
<div class="card-base">
<ImageBox src={vConf.profile.avatar} class="mt-4 mx-auto lg:w-full lg:mt-0 rounded-2xl mb-3"></ImageBox>
<div class="font-bold text-lg text-center mb-1 dark:text-neutral-50 transition">{vConf.profile.author}</div>
<div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-3 transition"></div>
<div class="text-center text-neutral-400 mb-2 transition">{vConf.profile.subtitle}</div>
<div class="flex gap-2 mx-2 justify-center mb-4">
{vConf.profile.links.map(item =>
<a href={item.url} target="_blank">
<Button isIcon iconName={item.icon} regular height="40px" class="rounded-lg"></Button>
<Button isIcon iconName={item.icon} regular height="40px" class="rounded-lg active:scale-90"></Button>
</a>
)}
</div>

14
src/components/widget/SideBar.astro
View File

@@ -7,7 +7,7 @@ import Categories from "./Categories.astro";
const className = Astro.props.class;
---
<div id="sidebar" class:list={[className, "w-full"]} transition:persist>
<div class="flex flex-col w-full gap-4 mb-4">
<div class="flex flex-col w-full gap-4 mb-4" transition:animate="none">
<Profile></Profile>
</div>
<div class="flex flex-col w-full gap-4 top-4 sticky top-4" transition:animate="none">
@@ -18,16 +18,4 @@ const className = Astro.props.class;
</div>
<style>
#sidebar {
view-transition-name: ssss;
}
/* TODO temporarily */
html::view-transition-old(ssss) {
mix-blend-mode: normal;
animation: none;
}
html::view-transition-new(ssss) {
mix-blend-mode: normal;
animation: none;
}
</style>