Transitio

Note

此插件 1.0.0 版本及以上最低支持 LiteLoaderQQNT 1.0.0，之前版本的 LiteLoaderQQNT 请使用 1.0.0 之前的 Release

LiteLoaderQQNT 插件，用于为 QQNT 加载任意 CSS 片段。

你可能也感兴趣：Scriptio，自定义渲染层 JavaScript 脚本加载器。

🪄 具体功能

• 导入 CSS 代码片段
• 启用/禁用 CSS 代码片段
• 开发者模式：监控文件更改，实时预览效果
• 立即重载：立即重载所有 CSS 代码片段

🖼️ 截图

演示中使用了 MSpring-Theme，主题色为 #74A9F6。

📥 安装

稳定版

下载 Release 中的 transitio-release.zip，解压后放入数据目录下的 plugins/transitio 文件夹中即可。(若没有该文件夹请自行创建)

CI 版

若想体验最新的 CI 功能，可以下载源码后同上安装。(仅需下载下面列出的文件)

完成后的目录结构应该如下:

plugins (所有的插件目录)
└── transitio (此插件目录)
    ├── manifest.json (插件元数据)
    ├── main.js (插件脚本)
    ├── preload.js (插件脚本)
    ├── renderer.js (插件脚本)
    ├── settings.html (插件设置界面)
    └── icons/ (插件用到的图标)

🤔 使用方法

Warning

所有不是通过配置界面进行的更改，除非打开了 开发者模式，都只在双击 导入 CSS 这行字或重启 QQ 后生效。

• 启用/禁用样式：打开插件设置界面，将对应的样式开关打开/关闭，即时生效。
  • 若点击各个开关速度过快，可能会导致错位等情况，此时请双击 "导入 CSS" 来重载。
• 导入样式：在配置界面导入 CSS 文件，或将之放入 data/transitio/styles/ 文件夹。
  • 样式的编写请参考 Wiki。
  • 可以在此文件夹下创建多层目录，插件会自动扫描所有 CSS 文件，但是设置界面导入的还是默认直接放在 data/transitio/styles/ 下
• 删除样式：鼠标悬停在样式上并点击删除 🗑️ 按钮，或进入 data/transitio/styles/ 文件夹删除对应文件。
• 修改样式：修改对应文件即可。
  • 鼠标悬停在样式标题上时，会显示其绝对路径。
  • 鼠标悬停在样式上时，会展示 "在文件夹中显示" 按钮。
• 更新样式：重新导入即可。

💻 调试

• 开发者模式：若您想要调试您的 CSS 片段，可以在插件设置界面打开开发者模式，此时插件会监控 data/transitio/styles/ 文件夹，当发生更改时，会自动重载。
• Debug 模式：若您想要调试此插件本身，可以使用 --transitio-debug 参数启动 QQNT，此时插件会在控制台输出调试信息。

📜 用户 CSS 片段

Note

以下样式均为由我/其它用户编写的 CSS 片段，不内置在插件中。

若你有愿意分享的样式，欢迎提交 PR 或 Issue 来将它们添加到这里。编写样式前推荐先阅读 Wiki。

文件名	用户样式	作者	说明	链接
auto-fold-chat-input-area	🔴	lamprose	消息输入框默认折叠有文字输入时展开	GitHub
avatar-float	🟢	PRO-2684	头像浮动	GitHub
compact-at-list	🟢	PRO-2684	艾特建议面板更为紧凑	GitHub
demo-mode	🟢	PRO-2684	演示模式的 CSS	GitHub
font-color	🔴	nogodnodevil	自定义 QQNT 一些文字的颜色	GitHub
hide-emoticon-response	🟢	InfSein	移除右键消息上的表情回应	GitHub
hide-items	🟢	PRO-2684	隐藏一些元素	GitHub
hide-level	🔴	SoudayoWwww	隐藏群内等级	GitHub
hide-lock	🟢	Shapaper233	隐藏侧边栏 "更多" 中倒数第四个按钮 ("锁定")	GitHub
hide-self	🟢	PRO-2684	隐藏自己的头像和昵称	GitHub
highlight-at	🟢	PRO-2684	高亮艾特	GitHub
image-viewer	🟢	PRO-2684	媒体查看器透明度修改	GitHub
ImageSize	🔴	zhuoxin-lzk	限制图片和表情显示大小	GitHub
input-placeholder	🟢	PRO-2684	添加输入框提示（占位符）	GitHub
message-img-transparent	🔴	lamprose	包含图片消息背景透明	GitHub
link-color	🟢	PRO-2684	链接动态颜色：悬浮/按下时显示相应颜色。	GitHub
lite-tools-recall-enhancement	🟢	Shapaper233	给 lite-tools 的撤回消息加上红色增强描边	GitHub
ng-mask	🔴	KelsAstell	图片模糊（鼠标悬停查看）	GitHub
no-update-dialog	🟢	PRO-2684	隐藏更新提示框	GitHub
no-update-dot	🟢	PRO-2684	隐藏更新小红点	GitHub
qqface-fine-tune	🟢	PRO-2684	QQ 表情微调	GitHub
SimSun-font	🔴	shiquda	使用宋体字体	GitHub
transition	🟢	PRO-2684	添加过渡动画	GitHub
transparent	🟢	PRO-2684	透明化部分元素	GitHub
wechat-theme	🔴	festoney8	高仿微信风格主题	GitHub