mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 23:56:42 +08:00
Fix glass theme shadows and slider overflow
This commit is contained in:
@@ -96,7 +96,8 @@
|
|||||||
|
|
||||||
// 👉 Nav Link
|
// 👉 Nav Link
|
||||||
.nav-link {
|
.nav-link {
|
||||||
overflow: hidden;
|
// 交互项已预留下边距承接激活阴影,父级不能再次裁切这段视觉溢出。
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
> :first-child {
|
> :first-child {
|
||||||
@extend %vertical-nav-item;
|
@extend %vertical-nav-item;
|
||||||
|
|||||||
@@ -835,6 +835,8 @@ onMounted(() => {
|
|||||||
--permission-editor-hover-bg: rgba(var(--v-theme-primary), 0.04);
|
--permission-editor-hover-bg: rgba(var(--v-theme-primary), 0.04);
|
||||||
--permission-editor-active-bg: rgba(var(--v-theme-primary), 0.1);
|
--permission-editor-active-bg: rgba(var(--v-theme-primary), 0.1);
|
||||||
--permission-editor-selected-bg: rgba(var(--v-theme-primary), 0.08);
|
--permission-editor-selected-bg: rgba(var(--v-theme-primary), 0.08);
|
||||||
|
--permission-editor-backdrop-filter: none;
|
||||||
|
--permission-editor-shadow: none;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -854,6 +856,14 @@ onMounted(() => {
|
|||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.permission-category-option,
|
||||||
|
.permission-feature-item,
|
||||||
|
.permission-feature-panel {
|
||||||
|
-webkit-backdrop-filter: var(--permission-editor-backdrop-filter);
|
||||||
|
backdrop-filter: var(--permission-editor-backdrop-filter);
|
||||||
|
box-shadow: var(--permission-editor-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
.permission-category-option,
|
.permission-category-option,
|
||||||
.permission-feature-item {
|
.permission-feature-item {
|
||||||
border: var(--permission-editor-muted-border);
|
border: var(--permission-editor-muted-border);
|
||||||
@@ -973,7 +983,7 @@ onMounted(() => {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: var(--permission-editor-border);
|
border: var(--permission-editor-border);
|
||||||
border-radius: var(--permission-editor-radius);
|
border-radius: var(--permission-editor-radius);
|
||||||
background: rgb(var(--v-theme-surface));
|
background: var(--permission-editor-panel-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.permission-feature-panel__header {
|
.permission-feature-panel__header {
|
||||||
|
|||||||
@@ -300,6 +300,7 @@ watch(
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
/* stylelint-disable selector-pseudo-class-no-unknown */
|
||||||
.slider-container {
|
.slider-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
@@ -307,6 +308,7 @@ watch(
|
|||||||
|
|
||||||
--slider-shadow-bleed-start: 28px;
|
--slider-shadow-bleed-start: 28px;
|
||||||
--slider-shadow-bleed-end: 56px;
|
--slider-shadow-bleed-end: 56px;
|
||||||
|
--slider-shadow-bleed-inline: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-header {
|
.slider-header {
|
||||||
@@ -337,7 +339,7 @@ watch(
|
|||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding-block: 5px;
|
padding-block: 5px;
|
||||||
padding-inline: 12px;
|
padding-inline: var(--slider-shadow-bleed-inline);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: all 0.25s ease;
|
transition: all 0.25s ease;
|
||||||
|
|
||||||
|
|||||||
@@ -307,12 +307,7 @@ onActivated(async () => {
|
|||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-group :deep(.slider-content-wrapper) {
|
// 横向滚动层依靠纵向缓冲展示上浮与阴影,不可在外层启用会裁切溢出的 paint containment。
|
||||||
content-visibility: auto;
|
|
||||||
contain-intrinsic-block-size: 16rem;
|
|
||||||
margin-block: calc(var(--slider-shadow-bleed-start) * -1) calc(var(--slider-shadow-bleed-end) * -1);
|
|
||||||
padding-block: var(--slider-shadow-bleed-start) var(--slider-shadow-bleed-end);
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-category {
|
.empty-category {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -309,6 +309,11 @@ html[data-theme='glass'] {
|
|||||||
inset 0 1px 0 rgba(255, 255, 255, 25%);
|
inset 0 1px 0 rgba(255, 255, 255, 25%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Outlined 描边自身会为浮动标签留出缺口,移除贯穿整个顶部的 field 阴影线。
|
||||||
|
.v-field.v-field--variant-outlined {
|
||||||
|
box-shadow: inset 0 -1px 0 rgba(2, 6, 16, 22%);
|
||||||
|
}
|
||||||
|
|
||||||
.v-field.v-field--variant-underlined,
|
.v-field.v-field--variant-underlined,
|
||||||
.v-field.v-field--variant-plain {
|
.v-field.v-field--variant-plain {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@@ -436,10 +441,32 @@ html[data-theme='glass'] {
|
|||||||
--mobile-calendar-surface-blur: blur(var(--glass-blur)) saturate(var(--glass-saturate));
|
--mobile-calendar-surface-blur: blur(var(--glass-blur)) saturate(var(--glass-saturate));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 用户权限编辑器由普通容器构成,通过主题变量接入玻璃表面材质。
|
||||||
|
.user-permission-editor {
|
||||||
|
--permission-editor-border: 1px solid var(--glass-border);
|
||||||
|
--permission-editor-muted-border: 1px solid rgba(255, 255, 255, 10%);
|
||||||
|
--permission-editor-panel-bg: var(--glass-surface-soft);
|
||||||
|
--permission-editor-hover-bg: rgba(255, 255, 255, 8%);
|
||||||
|
--permission-editor-active-bg: rgba(var(--v-theme-primary), 16%);
|
||||||
|
--permission-editor-selected-bg: rgba(var(--v-theme-primary), 12%);
|
||||||
|
--permission-editor-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
|
||||||
|
--permission-editor-shadow: inset 0 1px 0 rgba(255, 255, 255, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 智能助手折叠区使用均匀的玻璃描边,替换普通主题渐变产生的顶部黑边。
|
||||||
|
.ai-agent-settings-card {
|
||||||
|
border: 1px solid rgba(255, 255, 255, 10%) !important;
|
||||||
|
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
|
||||||
|
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
|
||||||
|
background: var(--glass-surface-soft) !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
// 横向榜单的滚动容器需要完整容纳玻璃卡片向上下扩散的阴影。
|
// 横向榜单的滚动容器需要完整容纳玻璃卡片向上下扩散的阴影。
|
||||||
.slider-container {
|
.slider-container {
|
||||||
--slider-shadow-bleed-start: 36px;
|
--slider-shadow-bleed-start: 48px;
|
||||||
--slider-shadow-bleed-end: 64px;
|
--slider-shadow-bleed-end: 96px;
|
||||||
|
--slider-shadow-bleed-inline: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:where(.v-card, .v-sheet)
|
:where(.v-card, .v-sheet)
|
||||||
|
|||||||
Reference in New Issue
Block a user