renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: tweak styles

Browse Source
This commit is contained in:
Hakadao
2025-02-20 23:10:53 +08:00
parent 722f406786
commit 7c5993e886
2 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Dock/Dock.vue
View File

@@ -445,10 +445,10 @@ const dockTransformStyle = computed((): { transform: string, transformOrigin: st
}
.dock-item {
--shadow-dark: 0 4px 30px 4px var(--bew-theme-color-60);
--shadow-active: 0 4px 30px var(--bew-theme-color-70);
--shadow-dark-active: 0 4px 20px var(--bew-theme-color-80);
--shadow-active-active: 0 4px 20px var(--bew-theme-color-90);
--shadow-dark: 0 4px 30px 4px rgba(255, 255, 255, 0.6);
--shadow-active: 0 4px 30px var(--bew-theme-color-60);
--shadow-dark-active: 0 4px 20px rgba(255, 255, 255, 0.8);
--shadow-active-active: 0 4px 20px var(--bew-theme-color-80);
--uno: "relative transform active:important-scale-90 hover:scale-110";
--uno: "lg:w-45px w-35px";
@@ -480,7 +480,7 @@ const dockTransformStyle = computed((): { transform: string, transformOrigin: st
}
&.active {
--uno: "important-bg-$bew-theme-color-80 text-white";
--uno: "important-bg-$bew-theme-color text-white !dark:bg-white !dark:text-black";
--uno: "shadow-$shadow-active dark:shadow-$shadow-dark";
--uno: "active:shadow-$shadow-active-active dark-active:shadow-$shadow-dark-active";
}

15
src/components/TopBar/TopBar.vue
View File

@@ -3,6 +3,7 @@ import { onClickOutside, onKeyStroke, useMouseInElement } from '@vueuse/core'
import type { Ref, UnwrapNestedRefs } from 'vue'
import { useBewlyApp } from '~/composables/useAppProvider'
import { useDark } from '~/composables/useDark'
import { useDelayedHover } from '~/composables/useDelayedHover'
import { OVERLAY_SCROLL_BAR_SCROLL, TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
import { AppPage } from '~/enums/appEnums'
@@ -37,6 +38,7 @@ import type { UnReadDm, UnReadMessage, UserInfo } from './types'
// })
const { activatedPage, scrollbarRef, reachTop } = useBewlyApp()
const { isDark } = useDark()
const mid = getUserID() || ''
const userInfo = reactive<UserInfo | NonNullable<unknown>>({}) as UnwrapNestedRefs<UserInfo>
@@ -507,7 +509,6 @@ defineExpose({
pointer-events-none transform-gpu
/>
<!-- <Transition name="fade"> -->
<div
pos="absolute top-0 left-0" w-full
pointer-events-none opacity-100 duration-300
@@ -521,7 +522,15 @@ defineExpose({
height: reachTop ? 'var(--bew-top-bar-height)' : 'calc(var(--bew-top-bar-height) + 20px)',
}"
/>
<!-- </Transition> -->
<!-- Top bar theme color gradient -->
<Transition name="fade">
<div
v-if="reachTop && !forceWhiteIcon && activatedPage !== AppPage.Search && isDark"
pos="absolute top-0 left-0" w-full h="$bew-top-bar-height" pointer-events-none
:style="{ background: 'linear-gradient(to bottom, var(--bew-theme-color-10), transparent)' }"
/>
</Transition>
<div shrink-0 flex="inline xl:1 justify-start items-center gap-2">
<div
@@ -576,7 +585,7 @@ defineExpose({
v-if="showSearchBar"
class="search-bar"
:style="{
'--b-search-bar-normal-color': settings.disableFrostedGlass ? 'var(--bew-elevated)' : 'color-mix(in oklab, var(--bew-elevated-solid), transparent 80%)',
'--b-search-bar-normal-color': settings.disableFrostedGlass ? 'var(--bew-elevated)' : 'color-mix(in oklab, var(--bew-elevated-solid), transparent 60%)',
'--b-search-bar-hover-color': 'var(--bew-elevated-hover)',
'--b-search-bar-focus-color': 'var(--bew-elevated)',
'--b-search-bar-normal-icon-color': forceWhiteIcon && !settings.disableFrostedGlass ? 'white' : 'var(--bew-text-1)',