@mrchar/cumquat 0.0.0-stage → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +90 -2
- package/dist/components/index.d.ts +4372 -0
- package/dist/components/index.js +10364 -0
- package/dist/composables/index.d.ts +1962 -0
- package/dist/composables/index.js +4135 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/package.json +62 -4
- package/style.css +2 -0
- package/themes/basic.css +2777 -0
- package/themes/dark.css +41 -0
- package/themes/glass.css +265 -0
- package/themes/high-contrast.css +45 -0
- package/themes/light.css +11 -0
package/themes/dark.css
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* 暗色主题
|
|
3
|
+
*
|
|
4
|
+
* 在 <html> 上挂 cq-theme-dark 类生效；.dark 选择器保留以兼容
|
|
5
|
+
* 仅依赖 .dark 约定的宿主。
|
|
6
|
+
* 通过 Tailwind v4 的 @layer theme 覆盖同名 token，工具类自动跟随。
|
|
7
|
+
*/
|
|
8
|
+
@layer theme {
|
|
9
|
+
.cq-theme-dark,
|
|
10
|
+
.dark {
|
|
11
|
+
/* 品牌主色 */
|
|
12
|
+
--color-cumquat-accent: #6366f1;
|
|
13
|
+
--color-cumquat-accent-hover: #818cf8;
|
|
14
|
+
--color-cumquat-accent-active: #a5b4fc;
|
|
15
|
+
--color-cumquat-accent-soft: #312e81;
|
|
16
|
+
|
|
17
|
+
/* 表面 / 背景 */
|
|
18
|
+
--color-cumquat-surface: #0f172a;
|
|
19
|
+
--color-cumquat-surface-2: #1e293b;
|
|
20
|
+
--color-cumquat-surface-3: #273449;
|
|
21
|
+
|
|
22
|
+
/* 描边 */
|
|
23
|
+
--color-cumquat-border: #334155;
|
|
24
|
+
--color-cumquat-border-strong: #475569;
|
|
25
|
+
|
|
26
|
+
/* 文本 */
|
|
27
|
+
--color-cumquat-text: #f1f5f9;
|
|
28
|
+
--color-cumquat-text-muted: #94a3b8;
|
|
29
|
+
--color-cumquat-text-inverse: #0f172a;
|
|
30
|
+
|
|
31
|
+
/* 语义状态色（主色与亮色一致，柔色底加深） */
|
|
32
|
+
--color-cumquat-success-soft: #14532d;
|
|
33
|
+
--color-cumquat-warning-soft: #713f12;
|
|
34
|
+
--color-cumquat-danger-soft: #7f1d1d;
|
|
35
|
+
--color-cumquat-info-soft: #0c4a6e;
|
|
36
|
+
|
|
37
|
+
--shadow-cumquat-overlay: 0 4px 16px rgb(0 0 0 / 0.5);
|
|
38
|
+
|
|
39
|
+
color-scheme: dark;
|
|
40
|
+
}
|
|
41
|
+
}
|
package/themes/glass.css
ADDED
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* 玻璃视觉主题（Liquid Glass）
|
|
3
|
+
*
|
|
4
|
+
* 继承 basic 主题的全部样式，仅覆盖有差异的部分：
|
|
5
|
+
* 1. token 覆盖为极通透的半透明表面（@layer theme）；
|
|
6
|
+
* 2. 为组件表面附加液态玻璃光学效果（@layer components）：
|
|
7
|
+
* - 跨浏览器基底：低透明度 + saturate + 双层 inset 边缘高光 + 对角镜面高光带；
|
|
8
|
+
* - Chromium 渐进增强：通过 SVG feTurbulence + feDisplacementMap 实现
|
|
9
|
+
* 真实的背景折射/位移（@supports 内覆盖 backdrop-filter）。
|
|
10
|
+
* 在 <html> 上挂 cq-theme-glass 类生效。
|
|
11
|
+
*
|
|
12
|
+
* 注意：玻璃效果依赖"花背景"（本主题为白色点阵），在大面积滚动区
|
|
13
|
+
* 启用重滤镜可能影响性能。
|
|
14
|
+
*/
|
|
15
|
+
@layer theme {
|
|
16
|
+
.cq-theme-glass {
|
|
17
|
+
/* 品牌主色 */
|
|
18
|
+
--color-cumquat-accent: #4f46e5;
|
|
19
|
+
--color-cumquat-accent-hover: #4338ca;
|
|
20
|
+
--color-cumquat-accent-active: #3730a3;
|
|
21
|
+
--color-cumquat-accent-soft: rgb(79 70 229 / 0.12);
|
|
22
|
+
|
|
23
|
+
/* 表面：极低不透明度，配合折射产生液态感 */
|
|
24
|
+
--color-cumquat-surface: rgb(255 255 255 / 0.1);
|
|
25
|
+
--color-cumquat-surface-2: rgb(255 255 255 / 0.07);
|
|
26
|
+
--color-cumquat-surface-3: rgb(255 255 255 / 0.04);
|
|
27
|
+
|
|
28
|
+
/* 描边：亮色半透明描边模拟玻璃边缘 */
|
|
29
|
+
--color-cumquat-border: rgb(255 255 255 / 0.7);
|
|
30
|
+
--color-cumquat-border-strong: rgb(255 255 255 / 0.9);
|
|
31
|
+
|
|
32
|
+
/* 文本 */
|
|
33
|
+
--color-cumquat-text: #1e1b4b;
|
|
34
|
+
--color-cumquat-text-muted: rgb(30 27 75 / 0.62);
|
|
35
|
+
--color-cumquat-text-inverse: #ffffff;
|
|
36
|
+
|
|
37
|
+
/* 语义状态色：柔色底改半透明 */
|
|
38
|
+
--color-cumquat-success: #15803d;
|
|
39
|
+
--color-cumquat-success-soft: rgb(22 163 74 / 0.12);
|
|
40
|
+
--color-cumquat-warning: #b45309;
|
|
41
|
+
--color-cumquat-warning-soft: rgb(217 119 6 / 0.12);
|
|
42
|
+
--color-cumquat-danger: #dc2626;
|
|
43
|
+
--color-cumquat-danger-soft: rgb(220 38 38 / 0.1);
|
|
44
|
+
--color-cumquat-info: #0369a1;
|
|
45
|
+
--color-cumquat-info-soft: rgb(2 132 199 / 0.12);
|
|
46
|
+
|
|
47
|
+
/* 阴影更轻更散，配合通透感 */
|
|
48
|
+
--shadow-cumquat-overlay: 0 12px 40px rgb(31 38 135 / 0.12);
|
|
49
|
+
|
|
50
|
+
color-scheme: light;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@layer components {
|
|
55
|
+
/* 浮层与面板：液态玻璃基底 */
|
|
56
|
+
.cq-theme-glass .cumquat-dialog__panel,
|
|
57
|
+
.cq-theme-glass .cumquat-drawer__panel,
|
|
58
|
+
.cq-theme-glass .cumquat-dropdown__menu,
|
|
59
|
+
.cq-theme-glass .cumquat-popover__content,
|
|
60
|
+
.cq-theme-glass .cumquat-popover__arrow,
|
|
61
|
+
.cq-theme-glass .cumquat-popconfirm__content,
|
|
62
|
+
.cq-theme-glass .cumquat-popconfirm__arrow,
|
|
63
|
+
.cq-theme-glass .cumquat-tooltip__content,
|
|
64
|
+
.cq-theme-glass .cumquat-select__dropdown,
|
|
65
|
+
.cq-theme-glass .cumquat-autocomplete__dropdown,
|
|
66
|
+
.cq-theme-glass .cumquat-mention__dropdown,
|
|
67
|
+
.cq-theme-glass .cumquat-tree-select__dropdown,
|
|
68
|
+
.cq-theme-glass .cumquat-cascader__panel,
|
|
69
|
+
.cq-theme-glass .cumquat-date-picker__panel,
|
|
70
|
+
.cq-theme-glass .cumquat-time-picker__panel,
|
|
71
|
+
.cq-theme-glass .cumquat-color-picker__panel,
|
|
72
|
+
.cq-theme-glass .cumquat-tour__card,
|
|
73
|
+
.cq-theme-glass .cumquat-calendar,
|
|
74
|
+
.cq-theme-glass .cumquat-menu {
|
|
75
|
+
@apply backdrop-blur-md backdrop-saturate-180 backdrop-brightness-110;
|
|
76
|
+
position: relative;
|
|
77
|
+
overflow: hidden;
|
|
78
|
+
box-shadow:
|
|
79
|
+
inset 0 1px 1px 0 rgb(255 255 255 / 0.55),
|
|
80
|
+
inset 0 -1px 1px 0 rgb(255 255 255 / 0.3),
|
|
81
|
+
var(--shadow-cumquat-overlay);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* 镜面高光带（对角方向，屏幕混合模式） */
|
|
85
|
+
.cq-theme-glass .cumquat-dialog__panel::after,
|
|
86
|
+
.cq-theme-glass .cumquat-drawer__panel::after,
|
|
87
|
+
.cq-theme-glass .cumquat-dropdown__menu::after,
|
|
88
|
+
.cq-theme-glass .cumquat-popover__content::after,
|
|
89
|
+
.cq-theme-glass .cumquat-popconfirm__content::after,
|
|
90
|
+
.cq-theme-glass .cumquat-select__dropdown::after,
|
|
91
|
+
.cq-theme-glass .cumquat-autocomplete__dropdown::after,
|
|
92
|
+
.cq-theme-glass .cumquat-mention__dropdown::after,
|
|
93
|
+
.cq-theme-glass .cumquat-tree-select__dropdown::after,
|
|
94
|
+
.cq-theme-glass .cumquat-cascader__panel::after,
|
|
95
|
+
.cq-theme-glass .cumquat-date-picker__panel::after,
|
|
96
|
+
.cq-theme-glass .cumquat-time-picker__panel::after,
|
|
97
|
+
.cq-theme-glass .cumquat-color-picker__panel::after,
|
|
98
|
+
.cq-theme-glass .cumquat-tour__card::after,
|
|
99
|
+
.cq-theme-glass .cumquat-calendar::after,
|
|
100
|
+
.cq-theme-glass .cumquat-menu::after {
|
|
101
|
+
content: '';
|
|
102
|
+
position: absolute;
|
|
103
|
+
inset: 0;
|
|
104
|
+
border-radius: inherit;
|
|
105
|
+
pointer-events: none;
|
|
106
|
+
background: linear-gradient(
|
|
107
|
+
135deg,
|
|
108
|
+
rgb(255 255 255 / 0.25) 0%,
|
|
109
|
+
rgb(255 255 255 / 0.05) 30%,
|
|
110
|
+
transparent 50%,
|
|
111
|
+
transparent 100%
|
|
112
|
+
);
|
|
113
|
+
mix-blend-mode: screen;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* 消息、卡片、拖拽区等悬浮表面 */
|
|
117
|
+
.cq-theme-glass .cumquat-message,
|
|
118
|
+
.cq-theme-glass .cumquat-notification,
|
|
119
|
+
.cq-theme-glass .cumquat-alert,
|
|
120
|
+
.cq-theme-glass .cumquat-card,
|
|
121
|
+
.cq-theme-glass .cumquat-upload__dragger,
|
|
122
|
+
.cq-theme-glass .cumquat-carousel__prev,
|
|
123
|
+
.cq-theme-glass .cumquat-carousel__next,
|
|
124
|
+
.cq-theme-glass .cumquat-back-top,
|
|
125
|
+
.cq-theme-glass .cumquat-float-button__action,
|
|
126
|
+
.cq-theme-glass .cumquat-float-button__trigger,
|
|
127
|
+
.cq-theme-glass .cumquat-qrcode,
|
|
128
|
+
.cq-theme-glass .cumquat-code-card {
|
|
129
|
+
@apply backdrop-blur-md backdrop-saturate-180 backdrop-brightness-110;
|
|
130
|
+
position: relative;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
box-shadow:
|
|
133
|
+
inset 0 1px 1px 0 rgb(255 255 255 / 0.55),
|
|
134
|
+
inset 0 -1px 1px 0 rgb(255 255 255 / 0.3),
|
|
135
|
+
0 6px 28px 0 rgb(31 38 135 / 0.08);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.cq-theme-glass .cumquat-message::after,
|
|
139
|
+
.cq-theme-glass .cumquat-notification::after,
|
|
140
|
+
.cq-theme-glass .cumquat-alert::after,
|
|
141
|
+
.cq-theme-glass .cumquat-card::after,
|
|
142
|
+
.cq-theme-glass .cumquat-upload__dragger::after,
|
|
143
|
+
.cq-theme-glass .cumquat-carousel__prev::after,
|
|
144
|
+
.cq-theme-glass .cumquat-carousel__next::after,
|
|
145
|
+
.cq-theme-glass .cumquat-back-top::after,
|
|
146
|
+
.cq-theme-glass .cumquat-float-button__action::after,
|
|
147
|
+
.cq-theme-glass .cumquat-float-button__trigger::after,
|
|
148
|
+
.cq-theme-glass .cumquat-qrcode::after,
|
|
149
|
+
.cq-theme-glass .cumquat-code-card::after {
|
|
150
|
+
content: '';
|
|
151
|
+
position: absolute;
|
|
152
|
+
inset: 0;
|
|
153
|
+
border-radius: inherit;
|
|
154
|
+
pointer-events: none;
|
|
155
|
+
background: linear-gradient(
|
|
156
|
+
135deg,
|
|
157
|
+
rgb(255 255 255 / 0.25) 0%,
|
|
158
|
+
rgb(255 255 255 / 0.05) 30%,
|
|
159
|
+
transparent 50%,
|
|
160
|
+
transparent 100%
|
|
161
|
+
);
|
|
162
|
+
mix-blend-mode: screen;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* 标签与柔色徽章：小面积液态玻璃，与主表面保持一致的通透度 */
|
|
166
|
+
.cq-theme-glass .cumquat-tag,
|
|
167
|
+
.cq-theme-glass .cumquat-badge__sup {
|
|
168
|
+
@apply backdrop-blur-md backdrop-saturate-180 backdrop-brightness-110;
|
|
169
|
+
box-shadow:
|
|
170
|
+
inset 0 1px 1px 0 rgb(255 255 255 / 0.45),
|
|
171
|
+
inset 0 -1px 1px 0 rgb(255 255 255 / 0.25);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* 表单控件：输入框、触发器、分段器、滑块手柄 */
|
|
175
|
+
.cq-theme-glass .cumquat-input__inner,
|
|
176
|
+
.cq-theme-glass .cumquat-select__trigger,
|
|
177
|
+
.cq-theme-glass .cumquat-autocomplete__input,
|
|
178
|
+
.cq-theme-glass .cumquat-mention__input,
|
|
179
|
+
.cq-theme-glass .cumquat-input-number,
|
|
180
|
+
.cq-theme-glass .cumquat-date-picker__trigger,
|
|
181
|
+
.cq-theme-glass .cumquat-time-picker__trigger,
|
|
182
|
+
.cq-theme-glass .cumquat-color-picker__trigger,
|
|
183
|
+
.cq-theme-glass .cumquat-segmented,
|
|
184
|
+
.cq-theme-glass .cumquat-slider__thumb {
|
|
185
|
+
@apply backdrop-blur-md backdrop-saturate-180 backdrop-brightness-110;
|
|
186
|
+
box-shadow:
|
|
187
|
+
inset 0 1px 1px 0 rgb(255 255 255 / 0.45),
|
|
188
|
+
inset 0 -1px 1px 0 rgb(255 255 255 / 0.25);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* 按钮（次要与幽灵态有表面背景，液态化后透出底层） */
|
|
192
|
+
.cq-theme-glass .cumquat-button--secondary,
|
|
193
|
+
.cq-theme-glass .cumquat-button--ghost:hover {
|
|
194
|
+
@apply backdrop-blur-md backdrop-saturate-180 backdrop-brightness-110;
|
|
195
|
+
box-shadow:
|
|
196
|
+
inset 0 1px 1px 0 rgb(255 255 255 / 0.5),
|
|
197
|
+
inset 0 -1px 1px 0 rgb(255 255 255 / 0.3);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Chromium 渐进增强：SVG 位移滤镜实现真实折射 */
|
|
201
|
+
@supports (backdrop-filter: url(#test)) {
|
|
202
|
+
.cq-theme-glass .cumquat-dialog__panel,
|
|
203
|
+
.cq-theme-glass .cumquat-drawer__panel,
|
|
204
|
+
.cq-theme-glass .cumquat-dropdown__menu,
|
|
205
|
+
.cq-theme-glass .cumquat-popover__content,
|
|
206
|
+
.cq-theme-glass .cumquat-popconfirm__content,
|
|
207
|
+
.cq-theme-glass .cumquat-tooltip__content,
|
|
208
|
+
.cq-theme-glass .cumquat-select__dropdown,
|
|
209
|
+
.cq-theme-glass .cumquat-autocomplete__dropdown,
|
|
210
|
+
.cq-theme-glass .cumquat-mention__dropdown,
|
|
211
|
+
.cq-theme-glass .cumquat-tree-select__dropdown,
|
|
212
|
+
.cq-theme-glass .cumquat-cascader__panel,
|
|
213
|
+
.cq-theme-glass .cumquat-date-picker__panel,
|
|
214
|
+
.cq-theme-glass .cumquat-time-picker__panel,
|
|
215
|
+
.cq-theme-glass .cumquat-color-picker__panel,
|
|
216
|
+
.cq-theme-glass .cumquat-tour__card,
|
|
217
|
+
.cq-theme-glass .cumquat-calendar,
|
|
218
|
+
.cq-theme-glass .cumquat-menu {
|
|
219
|
+
backdrop-filter: blur(2px) url(#cumquat-liquid-refraction) saturate(180%) brightness(1.1);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.cq-theme-glass .cumquat-message,
|
|
223
|
+
.cq-theme-glass .cumquat-notification,
|
|
224
|
+
.cq-theme-glass .cumquat-alert,
|
|
225
|
+
.cq-theme-glass .cumquat-card,
|
|
226
|
+
.cq-theme-glass .cumquat-upload__dragger,
|
|
227
|
+
.cq-theme-glass .cumquat-carousel__prev,
|
|
228
|
+
.cq-theme-glass .cumquat-carousel__next,
|
|
229
|
+
.cq-theme-glass .cumquat-back-top,
|
|
230
|
+
.cq-theme-glass .cumquat-float-button__action,
|
|
231
|
+
.cq-theme-glass .cumquat-float-button__trigger,
|
|
232
|
+
.cq-theme-glass .cumquat-qrcode,
|
|
233
|
+
.cq-theme-glass .cumquat-code-card {
|
|
234
|
+
backdrop-filter: blur(2px) url(#cumquat-liquid-refraction) saturate(180%) brightness(1.1);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
/* 小面积表面同样进入折射组，保持一致的若隐若现 */
|
|
238
|
+
.cq-theme-glass .cumquat-tag,
|
|
239
|
+
.cq-theme-glass .cumquat-badge__sup,
|
|
240
|
+
.cq-theme-glass .cumquat-input__inner,
|
|
241
|
+
.cq-theme-glass .cumquat-select__trigger,
|
|
242
|
+
.cq-theme-glass .cumquat-autocomplete__input,
|
|
243
|
+
.cq-theme-glass .cumquat-mention__input,
|
|
244
|
+
.cq-theme-glass .cumquat-input-number,
|
|
245
|
+
.cq-theme-glass .cumquat-date-picker__trigger,
|
|
246
|
+
.cq-theme-glass .cumquat-time-picker__trigger,
|
|
247
|
+
.cq-theme-glass .cumquat-color-picker__trigger,
|
|
248
|
+
.cq-theme-glass .cumquat-segmented,
|
|
249
|
+
.cq-theme-glass .cumquat-slider__thumb,
|
|
250
|
+
.cq-theme-glass .cumquat-button--secondary,
|
|
251
|
+
.cq-theme-glass .cumquat-button--ghost:hover {
|
|
252
|
+
backdrop-filter: blur(2px) url(#cumquat-liquid-refraction) saturate(180%) brightness(1.1);
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
@layer base {
|
|
258
|
+
/* 页面底层：白色背景 + 细腻黑色点阵，演示玻璃的半透明与边缘折射 */
|
|
259
|
+
.cq-theme-glass body {
|
|
260
|
+
background-color: #ffffff;
|
|
261
|
+
background-image: radial-gradient(circle, rgb(0 0 0 / 0.12) 1px, transparent 1.5px);
|
|
262
|
+
background-size: 16px 16px;
|
|
263
|
+
background-attachment: fixed;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* 高对比主题
|
|
3
|
+
*
|
|
4
|
+
* 纯白表面、纯黑文本与描边，状态色加深加饱和，弱化阴影与柔色底，
|
|
5
|
+
* 服务低视力与强光环境。在 <html> 上挂 cq-theme-high-contrast 类生效。
|
|
6
|
+
* 通过 Tailwind v4 的 @layer theme 覆盖同名 token，工具类自动跟随。
|
|
7
|
+
*/
|
|
8
|
+
@layer theme {
|
|
9
|
+
.cq-theme-high-contrast {
|
|
10
|
+
/* 品牌主色：提高与白色的对比度 */
|
|
11
|
+
--color-cumquat-accent: #1d4ed8;
|
|
12
|
+
--color-cumquat-accent-hover: #1e40af;
|
|
13
|
+
--color-cumquat-accent-active: #1e3a8a;
|
|
14
|
+
--color-cumquat-accent-soft: #ffffff;
|
|
15
|
+
|
|
16
|
+
/* 表面：取消灰色层级，统一纯白 */
|
|
17
|
+
--color-cumquat-surface: #ffffff;
|
|
18
|
+
--color-cumquat-surface-2: #ffffff;
|
|
19
|
+
--color-cumquat-surface-3: #ffffff;
|
|
20
|
+
|
|
21
|
+
/* 描边：纯黑，保证任何边界可辨 */
|
|
22
|
+
--color-cumquat-border: #000000;
|
|
23
|
+
--color-cumquat-border-strong: #000000;
|
|
24
|
+
|
|
25
|
+
/* 文本 */
|
|
26
|
+
--color-cumquat-text: #000000;
|
|
27
|
+
--color-cumquat-text-muted: #1f2937;
|
|
28
|
+
--color-cumquat-text-inverse: #ffffff;
|
|
29
|
+
|
|
30
|
+
/* 语义状态色：加深以满足对比度，柔色底改为白底 */
|
|
31
|
+
--color-cumquat-success: #166534;
|
|
32
|
+
--color-cumquat-success-soft: #ffffff;
|
|
33
|
+
--color-cumquat-warning: #92400e;
|
|
34
|
+
--color-cumquat-warning-soft: #ffffff;
|
|
35
|
+
--color-cumquat-danger: #b91c1c;
|
|
36
|
+
--color-cumquat-danger-soft: #ffffff;
|
|
37
|
+
--color-cumquat-info: #075985;
|
|
38
|
+
--color-cumquat-info-soft: #ffffff;
|
|
39
|
+
|
|
40
|
+
/* 弱化阴影，边界完全交给描边表达 */
|
|
41
|
+
--shadow-cumquat-overlay: 0 0 0 2px #000000;
|
|
42
|
+
|
|
43
|
+
color-scheme: light;
|
|
44
|
+
}
|
|
45
|
+
}
|