/*! * perf-lite.css —— 精简版样式（低性能设备） * * 生效条件： * 由 perf-tier.js 在 中同步标记，无闪烁。 * * 降级思路：把所有「重绘 / 合成开销大」的视觉效果换成廉价实现， * 内容与布局完全不变，只减负不减功能。 */ /* ---------- 1. 关闭毛玻璃（backdrop-filter 是移动端最贵的效果之一） ---------- */ html[data-perf="lite"] *, html[data-perf="lite"] *::before, html[data-perf="lite"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 原本靠毛玻璃做出的「半透明玻璃面板」，改用纯色背景补齐观感 */ html[data-perf="lite"] .site-top, html[data-perf="lite"] .m-nav, html[data-perf="lite"] header, html[data-perf="lite"] .header-info, html[data-perf="lite"] #mobile-nav, html[data-perf="lite"] .comments-main, html[data-perf="lite"] .widget, html[data-perf="lite"] .float-content { background-color: #fff !important; } /* ---------- 2. 关掉所有动画与过渡 ---------- */ html[data-perf="lite"] *, html[data-perf="lite"] *::before, html[data-perf="lite"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } html[data-perf="lite"] { scroll-behavior: auto !important; } /* 彻底隐藏 sakura 主题的装饰性动效层（樱花飘落、光斑、粒子等） */ html[data-perf="lite"] canvas, html[data-perf="lite"] .sakura, html[data-perf="lite"] #sakura, html[data-perf="lite"] .particle, html[data-perf="lite"] .stars, html[data-perf="lite"] .bg-animation, html[data-perf="lite"] .kang-cursor, html[data-perf="lite"] .cursor-follower { display: none !important; } /* ---------- 3. 阴影与滤镜降级 ---------- */ html[data-perf="lite"] * { box-shadow: none !important; text-shadow: none !important; filter: none !important; -webkit-filter: none !important; } /* 保留一点点层次感：卡片用细边框代替阴影 */ html[data-perf="lite"] .post, html[data-perf="lite"] .widget, html[data-perf="lite"] .comments-main, html[data-perf="lite"] .feature { border: 1px solid rgba(0, 0, 0, 0.06) !important; } /* ---------- 4. 背景降级 ---------- */ /* 大图背景在低端设备上滚动很卡，换成纯色 + 保留主题色调 */ html[data-perf="lite"] body { background-image: none !important; background-color: #f6f6f6 !important; background-attachment: scroll !important; } html[data-perf="lite"] .site-header, html[data-perf="lite"] .header-info, html[data-perf="lite"] #banner, html[data-perf="lite"] .banner { background-image: none !important; background-color: #ffb6c1 !important; } /* 头像等小图保留，但去掉圆形外的装饰环 */ html[data-perf="lite"] .avatar, html[data-perf="lite"] .author-profile img { border: 2px solid #fff !important; } /* ---------- 5. 图片解码降级 ---------- */ /* 低端机对大图即时解码压力大，改用异步解码 + 限制最大尺寸 */ html[data-perf="lite"] img { image-rendering: auto; /* 有些浏览器支持该属性，可降低解码优先级 */ content-visibility: auto; } /* 装饰性大图直接不渲染 */ html[data-perf="lite"] .bg-figure, html[data-perf="lite"] .post-cover-bg, html[data-perf="lite"] .gallery-cover { display: none !important; } /* ---------- 6. 滚动条与交互细节简化 ---------- */ html[data-perf="lite"] ::-webkit-scrollbar { width: 6px; height: 6px; } html[data-perf="lite"] ::-webkit-scrollbar-thumb { background: #ccc !important; } /* ---------- 7. 禁用 hover 抬升等布局抖动 ---------- */ html[data-perf="lite"] .post:hover, html[data-perf="lite"] .widget:hover, html[data-perf="lite"] .feature:hover, html[data-perf="lite"] .post-more:hover { transform: none !important; } html[data-perf="lite"] .post:hover .entry-title a { color: inherit !important; } /* ---------- 8. 减少合成层，避免内存爆掉 ---------- */ html[data-perf="lite"] .fixed, html[data-perf="lite"] .site-top, html[data-perf="lite"] .openNav { will-change: auto !important; transform: none !important; } /* ---------- 9. 评论区简化（Twikoo 本身较重） ---------- */ html[data-perf="lite"] .comments-main textarea, html[data-perf="lite"] .comments-main input { background-color: #fafafa !important; box-shadow: none !important; } /* ---------- 10. Fancybox / 灯箱过渡去掉 ---------- */ html[data-perf="lite"] .fancybox-bg, html[data-perf="lite"] .fancybox-is-open .fancybox-bg { opacity: 0.95 !important; transition: none !important; }