/* Sun-Panel纯色极简小图标主题 作者：xsui 一款纯色极简小图标主题，带日夜模式 写法上以原生样式为主补充修改调整而来，详情图标与小图标模式均兼容，请随意修改分享 ────────────────────────────────────────────────────────────────────────────── 【本轮改动 · DSH】在原文件基础上做了三件事，其余一字未动 ────────────────────────────────────────────────────────────────────────────── 1) 日夜色值去重：深色数值集中在 :root 的 --d-* / --wpd-* / 深色播放器变量里， 「系统偏好」和「.dark 类」两处只写别名映射。以后改深色颜色只改一处。 同时删掉了冗余的 @media (prefers-color-scheme: light) 块 —— 它的内容 和 :root 默认值完全相同，本来就是空操作。 2) 修好原本「写了但不生效」的深色规则。原先深色块里的 .wp-bokeh > i { opacity: .28 } 从未生效：运行中的 animation 在层叠里 压过普通作者声明，@keyframes 里的 opacity 才是 实际渲染值，所以深色下光斑一直很亮。 曾把压暗系数乘进关键帧 calc(var(--o1) * var(--wp-bokeh-op))， 深色真正压暗（峰值 0.8×0.70=0.56，仍保留原有强弱起伏）。 同理 .wp-has-image 的深色覆盖原本要靠多写一条 .dark .wp-has-image 才压得住， 现在由变量分工，规则只剩一条。 3) 播放器（#spPlayer）补深色模式：原文件把白底 #fff、文字 #636363 等全部写死， 深色主题下是一块刺眼白卡。现在把所有硬编码色抽成 --spp-* 变量并给出深色值。 ============================================================ */ :root { /* ---------- 深色色值 · 唯一真源 ---------- */ /* 下面两处激活方式（系统偏好 / .dark 类）只写别名映射，不写数值。 要改深色配色，改这里就够了。 */ --d-white:#333; --d-wt:#151617; --d-gray:#444; --d-bg:#1a1a1a; --d-bg2:#0000008f; --d-bk3:#f0f0f0; --d-bk2:#999; --d-bk1:#888; --d-bk:#555; --d-bkz:#333; /* 【DSH 改动】深色图标配色，跟着深色壁纸的粉紫调走。 上一版衬底是中性灰 #3f4248 —— 亮度对了，但色相不对： 壁纸已经换成暗粉紫（--wpd-grad-bg / --wpd-scrim-bg），中性灰衬底 浮在紫底上会显脏。这里把灰换成同亮度的紫（色相与壁纸一致）， 所以图标看着像是「长在壁纸里」而不是贴在上面的一块贴片。 投影同时掺一点紫，纯黑投影在紫底上会发灰。 【DSH 改动】不透明 → rgba(...,.40)：原先 #3b3348 是实心的， 在暗底上显出一圈生硬的紫盘边，看着像贴纸而不是图标的一部分。 0.40 是实测的拐点：盘的边界基本消失、后面的壁纸渐变能透上来， 同时还留一点衬底把图标托住（0.25 以下就没了托底感，图标会和卡片糊在一起）。 */ --d-icon-plate: rgba(59, 51, 72, 0.40); --d-icon-shadow: 0px 3px 10px 0px rgba(24, 14, 34, 0.34), 0px 1px 2px 0px rgba(18, 10, 26, 0.26); --d-icon-badge-ring: rgba(186, 158, 214, 0.16); /* 壁纸层深色真源 */ /* 【DSH 改动】0.16 → 1.0。 原值 0.16 是在「深浅共用日间那套近白渐变」的前提下用来压暗的。 但现在深色有专属的 --wpd-grad-bg（本身就是暗粉紫）， 再乘 0.34 就等于把色彩压没 —— 实测屏幕上几乎是纯黑。 暗色渐变是「已经调暗过」的，所以这里必须满不透明才正确， 和日间的 op=1 对称。 */ --wpd-grad-op: 1; /* 深色光斑：原文件写的是「固定 opacity:.28」，但那条规则从未生效 —— 运行中的 animation 在层叠里压过普通作者声明，@keyframes 里的 opacity（--o1=0.4 → --o2=0.8）才是屏幕上的实际值。 这里把深色落成「峰值 0.56」的等比压暗：0.8 × 0.70 = 0.56， 保留原文件本来的强弱起伏，同时把亮白光斑在暗底上压下去。 想完全复刻原样（即维持 0.4→0.8 不压暗），把这个系数改成 1。 */ --wpd-bokeh-op: 0.70; --wpd-heart-dim: 0.90; /* 【DSH 改动】深色专属底色渐变。 原来深浅共用 --wp-grad-bg（日间那套接近白的粉），靠 opacity 0.16 压暗 —— 结果是「一层很淡的灰粉」，看不出任何色团，冷暖层次全丢了。 这里给深色单独一套：保持同样的 6 色团 + 冷暖对比结构， 但整体换成暗粉紫（#2a1f2e / #1e1b2e / #26202f 区间）， 亮部也只到 #6d4a72 / #5a4a80 / #6b5a48，不至于在暗底上刺眼。 色相和日间一致，所以切深浅时观感是「同一张画调暗了」，而不是换了个主题。 */ --wpd-grad-bg: radial-gradient(46% 40% at 18% 22%, #6d4a72 0%, rgba(109, 74, 114, 0) 66%), radial-gradient(42% 36% at 80% 15%, #5f3f66 0%, rgba(95, 63, 102, 0) 64%), radial-gradient(54% 46% at 66% 80%, #553a5c 0%, rgba(85, 58, 92, 0) 66%), radial-gradient(38% 34% at 12% 84%, #63496a 0%, rgba(99, 73, 106, 0) 62%), radial-gradient(44% 38% at 92% 52%, #4a3a6b 0%, rgba(74, 58, 107, 0) 58%), radial-gradient(40% 34% at 40% 62%, #6b5a48 0%, rgba(107, 90, 72, 0) 60%), linear-gradient(152deg, #2a1f2e 0%, #1e1b2e 48%, #26202f 100%); /* 【DSH 改动】深色「有壁纸图」时的纱。 原为三层近乎全灰的 rgba(12,14,18,.86)/.90/.88 —— 这才是深色效果不好的 主因：你的面板设了壁纸图，.wp-has-image 生效后 scrim 完全不透明地 盖住背景，彩色渐变层一点都不参与，于是深色只剩一团死灰。 现在改成「暗紫彩色纱 + 保留色团」两层结构： 上层 6 个色团用半透明叠出层次（不再是纯灰）， 底层仍是高 alpha 的暗紫，只为压住壁纸的亮度。 alpha 0.88~0.92 保证亮色照片仍被压住，不会打穿深色主题。 */ --wpd-scrim-op: 1; --wpd-scrim-bg: radial-gradient(46% 40% at 18% 22%, rgba(122, 74, 128, 0.55) 0%, rgba(122, 74, 128, 0) 66%), radial-gradient(42% 36% at 80% 15%, rgba(107, 63, 117, 0.50) 0%, rgba(107, 63, 117, 0) 64%), radial-gradient(54% 46% at 66% 80%, rgba(94, 54, 104, 0.55) 0%, rgba(94, 54, 104, 0) 66%), radial-gradient(38% 34% at 12% 84%, rgba(111, 69, 118, 0.45) 0%, rgba(111, 69, 118, 0) 62%), radial-gradient(44% 38% at 92% 52%, rgba(74, 53, 128, 0.55) 0%, rgba(74, 53, 128, 0) 58%), radial-gradient(40% 34% at 40% 62%, rgba(107, 80, 56, 0.40) 0%, rgba(107, 80, 56, 0) 60%), linear-gradient(165deg, rgba(20, 14, 26, 0.90) 0%, rgba(24, 16, 32, 0.92) 50%, rgba(16, 12, 22, 0.90) 100%); --wpd-bokeh-bg: radial-gradient(circle at 50% 50%, rgba(255, 232, 244, 0.82) 0%, rgba(250, 200, 226, 0.30) 40%, rgba(220, 150, 190, 0) 72%); /* ---------- 日间（默认生效值）---------- */ --white:#fff; --wt:#fff; --gray:#ccc; --bg:#f5f5f5; --bg2:#0000001c; --bk3:#333; --bk2:#777; --bk1:#888; --bk:#555; --bkz:#333; /* 壁纸层生效值（日间）：--wp-scrim-bg 故意不设， .wp-has-image 用 var(--wp-scrim-bg, var(--wp-grad-bg)) 回退到底色渐变。 */ --wp-grad-op: 1; --wp-bokeh-op: 1; --wp-heart-dim: 1; --wp-scrim-op: var(--wp-scrim-img, 0.45); /* ========================================================== 外观旋钮 —— 三个迭代版本（xsui-variant-a/b/c.css）只覆盖这一段， 不碰下面任何一条规则。换风格 = 换一段变量，不动结构。 全部只影响 transform / 静态背景，不引入重排或每帧重绘。 ========================================================== */ /* 卡片悬停：抬升距离、缩放、缓动、时长 */ --card-lift: 4px; --card-zoom: 1.006; --card-ease: cubic-bezier(0.34, 1.32, 0.64, 1); --card-dur: 0.3s; /* 卡片右下角装饰角标的悬停放大 */ --badge-zoom: 1.35; /* 卡片渐变（浅色模式下 --wt 与 --white 同值，这里本就是平涂） */ --card-grad-angle: 158deg; --card-grad-a: var(--white); --card-grad-b: var(--wt); /* 卡片、图标、搜索框的两层阴影（近距实影 + 远距柔影） */ --card-shadow: 0px 5px 15px 0px var(--bg2), inset 0 0 0 2px var(--white); --icon-shadow: 0 1px 2px 0px var(--bg2), 0 3px 8px -2px var(--bg2); --search-shadow: 0 1px 2px 0px var(--bg2), 0 6px 16px -4px var(--bg2); /* 【DSH 改动】光斑移除后背景偏空，这里补三层静态手段，全部零每帧开销： 1) 下面 6 个色团里，前 4 个就是原先会飘动的光斑「定住」的版本 —— 形状和位置基本照搬，但它们现在只是静态渐变的一部分，不用每帧插值； 2) 加了冷（淡紫）与暖（奶油）两个色温，纯粉单调容易发闷； 3) 叠一层噪点（--wp-grain-bg），压掉大面积平涂的塑料感。 噪点 alpha 直接烘在 SVG 的 rect 上（0.055），因此不需要 mix-blend-mode —— 混合模式会多开一个渲染通道，比省下来的开销还贵。 */ --wp-grad-bg: radial-gradient(46% 40% at 18% 22%, #ffd9ea 0%, rgba(255, 217, 234, 0) 66%), radial-gradient(42% 36% at 80% 15%, #ffc9e0 0%, rgba(255, 201, 224, 0) 64%), radial-gradient(54% 46% at 66% 80%, #f7d2ee 0%, rgba(247, 210, 238, 0) 66%), radial-gradient(38% 34% at 12% 84%, #ffdfec 0%, rgba(255, 223, 236, 0) 62%), radial-gradient(44% 38% at 92% 52%, #efe4ff 0%, rgba(239, 228, 255, 0) 58%), radial-gradient(40% 34% at 40% 62%, #fff2e4 0%, rgba(255, 242, 228, 0) 60%), linear-gradient(152deg, #fff8fc 0%, #fbe7f3 48%, #fdf4fa 100%); /* 120px 无缝噪点平铺。整页只栅格化一次，之后靠 repeat 复用。 浓度取值参考实测：0.055 在屏幕上几乎看不见（等于是白加一层）， 0.35 又太脏。0.14 是「放大截图才看得出、正常看只是让底色不那么平」的点。 baseFrequency 从 0.9 提到 1.15、numOctaves 从 4 降到 2 —— 细一些的颗粒更像纸纹，粗颗粒会显得脏。 */ --wp-grain-op: 0.14; /* 【DSH 改动】图标配色。 原来图标直接借用 --white 做圆形衬底，而 --white 在深色下被映射成 #333 —— 比卡片底色还暗，于是「深灰衬底 + rgba(0,0,0,.56) 投影」变成一圈黑框， 图标看着发闷（实测截图确认）。文字用 --bk3（深色 #f0f0f0）很清晰， 于是标题亮、图标暗，两者明显不匹配。 这里给图标单独一组：衬底比卡片略亮，投影更黑更集中，图标本身不压暗。 */ --icon-plate: #ffffff; --icon-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.18), 0px 1px 2px 0px rgba(0, 0, 0, 0.14); --icon-badge-ring: rgba(255, 255, 255, 0.10); --wp-grain-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.14'/%3E%3C/svg%3E"); /* ---------- 播放器（日间）---------- 原版设计来自 myhkw.cn「明月浩空」播放器 skin=swhite，干净的白底 + 深灰字。 所有原先写死的色值都抽到了这里，深色模式靠覆盖这几个变量实现。 */ --spp-accent: #6cbdf0; --spp-accent-soft: rgba(108, 189, 240, 0.16); --spp-accent-strong: #2f97d1; --spp-title: #2f2f2f; --spp-text: #636363; --spp-text-dim: #9a9a9a; --spp-track: rgba(0, 0, 0, 0.10); --spp-line: rgba(0, 0, 0, 0.07); --spp-bg: #ffffff; --spp-panel: #ffffff; /* 浮层：播放列表 / 音量条 / toast */ --spp-subtle: #fafafa; /* 列表表头 */ --spp-knob: #ffffff; /* 旋钮圆点、播放键与把手上的字色 */ --spp-btn: #9b9b9b; --spp-hover: rgba(0, 0, 0, 0.055); --spp-hover-weak: rgba(0, 0, 0, 0.045); --spp-thumb: rgba(0, 0, 0, 0.14); --spp-disabled-bg: #e4e4e7; --spp-disabled-fg: #b4b4b8; --spp-shadow: 0 10px 30px rgba(78, 112, 140, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05); --spp-shadow-pop: 0 8px 22px rgba(70, 104, 132, 0.20); --spp-shadow-list: 0 12px 32px rgba(70, 104, 132, 0.20); } /* 跟随系统深色：:not(.light) 让面板若自带 .light 手动开关时能反压。 源文件原有的 @media (prefers-color-scheme: light) 块已删除： 它与上面的 :root 默认值逐项相同，属于空操作，留着只会让人误以为要改两处。 */ @media (prefers-color-scheme: dark) { :root:not(.light) { --white: var(--d-white); --wt: var(--d-wt); --gray: var(--d-gray); --bg: var(--d-bg); --bg2: var(--d-bg2); --bk3: var(--d-bk3); --bk2: var(--d-bk2); --bk1: var(--d-bk1); --bk: var(--d-bk); --bkz: var(--d-bkz); --wp-grad-op: var(--wpd-grad-op); --wp-grad-bg: var(--wpd-grad-bg); --wp-bokeh-op: var(--wpd-bokeh-op); --wp-heart-dim: var(--wpd-heart-dim); --wp-scrim-op: var(--wpd-scrim-op); --wp-scrim-bg: var(--wpd-scrim-bg); --wp-bokeh-bg: var(--wpd-bokeh-bg); /* 【DSH 改动】图标在深色下换用专属配色（见 --d-icon-* 的说明） */ --icon-plate: var(--d-icon-plate); --icon-shadow: var(--d-icon-shadow); --icon-badge-ring: var(--d-icon-badge-ring); --spp-accent: #4aa8e6; --spp-accent-soft: rgba(74, 168, 230, 0.18); --spp-accent-strong: #7fc7f5; --spp-title: #eceff2; --spp-text: #b4b9bf; --spp-text-dim: #7d838b; --spp-track: rgba(255, 255, 255, 0.12); --spp-line: rgba(255, 255, 255, 0.10); --spp-bg: #22252a; --spp-panel: #2a2e34; --spp-subtle: #24282d; --spp-knob: #e8eaed; --spp-btn: #8a9099; --spp-hover: rgba(255, 255, 255, 0.08); --spp-hover-weak: rgba(255, 255, 255, 0.06); --spp-thumb: rgba(255, 255, 255, 0.16); --spp-disabled-bg: #3a3e45; --spp-disabled-fg: #6b7078; --spp-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35); --spp-shadow-pop: 0 8px 22px rgba(0, 0, 0, 0.45); --spp-shadow-list: 0 12px 32px rgba(0, 0, 0, 0.50); } } /* 适配项目深色模式（面板自己的开关，优先级高于系统偏好） */ .dark { --white: var(--d-white); --wt: var(--d-wt); --gray: var(--d-gray); --bg: var(--d-bg); --bg2: var(--d-bg2); --bk3: var(--d-bk3); --bk2: var(--d-bk2); --bk1: var(--d-bk1); --bk: var(--d-bk); --bkz: var(--d-bkz); --wp-grad-op: var(--wpd-grad-op); --wp-grad-bg: var(--wpd-grad-bg); --wp-bokeh-op: var(--wpd-bokeh-op); --wp-heart-dim: var(--wpd-heart-dim); --wp-scrim-op: var(--wpd-scrim-op); --wp-scrim-bg: var(--wpd-scrim-bg); --wp-bokeh-bg: var(--wpd-bokeh-bg); /* 【DSH 改动】图标在深色下换用专属配色（见 --d-icon-* 的说明） */ --icon-plate: var(--d-icon-plate); --icon-shadow: var(--d-icon-shadow); --icon-badge-ring: var(--d-icon-badge-ring); --spp-accent: #4aa8e6; --spp-accent-soft: rgba(74, 168, 230, 0.18); --spp-accent-strong: #7fc7f5; --spp-title: #eceff2; --spp-text: #b4b9bf; --spp-text-dim: #7d838b; --spp-track: rgba(255, 255, 255, 0.12); --spp-line: rgba(255, 255, 255, 0.10); --spp-bg: #22252a; --spp-panel: #2a2e34; --spp-subtle: #24282d; --spp-knob: #e8eaed; --spp-btn: #8a9099; --spp-hover: rgba(255, 255, 255, 0.08); --spp-hover-weak: rgba(255, 255, 255, 0.06); --spp-thumb: rgba(255, 255, 255, 0.16); --spp-disabled-bg: #3a3e45; --spp-disabled-fg: #6b7078; --spp-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35); --spp-shadow-pop: 0 8px 22px rgba(0, 0, 0, 0.45); --spp-shadow-list: 0 12px 32px rgba(0, 0, 0, 0.50); } /* 【DSH 改动】原为： .sun-main .wallpaper{background: var(--bg) !important;} 问题：background 简写会把 inline 的壁纸图一并重置为 background-image:none， 而且整个简写带 !important，内联样式根本赢不了 —— 原生壁纸因此 100% 失效。 改成只管 background-color（底色），inline 的 background-image 就能正常生效： 有壁纸图 → 显示图；没设图 → 回退到这里指定的纯色底。 */ .sun-main .wallpaper{background-color: var(--bg) !important;} .w-full{min-width: 90px} .font-bold { font-weight: 500 !important} .backdrop-blur-\[2px\],.float-btn{ border-radius: 1.5rem !important; background: var(--white) !important;z-index: 3} .search-box .search-container{background: var(--white) !important; border-radius:25px !important; /* 分成「近距实影 + 远距柔影」两层，比原来的单层 15px 更通透。 模糊半径没变大，仍是一次性栅格化后复用，不增加重绘成本。 */ box-shadow: var(--search-shadow) !important;} .text-base {display: none} .float-btn svg{color: var(--bk); transition: color 0.2s ease, transform 0.2s ease;} .float-btn:hover svg{color: var(--bk3); transform: scale(1.08);} span.text-shadow,div.text-shadow{text-shadow:none !important;} .group-title.text-shadow,.system-monitor-header .text-shadow,.system-monitor-buttons,.group-buttons{text-shadow:none !important; font-size: 15px; font-weight: normal; background: var(--bg); padding: 0 8px 0 0} .system-monitor-buttons,.group-buttons{padding: 0 10px;} .flex.mt-\[20px\].sm\:w-full.lg\:w-\[80\%\]{max-width: 450px} .flex.mx-\[auto\].items-center.justify-center.text-white{ gap:10px} .divider.text-base{display: none} div.item-card-small-icon,.item-card-info { box-shadow: var(--card-shadow) !important; width: auto; height: 90px;} div.item-card-small-icon:before,.item-card-container .item-card-info:before{position: absolute; content: ""; inset:0; /* 【DSH 改动】同 --icon-plate：深色下这条 1px 内描边要靠它才看得见 （原来用 --white=#333，与卡片底 #333 完全同色，等于没有描边）。 */ border: 1px solid var(--icon-badge-ring) ; border-radius: 1rem; /* 深色模式下把渐变方向翻过来：原来 #151617(深) → #333(浅)， 卡片下缘最亮、贴着投影反而发飘。改成 #333(浅) → #151617(深)， 让光从左上来、下缘沉进投影里，卡片有了体积而不是一块浮板。 浅色模式下 --wt 与 --white 同为 #fff，两端一样，这里本就是平涂，不受影响。 渐变是静态背景：整页栅格化一次后复用，悬停时不重绘。 */ background: linear-gradient(var(--card-grad-angle), var(--card-grad-a) 0%, var(--card-grad-b) 100%) !important; } div.item-card-small-icon:after,.item-card-container .item-card-info:after{background: inherit; position: absolute; content: ""; width: 10px; height: 10px; inset:auto 10px 10px auto; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M10.525 3.158A1.483 1.483 0 0 1 12 1.75c.817 0 1.434.652 1.475 1.408.222 4.098 3.252 7.133 7.344 7.355.766.042 1.431.668 1.431 1.499 0 .834-.67 1.46-1.439 1.499-4.085.202-7.114 3.233-7.336 7.33A1.483 1.483 0 0 1 12 22.25a1.483 1.483 0 0 1-1.475-1.408c-.222-4.099-3.251-7.13-7.337-7.331-.77-.038-1.438-.664-1.438-1.498s.669-1.46 1.437-1.498c4.083-.203 7.116-3.253 7.338-7.357z'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; z-index: 1; /* 悬停时角标轻轻放大，配合卡片抬升让整张卡「活」起来。 只动 transform，走合成器；mask 图本身不重绘。 */ transform-origin: 100% 100%; transition: transform var(--card-dur) var(--card-ease);} div.item-card-small-icon:hover::after, .item-card-container:hover .item-card-info::after{transform: scale(var(--badge-zoom));} #item-group-myapp div.item-card-small-icon:after,#item-group-myapp .item-card-container .item-card-info:after{ mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 8C8.925 8 4 12.925 4 19c0 11 13 21 20 23.326C31 40 44 30 44 19c0-6.075-4.925-11-11-11-3.72 0-7.01 1.847-9 4.674A10.987 10.987 0 0 0 15 8z' fill='%23000' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); } #item-group-gogo div.item-card-small-icon:after,#item-group-gogo .item-card-container .item-card-info:after{ mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.358 7.31c2.662 3.848 6.186 5.092 7.86 5.215 2.855-1.398 6.203-2.202 9.782-2.202 3.58 0 6.927.804 9.782 2.201 1.674-.122 5.198-1.366 7.86-5.214.757-.821 3.03-.439 2.164 6.573-.289 1.756-1.087 5.585-1.616 7.49.488 1.361.75 2.8.75 4.289C42.94 34.132 34.46 41 24 41S5.06 34.133 5.06 25.662c0-1.489.262-2.928.75-4.289-.529-1.905-1.327-5.735-1.616-7.49C3.328 6.871 5.6 6.49 6.358 7.31z' fill='%23000' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M25 31.25c0 .69-1 3.75-1 3.75s-1-3.06-1-3.75.448-1.25 1-1.25 1 .56 1 1.25z' stroke='%23FFF' stroke-width='3'/%3E%3Ccircle cx='17' cy='22' r='4' fill='%23FFF' stroke='%23FFF' stroke-width='3'/%3E%3Ccircle cx='31' cy='22' r='4' fill='%23FFF' stroke='%23FFF' stroke-width='3'/%3E%3C/svg%3E"); } /* 系统组件(CPU/内存/磁盘)与普通卡片共用同一套渐变底色，故不再单独覆盖背景 */ .system-monitor div.item-card-small-icon,.system-monitor .item-card-info{height: 70px;} .text-white.flex.items-center{color: var(--bk3) !important; z-index: 1} .icon-small-box .n-image,.item-icon .items-center,.item-icon,.item-icon .n-avatar, .item-icon img.w-\[35px\],.item-icon img.h-\[35px\]{width: 30px !important; height: 30px !important; } .n-spin-content .w-\[70px\].h-\[70px\]{width: 100%; height: 90px} .icon-info-box .n-image,.icon-info-box .item-icon .n-avatar, .icon-info-box .item-icon,.icon-info-box .item-icon.overflow-hidden.rounded-xl,.icon-info-box .w-\[70px\].h-full.flex.justify-center.items-center,.icon-info-box .item-icon img.w-\[35px\],.icon-info-box .item-icon img.h-\[35px\], .app-icon-info-icon .item-icon svg{width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px;} .app-icon-info-icon.w-\[70px\].h-\[70px\]{width: 60px !important; height: auto !important;} .icon-info-box div.dot,.item-card-container div.dot{ inset: auto 10px 10px auto; } .item-icon.overflow-hidden,.item-icon .n-avatar{overflow: inherit !important;} .n-image img,.n-image svg,.item-icon img,.item-icon svg{ border-radius: 50% !important; /* 【DSH 改动】--white → --icon-plate。 深色下 --white 是 #333（比卡片还暗），图标衬底一暗就等于套了个黑框； --icon-plate 在深色下是 #3f4248，比卡片亮一档，图标才透得出来。 */ background: var(--icon-plate); width: 100%; /* 原本是单层 0 3px 10px —— 10px 模糊半径让图标像浮在糖浆里。 换成「贴身的接触影 + 稍远的柔影」两层，视觉更干净， 模糊半径总和（2+8）还比原来的 10 更小，栅格化不更贵。 图标是静态的，这层阴影整个页面只栅格化一次。 */ box-shadow: var(--icon-shadow) !important; padding: 2px;} .n-image svg,.item-icon svg{ max-width: none; width: auto} /* 悬停抬升：走 transform，合成器插值，不触发重排也不重绘。 刻意不加 will-change —— 面板有 50+ 张卡，常驻 will-change 会把它们 全部提成独立合成层（常驻显存），而且层内的文字会永久退回灰度抗锯齿， 小字号标题会发虚。浏览器在 transition 启动时本来就会临时提层， 那一次性的提升代价可以忽略，视觉收益更划算。 */ .item-card-container{position: relative; box-shadow: 0 0 1px rgba(0, 0, 0, 0); transition: transform var(--card-dur) var(--card-ease);} .item-icon{position: absolute; inset:auto auto 10px 10px} /* 抬升 4px（原 3px）并加 0.6% 放大，缓动换成带回弹的曲线， 收手时有一点过冲，显得更轻。仍是纯 transform，零重排零重绘。 */ .item-card-container:hover, .item-card-container:focus, .item-card-container:active { transform: translateY(calc(var(--card-lift) * -1)) scale(var(--card-zoom)); } .app-icon-info-icon .item-icon{ inset:25px auto auto 10px} .app-icon-info-text-box{display: flex; flex-direction: column; height: 90px; justify-content: center;} .app-icon-info-text-box-description{color: var(--bk2)} .item-card-small-title{color: var(--bk3) !important;} .item-card-container .item-card-small-title{ position: absolute; inset: 5px 5px auto 10px; text-align: left;} .font-extrabold.mb-\[20px\].ml-\[10px\]{margin-left: 0; position: relative; z-index: 1; color: var(--bk3)} .font-extrabold.mb-\[20px\].ml-\[10px\]:after{position: absolute; content: ""; inset:13px 0 auto 0; height: 1px; z-index: -1; /* 原来上面还有一行 background: var(--gray); 会被紧接的渐变整个覆盖， 是条死声明，删掉。渐变终点留一点余量，尾巴化得更柔。 */ background: linear-gradient(90deg, var(--gray) 0%, rgba(0, 0, 0, 0) 92%);} .font-extrabold.mb-\[20px\].ml-\[10px\] .text-white{color: currentColor} .item-list .icon-small-box{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; } .app-icon .app-icon-small-title{display: none} .item-list.mt-\[50px\]{margin: 20px 0} div.item-card-small-icon:hover{ box-shadow: 0px 5px 15px 0px var(--bg2) !important; } /*顶部距离写死*/ .scroll-container div.p-2\.5.mx-auto{margin-top:50px !important;} /* ========================================================================== 适配补丁 —— 以上原主题一字未改，以下是让它在你这台面板上正确生效的补充 -------------------------------------------------------------------------- 原因：原主题用 #item-group-myapp / #item-group-gogo 指定分组装饰图标， 但你的面板分组 id 是空的（渲染成 id="item-group-"），这两个选择器 永远不会命中，对应装饰等于失效。 面板同时会输出 .item-group-index-N 类，这里改用它来对应实际分组： item-group-index-0 → APP （11 个卡片） item-group-index-1 → 常用网址 （43 个卡片） 想对调两种图标：把下面两段的选择器互换即可。 想全部用默认星形：直接删掉本节。 ========================================================================== */ /* --- 修复 1：伪元素逃逸导致整屏白色蒙层 --- 系统监控(CPU/内存/磁盘)的卡片 DOM 里没有 .item-card-container 这一层， 于是 :before 的 inset:0 找不到最近的定位祖先，一路回溯到 .scroll-container（position:absolute 且是全屏尺寸）， 结果那块「白色渐变面板」被铺满整个视口，把页面底色整片盖掉 （实测视口 88% 被它盖住）。 给卡片自身加 position:relative，即可把面板锁回卡片范围内。 普通分组卡片因为本来就有 .item-card-container，所以不受影响。 */ div.item-card-small-icon, .item-card-info { position: relative !important; } /* --- 修复 2：监控卡片沿用普通卡片的渐变底色 --- 原主题曾写 .system-monitor ... { background: var(--bkz) }（纯色、覆盖渐变）， 修复 1 之后 :before 会落在卡片内并盖住它，于是又给 :before 补了一层纯色。 现已移除这两处覆盖，系统组件恢复与下方普通卡片一致的渐变效果。 */ /* 分组 0（APP）→ 游戏手柄图标 */ .item-list.item-group-index-0 div.item-card-small-icon::after, .item-list.item-group-index-0 .item-card-container .item-card-info::after { mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.358 7.31c2.662 3.848 6.186 5.092 7.86 5.215 2.855-1.398 6.203-2.202 9.782-2.202 3.58 0 6.927.804 9.782 2.201 1.674-.122 5.198-1.366 7.86-5.214.757-.821 3.03-.439 2.164 6.573-.289 1.756-1.087 5.585-1.616 7.49.488 1.361.75 2.8.75 4.289C42.94 34.132 34.46 41 24 41S5.06 34.133 5.06 25.662c0-1.489.262-2.928.75-4.289-.529-1.905-1.327-5.735-1.616-7.49C3.328 6.871 5.6 6.49 6.358 7.31z' fill='%23000' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M25 31.25c0 .69-1 3.75-1 3.75s-1-3.06-1-3.75.448-1.25 1-1.25 1 .56 1 1.25z' stroke='%23FFF' stroke-width='3'/%3E%3Ccircle cx='17' cy='22' r='4' fill='%23FFF' stroke='%23FFF' stroke-width='3'/%3E%3Ccircle cx='31' cy='22' r='4' fill='%23FFF' stroke='%23FFF' stroke-width='3'/%3E%3C/svg%3E"); } /* 分组 1（常用网址）→ 爱心图标 */ .item-list.item-group-index-1 div.item-card-small-icon::after, .item-list.item-group-index-1 .item-card-container .item-card-info::after { mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 8C8.925 8 4 12.925 4 19c0 11 13 21 20 23.326C31 40 44 30 44 19c0-6.075-4.925-11-11-11-3.72 0-7.01 1.847-9 4.674A10.987 10.987 0 0 0 15 8z' fill='%23000' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ========================================================================== 动画壁纸层 —— 粉色玻璃爱心 · 物理碰撞 -------------------------------------------------------------------------- 由 conf/custom/index.js 注入。层序（都在 .sun-main 下）： .cover.wallpaper 主题纯色底 / sun-panel 原生壁纸 #sp-wallpaper (.wp-bg) ← 背景层：渐变 + 光斑 + 物理爱心 .mask .scroll-container 卡片内容 #sp-wallpaper-front ← 前景层：大爱心 + 真玻璃背景模糊 .fixed-element 右上角浮动按钮 重要：爱心不是 CSS 动画驱动的，而是 JS 每帧算刚体物理后写 transform。 所以这里没有 @keyframes 飘落 —— 一切都由 index.js 的模拟决定。 性能约定：爱心只用 transform 定位（合成器承担）， 唯一的例外是前景层的 filter:blur() 和 backdrop-filter，那是刻意的景深与玻璃。 注意：绝不能放进 .cover 内部 —— 它带内联 filter:blur()， 子元素每帧变化会让整屏滤镜缓冲失效（数字雨那版踩过这个坑）。 ========================================================================== */ /* -------------------------------------------------------------------------- 【重要修复】盒子比视口四周各大 48px。 根因：阵风会把整层横推最多约 26px（@keyframes wp-gust 的 --gust-dir）。 盒子如果刚好等于视口（inset:0），被推走的那一侧就会露出约 22px 宽的竖条， 看到底下 .cover 的主题底色 —— 这就是「右下角周期性遮罩不完整」的来源 （风向随机，约一半的阵风露在右侧，右下角最显眼）。 实测证据：阵风时 .wp-bg 的 translateX 达 21.7px，左右边缘 12 列像素差异明显。 把盒子撑大后，怎么推都仍然完整覆盖视口。 -------------------------------------------------------------------------- */ .wp-bg, .wp-front { position: fixed; top: -48px; left: -48px; right: -48px; bottom: -48px; z-index: auto; overflow: hidden; pointer-events: none; } /* ---------------------------------------------------- 底层：粉色渐变 【DSH 改动】底色和「有壁纸图时的纱」都改成读 --wp-grad-bg / --wp-scrim-bg， 深浅两套值由根部的 --wpd-* 变量提供，于是这里不再需要深色专属规则 —— 原先「深色 .wp-grad{opacity:.10}」压不过「.wp-has-image .wp-grad{opacity:.45}」， 只能再补一条 .dark .wp-has-image 去反压，是同一件事写三遍。 深色下 --wp-grad-bg 被深色块重绑定为 --wpd-grad-bg（暗粉紫版）， 保持 --wp-scrim-bg 的回退链自动跟着变，不需要额外规则。 */ .wp-grad { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; /* 日间 --wp-grad-bg；深色由 .dark/:root:not(.light) 重绑定为 --wpd-grad-bg */ background: var(--wp-grad-bg); /* 【DSH 改动】噪点用伪元素单独一层，不用 background 逗号叠加。 原因：逗号叠加时 background-repeat / background-size 的值会「循环补齐」， 而 --wp-grad-bg 展开后是 7 层渐变，只写 `repeat, no-repeat` 两值的话， 后 5 层会拿到 repeat —— 径向渐变于是被平铺成网格状（实测肉眼可见）。 伪元素各管各的，永远不会互相干扰。 */ /* 有壁纸图时压到 --wp-scrim-img（默认 0.45）， 没有图时保持日间 1 / 深色 .34 的薄层 */ opacity: var(--wp-grad-op, 1); animation: wp-drift 48s ease-in-out infinite alternate; will-change: transform; } /* 噪点层：120px 无缝平铺，跟着 .wp-grad 一起漂移。 整页只栅格化一次，之后靠 repeat 复用。 调质感浓淡：改 :root 里 --wp-grain-bg 那个 SVG 的 rect opacity （0.03 极淡 / 0.055 默认 / 0.09 明显）。 */ .wp-grad::before { content: ""; position: absolute; inset: 0; background-image: var(--wp-grain-bg); background-repeat: repeat; background-size: 120px 120px; opacity: var(--wp-grain-op, 0.14); pointer-events: none; } @keyframes wp-drift { from { transform: translate3d(-2%, -1.5%, 0) rotate(-1.4deg) scale(1.02); } to { transform: translate3d(2%, 2%, 0) rotate(1.4deg) scale(1.07); } } /* ------------------------------------------------------------ 光斑层 */ /* 【DSH 改动】光斑已按要求移除。 index.js 仍会创建这 8 个 （BOKEH_COUNT），所以这里不能只「不画颜色」—— 必须连 animation 一起断掉，否则浏览器会白白跑 8 条无限循环的关键帧动画， 每帧插值 transform + opacity，纯属浪费。display:none 之外的隐藏方式 （比如 opacity:0）都不会停掉动画。 变量 --wp-bokeh-bg / --wp-bokeh-op / --o1 / --o2 保留未删： 万一以后想恢复，只要把下面三行注释打开即可，无需回头改 JS。 */ .wp-bokeh { position: absolute; inset: 0; display: none; } .wp-bokeh > i { position: absolute; border-radius: 50%; background: var(--wp-bokeh-bg); /* animation: wp-float var(--d, 18s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); will-change: transform, opacity; */ } @keyframes wp-float { from { transform: translate3d(0, 0, 0) scale(1); opacity: calc(var(--o1, 0.4) * var(--wp-bokeh-op, 1)); } to { transform: translate3d(var(--tx, 14px), var(--ty, -28px), 0) scale(1.18); opacity: calc(var(--o2, 0.8) * var(--wp-bokeh-op, 1)); } } /* ========================================================== 爱心刚体 */ /* 位置完全由 JS 物理每帧写 transform 决定，CSS 不参与运动。 left/top 固定为 0，坐标用 translate3d(x - size/2, y - size/2) 表达， x/y 是爱心「质心」，和物理计算里的坐标一一对应。 */ /* 内容层缩回视口大小（上面撑大了 48px，这里补回来）， 保证爱心的坐标、散布范围、回收边界全都和视口一一对应，不受影响 */ .wp-field { position: absolute; top: 48px; left: 48px; right: 48px; bottom: 48px; } .wp-heart { position: absolute; left: 0; top: 0; width: var(--sz, 60px); height: var(--sz, 60px); background-repeat: no-repeat; background-position: center; background-size: contain; /* 深色下压到 90%（--wp-heart-dim），日间为 1 */ opacity: calc(var(--op, 0.8) * var(--wp-heart-dim, 1)); transform-origin: 50% 50%; will-change: transform; pointer-events: none; } /* ------------------------------------------------ 前景层：玻璃 + 景深 */ /* 玻璃质感由 SVG 自己完成（半透明粉色渐变 + 亮边 + 高光斑 + 底部内反光）， 零运行开销。这里只再叠一层自身虚化做近处失焦 —— filter 的栅格化 结果会被复用，实测 8 片大爱心对帧率没有影响。 真·背景模糊（backdrop-filter）默认关闭：实测它每帧都要重读并重糊背景， 而且模糊面积随爱心尺寸走（最大 300+px），哪怕只有 1 片也会让帧率腰斩 （16.7ms → 33.3ms）。 【DSH 核查】index.js 里并不存在 REAL_BACKDROP_GLASS 这个开关， 从来不会给前景层加 .wp-realglass —— 下面这块规则目前不匹配任何元素， 是零成本的死代码，留着当手动开关用：想在浏览器控制台里 document.querySelector('#sp-wallpaper-front').classList.add('wp-realglass') 试一次真玻璃效果，加上去即可（记得先测帧率）。 注意 --sblur（前景自身的轻微虚化）是另一回事，它与本块无关。 */ .wp-front .wp-heart { filter: blur(var(--sblur, 0px)); } /* 真·玻璃模式（可选）：mask 把 backdrop-filter 裁成心形， 背后的卡片只有在心形内部被虚化，而不是糊一个方块 */ .wp-front.wp-realglass .wp-heart { -webkit-mask-image: var(--heart-mask); mask-image: var(--heart-mask); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-backdrop-filter: blur(var(--gblur, 3px)); backdrop-filter: blur(var(--gblur, 3px)); } /* ============================================================== 阵风 */ /* 现在是物理意义上的风：给所有刚体持续加横向加速度，2.5 秒衰减。 同时整层被横推一下作为视觉提示。 */ .wp-gusting { /* 时长与 JS 里 GUST_DUR（4.2~6.4s）大致对齐。 用 linear 让下面的关键帧点自己定义曲线 —— 若用默认缓动， 每两个关键帧之间还会再叠一层 ease，反而制造顿挫。 */ animation: wp-gust 5.2s linear; } /* 与 JS 的平滑包络同形：smoothstep 缓起（0→42%）+ smoothstep 缓落（42%→100%）。 各点系数就是 smoothstep 在对应进度上的取值，所以整层推移与爱心提速同步， 不会出现「层已推到顶、爱心还在加速」的错位感。 原版是 2.6s / 4 个关键帧 / 瞬间起手，正是「不平滑」的来源之一。 */ @keyframes wp-gust { 0% { transform: translate3d(0, 0, 0); } 12% { transform: translate3d(calc(var(--gust-dir, 22px) * 0.198), 0, 0); } 24% { transform: translate3d(calc(var(--gust-dir, 22px) * 0.606), 0, 0); } 36% { transform: translate3d(calc(var(--gust-dir, 22px) * 0.945), -2.5px, 0); } 42% { transform: translate3d(var(--gust-dir, 22px), -3px, 0); } 54% { transform: translate3d(calc(var(--gust-dir, 22px) * 0.889), -2.6px, 0); } 66% { transform: translate3d(calc(var(--gust-dir, 22px) * 0.628), -1.9px, 0); } 78% { transform: translate3d(calc(var(--gust-dir, 22px) * 0.322), -0.9px, 0); } 90% { transform: translate3d(calc(var(--gust-dir, 22px) * 0.079), 0, 0); } 100% { transform: translate3d(0, 0, 0); } } /* ======================================================= 与原生壁纸共存 */ /* 主题那行已改为 background-color（见 xsui-index.css 的 DSH 改动注释）， 原生壁纸恢复显示。这里解决「壁纸图」和「动画层」抢同一块地方的问题： 有壁纸图 → 渐变层降为「白纱」，图透出来但被洗淡，和主题同一调性 没壁纸图 → 渐变层满不透明，就是纯淡色底 微调开关（改这一个数就行）： 1 完全盖住壁纸图（等于回到纯动画底） 0.45 默认：图可见但被洗淡 0 完全不盖：图原样显示，只有爱心飘落 */ :root { --wp-scrim-img: 0.45; } /* 日间：只压透明度，底色沿用 --wp-grad-bg（故用 fallback 而不是直接写渐变）。 深色：亮色照片会把深色主题打穿，所以换成深色纱 --wpd-scrim-bg 并压到 1。 两种情况各只有一个变量不同，本规则始终只有这一条。 */ .wp-has-image .wp-grad { opacity: var(--wp-scrim-op, 0.45); background: var(--wp-scrim-bg, var(--wp-grad-bg)); } /* ------------------------------------------------------------- 深色模式 【DSH 改动】原先这一节有四条 @media 规则 + 四条 .dark 镜像规则， 现在它们的差异全部收进根部变量，本节只剩两句注释 —— 规则本身见上方 .wp-grad / .wp-bokeh > i / @keyframes wp-float / .wp-heart（光斑已停用），它们各自 读的 --wp-grad-op、--wp-bokeh-op、--wp-heart-dim、--wp-scrim-* 已经 由 :root / :root:not(.light) / .dark 三处赋值，深色下： 无壁纸 → 粉色渐变压到 0.10 的薄层，光斑 ×0.70，爱心 ×0.90 有壁纸 → 深色纱压满（rgba(12,14,18,.86) → rgba(16,18,24,.90) → rgba(10,12,16,.88)）*/ /* --------------------------------------------------------- 无障碍降级 */ /* 不做物理模拟，爱心静态摆好位置（由 JS 决定），保留渐变 */ @media (prefers-reduced-motion: reduce) { .wp-grad, .wp-gusting { animation: none !important; } } /* --------------------------------------------------------- 移动端降载 */ @media (max-width: 768px) { .wp-grad { animation-duration: 70s; } /* 真玻璃很贵，小屏一律不做 backdrop-filter（SVG 玻璃质感仍在） */ .wp-front.wp-realglass .wp-heart { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ========================================================================== SUN-PANEL · 音乐播放器（移植自 myhkw.cn「明月浩空」播放器 by 与末博客） -------------------------------------------------------------------------- 设计来源：https://blog.yumo.cc/archives/sun-panel-zt 页面上挂的第三方播放器 （skin = swhite，白底皮肤）。 ★ 配色按原版走了【白色】： 实测原版 #myhkplayer .myhkplayer{background-color:#fff!important}， 而且 .myhkblur-img 是 display:none —— 那个模糊封面背景在这个皮肤下 并没有启用。所以这里是干净的纯白底 + 深灰文字（#636363，与原版一致）。 深色模式由根部 --spp-* 变量给出深色值，主色换成更亮的 #4aa8e6。 保留的原版设计： 300×80 固定条 / 左侧 80×80 封面 / 圆形播放键兼进度环 / 底部进度条 + 音量 + 列表 / 侧边把手收起 / 列表向上展开并高亮当前曲 优化点： 1. 不依赖 jQuery、不加载外部 CDN、不用图标字体（全部内联 SVG） 2. 进度环改用 SVG stroke-dasharray —— 原版靠两层 linear-gradient 拼，精度差 3. z-index 从 2147483647 降到 6，且全部类名带 spp- 前缀，避开主题工具类 4. 圆角 + 细边框 + 柔和投影；主色抽成变量，一行可换回原版绿 #81c300 5. 进度条支持点击与拖拽；音量是悬停展开的竖条 + 拖拽 6. 移动端自适应、prefers-reduced-motion 支持 7. 默认不播放，必须手动点 ========================================================================== */ #spPlayer { /* 圆角不属于配色，深浅两态一致，所以留在 #spPlayer 里不抽到根部。 */ --spp-radius: 14px; /* 面板尺寸抽成变量（贴边收起也要按宽度算位移）。 【DSH 改动】190×80 → 300×92：原来为了塞下歌名/歌手/时间三段文字， 面板压得太窄，桌面端看起来只有一个小挂件。 宽度同时决定了歌词面板的可用宽度（.spp-lyric 靠它）， 所以歌词也跟着从「只能显示半句」变成完整句子。 想调长度改这一行即可，下面所有内边距/字号都按这个宽度标定。 */ --spp-w: 300px; --spp-h: 92px; /* 字号刻度：集中在这里，下面各处只写 calc(var(--spp-fs) * n)。 桌面与手机的比例由此一处决定，改一次整体跟着变。 */ --spp-fs: 13px; --spp-fs-meta: 11px; --spp-fs-lyric: 12px; position: fixed; left: 14px; bottom: 16px; z-index: 6; width: var(--spp-w); height: var(--spp-h); box-sizing: border-box; border-radius: var(--spp-radius); overflow: visible; user-select: none; font-family: inherit; transition: transform 0.42s cubic-bezier(0.4, 0.1, 0.2, 1), opacity 0.3s; } /* 收起 / 贴边：只把「播放器本体」滑出屏幕、把手挪到左边贴边。 注意不能位移整个 #spPlayer —— 歌词和播放列表是挂在它上面的， 整块一起动的话歌词会被一起拖走。让面板原地不动，贴边后歌词才能正常显示。 */ #spPlayer.spp-collapsed { pointer-events: none; } /* 收起的空壳别挡住桌面点击 */ #spPlayer .spp-body { transition: transform 0.42s cubic-bezier(0.4, 0.1, 0.2, 1), opacity 0.3s ease; } #spPlayer.spp-collapsed .spp-body { transform: translateX(calc(-1 * var(--spp-w))); /* 本体滑出屏幕 */ opacity: 0; /* 别在边上留半截卡片 */ pointer-events: none; } #spPlayer.spp-collapsed .spp-tab { /* 把手跟到屏幕左边，位置和展开时面板的左边距对齐 */ transform: translateY(-50%) translateX(calc(-1 * var(--spp-w))); pointer-events: auto; } /* 贴边后歌词/列表仍然可见，所以它们要继续能点、能滚 */ #spPlayer.spp-collapsed .spp-lyric, #spPlayer.spp-collapsed .spp-list { pointer-events: auto; } /* 主面板：白色卡片 */ .spp-body { position: absolute; inset: 0; border-radius: var(--spp-radius); overflow: hidden; background: var(--spp-bg); border: 1px solid var(--spp-line); /* 把面板内部的层叠关进自己这一层：底部进度带要盖在封面上， 它的 z-index 不该跑到外面去和播放列表/歌词面板抢次序。 */ isolation: isolate; box-shadow: var(--spp-shadow); } /* 封面相关样式（.spp-bg / .spp-cover / .spp-cover::after 等）已整块删除： 播放器不再请求歌曲图片，左侧信息区与控制栏因此左移， 见下面 .spp-info / .spp-ctrl 的 left，以及移动端那一段。 */ /* -------------------------------------------------------- 右侧信息区 */ .spp-info { position: absolute; left: 10px; right: 10px; top: 8px; z-index: 3; line-height: 1.35; } .spp-song { font-size: var(--spp-fs); font-weight: 600; color: var(--spp-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 给歌名行右上角那两个小按钮（歌词 / 播放列表）让位，歌名过长就在这儿截断 */ padding-right: 52px; } /* 歌名行右上角的两个小按钮：绝对定位、不参与文档流， 所以信息区高度不变，底下控制栏不会被顶上去。 */ .spp-info-btns { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 2px; } #spPlayer .spp-info-btns .spp-btn { width: 22px; height: 22px; } #spPlayer .spp-info-btns .spp-btn svg { width: 15px; height: 15px; } .spp-meta { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; font-size: var(--spp-fs-meta); color: var(--spp-text); } .spp-artist { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spp-time { flex: 0 0 auto; color: var(--spp-text-dim); font-variant-numeric: tabular-nums; letter-spacing: 0.3px; } /* ------------------------------------------------------------ 控制区 */ .spp-ctrl { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 38px; z-index: 3; display: flex; align-items: center; /* 【DSH 改动】原来是 space-between，4 个按钮被均分到 300px 两端 （实测 x=23 / 156 / 217 / 278），中间空出 106px —— 面板看着像个小挂件而不是播放器。 改成靠左顺序排列 + 固定间距，进度带独占整条底边， 视觉上就是常规播放器的「按钮在左、进度贯穿底部」。 */ justify-content: flex-start; gap: 8px; /* 容器本身不接事件，只让里面的按钮接 —— 否则它会挡住底下那条 全宽进度带，进度带就只剩封面那一小段能点了。 */ pointer-events: none; } #spPlayer .spp-btn, #spPlayer .spp-ring, #spPlayer .spp-vol-wrap { pointer-events: auto; } #spPlayer .spp-btn { border: 0; padding: 0; background: transparent; color: var(--spp-btn); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; box-shadow: none; transition: color 0.18s, background-color 0.18s, transform 0.15s; } .spp-btn svg { width: 17px; height: 17px; display: block; } #spPlayer .spp-btn:hover { color: var(--spp-title); background: var(--spp-hover); } #spPlayer .spp-btn:active { transform: scale(0.9); } #spPlayer .spp-btn:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; } #spPlayer .spp-btn.spp-on { color: var(--spp-accent-strong); } /* 圆形播放键 + 进度环 */ .spp-ring { position: relative; flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; } .spp-ring svg.spp-ring-svg { position: absolute; inset: 0; width: 38px; height: 38px; transform: rotate(-90deg); pointer-events: none; } .spp-ring .spp-ring-bg { fill: none; stroke: var(--spp-track); stroke-width: 2.5; } .spp-ring .spp-ring-fg { fill: none; stroke: var(--spp-accent); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; } #spPlayer .spp-play { position: relative; z-index: 1; width: 29px; height: 29px; border: 0; padding: 0; border-radius: 50%; background: var(--spp-accent); color: var(--spp-knob); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 7px rgba(47, 151, 209, 0.32); transition: background-color 0.18s, transform 0.15s, box-shadow 0.18s; } .spp-play svg { width: 15px; height: 15px; display: block; } #spPlayer .spp-play:hover { background: var(--spp-accent-strong); box-shadow: 0 3px 10px rgba(47, 151, 209, 0.45); } #spPlayer .spp-play:active { transform: scale(0.9); } #spPlayer .spp-play:disabled { background: var(--spp-disabled-bg); color: var(--spp-disabled-fg); box-shadow: none; cursor: not-allowed; } /* ------------------------------------------------------------ 进度条 */ /* 进度条：贴在面板最下沿的一条全宽带子。 原先它挤在控制栏里，而控制栏 202px 已被按钮占满 —— 实测它只剩 6px 宽， 基本没法点也没法看。挪到底部之后：静止 4px、悬停/拖动涨到 7px， 整条 14px 都是拖拽热区（上面 .spp-ctrl 设了 pointer-events:none 让路）。 */ .spp-progress { position: absolute; left: 0; right: 0; bottom: 0; /* 高于控制栏（.spp-ctrl 是 z-index:3）：压在下面的话进度带左侧一段 既看不见（填充被盖住）也点不到（命中测试落到控制栏上）。 */ z-index: 4; height: 14px; padding-bottom: 3px; display: flex; align-items: flex-end; cursor: pointer; touch-action: none; } .spp-progress:hover .spp-bar, #spPlayer.spp-seek .spp-bar { height: 7px; } .spp-bar { position: relative; width: 100%; height: 4px; border-radius: 2px; background: var(--spp-track); transition: height 0.16s ease; } .spp-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--spp-accent); transition: width 0.15s linear; } .spp-bar > b { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--spp-knob); border: 2px solid var(--spp-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity 0.18s; pointer-events: none; } .spp-progress:hover .spp-bar > b, #spPlayer.spp-seek .spp-bar > b { opacity: 1; } /* ------------------------------------------- 音量：悬停展开的竖向滑条 */ .spp-vol-wrap { position: relative; flex: 0 0 auto; display: flex; align-items: center; } .spp-vol-pop { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(6px); width: 28px; height: 90px; padding: 9px 0; box-sizing: border-box; border-radius: 10px; background: var(--spp-panel); border: 1px solid var(--spp-line); box-shadow: var(--spp-shadow-pop); display: flex; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; } .spp-vol-wrap:hover .spp-vol-pop { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .spp-vol-track { position: relative; width: 4px; border-radius: 2px; background: var(--spp-track); cursor: pointer; } .spp-vol-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; border-radius: 2px; background: var(--spp-accent); } .spp-vol-dot { position: absolute; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; margin-bottom: -5.5px; bottom: 70%; border-radius: 50%; background: var(--spp-knob); border: 2px solid var(--spp-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); pointer-events: none; } /* ---------------------------------------------- 播放列表：向上展开 */ .spp-list { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 4; margin-bottom: 8px; max-height: 0; overflow: hidden; border-radius: 12px; background: var(--spp-panel); border: 1px solid var(--spp-line); box-shadow: var(--spp-shadow-list); opacity: 0; transition: max-height 0.36s cubic-bezier(0.4, 0.1, 0.2, 1), opacity 0.24s; } #spPlayer.spp-list-open .spp-list { max-height: 232px; opacity: 1; } .spp-list-hd { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; font-size: 12px; font-weight: 600; color: var(--spp-title); border-bottom: 1px solid var(--spp-line); background: var(--spp-subtle); } .spp-list-hd span { color: var(--spp-text-dim); font-size: 11px; font-weight: 400; } .spp-list-ul { margin: 0; padding: 5px 0; list-style: none; max-height: 186px; overflow-y: auto; overscroll-behavior: contain; } /* 歌单可能有几百上千首，给一条窄滚动条，别用系统那种宽灰条。 【DSH 改动】原文件里这段样式写了两遍（列表一处、文件末尾「滚动条」一处）， 第二遍把 :hover 改成了主色。现合并为这一份，保留主色 hover。 */ .spp-list-ul::-webkit-scrollbar { width: 6px; } .spp-list-ul::-webkit-scrollbar-track { background: transparent; } .spp-list-ul::-webkit-scrollbar-thumb { background: var(--spp-thumb); border-radius: 3px; } .spp-list-ul::-webkit-scrollbar-thumb:hover { background: var(--spp-accent); } .spp-list-ul { scrollbar-width: thin; scrollbar-color: var(--spp-thumb) transparent; } .spp-list-ul li { display: flex; align-items: center; gap: 8px; padding: 8px 13px; font-size: 12px; color: var(--spp-text); cursor: pointer; transition: background-color 0.16s, color 0.16s; } .spp-list-ul li:hover { background: var(--spp-hover-weak); color: var(--spp-title); } .spp-list-ul li.spp-cur { background: var(--spp-accent-soft); color: var(--spp-accent-strong); font-weight: 600; /* 当前曲左侧一道主色条：比整行染色更容易在长列表里定位。 用 box-shadow 画而不是 border/padding-left —— 后者会改变行宽， 触发列表重排；前者只是同一层的绘制，不影响布局。 */ box-shadow: inset 2px 0 0 0 var(--spp-accent); } .spp-list-ul li .spp-idx { flex: 0 0 auto; width: 26px; text-align: right; opacity: 0.45; font-variant-numeric: tabular-nums; } .spp-list-ul li.spp-cur .spp-idx { opacity: 1; } .spp-list-ul li .spp-li-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spp-list-ul li .spp-li-artist { flex: 0 0 auto; max-width: 84px; font-size: 11px; color: var(--spp-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------- 歌词面板：与列表共用同一个槽位 */ /* 和「播放列表」都挂在控制栏正上方，所以两者天然互斥，同时只开一个。 */ .spp-lyric { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 4; margin-bottom: 8px; max-height: 0; overflow: hidden; border-radius: 12px; /* 【DSH 改动】230 -> 330：播放器已放大到 300px， 歌词面板跟着放宽，长句歌词（作词/作曲那几行）才有地方落， 不会被切掉半句。放大后仍比播放器略宽一点。 */ min-width: 330px; /* 歌词面板背景透明：白色卡片、边框、投影全部去掉， 只留文字浮在壁纸上。表头（歌词 + N 行）已经整块删掉了。 深色下靠 --spp-text-dim / --spp-accent-strong 变色，不再出现深字压暗底。 */ background: transparent; border: 0; box-shadow: none; opacity: 0; transition: max-height 0.36s cubic-bezier(0.4, 0.1, 0.2, 1), opacity 0.24s; } #spPlayer.spp-lyric-open .spp-lyric { max-height: 208px; opacity: 1; } /* 歌词表头（「歌词」+「N 行」）已整块删除：面板只留正文， 状态提示（加载中/暂无歌词/加载失败）在 .spp-lyric-msg 里显示。 */ .spp-lyric-body { position: relative; /* 【DSH 改动】行高 36->44、内边距 10->12，可视区 128->156。 仍只露三句：行高 44 x 3 = 132，加上下各 12px 内边距正好 156。 这样当前句居中时，上一句/下一句恰好整句落在可视区里，不会露半行。 */ max-height: 156px; overflow-y: auto; /* 必须显式 hidden：当前句放大后可能比容器宽，不写的话 overflow-x 会被 overflow-y:auto 带成 auto，底部直接多出一条横向滚动条。 */ overflow-x: hidden; overscroll-behavior: contain; padding: 12px 0; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--spp-thumb) transparent; /* 上下边缘淡出，歌词滚进滚出不会硬切一刀。 mask 默认按 alpha 取值，这里的 #000 只是「完全不透明」，不是颜色。 */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); } .spp-lyric-body::-webkit-scrollbar { width: 6px; } .spp-lyric-body::-webkit-scrollbar-track { background: transparent; } .spp-lyric-body::-webkit-scrollbar-thumb { background: var(--spp-thumb); border-radius: 3px; } /* 每行高度写死 36px：当前句放大时不会把后面的行顶下去，滚动位置也稳。 放大走 transform（合成层，不触发重排），比动 font-size 顺得多 —— 后者每帧都得重新排版，句尾还会在过渡中反复折行。 放大倍数由 --lc-scale 给（JS 按每行实际宽度算好上限，见 player.js）， 默认 1.5：11.5px 放成 17.25px，视觉高约 24px 塞在 36px 里， 上下各留 6px，不会和邻行叠。 */ .spp-lyric-line { display: flex; align-items: center; /* 【DSH 改动】36 -> 44px。行高写死是为了让放大用 transform 而不重排， 加大行高同样安全 —— 放大的当前句视觉高约 26px，塞进 44px 仍有余量。 */ height: 44px; padding: 0 16px; } .spp-lyric-line > span { display: block; /* 不许收缩：nowrap 的长句要保持原始宽度，JS 才能量准并反推放大上限 */ flex: 0 0 auto; /* 【DSH 改动】11.5 -> var(--spp-fs-lyric)(默认 12px)，手机上再放大。 同时把未唱到的行从 0.7 提到 0.82 —— 原来那档压在浅色壁纸上几乎读不清。 「易读」的关键不只是放大字号，还有提高未唱行的对比度。 */ font-size: var(--spp-fs-lyric); line-height: 1.4; color: var(--spp-text-dim); opacity: 0.82; white-space: nowrap; transform-origin: left center; transform: scale(1); /* 带一点回弹，放大那一下更有精神 */ transition: transform 0.36s cubic-bezier(0.34, 1.38, 0.64, 1), color 0.36s ease, opacity 0.36s ease; } /* 当前唱到的那句：放大一档 + 变蓝 + 提亮 */ .spp-lyric-line.spp-lc-on > span { color: var(--spp-accent-strong); font-weight: 600; opacity: 1; transform: scale(var(--lc-scale, 1.5)); } .spp-lyric-msg { padding: 28px 15px; text-align: center; font-size: 12px; line-height: 1.9; color: var(--spp-text-dim); } /* 空列表提示 */ .spp-list-ul .spp-empty { display: block; padding: 16px 13px; text-align: center; font-size: 11.5px; line-height: 1.7; color: var(--spp-text-dim); cursor: default; } .spp-list-ul .spp-empty:hover { background: transparent; color: var(--spp-text-dim); } /* -------------------------------------------------------- 侧边把手 */ #spPlayer .spp-tab { position: absolute; right: -22px; top: 50%; transform: translateY(-50%); width: 22px; height: 46px; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; border-radius: 0 10px 10px 0; background: var(--spp-accent); color: var(--spp-knob); cursor: pointer; box-shadow: var(--spp-shadow-pop); transition: filter 0.2s, transform 0.42s cubic-bezier(0.4, 0.1, 0.2, 1); } #spPlayer .spp-tab:hover { filter: brightness(1.08); } #spPlayer .spp-tab svg { width: 13px; height: 13px; display: block; transition: transform 0.42s cubic-bezier(0.4, 0.1, 0.2, 1); } #spPlayer.spp-collapsed .spp-tab svg { transform: rotate(180deg); } /* ---------------------------------------------------------- 提示气泡 */ .spp-toast { position: absolute; left: 50%; bottom: 100%; margin-bottom: 8px; transform: translateX(-50%) translateY(4px); padding: 5px 11px; border-radius: 9px; background: var(--spp-panel); border: 1px solid var(--spp-line); box-shadow: var(--spp-shadow-pop); color: var(--spp-title); font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; } .spp-toast.spp-show { opacity: 1; transform: translateX(-50%) translateY(0); } /* --------------------------------------------------------- 无障碍降级 */ @media (prefers-reduced-motion: reduce) { #spPlayer, .spp-tab svg, .spp-list, .spp-lyric, .spp-bar, .spp-lyric-line > span { transition: none !important; animation: none !important; } .spp-lyric-body { scroll-behavior: auto; } } /* --------------------------------------------------------- 移动端适配 */ @media (max-width: 640px) { #spPlayer { left: 8px; bottom: 10px; /* 宽度也走 --spp-w：贴边时把手要按这个宽度算出屏幕左边 */ --spp-w: min(320px, calc(100vw - 44px)); height: 74px; /* 【DSH 改动】手机端字号整体上调：歌词 12 -> 15px、歌名与副行同步放大。 播放器在小屏上是唯一的悬浮控件，屏幕触达距离更远，字号应比桌面更激进。 LYRIC_SCALE 在 JS 里兜上限，长句不会因字大而溢出。 */ --spp-fs: 14px; --spp-fs-meta: 12px; --spp-fs-lyric: 15px; } .spp-info { left: 8px; top: 6px; } .spp-song { font-size: var(--spp-fs); padding-right: 52px; } .spp-ctrl { left: 6px; bottom: 5px; height: 34px; gap: 6px; } .spp-ring, .spp-ring svg.spp-ring-svg { width: 34px; height: 34px; } .spp-play { width: 26px; height: 26px; } /* 小屏隐藏上一首/下一首，只留播放与进度 */ .spp-ctrl .spp-prev, .spp-ctrl .spp-next { display: none; } /* 歌词面板：手机上比桌面更高（露 3 行 x 44px 不变，可视区给足）， 宽度从 --spp-w 自身算 —— 窄屏上 min-width 330 比屏宽还宽，放个上限。 */ .spp-lyric { min-width: min(330px, 92vw); } #spPlayer.spp-lyric-open .spp-lyric { max-height: 224px; } /* 手机上未唱行对比度再拉高：小屏阳光下 0.82 仍偏灰 */ .spp-lyric-line > span { opacity: 0.88; } #spPlayer.spp-list-open .spp-list { max-height: 190px; } } /* ========================================================================== 注意（踩过的坑）：sun-panel 自带的 preflight 里有 button,[type='button'],[type='reset'],[type='submit']{background-color:transparent;background-image:none} 属性选择器 [type='button'] 的权重是 (0,1,0)，和单个类选择器【相同】， 而应用样式表加载在后 —— 于是 .spp-play / .spp-tab 的 background 会被它盖成透明。 所以上面这些按钮规则都加了 #spPlayer 前缀把权重提到 ID 级。 以后再加按钮样式，记得保留这个前缀。 ========================================================================== */ /* ========== 系统组件(CPU/内存/磁盘)：文字随主题 + 字号微调 ========== 根因：监控卡片把文字颜色/字号写成「内联 style」，来源是 module_config.extendParam.color(DB 里固定 "#fff") 与 iconTextColor(panel_json 里固定 "#ffffff")， 内联 style 的优先级高于普通 CSS 规则，所以切浅色模式文字仍是白的。 内联的 font-size:8px 同理，压得极小。 解法：用 !important 覆盖内联 style（CSS 的 !important 优先级高于内联非 important）。 */ .system-monitor .item-card-small-title, .system-monitor .app-icon-info-text-box, .system-monitor .app-icon-info-text-box *, .system-monitor .n-progress-custom-content div, .system-monitor .n-progress-text, .system-monitor .n-progress-text *, .system-monitor .item-card-info{ color: var(--bk3) !important; } /* 标题行（CPU / RAM / 硬盘） */ .system-monitor .item-card-small-title{ font-size: 12px !important; font-weight: 600; } /* 环形进度条中心的百分比：内联 font-size:8px，用 !important 直接覆盖 */ .system-monitor .n-progress-custom-content div{ font-size: 11px !important; font-weight: 600; } /* 信息行（信息样式下的左右两侧标签文字） */ .system-monitor .app-icon-info-text-box, .system-monitor .app-icon-info-text-box *{ font-size: 12px !important; }