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

fix(home): resolve home tabs style issues

Browse Source
This commit is contained in:
Hakadao
2024-11-20 01:43:21 +08:00
parent d27e5204c9
commit 77648a650b
1 changed files with 39 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -198,33 +198,42 @@ function toggleTabContentLoading(loading: boolean) {
<section
v-if="!(!settings.alwaysShowTabsOnHomePage && currentTabs.length === 1)"
style="backdrop-filter: var(--bew-filter-glass-1)"
flex="~ items-center gap-1 wrap"
bg="$bew-elevated" p-1
h-38px
rounded-full
h-38px rounded-full
text="sm"
shadow="[var(--bew-shadow-1),var(--bew-shadow-edge-glow-1)]"
box-border border="1 $bew-border-color"
>
<button
v-for="tab in currentTabs" :key="tab.page"
:class="{ 'tab-activated': activatedPage === tab.page }"
px-4 h-full
bg="transparent hover:$bew-fill-2" rounded-full
cursor-pointer duration-300
flex="~ gap-2 items-center" relative
@click="handleChangeTab(tab)"
<OverlayScrollbarsComponent
class="home-tabs-inside"
element="div" defer
:options="{
x: 'scroll',
y: 'hidden',
}"
h-full of-hidden
>
<span class="text-center">{{ $t(tab.i18nKey) }}</span>
<button
v-for="tab in currentTabs" :key="tab.page"
:class="{ 'tab-activated': activatedPage === tab.page }"
px-3 h-inherit
bg="transparent hover:$bew-fill-2" rounded-full
cursor-pointer duration-300
flex="~ gap-2 items-center shrink-0" relative
@click="handleChangeTab(tab)"
>
<span class="text-center">{{ $t(tab.i18nKey) }}</span>
<Transition name="fade">
<div
v-show="activatedPage === tab.page && tabContentLoading"
i-svg-spinners:ring-resize
pos="absolute right-4px top-4px" duration-300
text="8px $bew-text-auto"
/>
</Transition>
</button>
<Transition name="fade">
<div
v-show="activatedPage === tab.page && tabContentLoading"
i-svg-spinners:ring-resize
pos="absolute right-4px top-4px" duration-300
text="8px $bew-text-auto"
/>
</Transition>
</button>
</OverlayScrollbarsComponent>
</section>
<div
@@ -296,6 +305,15 @@ function toggleTabContentLoading(loading: boolean) {
--uno: "important-translate-y--70px";
}
.home-tabs-inside {
:deep([data-overlayscrollbars-contents]) {
--uno: "flex items-center gap-1 h-inherit rounded-full";
}
:deep(.os-scrollbar) {
--uno: "mb--4px";
}
}
.tab-activated {
--uno: "bg-$bew-theme-color-auto text-$bew-text-auto border-$bew-theme-color dark:border-white";
}