-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtransition.css
256 lines (254 loc) · 9.74 KB
/
transition.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
/* ==UserStyle==
@name Transition
@description 添加过渡动画
@preprocessor transitio
@version 0.3.1
@homepageURL https://github.com/PRO-2684/Transitio-user-css/#transition
@author PRO-2684
@license gpl-3.0
@var checkbox smooth-scroll "平滑滚动" [1, "auto", "smooth"]
@var checkbox remove-select-overlay "移除消息聚焦遮罩" [1, "block", "none"]
@var number duration "过渡时间 (s)" [0.2, 0.01, 2, 0.01]
@var select timing-function-global "全局过渡函数" [3, "ease", "ease-in", "ease-out", "ease-in-out", "linear", "cubic-bezier(.56, -0.37, .46, 1.58)"]
@var select timing-function-message "消息动画过渡函数" [5, "ease", "ease-in", "ease-out", "ease-in-out", "linear", "cubic-bezier(.56, -0.37, .46, 1.58)"]
@var number message-magnitude "消息动画强度 (em)" [5, 1, 10, 0.1]
==/UserStyle== */
html, .q-scroll-view:not(.ml-container) { /* 平滑滚动 */
scroll-behavior: var(--smooth-scroll);
}
.contact-notify > .notify-option, /* 联系人界面的好友通知/群通知 */
button.q-button, /* 按钮 */
.btn-item, /* 按钮 (分享群聊界面) */
[role="button"], /* 按钮 */
.q-like-button, /* 点赞按钮 */
.q-checkbox .q-checkbox__input, /* 复选框 */
.q-select-button, /* 下拉框按钮 */
.message-btn-items, /* 机器人消息内部按钮 */
.message .forward-msg, /* 转发消息 */
.message .file-message--content > .file-element, /* 文件消息 */
div.reply-element, /* 回复消息 */
.group-user > .group-user__content[bf-list-item], /* 群成员列表 */
.group-user.group-user--btn, /* 群成员列表 (邀请) */
.nav-bar > .nav-item, /* 设置界面选项 */
.tabs > .tabs-container > .tabs-container-item, /* 标签页项目 (表情面板) */
.tabs > .tabs-arrow, /* 标签页箭头 (表情面板) */
.stickers > .stickers-item, /* QQ 表情项目 */
.category-item, /* 分类项目 (好友管理器侧栏) */
.table__row, /* 表格行 (好友管理器好友项目) */
.notice__container .notice__content .notice-item, /* 群公告 */
.menu-stickers > .menu-stickers-item, /* 表情回应面板 (小) 的项目 */
.menu-stickers-panel > .stickers-list > .stickers-list-item, /* 表情回应面板 (完整) 的项目 */
.reaction-panel > .reaction-item, /* 表情回应面板 (消息下方) 的项目 */
.reaction-panel > .more-reaction-item, /* 表情回应面板 (消息下方) 的更多 */
.message-tips > .message-tail > .message-btn-items, /* 机器人消息下方按钮 (貌似无效) */
.main-area--image .main-area__footer .image-viewer__icon, /* 图片查看器底部图标 */
.favorites-layout__category-list > .favorites-layout__category-list-item, /* 收藏类型列表项目 */
.favorites-item-mainList > .favorites-item, /* 收藏项目 */
.nav-item .nav-item-container, /* 文件管理器侧栏项目 */
.file-manager-main .file-list-normal-scroll-container .file-container, /* 文件管理器文件项目 */
.sys-status-editor .sys-status-option, /* 在线状态项目 */
.sys-status-setting__container .custom-status-option, /* 自定义状态项目 */
.menu-content-wrap > .menu-content { /* 忘了是啥 */
transition: background var(--duration)s var(--timing-function-global);
}
.viewport-list__inner > div { /* 列表项目 (会话列表项目) */
transition: background var(--duration)s var(--timing-function-global);
> .item__content {
transition: background var(--duration)s var(--timing-function-global);
> .item__info {
> .item__summary {
transition: color var(--duration)s var(--timing-function-global);
}
> .item__title {
> .main-info, > .secondary-info {
transition: color var(--duration)s var(--timing-function-global);
}
}
}
}
}
.text-element .text-element--at, /* 艾特 */
.text-element .text-link, /* 链接 */
.q-tabs > .q-tabs-item { /* 选项卡项目 */
transition: color var(--duration)s var(--timing-function-global);
}
input, .input-container { /* 输入框 */
transition: border var(--duration)s var(--timing-function-global);
}
.sticker-container > .sticker-list > .sticker-list-item .sticker-list-item-img { /* 收藏表情/表情包项目 */
transition: transform var(--duration)s var(--timing-function-global);
}
.main-area .main-area__arrow-icon { /* 媒体查看器的箭头图标 */
transition-duration: var(--duration)s;
transition-timing-function: var(--timing-function-global);
transition-property: background, opacity;
}
i.q-icon { /* 图标 */
transition-duration: var(--duration)s;
transition-timing-function: var(--timing-function-global);
transition-property: color, background, border, opacity;
}
.radio-tab .radio-tab__item > span { /* 好友界面的 tab */
transition-duration: var(--duration)s !important;
transition-timing-function: var(--timing-function-global) !important;
transition-property: color, opacity !important;
}
.operation > .send-btn-wrap > div { /* "发送" 按钮 */
transition: background var(--duration)s var(--timing-function-global);
> .send {
transition: opacity var(--duration)s var(--timing-function-global);;
}
}
div.tab-item-mask { /* 侧栏图标背景 */
transition-duration: var(--duration)s;
transition-timing-function: var(--timing-function-global);
transition-property: background, opacity;
&:hover {
animation: none;
opacity: 0.04 !important;
}
}
.list-item { /* 列表元素 */
transition: background var(--duration)s var(--timing-function-global);
.list-item__title > div > span,
.summary-main {
transition: color var(--duration)s var(--timing-function-global);
}
&.search-result-item { /* 搜索结果列表元素 */
transition: none;
> .list-item__container > .list-item__content {
transition: background var(--duration)s var(--timing-function-global);
}
}
> .list-item__container > .list-item__content {
transition: background var(--duration)s var(--timing-function-global);
}
}
a { /* 链接 */
transition-duration: var(--duration)s;
transition-timing-function: var(--timing-function-global);
transition-property: color;
i.q-icon {
transition: none;
}
&.q-context-menu-item {
transition-property: color, background;
}
}
.message .message-content__wrapper > div.msg-content-container { /* 消息内容 (貌似无效) */
&::before { /* 取消聚焦时的遮罩效果 */
display: var(--remove-select-overlay) !important;
}
> .message-content {
> .image::after, .markdown-image::after {
display: var(--remove-select-overlay) !important;
}
}
}
.message {
.universal-repeater { /* https://github.com/PRO-2684/Scriptio-user-scripts/#universal-repeater */
opacity: 0;
transition-duration: var(--duration)s;
transition-timing-function: var(--timing-function-global);
transition-property: opacity, visibility;
transition-behavior: allow-discrete;
}
&:hover .universal-repeater {
opacity: 0.6;
@starting-style {
opacity: 0;
}
}
}
.msg-list > .record-msg-detail { /* 聊天记录 */
> i.q-icon.target-to-chat { /* 聊天记录中的图标 */
opacity: 0;
transition-duration: var(--duration)s;
transition-timing-function: var(--timing-function-global);
transition-property: opacity, color, display;
transition-behavior: allow-discrete;
}
&:hover > i.q-icon.target-to-chat {
opacity: 1;
@starting-style {
opacity: 0;
}
}
}
.search-base-panel.record-panel .message-wrapper { /* 本地搜索 - 聊天记录 */
> .message { /* 消息 */
transition: background var(--duration)s var(--timing-function-global);
}
> i.icon.q-icon { /* 图标 */
opacity: 0;
transition-duration: var(--duration)s;
transition-timing-function: var(--timing-function-global);
transition-property: opacity, display;
transition-behavior: allow-discrete;
}
&:hover > i.icon.q-icon {
opacity: 1;
@starting-style {
opacity: 0;
}
}
}
.main-area .image-viewer__tip { /* 图片查看器的提示 */
transition-duration: var(--duration)s;
transition-timing-function: var(--timing-function-global);
transition-property: opacity, display;
transition-behavior: allow-discrete;
opacity: 1;
@starting-style {
opacity: 0;
}
&[style*="display: none;"] {
opacity: 0;
@starting-style {
opacity: 1;
}
}
}
/* 菜单动画 (Adapted from https://t.me/ntqqtweaks/14) */
@keyframes fadeIn {
from {
opacity: 0%;
margin-top: 10px;
margin-left: 3px;
}
to {
opacity: 80%;
margin-top: 0px;
margin-left: 0px;
}
}
.q-menu, .q-context-menu, .q-context-sub-menu__container, .q-tooltips__content, .q-float-card, .menu-stickers-panel {
animation: fadeIn var(--duration)s;
}
/* 消息动画 (Adapted from https://github.com/PRO-2684/Transitio-user-css/pull/1/commits/d81cab38e7d9a41936002ee96e830c30458895a8) */
@keyframes message-ltr {
from {
transform: translateX(-var(--message-magnitude)em);
opacity: 0%;
}
to {
transform: translateX(0);
opacity: 100%;
}
}
@keyframes message-rtl {
from {
transform: translateX(var(--message-magnitude)em);
opacity: 0%;
}
to {
transform: translateX(0);
opacity: 100%;
}
}
.ml-item > .message { /* @Shapaper: 添加贝塞尔曲线动效，使消息进入 Q 弹 */
animation: message-ltr var(--duration)s var(--timing-function-message);
&:has( .message-container--align-right) {
animation-name: message-rtl;
}
}