3步把 Stretchly 休息提醒界面改成你自己的风格

3步把 Stretchly 休息提醒界面改成你自己的风格【免费下载链接】stretchlyThe break time reminder app项目地址: https://gitcode.com/gh_mirrors/st/stretchly每过十来分钟屏幕上会弹出一个 20 秒的迷你休息窗口每隔一阵子还会来一个 5 分钟的长休息窗口。如果你觉得默认样子太素Stretchly正好允许你改它Stretchly 自定义休息界面只需要动几个 HTML 和 CSS 文件。休息窗口上的文案、颜色、按钮全都由你掌控3 步就能换成自己的风格不需要读懂源码。先认识这三个会动的页面 ️迷你休息20 秒的小窗口它默认每 10 分钟出现一次只占屏幕一角一行短建议加一条倒计时进度条。迷你休息窗口一句话建议配倒计时不占满屏幕长休息5 分钟的完整休息默认每 2 个迷你休息之后出现大窗口里是醒目的大标题建议加一段正文。长休息窗口标题与正文分两层底部带操作按钮设置页所有开关的入口从托盘菜单打开建议文案、主色、透明度、窗口大小都在这里控制改文案最省事改文件最彻底。改哪几个文件按什么顺序改第 1 步先改提示文案休息窗口上的建议文本来自 app/utils/defaultBreakIdeas.js迷你休息的建议在同目录的同名文件里。每条建议一个条目data是两项数组第一项是标题第二项是正文。{ data: [看远处, 抬头看向窗外最远的建筑保持 20 秒再转回来。], enabled: true }这 3 行就是下一个长休息窗口将展示的完整内容标题换成「看远处」正文换成你自定义的眼保健操写成什么语言都行。第 2 步再改视觉样式休息窗口的外观主要由 app/css/break.css 决定标题与正文的字号、颜色、布局都集中在这里。比如把标题改大、换个颜色.breaks :nth-child(1) .break-idea { font-size: 48px; color: #ffd166; }这 3 行让休息标题放大到 48 像素并变成暖黄色下次窗口弹出时就是新的尺寸和配色。第 3 步最后试交互窗口底部的推迟、跳过、完成按钮有固定 id#postpone、#close、#finish动作由页面加载的脚本绑定。打开设置页立刻触发一次休息检查新样式和按钮是否都正常。长休息窗口底部的按钮区位置不要动颜色可以改三种立竿见影的玩法建议文案太长20 秒根本读不完 → 精简正文再在 break.css 里放大字号 → 一眼抓住重点。✂️默认蓝绿底和你的深色桌面打架 → 把窗口背景改成纯黑再在设置里调低透明度 → 窗口不再突兀。内置建议看腻了 → 直接往建议数组里加自己的拉伸动作 → 每次休息都是私人笔记。✍️容易踩的坑 想深入去哪看 ️标签凭空消失建议文本里写的div上屏后不见了。原因Stretchly 会出于安全过滤建议内容只放行b、i、a、img、p等少数标签。解法只用允许列表里的标签。按钮失灵改完 HTML 后跳过、推迟没反应。原因按钮的 id 或位置变了脚本找不到元素。解法#postpone、#close、#finish 三个 id 原样保留。别的页面跟着变改了 CSS 后设置页也怪怪的。原因commons.css 是多个页面共用的。解法只动 break.css 这个休息页专属文件。想深入时app/break.html 是长休息页结构app/microbreak.html 是迷你休息页结构允许标签的完整清单写在 README 的「Using HTML in break ideas」一节。现在弹出 5 分钟窗口时它就是你亲手调过的样子了。想核对默认值与更多开关看 README 的 Advanced Preferences 一节动手前先备份 app/ 目录下的原文件改坏了一分钟就能还原。【免费下载链接】stretchlyThe break time reminder app项目地址: https://gitcode.com/gh_mirrors/st/stretchly创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考