GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 15:36:49 +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
src/@core/scss/_misc.scss
+4 -3
View File
@@ -28,8 +28,8 @@ code {
background: rgba(var(--v-theme-background), 1); background: rgba(var(--v-theme-background), 1);
.v-theme--transparent & { .v-theme--transparent & {
backdrop-filter: blur(5px); backdrop-filter: blur(var(--transparent-blur-light, 5px));
background: rgba(var(--v-theme-background), 0.1) !important; background: rgba(var(--v-theme-background), var(--transparent-opacity-light, 0.1)) !important;
} }
} }
@@ -60,7 +60,8 @@ code {
} }
.v-theme--transparent & { .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));
} }
} }
} }
src/layouts/components/Footer.vue
+6
View File
@@ -252,6 +252,12 @@ const showDynamicButton = computed(() => {
pointer-events: auto; pointer-events: auto;
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); 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 { &.shift-left {
transform: translateX(0); transform: translateX(0);
} }
src/layouts/components/UserProfile.vue
+1
View File
@@ -335,6 +335,7 @@ function applyTransparencySettings() {
root.style.setProperty('--transparent-opacity-light', (transparencyOpacity.value * 0.67).toString()) 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-opacity-heavy', (transparencyOpacity.value * 1.67).toString())
root.style.setProperty('--transparent-blur', `${transparencyBlur.value}px`) 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`) root.style.setProperty('--transparent-blur-heavy', `${transparencyBlur.value * 1.6}px`)
// 保存到本地存储 // 保存到本地存储
src/styles/themes/transparent.scss
+1
View File
@@ -5,6 +5,7 @@ html[data-theme="transparent"] {
--transparent-opacity-light: 0.2; --transparent-opacity-light: 0.2;
--transparent-opacity-heavy: 0.5; --transparent-opacity-heavy: 0.5;
--transparent-blur: 10px; --transparent-blur: 10px;
--transparent-blur-light: 6px;
--transparent-blur-heavy: 16px; --transparent-blur-heavy: 16px;
// 应用、布局、主内容区域 // 应用、布局、主内容区域