feat(web): 作品详情头图改为剧照铺顶渐隐到页面底色(方案 A)
- MediaHero 去掉深色圆角卡片:剧照铺在内容区顶部,上下与右缘渐隐成透明;左侧文字区压近乎不透明的页面底色、右侧露出剧照,窄屏改为自上而下压底色;文字用常规前景色,日夜同一结构;没有背景图时不渲染剧照层 - 新增材质参数 --mat-hero-*(浅 / 深两套)与 .media-hero-backdrop - 「正常」/ Emby / 库存等徽标并进「连载中」所在的事实行 - 操作按钮(订阅 / 搜索资源 / 查看订阅 / 合并作品 / 插槽入口如补字幕 / 命名覆盖)移进头图区外链行下方,库作品页与 TMDB 详情页一致 - 订阅改为主色实心(Button variant="solid",.pill-solid / --mat-pill-solid-*),作为头图区唯一主操作;设计文档记为例外 - 简介折叠:去掉省略号 + 单独一行「展开」的重复,改为最后一行行尾渐隐、「展开」压在渐隐处;按实际排版测量是否需要折叠 - 补 MediaHero / ClampText 渲染测试 Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
6549ab92c3
commit
caf5a1f2f4
8 files changed
+370
-118
No files matched your search
+79
-1
@@ -352,6 +352,16 @@
|
||||
--mat-pill-secondary-bg: rgba(20, 22, 28, 0.03);
|
||||
--mat-pill-secondary-bg-hover: rgba(20, 22, 28, 0.07);
|
||||
--mat-pill-secondary-border: rgba(20, 22, 28, 0.12);
|
||||
/* pill-solid:详情页头图区的唯一主操作(订阅),主色实心;只用在 MediaHero 的操作行 */
|
||||
--mat-pill-solid-bg: var(--primary);
|
||||
--mat-pill-solid-bg-hover: color-mix(in oklab, var(--primary) 84%, var(--background));
|
||||
--mat-pill-solid-fg: var(--primary-foreground);
|
||||
--mat-pill-solid-shadow: 0 1px 2px rgba(20, 22, 28, 0.14), 0 6px 16px -8px rgba(20, 22, 28, 0.4);
|
||||
/* media-hero:详情页头图。剧照铺在内容区顶部、渐隐到页面底色;左侧文字区压近乎不透明的底色,右侧露出剧照。
|
||||
窄屏海报与文字上下排,改为自上而下压底色 */
|
||||
--mat-hero-image-opacity: 1;
|
||||
--mat-hero-scrim-side: linear-gradient(90deg, var(--background) 0%, color-mix(in oklab, var(--background) 96%, transparent) 38%, color-mix(in oklab, var(--background) 82%, transparent) 55%, color-mix(in oklab, var(--background) 40%, transparent) 72%, transparent 92%);
|
||||
--mat-hero-scrim-stack: linear-gradient(180deg, color-mix(in oklab, var(--background) 30%, transparent) 0%, color-mix(in oklab, var(--background) 72%, transparent) 45%, color-mix(in oklab, var(--background) 92%, transparent) 75%, var(--background) 100%);
|
||||
/* 分段控件的滑块(侧栏当前项、SegmentedTabs):日间是托起的白片,夜间是薄白玻璃 */
|
||||
--mat-seg-thumb-bg: rgba(255, 255, 255, 0.8);
|
||||
--mat-seg-thumb-border: rgba(20, 22, 28, 0.06);
|
||||
@@ -493,6 +503,13 @@
|
||||
--mat-pill-secondary-bg: rgba(255, 255, 255, 0.04);
|
||||
--mat-pill-secondary-bg-hover: rgba(255, 255, 255, 0.1);
|
||||
--mat-pill-secondary-border: rgba(255, 255, 255, 0.15);
|
||||
--mat-pill-solid-bg: var(--primary);
|
||||
--mat-pill-solid-bg-hover: color-mix(in oklab, var(--primary) 84%, var(--background));
|
||||
--mat-pill-solid-fg: var(--primary-foreground);
|
||||
--mat-pill-solid-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
|
||||
--mat-hero-image-opacity: 0.85;
|
||||
--mat-hero-scrim-side: linear-gradient(90deg, var(--background) 0%, color-mix(in oklab, var(--background) 94%, transparent) 38%, color-mix(in oklab, var(--background) 78%, transparent) 55%, color-mix(in oklab, var(--background) 36%, transparent) 72%, transparent 92%);
|
||||
--mat-hero-scrim-stack: linear-gradient(180deg, color-mix(in oklab, var(--background) 30%, transparent) 0%, color-mix(in oklab, var(--background) 72%, transparent) 45%, color-mix(in oklab, var(--background) 92%, transparent) 75%, var(--background) 100%);
|
||||
--mat-seg-thumb-bg: rgba(255, 255, 255, 0.08);
|
||||
--mat-seg-thumb-border: rgba(255, 255, 255, 0.15);
|
||||
--mat-seg-thumb-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 18px -6px rgba(0, 0, 0, 0.4);
|
||||
@@ -1313,9 +1330,70 @@
|
||||
color: var(--content-strong);
|
||||
}
|
||||
|
||||
/* 实心主操作:只给详情页头图区的唯一主操作(订阅)用(2026-10-07 用户定的例外),
|
||||
其余页面主操作仍是 pill-primary;hover 只微调明度,不换色 */
|
||||
.pill-solid {
|
||||
background: var(--mat-pill-solid-bg);
|
||||
border: 1px solid transparent;
|
||||
color: var(--mat-pill-solid-fg);
|
||||
box-shadow: var(--mat-pill-solid-shadow);
|
||||
transition:
|
||||
background-color var(--duration-base) var(--ease-standard),
|
||||
transform 220ms var(--ease-spring);
|
||||
}
|
||||
|
||||
.pill-solid:hover {
|
||||
background: var(--mat-pill-solid-bg-hover);
|
||||
}
|
||||
|
||||
/* 详情页头图(MediaHero):剧照层上下、右缘渐隐成透明,露出页面底色与光斑,不留硬边;
|
||||
::after 是压在剧照上的底色渐变(左侧文字区近乎不透明),参数见 --mat-hero-* */
|
||||
.media-hero-backdrop {
|
||||
-webkit-mask-image:
|
||||
linear-gradient(to bottom, transparent 0%, #000 14%, #000 55%, transparent 100%),
|
||||
linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
|
||||
-webkit-mask-composite: source-in;
|
||||
mask-image:
|
||||
linear-gradient(to bottom, transparent 0%, #000 14%, #000 55%, transparent 100%),
|
||||
linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
|
||||
.media-hero-backdrop > img {
|
||||
opacity: var(--mat-hero-image-opacity);
|
||||
}
|
||||
|
||||
.media-hero-backdrop::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--mat-hero-scrim-stack);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.media-hero-backdrop::after {
|
||||
background: var(--mat-hero-scrim-side);
|
||||
}
|
||||
}
|
||||
|
||||
/* 折叠的长文本(ClampText):最后一行行尾渐隐,「展开」压在渐隐处;行数由 --clamp-lines 给 */
|
||||
.clamp-fade {
|
||||
max-height: calc(var(--clamp-lines, 3) * 1lh);
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(#000, #000), linear-gradient(to right, #000 62%, transparent 88%);
|
||||
-webkit-mask-size: 100% calc(100% - 1lh), 100% 1lh;
|
||||
-webkit-mask-position: top, bottom;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-image: linear-gradient(#000, #000), linear-gradient(to right, #000 62%, transparent 88%);
|
||||
mask-size: 100% calc(100% - 1lh), 100% 1lh;
|
||||
mask-position: top, bottom;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* 按下回弹,与 .btn-glass 同一手感 */
|
||||
.pill-primary:active,
|
||||
.pill-secondary:active {
|
||||
.pill-secondary:active,
|
||||
.pill-solid:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user