mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-06 16:16:42 +08:00
fix(glass): 捷径卡片补齐玻璃描边与高光
弹层内嵌套卡片被通用折叠规则抹平 border 与 box-shadow,只补回背景会显得与其它玻璃卡片不一致,这里补齐完整表面并加上 hover 态。同时带上搜索弹窗的空状态间距与样式顺序整理。
This commit is contained in:
@@ -209,7 +209,7 @@ function loadRecentSearches() {
|
|||||||
|
|
||||||
/** 获取可参与全局搜索的导航菜单和设置入口。 */
|
/** 获取可参与全局搜索的导航菜单和设置入口。 */
|
||||||
function getMenus(): NavMenu[] {
|
function getMenus(): NavMenu[] {
|
||||||
let menus: NavMenu[] = []
|
const menus: NavMenu[] = []
|
||||||
// 导航菜单
|
// 导航菜单
|
||||||
getNavMenus(t).forEach(
|
getNavMenus(t).forEach(
|
||||||
item =>
|
item =>
|
||||||
@@ -829,7 +829,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 空状态提示 -->
|
<!-- 空状态提示 -->
|
||||||
<div v-else class="empty-hint">
|
<div v-else class="empty-hint pt-3">
|
||||||
<span class="text-body-1 text-medium-emphasis">{{ t('dialog.searchBar.emptySearchHint') }}</span>
|
<span class="text-body-1 text-medium-emphasis">{{ t('dialog.searchBar.emptySearchHint') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -967,8 +967,8 @@ html[data-theme='transparent'] .search-desktop-activator .search-input-wrapper,
|
|||||||
.search-content {
|
.search-content {
|
||||||
max-block-size: 600px;
|
max-block-size: 600px;
|
||||||
min-block-size: 150px;
|
min-block-size: 150px;
|
||||||
overscroll-behavior-y: contain;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
overscroll-behavior-y: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-dialog--dropdown .search-content {
|
.search-dialog--dropdown .search-content {
|
||||||
@@ -981,12 +981,12 @@ html[data-theme='transparent'] .search-desktop-activator .search-input-wrapper,
|
|||||||
|
|
||||||
.search-item-source-row {
|
.search-item-source-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
block-size: 0;
|
block-size: 0;
|
||||||
inline-size: 100%;
|
inline-size: 100%;
|
||||||
margin-block-start: 0;
|
margin-block-start: 0;
|
||||||
min-inline-size: 0;
|
min-inline-size: 0;
|
||||||
overflow: hidden;
|
|
||||||
transition:
|
transition:
|
||||||
block-size 0.15s ease,
|
block-size 0.15s ease,
|
||||||
margin-block-start 0.15s ease;
|
margin-block-start 0.15s ease;
|
||||||
@@ -999,6 +999,7 @@ html[data-theme='transparent'] .search-desktop-activator .search-input-wrapper,
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-item-source-toggle {
|
.search-item-source-toggle {
|
||||||
|
overflow: auto hidden;
|
||||||
border: var(--app-grouped-list-border);
|
border: var(--app-grouped-list-border);
|
||||||
border-radius: var(--app-control-radius);
|
border-radius: var(--app-control-radius);
|
||||||
backdrop-filter: var(--app-grouped-list-backdrop-filter);
|
backdrop-filter: var(--app-grouped-list-backdrop-filter);
|
||||||
@@ -1006,8 +1007,6 @@ html[data-theme='transparent'] .search-desktop-activator .search-input-wrapper,
|
|||||||
block-size: 28px;
|
block-size: 28px;
|
||||||
max-inline-size: 100%;
|
max-inline-size: 100%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transform: scale(0.98);
|
transform: scale(0.98);
|
||||||
transform-origin: center left;
|
transform-origin: center left;
|
||||||
|
|||||||
@@ -835,12 +835,21 @@ html[data-theme='glass'] {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 捷径菜单的嵌套卡片会被通用弹层模糊覆盖,需要显式跟随玻璃材质。
|
// 捷径菜单的嵌套卡片会被通用弹层折叠规则抹平描边与高光,需要完整补齐标准玻璃表面。
|
||||||
.shortcut-card-hover-area > .v-card {
|
.shortcut-card-hover-area > .v-card {
|
||||||
|
border-color: var(--glass-border) !important;
|
||||||
-webkit-backdrop-filter: var(--glass-surface-backdrop-filter) !important;
|
-webkit-backdrop-filter: var(--glass-surface-backdrop-filter) !important;
|
||||||
backdrop-filter: var(--glass-surface-backdrop-filter) !important;
|
backdrop-filter: var(--glass-surface-backdrop-filter) !important;
|
||||||
background-color: var(--glass-surface) !important;
|
background-color: var(--glass-surface) !important;
|
||||||
background-image: var(--glass-sheen) !important;
|
background-image: var(--glass-sheen) !important;
|
||||||
|
box-shadow: var(--glass-shadow) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
.shortcut-card-hover-area:hover > .v-card {
|
||||||
|
border-color: var(--glass-border-hover) !important;
|
||||||
|
box-shadow: var(--glass-shadow-hover) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// “更多”应用列表的分组卡片存在局部固定模糊,需要在完整小屏区间跟随玻璃材质。
|
// “更多”应用列表的分组卡片存在局部固定模糊,需要在完整小屏区间跟随玻璃材质。
|
||||||
|
|||||||
Reference in New Issue
Block a user