set opacity when model is active in file browser.

ui/components/History.vue

@@ -370,7 +370,7 @@
 <script setup>
 import moment from 'moment'
 import { useStorage } from '@vueuse/core'
-import { makeDownload, formatBytes, ucFirst } from '~/utils/index'
+import { makeDownload, formatBytes } from '~/utils/index'
 import toast from '~/plugins/toast'
 import { isEmbedable, getEmbedable } from '~/utils/embedable'
 

ui/pages/browser/[...slug].vue

@@ -129,6 +129,7 @@
 <script setup>
 import { request } from '~/utils/index'
 import moment from 'moment'
+import { useStorage } from '@vueuse/core'
 
 const route = useRoute()
 const toast = useToast()
@@ -140,6 +141,9 @@ const initialLoad = ref(true)
 const items = ref([])
 const path = ref(`/${route.params.slug?.length > 0 ? route.params.slug?.join('/') : ''}`)
 
+const bg_enable = useStorage('random_bg', true)
+const bg_opacity = useStorage('random_bg_opacity', 0.85)
+
 const model_item = ref()
 const closeModel = () => model_item.value = null
 
@@ -305,4 +309,12 @@ const makeBreadCrumb = path => {
   return links
 }
 
+
+watch(model_item, v => {
+  if (!bg_enable.value) {
+    return
+  }
+
+  document.querySelector('body').setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
+})
 </script>