fix(web): 控制台界面细节与 uhd_web 控件规范对齐
- 顶栏搜索移进右侧玻璃胶囊;输入框改淡玻璃(边线 0.46 → 0.16,悬停加深,聚焦 / 出错保留光晕) - 新增 SegmentedControl(滑动 seg-thumb),替换站点、下载、订阅、文件、智能体列表及对话框里的实心选中块;Tabs 改为同一枚滑块 - 开关型按钮统一 outline + aria-pressed 选中外观;页头 / 工具栏次操作描边、图标钮描边圆;文件排序改 Select;下载总速度加标签 - 分页一页放得下时只留总数、空列表不渲染、按容器宽度收起按钮 - 运行状态存储区重排;智能体列表页与会话页共用外壳路由,标题与左栏不再重挂载 - 站点卡片「⋯」不再单独换行;设置导航、状态计数、多选条件改玻璃选中态 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
8ff1817845
commit
c9b4ceb301
32 files changed
+753
-639
No files matched your search
+30
-12
@@ -392,14 +392,16 @@
|
||||
--mat-lens-shadow: 0 6px 16px -10px rgba(20, 22, 28, 0.28);
|
||||
--mat-lens-blur: blur(2px) saturate(160%);
|
||||
/* field:输入框 / 下拉选择的触发器,与按钮同一套边光;底比按钮实一点,保证字和占位符好读 */
|
||||
/* 输入框是填充型:靠比卡片略深的底色区分,边线按 WCAG 非文本对比 3:1 给(压在白卡片上) */
|
||||
--mat-field-bg: rgba(20, 22, 28, 0.045);
|
||||
--mat-field-edge: rgba(20, 22, 28, 0.46);
|
||||
--mat-field-edge-focus: rgba(20, 22, 28, 0.78);
|
||||
/* 输入框是淡玻璃:半透明白底 + 细边 + 上沿内高光(2026-10-08 调轻:0.46 的边在控制台的筛选条、搜索框里读成一圈黑框);
|
||||
聚焦 / 展开时边线加深并带光晕,出错时红线,这两种状态仍要一眼看得出 */
|
||||
--mat-field-bg: rgba(255, 255, 255, 0.5);
|
||||
--mat-field-edge: rgba(20, 22, 28, 0.16);
|
||||
--mat-field-edge-focus: rgba(20, 22, 28, 0.5);
|
||||
--mat-field-edge-hover: rgba(20, 22, 28, 0.28);
|
||||
/* 登录页的表单卡片:实在的底,先把卡片和页面分开 */
|
||||
--mat-auth-card-bg: rgba(255, 255, 255, 0.84);
|
||||
--mat-field-ring: rgba(20, 22, 28, 0.06);
|
||||
--mat-field-highlight: rgba(255, 255, 255, 0.08);
|
||||
--mat-field-ring: rgba(20, 22, 28, 0.08);
|
||||
--mat-field-highlight: rgba(255, 255, 255, 0.7);
|
||||
/* 小玻璃圆片的烟色玻璃:白色图标坐在上面。日间烟墨、夜间淡白;压在图片上的恒用 media 档 */
|
||||
--mat-chip-glass: rgba(20, 22, 28, 0.56);
|
||||
/* media-hero:详情页头图。剧照铺在内容区顶部、渐隐到页面底色;左侧文字区压近乎不透明的底色,右侧露出剧照。
|
||||
@@ -539,12 +541,14 @@
|
||||
--mat-lens-edge: 0 0 0 1px rgba(0, 0, 0, 0.35);
|
||||
--mat-lens-sheen: inset 1px 1px 0 -0.5px rgba(255, 255, 255, 0.28);
|
||||
--mat-lens-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.55);
|
||||
/* 夜间:底比卡片略亮,外线是浅色且对比 3:1(黑线压在深色卡片上看不见) */
|
||||
--mat-field-bg: rgba(255, 255, 255, 0.075);
|
||||
--mat-field-edge: rgba(255, 255, 255, 0.36);
|
||||
--mat-field-edge-focus: rgba(255, 255, 255, 0.78);
|
||||
/* 夜间:底比卡片略亮,外线是浅色细线(黑线压在深色卡片上看不见) */
|
||||
--mat-field-bg: rgba(255, 255, 255, 0.05);
|
||||
--mat-field-edge: rgba(255, 255, 255, 0.16);
|
||||
--mat-field-edge-focus: rgba(255, 255, 255, 0.5);
|
||||
--mat-field-edge-hover: rgba(255, 255, 255, 0.28);
|
||||
--mat-auth-card-bg: rgba(26, 27, 32, 0.74);
|
||||
--mat-field-ring: rgba(255, 255, 255, 0.06);
|
||||
--mat-field-ring: rgba(255, 255, 255, 0.07);
|
||||
--mat-field-highlight: rgba(255, 255, 255, 0.04);
|
||||
--mat-chip-glass: rgba(255, 255, 255, 0.12);
|
||||
--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%);
|
||||
@@ -1115,6 +1119,14 @@
|
||||
background: var(--mat-lens-fill-hover);
|
||||
}
|
||||
|
||||
/* 开关型的次按钮(批量、按作品分组、显示隐藏文件)按下后与 pill-selected 同一外观:多一层填充、描边稍深 */
|
||||
.pill-secondary[aria-pressed="true"],
|
||||
.pill-secondary[aria-current="page"] {
|
||||
background: var(--mat-pill-selected-bg);
|
||||
box-shadow: var(--mat-lens-rim), 0 0 0 1px var(--mat-pill-selected-border);
|
||||
color: var(--content-strong);
|
||||
}
|
||||
|
||||
/* 主操作(方案 A,2026-09-26):和其他按钮一样是半透明胶囊,不做实心;靠沿边框缓慢流转的
|
||||
一整圈棱镜光谱突出,内侧再透一层很淡的同色光。门户 .pill-primary 与流媒体
|
||||
.btn-glass-primary 共用;减少动态效果时停转,只留彩色边框 */
|
||||
@@ -1434,9 +1446,14 @@
|
||||
box-shadow: inset 0 1px 0 var(--mat-field-highlight);
|
||||
transition:
|
||||
box-shadow var(--duration-base) var(--ease-standard),
|
||||
border-color var(--duration-base) var(--ease-standard),
|
||||
background-color var(--duration-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
.field-glass:hover:not(:focus-within, [data-state="open"], [aria-invalid="true"], :disabled) {
|
||||
border-color: var(--mat-field-edge-hover);
|
||||
}
|
||||
|
||||
.field-glass:focus-visible,
|
||||
.field-glass:focus-within,
|
||||
.field-glass[data-state="open"] {
|
||||
@@ -1446,7 +1463,8 @@
|
||||
}
|
||||
|
||||
.field-glass[aria-invalid="true"] {
|
||||
border-color: color-mix(in oklch, var(--destructive) 65%, transparent);
|
||||
border-color: color-mix(in oklch, var(--destructive) 70%, transparent);
|
||||
box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 12%, transparent);
|
||||
}
|
||||
|
||||
/* 登录类页面的表单卡片:内容卡的配方,但底换成实在的磨砂(夜间内容卡几乎透明,卡片、输入框、页面三层挤在一起分不开) */
|
||||
|
||||
Reference in new issue
Block a user