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

feat: adjust color palette and glass effects

Browse Source
This commit is contained in:
Hakadao
2024-12-18 03:58:49 +08:00
parent ba41a1f61a
commit c2c8b86c6c
3 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/contentScripts/views/Home/Home.vue
View File

@@ -218,7 +218,7 @@ function toggleTabContentLoading(loading: boolean) {
v-for="tab in currentTabs" :key="tab.page"
:class="{ 'tab-activated': activatedPage === tab.page }"
px-3 h-inherit
bg="transparent hover:$bew-fill-2" text="$bew-text-2" rounded-full
bg="transparent hover:$bew-fill-2" text="$bew-text-1" fw-bold rounded-full
cursor-pointer duration-300
flex="~ gap-2 items-center shrink-0" relative
@click="handleChangeTab(tab)"
@@ -230,7 +230,7 @@ function toggleTabContentLoading(loading: boolean) {
v-show="activatedPage === tab.page && tabContentLoading"
i-svg-spinners:ring-resize
pos="absolute right-4px top-4px" duration-300
text="8px $bew-text-2"
text="8px white"
/>
</Transition>
</button>
@@ -247,12 +247,9 @@ function toggleTabContentLoading(loading: boolean) {
>
<div
v-for="icon in gridLayoutIcons" :key="icon.value"
:style="{
backgroundColor: gridLayout.home === icon.value ? 'var(--bew-fill-3)' : '',
color: gridLayout.home === icon.value ? 'var(--bew-text-1)' : 'var(--bew-text-2)',
}"
:class="{ 'grid-layout-item-activated': gridLayout.home === icon.value }"
flex="~ justify-center items-center"
h-full aspect-square text="$bew-text-2"
h-full aspect-square text="$bew-text-1"
rounded-full bg="hover:$bew-fill-2" duration-300
cursor-pointer
@click="gridLayout.home = icon.value"
@@ -317,6 +314,10 @@ function toggleTabContentLoading(loading: boolean) {
}
.tab-activated {
--uno: "bg-$bew-fill-3 text-$bew-text-1 fw-bold";
--uno: "bg-$bew-theme-color-auto text-$bew-text-auto";
}
.grid-layout-item-activated {
--uno: "bg-$bew-theme-color-auto text-$bew-text-auto";
}
</style>