Integrate logging and scheduler surfaces with glass theme

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

View File

@@ -459,7 +459,7 @@ html[data-theme='glass'] {
backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate));
} }
// 移动端文件整理日历和定时服务使用自定义容器,需要显式接入玻璃表面材质。 // 移动端文件整理日历使用自定义容器,需要显式接入玻璃表面材质。
.transfer-history-mobile-page { .transfer-history-mobile-page {
--transfer-history-mobile-search-bg: var(--glass-surface-soft); --transfer-history-mobile-search-bg: var(--glass-surface-soft);
--transfer-history-mobile-muted-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, .transfer-history-mobile-record,
.mobile-calendar-filter-card, .mobile-calendar-filter-card,
.mobile-calendar-event-card, .mobile-calendar-event-card {
.mobile-scheduler-card {
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
background: var(--glass-surface); 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-subscribe-calendar {
--mobile-calendar-control-bg: var(--glass-surface-soft); --mobile-calendar-control-bg: var(--glass-surface-soft);
--mobile-calendar-placeholder-bg: var(--glass-surface-soft); --mobile-calendar-placeholder-bg: var(--glass-surface-soft);
@@ -576,6 +593,14 @@ html[data-theme='glass'] {
} }
@media (width <= 960px) { @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 { .settings-content-window {
padding-inline: 24px; padding-inline: 24px;

View File

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

View File

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