/* ========================================================= * css/homeskin.css — 「粉调凯蒂」主屏换肤 * --------------------------------------------------------- * 2026-10-05 用户要求：主屏壁纸换成粉调凯蒂图，图标风格一并更换。 * * 两类规则，互不耦合： * A. html.wp-light —— 仅由「壁纸是否浅色」驱动（与图标皮肤开关无关）。 * 负责浅壁纸上的文字 / 控件可读性：图标名、小组件、页码圆点、音乐键。 * 因为即使关掉糖果图标皮肤，浅色壁纸上的白字依旧会糊掉， * 所以可读性必须跟「壁纸」走，不能跟「图标皮肤」走。 * * B. html.skin-candy —— 仅由「糖果 3D 图标」开关驱动（PS.state.candyIcons）。 * 负责软糖立体质感 + 粉调 Dock / 资源库装饰，纯装饰，关掉即回到 iOS 风格。 * * 换肤机制：图标色不是内联写死的，而是 js/data/apps.js#appIcon() 把 * --ios1/--ios2/--iosink 与 --candy1/--candy2/--candyink 两组变量一起写进 * style，这里把它们映射到 .appicon 的 --a1/--a2/--aink。 * 所以加减 html 上的类名就够了，不需要重渲染任何页面。 * （第一版按皮肤算好再内联，结果从设置页返回主屏时因为主屏不重渲染， * 图标停在旧皮肤上 —— 这个坑别再踩。） * ======================================================= */ /* ============ A. 浅壁纸可读性（wp-light） ============ */ /* 图标名：浅粉底上必须换深字，白字会糊掉。 * 资源库页是深色半透明底，里面的图标名 / 列表名保持白字（下方覆盖）。 */ html.wp-light .hi-name { color: #6f4250; font-weight: 600; text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .6); } html.wp-light .lib-page .hi-name, html.wp-light .lib-page .lib-name { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } /* 小组件：奶白粉玻璃 + 深色字，浅壁纸上可读（糖果皮肤会再叠一层更厚的版本） */ html.wp-light .home-widget { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 238, 244, .42)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 6px 18px rgba(184, 112, 138, .18); color: #6f4a55; -webkit-backdrop-filter: blur(16px) saturate(135%); backdrop-filter: blur(16px) saturate(135%); } /* 音乐组件里那枚播放键：在浅底上白色圈几乎看不见，换成粉褐调 */ html.wp-light .wgm-play { background: linear-gradient(160deg, #C98BA0, #A85E7C); color: #fff; box-shadow: 0 2px 6px rgba(168, 94, 124, .35), inset 0 1px 0 rgba(255, 255, 255, .5); } /* 页码圆点：白点在浅粉上几乎看不见，换成粉褐 */ html.wp-light .home-dots .dot { background: rgba(124, 84, 96, .4); } html.wp-light .home-dots .dot.on { background: #C26A8A; } /* ============ B. 糖果 3D 图标皮肤（skin-candy） ============ */ /* ---------- 1. 图标：换配色 + 软糖立体质感 ---------- */ /* 糖果皮肤取 --candy* 一组，圆角比 iOS 的 22.5% 更圆，接近软糖 */ html.skin-candy .appicon { --a1: var(--candy1, #FFB9CB); --a2: var(--candy2, #F2789C); --aink: var(--candyink, #fff); border-radius: 27%; filter: saturate(1.04); /* 关键不是加阴影，而是「三层高光」： * 边缘描边高光 → 糖体的轮廓反光 * 顶部内高光 → 光源在正上方，撑起鼓面 * 底部内反光 → 底面受环境光再反射，制造厚度 * 再加一层底部内侧压深，糖体才有「底边收口」的体积感。 */ box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, .58), inset 0 2.5px 3px rgba(255, 255, 255, .85), inset 0 -6px 12px rgba(255, 255, 255, .34), inset 0 -2px 4px rgba(150, 70, 100, .10), 0 2px 4px rgba(180, 110, 135, .22), 0 10px 22px rgba(180, 110, 135, .17); } /* 顶部大高光：椭圆形镜面反光，「软糖／果冻」观感的主要来源 */ html.skin-candy .appicon::before { content: ''; position: absolute; left: 7%; right: 7%; top: 4%; height: 40%; border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%; background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); pointer-events: none; } /* 底部内反光：让下缘不至于死黑，糖体显得厚 */ html.skin-candy .appicon::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 5%; height: 20%; border-radius: 44% 44% 50% 50% / 55% 55% 45% 45%; background: linear-gradient(0deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0)); pointer-events: none; } /* 字形必须抬到高光之上：定位元素的 ::before 会盖住非定位的子元素 */ html.skin-candy .appicon-glyph { position: relative; z-index: 1; } html.skin-candy .appicon-glyph svg { stroke-width: 1.9; filter: drop-shadow(0 1px 1px rgba(168, 84, 112, .3)); } /* 角标：原来的正红点在粉色主屏上太跳，换成玫瑰粉 */ html.skin-candy .appicon-badge { z-index: 2; background: linear-gradient(160deg, #FF8CAE, #EC5C86); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); } /* ---------- 2. Dock：做成奶白粉的半透明软垫 ---------- */ /* 参考图里 Dock 面板更亮、更均匀（实测内部 (243,219,218)→(219,187,186)）， * 所以面板底色整体提亮一点；留白由 --dock-h 的 +36 提供（上下各 18px）。 */ html.skin-candy .home-dock { background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 243, 247, .44)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -8px 18px rgba(255, 255, 255, .3), 0 8px 22px rgba(184, 112, 138, .2); -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); } /* ---------- 3. 小组件：糖果增强版（比 wp-light 多一层顶部内高光） ---------- */ html.skin-candy .home-widget { background: linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 236, 243, .46)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 8px 22px rgba(184, 112, 138, .22); color: #6f4a55; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); } /* 糖果皮肤的播放键更亮一点，和奶白粉小组件更搭 */ html.skin-candy .wgm-play { background: linear-gradient(160deg, #FFB0C6, #EF7E9D); color: #fff; box-shadow: 0 2px 6px rgba(190, 110, 138, .3), inset 0 1px 0 rgba(255, 255, 255, .6); } /* ---------- 4. 编辑态「移除」按钮：换粉调，别用刺眼的纯红 ---------- */ html.skin-candy .hi-minus { background: linear-gradient(160deg, #FF9DB6, #EE6A8E); box-shadow: 0 2px 6px rgba(180, 100, 130, .35), inset 0 1px 0 rgba(255, 255, 255, .5); } /* ---------- 5. 资源库页：外框也带一点粉，和主屏同色系 ---------- */ html.skin-candy .lib-page { background: linear-gradient(180deg, rgba(72, 45, 56, .52), rgba(48, 30, 38, .62)); -webkit-backdrop-filter: blur(24px) saturate(120%); backdrop-filter: blur(24px) saturate(120%); } html.skin-candy .lib-search { background: rgba(255, 255, 255, .26); } /* ========================================================= * C. 壁纸自适应主题（html.skin-auto，由 js/system/wallpaperTheme.js 驱动） * --------------------------------------------------------- * 更换壁纸 → Canvas 分析主色调/风格 → 生成 --wt* 变量 → 整套桌面联动： * 图标配色与形状、Dock、小组件、光影、状态栏明暗全部随壁纸走。 * 优先级最高：写在本文件末尾，覆盖 A/B 段的固定配色。 * ======================================================= */ /* ---- 1. 图标：主色渐变 + 形状/光影随壁纸风格 ---- */ html.skin-auto .appicon { --a1: var(--auto1, var(--wt1)); --a2: var(--auto2, var(--wt2)); --aink: var(--wtink); border-radius: var(--wtrad, 27%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 6px var(--wtglowSoft, rgba(0, 0, 0, .18)), 0 10px 24px var(--wtglowSoft, rgba(0, 0, 0, .14)); filter: saturate(1.05); } html.skin-auto .appicon::before { opacity: .55; /* 保留软糖高光但减淡，让壁纸主色唱主角 */ } /* ---- 2. Dock：壁纸主色染色软垫 ---- */ html.skin-auto .home-dock { background: var(--wtdock); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 22px var(--wtglowSoft, rgba(0, 0, 0, .18)); -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); } /* ---- 3. 小组件：随主题明暗 ---- */ html.skin-auto .home-widget { background: var(--wtwidget); color: var(--wtfont); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px var(--wtglowSoft, rgba(0, 0, 0, .16)); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); } html.skin-auto .home-widget .wgw-temp, html.skin-auto .home-widget .wg-clock-t { color: inherit; } html.skin-auto .wgw-desc, html.skin-auto .wgn-body, html.skin-auto .wgm-a { color: inherit; opacity: .72; } /* ---- 4. App 资源库 / 页点 / 搜索框：随主题明暗 ---- */ html.skin-auto .lib-page { background: var(--wtwidget); } html.skin-auto .lib-input { background: rgba(128, 128, 128, .3); color: var(--wtfont); } html.skin-auto .lib-input::placeholder { color: rgba(200, 200, 200, .8); } html.skin-auto .home-dots .dot { background: var(--wtaccent); opacity: .35; } html.skin-auto .home-dots .dot.on { background: var(--wtaccent); opacity: 1; } /* ---- 5. 深色壁纸时图标名/小组件文字回白（覆盖 wp-light 的深字） ---- */ html.skin-auto:not(.wp-light) .hi-name, html.skin-auto:not(.wp-light) .home-widget, html.skin-auto:not(.wp-light) .wg-clock-d, html.skin-auto:not(.wp-light) .wgw-city { color: var(--wtfont); } html.skin-auto:not(.wp-light) .home-dots .dot { background: rgba(255, 255, 255, .4); } html.skin-auto:not(.wp-light) .home-dots .dot.on { background: #fff; } /* ---- 6. 关闭自动主题：显式复位（无 skin-auto 类时变量不生效，无需清理） ---- */