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

feat(theme): 添加主题定制器的圆角和阴影示例，优化透明主题下的视觉效果

Browse Source
This commit is contained in:
jxxghp
2026-06-30 17:43:07 +08:00
parent cff4c1fecc
commit da630b0966
3 changed files with 122 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/styles/common.scss
View File

@@ -1527,3 +1527,75 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent
.v-menu .v-overlay__content {
box-shadow: none;
}
// 主界面下拉入口提示：放在公共样式中，避免 scoped 样式无法响应根节点主题属性。
.app-pull-indicator {
position: fixed;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border: 1px solid rgba(var(--v-theme-on-surface), var(--app-pull-indicator-border-opacity));
border-radius: 50%;
backdrop-filter: blur(var(--app-pull-indicator-blur)) saturate(1.2);
background: rgba(var(--v-theme-surface), var(--app-pull-indicator-surface-opacity));
box-shadow: var(--app-pull-indicator-shadow);
inset-block-start: calc(
env(safe-area-inset-top, 0px) + 4rem + var(--app-pull-indicator-navbar-extra-height, 0rem) + 0.75rem
);
inset-inline-start: 50%;
pointer-events: none;
transform: translate3d(-50%, 0, 0);
transition:
opacity 0.2s ease,
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
--app-pull-indicator-blur: 20px;
--app-pull-indicator-border-opacity: 0.12;
--app-pull-indicator-icon-surface-opacity: 0.1;
--app-pull-indicator-shadow: 0 8px 24px rgba(0, 0, 0, 12%), 0 2px 8px rgba(0, 0, 0, 8%);
--app-pull-indicator-surface-opacity: 0.86;
}
.app-pull-indicator__icon {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(var(--v-theme-primary), var(--app-pull-indicator-icon-surface-opacity));
block-size: 40px;
inline-size: 40px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}
html[data-theme='light'] .app-pull-indicator {
--app-pull-indicator-border-opacity: 0.1;
--app-pull-indicator-icon-surface-opacity: 0.1;
--app-pull-indicator-shadow: 0 8px 24px rgba(58, 53, 65, 10%), 0 2px 8px rgba(58, 53, 65, 6%);
--app-pull-indicator-surface-opacity: 0.92;
}
html[data-theme='dark'] .app-pull-indicator,
html[data-theme='purple'] .app-pull-indicator {
--app-pull-indicator-border-opacity: 0.14;
--app-pull-indicator-icon-surface-opacity: 0.16;
--app-pull-indicator-shadow: 0 10px 30px rgba(0, 0, 0, 32%), 0 3px 12px rgba(0, 0, 0, 22%);
--app-pull-indicator-surface-opacity: 0.78;
}
html[data-theme='transparent'] .app-pull-indicator {
backdrop-filter: blur(var(--transparent-blur-heavy, var(--app-pull-indicator-blur))) saturate(1.25);
--app-pull-indicator-border-opacity: 0.14;
--app-pull-indicator-icon-surface-opacity: 0.18;
--app-pull-indicator-shadow: 0 10px 32px rgba(0, 0, 0, 30%), 0 4px 16px rgba(0, 0, 0, 20%);
--app-pull-indicator-surface-opacity: var(--transparent-opacity-heavy, 0.5);
}
html[data-theme='transparent'].transparent-blur-disabled .app-pull-indicator {
backdrop-filter: none;
}