GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-31 21:30:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化透明主题的模糊度和透明度设置

Browse Source
This commit is contained in:
jxxghp
2025-07-29 09:46:23 +08:00
parent 1c4a2176e9
commit 3b16e7a123
4 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/@core/scss/_misc.scss
View File

@@ -28,8 +28,8 @@ code {
background: rgba(var(--v-theme-background), 1);
.v-theme--transparent & {
backdrop-filter: blur(5px);
background: rgba(var(--v-theme-background), 0.1) !important;
backdrop-filter: blur(var(--transparent-blur-light, 5px));
background: rgba(var(--v-theme-background), var(--transparent-opacity-light, 0.1)) !important;
}
}
@@ -60,7 +60,8 @@ code {
}
.v-theme--transparent & {
background: rgba(var(--v-theme-background), 0.3);
backdrop-filter: blur(var(--transparent-blur-light, 10px));
background: rgba(var(--v-theme-background), var(--transparent-opacity-light, 0.3));
}
}
}

6
src/layouts/components/Footer.vue
View File

@@ -252,6 +252,12 @@ const showDynamicButton = computed(() => {
pointer-events: auto;
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
// 透明主题下的特殊样式
.v-theme--transparent & {
backdrop-filter: blur(var(--transparent-blur, 10px));
background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy, 0.5));
}
&.shift-left {
transform: translateX(0);
}

1
src/layouts/components/UserProfile.vue
View File

@@ -335,6 +335,7 @@ function applyTransparencySettings() {
root.style.setProperty('--transparent-opacity-light', (transparencyOpacity.value * 0.67).toString())
root.style.setProperty('--transparent-opacity-heavy', (transparencyOpacity.value * 1.67).toString())
root.style.setProperty('--transparent-blur', `${transparencyBlur.value}px`)
root.style.setProperty('--transparent-blur-light', `${transparencyBlur.value * 0.6}px`)
root.style.setProperty('--transparent-blur-heavy', `${transparencyBlur.value * 1.6}px`)
// 保存到本地存储

1
src/styles/themes/transparent.scss
View File

@@ -5,6 +5,7 @@ html[data-theme="transparent"] {
--transparent-opacity-light: 0.2;
--transparent-opacity-heavy: 0.5;
--transparent-blur: 10px;
--transparent-blur-light: 6px;
--transparent-blur-heavy: 16px;
// 应用、布局、主内容区域