feat: add new setting to disable blur for low-performance device (#2561)

This commit is contained in:
TAKAHASHI Shuuji 2024-01-18 17:18:49 +09:00 committed by GitHub
parent b0125eb3fc
commit f79d84ad6e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 28 additions and 4 deletions

View file

@ -10,6 +10,7 @@ defineProps<{
const container = ref()
const route = useRoute()
const userSettings = useUserSettings()
const { height: windowHeight } = useWindowSize()
const { height: containerHeight } = useElementBounding(container)
const wideLayout = computed(() => route.meta.wideLayout ?? false)
@ -26,10 +27,13 @@ const containerClass = computed(() => {
<template>
<div ref="container" :class="containerClass">
<div
sticky top-0 z10 backdrop-blur
sticky top-0 z10
pt="[env(safe-area-inset-top,0)]"
bg="[rgba(var(--rgb-bg-base),0.7)]"
class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
:class="{
'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
}"
>
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
<div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>