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

Integrate logging and scheduler surfaces with glass theme

Browse Source
This commit is contained in:
jxxghp
2026-07-22 22:39:11 +08:00
parent d2896d5936
commit dc8becb41a
3 changed files with 45 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/styles/themes/glass.scss
View File

@@ -459,7 +459,7 @@ html[data-theme='glass'] {
backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate));
}
// 移动端文件整理、日历和定时服务使用自定义容器，需要显式接入玻璃表面材质。
// 移动端文件整理和日历使用自定义容器，需要显式接入玻璃表面材质。
.transfer-history-mobile-page {
--transfer-history-mobile-search-bg: var(--glass-surface-soft);
--transfer-history-mobile-muted-bg: var(--glass-surface-soft);
@@ -469,14 +469,31 @@ html[data-theme='glass'] {
.transfer-history-mobile-record,
.mobile-calendar-filter-card,
.mobile-calendar-event-card,
.mobile-scheduler-card {
.mobile-calendar-event-card {
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
background: var(--glass-surface);
}
// 日志和定时服务的自定义表面通过变量接入主题，避免组件局部样式覆盖玻璃材质。
.logging-view,
.logging-view.is-dark-theme {
--logging-border: var(--glass-border);
--logging-record-bg-even: rgba(255, 255, 255, 6%);
--logging-record-bg-odd: rgba(255, 255, 255, 3%);
--logging-shadow: inset 0 1px 0 rgba(255, 255, 255, 10%);
--logging-shell-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
--logging-shell-background: var(--glass-surface-soft);
}
.mobile-scheduler-view {
--mobile-scheduler-card-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
--mobile-scheduler-card-background: var(--glass-surface);
--mobile-scheduler-card-border: 1px solid var(--glass-border);
--mobile-scheduler-card-shadow: var(--glass-shadow);
}
.mobile-subscribe-calendar {
--mobile-calendar-control-bg: var(--glass-surface-soft);
--mobile-calendar-placeholder-bg: var(--glass-surface-soft);
@@ -576,6 +593,14 @@ html[data-theme='glass'] {
}
@media (width <= 960px) {
// 全屏快捷弹窗释放外层玻璃背景，让定时服务卡片直接采样全局壁纸。
.scheduler-shortcut-dialog-card {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: transparent !important;
box-shadow: none !important;
}
// 设置页卡片与视口边缘保持阴影缓冲，避免页面横向裁切边界截断投影。
.settings-content-window {
padding-inline: 24px;

6
src/views/system/LoggingView.vue
View File

@@ -697,6 +697,8 @@ onUnmounted(() => {
<style scoped>
/* stylelint-disable selector-pseudo-class-no-unknown */
.logging-view {
--logging-shell-backdrop-filter: none;
--logging-shell-background: linear-gradient(180deg, var(--logging-shell-bg), rgba(var(--v-theme-surface), 0.9));
--logging-shell-bg: rgba(var(--v-theme-surface), 0.96);
--logging-record-bg-even: rgba(var(--v-theme-surface-variant), 0.01);
--logging-record-bg-odd: rgba(var(--v-theme-surface-variant), 0.005);
@@ -871,7 +873,9 @@ onUnmounted(() => {
flex: 1 1 auto;
padding: 0.875rem;
border: 1px solid var(--logging-border);
background: linear-gradient(180deg, var(--logging-shell-bg), rgba(var(--v-theme-surface), 0.9));
-webkit-backdrop-filter: var(--logging-shell-backdrop-filter);
backdrop-filter: var(--logging-shell-backdrop-filter);
background: var(--logging-shell-background);
box-shadow: var(--logging-shadow);
}

18
src/views/system/ServiceView.vue
View File

@@ -297,6 +297,11 @@ const { loading: schedulerLoading } = useDataRefresh(
}
.mobile-scheduler-view {
--mobile-scheduler-card-backdrop-filter: none;
--mobile-scheduler-card-background: rgb(var(--v-theme-surface));
--mobile-scheduler-card-border: 0;
--mobile-scheduler-card-shadow: none;
background: transparent;
min-block-size: 100%;
padding-block: 12px calc(22px + env(safe-area-inset-bottom));
@@ -313,11 +318,12 @@ const { loading: schedulerLoading } = useDataRefresh(
display: grid;
align-items: center;
padding: 18px;
border: 0;
border: var(--mobile-scheduler-card-border);
border-radius: var(--app-surface-radius);
backdrop-filter: none;
background: rgb(var(--v-theme-surface));
box-shadow: none;
-webkit-backdrop-filter: var(--mobile-scheduler-card-backdrop-filter);
backdrop-filter: var(--mobile-scheduler-card-backdrop-filter);
background: var(--mobile-scheduler-card-background);
box-shadow: var(--mobile-scheduler-card-shadow);
column-gap: 14px;
grid-template-columns: 62px minmax(0, 1fr) auto;
}
@@ -457,8 +463,8 @@ const { loading: schedulerLoading } = useDataRefresh(
gap: 10px;
}
html[data-theme='transparent'] .mobile-scheduler-card,
.v-theme--transparent .mobile-scheduler-card {
.v-theme--transparent .mobile-scheduler-card,
html[data-theme='transparent'] .mobile-scheduler-card {
backdrop-filter: blur(var(--transparent-blur, 10px));
background: rgba(var(--v-theme-surface), var(--transparent-opacity-light, 0.2));
}